/* The start page, v4 (WM-0204), as the PO approved WM-0207 round 4c: its
   design.md values and its plates at 1440, 768 and 390, laid out fluidly
   between them; and coming soon. Positions inside the first screen and the
   art zones are the plates' own numbers in design pixels (--u, --z), so the
   layout scales as a whole and never reflows a station.
   The rules for screens and watches (APPLE_ASSETS.md §2; SITE_UX.md §4.3):
   a .screen (stage A, our capture) or .watch (stage B, Apple's composite) and
   every element around it carry no transform, filter, shadow, opacity,
   clip or animation; only our art moves (home.js, transform only), and
   nothing of ours lies over a screen. A step's screen fades in over the
   previous one, which stays whole beneath it. */

.home { flex: 1; overflow-x: clip; }

/* ---- The first screen --------------------------------------------------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  background: radial-gradient(ellipse at 70% 30%, var(--light) 0, transparent 60%);
}
.hero-stage {
  --u: calc(100cqw / 1440);
  container-type: inline-size;
  position: relative;
  width: min(100%, 1440px);
  aspect-ratio: 1440 / 900;
  margin: 0 auto;
}
.hero-stage > *,
.hero-art > *,
.hero-route > *,
.hero .station > * {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u) + var(--dy, 0px));
}
.hero-art, .hero-route { inset: 0; left: 0; top: 0; pointer-events: none; }
.hero-art { z-index: 10; }
.hero-route { z-index: 20; }
.hero .station { position: static; margin: 0; }
.hero-art, .hero-route, .flow [data-wm-depth] { transform: translate3d(0, var(--drift, 0px), 0); }

/* The cookie bar never covers a screen or a watch (webco, 2026-10-16, after
   wrev7). On a visit where the banner asks at load (.wm-consent-first,
   first-visit.js, before the page paints), the first screen fits the
   viewport above it, and never reflows when the banner closes; on other
   visits (a stored choice, no JavaScript) it is the approved plate at full
   size (wux1, 2026-10-17). The composition follows the viewport:
   - the plate at 1440 (D) where it fits above the bar at a scale of at least
     0.588 (its captions, action and route hold down to that, the sweep in
     WM-0204's evidence): the viewport at least the bar + 24 + 0.588 × 766.8
     px tall, so from 600 px tall at 1216 px wide and more, from 624 or 648
     px where the bar is taller (854–1215 px wide, up to 1069 px tall);
   - the plate at 768 (T) only where it fits at 0.75 or more (the bar + 24 +
     610.5 px, and never below 862 px tall): 600–853 px wide from 862–904 px
     tall by the bar's height there, 854–1023 px wide from 1070 px tall;
   - otherwise the plate at 390 (P), the stations down the page: below 600 px
     wide, and on shorter viewports up to 1215 px wide (from 1024 px wide
     only on a first visit: without the bar D fits there, so returning and
     no-JS visitors keep it; wux1's P2 on ce1c501). On a first visit its
     first protected station starts below the fold (--push): stage B's first
     watch; stage A's Enamel screen (the sheet may lie over the bare Birch
     screen, SITE_UX.md §4.1).
   D and T are capped by the small viewport height so every station ends at
   least 24 px above the bar: --bar is the bar's height at that width, at
   16/24 (PATTERN_SCAN F07), measured in Chrome and WebKit with 20 px of the
   width taken by a scrollbar, plus 4 px (below 768 px the sheet's), or the
   bar's live height where that is taller (wrev7 P3 #3). The lowest station's bottom: 766.8
   design pixels of 1440 (Enamel), 814 of 768. */
:root.wm-consent-first .hero-stage { --bar: max(125px, var(--wm-consent-h, 0px) + 4px); }
@media (max-width: 1215px) { :root.wm-consent-first .hero-stage { --bar: max(149px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 1055px) { :root.wm-consent-first .hero-stage { --bar: max(173px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 1023px) { :root.wm-consent-first .hero-stage { --bar: max(149px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 991px) { :root.wm-consent-first .hero-stage { --bar: max(173px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 895px) { :root.wm-consent-first .hero-stage { --bar: max(197px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 839px) { :root.wm-consent-first .hero-stage { --bar: max(221px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 799px) { :root.wm-consent-first .hero-stage { --bar: max(245px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 773px) { :root.wm-consent-first .hero-stage { --bar: max(269px, var(--wm-consent-h, 0px) + 4px); } }
@media (max-width: 767px) { :root.wm-consent-first .hero-stage { --bar: max(244px, var(--wm-consent-h, 0px) + 4px); } }
@media (min-width: 1216px) and (min-height: 600px), (min-width: 1056px) and (min-height: 624px), (min-width: 1024px) and (min-height: 648px), (min-width: 992px) and (min-height: 624px) and (max-height: 1069.98px), (min-width: 896px) and (min-height: 648px) and (max-height: 1069.98px), (min-width: 854px) and (min-height: 672px) and (max-height: 1069.98px) {
  :root.wm-consent-first .hero-stage {
    width: min(100%, 1440px, calc((100vh - var(--bar) - 24px) * 1440 / 766.8));
    width: min(100%, 1440px, calc((100svh - var(--bar) - 24px) * 1440 / 766.8));
  }
}
@media (min-width: 600px) and (max-width: 767px) and (min-height: 879px), (min-width: 768px) and (max-width: 773px) and (min-height: 904px), (min-width: 774px) and (max-width: 799px) and (min-height: 880px), (min-width: 800px) and (max-width: 853px) and (min-height: 862px), (min-width: 854px) and (max-width: 1023px) and (min-height: 1070px) {
  :root.wm-consent-first .hero-stage {
    width: min(100%, 880px, calc((100vh - var(--bar) - 24px) * 768 / 814));
    width: min(100%, 880px, calc((100svh - var(--bar) - 24px) * 768 / 814));
  }
}

.hero-type { --x: 72; --y: 142; z-index: 60; }
.display {
  margin: 0;
  font-size: calc(158 * var(--u));
  line-height: 0.94;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-type h1 {
  margin: calc(20 * var(--u)) 0 0;
  max-width: 13em;
  font-size: max(19px, calc(28 * var(--u)));
  line-height: 1.25;
  letter-spacing: -0.35px;
  font-weight: 500;
}
.hero-action { --x: 76; --y: 400; z-index: 60; }
.notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  min-height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: #fffaf5;
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 120ms ease, translate 120ms ease;
}
.notify:hover { background: #3a2e25; }
.notify:active { background: #44342a; translate: 0 1px; }

.island { display: block; height: auto; width: calc(var(--w) * var(--u)); max-width: none; }
.isl-birch { --x: 105; --y: 455; --w: 620; }
.isl-enamel { --x: 1070; --y: 550; --w: 390; }
.isl-neon { --x: 870; --y: 220; --w: 525; }
.isl-extra { display: none; }

.route { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.route path { fill: none; stroke: #4f4944; stroke-width: 2.4; stroke-dasharray: 8 10; vector-effect: non-scaling-stroke; }
.route-mid, .route-narrow, .route-narrow-b, .route-fill { display: none; }
.route-label { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; letter-spacing: 0.1px; color: #5c4b3d; }
.route-start { --x: 72; --y: 675; }
.route-goal { --x: 1312; --y: 101; }
.goal-ring {
  --x: 1276;
  --y: 102;
  width: 20px;
  height: 20px;
  border: 4px solid #437a63;
  border-radius: 50%;
  background: #faf6f2;
}
.ball { display: block; width: calc(var(--w, 52) * var(--u)); height: auto; }
/* The route and its balls keep 24 px from every watch box, with their 4 px
   drift, down to the smallest scale the bar allows (u 0.59): a few design
   pixels further out than the plate (wrev7's sweep). */
.ball-1 { --x: 200; --y: 786; }
.ball-2 { --x: 1334; --y: 350; }
.ball-3 { --x: 1264; --y: 234; }
.ball-4 { display: none; }

/* The stations: Apple's watch box (stage B) at the plate's place and scale; in
   stage A the bare screen, 194 design pixels wide, centred on that box. */
.device { z-index: 40; width: calc(201.6 * var(--u)); height: calc(316.8 * var(--u)); }
.dev-birch { --x: 293.4; --y: 410; }
.dev-enamel { --x: 1148.4; --y: 450; }
.dev-neon { --x: 1018.4; --y: 120; }
.device .watch, .device .screen { position: absolute; display: block; margin: 0; }
.device .watch { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.device .screen {
  left: 50%;
  top: 50%;
  width: calc(194 * var(--u));
  height: calc(231.31 * var(--u));
  margin: calc(-115.655 * var(--u)) 0 0 calc(-97 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #000;
  object-fit: cover;
}

.caption {
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  white-space: nowrap;
}
.caption b { display: block; font-size: 16px; line-height: 22px; font-weight: 700; }
.caption .meta { display: block; font-size: 14px; line-height: 21px; color: var(--ink-2); font-weight: 450; }
.token {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 64%, #29221c 0, #29221c 57%, #665447 62%, #c8b8a7 67%, #d7c9bb 75%, #e2d7ce 100%) #29221c;
  box-shadow: inset 0 2px 3px rgb(34 23 14 / 0.22);
  color: #fff8ef;
  font-family: var(--font-numeral);
  font-size: 16px;
  font-weight: 800;
}
.cap-birch { --x: 293; --y: 831; }
.cap-enamel { --x: 810; --y: 650; }
.cap-neon { --x: 748; --y: 143; }
/* Beside a watch, a caption is anchored by its edge nearest the watch, at the
   plate's place: its type keeps its pixel size while the layout scales, so it
   grows away from the watch, never onto it (wrev6 and wrev7 P1). */
@media (min-width: 1216px) and (min-height: 600px), (min-width: 1056px) and (min-height: 624px), (min-width: 1024px) and (min-height: 648px), (min-width: 992px) and (min-height: 624px) and (max-height: 1069.98px), (min-width: 896px) and (min-height: 648px) and (max-height: 1069.98px), (min-width: 854px) and (min-height: 672px) and (max-height: 1069.98px) {
  .hero .cap-enamel { left: auto; right: calc(395 * var(--u)); }
  .hero .cap-neon { left: auto; right: calc(464.8 * var(--u)); }
  /* The action keeps clear of the Birch watch (its box starts at 293.4) at
     every scale: Notify me narrows, Apple's badge stays 40–44 px tall. */
  .hero-action .notify { width: min(150px, calc(217.4 * var(--u) - 12px)); }
  .hero-action .badge img { height: clamp(40px, calc((217.4 * var(--u) - 12px) / 2.9916), 44px); }
  /* The goal ring (a fixed 28 px) centred on the route's end at every scale. */
  .goal-ring { --x: 1290; --y: 116; margin: -14px 0 0 -14px; }
  .route-goal { left: calc(1290 * var(--u) + 22px); }
}

.next-link {
  --x: 72;
  --y: 858;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -11px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 650;
  text-decoration: none;
}
.next-link::after { content: "\a0\a0→"; content: "\a0\a0→" / ""; }
.next-link:hover { text-decoration: underline; }

.ctrl {
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #85766a;
  border-radius: 24px;
  background: #fffcf8;
  color: #33271e;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.ctrl::before { content: "Ⅱ"; content: "Ⅱ" / ""; margin-right: 9px; font-size: 14px; }
.ctrl.is-paused::before { content: "▶"; content: "▶" / ""; font-size: 11px; }
.ctrl:hover { background: #f6ede3; }
.ctrl:active { background: #efe3d6; box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.12); }
.ctrl[hidden] { display: none; }
.hero-pause { --x: 760; --y: 738; }

/* 768: the type and Neon (3) side by side, Birch (1) and Enamel (2) under them.
   Also the base the 390 plate builds on (every viewport D does not take, above). */
@media (max-width: 853px), (max-width: 1023px) and (min-height: 1070px), (max-width: 599px), (max-width: 767px) and (max-height: 878.98px), (min-width: 768px) and (max-width: 773px) and (max-height: 903.98px), (min-width: 774px) and (max-width: 799px) and (max-height: 879.98px), (min-width: 800px) and (max-width: 853px) and (max-height: 861.98px), (min-width: 854px) and (max-width: 895px) and (max-height: 671.98px), (min-width: 896px) and (max-width: 991px) and (max-height: 647.98px), (min-width: 992px) and (max-width: 1023px) and (max-height: 623.98px) {
  .hero-stage { --u: calc(100cqw / 768); width: min(100%, 880px); aspect-ratio: 768 / 1024; }
  .hero-type { --x: 32; --y: 130; }
  .display { font-size: calc(112 * var(--u)); }
  .hero-type h1 { margin-top: calc(25 * var(--u)); max-width: 15em; font-size: max(18px, calc(26 * var(--u))); line-height: 1.31; }
  .hero-action { --x: 34; --y: 350; }
  .isl-birch { --x: 25; --y: 555; --w: 420; }
  .isl-enamel { --x: 370; --y: 620; --w: 420; }
  .isl-neon { --x: 365; --y: 210; --w: 410; }
  .route-wide { display: none; }
  .route-mid { display: block; }
  .route-start { --x: 32; --y: 480; }
  /* The ring centred on the route's end, GOAL just under it, at every scale. */
  .route-goal { --x: 706; --y: 90; top: calc(var(--y) * var(--u) + 18px); }
  .goal-ring { --x: 700; --y: 90; margin: -14px 0 0 -14px; }
  .ball { --w: 48; }
  .ball-1 { --x: 285; --y: 830; }
  .ball-2 { --x: 690; --y: 676; }
  .ball-3 { --x: 676; --y: 250; }
  .device { width: calc(168 * var(--u)); height: calc(264 * var(--u)); }
  .dev-birch { --x: 160; --y: 500; }
  .dev-enamel { --x: 490; --y: 550; }
  .dev-neon { --x: 470; --y: 125; }
  .cap-birch { --x: 64; --y: 900; }
  .cap-enamel { --x: 430; --y: 902; }
  .cap-neon { --x: 410; --y: 484; }
  .next-link { --x: 32; --y: 976; }
  .hero-pause { --x: 32; --y: 412; }
}
/* 390: the type, then START, Birch (1), Enamel (2), Neon (3) and GOAL down the page. */
@media (max-width: 599px), (max-width: 767px) and (max-height: 878.98px), (min-width: 768px) and (max-width: 773px) and (max-height: 903.98px), (min-width: 774px) and (max-width: 799px) and (max-height: 879.98px), (min-width: 800px) and (max-width: 853px) and (max-height: 861.98px), (min-width: 854px) and (max-width: 895px) and (max-height: 671.98px), (min-width: 896px) and (max-width: 991px) and (max-height: 647.98px), (min-width: 992px) and (max-width: 1023px) and (max-height: 623.98px) {
  .hero-stage { --u: calc(100cqw / 390); width: min(100%, 440px); aspect-ratio: 390 / 2110; }
  .hero-type { --x: 16; --y: 126; width: calc(358 * var(--u)); }
  .display { font-size: calc(98 * var(--u)); }
  .hero-type h1 { margin-top: calc(19 * var(--u)); font-size: max(20px, calc(24 * var(--u))); line-height: 1.25; letter-spacing: -0.2px; }
  .hero-action { --x: 16; --y: 328; }
  .isl-birch { --x: -55; --y: 461; --w: 500; }
  .isl-enamel { --x: -50; --y: 1050; --w: 480; }
  .isl-neon { --x: -29; --y: 1582; --w: 470; }
  .route-mid { display: none; }
  .route-narrow.route-top { display: block; height: calc(1000 * var(--u)); }
  .route-narrow.route-low { display: block; --y: 1000; height: calc(1040 * var(--u)); top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  .route path { stroke-width: 2.2; stroke-dasharray: 7 10; }
  .route-start { --x: 16; --y: 390; }
  .route-goal { --x: 16; --y: 1960; top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  .goal-ring { --x: 68; --y: 1964; margin: 0; }
  .ball { --w: 44; }
  .ball-1 { --x: 14; --y: 651; }
  .ball-2 { --x: 330; --y: 871; }
  .ball-3 { --x: 13; --y: 1274; }
  .ball-4 { --x: 328; --y: 1819; display: block; }
  .device { width: calc(184.8 * var(--u)); height: calc(290.4 * var(--u)); }
  .dev-birch { --x: 104; --y: 430; }
  .dev-enamel { --x: 88; --y: 1005; }
  .dev-neon { --x: 115; --y: 1530; }
  .cap-birch { --x: 16; --y: 791; }
  .cap-enamel { --x: 16; --y: 1347; }
  .cap-neon { --x: 16; --y: 1885; }
  .next-link { --x: 16; --y: 2040; }
  .hero-pause { --x: 16; --y: 852; }
  .hero-action .notify { width: calc(358 * var(--u)); min-height: 48px; }
  /* On a first visit, the first protected station starts below the
     fold on a viewport taller than the plate's 844 px: everything from it
     down moves by --push (from Enamel in stage A; from the first watch in
     stage B), and the route's straight run above it stretches (.route-fill).
     100vh: the largest viewport, so it is below the fold in every state. */
  .hero { container-type: inline-size; }
  .hero-stage { aspect-ratio: auto; height: calc(min(100cqw, 440px) * 2110 / 390 + var(--push, 0px)); }
  :root.wm-consent-first .hero-stage { --push: max(0px, 100vh - 1005 * min(100cqw, 440px) / 390); }
  .stage-a :is(.isl-enamel, .isl-neon, .ball-3, .ball-4, .dev-enamel, .dev-neon, .cap-enamel, .cap-neon, .route-goal, .goal-ring, .next-link, .route-low) { --dy: var(--push, 0px); }
  .route-fill {
    display: block;
    --x: 36;
    --y: 1000;
    width: 2.2px;
    height: var(--push, 0px);
    margin-left: -1.1px;
    background: repeating-linear-gradient(to bottom, #4f4944 0 7px, transparent 7px 17px);
  }
  /* From 768 px the banner is a bar, which no screen may meet: stage A's
     Birch screen starts below the fold too, with everything from the route's
     start down. */
  @media (min-width: 768px) {
    :root.wm-consent-first .stage-a .hero-stage { --push: max(0px, 100vh - 430 * min(100cqw, 440px) / 390); }
    .stage-a :is(.isl-birch, .ball, .device, .caption, .hero-pause, .route-goal, .goal-ring, .next-link, .isl-enamel, .isl-neon, .route-low) { --dy: var(--push, 0px); }
    .stage-a .route-narrow.route-top { top: var(--push, 0px); }
    .stage-a .route-fill { --y: 420; }
  }
  /* Stage B on a first visit: Apple's first watch starts below the first
     844 px and the cookie sheet; the route and a further cut of Birch fill
     the space (cookie-B-390). Other visits keep the plate's places, the
     Birch watch on the first screen. */
  .wm-consent-first .stage-b .hero-stage { height: calc(min(100cqw, 440px) * 2554 / 390 + var(--push, 0px)); }
  :root.wm-consent-first .stage-b .hero-stage { --push: max(0px, 100vh - 874 * min(100cqw, 440px) / 390); }
  .wm-consent-first .stage-b :is(.isl-birch, .isl-enamel, .isl-neon, .ball, .device, .caption, .route-goal, .goal-ring, .next-link, .hero-pause, .route-low) { --dy: var(--push, 0px); }
  .wm-consent-first .stage-b .route-fill { --y: 860; }
  .wm-consent-first .stage-b .isl-extra { display: block; --x: -170; --y: 440; --w: 540; }
  .wm-consent-first .stage-b .isl-birch { --y: 905; }
  .wm-consent-first .stage-b .isl-enamel { --y: 1494; }
  .wm-consent-first .stage-b .isl-neon { --y: 2026; }
  .wm-consent-first .stage-b :is(.route-narrow.route-top, .route-narrow.route-low) { display: none; }
  .wm-consent-first .stage-b .route-narrow-b.route-top { display: block; height: calc(860 * var(--u)); }
  .wm-consent-first .stage-b .route-narrow-b.route-low { display: block; --y: 860; height: calc(1694 * var(--u)); top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  .wm-consent-first .stage-b .ball-1 { --y: 1095; }
  .wm-consent-first .stage-b .ball-2 { --y: 1315; }
  .wm-consent-first .stage-b .ball-3 { --y: 1718; }
  .wm-consent-first .stage-b .ball-4 { --y: 2263; }
  .wm-consent-first .stage-b .dev-birch { --y: 874; }
  .wm-consent-first .stage-b .dev-enamel { --y: 1449; }
  .wm-consent-first .stage-b .dev-neon { --y: 1974; }
  .wm-consent-first .stage-b .cap-birch { --y: 1235; }
  .wm-consent-first .stage-b .cap-enamel { --y: 1791; }
  .wm-consent-first .stage-b .cap-neon { --y: 2329; }
  .wm-consent-first .stage-b .route-goal { --y: 2404; }
  .wm-consent-first .stage-b .goal-ring { --y: 2408; }
  .wm-consent-first .stage-b .next-link { --y: 2484; }
  .wm-consent-first .stage-b .hero-pause { --y: 1296; }
}
/* Short windows 1024–1215 wide (under 648 or 624 px tall), and wider ones
   under 600 px tall: the stacked plates only on a first visit, while the
   banner asks (wux1's P2 on ce1c501; below 600 px tall at 1216 px and wider
   the bar leaves D under its 0.588 floor); returning and no-JS visitors keep
   the 1440 composition, which fits there without the bar (D's own rules,
   below). Copies of the 768 and 390 blocks above, scoped to the first-visit
   mark. */
@media (min-width: 1024px) and (max-width: 1055px) and (max-height: 647.98px), (min-width: 1056px) and (max-width: 1215px) and (max-height: 623.98px), (min-width: 1216px) and (max-height: 599.98px) {
  :root.wm-consent-first .hero-stage { --u: calc(100cqw / 768); width: min(100%, 880px); aspect-ratio: 768 / 1024; }
  :root.wm-consent-first .hero-type { --x: 32; --y: 130; }
  :root.wm-consent-first .display { font-size: calc(112 * var(--u)); }
  :root.wm-consent-first .hero-type h1 { margin-top: calc(25 * var(--u)); max-width: 15em; font-size: max(18px, calc(26 * var(--u))); line-height: 1.31; }
  :root.wm-consent-first .hero-action { --x: 34; --y: 350; }
  :root.wm-consent-first .isl-birch { --x: 25; --y: 555; --w: 420; }
  :root.wm-consent-first .isl-enamel { --x: 370; --y: 620; --w: 420; }
  :root.wm-consent-first .isl-neon { --x: 365; --y: 210; --w: 410; }
  :root.wm-consent-first .route-wide { display: none; }
  :root.wm-consent-first .route-mid { display: block; }
  :root.wm-consent-first .route-start { --x: 32; --y: 480; }
  /* The ring centred on the route's end, GOAL just under it, at every scale. */
  :root.wm-consent-first .route-goal { --x: 706; --y: 90; top: calc(var(--y) * var(--u) + 18px); }
  :root.wm-consent-first .goal-ring { --x: 700; --y: 90; margin: -14px 0 0 -14px; }
  :root.wm-consent-first .ball { --w: 48; }
  :root.wm-consent-first .ball-1 { --x: 285; --y: 830; }
  :root.wm-consent-first .ball-2 { --x: 690; --y: 676; }
  :root.wm-consent-first .ball-3 { --x: 676; --y: 250; }
  :root.wm-consent-first .device { width: calc(168 * var(--u)); height: calc(264 * var(--u)); }
  :root.wm-consent-first .dev-birch { --x: 160; --y: 500; }
  :root.wm-consent-first .dev-enamel { --x: 490; --y: 550; }
  :root.wm-consent-first .dev-neon { --x: 470; --y: 125; }
  :root.wm-consent-first .cap-birch { --x: 64; --y: 900; }
  :root.wm-consent-first .cap-enamel { --x: 430; --y: 902; }
  :root.wm-consent-first .cap-neon { --x: 410; --y: 484; }
  :root.wm-consent-first .next-link { --x: 32; --y: 976; }
  :root.wm-consent-first .hero-pause { --x: 32; --y: 412; }
}
@media (min-width: 1024px) and (max-width: 1055px) and (max-height: 647.98px), (min-width: 1056px) and (max-width: 1215px) and (max-height: 623.98px), (min-width: 1216px) and (max-height: 599.98px) {
  :root.wm-consent-first .hero-stage { --u: calc(100cqw / 390); width: min(100%, 440px); aspect-ratio: 390 / 2110; }
  :root.wm-consent-first .hero-type { --x: 16; --y: 126; width: calc(358 * var(--u)); }
  :root.wm-consent-first .display { font-size: calc(98 * var(--u)); }
  :root.wm-consent-first .hero-type h1 { margin-top: calc(19 * var(--u)); font-size: max(20px, calc(24 * var(--u))); line-height: 1.25; letter-spacing: -0.2px; }
  :root.wm-consent-first .hero-action { --x: 16; --y: 328; }
  :root.wm-consent-first .isl-birch { --x: -55; --y: 461; --w: 500; }
  :root.wm-consent-first .isl-enamel { --x: -50; --y: 1050; --w: 480; }
  :root.wm-consent-first .isl-neon { --x: -29; --y: 1582; --w: 470; }
  :root.wm-consent-first .route-mid { display: none; }
  :root.wm-consent-first .route-narrow.route-top { display: block; height: calc(1000 * var(--u)); }
  :root.wm-consent-first .route-narrow.route-low { display: block; --y: 1000; height: calc(1040 * var(--u)); top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  :root.wm-consent-first .route path { stroke-width: 2.2; stroke-dasharray: 7 10; }
  :root.wm-consent-first .route-start { --x: 16; --y: 390; }
  :root.wm-consent-first .route-goal { --x: 16; --y: 1960; top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  :root.wm-consent-first .goal-ring { --x: 68; --y: 1964; margin: 0; }
  :root.wm-consent-first .ball { --w: 44; }
  :root.wm-consent-first .ball-1 { --x: 14; --y: 651; }
  :root.wm-consent-first .ball-2 { --x: 330; --y: 871; }
  :root.wm-consent-first .ball-3 { --x: 13; --y: 1274; }
  :root.wm-consent-first .ball-4 { --x: 328; --y: 1819; display: block; }
  :root.wm-consent-first .device { width: calc(184.8 * var(--u)); height: calc(290.4 * var(--u)); }
  :root.wm-consent-first .dev-birch { --x: 104; --y: 430; }
  :root.wm-consent-first .dev-enamel { --x: 88; --y: 1005; }
  :root.wm-consent-first .dev-neon { --x: 115; --y: 1530; }
  :root.wm-consent-first .cap-birch { --x: 16; --y: 791; }
  :root.wm-consent-first .cap-enamel { --x: 16; --y: 1347; }
  :root.wm-consent-first .cap-neon { --x: 16; --y: 1885; }
  :root.wm-consent-first .next-link { --x: 16; --y: 2040; }
  :root.wm-consent-first .hero-pause { --x: 16; --y: 852; }
  :root.wm-consent-first .hero-action .notify { width: calc(358 * var(--u)); min-height: 48px; }
  /* On a first visit, the first protected station starts below the
     fold on a viewport taller than the plate's 844 px: everything from it
     down moves by --push (from Enamel in stage A; from the first watch in
     stage B), and the route's straight run above it stretches (.route-fill).
     100vh: the largest viewport, so it is below the fold in every state. */
  :root.wm-consent-first .hero { container-type: inline-size; }
  :root.wm-consent-first .hero-stage { aspect-ratio: auto; height: calc(min(100cqw, 440px) * 2110 / 390 + var(--push, 0px)); }
  :root.wm-consent-first .hero-stage { --push: max(0px, 100vh - 1005 * min(100cqw, 440px) / 390); }
  :root.wm-consent-first .stage-a :is(.isl-enamel, .isl-neon, .ball-3, .ball-4, .dev-enamel, .dev-neon, .cap-enamel, .cap-neon, .route-goal, .goal-ring, .next-link, .route-low) { --dy: var(--push, 0px); }
  :root.wm-consent-first .route-fill {
    display: block;
    --x: 36;
    --y: 1000;
    width: 2.2px;
    height: var(--push, 0px);
    margin-left: -1.1px;
    background: repeating-linear-gradient(to bottom, #4f4944 0 7px, transparent 7px 17px);
  }
  /* From 768 px the banner is a bar, which no screen may meet: stage A's
     Birch screen starts below the fold too, with everything from the route's
     start down. */
  @media (min-width: 768px) {
    :root.wm-consent-first .stage-a .hero-stage { --push: max(0px, 100vh - 430 * min(100cqw, 440px) / 390); }
    :root.wm-consent-first .stage-a :is(.isl-birch, .ball, .device, .caption, .hero-pause, .route-goal, .goal-ring, .next-link, .isl-enamel, .isl-neon, .route-low) { --dy: var(--push, 0px); }
    :root.wm-consent-first .stage-a .route-narrow.route-top { top: var(--push, 0px); }
    :root.wm-consent-first .stage-a .route-fill { --y: 420; }
  }
  /* Stage B on a first visit: Apple's first watch starts below the first
     844 px and the cookie sheet; the route and a further cut of Birch fill
     the space (cookie-B-390). Other visits keep the plate's places, the
     Birch watch on the first screen. */
  .wm-consent-first .stage-b .hero-stage { height: calc(min(100cqw, 440px) * 2554 / 390 + var(--push, 0px)); }
  :root.wm-consent-first .stage-b .hero-stage { --push: max(0px, 100vh - 874 * min(100cqw, 440px) / 390); }
  .wm-consent-first .stage-b :is(.isl-birch, .isl-enamel, .isl-neon, .ball, .device, .caption, .route-goal, .goal-ring, .next-link, .hero-pause, .route-low) { --dy: var(--push, 0px); }
  .wm-consent-first .stage-b .route-fill { --y: 860; }
  .wm-consent-first .stage-b .isl-extra { display: block; --x: -170; --y: 440; --w: 540; }
  .wm-consent-first .stage-b .isl-birch { --y: 905; }
  .wm-consent-first .stage-b .isl-enamel { --y: 1494; }
  .wm-consent-first .stage-b .isl-neon { --y: 2026; }
  .wm-consent-first .stage-b :is(.route-narrow.route-top, .route-narrow.route-low) { display: none; }
  .wm-consent-first .stage-b .route-narrow-b.route-top { display: block; height: calc(860 * var(--u)); }
  .wm-consent-first .stage-b .route-narrow-b.route-low { display: block; --y: 860; height: calc(1694 * var(--u)); top: calc(var(--y) * var(--u) + var(--dy, 0px)); }
  .wm-consent-first .stage-b .ball-1 { --y: 1095; }
  .wm-consent-first .stage-b .ball-2 { --y: 1315; }
  .wm-consent-first .stage-b .ball-3 { --y: 1718; }
  .wm-consent-first .stage-b .ball-4 { --y: 2263; }
  .wm-consent-first .stage-b .dev-birch { --y: 874; }
  .wm-consent-first .stage-b .dev-enamel { --y: 1449; }
  .wm-consent-first .stage-b .dev-neon { --y: 1974; }
  .wm-consent-first .stage-b .cap-birch { --y: 1235; }
  .wm-consent-first .stage-b .cap-enamel { --y: 1791; }
  .wm-consent-first .stage-b .cap-neon { --y: 2329; }
  .wm-consent-first .stage-b .route-goal { --y: 2404; }
  .wm-consent-first .stage-b .goal-ring { --y: 2408; }
  .wm-consent-first .stage-b .next-link { --y: 2484; }
  .wm-consent-first .stage-b .hero-pause { --y: 1296; }
}
@media (min-width: 1024px) and (max-width: 1055px) and (max-height: 647.98px), (min-width: 1056px) and (max-width: 1215px) and (max-height: 623.98px), (min-width: 1216px) and (max-height: 599.98px) {
  :root:not(.wm-consent-first) .hero .cap-enamel { left: auto; right: calc(395 * var(--u)); }
  :root:not(.wm-consent-first) .hero .cap-neon { left: auto; right: calc(464.8 * var(--u)); }
  /* The action keeps clear of the Birch watch (its box starts at 293.4) at
     every scale: Notify me narrows, Apple's badge stays 40–44 px tall. */
  :root:not(.wm-consent-first) .hero-action .notify { width: min(150px, calc(217.4 * var(--u) - 12px)); }
  :root:not(.wm-consent-first) .hero-action .badge img { height: clamp(40px, calc((217.4 * var(--u) - 12px) / 2.9916), 44px); }
  /* The goal ring (a fixed 28 px) centred on the route's end at every scale. */
  :root:not(.wm-consent-first) .goal-ring { --x: 1290; --y: 116; margin: -14px 0 0 -14px; }
  :root:not(.wm-consent-first) .route-goal { left: calc(1290 * var(--u) + 22px); }
}


/* The compact cookie banner (site.css) ends at least 16 px under the action on
   a first visit: on a viewport too short for all its words, they scroll
   inside it and the buttons stay in view. The action's top is 328 design
   pixels down the 390 plate, and the action (Notify me or the badge) at most
   53 px tall. */
@media (max-width: 767px) and (max-height: 719.98px), (min-width: 768px) and (max-width: 773px) and (max-height: 903.98px), (min-width: 774px) and (max-width: 799px) and (max-height: 879.98px), (min-width: 800px) and (max-width: 853px) and (max-height: 861.98px), (min-width: 854px) and (max-width: 895px) and (max-height: 671.98px), (min-width: 896px) and (max-width: 991px) and (max-height: 647.98px), (min-width: 992px) and (max-width: 1023px) and (max-height: 623.98px), (min-width: 1024px) and (max-width: 1055px) and (max-height: 647.98px), (min-width: 1056px) and (max-width: 1215px) and (max-height: 623.98px) {
  .wm-consent { max-height: max(118px, 100svh - 69px - 328 * min(100vw, 440px) / 390); }
}

/* ---- Below the first screen: the sections on the spine -------------------- */
.flow { --gap: 200px; --spine: -56px; --hole: 18px; --sphere: 44px; --ball: 68px; position: relative; }
.sec { position: relative; margin-top: var(--gap); }
.sec-in {
  --k: calc(100cqw / 1120);
  container-type: inline-size;
  position: relative;
  width: min(1120px, calc(100% - 192px));
  margin: 0 auto;
}
/* The spine: a quiet dashed line in the margin, from the first section's hole
   to the goal; it draws on as each section comes up (home.js sets --draw). */
.sec-in::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: calc(var(--spine) - 0.85px);
  top: 0;
  bottom: calc(-1 * var(--gap));
  width: 1.7px;
  background: repeating-linear-gradient(to bottom, #8a7c6f 0 6px, transparent 6px 18px);
  clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0);
  pointer-events: none;
}
.sec-get .sec-in::before { top: 14px; }
.sec-close .sec-in::before { display: none; }
.spine-mark { position: absolute; z-index: 15; pointer-events: none; }
.spine-mark.hole {
  left: calc(var(--spine) - var(--hole) / 2);
  top: 10px;
  width: var(--hole);
  height: var(--hole);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 67%, #241b15 0, #241b15 52%, #75604c 60%, #d7c9ba 78%, #f4ece3 100%);
  box-shadow: inset 0 2px 3px rgb(44 22 14 / 0.33);
}
.sec-get .spine-mark.hole { top: 5px; }
.spine-mark.ball { left: calc(var(--spine) - var(--sphere) / 2); top: 6px; width: var(--sphere); height: auto; }
.detour, .spine-end { position: absolute; z-index: 3; overflow: visible; pointer-events: none; display: none; }
.detour-side { display: none; }
.detour path, .spine-end path { fill: none; stroke: #8a7c6f; stroke-width: 1.7; stroke-dasharray: 6 12; vector-effect: non-scaling-stroke; }
.detour, .spine-end { clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0); }

.sec h2 { text-wrap: wrap; margin: 0; max-width: 800px; font-size: 52px; line-height: 1.1; font-weight: 750; letter-spacing: -1.2px; scroll-margin-top: 24px; }
.sec-body p { margin: 0; font-size: 18px; line-height: 28px; }
.sec-body { margin-top: 32px; }
.sec-play .sec-body { max-width: 550px; }
.sec-uses .sec-body { max-width: 650px; }
.sec-body p + p { margin-top: 16px; }
.home a:not(.chip, .card, .notify, .next-link, .brand), .soon a { color: var(--link); }
.flow :is(h2, .sec-body, .lead, .hooks, .steps, .chips, .note, .marble-labels, .fit-list, .faq-list, .close-copy, .wm-form) { position: relative; z-index: 60; }

/* The art zones: each its own design size (--zw × --zh), its parts placed
   in its pixels (--z). */
.zone { --z: calc(100cqw / var(--zw)); container-type: inline-size; position: relative; aspect-ratio: var(--zw) / var(--zh); }
.zone > * { position: absolute; left: calc(var(--x, 0) * var(--z)); top: calc(var(--y, 0) * var(--z)); margin: 0; }
.zone > .island, .zone > img { width: calc(var(--w) * var(--z)); height: auto; max-width: none; display: block; }
.zone > .device { z-index: 40; --u: var(--z); width: calc(201.6 * var(--z)); height: calc(316.8 * var(--z)); }
.zone > .caption { z-index: 60; }

/* S1 (#get, WM-0207 round 6b): the answer on our cream lead surface, its
   first sentence large, beside our Birch board and steel ball; the facts in
   one line of body text (or, before launch, the line and the signup); then
   where to start, three cards, each one link, with our art. */
.sec-get { margin-top: 200px; }
.lead { padding: 40px; border: 1px solid #e1d3c1; border-radius: 32px; background: linear-gradient(120deg, #f1e5d4 0%, #f4ece0 60%, #f6efe5 100%); }
.lead-grid { display: grid; grid-template-columns: minmax(0, 686fr) minmax(0, 288fr); gap: calc(64 * var(--k)); align-items: center; }
.answer { margin: 0; }
.answer-open { display: block; font-size: 30px; line-height: 38px; font-weight: 750; letter-spacing: -0.4px; }
.answer-rest { display: block; margin-top: 16px; font-size: 18px; line-height: 28px; }
.lead-art { position: relative; aspect-ratio: 288 / 220; }
.lead-art img { position: absolute; display: block; max-width: none; height: auto; }
.lead-island { left: -10.42%; top: 9.09%; width: 118.06%; }
.lead-ball { left: 39.24%; top: 38.18%; width: 22.92%; }
.facts, .avail { margin: 0; font-size: 18px; line-height: 28px; }
.facts { margin-top: 28px; }
.get-zone { margin-top: 28px; }
.hooks { margin-top: 48px; }
.hooks > .spine-mark.ball { top: calc(14px - var(--sphere) / 2); }
.hooks > .spine-mark.hole { top: calc(14px - var(--hole) / 2); }
.hooks-label { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.1px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
/* Each card lifts as our own surface (round 6's .lift: a face and a soft
   shadow of their own, WM-0088); nothing of Apple's is in one. */
.card {
  --face: #fffdf9;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 326px;
  height: 100%;
  padding: 28px;
  border: 1px solid #d4c4b3;
  border-radius: 24px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease;
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--face); }
.card::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 5%;
  right: 5%;
  top: 12%;
  bottom: -4%;
  border-radius: inherit;
  background: rgb(87 65 43 / 0.2);
  filter: blur(20px);
  transform: translateY(12px);
  pointer-events: none;
  transition: transform 140ms ease, background-color 140ms ease;
}
.card:hover { --face: #fffefa; border-color: var(--link); transform: translateY(-4px); }
.card:hover::after { background: rgb(87 65 43 / 0.27); transform: translateY(16px); }
.card:hover .card-title { color: var(--link); }
.card:hover .card-arrow { border-color: var(--link); background: #e4eddf; }
.card:active { --face: #eee8dc; padding: 27px; border: 2px solid var(--link); transform: translateY(1px) scale(0.99); transition-duration: 0s; }
.card:active::after { background: rgb(87 65 43 / 0.14); transform: translateY(4px); }
.card:active .card-arrow { border-color: var(--link); background: var(--link); color: #fffaf5; }
.card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.card-art { position: relative; display: block; flex: none; width: 100%; height: 110px; }
.card-art img { position: absolute; display: block; max-width: none; height: auto; }
.card-island { left: 0; top: -12px; width: 192px; }
.card-ball { left: 80px; top: 20px; width: 34px; }
.card-fan { left: -7px; top: -16px; width: 210px; }
.card-rim { left: -3px; top: -12px; width: 192px; }
.card-title { display: block; margin-top: 16px; font-size: 24px; line-height: 30px; font-weight: 750; letter-spacing: -0.3px; }
.card-text { display: block; margin-top: 12px; padding-right: 50px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.card-arrow { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #c5b39e; border-radius: 50%; background: #f9f5ed; color: var(--link); font-size: 26px; line-height: 32px; }

/* S2: How it plays. Compact without JavaScript, with reduced motion and where
   the viewport is too short to pin it: the heading and its words, then the
   steps beside the watch on step 2. With motion it pins (below). */
.play-row { display: grid; grid-template-columns: minmax(0, 500fr) minmax(0, 520fr); grid-template-areas: "head head" "body body" "steps media"; gap: 0 calc(100 * var(--k)); align-items: center; }
.play-row > h2 { grid-area: head; }
.play-row > .sec-body { grid-area: body; }
.play-runway, .play-pin { display: contents; }
.step-index { display: none; }
.play-media { grid-area: media; margin-top: 32px; }
.steps { grid-area: steps; display: flex; flex-direction: column; gap: 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--spine) - 6px);
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 67%, #241b15 0, #241b15 52%, #75604c 60%, #d7c9ba 78%, #f4ece3 100%);
  box-shadow: inset 0 2px 3px rgb(44 22 14 / 0.33);
}
.step.is-active::after { content: ""; position: absolute; left: -24px; top: -8px; bottom: -8px; width: 3px; border-radius: 2px; background: #497a61; }
.step-lead { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.3px; color: #5b4f45; }
.step.is-active .step-lead { color: var(--ink); }
.step-lead:focus { outline: none; }
.step-lead:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.step-body { margin: 12px 0 0; font-size: 17px; line-height: 26px; }
.play-stage { --zw: 520; --zh: 530; --mid: 261.6; --under: 492; }
.play-stage > .island { --x: -30; --y: 115; --w: 650; }
.play-stage > .device { --x: 160; --y: 50; }
.play-stage > .step-slab { --x: -15; --y: 160; --w: 590; z-index: 40; }
.play-stage > .crown-cap { --x: 402; --y: 170; width: calc(170 * var(--z)); z-index: 60; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.play-stage > .crown-arrow { --x: 374; --y: 150; width: 40px; height: 40px; z-index: 60; }
.crown-arrow path { fill: none; stroke: #55483e; stroke-width: 1.5; }
/* Step 3's note stands on the ground under the island's edge, centred under
   the watch (wux1's P2 on ce1c501), at --under; the steps' Pause video control
   (stage A's videos) stands centred under the note's line, 16 px below it,
   never beside it (wux1's P3 on dfc8570); --mid is the screen's centre. The
   control is 150 px wide. */
.play-stage > .full-note { --x: 160.8; --y: 492; width: calc(201.6 * var(--z)); z-index: 60; text-align: center; white-space: nowrap; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.play-stage > .play-pause { left: calc(var(--mid) * var(--z) - 75px); top: calc(var(--under) * var(--z) + 22px + 16px); }
/* Stage A's control stands below the zone's own box (its pixels don't scale
   with the zone): the room under the zone keeps it clear of what follows,
   16 px or more where the steps' list follows (a phone). */
.stage-a .play-stage { margin-bottom: 56px; }
/* Step 2 shows until the pinned story picks the step. The watch's screen
   changes at once: a watch (and a bare screen) never fades; the outgoing
   screen stays under the incoming one a moment, so no frame is empty. */
[data-wm-for]:not(.is-on, .was-on) { display: none; }
.device .step-screen { z-index: 1; }
.device .step-screen.is-on { z-index: 2; }
.js .play-stage > .crown-cap.is-on, .js .play-stage > .crown-arrow.is-on, .js .play-stage > .full-note.is-on, .js .play-stage > .step-slab.is-on { animation: wm-fade-in 200ms ease-out both; }
@keyframes wm-fade-in { from { opacity: 0; } }
.play-pause.is-idle { visibility: hidden; }

/* S3: Find your first challenge. */
.challenge-top { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 500fr); gap: 0 calc(150 * var(--k)); }
.challenge-copy h2 { max-width: 470px; }
.st-graphite { --zw: 500; --zh: 520; margin: 0; }
.st-graphite > .island { --x: -20; --y: 70; --w: 600; }
.st-graphite > .device { --x: 190; --y: 0; }
.st-graphite > .caption { --x: 120; --y: 470; }
.st-walnut { --zw: 650; --zh: 520; width: calc(650 * var(--k)); margin: 32px 0 0; }
.st-walnut > .island { --x: -40; --y: 70; --w: 650; }
.st-walnut > .device { --x: 190; --y: 0; }
.st-walnut > .caption { --x: 120; --y: 475; }
.chips { display: grid; grid-template-columns: repeat(5, minmax(0, 208px)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.chip {
  position: relative;
  display: block;
  min-height: 86px;
  padding: 15px 12px 14px 24px;
  border: 1px solid #cec0b2;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  line-height: 23px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.chip span { display: block; margin-top: 3px; font-size: 14px; line-height: 21px; font-weight: 450; color: var(--ink-2); }
.chip::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 16px; width: 5px; border-radius: 3px; background: var(--look); }
.chip-1 { --look: #c99c62; }
.chip-2 { --look: #517d72; }
.chip-3 { --look: #31276d; }
.chip-4 { --look: #425360; }
.chip-5 { --look: #59391f; }
.chip:hover { background: #fff7ee; text-decoration: underline; }
.chip:active { background: #f6ede3; box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.08); }
/* The notes are prose: body text (the PO's typography rule, 2026-10-17;
   WM-0207 round 6b PATTERN_SCAN F02, F03). */
.note { margin: 24px 0 0; font-size: 18px; line-height: 28px; color: var(--ink); }
/* The slab's picture is clear over its top 7.25 % of its width (58 of 800): the
   slab comes up to 48 px under the words above it, as close as its drift (40 px
   either way) lets it pass them (WM-0204 item 28). */
.marbles { width: calc(800 * var(--k)); margin: calc(48px - 0.0725 * 800 * var(--k)) auto 0; }
.marble-slab { display: block; width: 100%; height: auto; }
.marble-labels { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 0; padding: 0; list-style: none; text-align: center; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.marbles-note { max-width: 700px; margin: 24px auto 0; }
@media (min-width: 1024px) {
  /* Beside the slab, the marbles note, at the middle of the slab and its labels. */
  .marbles-row { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 352fr); gap: 0 calc(48 * var(--k)); align-items: center; margin: calc(48px - 0.0725 * 720 * var(--k)) 0 0; }
  .marbles-row > .marbles { width: auto; margin: 0; }
  .marbles-row > .marbles-note { max-width: none; margin: 0; }
}
.sec-play .sec-in::before { bottom: calc(40px + var(--turn, 0px) - var(--gap)); }
@media (min-width: 1024px) {
  .sec-challenge .sec-in::before { display: none; }
  /* The spine's detour between Graphite (4) and Walnut (5), in the plate's numbers,
     scaled evenly so its turns stay round (WM-0204 item 29). It turns off the spine
     40 px above the section with a 48-unit arc, so the line before it stops that
     much higher (--turn), and rejoins the spine with another. Its run back sits
     midway between Walnut's caption and the chips: their text and margins keep
     their size where the plate's numbers shrink, so below 1,312 px the run comes
     down by --low, and the straight side between them grows by as much. It draws
     on in order: the turns above, the side, the run back. */
  .sec-play > .sec-in { --turn: calc(48 * var(--k)); }
  .sec-challenge > .sec-in { --low: calc(110px - 110 * var(--k)); }
  .detour { display: block; left: var(--spine); top: calc(-40px - 48 * var(--k)); width: calc(596 * var(--k)); height: calc(712 * var(--k)); }
  .detour:not(.detour-low) { clip-path: inset(0 0 clamp(0%, calc((0.62 - var(--draw, 1)) / 0.62 * 100%), 100%) 0); }
  .detour-side {
    display: block;
    position: absolute;
    z-index: 3;
    left: calc(var(--spine) + 536 * var(--k) - 0.85px);
    top: calc(664 * var(--k) - 40px);
    width: 1.7px;
    height: calc(419 * var(--k) + var(--low));
    background: repeating-linear-gradient(to bottom, #8a7c6f 0 6px, transparent 6px 18px);
    clip-path: inset(0 0 clamp(0%, calc((0.92 - var(--draw, 1)) / 0.3 * 100%), 100%) 0);
    pointer-events: none;
  }
  .detour-low { top: calc(1083 * var(--k) - 40px + var(--low)); height: calc(93 * var(--k)); clip-path: inset(0 0 clamp(0%, calc((1 - var(--draw, 1)) / 0.08 * 100%), 100%) 0); }
  .sec-challenge .sec-in::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: calc(var(--spine) - 0.85px);
    top: calc(1176 * var(--k) - 40px + var(--low));
    bottom: calc(-1 * var(--gap));
    width: 1.7px;
    background: repeating-linear-gradient(to bottom, #8a7c6f 0 6px, transparent 6px 18px);
    pointer-events: none;
  }
}

/* S4: Is WristMaze for you? Five short lines, our balls as markers. */
.field { position: absolute; z-index: 2; pointer-events: none; }
.field-enamel { right: -60px; top: 60px; width: 500px; height: 330px; border-radius: 48% 52% 42% 58%; background: radial-gradient(ellipse at 58% 40%, #d5e2ce 0, #e4ecde 43%, #edf0e8aa 61%, transparent 74%); }
.fit-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: 32px calc(140 * var(--k)); margin: 32px 0 0; padding: 0 0 0 38px; list-style: none; }
.fit-list li { position: relative; font-size: 17px; line-height: 27px; }
/* A plain en dash in a hanging column, not a ball (PATTERN_SCAN F04): our
   balls and holes mean the route. */
.fit-list li::before { content: "–"; content: "–" / ""; position: absolute; left: -28px; top: 0; color: var(--ink-2); }

/* S5: the time to beat (WM-0207 round 6b): S7's real time engraved on our
   plaque; the Level 1 complete screen and the Leaderboards, each on a
   Graphite cut; the three captions on one line (380.8 design pixels below
   the row in stage B, 336.8 in stage A). The watches keep their size. */
.uses-row { --cap: 380.8; display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 80fr) minmax(0, 260fr) minmax(0, 40fr) minmax(0, 260fr); align-items: start; margin-top: 32px; }
.stage-a .uses-row { --cap: 336.8; }
.uses-fig { --vis: 316.8; margin: 0; }
.uses-fig:nth-child(1) { --vis: 320; grid-column: 1; }
.uses-fig:nth-child(2) { grid-column: 3; }
.uses-fig:nth-child(3) { grid-column: 5; }
.plaque { --zw: 480; --zh: 320; }
.plaque > img { --w: 480; }
.plaque > .lift-shadow { --x: 60; --y: 214; width: calc(360 * var(--z)); height: calc(94 * var(--z)); }
.engraving {
  --x: 40;
  --y: 116;
  z-index: 60;
  width: calc(400 * var(--z));
  color: #f4f0e7;
  font-size: max(32px, calc(56 * var(--z)));
  line-height: calc(64 * var(--z));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 -1px 1px rgb(17 26 34 / 0.67);
  /* The words sit on our slate picture, not on the page's ground; an empty
     image layer says so to contrast checkers, which cannot see the picture.
     Measured on the slate under the words: 9.4:1 median, 6.8:1 at the 99th
     percentile (WM-0204 evidence). */
  background-image: linear-gradient(transparent, transparent);
}
.st-cut { --zw: 260; --zh: 316.8; }
.st-cut > .island { --x: -40; --y: 130; --w: 340; }
.st-cut > .device { --x: 29.2; --y: 0; }
.stage-a .st-cut > .island { --y: 82.7; }
.uses-cap { position: relative; z-index: 60; margin: calc((var(--cap) - var(--vis)) * var(--k)) auto 0; font-size: 14px; line-height: 22px; color: var(--ink-2); text-align: center; }
.uses-fig:nth-child(1) .uses-cap { max-width: 420px; }

/* S6: free and full, the table on a card. */
.field-walnut { right: -100px; bottom: -60px; width: 390px; height: 350px; border-radius: 46% 54% 58% 42%; background: radial-gradient(ellipse at 50% 50%, #d9b99a77 0, #e6d4bf66 43%, transparent 74%); }
.free-body p { max-width: 760px; }
.free-body table {
  width: 100%;
  margin-top: 32px;
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  font-size: 16px;
  line-height: 24px;
}
.free-body th, .free-body td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.free-body tr:last-child > * { border-bottom: 0; }
.free-body thead th { background: var(--card-head); font-size: 19px; line-height: 28px; font-weight: 700; }
.free-body thead th:first-child { border-top-left-radius: 19px; }
.free-body thead th:last-child { border-top-right-radius: 19px; }
.free-body tbody th { width: 20%; font-weight: 650; }
.free-body tbody th strong { font-weight: 650; }
.free-body td { width: 40%; }
/* The column heads carry our looks as pucks: Birch for free, all five for the full version. */
.free-body thead th:nth-child(2)::before,
.free-body thead th:nth-child(3)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  margin: -2px 8px 0 0;
  background: url("/assets/img/puck-birch.ee0cbc4baf.avif") left center / 28px auto no-repeat;
}
.free-body thead th:nth-child(2)::before { width: 28px; }
.free-body thead th:nth-child(3)::before {
  width: 156px;
  background:
    url("/assets/img/puck-birch.ee0cbc4baf.avif") 0 center / 28px auto no-repeat,
    url("/assets/img/puck-enamel.7375a28f88.avif") 32px center / 28px auto no-repeat,
    url("/assets/img/puck-neon.4b7edf8ad8.avif") 64px center / 28px auto no-repeat,
    url("/assets/img/puck-graphite.f9c01ec084.avif") 96px center / 28px auto no-repeat,
    url("/assets/img/puck-walnut.fae5194397.avif") 128px center / 28px auto no-repeat;
}

/* S7: the questions, always open, in three columns. */
.field-neon { right: -210px; top: 90px; width: 460px; height: 420px; border-radius: 52% 48% 62% 38%; background: radial-gradient(ellipse at 65% 40%, #d9d1ed88 0, #e9e1f166 43%, transparent 74%); }
.faq-list { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 34px; margin-top: 32px; }
.faq-list h3 { margin: 0; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 23px; line-height: 30px; font-weight: 700; letter-spacing: -0.25px; }
.faq-list p { margin: 14px 0 0; font-size: 16px; line-height: 26px; }

/* S8: the goal. */
.field-warm { left: -170px; top: -60px; width: 800px; height: 520px; border-radius: 50%; background: radial-gradient(ellipse at 50% 48%, #ead1b877 0, #f0e0cf55 40%, transparent 72%); }
.close-grid { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 480fr); gap: 0 calc(80 * var(--k)); align-items: center; }
.goal-zone { --zw: 560; --zh: 374; }
.goal-zone > img { --x: -40; --y: 0; --w: 560; }
.close-copy h2 { max-width: 480px; }
.close-link { margin: 24px 0 0; font-size: 18px; line-height: 28px; font-weight: 550; }
.close-link a::after { content: "\a0↗"; content: "\a0↗" / ""; }
.spine-end-wide { display: block; left: var(--spine); top: 0; width: calc(306 * var(--k)); height: calc(182 * var(--k)); }
.last-ball { position: absolute; z-index: 30; left: calc(188 * var(--k) - 22px); top: calc(180 * var(--k) - 22px); width: 44px; height: auto; }

.home ~ .foot { margin-top: 200px; }

/* The start page's forms (the signup, twice): a light field, a dark button. */
.home .wm-form, .soon .wm-form { width: min(640px, 100%); margin: 32px 0 0; gap: 0; }
.home .wm-form label, .soon .wm-form label { font-size: 18px; line-height: 28px; font-weight: 400; }
.home .wm-row, .soon .wm-row { gap: 10px; margin-top: 8px; }
.home .wm-form input, .soon .wm-form input {
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--field-edge);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
}
.home .wm-form input[aria-invalid="true"], .soon .wm-form input[aria-invalid="true"] { border: 2px solid #9b3329; padding: 10px 14px; }
.home .wm-form ::placeholder, .soon .wm-form ::placeholder { color: #63554a; }
.home .wm-form button, .soon .wm-form button {
  flex: none;
  width: 150px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fffaf5;
  font-size: 15px;
  line-height: 24px;
  font-weight: 650;
  transition: background-color 120ms ease, translate 120ms ease;
}
.home .wm-form button:hover, .soon .wm-form button:hover { background: #3a2e25; }
.home .wm-form button:active, .home .wm-form button.is-sending,
.soon .wm-form button:active, .soon .wm-form button.is-sending { transform: none; filter: none; background: #44342a; translate: 0 1px; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.33); }
.home .wm-form button.is-sending::after, .soon .wm-form button.is-sending::after { background: #fffaf5; }
.home .wm-form button.is-sent::after, .soon .wm-form button.is-sent::after { content: "\a0✓"; content: "\a0✓" / ""; }
/* The signup's note, its privacy link and its messages are body text (F05, F06). */
.home .wm-note, .soon .wm-note { margin-top: 20px; font-size: 18px; line-height: 28px; color: var(--ink); }
.home .wm-status, .soon .wm-status { margin-top: 12px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--success); }
.home .wm-status.is-error, .soon .wm-status.is-error { color: var(--error); border-left: 0; padding-left: 0; }

/* ---- Tablets (600–1023): two columns where the plan says so ---------------- */
@media (max-width: 1023px) {
  .flow { --gap: 160px; --spine: -32px; --hole: 14px; --sphere: 36px; }
  .sec-in { --k: 1px; width: calc(100% - 104px); margin: 0 32px 0 72px; }
  .sec h2 { font-size: 44px; letter-spacing: -0.9px; }
  .sec-get { margin-top: 160px; }
  .lead { padding: 32px; }
  .lead-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card { min-height: 180px; padding: 24px; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px 24px; align-items: start; }
  .card:active { padding: 23px; }
  .card-art { grid-row: 1 / 3; grid-column: 1; width: 120px; height: 100px; }
  .card-title { grid-column: 2; grid-row: 1; margin: 0; }
  .card-text { grid-column: 2; grid-row: 2; margin: 0; padding: 0 0 56px; }
  .card-island, .card-rim { left: -12px; top: -4px; width: 150px; }
  .card-ball { left: 52px; top: 22px; width: 28px; }
  .card-fan { left: -14px; top: -8px; width: 160px; }
  .play-row { grid-template-columns: minmax(0, 1fr) 326px; gap: 0 32px; }
  .flow { --ball: 56px; }
  .step-lead { font-size: 25px; line-height: 31px; }
  .play-stage { --zw: 326; --zh: 380; --mid: 163.4; --under: 341; }
  .play-stage > .island { --x: -62; --y: 60; --w: 430; }
  .play-stage > .device { --x: 71; --y: 10; width: calc(184.8 * var(--z)); height: calc(290.4 * var(--z)); }
  .play-stage > .step-slab { --x: -30; --y: 90; --w: 380; }
  .play-stage > .crown-cap { --x: 262; --y: 8; width: calc(64 * var(--z)); }
  .play-stage > .crown-arrow { --x: 270; --y: 92; }
  .play-stage > .full-note { --x: 166; --y: 341; width: auto; text-align: left; }
  .stage-a .play-stage { margin-bottom: 64px; }
  .stage-a .play-stage > .full-note { --x: 71; --y: 341; width: calc(184.8 * var(--z)); text-align: center; }
  .challenge-top { display: block; }
  .challenge-copy h2 { max-width: 560px; }
  .st-graphite, .st-walnut { --zw: 326; width: min(326px, calc(50% - 12px)); display: inline-block; vertical-align: top; margin: 40px 0 0; }
  .st-graphite { --zh: 409; }
  .st-walnut { --zh: 422; margin-left: 20px; }
  .st-graphite > .island { --x: -62; --y: 55; --w: 440; }
  .st-walnut > .island { --x: -72; --y: 55; --w: 460; }
  .st-graphite > .device, .st-walnut > .device { --x: 72; --y: 0; width: calc(184.8 * var(--z)); height: calc(290.4 * var(--z)); }
  .st-graphite > .caption { --x: 0; --y: 365; }
  .st-walnut > .caption { --x: 0; --y: 378; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marbles { width: min(640px, 100%); margin-top: calc(48px - 0.0725 * min(640px, 100%)); }
  .fit-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  /* The plaque across, the two watches side by side under it. */
  .uses-row { grid-template-columns: minmax(0, 260px) minmax(0, 260px); gap: 48px 40px; justify-content: center; max-width: 560px; margin-left: auto; margin-right: auto; }
  .uses-fig:nth-child(1) { grid-column: 1 / -1; justify-self: center; width: min(480px, 100%); }
  .uses-fig:nth-child(2) { grid-column: 1; }
  .uses-fig:nth-child(3) { grid-column: 2; }
  .uses-fig:nth-child(1) .uses-cap { margin-top: 16px; }
  .uses-fig.station .uses-cap { margin-top: 64px; }
  .stage-a .uses-fig.station .uses-cap { margin-top: 24px; }
  .faq-list { display: block; }
  .faq-list h3 { margin-top: 32px; }
  .faq-list h3:first-child { margin-top: 0; }
  .close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
  .goal-zone { --zw: 326; --zh: 274; }
  .goal-zone > img { --x: -42; --w: 410; }
  .field-warm { left: -200px; top: -80px; width: 650px; height: 460px; }
  .spine-end-wide { display: none; }
  .sec-close .sec-in::before { display: block; bottom: auto; height: 160px; }
  .last-ball { display: none; }
  .home ~ .foot { margin-top: 160px; }
}

/* ---- Phones (under 600): one column at x 32, the spine at x 16 ---------- */
@media (max-width: 599px) {
  .flow { --gap: 140px; --spine: -16px; --hole: 12px; --sphere: 28px; }
  .sec-in { width: calc(100% - 64px); margin: 0 32px; }
  .sec-get { margin-top: 92px; }
  .sec h2 { font-size: 36px; line-height: 42px; letter-spacing: -0.55px; }
  .sec-body p, .answer-rest, .facts, .avail { font-size: 17px; line-height: 26px; }
  .lead { padding: 24px; border-radius: 24px; }
  .lead-grid { display: block; }
  .answer-open { font-size: 24px; line-height: 32px; letter-spacing: -0.25px; }
  .lead-art { margin-top: 12px; aspect-ratio: 276 / 136; }
  .lead-island { left: 10.14%; top: 0; width: 79.71%; }
  .lead-ball { left: 43.84%; top: 30.15%; width: 15.94%; }
  .facts, .get-zone { margin-top: 20px; }
  .hooks { margin-top: 40px; }
  .card { min-height: 196px; padding: 20px; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 16px; border-radius: 22px; }
  .card:active { padding: 19px; }
  .card-art { width: 80px; height: 80px; }
  .card-title { font-size: 22px; line-height: 28px; letter-spacing: -0.2px; }
  .card-text { padding: 0; }
  .card-island, .card-rim { left: -16px; top: 0; width: 112px; }
  .card-ball { left: 30px; top: 17px; width: 24px; }
  .card-fan { left: -18px; top: 0; width: 120px; }
  .card-arrow { left: 38px; right: auto; bottom: 20px; }
  .play-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "media" "steps"; gap: 0; align-items: stretch; }
  .steps { margin-top: 24px; }
  .flow { --ball: 32px; }
  .play-media .play-stage { width: min(326px, 100%); }
  .step::before { left: -22px; top: 9px; }
  .step.is-active::after { left: -12px; }
  .play-stage > .crown-cap { --x: 282; width: calc(60 * var(--z)); }
  .play-stage > .crown-arrow { --x: 278; }
  .play-stage > .full-note { --x: 212; }
  .st-graphite, .st-walnut { display: block; width: min(326px, 100%); margin: 32px 0 0; }
  .st-graphite > .caption, .st-walnut > .caption { --x: -16; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-left: -16px; width: calc(100% + 32px); }
  .marbles { width: calc(100% + 76px); margin-left: -38px; margin-top: calc(48px - 0.0725 * (100% + 76px)); }
  .marble-labels { margin-left: 30px; margin-right: 46px; }
  .field-enamel { right: -150px; top: 80px; width: 330px; height: 430px; }
  .fit-list ul { display: flex; flex-direction: column; gap: 24px; padding-left: 32px; }
  .uses-row { display: block; }
  .uses-fig.station { width: min(326px, 100%); margin-top: 40px; }
  .plaque { --zw: 390; --zh: 260; width: calc(100% + 64px); margin-left: -32px; }
  .plaque > img { --w: 390; }
  .plaque > .lift-shadow { --x: 50; --y: 174; width: calc(290 * var(--z)); height: calc(76 * var(--z)); }
  .st-cut { --zw: 326; --zh: 290.4; }
  .st-cut > .island { --x: -57; --y: 55; --w: 440; }
  .st-cut > .device { --x: 70.6; width: calc(184.8 * var(--z)); height: calc(290.4 * var(--z)); }
  .stage-a .st-cut > .island { --y: 14.5; }
  .uses-fig.station .uses-cap { margin-top: 64px; }
  .stage-a .uses-fig.station .uses-cap { margin-top: -5.6px; }
  .engraving {
    --x: 40;
    --y: 94;
    width: calc(310 * var(--z));
    font-size: max(32px, calc(44 * var(--z)));
    line-height: calc(52 * var(--z));
  }
  .free-body table { width: calc(100% + 32px); margin-left: -16px; }
  .field-walnut { right: -160px; bottom: -70px; width: 330px; height: 350px; }
  .field-neon { right: -150px; top: 240px; width: 340px; height: 560px; }
  .faq-list h3 { font-size: 22px; line-height: 28px; }
  .close-grid { display: block; }
  .goal-zone { width: min(326px, 100%); margin-bottom: 32px; }
  .close-link { font-size: 17px; line-height: 26px; }
  .sec-close .sec-in::before { display: none; }
  .spine-end-narrow { display: block; left: var(--spine); top: 0; width: 187px; height: 162px; }
  .last-ball { display: block; left: 54px; top: 146px; width: 28px; }
  .home ~ .foot { margin-top: 140px; }
  .home .wm-row, .soon .wm-row { flex-direction: column; }
  .note, .home .wm-form label, .soon .wm-form label, .home .wm-note, .soon .wm-note, .home .wm-status, .soon .wm-status { font-size: 17px; line-height: 26px; }
  .home .wm-form button, .soon .wm-form button { width: 100%; }
  .home .wm-form, .soon .wm-form { width: calc(100% + 32px); margin-left: -16px; }
  .lead .wm-form { width: 100%; margin-left: 0; }
}
/* The table under 600 px: each row's header across it, the two columns beside
   each other with their labels (the first row's with our pucks). */
@media (max-width: 599px) {
  .free-body table { display: block; font-size: 15px; line-height: 23px; }
  .free-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .free-body tbody { display: block; }
  .free-body tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hairline); }
  .free-body tr:last-child { border-bottom: 0; }
  .free-body tbody th { grid-column: 1 / -1; width: auto; padding: 12px 15px; background: var(--card-head); border: 0; font-size: 16px; }
  .free-body tbody tr:first-child th { border-radius: 19px 19px 0 0; }
  .free-body td { width: auto; padding: 13px 15px; border: 0; }
  .free-body td:first-of-type { border-right: 1px solid var(--rule-soft); }
  .free-body td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 5px; font-size: 14px; line-height: 22px; font-weight: 700; }
  .free-body tbody tr:first-child td::before { padding-top: 22px; background: url("/assets/img/puck-birch.ee0cbc4baf.avif") left top / 22px auto no-repeat; }
  .free-body tbody tr:first-child td:last-child::before {
    background:
      url("/assets/img/puck-birch.ee0cbc4baf.avif") 0 0 / 22px auto no-repeat,
      url("/assets/img/puck-enamel.7375a28f88.avif") 25px 0 / 22px auto no-repeat,
      url("/assets/img/puck-neon.4b7edf8ad8.avif") 50px 0 / 22px auto no-repeat,
      url("/assets/img/puck-graphite.f9c01ec084.avif") 75px 0 / 22px auto no-repeat,
      url("/assets/img/puck-walnut.fae5194397.avif") 100px 0 / 22px auto no-repeat;
  }
}
/* The pucks, S1's art and How it plays' watch stills wait until their part
   of the page comes near (home.js sets .wm-near on [data-wm-near]), so they
   are not part of the first load: a lazy image under display: none is not
   fetched. Their boxes keep their place meanwhile (the art stands absolutely
   in its frame, the stills in the watch's box). Without JavaScript they come
   with the page. */
@media (scripting: enabled) {
  .free-body:not(.wm-near) thead th::before,
  .free-body:not(.wm-near) tbody tr:first-child td::before { background-image: none; }
  [data-wm-near]:not(.wm-near) img { display: none; }
}

/* ---- Motion ----------------------------------------------------------------
   The first screen's art rises in once at load. Everything else follows the
   scroll (the motion round, webco 2026-10-17), while home.js sets .wm-motion
   (JavaScript, no reduced motion): custom properties it sets each frame drive
   transform and opacity only. Only our art moves: the islands, the colour
   fields, the slab's marbles, the plaque, the goal piece, the hole tokens and
   the rolling ball; the words rise in. A screen or a watch never moves,
   scales, tilts or fades, and nothing passes over it. Reduced motion and no
   JavaScript keep the stills: the design as drawn. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .island, .hero-route .ball, .hero .token { animation: wm-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-art .isl-enamel, .hero-route .ball-2, .cap-enamel .token { animation-delay: 80ms; }
  .hero-art .isl-neon, .hero-route .ball-3, .cap-neon .token { animation-delay: 160ms; }
  .hero-route .ball-4 { animation-delay: 240ms; }
}
@keyframes wm-rise { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: reduce) {
  .js .play-stage > .crown-cap.is-on,
  .js .play-stage > .crown-arrow.is-on,
  .js .play-stage > .full-note.is-on,
  .js .play-stage > .step-slab.is-on { animation: none; }
  .notify, .ctrl, .chip, .home .wm-form button { transition: none; }
  /* S1's cards keep their face, edge and focus changes, without the lift. */
  .card, .card::after { transition: none; }
  .card:hover, .card:active { transform: none; }
}

/* Depth: the islands tilt a few degrees toward or away from the viewer as
   they pass (under a watch too: the watch stays where it is). */
.wm-motion .hero-art .island { transform: perspective(1400px) rotateX(var(--tilt, 0deg)); }
.wm-motion .flow .island[data-wm-depth] { transform: perspective(1400px) translate3d(0, var(--drift, 0px), 0) rotateX(var(--tilt, 0deg)); }

/* The words rise in as they come up. */
.wm-motion .rises { opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 40px); }

/* The hole tokens pop in as the spine reaches them. */
.wm-motion .spine-mark.hole { transform: scale(var(--pop, 1)); }

/* The rolling ball takes the place of the spine's resting balls, and rests in
   holes of its own. */
.spine-mark.for-rider, .rider { display: none; }
.wm-motion .spine-mark.ball, .wm-motion .last-ball { display: none; }
.wm-motion .spine-mark.for-rider { display: block; }
.wm-motion .rider {
  display: block;
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: var(--ball);
  height: var(--ball);
  pointer-events: none;
  opacity: var(--ro, 1);
  transform: translate3d(var(--rx, -200px), var(--ry, 0px), 0);
  will-change: transform;
}
.rider-body { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; transform: scale(var(--rs, 1)); }
/* The steel ball's disc (its centre at 49.96 % × 52.19 % of the picture, its
   radius 35.89 %) fills the body; the picture's own shadow stays outside. */
.rider-ball { position: absolute; left: -19.6%; top: -22.71%; width: 139.31%; height: 139.31%; max-width: none; }
/* Its surface turns as it rolls (the light on it stays): faint streaks of
   the polished steel, blended into the picture. */
.rider-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 10deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0.55) 16deg, rgb(255 255 255 / 0) 34deg, rgb(20 22 26 / 0) 92deg, rgb(20 22 26 / 0.5) 108deg, rgb(20 22 26 / 0) 122deg, rgb(255 255 255 / 0) 196deg, rgb(255 255 255 / 0.4) 207deg, rgb(255 255 255 / 0) 224deg, rgb(20 22 26 / 0) 284deg, rgb(20 22 26 / 0.38) 296deg, rgb(20 22 26 / 0) 312deg);
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 30%, #000 72%);
  mask-image: radial-gradient(circle closest-side, transparent 30%, #000 72%);
  transform: rotate(var(--spin, 0deg));
}
/* A soft contact shadow, to the light's far side; tighter in a hole. */
.rider-shadow {
  position: absolute;
  left: 6%;
  top: 58%;
  width: 100%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(52 36 22 / 0.34), rgb(52 36 22 / 0.12) 62%, rgb(52 36 22 / 0));
  transform: scale(var(--ss, 1));
  opacity: var(--so, 1);
}

/* The slab's marbles settle in turn: a disc of the same picture over each
   marble turns into place, then gives way to the picture. */
.slab { position: relative; --r: 0.068; }
.marble-turn { display: none; }
.wm-motion .marble-turn {
  display: block;
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  width: calc(var(--r) * 200%);
  aspect-ratio: 1;
  left: calc((var(--cx) - var(--r)) * 100%);
  top: calc((var(--cy) - var(--r) * 1977 / 795) * 100%);
  visibility: var(--tv, hidden);
  transform: rotate(var(--turn, 0deg));
}
.marble-turn img { position: absolute; max-width: none; width: calc(100% / (2 * var(--r))); height: auto; left: calc((var(--r) - var(--cx)) / (2 * var(--r)) * 100%); top: calc((var(--r) - 0.40212 * var(--cy)) / (2 * var(--r)) * 100%); }
.mt-1 { --cx: 0.1745; --cy: 0.4226; }
.mt-2 { --cx: 0.388; --cy: 0.4277; }
.mt-3 { --cx: 0.6034; --cy: 0.4277; }
.mt-4 { --cx: 0.8179; --cy: 0.4226; }

/* The plaque and the goal piece rise from their shadow. */
.lift-shadow { display: none; }
.wm-motion .lift-art, .wm-motion .plaque > .engraving { translate: 0 var(--lift, 0px); opacity: var(--lo, 1); }
.wm-motion .lift-shadow {
  display: block;
  --x: 70;
  --y: 250;
  width: calc(420 * var(--z));
  height: calc(110 * var(--z));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(52 36 22 / 0.3), rgb(52 36 22 / 0));
  opacity: var(--so, 0);
  transform: scale(var(--ss, 1));
}
.goal-zone > .lift-shadow { --x: 40; --y: 240; }

/* How it plays, pinned: the section stays while the page scrolls through
   its track (about four views), the steps enter one at a time, and the
   watch's screen follows. Steps so far stand as a short list beside the
   spine; the ones still to come wait unseen. It pins only where home.js
   finds the whole pinned row fits the view above the cookie bar (.wm-pin,
   wrev6 D1, wrev7 P1); elsewhere, and without JavaScript or with reduced
   motion, the compact layout stays at step 2. */
.step-index li { position: relative; display: flex; gap: 12px; align-items: center; margin: 0; padding: 4px 0; font-size: 16px; line-height: 24px; font-weight: 650; color: var(--ink-2); }
.step-index li.is-active { color: var(--ink); }
.step-index li.is-next { opacity: 0; }
.step-index li::before {
  content: "";
  position: absolute;
  left: calc(var(--spine) - var(--hole) / 2);
  top: calc(50% - var(--hole) / 2);
  width: var(--hole);
  height: var(--hole);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 67%, #241b15 0, #241b15 52%, #75604c 60%, #d7c9ba 78%, #f4ece3 100%);
  box-shadow: inset 0 2px 3px rgb(44 22 14 / 0.33);
}
.step-no { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; }
@media (min-width: 600px) and (min-height: 620px) {
  .wm-pin .play-track { height: calc(400vh - 40px); height: calc(400svh - 40px); }
  .wm-pin .play-row {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    grid-template-areas: ". media" "head media" "body media" "index media" "steps media" ". media";
    grid-template-rows: 1fr auto auto auto auto 1fr;
    align-items: start;
  }
  .wm-pin .play-row > .sec-body { margin-top: 20px; }
  .wm-pin .play-media { align-self: center; margin-top: 0; }
  .wm-pin .step-index { display: block; grid-area: index; margin: 24px 0 0; padding: 0; list-style: none; }
  .wm-pin .steps { display: grid; margin-top: 20px; }
  .wm-pin .step { grid-area: 1 / 1; opacity: var(--show, 0); translate: 0 var(--shift, 0px); }
  .wm-pin .step::before, .wm-pin .step.is-active::after { display: none; }
  .wm-pin .step-lead { font-size: 40px; line-height: 46px; letter-spacing: -0.6px; color: var(--ink); }
  .wm-pin .step-body { margin-top: 14px; max-width: 30em; font-size: 19px; line-height: 29px; }
}
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 620px) {
  .wm-pin .step-lead { font-size: 32px; line-height: 38px; }
  .wm-pin .step-body { font-size: 17px; line-height: 26px; }
}
@media (max-width: 599px) and (min-height: 660px) {
  .wm-pin .play-runway { display: block; height: 400vh; height: 400svh; }
  .wm-pin .play-pin {
    display: grid;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    grid-template-areas: "media" "index" "steps";
    grid-template-rows: auto auto 1fr;
    align-content: start;
  }
  .wm-pin .play-media { margin-top: 8px; }
  .wm-pin .step-index { display: block; grid-area: index; margin: 4px 0 0; padding: 0; list-style: none; }
  .wm-pin .step-index li { padding: 0 0 0 6px; font-size: 14px; line-height: 22px; }
  .wm-pin .step-no { width: 22px; height: 22px; font-size: 14px; }
  .wm-pin .steps { display: grid; margin-top: 10px; }
  .wm-pin .step { grid-area: 1 / 1; opacity: var(--show, 0); translate: 0 var(--shift, 0px); }
  .wm-pin .step::before, .wm-pin .step.is-active::after { display: none; }
  .wm-pin .step-lead { font-size: 24px; line-height: 30px; color: var(--ink); }
  .wm-pin .step-body { margin-top: 8px; }
}
/* Pinned, the row (or a phone's band) is a whole view tall and its content
   leaves room under it at the track's end: the next section comes up by that
   room (home.js measures it, --pin-slack), so the run after How it plays is
   the spine's usual gap, as in the compact layout (wux1, 2026-10-17). The
   spine's line still ends 40 px above the next section. */
.wm-pin .sec-play + .sec { margin-top: calc(var(--gap) - var(--pin-slack, 0px)); }
.wm-pin .sec-play .sec-in::before { bottom: calc(40px + var(--turn, 0px) - var(--gap) + var(--pin-slack, 0px)); }
/* The same above it: the whole row's content leaves room over it at the
   track's start, and the section comes up by that room (--pin-top), so the
   run before How it plays is the usual gap too (webco, 2026-10-17). The
   spine's line from the section before ends where it begins. Where the room
   is more than the gap, the section's empty top lies under the section
   before, whose words and cards stay above it. */
.wm-pin .sec-play { margin-top: calc(var(--gap) - var(--pin-top, 0px)); }
.wm-pin .sec:has(+ .sec-play) > .sec-in::before { bottom: calc(var(--pin-top, 0px) - var(--gap)); }
/* While it is pinned, the browser's own scroll anchoring stays off: around
   the sticky story WebKit anchored to boxes whose place changes with the
   scroll and threw the page 440-1,360 px at a step change (stage A, 320 x
   1024, Playwright's WebKit 26.4). home.js keeps the visitor's place itself
   where the story changes height (keepPlace). */
:root.wm-pin { overflow-anchor: none; }
/* Not only while pinned: the start page reveals its later watches as they come
   near (b852f01), and at each reveal WebKit's scroll anchoring moved the page
   4-15 px with nothing in the page moving (Playwright's WebKit 26 at 1,024 x
   700; none with anchoring off). The browser's anchoring stays off here. */
:root:has(main.home) { overflow-anchor: none; }
/* On paper the page is the still design: every word in place, the four
   steps listed, no rolling ball. */
@media print {
  .wm-motion .rises { opacity: 1; translate: none; }
  .wm-motion .rider { display: none; }
  .wm-pin .sec-play + .sec { margin-top: var(--gap); }
  .wm-pin .sec-play .sec-in::before { bottom: calc(40px + var(--turn, 0px) - var(--gap)); }
  .wm-pin .sec-play { margin-top: var(--gap); }
  .wm-pin .sec:has(+ .sec-play) > .sec-in::before { bottom: calc(-1 * var(--gap)); }
  .wm-pin .play-track, .wm-pin .play-runway { height: auto; }
  .wm-pin .play-row, .wm-pin .play-pin { position: static; height: auto; }
  .wm-pin .step { opacity: 1; translate: none; grid-area: auto; }
  .wm-pin .steps { display: flex; flex-direction: column; gap: 28px; }
  .wm-pin .step-index { display: none; }
}
@media (min-width: 1024px) {
  /* The challenge's hole sits where the spine turns into its detour, so the
     ball settles in it on the way. */
  .wm-motion .sec-challenge .spine-mark.hole { top: calc(-40px - 48 * var(--k) - var(--hole) / 2); }
}

/* ---- Coming soon (the state of / until launch) ------------------------------ */
.soon {
  --mark-h: clamp(40px, 10vw, 64px);
  position: relative;
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: clamp(48px, 9vw, 104px) 0 96px;
}
.soon-mark { display: flex; flex-direction: column; align-items: center; gap: calc(var(--mark-h) / 2); margin: 0; padding: calc(var(--mark-h) / 2); }
.soon-mark::before {
  width: calc(var(--mark-h) * 2);
  height: calc(var(--mark-h) * 2);
  background-image: image-set(url("/assets/img/icon-round-128.c78c64ebb3.avif") 1x, url("/assets/img/icon-round-256.44602514af.avif") 2x);
}
.soon-line { width: min(640px, 100%); margin: clamp(32px, 6vw, 72px) 0 0; font-size: 18px; line-height: 28px; text-align: center; }
.soon .wm-form { margin-top: 32px; }
.soon-goal { display: block; width: min(280px, 72%); height: auto; margin-top: 56px; }
@media (min-width: 1024px) {
  .soon { grid-template-columns: 1fr 640px 1fr; column-gap: 40px; }
  .soon > * { grid-column: 2; }
  .soon-line { text-align: center; }
  .soon-goal { grid-column: 3; grid-row: 2 / span 2; align-self: center; justify-self: start; width: min(260px, 100%); margin: 0; }
}
@media (max-width: 599px) {
  .soon { justify-items: stretch; }
  .soon-mark { justify-self: center; }
  .soon-line { text-align: left; }
  .soon .wm-form { width: 100%; margin-left: 0; }
  .soon-goal { justify-self: center; }
}