/* N.ext marketing site.

   One black ground the whole way down. Plates sit on it, and one white card
   travels: it rises over the hero headline carrying the training week, leaves,
   and comes back at the price. That card is the only surface that moves
   between chapters, which is what holds the page together without a world.

   The anchor changes every act on purpose. Hero leads left, the watch trails
   right, the streak centres, the sports title leads left again over a centred
   deck, the founder splits photo-left, the price splits the other way with the
   card on the left, and the close resolves centred over the sunrise. A page
   where every act is left-aligned type beside a right-aligned picture is one
   act shown seven times.

   Nothing here restyles a [data-sc-*] selector except the three documented
   rules at the bottom of this file. Those are the mechanism. */

:root {
  /* the six roles */
  --sc-canvas: #000000;
  --sc-surface: #0C0D0F;
  --sc-ink: #F4F1EC;
  --sc-ink-soft: #A3A099;
  --sc-accent: #F8430F;
  --sc-accent-ink: #140B06;

  /* pure black eats a 14% line, so the hairlines carry a little more */
  --sc-hairline: rgba(244, 241, 236, .16);
  --sc-hairline-strong: rgba(244, 241, 236, .26);

  --sc-font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sc-font-text: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-num: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --hr: #E01B1B;
  --gut: clamp(1.25rem, 6vw, 5.5rem);
  /* .sc-wrap is the engine's and reads --sc-gutter. Left alone it is 5vw
     against our 6vw, so the watch, sports and founder chapters line up on a
     different left edge from the hero and the price. One ruler. */
  --sc-gutter: var(--gut);
  --sc-maxw: 74rem;
}

/* Redefining --sc-ink on a subtree does not re-ink inherited text: restate
   `color` as well. #F8430F is 3.4:1 on white, which clears the 3:1 a graphic
   needs and misses the 4.5:1 text needs, so the two get separate tokens: the
   week graph keeps the vivid orange, small text on white steps down. */
.on-white {
  --sc-ink: #0B0C0E;
  --sc-ink-soft: #55595F;
  --sc-accent: #C0330A;
  --graph: #F8430F;
  --sc-hairline: rgba(11, 12, 14, .12);
  color: var(--sc-ink);
  background: #FFFFFF;
}

* { box-sizing: border-box; }
html { background: var(--sc-canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────── the pill ── */
.bar {
  position: fixed;
  z-index: 60;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: flex-end;
  padding: 14px var(--gut);
  padding-top: calc(14px + env(safe-area-inset-top));
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.pill {
  display: inline-block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  color: #0B0C0E;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 11px 18px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(11, 12, 14, .10);
  box-shadow: 0 1px 2px rgba(8, 9, 11, .5), 0 4px 14px -4px rgba(8, 9, 11, .7);
  transition: transform .16s var(--sc-ease-out);
}
.pill:active { transform: translateY(1px) scale(.985); }
.pill--lg { font-size: 17px; padding: 15px 26px; }

/* ─────────────────────────────────────────────────────────────────── type ── */
.h2 {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(2.05rem, 8.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}

/* Hollow display type, the one treatment carried over from the Percept and
   yielde references. Two headings on the page, never body copy: at body sizes
   an outline is unreadable, and it is the contrast against solid white on the
   same line that makes it work at all. */
.ghost {
  -webkit-text-stroke-width: clamp(1.1px, .42vw, 2.1px);
  -webkit-text-stroke-color: var(--sc-ink);
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not (-webkit-text-stroke: 1px #000) {
  .ghost { color: var(--sc-ink); -webkit-text-fill-color: currentColor; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.eyebrow i { display: block; width: 1.75rem; height: 1px; background: var(--sc-hairline-strong); }

.kick {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}

/* The load entrance. Blur that resolves is the thing that reads expensive on
   the reference sites, and it is the thing this page had none of. */
.lift {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  filter: blur(10px);
  transition:
    opacity 820ms var(--sc-ease-out) calc(var(--i, 0) * 110ms),
    transform 820ms var(--sc-ease-out) calc(var(--i, 0) * 110ms),
    filter 820ms var(--sc-ease-out) calc(var(--i, 0) * 110ms);
}
.is-lifted .lift { opacity: 1; transform: none; filter: blur(0); }

/* ───────────────────────────────────────────────────────── 1 · hero + week ── */
.hero, .price { background: var(--sc-canvas); }
.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* One box, and nothing writes to it. The hero type used to carry a travel
   from site.js inside an engine-driven cue element, which is why there were
   two. Both are gone: the type arrives on load and then holds, and the card
   comes up over it. */
.hero__type {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: clamp(5rem, 11vh, 9rem);
  z-index: 2;
}

.mark {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 800;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  letter-spacing: -.05em;
  color: var(--sc-ink);
  margin: 0 0 clamp(1.5rem, 5vh, 2.75rem);
}
.dot { color: var(--sc-ink); }

.hero__h {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 115;
  font-weight: 800;
  font-size: clamp(2.3rem, 11.5vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--sc-ink);
}
.hl { display: block; }

/* The rotating line. A crossfade with a gap in the middle reads as a rendering
   fault, which is what the last build shipped; Percept rolls, so this rolls.
   The item box is 1.28em against a 1.04 line so the descenders in "your" and
   "goals" clear the mask, and the negative margins give the extra back to the
   headline's line spacing. */
.rot {
  display: block;
  overflow: hidden;
  height: 1.28em;
  margin-block: -.12em;
}
.rot__track {
  display: block;
  transform: translate3d(0, calc(var(--n, 0) * -1.28em), 0);
  transition: transform 720ms cubic-bezier(.76, 0, .24, 1);
}
.rot__track.no-t { transition: none; }
.rot__i {
  display: block;
  height: 1.28em;
  line-height: 1.28em;
  white-space: nowrap;
}

/* The card. Rounded on all four corners now, so it has to be a finite object
   that lands entirely on screen: it is anchored to the bottom and drops by a
   share of its OWN height, which is what leaves its top edge poking in at
   rest. */
.card {
  position: absolute;
  z-index: 3;
  right: var(--gut);
  left: auto;
  width: min(86%, 30rem);
  bottom: clamp(.75rem, 3vh, 2.5rem);
  height: auto;
  --drop: 94%;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 30px 70px -18px rgba(0, 0, 0, .9);
  overflow: hidden;
  transform: translate3d(0, calc((1 - var(--rise, 0)) * var(--drop)), 0);
  will-change: transform;
}
.card__in {
  padding: clamp(1.35rem, 5.5vw, 2.25rem);
  padding-top: clamp(1.5rem, 5.5vw, 2.25rem);
}
.card .kick { color: var(--sc-ink); }
.week {
  width: 100%;
  height: auto;
  margin: clamp(.9rem, 3.5vw, 1.4rem) 0 clamp(.8rem, 3vw, 1.2rem);
}
#weekLine { stroke: var(--graph); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.week__tick { stroke: rgba(11, 12, 14, .13); stroke-width: 2; }
.week__dot { fill: #FFFFFF; stroke: var(--graph); stroke-width: 5; }
.week__dot[data-rest] { stroke: #B8BCC4; }

.wk { list-style: none; margin: 0; padding: 0; }
.wk li {
  display: grid;
  grid-template-columns: 3.1rem 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding: .46rem 0;
  border-top: 1px solid var(--sc-hairline);
  opacity: 0;
  transform: translateY(6px);
}
.wk li:first-child { border-top: 0; }
.wk .d {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--sc-ink-soft);
}
.wk .t {
  font-size: clamp(.95rem, 3.8vw, 1.05rem);
  font-weight: 500;
}
.wk .m {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .88rem;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.wk li[data-rest] .t, .wk li[data-rest] .m { color: var(--sc-ink-soft); }

/* A phone with its toolbar showing is about 740 tall and the risen card was
   462 of it, which put the card's top edge over the rotating line. Nothing is
   removed from the card, it is just set tighter where there is no room.

   Keyed on WIDTH, never on height. A `max-height: 820px` query straddles the
   toolbar: the same phone is 788 tall with it and 844 without, so the query
   flipped on every toolbar hide and the card reflowed by 62px with no scroll.
   That is the same family of bug as the engine's own vh divisor, and the
   resize shim cannot catch it, because --sc-p is byte-identical either side of
   it while the layout moves. Width does not change when a toolbar retracts. */
@media (max-width: 47.99rem) {
  .card--week .card__in { padding: 1.1rem 1.15rem 1.15rem; }
  .card--week .week { margin: .55rem 0 .45rem; }
  .card--week .wk li { padding: .27rem 0; }
}

/* ────────────────────────────────────────────────────── 2 · watch, synced ──
   Trails right, against the hero leading left. */
.act--watch { padding-block: clamp(5.5rem, 18vh, 10rem) clamp(5rem, 16vh, 9rem); }
.watch {
  display: grid;
  justify-items: end;
  text-align: right;
  gap: clamp(1.25rem, 5vw, 2rem);
}
.watch .eyebrow { flex-direction: row-reverse; }
.hr { margin: 0; width: 100%; max-width: 44rem; }
.hr svg { width: 100%; height: auto; display: block; }
/* pathLength="1" normalises the dash unit, so the draw is immune to the
   responsive stretch that a getTotalLength() version would have to re-measure */
/* The draw is triggered by the figure entering the viewport, NOT by the act's
   --sc-p. A flow act's p is (y + vh - top) / (height + vh), so p is already
   past 0.45 the first time this figure appears on screen and the trace was
   two thirds drawn before anyone saw it. Entry-triggered, it starts at zero in
   front of the reader every time. */
.hr__line {
  stroke: var(--hr);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  /* deliberately NOT vector-effect: non-scaling-stroke. Next to pathLength="1"
     and a dash pattern, WebKit computes the dash in the untransformed space
     while pathLength normalises against user units, and the draw completes at
     the wrong fraction or all at once. 2 units in a 600-unit box renders about
     1.3px at phone widths, which is the thin sharp line this wants anyway. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms cubic-bezier(.32, 0, .2, 1);
}
.watch.is-drawing .hr__line { stroke-dashoffset: 0; }
.hr__x {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: .55rem 0 0;
  padding: 0;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline);
  padding-top: .5rem;
}
.rows { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 30rem; }
.rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-top: 1px solid var(--sc-hairline);
  text-align: left;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 620ms var(--sc-ease-out),
    transform 620ms var(--sc-ease-out);
}
.watch.is-drawing .rows li { opacity: 1; transform: none; }
.watch.is-drawing .rows li:nth-child(1) { transition-delay: 300ms; }
.watch.is-drawing .rows li:nth-child(2) { transition-delay: 700ms; }
.watch.is-drawing .rows li:nth-child(3) { transition-delay: 1100ms; }

/* The second half of the heading is the payoff, so it waits for the line to
   finish rather than arriving with the first half.

   These three rows and this span deliberately do NOT use the engine's
   data-sc-in / data-sc-stagger, even though the observer below uses the same
   rootMargin. A stagger fires everything off one entry at a fixed interval;
   this has to be pinned to the 1600ms line draw, so the delays are written
   against it by hand. Moving it back onto data-sc-stagger would silently lose
   the thing the chapter was rebuilt for. */
.solid {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 620ms var(--sc-ease-out),
    transform 620ms var(--sc-ease-out),
    filter 620ms var(--sc-ease-out);
}
.watch.is-drawing .solid {
  opacity: 1;
  filter: none;
  transform: none;
  transition-delay: 1650ms;
}
.rows span { color: var(--sc-ink-soft); font-size: .95rem; }
.rows b {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ───────────────────────────────────────────────────────────── 3 · streak ── */
.streak { display: grid; place-items: center; background: var(--sc-canvas); }
.streak__in {
  width: 100%;
  max-width: var(--sc-maxw);
  padding-inline: var(--gut);
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 6vh, 2.5rem);
}
.streak__cap { text-align: center; }
.ring { position: relative; width: 260px; max-width: min(72vw, 34vh); }
.ring svg { display: block; width: 100%; height: auto; }
.ring__t { fill: none; stroke: var(--sc-hairline); stroke-width: 22; }
.ring__a { fill: none; stroke-width: 22; stroke-linecap: round; }
.ring__g { fill: var(--sc-ink); }
.ring__n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: clamp(3rem, 12vw, 4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────── 4 · eleven sports ──
   Block flow, never grid: a stretched grid item fills its row and has no room
   left to travel, so it can never stick. The <ol> is the containing block, so
   all four cards stay put until the whole deck leaves together. */
.act--sports { padding-block: clamp(4rem, 12vh, 7rem) clamp(4.5rem, 14vh, 8rem); }
/* NOT sticky. A sticky title rides the top of the screen for the whole
   chapter and is released only when the wrapper ends, which puts it just above
   "And many more" by the time the deck is done. Read from the reader's seat
   that is the title travelling down the page. It stays above the cards. */
.sports__t {
  margin-bottom: clamp(1.5rem, 6vw, 2.5rem);
  text-align: left;
}
.stack { list-style: none; margin: 0 0 clamp(2rem, 8vw, 3rem); padding: 0; display: block; }
.sc {
  position: sticky;
  /* The deck used to stack under a pinned title and sat at 8.75rem for it.
     With the title gone it comes up to where the title was, but no further:
     no env() in the offset (a retracting toolbar must not drift it) and 5.5rem
     still clears the fixed pill. */
  top: calc(5.5rem + var(--i) * 18px);
  z-index: calc(var(--i) + 1);
  display: block;
  width: min(88%, 30rem);
  margin: 0 auto clamp(1.25rem, 5vw, 2rem);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), 0 22px 48px -14px rgba(0, 0, 0, .85);
  opacity: var(--e, 1);
  transform: translate3d(0, calc((1 - var(--e, 1)) * 40px), 0);
}
/* An explicit height, and NO aspect-ratio. `aspect-ratio` next to `max-height`
   is what put a white strip down the right of every one of these cards on a
   real phone: when max-height clamps the height, Chrome re-derives the WIDTH
   from the ratio, because a block box's stretch-fit width is indefinite for
   ratio purposes. It never showed headlessly, where svh == vh and the clamp
   never fired. A definite height cannot do it. */
.sc figure {
  margin: 0;
  height: clamp(13rem, 34vh, 20rem);
  height: clamp(13rem, 34svh, 20rem);
  overflow: hidden;
}
.sc img { width: 100%; height: 100%; object-fit: cover; }
.sc__b { padding: .95rem clamp(1.1rem, 4.5vw, 1.5rem) 1.1rem; }
.sc__b h3 {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 110;
  font-weight: 800;
  font-size: clamp(1.3rem, 5.4vw, 1.65rem);
  letter-spacing: -.035em;
  margin: 0;
}
.more {
  margin: 0;
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 105;
  font-weight: 600;
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  letter-spacing: -.03em;
  color: var(--sc-ink);
  text-align: center;
}

/* ──────────────────────────────────────────────────────────── 5 · founder ── */
.act--founder { padding-block: clamp(3.5rem, 11vh, 6.5rem); }
.founder { display: grid; gap: clamp(1.75rem, 7vw, 3rem); align-items: center; }
.founder__pic {
  margin: 0;
  width: min(66%, 20rem);
  border-radius: 18px;
  overflow: hidden;
  background: var(--sc-surface);
}
.founder__pic img { width: 100%; height: auto; }
.founder__b { display: grid; gap: clamp(.9rem, 3.5vw, 1.25rem); }
.founder__p { margin: 0; font-size: clamp(1rem, 3.9vw, 1.12rem); line-height: 1.66; color: var(--sc-ink); }
.founder__b .h2 { margin-bottom: .3rem; }
.founder__w {
  margin: .4rem 0 0;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .92rem;
  color: var(--sc-ink-soft);
}

/* ────────────────────────────────────────────────────────────── 6 · price ──
   The mirror of the hero: the hero puts type high-left and the card low-right,
   so the price puts the card low-left and the heading over it on the right.
   Both live in one bottom-anchored box rather than one at the top and one at
   the bottom, which is what left a screen and a half of black between them. */
/* NO `position: relative` and NO `height` here. This element IS the engine's
   [data-sc-stage]: the engine styles it `position: sticky; height: 100svh`, and
   a same-specificity `.price` rule later in the cascade silently unpins the
   whole act and stretches the stage to the act's full 1.9 screens, which parks
   the group 760px below the fold for most of the chapter. Sticky is already a
   positioned element, so .price__in's absolute positioning anchors to it. */
.price__in {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.25rem, 5vh, 2.5rem);
  z-index: 2;
}
.price__h {
  text-align: right;
  margin: 0 0 0 auto;
  max-width: 18ch;
}
.card--price {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(80%, 25rem);
  margin-right: auto;
  --drop: 82%;
}
.card--price .card__in { padding-block: clamp(1.9rem, 7.5vw, 2.8rem); }
.pr { margin: 0 0 .7rem; opacity: 0; transform: translateY(6px); }
.pr--amt {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(2.5rem, 11.5vw, 3.8rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: 1rem;
}
.pr--amt small {
  font-family: var(--font-num);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sc-ink-soft);
}
.pr:not(.pr--amt) { font-size: clamp(1rem, 4vw, 1.15rem); line-height: 1.5; }
.pr--free { font-weight: 600; margin-top: 1.1rem; }
.pr--note { font-size: .92rem; color: var(--sc-ink-soft); margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────── 7 · close ──
   The app's own sunrise, full screen. The scrim sits only under the type, in
   the bottom of the frame; the picture is never flattened by a full-frame
   overlay. */
.act--close { padding: 0; }
.close {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
}
.close__pic { display: block; }
.close__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  z-index: -2;
}
.close::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76%;
  z-index: -1;
  /* Graded, not guessed: the brightest pixel anywhere under the close copy has
     to clear 4.5:1 against #F4F1EC, and the lake reflection in this plate is
     brighter than the sky. A local scrim, never a full-frame overlay. */
  background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .93) 26%, rgba(0, 0, 0, .78) 50%, rgba(0, 0, 0, .34) 78%, rgba(0, 0, 0, 0) 100%);
}
.close__in {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 4.5vw, 1.6rem);
  text-align: center;
  padding: 0 var(--gut) clamp(4rem, 14vh, 7rem);
  max-width: 40rem;
}
.close__h {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 114;
  font-weight: 800;
  font-size: clamp(2.35rem, 11vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0;
  text-wrap: balance;
}
.close__s { margin: 0; color: var(--sc-ink-soft); font-size: clamp(.95rem, 3.6vw, 1.05rem); }
.close__in .pill--lg { margin-top: .3rem; }

.foot {
  padding: clamp(1.5rem, 6vw, 2rem) var(--gut) calc(clamp(1.5rem, 6vw, 2rem) + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--sc-maxw);
  margin-inline: auto;
}
.foot nav { display: flex; flex-wrap: wrap; gap: .75rem 1.35rem; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; font-size: .92rem; }
.foot a:hover { color: var(--sc-ink); }
.foot small { font-size: .92rem; }

/* ───────────────────────────────────────────────────────────────── wiring ──
   Three overrides on engine selectors, and only three.

   1 + 2 · The card has to bleed past a 100svh stage to the large viewport, or
   the phone toolbar retracting shows a black strip under its white. Clip is
   restored on the act so it can never paint into the chapter below.

   3 · The engine's flow reveal is opacity and a rise. The reference sites add
   a blur that resolves, and that is the part that reads expensive, so it is
   added here rather than by forking the engine. */
[data-sc-act="pin"] .sc-stage { overflow: visible; }
/* hidden first as the pre-Safari-16 fallback. It is safe on exactly these
   three acts because none of them contains a sticky element; the sticky deck
   lives in the sports act, which is flow and untouched by this rule. */
[data-sc-act="pin"] { overflow: hidden; overflow: clip; }

[data-sc-in], [data-sc-stagger] > * {
  filter: blur(6px);
  transition:
    opacity 620ms var(--sc-ease-out),
    transform 620ms var(--sc-ease-out),
    filter 620ms var(--sc-ease-out);
}
/* `filter: none`, not `blur(0)`. A live filter holds a composited layer and
   re-rasterises the glyphs through the filter path for the life of the page,
   which on iOS reads as type that never quite sharpens. */
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { filter: none; }

@media (min-width: 760px) {
  /* a definite track, never `auto`: a percentage width inside an auto-sized
     track resolves against a track sized by that same box, and the card
     collapses to min-content (one word per line) */
  .price__in { grid-template-columns: minmax(0, 26rem) 1fr; align-items: end; gap: clamp(2rem, 5vw, 4rem); }
  .card--price { order: 1; width: 100%; }
  .price__h { order: 2; padding-bottom: clamp(1rem, 4vh, 2.5rem); max-width: 14ch; }
  .hero__h { font-size: clamp(2rem, 5.2vw, 3.4rem); }
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
  }
  .hero__type {
    position: static;
    padding-top: clamp(6rem, 18vh, 11rem);
    align-self: start;
  }
  .card--week {
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    align-self: end;
    margin-bottom: clamp(1.5rem, 5vh, 3rem);
  }
  .founder { grid-template-columns: 20rem 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .founder__pic { width: 100%; }
  .sc { top: calc(7rem + var(--i) * 20px); }
  .sc figure { height: clamp(15rem, 38vh, 24rem); height: clamp(15rem, 38svh, 24rem); }
}

@media (min-width: 960px) {
  /* .card--week only: .card--price is a grid item at this width and owns its
     own track, so a percentage here would resolve against that track and
     shrink it back to a column of single words */
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  .hero__h { font-size: clamp(2.4rem, 4.6vw, 4.05rem); }
  .price__in { grid-template-columns: minmax(0, 30rem) 1fr; }
  .sc { width: min(74%, 38rem); }
  .sc figure { height: clamp(17rem, 44vh, 27rem); height: clamp(17rem, 44svh, 27rem); }
  .founder { grid-template-columns: 24rem 1fr; }
  .sports__t, .founder, .watch { max-width: 64rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. A pinned act with its motion removed is a
     screen that cannot be scrolled past its own first viewport, so the card
     would sit on top of the headline for four screens and the bottom of it
     would be unreachable. Unpin the three pinned acts instead: the page
     becomes an ordinary document that states every fact at rest. */
  .act--hero, .act--streak, .act--price { height: auto !important; }
  .act--hero .sc-stage, .act--streak .sc-stage, .act--price .sc-stage {
    position: static !important;
    height: auto !important;
    padding-block: clamp(4rem, 12vh, 7rem);
  }
  /* .price__in's side margin comes ONLY from left/right, which go inert the
     moment it is static. The hero has .hero__inner and the streak has
     .streak__in to fall back on; the price has no such wrapper, so the gutter
     has to come from the stage or the price chapter runs edge to edge. */
  .act--price .sc-stage { padding-inline: var(--gut); }
  .hero__inner { height: auto; }
  .hero__type, .price__in, .card { position: static; }
  .price__in { display: block; }
  .price__h { text-align: left; max-width: none; padding-bottom: 0; margin: 0 0 clamp(1.5rem, 6vw, 2.5rem); }
  .streak__cap, .price__h { filter: none; }
  .card {
    width: 100%;
    height: auto;
    margin-top: clamp(2rem, 8vw, 3rem);
    transform: none;
  }
  .card--price { width: 100%; margin-top: clamp(1.5rem, 6vw, 2.5rem); }
  .lift { opacity: 1; transform: none; filter: none; transition: none; }
  .wk li, .pr { opacity: 1; transform: none; }
  .hr__line { stroke-dashoffset: 0; transition: none; }
  .rot { height: auto; overflow: visible; }
  .rot__track { transform: none; transition: none; }
  .rot__i:not(:first-child) { display: none; }
  .sc { position: static; opacity: 1; transform: none; }
  .rows li, .solid { opacity: 1; transform: none; filter: none; }
  [data-sc-in], [data-sc-stagger] > * { filter: none; }
}