/* ============ Fonts ============ */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
/* Body: Urbanist — geometric, circular bowls and single-storey a, like the logo */
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/urbanist-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ============ Tokens ============ */
:root {
  /* Base */
  --paper: #F7F7F8;      /* studio white — matches the hero photo backdrop */
  --alu: #E6E8EB;        /* brushed aluminium — light surfaces */
  --graphite: #1C1F23;   /* anodised graphite — dark sections, text on light */
  --steel: #6E757E;      /* secondary text */
  --hairline: #C9CDD2;

  /* Axolotl accents — used sparingly */
  --axo: #F4A9C0;        /* axolotl pink — on dark backgrounds */
  --gill: #B8355E;       /* deep gill — pink that passes contrast on light */

  /* Type */
  --font: "Urbanist", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-4: clamp(2.6rem, 1.4rem + 5.6vw, 7.5rem);

  /* Space */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --ease-out: cubic-bezier(.2,.7,.1,1);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* on phones the root must clip too, or the page widens */
body {
  margin: 0;
  overflow-x: clip; /* nothing may push the page wider than the screen */
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 450;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gill); outline-offset: 3px; border-radius: 2px; }

/* ============ Nav (not sticky) ============ */
.nav {
  position: absolute; z-index: 50;
  top: 1rem; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 0.65rem 0.65rem 1.25rem;
  background: #fff;
  border: 1px solid rgb(28 31 35 / .08);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(28 31 35 / .04), 0 12px 32px -12px rgb(28 31 35 / .14);
}
.logo {
  display: inline-flex; align-items: flex-end; gap: 0.7rem;
  color: var(--graphite);
  text-decoration: none;
}
.logo__mark { height: 1.45rem; width: auto; }
.logo__word { height: 1.05rem; width: auto; margin-bottom: 0.06rem; }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  position: relative;
  font-size: var(--step--1); font-weight: 600;
  text-decoration: none;
  padding: 0.3rem 0;
}
/* Dashed gill underline that traces in on hover, like the hero's ghost wheels */
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gill) 0 5px, transparent 5px 9px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { clip-path: inset(0 0 0 0); }
.nav__icon { display: none; }
.nav__cta { gap: 0.6rem; }
.nav__chip {
  font-size: 0.75em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  background: var(--axo);
  border-radius: 999px;
  padding: 0.15em 0.55em;
}

.btn {
  display: inline-flex; align-items: center;
  font: inherit; font-weight: 600;
  text-decoration: none;
  background: var(--graphite); color: var(--alu);
  border-radius: 999px;
  padding: 0.85em 1.4em;
  transition: background-color .2s;
}
.btn:hover { background: var(--gill); }
.btn--small { font-size: var(--step--1); padding: 0.6em 1.1em; }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 6.5rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.hero__title {
  grid-area: 1 / 1 / 4 / 2;
  margin: 0;
  font-family: var(--font-display);
  display: flex; flex-direction: column; justify-content: space-between;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 6.6rem); /* a touch smaller than --step-4 for more white space */
  line-height: 0.92;
  letter-spacing: -0.035em;
  pointer-events: none;
  z-index: 2;
}
.hero__line--a { align-self: flex-start; }
.hero__line--b { align-self: flex-end; text-align: right; padding-bottom: 1.5rem; }

.hero__stage {
  grid-area: 1 / 1 / 4 / 2;
  position: relative;
  margin: 0 auto;
  width: min(100%, 740px, 72svh);
  align-self: start;
  margin-top: 3rem; /* bike sits between the two lines, clear of "Your wheels didn't." */
}
.hero__bike {
  position: relative; z-index: 1; /* frame sits on top of the sketched wheels */
  width: 100%;
  /* background is pure white in the file, so multiply melts it into the page and lets the wheels show through */
  mix-blend-mode: multiply;
}
.hero__ghosts {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Sketch lines of the ghost wheels. Widths are in image units (the stage shows the
   1024px-wide image at ~720px). No non-scaling-stroke: it breaks pathLength trace-ins in Chrome. */
.sk {
  fill: none;
  stroke: var(--gill);
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sk--tyre  { stroke-width: 3.1; }
.sk--fine  { stroke-width: 1.3; }
.sk--spoke { stroke-width: 1.15; opacity: .85; }
.sk--hatch { stroke-width: 1; }
.sk-fade   { opacity: var(--o, 1); }

.hero__cue {
  position: absolute; left: 50%; bottom: 1.25rem;
  width: 1px; height: 2.75rem;
  translate: -50% 0;
  background: var(--hairline);
  overflow: hidden;
}
.hero__cue span {
  position: absolute; inset: 0;
  background: var(--graphite);
  animation: cue 2.2s var(--ease-out) infinite 2.4s;
  translate: 0 -100%;
}
@keyframes cue { 0% { translate: 0 -100%; } 60%, 100% { translate: 0 100%; } }

/* One orchestrated load moment: the ghost wheels sketch themselves in, then the second line lands */
.js .sk-trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js.is-loaded .sk-trace { animation: sketch var(--t, 1.2s) var(--ease-out) var(--d, 0s) forwards; }
@keyframes sketch { to { stroke-dashoffset: 0; } }
.js .sk-fade { opacity: 0; }
.js.is-loaded .sk-fade { opacity: var(--o, 1); transition: opacity 1.8s ease var(--d, 0s); }
.js .hero__line--b { opacity: 0; translate: 0 .15em; }
.js.is-loaded .hero__line--b {
  transition: opacity 1.2s ease, translate 1.6s var(--ease-out);
  transition-delay: 3.8s;
  opacity: 1; translate: 0 0;
}

/* ============ Problem — sticky, panels scroll sideways ============ */
.problem { background: var(--paper); }
.problem__pin {
  height: 100vh;
  padding-top: 2rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.problem__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 var(--gutter);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}
.problem__label {
  margin: 0;
  font-size: var(--step--1); font-weight: 600;
  color: var(--gill);
}
.problem__progress { display: flex; align-items: center; gap: 1rem; }
.problem__count { font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--steel); }
.problem__current { color: var(--graphite); }
.problem__meter { position: relative; width: 7rem; height: 1px; background: var(--hairline); }
.problem__meter span {
  position: absolute; inset: 0;
  background: var(--gill);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.problem__track {
  flex: 1;
  display: flex; align-items: center;
  gap: 6vw;
  width: max-content;
  padding: 0 var(--gutter) 2rem;
  background: var(--paper);
  will-change: transform;
}
.panel {
  width: min(88vw, 1320px);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 3vw;
}
.panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.4rem, 0.8rem + 3.2vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.panel__body { margin: 1.4rem 0 0; max-width: 34ch; color: var(--steel); }
.panel__source { margin: 1.6rem 0 0; font-size: 0.75rem; color: var(--steel); opacity: .8; }
.panel__source a { text-underline-offset: 0.2em; text-decoration-color: var(--hairline); }
.panel__source a:hover { color: var(--gill); text-decoration-color: currentColor; }

/* Graphics sit straight on the page with no frame. Their white is pre-baked to the
   paper colour (#F7F7F8) in the files, so no blend mode is needed and fades stay seamless.
   Every graphic is cropped with the same margin around its drawing and shown at
   one shared height, so the drawings come out the same size and line up.
   --scale on a figure fine-tunes one graphic by eye. */
.panel { --media-h: min(58vh, 530px, 36vw); }
.panel__media { margin: 0; justify-self: center; }
.panel__media img { height: calc(var(--media-h) * var(--scale, 1)); width: auto; max-width: none; }
/* this graphic has its own paper texture at the edges: fade it out so no square shows */
.panel__media--textured img {
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 70%, transparent 100%);
}
.panel__media--placeholder {
  height: var(--media-h); aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgb(28 31 35 / .04) 0 1px, transparent 1px 14px);
  color: var(--steel); font-size: var(--step--1);
}

/* Without the scroll effect (reduced motion / no JS), panels simply stack */
.problem:not(.is-horizontal) .problem__pin { height: auto; overflow: visible; padding-bottom: 4rem; }
.problem:not(.is-horizontal) .problem__track { flex-direction: column; width: auto; gap: 5rem; padding-top: 3rem; }

/* Panels not in focus fade back */
.panel__text, .panel__media { transition: opacity .5s ease; }
.problem.is-horizontal .panel:not(.is-active) .panel__text,
.problem.is-horizontal .panel:not(.is-active) .panel__media { opacity: .18; }

/* ============ Launch — dark sheet ============ */
.launch {
  position: relative;
  display: grid;
  gap: 5.5rem;
  padding: 6.25rem var(--gutter) 2.25rem;
  background: var(--graphite);
  color: var(--alu);
  border-radius: 2rem 2rem 0 0;
}
.launch__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  grid-template-rows: auto auto auto;
  column-gap: 6vw;
}
/* flatten both columns into one grid: title / lede+button / lock+note share rows */
.launch__story, .launch__cta { display: contents; }
.launch__title { grid-column: 1; grid-row: 1; }
.launch__lede  { grid-column: 1; grid-row: 2; }
.lock          { grid-column: 1; grid-row: 3; margin-top: 3.75rem; }
.join          { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: end; margin-bottom: -1.75rem; /* sits closer to the note below */ }
.launch__note  { grid-column: 2; grid-row: 3; align-self: start; }
.launch__title {
  display: flex; align-items: center; gap: 0.38em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.3rem, 1.05rem + 2.73vw, 3.57rem); /* icon is em-sized, so it grows with the title */
  line-height: 0.95;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.launch__lede {
  margin: 0.9rem 0 0;
  max-width: 36ch;
  color: rgb(230 232 235 / .65);
}
.launch__lede strong { color: var(--axo); font-weight: 700; }

/* Looping icon: a hex key turns the bolt in quarter steps, pauses, repeats */
.wip { width: 1.3em; height: 1.3em; flex: none; overflow: visible; }
.wip__head, .wip__socket { fill: none; stroke: var(--axo); stroke-width: 3; }
.wip__key { fill: none; stroke: var(--axo); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wip__turn { transform-origin: 32px 32px; animation: wip-turn 4s var(--ease-out) infinite; }
@keyframes wip-turn {
  0%, 15%   { transform: rotate(0deg); }
  25%, 40%  { transform: rotate(90deg); }
  50%, 65%  { transform: rotate(180deg); }
  75%, 90%  { transform: rotate(270deg); }
  100%      { transform: rotate(360deg); }
}

/* ---- Countdown as a combination lock ---- */
.lock {
  --cell: 1.15em;            /* height of one digit on a wheel */
  --win: 1.8em;              /* visible window: shows the neighbours peeking above/below */
  position: relative;
  display: flex; gap: 0.45em;
  width: max-content;
  padding: 0 0.45em;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 105%;
  font-size: clamp(2.4rem, 1.2rem + 2.6vw, 3.6rem);
}
/* pink index marks on the reading line, like the arrow on a real lock */
.lock::before, .lock::after {
  content: ""; position: absolute;
  top: calc(var(--win) / 2 - 0.12em);
  border: 0.12em solid transparent;
}
.lock::before { left: 0;  border-left-color: var(--axo); }
.lock::after  { right: 0; border-right-color: var(--axo); }

.lock__group { display: grid; justify-items: center; gap: 0.35rem; }
.lock__wheels { display: flex; gap: 0.06em; }
.lock__label {
  font: 500 0.8rem/1 var(--font);
  letter-spacing: 0;
  color: var(--steel);
  padding-bottom: 0.15rem;
}
.wheel {
  position: relative;
  width: 0.8em; height: var(--win);
  overflow: hidden;
  border-radius: 0.12em;
  color: var(--graphite);
  /* brushed-metal cylinder: bright in the middle, rolling into shadow top and bottom */
  background: linear-gradient(180deg, #6b7279 0%, #a9afb6 16%, #dfe2e5 38%, #f4f5f6 50%, #dfe2e5 62%, #a9afb6 84%, #6b7279 100%);
  box-shadow: inset 1px 0 0 rgb(0 0 0 / .35), inset -1px 0 0 rgb(0 0 0 / .35);
}
.wheel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 12 14 / .38), transparent 30%, transparent 70%, rgb(10 12 14 / .38));
}
.wheel__strip {
  position: absolute; left: 0; right: 0;
  top: calc((var(--win) - var(--cell)) / 2);
  transform: translateY(calc(var(--d, 0) * var(--cell) * -1));
  transition: transform .7s cubic-bezier(.3, 1.35, .5, 1); /* a little overshoot, like a dial clicking in */
}
.wheel__strip span {
  display: block;
  height: var(--cell); line-height: var(--cell);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Call to action: bottom-aligned with the lock, text set right ---- */
/* note starts level with the top of the lock */
.launch__note { margin: 3.75rem 0 0; text-align: right; font-size: 0.92rem; line-height: 1.55; color: rgb(230 232 235 / .8); }

.join {
  position: relative;
  display: inline-flex; align-items: center;
  font: inherit; font-weight: 700; font-size: var(--step-0);
  padding: 0.8em 1.35em;
  color: var(--graphite);
  background: var(--axo);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgb(244 169 192 / .65);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s;
}
/* soft ring that breathes outwards now and then, so the button invites a click */
.join::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(244 169 192 / .45);
  animation: join-ring 3.2s ease-out infinite 1s;
  pointer-events: none;
}
@keyframes join-ring { 0% { box-shadow: 0 0 0 0 rgb(244 169 192 / .45); } 45%, 100% { box-shadow: 0 0 0 14px rgb(244 169 192 / 0); } }
/* hover matches the header button: deep gill */
.join:hover, .join:focus-visible { transform: translateY(-2px); background: var(--gill); color: var(--alu); box-shadow: 0 16px 36px -12px rgb(184 53 94 / .8); }
/* Arrow and discount share one slot: arrow shows at rest, chip on hover/focus */
.join__swap {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns .45s var(--ease-out), margin .45s var(--ease-out);
}
.join__swap > span { overflow: hidden; white-space: nowrap; }
.join__arrow { grid-template-columns: 1fr; margin-left: 0.5em; }
.join__arrow svg { display: block; width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join__chip > span {
  font-size: 0.78em; font-weight: 700;
  background: var(--axo); color: var(--graphite);
  border-radius: 999px;
  padding: 0.2em 0;
  transition: padding .45s var(--ease-out);
}
.join:hover .join__arrow, .join:focus-visible .join__arrow { grid-template-columns: 0fr; margin-left: 0; }
.join:hover .join__chip, .join:focus-visible .join__chip { grid-template-columns: 1fr; margin-left: 0.6em; }
.join:hover .join__chip > span, .join:focus-visible .join__chip > span { padding: 0.2em 0.6em; }

.launch__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(230 232 235 / .12);
}
.launch__brand { display: flex; align-items: flex-end; gap: 0.6rem; color: var(--alu); text-decoration: none; }
.launch__mark { height: 1.6rem; width: auto; }
.launch__word { height: 1.15rem; width: auto; margin-bottom: 0.05rem; }
.launch__meta { display: flex; gap: 2rem; font-size: var(--step--1); color: var(--steel); }
.launch__meta a { text-decoration: none; }
.launch__meta a:hover { color: var(--axo); }

/* ============ Waitlist pop-up ============ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.modal {
  width: min(92vw, 27rem);
  padding: 1.5rem 1.75rem 1.75rem;
  border: 1px solid rgb(230 232 235 / .14);
  border-radius: 1.25rem;
  background: var(--graphite);
  color: var(--alu);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}
.modal::backdrop { background: rgb(14 16 18 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in .45s var(--ease-out); }
.modal[open]::backdrop { animation: fade-in .3s ease; }
@keyframes modal-in { from { opacity: 0; translate: 0 16px; scale: .98; } }
@keyframes fade-in { from { opacity: 0; } }

.modal__bar {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 0.85rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgb(230 232 235 / .14);
  font-size: var(--step--1); font-weight: 600; color: var(--steel);
}
.modal__date { color: var(--axo); }
.modal__close { margin-left: auto; }
.modal__close {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--alu); cursor: pointer;
}
.modal__close:hover { background: rgb(230 232 235 / .08); }
.modal__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 0.95; letter-spacing: -0.035em;
}
.modal__title:focus { outline: none; }
.modal__text { margin: 0.85rem 0 0; font-size: var(--step--1); line-height: 1.55; color: rgb(230 232 235 / .72); }
.modal__text strong { color: var(--axo); font-weight: 700; }
.modal__input {
  display: block; width: 100%;
  margin-top: 1.5rem; padding: 0.55rem 0;
  font: inherit; font-size: var(--step-0);
  color: var(--alu);
  background: none;
  border: 0; border-bottom: 1px solid rgb(230 232 235 / .3);
  border-radius: 0;
}
.modal__input::placeholder { color: rgb(230 232 235 / .35); }
.modal__input:focus { outline: none; border-bottom-color: var(--axo); }
.modal__submit, .modal__done .btn {
  width: 100%; justify-content: center;
  margin-top: 1.5rem; padding: 0.7em 1em;
  font-size: var(--step-0);
  border: 0; cursor: pointer;
}
.modal .btn { background: var(--axo); color: var(--graphite); transition: background-color .2s, color .2s; }
/* same deep-gill hover as the header and launch buttons */
.modal .btn:hover, .modal .btn:focus-visible { background: var(--gill); color: var(--alu); }
.modal__error { margin: 1rem 0 0; color: var(--axo); font-size: var(--step--1); }

/* ============ Responsive ============ */
@media (max-width: 720px) {
  /* ---- Header: same floating pill, tighter; text links become icons ---- */
  .nav { top: 0.75rem; left: 0.75rem; right: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem; }
  .logo { gap: 0.45rem; }
  .logo__mark { height: 1.25rem; }
  .logo__word { height: 0.9rem; }
  .nav__links { gap: 0.15rem; }
  .nav__link { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__link:focus-visible { color: var(--gill); }
  .nav__icon { display: block; width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .nav__icon-dot { fill: currentColor; stroke: none; }
  .nav__text, .nav__cta-long {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav__cta { margin-left: 0.35rem; gap: 0.45rem; padding: 0.6em 0.75em 0.6em 1em; }

  /* ---- Hero: line 1 top, bike centred with both wheels on screen, line 2 bottom ---- */
  .hero {
    min-height: 100svh;
    padding: 5.75rem 1rem 2.25rem;
    grid-template-rows: auto 1fr auto;
  }
  .hero__title { grid-area: auto; display: contents; font-size: clamp(2.5rem, 14.5vw, 4.2rem); }
  .hero__line { display: block; z-index: 2; }
  .hero__line--a { grid-row: 1; }
  /* the sketched wheels reach ~11% past the photo on each side and ~19% below it,
     so the photo is kept narrower than the screen to let both wheels show whole */
  .hero__stage { grid-row: 2; align-self: center; width: 76vw; margin: 1.5rem auto 3rem; }
  .hero__line--b { grid-row: 3; padding-bottom: 0; }
  .hero__cue { display: none; }

  /* ---- Problem space: still scrolls sideways; each panel fills the screen, text over graphic ---- */
  .problem__pin { padding-top: 1.25rem; }
  .problem__bar { margin: 0 1rem; }
  .problem__meter { width: 4.5rem; }
  .problem__track { gap: 2.5rem; padding: 0 1rem 1.5rem; }
  .panel {
    width: calc(100vw - 2rem);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.75rem;
    /* graphics keep one shared height (same idea as desktop), sized to the phone */
    --media-h: min(30svh, 54vw);
  }
  .panel__title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .panel__body { margin-top: 0.9rem; max-width: none; font-size: var(--step-0); }
  .panel__source { margin-top: 0.9rem; }
  .panel__media { justify-self: center; }

  /* ---- Launch: one column — title, text, countdown, button, note ---- */
  .launch { gap: 4rem; padding: 4.5rem 1rem 1.75rem; border-radius: 1.5rem 1.5rem 0 0; }
  .launch__main { grid-template-columns: 1fr; grid-template-rows: none; }
  .launch__title { grid-column: 1; grid-row: 1; font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .launch__lede  { grid-column: 1; grid-row: 2; max-width: none; margin-top: 1.25rem; }
  /* 8 wheels plus gaps are ~8.9em wide, so the countdown's font is tied to the screen width */
  .lock          { grid-column: 1; grid-row: 3; margin-top: 3.25rem; font-size: clamp(1.8rem, 10vw, 2.5rem); }
  .join          { grid-column: 1; grid-row: 4; justify-self: stretch; justify-content: center; margin: 3.25rem 0 0; }
  .launch__note  { grid-column: 1; grid-row: 5; margin-top: 1.25rem; text-align: left; }
  /* no hover on touch screens: show the discount straight away instead of the arrow */
  .join .join__arrow { grid-template-columns: 0fr; margin-left: 0; }
  .join .join__chip { grid-template-columns: 1fr; margin-left: 0.6em; }
  .join .join__chip > span { padding: 0.2em 0.6em; background: var(--graphite); color: var(--axo); } /* dark chip reads on the pink button */
  .launch__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-top: 1.75rem; }
  .launch__meta { flex-wrap: wrap; gap: 0.5rem 1.25rem; }

  /* ---- Waitlist pop-up ---- */
  .modal { padding: 1.25rem 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wip__turn { animation: none; }
  .modal[open], .modal[open]::backdrop { animation: none; }
  .join__swap, .join__chip > span { transition: none; }
  .join::after { animation: none; }
  .wheel__strip { transition: none; }
  .js .sk-trace, .js.is-loaded .sk-trace { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .sk-fade { opacity: var(--o, 1); transition: none; }
  .js .hero__line--b { opacity: 1; translate: none; transition: none; }
  .hero__cue span { animation: none; translate: 0 0; }
}