/* NimrodLab — site v2.
   Design source: docs/site-v2/*.dc.html · Tokens: brand/tokens.json
   Dark is the default. A light OS preference gets the light set, and the
   "flip" band inverts with it, so the alternation holds either way. */

:root{
  --ground:#12100E; --panel:#1B1815; --raised:#252119;
  --line:#342E26; --line-strong:#4A4136;
  --text:#EDE6D9; --text-soft:#BDB3A4; --text-muted:#948A7C;
  --amber:#FFA31A; --amber-hot:#FFD98A; --amber-wash:rgba(255,163,26,.10);
  --teal:#37B5A2; --lamp-off:#3A332A; --field:#16130F; --field-ink:#221E18;
  --glow:0 0 12px rgba(255,163,26,.55);
  --shadow:0 42px 84px rgba(0,0,0,.62);
  --shadow-tile:0 22px 44px rgba(0,0,0,.55);

  /* the opposite ground — used by one band per page */
  --flip-ground:#F7F3EA; --flip-panel:#FDFAF3; --flip-line:#E0D7C4;
  --flip-line-strong:#C9BEA8; --flip-text:#1B1815; --flip-text-soft:#574F44;
  --flip-text-muted:#7A7061; --flip-amber:#B36D00;

  --pad:clamp(20px,5vw,72px);
  --hero-gap:clamp(32px,5vw,64px);
  --font-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){
  --ground:#F7F3EA; --panel:#FDFAF3; --raised:#F0EADC;
  --line:#E0D7C4; --line-strong:#C9BEA8;
  --text:#1B1815; --text-soft:#574F44; --text-muted:#7A7061;
  --amber:#B36D00; --amber-hot:#8A5400; --amber-wash:rgba(179,109,0,.09);
  --teal:#14806E; --lamp-off:#D8CDB6; --field:#F0EADC; --field-ink:#E3DAC7;
  --glow:none;
  --shadow:0 30px 60px rgba(27,24,21,.16);
  --shadow-tile:0 18px 36px rgba(27,24,21,.12);

  --flip-ground:#12100E; --flip-panel:#1B1815; --flip-line:#342E26;
  --flip-line-strong:#4A4136; --flip-text:#EDE6D9; --flip-text-soft:#BDB3A4;
  --flip-text-muted:#948A7C; --flip-amber:#FFA31A;
}}

:root[data-theme="light"]{
  --ground:#F7F3EA; --panel:#FDFAF3; --raised:#F0EADC;
  --line:#E0D7C4; --line-strong:#C9BEA8;
  --text:#1B1815; --text-soft:#574F44; --text-muted:#7A7061;
  --amber:#B36D00; --amber-hot:#8A5400; --amber-wash:rgba(179,109,0,.09);
  --teal:#14806E; --lamp-off:#D8CDB6; --field:#F0EADC; --field-ink:#E3DAC7;
  --glow:none; --shadow:0 30px 60px rgba(27,24,21,.16); --shadow-tile:0 18px 36px rgba(27,24,21,.12);
  --flip-ground:#12100E; --flip-panel:#1B1815; --flip-line:#342E26;
  --flip-line-strong:#4A4136; --flip-text:#EDE6D9; --flip-text-soft:#BDB3A4;
  --flip-text-muted:#948A7C; --flip-amber:#FFA31A;
}

/* ── base ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; overflow-x:hidden; background:var(--ground); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* width/height attributes reserve space, but they also set a CSS height that
   would beat aspect-ratio. Let height follow the box unless a rule says otherwise. */
img{display:block; max-width:100%; height:auto}
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.032em; line-height:.96; margin:0; text-wrap:balance}
p{margin:0}
figure{margin:0}
a{color:var(--amber); text-decoration:none}
a:hover{color:var(--amber-hot)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:2px}
[hidden]{display:none!important}

.mono,.label{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)}
.lede{color:var(--text-soft); font-size:clamp(17px,1.5vw,19px); line-height:1.55; max-width:44ch}
.copy{color:var(--text-soft); font-size:clamp(15.5px,1.3vw,17px); line-height:1.65; max-width:56ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--pad); top:12px; z-index:99; background:var(--amber); color:var(--ground); padding:10px 16px; border-radius:6px}

/* ── bands ────────────────────────────────────────── */
.band{position:relative; padding:clamp(44px,6vw,90px) 0 clamp(48px,6.5vw,96px)}
.inner{max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.band--panel{background:var(--panel); border-block:1px solid var(--line); z-index:1}
.band--flip{background:var(--flip-ground); color:var(--flip-text);
  --text:var(--flip-text); --text-soft:var(--flip-text-soft); --text-muted:var(--flip-text-muted);
  --line:var(--flip-line); --line-strong:var(--flip-line-strong); --amber:var(--flip-amber)}
.band--flip .label,.band--flip .mono{color:var(--flip-text-muted)}
.band--flip h2,.band--flip h3{color:var(--flip-text)}

.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,4vw,48px); flex-wrap:wrap}
.band-head h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px; max-width:20ch}

/* ── nav ──────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .inner{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); height:64px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; color:inherit; min-height:44px}
.brand b{font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.01em}
.brand .sep{color:var(--line-strong)}
.nav a.link{color:var(--text-muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:12px 0}
.nav a.link:hover,.nav a.link[aria-current]{color:var(--text)}
.nav .clock{border-left:1px solid var(--line); padding-left:clamp(16px,2vw,28px)}
@media (max-width:880px){ .nav a.link,.nav .clock{display:none} .nav a.link.cta{display:inline; color:var(--amber)} }

/* ── buttons and pills ────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:13px 22px;
  border-radius:6px; font-family:inherit; font-size:15px; font-weight:600; border:1px solid transparent; cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.btn-primary{background:var(--amber); color:var(--ground); border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-hot); color:var(--ground)}
.btn-ghost{border-color:var(--line-strong); color:var(--text-soft)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber)}
.btn-quiet{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  min-height:34px; padding:8px 13px; border-radius:4px; border-color:var(--line-strong); color:var(--text-muted); background:none}
.btn-quiet:hover{border-color:var(--amber); color:var(--amber)}
.btn-quiet.hot{border-color:var(--amber); color:var(--amber)}
.btn-quiet.hot:hover{background:var(--amber-wash)}

.pill{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:20px;
  border:1px solid var(--line-strong); color:var(--text-muted)}
.pill.live{color:var(--teal); border-color:color-mix(in srgb, var(--teal) 45%, transparent)}
.pill.live::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--teal)}
.pill.on{background:var(--amber); border-color:var(--amber); color:var(--ground)}
.pill.dashed{border-style:dashed}
.band--flip .pill{border-color:var(--flip-line-strong); color:var(--flip-text-muted)}
.chips{display:flex; gap:8px; padding-bottom:6px; overflow-x:auto; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

/* ── hero ─────────────────────────────────────────── */
.hero{position:relative; z-index:3; padding:clamp(34px,5vw,92px) 0 clamp(40px,5vw,56px)}
.eyebrow{display:flex; align-items:center; gap:10px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:var(--glow); flex:none}
.hero h1{font-size:clamp(46px,6.6vw,94px); line-height:.9; margin-top:clamp(20px,2.4vw,26px)}
.hero .lede{margin-top:clamp(20px,2.4vw,30px)}
.here{display:flex; gap:12px; margin-top:clamp(26px,3vw,36px); flex-wrap:wrap}
@media (max-width:520px){ .here{flex-direction:column} .here .btn{width:100%} }

.rail{display:flex; margin-top:clamp(30px,4vw,56px); border-top:1px solid var(--line); padding-top:18px}
.rail div{flex:1; padding-left:clamp(16px,2.6vw,40px); border-right:1px solid var(--line)}
.rail div:first-child{padding-left:0}
.rail div:last-child{border-right:0}
.rail b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(21px,2vw,26px); letter-spacing:-.032em}
.rail b.teal{color:var(--teal)}
.rail .label{margin-top:6px; font-size:9.5px}

.hero-frames{display:none}
.hero-detail{position:relative; border-block:1px solid var(--line); overflow:hidden}
.hero-detail img{width:100%; height:min(260px,52vw); object-fit:cover; object-position:50% 50%}
.hero-detail figcaption{position:absolute; left:var(--pad); bottom:18px; color:var(--text-soft)}

@media (min-width:1024px){
  .hero .inner{--frames-w:clamp(300px,30vw,430px); position:relative;
    display:grid; grid-template-columns:minmax(0,1fr) var(--frames-w); gap:var(--hero-gap); align-items:start}
  /* the column rule the frames break */
  .hero .inner::after{content:""; position:absolute; width:1px; background:var(--line);
    top:calc(-1 * clamp(34px,5vw,92px)); bottom:-96px;
    right:calc(var(--frames-w) + var(--hero-gap) / 2)}
  .hero-detail{display:none}
  .hero-frames{display:block; position:relative; margin-bottom:-96px}
  .frame-card{width:100%; aspect-ratio:9/16; object-fit:cover; object-position:50% 12%;
    border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateX(calc(var(--pad) + 26px))}
  .frame-bond{position:absolute; bottom:40px; left:-24%; width:61%; margin:0; z-index:2}
  .frame-bond img{width:100%; aspect-ratio:39/70; object-fit:cover; border-radius:14px;
    border:1px solid var(--line-strong); box-shadow:var(--shadow)}
  .frame-bond figcaption{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:10px}
  .frame-bond figcaption::before{content:""; width:22px; height:1px; background:var(--line-strong)}
}

/* ── the wall ─────────────────────────────────────── */
.wall{margin-top:clamp(26px,3.4vw,46px); display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))}
@media (min-width:1024px){ .band--panel.works{padding-top:clamp(88px,9vw,120px)} }

.tile{display:flex; flex-direction:column; background:var(--ground); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; color:inherit; transition:border-color .18s, box-shadow .18s, background .18s}
.tile-art{position:relative; height:clamp(190px,22vw,300px); border-bottom:1px solid var(--line); overflow:hidden; background:var(--field)}
.tile-art img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform .18s ease-out}
.tile-body{display:flex; flex-direction:column; gap:11px; padding:20px 20px 22px; flex:1}
.tile h3{font-size:clamp(21px,1.7vw,23px)}
.tile p{color:var(--text-muted); font-size:14.5px; line-height:1.5}
.tile .more{margin-top:auto; padding-top:6px; color:var(--amber); font-size:14px; font-weight:600}
.tile .more span{display:inline-block; transition:transform .18s ease-out}
a.tile:hover{background:var(--panel); border-color:var(--amber); box-shadow:var(--shadow-tile)}
a.tile:hover .tile-art img{transform:scale(1.04)}
a.tile:hover p{color:var(--text-soft)}
a.tile:hover .more{color:var(--amber-hot)}
a.tile:hover .more span{transform:translateX(4px)}
.tile.soon{background:none; border-style:dashed; border-color:var(--line-strong)}
.tile.soon .tile-art{border-bottom-style:dashed; border-bottom-color:var(--line-strong); background:none;
  display:flex; align-items:center; justify-content:center}
.tile.soon h3{color:var(--text-muted)}
.tile.soon p{color:var(--text-muted); opacity:.85}
.ring{width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--amber) 40%, transparent)}

/* art fields for products with no screenshots yet */
.field-eona{position:relative; height:100%; overflow:hidden}
.field-eona .word{position:absolute; left:-12px; bottom:-34px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(96px,11vw,138px); letter-spacing:-.06em; color:var(--field-ink); line-height:.8}
.field-eona .roster{position:absolute; left:24px; top:34px; display:flex; gap:14px}
.field-eona .roster span{width:16px; height:16px; border-radius:50%; border:1px solid color-mix(in srgb, var(--amber) 45%, transparent)}
.field-eona .roster span.on{background:var(--amber); border-color:var(--amber); box-shadow:var(--glow)}
.field-eona .label{position:absolute; left:24px; top:70px; font-size:10px}
.field-board{height:100%; display:flex; align-items:center; justify-content:center}
.field-board div{display:grid; grid-template-columns:repeat(5,clamp(20px,2vw,26px)); grid-auto-rows:clamp(20px,2vw,26px); gap:6px}
.field-board i{border-radius:3px; background:var(--raised)}
.field-board i.on{background:var(--amber)}
.field-board i.hole{background:none; border:1px solid var(--line-strong)}

/* ── the screen strip ─────────────────────────────── */
.strip-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:26px}
.strip{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-left:var(--pad);
  scroll-padding-left:var(--pad); -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip img{height:clamp(260px,32vw,340px); width:auto; flex:none; border-radius:10px; border:1px solid var(--raised)}
@media (min-width:1024px){ .strip{padding-left:0; margin-left:-46px} }

/* ── rules (flip band) ────────────────────────────── */
.rules{display:grid; gap:clamp(24px,3vw,30px); margin-top:clamp(30px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.rules > div{border-top:1px solid var(--flip-line-strong); padding-top:22px}
.rules .n{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--flip-amber)}
.rules h3{font-size:clamp(21px,1.9vw,24px); margin-top:16px}
.rules p{margin-top:14px; color:var(--flip-text-soft); font-size:15.5px; line-height:1.6}

/* ── the name + the machine ───────────────────────── */
.name-grid{display:grid; gap:clamp(28px,5vw,76px); align-items:start}
@media (min-width:960px){ .name-grid{grid-template-columns:minmax(0,1fr) clamp(420px,38vw,520px)} }
.machine{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.machine-top{display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--raised)}
.machine-top .dot{width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:var(--glow)}
.heaps{display:flex; flex-direction:column; gap:18px; padding:28px 22px 16px}
.heap{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.heap-no{width:22px; font-family:var(--font-mono); font-size:10px; color:var(--text-muted)}
.lamp{width:24px; height:24px; border-radius:50%; border:0; padding:0; background:var(--lamp-off); cursor:pointer;
  transition:background .22s, box-shadow .22s, transform .12s, opacity .22s}
.lamp.on{background:var(--amber); box-shadow:var(--glow)}
.lamp.on:hover{transform:scale(1.14)}
.lamp.doomed{background:var(--lamp-off); box-shadow:none; opacity:.55}
.lamp:disabled{cursor:default; transform:none}
.readout{display:grid; grid-template-columns:62px minmax(0,1fr); gap:6px 12px; padding:6px 22px 4px;
  font-family:var(--font-mono); font-size:12px; line-height:1.45}
.readout .who{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)}
.readout .what{color:var(--text-soft)}
.readout .what.idle{color:var(--text-muted); opacity:.55}
.readout .what.fresh{color:var(--amber)}
.hint{margin:16px 22px 0; padding:14px 16px; border:1px solid var(--amber); border-radius:6px;
  background:var(--amber-wash); display:flex; gap:11px; align-items:flex-start}
.hint .bulb{flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--amber); box-shadow:var(--glow)}
.hint p{font-size:14px; line-height:1.55; color:var(--text-soft)}
.hint b{color:var(--text); font-weight:600}
.working{margin:16px 22px 0; padding:14px 16px; border:1px solid var(--line); border-radius:6px; background:var(--raised)}
.working .plain{font-size:14px; line-height:1.55; color:var(--text-soft); margin-bottom:13px}
.working .plain b{color:var(--text); font-weight:600}
.working .cap{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:9px}
.w-grid{display:grid; grid-template-columns:auto auto; gap:3px 14px; justify-content:start; font-family:var(--font-mono); font-size:12px}
.w-grid span{color:var(--text-muted)}
.w-grid b{font-weight:500; color:var(--text-soft); letter-spacing:.09em}
.w-grid b.good{color:var(--teal)} .w-grid b.bad{color:var(--text-muted)}
.w-grid .sep{grid-column:1/-1; height:1px; background:var(--line); margin:5px 0}
.howto{margin:18px 22px 0; border-top:1px solid var(--line); padding-top:14px}
.howto summary{cursor:pointer; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); list-style:none; padding:6px 0}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"+ "; color:var(--amber)}
.howto[open] summary::before{content:"\2212 "}
.howto summary:hover{color:var(--amber)}
.howto div{padding-top:12px; display:flex; flex-direction:column; gap:9px}
.howto p{font-size:14px; color:var(--text-muted); line-height:1.55}
.howto strong{color:var(--text-soft); font-weight:600}
.machine-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 22px 20px;
  border-top:1px solid var(--line); margin-top:14px}
.machine-foot .status{margin-right:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted)}
.machine-foot .status.win{color:var(--teal)} .machine-foot .status.lose{color:var(--amber)}

/* ── cta + footer ─────────────────────────────────── */
.cta{background:var(--panel); border-top:1px solid var(--line)}
.cta .inner{display:flex; align-items:center; justify-content:space-between; gap:clamp(22px,4vw,48px); flex-wrap:wrap}
.cta h2{font-size:clamp(26px,2.8vw,34px); max-width:20ch}
.cta p{margin-top:12px; color:var(--text-muted); font-size:16px; max-width:48ch}
footer{border-top:1px solid var(--line); padding:clamp(34px,4vw,58px) 0 clamp(40px,4.4vw,64px)}
.foot-grid{display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.foot-grid .col{display:flex; flex-direction:column; gap:11px}
.foot-grid a,.foot-grid span.item{color:var(--text-soft); font-size:14.5px}
.foot-grid a:hover{color:var(--amber)}
.foot-note{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(28px,3vw,44px); padding-top:20px; border-top:1px solid var(--line)}

/* ── product page ─────────────────────────────────── */
.hero-held{position:relative; overflow:hidden}
.hero-held .held{width:100%; height:min(400px,80vw); object-fit:cover; object-position:50% 6%;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent);
          mask-image:linear-gradient(to bottom,#000 52%,transparent)}
.hero-held .hero{margin-top:-64px; padding-top:0}
@media (min-width:1024px){
  .hero-held .held{position:absolute; top:0; right:0; width:min(620px,44vw); height:100%; object-position:50% 16%;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,#000 72%,transparent);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent,#000 30%),linear-gradient(to bottom,#000 72%,transparent);
            mask-composite:intersect}
  .hero-held .hero{margin-top:0; padding-top:clamp(60px,7vw,108px); min-height:720px}
  .hero-held .hero .inner{display:block}
  .hero-held .hero h1,.hero-held .hero .lede,.hero-held .hero .rail{max-width:660px}
}

.seq{position:relative; margin-top:clamp(26px,3.4vw,48px)}
.seq .track{position:absolute; left:0; right:0; top:4px; height:1px; background:var(--line)}
.seq .track i{display:block; width:74%; height:100%; background:var(--amber)}
.seq .steps{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-left:0}
.seq .steps::-webkit-scrollbar{display:none}
.seq .step{width:240px; flex:none; transition:opacity .18s}
.seq .step .bead{display:block; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:var(--glow)}
.seq .step:last-child .bead{background:none; border:1px solid var(--line-strong); box-shadow:none}
.seq .step .t{font-family:var(--font-display); font-weight:800; letter-spacing:-.032em;
  font-size:clamp(24px,2.2vw,28px); color:var(--amber); margin-top:16px}
.seq .step:last-child .t{color:var(--text)}
.seq .step h3{font-size:clamp(19px,1.6vw,21px); margin-top:10px}
.seq .step p{margin-top:8px; color:var(--text-muted); font-size:14px; line-height:1.5}
.seq .step img{width:100%; height:420px; object-fit:cover; object-position:50% 12%; margin-top:18px;
  border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-tile)}
@media (min-width:1024px){
  .seq .steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; overflow:visible}
  .seq .step{width:auto}
  .seq .step:nth-child(even){padding-top:56px}
  .seq .step:nth-child(even) .bead{margin-top:-56px}
  .seq .step img{height:470px}
  .seq:hover .step:not(:hover){opacity:.7}
}

.ledger{margin-top:clamp(26px,3.4vw,44px)}
.ledger div{display:grid; gap:8px; padding:20px 0; border-top:1px solid var(--flip-line)}
.ledger div:last-child{border-bottom:1px solid var(--flip-line)}
.ledger h3{font-size:clamp(24px,2.4vw,30px)}
.ledger p{color:var(--flip-text-soft); font-size:clamp(15.5px,1.4vw,17px)}
@media (min-width:820px){ .ledger div{grid-template-columns:230px minmax(0,1fr); gap:40px; align-items:baseline; padding:22px 0} }

.split{display:grid; gap:clamp(28px,5vw,80px); align-items:start}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,1fr) clamp(380px,34vw,480px)} }
.spec-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.spec-card .top{display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--raised)}
.spec-card .top .dot{width:7px; height:7px; border-radius:50%; background:var(--teal)}
.spec-rows{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 20px; padding:24px 22px 26px;
  font-family:var(--font-mono); font-size:13px; color:var(--text-soft)}
.spec-rows .k{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)}
.spec-rows .teal{color:var(--teal)}

.bond-grid{display:grid; gap:clamp(28px,4vw,64px); margin-top:clamp(26px,3.4vw,46px); align-items:start}
@media (min-width:960px){ .bond-grid{grid-template-columns:clamp(300px,26vw,380px) minmax(0,1fr)} }
.bond-grid > img{width:100%; aspect-ratio:39/70; object-fit:cover; border-radius:12px;
  border:1px solid var(--line); box-shadow:var(--shadow-tile)}
.two-up{display:grid; gap:clamp(14px,1.8vw,22px); margin-top:clamp(26px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.two-up div{background:var(--ground); border:1px solid var(--line); border-radius:10px; padding:22px}
.two-up b{display:block; font-family:var(--font-display); font-weight:800; letter-spacing:-.032em;
  font-size:clamp(32px,3vw,40px); color:var(--amber); margin-top:12px}
.two-up b.off{color:var(--line-strong)}
.two-up p{margin-top:10px; color:var(--text-muted); font-size:14.5px; line-height:1.5}
.pulse-row{display:grid; gap:clamp(22px,3vw,40px); margin-top:clamp(28px,3.4vw,44px);
  padding-top:32px; border-top:1px solid var(--line); align-items:start}
@media (min-width:820px){ .pulse-row{grid-template-columns:clamp(240px,22vw,300px) minmax(0,1fr)} }
.pulse-row img{width:100%; aspect-ratio:600/800; object-fit:cover; object-position:50% 0;
  border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-tile)}
.pulse-row h3{font-size:clamp(21px,2vw,26px)}
.pulse-row p{margin-top:14px; color:var(--text-muted); font-size:15.5px; line-height:1.6}

/* ── motion ───────────────────────────────────────── */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes riseFrame{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
@keyframes wipe{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Everything below only ever hides content once the inline head script has
   confirmed motion is wanted and JS is running. Without that class the page
   renders complete and static — nothing is invisible waiting for a script. */
.anim .enter{animation:rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.anim .enter-fade{animation:fade .26s ease-out both; animation-delay:var(--d,0ms)}
.anim .enter-frame{animation:riseFrame .62s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}

/* A band header announces itself with its rule, not by fading its own words in.
   Body copy never animates, so nothing on the page is ever waiting to appear. */
.band-head > div .label{position:relative; display:inline-block}
.band-head > div .label::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:1px;
  background:var(--amber); transform-origin:left; transition:transform .42s ease-out .1s}
.anim .band-head > div .label::after{transform:scaleX(0)}
.anim .reveal.in > div .label::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .band-head .label::after{transform:scaleX(1)}
}

/* headline enters a line at a time, not a letter at a time */
.hero h1 span{display:block}