/* NOTICE: Noto Sans (Google Fonts), SIL Open Font License 1.1, the
   latin-subset variable face, self-hosted. It is the landing page's
   display AND body face; JetBrains Mono is kept for code, commands and
   numeric specs only. Archivo and Inter are no longer used here (the
   other surfaces keep them through /style.css). */
@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/noto-sans-var.woff2?v=__V__") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jbm-var.woff2?v=__V__") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

/* Metric-matched local fallbacks, so the swap changes ink and not layout.
   Both web faces are `swap`: on a slow link the page paints in a system
   face first. These two faces put the web faces' advance widths and
   vertical metrics onto Arial and Menlo (or their metric twins), read from
   the fonts' own tables: mean a-z advance per em (Noto Sans .5201, Arial
   .4817; JetBrains Mono .6000, Menlo .6021) and hhea ascent/descent, each
   divided by the size adjustment. */
@font-face {
  font-family: "Noto Sans Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
  size-adjust: 108%;
  ascent-override: 99%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Courier New");
  size-adjust: 99.65%;
  ascent-override: 102.4%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

/* haidercode.ai — splash-only stylesheet.
   Loaded AFTER /style.css, BEFORE /splash-hero.css. Owns the splash page and
   nothing else: every rule below is scoped to `body.splash`, so no other
   surface can be reached from here.

   This is the "50/50 chapters" comp (pass 14, 2026-09-06), ported 1:1:
     · tokens + base + hero + widget   (the comp's part1-head)
     · the feature visuals             (the comp's pass2-b.css)
     · the chapters / console / cards / benchmark / path (pass3-split.css)
   in that order, each selector prefixed with body.splash.

   Rules that bite:
     - Never rename or redefine a production token. The comp's own token names
       are scoped to `body.splash`, so other production surfaces keep their
       shared tokens while this page can match the comp exactly.
     - Four themes, stamped pre-paint by /theme.js: day is the bare block,
       night, titanium (the default) and gunmetal are :root[data-theme]
       blocks. The comp's `:root[data-theme="dark"]` blocks are the night
       blocks here; its OS colour-scheme media blocks are dropped. Every
       colour is a token that is complete in all four states.
     - .hero-frame / .iso-* / .stack-* belong to /splash-hero.css, not here.
     - The identity — /logo.svg calligraphy, the haider+code wordmark, the
       crest, and the one orange — is fixed.
     - Assets are files under /site with ?v=__V__ (never data: URIs). */

/* ================================================================
   TOKENS — day (bare), night (stamped)
   ================================================================ */

/* ================================================================
   PRODUCTION RECONCILIATION
   /style.css reaches a few of the comp's class names (.nav .hero .eyebrow
   .lead .plans .card .chip .faq .copy .theme-toggle, footer, button, input,
   main section h2). These resets carry the SAME specificity as the ported
   rules and stand BEFORE them, so a property the comp sets wins on order
   and only the leaks are neutralised.
   ================================================================ */
/* the comp is designed at 16px rem; /style.css sets html to 15px */
html:has(body.splash){font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html:has(body.splash){scroll-behavior:auto}}
/* .splash main section: the old page's band (64px 32px padding, a rule;
   20px sides on a phone) — the comp's sections set their own */
body.splash main section{max-width:none;margin:0;padding:0;border-bottom:0;background:transparent}
/* .whatis, …, .faq, .proof: the old page's shared shells (1060px, padding) */
body.splash .faq,body.splash .proof{max-width:none;margin:0;padding:0}
body.splash .faq details p{font-size:inherit;line-height:inherit}
/* .nav: the production header bar (max-width 1060, rule, padding) */
body.splash .nav{max-width:none;margin:0;border-bottom:0;background:transparent;gap:normal;align-items:normal}
/* .hero: the old splash column (max-width 1060, margin auto) */
body.splash .hero{max-width:none;margin:0}
body.splash .hero h1{margin:0;font-family:var(--display)}
/* .splash .eyebrow / .lead / .card / .plans / .chip / .faq / footer */
body.splash .eyebrow{margin:0}
body.splash .lead{margin:0}
body.splash .plans{justify-content:normal;flex-wrap:nowrap}
body.splash .card{overflow:visible;margin:0}
body.splash .chip{border:0;line-height:inherit}
body.splash .faq details{max-width:none;padding:0}
body.splash .faq summary::before,body.splash .faq details[open] summary::before{content:none}
body.splash .faq details p{margin:0;padding-left:0}
body.splash .foot{display:block;max-width:none;margin:0;align-items:normal;justify-content:normal;color:var(--text);font-size:1rem}
/* .splash main section h2 (JBM Display, 10px margin) */
body.splash main section h2,body.splash main section h3{margin:0;font-family:var(--display)}
/* button / input:not([type=checkbox]) carry a border-radius and a box */
body.splash button{border-radius:0}
body.splash .wait__row input{border-radius:0;box-shadow:none}
/* input:not([type=checkbox]) also dresses the ledger's range input */
body.splash input[type=range]{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:inherit;color:inherit}
/* the production theme toggle (/theme.js paints its icon + labels) wears
   the pill's icon-button look; in the mobile sheet it is a full row */
body.splash .theme-toggle{width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:inherit;line-height:1;transition:color .15s,background .15s}
body.splash .theme-toggle:hover{color:var(--text);border-color:transparent;background:var(--sunk)}
body.splash .theme-toggle svg{width:18px;height:18px;flex:0 0 auto;display:block}

/* ================================================================
   PORTED COMP CSS — part1-head (tokens · base · hero · widget · shared)
   ================================================================ */

/* ---------- tokens: light (bare :root), dark by media (guarded), dark by stamp ---------- */
body.splash{
  color-scheme:light;
  --ground:#f6f1e8; --panel:#fbf8f2; --raised:#ffffff; --sunk:#efe7da;
  --border:#e3d9ca; --border-strong:#cbbcaa;
  --text:#1c1613; --text-2:#5f544b; --text-3:#6b5f55;
  --accent:#e0642f; --accent-text:#b8491a; --accent-ink:#9e3c11; --accent-soft:rgba(224,100,47,.12); --accent-line:rgba(224,100,47,.38); --on-accent:#ffffff;
  --term-bg:#1a1512; --term-ink:#f4ede4; --term-dim:#9b8e83; --term-line:#2e2621; --term-raised:#241e1a;
  --ok:#2c8a5a; --ok-ink:#1e6743; --ok-soft:rgba(44,138,90,.14);
  --warning:#8a5615; --gold:#8a6712; --shadow-col:rgba(63,39,24,.12); --orb-client:#c1531f; --orb-prov:#1c8875;
  --shadow:0 1px 2px rgba(60,40,20,.06),0 14px 36px -18px rgba(60,40,20,.28);
  --shadow-sm:0 1px 1px rgba(60,40,20,.05),0 6px 16px -10px rgba(60,40,20,.2);
  --nav-bg:rgba(251,248,242,.78);
  --provider-atlas:var(--provider-atlas-light);
  --display:"Noto Sans","Noto Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Noto Sans","Noto Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cyoa-light-display:block; --cyoa-dark-display:none;
  --brand-mark:#e0642f; --term-accent:#e0642f;
}

:root[data-theme="night"] body.splash{
  color-scheme:dark;
  --ground:#141110; --panel:#1b1614; --raised:#221c19; --sunk:#0f0c0b;
  --border:#2f2723; --border-strong:#4a3d35;
  --text:#f3ece3; --text-2:#b3a698; --text-3:#9a8d83;
  --accent:#ff7a3d; --accent-text:#ff9160; --accent-ink:#ff9160; --accent-soft:rgba(255,122,61,.15); --accent-line:rgba(255,122,61,.42); --on-accent:#1a0f08;
  --term-bg:#0f0c0b; --term-ink:#f3ece3; --term-dim:#8f8378; --term-line:#2a221e; --term-raised:#181311;
  --ok:#5fd39a; --ok-ink:#5fd39a; --ok-soft:rgba(95,211,154,.14);
  --warning:#e5a85a; --gold:#e2b755; --shadow-col:rgba(0,0,0,.4); --orb-client:#ffb082; --orb-prov:#7ad9c4;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 18px 44px -20px rgba(0,0,0,.75);
  --shadow-sm:0 1px 1px rgba(0,0,0,.4),0 8px 18px -10px rgba(0,0,0,.6);
  --nav-bg:rgba(27,22,20,.78);
  --provider-atlas:var(--provider-atlas-dark);
  --cyoa-light-display:none; --cyoa-dark-display:block;
  --brand-mark:#ff7a3d; --term-accent:#ff7a3d;
}
/* ================================================================
   TITANIUM (the default) and GUNMETAL (its dark), the owner's 2026-09-08
   direction. No hue: a brushed-aluminium ground, a gunmetal button, ice in
   the terminal. Depth comes from 1px specular edges and soft inset shadows,
   never from glow, and a gradient only ever sits on a surface, never on a
   background. The one chroma is the steel-blue signal, which takes the
   --accent role here; the identity mark keeps its orange in every theme
   (--brand-mark), because /logo.svg on the app pages cannot follow a token.
   The ink values are the designer's neutrals pushed until every one of them
   clears 4.5:1 on the darkest ground it lands on (--sunk).
   ================================================================ */
:root[data-theme="titanium"] body.splash{
  color-scheme:light;
  --ground:#edeef0; --panel:#f5f6f7; --raised:#fcfcfd; --sunk:#e3e5e8;
  --border:#d3d6da; --border-strong:#a9aeb5;
  --text:#0f1114; --text-2:#4b5058; --text-3:#575d66;
  --accent:#4f7096; --accent-text:#3b5a7c; --accent-ink:#33506f; --accent-soft:rgba(79,112,150,.12); --accent-line:rgba(79,112,150,.38); --on-accent:#ffffff;
  --term-bg:#15181c; --term-ink:#d9dde2; --term-dim:#8a9099; --term-line:#0b0d10; --term-raised:#1e2227;
  --ok:#3c8c6e; --ok-ink:#2a6650; --ok-soft:rgba(60,140,110,.14);
  --warning:#7c5a1f; --gold:#7c5a1f; --shadow-col:rgba(15,17,20,.12); --orb-client:#4f7096; --orb-prov:#3c8c6e;
  --shadow:0 1px 2px rgba(15,17,20,.08),0 12px 30px -18px rgba(15,17,20,.25);
  --shadow-sm:0 1px 1px rgba(15,17,20,.06),0 6px 16px -12px rgba(15,17,20,.2);
  --nav-bg:rgba(245,246,247,.82);
  --provider-atlas:var(--provider-atlas-light);
  --cyoa-light-display:block; --cyoa-dark-display:none;
  --term-ok:#7fc7a6; --brand-mark:#e0642f; --term-accent:#9cc3e6;
  /* surfaces (see the metal treatments below) */
  --surf-metal:linear-gradient(180deg,#f9fafb 0%,#e4e6e9 100%);
  --surf-metal-edge:inset 0 1px 0 #ffffff;
  --surf-primary:linear-gradient(180deg,#2b2f35 0%,#15181c 100%);
  --surf-primary-ink:#f5f6f7; --surf-primary-border:#0b0d10;
  --surf-primary-edge:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.35);
  --chrome-text:linear-gradient(180deg,#7b828b 0%,#3a3f46 55%,#6b717a 100%);
  --rule-edge:linear-gradient(180deg,#c9cdd2,#9aa0a8);
  --plate-light:#8b929b;
}

:root[data-theme="gunmetal"] body.splash{
  color-scheme:dark;
  --ground:#0f1114; --panel:#16191d; --raised:#1e2227; --sunk:#0b0d10;
  --border:#2a2f35; --border-strong:#3f464e;
  --text:#e8eaed; --text-2:#a4a9b0; --text-3:#949aa2;
  --accent:#7fa7cf; --accent-text:#8fb4d9; --accent-ink:#9dc0e2; --accent-soft:rgba(127,167,207,.15); --accent-line:rgba(127,167,207,.42); --on-accent:#0f1114;
  --term-bg:#0b0d10; --term-ink:#d9dde2; --term-dim:#959ba4; --term-line:#2a2f35; --term-raised:#16191d;
  --ok:#7fc7a6; --ok-ink:#7fc7a6; --ok-soft:rgba(127,199,166,.14);
  --warning:#d2a75c; --gold:#d2a75c; --shadow-col:rgba(0,0,0,.45); --orb-client:#9dc0e2; --orb-prov:#7fc7a6;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -22px rgba(0,0,0,.8);
  --shadow-sm:0 1px 1px rgba(0,0,0,.45),0 8px 18px -12px rgba(0,0,0,.65);
  --nav-bg:rgba(22,25,29,.82);
  --provider-atlas:var(--provider-atlas-dark);
  --cyoa-light-display:none; --cyoa-dark-display:block;
  --term-ok:#7fc7a6; --brand-mark:#ff7a3d; --term-accent:#9cc3e6;
  --surf-metal:linear-gradient(180deg,#2a2f35 0%,#1a1d21 100%);
  --surf-metal-edge:inset 0 1px 0 rgba(255,255,255,.07);
  --surf-primary:linear-gradient(180deg,#f2f3f5 0%,#b9bec5 100%);
  --surf-primary-ink:#0f1114; --surf-primary-border:#8f959d;
  --surf-primary-edge:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.45);
  --chrome-text:linear-gradient(180deg,#e8eaed 0%,#8f959d 55%,#c9ced6 100%);
  --rule-edge:linear-gradient(180deg,#3f464e,#2a2f35);
  --plate-light:#c9ced6;
}

body.splash{ --provider-atlas-light:url(/provider-atlas-light.webp?v=__V__); --provider-atlas-dark:url(/provider-atlas-dark.webp?v=__V__); }
/* theme-invariant roles */
body.splash{ --success:var(--ok); --term-ok:#5fd39a; --kicker:600 .72rem/1.35 var(--body); --kicker-track:.04em; }
/* the smallest box a control gets: 40px under a pointer, 44px under a
   finger or on a phone-wide layout */
body.splash{ --tap:2.5rem; }
@media (pointer: coarse), (max-width: 640px){ body.splash{ --tap:2.75rem; } }
/* how far an anchored target's TOP must sit under the page top so its
   first line clears the floating nav (14px inset + 52px pill) by about
   2rem; each target's own top padding does most of that, so its
   scroll-margin is only the remainder (see the section rules). */
body.splash{ --nav-clear:6.25rem; }

/* ---------- base ---------- */

body.splash{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.splash img,body.splash svg{display:block;max-width:100%}
body.splash a{color:inherit;text-decoration:none}
body.splash button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
body.splash code,body.splash kbd,body.splash pre{font-family:var(--mono);font-size:.92em}
body.splash h1,body.splash h2,body.splash h3,body.splash h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.12;text-wrap:balance}
body.splash p{margin:0}
body.splash ul,body.splash ol{margin:0;padding:0;list-style:none}
body.splash :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
body.splash ::selection{background:var(--accent-soft)}
body.splash .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.splash .shell{width:min(1120px,calc(100% - 2.5rem));margin-inline:auto}
body.splash .num{font-variant-numeric:tabular-nums}
body.splash .skip{position:absolute;left:1rem;top:-3rem;z-index:100;display:inline-flex;align-items:center;min-height:var(--tap);padding:.5rem .8rem;background:var(--raised);border:1px solid var(--border-strong);border-radius:8px}
body.splash .skip:focus-visible{top:1rem}

/* type roles */
body.splash .eyebrow{font-family:var(--body);font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--accent-text)}
body.splash .h2{font-size:clamp(1.7rem,1.15rem + 1.75vw,2.4rem);letter-spacing:-.014em;font-weight:800;max-width:22ch}
body.splash .h3{font-size:1.2rem;letter-spacing:-.012em;font-weight:700}
body.splash .lead{font-size:1.0625rem;color:var(--text-2);max-width:60ch}
body.splash .small{font-size:.8125rem;color:var(--text-3)}
body.splash .link{color:var(--accent-text);font-weight:600;display:inline-flex;align-items:center;min-height:var(--tap);margin:-.6rem 0}
body.splash .link:hover{text-decoration:underline;text-underline-offset:.2em}
body.splash .emph{color:var(--accent-text)}

/* chips */
body.splash .chip{display:inline-flex;align-items:center;gap:.35rem;height:1.45rem;padding:0 .55rem;border-radius:999px;font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
body.splash .chip--coming{color:var(--text-3);border:1px dashed var(--border-strong)}
/* a Coming chip that is a link keeps its size and grows an invisible hit
   area to the tap minimum */
body.splash a.chip--coming{position:relative}
body.splash a.chip--coming::before{content:"";position:absolute;inset:calc((1.45rem - var(--tap)) / 2) -.4rem}
body.splash .chip--shipped{color:var(--ok-ink);background:var(--ok-soft)}
body.splash .chip--free{color:var(--accent-ink);background:var(--accent-soft)}
body.splash .chip--note{color:var(--text-3);background:var(--sunk)}
body.splash .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);flex:none}

/* buttons */
body.splash .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:max(2.6rem,var(--tap));padding:.55rem 1.05rem;border-radius:999px;font-weight:600;font-size:.9375rem;line-height:1;border:1px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease}
body.splash .btn:active{transform:translateY(1px)}
body.splash .btn--dark{background:var(--text);color:var(--ground)}
body.splash .btn--dark:hover{background:var(--accent);color:var(--on-accent)}
body.splash .btn--ghost{border-color:var(--border-strong);background:var(--raised);color:var(--text)}
body.splash .btn--ghost:hover{border-color:var(--accent)}
body.splash .btn--accent{background:var(--accent);color:var(--on-accent)}
body.splash .btn--accent:hover{filter:brightness(1.06)}

/* ---------- floating pill nav ---------- */
body.splash .nav{position:fixed;inset:14px 0 auto 0;z-index:50;display:flex;justify-content:center;padding:0 .75rem;pointer-events:none}
body.splash .nav__pill{
  pointer-events:auto;display:flex;align-items:center;gap:.25rem;
  height:52px;padding:0 .45rem 0 .8rem;border-radius:999px;
  background:var(--nav-bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  max-width:calc(100vw - 1.5rem);
}
body.splash .brand{display:inline-flex;align-items:center;gap:.55rem;padding-right:.6rem;min-height:var(--tap)}
body.splash .brand__logo{width:44px;height:auto;color:var(--brand-mark)}
body.splash .brand__word{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.02rem}
body.splash .brand__word b{font-weight:500;color:var(--text-3)}
body.splash .nav__links{display:flex;align-items:center;gap:.1rem;padding:0 .55rem}
body.splash .nav__links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .7rem;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--text-2);transition:color .15s,background .15s}
body.splash .nav__links a:hover{color:var(--text);background:var(--sunk)}
body.splash .nav__links a[aria-current="true"]{color:var(--accent-ink);background:var(--accent-soft)}
body.splash .nav__icons{display:flex;align-items:center;gap:.05rem;padding:0 .15rem}
body.splash .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:999px;color:var(--text-2);transition:color .15s,background .15s}
body.splash .iconbtn:hover{color:var(--text);background:var(--sunk)}
body.splash .iconbtn svg{width:18px;height:18px}
body.splash .nav .btn{min-height:var(--tap);padding:.45rem .95rem;font-size:.875rem}
/* the nav's Download is relabelled for the visitor's OS ("↓ macOS"); the
   box is sized for the longer default so the centred pill never moves */
body.splash #nav-download{min-width:7.5rem}
body.splash .nav__menu{display:none}
body.splash .nav__sheet{display:none}
@media (max-width: 960px){
  body.splash .nav__links,body.splash .nav__icons{display:none}
  body.splash .nav__menu{display:inline-flex}
  body.splash .nav__pill{width:100%;justify-content:space-between;padding-left:.7rem}
  body.splash .nav__sheet{display:flex;flex-direction:column;gap:.15rem;position:fixed;left:.75rem;right:.75rem;top:74px;z-index:49;padding:.6rem;border-radius:18px;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:var(--shadow)}
  body.splash .nav__sheet[hidden]{display:none}
  body.splash .nav__sheet a,body.splash .nav__sheet button{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 .9rem;border-radius:12px;font-weight:500;color:var(--text)}
  body.splash .nav__sheet a:hover,body.splash .nav__sheet button:hover{background:var(--sunk)}
  body.splash .nav__sheet a[aria-current="true"]{color:var(--accent-text)}
}

/* ---------- hero ---------- */
body.splash .hero{padding:9.5rem 0 3.5rem;text-align:center;position:relative}
body.splash .hero__inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;width:min(1040px,calc(100% - 2rem));margin-inline:auto}
body.splash .hero__pill{display:inline-flex;align-items:center;gap:.55rem;min-height:2rem;padding:.3rem .85rem .3rem .65rem;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-size:.8125rem;font-weight:500;color:var(--text-2);text-wrap:balance;text-align:left}
body.splash .hero__pill .num{color:var(--text)}
body.splash .hero__title{font-size:clamp(2.1rem,.95rem + 3.5vw,3.3rem);font-weight:800;letter-spacing:-.016em;line-height:1.08;max-width:20ch}
body.splash .hero__title em{font-style:normal;color:var(--accent)}
body.splash .hero__give{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;font-size:1.05rem;color:var(--text-2)}
body.splash .osmarks{display:inline-flex;gap:.35rem}
body.splash .osmarks span{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:8px;background:var(--sunk);color:var(--text-2)}
body.splash .osmarks svg{width:15px;height:15px}
body.splash .cmd{width:min(720px,100%);border-radius:16px;background:var(--term-bg);color:var(--term-ink);box-shadow:var(--shadow);border:1px solid var(--term-line);text-align:left;overflow:hidden}
body.splash .cmd__tabs{display:flex;gap:.15rem;padding:.5rem .6rem 0;border-bottom:1px solid var(--term-line)}
body.splash .cmd__tabs button{padding:.35rem .7rem .55rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--term-dim);border-bottom:2px solid transparent;margin-bottom:-1px;min-height:var(--tap)}
body.splash .cmd__tabs button[aria-selected="true"]{color:var(--term-ink);border-bottom-color:var(--accent)}
body.splash .cmd__tabs button:hover{color:var(--term-ink)}
body.splash .cmd__row{display:flex;align-items:center;gap:.8rem;padding:1rem 1rem 1rem 1.15rem}
body.splash .cmd__prompt{font-family:var(--mono);color:var(--term-accent);font-weight:600;flex:none}
body.splash .cmd__code{flex:1;min-width:0;font-family:var(--mono);font-size:.98rem;white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:.2rem}
body.splash .cmd__code::-webkit-scrollbar{display:none}
body.splash .cmd__code b{font-weight:500;color:var(--term-accent)}

body.splash .copy{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:0 .8rem;border-radius:10px;border:1px solid var(--term-line);background:var(--term-raised);color:var(--term-ink);font-size:.8125rem;font-weight:600;transition:border-color .15s,background .15s}
body.splash .copy:hover{border-color:var(--accent)}
body.splash .copy[data-done="1"]{color:var(--ok);border-color:var(--ok)}
body.splash .copy svg{width:14px;height:14px}
/* on a phone the command never breaks mid-word: one line in a field that
   scrolls sideways, the prompt and the Copy button outside it and always
   in view. */
@media (max-width: 640px){body.splash .cmd__code{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:.86rem}body.splash .cmd__row{gap:.6rem}}
body.splash .hero__kicker{font-family:var(--display);font-size:1.12rem;color:var(--text-2);font-weight:500;letter-spacing:-.005em}
body.splash .hero__kicker em{font-style:italic}

/* ---------- the three chapters, named under the headline ----------
   A row of three real links: index, name, then a middle dot and one
   qualifier. Space, not rules, tells them apart. At rest the index is
   the mono accent; hover or
   focus lifts the whole fragment to full ink and FILLS the index, the way
   the chapter rail fills its dot. */
body.splash .hero__layers{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.4rem 1.6rem;width:min(940px,100%);margin:0}
body.splash .hero__layers a{
  flex:1 1 0;min-width:0;display:block;padding:.15rem 1.1rem;border-radius:10px;
  color:var(--text-2);font-size:.92rem;line-height:1.45;text-align:center;text-wrap:balance;
  transition:color .15s;
}
body.splash .hero__layers b{
  display:inline-block;margin-right:.5rem;padding:.05rem .3rem;border-radius:5px;
  font:600 .78rem/1.4 var(--mono);letter-spacing:.12em;font-variant-numeric:tabular-nums;
  color:var(--accent-text);background:transparent;
  transition:color .15s,background .15s;
}
body.splash .hero__layers .n{font-weight:500;color:var(--text)}
body.splash .hero__layers .d::before{content:"·";margin:0 .4em;color:var(--text-3)}
body.splash .hero__layers a:hover,body.splash .hero__layers a:focus-visible{color:var(--text)}
body.splash .hero__layers a:hover b,body.splash .hero__layers a:focus-visible b{color:var(--on-accent);background:var(--accent)}
body.splash .hero__layers a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width: 1023px){
  body.splash .hero__layers{flex-direction:column;width:100%;gap:.15rem}
  body.splash .hero__layers a{flex:none;min-height:var(--tap);text-align:left;padding:.45rem .25rem}
}
@media (prefers-reduced-motion: reduce){body.splash .hero__layers a,body.splash .hero__layers b{transition:none}}
@media (max-width: 640px){
  body.splash .hero{padding:6rem 0 2.25rem}
  body.splash .hero__inner{gap:1.15rem}
  body.splash .hero__pill{min-height:var(--tap)}
}
/* the one plain line under the headline: what the thing is */
body.splash .hero__lead{max-width:56ch;margin-top:-.4rem;font-size:1.0625rem;line-height:1.55;color:var(--text-2);text-wrap:balance}
/* anchored targets: top padding plus scroll-margin equals --nav-clear, so
   a fragment lands with its first line about 2rem under the nav in every
   section (the chapter and section paddings differ; see 2a and 6a). */
body.splash main section[id]{scroll-margin-top:calc(var(--nav-clear) - 6rem)}
body.splash main section.sec--tight[id]{scroll-margin-top:calc(var(--nav-clear) - 4rem)}
body.splash main section.chapter[id]{scroll-margin-top:calc(var(--nav-clear) - 5rem)}

/* panel visual frames */
body.splash .vis{position:relative;border-radius:20px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
body.splash .vis__cap{position:absolute;left:1rem;bottom:.8rem;font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3)}

/* router flow */
body.splash .router{padding:1.4rem 1.25rem 2.4rem;display:flex;flex-direction:column;gap:1.1rem}
body.splash .router__head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
body.splash .router__lane{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:.5rem}
body.splash .rnode{display:flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.35rem .7rem .35rem .45rem;border-radius:12px;border:1px solid var(--border-strong);background:var(--raised);font-family:var(--mono);font-size:.78rem;font-weight:500;position:relative;white-space:nowrap}
body.splash .rnode--src{background:var(--sunk);border-color:var(--border)}
body.splash .rnode__st{position:absolute;right:-.45rem;top:-.55rem;width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-weight:700;color:var(--on-accent);background:var(--text-3);opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s}
body.splash .rnode__st--x{background:var(--text-3)}
/* the badge inks clear 4.5:1 in every theme: the ✓ on the darker ok ink */
body.splash .rnode__st--ok{background:var(--ok-ink)}
body.splash .rwire{position:relative;height:2px;background:var(--border-strong);border-radius:2px;overflow:visible}
/* the pulse: a dot with its soft ring, drawn by a radial gradient that
   slides along the wire on background-position. Paint only, so the strip
   plays without a single layout-shift entry (animating `left` made one
   per frame). */
body.splash .rwire::after{content:"";position:absolute;top:50%;left:0;right:0;height:1.05rem;margin-top:-.525rem;background:radial-gradient(circle at 50% 50%,var(--accent) 0 .27rem,var(--accent-soft) .28rem .5rem,transparent .52rem) no-repeat 0 50% / 1.05rem 1.05rem;opacity:0}
body.splash .pm{width:1.35rem;height:1.35rem;flex:none;background-image:var(--provider-atlas);background-repeat:no-repeat;background-size:600% 100%;background-position:calc(var(--bi,0)/5*100%) 50%;border-radius:5px}
/* the atlas holds six provider marks; the failover strip names two of
   them, so only those two cells are addressed here */
body.splash .pm--deepseek{--bi:0}body.splash .pm--zai{--bi:1}
body.splash .router__foot{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:center}
/* animation: 7.2s loop. wire1 pulse -> node1 X -> wire2 pulse -> node2 OK -> billed */
body.splash .router.is-live .rwire--1::after{animation:rpulse 7.2s linear infinite}
body.splash .router.is-live .rwire--2::after{animation:rpulse 7.2s linear infinite;animation-delay:1.6s}
body.splash .router.is-live .rwire--3::after{animation:rpulse 7.2s linear infinite;animation-delay:3.2s}
body.splash .router.is-live .rnode--1 .rnode__st{animation:rst 7.2s linear infinite;animation-delay:1.05s}
body.splash .router.is-live .rnode--2 .rnode__st{animation:rst 7.2s linear infinite;animation-delay:2.7s}
body.splash .router.is-live .rnode--bill .rnode__st{animation:rst 7.2s linear infinite;animation-delay:4.3s}
body.splash .router.is-live .rnode--1{animation:rreject 7.2s linear infinite;animation-delay:1.05s}
@keyframes rpulse{0%{opacity:0;background-position-x:0}2%{opacity:1}14%{opacity:1;background-position-x:100%}16%{opacity:0;background-position-x:100%}100%{opacity:0;background-position-x:100%}}
@keyframes rst{0%{opacity:0;transform:scale(.5)}4%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}78%{opacity:0;transform:scale(.5)}100%{opacity:0}}
/* the rejected node is dimmed by ink, never by opacity (a half-transparent
   label fails contrast on any ground) */
@keyframes rreject{0%{border-color:var(--border-strong)}4%{border-color:var(--text-3);color:var(--text-3)}70%{color:var(--text-3);border-color:var(--text-3)}78%{color:var(--text);border-color:var(--border-strong)}100%{color:var(--text)}}
@media (prefers-reduced-motion: reduce){body.splash .router.is-live .rwire::after,body.splash .router.is-live .rnode__st,body.splash .router.is-live .rnode--1{animation:none}body.splash .router.is-live .rnode--1 .rnode__st,body.splash .router.is-live .rnode--2 .rnode__st,body.splash .router.is-live .rnode--bill .rnode__st{opacity:1;transform:none}body.splash .router.is-live .rnode--1{color:var(--text-3);border-color:var(--text-3)}}
@media (max-width: 560px){body.splash .router__lane{grid-template-columns:1fr;gap:.35rem}body.splash .rwire{height:1.2rem;width:2px;margin-left:1.3rem;background:var(--border-strong)}body.splash .rwire::after{top:0;bottom:0;left:50%;right:auto;width:1.05rem;height:auto;margin:0 0 0 -.525rem;background-position:50% 0}body.splash .router.is-live .rwire::after{animation-name:rpulseV}@keyframes rpulseV{0%{opacity:0;background-position-y:0}2%{opacity:1}14%{opacity:1;background-position-y:100%}16%{opacity:0;background-position-y:100%}100%{opacity:0;background-position-y:100%}}}

/* ---------- sections ---------- */
body.splash .sec{padding:6rem 0}
body.splash .sec--tight{padding:4rem 0}
body.splash .sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end;margin-bottom:3rem}
body.splash .sec__head .eyebrow{margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
body.splash .sec__head .lead{justify-self:end}
@media (max-width: 900px){body.splash .sec__head{grid-template-columns:1fr;gap:1rem}body.splash .sec__head .lead{justify-self:start}}

/* reveal: visible at rest; only a slight rise on entry */
body.splash [data-rv]{transform:translateY(16px);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
body.splash [data-rv].in{transform:none}
@media (prefers-reduced-motion: reduce){body.splash [data-rv]{transform:none;transition:none}}

/* ---------- diagram ---------- */
body.splash .diagram{border-radius:22px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);padding:1.25rem;overflow-x:auto}
body.splash .diagram svg{width:100%;min-width:760px;height:auto;font-family:var(--body)}
body.splash .diagram .box{fill:var(--raised);stroke:var(--border-strong)}
body.splash .diagram .box--acc{fill:color-mix(in srgb,var(--accent) 7%,var(--raised));stroke:var(--accent)}
body.splash .diagram .zone{fill:var(--sunk);stroke:var(--border)}
body.splash .diagram .t{fill:var(--text);font-size:13px;font-weight:600}
body.splash .diagram .t2{fill:var(--text-2);font-size:12px}
/* the diagram's own words are labels, not code: only .tm (surface and
   command names) stays mono. The wording is untouched. */
body.splash .diagram .t3{fill:var(--text-3);font-size:11.5px;font-family:var(--body);font-weight:600;letter-spacing:.03em}
/* the three column headings sit on the diagram's --sunk zones, where the
   lighter --accent-text lands at 4.27:1; the chip ink clears 4.5:1 there
   in both stamps. */
body.splash .diagram .tk{fill:var(--accent-ink);font-size:11.5px;font-family:var(--body);font-weight:700;letter-spacing:.04em}
body.splash .diagram .tm{fill:var(--text);font-size:12px;font-family:var(--mono);font-weight:500}
body.splash .diagram .w{stroke:var(--border-strong);fill:none;stroke-width:1.5}
body.splash .diagram .w--acc{stroke:var(--accent);stroke-width:1.75}
body.splash .diagram .w--dash{stroke-dasharray:4 4}
body.splash .diagram .cm{fill:var(--text-3);font-size:11px;font-family:var(--body);letter-spacing:.01em}
body.splash .diagram__hint{display:none;font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3);margin-top:.6rem}
@media (max-width: 800px){body.splash .diagram__hint{display:block}}

/* ---------- harness: downloads (grid lives in pass2-b) ---------- */
body.splash .kbd{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.78rem;padding:.3rem .6rem;border-radius:8px;background:var(--sunk);border:1px solid var(--border);color:var(--text)}
/* ---------- harness: benchmark ---------- */
body.splash .bench{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2rem 3rem;align-items:start;margin:4rem 0}
body.splash .bench__figs{display:grid;grid-template-columns:repeat(3,auto);gap:1.5rem 2rem;justify-content:start}
body.splash .fig{display:flex;flex-direction:column;gap:.25rem}
body.splash .fig__n{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
body.splash .fig__n small{font-size:.5em;color:var(--text-3);font-weight:600;letter-spacing:-.01em;margin-left:.15em}
body.splash .fig__l{font-size:.8125rem;color:var(--text-2)}
body.splash .bench__copy{display:flex;flex-direction:column;gap:.8rem;grid-column:1;margin-top:1.4rem}
body.splash .bench__chart{grid-column:2;grid-row:1 / span 2}
body.splash .bars{display:flex;flex-direction:column;gap:.45rem;font-size:.8125rem}
body.splash .bar{display:grid;grid-template-columns:6.2rem 1fr 2.6rem;align-items:center;gap:.7rem}
body.splash .bar__l{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.splash .bar__t{height:.9rem;border-radius:0 4px 4px 0;background:var(--border-strong);width:calc(var(--v)/21*100%);min-width:2px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
body.splash .bar--me .bar__l{color:var(--text);font-weight:600}
body.splash .bar--me .bar__t{background:var(--accent)}
body.splash .bar__v{font-family:var(--mono);font-size:.78rem;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
body.splash .bar--me .bar__v{color:var(--text);font-weight:600}
body.splash .bars__axis{display:grid;grid-template-columns:6.2rem 1fr 2.6rem;gap:.7rem;font-family:var(--mono);font-size:.66rem;color:var(--text-3);letter-spacing:.06em}
body.splash .bars__axis span:nth-child(2){display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:.3rem}
body.splash .bars__cap{font-size:.78rem;color:var(--text-3);margin-top:.9rem}
@media (max-width: 900px){body.splash .bench{grid-template-columns:1fr}body.splash .bench__chart{grid-column:1;grid-row:auto}body.splash .bench__copy{grid-column:1}}
@media (max-width: 420px){body.splash .bench__figs{grid-template-columns:repeat(3,auto);gap:1rem}}

/* ---------- the frame every ported feature visual sits in ---------- */
body.splash .ftile__vis{border-radius:12px;background:var(--raised);border:1px solid var(--border);overflow:hidden;min-height:8.5rem;display:flex;flex-direction:column;justify-content:center}

/* ---------- Go ---------- */
body.splash .card{border-radius:20px;border:1px solid var(--border);background:var(--panel);padding:1.4rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
body.splash .card--raised{background:var(--raised);box-shadow:var(--shadow)}
body.splash .card__h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
body.splash .card__h .h3{font-size:1.1rem}
body.splash .card__p{font-size:.9rem;color:var(--text-2)}
body.splash .wallet{display:flex;flex-direction:column;gap:.8rem;padding:1rem;border-radius:14px;background:var(--sunk);border:1px solid var(--border)}
body.splash .wallet__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3)}
body.splash .wallet__bal{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
body.splash .wallet__bal small{font-size:.5em;color:var(--text-3);font-weight:600;letter-spacing:0}
body.splash .wallet__bar{height:.6rem;border-radius:4px;background:var(--border);display:flex;overflow:hidden}
body.splash .wallet__bar i{height:100%;background:var(--accent)}
body.splash .wallet__bar i+i{background:var(--accent-text);opacity:.55;border-left:2px solid var(--sunk)}
body.splash .wallet__leg{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.76rem;color:var(--text-2);font-family:var(--mono)}
body.splash .wallet__leg span::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:2px;background:var(--accent);margin-right:.4rem;vertical-align:-1px}
body.splash .wallet__leg span:nth-child(2)::before{background:var(--accent-text);opacity:.55}
body.splash .spend{display:flex;flex-direction:column;gap:.45rem}
body.splash .spend li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.875rem;padding:.65rem 0;border-bottom:1px solid var(--border)}
body.splash .spend li:last-child{border-bottom:0}
body.splash .spend b{font-weight:600}
body.splash .spend .chip{flex:none}

body.splash .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
/* a plan tile: the mark on the left — ONE square, centred against the whole
   tile — and the information on the right: name · price on one row, then
   the feature lines on their hairlines. A tile without a mark (Free) gives
   its body the whole row. */
body.splash .tier{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;align-items:center;padding:1.1rem;border-radius:16px;border:1px solid var(--border);background:var(--sunk);min-width:0}
body.splash .tier--go{border-color:var(--accent-line);box-shadow:inset 0 0 0 1px var(--accent-soft)}
/* the mark is the plan's own pixel-art badge (brand/go-800, brand/go-max-800):
   a 3.5rem square so GO / GO MAX read, rendered crisp — never blurred. */
body.splash .tier__mark{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:8px;overflow:hidden;background:var(--sunk)}
body.splash .tier__mark--max{background:var(--term-bg)}
body.splash .tier__mark img{width:100%;height:100%;object-fit:cover;border-radius:8px;image-rendering:pixelated}
body.splash .tier__body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
body.splash .tier__body:only-child{grid-column:1 / -1}
body.splash .tier__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .55rem;min-width:0}
body.splash .tier__n{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.012em}
body.splash .tier__price{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.018em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
body.splash .tier__price small{font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--text-3);letter-spacing:0;margin-left:.15rem}
body.splash .tier__rows{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;color:var(--text-2)}
body.splash .tier__rows li{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-top:1px solid var(--border)}
body.splash .tier__rows b{font-family:var(--mono);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
body.splash .tier__rows .chip{height:1.3rem}
@media (max-width: 640px){body.splash .tiers{grid-template-columns:1fr}}
/* ONE primary per view: Go's tile carries the filled button, Go Max's the
   metal/ghost one, in the plans section and in #path alike */
body.splash .tier__buy .btn--ghost{background:var(--raised)}

/* ---------- choose your path ---------- */
body.splash .path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:stretch}
body.splash .path__art{border-radius:22px;overflow:hidden;border:1px solid var(--border);background:var(--panel);min-height:16rem;position:relative}
body.splash .path__art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
body.splash .path__img--light{display:var(--cyoa-light-display)}
body.splash .path__img--dark{display:var(--cyoa-dark-display)}
body.splash .path__cards{display:grid;grid-template-rows:auto auto;gap:1rem}
body.splash .oauth{display:flex;gap:.4rem;flex-wrap:wrap}
body.splash .oauth span{font-family:var(--mono);font-size:.72rem;padding:.3rem .55rem;border-radius:7px;background:var(--sunk);border:1px solid var(--border);color:var(--text-2)}
/* three plans in the path card: Free spans the row, Go and Go Max stand 2-up
   beside it — a 3-up tile here is 164px, too narrow for a mark AND a
   name · price row. */
body.splash .tiers--path{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
body.splash .tiers--path .tier:first-child{grid-column:1 / -1}
body.splash .tiers--path .tier{padding:.8rem .9rem}
body.splash .tiers--path .tier__price{font-size:1.25rem}
body.splash .tiers--path .tier__rows{font-size:.74rem}
body.splash .path .card .btn{align-self:flex-start}
@media (max-width: 900px){body.splash .path{grid-template-columns:1fr}}
@media (max-width: 640px){body.splash .tiers--path{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
body.splash .faq{display:flex;flex-direction:column;border-top:1px solid var(--border)}
body.splash .faq details{border-bottom:1px solid var(--border)}
body.splash .faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.4rem;padding:.9rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;transition:color .15s}
body.splash .faq summary:hover{color:var(--accent-text)}
body.splash .faq summary::-webkit-details-marker{display:none}
body.splash .faq summary::after{content:"+";font-family:var(--mono);color:var(--accent-text);font-size:1.2rem;flex:none;transition:transform .2s}
body.splash .faq details[open] summary::after{transform:rotate(45deg)}
body.splash .faq details p{padding:0 0 1.1rem;color:var(--text-2);max-width:62ch}
body.splash .faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2rem 4rem;align-items:start}
@media (max-width: 800px){body.splash .faq-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
/* /style.css gives every <footer> a top rule; the landing's is delimited
   by its own panel ground, so the rule is reset here rather than there. */
body.splash .foot{padding:5rem 0 2.5rem;border-top:0;background:var(--panel)}
body.splash .foot__top{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
body.splash .foot__brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
body.splash .foot__brand .brand__logo{width:64px}
body.splash .foot__col h3{font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3);margin-bottom:.9rem}
body.splash .foot__col ul{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem}
body.splash .foot__col a{color:var(--text-2);display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);min-width:var(--tap)}
body.splash .foot__col a:hover{color:var(--accent-text)}
body.splash .wait{display:flex;flex-direction:column;gap:.5rem;width:100%}
body.splash .wait__row{display:flex;gap:.4rem;padding:.3rem;border-radius:999px;border:1px solid var(--border-strong);background:var(--raised);max-width:22rem}
body.splash .wait__row input{flex:1;min-width:0;border:0;background:none;padding:0 .8rem;font:inherit;font-size:.9rem;color:var(--text);min-height:var(--tap)}
body.splash .wait__row input::placeholder{color:var(--text-3)}
/* the field keeps the page's own 2px ring, drawn inside its pill */
body.splash .wait__row input:focus-visible{outline-offset:-2px;border-radius:999px}
body.splash .wait__row:focus-within{border-color:var(--accent)}
body.splash .wait__row .btn{min-height:var(--tap);padding:.4rem .9rem;font-size:.85rem}
body.splash .foot__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3.5rem;font-size:.8rem;color:var(--text-3)}
body.splash .foot__bottom a{display:inline-block;min-width:var(--tap);padding:.75rem .15rem;margin:-.75rem 0;text-align:center}
body.splash .foot__bottom a:hover{color:var(--accent-text)}
@media (max-width: 900px){body.splash .foot__top{grid-template-columns:1fr 1fr}body.splash .foot__brand{grid-column:1 / -1}}
@media (max-width: 480px){body.splash .foot__top{grid-template-columns:1fr}}

/* ================================================================
   PORTED COMP CSS — pass2-b.css (the feature visuals)
   ================================================================ */
/* pass2-b.css — everything below the pills. Tokens it reads (--success --warning --gold --shadow-col --orb-* --term-ok --kicker) live in the base sheet. */

/* ============================================================
   B · DOWNLOAD — six unmistakable buttons
   ============================================================ */
body.splash #download .dlx__head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;margin-bottom:1rem}
body.splash #download .dlx__tag{font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3)}
body.splash #download .dlx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
body.splash #download .dlx__col{display:flex;flex-direction:column;min-width:0}
body.splash #download .dlx__btn{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;
  column-gap:.75rem;row-gap:.2rem;align-items:center;
  padding:1rem 1.05rem 1.05rem;border-radius:16px;
  border:1px solid var(--border-strong);background:var(--raised);
  box-shadow:var(--shadow-sm);color:inherit;
  transition:transform .16s cubic-bezier(.2,.7,.2,1),border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
body.splash #download .dlx__glyph{grid-row:1 / span 2;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:11px;background:var(--sunk);border:1px solid var(--border);color:var(--text);transition:color .16s ease,border-color .16s ease,background .16s ease}
body.splash #download .dlx__glyph svg{width:20px;height:20px}
body.splash #download .dlx__id{grid-column:2;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;min-width:0}
body.splash #download .dlx__os{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.15rem;line-height:1.1}
body.splash #download .dlx__arch{font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
body.splash #download .dlx__meta{grid-column:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--text-3);line-height:1.3}
body.splash #download .dlx__pill{
  grid-column:1 / -1;margin-top:.85rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:2.5rem;padding:0 1rem;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);
  font-weight:700;font-size:.875rem;letter-spacing:-.005em;white-space:nowrap;
  transition:filter .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
body.splash #download .dlx__arrow{font-size:1.05em;line-height:1;transform:translateY(-.03em)}
body.splash #download .dlx__btn:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow);background:var(--panel)}
body.splash #download .dlx__btn:hover .dlx__glyph{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft)}
body.splash #download .dlx__btn:hover .dlx__pill{filter:brightness(1.08)}
body.splash #download .dlx__btn:active{transform:translateY(-1px) scale(.995);box-shadow:var(--shadow-sm)}
body.splash #download .dlx__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
body.splash #download .dlx__sum{display:flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:0 .95rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--text-3)}
body.splash #download .dlx__sum a{display:inline-flex;align-items:center;gap:.3rem;min-height:var(--tap);border-bottom:1px solid transparent}
body.splash #download .dlx__sum a:hover{color:var(--accent-text);border-bottom-color:currentColor}
body.splash #download .dlx__foot{display:flex;flex-direction:column;gap:.55rem;margin-top:1.15rem;font-size:.85rem;color:var(--text-2)}
body.splash #download .dlx__verify{overflow-wrap:anywhere}
body.splash #download .kbd{overflow-wrap:anywhere;max-width:100%}
@media (max-width:860px){body.splash #download .dlx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){body.splash #download .dlx{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){
  body.splash #download .dlx__btn,body.splash #download .dlx__pill,body.splash #download .dlx__glyph{transition:none}
  body.splash #download .dlx__btn:hover{transform:none}
}

/* ============================================================
   C · feature grid: room for the ported visuals
   ============================================================ */
body.splash .hcv .ftile__vis{display:block;padding:.85rem;background:var(--raised);min-height:0;overflow:hidden}
body.splash .hcv .viz-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .8rem;margin-bottom:.8rem}
body.splash .hcv .viz-head__t{font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--text)}
/* a legend reads as a caption, not as output */
body.splash .hcv .viz-note{color:var(--text-3);font-family:var(--body);font-size:.75rem;font-weight:500;letter-spacing:.01em}
body.splash .hcv .wide-scroll{width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
body.splash .hcv .wide-scroll:focus-visible{outline-offset:-3px}

/* ---- C1 · cache: the ledger tape --------------------------- */
body.splash .hcv .ledger{display:grid;gap:.95rem}
body.splash .hcv .ledger__tape{display:none;width:100%;height:16rem;border:1px solid var(--border);border-radius:12px;background:var(--ground)}
body.splash .hcv .ledger.is-live .ledger__tape{display:block}
body.splash .hcv .ledger.is-live .ledger__static{display:none}
/* the static block stands in for the tape until the tape is live, at the
   tape's own height, so the swap moves nothing under it (the meter, the
   note): no layout shift when the canvas comes up after first paint */
body.splash .hcv .ledger__static{display:grid;gap:.5rem;align-content:start;min-height:16rem;box-sizing:border-box}
body.splash .hcv .ledger__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;color:var(--text-3);font:var(--kicker);letter-spacing:var(--kicker-track)}
body.splash .hcv .ledger__cbar{display:flex;overflow:hidden;min-height:2.6rem;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
body.splash .hcv .lseg{display:grid;place-items:center;min-width:0;padding:.35rem .5rem;border-right:1px solid var(--border);font:600 .7rem/1.35 var(--mono);text-align:center;overflow-wrap:anywhere}
body.splash .hcv .lseg:last-child{border-right:0}
body.splash .hcv .lseg--hit{background:var(--ok-soft);color:var(--success)}
body.splash .hcv .lseg--new{background:var(--accent-soft);color:var(--accent-text)}
body.splash .hcv .ledger__scrub{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem}
body.splash .hcv .ledger__scrub label{color:var(--text-3);font:var(--kicker);letter-spacing:var(--kicker-track);white-space:nowrap}
/* the turn number is a fixed two-digit box, so "1" and "12" take the same
   room and the range beside the label never moves while the tape plays */
body.splash .hcv .ledger__scrub output{display:inline-block;min-width:2ch;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
body.splash .hcv .ledger__scrub input[type=range]{width:100%;height:var(--tap);margin:0;accent-color:var(--accent);cursor:grab}
body.splash .hcv .ledger__scrub input[type=range]:active{cursor:grabbing}
body.splash .hcv .ledger__meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
body.splash .hcv .ledger__meter div{display:grid;gap:1px;padding:.55rem .7rem;background:var(--panel)}
body.splash .hcv .ledger__meter dt{color:var(--text-3);font:var(--kicker);letter-spacing:var(--kicker-track)}
body.splash .hcv .ledger__meter dd{margin:0;color:var(--text);font:700 1.1rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
body.splash .hcv .ledger__meter dd.is-hit{color:var(--ok-ink)}
body.splash .hcv .ledger__meter dd.is-new{color:var(--accent-text)}
body.splash .hcv .ledger__note{color:var(--text-3);font-size:.78rem;line-height:1.45}
/* a phone keeps the three meter cells and the one-row scrub (both fit at
   290px); only the tape is shorter, so the entry stays under the deck's
   reserved height */
@media (max-width:480px){
  body.splash .hcv .ledger__meter dd{font-size:1rem}
}

/* ---- C2 · sessions: the history tree ----------------------- */
body.splash .hcv .tree-svg{display:block;width:100%;min-width:27rem;max-width:34rem;height:auto;margin-inline:auto}
body.splash .hcv .tree-svg .lane-line{stroke:var(--border-strong);stroke-width:2;fill:none}
body.splash .hcv .tree-svg .forkback{stroke:var(--accent-text);stroke-width:1.6;stroke-dasharray:5 5;fill:none}
body.splash .hcv .tree-svg .tdot{fill:var(--border-strong)}
body.splash .hcv .tree-svg .tdot--head{fill:var(--accent)}
body.splash .hcv .tree-svg .tring{fill:none;stroke:var(--accent);stroke-width:2}
body.splash .hcv .tree-svg .tkill{stroke:var(--warning);stroke-width:2;fill:var(--panel)}
body.splash .hcv .tree-svg .tkillx{stroke:var(--warning);stroke-width:1.8;fill:none}
body.splash .hcv .tree-svg text{font:500 15px var(--mono);fill:var(--text-2)}
body.splash .hcv .tree-svg .t-strong{fill:var(--text);font-weight:700}
body.splash .hcv .tree-svg .t-accent{fill:var(--accent-text)}
body.splash .hcv .tree-svg .t-warn{fill:var(--warning)}
body.splash .hcv .tree-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
body.splash [data-rv]:not(.in) .tree-draw{stroke-dashoffset:1}
body.splash .hcv .tree-fade{transition:opacity .5s ease calc(var(--d,0)*1ms)}
body.splash [data-rv]:not(.in) .tree-fade{opacity:0}
@media (prefers-reduced-motion: reduce){
  body.splash .hcv .tree-draw,body.splash .hcv .tree-fade{transition:none}
  body.splash [data-rv]:not(.in) .tree-draw{stroke-dashoffset:0}
  body.splash [data-rv]:not(.in) .tree-fade{opacity:1}
}

/* ---- C3 · loom: the bounded workflow graph ------------------ */
body.splash .hcv .dagx{display:grid;gap:.2rem}
body.splash .hcv .dagx__scroll{overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--border);border-radius:12px;background:var(--ground)}
body.splash .hcv .dagx__svg{display:block;width:100%;min-width:29rem;height:auto}
body.splash .hcv .dagx text{font:500 13px var(--mono);fill:var(--text-2);pointer-events:none}
body.splash .hcv .dagx .dn__name{fill:var(--text);font-weight:700}
body.splash .hcv .dagx .dn__type{fill:var(--accent-ink);font-weight:500}
body.splash .hcv .dagx .dn__title{fill:var(--text);font-weight:700;letter-spacing:.04em}
body.splash .hcv .dagx .dn__foot{fill:var(--text-3)}
body.splash .hcv .dagx .dn{cursor:pointer}
body.splash .hcv .dagx .dn>rect{fill:var(--panel);stroke:var(--border-strong);stroke-width:1;transition:stroke .3s ease,fill .3s ease}
body.splash .hcv .dagx .dn--run>rect{stroke:var(--accent);stroke-width:1.6}
body.splash .hcv .dagx .dn--done>rect{stroke:color-mix(in srgb,var(--success) 65%,var(--border-strong));stroke-width:1.4}
body.splash .hcv .dagx .dn--fail>rect{stroke:var(--warning);stroke-width:1.6}
body.splash .hcv .dagx .dn--sel>rect{fill:color-mix(in srgb,var(--accent) 9%,var(--panel))}
body.splash .hcv .dagx .dn:focus-visible{outline:none}
body.splash .hcv .dagx .dn:focus-visible>rect{stroke:var(--accent);stroke-width:2.5}
body.splash .hcv .dagx .dn__dot{fill:var(--border-strong);transition:fill .3s ease}
body.splash .hcv .dagx .dn--run .dn__dot{fill:var(--accent)}
body.splash .hcv .dagx .dn--done .dn__dot{fill:var(--success)}
body.splash .hcv .dagx .dn--fail .dn__dot{fill:var(--warning)}
body.splash .hcv .dagx .de{fill:none;stroke:var(--border-strong);stroke-width:1.5;transition:stroke .3s ease,opacity .3s ease}
body.splash .hcv .dagx .de.is-on{stroke:var(--accent);stroke-width:2}
body.splash .hcv .dagx .de.is-done{stroke:color-mix(in srgb,var(--success) 70%,var(--border-strong))}
body.splash .hcv .dagx .de--back{stroke:var(--warning);stroke-dasharray:5 4;opacity:.42}
body.splash .hcv .dagx .de--back.is-on{opacity:1;stroke-width:2}
body.splash .hcv .dagx .de--back.is-done{opacity:.85;stroke:var(--warning)}
body.splash .hcv .dagx .de-label{fill:var(--warning);font-size:13px}
body.splash .hcv .dagx .slot>rect{fill:var(--ground);stroke:var(--border-strong);stroke-width:1.2;transition:stroke .3s ease}
body.splash .hcv .dagx .slot--verified>rect{stroke:var(--success);stroke-width:1.6}
body.splash .hcv .dagx .slot--attested>rect{stroke:var(--text-3);stroke-dasharray:4 3}
body.splash .hcv .dagx .slot--fail>rect{stroke:var(--warning);stroke-width:1.6}
body.splash .hcv .dagx .slot__mark{fill:var(--text-3);font-weight:700}
body.splash .hcv .dagx .slot--verified .slot__mark{fill:var(--ok-ink)}
body.splash .hcv .dagx .slot--fail .slot__mark{fill:var(--warning)}
body.splash .hcv .dagx__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;padding:.55rem .1rem .1rem}
body.splash .hcv .dagx__btn{min-height:var(--tap);padding:.3rem .8rem;border:1px solid var(--border-strong);border-radius:8px;background:var(--raised);color:var(--text);font:600 .78rem var(--mono);transition:border-color .15s ease,color .15s ease}
body.splash .hcv .dagx__btn:hover{border-color:var(--accent)}
body.splash .hcv .dagx__btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text)}
body.splash .hcv .dagx__btn[disabled]{opacity:.45;cursor:default}
/* the status has its own row and two lines' worth of height, so a step's
   sentence never rewraps the buttons beside it or moves the key card */
body.splash .hcv .dagx__status{flex:1 1 100%;min-width:0;min-height:2.3rem;color:var(--text-2);font:500 .78rem/1.45 var(--mono)}
body.splash .hcv .dagx__status b{color:var(--text);font-weight:700}
body.splash .hcv .keycard{display:flex;flex-direction:column;gap:.7rem;padding:.9rem;border:1px solid var(--border-strong);border-radius:12px;background:var(--ground)}
body.splash .hcv .keycard__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem .8rem;color:var(--text-3);font:var(--kicker);letter-spacing:var(--kicker-track)}
body.splash .hcv .keycard__head b{color:var(--text);font-weight:700}
body.splash .hcv .keycard__sig{margin:0;color:var(--text);font:600 .78rem var(--mono);letter-spacing:0;text-transform:none}
body.splash .hcv .keycard__sig em{font-style:normal;color:var(--accent-text)}
body.splash .hcv .keycard__caps{display:flex;flex-wrap:wrap;gap:.35rem}
body.splash .hcv .lcap{padding:.26rem .5rem;border-radius:6px;font:600 .7rem var(--mono)}
body.splash .hcv .lcap--ok{border:1px solid color-mix(in srgb,var(--success) 45%,var(--border));background:var(--ok-soft);color:var(--ok-ink)}
body.splash .hcv .lcap--ok::before{content:"✓ "}
body.splash .hcv .lcap--no{border:1px dashed var(--border-strong);color:var(--text-3)}
body.splash .hcv .lcap--no s{text-decoration-thickness:1px}
body.splash .hcv .keycard__note{margin-top:auto;color:var(--text-3);font-size:.8rem;line-height:1.45}
@media (prefers-reduced-motion: reduce){
  body.splash .hcv .dagx .dn>rect,body.splash .hcv .dagx .de,body.splash .hcv .dagx .dn__dot,body.splash .hcv .dagx .slot>rect{transition:none}
}

/* ---- C4 · automation: the fleet grid ----------------------- */
body.splash .hcv .fleet{display:grid;gap:.7rem;grid-template-rows:1fr auto}
body.splash .hcv .fleet__stage-wrap{
  /* the same warm terminal material as the install console and the Talk replay, in both themes */
  --ground:#0f0c0b;--panel:#1a1512;--raised:#241e1a;--border:#2e2621;--border-strong:#4a3d35;
  --text:#f3ece3;--text-2:#b3a698;--text-3:#8c7f73;
  --accent:#ff7a3d;--accent-text:#ff9160;--on-accent:#1a0f08;
  --warning:#e5a85a;--success:#5fd39a;--shadow-col:rgba(0,0,0,.5);--gold:#e2b755;
  --tui-line:color-mix(in srgb,var(--border) 66%,var(--gold));
  position:relative;display:grid;min-height:12.5rem;padding:clamp(.6rem,2vw,.95rem);
  border:1px solid var(--term-line);border-radius:12px;
  background:linear-gradient(180deg,#1a1512,#0f0c0b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -24px rgba(0,0,0,.6);
  overflow:hidden}
body.splash .hcv .fstage{grid-area:1/1;display:grid;align-content:center;min-width:0;opacity:0;visibility:hidden;pointer-events:none}
body.splash .hcv .fleet[data-stage="1"] .fstage--1,body.splash .hcv .fleet[data-stage="2"] .fstage--2{opacity:1;visibility:visible;pointer-events:auto}
@keyframes hcStageIn{from{opacity:0}to{opacity:1}}
body.splash .hcv.is-live .fleet[data-stage="1"] .fstage--1,body.splash .hcv.is-live .fleet[data-stage="2"] .fstage--2{animation:hcStageIn .3s ease both}
body.splash .hcv [data-st="idle"]{--stg:"\00B7";--stc:var(--text-2)}
body.splash .hcv [data-st="thinking"]{--stg:"\25CF";--stc:var(--gold)}
body.splash .hcv [data-st="streaming"]{--stg:"\25AE";--stc:var(--accent)}
body.splash .hcv [data-st="tool"]{--stg:"\2692";--stc:var(--accent-text)}
body.splash .hcv [data-st="waiting"]{--stg:"\25D4";--stc:var(--warning)}
body.splash .hcv .sdot{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--stc,var(--border-strong));transition:background .28s ease}
@keyframes hcFdot{0%,100%{opacity:.5}50%{opacity:1}}
body.splash .hcv.is-live .fleet[data-stage="1"] .fstage--1 .sdot,body.splash .hcv.is-live .fleet[data-stage="2"] .fstage--2 .sdot{animation:hcFdot 2.2s ease-in-out infinite}
body.splash .hcv .mtile{min-width:0;border:1px solid var(--tui-line);border-radius:6px;background:var(--panel);box-shadow:0 .5rem 1.4rem var(--shadow-col)}
body.splash .hcv .mtile__bar{display:flex;align-items:center;gap:.4rem;min-width:0;padding:.3rem .45rem;border-bottom:1px solid var(--tui-line);background:color-mix(in srgb,var(--raised) 45%,var(--panel));border-radius:6px 6px 0 0}
body.splash .hcv .mtile__state{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .58rem var(--mono);color:var(--stc,var(--accent-text));transition:color .28s ease}
body.splash .hcv .mtile__state::before{content:"["var(--stg,"\00B7")" ";color:var(--stc,var(--text-2))}
body.splash .hcv .mtile__state::after{content:"]";color:color-mix(in srgb,var(--stc,var(--text-2)) 55%,transparent)}
@keyframes hcTokflow{0%{transform:translateX(-120%);opacity:0}16%{opacity:.9}84%{opacity:.9}100%{transform:translateX(320%);opacity:0}}
@keyframes hcCurblink{50%{opacity:.18}}
body.splash .hcv .stream{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.splash .hcv .stream::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 55%,transparent),transparent);transform:translateX(-120%);opacity:0}
body.splash .hcv .tuicur{flex:0 0 auto;color:var(--accent);font-weight:700;opacity:0}
body.splash .hcv .machine{position:relative;min-width:0;border:1px solid var(--border-strong);border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,var(--accent) 3%);box-shadow:0 .6rem 1.6rem var(--shadow-col);overflow:hidden}
body.splash .hcv .machine__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;min-width:0;padding:.4rem .6rem;border-bottom:1px solid var(--tui-line)}
body.splash .hcv .machine__host{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:700 .68rem var(--mono);letter-spacing:.03em}
body.splash .hcv .machine__host::before{content:"\2726 ";color:var(--gold)}
body.splash .hcv .machine__daemon{margin-left:auto;flex:0 0 auto;padding:.1rem .45rem;border:1px solid var(--tui-line);border-radius:999px;color:var(--text-2);font:600 .54rem var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
body.splash .hcv .machine__body{position:relative;padding:.5rem;display:grid;gap:.45rem}
body.splash .hcv .mgrid{display:grid;gap:.45rem;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,4.85rem)}
body.splash .hcv .mtile--cell{position:relative;height:100%;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
body.splash .hcv .mtile--cell .mtile__bar{border-radius:0;padding:.28rem .42rem;gap:.32rem}
body.splash .hcv .mtile__name{flex:0 1 auto;color:var(--gold);font:700 .58rem var(--mono);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.splash .hcv .mtile__body{display:flex;align-items:center;gap:.28rem;min-width:0;padding:.26rem .44rem .18rem;margin:0}
body.splash .hcv .mtile__seg{display:flex;align-items:center;min-width:0;padding:.04rem .3rem .3rem}
body.splash .hcv .mtile--cell .mtile__state{flex:1 1 auto;font-size:.52rem;letter-spacing:-.01em}
body.splash .hcv .mtile__work{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 .62rem var(--mono);color:var(--text-2)}
body.splash .hcv .mtile__work b{color:var(--text);font-weight:700}
body.splash .hcv .mtile__body .tuicur{font-size:.6rem}
body.splash .hcv .fleet[data-stage="1"] [data-st="streaming"] .tuicur,body.splash .hcv .fleet[data-stage="1"] [data-st="thinking"] .tuicur{opacity:.9}
body.splash .hcv.is-live .fleet[data-stage="1"] [data-st="streaming"] .mtile__work.stream::after,body.splash .hcv.is-live .fleet[data-stage="1"] [data-st="thinking"] .mtile__work.stream::after{animation:hcTokflow 1.9s linear infinite}
body.splash .hcv.is-live .fleet[data-stage="1"] [data-st="streaming"] .tuicur{animation:hcCurblink 1.05s steps(1) infinite}
body.splash .hcv .fleet__row{position:relative;display:grid;gap:.5rem;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
body.splash .hcv .machine--sm{box-shadow:0 .4rem 1.1rem var(--shadow-col)}
body.splash .hcv .machine--sm .machine__bar{padding:.3rem .44rem;row-gap:.12rem}
body.splash .hcv .machine--sm .machine__host{font-size:.6rem}
body.splash .hcv .machine--sm .machine__daemon{padding:.05rem .3rem;font-size:.46rem}
body.splash .hcv .machine--sm .machine__body{padding:.34rem;gap:.28rem}
body.splash .hcv .mmini{display:flex;align-items:center;gap:.32rem;min-width:0;min-height:1.4rem;padding:.22rem .38rem;border:1px solid var(--tui-line);border-radius:6px;background:var(--panel)}
body.splash .hcv .mmini .sdot{width:.42rem;height:.42rem}
body.splash .hcv .mmini__state{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .56rem var(--mono);color:var(--stc,var(--text-2));transition:color .28s ease}
body.splash .hcv .mmini__state::before{content:"["var(--stg,"\00B7")" ";color:var(--stc,var(--text-2))}
body.splash .hcv .mmini__state::after{content:"]";color:color-mix(in srgb,var(--stc,var(--text-2)) 55%,transparent)}
body.splash .hcv .mtile--cell:nth-child(2) .sdot,body.splash .hcv .mmini:nth-child(2) .sdot{animation-delay:.45s}
body.splash .hcv .mtile--cell:nth-child(3) .sdot,body.splash .hcv .mmini:nth-child(3) .sdot{animation-delay:.9s}
body.splash .hcv .mtile--cell:nth-child(4) .sdot{animation-delay:1.3s}
body.splash .hcv .mtile--cell:nth-child(5) .sdot{animation-delay:.7s}
body.splash .hcv .mtile--cell:nth-child(6) .sdot{animation-delay:1.05s}
body.splash .hcv .machine--sm:nth-child(2) .mmini .sdot{animation-delay:.55s}
body.splash .hcv .machine--sm:nth-child(3) .mmini .sdot{animation-delay:1s}
body.splash .hcv .fleet__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem .8rem}
body.splash .hcv .fleet__caption{margin:0;color:var(--text-2);font:600 .82rem/1.3 var(--body)}
@media (max-width:600px){
  body.splash .hcv .fleet__row{grid-template-columns:minmax(0,1fr)}
  body.splash .hcv .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,4.85rem)}
}
@media (prefers-reduced-motion: reduce){
  body.splash .hcv .stream::after,body.splash .hcv .tuicur,body.splash .hcv .sdot,body.splash .hcv .fstage{animation:none!important}
  body.splash .hcv .fstage,body.splash .hcv .mtile__state,body.splash .hcv .mmini__state,body.splash .hcv .sdot{transition:none!important}
  body.splash .hcv .stream::after{opacity:0}
  body.splash .hcv .tuicur{opacity:.9}
}

/* ---- C4b · peer messaging over the fleet -------------------
   A pooled overlay of UNITS (dotted blue route + travelling blip +
   a landing ring on the destination). Everything is absolutely
   positioned inside .pfx and never enters flow, so no tile box
   moves and the card height is unchanged. Motion is pure
   transform/opacity on a fast one-shot animation restarted by JS. */
body.splash .hcv .fleet__stage-wrap{--peer:#54bcff;--peer-strong:#a6dcff;--peer-dim:color-mix(in srgb,#54bcff 26%,transparent)}

:root[data-theme="night"] body.splash .hcv .fleet__stage-wrap{--peer:#3db4ff;--peer-strong:#8ad4ff;--peer-dim:color-mix(in srgb,#3db4ff 24%,transparent)}
:root[data-theme="titanium"] body.splash .hcv .fleet__stage-wrap{--peer:#4f7096;--peer-strong:#33506f;--peer-dim:color-mix(in srgb,#4f7096 22%,transparent)}
:root[data-theme="gunmetal"] body.splash .hcv .fleet__stage-wrap{--peer:#7fa7cf;--peer-strong:#c2d8ee;--peer-dim:color-mix(in srgb,#7fa7cf 24%,transparent)}
body.splash .hcv .pfx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4}
body.splash .hcv .punit{position:absolute;inset:0;pointer-events:none}
body.splash .hcv .ppath{position:absolute;top:0;left:0;height:2px;width:0;margin-top:-1px;transform-origin:0 50%;border-radius:2px;background:repeating-linear-gradient(90deg,var(--peer) 0 3px,transparent 3px 8px);opacity:0;box-shadow:0 0 6px -1px var(--peer-dim);pointer-events:none}
body.splash .hcv .pblip{position:absolute;top:0;left:0;width:.5rem;height:.5rem;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,var(--peer-strong) 42%,var(--peer) 70%,transparent 74%);transform:translate(var(--x0,0),var(--y0,0));opacity:0;will-change:transform,opacity}
body.splash .hcv .pblip::after{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--peer) 55%,transparent),transparent 66%);opacity:.6}
body.splash .hcv .peer-land{position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border-radius:50%;border:1.5px solid var(--peer-strong);box-shadow:0 0 10px -2px var(--peer);transform:translate(var(--lx,0),var(--ly,0)) scale(.3);opacity:0;pointer-events:none}
@keyframes proute{0%{opacity:0}22%{opacity:.52}78%{opacity:.4}100%{opacity:0}}
@keyframes pblipT{0%{transform:translate(var(--x0),var(--y0)) scale(.42);opacity:0}16%{opacity:1;transform:translate(var(--x0),var(--y0)) scale(1)}80%{opacity:1}100%{transform:translate(var(--x1),var(--y1)) scale(.7);opacity:0}}
@keyframes plandT{0%,58%{opacity:0;transform:translate(var(--lx),var(--ly)) scale(.3)}74%{opacity:.85;transform:translate(var(--lx),var(--ly)) scale(1)}100%{opacity:0;transform:translate(var(--lx),var(--ly)) scale(2.1)}}
body.splash .hcv .punit.is-fly .ppath{animation:proute var(--pd,.9s) ease both}
body.splash .hcv .punit.is-fly .pblip{animation:pblipT var(--pd,.9s) cubic-bezier(.45,.02,.4,.98) both}
body.splash .hcv .punit.is-fly .peer-land{animation:plandT var(--pd,.9s) ease-out both}
body.splash .hcv .punit.is-static .ppath{opacity:.4;animation:none}
body.splash .hcv .punit.is-static .peer-land{opacity:.5;transform:translate(var(--lx),var(--ly)) scale(1);animation:none}
@media (prefers-reduced-motion: reduce){
  body.splash .hcv .pblip,body.splash .hcv .ppath,body.splash .hcv .peer-land,body.splash .hcv .punit{animation:none!important}
  body.splash .hcv .pblip{opacity:0}
  body.splash .hcv .punit.is-static .ppath{opacity:.4}
  body.splash .hcv .punit.is-static .peer-land{opacity:.5}
}

/* ---- C5 · talk: the dictation replay ----------------------- */
body.splash .hcv .dic{display:grid;gap:.65rem}
body.splash .hcv .dic__term{display:grid;gap:.5rem;padding:.75rem .85rem;border:1px solid var(--term-line);border-radius:12px;background:var(--term-bg);color:var(--term-ink);font-family:var(--mono)}
body.splash .hcv .dic__composer{display:flex;align-items:baseline;gap:.5rem;min-height:2.9rem;padding:.6rem .75rem;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--term-line));border-radius:8px;background:var(--term-raised);color:var(--term-ink);font-size:.84rem;line-height:1.5;overflow-wrap:anywhere}
body.splash .hcv .dic__prompt{color:var(--term-accent);font-weight:700;white-space:nowrap}
body.splash .hcv .dic__text{position:relative;min-width:0;min-height:1.5em}
/* an empty text box still owns a line box, so the prompt beside it keeps
   its baseline when the replay clears the phrase (a 5px settle otherwise).
   BEFORE the text: a box after it would move with every typed character. */
body.splash .hcv .dic__text::before{content:"\200B"}
body.splash .hcv .dic__partial{color:var(--term-dim);font-style:italic}
/* the caret is not laid out after the text (a box there would move with
   every typed character, and the layout-shift observer counts each move):
   it is absolute at the text's origin and /splash.js carries it to the end
   of the typed text on a transform */
body.splash .hcv .dic__caret{position:absolute;left:0;top:0;width:.5em;height:1.05em;margin-left:.08em;background:var(--term-accent);animation:hcCaret 1s steps(1) infinite}
@keyframes hcCaret{50%{opacity:0}}
/* two lines reserved: the cue's sentences differ in length as the replay
   runs, and the bar under it must not move */
body.splash .hcv .dic__cue{min-height:2.3rem;color:var(--term-dim);font:500 .78rem/1.45 var(--body)}
body.splash .hcv .dic__cue b{color:var(--accent)}
body.splash .hcv .dic__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
body.splash .hcv .dic__mic{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.3rem .85rem;border:1px solid var(--border-strong);border-radius:999px;background:var(--panel);color:var(--text);font:600 .76rem var(--mono);transition:border-color .2s ease}
body.splash .hcv .dic__mic::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--border-strong);transition:background .2s ease,box-shadow .2s ease}
body.splash .hcv .dic__mic[aria-pressed="true"]{border-color:var(--accent)}
body.splash .hcv .dic__mic[aria-pressed="true"]::before{background:var(--accent);box-shadow:0 0 .55rem var(--accent)}
body.splash .hcv .dic__mic:hover{border-color:var(--accent)}
body.splash .hcv .dic__wave{flex:1 1 8rem;min-width:6rem;height:2.4rem;display:block;border-radius:6px}
body.splash .hcv .dic__engine{color:var(--text-3);font:500 .68rem var(--mono);letter-spacing:.04em}
@media (prefers-reduced-motion: reduce){body.splash .hcv .dic__caret{animation:none}}

/* ============================================================
   E · AGENTIC CATALOG. The rows live on the Catalog chapter and
   are styled in pass3-track.css (section 4 below). Their drift is
   splash.js's now: it moves each row's scrollLeft, so the same row
   scrolls by hand, and wraps by one set's width (each row holds its
   cards twice) onto the same picture, so nothing jumps. The old
   tcat-drift keyframes are gone.
   ============================================================ */

/* ============================================================
   E · CHOOSE YOUR PATH — show the whole CYOA render.
   The base frames it in a fixed box and object-fit:cover crops
   the rival emblems off the sides; here the art is sized to the
   image (native 16:9, height auto) instead of the other way
   round. The theme swap still rides on --cyoa-*-display, so
   nothing below touches `display`.
   ============================================================ */
body.splash #path .path{align-items:start}
body.splash #path .path__art{position:static;min-height:0;border:0;background:none;overflow:visible;border-radius:0}
body.splash #path .path__art img{position:static;inset:auto;width:100%;height:auto;object-fit:fill;aspect-ratio:1200 / 675;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-sm)}

/* ================================================================
   PORTED COMP CSS — pass3-split.css (chapters · console · cards · benchmark · path)
   ================================================================ */
/* ============================================================
   The three chapters. Nothing here pins, sticks or locks the
   scroll: a reader may leave a chapter at any moment.

   Each chapter opens with ONE centred head (name, blurb, CTA).
   Chapter 01 then runs a DECK: the WebGL stack on the left, one
   entry at a time on the right, chosen by a real tablist, by the
   nameplates engraved into the slabs, or by the ~7 s auto-roll.
   Chapters 02 and 03 run a column of plain sections, one title,
   one one-line subtitle and one visual each.

   The rAF reader in /splash.js still lights the section nearest
   45% of the viewport, which is all a demo needs to replay; it
   moves nothing and holds nothing.

   Colour: every value is a token the token block defines in both
   theme states, or a color-mix of them, so both themes come free.
   ============================================================ */

/* ---------- 1 · the chapter --------------------------------------
   The one place the three products are told apart: each chapter is
   ONE full-bleed band on its own tone of the theme's ground family,
   tonal and never a hue: Harness on the page ground, Go on the panel
   tone (a step lighter), the Catalog on the sunk tone (a step
   darker); day and night use the same roles in their warm family.
   Inside a band every entry shares one frame (.fcard), one heading
   scale, one kicker naming the
   chapter, and one rhythm (3.5rem between sections, 9rem between
   chapters). No rule between chapters: the tone change and the air
   do that work. */
body.splash .chapter{position:relative;background:var(--ground);padding:5rem 0 4rem}
body.splash .chapter--go{background:var(--panel)}
body.splash .chapter--catalog{background:var(--sunk)}
body.splash .chapter__inner{width:min(1180px,calc(100% - 2.5rem));margin-inline:auto;min-width:0}

/* ---------- 2 · the chapter head, centred and on top -------------
   Name, one blurb, one CTA. It is the only head the chapter has and
   it scrolls away like anything else: nothing here pins. */
body.splash .chead{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.65rem;text-align:center;width:100%;min-width:0}
/* the chapter's kicker: its index and name in the signal ink, over the
   title here and before every entry title inside the band (.fcard__kick),
   so a reader landing mid-chapter knows where they are. The darker ink,
   because the Catalog band is the sunk tone, where day's --accent-text
   lands at 4.27:1. */
body.splash .chead__k,body.splash .fcard__kick{font:600 .72rem/1.35 var(--body);letter-spacing:.04em;color:var(--accent-ink)}
body.splash .chead__k{margin:0 0 .1rem}
body.splash .fcard__kick{margin-right:.35rem}
/* the deal, in one line under the lead: what this chapter is */
body.splash .chead__deal{margin:0;max-width:44ch;font:600 .875rem/1.4 var(--body);color:var(--text)}
body.splash .chead__deal::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.5rem;border-radius:2px;background:var(--accent);vertical-align:.05em}
body.splash .chead__h2{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,1.2rem + 2.1vw,2.8rem);letter-spacing:-.014em;line-height:1.08;
  max-width:28ch;color:var(--text);
}
body.splash .chead__lead{margin:0;max-width:52ch;color:var(--text-2);font-size:1.0625rem;line-height:1.55}
/* the head's CTA. Go's keeps the older home__cta name, which the app's
   homepage contract pins byte for byte, so the head styles both. */
body.splash .chead__cta,body.splash .chead .home__cta{margin-top:.55rem;min-height:max(2.6rem,var(--tap));padding:.55rem 1.15rem}
/* chapter 01's CTA is relabelled for the visitor's OS by /splash.js; the
   box is sized for its longest label so the centred button never moves */
body.splash #ch1-download{min-width:13.75rem}

/* ---------- 2a · the deck (every chapter) ------------------------
   Under the head, two columns: the chapter's object on the LEFT (the
   WebGL stack; the Go board and the catalog shelf, 2c below), and on
   the RIGHT exactly ONE entry: kicker, chips, title, one line, one
   visual. The five entries that are not showing stay in the DOM
   as `hidden inert`, so the chapter still reads whole in source. A
   real tablist names them; the bar under it runs the auto-roll.

   NOTHING HERE MOVES WHEN THE ROLL TURNS. The columns are top-aligned
   and the slot keeps the tallest entry's height (measured once by
   /splash.js), so a shorter entry leaves ground under itself rather
   than pulling the stack, the tabs or the next chapter up. Under 640px
   there is no roll and no reserve: the panel is as tall as its entry
   and changes only on the reader's own tap. */
body.splash .deck{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:2.5rem;align-items:start;min-width:0;margin-top:3.5rem;
}
/* the GL host bleeds past the stack's box by these (splash-hero.css), so
   the model is fitted to a bigger canvas and spills over the column gap
   and the page gutter instead of shrinking; the layout box is unchanged.
   Sideways the bleed is never more than the room beside the column less
   8px of clearance: the 2.5rem deck gap gives 2rem, or the page gutter
   when the 1180px shell has less than that outside it (1.25rem from 1024
   to 1220), 1rem on one column. */
body.splash .deck__stage{position:relative;min-width:0;--stack-bleed-x:clamp(1.25rem,(100vw - 1180px) / 2,2rem);--stack-bleed-y:2rem}
/* no frame and no blueprint grid: the GL ground shadow and the
   daemon's ember are the only edges the stack gets. */
body.splash .stackstage{position:relative;min-width:0}
body.splash .deck__panel{display:grid;gap:.85rem;align-content:start;min-width:0}
/* six tabs with their glyphs fit the 564px strip at 1440 in one row */
body.splash .deck__tabs{display:flex;flex-wrap:wrap;gap:.2rem}
body.splash .deck__tab{
  display:inline-flex;align-items:center;gap:.35rem;
  min-height:2.25rem;padding:.35rem .5rem;
  border:1px solid transparent;border-radius:999px;background:transparent;
  color:var(--text-3);font-family:var(--body);font-size:.76rem;font-weight:600;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
/* an 11 x 6px slab before each label, in the tint of the layer the entry
   opens (the daemon's lid, the /talk board; bare metal for the daemon's
   four feature entries), so the strip visibly mirrors the stack; the
   tints are the stack's own tokens (splash-hero.css, on .deck) */
body.splash .deck__glyph{flex:none;width:.7rem;height:.35rem;border-radius:2px;background:var(--stack-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(0,0,0,.25);transform:skewX(-18deg)}
body.splash .deck__tab[data-tint="daemon"] .deck__glyph{background:var(--stack-gold)}
body.splash .deck__tab[data-tint="talk"] .deck__glyph{background:var(--stack-voice)}
/* the Go and Catalog strips carry the small icon their object part wears */
body.splash .deck__glyph--icon{width:.85rem;height:.85rem;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--text-3);transition:color .2s ease}
body.splash .deck__glyph--icon svg{display:block;width:100%;height:100%}
body.splash .deck__tab:hover .deck__glyph--icon,body.splash .deck__tab.is-hot .deck__glyph--icon,body.splash .deck__tab[aria-selected="true"] .deck__glyph--icon{color:var(--accent-ink)}
/* hover, focus, or the pointer on its plate (.is-hot) */
body.splash .deck__tab:hover,body.splash .deck__tab.is-hot{color:var(--text);background:var(--sunk)}
body.splash .deck__tab[aria-selected="true"]{
  color:var(--accent-ink);border-color:var(--accent-line);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
/* the auto-roll readout: a 2px bar, never a control. It fills by a
   transform, which paints without a layout. */
body.splash .deck__prog{height:2px;border-radius:2px;background:color-mix(in srgb,var(--border-strong) 55%,transparent);overflow:hidden}
body.splash .deck__bar{display:block;width:100%;height:100%;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:opacity .3s ease}
body.splash .deck__prog[data-off="1"] .deck__bar{opacity:.35}
/* once the reader has chosen by hand the roll is over for the visit and
   the readout goes (visibility, so the strip below it does not move) */
body.splash .deck__prog[data-done="1"]{visibility:hidden}
/* the slot's min-height is the tallest entry, written by /splash.js */
body.splash .deck__slot{position:relative;display:grid;align-items:start;min-width:0}
/* [hidden] is a UA rule; .fcard's display:flex outranks it, so the five
   entries that are not showing need this one to actually fold away. */
body.splash .fcard[hidden]{display:none}

/* ---------- 2b · inside the frame -------------------------------
   Chapters 02 and 03 are decks too (their entries are the old
   sections). What arrives with a frame of its own (the router strip,
   the wallet panel, the artifact card) drops it inside the entry card;
   tiles inside (plan tiles, catalog cards, the boundary's two sides)
   sit on the sunk tone, the way the daemon's surface tiles do. */
body.splash .fcard__demo .vis{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
body.splash .fcard__demo .router{min-height:9rem;justify-content:center;padding:0 0 2rem}
body.splash .fcard__demo .vis__cap{left:0;bottom:0}
body.splash .fcard__demo .demopanel{padding:0;border:0;border-radius:0;background:transparent}
body.splash .fcard__demo .tcard--solo{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
/* the plan tiles are the plans entry's single visual */
body.splash .plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
body.splash .plans__note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem 1rem;margin:.9rem 0 0;font:500 .8rem/1.4 var(--body);color:var(--text-3)}
body.splash .plans__member{display:inline-flex;align-items:center;gap:.4rem}
body.splash .tier__buy{margin:.35rem 0 0}
body.splash .tier__buy .btn{width:100%;min-height:var(--tap);padding:.45rem .9rem;font:600 .8125rem/1 var(--body);cursor:pointer}
body.splash .tiers--path .tier__buy .btn{font-size:.78rem}

/* ---------- 2c · the two objects, shared -------------------------
   Chapters 02 and 03 each stand on one hand-drawn isometric object in
   the stack's machined metal: the Go gateway (a rack appliance) and the
   agentic catalog (a parts cabinet). Both are built the same way, both
   are 600 x 480, and both put one real <button> over every part
   (.part), placed in percent of the viewBox so it rides the object at
   any size. Shared here: the box, the engraved type and its steps, and
   the presses; each object states its own faces below. The open entry's
   part is lit and breathes; a part under the pointer, or asked for by
   its tab (.is-hot), holds still and brightens. */
body.splash .object{position:relative;width:100%;aspect-ratio:600 / 480;min-width:0}
body.splash .object__art{position:absolute;inset:0;display:block;width:100%;height:100%;font-family:var(--mono)}
body.splash .ob__label{fill:var(--text-2);font:600 11px var(--mono);letter-spacing:.08em;transition:fill .3s ease}
body.splash .ob__small{fill:var(--text-2);font:500 11px var(--body)}
body.splash .ob__tagtext{fill:var(--text-2);font:700 11.5px var(--mono);letter-spacing:.1em}
/* the engraved name of the open part, and of one under the pointer */
body.splash .ob__part.is-lit .ob__label,body.splash .ob__part.is-hot .ob__label{fill:var(--accent-ink)}
@keyframes obBreathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.4}}
/* the phone: an object is 328 to 608px wide (viewBox 600), so the type
   steps up in viewBox units to stay readable (the smallest label renders
   at 10.4px on a 360px phone, 11.3px at 390) and the tertiary lines go;
   the region names, the prices, the port names and COMING stay. */
body.splash .ob__phone{display:none}
/* the deck squeezes both objects to about 477px between 1024 and 1160,
   where an 11px label would render at 8.7px: one step up, and the
   tertiary lines already go, so nothing overflows its region */
@media (max-width: 1160px){
  body.splash .ob__label{font-size:14px}
  body.splash .ob__small{font-size:14px}
  body.splash .ob__tagtext{font-size:14px}
  body.splash .ob__t3{display:none}
  body.splash .ob__phone{display:inline}
}
@media (max-width: 640px){
  body.splash .ob__label{font-size:19px}
  body.splash .ob__small{font-size:19px}
  body.splash .ob__tagtext{font-size:19px}
  body.splash .ob__t3{display:none}
  body.splash .ob__phone{display:inline}
}
/* one real button over every part: transparent, the page's ring */
body.splash .part{position:absolute;left:calc(var(--x) / 600 * 100%);top:calc(var(--y) / 480 * 100%);width:calc(var(--w) / 600 * 100%);height:calc(var(--h) / 480 * 100%);margin:0;padding:0;border:0;border-radius:14px;background:transparent;color:transparent;font:inherit;cursor:pointer}
body.splash .part:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* ---------- 2c-2 · the Go gateway, a brass manifold ----------------
   The Go object: the gateway as a brass hydraulic manifold on a slate
   wall plate, drawn by hand in the cabinet's 2:1 isometric (index.html
   carries the geometry, generated by scratchpad polish/mfgen_b.py). One
   plane, S(u,v,n) = (44+u+2n, 262-u/2+v+n), puts an in-plane point
   standing n units proud of the wall on screen.

   A third world, not the stack's circuit board and not the cabinet's
   machined steel: brass and copper plumbing, black enamel tags with
   white engraved words, and dark slate. ONE key light, up and to the
   left, the light the other two objects stand in: a horizontal pipe is
   lit along its top and dark under, a vertical one lit on its left; a
   block standing proud of the wall shows a lit top strip and a flank in
   shadow; the tanks are lit on the side that faces the light and turn
   to patina at their edges; bezels and hubs are domes; every engraved
   word is a two-rim cut. Pipes are rects in the wall plane (a stroked
   flat path has no box for its gradient), corners are cast elbows and
   joints flanged collars. Valve wheels lie in the wall plane, so the
   shear makes them ellipses; dials face the reader, so they are true
   circles, and so does every plate a word is engraved on. In day and
   night the brass is warm; in titanium and gunmetal it is kept but
   cooled and desaturated, so the page's no-hue rule reads as one warm
   object on a cool page. The one chroma is the signal: the open
   branch, the shut one, the arc of allowance still standing.

   State. The part of the open entry (.is-lit) and the part under the
   pointer or asked for by its tab (.is-hot) take the accent on their
   rims and light their engraved name; the open one breathes on its
   stroke, and a hot part turns its wheels, nudges its needle or lifts
   its plates. When Router opens, the flow rides the whole line: down
   off your machine, through the clamp, past the tanks, along the header
   behind its sight glass, out of the far end and down into the meter;
   the first branch shows shut as it passes, the second open, and the
   meter counts one when it arrives. Reduced motion: no breathing, no
   travel, the end state at once. --------------------------------- */
body.splash .object--go{
  overflow:hidden;
  --go-brass:#c9a24a; --go-brass-lit:#e6cd8c; --go-patina:#7d5f22; --go-bore:#41300e;
  --go-copper:#b3703c; --go-enamel:#211d19; --go-enamel-ink:#f3efe7;
  --go-slate:#4a4f52; --go-slate2:#5d6367; --go-ink:#2c220c; --go-ink2:#f0ece2;
  --go-dial:#e8e3d6; --go-dial-ink:#241f16; --go-lit:#5e1c03;
}
:root[data-theme="titanium"] body.splash .object--go{--go-brass:#a99a72; --go-brass-lit:#cfc3a2; --go-patina:#6d6247; --go-bore:#3a352a; --go-copper:#9a7f63; --go-enamel:#1a1c1f; --go-enamel-ink:#f4f6f8; --go-slate:#4c5057; --go-slate2:#5e636b; --go-ink:#2a2618; --go-ink2:#f2f4f6; --go-dial:#e4e7ea; --go-dial-ink:#1d2126; --go-lit:#16293e}
:root[data-theme="gunmetal"] body.splash .object--go{--go-brass:#978b66; --go-brass-lit:#b9ac86; --go-patina:#574e37; --go-bore:#2a271d; --go-copper:#7d6850; --go-enamel:#0e1013; --go-enamel-ink:#eef1f4; --go-slate:#1b1e22; --go-slate2:#24282d; --go-ink:#191608; --go-ink2:#e6e9ec; --go-dial:#d8dde2; --go-dial-ink:#14171b; --go-lit:#0f1e2e}
:root[data-theme="night"] body.splash .object--go{--go-brass:#b8913f; --go-brass-lit:#dcbd74; --go-patina:#6a4f1b; --go-bore:#2c2009; --go-copper:#a4653a; --go-enamel:#15110e; --go-enamel-ink:#f6f1e8; --go-slate:#211c18; --go-slate2:#2b2521; --go-ink:#241a06; --go-ink2:#e9e2d6; --go-dial:#e4ddd0; --go-dial-ink:#1f1a11; --go-lit:#4a1805}
/* the slate's far tone and the slab's flank (stage B) */
body.splash .object--go{--go-slate3:#3f4346; --go-flank:#2f3234}
:root[data-theme="titanium"] body.splash .object--go{--go-slate3:#41454b; --go-flank:#31353b}
:root[data-theme="gunmetal"] body.splash .object--go{--go-slate3:#15181b; --go-flank:#0c0e10}
:root[data-theme="night"] body.splash .object--go{--go-slate3:#1a1512; --go-flank:#0f0c0a}

/* the engraved inks: dark cuts in brass, light cuts in slate, white on enamel */
body.splash .object__art--mf{font-family:var(--mono)}
body.splash .object__art--mf text{filter:url(#mf-cut)}
body.splash .object--go .ob__label,body.splash .object--go .ob__small{fill:var(--go-ink)}
/* the words cut into the slate itself take the slate's ink (stated with the
   object in the selector, to outrank the brass ink above) */
body.splash .object--go .mf__title,body.splash .mf__legend{fill:var(--go-ink2)}
body.splash .object--go .mf__title{letter-spacing:.22em}
body.splash .mf__cred{fill:var(--go-ink)}
body.splash .mf__ename,body.splash .mf__mname{fill:var(--go-enamel-ink)}
body.splash .mf__gname,body.splash .mf__big{fill:var(--go-dial-ink)}
body.splash .mf__ename{font:700 11px var(--mono);letter-spacing:.06em}
body.splash .mf__legend{font:500 11px var(--mono)}
body.splash .mf__mname{font:700 11px var(--mono);letter-spacing:.01em}
body.splash .mf__cred{font:500 11px var(--body)}
body.splash .mf__big{font:700 17px var(--mono)}
body.splash .mf__mark{letter-spacing:.14em}
@media (max-width: 1160px){
  body.splash .mf__ename{font-size:14px}
  body.splash .mf__legend,body.splash .mf__mname,body.splash .mf__cred{font-size:14px}
  body.splash .mf__big{font-size:21px}
}
@media (max-width: 640px){
  body.splash .mf__ename{font-size:19px}
  body.splash .mf__legend,body.splash .mf__mname,body.splash .mf__cred{font-size:19px}
  body.splash .mf__big{font-size:26px}
}
/* the gradient stops the object's tokens feed */
body.splash .mf__s-lit{stop-color:var(--go-brass-lit)}
body.splash .mf__s-brass{stop-color:var(--go-brass)}
body.splash .mf__s-patina{stop-color:var(--go-patina)}
body.splash .mf__s-bore{stop-color:var(--go-bore)}
body.splash .mf__s-slate{stop-color:var(--go-slate)}
body.splash .mf__s-slate2{stop-color:var(--go-slate2)}
body.splash .mf__s-slate3{stop-color:var(--go-slate3)}

/* the wall: a slab of slate, a lit top face, a dark flank, brass bolts */
body.splash .mf__cast{fill:var(--shadow-col)}
body.splash .mf__slate{fill:url(#mf-slate)}
body.splash .mf__platetop{fill:var(--go-slate2)}
body.splash .mf__plateside{fill:var(--go-flank)}
body.splash .mf__slatespec{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1}
body.splash .mf__topedge{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
body.splash .mf__slateedge{fill:none;stroke:rgba(0,0,0,.45);stroke-width:1}
body.splash .mf__bolt{fill:url(#mf-dome);stroke:rgba(0,0,0,.4);stroke-width:.8}
body.splash .mf__boltslot{fill:none;stroke:var(--go-bore);stroke-width:1.4;stroke-linecap:round}
/* the boundary: a groove cut into the slate, its upper rim catching the light */
body.splash .mf__groove{fill:none;stroke:var(--go-flank);stroke-width:5}
body.splash .mf__groovelip{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2}

/* plumbing: a cast shadow under every piece, brass lit toward the light, a
   specular line along the lit edge, a dark line along the far one */
body.splash .mf__pipecast{fill:rgba(0,0,0,.36);transform:translate(2px,3px)}
body.splash .mf__pipeh,body.splash .mf__elbow,body.splash .mf__collarh,body.splash .mf__nut{fill:url(#mf-brass)}
body.splash .mf__pipev,body.splash .mf__collarv,body.splash .mf__stem,body.splash .mf__saddle{fill:url(#mf-brassx)}
body.splash .mf__elbow,body.splash .mf__collarv,body.splash .mf__collarh,body.splash .mf__nut{stroke:var(--go-bore);stroke-width:1}
body.splash .mf__pipespec,body.splash .mf__elbowspec{fill:rgba(255,255,255,.5)}
body.splash .mf__pipeunder{fill:rgba(0,0,0,.3)}
body.splash .mf__boltsm,body.splash .mf__screw{fill:var(--go-brass-lit);stroke:rgba(0,0,0,.45);stroke-width:.7}
body.splash .mf__screwslot{fill:none;stroke:var(--go-bore);stroke-width:1;stroke-linecap:round}
body.splash .mf__slugbody{fill:var(--go-brass-lit)}
body.splash .mf__slugcore{fill:#fff;opacity:.95}

/* brass a word is cut into keeps the lit and the mid brass, never the patina,
   so the engraving clears 4.5:1 on the darkest tone it can actually sit on;
   a plate has a bevel and four screws, a block a lit top strip and a flank */
body.splash .mf__clamp,body.splash .mf__blockface,body.splash .mf__rate,body.splash .mf__credplate{fill:url(#mf-brassface);stroke:var(--go-bore);stroke-width:1;transition:stroke .3s ease}
body.splash .mf__plateshadow{fill:rgba(0,0,0,.3)}
body.splash .mf__bevelhi{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
body.splash .mf__bevello{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1}
body.splash .mf__brasstop{fill:var(--go-brass-lit)}
body.splash .mf__brassside{fill:var(--go-patina)}
body.splash .mf__seat{fill:none;stroke:rgba(0,0,0,.34);stroke-width:1.6}
body.splash .mf__brasslip,body.splash .mf__taglip,body.splash .mf__enamellip{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1}
body.splash .mf__plate{transition:transform .3s cubic-bezier(.22,1,.36,1)}
/* the sight glass: the header shows through, shaded at the top rim, a
   reflection along the bottom of the glass */
body.splash .mf__slotshade{fill:rgba(0,0,0,.42)}
body.splash .mf__slotglass{fill:rgba(255,255,255,.2)}
body.splash .mf__slotframe{fill:none;stroke:var(--go-bore);stroke-width:1}

/* the tanks: a cast shadow on the slate, a patina bottom rim, a body lit on
   the side facing the light, two straps, a domed cap with a welded rim */
body.splash .mf__tankcast,body.splash .mf__dialcast{fill:rgba(0,0,0,.38)}
body.splash .mf__capbot{fill:var(--go-patina);stroke:var(--go-bore);stroke-width:.8}
body.splash .mf__tankbody{stroke:var(--go-bore);stroke-width:.8}
body.splash .mf__strap{fill:none;stroke:var(--go-patina);stroke-width:3.4;opacity:.85}
body.splash .mf__captop{fill:url(#mf-captop);stroke:var(--go-bore);stroke-width:.9}
body.splash .mf__capin{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1}
body.splash .mf__vent{fill:var(--go-patina);stroke:var(--go-bore);stroke-width:.7}

/* the valve wheels lie in the wall plane, so the shear makes them ellipses:
   a shadow under the rim and the spokes, a thick rim with an inner shade
   line and a specular arc, a domed hub */
body.splash .mf__wheelcast{fill:none;stroke:rgba(0,0,0,.35);stroke-width:5.5}
body.splash .mf__spokecast{fill:none;stroke:rgba(0,0,0,.3);stroke-width:2.6}
body.splash .mf__spoke{fill:none;stroke:var(--go-brass);stroke-width:2.4}
body.splash .mf__spokespec{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.9}
body.splash .mf__wheelrim{fill:none;stroke:url(#mf-brass);stroke-width:5}
body.splash .mf__riminner{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1}
body.splash .mf__rimspec{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2;stroke-linecap:round}
body.splash .mf__hub{fill:url(#mf-dome);stroke:var(--go-bore);stroke-width:.8}
body.splash .mf__hubspec{fill:rgba(255,255,255,.6)}
body.splash .mf__wheelspin{transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
/* the branch indicators: enamel in a brass ring, dark until the route is tried */
body.splash .mf__indring{fill:url(#mf-brass);stroke:var(--go-bore);stroke-width:.8}
body.splash .mf__indbase{fill:var(--go-bore)}
body.splash .mf__indcol{fill:none;opacity:0;transition:opacity .3s ease}
body.splash .mf__indspec{fill:rgba(255,255,255,.5)}
body.splash .mf__ind--shut .mf__indcol{fill:var(--warning)}
body.splash .mf__ind--open .mf__indcol{fill:var(--ok)}

/* black enamel tags with white engraved words, chipped at two corners,
   hung on a brass ring from a wire */
body.splash .mf__ring{fill:none;stroke:var(--go-brass);stroke-width:1.4}
body.splash .mf__wire{fill:none;stroke:var(--go-bore);stroke-width:1.4}
body.splash .mf__tag,body.splash .mf__enamel{fill:var(--go-enamel);stroke:var(--go-bore);stroke-width:1;transition:stroke .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
body.splash .mf__tagshadow,body.splash .mf__enamelshadow{fill:rgba(0,0,0,.32)}
body.splash .mf__chip{fill:rgba(255,255,255,.45)}

/* the dials: a domed brass bezel with a specular arc, a shadowed lip, a
   porcelain face with a soft vignette, a needle that casts, one soft
   reflection on the glass and a faint rim of it, never a glow */
body.splash .mf__bezel{fill:url(#mf-dome);stroke:var(--go-bore);stroke-width:1;transition:stroke .3s ease}
body.splash .mf__bezelspec{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.3;stroke-linecap:round}
body.splash .mf__lip{fill:none;stroke:rgba(0,0,0,.4);stroke-width:2.2}
body.splash .mf__face{fill:var(--go-dial)}
body.splash .mf__vignette{fill:none;stroke:rgba(0,0,0,.14);stroke-width:4.4}
body.splash .mf__tick{fill:none;stroke:var(--go-dial-ink);stroke-width:1.4;stroke-linecap:round}
body.splash .mf__arcbed{fill:none;stroke:var(--go-dial-ink);stroke-width:3;opacity:.16}
body.splash .mf__arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
body.splash .mf__needlecast{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2.4;stroke-linecap:round;transform:translate(1.2px,1.8px)}
body.splash .mf__needle{fill:none;stroke:var(--go-dial-ink);stroke-width:2.4;stroke-linecap:round}
body.splash .mf__spacer{fill:none;stroke:none}
body.splash .mf__pivot{fill:var(--go-dial-ink)}
body.splash .mf__glass{fill:rgba(255,255,255,.14);pointer-events:none}
body.splash .mf__glassrim{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;pointer-events:none}
body.splash .mf__gptr{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
body.splash .mf__ptr{transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.2,.9,.3,1)}

/* the plan you are on keeps the accent on its plate, always */
body.splash .mf__rate--on{stroke:var(--accent);stroke-width:1.5}

/* ---- state ---- */
/* the lit engraving: every face a word is cut into here is BRIGHT (brass, or
   the dials' porcelain), so the lit ink is the accent family taken dark, not
   light the way the cabinet's is. It clears 4.5:1 on brass and on the dial. */
body.splash .object--go .mf__part.is-lit .ob__label,body.splash .object--go .mf__part.is-hot .ob__label{fill:var(--go-lit)}
body.splash .mf__part.is-lit .mf__blockface,body.splash .mf__part.is-hot .mf__blockface,
body.splash .mf__part.is-lit .mf__rate,body.splash .mf__part.is-hot .mf__rate,
body.splash .mf__part.is-lit .mf__clamp,body.splash .mf__part.is-hot .mf__clamp,
body.splash .mf__part.is-lit .mf__enamel,body.splash .mf__part.is-hot .mf__enamel,
body.splash .mf__part.is-lit .mf__tag,body.splash .mf__part.is-hot .mf__tag,
body.splash .mf__part.is-lit .mf__bezel,body.splash .mf__part.is-hot .mf__bezel{stroke:var(--accent);stroke-width:1.5}
body.splash .mf__part.is-lit:not(.is-hot) .mf__blockface,body.splash .mf__part.is-lit:not(.is-hot) .mf__rate,
body.splash .mf__part.is-lit:not(.is-hot) .mf__clamp,body.splash .mf__part.is-lit:not(.is-hot) .mf__enamel,
body.splash .mf__part.is-lit:not(.is-hot) .mf__bezel{animation:obBreathe 4s ease-in-out infinite}
/* a hot part answers with its own moving piece */
body.splash .mf__part--router.is-hot .mf__wheelspin{transform:rotate(-16deg)}
body.splash .mf__part--wallet.is-hot .mf__gptr{transform:rotate(-7deg)}
body.splash .mf__part--plans.is-hot .mf__plate,body.splash .mf__part--local.is-hot .mf__enamel{transform:translate(1.5px,.8px)}

/* ---- the route, played once each time Router opens ----
   the slug rides the whole line (its keyframes carry the plane position
   the element starts at), the first branch reads shut as it passes,
   the second open, and the meter counts one when it arrives.
   Transform and opacity only. */
body.splash .mf__slug{opacity:0}
body.splash .chapter--go[data-lit="router"] .mf__slug{animation:mfFlow 3.2s linear .15s 1 both}
@keyframes mfFlow{
  0%{opacity:0;transform:translate(52px,76px)}
  3%{opacity:.95}
  9.7%{transform:translate(52px,124px)}
  92%{transform:translate(442px,124px)}
  96.5%{opacity:.95}
  100%{opacity:0;transform:translate(442px,162px)}
}
body.splash .mf__part--router.is-lit .mf__ind--shut .mf__indcol{opacity:1;transition-delay:1.8s}
body.splash .mf__part--router.is-lit .mf__ind--open .mf__indcol{opacity:1;transition-delay:2.05s}
body.splash .mf__part--router.is-lit .mf__ptr{transform:rotate(34deg);transition-delay:3.4s}

@media (prefers-reduced-motion: reduce){
  body.splash .mf__part.is-lit:not(.is-hot) .mf__blockface,body.splash .mf__part.is-lit:not(.is-hot) .mf__rate,
  body.splash .mf__part.is-lit:not(.is-hot) .mf__clamp,body.splash .mf__part.is-lit:not(.is-hot) .mf__enamel,
  body.splash .mf__part.is-lit:not(.is-hot) .mf__bezel{animation:none}
  body.splash .chapter--go[data-lit="router"] .mf__slug{animation:none;opacity:0}
  body.splash .mf__wheelspin,body.splash .mf__gptr,body.splash .mf__ptr,body.splash .mf__plate,
  body.splash .mf__indcol,body.splash .mf__rate,body.splash .mf__enamel{transition:none}
  body.splash .mf__part--router.is-lit .mf__ind--shut .mf__indcol,
  body.splash .mf__part--router.is-lit .mf__ind--open .mf__indcol,
  body.splash .mf__part--router.is-lit .mf__ptr{transition-delay:0s}
}

/* the presses. Three are bands of the wall, skewed onto its plane so the
   hit area and the focus ring are the slice of the plate the reader
   sees; the gauge is round and faces the reader, so its press is a plain
   rectangle, painted last, that wins where the two meet. Every band is
   at least 44px thick perpendicular to the skew at 360 and 390. */
body.splash .part--mf{border-radius:4px;transform:skewY(-26.565deg);transform-origin:0 0}
body.splash .part--mf-local{--x:-16;--y:292;--w:190;--h:204}
body.splash .part--mf-plans{--x:174;--y:197;--w:110;--h:150}
body.splash .part--mf-router{--x:284;--y:182;--w:230;--h:164}
/* the meter and its tag sit beyond the plate's edge: a second Router press,
   out of the tab order, covers them on the desktop; the phone bands tile
   the whole object, so it goes there */
body.splash .part--mf-router2{border-radius:12px;transform:none;--x:470;--y:184;--w:130;--h:66}
body.splash .part--mf-wallet{border-radius:12px;transform:none;--x:462;--y:42;--w:118;--h:144}
/* the phone: the three bands stretch to tile the object, so no tap lands
   nowhere, and the gauge keeps its own rectangle at the top right */
@media (max-width: 640px){
  body.splash .part--mf-local{--x:-116;--y:34;--w:290;--h:940}
  body.splash .part--mf-plans{--x:174;--y:-115;--w:110;--h:940}
  body.splash .part--mf-router{--x:284;--y:-164;--w:316;--h:940}
  body.splash .part--mf-router2{display:none}
  body.splash .part--mf-wallet{--x:462;--y:0;--w:138;--h:190}
}

/* ---------- 2d · the catalog's parts cabinet ----------------------
   The catalog object, stage B: a machined-metal chest drawn by hand in
   2:1 isometric at the stack's angle (index.html carries the geometry).
   The cabinet IS the object, the way the stack is; nothing else sits
   behind it.

   Light and material. ONE key light, top-front-right, the light the
   stack stands in: the lid is the brightest tone, the drawer fronts the
   brushed mid tone (a hard-stepped gradient of two close tones reads as
   brushing along the face), the left flank sits in shadow, every opening
   is a top-dark void, and the standing cards catch the light on their
   top edges and cast a strip of shadow beside them. Titanium is brushed
   light steel, gunmetal dark brushed steel, day and night a warm
   anodised satin (their two tones are the theme's own panel and raised
   tones). Depth is 1px specular edges and the voids; no glow, and the
   one chroma is the accent on the open drawer's rim, its engraved name
   and its handle.

   State. The drawer of the open entry (.is-lit) and the drawer under the
   pointer or asked for by its tab (.is-hot) ease out 6px on a transform
   and take the accent; the open one breathes on its stroke; a hot handle
   lights. The sealed middle drawer never moves: it is locked, and saying
   so is the point. Reduced motion: no ease, no breathing; the fanned
   cards are a resting state and stay. ------------------------------- */
/* The cabinet's own material tokens. It stands in the stack's weight:
   machined steel a step darker than the page (titanium: mid steel with
   light engraved inks, the tone of the stack's metal; gunmetal: dark
   brushed steel; day: warm anodised bronze with dark inks; night: warm
   dark anodised). Every ink clears 4.5:1 on the darkest face tone it
   sits on. --cab-lit is the lit engraving, the accent family kept where
   it reads. */
body.splash .object--catalog{
  overflow:hidden;
  --cab-a:#d8cbb6; --cab-a2:#cdbfa8; --cab-lid:#e9e0d1; --cab-side:#9c8a74; --cab-deep:#5a4d3e;
  --cab-ink:var(--text); --cab-ink2:#2f2620; --cab-lit:#7f2e0b; --cab-rivet:#8a7862;
}
:root[data-theme="titanium"] body.splash .object--catalog{--cab-a:#5c626b; --cab-a2:#545a62; --cab-lid:#8b929b; --cab-side:#3a3f46; --cab-deep:#15181c; --cab-ink:#f5f6f7; --cab-ink2:#dfe3e8; --cab-lit:#d6e4f2; --cab-rivet:#a9aeb5}
:root[data-theme="gunmetal"] body.splash .object--catalog{--cab-a:#262b31; --cab-a2:#1d2126; --cab-lid:#3a4048; --cab-side:#111418; --cab-deep:#07090b; --cab-ink:var(--text); --cab-ink2:var(--text-2); --cab-lit:var(--accent-ink); --cab-rivet:#5b636d}
:root[data-theme="night"] body.splash .object--catalog{--cab-a:#2a221c; --cab-a2:#231c17; --cab-lid:#3b3128; --cab-side:#120e0c; --cab-deep:#060403; --cab-ink:var(--text); --cab-ink2:var(--text-2); --cab-lit:var(--accent-ink); --cab-rivet:#5a4c40}
/* the engraved inks on the cabinet's faces (the shared .ob__* rules give
   the page's inks; the faces here are the cabinet's own tones) */
body.splash .object--catalog .ob__label,body.splash .object--catalog .ob__tagtext{fill:var(--cab-ink)}
body.splash .object--catalog .ob__small{fill:var(--cab-ink2)}
body.splash .object--catalog .cb__part.is-lit .ob__label,body.splash .object--catalog .cb__part.is-hot .ob__label{fill:var(--cab-lit)}
/* words that sit on paper, on the page bar or on the tag take those
   surfaces' inks, not the metal's (stated here, above the metal inks) */
body.splash .object--catalog .cb__cardname{fill:#2b2724}
body.splash .object--catalog .cb__url{fill:var(--text-2)}
body.splash .object--catalog .cb__tagline{fill:var(--text-3)}
body.splash .object__art--cab{font-family:var(--mono)}
body.splash .cb__s-a{stop-color:var(--cab-a)}
body.splash .cb__s-a2{stop-color:var(--cab-a2)}
/* the index cards are paper, in every theme: lit on top, warmer at the foot */
body.splash .cb__s-lit{stop-color:#fbfaf7}
body.splash .cb__s-sunk{stop-color:#e4e1da}
body.splash .cb__s-deep{stop-color:var(--cab-deep)}
body.splash .cb__s-side{stop-color:var(--cab-side)}
body.splash .cb__front,body.splash .cb__face,body.splash .cb__frame,body.splash .cb__plate{fill:url(#cab-brush)}
body.splash .cb__top{fill:var(--cab-lid)}
body.splash .cb__side{fill:var(--cab-side)}
body.splash .cb__plinth{fill:var(--cab-side)}
body.splash .cb__shadow{fill:var(--shadow-col)}
body.splash .cb__ground{fill:none;stroke:color-mix(in srgb,var(--shadow-col) 60%,transparent);stroke-width:2}
/* an opening is a top-dark void: the drawer's interior in shadow */
body.splash .cb__void,body.splash .cb__inner{fill:url(#cab-void)}
body.splash .cb__wall{fill:var(--cab-side);stroke:var(--cab-deep);stroke-width:1}
/* 1px specular on every top edge, 1px line on every edge turning away */
body.splash .cb__spec,body.splash .cb__lip,body.splash .cb__plinthlip,body.splash .cb__platelip,body.splash .cb__handlelip,body.splash .cb__cardlip{fill:none;stroke-width:1}
body.splash .cb__spec{stroke:rgba(255,255,255,.65)}
body.splash .cb__lip,body.splash .cb__platelip,body.splash .cb__handlelip{stroke:rgba(255,255,255,.5)}
body.splash .cb__plinthlip{stroke:rgba(0,0,0,.28)}
body.splash .cb__cardlip{stroke:rgba(255,255,255,.55)}
body.splash .cb__edge{fill:none;stroke:var(--cab-deep);stroke-width:1}
/* the drawer fronts, the sealed plate, the handles and the frame */
body.splash .cb__face,body.splash .cb__frame,body.splash .cb__plate{stroke:var(--cab-deep);stroke-width:1;transition:stroke .3s ease}
body.splash .cb__handle{fill:var(--cab-lid);stroke:var(--cab-deep);stroke-width:1;transition:stroke .3s ease}
body.splash .cb__rivet{fill:var(--cab-rivet);stroke:rgba(255,255,255,.5);stroke-width:.8}
/* the standing cards: lit on top, a cast shadow beside each one */
body.splash .cb__card{fill:url(#cab-card);stroke:var(--border-strong);stroke-width:1}
body.splash .cb__cardshadow{fill:rgba(0,0,0,.28)}
/* the page thumbnail in the artifacts drawer, and its hanging tag */
body.splash .cb__pagebar{fill:var(--sunk)}
body.splash .cb__hero{fill:var(--border-strong)}
body.splash .cb__pageline{fill:var(--border-strong)}
body.splash .cb__pagebtn{fill:var(--text-3)}
body.splash .cb__tag{fill:var(--raised);stroke:var(--border-strong);stroke-width:1}
body.splash .cb__taghole{fill:var(--sunk);stroke:var(--border-strong);stroke-width:.8}
body.splash .cb__lockbow{fill:none;stroke:var(--cab-ink);stroke-width:2;stroke-linecap:round}
body.splash .cb__lockbody{fill:var(--cab-ink)}
/* the page's lock sits on the page bar (a page tone), not on the metal */
body.splash .cb__frame + .cb__pagebar + .cb__lockbow,body.splash .cb__frame ~ .cb__lockbow{stroke:var(--text-2)}
body.splash .cb__frame ~ .cb__lockbody{fill:var(--text-2)}
/* every engraved word is a two-rim cut (filter in the SVG defs) */
body.splash .object__art--cab text{filter:url(#cab-cut)}
/* lit (the open entry) and hot (pointer or tab): the rim takes the
   accent, the engraved name lights with it (the shared .ob__label rule
   above), the handle lights under the pointer, and the drawer eases out. */
body.splash .cb__part.is-lit .cb__face,body.splash .cb__part.is-hot .cb__face,
body.splash .cb__part.is-lit .cb__frame,body.splash .cb__part.is-hot .cb__frame,
body.splash .cb__part.is-lit .cb__plate,body.splash .cb__part.is-hot .cb__plate{stroke:var(--accent);stroke-width:1.5}
body.splash .cb__part.is-hot .cb__handle{stroke:var(--accent);stroke-width:1.5}
@keyframes cbBreathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.4}}
body.splash .cb__part.is-lit:not(.is-hot) .cb__face{animation:cbBreathe 4s ease-in-out infinite}
body.splash .cb__slide{transition:transform .32s cubic-bezier(.22,1,.36,1)}
body.splash .cb__part.is-lit .cb__slide,body.splash .cb__part.is-hot .cb__slide{transform:translate(6px,3px)}
@media (prefers-reduced-motion: reduce){
  body.splash .cb__part.is-lit:not(.is-hot) .cb__face{animation:none}
  body.splash .cb__slide{transition:none}
}
/* the three presses. Each is skewed onto its own drawer face, so the hit
   area and the focus ring are the parallelogram the reader sees, not its
   bounding box; the boxes are the face's own plane, pulled out by the
   drawer's own units (skills 14, tools 0, artifacts 20). */
body.splash .part--cab{border-radius:3px;transform:skewY(-26.565deg);transform-origin:0 0}
body.splash .part--cab-skills{--x:190;--y:268;--w:356;--h:48}
body.splash .part--cab-tools{--x:162;--y:322;--w:356;--h:60}
body.splash .part--cab-artifacts{--x:202;--y:414;--w:356;--h:50}
/* the phone: a drawer face is about 30px tall there, under the tap
   floor, so the three presses become the three isometric bands the
   object reads as, each at least 44px thick at 360, clipped to the
   object by the overflow above. */
@media (max-width: 640px){
  body.splash .part--cab{--x:-70;--w:760}
  body.splash .part--cab-skills{--y:200;--h:240}
  body.splash .part--cab-tools{--y:440;--h:84}
  body.splash .part--cab-artifacts{--y:524;--h:176}
}
/* the install command under the cabinet, where the stack has its hint */
body.splash .deck__cmd{margin-top:1rem}
body.splash .deck__cmd .cmd{width:100%}

/* ---------- 3 · one deck entry ----------------------------------
   The chip row, the name, ONE line and ONE visual: a panel in the
   deck's right column, shown one at a time.
   No counter and no underline: the panel is the only thing on
   screen, so nothing has to shout which one it is. */
body.splash .fcard{
  position:relative;min-width:0;
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.3rem 1.4rem 1.4rem;
  border:1px solid var(--border);border-radius:18px;
  background:var(--raised);box-shadow:var(--shadow-sm);
}
body.splash .fcard__k{
  display:flex;align-items:center;flex-wrap:wrap;gap:.2rem 0;margin:0;
  font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-3);
}
body.splash .fcard__chips{display:flex;align-items:center;gap:.35rem}
body.splash .fcard__word{
  width:max-content;max-width:100%;margin:.05rem 0 .1rem;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,1.1rem + 1.5vw,2.3rem);letter-spacing:-.016em;line-height:1.06;
  text-wrap:wrap;color:var(--text);
}
body.splash .fcard__lead{margin:0;max-width:44ch;color:var(--text);font-size:1.02rem;font-weight:500;line-height:1.35}
body.splash .fcard__demo{display:grid;gap:.7rem;margin-top:.5rem;min-width:0}
body.splash .fcard__demo .ftile__vis{border:1px solid var(--border);border-radius:16px}
/* the fleet's stage swap is a hard cut here, as it already is under
   reduced motion. pass2-b fades a stage in with hcStageIn (fill both) at
   the same style recalc that turns it from visibility:hidden to visible;
   that opacity animation is created play-pending and holds its first
   keyframe (opacity 0) until the compositor acknowledges the start — a
   wait that runs from hundreds of milliseconds to never, while the
   widget's own stage timer keeps going. Measured: stage 2 at opacity 0
   with the animation pending 700 ms after data-stage flipped; stage 1
   at 0 for 1.1 s on its return. With the animation gone the base rule
   (opacity 1, visibility visible) paints the active stage on the frame
   data-stage changes; the dot pulse, the token flow and the peer blips
   are separate animations and keep running. */
body.splash .fcard .hcv .fleet[data-stage] .fstage{animation:none}
/* the two visuals that arrive as bare components get the panel the
   others bring with them. */
body.splash .demopanel{display:grid;gap:.9rem;padding:1.1rem 1.2rem;border:1px solid var(--border);border-radius:16px;background:var(--raised)}

/* the surfaces grid: the daemon and its five surfaces as six --sunk
   tiles (2 x 3), each the board's own label look — name, index — over
   one qualifier line. The tiles fill the demo's width. */
body.splash .surfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:0;padding:0;list-style:none}
body.splash .surf{
  display:grid;gap:.1rem;align-content:start;min-width:0;padding:.65rem .75rem .7rem;
  border:1px solid var(--border);border-radius:10px;background:var(--sunk);
}
body.splash .surf b{color:var(--text);font:700 .8125rem/1.15 var(--mono);letter-spacing:.025em}
body.splash .surf span{color:var(--text-3);font:500 .66rem/1.2 var(--mono);letter-spacing:.06em}
body.splash .surf__q{margin:.3rem 0 0;color:var(--text-2);font-size:.78rem;line-height:1.4}
body.splash .surf--daemon{border-color:color-mix(in srgb,var(--accent) 60%,var(--border-strong));background:color-mix(in srgb,var(--accent) 10%,var(--sunk))}
body.splash .surf--daemon b{color:var(--accent-ink)}

/* the boundary: two --sunk panels, "your machine" and "Go gateway", split
   by the dashed accent rule; ONE accent hairline arrow crosses it, labelled
   "Go traffic only". The rows that stay carry a small "stays" mark. */
body.splash .bound{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 6.5rem minmax(0,1fr);align-items:stretch;margin:0}
body.splash .bound__side{display:grid;align-content:start;gap:.55rem;min-width:0;padding:.9rem 1rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--sunk)}
body.splash .bound__k{margin:0 0 .5rem;font:var(--kicker);letter-spacing:var(--kicker-track);color:var(--text-2)}
body.splash .bound__rows{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
body.splash .bound__rows li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;font:500 .74rem/1.3 var(--mono);color:var(--text)}
body.splash .bound__rows i{flex:none;padding:.1rem .4rem;border:1px dashed var(--border-strong);border-radius:5px;font:600 .66rem/1.2 var(--body);letter-spacing:.03em;color:var(--text-3)}
body.splash .bound__gap{position:relative}
body.splash .bound__gap::before{content:"";position:absolute;left:50%;top:.35rem;bottom:.35rem;border-left:1px dashed var(--accent-line)}
body.splash .bound__arrow{position:absolute;left:-.5rem;right:-.5rem;top:56%;height:1px;background:var(--accent)}
body.splash .bound__arrow::after{content:"";position:absolute;right:0;top:50%;width:.45rem;height:.45rem;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:translate(-1px,-50%) rotate(45deg)}
body.splash .bound__arrow span{position:absolute;left:50%;bottom:.5rem;transform:translateX(-50%);padding:0 .35rem;background:var(--raised);white-space:nowrap;font:600 .68rem/1 var(--body);letter-spacing:.02em;color:var(--accent-ink)}

/* ---------- 4 · the catalog's card world -------------------------
   The row stays overflow:hidden, so the browser never scrolls it on
   its own: a vertical wheel or swipe over it is the page's, as it
   always was, and no scrollbar can show. splash.js moves its
   scrollLeft: the drift while the row is .is-live (the driver grants
   that only while the row's card is the lit one) and the hand (a
   sideways wheel, a drag, a swipe, the arrow keys); touch-action
   leaves vertical pans and pinches to the browser and hands sideways
   swipes to the script. The mask is the edge fade; the ring on focus
   is drawn by the demo wrapper, since the mask would clip the row's
   own. */
body.splash .tcat__row{
  --tcat-gap:.7rem;--tcat-card:248px;
  position:relative;overflow:hidden;border-radius:16px;min-width:0;
  cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;
  /* an edge fade, so the drifting cards never hard-clip at the row's edge */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
body.splash .tcat__row.is-dragging{cursor:grabbing}
@supports selector(:has(a)){body.splash .tcat__row:focus-visible{outline:none;border-radius:16px}}
body.splash .fcard__demo:has(>.tcat__row:focus-visible){outline:2px solid var(--accent);outline-offset:3px;border-radius:16px}
body.splash .tcat__track{
  display:flex;align-items:stretch;gap:var(--tcat-gap);width:max-content;
  margin:0;padding:.25rem 0;list-style:none;
}
body.splash .tcat__row.is-live .tcat__track{will-change:transform}
body.splash .tcard{
  flex:none;width:var(--tcat-card,auto);
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
  column-gap:.55rem;row-gap:.4rem;padding:.85rem .9rem 0;
  border:1px solid var(--border);border-radius:14px;background:var(--sunk);
}
body.splash .tcard__ico{grid-column:1;grid-row:1;width:2rem;height:2rem;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--raised);color:var(--text)}
body.splash .tcard__ico svg{width:16px;height:16px}
body.splash .tcard>.chip{grid-column:2;grid-row:1;justify-self:end;align-self:center}
body.splash .tcard__t{grid-column:1 / -1;grid-row:2;margin:.1rem 0 0;font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
body.splash .tcard--mono .tcard__t{font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:0}
body.splash .tcard__d{grid-column:1 / -1;grid-row:3;margin:0;min-height:0;font-size:.76rem;line-height:1.4;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.splash .tcard__f{grid-column:1 / -1;grid-row:4;display:flex;justify-content:space-between;gap:.6rem;margin:.35rem 0 0;padding:.5rem 0;font:500 .72rem/1.2 var(--body);letter-spacing:.01em;color:var(--text-3)}
body.splash .tcard__f span:first-child{color:var(--accent-ink)}
/* the artifact card: the same card, standing alone across the demo, with
   a preview of the page it published and the private link it hands back. */
body.splash .tcard--solo{max-width:none;grid-template-rows:auto auto auto auto auto auto}
body.splash .tcard--solo .tcard__d{-webkit-line-clamp:3}
body.splash .tcard--solo .tcard__f{grid-row:6}
/* the page preview: a title bar with the lock and the private URL over
   three text bars and one hairline block, in --sunk. */
body.splash .artpv{grid-column:1 / -1;grid-row:4;display:grid;margin:.1rem 0 0;border:1px solid var(--border);border-radius:10px;background:var(--sunk);overflow:hidden}
body.splash .artpv__bar{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid var(--border);font:500 .64rem/1.2 var(--mono);color:var(--text-3)}
body.splash .artpv__bar svg{width:11px;height:11px;flex:none;color:var(--accent-text)}
body.splash .artpv__body{display:grid;justify-items:start;gap:.4rem;padding:.7rem .75rem .8rem}
body.splash .artpv__body i{display:block;height:.42rem;border-radius:3px;background:var(--border-strong);opacity:.55}
body.splash .artpv__body i:nth-child(1){width:74%}
body.splash .artpv__body i:nth-child(2){width:56%}
body.splash .artpv__body i:nth-child(3){width:64%}
body.splash .artpv__body b{display:block;width:100%;height:2.4rem;margin-top:.25rem;border:1px solid var(--border-strong);border-radius:6px}
body.splash .artlink{grid-column:1 / -1;grid-row:5;display:flex;align-items:center;gap:.5rem;margin:0;padding:.4rem .5rem;border:1px dashed var(--border-strong);border-radius:8px;background:var(--sunk);font:500 .68rem/1.3 var(--mono);color:var(--text-2);overflow:hidden}
body.splash .artlink svg{width:13px;height:13px;flex:none;color:var(--accent-text)}
body.splash .artlink b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ---------- 5 · the deck's entries, sized to their column --------
   One entry is on screen at a time, so a demo only has to fit the
   panel, never a whole viewport. The graphs get room between their
   lines rather than more of them. */
body.splash .deck__slot .tree-svg{max-height:16rem}
body.splash .deck__slot .loomvis{display:grid;gap:.55rem}
body.splash .deck__slot .dagx__svg{max-height:12rem;min-width:0;width:auto;margin-inline:auto}
body.splash .deck__slot .ledger__tape{height:15rem}
body.splash .deck__slot .dic__wave{height:2rem}
/* the phone: no roll, so no readout, and the slot is not reserved (see
   /splash.js): the panel is exactly as tall as the entry it shows */
@media (max-width: 640px){
  body.splash .deck__prog{display:none}
  body.splash .deck__slot .ledger__tape{height:14rem}
  /* the dictated phrase wraps to two lines at this width; the composer
     keeps that height from the start, so the replay types without moving
     the cue, the mic bar or the chapter after them */
  body.splash .deck__slot .dic__composer{min-height:3.75rem}
}
/* the plates light with their entry: the daemon and /talk nameplates
   carry data-part, the four surface plates flash their grid tile. */
body.splash .surf{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
body.splash .surf.is-hit{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--sunk));
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- 6 · the failover strip plays once per activation -----
   The driver restarts it when its section lights and pins .is-done at
   4.9 s, the moment the 7.2 s loop's own story ends. */
@media (prefers-reduced-motion: no-preference){
  body.splash .router.is-live .rwire--1::after,body.splash .router.is-live .rwire--2::after,body.splash .router.is-live .rwire--3::after,body.splash .router.is-live .rnode--1,body.splash .router.is-live .rnode--1 .rnode__st,body.splash .router.is-live .rnode--2 .rnode__st,body.splash .router.is-live .rnode--bill .rnode__st{animation-iteration-count:1}
  body.splash .router.is-done .rwire::after{animation:none;opacity:0}
  body.splash .router.is-done .rnode__st{animation:none;opacity:1;transform:none}
  body.splash .router.is-done .rnode--1{animation:none;color:var(--text-3);border-color:var(--text-3)}
}

/* ---------- 6a · narrow: head, stack, panel ----------------------
   Under 1024 the deck stacks in reading order and the tabs wrap. The
   auto-roll and its pause rules are identical at every width. */
@media (max-width: 1023px){
  body.splash .chapter{padding:3.5rem 0 3rem}
  body.splash main section.chapter[id]{scroll-margin-top:calc(var(--nav-clear) - 3.5rem)}
  body.splash .deck{grid-template-columns:minmax(0,1fr);gap:1.75rem;margin-top:2.5rem}
  body.splash .deck__stage{--stack-bleed-x:1rem;--stack-bleed-y:1.5rem}
  body.splash .tcat__row{--tcat-card:230px}
}
@media (max-width: 640px){
  body.splash .chapter__inner{width:calc(100% - 2rem)}
  body.splash .plans{grid-template-columns:1fr}
  body.splash .deck__tab{min-height:var(--tap);font-size:.78rem;padding:.3rem .6rem}
}

/* ---------- 7 · the chapter rail ---------------------------------
   While the chapters own the page, the right edge says which of the
   three products you are in. A readout, not a control: aria-hidden,
   no pointer events, no tab stop, driven by the SAME rAF read that
   lights the card. */
body.splash .chaprail{
  position:fixed;right:1.25rem;top:50%;transform:translateY(-50%);z-index:6;
  display:grid;gap:.9rem;justify-items:end;
  pointer-events:none;opacity:0;transition:opacity .45s ease;
}
body.splash .chaprail.is-on{opacity:1}
body.splash .chaprail__i{display:grid;justify-items:end;gap:.35rem}
body.splash .chaprail__row{display:flex;align-items:center;gap:.5rem}
/* the chapter's sections as dots under its name: laid out for every
   chapter (visibility, never display, so the rail's boxes stand still
   while the reader scrolls) and shown for the chapter in view; the dot
   of the section in view, or of the open deck entry, is filled */
body.splash .chaprail__subs{display:flex;gap:.3rem;visibility:hidden}
body.splash .chaprail__i.is-now .chaprail__subs{visibility:visible}
body.splash .chaprail__subs i{width:.28rem;height:.28rem;border-radius:50%;background:var(--border-strong);transition:background .3s ease,transform .3s ease}
body.splash .chaprail__subs i.is-now{background:var(--accent);transform:scale(1.4)}
/* the label the reader is NOT standing in is dimmer by colour, not by
   opacity: a half-transparent label is unreadable whatever it sits on. */
body.splash .chaprail__i b{font:600 .68rem/1 var(--body);letter-spacing:.01em;color:var(--text-3);transition:color .3s ease}
body.splash .chaprail__row i{
  width:.5rem;height:.5rem;border-radius:50%;
  border:1px solid var(--border-strong);background:transparent;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
body.splash .chaprail__i.is-now b{color:var(--text)}
body.splash .chaprail__i.is-now .chaprail__row i{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}
/* the rail is a readout, not an animation: reduced motion only takes
   its fade away, never the rail itself */
/* the rail (60px wide, 1.25rem in from the edge) needs 80px of gutter
   beside the 1180px shell, which the viewport only has from 1340px; it
   is hidden below 1360 so it never sits on the panel card's edge */
@media (max-width: 1359px){body.splash .chaprail{display:none}}
@media (prefers-reduced-motion: reduce){body.splash .chaprail,body.splash .chaprail__i b,body.splash .chaprail__i i{transition:none}}

/* the footer waitlist is a link target (chapter 03's CTA lands on it),
   and the floating nav must not sit on top of it; the gate block in
   #download is the footer's "Conformance gate" target, a div with no
   padding of its own, so both take the whole clearance. */
body.splash #waitlist,body.splash #gate{scroll-margin-top:var(--nav-clear)}

/* ---------- 8 · the phone ----------------------------------------
   Everything above is already one column; these only reflow the two
   diagrams that need a different shape at 640. */
@media (max-width: 640px){
  body.splash .surfs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the boundary stacks: your machine over the Go gateway, the dashed
     rule turns horizontal and the one arrow crosses it downward. */
  body.splash .bound{grid-template-columns:minmax(0,1fr)}
  body.splash .bound__gap{min-height:3.4rem}
  body.splash .bound__gap::before{left:.5rem;right:.5rem;top:50%;bottom:auto;border-left:0;border-top:1px dashed var(--accent-line)}
  body.splash .bound__arrow{left:50%;right:auto;top:-.35rem;bottom:-.35rem;width:1px;height:auto}
  body.splash .bound__arrow::after{right:auto;top:auto;bottom:0;left:50%;transform:translate(-50%,1px) rotate(135deg)}
  body.splash .bound__arrow span{left:auto;right:.6rem;bottom:auto;top:50%;transform:translateY(-50%)}
  body.splash .shelf .tcard{padding-bottom:.85rem}
}
@media (prefers-reduced-motion: reduce){
  /* no drift: one static row, moved by hand, no scrollbar */
  body.splash .tcat__row{-webkit-mask-image:none;mask-image:none}
  body.splash .tcat__track{padding-inline:1px}
  body.splash .tcard[aria-hidden="true"]{display:none}
}

/* ---------- 9 · #path: the left column fills its height ----------
   The art column is a flex column the height of the plans column, with
   NO empty band in it. The render is the flexible member: it grows to
   meet the ledger — cover, centred, capped at 20% over its own 16:9
   height so only the sides give and the crest is never cut — and only
   what the cap leaves goes to the ledger's three rows (up to 3rem each)
   and the note's own row. pass2-b keeps the art frameless and starts
   the grid's items at the top; the split stretches them again. Stacked
   (<= 900) the row is content-tall: the render at its natural height,
   no cover, the ledger right under it. */
body.splash #path .path{align-items:stretch}
body.splash #path .path__art{display:flex;flex-direction:column;gap:1rem;container-type:inline-size}
body.splash .proof{display:grid;grid-template-rows:repeat(3,minmax(auto,1fr));margin:0;padding:0;font:500 .74rem/1.4 var(--mono);color:var(--text-2)}
body.splash .proof__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;align-content:center;column-gap:1rem;padding:.55rem 0;border-top:1px solid var(--border)}
body.splash .proof__row:last-child{border-bottom:1px solid var(--border)}
/* the row's label is prose, so it reads as a Noto Sans small label; only
   the value beside it stays mono, because a value is a spec. */
body.splash .proof dt{font-family:var(--body);font-weight:600;letter-spacing:.02em;color:var(--text-3)}
body.splash .proof dd{margin:0;min-width:0;text-align:right;color:var(--text)}
body.splash .proof__note{display:flex;align-items:center;margin:0;padding:.55rem 0;font-family:var(--body);font-size:.8125rem;color:var(--text-3)}
@media (min-width: 901px){
  /* (1,2,0): pass2-b's #path .path__art img (1,1,1) sets object-fit:fill */
  body.splash #path .path__art .path__img{flex:20 1 auto;min-height:0;max-height:calc(100cqw * .675);object-fit:cover;object-position:center}
  body.splash .proof{flex:2 1 auto;max-height:11rem}
  body.splash .proof__note{flex:1 1 auto}
}

/* ---------- 10 · #benchmark: proof, not pitch ----------
   On the ground, under one hairline, the shell's width: eyebrow and the
   word AHRB on the left in the card-word's look (solid ink, its accent
   hairline simply drawn — nothing here rides the scroll), the lead and
   the one paragraph on the right; five hairline pillar tiles in one row;
   the CTA with its mono note. */
body.splash .bmk{background:var(--ground)}
body.splash .bmk__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1.5rem 4rem;align-items:end;margin-bottom:2.25rem}
body.splash .bmk__head .eyebrow{margin-bottom:1rem}
body.splash .bmk__word{
  width:max-content;max-width:100%;margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.018em;line-height:1.02;
  text-wrap:wrap;color:var(--text);
}
body.splash .bmk__copy{display:grid;gap:.6rem}
body.splash .bmk__lead{margin:0;font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--text)}
body.splash .bmk__p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-2)}
body.splash .bmk__pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none}
body.splash .bmk__pillars li{display:grid;gap:.3rem;align-content:start;min-width:0;padding:.8rem .9rem .85rem;border:1px solid var(--border);border-radius:12px}
body.splash .bmk__pillars b{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:-.012em;color:var(--text)}
body.splash .bmk__pillars span{font:500 .72rem/1.5 var(--body);letter-spacing:.01em;color:var(--text-3)}
body.splash .bmk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.25rem;margin-top:1.6rem}
body.splash .bmk__note{margin:0;font:400 .8125rem/1.45 var(--body);color:var(--text-3)}
@media (max-width: 900px){body.splash .bmk__head{grid-template-columns:1fr;gap:1rem}}
@media (max-width: 640px){body.splash .bmk__pillars{grid-template-columns:1fr}}

/* ---------- 11 · pass 14: the review fixes ----------
   The footer form is the catalog waitlist; the Coming chips on the
   catalog cards and shelf slots link to it and read as links on hover
   and focus; the hero pill is the gate's link; #path's Go panel puts
   the plan selector in one row and Compare plans in a footnote. */
body.splash .wait__h{font:600 .92rem/1.3 var(--display);letter-spacing:-.012em;color:var(--text)}
body.splash a.chip--coming:hover{color:var(--accent-text);border-color:var(--accent-line)}
body.splash a.chip--coming:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.splash a.hero__pill:hover{border-color:var(--accent-line);color:var(--text)}
body.splash a.hero__pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.splash .card__foot{margin:0;font-size:.8125rem;color:var(--text-3)}
body.splash .card__foot a{display:inline-flex;align-items:center;min-height:var(--tap);margin:-.6rem 0;color:var(--text-3)}
body.splash .card__foot a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em}

/* the gate bars grow when seen (the comp's part3 style) */

body.splash .bars .bar__t{width:0}
body.splash .bars.in .bar__t{width:calc(var(--v)/21*100%)}
@media (prefers-reduced-motion: reduce){body.splash .bars .bar__t{width:calc(var(--v)/21*100%)}}

/* ---------- production additions, after the ported rules ---------- */
/* the mobile sheet's toggle: the comp's row look, with a text label the
   way production's toggle always had one (theme.js sets the aria-label) */
@media (max-width: 960px){
  body.splash .nav__sheet .theme-toggle{width:100%;height:auto;min-height:44px;justify-content:space-between;flex-direction:row-reverse;padding:0 .9rem;border-radius:12px;font-weight:500;color:var(--text)}
  /* the cycle: titanium -> gunmetal -> day -> night -> titanium; the words
     match the aria-label /theme.js writes */
  body.splash .nav__sheet .theme-toggle::after{content:"Switch to the Gunmetal theme"}
  :root[data-theme="gunmetal"] body.splash .nav__sheet .theme-toggle::after{content:"Switch to the Day theme"}
  :root[data-theme="day"] body.splash .nav__sheet .theme-toggle::after{content:"Switch to the Night theme"}
  :root[data-theme="night"] body.splash .nav__sheet .theme-toggle::after{content:"Switch to the Titanium theme"}
}

/* ================================================================
   METAL TREATMENTS - titanium and gunmetal only
   The two warm themes are untouched below this line. Everything here
   is a SURFACE: a gradient on a card, a button or one headline word,
   with a 1px specular edge for depth. No background gradients, no
   blur, no glow.
   ================================================================ */
:root[data-theme="titanium"] body.splash .btn--dark,
:root[data-theme="gunmetal"] body.splash .btn--dark,
:root[data-theme="titanium"] body.splash .btn--accent,
:root[data-theme="gunmetal"] body.splash .btn--accent{
  background:var(--surf-primary);
  color:var(--surf-primary-ink);
  border-color:var(--surf-primary-border);
  box-shadow:var(--surf-primary-edge);
}
/* the buy CTA keeps the theme's one chroma as its edge, so a tile's two
   buttons still read as two different offers */
:root[data-theme="titanium"] body.splash .btn--accent,
:root[data-theme="gunmetal"] body.splash .btn--accent{
  border-color:var(--accent);
}
:root[data-theme="titanium"] body.splash .btn--dark:hover,
:root[data-theme="gunmetal"] body.splash .btn--dark:hover,
:root[data-theme="titanium"] body.splash .btn--accent:hover,
:root[data-theme="gunmetal"] body.splash .btn--accent:hover{
  background:var(--surf-primary);
  color:var(--surf-primary-ink);
  filter:brightness(1.06);
}
:root[data-theme="titanium"] body.splash .btn--ghost,
:root[data-theme="gunmetal"] body.splash .btn--ghost{
  background:var(--surf-metal);
  box-shadow:var(--surf-metal-edge);
}
/* brushed steel on the objects that already read as objects */
:root[data-theme="titanium"] body.splash .nav__pill,
:root[data-theme="gunmetal"] body.splash .nav__pill,
:root[data-theme="titanium"] body.splash .hero__pill,
:root[data-theme="gunmetal"] body.splash .hero__pill,
:root[data-theme="titanium"] body.splash .card,
:root[data-theme="gunmetal"] body.splash .card,
:root[data-theme="titanium"] body.splash .fcard,
:root[data-theme="gunmetal"] body.splash .fcard{
  background-image:var(--surf-metal);
  box-shadow:var(--surf-metal-edge),var(--shadow-sm);
}
/* ONE headline word in chrome */
:root[data-theme="titanium"] body.splash .hero__title em,
:root[data-theme="gunmetal"] body.splash .hero__title em{
  background:var(--chrome-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* the few rules that remain get the polished edge instead of a flat line */
:root[data-theme="titanium"] body.splash .faq details,
:root[data-theme="gunmetal"] body.splash .faq details,
:root[data-theme="titanium"] body.splash .proof__row,
:root[data-theme="gunmetal"] body.splash .proof__row{
  border-color:transparent;
  border-image:var(--rule-edge) 1;
}