/* ════════════════════════════════════════════════════════════════════════
   MYNC — marketing surface, cockpit build (landing-pro)
   Direction: Sophia's Premium Sci-Fi Military cockpit (landing-preview/),
   executed against the app's real component anatomy.

   Token provenance: specs/discovery/web_design_tokens.md (sci-fi cohort,
   exact values from MyncDesignSystem ColorTokens.dark.sciFi, γ v2).
   Component anatomy: MyncPanel, MyncCornerBracketOverlay, MyncBracketLabel,
   MyncAmberCTA, MyncSecondaryCTA, MyncTelemetryStrip, IndexStatusPill,
   MyncSciFiSpinner, SidebarNav triad, FilterPillButton — all per the same doc.

   Rules honored from BRAND-GUIDE.md:
   - no pure #000 / #FFF (warm near-black canvas #14110E)
   - #2E5F6A (teal-fill) is FILL ONLY — never text/icon/stroke
   - cyan reserved for active states + glow points
   - no saturated red; amber carries danger
   - label signature (mono + uppercase + 1.2px tracking) on labels only
   - sci-fi cohort is SQUARE — no radii on panels, CTAs, pills
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted woff2, converted from MyncDesignSystem OFL TTFs) ── */
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ── Tokens ── */
:root{
  /* canvas + chrome-occlusion ramp (web_design_tokens gap #2, promoted) */
  --canvas:#14110E;
  --chrome-ground:rgba(13,11,9,0.55);
  --chrome-bar:rgba(16,13,11,0.86);
  --chrome-pill:rgba(13,11,9,0.75);
  --chrome-strip:rgba(11,9,7,0.88);

  /* surfaces + warm hairlines (calm-command dark set; chrome dividers) */
  --surface:#1C1814;
  --border-subtle:#2F2925;
  --border:#3D3630;
  --border-strong:#524A42;

  /* sci-fi cohort text (ColorTokens.dark.sciFi — NOT the calm-command set) */
  --text:#EFF4F8;
  --text-2:#A6BEC8;
  --text-3:#6E8896;

  /* the triad + edges */
  --teal-fill:#2E5F6A;            /* FILL ONLY — fails WCAG as foreground */
  --teal:#5A9CAB;                 /* idle foreground, passes AA */
  --cyan:#4ECDC4;                 /* hover/active + glow points, reserved */
  --cyan-dim:#3A9A93;
  --amber:#FFB060;                /* CTAs + active nav + danger */
  --amber-dim:#B27A42;
  --amber-glow:rgba(255,176,96,0.55);
  --tel:rgba(90,156,171,0.65);    /* sciFi.telemetry */
  --tel-strong:rgba(124,181,194,0.92); /* sciFi.telemetryStrong */
  --edge-teal:rgba(90,156,171,0.45);
  --edge-cyan:rgba(78,205,196,0.35);
  --edge-amber:rgba(255,176,96,0.45);
  --edge-inner:rgba(239,244,248,0.06);
  --ok:#6FCF8B;
  --warn:#FFD76A;

  /* type */
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --track-label:1.2px;   /* the dashboard signature */
  --track-pill:1.5px;    /* filter pills / index pill */
  --track-sync:2px;      /* SYNC button */

  /* spacing — 4px scale (SpacingTokens) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --s8:32px;--s10:40px;--s12:48px;--s16:64px;

  /* motion (MotionTokens + component constants) */
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --d-press:0.10s;--d-pill:0.12s;--d-cta:0.15s;--d-panel:0.18s;--d-default:0.20s;

  /* frame geometry */
  --hud-top:46px;
  --hud-bottom:30px;
  --rail-w:52px;
  --content-max:1180px;
}

/* ── Reset / base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);color:var(--text);
  font-family:var(--display);font-size:15px;line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;padding:0}
svg{display:block}
::selection{background:rgba(90,156,171,0.35);color:var(--text)}
:focus-visible{outline:1.2px solid var(--cyan);outline-offset:3px}
.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}
.skip-link{position:fixed;top:-48px;left:var(--s4);z-index:100;padding:var(--s2) var(--s4);
  background:var(--chrome-strip);color:var(--cyan);font:500 11px/1 var(--mono);
  letter-spacing:var(--track-label);text-transform:uppercase;transition:top var(--d-default) var(--ease-out)}
.skip-link:focus{top:calc(var(--hud-top) + var(--s2))}

/* ════════════════════════════════════════════════════
   STAGE — pinned background
   ════════════════════════════════════════════════════ */
.bg-stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 62% 42% at 50% 18%, rgba(78,205,196,0.045) 0%, transparent 62%),
  radial-gradient(ellipse 70% 48% at 50% 82%, rgba(255,176,96,0.03) 0%, transparent 60%),
  var(--canvas)}
/* the ship's neural field (index) — Sophia's synapse sphere as a full-page
   background layer. Dimmed here, not in the sim, so her parameters stay
   verbatim; the veil + grid stack above it for text legibility. */
#bg-sphere,#bg-net{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;pointer-events:none;opacity:0.35}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5;
  background-image:
    linear-gradient(rgba(90,156,171,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,156,171,0.045) 1px,transparent 1px);
  background-size:80px 80px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 82% 64% at 50% 46%,#000 28%,transparent 80%);
          mask-image:radial-gradient(ellipse 82% 64% at 50% 46%,#000 28%,transparent 80%)}
.bg-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,0.16) 0%,rgba(20,17,14,0.05) 22%,rgba(20,17,14,0.38) 64%,rgba(20,17,14,0.72) 100%)}

/* ════════════════════════════════════════════════════
   COCKPIT FRAME — top HUD / side rails / bottom strip
   ════════════════════════════════════════════════════ */
.hud-top{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hud-top);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:0 var(--s5);
  background:linear-gradient(180deg,var(--chrome-bar) 0%,rgba(16,13,11,0.5) 100%);
  border-bottom:1px solid var(--border-subtle);
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
  font-family:var(--mono);font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;
}
.hud-top .group{display:flex;align-items:center;gap:var(--s4);min-width:0}
.brand{display:flex;align-items:center;color:var(--text)}
/* Canonical lockup (brand/logo, commit 7f59353): mark + Orbitron-700
   outline wordmark inlined as paths — no font dependency, Orbitron
   exclusivity preserved (docs/BRAND-GUIDE.md). Seam/M/node-ring are
   true holes; the HUD backdrop shows through. */
.brand .brand-lockup{height:24px;width:auto;display:block;flex:none}
.hud-stat{display:inline-flex;align-items:center;gap:7px;color:var(--tel);white-space:nowrap}
.hud-stat .v{color:var(--text);font-weight:500}
.hud-stat .v.cyan{color:var(--cyan)}
.hud-stat .v.ok{color:var(--ok)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.2s ease-in-out infinite;flex:none}
.dot-live.cyan{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* nav — the sidebar triad applied to links: idle teal / hover cyan / active amber */
.hud-nav{display:flex;align-items:center;gap:var(--s5)}
.hud-nav a{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:5px 2px;color:var(--teal);
  font:500 10px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:color var(--d-pill) var(--ease-out),border-color var(--d-pill) var(--ease-out);
}
.hud-nav a .idx{color:var(--tel);font-weight:400;transition:color var(--d-pill) var(--ease-out)}
.hud-nav a:hover{color:var(--cyan)}
.hud-nav a:hover .idx{color:var(--cyan)}
.hud-nav a.active{color:var(--amber);border-bottom-color:rgba(255,176,96,0.7)}
.hud-nav a.active .idx{color:var(--amber)}

/* compact arm CTA (AmberCTA anatomy at HUD scale) */
.arm{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  color:var(--amber);font:500 10px/1 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;
  background:rgba(255,176,96,0.14);
  box-shadow:0 0 0 0.8px rgba(255,176,96,0.55), inset 0 0 0 0.5px rgba(255,176,96,0.12);
  transition:background var(--d-cta) var(--ease-out),box-shadow var(--d-cta) var(--ease-out),transform var(--d-press) var(--ease-out);
}
.arm .br{opacity:0.55;font-weight:400}
.arm:hover{background:rgba(255,176,96,0.26);
  box-shadow:0 0 0 1.1px rgba(255,176,96,0.85), 0 0 10px rgba(255,176,96,0.45), inset 0 0 0 0.5px rgba(255,176,96,0.18);
  transform:scale(1.015)}
.arm:active{transform:scale(0.97)}

/* side rails */
.hud-rail{
  position:fixed;top:var(--hud-top);bottom:var(--hud-bottom);width:var(--rail-w);z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:var(--s5) 0;
  background:linear-gradient(180deg,rgba(16,13,11,0.6) 0%,rgba(16,13,11,0.28) 100%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:8px;letter-spacing:0.22em;text-transform:uppercase;color:var(--tel);
  pointer-events:none;
}
.hud-rail.left{left:0;border-right:1px solid var(--border-subtle)}
.hud-rail.right{right:0;border-left:1px solid var(--border-subtle)}
.hud-rail .v-label{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--tel-strong);font-weight:500}
.hud-rail .v-stack{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.hud-rail .lamp{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--edge-teal)}
.hud-rail .lamp.amber{background:var(--amber);box-shadow:0 0 10px var(--edge-amber)}
.hud-rail .lamp.ok{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.2s ease-in-out infinite}
.hud-rail .tick{width:14px;height:1px;background:var(--border-strong)}
.hud-rail .tick.glow{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.hud-rail .num{font-size:9px;letter-spacing:var(--track-label);color:var(--text);font-weight:500}

/* bottom strip — MyncTelemetryStrip anatomy: opaque chrome + luminous cyan bottom edge,
   here flipped to a luminous TOP edge since the strip sits at the viewport floor */
.hud-bot{
  position:fixed;bottom:0;left:0;right:0;z-index:60;height:var(--hud-bottom);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:0 var(--s5);
  background:var(--chrome-strip);
  font:500 9.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
  pointer-events:none;
}
.hud-bot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(78,205,196,0.7)}
.hud-bot::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(78,205,196,0.45);filter:blur(2.5px)}
.hud-bot .group{display:flex;align-items:center;gap:var(--s5);min-width:0;white-space:nowrap;overflow:hidden}
.hud-bot .v{color:var(--text);font-weight:500}
.hud-bot .v.cyan{color:var(--cyan)}
.hud-bot .sep{color:var(--text-3)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

main{position:relative;z-index:5;padding-top:var(--hud-top);padding-bottom:var(--hud-bottom)}
@media(min-width:1080px){main{padding-left:var(--rail-w);padding-right:var(--rail-w)}}
@media(max-width:1079px){.hud-rail{display:none}}
@media(max-width:920px){.hud-nav{display:none}.hud-top .group.center{display:none}}
@media(max-width:560px){
  .hud-top{padding:0 var(--s4)}
  .hide-sm{display:none !important}
}

/* ════════════════════════════════════════════════════
   SHARED PRIMITIVES
   ════════════════════════════════════════════════════ */

/* MyncBracketLabel — brackets @ 0.45 of the foreground, value at full */
.lbl{display:inline-flex;align-items:baseline;gap:4px;
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--teal)}
.lbl .br{opacity:0.45;font-weight:400}
.lbl.cyan{color:var(--cyan)}
.lbl.amber{color:var(--amber)}
.lbl.strong{color:var(--tel-strong)}

/* MyncCornerBracketOverlay — 14px arm, 1.2px stroke, crisp + blurred halo.
   Markup: <i class="bks" aria-hidden="true"><b></b><b></b><b></b><b></b></i> */
.bks{position:absolute;inset:0;pointer-events:none;--bk-c:var(--teal);--bk-crisp:0.85;--bk-halo:0.35}
.bks b{position:absolute;width:14px;height:14px}
.bks b:nth-child(1){top:-1px;left:-1px}
.bks b:nth-child(2){top:-1px;right:-1px;transform:scaleX(-1)}
.bks b:nth-child(3){bottom:-1px;left:-1px;transform:scaleY(-1)}
.bks b:nth-child(4){bottom:-1px;right:-1px;transform:scale(-1)}
.bks b::before,.bks b::after{content:"";position:absolute;inset:0;
  border-top:1.2px solid var(--bk-c);border-left:1.2px solid var(--bk-c)}
.bks b::before{opacity:var(--bk-halo);filter:blur(3px)}
.bks b::after{opacity:var(--bk-crisp)}
.bks.amber{--bk-c:var(--amber)}
.bks.cyan{--bk-c:var(--cyan)}

/* MyncPanel — glass on damped ground; dual edge strokes (outer 0.8px @0.55 with
   2.5px halo + inner 0.5px @0.35); square; cyan glow pair (near r12 / far r22) */
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(28,24,20,0.72) 0%,rgba(28,24,20,0.5) 100%);
  backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:
    0 0 0 0.8px rgba(90,156,171,0.55),
    0 0 2.5px 0.8px rgba(90,156,171,0.28),
    inset 0 0 0 0.5px rgba(90,156,171,0.20),
    inset 0 0.5px 0 var(--edge-inner),
    0 0 12px rgba(78,205,196,0.10),
    0 0 22px rgba(78,205,196,0.06);
}
.panel.amber{
  box-shadow:
    0 0 0 0.8px rgba(255,176,96,0.5),
    0 0 2.5px 0.8px rgba(255,176,96,0.25),
    inset 0 0 0 0.5px rgba(255,176,96,0.16),
    inset 0 0.5px 0 var(--edge-inner),
    0 0 12px rgba(255,176,96,0.10),
    0 0 22px rgba(255,176,96,0.06);
}

/* panel telemetry header */
.panel-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg,rgba(20,17,14,0.5) 0%,rgba(20,17,14,0) 100%);
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  flex-wrap:wrap;
}
.panel-head .idx{color:var(--cyan)}
.panel-head .name{color:var(--text)}
.panel-head .rule{flex:1;height:1px;background:var(--border-subtle);min-width:var(--s4)}
.panel-head .stat{color:var(--tel);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.panel-head .stat .v{color:var(--text)}
.panel-body{padding:var(--s10) var(--s10) var(--s12)}
@media(max-width:720px){.panel-body{padding:var(--s6) var(--s5) var(--s8)}.panel-head{padding:10px var(--s4)}}

/* MyncAmberCTA — bracket-framed mono 13, tint 0.20→0.32, stroke 0.8/0.55→1.1/0.85,
   hover halo amber 0.45 r10, scale 1.015, press 0.97, disabled tint 0.06 stroke 0.18 */
.cta-amber{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:var(--s3) 22px;
  color:var(--amber);font:500 13px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  background:rgba(255,176,96,0.20);
  box-shadow:0 0 0 0.8px rgba(255,176,96,0.55), inset 0 0 0 0.5px rgba(255,176,96,0.14);
  transition:background var(--d-cta) var(--ease-out),box-shadow var(--d-cta) var(--ease-out),transform var(--d-press) var(--ease-out);
}
.cta-amber .br{opacity:0.55;font-weight:400}
.cta-amber:hover{
  background:rgba(255,176,96,0.32);
  box-shadow:0 0 0 1.1px rgba(255,176,96,0.85), 0 0 10px rgba(255,176,96,0.45), inset 0 0 0 0.5px rgba(255,176,96,0.2);
  transform:scale(1.015);
}
.cta-amber:active{transform:scale(0.97)}
.cta-amber[aria-disabled="true"]{
  background:rgba(255,176,96,0.06);
  box-shadow:0 0 0 0.8px rgba(255,176,96,0.18);
  cursor:default;pointer-events:none;
}

/* MyncSecondaryCTA — mono 11 tracking 1.2; fill = teal-fill (FILL ONLY token) tints
   0.04→0.14; stroke tealDark 0.7px/0.55→0.9px/0.85; cool cyan halo 0.30 r8 */
.cta-2nd{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px var(--s4);
  color:var(--teal);font:500 11px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  background:rgba(46,95,106,0.04);
  box-shadow:0 0 0 0.7px rgba(90,156,171,0.55);
  transition:background var(--d-cta) var(--ease-out),box-shadow var(--d-cta) var(--ease-out),color var(--d-cta) var(--ease-out),transform var(--d-press) var(--ease-out);
}
.cta-2nd .br{opacity:0.55;font-weight:400}
.cta-2nd:hover{
  background:rgba(46,95,106,0.14);color:var(--tel-strong);
  box-shadow:0 0 0 0.9px rgba(90,156,171,0.85), 0 0 8px rgba(78,205,196,0.30);
}
.cta-2nd:active{transform:scale(0.97)}

/* FilterPillButton — square, mono 10 Medium tracking 1.5, 0.6px border, the triad */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px var(--s3);
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;
  color:var(--teal);background:transparent;
  box-shadow:0 0 0 0.6px var(--edge-teal);
  transition:color var(--d-pill) var(--ease-out),box-shadow var(--d-pill) var(--ease-out),background var(--d-pill) var(--ease-out),transform var(--d-press) var(--ease-out);
  white-space:nowrap;
}
.pill:hover{color:var(--cyan);box-shadow:0 0 0 0.6px rgba(78,205,196,0.7)}
.pill:active{transform:scale(0.97)}
.pill.active,.pill[aria-selected="true"]{color:var(--amber);background:rgba(255,176,96,0.06);box-shadow:0 0 0 0.6px rgba(255,176,96,0.85)}

/* IndexStatusPill — chrome 0.75 fill, 0.5px edge-cyan stroke, mono 9 tracking 1.5 */
.ixpill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;background:var(--chrome-pill);
  box-shadow:0 0 0 0.5px var(--edge-cyan);
  font:500 9px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--cyan);
  white-space:nowrap;
}
.ixpill.ok{color:var(--ok)}
.ixpill .glyph{flex:none}

/* MyncTelemetryStrip — opaque chrome, " · " joins, luminous cyan bottom edge */
.tstrip{
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--s2);
  padding:7px var(--s4);
  background:var(--chrome-strip);
  font:500 10px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
}
.tstrip::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(78,205,196,0.7)}
.tstrip::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(78,205,196,0.45);filter:blur(2.5px)}
.tstrip .k{color:var(--tel)}
.tstrip .v{color:var(--text)}
.tstrip .v.cyan{color:var(--cyan)}
.tstrip .v.amber{color:var(--amber)}
.tstrip .v.ok{color:var(--ok)}
.tstrip .sep{color:var(--text-3);opacity:0.6}

/* MyncSciFiSpinner — track teal @0.20, cyan arc trim 0.32, 1.2s rotation, glow r3 */
.spinner{width:16px;height:16px;flex:none}
.spinner circle.track{stroke:rgba(90,156,171,0.20);fill:none}
.spinner circle.arc{
  stroke:var(--cyan);fill:none;stroke-linecap:round;
  stroke-dasharray:12.8 27.2; /* 0.32 trim of 2πr (r=6.366 → C=40) */
  filter:drop-shadow(0 0 3px rgba(78,205,196,0.55));
  transform-origin:center;animation:spin 1.2s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* citation chip — the receipts. cyan-edged mono chip */
.cite{
  display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;
  padding:1px 7px;margin:0 1px;
  font:500 10px/1.6 var(--mono);letter-spacing:0.8px;color:var(--cyan);
  background:rgba(78,205,196,0.06);
  box-shadow:0 0 0 0.6px var(--edge-cyan);
  white-space:nowrap;cursor:default;
  transition:background var(--d-pill) var(--ease-out),box-shadow var(--d-pill) var(--ease-out);
}
.cite::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 5px var(--cyan);opacity:0.8}
.cite:hover{background:rgba(78,205,196,0.13);box-shadow:0 0 0 0.7px rgba(78,205,196,0.65), 0 0 8px rgba(78,205,196,0.25)}

/* MyncScanLineSweep — 80px cyan band, screen blend, 0.95s ease-in-out one-shot.
   The .sweep class is added by JS; removed after animation ends. */
.scanhost{position:relative;overflow:hidden}
.scanline{
  position:absolute;left:0;right:0;top:-80px;height:80px;pointer-events:none;z-index:9;
  background:linear-gradient(180deg,transparent 0%,rgba(78,205,196,0.20) 30%,rgba(78,205,196,0.55) 50%,rgba(78,205,196,0.20) 70%,transparent 100%);
  mix-blend-mode:screen;opacity:0;
}
.scanhost.sweep .scanline{animation:sweep 0.95s var(--ease-in-out) 1 forwards}
@keyframes sweep{0%{top:-80px;opacity:0.85}100%{top:100%;opacity:0.85}}

/* ════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ════════════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px;
  background:rgba(78,205,196,0.05);
  box-shadow:0 0 0 0.7px var(--edge-cyan);
  font:500 10px/1.4 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--cyan);
}
h1.hero-title{
  font:500 clamp(40px,6.2vw,76px)/1.02 var(--display);
  letter-spacing:-0.032em;color:var(--text);
  margin:0 0 var(--s5);
  text-wrap:balance;
}
h1.hero-title .dim{color:var(--text-2);font-weight:300}
.hero-sub{
  font:400 clamp(15.5px,1.6vw,18px)/1.55 var(--display);
  color:var(--text-2);max-width:620px;margin:0 auto var(--s8);
  letter-spacing:-0.012em;
}
.hero-sub strong{color:var(--text);font-weight:500}
.section-kicker{margin:0 0 var(--s4)}
.section-title{
  font:500 clamp(28px,3.4vw,42px)/1.06 var(--display);
  letter-spacing:-0.026em;color:var(--text);margin:0 0 var(--s4);
  text-wrap:balance;
}
.section-lede{font-size:16px;line-height:1.6;color:var(--text-2);max-width:660px;margin:0 0 var(--s8)}
.section-lede em{font-style:normal;color:var(--text);font-weight:500}

/* layout rhythm */
section[id],.finale{scroll-margin-top:calc(var(--hud-top) + var(--s3))}
.section{padding:var(--s12) var(--s6)}
.section .container{max-width:var(--content-max);margin:0 auto;position:relative}
@media(max-width:720px){.section{padding:var(--s8) var(--s3)}}

/* staged reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:0.08s}
.reveal.d2{transition-delay:0.16s}
.reveal.d3{transition-delay:0.24s}

/* ════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════ */
.hero{position:relative;padding:clamp(48px,7vh,84px) var(--s6) var(--s12);text-align:center}
.hero .container{max-width:var(--content-max);margin:0 auto}
.hero .cta-row{display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.hero .req-line{
  font:400 10px/1.6 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;
  color:var(--text-3);margin:0 0 var(--s10);
}
.hero .req-line .sep{opacity:0.5;margin:0 6px}

/* hero viewport flank telemetry (Sophia's vp-side, kept) */
.vp-wrap{position:relative;max-width:1060px;margin:0 auto}
.vp-side{
  position:absolute;top:8px;bottom:8px;width:52px;
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--s3) 0;
  font:500 9px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
  pointer-events:none;
}
.vp-side.l{left:-66px;align-items:flex-end;text-align:right}
.vp-side.r{right:-66px;align-items:flex-start;text-align:left}
.vp-side .row{display:flex;align-items:center;gap:6px}
.vp-side .row .num{color:var(--text)}
.vp-side .row .d{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
@media(max-width:1260px){.vp-side{display:none}}

/* ── THE APP WINDOW — hero product moment ─────────────────────────────────
   A faithful web recreation of the MYNC main window: title chrome + toolbar
   (bracket search field, filter pills, SYNC), 84px sidebar rail with the
   amber-active triad, the Ask exchange with citation chips, and the bottom
   telemetry strip. Geometry per web_design_tokens §2.3. */
.appwin{
  position:relative;text-align:left;
  background:linear-gradient(180deg,rgba(18,15,12,0.88) 0%,rgba(22,18,15,0.84) 100%);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:
    0 0 0 0.8px rgba(90,156,171,0.55),
    0 0 2.5px 0.8px rgba(90,156,171,0.3),
    inset 0 0 0 0.5px rgba(90,156,171,0.22),
    inset 0 0.5px 0 var(--edge-inner),
    0 0 12px rgba(78,205,196,0.18),
    0 0 22px rgba(78,205,196,0.10),
    0 28px 70px rgba(8,6,5,0.6);
}
/* window title bar */
.appwin-chrome{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s4);
  border-bottom:1px solid var(--border-subtle);
  background:rgba(13,11,9,0.5);
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
}
.appwin-chrome .traffic{display:flex;gap:7px}
.appwin-chrome .traffic i{width:10px;height:10px;border-radius:50%;background:var(--border-strong);opacity:0.8}
.appwin-chrome .title{color:var(--tel-strong);margin-left:var(--s2)}
.appwin-chrome .right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
/* toolbar */
.appwin-toolbar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);
  background:rgba(13,11,9,0.4);
  border-bottom:0.5px solid var(--edge-teal);
  flex-wrap:wrap;
}
/* toolbar search — transparent fill, 0.5px edge-teal outline, 6px corner brackets */
.appwin-search{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:7px var(--s3);min-width:200px;flex:1;max-width:330px;
  box-shadow:0 0 0 0.5px var(--edge-teal);
}
.appwin-search .bks b{width:6px;height:6px}
.appwin-search .bks{--bk-crisp:0.85;--bk-halo:0}
.appwin-search .glass{color:var(--teal);flex:none}
.appwin-search .ph{font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(110,136,150,0.6)}
.appwin-toolbar .pills{display:flex;gap:var(--s2);flex-wrap:wrap}
.appwin-toolbar .sync{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:6px var(--s3);
  color:var(--amber);font:500 10px/1.2 var(--mono);letter-spacing:var(--track-sync);text-transform:uppercase;
  background:rgba(255,176,96,0.08);
  box-shadow:0 0 0 0.7px rgba(255,176,96,0.55);
}
/* body: sidebar + stage */
.appwin-main{display:flex;align-items:stretch;min-height:380px}
.appwin-side{
  width:84px;flex:none;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  padding:var(--s4) var(--s2);
  background:rgba(13,11,9,0.5);
  border-right:0.5px solid var(--edge-teal);
}
.appwin-side .item{
  position:relative;width:68px;height:54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--teal);
  font:500 8px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  box-shadow:0 0 0 0.6px transparent;
  transition:color var(--d-pill) var(--ease-out),box-shadow var(--d-pill) var(--ease-out),background var(--d-pill) var(--ease-out);
}
.appwin-side .item svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.appwin-side .item:hover{color:var(--cyan);box-shadow:0 0 0 0.6px rgba(78,205,196,0.6)}
.appwin-side .item.active{color:var(--amber);background:rgba(255,176,96,0.06);box-shadow:0 0 0 0.6px rgba(255,176,96,0.7)}
.appwin-side .item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 8px var(--edge-amber)}
.appwin-stage{flex:1;padding:var(--s6) var(--s8);min-width:0}
@media(max-width:880px){.appwin-stage{padding:var(--s5) var(--s4)}}

/* the Ask exchange */
.xchg{max-width:660px}
.xchg .qline{
  display:flex;gap:10px;align-items:baseline;
  font:400 13px/1.6 var(--mono);color:var(--text);
}
.xchg .qline .prompt{color:var(--amber);flex:none}
.xchg .qline .caret{display:inline-block;width:7px;height:13px;background:var(--amber);vertical-align:middle;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.xchg .thinking{display:flex;align-items:center;gap:10px;margin:var(--s3) 0 0 var(--s5);
  font:500 9px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--tel)}
.xchg .answer{
  margin:var(--s3) 0 0 var(--s5);padding:var(--s4) var(--s5);
  background:rgba(90,156,171,0.04);
  box-shadow:inset 2px 0 0 rgba(90,156,171,0.5);
  font-size:14px;line-height:1.75;color:var(--text-2);
}
.xchg .answer strong{color:var(--text);font-weight:500}
.xchg .answer p{margin:0 0 var(--s2)}
.xchg .answer p:last-child{margin:0}
.xchg .meta{
  margin:var(--s2) 0 0 var(--s5);
  font:500 9.5px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);
}
.xchg .meta .v{color:var(--tel-strong)}
.xchg .gap{height:var(--s5)}
.xchg .ack{margin:var(--s2) 0 0 var(--s5);font-size:13.5px;color:var(--text-2)}
.xchg .ack .okmark{color:var(--ok);margin-right:6px}

/* boot sequencing — hidden only when JS is present to run the sequence;
   no-JS and reduced-motion users get the final frame */
.js .appwin .seq{opacity:0;transform:translateY(6px);transition:opacity 0.45s var(--ease-out),transform 0.45s var(--ease-out)}
.js .appwin .seq.on{opacity:1;transform:none}

/* window footer strip */
.appwin .tstrip{border-top:0.5px solid var(--edge-teal)}

/* hero stat rail under window */

/* responsive window degradation — scale chrome, never strip identity */
@media(max-width:720px){
  .appwin-side{width:56px}
  .appwin-side .item{width:44px;height:44px}
  .appwin-side .item span{display:none}
  .appwin-toolbar .pills .pill:nth-child(n+3){display:none}
  .appwin-search{min-width:120px}
}
@media(max-width:480px){
  .appwin-side{display:none}
  .appwin-main{min-height:0}
}

/* ════════════════════════════════════════════════════
   01 · FIELD — module grid
   ════════════════════════════════════════════════════ */
.modgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media(max-width:880px){.modgrid{grid-template-columns:1fr}}
.module{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(28,24,20,0.6) 0%,rgba(28,24,20,0.4) 100%);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.32), inset 0 0 0 0.5px rgba(90,156,171,0.12);
  transition:box-shadow var(--d-panel) var(--ease-out),transform var(--d-panel) var(--ease-out);
}
.module:hover{
  transform:scale(1.008);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.6), inset 0 0 0 0.5px rgba(90,156,171,0.2),
    0 0 12px rgba(78,205,196,0.14), 0 0 22px rgba(78,205,196,0.08);
}
.module .bks b{width:12px;height:12px}
.m-head{
  display:flex;align-items:center;gap:10px;
  padding:10px var(--s4);
  border-bottom:1px solid var(--border-subtle);
  font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
}
.m-head .idx{color:var(--cyan)}
.m-head .name{color:var(--text)}
.m-head .rule{flex:1;height:1px;background:var(--border-subtle)}
.m-head .lamp{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--edge-teal)}
.m-body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;flex:1}
.m-body .glyph{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4);
  background:rgba(90,156,171,0.07);box-shadow:0 0 0 0.7px var(--edge-teal);
}
.m-body .glyph svg{width:17px;height:17px;stroke:var(--teal);stroke-width:1.7;fill:none}
.m-body h3{font:500 18px/1.3 var(--display);letter-spacing:-0.014em;margin:0 0 var(--s2);color:var(--text)}
.m-body>p{font-size:14px;line-height:1.6;color:var(--text-2);margin:0 0 var(--s4)}
.m-body .examples{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding-top:var(--s3);border-top:1px dashed var(--border-subtle)}
.m-body .examples .ex{font:400 11.5px/1.55 var(--mono);color:var(--text-3)}
.m-body .examples .ex::before{content:"\203A\00a0\00a0";color:var(--cyan)}

/* ════════════════════════════════════════════════════
   02 · PIPELINE — three stages + four-layer diagram
   ════════════════════════════════════════════════════ */
.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
@media(max-width:980px){.pipeline{grid-template-columns:1fr;gap:var(--s4)}.pipeline .flow-arrow{display:none}}
.stage{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(28,24,20,0.62) 0%,rgba(28,24,20,0.4) 100%);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.32), inset 0 0 0 0.5px rgba(90,156,171,0.12);
}
.stage .bks b{width:11px;height:11px}
.stage .s-head{
  display:flex;align-items:center;gap:10px;padding:10px var(--s4);
  border-bottom:1px solid var(--border-subtle);
  font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
}
.stage .s-head .idx{color:var(--amber)}
.stage .s-head .name{color:var(--text)}
.stage .s-head .rule{flex:1;height:1px;background:var(--border-subtle)}
.stage .s-head .ok{color:var(--ok)}
.stage .s-body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.stage h3{font:500 17px/1.3 var(--display);margin:0 0 var(--s2);color:var(--text);letter-spacing:-0.012em}
.stage p{font-size:13.5px;line-height:1.6;color:var(--text-2);margin:0 0 var(--s4)}
.stage .schematic{
  position:relative;margin-top:auto;height:190px;
  background:rgba(16,13,11,0.6);
  box-shadow:inset 0 0 0 0.5px var(--border-subtle);
  overflow:hidden;
}
.stage .schematic svg{position:absolute;inset:0;width:100%;height:100%}
.flow-arrow{display:flex;align-items:center;justify-content:center;width:var(--s12);color:var(--cyan)}
.flow-arrow svg{width:22px;height:22px;stroke:var(--cyan);stroke-width:1.2;fill:none;filter:drop-shadow(0 0 6px var(--edge-cyan))}

/* schematic vocabulary */
.schematic canvas{position:absolute;inset:0;width:100%;height:100%}
.schematic .sch-tag{
  position:absolute;z-index:2;pointer-events:none;
  font:500 8px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
}
.schematic .sch-tag.tl{top:8px;left:10px}
.schematic .sch-tag.br{bottom:8px;right:10px}
.schematic .sch-tag.br.lift{bottom:22px} /* clears the ingest capacity bar */
.schematic .sch-tag.cyan{color:var(--cyan)}
.schematic .sch-label{font:500 8px var(--mono);letter-spacing:var(--track-label);fill:var(--tel);text-transform:uppercase}
.schematic .sch-label.strong{fill:var(--tel-strong)}
.schematic .sch-label.amber{fill:var(--amber)}
.schematic .sch-label.cyan{fill:var(--cyan)}
.schematic .wire{stroke:rgba(90,156,171,0.35);stroke-width:1;fill:none}
.schematic .wire.dash{stroke-dasharray:3 4}
.schematic .flowdash{stroke:rgba(78,205,196,0.8);stroke-width:1.2;fill:none;stroke-dasharray:4 26;animation:flow 2.6s linear infinite;filter:drop-shadow(0 0 3px rgba(78,205,196,0.5))}
.schematic .flowdash.amber{stroke:rgba(255,176,96,0.85);filter:drop-shadow(0 0 3px rgba(255,176,96,0.5))}
.schematic .flowdash.slow{animation-duration:3.8s}
@keyframes flow{to{stroke-dashoffset:-30}}
.schematic .node{fill:rgba(90,156,171,0.7)}
.schematic .node.amber{fill:var(--amber)}
.schematic .node.cyan{fill:var(--cyan)}
.schematic .box{fill:rgba(28,24,20,0.8);stroke:var(--edge-teal);stroke-width:0.8}
.schematic .box.amber{stroke:var(--edge-amber)}
.schematic .layerband{fill:rgba(90,156,171,0.05);stroke:rgba(90,156,171,0.25);stroke-width:0.6}

/* stage chip rows — the .cite vocabulary at stage scale.
   Custody chips (stage 1) sit above the schematic; access chips (stage 3)
   and the L1–L4 layer tags (stage 2) sit beneath it (.below). */
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s4)}
.chiprow.below{margin:var(--s3) 0 0}
.chiprow .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  font:500 9px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--cyan);
  background:rgba(78,205,196,0.06);
  box-shadow:0 0 0 0.6px var(--edge-cyan);
  white-space:nowrap;
}
.chiprow .chip::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;opacity:0.8;flex:none}
.chiprow .chip.ok{color:var(--ok);background:rgba(111,207,139,0.06);box-shadow:0 0 0 0.6px rgba(111,207,139,0.4)}
.chiprow .chip.amber{color:var(--amber);background:rgba(255,176,96,0.06);box-shadow:0 0 0 0.6px rgba(255,176,96,0.45)}
.chiprow .chip.teal{color:var(--teal);background:rgba(90,156,171,0.05);box-shadow:0 0 0 0.6px var(--edge-teal)}
.chipnote{
  margin:var(--s3) 0 0;
  font:500 9px/1.6 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
}

/* ════════════════════════════════════════════════════
   03 · POSTURE — picker console
   ════════════════════════════════════════════════════ */
.routing{
  position:relative;margin-bottom:var(--s4);
  background:linear-gradient(180deg,rgba(28,24,20,0.62) 0%,rgba(28,24,20,0.38) 100%);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.32), inset 0 0 0 0.5px rgba(90,156,171,0.12);
}
.routing .bks b{width:12px;height:12px}
.r-head{
  display:flex;align-items:center;gap:10px;padding:10px var(--s4);
  border-bottom:1px solid var(--border-subtle);
  font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);
}
.r-head .name{color:var(--text)}
.r-head .rule{flex:1;height:1px;background:var(--border-subtle)}
.active-display{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg,rgba(20,17,14,0.5) 0%,rgba(20,17,14,0.2) 100%);
}
.active-display .ad-label{font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel)}
.active-display .ad-arrow{font-family:var(--mono);color:var(--cyan);font-size:13px}
.active-display .ad-tag{
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;
  padding:5px 11px;background:rgba(16,13,11,0.6);
  box-shadow:0 0 0 0.7px currentColor;
}
.active-display .ad-tag.g{color:var(--ok)}
.active-display .ad-tag.y{color:var(--warn)}
.active-display .ad-tag.o{color:var(--amber)}
.active-display .ad-tag.b{color:var(--cyan)}
.active-display .ad-stance{font:500 15px/1.4 var(--display);letter-spacing:-0.01em;color:var(--text)}
@media(max-width:560px){.active-display .ad-stance{width:100%;font-size:13.5px}}

.active-display .ad-plan{
  margin-left:auto;
  font:500 10px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--tel-strong);white-space:nowrap;
}
@media(max-width:720px){.active-display .ad-plan{margin-left:0;width:100%}}

/* posture=plan grid — the merged picker+pricing surface. Four cards inside
   the routing console; each card's header button is the selector (the old
   tab row, survived), and the card body carries the honest data-flow
   disclosure, the plan name, the price placeholder, and the CTA. */
.postgrid{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4)}
.postgrid>.tier{min-width:0}

/* ≥941px: each posture is a horizontal row — selector rail | claim+pickif |
   bullets | plan block. Reads as a decision ladder (Strict → BYOK) and can
   never orphan a card the way a wrapping grid does. Below 941px the base
   vertical-card styles apply unchanged, stacked one per row. */
@media(min-width:941px){
  .postgrid .tier{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}
  .postgrid .t-select{height:100%;border-bottom:0;box-shadow:inset -1px 0 0 var(--border-subtle)}
  .postgrid .t-select .pname{white-space:normal}
  .postgrid .t-select[aria-pressed="true"]{background:rgba(28,24,20,0.92);box-shadow:inset -2px 0 0 var(--cyan)}
  .postgrid .t-body{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(150px,190px);
    grid-template-rows:auto auto auto 1fr;
    column-gap:var(--s5);row-gap:4px;
    padding:var(--s4) var(--s5);
  }
  .postgrid .t-body .what{grid-area:1/1/3/2;margin:0}
  .postgrid .t-body .pickif{grid-area:3/1/5/2;align-self:start;margin:var(--s2) 0 0}
  .postgrid .t-body ul{grid-area:1/2/5/3;margin:0}
  .postgrid .t-body .badge-row{grid-area:1/3/2/4;margin:0 0 2px}
  .postgrid .t-body .price{grid-area:2/3/3/4;margin:0}
  .postgrid .t-body .price-note{grid-area:3/3/4/4;margin:0}
  .postgrid .t-body .cta-2nd,.postgrid .t-body .cta-amber{grid-area:4/3/5/4;align-self:end;width:100%}
}

/* crosshair targeting overlay — pointer-fine devices only. Lines +
   readout chip sit above the console (pointer-events:none) and follow
   the cursor via transform; .lock pulses on selection. */
.xhair{display:none}
@media(hover:hover) and (pointer:fine){
  .routing.xh-on,.routing.xh-on *{cursor:none}
  .xhair{
    display:block;position:absolute;inset:0;overflow:hidden;
    pointer-events:none;opacity:0;transition:opacity 0.25s var(--ease-out);z-index:3;
    --xh-x:-100px;--xh-y:-100px;
    /* reticle color as an RGB triplet — cyan while searching, red when
       the cursor is over a click target (.hot, set from mousemove) */
    --xh-c:78,205,196;
  }
  .xhair.hot{--xh-c:255,92,82}
  .routing.xh-on .xhair{opacity:1}
  .xhair .xh-h,.xhair .xh-v,.xhair .xh-box{position:absolute;will-change:transform}
  /* lines gap around the reticle box via mask windows keyed to cursor pos */
  .xhair .xh-h{
    left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--xh-c),0.5) 10%,rgba(var(--xh-c),0.5) 90%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--xh-x) - 19px),transparent calc(var(--xh-x) - 19px),transparent calc(var(--xh-x) + 19px),#000 calc(var(--xh-x) + 19px),#000 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--xh-x) - 19px),transparent calc(var(--xh-x) - 19px),transparent calc(var(--xh-x) + 19px),#000 calc(var(--xh-x) + 19px),#000 100%);
  }
  .xhair .xh-v{
    top:0;bottom:0;left:0;width:1px;
    background:linear-gradient(180deg,transparent,rgba(var(--xh-c),0.5) 10%,rgba(var(--xh-c),0.5) 90%,transparent);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--xh-y) - 19px),transparent calc(var(--xh-y) - 19px),transparent calc(var(--xh-y) + 19px),#000 calc(var(--xh-y) + 19px),#000 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--xh-y) - 19px),transparent calc(var(--xh-y) - 19px),transparent calc(var(--xh-y) + 19px),#000 calc(var(--xh-y) + 19px),#000 100%);
  }
  /* the reticle: box around the cursor point, + at its center */
  .xhair .xh-box{
    left:0;top:0;width:26px;height:26px;
    box-shadow:0 0 0 1px rgba(var(--xh-c),0.75), 0 0 8px rgba(var(--xh-c),0.25);
    background:rgba(16,13,11,0.25);
    transition:box-shadow 0.15s var(--ease-out);
  }
  .xhair .xh-box::before,.xhair .xh-box::after{
    content:"";position:absolute;left:50%;top:50%;background:rgb(var(--xh-c));
  }
  .xhair .xh-box::before{width:9px;height:1px;transform:translate(-50%,-50%)}
  .xhair .xh-box::after{width:1px;height:9px;transform:translate(-50%,-50%)}
  .xhair.lock .xh-h,.xhair.lock .xh-v{animation:xh-lock 0.35s var(--ease-out)}
  .xhair.lock .xh-box{animation:xh-lock-box 0.35s var(--ease-out)}
  @keyframes xh-lock-box{
    0%{scale:1.5;box-shadow:0 0 0 1px rgb(var(--xh-c)), 0 0 16px rgba(var(--xh-c),0.7)}
    100%{scale:1;box-shadow:0 0 0 1px rgba(var(--xh-c),0.75), 0 0 8px rgba(var(--xh-c),0.25)}
  }
  @keyframes xh-lock{
    0%{filter:brightness(2.2);box-shadow:0 0 10px rgba(78,205,196,0.8)}
    100%{filter:brightness(1);box-shadow:none}
  }
}
@media(prefers-reduced-motion:reduce){
  .xhair{transition:none}
  .xhair.lock .xh-h,.xhair.lock .xh-v{animation:none}
}

.t-select{
  width:100%;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);text-align:left;
  background:rgba(16,13,11,0.4);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--d-pill) var(--ease-out),box-shadow var(--d-pill) var(--ease-out);
}
.t-select:hover{background:rgba(28,24,20,0.7)}
.t-select .lamp{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 12px currentColor;transition:transform var(--d-pill) var(--ease-out)}
.pcard.g .t-select .lamp{color:var(--ok);background:var(--ok)}
.pcard.y .t-select .lamp{color:var(--warn);background:var(--warn)}
.pcard.o .t-select .lamp{color:var(--amber);background:var(--amber)}
.pcard.b .t-select .lamp{color:var(--cyan);background:var(--cyan)}
.t-select .stack{display:flex;flex-direction:column;gap:3px;min-width:0}
.t-select .tag{font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--tel-strong)}
.t-select .pname{font:400 12.5px/1.4 var(--display);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--d-pill) var(--ease-out)}
.t-select[aria-pressed="true"]{background:rgba(28,24,20,0.92);box-shadow:inset 0 -2px 0 var(--cyan)}
.t-select[aria-pressed="true"] .pname{color:var(--text);font-weight:500}
.t-select[aria-pressed="true"] .lamp{transform:scale(1.15)}

.honesty{
  position:relative;
  background:linear-gradient(180deg,rgba(90,156,171,0.05) 0%,rgba(28,24,20,0.35) 100%);
  box-shadow:0 0 0 0.8px var(--edge-teal), inset 0 0 0 0.5px rgba(90,156,171,0.15);
  padding:var(--s5) var(--s6);
}
.honesty .bks b{width:12px;height:12px}
.honesty p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.honesty p strong{color:var(--text);font-weight:500}

/* ════════════════════════════════════════════════════
   04 · ASSURANCES — spec cards
   ════════════════════════════════════════════════════ */
.specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:980px){.specgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.specgrid{grid-template-columns:1fr}}
.spec{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(28,24,20,0.62) 0%,rgba(28,24,20,0.4) 100%);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.3), inset 0 0 0 0.5px rgba(90,156,171,0.1);
}
.spec .bks b{width:11px;height:11px}
.spec .s-head{
  display:flex;align-items:center;gap:10px;padding:9px var(--s4);
  border-bottom:1px solid var(--border-subtle);
  font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
}
.spec .s-head .idx{color:var(--cyan)}
.spec .s-head .name{color:var(--text)}
.spec .s-head .rule{flex:1;height:1px;background:var(--border-subtle)}
.spec .s-head .ok{color:var(--ok)}
.spec .s-body{padding:var(--s4) var(--s4) var(--s4);display:flex;flex-direction:column;flex:1}
.spec h3{font:500 14.5px/1.4 var(--display);margin:0 0 var(--s2);color:var(--text)}
.spec p{font-size:13px;line-height:1.6;color:var(--text-2);margin:0 0 var(--s3)}
.spec .ref{
  margin-top:auto;padding-top:10px;border-top:1px dashed var(--border-subtle);
  font:500 9px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);
}

/* ════════════════════════════════════════════════════
   03 · POSTURE = PLAN — the merged cards
   (chrome inherited from the old profiles tier cards)
   ════════════════════════════════════════════════════ */
.tier{
  position:relative;display:flex;flex-direction:column;min-height:380px;
  background:linear-gradient(180deg,rgba(28,24,20,0.68) 0%,rgba(28,24,20,0.45) 100%);
  box-shadow:0 0 0 0.8px rgba(90,156,171,0.32), inset 0 0 0 0.5px rgba(90,156,171,0.12);
  transition:box-shadow var(--d-panel) var(--ease-out),transform var(--d-panel) var(--ease-out);
}
.tier:hover{transform:scale(1.008);box-shadow:0 0 0 0.8px rgba(90,156,171,0.6), inset 0 0 0 0.5px rgba(90,156,171,0.2), 0 0 12px rgba(78,205,196,0.12)}
.tier .bks b{width:12px;height:12px}
.tier.featured{
  background:linear-gradient(180deg,rgba(255,176,96,0.06) 0%,rgba(28,24,20,0.48) 100%);
  box-shadow:0 0 0 0.8px rgba(255,176,96,0.55), inset 0 0 0 0.5px rgba(255,176,96,0.16),
    0 0 12px rgba(255,176,96,0.18), 0 0 22px rgba(255,176,96,0.10);
}
.tier.featured:hover{transform:scale(1.008);box-shadow:0 0 0 1.1px rgba(255,176,96,0.8), inset 0 0 0 0.5px rgba(255,176,96,0.2), 0 0 14px rgba(255,176,96,0.3), 0 0 26px rgba(255,176,96,0.14)}
.tier.featured .t-select{background:rgba(255,176,96,0.06)}
.tier.selected,.tier.selected:hover{
  box-shadow:0 0 0 1px rgba(78,205,196,0.6), inset 0 0 0 0.5px rgba(78,205,196,0.18),
    0 0 12px rgba(78,205,196,0.16);
}
.t-body{padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;flex:1}
.tier .badge-row{display:flex;align-items:center;gap:6px;margin-bottom:var(--s3)}
.tier .badge-row .plank{font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--text)}
.tier .badge-row .pbadge{margin-left:auto}
.tier .what{font-size:12.5px;line-height:1.6;color:var(--text-2);margin:0 0 var(--s3)}
.tier .what em{font-style:normal;color:var(--text);font-weight:500}
.tier .pickif{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--s2) var(--s3);
  background:rgba(16,13,11,0.55);
  box-shadow:inset 0 0 0 0.5px var(--border-subtle);
  margin:0 0 var(--s4);
}
.tier .pickif .k{font:500 8.5px/1.2 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--tel)}
.tier .pickif .scenario{font:400 11px/1.55 var(--mono);color:var(--text-2)}
.tier .pbadge{
  display:inline-flex;align-items:center;gap:6px;
  font:500 8.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;
  padding:3px 8px;box-shadow:0 0 0 0.6px currentColor;
}
.tier .pbadge i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor}
.tier .pbadge.g{color:var(--ok)}
.tier .pbadge.y{color:var(--warn)}
.tier .pbadge.o{color:var(--amber)}
.tier .price{font:500 26px/1.1 var(--display);letter-spacing:-0.02em;color:var(--text);margin:0 0 2px;display:flex;align-items:baseline;gap:8px}
.tier .price .unit{font:400 10px/1.2 var(--mono);letter-spacing:var(--track-label);color:var(--text-3)}
.tier .price-note{font:500 8.5px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--amber-dim);margin:0 0 var(--s3)}
.tier ul{margin:0 0 var(--s5);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2);flex:1}
.tier li{font-size:12.5px;line-height:1.5;color:var(--text);display:flex;gap:9px}
.tier li svg{flex:none;width:11px;height:11px;stroke:var(--cyan);stroke-width:2.4;fill:none;margin-top:4px}
.tier .cta-2nd,.tier .cta-amber{width:100%;justify-content:center;font-size:10.5px;padding:10px 0}
.tier .cta-amber{font-size:10.5px}
.tier-note{
  margin-top:var(--s5);
  font:400 11px/1.7 var(--mono);letter-spacing:0.6px;color:var(--text-3);
}
.tier-note .v{color:var(--text-2)}

/* ════════════════════════════════════════════════════
   FINALE
   ════════════════════════════════════════════════════ */
.finale{
  position:relative;padding:clamp(80px,12vh,140px) var(--s6) 96px;text-align:center;
  background:radial-gradient(ellipse 68% 52% at 50% 52%, rgba(255,176,96,0.07) 0%, transparent 66%);
}
.finale .container{max-width:920px;margin:0 auto}
.finale-title{
  font:500 clamp(34px,5vw,58px)/1.04 var(--display);
  letter-spacing:-0.03em;color:var(--text);margin:0 0 var(--s5);text-wrap:balance;
}
.finale-title em{font-style:normal;color:var(--amber)}
.finale-lede{font-size:16.5px;line-height:1.6;color:var(--text-2);max-width:560px;margin:0 auto var(--s8)}
.finale .cta-row{display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.finale .req-line{font:400 10px/1.8 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--text-3);margin:0}
.finale .req-line .sep{opacity:0.5;margin:0 6px}

/* page footer line (above fixed bottom strip) */
.colophon{
  padding:0 var(--s6) var(--s8);text-align:center;
  font:400 10px/1.8 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);
}
.colophon a{color:var(--tel);transition:color var(--d-pill) var(--ease-out)}
.colophon a:hover{color:var(--cyan)}
.colophon .sep{opacity:0.5;margin:0 8px}

/* ════════════════════════════════════════════════════
   SUB-PAGES — about / architecture / contact
   (Sophia's landing-preview content, pro's chrome)
   ════════════════════════════════════════════════════ */
.hud-nav .nav-sep{color:var(--border-strong)}
@media(max-width:1380px){.hide-md{display:none !important}}
@media(max-width:1140px){.hide-lg{display:none !important}}

.page-hero{padding:clamp(44px,6vh,76px) var(--s6) var(--s2)}
.page-hero .container{max-width:var(--content-max);margin:0 auto}
.page-hero h1{
  font:500 clamp(32px,4.6vw,56px)/1.05 var(--display);
  letter-spacing:-0.028em;color:var(--text);margin:var(--s5) 0 var(--s4);
  text-wrap:balance;max-width:880px;
}
.page-hero p{font-size:17px;line-height:1.6;color:var(--text-2);max-width:680px;margin:0}
@media(max-width:720px){.page-hero{padding:40px var(--s4) 0}.page-hero p{font-size:15px}}

/* two-up card grid (beliefs, status, assurances, contact channels) */
.duogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media(max-width:820px){.duogrid{grid-template-columns:1fr}}
.duogrid .spec .s-body{padding:var(--s5)}
.duogrid .spec h3{font:500 18px/1.35 var(--display);letter-spacing:-0.012em;margin:0 0 var(--s2);color:var(--text)}
.duogrid .spec p{font-size:13.5px}
.spec .s-head .warn{color:var(--warn)}
.spec .s-head .dim{color:var(--text-3)}

/* manifesto (about) */
.manifesto p{font-size:17px;line-height:1.65;color:var(--text-2);max-width:780px;margin:0 0 var(--s4)}
.manifesto p strong{color:var(--text);font-weight:500}
.manifesto .pull{
  font:500 clamp(21px,2.6vw,29px)/1.25 var(--display);letter-spacing:-0.022em;color:var(--text);
  max-width:780px;margin:var(--s6) 0;padding:var(--s5) var(--s6);
  border-left:2px solid var(--amber);
  background:linear-gradient(90deg,rgba(255,176,96,0.05) 0%,rgba(20,17,14,0) 100%);
  text-wrap:balance;
}
@media(max-width:720px){.manifesto p{font-size:15px}.manifesto .pull{padding:var(--s4) var(--s5)}}

/* threat-model rows (architecture) */
.threat-list{display:flex;flex-direction:column;gap:var(--s3)}
.threat{
  display:grid;grid-template-columns:auto 1fr 1fr;gap:var(--s5);align-items:start;
  padding:var(--s4) var(--s5);
  background:rgba(16,13,11,0.55);
  box-shadow:inset 0 0 0 0.5px var(--border-subtle);
}
@media(max-width:760px){.threat{grid-template-columns:1fr;gap:var(--s3)}}
.threat .tag{font:500 9.5px/1.4 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--amber);white-space:nowrap}
.threat h6{margin:0 0 4px;font:500 14px/1.4 var(--display);color:var(--text)}
.threat .defense h6{font:500 9.5px/1.6 var(--mono);letter-spacing:var(--track-pill);text-transform:uppercase;color:var(--cyan)}
.threat p{margin:0;font-size:13px;line-height:1.55;color:var(--text-2)}

/* contact email chip — the .cite vocabulary at action scale */
.email-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px var(--s3);
  font:500 12.5px/1.4 var(--mono);letter-spacing:0.5px;color:var(--cyan);
  background:rgba(78,205,196,0.05);
  box-shadow:0 0 0 0.6px var(--edge-cyan);
  transition:background var(--d-pill) var(--ease-out),box-shadow var(--d-pill) var(--ease-out);
}
.email-chip::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 5px var(--cyan);opacity:0.8}
.email-chip:hover{background:rgba(78,205,196,0.12);box-shadow:0 0 0 0.8px rgba(78,205,196,0.7), 0 0 10px rgba(78,205,196,0.25)}

/* contact form — square fields, mono labels, cyan focus */
.form-body h2{font:500 24px/1.3 var(--display);letter-spacing:-0.018em;margin:0 0 6px;color:var(--text)}
.form-body .sub{font-size:14px;color:var(--text-2);margin:0 0 var(--s5);line-height:1.55}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field label{font:500 9.5px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel)}
.field label .req{color:var(--amber);margin-left:4px}
.field input,.field textarea,.field select{
  font:400 14px/1.5 var(--display);letter-spacing:-0.01em;color:var(--text);
  background:rgba(13,11,9,0.6);border:0;border-radius:0;
  box-shadow:0 0 0 0.7px var(--border);
  padding:11px 14px;appearance:none;-webkit-appearance:none;
  transition:box-shadow var(--d-cta) var(--ease-out),background var(--d-cta) var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:rgba(13,11,9,0.85);
  box-shadow:0 0 0 1px var(--cyan), 0 0 14px rgba(78,205,196,0.12);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(110,136,150,0.6)}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:620px){.field-row{grid-template-columns:1fr}}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s2);flex-wrap:wrap}
.submit-row .meta{font:500 9.5px/1.4 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel)}
.submit-row .meta .v{color:var(--cyan)}

/* sub-page CTA row */
.page-cta-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s8)}

/* ════════════════════════════════════════════════════
   REDUCED MOTION — full degradation
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.001s !important;animation-iteration-count:1 !important;transition-duration:0.001s !important}
  .reveal{opacity:1;transform:none}
  .js .appwin .seq{opacity:1;transform:none}
  .scanhost.sweep .scanline{display:none}
  .xchg .qline .caret{animation:none;opacity:1}
  .spinner circle.arc{animation:none}
  .schematic .flowdash{animation:none;stroke-dasharray:none;opacity:0.35}
}

/* ════════════════════════════════════════════════════
   LEGAL PAGES — privacy / terms prose
   ════════════════════════════════════════════════════ */
.legal p{font-size:14px;line-height:1.75;color:var(--text-2);margin:0 0 var(--s4);max-width:74ch}
.legal p strong,.legal li strong{color:var(--text)}
.legal h3{font:500 17px/1.3 var(--display);letter-spacing:-0.01em;color:var(--text);margin:var(--s6) 0 var(--s3)}
.legal h3:first-of-type{margin-top:0}
.legal ul{margin:0 0 var(--s4);padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:74ch}
.legal li{font-size:13.5px;line-height:1.65;color:var(--text-2)}
.legal .upd{font:500 9.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tel);margin:0 0 var(--s5)}
.legal a{color:var(--cyan)}

/* hero word rotor — the variable word in the headline. Amber marks it as
   the moving part; mono glyphs keep scramble frames from jittering width. */
.rotor{color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:0.92em;letter-spacing:-0.01em}

/* mobile nav — below 920px the inline nav is hidden (rule above); the
   hamburger reveals it as a dropdown panel under the fixed header. */
.nav-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;
  font:500 14px/1 var(--mono);letter-spacing:0;padding:6px 2px}
.nav-toggle .br{color:rgba(251,248,243,0.45)}
.nav-toggle:hover{color:var(--cyan)}
@media(max-width:920px){
  .nav-toggle{display:inline-flex;align-items:center;gap:2px}
  .nav-open .hud-top .group.center{display:block;position:fixed;top:var(--hud-top);left:0;right:0;z-index:59}
  .nav-open .hud-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(180deg,var(--chrome-bar) 0%,rgba(16,13,11,0.97) 100%);
    border-bottom:1px solid var(--border-subtle);
    backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
    padding:var(--s3) var(--s5)}
  .nav-open .hud-nav a{padding:12px 0;border-bottom:1px solid var(--border-subtle)}
  .nav-open .hud-nav a:last-child{border-bottom:0}
  .nav-open .hud-nav .nav-sep{display:none}
}

/* chapter rail — the four in-page sections live on the left rail (>=1080px);
   the top bar keeps standalone pages. Idle teal / hover cyan / active amber,
   same triad as everything else. */
.hud-rail.chapters{pointer-events:auto;justify-content:flex-start;gap:var(--s7)}
.hud-rail.chapters a{display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--tel);text-decoration:none;transition:color var(--d-pill) var(--ease-out)}
.hud-rail.chapters a .idx{font-weight:400;color:inherit}
.hud-rail.chapters a .v-label{color:inherit;font-weight:500}
.hud-rail.chapters a:hover{color:var(--cyan)}
.hud-rail.chapters a.active{color:var(--amber)}
@media(min-width:1080px){.hud-nav a.sec,.hud-nav .nav-sep{display:none}}