/* ==========================================================================
   Curabrein — website
   --------------------------------------------------------------------------
   Geen enkel verzoek naar buiten. Geen lettertype van Google, geen script van
   een ander, geen meetpixel. De app belooft dat er niets weggaat; een site die
   ondertussen haar bezoekers doorgeeft aan drie bedrijven maakt die belofte
   ongeloofwaardig. In Munchen werd in 2022 een sitehouder veroordeeld enkel
   omdat hij Google Fonts bij Google ophaalde. Het lettertype hieronder staat
   daarom op onze eigen server: hetzelfde Atkinson Hyperlegible als in de app.

   De kleuren komen uit het logo en uit de app zelf, niet uit een sjabloon.
   ========================================================================== */

@font-face {
  font-family: 'Atkinson';
  src: url('assets/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('assets/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper:   #F7F3EA;
  --paper-2: #EFE9DC;
  --card:    #FFFDF7;
  --ink:     #1B1913;
  --ink-2:   #55503F;
  /* Donkerder dan het oorspronkelijke #837B6A. Dat haalde op de zandkleurige
     band een contrast van 3,47 waar 4,5 het minimum is, en juist deze kleur
     draagt de kleine tekst: bijschriften, bladzijdenummers, de regel onder de
     knop. Gemeten, niet geschat. */
  --ink-3:   #6B6455;

  --forest:  #34452A;
  --forest-2:#455A38;
  --sage:    #8FA57B;
  --teal:    #1E5F5C;
  --sand:    #E9D8B4;
  --brick:   #8A4038;

  --line:    rgba(27, 25, 19, .13);
  --line-2:  rgba(27, 25, 19, .07);

  --dark:      #232E1D;
  --dark-2:    #2C3A24;
  --on-dark:   #EDE8D8;
  --on-dark-2: rgba(237, 232, 216, .72);

  --shell: 1180px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --shadow: 0 1px 2px rgba(27,25,19,.04), 0 8px 24px -12px rgba(27,25,19,.16);
  --shadow-lg: 0 2px 6px rgba(27,25,19,.05), 0 30px 60px -30px rgba(27,25,19,.32);

  --ease: cubic-bezier(.22, .68, .36, 1);

  /* Vlakken die per thema verschillen en die anders in losse regels zouden
     moeten worden overschreven. Als token hoeft dat niet: de onderdelen
     hieronder verwijzen ernaar en veranderen vanzelf mee. */
  --kop-vlak:      rgba(247, 243, 234, .84);
  --kop-vlak-vast: rgba(247, 243, 234, .96);
  --gloed:         rgba(143, 165, 123, .34);
  --prijs-gloed:   rgba(233, 216, 180, .5);
  --kader-vlak:    rgba(30, 95, 92, .06);
  --kader-warm:    rgba(138, 64, 56, .06);
  --vel-rand:      var(--line);
  --op-licht:      var(--dark);

  /* ---- de donkere waarden, hier op één plek ---- */
  --d-paper:   #16150F;
  --d-paper-2: #1E1C15;
  --d-card:    #201E17;
  --d-ink:     #EDE7DA;
  --d-ink-2:   #C6BDAB;
  --d-ink-3:   #A49B8A;
  --d-teal:    #7FC2B7;
  --d-sage:    #9CB388;
  --d-forest:  #8FB273;
  --d-forest-2:#A2C287;
  --d-op-knop: #14180F;
  --d-sand:    #4A4232;
  --d-brick:   #D89A90;
  --d-line:    rgba(237, 231, 218, .17);
  --d-line-2:  rgba(237, 231, 218, .09);
  --d-dark:    #0C1207;
  --d-dark-2:  #141C0E;
  --d-shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --d-shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 30px 60px -28px rgba(0,0,0,.85);
  --d-kop-vlak:      rgba(22, 21, 15, .84);
  --d-kop-vlak-vast: rgba(22, 21, 15, .96);
  --d-gloed:         rgba(156, 179, 136, .17);
  --d-prijs-gloed:   rgba(143, 178, 115, .13);
  --d-kader-vlak:    rgba(127, 194, 183, .09);
  --d-kader-warm:    rgba(216, 154, 144, .10);
  --d-vel-rand:      rgba(237, 231, 218, .2);
}

/* ------------------------------------------------------------ donker ---
   Wie zijn toestel op donker heeft staan krijgt de site in donker, en met de
   knop rechtsboven kan iedereen daar zelf van afwijken. Die keuze wordt
   onthouden. Dat is hier geen modegril: dit is een site voor mensen met
   migraine, met een vestibulaire aandoening, met lichtgevoeligheid, en de
   ene wil dan juist donker en de andere juist niet.

   Warm en niet zwart, net als het nachtthema in de app. Zwart met wit erop
   geeft nastaren bij lang lezen, en dat is precies het publiek hier.

   Twee keer dezelfde toewijzing, want een mediaquery en een attribuut kunnen
   niet in één regel staan. De kleuren zelf staan hierboven op één plek, dus
   er is niets dat uiteen kan lopen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --paper:   var(--d-paper);
    --paper-2: var(--d-paper-2);
    --card:    var(--d-card);
    --ink:     var(--d-ink);
    --ink-2:   var(--d-ink-2);
    --ink-3:   var(--d-ink-3);
    --teal:    var(--d-teal);
    --sage:    var(--d-sage);
    --forest:  var(--d-forest);
    --forest-2:var(--d-forest-2);
    --op-knop: var(--d-op-knop);
    --sand:    var(--d-sand);
    --brick:   var(--d-brick);
    --line:    var(--d-line);
    --line-2:  var(--d-line-2);
    --dark:    var(--d-dark);
    --dark-2:  var(--d-dark-2);
    --shadow:    var(--d-shadow);
    --shadow-lg: var(--d-shadow-lg);
    --kop-vlak:      var(--d-kop-vlak);
    --kop-vlak-vast: var(--d-kop-vlak-vast);
    --gloed:         var(--d-gloed);
    --prijs-gloed:   var(--d-prijs-gloed);
    --kader-vlak:    var(--d-kader-vlak);
    --kader-warm:    var(--d-kader-warm);
    --vel-rand:      var(--d-vel-rand);
    --op-licht:      var(--d-op-knop);
  }
}
:root[data-thema="donker"] {
    --paper:   var(--d-paper);
    --paper-2: var(--d-paper-2);
    --card:    var(--d-card);
    --ink:     var(--d-ink);
    --ink-2:   var(--d-ink-2);
    --ink-3:   var(--d-ink-3);
    --teal:    var(--d-teal);
    --sage:    var(--d-sage);
    --forest:  var(--d-forest);
    --forest-2:var(--d-forest-2);
    --op-knop: var(--d-op-knop);
    --sand:    var(--d-sand);
    --brick:   var(--d-brick);
    --line:    var(--d-line);
    --line-2:  var(--d-line-2);
    --dark:    var(--d-dark);
    --dark-2:  var(--d-dark-2);
    --shadow:    var(--d-shadow);
    --shadow-lg: var(--d-shadow-lg);
    --kop-vlak:      var(--d-kop-vlak);
    --kop-vlak-vast: var(--d-kop-vlak-vast);
    --gloed:         var(--d-gloed);
    --prijs-gloed:   var(--d-prijs-gloed);
    --kader-vlak:    var(--d-kader-vlak);
    --kader-warm:    var(--d-kader-warm);
    --vel-rand:      var(--d-vel-rand);
    --op-licht:      var(--d-op-knop);
}

/* --------------------------------------------------------------- grondslag */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Atkinson', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 18px; } }

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

a { color: inherit; }

::selection { background: var(--sand); color: var(--ink); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.shell-narrow { max-width: 780px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; z-index: 200; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------- letter */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.1;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.15rem, 4.9vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.h1 { font-size: clamp(2.05rem, 5vw, 3.3rem); line-height: 1.07; letter-spacing: -.026em; }
.h2 { font-size: clamp(1.72rem, 3.4vw, 2.6rem); }
.h3 { font-size: clamp(1.16rem, 1.7vw, 1.36rem); letter-spacing: -.012em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.36rem);
  line-height: 1.52;
  color: var(--ink-2);
}
.muted { color: var(--ink-2); }
.small { font-size: .875rem; color: var(--ink-3); }

.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
}
.eyebrow.on-dark { color: var(--sage); }

.measure { max-width: 62ch; }

/* -------------------------------------------------------------------- kop */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kop-vlak);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-head.scrolled {
  border-bottom-color: var(--line-2);
  background: var(--kop-vlak-vast);
}
.head-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 68px;
}
@media (min-width: 900px) { .head-row { height: 78px; } }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -.02em;
  text-decoration: none;
  margin-right: auto;
}
.wordmark img { width: 34px; height: 34px; border-radius: 9px; }

.site-nav { display: none; }
@media (min-width: 900px) {
  .site-nav { display: flex; align-items: center; gap: .25rem; }
}
.site-nav a {
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .96rem;
  color: var(--ink-2);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.site-nav a:hover { color: var(--ink); background: var(--paper-2); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Met twee klassen, want .btn staat verderop en zou anders met dezelfde
   specificiteit maar later in het bestand deze display:none overrulen. Dan
   staat de knop op een telefoon naast het hamburgermenu. */
.site-head .head-cta { display: none; }
@media (min-width: 900px) {
  .site-head .head-cta { display: inline-flex; margin-left: .7rem; }
}

/* De themaknop. Standaard volgt de site het toestel, maar wie liever anders
   wil kan hier kiezen, en die keuze blijft staan. Het toestel bepaalt niet
   altijd goed wat iemand nodig heeft: bij migraine wil de een juist donker en
   de ander juist licht, en dat wisselt ook nog per dag.

   Beide pictogrammen staan er, en de stijl laat er één van zien. Zo is er
   niets om te tekenen op het moment dat je klikt en springt er niets. */
.thema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  margin-left: .2rem;
  padding: 0;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.thema:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.thema svg { width: 19px; height: 19px; }
/* Het pictogram toont waar je naartoe gaat, niet waar je bent: in het licht
   staat er een maan, want daar brengt de knop je heen. Dat is wat iemand wil
   weten op het moment dat hij ernaar kijkt. Het opschrift zegt het er hardop
   bij, en het script houdt dat opschrift bij. */
.thema .zon { display: none; }
:root[data-thema="donker"] .thema .zon  { display: block; }
:root[data-thema="donker"] .thema .maan { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .thema .zon  { display: block; }
  :root:not([data-thema="licht"]) .thema .maan { display: none; }
}

/* De taalwissel. Eén link die de andere taal in díe taal noemt, want dat is
   wat iemand zoekt die de huidige taal niet leest. Elke taal heeft een eigen
   adres, dus dit werkt ook zonder script en je kunt een bladzijde in het
   Nederlands doorsturen. */
.taal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 .85rem;
  flex: none;
  margin-left: .3rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.taal:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }

.sheet .taal {
  align-self: flex-start;
  margin: 1rem 0 0;
  border-bottom: 1.5px solid var(--line);
}

.burger {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  border-radius: 12px;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sheet {
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--paper);
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem) 3rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 99;
  overflow-y: auto;
}
.sheet.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.sheet a {
  text-decoration: none;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -.02em;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line-2);
}
/* De opvulling er weer bij. `.sheet a` zet die op nul aan de zijkanten voor de
   menuregels, en dat gold ook voor de knop: dan plakt de tekst tegen de rand
   van de pil. */
.sheet .btn {
  margin-top: 1.7rem;
  border-bottom: 0;
  font-size: 1rem;
  align-self: flex-start;
  padding: .82rem 1.5rem;
}
@media (min-width: 900px) { .sheet { display: none; } }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--forest); color: var(--op-knop, #F7F3EA); }
.btn-primary:hover { background: var(--forest-2); }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn-light { background: var(--on-dark); color: var(--op-licht); }
.btn-light:hover { background: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--teal);
  border-bottom: 1.5px solid rgba(30, 95, 92, .32);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--teal); gap: .62rem; }
.link-arrow.on-dark { color: var(--sage); border-bottom-color: rgba(143, 165, 123, .36); }
.link-arrow.on-dark:hover { border-bottom-color: var(--sage); }

/* De winkelknop komt van Google zelf; hun merkregels staan niet toe dat je hem
   natekent of verandert. Het bestand is de Engelse versie uit hun eigen set.

   Die set levert de knop zonder marge eromheen, terwijl de regels een vrije
   ruimte voorschrijven van een kwart van de hoogte aan alle kanten. Die zetten
   we er hier met opvulling bij, zodat het klopt ongeacht wat ernaast komt te
   staan. Bij 58 pixels hoog is dat ruim 14.

   Staat het bestand er niet, dan toont de knop de tekst eronder in plaats van
   een kapot plaatje. */
.store {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 15px;
  margin: -15px;
  transition: transform .18s var(--ease);
}
.store:hover { transform: translateY(-1.5px); }
.store img { height: 58px; width: auto; }
.store-fallback {
  display: none;
  align-items: center;
  gap: .7rem;
  background: var(--ink);
  color: var(--paper);
  padding: .9rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
}
.store.no-img img { display: none; }
.store.no-img .store-fallback { display: inline-flex; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.price-tag { display: flex; flex-direction: column; line-height: 1.25; }
.price-tag b { font-size: 1.28rem; letter-spacing: -.02em; }
.price-tag span { font-size: .85rem; color: var(--ink-3); }
.band-dark .price-tag span { color: var(--on-dark-2); }

/* ---------------------------------------------------------------- secties */

section { position: relative; }

.band { padding-block: clamp(4rem, 8.5vw, 7.5rem); }
.band-tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.band-paper2 { background: var(--paper-2); }

.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark p { color: var(--on-dark-2); }
.band-dark .lead { color: var(--on-dark); }
.band-dark .small { color: var(--on-dark-2); }

.band-head { max-width: 46ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.band-head p { margin-top: 1rem; }

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

.hero {
  position: relative;
  padding-top: clamp(1.6rem, 3.2vw, 2.4rem);
  padding-bottom: clamp(2rem, 3.8vw, 3rem);
  overflow: hidden;
}
/* Wie de site opent moet de balk bovenaan en het hele toestel zien zonder te
   scrollen. Op een breed scherm vult de kop daarom precies het venster, en de
   breedte van het toestel volgt uit de hoogte die overblijft: de verhouding
   van een telefoon is 412 op 892, dus hoogte gedeeld door 2,165. De 430 die
   eraf gaat is de balk plus de titel plus de marges. */
@media (min-width: 960px) {
  .hero {
    /* Met een bovengrens. Zonder die grens rekt de kop mee met elk scherm, en
       op een hoge of gedraaide monitor krijg je anderhalve meter lucht rond
       dezelfde vier zinnen. */
    min-height: min(calc(100vh - 78px), 880px);
    min-height: min(calc(100svh - 78px), 880px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-art .phone {
    /* Zo groot als past. Wat eraf gaat is de balk bovenaan plus de titel plus
       de marges; wat overblijft is voor het toestel, gedeeld door 2,165 omdat
       een telefoon 412 op 892 is. De aftrek heeft wat speling zodat de kop ook
       nog past als de titel op een smaller scherm over drie regels loopt. */
    --pw: min(340px, calc((100svh - 340px) / 2.165));
  }
}
.hero::before {
  content: '';
  position: absolute;
  top: -36%;
  right: -16%;
  width: min(800px, 96vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--gloed) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 5rem);
    /* Bovenaan uitlijnen en niet centreren. De telefoon is veel hoger dan de
       tekst ernaast, en gecentreerd zakt die tekst dan naar het midden weg met
       een gat onder de kop. */
    align-items: start;
  }
}

/* De titel loopt over de volle breedte en niet in de linkerkolom. In een halve
   kolom past "Curabrein remembers both" pas bij een lettergrootte waarop het
   geen kop meer is; zo mag hij groot blijven. */
.hero-title { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; }
@media (min-width: 700px) { .hero-title { max-width: none; } }

.hero .lead { max-width: 46ch; margin-bottom: 2rem; }
.hero-note { margin-top: 1.5rem; font-size: .88rem; color: var(--ink-3); }
.hero-art { display: flex; justify-content: center; }

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

/* Het toestel. De randen doen het werk: een lichte binnenlijn waar het glas
   het metaal raakt, een donkere buitenlijn eromheen, en een schaduw die dicht
   bij het toestel donker is en ver weg zacht. Zonder die drie leest het als
   een zwarte rechthoek met ronde hoeken. */
.phone {
  position: relative;
  --pw: min(300px, 74vw);
  width: var(--pw);
  aspect-ratio: 412 / 892;
  background: linear-gradient(155deg, #34302A 0%, #17150F 38%, #0F0D09 62%, #2B2822 100%);
  border-radius: 46px;
  padding: 11px;
  flex: none;
  box-shadow:
    0 0 0 1px rgba(255, 252, 244, .14) inset,
    0 1px 0 rgba(255, 252, 244, .10) inset,
    0 0 0 1px rgba(20, 18, 13, .5),
    0 4px 10px -4px rgba(27, 25, 19, .3),
    0 34px 64px -26px rgba(27, 25, 19, .45);
}
/* De knopjes op de zijkant. Klein, maar zonder dat blijft het een plaatje. */
.phone::before {
  content: '';
  position: absolute;
  right: -2px; top: 24%;
  width: 2px; height: 8%;
  border-radius: 2px;
  background: linear-gradient(180deg, #3A362E, #221F18);
}
.phone::after {
  content: '';
  position: absolute;
  left: -2px; top: 20%;
  width: 2px; height: 5%;
  border-radius: 2px;
  background: linear-gradient(180deg, #3A362E, #221F18);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(20, 18, 13, .55);
}
/* Alleen een rechtstreeks kind is de schermafdruk zelf. Zonder die beperking
   pakt deze regel ook de metgezel in het ademscherm, en die wordt dan over het
   hele scherm uitgerekt. */
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Het luidsprekertje, ín het scherm en niet erboven. */
.phone-screen::after {
  content: '';
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 5px;
  background: rgba(20, 18, 13, .34);
  border-radius: 99px;
}

.phone-float { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

/* In een kolom mag het toestel groter. Bij driehonderd punten wordt het scherm
   van 412 op 73% getoond en wordt de tekst in de app zo klein dat hij als
   onscherp leest, terwijl er niets mis is met de afbeelding. */
@media (min-width: 900px) {
  .split-art .phone { --pw: min(348px, 32vw); }
}

/* ------------------------------------------------------------- ademen ---
   Het ademscherm dat echt ademt. Geen filmpje en geen reeks afbeeldingen: de
   ring wordt hier getekend en beweegt op hetzelfde ritme als in de app, vier
   tellen in en zes tellen uit. Wie wil weten hoe dit voelt, ziet het hier
   gebeuren in plaats van erover te lezen.

   Alles binnenin rekent met em, en die em hangt aan de breedte van het
   toestel. Zo klopt de verhouding op elk formaat. */

/* Let op: alles hierbinnen is de app, niet de site. Het scherm heeft een
   vaste papierkleur, dus de kleuren erop zijn die van de app en draaien
   niet mee met de donkere modus van de bezoeker. */
.breath-screen {
  font-size: calc(var(--pw) / 21);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.1em 1.1em 1.3em;
  background: #EAE4DA;
  color: #1B1913;
  text-align: center;
}
.breath-head {
  align-self: flex-start;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -.02em;
}
.breath-sub {
  margin-top: 1.1em;
  font-size: .72em;
  color: #55503F;
}
.breath-sub b { color: #1E5F5C; }

.breath-stage {
  position: relative;
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
}
.breath-halo, .breath-ring {
  position: absolute;
  border-radius: 50%;
  left: 50%; top: 50%;
  translate: -50% -50%;
}
/* De buitenring staat stil en is de bovengrens: bij een volle inademing komt
   de binnenring er precies tegenaan. Ze zijn daarom even groot, en alleen de
   binnenste beweegt. Toen ze allebei meebewogen raakten ze elkaar nooit, en
   dan klopt het niet met wat de oefening doet. */
.breath-halo {
  width: 15.4em; height: 15.4em;
  border: .07em solid rgba(122, 106, 168, .34);
}
.breath-ring {
  width: 15.4em; height: 15.4em;
  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. Ze wisselen op
   hetzelfde moment als het woord, want dat mondje is waar het ademen aan te
   zien is. Beide uitgesneden op hetzelfde vak, dus ze staan precies over
   elkaar en er springt niets. */
.breath-pal {
  position: relative;
  display: block;
  width: 8.4em;
  transform-origin: 50% 92%;
  animation: adem-pal 10s ease-in-out infinite;
}
.breath-pal img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}
.breath-pal .pal-uit { position: absolute; inset: 0; }
.breath-pal .pal-in  { animation: mond-in  10s steps(1, end) infinite; }
.breath-pal .pal-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. Dat is niet symmetrisch, en dat hoort zo:
   een langere uitademing is het hele punt van dit ritme. */
/* Niet kleiner dan 0,72: daaronder wordt de ring smaller dan de metgezel en
   verdwijnt hij bij het uitademen achter hem. Dan zie je alleen nog de
   buitenring en lijkt er niets te bewegen. */
@keyframes adem-ring {
  0%   { transform: scale(.72); }
  40%  { transform: scale(1); }
  100% { transform: scale(.72); }
}
/* De metgezel ademt mee en wordt niet alleen groter: hij rekt zich uit bij het
   inademen en zakt bij het uitademen weer in elkaar, met zijn voeten als
   draaipunt.

   Dezelfde drie punten als de ring en geen enkel punt ertussen. Er stond hier
   eerst een extra sleutel op 70%, en daardoor was hij op zeventig procent al
   uitgeademd en ging hij de laatste dertig procent weer omhoog. Je zag dus
   twee keer inademen en de uitademing verdween. */
/* Gelijkmatig groter en weer kleiner, niet uitgerekt. Er stond hier eerst een
   scale met verschillende waarden voor breed en hoog, en dan wordt hij bij het
   inademen zichtbaar dun en smal. Een wezen dat zich vol lucht zuigt wordt
   groter, niet smaller. */
@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); }
}

.breath-word {
  position: relative;
  height: 1.5em;
  margin-top: .5em;
  font-weight: 700;
  font-size: 1.05em;
  color: #1E5F5C;
}
.breath-word span {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  animation: 10s steps(1, end) infinite;
}
.breath-word .w-in  { animation-name: woord-in; }
.breath-word .w-out { 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; } }

.breath-foot {
  font-size: .62em;
  line-height: 1.5;
  color: #55503F;
  margin: .8em 0 0;
}
.breath-stop {
  margin-top: .7em;
  font-size: .72em;
  font-weight: 700;
  color: #1E5F5C;
}

@media (prefers-reduced-motion: reduce) {
  .breath-halo, .breath-ring, .breath-pal,
  .breath-pal img, .breath-word span { animation: none; }
  /* Stil beeld: zijn gewone mond, en het woord "In". */
  .breath-pal .pal-uit { opacity: 0; }
  .breath-word .w-out { opacity: 0; }
}

/* ------------------------------------------------------- bladeren ---
   De vijf bladzijden van het document, één voor één. Iemand die overweegt
   hier geld voor te geven wil zien wat er uit de printer komt, en dat zijn
   vijf bladzijden en niet één. */

.pager { max-width: 560px; margin-inline: auto; width: 100%; }
.pager-view {
  position: relative;
  aspect-ratio: 1000 / 1413;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--vel-rand);
  box-shadow: var(--shadow-lg);
}
/* Eerst gaat de oude bladzijde weg, dán komt de nieuwe. Ze overlappen niet
   in de tijd, en dat is de enige manier om te voorkomen dat je er twee tegelijk
   ziet.

   Een gewone overvloeier kan dat niet. Wat je ook onder een half doorzichtig
   beeld legt, halverwege zijn ze allebei half zichtbaar en lees je de ene
   dwars door de andere heen. Een witte ondergrond helpt niet, want die is dan
   zelf ook half doorzichtig.

   Dus: de oude vervaagt in twee tienden weg naar het witte vlak, en de nieuwe
   wacht die twee tienden af voordat hij begint. Samen vier tienden, en op geen
   enkel moment staan er twee bladzijden tegelijk. */
.pager-page {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .2s var(--ease);
  pointer-events: none;
}
.pager-page.on {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .2s;
}
.pager-page img { width: 100%; height: 100%; object-fit: cover; }

.pager-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.pager-dot {
  width: 40px; height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--line);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pager-dot:hover { background: var(--ink-3); }
.pager-dot[aria-current="true"] { background: var(--teal); transform: scaleY(1.6); }
.band-dark .pager-dot { background: rgba(237,232,216,.22); }
.band-dark .pager-dot[aria-current="true"] { background: var(--sage); }

.pager-label {
  text-align: center;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--ink-3);
}
.band-dark .pager-label { color: var(--on-dark-2); }

@media (prefers-reduced-motion: reduce) {
  .pager-page { transition: none; }
}

/* ------------------------------------------------------------------ split */

.split { display: grid; gap: clamp(2.2rem, 4.5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-art-first .split-art { order: -1; }
}
.split-text .h2 { margin-bottom: 1.1rem; }
.split-art { display: flex; justify-content: center; width: 100%; min-width: 0; }
.split + .split { margin-top: clamp(4rem, 8vw, 7rem); }
/* Voor een split waar de ene kant veel hoger is dan de andere. Gecentreerd
   zweeft het lage deel dan halverwege met een gat erboven. */
.split-top { align-items: start; }

.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--card);
  border: 1px solid var(--line-2);
  max-width: 400px;
  width: 100%;
}
.frame img { width: 100%; }

.paper-sheet {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  background: #fff;
  width: 100%;
}
.sheet-stack { position: relative; padding: 0 20px 24px 0; max-width: 520px; width: 100%; }
.sheet-stack .back {
  position: absolute;
  right: 0; bottom: 0;
  width: 78%;
  opacity: .95;
  z-index: 0;
}
.sheet-stack .front { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ lijst */

.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .8rem;
  align-items: start;
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  width: 18px; height: 18px;
  margin-top: .3em;
  border-radius: 50%;
  background: rgba(143, 165, 123, .42);
  box-shadow: inset 0 0 0 2px var(--sage);
}
.band-dark .ticks li::before { background: rgba(143, 165, 123, .26); }

/* --------------------------------------------------------------- strookje */

/* De vier beloftes staan in de kop, onder de knop. Ze stonden eerst als losse
   strook van rand tot rand onder de kop, en dat viel twee keer verkeerd: de
   strook liep buiten het kader waar al het andere binnen staat, en naast de
   telefoon bleef driehonderd pixels leegte over. Nu vullen ze die ruimte en
   staan ze waar iemand ze meteen leest. */
.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 2.4rem;
}
.claim { background: var(--paper); padding: 1rem 1.1rem; }
.claim b { display: block; font-size: .92rem; margin-bottom: .15rem; }
.claim span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; display: block; }

/* ---------------------------------------------------------------- getallen */

.marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 820px) { .marks { grid-template-columns: repeat(4, 1fr); } }
.mark b {
  display: block;
  font-size: clamp(2.6rem, 5.4vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-dark);
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.mark span { font-size: .95rem; color: var(--on-dark-2); line-height: 1.45; display: block; }

/* ------------------------------------------------------------------- kaart */

.cards { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow);
}
.card .h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-2); font-size: .97rem; }

.band-dark .card { background: var(--dark-2); border-color: rgba(237,232,216,.09); box-shadow: none; }

/* Donkere inkt op een donkere band. `.card p` en `.note-item p` zetten allebei
   var(--ink-2), staan verderop in het bestand dan `.band-dark p` en winnen dus
   op gelijke specificiteit. Gemeten kwam dat uit op een contrast van 1,76
   terwijl 4,5 het minimum is: onleesbaar, en precies op de plek waar staat dat
   deze app voor mensen met slechte ogen en brainfog gemaakt is. */
.band-dark .card p,
.band-dark .note-item p,
.band-dark .muted { color: var(--on-dark-2); }
/* Voor de zin die het antwoord van een sectie is. Die stond op tweeënzeventig
   procent, tussen twee zinnen op vol, en dan is uitgerekend de belangrijkste
   regel de flauwste van het blok. */
.band-dark .vol { color: var(--on-dark); }
.band-dark .note-item { border-top-color: rgba(237, 232, 216, .16); }

.notes { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 760px) { .notes-2 { grid-template-columns: repeat(2, 1fr); } }
.note-item { border-top: 1px solid var(--line); padding-top: 1.15rem; }
.note-item .h3 { margin-bottom: .45rem; }
.note-item p { color: var(--ink-2); font-size: .97rem; }

/* -------------------------------------------------------------------- prijs */

/* De prijs. Dit is de plek waar iemand beslist, dus hij mag niet kaal zijn.
   Twee kolommen: links waar het over gaat en de knop, rechts wat je ervoor
   krijgt. Een warme rand eromheen zodat het vak zelf iets uitnodigends heeft
   en niet leest als een tabel. */
.pricebox {
  position: relative;
  background:
    linear-gradient(180deg, var(--prijs-gloed) 0%, transparent 42%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  box-shadow: var(--shadow-lg);
  max-width: 940px;
  margin-inline: auto;
  overflow: hidden;
}
.pricebox::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sage), var(--teal) 46%, var(--sand));
}
.price-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.2rem);
  /* Bovenaan uitlijnen. De lijst rechts is veel hoger dan de prijs links, en
     gecentreerd zakt het bedrag naar het midden met een gat erboven. */
  align-items: start;
}
@media (min-width: 800px) {
  .price-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .price-side { border-left: 1px solid var(--line-2); padding-left: clamp(2rem, 4vw, 3.2rem); }
}
.pricebox .amount {
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  display: block;
  color: var(--forest);
}
.pricebox .once {
  color: var(--ink-2);
  margin: .5rem 0 0;
  font-size: 1.05rem;
}
.pricebox .strike {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: .92rem;
  color: var(--ink-3);
}
.pricebox .strike s { opacity: .75; }
.pricebox .cta-row { margin-top: 1.8rem; }
/* Wat je voor dat geld krijgt, uitgeschreven. Vier zinnetjes over wat er niet
   is zeggen niets over wat er wel is, en dat is nu net de vraag die iemand
   heeft op het moment dat hij naar de prijs kijkt. */
.gets { margin-top: 1.2rem; }
.gets h4 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 1rem;
}
.gets ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem .9rem;
}
/* Eén kolom. Het prijsvak staat zelf al in twee kolommen, en deze regels
   nog eens halveren geeft tekstkolommen van nog geen tweehonderd pixels waar
   elke zin in zes stukjes breekt. */
/* Geen raster hier. De regels bestaan uit vetgedrukte tekst gevolgd door
   gewone tekst, en in een raster wordt dat losse stuk tekst een eigen vakje
   in de eerste kolom van dertien pixels. Dan valt de zin uiteen in een woord
   per regel. Met het bolletje los erover blijft het gewoon een zin. */
.gets li {
  position: relative;
  padding-left: 1.55rem;
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
}
.gets li::before {
  content: '';
  position: absolute;
  left: 0; top: .38em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(143, 165, 123, .45);
  box-shadow: inset 0 0 0 1.5px var(--sage);
}
.gets li b { color: var(--ink); font-weight: 700; }
.gets .alles {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
  font-size: .93rem; color: var(--ink-2);
}

.pricebox .ticks { margin-top: 0; gap: 1.15rem; }
.pricebox .ticks li { font-size: 1rem; }
/* Allebei in de tweede kolom. Zonder dit belandt de span in de eerste kolom
   van twintig pixels en valt hij uiteen in een woord per regel. */
.pricebox .ticks li b,
.pricebox .ticks li span { grid-column: 2; }
.pricebox .ticks li b { display: block; margin-bottom: .1rem; }
.pricebox .ticks li span { color: var(--ink-2); font-size: .93rem; line-height: 1.5; }

/* ------------------------------------------------------------------- kader */

.callout {
  border-left: 3px solid var(--teal);
  background: var(--kader-vlak);
  padding: 1.2rem 1.4rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .97rem;
}
.callout.warn { border-left-color: var(--brick); background: var(--kader-warm); }
.band-dark .callout { background: rgba(237,232,216,.06); border-left-color: var(--sage); }

/* Het adres is de knop van deze bladzijde. Het stond er als een klein kadertje
   met tekst en zag er niet uit als iets om aan te klikken; nu vult het zijn
   kolom, met een envelop ernaast zodat je in één oogopslag ziet wat er gebeurt
   als je erop drukt. */
.mailbox {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  font-size: clamp(1rem, 2.3vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
  word-break: break-word;
}
.mailbox svg { flex: none; color: var(--teal); }
.mailbox:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ voet */

.site-foot {
  background: var(--dark);
  color: var(--on-dark-2);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: .95rem;
}
.foot-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot-brand {
  display: flex; align-items: center; gap: .7rem;
  color: var(--on-dark); font-weight: 700; font-size: 1.1rem; margin-bottom: .9rem;
}
.foot-brand img { width: 34px; height: 34px; border-radius: 9px; }
.foot-col h4 {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-col a { text-decoration: none; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--on-dark); }
.foot-bottom {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(237,232,216,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  font-size: .85rem;
}

/* ------------------------------------------------------------- beweging */

/* Verbergen doet alleen het script, en pas nadat het zelf heeft vastgesteld
   dat het draait en dat beweging gewenst is. Andersom (verborgen in de stijl,
   zichtbaar maken met script) betekent dat een bezoeker een lege bladzijde
   krijgt zodra er iets misgaat met dat script. Op een site voor mensen die
   ziek zijn is dat de verkeerde kant om te falen. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .reveal.d1 { transition-delay: .08s; }
.js-anim .reveal.d2 { transition-delay: .16s; }
.js-anim .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .phone-float { animation: none; }
  .btn:hover, .store:hover, .mailbox:hover { transform: none; }
}

/* ------------------------------------------------ het eigen woord ---
   Het stuk waarin de maker zelf aan het woord is. Dat stond er als drie
   gewone alinea's tussen alle andere gewone alinea's, en dan leest het als
   nog een blok uitleg terwijl het het enige stuk op de site is waar geen app
   maar een mens praat. Een streep ernaast en een handtekening eronder maken
   dat verschil zichtbaar zonder er een citaatblok van te maken. */
.woord {
  border-left: 3px solid var(--sage);
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
  max-width: 62ch;
}
.naam {
  display: block;
  margin-top: 1.8rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.naam small {
  display: block;
  font-weight: 400;
  font-size: .86rem;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: .15rem;
}

/* ------------------------------------------------- de vier dingen ---
   Waar het op neerkomt, naast de titel in plaats van eronder. De rechterhelft
   van die kop stond leeg terwijl dit precies de vier zinnen zijn die iemand
   wil lezen voordat hij aan de rest begint. */
.vier { display: grid; gap: 1.4rem; }
.vier li { display: grid; grid-template-columns: 2.1rem 1fr; gap: .9rem; align-items: start; }
.vier li b {
  font-size: 1.5rem;
  line-height: 1;
  /* Niet saliegroen: dat haalt op papier maar 2,4 en zelfs voor grote tekst
     is 3,0 het minimum. Hetzelfde blauwgroen als de bovenkopjes. */
  color: var(--teal);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.vier li span { color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; }
.vier li strong { color: var(--ink); }

/* --------------------------------------------------- metgezellen ---
   De vier soorten staan stil. Vier wezens die uit zichzelf op en neer wippen
   trekken de aandacht weg van de tekst, en op een bladzijde voor mensen met
   duizeligheid is dat het verkeerde soort leven.

   Ga je er met de muis overheen, dan reageert hij wel: hij veert op en lacht.
   Dat is hetzelfde als in de app, waar hij antwoordt op wat jij doet en niet
   uit zichzelf staat te bewegen. */
.metgezels {
  display: flex;
  justify-content: center;
  gap: clamp(.6rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin: 2.4rem 0 2rem;
}
.metgezel {
  position: relative;
  width: clamp(74px, 17vw, 120px);
  transform-origin: 50% 94%;
  transition: transform .34s cubic-bezier(.2, 1.5, .4, 1);
  cursor: default;
}
.metgezel img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}
.metgezel .lacht {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .12s var(--ease);
}
.metgezel:hover, .metgezel:focus-visible { transform: translateY(-7px) scale(1.04); }
.metgezel:hover .lacht, .metgezel:focus-visible .lacht { opacity: 1; }
.metgezel:hover .rust,  .metgezel:focus-visible .rust  { opacity: 0; }
.metgezel .rust { transition: opacity .12s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .metgezel { transition: none; }
  .metgezel:hover, .metgezel:focus-visible { transform: none; }
}

/* ------------------------------------------------------ springen ---
   Een inhoudsopgave bovenaan de lange bladzijde. Wie hier komt met één vraag
   ("kan het ook mijn medicatie bijhouden?") hoeft dan niet eerst alles te
   lezen, en dat is precies de bezoeker die deze bladzijde nodig heeft. */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.jump a {
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.jump a:hover { border-color: var(--teal); color: var(--teal); background: var(--card); }

/* De aandoeningen zelf, uitgeschreven. Dat er vierentachtig zijn is een getal;
   ze zien staan is iets anders. Wie zijn eigen aandoening ertussen ziet, weet
   in één oogopslag of deze app over hem gaat. */
.groep + .groep { margin-top: 2rem; }
.groep h4 {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 .9rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips span {
  font-size: .87rem;
  padding: .34rem .75rem;
  border-radius: 999px;
  background: rgba(237, 232, 216, .08);
  border: 1px solid rgba(237, 232, 216, .16);
  color: var(--on-dark-2);
  line-height: 1.4;
}
.chips span.mij { background: rgba(143,165,123,.22); border-color: rgba(143,165,123,.5); color: var(--on-dark); }

/* --------------------------------------------------------------- artikel */

.prose h2 { margin-top: clamp(2.6rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .5rem; }
.prose > p, .prose > ul { color: var(--ink-2); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

hr.rule { border: 0; border-top: 1px solid var(--line-2); margin: clamp(2.6rem, 5vw, 3.6rem) 0; }