/* ═══════════════════════════════════════════════════════════════════════════
   madvance — een NIEUWE homepage, niet de bestaande in een andere kleur.

   WAAROM DIT EEN EIGEN BESTAND IS EN GEEN LAAG. Acht rondes lang is er een
   CSS-laag over het werkbestand gelegd (zie ../LEESMIJ.md). Daarmee is kleur,
   ruimte en kader te veranderen, maar de STRUCTUUR niet: in het werkbestand
   heeft elke sectie dezelfde opbouw — een label, een kop, en daaronder een
   raster van drie of vier gelijke blokken, zeven keer achter elkaar. Dat is
   wat als sjabloon leest, en het is markup. Hier is de markup vrij.

   DE MEETLAT IS milkshakemarketing.nl, de site van het moederbedrijf. Daar
   wisselt de vorm per sectie, zit 26% van de pagina in beeld en maar 20% in
   een omkaderd vlak (tegen 0% en 48% in de laag hiervoor).

   DE INHOUD IS NIET VERZONNEN. Elke zin komt letterlijk van de bestaande
   homepage; wat op een publieke pagina staat telt mee als mededeling van het
   bedrijf (art. 6:194 BW), dus er is hier geen claim bij gekomen en geen
   resultaat of termijn beloofd.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('/lettertypen/barlow.css');

:root {
  /* De huisstijl, ongewijzigd. */
  --navy: #1A2530;
  --dark: #2F4050;
  --coral: #FF536C;
  --crimson: #F2135E;
  --teal: #9FD6DB;
  --cyan: #C2F8FF;
  --offwhite: #F0EFF0;

  /* Koraal als LETTER op een lichte grond haalt 3,1:1 en is dus te licht voor
     tekst; als VULLING blijft hij onaangeraakt. Dit is de donkerder
     tegenhanger, dezelfde afweging als in de laag hiernaast. */
  --coral-tx: #BB1137;
  --teal-tx: #0C6872;

  --grond: #F0EFF0;   /* de pagina: --offwhite, de kleur van het moederbedrijf */
  --wit: #FFFFFF;
  --inkt: 26, 37, 48;

  --serif: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;

  /* ── DE GEDEMPTE TEKSTLAGEN, UITGEREKEND ────────────────────────────────
     DIT IS GEEN SMAAK MAAR EEN ONDERGRENS, en de eerste versie zat er met
     veertien elementen onder. Navy inkt op de grond (#F0EFF0):

       dekking   contrast        dekking   contrast
        0,35      2,08:1          0,62      4,25:1
        0,45      2,66:1          0,64      4,51:1  <- de grens
        0,55      3,48:1          0,70      5,40:1

     Vanaf 0,64 haalt gewone tekst 4,5:1 en vanaf 0,50 haalt grote tekst
     (24px en op) zijn 3:1. Daar zijn deze drie waarden op gezet, met marge.
     GEBRUIK ZE EN SCHRIJF GEEN LOSSE rgba MEER: elke losse waarde is er een
     die niemand narekent. `node dev-test/wit/nieuw/meet.mjs` wijst ze aan. */
  --tekst-2: rgba(26, 37, 48, .72);   /* lopende tekst, gedempt — 5,74:1 */
  --tekst-3: rgba(26, 37, 48, .66);   /* bijschrift, meta — 4,77:1 */
  --tekst-4: rgba(26, 37, 48, .52);   /* alleen vanaf 24px — 3,2:1 */

  /* ── DE KOLOM ─────────────────────────────────────────────────────────
     1240 WAS TE SMAL, EN DAT IS OP EEN BREED SCHERM HET EERSTE WAT JE ZIET.
     De hero-foto en elke gekleurde band lopen van rand tot rand; de INHOUD
     stond op 1240. Op een scherm van 1600 betekende dat 180 pixels leegte
     links en rechts van de navbalk en van de hero-kop, met een foto die er
     wel doorheen liep. Zo is het ook gemeld: "de headermenubalk en de hero
     gebruiken niet de volledige breedte van de site".

     Ter vergelijking, gemeten op de live site: die rendert op `zoom: 1.4`,
     dus de layout is er altijd smal en de inhoud loopt tot 56 pixels van de
     rand. Hier is 1480 met een rand van 64 het dichtstbijzijnde dat nog een
     CAP is: op 1440 loopt de kolom vol (64 aan weerszijden), op 1600 blijft
     er 60 over en op 1920 nog 220.

     EEN GROTERE CAP IS GEPROBEERD EN AFGEVALLEN, en dat is gemeten. Elke
     alinea in een prijskaart draagt zijn eigen leesmaat in `ch`, dus de
     TEKST rekt niet mee met de kaart: op een venster van 1920 houdt hij op
     bij 376 pixels, wat de kaart ook doet. Bij een cap van 1480 is de kaart
     756 breed en draagt hij dus 50% inkt; bij 1800 wordt hij 938 breed en
     zakt dat naar 40%. Wat je aan buitenrand wint, wordt binnen de kaart
     leegte. */
  --kolom: 1480px;
  --rand: 64px;

  /* ── DE RUIMTE IS EEN SCHAAL, GEEN REEKS LOSSE GETALLEN ────────────────
     Hier stonden 22 verschillende waarden (68, 64, 60, 56, 48, 46, 42, 40,
     34, 30, 28, 26, 24, 22, 20, 18, 16, 14, 13, 12, 10, 3), elk los gekozen.
     Dat ziet er op zichzelf nergens fout uit en het is precies waarom een
     pagina "niet helemaal klopt": twee afstanden die hetzelfde zouden moeten
     zeggen verschillen zes pixels, en dat zie je zonder het te kunnen
     aanwijzen.

     Zes treden, elk ongeveer anderhalf keer de vorige. Elke afstand op deze
     pagina is er een van. SCHRIJF HIER GEEN LOS GETAL MEER NEER; staat de
     afstand die je nodig hebt er niet bij, dan is de vraag welke van de twee
     buren hij moet zijn. */
  --r1:  8px;    /* binnen een regel: icoon naast tekst */
  --r2: 16px;    /* tussen twee regels van hetzelfde ding */
  --r3: 24px;    /* tussen twee dingen in een blok */
  --r4: 40px;    /* tussen twee blokken */
  --r5: 64px;    /* van een sectiekop naar zijn inhoud */
  --r6: 96px;    /* tussen twee onderdelen van een sectie */

  /* ── DE AFSTAND TUSSEN TWEE SECTIES IS OVERAL GELIJK ───────────────────
     Elke sectie krijgt --sec boven én onder, dus elke grens meet 2 x --sec.
     Daarvoor liep dat van 150 tot 300 pixels - een factor twee, zonder dat
     er een reden voor te geven was. Eén uitzondering, en die staat als
     klasse in de markup: het verhaal en de beloftes zijn één blok. */
  --sec: 120px;

  --haarlijn: rgba(26, 37, 48, .14);

  /* ÉÉN RONDING VOOR ELK PANEEL. Er stonden er drie (12, 14 en 18 pixels) op
     drie dingen die allemaal "een vlak op de pagina" zijn. Dat verschil is te
     klein om een bedoeling te lezen en te groot om niet te zien. De pillen
     houden hun eigen 100px: die zijn rond, niet afgerond. */
  --rond: 16px;

  /* ── DIEPTE, EN WAAROM DIE ER IS ────────────────────────────────────────
     EEN VLAK NAVY RECHTHOEK MET RONDE HOEKEN IS HET GOEDKOOPSTE DAT EEN
     PAGINA KAN TONEN: het is de standaardkaart van elk framework. Wat het
     verschil maakt is niet meer kleur maar LICHT. Drie dingen samen:

       1. een haarlijn in de inktkleur van het vlak zelf (wit op donker),
          zodat de rand bestaat in plaats van ophoudt;
       2. een verloop van boven naar beneden van hooguit 4%, zodat het vlak
          een lichtrichting heeft;
       3. een schaduw in TWEE lagen - een korte voor het contact met de
          grond, een lange en zachte voor de hoogte. Eén schaduw leest als
          een rand met vervaging; twee lezen als een voorwerp.

     De schaduwkleur is NAVY en geen zwart: zwart op een warme grijze grond
     wordt vuil. Dat is op het scherm te zien en niet in een getal. */
  --lijn-op-donker: rgba(255, 255, 255, .09);
  --licht-op-donker: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  --schaduw-s: 0 1px 2px rgba(26,37,48,.06), 0 6px 16px rgba(26,37,48,.07);
  --schaduw-m: 0 2px 4px rgba(26,37,48,.07), 0 18px 44px rgba(26,37,48,.13);
  --schaduw-l: 0 4px 8px rgba(26,37,48,.08), 0 34px 80px rgba(26,37,48,.19);
  /* OP EEN DONKERE BAND IS EEN NAVY SCHADUW ONZICHTBAAR, want hij heeft de
     kleur van zijn ondergrond. Daar hoort zwart, en dieper: op navy moet een
     schaduw verder uitlopen voordat je hem ziet. */
  --schaduw-donker: 0 2px 6px rgba(0,0,0,.3), 0 24px 56px rgba(0,0,0,.42);

  /* Het vinkje als VORM, niet als letter. Zie `.prijs li::before`. */
  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.6 10.6l4.6 4.6L17.4 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--grond);
  color: rgb(var(--inkt));
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.kolom {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* ── TYPOGRAFIE ────────────────────────────────────────────────────────────
   DE SCHAAL IS REDACTIONEEL, GEEN SJABLOON. Een sjabloon zet elke sectiekop
   op dezelfde 40 pixels; hier loopt hij van 100 (de hero) via 72 (een sectie)
   naar 15 (een label). Dat verschil IS de hiërarchie, en het is het goedkoopste
   middel dat er is: het kost geen kader en geen kleur. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; }

.kop-xl { font-size: clamp(48px, 7.2vw, 104px); }
.kop-l  { font-size: clamp(38px, 5vw, 72px); }
.kop-m  { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.kop-s  { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.16; }

/* De cursief is het typografische accent uit de huisstijl. Hij BLIJFT; wat
   eruit is, is de tweede KLEUR in dezelfde kop — dat recept stond zes keer op
   de oude homepage in dezelfde vorm en was wat hem als AI-tekst liet lezen. */
em { font-style: italic; }

/* ÉÉN KLEIN LABEL, DRIE PLEKKEN. Hier stonden drie bijna gelijke varianten
   (13/600/.18em, 13/700/.12em en 12/700/.16em) voor dezelfde rol: een klein
   kapitaal opschrift boven een blok. Drie keer bijna hetzelfde is wat een
   pagina rommelig maakt zonder dat je kunt aanwijzen waar. */
.label, .voet-kop, .prijs-tag {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: block;
}
.label { color: var(--coral-tx); margin-bottom: var(--r2); }

.lead { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; max-width: 46ch; margin-top: var(--r3); }
.klein { font-size: 15px; color: var(--tekst-3); }

/* ── KNOPPEN ──────────────────────────────────────────────────────────────
   Het label op de koraal knop is NAVY en geen wit: wit haalt op koraal 3,1:1
   en dit label is klein met kapitalen, dus daar geldt 4,5:1. Navy haalt 4,96.
   Dezelfde afweging als bij de cookiebanner en de rondleiding. */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 34px;
  background: var(--coral);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  border: 0; border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  /* De knop ligt OP de pagina in plaats van erin. De bovenste lichtrand is
     een binnenschaduw van 1 pixel; die kost niets en is het verschil tussen
     een gekleurd vlak en een knop die je in wilt drukken. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 1px 2px rgba(26,37,48,.14), 0 8px 20px rgba(242,19,94,.22);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.knop:hover {
  background: var(--crimson); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 2px 4px rgba(26,37,48,.16), 0 14px 30px rgba(242,19,94,.3);
}
.knop:active { transform: translateY(0); }
/* De tweede kaart had een tekstlink waar de eerste een knop had, en dan weegt
   de ene helft van de keuze zwaarder zonder dat dat zo bedoeld is. Deze
   variant heeft hetzelfde gewicht en dezelfde maat, alleen niet de kleur van
   de hoofdactie - precies de verhouding die de cookiebanner ook aanhoudt. */
.knop-rand {
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.knop-rand:hover {
  background: rgba(255,255,255,.08); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.link {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--teal-tx);
  font-weight: 600; font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 104, 114, .3);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.link:hover { border-bottom-color: var(--teal-tx); }
.link.op-donker { color: var(--teal); border-bottom-color: rgba(159, 214, 219, .35); }
.link.op-donker:hover { border-bottom-color: var(--teal); }

/* ── NAVIGATIE ────────────────────────────────────────────────────────────
   Doorzichtig over het beeld, wit zodra je eronder bent. Dat is wat elke site
   met een beeld-hero doet, en het voorkomt een harde witte streep over de foto. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .25s ease, border-color .25s ease, padding .25s ease;
  border-bottom: 1px solid transparent;
  /* 17 EN NIET 22, OMDAT HET LOGO GEGROEID IS. De balkhoogte is de ruimte plus
     het hoogste kind, en dat was de knop (45) en is nu het logo (56). Met de
     oude 22 werd de balk 100 in plaats van 90; dit houdt hem op dezelfde maat
     als voorheen, met een groter merk erin. */
  padding: 17px 0;
}
/* DE BALK LOOPT OVER DE VOLLE BREEDTE, DE INHOUD NIET. Zonder deze wikkel
   staat het logo op 48 pixels van de rand terwijl elke sectie eronder op 148
   begint (de kolom is 1240 breed en gecentreerd). Dat verschil zie je als een
   knik tussen de balk en de pagina, en het is precies het soort detail dat een
   pagina slordig laat lijken zonder dat je kunt aanwijzen waarom. */
.nav-binnen {
  max-width: var(--kolom); margin: 0 auto; padding: 0 var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
nav.vast {
  background: rgba(240, 239, 240, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(var(--inkt), .09);
  padding-top: 14px; padding-bottom: 14px;
}
/* HET LOGOBESTAND IS KORAAL, en op een donkere foto is dat geen merk maar een
   vlek. Het witte woordmerk bestaat alleen als base64 ín het werkbestand, dus
   hier wordt het koraal bestand met een filter wit gemaakt: `brightness(0)`
   maakt alles zwart en `invert(1)` daarna wit. Dat werkt op elke vorm en
   vraagt geen tweede bestand. Zodra de balk vast staat gaat het filter eraf en
   is het merk weer koraal.

   DE MAAT IS 56 EN DAT IS GEMETEN, GEEN SMAAK (ronde 44, op verzoek: "ik vind
   het madvance logo in de header nog veel te klein"). Hij stond op 30, en dat
   is in een balk van 90 precies 33%: het woordmerk was daarmee nauwelijks
   hoger dan de navigatielinks ernaast (14px kapitalen) en las als een
   pictogram in plaats van als het merk. De LIVE site draait 68 in diezelfde
   90 (76%) en staat daarmee buiten de zoom, dus die twee getallen zijn direct
   vergelijkbaar. 56 is 62%: een merk dat de balk draagt, met meer lucht
   eromheen dan de donkere site heeft - die balk is dicht, deze staat over een
   foto en mag lichter.

   BOVEN DE 60 KANTELT HET. Dan raakt het woordmerk de rand van de balk en
   moet de ruimte naar 15; dat is bekeken en het leest als een logo dat in de
   balk geperst is. Verhoog deze waarde dus niet zonder de balk mee te laten
   groeien, en lees dan eerst de breedte-afweging bij `.nav-links` hieronder.

   HIJ KRIMPT NIET MEE MET DE BALK, en dat is geprobeerd en teruggedraaid.
   Het idee was netjes: de ruimte zakt bij het scrollen al van 17 naar 14, dus
   het logo van 56 naar 44 erbij houdt de meegeschoven balk op 72 in plaats
   van 84. Maar `vast` betekent hier twee verschillende dingen. Een pagina die
   LICHT opent draagt `nav-licht` op de body en staat daarmee van bovenaf al
   vast (zie `pagina.js`): acht van de zeventien pagina's - prijzen, contact,
   login, de drie juridische - zouden het logo dus NOOIT op 56 tonen. Dan is
   het merk op de meeste pagina's alsnog klein, en dat is precies de klacht
   waar deze ronde mee begon.

   Eén maat per schermbreedte is hier meer waard dan 12 pixels balkhoogte bij
   het scrollen. De meegeschoven balk is daarmee 84 op een laptop; de donkere
   site draait er 90, dus dat is nog steeds de lichtere van de twee. */
.nav-logo {
  height: 56px; width: auto; display: block;
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}
nav.vast .nav-logo { filter: none; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  color: #FFFFFF; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  opacity: .92; transition: opacity .18s ease;
  /* EEN NAVIGATIELABEL BREEKT NOOIT OVER TWEE REGELS. Zonder dit deed "Hoe het
     werkt" dat onder de ~980 pixels al, en dan staat er een balk van anderhalve
     regel hoog met een label dat in de lucht hangt. Het viel niet op omdat die
     band smal was; met een groter logo wordt hij breder. Nu kan het niet meer
     gebeuren, en de band zelf is weggenomen met de grens hieronder. */
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
nav.vast .nav-links a { color: rgb(var(--inkt)); }

/* DE INLOGLINK HOORT HIER EN NIET IN `paginas.css`, en dat is een reparatie.
   Hij stond daar, en `index.html` laadt dat bestand niet: op de homepage was
   "Inloggen" dus een KALE browserlink - blauw en onderstreept, dwars over de
   donkere hero, op elke schermbreedte. Op een telefoon kwam er een tweede
   gevolg bij: die 63 pixels waren precies wat de knop "Start je plan" over de
   rand duwde, dus die brak in tweeen en werd de balk 107 hoog in plaats van 86.
   Allebei alleen op de homepage, en allebei onzichtbaar in een test.

   De navigatie staat op ELKE pagina, dus zijn opmaak hoort in het bestand dat
   elke pagina laadt. Bewust geen knop: er staat er al een, en twee knoppen
   naast elkaar laten de bezoeker kiezen waar niets te kiezen valt. */
.nav-inloggen, .nav-proef {
  color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; opacity: .92;
  white-space: nowrap;
}
nav.vast .nav-inloggen, nav.vast .nav-proef { color: rgb(var(--inkt)); }

/* HET VOORPROEFJE IS EEN LINK EN GEEN TWEEDE KNOP, en dat is dezelfde afweging
   als hierboven bij Inloggen. Het verschil is alleen dat hij hier WEL tegen de
   hoofdknop aanligt: "Gratis voorproefje" en "Start je plan" zijn voor dezelfde
   bezoeker twee echte alternatieven (zacht en hard instappen), terwijl Inloggen
   dat niet is. De hero doet precies dat paar al voor: een gevulde knop met een
   stille tekstlink ernaast. Twee gevulde knoppen zouden de bezoeker bij elke
   pagina opnieuw laten kiezen tussen twee dingen die er even zwaar uitzien.

   HET LABEL IS "VOORPROEFJE" EN NIET "GRATIS VOORPROEFJE", en dat is GEMETEN
   en geen smaak. Zie de breedte-afweging bij de grens van 1200 hieronder: het
   woord "Gratis" kost 48 pixels in kapitalen, en dat is precies het verschil
   tussen een linkrij die op een laptop van 1280 nog staat en een die daar al
   weg is. Het woord staat waar het verkoopt (de hero, de knoppen op de
   pagina's zelf); in de balk is dit navigatie, net als "Het plan". */

/* Net als de links: een knoplabel in de balk breekt niet. Zonder dit werd
   "Start je plan" op een smalle telefoon twee regels en de balk 97 hoog. */
.nav-knop { padding: 12px 24px; font-size: 13px; white-space: nowrap; }
.nav-rechts { display: flex; align-items: center; gap: 16px; }

/* ── HET MOBIELE MENU ─────────────────────────────────────────────────────
   De knop is drie lijnen die bij het openen een kruis worden. Geen icoon uit
   een pakket: dat zou een extra bestand zijn voor zes pixels vorm. */
.nav-mob {
  display: none;
  width: 42px; height: 42px; padding: 11px 9px;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-mob span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: #FFFFFF;
  transition: transform .22s ease, opacity .18s ease, background .25s ease;
  transform-origin: center;
}
/* Bovenaan de pagina staan de streepjes op een donkere foto en zijn ze wit;
   zodra de balk licht is (vast óf menu open) moeten ze mee. Alleen op `.vast`
   controleren liet een wit kruis op een licht paneel staan. */
nav.vast .nav-mob span, nav.mob-open .nav-mob span { background: rgb(var(--inkt)); }
nav.mob-open .nav-mob span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
nav.mob-open .nav-mob span:nth-child(2) { opacity: 0; }
nav.mob-open .nav-mob span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* HET PANEEL SCROLT ZELF, want hij zit IN de vaste balk: wat onder de
   schermrand valt is niet weg te scrollen en dus onbereikbaar. Met vijf rijen
   paste hij overal; met zeven (Over ons en Voorproefje erbij) is hij 530 hoog
   en valt "Inloggen" op een scherm korter dan 576 buiten beeld. Gemeten op
   390 breed: tot en met 600 gaat het goed, op 560 niet meer - en een iPhone SE
   houdt na de adresbalk ongeveer 553 over.

   `100dvh` en niet `100vh`: op een telefoon is dat het verschil tussen de
   adresbalk meerekenen of niet, en juist die marge is hier de hele kwestie.
   De 76 is de balk eronder (17 + 42 logo + 17), met de rand erbij afgerond. */
.mob-menu {
  display: none;
  padding: 10px var(--rand) 26px;
  background: rgba(240, 239, 240, .97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--inkt), .09);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  /* Doorscrollen naar de pagina erachter zodra de lijst op is, leest als een
     menu dat wegglijdt onder je duim. */
  overscroll-behavior: contain;
}
.mob-menu a {
  display: block; padding: 15px 0;
  color: rgb(var(--inkt)); text-decoration: none;
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  border-bottom: 1px solid rgba(var(--inkt), .1);
}
.mob-menu a:last-child { border-bottom: 0; }
/* Zolang het menu openstaat is de balk zelf ook licht, anders staan witte
   streepjes op een licht paneel. */
nav.mob-open { background: rgba(240, 239, 240, .97); backdrop-filter: blur(14px); }
nav.mob-open .nav-logo { filter: none; }

/* ── 1. DE HERO ───────────────────────────────────────────
   DE FOTO IS TERUG, op verzoek. Hij heeft er een ronde uit gestaan met het
   argument dat hij onder zijn eigen waas verdween; dat argument gold voor de
   stand waarin de tekst over de VOLLE breedte liep en de waas dus overal even
   zwaar moest zijn. Nu heeft hij twee lagen, en dat is het verschil:

     1. een verloop van LINKS naar rechts dat de leeskant dichtzet en rechts
        naar 28% zakt, zodat daar echt een landschap staat in plaats van een
        grijze vlek;
     2. een verloop van BOVEN naar beneden dat alleen de navbalk en de
        onderrand verdonkert, zodat de horizon vrij blijft.

   DE KOP LOOPT OVER DE VOLLE BREEDTE, de rest van de tekst niet. Op 104 pixels
   past "Jouw marketingplan," precies op één regel in de kolom van 1144, dus de
   kop is twee regels groot in plaats van vier regels klein - en hij loopt aan
   het eind de heldere kant van de foto in, wat hem aan het beeld vastzet in
   plaats van ernaast. Wat eronder komt (de alinea, de knoppen, de kleine
   letter) blijft wél smal: daar is 46 tekens de leesmaat, en de ruimte die
   rechts overblijft is precies waar het landschap staat. */
.hero {
  position: relative;
  padding: calc(var(--sec) + var(--r3)) 0 var(--sec);
  background:
    linear-gradient(94deg,
      rgba(26,37,48,.97) 0%,
      rgba(26,37,48,.95) 38%,
      rgba(26,37,48,.72) 58%,
      rgba(26,37,48,.28) 100%),
    linear-gradient(180deg,
      rgba(26,37,48,.78) 0%,
      rgba(26,37,48,0) 22%,
      rgba(26,37,48,0) 58%,
      rgba(26,37,48,.46) 100%),
    url('/afbeeldingen/hero-bg.jpg') 56% 46% / cover no-repeat;
  color: #FFFFFF;
  overflow: clip;   /* clip en niet hidden: hidden maakt er een scrollvlak van */
}
.hero .label { color: var(--coral); }
.hero h1 { max-width: none; }
.hero-sub { margin-top: var(--r3); max-width: 42ch; font-size: clamp(18px, 1.35vw, 20px); color: rgba(255,255,255,.9); }
.hero-acties { margin-top: var(--r4); display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.hero-note { margin-top: var(--r3); font-size: 15px; color: rgba(255,255,255,.72); max-width: 46ch; }

/* ── 2. HET VERHAAL: DE KOP VAN DE BELOFTES ───────────────────────────────────────────────────
   Een blok lopende tekst op 44 pixels, zonder kop erboven. Dat is het patroon
   van de referentie en het is precies wat een sjabloon niet doet: daar staat
   altijd eerst een kop en dan kleinere tekst. Hier IS de tekst de kop.

   Het label staat LINKS in de marge in plaats van erboven: dat maakt de
   bladspiegel asymmetrisch, en asymmetrie is het goedkoopste middel tegen de
   indruk dat een pagina door een generator is uitgespuugd. */
/* HET VERHAAL IS DE KOP VAN DE BELOFTES, EN STAAT DAAROM IN DEZELFDE SECTIE.
   Het was tot ronde 32 een eigen <section> met alleen ruimte BOVEN zich, omdat
   de lijst er direct op volgde. Toen de productband ertussen kwam te staan,
   leverde dat twee fouten op die allebei op een schermafdruk te zien waren: de
   zin "Met de reden erbij." plakte tegen de volgende band (nul ruimte onder),
   en het lijstje 01/02/03 begon met een haarlijn en een nummer zonder dat er
   een kop boven stond. Een kop en zijn lijst horen in één sectie; zet hier dus
   nooit meer iets tussen. */
.verhaal-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 var(--r5);
  align-items: start;
  margin-bottom: var(--r6);
}
.verhaal-grid p {
  font-family: var(--serif);
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 780px;
}
.verhaal-grid p + p { margin-top: 0; }
/* Alleen deze mag lichter: hij staat op 47px en valt dus onder de 3:1-norm. */
.verhaal-grid .zacht { color: var(--tekst-4); }

/* ── 3. DE VIER BELOFTES ───────────────────────────────────────
   EEN REDACTIONELE LIJST, GEEN RASTER VAN VIER DOZEN. Het was twee bij twee met
   in elke cel een nummertje, een vette kop en grijze tekst: vier keer dezelfde
   doos van dezelfde maat. Dat is precies het patroon dat een pagina als
   gegenereerd laat lezen, en het was hier het vlakste blok van de hele pagina.

   Wat het nu is: vier rijen over de volle breedte met een haarlijn ertussen,
   een GROOT nummer in de marge, de belofte als kop van 34 pixels en de uitleg
   in een eigen kolom ernaast. Dezelfde woorden, dezelfde hoogte-orde, maar de
   bladspiegel van een tijdschrift in plaats van die van een dashboard.

   Het nummer is bewust GEDEMPT en niet koraal: hij is navigatie, geen inhoud,
   en vier koraal cijfers van 60 pixels zouden het accent opmaken dat de knoppen
   en de labels nodig hebben.

   MAAR HIJ MAG GEEN SPOOK ZIJN. Hij stond eerst op 17% inkt en dat haalde
   1,39:1 - ruim onder de 3:1 die voor tekst vanaf 24 pixels geldt. Een cijfer
   dat je ALS LEZER gebruikt om te scannen is geen decoratie, hoe licht je hem
   ook bedoelt. Op 52% inkt komt hij op 3,2:1 uit en blijft hij nog steeds een
   toon stiller dan de kop ernaast. */
/* DEZE BAND STAAT OP DE GROND, zonder eigen achtergrond en zonder haarlijnen.
   Hij is in ronde 31 even wit geweest: toen stond het product erboven, liep
   deze band recht door in de stappen (ook grond) en lagen er 2324 pixels
   dezelfde kleur achter elkaar - ruim twee schermen, precies waar `banden.mjs`
   voor bestaat. In ronde 33 is het product op verzoek weer onder deze band
   gezet, dus die donkere band staat er nu tussen en is het wit niet meer nodig.

   De afwisseling over de hele pagina:

     foto · grond · DONKER · grond · wit · DONKER · grond · DONKER

   ZET HIER DUS NIETS TUSSEN. Het verhaalblok bovenin deze sectie (het label en
   de twee regels) is de KOP van de lijst eronder; stond daar iets tussen, dan
   begint de lijst met een haarlijn en het nummer 01 zonder dat er iets boven
   staat. Dat is op 16 oktober 2026 gebeurd en het was alleen op een
   schermafdruk te zien. */
.beloftes { padding: var(--sec) 0; }
.belofte-lijst { list-style: none; }
.belofte {
  display: grid;
  grid-template-columns: 118px minmax(0, .85fr) minmax(0, 1fr);
  gap: 0 var(--r5);
  align-items: start;
  padding: var(--r4) 0;
  border-top: 1px solid var(--haarlijn);
}
.belofte:last-child { border-bottom: 1px solid var(--haarlijn); }
.belofte-n {
  font-family: var(--serif); font-weight: 600; font-size: 60px; line-height: .9;
  color: rgba(var(--inkt), .52);
  font-variant-numeric: tabular-nums;
  margin-top: -6px;
}
/* DE TITEL IS TWEE WOORDEN, DE REDEN STAAT ERONDER. Hij was "Meer bezoekers
   via betere vindbaarheid" in één kop van twee regels; dat leest als een zin en
   niet als een titel, en vier van die zinnen onder elkaar zijn niet te scannen.
   De reden is niet geschrapt maar verplaatst: hij staat als eigen, stillere
   regel onder de titel, dus de belofte blijft even gekwalificeerd als eerst. */
.belofte-kop { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; }
.belofte-sub {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.25;
  color: var(--tekst-3); margin-top: 4px;
}
.belofte > p { color: var(--tekst-2); max-width: 46ch; padding-top: 7px; }

/* ── 4. HET PRODUCT IN BEELD ───────────────────────────────────
   DEZE BAND IS DONKER, EN DAT IS DE UITKOMST VAN ZEVEN RONDES. Van ronde 24
   tot 28 stond hier een uitsnede uit de app; ronde 30 verving die door
   onderdelen die in de tokens van deze pagina waren nagetekend. In ronde 33
   kwam dat alsnog terug als "visueel gewoon stom", en terecht: drie panelen
   van ruim negenhonderd pixels onder elkaar, alle drie dezelfde vorm, twee
   ervan een interface die niet bestaat.

   WAT ER NU STAAT: twee ritmes in plaats van drie gelijke blokken. Boven een
   breed tweeluik (tekst naast de doorsnede van het plan), daaronder twee
   beeldkaarten naast elkaar. Van 2922 naar ongeveer 1500 pixels.

   HET PANEEL OM DE DOORSNEDE IS WEG. Rand, schaduw en lichtval maakten er een
   VENSTER van, en een venster is precies wat een nagebouwd scherm verraadt.
   De rijen staan nu kaal op de band; ze dragen hun eigen vorm al. */
.product {
  padding: var(--sec) 0;
  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);
  --coral-tx: var(--coral);
  --teal-tx: var(--teal);
  --paneel: rgba(255, 255, 255, .05);
  --vlak: rgba(255, 255, 255, .04);
  --hoog: rgba(255, 255, 255, .11);
  --tray: rgba(0, 0, 0, .16);
}
.product .label { color: var(--coral); }
/* EEN LABEL BINNEN EEN PANEEL IS GEDEMPT WIT EN GEEN KORAAL, EN DAT IS EEN
   CONTRASTGRENS. Gemeten: koraal als letter haalt 4,96:1 op de band zelf en
   4,29:1 op een paneel van .05 - dus het sectielabel mag koraal en de twee
   labels in de onderdelen niet. Op --tekst-3 komen ze op 5,88:1 uit.

   Het is ook de betere verdeling: koraal zegt "hier begint een sectie", en wat
   binnen een onderdeel staat is UI-meta. Zo staat het in het donkere thema van
   het echte platform ook. */
.product-kop { max-width: 780px; margin-bottom: var(--r6); }

/* HET TWEELUIK: de tekst links smal, de doorsnede rechts breed. Niet andersom
   en niet onder elkaar: de rijen lezen van links naar rechts (de balk IS de
   maat), dus ze horen aan de kant waar de blik naartoe loopt. */
.pg-breed {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--r6); align-items: stretch;
  margin-bottom: var(--r6);
}
/* DE TEKSTKOLOM LOOPT VAN BOVEN TOT ONDER, met de fijne regel onderaan
   geduwd. De doorsnede ernaast is bijna achthonderd pixels hoog en de tekst
   driehonderd; stonden ze allebei bovenaan, dan bleef er een leeg vlak van een
   half scherm onder de link staan, en dat leest als onaf in plaats van als
   witruimte. Verticaal centreren zou dat half oplossen en de kop losmaken van
   de bovenrand van de lijst. */
.pg-zij { display: flex; flex-direction: column; }
.pg-zij h3 { margin: 0 0 var(--r3); }
.pg-zij p { color: var(--tekst-2); max-width: 42ch; margin: 0; }
.pg-zij b { color: #FFFFFF; font-weight: 600; }
.pg-zij .link { margin-top: var(--r3); align-self: start; }
.pg-zij .anat-fijn { margin-top: auto; padding-top: var(--r5); }

.anat-lijst { list-style: none; margin: 0; padding: 0; }
/* DE BAAN IS LICHTER DAN HET PANEEL EN DE BALK LICHTER DAN DE BAAN. Drie
   treden omhoog vanaf de band, zodat de rij als een MAAT leest in plaats van
   als een tabelregel; met alleen een balk op het paneel is het verschil te
   klein om het silhouet te zien. De scheidingslijn gaat juist naar beneden
   (zwart), want een witte lijn zou een vierde trede omhoog zijn. */
.anat-lijst li {
  position: relative;
  display: grid; grid-template-columns: 38px minmax(0, 1fr);
  align-items: baseline; gap: 0 var(--r2);
  padding: 10px 16px;
  background: var(--vlak);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.anat-lijst li:first-child { border-radius: 8px 8px 0 0; }
.anat-lijst li:last-child { border-bottom: 0; border-radius: 0 0 8px 8px; }
.anat-lijst li > * { position: relative; }
.anat-lijst li::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--w) * 1%);
  background: var(--hoog);
  pointer-events: none;
}
.anat-lijst li:first-child::before { border-radius: 8px 0 0 0; }
.anat-lijst li:last-child::before { border-radius: 0 0 0 8px; }
/* DE GROOTSTE IS KORAAL, en dat is geen versiering maar de hele boodschap van
   dit beeld: het dikste hoofdstuk is het actieplan. Een tweede koraal vlak in
   deze lijst zou dat meteen weer wegnemen, dus het blijft bij deze ene.

   DE DEKKING IS 46% EN DAT IS EEN ONDERGRENS, GEEN SMAAK. Koraal op een
   donkere rij verzadigt uit: op 32% (de waarde uit de keuzepagina) komt er
   (113,65,79) uit en dat is kastanjebruin, niet de merkkleur. Op 46% wordt het
   (142,68,85) en leest het als koraal. Hoger kan niet, en daar zit de grens:

     dekking   kleur          wit erop   --tekst-2 erop
      32%      (113,65,79)     8,17:1     5,33:1
      46%      (142,68,85)     6,79:1     4,43:1   <- onder de norm
      55%      (161,71,89)     5,92:1     3,86:1

   HET NUMMER OP DEZE RIJ STAAT DAAROM OP WIT en niet op --tekst-2, als enige
   van de vijftien. Dat is geen uitzondering die opvalt: dit is de rij die eruit
   hoort te springen. In koraal kan het sowieso niet - koraal op koraal haalt
   2,61:1, en zo stond het in de keuzepagina wel. */
.anat-lijst li.top::before { background: rgba(255, 83, 108, .46); }
.anat-lijst li.top .an-t { font-weight: 600; }
.anat-lijst li.top .an-nr { color: #FFFFFF; }

/* HET SECTIENUMMER STAAT ALTIJD OP DE BALK, dus op het lichtste stuk van de
   rij, en het is 15 pixels in een SMALLE letter. Op --tekst-3 komt dat op
   3,70:1 uit en haalt het de norm niet; op --tekst-2 op 5,53:1. */
.an-nr {
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--tekst-2); font-variant-numeric: tabular-nums;
}
.an-t {
  font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.25;
  color: #FFFFFF;
}

.anat-fijn {
  margin: var(--r2) 0 0; max-width: 62ch;
  font: 400 14px/1.6 var(--sans); color: var(--tekst-3);
}

/* HET BIJSCHRIFT STAAT BOVEN ZIJN ONDERDEEL, NIET ERONDER (ronde 31). Zo stond
   het tot die ronde wel, en het is terecht als onlogisch gemeld: je zag een
   doorsnede, een weekkaart en een gesprek, en pas daaronder stond wat je had
   gezien. Een figuur-onderschrift hoort bij een BEELD dat voor zichzelf spreekt
   (een foto van een ding dat je herkent); een stuk interface spreekt niet voor
   zichzelf, dus de titel hoort ervoor.

   DE HAARLIJN GAAT DUS MEE NAAR BENEDEN. Hij bindt de drie figuren nog steeds
   aan elkaar en scheidt nu de tekst van het onderdeel in plaats van andersom.

   DEZE REGEL DRAAGT ALLE DRIE DE FIGUREN. De kop links, de toelichting rechts,
   een lijn eronder. Zet hier geen tweede variant naast: dat is precies wat er
   halverwege ronde 31 misging.

   DE KOP IS `kop-s` EN NIET `kop-m`. Het eerste bijschrift stond op 36 pixels
   en de andere twee op 26, en het eerste komt direct onder de sectietitel van
   72. Drie koppen van drie maten vlak onder elkaar is geen hierarchie meer.

   Hier stond eerder een negatieve marge die de kolom brak; dat kan niet samen
   met een onderdeel op ware grootte en is er in ronde 26 uit gegaan. De
   nagebouwde onderdelen zijn vloeiend, dus die vraag speelt niet meer: ze
   vullen de kolom per definitie. */
.anat-fijn {
  margin: var(--r2) 0 0; max-width: 62ch;
  font: 400 14px/1.6 var(--sans); color: var(--tekst-3);
}

/* DE TWEE BEELDKAARTEN. Een LICHT beeld op een donkere band leest als een
   afdruk aan een donkere wand: het springt eruit zonder dat er een kader
   omheen hoeft. Daarom hebben ze alleen een haarlijn en een schaduw, en geen
   lichtval zoals de panelen hiervoor.

   ── HET BEELD IS EEN UITGEKNIPT APPARAAT EN GEEN KAART (ronde 55 en 56) ──
   Eerst op een telefoon, op verzoek: "alleen de telefoon zien en niet het
   vierkante raster eromheen ... en dan wel de hele telefoon". Daarna ook op
   desktop: "ik wil de laptop op desktop ook graag zo uitgeknipt hebben".

   ALLES WAT VAN DIT BEELD EEN OBJECT MAAKTE MOET ERAF, en dat is meer dan het
   oogt: de rand, de ronding EN de schaduw tekenen samen precies de rechthoek
   die weg moest. Vergeet je er één, dan staat er een lijn om een apparaat dat
   nergens op ligt.

   DE VERHOUDING KOMT UIT HET BESTAND en niet meer uit een vaste 16:10. Een
   apparaat met zijn schaduw heeft zijn eigen maat, en in een vast kader geperst
   zou `cover` er de randen af snijden - juist de randen die het silhouet
   maken. De twee beelden in een rij houden dezelfde hoogte doordat
   `beeld-apparaat.py` ze per groep tot dezelfde maat aanvult; zonder dat staan
   de twee koppen eronder niet meer op dezelfde lijn.

   DE MATEN IN DE `<picture>` IN index.html MOETEN MET DE BESTANDEN MEEBEWEGEN.
   Nu de verhouding niet meer hier staat, is dat attribuut wat de browser
   gebruikt om vóór het laden ruimte te reserveren; klopt het niet, dan springt
   de pagina zodra het beeld binnenkomt. */
.pg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r5); }
/* Staat het tweeluik VÓÓR de doorsnede (op /start: eerst je week en je coach,
   dan het plan eronder), dan krijgt de doorsnede de lucht die hij elders van
   zijn eigen margin-bottom krijgt. */
.pg-duo + .pg-breed { margin-top: var(--r6); }
.pg-kaart { margin: 0; }
.pg-kaart img {
  display: block; width: 100%; height: auto;
}
.pg-kaart figcaption { margin-top: var(--r4); }
.pg-kaart h3 { margin: 0 0 var(--r2); }
.pg-kaart p { color: var(--tekst-2); margin: 0; max-width: 48ch; }
/* `.pg-kaart i` is in ronde 42 verwijderd met de geciteerde zinnen die hij
   opmaakte. Komt er ooit weer een citaat in een bijschrift, bedenk dan dat
   `color: #FFFFFF` daar hard in stond: op een lichte band is dat wit op wit,
   en dat is precies waar de proef om `.product` licht te maken op strandde. */

/* ── 5. DE VIER STAPPEN ────────────────────────────────────────
   EEN BAND MET EEN FOTO, GEEN VIER LOSSE BEELDEN. Hier hebben vijf series
   gestaan (zie het commentaar in index.html) en alle vijf zijn ze afgekeurd op
   dezelfde grond: vier beelden boven vier stappen beloven dat elk beeld OVER
   zijn stap gaat, en van deze vier is er precies één te fotograferen. Een band
   met een foto belooft dat niet: het beeld draagt de sfeer, de tekst draagt de
   stap.

   DE CONSTRUCTIE IS DIE VAN DE HERO. Eerst een horizontale sluier zodat de
   tekst overal leesbaar blijft en de foto naar rechts wegloopt, daarna een
   verticale zodat de band boven en onder in de pagina oplost. Twee verloopjes
   en niet één: met alleen een vlakke sluier is het geen foto meer maar een
   donker vlak met ruis.

   `overflow: clip` EN NIET `hidden`: hidden maakt er een scrollvlak van, en
   dat is in dit project al drie keer een sticky-element komen te kosten. */
/* WIT BOVEN DE BAND, EN ONDER HEM DOET DE PRIJZENBAND DAT ZELF. Die is ook
   wit en begint met zijn eigen `--sec` aan ruimte, dus een onderMARGE hier zou
   die ruimte verdubbelen tot 240 pixels leeg veld tussen de foto en het woord
   PRIJZEN. Het resultaat is hetzelfde: de band ligt tussen twee witte vlakken. */
.stappen { background: var(--wit); padding: var(--sec) 0 0; }
/* DE BAND LIGT IN EEN WIT VELD, en dat is de hele reden dat `.stappen` zelf
   geen foto meer draagt. Hij stond full-bleed tussen de donkere productband en
   de witte prijzenband in, dus BOVEN hem was het ook al donker: twee donkere
   vlakken achter elkaar, en dan leest de foto niet als een eigen moment maar
   als dezelfde band met een andere textuur. Gemeten liep er 2372 pixels donker
   door. Zo is het ook gemeld: "misschien wel mooier tussen 2 witte delen van
   de site in".

   WIT BOVEN ÉN ONDER, en niet alleen boven. Onder hem ligt de prijzenband die
   zelf al wit is, dus de onderste marge valt daarmee samen tot één wit veld.
   Alleen boven zou de band tegen de onderrand van zijn eigen sectie plakken en
   dan is het geen eiland maar een deksel.

   DE VERTICALE SLUIER IS ZWAKKER DAN HIJ WAS. Die stond er om de band boven en
   onder in de PAGINA te laten oplossen, en dat hoort bij een band die tegen
   twee andere banden aan ligt. Tegen wit werkt hij omgekeerd: hoe donkerder de
   rand, hoe harder de overgang. Wat ervan overblijft is de verdieping die een
   foto nodig heeft om niet plat te worden. */
.stappen-band {
  position: relative;
  padding: var(--sec) 0;
  /* ── ER ZAT EEN FOTO ONDER EN DIE IS ERUIT (ronde 46) ──────────────────
     `beeld/stappen-bg.jpg` was het schoolvoorbeeld van het AI-stockgenre:
     gouden tegenlicht door een vitrage, een olijfboompje in pot, een mok, een
     boek zonder titel en een stoel waarvan de spijlen niet op de zitting
     uitkomen. Dat laatste zie je pas als je kijkt; het GENRE herken je meteen,
     en dat is precies wat deze ronde van de site af moest.

     Hij kostte bovendien bijna niets op: de sluier eroverheen stond op .66 tot
     .82, dus er was hooguit een vijfde van de foto zichtbaar. Wat hij echt
     deed was dieptewerking geven, en dat kan ook zonder foto.

     Wat ervoor in de plaats komt is dezelfde sfeergloed die het platform zelf
     gebruikt: een donkere grond met twee zachte vegen in de merkkleuren. Geen
     verzoek, geen bestand, geen model. Zet hier dus geen stockfoto terug; een
     ECHTE foto mag, maar die moet dan ook echt gemaakt zijn. */
  background:
    radial-gradient(86% 120% at 16% -10%, rgba(255, 83, 108, .17) 0%, rgba(255, 83, 108, 0) 58%),
    radial-gradient(70% 104% at 92% 108%, rgba(159, 214, 219, .13) 0%, rgba(159, 214, 219, 0) 62%),
    linear-gradient(168deg, #17212c 0%, #0e131a 54%, #131c26 100%);
  color: #FFFFFF;
  overflow: clip;
  /* GEEN RONDING EN GEEN SCHADUW: dit is een BAND en geen kaart. Met een
     ronding lopen de bovenhoeken tot tegen de vensterrand en lijkt dat een
     fout; met een schaduw wordt het een voorwerp dat op de pagina ligt, en dan
     leest "In vier stappen" als een item in plaats van als een hoofdstuk. De
     pagina kent verder alleen full-bleed banden, en dit is er een.
     Dezelfde omslag als bij de donkere band: de tokens draaien om, de rest van
     de stijl hoeft niets van deze band te weten. */
  --haarlijn: rgba(255, 255, 255, .16);
  --tekst-2: rgba(255, 255, 255, .80);
  --tekst-3: rgba(255, 255, 255, .62);
  --coral-tx: var(--coral);
  --teal-tx: var(--teal);
}
.stappen-band .label { color: var(--coral); }
.stappen-kop {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: var(--r3) var(--r5); align-items: end;
}
.stappen-kop .lead { margin-top: 0; padding-bottom: 7px; color: rgba(255, 255, 255, .86); }

/* DE VIER STAPPEN ZIJN NU TEKST, en ze hangen aan een lijn. Zonder die lijn
   zweven vier kolommen los op de foto; met de lijn lopen ze van links naar
   rechts en lees je er een volgorde in. Het nummer zit ÓP die lijn, zoals een
   halte op een route. */
.stap-strip {
  list-style: none; margin: var(--r6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--r4);
}
/* DRIE IN PLAATS VAN VIER, voor /voorproefje. Geen tweede component: het is
   dezelfde route met dezelfde lijn, alleen met een halte minder. */
.stap-strip.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stap {
  margin: 0; position: relative;
  padding-top: var(--r4);
}
/* De lijn loopt dóór tot in de volgende kolom, behalve bij de laatste: dan
   zou hij in het niets eindigen. */
.stap::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: calc(100% + var(--r4)); height: 1px;
  background: rgba(255, 255, 255, .22);
}
.stap:last-child::before { width: 100%; }
/* HET NUMMER LIGT OP DE LIJN EN HEEFT DUS EEN EIGEN ACHTERGROND NODIG. Die is
   niet dekkend maar een vlak met de bandkleur; op een foto die per pixel
   verschilt is een dekkende kleur meteen een plakkertje. */
/* HET NUMMER IS WIT EN DE STIP IS KORAAL, en dat is een meting en geen smaak.
   Koraal heeft een eigen helderheid van 0,285: op pikzwart haalt deze tekst
   daarmee 5,8:1 en verder komt hij nooit. Boven een FOTO is dat geen marge
   maar een probleem, want elke lichte plek eet er meteen van. Gemeten met
   `fotocontrast.mjs` stond "04" op 3,67:1 tegen een norm van 4,5, puur omdat
   daar het zonlicht op het gordijn valt; 01 tot 03 haalden 5,7 op het donkere
   deel van dezelfde band. Wit heeft die marge wel, overal, ook als de foto ooit
   wordt vervangen.
   DE KORAAL BLIJFT, maar op de STIP en de LIJN. Dat zijn vlakken en geen tekst,
   dus daar geldt de leesnorm niet, en het accent doet er precies hetzelfde werk:
   een route met vier haltes. */
.stap-n {
  position: absolute; left: 0; top: 0;
  display: inline-block; padding: 0 10px 0 0;
  background: transparent;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.stap::after {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
}
.stap-n { padding-left: 17px; }
.stap-t { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.15; margin: var(--r3) 0 0; }
.stap-d { color: var(--tekst-2); font-size: 16px; margin-top: var(--r2); max-width: 26ch; }

/* ── 6. DE PRIJZEN ─────────────────────────────────────────────
   Hier mág een vlak. Dit is het moment waarop iemand beslist, en twee donkere
   kaarten op een lichte pagina zijn de zwaarste vorm die de pagina kent - dat
   is wat een statement tot statement maakt. Als alles een kaart is, is niets
   het; daarom staat er verder bijna geen. */
/* DE TWEEDE WITTE BAND, EN DE ENIGE NAAST DIE VAN HET PRODUCT. Wit betekent op
   deze pagina: hier kijk je naar wat je krijgt en wat het kost. De achterste
   helft was vier secties tekst op dezelfde grijze grond achter elkaar, en dat
   las als één lange lap. Deze band zit er middenin, dus de twee witte banden
   raken elkaar niet.

   DE KOP STAAT HIER ALS ENIGE GECENTREERD. Dit is het moment waarop iemand
   beslist; een tweede as is het goedkoopste middel om dat te markeren, en bij
   de referentie staat ook precies één van de zes koppen midden. De KAARTEN
   blijven links uitgelijnd - dat is tekst om te lezen. */
.prijzen {
  padding: var(--sec) 0;
  background: var(--wit);
  /* GEEN HAARLIJN BOVENAAN MEER. Die scheidde de witte band van de donkere
     stappenband erboven; sinds die band in een wit veld ligt, zou hij als
     streepje dwars over de onderrand van de foto lopen. De onderste blijft:
     daar ligt de donkere bewijsband tegenaan. */
  border-bottom: 1px solid var(--haarlijn);
}
.prijzen > .kolom > .label, .prijzen > .kolom > h2 { text-align: center; }
/* In pixels en niet in `ch`: die eenheid rekent tegen het cijfer 0 van de
   GEËRFDE letter en de kop staat in Barlow Condensed, dus 22ch viel ruim 40
   pixels te krap uit voor "Je zit nergens aan vast". Zelfde val als bij de
   afsluiter. */
.prijzen > .kolom > h2 { max-width: 680px; margin-inline: auto; }
/* DE PLANKAART IS BREDER, 1,32 tegen 1. Twee gelijke kaarten zeggen dat de twee
   producten even zwaar wegen, en dat is niet zo: de coach is een aanvulling die
   het plan VEREIST (dat staat er ook op). De verhouding vertelt dat zonder dat
   er een "meest gekozen"-sticker aan te pas komt.

   HET MOET WEL EEN ZICHTBAAR VERSCHIL ZIJN. Op 1,14 was het 608 tegen 536, en
   dat leest als een slordigheid in plaats van als een keuze: ofwel gelijk, ofwel
   duidelijk ongelijk. Op 1,32 is het 648 tegen 496. */
.prijs-grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: var(--r3); margin-top: var(--r5); align-items: stretch; }
/* STAAT ER GEEN KOP BOVEN, DAN OOK GEEN AFSTAND TOT DIE KOP. Die --r5 neemt
   afstand van de h2 op de homepage; op /prijzen draagt de paginakop de titel al
   en is het raster het eerste blok in de band. Daar telde de marge op bij de
   sectieruimte: 184 pixels wit voordat de eerste kaart begon. Gevonden door
   ruimte.mjs op zijn eerste ronde over de twaalf pagina's. */
.prijs-grid:first-child { margin-top: 0; }
.prijs {
  position: relative;
  background: var(--navy); color: #FFFFFF;
  border-radius: var(--rond);
  border: 1px solid var(--lijn-op-donker);
  box-shadow: var(--schaduw-m);
  padding: var(--r4);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Het verloop ligt als EIGEN laag over de kaart in plaats van als achtergrond:
   `background` is hier al navy, en twee achtergronden stapelen betekent dat de
   kleur en het licht in dezelfde regel staan en niet los te verzetten zijn. */
.prijs::before {
  content: ''; position: absolute; inset: 0;
  background: var(--licht-op-donker);
  pointer-events: none;
}
.prijs > * { position: relative; }
.prijs-tag { color: var(--coral); margin-bottom: var(--r3); }
/* HET EUROTEKEN HANGT NIET AAN `vertical-align: super`. Dat verschuift per
   browser en per lettertype en zette het teken los van het getal. Nu een eigen
   regelhoogte met een vaste verschuiving, zodat de bovenkant van het teken
   uitlijnt met de bovenkant van het cijfer. */
.prijs-bedrag {
  font-family: var(--serif); font-size: 78px; font-weight: 600; line-height: .92;
  display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.prijs-bedrag .euro { font-size: .42em; font-weight: 500; align-self: flex-start; padding-top: .09em; }
.prijs-bedrag .per {
  font-family: var(--sans); font-size: .21em; font-weight: 500;
  color: rgba(255,255,255,.6); margin-left: 6px; letter-spacing: 0;
}
.prijs-per { font-size: 15px; color: rgba(255,255,255,.8); margin-top: var(--r2); }
.prijs-per s { color: rgba(255,255,255,.62); text-decoration-thickness: 1px; }
.prijs-meta { font-size: 13.5px; color: rgba(255,255,255,.52); margin-top: 3px; }
.prijs-lijn { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: var(--r3) 0 0; }
.prijs-naam { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-top: var(--r3); }
.prijs-desc { color: rgba(255,255,255,.72); font-size: 16px; margin-top: var(--r1); max-width: 38ch; }
.prijs ul { list-style: none; margin-top: var(--r3); display: grid; gap: 12px; }
.prijs li { display: flex; gap: 13px; align-items: baseline; font-size: 16px; color: rgba(255,255,255,.9); }
/* EEN GETYPT VINKJE IS EEN LETTER EN GEEN ICOON: hij heeft de schreven en de
   lijndikte van het lettertype, staat per systeem op een andere hoogte en valt
   terug op een andere font zodra Barlow hem niet heeft. Dit is hetzelfde vinkje
   als een masker, dus één vorm op elk systeem, en hij neemt de kleur van de
   regel over. */
.prijs li::before {
  content: ''; flex-shrink: 0;
  width: 15px; height: 15px; margin-top: 1px;
  background: var(--coral);
  -webkit-mask: var(--vink) center / contain no-repeat;
          mask: var(--vink) center / contain no-repeat;
}
.prijs-acties { margin-top: auto; padding-top: var(--r4); }
/* DE KORAAL GLOED ONDER DE KNOP IS VOOR DE LICHTE GROND. Op de donkere kaart
   wordt diezelfde schaduw een roze halo om de pil heen - zichtbaar op het
   scherm en nergens in een getal. Hier dus een neutrale schaduw; de lichtrand
   bovenin blijft, want die maakt de pil rond. */
.prijs .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);
}
.prijs .knop:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 2px 4px rgba(0,0,0,.36), 0 16px 32px rgba(0,0,0,.36);
}
.prijs .knop-rand, .prijs .knop-rand:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.prijs .knop-rand:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.prijs-acties .knop { align-self: flex-start; }
.prijs-na { margin-top: var(--r4); display: flex; align-items: baseline; justify-content: center; gap: var(--r2); flex-wrap: wrap; font-size: 16px; }

/* ── 7. HET BEWIJS ─────────────────────────────────────────────
   DEZE BAND IS DONKER, EN DAT IS EEN RITMEKEUZE. Hij stond tussen de vragen en
   de prijzen in als derde blok tekst op dezelfde grijze grond; drie secties
   achter elkaar die alleen uit letters bestaan leest als één lap, hoe netjes de
   typografie ook staat. Er is hier geen beeld voor handen (dit zijn claims over
   onszelf, geen productscherm), dus wat overblijft om mee te sturen is GEWICHT.

   Inhoudelijk past het ook: dit zijn de drie dingen die je kunt controleren
   voordat je betaalt, en dat is het zwaarste wat de pagina te zeggen heeft.

   De tokens draaien hier om, net als bij de prijskaarten: één blok dat de inkt
   wit maakt en de accenten op hun merkwaarde terugzet, zodat elke regel
   eronder ongewijzigd blijft werken. */
.bewijs {
  padding: var(--sec) 0;
  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);
  --coral-tx: var(--coral);
  --teal-tx: var(--teal);
}
.bewijs .label { color: var(--coral); }
/* HET VOORBEELDPLAN ALS VOORWERP. Drie tekstkolommen naast elkaar was het
   vlakste blok van de pagina; nu draagt de linkerkolom de cover van het
   voorbeeldplan en staan de drie punten eronder elkaar rechts. Zie de markup
   voor waar dat beeld vandaan komt.

   De cover is zelf navy en ligt op een navy band. Wat hem laat liggen in
   plaats van ophouden zijn de twee velletjes erachter: lichte rechthoeken die
   alleen rechts en onder uitsteken, zoals bij een stapeltje papier. Dat is
   geen versiering - zonder die randen valt de linkerhelft weg. */
.bewijs-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--r6);
  margin-top: var(--r5);
  align-items: center;
}
/* DE SCHADUW ZIT OP DE WIKKEL, als `drop-shadow` en niet als `box-shadow` op
   het beeld. Een box-shadow op de cover valt OVER de velletjes erachter en
   maakt er een grijze veeg van; drop-shadow volgt de omtrek van de hele stapel
   en levert dus één schaduw voor één voorwerp. */
.bewijs-boek {
  position: relative;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4)) drop-shadow(0 28px 56px rgba(0, 0, 0, .45));
}
.bewijs-boek img {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  border-radius: 3px;
}
/* De velletjes moeten als PAPIER lezen, niet als grijs vlak. Op een navy grond
   is wit op 50% gewoon middengrijs; pas vanaf ruim 80% komt er papier uit. */
.bewijs-boek::before, .bewijs-boek::after {
  content: ''; position: absolute; z-index: 1; border-radius: 3px;
}
.bewijs-boek::before { inset: 7px -7px -7px 7px;    background: rgba(240, 239, 240, .85); }
.bewijs-boek::after  { inset: 14px -14px -14px 14px; background: rgba(240, 239, 240, .5); }

.bewijs-punten { display: grid; gap: var(--r5); }
/* Het drie-rijen-raster dat de slotregels van drie KOLOMMEN op één hoogte zette
   is hier niet meer nodig: ze staan onder elkaar. */
/* HET KORAAL STREEPJE BOVEN ELK PUNT IS ERUIT. Een gekleurd balkje van 56 bij
   3 pixels boven een kop is het meest gebruikte versiersel van elke
   gegenereerde pagina, en zo is het hier ook gemeld. Wat ervoor in de plaats
   komt doet hetzelfde werk - de drie punten uit elkaar houden - maar is een
   TYPOGRAFISCH middel in plaats van een decoratief: een haarlijn over de volle
   breedte, dezelfde lijn die de bijschriften en de vragenlijst al dragen. */
.bewijs-item {
  display: block;
  padding-top: var(--r3);
  border-top: 1px solid var(--haarlijn);
}
.bewijs-wie { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.12; }
.bewijs-lead { font-size: 17px; line-height: 1.6; color: var(--tekst-2); margin-top: var(--r2); }
/* GEEN TWEEDE HAARLIJN. Elk punt heeft er nu een boven zich; nog een lijn
   binnen het punt maakte er een streepjespatroon van waarin je niet meer ziet
   welke lijn de scheiding is. De slotregel onderscheidt zich al genoeg: 15
   pixels grijs tegen 17 pixels tekst. */
.bewijs-rol {
  margin-top: var(--r3);
  font-size: 15px; color: var(--tekst-3);
}
.bewijs-rol a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(159, 214, 219, .35); }
.bewijs-rol a:hover { border-bottom-color: var(--teal); }


/* ── TWEE BLOKKEN NAAST ELKAAR ────────────────────────────────────────────
   Voor een tegenstelling met twee kanten (bureau tegenover platform) of een
   kop naast zijn alinea. Staat hier en niet in `paginas.css` omdat de
   homepage hem ook gebruikt. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r6); align-items: start; }
.duo p { color: var(--tekst-2); margin-top: var(--r3); max-width: 46ch; }

/* ── HET TEAM ─────────────────────────────────────────────────────────────
   Drie portretten onder het blok over Milkshake marketing, op /over-ons en op
   de homepage. Ze staan DAAR en niet in een eigen sectie: de regel erboven
   zegt dat madvance de werkwijze van dat bureau is, en dat is een bewering tot
   je de mensen ziet van wie die werkwijze is.

   DIT STAAT IN `stijl.css` EN NIET IN `paginas.css`, want de homepage laadt
   dat tweede bestand niet. Dat is hier al een keer misgegaan met de ronde
   koppen: die kwamen op hun bestandsmaat van 160 pixels binnen in plaats van
   46, en dat gaat volkomen stil - er staat gewoon iets, het is alleen te
   groot.

   DE FOTO'S ZIJN GELIJKGETROKKEN OP HET GEZICHT, niet op het kader. Hoe dat
   werkt en waarom staat in `foto/team/maak.py`; de korte versie is dat de
   uitsnede op de KOP is geankerd, zodat alle drie de koppen even groot en op
   dezelfde hoogte in beeld staan. Een rij portretten wordt daar rustig van;
   een gelijke bestandsmaat doet dat niet.

   DE NAAM STAAT IN DE MARKUP EN NIET IN DE BESTANDSNAAM. De bestanden heten
   `team-1` tot `team-3`; wie waar staat is één regel HTML. Zo kost een andere
   volgorde of een nieuw gezicht geen hernoemde bestanden en geen dode links.

   GEEN CIRKELS. Een rond portret knipt de schouders weg en laat alleen een
   pasfoto over; deze drie zijn op 4:5 uitgesneden met de torso erin, en dat
   is wat ze menselijk houdt in plaats van administratief. `maak.py` levert wel
   een ronde variant van 160 pixels, maar die wordt nergens meer gebruikt sinds
   het bewijspunt op de homepage een eigen sectie werd. */
.team { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); margin-top: var(--r6); }
/* `height: auto` IS HIER GEEN NETHEID MAAR DE HELE UITSNEDE. Het `height`-
   attribuut op de `<img>` (1000) telt als presentatiehint, en `aspect-ratio`
   rekent alleen een ONTBREKENDE maat uit: staan breedte en hoogte allebei
   vast, dan wordt de verhouding genegeerd. Zonder deze regel werd elk portret
   395 bij 1000 in plaats van 395 bij 494, en was het blok 1082 pixels hoog.
   Dat valt op een schermafdruk niet op (het is een portret, alleen langer) en
   geen enkele controle sloeg erop aan; het kwam uit een meting. */
.team-p img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--rond); background: var(--grond);
}
.team-naam { margin-top: var(--r3); font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2vw, 28px); line-height: 1.1; }
.team-rol { margin-top: 7px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-tx); }

/* OP EEN TELEFOON WORDT ELKE PERSOON EEN RIJ en niet een smallere kolom.
   Drie naast elkaar is op 390 pixels honderd pixels per portret, en dan is
   een gezicht een vlek; twee kolommen laat de derde als wees achter. Naast
   elkaar in een rij blijft het portret herkenbaar en blijft het blok kort. */
@media (max-width: 760px) {
  .team { grid-template-columns: 1fr; gap: var(--r4); margin-top: var(--r5); }
  /* KOMT ER EEN TWEEDE TEKSTREGEL BIJ (`.team-rol`), DAN MOET DE FOTO BEIDE
     RIJEN OVERSPANNEN. Met drie kinderen in een raster van twee kolommen vult
     de browser rij voor rij: foto links, naam rechts, en die derde regel valt
     door naar rij 2 kolom 1 - dus onder de foto, buiten de rij. Dat is
     dezelfde stille fout als de naamloze rastercel in de weekkaart: er gaat
     niets kapot, er staat alleen iets op de verkeerde plek. Zet er dan
     `grid-row: 1 / 3` op de foto bij, en `grid-column: 2` op allebei de
     regels. Zolang er alleen een naam staat is dit genoeg. */
  .team-p { display: grid; grid-template-columns: 112px 1fr; column-gap: var(--r3); align-items: center; }
  .team-naam { margin-top: 0; }
}

/* ── DE MAKERS ────────────────────────────────────────────────────────
   Hetzelfde blok als op /over-ons: het bureau achter madvance, met de drie
   gezichten eronder. Op verzoek ook hier.

   HET WAS EERST HET EERSTE PUNT IN DE BEWIJSBAND, met drie koppen van 46
   pixels naast de link. Dat punt is nu weg en niet verplaatst: "Milkshake
   marketing" twee keer als kop binnen tweehonderd pixels, met twee bijna
   gelijke zinnen eronder, is geen opbouw maar een herhaling. De bewijsband
   gaat daarmee over het PRODUCT (een compleet plan, de garantie) en deze
   sectie over de MENSEN; dat is een schonere verdeling dan drie punten
   waarvan er een over iets anders ging.

   WIT, want de bewijsband erboven is donker en de vragen eronder staan op
   grond. Het is de enige kleur die daar niet tegen een gelijke buur ligt. */
.makers { padding: var(--sec) 0; background: var(--wit); }
/* `--r5`, dezelfde afstand die `.ph-acties` op /over-ons onder dezelfde
   alinea zet. EN HET IS EEN `div` EN GEEN `p`: `.duo p` zet `margin-top` op
   `--r3` en wint met zijn hogere specificiteit, dus als alinea stond de link
   26 pixels onder de lead en op /over-ons 64. Dan is het niet meer hetzelfde
   blok, en dat zie je naast elkaar meteen. */
.makers-link { margin-top: var(--r5); }

/* ── 8. DE VRAGEN ──────────────────────────────────────────────
   DE KOP STAAT BOVEN DE LIJST, zoals bij elke andere sectie, en de lijst loopt
   over de VOLLE breedte. Twee tussenstanden zijn hier geprobeerd en allebei
   afgevallen: de kop boven een lijst van 920 pixels liet rechts een lege
   strook van een derde staan, en de kop NAAST de lijst dwong hem terug naar
   42 pixels terwijl elke andere sectiekop op 72 staat. Dat tweede is de
   duurste van de twee: één sectie die een andere vorm én een andere kopmaat
   heeft, leest als een pagina die uit stukken is geplakt.

   Een redactionele lijst met een haarlijn tussen de vragen, geen doosjes.
   Zonder doos én zonder lijn zweven de vragen los op een lege pagina - dat is
   in de laag hiernaast eerst fout gegaan. */
.vragen { padding: var(--sec) 0; }
/* VANCE STAAT RECHTS VAN DE KOP. De lijst houdt de volle breedte en de kop
   zijn 72 pixels - dat is de stand waar de twee rondes hierboven op uitkwamen,
   en die blijft staan omdat hij maar 130 pixels breed is. Zie de markup voor
   waarom hij hier wel mag en op de chatknop niet. */
.vragen-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r5); align-items: end; }
.vance { display: block; height: 250px; width: auto; margin-bottom: calc(var(--r5) * -1); }

.vraag-lijst { margin-top: var(--r5); }
.vraag { border-bottom: 1px solid var(--haarlijn); }
.vraag:first-child { border-top: 1px solid var(--haarlijn); }
.vraag summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 760px) 1fr;
  align-items: center; gap: 0 var(--r4);
  padding: var(--r3) 0;
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  transition: color .16s ease;
}
.vraag summary:hover { color: var(--coral-tx); }
.vraag summary::-webkit-details-marker { display: none; }
/* Een plus van 22 pixels tekst is een LETTER die per systeem anders staat; dit
   is hij als twee lijnen, dus altijd dezelfde dikte en altijd gecentreerd. */
.vraag summary::after {
  content: ''; justify-self: end;
  width: 13px; height: 13px;
  background:
    linear-gradient(rgba(var(--inkt), .55), rgba(var(--inkt), .55)) center / 13px 1.5px no-repeat,
    linear-gradient(rgba(var(--inkt), .55), rgba(var(--inkt), .55)) center / 1.5px 13px no-repeat;
  transition: transform .22s ease, opacity .22s ease;
}
.vraag[open] summary::after { transform: rotate(135deg); opacity: .8; }
.vraag p { padding: 0 0 var(--r3); color: var(--tekst-2); max-width: 64ch; }

/* ── 9. DE AFSLUITER ──────────────────────────────────────────────────────
   Full-bleed donker. Dit is het enige volledig donkere vlak buiten de hero, en
   dat maakt hem de afsluiting in plaats van de zoveelste sectie. */
.slot {
  position: relative;
  background: var(--navy); color: #FFFFFF;
  padding: var(--sec) 0;
  text-align: center;
  overflow: clip;
}
/* Een koraal gloed achter de kop, zacht genoeg om niet als vlak te lezen. Dit
   is wat het verschil maakt tussen een donkere balk en een afsluiting: het
   vlak heeft een midden. */
.slot::before {
  content: ''; position: absolute; left: 50%; top: -20%;
  width: 900px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,83,108,.16), rgba(255,83,108,0) 70%);
  pointer-events: none;
}
.slot > * { position: relative; }
.slot .knop, .hero .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);
}
.slot .knop:hover, .hero .knop:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 2px 4px rgba(0,0,0,.36), 0 16px 32px rgba(0,0,0,.36);
}
.slot .label { color: var(--coral); }
/* IN PIXELS EN NIET IN `ch`. Die eenheid rekent tegen het cijfer 0 van de
   geërfde letter, en de kop staat in Barlow Condensed: 16ch bleek 440 pixels
   waar de kop er 662 nodig heeft, dus brak "plan" los op een tweede regel. */
.slot h2 { max-width: 700px; margin: 0 auto; }
.slot-sub { margin-top: var(--r3); color: rgba(255,255,255,.78); font-size: 19px; }
.slot-acties { margin-top: var(--r4); display: flex; align-items: center; justify-content: center; gap: var(--r3); flex-wrap: wrap; }
.slot-note { margin-top: var(--r3); font-size: 15px; color: rgba(255,255,255,.55); }

/* ── VOET ─────────────────────────────────────────────────────────────── */
footer { padding: var(--r6) 0 var(--r5); border-top: 1px solid var(--haarlijn); }
.voet-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r4); }
.voet-merk img { height: 40px; width: auto; content: url('/afbeeldingen/madvance-logo.png'); }
.voet-merk p { margin-top: var(--r2); font-size: 15px; color: var(--tekst-3); max-width: 34ch; }
.voet-kop { margin-bottom: var(--r2); }
.voet-lijst { list-style: none; display: grid; gap: var(--r1); }
.voet-lijst a { color: var(--tekst-2); text-decoration: none; font-size: 15px; }
.voet-lijst a:hover { color: rgb(var(--inkt)); }
.voet-onder { margin-top: var(--r5); padding-top: var(--r3); border-top: 1px solid var(--haarlijn); font-size: 14px; color: var(--tekst-3); }

/* ── BEWEGING ─────────────────────────────────────────────────────────────
   Eén soort, en hij komt ÉÉN keer. Een blok schuift bij binnenkomst 18 pixels
   omhoog en dat is alles; naar boven scrollen geeft geen tweede beweging, want
   die inhoud heb je al gezien. Dezelfde keuze als in het werkbestand. */
.komt { opacity: 0; transform: translateY(18px); transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1); }
.komt.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .komt { opacity: 1; transform: none; transition: none; }
}

/* ── SMAL ─────────────────────────────────────────────────────────────────
   Niet "het raster naar één kolom" en verder niets: op een telefoon moet de
   verticale ruimte óók mee omlaag, anders wordt elke sectie een leeg scherm. */
@media (max-width: 1080px) {
  .hero-tekst { max-width: 78%; }
}

/* ── DE BALK KLAPT EERDER OM DAN DE PAGINA ────────────────────────────────
   DE LINKRIJ VERDWIJNT OP 1200 EN DE REST VAN DE LAYOUT PAS OP 900, en die
   twee grenzen horen bewust niet gelijk te zijn.

   De balk heeft nodig: 2x64 rand + logo (135) + 32 + de linkrij + 32 + de
   rechterkant. Met vier links (407) en Inloggen plus de knop (243) kwam dat op
   968, en stond de grens daarom op 1000. Met "Over ons" erbij (101) en de
   voorproefje-link (140) is het 1209, en dus moest de grens mee.

   DIT IS GEMETEN EN NIET UITGEREKEND, en dat is hier geen formaliteit: deze
   rij is een flexbox ZONDER wrap met `white-space: nowrap` op de labels, en
   `body` staat op `overflow-x: clip`. Te breed wordt dus niet zichtbaar kapot
   maar STIL weggeknipt - op een schermafdruk ziet de balk er normaal uit
   terwijl "Start je plan" half over de rand hangt. Gemeten met de knoprand
   tegen de kolomrand, op /over-ons:

     stand                                  past tot   ruim tot
     vier links + Inloggen + knop (oud)         1001       1120
     + Over ons                                 1120       1200
     + Over ons + "Voorproefje"                 1200       1280
     + Over ons + "Gratis voorproefje"          1280       1366

   Die laatste regel is de reden dat het label "Voorproefje" is en niet "Gratis
   voorproefje": het woord kost 48 pixels in kapitalen en daarmee de hele band
   van 1200 tot 1279, waar een laptop van 1280 (met schuifbalk ~1265) in valt.
   Een krappere `gap` of minder letterafstand halen dat niet terug - allebei
   geprobeerd en gemeten, allebei bleven ze op 1280 steken.

   DE REST VAN DE LAYOUT BLIJFT OP 900. Die grens zet de hele maatvoering om
   (`--rand`, `--sec`, de rasters); die op 1200 zetten zou elke laptop de
   mobiele ruimteverdeling geven, en dat is een veel grotere ingreep dan waar
   dit over gaat.

   DE DRIE REGELS HOREN BIJ ELKAAR. Verhuist de knop naar deze grens en het
   menu niet, dan staat er tussen 901 en 1200 een hamburger die niets opent:
   een dode knop, en die ziet er precies zo uit als een werkende.

   KOMT ER OOIT NOG EEN LINK BIJ, dan is deze grens niet meer te verhogen
   zonder een laptop van 1366 de hamburger te geven. Dan is de vraag welke link
   weg mag, niet welke grens omhoog. */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-mob { display: flex; }
  .mob-menu:not([hidden]) { display: block; }
}

@media (max-width: 900px) {
  /* Op een telefoon zakt de hele SCHAAL mee: 120 pixels sectieruimte is daar
     een derde scherm. De verhoudingen blijven, de maat niet. Alles hieronder
     rekent met die tokens; er staat met opzet geen los getal meer in dit blok,
     op de twee na die een maat van een ANDER ding moeten raken (de hoogte van
     de nummerkolom en de breedte van het paneel). */
  :root { --rand: 24px; --sec: 80px; --r6: 64px; --r5: 44px; --r4: 28px; --r3: 20px; }

  /* De linkrij, de hamburger en het menu staan in het blok op 1000 hierboven.
     Wat hier blijft is de COMPRESSIE van de rechterkant, en die is pas op een
     telefoon nodig. */
  .duo { grid-template-columns: 1fr; gap: var(--r5); }

  .nav-knop { padding: 11px 18px; font-size: 12px; letter-spacing: .07em; }
  .nav-rechts { gap: var(--r1); }
  /* DE INLOGLINK STAAT AL IN HET MOBIELE MENU, dus in de balk is hij een
     dubbeling - en wel een die 63 pixels kost op een scherm van 342. Precies
     die 63 duwden de knop "Start je plan" over twee regels. Het voorproefje
     staat daar ook in en gaat om dezelfde reden mee; blijft hij staan, dan is
     die 63 er weer plus 110 van hemzelf. */
  .nav-inloggen, .nav-proef { display: none; }
  /* 42 is de maat van de live site op een telefoon. Groter kan hier niet: de
     balk houdt na de knop en de hamburger 342 pixels over, en het logo is op
     42 al 101 breed. */
  .nav-logo { height: 42px; }

  .hero-tekst { max-width: none; }
  .hero h1 { max-width: none; }

  .verhaal-grid { grid-template-columns: 1fr; gap: var(--r3); }
  .verhaal-grid p { max-width: none; }

  /* De lijst zakt naar twee kolommen: het nummer in de marge, de kop en de
     uitleg eronder. Drie kolommen van 100 pixels is geen lijst meer. */
  .belofte { grid-template-columns: 54px minmax(0, 1fr); gap: 0 var(--r2); padding: var(--r3) 0; }
  .belofte-n { font-size: 32px; margin-top: 0; }
  .belofte > p { grid-column: 2; max-width: none; margin-top: var(--r2); padding-top: 0; }

  .anat-lijst { margin-top: var(--r4); }
  .anat-lijst li { grid-template-columns: 28px minmax(0, 1fr); padding: 9px 10px; gap: 0 var(--r1); }
  .an-nr { font-size: 13px; }
  .an-t { font-size: 16px; }

  /* HET TWEELUIK KANTELT en de doorsnede komt ONDER de tekst: de rijen hebben
     de volle breedte nodig om als maat te lezen, en in een kolom van 342
     pixels naast een alinea is er van de balk niets meer over. */
  .pg-breed { grid-template-columns: 1fr; gap: var(--r4); }
  .pg-zij p { max-width: none; }
  .pg-duo { grid-template-columns: 1fr; gap: var(--r5); }
  /* DE BREEDTEGRENS VAN HET APPARAAT STAAT IN EEN EIGEN 640-BLOK, en dat is
     een reparatie (ronde 57). Hij stond HIER, dus in het 900-blok, met in het
     commentaar de claim "dezelfde 640 pixels als de `media` daar" - en die
     klopte niet: de `<picture>` schakelt op 640 en deze regel gold tot 900.

     Tussen 641 en 900 kreeg je daardoor de LAPTOP, getekend op 330 pixels
     breed. Het hele platform in 330 pixels is onleesbaar; dat is precies de
     band waar een tablet in portret en een klein laptopvenster in vallen, en
     het is exact de fout die de telefoonvariant moest voorkomen.

     DE KOLOM BLIJFT WEL OP 900 OMKLAPPEN. Twee laptops naast elkaar is daar
     430 per stuk, en dat is te smal. Die twee grenzen horen dus NIET gelijk te
     zijn - alleen de beeldbron en de breedtegrens horen bij elkaar.

     MAAR DAN WEL BEGRENSD OP 644, de maat die het apparaat op een BREED scherm
     ook heeft. Zonder die grens wordt de laptop in één kolom 852 breed, en dan
     gebeuren er twee dingen die allebei verkeerd zijn: het bestand is op 1288
     nog maar 76% van wat een retinascherm dan vraagt (zie `GROEPEN` in
     `beeld-apparaat.py`, daar staat 644 als gemeten maximum), en het apparaat
     staat van rand tot rand - hetzelfde bezwaar dat hieronder bij de telefoon
     staat. Met deze grens houdt hij lucht en blijft 1288 precies 2x. */
  .pg-kaart picture { display: block; }
  .pg-kaart img { width: min(100%, 644px); margin-inline: auto; }
  .pg-kaart p { max-width: none; }

  /* DE FOTO VERSCHUIFT NAAR HET ONDERWERP. Op 390 breed snijdt `cover` een
     smalle verticale strook uit een foto van 1920 breed, en op 50% is dat het
     lege deel van de tafel: dan is er van de foto niets te zien en is de band
     gewoon een donker vlak met een bestand erachter. Op 64% vallen de mok, het
     boek, de olijfboom en de rand van het raam in beeld.
     DIT GETAL HOORT BIJ DE FOTO, NIET BIJ DE BAND. Het stond op 14% toen hier
     een avondopname lag met de lamp links; sinds ronde 41 zit het onderwerp
     rechts. Wissel je de foto, kijk dan hier mee -- er gaat niets kapot, je
     ziet alleen stil het saaiste stuk.
     En de waas wordt hier GELIJKMATIG. Het verloop van links-donker naar
     rechts-licht hoort bij een brede band waarin de tekst links staat; op een
     telefoon loopt de tekst over de volle breedte en zou hij rechts over het
     licht van het raam vallen. */
  /* OP DE BAND EN NIET OP DE SECTIE. `.stappen` is sinds de omslag naar een
     wit veld de WITTE wikkel; stond deze regel daar nog op, dan kreeg de
     ruimte boven de band de foto in plaats van wit en was het eiland weg. Dat
     gaat volkomen stil: de band staat er nog en ziet er op zichzelf goed uit. */
  /* Op een telefoon stond hier een eigen sluier over diezelfde foto. Die foto
     is weg (zie de band hierboven); de verlopen schalen vanzelf mee, dus er
     hoeft hier niets meer overschreven te worden. */

  .stappen-kop { grid-template-columns: 1fr; align-items: start; }

  /* DE FILMSTROOK WORDT EEN TWEELUIK, geen kolom van vier. Vier staande
     beelden onder elkaar is ruim drie schermen voor vier regels tekst; naast
     elkaar blijven ze klein maar lezen ze nog steeds als één reeks. */
  .stap-strip { grid-template-columns: 1fr 1fr; gap: var(--r5) var(--r3); }
  /* DRIE STAPPEN WORDEN EEN KOLOM EN GEEN TWEELUIK: in twee kolommen blijft
     de derde als wees onder de eerste staan, en dan leest de rij niet meer
     als een volgorde. Vier passen wel in twee rijen van twee. */
  .stap-strip.drie { grid-template-columns: 1fr; gap: var(--r4); }
  .stap-t { font-size: 19px; }
  .stap-d { font-size: 15px; }
  .stap-n { font-size: 12px; }
  .stap-d { max-width: none; }

  .prijs-grid, .bewijs-grid, .voet-grid { grid-template-columns: 1fr; }
  /* De cover zakt naar een halve kolom: op volle breedte is hij 480 pixels hoog
     en duwt hij de drie punten een heel scherm omlaag. */
  .bewijs-grid { gap: var(--r5); justify-items: start; }
  .bewijs-boek { width: 62%; }
  /* VANCE GAAT ONDER DE KOP, niet ernaast. Naast de kop houdt hij op een
     telefoon een derde van de breedte bezet en breekt "Wat ondernemers ons het
     vaakst vragen" over VIER regels. Hij staat nu rechts onder de kop, nog
     steeds met zijn voeten op de eerste haarlijn van de lijst. */
  .vragen-kop { grid-template-columns: minmax(0, 1fr); gap: var(--r3); }
  .vance { height: 150px; justify-self: end; }
  .prijs { padding: var(--r4) var(--r3); }
  .prijs-acties .knop, .prijs-acties .knop-rand { width: 100%; justify-content: center; }

  .vraag summary { grid-template-columns: minmax(0, 1fr) auto; font-size: 20px; }
}

/* ── DE SMALSTE TELEFOONS ─────────────────────────────────────────────────
   Op 320 (iPhone SE, iPhone 5) houdt de balk 272 pixels over en vraagt hij er
   315: het logo, de knop en de hamburger passen daar niet naast elkaar. Dat
   was vóór deze ronde al zo en erger - daar stond de inloglink ook nog in,
   goed voor 79 pixels - alleen liep het toen uit op een knop die over twee
   regels brak in plaats van op een balk die overloopt.

   Er gaat hier niets WEG: de knop is op dit scherm de enige actie en de
   hamburger de enige navigatie. Wat meegeeft is de maat.

   DIT BLOK STAAT NA HET 900-BLOK EN RAAKT ALLEEN DE BALK. Het is bij het
   schrijven een keer middenin dat blok beland, waarmee de helft van de
   mobiele layout stil op 374 kwam te staan: de pagina zag er op 390 nog
   normaal uit en alles tussen 375 en 900 verloor zijn mobiele maatvoering.
   Tel na een bewerking hier dus de accolades na. */
/* OP EEN TELEFOON STAAT ER EEN TELEFOON IN PLAATS VAN EEN LAPTOP (zie de
   `<picture>` in index.html). DEZELFDE 640 PIXELS ALS DE `media` DAAR, en dat
   is de hele reden dat dit een eigen blok is in plaats van een regel in het
   900-blok hierboven: de bron en de breedtegrens moeten op dezelfde pixel
   schakelen, anders staat er op een strook breedtes een laptop op telefoonmaat.

   DE BREEDTE IS HIER BEGRENSD. Op volle kolombreedte staat het toestel van
   rand tot rand en leest de band als één groot scherm in plaats van als een
   voorwerp; met deze grens houdt het aan weerszijden lucht. De laptop heeft die
   grens niet nodig: die is 16:10 en vult een kolom net zo goed als op een breed
   scherm. */
@media (max-width: 640px) {
  .pg-kaart picture { display: block; }
  .pg-kaart img { width: min(100%, 330px); margin-inline: auto; }
}

@media (max-width: 374px) {
  .nav-binnen { gap: 16px; }
  .nav-logo { height: 34px; }
  .nav-knop { padding: 10px 14px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ONDERDELEN IN PLAATS VAN VENSTERS (ronde 24)

   Teruggekoppeld: *"ik vind de screenshots een beetje goedkoop en vaak ook
   verkeerd afgeknipt"*. Allebei terecht, en allebei met dezelfde oorzaak.

   VERKEERD AFGEKNIPT. De uitsneden werden met een GEGOKTE pixelrechthoek
   gemaakt ({ x:240, y:140, 800x500 }). Zo'n rechthoek loopt midden door een
   zin, midden door een rij en midden door een kaart: op pf-week eindigde de
   alinea rechts op "roept alleen maar meer vrage" en onderaan stond een halve
   kop. Daar bovenop sneed `.product-paar .scherm img` ze met
   `object-fit: cover` NOG een keer bij naar 16:10. `onderdelen-maken.mjs`
   snijdt nu op een SELECTOR: het leest de bounding box van een echt onderdeel,
   dus de grens IS een elementgrens en er kan per constructie geen zin door.

   GOEDKOOP. Vier keer hetzelfde donkere venster met dezelfde rand en dezelfde
   schaduw is een sjabloon, en een heel venster van 1460 pixels in een vak van
   550 staat op 38%: lichaamstekst van 15 pixels wordt 5,7 pixel. Dat is
   textuur, geen product. Wat er nu staat zijn LOSSE ONDERDELEN uit de app, op
   een maat waarop je ze kunt lezen: een hele taakrij, een KPI-kaart, een
   vraag uit de intake, het gesprek. Geen vensterkader, geen browserbalk, geen
   rand - het onderdeel ligt op de band als voorwerp.

   EEN PRESENTATIE, EN EEN HARDE REGEL: `.od` is een onderdeel dat HELEMAAL in
   zijn vak past. Niets wordt afgesneden, weggevaagd of onder iets anders
   gelegd; wat er staat is af te lezen. Variatie komt van de VORM van het
   onderdeel en van waar het bijschrift staat, nooit van een uitsnede.
   ══════════════════════════════════════════════════════════════════════════ */
/* OP WARE GROOTTE, NOOIT OPGEREKT. `width: auto` plus `srcset="... 2x"` in de
   markup: elke opname is per constructie twee keer zijn eigen breedte, dus de
   browser zet hem op precies de maat die hij in het platform had. Een onderdeel
   van 1132 staat dan op 1132 - geen 0,54 en geen 1,27, maar 1:1.

   Hier stond `width: 100%`, en dat is de regel die het mis liet gaan: het beeld
   werd zo breed als zijn vak, wat het vak ook was. In een kolom van 582 stond
   de intakevraag op 65% en in een blok van 1144 stond hij op 127%. Allebei
   onzichtbaar in de broncode, allebei zichtbaar op het scherm.

   `max-width: 100%` is het vangnet: is de kolom smaller dan het onderdeel (een
   telefoon), dan schaalt hij mee in plaats van de pagina uit te duwen. Dat is
   de enige stand waarin hij onder 100% komt, en `beelden.mjs` meet hem.

   HIER STAAT MET OPZET GEEN `width`. Het `width`-attribuut in de markup is een
   presentatie-hint die de CSS-breedte zet zolang geen enkele auteursregel dat
   doet; zodra je hier `width: auto` of `width: 100%` neerzet, wint die en is de
   maat uit de markup weg. `width: auto` lijkt hetzelfde te doen en doet het
   niet: dat pakt de NATUURLIJKE maat van het bestand, en elke opname is twee
   keer zijn eigen breedte (2264 voor een onderdeel van 1132). Een `srcset` met
   `2x` repareert dat niet, want met dezelfde URL in `src` telt die mee als
   1x-kandidaat. Gemeten: beeld op 2264, door max-width geklemd op het vak - dus
   precies weer zo breed als zijn vak. */
.od {
  display: block;
  max-width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: var(--schaduw-l);
}

/* WAAROM ER GEEN DERDE PRESENTATIE MEER IS. Hier stonden `.od-stapel` (twee
   onderdelen die elkaar overlappen) en `.od-lang` (een lang onderdeel dat
   onderaan in een verloop oplost). Allebei zijn ze gebouwd, geprobeerd en
   teruggedraaid, en allebei om dezelfde reden: ze maakten het beeld MINDER
   leesbaar in plaats van meer.

   De STAPEL legde het tweede onderdeel over het eerste heen en dekte daarmee
   de knop "Begeleid me stap-voor-stap" af - precies de handeling die die
   sectie moest tonen. Overlappen kan alleen als je weet wat eronder zit, en
   dat weet je niet als het onderdeel uit de app komt.

   Het LANGE onderdeel loste onderaan op in de band. Dat werkt op een donkere
   pagina en niet op deze: een donker vlak dat naar wit vervaagt leest als een
   kapot verloop, niet als "dit loopt door". Erger nog, het moest zijn schaduw
   inleveren (een box-shadow wordt om de volledige doos getekend en zou dus een
   lijn door het weggevloeide deel trekken), en juist die schaduw is wat een
   onderdeel tot voorwerp maakt. Snijd dus liever op een ELEMENTgrens een paar
   kaarten eerder af - zie de kop van onderdelen-maken.mjs. */

/* WAAROM ER MAAR EEN PRESENTATIE IS. Hier stond `.od-uit`: het onderdeel op
   ZIJN eigen maat, breder dan de kolom, met een verloop over de rechterkant.
   Bedoeld als "dit loopt door", en het leek de oplossing voor het paar dat
   anders op 54% zou staan.

   GEMETEN WAS ER 54 EN 56 PROCENT VAN TE ZIEN. Je las "Schrijf de
   prijzenpagina met drie voorbeeldtuinen en wat ze" en dan hield het op; in
   het gesprek stond een antwoord op een vraag die halverwege wegviel. Een
   verloop is zachter dan een harde rand en snijdt even hard door een zin, en
   dat was precies de klacht waarvoor hij gebouwd was.

   DE REGEL DIE ERVOOR IN DE PLAATS KOMT: een productbeeld past helemaal in zijn
   vak, of het staat er niet. Past het niet, dan is het VAK te smal (zet het
   beeld onder elkaar in plaats van naast elkaar) of het ONDERDEEL te breed
   (snijd een kleiner onderdeel uit). `beelden.mjs` rekent dat na op elke
   pagina en elke breedte. */