/* ==========================================================================
   Uvolve — website
   Eén schreefloze familie, tekst rechtstreeks op de achtergrond, teal als
   enige accent. Alles loopt op tokens, dus de donkere modus is een tokenruil
   en geen tweede stylesheet.
   ========================================================================== */

:root {
  /* merk — rechtstreeks uit het logo bemonsterd */
  --teal-700: #016c6f;
  --teal-600: #018487;
  --teal:     #019295;
  --teal-300: #5cc0c2;
  --teal-50:  #eaf7f7;
  /* Het merkteal is het grafische accent. Voor tekst en knopvlakken
     is het te licht (3,8:1 op wit), dus daar staat een donkere variant. */
  --teal-ink: #016c6f;

  /* de enige kleur naast teal: alleen voor formulierfouten */
  --err:    #b3261e;
  --err-bg: rgba(179, 38, 30, 0.08);

  /* vlakken en inkt */
  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;
  --ink:       #1d1d1f;
  --ink-2:     #59595e;
  --ink-3:     #6e6e73;
  --hairline:  rgba(0, 0, 0, 0.10);
  --hairline-2: rgba(0, 0, 0, 0.055);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.10);
  --nav-bg:    rgba(255, 255, 255, 0.72);
  --field:     #ffffff;

  /* altijd donker: de Watch- en tester-sectie houden deze in beide schema's */
  --night:      #0a0b0c;
  --night-2:    #16181b;
  --night-ink:  #f5f5f7;
  --night-ink-2: #9a9aa0;
  --night-line: rgba(255, 255, 255, 0.14);

  --fig-base:   rgba(0, 0, 0, 0.05);
  --fig-muscle: rgba(0, 0, 0, 0.13);

  /* maat en ritme */
  --maxw:   1080px;
  --gutter: 24px;
  --pad-y:  clamp(84px, 11vw, 168px);
  --measure: 34ch;              /* koppen */
  --measure-body: 65ch;         /* bodytekst, ~65 tekens zoals gevraagd */

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 30px;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Eén familie. SF is al op elk toestel waar Uvolve op draait aanwezig, dus
     geen webfont: nul netwerkverzoeken, nul layout shift, geen FOUT. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* typeschaal — duidelijke sprongen, strakke letterafstand bovenaan */
  --fs-display: clamp(2.25rem, 7.4vw, 5rem);
  --fs-h2:      clamp(1.75rem, 4.6vw, 3.15rem);
  --fs-h3:      clamp(1.2rem, 1.9vw, 1.5rem);
  --fs-lede:    clamp(1.1rem, 1.45vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #000000;
    --bg-alt:    #0c0c0e;
    --ink:       #f5f5f7;
    --ink-2:     #a1a1a6;
    --ink-3:     #86868b;
    --hairline:  rgba(255, 255, 255, 0.14);
    --hairline-2: rgba(255, 255, 255, 0.07);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);
    --nav-bg:    rgba(10, 10, 12, 0.72);
    --field:     #131315;
    --teal-50:   rgba(1, 146, 149, 0.16);
    --teal:      #2fb8bb;
    --teal-ink:  #2fb8bb;
    --teal-600:  #3ac4c7;
    --teal-700:  #8ad6d8;
    --fig-base:   rgba(255, 255, 255, 0.07);
    --fig-muscle: rgba(255, 255, 255, 0.19);
    --err:        #ff8a80;
    --err-bg:     rgba(255, 138, 128, 0.12);
  }
}

:root[data-theme="dark"] {
  --bg: #000000; --bg-alt: #0c0c0e; --ink: #f5f5f7; --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --hairline: rgba(255,255,255,0.14); --hairline-2: rgba(255,255,255,0.07);
  --nav-bg: rgba(10,10,12,0.72); --field: #131315; --teal: #2fb8bb;
  --teal-ink: #2fb8bb;
  --teal-50: rgba(1,146,149,0.16); --teal-600: #3ac4c7; --teal-700: #8ad6d8;
  --shadow: 0 2px 8px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.6);
  --fig-base: rgba(255,255,255,0.07); --fig-muscle: rgba(255,255,255,0.19);
  --err: #ff8a80; --err-bg: rgba(255,138,128,0.12);
}

/* ------------------------------------------------------------------ basis */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--teal-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-size: var(--fs-small);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ----------------------------------------------------------- typografie */

.display {
  font-size: var(--fs-display);
  line-height: 0.99;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: var(--measure);
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.07;
  letter-spacing: -0.028em;
  max-width: var(--measure);
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.022em;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure-body);
  letter-spacing: -0.014em;
}

.body { max-width: var(--measure-body); line-height: 1.72; color: var(--ink-2); }
.body + .body { margin-top: 1.15em; }
.body strong, .body b { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 20px;
}

.note { font-size: var(--fs-small); color: var(--ink-3); max-width: var(--measure-body); }

.disclaimer {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: var(--measure-body);
  padding-top: 22px;
  border-top: 1px solid var(--hairline-2);
  margin-top: clamp(40px, 5vw, 64px);
}

/* ------------------------------------------------------------- structuur */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: 760px; margin-inline: auto; }

.section { padding-block: var(--pad-y); position: relative; }
.section-alt { background: var(--bg-alt); }

/* De twee donkere accenten. Ze houden hun kleur in beide schema's. */
.dark {
  background: var(--night);
  color: var(--night-ink);
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --ink-3: var(--night-ink-2);
  --hairline: var(--night-line);
  --hairline-2: rgba(255, 255, 255, 0.07);
  --teal: var(--teal-300);
  --teal-ink: var(--teal-300);
  --field: rgba(255, 255, 255, 0.06);
}

.centered { text-align: center; }
.centered .display,
.centered .h2 { margin-inline: auto; }
.centered .lede,
.centered .note { margin-inline: auto; }

.stack > * + * { margin-top: var(--gap, 24px); }

.rule { border: 0; border-top: 1px solid var(--hairline-2); margin: 0; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--hairline-2); }

.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 22px; height: 22px; }
.brand .word { height: 13px; width: auto; }

/* Het menu wordt naar rechts geduwd, zodat de knop uitlijnt met de
   rechterrand van de inhoud eronder en het merk met de linkerrand. */
.nav-inner > nav { margin-left: auto; }

.nav-links {
  display: flex; gap: 26px; list-style: none;
  font-size: var(--fs-small);
}
/* Een menu-item breekt niet af: "Apple Watch" over twee regels maakt de balk
   hoger en leest als twee items. Past het geheel niet meer, dan gaat het naar
   het paneel — daar ligt de grens op 960 px. */
.nav-links li { white-space: nowrap; }
.nav-links a { color: var(--ink-2); letter-spacing: -0.01em; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-cta { flex: none; }

/* ------------------------------------------------------------- knoppen */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 980px;
  border: 1px solid transparent;
  /* Een <a> heeft geen eigen vlak, een <button> wel: zonder deze regel krijgt
     een knop het grijs van de browser in plaats van de achtergrond eronder. */
  background: none;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--teal-ink); color: #fff; }
.btn-primary:hover { background: var(--teal-600); }
.dark .btn-primary { background: var(--teal-300); color: #06282a; }
.dark .btn-primary:hover { background: #7fd3d5; }

.btn-ghost { border-color: var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); }

.btn-sm { padding: 8px 17px; font-size: 0.875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.centered .actions { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: 500;
}
.textlink::after { content: "→"; transition: transform 0.2s var(--ease); }
.textlink:hover { text-decoration: none; }
.textlink:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ hero */

.hero { padding-block: clamp(64px, 9vw, 120px) 0; text-align: center; }
.hero .display { margin-inline: auto; }
.hero .lede { margin: 22px auto 0; max-width: 46ch; }
.hero .actions { margin-top: 34px; justify-content: center; }
.hero .note { margin: 20px auto 0; }

/* -------------------------------------------- screenshots in een toestel */

/* De opname zit in een toestel dat hier getekend wordt: geen plaatje van een
   telefoon, maar een omlijsting van kleur en afronding, met de knoppen op de
   plek waar ze horen. Zo blijft het beeld scherp op elk scherm en weegt het
   niets extra. De statusbalk op de opnames is de echte. */

.shot {
  margin: 0;
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}

/* het kastje */
.device {
  display: block;
  position: relative;
  border-radius: var(--kast, 50px);
  padding: var(--rand-y, 2.7%) var(--rand, 2.7%);
  /* Een verloop over de diagonaal suggereert gefreesd metaal zonder dat er
     een foto aan te pas komt. */
  background: linear-gradient(145deg, #55555c 0%, #2b2b30 36%, #43434a 63%, #1f1f23 100%);
  box-shadow: var(--shadow);
}
/* De dunne lichte lijn binnenin is de rand van het glas tegen het kastje. */
.device::after {
  content: "";
  position: absolute;
  inset: var(--rand-y, 2.7%) var(--rand, 2.7%);
  border-radius: var(--glas, 42px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.device img {
  border-radius: var(--glas, 42px);
  box-shadow: none;
  background: #000;
}

/* de knoppen op de zijkant */
.device .keys { position: absolute; inset: 0; pointer-events: none; }
.device .keys i {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, #5c5c64, #2e2e34);
  border-radius: 2px;
}

/* ------------------------------------------------------------- telefoon */

/* iPhone 15: de kast is aan elke zijde ongeveer 2,7 % van de schermbreedte
   breder dan het scherm zelf. */
.shot-phone {
  max-width: 300px;
  --kast: clamp(32px, 4.2vw, 53px);
  --glas: clamp(26px, 3.4vw, 44px);
  --rand: 2.7%;
  --rand-y: 2.7%;
}
.hero-shot { margin-top: clamp(52px, 7vw, 92px); }
.hero-shot.shot-phone { max-width: clamp(232px, 26vw, 292px); }

/* Links de actieknop en de volumewip, rechts de zijknop. De maten staan in
   procenten van de hoogte, zodat ze meeschalen met het beeld. */
.shot-phone .keys i { width: 2px; }
.shot-phone .keys .k1 { left: -2px; top: 16.5%; height: 4.2%; }
.shot-phone .keys .k2 { left: -2px; top: 24%;   height: 7.5%; }
.shot-phone .keys .k3 { left: -2px; top: 33.5%; height: 7.5%; }
.shot-phone .keys .k4 {
  right: -2px; top: 26%; height: 12%;
  background: linear-gradient(270deg, #5c5c64, #2e2e34);
}

/* --------------------------------------------------------- Apple Watch */

/* Het kastje is veel ronder dan het scherm: dat is wat een horloge een
   horloge maakt. De kroon en de zijknop staan rechts, op hun echte hoogte. */
/* Apple Watch 45 mm: scherm 30,8 × 37,6 mm in een kast van 38 × 45 mm. Dat is
   aan de zijkanten 5,8 % van de schermbreedte erbij, en boven en onder 12 %.
   Die ongelijkheid ís het horloge: met een gelijke rand leest het als een
   klein tablet. */
.shot-watch {
  max-width: 228px;
  --kast: clamp(56px, 7vw, 84px);
  --glas: clamp(34px, 4.4vw, 53px);
  --rand: 5.8%;
  --rand-y: 12%;
}
.shot-watch .device {
  /* Lichter dan de telefoon: het scherm is hier zwart en de sectie eromheen
     ook, dus de kast moet zichzelf kunnen tonen. */
  background: linear-gradient(150deg, #74747e 0%, #3a3a41 34%, #5a5a64 62%, #2b2b31 100%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.shot-watch .keys .k1 {
  right: -6px; top: 33%; width: 7px; height: 13%;
  border-radius: 2px 4px 4px 2px;
  /* De ribbels van de kroon. */
  background: repeating-linear-gradient(0deg, #8a8a95 0 1.5px, #45454e 1.5px 3px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.shot-watch .keys .k2 {
  right: -4px; top: 52%; width: 4px; height: 10%;
  border-radius: 1px 3px 3px 1px;
  background: linear-gradient(270deg, #6b6b75, #3a3a41);
}
/* De aanzet van het bandje boven en onder: net genoeg om te laten zien dat
   het aan een pols hangt, zonder er een tekening van te maken. */
.shot-watch .device::before,
.shot-watch .band {
  content: "";
  position: absolute;
  left: 24%; right: 24%;
  height: 16px;
  background: linear-gradient(90deg, #303036, #45454d 30%, #2a2a2f);
}
.shot-watch .device::before { top: -16px; border-radius: 8px 8px 0 0; }
.shot-watch .band { bottom: -16px; border-radius: 0 0 8px 8px; }

.shot figcaption {
  margin-top: 16px; text-align: center;
  font-size: 0.875rem; color: var(--ink-3);
}

/* -------------------------------------------- split: tekst naast een beeld */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-flip .split-text { order: 2; }
  .split-flip .split-media { order: 1; }
}
.split-text > * + * { margin-top: 22px; }
.split-media { display: flex; justify-content: center; }

/* ------------------------------------------------- het mechanisme: trap */

.ladder {
  list-style: none;
  display: grid;
  gap: 26px;
  margin-top: clamp(48px, 6vw, 80px);
}

@media (min-width: 760px) {
  .ladder {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: clamp(8px, 2vw, 28px);
    align-items: end;
    min-height: 310px;
  }
}

.rung {
  position: relative;
  padding: 18px 0 0;
  border-top: 2px solid var(--hairline);
  display: grid;
  gap: 4px;
}
@media (min-width: 760px) {
  .rung { padding-top: 22px; }
  .rung-delta { position: absolute; top: -1.9em; left: 0; }
  /* Elke trede staat hoger dan de vorige: de trap ís de uitleg. */
  .rung-1 { margin-bottom: 0; }
  .rung-2 { margin-bottom: 72px; }
  .rung-3 { margin-bottom: 144px; }
  .rung-4 { margin-bottom: 72px; }
}

.rung.is-now { border-top-color: var(--teal); }
.rung.is-down { border-top-color: var(--hairline); }

.rung-kg {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rung.is-down .rung-kg { color: var(--ink-3); }

.rung-what {
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
  max-width: 22ch;
}

/* Smal scherm: de stap staat gewoon boven het gewicht. Pas vanaf 760px
   zweeft ze boven de streep, waar de trap zelf het verhaal vertelt. */
.rung-delta {
  order: -1;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.rung.is-down .rung-delta { color: var(--ink-3); }

.ladder-legend {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) { .ladder-legend { grid-template-columns: 1fr 1fr; gap: 28px 56px; } }
.ladder-legend p { max-width: 48ch; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.ladder-legend b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- spiergroepen */

.bodymap {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 860px) { .bodymap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

.figure-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Het hele mannetje is aanklikbaar, niet alleen de gemarkeerde spieren: een
   klik op de omtrek kiest de spier die er het dichtst bij ligt. */
.figure { width: min(240px, 68vw); height: auto; }
html.js .figure { cursor: pointer; }
.figure .base { fill: var(--fig-base); }
.figure .muscle {
  fill: var(--fig-muscle);
  cursor: pointer;
  transition: fill 0.2s var(--ease);
}
.figure .muscle:hover { fill: var(--teal-300); }
/* Staat ná :hover, zodat de gekozen spier vol blijft zolang je muis erop
   staat. Andersom leek een klik niets te doen. */
.figure .muscle.on,
.figure .muscle.on:hover { fill: var(--teal); }
.figure-hint { font-size: 0.8125rem; color: var(--ink-3); }

.muscle-out { min-height: 300px; }
.muscle-count {
  font-size: var(--fs-small); color: var(--ink-3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ex-list { list-style: none; margin-top: 24px; }
.ex-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: var(--fs-small);
}
.ex-list .eq { margin-left: auto; color: var(--ink-3); font-size: 0.8125rem; }

.muscle-picker {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
/* De negen spiergroepen staan alle negen in de HTML. Draait het script, dan
   toont de kiezer er één tegelijk; html.js staat in de <head>, dus er flitst
   niets. Draait het script niet, dan doen de knoppen niets en staan de negen
   groepen gewoon onder elkaar — ook prima om te lezen, en een crawler die geen
   JavaScript uitvoert ziet zo de hele bibliotheek. */
html.js .muscle-group { display: none; }
html.js .muscle-group.is-open { display: block; }
.muscle-group + .muscle-group { margin-top: clamp(32px, 4vw, 48px); }

html:not(.js) .muscle-picker,
html:not(.js) .figure-hint { display: none; }
html:not(.js) .figure,
html:not(.js) .figure .muscle { cursor: default; }
/* Met negen groepen onder elkaar wordt de rechterkolom lang; de figuur hoort
   dan bovenaan te blijven staan in plaats van in het midden te zweven. */
html:not(.js) .bodymap { align-items: start; }
.muscle-picker button {
  font: inherit; font-size: 0.8125rem;
  padding: 7px 14px;
  border-radius: 980px;
  border: 1px solid var(--hairline);
  background: none; color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.muscle-picker button:hover { color: var(--ink); border-color: var(--ink-3); }
.muscle-picker button[aria-pressed="true"] {
  color: var(--teal-ink); border-color: var(--teal-ink);
}

/* ------------------------------------------------------------ klinisch */

.clinical-grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (min-width: 900px) { .clinical-grid { grid-template-columns: 300px minmax(0, 1fr); } }

.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto;
  border-radius: var(--radius);
}
.portrait figcaption {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}
.portrait figcaption b { display: block; color: var(--ink); font-weight: 600; }

/* Genummerde regels, geen kaarten en geen iconen. */
.rules { list-style: none; counter-reset: r; margin-top: clamp(32px, 4vw, 48px); }
.rules li {
  counter-increment: r;
  padding: 26px 0;
  border-top: 1px solid var(--hairline-2);
  display: grid;
  gap: 8px;
  max-width: var(--measure-body);
}
.rules li::before {
  content: counter(r, decimal-leading-zero);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.rules h3 { font-size: 1.0625rem; letter-spacing: -0.016em; }
.rules p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.65; }

/* -------------------------------------------------------------- feiten */

.facts { list-style: none; display: grid; gap: 0; margin-top: clamp(32px, 4vw, 48px); }
.facts li {
  display: grid; gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline-2);
}
@media (min-width: 680px) {
  .facts li { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.facts dt, .facts .k { color: var(--ink-3); font-size: var(--fs-small); }
.facts .v { color: var(--ink); }

/* ------------------------------------------------------------- roadmap */

/* Eén doorlopende lijn van vandaag tot 2027. Geen kaarten en geen iconen:
   de lijn draagt de chronologie, de stip zegt in welke staat een fase is. */
.road {
  list-style: none;
  margin-top: clamp(44px, 5vw, 72px);
}

.road > li {
  position: relative;
  padding-left: 34px;
  padding-bottom: clamp(44px, 5vw, 68px);
  border-left: 1px solid var(--hairline);
}
/* De lijn stopt bij de laatste fase: de toekomst heeft geen eindstreep. */
.road > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.road > li::before {
  content: "";
  position: absolute;
  left: -6px; top: 4px;
  width: 11px; height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--hairline);
}
/* Gedaan: dicht. In de maak: open met een tealrand. Mijlpaal: dicht, met een
   halo. Daarna: open en grijs, zoals de lijn zelf. */
.road > .road-done::before { background: var(--teal); border-color: var(--teal); }
.road > .road-doing::before { border-color: var(--teal); }
.road > .road-mile::before {
  background: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 0 5px var(--teal-50);
}

.road-when {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.road-done .road-when,
.road-doing .road-when,
.road-mile .road-when { color: var(--teal-ink); }

.road-title {
  margin-top: 7px;
  font-size: var(--fs-h3);
  letter-spacing: -0.022em;
  line-height: 1.25;
  max-width: 24ch;
}

.road-note {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
}

.road-list {
  list-style: none;
  margin-top: 22px;
  max-width: var(--measure-body);
}
.road-list li {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.road-list b { color: var(--ink); font-weight: 600; }

/* Het vinkje is versiering: de kop van de fase zegt al dat dit klaar is. */
.road-done .road-list li::before {
  content: "✓";
  flex: none;
  color: var(--teal-ink);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* De lange lijst met wat er al in zit, mag op een breed scherm in twee
   kolommen; de korte lijsten blijven één kolom. */
@media (min-width: 760px) {
  .road-list.two {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 56px);
  }
}

/* De mijlpaal: de datum draagt hier de nadruk, niet een kader. */
.road-mile .road-when { font-size: 0.8125rem; }
.road-mile .road-title {
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 20ch;
}

.road-foot {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 26px;
  border-top: 1px solid var(--hairline-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ------------------------------------------------------------ formulier */

.form { margin-top: clamp(40px, 5vw, 60px); text-align: left; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-row + .form-row { margin-top: 20px; }

.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field .hint { font-size: 0.8125rem; color: var(--ink-3); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-ink); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.form-foot { margin-top: 28px; display: grid; gap: 16px; justify-items: start; }
.form-foot .note { margin-inline: 0; max-width: 52ch; }
.hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- FAQ */

.qa { margin-top: clamp(40px, 5vw, 64px); }
.qa article {
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--hairline-2);
  max-width: var(--measure-body);
}
.qa h2, .qa h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin-bottom: 12px;
  max-width: 30ch;
}
.qa p { color: var(--ink-2); line-height: 1.72; }
.qa p + p { margin-top: 0.9em; }

/* ------------------------------------------------- juridische pagina's */

/* Een opsomming binnen lopende tekst. De globale reset zet marge en padding
   op nul, dus een lijst in een tekst heeft haar eigen inspringing nodig. */
.list {
  list-style: disc;
  padding-left: 1.15em;
  margin-top: 16px;
  display: grid;
  gap: 10px;
  max-width: var(--measure-body);
  color: var(--ink-2);
}
.list li { line-height: 1.6; padding-left: 2px; }
.list li::marker { color: var(--ink-3); }
.list b { color: var(--ink); font-weight: 600; }

/* Doel naast rechtsgrond. Op een smal scherm staat de grond onder het doel,
   vanaf 620px ernaast; geen kader, enkel dezelfde haarlijn als elders. */
.legal-grid {
  display: grid;
  margin-top: 20px;
  max-width: var(--measure-body);
}
.legal-grid dt {
  padding: 16px 0 2px;
  border-top: 1px solid var(--hairline-2);
  color: var(--ink);
  line-height: 1.5;
}
.legal-grid dd {
  margin: 0;
  padding: 0 0 16px;
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}
@media (min-width: 620px) {
  .legal-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 32px; }
  .legal-grid dt { padding: 16px 0; }
  .legal-grid dd { padding: 16px 0; border-top: 1px solid var(--hairline-2); }
}

/* --------------------------------------------------------------- intro */

/* Speelt alleen als het inline script in de <head> html.intro heeft gezet:
   eerste bezoek, geen voorkeur voor minder beweging. Zonder JavaScript
   verschijnt de overlay nooit en is de pagina meteen leesbaar. */
#intro { display: none; }

html.intro #intro {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  animation: introOut 0.26s var(--ease) 0.74s both;
  pointer-events: none;
}
html.intro #intro .intro-mark {
  width: 64px; height: 64px;
  animation: introMark 0.46s var(--ease-out) both;
}
html.intro #intro .intro-word {
  width: 148px; height: auto;
  animation: introWord 0.36s var(--ease-out) 0.34s both;
}

@keyframes introMark {
  from { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px); }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; transform: none; }
}
@keyframes introWord {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}

/* -------------------------------------------------------------- reveal */

/* Alleen verbergen wanneer JavaScript draait. Zonder JavaScript staat alles
   er gewoon: html.js wordt in de <head> gezet, dus er is geen flits. */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
html.js .d1.in { transition-delay: 0.06s; }
html.js .d2.in { transition-delay: 0.12s; }
html.js .d3.in { transition-delay: 0.18s; }

/* ------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--hairline-2);
  padding-block: clamp(52px, 6vw, 76px) 36px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.foot-grid {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }
.foot-word { height: 14px; width: auto; margin-bottom: 14px; }
.foot h2 {
  font-size: 0.8125rem; font-weight: 600; color: var(--ink);
  letter-spacing: 0.02em; margin-bottom: 14px;
}
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------ kruimels */

.crumbs {
  font-size: 0.8125rem; color: var(--ink-3);
  padding-top: clamp(28px, 4vw, 40px);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hairline); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }

/* ------------------------------------------------- minder beweging / print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  #intro, html.intro #intro { display: none !important; }
  .btn:hover { transform: none; }
}

/* ----------------------------------------------------------- smalle nav */

/* De balk wisselt in twee stappen. Bij 1020 px gaan de links naar het paneel:
   de startpagina draagt er zeven, en die passen samen met het merk, de twee
   icoontjes en de knop niet meer op één regel. Bij 620 px verhuizen zoeken en
   het thema er achteraan, want dan is er ook voor die twee geen plaats. */

/* De startpagina draagt zeven items. Tussen 1020 en 1200 px worden de
   tussenruimtes krapper in plaats van de links te laten afbreken. */
@media (max-width: 1200px) {
  .nav-links { gap: 19px; }
  .nav-inner { gap: 16px; }
}

@media (max-width: 1020px) {
  html.js .nav-links { display: none; }

  /* Zonder JavaScript is er geen menuknop. Dan breekt de balk gewoon af naar
     twee rijen: merk en knop boven, de links eronder. */
  html:not(.js) .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: 10px;
    row-gap: 8px;
  }
  html:not(.js) .nav-inner > nav { flex-basis: 100%; order: 9; margin-left: 0; }
  html:not(.js) .nav-links { flex-wrap: wrap; gap: 6px 18px; font-size: 0.875rem; }
  html:not(.js) .nav-cta { margin-left: auto; order: 2; }
  .nav-inner { gap: 14px; }
  .nav-inner > nav { margin-left: 0; }
  .nav-cta { margin-left: auto; order: 5; }
  .nav-tools { order: 6; margin-left: 0; }
}

@media (max-width: 620px) {
  .nav-inner { gap: 12px; }
  /* Drie icoontjes naast de knop passen niet op een telefoon: zoeken en het
     thema staan vanaf hier als gewone regel in het paneel. */
  .nav-tools .search-btn, .nav-tools .theme-btn { display: none; }
}

/* Staan zoeken en het thema nog gewoon in de balk, dan hoeven ze niet nog eens
   in het paneel. */
@media (min-width: 621px) {
  .menu .menu-extra { display: none; }
}

/* ==========================================================================
   Onderdelen die JavaScript aanzet
   Alles hieronder hoort bij een knop of een paneel dat script.js plaatst.
   Zonder JavaScript bestaat de markup niet en is er dus ook niets te zien:
   de pagina blijft precies wat ze zonder deze sectie was.
   ========================================================================== */

/* ---------------------------------------------------- voortgangsbalk */

/* Ligt bovenop de navigatie, niet erin: de balk moet ook doorlopen wanneer
   de navigatie zelf een rand krijgt. */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ------------------------------------------------------ knoppen in de nav */

.nav-tools { display: flex; align-items: center; gap: 2px; flex: none; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--hairline-2); }
.icon-btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* De zon en de maan liggen over elkaar; alleen de stand van het thema
   bepaalt welke van de twee zichtbaar is. */
.icon-btn .i-moon { display: none; }
:root[data-theme="dark"] .icon-btn .i-sun { display: none; }
:root[data-theme="dark"] .icon-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .i-sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .i-moon { display: block; }
}

.menu-btn { display: none; }
@media (max-width: 1020px) { .menu-btn { display: inline-grid; } }

/* De twee streepjes worden een kruis wanneer het menu openstaat. */
.menu-btn .i-bar { transition: transform 0.24s var(--ease), opacity 0.16s var(--ease); transform-origin: center; }
.menu-btn[aria-expanded="true"] .i-bar-1 { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .i-bar-2 { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------ mobiel menu */

.menu {
  position: fixed;
  top: 60px; left: 0; right: 0;
  z-index: 98;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline-2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 8px var(--gutter) 26px;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s var(--ease), transform 0.26s var(--ease-out),
              visibility 0s linear 0.26s;
}
.menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.menu ul { list-style: none; }
.menu li + li { border-top: 1px solid var(--hairline-2); }
/* Zoeken en het thema zijn geen pagina's: ze staan onder een eigen streep. */
.menu ul + ul { margin-top: 2px; border-top: 1px solid var(--hairline); }

/* Alleen de regels in de lijst. De knop onderaan is een knop en moet de
   stijl van .btn houden, niet die van een menuregel. */
.menu li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px;
  color: var(--ink);
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}
.menu li a:hover { text-decoration: none; color: var(--teal-ink); }
.menu li a[aria-current="page"] { color: var(--teal-ink); }
.menu li a::after {
  content: "→";
  color: var(--ink-3);
  font-size: 0.9375rem;
  transition: transform 0.2s var(--ease);
}
.menu li a:hover::after { transform: translateX(3px); }
.menu > .btn { display: flex; width: 100%; margin-top: 22px; }

.menu-scrim {
  position: fixed; inset: 0;
  z-index: 97;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}
.menu-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Het menu schuift over de pagina; die mag er niet onder doorscrollen. */
html.menu-open, html.menu-open body { overflow: hidden; }

/* ----------------------------------------------------------------- zoeken */

.search[open] {
  /* Kop en voet houden hun hoogte, de resultaten krijgen de rest en schuiven
     daarbinnen. Zonder de rijmaten duwt een lange lijst de voet buiten beeld. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.search {
  width: min(640px, calc(100vw - 32px));
  max-height: min(600px, calc(100dvh - 96px));
  margin: clamp(56px, 10vh, 120px) auto auto;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.search::backdrop { background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(3px); }
.search[open] { animation: searchIn 0.22s var(--ease-out); }
@keyframes searchIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
}

.search-top {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline-2);
}
.search-top svg {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: var(--ink-3);
  stroke-width: 1.7; stroke-linecap: round;
}
.search-top input {
  flex: 1;
  font: inherit;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 18px 0;
  -webkit-appearance: none;
  appearance: none;
}
.search-top input:focus { outline: none; }
.search-top input::placeholder { color: var(--ink-3); }
.search-top input::-webkit-search-cancel-button { display: none; }

.search-esc {
  flex: none;
  font: inherit; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.search-esc:hover { color: var(--ink); border-color: var(--ink-3); }

.search-out { overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.search-out ul { list-style: none; }

.search-hit {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.search-hit:hover { text-decoration: none; background: var(--bg-alt); }
.search-hit.is-active { background: var(--teal-50); }
.search-hit .h {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.35;
}
.search-hit .x {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
  /* Twee regels context is genoeg om een treffer te herkennen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-hit .p {
  display: block;
  margin-top: 5px;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.search-hit mark {
  background: var(--teal-50);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
:root[data-theme="dark"] .search-hit mark,
.search-hit.is-active mark { background: transparent; color: var(--teal-ink); font-weight: 600; }

.search-empty, .search-tip {
  padding: 22px 12px 26px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: 1.6;
}
.search-empty b { color: var(--ink); font-weight: 600; }

.search-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 11px 18px;
  border-top: 1px solid var(--hairline-2);
  background: var(--bg-alt);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.search-foot kbd {
  font: inherit;
  font-size: 0.6875rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 4px;
}

/* De zoekknop toont op een breed scherm de sneltoets, op een smal niet. */
.search-key { display: none; }
@media (min-width: 900px) {
  .search-btn {
    /* Een raster met place-items zet twee kinderen onder elkaar; zodra de
       sneltoets ernaast moet, is dit een rij. */
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 34px;
    border-radius: 980px;
    padding: 0 12px 0 11px;
    gap: 7px;
    border: 1px solid var(--hairline);
  }
  .search-btn:hover { background: none; border-color: var(--ink-3); }
  .search-key {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
}

/* --------------------------------------------------------- terug naar boven */

.totop {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 95;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease-out),
              visibility 0s linear 0.24s, border-color 0.2s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.totop svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Zodra de cookiemelding er staat, schuift de knop erboven. */
.totop.is-lifted { bottom: calc(clamp(16px, 3vw, 28px) + var(--cookie-h, 0px)); }

/* ------------------------------------------------------------ cookiemelding */

.cookie {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 110;
  max-width: 560px;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.34s var(--ease-out);
}
.cookie.is-on { opacity: 1; transform: none; }
.cookie h2 {
  font-size: 1rem;
  letter-spacing: -0.018em;
  margin-bottom: 8px;
}
.cookie p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
}
.cookie .actions { margin-top: 18px; }
.cookie .btn-sm { padding: 9px 18px; }

/* --------------------------------------------------------------- kopiëren */

.copy {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: baseline;
  margin-left: 8px;
  padding: 3px 9px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 980px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.copy:hover { color: var(--ink); border-color: var(--ink-3); }
.copy svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.copy.is-done { color: var(--teal-ink); border-color: var(--teal-ink); }
.copy.is-done .i-copy { display: none; }
.copy .i-check { display: none; }
.copy.is-done .i-check { display: block; }

/* ---------------------------------------------------- meelopende sectiekop */

/* Op de lange pagina's blijft de kop van de paragraaf waar je in zit onder de
   navigatie hangen, zodat je in artikel 7 niet moet terugscrollen om te zien
   waar 7 over ging. */
.subhead {
  position: fixed;
  top: 60px; left: 0; right: 0;
  z-index: 96;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.22s var(--ease-out),
              visibility 0s linear 0.22s;
}
.subhead.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.subhead .wrap {
  display: flex; align-items: center; gap: 10px;
  height: 42px;
}
.subhead b {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.014em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Met een vaste balk erbij moet een anker verder van de bovenrand landen. */
html.has-subhead { scroll-padding-top: 122px; }

/* ------------------------------------------------- formulier: fout en goed */

.field-error {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--err);
}
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { border-color: var(--err); }
.field.is-bad input:focus,
.field.is-bad select:focus,
.field.is-bad textarea:focus { border-color: var(--err); }

.form-status {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: var(--measure-body);
}
.form-status[hidden] { display: none; }
.form-status b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.form-status.is-bad { border-color: var(--err); background: var(--err-bg); color: var(--ink-2); }
.form-status.is-bad b { color: var(--err); }
.form-status.is-good { border-color: var(--teal-ink); background: var(--teal-50); color: var(--ink-2); }
.form-status.is-good b { color: var(--teal-ink); }

/* De knop houdt zijn breedte tijdens het versturen, zodat de rij niet
   verspringt op het moment dat het label verandert. */
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.72; }
.btn .spin {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- beeld dat laadt */

/* Een schermafbeelding is zwaar; tot ze binnen is, staat er een rustig vlak
   in plaats van een gat. */
html.js .shot img[data-load] {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
html.js .shot img[data-load="done"] { opacity: 1; }
html.js .device:has(img[data-load="wait"])::before {
  content: "";
  position: absolute;
  inset: var(--rand, 8px);
  border-radius: var(--glas, 42px);
  z-index: 1;
  background: linear-gradient(100deg, var(--bg-alt) 30%, var(--hairline-2) 50%, var(--bg-alt) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s var(--ease) infinite;
}
@keyframes shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* ------------------------------------------------------- extra hover-staten */

/* Overal waar iets aanklikbaar is, moet de muis dat ook zien. De bestaande
   staten blijven; dit vult de plekken aan die er nog geen hadden. */

.shot img, .device { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
@media (hover: hover) and (min-width: 860px) {
  .split-media .shot:hover .device,
  .split-media .shot:hover > img,
  .hero-shot:hover .device { transform: translateY(-5px); }
}

/* De rijen in de oefeningenlijst en de roadmap lichten op onder de muis. */
.ex-list li,
.road-list li,
.facts li,
.legal-grid dt,
.legal-grid dd { transition: color 0.2s var(--ease); }
.ex-list li:hover { color: var(--ink); }
.ex-list li:hover .eq { color: var(--ink-2); }

.rules li { transition: border-color 0.25s var(--ease); }
.rules li:hover { border-top-color: var(--hairline); }

.qa article { transition: border-color 0.25s var(--ease); }
.qa article:hover { border-top-color: var(--hairline); }

/* Een lijn onder de voettekstlinks die uitschuift, in plaats van een
   onderstreping die er plots staat. */
.foot a, .crumbs a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.25s var(--ease), color 0.2s var(--ease);
}
.foot a:hover, .crumbs a:hover { text-decoration: none; background-size: 100% 1px; }

/* De trede onder de muis laat zien welke stap ze is. */
.rung { transition: border-top-color 0.25s var(--ease); }
@media (hover: hover) {
  .rung:hover { border-top-color: var(--teal); }
  .rung:hover .rung-kg { color: var(--ink); }
}

.brand img { transition: opacity 0.2s var(--ease); }
.brand:hover img { opacity: 0.7; }

.portrait img { transition: filter 0.4s var(--ease); }


/* Op een aanraakscherm bestaat zweven niet: daar mag niets bewegen. */
@media (hover: none) {
  .btn:hover { transform: none; }
  .totop:hover { transform: none; }
}

/* ==========================================================================
   Print
   Een uitgeprinte pagina is een document, geen scherm: geen navigatie, geen
   knoppen, geen schaduwen, en een adres achter elke link die de lezer op
   papier niet kan aanklikken.
   ========================================================================== */

@media print {
  /* Alles wat alleen op een scherm iets doet. */
  .nav, .subhead, .menu, .menu-scrim, .progress, .totop, .cookie,
  .search, .copy, #intro, .skip-link, .actions, .form, .muscle-picker,
  .figure-hint, .hero-shot, .search-btn {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* De hele pagina op tokens zetten die op papier kloppen, ook de twee
     secties die op het scherm altijd donker blijven. */
  :root, .dark {
    --bg: #fff; --bg-alt: #fff; --field: #fff;
    --ink: #000; --ink-2: #1a1a1a; --ink-3: #444;
    --night: #fff; --night-2: #fff; --night-ink: #000; --night-ink-2: #333;
    --hairline: #bbb; --hairline-2: #ddd; --night-line: #bbb;
    --teal: #000; --teal-ink: #000; --teal-300: #000; --teal-50: #eee;
    --shadow: none;
    --fig-base: #eee; --fig-muscle: #ccc;
  }

  .section { padding-block: 18pt; }
  .section-alt, .dark { background: #fff !important; }

  .display { font-size: 24pt; }
  .h2 { font-size: 17pt; }
  .h3, .road-title { font-size: 12.5pt; }
  .lede { font-size: 12pt; }

  /* Een kop hoort niet alleen onderaan een blad te staan. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .qa article, .rules li, .road > li, .facts li, .ex-list li, .shot {
    break-inside: avoid; page-break-inside: avoid;
  }

  .shot img, .portrait img {
    box-shadow: none !important;
    border: 1px solid #ddd;
    max-width: 260px;
  }

  /* Papier kent geen zweven en geen onthullen. */
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  * { transition: none !important; animation: none !important; }

  a { color: #000 !important; text-decoration: underline; }

  /* Het adres achter de link erbij, behalve bij ankers binnen de pagina en
     bij links waarvan de tekst het adres al is. */
  main a[href^="http"]::after,
  main a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
  main a[href^="/"]::after { content: " (uvolve.app" attr(href) ")"; }
  main a[href^="mailto:"]::after,
  main a[href^="#"]::after { content: ""; }

  .foot { border-top: 1px solid #ddd; }
  .foot-grid { display: block; }
  .foot > .wrap > .foot-grid > div + div { margin-top: 10pt; }
  .foot ul { display: block; }
  .foot li { display: inline; }
  .foot li + li::before { content: " · "; color: #888; }
  .foot a::after { content: "" !important; }

  @page { margin: 16mm 14mm; }
}