/* ---------- chapters ---------- */
.story{ position:relative; z-index:2; }
.wrap{ width:min(1180px, calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.ch{ position:relative; padding-block:clamp(56px,7vw,96px); }
.ch__head{ max-width:780px; margin-bottom:clamp(26px,3.6vw,40px); text-align:start; }
.ch__h{ margin-top:10px; font-weight:700; font-size:clamp(27px,3.1vw,40px); line-height:1.3; color:var(--ink); text-wrap:balance; }
.ch__h em{ font-style:normal; color:var(--cop); }
.ch__rule{ display:block; width:56px; height:3px; margin-top:16px; border-radius:2px; background:linear-gradient(90deg,var(--cop),var(--lav)); transform-origin:left center; }
[dir="rtl"] .ch__rule{ background:linear-gradient(270deg,var(--cop),var(--lav)); transform-origin:right center; }
.js .ch__rule{ transform:scaleX(0); transition:transform 1.1s var(--ease-out); }
.js .ch__rule.in{ transform:none; }
.lead{ margin-top:16px; max-width:46em; font-size:clamp(15.5px,1.3vw,18px); line-height:1.85; font-weight:500; color:var(--mute); }
.note{ margin-top:18px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--mute); }
.note::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cop); flex:none; }
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; }

/* ---------- boxes: one family, one alignment ---------- */
.box{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); }

/* the campaign — period chip and three stat boxes */
.about__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin-bottom:18px; font-size:14px; font-weight:500; color:var(--mute); }
.about__meta b{ font-weight:700; color:var(--ink); padding:6px 14px; border-radius:999px; background:var(--cop-100); }
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stat{ padding:22px 24px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.stat__n{ font-family:var(--display); font-size:clamp(28px,3.2vw,46px); line-height:1.05; color:var(--cop-600); }
.stat__l{ font-size:15px; font-weight:600; line-height:1.5; color:var(--ink); }

/* how to join — three equal steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.step{ padding:24px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.step__i{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--lav-50); color:var(--lav); font-family:var(--display); font-size:17px; line-height:1; }
.step__h{ margin-top:8px; font-size:clamp(17px,1.5vw,20px); font-weight:700; line-height:1.45; }
.step__p{ font-size:15px; line-height:1.75; color:var(--mute); }

/* the points ladder */
.tiers{ padding:clamp(16px,2.4vw,28px); background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.tiers__head,.tier{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); column-gap:20px; align-items:center; }
.tiers__head{ padding:0 4px 12px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--mute); }
.tiers__head span:last-child{ grid-column:3; text-align:end; }
.tier{ row-gap:6px; padding:14px 4px; border-bottom:1px solid var(--line); }
.tier:last-child{ border-bottom:0; }
.tier__s,.tier__p{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; min-width:0; }
.tier__p{ justify-content:flex-end; }
.tier .n{ font-family:var(--display); font-size:clamp(18px,1.7vw,24px); line-height:1.1; color:var(--ink); }
.tier__p .n{ color:var(--cop-600); }
.tier .u{ font-size:12px; font-weight:700; color:var(--mute); }
.tier__bar{ height:10px; border-radius:6px; background:var(--lav-50); overflow:hidden; direction:ltr; }
.tier__bar i{ display:block; height:100%; width:var(--w); border-radius:6px; background:linear-gradient(90deg,var(--cop-600),var(--cop)); transition:width 1.4s var(--ease-out); }
.js .tier__bar i{ width:0; }
.js .tiers.in .tier__bar i{ width:var(--w); }
.tier--top .tier__bar i{ background:linear-gradient(90deg,var(--cop),var(--lav)); }
.tier--top .tier__p .n{ color:var(--lav); }
.tier__plus{ grid-column:1 / -1; font-size:13px; font-weight:600; color:var(--lav); }

/* the prize — navy panel, three perks */
.panel{ border-radius:var(--r-lg); padding:clamp(24px,4vw,52px); }
.panel--navy{ background:linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); color:#fff; box-shadow:0 20px 50px rgba(12,35,65,.22); }
.panel--navy .ch__h{ color:#fff; }
.panel--navy .lead{ color:rgba(255,255,255,.8); }
.perks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.perk{ padding:22px; border-radius:var(--r-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.perk__ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:rgba(215,142,122,.16); color:var(--cop); font-family:var(--display); font-size:26px; line-height:1; }
.perk__ic svg{ width:26px; height:26px; }
.perk__h{ margin-top:6px; font-size:clamp(16.5px,1.5vw,19px); font-weight:700; line-height:1.45; color:#fff; }
.perk__p{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.74); }
.fine{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:8px; }
.fine li{ position:relative; padding-inline-start:18px; font-size:14px; line-height:1.75; color:rgba(255,255,255,.74); }
.fine li::before{ content:""; position:absolute; inset-inline-start:0; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--cop); }

/* eligible cards — two lists */
.lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.list{ padding:24px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.list h3{ font-size:14px; font-weight:700; }
.list--yes h3{ color:var(--cop-600); }
.list--no h3{ color:var(--lav); }
.list ul{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.6; font-weight:500; }
.tick{ flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:2px; border-radius:50%; font-size:11px; font-weight:700; }
.list--yes .tick{ background:var(--cop-100); color:var(--cop-600); }
.list--no .tick{ background:var(--lav-50); color:var(--lav); }

/* terms — key facts on top, then the clauses in three collapsible groups (closed to start) */
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.fact{ padding:16px 18px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.fact__l{ font-size:12px; font-weight:600; color:var(--mute); }
.fact__v{ font-size:15px; font-weight:700; line-height:1.55; color:var(--ink); }
.tgroups{ display:grid; gap:12px; }
.tgroup{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.tgroup__head{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:18px 22px; transition:background .3s; }
.tgroup__head::-webkit-details-marker{ display:none; }
.tgroup__head:hover{ background:var(--cop-50); }
.tgroup__head:focus-visible{ outline:3px solid var(--cop); outline-offset:-3px; border-radius:var(--r-lg); }
.tgroup[open] .tgroup__head{ border-bottom:1px solid var(--line); }
.tgroup__chev{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lav-50); color:var(--lav); }
.tgroup__chev svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.tgroup[open] .tgroup__chev svg{ transform:rotate(180deg); }
.tgroup[open] .titems{ animation:tgroupIn .35s var(--ease-out); }
@keyframes tgroupIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.tgroup__ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--lav-50); color:var(--lav); }
.tgroup:nth-child(2) .tgroup__ic{ background:var(--cop-100); color:var(--cop-600); }
.tgroup:nth-child(3) .tgroup__ic{ background:rgba(12,35,65,.08); color:var(--blue); }
.tgroup__ic svg{ width:22px; height:22px; }
.tgroup__h{ font-size:17px; font-weight:700; line-height:1.4; }
.tgroup__range{ padding:4px 10px; border-radius:999px; background:var(--paper); font-size:12px; font-weight:700; color:var(--mute); white-space:nowrap; }
.titems{ list-style:none; margin:0; padding:4px 22px 14px; }
.titem{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.titem:last-child{ border-bottom:0; }
.titem__n{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); font-family:var(--display); font-size:14px; color:var(--cop-600); }
.titem__t{ padding-top:3px; font-size:15px; line-height:1.85; color:var(--ink); }
.pkg{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pkg li{ padding:10px 12px; border-radius:12px; background:var(--cop-50); box-shadow:inset 0 0 0 1px rgba(215,142,122,.25); font-size:13.5px; font-weight:600; line-height:1.6; }
.tbl-wrap{ margin:12px 0 4px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th,.tbl td{ padding:11px 14px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line); }
.tbl th{ font-size:12px; font-weight:700; color:var(--mute); background:var(--cop-50); }
.tbl td{ font-weight:600; color:var(--ink); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl .plus{ display:block; margin-top:4px; font-size:12px; font-weight:600; color:var(--lav); }
@media (max-width:900px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .facts{ gap:8px; }
  .fact{ padding:12px 14px; }
  .fact__v{ font-size:13.5px; }
  .tgroup__head{ grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:14px 16px; }
  .tgroup__range{ display:none; }
  .tgroup__chev{ width:28px; height:28px; }
  .tgroup__ic{ width:36px; height:36px; }
  .tgroup__h{ font-size:15.5px; }
  .titems{ padding:2px 16px 10px; }
  .titem{ grid-template-columns:26px minmax(0,1fr); gap:10px; padding:12px 0; }
  .titem__n{ width:26px; height:26px; font-size:12px; }
  .titem__t{ padding-top:1px; font-size:14px; line-height:1.8; }
  .pkg{ grid-template-columns:1fr; }
}

/* closing banner — words at the start, the button at the end */
.closing{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px 40px; }
.closing__text{ max-width:640px; }
.closing .ch__h{ margin-top:8px; color:#fff; }
.closing .lead{ margin-top:10px; color:rgba(255,255,255,.82); }

@media (max-width:760px){
  .stats{ gap:10px; }
  .stat{ padding:14px 12px; border-radius:var(--r-md); }
  .stat__n{ font-size:22px; }
  .stat__l{ font-size:12px; }
  .steps{ grid-template-columns:1fr; gap:12px; }
  .step{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:2px; padding:18px; }
  .step__i{ grid-row:span 2; }
  .step__h{ margin-top:0; }
  .tiers__head,.tier{ grid-template-columns:1fr 1fr; }
  .tiers__head span:last-child{ grid-column:2; }
  .tier__bar{ grid-column:1 / -1; order:3; }
  .tier__plus{ order:4; }
  .perks{ grid-template-columns:1fr; gap:10px; }
  .perk{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:2px; padding:16px; }
  .perk__ic{ grid-row:span 2; width:46px; height:46px; font-size:22px; }
  .perk__h{ margin-top:0; }
  .lists{ grid-template-columns:1fr; gap:12px; }
  .list{ padding:20px; }
  .closing{ flex-direction:column; align-items:flex-start; }
}

/* ---------- the race — a portrait stage beside its meters ---------- */
.race{ padding-bottom:clamp(56px,7vw,96px); }
.race .ch__head{ margin-bottom:22px; }
.race__track{ position:relative; }
.race__pin{ position:sticky; top:16px; }                 /* the script sets the real centring offset */
.race--inline .race__pin{ position:static; }
.race__grid{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
/* the stage sits on the left in both languages; the words beside it keep the page's direction */
.race__grid{ direction:ltr; }
[dir="rtl"] .race__grid > *{ direction:rtl; }
.race__stage{
  position:relative; width:min(420px, 38vw); height:min(680px, 88vh);
  border-radius:30px; overflow:hidden; isolation:isolate;
  background:#fcf4f1;
  box-shadow:0 40px 80px -30px rgba(12,35,65,.35), 0 0 0 1px rgba(12,35,65,.06);
}
@supports (aspect-ratio: 1){
  .race__stage{ height:auto; aspect-ratio:420 / 680; max-height:max(360px, calc(100vh - 120px)); }
}
#road{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* boards: a spend pill and a points pill at the kerbs */
.gates{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.pill{
  position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; gap:6px;
  padding-block:7px; padding-inline:10px 12px; border-radius:999px;
  background:#fff; color:var(--ink); box-shadow:0 8px 18px rgba(12,35,65,.18);
  white-space:nowrap; opacity:0; transform-origin:50% 100%; will-change:transform,opacity;
  transition:background .35s, color .35s, box-shadow .35s;
}
.pill__ic{ flex:none; width:14px; height:14px; color:var(--cop-600); }
.pill--pts .pill__ic{ color:var(--lav); }
.pill .n{ font-family:var(--display); font-size:17px; line-height:1; }
.pill .u{ font-size:11px; font-weight:700; color:var(--mute); }
.gate--final .pill{ box-shadow:0 0 0 2px var(--lav), 0 8px 18px rgba(12,35,65,.18); }
.gate.lit .pill--spend{ background:var(--cop); color:#fff; box-shadow:0 10px 24px rgba(215,142,122,.5); }
.gate.lit .pill--pts{ background:var(--lav); color:#fff; box-shadow:0 10px 24px rgba(131,127,216,.5); }
.gate.lit .pill .u,.gate.lit .pill__ic{ color:rgba(255,255,255,.92); }

/* +points toast above the car */
.toast{ position:absolute; left:0; top:0; z-index:4; padding:6px 12px; border-radius:999px; background:var(--lav); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; box-shadow:0 8px 20px rgba(131,127,216,.4); }
.toast .n{ font-family:var(--display); font-weight:400; font-size:15px; }
.toast.show{ animation:toast 1.4s var(--ease-out) forwards; }
@keyframes toast{ 0%{ opacity:0; translate:0 10px; } 15%{ opacity:1; translate:0 0; } 70%{ opacity:1; translate:0 -14px; } 100%{ opacity:0; translate:0 -26px; } }

/* five start lights, then lights out */
.lights{ position:absolute; top:4.5%; left:50%; z-index:4; display:flex; gap:7px; padding:8px 12px; border-radius:999px; background:var(--blue); box-shadow:0 10px 24px rgba(12,35,65,.3); transform:translateX(-50%); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.lights i{ width:13px; height:13px; border-radius:50%; background:#26395a; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); transition:background .12s, box-shadow .12s; }
.lights i.on{ background:#e0563f; box-shadow:0 0 12px 2px rgba(224,86,63,.7); }
.lights.gone{ opacity:0; transform:translate(-50%,-160%); }

.race__hint{ position:absolute; bottom:3.5%; left:50%; z-index:4; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.95); box-shadow:var(--shadow); font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; transition:opacity .4s; }
.race__hint i{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--lav-50); color:var(--lav); font-style:normal; font-size:12px; animation:nudge 1.6s var(--ease-out) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
.race--auto .race__hint{ display:none; }

.flag{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:repeating-conic-gradient(rgba(215,142,122,.24) 0% 25%, rgba(215,142,122,0) 0% 50%) 50% 0 / 34px 34px; -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 34%); mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 34%); }
.rail{ position:absolute; left:0; right:0; bottom:0; z-index:5; height:3px; background:rgba(12,35,65,.08); direction:ltr; }
.rail span{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cop),var(--lav)); }

/* beside the stage: meters and the live tier ladder, then the final card in their place */
.race__side{ min-width:0; }
.race__slot{ display:grid; }
.race__live,.race__final--side{ grid-area:1 / 1; }
.meters{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.meter{ min-width:0; padding:14px 18px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; }
.meter__l{ font-size:12px; font-weight:600; color:var(--mute); }
.meter__v{ display:flex; align-items:baseline; gap:6px; }
.meter__v .n{ font-family:var(--display); font-size:clamp(24px,2.4vw,34px); line-height:1.05; color:var(--ink); }
.meter__v .u{ font-size:12px; font-weight:700; color:var(--cop-600); }
.meter--pts .meter__v .n{ color:var(--cop-600); }
.meter--pts .meter__v .u{ color:var(--lav); }
[data-pop].pop{ animation:pop .55s var(--ease-out); }
@keyframes pop{ 0%{ transform:scale(1); } 30%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.ladder-head{ display:flex; justify-content:space-between; gap:12px; margin:20px 0 8px; padding-inline:16px; font-size:12px; font-weight:700; color:var(--mute); }
/* the car climbs, so the ladder does too: the first tier at the bottom */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column-reverse; gap:8px; }
.chip5{ display:grid; grid-template-columns:minmax(0,1fr) minmax(40px,1.1fr) minmax(0,1fr); align-items:center; gap:14px; padding:12px 16px; border-radius:14px; background:#fff; box-shadow:var(--shadow); transition:background .4s, box-shadow .4s; }
.chip5__s,.chip5__p{ display:flex; align-items:baseline; gap:5px; min-width:0; white-space:nowrap; }
.chip5__p{ justify-content:flex-end; }
.chip5__s .n,.chip5__p .n{ font-family:var(--display); font-size:17px; line-height:1.1; color:var(--ink); }
.chip5__p .n{ color:var(--mute); }
.chip5__s .u,.chip5__p .u{ font-size:11px; font-weight:700; color:var(--mute); }
.chip5__bar{ height:6px; border-radius:4px; background:var(--lav-50); overflow:hidden; }
.chip5__bar i{ display:block; width:0; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--cop-600),var(--cop)); }
[dir="rtl"] .chip5__bar i{ background:linear-gradient(270deg,var(--cop-600),var(--cop)); }
.chip5.next{ box-shadow:0 0 0 1.5px var(--lav-100), var(--shadow); }
.chip5.on{ background:var(--cop-50); box-shadow:0 0 0 1.5px rgba(215,142,122,.55); }
.chip5.on .chip5__p .n{ color:var(--cop-600); }
.chip5--top .chip5__bar i{ background:linear-gradient(90deg,var(--cop),var(--lav)); }
[dir="rtl"] .chip5--top .chip5__bar i{ background:linear-gradient(270deg,var(--cop),var(--lav)); }
.chip5--top.on{ box-shadow:0 0 0 1.5px var(--lav); }
.chip5--top.on .chip5__p .n{ color:var(--lav); }

.race__final{ opacity:0; visibility:hidden; text-align:start; }
.race__final--side{ align-self:center; }
.race__final--stage{ display:none; position:absolute; z-index:5; inset:10px; overflow:auto; padding:18px; border-radius:22px; background:rgba(255,255,255,.96); box-shadow:var(--shadow-2); }
.race__final-h{ margin-top:8px; font-family:var(--display); font-weight:400; font-size:clamp(28px,3vw,44px); line-height:1.12; color:var(--ink); text-wrap:balance; }
.race__final-h em{ font-style:normal; color:var(--cop-600); }
.race__final-p{ margin-top:12px; max-width:34em; font-size:16px; line-height:1.8; font-weight:500; color:var(--mute); }
.final__stats{ display:flex; flex-wrap:wrap; gap:12px clamp(18px,3vw,36px); margin-top:18px; }
.final__stats > div{ display:flex; flex-direction:column; align-items:flex-start; }
.final__stats .n{ font-family:var(--display); font-size:clamp(24px,2.6vw,34px); line-height:1.1; color:var(--ink); }
.final__stats .l{ margin-top:4px; font-size:13px; font-weight:600; color:var(--mute); }
.race__final-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.race__replay{ appearance:none; cursor:pointer; padding:10px 18px; border-radius:12px; border:2px solid var(--ink); background:transparent; color:var(--ink); font:700 14px var(--sans); }
.race__replay[hidden]{ display:none; }

@media (max-width:760px){
  .race__grid{ grid-template-columns:1fr; gap:10px; }
  .race__stage{ width:100%; height:clamp(380px, 120vw, 480px); border-radius:24px; }
  @supports (aspect-ratio: 1){ .race__stage{ height:auto; aspect-ratio:350 / 430; max-height:none; } }
  .race__final--stage{ display:block; }
  .race__final--side{ display:none; }
  .ladder-head{ display:none; }
  .meters{ gap:8px; }
  .meter{ padding:10px 12px; gap:4px; }
  .meter__v .n{ font-size:21px; }
  .chips{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-top:8px; padding:6px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow); }
  .chip5{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:10px; background:var(--paper); box-shadow:none; }
  .chip5__bar{ align-self:stretch; height:4px; }
  .chip5__s .n{ font-size:11.5px; }
  .chip5__s .u,.chip5 .plus,.chip5__p{ display:none; }
  .pill{ gap:4px; padding-block:5px; padding-inline:8px 10px; }
  .pill .n{ font-size:14px; } .pill .u{ font-size:10px; } .pill__ic{ width:12px; height:12px; }
  .lights{ top:3.5%; gap:6px; padding:6px 10px; } .lights i{ width:10px; height:10px; }
  .race__hint{ font-size:12px; padding:6px 12px; }
  .race__final-h{ font-size:22px; }
  .race__final-p{ margin-top:8px; font-size:13px; line-height:1.7; }
  .final__stats{ margin-top:10px; } .final__stats .n{ font-size:20px; } .final__stats .l{ font-size:11px; }
  .race__final-actions{ margin-top:12px; }
  .race__final .cta{ padding:10px 18px; font-size:13px; }
}

/* ---------- ambient ---------- */
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.grain--page{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0.1 0 0 0 0 0.25 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size:180px 180px; }
.spine-rail{ position:fixed; inset-inline-end:18px; top:0; bottom:0; z-index:40; width:2px; background:rgba(12,35,65,.08); pointer-events:none; transition:opacity .5s; }
.spine-fill{ width:100%; height:0%; background:linear-gradient(180deg,var(--cop),var(--lav)); }
.spine-bead{ position:fixed; inset-inline-end:14px; top:0; z-index:41; width:10px; height:10px; border-radius:50%; background:var(--cop); box-shadow:0 0 0 3px rgba(215,142,122,.25); transform:translateY(-50%); pointer-events:none; transition:opacity .5s; }
.spine-tag{ position:fixed; inset-inline-end:34px; top:0; z-index:41; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; color:var(--mute); white-space:nowrap; transform:translateY(-50%); opacity:0; pointer-events:none; transition:opacity .5s; }
.spine-tag.on{ opacity:1; }
.spine-tag .tendril{ order:2; width:18px; height:2px; background:rgba(12,35,65,.2); }
.in-hero .spine-rail,.in-hero .spine-bead,.in-hero .spine-tag{ opacity:0; }
@media (max-width:1000px){ .spine-rail,.spine-bead,.spine-tag{ display:none; } }