/* Spreko site. Design rules live in DESIGN.md next to this file.
   One family (Geist), tinted graphite neutrals, one cobalt accent. The hero's live Ask Spreko demo is the one bold element;
   everything else stays quiet. Motion: only in response to the reader, or the single hero demo (pausable). */
:root {
  color-scheme: dark light;
  --bg: #14171b; --bg-2: #181b20; --panel: #1c2026; --panel-2: #22272e; --line: #2b3038; --line-2: #39404a;
  --fg: #eef1f4; --fg-2: #b6bec8; --muted: #8a939e; --accent: #5b84ff; --accent-ink: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --good: #3fb68b; --bad: #e5604d; --c-active: #ef7d3c; --c-steps: #4b9cf0; --c-sleep: #8b7cf6; --c-strength: #a78bfa; --c-fat: #e0a630;
  --r: 14px; --r-sm: 10px; --f-body: 'Geist', ui-sans-serif, system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9; --bg-2: #eef0f3; --panel: #ffffff; --panel-2: #f3f5f8; --line: #e1e5ea; --line-2: #ccd2da;
    --fg: #14171b; --fg-2: #3c434c; --muted: #66707b; --accent: #2f5ce6; --good: #1f8f66; --bad: #c4432f; --c-steps: #2c7fd1; --c-active: #d0691d;
  }
}
:root[data-theme="light"] { --bg: #f6f7f9; --bg-2: #eef0f3; --panel: #ffffff; --panel-2: #f3f5f8; --line: #e1e5ea; --line-2: #ccd2da; --fg: #14171b; --fg-2: #3c434c; --muted: #66707b; --accent: #2f5ce6; --good: #1f8f66; --bad: #c4432f; }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; 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(--fg); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h2 { font: 600 clamp(28px, 4vw, 42px)/1.1 var(--f-body); letter-spacing: -0.03em; }
h3 { font: 600 19px/1.3 var(--f-body); }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(1160px, 100%); margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(64px, 9vw, 112px); border-top: 1px solid var(--line); scroll-margin-top: 64px; }
[id] { scroll-margin-top: 72px; }
.lede { color: var(--fg-2); font-size: 18px; max-width: 62ch; margin-top: 14px; }
.muted { color: var(--muted); }
.head { display: grid; gap: 0; margin-bottom: 40px; max-width: 760px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transition: top 160ms var(--ease-out); }
.skip:focus { top: 12px; }

/* buttons: press feedback everywhere, hover only where there's a mouse */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 600 15px var(--f-body); text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--fg-2); }
  .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--fg)); }
  a.link:hover { color: var(--fg); }
}

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: -0.01em; }
.logo i { display: block; width: 28px; height: 28px; border-radius: 8px; background: #14171b; color: #5b84ff; box-shadow: inset 0 0 0 1px var(--line-2); font-style: normal; overflow: hidden; }
.logo i svg { display: block; width: 100%; height: 100%; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: 14.5px; color: var(--fg-2); }
.nav ul a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--fg); } }
.nav .btn { min-height: 38px; padding: 7px 14px; font-size: 14px; }

/* hero: copy and the audience switch on the left, the live Ask Spreko demo on the right */
.hero { border-top: 0; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.hero h1 { font: 650 clamp(40px, 6.2vw, 72px)/1.02 var(--f-body); letter-spacing: -0.045em; }
.hero .lede { font-size: clamp(17px, 1.6vw, 19px); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.aud { margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aud > span { font-size: 13.5px; color: var(--muted); }
.seg { display: inline-flex; width: max-content; max-width: 100%; padding: 4px; gap: 2px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.seg button { min-height: 38px; padding: 6px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--fg-2); font: 600 14px var(--f-body); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.seg button:active { transform: scale(0.97); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .seg button[aria-pressed="false"]:hover { color: var(--fg); } }
[data-for] { display: none; }
body[data-aud="me"] [data-for~="me"], body[data-aud="athlete"] [data-for~="athlete"], body[data-aud="coach"] [data-for~="coach"] { display: revert; }
body[data-aud="me"] .benefit[data-for~="me"], body[data-aud="athlete"] .benefit[data-for~="athlete"], body[data-aud="coach"] .benefit[data-for~="coach"] { display: grid; }
.swap { transition: opacity 200ms ease, filter 200ms ease; }
.swapping .swap { opacity: 0.6; filter: blur(2px); }

/* the demo phone card */
.demo { position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 14px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.demo-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.demo-head .mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.demo-head .mark svg { width: 17px; height: 17px; }
.demo-head b { font-size: 14.5px; display: block; line-height: 1.2; }
.demo-head small { color: var(--muted); font-size: 12px; }
.demo-pp { margin-left: auto; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font: 500 12.5px var(--f-body); cursor: pointer; touch-action: manipulation; transition: transform 160ms var(--ease-out); }
.demo-pp:active { transform: scale(0.97); }
.log { display: flex; flex-direction: column; gap: 10px; min-height: 360px; padding: 14px 4px 6px; font-size: 14.5px; }
.msg { max-width: 88%; opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.msg.in { opacity: 1; transform: none; }
.msg.q { align-self: flex-end; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--accent-ink); }
.msg.a { align-self: flex-start; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg-2); }
.msg.a b { color: var(--fg); font-variant-numeric: tabular-nums; }
.msg .src { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.spark { display: block; width: 100%; height: 48px; margin-top: 8px; }
.spark .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-out) 120ms; }
.msg.in .spark .ln { stroke-dashoffset: 0; }
.demo-note { text-align: right; font: 400 11px var(--f-mono); color: var(--muted); padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .msg { transition: opacity 150ms ease; transform: none; } .caret { animation: none; } .spark .ln { transition: none; stroke-dashoffset: 0; } }

/* device strip */
.devices { border-top: 1px solid var(--line); padding-block: 28px; }
.devices .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--fg-2); }
.devices p { flex-basis: 100%; font-size: 13px; max-width: 78ch; }

/* pains: three quotes, set as type, no cards */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pain q { display: block; font: 600 21px/1.3 var(--f-body); letter-spacing: -0.015em; quotes: '“' '”'; }
.pain p { margin-top: 10px; color: var(--fg-2); }

/* benefits: copy beside a product visual */
.benefit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 40px; }
.benefit + .benefit { border-top: 1px solid var(--line); }
.b-copy p { color: var(--fg-2); margin-top: 12px; max-width: 54ch; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--fg-2); font-size: 15px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.ticks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.b-visual { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 20px; display: grid; gap: 12px; min-width: 0; }
.vnote { font: 400 11px var(--f-mono); color: var(--muted); text-align: right; }
.rows { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rows div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; font-size: 14px; background: var(--panel-2); }
.rows div + div { border-top: 1px solid var(--line); }
.rows span { color: var(--fg-2); min-width: 0; }
.rows b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tag { display: inline-block; padding: 1px 8px; margin-left: 6px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line-2); color: var(--fg-2); }
.tag.good { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
.tag.warn { border-color: color-mix(in srgb, var(--c-active) 50%, transparent); color: var(--c-active); }
.ring-row { display: flex; align-items: center; gap: 20px; }
.ring { width: 108px; height: 108px; flex: none; }
.ring-copy b { display: block; font-size: 18px; } .ring-copy span { color: var(--fg-2); font-size: 14px; }
.chart { width: 100%; height: 150px; display: block; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--fg-2); }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }
/* form guide visual: the dashboard's own figure */
.formv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.formv .fig { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 38px 10px 10px; }
.formv .fig svg { display: block; width: 100%; height: 170px; overflow: visible; }
.formv .phase { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); font: 600 11.5px var(--f-body); }
.ff-floor { stroke: var(--line-2); stroke-width: 1.2; } .ff-b { stroke: var(--fg-2); stroke-linecap: round; } .ff-head { fill: var(--panel-2); stroke: var(--fg-2); stroke-width: 2.6; }
.ff-m { stroke: var(--accent); stroke-linecap: round; } .ff-m2 { fill: color-mix(in srgb, var(--accent) 45%, transparent); }
.ff-plate { fill: var(--bg-2); stroke: var(--muted); stroke-width: 1.6; } .ff-ghost { opacity: .18; }
.ff-path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 1.5 2.5; stroke-linecap: round; opacity: .7; }
.tempo { display: grid; gap: 6px; }
.tempo .bar { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.tempo .seg2 { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.tempo .seg2 b { color: var(--fg-2); font-weight: 600; }
.cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.cues li { padding: 7px 10px 7px 30px; position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--fg-2); }
.cues li::before { content: '✓'; position: absolute; left: 11px; color: var(--good); font-weight: 700; }
.cues li.x::before { content: '✕'; color: var(--bad); }
.mv { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin-left: 8px; vertical-align: middle; }
.mv i { width: 24px; height: 22px; display: grid; place-items: center; font-style: normal; font-size: 9px; color: var(--fg-2); }
.mv i + i { border-left: 1px solid var(--line-2); }

/* how it works: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.step { counter-increment: s; border-top: 2px solid var(--fg); padding-top: 18px; }
.step::before { content: counter(s); display: block; font: 600 14px var(--f-mono); color: var(--muted); margin-bottom: 10px; }
.step p { color: var(--fg-2); margin-top: 8px; }

/* lists set as columns with hairlines instead of a wall of cards */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.cols > div { padding-block: 22px; border-top: 1px solid var(--line); }
.cols p { color: var(--fg-2); margin-top: 6px; font-size: 15px; }
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub { margin: 48px 0 14px; }
ul.plain { padding-left: 20px; color: var(--fg-2); max-width: 78ch; display: grid; gap: 8px; }

/* science */
.methods { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.method { counter-increment: m; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding-block: 26px; border-top: 1px solid var(--line); }
.method::before { content: counter(m, decimal-leading-zero); font: 500 13px var(--f-mono); color: var(--muted); grid-row: span 2; padding-top: 4px; }
.method dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 0; font-size: 15px; }
.method dt { color: var(--muted); font-weight: 500; }
.method dd { margin: 0; color: var(--fg-2); }
.method sup a { color: var(--accent); text-decoration: none; }
.val { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 8px; }
.val th, .val td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.val th { color: var(--muted); font-weight: 500; }
.val td:nth-child(2) { color: var(--fg); font-weight: 500; }
.val td { color: var(--fg-2); }
.refs { margin-top: 40px; padding-left: 22px; font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.refs a { color: var(--accent); }

/* privacy */
.privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.privacy svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 12px; }
.privacy p { color: var(--fg-2); margin-top: 8px; }

/* pricing */
.billing { display: inline-flex; margin-top: 22px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 14px; align-content: start; background: var(--panel); transition: border-color 200ms ease, box-shadow 200ms ease; }
.plan header { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.plan .badge { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.plan .price b { font: 650 38px/1 var(--f-body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .price span { color: var(--muted); margin-left: 6px; font-size: 14px; }
.plan p { color: var(--fg-2); }
.plan .btn { width: 100%; }
.plan.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fine { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* faq */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 600; font-size: 17px; touch-action: manipulation; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding-bottom: 18px; color: var(--fg-2); max-width: 70ch; }

/* closing */
.cta { text-align: center; display: grid; justify-items: center; gap: 0; }
.cta .lede { text-align: center; }

/* policy */
.policy { max-width: 78ch; color: var(--fg-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow-wrap: anywhere; }
.policy h3 { color: var(--fg); margin-top: 18px; font-size: 17px; }
.policy ul { padding-left: 20px; display: grid; gap: 6px; margin: 0; }

footer { border-top: 1px solid var(--line); padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }

@media (max-width: 960px) {
  .hero .wrap, .benefit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pains, .steps, .privacy, .plans, .cols, .cols.two { grid-template-columns: minmax(0, 1fr); }
  .nav ul { display: none; }
  .nav .btn { margin-left: auto; }
  .log { min-height: 0; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .formv { grid-template-columns: minmax(0, 1fr); }
  .method { grid-template-columns: minmax(0, 1fr); } .method::before { grid-row: auto; } .method dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .method dd { margin-bottom: 8px; }
  .val th:nth-child(3), .val td:nth-child(3) { display: none; }
  .seg { width: 100%; } .seg button { flex: 1; padding-inline: 8px; }
  .ring-row { flex-direction: column; align-items: flex-start; }
}

/* ===== v2 additions: shorter homepage, scroll story, proof band, feature grid, sub-pages ===== */
/* hero: one sentence of support, proof right under the buttons; the demo never changes height */
.proof-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.proof-line span { display: inline-flex; align-items: center; gap: 7px; }
.proof-line svg { width: 15px; height: 15px; color: var(--good); flex: none; }
.log { height: 392px; min-height: 0; overflow: hidden; justify-content: flex-end; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px); mask-image: linear-gradient(to bottom, transparent 0, #000 44px); }
.hero .reveal { opacity: 0; transform: translateY(10px); animation: heroIn 520ms cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: calc(var(--n, 0) * 70ms + 60ms); }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .reveal { animation: none; opacity: 1; transform: none; } }

/* scroll story: steps on the left, a pinned phone on the right whose screen follows the step in view */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: start; }
.story-steps { display: grid; }
.story-step { min-height: 72vh; display: grid; align-content: center; gap: 12px; padding-block: 24px; opacity: .35; transition: opacity 260ms ease; }
.story-step.on { opacity: 1; }
.story-step .n { font: 500 13px var(--f-mono); color: var(--accent); }
.story-step h3 { font: 600 clamp(24px, 3vw, 32px)/1.15 var(--f-body); letter-spacing: -0.025em; }
.story-step p { color: var(--fg-2); max-width: 44ch; font-size: 17px; }
.story-step .inline { display: none; }
.phone { position: sticky; top: calc(50vh - 300px); height: 600px; border-radius: 44px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 14px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.6), inset 0 0 0 6px var(--panel); }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: var(--bg); z-index: 2; }
.screen { position: absolute; inset: 14px; border-radius: 32px; overflow: hidden; background: var(--panel); padding: 58px 16px 16px; display: grid; align-content: start; gap: 12px; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.screen.on { opacity: 1; transform: none; }
.screen h4 { margin: 0; font: 600 15px var(--f-body); }
.screen small { color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .screen, .story-step { transition: none; } }
@media (max-width: 960px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .phone { display: none; }
  .story-step { min-height: 0; opacity: 1; padding-block: 28px; border-top: 1px solid var(--line); }
  .story-step .inline { display: grid; gap: 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 16px; }
}

/* features: a compact grid of short statements, no card chrome */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.fgrid > div { padding-block: 24px; border-top: 1px solid var(--line); }
.fgrid h3 { font-size: 18px; }
.fgrid p { color: var(--fg-2); margin-top: 6px; font-size: 15.5px; }
@media (max-width: 960px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* proof band: three real numbers, counted up once */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.proof b { display: block; font: 650 clamp(40px, 5.5vw, 60px)/1 var(--f-body); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: 10px; color: var(--fg-2); max-width: 30ch; }
@media (max-width: 960px) { .proof { grid-template-columns: minmax(0, 1fr); } }
.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; color: var(--accent); text-decoration: none; }
.more-link::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .more-link:hover::after { transform: translate(3px) rotate(45deg); } }

/* sub-pages */
.page-hero { padding-block: clamp(48px, 7vw, 88px) 24px; border-top: 0; }
.page-hero h1 { font: 650 clamp(36px, 5vw, 56px)/1.05 var(--f-body); letter-spacing: -0.04em; }
.crumb { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-size: 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.toc a { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-size: 14px; color: var(--fg-2); }
.story-step[data-for] { display: none; }
body[data-aud="me"] .story-step[data-for~="me"], body[data-aud="athlete"] .story-step[data-for~="athlete"], body[data-aud="coach"] .story-step[data-for~="coach"] { display: grid; }

/* ===== colour: each step, feature and number carries its metric's colour (the dashboard's own palette) ===== */
.story-step .n { color: var(--tone, var(--accent)); }
.story-step.on h3 { color: var(--fg); }
.story-step::before { content: ''; width: 36px; height: 3px; border-radius: 2px; background: var(--tone, var(--accent)); opacity: .35; transition: opacity 260ms ease, width 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.story-step.on::before { opacity: 1; width: 56px; }
.screen { border-top: 3px solid var(--tone, var(--accent)); }
.screen h4 { color: var(--tone, var(--fg)); }
.fgrid > div { border-top-color: color-mix(in srgb, var(--tone, var(--line)) 70%, var(--line)); border-top-width: 2px; }
.fgrid h3::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--tone, var(--accent)); vertical-align: 2px; }
.proof b { color: var(--tone, var(--fg)); }
.proof-line span:nth-child(1) svg { color: var(--good); } .proof-line span:nth-child(2) svg { color: var(--c-steps); } .proof-line span:nth-child(3) svg { color: var(--c-active); }
.hero h1 { background: none; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* coach screen */
.cl { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 12px; display: grid; gap: 8px; }
.cl-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cl-h b { font-size: 14px; }
.cl-f { margin: 0; font-size: 12.5px; color: var(--c-active); }
.cl-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cl-g span { display: grid; gap: 1px; font-size: 11px; color: var(--muted); }
.cl-g b { font-size: 13.5px; color: var(--fg); font-variant-numeric: tabular-nums; }
.cl-g small { color: var(--muted); font-weight: 400; }
.cl-g em { font-style: normal; } .cl-g em.up { color: var(--good); }
.mini { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 3px; }
.mini > i { display: block; height: 100%; }

/* ===== dashboard tiles (bento), animated once on view ===== */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 16px; display: grid; gap: 6px; align-content: start; min-width: 0; overflow: hidden; }
.tile::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone, var(--accent)); opacity: .85; }
.tile > span { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.tile > span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tone, var(--accent)); }
.tile b { font: 650 30px/1.05 var(--f-body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile small { color: var(--muted); font-size: 12.5px; }
.tile em { font-style: normal; } .tile em.dn { color: var(--good); }
.tile.wide { grid-column: span 2; }
.tile.k svg { width: 100%; height: 36px; margin-top: 4px; }
.tile .ln { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.go .tile .ln { transition: stroke-dashoffset 1100ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; stroke-dashoffset: 0; }
.tile.rg svg { width: 112px; height: 112px; justify-self: center; }
.tile.rg .trk { fill: none; stroke: var(--line); stroke-width: 10; }
.tile.rg .arc { fill: none; stroke: var(--tone); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; }
.go .tile.rg .arc { transition: stroke-dasharray 1200ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; stroke-dasharray: var(--v) 100; }
.tile.rg text { fill: var(--fg); font: 650 30px var(--f-body); }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 6px; }
.bars i { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; }
.bars i::before, .bars i::after { content: ''; display: block; border-radius: 3px; }
.bars i { background: linear-gradient(to top, var(--line-2) 0 calc(var(--b) * 1%), color-mix(in srgb, var(--c-active) 45%, var(--panel)) calc(var(--b) * 1%) calc((var(--b) + var(--m)) * 1%), var(--c-active) calc((var(--b) + var(--m)) * 1%) calc((var(--b) + var(--m) + var(--t)) * 1%), transparent 0); border-radius: 4px; transform: scaleY(0); transform-origin: bottom; }
.go .bars i { transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--d) * 60ms + 150ms); transform: none; }
.tile .lg { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tile .lg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: -6px; }
.fc { width: 100%; height: 120px; }
.fc .band { fill: var(--accent); opacity: 0; }
.fc .past { fill: none; stroke: var(--fg-2); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fc .fut { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.go .fc .past { transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; stroke-dashoffset: 0; }
.go .fc .fut { transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1) 900ms; stroke-dashoffset: 0; }
.go .fc .band { transition: opacity 500ms ease 1300ms; opacity: .16; }
.hb { display: grid; gap: 8px; margin-top: 4px; }
.hb p { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.hb i { display: block; height: 8px; border-radius: 4px; background: var(--tone); width: calc(var(--w) * 1%); transform: scaleX(0); transform-origin: left; }
.go .hb i { transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; transform: none; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.wk i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 600 11px var(--f-body); font-style: normal; background: var(--line); color: var(--muted); }
.go .wk i { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; transition-delay: calc(var(--d) * 110ms + 200ms); }
.go .wk i.g { background: var(--c-active); color: #fff; }
.go .wk i.r { background: color-mix(in srgb, var(--good) 30%, var(--panel)); color: var(--good); }
.go .wk i.p { background: transparent; box-shadow: inset 0 0 0 2px var(--c-active); color: var(--c-active); }
@media (prefers-reduced-motion: reduce) {
  .tile .ln, .fc .past, .fc .fut { stroke-dashoffset: 0 !important; transition: none !important; }
  .tile.rg .arc { stroke-dasharray: var(--v) 100 !important; transition: none !important; }
  .bars i, .hb i { transform: none !important; transition: none !important; }
  .fc .band { opacity: .16 !important; }
  .wk i.g { background: var(--c-active); color: #fff; } .wk i.r { background: color-mix(in srgb, var(--good) 30%, var(--panel)); color: var(--good); } .wk i.p { box-shadow: inset 0 0 0 2px var(--c-active); color: var(--c-active); background: transparent; }
}
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile.wide { grid-column: auto; } }
/* exercise guide tile: the figure, and the tempo dot crossing three reps then resting */
.gd-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.gd-fig { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 8px; }
.gd-txt { display: grid; gap: 8px; }
.gd-t { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-strength) 20%, transparent), color-mix(in srgb, var(--c-strength) 60%, transparent)); }
.gd-t i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c-strength); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-strength) 25%, transparent); }
.go .gd-t i { animation: gdRep 4s cubic-bezier(0.45, 0, 0.55, 1) 400ms 3 both; }
@keyframes gdRep { 0% { left: 0; } 75% { left: 75%; } 100% { left: 100%; } }
.gd-l { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .go .gd-t i { animation: none; left: 75%; } }
@media (max-width: 560px) { .gd-in { grid-template-columns: minmax(0, 1fr); } }

/* ===== v13: why row, three steps, beta and demo forms, phone call-to-action bar, coaches page ===== */
body[data-aud="me"] .btn[data-for~="me"], body[data-aud="athlete"] .btn[data-for~="athlete"], body[data-aud="coach"] .btn[data-for~="coach"] { display: inline-flex; }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.why > div { padding-top: 20px; border-top: 3px solid var(--tone, var(--line)); }
.why h3 { font-size: 18px; }
.why p { color: var(--fg-2); margin-top: 6px; font-size: 15.5px; }
ol.steps { list-style: none; margin: 0; padding: 0; }
.how .step { border-top: 3px solid var(--tone, var(--fg)); }
.how .step::before { color: var(--tone, var(--muted)); }
@media (max-width: 960px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 560px) { .why { grid-template-columns: minmax(0, 1fr); } }

.lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; width: min(760px, 100%); margin-top: 28px; text-align: left; }
.lead label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.lead input, .lead select, .lead textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 400 16px var(--f-body); }
.lead textarea { min-height: 88px; resize: vertical; }
.lead input:focus-visible, .lead select:focus-visible, .lead textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lead .form-status, .lead .fine { grid-column: 1 / -1; margin: 0; }
.form-status { min-height: 1.4em; font-size: 14px; color: var(--fg-2); }
.form-status.ok { color: var(--good); font-weight: 600; }
.lead.done input, .lead.done select, .lead.done textarea, .lead.done button { opacity: .5; pointer-events: none; }
.lead.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead.wide .full { grid-column: 1 / -1; }
.lead.wide button { justify-self: start; }
@media (max-width: 720px) { .lead, .lead.wide { grid-template-columns: minmax(0, 1fr); } .lead button { width: 100%; } }

.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 260ms var(--ease-out); }
  .mcta.on { transform: none; }
  footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .mcta { transition: none; } }

/* coaches page */
.cl-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-demo .cl { background: var(--panel); padding: 16px; gap: 10px; }
.cl-demo .cl-h b { font-size: 16px; } .cl-demo .cl-f { font-size: 14px; } .cl-demo .cl-g span { font-size: 12.5px; } .cl-demo .cl-g b { font-size: 15.5px; }
.plan .price span { display: block; margin: 8px 0 0; }
@media (max-width: 760px) { .cl-demo { grid-template-columns: minmax(0, 1fr); } }

/* ===== v14: app showcase. One phone, four screens; the tab list on the left explains each one ===== */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: center; }
.sc-side { display: grid; gap: 16px; align-content: center; }
.sc-tabs { display: grid; gap: 8px; }
.sc-tabs button { position: relative; display: grid; gap: 4px; text-align: left; padding: 16px 18px 18px; border-radius: 16px; border: 1px solid var(--line); background: transparent; color: var(--fg-2); font: inherit; cursor: pointer; overflow: hidden; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.sc-tabs button b { font: 600 18px var(--f-body); color: var(--fg); display: flex; align-items: center; gap: 10px; }
.sc-tabs button b::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); opacity: .5; transition: opacity 200ms ease; }
.sc-tabs button span { font-size: 15px; max-width: 46ch; }
.sc-tabs button[aria-selected="true"] { background: var(--panel); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); color: var(--fg-2); }
.sc-tabs button[aria-selected="true"] b::before { opacity: 1; }
.sc-tabs button[aria-selected="false"] span { color: var(--muted); }
.sc-tabs button:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .sc-tabs button[aria-selected="false"]:hover { border-color: var(--line-2); } }
.sc-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone); transform: scaleX(0); transform-origin: left; }
.sc-tabs button[aria-selected="true"] .sc-prog { transform: scaleX(1); opacity: .35; }
.sc-tabs button.run .sc-prog { opacity: 1; animation: scProg 6500ms linear both; }
@keyframes scProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc-pp { justify-self: start; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg-2); font: 600 13px var(--f-body); cursor: pointer; }
.sc-phone { position: relative; height: 640px; border-radius: 46px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 12px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.6), inset 0 0 0 6px var(--panel); }
.sc-phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: var(--bg); z-index: 2; }
.sc-screen { position: absolute; inset: 12px; border-radius: 35px; overflow: hidden; background: var(--bg); padding: 56px 12px 12px; display: grid; align-content: start; gap: 10px; opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.sc-screen.on { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
.sc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.sc-top b { font: 650 22px var(--f-body); letter-spacing: -0.02em; }
.sc-top small { color: var(--muted); font-size: 12px; text-align: right; }
.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-grid .tile { padding: 12px; border-radius: 16px; gap: 4px; opacity: 0; transform: translateY(10px) scale(.98); }
.sc-screen.go .tile { opacity: 1; transform: none; transition: opacity 380ms ease, transform 480ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--i) * 110ms); }
.sc-grid .tile > span { font-size: 11.5px; }
.sc-grid .tile b { font-size: 24px; }
.sc-grid .tile small { font-size: 11.5px; }
.sc-grid .tile.k svg { height: 26px; }
.sc-grid .bars { height: 92px; gap: 7px; }
.sc-grid .fc { height: 104px; }
.sc-grid .hb p { grid-template-columns: 64px minmax(0, 1fr); font-size: 12px; }
.sc-grid .wk i { font-size: 10.5px; }
.sc-grid .gd-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sc-grid .gd-fig { padding: 6px; }
.rg-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.rg-row svg { width: 96px; height: 96px; }
.rg-row p { display: grid; gap: 4px; }
.sl { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 4px 0 2px; }
.sl i { width: calc(var(--w) * 1%); transform: scaleX(0); transform-origin: left; }
.go .sl i { transform: none; transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 350ms; }
/* the per-tile animations also start with the screen's .go (the generic .go rules above cover lines, ring, bars, forecast, sets and week) */
@media (prefers-reduced-motion: reduce) {
  .sc-grid .tile { opacity: 1; transform: none; transition: none; }
  .sl i { transform: none; }
  .sc-screen { transition: none; }
  .sc-tabs button.run .sc-prog { animation: none; }
}
@media (max-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; }
  .sc-side { width: 100%; position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg); padding-block: 10px 6px; gap: 8px; }
  .sc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sc-tabs button { padding: 10px 8px 12px; text-align: center; border-radius: 12px; }
  .sc-tabs button b { font-size: 14px; justify-content: center; }
  .sc-tabs button b::before { display: none; }
  .sc-tabs button span { display: none; }
  .sc-cap { display: block; }
  .sc-pp { justify-self: center; order: 3; }
  .sc-phone { width: min(380px, 100%); }
}
@media (min-width: 961px) { .sc-cap { display: none; } }
.sc-cap { margin: 0; text-align: center; color: var(--fg-2); font-size: 15px; min-height: 2.8em; }
@media (max-width: 400px) { .sc-phone { height: 680px; border-radius: 40px; padding: 10px; } .sc-screen { inset: 10px; border-radius: 31px; } .sc-grid .tile b { font-size: 21px; } }
.sc-grid .tile.wide { grid-column: 1 / -1; }

/* ===== v15: the hero shows the app. Copy on top; below it the chat and the phone, side by side ===== */
.hero .wrap { display: block; }
.hero-copy { max-width: 820px; }
.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; align-items: center; margin-top: 48px; }
.hero-stage .demo { display: flex; flex-direction: column; }
.hero-stage .log { height: 500px; }
.hero-note { margin-top: 10px; }
.hero .showcase { grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; align-content: start; }
.hero .sc-side { width: 100%; gap: 8px; justify-items: center; }
.hero .sc-tabs { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hero .sc-tabs button { padding: 10px 6px 12px; text-align: center; border-radius: 12px; }
.hero .sc-tabs button b { font-size: 14px; justify-content: center; }
.hero .sc-tabs button b::before, .hero .sc-tabs button span { display: none; }
.hero .sc-cap { display: block; min-height: 2.8em; font-size: 14.5px; }
.hero .sc-pp { justify-self: center; }
.hero .sc-phone { width: min(380px, 100%); }
@media (max-width: 960px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; }
  .hero-stage .showcase { order: -1; }
  .hero-stage .log { height: 392px; }
}

/* ---------- motion tokens shared with the dashboard (DESIGN.md › Motion) ---------- */
:root { --t-fast: 160ms; --t-base: 260ms; --t-mod: 420ms; --spring: cubic-bezier(0.34, 1.36, 0.64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.157 4.5%, 0.512 11.6%, 0.807 19.5%, 0.98 27.9%, 1.044 35.4%, 1.058 41.5%, 1.049 48.5%, 1.012 61.4%, 0.996 74.1%, 1); }
}
/* segmented controls: a thumb glides between options on a spring */
.seg.has-thumb { position: relative; isolation: isolate; }
.seg-thumb { position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 0; border-radius: 9px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; transition: transform var(--t-mod) var(--spring), width var(--t-mod) var(--spring); }
.seg.has-thumb button[aria-pressed="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

/* ---------- the 20-second film ---------- */
.film { margin: 0; display: grid; gap: 12px; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; border: 1px solid var(--line); background: #14171b; }
.film figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.film-pp { flex: none; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 600 14px var(--f-body); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform var(--t-fast) var(--ease-out); }
.film-pp:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .film-pp:hover { border-color: var(--muted); } }
/* phones: at this width a 16:9 film's text is too small to read; the scroll story above shows the same three things natively */
@media (max-width: 599px) { #film { display: none; } }

/* Why Spreko: the word's dictionary entry and the mark on the left, what each sense means in the product on the right */
.name { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.name > * { min-width: 0; }
.name-mark { display: block; width: 88px; height: 88px; padding: 14px; border-radius: 20px; background: #14171b; color: #5b84ff; box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 22px; }
.name-mark path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.name-mark.go path[pathLength] { animation: nameDraw 900ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes nameDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dict { margin-top: 14px; font-size: 22px; }
.dict b { font-weight: 650; letter-spacing: -0.02em; }
.dict i { font: 500 13px var(--f-mono); font-style: normal; color: var(--muted); margin-left: 6px; }
.senses { margin: 10px 0 0; padding-left: 22px; color: var(--fg-2); font-size: 17px; display: grid; gap: 2px; }
.senses li::marker { font: 500 13px var(--f-mono); color: var(--muted); }
.name-map { display: grid; gap: 0; }
.name-map > div { padding: 22px 0 22px 20px; border-left: 3px solid var(--tone, var(--line)); }
.name-map > div + div { border-top: 1px solid var(--line); }
.name-map h3 { font-size: 20px; letter-spacing: -0.02em; }
.name-map p { color: var(--fg-2); margin-top: 6px; font-size: 16px; max-width: 54ch; }
@media (max-width: 860px) { .name { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (prefers-reduced-motion: reduce) { .name-mark.go path[pathLength] { animation: none; } }

/* v18: two plans side by side on the coaches page; 'On request' sits smaller than a figure */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
@media (max-width: 760px) { .plans.two { grid-template-columns: minmax(0, 1fr); } }
.plan[data-plan=whitelabel] .price b, #whitelabel .price b { font-size: 30px; }

/* v19: roster-size price rows in the homepage Coach card */
.plan .tiers { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.plan .tiers div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 14px; }
.plan .tiers div + div { border-top: 1px solid var(--line); }
.plan .tiers dt { color: var(--fg-2); }
.plan .tiers dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* v20: Brand audience. The hero demo and the brand screen take an example brand colour, to show the app in someone else's colours */
body[data-aud="brand"] [data-for~="brand"] { display: revert; }
body[data-aud="brand"] .story-step[data-for~="brand"] { display: grid; }
body[data-aud="brand"] .btn[data-for~="brand"] { display: inline-flex; }
body[data-aud="brand"] .hero-stage, .screen[data-screen="brand"], .story-step[data-screen="brand"] .inline { --accent: #12a594; --accent-ink: #04211d; --accent-soft: color-mix(in srgb, #12a594 16%, transparent); }
.hero-stage .demo, .hero-stage .showcase { transition: color 300ms ease; }
.bk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.bk-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 14px var(--f-body); letter-spacing: .02em; }
.bk b { display: block; font-size: 15px; }
.bk small { color: var(--muted); font-size: 12.5px; }
.bk-sw { display: flex; gap: 8px; }
.bk-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }
.tgl { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tgl li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; font-size: 13.5px; background: var(--panel-2); }
.tgl li + li { border-top: 1px solid var(--line); }
.tgl li:not(.on) span { color: var(--muted); }
.tgl i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); transition: background 220ms ease calc(var(--d) * 70ms + 120ms); }
.tgl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--d) * 70ms + 120ms); }
/* the switches flip on in turn each time the screen appears */
.screen.on .tgl li.on i, .story-step .inline .tgl li.on i { background: var(--accent); }
.screen.on .tgl li.on i::after, .story-step .inline .tgl li.on i::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .tgl i, .tgl i::after { transition: none; } }

/* v24: icon-only play/pause buttons */
.pp { flex: none; width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--fg-2); cursor: pointer; touch-action: manipulation; transition: color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.pp svg { width: 12px; height: 12px; fill: currentColor; }
.pp .i-play, .pp[aria-pressed="true"] .i-pause { display: none; }
.pp[aria-pressed="true"] .i-play { display: block; }
.pp:active { transform: scale(0.94); }
.pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pp:hover { color: var(--fg); border-color: var(--fg-2); } }
.demo-pp.pp { margin-left: auto; }
.sc-meta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.sc-meta .sc-cap { min-height: 0; }
.hero .sc-meta .sc-cap { min-height: 2.8em; display: flex; align-items: center; }
.sc-tabs[hidden] { display: none; }

/* v24: audience screens in the hero phone */
.sc-grid .rl-t { padding: 0; }
.sc-grid .rl-t::after { display: none; }
.rl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; padding: 10px 12px; opacity: 0; transform: translateY(6px); }
.rl > div + div { border-top: 1px solid var(--line); }
.rl b { font: 600 14px var(--f-body); }
.rl small { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.rl .tag { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 10.5px; white-space: nowrap; }
.sc-screen.go .rl > div { opacity: 1; transform: none; transition: opacity 320ms ease, transform 420ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--j) * 80ms + 100ms); }
.hb.v p { grid-template-columns: 54px minmax(0, 1fr) 40px; }
.hb.v em { font-style: normal; text-align: right; font-size: 11.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.bk-mini { display: flex; align-items: center; gap: 8px; }
.bk-mini i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 10.5px var(--f-body); font-style: normal; }
.sc-grid .tgl { margin-top: 4px; }
.sc-grid .tgl li { padding: 7px 10px; font-size: 12.5px; }
.sc-screen.go .tgl li.on i { background: var(--accent); }
.sc-screen.go .tgl li.on i::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .rl > div { opacity: 1; transform: none; transition: none; } .tgl li.on i { background: var(--accent); } .tgl li.on i::after { transform: translateX(14px); } }