/* Generated by build.mjs from tokens.json and tokens-web.json. Do not edit. */
:root {
  --color-canvas: #e5e5e5;
  --color-card: #ffffff;
  --color-ink: #000000;
  --color-mist: #f3f3f3;
  --color-ash: #c6c6c6;
  --color-smoke: #979797;
  --color-slate: #444444;
  --color-graphite: #2f2f2f;
  --color-placeholder: #6b6b6b;
  --color-mint: #d1ffca;
  --color-voltage: #fff100;
  --color-danger: #d92d20;
  --color-scrim: rgba(0, 0, 0, 0.45);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --type-display-hero-size: 104px;
  --type-display-hero-lh: 0.82;
  --type-display-hero-weight: 700;
  --type-display-hero-ls: -0.03em;
  --type-display-number-size: 96px;
  --type-display-number-lh: 0.85;
  --type-display-number-weight: 700;
  --type-display-number-ls: -0.03em;
  --type-display-xl-size: 80px;
  --type-display-xl-lh: 0.9;
  --type-display-xl-weight: 700;
  --type-display-xl-ls: -0.03em;
  --type-display-l-size: 64px;
  --type-display-l-lh: 0.9;
  --type-display-l-weight: 700;
  --type-display-l-ls: -0.03em;
  --type-display-title-size: 60px;
  --type-display-title-lh: 0.9;
  --type-display-title-weight: 700;
  --type-display-title-ls: -0.03em;
  --type-display-m-size: 56px;
  --type-display-m-lh: 0.9;
  --type-display-m-weight: 700;
  --type-display-m-ls: -0.03em;
  --type-display-s-size: 48px;
  --type-display-s-lh: 0.9;
  --type-display-s-weight: 700;
  --type-display-s-ls: -0.03em;
  --type-stat-size: 28px;
  --type-stat-lh: 1.1;
  --type-stat-weight: 500;
  --type-stat-ls: -0.03em;
  --type-stat-s-size: 24px;
  --type-stat-s-lh: 1.1;
  --type-stat-s-weight: 500;
  --type-stat-s-ls: -0.03em;
  --type-title-size: 20px;
  --type-title-lh: 1.25;
  --type-title-weight: 400;
  --type-title-ls: -0.02em;
  --type-card-heading-size: 18px;
  --type-card-heading-lh: 1.2;
  --type-card-heading-weight: 500;
  --type-card-heading-ls: -0.02em;
  --type-body-l-size: 17px;
  --type-body-l-lh: 1.35;
  --type-body-l-weight: 400;
  --type-body-l-ls: normal;
  --type-button-size: 16px;
  --type-button-lh: 1.25;
  --type-button-weight: 500;
  --type-button-ls: normal;
  --type-body-size: 15px;
  --type-body-lh: 1.4;
  --type-body-weight: 400;
  --type-body-ls: normal;
  --type-body-m-size: 14px;
  --type-body-m-lh: 1.35;
  --type-body-m-weight: 400;
  --type-body-m-ls: normal;
  --type-body-s-size: 13px;
  --type-body-s-lh: 1.35;
  --type-body-s-weight: 400;
  --type-body-s-ls: normal;
  --type-tab-label-size: 11px;
  --type-tab-label-lh: 1.2;
  --type-tab-label-weight: 500;
  --type-tab-label-ls: normal;
  --type-label-size: 12px;
  --type-label-lh: 1.3;
  --type-label-weight: 400;
  --type-label-ls: -0.03em;
  --type-label-s-size: 11px;
  --type-label-s-lh: 1.3;
  --type-label-s-weight: 400;
  --type-label-s-ls: -0.03em;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-44: 44px;
  --radius-ghost: 4px;
  --radius-button: 8px;
  --radius-input: 12px;
  --radius-card: 24px;
  --radius-hero: 32px;
  --radius-pill: 48px;
  --radius-sheet: 64px;
  --size-container: 1200px;
  --size-measure: 62ch;
  --size-measure-lead: 34ch;
  --size-measure-short: 18ch;
  --size-faq: 880px;
  --size-header: 88px;
  --size-dock: 64px;
  --size-button-lg: 56px;
  --size-check: 44px;
  --size-qr: 112px;
  --size-badge-h: 40px;
  --size-badge-w: 136px;
  --size-plan-card: clamp(280px, 26vw, 340px);
  --size-setrows: 440px;
  --size-tier: clamp(112px, 10vw, 152px);
  --size-phone-hero: clamp(232px, 24vw, 340px);
  --size-phone-lang: clamp(200px, 20vw, 280px);
  --size-phone-journey-m: 46svh;
  --size-phone-journey-d: min(74svh, 640px);
  --ratio-screen: 390 / 844;
  --size-bezel: 10px;
  --size-border-ghost: 1.5px;
  --size-border-hairline: 1px;
  --size-focus: 2px;
  --size-rest-track: 5px;
  --size-dot: 8px;
  --size-score-dot: 10px;
  --size-phone-back: clamp(200px, 20vw, 292px);
  --size-phone-gallery: clamp(176px, min(17vw, 22svh), 240px);
  --size-learn-crop: clamp(360px, 40vw, 560px);
  --space-4: 4px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-gutter: clamp(16px, 4vw, 48px);
  --space-section: clamp(96px, 12vw, 176px);
  --radius-device: 56px;
  --radius-screen: 46px;
  --radius-round: 50%;
  --display-web-hero: clamp(48px, 15vw, 200px);
  --display-web-xl: clamp(48px, 8vw, 128px);
  --display-web-l: clamp(48px, 5.4vw, 88px);
  --display-web-ticker: clamp(56px, 9vw, 136px);
  --type-lead-web-size: clamp(17px, 1.5vw, 22px);
  --dur-reveal: 700ms;
  --dur-swap: 450ms;
  --dur-step: 300ms;
  --dur-stagger: 90ms;
  --dur-rest: 5s;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --z-stage: 2;
  --z-dock: 20;
}
/* Carga marketing site. Every colour, size, radius and duration comes from tokens (see tokens.json, tokens-web.json). */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: light;
  background: var(--color-canvas);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Carga is light-only in the design system: these hooks keep the brand palette in any viewer theme. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: light; background: var(--color-canvas); } }
:root[data-theme="dark"] { color-scheme: light; background: var(--color-canvas); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: var(--size-focus) solid var(--color-ink); outline-offset: var(--space-4); }
.on-ink :focus-visible { outline-color: var(--color-card); }
.sr { position: absolute; width: var(--size-border-hairline); height: var(--size-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: var(--space-16); top: var(--space-16); z-index: var(--z-dock);
  padding: var(--space-12) var(--space-16); background: var(--color-ink); color: var(--color-card);
  border-radius: var(--radius-button); translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

.wrap { width: min(calc(100% - 2 * var(--space-gutter)), var(--size-container)); margin-inline: auto; }
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--type-display-xl-ls); line-height: var(--type-display-xl-lh); }
.label { font-family: var(--font-mono); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls); color: var(--color-slate); }
.section-title { font-size: var(--display-web-xl); }
.section-lead { max-width: var(--size-measure); margin-top: var(--space-24); font-size: var(--type-lead-web-size); line-height: var(--type-title-lh); }
.todo { font-family: var(--font-mono); font-size: var(--type-label-size); background: var(--color-mist); padding: 0 var(--space-4); border-radius: var(--radius-ghost); color: var(--color-ink); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--space-44); padding: 0 var(--space-20); border-radius: var(--radius-button);
  font-family: var(--font-sans); font-size: var(--type-button-size); line-height: var(--type-button-lh); font-weight: var(--type-button-weight);
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--color-ink); color: var(--color-card); }
.btn-lg { min-height: var(--size-button-lg); padding: 0 var(--space-32); }
.on-ink .btn-primary { background: var(--color-card); color: var(--color-ink); }
.text-link {
  display: inline-flex; align-items: center; min-height: var(--space-44); font-weight: 500;
  text-decoration: underline; text-underline-offset: var(--space-4); text-decoration-thickness: var(--size-border-hairline);
}
.links { display: flex; flex-wrap: wrap; column-gap: var(--space-24); margin-top: var(--space-16); }

/* ---------- Header ---------- */
.site-header .wrap { display: flex; align-items: center; gap: var(--space-8); min-height: var(--size-header); }
.wordmark { margin-right: auto; font-size: var(--type-display-s-size); line-height: var(--type-display-s-lh); text-decoration: none; }
.header-nav { display: none; }
.nav-link {
  display: inline-flex; align-items: center; min-height: var(--space-44); padding: 0 var(--space-12);
  font-size: var(--type-body-size); font-weight: 500; text-decoration: none; border-radius: var(--radius-pill);
}
.nav-link:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
.lang {
  display: inline-grid; place-items: center; min-width: var(--space-44); min-height: var(--space-44);
  font-family: var(--font-mono); font-size: var(--type-label-size); letter-spacing: var(--type-label-ls); text-decoration: none;
  border: var(--size-border-ghost) solid var(--color-slate); border-radius: var(--radius-ghost);
}
@media (min-width: 900px) { .header-nav { display: flex; margin-right: var(--space-12); } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-24) var(--space-section); view-timeline: --hero block; }
.hero-title { margin-top: var(--space-12); font-size: var(--display-web-hero); line-height: var(--type-display-hero-lh); letter-spacing: var(--type-display-hero-ls); }
.hero-title .line { display: block; }
.hero-body { display: grid; gap: var(--space-64); margin-top: var(--space-32); }
.hero .lead { max-width: var(--size-measure-lead); font-size: var(--type-lead-web-size); line-height: var(--type-title-lh); }
@media (min-width: 900px) {
  .hero-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* ---------- Call to action block ---------- */
.cta { display: grid; gap: var(--space-12); justify-items: start; margin-top: var(--space-32); }
.cta-desktop { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cta-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); margin-top: var(--space-12); }
}
.qr-card { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-12) var(--space-20) var(--space-12) var(--space-12); background: var(--color-card); border-radius: var(--radius-card); color: var(--color-ink); }
.qr-card img { width: var(--size-qr); height: var(--size-qr); }
.qr-card p { max-width: var(--size-measure-short); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.badges { display: flex; flex-direction: column; gap: var(--space-8); }
.badge-slot {
  display: inline-grid; place-items: center; width: var(--size-badge-w); height: var(--size-badge-h);
  border: var(--size-border-ghost) dashed var(--color-slate); border-radius: var(--radius-button);
  font-family: var(--font-mono); font-size: var(--type-label-s-size); color: var(--color-slate); text-decoration: none;
}
.on-ink .badge-slot { border-color: var(--color-smoke); color: var(--color-smoke); }
.on-ink .cta-note { color: var(--color-smoke); }

/* ---------- Phone outline around real app screens ---------- */
.phone { width: fit-content; padding: var(--size-bezel); background: var(--color-ink); border-radius: var(--radius-device); }
.screen-stack { display: grid; width: var(--size-phone-hero); aspect-ratio: var(--ratio-screen); border-radius: var(--radius-screen); overflow: hidden; background: var(--color-canvas); }
.screen-stack > * { grid-area: 1 / 1; }
.screen-stack picture, .screen-stack img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero visual: real app moments around the phone ---------- */
.hero-visual { position: relative; justify-self: center; }
.phone-front { position: relative; z-index: 1; }
.phone-back { position: absolute; top: var(--space-96); right: 58%; z-index: 0; display: none; }
.phone-back .screen-stack { width: var(--size-phone-back); }
.moment { z-index: 2; }
@media (min-width: 900px) { .phone-back { display: block; } }
@media (min-width: 1024px) { .hero-visual { margin-top: calc(-1 * var(--space-48)); } }
.moment { position: absolute; display: flex; align-items: center; gap: var(--space-8); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: 500; white-space: nowrap; }
.moment-toast { top: var(--space-48); left: calc(-1 * var(--space-24)); padding: var(--space-12) var(--space-20); background: var(--color-ink); color: var(--color-card); border-radius: var(--radius-pill); }
.mint-dot { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-mint); }
.moment-pr { top: 44%; right: calc(-1 * var(--space-24)); flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-16) var(--space-20); background: var(--color-card); border-radius: var(--radius-card); }
.moment-pr strong { font-size: var(--type-stat-s-size); line-height: var(--type-stat-s-lh); letter-spacing: var(--type-stat-s-ls); font-weight: 500; font-variant-numeric: tabular-nums; }
.moment-rest { bottom: var(--space-64); left: calc(-1 * var(--space-24)); gap: var(--space-12); padding: var(--space-12) var(--space-20); background: var(--color-ink); color: var(--color-card); border-radius: var(--radius-pill); }
.rest-label { font-family: var(--font-mono); font-size: var(--type-label-size); font-weight: 400; color: var(--color-smoke); }
.rest-time { font-size: var(--type-stat-s-size); line-height: var(--type-stat-s-lh); letter-spacing: var(--type-stat-s-ls); font-weight: 500; font-variant-numeric: tabular-nums; }
.rest-track { position: relative; display: block; width: var(--space-96); height: var(--size-rest-track); border-radius: var(--radius-pill); background: var(--color-graphite); overflow: hidden; }
.rest-fill { position: absolute; inset: 0; background: var(--color-voltage); transform-origin: left center; scale: .62 1; }
.rest-skip { font-size: var(--type-body-s-size); font-weight: 400; color: var(--color-smoke); }
@media (min-width: 900px) {
  .hero-visual { margin-right: var(--space-64); }
  .moment-toast { left: calc(-1 * var(--space-96)); }
  .moment-pr { right: calc(-1 * var(--space-64)); }
  .moment-rest { left: calc(-1 * var(--space-64)); }
}
@media (max-width: 899px) { .moment-rest .rest-skip, .moment-pr { display: none; } }

.tag {
  display: inline-flex; align-items: center; padding: var(--space-4) var(--space-12); border-radius: var(--radius-sheet);
  font-family: var(--font-mono); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls); font-weight: 400; color: var(--color-ink);
}
.tag-pr { background: var(--color-voltage); border: var(--size-border-hairline) solid var(--color-ink); }
.tag-mint { background: var(--color-mint); }

/* ---------- Exercise ticker ---------- */
.ticker { padding-top: var(--space-section); overflow: hidden; view-timeline: --ticker block; }
.ticker-row { display: flex; gap: var(--space-24); width: max-content; font-size: var(--display-web-ticker); line-height: var(--type-display-xl-lh); white-space: nowrap; }
.ticker-row i { font-style: normal; color: var(--color-ash); }
.ticker-b { color: var(--color-slate); translate: -30% 0; }
.ticker-caption { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-24); margin-top: var(--space-32); }

/* ---------- Journey: one phone, one workout, three moments ---------- */
.journey { padding-top: var(--space-section); }
.journey-grid { display: grid; margin-top: var(--space-32); }
.journey-stage {
  position: sticky; top: 0; z-index: var(--z-stage); align-self: start;
  display: flex; justify-content: center; align-items: center;
  padding-block: var(--space-16); background: var(--color-canvas);
}
.journey .screen-stack { width: auto; height: var(--size-phone-journey-m); }
.journey .screen { opacity: 0; translate: 0 var(--space-24); transition: opacity var(--dur-swap) var(--ease-out), translate var(--dur-swap) var(--ease-out); }
.journey[data-step="1"] .screen[data-n="1"],
.journey[data-step="2"] .screen[data-n="2"],
.journey[data-step="3"] .screen[data-n="3"] { opacity: 1; translate: 0 0; }
.journey-steps { list-style: none; padding: 0; }
.step { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-16); min-height: 70svh; padding-block: var(--space-48); }
.js .step-title { color: var(--color-slate); transition: color var(--dur-swap) var(--ease-out); }
.js .step.is-active .step-title { color: var(--color-ink); }
.step-title { font-size: var(--display-web-l); line-height: var(--type-display-l-lh); }
.step-body { max-width: var(--size-measure); font-size: var(--type-lead-web-size); line-height: var(--type-title-lh); }
@media (min-width: 900px) {
  .journey-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-64); }
  .journey-stage { order: 2; height: 100svh; padding: 0; background: none; }
  .journey .screen-stack { height: var(--size-phone-journey-d); }
  .step { min-height: 92svh; }
}

/* Set rows: the app's set row, completing as the step comes into view */
.setrows { width: 100%; max-width: var(--size-setrows); padding: var(--space-16); background: var(--color-card); border-radius: var(--radius-card); font-variant-numeric: tabular-nums; }
.setrows-head, .setrow { display: grid; grid-template-columns: var(--space-24) minmax(0, 1fr) var(--space-64) var(--space-48) var(--size-check); align-items: center; gap: var(--space-8); }
.setrows-head { padding: 0 var(--space-8) var(--space-4); font-family: var(--font-mono); font-size: var(--type-label-s-size); color: var(--color-slate); }
.setrow {
  margin-top: var(--space-8); padding: var(--space-4) var(--space-8); border-radius: var(--radius-input); font-size: var(--type-body-size);
  transition: background-color var(--dur-step) var(--ease-out); transition-delay: calc(var(--i) * var(--dur-step));
}
.setrow .prev { color: var(--color-slate); }
.setrow .box { display: grid; place-items: center; min-height: var(--space-44); background: var(--color-mist); border-radius: var(--radius-button); font-weight: 500; transition: background-color var(--dur-step) var(--ease-out); transition-delay: inherit; }
.setrow .check {
  display: grid; place-items: center; width: var(--size-check); height: var(--size-check);
  border: var(--size-border-ghost) solid var(--color-ash); border-radius: var(--radius-button); color: transparent;
  transition: background-color var(--dur-step) var(--ease-out), border-color var(--dur-step) var(--ease-out), color var(--dur-step) var(--ease-out); transition-delay: inherit;
}
.check svg { width: var(--space-20); height: var(--space-20); }
.journey:is([data-step="2"], [data-step="3"]) .will-done,
html:not(.js) .will-done { background: var(--color-mint); }
.journey:is([data-step="2"], [data-step="3"]) .will-done .box,
html:not(.js) .will-done .box { background: var(--color-card); }
.journey:is([data-step="2"], [data-step="3"]) .will-done .check,
html:not(.js) .will-done .check { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-card); }
.restbar { display: flex; align-items: center; gap: var(--space-12); width: 100%; max-width: var(--size-setrows); padding: var(--space-12) var(--space-20); background: var(--color-ink); color: var(--color-card); border-radius: var(--radius-pill); }
.restbar .rest-track { flex: 1; width: auto; }
.restbar .rest-fill { scale: 0 1; transition: scale var(--dur-rest) linear; }
.journey[data-step="2"] .restbar .rest-fill { scale: 1 1; transition-delay: calc(4 * var(--dur-step)); }
.journey[data-step="3"] .restbar .rest-fill, html:not(.js) .restbar .rest-fill { scale: 1 1; transition: none; }

/* PR card */
.pr-card { display: grid; gap: var(--space-8); justify-items: start; width: 100%; max-width: var(--size-setrows); padding: var(--space-20); background: var(--color-card); border-radius: var(--radius-card); }
.pr-exercise { font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); letter-spacing: var(--type-card-heading-ls); font-weight: 500; text-transform: uppercase; }
.pr-top { font-size: var(--type-stat-size); line-height: var(--type-stat-lh); letter-spacing: var(--type-stat-ls); font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-top span { display: block; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); letter-spacing: normal; font-weight: 400; color: var(--color-slate); }
.journey[data-step="3"] .pr-card .tag-pr { animation: pop var(--dur-reveal) var(--ease-pop) both; }
@keyframes pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------- Progress gallery: a swipe rail, pinned to scroll sideways on wide screens ---------- */
.progress { padding-top: var(--space-section); }
.progress .section-title { font-size: var(--display-web-l); line-height: var(--type-display-l-lh); }
.progress-track {
  --rail-pad: max(var(--space-gutter), calc((100% - var(--size-container)) / 2));
  display: flex; gap: var(--space-32); margin: 0; padding: var(--space-48) var(--rail-pad) var(--space-16); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); scrollbar-width: none;
}
.progress-track::-webkit-scrollbar { display: none; }
.progress-item { flex: none; scroll-snap-align: start; display: grid; gap: var(--space-8); align-content: start; width: min-content; }
.progress-item .screen-stack { width: var(--size-phone-gallery); }
.progress-name { margin-top: var(--space-16); font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); letter-spacing: var(--type-card-heading-ls); font-weight: 500; text-transform: uppercase; }
.progress-item p { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-slate); }

/* ---------- Learn: the tier card ---------- */
.learn { padding-top: var(--space-section); }
.ink-card { background: var(--color-ink); color: var(--color-card); border-radius: var(--radius-hero); padding: var(--space-32) var(--space-24); }
.ink-card .label { color: var(--color-smoke); }
.learn-card { display: grid; gap: var(--space-32); overflow: hidden; padding-bottom: 0; }
.learn-copy { padding-bottom: var(--space-16); }
.learn-phone { justify-self: center; align-self: end; height: var(--size-learn-crop); overflow: hidden; }
.tier-demo { margin-top: var(--space-32); }
.learn-card .section-title { margin-top: var(--space-16); font-size: var(--display-web-l); line-height: var(--type-display-l-lh); }
.learn-body { max-width: var(--size-measure); margin-top: var(--space-24); }
.tier-demo { display: grid; gap: var(--space-24); max-width: var(--size-setrows); }
.tier-head { display: flex; align-items: center; gap: var(--space-20); }
.tier-badge {
  display: grid; place-items: center; flex: none; width: var(--size-tier); height: var(--size-tier); padding-top: var(--space-8);
  border-radius: var(--radius-card); background: var(--color-voltage); color: var(--color-ink); font-size: calc(var(--size-tier) * .86); line-height: 1;
}
.tier-name { font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); letter-spacing: var(--type-card-heading-ls); font-weight: 500; text-transform: uppercase; }
.scores { display: grid; gap: var(--space-12); max-width: var(--size-setrows); }
.score { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); }
.score dt { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-smoke); }
.score dd { display: flex; gap: var(--space-4); }
.sd { width: var(--size-score-dot); height: var(--size-score-dot); border-radius: var(--radius-round); background: var(--color-graphite); transition: background-color var(--dur-step) var(--ease-out); transition-delay: calc(var(--i) * var(--dur-stagger)); }
.learn-card.is-in .sd.on, html:not(.js) .sd.on { background: var(--color-mint); }
.js .tier-badge { transition: scale var(--dur-reveal) var(--ease-pop), rotate var(--dur-reveal) var(--ease-pop), opacity var(--dur-swap) var(--ease-out); }
.js .learn-card:not(.is-in) .tier-badge { scale: .6; rotate: -8deg; opacity: 0; }
@media (min-width: 900px) {
  .ink-card { padding: var(--space-64); }
  .learn-card { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-64); padding-bottom: 0; }
  .learn-copy { padding-bottom: var(--space-64); }
}

/* ---------- Plans ---------- */
.plans { padding-top: var(--space-section); }
.plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.rail-controls { display: none; gap: var(--space-8); }
@media (hover: hover) and (pointer: fine) { .rail-controls { display: flex; } }
.round-btn { display: grid; place-items: center; width: var(--space-44); height: var(--space-44); padding: 0; border: 0; border-radius: var(--radius-round); background: var(--color-card); color: var(--color-ink); cursor: pointer; }
.round-btn svg { width: var(--space-20); height: var(--space-20); }
.plan-rail {
  --rail-pad: max(var(--space-gutter), calc((100% - var(--size-container)) / 2));
  display: flex; gap: var(--space-12); margin: 0; padding: var(--space-32) var(--rail-pad); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); scrollbar-width: none;
}
.plan-rail::-webkit-scrollbar { display: none; }
.plan-card { position: relative; flex: 0 0 var(--size-plan-card); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--color-card); border-radius: var(--radius-card); }
.plan-name { font-size: var(--type-display-s-size); line-height: var(--type-display-s-lh); }
.plan-name a { text-decoration: none; }
.plan-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.plan-name a:focus-visible { outline: none; }
.plan-card:focus-within { outline: var(--size-focus) solid var(--color-ink); outline-offset: var(--space-4); }
.plan-summary { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-slate); }
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: auto; }
.plan-stats dd { font-size: var(--type-stat-s-size); line-height: var(--type-stat-s-lh); letter-spacing: var(--type-stat-s-ls); font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-card .tag { align-self: flex-start; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.quick .label { width: 100%; }
.quick-link { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-44); padding: 0 var(--space-20); background: var(--color-card); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--type-body-size); font-weight: 500; }
.quick-link span { color: var(--color-slate); font-weight: 400; }
.quick .text-link { margin-left: var(--space-8); }

/* ---------- Guides ---------- */
.guides { padding-top: var(--space-section); }
.guide-grid { display: grid; gap: var(--space-12); margin-top: var(--space-48); padding: 0; list-style: none; }
@media (min-width: 700px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guides-layout { display: grid; gap: var(--space-48); margin-top: var(--space-48); }
.guides-layout .guide-grid { margin-top: 0; }
.guides-phone { display: none; }
.guides-phone .screen-stack { width: var(--size-phone-lang); }
@media (min-width: 900px) {
  .guides-layout { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-48); align-items: start; }
  .guides-phone { display: block; position: sticky; top: var(--space-48); }
}
.guide-card { position: relative; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--color-card); border-radius: var(--radius-card); }
.guide-card h3 { font-size: var(--type-display-s-size); line-height: var(--type-display-s-lh); }
.guide-card h3 a { text-decoration: none; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.guide-card h3 a:focus-visible { outline: none; }
.guide-card:focus-within { outline: var(--size-focus) solid var(--color-ink); outline-offset: var(--space-4); }
.guide-more { margin-top: auto; font-weight: 500; text-decoration: underline; text-underline-offset: var(--space-4); text-decoration-thickness: var(--size-border-hairline); }
.guide-card-terms { background: none; border: var(--size-border-ghost) solid var(--color-slate); }

/* ---------- Two languages ---------- */
.languages { padding-top: var(--space-section); }
.languages .wrap { display: grid; gap: var(--space-48); align-items: center; }
.languages .phone { justify-self: center; }
.languages .screen-stack { width: var(--size-phone-lang); }
@media (min-width: 900px) { .languages .wrap { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-96); } }

/* ---------- FAQ ---------- */
.faq { padding-top: var(--space-section); }
.faq-list { display: grid; gap: var(--space-12); max-width: var(--size-faq); margin-top: var(--space-48); }
.faq details { background: var(--color-card); border-radius: var(--radius-card); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: var(--size-dock); padding: var(--space-12) var(--space-24); cursor: pointer; list-style: none;
  font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: var(--space-20); height: var(--space-20); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - var(--size-focus) / 2); height: var(--size-focus); background: currentColor; transition: rotate var(--dur-step) var(--ease-out); }
.plus::after { rotate: 90deg; }
details[open] .plus::after { rotate: 0deg; }
.faq-answer { max-width: var(--size-measure); padding: 0 var(--space-24) var(--space-24); color: var(--color-slate); }

/* ---------- Final call to action ---------- */
.final { padding-block: var(--space-section); }
.final-card { display: grid; gap: var(--space-24); }
.final-card h2 { font-size: var(--display-web-xl); line-height: var(--type-display-xl-lh); }
.final-card .cta { margin-top: 0; }
@media (min-width: 900px) { .final-card { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-64); } }

/* ---------- Footer and dock ---------- */
.site-footer { padding-block: var(--space-48) calc(var(--space-96) + var(--size-dock)); }
.footer-grid { display: grid; gap: var(--space-32); }
.footer-tag { margin-top: var(--space-12); max-width: var(--size-measure-lead); color: var(--color-slate); }
.footer-col ul { list-style: none; padding: 0; margin-top: var(--space-8); }
.footer-col .text-link { font-weight: 400; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-48); padding-top: var(--space-16); border-top: var(--size-border-hairline) solid var(--color-ash); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.dock {
  position: fixed; left: 50%; bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dock);
  display: flex; align-items: center; gap: var(--space-4); height: var(--size-dock); padding: var(--space-8);
  background: var(--color-card); border-radius: var(--radius-pill);
  translate: -50% calc(100% + var(--space-48)); transition: translate var(--dur-swap) var(--ease-out);
}
.show-dock .dock { translate: -50% 0; }
.dock-nav { display: none; }
.dock .btn { min-height: var(--space-48); border-radius: var(--radius-pill); }
@media (min-width: 700px) { .dock-nav { display: flex; } }

/* ---------- Content pages: plan, exercise, guide ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-48); padding-block: var(--space-16) var(--space-64); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-8); padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls); color: var(--color-slate);
}
.crumbs li { display: flex; align-items: center; gap: var(--space-8); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--space-44); color: var(--color-ink); text-underline-offset: var(--space-4); text-decoration-thickness: var(--size-border-hairline); }
.page-head-copy > .label { margin-top: var(--space-8); }
.page-title { margin-top: var(--space-12); font-size: var(--display-web-xl); line-height: var(--type-display-xl-lh); }
.page-title > .display { display: block; }
.title-alt { display: block; margin-top: var(--space-8); font-family: var(--font-sans); font-size: var(--type-title-size); line-height: var(--type-title-lh); font-weight: 500; color: var(--color-slate); }
.page-lead { max-width: var(--size-measure); margin-top: var(--space-24); font-size: var(--type-lead-web-size); line-height: var(--type-title-lh); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-24); padding: 0; list-style: none; }
.tag-card { background: var(--color-card); }
.tier-card, .rx-card, .numbers-card { display: grid; align-content: start; gap: var(--space-24); }
@media (min-width: 900px) {
  .page-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-64); align-items: start; padding-top: var(--space-32); }
  .tier-card, .rx-card, .numbers-card { padding: var(--space-48); }
}

/* Facts: label over value, two columns (the plan grid, the dosing card) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-16); }
.facts dd { margin-top: var(--space-4); font-size: var(--type-title-size); line-height: var(--type-title-lh); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Tier card (exercise page) */
.tier-badge[data-tier="A"] { background: var(--color-mint); }
.tier-badge[data-tier="B"] { background: var(--color-card); }
.tier-badge[data-tier="C"] { background: var(--color-graphite); color: var(--color-smoke); }
.tier-label { margin-top: var(--space-4); font-size: var(--type-stat-size); line-height: var(--type-stat-lh); letter-spacing: var(--type-stat-ls); font-weight: 500; }
.tier-why { max-width: var(--size-measure); }
.tier-card .sd.on { background: var(--color-mint); }
.tier-note { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-smoke); }
.tier-note .text-link { color: var(--color-card); }
.tier-tag[data-tier="S"] { background: var(--color-voltage); }
.tier-tag[data-tier="A"] { background: var(--color-mint); }
.tier-tag[data-tier="B"] { background: var(--color-mist); }
.tier-tag[data-tier="C"] { background: var(--color-graphite); color: var(--color-smoke); }

/* The numbers (guide page) */
.numbers-keys { font-size: var(--type-stat-size); line-height: var(--type-stat-lh); letter-spacing: var(--type-stat-ls); font-weight: 500; }
.numbers { display: grid; gap: var(--space-12); }
.numbers div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-16); padding-top: var(--space-12); border-top: var(--size-border-hairline) solid var(--color-graphite); }
.numbers dt { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-smoke); }
.numbers dd { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: 500; }

/* Cards */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.card { display: grid; align-content: start; gap: var(--space-16); padding: var(--space-24); background: var(--color-card); border-radius: var(--radius-card); }
.card p { max-width: var(--size-measure); }
.card-measure { max-width: var(--size-faq); }
.card-h { font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); letter-spacing: var(--type-card-heading-ls); font-weight: 500; text-transform: uppercase; }
@media (min-width: 900px) {
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-wide { grid-column: 1 / -1; }
  .card { padding: var(--space-32); }
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: var(--space-32); padding: 0 var(--space-16); border-radius: var(--radius-pill); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: 500; }
.chip-mint { background: var(--color-mint); }
.chip-mist { background: var(--color-mist); }
.steps { display: grid; gap: var(--space-12); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: var(--space-32) minmax(0, 1fr); align-items: start; gap: var(--space-12); counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: var(--space-32); height: var(--space-32);
  border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-card); font-family: var(--font-mono); font-size: var(--type-label-size);
}
.cue-grid { display: grid; gap: var(--space-8); }
@media (min-width: 700px) { .cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cue-box { display: grid; align-content: start; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-input); }
.cue-box ul, .cue-list { display: grid; gap: var(--space-8); padding: 0; list-style: none; }
.cue-list { padding: var(--space-16); }
.cue-box li { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: 500; }
.cue-mint { background: var(--color-mint); }
.cue-mist { background: var(--color-mist); }
.note { max-width: var(--size-measure); margin-top: var(--space-16); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-slate); }

/* Routines of a plan: the table of the app's plan page */
.session-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-32); padding: 0; list-style: none; }
@media (min-width: 900px) { .session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.session { gap: var(--space-8); padding: var(--space-20) var(--space-16) var(--space-16); border-radius: var(--radius-hero); }
.session-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-12); padding-inline: var(--space-4); }
.session-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.session-table th, .session-table td { padding: var(--space-8) var(--space-4); text-align: left; vertical-align: middle; }
.session-table thead th { font-family: var(--font-mono); font-size: var(--type-label-s-size); line-height: var(--type-label-s-lh); font-weight: 400; color: var(--color-slate); }
.session-table abbr { text-decoration: none; }
.session-table tbody tr { border-top: var(--size-border-hairline) solid var(--color-mist); }
.session-table tbody th { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: 500; }
.session-table tbody th a { text-decoration-color: var(--color-ash); text-underline-offset: var(--space-4); text-decoration-thickness: var(--size-border-hairline); }
.session-table td { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); white-space: nowrap; }
.session-table td:first-of-type { font-weight: 500; }
.row-detail { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--type-label-s-size); line-height: var(--type-label-s-lh); font-weight: 400; color: var(--color-slate); }

/* Related items: alternatives, plans, guides, principles */
.related { padding-top: var(--space-96); }
.related-first { padding-top: 0; }
.section-h { font-size: var(--display-web-l); line-height: var(--type-display-l-lh); }
.mini-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-32); padding: 0; list-style: none; }
@media (min-width: 700px) { .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-24); background: var(--color-card); border-radius: var(--radius-card); }
.mini-name { font-size: var(--type-card-heading-size); line-height: var(--type-card-heading-lh); letter-spacing: var(--type-card-heading-ls); font-weight: 500; text-transform: uppercase; }
.mini-name a { text-decoration: none; }
.mini-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.mini-name a:focus-visible { outline: none; }
.mini-card:focus-within { outline: var(--size-focus) solid var(--color-ink); outline-offset: var(--space-4); }
.mini-card:hover .mini-name a { text-decoration: underline; text-underline-offset: var(--space-4); text-decoration-thickness: var(--size-border-hairline); }
.mini-text { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-slate); }
.mini-meta { margin-top: auto; font-family: var(--font-mono); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-ls); color: var(--color-slate); }

/* The call-to-action card at the end of a content page */
.final-copy { display: grid; gap: var(--space-24); justify-items: start; }
.final-body { max-width: var(--size-measure-lead); font-size: var(--type-lead-web-size); line-height: var(--type-title-lh); color: var(--color-smoke); }
.final-card-phone { overflow: hidden; padding-bottom: 0; }
.final-card-phone .final-copy { padding-bottom: var(--space-16); }
.final-phone { justify-self: center; align-self: end; height: var(--size-learn-crop); overflow: hidden; }
@media (min-width: 900px) { .final-card-phone .final-copy { padding-bottom: var(--space-64); } }

/* ---------- Load moment: the headline settles ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line { animation: settle var(--dur-reveal) var(--ease-out) both; }
  .hero-title .line + .line { animation-delay: var(--dur-stagger); }
  .hero-visual .moment { animation: arrive var(--dur-reveal) var(--ease-pop) both; animation-delay: calc(3 * var(--dur-stagger)); }
  .hero-visual .moment-pr { animation-delay: calc(5 * var(--dur-stagger)); }
  .hero-visual .moment-rest { animation-delay: calc(7 * var(--dur-stagger)); }
}
@keyframes settle { from { translate: 0 var(--space-24); } to { translate: 0 0; } }
@keyframes arrive { from { scale: .8; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------- Scroll moments (browsers with scroll-driven animations) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-visual { animation: drift-phone linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .moment-toast { animation-name: arrive, lift-l; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; animation-fill-mode: both; animation-timing-function: var(--ease-pop), linear; animation-duration: var(--dur-reveal), auto; }
    .moment-pr { animation-name: arrive, lift-s; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; animation-fill-mode: both; animation-timing-function: var(--ease-pop), linear; animation-duration: var(--dur-reveal), auto; }
    .moment-rest { animation-name: arrive, sink; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; animation-fill-mode: both; animation-timing-function: var(--ease-pop), linear; animation-duration: var(--dur-reveal), auto; }
    .moment-toast { animation-delay: calc(3 * var(--dur-stagger)), 0s; }
    .moment-pr { animation-delay: calc(5 * var(--dur-stagger)), 0s; }
    .moment-rest { animation-delay: calc(7 * var(--dur-stagger)), 0s; }
    .hero .rest-fill { animation: rest-fill linear both; animation-timeline: --hero; animation-range: exit 0% exit 45%; }
    .ticker-a { animation: slide-left linear both; animation-timeline: --ticker; animation-range: cover 0% cover 100%; }
    .ticker-b { animation: slide-right linear both; animation-timeline: --ticker; animation-range: cover 0% cover 100%; }
    .plan-card { animation: card-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 85%; }
    .final-card { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .phone-back { animation: lift-s linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .learn-phone .phone { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .progress-pin { height: 260svh; view-timeline: --progress block; }
    .progress-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-bottom: calc(var(--size-dock) + var(--space-16)); }
    .progress-track { width: max-content; overflow: visible; padding-top: var(--space-32); animation: track-x linear both; animation-timeline: --progress; animation-range: contain 0% contain 100%; }
  }
}
@keyframes drift-phone { to { translate: 0 var(--space-48); } }
@keyframes lift-l { to { transform: translateY(calc(-1 * var(--space-128))); } }
@keyframes lift-s { to { transform: translateY(calc(-1 * var(--space-64))); } }
@keyframes sink { to { transform: translateY(var(--space-64)); } }
@keyframes rest-fill { from { scale: .12 1; } to { scale: 1 1; } }
@keyframes slide-left { from { translate: 4% 0; } to { translate: -36% 0; } }
@keyframes slide-right { from { translate: -36% 0; } to { translate: 4% 0; } }
@keyframes card-in { from { scale: .86; } to { scale: 1; } }
@keyframes grow { from { scale: .9; } to { scale: 1; } }
@keyframes rise { from { translate: 0 var(--space-96); } to { translate: 0 0; } }
@keyframes track-x { to { translate: calc(-100% + 100vw) 0; } }

/* ---------- Reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}