/* wattsupofficial.com — gewone CSS, geen build: Netlify publiceert deze map zoals ze is.
   Zoals de app: de systeemletter van Apple, wit en #F2F2F7 in licht, echt zwart in donker, en
   het blauw van het logo (apps/mobile/src/theme/colors.ts). Elke tekst haalt minstens 4,5:1.

   Licht of donker: standaard volgt de site het toestel. Kiest de bezoeker zelf (de knop in de
   balk), dan zet theme.js data-theme="light" of "dark" op <html>, vóór het eerste beeld. De
   schermafbeeldingen staan er in beide standen (.theme-light, .theme-dark); de stand bepaalt
   welke te zien is, en een verborgen afbeelding met loading="lazy" laadt de browser niet.

   Interactief (site.js): wie rijdt er (segmenten), de coach met echte antwoorden, de rondleiding.
   Zonder JavaScript staat alles gewoon onder elkaar. Op een laptop past elke interactieve sectie
   op één scherm, ook op een lage (1280 × 720).
   Beweging: zie .claude/skills/wattsup-website. Enkel transform en opacity (en een kleine blur);
   met "beperk beweging" blijft alleen vervagen over. */

/* De letter: op Apple de systeemletter (SF), elders Inter (OFL, fonts/OFL.txt), die er bijna hetzelfde
   uitziet. De browser laadt Inter enkel als de systeemletter ontbreekt. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --grouped: #f2f2f7;
  --cell: #ffffff;
  --cell-on-paper: #f2f2f7;
  --bubble: #e9e9eb;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --hairline: rgba(60, 60, 67, 0.18);
  --accent: #0369a1;
  --accent-ink: #ffffff;
  --logo: #0ea5e9;
  --segment: rgba(118, 118, 128, 0.12);
  --segment-on: #ffffff;
  --ring: rgba(0, 0, 0, 0.08);
  --bar: rgba(255, 255, 255, 0.78);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  --app-bg: #f2f1f6;
  --accent-soft: #bae6fd;
  --orange: #ff9500;
  --blue: #007aff;
  --purple: #af52de;
  --pink: #ff2d55;
  --green: #34c759;
  --teal: #30b0c7;
  --indigo: #5856d6;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --page: 1120px;
  --gutter: 20px;

  /* Easing: sterk uitlopend voor binnenkomen, de curve van iOS-bladen voor verschuiven. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Donker: als de bezoeker het koos, of als het toestel donker staat en er geen keuze is. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --grouped: #000000;
  --cell: #1c1c1e;
  --cell-on-paper: #1c1c1e;
  --bubble: #2c2c2e;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --hairline: rgba(84, 84, 88, 0.6);
  --accent: #38bdf8;
  --accent-ink: #001b2e;
  --logo: #38bdf8;
  --segment: rgba(118, 118, 128, 0.24);
  --segment-on: #636366;
  --ring: rgba(255, 255, 255, 0.14);
  --bar: rgba(0, 0, 0, 0.72);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --app-bg: #000000;
  --accent-soft: #0c4a6e;
  --orange: #ff9f0a;
  --blue: #0a84ff;
  --purple: #bf5af2;
  --pink: #ff375f;
  --green: #30d158;
  --teal: #40c8e0;
  --indigo: #5e5ce6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000;
    --grouped: #000000;
    --cell: #1c1c1e;
    --cell-on-paper: #1c1c1e;
    --bubble: #2c2c2e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --hairline: rgba(84, 84, 88, 0.6);
    --accent: #38bdf8;
    --accent-ink: #001b2e;
    --logo: #38bdf8;
    --segment: rgba(118, 118, 128, 0.24);
    --segment-on: #636366;
    --ring: rgba(255, 255, 255, 0.14);
    --bar: rgba(0, 0, 0, 0.72);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    --app-bg: #000000;
    --accent-soft: #0c4a6e;
    --orange: #ff9f0a;
    --blue: #0a84ff;
    --purple: #bf5af2;
    --pink: #ff375f;
    --green: #30d158;
    --teal: #40c8e0;
    --indigo: #5e5ce6;
  }
}

/* Welke schermafbeelding: de lichte, tenzij de stand donker is. */
.theme-dark {
  display: none;
}

:root[data-theme="dark"] .theme-light {
  display: none;
}

:root[data-theme="dark"] .theme-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-dark {
    display: block;
  }
}

/* ── Basis ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ankers en de focus vallen niet onder de vaste balk. */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.47 var(--font);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

/* Links in lopende tekst: onderstreept, niet enkel een andere kleur (WCAG 1.4.1). */
main p a,
main li a,
main td a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a,
button,
summary,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  letter-spacing: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

a:focus-visible,
summary:focus-visible,
.chapter-btn:focus-visible {
  border-radius: 6px;
}

/* Secties zijn tabstops (van sectie naar sectie met Tab): een kader aan de binnenkant. De inhoud
   zelf (het doel van de skiplink) krijgt geen kader. */
section[tabindex]:focus-visible {
  outline-offset: -10px;
  border-radius: 28px;
}

main:focus-visible {
  outline: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip,
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  width: auto;
  height: auto;
  clip-path: none;
  left: var(--gutter);
  top: 8px;
  z-index: 10;
  background: var(--cell);
  padding: 8px 12px;
}

/* ── De balk: zoals bovenaan in de app, met het logo in het midden ── */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.bar .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 56px;
}

.bar .side {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.bar .side.end {
  justify-content: flex-end;
  gap: 20px;
}

.bar .side a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--ink);
}

.bar .side a[aria-current="page"] {
  color: var(--accent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 24px;
}

.brand .up {
  color: var(--logo);
}

/* Smalle telefoons: alles iets compacter, zodat het logo in het midden blijft. */
@media (max-width: 400px) {
  .bar .wrap {
    gap: 4px;
    padding: 0 14px;
  }

  .bar .side,
  .bar .side.end {
    gap: 12px;
    font-size: 14px;
  }

  .brand {
    font-size: 18px;
    gap: 6px;
  }

  .brand img {
    width: 26px;
    height: 21px;
  }
}

/* De knop voor licht en donker: zon of maan, links in de balk. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}

.theme-toggle:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background: var(--cell-on-paper);
  }
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .moon {
    display: block;
  }
}

/* Zonder JavaScript kan de knop niets: dan niet tonen. */
:root:not(.js) .theme-toggle {
  display: none;
}

/* Wisselen van stand: de hele pagina vervaagt in 250 ms (View Transitions, waar beschikbaar). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease;
}

/* ── Schermafbeeldingen: zonder toestel (Apple staat geen nagetekende iPhone toe), met de
   afgeronde hoeken van het scherm en een fijne rand, zodat zwart op zwart leesbaar blijft. ── */

.screen {
  display: block;
}

.screen img {
  width: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: 13.7% / 6.3%;
  box-shadow: 0 0 0 1px var(--ring);
  background: var(--cell);
}

/* ── De rij uit de App Store en de proefweek ── */

.listing {
  display: flex;
  align-items: center;
  gap: 14px;
}

.listing img {
  width: 64px;
  height: 64px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--ring);
}

.listing strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.listing > div > span {
  color: var(--ink-2);
  font-size: 15px;
}

.price-line {
  color: var(--ink-2);
  font-size: 15px;
}

/* ── Hero ── */

.hero {
  padding: 56px 0 80px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(42px, 7.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.lede {
  margin-top: 22px;
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 32em;
}

.hero .actions {
  margin-top: 36px;
}

/* Twee schermen. Wat vooraan staat, is groot en scherp; het andere staat er iets kleiner achter.
   Met de muis: wijs een scherm aan en het komt naar voren. Op een telefoon: tik erop (site.js).
   De plaats blijft dezelfde, enkel wat vooraan staat wisselt; zo springt niets onder de muis weg. */
.duo {
  position: relative;
  width: min(420px, 100%);
  justify-self: center;
  aspect-ratio: 420 / 760;
}

.duo .phone {
  position: absolute;
  z-index: 1;
  width: 74%;
  padding: 0;
  border: 0;
  border-radius: 13.7% / 6.3%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.88;
  transform: scale(0.94);
  transition: opacity 1000ms ease;
}

.duo .phone.is-front {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.duo .phone:focus-visible {
  outline-offset: 6px;
  border-radius: 13.7% / 6.3%;
}

.duo .a {
  left: 0;
  top: 0;
}

.duo .b {
  right: 0;
  bottom: 0;
}

.duo .phone img {
  box-shadow: 0 0 0 1px var(--ring);
}

.duo .phone.is-front img {
  box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
  .duo .phone:not(.is-front):hover {
    opacity: 1;
  }
}

/* Onder de schermen: een hint (enkel op aanraakschermen: daar zie je niet vanzelf dat je kunt tikken)
   en een knop om het vanzelf wisselen te pauzeren (WCAG 2.2.2). */
.duo-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.duo-hint {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

.duo-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--segment);
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

.duo-play:active {
  transform: scale(0.95);
}

.duo-play svg {
  width: 16px;
  height: 16px;
}

.duo-play .play,
.duo-play.paused .pause {
  display: none;
}

.duo-play.paused .play {
  display: block;
}

:root:not(.js) .duo-play {
  display: none;
}

/* Met een muis (geen hint): de knop in de lege hoek linksonder, naast de schermen. */
@media (hover: hover) and (pointer: fine) {
  .duo-bar {
    left: 2%;
    right: auto;
    bottom: 2%;
    justify-content: flex-start;
  }
}



@media (hover: hover) and (pointer: fine) {
  .duo-hint {
    display: none;
  }
}

:root:not(.js) .duo-hint {
  display: none;
}

@media (min-width: 900px) {
  .hero {
    padding: 48px 0 80px;
  }

  .hero .wrap {
    grid-template-columns: 1fr auto;
    gap: 64px;
  }

  /* De twee schermen passen in het venster, zodat de rij uit de App Store meteen te zien is. */
  .duo {
    width: min(420px, calc((100vh - 57px - 96px) / 1.81));
  }
}

/* De binnenkomst bij het laden: tekst en schermen staan er meteen (niet doorzichtig, zodat de pagina
   vlot verschijnt) en zakken kort na elkaar op hun plaats. De schermen houden hun animatie enkel
   vooraf vast (backwards), anders blokkeert ze later het wisselen. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes settle {
  from {
    transform: translateY(22px);
  }
}

.hero .rise {
  animation: settle 700ms var(--ease-out) both;
}

.hero .rise:nth-child(2) {
  animation-delay: 50ms;
}

.hero .rise:nth-child(3) {
  animation-delay: 100ms;
}

.duo .a {
  animation: settle 800ms var(--ease-out) 60ms backwards;
}

.duo .b {
  animation: settle 800ms var(--ease-out) 140ms backwards;
}

/* ── Gewone secties ── */

.section {
  padding: 96px 0;
}

.section.grouped {
  background: var(--grouped);
}

.section h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 17em;
}

.section .intro {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 44em;
}

.section .note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 44em;
}

/* ── Kaarten: wit op grijs, of grijs op wit (zoals gegroepeerde lijsten in iOS) ── */

.bento > li,
.steps > li,
.science > li,
.plan,
.included {
  background: var(--cell-on-paper);
  border-radius: 26px;
}

.section.grouped .bento > li,
.section.grouped .steps > li,
.section.grouped .science > li,
.section.grouped .plan,
.section.grouped .included {
  background: var(--cell);
}

/* Pictogrammen zoals in Instellingen: een wit symbool op een gekleurd vlak (parts.py, glyph). */
.glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #ffffff;
  background: var(--tint, var(--accent));
}

.glyph svg {
  width: 24px;
  height: 24px;
}

.tint-orange {
  --tint: var(--orange);
}

.tint-blue {
  --tint: var(--blue);
}

.tint-purple {
  --tint: var(--purple);
}

.tint-pink {
  --tint: var(--pink);
}

.tint-green {
  --tint: var(--green);
}

.tint-teal {
  --tint: var(--teal);
}

.tint-indigo {
  --tint: var(--indigo);
}

/* ── Herkenbaar: een bento zoals op de productpagina's van Apple ──
   Breed scherm: rijen [A A B] [C D D] [E E F]; een brede kaart heeft rechts een venster in de app. */

.bento {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.bento > li {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px;
  overflow: hidden;
}

.bento h3 {
  margin-top: 18px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.bento p {
  margin-top: 8px;
  color: var(--ink-2);
}

/* Een venster in de app: de uitsnede staat op de achtergrond van de app, zonder naad. */
.well {
  display: grid;
  place-items: center;
  margin-top: auto;
  padding: 8px 0;
  border-radius: 18px;
  background: var(--app-bg);
  overflow: hidden;
}

.well img {
  width: 100%;
}

/* Kleine nagebouwde stukjes app (build.py: FORM_MINI, MOVE_MINI), in de stijl van de app. */
.well.mini {
  display: grid;
  place-items: stretch;
  align-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 15px;
}

.mini .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--cell);
}

.mini .row strong {
  font-weight: 600;
}

.mini .what {
  flex: 1;
}

.mini .num,
.mini .day {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.mini .day {
  width: 2.2em;
  font-weight: 600;
}

.mini .was .what {
  color: var(--ink-2);
  text-decoration: line-through;
}

.mini .pill {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}

/* De vorm op de schaal van de app: overbelast, opbouwen, in balans, fris, uitgerust. */
.mini .scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 4px;
}

.mini .scale i {
  height: 8px;
  border-radius: 4px;
  background: var(--hairline);
}

.mini .scale .on {
  background: var(--green);
}

.mini .ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}

@media (min-width: 980px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bento > .wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 28px;
    align-items: center;
  }

  .bento > .wide .well {
    align-self: stretch;
    margin-top: 0;
  }
}

/* ── In drie stappen: bij elke stap komt het scherm van onderen in beeld ── */

.steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.steps > li {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 0;
  overflow: hidden;
}

.steps .num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.steps p {
  margin-top: 8px;
  color: var(--ink-2);
}

.peek {
  display: flex;
  justify-content: center;
  height: 330px;
  margin-top: auto;
  padding-top: 32px;
  overflow: hidden;
}

.peek .screen {
  width: min(260px, 82%);
}

.peek .screen img {
  box-shadow: 0 0 0 1px var(--ring), 0 18px 40px rgba(0, 0, 0, 0.12);
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Wetenschap: elke kaart met een kleine illustratie en de bron ── */

.science {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.science > li {
  display: flex;
  flex-direction: column;
  padding: 26px;
}

.science h3 {
  margin-top: 24px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.science p {
  margin-top: 8px;
  color: var(--ink-2);
}

.viz {
  height: 158px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--paper);
}

.section.grouped .viz {
  background: var(--grouped);
}

.viz-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.science .viz p {
  margin-top: 0;
}

/* Staven: koolhydraten per dag, laag op rustdagen, het hoogst bij de lange rit. */
.bars ol {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  height: 98px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.bars li {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 4px;
  height: 100%;
}

/* Telefoon: de kaart is smal, dus de grafiek iets hoger zodat het verschil tussen de dagen te zien is. */
@media (max-width: 979px) {
  .science > li:first-child .viz {
    height: 210px;
  }

  .science > li:first-child .bars ol {
    height: 150px;
  }
}

.bars li span {
  align-self: end;
  width: 100%;
  height: calc(var(--h) * 100%);
  border-radius: 6px;
  background: var(--accent);
  opacity: 0.5;
}

.bars li.rest span {
  opacity: 0.22;
}

.bars li.peak span {
  opacity: 1;
}

.bars b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

/* Onderweg: een hoogteprofiel van een rit met pinnen om te drinken (druppel) en te eten (bliksem). */
.ride-svg {
  display: block;
  width: 100%;
  height: 88px;
  margin-top: 6px;
  overflow: visible;
}

.ride-svg .area {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
}

.ride-svg .profile {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ride-svg .pin line {
  stroke: var(--orange);
  stroke-width: 1.5;
}

.ride-svg .pin circle {
  fill: var(--orange);
}

.ride-svg .pin path {
  fill: #ffffff;
}

.ride .ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Je metabolisme: een rustdag naast een rijdag, opgebouwd uit dezelfde delen. */
.energy2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 18px;
}

.energy2 .days {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 100%;
}

.energy2 .day {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.energy2 .col {
  display: flex;
  flex-direction: column-reverse;
  width: 46px;
  border-radius: 8px;
  overflow: hidden;
}

.energy2 .col span {
  display: block;
  transform-origin: bottom;
}

.energy2 .col .resting {
  height: 52px;
  background: var(--accent);
}

.energy2 .col .daily {
  height: 18px;
  background: var(--accent-soft);
}

.energy2 .col .training {
  height: 34px;
  background: var(--orange);
}

.energy2 .day b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.energy2 .key {
  list-style: none;
  margin: 0;
  padding: 0 0 22px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.energy2 .key li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.energy2 .key li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent);
}

.energy2 .key .daily::before {
  background: var(--accent-soft);
}

.energy2 .key .training::before {
  background: var(--orange);
}

/* Fitness en vermoeidheid: uitgerekend met de formule van de app (build.py, pmc_svg). */
.pmc svg {
  display: block;
  width: 100%;
  height: 92px;
}

.pmc polyline {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pmc polyline.fitness {
  stroke: var(--accent);
  stroke-width: 3;
}

.pmc polyline.fatigue {
  stroke: var(--orange);
  stroke-width: 1.6;
  opacity: 0.85;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.legend .fatigue::before {
  background: var(--orange);
}

.cite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--ink-2);
}

.science .cite {
  margin-top: auto;
}

.cite .glyph {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
}

.cite .glyph svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 760px) {
  .science {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Wat de coach opmerkt: je vraag, het letterlijke antwoord en het stuk app waar het over gaat ── */

.insights {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.insight {
  display: grid;
  gap: 24px;
  padding: 26px;
  border-radius: 26px;
  background: var(--cell-on-paper);
}

.section.grouped .insight {
  background: var(--cell);
}

.insight .topic {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.insight .topic .glyph {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.insight .topic .glyph svg {
  width: 19px;
  height: 19px;
}

/* Een klein chatvenster zoals het coachscherm: het logo bovenaan, je vraag als bericht rechts, het
   antwoord van de coach eronder. Wit op de grijze kaart (in donker: zwart, zoals de app). */
.chat-panel {
  margin-top: 14px;
  padding: 10px 18px 18px;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--ring);
}

.section.grouped .chat-panel {
  background: var(--app-bg);
}

.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.chat-panel-head img {
  width: 20px;
  height: 16px;
}

.chat-panel-head .up {
  color: var(--logo);
}

/* De vraag als je eigen bericht, het antwoord zoals in de chat. */
.insight .asked,
.told .me-bubble {
  width: fit-content;
  max-width: 88%;
  margin: 16px 0 0 auto;
  padding: 10px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--bubble);
  line-height: 1.4;
}

.insight .answer {
  margin-top: 14px;
  line-height: 1.5;
}

.insight .answer p + p {
  margin-top: 10px;
}

.insight .well {
  margin-top: 0;
}

@media (min-width: 900px) {
  .insight {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 40px;
    padding: 32px;
  }

  .insight .well {
    align-self: stretch;
  }
}

/* ── Maak het van jou: wat je instelt, en wat je de coach in je eigen woorden zegt ── */

.yours {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.settings-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-grid li,
.told {
  border-radius: 22px;
  background: var(--cell-on-paper);
}

.settings-grid li {
  padding: 20px;
}

.settings-grid .glyph {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.settings-grid .glyph svg {
  width: 21px;
  height: 21px;
}

.settings-grid h3 {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.settings-grid p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}

.told {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
}

.told h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.told .me-bubble {
  margin-top: 20px;
}

.told .coach-says {
  margin-top: 14px;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .yours {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* De rondleiding staat op grijs: de kaarten (telefoon) dan wit. */
.tour.grouped .chapter {
  background: var(--cell);
}

/* ── Segmenten zoals in iOS (wie rijdt er) ── */

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--segment);
}

.segmented button {
  display: block;
  padding: 7px 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 160ms var(--ease-out);
}

.segmented button[aria-selected="true"] {
  background: var(--segment-on);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

.segmented button:active {
  transform: scale(0.97);
}

/* ── Wie rijdt er ──
   Breed scherm: links de titel, de segmenten en het verhaal, rechts de telefoon, samen op één
   scherm. De drie verhalen liggen op elkaar, net als de drie schermen; site.js toont er één. */

.riders .wrap {
  display: grid;
  gap: 40px;
}

.riders .tabs {
  margin-top: 28px;
}

/* Telefoon: de segmenten vullen de breedte, met iets kleinere tekst. */
@media (max-width: 480px) {
  .riders .tabs {
    display: grid;
    width: 100%;
  }

  .riders .tabs button {
    padding: 7px 6px;
    font-size: 14px;
    white-space: normal;
    line-height: 1.25;
  }
}

/* Zonder JavaScript: de drie verhalen onder elkaar, zonder segmenten, met het eerste scherm. */
:root:not(.js) .riders .tabs,
:root:not(.js) .shots .screen + .screen {
  display: none;
}

.panels {
  margin-top: 32px;
}

.panel + .panel {
  margin-top: 48px;
}

/* Alle verhalen in dezelfde cel: de hoogte is die van het langste, dus niets verspringt. */
.js .panels {
  display: grid;
}

.js .panel {
  grid-area: 1 / 1;
  margin-top: 0;
}

.js .panel[hidden] {
  display: block;
  visibility: hidden;
}

.js .panel.enter {
  animation: rise 500ms var(--ease-out) both;
}

.panel h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.panel p {
  margin-top: 10px;
  color: var(--ink-2);
  max-width: 30em;
}

.ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
}

.ticks svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent);
}

.shots {
  display: grid;
  justify-items: center;
}

.shots .screen {
  width: min(260px, 64vw);
}

.shots .screen img {
  box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}

/* Wisselen zoals in de rondleiding: het oude en het nieuwe scherm smelten samen. */
.js .shots .screen {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-ios);
}

.js .shots .screen.active {
  opacity: 1;
  transform: none;
}

/* Met een lichte vervaging smelten de schermen samen, waar het toestel het aankan (site.js: html.fx). */
.fx.js .shots .screen {
  filter: blur(4px);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-ios), filter 500ms var(--ease-out);
}

.fx.js .shots .screen.active {
  filter: none;
}

@media (min-width: 900px) {
  /* De telefoon is zo hoog als het scherm toelaat, min de balk en wat lucht. */
  .riders {
    --phone: min(300px, calc((100vh - 72px - 112px) / 2.174));
    padding: 56px 0;
  }

  .riders .wrap {
    grid-template-columns: 1fr var(--phone);
    gap: 96px;
    align-items: center;
  }

  .shots .screen {
    width: var(--phone);
  }
}

/* ── De coach: echte vragen en antwoorden ── */

.coach .wrap {
  display: grid;
  gap: 48px;
  align-items: start;
}

.facts {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
  max-width: 34em;
}

.facts li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.facts strong {
  display: block;
  font-weight: 600;
}

.facts div span {
  color: var(--ink-2);
}

/* Het coachscherm van de app: bovenaan de knoppen en het logo, in het midden het gesprek, onderaan
   de voorbeelden als suggesties en de balk "Ask your coach…" (build.py, site.js stap 3). */
.chat {
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  border-radius: 40px;
  box-shadow: 0 0 0 1px var(--ring), var(--shadow);
  overflow: hidden;
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px 6px;
}

.app-head .pill {
  display: flex;
  gap: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--cell);
  box-shadow: 0 0 0 1px var(--ring);
  color: var(--ink);
}

.app-head .pill svg,
.app-input svg {
  width: 20px;
  height: 20px;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-logo img {
  width: 24px;
  height: 19px;
}

.app-logo .up {
  color: var(--logo);
}

/* De verhalen: een streepje per gesprek bovenaan, zoals op Instagram. Het streepje van het gesprek dat
   speelt, vult zich (site.js zet --p van 0 tot 1); de vorige zijn vol. Elk streepje is een knop. */
.stories {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 0 16px;
}

.story {
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.story i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  overflow: hidden;
}

.story b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.story.done b {
  --p: 1;
}

.story:focus-visible {
  outline-offset: 2px;
  border-radius: 4px;
}

.story-pause {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.story-pause svg {
  width: 14px;
  height: 14px;
}

.story-pause .play,
.story-pause.paused .pause {
  display: none;
}

.story-pause.paused .play {
  display: block;
}

:root:not(.js) .stories {
  display: none;
}



/* Leeg gesprek: het logo vervaagd in het midden, zoals in de app. */
.convo .empty {
  display: none;
}

.js .convo.is-empty .empty {
  display: block;
  margin: auto;
  width: 96px;
  height: auto;
  opacity: 0.28;
}

.js .convo.is-empty {
  display: flex;
}

.convo {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent;
}

.app-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 14px;
  padding: 5px;
  border-radius: 999px;
  background: var(--cell);
  box-shadow: 0 0 0 1px var(--ring);
}

.app-input .round {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.app-input .plus {
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
}

.app-input .send {
  background: color-mix(in srgb, var(--ink-2) 45%, transparent);
  color: #ffffff;
  transition: background-color 200ms ease;
}

.app-input.has-text .send {
  background: var(--accent);
  color: var(--accent-ink);
}

.app-input .field {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}

.app-input .typed {
  color: var(--ink);
}

.app-input .placeholder {
  color: var(--ink-2);
}

.app-input.has-text .placeholder {
  display: none;
}

:root:not(.js) .app-input {
  display: none;
}

/* Met een vinger: hogere knoppen, zodat je ze makkelijk raakt. */
@media (pointer: coarse) {
  .segmented button {
    min-height: 40px;
  }
}

.convo {
  padding: 12px 18px;
}

.qa + .qa {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.js .qa + .qa {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.js .qa:not(.active) {
  display: none;
}

.qa .me {
  margin-left: auto;
  width: fit-content;
  max-width: 85%;
  padding: 10px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--bubble);
}

.says {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.says p + p,
.says p + ul,
.says ul + p {
  margin-top: 10px;
}

.says ul {
  margin: 0;
  padding-left: 20px;
}

.says li + li {
  margin-top: 6px;
}

.memory {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--segment);
  font-size: 14px;
  line-height: 1.4;
}

.memory span {
  display: block;
  font-weight: 600;
  color: var(--accent);
}

/* Het antwoord komt binnen: de vraag, even "aan het typen", dan het antwoord (site.js). */
.qa.asking .me {
  animation: bubble 400ms var(--ease-out) both;
}

.qa.asking .says {
  opacity: 0;
}

.qa.answering .says {
  animation: rise 500ms var(--ease-out) both;
}

.typing {
  display: flex;
  gap: 5px;
  width: fit-content;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--segment);
}

.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: dot 1s ease-in-out infinite;
}

.typing i:nth-child(2) {
  animation-delay: 150ms;
}

.typing i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes bubble {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

@keyframes dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (min-width: 900px) {
  .coach {
    padding: 56px 0;
  }

  .coach .wrap {
    grid-template-columns: 1fr 500px;
    gap: 72px;
    align-items: center;
  }

  /* Het scherm past in het venster; een lang antwoord scrolt erin, zoals in de app. Boven en
     onder vervaagt de tekst, zodat je ziet dat er meer is. */
  .js .chat {
    height: min(660px, calc(100vh - 72px - 112px));
  }

  .js .convo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px 24px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 24px), transparent);
  }
}

/* Telefoon: een vaste hoogte zoals een scherm, zodat het niet verspringt tussen de antwoorden. */
@media (max-width: 899px) {
  .js .chat {
    height: min(620px, calc(100svh - 120px));
  }

  .js .convo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  }
}

/* ── De rondleiding ──
   Telefoon en tablet: de zes hoofdstukken als kaarten om opzij te vegen (vastklikkend), met
   bolletjes eronder. Laptop (site.js): de sectie blijft staan terwijl je scrolt. Links de lijst
   met hoofdstukken, het actieve klapt open en een lijntje vult zich; rechts wisselt de telefoon
   mee. De tekst staat dus altijd op dezelfde plaats. Een hoofdstuk aanklikken brengt je erheen.
   Zonder JavaScript of op een laag scherm: de kaarten in een raster. */

.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter h3 {
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.chapter-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.chapter .kicker,
.chapter .title {
  display: block;
}

.chapter .kicker {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.chapter-body p {
  margin-top: 10px;
  color: var(--ink-2);
}

.chapter-body .note {
  font-size: 14px;
}

.tour .peek {
  height: 320px;
}

.tour .peek .screen {
  width: min(240px, 80%);
}

/* Kaarten om opzij te vegen. */
.carousel {
  margin: 32px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel:focus-visible {
  outline-offset: -3px;
}

.tour .chapters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 360px);
  gap: 12px;
}

.tour .chapter {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 0;
  border-radius: 26px;
  background: var(--cell-on-paper);
  overflow: hidden;
  scroll-snap-align: start;
}

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.tour-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hairline);
  transition: background-color 200ms ease, transform 200ms var(--ease-out);
}

.tour-dots i.on {
  background: var(--ink-2);
  transform: scale(1.2);
}

.stage {
  display: none;
}

/* Breed scherm zonder vaste sectie: de kaarten in een raster van drie. */
@media (min-width: 980px) {
  .tour .carousel {
    margin: 40px 0 0;
    padding: 0;
    overflow: visible;
  }

  .tour .chapters {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .tour-dots {
    display: none;
  }
}

/* Laptop met JavaScript: de sectie blijft staan, 60 % van het venster scrollen per hoofdstuk. */
@media (min-width: 980px) and (min-height: 640px) {
  .js .tour {
    --phone: min(320px, calc((100vh - 57px - 96px) / 2.174));
    padding: 0;
  }

  .js .tour-track {
    height: calc(100vh + 6 * 60vh);
  }

  .js .tour-pin {
    position: sticky;
    top: 57px;
    display: flex;
    align-items: center;
    height: calc(100vh - 57px);
  }

  .js .tour-pin .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--phone);
    gap: 96px;
    align-items: center;
    width: 100%;
  }

  .js .tour .carousel {
    margin-top: 28px;
  }

  /* De tekst hangt vast aan de bovenkant, op dezelfde hoogte als waar ze gecentreerd zou staan:
     een hoofdstuk met meer tekst duwt dan niets omhoog. */
  .js .tour-copy {
    align-self: start;
    padding-top: max(0px, calc((var(--phone) * 2.174 - 540px) / 2));
  }

  .js .tour .chapters {
    display: block;
  }

  .js .tour .chapter {
    position: relative;
    padding: 4px 0 4px 22px;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .js .tour .chapter + .chapter {
    margin-top: 10px;
  }

  /* Het lijntje links: grijs, en bij het actieve hoofdstuk vult het zich terwijl je scrolt. */
  .js .tour .chapter::before,
  .js .tour .chapter::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--hairline);
  }

  .js .tour .chapter::after {
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
  }

  .js .tour .chapter.active::after {
    transform: scaleY(var(--fill, 0));
  }

  .js .tour .chapter .kicker {
    display: none;
  }

  .js .tour .chapter h3 {
    font-size: 21px;
    color: var(--ink-2);
    transition: color 300ms ease;
  }

  .js .tour .chapter.active h3,
  .js .tour .chapter-btn:hover {
    color: var(--ink);
  }

  /* Openklappen: van 0fr naar 1fr, zodat de hoogte vloeiend meegroeit. De tekst blijft in de
     pagina staan (niet verborgen), zodat een schermlezer alle hoofdstukken voorleest. */
  .js .tour .chapter-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 450ms var(--ease-ios), opacity 300ms ease;
  }

  .js .tour .chapter-body > div {
    overflow: hidden;
  }

  .js .tour .chapter.active .chapter-body {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .js .tour .peek {
    display: none;
  }

  .js .stage {
    display: block;
  }

  .js .stage .frame {
    position: relative;
    width: var(--phone);
    aspect-ratio: 1206 / 2622;
  }

  /* Het oude en het nieuwe scherm smelten samen (vervagen en een klein beetje schalen). */
  .js .stage .screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-ios);
  }

  .js .stage .screen.active {
    opacity: 1;
    transform: none;
  }

  .fx.js .stage .screen {
    filter: blur(4px);
    transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-ios), filter 500ms var(--ease-out);
  }

  .fx.js .stage .screen.active {
    filter: none;
  }

  .js .stage .screen img {
    box-shadow: 0 0 0 1px var(--ring), var(--shadow);
  }
}

/* ── Koppelingen: logo's zoals app-iconen op een beginscherm ── */

.logos {
  margin-top: 36px;
}

.group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

.logos ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 20px 8px;
  max-width: 920px;
}

.logos li {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 13px;
  text-align: center;
}

.tile {
  width: 56px;
  height: 56px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--ring);
}

/* Een koppeling zonder eigen logo op de site (Apple Health: het icoon van Apple mag hier niet). */
.tile.neutral {
  display: grid;
  place-items: center;
  background: var(--cell);
  color: var(--ink-2);
}

.tile.neutral svg {
  width: 30px;
  height: 30px;
}

/* ── Prijs: maandelijks, jaarlijks (uitgelicht) en wat erin zit ── */

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.plan,
.included {
  padding: 28px;
}

.plan {
  display: flex;
  flex-direction: column;
}

.plan.best {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.plan-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}

.amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px;
}

.amount strong {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.amount span {
  color: var(--ink-2);
}

.plan-note {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 15px;
}

.included ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.included li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
}

.included svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent);
}

.price-foot {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.price-foot .fine {
  max-width: 46em;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Breed scherm: de twee abonnementen naast elkaar, wat erin zit eronder in drie kolommen. */
@media (min-width: 700px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .included {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .included ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
  }
}

/* ── Vragen (de FAQ) ── */

.faq {
  margin: 32px 0 0;
  max-width: 760px;
  background: var(--cell);
  border-radius: 14px;
}

.section:not(.grouped) .faq,
.doc .faq {
  background: var(--cell-on-paper);
}

.faq details {
  border-top: 1px solid var(--hairline);
  margin-left: 16px;
}

.faq details:first-child {
  border-top: 0;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 16px 15px 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform 250ms var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(4px) rotate(225deg);
}

.faq details > div {
  padding: 0 16px 18px 0;
  color: var(--ink-2);
}

.faq details > div p + p,
.faq details > div p + ul {
  margin-top: 10px;
}

/* Zacht openklappen waar de browser het kan (interpolate-size, ::details-content). */
@supports (interpolate-size: allow-keywords) {
  .faq {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 300ms var(--ease-ios), content-visibility 300ms allow-discrete;
  }

  .faq details[open]::details-content {
    height: auto;
  }
}

/* ── Slot ── */

.closing {
  padding: 112px 0 120px;
  text-align: center;
}

.closing h2 {
  margin: 0 auto;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 14em;
}

.closing .listing {
  justify-content: center;
  margin-top: 40px;
  text-align: left;
}

.closing .price-line {
  margin-top: 14px;
}

/* ── Voet ── */

.foot {
  padding: 40px 0 56px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-2);
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-2);
}

@media (pointer: coarse) {
  .foot a {
    min-height: 44px;
  }
}

/* ── Documenten: FAQ, privacy, terms ── */

.doc {
  max-width: 760px;
  padding-top: 56px;
  padding-bottom: 96px;
}

.doc h1 {
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.doc .updated {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
}

.doc .summary {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.45;
}

.doc h2 {
  margin-top: 56px;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.doc h3 {
  margin-top: 28px;
  font-size: 19px;
  letter-spacing: -0.015em;
}

.doc p,
.doc ul,
.doc ol,
.doc table {
  margin-top: 12px;
}

.doc ul,
.doc ol {
  padding-left: 22px;
}

.doc li + li {
  margin-top: 6px;
}

.doc .faq {
  margin-top: 16px;
}

.doc .faq ul {
  margin-top: 8px;
}

.doc .jump {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.doc .jump li + li {
  margin-top: 0;
}

.doc .jump a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cell-on-paper);
  color: var(--ink);
  font-size: 15px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-top: 1px solid var(--hairline);
}

.doc th {
  font-weight: 600;
}

/* Op een telefoon: elke rij onder elkaar in plaats van drie smalle kolommen. */
@media (max-width: 600px) {
  .doc thead {
    display: none;
  }

  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
  }

  .doc tr {
    padding: 12px 0;
    border-top: 1px solid var(--hairline);
  }

  .doc td {
    padding: 2px 0;
    border-top: 0;
  }

  .doc td:first-child {
    font-weight: 600;
  }

  .doc td:last-child {
    color: var(--ink-2);
  }
}

/* ── 404 ── */

.lost {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  padding: 80px var(--gutter);
}

.lost h1 {
  font-size: 40px;
  letter-spacing: -0.03em;
}

.lost p {
  color: var(--ink-2);
}

/* ── Beperk beweging: geen verschuivingen, enkel vervagen ── */

@keyframes fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .rise,
  .duo .phone {
    animation: none;
  }

  .js .panel.enter,
  .qa.asking .me,
  .qa.answering .says {
    animation-name: fade;
    animation-duration: 300ms;
  }

  .js .stage .screen,
  .js .shots .screen {
    transform: none;
  }

  .typing i {
    animation: none;
  }

  .js .tour .chapter-body {
    transition: opacity 200ms ease;
  }

  .tour-dots i,
  .js .tour .chapter::after {
    transition: none;
  }
}

/* ═══ TEST (oktober 2026): animaties bij het scrollen en nieuwe kaarten ═══════════════════════
   Werkt enkel met <main class="motion"> (build.py: TEST = True); zonder die klasse doet niets
   hieronder iets. site.js (stap 6) zet html.reveal en geeft elk item .in zodra het in beeld komt.
   Zonder JavaScript of met "beperk beweging" staat alles er gewoon (met beperk beweging: enkel een
   korte vervaging). Terugzetten: TEST = False in build.py en opnieuw bouwen, of dit blok weg. */

/* 1. Het vaste patroon: titel, intro en kaarten komen één voor één omhoog (60 ms na elkaar). */
.reveal .motion .rv {
  transition: opacity 550ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal .motion .rv:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}

/* Met vervaging, waar het toestel het vlot aankan (site.js zet html.fx; nooit met beperk beweging). */
.fx.reveal .motion .rv {
  transition: opacity 550ms var(--ease-out), transform 700ms var(--ease-out), filter 550ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.fx.reveal .motion .rv:not(.in) {
  filter: blur(4px);
}

/* Binnen een kaart: het pictogram springt erin, het beeld schuift na de kaart omhoog. */
.reveal .motion .rv .glyph,
.reveal .motion .rv .well,
.reveal .motion .rv .num,
.reveal .motion .rv .peek .screen {
  transition: opacity 450ms var(--ease-out), transform 600ms cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 180ms);
}

.reveal .motion .rv .well,
.reveal .motion .rv .peek .screen {
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 260ms);
}

.reveal .motion .rv:not(.in) .glyph,
.reveal .motion .rv:not(.in) .num {
  opacity: 0;
  transform: scale(0.5);
}

.reveal .motion .rv:not(.in) .well {
  opacity: 0;
  transform: translateY(24px);
}

/* Het coachscherm en de telefoon van "Built for how you ride" springen licht naar voren. */
.reveal .motion .chat.rv:not(.in),
.reveal .motion .shots.rv:not(.in) {
  transform: translateY(24px) scale(0.96);
}

.reveal .motion .logos li.rv {
  transition-delay: calc(var(--i, 0) * 35ms);
}

/* Wat al in beeld stond bij het laden: meteen, zonder beweging. */
.reveal .motion .instant,
.reveal .motion .instant * {
  transition: none !important;
}

/* 2. Wetenschap: de grafieken bouwen zich op. */
.reveal .motion .bars li span {
  transform-origin: bottom;
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(200ms + var(--b, 0) * 70ms);
}

.reveal .motion .science > li:not(.in) .bars li span {
  transform: scaleY(0.04);
}

.reveal .motion .pmc svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1600ms cubic-bezier(0.65, 0, 0.35, 1) 250ms;
}

.reveal .motion .science > li:not(.in) .pmc svg {
  clip-path: inset(0 100% 0 0);
}

/* De rit tekent zich van links naar rechts, de pinnen vallen één voor één op hun plaats; de dagen
   bouwen zich op: eerst je rustmetabolisme, dan je dagelijkse activiteit, dan je training. */
.reveal .motion .ride-svg .profile {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}

.reveal .motion .ride-svg .area {
  transition: opacity 900ms ease 700ms;
}

.reveal .motion .ride-svg .pin {
  transition: opacity 300ms ease, transform 500ms cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(450ms + var(--m, 0) * 180ms);
}

.reveal .motion .science > li:not(.in) .ride-svg .profile {
  stroke-dashoffset: 1;
}

.reveal .motion .science > li:not(.in) .ride-svg .area {
  opacity: 0;
}

.reveal .motion .science > li:not(.in) .ride-svg .pin {
  opacity: 0;
  transform: translateY(-10px);
}

.reveal .motion .energy2 .col span {
  transition: transform 600ms var(--ease-out);
}

.reveal .motion .energy2 .col .resting {
  transition-delay: 200ms;
}

.reveal .motion .energy2 .col .daily {
  transition-delay: 550ms;
}

.reveal .motion .energy2 .col .training {
  transition-delay: 900ms;
}

.reveal .motion .science > li:not(.in) .energy2 .col span {
  transform: scaleY(0);
}

/* Wetenschap: de eerste kaart breed, met een grotere grafiek (laptop). */
@media (min-width: 980px) {
  .motion .science {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .motion .science > li:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 44px;
    align-items: start;
  }

  .motion .science > li:first-child .viz {
    grid-row: 1 / span 3;
    height: 250px;
  }

  .motion .science > li:first-child .bars ol {
    height: 180px;
  }

  .motion .science > li:first-child h3 {
    margin-top: 6px;
    font-size: 26px;
  }
}

@media (min-width: 760px) and (max-width: 979px) {
  .motion .science {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 3. Sound familiar?: de sessie verschuift, en de vorm schuift naar "Balanced". */
.motion .mini .was .what {
  position: relative;
  flex: none;
  text-decoration: none;
}

.motion .mini .was .what::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
}

.reveal .motion .mini .was .what::after {
  transition: transform 500ms var(--ease-out) 400ms;
}

.reveal .motion .bento > li:not(.in) .mini .was .what::after {
  transform: scaleX(0);
}

.reveal .motion .mini .now {
  transition: opacity 450ms var(--ease-out) 800ms, transform 600ms var(--ease-out) 800ms;
}

.reveal .motion .bento > li:not(.in) .mini .now {
  opacity: 0;
  transform: translateY(10px);
}

.reveal .motion .mini .pill {
  transition: opacity 300ms ease 1200ms, transform 450ms cubic-bezier(0.34, 1.4, 0.64, 1) 1200ms;
}

.reveal .motion .bento > li:not(.in) .mini .pill {
  opacity: 0;
  transform: scale(0.8);
}

.reveal .motion .mini .scale i {
  transition: background-color 400ms ease;
}

.reveal .motion .mini .scale .on {
  transition-delay: 550ms;
}

.reveal .motion .bento > li:not(.in) .mini .scale .on {
  background: var(--hairline);
}

/* 4. It notices: in zigzag, en je vraag, het antwoord en het stuk app komen na elkaar. */
@media (min-width: 900px) {
  .motion .insight:nth-child(even) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .motion .insight:nth-child(even) .insight-text {
    order: 2;
  }

  .motion .insight:nth-child(even) .well {
    order: 1;
  }
}

.reveal .motion .insight .asked {
  transition: opacity 400ms var(--ease-out) 150ms, transform 500ms var(--ease-out) 150ms;
}

.reveal .motion .insight .answer {
  transition: opacity 500ms var(--ease-out) 450ms, transform 600ms var(--ease-out) 450ms;
}

.reveal .motion .insight .well {
  transition: opacity 500ms var(--ease-out) 300ms, transform 700ms var(--ease-out) 300ms;
}

.reveal .motion .insight:not(.in) .asked {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

.reveal .motion .insight:not(.in) .answer,
.reveal .motion .insight:not(.in) .well {
  opacity: 0;
  transform: translateY(12px);
}

@media (min-width: 900px) {
  .reveal .motion .insight:not(.in) .well {
    transform: translateX(24px);
  }

  .reveal .motion .insight:nth-child(even):not(.in) .well {
    transform: translateX(-24px);
  }
}

/* 5. Make it yours: een lijst zoals Instellingen in de app, en het gesprekje speelt af. */
.motion .settings-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-radius: 22px;
  background: var(--cell-on-paper);
}

.motion .settings-list li {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
}

.motion .settings-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 66px;
  right: 0;
  height: 1px;
  background: var(--hairline);
}

.motion .settings-list .glyph {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.motion .settings-list .glyph svg {
  width: 19px;
  height: 19px;
}

.motion .settings-list h3 {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.motion .settings-list p {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
}

.motion .settings-list .value {
  color: var(--ink-2);
  font-size: 16px;
  text-align: right;
}

@media (max-width: 520px) {
  .motion .settings-list li {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
  }

  .motion .settings-list .value {
    grid-column: 2;
    text-align: left;
    font-size: 15px;
    color: var(--accent);
  }
}

.reveal .motion .told .me-bubble {
  transition: opacity 400ms var(--ease-out) 200ms, transform 500ms var(--ease-out) 200ms;
}

.reveal .motion .told .coach-says {
  transition: opacity 500ms var(--ease-out) 750ms, transform 600ms var(--ease-out) 750ms;
}

.reveal .motion .told .memory {
  transition: opacity 400ms ease 1300ms, transform 500ms cubic-bezier(0.34, 1.4, 0.64, 1) 1300ms, box-shadow 1200ms ease 1700ms;
}

.reveal .motion .told:not(.in) .me-bubble {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

.reveal .motion .told:not(.in) .coach-says {
  opacity: 0;
  transform: translateY(10px);
}

.reveal .motion .told:not(.in) .memory {
  opacity: 0;
  transform: scale(0.94);
  box-shadow: 0 0 0 3px var(--accent);
}

/* 6. Stappen: een tijdlijn 1 — 2 — 3 boven de kaarten, en de schermen komen van onderen. */
.motion .step-track {
  display: none;
}

@media (min-width: 860px) {
  .motion .step-track {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    padding: 0 calc((100% - 32px) / 6 - 16px);
  }

  .motion .step-track span {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 16px;
  }

  .motion .step-track i {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform-origin: left;
  }

  .motion .steps {
    margin-top: 20px;
  }

  .motion .steps .num {
    display: none;
  }

  .motion .steps h3 {
    margin-top: 0;
  }

  .reveal .motion .step-track span {
    transition: opacity 300ms ease, transform 450ms cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .reveal .motion .step-track span:nth-child(3) {
    transition-delay: 450ms;
  }

  .reveal .motion .step-track span:nth-child(5) {
    transition-delay: 900ms;
  }

  .reveal .motion .step-track i {
    transition: transform 450ms var(--ease-out) 150ms;
  }

  .reveal .motion .step-track i:nth-child(4) {
    transition-delay: 600ms;
  }

  .reveal .motion .step-track:not(.in) span {
    opacity: 0;
    transform: scale(0.6);
  }

  .reveal .motion .step-track:not(.in) i {
    transform: scaleX(0);
  }
}

.reveal .motion .steps .peek .screen {
  transition: transform 800ms var(--ease-out) 250ms, opacity 500ms ease 250ms;
}

.reveal .motion .steps > li:not(.in) .peek .screen {
  opacity: 0;
  transform: translateY(60px);
}

/* 7. Prijzen: jaarlijks is de hoofdkeuze. */
.motion .plan.best {
  background: color-mix(in srgb, var(--accent) 8%, var(--cell-on-paper));
  box-shadow: inset 0 0 0 2px var(--accent), 0 18px 44px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Op de blauwe tint is het gewone grijs te licht (4,06:1): iets donkerder, zodat het 4,5:1 haalt. */
.motion .plan.best .amount span,
.motion .plan.best .plan-note {
  color: color-mix(in srgb, var(--ink-2) 55%, var(--ink));
}

/* 8. Slot: de tagline woord voor woord. */
.reveal .motion .closing h2 .w {
  display: inline-block;
  transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 45ms);
}

.reveal .motion .closing h2:not(.in) .w {
  opacity: 0;
  transform: translateY(0.4em);
}

.fx.reveal .motion .closing h2 .w {
  transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out), filter 500ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 45ms);
}

.fx.reveal .motion .closing h2:not(.in) .w {
  filter: blur(6px);
}

/* Beperk beweging: dezelfde animaties, maar zachter: 8 px in plaats van 20, geen sprongen of schalen.
   (Op Windows en Android staat dit vaak aan; zonder animaties leek de site er dan stil en trager.) */
@media (prefers-reduced-motion: reduce) {
  .reveal .motion .rv:not(.in),
  .reveal .motion .chat.rv:not(.in),
  .reveal .motion .shots.rv:not(.in) {
    transform: translateY(8px);
  }

  .reveal .motion .rv:not(.in) .glyph,
  .reveal .motion .rv:not(.in) .num,
  .reveal .motion .rv:not(.in) .well {
    transform: none;
  }

  .reveal .motion .closing h2:not(.in) .w {
    transform: translateY(0.12em);
  }

  .reveal .motion .rv .glyph,
  .reveal .motion .rv .num,
  .reveal .motion .mini .pill,
  .reveal .motion .told .memory,
  .reveal .motion .ride-svg .pin {
    transition-timing-function: var(--ease-out) !important;
  }
}