/* ═══════════════════════════════════════════════════════════
   99 — night court
   Mobile-first. Transforms + opacity only.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:Anton;src:url(assets/fonts/anton-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2212}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/plexmono-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2212}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/plexmono-latin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2212}

:root{
  --asphalt:#0B0D0F;
  --asphalt-2:#111417;
  --ink:#07080A;
  --bone:#E8E6E1;
  --dim:#96A0A8;
  --steel:#6E8DA6;       /* 5.4:1 on --asphalt — small mono labels must clear AA */
  --sodium:#FF6A00;
  --sodium-hot:#FF8A33;
  --oxide:#FF3B1F;
  --accent:#FF5A1F;
  --line:rgba(232,230,225,.12);
  --gut:20px;
  --maxw:1120px;
  --t-fast:160ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--asphalt);-webkit-text-size-adjust:100%}
/* the 320vw court arcs must not create a horizontal scrollbar.
   `hidden` first for iOS Safari < 16, which drops `clip`. */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  margin:0;
  font-family:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;line-height:1.62;color:var(--dim);
  background:var(--asphalt);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600;color:var(--bone)}
em{font-style:normal}

:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}
::selection{background:var(--sodium);color:#0B0D0F}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sodium);color:#0B0D0F;padding:10px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* ── fixed atmosphere (static layers, never animated) ── */
.lamp{position:fixed;inset:-15vh 0 auto 0;height:95vh;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 60vh at 50% 0%,rgba(255,106,0,.17),rgba(255,106,0,.05) 45%,transparent 72%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;
  background-image:url(assets/noise.png);background-size:128px 128px}
.scan{position:fixed;inset:0;z-index:61;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.3) 0 1px,transparent 1px 4px)}

/* ── court arcs ── */
.arc{position:relative;color:var(--steel);opacity:.22;width:320vw;left:50%;transform:translateX(-50%)}
.arc-hero{position:absolute;bottom:-4vh;height:34vh;z-index:0;opacity:.26}
.arc-div{display:block;height:100px;margin:0;opacity:.18}
.arc-flip{transform:translateX(-50%) scaleY(-1)}

/* ── topbar ── */
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wordmark{display:block;color:var(--bone);line-height:0}
/* taller viewBox than the numerals alone — the ceiling rule and the climb
   curve sit above and below them, so height is set to keep the digits the
   same optical size as the ratings on the card */
.wordmark .mark{display:block;height:30px;width:auto}
.wordmark.small .mark{height:22px}
.topbar-meta{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  max-width:var(--maxw);margin:0 auto;
  padding:12px var(--gut) calc(14px + env(safe-area-inset-bottom));
  display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
  gap:clamp(5px,1.1vh,13px);
}
.prop{position:relative;z-index:3;font-size:10.5px;line-height:1.45;letter-spacing:.19em;text-transform:uppercase;
  color:var(--steel);max-width:34ch;padding-top:2px}
.hero-title{
  position:relative;z-index:4;
  font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(2.4rem,12.2vw,5.6rem);line-height:.84;letter-spacing:-.012em;
  color:var(--bone);
  /* Flush with the gutter like every other element. Anton and Plex Mono share a
     0.02em left side bearing, so at this size the ink sits ~0.9px further in
     than the mono above it — this cancels exactly that, nothing more. */
  margin-left:-.017em;margin-bottom:-.32em;
  text-shadow:0 2px 24px rgba(11,13,15,.85);
}
.hero-title em{color:var(--sodium)}

/* ── the card ── */
.card-stage{position:relative;z-index:2;perspective:1100px;min-height:0;
  display:flex;align-items:center;justify-content:flex-end;padding-left:22%}
.card{
  container-type:inline-size;
  position:relative;width:100%;width:min(100%,calc(47svh * .715));height:auto;aspect-ratio:.715;
  padding:13px 13px 11px;
  display:grid;grid-template-rows:auto 1fr auto auto;gap:6px;
  color:var(--accent);
  background:
    radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.10),transparent 58%),
    linear-gradient(168deg,var(--asphalt-2) 0%,#0A0C0E 62%,#070809 100%);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 90ms linear;
}
.card::before{ /* halogen lip along the top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.85;
  transition:background var(--t-fast) linear}
.card-frame{position:absolute;inset:0;width:100%;height:100%;color:var(--line);pointer-events:none}
.card-art{position:absolute;inset:auto 0 14% 0;width:100%;height:auto;opacity:.5;
  color:var(--accent);pointer-events:none;transition:color var(--t-fast) linear}

.card-head{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;gap:6px;flex-wrap:wrap}
.tag{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#0B0D0F;
  background:var(--accent);padding:3px 6px 2px;font-weight:600;transition:background var(--t-fast) linear}
.tag-ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px currentColor}
.serial{position:absolute;left:-2px;top:4px;writing-mode:vertical-rl;
  font-size:8px;letter-spacing:.24em;color:var(--steel)}

.card-ovr{position:relative;z-index:2;display:flex;align-items:flex-end;gap:9px;padding-top:4px}
.ovr-num{font-family:Anton,Impact,sans-serif;line-height:.76;color:var(--bone);
  font-size:5.4rem;font-size:36cqi;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transform-origin:left bottom}
.ovr-num.pulse{animation:lock 460ms var(--ease) 1}
@keyframes lock{0%{transform:scale(1)}34%{transform:scale(1.055)}100%{transform:scale(1)}}
.ovr-side{display:flex;flex-direction:column;gap:3px;padding-bottom:.5em}
.ovr-label{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}
.ovr-rarity{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  transition:color var(--t-fast) linear}
.decay-marker{position:absolute;right:0;top:2px;font-size:8.5px;letter-spacing:.14em;
  color:var(--oxide);white-space:nowrap;opacity:0;transform:translateY(-4px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.decay-marker::before{content:"";display:inline-block;width:12px;height:1px;background:var(--oxide);
  vertical-align:middle;margin-right:5px}
.decay-marker.on{opacity:1;transform:translateY(0)}

.attrs{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:7px clamp(8px,4cqi,16px);align-content:end}
.attr{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 6px}
.attr-label{font-size:7.6px;font-size:max(7.2px,2.7cqi);letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.attr-val{font-family:Anton,Impact,sans-serif;font-size:15px;font-size:5.4cqi;color:var(--bone);
  line-height:1;font-variant-numeric:tabular-nums;justify-self:end}
.attr-val.dropped{color:var(--oxide)}
.attr-bar{grid-column:1/-1;height:3px;margin-top:3px;background:rgba(232,230,225,.10);overflow:hidden}
.attr-bar i{display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left center;transform:scaleX(var(--s,0));
  transition:transform 620ms var(--ease),background var(--t-fast) linear}

.card-foot{position:relative;z-index:2;display:flex;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:6px;margin-top:2px;
  font-size:7.6px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}

/* ── builder ── */
.builder{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 18px}
.chipset{border:0;margin:0;padding:0;min-width:0}
.chipset legend{padding:0 0 4px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;inset:-2px;opacity:0;width:auto;height:auto;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;min-height:40px;padding:0 9px;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);background:rgba(232,230,225,.02);
  transition:color var(--t-fast) linear,box-shadow var(--t-fast) linear,background var(--t-fast) linear,transform var(--t-fast) var(--ease)}
.chip input:checked+span{color:#0B0D0F;background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--sodium);outline-offset:2px}
@media (hover:hover){.chip:hover span{color:var(--bone);box-shadow:inset 0 0 0 1px var(--accent)}
  .chip:hover input:checked+span{color:#0B0D0F}}
.chip input:active+span{transform:translateY(1px)}

/* ── capture ── */
.capture{position:relative;z-index:3}
/* label left, launch note right — same split as the topbar, and it costs no
   vertical space, which the hero fold does not have to spare */
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:6px;flex-wrap:wrap}
.field-label{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone)}
.field-meta{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sodium);white-space:nowrap}
.field{display:flex;box-shadow:inset 0 0 0 1px var(--line);background:rgba(232,230,225,.03);
  transition:box-shadow var(--t-fast) linear}
.field:focus-within{box-shadow:inset 0 0 0 1px var(--sodium)}
.email{flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--bone);
  font-family:inherit;font-size:16px;padding:13px 12px;letter-spacing:.02em}
.email::placeholder{color:#5C666E}
.email:focus{outline:0}
.submit{flex:0 0 auto;border:0;cursor:pointer;background:var(--sodium);color:#0B0D0F;
  font-family:Anton,Impact,sans-serif;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  padding:0 16px;min-height:48px;min-width:44px;
  transition:background var(--t-fast) linear,transform var(--t-fast) var(--ease)}
@media (hover:hover){.submit:hover{background:var(--sodium-hot)}}
.submit:active{transform:translateY(1px)}
.submit[disabled]{opacity:.55;cursor:default}
.submit.busy .submit-txt{opacity:.5}
.err{margin-top:7px;font-size:11px;letter-spacing:.06em;color:var(--oxide)}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.confirm{box-shadow:inset 0 0 0 1px var(--line);padding:16px 15px 15px;background:rgba(232,230,225,.03)}
.confirm-h{font-family:Anton,Impact,sans-serif;font-size:clamp(20px,5.4vw,26px);text-transform:uppercase;
  color:var(--bone);line-height:1.02;letter-spacing:.01em}

/* ═══════════════ SHARED SECTION FURNITURE ═══════════════ */
section{position:relative;z-index:1}
.beats,.decay,.ladder,.rarity,.final{max-width:var(--maxw);margin:0 auto;padding:74px var(--gut)}
.sec-h{display:flex;flex-direction:column;gap:8px;font-family:Anton,Impact,sans-serif;
  font-size:clamp(1.9rem,7.4vw,3rem);text-transform:uppercase;color:var(--bone);line-height:.92;letter-spacing:.005em}
.sec-idx{font-family:"Plex Mono",monospace;font-size:9.5px;letter-spacing:.24em;color:var(--sodium)}
.kicker{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.big{font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--bone);
  font-size:clamp(3rem,15.5vw,6.4rem);line-height:.84;letter-spacing:-.012em}
.big em{color:var(--sodium)}
.big.alt em{color:var(--sodium)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.reveal.in{opacity:1;transform:none}
.dashdraw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1500ms var(--ease)}
.in .dashdraw,.dashdraw.in{stroke-dashoffset:0}

/* ═══════════════ BEATS ═══════════════ */
.beat-list{margin-top:34px;display:flex;flex-direction:column;gap:52px}
.beat{position:relative;padding-left:0;max-width:52ch}
.beat-n{font-family:Anton,Impact,sans-serif;font-size:11px;letter-spacing:.14em;color:var(--sodium);display:block;margin-bottom:9px}
.beat h3{font-family:Anton,Impact,sans-serif;font-size:clamp(1.5rem,6.6vw,2.3rem);text-transform:uppercase;
  color:var(--bone);line-height:.96;margin-bottom:11px;letter-spacing:.004em}
.beat p{font-size:13.5px}
.beat-bars{display:flex;flex-direction:column;gap:7px;margin-top:18px}
/* fixed label column — an auto column makes every track a different length */
.bb{display:grid;grid-template-columns:1fr 68px;align-items:center;gap:4px 10px}
.bb i{grid-column:1;height:3px;background:rgba(232,230,225,.1);position:relative;display:block}
.bb i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--sodium);
  transform-origin:left;transform:scaleX(0);transition:transform 800ms var(--ease)}
.in .bb i::after{transform:scaleX(1)}
.bb:nth-child(2) i::after{transition-delay:120ms}
.bb:nth-child(3) i::after{transition-delay:240ms}
.beat-bars-down .bb i::after{background:var(--oxide)}
.bb b{font-family:"Plex Mono",monospace;font-size:8.5px;font-weight:400;letter-spacing:.18em;color:var(--steel)}
/* same measure as the bar tracks above: block width minus the 68px label column */
.curve-mini{margin-top:18px;width:calc(100% - 78px);max-width:340px;color:var(--sodium)}
.curve-ticks{color:var(--steel)}
.curve-mini text{fill:var(--steel);font-family:"Plex Mono",monospace;font-size:8px;letter-spacing:.16em}

/* ═══════════════ DECAY ═══════════════ */
.decay{padding-top:34px}
.decay-body{margin-top:26px;display:flex;flex-direction:column;gap:14px;max-width:46ch;font-size:13.5px}
.decay-chart{margin:38px 0 0;padding:18px 14px 14px;box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(170deg,rgba(232,230,225,.035),transparent 62%)}
.decay-chart svg{width:100%;height:auto;color:var(--sodium)}
.decay-chart .grid{color:var(--bone)}
.decay-dot{fill:var(--sodium);opacity:0;transition:opacity 300ms linear 1100ms}
.decay-dot-end{fill:var(--oxide)}
.in .decay-dot{opacity:1}
.decay-chart figcaption{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.decay-chart figcaption b{font-family:Anton,Impact,sans-serif;font-size:17px;letter-spacing:.02em;margin-right:5px}
.decay-chart b.up{color:var(--sodium)}
.decay-chart b.down{color:var(--oxide)}

/* ═══════════════ LADDER ═══════════════ */
.ladder-intro{margin-top:18px;max-width:50ch;font-size:13.5px}
.chal-grid{margin-top:28px;display:grid;gap:7px;grid-template-columns:1fr}
.chal{position:relative;padding:12px 13px 11px;box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(160deg,rgba(232,230,225,.04),transparent 58%);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease)}
@media (hover:hover){.chal:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--sodium)}}
.chal-i{font-size:8.5px;letter-spacing:.24em;color:var(--sodium)}
.chal h3{margin-top:6px;font-family:Anton,Impact,sans-serif;font-size:17px;text-transform:uppercase;
  color:var(--bone);line-height:1.02;letter-spacing:.006em}
.chal-t{display:block;margin-top:4px;font-family:"Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sodium)}
.chal-f{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.chal-f b{color:var(--bone);font-weight:400}
.ladder-note{margin-top:20px;font-size:11px;letter-spacing:.09em;color:var(--steel);max-width:52ch}

/* ═══════════════ RARITY ═══════════════ */
.rarity-lede{margin-top:20px;max-width:44ch;font-size:13.5px}
.dist{margin:36px 0 0;padding:16px 12px 12px;box-shadow:inset 0 0 0 1px var(--line)}
.dist svg{width:100%;height:auto;color:var(--sodium)}
.dist-axis{color:var(--bone)}
.dist-marks{font-family:"Plex Mono",monospace;font-size:8px;letter-spacing:.16em}
.dist-marks text{fill:var(--steel)}
.dist-marks line{stroke:var(--bone);stroke-opacity:.28}
.dist-legend{display:flex;gap:8px;margin-top:14px}
.dist-legend span{flex:1;display:flex;flex-direction:column;gap:3px;padding-top:9px;border-top:1px solid var(--line)}
.dist-legend b{font-family:Anton,Impact,sans-serif;font-size:15px;color:var(--bone);font-weight:400;letter-spacing:.02em}
.dist-legend i{font-style:normal;font-size:10px;letter-spacing:.13em;color:var(--sodium)}

.samples{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sample{position:relative;padding:13px 11px;box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(168deg,var(--asphalt-2),#08090B)}
.sample::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tier,var(--steel)),transparent)}
.s-num{display:block;font-family:Anton,Impact,sans-serif;font-size:clamp(30px,10vw,52px);line-height:.8;
  color:var(--bone);font-variant-numeric:tabular-nums}
.s-lab{display:block;margin-top:7px;font-size:7.6px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.s-rar{display:block;margin-top:3px;font-size:9px;letter-spacing:.1em;color:var(--tier,var(--sodium))}
.s-bars{display:flex;gap:2px;margin-top:10px}
.s-bars i{flex:1;height:3px;background:rgba(232,230,225,.1);position:relative}
.s-bars i.on{background:var(--tier,var(--sodium))}

/* ═══════════════ FINAL ═══════════════ */
.final{padding-bottom:70px}
.final-sub{margin-top:18px;max-width:42ch;font-size:13.5px}
.final .capture{margin-top:26px;max-width:520px}

/* ═══════════════ FOOTER ═══════════════ */
.foot{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:26px var(--gut) calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.foot p{font-size:10.5px;letter-spacing:.08em;color:var(--steel);max-width:60ch}
.foot-legal{opacity:.7}

/* ═══════════════ ≥ 600px ═══════════════ */
@media (min-width:600px){
  :root{--gut:32px}
  .chal-grid{grid-template-columns:1fr 1fr}
  .beat p,.decay-body,.ladder-intro,.rarity-lede,.final-sub{font-size:14.5px}
}

/* ═══════════════ 600–839px — tablet / narrow window ═══════════════
   Too wide for the phone layout to stretch across, too narrow for two
   columns. Cap the measure and centre it so it reads as a large phone
   rather than a broken desktop. */
@media (min-width:600px) and (max-width:839px){
  :root{--maxw:640px}
  .card-stage{padding-left:16%}
}

/* ═══════════════ ≥ 840px — desktop adaptation ═══════════════ */
@media (min-width:840px){
  :root{--gut:44px}
  body{font-size:16px}
  .hero{
    min-height:100vh;
    grid-template-columns:1fr minmax(300px,380px);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "bar   bar"
      "prop  card"
      "title card"
      "cap   builder";
    align-items:start;column-gap:32px;padding-top:20px;padding-bottom:44px;
  }
  .topbar{grid-area:bar;margin-bottom:6px}
  .prop{grid-area:prop;font-size:11.5px;padding-top:14px}
  .hero-title{grid-area:title;margin-left:-.017em;margin-bottom:0;align-self:center;
    font-size:clamp(3.4rem,8.2vw,7.8rem)}
  .card-stage{grid-area:card;padding-left:0;align-items:center;justify-content:flex-end;
    height:100%;max-height:74vh}
  .card{width:min(100%,352px,calc(70svh * .715));transition:transform 130ms linear}
  .builder{grid-area:builder;flex-direction:column;gap:16px;align-self:start;padding-top:8px}
  /* must stay scoped — the final CTA reuses .capture, and an unscoped
     grid-area leaks a phantom named column into that section's grid */
  .hero .capture{grid-area:cap;max-width:460px;align-self:end}
  .arc-hero{height:44vh;bottom:-8vh}

  .chal-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  /* Desktop had ~half the width sitting empty. Each beat becomes text left /
     its own visual right, so the space carries content — and every heading
     stays on the same left edge. */
  .beat-list{margin-top:48px;gap:56px}
  .beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:56px;align-items:center;max-width:none}
  .beat > *{grid-column:1}
  .beat p{max-width:46ch}
  /* span the three text rows explicitly — `1 / -1` resolves against explicit
     rows, and these are all implicit, so it would collapse into row 1 */
  .beat-bars,.curve-mini{grid-column:2;grid-row:1/span 3;align-self:center;margin-top:0}
  .curve-mini{max-width:none}
  .decay{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start;padding-top:44px}
  .decay .kicker{grid-column:1/-1}
  .decay-body{margin-top:6px;max-width:44ch}
  .decay-chart{grid-column:1/-1;margin-top:46px}
  .rarity-lede{margin-left:auto;max-width:40ch}
  .dist{margin-top:44px}
  .samples{margin-top:34px;gap:12px}
  .sample{padding:18px 16px}
  .final{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:34px;align-items:end;padding-block:96px}
  .final .capture{margin-top:0}
  .beats,.ladder,.rarity{padding-block:104px}
}

@media (min-width:1100px){
  .decay-chart svg,.dist svg{max-height:280px}
}

/* only pull the card over the headline once the grid is wide enough that the
   overlap lands on the card's empty left edge and not on the overall number */
@media (min-width:1120px){
  .card-stage{margin-left:-48px;margin-right:48px}
}

/* short phones — protect the fold */
@media (max-height:700px) and (max-width:839px){
  .hero-title{font-size:clamp(2.1rem,10.6vw,3rem)}
  .prop{font-size:9.5px}
  .card-stage{padding-left:26%}
  .beats,.decay,.ladder,.rarity,.final{padding-block:58px}
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .dashdraw{stroke-dashoffset:0}
  .decay-dot{opacity:1}
  .card{transform:none!important}
  .bb i::after{transform:scaleX(1)}
}