/* De rand van een kadertje in de balk. Per thema, want het palet is in beide
   richtingen even vlak en de doorzichtigheid die drie tegen een haalt
   verschilt. */
:root { --tab-rand: rgba(27,25,19,.47); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) { --tab-rand: rgba(237,231,218,.40); }
}
:root[data-thema="donker"] { --tab-rand: rgba(237,231,218,.40); }
/* Curabrein — de nieuwe opmaak, naast style.css.
 *
 * Waarom naast en niet in plaats van. `style.css` draagt op dit moment nog de
 * andere pagina's. Vervangen breekt er veertien terwijl er één beter wordt.
 * Dit blad zet er alleen zijn eigen delen bovenop en leunt voor de tokens, het
 * lettertype, het donkere thema, de kop en de voet op het eerste blad.
 *
 * Als elke pagina om is, gaat dit op in style.css en verdwijnt het verschil.
 *
 * Eén ding staat hier expres met vaste kleuren: alles onder `.echt`. Dat zijn
 * de nagebouwde schermen ín de telefoon, en die horen de app te tonen. Ze
 * mogen niet meekleuren met het thema van de website, want dan laten ze iets
 * zien dat de app niet is.
 */

/* ── de kop ──────────────────────────────────────────────────────────────
   De echte kop blijft staan, met zijn thema-knop, taalkiezer en menu voor op
   een telefoon. Hij krijgt alleen het gedrag van dit ontwerp: doorzichtig
   zolang je bovenaan bent, en pas een vlak zodra je begint te lezen. Een balk
   die er meteen staat, drukt de kop naar beneden voor niets. */
.site-head { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
/* Geen vaste hoogte en niets afsnijden. Bij dubbele tekstgrootte breekt de rij
   af naar twee regels, en dan moet de kop meegroeien in plaats van de tweede
   regel over de bladzijde te laten vallen. Expliciet, want dit is precies het
   soort ding dat je pas ziet als iemand met grote letters langskomt. */
.site-head, .site-head .head-row { height: auto; overflow: visible; }
.site-head.scrolled {
  background: var(--kop-vlak-vast);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line-2);
}
/* ═══════════════════════════════════════════════════════════ ONTWERP C ═══
   Gebouwd op wat professionele app-websites werkelijk doen, en niet op wat ik
   ervan dacht.

   Twee dingen die ik ervan overnam.

   1. De kop zegt éérst wat voor app dit is, in gewone woorden, en pas daarna
      wat je eraan hebt. Bearable, de directe concurrent, zet er letterlijk
      "Symptom & Mood Tracker App" boven en daaronder pas de belofte. Saai en
      het werkt: je weet binnen een seconde of dit voor jou is.

      Mijn vorige koppen begonnen met het gevoel en zeiden nergens wát het is.
      Mooi en nutteloos.

   2. Eén telefoon die blijft staan terwijl je scrolt, met een scherm dat
      meeverandert met de tekst ernaast. Dat is het patroon dat overal
      terugkomt, en het is wat "levendig" betekent zonder dat er iets knippert.

   De kleuren blijven zoals ze waren; daar zat het probleem niet.
   ═══════════════════════════════════════════════════════════════════════ */


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Het lettertype komt uit style.css. Hier nog eens `var(--letter)` zetten
     maakte de regel leeg, en omdat dit blad later komt won die leegte: de hele
     pagina viel terug op Times. */
  font-size: 1.06rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
/* `height: auto` hoort erbij, anders houdt een plaatje de hoogte uit
   zijn `height`-kenmerk terwijl de breedte wél meeschaalt. De metgezel
   werd daardoor honderddertig bij vijfhonderdtwaalf in plaats van
   honderddertig bij honderdvierenveertig: uitgerekt over het hele
   scherm. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.rand { width: min(74rem, calc(100vw - 3rem)); margin-inline: auto; }

/* ── de balk ─────────────────────────────────────────────────────────────
   Doorzichtig boven de kop, zonder rand en zonder vlak. Hij wordt pas een
   balk zodra je voorbij de kop scrolt; daarvoor moet hij niet in de weg
   staan. Dat is wat er mis was: hij stond er altijd als een strook, en dan
   is het eerste wat je ziet een menu in plaats van waar de app over gaat. */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-head.scrolled {
  /* Het token en niet de kleur. Hier stond de lichte papierkleur hard
     ingetypt, overgebleven uit het proefontwerp dat alleen een licht thema
     had. In het donkere thema werd de balk daardoor wit zodra je begon te
     scrollen, en dan is hij niet meer te lezen. Het token wisselt wel mee. */
  background: var(--kop-vlak-vast);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line-2);
}
.balk .rand { display: flex; align-items: center; gap: 1rem; height: 72px; }
.merk {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; color: var(--ink); text-decoration: none;
  letter-spacing: -.01em;
}
.merk img { width: 30px; height: 30px; border-radius: 8px; }
.balk .weg { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.balk .weg a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.balk .weg a:hover { color: var(--ink); }
@media (max-width: 46rem) { .balk .weg a.menu { display: none; } }

.pil {
  background: var(--forest); color: var(--paper);
  padding: .58rem 1.15rem; border-radius: 999px;
  font-size: .93rem; font-weight: 700; text-decoration: none;
}
.pil:hover { background: var(--forest-2); }

/* ── de kop ─────────────────────────────────────────────────────────────── */
.kop { padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 4.5rem); }
.kop .rand { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 58rem) { .kop .rand { grid-template-columns: 1.05fr .95fr; } }

/* Eerst wat voor app het is. In gewone woorden, zonder mooidoenerij: dit is
   de regel waaraan iemand in één seconde ziet of het over hem gaat. */
.soort {
  display: inline-block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(30,95,92,.09);
  padding: .4rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.032em;
}
.belofte {
  margin: 1.6rem 0 0;
  font-size: clamp(1.14rem, 1.9vw, 1.38rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34rem;
}
.doen { margin: 2.4rem 0 0; display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.prijs { font-size: .97rem; color: var(--ink-2); }
.prijs b { color: var(--ink); font-size: 1.3rem; }
.klein { margin-top: 1.1rem; font-size: .88rem; color: var(--ink-3); }

/* ── het toestel ─────────────────────────────────────────────────────────── */
.toestel {
  position: relative;
  width: min(310px, 76vw);
  margin-inline: auto;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(155deg,#34302A 0%,#17150F 38%,#0F0D09 62%,#2B2822 100%);
  box-shadow: 0 0 0 1px rgba(255,252,244,.14) inset,
              0 0 0 1px rgba(20,18,13,.5),
              0 36px 70px -30px rgba(27,25,19,.5);
}
.scherm {
  /* Zodat alles erin met de telefoon meeschaalt: op de startpagina is
     hij 288 breed, in de verkenner 318. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 412 / 892;
  border-radius: 34px;
  overflow: hidden;
  background: var(--paper);
}
/* Alleen de vellen die rechtstreeks in het scherm hangen.

   Zonder die `>` raakte deze regel ook de plaatjes bínnen een nagebouwd
   scherm: de metgezel kreeg hoogte nul en positie absoluut, en was dus
   nergens te zien. Twee keer gebeurd voor ik het doorhad, omdat er verder
   niets misging: het beeld was geladen, het stond alleen op nul pixels. */
.scherm > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.scherm > img.aan { opacity: 1; }

/* ── de wandeling: telefoon blijft staan, tekst schuift voorbij ──────────
   Dit is het patroon dat elke goede app-website gebruikt en dat ik nog niet
   had geprobeerd. Je ziet de app de hele tijd, en het scherm verandert mee
   met waar je over leest. Geen enkele animatie die om aandacht vraagt: het
   scherm wisselt en verder niets. */
.wandel { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--paper-2); }
.wandel .tweeluik { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 58rem) {
  .wandel .tweeluik { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .wandel .vast-kolom { position: sticky; top: 96px; }
}
.wandel .stap {
  padding: clamp(2.5rem, 7vw, 5rem) 0;
  border-top: 1px solid var(--line);
}
.wandel .stap:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 58rem) {
  .wandel .stap { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
}
.nummer {
  font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  color: var(--teal); display: block; margin-bottom: .9rem;
}
/* Het stuk dat het toestel op dit moment toont, krijgt een stip voor zijn
   nummer. Zonder teken is er niets dat zegt dat die twee bij elkaar horen, en
   dan lijkt het toestel uit zichzelf te wisselen. Geen kleurverschil in de
   tekst zelf: dat zou de andere drie stukken onder het leesbare halen. */
@media (min-width: 58rem) {
  .wandel .stap .nummer { position: relative; }
  .wandel .stap .nummer::before {
    content: ''; position: absolute; left: -1.15rem; top: .42em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--teal);
    opacity: 0; transform: scale(.4);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .wandel .stap.nu .nummer::before { opacity: 1; transform: none; }
}
.stap h3 { font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -.02em; line-height: 1.14; }
.stap p { margin-top: .9rem; color: var(--ink-2); }
.stap ul { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.stap li {
  padding-left: 1.4rem; position: relative;
  color: var(--ink-2); margin-bottom: .45rem;
}
.stap li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
}

/* Op een smal scherm heeft elke stap zijn eigen telefoon, want daar kan er
   niets blijven staan. */
.stap .los { display: block; margin: 1.8rem 0 0; }
@media (min-width: 58rem) { .stap .los { display: none; } }

.deel-kop { max-width: 40rem; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.opschrift {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 1.1rem;
}
h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.1; letter-spacing: -.028em; }
.deel-kop p { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.12rem; }

/* ── brede delen ─────────────────────────────────────────────────────────── */
.deel { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.deel.getint { background: var(--paper-2); }
/* Via het token, niet via de kleur: anders blijft deze band in het
   donkere thema even licht als in het lichte, terwijl alles eromheen wel
   meedraait. */
.deel.donker { background: var(--dark); color: var(--on-dark); }
.deel.donker h2, .deel.donker h3 { color: var(--on-dark); }
.deel.donker p { color: rgba(237,232,216,.74); }
.deel.donker .opschrift { color: var(--sage); }
.deel.donker .deel-kop p { color: rgba(237,232,216,.86); }

/* ── het overzicht: drie bladen naast elkaar ─────────────────────────────── */
.bladen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.7rem, 1.8vw, 1.4rem); }
.bladen img {
  border-radius: 4px;
  border: 1px solid var(--line-2);
  box-shadow: 0 26px 54px -30px rgba(27,25,19,.5);
  transition: transform .4s var(--ease);
}
.bladen a:hover img, .bladen img:hover { transform: translateY(-6px); }
.bladen-bij { margin-top: 1.2rem; font-size: .88rem; color: var(--ink-3); text-align: center; }
.deel.donker .bladen img { border-color: rgba(237,232,216,.14); }
.deel.donker .bladen-bij { color: rgba(237,232,216,.55); }

/* ── drie naast elkaar ───────────────────────────────────────────────────── */
.drie { display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); }
@media (min-width: 56rem) { .drie { grid-template-columns: repeat(3, 1fr); } }
.drie h3 { font-size: 1.24rem; margin-bottom: .55rem; letter-spacing: -.012em; }
.drie .nr {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: var(--teal); padding-bottom: .85rem; margin-bottom: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.deel.donker .drie .nr { color: var(--sage); border-bottom-color: rgba(237,232,216,.16); }

/* ── privé ───────────────────────────────────────────────────────────────── */
.prive-kop { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.prive-kop span { color: var(--sage); }
.bewijs { margin: 2.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
@media (min-width: 50rem) { .bewijs { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
/* De gewone stand is donker op licht; de donkere band draait hem om.
   Stond eerst alleen de omgekeerde stand er, want de lijst kwam alleen
   op een donkere band voor. */
.bewijs li { padding: 1.05rem 0; border-top: 1px solid var(--line); }
.bewijs b { display: block; color: var(--ink); margin-bottom: .2rem; }
.bewijs span { color: var(--ink-2); font-size: .97rem; }
.deel.donker .bewijs li { border-top-color: rgba(237,232,216,.16); }
.deel.donker .bewijs b { color: var(--on-dark); }
.deel.donker .bewijs span { color: rgba(237,232,216,.66); }

/* ── het eigen woord ─────────────────────────────────────────────────────── */
.woord p:first-of-type { font-size: 1.24rem; line-height: 1.55; color: var(--ink); }
.woord p { color: var(--ink-2); }

/* ── prijs ───────────────────────────────────────────────────────────────── */
.prijsvak {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(2rem, 5vw, 3.2rem);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (min-width: 52rem) { .prijsvak { grid-template-columns: auto 1fr; } }
.bedrag { font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.eenmalig { color: var(--ink-3); margin-top: .5rem; }
.streep { margin-top: 1.2rem; color: var(--ink-3); font-size: .95rem; }
.streep s { color: var(--ink-3); }
.krijgt { margin: 0; padding: 0; list-style: none; }
.krijgt li { padding: .55rem 0; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.krijgt li:first-child { border-top: 0; }
.krijgt b { color: var(--ink); }

/* ── vragen ──────────────────────────────────────────────────────────────── */
.vragen { max-width: 46rem; }
/* De kop naast de vragen zodra er ruimte is.
   Onder elkaar vulde dit blok tweeenzestig procent van de breedte en bleef er
   vierhonderdachtenveertig pixels leeg rechts, terwijl de secties eromheen wel
   tot de rand lopen. Dat leest als iets dat niet af is. Naast elkaar vult het
   blok zich en blijft de kop bij zijn eigen inhoud staan. */
@media (min-width: 62rem) {
  .rand:has(> .vragen) {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .rand:has(> .vragen) .deel-kop { margin-bottom: 0; }
  .rand:has(> .vragen) .vragen { max-width: none; }
  /* Het antwoord blijft op leesbreedte. Zonder deze grens liep het tot
     drieentachtig tekens per regel, en boven de vijfenzeventig wordt lezen
     zwaarder. */
  .rand:has(> .vragen) .vragen details p { max-width: 37.5rem; }
}
.vragen details {
  border-top: 1px solid var(--line);
  padding: 1.15rem 0;
}
.vragen details:last-of-type { border-bottom: 1px solid var(--line); }
.vragen summary {
  cursor: pointer; font-weight: 700; font-size: 1.08rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; color: var(--teal); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.vragen details[open] summary::after { content: '\2212'; }
.vragen details p { margin-top: .8rem; color: var(--ink-2); }

/* ── slot ────────────────────────────────────────────────────────────────── */
.slot-doen { text-align: center; }
.slot-doen h2 { margin-bottom: 1.2rem; }
.slot-doen .doen { justify-content: center; }
.voet {
  padding: 3rem 0 4rem; border-top: 1px solid var(--line);
  font-size: .89rem; color: var(--ink-3);
}
.voet p { margin-bottom: .7em; }

/* ── het levende scherm ──────────────────────────────────────────────────
   Het scherm Vandaag, nagebouwd. Geen schermafdruk: de metgezel ademt en het
   balkje loopt in, want dat is wat de app doet en dat is wat een bezoeker
   moet zien. Dezelfde kleuren als in de app.

   Alles ligt stil zodra het toestel om minder beweging vraagt; onderaan dit
   blok staat die regel. */
.echt {
  position: absolute; inset: 0;
  background: #ECE5D9;
  color: #1F1B14;
  padding: 5.55cqw 4.86cqw 0;
  /* 11 op een scherm van 288, net als voorheen. */
  font-size: 3.819cqw;
  line-height: 1.42;
  overflow: hidden;
  text-align: left;
}
.echt .rij { display: flex; align-items: center; gap: 8px; }
.echt .groet { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.echt .tekens { margin-left: auto; display: flex; gap: 10px; opacity: .55; }
.echt .teken { width: 13px; height: 13px; border: 1.4px solid #1F1B14; border-radius: 3px; }
.echt .teken.rond { border-radius: 50%; }
.echt .datum { color: #6B6455; font-size: 10.5px; margin-top: 2px; }

/* de metgezel, en zijn wolkje */
.echt .gezel { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; }
/* Het omhulsel ademt; de lagen erin knipperen. Stond de animatie op de
   plaatjes zelf, dan won hij van het knipperen: `.echt .gezel img` is
   specifieker dan `.knip .k-open`, en dan ademen alle drie de lagen en
   knippert er geen. */
.echt .gezel .knip { animation: ademen 5.4s ease-in-out infinite; transform-origin: 50% 88%; }
.echt .gezel .knip img { width: 100%; height: auto; }
.echt .wolk {
  flex: 1; background: #F7F3EA; border-radius: 12px; padding: 7px 9px;
  font-size: 10px; color: #55503F; box-shadow: 0 1px 2px rgba(31,27,20,.05);
  animation: opkomen .7s var(--ease) .5s both;
}
@keyframes ademen {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.035); }
}
@keyframes opkomen { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.echt .kopje {
  font-size: 8.5px; font-weight: 700; letter-spacing: .13em;
  color: #6B6455; margin: 14px 0 7px;
}
.echt .kaart {
  background: #F7F3EA; border-radius: 13px; padding: 11px 12px;
  box-shadow: 0 1px 2px rgba(31,27,20,.05);
}
.echt .kaart + .kaart { margin-top: 8px; }
.echt .klein { font-size: 10px; color: #6B6455; }
.echt .sterk { font-weight: 700; }
.echt .teal { color: #246160; font-weight: 700; }

/* het balkje dat inloopt: dit is wat Yenthe mooi vond, en terecht. Het laat
   in één beweging zien waar de app over gaat. */
.echt .balkje { height: 7px; border-radius: 99px; background: rgba(31,27,20,.09); margin-top: 9px; overflow: hidden; }
.echt .balkje i {
  display: block; height: 100%; width: 50%; border-radius: 99px;
  background: linear-gradient(90deg,#246160,#3d8280);
  transform-origin: left;
  animation: vullen 1.5s var(--ease) .7s both;
}
@keyframes vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.echt .knopje {
  margin-top: 9px; background: #E9D8B4; border-radius: 10px;
  text-align: center; padding: 8px; font-weight: 700; font-size: 10.5px;
}
.echt .post { display: flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 10px; border-top: 1px solid rgba(31,27,20,.07); }
.echt .post .rechtsop { margin-left: auto; color: #6B6455; }
.echt .stip { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid rgba(31,27,20,.3); }
.echt .viertal { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.echt .viertal div {
  background: #F7F3EA; border-radius: 11px; padding: 9px;
  font-size: 10px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(31,27,20,.05);
}
.echt .vervaag {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(rgba(236,229,217,0), #ECE5D9);
}

@media (prefers-reduced-motion: reduce) {
  .echt .gezel img, .echt .wolk, .echt .balkje i { animation: none; }
  .echt .balkje i { transform: none; }
}

/* ── het overzicht: één blad, drie delen ─────────────────────────────────
   Er stonden drie bladen naast elkaar en dat was onleesbaar: elk werd
   tweehonderd pixels breed en dan zie je grijze streepjes in plaats van
   tekst. Nu één blad op ware grootte, met knoppen eronder om te wisselen. */
.blad-vak { max-width: 640px; margin-inline: auto; }

/* ── voor de afspraak: de tekst links, het document rechts ────────────
   Onder elkaar was dit blok 1749 pixels hoog, bijna twee volle schermen, en
   zag je het document pas na het scrollen. Terwijl er naast de tekst en naast
   het document allebei 544 pixels leeg stonden: bijna de halve breedte, twee
   keer.

   Naast elkaar valt de hoogte van de tekst weg tegen die van het document in
   plaats van erbij op te tellen. 1304 pixels, en het document is er ook nog
   groter van geworden.

   Bovenaan uitgelijnd en niet gecentreerd. Dat kan omdat de tweede alinea een
   lijst van drie is: daarmee is de linkerkolom voor 86 procent gevuld, en dan
   hoeft er niets gecentreerd te worden om leegte te verbergen. */
@media (min-width: 62rem) {
  .rand:has(> .blad-vak) {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .rand:has(> .blad-vak) .deel-kop { margin-bottom: 0; max-width: none; }
  .rand:has(> .blad-vak) .blad-vak { max-width: none; }
  /* Gecentreerd kan onder een blok van 640 breed, maar in een kolom leest een
     gecentreerde zin van drie regels als een gedicht. */
  .rand:has(> .blad-vak) .blad-bij { text-align: left; }
}

/* De drie bladen als lijst. Zelfde bouw als .bewijs hierboven, want dat staat
   in dezelfde donkere band en twee lijsten op één bladzijde die verschillend
   zijn leest als een fout. */
.bladlijst { margin: 1.7rem 0 0; padding: 0; list-style: none; }
.bladlijst li {
  display: grid; grid-template-columns: 2.4rem 1fr;
  padding: .9rem 0; border-top: 1px solid var(--line);
}
.bladlijst b { font-size: .82rem; letter-spacing: .16em; color: var(--teal); }
.bladlijst span { color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
.slotzin { margin-top: 1.4rem; }
.deel.donker .bladlijst li { border-top-color: rgba(237,232,216,.16); }
.deel.donker .bladlijst b { color: var(--sage); }
.deel.donker .bladlijst span { color: rgba(237,232,216,.78); }
.blad-beeld {
  position: relative;
  aspect-ratio: 1200 / 1698;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.7);
}
.blad-beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .35s var(--ease);
}
.blad-beeld img.aan { opacity: 1; }
.blad-knoppen {
  display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem;
}
.blad-knoppen button {
  font: inherit; font-size: .9rem; font-weight: 700;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgba(237,232,216,.7);
  border: 1.5px solid rgba(237,232,216,.22);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.blad-knoppen button:hover { color: #EDE8D8; border-color: rgba(237,232,216,.5); }
.blad-knoppen button[aria-current="true"] {
  background: var(--sage); color: #232E1D; border-color: var(--sage);
}
.blad-bij { margin-top: 1.2rem; text-align: center; font-size: .92rem; color: rgba(237,232,216,.62); }

/* ── de ademoefening in de kop ───────────────────────────────────────────
   Geen schermafdruk maar het scherm zelf: dezelfde ring, hetzelfde ritme van
   vier tellen in en zes tellen uit als in de app. De maten staan in em zodat
   alles meeschaalt met de telefoon eromheen.

   Waarom dit in de kop staat en niet het startscherm: dat laatste komt
   verderop terug bij "wat het doet", en twee keer hetzelfde is één keer te
   veel. Bovendien zegt een oefening waarin niets geteld wordt meer over deze
   app dan een lijstje met knoppen. */
.adem {
  position: absolute; inset: 0;
  /* 14,76 op een scherm van 288, wat het was toen dit alleen op de
     startpagina stond. Nu hangt het aan de telefoon zelf. */
  font-size: 5.125cqw;
  display: flex; flex-direction: column; align-items: center;
  padding: 2.1em 1.1em 1.3em;
  background: #EAE4DA; color: #1B1913; text-align: center;
}
.adem-kop { align-self: flex-start; font-weight: 700; font-size: 1.05em; letter-spacing: -.02em; }
.adem-sub { margin-top: 1.1em; font-size: .72em; color: #55503F; }
.adem-sub b { color: #1E5F5C; }
.adem-vak { position: relative; width: 100%; flex: 1; display: grid; place-items: center; }
.adem-halo, .adem-ring {
  position: absolute; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%;
  width: 15.4em; height: 15.4em;
}
/* De buitenring staat stil en is de bovengrens: bij een volle inademing komt
   de binnenring er precies tegenaan. */
.adem-halo { border: .07em solid rgba(122,106,168,.34); }
.adem-ring {
  border: .16em solid #7A6AA8;
  background: radial-gradient(circle at 50% 45%, rgba(122,106,168,.11), rgba(122,106,168,0) 70%);
  animation: adem-ring 10s ease-in-out infinite;
}
/* De metgezel is twee tekeningen over elkaar: met zijn gewone mond en met het
   kleine ronde mondje dat de app hem bij het uitademen geeft. */
.adem-pal { position: relative; display: block; width: 8.4em; transform-origin: 50% 92%; animation: adem-pal 10s ease-in-out infinite; }
.adem-pal img { width: 100%; display: block; image-rendering: pixelated; }
.adem-pal .adem-uit { position: absolute; inset: 0; }
.adem-pal .adem-in  { animation: mond-in  10s steps(1, end) infinite; }
.adem-pal .adem-uit { animation: mond-uit 10s steps(1, end) infinite; }
@keyframes mond-in  { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes mond-uit { 0%, 39% { opacity: 0; } 40%, 100% { opacity: 1; } }
/* Vier tellen in, zes tellen uit. Niet symmetrisch, en dat hoort zo: een
   langere uitademing is het hele punt van dit ritme. */
@keyframes adem-ring { 0% { transform: scale(.72); } 40% { transform: scale(1); } 100% { transform: scale(.72); } }
@keyframes adem-pal {
  0%   { transform: translateY(1.5%)  scale(.97); }
  40%  { transform: translateY(-1.5%) scale(1.045); }
  100% { transform: translateY(1.5%)  scale(.97); }
}
.adem-woord { position: relative; height: 1.5em; margin-top: .5em; font-weight: 700; font-size: 1.05em; color: #1E5F5C; }
.adem-woord span { position: absolute; left: 50%; translate: -50% 0; animation: 10s steps(1, end) infinite; }
.adem-woord .w-in  { animation-name: woord-in; }
.adem-woord .w-uit { animation-name: woord-uit; }
@keyframes woord-in  { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes woord-uit { 0%, 39% { opacity: 0; } 40%, 100% { opacity: 1; } }
.adem-voet { font-size: .62em; line-height: 1.5; color: #55503F; margin: .8em 0 0; }
.adem-stop { margin-top: .7em; font-size: .72em; font-weight: 700; color: #1E5F5C; }

@media (prefers-reduced-motion: reduce) {
  /* Even specifiek als de regels die ze uitzetten. Deze stonden op
     `.adem-pal img` en `.adem-woord span`, en dat is één klasse minder dan
     `.adem-pal .adem-in` waar de animatie op staat: dan wint de animatie en
     bleef de mond wisselen terwijl de ring wel stilstond. */
  .adem-halo, .adem-ring, .adem-pal { animation: none; }
  .adem-pal .adem-in, .adem-pal .adem-uit,
  .adem-woord .w-in, .adem-woord .w-uit { animation: none; }
  /* In beeld blijft de inademing staan, samen met het woord In hieronder. */
  .adem-pal .adem-uit { opacity: 0; }
  .adem-pal .adem-uit { opacity: 0; }
  .adem-woord .w-uit { opacity: 0; }
}

/* Het nagebouwde scherm doet in de wandeling mee als een van de vier vellen. */
/* Op de startpagina wisselt dit scherm met drie schermafdrukken, dus staat het
   standaard uit. In de verkenner is het omhulsel wat aan en uit gaat, en dan
   moet dit gewoon zichtbaar zijn. */
.scherm .echt { opacity: 0; transition: opacity .45s var(--ease); }
.nagebouwd .echt { opacity: 1; }
.scherm .echt.aan { opacity: 1; }

/* ── de balken onder het blad ────────────────────────────────────────────
   "Blad 1, Blad 2" waren pilletjes met tekst, en dat leest als een
   knoppenrij op een formulier. Drie balken zeggen hetzelfde zonder woorden,
   en de actieve vult terwijl de tijd loopt: dan zie je dat het vanzelf
   verdergaat en hoe lang je nog hebt. */
.blad-balken { display: flex; gap: .6rem; margin-top: 1.5rem; }
.blad-balken button {
  flex: 1; height: 4px; padding: 0; border: 0; cursor: pointer;
  border-radius: 99px; background: rgba(237,232,216,.22);
  position: relative; overflow: hidden;
}
.blad-balken button::after {
  content: ''; position: absolute; inset: 0;
  background: var(--sage); transform-origin: left; transform: scaleX(0);
}
.blad-balken button[aria-current="true"]::after { transform: scaleX(1); transition: none; }
.blad-balken button[aria-current="true"].loopt::after { animation: balk-vullen 6s linear forwards; }
@keyframes balk-vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.blad-balken button:hover { background: rgba(237,232,216,.4); }
@media (prefers-reduced-motion: reduce) {
  .blad-balken button[aria-current="true"].loopt::after { animation: none; transform: scaleX(1); }
}

/* De balk blijft dun, het aanraakvlak wordt groot genoeg. Vier pixels hoog
   is als knop onbruikbaar; vierentwintig is het minimum. */
.blad-balken button {
  height: 24px; background: transparent; border-radius: 0;
  display: flex; align-items: center;
}
.blad-balken button::before {
  content: ''; flex: 1; height: 4px; border-radius: 99px;
  background: rgba(237,232,216,.22);
}
.blad-balken button::after {
  top: 50%; bottom: auto; height: 4px; translate: 0 -50%; border-radius: 99px;
}
.blad-balken button:hover::before { background: rgba(237,232,216,.4); }

/* Op een telefoon valt er niets vast te zetten: daar staat onder elke stap
   zijn eigen toestel, en de vaste kolom zou een vijfde zijn.

   En die vier toestellen lopen door in plaats van helemaal te staan. Vier
   volledige schermen naast hun tekst maakten dit stuk vijf en een half scherm
   lang, ruim een derde van de hele bladzijde, en je hebt de onderkant van een
   scherm niet nodig om te zien wat er staat. Nu kijk je er als het ware
   overheen. */
@media (max-width: 58rem) {
  .wandel .vast-kolom .toestel { display: none; }
  .stap .los { max-height: 360px; overflow: hidden; }
  .stap .los::after {
    content: ''; position: absolute; left: 11px; right: 11px; bottom: 0;
    height: 90px; border-radius: 0 0 34px 34px;
    background: linear-gradient(rgba(239,233,220,0), var(--paper-2));
  }
}

/* De drie beloftes onder de knop. Geen vakjes: drie regels met een streep
   erboven, zodat ze meelezen in plaats van te onderbreken. */
.beloftes { margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
@media (min-width: 34rem) { .beloftes { grid-template-columns: repeat(3, 1fr); column-gap: 1.6rem; } }
.beloftes li { padding: .75rem 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); }
.beloftes b { display: block; color: var(--ink); font-size: .95rem; }

/* ── de metgezel knippert ────────────────────────────────────────────────
   Vier tekeningen over elkaar, getekend door de tekenaar van de app zelf.
   Bijna de hele tijd staat "open" bovenop; twee keer per ronde gaan de ogen
   in drie stappen dicht en weer open.

   Het vak van 4,2 seconden komt uit de app, waar het `_blinkSlot` heet. Zes
   procent daarvan is een kwart seconde, en zo lang duurt een knippering. */
.knip { position: relative; display: block; }
.knip img { position: absolute; inset: 0; width: 100%; }
.knip img:first-child { position: relative; }
.knip .k-open  { animation: knip-open  4.2s linear infinite; }
.knip .k-half  { animation: knip-half  4.2s linear infinite; }
.knip .k-dicht { animation: knip-dicht 4.2s linear infinite; }
@keyframes knip-open {
  0%, 92% { opacity: 1; } 92.01%, 98% { opacity: 0; } 98.01%, 100% { opacity: 1; }
}
@keyframes knip-half {
  0%, 92% { opacity: 0; } 92.01%, 94% { opacity: 1; }
  94.01%, 96% { opacity: 0; } 96.01%, 98% { opacity: 1; } 98.01%, 100% { opacity: 0; }
}
@keyframes knip-dicht {
  0%, 94% { opacity: 0; } 94.01%, 96% { opacity: 1; } 96.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .knip .k-half, .knip .k-dicht { animation: none; opacity: 0; }
  .knip .k-open { animation: none; opacity: 1; }
  /* Ook het omhulsel, want daar zit het ademen op. Zonder deze regel stopte
     hij wel met knipperen maar bleef hij pulseren, en juist dat pulseren is
     wat bij een evenwichtsaandoening of migraine misgaat.

     Met dezelfde selector als waar het ademen op staat, anders wint die: die
     is `.echt .gezel .knip` en dus drie klassen diep. */
  .knip, .echt .gezel .knip { animation: none; }
}

/* ── het scrollen bijgesteld ─────────────────────────────────────────────
   Het toestel stond op zesennegentig pixels van boven terwijl de tekst
   ernaast in het midden staat. Op een hoog scherm keek je dus boven en las je
   in het midden. Nu staat hij verticaal gecentreerd, met zesennegentig als
   ondergrens zodat hij nooit onder de balk schuift.

   En de eerste en laatste stap krijgen ruimte, anders halen ze de meetstrook
   in het midden van het scherm niet en blijft het toestel op de verkeerde
   staan. */
@media (min-width: 58rem) {
  .wandel .vast-kolom { top: max(96px, calc((100vh - 700px) / 2)); }
  .wandel .stappen { padding-block: calc((100vh - 62vh) / 2); }
}

/* ── pauzeren, en rustiger bij het aanwijzen ─────────────────────────────
   De regel hierboven die het hele knopvlak liet oplichten stamt uit de tijd
   dat de knop de balk zélf was. Nu is de knop een onzichtbaar vlak van
   vierentwintig pixels hoog, dus lichtte er een blok op waar je geen blok
   verwacht. Alleen de balk reageert nog. */
.blad-balken button:hover { background: transparent; }
.blad-balken button::before { transition: background .18s var(--ease); }
.blad-balken button:hover::before { background: rgba(237,232,216,.42); }
.blad-balken button[aria-current="true"]:hover::before { background: rgba(237,232,216,.22); }
.blad-balken { align-items: center; }

/* De knop om het stil te zetten. Klein en stil van zichzelf: hij hoort bij de
   balken en mag niet concurreren met de knop waarmee je de app haalt. */
.blad-balken .blad-pauze {
  /* Twee klassen, want `.blad-balken button` is specifieker dan `.blad-pauze`
     alleen: dan wint de balkopmaak en wordt de knop een balk. */
  all: unset; box-sizing: border-box;
  flex: none; width: 28px; height: 28px; padding: 0; cursor: pointer;
  margin-left: .35rem; border-radius: 50%; background: transparent;
  border: 1.5px solid rgba(237,232,216,.26);
  color: rgba(237,232,216,.7);
  display: grid; place-items: center;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.blad-balken .blad-pauze::before, .blad-balken .blad-pauze::after { content: none; }
.blad-balken .blad-pauze:hover { border-color: rgba(237,232,216,.58); color: #EDE8D8; }
.blad-balken .blad-pauze svg { width: 10px; height: 10px; fill: currentColor; }
.blad-balken .blad-pauze .verder { display: none; }
.blad-balken .blad-pauze[aria-pressed="true"] .pauze { display: none; }
.blad-balken .blad-pauze[aria-pressed="true"] .verder { display: block; }

/* Een balk die doorloopt terwijl er niets gebeurt, liegt. */
.blad-vak.stil .blad-balken button[aria-current="true"].loopt::after {
  animation-play-state: paused;
}

/* ═══ wat "Wat het doet" er nog bij nodig heeft ═══════════════════════════ */

/* Een kop zonder telefoon: links waar de bladzijde over gaat, rechts vier
   redenen. Vier genummerde regels lezen sneller dan een alinea die hetzelfde
   zegt, en ze zeggen meteen of je verder wilt. */
.kop-kort { padding-bottom: clamp(2rem, 4vw, 3rem); }
.kop-kort .rand { align-items: start; }
@media (min-width: 58rem) { .kop-kort .rand { grid-template-columns: 1.1fr .9fr; } }

/* De wegwijzer. Een lange bladzijde zonder wegwijzer is een bladzijde die je
   afsluit. Hij plakt onder de kopbalk en schuift opzij op een smal scherm, in
   plaats van over vier regels te breken. */

/* Vier kaarten met een toestel erboven. Het toestel is hier kleiner dan op de
   startpagina: het gaat om herkenning, niet om lezen. */
@media (min-width: 46rem) { .vierkaart { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .vierkaart { grid-template-columns: repeat(4, 1fr); } }
/* Het toestel verkleinen, niet het scherm erin. Andersom blijft het zwarte
   kader op zijn volle breedte staan en loopt de rij van vier buiten beeld:
   het scherm krimpt dan wel, maar het toestel eromheen niet. */

/* Tekst met een beeld ernaast. Op een smal scherm gaat het beeld eronder,
   want naast elkaar wordt allebei te klein om iets aan te hebben. */
.naast { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); align-items: start; }
@media (min-width: 62rem) { .naast { grid-template-columns: 1.15fr .85fr; } }
.woordblok > p { color: var(--ink-2); margin-bottom: 1.1rem; }
.deel.donker .woordblok > p { color: rgba(237,232,216,.74); }
.beeld { margin: 0; }
.beeld img {
  width: 100%; height: auto; border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(27,25,19,.45);
}
.deel.donker .beeld img { border-color: rgba(237,232,216,.14); }
.beeld figcaption {
  margin-top: .8rem; font-size: .87rem; color: var(--ink-3); text-align: center;
}
.deel.donker .beeld figcaption { color: rgba(237,232,216,.5); }

/* Binnen een tekstkolom is één kolom genoeg; twee zou daar te smal worden. */
.bewijs-strak { grid-template-columns: 1fr !important; margin-top: 1.6rem; }

/* Drie regels die geen alinea hoeven te zijn. Een vinkje zegt "dit is zo",
   waar een bolletje alleen zegt "hier staat iets". */
.vinkjes { margin: 1.6rem 0; padding: 0; list-style: none; }
.vinkjes li {
  position: relative; padding: .5rem 0 .5rem 1.7rem;
  color: var(--ink-2); font-size: .97rem;
}
.deel.donker .vinkjes li { color: rgba(237,232,216,.74); }
.vinkjes li::before {
  content: ''; position: absolute; left: .15rem; top: 1.05rem;
  width: 8px; height: 4px; border: 1.6px solid var(--teal);
  border-top: 0; border-right: 0; rotate: -45deg;
}
.deel.donker .vinkjes li::before { border-color: var(--sage); }

/* Een zin na een blok, iets stiller dan de rest. */
.nazin { color: var(--ink-3); font-size: .97rem; margin-top: 1.6rem; }
.deel.donker .nazin { color: rgba(237,232,216,.6); }
.nazin-midden { max-width: 40rem; margin-inline: auto; text-align: center; margin-top: 2.4rem; }

/* De vierentachtig, in vier groepen. Ze staan er niet om gelezen te worden
   maar om te vinden of de jouwe erbij is, dus ze mogen klein en dicht. */
.aandoeningen { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
@media (min-width: 52rem) { .aandoeningen { grid-template-columns: repeat(2, 1fr); } }
.aandoeningen section {
  background: var(--paper-2); border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
}
.deel.donker .aandoeningen section { background: rgba(237,232,216,.05); }
.aandoeningen h3 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .7rem;
}
.deel.donker .aandoeningen h3 { color: var(--sage); }
.aandoeningen h3 span {
  letter-spacing: 0; margin-left: .4rem; color: var(--ink-3); font-weight: 400;
}
/* Op de donkere band stond het aantal nog op de donkere inkt, want de kop
   ernaast had wel een donkere variant en dit niet: contrast 2,42 waar 4,5 het
   minimum is. Uitgerekend: alfa 0,62 haalt 5,42 in het lichte thema en 6,42 in
   het donkere. */
.deel.donker .aandoeningen h3 span { color: rgba(237,232,216,.62); }
.aandoeningen p { font-size: .92rem; line-height: 1.75; color: var(--ink-2); }

/* De vier metgezellen. Alleen het wezen en zijn naam: wie er een wil, kiest
   op hoe hij eruitziet en niet op een beschrijving. */
.metgezellen {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2rem); max-width: 44rem;
}
.metgezellen li { text-align: center; }
.metgezellen img { width: min(110px, 100%); height: auto; }
.metgezellen b { display: block; margin-top: .5rem; font-size: .95rem; }

.verder-link { color: var(--sage); text-underline-offset: .25em; }

/* ═══ prijs, verhaal en contact ═══════════════════════════════════════════ */

/* Een kop met alleen tekst. Zonder deze regel blijft het raster op twee
   kolommen staan en hangt de helft leeg. */
/* Eén kolom, en de breedte op de tekst en niet op de rij.
   Hier stond max-width met margin-inline: 0 op de rij zelf, en dat haalde ook
   de zijruimte weg die elke andere sectie wel heeft: de kop begon op nul,
   tegen de rand van het venster, terwijl alles eronder op honderdeenentwintig
   staat. Dat is precies de knik die je ziet zodra je de bladzijde openslaat. */
.kop-alleen .rand { grid-template-columns: 1fr; }
.kop-alleen .rand > div { max-width: 44rem; }
.kop-alleen .belofte { max-width: 34rem; }

/* Een deel dat meteen op een kop volgt, hoeft er niet nog eens ruimte tussen. */
.deel-boven { padding-top: 0; }

/* Het prijsvak in de kop staat alleen, dus zonder de tweede kolom. */
.prijsvak-kop { grid-template-columns: 1fr; }
.prijsvak-kop .nazin { margin-top: 1.2rem; }

/* ── de eigen stem ───────────────────────────────────────────────────────
   Groter dan gewone tekst en smaller dan de rest van de site. Een regel van
   veertig aanslagen of zeventig leest heel anders, en dit is het enige stuk
   dat je van begin tot eind hoort te lezen in plaats van te scannen. */
/* Een brief, geen bladzijde.
   Dit is de enige plek waar één mens aan het woord is, en dat mag je zien
   voor je een woord gelezen hebt. Eigen papier, gecentreerd, met de rand van
   een vel. */
.eigenwoord {
  max-width: 44rem; margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 3.4rem);
}
/* Ruimer dan de rest: dit zijn lange zinnen, en dan leest zeventig aanslagen
   prettiger dan zesenvijftig. */
.eigenwoord p {
  font-size: 1.08rem; line-height: 1.82; color: var(--ink-2);
  margin-bottom: 1.5rem; max-width: 40rem;
}
/* De eerste alinea draagt, maar de sprong naar de rest was een trap: 1,32
   tegen 1,14. Nu staat er een halve stap tussen. */
.eigenwoord p:first-of-type {
  font-size: 1.22rem; line-height: 1.62; color: var(--ink);
}

/* Een ondertekening en geen scheidslijn. Een streep over de volle breedte
   zegt "hier houdt een blok op"; een korte streep zegt "hier tekent iemand". */
.ondertekend {
  margin: 2.6rem 0 0; padding-top: 1.6rem;
  border-top: 0; position: relative;
}
.ondertekend::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3rem; height: 2px; border-radius: 99px;
  background: var(--sage);
}
.ondertekend b {
  display: block; color: var(--forest);
  font-size: 1.25rem; letter-spacing: -.01em;
}
.ondertekend span { display: block; margin-top: .15rem; color: var(--ink-3); font-size: .93rem; }
.deel.donker .ondertekend b { color: var(--sage); }

/* Eén zin die zwaarder mag wegen dan de alinea's eromheen. */
.grote-zin {
  max-width: 40rem; font-size: 1.18rem; line-height: 1.6; color: var(--ink);
  padding-left: 1.2rem; border-left: 2px solid var(--sage);
}

/* ── het adres ───────────────────────────────────────────────────────────
   Geen formulier, dus het adres zelf is de knop. Het mag groot: het is het
   enige wat je op deze bladzijde moet kunnen vinden. */
/* Het adres is het enige waarvoor je op deze bladzijde komt, dus het staat op
   een vel voor zichzelf in plaats van tussen twee tekstblokken in een smalle
   kolom met de halve bladzijde leeg ernaast. */
.adresvak {
  max-width: 44rem; margin-inline: auto; text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}
.adresvak > p { color: var(--ink-2); max-width: 34rem; margin-inline: auto; }
.adresvak .nazin { margin-inline: auto; }
.adres {
  display: inline-block; margin: 1.8rem 0 .6rem;
  /* Groter dan de kop eromheen: dit is het antwoord op de bladzijde. */
  font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 700;
  color: var(--forest); text-decoration: none;
  border-bottom: 2px solid var(--sage); padding-bottom: .15rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
  word-break: break-word;
}
.adres:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* De regel over een crisis. Hij hoort op te vallen zonder alarm te slaan:
   een kleurvlak met een streep, geen rood en geen uitroepteken. */
.dringend {
  background: var(--kader-warm); border-left: 2px solid var(--brick);
  padding: .9rem 1.1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink) !important;
}

/* Op de prijsbladzijde zelf wijst "binnenkort op Google Play" nergens heen,
   want de app staat er nog niet. Dan hoort het geen knop te zijn: iets dat
   eruitziet als een knop en niets doet, is erger dan iets dat er niet als
   knop uitziet. Zelfde vorm, maar stiller en zonder wijzende cursor. */
.pil-wacht {
  cursor: default; background: transparent;
  color: var(--ink-2); border: 1px dashed var(--line);
  box-shadow: none;
}
.pil-wacht:hover { background: transparent; color: var(--ink-2); transform: none; }

/* ═══ het leven terug ═════════════════════════════════════════════════════ */

/* ── de kop van "wat het doet" ───────────────────────────────────────────
   Tekst links, een telefoon rechts die vanzelf doorloopt. Een bladzijde van
   deze lengte moet in de eerste seconde laten zien waar hij over gaat, en een
   scherm doet dat sneller dan een alinea. */
.kop-wat { padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem); }
.kop-wat .rand { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .kop-wat .rand { grid-template-columns: 1.15fr .85fr; } }
.kop-wat h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em; }
.kop-wat .belofte { margin-top: 1.2rem; max-width: 34rem; color: var(--ink-2); font-size: 1.12rem; }

/* De wegwijzer als pilletjes. Een pil nodigt uit om aangeraakt te worden waar
   een strakke balk alleen aankondigt, en op een telefoon breken ze netjes over
   twee regels in plaats van opzij te schuiven. */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2rem 0 0; }
.chips a {
  padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  font-size: .88rem; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chips a:hover { background: var(--forest); border-color: var(--forest); color: var(--op-licht); }

/* De vier redenen, met de cijfers groot zoals ze op de oude bladzijde stonden.
   Een cijfer van achttien pixels in een rondje leest als opsommingsteken; een
   cijfer van dertig leest als een reden. */

/* ── de telefoon die rondgaat ────────────────────────────────────────────
   Vier schermen over elkaar; er is er één zichtbaar en ze wisselen met een
   overvloeiing. Geen schuif, want schuiven trekt de aandacht naar de beweging
   en niet naar wat er staat. */
.toestel-groot { width: min(320px, 74vw); }
#rondgang img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .7s var(--ease);
}
#rondgang img.aan { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #rondgang img { transition: none; }
}

/* ── de drie stappen van de ademoefening ─────────────────────────────────
   Drie telefoons naast elkaar. Eén plaatje liet niet zien dat het een oefening
   met stappen is, en juist dat is het punt: je kiest zelf, en je kunt stoppen. */
@media (min-width: 46rem) { .stappenrij { grid-template-columns: repeat(3, 1fr); } }
/* Nooit breder dan de kolom. Een vaste 240 loopt bij drie kolommen naast
   elkaar buiten beeld zodra het venster onder de duizend pixels komt. */

.woordblok-breed { max-width: 46rem; }

/* De oude strook is er niet meer; deze regel houdt hem weg mocht er nog ergens
   een bladzijde met dat merk staan. */

/* ── de prijskaart ───────────────────────────────────────────────────────
   Het hele aanbod in één kaart: het bedrag groot en groen, de knop erin, en
   wat je krijgt ernaast. Uit elkaar getrokken over drie secties leest het als
   een verslag; bij elkaar leest het als een aanbod. */
.prijskaart {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--prijs-gloed) 0%, transparent 46%), var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  max-width: 60rem; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
}
.prijskaart::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--sage), var(--teal) 46%, var(--sand));
}
.prijskaart-in { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 54rem) { .prijskaart-in { grid-template-columns: .9fr 1.1fr; } }
.prijskaart .bedrag {
  font-size: clamp(3.2rem, 9vw, 4.6rem); font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--forest); margin-top: .6rem;
}
.prijskaart .eenmalig { color: var(--ink-2); margin-top: .5rem; }
.prijskaart .streep { color: var(--ink-3); font-size: .95rem; margin-top: .9rem; }
/* Een h2 en niet een h3: dit is de eerste kop na de h1 op deze bladzijde, en
   een niveau overslaan laat een voorleesprogramma denken dat er een stuk mist.
   De maat blijft die van een opschrift, want dat is wat het is. */
.krijgt-zij h2 {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1.1rem;
}
.krijgt-zij ul { margin: 0; padding: 0; list-style: none; }
.krijgt-zij li {
  padding: .7rem 0 .7rem 1.5rem; position: relative;
  border-top: 1px solid var(--line-2); font-size: .95rem; color: var(--ink-2);
}
.krijgt-zij li:first-child { border-top: 0; padding-top: 0; }
.krijgt-zij li::before {
  content: ''; position: absolute; left: 0; top: 1.15rem;
  width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--sage);
}
.krijgt-zij li:first-child::before { top: .45rem; }
.krijgt-zij b { color: var(--ink); }

/* ── wat het over een jaar kost ──────────────────────────────────────────
   Het argument van deze bladzijde is een verschil in geld over tijd, en dat
   lees je sneller als twee balken dan als drie alinea's. De balk vult zich
   zodra hij in beeld komt, want dan zie je het verschil groeien in plaats van
   het te moeten vergelijken. */
.jaarvak { max-width: 42rem; margin: clamp(2rem, 4vw, 2.8rem) auto 0; }
.jaarvak h3 {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1.4rem;
}
.jaarrij { display: grid; grid-template-columns: 1fr; gap: .4rem; margin-bottom: 1.4rem; }
.jaarrij .naamt { font-size: .95rem; }
.jaarrij .spoor {
  height: 30px; border-radius: 6px; overflow: hidden;
  background: rgba(237,232,216,.1); position: relative;
}
.jaarrij .vulling {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 6px; transition: width 1.2s var(--ease);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .6rem; font-size: .85rem; font-weight: 700;
}
.jaarrij.eigen .vulling { background: var(--sage); color: #16150F; }
.jaarrij.ander .vulling { background: rgba(237,232,216,.22); color: #EDE8D8; }
.jaarvak.in .jaarrij .vulling { width: var(--deel); }
@media (prefers-reduced-motion: reduce) {
  .jaarrij .vulling { transition: none; }
}

/* De kop van de prijsbladzijde. Eén kolom, gecentreerd, want er staat maar
   één ding op deze bladzijde en dat is het aanbod eronder. */
.kop-prijs { padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.kop-prijs .rand { display: block; }
.prijs-kopstuk { max-width: 40rem; }
.prijs-kopstuk h1 { font-size: clamp(2.2rem, 5.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.035em; }
.prijs-kopstuk .belofte { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.12rem; }
.krijgt-zij li span { display: block; color: var(--ink-3); font-size: .9rem; margin-top: .15rem; }

/* ═══ toestellen die doorbladeren ═════════════════════════════════════════
   Eén patroon voor elk toestel dat vanzelf doorloopt: de schermen liggen over
   elkaar en vloeien over, en onder het toestel staan de namen met een balkje
   dat vult terwijl de tijd loopt. Zo zie je dat het vanzelf verdergaat en
   hoeveel tijd je nog hebt, en je kunt zelf kiezen. */
.bladeren .scherm > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .6s var(--ease);
}
.bladeren .scherm > img.aan { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bladeren .scherm > img { transition: none; }
}

.pagers {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin-top: 1.1rem;
}
.pagers button {
  flex: 1 1 0; min-width: 4.5rem; padding: 0 0 .5rem; border: 0;
  background: transparent; cursor: pointer;
  font: inherit; font-size: .8rem; line-height: 1.25;
  color: var(--ink-3); position: relative;
  transition: color .2s var(--ease);
}
.pagers button::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  border-radius: 99px; background: var(--line);
}
.pagers button::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  border-radius: 99px; background: var(--sage);
  transform-origin: left; transform: scaleX(0);
}
.pagers button:hover { color: var(--ink); }
.pagers button[aria-current="true"] { color: var(--ink); font-weight: 700; }
.pagers button[aria-current="true"]::after { transform: scaleX(1); transition: none; }
.pagers button[aria-current="true"].loopt::after { animation: pager-vullen var(--tijd, 3.4s) linear forwards; }
@keyframes pager-vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bladeren.stil .pagers button[aria-current="true"].loopt::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pagers button[aria-current="true"].loopt::after { animation: none; transform: scaleX(1); }
}

.deel.donker .pagers button { color: rgba(237,232,216,.6); }
.deel.donker .pagers button:hover,
.deel.donker .pagers button[aria-current="true"] { color: var(--on-dark); }
.deel.donker .pagers button::before { background: rgba(237,232,216,.2); }

/* De zin onder een toestel dat een oefening laat zien. */
.met-onder .onder {
  margin-top: 1rem; font-size: .92rem; color: rgba(237,232,216,.66);
  text-align: center; max-width: 22rem; margin-inline: auto;
}
.deel:not(.donker) .met-onder .onder { color: var(--ink-3); }

/* Tekst met een toestel ernaast in plaats van een platte afbeelding. */
@media (min-width: 62rem) { .naast-toestel { grid-template-columns: 1.2fr .8fr; } }
.naast-toestel .toestel { width: min(280px, 100%); }

/* ═══ de verkenner ════════════════════════════════════════════════════════ */

.kop-verkenner { padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(2rem, 4vw, 3rem); }

/* Eén kolom, en de breedte op de tekst en niet op de rij.
   `.kop .rand` is een raster van twee kolommen, want de kop van de startpagina
   heeft tekst links en een toestel rechts. Deze kop heeft geen toestel. Zonder
   deze regel belandde het opschrift in de eerste kolom, de titel in de tweede
   en de alinea weer in de eerste, met vier centimeter lucht ertussen. En
   `max-width` op de rij centreerde hem ook nog: de kop begon op 345 terwijl
   alles eronder op 121 begint, dus niets liep gelijk. */
.kop-verkenner .rand { grid-template-columns: 1fr; gap: 0; align-items: start; }
/* Een rasterkind wordt altijd geblokkeerd: inline-block wordt block. Het
   opschrift is een chip met een eigen vlak, dus zonder deze regel liep dat
   vlak over de volle kolombreedte van 1184 pixels. */
.kop-verkenner .soort { justify-self: start; }
.kop-verkenner h1 {
  max-width: 20ch;
  margin-top: 1.4rem;
  font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.07; letter-spacing: -.035em;
}
.kop-verkenner .belofte { max-width: 46rem; margin-top: 1.2rem; color: var(--ink-2); font-size: 1.1rem; }

.verkenner { padding-bottom: clamp(4rem, 9vw, 7rem); }

/* ── de balk ─────────────────────────────────────────────────────────────
   Tien vakken die netjes over twee regels breken. Elk vak heeft zijn nummer,
   want dan zie je in één blik hoeveel het er zijn en waar je bent. */
/* Op een smal scherm een rij die opzij schuift. Als raster werd hij bijna
   vijfhonderd pixels hoog, en dan scrol je eerst langs een muur van knoppen
   voor je iets ziet. Vanaf een tablet mag hij wel een raster zijn: daar staat
   hij naast niets en zie je in één blik hoeveel er zijn. */
.balk {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: .25rem;
  scroll-padding-inline: 1rem;
}
.balk::-webkit-scrollbar { display: none; }
.balk .tab { flex: 0 0 auto; }
.balk .tab .nr { display: none; }
@media (min-width: 46rem) {
  .balk {
    display: grid; gap: .5rem; overflow: visible;
    grid-template-columns: repeat(5, 1fr);
  }
  .balk .tab { flex: initial; }
  .balk .tab .nr { display: block; }
}
/* Elk vak heeft zijn eigen vlak en een zichtbare rand, ook als het niet
   gekozen is. Het stond op doorzichtig met een lijn van dertien procent, en
   dan zie je op papierkleur niet dat er iets te kiezen valt tot je erop drukt.
   Een vak dat pas bestaat als je het aanraakt, is geen vak.

   En de tekst staat in het midden: bij tien vakjes naast elkaar met namen van
   heel verschillende lengte oogt links uitlijnen rommelig. */
.tab {
  display: flex; flex-direction: column; gap: .15rem;
  align-items: center; justify-content: center;
  padding: .7rem .85rem; border-radius: var(--r-sm);
  /* Uitgerekend, niet gekozen. Het vlak kan het niet dragen: kaart tegen
     papier is 1,09 in licht en 1,10 in donker, want dit is een warm papieren
     palet. Voor de omtrek van iets klikbaars is drie tegen een de norm, en
     daarvoor is alfa 0,47 nodig in licht en 0,37 in donker. Ik had hier eerder
     1,09 gemeten en het toch doorgezet. */
  border: 1px solid var(--tab-rand);
  background: var(--card);
  box-shadow: var(--shadow);
  font: inherit; text-align: center; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.tab:hover { border-color: var(--sage); transform: translateY(-1px); box-shadow: var(--shadow); }
.tab .nr {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--teal);
  transition: color .22s var(--ease);
}
.tab .naam { font-size: .92rem; color: var(--ink); line-height: 1.2; }
.tab[aria-selected="true"] {
  background: var(--forest); border-color: var(--forest);
  box-shadow: var(--shadow);
}
/* Het nummer stond op salie, en dat is in het donkere thema bijna dezelfde
   kleur als het bosgroen eronder: contrast 1,05, dus onzichtbaar. In het
   lichte thema haalde het 3,86 waar 4,5 het minimum is. Nu dezelfde kleur
   als de naam, wat stiller gezet met doorzichtigheid. */
.tab[aria-selected="true"] .nr { color: var(--paper); opacity: .8; }
/* Papier op bosgroen, net als de knoppen. Hier stond --op-licht, en dat is
   in het lichte thema juist de donkere kleur: donkergroen op donkergroen,
   dus de gekozen tab was niet te lezen. */
.tab[aria-selected="true"] .naam { color: var(--paper); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } .tab:hover { transform: none; } }

/* ── het toestel en het paneel ───────────────────────────────────────────
   Het toestel staat links en verandert nooit van plek of maat; alleen het
   scherm erin wisselt. Het paneel heeft een minimumhoogte gelijk aan het
   toestel, anders springt de hele bladzijde bij elke tab. */
.verkenner-vak { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; justify-items: center; }
@media (min-width: 58rem) {
  .verkenner-vak { grid-template-columns: auto 1fr; justify-items: stretch; }
}
.toestel-verkenner { width: min(340px, 78vw); position: sticky; top: 96px; }
@media (max-width: 58rem) { .toestel-verkenner { position: static; } }
#verkenner-scherm > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .45s var(--ease);
}
#verkenner-scherm > img.aan { opacity: 1; }

/* Drie bladen in een vak. Het vak gaat aan en uit met zijn vakje in de balk,
   net als de nagebouwde schermen; de bladen erbinnen wisselen vanzelf, zodat
   je bij de bibliotheek niet alleen de lijst ziet maar ook wat erin staat. */
#verkenner-scherm > .doorblader {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .45s var(--ease);
}
#verkenner-scherm > .doorblader.aan { opacity: 1; }
.doorblader .blad {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .55s var(--ease);
}
.doorblader .blad.aan { opacity: 1; }

.panelen { position: relative; width: 100%; }
/* De hoogte van het langste paneel, nagemeten: 757. Daaronder krimpt en
   groeit de sectie bij elke tab en schuift alles eronder mee, en dat
   merk je precies op het moment dat je aan het lezen bent. */
@media (min-width: 58rem) { .panelen { min-height: 710px; } }
/* Het paneel vult de kolom, maar de zinnen die je van begin tot eind leest
   blijven op leesbreedte. Nagemeten: 34rem is achtenzestig tekens per regel,
   en boven de vijfenzeventig wordt lezen zwaarder. */
.paneel { display: none; max-width: none; }
.paneel h2, .paneel > p { max-width: 34rem; }
.paneel.aan { display: block; animation: paneel-in .5s var(--ease) both; }
@keyframes paneel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .paneel.aan { animation: none; }
}
.paneel h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.12; letter-spacing: -.025em; }
.paneel > p { margin-top: 1rem; color: var(--ink-2); font-size: 1.04rem; }
/* De opsomming in twee kolommen zodra er ruimte is. De punten zijn kort, dus
   naast elkaar blijven ze leesbaar, en zo vult de kolom zich zonder dat er
   ergens een regel van honderd tekens ontstaat. */
.paneel .bewijs { margin-top: 1.8rem; }
/* Pas vanaf 78rem, want daaronder is de rechterkolom smaller dan 600 pixels
   en worden twee kolommen van 210 te smal om te lezen. En met !important,
   omdat bewijs-strak zijn ene kolom ook zo afdwingt. */
/* Zolang de lijst één kolom is, dezelfde leesbreedte als de alinea's. Zonder
   deze grens liep een punt op een venster van 1024 tot achtenzeventig tekens,
   en boven de vijfenzeventig wordt lezen zwaarder. */
.paneel .bewijs-strak { max-width: 34rem; }
/* Pas vanaf 78rem twee kolommen, want daaronder is de rechterkolom smaller dan
   600 pixels en worden twee kolommen van 210 te smal. Met !important, omdat
   bewijs-strak zijn ene kolom ook zo afdwingt. */
@media (min-width: 78rem) {
  .paneel .bewijs-strak {
    max-width: none;
    grid-template-columns: 1fr 1fr !important; column-gap: 2.4rem;
  }
}

/* ── de vier metgezellen ─────────────────────────────────────────────────
   Gecentreerd, en bij het aanwijzen komt er één naar voren. Zonder dat
   verschil weet je niet dat je iets aanwijst, en dan is het een plaatjesrij. */
.deel-kop-midden { max-width: 40rem; margin-inline: auto; text-align: center; }
.metgezellen { margin-inline: auto; }
.metgezellen li {
  transition: transform .28s var(--ease);
  transform-origin: 50% 90%;
}
.metgezellen li:hover { transform: scale(1.12); }
.metgezellen li:hover b { color: var(--forest); }
.metgezellen b { transition: color .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .metgezellen li { transition: none; } .metgezellen li:hover { transform: none; } }

/* De namen onder de metgezellen stonden onder een plaatje dat zelf niet
   gecentreerd was, dus ze hingen scheef eronder. De cel centreert nu zijn
   inhoud, en dan staat de naam waar hij hoort: precies onder het wezen. */
.metgezellen li {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.metgezellen li img { display: block; margin-inline: auto; }
.metgezellen b { display: block; text-align: center; }


/* ═══ nagebouwde schermen in de verkenner ═════════════════════════════════
   Twee van de tien onderdelen tonen geen schermafdruk maar het scherm zoals
   het op de startpagina staat: in css, en daardoor vloeiend. Acht beelden uit
   de app gaven een diavoorstelling, en vloeiend had er honderdachtenzestig
   nodig: negenhonderd kilobyte per taal.

   De balk onderaan komt wel uit een echte schermafdruk, want die hebben de
   andere acht schermen ook. Zonder die balk verandert de telefoon zichtbaar
   terwijl je door de onderdelen gaat. */
#verkenner-scherm > .nagebouwd {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .45s var(--ease);
}
#verkenner-scherm > .nagebouwd.aan { opacity: 1; }
.nagebouwd .voetbalk {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: auto; z-index: 3;
}
/* Ruimte laten voor de balk, anders loopt de inhoud eronder door. Achtentachtig
   van de achthonderdtweeennegentig punten hoog, dus bijna tien procent. */
.nagebouwd .echt, .nagebouwd .adem { bottom: 9.87%; }

/* ── aanraakvlakken ──────────────────────────────────────────────────────
   Nagemeten: de verwijzingen in de voet zijn achttien pixels hoog en een
   losse verder-link twintig. Vierentwintig is het minimum, en de uitzondering
   voor verwijzingen in een lopende zin geldt hier niet: in de voet staat elke
   verwijzing op zijn eigen regel.

   Voor deze lezers is dat geen formaliteit. Bij tremor en brainfog is precies
   mikken juist wat er niet lukt.

   De hoogte van de regel verandert niet: bij tekst die in de regel meeloopt
   rekt opvulling wel het raakvlak op maar niet de regelhoogte. */
.site-foot .foot-col a,
.site-foot .foot-brand + p + ul a { padding-block: 4px; }
.verder-link { padding-block: 3px; }

/* ── het vangnet ─────────────────────────────────────────────────────────
   Elke animatie hierboven heeft zijn eigen regel om stil te vallen, en dat is
   de bedoeling: dan kan er per plek een verstandige eindstand staan.

   Maar vijf ervan bleven toch draaien omdat de uitzetregel minder specifiek
   was dan de animatie zelf, en dat zag ik pas toen ik de regels los toepaste
   in plaats van te kijken of ze matchten. Zoiets kan opnieuw gebeuren zodra
   er een animatie bij komt.

   Daarom hieronder een regel die alles afkapt wat er nog overblijft. Een
   duur van één milliseconde en één ronde laat elke animatie meteen op zijn
   eindstand komen en daar staan. Met !important, want dit hoort niet te
   verliezen van iets specifiekers: dat is precies de fout die hij opvangt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ── de winkelknop ───────────────────────────────────────────────────────
   Zichtbaar en stevig, maar geen knop: de app staat er nog niet, dus er valt
   niets te klikken. Geen wijzende cursor en geen hover die iets belooft.

   Hij stond hiervoor op doorzichtig met een streepjesrand, en dat was
   doorgeslagen: hij viel volledig weg op de bladzijde waar juist hij het
   antwoord is. */
.winkelknop {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .8rem 1.5rem .85rem 1.25rem;
  border-radius: 14px;
  background: var(--forest);
  color: var(--paper);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: default;
}
.winkelknop svg { width: 22px; height: 22px; fill: currentColor; flex: none; opacity: .92; }
.winkelknop .woorden { display: flex; flex-direction: column; line-height: 1.15; }
.winkelknop small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.winkelknop b { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }

/* ── wat er binnenkwam ───────────────────────────────────────────────────
   Twee getallen en geen balk: een balk vraagt om een doel om tegen af te
   zetten, en dat doel zou verzonnen zijn.

   Het blok blijft verborgen zolang beide getallen nul zijn. Er is nog niets
   binnengekomen, en nul tonen leest slechter dan niets tonen. */
.opbrengst { max-width: 42rem; margin: clamp(2rem, 4vw, 2.8rem) auto 0; text-align: center; }
.opbrengst h3 {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1.4rem;
}
.opbrengst .cijfers { display: grid; gap: 1.6rem; }
@media (min-width: 34rem) { .opbrengst .cijfers { grid-template-columns: 1fr 1fr; } }
.opbrengst .cijfers b {
  display: block;
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1;
  letter-spacing: -.03em; color: var(--on-dark);
}
.opbrengst .cijfers span { display: block; margin-top: .5rem; font-size: .92rem; color: rgba(237,232,216,.7); }
.opbrengst .nazin { margin-top: 1.6rem; }

/* Op een telefoon is het scherm zelf al de brief.
   Het vel eromheen kost daar alleen breedte: met vierentwintig pixels
   opvulling aan weerszijden bleef er negenentwintig tekens per regel over,
   terwijl de rest van dezelfde bladzijde er achtendertig geeft. En de eerste
   alinea stond op negentien en een halve pixel, wat de regel nog korter
   maakt. */
@media (max-width: 34rem) {
  .eigenwoord, .adresvak {
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .eigenwoord p:first-of-type { font-size: 1.12rem; }
  .adresvak { text-align: left; }
  .adresvak > p, .adresvak .nazin { margin-inline: 0; }
}