/* ══════════════════════════════════════════════════════════════════════════
   DE SUBPAGINA'S

   `stijl.css` is de homepage. Dit bestand is wat er voor de elf pagina's
   daarachter bij komt, en het is bewust KORT: de atomen (label, kop, knop,
   link, scherm, haarlijn, prijskaart, vragenlijst) worden hergebruikt, de
   SAMENSTELLING verschilt per pagina.

   WAAROM DIE VERDELING. De klacht die acht rondes lang terugkwam was dat elke
   sectie dezelfde opbouw had: label, kop, raster van gelijke blokjes. Dat
   gevaar is bij elf pagina's groter dan bij een, want een gedeelde CSS-klasse
   voor "een pagina" levert per definitie elf dezelfde pagina's op. Daarom
   staat hieronder geen `.subpagina`-sjabloon maar een hero die vier standen
   kent, plus per pagina de twee of drie blokken die alleen daar voorkomen.

   ELKE PAGINA HEEFT EEN EIGEN BEELDTAAL, en geen daarvan is nieuw materiaal:
     plan            het gedrukte document + de dertien sectienamen als lijst
     coach           een nagebouwd gesprek (geen schermafdruk) + Vance
     hoe-het-werkt   de vier echte platformschermen, elk op ware grootte
     prijzen         twee kaarten en verder niets, want hier wordt gekozen
     over-ons        typografie op de volle breedte
     resultaten      de cover van het voorbeeldplan
     contact         Vance die zwaait
     juridisch       een documentopmaak met de inhoudsopgave ernaast
   ══════════════════════════════════════════════════════════════════════════ */

:root { --navh: 74px; }

/* ── DE PAGINA-HERO ───────────────────────────────────────────────────────
   DE NAVBALK IS DOORZICHTIG EN WORDT PAS WIT ALS JE SCROLLT. Dat werkt op de
   homepage omdat daar een donkere foto achter ligt. Een subpagina die licht
   opent heeft dus wit op wit, en daarom zet `body.nav-licht` de balk meteen in
   zijn vaste stand (zie het script onderaan elke pagina).

   De hoogte komt van de inhoud, niet van `100vh`. Een subpagina die het hele
   scherm vult voor een kop van drie woorden laat de lezer scrollen naar iets
   wat hij al had kunnen zien. */
.ph { position: relative; padding: calc(var(--navh) + 76px) 0 var(--sec); overflow: clip; }
.ph-donker {
  background: var(--navy); color: #FFFFFF;
  --haarlijn: rgba(255, 255, 255, .16);
  --tekst-2: rgba(255, 255, 255, .78);
  --tekst-3: rgba(255, 255, 255, .6);
  --tekst-4: rgba(255, 255, 255, .5);
  --coral-tx: var(--coral);
  --teal-tx: var(--teal);
}
.ph-wit { background: var(--wit); }
.ph-grond { background: var(--grond); }

/* De koraal gloed van de afsluiter, maar linksboven in plaats van gecentreerd:
   hij zet het leesbegin van de pagina aan zonder als vlak te lezen. */
.ph-donker::before {
  content: ''; position: absolute; left: -10%; top: -30%;
  width: 900px; height: 700px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,83,108,.15), rgba(255,83,108,0) 70%);
  pointer-events: none;
}
.ph > * { position: relative; }
.ph-donker .knop {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 1px 2px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.3);
}

/* Tekst links, voorwerp rechts. De verhouding is 1,15 tegen 1 en niet 1 tegen
   1: twee even brede helften lezen als een raster, en de tekst moet de
   leeskant houden. */
.ph-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--r6); align-items: center; }
/* TWEE BEGRENZINGEN OP DEZELFDE KOLOM IS ER EEN TE VEEL. `.ph-tekst` stond op
   30ch, en dat is bij de basisletter ongeveer 400 pixels - smaller dan het
   rastervak van ~500 waar hij in staat. Gevolg: de kop van /coach brak over
   VIER regels ("Een / marketeer / in je / broekzak") terwijl er ruimte genoeg
   was. In het raster begrenst de KOLOM, buiten het raster de max-width; de
   lead houdt zijn eigen leesmaat van 46 tekens. */
.ph-tekst { max-width: 30ch; }
.ph-grid .ph-tekst { max-width: none; }
.ph h1 { margin-top: var(--r2); }
.ph .lead { color: var(--tekst-2); }
.ph-acties { margin-top: var(--r5); display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.ph-note { margin-top: var(--r3); font-size: 15px; color: var(--tekst-3); }

/* Een hero zonder voorwerp: alleen type, over de volle breedte. Dat is de
   stand van /hoe-het-werkt en /over-ons, en hij bestaat zodat niet elke
   pagina met hetzelfde tweeluik opent. */
.ph-breed .ph-tekst { max-width: none; }
.ph-breed h1 { max-width: 16ch; }
.ph-breed .lead { max-width: 50ch; }

/* ── HET UUR IN DE HERO VAN /hoe-het-werkt ────────────────────────────────
   Deze hero was leeg: een label, een kop van drie woorden, een regel en twee
   knoppen. Dat is de enige hero van de site die niets LAAT zien, en op precies
   de pagina die over tempo gaat.

   WAT ER STAAT IS DE KLOK ZELF, en hij is op schaal: 45 minuten naast 15 is
   drie staat tot een, dus `3fr 1fr`. Daarmee is de balk geen plaatje maar een
   meting - verander je een van de twee tijden, dan hoor je de verhouding hier
   mee te veranderen.

   HET IS EEN BALK EN GEEN TWEE KNOPPEN (ronde 51). Er stonden twee losse
   afgeronde blokken met zes pixels lucht ertussen, en dat leest als twee
   knoppen naast elkaar in plaats van als één uur dat in tweeën valt. Nu één
   container met `overflow: hidden` en een naad van twee pixels: de ronding zit
   op het GEHEEL, en door de naad zie je de band erdoorheen.

   DE KLEUR DRAAGT WIE WAT DOET: het deel dat JIJ invult is open (de band met
   een waas erover), het kwartier dat WIJ schrijven is dicht en koraal. Dat is
   meteen het antwoord op de vraag die onder de knop zit, en het laat zich op
   navy ook beter lezen dan op grond: koraal op bijna-wit is een vlak, koraal
   op navy is een accent.

   HIJ RIJMT OP DE TIJDLIJN ERONDER. Dezelfde klok, hier liggend als overzicht
   en daar staand als verhaal; de drie tijden onder de balk zijn letterlijk de
   eerste drie knopen. De VIERDE ("daarna") staat er bewust niet bij: die valt
   buiten het uur, en dat is nou juist wat de balk laat zien. */
.uur { margin-top: var(--r5); max-width: 1100px; }
.uur-rij { display: grid; grid-template-columns: 3fr 1fr; gap: 2px; border-radius: 14px; overflow: hidden; }
.uur-deel { padding: 24px 26px; display: grid; gap: 7px; align-content: center; min-height: 128px; }
.uur-deel strong { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; }
.uur-deel span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* HET OPEN DEEL IS GEEN LEGE PLEK MAAR EEN VLAK. Zonder die waas van 9% zou
   het gat in de balk even donker zijn als de band en lijkt de balk gewoon
   korter: de verhouding is dan niet meer af te lezen. */
.uur-jij { background: rgba(255, 255, 255, .09); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.uur-jij span { color: rgba(255, 255, 255, .66); }
/* Navy op koraal haalt 4,96:1; wit zou 3,1 halen en dat is te weinig voor een
   label van 12px met kapitalen. Zelfde afweging als bij de cookieknop. */
.uur-wij { background: var(--coral); color: var(--navy); }
.uur-wij span { color: var(--navy); }

/* DE AS IS EEN POSITIE EN GEEN RIJ. De middelste markering moet op 75% staan
   en niet "ergens in het midden": hij valt samen met de naad, en dat is het
   enige wat bewijst dat de balk op schaal is. Vandaar absoluut geplaatst op
   die ene waarde in plaats van met `space-between`. */
.uur-as { position: relative; margin-top: 16px; min-height: 22px; font-size: 15px; color: var(--tekst-3); }
.uur-mrk { position: absolute; top: 0; white-space: nowrap; }
.uur-mrk b { font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; margin-right: 7px; }
.uur-mrk.start { left: 0; }
.uur-mrk.knip  { left: 75%; transform: translateX(-50%); }
.uur-mrk.eind  { right: 0; }
/* EEN STREEPJE NAAR DE BALK, want anders is de uitlijning iets wat je moet
   AANNEMEN. Met het streepje op de naad is in één oogopslag te zien dat 0:45
   daar echt staat, en dat is het enige bewijs dat de balk op schaal is. */
.uur-mrk::before { content: ''; position: absolute; top: -13px; width: 1px; height: 9px; background: rgba(255, 255, 255, .3); }
.uur-mrk.start::before { left: 0; }
.uur-mrk.knip::before  { left: 50%; }
.uur-mrk.eind::before  { right: 0; }

/* OP EEN TELEFOON STAAN ZE ONDER ELKAAR en draagt de TEKST de verhouding. Op
   een kolom van circa 300 pixels is het rechtervak 70 breed, en daar past
   "15 min" niet in, laat staan het label eronder. De naad vervalt dan ook:
   twee blokken boven elkaar met een gat van twee pixels is geen balk meer,
   dus daar is het weer twee kaarten met hun eigen ronding.

   DE MIDDELSTE MARKERING GAAT WEG. Hij hoort op de naad en die is er niet
   meer; op 75% van een gestapelde balk staat hij nergens op. De tijdlijn
   eronder noemt 0:45 sowieso bij stap 02. */
@media (max-width: 700px) {
  .uur-rij { grid-template-columns: 1fr; gap: 8px; border-radius: 0; overflow: visible; }
  .uur-deel { min-height: 0; padding: 16px 18px; border-radius: 12px; }
  .uur-deel strong { font-size: 25px; }
  .uur-as { display: flex; justify-content: space-between; gap: var(--r3); }
  .uur-mrk { position: static; }
  .uur-mrk::before { display: none; }
  .uur-mrk.knip { display: none; }
}

/* ── DE CIJFERSTRIP ───────────────────────────────────────────────────────
   Vier getallen die de pagina eronder waarmaakt. Ze staan ALLEEN waar ze
   natelbaar zijn: 86 komt uit `QUESTIONS` in intake-app.js, 13 uit
   `PASS_SECTIONS`, 12 en 90 uit het plan zelf. Geen nieuw feit dus; ze staan
   al in de lopende tekst van de bestaande pagina en worden hier zichtbaar. */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r4); }
.cijfer { border-top: 1px solid var(--haarlijn); padding-top: var(--r3); }
.cijfer b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 4.4vw, 62px); line-height: 1; }
.cijfer span { display: block; margin-top: var(--r1); font-size: 15px; color: var(--tekst-3); }

/* De cijferstrip IN de hero van /start, vlak onder de knop. Dat is de plek
   waar hij het tekstritme breekt op het moment dat er het meest toe doet; op
   een eigen sectie eronder zou hij een rij losse getallen zijn. */
.ph-cijfers { margin-top: var(--r6); }
/* De acties binnen een strook dragen hun eigen ruimte al via de strook zelf. */
.strook .ph-acties { margin-top: 0; }

/* ── DE SECTIELIJST VAN HET PLAN ──────────────────────────────────────────
   DIT IS DE INHOUDSOPGAVE DIE OP DE HOMEPAGE TWEE KEER SNEUVELDE (ronde 15 en
   16), en dat is geen tegenspraak. Daar was het een nice-to-have naast een
   pitch die zijn ruimte harder nodig had; hier is het de pagina ZELF - wie op
   /plan komt wil weten wat erin zit, en dertien namen zeggen dat sneller dan
   dertien alinea's.

   Twee kolommen op breed, een op smal. Het nummer staat in de marge en is
   gedempt tot 52% inkt: dat haalt 3,21:1 en dat is de ondergrens voor tekst
   vanaf 24 pixels. Lichter mag niet, ook al is het "maar" een nummer - je
   gebruikt het om te scannen. */
.secties { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r6); }
.sectie-r { display: flex; gap: var(--r3); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--haarlijn); }
.sectie-n { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--tekst-4); min-width: 34px; }
.sectie-t { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.14; }
.sectie-r.vw .sectie-t { color: var(--tekst-3); }
.sectie-vw { margin-top: var(--r4); font-size: 15px; color: var(--tekst-3); }

/* ── DE TIJDLIJN ──────────────────────────────────────────────────────────
   Vier stappen met een tijd ernaast. Verschilt bewust van `.stap-lijst` op de
   homepage: daar is het een rij van vier korte regels, hier dragen de stappen
   een alinea en een tijdsaanduiding, en dan werkt een verticale lijn beter dan
   een rij. */
.tl { display: grid; gap: 0; }
.tl-r { display: grid; grid-template-columns: 180px 1fr; gap: var(--r5); padding: var(--r4) 0; border-top: 1px solid var(--haarlijn); }
.tl-r:last-child { border-bottom: 1px solid var(--haarlijn); }
.tl-wanneer { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-tx); padding-top: 6px; }
.tl-wanneer span { display: block; margin-top: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 15px; color: var(--tekst-3); }
.tl-t { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.tl-d { margin-top: var(--r2); color: var(--tekst-2); max-width: 54ch; }

/* ── DE STAPPENRAIL OP /start ─────────────────────────────────────────────
   "Stap 01" stond hier als klein koraal kapitaalkopje, drie keer onder elkaar.
   Dat is precies de vorm die op deze pagina ook boven elke sectie stond en die
   er op verzoek uit moest: klein, kapitaal, koraal, met letterafstand.

   WAT ERVOOR TERUGKOMT: het cijfer groot en stil, en de DUUR als het feit dat
   telt. Die duur is op een advertentiepagina de belangrijkste van de twee -
   een bezoeker weegt moeite en tijd, niet het rangnummer - en hij staat nu
   leesbaar in plaats van als bijregel onder een label.

   GEEN KORAAL MEER IN DEZE BAND, en dat is geen vergissing. Koraal is op deze
   pagina de kleur van HANDELEN; de knop staat vlak hieronder in de afsluiter en
   in de vaste balk. Drie koraal cijfertjes die nergens heen leiden nemen daar
   aandacht van af. De band ervoor draagt teal, de band erna navy: de afwisseling
   zit tussen de secties, niet binnen deze.

   `.stapcijfers` IS NODIG: `.tl-wanneer` staat in deze gedeelde stylesheet en
   wordt ook gebruikt door /plan en /coach, die dezelfde "Stap 01"-vorm dragen.
   Zonder die klasse verandert dit drie pagina's in een keer, en twee daarvan
   staan hier niet ter beoordeling. */
.tl.stapcijfers .tl-wanneer {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--tekst-3); padding-top: 2px;
}
.tl.stapcijfers .tl-wanneer b {
  display: block; font-weight: 600; font-size: 44px; line-height: .9;
  color: rgba(var(--inkt), .34); font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.tl.stapcijfers .tl-wanneer span {
  display: block; margin-top: 0; font-family: var(--sans); font-weight: 600;
  font-size: 16px; letter-spacing: 0; text-transform: none; color: rgb(var(--inkt));
}

/* ── DE SCENES ────────────────────────────────────────────────────────────
   /hoe-het-werkt wordt gedragen door vier ECHTE platformschermen, een per
   stap. Ze staan om en om, en het beeld is breder dan de tekstkolom: dat is
   hetzelfde redactionele middel als het grote planbeeld op de homepage.

   HET NUMMER IS GROOT EN STAAT IN DE MARGE. Niet als versiersel maar omdat de
   vier scenes anders vier losse blokken zijn in plaats van een volgorde. */
.scene { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--r6); align-items: center; }
.scene + .scene { margin-top: calc(var(--sec) - 12px); }
.scene.om { grid-template-columns: 1.25fr 1fr; }
.scene.om .scene-tekst { order: 2; }
.scene-n { font-family: var(--serif); font-weight: 600; font-size: 72px; line-height: 1; color: var(--tekst-4); }
.scene h2 { margin-top: var(--r2); }
.scene-d { margin-top: var(--r3); color: var(--tekst-2); max-width: 46ch; }
.scene-chips { margin-top: var(--r4); display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--haarlijn); color: var(--tekst-2); }

/* ── DE TIJDLIJN OP /hoe-het-werkt ────────────────────────────────────────
   DEZE PAGINA GAAT OVER TIJD EN DAT WAS NERGENS TE ZIEN. Er stonden vier
   `.scene`-blokken onder elkaar waarvan er DRIE identiek waren opgebouwd
   (nummer, kop, alinea, chips, breed donker scherm): geen volgorde, geen
   verband, geen tempo - terwijl de hero er letterlijk boven zegt "binnen een
   uur begin je". Zo is het gemeld: visueel niet mooi genoeg, het moet uniek
   zijn. Het unieke zat al in de inhoud en niet in de opmaak.

   WAT DEZE PAGINA ALS ENIGE HEEFT IS EEN KLOK. 0:00 is het moment dat je
   afrekent, 0:45 dat je intake erop zit, 1:00 dat je plan er staat, en daarna
   loopt het door. Die vier tijden staan in de MARGE, aan een doorlopende lijn
   met het stapnummer als knoop. Daarmee is het geen rij blokken meer maar een
   verloop, en het is nergens anders na te maken: een concurrent die deze vorm
   kopieert moet er zijn eigen tijden in zetten.

   DE TIJDEN ZIJN GEEN NIEUWE BELOFTE. 45 minuten intake en een kwartier
   schrijven staan al op deze pagina, in `site-chat-kennis.ts` ("Hoe lang
   dingen duren") en onder de elf Meta-advertenties. Verandert een van die
   twee, verander deze mee - dan is 1:00 niet langer waar.

   DE LIJN ZIT OP DE STAP ZELF, niet op de houder. Elke stap tekent zijn eigen
   stuk van boven tot onder, en omdat de stappen met PADDING aan elkaar sluiten
   in plaats van met een marge is het resultaat één doorlopende lijn. Zo kan
   elk stuk ook zijn eigen voortgang dragen. */
/* De lijn staat MIDDEN in de tussenruimte: klok tot 104, lijn op 140, inhoud
   vanaf 176. De knoop is 40 breed, dus hij houdt aan beide kanten 16 pixels
   vrij. Verzet je er een, verzet de andere twee mee. */
.tijdlijn { --tl-x: 140px; }
.tw { position: relative; display: grid; grid-template-columns: 104px 1fr; column-gap: 72px; padding-bottom: var(--sec); }
.tw:last-child { padding-bottom: 0; }

.tw::before, .tw::after {
  content: ''; position: absolute; left: var(--tl-x); top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
}
.tw::before { background: var(--haarlijn); }

/* DE LAATSTE LIJN LOOPT DOOD IN EEN VERLOOP en stopt niet op een rand. Na
   stap 04 houdt het verhaal niet op - daar staat "daarna, elke week" - en een
   lijn die hard eindigt zegt het tegenovergestelde. */
.tw:last-child::before {
  bottom: auto; height: 300px;
  background: linear-gradient(var(--haarlijn) 30%, rgba(26, 37, 48, 0));
}
/* DE VOORTGANGSLIJN KRIJGT DEZELFDE UITDOVING. Zonder dit is de grijze lijn
   wel een verloop en de koraal lijn erbovenop een harde streep met een
   afgehakt eind - en omdat koraal de grijze volledig afdekt, zie je alleen
   die harde streep. */
.tw:last-child::after {
  bottom: auto; height: 300px;
  background: linear-gradient(var(--coral) 30%, rgba(255, 83, 108, 0));
}

/* DE VOORTGANG. Standaard een overgang die bij `.in` afloopt; dat werkt in
   elke browser en ook met beweging uit. Waar de browser scroll-tijdlijnen kent
   neemt de regel hieronder het over en loopt de lijn MET je scroll mee. */
.tw::after { background: var(--coral); transform-origin: top; transform: scaleY(0); transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.tw.in::after { transform: scaleY(1); }

.tw-bol {
  position: absolute; left: var(--tl-x); top: 0; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wit); border: 1.5px solid var(--haarlijn);
  font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1;
  color: var(--tekst-3); font-variant-numeric: tabular-nums;
  transition: background .55s ease, border-color .55s ease, color .55s ease;
}
/* DE KNOOP MOET DE LIJN AFDEKKEN, dus zijn achtergrond is de BAND en niet
   doorzichtig. Staat deze tijdlijn ooit op een andere band, geef hem dan die
   kleur mee - een doorzichtige knoop laat de coral lijn er dwars doorheen
   lopen en dat leest als een streep door het cijfer. */
.tw.in .tw-bol { background: var(--coral); border-color: var(--coral); color: var(--navy); }

.tw-klok { text-align: right; padding-top: 3px; }
/* 30px op 52% inkt haalt 3,21:1, en dat is de ondergrens vanaf 24px. Kleiner
   mag deze tekst dus niet worden zonder hem donkerder te maken. */
.tw-tijd { display: block; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--tekst-4); font-variant-numeric: tabular-nums; transition: color .55s ease; }
.tw.in .tw-tijd { color: var(--coral-tx); }
/* DIT LABEL MOET OP EEN REGEL PASSEN in een kolom van 104 pixels. "Je plan
   staat er" brak af op een losse "ER" en dat leest als een fout; het is
   "Plan klaar" geworden, in dezelfde vorm als "Intake klaar" erboven. Houd
   een nieuw label dus onder de twaalf tekens, of verbreed de kolom. */
.tw-sub { display: block; margin-top: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); }

.tw-inhoud > h2 { margin-top: -4px; }
/* DE ALINEA LINKS, DE KENMERKEN RECHTS. De alinea houdt zijn leesmaat van 52
   tekens, en daarnaast bleef 650 pixels leeg: elke stap stond in de
   linkerhelft met een beeld van 1150 eronder. De chips vullen die ruimte en
   lezen daar als een specificatieregel bij de omschrijving. Ze blijven op
   dezelfde HOOGTE beginnen als de alinea, want los eronder hingen ze nergens
   aan vast. */
.tw-rij { display: grid; grid-template-columns: minmax(0, 52ch) 1fr; gap: var(--r5); align-items: start; margin-top: var(--r3); }
.tw-rij .scene-chips { margin-top: 2px; justify-self: end; justify-content: flex-end; }
.tw-d { color: var(--tekst-2); }
/* HET BEELD VULT DE INHOUDSKOLOM. `.od` laat de maat uit de markup staan
   (900, 1132, 886), en dat betekende dat er naast elke stap 250 tot 600 pixels
   wit overbleef: de stappen stonden verlegen in de linkerhelft terwijl de
   pagina 1440 breed is. Hier mag dat wel over de globale regel heen, want de
   opnamen zijn ALLEMAAL op dubbele maat gemaakt (1800, 2264 en 1772 pixels),
   dus op 1152 blijft de dichtheid boven 1,5x. Zet hier dus geen opname neer
   die niet op 2x is gemaakt. */
.tw-beeld { margin-top: var(--r5); }
.tw-beeld .od { width: 100%; }
/* De vier visuals verschillen bewust van MAAT: een volle kolom voor de
   intake en de week, 880 voor het blad en 820 voor het gesprek. Vier kaarten
   van dezelfde breedte onder elkaar is weer een stapel. */
.tw-beeld.smal > * { max-width: 820px; }

@media (prefers-reduced-motion: reduce) {
  .tw::after, .tw-bol, .tw-tijd { transition: none; }
}
/* DE LIJN LOOPT MET JE SCROLL MEE waar de browser scroll-tijdlijnen kent. De
   66% is GEMETEN en geen gok: hij zorgt dat een stuk lijn precies VOL is op
   het moment dat de volgende knoop aangaat. Gemeten op 1440x900, met de
   scrollstand links en per stap de vulling (een ster = die knoop staat aan):

        0   0,02   -      -      -
     1000   0,77   -      -      -
     1400   1,00   0,25*  -      -      <- lijn 1 vol, knoop 2 gaat aan
     2400   1,00   1,00   0,38*  -      <- lijn 2 vol, knoop 3 gaat aan
     3000   1,00   1,00   0,93   0,38*

   Zet je hem hoger, dan loopt de lijn achter de knoop aan; lager, en hij is
   al vol voordat je de stap gelezen hebt. Meet opnieuw als de stappen van
   hoogte veranderen - een vierde scherm of een langere alinea verschuift dit.
   METEN KAN NIET MET DE STANDAARD-CHROME VAN DIT PROJECT: die start met
   `--force-prefers-reduced-motion`, en dan staat deze regel uit en meet je
   overal 1,00. Gebruik `start({ motion: true })`. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tw::after { animation: tw-trek linear both; animation-timeline: view(); animation-range: cover 0% cover 66%; }
  }
}
@keyframes tw-trek { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* OP EEN TELEFOON STAAT DE KLOK BOVEN DE KOP en schuift de lijn naar de rand.
   Een kolom van 104 pixels plus 56 tussenruimte is daar de halve breedte. De
   plaatsing van klok en inhoud komt uit de BRONvolgorde (auto-placement), dus
   er staat nergens een `grid-column` die hier teruggedraaid moet worden. */
@media (max-width: 900px) {
  .tijdlijn { --tl-x: 17px; }
  .tw { grid-template-columns: 1fr; column-gap: 0; padding-left: 56px; }
  .tw-klok { text-align: left; display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--r3); padding-top: 0; }
  .tw-tijd { font-size: 25px; }
  .tw-sub { margin-top: 0; }
  .tw-bol { width: 34px; height: 34px; font-size: 14px; top: -4px; }
  /* Onder elkaar op een telefoon: naast een alinea van 300 pixels past geen
     tweede kolom, en de chips mogen daar niet tegen de rechterrand plakken. */
  .tw-rij { grid-template-columns: 1fr; gap: var(--r4); }
  .tw-rij .scene-chips { justify-self: start; justify-content: flex-start; }
  .tw-beeld { margin-top: var(--r4); }
  .tw:last-child::before, .tw:last-child::after { height: 190px; }
}

/* ── HET NAGEBOUWDE GESPREK ───────────────────────────────────────────────
   DE COACHPAGINA KRIJGT GEEN SCHERMAFDRUK MAAR EEN GESPREK IN HTML, en dat is
   een keuze over beeldtaal: er staan op deze site al vier uitsnedes uit het
   platform, en een vijfde zegt niets nieuws. Een gesprek dat je kunt LEZEN
   zegt wel iets nieuws, want dat is wat je koopt.

   De tekst is niet verzonnen: hij komt letterlijk van /hoe-het-werkt in het
   werkbestand (de vier chips en het antwoord van Vance). */
/* EEN WIT VLAK OP EEN DONKERE BAND MOET ZIJN TOKENS TERUGZETTEN. `.ph-donker`
   draait `--tekst-2` en `--tekst-3` om naar wit; binnen deze kaart zou dat
   witte tekst op wit opleveren. Dat is geen contrastfout die je ZIET - de
   tekst is er gewoon niet. Gemeten: zonder deze drie regels zakte "je
   marketingcoach" naar 4,22:1 en de nummers in het blad naar 2,73:1. */
.gesprek, .blad {
  --tekst-2: rgba(26, 37, 48, .72);
  --tekst-3: rgba(26, 37, 48, .66);
  --haarlijn: rgba(26, 37, 48, .14);
  color: rgb(var(--inkt));
}
.gesprek { background: var(--wit); border-radius: var(--rond); padding: var(--r4); box-shadow: var(--schaduw-m); }
.g-kop { display: flex; align-items: center; gap: 12px; padding-bottom: var(--r3); border-bottom: 1px solid rgba(26,37,48,.12); }
.g-kop img { width: 38px; height: 38px; }
.g-wie { font-family: var(--serif); font-weight: 600; font-size: 21px; color: rgb(var(--inkt)); line-height: 1.1; }
.g-wie span { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--tekst-3); }
.g-rij { margin-top: var(--r3); display: flex; }
.g-rij.ik { justify-content: flex-end; }
.g-bel { max-width: 85%; padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.55; }
.g-rij.hij .g-bel { background: rgba(26,37,48,.055); color: rgb(var(--inkt)); border-bottom-left-radius: 5px; }
.g-rij.ik .g-bel { background: var(--navy); color: #FFFFFF; border-bottom-right-radius: 5px; }
.g-chips { margin-top: var(--r3); display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { font-size: 14px; padding: 9px 15px; border-radius: 100px; border: 1px solid rgba(26,37,48,.18); color: rgba(26,37,48,.75); }
.g-chip.aan { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }

/* ── EEN RIJ PUNTEN MET EEN HAARLIJN ──────────────────────────────────────
   Voor de blokken die op de homepage een `.belofte-lijst` zouden zijn maar er
   zes of acht hebben in plaats van vier. Twee kolommen, geen kaders. */
.punten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r6); }
/* VIER NAAST ELKAAR OP /hoe-het-werkt. In een 2x2 is dit een tekstblok met
   cijfers erin; op een rij is het een meetlat, en dat is wat de band belooft.
   De streep boven elke kolom loopt met de tussenruimte door als één lijn.

   DE CIJFERS STAAN OP VOLLE INKT en niet op de 52% van `.punt-n`. Die waarde
   is gekozen voor een DONKERE band; op grond leest hij als uitgeschakeld.
   Koraal is hier ook geprobeerd en afgevallen: deze pagina heeft al een
   koraal ruggengraat en een koraal blok in de hero, en vier verzadigde
   cijfers van 86 pixels erbij maken van het accent een achtergrondkleur. */
.punten.vier { grid-template-columns: repeat(4, 1fr); gap: 0 var(--r4); }
.punten.vier .punt { padding-bottom: 0; }
.punten.vier .punt-n { font-size: clamp(56px, 5.4vw, 86px); margin-bottom: var(--r3); color: rgb(var(--inkt)); }
.punten.vier .punt h3 { font-size: clamp(19px, 1.5vw, 22px); }
.punten.vier .punt p { font-size: 16px; }
@media (max-width: 1100px) { .punten.vier { grid-template-columns: 1fr 1fr; gap: 0 var(--r6); } }
@media (max-width: 640px)  { .punten.vier { grid-template-columns: 1fr; } }

/* De slotregel onder de meetlat. Hij staat ONDER de streep van de kolommen en
   niet als vijfde kolom: het is geen getal maar de herkomst ervan. */
.punten-slot { margin-top: var(--sec); padding-top: var(--r4); border-top: 1px solid var(--haarlijn); display: grid; grid-template-columns: 1fr auto; gap: var(--r5); align-items: baseline; }
.punten-slot p { color: var(--tekst-2); max-width: 70ch; }
@media (max-width: 700px) { .punten-slot { grid-template-columns: 1fr; gap: var(--r3); } }
.punt { padding: var(--r4) 0; border-top: 1px solid var(--haarlijn); }
.punt h3 { font-size: clamp(22px, 1.9vw, 27px); }
.punt p { margin-top: var(--r2); color: var(--tekst-2); font-size: 17px; }

/* ── VANCE NAAST EEN BLOK ─────────────────────────────────────────────────
   Hij kan alleen op een LICHTE grond staan: zijn benen zijn #1A2530 en zijn
   romp #3E5266, dus op navy verdwijnt de helft van het figuur. */
.met-vance { display: grid; grid-template-columns: 1fr 200px; gap: var(--r6); align-items: end; }
.met-vance img { width: 100%; height: auto; display: block; }

/* ── HET CONTACTFORMULIER ─────────────────────────────────────────────────
   Geen kaart met een schaduw: dat is de vijftiende doos van de site. Alleen
   velden met een onderlijn, zoals de rest van de pagina lijnen gebruikt. */
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--r6) calc(var(--r6) + 24px); align-items: start; }
/* ── EEN INVOERVELD IS EEN VAK, GEEN STREEP ───────────────────────────────
   Hier stond een onderstreept veld: een label, daaronder lucht, en onderaan
   een haarlijn. Dat is een bekende vorm en hij liep hier op twee dingen stuk.

   HET VELD WAS ONZICHTBAAR. Een lijn van 1 pixel op 28% inkt onder een leeg
   stuk wit leest als een scheiding tussen twee dingen, niet als de plek waar
   je typt. Op de inlogkaart was dat het hele scherm: twee woorden en twee
   strepen.

   EN DE NABIJHEID STOND OMGEKEERD, en dat is het meetbare deel. Gemeten op
   /contact: van een label tot zijn EIGEN lijn 51 pixels, van die lijn tot het
   VOLGENDE label 40. Elke streep stond dus dichter bij het verkeerde label.
   Dat is geen smaakkwestie maar de wet van nabijheid, en je ziet het terug
   als "ik weet niet welk vakje bij welk woord hoort".

   Nu een gevuld vak met een rand: 8 pixels binnen de groep, 24 ertussen. De
   ronding is `--rond` en geen vierde waarde; zie de tokenkop in stijl.css. */
.veld { display: block; margin-bottom: var(--r3); }
.veld span { display: block; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--tekst-3); margin-bottom: var(--r1); }
.veld input, .veld textarea {
  width: 100%; font-family: var(--sans); font-size: 17px; color: rgb(var(--inkt));
  background: rgba(26, 37, 48, .035);
  border: 1px solid rgba(26, 37, 48, .16);
  border-radius: var(--rond);
  padding: 14px 16px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* DE PLACEHOLDER IS EEN VOORBEELD, GEEN LABEL, en moet dus lichter staan dan
   wat je zelf typt. Daarom `--tekst-4` (3,2:1) en niet de leeskleur: het label
   erboven draagt de betekenis en blijft staan terwijl je typt. */
.veld input::placeholder, .veld textarea::placeholder { color: var(--tekst-4); }
.veld textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.veld input:focus, .veld textarea:focus {
  outline: none; background: var(--wit);
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 83, 108, .22);
}
.gegevens dt { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-tx); margin-top: var(--r4); }
.gegevens dd { margin-top: var(--r1); font-size: 17px; color: var(--tekst-2); }
.gegevens dd a { color: inherit; }
.gegevens > dt:first-child { margin-top: 0; }

/* ── HET JURIDISCHE DOCUMENT ──────────────────────────────────────────────
   Deze drie pagina's zijn lange tekst, en dat is precies waarom ze een eigen
   opmaak krijgen: 40 schermen lopende tekst op de volle kolom leest niemand.
   De inhoudsopgave blijft links staan (`position: sticky`), de tekst houdt een
   leesmaat van 68 tekens. */
.doc-grid { display: grid; grid-template-columns: 250px 1fr; gap: var(--r6); align-items: start; }
.doc-nav { position: sticky; top: calc(var(--navh) + 24px); }
.doc-nav ol { list-style: none; counter-reset: d; display: grid; gap: 2px; }
.doc-nav a { display: block; padding: 7px 0; font-size: 15px; color: var(--tekst-3); text-decoration: none; border-bottom: 1px solid transparent; }
.doc-nav a:hover { color: rgb(var(--inkt)); }
/* Een sectie die in dit voorbeeld niet is uitgeschreven staat er als TEKST en
   niet als link. Zelfde regel en dezelfde kleur als een link in rust: lichter
   mocht niet, want `--tekst-4` haalt 3,2:1 en dat is op 15 pixels te weinig.
   `meet.mjs` wees hem meteen aan. Het onderscheid met een link zit dus in de
   aanwijzer en in het ontbreken van de hover, niet in de kleur. */
.doc-nav span { display: block; padding: 7px 0; font-size: 15px; color: var(--tekst-3); }
.doc-nav a[aria-current] { color: rgb(var(--inkt)); font-weight: 600; }
/* `min-width: 0` IS HIER GEEN NETHEID MAAR DE HELE OPLOSSING. Een rastervak
   staat standaard op `min-width: auto` en wordt dus zo breed als zijn SMALSTE
   onmogelijke inhoud - en dat is hier een tabel van vijf kolommen. Gemeten op
   390: de pagina werd 677 breed, de vaste navbalk liep mee en de hele
   cookieverklaring schoof zijwaarts. De `overflow-x: auto` op de tabel zelf
   doet dan niets, want het vak eromheen geeft gewoon mee. */
.doc-grid > * { min-width: 0; }
.doc-tekst { max-width: 68ch; }
.doc-tekst h2 { font-size: clamp(26px, 2.4vw, 34px); margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid var(--haarlijn); }
.doc-tekst h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-tekst p { margin-top: var(--r3); color: var(--tekst-2); }
.doc-tekst ul { margin-top: var(--r3); padding-left: 20px; color: var(--tekst-2); display: grid; gap: var(--r1); }
.doc-meta { margin-top: var(--r3); font-size: 15px; color: var(--tekst-3); }

/* De archetypekaart uit het product, op ware verhouding (382 bij 540). Hij
   draagt zijn eigen zwarte kader en achtergrond, dus geen rand erbij; wel een
   schaduw, want anders ligt hij plat op de band. */
.arch-kaart { margin: 0; justify-self: center; }
.arch-kaart img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--rond); box-shadow: var(--schaduw-l); }

/* ── HET VOORBEELDPLAN ALS DOCUMENT ───────────────────────────────────────
   Hergebruikt `.doc-grid` en `.doc-tekst` van de juridische pagina's. Dat is
   geen gemakzucht: een marketingplan is hetzelfde soort document - lang,
   genummerd, en je leest er een stuk uit. Wat er bijkomt is de documenttitel,
   de tussenkoppen (daar gebruikt het plan h3 waar de juridische tekst alleen
   h2 kent) en de twee slotregels. */
/* De eerste sectiekop volgt dicht op de documenttitel: `.doc-tekst h2` draagt
   96 pixels marge plus 40 padding, en die ruimte is bedoeld TUSSEN twee
   hoofdstukken, niet tussen een titel en zijn eerste hoofdstuk. */
.plandoc-titel + h2 { margin-top: var(--r4); }
.plandoc-titel { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 0 0 var(--r4); color: rgb(var(--inkt)); }
.doc-tekst h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; margin-top: var(--r5); }
/* "Waarom bij jou" is in het echte plan een eigen blok en hoort dat hier ook
   te zijn: het is de regel die zegt waarom dit advies bij DIT bedrijf past. */
.plan-waarom { margin-top: var(--r3); padding-left: var(--r3); border-left: 2px solid var(--coral); }
.plandoc-verder { margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--haarlijn); }
/* De tweede band loopt zonder ruimte over in de eerste: de waarschuwing en
   het document zijn een blok, geen twee secties. */
.plandoc { padding-top: 0; border-top: 0; }

/* ── DE BEVESTIGING NA EEN BETALING ───────────────────────────────────────
   /welkom is geen verkooppagina maar een bevestiging, en daarom LICHT waar
   /start donker is: er valt hier niets meer te overtuigen. Wat er wel moet
   gebeuren is geruststellen (het geld is binnen) en doorsturen (nog twee
   stappen).

   HET VINKJE IS TEAL EN GEEN KORAAL. Koraal is op deze site de kleur van de
   hoofdactie, en die staat op deze pagina op de knop eronder. Een koraal
   vinkje erboven zou om dezelfde aandacht vragen. */
.gelukt { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-tx); margin-bottom: var(--r3); }
.gelukt svg { width: 28px; height: 28px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* HET ADRES WAAROP DE BETALING STAAT, met de reden erbij. Dit is het enige
   gegeven op de pagina dat de bezoeker moet ONTHOUDEN: maakt hij zijn account
   met een ander adres, dan koppelt de betaling niet en moet er een mens aan
   te pas komen. Daarom een eigen vak en niet een regel in de lopende tekst. */
.adresvak { margin-top: var(--r4); padding: var(--r3) var(--r4); border: 1px solid var(--haarlijn); border-radius: var(--rond); background: var(--wit); display: inline-block; }
.adres-l { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); }
.adres-m { display: block; margin-top: var(--r1); font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2vw, 28px); }
.adresvak p { margin-top: var(--r2); font-size: 15px; color: var(--tekst-3); max-width: 46ch; }

/* ── EEN LIJST MET ICOONTEGELS ────────────────────────────────────────────
   Vier regels die elk een onderdeel van het plan noemen. Op /start, waar een
   advertentiebezoeker binnenkomt die de site niet kent: die leest geen vier
   alinea's, maar vier tegels met een kop scant hij wel.

   HET ICOON IS EEN LIJNTEKENING EN GEEN EMOJI, zoals overal op deze site. De
   tegel heeft dezelfde ronding als elk ander vlak (`--rond`); er komt geen
   vierde straal bij voor een vakje van 48 pixels. */
.ik-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r5) var(--r6); }
.ik-rij { display: grid; grid-template-columns: 48px 1fr; gap: var(--r3); align-items: start; }
.ik-vak { width: 48px; height: 48px; border-radius: var(--rond); border: 1px solid var(--haarlijn); display: grid; place-items: center; color: var(--coral-tx); }
.ik-vak.teal { color: var(--teal-tx); }
.ik-vak svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ik-rij h3 { font-size: clamp(19px, 1.5vw, 22px); }
.ik-rij p { margin-top: var(--r2); color: var(--tekst-2); }

/* ── EEN APPARAATFOTO OVER DE VOLLE KOLOM ─────────────────────────────────
   Dezelfde beeldtaal als de twee productkaarten op de homepage, maar dan
   groot. Hij staat met opzet NIET in een tweeluik naast de tekst: in een
   kolom van 700 pixels komt het platformscherm op ongeveer 490 uit, en de
   lichaamstekst daarin op zeven pixels. Over de volle 1204 blijft de
   sectielijst te volgen. Zie de `.od`-kop in stijl.css voor diezelfde
   afweging bij de kale onderdelen.

   GEEN RAND EN EEN ZACHTE SCHADUW. De foto heeft zelf een lichte achtergrond
   die bijna in de band opgaat; een lijn eromheen zou van de foto een kaart
   maken, en dat is hij niet. */
.toonbeeld { margin: 0; }
/* `aspect-ratio` + `object-fit: cover` IS HIER GEEN OPMAAK MAAR EEN SIGNAAL.
   `beelden.mjs` eist dat elke uitsnede uit de app op 85 tot 135 procent van
   zijn EIGEN maat staat, en herkent een beeld-in-een-kader aan precies deze
   twee regels. Dit is een FOTO en geen uitsnede: hij hoort zo breed te staan
   als zijn vak. Zonder deze regels meldt die controle hem terecht op 172
   procent. De verhouding is exact die van het bestand (1400 bij 760), dus
   `cover` snijdt er niets af; hij legt alleen vast dat het kader de maat
   bepaalt en niet het beeld.

   DIE VERHOUDING MOET GELIJK BLIJVEN AAN WAT `beeld-plan.py` UITVOERT (`B`
   en `H` bovenin dat bestand). Lopen ze uiteen, dan snijdt `cover` er stil
   een strook af. Hij is in ronde 45 van 1,6:1 naar 2:1 gegaan en in ronde 46
   naar 1400 bij 760, toen de foto plaatsmaakte voor een compositie. */
/* GEEN RONDING EN GEEN SCHADUW OP DIT BEELD, en dat is sinds ronde 46 een
   bewuste keuze. Het bestand is zelf een compositie MET zijn eigen schaduwen,
   op dezelfde grond als de band eronder (`--grond`). Een kader eromheen levert
   dus een tweede, lichtere kaart op rondom de eerste: je ziet een grijze
   rechthoek om het geheel staan die nergens bij hoort. Zo stond hij een ronde
   lang. Nu loopt het beeld naadloos over in de band en komt de diepte uit de
   compositie zelf. */
.toonbeeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1400 / 760; object-fit: cover;
}
.toonbeeld figcaption { margin-top: var(--r4); display: grid; gap: var(--r2); justify-items: start; max-width: 60ch; }
.toonbeeld figcaption h3 { margin: 0; }
.toonbeeld figcaption p { margin: 0; color: var(--tekst-2); }

/* ── DE INGANG NAAR DE RONDLEIDING STAAT ALLEEN OP DESKTOP ───────────────
   Dezelfde regel als in het product, en dezelfde grens: onder 1001 pixels zet
   de rondleiding zijn venster om naar een telefoon, en de ingang is daar op
   verzoek tijdelijk uit. De ROUTE blijft werken - wie een directe link krijgt
   komt er ook op een telefoon binnen; wat verdwijnt is het VINDEN.

   DE HELE REGEL GAAT WEG, niet alleen de link: anders blijft "Liever eerst
   kijken?" als losse vraag zonder antwoord staan. Met `display: none` vervalt
   ook de marge, dus er blijft geen gat achter. */
@media (max-width: 1000px) { .rl-ingang { display: none; } }

/* ── DE RONDLEIDING ───────────────────────────────────────────────────────
   Verhaal links, het echte platform rechts, en de pagina SCROLT NIET. Dat is
   de kern van het ontwerp en niet een opmaakkeuze: met het venster boven en de
   uitleg eronder scrol je omlaag om te lezen en omhoog om te kijken, en dan
   leest het als een fotolijst in plaats van als een rondleiding.

   DE MATEN KOMEN UIT `rondleiding.js`, NIET UIT DEZE CSS. Het demoscherm heeft
   een vaste binnenmaat (1280x860, of 390x600 op een telefoon) en wordt met
   `transform: scale()` passend gemaakt; `zetSchaal()` schrijft de breedte en
   hoogte van `#rl-frame`, `.rl-houder` en `.rl-podium`. Zet hier dus geen
   breedte in procenten: dan kiest het platform een layout die geen enkele
   klant ooit ziet, en op een telefoon zie je een samengeknepen desktopscherm
   in plaats van de mobiele versie.

   DE GRENS STAAT OP 1000px EN DAT IS GEEN WILLEKEURIGE BREAKPOINT. `maten()`
   in `rondleiding.js` leest exact `matchMedia('(max-width: 1000px)')` en zet
   het demoscherm daaronder om naar een telefoon. Gebruik hier dus niet de 1080
   van de rest van dit bestand: dan ontstaat er een band waarin de layout al
   gestapeld is en het venster nog een desktop toont.

   HET VENSTER IS OM TE KIJKEN, NIET OM IN TE KLIKKEN (`pointer-events: none`
   op `.rl-schaal`). Alles daarbinnen is de echte app met een nep-sessie: de
   coach doet een echte aanroep en krijgt een 401, Uitloggen gooit de demostand
   weg, en elke AI-knop eindigt in een foutmelding. Zet die regel dus niet uit
   "omdat de scenes moeten kunnen klikken" - die werken met `el.click()` en
   gaan daar gewoon doorheen. */
.rl-app {
  height: 100dvh;
  overflow: hidden;
  padding-top: var(--navh);
  display: grid;
  grid-template-columns: minmax(330px, 31%) 1fr;
  align-items: stretch;
  background: var(--grond);
  --rl-acc: 255, 83, 108;   /* verschuift per fase; rondleiding.js zet hem */
}

/* ── Links: het verhaal ─────────────────────────────────────────────────
   DE KOLOM HOUDT HOOGUIT DRIE DINGEN TEGELIJK. De afsluitende knop staat
   alleen op de laatste stap en de toetsenbordhint alleen op de eerste; de
   uitleg is hooguit twee regels. Met alles altijd zichtbaar werd deze kolom
   drukker dan het venster waar het om gaat, en dan kijk je naar de tekst in
   plaats van naar het product. */
.rl-verhaal {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--r4) var(--r3) var(--r4) var(--rand);
  min-width: 0;
}
.rl-fase {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--rl-acc));
  margin-bottom: var(--r2);
  transition: color .5s ease;
}
/* DE FASEKLEUR IS HIER DONKERDER DAN IN HET PRODUCT, en dat is rekenwerk en
   geen smaak. `FASEN` in rondleiding.js draagt lichte huisstijlkleuren (koraal,
   cyaan, teal, zalm): op de donkere site is dat licht accent op donkere grond,
   hier zou het licht op licht zijn. Koraal haalt op deze grond 3,1:1 en cyaan
   nog veel minder. Daarom zet de JS die kleuren als `--rl-acc` voor de VULLING
   (het segment, de pil) en krijgt alles wat LETTER is zijn eigen token. Zie de
   uitleg bij `--coral-tx` bovenaan stijl.css; dezelfde afweging. */
.rl-fase { color: var(--coral-tx); }
/* De streep groeit uit het niets mee met het faselabel. Kleine beweging, maar
   hij maakt van een label een aankondiging. */
.rl-fase::before {
  content: ''; width: 22px; height: 1px; flex-shrink: 0;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.25, .8, .3, 1) .1s;
}
.rl-verhaal.in .rl-fase::before { transform: scaleX(1); }

.rl-kop {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04;
  letter-spacing: -0.01em;
  color: rgb(var(--inkt));
  margin-bottom: var(--r2);
}
.rl-kop em { font-style: italic; color: var(--coral-tx); }

.rl-uitleg {
  font-family: var(--sans); font-size: 16px; line-height: 1.66;
  color: var(--tekst-2);
  max-width: 44ch;
  margin-bottom: var(--r3);
}

/* De binnenkomst van de tekst. Dit is het ENIGE dat beweegt bij een stapwissel,
   en dat is bewust: twee dingen die tegelijk bewegen lezen als onrust.
   `RL_TEKST_MS` in rondleiding.js is op deze looptijd gezet (.46s plus een
   vertraging tot .2s) - het laden van een nieuw document WACHT hierop, want een
   same-origin iframe deelt de main thread en dan schokt elke animatie die op
   dat moment loopt. Wijzig je deze overgangen, wijzig dat getal mee. */
.rl-fase, .rl-kop, .rl-uitleg {
  opacity: 0; transform: translateY(10px);
  transition: opacity .46s ease, transform .46s cubic-bezier(.2, .7, .3, 1);
}
.rl-verhaal.in .rl-fase { opacity: 1; transform: none; transition-delay: .02s; }
.rl-verhaal.in .rl-kop { opacity: 1; transform: none; transition-delay: .08s; }
.rl-verhaal.in .rl-uitleg { opacity: 1; transform: none; transition-delay: .15s; }
/* Het cursieve accentwoord komt een tel na de rest van de kop: de zin bouwt
   zich op in plaats van in één keer te verschijnen. */
.rl-kop em {
  display: inline-block;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .2s, transform .5s cubic-bezier(.2, .7, .3, 1) .2s;
}
.rl-verhaal.in .rl-kop em { opacity: 1; transform: none; }

/* VORIGE EN VOLGENDE ZIJN BEWUST ONGELIJK. Volgende is een GEVULDE pil met een
   label, vorige een kale cirkel. Negen op de tien keer wil je vooruit, en twee
   identieke ronde pijltjes laten je elke keer opnieuw zoeken welke kant je op
   moet. Een pil met 14% dekking leest als een tweede optie naast die cirkel,
   terwijl dit de knop is die je zestien keer gebruikt. */
.rl-bediening { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-knop {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(26, 37, 48, .22);
  color: rgb(var(--inkt));
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rl-knop:hover:not(:disabled) {
  background: rgba(26, 37, 48, .05);
  border-color: rgba(26, 37, 48, .4);
  transform: translateY(-2px);
}
.rl-knop:disabled { opacity: .3; cursor: default; }

/* DONKERE LETTER OP DE ACCENTKLEUR, NIET WIT. Op koraal haalt wit 3,1:1 en
   navy ruim het dubbele, en de accentkleur verschuift per fase - dus wit zou op
   de lichtste fase (cyaan) helemaal onleesbaar zijn. Zelfde afweging als bij de
   gevulde knop van de cookiemelding. */
.rl-volgende {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 24px 0 30px; border-radius: 100px; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--navy);
  background: rgb(var(--rl-acc));
  border: 1px solid rgb(var(--rl-acc));
  box-shadow: 0 10px 26px -14px rgba(var(--rl-acc), .85);
  transition: background .5s ease, border-color .5s ease, transform .2s ease, box-shadow .22s ease, filter .2s ease;
}
.rl-volgende:hover:not(:disabled) {
  filter: brightness(.94);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(var(--rl-acc), .95);
}
.rl-volgende:disabled { opacity: .3; cursor: default; }
.rl-volgende svg { transition: transform .22s ease; }
.rl-volgende:hover:not(:disabled) svg { transform: translateX(3px); }

.rl-teller {
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; color: var(--tekst-3);
  font-variant-numeric: tabular-nums;
}
.rl-teller b { color: rgb(var(--inkt)); font-weight: 600; }
/* `--tekst-3` en niet `--tekst-4`: die laatste haalt 3,2:1 en mag pas vanaf
   24 pixels. Deze regel staat op 11,5. */
.rl-hint { margin-left: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--tekst-3); }
.rl-hint kbd {
  font-family: var(--sans); font-size: 11px; padding: 1px 5px; margin: 0 1px;
  border-radius: 4px; border: 1px solid rgba(26, 37, 48, .18);
  background: rgba(26, 37, 48, .05);
}
/* Op een aanraakscherm bestaan die toetsen niet. */
@media (hover: none) { .rl-hint { display: none; } }

/* DE DOORLOPENDE UITWEG IS EEN TEKSTLINK EN GEEN TWEEDE KNOP. De gevulde pil is
   Volgende en dat is tijdens een rondleiding de hoofdactie; een tweede gevulde
   knop ernaast laat de bezoeker bij elke stap opnieuw kiezen waar niets te
   kiezen valt. Koraal mag hier wel: het is het enige koraal in de kolom en het
   verschil in gewicht met de pil is groot genoeg. */
.rl-uit {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--r3);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--coral-tx);
}
.rl-uit:hover { text-decoration: underline; text-underline-offset: 3px; }
.rl-uit svg { transition: transform .2s ease; }
.rl-uit:hover svg { transform: translateX(3px); }

/* HET VOORBEELDPLAN-BLOK, ALLEEN OP DE PLANSTAP. Daar is de vraag "mag ik dat
   zien" het sterkst, en het voorbeeldplan is het enige bewijs dat we op dat
   moment in handen kunnen geven. Overal zou het met de uitweg eronder twee
   aanbiedingen tegelijk zijn. */
.rl-bewijs {
  margin-top: var(--r3); padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 83, 108, .06);
  border: 1px solid rgba(255, 83, 108, .26);
  max-width: 40ch;
}
.rl-bewijs-kop { margin: 0 0 11px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: rgb(var(--inkt)); }
.rl-bewijs-rij { display: flex; gap: 8px; }
.rl-bewijs-rij input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px;
  border-radius: 100px; font-family: var(--sans); font-size: 14px;
  color: rgb(var(--inkt)); background: var(--wit);
  border: 1px solid rgba(26, 37, 48, .2);
}
.rl-bewijs-rij input::placeholder { color: var(--tekst-4); }
.rl-bewijs-rij input:focus { outline: none; border-color: rgba(255, 83, 108, .65); }
/* HET VINKJE STAAT BOVEN DE KNOP, en dat is dezelfde regel als bij het
   voorproefje: eronder vraag je toestemming nadat je al hebt uitgenodigd te
   klikken, en dan leest bijna niemand het. */
.rl-vink { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
.rl-vink input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--coral); }
.rl-vink span { font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--tekst-2); }
#rl-ts:not(:empty) { margin-top: 12px; }
.rl-bewijs-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 100px; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  color: #FFFFFF; background: var(--coral); border: 0;
  transition: background .2s ease, transform .2s ease;
}
.rl-bewijs-knop:hover:not(:disabled) { background: var(--crimson); transform: translateY(-1px); }
.rl-bewijs-knop:disabled { opacity: .55; cursor: default; }
/* Staat onder het vinkje en dus buiten .rl-bewijs-rij; pakt daar de volle breedte. */
.rl-bewijs-vouw > .rl-bewijs-knop { width: 100%; margin-top: 12px; }
.rl-bewijs-sub {
  margin: 9px 0 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.5;
  color: var(--tekst-3); text-align: center;
}

.rl-voet { margin-top: var(--r4); }
/* HAAL DEZE REGEL NIET WEG en maak hem niet lichter dan `--tekst-3`: hij zegt
   dat het bedrijf verzonnen is en dat de getallen geen resultaten van een klant
   zijn (art. 6:194 BW), dus hij moet leesbaar blijven. */
.rl-voorbeeld { font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--tekst-3); max-width: 40ch; }
.rl-cta {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--coral-tx);
}
.rl-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Rechts: de scène ───────────────────────────────────────────────────── */
.rl-scene {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--r4) var(--rand) var(--r4) var(--r3);
}
/* De sfeergloed achter het podium, van kleur per fase. Zacht genoeg om niet op
   te vallen en sterk genoeg om het venster te laten zweven. Op een lichte grond
   mag hij lager staan dan in het product: daar is 30% op bijna zwart een vage
   waas, hier zou dat een gekleurd vlak zijn. */
.rl-gloed {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 42% at 52% 46%, rgba(var(--rl-acc), .13), transparent 70%),
    radial-gradient(52% 46% at 78% 24%, rgba(var(--rl-acc), .07), transparent 72%),
    radial-gradient(44% 38% at 16% 82%, rgba(159, 214, 219, .16), transparent 72%);
  filter: blur(6px);
  transition: background .7s ease;
}

/* DE VOORTGANG KRIJGT DE BREEDTE VAN HET VENSTER (gezet in `zetSchaal`), zodat
   hij bij dat scherm hoort in plaats van erboven te zweven. Alleen op een breed
   scherm: op een telefoon is het venster ~250px en zouden zestien segmenten met
   hun fase-tussenruimtes samengeperst worden tot streepjes van een paar pixels. */
.rl-segmenten {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 5px;
  margin: 0 auto 14px; width: 100%;
  transition: max-width .25s ease;
}
.rl-seg {
  flex: 1 1 0; height: 3px; border-radius: 2px; padding: 0;
  border: 0; cursor: pointer; position: relative; overflow: visible;
  background: rgba(26, 37, 48, .14);
  transition: background .3s ease;
}
/* DE VULLING loopt van links naar rechts vol in plaats van in één keer van
   kleur te wisselen. Dat is het verschil tussen een rij bolletjes en een balk
   die vordert; het kost niets en het maakt de stapwissel afleesbaar. */
.rl-seg::before {
  content: ''; position: absolute; inset: 0; border-radius: 2px;
  background: rgb(var(--rl-acc));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.25, .8, .3, 1), background .5s ease, opacity .3s ease;
}
/* Een ruim aanraakvlak, buiten de flow zodat er geen pixel layout verschuift.
   Zelfde constructie als het afvinkvakje in het product. */
.rl-seg::after { content: ''; position: absolute; inset: -11px -3px; }
.rl-seg.nieuwe-fase { margin-left: 20px; }
.rl-seg.gehad::before { transform: scaleX(1); opacity: .4; }
.rl-seg.actief::before { transform: scaleX(1); opacity: 1; }
.rl-seg.actief { box-shadow: 0 0 0 3px rgba(var(--rl-acc), .18); }
.rl-seg:hover { background: rgba(26, 37, 48, .3); }
@media (prefers-reduced-motion: reduce) { .rl-seg::before { transition: none; } }

.rl-podiumwrap {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}

/* HET PODIUM MOET ZWEVEN, en dat doet een schaduw alleen niet: een scherm dat je
   van opzij ziet vangt licht op zijn bovenrand, en zonder die lijn leest het
   vlak als een plaatje in plaats van als een apparaat.

   HET VLAK IS WIT EN NIET NAVY. In het product is dit `var(--navy)`, want daar
   is de hele pagina donker; hier is het de kleur van de kaarten eromheen. Het
   is bovendien wat de bezoeker een halve seconde ziet vóór het iframe er is, en
   een zwart vlak leest daar als een storing.

   GEEN VIGNETTERING op `.rl-scene`. Die heeft in het product gestaan en is er
   weer uit: de scène is maar één kolom van de pagina, dus een rand eromheen
   tekent een zichtbare rechthoek tussen de tekst links en het venster rechts. */
.rl-podium {
  position: relative; border-radius: 16px; overflow: hidden; user-select: none;
  background: var(--wit);
  border: 1px solid rgba(26, 37, 48, .1);
  box-shadow: var(--schaduw-l), 0 0 0 1px rgba(var(--rl-acc), .1);
  transition: box-shadow .7s ease;
}
.rl-podium::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  z-index: 7; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
}
/* GEEN SCHAAL-ANIMATIE OP HET PODIUM BIJ EEN STAPWISSEL. Die zat er in het
   product wel (een dip van 0,988) en was de oorzaak van zichtbaar haperen:
   binnen dit podium zit een iframe met het complete werkbestand, en een
   transform daarop dwingt de browser dat hele document opnieuw te rasteren. Een
   beweging die niemand mist tegen de duurste operatie die je hier kunt doen.

   De BINNENKOMST mag wél schalen: die draait één keer, vóórdat het iframe iets
   heeft geladen. */
.rl-podium.entree { animation: rlEntree .72s cubic-bezier(.2, .75, .3, 1) both; }
@keyframes rlEntree {
  from { opacity: 0; transform: translateY(22px) scale(.975); }
  to { opacity: 1; transform: none; }
}

/* De lichtveeg bij een stapwissel. Hij ligt in een EIGEN element bovenop het
   iframe, dus hij raakt de opmaak eronder niet aan en blijft op de compositor.
   Het element wordt na afloop weggehaald; als klasse bleef de glans na de
   animatie midden op het venster staan, want een animatie eindigt zonder fill
   en het verloop springt dan terug naar zijn beginplek - precies het midden. */
.rl-veeg {
  position: absolute; top: 0; bottom: 0; left: -55%; width: 210%;
  z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 42%, rgba(var(--rl-acc), .18) 50%, transparent 58%);
  will-change: transform, opacity;
  animation: rlVeegOver .8s cubic-bezier(.3, .6, .2, 1);
}
@keyframes rlVeegOver {
  from { transform: translate3d(-38%, 0, 0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  to { transform: translate3d(38%, 0, 0); opacity: 0; }
}

/* DE BALK MAG NOOIT BREDER ZIJN DAN HET VENSTER ERONDER. Zonder `min-width: 0`
   en een afkappend adres bepaalt de balk de breedte van het podium, en dan staan
   er op een telefoon grijze randen naast het scherm. */
.rl-balk {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(26, 37, 48, .1);
  background: rgba(26, 37, 48, .035);
}
.rl-bol { width: 8px; height: 8px; border-radius: 50%; background: rgba(26, 37, 48, .16); }
.rl-adres {
  margin-left: 10px; padding: 3px 13px; border-radius: 100px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sans); font-size: 11.5px;
  background: rgba(26, 37, 48, .05);
  color: var(--tekst-3);
}
.rl-merk {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-3);
}

/* De tikregel bestaat alleen op een telefoon; op een breed scherm staat het
   formulier gewoon open en is er ruimte zat. */
.rl-bewijs-tik { display: none; }

.rl-houder { position: relative; overflow: hidden; }
.rl-schaal { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
.rl-schaal iframe { display: block; border: 0; background: var(--wit); }
/* HET TWEEDE VENSTER. De rondleiding heeft twee iframes en het ACTIEVE draagt
   altijd de id `rl-frame`; het andere heet `rl-frame-uit`. Zo hoeft geen enkele
   lezer (zetSchaal, de filmlaag, de meetpagina's in dev-test) te weten dat er
   twee zijn - zoek een venster dus nooit op volgorde in de DOM.
   `visibility` en NIET `display: none`: een verborgen frame houdt dan gewoon
   zijn layout, dus de intake rendert vooruit op de juiste maat in plaats van op
   de 300x150 van een iframe en hoeft bij het zichtbaar worden niets te herdoen. */
#rl-frame-uit { position: absolute; top: 0; left: 0; visibility: hidden; }

/* WACHTSTAND: EEN STILLE WAAS, GEEN BEWEGENDE VEEG. In het product zat hier een
   doorlopende `background-position`-animatie, en dat was de oorzaak van het
   haperen bij de stap van het account naar de intake: dat is de enige wissel
   waarbij het iframe een NIEUW document laadt, en juist dan liep er een animatie
   op een eigenschap die niet op de compositor kan - elke frame een volledige
   hertekening van het hele venster, bovenop het parsen van een bestand van drie
   megabyte. Een wachtstand hoeft ook niet te bewegen om te werken: hij duurt
   kort en de tekst links verandert al. Zet hier geen `animation` terug. */
.rl-houder.laadt::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: rgba(240, 239, 240, .72);
}
.rl-mislukt {
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: center; justify-content: center; text-align: center;
  padding: 30px; background: rgba(240, 239, 240, .95);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--tekst-2);
}
.rl-houder.stuk .rl-mislukt { display: flex; }

/* ── Smal: alles onder elkaar, venster BOVEN ─────────────────────────────
   OP EEN TELEFOON ZIE JE HET HELE TELEFOONSCHERM en bindt de HOOGTE. Elke pixel
   die deze kolom niet gebruikt gaat naar het venster: 30px lucht eruit is ruim
   6% schaal erbij. Daarom staan de marges hier krapper dan elders; er is geen
   woord weggehaald.

   DE GRENS IS 1000 EN MOET DAT BLIJVEN, want `maten()` in rondleiding.js leest
   exact deze query om het demoscherm op 390x600 te zetten. */
@media (max-width: 1000px) {
  /* DE OFFSET MOET DE ECHTE NAVHOOGTE ZIJN. In het product staat hier 64, want
     daar is de balk 64 hoog; de witte balk meet er 71 en `--navh` staat op 74.
     Met 64 viel de bovenste 7 pixels van de segmentenbalk achter de nav, en dat
     gaat stil: de balk staat er, hij is alleen afgesneden. Die 10 pixels kosten
     ~3% venster en dat is de prijs; `.rl-volgende` is hier 10px korter dan in
     het product, dus netto komt het op hetzelfde uit. */
  .rl-app { padding-top: var(--navh); grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rl-scene { order: 1; padding: 6px 10px 2px; }
  .rl-verhaal { order: 2; justify-content: flex-start; padding: 2px 18px 10px; }
  .rl-kop { font-size: clamp(20px, 5.2vw, 27px); margin-bottom: 5px; }
  .rl-uitleg { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; max-width: none; }
  .rl-fase { margin-bottom: 6px; font-size: 10px; }
  .rl-fase::before { width: 16px; }
  .rl-segmenten { margin-bottom: 7px; gap: 4px; }
  .rl-seg.nieuwe-fase { margin-left: 12px; }
  .rl-bediening { gap: 10px; }
  .rl-knop { width: 42px; height: 42px; }
  .rl-volgende { height: 46px; padding: 0 18px 0 22px; font-size: 14.5px; }
  .rl-voet { margin-top: 7px; }
  .rl-uit { margin-top: 12px; }
  /* De chatknop plakt rechtsonder aan het scherm en lag precies over deze regel
     heen. Die regel is er niet voor de sier: hij zegt dat het bedrijf verzonnen
     is (art. 6:194 BW), dus hij moet leesbaar blijven. De knop zelf verliest op
     deze pagina zijn label; dat staat in site-chat.css en hangt aan
     `body.rl-pagina`. */
  .rl-voorbeeld { font-size: 10px; line-height: 1.45; max-width: none; padding-right: 60px; }
  /* `.rl-cta` stond in het product op `display: none`, met als reden dat de
     hoofdknop al in de balk bovenaan staat. Op een telefoon is die balk een
     hamburger, dus dat klopte daar niet: op de LAATSTE stap is Volgende
     uitgeschakeld en staat de uitweg naar het voorproefje er bewust niet, dus
     dit was de enige knop die overbleef. De rondleiding eindigde daarmee op een
     dood scherm. Zet hem hier dus niet uit. */

  /* HET VOORBEELDPLAN-BLOK BEGINT INGEKLAPT, en dat is een afweging over LEADS
     en niet over opmaak. Uitgeklapt kost het ~140px, en dat was op een echte
     iPhone het verschil tussen een viewport van 600 en van 426 op precies de
     stap die moet laten zien DAT het plan echt is. Ingeklapt is het één coral
     regel op exact de plek waar elke andere stap "Doe het gratis voorproefje"
     heeft, dus het venster is op alle zestien stappen even groot.
     HET BLOK BLIJFT IN DE DOM: `#rl-ts` draagt de Turnstile-widget, en die
     opnieuw renderen levert een losgekoppelde node op die nooit meer een token
     geeft. Alleen tonen en verbergen. */
  .rl-bewijs { margin-top: 8px; padding: 9px 12px; border-radius: 12px; }
  .rl-bewijs-rij { gap: 6px; }
  .rl-bewijs-rij input { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .rl-bewijs-knop { height: 38px; padding: 0 15px; font-size: 13.5px; }
  .rl-vink { margin-top: 6px; }
  .rl-vink span { font-size: 11px; line-height: 1.3; }
  .rl-bewijs-sub { margin-top: 4px; font-size: 10.5px; }
  .rl-bewijs:not(.open) { margin-top: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
  .rl-bewijs-kop { display: none; }
  .rl-bewijs-vouw { display: none; }
  .rl-bewijs-tik {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--sans); font-size: 13.5px; font-weight: 700;
    color: var(--coral-tx);
  }
  .rl-bewijs.open .rl-bewijs-tik { display: none; }
  .rl-bewijs.open .rl-bewijs-kop { display: block; margin: 0 0 6px; font-size: 12.5px; }
  .rl-bewijs.open .rl-bewijs-vouw { display: block; }
}


/* ── HET GRATIS VOORPROEFJE ───────────────────────────────────────────────
   Vier schermen in één kolom: intro, de zes vragen, het slot en de uitslag.
   `voorproefje.js` tekent ze allemaal in `#vp-app`.

   DE STARTKNOP STAAT BOVEN DE VOUW, EN DAT IS GEMETEN (30 september 2026). Uit
   twintig advertentiekliks startte niemand het voorproefje: op een telefoon van
   390x734 stond de knop op y=1129, dus 395 pixels ONDER de vouw, met de
   cookiemelding (217px, en die krijgt elke eerste bezoeker) over het midden.
   Daarom staat de knop hier VÓÓR de stappenlijst en niet erna, en is alles
   eronder verticale ruimte in plaats van een extra blok.

   DE COOKIEMELDING KUN JE NIET WEGREKENEN en zijn bereik is geen vast getal:
   hij plakt aan de ONDERKANT, dus zijn bovenrand schuift met de schermhoogte
   mee terwijl de knop op een vaste afstand van BOVEN staat. Hoe korter het
   scherm, hoe erger de overlap. Meet een wijziging hier dus op 390 x 844, 734,
   664 ÉN 600, en nooit op 844 alleen: dat is de maat van het TOESTEL, niet van
   wat de browser overhoudt. */
.vp-wrap { padding: calc(var(--navh) + var(--r5)) 0 var(--sec); background: var(--grond); position: relative; overflow: clip; }
.vp-leeg { color: var(--tekst-2); max-width: 46ch; }

/* ── DE PAGINA HAD GEEN RITME, EN DAT WAS TE METEN ────────────────────────
   Gemeld als "het is heel wit". Twee cijfers eronder, allebei op 1440:

     node dev-test/wit/nieuw/banden.mjs voorproefje start

   gaf voor /voorproefje EEN band (de voet) en voor /start er acht met vier
   beelden; en de inhoud droeg hier 51% van de vensterbreedte tegen 94% op
   /start en op de homepage. Dat is geen smaak maar een pagina die uit een
   kolom van 46rem bestaat, linksboven in een raam van 1480, op een vlak van
   een kleur van de navbalk tot de voet.

   WAT ERAAN GEDAAN IS, in twee lagen:
     - HET INTROSCHERM IS EEN DONKERE HERO geworden, met `.ph.ph-donker` uit
       dit bestand. Geen nieuw onderdeel: het is dezelfde hero waarmee /plan,
       /coach, /start en /hoe-het-werkt openen. `voorproefje.js` zet die twee
       klassen op `<main>` zolang `.vp-intro` in beeld staat.
     - DE DRIE SCHERMEN DAARNA BLIJVEN LICHT, maar hun kolom staat GECENTREERD
       in plaats van tegen de linkerrand, en de grond draagt dezelfde zachte
       gloed als het platform. Een vragenlijst hoort rustig te zijn; wat er mis
       was, was de 700 pixels leegte ernaast.

   WAAROM DE QUIZ GEEN WIT VLAK KREEG, want dat is de voor de hand liggende
   stap en hij is bekeken: de antwoordkaarten (`.vp-optie`) ZIJN al witte
   vlakken. Een wit paneel eronder maakt die onzichtbaar, en dan moet de hele
   vragenlijst een andere kleurverdeling krijgen voor iets wat de centrering
   ook oplost. `.login-kaart` mag dat wel - daar staat geen enkel wit vlak in. */

/* DE GLOED OP DE LICHTE SCHERMEN. Twee zachte vegen in de merkkleuren, zoals
   `.stappen-band` en het platform ze gebruiken, maar veel zwakker: op een
   lichte grond telt elke procent dubbel zo zwaar als op een donkere. Hij zit
   op een `::before` en niet op de `background` van `.vp-wrap` zelf, want die
   wisselt met de donkere hero mee. */
.vp-wrap:not(.ph-donker)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(255, 83, 108, .09), rgba(255, 83, 108, 0) 68%),
    radial-gradient(52% 50% at 92% 22%, rgba(159, 214, 219, .20), rgba(159, 214, 219, 0) 70%);
}
.vp-wrap > * { position: relative; }

/* DE HERO. `.ph` draagt zijn eigen ruimte, maar `.vp-wrap` staat LATER in dit
   bestand en wint daarmee op gelijke specificiteit; deze regel zet allebei
   expliciet, zodat de volgorde in het bestand er niet meer toe doet. */
.vp-wrap.ph-donker { background: var(--navy); padding: calc(var(--navh) + 72px) 0 var(--r6); }

/* ── Het introscherm ─────────────────────────────────────────────────────
   Het woord "merkarchetype" staat hier BEWUST niet: zie de kop van
   voorproefje.js. Wat er wel staat is de uitkomst (hoe je merk overkomt) plus
   het voorbeeldplan als volwaardige tweede belofte.

   TEKST LINKS, KAARTEN RECHTS, met dezelfde 1,15 tegen 1 als `.ph-grid`: twee
   even brede helften lezen als een raster, en de tekst houdt de leeskant.
   DE STAPPENLIJST STAAT ERONDER OVER DE VOLLE BREEDTE en niet in de
   tekstkolom. Drie kolommen in een halve breedte worden ~190 pixels per stap,
   en dat is te smal voor de regel die de RUIL noemt. */
.vp-intro { max-width: none; }
.vp-intro-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--r6); align-items: center; }
.vp-intro-tekst { max-width: 46rem; }
.vp-intro-tekst h1 { max-width: 20ch; }
.vp-intro-acties { margin-top: var(--r4); }
.vp-intro-noot { margin-top: var(--r3); font-size: 15px; color: var(--tekst-3); }

/* ── DE WAAIER VAN DRIE KAARTEN ──────────────────────────────────────────
   Zie `introKaarten()` in voorproefje.js voor WELKE drie en waarom het de
   echte kaarten zijn.

   DE STAPELVOLGORDE LOOPT VAN LINKS NAAR RECHTS, en dat is geen smaak maar
   waar de NAAM op de kaart staat. Elk kaartje draagt zijn naam linksboven. In
   de eerste versie lag de middelste bovenop (een voorkant met de keuze
   eromheen), en dan dekt die precies de linkerbovenhoek van de kaart
   RECHTS ervan af: er stond "DEKKER" in beeld. Een half afgesneden woord leest
   als een renderfout, hoe bedoeld de stapel ook is.
   Met een oplopende z-index overlapt elke kaart de RECHTERkant van zijn buur,
   en blijven alle drie de namen vrij. Zo ligt een echte waaier kaarten ook.

   DE KAARTEN ZIJN ABSOLUUT GEPLAATST, want anders bepaalt de langste van de
   drie de hoogte van het raster en springt de kop ernaast mee zodra er een
   beeld binnen is. Het VAK eromheen haalt zijn hoogte daarom uit zijn breedte:

     kaartbreedte  = 42% van het vak
     kaarthoogte   = breedte x 1,414 (de kaarten zijn 382 x 540)
     gedraaid      = hoogte x cos9 + breedte x sin9 = breedte x 1,553
     plus de boog  = breedte x 0,113  (de middelste staat 8% hoger)
     samen         = breedte x 1,666 = 42% x 1,666 = 70% van het vak

   Vandaar `aspect-ratio: 1 / .70`. Daarmee past de waaier op ELKE breedte in
   zijn vak en hoeft er geen enkele hoogte per breekpunt nagemeten te worden;
   alleen de MAXIMUMbreedte verschilt, zodat de kaarten op een breed scherm niet
   groter worden dan de 250 pixels waarvoor het beeld scherp genoeg is (de bron
   is 382 breed, dus dat is al krap tweemaal).

   DE REGEL ERONDER STAAT BUITEN DIT VAK, in de gewone stroom. Hij stond op
   `bottom: 0` BINNEN het vak en botste toen met de onderste kaart: gemeten liep
   hij op 1440, 900, 760, 640, 480 en 390 over het beeld heen, en alleen tussen
   1000 en 1200 niet. Zo'n overlap is niet met een hoogte per breekpunt op te
   lossen zonder hem bij de volgende wijziging terug te krijgen. */
.vp-kaarten { display: grid; justify-items: center; gap: var(--r3); }
.vp-kaarten-fan { position: relative; display: block; width: 100%; max-width: 595px; aspect-ratio: 1 / .70; }
.vp-kaarten img {
  position: absolute; top: 50%; left: 50%;
  width: 42%; height: auto; border-radius: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
  transform-origin: center;
}
/* De middelste staat iets hoger dan de twee ernaast: dat maakt van drie
   schuine rechthoeken een boog, en zonder die boog leest het als een stapel
   die is omgevallen. */
.vp-kaarten img:nth-of-type(1) { transform: translate(-50%, -46%) translateX(-64%) rotate(-9deg); z-index: 1; }
.vp-kaarten img:nth-of-type(2) { transform: translate(-50%, -54%) rotate(-1deg); z-index: 2; }
.vp-kaarten img:nth-of-type(3) { transform: translate(-50%, -46%) translateX(64%) rotate(8deg); z-index: 3; }
/* De regel eronder zegt wat je ziet. Zonder hem is het drie foto's van vreemden
   en moet je raden waarom ze er staan. Het woord "merkarchetype" valt hier
   bewust niet; "merkkarakter" staat al op de knop ernaast. */
.vp-kaarten-noot {
  text-align: center;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3);
}

/* DE STAPPENLIJST NOEMT DE RUIL als stap 2 van drie. Sinds 28 september 2026 zit
   de uitslag achter het e-mailadres; dat mag, maar dan moet dit scherm het
   noemen - anders is het na zes vragen een verrassing, en dat was het oude
   bezwaar. Een vermelding die alleen in de lead overblijft is niet genoeg:
   `voorproefje-slot-test.cjs` kijkt gericht naar deze lijst. */
/* DE LIJN EN DE TITEL VOLGEN DE BAND EN STAAN NIET VAST OP NAVY. Allebei
   stonden ze hard op `rgb(var(--inkt))` resp. `rgba(26,37,48,.14)`, en dat
   klopte zolang dit scherm op de lichte grond stond. Sinds het introscherm een
   donkere hero is, is dat navy op navy: de drie titels ("Zes korte vragen",
   "Je e-mailadres", "Je uitslag") en de lijn erboven waren letterlijk
   ONZICHTBAAR, terwijl het nummer en de regel eronder gewoon stonden. Dat is
   de klassieke stille contrastfout - geen foutmelding, geen scheve layout,
   alleen tekst die er niet meer is.
   `--haarlijn` en `color: inherit` volgen de band die eromheen staat:
   `.ph-donker` zet allebei om, de lichte grond laat ze zoals ze waren. */
.vp-stappen { margin-top: var(--r5); display: grid; gap: var(--r3); grid-template-columns: repeat(3, 1fr); list-style: none; }
.vp-stappen li { display: grid; gap: 6px; align-content: start; padding-top: var(--r3); border-top: 2px solid var(--haarlijn); }
.vp-stap-n { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--coral-tx); }
.vp-stappen strong { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.16; color: inherit; }
.vp-stappen li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--tekst-2); }

/* ── De zes vragen ─────────────────────────────────────────────────────────
   DE KOLOM STAAT GECENTREERD, en dat is de helft van de klacht hierboven. Hij
   was 46rem breed en begon op de linkerrand van een raam van 1480: op een
   laptop stond er 700 pixels niets naast elke vraag, en dat leest als een
   pagina die niet af is in plaats van als een rustige vragenlijst.

   `margin-inline` OP ELK BLOK EN NIET EEN WIKKEL OM ALLES. `voorproefje.js`
   tekent vier schermen met elk hun eigen bovenste elementen; een wikkel zou een
   vijfde element zijn dat elk scherm moet onthouden, en precies dat is wat hier
   stil fout gaat. */
.vp-voortgang { display: flex; align-items: center; gap: var(--r3); max-width: 46rem; margin-inline: auto; }
.vp-balk { flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(26, 37, 48, .14); overflow: hidden; }
.vp-balk i { display: block; height: 100%; border-radius: 2px; background: var(--coral); transition: width .34s cubic-bezier(.25, .8, .3, 1); }
.vp-balk-tel { flex: none; font-size: 14px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.vp-vraag { margin-top: var(--r4); max-width: 46rem; margin-inline: auto; }
.vp-vraag-sub { margin-top: var(--r2); color: var(--tekst-2); }
.vp-opties { margin-top: var(--r4); display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin-inline: auto; }
/* DRIE OPTIES NAAST ELKAAR, een opsomming van zes in twee kolommen, en een
   optie MET toelichting in één kolom. Een rij van zes wordt onleesbaar smal, en
   een optie met een regel uitleg eronder leest als een lijst en niet als een rij
   knoppen. `voorproefje.js` kiest de klasse. */
.vp-opties-3 { grid-template-columns: repeat(3, 1fr); }
.vp-opties-1 { grid-template-columns: 1fr; }
.vp-optie {
  display: grid; gap: 3px; justify-items: start; text-align: left;
  padding: 17px 20px; border-radius: var(--rond); cursor: pointer;
  background: var(--wit);
  border: 1px solid rgba(26, 37, 48, .14);
  font-family: var(--sans);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vp-optie:hover { border-color: rgba(26, 37, 48, .34); transform: translateY(-2px); box-shadow: var(--schaduw-m); }
/* GEKOZEN licht de kaart even op voordat het scherm doorschuift. Die pauze van
   240 ms is waar deze stand voor bestaat: zonder hem zie je je eigen keuze
   nooit. Zie `vpKies` voor waarom dat met één lopende timer moet. */
.vp-optie.gekozen { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.vp-optie-t { font-size: 17px; font-weight: 600; color: rgb(var(--inkt)); }
.vp-optie-d { font-size: 14px; color: var(--tekst-3); }
.vp-terugrij { margin-top: var(--r4); max-width: 46rem; margin-inline: auto; }
.vp-terugrij-midden { display: flex; justify-content: center; }
.vp-terugrij button[disabled] { opacity: .35; cursor: default; border-bottom-color: transparent; }

/* ── Het slot en de uitslag ──────────────────────────────────────────────
   OOK HIER GECENTREERD, maar RUIMER dan de vragenlijst. Dit scherm draagt de
   archetypekaart (een liggend tweeluik van beeld en tekst) en het raster van
   twaalf; op 46rem werd dat raster vier kolommen van 170 pixels en stond de
   kaart in de helft van het venster te verdringen terwijl de andere helft leeg
   bleef. De LOPENDE TEKST houdt zijn eigen leesmaat: die staat per blok in `ch`
   en rekt niet mee met de kolom. */
.vp-uitslag { max-width: 68rem; margin-inline: auto; }
.vp-uitslag h1 { max-width: 22ch; }
.vp-uitslag > .lead { max-width: 54ch; }

/* ── HET SLOT: WAT JE MIST NAAST WAAR JE HET KRIJGT ──────────────────────
   Dit is het scherm waar de ruil wordt gemaakt, en het was het leegste van de
   vier: de vervaagde kaart en het formulier stonden onder elkaar in de linker
   helft, dus je scrolde langs een lege rechterhelft van de een naar de ander.

   NAAST ELKAAR ZEGT HET ARGUMENT IN EEN OOGOPSLAG: links wat achter het slot
   zit, rechts het veld dat het opent. De volgorde in de MARKUP blijft wat hij
   was (eerst de kaart, dan het formulier), dus op een smal scherm en voor een
   schermlezer verandert er niets.

   DE GRENS IS 1000px EN NIET 900. Onder de 1000 is het formulier met zijn drie
   opsommingsregels, twee vinkjes, de noot en de knop smaller dan zijn eigen
   inhoud; dan is onder elkaar beter. */
.vp-slot-grid { display: grid; gap: var(--r5); align-items: start; }
.vp-slot-grid > .vp-slot-vaagwrap, .vp-slot-grid > .vp-mail { margin-top: 0; }
@media (min-width: 1000px) {
  .vp-slot-grid { grid-template-columns: 1fr 1fr; gap: var(--r4); margin-top: var(--r5); align-items: center; }
}
.vp-gelukt {
  margin-bottom: var(--r4); padding: 14px 18px; border-radius: var(--rond);
  background: rgba(159, 214, 219, .22); border: 1px solid rgba(12, 104, 114, .3);
  font-size: 15px; line-height: 1.55; color: rgb(var(--inkt));
}

/* OP SLOT STAAT DE EIGEN KAART VERVAAGD IN BEELD, niet een kaal formulier. De
   uitslag bestaat en is specifiek, en dat moet je ZIEN voordat je je adres
   geeft; zien wat je mist werkt aantoonbaar beter dan het lezen.

   HET LABEL EROVER IS GEEN FRANJE. Zonder hem leest een vervaagd vlak als een
   LAADSCHERM in plaats van als een slot, en dan lijkt de pagina stuk op precies
   het moment dat je om een adres vraagt. Op een telefoon viel dat het sterkst
   op. De NAAM van het archetype staat er bewust niet bij: die is de uitslag. */
.vp-slot-vaagwrap { position: relative; margin-top: var(--r5); }
.vp-slot-vaag { filter: blur(9px); opacity: .8; pointer-events: none; user-select: none; }
.vp-slot-over { position: absolute; inset: 0; display: grid; place-items: center; }
.vp-slot-label {
  padding: 9px 20px; border-radius: 100px;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(26, 37, 48, .16);
  box-shadow: var(--schaduw-m);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--inkt));
}

/* DE ARCHETYPEKAART IS EEN EIGEN KAART EN NIET `buildArchetypeCard` UIT DE SPA.
   Die functie leunt op de plan-CSS van het platform (`getPlanCss()`), en die
   hierheen halen betekent ruim 60 kB regels meenemen voor een kaart die deze
   site met zijn eigen beeld al kan tekenen. Het BEELD is hetzelfde: de twaalf
   kaarten uit `afbeeldingen/archetypen/`, die ook de intake gebruikt. */
.vp-kaart-mount { margin-top: var(--r5); }
/* DE KAART IS BEGRENSD EN REKT NIET MEE MET DE KOLOM. Sinds het uitslagscherm
   68rem breed is (voor het raster van twaalf) werd deze kaart 1088 pixels, en
   de tekst erin is kort: de drijfveer is een halve regel en de kernboodschap
   een citaat van zes woorden. Wat je dan ziet is een wit vlak dat voor de helft
   leeg is. De lopende tekst draagt zijn eigen leesmaat; het VLAK moet daarin
   meebewegen. */
.vp-kaart { margin: 0; max-width: 880px; display: grid; grid-template-columns: 240px 1fr; gap: var(--r4); align-items: center; background: var(--wit); border-radius: var(--rond); padding: var(--r4); box-shadow: var(--schaduw-l); border-top: 3px solid var(--arch, var(--coral)); }
.vp-kaart img { display: block; width: 100%; height: auto; border-radius: 12px; }
.vp-kaart figcaption { display: grid; gap: var(--r2); }
.vp-kaart-groep { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); }
.vp-kaart-naam { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.04; color: rgb(var(--inkt)); }
.vp-kaart-drijf { font-size: 17px; line-height: 1.55; color: var(--tekst-2); }
/* De kernboodschap is een CITAAT en staat tussen aanhalingstekens in de data.
   Cursief en met een lijn ervoor, zodat hij als stem leest en niet als een
   tweede alinea. */
.vp-kaart-kern { font-family: var(--serif); font-size: 21px; font-style: italic; line-height: 1.3; color: rgb(var(--inkt)); padding-left: var(--r3); border-left: 2px solid var(--arch, var(--coral)); }

/* DE DRIE TIPS ZIJN HET ENIGE OP DIT SCHERM MET EEN HANDELING ERIN. Zonder deze
   drie is de uitslag een label, en een label kun je nergens mee. */
.vp-tips { margin-top: var(--r5); }
.vp-tips-lijst { margin-top: var(--r3); display: grid; gap: var(--r3); list-style: none; }
.vp-tips-lijst li { display: grid; grid-template-columns: 34px 1fr; gap: var(--r2); align-items: start; color: var(--tekst-2); line-height: 1.6; }
.vp-tip-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 83, 108, .1); color: var(--coral-tx); font-family: var(--serif); font-weight: 600; font-size: 15px; }

.vp-naast { margin-top: var(--r4); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-naast-lbl { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); }
.vp-chip { cursor: pointer; background: var(--wit); font-family: var(--sans); }
.vp-chip:hover { border-color: rgba(26, 37, 48, .4); }

/* ── Het overzicht van alle twaalf ───────────────────────────────────────
   BEWUST achter het e-mailadres, en het eigen archetype bewust ervoor. De
   vergelijking met de andere elf is DIEPTE, en het enige op dit scherm waarvoor
   een adres een eerlijke ruil is; de eigen uitkomst is het bewijs en blijft
   vrij. Tot 9 september 2026 lag het hele raster open, en toen vroeg het
   formulier dus in feite om een adres voor iets wat de bezoeker al had. */
.vp-raster-blok, .vp-raster-slot { margin-top: var(--r5); }
.vp-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--r3); }
.vp-mini {
  position: relative; display: grid; gap: 3px; justify-items: start; text-align: left;
  padding: 15px 16px; border-radius: 12px; background: var(--wit);
  border: 1px solid rgba(26, 37, 48, .12);
  border-left: 3px solid var(--arch, var(--coral));
  font-family: var(--sans); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vp-mini:hover { transform: translateY(-2px); box-shadow: var(--schaduw-m); }
.vp-mini.is-jij { box-shadow: 0 0 0 1px var(--coral); }
.vp-mini-jij { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-tx); }
.vp-mini-naam { font-family: var(--serif); font-weight: 600; font-size: 19px; color: rgb(var(--inkt)); }
.vp-mini-groep { font-size: 13px; color: var(--tekst-3); }
/* Op slot staan de kaarten VERVAAGD met het aanbod eroverheen: zien wat je mist
   werkt beter dan het lezen, en het is hetzelfde patroon als het slot over de
   eigen kaart hierboven. Blur 9px is op deze tekstgrootte ruim onleesbaar; het
   blok vangt geen klikken, dus er valt niets af te lezen zonder het adres. */
.vp-raster-slot { position: relative; }
.vp-raster-vaag { filter: blur(9px); opacity: .55; pointer-events: none; user-select: none; }
.vp-raster-over { position: absolute; inset: 0; display: grid; gap: var(--r2); place-content: center; justify-items: center; text-align: center; padding: var(--r3); }
.vp-raster-over p { max-width: 44ch; color: var(--tekst-2); }
.vp-al-vrij { margin-top: var(--r4); color: var(--teal-tx); font-weight: 600; }

/* ── Het e-mailformulier ─────────────────────────────────────────────────
   Het ZWAARSTE blok van dit scherm, en koraal is ervoor gereserveerd: dit is
   het enige doel van de uitslagpagina. Een tweede accentknop ernaast trekt de
   bezoeker er juist weg. */
.vp-mail { margin-top: var(--r5); background: var(--wit); border-radius: var(--rond); padding: var(--r4); box-shadow: var(--schaduw-l); border-top: 3px solid var(--coral); }
.vp-mail-kop { display: block; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.16; color: rgb(var(--inkt)); }
.vp-mail-lijst { margin-top: var(--r3); display: grid; gap: var(--r2); list-style: none; }
.vp-mail-lijst li { padding-left: var(--r3); position: relative; color: var(--tekst-2); line-height: 1.6; }
.vp-mail-lijst li::before { content: ''; position: absolute; left: 0; top: .66em; width: 10px; height: 2px; background: var(--coral); }
.vp-mail-lijst strong { color: rgb(var(--inkt)); }
.vp-mail-veld { margin-top: var(--r4); margin-bottom: 0; }
.vp-mail-input.mis { border-color: var(--coral); }
/* DE VINKJES STAAN BOVEN DE KNOP. Eronder vraag je om toestemming nadat je de
   bezoeker al hebt uitgenodigd te klikken, en dan leest bijna niemand ze.
   Ze zijn even zwaar opgemaakt: het tweede is een eigen keuze, geen kleine
   letter bij het eerste. */
.vp-vink { display: flex; gap: 11px; align-items: flex-start; margin-top: var(--r3); cursor: pointer; }
.vp-vink input { margin: 3px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--coral); }
.vp-vink span { font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
/* Deze regel is GEEN toestemmingstekst en wordt nergens als bewijs bewaard; hij
   mag dus concreter zijn dan het vinkje. De LAATSTE ZIN is sinds 28 september
   2026 dragend: nu de uitslag achter het adres zit, is dit het enige waaraan te
   zien is dat het vinkje optioneel is. */
.vp-mail-noot { margin-top: var(--r3); font-size: 13.5px; line-height: 1.5; color: var(--tekst-3); }
.vp-mail-fout { color: var(--coral-tx); font-weight: 600; }
.vp-ts:not(:empty) { margin-top: var(--r3); }
.vp-mail-knop { width: 100%; justify-content: center; margin-top: var(--r3); }

/* Het kader staat ONDER de vraag om een adres, en de knop is bewust GEEN
   koraal: koraal is op deze site de hoofdactie, en dat is hier het formulier
   erboven. Wie zijn adres niet wil geven kan alsnog naar het voorbeeldplan;
   daar staat dezelfde vraag, met de vervaging die laat zien wat er mist. */
.vp-kader { margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid var(--haarlijn); }
.vp-kader p { margin-top: var(--r2); color: var(--tekst-2); max-width: 54ch; }
.vp-kader-acties { margin-top: var(--r4); }
/* `.knop-rand` IS GEMAAKT VOOR EEN DONKERE BAND: witte letter, witte haarlijn,
   doorzichtige grond (zie stijl.css). In de markup staat hij twee keer, allebei
   in een prijskaart, en daar klopt dat. Dit is de enige plek op de site waar hij
   op de LICHTE grond belandt, en daar was hij wit op bijna-wit: de knop
   "Liever eerst even kijken" stond er wel en was onleesbaar. Gemeten
   `color: rgb(255,255,255)` met `box-shadow` in wit op `#F0EFF0`.
   Dat is de uitweg voor wie zijn adres niet wil geven, dus het is niet alleen
   lelijk maar kost een route. De twee prijskaarten blijven ongemoeid; deze
   regel is gescoped op `.vp-kader`. */
.vp-kader .knop-rand {
  color: rgb(var(--inkt));
  box-shadow: inset 0 0 0 1px rgba(var(--inkt), .28);
}
.vp-kader .knop-rand:hover {
  background: rgba(var(--inkt), .05); color: rgb(var(--inkt));
  box-shadow: inset 0 0 0 1px rgba(var(--inkt), .5);
}
.vp-kader-link { margin-top: var(--r3); font-size: 15px; color: var(--tekst-3); }

/* ── Het paneel met een ander archetype ──────────────────────────────────
   In de SPA opende hier `openArchetypeModal`, dat op de plan-CSS van het
   platform leunt. Dit is een eigen paneel met dezelfde data uit ARCH.
   DE WAAS IS DONKER, ook op een lichte pagina: anders verdwijnt het onderscheid
   tussen het venster en de pagina eronder. Zelfde afspraak als bij het
   betaalvenster. */
.vp-arch-waas { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: var(--r3); background: rgba(15, 25, 35, .62); overflow: auto; }
.vp-arch-kaart { position: relative; width: 100%; max-width: 760px; background: var(--wit); border-radius: var(--rond); padding: var(--r5) var(--r4) var(--r4); box-shadow: var(--schaduw-l); }
.vp-arch-kaart .vp-kaart { box-shadow: none; padding: 0; border-top: 0; }
.vp-arch-kaart .vp-tips-lijst { margin-top: var(--r4); padding-top: var(--r4); border-top: 1px solid var(--haarlijn); }
.vp-arch-x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(26, 37, 48, .06); color: rgb(var(--inkt)); font-size: 26px; line-height: 1; cursor: pointer; }
.vp-arch-x:hover { background: rgba(26, 37, 48, .12); }

/* ── Smal ───────────────────────────────────────────────────────────────
   UITSLUITEND verticale ruimte en kolommen; er gaat geen woord weg en geen
   aanraakvlak onder de 44px. De grootste winst zit boven de stappenlijst, want
   dat is precies de ruimte boven de startknop. */
@media (max-width: 900px) {
  .vp-stappen { grid-template-columns: 1fr; gap: var(--r3); }
  .vp-raster { grid-template-columns: repeat(2, 1fr); }
  .vp-kaart { grid-template-columns: 1fr; gap: var(--r3); }
  .vp-kaart img { max-width: 260px; }
  /* DE WAAIER ZAKT ONDER DE TEKST EN NOOIT ERBOVEN. In de markup staat hij al
     NA de knop, dus deze ene kolom houdt de startknop op exact dezelfde hoogte
     als voor deze ronde - en dat is de maat die telt (zie de meting bovenaan
     dit blok: uit twintig advertentiekliks startte er niemand toen die knop
     395 pixels onder de vouw stond). Wat eronder komt mag opschuiven; de
     stappenlijst staat daar toch al buiten beeld. */
  .vp-intro-top { grid-template-columns: 1fr; gap: var(--r4); }
  /* Onder de kop is de kolom ineens de volle breedte; zonder deze grens worden
     de kaarten daar groter dan op een laptop. */
  .vp-kaarten-fan { max-width: 440px; }
}
@media (max-width: 640px) {
  .vp-wrap { padding: calc(var(--navh) + var(--r3)) 0 var(--r6); }
  /* DEZELFDE BOVENRUIMTE ALS DE LICHTE STAND, en dat is geen detail. De
     startknop stond hier op y=354 en dat is een GEMETEN stand (zie de kop van
     dit blok: uit twintig advertentiekliks startte er niemand toen hij 395
     pixels onder de vouw stond). De donkere hero vraagt op een breed scherm
     wat meer lucht boven de kop; op een telefoon kost elke pixel daar
     rechtstreeks van die stand af. */
  .vp-wrap.ph-donker { padding: calc(var(--navh) + var(--r3)) 0 var(--r6); }
  .vp-kaarten { margin-top: var(--r2); gap: var(--r2); }
  .vp-kaarten-fan { max-width: 376px; }
  .vp-kaarten-noot { font-size: 11px; letter-spacing: .1em; }
  .vp-intro .lead { font-size: 17px; margin-top: var(--r2); }
  .vp-intro-acties { margin-top: var(--r3); }
  .vp-intro-noot { margin-top: var(--r2); }
  .vp-stappen { margin-top: var(--r4); }
  .vp-stappen li { padding-top: var(--r2); }
  .vp-opties, .vp-opties-3 { grid-template-columns: 1fr; }
  .vp-optie { padding: 14px 16px; }
  .vp-mail, .vp-arch-kaart { padding: var(--r3); }
  .vp-raster { grid-template-columns: 1fr; }
  .vp-kaart-kern { font-size: 19px; }
}


/* ── DE VASTE ACTIEBALK VAN HET VOORPROEFJE ──────────────────────────────
   Zie de toelichting bij `#lp-cta` in wit/voorproefje.html: de onderste helft
   van het eerste scherm is niet van ons, want de cookiemelding hangt aan de
   onderrand en elke advertentiebezoeker krijgt hem. Gemeten met
   `elementFromPoint` op het midden van de knop in de hero: raakbaar op 390x844,
   734 en 664, en op 390x600 NIET.

   DE GRENS IS 600px, EXACT DE BREEDTE WAAROP DE MELDING ZIJN KNOPPEN STAPELT.
   `site-cookie.css` draagt de regel die de melding omhoog schuift zodra
   `body.lp-cta-aan` staat; die is al afgeleid uit het werkbestand en hoeft hier
   niet herhaald te worden. Verzet je deze breedte, dan is de vraag welke van de
   twee elementen onderaan voorrang heeft - en dat is niet vrij, want zonder de
   balk kan iemand het voorproefje niet starten.

   `pointer-events: none` OP DE BALK EN `auto` OP DE KNOP: het verloop erboven
   loopt over de pagina en zou daar anders elke klik opvangen. */
:root { --lp-cta-h: 76px; }
#lp-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  /* DE BALK IS DEKKEND EN HET VERLOOP STAAT ERBOVEN, in een eigen laag. In het
     product is dit één verloop op de balk zelf (`0.98 65%`), en daar werkt dat:
     op een bijna zwarte grond maskeert 65% dekking de tekst eronder ruim. Op
     deze lichte grond niet - gemeten op 390x734 las de staptekst dwars door de
     regel "Gratis - 1 minuut - geen account nodig" heen, en die regel draagt de
     RUIL (je e-mailadres), dus hij moet leesbaar zijn.
     Met een dekkend vlak plus een verloop van 28px erboven is de tekst crisp en
     blijft de zachte overgang naar de pagina staan. */
  background: var(--grond);
  pointer-events: none;
}
#lp-cta::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px;
  background: linear-gradient(to top, var(--grond), rgba(240, 239, 240, 0));
  pointer-events: none;
}
/* De regel hoort BIJ de knop en niet alleen in de pagina: de notitie in de hero
   valt onder de cookiemelding, en dan drukt iemand op "Ontdek je merkkarakter"
   zonder gelezen te hebben dat zijn e-mailadres de ruil is. */
#lp-cta-note {
  pointer-events: auto;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.35;
  text-align: center; color: var(--tekst-2); margin: 0 0 8px;
}
#lp-cta-note:empty { display: none; }
#lp-cta .knop { pointer-events: auto; width: 100%; justify-content: center; min-height: 48px; }

/* ── DE BALK VOLGT DE BAND WAAR HIJ OP LIGT ──────────────────────────────
   Op /start en op de oude /voorproefje lag hij altijd op de lichte grond, dus
   `var(--grond)` was daar de goede kleur. Sinds het introscherm van
   /voorproefje een donkere hero is, stond er een LICHTE balk met een licht
   verloop onderaan een donkere band: je zag de kaarten door dat verloop heen
   oplossen in iets dat de kleur van een andere pagina had.

   DE ZUSTERCOMBINATOR EN GEEN KLASSE OP BODY. `#lp-cta` staat in de markup ná
   `<main class="vp-wrap">`, dus hij kan de stand van die band gewoon LEZEN.
   Een klasse die JS erbij moet zetten is een tweede bron die bij een nieuw
   scherm vergeten kan worden; dit kan niet uit de pas lopen. Zelfde afweging
   en dezelfde vorm als bij het label van de chatknop op de rondleiding.

   DE KNOP ZELF BLIJFT KORAAL op allebei de banden: dat is de hoofdactie van
   deze pagina, en koraal op navy is het accent dat de rest van de site er ook
   op zet. */
.vp-wrap.ph-donker ~ #lp-cta { background: var(--navy); }
.vp-wrap.ph-donker ~ #lp-cta::before {
  background: linear-gradient(to top, var(--navy), rgba(26, 37, 48, 0));
}
/* De regel draagt de RUIL (je e-mailadres) en moet dus leesbaar blijven; op
   navy is dat 78% wit, dezelfde waarde die `.ph-donker` voor lopende tekst
   gebruikt. */
.vp-wrap.ph-donker ~ #lp-cta #lp-cta-note { color: rgba(255, 255, 255, .78); }

@media (max-width: 600px) {
  body.lp-cta-aan #lp-cta { display: block; }
  /* DE RUIL STAAT MAAR ÉÉN KEER IN BEELD. Vanaf hier draagt de vaste balk hem,
     en dan is `.vp-intro-noot` een tweede regel die bijna hetzelfde zegt, vlak
     boven de eerste. Dat is precies de botsing die op /plan te zien was: twee
     knoppen en twee notities tegelijk in beeld, over elkaar heen vallend.
     Deze breedte MOET gelijk zijn aan die van `#lp-cta` hierboven, anders valt
     de regel op een strook breedtes OF dubbel OF helemaal weg. */
  .vp-intro-noot { display: none; }
  /* Ruimte onder de laatste regel, zodat de balk niets afdekt wat je nog moet
     kunnen lezen. */
  body.lp-cta-aan .vp-wrap { padding-bottom: calc(var(--r6) + var(--lp-cta-h)); }
  /* EN HETZELFDE VOOR EEN PAGINA DIE DOORLOOPT TOT DE VOET. /voorproefje eindigt
     op `.vp-wrap`, maar /start heeft een slot en een voettekst onder de balk. De
     onderste regel daarvan (de copyrightregel) valt zonder dit achter de vaste
     balk, en dat is precies de regel die zegt wie de verkoper is. */
  body.lp-cta-aan .voet-onder { padding-bottom: calc(var(--r3) + var(--lp-cta-h)); }
}

/* ── DE INLOGKAART ────────────────────────────────────────────────────────
   Hier MAG een vlak: dit is een formulier dat op zichzelf staat, zoals de
   prijskaarten het moment van beslissen zijn. */
.login-wrap { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: calc(var(--navh) + 48px) 0 var(--sec); }
.login-kaart { width: 100%; max-width: 440px; background: var(--wit); border-radius: var(--rond); padding: var(--r5) var(--r4); box-shadow: var(--schaduw-l); }
.login-kaart h1 { font-size: 38px; }
.login-sub { margin-top: var(--r2); color: var(--tekst-3); font-size: 16px; }
.login-kaart .knop { width: 100%; justify-content: center; margin-top: var(--r3); }

/* DE SOCIALE KNOP STAAT BOVEN HET FORMULIER, en dat is geen opmaakkeuze maar
   de regel uit CLAUDE.md: voor de meeste mensen is dit de kortste route, en
   het e-mailformulier blijft de volwaardige tweede weg. Hij stond hier drie
   rondes lang ONDER het formulier, dus precies andersom.
   Hij is bewust niet koraal: dat is de kleur van de hoofdknop eronder, en
   twee even zware knoppen laten je kiezen waar niets te kiezen valt. */
.login-sociaal { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; border: 1px solid rgba(26,37,48,.2); border-radius: 100px; background: transparent; font-family: var(--sans); font-size: 15px; font-weight: 600; color: rgb(var(--inkt)); cursor: pointer; margin-top: var(--r4); }
.login-sociaal:hover { background: rgba(26,37,48,.04); }
/* `[hidden]` MOET HIER EEN EIGEN REGEL KRIJGEN. De regel hierboven zet
   `display: flex`, en een display-regel op dezelfde selector WINT van het
   attribuut: zonder deze regel staat de Microsoft-knop er gewoon terwijl
   MAD_SOCIAL hem uitzet, en leest de bezoeker "Unsupported provider" zodra hij
   erop drukt. Exact dezelfde val als bij de cookiemelding (zie CLAUDE.md); die
   is daar met een schermafdruk gevonden en hier met een meting. */
.login-sociaal[hidden] { display: none; }
/* De juridische regel hoort BIJ de knop erboven: via Google kan hier een
   account ontstaan, en dat is het moment waarop de voorwaarden gelden. */
.login-juridisch { margin-top: var(--r2); font-size: 13.5px; line-height: 1.55; color: var(--tekst-3); text-align: center; }
.login-of { display: flex; align-items: center; gap: 14px; margin: var(--r4) 0 var(--r3); color: var(--tekst-3); font-size: 14px; }
.login-of::before, .login-of::after { content: ''; height: 1px; flex: 1; background: rgba(26,37,48,.14); }

/* HET OOG LIGT IN HET VELD, dus het veld krijgt ruimte aan de rechterkant.
   Zonder die padding loopt een lang wachtwoord onder de knop door. */
.veld.login-ww { position: relative; }
.veld.login-ww input { padding-right: 52px; }
.ww-oog {
  position: absolute; right: 6px; bottom: 5px; width: 42px; height: 42px;
  display: grid; place-items: center; border: 0; background: transparent;
  color: var(--tekst-3); cursor: pointer; border-radius: 50%;
}
.ww-oog:hover { color: rgb(var(--inkt)); background: rgba(26,37,48,.05); }
.ww-oog svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-vergeten { text-align: right; margin-top: calc(var(--r2) * -1 + 2px); }
.login-vergeten a { font-size: 14px; color: var(--tekst-3); }
.login-vergeten a:hover { color: rgb(var(--inkt)); }
/* De botcontrole staat er als REGEL en niet als vinkje: Turnstile draait op
   `interaction-only`, dus in verreweg de meeste gevallen is er niets te zien
   en te doen. Een leeg vak dat meestal leeg blijft is erger dan deze zin. */
/* HET SCHILDJE STAAT IN DE TEKSTREGEL EN NIET ERNAAST. Als los flex-kind
   stond het verticaal gecentreerd naast een blok van twee regels, dus op een
   telefoon zweefde het links van het midden los van de zin waar het bij
   hoort. Inline loopt hij gewoon mee met de eerste regel. */
.login-bot { margin-top: var(--r3); font-size: 13px; color: var(--tekst-3); text-align: center; }
.login-bot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.login-na { margin-top: var(--r4); padding-top: var(--r3); border-top: 1px solid var(--haarlijn); font-size: 15px; color: var(--tekst-3); text-align: center; }

/* ── DE DRIE ANDERE SCHERMEN IN DEZELFDE KAART ─────────────────────────────
   Wachtwoord vergeten, een nieuw wachtwoord kiezen en registreren. Ze staan
   alle vier in de markup en `login.js` toont er een; de kaart, de velden en
   de knop zijn gedeeld, dus wat hier bijkomt is alleen wat die drie extra
   nodig hebben.

   DE MELDINGSREGEL IS KORAAL EN WORDT TEAL ALS HET GELUKT IS. Een fout en een
   bevestiging op dezelfde plek met dezelfde kleur laten de bezoeker de zin
   lezen voor hij weet of er iets mis is; de kleur zegt dat in een oogopslag.
   Teal en niet groen: groen komt in deze huisstijl niet voor. */
.login-fout {
  margin-top: var(--r3); font-size: 14px; line-height: 1.55;
  color: var(--coral-tx); text-align: center;
}
.login-fout.is-goed { color: var(--teal-tx); }

/* Het label boven de botcontrole. Klein en stil: in verreweg de meeste
   gevallen is er onder deze regel niets te zien (Turnstile lost vanzelf op)
   en dan hoort hij niet de aandacht te trekken. */
.login-botlabel { margin-top: var(--r3); margin-bottom: 8px; font-size: 12.5px; color: var(--tekst-4); }
/* HET VAK HOUDT GEEN VASTE HOOGTE. Turnstile is meestal nul pixels hoog en
   groeit alleen als Cloudflare twijfelt; een gereserveerde hoogte zou op elk
   scherm een leeg gat opleveren voor iets dat zelden verschijnt. */
.login-ts:not(:empty) { margin-bottom: var(--r2); }

/* HET AKKOORDVINKJE IS GEEN GEWOON VELD. Het vakje staat op de eerste regel
   van de tekst (`align-items: flex-start`) en niet in het midden: bij twee
   regels zweeft het anders tussen beide in. Het aanraakvlak is 20px plus de
   regelhoogte van het label ernaast, want het hele blok is klikbaar. */
.login-akkoord {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--r3); font-size: 14px; line-height: 1.5;
  color: var(--tekst-2); cursor: pointer; text-align: left;
}
.login-akkoord input {
  margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px;
  accent-color: var(--coral); cursor: pointer;
}
.login-akkoord a { color: rgb(var(--inkt)); text-decoration: underline; }

/* De weg terug naar het inlogscherm, onder "vergeten" en "registreren". */
.login-terug { margin-top: var(--r3); text-align: center; font-size: 14px; }
.login-terug a { color: var(--tekst-3); }
.login-terug a:hover { color: rgb(var(--inkt)); }

/* ── DE INLOGKAART OP EEN TELEFOON ────────────────────────────────────────
   HIER GAAT GEEN WOORD WEG EN GEEN AANRAAKVLAK OMLAAG; dit blok bevat
   uitsluitend verticale ruimte, net als het blok MOBIELE COMPRESSIE in
   stijl.css. De velden houden hun 50 pixels (ruim boven de ondergrens van 44)
   en de knop zijn 51.

   WAAROM HET MOET. Gemeten op 390 breed stond het e-mailveld op y=544 en het
   wachtwoordveld op 645; op een scherm van 664 viel dat tweede veld er half
   buiten. Dat is dezelfde klacht waarmee de donkere pagina op 13 oktober 2026
   begon, en daar is hij opgelost tot 493 en 596. Wat er hier bovenop kwam is
   de ruimte van de witte vormtaal: 48 pixels lucht boven de kaart en 44 erin.

   Gemeten na dit blok (390 breed, cookiemelding weggeklikt):

     scherm   e-mailveld        wachtwoordveld
     844      480-530 in beeld  581-631 in beeld
     734      480-530 in beeld  581-631 in beeld
     664      480-530 in beeld  581-631 in beeld

   DE KNOP KOMT HIERMEE NIET IN BEELD, en dat kan ook niet: onder het
   wachtwoord staan de vergeten-link, de foutregel, de botregel en Turnstile,
   samen ruim 190 pixels. Dat geldt op de donkere pagina net zo. Wat eronder
   staat is bereikbaar door te scrollen; wat telt is dat je bij binnenkomst
   ziet DAT dit een formulier is, en dat deden de twee velden niet. */
@media (max-width: 900px) {
  /* 48 pixels lucht boven de kaart is op een laptop ademruimte en op een
     telefoon een zesde scherm. De nav moet er nog steeds onderuit komen. */
  .login-wrap { padding: calc(var(--navh) + 16px) 0 var(--r6); min-height: 0; }
  .login-kaart { padding: var(--r4) var(--r3); }
  /* De grootste losse besparing na de twee hierboven: de ruimte boven de
     Google-knop en boven de scheidingsregel eronder. */
  .login-sociaal { margin-top: var(--r3); }
  .login-of { margin: var(--r3) 0 var(--r2); }
}

/* ── EEN SMALLE BAND MET EEN MEDEDELING ───────────────────────────────────
   De garantie, de doorverwijzing naar de coach: een regel die er wel moet
   staan maar geen eigen sectie van 120 pixels verdient. */
.strook { display: flex; align-items: center; justify-content: space-between; gap: var(--r4); flex-wrap: wrap; padding: var(--r4) 0; border-top: 1px solid var(--haarlijn); border-bottom: 1px solid var(--haarlijn); }
.strook p { color: var(--tekst-2); max-width: 60ch; }
/* Een strook die niet de eerste inhoud van zijn band is, houdt afstand van
   het blok erboven. */
.strook-los { margin-top: var(--r6); }
.strook strong { font-family: var(--serif); font-weight: 600; font-size: 24px; display: block; margin-bottom: 6px; color: rgb(var(--inkt)); }
.ph-donker .strook strong, .bewijs .strook strong { color: #FFFFFF; }

/* ── SMAL ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ph { padding: calc(var(--navh) + 44px) 0 var(--sec); }
  .ph-grid, .scene, .scene.om, .punten, .contact-grid, .doc-grid, .met-vance, .ik-lijst { grid-template-columns: 1fr; gap: var(--r5); }
  .scene + .scene { margin-top: var(--sec); }
  .scene.om .scene-tekst { order: 0; }
  .secties { grid-template-columns: 1fr; }
  .cijfers { grid-template-columns: 1fr 1fr; gap: var(--r3); }
  .tl-r { grid-template-columns: 1fr; gap: var(--r2); }
  .ph-tekst { max-width: none; }
  .doc-nav { position: static; }
  .met-vance img { max-width: 150px; }
  .punt:first-child { border-top: 1px solid var(--haarlijn); }
  /* De archetypekaart staat op een telefoon gecentreerd: links uitgelijnd
     onder een volle tekstkolom leest hij als een losse bijlage. */
  .arch-kaart img { margin-inline: auto; }
}
@media (max-width: 560px) {
  .cijfers { grid-template-columns: 1fr 1fr; }
  .gesprek { padding: var(--r3); }
  .g-bel { max-width: 92%; }
}

/* ── DE BANDEN ────────────────────────────────────────────────────────────
   Op de homepage heeft elke sectie een eigen klasse die toevallig ook de
   achtergrond zet. Dat werkt daar (negen secties, elk een eigen vorm), maar op
   elf pagina's zou het elf keer hetzelfde opleveren onder een andere naam.
   Hier is de BAND los van de inhoud: drie gronden die elkaar afwisselen, en de
   afwisseling is wat het ritme maakt. `banden.mjs` meet hem na.

   DE DONKERE BAND DRAAIT DE TOKENS OM in plaats van per regel een kleur te
   zetten. Zo blijft elke regel eronder ongewijzigd werken; dezelfde aanpak als
   bij `.bewijs` en de prijskaarten op de homepage. */
.band-wit, .band-grond, .band-donker { padding: var(--sec) 0; }
.band-wit { background: var(--wit); border-top: 1px solid var(--haarlijn); border-bottom: 1px solid var(--haarlijn); }
.band-grond { background: var(--grond); }
.band-donker {
  background: var(--navy); color: #FFFFFF;
  --haarlijn: rgba(255, 255, 255, .16);
  --tekst-2: rgba(255, 255, 255, .78);
  --tekst-3: rgba(255, 255, 255, .6);
  --tekst-4: rgba(255, 255, 255, .5);
  --coral-tx: var(--coral);
  --teal-tx: var(--teal);
}
.band-donker .knop {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 1px 2px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.3);
}

/* DE SECTIEKOP STAAT NAAST ZIJN LEAD, niet erboven. Label, kop en alinea onder
   elkaar is de opbouw die zes van de negen homepage-secties hadden voordat
   ronde 16 dat doorbrak; op elf pagina's zou het de hele site platslaan. De
   lead zakt mee naar de onderlijn van de kop. */
/* ── DE DRIE NIVEAUS VAN SECTIE 2 OP /start ───────────────────────────────
   Maat EN kleur drukken de volgorde uit; zie de toelichting in start.html.
   Eerder stonden hier twee regels van 54px en een kop van 36px boven een lijst
   met koppen van 38px, dus de hiërarchie was niet af te lezen.

                      1440    390
       1. de pijn       72px    38px   navy     .uitspraak h2
          de naregel    30px    21px   grijs    .uitspraak p
       2. de omslag     46px    30px   navy     .lijst-kop
       3. de onderdelen 32px    23px   navy     .belofte-lijst.ladder .belofte-kop
          de subregel   19px    16px   grijs    .belofte-sub

   DE HIERARCHIE LOOPT OP INKT EN MAAT, NIET OP KLEURTOON, en dat is een
   correctie op ronde 5. Daar stond de pijn in `--coral-tx` en de omslag in
   `--teal-tx`. Allebei die tokens zijn CONTRASTvarianten die alleen op een
   LICHTE grond gelden: `--coral-tx` is #BB1137 (wijnrood) en `--teal-tx` is
   #0C6872 (petrol). Op een donkere band draaien ze om naar de echte #FF536C en
   #9FD6DB (zie `.product`, `.bewijs`, `.stappen-band` in stijl.css), maar op
   licht blijven het die twee donkere tinten - en een kop van 72px in wijnrood
   leest niet als madvance.

   ZO DOET DE REST VAN DE SITE HET OOK. De homepage zet daar "Elke week weet je
   wat je doet." in navy met "Met de reden erbij." in grijs eronder: EEN kleur,
   TWEE inkten. De merkkleur verschijnt op een lichte band alleen als VULLING -
   de knop, de stip van `.stap::after`, het vinkje van `.prijs li::before` - en
   nooit als grote tekst. Zet hier dus geen `--coral-tx` of `--teal-tx` terug op
   een kop; de kleur van deze pagina komt uit de donkere banden.

   DE LADDER MOET OP BEIDE BREEDTES ECHT ZIJN, en dat is hier de valkuil. Met
   de eerste maten (46 en 38) stond er op 390 `clamp(28px, 3vw, 46px)` naast
   `clamp(26px, 2.6vw, 38px)`: twee pixels verschil, dus op een telefoon droeg
   alleen de kleur de volgorde nog. Gemeten, niet geschat; `clamp` zakt op een
   smal scherm naar zijn vloer en daar vallen twee niveaus samen die op een
   breed scherm acht pixels uit elkaar liggen. Reken bij een nieuwe maat dus
   altijd de VLOEREN tegen elkaar na, niet de plafonds.

   `.uitspraak` vervangt het `.verhaal-grid` dat hier stond. Dat raster zet een
   label in een kolom van 200px met de tekst ernaast; nu dat label weg is, valt
   er niets in te zetten en begint de uitspraak op dezelfde linkerrail als de
   kop en de nummers eronder. */
.uitspraak { max-width: 980px; margin-bottom: var(--r6); }
.uitspraak h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -.02em;
  color: rgb(var(--inkt));
}
/* DE TWEEDE REGEL OP DEZELFDE MAAT, ALLEEN LICHTER. Dat is het device van de
   homepage ("Elke week weet je wat je doet." / "Met de reden erbij.") en het
   is iets anders dan wat hier stond: een naregel van 30px leest als een
   bijschrift onder een kop, en deze zin is geen bijschrift maar de tweede helft
   van de uitspraak.
   `--tekst-3` en geen eigen rgba: die laag is uitgerekend op 4,77:1 en staat
   bovenaan stijl.css met de instructie geen losse waarden meer te schrijven. */
.uitspraak h2 span { display: block; color: var(--tekst-3); }

/* DE OMSLAG NAAR DE LIJST IS EEN MARKERING, GEEN TWEEDE KOP. Hij moet groter
   zijn dan de koppen in de lijst eronder en duidelijk kleiner dan de uitspraak
   erboven; op 46px naast een uitspraak van 72px stonden er twee koppen boven
   elkaar.

   DE KORAAL ACCENTLIJN DOET HIER HET WERK dat de kleur eerst in de letter deed.
   Op een lichte band verschijnt de merkkleur alleen als VULLING - de knop, de
   stip van `.stap::after`, het vinkje van `.prijs li::before`, de lijn boven de
   vier cijfers verderop - en nooit als grote tekst. Zet hier dus geen
   `--teal-tx` of `--coral-tx` terug op de letter.

   DRIE PIXELS EN NIET EEN, om dezelfde reden als bij de cijfers: op een
   haarlijn is #FF536C op #F0EFF0 niet als koraal te herkennen. En een VASTE
   breedte van 56px, niet de volle kolom: dit is een markering boven een kop,
   geen scheiding over de pagina - daar zorgt de haarlijn van de lijst al voor,
   een regel lager. */
.lijst-kop {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08;
  color: rgb(var(--inkt));
  margin-bottom: var(--r4); padding-top: var(--r3);
  position: relative;
}
.lijst-kop::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 56px; height: 3px; background: var(--coral);
}
.belofte-lijst.ladder .belofte-kop { font-size: clamp(21px, 2.1vw, 30px); }
          de subregel   19px    16px   grijs    .belofte-sub

   DE HIERARCHIE LOOPT OP INKT EN MAAT, NIET OP KLEURTOON, en dat is een
   correctie op ronde 5. Daar stond de pijn in `--coral-tx` en de omslag in
   `--teal-tx`. Allebei die tokens zijn CONTRASTvarianten die alleen op een
   LICHTE grond gelden: `--coral-tx` is #BB1137 (wijnrood) en `--teal-tx` is
   #0C6872 (petrol). Op een donkere band draaien ze om naar de echte #FF536C en
   #9FD6DB (zie `.product`, `.bewijs`, `.stappen-band` in stijl.css), maar op
   licht blijven het die twee donkere tinten - en een kop van 72px in wijnrood
   leest niet als madvance.

   ZO DOET DE REST VAN DE SITE HET OOK. De homepage zet daar "Elke week weet je
   wat je doet." in navy met "Met de reden erbij." in grijs eronder: EEN kleur,
   TWEE inkten. De merkkleur verschijnt op een lichte band alleen als VULLING -
   de knop, de stip van `.stap::after`, het vinkje van `.prijs li::before` - en
   nooit als grote tekst. Zet hier dus geen `--coral-tx` of `--teal-tx` terug op
   een kop; de kleur van deze pagina komt uit de donkere banden.

   DE LADDER MOET OP BEIDE BREEDTES ECHT ZIJN, en dat is hier de valkuil. Met
   de eerste maten (46 en 38) stond er op 390 `clamp(28px, 3vw, 46px)` naast
   `clamp(26px, 2.6vw, 38px)`: twee pixels verschil, dus op een telefoon droeg
   alleen de kleur de volgorde nog. Gemeten, niet geschat; `clamp` zakt op een
   smal scherm naar zijn vloer en daar vallen twee niveaus samen die op een
   breed scherm acht pixels uit elkaar liggen. Reken bij een nieuwe maat dus
   altijd de VLOEREN tegen elkaar na, niet de plafonds.

   `.uitspraak` vervangt het `.verhaal-grid` dat hier stond. Dat raster zet een
   label in een kolom van 200px met de tekst ernaast; nu dat label weg is, valt
   er niets in te zetten en begint de uitspraak op dezelfde linkerrail als de
   kop en de nummers eronder. */
.uitspraak { max-width: 980px; margin-bottom: var(--r6); }
.uitspraak h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -.02em;
  color: rgb(var(--inkt));
}
/* DE NAREGEL HOORT BIJ DE PIJN MAAR OVERSTEMT HEM NIET. Op dezelfde maat als
   de kop erboven (zo stond het) lezen het twee losse uitspraken in plaats van
   een gedachte met zijn staart. Grijs en kleiner, met een eigen leesmaat. */
.uitspraak p {
  margin-top: var(--r3);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.1vw, 30px); line-height: 1.22;
  color: var(--tekst-3); max-width: 34ch;
}

/* DE OMSLAG NAAR DE LIJST. Hij moet GROTER zijn dan de koppen in de lijst
   eronder en kleiner dan de uitspraak erboven, anders staat niveau 2 onder
   niveau 3. Teal zet hem bovendien aan de kant van de oplossing, net als de
   cijfers verderop. */
.lijst-kop {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08;
  color: rgb(var(--inkt));
  margin-bottom: var(--r4);
}

/* DE VIER ONDERDELEN ZIJN EEN LIJST, GEEN VIER SECTIEKOPPEN. Ze stonden op de
   gedeelde maat van 38px, groter dan de kop die ze aankondigde; dat is precies
   waardoor dit blok als "aan de drukke kant" werd gemeld. Nu 32px.

   `.ladder` IS GEEN FRANJE: `.belofte-kop` staat in de GEDEELDE stylesheet en
   wordt ook gebruikt door /, /coach en /over-ons. Zonder die klasse neemt een
   maatwijziging hier drie andere pagina's mee, en dat zou je op /start niet
   zien. */
.belofte-lijst.ladder .belofte-kop { font-size: clamp(23px, 2.2vw, 32px); }

/* DE CIJFERS DRAGEN DE MERKKLEUR, en dat is de correctie op "doordat alles
   zwart is het best eentonig". Deze band was navy op grijs, vier lagen diep,
   met alleen de twee links in teal.

   DE KLEUR ZIT IN DE LIJN, NIET IN HET GETAL, en dat is de correctie op ronde
   5. Daar stonden deze vier getallen in `--teal-tx` (#0C6872, petrol) met als
   toelichting dat koraal en teal "als VULLING mogen, niet als letter" - en
   vervolgens werden ze als letter gebruikt, via de donkere contrastvariant.
   Dat is precies hoe een pagina off-brand raakt: de token heet nog teal, de
   kleur op het scherm is petrol.

   Nu draagt de ACCENTLIJN boven elk getal de echte koraal (#FF536C) en staat
   het getal zelf in navy. Dat is het device dat in dit project als
   ontwerpprincipe staat opgeschreven ("dunne accentlijnen boven kaarten, geen
   dikke borders"), het is een VLAK dus de contrasteis voor tekst geldt er niet,
   en het is de volle merkkleur in plaats van een afgeleide.

   DRIE PIXELS EN NIET EEN. Op een haarlijn van 1px is #FF536C op #F0EFF0 niet
   als koraal te herkennen; het leest als een iets warmere grijze lijn. Vanaf 3
   staat de kleur er, en vier korte strepen boven vier getallen zijn samen nog
   altijd minder inkt dan vier gekleurde getallen van 62px.

   ALLEEN DE LIJN, niet het bijschrift eronder. Dat staat op 15px en zou met een
   kleur erbij een vierde tekstlaag worden in plaats van een rustiger beeld.

   Gescoped op de grond-band: in een donkere hero staat dezelfde strip, en daar
   is de haarlijn wit-op-donker en hoort dit niet te gelden. */
.band-grond .cijfer { border-top: 3px solid var(--coral); padding-top: calc(var(--r3) - 2px); }

/* LUCHT TUSSEN DE CIJFERSTRIP EN DE BLOKKEN ERONDER. Allebei beginnen ze met
   een streep over de kolombreedte, maar de cijfers staan in VIER kolommen en
   de blokken in TWEE. Vlak onder elkaar leest de bovenlijn van het eerste blok
   daardoor als een tweede, halve lijn van de cijferstrip: hij loopt onder
   "vragen over jouw bedrijf" en "secties in je plan" door en houdt dan op. */
.cijfers + .punten { margin-top: var(--sec); }

/* ── DE CTA-RIJ IN DE PAGINA ──────────────────────────────────────────────
   Twee van deze staan er tussen de hero en de afsluiter. De reden staat in de
   markup; hier alleen de vorm.

   DE KNOP STAAT LINKS, OP DE KOLOMRAIL, en niet gecentreerd. Alles op deze
   pagina begint op die rail: de koppen, de nummers, de cijfers, de rijen van
   de tijdlijn. Een gecentreerde knop halverwege de pagina leest als een losse
   banner die er tussen is geschoven; op de rail leest hij als de volgende
   regel van het stuk dat je net gelezen hebt. De afsluiter (`.slot`) centreert
   wel, en dat mag: dat is een eigen band met een eigen kop.

   DE REDEN STAAT ERNAAST EN NIET ERONDER, op een scherm dat er ruimte voor
   heeft. Eronder wordt het een derde blok tekst in een pagina die er al veel
   heeft; ernaast leest het als het bijschrift bij de knop. Onder 720px zakt
   hij alsnog, want dan is er geen kolom meer naast.

   `align-items: center` EN NIET `baseline`: de notitie is twee regels en de
   knop een, dus op de basislijn zou de knop aan de eerste regel hangen en
   scheef staan ten opzichte van het blok. */
.cta-rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3) var(--r4);
  /* `--r6` (96) en niet `--sec` (120): die laatste is de afstand TUSSEN twee
     secties, en de rij hoort nog bij de sectie erboven. Met 120 plus de
     padding van de band eronder stond er ruim 260px lucht boven de knop en
     las hij als een losse banner tussen twee banden in. */
  margin-top: var(--r6);
  padding-top: var(--r4); border-top: 1px solid var(--haarlijn);
}
.cta-note { margin: 0; max-width: 42ch; font-size: 15px; color: var(--tekst-3); }
@media (max-width: 720px) {
  .cta-rij { display: block; }
  .cta-note { margin-top: var(--r3); }
}

/* ── EEN KOP MET ZIJN LEAD ERONDER ────────────────────────────────────────
   `.sec-kop` hieronder zet de lead RECHTS van de kop. Dat werkt bij een korte
   lead naast een korte kop, en het is op de homepage ook zo bedoeld: één keer,
   als accent.

   STAPEL JE DRIE VAN DIE SECTIES ACHTER ELKAAR, dan werkt het niet meer. Je
   oog landt op de grote kop links, moet naar rechts voor de lead, en daarna
   terug naar links-onder voor de inhoud. Drie keer dezelfde sprong leest als
   een sjabloon en je weet niet meer waar je moet beginnen; zo is het ook
   gemeld op /start (21 oktober 2026).

   Hier loopt alles in één kolom naar beneden, op leesmaat. Gebruik dit zodra
   een sectie een lead van meer dan één regel heeft, en houd `.sec-kop` voor
   het geval waar de lead echt kort is. */
.kop-blok { max-width: 760px; margin-bottom: var(--r5); }
.kop-blok .lead { margin-top: var(--r3); color: var(--tekst-2); }

.sec-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r6); margin-bottom: var(--r5); flex-wrap: wrap; }
.sec-kop .lead { margin-top: 0; max-width: 34ch; padding-bottom: 6px; color: var(--tekst-2); }
.sec-kop h2 { max-width: 15ch; }

/* ── DE PRIJS ALS BAND ────────────────────────────────────────────────────
   Op /plan is er één product, en dan is een kaart naast een lege plek vreemd.
   Het bedrag staat links op de maat van een kop, de lijst rechts. */
.prijs-groot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r6); align-items: center; }
.pg-bedrag {
  margin-top: var(--r4);
  font-family: var(--serif); font-size: clamp(64px, 7vw, 96px); font-weight: 600; line-height: .92;
  display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums;
}
.pg-bedrag .euro { font-size: .42em; font-weight: 500; align-self: flex-start; padding-top: .09em; }
/* "/maand" achter het bedrag (10 november 2026: het plan zit bij de coach, dus de
   prijs is per maand). Zelfde maat als `.prijs-bedrag .per` in stijl.css, met de
   kleur van de regel eronder zodat hij op elke band leesbaar is. */
.pg-bedrag .per { font-family: var(--sans); font-size: .21em; font-weight: 500; color: var(--tekst-2); margin-left: 6px; letter-spacing: 0; }
.pg-per { margin-top: var(--r2); color: var(--tekst-2); }
.pg-per s { color: var(--tekst-3); }
.pg-meta { margin-top: 4px; font-size: 15px; color: var(--tekst-3); }
/* HET VINKJE IS EEN MASKER EN GEEN ACHTERGROND. De data-URL in `--vink` is
   een ZWARTE vorm; als achtergrondbeeld blijft hij zwart en is hij op een navy
   band onzichtbaar. Als masker neemt hij de kleur van het element over, en dat
   is dezelfde oplossing die `.prijs li::before` op de homepage al gebruikt. */
.pg-lijst { list-style: none; display: grid; gap: 0; }
.pg-lijst li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--haarlijn);
  color: var(--tekst-2);
}
.pg-lijst li::before {
  content: ''; flex-shrink: 0;
  width: 15px; height: 15px;
  background: var(--coral-tx);
  -webkit-mask: var(--vink) center / contain no-repeat;
          mask: var(--vink) center / contain no-repeat;
}
.pg-lijst li:first-child { border-top: 1px solid var(--haarlijn); }

/* ── DE GETEKENDE VISUALS OP /hoe-het-werkt ───────────────────────────────
   HIER STONDEN DRIE UITSNEDES UIT HET PLATFORM (`od-vraag`, `od-week`,
   `od-chat`) en die zijn eruit. Gemeld: de beelden zijn niet mooi, het mogen
   getekende visuals zijn. Terecht ook, en niet alleen op smaak:

   EEN SCHERMAFDRUK TOONT HOE HET ERUITZIET, EEN TEKENING TOONT HOE HET WERKT.
   Dit is de enige pagina die het MECHANISME uitlegt; wat het product er in
   het echt uitziet staat op /plan (de gelaagde compositie), op de homepage
   (de laptops) en in de rondleiding, waar je het zelf ziet draaien. Drie
   donkere uitsnedes die daar niets aan toevoegen maakten deze pagina een
   vierde kopie van dezelfde beeldtaal.

   DIT IS GEEN NIEUWE BEELDTAAL MAAR EEN BESTAANDE. `.blad` (de dertien
   secties bij stap 02) en `.gesprek` (op /coach) zijn allebei al met de hand
   gezet in de eigen typografie, en allebei om deze reden. De twee hieronder
   maken het af, zodat alle vier de stappen dezelfde taal spreken.

   WAT ZE NIET MOGEN ZIJN: een nagebouwde schermafdruk. Ze zijn gezet in de
   EIGEN letter en de eigen maatvoering, niet in het chroom van het platform.
   Wie een tekening op een screenshot laat lijken, krijgt een screenshot die
   bij de eerste UI-wijziging stil liegt - precies waarom de rondleiding geen
   schermafbeeldingen gebruikt.

   TWEE VAN DE VIER ZIJN DONKER, EN DAT IS EEN CORRECTIE. Ze waren alle vier
   wit, en zo gemeld: "ik vind de visuals nu heel wit waardoor het nog niet af
   voelt". Terecht - vier witte kaarten onder elkaar op een witte band is geen
   reeks maar een stapel, en zonder figuur-grondverschil leest een kaart als
   een wireframe in plaats van als een ontwerp.

   DE VERDELING VOLGT WAT DE KAART VOORSTELT en is niet om en om verzonnen:
   stap 01 en 03 zijn een SCHERM uit het platform (dat is daar donker), stap
   02 is een gedrukt blad en stap 04 een gesprek dat je LEEST. Daarmee komt
   het toevallig ook op donker-licht-donker-licht uit, en dat is precies het
   ritme dat de reeks nodig had.

   WAT ERIN STAAT IS ECHT. De vraag komt uit `QUESTIONS` (`q_uitdaging`, blok
   1), de categorieën uit `COACH_CATEGORIES` in `_shared/coach-actions.ts`, en
   de weekvorm uit sectie 10 van het plan. Verzin hier dus geen categorie bij:
   er zijn er acht en ze liggen vast. */

/* Een kaart met twee lege kaarten erachter. Die twee zeggen wat één kaart
   niet kan: hier komen er nog 85. Ze dragen geen tekst en staan op
   `aria-hidden`, want er valt niets voor te lezen.

   ZE STEKEN AAN DE BOVENKANT UIT EN NIET AAN DE ONDERKANT. Achter de kaart
   gelegd zijn ze onzichtbaar (dat was de eerste stand: twee divs die niets
   deden), en onderuit stekend lezen ze als een schaduw. Boven en smaller is
   de vorm van een stapel.

   ZE ZIJN LICHTER DAN DE VOORSTE KAART, niet donkerder. Op de donkere
   stapel leest een lichtere rand als "verder weg" en zijn het meteen
   zichtbaar twee kaarten; in dezelfde navy liggen ze er visueel naast. */
.kaart-stapel { position: relative; padding-top: 34px; }
.ks-achter {
  position: absolute; left: 48px; right: 48px; top: 0; height: 90px;
  background: #2C3C4B; border-radius: var(--rond);
  box-shadow: 0 10px 22px rgba(26, 37, 48, .14);
}
.ks-achter.twee { left: 24px; right: 24px; top: 17px; background: #23313F; }

.intake-kaart, .week-kaart {
  position: relative;
  /* De tokens worden hier OMGEZET naar wit-op-donker, net zoals `.band-donker`
     dat doet. Zo hoeft geen enkele regel hieronder een eigen kleur te weten.
     Gemeten op navy: wit 15,9:1, wit op 72% 9,6:1, wit op 58% 6,2:1 en koraal
     4,8:1 - alle vier boven de 4,5 die voor tekst geldt. */
  --tekst-2: rgba(255, 255, 255, .72);
  --tekst-3: rgba(255, 255, 255, .58);
  --haarlijn: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  background: var(--navy); border-radius: var(--rond); box-shadow: var(--schaduw-l);
  padding: var(--r4) var(--r5);
}
/* OP EEN DONKERE KAART IS HET LABEL VOL KORAAL EN NIET `--coral-tx`. Die
   laatste (#BB1137) is gekozen voor LICHTE grond en haalt op navy maar
   2,1:1 - onleesbaar. Dit is dezelfde val als in het lichte thema van het
   platform, alleen andersom. */
.intake-kaart .ik-blok, .week-kaart .wk-label { color: var(--coral); }

.ik-kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.ik-blok { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-tx); }
.ik-teller { font-size: 13px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
/* GEEN <h3>. Dit is de vraag die in de GETEKENDE intakekaart staat, dus een
   regel binnen een illustratie en geen kop in de inhoudsopgave van deze
   pagina. Als kop telde hij mee in `koppen.mjs` en stond hij daar terecht op
   negen woorden TE LANG - terwijl hij juist woordelijk moet kloppen met de
   echte vraag uit de intake. */
.ik-vraag { margin: var(--r3) 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(25px, 2.3vw, 33px); line-height: 1.12; }
.ik-hulp { margin-top: var(--r2); font-size: 16px; color: var(--tekst-3); }

.ik-top { list-style: none; margin-top: var(--r4); display: grid; gap: 10px; }
.ik-top li { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 12px; font-size: 17px; font-weight: 500; }
.ik-top li span {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ik-top .gekozen { background: var(--coral); color: var(--navy); }
/* HET BOLLETJE IS VOL NAVY EN NIET EEN TINT VAN DE KORAAL RIJ. Op 22% navy
   over koraal haalt het cijfer 3,49:1 bij 13px, en de norm is 4,5; vol navy
   met een witte letter haalt 15,9. `meet.mjs` ving dit. */
.ik-top .gekozen span { background: var(--navy); color: #FFFFFF; }
/* De derde rij is LEEG en gestippeld, want de top 3 is half ingevuld: vol
   leest als een afgerond antwoord in plaats van als een vraag die nu gesteld
   wordt. Zelfde keuze als in de fixture van de rondleiding. */
.ik-top .leeg { border: 1.5px dashed rgba(255, 255, 255, .28); color: var(--tekst-3); font-weight: 400; }
.ik-top .leeg span { border: 1.5px solid rgba(255, 255, 255, .24); color: var(--tekst-3); }

.ik-opties { margin-top: var(--r4); padding-top: var(--r3); border-top: 1px solid var(--haarlijn); display: flex; flex-wrap: wrap; gap: 8px; }
.ik-opties b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); width: 100%; margin-bottom: 4px; }
.ik-opties span { font-size: 15px; padding: 8px 15px; border-radius: 100px; border: 1px solid var(--haarlijn); background: rgba(255, 255, 255, .05); color: var(--tekst-2); }

.wk-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--r5); flex-wrap: wrap; padding-bottom: var(--r3); border-bottom: 1px solid var(--haarlijn); }
.wk-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-tx); }
.wk-kop h3 { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2vw, 29px); line-height: 1.1; }
.wk-staat { text-align: right; font-size: 13px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.wk-balk { margin-top: 8px; width: 150px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.wk-balk i { display: block; height: 100%; width: 33%; background: var(--coral); border-radius: 3px; }

.wk-lijst { list-style: none; display: grid; }
.wk-lijst li { display: grid; grid-template-columns: 22px 92px 1fr; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 17px; }
.wk-lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
/* HET VINKJE IS EEN VORM EN GEEN LETTER. Een tekstteken verschilt per
   besturingssysteem en wordt bij het kopiëren meegenomen; dit is twee randen
   van een vierkant, gedraaid. */
.wk-vink { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .3); position: relative; }
.wk-lijst .af .wk-vink { background: var(--coral); border-color: var(--coral); }
.wk-lijst .af .wk-vink::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.wk-lijst .af { color: var(--tekst-3); }
.wk-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }

@media (max-width: 760px) {
  .intake-kaart, .week-kaart { padding: var(--r4) var(--r3); }
  .ks-achter { left: 28px; right: 28px; }
  .ks-achter.twee { left: 14px; right: 14px; }
  .ik-top li { font-size: 15px; padding: 11px 14px; gap: 11px; }
  .ik-vraag { font-size: 23px; }
  .ik-opties span { font-size: 13px; padding: 6px 12px; }
  /* DE TAAKTEKST STAAT IN EEN EIGEN SPAN, en dat is geen netheid. Een KALE
     tekstknoop in een grid wordt een anonieme cel die je met CSS niet kunt
     aanwijzen: hij plaatste zichzelf op de volgende rij in kolom 1, dus de
     taak werd in een kolom van 22 pixels gewrongen. Gemeten liep de kaart
     daardoor op 390 naar 1680 pixels, bijna drie keer zijn eigen inhoud, en
     op het oog leek het gewoon een lange kaart. */
  .wk-lijst li { grid-template-columns: 22px 1fr; gap: 6px 12px; font-size: 15px; }
  .wk-cat, .wk-t { grid-column: 2; }
  .wk-balk { width: 110px; }
}

/* ── HET TYPOGRAFISCHE BLAD ───────────────────────────────────────────────
   Stap 02 op /hoe-het-werkt heeft geen schermafdruk, want daar wordt
   geschreven en is niets te zien. In plaats daarvan staan de dertien
   sectienamen er als blad: dezelfde beeldtaal als het gedrukte plan, en de
   enige plek op de site waar de inhoudsopgave helemaal te lezen is. */
.blad {
  background: var(--wit); border-radius: var(--rond); box-shadow: var(--schaduw-m);
  padding: var(--r4) var(--r5);
}
.blad ol { list-style: none; display: grid; }
/* TWEE KOLOMMEN OP /hoe-het-werkt, en per KOLOM gevuld (7 links, 6 rechts) in
   plaats van per rij: een inhoudsopgave lees je van boven naar beneden. Dat
   vraagt wel dat de onderste van BEIDE kolommen zijn streep kwijtraakt, niet
   alleen de dertiende. */
.blad.twee { max-width: 880px; }
.blad.twee ol { grid-auto-flow: column; grid-template-rows: repeat(7, auto); column-gap: var(--r5); }
.blad.twee li:nth-child(7) { border-bottom: 0; }
@media (max-width: 700px) {
  .blad.twee ol { grid-auto-flow: row; grid-template-rows: none; }
  .blad.twee li:nth-child(7) { border-bottom: 1px solid rgba(26,37,48,.1); }
}
.blad li {
  display: flex; gap: var(--r3); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid rgba(26,37,48,.1);
  font-family: var(--serif); font-weight: 600; font-size: 21px; color: rgb(var(--inkt));
}
.blad li:last-child { border-bottom: 0; }
.blad span { font-size: 15px; color: var(--tekst-3); min-width: 26px; font-variant-numeric: tabular-nums; }

/* Een groot getal boven een punt. Op 52% inkt haalt hij 3,21:1 en dat is de
   ondergrens voor tekst vanaf 24 pixels; lichter mag niet, ook al is het maar
   een cijfer - je gebruikt het om te scannen. */
.punt-n { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1; color: var(--tekst-4); margin-bottom: var(--r2); }

/* `.duo` STAAT IN `stijl.css`, want de homepage gebruikt hem ook en die laadt
   dit bestand niet.

   DE VARIANT `.duo.noten` IS HIER WEG. Die gaf de twee alinea's op
   /hoe-het-werkt een streep en een label, zodat ze als twee noten lazen in
   plaats van als een restje tussen twee donkere banden. Dat blok is bij de
   verbouwing van die pagina vervallen, dus de regels raakten niets meer. Komt
   zo'n paar kale alinea's ergens terug, dan is dit wat het was:
   `border-top: 2px solid rgb(var(--inkt))` plus `padding-top` op de kinderen,
   en een `margin-bottom` onder het label. */

/* De inloglink in de balk staat sinds ronde 44 in `stijl.css`, bij de rest van
   de navigatie. Hij stond HIER, en de homepage laadt dit bestand niet: daar was
   het dus een kale blauwe browserlink over de hero. Zet hem niet terug. */
.login-kaart h1 em, .login-kaart .label { display: inline; }
.login-kaart .label { display: block; }

@media (max-width: 900px) {
  .prijs-groot { grid-template-columns: 1fr; gap: var(--r5); }
  .sec-kop { display: block; }
  .sec-kop .lead { margin-top: var(--r3); max-width: none; }
  .sec-kop h2 { max-width: none; }
  .blad { padding: var(--r3) var(--r4); }
  .blad li { font-size: 18px; }
}

/* ── EEN LINK IN LOPENDE TEKST ────────────────────────────────────────────
   `stijl.css` kent `.link` (de pijl-link onder een blok) en `.knop`, en verder
   niets: op de homepage staat geen enkele link IN een alinea. Op de
   subpagina's wel, en die stonden dus in het blauw van de browser - op een
   juridische pagina tientallen keren. Teal met een onderlijn, dezelfde kleur
   als `.link`.

   DE UITZONDERING STAAT IN DE SELECTOR, niet in een extra klasse: de links in
   de navigatie en de voet staan buiten deze blokken, dus die worden niet
   geraakt zonder dat er iets uitgezonderd hoeft te worden. */
:is(.ph, .band-wit, .band-grond, .band-donker, .bewijs, .slot, .login-kaart)
  :is(p, li, dd, dt) a:not(.link):not(.knop) {
  color: var(--teal-tx);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(12, 104, 114, .35);
}
:is(.ph, .band-wit, .band-grond, .band-donker, .bewijs, .slot, .login-kaart)
  :is(p, li, dd, dt) a:not(.link):not(.knop):hover { text-decoration-color: currentColor; }
.band-donker :is(p, li, dd) a, .bewijs :is(p, li, dd) a, .slot :is(p, li) a { text-decoration-color: rgba(159, 214, 219, .4); }

/* ── DE TABELLEN IN DE JURIDISCHE TEKST ───────────────────────────────────
   Zes tabellen met samen 157 cellen: welke cookie, van wie, waarvoor en hoe
   lang. Zonder opmaak zijn dat kale rijen tekst die tegen elkaar aan plakken.

   OP EEN TELEFOON WORDT DE TABEL ZIJN EIGEN SCHUIFVLAK. Dat is dezelfde
   ingreep als op de live site: `body` staat op `overflow-x: clip`, dus een te
   brede tabel wordt daar stil WEGGEKNIPT in plaats van scrollbaar - en dan
   mist de bezoeker de laatste kolom zonder dat iets dat verraadt. */
.doc-tekst table { width: 100%; border-collapse: collapse; margin-top: var(--r3); font-size: 15px; }
.doc-tekst th {
  text-align: left; padding: 10px 14px 10px 0;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3);
  border-bottom: 1px solid var(--haarlijn); vertical-align: bottom;
}
.doc-tekst td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--haarlijn); color: var(--tekst-2); vertical-align: top; line-height: 1.55; }
.doc-tekst tr:last-child td { border-bottom: 0; }
.doc-tekst strong { color: rgb(var(--inkt)); font-weight: 600; }
.doc-tekst li { line-height: 1.65; }
/* De knop die de cookiemelding opnieuw opent. Hij doet hier niets (dit is een
   ontwerp om naar te kijken), maar ongestyled staat er een systeemknop midden
   in een juridisch document. */
.legal-pref-btn {
  margin-top: var(--r3);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 100px; cursor: pointer;
  background: transparent; color: rgb(var(--inkt));
  border: 1px solid rgba(26,37,48,.25);
}
.legal-pref-btn:hover { background: rgba(26,37,48,.05); }

@media (max-width: 760px) {
  .doc-tekst table { display: block; overflow-x: auto; white-space: nowrap; }
  .doc-tekst td, .doc-tekst th { white-space: normal; min-width: 150px; }
}

/* ── DE SECTIELIJST LEEST NAAR BENEDEN, NIET NAAR OPZIJ ───────────────────
   Een raster vult standaard per RIJ, dus de dertien secties stonden als
   01 | 02 / 03 | 04 naast elkaar. Een inhoudsopgave lees je per kolom: eerst
   01 tot 08 links, dan de rest rechts. `grid-auto-flow: column` met een vast
   aantal rijen doet dat; het aantal rijen is het aantal items gedeeld door
   twee, naar boven afgerond. */
.secties { grid-auto-flow: column; grid-template-rows: repeat(8, auto); }
@media (max-width: 900px) { .secties { grid-auto-flow: row; grid-template-rows: none; } }

/* ── DE KOP VAN EEN SUBPAGINA IS KLEINER DAN DIE VAN DE HOMEPAGE ──────────
   Dat is hiërarchie: de slogan op de homepage is het grootste wat de site
   heeft. En het is een maatvoeringseis: in de hero van /coach staat de kop in
   een kolom van ~560 pixels naast het gesprek, en op 72 pixels brak "Een
   marketeer in je broekzak" daar over VIER regels. */
.ph h1 { font-size: clamp(38px, 4.6vw, 64px); }

/* De afsluiter binnen een bestaande donkere band (zie resultaten.html). Een
   haarlijn in plaats van een nieuwe band: twee donkere banden tegen elkaar
   lezen als een blok. */
.bewijs-slot { margin-top: var(--sec); padding-top: var(--r6); border-top: 1px solid var(--haarlijn); text-align: center; }
.bewijs-slot h2 { max-width: 700px; margin: 0 auto; }
.bewijs-slot .slot-acties { margin-top: var(--r4); display: flex; align-items: center; justify-content: center; gap: var(--r3); flex-wrap: wrap; }
.bewijs .knop {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 1px 2px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.3);
}

/* ── EEN SCENE OVER DE VOLLE BREEDTE ──────────────────────────────────────
   DE MAAT VAN HET ONDERDEEL BEPAALT DE VORM VAN DE SCENE, niet andersom. Een
   taakrij uit het platform is 1086 pixels breed; in de beeldkolom van een
   tweeluik (580) staat die op 53%, en dan is lichaamstekst van 15 pixels nog 8
   en dus onleesbaar. Precies de klacht die deze ronde opende.

   Een breed, plat onderdeel krijgt daarom de volle kolom: tekst smal erboven,
   het onderdeel eronder op ware grootte of groter. Dat lost twee dingen
   tegelijk op - het is leesbaar, en vier identieke tweeluiken achter elkaar
   zijn geen vier scenes maar een sjabloon. */
.scene-breed { display: block; }
.scene-breed .scene-tekst { max-width: 52ch; }
.scene-breed figure { margin-top: var(--r5); }
.scene-breed .scene-n { font-size: 56px; }

/* ══════════════════════════════════════════════════════════════════════════
   DE STAPEL OP /aanbod

   Zeven onderdelen onder elkaar, elk met een cijfer. Dit is het enige nieuwe
   onderdeel dat die pagina nodig had; de rest van /aanbod loopt op wat er al
   stond (`.uur`, `.tl`, `.punten`, `.prijs-groot`).

   HET CIJFER IS STIL EN NIET KORAAL, om dezelfde reden die hierboven bij
   `.tl.stapcijfers` staat: koraal is op een landingspagina de kleur van
   HANDELEN. Zeven koraal cijfers die nergens heen leiden halen de aandacht weg
   van de enige koraal knop op het scherm. Grijs serif, zoals de stappenrail.

   SINDS 10 NOVEMBER 2026 NIET MEER IN GEBRUIK op /aanbod: het plan zit bij de
   coach, dus niets loopt nog na veertien dagen af. De regels blijven staan zolang
   een markering ooit weer nodig is. Oorspronkelijke toelichting:
   DE TWEE COACH-ONDERDELEN STAAN APART GEMARKEERD (`.st-uit`), en dat is geen
   opmaak maar eerlijkheid. Onderdeel 5 en 6 lopen na veertien dagen af en de
   andere vijf niet. Zonder dat verschil leest de lijst als zeven dingen die je
   houdt, en dat is er twee te veel. De streep is teal omdat dat in dit project
   de kleur van de AI-coach is; op een witte grond moet dat `--teal-tx` zijn,
   want de volle `--teal` haalt daar het contrast niet.

   `.st-prijs` IS HET ENIGE PRIJSKAARTJE OP DE PAGINA. Het boek wil er een bij
   elk onderdeel, met een optelsom eronder. Dat kan hier alleen bij de coach,
   want dat is het enige onderdeel dat los te koop is (49 euro per maand). Zet
   hier dus geen tweede bij zonder een bedrag dat je kunt onderbouwen; een
   verzonnen waarde is een misleidende mededeling (art. 6:194 BW).
   ══════════════════════════════════════════════════════════════════════════ */
.stapel { display: grid; gap: 0; margin-top: var(--r5); }

/* DRIE KOLOMMEN EN GEEN ZEVEN ALINEA'S ONDER ELKAAR. Eerst stond de kop boven
   de uitleg in een kolom van 58 tekens: zeven blokken van drie regels, samen
   bijna tweeduizend pixels, met de halve bandbreedte leeg ernaast. Gemeld als
   "de opsomming is best lang".

   Met de uitleg NAAST de kop in plaats van eronder is het een inhoudsopgave:
   je leest de zeven koppen verticaal af en pakt de uitleg er alleen bij waar
   je hem nodig hebt. Dat is de vorm die bij "dit zit erin" hoort. Het scheelt
   bovendien de helft van de hoogte en het vult de breedte die er toch al was.

   `minmax(0, …)` OP BEIDE TEKSTKOLOMMEN is nodig: een grid-kolom is standaard
   `auto`, en dan duwt de langste kop (met het prijskaartje erachter) de kolom
   breder dan zijn deel. Zonder die nul loopt de uitleg bij onderdeel 5 in een
   kier van een paar tekens. */
.st-r {
  display: grid; grid-template-columns: 56px minmax(0, .68fr) minmax(0, 1.32fr);
  gap: var(--r4); align-items: start;
  padding: var(--r4) 0; border-top: 1px solid var(--haarlijn);
}
.st-r:last-of-type { border-bottom: 1px solid var(--haarlijn); }

/* Het cijfer is stil en niet koraal, om dezelfde reden die bij
   `.tl.stapcijfers` staat: koraal is de kleur van HANDELEN, en zeven koraal
   cijfers die nergens heen leiden halen de aandacht van de knop. */
.st-n { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--tekst-4); }
.st-k { padding-top: 2px; }
.st-t p { color: var(--tekst-2); font-size: 16.5px; }
.st-t p + p { margin-top: var(--r2); }
.st-sub { font-size: 15px !important; color: var(--tekst-3) !important; }

/* Het prijskaartje staat ONDER de kop en niet erachter: in een smallere
   kolom duwt hij de kop anders naar een tweede regel terwijl er maar twee
   woorden op staan. `.st-prijs` is het ENIGE prijskaartje op de pagina; zet
   er geen tweede bij zonder een bedrag dat je kunt onderbouwen. */
.st-prijs {
  display: inline-block; margin-top: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--teal-tx);
  background: rgba(12, 104, 114, .09);
  border-radius: var(--rond); padding: 4px 10px;
}

/* De twee onderdelen die na veertien dagen aflopen. */
.st-uit { position: relative; }
.st-uit::before {
  content: ""; position: absolute; left: -16px; top: var(--r4); bottom: var(--r4);
  width: 2px; background: var(--teal-tx); opacity: .45; border-radius: 2px;
}

.stapel-noot { margin-top: var(--r4); }

/* Onder 1000px past de uitleg niet meer naast een kop van deze maat: dan weer
   onder elkaar, maar met het cijfer nog wel naast de kop. */
@media (max-width: 1000px) {
  .st-r { grid-template-columns: 48px minmax(0, 1fr); gap: var(--r2) var(--r4); }
  .st-t { grid-column: 2; }
}

/* Op een telefoon kost zelfs een kolom van 48px te veel van de tekst ernaast;
   het cijfer gaat dan boven de kop staan.

   `grid-column: auto` MOET HIER TERUG. De regel hierboven zet `.st-t` op
   kolom 2, en die bestaat in een grid van een kolom niet: dan maakt de browser
   er stil een impliciete tweede kolom bij en staat de uitleg naast de kop op
   een scherm van 390 breed. */
@media (max-width: 640px) {
  .st-r { grid-template-columns: 1fr; gap: var(--r2); padding: var(--r3) 0; }
  .st-t { grid-column: auto; }
  .st-n { font-size: 20px; line-height: 1; }
  .st-k { padding-top: 0; }
  .st-uit::before { left: -12px; }
}

/* ── DE PRIJS STAAT MAAR EEN KEER IN BEELD (/aanbod) ──────────────────────
   Onder 600px verschijnt de vaste balk, en die DRAAGT de prijs. De regel in de
   hero draagt hem ook, en dan staan er twee prijsregels vlak boven elkaar:
   gemeten op 390x664 eindigt de hero-regel op y=562 en begint die van de balk
   op y=577, dus vijftien pixels ertussen. Dezelfde fout die op /plan al een
   keer is rechtgezet.

   DE GRENS IS EXACT DIE VAN `body.lp-cta-aan #lp-cta` hierboven. Verzet je die
   ene, verzet deze mee: anders staat de prijs op een strook breedtes dubbel, of
   juist helemaal nergens, en dat tweede is erger (dan kan iemand starten zonder
   de prijs gezien te hebben).

   GESCOPED OP `.pg-aanbod`, en dat is geen netheid. `wit/start.html` draagt
   dezelfde body-klasse en staat LIVE met precies dit gedrag; een ongescopete
   regel zou die pagina stil meeveranderen. Of dat daar ook moet is een eigen
   besluit en geen bijvangst van deze. */
@media (max-width: 600px) {
  body.pg-aanbod .ph.ph-donker .ph-note { display: none; }
}

/* ── DE UURBALK OP EEN LICHTE GROND (.uur.op-licht) ───────────────────────
   `.uur` hierboven is HELEMAAL voor een donkere band geschreven: het linkerdeel
   is 9% wit, de labels zijn 66% wit, de tijden zijn `#FFFFFF` en de streepjes
   naar de naad zijn 30% wit. Op `--grond` is daarvan precies niets te zien.
   Dat is geen klein verschil: het linkerdeel IS de 45 minuten, dus driekwart
   van de balk viel weg en alleen het koraal blokje van een kwartier bleef over.
   Zo is het ook gemeld.

   DE VERHOUDING IS HET HELE PUNT VAN DIT ONDERDEEL. Een balk waarvan je het
   grootste deel niet ziet, laat precies het omgekeerde zien van wat hij moet
   bewijzen: dat jouw drie kwartier het leeuwendeel is en ons kwartier de rest.

   HET KORAAL DEEL BLIJFT ONGEMOEID. Navy op koraal haalt 4,96:1 en dat geldt
   op elke ondergrond; alleen de omringende inkt draait om. Zelfde redenering
   als het lichte thema in het platform: één set tokens, de inkt keert om, de
   merkkleur niet.

   EEN MODIFIER EN GEEN TWEEDE COMPONENT, zodat de maatvoering (de 3fr/1fr die
   de naad op 75% zet, de 128px hoogte, het mobiele blok eronder) op één plek
   blijft staan. Twee kopieën van deze balk lopen uiteen op de dag dat de
   verhouding wijzigt, en dan klopt hij op één van de twee pagina's niet meer. */
.uur.op-licht .uur-jij {
  background: rgba(var(--inkt), .06); color: rgb(var(--inkt));
  box-shadow: inset 0 0 0 1px rgba(var(--inkt), .14);
}
.uur.op-licht .uur-jij span { color: var(--tekst-3); }
.uur.op-licht .uur-as { color: var(--tekst-3); }
.uur.op-licht .uur-mrk b { color: rgb(var(--inkt)); }
.uur.op-licht .uur-mrk::before { background: rgba(var(--inkt), .28); }

/* ── TWEE TELEFOONS IN DE HERO (/start en /aanbod, 10 november 2026) ─────────
   Vervangt de boekcover: het product is je week en je coach. De coach ligt
   achter, iets hoger en gekanteld; je week ligt voor, want dat is wat je
   maandag opent. De gloed erachter is teal (de kleur van de coach) en zit
   laag, zodat hij onder de telefoons lijkt te liggen en niet als vlak leest.
   De hoogte komt uit de breedte (aspect-ratio), dus er hoeft per breekpunt
   niets nagemeten te worden. */
.hero-tel {
  position: relative; width: 100%; max-width: 540px; justify-self: center;
  aspect-ratio: 1 / 1.08; margin: 0;
}
.hero-tel::before {
  content: ''; position: absolute; inset: 18% 4% 0 4%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 55%, rgba(159,214,219,.22), rgba(159,214,219,0) 70%);
  pointer-events: none;
}
.hero-tel img {
  position: absolute; z-index: 1; display: block; height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
}
.hero-tel .ht-achter { width: 49%; right: 5%; top: 0; transform: rotate(5deg); opacity: .9; }
.hero-tel .ht-voor   { width: 55%; left: 8%; bottom: 0; z-index: 2; transform: rotate(-3deg); }
/* Het zwevende kaartje geeft diepte en zegt in één regel wat de telefoon
   eronder toont (dezelfde 3 van 10 als op het scherm, demodata). Een vaste,
   dekkende grond en geen backdrop-filter: zie het PERF-blok in stijl.css. */
.ht-chip {
  position: absolute; z-index: 3; left: 0; bottom: 16%;
  display: grid; gap: 6px; min-width: 190px; padding: 14px 16px;
  background: #22303D; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.4); transform: rotate(-3deg);
}
.ht-chip-l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ht-chip b { font-family: var(--serif); font-weight: 600; font-size: 20px; color: #fff; }
.ht-balk { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.ht-balk i { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--teal); }
@media (max-width: 760px) {
  .hero-tel { max-width: 420px; }
  .ht-chip { min-width: 0; padding: 10px 12px; bottom: 12%; }
  .ht-chip b { font-size: 16px; }
}