/* ==========================================================================
   DARKSTAR, INC — site stylesheet
   Built on the ThinkTech kit (Foundation Ink ramp, Geist/Geist Mono, 1200px
   measure, 14px radius) shared with VeraSolve and ScaleWithMe.

   DEVIATION from the kit's light-first default: DARKSTAR ships dark-first.
   "Dark mode" is the product's core claim, not a display preference, and a
   light default would fight the brand on its own homepage. The light theme is
   kept complete and reachable from the toggle, so the kit's contract holds —
   only the default flips. Token names are unchanged.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------
   ThinkTech Brand System v2.1 (ratified 23 Jul 2026). Fixed by the parent:
   type scale, neutrals, spacing, shape, motion, voice, Strata logo geometry.
   Chosen by DARKSTAR: the accent hue, the dark default, the motif.
   ------------------------------------------------------------------------ */
:root {
  /* Foundation Ink ramp (§2c) — the parent's own accent, and every neutral. */
  --ink-50:#F5F6FB;  --ink-100:#E3E6F0; --ink-200:#BDC0CE; --ink-300:#969BAC;
  --ink-400:#757B8E; --ink-500:#5A6076; --ink-600:#484D62; --ink-700:#353A4E;
  --ink-800:#202332; --ink-900:#0A0C15;

  /* Amber — drawn from the §2e unassigned pool at #F59E0B (the 500 stop).
     NOT #E0871E: that hex is the fixed portfolio warning status colour, and
     taking it as a brand accent would make "warning" and "brand" the same ink.

     Measurements required by §2e before assignment:
       Amber 500 on white ............ 2.15:1  fails normal text
       Amber 600 on white ............ 3.19:1  fails normal text
       Amber 700 on white ............ 5.02:1  PASSES  -> the light text stop
       Amber 400 on dark canvas ..... 12.02:1  PASSES  -> the dark text stop
       Ink 900 on an Amber 500 fill .. 9.08:1  PASSES  -> button fill + label
       Amber 500 vs warning #E0871E .. 1.28:1  COLLIDES
       Amber 500 vs success #12A150 .. 1.57:1  COLLIDES
     Consequence, same obligation Emerald carries: an amber status message must
     always pair with an icon and a word. Never colour alone. */
  --a-50:#FFFBEB;  --a-100:#FEF3C7; --a-200:#FDE68A; --a-300:#FCD34D;
  --a-400:#FBBF24; --a-500:#F59E0B; --a-600:#D97706; --a-700:#B45309;
  --a-800:#92400E; --a-900:#78350F;

  /* Status (§2f) — fixed portfolio-wide, never used in charts */
  --ok:#12A150; --warn:#E0871E; --err:#E0574C;

  /* Dark neutral scale (§2b) — DARKSTAR's default */
  --bg:#07070F;
  --surface:#0F1122;
  --surface-2:#161A2E;
  --deep:#0A0C15;                /* Foundation Ink, for the deep bands */
  --ink:#EEEFF7;
  --ink-soft:#C0C4D6;
  --slate:#8B90A8;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);

  --accent:var(--a-400);         /* text stop on dark — 12.02:1 */
  --accent-500:var(--a-500);
  --accent-2:var(--a-300);
  --on-accent:var(--ink-900);
  --accent-wash:color-mix(in srgb, var(--a-500) 9%, var(--bg));
  --focus:var(--a-300);

  /* Data-viz (kit §4): brand is accent, every other series is Ink */
  --chart-brand:var(--a-400);
  --chart-alt:var(--ink-300);
  --chart-other:var(--ink-500);
  --track:#ffffff14;

  --grid-line:rgba(255,255,255,.05);
  --glow-a:#F59E0B;
  --glow-b:#FBBF24;
  --glow-op:.34;

  /* §3 card shadow */
  --shadow-sm:0 1px 2px rgba(10,12,21,.05), 0 2px 8px rgba(10,12,21,.05);
  --shadow:0 10px 30px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.22);

  --nav-h:69px;
  /* Full-bleed. DEVIATION from the kit's 1200px: DARKSTAR runs edge-to-edge
     rather than in a centred column. The ceiling only stops ultrawide monitors
     from stretching a row of four cards past readability — at 1440–1920 the
     padding is the only inset. Line length is held by the per-block ch caps
     (.sec-sub, .measure, .lede), not by the container. */
  --maxw:1760px;
  --pad:clamp(20px, 4.5vw, 72px);
  --radius:14px; --radius-sm:10px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  --t-fast:120ms; --t-base:200ms; --t-slow:400ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  --sans:'Geist', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  /* Light neutral scale (§2b), unmodified */
  --bg:#F5F6FB;
  --surface:#FFFFFF;
  --surface-2:#EDF0F8;
  --deep:#0A0C15;
  --ink:#0A0C15;
  --ink-soft:#353A4E;
  --slate:#5A6076;
  --line:#E3E6F0;
  --line-strong:#BDC0CE;

  --accent:var(--a-700);         /* text stop on light — 5.02:1 */
  --accent-2:var(--a-800);
  --on-accent:#FFFFFF;
  --accent-wash:color-mix(in srgb, var(--a-500) 10%, var(--bg));
  --focus:var(--a-700);

  --chart-brand:var(--a-500);
  --chart-alt:var(--ink-300);
  --chart-other:var(--ink-200);
  --track:var(--surface-2);

  --grid-line:rgba(10,12,21,.07);
  --glow-op:.2;

  --shadow-sm:0 1px 2px rgba(10,12,21,.05), 0 2px 8px rgba(10,12,21,.05);
  --shadow:0 10px 30px rgba(10,12,21,.12), 0 3px 10px rgba(10,12,21,.08);

  color-scheme: light;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Type scale (§1), mobile -> desktop. Weights are the kit's: 700 headings,
   600 subheads, 500 nav and labels, 400 body. Never below 400, never above 700. */
h1,h2,h3,h4 { font-weight: 700; text-wrap: balance; }

/* Display is hero-only. Height-aware as well as width-aware: on a short screen
   the headline is what pushes the hero past one viewport, so cap it against vh. */
.t-display { font-size: min(clamp(40px, 5vw, 60px), 7vh); font-weight: 700; line-height: 1.0; letter-spacing: -.03em; }
h1,.t-h1 { font-size: clamp(32px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
h2,.t-h2 { font-size: clamp(26px, 3.2vw, 32px); line-height: 1.1;  letter-spacing: -.02em; }
h3,.t-h3 { font-size: clamp(21px, 2vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
h4,.t-h4 { font-size: clamp(18px, 1.5vw, 19px); font-weight: 600; line-height: 1.3; letter-spacing: 0; }

.t-lg { font-size: 19px; line-height: 1.5; }
.t-sm { font-size: 14px; line-height: 1.5; }
.t-xs { font-size: 13px; line-height: 1.45; }

.mono, .t-label { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.t-label {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .14em;
}

p { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }
.measure { max-width: 68ch; }
.muted { color: var(--slate); }
.amber { color: var(--accent); }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

ul { list-style: none; }

.skip-link {
  position: fixed; left: var(--s4); top: -80px; z-index: 200;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: var(--s3) var(--s6); box-shadow: var(--shadow);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s4); text-decoration: none; }

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section.tight { padding: clamp(56px, 6vw, 84px) 0; }

.band-alt  { background: var(--surface-2); }
.band-deep { background: var(--deep); }
.band-wash { background: linear-gradient(180deg, var(--accent-wash), var(--bg)); }

/* The deep band is near-black in both themes, so it re-declares the dark
   tokens locally. Every component below reads tokens only, which is what makes
   this one rule enough to flip an entire section. */
.band-deep {
  --bg:#04050A; --surface:#ffffff09; --surface-2:#ffffff12;
  --ink:#F0F1FA; --ink-soft:#C6CADD; --slate:#9AA0B8;
  --line:#ffffff1a; --line-strong:#ffffff2e;
  --accent:var(--a-400); --accent-2:var(--a-300); --on-accent:#0A0C15;
  --focus:var(--a-300); --track:#ffffff14; --grid-line:#ffffff0d;
  --shadow-sm:0 1px 2px #00000040, 0 3px 10px #0000002b;
  /* Restrained on interior bands. At the hero's .5 the orbs read as a lens
     flare across a full-width band and start bleaching the type behind them. */
  --glow-op:.26;
  color: var(--ink);
}

/* Section heading: mono index, gradient rule, title, sub */
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); }
.sec-idx {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--accent); margin-bottom: var(--s4);
}
.sec-idx::after {
  content: ''; height: 2px; width: clamp(40px, 8vw, 96px); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.sec-title { margin-bottom: var(--s4); }
.sec-sub { font-size: 19px; color: var(--ink-soft); line-height: 1.55; max-width: 68ch; }

.grid { display: grid; gap: var(--s6); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* ---- Atmosphere: contour field + drifting amber glow -------------------- */
.atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.atmos > * { position: absolute; }

/* Two concentric systems from opposite corners, inset past the edges so only
   broad arcs cross the frame — reads as terrain contour, not a bullseye. */
.contour {
  inset: -25%;
  background-image:
    repeating-radial-gradient(circle at 14% 30%, #0000 0 54px, var(--grid-line) 54px 55px),
    repeating-radial-gradient(circle at 86% 76%, #0000 0 68px, var(--grid-line) 68px 69px);
  -webkit-mask-image: radial-gradient(105% 90% at 52% 34%, #000 12%, #0000 74%);
          mask-image: radial-gradient(105% 90% at 52% 34%, #000 12%, #0000 74%);
}

.glow {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  border-radius: 50%; filter: blur(80px); opacity: var(--glow-op);
}
.glow.a { background: radial-gradient(circle, var(--glow-a) 0%, transparent 64%); top: -16%; left: -10%; animation: drift1 26s var(--ease) infinite alternate; }
.glow.b { background: radial-gradient(circle, var(--glow-b) 0%, transparent 62%); bottom: -22%; right: -12%; animation: drift2 32s var(--ease) infinite alternate; }
@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(7vw,5vh,0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-6vw,-6vh,0) scale(.94); } }

.section > .wrap, .hero > .wrap, .pagehead > .wrap { position: relative; z-index: 1; }

/* ---- Header ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--bg);                                    /* fallback */
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
/* Clear bar while the hero is behind it. Applied by script so the readable
   solid bar is the no-JS default.
   The hero and pagehead are always the deep band, in BOTH themes — so the bar
   must re-declare the dark tokens here or light-theme visitors get dark ink on
   a near-black backdrop. Re-declaring tokens adapts the mark (currentColor),
   links, pill and toggle with no per-element rules. */
.nav.at-hero {
  --bg:#04050A;
  --ink:#F0F1FA;
  --ink-soft:#C6CADD;
  --slate:#9AA0B8;
  --line:rgba(255,255,255,.18);
  --line-strong:rgba(255,255,255,.30);
  --surface-2:rgba(255,255,255,.10);
  --accent:var(--a-400);
  --accent-2:var(--a-300);
  --on-accent:#0A0C15;
  --focus:var(--a-300);
  color: var(--ink);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  min-height: 68px; display: flex; align-items: center; gap: var(--s6);
}
/* Strata lockup (§5), matching the VeraSolve and ZTZK implementations:
   22px mark, wordmark in Geist 700 / 17px / -.01em, 44px touch target. */
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  min-height: 44px; flex: none;
}
.brand:hover, .brand:focus-visible { text-decoration: none; }
.strata { width: 22px; height: auto; display: block; flex-shrink: 0; }
.footer .strata { width: 26px; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  color: var(--ink-soft); font-size: 15px; font-weight: 500;
  padding: 9px 13px; border-radius: 999px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: var(--s3); flex: none; }

.theme-toggle {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.nav-toggle {
  display: none; width: 40px; height: 40px; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 940px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s2) var(--pad) var(--s4);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 4px; border-radius: 0; }
  .nav .btn-sm { display: none; }
}

/* ---- Buttons ----------------------------------------------------------- */
/* §3: fully round, min-height 44px, label in Geist bold, sentence case,
   never mono. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 13px 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* --accent is the AA *text* stop in each theme (400 dark / 700 light). A button
   is a large fill, not text, so it takes Amber 500 with Ink 900 on top — 9.08:1
   in both themes, and the same amber either way. */
.btn-primary { background: var(--a-500); color: var(--ink-900); }
.btn-primary:hover { background: var(--a-400); color: var(--ink-900); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 10px 18px; font-size: 15px; }

/* ---- Pills / chips ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 8px 16px 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
}
.chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s8);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.card.pad-sm { padding: var(--s6); }
.card h3, .card h4 { margin-bottom: var(--s3); }
.card p { font-size: 15px; }

a.card, .card.lift { display: block; color: inherit; }
a.card:hover, .card.lift:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: var(--shadow); text-decoration: none;
}

.card-idx {
  display: block; color: var(--accent); font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; margin-bottom: var(--s4);
}

.card-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: var(--s4);
  border: 1px solid var(--line-strong); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.card-icon svg { width: 20px; height: 20px; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* excludes mobile browser chrome */
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 64px));
  padding-bottom: clamp(48px, 6vw, 80px);
  background: var(--deep);
  overflow: hidden;
}
.hero > .wrap { width: 100%; }
/* The hero is always the deep band, in both themes. */
.hero {
  --bg:#04050A; --surface:#ffffff09; --surface-2:#ffffff12;
  --ink:#F0F1FA; --ink-soft:#C6CADD; --slate:#9AA0B8;
  --line:#ffffff1a; --line-strong:#ffffff2e;
  --accent:var(--a-400); --accent-2:var(--a-300); --on-accent:#0A0C15;
  --focus:var(--a-300); --track:#ffffff14; --grid-line:#ffffff0d; --glow-op:.38;
  color: var(--ink);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--a-500), transparent);
  opacity: .5;
}

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-eyebrow { margin-bottom: var(--s6); }
.hero h1 { margin-bottom: var(--s6); }
.hero .lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-soft); max-width: 56ch; margin-bottom: var(--s8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s12); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  color: var(--slate); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--s4); }
.hero-meta span:not(:last-child)::after { content: '·'; color: var(--line-strong); }

/* ---- Telemetry panel (hero visual) ------------------------------------- */
.panel {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff0e, #ffffff04);
  box-shadow: var(--shadow); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate);
}
.panel-head .stat { color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.panel-head .stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.panel-body { padding: var(--s6); }

.panel-svg { display: block; width: 100%; height: auto; }

/* Diagram type. Set in CSS rather than SVG attributes so both lanes inherit
   the theme tokens and stay legible if the panel is ever used on light. */
.dgm-l {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; fill: var(--slate);
}
.dgm-l.ok  { fill: var(--accent); }
.dgm-l.bad { fill: var(--err); }
.dgm-l.mid { font-size: 10px; letter-spacing: .2em; fill: var(--slate); }

.panel-rows { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.panel-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: center; padding: 13px 18px; background: var(--deep);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate);
}
.panel-row b { color: var(--ink); font-weight: 500; letter-spacing: .12em; }
/* Amber is the by-design state ("no emission" is the product, not a fault).
   Red is reserved for what the environment did to us, not what we chose. */
.panel-row .v { color: var(--accent); }
.panel-row .v.denied { color: var(--err); }
.panel-row .v.na { color: var(--slate); }

/* ---- Page head (interior pages) ---------------------------------------- */
.pagehead {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 84px));
  padding-bottom: clamp(48px, 7vw, 84px);
  background: var(--deep); border-bottom: 1px solid #ffffff1a;
}
.pagehead {
  --bg:#04050A; --surface:#ffffff09; --surface-2:#ffffff12;
  --ink:#F0F1FA; --ink-soft:#C6CADD; --slate:#9AA0B8;
  --line:#ffffff1a; --line-strong:#ffffff2e;
  --accent:var(--a-400); --accent-2:var(--a-300); --on-accent:#0A0C15;
  --focus:var(--a-300); --grid-line:#ffffff0d; --glow-op:.3;
  color: var(--ink);
}
.pagehead .t-label { color: var(--accent); margin-bottom: var(--s4); }
.pagehead h1 { margin-bottom: var(--s4); max-width: 22ch; }
.pagehead p { font-size: 19px; max-width: 66ch; }

/* ---- Domain triad ------------------------------------------------------ */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 620px) { .triad { grid-template-columns: 1fr; } }
.triad-cell {
  background: var(--bg); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: background var(--t-base) var(--ease);
}
.triad-cell:hover { background: var(--surface-2); }
.triad-cell .k { color: var(--accent); }
.triad-cell .n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.triad-cell .d { color: var(--slate); font-size: 14px; }
.triad-cell svg { width: 26px; height: 26px; color: var(--accent); }

/* ---- Denial list (Dark Mode) ------------------------------------------- */
.denial { display: grid; gap: var(--s3); }
.denial li {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
  font-family: var(--mono); font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.denial li::before {
  content: ''; width: 22px; height: 2px; background: var(--err);
  flex: none; border-radius: 2px;
}
.denial li s { text-decoration: none; }

/* ---- Chain of command -------------------------------------------------- */
.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: stretch; }
@media (max-width: 760px) { .chain { grid-template-columns: 1fr; } }
.chain-step {
  position: relative; padding: var(--s6);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.chain-step .t-label { color: var(--accent); margin-bottom: var(--s3); }
.chain-step h4 { margin-bottom: var(--s2); }
.chain-step p { font-size: 14px; }
.chain-step:not(:last-child)::after {
  content: '→'; position: absolute; right: -21px; top: 50%; transform: translateY(-50%);
  color: var(--line-strong); font-size: 18px; z-index: 2;
}
@media (max-width: 760px) { .chain-step:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -20px; transform: translateX(50%); } }
.chain-step.observer { opacity: .82; }

/* ---- Comparison / spec tables ------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
thead th {
  text-align: left; padding: 15px var(--s6); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
tbody td { padding: 17px var(--s6); border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody th {
  padding: 17px var(--s6); border-bottom: 1px solid var(--line);
  text-align: left; font-weight: 600; font-size: 15px; color: var(--ink); vertical-align: top;
  white-space: nowrap;
}
tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--surface-2); }
td .yes { color: var(--accent); font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Before / after ---------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
@media (max-width: 700px) { .ba { grid-template-columns: 1fr; } }
.ba-col { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ba-col > header {
  padding: 14px var(--s6); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.ba-col.now > header { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ba-col ul { padding: var(--s4) 0; }
.ba-col li { padding: 11px var(--s6); font-size: 15px; color: var(--ink-soft); display: flex; gap: var(--s3); }
.ba-col li::before { content: '—'; color: var(--line-strong); flex: none; }
.ba-col.now li::before { content: '✓'; color: var(--accent); }
.ba-headline { padding: var(--s6); border-top: 1px solid var(--line); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ba-col.now .ba-headline { color: var(--accent); }

/* ---- Stat strip -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat-cell { background: var(--bg); padding: var(--s6); }
.stat-cell .n { font-family: var(--mono); font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: var(--accent); letter-spacing: -.02em; line-height: 1.1; }
.stat-cell .l { margin-top: var(--s2); font-size: 13px; color: var(--slate); }

/* ---- Scenario cards ---------------------------------------------------- */
.scn { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .scn { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .scn { grid-template-columns: 1fr; } }
.scn-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.scn-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.scn-card .id { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); }
.scn-card h4 { letter-spacing: -.01em; }
.scn-card .where { font-family: var(--mono); font-size: 12px; color: var(--slate); letter-spacing: .06em; }
.scn-card .take { font-size: 14px; color: var(--ink-soft); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }

/* ---- Cross-domain diagram ---------------------------------------------- */
.hives { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 760px) { .hives { grid-template-columns: 1fr; } }
.hive {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6);
  background: var(--surface); text-align: center;
}
.hive .t-label { color: var(--accent); }
.hive .name { font-size: 20px; font-weight: 700; margin: var(--s3) 0 4px; letter-spacing: -.02em; }
.hive .loc { font-family: var(--mono); font-size: 12px; color: var(--slate); }
.hive .count { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.hive .count b { color: var(--accent); font-weight: 500; }

.link-rail {
  width: fit-content; max-width: 100%;
  margin: var(--s6) auto 0; padding: var(--s4) var(--s8);
  border: 1px dashed var(--line-strong); border-radius: 999px;
  text-align: center; font-family: var(--mono); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.link-rail b { color: var(--accent); font-weight: 500; }

/* ---- Replay rail ------------------------------------------------------- */
.rail { display: flex; flex-wrap: wrap; gap: var(--s3); }
.rail-item {
  flex: 1 1 140px; padding: var(--s6) var(--s4); text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.rail-item:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Split feature ----------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.split.narrow-left { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) { .split, .split.narrow-left { grid-template-columns: 1fr; } }

/* ---- Quote / closing --------------------------------------------------- */
.closer { text-align: center; }
.closer .quote {
  font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; max-width: 20ch; margin: 0 auto var(--s6); text-wrap: balance;
}
.closer .quote em { font-style: normal; color: var(--accent); }
.closer p { font-size: 19px; max-width: 54ch; margin: 0 auto var(--s8); }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band { padding: clamp(64px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s8); flex-wrap: wrap;
}
.cta-inner h2 { max-width: 18ch; }

/* ---- Footer ------------------------------------------------------------ */
.footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 80px) 0 var(--s8); background: var(--bg); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--s8) var(--s6); margin-bottom: var(--s12);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { font-size: 14px; margin-top: var(--s4); max-width: 32ch; }
.footer h5 {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
  margin-bottom: var(--s4);
}
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--ink-soft); font-size: 15px; }
.footer ul a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center; justify-content: space-between;
  padding-top: var(--s6); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--slate);
}
.footer-bottom nav { display: flex; gap: var(--s6); }
.footer-bottom a { color: var(--slate); }
.footer-bottom a:hover { color: var(--accent); }

/* ---- Bullet list ------------------------------------------------------- */
.list li, .prose ul li {
  position: relative; padding-left: var(--s6); margin-bottom: 10px;
  color: var(--ink-soft); font-size: 15px; line-height: 1.5;
}
.list li::before, .prose ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 7px; height: 2px; background: var(--accent); border-radius: 2px;
}
.list li:last-child { margin-bottom: 0; }

/* ---- Prose (legal pages) ----------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { margin: var(--s12) 0 var(--s4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--s8) 0 var(--s3); }
.prose p { margin-bottom: var(--s4); }
.prose ul { margin: 0 0 var(--s4) 0; }
.prose ul li { font-size: 16px; }
.prose .updated { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s8); }

/* ---- Reveal on scroll -------------------------------------------------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
}