/* Bayda marketing site, October 2026 redesign (docs/website/redesign-2026-10.md).
   White pages and soft grey surfaces like the app, the app's own tokens, photos in clean rounded frames (never faded into
   the page). Purple is for links, focus, routes and active states, never a button fill: every CTA is the ink capsule.

   Motion: assets/site.js adds `motion` to <html> unless the visitor prefers reduced motion, and writes a 0..1 progress
   to `--p` on every [data-scene]. Every animated rule below sits under `.motion`, so without it (no JS, or reduced
   motion) the page is the static, complete end state. */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F4F4F6;
  --ink: #1C1C1E;
  --body: #46464C;
  --muted: #6C6C73;          /* AA on white and on --surface */
  --hair: rgba(60, 60, 67, .13);
  --accent: #5850D0;
  --accent-hover: #4038B8;
  --accent-tint: #F2F1FD;
  --heat: #E8621A;           /* Theme.chartHeat: the muscle map orange */
  --record: #E8A33D;         /* Theme.record */
  --fuel: #1FA971;           /* Theme.fuel */
  --done: #D1FCAA;           /* Theme.setDoneFill */
  --done-check: #34C759;     /* Theme.setDoneCheck */
  --gutter: 16px;
  --sec: 88px;
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --sh-card: 0 1px 2px rgba(20, 20, 40, .05), 0 14px 34px -14px rgba(20, 20, 40, .22);
  --sh-float: 0 2px 6px rgba(20, 20, 40, .06), 0 28px 56px -22px rgba(20, 20, 40, .34);
  --ease: cubic-bezier(.22, .7, .18, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (min-width: 860px) { :root { --gutter: 40px; --sec: 152px; --r-xl: 36px; --r-lg: 26px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 17px/1.55 var(--font);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
p a:not(.btn), address a, .cstatus a, .doc--legal li a, .doc--legal td a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ticks span, .fine, .fine-print, .faq details p, .lead, .node p, .m-copy p { text-wrap: pretty; }
.caption, .faq summary { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sprite { position: absolute; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
section[id] { scroll-margin-top: 84px; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 15px;
}
.skip:focus { top: 12px; color: #fff; text-decoration: none; }

/* Ink capsule: the CTA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff;
  font: 600 15px/1.2 var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, transform .2s var(--ease);
}
.btn:hover { background: #000; color: #fff; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 50px; padding-inline: 28px; font-size: 16px; }

/* Type roles */
h1, h2 { text-wrap: balance; color: var(--ink); font-family: var(--font-d); font-weight: 700; }
h1 { font-size: 46px; line-height: 1.02; letter-spacing: -.038em; }
h2 { font-size: 38px; line-height: 1.04; letter-spacing: -.034em; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 650; color: var(--ink); letter-spacing: -.015em; }
.lead { font-size: 18px; line-height: 1.5; color: var(--body); }
.caption { font-size: 14px; line-height: 1.4; color: var(--muted); }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 15px; font-weight: 650; letter-spacing: -.005em; color: var(--ink); }
.kicker::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--accent)); }
.k-train { --k: var(--heat); } .k-move { --k: var(--accent); } .k-fuel { --k: var(--fuel); } .k-prog { --k: var(--ink); }
@media (min-width: 860px) {
  h1 { font-size: clamp(60px, 6.4vw, 104px); }
  h2 { font-size: clamp(44px, 4.6vw, 68px); }
  h3 { font-size: 22px; }
  .lead { font-size: 20px; }
}

.sec { padding-block: var(--sec); }
.sec-head { max-width: 40em; }
.sec-head .lead { margin-top: 16px; }
.copy .lead { margin-top: 18px; }
.ticks { display: grid; gap: 12px; margin-top: 26px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ticks svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--ink); }
@media (min-width: 860px) { .ticks li { font-size: 17px; } }

/* Badge, CTA row, the one quiet trust line */
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge img { height: 48px; width: auto; }
a.badge:hover { opacity: .88; text-decoration: none; }
.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }

/* Photos: clean rounded frames, no fades */
.photo { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #E9E6E0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo picture { height: 100%; }

/* Phone: one CSS frame (not Apple's bezel artwork), real captures inside */
.phone {
  --pw: 220px;
  position: relative; width: var(--pw); flex: none;
  padding: calc(var(--pw) * .022);
  border-radius: calc(var(--pw) * .148);
  background: linear-gradient(150deg, #4a4a4e 0%, #1a1a1c 38%, #2b2b2f 72%, #131315 100%);
  box-shadow: 0 0 0 calc(var(--pw) * .004) rgba(255, 255, 255, .14) inset,
              0 40px 70px -30px rgba(20, 20, 40, .5), 0 12px 24px -12px rgba(20, 20, 40, .3);
}
.phone picture { background: #000; border-radius: calc(var(--pw) * .126); overflow: hidden; }
.phone img { width: 100%; }
.phone::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--pw) * .05); width: calc(var(--pw) * .27); height: calc(var(--pw) * .078);
  transform: translateX(-50%); border-radius: 999px; background: #000;
}

/* Small white UI cards, drawn in the app's own vocabulary (values from the sample-mode captures) */
.ui-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  background: #fff; border-radius: 20px; box-shadow: var(--sh-float); color: var(--ink); white-space: nowrap;
}
.ui-card strong { display: block; font: 700 22px/1.1 var(--font-d); letter-spacing: -.02em; }
.ui-k { display: block; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.ui-s { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.ui-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.ui-ic.fuel { background: var(--accent); }
.ui-ic.move { background: var(--accent-tint); color: var(--accent); }
.ui-ic.rec { background: #FFF4DF; color: var(--record); }

/* ================= Dock ================= */
.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top)) 10px 0; pointer-events: none; }
.dock {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 680px; margin-inline: auto; height: 56px; padding: 0 6px 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 0 0 1px rgba(60, 60, 67, .08), 0 8px 28px -12px rgba(20, 20, 40, .28);
  transition: max-width .45s var(--ease), background-color .3s ease, box-shadow .3s ease, height .45s var(--ease), padding .45s var(--ease);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-right: auto; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-logo { display: block; height: 22px; width: auto; }
.nav { display: none; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--body); font-size: 14.5px; font-weight: 550; transition: background-color .2s ease, color .2s ease; }
.nav-links a:hover { color: var(--ink); background: rgba(60, 60, 67, .07); text-decoration: none; }
.dock .btn { min-height: 44px; padding-inline: 18px; font-size: 14.5px; }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.menu-btn:hover { background: rgba(60, 60, 67, .07); }
.menu {
  pointer-events: auto; max-width: 680px; margin: 8px auto 0; padding: 8px;
  border-radius: 26px; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 0 0 1px rgba(60, 60, 67, .08), var(--sh-float);
  transform-origin: top center; animation: menu-in .32s var(--ease);
}
.menu a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 18px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.menu a:hover { background: rgba(60, 60, 67, .07); text-decoration: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (min-width: 860px) {
  .site-header { padding: 18px 24px 0; }
  .nav { display: block; }
  .menu-btn, .menu { display: none !important; }
  /* Expanded over the hero: as wide as the photo, no glass. It contracts into the pill once you scroll. */
  .home .dock { max-width: 1440px; height: 72px; padding: 0 clamp(16px, 3vw, 64px) 0 clamp(20px, 3.4vw, 68px);
    background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; }

  .home .site-header.compact .dock { max-width: 720px; height: 56px; padding: 0 6px 0 20px; background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
    box-shadow: 0 0 0 1px rgba(60, 60, 67, .08), 0 8px 28px -12px rgba(20, 20, 40, .28); }
}
/* Home on phones, before you scroll: the pill holds only the wordmark and the menu (the "Get the app" capsule joins it once
   you scroll). */
.dock .btn { transition: opacity .3s ease, visibility .3s, background-color .2s ease; }
@media (max-width: 859.98px) { .home .site-header:not(.compact) .dock .btn { visibility: hidden; opacity: 0; } }
@media (max-width: 859.98px) {
  .dock { height: 54px; padding-left: 16px; }
  .dock .btn { min-height: 44px; padding-inline: 16px; }
}

/* ================= 1. Hero ================= */
/* Phones ("option 2", after Gentler Streak's mobile hero): a pale lavender ground from the app's accent tint, the app icon,
   the copy centred in ink, the black badge, then the phone. With motion the phone sticks below the dock while real Bayda
   cards fan out from behind it, then Your week slides up over it. Without motion the cards simply sit around the phone.
   Wide screens ("layout B"): copy on white on the left; on the right the street photo as a tall rounded card cropped
   around the group, and the phone overlapping its bottom-right corner, clear of the three people. */
.hero { position: relative; background: linear-gradient(180deg, #F1F0FD 0%, #E8ECFA 100%); color: var(--ink); text-align: center;
  padding-top: calc(92px + env(safe-area-inset-top)); }
.hero-copy { padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 19px/1.1 var(--font-d); color: var(--ink); letter-spacing: -.01em; }
.lockup img { width: 96px; height: 96px; border-radius: 22.37%; box-shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 14px 30px -10px rgba(40, 40, 90, .28); }
.hero h1 { margin-top: 18px; font-size: clamp(38px, 10.6vw, 46px); line-height: 1.03; font-weight: 800; letter-spacing: -.032em; max-width: 9.5em; }
.hero .lead { margin-top: 14px; font-size: 18px; line-height: 1.4; color: var(--muted); }
.l-long { display: none; }
.hero .badge { margin-top: 24px; }
.hero .badge img { height: 52px; }
.hero-card { display: none; }
.hero-pin { margin-top: 40px; }
.hero-stage { position: relative; overflow-x: clip; padding-bottom: 48px; }
.hero-phone { position: relative; z-index: 2; width: fit-content; margin-inline: auto; }
.hero-phone .iphone { --w: min(60vw, 270px); }
.hero-fan { position: absolute; inset: 0; z-index: 1; }
.fan-card { --k: 1; position: absolute; left: 50%; width: min(46vw, 210px); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 18px 36px -16px rgba(30, 30, 70, .3);
  transform: translateX(-50%) translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))) rotate(calc(var(--r) * var(--k))) scale(calc(.82 + var(--k) * .18)); }
.fan-card img { width: 100%; }
/* end positions, from the centre line of the phone */
.f1 { top: 2%; --x: -47vw; --y: 0px; --r: -4deg; }
.f2 { top: 38%; --x: -48vw; --y: 0px; --r: 3deg; }
.f3 { top: 72%; --x: -46vw; --y: 0px; --r: -2deg; }
.f4 { top: 6%; --x: 47vw; --y: 0px; --r: 4deg; }
.f5 { top: 30%; --x: 48vw; --y: 0px; --r: -3deg; }
.f6 { top: 62%; --x: 46vw; --y: 0px; --r: 2deg; }
@media (max-width: 859.98px) {
  .motion .hero-pin { height: 175vh; height: 175svh; }
  .motion .hero-stage { position: sticky; top: calc(76px + env(safe-area-inset-top)); height: calc(100svh - 76px); padding-bottom: 0; }
  .motion .fan-card { --k: clamp(0, calc((var(--p, 0) - var(--at)) / .22), 1); opacity: var(--k); will-change: transform; }
  .motion .f1 { --at: .02; } .motion .f4 { --at: .06; } .motion .f2 { --at: .1; }
  .motion .f5 { --at: .14; } .motion .f3 { --at: .18; } .motion .f6 { --at: .22; }
  /* the next section slides up over the pinned phone */
  .motion .home .week { position: relative; z-index: 3; margin-top: -40vh; margin-top: -40svh; background: var(--bg);
    border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -12px 34px -12px rgba(30, 30, 70, .16); }
}
@media (min-width: 560px) and (max-width: 859.98px) {
  .fan-card { width: 230px; }
  .f1, .f2, .f3 { --x: -230px; } .f4, .f5, .f6 { --x: 230px; }
}
/* Wide screens, layout B (second pass, 17 Oct 2026: "the photo should dominate"): the photo card takes 55 to 58 % of the
   width and most of the first screen, from just under the dock to a small margin on the right; the copy is centred on it
   at the left; the phone overlaps the card's bottom-right corner (from 66 % across, right of the three people) and
   overhangs its foot by a fifth of its height. Every box is placed from the same variables. */
@media (min-width: 860px) {
  .hero { --R: clamp(16px, 1.6vw, 28px); --T: 84px; --W: 55vw; --P: calc(var(--W) * .3); --PH: calc(var(--P) * 2.07);
    --H: min(100svh - var(--T) - 24px - var(--PH) * .2, var(--W) * .95);
    --C: clamp(40px, 5vw, 96px); --G: clamp(32px, 4vw, 72px);
    background: var(--bg); text-align: left; padding-top: 0; }
  .hero-grid { position: relative; height: calc(var(--T) + var(--H) + var(--PH) * .2 + 24px); min-height: 600px; }
  .hero-copy { position: absolute; z-index: 2; left: var(--C); right: calc(var(--R) + var(--W) + var(--G)); top: calc(var(--T) + var(--H) / 2);
    transform: translateY(-50%); padding: 0; align-items: flex-start; }
  .lockup { flex-direction: row; gap: 14px; font: 600 clamp(22px, 1.9vw, 30px)/1 var(--font-d); }
  .lockup img { width: clamp(42px, 3.3vw, 56px); height: clamp(42px, 3.3vw, 56px); box-shadow: 0 0 0 1px var(--hair), 0 8px 18px -10px rgba(30, 30, 70, .3); }
  .hero h1 { margin-top: 24px; font-size: clamp(44px, 4.4vw, 84px); max-width: 8.6em; }
  .hero .lead { margin-top: 20px; font-size: clamp(18px, 1.45vw, 23px); color: var(--body); max-width: 24em; }
  .l-long { display: inline; } .l-short { display: none; }
  .hero .badge { margin-top: 32px; }
  .hero .badge img { height: clamp(50px, 3.8vw, 60px); }
  .hero-visual { position: static; }
  .hero-card { display: block; position: absolute; z-index: 1; right: var(--R); top: var(--T); width: var(--W); height: var(--H);
    overflow: hidden; border-radius: var(--r-xl); background: #DCD7CE; }
  .hero-card picture, .hero-card img { width: 100%; height: 100%; }
  .hero-card img { object-fit: cover; object-position: 0% 42%; }
  .hero-pin { position: absolute; z-index: 3; width: var(--P); right: calc(var(--R) + var(--W) * .04); top: calc(var(--T) + var(--H) - var(--PH) * .8); margin: 0; }
  .hero-stage { overflow: visible; padding: 0; }
  .hero-phone .iphone { --w: var(--P); }
  .hero-fan { display: none; }
}
@media (min-width: 1200px) { .hero { --W: 58vw; } }
.motion .hero-phone .iphone { animation: phone-in 1.1s var(--ease) .15s both; }
@keyframes phone-in { from { opacity: 0; transform: translateY(60px); } }

/* A realistic iPhone drawn in CSS (Apple's bezel artwork may not be used on a website): titanium rim, black bezel,
   Dynamic Island, side buttons. --w is the phone's outer width; everything scales from it. The screen keeps the
   capture's own 1320:2868 shape. */
.iphone {
  --w: 300px; position: relative; width: var(--w); flex: none;
  padding: calc(var(--w) * .013); border-radius: calc(var(--w) * .168);
  background: linear-gradient(135deg, #8b8d92 0%, #e6e7ea 16%, #a3a5aa 34%, #5d5f64 55%, #c7c8cc 78%, #74767b 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .0035) rgba(255, 255, 255, .55), inset 0 0 0 calc(var(--w) * .008) rgba(60, 62, 66, .5),
              0 calc(var(--w) * .1) calc(var(--w) * .16) calc(var(--w) * -.04) rgba(10, 10, 20, .45),
              0 calc(var(--w) * .025) calc(var(--w) * .05) rgba(10, 10, 20, .28);
}
.iphone-bezel { padding: calc(var(--w) * .032); border-radius: calc(var(--w) * .156); background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.iphone-screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * .125); background: #fff; aspect-ratio: 1320 / 2868; }
.iphone-screen picture, .iphone-screen img { width: 100%; height: 100%; }
.iphone-screen img { object-fit: cover; }
.island { position: absolute; left: 50%; top: calc(var(--w) * .026); width: 30%; height: calc(var(--w) * .086); transform: translateX(-50%); border-radius: 999px; background: #000; }
.ib { position: absolute; width: calc(var(--w) * .011); border-radius: 2px; background: linear-gradient(90deg, #4e5055, #c2c4c8 50%, #66686d); }
.ib-action { left: calc(var(--w) * -.008); top: 17%; height: 5%; }
.ib-up { left: calc(var(--w) * -.008); top: 25%; height: 8%; }
.ib-down { left: calc(var(--w) * -.008); top: 35%; height: 8%; }
.ib-side { right: calc(var(--w) * -.008); top: 28%; height: 12.5%; }

/* ================= 2. Your week bento ================= */
.week .sec-head { margin-bottom: 40px; }
.bento { display: grid; gap: 12px; }
/* Each phone sits in the tile's flow right under the copy, so it can rise high but never over the text; the tile's
   fixed height crops its foot. With motion it starts far lower and rises into place as the tile scrolls in. */
.tile { position: relative; overflow: hidden; border-radius: var(--r-xl); height: 600px; padding: 26px 24px 0; isolation: isolate; display: flex; flex-direction: column; }
.tile-copy { position: relative; z-index: 2; max-width: 22em; }
.tile h3 { display: flex; align-items: center; gap: 8px; font-size: 26px; letter-spacing: -.025em; font-family: var(--font-d); font-weight: 700; color: inherit; }
.tile p { margin-top: 8px; font-size: 17px; line-height: 1.45; }
.tile-phone { position: relative; z-index: 1; flex: none; align-self: center; margin-top: 36px; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; }
.tile .phone { --pw: min(62vw, 270px); }
.t-train { background: #EE7A30; color: #fff; --tilt: -6deg; }
.t-train p { color: rgba(255, 255, 255, .92); }
.t-move { background: var(--accent); color: #fff; --tilt: 6deg; }
.t-move p { color: rgba(255, 255, 255, .9); }
.t-fuel { background: #22A86E; color: #fff; --tilt: 5deg; }
.t-fuel p { color: rgba(255, 255, 255, .92); }
.t-prog { background: #34343C; color: #fff; --tilt: -5deg; }
.t-prog p { color: rgba(255, 255, 255, .82); }
.motion .tile { --e: calc(var(--p, 1) * (2 - var(--p, 1))); }
.motion .tile-phone { transform: translateY(calc((1 - var(--e)) * 480px)) rotate(calc(var(--tilt) * (1.6 - var(--e) * .6))); will-change: transform; }
@media (min-width: 860px) {
  .week .sec-head { margin-bottom: 64px; }
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .tile { height: 700px; padding: 40px 40px 0; }
  .tile h3 { font-size: 30px; }
  .tile p { font-size: 19px; }
  .t-train { grid-column: span 7; } .t-move { grid-column: span 5; } .t-fuel { grid-column: span 5; } .t-prog { grid-column: span 7; }
  .tile .phone { --pw: clamp(240px, 21vw, 300px); }
  .t-train .tile-phone, .t-prog .tile-phone { align-self: flex-end; margin-right: 12%; }
}

/* ================= 3. Train ================= */
/* Ticks in Train and Move take their section's colour (the kicker's dot) and tick in one by one as the copy scrolls in;
   they replay on every pass. */
.train .ticks svg { color: var(--heat); }
.move .ticks svg { color: var(--accent); }
.motion .tick-anim .ticks li { opacity: 0; translate: -14px 0; transition: opacity .45s ease, translate .6s var(--ease); }
.motion .tick-anim .ticks svg { clip-path: inset(0 100% 0 0); scale: .6; transition: clip-path .45s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.motion .tick-anim.in .ticks li { opacity: 1; translate: 0 0; }
.motion .tick-anim.in .ticks svg { clip-path: inset(0 0 0 0); scale: 1; }
.motion .tick-anim.in .ticks li:nth-child(1), .motion .tick-anim.in .ticks li:nth-child(1) svg { transition-delay: 0.45s; }
.motion .tick-anim.in .ticks li:nth-child(2), .motion .tick-anim.in .ticks li:nth-child(2) svg { transition-delay: 0.67s; }
.motion .tick-anim.in .ticks li:nth-child(3), .motion .tick-anim.in .ticks li:nth-child(3) svg { transition-delay: 0.89s; }
.motion .tick-anim.in .ticks li:nth-child(4), .motion .tick-anim.in .ticks li:nth-child(4) svg { transition-delay: 1.11s; }
.motion .tick-anim.in .ticks li:nth-child(5), .motion .tick-anim.in .ticks li:nth-child(5) svg { transition-delay: 1.33s; }
.motion .tick-anim.in .ticks li:nth-child(6), .motion .tick-anim.in .ticks li:nth-child(6) svg { transition-delay: 1.55s; }
.motion .tick-anim.in .ticks li:nth-child(7), .motion .tick-anim.in .ticks li:nth-child(7) svg { transition-delay: 1.77s; }
.split { display: grid; gap: 48px; }
.train-stage { position: relative; padding-bottom: 150px; }
.train-photo { width: 84%; margin-left: auto; aspect-ratio: 4 / 5; }
.train-phone { position: absolute; left: 0; top: 18%; }
.train-phone .phone { --pw: min(44vw, 230px); }
.set-card {
  position: absolute; right: 0; bottom: 0; width: min(88%, 360px); padding: 16px 16px 12px;
  background: #fff; border-radius: 22px; box-shadow: var(--sh-float); color: var(--ink); font-size: 14px;
}
.set-ex { font-weight: 650; font-size: 15px; margin-bottom: 10px; }
.set-head, .set-row { display: grid; grid-template-columns: 30px 1fr 42px 42px 30px; align-items: center; gap: 6px; text-align: center; }
.set-head { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 6px 6px; }
.set-head span:nth-child(2), .set-row span:nth-child(2) { text-align: left; }
.set-row { min-height: 40px; padding: 0 6px; border-radius: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.set-row span:nth-child(2) { color: var(--muted); }
.set-row span:nth-child(3), .set-row span:nth-child(4) { font-weight: 650; }
.set-row.done, .set-row.live { background: var(--done); }
@media (max-width: 399.98px) { .set-card { font-size: 13px; padding: 14px 10px 10px; } .set-head, .set-row { grid-template-columns: 22px 1fr 32px 32px 28px; gap: 4px; } .set-row span:nth-child(2) { white-space: nowrap; } }
.tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--done-check); color: #fff; justify-self: center; }
.pr-chip {
  position: absolute; right: 6%; bottom: 158px; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px;
  background: #fff; border-radius: 999px; box-shadow: var(--sh-float); color: var(--ink); font-size: 13px; line-height: 1.2;
}
.pr-chip strong { display: block; font-size: 14px; }
.pr-chip .ui-ic { width: 32px; height: 32px; border-radius: 50%; }
.motion .train-stage .train-phone { opacity: 0; transform: translateY(70px) rotate(-4deg); transition: opacity .7s ease, transform 1s var(--ease); }
.motion .train-stage .train-photo { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform 1s var(--ease); }
.motion .train-stage .set-card { opacity: 0; transform: translateY(30px); transition: opacity .6s ease .35s, transform .9s var(--ease) .35s; }
.motion .set-row.live { background: #F2F2F5; transition: background-color .45s ease 1.25s; }
.motion .set-row.live .tick { background: #E2E2E8; transform: scale(.8); transition: background-color .3s ease 1.15s, transform .45s cubic-bezier(.3, 1.6, .5, 1) 1.15s; }
.motion .set-row.live .tick svg { opacity: 0; transition: opacity .2s ease 1.2s; }
.motion .pr-chip { opacity: 0; transform: translateY(14px) scale(.86); transition: opacity .4s ease 1.7s, transform .6s cubic-bezier(.3, 1.5, .5, 1) 1.7s; }
.motion .train-stage.in .train-phone, .motion .train-stage.in .train-photo, .motion .train-stage.in .set-card { opacity: 1; transform: none; }
.motion .train-stage.in .set-row.live { background: var(--done); }
.motion .train-stage.in .set-row.live .tick { background: var(--done-check); transform: none; }
.motion .train-stage.in .set-row.live .tick svg { opacity: 1; }
.motion .train-stage.in .pr-chip { opacity: 1; transform: none; }
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  .train-stage { padding-bottom: 0; height: 680px; }
  .train-photo { position: absolute; right: 0; top: 0; width: min(440px, 62%); aspect-ratio: 4 / 5; }
  .train-phone { left: 4%; top: 70px; }
  .train-phone .phone { --pw: clamp(220px, 19vw, 270px); }
  .set-card { right: -12px; bottom: 30px; width: 380px; }
  .pr-chip { right: 28%; bottom: 210px; }
}

/* ================= 4. Move ================= */
.move { background: var(--accent-tint); }
.move-grid { display: grid; gap: 40px; position: relative; }
.map-card { position: relative; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden; }
.map { width: 100%; height: auto; }
/* the street map is a static layer of its own; the route svg on top is the only thing that repaints while it draws */
.map:not(.map-over) { will-change: transform; }
.map-over { position: absolute; left: 0; top: 0; pointer-events: none; }
.map-note { position: absolute; right: 12px; top: 12px; font-size: 11.5px; color: var(--body); background: rgba(255, 255, 255, .88); padding: 3px 9px; border-radius: 999px; }
.map-note a { color: inherit; }
.route, .route-case { stroke-dasharray: 1; stroke-dashoffset: 0; }
.map-labels { font-family: var(--font); }
.km-marks circle { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.km-marks text { font: 700 11px var(--font); fill: var(--accent); text-anchor: middle; }
.run-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); }
.stat { background: #fff; padding: 14px 18px 16px; }
.stat span { display: block; font-size: 13px; color: var(--muted); }
.stat strong { display: block; margin-top: 2px; font: 700 24px/1.1 var(--font-d); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.motion .move-scene { --d: clamp(0, calc((var(--p, 1) - .08) / .72), 1); }
.motion .route, .motion .route-case { stroke-dashoffset: calc(1 - var(--d)); }
.motion .stat { --s: clamp(0, calc((var(--d) - var(--at)) * 9), 1); }
.motion .stat strong, .motion .stat span { opacity: calc(.15 + var(--s) * .85); }
.motion .stat strong { transform: translateY(calc((1 - var(--s)) * 8px)); }
.motion .km-marks g { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.motion .km-marks g.on { opacity: 1; transform: none; }
.motion .route-start { opacity: clamp(0, calc(var(--d) * 20), 1); }
@media (min-width: 860px) {
  .motion .move-scene { height: 230vh; }
  /* the pinned stage keeps clear of the dock (about 80 px) and fits the first screen: the map is square, so its width is
     capped at the viewport height minus the dock, the stats row and a margin */
  .motion .move-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 92px 0 24px; }
  .move-stage { padding-block: 0; }
  .move { padding-block: 0; }
  .move-scene { padding-block: var(--sec); }
  .motion .move-scene { padding-block: 0; }
  .move-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; width: 100%; }
  .map-card { max-width: 600px; justify-self: end; width: 100%; }
  .motion .map-card { max-width: min(600px, calc(100vh - 210px)); }
  .motion .move-grid h2 { font-size: clamp(40px, 4vw, 62px); }
  .run-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat strong { font-size: 22px; }
  .move-grid .copy { grid-area: 1 / 1; align-self: center; }
  .map-card { grid-area: 1 / 2; align-self: center; }
}

/* ================= 5. Fuel ================= */
/* Fuel (17 Oct 2026, put forward; no pastel, then no green either): a near-black ink panel, white type, the plate photo where the person is
   AI-scanning, and the real scan screen on its own iPhone BESIDE the photo (never over it). */
.wrap-wide { max-width: 1440px; }
.fuel-panel { background: linear-gradient(160deg, #24242B 0%, #141418 100%); color: #fff; border-radius: var(--r-xl); padding: 12px 12px 28px; display: grid; gap: 28px; }
.fuel-panel h2 { color: #fff; }
.fuel-panel .lead { color: rgba(255, 255, 255, .86); }
.fuel-panel .kicker, .fuel-panel .ticks li, .fuel-panel .ticks svg { color: #fff; }
.fuel-panel .k-fuel { --k: #5FD49A; }
.fuel-panel .ai-chip { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
.fuel-visual { position: relative; }
.fuel-photo { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.fuel-phone { justify-self: center; }
.fuel-phone .iphone { --w: min(58vw, 250px); }
.ai-chip { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px;
  border-radius: 999px; background: #fff; box-shadow: var(--sh-float); color: var(--accent); font-size: 14px; font-weight: 650; }
.ai-chip span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint); font-size: 16px; }
.motion .fuel-phone[data-reveal] { opacity: 0; translate: 0 60px; transition: opacity .7s ease .15s, translate 1s var(--ease) .15s; }
.motion .fuel-phone[data-reveal].in { opacity: 1; translate: 0 0; }
.motion .fuel-visual .ai-chip { opacity: 0; translate: 0 16px; scale: .9; transition: opacity .4s ease .8s, translate .6s cubic-bezier(.3, 1.5, .5, 1) .8s, scale .6s cubic-bezier(.3, 1.5, .5, 1) .8s; }
.motion .fuel-visual.in .ai-chip { opacity: 1; translate: 0 0; scale: 1; }
.fuel-side { display: grid; gap: 28px; padding: 0 12px; }
.target-card { background: #fff; border-radius: 24px; box-shadow: var(--sh-card); padding: 22px; color: var(--ink); }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tc-k { font-size: 14px; font-weight: 600; color: var(--muted); }
.tc-big { font: 700 52px/1 var(--font-d); letter-spacing: -.035em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tc-s { font-size: 14px; color: var(--muted); margin-top: 4px; }
.tc-burn { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 9px; border-radius: 999px; background: #FFF1E3; color: var(--heat); font-size: 13px; font-weight: 650; }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: none; }
.ring.big { width: 112px; height: 112px; }
.ring-track { fill: none; stroke: #EDEDF1; stroke-width: 9; }
.ring-val { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v)); }
.ring-ic { color: var(--accent); transform: rotate(90deg); transform-origin: 50px 50px; }
.tc-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
.tc-macros > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tc-macros strong { display: block; font: 700 20px/1.1 var(--font-d); }
.tc-macros span { display: block; font-size: 12.5px; color: var(--muted); }
.tc-macros .ring { width: 48px; height: 48px; }
.motion .target-card .ring-val { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .25s; }
.motion .target-card.in .ring-val { stroke-dashoffset: calc(1 - var(--v)); }
@media (min-width: 860px) {
  .fuel-panel { grid-template-columns: minmax(0, 5fr) auto minmax(0, 5fr); gap: clamp(28px, 3.4vw, 56px); padding: 20px clamp(32px, 4vw, 64px) 20px 20px; align-items: center; }
  .fuel-visual { height: 100%; }
  .fuel-photo { aspect-ratio: auto; height: 100%; min-height: 680px; }
  .fuel-phone .iphone { --w: clamp(210px, 16vw, 260px); }
  .ai-chip { left: 20px; bottom: 20px; }
  .fuel-side { padding: 40px 0; gap: 40px; }
  .target-card { padding: 28px; max-width: 480px; }
}

/* ================= Apple Health ================= */
/* After Gentler Streak's "Your Health Data, Simplified": the claim on white, then the photo full bleed and SHARP (no blur,
   no text on people: David's rules); three phones in violet cases overlap its foot and rise as the section scrolls in,
   the middle one furthest; the caption sits on white below. Without motion the phones rest in their end positions. */
.health { --hbg: #F2F2F5; position: relative; padding-bottom: 64px; overflow-x: clip; background: var(--hbg); }
.health + .progress { padding-top: 96px; }
.health-photo { position: relative; height: clamp(520px, 78vh, 820px); }
.health-photo picture, .health-photo img { width: 100%; height: 100%; }
.health-photo img { object-fit: cover; object-position: 30% 40%; }
/* the copy runs into the photo: the section's grey fades into the sky (David asked for this fade, 17 Oct 2026) */
.health-photo::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(var(--hbg) 0%, rgba(242, 242, 245, .82) 40%, rgba(242, 242, 245, 0) 100%); }
.health-copy { position: relative; z-index: 2; padding: var(--sec) var(--gutter) 0; margin-bottom: -26vh; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Apple's official "Works with Apple Health" badge, unmodified (black version, on the light grey: the licence forbids changes) */
.health-mark { line-height: 0; }
.health-mark img { height: 44px; width: auto; }
@media (min-width: 860px) { .health-mark img { height: 50px; } }
.health-copy h2 { margin-top: 16px; max-width: 13em; }
.health-copy .lead { margin-top: 14px; max-width: 32em; }
.health-phones { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 2vw, 32px); margin-top: -34vh; }
.hph { --o: 0px; transform: translateY(var(--o)); }
.hph .iphone { --w: min(30vw, 250px); }
.hph-c .iphone { --w: min(40vw, 290px); }
.hph-l, .hph-r { --o: 70px; }
.health-cap { max-width: 26em; margin: 28px auto 0; padding-inline: var(--gutter); text-align: center; font-size: 17px; color: var(--body); }
/* phone cases instead of the bare titanium rim: black at the sides, orange in the middle */
.iphone-case { background: linear-gradient(145deg, #3A3A3E 0%, #18181A 45%, #0E0E10 100%); padding: calc(var(--w) * .028);
  box-shadow: inset 0 0 0 calc(var(--w) * .004) rgba(255, 255, 255, .35), 0 calc(var(--w) * .1) calc(var(--w) * .16) calc(var(--w) * -.04) rgba(20, 15, 70, .42),
              0 calc(var(--w) * .025) calc(var(--w) * .05) rgba(20, 15, 70, .25); }
.iphone-case .ib { background: linear-gradient(90deg, #0E0E10, #3A3A3E 50%, #0E0E10); width: calc(var(--w) * .02); }
.hph-c .iphone-case { background: linear-gradient(145deg, #FF9A4D 0%, #EE7A30 45%, #D4621B 100%); }
.hph-c .iphone-case .ib { background: linear-gradient(90deg, #C9561A, #FFA866 50%, #C9561A); }
.iphone-case .ib-action, .iphone-case .ib-up, .iphone-case .ib-down { left: calc(var(--w) * -.014); }
.iphone-case .ib-side { right: calc(var(--w) * -.014); }
.motion .health-scene { --e: calc(var(--p, 1) * (2 - var(--p, 1))); }
.motion .hph-c { transform: translateY(calc(var(--o) + (1 - var(--e)) * 300px)); }
.motion .hph-l, .motion .hph-r { transform: translateY(calc(var(--o) + (1 - var(--e)) * 420px)); }
@media (max-width: 559.98px) {
  .health-phones { gap: 8px; margin-top: -26vh; }
  .hph-l { margin-left: -14vw; } .hph-r { margin-right: -14vw; }
  .hph .iphone { --w: 38vw; } .hph-c .iphone { --w: 46vw; }
  .health-photo { height: 560px; }
  .health-copy { margin-bottom: -8vh; }  /* phones: the lead wraps longer, so it must not reach the runners */
}
@media (min-width: 860px) { .health-cap { font-size: 19px; } }

/* ================= 6. Progress ================= */
.progress .sec-head { margin-bottom: 48px; }
.prog-steps { display: grid; gap: 64px; }
.pstep h3 { font-size: 24px; font-family: var(--font-d); font-weight: 700; letter-spacing: -.025em; }
.pstep > p { margin-top: 8px; font-size: 17px; max-width: 30em; }
.pcard { margin-top: 22px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-card); padding: 22px 20px 20px; color: var(--ink); border: 1px solid rgba(60, 60, 67, .06); }
.pc-t { font: 700 20px/1.2 var(--font-d); letter-spacing: -.02em; }
.pc-big { margin-top: 6px; font-size: 14px; color: var(--muted); }
.pc-big strong { font: 700 28px/1 var(--font-d); color: var(--ink); letter-spacing: -.02em; margin-right: 4px; }
.pc-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pc-muscles picture { margin-top: 12px; }
.pc-muscles img { width: 100%; }
.pc-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--muted); }
.pc-legend strong { display: block; font: 700 20px/1.2 var(--font-d); color: var(--ink); }
.bars, .dist { width: 100%; margin-top: 14px; overflow: visible; }
.bars .grid path, .dist .grid path { stroke: #EBEBEF; stroke-width: 1; fill: none; }
.bars rect { fill: #CDCDD6; }
.bars rect.now { fill: var(--heat); }
.radar { width: min(100%, 360px); margin: 14px auto 0; overflow: visible; }
.radar .web polygon, .radar .web path { fill: none; stroke: #E6E6EC; stroke-width: 1; }
.radar .prev { fill: none; stroke: #9C9CA6; stroke-width: 1.6; stroke-dasharray: .014 .012; }
.radar .this { fill: rgba(232, 98, 26, .2); stroke: var(--heat); stroke-width: 2.4; stroke-linejoin: round; }
.radar .lbl text { font: 500 11px var(--font); fill: var(--muted); }
.pc-legend2 { display: flex; justify-content: center; gap: 22px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pc-legend2 span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.5px solid var(--heat); }
.pc-legend2 .l-prev::before { border-top: 2px dashed #9C9CA6; }
.dist .area { fill: rgba(88, 80, 208, .16); }
.dist .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.dist .pt { fill: #fff; stroke: var(--accent); stroke-width: 2.6; }
.dist .halo { fill: var(--accent); opacity: .2; }
.dist .dot { fill: var(--accent); }
.dist .ax text { font: 500 10px var(--font); fill: var(--muted); }
/* chart motion: plays when the card scrolls in (phone) or becomes the active step (desktop stage) */
.motion .pc-muscles img { filter: grayscale(1) contrast(.95); transition: filter 1.2s ease .25s; }
.motion .pcard.play .pc-muscles img, .motion .pc-muscles.play img { filter: none; }
.motion .bars rect { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 70ms + .1s); }
.motion .play .bars rect, .motion .bars.play rect { transform: none; }
.motion .radar .this, .motion .radar .prev { stroke-dashoffset: 1; }
.motion .radar .this { stroke-dasharray: 1; fill-opacity: 0; transition: stroke-dashoffset 1.3s var(--ease) .3s, fill-opacity .6s ease 1.2s; }
.motion .radar .prev { opacity: 0; transition: opacity .6s ease .1s; }
.motion .play .radar .this { stroke-dashoffset: 0; fill-opacity: 1; }
.motion .play .radar .prev { opacity: 1; }
.motion .dist .line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.motion .dist .area { opacity: 0; transition: opacity .8s ease 1.2s; }
.motion .dist .dot, .motion .dist .halo { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .3s ease 1.5s, transform .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s; }
.motion .dist .pt { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.25s + var(--i) * .15s); }
.motion .play .dist .pt { opacity: 1; transform: none; }
.motion .play .dist .halo { opacity: .2; transform: none; }
.motion .play .dist .line { stroke-dashoffset: 0; }
.motion .play .dist .area { opacity: 1; }
.motion .play .dist .dot { opacity: 1; transform: none; }
.prog-stage { display: none; }
@media (min-width: 960px) {
  .progress .sec-head { margin-bottom: 24px; }
  .motion .prog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .motion .prog-steps { gap: 0; padding-block: 12vh 22vh; }
  .motion .pstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s ease; }
  .motion .pstep.on { opacity: 1; }
  .motion .pstep h3 { font-size: 34px; }
  .motion .pstep > p { font-size: 19px; }
  .motion .pstep .pcard { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .motion .prog-stage { display: block; position: sticky; top: calc(50vh - 280px); height: 560px; }
  .motion .prog-stage .pcard { position: absolute; inset: 0 0 auto; margin: 0; padding: 32px 32px 28px; opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .45s ease, transform .7s var(--ease); }
  .motion .prog-stage .pcard.on { opacity: 1; transform: none; }
  .motion .prog-stage .pc-t { font-size: 24px; }
  .motion .prog-stage .radar { width: 400px; }
  .motion .prog-stage .pc-muscles picture { max-width: 520px; margin-inline: auto; }
}

/* ================= 7. Friends ================= */
.friends-frame { position: relative; display: flex; flex-direction: column; isolation: isolate; }
.friends-card, .post-card { z-index: 2; }
.friends-photo { order: 1; } .post-card { order: 2; } .friends-card { order: 3; }
.friends-photo { aspect-ratio: 4 / 5; }
.friends-photo img { object-position: 84% 50%; }
.post-card { position: relative; width: min(88%, 360px); margin: -8% 0 0 auto; margin-right: 12px; background: #fff; border-radius: 22px; box-shadow: var(--sh-float); padding: 14px 8px 6px; }
.post-card img { border-radius: 10px; }
.friends-card { margin-top: 36px; }
.motion .post-card { opacity: 0; transform: translateY(50px) rotate(2deg); transition: opacity .7s ease .15s, transform 1s var(--ease) .15s; }
.motion .post-card.in { opacity: 1; transform: none; }
@media (min-width: 860px) {
  .friends-photo { aspect-ratio: 16 / 9; }
  .friends-frame { margin-bottom: 420px; }
  .friends-card { position: absolute; left: 40px; bottom: -150px; margin: 0; width: min(440px, 40%); padding: 36px 36px 34px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-float); }
  .friends-card h2 { font-size: clamp(36px, 3.4vw, 50px); }
  .friends-card .lead { font-size: 18px; }
  .friends-photo img { object-position: 50% 50%; }
  /* the pair trains on the right and a sled push runs through the middle left: both cards hang below the photo, the copy
     card at the left over the turf, the feed post (big enough to read, 17 Oct 2026) at the right over the floor and rack */
  .post-card { position: absolute; right: 40px; bottom: -400px; margin: 0; width: clamp(300px, 25vw, 360px); }
}

/* ================= 8. More ================= */
.more .sec-head { margin-bottom: 40px; }
.mgrid { display: grid; gap: 12px; }
.m { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); padding: 26px 24px; color: var(--ink); display: flex; flex-direction: column; gap: 20px; }
.m h3 { font-size: 21px; font-family: var(--font-d); font-weight: 700; letter-spacing: -.02em; }
.m-copy p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--body); }
/* More (17 Oct 2026: "too pastel, don't do everything in purple"): a dark import card, an amber records card, a green
   rest card, the peach goal card, neutral grey for the rest. */
.m-import { background: #24242C; color: #fff; }
.m-import h3 { color: #fff; }
.m-import .m-copy p { color: rgba(255, 255, 255, .78); }
.m-import .orbit-lines path { stroke: rgba(255, 255, 255, .3); }
.m-rec { background: #FFC94A; }
.m-rec .m-copy p, .m-rec .m-num small { color: #5A4310; }
.m-rec .rosette { background: #fff; }
.m-rest { background: #2FB36B; color: #fff; }
.m-rest h3 { color: #fff; }
.m-rest .m-copy p { color: rgba(255, 255, 255, .88); }
.orbit { position: relative; width: 400px; height: 300px; margin-inline: auto; flex: none; }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-lines path { fill: none; stroke: rgba(88, 80, 208, .22); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; }
.chip { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.c1 { left: 2%; top: 6%; } .c2 { left: 18%; top: 44%; } .c3 { left: 4%; top: 80%; } .c4 { left: 34%; top: 72%; }
.orbit-app { position: absolute; left: 75%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 20px; background: #fff; box-shadow: var(--sh-float); display: grid; place-items: center; }
.orbit-app img { width: 64px; height: 64px; border-radius: 15px; }
.motion .orbit .chip { offset-rotate: 0deg; offset-anchor: 0% 50%; animation: chip-flow 7s linear infinite; animation-play-state: paused; opacity: 0; left: 0; top: 0; }
.motion .orbit.live .chip { animation-play-state: running; }
.motion .c1 { offset-path: path("M8 26 C 120 26, 190 100, 300 150"); animation-delay: -0.4s; }
.motion .c2 { offset-path: path("M0 150 C 110 150, 200 150, 300 150"); animation-delay: -2.2s; }
.motion .c3 { offset-path: path("M8 274 C 120 274, 190 200, 300 150"); animation-delay: -4s; }
.motion .c4 { offset-path: path("M0 150 C 110 150, 200 150, 300 150"); animation-delay: -5.8s; }
@keyframes chip-flow { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 62% { opacity: 1; } 76% { offset-distance: 82%; opacity: 0; transform: scale(.7); } 100% { offset-distance: 82%; opacity: 0; } }
.m-aud { padding-bottom: 0; }
.m-shot { display: flex; justify-content: center; margin-top: auto; height: 300px; overflow: hidden; }
.m-shot .phone { --pw: 250px; align-self: flex-start; }
.m-shot img { object-fit: cover; }
.m-art { display: flex; align-items: center; gap: 16px; }
.rosette { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #FFF4DF; color: var(--record); }
.m-num { font: 700 44px/1 var(--font-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m-num small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
/* Rest, timed: the ring runs out from 1:30 and ends on the app's green done check. Static (no motion): the done state. */
.rest { position: relative; display: block; width: 96px; height: 96px; }
.timer { width: 96px; height: 96px; }
.timer circle { transform: rotate(-90deg); transform-origin: 50px 50px; }
.timer .ring-track { stroke-width: 8; }
.timer-val { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rest-t { position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px var(--font-d); color: #fff; font-variant-numeric: tabular-nums; opacity: 0; }
.rest-done { position: absolute; inset: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #2FB36B; }
.rest-k { font-size: 14px; font-weight: 650; color: #fff; }
.m-rest .ring-track { stroke: rgba(255, 255, 255, .3); }
.motion .m-rest .timer-val { stroke: #fff; stroke-dashoffset: 0; }
.motion .m-rest .rest-t { opacity: 1; }
.motion .m-rest .rest-done { opacity: 0; transform: scale(.4); }
.motion .m-rest .rest-k { opacity: 0; }
.motion .m-rest.in .timer-val { stroke-dashoffset: 1; transition: stroke-dashoffset 3s linear .4s; }
.motion .m-rest.done .timer-val { stroke: #fff; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease), stroke .3s ease; }
.motion .m-rest.done .rest-t { opacity: 0; transition: opacity .2s ease; }
.motion .m-rest.done .rest-done { opacity: 1; transform: none; transition: opacity .2s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.motion .m-rest.done .rest-k { opacity: 1; transition: opacity .4s ease .2s; }
.barcode { position: relative; display: block; width: 150px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-card); overflow: hidden; }
.scanline { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px 1px rgba(88, 80, 208, .55); }
.motion .live .scanline, .motion .m-code.live .scanline { animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { from { top: 14%; } to { top: 84%; } }
.m-goal { background: #FFF1E3; }  /* David, 17 Oct 2026: this card is good as it is */
.days { display: flex; gap: 8px; }
.days li { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--muted); background: #fff; }
.days li.on { background: var(--heat); color: #fff; }
.goal-art { flex-direction: column; align-items: flex-start; gap: 12px; }
.goal-n { font-size: 14px; color: var(--body); }
.goal-n strong { color: var(--ink); }
.motion .days li.on { background: #fff; color: var(--muted); transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.motion .m-goal.in .days li.on { background: var(--heat); color: #fff; }
.motion .m-goal.in .days li:nth-child(1) { transition-delay: .3s; } .motion .m-goal.in .days li:nth-child(2) { transition-delay: .45s; }
.motion .m-goal.in .days li:nth-child(4) { transition-delay: .6s; } .motion .m-goal.in .days li:nth-child(5) { transition-delay: .75s; }
.m-health { background: var(--surface); justify-content: center; }
.m-rec, .m-rest, .m-code { justify-content: space-between; }
@media (max-width: 459.98px) { .orbit { zoom: .8; } }
@media (max-width: 359.98px) { .orbit { zoom: .7; } }
@media (min-width: 860px) {
  .more .sec-head { margin-bottom: 56px; }
  .mgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .m { padding: 34px 34px; min-height: 280px; }
  .m h3 { font-size: 24px; }
  .m-import { grid-column: span 8; flex-direction: row; align-items: center; gap: 24px; }
  .m-import .m-copy { flex: 1 1 0; max-width: 23em; }
  .m-aud { grid-column: span 4; grid-row: span 2; }
  .m-shot { height: auto; flex: 1; min-height: 320px; position: relative; }
  .m-shot .phone { position: absolute; top: 0; left: 50%; transform: translateX(-50%); --pw: 270px; }
  .m-rec, .m-rest { grid-column: span 4; }
  .m-code { grid-column: span 4; }
  .m-goal { grid-column: span 8; }
}
@media (min-width: 560px) and (max-width: 859.98px) {
  .mgrid { grid-template-columns: 1fr 1fr; }
  .m-import, .m-aud, .m-goal { grid-column: 1 / -1; }
}

/* ================= 9. Privacy ================= */
.priv-panel { background: #1C1C22; border-radius: var(--r-xl); padding: 56px 20px 36px; color: #fff; }
.priv-panel h2 { color: #fff; }
.priv-panel .sec-head .lead { color: rgba(255, 255, 255, .78); }
.priv-panel .more { color: #B4AEFF; }
.priv-panel .flow::before { background: repeating-linear-gradient(to bottom, #B4AEFF 0 4px, transparent 4px 14px); }
/* on phones the nodes sit straight on the dark panel; from 960 px they are white cards again */
@media (max-width: 959.98px) { .priv-panel .node h3 { color: #fff; } .priv-panel .node p { color: rgba(255, 255, 255, .76); } .priv-panel .n-phone .n-ic { background: #fff; color: var(--ink); } }
.privacy .sec-head { text-align: center; margin-inline: auto; }
.flow { position: relative; display: grid; gap: 0; margin-top: 40px; padding-left: 28px; }
.flow::before { content: ""; position: absolute; left: 21px; top: 32px; bottom: 60px; width: 2px; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 14px); opacity: .5; }
.node { position: relative; padding: 0 0 26px 30px; }
.node .n-ic { position: absolute; left: -28px; top: -2px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--accent); box-shadow: var(--sh-card); }
.node h3 { font-size: 18px; padding-top: 10px; }
.node p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--body); max-width: 30em; }
.n-phone .n-ic { background: var(--ink); color: #fff; }
.n-ai .n-ic { color: var(--heat); }
.n-none .n-ic { color: var(--muted); }
.flow-lines { display: none; }
.n-shot { display: none; }
.more-row { margin-top: 16px; text-align: center; font-size: 16px; }
.more { font-weight: 600; }
.motion .flow::before { animation: flow-down 1.6s linear infinite; animation-play-state: paused; }
.motion .flow.live::before { animation-play-state: running; }
@keyframes flow-down { to { background-position: 0 14px; } }
@media (min-width: 960px) {
  .priv-panel { padding: 88px 56px 56px; }
  .flow { height: 470px; padding: 0; margin-top: 48px; }
  .flow::before { display: none; }
  .flow-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .fl { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .7; }
  .fl.dash { stroke: var(--heat); }
  .fl.none { stroke: #A3A3AC; stroke-dasharray: 6 6; opacity: .6; }
  .motion .flow.live .fl:not(.none) { animation: flow-out 1.2s linear infinite; }
  .node { position: absolute; z-index: 1; width: 290px; padding: 22px 22px 22px; background: #fff; border-radius: 22px; box-shadow: var(--sh-card); }
  .node .n-ic { position: static; margin-bottom: 10px; box-shadow: none; background: var(--accent-tint); }
  .node h3 { padding-top: 0; }
  .n-phone { left: 50%; top: 50%; width: 220px; transform: translate(-50%, -50%); text-align: center; padding: 26px 22px; box-shadow: var(--sh-float); }
  .n-phone .n-ic { display: none; }
  /* the centre of the diagram is the phone itself, showing who can see a workout */
  .n-phone { padding: 22px 22px 24px; width: 240px; }
  .n-shot { display: block; width: fit-content; margin: 0 auto 16px; }
  .n-shot .iphone { --w: 150px; }
  .flow { height: 560px; }
  .n-cloud { left: 0; top: 0; } .n-people { right: 0; top: 0; } .n-ai { right: 0; bottom: 0; } .n-none { left: 0; bottom: 0; }
  .n-ai .n-ic { background: #FFF1E3; } .n-none .n-ic { background: var(--surface); }
  .more-row { margin-top: 36px; }
}
@keyframes flow-out { to { stroke-dashoffset: -12; } }

/* ================= FAQ ================= */
.faq-head { margin-bottom: 8px; }
.faq { margin-top: 32px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0;
  cursor: pointer; list-style: none; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 32px 22px 0; font-size: 16px; line-height: 1.6; max-width: 62ch; }
@media (min-width: 860px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px); gap: 80px; align-items: start; }
  .faq-head { margin-bottom: 0; position: sticky; top: 120px; }
  .faq { margin-top: 0; }
  .faq summary { font-size: 18px; }
}

/* ================= Contact ================= */
.contact { padding-top: calc(var(--sec) * .4); }
.contact-wrap { max-width: 640px; }
.contact .sec-head { margin-bottom: 28px; }
.contact .lead { margin-top: 14px; }
.cform { display: grid; gap: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.cform input, .cform textarea {
  display: block; width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid #D4D4DA; border-radius: 14px;
  background: #fff; color: var(--ink); font: 400 16px/1.4 var(--font); -webkit-appearance: none; appearance: none;
}
.cform textarea { min-height: 150px; resize: vertical; }
.cform input:focus-visible, .cform textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cform [aria-invalid="true"] { border-color: #B3261E; }
.err { margin-top: 6px; font-size: 14px; line-height: 1.4; color: #B3261E; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cform .btn { width: 100%; }
.cform .btn:disabled { opacity: .6; cursor: default; }
.fine-print { font-size: 14px; line-height: 1.5; color: var(--muted); }
.cstatus:empty { display: none; }
.cstatus.on { margin-top: 16px; padding: 18px 0; border-top: 1px solid var(--hair); color: var(--ink); }
.cstatus h3 { font-size: 20px; letter-spacing: -.01em; }
.cstatus h3 + p { margin-top: 8px; }
.cstatus p { color: var(--ink); overflow-wrap: anywhere; }
.cstatus a { font-weight: 600; }
.alt-mail { margin-top: 20px; font-size: 16px; color: var(--ink); }
.alt-mail a { font-weight: 600; }
@media (min-width: 860px) {
  .contact .sec-head { text-align: center; margin-bottom: 36px; }
  .alt-mail { text-align: center; }
}

/* ================= Closing ================= */
/* After Bevel's "Ready When You Are": a centred line and the badge, then the real phone on a white flat-lay of kit.
   Some objects run off the screen edges on purpose; the stage clips them, the page never scrolls sideways. */
.end { padding-bottom: 0; text-align: center; }
.end-head { display: flex; flex-direction: column; align-items: center; }
.end-head h2 { max-width: 12em; }
.end-head .lead { margin-top: 14px; max-width: 26em; }
.end-head .badge { margin-top: 28px; }
.end-head .badge img { height: 52px; }
.end-head .caption { margin-top: 14px; }
.flatlay { margin-top: 32px; overflow: hidden; }
.flatlay-stage { position: relative; height: 540px; max-width: 1920px; margin-inline: auto; }
.flatlay-phone { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 2; }
.flatlay-phone .iphone { --w: min(42vw, 190px); }
/* Straight, like Bevel (David, 17 Oct 2026): eight top-down objects, every one upright, around the phone. Sizes vary like
   Bevel's: the black cap is huge and cut by the right edge, the Bayda bottle big and cut by the left, the towel large;
   the rest are small and sit close to the phone. Each object sits at (50 % + --cx, --cy) of the stage, centred. */
.kit { position: absolute; z-index: 1; left: calc(50% + var(--cx)); top: var(--cy); width: var(--kw); transform: translate(-50%, -50%); }
.kit img { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgba(20, 20, 30, .18)); }
.flatlay-stage { height: 720px; }
.k-sunglasses { --cx: -36vw; --cy: 7%; --kw: 22vw; }
.k-bottle { --cx: -46vw; --cy: 33%; --kw: 13vw; }
.k-shoes { --cx: -37vw; --cy: 57%; --kw: 18vw; }
.k-watch { --cx: -37vw; --cy: 76%; --kw: 6.5vw; }
.k-headphones { --cx: -37vw; --cy: 91%; --kw: 21vw; }
.k-cap { --cx: 43vw; --cy: 15%; --kw: 30vw; }
.k-gels { --cx: 37vw; --cy: 40%; --kw: 17vw; }
.k-fuel-bowl { --cx: 37vw; --cy: 57%; --kw: 16vw; }
.k-dumbbell { --cx: 37vw; --cy: 73%; --kw: 20vw; }
.k-towel { --cx: 38vw; --cy: 91%; --kw: 17vw; }
.motion .flatlay .kit, .motion .flatlay .flatlay-phone { opacity: 0; translate: 0 50px; transition: opacity .8s ease, translate 1.2s var(--ease); }
.motion .flatlay.in .kit, .motion .flatlay.in .flatlay-phone { opacity: 1; translate: 0 0; }
.motion .flatlay .k-towel, .motion .flatlay .k-bottle, .motion .flatlay .k-sunglasses, .motion .flatlay .k-cap, .motion .flatlay .k-watch { transition-delay: .1s; }
.motion .flatlay .k-headphones, .motion .flatlay .k-fuel-bowl, .motion .flatlay .k-shoes, .motion .flatlay .k-dumbbell, .motion .flatlay .k-gels { transition-delay: .2s; }
@media (min-width: 560px) {
  .flatlay-stage { height: 820px; }
  .flatlay-phone .iphone { --w: 280px; }
  .k-sunglasses { --cx: -30vw; --cy: 8%; --kw: 15vw; }
  .k-bottle { --cx: -45vw; --cy: 40%; --kw: 8vw; }
  .k-shoes { --cx: -29vw; --cy: 44%; --kw: 12vw; }
  .k-watch { --cx: -29vw; --cy: 70%; --kw: 4.4vw; }
  .k-headphones { --cx: -30vw; --cy: 90%; --kw: 14vw; }
  .k-cap { --cx: 44vw; --cy: 22%; --kw: 20vw; }
  .k-gels { --cx: 29vw; --cy: 50%; --kw: 11vw; }
  .k-fuel-bowl { --cx: 30vw; --cy: 71%; --kw: 10vw; }
  .k-dumbbell { --cx: 29vw; --cy: 89%; --kw: 12vw; }
  .k-towel { --cx: 45vw; --cy: 82%; --kw: 11vw; }
}
@media (min-width: 860px) {
  .end-head .badge img { height: 60px; }
  .flatlay { margin-top: 48px; }
  .flatlay-stage { height: clamp(720px, 54vw, 960px); }
  .flatlay-phone { top: 70px; }
  .flatlay-phone .iphone { --w: clamp(280px, 21vw, 370px); }
  .k-bottle { --cx: -48.5vw; --cy: 46%; --kw: 10vw; }
  .k-watch { --cx: -37vw; --cy: 62%; --kw: 4.2vw; }
  .k-sunglasses { --cx: -25vw; --cy: 15%; --kw: 11vw; }
  .k-shoes { --cx: -25vw; --cy: 49%; --kw: 10.5vw; }
  .k-headphones { --cx: -25vw; --cy: 83%; --kw: 12.5vw; }
  .k-cap { --cx: 46vw; --cy: 30%; --kw: 22vw; }
  .k-dumbbell { --cx: 24vw; --cy: 15%; --kw: 9vw; }
  .k-fuel-bowl { --cx: 24vw; --cy: 49%; --kw: 9.5vw; }
  .k-gels { --cx: 24vw; --cy: 83%; --kw: 8vw; }
  .k-towel { --cx: 41vw; --cy: 86%; --kw: 12vw; }
}
}

/* Generic reveal-once (used sparingly; most sections have their own motion) */
.motion .sec-head[data-reveal], .motion .copy[data-reveal], .motion .m[data-reveal], .motion .flow[data-reveal], .motion .target-card[data-reveal], .motion .friends-card[data-reveal], .motion .end-head[data-reveal] {
  opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s var(--ease);
}
.motion .m[data-reveal]:nth-child(even) { transition-delay: .08s; }
.motion [data-reveal].in { opacity: 1 !important; transform: none !important; }

/* ================= Legal notice and documents ================= */
.doc { max-width: 768px; margin-inline: auto; padding: 120px var(--gutter) 96px; }
.doc h1 { font-size: 34px; }
.doc h2 { margin-top: 44px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.doc p, .doc address { margin-top: 14px; }
.doc address { font-style: normal; padding: 18px 0; border-block: 1px solid var(--hair); line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.doc h1 + p { margin-top: 18px; }
.doc--legal { font-size: 16px; line-height: 1.65; }
.doc--legal h1 { text-wrap: balance; }
.doc--legal h3 { margin-top: 28px; font-size: 18px; line-height: 1.3; color: var(--ink); }
.doc--legal strong { color: var(--ink); font-weight: 600; }
.doc--legal ul { margin-top: 12px; padding-left: 1.3em; list-style: disc; }
.doc--legal li { margin-top: 6px; padding-left: .2em; }
.doc--legal li::marker { color: var(--muted); }
.doc--legal hr { margin: 40px 0; border: 0; border-top: 1px solid var(--hair); }
.doc--legal code { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: 6px; background: rgba(60, 60, 67, .08); }
.doc--legal .scroll { margin-top: 16px; overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; background: linear-gradient(to left, var(--bg) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat local, linear-gradient(to left, rgba(28, 28, 30, .12), rgba(28, 28, 30, 0)) right / 12px 100% no-repeat scroll; }
.doc--legal .scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.doc--legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.doc--legal th, .doc--legal td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.doc--legal th { color: var(--ink); font-weight: 600; background: rgba(60, 60, 67, .05); }
.doc--legal tr:last-child td { border-bottom: 0; }
.doc--legal td { min-width: 9em; }
.doc--legal a { overflow-wrap: anywhere; }
.doc--legal p, .doc--legal li { max-width: 68ch; }
.doc--legal h2[id], .doc--legal h3[id] { scroll-margin-top: 96px; }
.doc-meta { margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--muted); }
.doc-meta span { white-space: nowrap; }
@media (max-width: 479.98px) { .doc-meta span:not(.sep) { display: block; } .doc-meta .sep { display: none; } }
.toc { margin-top: 28px; padding: 18px 0; border-block: 1px solid var(--hair); }
.doc .toc-h { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.toc ol { margin: 12px 0 0; padding-left: 1.6em; list-style: decimal; font-size: 15px; line-height: 1.4; }
.toc li { margin: 0; padding-left: .2em; max-width: none; }
.toc li + li { margin-top: 6px; }
.toc li::marker { color: var(--muted); }
.doc--legal .toc a { color: var(--ink); text-decoration: none; }
.doc--legal .toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 860px) { .toc ol { columns: 2; column-gap: 40px; } .toc li { break-inside: avoid; } }
@media (min-width: 860px) { .doc { padding-top: 150px; } .doc h1 { font-size: 44px; } .doc h2 { font-size: 24px; } }

/* 404 */
.nf { padding: 140px 0 80px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.nf .wrap { width: 100%; }
.nf .lead { margin-top: 14px; }
.nf .nf-cta { margin-top: 28px; }
.nf .caption { margin-top: 16px; }

/* Footer */
.site-footer { border-top: 1px solid var(--hair); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; }
.foot-brand p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--body); }
.foot-links a:hover { color: var(--ink); }
.foot-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.fine { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 62em; }
.foot-top + .fine { margin-top: 20px; }
@media (min-width: 860px) { .site-footer { padding: 56px 0; } }