/* ==========================================================================
   NiCoach beta website — single stylesheet (K4 spec §2/§4).
   Tokens are BINDING (spec §2). Built from the design mockups in
   docs/website-design/ (visual ground truth), split out of their inline <style>
   and self-hosting the fonts. NO inline styles/scripts ship — the production CSP
   is `default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'`,
   so every rule lives here and utility classes replace the mockups' style="…".
   ========================================================================== */

/* ---------- self-hosted fonts (OFL, latin subset, see fonts/README.txt) ------ */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/chakra-petch-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/chakra-petch-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}

/* ---------- tokens: dark (canonical) ---------- */
:root{
  color-scheme:dark;
  --bg:#0b0d10; --surface-0:#0d1117; --surface-1:#11161d; --surface-2:#151b23;
  --inset:#0d1218; --scrim:rgba(0,0,0,.62);
  --line-subtle:#1e2730; --line:#27313c; --line-strong:#36424f;
  --text-0:#eff4f8; --text-1:#c5ced8; --text-2:#9ba7b4; --text-3:#6b7682;
  --accent:#39f5c4; --accent-ink:#052019; --accent-text:#39f5c4;
  --accent-bg:rgba(57,245,196,.10); --accent-border:rgba(57,245,196,.45);
  --negative:#ff4d88; --negative-bg:rgba(255,77,136,.10); --negative-border:rgba(255,77,136,.45);
  --warning:#f5c84b; --warning-bg:rgba(245,200,75,.10); --warning-border:rgba(245,200,75,.45);
  --info:#4dabff; --info-bg:rgba(77,171,255,.10); --info-border:rgba(77,171,255,.45);
  --chart-real:#ff4d88; --chart-cf:#39f5c4; --chart-grid:rgba(155,167,180,.10);
  --grid-line:rgba(155,167,180,.05); --glow:rgba(57,245,196,.07);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-24:96px; --space-32:128px;
  --radius-0:0; --radius-1:2px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 24px rgba(0,0,0,.45);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-border);
  --font-display:"Chakra Petch","Bahnschrift","Segoe UI",sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --fs-display:clamp(42px,6.5vw,74px); --fs-h1:clamp(30px,4.6vw,52px);
  --fs-h2:clamp(24px,3.2vw,34px); --fs-h3:20px; --fs-lead:19px; --fs-body:16px;
  --fs-sm:14px; --fs-xs:12.5px; --fs-2xs:11px;
  --motion-fast:120ms; --motion-base:180ms; --motion-slow:420ms; --motion-draw:1200ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
}
/* ---------- tokens: light ("printed match report") ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f4f6; --surface-0:#ffffff; --surface-1:#ffffff; --surface-2:#eaeef2;
  --inset:#e8edf1; --scrim:rgba(16,23,30,.45);
  --line-subtle:#e3e8ed; --line:#d3dae1; --line-strong:#aeb9c4;
  --text-0:#10171e; --text-1:#323e4a; --text-2:#5a6773; --text-3:#87939f;
  --accent:#39f5c4; --accent-ink:#052019; --accent-text:#0b7257;
  --accent-bg:rgba(11,141,105,.10); --accent-border:rgba(11,141,105,.45);
  --negative:#d6336f; --negative-bg:rgba(214,51,111,.08); --negative-border:rgba(214,51,111,.4);
  --warning:#946200; --warning-bg:rgba(197,138,10,.10); --warning-border:rgba(197,138,10,.4);
  --info:#1668c4; --info-bg:rgba(22,104,196,.08); --info-border:rgba(22,104,196,.4);
  --chart-real:#d6336f; --chart-cf:#0b8a68; --chart-grid:rgba(50,62,74,.12);
  --grid-line:rgba(50,62,74,.06); --glow:rgba(11,138,104,.08);
  --shadow-1:0 1px 2px rgba(16,23,30,.10); --shadow-2:0 6px 24px rgba(16,23,30,.12);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-border);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f2f4f6; --surface-0:#ffffff; --surface-1:#ffffff; --surface-2:#eaeef2;
    --inset:#e8edf1; --scrim:rgba(16,23,30,.45);
    --line-subtle:#e3e8ed; --line:#d3dae1; --line-strong:#aeb9c4;
    --text-0:#10171e; --text-1:#323e4a; --text-2:#5a6773; --text-3:#87939f;
    --accent:#39f5c4; --accent-ink:#052019; --accent-text:#0b7257;
    --accent-bg:rgba(11,141,105,.10); --accent-border:rgba(11,141,105,.45);
    --negative:#d6336f; --negative-bg:rgba(214,51,111,.08); --negative-border:rgba(214,51,111,.4);
    --warning:#946200; --warning-bg:rgba(197,138,10,.10); --warning-border:rgba(197,138,10,.4);
    --info:#1668c4; --info-bg:rgba(22,104,196,.08); --info-border:rgba(22,104,196,.4);
    --chart-real:#d6336f; --chart-cf:#0b8a68; --chart-grid:rgba(50,62,74,.12);
    --grid-line:rgba(50,62,74,.06); --glow:rgba(11,138,104,.08);
    --shadow-1:0 1px 2px rgba(16,23,30,.10); --shadow-2:0 6px 24px rgba(16,23,30,.12);
    --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-border);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text-0);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; margin:0}
p{margin:0}
a{color:var(--accent-text)}
button{font:inherit}
img,svg{max-width:100%}
::selection{background:var(--accent-border); color:var(--text-0)}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-1)}

/* utilities */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.label-caps{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--fs-2xs); font-weight:600; color:var(--text-2)}
.wrap{max-width:1120px; width:100%; margin:0 auto; padding:0 var(--space-6)}
.c-t3{color:var(--text-3)}
.mt-0{margin-top:0}
.mt-4{margin-top:var(--space-4)}
.icon-xs{width:13px; height:13px}
.icon-12{width:12px; height:12px}
.visually-hidden{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:absolute; left:-9999px; top:0; z-index:100; padding:var(--space-3) var(--space-4);
  background:var(--accent); color:var(--accent-ink); font-weight:600; border-radius:var(--radius-1)}
.skip-link:focus{left:var(--space-4); top:var(--space-4)}

/* graph-paper field */
.field{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; height:64px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--line-subtle)}
.site-header .wrap{height:100%; display:flex; align-items:center; gap:var(--space-6)}
.brand{display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--text-0)}
.brand-mark{display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--accent-border); background:var(--accent-bg);
  color:var(--accent-text); border-radius:var(--radius-1)}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em}
.chip{display:inline-flex; align-items:center; gap:6px; padding:2px 9px;
  border-radius:var(--radius-pill); border:1px solid var(--accent-border);
  background:var(--accent-bg); color:var(--accent-text);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s ease-in-out infinite}
.chip-warn{border-color:var(--warning-border); background:var(--warning-bg); color:var(--warning)}
.chip-neg{border-color:var(--negative-border); background:var(--negative-bg); color:var(--negative)}
.chip-neutral{border-color:var(--line-strong); background:transparent; color:var(--text-2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:var(--space-5)}
.site-nav a.navlink{color:var(--text-1); text-decoration:none; font-family:var(--font-display);
  font-weight:600; font-size:var(--fs-sm); letter-spacing:.02em; padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)}
.site-nav a.navlink:hover{color:var(--text-0); border-bottom-color:var(--accent-border)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:40px; padding:0 var(--space-5); border-radius:var(--radius-1);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em;
  text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out),
             border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out)}
.btn-sm{height:34px; padding:0 var(--space-4); font-size:var(--fs-sm)}
.btn-lg{height:48px; padding:0 var(--space-6); font-size:15px}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--line-strong); color:var(--text-0); background:transparent}
.btn-ghost:hover{border-color:var(--accent-border); color:var(--text-0)}
.btn-quiet{background:none; border:none; color:var(--accent-text); padding:0 var(--space-2); height:auto; cursor:pointer}
.btn-quiet:hover{text-decoration:underline}
.btn[aria-disabled="true"], .btn:disabled{opacity:.45; cursor:not-allowed; pointer-events:none}
.icon{width:18px; height:18px; flex:none}
.icon-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-1);
  background:none; border:1px solid transparent; color:var(--text-2); cursor:pointer;
  transition:color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)}
.icon-btn:hover{color:var(--text-0); border-color:var(--line)}
/* theme toggle shows the icon of the theme you would switch TO */
.icon-sun{display:none}.icon-moon{display:none}
:root:not([data-theme="light"]) .icon-sun{display:block}
:root[data-theme="light"] .icon-moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .icon-sun{display:none}
  :root:not([data-theme]) .icon-moon{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-subtle)}
.hero::after{content:""; position:absolute; right:-10%; top:10%; width:60%; height:80%;
  background:radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events:none}
.hero .wrap{position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:var(--space-10); align-items:center;
  padding-top:var(--space-16); padding-bottom:var(--space-16)}
.eyebrow{display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5)}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-text); animation:pulse 2s ease-in-out infinite}
.hero h1{font-size:var(--fs-display); font-weight:700; letter-spacing:-.01em; color:var(--text-0); text-wrap:balance}
.hero .lead{font-size:var(--fs-lead); color:var(--text-1); max-width:56ch; margin-top:var(--space-5)}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8)}
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--space-10);
  border-top:1px solid var(--line-subtle)}
.stat{padding:var(--space-4) var(--space-4) 0 0}
.stat + .stat{border-left:1px solid var(--line-subtle); padding-left:var(--space-4)}
.stat b{display:block; font-family:var(--font-mono); font-size:var(--fs-h2); font-weight:700;
  color:var(--text-0); font-variant-numeric:tabular-nums; line-height:1.1}
.stat span{display:block; margin-top:var(--space-1)}

/* ---------- HUD cards ---------- */
.hud{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-1);
  padding:var(--space-6); box-shadow:var(--shadow-1)}
.hud-featured{position:relative; box-shadow:var(--shadow-2)}
.hud-featured::before,.hud-featured::after{content:""; position:absolute; width:14px; height:14px;
  border:2px solid var(--accent-border); pointer-events:none}
.hud-featured::before{top:-2px; left:-2px; border-right:none; border-bottom:none}
.hud-featured::after{bottom:-2px; right:-2px; border-left:none; border-top:none}

/* ---------- hero chart ---------- */
.chart-card{padding:var(--space-5)}
.chart-card .chart-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-3)}
.chart-wrap{position:relative}
.chart-svg{display:block; width:100%; height:auto}
.chart-svg text{font-family:var(--font-mono); font-size:10px; fill:var(--text-3)}
.line-real{fill:none; stroke:var(--chart-real); stroke-width:2; stroke-linejoin:round}
.line-cf{fill:none; stroke:var(--chart-cf); stroke-width:2; stroke-dasharray:6 4; stroke-linejoin:round}
.gridline{stroke:var(--chart-grid); stroke-width:1}
.midline{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 5}
.tick-death{stroke:var(--chart-real); stroke-width:2}
.marker-death{fill:var(--chart-real)}
.marker-fork{fill:var(--chart-cf)}
.fork-hair{stroke:var(--chart-cf); stroke-width:1; stroke-dasharray:2 3; opacity:.7}
.line-real{stroke-dasharray:1; stroke-dashoffset:1; animation:draw var(--motion-draw) var(--ease-out) .25s forwards}
.line-cf{stroke-dasharray:1; stroke-dashoffset:1; animation:draw-cf 900ms var(--ease-out) 1.25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes draw-cf{to{stroke-dashoffset:0; stroke-dasharray:.035 .022}}
.chart-anno{margin-top:var(--space-3); background:var(--surface-2); border:1px solid var(--line);
  border-left:2px solid var(--chart-cf); border-radius:var(--radius-1);
  padding:var(--space-3) var(--space-4);
  opacity:0; animation:fadein var(--motion-slow) var(--ease-out) 1.9s forwards}
@keyframes fadein{to{opacity:1}}
.chart-anno .when{color:var(--negative); font-size:var(--fs-2xs)}
.chart-anno p{font-size:var(--fs-xs); color:var(--text-1); margin-top:var(--space-1)}
.chart-anno p strong{color:var(--accent-text)}
.legend{display:flex; gap:var(--space-5); margin-top:var(--space-3); flex-wrap:wrap}
.legend .key{display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-2)}
.legend .swatch{width:22px; height:0; border-top:2px solid var(--chart-real)}
.legend .swatch.cf{border-top-style:dashed; border-top-color:var(--chart-cf)}

/* ---------- timeline section headers ---------- */
section.block{padding:var(--space-24) 0 0}
section.block:last-of-type{padding-bottom:var(--space-24)}
.tl-head{display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6)}
.tl-time{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3); letter-spacing:.06em}
.tl-rule{flex:none; width:28px; height:1px; background:var(--line-strong)}
.tl-title{font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:var(--fs-xs); color:var(--accent-text)}
.block h2{font-size:var(--fs-h2); font-weight:700; letter-spacing:-.005em; max-width:24ch; text-wrap:balance}
.block .sect-copy{color:var(--text-1); max-width:62ch; margin-top:var(--space-4); font-size:17px}
/* download section variant (was inline in mockup) */
.block-download{border-top:1px solid var(--line-subtle); border-bottom:1px solid var(--line-subtle);
  padding-bottom:var(--space-24)}
.block-download .tl-head{padding-top:var(--space-12)}

/* feature cards */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8)}
.feature h3{font-size:var(--fs-h3); font-weight:600; margin-bottom:var(--space-2)}
.feature p{color:var(--text-2); font-size:var(--fs-sm)}
.feature .label-caps{display:block; margin-bottom:var(--space-3); color:var(--text-3)}

/* specimens + tips */
.specimen{margin-top:var(--space-8); background:var(--surface-2); border:1px solid var(--line);
  border-left:2px solid var(--negative); border-radius:var(--radius-1);
  padding:var(--space-4) var(--space-5); max-width:560px}
.specimen .head{font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em;
  color:var(--negative); text-transform:uppercase}
.specimen p{margin-top:var(--space-2); font-size:var(--fs-sm); color:var(--text-1)}
.specimen p strong{color:var(--accent-text)}
.tips{display:grid; gap:var(--space-3); margin-top:var(--space-8); max-width:560px}
.tip{display:flex; align-items:center; gap:var(--space-3); background:var(--surface-2);
  border:1px solid var(--line); border-left:2px solid var(--accent-border);
  border-radius:var(--radius-1); padding:var(--space-3) var(--space-4);
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-0)}
.tip .icon{color:var(--accent-text); width:15px; height:15px}
.footnote{margin-top:var(--space-4); font-size:var(--fs-xs); color:var(--text-2); max-width:56ch}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8)}
.step .num{font-family:var(--font-mono); color:var(--accent-text); font-size:var(--fs-xs); letter-spacing:.1em}
.step h3{font-size:var(--fs-h3); font-weight:600; margin:var(--space-2) 0}
.step p{color:var(--text-2); font-size:var(--fs-sm)}
.local-note{margin-top:var(--space-6); display:flex; gap:var(--space-4); align-items:flex-start}
.local-note .icon{color:var(--accent-text); margin-top:3px}
.local-note b{font-family:var(--font-display); font-weight:600}
.local-note p{color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--space-1)}

/* download (landing) */
.dl-grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--space-6);
  margin-top:var(--space-8); align-items:start}
.dl-file{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.dl-file .name{font-family:var(--font-mono); font-weight:700; font-size:16px}
.dl-meta{display:flex; gap:var(--space-5); flex-wrap:wrap; margin-top:var(--space-3);
  color:var(--text-2); font-family:var(--font-mono); font-size:var(--fs-xs)}
.dl-hash{display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3)}
.dl-hash button{display:inline-flex; align-items:center; gap:6px; background:none;
  border:1px solid var(--line); color:var(--text-2); border-radius:var(--radius-1);
  padding:3px 8px; cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-2xs)}
.dl-hash button:hover{border-color:var(--accent-border); color:var(--text-0)}
.dl-cta{margin-top:var(--space-6)}
.dl-unavailable{margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--warning)}
.req{list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2)}
.req li{display:flex; gap:var(--space-2); align-items:center; color:var(--text-1); font-size:var(--fs-sm)}
.req .icon{color:var(--accent-text); width:15px; height:15px}
.aside-note{font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--space-5)}
.nonwindows-note{margin-top:var(--space-4); font-size:var(--fs-sm); color:var(--info);
  display:flex; gap:var(--space-2); align-items:center}

/* beta */
.beta-chips{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6)}

/* footer (landing 3-col) */
.site-footer{border-top:1px solid var(--line-subtle); background:var(--surface-0); margin-top:var(--space-24)}
.site-footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-8);
  padding-top:var(--space-12); padding-bottom:var(--space-12)}
.site-footer p, .site-footer a{font-size:var(--fs-xs); color:var(--text-3)}
.site-footer .label-caps{margin-bottom:var(--space-3); display:block}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2)}
/* footer (account: single flex row) */
.site-footer.footer-flat{margin-top:0}
.site-footer.footer-flat .wrap{display:flex; justify-content:space-between; gap:var(--space-6);
  padding:var(--space-8) var(--space-6); flex-wrap:wrap; grid-template-columns:none}

/* reveal on scroll — hidden only under html.js (E10) */
html.js .reveal{opacity:0; transform:translateY(10px);
  transition:opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out)}
html.js .reveal.in{opacity:1; transform:none}
/* hero load stagger */
.hero .stagger{opacity:0; transform:translateY(8px); animation:rise var(--motion-slow) var(--ease-out) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.hero .s1{animation-delay:.05s}.hero .s2{animation-delay:.12s}.hero .s3{animation-delay:.19s}
.hero .s4{animation-delay:.26s}.hero .s5{animation-delay:.33s}

/* ==========================================================================
   ACCOUNT / TESTER CONSOLE
   ========================================================================== */
body.account{min-height:100vh; display:flex; flex-direction:column;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px}
body.account main{flex:1}
.page-head{padding:var(--space-12) 0 var(--space-8)}
.page-head .title-row{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-2)}
.page-head h1{font-size:var(--fs-h1); font-weight:700}
.banner{display:flex; align-items:center; gap:var(--space-3);
  border:1px solid var(--warning-border); background:var(--warning-bg);
  border-radius:var(--radius-1); padding:var(--space-3) var(--space-4);
  margin-top:var(--space-6); font-size:var(--fs-sm); color:var(--text-0)}
.banner .icon{color:var(--warning)}
.banner-info{border-color:var(--info-border); background:var(--info-bg)}
.banner-info .icon{color:var(--info)}
.banner .spacer{flex:1}
.hud .card-label{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4)}
.hud h3{font-size:var(--fs-h3); font-weight:600}
.console{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); padding-bottom:var(--space-6)}
/* identity */
.who{display:flex; align-items:flex-start; gap:var(--space-4)}
.who .icon{color:var(--accent-text); margin-top:4px}
.who .email{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2); margin-top:2px}
.session-note{margin-top:var(--space-4); font-size:var(--fs-xs); color:var(--text-3)}
/* riot */
.riot-id{display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-2) 0 var(--space-1)}
.riot-id .gn{font-family:var(--font-mono); font-weight:700; font-size:22px}
.riot-id .tag{font-family:var(--font-mono); font-size:16px; color:var(--text-2)}
.riot-meta{font-size:var(--fs-xs); color:var(--text-3); font-family:var(--font-mono)}
.riot-exp{margin-top:var(--space-4); font-size:var(--fs-sm); color:var(--text-2)}
.form-row{display:flex; gap:var(--space-3); margin-top:var(--space-4); flex-wrap:wrap}
.form-field{display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-width:180px}
.form-field.grow2{flex:2}
.form-field.region{flex:0 0 110px}
.form-field label{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--fs-2xs); font-weight:600; color:var(--text-2)}
.form-field input,.form-field select{height:44px; padding:0 var(--space-3); background:var(--inset);
  color:var(--text-0); border:1px solid var(--line); border-radius:var(--radius-1);
  font-family:var(--font-mono); font-size:var(--fs-sm)}
.form-field input:focus-visible,.form-field select:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.form-field input:disabled,.form-field select:disabled{opacity:.5; cursor:not-allowed}
.field-error{font-size:var(--fs-xs); color:var(--negative); display:flex; gap:6px; align-items:center}
.form-actions{display:flex; align-items:flex-end}
.coming-note{margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--text-3)}
/* beta status */
.seat-row{display:flex; gap:var(--space-8); margin:var(--space-4) 0; flex-wrap:wrap}
.seat-row .stat{padding:0}
.seat-row .stat b{display:block; font-family:var(--font-mono); font-size:26px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.1}
.seat-row .stat span{display:block; margin-top:2px}
.ent{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-2)}
.ent li{display:flex; gap:var(--space-2); align-items:center; font-size:var(--fs-sm); color:var(--text-1)}
.ent .icon{color:var(--accent-text); width:15px; height:15px}
.state-copy{margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--text-1)}
.hud.tint-neg{border-color:var(--negative-border); background:linear-gradient(var(--negative-bg),var(--negative-bg)),var(--surface-1)}
.hud.tint-warn{border-color:var(--warning-border); background:linear-gradient(var(--warning-bg),var(--warning-bg)),var(--surface-1)}
/* download (account compact) */
.console .dl-file .name{font-size:15px}
.console .dl-meta{gap:var(--space-4); margin-top:var(--space-2); font-size:var(--fs-2xs)}
.console .dl-cta{margin-top:var(--space-5)}
.lock-note{margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--text-2); display:none}
/* data note */
.data-note{padding-bottom:var(--space-16); font-size:var(--fs-xs); color:var(--text-3); max-width:70ch}
/* skeleton */
.skeletons{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); padding-bottom:var(--space-16)}
.skel{height:180px; border-radius:var(--radius-1); border:1px solid var(--line-subtle);
  background:linear-gradient(100deg, var(--surface-1) 40%, var(--surface-2) 50%, var(--surface-1) 60%);
  background-size:200% 100%; animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
/* signed-out / expired hero card */
.gate-block{display:grid; place-items:center; padding:var(--space-16) 0 var(--space-24)}
.gate-block .hud{max-width:440px; width:100%; text-align:center; padding:var(--space-10) var(--space-8)}
.gate-block .brand-mark{margin:0 auto var(--space-5); width:46px; height:46px}
.gate-block h2{font-size:var(--fs-h2)}
.gate-block p{color:var(--text-2); font-size:var(--fs-sm); margin:var(--space-3) 0 var(--space-6)}

/* account state machine — hide non-matching data-show so authored display survives */
body.account[data-state="loading"]   [data-show]:not([data-show~="loading"]),
body.account[data-state="active"]    [data-show]:not([data-show~="active"]),
body.account[data-state="denied"]    [data-show]:not([data-show~="denied"]),
body.account[data-state="full"]      [data-show]:not([data-show~="full"]),
body.account[data-state="degraded"]  [data-show]:not([data-show~="degraded"]),
body.account[data-state="expired"]   [data-show]:not([data-show~="expired"]),
body.account[data-state="signedout"] [data-show]:not([data-show~="signedout"]){display:none !important}
/* lockable areas in denied/full */
body.account[data-state="denied"] .lockable, body.account[data-state="full"] .lockable{opacity:.45; pointer-events:none; user-select:none}
body.account[data-state="denied"] .lock-note, body.account[data-state="full"] .lock-note{display:block; opacity:1; pointer-events:auto}

/* ==========================================================================
   AUTH / CALLBACK (login.html + auth/callback.html)
   ========================================================================== */
body.auth{margin:0; min-height:100vh; display:grid; place-items:center;
  background:var(--bg); color:var(--text-0); padding:var(--space-6);
  background-image:
    radial-gradient(closest-side at 50% 38%, var(--glow), transparent 72%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:auto, 56px 56px, 56px 56px}
.gate{width:100%; max-width:440px; text-align:center; position:relative;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-1);
  padding:var(--space-12) var(--space-10); box-shadow:var(--shadow-2);
  animation:gate-rise var(--motion-slow) var(--ease-out) both}
@keyframes gate-rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.gate::before,.gate::after{content:""; position:absolute; width:14px; height:14px; border:2px solid var(--accent-border)}
.gate::before{top:-2px; left:-2px; border-right:none; border-bottom:none}
.gate::after{bottom:-2px; right:-2px; border-left:none; border-top:none}
.gate .brand-mark{width:46px; height:46px; margin:0 auto var(--space-6)}
.gate h2{font-size:24px; font-weight:700}
.gate .body{color:var(--text-2); font-size:var(--fs-sm); margin:var(--space-3) 0 0}
.gate .actions{display:flex; gap:var(--space-3); justify-content:center; margin-top:var(--space-8); flex-wrap:wrap}
.gate .detail{margin-top:var(--space-6); font-family:var(--font-mono); font-size:var(--fs-2xs);
  color:var(--text-3); word-break:break-all}
.state-icon{display:grid; place-items:center; width:44px; height:44px; margin:0 auto var(--space-5); border-radius:50%}
.state-icon.err{background:var(--negative-bg); border:1px solid var(--negative-border); color:var(--negative)}
.state-icon.warn{background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning)}
.state-icon .icon{width:22px; height:22px}
.spinner{width:26px; height:26px; margin:0 auto var(--space-5); border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent-text); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wire{margin-top:var(--space-5)}
.wire .label-caps{color:var(--text-3)}
/* auth state machine */
body.auth[data-state="redirecting"] [data-show]:not([data-show~="redirecting"]),
body.auth[data-state="exchanging"]  [data-show]:not([data-show~="exchanging"]),
body.auth[data-state="denied"]      [data-show]:not([data-show~="denied"]),
body.auth[data-state="unreachable"] [data-show]:not([data-show~="unreachable"]),
body.auth[data-state="expired"]     [data-show]:not([data-show~="expired"]){display:none !important}
/* no-JS: the sign-in flow needs JS — hide the live state cards, show the note (E10) */
.no-js{display:none}
html:not(.js) body.auth [data-show]{display:none !important}
html:not(.js) body.auth .no-js{display:block}

/* ==========================================================================
   404
   ========================================================================== */
body.notfound{min-height:100vh; display:flex; flex-direction:column}
body.notfound main{flex:1; display:grid; place-items:center; text-align:center; padding:var(--space-16) 0}
.nf-code{font-family:var(--font-mono); font-size:clamp(56px,12vw,120px); font-weight:700;
  color:var(--accent-text); font-variant-numeric:tabular-nums; line-height:1}
.nf-msg{font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); margin:var(--space-4) 0 var(--space-6)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--space-10)}
  .card-grid,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .console,.skeletons{grid-template-columns:1fr}
}
@media (max-width:768px){
  .site-nav a.navlink{display:none}
  .hero .wrap{padding-top:var(--space-12); padding-bottom:var(--space-12)}
  .dl-grid{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr; gap:var(--space-6)}
  section.block{padding-top:var(--space-16)}
}
@media (max-width:560px){
  .wrap{padding:0 var(--space-4)}
  .card-grid,.steps{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr}
  .stat + .stat{border-left:none; border-top:1px solid var(--line-subtle);
    padding-left:0; padding-top:var(--space-3); margin-top:var(--space-3)}
  .cta-row .btn{width:100%}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .line-real,.line-cf{stroke-dashoffset:0; animation:none}
  .line-cf{stroke-dasharray:6 4}
  .chart-anno{opacity:1; animation:none}
  html.js .reveal{opacity:1; transform:none}
  .hero .stagger{opacity:1; transform:none; animation:none}
  .spinner{animation:none; border-top-color:var(--line-strong)}
}