:root {
  --canvas: #E6E8EA;
  --light: #F7F8F9;
  --surface: #F3F4F5;
  --ink: #101215;
  --ink-soft: #4C525A;
  --line: rgba(16, 18, 21, 0.14);
  --accent: #2B3BFF;
  --accent-press: #1E2BE0;
  --accent-ink: #FFFFFF;

  /* one family, three widths: display words, headings, UI numbers */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 125%;
  --w-head: 115%;
  --w-ui: 110%;

  /* one type scale for every section */
  --t-h2: clamp(36px, 4vw, 64px);
  --t-lede: clamp(22px, 2.1vw, 32px);
  --t-body: clamp(16px, 1.1vw, 18px);
  --t-num: clamp(18px, 1.5vw, 24px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: clamp(16px, 4vw, 64px);
  --copy-w: min(30vw, 440px);
  --r: 8px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: rgba(16,18,21,.35) transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--f-text); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; caret-color: var(--accent);
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p, h1, h2, dl, dd { margin: 0; }

/* the real adidas bars, cut from the supplied logo and tinted with the text colour */
.logo {
  display: inline-block; flex: none; width: 1.6em; height: 1em; vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: url("adidas-mark.png") center / contain no-repeat;
  mask: url("adidas-mark.png") center / contain no-repeat;
}
/* every small label on the page uses this one style */
.mono { font-family: var(--f-mono); font-stretch: var(--w-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 30;
  padding: 10px 14px; background: var(--ink); color: var(--light); border-radius: var(--r);
  transform: translateY(-160%); transition: transform 180ms var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* studio light behind everything, with a faint cobalt cast so the page isn't grey on grey */
.light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 52% 48%, var(--light) 0%, rgba(247,248,249,0) 70%),
    radial-gradient(45% 40% at 88% 8%, rgba(43,59,255,.07) 0%, rgba(43,59,255,0) 70%),
    radial-gradient(50% 45% at 8% 96%, rgba(43,59,255,.08) 0%, rgba(43,59,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(16,18,21,.045) 100%);
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gutter);
}
/* soft fade so copy doesn't collide with the nav as it scrolls under */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(230,232,234,.95) 0%, rgba(230,232,234,.86) 62%, rgba(230,232,234,0) 100%);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__lockup { width: auto; height: 32px; }
.brand__divider { width: 1px; height: 24px; background: var(--line); }
.brand__word { font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand__model { margin-left: -4px; font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ink-soft); }
.nav__links { display: flex; gap: 6px; }
.nav__links a {
  position: relative; padding: 10px 12px; border-radius: var(--r);
  font-family: var(--f-mono); font-stretch: var(--w-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  transition: color 160ms ease, background-color 160ms ease;
}
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); background: rgba(16,18,21,.05); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  height: 40px; padding-inline: 18px; border-radius: var(--r);
  font-stretch: var(--w-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.btn .logo { width: 19px; height: 11px; margin-right: 9px; }
.btn--solid { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(30,43,224,.55); }
.btn--solid:active { transform: scale(0.97); background: var(--accent-press); }
@media (hover: hover) and (pointer: fine) { .btn--solid:hover { background: var(--accent-press); } }
.btn--lg { height: 52px; padding-inline: 26px; font-size: 16px; }

/* ---------- shoe, callouts, odometer ---------- */
.shoe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-out); }
.shoe.is-ready { opacity: 1; }
main { position: relative; z-index: 1; }

/* one panel style: callouts, odometer */
.callout__label, .hud {
  background: rgba(243,244,245,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px -16px rgba(16,18,21,.4);
  border-radius: var(--r);
}

.callouts { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.callout { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.callout__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(43,59,255,.16); }
.callout__line { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.callout__line line { stroke: var(--ink); stroke-width: 1; }
.callout__label { position: absolute; display: grid; gap: 2px; white-space: nowrap; padding: 8px 12px; }
.callout__label .mono { color: var(--ink-soft); font-size: 10px; }
.callout__label b { font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 750; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.hud {
  position: fixed; right: var(--gutter); bottom: 22px; z-index: 21;
  display: flex; align-items: center; gap: 18px; padding: 10px 14px;
}
.hud__logo { width: 24px; height: 14px; color: var(--accent); }
.hud__cell { display: grid; gap: 1px; }
.hud__k { font-size: 10px; color: var(--ink-soft); }
.hud__v { font-family: var(--f-display); font-stretch: var(--w-ui); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hud__v small { margin-left: 3px; font-size: 10.5px; color: var(--ink-soft); }
.hud__trace { width: 96px; height: 28px; }

.loader { position: fixed; left: 50%; bottom: 26px; z-index: 19; translate: -50% 0; color: var(--ink-soft); transition: opacity 300ms ease; }
.loader .logo { width: 16px; height: 9px; margin-right: 8px; color: var(--accent); }
.loader.is-done { opacity: 0; }

/* ---------- shared section pieces ---------- */
.sec { position: relative; }
.spot { position: absolute; pointer-events: none; }
[data-reveal] { will-change: opacity, transform; }

/* giant words: one treatment everywhere. Heavy italic, outline trails behind it that stretch when you scroll fast. */
.word {
  position: absolute; margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-stretch: var(--w-display); font-weight: 900; font-style: italic;
  font-size: clamp(72px, 17.5vw, 340px); line-height: 0.8; letter-spacing: -0.05em; word-spacing: 0.16em;
  text-transform: uppercase; translate: -50% -50%; will-change: transform;
}
.word--speed { --spread: 0.04; --echo: var(--ink); color: var(--ink); }
.word--speed::before, .word--speed::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px var(--echo);
}
.word--speed::before { transform: translate3d(calc(var(--spread) * -1em), 0, 0); opacity: 0.45; }
.word--speed::after { transform: translate3d(calc(var(--spread) * -2em), 0, 0); opacity: 0.2; }
/* chapter words sit back as pale tint; STEP IN keeps the full ink as the finale */
.word--ghost { color: rgba(16,18,21,.08); --echo: rgba(16,18,21,.55); }
.word__dot { color: var(--accent); }

/* section label: a big number, a rule, then the part of the shoe this section is about */
.kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); margin-bottom: 18px; font-size: 13px; }
.kicker::before { content: ""; order: 1; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.kicker__num { order: 0; font-family: var(--f-display); font-stretch: var(--w-display); font-weight: 900; font-style: italic; font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
.kicker > :not(.kicker__num) { order: 2; }
/* labels without a number (YOUR RUN) keep the rule in front */
.kicker:not(:has(.kicker__num))::before { order: -1; }
.lede { font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 700; font-size: var(--t-lede); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.note { margin-top: 12px; color: var(--ink-soft); max-width: 44ch; line-height: 1.6; }
.h2 {
  font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 800;
  font-size: var(--t-h2); line-height: 0.96; letter-spacing: -0.035em;
  text-wrap: balance; margin-bottom: 20px;
}
.body { font-size: var(--t-body); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; }

/* copy blocks alternate left and right, always vertically centred, always the same width */
/* centred with flex, not a transform, so the reveal math measures where the text really sits */
.copy, .sheet { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.copy { width: var(--copy-w); align-items: flex-start; }
.copy--left { left: var(--gutter); }
.copy--right { right: var(--gutter); }

/* ---------- hero ---------- */
.hero { height: 100vh; height: 100svh; min-height: 620px; }
/* a soft cobalt light behind the shoe */
.hero::before {
  content: ""; position: absolute; left: 8%; top: 18%; width: 84%; height: 76%; pointer-events: none;
  /* a second pool on the left so the light wraps the whole shoe, not just its right side.
     Both pools fade to nothing well inside the box, so no hard edge shows. */
  background:
    radial-gradient(30% 38% at 36% 58%, rgba(43,59,255,.22), rgba(43,59,255,.07) 55%, rgba(43,59,255,0)),
    radial-gradient(36% 42% at 52% 55%, rgba(43,59,255,.27), rgba(43,59,255,.09) 55%, rgba(43,59,255,0));
}
.hero__title { position: absolute; inset: 0; margin: 0; font-family: var(--f-display); text-transform: uppercase; color: var(--ink); }
/* adidas lockup, then ADIZERO as the big word, EVO SL smaller and tucked under its right edge */
.hero__stack { position: absolute; left: 50%; top: 10%; translate: -50% 0; display: grid; justify-items: center; will-change: transform; }
.hero__lockup { width: clamp(56px, 6vw, 108px); height: auto; aspect-ratio: 208 / 174; fill: var(--ink); overflow: visible; margin-bottom: 2.4vh; text-transform: none; }
.hero__lockup--img { aspect-ratio: auto; object-fit: contain; }
.hero__brand {
  white-space: nowrap; font-stretch: var(--w-display); font-weight: 850;
  font-size: clamp(60px, 13.4vw, 264px); line-height: 0.8; letter-spacing: -0.045em;
}
.hero__model {
  justify-self: end; margin-top: 1.2vh; white-space: nowrap; font-stretch: var(--w-display); font-weight: 850;
  font-size: clamp(30px, 6vw, 118px); line-height: 0.8; letter-spacing: -0.04em;
}
.hero .spot { left: 28%; top: 37%; width: 44%; height: 36%; }
.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__l { width: min(40vw, 520px); }
.facts { display: grid; gap: 14px; text-align: right; margin-bottom: 70px; }
.facts dt { color: var(--ink-soft); font-size: 10px; }
.facts dd { font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 750; font-size: var(--t-num); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- foam: copy left, shoe right ---------- */
/* every chapter holds on screen while the shoe turns, then moves on */
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.act--foam { height: 170vh; }
.act--foam .word { left: 64%; top: 50%; font-size: clamp(72px, 15vw, 290px); }
.act--foam .spot { left: 40%; top: 30%; width: 45%; height: 42%; }

/* ---------- grip: shoe left, copy right, data band below ---------- */
.act--grip { height: 160vh; }
.act--grip .word { left: 36%; top: 50%; font-size: clamp(72px, 17vw, 330px); }
.act--grip .spot { left: 12%; top: 28%; width: 46%; height: 42%; }
.ticker { position: absolute; left: 0; right: 0; bottom: calc(10vh + 46px); overflow: hidden; border-top: 1px solid var(--line); padding-block: 14px; }
.ticker--b { bottom: 10vh; border-bottom: 1px solid var(--line); }
.ticker__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; font-size: 12px; color: var(--ink); }
.ticker__track > i { font-style: normal; display: inline-flex; padding-inline: 22px; color: var(--accent); }
.ticker__track i .logo { width: 17px; height: 10px; }
.ticker--b .ticker__track { color: var(--ink-soft); }
.ticker--b .ticker__track > i { color: var(--ink-soft); }

/* ---------- upper: copy left, shoe right ---------- */
.act--upper { height: 160vh; }
.act--upper .word { left: 66%; top: 50%; font-size: clamp(72px, 17vw, 330px); }
.act--upper .spot { left: 44%; top: 32%; width: 44%; height: 40%; }

/* ---------- specs: shoe left, sheet right ---------- */
.act--specs { height: 170vh; }
.act--specs .spot { left: 10%; top: 30%; width: 41%; height: 38%; }
.graph { position: absolute; left: var(--gutter); top: 64%; width: 46%; height: 22%; border-bottom: 1px solid var(--line); }
.graph__label { position: absolute; left: var(--gutter); top: calc(64% - 30px); color: var(--ink-soft); }
.graph__now { color: var(--accent); }
.sheet { right: var(--gutter); width: min(38vw, 520px); }
.sheet .kicker { align-self: flex-start; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 1fr auto minmax(96px, 34%); align-items: center; gap: 16px; padding-block: 9px; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row dt { font-size: 14px; color: var(--ink-soft); }
.row dd { font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 700; font-size: var(--t-num); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.row__note { color: var(--ink-soft); font-size: 10px; text-align: right; }
.bar { position: relative; height: 4px; border-radius: 2px; background: rgba(16,18,21,.08); overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--accent); border-radius: 2px; transform-origin: left center; transform: scaleX(0); }

/* ---------- step in + finish ---------- */
.act--step { height: 540vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.act--step .word { left: 50%; top: 61%; }
.act--step .spot { left: 4%; top: 29%; width: 32%; height: 40%; }
/* the finish tucks up under STEP IN. instead of waiting a screen below it */
.act--finish { height: 22vh; }
.finish { position: absolute; left: var(--gutter); top: -16vh; width: var(--copy-w); }
.finish__line { font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 800; font-size: clamp(28px, 2.8vw, 44px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.finish__time { color: var(--accent); font-variant-numeric: tabular-nums; }
.finish__sub { margin-top: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.finish__cta { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.price { font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 750; font-size: var(--t-num); }
.credit { margin-top: 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.credit .logo { width: 16px; height: 9px; margin-right: 8px; vertical-align: -1px; }

.noscript { position: fixed; left: 50%; bottom: 40px; translate: -50% 0; z-index: 40; padding: 12px 16px; background: var(--ink); color: var(--light); border-radius: var(--r); }

/* ---------- phone / portrait ---------- */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  :root { --nav-h: 56px; --t-h2: clamp(30px, 8.6vw, 40px); --t-body: 15.5px; --t-num: 16px; }
  .nav__links { display: none; }
  .nav::before { bottom: -84px; background: linear-gradient(180deg, rgba(230,232,234,.97) 0%, rgba(230,232,234,.92) 72%, rgba(230,232,234,0) 100%); }
  .nav .btn { height: 36px; padding-inline: 12px; font-size: 13px; }
  .brand { gap: 9px; }
  .brand__word, .brand__model { font-size: 16px; }
  .brand__lockup { height: 26px; }
  .brand__divider { height: 20px; }

  .hud { left: 16px; right: 16px; top: calc(var(--nav-h) + 2px); bottom: auto; justify-content: space-between; gap: 10px; padding: 8px 12px; }
  .hud__logo { display: none; }
  .hud__v { font-size: 13px; }
  .hud__trace { width: 64px; height: 22px; }
  .loader { bottom: 50%; }

  .hero::before { left: 0; top: 28%; width: 100%; height: 60%; }
  .hero__stack { top: 15%; }
  .hero__lockup { width: 62px; margin-bottom: 18px; }
  .hero__brand { font-size: 13.4vw; }
  .hero__model { font-size: 7.4vw; margin-top: 8px; }
  .hero .spot { left: 5%; top: 44%; width: 90%; height: 28%; }
  .hero__foot { bottom: 18px; left: 16px; right: 16px; }
  .hero__l { width: auto; }
  .facts { display: none; }
  .lede { font-size: 24px; }

  .act { height: auto; padding: 128px 16px 56px; display: flex; flex-direction: column; }
  /* phones stack chapters in flow instead of holding them */
  .act:not(.act--step) > .pin { position: static; height: auto; display: contents; }
  .copy, .copy--left, .copy--right, .sheet, .finish {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; translate: none;
  }
  .act .spot { position: relative; left: auto; top: auto; width: 92%; height: 58vw; margin: 28px auto; order: 2; }
  .copy, .sheet { order: 1; }
  .word { font-size: 24vw; }
  .act--foam .word, .act--grip .word, .act--upper .word { left: 50%; top: 66%; }

  .act--grip { padding-bottom: 150px; }
  .ticker { bottom: 84px; }
  .ticker--b { bottom: 38px; }

  .act--specs .graph { left: 16px; right: 16px; width: auto; top: auto; bottom: 24px; height: 90px; }
  .act--specs { padding-bottom: 150px; }
  .graph__label { left: 16px; top: auto; bottom: 122px; }
  .sheet { order: 3; }
  .row { padding-block: 7px; gap: 10px; grid-template-columns: 1fr auto 72px; }
  .row dt { font-size: 13px; }

  .act--step { height: 490vh; padding: 0; display: block; }
  .act--step .spot { position: absolute; left: 4%; top: 30%; width: 62%; height: 26%; margin: 0; }
  .act--step .word { left: 50%; top: 55%; font-size: 19vw; }
  .act--finish { min-height: 0; padding: 0 16px 28px; justify-content: flex-start; }
  .act--finish .finish { margin-top: -34vh; }
  .finish { order: 3; }
  .callout--wide { display: none; }
  .callout__label b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .shoe { transition: none; }
  .btn { transition: background-color 160ms ease; }
}

/* =====================================================================
   TRIAL: editorial polish from the review notes.
   Previous version is saved in _work/backup-before-agent/.
   ===================================================================== */
:root { --t-h2: clamp(40px, 4.1vw, 80px); --t-body: clamp(15px, 1vw, 17px); --copy-w: min(31vw, 470px); }
/* copy blocks fade with the shoe (see app.js focus); no transition so they track the scroll exactly */
.pin .copy, .pin .sheet { will-change: opacity; }

/* big uppercase headlines, short narrow body */
.h2 { font-stretch: 100%; font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.04em; margin-bottom: 22px; }
.body { max-width: 34ch; }

/* numbers as objects: big figure, small label under it */
.stats { display: flex; gap: clamp(28px, 3.4vw, 56px); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; gap: 8px; }
.stat dd, .specgrid dd, .big b {
  margin: 0; font-family: var(--f-display); font-stretch: var(--w-display); font-weight: 900;
  line-height: 0.85; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat dd { font-size: clamp(34px, 3.4vw, 60px); }
.stat dt, .specgrid dt { color: var(--ink-soft); font-size: 10px; }

/* one big figure per chapter */
.big { display: flex; align-items: flex-end; gap: 14px; margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.big b { font-size: clamp(64px, 6vw, 110px); color: var(--accent); }
.big span { color: var(--ink-soft); font-size: 10px; line-height: 1.5; padding-bottom: 6px; }

/* spec sheet as a grid of figures, hairlines only */
.specgrid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; margin: 0; border-top: 1px solid var(--line); }
.specgrid > div { display: flex; flex-direction: column-reverse; gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.specgrid dd { font-size: clamp(30px, 2.9vw, 52px); }
.specgrid--words { border-top: 0; }
.specgrid--words dd { font-stretch: var(--w-ui); font-weight: 800; font-size: clamp(16px, 1.3vw, 21px); letter-spacing: -0.015em; line-height: 1.1; }

/* shoe callouts: plain type, no panels */
.callout__label { background: none; box-shadow: none; border-radius: 0; padding: 0; }

/* nav: the current chapter reads in the accent */
.nav__links a[aria-current="true"] { color: var(--accent); }

/* ---------- the kilometre rail ---------- */
.rail { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 34px; z-index: 21; --p: 0; pointer-events: none; }
.rail__track { position: relative; height: 2px; border-radius: 2px; background: rgba(16,18,21,.12); }
.rail__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p)); }
.rail__mark {
  position: absolute; top: 50%; left: var(--at, 0%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--canvas); box-shadow: inset 0 0 0 1.5px rgba(16,18,21,.35);
  pointer-events: auto; text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease;
}
.rail__mark span {
  position: absolute; top: 14px; left: 50%; translate: -50% 0; white-space: nowrap;
  font-family: var(--f-mono); font-stretch: var(--w-ui); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 160ms ease;
}
.rail__mark em { font-style: normal; }
.rail__mark.is-passed { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rail__mark.is-current span { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .rail__mark:hover span { color: var(--ink); } }
.rail__dot { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(43,59,255,.16); }
.rail__bubble { position: absolute; bottom: 14px; left: clamp(0px, calc(var(--p) * 100% - 56px), calc(100% - 160px)); margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.rail__bubble b { font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rail__pace { color: var(--ink-soft); font-size: 10px; }
.rail__end { position: absolute; top: 12px; color: var(--ink-soft); font-size: 10px; }
.rail__end--a { left: 0; }
.rail__end--b { right: 0; }

/* bigger shoe and more air on wide screens */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .act--foam .spot { left: 44%; top: 26%; width: 48%; height: 44%; }
  .act--grip .spot { left: 3%; top: 24%; width: 48%; height: 44%; }
  .act--upper .spot { left: 45%; top: 28%; width: 46%; height: 42%; }
  .act--specs .spot { left: 4%; top: 18%; width: 38%; height: 40%; }
  .act--specs .graph { top: 68%; height: 17%; width: 44%; }
  .act--specs .graph__label { top: calc(68% - 30px); }
  .ticker { bottom: calc(10.5vh + 46px); }
  .ticker--b { bottom: 10.5vh; }
  .hero__foot { bottom: 96px; }
  .sheet { width: min(40vw, 580px); }
}

@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .rail { left: 16px; right: 16px; bottom: 22px; }
  .rail__mark em, .rail__pace, .rail__end { display: none; }
  .hero .spot { top: 40%; height: 26%; }
  .hero__foot { bottom: 66px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .lede { font-size: 22px; }
  .stats { gap: 28px; }
  .stat dd { font-size: 30px; }
  .h2 { font-size: clamp(34px, 10vw, 46px); }
  .big b { font-size: 56px; }
  .specgrid { column-gap: 14px; }
  .specgrid dd { font-size: 26px; }
  .specgrid > div { padding: 12px 0 14px; }
  .specgrid--words { grid-template-columns: 1fr 1fr; }
  .act--specs { padding-bottom: 170px; }
}

/* =====================================================================
   TRIAL 2: review round 2. Previous version: _work/backup-agent-round1/
   ===================================================================== */
@keyframes lift { from { opacity: 0; transform: translate3d(0, 28px, 0); } }

/* loader: a line that fills, no percentage */
.loader { bottom: 104px; display: grid; justify-items: center; gap: 10px; }
.loader__text { color: var(--ink-soft); font-size: 10px; }
.loader__text i { font-style: normal; color: var(--accent); padding-inline: 8px; }
.loader__bar { position: relative; display: block; width: 140px; height: 1px; background: rgba(16,18,21,.14); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.loader.is-done { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; }

/* hero: after the name, the claim is the loudest line */
.hero__claim {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(38px, 4.2vw, 76px); line-height: 0.9; letter-spacing: -0.04em;
  animation: lift 900ms 120ms var(--ease-out) both;
}
.hero__claim span { color: var(--accent); }
.hero .note { margin-top: 14px; max-width: 38ch; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.stats { gap: clamp(32px, 3.6vw, 64px); }
.stat { animation: lift 900ms 240ms var(--ease-out) both; }
.stat:nth-child(2) { animation-delay: 320ms; }
.stat:nth-child(3) { animation-delay: 400ms; }
.stat dd { font-size: clamp(40px, 3.9vw, 70px); }
.stat dd small { margin-left: 4px; font-size: 0.36em; font-weight: 800; letter-spacing: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .hero__claim, .stat { animation: none; } }

/* split headline: one quiet line, then one huge line */
.h2--split { display: grid; gap: 8px; }
.h2__small { font-size: 0.46em; letter-spacing: -0.02em; color: var(--ink-soft); }
.h2__big { font-size: clamp(56px, 5.8vw, 106px); line-height: 0.85; letter-spacing: -0.05em; }

@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .act--foam .copy { width: min(42vw, 620px); }

  /* outsole: shoe in the middle, headline top-left, detail bottom-right */
  .act--grip .spot { left: 28%; top: 22%; width: 44%; height: 48%; }
  .act--grip .word { left: 50%; }
  .copy--top { top: calc(var(--nav-h) + 5vh); bottom: auto; left: var(--gutter); justify-content: flex-start; width: min(34vw, 520px); }
  .copy--corner { top: auto; bottom: calc(10.5vh + 120px); right: var(--gutter); justify-content: flex-end; width: min(24vw, 340px); }

  /* upper: flipped, shoe left and text right */
  .act--upper .spot { left: 4%; top: 28%; width: 48%; height: 42%; }
  .act--upper .word { left: 36%; }

  /* specs: flipped again, sheet left and shoe right */
  .act--specs .spot { left: 58%; top: 16%; width: 38%; height: 40%; }
  .act--specs .sheet { left: var(--gutter); right: auto; }
  .act--specs .graph { left: auto; right: var(--gutter); }
  .act--specs .graph__label { left: auto; right: var(--gutter); }
}

@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .hero .spot { top: 36%; }
  .hero__claim { font-size: 34px; }
  .hero .note { font-size: 13px; }
  .stat dd { font-size: 32px; }
  .h2__big { font-size: clamp(48px, 15vw, 64px); }
  .copy--corner { order: 3; }
  .loader { bottom: 50%; }
}

/* =====================================================================
   TRIAL 3: visual hierarchy pass. Previous version: _work/backup-agent-round2/
   ===================================================================== */
.hero .note { margin-top: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.rail__pace i { font-style: normal; padding-inline: 8px; }
.specgrid dd { font-size: clamp(38px, 3.6vw, 64px); }
.big { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  /* the hero shoe takes the stage */
  .hero .spot { left: 26%; top: 39%; width: 50%; height: 40%; }
}

/* =====================================================================
   TRIAL 4: declutter. One idea per chapter, numbers only in Specs.
   Previous version: _work/backup-agent-round3/
   ===================================================================== */
/* hero: title, shoe, claim, one quiet row of figures */
.stats { gap: clamp(26px, 2.6vw, 44px); }
.stat dd { font-size: clamp(28px, 2.6vw, 44px); }
.stat dt { font-size: 9.5px; }
/* the rail only tells you how far you've come; time and pace arrive at the finish */
.rail__pace { display: none; }
/* specs: the figures are the whole story, no live graph beside them */
.act--specs .graph, .act--specs .graph__label { display: none; }
/* the material names stay text-sized; only the figures are big */
.specgrid--words dd { font-size: clamp(16px, 1.3vw, 21px); }
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .act--grip { padding-bottom: 56px; }
  .act--specs { padding-bottom: 56px; }
  .stat dd { font-size: 26px; }
}

/* =====================================================================
   TRIAL 5: more air. Previous version: _work/backup-agent-round4/
   ===================================================================== */
:root { --t-h2: clamp(44px, 4.6vw, 88px); }

/* hero figures: one quiet line instead of three columns */
.hero__figs {
  margin-top: 18px; font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 600;
  font-size: clamp(15px, 1.15vw, 19px); color: var(--ink-soft); white-space: nowrap;
  animation: lift 900ms 260ms var(--ease-out) both;
}
.hero__figs b { font-stretch: var(--w-display); font-weight: 900; font-size: 1.7em; letter-spacing: -0.03em; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.hero__figs i { font-style: normal; color: var(--accent); padding-inline: 14px; }
.hero .note { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .hero__figs { animation: none; } }

/* chapter labels carry their place on the kilometre */
.kicker__km { color: var(--ink-soft); }
/* the outsole headline sits in the shoe's exit path, so it keeps the previous size */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) { .act--grip .h2 { font-size: clamp(40px, 4.1vw, 80px); } }
.kicker__km::before { content: "·"; padding-right: 10px; color: var(--line); }

@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .hero__figs { white-space: normal; font-size: 14px; }
  .hero__figs i { padding-inline: 8px; }
}

/* =====================================================================
   TRIAL 6: phone pass. Previous version: _work/backup-agent-round8/
   ===================================================================== */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  /* one ghost word per chapter, parked above the label instead of behind the headline */
  .act--foam, .act--grip, .act--upper { padding-top: 196px; }
  .act--foam .word, .act--grip .word, .act--upper .word { top: 122px; font-size: 22vw; }
  .act--step .word { font-size: 17vw; }
  /* copy fades while the shoe passes over it (see app.js), no transition so it tracks the scroll */
  .hero__foot { will-change: opacity; }
  /* a soft ground under the kilometre rail so scrolling content never collides with it */
  .rail::before {
    content: ""; position: absolute; left: -16px; right: -16px; bottom: -22px; height: 96px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(230,232,234,0) 0%, rgba(230,232,234,.9) 45%, rgba(230,232,234,.97) 100%);
  }
  .act--finish { padding-bottom: 110px; }
}

/* =====================================================================
   PHONE REBUILD: one screen per chapter, like desktop.
   Shoe lives in the top zone, copy in the bottom zone, they never meet.
   Previous version: _work/backup-agent-round9/
   ===================================================================== */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .act--foam, .act--grip, .act--upper { height: 190vh; height: 190svh; padding: 0; display: block; }
  .act--specs { height: 200vh; height: 200svh; padding: 0; display: block; }
  .act:not(.act--step) > .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; }

  /* shoe zone */
  .act--foam .spot, .act--grip .spot, .act--upper .spot {
    position: absolute; left: 7%; top: 13%; width: 86%; height: 34%; margin: 0;
  }
  .act--specs .spot { position: absolute; left: 14%; top: 11%; width: 72%; height: 21%; margin: 0; }

  /* one faint word per chapter, between the shoe and the copy */
  .act--foam .word, .act--grip .word, .act--upper .word { left: 50%; top: 53%; font-size: 21vw; }

  /* copy zone, always the same place */
  .pin .copy, .pin .sheet {
    position: absolute; left: 20px; right: 20px; top: auto; bottom: calc(104px + env(safe-area-inset-bottom));
    width: auto; translate: none; display: block;
  }
  .h2 { font-size: clamp(36px, 10.6vw, 46px); margin-bottom: 0; }
  .h2__big { font-size: clamp(48px, 14.5vw, 62px); }
  .sheet .h2 { font-size: 34px; margin-bottom: 14px; }
  .kicker { margin-bottom: 12px; }
  .kicker__num { font-size: 26px; }

  /* no leader-line labels on a narrow screen; the headline carries the chapter */
  .callouts { display: none; }
}

/* giant words: clean solid letters at rest; the outline echoes appear only while the page is moving */
.word--speed::before { opacity: calc(var(--trail, 0) * 0.45); }
.word--speed::after { opacity: calc(var(--trail, 0) * 0.2); }
.word--speed:not(.is-moving)::before, .word--speed:not(.is-moving)::after { display: none; }
.word--ghost { color: rgba(16,18,21,.12); }

/* the film frames as images: moved by transforms, which the browser composites without repainting */
.shoe-dom { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 600ms var(--ease-out); contain: strict; }
.shoe-dom.is-ready { opacity: 1; }
.shoe-dom__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; }
.shoe-dom__shadow {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(24,28,36,.34), rgba(24,28,36,.153) 50%, rgba(24,28,36,0));
}
@media (prefers-reduced-motion: reduce) { .shoe-dom { transition: none; } }

/* hero claim holds two lines on desktop */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) { .hero__l { width: min(48vw, 680px); } }
/* the outsole shoe tumbles low and large, so its word is a size down to fit under it above the rail */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .act--grip .word { font-size: clamp(64px, 12.5vw, 240px); }
  /* and the shoe rides a little higher, in the open space right of the headline */
  .act--grip .spot { left: 31%; top: 14%; width: 44%; height: 48%; }
}

/* ---------- nav, set as type rather than as labels ----------
   The chapters read as words in the display face, grouped on one frosted pill. The current chapter
   gets a white lozenge that slides between links, and its number turns blue. */
.nav__links {
  position: relative; gap: 2px; padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(16,18,21,.06), 0 8px 24px -12px rgba(16,18,21,.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.nav__links a {
  z-index: 1; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 16px 9px 14px; border-radius: 999px;
  font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 650; font-size: 15px;
  letter-spacing: -0.012em; text-transform: none; color: rgba(16,18,21,.6);
}
.nav__n {
  font-stretch: var(--w-display); font-weight: 900; font-style: italic; font-size: 11px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: rgba(16,18,21,.34);
  transition: color 160ms ease;
}
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"] .nav__n { color: var(--accent); }
.nav__links a[aria-current="true"]::after { content: none; }
.nav__pill {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(16,18,21,.08), 0 4px 12px -4px rgba(16,18,21,.14);
  opacity: 0; transform: translateX(0);
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); background: rgba(255,255,255,.5); }
  .nav__links a[aria-current="true"]:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .nav__pill { transition: opacity 200ms ease; } }

/* ---------- speed trails ----------
   Every letter drags a streak of itself, fading and softening behind it, the way a long exposure smears
   something fast. STEP IN streaks in a light accent blue; the pale chapter words in their own grey.
   The streaks are two copies of the word painted once, with their soft falloff baked in as a fixed
   text-shadow. Scroll speed only slides them out (transform) and brings them up (opacity), so a fast
   scroll never repaints a screen-wide word (repainting the old shadow streaks cost up to 40 ms a frame). */
.word--speed { --echo-rgb: 84, 104, 255; --echo-a: .42; }
.word--ghost { --echo-rgb: 16, 18, 21; --echo-a: .16; color: rgba(16,18,21,.26); }
.word--speed::before, .word--speed::after {
  content: attr(data-text); display: block; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  -webkit-text-stroke: 0; background: none;
  color: rgba(var(--echo-rgb), var(--echo-a));
  text-shadow:
    -0.03em 0 1px rgba(var(--echo-rgb), calc(var(--echo-a) * .7)),
    -0.065em 0 2px rgba(var(--echo-rgb), calc(var(--echo-a) * .45)),
    -0.11em 0 4px rgba(var(--echo-rgb), calc(var(--echo-a) * .25)),
    -0.17em 0 8px rgba(var(--echo-rgb), calc(var(--echo-a) * .1));
  will-change: transform, opacity;
}
.word--speed::before { transform: translate3d(calc(var(--spread) * -0.45em), 0, 0); opacity: calc(var(--trail, 0) * 1); }
.word--speed::after { transform: translate3d(calc(var(--spread) * -1.5em), 0, 0); opacity: calc(var(--trail, 0) * .5); }
.word--speed:not(.is-moving)::before, .word--speed:not(.is-moving)::after { display: block; opacity: 0; }
.word--speed.is-moving { text-shadow: none; }

/* hero claim: its box hugs the words, so the shoe beside it is not mistaken for covering it
   (the full-width box read as covered from the first frame and the claim never showed) */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .hero__claim { width: fit-content; font-size: clamp(38px, 3.7vw, 68px); }
  .hero .note { width: fit-content; }
}
/* upper: a whole shoe, centred in height so its two callouts have room above it, and MESH resting low
   in the band under it (it rises into that band from below, see .word__l) */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .act--upper .spot { left: 6%; top: 25%; width: 44%; height: 42%; }
  .act--upper .word { left: 32%; top: 80%; font-size: clamp(64px, 13vw, 250px); }
}
/* on desktop the copy never fades, so it doesn't need its own opacity layer */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .pin .copy, .pin .sheet, .hero__foot { will-change: auto; }
}

/* the walk: two cut-out legs moved by transforms in their own layer (no full-screen canvas) */
.shoe-walk { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; visibility: hidden; contain: strict; }
.shoe-walk__leg { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.shoe-walk__leg.is-far { filter: brightness(0.9) saturate(0.85); }
.shoe-walk__shadow {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(24,28,36,.32), rgba(24,28,36,.144) 50%, rgba(24,28,36,0));
}

/* hero figures on desktop: a right-aligned column hard against the gutter. The shoe's toe swings out as
   far as the old single line reached, and would sit on the first figure; stacked, they stay clear of it. */
@media (min-width: 820px) and (min-aspect-ratio: 9/10) {
  .hero__figs { display: grid; justify-items: end; row-gap: 4px; white-space: nowrap; }
  .hero__figs i { display: none; }
  .hero__figs .fig { display: block; line-height: 1.05; }
  .hero__figs b { font-size: 1.9em; }
}


/* a word that rises in: each letter comes up out of the line below it, one after another (app.js drives it) */
.word__l { display: inline-block; will-change: transform; }

/* ---------- the finish ----------
   A finisher's card on the left, under STEP IN. It uses the same frosted material as the nav, so it reads
   as part of the page's own furniture: a status line, the result as one sentence with the time in the
   accent, one split, and the button spanning the card. */
.act--finish { height: 40vh; }
.finish { top: -8vh; width: min(30vw, 420px); }
.finish__card {
  padding: 20px 20px 18px; border-radius: 22px;
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 1px 2px rgba(16,18,21,.05), 0 18px 40px -22px rgba(16,18,21,.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.finish__meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 10px; }
.finish__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(43,59,255,.14); }
.finish__km { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.finish__line {
  margin: 18px 0 0; font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 750;
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance;
}
.finish__time {
  display: inline-block; color: var(--accent); font-stretch: var(--w-display); font-weight: 900; font-style: italic;
  font-size: 1.32em; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 0.9;
}
.finish__split {
  display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--ink-soft);
}
.finish__split .mono { font-size: 10px; }
.finish__split b { color: var(--ink); font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; }
.finish__btn {
  display: flex; align-items: center; justify-content: space-between; margin-top: 16px; height: 50px; padding: 0 8px 0 18px;
  border-radius: 14px; background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 700; font-size: 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -12px rgba(30,43,224,.7);
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.finish__btn .logo { width: 19px; height: 11px; margin-right: 10px; }
.finish__btn > span { display: inline-flex; align-items: center; }
.finish__price {
  gap: 8px; height: 34px; padding: 0 10px 0 12px; border-radius: 10px; background: rgba(255,255,255,.16);
  font-variant-numeric: tabular-nums;
}
.finish__price svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.finish__btn:active { transform: scale(0.98); background: var(--accent-press); }
@media (hover: hover) and (pointer: fine) {
  .finish__btn:hover { background: var(--accent-press); }
  .finish__btn:hover .finish__price svg { transform: translateX(2px); }
}
.finish .credit { margin: 12px 0 0 4px; font-size: 9px; letter-spacing: .1em; color: var(--ink-soft); opacity: .75; }
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .finish { left: auto; right: auto; top: auto; width: auto; }
  .act--finish .finish { margin-top: -6vh; }
}

/* ---------- the speed stop ----------
   The runner who ran off to the right comes back: one foot flies in from the right edge, the heel bites,
   the toe lifts as it skids, a smear of rubber stretches out behind, then the toe slaps down and it
   stands beside the card. Played once each time the card comes into view (app.js, WAAPI). */
.finish__card { position: relative; }
.stopfoot {
  position: absolute; left: calc(100% + clamp(28px, 3.4vw, 64px)); bottom: -6px;
  height: clamp(260px, 36vh, 380px); aspect-ratio: 1124 / 1039;
  pointer-events: none; opacity: 0; transform-origin: 93% 97%;
}
.stopfoot.is-still { opacity: 1; }
.stopfoot__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 15%); mask-image: linear-gradient(180deg, transparent 2%, #000 15%);
}
.stopfoot__shadow {
  position: absolute; left: 4%; right: 2%; bottom: 0; height: 9%;
  background: radial-gradient(closest-side, rgba(24,28,36,.3), rgba(24,28,36,.12) 55%, rgba(24,28,36,0));
}
/* the rubber smear behind the heel, and the dust it kicks up */
.stopfoot__skid {
  position: absolute; left: 86%; bottom: 1.5%; width: 110%; height: 7px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(24,28,36,.28), rgba(24,28,36,.12) 45%, rgba(24,28,36,0));
  filter: blur(1.5px); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.stopfoot__dust {
  position: absolute; left: 80%; bottom: -2%; width: 34%; aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200,203,210,.9), rgba(200,203,210,.4) 55%, rgba(200,203,210,0));
  filter: blur(4px); transform: scale(0.3); opacity: 0;
}
/* speed lines trailing the foot on its way in */
.stopfoot__lines { position: absolute; left: 78%; top: 40%; width: 80%; height: 50%; opacity: 0; }
.stopfoot__lines b {
  position: absolute; left: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(84,104,255,.55), rgba(84,104,255,0));
}
.stopfoot__lines b:nth-child(1) { top: 18%; width: 70%; }
.stopfoot__lines b:nth-child(2) { top: 50%; width: 100%; }
.stopfoot__lines b:nth-child(3) { top: 82%; width: 55%; }
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .stopfoot { left: auto; right: 6px; bottom: calc(100% - 10px); height: 200px; }
}
/* the skid mark and speed lines run out past the foot: never let them widen the page */
.act--finish { overflow-x: clip; }

/* the shoe on its own, big: it comes in toe first from the right, bites on the heel with the toe up,
   skids, and drops flat beside the card */
.stopfoot {
  left: calc(100% + clamp(28px, 3vw, 56px)); bottom: -4px; height: auto;
  width: min(44vw, 640px); aspect-ratio: 1208 / 572; transform-origin: 90% 96%;
}
.stopfoot__img { -webkit-mask-image: none; mask-image: none; }
.stopfoot__shadow { left: 6%; right: 4%; bottom: -1%; height: 11%; }
.stopfoot__skid { left: 84%; bottom: 1.5%; width: 70%; height: 8px; }
.stopfoot__dust { left: 80%; bottom: -4%; width: 32%; }
.stopfoot__lines { left: 80%; top: 30%; width: 55%; height: 45%; }
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .stopfoot { left: auto; right: 2px; bottom: calc(100% + 6px); width: 88%; }
}

/* the card: a line worth quoting, then the order itself (name, colourway, three facts, the button) */
.finish__quote { margin: 0; padding: 2px 0 0; }
.finish__quote p { font-size: clamp(22px, 1.8vw, 29px); }
.finish__quote p {
  margin: 0; position: relative; padding-left: 0.62em;
  font-family: var(--f-display); font-stretch: var(--w-head); font-weight: 800; font-style: italic;
  font-size: clamp(22px, 1.95vw, 31px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
.finish__quote p::before { content: "“"; position: absolute; left: -0.1em; top: 0; color: var(--accent); }
.finish__quote p::after { content: "”"; color: var(--accent); }
.finish__order { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.finish__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0;
  font-family: var(--f-display); font-stretch: var(--w-ui); font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
}
.finish__name .mono { color: var(--ink-soft); font-size: 9px; }
.finish__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; font-size: 9.5px; color: var(--ink); }
.finish__specs span { padding: 5px 8px; border-radius: 999px; background: rgba(16,18,21,.05); }

.finish__quote blockquote { margin: 0; }
.finish__quote figcaption { margin-top: 10px; padding-left: 0.95em; color: var(--ink-soft); font-size: 9.5px; }

/* =====================================================================
   PHONE, 2026-10-01 (second pass): the chapters are laid out like desktop. Each piece sits where it sits
   on desktop (the same side, the same height on the screen) and moves the same way. Only the sizes are
   the phone's own: the shoe spans more of the narrow screen and the type is set to stay readable.
   The hero and the finish keep their own phone layouts. Previous version: _work/backup-1001-phone2/
   ===================================================================== */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .act--foam, .act--specs { height: 170vh; height: 170svh; }
  .act--grip, .act--upper { height: 160vh; height: 160svh; }
  .act--foam, .act--grip, .act--upper, .act--specs { padding: 0; display: block; }
  .act:not(.act--step) > .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; }

  .act .pin { overflow-x: clip; }
  .pin .copy, .pin .sheet { position: absolute; translate: none; display: flex; flex-direction: column; }
  /* Option 2: desktop's arrangement at phone size. Every piece is centred where it is centred on desktop
     (the same share of the screen across and down), so the gaps between them are desktop's too; only the
     sizes grow so the words stay readable, and the shoe is let over the copy's edge as it is on desktop. */
  /* 01: copy on the left at mid height, the shoe to its right, LIGHT behind the shoe */
  .act--foam .copy  { left: 4%; right: auto; top: 0; bottom: 0; width: 46%; justify-content: center; }
  .act--foam .spot  { position: absolute; margin: 0; left: 40%; top: 38%; width: 60%; height: 20%; }
  .act--foam .word  { left: 64%; top: 50%; font-size: 19vw; }
  /* 02: copy high on the left, the shoe in the middle, GRIP behind it */
  .act--grip .copy  { left: 4%; right: auto; top: 12%; bottom: auto; width: 58%; justify-content: flex-start; }
  .act--grip .spot  { position: absolute; margin: 0; left: 16%; top: 29%; width: 70%; height: 24%; }
  .act--grip .word  { left: 50%; top: 50%; font-size: 21vw; }
  /* 03: the shoe on the left, copy on the right at mid height, MESH rising low on the left */
  .act--upper .spot { position: absolute; margin: 0; left: 0; top: 36%; width: 58%; height: 20%; }
  .act--upper .copy { left: auto; right: 4%; top: 0; bottom: 0; width: 44%; align-items: flex-start; text-align: left; justify-content: center; }
  .act--upper .copy .kicker { flex-direction: row; }
  .act--upper .word { left: 32%; top: 80%; font-size: 19vw; }
  /* 04: the sheet down the left, the shoe high on the right */
  .act--specs .sheet { left: 4%; right: auto; top: 0; bottom: 0; width: 56%; justify-content: center; }
  .act--specs .spot { position: absolute; margin: 0; left: 52%; top: 24%; width: 48%; height: 18%; }
  /* STEP IN.: the shoe low on the left, the word across the screen under it */
  .act--step .spot { left: 4%; top: 36%; width: 46%; height: 20%; }
  .act--step .word { left: 50%; top: 61%; font-size: 19vw; }

  .pin .h2 { font-size: 7.4vw; line-height: 0.95; margin-bottom: 0; }
  .pin .h2__big { font-size: 8.4vw; }
  .pin .h2__small { font-size: 12px; }
  .pin .kicker { margin-bottom: 10px; font-size: 10px; gap: 8px; }
  .pin .kicker__num { font-size: 22px; }
  .pin .kicker::before { width: 18px; }
  .kicker__km { display: none; }

  .act--specs .sheet .h2 { font-size: 6.6vw; margin-bottom: 8px; }
  .act--specs .specgrid { grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
  .act--specs .specgrid > div { padding: 8px 0 9px; gap: 3px; }
  .act--specs .specgrid dd { font-size: 5.4vw; }
  .act--specs .specgrid dt { font-size: 7px; letter-spacing: .08em; }
  .act--specs .specgrid--words dd { font-size: 3vw; }
  .act--specs .graph, .act--specs .graph__label { display: none; }

  .callouts { display: block; }
  .callout__label b { font-size: 13px; }
  .callout__label .mono { font-size: 8.5px; }
  .pin .copy, .pin .sheet { will-change: auto; }
}

/* each chapter's contents sit on a stage: on desktop it is simply the whole pin */
.stage { position: absolute; inset: 0; }

/* =====================================================================
   PHONE, option 1 (2026-10-01): the chapters are desktop, exactly, scaled down. Each chapter's stage is laid
   out at 1024x1120 (a narrow desktop window, so it scales up as far as a phone allows) with the desktop geometry and type (desk-stage.css, generated from the desktop page) and
   scaled to the phone's width, centred in the screen. --k is the scale, set by app.js.
   Option 2 (desktop's arrangement at phone size) is in _work/backup-1001-opt2/.
   ===================================================================== */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .act .pin { overflow: visible; }
  .pin > .stage {
    inset: auto; left: 0; top: calc(50% - 560px * var(--k, 0.38)); width: 1024px; height: 1120px;
    transform: scale(var(--k, 0.38)); transform-origin: 0 0;
  }
  /* the shoe's labels, at desktop size scaled like the stage */
  .callout__label b { font-size: calc(22px * var(--k, 0.38)); }
  .callout__label .mono { font-size: calc(10px * var(--k, 0.38)); letter-spacing: .12em; }
  .callout__label { gap: calc(4px * var(--k, 0.38)); }
}

/* phone stage: the smallest labels get a floor so they stay legible once the stage is scaled down */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .stage .kicker { font-size: max(13px, calc(9.5px / var(--k, 0.38))) !important; }
  .stage .kicker__num { font-size: max(30px, calc(20px / var(--k, 0.38))) !important; }
  .stage .specgrid dt { font-size: max(10px, calc(7px / var(--k, 0.38))) !important; letter-spacing: .06em; }
  .callout__label b { font-size: 11px; }
  .callout__label .mono { font-size: 7.5px; }
  .stage .kicker, .stage .kicker * { white-space: nowrap; }
  .stage .kicker__km { display: none; }   /* the one piece that runs off the right edge at phone size */
}

/* =====================================================================
   PHONE, option 2 (2026-10-02): fill the screen. Each chapter's stage is desktop's width (1024) but the
   phone's full height, scaled like option 1, so type and shoe keep desktop's proportions. The pieces are
   stacked to use the height: the headline, the shoe large with its giant word behind it, then the copy.
   Option 1 (desktop exactly, in a band) is in _work/backup-1002-opt1big/.
   ===================================================================== */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .pin > .stage { top: 0; height: calc(100vh / var(--k, 0.38)); height: calc(100svh / var(--k, 0.38)); }
  .stage .spot { position: absolute; margin: 0; }
  .stage .word { font-size: 236px; translate: -50% -50%; }
  .stage .copy, .stage .sheet {
    position: absolute; left: 56px; right: 56px; top: auto; bottom: auto; width: auto; translate: none;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left;
  }
  .stage .kicker { font-size: 26px; gap: 16px; margin-bottom: 26px; }
  .stage .kicker__num { font-size: 58px; }
  .stage .kicker::before { width: 44px; height: 4px; }
  .stage .kicker__km { display: none; }
  .stage .h2 { font-size: 118px; line-height: 0.9; margin: 0; }
  .stage .h2__big { font-size: 1.14em; }
  .stage .h2__small { font-size: 0.4em; }

  /* 01: like 02, the copy high, the shoe under it, LIGHT behind */
  #foam .stage .copy { top: 11%; }
  #foam .stage .spot { left: 3%; top: 34%; width: 94%; height: 32%; }
  #foam .stage .word { left: 50%; top: 66%; }
  /* 02: the copy high (as on desktop), the shoe under it, GRIP behind */
  #grip .stage .copy { top: 11%; }
  #grip .stage .spot { left: 3%; top: 34%; width: 94%; height: 32%; }
  #grip .stage .word { left: 50%; top: 66%; }
  /* 03: like 02, the copy high (on the right, desktop's side), the shoe under it, MESH behind */
  #upper .stage .copy { top: 11%; align-items: flex-end; text-align: right; }
  #upper .stage .spot { left: 3%; top: 41%; width: 94%; height: 30%; }
  #upper .stage .word { left: 50%; top: 73%; }   /* (a line lower than 02: this headline runs to three lines) */
  #upper .stage .copy .kicker { flex-direction: row-reverse; }
  /* 04: shoe high, the sheet filling the rest */
  #specs .stage .spot { left: 10%; top: 11%; width: 80%; height: 24%; }
  #specs .stage .sheet { top: 40%; }
  #specs .stage .sheet .h2 { font-size: 118px; margin-bottom: 30px; }
  #specs .stage .specgrid { width: 100%; grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
  #specs .stage .specgrid > div { padding: 26px 0 28px; gap: 10px; }
  #specs .stage .specgrid dd { font-size: 84px; }
  #specs .stage .specgrid dt { font-size: 22px; }
  #specs .stage .specgrid--words dd { font-size: 40px; }
  #specs .stage .graph, #specs .stage .graph__label { display: none; }
  /* STEP IN.: the shoe low, the word across under it */
  #step .stage .spot { left: 4%; top: 30%; width: 70%; height: 28%; }
  #step .stage .word { left: 50%; top: 59.6%; font-size: 178px; }   /* its top edge is the ground the runner lands on, as on desktop */

  .callout__label b { font-size: 13px; }
  .callout__label .mono { font-size: 8.5px; }
}

/* phones: the nav's soft fade no longer reaches down over the page, so a headline stays solid black right
   up until it slides behind the bar (it read as the headline fading away as the chapter scrolled off) */
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  .nav::before { inset: 0; background: rgba(230,232,234,.94); }
}

/* no loading label: the page shows straight away and the shoe fades in as soon as its frames are ready
   (the element stays for the script and for screen readers' status, it is just not drawn) */
.loader { display: none !important; }