/* ==========================================================================
   APEX & Omega Terminal — site stylesheet.
   SOURCE FILE: site-src/assets/css/base.css. The served file, site/assets/css/
   style.css, is GENERATED by site-src/build.py (this file + the first site's
   component CSS, prefixed .live-scope + the terminal mock). Do not edit it.

   Hero + navbar follow the owner's spec 1, the light vault band and the mobile
   sheet spec 3, the closing page and stats spec 2. Everything else is house
   design in the same black-glass language.
   Single theme by choice: pure black, one pale-blue accent, one light band.
   Motion is NOT gated on the OS reduce-motion flag: the owner asked to see it.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

html, body { background: #000000 !important; color: #ffffff; }

:root {
  --bg: #000000;
  --bg-deep: #000000;
  --surface: #0c0c0e;
  --surface-2: #141416;
  --surface-3: #1c1c20;
  --border: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.11);

  --text: #ffffff;
  --text-dim: #cfd2d8;
  --muted: #9a9a9a;
  --muted-deep: #7a7d84;
  --stat: #d8d8d8;

  --accent: #b4c0ff;                  /* the hero gradient's end colour, reused as the one accent */
  --gold: #b4c0ff;                    /* the live site's accent name, mapped onto ours */
  --gold-bright: #d5def2;
  --gold-deep: #7a8ccc;
  --blue: #3054ff;
  --blue-hover: #2040e0;
  --up: #3FB950;
  --down: #F85149;
  --warn: #D29922;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', Times, serif;
  --inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the vault heading. Was Helvetica Now on a third-party host: 63 KB in an old
     format, render-blocking, and a licence we do not hold. Inter is already here. */
  --display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  --vault-text: #192837;
  --vault-accent: #7342E2;
  --vault-bg: #F2F2EE;

  /* the live site's spacing / radius / motion tokens, used by its ported sections */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px;
  --t-fast: 140ms cubic-bezier(.2,.8,.3,1);
  --t-base: 220ms cubic-bezier(.2,.8,.3,1);
  --t-slow: 420ms cubic-bezier(.2,.8,.3,1);

  --maxw: 1200px;
  --gutter: 24px;
  --nav-h: 72px;
  color-scheme: dark;
}

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono var';
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ---------- 2. Reset ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  overflow-x: hidden; position: relative;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }
dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: rgba(180, 192, 255, 0.35); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
code.inline {
  font-family: var(--mono); font-size: .88em; color: var(--accent);
  background: rgba(180, 192, 255, 0.08); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: #fff; color: #000; font-weight: 600; padding: 12px 20px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* ---------- 2b. The cursor-lit grid ---------------------------------------
   One fixed overlay for the whole page: a faint grid that is always there, and
   a bright one revealed only in a soft disc around the pointer (main.js feeds
   --mx / --my in viewport pixels).

   Both layers only ever ADD light (plus-lighter), which is what makes this work
   on one page with two worlds: the lines glow over the black sections and fade
   to nothing over the light vault band, with no per-section bookkeeping. Where
   plus-lighter is unsupported the layers fall back to ordinary alpha, which
   looks near-identical at these values.

   It sits below the nav (50) and the menu (60+), above the page content. The
   lines cross text, deliberately and at a very low alpha, the same way .grain
   does — that film over everything is the effect.
   ------------------------------------------------------------------------ */

.page-grid {
  /* z-index 1, not 45: high enough to sit over every section background and
     over the videos, low enough that the content wrappers below (also z-index 1
     but later in the document) paint on top of it. The lines cross the page,
     never the words. */
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* The blend belongs HERE, not on the layers inside. A fixed element with a
     z-index already makes a stacking context, which isolates its children from
     the page: a blend mode set on them would composite against this element's
     own empty backdrop and add nothing. Set on the element itself, it blends
     with the page behind, which is the whole point. */
  mix-blend-mode: plus-lighter;
}
.page-grid span {
  position: absolute; inset: 0; display: block;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--line-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, var(--line-a)) 1px, transparent 1px);
  background-size: var(--cell, 64px) var(--cell, 64px);
}
.page-grid .grid-base { --line-a: 0.055; }
.page-grid .grid-hot {
  --line-a: 0.42;
  opacity: 0; transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(340px 340px at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 70%);
          mask-image: radial-gradient(340px 340px at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 70%);
}
/* a second, tighter disc: the core of the glow, so the lines nearest the
   pointer read as lit rather than merely visible */
.page-grid .grid-core {
  --line-a: 0.68;
  opacity: 0; transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(130px 130px at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 78%);
          mask-image: radial-gradient(130px 130px at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 78%);
}
html.has-cursor .page-grid .grid-hot,
html.has-cursor .page-grid .grid-core { opacity: 1; }

/* coarse pointers (touch) never hover, so the bright layers would only ever
   flash on tap: leave the quiet base grid and nothing else */
@media (hover: none) {
  .page-grid .grid-hot, .page-grid .grid-core { display: none; }
}
@media (max-width: 640px) { .page-grid { --cell: 48px; } }

/* film grain over everything, the Vesper page's top layer */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Navbar (spec 1) ------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  padding: 16px var(--gutter);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.3s ease;
}
.nav[data-scrolled='true'] {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.sunburst { width: 24px; height: 24px; color: #fff; flex-shrink: 0; }
.nav-wordmark { font: 600 15px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.nav-wordmark-sub {
  font: 500 11px/1 var(--inter); color: rgba(255, 255, 255, 0.55);
  border-left: 1px solid rgba(255, 255, 255, 0.25); padding-left: 10px; letter-spacing: 0.04em;
}
@media (max-width: 520px) { .nav-wordmark-sub { display: none; } }

.nav-center { display: none; align-items: center; gap: 32px; }
.nav-center a {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 14px/1 var(--sans); color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}
.nav-center a:hover { color: #fff; }
.nav-center .chev { width: 14px; height: 14px; }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-link-demo { display: none; font: 500 14px/1 var(--sans); color: rgba(255, 255, 255, 0.8); transition: color 0.2s ease; }
.nav-link-demo:hover { color: #fff; }
.nav-cta {
  display: none; align-items: center;
  background: #fff; color: #000; border-radius: 9999px;
  padding: 10px 20px; font: 600 14px/1 var(--sans);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255, 255, 255, 0.25); }
.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: #fff; border-radius: 8px;
}
.nav-burger svg { width: 24px; height: 24px; }
.nav-burger .ico-close { display: none; }
body.menu-open .nav-burger .ico-open { display: none; }
body.menu-open .nav-burger .ico-close { display: block; }

@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav-center { display: flex; }
  .nav-burger { display: none; }
}
@media (min-width: 1180px) { .nav-link-demo { display: inline-block; } }

/* ---------- 4. Mobile sheet (spec 3) ------------------------------------- */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(25, 40, 55, 0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s ease;
}
body.menu-open .sheet-backdrop { opacity: 1; }
.sheet {
  position: fixed; top: 0; right: 0; z-index: 70;
  width: min(88vw, 360px); height: 100vh; height: 100dvh;
  background: #CFC8C5; color: var(--vault-text);
  box-shadow: -12px 0 48px rgba(25, 40, 55, 0.18);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 22px calc(22px + env(safe-area-inset-bottom, 0px));
  font-family: var(--inter);
}
body.menu-open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.sheet-brand { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--inter); letter-spacing: -0.01em; }
.sheet-logo { width: 32px; height: 32px; }
.sheet-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: var(--vault-text); }
.sheet-close svg { width: 22px; height: 22px; }
.sheet-close:hover { background: rgba(25, 40, 55, 0.08); }
.sheet-rule { height: 1px; background: rgba(25, 40, 55, 0.18); margin: 18px 0 10px; }
.sheet-links { display: flex; flex-direction: column; }
.sheet-links a {
  padding: 13px 4px; font: 500 18px/1.2 var(--inter);
  border-bottom: 1px solid rgba(25, 40, 55, 0.08);
  opacity: 0; transform: translateX(14px);
}
body.menu-open .sheet-links a { animation: sheet-link 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.menu-open .sheet-links a:nth-child(1) { animation-delay: 0.18s; }
body.menu-open .sheet-links a:nth-child(2) { animation-delay: 0.25s; }
body.menu-open .sheet-links a:nth-child(3) { animation-delay: 0.32s; }
body.menu-open .sheet-links a:nth-child(4) { animation-delay: 0.39s; }
body.menu-open .sheet-links a:nth-child(5) { animation-delay: 0.46s; }
body.menu-open .sheet-links a:nth-child(6) { animation-delay: 0.53s; }
body.menu-open .sheet-links a:nth-child(7) { animation-delay: 0.60s; }
@keyframes sheet-link { to { opacity: 1; transform: none; } }
.sheet-ctas { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.sheet-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 9999px; font: 600 15px/1 var(--inter);
}
.sheet-btn-accent { background: var(--vault-accent); color: #fff; }
.sheet-btn-light { background: var(--vault-bg); color: var(--vault-text); }

/* ---------- 5. Hero (spec 1) --------------------------------------------- */

.hero {
  position: relative; width: 100%;
  min-height: 100vh; min-height: 100svh;
  background: #000; color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 96px;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 62% at 50% 52%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 55%, transparent 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 22%),
    rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}

.hero-glow { position: absolute; border-radius: 50%; filter: blur(120px); mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.hero-glow-tl { top: -20%; left: 20%; width: 600px; height: 600px; background: rgba(30, 58, 138, 0.2); }
.hero-glow-br { bottom: -10%; right: 20%; width: 500px; height: 500px; background: rgba(49, 46, 129, 0.2); }
/* smoke merge into the black page below: a solid black band whose inner edge is
   torn by animated noise (the #smoke-* filters in the page's sprite) */
.hero::after {
  content: ''; position: absolute; left: -6%; right: -6%; bottom: -60px; height: calc(clamp(80px, 9vw, 130px) + 60px);
  background: linear-gradient(to top, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  filter: url(#smoke-a); transform-origin: bottom; pointer-events: none; z-index: 2;
  animation: feather-up 11s ease-in-out infinite alternate;
}

.hero-content {
  position: relative; z-index: 10;
  max-width: 64rem; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 48px;
}
.hero-pre { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: #fff; text-wrap: balance; }
.hero-title {
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--sans); font-weight: 600;
  font-size: 60px; line-height: 0.9; letter-spacing: -0.05em;
  background: linear-gradient(to bottom, #ffffff, #ffffff, var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}
.hero-sub {
  font-family: var(--sans); font-size: 18px; line-height: 1.65;
  color: #fff; opacity: 0.7; max-width: 36rem; text-wrap: pretty;
}
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 24px; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 24px; border-radius: 9999px;
  background: #fff; color: #0a0400;
  font: 500 18px/1 var(--sans); white-space: nowrap;
  transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.btn-pill:hover { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); transform: scale(1.05); }
.btn-pill-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); display: grid; place-items: center;
  transition: background 0.2s ease;
}
.btn-pill-arrow svg { width: 20px; height: 20px; color: #fff; }
.btn-pill:hover .btn-pill-arrow { background: var(--blue-hover); }
.btn-pill .spin { display: none; width: 18px; height: 18px; animation: spin 0.7s linear infinite; }
.btn-pill[aria-busy='true'] { pointer-events: none; opacity: 0.82; }
.btn-pill[aria-busy='true'] .spin { display: block; }
.btn-pill[aria-busy='true'] .btn-pill-arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-ghostlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px;
  color: rgba(255, 255, 255, 0.7); font: 500 16px/1 var(--sans);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: color 0.2s ease, background 0.2s ease;
}
.btn-ghostlink svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.btn-ghostlink:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.btn-ghostlink:hover svg { transform: translateX(4px); }

@media (min-width: 640px) {
  .hero-pre { font-size: 48px; }
  .hero-title { font-size: 96px; }
  .hero-sub { font-size: 20px; }
  .hero-ctas { flex-direction: row; }
}
@media (min-width: 1024px) { .hero-title { font-size: 136px; } }

@keyframes m-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes m-scale  { from { opacity: 0; transform: scale(0.9); }        to { opacity: 1; transform: none; } }
@keyframes m-fade   { from { opacity: 0; }                                to { opacity: 0.7; } }
.m-fadeup      { animation: m-fadeup 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.m-scale       { animation: m-scale  0.6s 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.m-fade        { animation: m-fade   0.6s 0.4s ease both; }
.m-fadeup-late { animation: m-fadeup 0.5s 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

/* the feathers */
/* scale only: a vertical shift would uncover a sliver of the section behind the band */
@keyframes feather-up   { from { transform: scaleY(1); } to { transform: scaleY(1.14); } }
@keyframes feather-down { from { transform: scaleY(1); } to { transform: scaleY(1.14); } }

/* ---------- 6. Sections (house) ------------------------------------------ */

/* z-index 2 puts every block of copy above .page-grid (1), so the grid lines run
   behind the page and never cross the words. Stated as a higher number rather
   than relying on document order, which is too easy to break by moving markup. */
.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }
.section { padding-block: clamp(56px, 6.5vw, 96px); border-top: 1px solid var(--border-soft); position: relative; }
.section-head { max-width: 740px; margin-bottom: clamp(32px, 4vw, 48px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--inter); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); opacity: 0.6; }
.section h2 {
  font: 600 clamp(30px, 4.2vw, 50px)/1.08 var(--sans);
  letter-spacing: -0.03em; text-wrap: balance;
}
.section h2 em { font: italic 400 1.05em var(--serif); color: var(--muted); letter-spacing: -0.01em; }
.section-lede, .section-head > p:not(.eyebrow) {
  margin-top: 18px; font: 400 clamp(16px, 1.5vw, 18px)/1.6 var(--sans); color: var(--muted); max-width: 62ch;
}
.section-head > p + p { margin-top: 12px; }
.section-lede code { font-family: var(--mono); font-size: 0.9em; color: var(--accent); }

/* ---------- 7. The desk stage --------------------------------------------- */

.desk .section-head { margin-inline: auto; text-align: center; }
.desk .section-head .eyebrow::before { display: none; }
.desk-stage { position: relative; max-width: 980px; margin-inline: auto; }
.desk-stage::before {
  content: ''; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, rgba(180, 192, 255, 0.12), transparent 70%);
  filter: blur(40px);
}

/* ---------- 8. The two terminals ----------------------------------------- */

.terminals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.terminal-card {
  position: relative; display: flex; flex-direction: column;
  padding: 32px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--glass); overflow: hidden;
}
.terminal-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.terminal-card[data-app='omega'] { --edge: rgba(255, 255, 255, 0.5); }
.terminal-card[data-app='apex']  { --edge: rgba(180, 192, 255, 0.85); border-color: rgba(180, 192, 255, 0.28); }
.terminal-flag {
  position: absolute; top: 24px; right: 24px;
  font: 500 11px/1 var(--inter); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(180, 192, 255, 0.35); border-radius: 999px; padding: 6px 10px;
}
.terminal-role { font: 400 12.5px/1 var(--inter); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.terminal-role em { font: italic 400 1.5em var(--serif); text-transform: none; letter-spacing: 0; color: #fff; }
.terminal-card h3 { font: 600 28px/1.1 var(--sans); letter-spacing: -0.02em; margin: 12px 0 12px; }
.terminal-desc { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.terminal-list { display: grid; gap: 12px; margin-bottom: 26px; }
.terminal-list li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.terminal-list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.terminal-list b { color: #fff; font-weight: 600; }
.terminal-meta {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 12.5px/1 var(--inter); color: var(--muted);
}
.terminal-meta b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.terminals-note { margin-top: 24px; text-align: center; font: 400 14px/1.6 var(--inter); color: var(--muted); }

/* ---------- 9. Broker pills (spec 2's liquid-metal pill) ----------------- */

.mpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.mpill {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px; border-radius: 7px;
  border: 1px solid rgba(198, 198, 198, 0.55);
  background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%);
  color: #f3f3f3; font: 400 14px/1 var(--inter); letter-spacing: -0.01em; white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.mpill small { font-size: 11.5px; color: #b0b0b0; }
.mpill::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.6s ease;
}
.mpill:hover {
  border-color: rgba(235, 235, 235, 0.9);
  background: linear-gradient(105deg, #111 0%, #3a3a3a 45%, #6a6a6a 100%);
  box-shadow: 0 0 18px rgba(200, 210, 230, 0.18);
}
.mpill:hover::before { transform: translateX(120%); }

/* ---------- 10. Vault band (spec 3) -------------------------------------- */

.vault {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  background: var(--vault-bg); color: var(--vault-text); font-family: var(--inter);
}
/* The supplied clip is a close-up, not the wide shot the brief asked for, so bias it
   right to keep the subject clear of the copy and deepen the left scrim. */
.vault-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
.vault-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(242, 242, 238, 0.97) 0%, rgba(242, 242, 238, 0.93) 30%, rgba(242, 242, 238, 0.6) 52%, rgba(242, 242, 238, 0.12) 100%),
    radial-gradient(ellipse 46% 80% at 22% 50%, rgba(242, 242, 238, 0.85), transparent 70%);
}
/* smoke merges with the black above and below: solid black bands whose inner
   edges are torn by animated noise (the #smoke-* filters in the page's sprite) */
.vault::before, .vault::after {
  content: ''; position: absolute; left: -6%; right: -6%; height: calc(clamp(80px, 9vw, 130px) + 60px);
  pointer-events: none; z-index: 2;
}
.vault::before {
  top: -60px; transform-origin: top; filter: url(#smoke-a);
  background: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  animation: feather-down 10s ease-in-out infinite alternate;
}
.vault::after {
  bottom: -60px; transform-origin: bottom; filter: url(#smoke-b);
  background: linear-gradient(to top, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  animation: feather-up 10s ease-in-out infinite alternate;
  animation-delay: -5s;
}
.vault-inner {
  position: relative; z-index: 3; width: 100%; max-width: 1280px; margin-inline: auto;
  padding: clamp(110px, 12vw, 160px) 20px clamp(96px, 10vw, 140px);
}
.vault-copy { max-width: 560px; }
.vault-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.65rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--vault-text); margin-bottom: 24px; text-wrap: balance;
}
.vault-ico {
  display: inline-block; width: 24px; height: 24px; vertical-align: middle;
  position: relative; top: -2px; margin: 0 0.2em; color: var(--vault-text);
}
.vault-sub { font-size: clamp(0.9rem, 2.5vw, 1.1rem); line-height: 1.65; opacity: 0.8; max-width: 560px; margin-bottom: 28px; }
.vault-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-width: 210px; padding: 17px 24px; border-radius: 50px;
  background: var(--vault-accent); color: #fff;
  font: 600 clamp(0.9rem, 2vw, 1rem)/1 var(--inter);
  box-shadow: 0 4px 24px rgba(115, 66, 226, 0.28);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.vault-cta svg { width: 20px; height: 20px; }
.vault-cta:hover { transform: scale(1.04); filter: brightness(1.1); }
.vault-cta:active { transform: scale(0.96); }
@media (min-width: 640px) { .vault-inner { padding-inline: 32px; } }

@keyframes v-fadeup { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.reveal-scope.armed .v-fadeup { opacity: 0; }
.reveal-scope.in-view .v-fadeup { animation: v-fadeup 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal-scope.in-view .v-2 { animation-delay: 0.15s; }
.reveal-scope.in-view .v-3 { animation-delay: 0.30s; }

/* ---------- 11. Download ------------------------------------------------- */

.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dl-card {
  display: flex; flex-direction: column;
  padding: 32px; border: 1px solid var(--border); border-radius: 18px; background: var(--glass);
}
.dl-card[data-app='apex'] { border-color: rgba(180, 192, 255, 0.35); }
.dl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dl-head h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -0.02em; }
.dl-role { font: 500 11px/1 var(--inter); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dl-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  padding-block: 18px; margin-bottom: 18px; border-block: 1px solid var(--border-soft);
}
.dl-facts dt { font: 500 10.5px/1 var(--inter); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dl-facts dd { font: 500 15px/1.2 var(--inter); color: #fff; font-variant-numeric: tabular-nums; }
.dl-hash-label { font: 500 10.5px/1 var(--inter); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dl-hash-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px; }
.dl-hash {
  flex: 1; min-width: 0; display: block; font: 400 11.5px/1.5 var(--mono); color: var(--muted);
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 8px 12px; overflow-wrap: anywhere;
}
.copy-btn {
  flex-shrink: 0; width: 38px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn .ok { display: none; color: var(--up); }
.copy-btn[data-copied='true'] .ok { display: block; }
.copy-btn[data-copied='true'] .cp { display: none; }
.btn-pill-block { width: 100%; justify-content: space-between; margin-top: auto; }
.btn-pill-dark { background: #121212; color: #fff; border: 1px solid var(--border); }
.btn-pill-dark:hover { box-shadow: 0 0 20px rgba(180, 192, 255, 0.18); }
.dl-req { font-size: 12.5px; color: var(--muted-deep); margin-top: 12px; text-align: center; }
.dl-status { font-size: 12.5px; margin-top: 8px; text-align: center; min-height: 1.4em; color: var(--muted-deep); }
.dl-status[data-tone='warn'] { color: var(--warn); }

.dl-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.dl-note {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  padding: 22px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02);
}
.dl-note-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
  font: 600 13px/1 var(--inter); color: var(--accent);
}
.dl-note h3 { font: 600 15px/1.3 var(--sans); margin-bottom: 6px; }
.dl-note p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.dl-note > div > code:not(.inline) {
  display: block; margin-top: 10px; padding: 8px 10px;
  background: #000; border: 1px solid var(--border-soft); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.8); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- 12. Modal (from the live site) -------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 24px;
  background: rgba(3, 5, 9, 0.8);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 160ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 470px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 32px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  animation: modalIn 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.modal-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(210, 153, 34, 0.12); border: 1px solid rgba(210, 153, 34, 0.3); color: var(--warn);
}
.modal-ico svg { width: 21px; height: 21px; }
.modal-ico .ico-offline { display: none; }
.modal[data-tone='offline'] .modal-ico { background: rgba(151, 161, 173, 0.12); border-color: rgba(151, 161, 173, 0.3); color: var(--muted); }
.modal[data-tone='offline'] .modal-ico .ico-offline { display: block; }
.modal[data-tone='offline'] .modal-ico .ico-maint { display: none; }
.modal h2 { font: 600 19px/1.25 var(--sans); margin-bottom: 12px; }
.modal p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.modal-actions { display: flex; gap: 12px; margin-top: 32px; }
.modal-actions .btn { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; min-height: 44px; border-radius: 8px; border: 1px solid var(--border);
  font: 550 14px/1 var(--sans); background: var(--surface-3); color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: #26262b; border-color: rgba(255, 255, 255, 0.28); }
.btn-accent { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.btn-accent:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

/* ---------- 13. Closing page (spec 2) ------------------------------------ */

.closing {
  position: relative; overflow: hidden; background: #000; color: #fff;
  font-family: var(--inter); min-height: 88vh; min-height: 88svh;
}
/* The particle field. The host takes the pointer (particles.js listens on it), so
   it must NOT be pointer-events:none — only the scrim above it is inert. */
.closing-field { position: absolute; inset: 0; z-index: 0; }
.closing-field canvas { display: block; width: 100%; height: 100%; }
.closing-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 52% 44% at 50% 46%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 60%, transparent 82%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.45) 100%);
}
.closing::before {
  content: ''; position: absolute; left: -6%; right: -6%; top: -60px; height: calc(clamp(80px, 9vw, 130px) + 60px);
  background: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  filter: url(#smoke-b); transform-origin: top; pointer-events: none; z-index: 2;
  animation: feather-down 11s ease-in-out infinite alternate;
}
/* The copy sits above the field, but it must not swallow the pointer: the field
   listens for hover across the whole footer. Only what is clickable takes clicks. */
.closing-page { pointer-events: none; }
.closing-page a, .closing-page button { pointer-events: auto; }
.closing-page {
  position: relative; z-index: 3;
  display: grid; grid-template-rows: 1fr auto auto;
  min-height: 88vh; min-height: 88dvh;
}
.closing-hero {
  display: flex; align-items: flex-end; justify-content: center;
  padding: calc(var(--nav-h) + 48px) 24px 85px; min-height: 0;
}
.closing-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; width: 100%; }
/* a soft dark pool behind the words so they never sink into a bright frame of the video */
.closing-copy::before {
  content: ''; position: absolute; inset: -18% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 55%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 55%, transparent 78%);
  filter: blur(18px);
}
.closing-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }

.vbadge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 9px 15px; border: 0; border-radius: 5px;
  background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%);
  color: #f2f2f2; font-size: 12.5px; font-weight: 400; letter-spacing: -0.01em; line-height: 1;
}
.vbadge-star { width: 18px; height: 20px; color: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)); }

.closing-title {
  display: flex; flex-direction: column; align-items: center;
  font-weight: 500; font-size: 48px; letter-spacing: -0.045em; line-height: 1.12; color: #fff;
}
.headline-line { display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em; }
.closing-title em { font: italic 400 1.08em var(--serif); letter-spacing: -0.03em; color: #c9c9c9; }
.closing-lede { max-width: 470px; margin-top: 18px; color: #9a9a9a; font-size: 15.5px; font-weight: 400; line-height: 1.55; letter-spacing: -0.015em; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

.vbtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px; border-radius: 6px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, filter 0.35s ease;
}
.vbtn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 48%, transparent 76%);
  transform: translateX(-130%); transition: transform 0.65s ease;
}
.vbtn:hover::after { transform: translateX(130%); }
.vbtn-solid {
  background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%);
  color: #111; border: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.vbtn-solid:hover {
  background: linear-gradient(180deg, #fff 0%, #f3f6ff 42%, #d5def2 100%); border-color: #f2f6ff;
  box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(186, 208, 255, 0.4), 0 8px 18px rgba(255, 255, 255, 0.14);
}
.vbtn-ghost {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.5) 46%, rgba(150, 170, 200, 0.1));
  color: #fff; border: 1px solid rgba(198, 198, 198, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.vbtn-ghost:hover {
  background: linear-gradient(135deg, rgba(210, 225, 255, 0.18), rgba(0, 0, 0, 0.35) 48%, rgba(180, 195, 220, 0.16));
  border-color: rgba(220, 230, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 24px rgba(170, 200, 255, 0.28);
}

.vstats {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 72px 36px; padding-bottom: max(36px, env(safe-area-inset-bottom));
  color: var(--stat);
}
.vstat { display: inline-flex; align-items: center; gap: 14px; font-size: 13.5px; letter-spacing: -0.015em; white-space: nowrap; }
.vstat-icon { width: 20px; height: 20px; color: #e8e8e8; flex-shrink: 0; }
.vstat-icon-wide { width: 38px; height: 21px; }

.pagefoot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: 18px 72px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.55);
  font: 400 12.5px/1.5 var(--inter); color: var(--muted);
}
.pagefoot-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.pagefoot-brand .hex { width: 14px; height: 15px; color: var(--accent); }
.pagefoot-links { display: inline-flex; gap: 18px; }
.pagefoot-links a:hover { color: #fff; }
.pagefoot-note { color: rgba(255, 255, 255, 0.45); }

/* entrance motion (spec 2): armed by JS, played when the page scrolls into view */
.closing.armed .appear { opacity: 0; }
.closing.armed .closing-title em { opacity: 0.35; filter: blur(4px); }
.closing.in-view .appear {
  animation-duration: 1.05s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--d, 0.08s);
}
.closing.in-view .appear--pop  { animation-name: in-pop; }
.closing.in-view .appear--mask { animation-name: in-mask; }
.closing.in-view .appear--soft { animation-name: in-soft; animation-duration: 1.25s; }
.closing.in-view .appear--btn  { animation-name: in-btn; }
.closing.in-view .appear--side { animation-name: in-side; }
.closing.in-view .appear--stat { animation-name: in-stat; }
.closing.in-view .vbadge-star { animation: in-star 0.9s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.closing.in-view .closing-title em { animation: in-em 1.2s 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; }
.closing.in-view .appear.is-in { animation: none; opacity: 1; transform: none; }
.d-22 { --d: 0.22s; } .d-42 { --d: 0.42s; } .d-62 { --d: 0.62s; } .d-82 { --d: 0.82s; } .d-96 { --d: 0.96s; } .d-110 { --d: 1.10s; }
.vstat:nth-child(1) { --d: 1.12s; } .vstat:nth-child(2) { --d: 1.28s; } .vstat:nth-child(3) { --d: 1.44s; }

@keyframes in-scale { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: none; } }
@keyframes in-soft  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes in-mask  { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes in-pop   { 0% { opacity: 0; transform: scale(0.9); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes in-btn   { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes in-side  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes in-stat  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes in-star  { 0% { transform: scale(0.2) rotate(-50deg); } 65% { transform: scale(1.2) rotate(8deg); } 100% { transform: none; } }
@keyframes in-em    { from { opacity: 0.35; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

@media (min-width: 1600px) {
  .closing-title { font-size: 64px; } .closing-lede { font-size: 18px; max-width: 540px; }
  .vbadge { font-size: 13.5px; margin-bottom: 26px; } .vbtn { height: 48px; font-size: 15px; }
  .vstats { padding: 0 96px 44px; } .vstat { font-size: 15px; } .vstat-icon { width: 22px; height: 22px; } .vstat-icon-wide { width: 45px; height: 24px; }
  .pagefoot { padding-inline: 96px; }
}
@media (min-width: 1920px) {
  .closing-title { font-size: 76px; } .closing-lede { font-size: 20px; max-width: 620px; }
  .vbtn { height: 52px; font-size: 16px; padding: 0 22px; }
  .vstats { padding: 0 120px 52px; } .vstat { font-size: 16px; } .vstat-icon-wide { width: 48px; height: 26px; }
  .pagefoot { padding-inline: 120px; }
}
@media (min-width: 2560px) { .closing-title { font-size: 88px; } .closing-lede { font-size: 22px; max-width: 680px; } }
@media (max-width: 1279px) and (min-width: 901px) { .closing-title { font-size: 42px; } .closing-lede { font-size: 15px; } }

/* ---------- 13b. Legal pages and the 404 page --------------------------- */

.subpage main { padding-top: calc(var(--nav-h) + 32px); min-height: 60vh; }
.live-scope .legal { display: block; max-width: 760px; margin-inline: auto; color: var(--text); font: 400 16px/1.6 var(--sans); }
.live-scope .legal h1 { color: var(--text); font-family: var(--sans); letter-spacing: -0.03em; }
.live-scope .legal h2, .live-scope .legal h3 { color: var(--text); font-family: var(--sans); }
.subpage .nav { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.pagefoot-plain { margin-top: 48px; }

/* ---------- 14. Responsive ---------------------------------------------- */

@media (max-width: 900px) {
  .terminals, .dl-grid, .dl-notes { grid-template-columns: 1fr; }
  .closing-title { font-size: 36px; } .closing-lede { font-size: 16.5px; }
  .closing-hero { padding: 96px 20px 64px; }
  .vstats { flex-direction: column; align-items: center; gap: 16px; padding: 0 20px 28px; }
  .vstat { white-space: normal; font-size: 15px; }
  .pagefoot { padding-inline: 20px; justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .terminal-card, .dl-card { padding: 24px; }
  .terminal-flag { position: static; align-self: flex-start; margin-bottom: 14px; }
  .hero-glow-tl { width: 360px; height: 360px; }
  .hero-glow-br { width: 300px; height: 300px; }
  .btn-pill { font-size: 16px; }
  .mpill { height: 40px; padding: 0 14px; }
}
@media (max-width: 560px) {
  .closing-title { font-size: 34px; }
  .closing-actions { flex-direction: column; align-items: stretch; }
  .vbtn { width: 100%; }
}

/* ---------- 15. Reduced motion ------------------------------------------- */
/* Only smooth scrolling yields to the OS flag; the owner asked to see the motion. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 16. Sections ported from the first site -----------------------
   Component rules copied from archive/site-v1/assets/css/style.css and
   prefixed with .live-scope by build.py. Tokens come from :root in base.css.
   ------------------------------------------------------------------------ */
.live-scope .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.live-scope .num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.live-scope .up   { color: var(--up); }
.live-scope .down { color: var(--down); }
.live-scope .gold { color: var(--gold); }
.live-scope .dim  { color: var(--muted); }
.live-scope .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.live-scope .feature > *, .live-scope .grid > *, .live-scope .products > * { min-width: 0; }
.live-scope .stats { border-block: 1px solid var(--border-soft); }
.live-scope .section { border-top: 0; }
.live-scope .callout p, .live-scope .risk-band p { text-wrap: pretty; }
.live-scope .feature h3 { font-family: var(--sans); }
.live-scope .legal { padding-block: 0 var(--s9); }
.live-scope .legal h1 { font-family: var(--sans); }
.live-scope .err .btn { min-height: 44px; }
/* ---------- 9. Stat strip ----------------------------------------------- */

.live-scope .stats { border-block: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(17,23,34,.55), rgba(17,23,34,0)); }
.live-scope .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); padding-block: var(--s6); }
.live-scope .stat { padding-inline: var(--s4); border-left: 1px solid var(--border-soft); }
.live-scope .stat:first-child { border-left: 0; padding-left: 0; }
.live-scope .stat dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-deep); font-weight: 500; margin-bottom: 6px;
}
.live-scope .stat dd {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 2vw, 23px); font-weight: 600; color: var(--text);
  letter-spacing: -.03em;
}
.live-scope .stat dd small { font-size: .62em; color: var(--muted); font-weight: 400; letter-spacing: 0; }
@media (max-width: 1000px) {
  .live-scope .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5) 0; }
  .live-scope .stat:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .live-scope .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .live-scope .stat { border-left: 0; padding-left: 0; }
}

/* second mock: deployed strategies */
.live-scope .term-window .win-title {
  display: flex; align-items: center; gap: var(--s2);
  height: 26px; padding-inline: var(--s3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 10px; color: var(--text-dim); font-weight: 600; letter-spacing: .03em;
}
.live-scope .term-window .win-title .spacer { margin-left: auto; display: flex; gap: 7px; color: var(--muted-deep); font-weight: 400; }
.live-scope .run-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.live-scope .run-table th {
  padding: 5px 8px; text-align: left; font-size: 9px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted-deep);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.live-scope .run-table td { padding: 6px 8px; border-bottom: 1px solid rgba(35,43,58,.4); color: var(--text-dim); }
.live-scope .run-table td.r { text-align: right; }
.live-scope .pill { display: inline-block; padding: 1px 7px; border-radius: 100px; font-size: 9px; font-weight: 600; letter-spacing: .05em; }
.live-scope .pill-run { background: rgba(63,185,80,.14);   color: var(--up);    border: 1px solid rgba(63,185,80,.3); }
.live-scope .pill-wait { background: rgba(210,153,34,.14);  color: var(--warn);  border: 1px solid rgba(210,153,34,.3); }
.live-scope .pill-done { background: rgba(151,161,173,.12); color: var(--muted); border: 1px solid rgba(151,161,173,.25); }

/* ---------- 11. Cards & grids ------------------------------------------- */

.live-scope .card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(17,23,34,.4) 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6);
  transition: border-color var(--t-base), background var(--t-base);
}
.live-scope .card:hover { border-color: #2C3647; }

.live-scope .grid { display: grid; gap: var(--s4); }
.live-scope .grid-2 { grid-template-columns: repeat(2, 1fr); }
.live-scope .grid-3 { grid-template-columns: repeat(3, 1fr); }
.live-scope .grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .live-scope .grid-4 { grid-template-columns: repeat(2, 1fr); } .live-scope .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .live-scope .grid-2, .live-scope .grid-3, .live-scope .grid-4 { grid-template-columns: 1fr; } }

/* ---------- 13. Comparison table ---------------------------------------- */

.live-scope .table-scroll {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); -webkit-overflow-scrolling: touch;
}
.live-scope table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.live-scope table.cmp caption { text-align: left; padding: var(--s4) var(--s5); color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); }
.live-scope table.cmp th, .live-scope table.cmp td { padding: var(--s3) var(--s5); text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.live-scope table.cmp thead th {
  background: var(--surface-2); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.live-scope table.cmp thead th:nth-child(2) { color: var(--accent); }
.live-scope table.cmp thead th:nth-child(3) { color: var(--gold); }
.live-scope table.cmp tbody th { font-weight: 500; color: var(--text-dim); width: 34%; }
.live-scope table.cmp tbody tr:hover td, .live-scope table.cmp tbody tr:hover th { background: rgba(255,255,255,.015); }
.live-scope table.cmp td { color: var(--muted); }
.live-scope table.cmp td.yes { color: var(--up); }
.live-scope table.cmp td.no { color: var(--muted-deep); }
.live-scope table.cmp .mark { display: inline-flex; align-items: flex-start; gap: 7px; }
.live-scope table.cmp .mark svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; }
.live-scope table.cmp tbody tr:last-child th, .live-scope table.cmp tbody tr:last-child td { border-bottom: 0; }

.live-scope .table-hint { font-size: 12px; color: var(--muted-deep); margin-top: var(--s3); }
@media (min-width: 761px) { .live-scope .table-hint { display: none; } }

/* ---------- 14. Feature blocks ------------------------------------------ */

.live-scope .feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; padding-block: var(--s7); }
.live-scope .feature + .feature { border-top: 1px solid var(--border-soft); }
.live-scope .feature[data-flip='true'] .feature-media { order: -1; }
@media (max-width: 900px) {
  .live-scope .feature { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6); }
  .live-scope .feature[data-flip='true'] .feature-media { order: 0; }
}

.live-scope .feature-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; margin-bottom: var(--s4);
}
.live-scope .feature-tag[data-scope='both'] { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.live-scope .feature-tag[data-scope='apex'] { color: var(--gold);  background: rgba(227,179,65,.1); border: 1px solid rgba(227,179,65,.3); }
.live-scope .feature h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: var(--s4); }
.live-scope .feature-copy > p { color: var(--muted); margin-bottom: var(--s4); }
.live-scope .feature-points { list-style: none; display: grid; gap: var(--s3); }
.live-scope .feature-points li { display: flex; gap: var(--s3); font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.live-scope .feature-points li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-deep); flex-shrink: 0; margin-top: 9px;
}
.live-scope .feature-points b { color: var(--text); font-weight: 550; }
.live-scope code.inline {
  font-family: var(--mono); font-size: .88em; color: var(--gold);
  background: rgba(227,179,65,.08); padding: 1px 5px; border-radius: 3px;
  overflow-wrap: anywhere;
}

.live-scope .quote {
  border-left: 2px solid var(--gold-deep); padding: var(--s2) 0 var(--s2) var(--s4);
  margin-top: var(--s5); color: var(--text-dim); font-size: 14px; font-style: italic;
}

.live-scope .panel { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); overflow: hidden; }
.live-scope .panel-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-deep); margin-bottom: var(--s4);
}

.live-scope .lanes { display: grid; gap: 7px; font-family: var(--mono); font-size: 11px; }
.live-scope .lane { display: flex; align-items: center; gap: var(--s3); }
.live-scope .lane-n {
  width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 4px; background: var(--surface-2); color: var(--muted-deep); font-size: 10px;
}
.live-scope .lane-bar {
  height: 20px; border-radius: 4px; display: flex; align-items: center;
  padding-inline: var(--s2); color: #0B0F16; font-weight: 600; font-size: 10px; letter-spacing: .04em;
}
.live-scope .lane-bar[data-w='1'] { width: 100%; background: var(--down); color: #fff; }
.live-scope .lane-bar[data-w='2'] { width: 84%;  background: var(--up); }
.live-scope .lane-bar[data-w='3'] { width: 68%;  background: var(--gold); }
.live-scope .lane-bar[data-w='4'] { width: 54%;  background: var(--gold-deep); color: #fff; }
.live-scope .lane-bar[data-w='5'] { width: 38%;  background: #2E3949; color: var(--text-dim); }
.live-scope .lane-bar[data-w='6'] { width: 24%;  background: var(--surface-3); color: var(--muted); }

.live-scope .stack { display: grid; gap: 5px; font-family: var(--mono); font-size: 10.5px; }
.live-scope .stack-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 8px var(--s3); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim);
}
.live-scope .stack-row[data-hi='true'] { border-color: rgba(227,179,65,.35); background: rgba(227,179,65,.06); color: var(--gold); }
.live-scope .stack-row .tagr { color: var(--muted-deep); font-size: 9.5px; }
.live-scope .stack-arrow { text-align: center; color: var(--muted-deep); font-size: 11px; line-height: 1; }

/* ---------- 15. Broker cards -------------------------------------------- */

.live-scope .broker {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); transition: border-color var(--t-base), background var(--t-base);
}
.live-scope .broker:hover { border-color: #2C3647; background: var(--surface-2); }
.live-scope .broker-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.live-scope .broker h3 { font-size: 16px; font-weight: 600; }
.live-scope .broker .api { font-family: var(--mono); font-size: 10px; color: var(--muted-deep); text-align: right; }
.live-scope .broker dl { display: grid; grid-template-columns: auto 1fr; gap: 5px var(--s3); font-size: 12px; }
.live-scope .broker dt { color: var(--muted-deep); }
.live-scope .broker dd { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.live-scope .badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: var(--s2); }
.live-scope .badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border-soft);
}
.live-scope .badge[data-on='true'] { color: var(--up);   background: rgba(63,185,80,.09);  border-color: rgba(63,185,80,.25); }
.live-scope .badge[data-warn='true'] { color: var(--warn); background: rgba(210,153,34,.09); border-color: rgba(210,153,34,.25); }

.live-scope .callout {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5); border-radius: var(--r-md);
  background: rgba(88,166,255,.055); border: 1px solid rgba(88,166,255,.22);
  font-size: 14px; color: var(--text-dim); margin-top: var(--s5); line-height: 1.6;
}
.live-scope .callout svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.live-scope .callout b { color: var(--text); font-weight: 600; }
.live-scope .callout[data-tone='warn'] { background: rgba(210,153,34,.06); border-color: rgba(210,153,34,.26); }
.live-scope .callout[data-tone='warn'] svg { color: var(--warn); }

/* ---------- 16. Security grid ------------------------------------------- */

.live-scope .sec {
  padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--s3);
}
.live-scope .sec-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: rgba(227,179,65,.09); border: 1px solid rgba(227,179,65,.22); color: var(--gold);
}
.live-scope .sec-ico svg { width: 17px; height: 17px; }
.live-scope .sec h3 { font-size: 15px; font-weight: 600; }
.live-scope .sec p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---------- 18. FAQ ----------------------------------------------------- */

.live-scope .faq { display: grid; gap: var(--s2); max-width: 880px; }
.live-scope .faq details {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; transition: border-color var(--t-base);
}
.live-scope .faq details[open] { border-color: #2C3647; }
.live-scope .faq summary {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); cursor: pointer;
  font-size: 15px; font-weight: 550; color: var(--text);
  list-style: none; min-height: 44px;
}
.live-scope .faq summary::-webkit-details-marker { display: none; }
.live-scope .faq summary::after {
  content: ''; margin-left: auto; flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform var(--t-base);
}
.live-scope .faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.live-scope .faq summary:hover { background: var(--surface-2); }
.live-scope .faq .faq-body { padding: 0 var(--s5) var(--s5); color: var(--muted); font-size: 14px; line-height: 1.65; }
.live-scope .faq .faq-body p + p { margin-top: var(--s3); }
.live-scope .faq .faq-body strong { color: var(--text-dim); font-weight: 550; }

/* ---------- 19. Risk band + footer -------------------------------------- */

.live-scope .risk-band {
  border: 1px solid rgba(227,179,65,.3); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(227,179,65,.07), rgba(227,179,65,.02));
  padding: var(--s6); display: grid; grid-template-columns: 40px 1fr; gap: var(--s5);
}
@media (max-width: 640px) { .live-scope .risk-band { grid-template-columns: 1fr; } }
.live-scope .risk-band .ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--gold); }
.live-scope .risk-band .ico svg { width: 28px; height: 28px; }
.live-scope .risk-band h2 { font-size: 19px; margin-bottom: var(--s3); }
.live-scope .risk-band p { font-size: 14px; color: var(--text-dim); line-height: 1.65; }
.live-scope .risk-band p + p { margin-top: var(--s3); }

/* ---------- 22. Legal pages --------------------------------------------- */

.live-scope .legal { max-width: 760px; margin-inline: auto; padding-block: var(--s8) var(--s9); }
.live-scope .legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--s3); }
.live-scope .legal .updated { font-family: var(--mono); font-size: 12px; color: var(--muted-deep); margin-bottom: var(--s7); }
.live-scope .legal h2 { font-size: 20px; margin-top: var(--s7); margin-bottom: var(--s4); }
.live-scope .legal h3 { font-size: 16px; margin-top: var(--s5); margin-bottom: var(--s3); color: var(--text-dim); }
.live-scope .legal p, .live-scope .legal li { color: var(--muted); font-size: 15px; line-height: 1.75; }
.live-scope .legal p + p { margin-top: var(--s4); }
.live-scope .legal ul, .live-scope .legal ol { padding-left: var(--s5); margin-top: var(--s4); display: grid; gap: var(--s3); }
.live-scope .legal li { padding-left: var(--s2); }
.live-scope .legal strong { color: var(--text); font-weight: 550; }
.live-scope .legal .placeholder {
  background: rgba(210,153,34,.12); border-bottom: 1px dashed var(--warn);
  color: var(--warn); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: .9em;
}
.live-scope .legal-back { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); margin-bottom: var(--s6); }
.live-scope .legal-back:hover { color: var(--text); }
.live-scope .legal-back svg { width: 14px; height: 14px; }

/* ---------- 23. 404 ----------------------------------------------------- */

.live-scope .err { min-height: 66vh; display: grid; place-items: center; text-align: center; padding-block: var(--s9); }
.live-scope .err .code {
  font-family: var(--mono); font-size: clamp(70px, 16vw, 150px); font-weight: 700;
  line-height: 1; color: var(--surface-3); letter-spacing: -.04em;
}
.live-scope .err h1 { font-size: clamp(24px, 4vw, 34px); margin-block: var(--s5) var(--s4); }
.live-scope .err p { color: var(--muted); max-width: 46ch; margin-inline: auto; margin-bottom: var(--s6); }
.live-scope .err .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* ---------- 26. Stat cards (engineering section) ------------------------ */

.live-scope .card .eyebrow { margin-bottom: var(--s3); }
.live-scope .card .num {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
  margin-bottom: var(--s3);
}
.live-scope .card .num strong { font-weight: 700; }
.live-scope .card .dim { font-size: 13.5px; line-height: 1.55; }


/* ---------- 17. The desk: the first site's terminal mock, verbatim --------
   Its palette is the app's own (Electron background, gold hexagon, trading
   green and red), so it is scoped to .term-frame and never leaks into the page.
   ------------------------------------------------------------------------ */
.term-frame {
  --bg: #0B0F16; --bg-deep: #070A0F;
  --surface: #111722; --surface-2: #161D2B; --surface-3: #1C2433;
  --border: #232B3A; --border-soft: #1A212E;
  --text: #E6EDF3; --text-dim: #AEB9C6; --muted: #97A1AD; --muted-deep: #7C8694;
  --gold: #E3B341; --gold-bright: #F5CA5E; --gold-deep: #A87F1E;
  --up: #3FB950; --down: #F85149; --accent: #58A6FF; --warn: #D29922;
  --mono: 'JetBrains Mono var', 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --menubar-h: 25px; --indexbar-h: 26px; --toolbar-h: 31px; --statusbar-h: 20px;
}
.term-frame .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.term-frame .up   { color: var(--up); }
.term-frame .down { color: var(--down); }
.term-frame .gold { color: var(--gold); }
.term-frame .hex { width: 11px; height: 12px; }
.term-frame { min-width: 0; max-width: 100%; }
.term-frame .term-menubar { overflow: hidden; }
.term-frame .term-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ---------- 10. Terminal mock ------------------------------------------- */

.term-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 30px 70px -24px rgba(0,0,0,.85),
    0 0 0 1px rgba(227,179,65,.06);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  --flash-ms: 420ms;
}
.term-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent 24%);
}

.term-title {
  display: flex; align-items: center; gap: var(--s2);
  height: 30px; padding-inline: var(--s3);
  background: #0E131C; border-bottom: 1px solid var(--border-soft);
}
.term-title .tdot { width: 9px; height: 9px; border-radius: 50%; background: #2A3341; flex-shrink: 0; }
.term-title .tname { margin-left: var(--s2); font-size: 11px; color: var(--muted-deep); }

.term-menubar {
  display: flex; align-items: center; gap: var(--s3);
  height: var(--menubar-h); padding-inline: var(--s2);
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.term-brand { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.term-brand .hex { width: 11px; height: 12px; }
.term-ver { font-size: 9px; color: var(--muted-deep); background: var(--surface-3); padding: 1px 5px; border-radius: 3px; }
.term-menus { display: flex; gap: var(--s3); color: var(--muted); }
.term-chips { display: flex; gap: 5px; margin-left: auto; }
.term-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--border-soft); font-size: 10px;
}
.term-chip .cdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.term-chip[data-state='on']   .cdot { background: var(--up); }
.term-chip[data-state='sim']  .cdot { background: var(--accent); }
.term-chip[data-state='hold'] .cdot { background: var(--warn); }
.term-chip .cname { color: var(--text-dim); }

.term-indexbar {
  display: flex; align-items: center; gap: var(--s4);
  height: var(--indexbar-h); padding-inline: var(--s3);
  background: var(--bg-deep); border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden;
}
.idx { display: flex; align-items: baseline; gap: 6px; }
.idx .iname { color: var(--muted-deep); font-size: 10px; letter-spacing: .05em; }
.idx .ival { color: var(--text); font-weight: 600; }
.idx .ichg { font-size: 10px; }

.term-toolbar {
  display: flex; align-items: center; gap: 5px;
  height: var(--toolbar-h); padding-inline: var(--s2);
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden;
}
.tb {
  padding: 3px 8px; border-radius: 3px; font-size: 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-dim);
}
.tb[data-active='true'] { background: var(--surface-3); color: var(--text); border-color: #2E3949; }
.tb-buy  { color: var(--up);   border-color: rgba(63,185,80,.3); background: rgba(63,185,80,.08); }
.tb-sell { color: var(--down); border-color: rgba(248,81,73,.3); background: rgba(248,81,73,.08); }
.tb-panic { background: var(--down); color: #fff; border-color: var(--down); font-weight: 700; letter-spacing: .06em; }
.tb-hold { color: var(--warn); border-color: rgba(210,153,34,.35); background: rgba(210,153,34,.08); }
.tb-sep { width: 1px; height: 15px; background: var(--border); margin-inline: 3px; flex-shrink: 0; }
.term-funds { margin-left: auto; display: flex; gap: var(--s3); font-size: 10px; }
.term-funds span { color: var(--muted-deep); }
.term-funds b { color: var(--text-dim); font-weight: 600; margin-left: 4px; }

.term-body { background: var(--bg-deep); }
.term-chain { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.term-chain th {
  padding: 5px 7px; text-align: right; font-weight: 500; font-size: 9px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted-deep);
  background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.term-chain td {
  padding: 4px 7px; text-align: right; border-bottom: 1px solid rgba(35,43,58,.42);
  white-space: nowrap; color: var(--text-dim);
}
.term-chain .col-strike {
  text-align: center; font-weight: 700; color: var(--text);
  background: var(--surface); border-inline: 1px solid var(--border);
}
.term-chain th.col-strike { color: var(--gold); }
.term-chain tr[data-atm='true'] td { background: rgba(227,179,65,.055); }
.term-chain tr[data-atm='true'] .col-strike { background: rgba(227,179,65,.12); color: var(--gold-bright); }
.term-chain .ltp { color: var(--text); font-weight: 600; }

.flash-up   { animation: flashUp   var(--flash-ms) ease-out; }
.flash-down { animation: flashDown var(--flash-ms) ease-out; }
@keyframes flashUp   { 0% { background-color: rgba(63,185,80,.34); color: #7EE787; } 100% { background-color: transparent; } }
@keyframes flashDown { 0% { background-color: rgba(248,81,73,.34); color: #FF9492; } 100% { background-color: transparent; } }

.term-statusbar {
  display: flex; align-items: center; gap: var(--s4);
  height: var(--statusbar-h); padding-inline: var(--s3);
  background: var(--surface); border-top: 1px solid var(--border-soft);
  font-size: 9.5px; color: var(--muted-deep); white-space: nowrap; overflow: hidden;
}
.feed-dots { display: flex; gap: var(--s3); margin-left: auto; }
.feed { display: flex; align-items: center; gap: 4px; }
.feed .fdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.feed[data-live='true']  .fdot { background: var(--up); box-shadow: 0 0 5px rgba(63,185,80,.6); }
.feed[data-live='false'] .fdot { background: var(--muted-deep); }

@media (max-width: 760px) {
  .term-frame { font-size: 10px; }
  .term-frame .term-menus, .term-frame .term-funds, .term-frame .hide-sm { display: none; }
  .term-frame .term-chain .hide-sm-cell { display: none; }
  .term-frame .term-chain th, .term-frame .term-chain td { padding: 4px 5px; font-size: 9.5px; }
  .term-frame .term-indexbar { gap: var(--s3); }
  .term-frame .term-toolbar  { gap: 4px; }
}
@media (max-width: 420px) {
  .term-frame .term-chain th, .term-frame .term-chain td { padding: 4px 3px; font-size: 9px; }
  .term-frame .term-title .tname { font-size: 10px; }
}

/* ---------- 18. Corrections to the ported rules ---------------------------
   These must come AFTER the ported block, so they live here rather than in
   base.css. Each one is a fix, not a preference.
   ------------------------------------------------------------------------ */

/* The order-lane diagram put white text on its red and on its muted-blue bar:
   3.35:1 and 3.25:1, both under the 4.5:1 that small bold text needs. The bar
   colours carry the meaning, so darken the label instead of the bar. */
.live-scope .lane-bar[data-w='1'],
.live-scope .lane-bar[data-w='4'] { color: #0B0F16; }