/* Strathlon — homepage v2 (2026-09-24, revised after the independent review)
   Base: Direction A "Night studio" (dark, cinematic, real screens in CSS-drawn frames, one coloured glow per feature).
   Display face: Direction B's Barlow Condensed (700/800/900); body Inter.
   Wordmark: live text in the app's own treatment — a black-weight sans (Inter 900, the web stand-in for SF Pro Black)
   filled with the app's brand gradient, #00AEFF → #F71216 interpolated in OKLab, top-leading → bottom-trailing.
   Direction B's crawling sports marquee ported (two rows, pause control, static centred list under reduced motion).
   Google Fonts only. No icons, no emoji, no stock imagery. */

:root {
  --bg: #06070B;
  --bg-2: #0B0D14;
  --bg-3: #10131B;
  --ink: #F2F4F8;
  --mute: #A3ABBB;
  --dim: #8B94A7;                 /* 6.6:1 on --bg */
  --line: rgba(255, 255, 255, 0.08);

  --c-plan: #2F8CFF;
  --c-session: #22E08A;
  --c-fuel: #FFB020;
  --c-watch: #FF3D3D;
  --c-coach: #A78BFA;
  --c-sport: #2EE6D6;
  --c-ready: #FF5CA8;
  --c-plain: #F2F4F8;

  /* The app's own brand gradient, matched to the native app's theme colours. sRGB fallback first. */
  --brand-blue: #00AEFF;
  --brand-red: #F71216;
  --brand-grad: linear-gradient(135deg, var(--brand-blue), var(--brand-red));

  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --gutter: 16px;
  --pw: 300px;   /* phone width */
  --ww: 210px;   /* watch width */
  color-scheme: dark;
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root { --brand-grad: linear-gradient(135deg in oklab, var(--brand-blue), var(--brand-red)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Glows are allowed to overflow their sections; the viewport clips them without ever scrolling sideways. */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

img { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-plan); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { --gutter: 32px; } }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px;
}
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
h1.display { font-size: clamp(58px, 9vw, 124px); }
h2.display { font-size: clamp(48px, 6vw, 96px); }
.display--small { font-size: clamp(34px, 3.2vw, 46px); line-height: 0.96; }
.feature__grid h2.display { font-size: clamp(46px, 4.9vw, 74px); }
.display em { font-style: normal; color: var(--c, var(--ink)); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c, var(--mute));
  margin: 0 0 16px;
}
.eyebrow--plain { color: var(--mute); }
.eyebrow--hero span { display: inline-block; white-space: nowrap; }
.eyebrow--hero span + span::before { content: "\00B7"; margin: 0 10px; }
@media (max-width: 719px) {
  .eyebrow--hero span { display: block; }
  .eyebrow--hero span + span::before { content: none; }
}
.tag {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--c, var(--ink));
  padding: 3px 8px 2px; border-radius: 6px; margin-left: 8px; line-height: 1.2;
}

.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--mute);
  max-width: 38ch;
  margin: 22px 0 0;
}
.lede--small { font-size: 16px; }
.lede b { color: var(--ink); font-weight: 600; }

.textlink {
  display: inline-block;
  margin-top: 26px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c, var(--mute));
  padding-bottom: 2px;
}
.textlink:hover { color: var(--c, var(--ink)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.btn--primary {
  background: var(--ink);
  color: #0B0D14;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.12);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(255, 255, 255, 0.18); }
.btn--ghost {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); }
.btn--small { padding: 10px 16px; font-size: 14px; background: var(--ink); color: #0B0D14; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row--centre { justify-content: center; }
@media (max-width: 419px) {
  .cta-row .btn { font-size: 15px; padding: 14px 17px; }
}

/* ---------- Nav + brand ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a pseudo-element: a backdrop-filter on the header itself would make the header the containing block
   of the fixed menu panel (the panel then collapsed to a 60 px strip and the page painted over it). */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(6, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav__row { position: relative; z-index: 1; }
.nav__row { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: flex-start; gap: 9px; text-decoration: none; flex: none; }
.brand__mark {
  width: 32px; height: 32px; display: block; align-self: center; border-radius: 22%;
  mix-blend-mode: screen;   /* the artwork's black ground sinks into the page; the S itself is untouched */
}
.brand__word {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand__tm { font-family: var(--font-body); font-size: 9px; line-height: 1; color: var(--mute); margin: 7px 0 0 1px; }
.nav__links { display: none; gap: 22px; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { margin-left: auto; }
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex: none;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
/* open: the three bars become a close cross (the button's label says "Close menu") */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__toggle span { transition: none; } }
/* MOBILE MENU (owner bug 2026-10-01, from his iPhone: "See how the menu appears when on a section with graphic ... that
   menu needs to appear smaller in a better way"). WHAT WAS WRONG: the homepage's moving graphics carry z-indexes up to
   300 (hero orbit) and 100 (coach answers) in the page's root stacking context, above the header's 50, so they painted
   over the open menu (and its 30 px uppercase links read as a wall of type). THE FIX, three parts: (1) home.css isolates
   the stage and the answer ring so their z-indexes stay inside them; (2) while the menu is open the header is fixed to
   the top at z-index 1000, above anything a page can hold, and the page under it is locked where it was (body fixed at
   -scrollY by the menu script, restored on close) and made inert; (3) the panel is one solid full-screen sheet in the
   page's own ground, under the header row (so the brand and the close cross stay on top), one column of 24 px links,
   each at least 52 px tall to tap. The CTA's own colours now win over the link rule (they lost on specificity before,
   which left white text on a white pill: the "empty pill" in his screenshot). ALTERNATIVES rejected: only raising the
   header's z-index (the graphics would still cover the sticky header while scrolling); a translucent sheet with blur
   (the cause of the see-through look). Desktop (1024 px and up) never shows the button or the panel. */
body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.nav-open .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.nav__panel {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg);
  padding: 76px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__panel[hidden] { display: none !important; }
.nav__panel a {
  display: flex; align-items: center; flex: none; min-height: 52px; padding: 6px 0;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.nav__panel a.nav__panel-cta {
  margin-top: 24px; justify-content: center; border: 0; border-radius: 999px;
  background: var(--ink); color: #0B0D14;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none;
}
@media (max-width: 439px) {
  .nav__row { gap: 12px; }
  .brand { gap: 7px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__word { font-size: 21px; line-height: 28px; }
  .brand__tm { margin-top: 5px; }
  .btn--small { padding: 10px 13px; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
  .nav__toggle, .nav__panel { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 clamp(16px, 2vw, 32px);
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero__copy { position: relative; z-index: 2; text-align: center; }
.hero__copy .lede { margin-left: auto; margin-right: auto; max-width: 44ch; }
.hero__copy .cta-row { justify-content: center; }

/* the four proof facts, the USP in four words, under the CTAs and inside the first screen */
.proof {
  margin-top: 34px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.proof__item { padding: 16px 12px 16px 0; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--line); }
@media (max-width: 419px) { .proof__item { padding-top: 13px; padding-bottom: 13px; } }
.proof__item:nth-child(odd) { border-right: 1px solid var(--line); }
.proof__item:nth-child(even) { padding-left: 16px; }
.proof__item strong {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(26px, 2.3vw, 32px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
  color: var(--c, var(--ink));
}
.proof__item strong small { font-size: 0.5em; letter-spacing: 0.14em; color: var(--mute); margin-left: 6px; vertical-align: 0.2em; }
.proof__item span { font-size: 14px; line-height: 1.4; color: var(--mute); }

/* The stage: one real screen per category around the AI coach, which sits front and centre (as in the hub below), plus the
   watch. Every piece is placed absolutely inside a box that scales with its column (container units: 1cqw = 1% of the box
   width, so the whole composition holds its shape at any width). Back row: plan (left, leaning in), health (centre, high,
   its chart showing above the coach), food (right, leaning in). Front: the coach, then the watch over the food phone's foot.
   Nothing is clipped: the glows fade out on their own and the phones' tab bars fade into the page (mask). Under 768px the
   back slot is hidden rather than squashed, and the rest are re-placed at a compact scale (mobile rules first). With
   motion allowed the four phones turn through these slots (HERO ORBIT below); without it this is the picture. */
.stage { position: relative; }
.stage__inner { isolation: isolate; }   /* the orbit's z-indexes (up to 300) stay inside the stage: see MOBILE MENU above */
.stage__inner {
  position: relative;
  container-type: inline-size;
  width: min(100%, 640px);
  margin: 0 auto;
  aspect-ratio: 1 / 1.44;
}
@supports not (aspect-ratio: 1 / 1) { .stage__inner { padding-top: 144%; } }
.stage .stage__piece { position: absolute; margin: 0; }   /* outranks .phone / .watch (position: relative) below */
/* All four phones share ONE width, the front phone's, and the side and back phones are drawn smaller with scale(), so a
   phone is the same size of image whichever slot it is in. Why: the hero turns the phones through these slots (script at
   the bottom of index.html, owner 2026-09-26), a phone that reaches the front is shown full size, and the image copies
   (srcset) are sized from this static arrangement, so every hero phone must already be laid out at the front width here
   or it would be blurry at the front. Each slot is the owner-approved 2026-09-25 composition, unchanged on screen: the
   same visual size and place as before, now written as the (left, top) of a front-width box plus rotate() and scale()
   about its centre (box height = 2.113 x width: the 2087/960 screen inside a 2.6% bezel). The orbit script copies these
   numbers (WIDE / NARROW in index.html): change them together.
   Under 768px: front 52cqw; the sides drawn at 40cqw (scale 0.769); no room for the back slot above the coach, so the
   phone in it is hidden (the orbit fades it out behind the coach and back in on the right). */
.stage .stage__piece.phone { --pw: 52vw; transform-origin: 50% 50%; }
.stage__coach  { left: 24%;  top: 12vw;     z-index: 4; }
.stage__plan   { left: -6%;  top: -12.68vw; z-index: 2; transform: rotate(5deg) scale(0.769); }
.stage__food   { left: 54%;  top: -12.68vw; z-index: 2; transform: rotate(-5deg) scale(0.769); }
.stage__health { left: 24%;  top: -12.68vw; z-index: 1; transform: scale(0.769); visibility: hidden; }
.stage__watch  { --ww: 31vw; left: 64%;  top: 86vw; z-index: 5; transform: rotate(7deg); }
@supports (width: 1cqw) {
  .stage .stage__piece.phone { --pw: 52cqw; }
  .stage__coach { top: 12cqw; }
  .stage__plan, .stage__food, .stage__health { top: -12.68cqw; }
  .stage__watch { --ww: 31cqw; top: 86cqw; }
}
/* The hero watch is a real one: our HIIT screen composed into Apple's Series 11 bezel (silver case, neon yellow Sport Band)
   by tools/compose_watch.py, a 560x880 image whose case spans 497 px, so --ww (the case width) maps to 1.127 image widths.
   The image carries the case and bands; the page adds the drop shadow and the glow, which sits behind and to the right of
   the watch (inset starts 20% in) so it lights the food phone's foot rather than painting the coach's screen pink. */
.stage__watch--real { width: calc(var(--ww) * 1.127); }
.stage__watch--real img {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 calc(var(--ww) * 0.12) calc(var(--ww) * 0.14) rgba(0, 0, 0, 0.6));
}
.stage__watch--real::before {
  content: ""; position: absolute; z-index: 0;
  inset: 10% -30% 10% 20%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #fff) 70%, transparent), transparent);
  filter: blur(32px);
  opacity: 0.7;
  pointer-events: none;
}
.stage .phone--bleed .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
}
/* the coach's answer is the point: keep it readable to the meal card, only the tab bar fades */
.stage .stage__coach .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 98%);
}
/* five glows in one place would wash out: the front pieces carry the light, the back row is dimmer */
.stage .stage__plan::before, .stage .stage__food::before { opacity: 0.7; }
.stage .stage__health::before { opacity: 0.6; inset: -10% -30% 40%; }
.stage .stage__coach::before { opacity: 0.95; }
.stage .stage__food::before { animation-delay: -2.4s; }
.stage .stage__plan::before { animation-delay: -4.6s; }
.stage .stage__health::before { animation-delay: -1.2s; }
.stage .stage__watch::before { animation-delay: -3.5s; }
@media (min-width: 768px) {
  .stage__inner { aspect-ratio: 1 / 1.24; }
  @supports not (aspect-ratio: 1 / 1) { .stage__inner { padding-top: 124%; } }
  /* front 40cqw; sides 31cqw (scale 0.775), leaning in; back 32cqw (scale 0.8), its top showing above the coach */
  .stage .stage__piece.phone { --pw: 40vw; }
  .stage__coach  { left: 30%;   top: 34vw; }
  .stage__plan   { left: -4.5%; top: 0.49vw;  transform: rotate(5deg) scale(0.775); }
  .stage__food   { left: 64.5%; top: 0.49vw;  transform: rotate(-5deg) scale(0.775); }
  .stage__health { left: 30%;   top: -8.45vw; transform: scale(0.8); visibility: visible; }
  .stage__watch  { --ww: 30vw; left: 68%; top: 64vw; z-index: 5; transform: rotate(7deg); }
  @supports (width: 1cqw) {
    .stage .stage__piece.phone { --pw: 40cqw; }
    .stage__coach  { top: 34cqw; }
    .stage__plan, .stage__food { top: 0.49cqw; }
    .stage__health { top: -8.45cqw; }
    .stage__watch  { --ww: 30cqw; top: 64cqw; }
  }
}
/* HERO ORBIT (owner 2026-09-26). The script places each phone with an inline transform in container units, so the static
   left/top above are cleared; the watch stays where it is, above every phone. A phone's scrolling strip only moves when it
   is at the front: down its whole screen and back up once (heroscroll, length --hdur per phone), and the end of that
   animation is what moves the turn on. Paused (pointer over the stage, stage off screen, tab hidden): everything holds. */
.stage--orbit .stage__piece.phone { left: 0; top: 0; visibility: visible; will-change: transform, opacity; }
.stage--orbit .stage__watch { z-index: 300; }
.stage--orbit .stage__piece .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
}
.stage--orbit .stage__piece.is-front .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 98%);
}
.stage .phone__body .scrollshot__strip { animation: none; }
.stage--orbit .is-front .phone__body .scrollshot__strip { animation: heroscroll var(--hdur, 10s) ease-in-out 1.2s 1 both; }
.stage--orbit.stage--paused .is-front .phone__body .scrollshot__strip { animation-play-state: paused; }
@keyframes heroscroll {
  0% { transform: translateY(0); }
  40%, 58% { transform: translateY(var(--travel)); }
  92%, 100% { transform: translateY(0); }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .hero__copy { text-align: left; }
  .hero__copy .lede { margin-left: 0; }
  .hero__copy .cta-row { justify-content: flex-start; }
  h1.display { font-size: clamp(56px, 5.4vw, 80px); }
}

/* ---------- The hub: the AI coach in the middle, fed by plan / food / health, pointed at the goal ---------- */
.chain__note { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--dim); }
.hub { padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.hub__intro { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); }
.hub__intro .lede { margin-left: auto; margin-right: auto; }
.hub__map { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.hub__lines { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.hub__base { fill: none; stroke-width: 1.5; opacity: 0.28; }
.hub__flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 16; opacity: 0.95; animation: hubflow 1.4s linear infinite; }
.hub__flow--out { stroke-width: 3.5; }
@keyframes hubflow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }

.hub__inputs { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hub__node {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  background: color-mix(in srgb, var(--bg-2) 92%, var(--c));
}
.hub__node b {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.3vw, 34px); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  color: var(--c);
}
.hub__node b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none; }
.hub__node span { display: block; margin-top: 6px; font-size: 14px; color: var(--mute); line-height: 1.45; }

.hub__core { position: relative; z-index: 1; display: grid; place-items: center; }
.hub__coach {
  position: relative; width: clamp(210px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; padding: 28px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c-coach) 28%, var(--bg-2)), var(--bg-2) 70%);
  border: 1.5px solid color-mix(in srgb, var(--c-coach) 70%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-coach) 8%, transparent), 0 0 80px color-mix(in srgb, var(--c-coach) 35%, transparent);
}
.hub__coach::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c-coach) 60%, transparent);
  animation: hubring 3.2s ease-out infinite;
}
@keyframes hubring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.hub__coach b {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 3.6vw, 52px); text-transform: uppercase; line-height: 0.95;
  color: var(--c-coach);
}
.hub__coach span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink); max-width: 17ch; }

.hub__goal {
  position: relative; z-index: 1; justify-self: center; width: min(100%, 300px);
  border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 20px; background: var(--bg-2);
}
.hub__goal-label {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.hub__goal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub__goal li {
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mute);
  animation: hubgoal 8s infinite;
}
.hub__goal li:nth-child(2) { animation-delay: 2s; }
.hub__goal li:nth-child(3) { animation-delay: 4s; }
.hub__goal li:nth-child(4) { animation-delay: 6s; }
@keyframes hubgoal {
  0%, 22% { color: var(--ink); border-color: color-mix(in srgb, var(--c-coach) 80%, transparent); background: color-mix(in srgb, var(--c-coach) 16%, transparent); }
  28%, 100% { color: var(--mute); border-color: var(--line); background: transparent; }
}

@media (min-width: 900px) {
  .hub__map { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.75fr); gap: clamp(48px, 6vw, 96px); }
  .hub__goal { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .hub__flow, .hub__coach::after, .hub__goal li { animation: none; }
  .hub__coach::after { display: none; }
}
.static .hub__flow, .static .hub__coach::after, .static .hub__goal li { animation: none; }
.static .hub__coach::after { display: none; }
.static .hub__goal li:first-child { color: var(--ink); border-color: color-mix(in srgb, var(--c-coach) 80%, transparent); background: color-mix(in srgb, var(--c-coach) 16%, transparent); }

/* ---------- Device frames ---------- */
.phone { position: relative; width: var(--pw); flex: none; }
.phone::before {
  content: ""; position: absolute; z-index: 0;
  inset: -16% -44% -10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #fff) 85%, transparent), color-mix(in srgb, var(--glow, #fff) 30%, transparent) 55%, transparent 100%);
  filter: blur(38px);
  opacity: 1;
  pointer-events: none;
}
.phone__body {
  position: relative; z-index: 1;
  border-radius: calc(var(--pw) * 0.16);
  padding: calc(var(--pw) * 0.026);
  background: linear-gradient(160deg, #2C2F38 0%, #14161C 55%, #0B0C10 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.8),
    0 30px 70px rgba(0, 0, 0, 0.65);
}
.phone__body::after { /* side button hint */
  content: ""; position: absolute; right: calc(var(--pw) * -0.008); top: 22%; width: calc(var(--pw) * 0.008); height: 9%;
  background: #2C2F38; border-radius: 2px;
}
.phone__body img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--pw) * 0.135);
  background: #fff;
}
/* a phone whose bottom (the tab bar) fades into the page, App-Store-panel style */
.phone--bleed { margin-bottom: calc(var(--pw) * -0.28); }
.phone--bleed .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 93%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 93%);
}
.phone--bleed::before { inset: -16% -44% 8%; }
/* a phone whose top (status bar and title bar) fades in from the dark: the screen below it is the point */
.phone--rise .phone__body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 7%, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 7%, #000 16%);
}
.phone--rise::before { inset: 4% -44% -10%; }
/* a phone whose top only is shown (the coach: header, prompts and the question; the reply is out of frame) */
.phone--top .phone__body { border-radius: calc(var(--pw) * 0.16) calc(var(--pw) * 0.16) 0 0; padding-bottom: 0; }
.phone--top .phone__body img { border-radius: calc(var(--pw) * 0.135) calc(var(--pw) * 0.135) 0 0; }
.phone--top .phone__body::after { display: none; }

.watch { position: relative; width: var(--ww); flex: none; display: flex; flex-direction: column; align-items: center; }
.watch::before {
  content: ""; position: absolute; z-index: 0;
  inset: -26% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #fff) 85%, transparent), color-mix(in srgb, var(--glow, #fff) 28%, transparent) 55%, transparent 100%);
  filter: blur(32px);
  opacity: 1;
  pointer-events: none;
}
/* The Apple Watch, drawn to read as the product rather than a diagram. --ww is the case width; everything else is a
   fraction of it. Case: natural-titanium rim (a conic gradient so the reflection changes around the rim) with a bevelled
   edge, 1.16:1 tall. Glass: a black bezel (the screen's own spread shadow) under a curved-glass reflection (::before).
   Digital Crown with knurling and the side button below it (::after, two rounded shapes cut by an SVG mask).
   Sport band top and bottom: soft matte, 60% of the case width, tilted away in perspective, pin holes on the lower strap. */
.watch__case {
  position: relative; z-index: 1;
  width: 100%;
  border-radius: calc(var(--ww) * 0.27);
  padding: calc(var(--ww) * 0.095);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.18) 100%),
    conic-gradient(from 200deg at 50% 50%, #A9ADB4, #5E6269 11%, #D5D8DD 24%, #7B7F87 38%, #C6C9CF 50%, #55595F 63%, #E0E2E6 77%, #8B8F96 89%, #A9ADB4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 calc(var(--ww) * 0.012) rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 calc(var(--ww) * 0.16) calc(var(--ww) * 0.3) rgba(0, 0, 0, 0.72),
    0 calc(var(--ww) * 0.05) calc(var(--ww) * 0.09) rgba(0, 0, 0, 0.5);
}
.watch__case img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--ww) * 0.175);
  background: #000;
  box-shadow: 0 0 0 calc(var(--ww) * 0.056) #000;   /* the black glass bezel around the active screen */
}
.watch__case::before { /* curved glass: a soft diagonal reflection, a specular arc at the top, darker at the edge */
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: calc(var(--ww) * 0.04);
  border-radius: calc(var(--ww) * 0.23);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 47%),
    radial-gradient(130% 70% at 50% -30%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 56%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 calc(var(--ww) * 0.035) rgba(0, 0, 0, 0.65);
}
.watch__case::after { /* Digital Crown (knurled, top) and side button (below), on the right edge */
  content: ""; position: absolute; z-index: 0;
  right: calc(var(--ww) * -0.072); top: calc(var(--ww) * 0.24);
  width: calc(var(--ww) * 0.075); height: calc(var(--ww) * 0.532);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 calc(var(--ww) * 0.005), rgba(255, 255, 255, 0) calc(var(--ww) * 0.005) calc(var(--ww) * 0.008), rgba(0, 0, 0, 0.5) calc(var(--ww) * 0.008) calc(var(--ww) * 0.013)) 0 0 / 100% calc(var(--ww) * 0.2) no-repeat,
    linear-gradient(90deg, #4A4D54 0%, #B3B6BD 30%, #E6E8EB 48%, #9DA1A8 70%, #3E4148 100%) 0 0 / 100% calc(var(--ww) * 0.2) no-repeat,
    linear-gradient(90deg, #4A4D54 0%, #AEB1B8 35%, #D6D8DC 52%, #8C9097 78%, #3E4148 100%) 0 calc(var(--ww) * 0.29) / 70% calc(var(--ww) * 0.21) no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 532'%3E%3Crect width='75' height='200' rx='16'/%3E%3Crect y='290' width='52' height='210' rx='13'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 532'%3E%3Crect width='75' height='200' rx='16'/%3E%3Crect y='290' width='52' height='210' rx='13'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.watch__band {
  position: relative; z-index: 0;
  width: 60%; height: calc(var(--ww) * 0.62);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.07) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.6) 100%),
    #272A31;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.09), inset -1px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.watch__band--top {
  border-radius: calc(var(--ww) * 0.07) calc(var(--ww) * 0.07) 0 0;
  margin-bottom: calc(var(--ww) * -0.05);
  transform-origin: 50% 100%;
  transform: perspective(calc(var(--ww) * 3)) rotateX(32deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
}
.watch__band--bottom {
  border-radius: 0 0 calc(var(--ww) * 0.07) calc(var(--ww) * 0.07);
  margin-top: calc(var(--ww) * -0.05);
  transform-origin: 50% 0;
  transform: perspective(calc(var(--ww) * 3)) rotateX(-32deg);
  background:
    radial-gradient(circle at 50% 50%, #0C0D11 0 calc(var(--ww) * 0.042), #3A3D45 calc(var(--ww) * 0.05), rgba(0, 0, 0, 0) calc(var(--ww) * 0.06)) 0 calc(var(--ww) * 0.13) / 100% calc(var(--ww) * 0.2) repeat-y,
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.07) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.6) 100%),
    #272A31;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

/* ---------- Feature sections ---------- */
.feature { position: relative; padding: clamp(72px, 8vw, 116px) 0; overflow: hidden; }
.feature--band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature__grid {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
.feature__text { position: relative; z-index: 2; }
.feature__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 0; }
.feature__visual .phone { --pw: clamp(230px, 60vw, 290px); }

@media (min-width: 900px) {
  .feature__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .feature--flip .feature__text { order: 2; }
  .feature--flip .feature__visual { order: 1; }
  .feature__visual .phone { --pw: clamp(240px, 21vw, 300px); }
}

/* pair of phones: flex with a negative margin, so the pair can never spill over the text column */
.feature__visual--pair { align-items: flex-start; }
.feature__visual--pair .phone--front { --pw: clamp(190px, 50vw, 290px); z-index: 2; }
.feature__visual--pair .phone--back  { --pw: clamp(160px, 42vw, 250px); margin-left: calc(var(--pw) * -0.22); margin-top: 56px; z-index: 1; opacity: 0.95; }
.feature__visual--pair .phone--back::before { opacity: 0.45; }
@media (min-width: 900px) {
  .feature__visual--pair .phone--front { --pw: clamp(210px, 20vw, 290px); }
  .feature__visual--pair .phone--back  { --pw: clamp(180px, 17vw, 250px); margin-top: 64px; }
}

/* phone with the watch beside it (training); the premium tag is a caption under the pair, so it never leaves the gutter */
.feature__visual--wrist { flex-direction: column; gap: 18px; }
.wrist__pair { display: flex; align-items: center; justify-content: center; }
.feature__visual--wrist .phone { --pw: clamp(200px, 52vw, 290px); z-index: 1; }
.feature__visual--wrist .wrist { position: relative; z-index: 2; margin-left: calc(var(--ww) * -0.12); margin-top: 38%; }
.feature__visual--wrist .watch { --ww: clamp(140px, 36vw, 200px); transform: rotate(5deg); }
@media (min-width: 900px) {
  .feature__visual--wrist .phone { --pw: clamp(210px, 20vw, 290px); }
  .feature__visual--wrist .watch { --ww: clamp(160px, 15vw, 210px); }
}

.feature--coach .feature__text--centre .lede { max-width: 56ch; }

/* centred typographic sections */
.feature--centre { text-align: center; }
.feature__text--centre .lede { margin-left: auto; margin-right: auto; max-width: 52ch; }
/* R-1207 (build 268), the "Your cycle" section (#cycle): its privacy line under the cards and its row of reading links.
   WHAT: the two class names the approved draft (female-content/02-homepage-section.html) introduced, styled with the
   page's own tokens: the note reads like a .lede--small in --mute, the links reuse .textlink and wrap on phones.
   WHY: the draft kept six links (guides, stat explainer, blog, user guide); a wrapping row keeps them one tap away
   on a 375 px screen. ALTERNATIVE (the draft's fallback, not taken): one .textlink only. */
.feature__note { margin: 28px auto 0; max-width: 64ch; font-size: 15px; color: var(--mute); }
.feature__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 4px auto 0; max-width: 72ch; }
.feature__links .textlink { margin-top: 16px; }

/* ---------- Sports marquee (Direction B's crawl, in this page's colours) ---------- */
.ticker {
  margin: clamp(32px, 4vw, 48px) 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker + .ticker { margin-top: 6px; }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__track ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 66px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 6px 0;
  white-space: nowrap;
  color: var(--ink);
}
.ticker li::after {
  content: ""; display: inline-block; width: 0.26em; height: 0.26em; background: var(--c);
  margin: 0 0.5em; vertical-align: 0.26em; transform: rotate(45deg);
}
.ticker--alt li { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 244, 248, 0.6); }
.ticker__ctl { margin-top: 14px; text-align: center; }
.ticker__pause {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px 6px; border-radius: 999px; cursor: pointer;
}
.ticker__pause:hover { color: var(--ink); border-color: var(--dim); }

/* three sport screens (hidden until the sport captures exist). On phones a full-bleed snap scroller whose clip box is
   the viewport's own edges, with room above for the glow so nothing is cut inside the page. */
/* the workout plan's sport phones (owner 2026-09-25: side by side, never overlapping): the sports-row layout with full
   scrolling phones; a fixed phone width so the frame's corner radius stays circular, and the columns sized to the phones */
/* the nutrition plan's day-type phones: the same row, sized so five sit across a desktop wrap */
.trio--nutrition .trio__item { width: min(66vw, 230px); }
.trio--nutrition .trio__item .phone { --pw: min(66vw, 230px); }
@media (min-width: 900px) {
  .trio.trio--nutrition { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px clamp(12px, 1.4vw, 20px); }
  .trio--nutrition .trio__item, .trio--nutrition .trio__item .phone { width: clamp(160px, 13.4vw, 200px); --pw: clamp(160px, 13.4vw, 200px); max-width: none; }
}
.trio--plan .trio__item { width: min(66vw, 270px); }
.trio--plan .trio__item .phone { --pw: min(66vw, 270px); }
@media (min-width: 900px) {
  .trio.trio--plan { grid-template-columns: repeat(auto-fit, minmax(0, 270px)); justify-content: center; gap: clamp(28px, 4vw, 56px); }
  .trio--plan .trio__item .phone { --pw: clamp(230px, 20vw, 270px); }
}
/* the sports row (owner 2026-09-25): four scrolling phones; the football one is a SEQUENCE — its match day scrolls, then its
   Nutrition tab fades in over it and scrolls, then back to the start (all on the phone's own --dur clock) */
.trio--sports .trio__item, .trio--sports .trio__item .phone { width: min(66vw, 250px); --pw: min(66vw, 250px); }
@media (min-width: 900px) {
  .trio.trio--sports { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(14px, 1.8vw, 26px); }
  .trio--sports .trio__item, .trio--sports .trio__item .phone { width: clamp(190px, 17vw, 250px); --pw: clamp(190px, 17vw, 250px); max-width: none; }
}
.seq { position: relative; }
.seq .seq__b { position: absolute; left: 0; right: 0; top: 0; opacity: 0; animation: seq-b-layer var(--dur, 30s) linear infinite; }
.phone__body .seq__a .scrollshot__strip { animation-name: seq-a-strip; }
.phone__body .seq__b .scrollshot__strip { animation-name: seq-b-strip; }
.seq:hover .seq__b, .seq:hover .scrollshot__strip { animation-play-state: paused; }
@keyframes seq-a-strip { 0%, 8% { transform: translateY(0); } 32%, 48% { transform: translateY(var(--travel)); } 50%, 100% { transform: translateY(0); } }
@keyframes seq-b-strip { 0%, 56% { transform: translateY(0); } 80%, 94% { transform: translateY(var(--travel)); } 100% { transform: translateY(0); } }
@keyframes seq-b-layer { 0%, 46% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .seq .seq__b { animation: none; opacity: 0; } }
.static .seq .seq__b { animation: none; opacity: 0; }
.trio[hidden] { display: none; }
.trio {
  margin: clamp(40px, 5vw, 64px) calc(-1 * var(--gutter)) 0;
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 120px var(--gutter) 8px;
  margin-top: calc(clamp(40px, 5vw, 64px) - 96px);
  scrollbar-width: none;
}
.trio::-webkit-scrollbar { display: none; }
.trio__item { flex: 0 0 auto; scroll-snap-align: center; text-align: center; width: min(66vw, 250px); }
.trio__item .phone { --pw: 100%; margin: 0 auto; }
.trio__item .phone::before { inset: -10% -34% 8%; }
.trio__item .phone--bleed { margin-bottom: -22%; }
.trio__item figcaption { position: relative; z-index: 2; margin-top: 10px; }
.trio__item figcaption b {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  color: var(--c);
}
.trio__item figcaption span { display: block; font-size: 14px; color: var(--mute); margin-top: 4px; }
@media (min-width: 900px) {
  .trio { overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 24px 0 0; margin: clamp(40px, 5vw, 64px) 0 0; justify-items: center; }
  .trio__item { width: 100%; max-width: 280px; }
}

/* Fuel dial: the kinds of day, in the app's own badge words */
.dial {
  position: relative;
  margin: clamp(40px, 6vw, 72px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 4px clamp(18px, 3vw, 40px);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 5.6vw, 76px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 var(--gutter);
}
.dial::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(70vw, 720px); height: 180px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent);
  filter: blur(40px); pointer-events: none;
}
.dial__word { position: relative; z-index: 1; white-space: nowrap; }
.dial__word--lit { color: var(--c); text-shadow: 0 0 40px color-mix(in srgb, var(--c) 60%, transparent); }

/* Text cards: a headline and one line each, no icons */
.cards {
  position: relative;
  margin: clamp(40px, 6vw, 64px) auto 0;
  max-width: 1040px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
  text-align: left;
}
.cards::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(80vw, 760px); height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 36%, transparent), transparent);
  filter: blur(46px); pointer-events: none;
}
.cards__item {
  position: relative; z-index: 1;
  border-radius: 16px;
  padding: 20px 20px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-top: 3px solid var(--c);
}
.cards__item b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
}
.cards__item b .tag { font-size: 11px; margin-left: 6px; vertical-align: 0.3em; }
.cards__item p { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Premium: what is built in, what premium adds ---------- */

/* ---------- Privacy + evidence ---------- */
.pair { padding: clamp(24px, 4vw, 48px) 0 clamp(60px, 8vw, 100px); }
.pair__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pair__card {
  position: relative; overflow: hidden;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.pair__card::after {
  content: ""; position: absolute; z-index: 0; right: -20%; bottom: -40%; width: 70%; height: 90%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.10), transparent);
  filter: blur(30px); pointer-events: none;
}
.pair__card--grad::after { background: radial-gradient(closest-side, rgba(0, 174, 255, 0.35), rgba(247, 18, 22, 0.18) 60%, transparent); }
.pair__card--grad .eyebrow { width: fit-content; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pair__card > * { position: relative; z-index: 1; }
.pair__card .lede { max-width: 44ch; }
@media (min-width: 900px) { .pair__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ---------- CTA ---------- */
.cta { position: relative; padding: clamp(72px, 10vw, 140px) 0; overflow: hidden; text-align: center; }
.cta::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(90vw, 900px); height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 174, 255, 0.35), rgba(247, 18, 22, 0.16) 55%, transparent);
  filter: blur(60px); pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta .lede { margin-left: auto; margin-right: auto; max-width: 44ch; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; color: var(--mute); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.fine { font-size: 13px; color: var(--dim); max-width: 52ch; margin: 14px 0 0; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.footer__links a { text-decoration: none; color: var(--mute); font-size: 14px; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin-top: 32px; font-size: 13px; color: var(--dim); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.2fr 2fr; }
  .footer__links { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Motion ---------- */
@keyframes breathe {
  from { opacity: 0.7; transform: scale(0.98); }
  to   { opacity: 1;   transform: scale(1.04); }
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* subtle reveals: only once JS is present, only when motion is allowed */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-d1 { transition-delay: 0.1s; }
.js .rv-d2 { transition-delay: 0.2s; }

@media (prefers-reduced-motion: no-preference) {
  .stage .phone::before, .stage .watch::before, .stage .stage__watch--real::before {
    animation: breathe 7s ease-in-out infinite alternate;
  }
  .ticker__track { animation: tick 70s linear infinite; }
  .ticker--alt .ticker__track { animation-direction: reverse; animation-duration: 84s; }
  .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.paused .ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  /* the marquee becomes a centred, wrapped list of the same 39 names, at a size that stays a list rather than a wall */
  .ticker { -webkit-mask-image: none; mask-image: none; margin-inline: auto; width: min(var(--maxw), 100% - 2 * var(--gutter)); }
  .ticker__track { width: auto; }
  .ticker__track ul { flex-wrap: wrap; justify-content: center; }
  .ticker__track ul[aria-hidden="true"] { display: none; }
  .ticker li { font-size: clamp(22px, 3.2vw, 44px); padding: 4px 0; }
  .ticker li:last-child::after { display: none; }
  .ticker__ctl { display: none; }
}

/* Screenshot mode (?static in the URL): everything revealed, no entrance animation, marquee frozen. */
html.static .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html.static .stage .phone::before, html.static .stage .watch::before, html.static .stage .stage__watch--real::before, html.static .ticker__track { animation: none !important; }

/* ---------- AI coach cards: the sports ticker's parts, as one slow row of cards (R-1203, owner 2026-10-01) ----------
   WHAT: .ticker--cards. Each card is the same .cards__item component as every card row on the page; this block only
   undoes what .ticker li sets for the sports names (display face, uppercase, one line, the diamond) and sets the speed.
   SPEED: one speed at every width, 15 px/s (owner 2026-10-01: the same speed on desktop and phone, then "a little too
   slow" at 10 px/s), set in px by the script next to the row in index.html from the row's real width; the duration
   below is only the no-script fallback, the same 15 px/s for the 250 px phone card (17.7 s a card; --n = card count). overflow: clip rather than hidden: a keyboard-focused footnote link must not scroll the row (that
   would open a gap in the loop); the inline script in index.html moves the paused row to the focused card instead.
   Phones keep the motion too (owner: "Auto-scroll too"), with a narrower edge fade so more of each card is clear.
   FALLBACK (reduced motion, ?static): a still row the visitor swipes; the copy list and the pause button are hidden.
   ALTERNATIVES rejected: a still grid for the fallback (14 cards leave a short last row in a 3 or 4 column grid);
   new JavaScript for the motion (the ticker's CSS already pauses on hover, focus and .paused). */
.ticker.ticker--cards { overflow: clip; padding: 4px 0 8px; }
.ticker--cards .ticker__track ul { gap: 16px; padding-right: 16px; align-items: stretch; }
.ticker--cards .cards__item {
  flex: 0 0 clamp(250px, 22vw, 300px); padding: 20px 20px 18px; text-align: left;
  font: inherit; text-transform: none; letter-spacing: normal; white-space: normal; color: inherit;
}
.ticker--cards .cards__item::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker--cards .ticker__track { animation-duration: calc(var(--n, 13) * 11.8s); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .ticker.ticker--cards {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker.ticker--cards { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .ticker--cards .ticker__track { width: max-content; }
  .ticker--cards .ticker__track ul { flex-wrap: nowrap; justify-content: flex-start; padding-right: 0; }
  .ticker--cards .cards__item { scroll-snap-align: start; }
}
html.static .ticker.ticker--cards {
  -webkit-mask-image: none; mask-image: none; margin-inline: auto; width: min(var(--maxw), 100% - 2 * var(--gutter));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
}
html.static .ticker--cards .ticker__track ul { padding-right: 0; }
html.static .ticker--cards .ticker__track ul[aria-hidden="true"], html.static #coachTickerPause { display: none; }
html.static .ticker--cards .cards__item { scroll-snap-align: start; }

/* QR code to the app. The code image is black on white for scanning; the frame sits on the page tokens. */
.qr { display: none; align-items: center; gap: 12px; color: var(--dim); text-decoration: none; font-size: 13px; line-height: 1.35; }
.qr img { display: block; width: 76px; height: 76px; padding: 6px; background: #fff; border-radius: 10px; image-rendering: pixelated; }
.qr span { max-width: 12ch; }
.qr:hover span, .qr:focus-visible span { color: var(--ink); }
.qr:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.qr--cta { flex-direction: column; margin: 28px auto 0; }
.qr--cta img { width: 132px; height: 132px; padding: 10px; border-radius: 14px; }
.qr--cta span { max-width: none; }
@media (min-width: 1024px) { .qr--hero { display: inline-flex; margin-left: 8px; } }
@media (min-width: 720px) { .qr--cta { display: inline-flex; } }

/* ---------- Scrolling screen: one real chat scrolled inside the phone, header and tab bar fixed ---------- */
.scrollshot { position: relative; }
.scrollshot__view { position: absolute; left: 0; right: 0; top: var(--head); bottom: var(--foot); overflow: hidden; }
/* --dur / --delay per phone: a long strip (the Progress tab is five screens) needs longer to stay readable, and two scrolling
   phones side by side are put out of step so they don't move together */
.phone__body .scrollshot__strip { border-radius: 0; background: transparent; animation: scrollshot var(--dur, 15s) ease-in-out var(--delay, 0s) infinite; will-change: transform; }
@keyframes scrollshot {
  0%, 14% { transform: translateY(0); }
  42%, 70% { transform: translateY(var(--travel)); }
  90%, 100% { transform: translateY(0); }
}
.scrollshot:hover .scrollshot__strip { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .phone__body .scrollshot__strip { animation: none; }
  .scrollshot__view { overflow-y: auto; overscroll-behavior: contain; }
}
.static .phone__body .scrollshot__strip { animation: none; }

/* ---------- AI coach ring: real answers orbiting, each faces you and stops at the front ---------- */
/* Owner 2026-09-24: the front phone a touch smaller, sized so the phone AND the question under it share one desktop screen
   (the stage plus the caption bar fit inside 100vh with room for the sticky nav and the line above). */
.ring { --pw: clamp(210px, min(24vw, calc((100vh - 280px) / 2.26)), 300px); margin: clamp(28px, 4vw, 48px) auto 0; max-width: 1180px; }
.ring__bar { margin-top: 14px; }
.ring__stage { position: relative; height: calc(var(--pw) * 2.26); isolation: isolate; }   /* the ring's z-indexes (up to 100) stay inside it */
.ring__item {
  position: absolute; left: 50%; top: 0; margin: 0; width: var(--pw);
  transform: translateX(-50%); transform-origin: 50% 60%;
  will-change: transform, opacity; transition: filter 0.4s;
}
.ring__item .phone { width: var(--pw); }
.ring__label { display: none; }
.ring__item:not(.is-front) { filter: saturate(0.7) brightness(0.62); }
.ring__item.is-front .phone__body { box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 90px color-mix(in srgb, var(--c-coach) 45%, transparent), 0 30px 70px rgba(0,0,0,0.6); }
/* the front phone's tall answer scrolls once it has arrived, then holds on the end */
.ring .phone__body .scrollshot__strip { animation: none; transform: translateY(0); transition: transform 0.9s ease; }
.ring__item.is-front .phone__body .scrollshot__strip { animation: ringscroll 6.5s ease-in-out 1.6s forwards; }
@keyframes ringscroll { from { transform: translateY(0); } to { transform: translateY(var(--travel)); } }
.ring__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.ring__btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 26px; line-height: 1;
}
.ring__btn:hover { border-color: color-mix(in srgb, var(--c-coach) 70%, transparent); }
.ring__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ring__caption { margin: 0; min-height: 3.2em; max-width: 46ch; text-align: center; font-size: 16px; line-height: 1.4; color: var(--ink); display: grid; align-content: center; }
.ring__asked { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-coach); }

/* No motion (or no script): a flat row the visitor scrolls, each answer scrollable in its own phone */
.ring--flat .ring__stage { height: auto; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; }
.ring--flat .ring__item { position: relative; left: auto; transform: none !important; opacity: 1 !important; filter: none; flex: none; scroll-snap-align: center; }
.ring--flat .ring__label { display: block; margin-top: 12px; font-size: 14px; color: var(--mute); max-width: var(--pw); }
.ring--flat .scrollshot__view { overflow-y: auto; }
.ring--flat .ring__bar { display: none; }
@media (max-width: 600px) { .ring { --pw: min(76vw, 300px); } }
.ring__stage { overflow-x: clip; overflow-y: visible; }
.ring--flat .ring__stage { justify-content: safe center; }
@media (min-width: 720px) { .ring--flat .ring__stage { gap: clamp(24px, 4vw, 56px); } }
/* Fewer than three answers: side by side, and the tall ones still scroll on their own */
.ring--auto .scrollshot__view { overflow: hidden; }
.ring--auto .phone__body .scrollshot__strip { animation: scrollshot 15s ease-in-out infinite; }
.ring--auto .scrollshot:hover .scrollshot__strip { animation-play-state: paused; }
.ring .phone { --glow: var(--c-coach); }

/* The training section's watch: Apple's official Series 11 bezel with our own rest screen, flattened into one image by
   tools/compose_watch.py (--band blue). The image is 560 wide, of which the case is 497, so it is drawn 1.127 x --ww to
   keep the same case size as the drawn watch it replaced. */
.watch--real { width: calc(var(--ww) * 1.127); }
.watch--real img { display: block; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 calc(var(--ww) * 0.12) calc(var(--ww) * 0.14) rgba(0, 0, 0, 0.6)); }
.watch--real::before { inset: 4% -30%; opacity: 0.7; }

/* small print (owner 2026-09-26): permission and goal conditions sit here, marked from the copy with * and † */
.notes { padding: 28px 0 44px; border-top: 1px solid var(--line); }
.notes p { font-size: 13px; line-height: 1.6; color: var(--mute); max-width: 76ch; margin: 6px auto; text-align: center; }
sup.fn { font-size: 0.6em; line-height: 0; }
sup.fn a { color: inherit; text-decoration: none; }
sup.fn a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 8b. What is Strathlon + FAQ (index.html #about; 2026-09-27 SEO/AIO, owner-approved definition/FAQ). The homepage loads
   home.css, not site.css, so the support page's .faq rules are ported here, scoped to .about; home.css has no --line-2 or
   --body tokens, so --line and --mute stand in. Long words wrap (overflow-wrap) so nothing scrolls sideways at 390 px. */
.about { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.about__inner { max-width: 860px; }
.about h2.display { font-size: clamp(44px, 5.2vw, 80px); }
.about__def { color: var(--ink); max-width: 60ch; margin-bottom: 16px; }
.about__para { color: var(--mute); font-size: 17px; line-height: 1.65; margin: 0 0 28px; max-width: 70ch; }
.about__sub { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(24px, 3vw, 32px); line-height: 1; color: var(--ink); margin: 36px 0 14px; scroll-margin-top: 84px; }
.about__list { margin: 0; padding-left: 20px; color: var(--mute); line-height: 1.6; max-width: 70ch; }
.about__list li { margin: 0 0 10px; }
.about__list li::marker { color: var(--c); }
.about, .about p, .about li, .about summary { overflow-wrap: anywhere; }
.about .faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); margin: 10px 0; padding: 0 18px; }
.about .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 17px; color: var(--ink); }
.about .faq summary::-webkit-details-marker { display: none; }
.about .faq summary::after { content: "+"; flex: none; color: var(--c); font-size: 24px; font-weight: 400; line-height: 1; }
.about .faq details[open] summary::after { content: "\2013"; }
.about .faq details p { margin: 0 0 16px; color: var(--mute); line-height: 1.6; }