/* ============================================================
   Demo-omgeving van Blitz Branders — de voordeur.

   Dit is Blitz Branders zélf, dus hier staat de huisstijl: room als
   papier, inkt voor de lijn, kobalt als hoofdkleur, en de harde
   offset-schaduw uit de canon in plaats van een zachte blur.

   Letters volgens typografie.md §2: Momo Trust Display voor grote
   koppen (ALLEEN gewicht 400 — Display heeft er maar één, faux-bold
   is verboden), Momo Trust Sans voor body, labels en knoppen, en
   Lilita One uitsluitend als losse sectiekop in hoofdletters. Nooit
   een fontwissel binnen een zin. De
   demo's binnen deze omgeving blijven bewust neutraal — dat is de
   boodschap van de uitlegpagina's, en een demo in kobalt zou die
   tegenspreken.

   Alleen tokens, geen losse kleurwaarden.
   ============================================================ */

/* Op de live site zet SiteLayout --font-cta op Momo Trust Sans (de Quicksand in
   global.css is legacy). Hier hetzelfde, zodat knoppen dezelfde letter dragen. */
:root { --font-cta: var(--font-body); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  /* Display bestaat alleen in 400. Een hogere waarde levert faux-bold op, en dat
     is in ronde 6 al eens synthetisch en lelijk bevonden. */
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;   /* §6: Momo-koppen licht strak */
  margin: 0;
  text-transform: none;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--color-link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--bb-diepblauw); }

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

:focus-visible { outline: var(--border-bold) solid var(--bb-diepblauw); outline-offset: 3px; }

/* `--kolom` is de max-breedte INCLUSIEF de zijpadding, zodat een blok zijn eigen maat
   kan zetten zonder dat de standaard verschuift. 1120 − 2×32 = 1056 inhoud: de maat van
   de voordeur, en die blijft — de handoff zet de voordeur bij "akkoord, blijft zoals het
   is". Britt 19-09: de uitlegpagina en de gedeelde voet gaan naar de 1116 uit de handoff
   (1116 + 2×32 = 1180). Die blokken staan hieronder bij elkaar, niet verspreid. */
.omhulsel { width: 100%; max-width: var(--kolom, 1120px); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 640px) { .omhulsel { padding: 0 var(--space-5); } }

/* De brede kolom, op één plek. README van de handoff: "Uitlegpagina · de vijf blokken
   (1440, inhoud 1116px)" en "Voet … Inhoud 1116px". `.paginakop` hoort erbij: in de
   referentie draagt de kop dezelfde `.in` van 1116, en 30px verschil tussen de h1 en de
   blokken eronder leest als een fout.
   De voet is gedeeld en staat dus óók op de voordeur 30px breder dan de inhoud daarboven —
   dat is de zichtbare gevolgtrekking van deze regel, gemeten en gemeld, geen ongeluk.
   Onder 1180px doet `--kolom` niets: dan wint `width: 100%` en blijft alles gelijk. */
.voet,
.paginakop,
.uitleg-pijn,
.uitleg-werk,
.uitleg-twee,
.uitleg-slot { --kolom: 1180px; }

.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------- kop ---------- */
/* ÉÉN nav voor alle vier de pagina's, in de crème vorm van het overzicht.
   Britt 19-09 op haar screenshots: "Trek de navigatie op het overzicht en de drie
   uitlegpagina's gelijk. Gebruik de crème navigatie van het overzicht als uitgangspunt
   (…) Alleen de actieve pagina verschilt."

   Wat hier vóór stond: de site-logica uit Nav.astro — hero-pagina zwevend, subpagina's
   met een diepblauwe band en een hand-gesneden bandrand. Op een hub van vier
   gelijkwaardige pagina's leverde dat twee navigaties op: het overzicht crème met de
   mark in kobalt en een kobalt knop, de drie uitlegpagina's diepblauw met de mark in
   room en een snoep knop, 10px hoger door de bandrand. Die splitsing is hiermee weg;
   `is-float`, de bandrand en de diepblauwe variant bestaan niet meer.

   Wat wél per pagina verschilt, en alleen dat: de actieve pagina draagt een snoep-veeg
   achter het woord en `aria-current="page"`.

   De mark staat links en ís home — het wordmark leeft in de voet. Het menu staat
   gecentreerd. Dit raakt alleen de buitenste hubnav; `blitz-balk.css` bínnen de demo's
   blijft ongemoeid. */

.bb-top { position: relative; z-index: 6; width: 100%; }
/* `.bb-band` is nu alleen nog de laag waarop `.bb-band-inner` staat: geen vlak, geen
   rand. De grond van de pagina loopt erdoorheen, precies zoals op het overzicht. */

.bb-band-inner {
  position: relative;
  min-height: 60px;
  padding: var(--space-2) clamp(24px, 2vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
}

.bb-home {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  /* Kobalt, niet room: de band is weg, dus room zou crème op crème zijn. Op de site
     verdwijnt de mark in deze variant omdat daar de lockup boven de kop staat; deze hub
     heeft die lockup niet, dus de mark blijft staan. */
  color: var(--color-primary);
}
.bb-mark { display: block; height: 34px; width: auto; }

.bb-links {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 1.6rem;
  list-style: none; margin: 0; padding: 0;
}
.bb-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 13px;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.bb-word { position: relative; }
.bb-word b { position: relative; z-index: 1; font-weight: var(--weight-semibold); }

/* Actief = een veeg, geen pil. De hoeken zijn ongelijk: het is een streek, geen vorm. */
.bb-veeg {
  position: absolute; inset: -22% -10% -26%;
  background: var(--color-surface-pop-1);
  border-radius: 7px 10px 8px 9px;
  transform: rotate(-1.6deg);
  display: none;
}
.bb-links a[aria-current="page"] .bb-veeg { display: block; }
.bb-links a[aria-current="page"] .bb-word b { color: var(--color-text); }
.bb-links a:hover .bb-word b {
  text-decoration: underline;
  text-decoration-color: var(--color-surface-pop-1);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.bb-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 12px 19px;
  font-family: var(--font-cta); font-weight: var(--weight-bold); font-size: 14.5px;
  color: var(--color-surface); background: var(--color-primary);
  border: var(--border-hair) solid var(--color-border);
  /* Nav.astro zet hier 13px, maar dat is daar een losse tuning van Britt op die ene knop
     en het staat niet op de radius-schaal. De linter telde 'm als vier WARN's op een hub
     die verder op 0 stond, dus: de schaalwaarde. */
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--color-border);
  text-decoration: none; white-space: nowrap;
}
.bb-cta:hover { background: var(--bb-diepblauw); color: var(--color-surface); }

.bb-home:focus-visible, .bb-links a:focus-visible, .bb-cta:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px;
}

/* Onder 900px past een gecentreerd menu niet naast de mark en de knop: dan gaat
   het menu op een eigen regel ónder mark en knop.
   Britt 26-09 (gebundelde ronde, plaat 3): `order` en `flex-basis` stonden op `.bb-links`, maar
   die is geen kind van `.bb-band-inner` (de `nav` is dat). Het menu bleef dus naast de mark
   staan en de knop sprong naar een losse rechterrij, met daaronder de volle bovenlucht van de
   pagina (gemeten op 390: balk 125 hoog, op 320 zelfs 243). Nu: rij 1 de mark links en de knop
   rechts (waar op de site de menuknop staat), rij 2 het menu; de kolomruimte tussen de vier
   woorden krimpt mee zodat ze op 320 op één regel passen, en de eerste inhoud volgt korter na
   de balk (zie `.hero` en `.paginakop`). */
@media (max-width: 900px) {
  .bb-band-inner { flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding-bottom: var(--space-2); }
  .bb-nav { order: 3; flex-basis: 100%; }
  .bb-links { position: static; left: auto; top: auto; transform: none; gap: 0 clamp(12px, 3.4vw, 1.1rem); flex-wrap: wrap; }
  .bb-cta { margin-left: auto; }
}

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

.hero { padding: var(--space-8) 0 var(--space-6); }
/* De canon-kicker (components/ui/SectionHeader.astro): Lilita One, hoofdletters,
   kobalt, klein. Dit is de énige plek waar Lilita hoort — niet in een kop. Het
   expliciete gewicht 400 is nodig omdat Lilita één echt gewicht heeft en de
   browser anders vet synthetiseert. */
.kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-lilita);
  text-transform: uppercase;
  /* Diepblauw, niet kobalt — zo staat de kicker op /binnenkort en op de site.
     Kobalt haalt op creme wel het contrast (5,40:1), maar het is een andere
     stem: hier hoort de donkere variant. */
  color: var(--color-primary-deep, var(--bb-diepblauw));
}
/* Op een donkere grond is kobalt niet leesbaar; daar draagt snoep de kicker. */
.band .kicker { color: var(--color-surface-pop-1); }
/* Kop in INKT, niet in kobalt. Het token heet weliswaar "primary: mark, koppen,
   knop", maar zo wordt het op de site niet gebruikt: daar staan 21 van de 22
   koppen in inkt en draagt kobalt alleen accenten (gemeten 31-08). Een kobalt
   H1 was hier het tweede grote verschil met de site, naast de volle band. */
/* Terug naar de maat van de site-hero. Britt 14-09: de voordeur was op
   --text-hero "heel schreeuwerig". De veeg is gelockt als device, de omvang
   niet — nu 54px op desktop, één kernwoord. */
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.06; color: var(--color-text); max-width: 22ch; }
.hero__lead { margin-top: var(--space-5); max-width: 58ch; font-size: 1.1875rem; line-height: 1.55; }

/* De veeg: gelockte merk-signatuur (DECISIONS 2026-08-26) — één snoep streek achter één
   kernwoord in de kop. Recept letterlijk overgenomen van `.eh-veeg` in
   03-website/src/styles/marketing-pages.css, inclusief de insets en de em-radius: die
   hugt het woord, terwijl een gewone achtergrond op het element de héle regelbox vult en
   op hero-schaal een blok van 110px wordt (op pixels gemeten, eerste poging 31-08).
   Het woord gaat naar inkt: kobalt op snoep haalt 4,20:1, inkt op snoep 12,7:1. */
.hero h1 .veeg {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  color: var(--color-text);
}
.hero h1 .veeg::before {
  content: "";
  position: absolute;
  inset: 4% 0 -1% -0.12em;
  z-index: -1;
  background: var(--color-surface-pop-1);
  border-radius: 0.14em 0.22em 0.16em 0.2em;
  transform: rotate(-1.6deg);
}

/* Vormen naast de kop. Op smalle schermen vallen ze weg: daar is de kop het beeld. */
.hero__omhulsel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; }
.hero__vormen { position: relative; width: 260px; height: 210px; }
.hero__vorm { position: absolute; }
.hero__vorm--ster { width: 96px; top: 2px; right: 16px; }
.hero__vorm--vlinder { width: 84px; bottom: 24px; right: 128px; }
.hero__vorm--vonk { width: 46px; bottom: 48px; right: 24px; }
@media (max-width: 900px) {
  .hero__omhulsel { grid-template-columns: minmax(0, 1fr); }
  .hero__vormen { display: none; }
  /* Britt 26-09: de balk is op smal twee rijen hoog; de kop volgt er korter op (32 in plaats van 64). */
  .hero { padding-top: var(--space-6); }
}

/* ---------------------------------------------- kaarten ------ */
/* HIER STOND EEN KAARTENRIJ. Weg op 19-09, na een doosmeting vóór en ná.
   Het waren `.rij` (drie kolommen) plus het hele `.demokaart*`-blok: de opmaak van de
   vórige voordeur, die op 13-09 vervangen is door de regels zonder doos (DECISIONS).
   `demokaart` kwam 0× voor in `build.mjs`, dus die kant was alleen dood gewicht.
   `.rij` was erger dan dood: díe klasse draagt sinds 13-09 de voordeurregel, dus twee
   verschillende componenten deelden één naam. De regel hieronder won op wat ze allebei
   zetten, maar `row-gap: 32px` en de mobiele regel `grid-template-columns: 1fr` kwamen
   uit de kaartenrij en werkten stil door op de regels. Gemeten: 409 dozen op 1440 én op
   390, alle posities en maten byte-gelijk vóór en ná. */

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

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-semibold);
  text-decoration: none; cursor: pointer;
  border: var(--border-hair) solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-offset-sm);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.knop:active { transform: translate(2px, 2px); box-shadow: var(--shadow-offset-press); }
@media (prefers-reduced-motion: reduce) { .knop { transition: none; } }
.knop--hoofd { background: var(--color-primary); color: var(--color-on-primary); }
.knop--hoofd:hover { background: var(--bb-diepblauw); color: var(--color-on-primary); }
.knop--tweede { background: var(--color-surface); color: var(--color-text); }
.knop--tweede:hover { background: var(--bb-iris); color: var(--color-text); }
.knop--licht { background: var(--color-surface); color: var(--color-text); }

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

.sectie { padding: var(--space-7) 0; }
.sectie--strak { padding: var(--space-6) 0; }
.sectie__kop { max-width: 60ch; margin-bottom: var(--space-6); }
.sectie__kop h2 { font-size: var(--text-h2); }
.sectie__kop p { margin-top: var(--space-4); color: var(--bb-roet); }

/* De afsluitende band volgt components/ui/CTASection.astro met tone="diepblauw":
   een full-bleed sectie waarvan de grond het vlak ís. Geen rand, geen radius,
   geen schaduw — dat maakt er een kaart van, en een kaart is het niet. */
/* Diepblauw, zoals de afsluiter op de site. Op kobalt haalt de snoep-kicker het
   contrast niet (gemeten 4,15:1, AA vraagt 4,5), en de kicker op een donkere
   grond hóórt snoep te zijn. Dus de grond wijkt, niet de kicker.
   De naad met de even diepblauwe voet wordt gezet door de hand-gesneden rand
   bovenaan die voet — geen lijn, een streek. */
.band {
  padding-block: clamp(var(--space-8), 7vw, var(--space-9));
  background: var(--color-surface-deep);
  color: var(--color-text-on-deep);
}
.band__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4);
}
.band h2 {
  /* Kop = Momo Trust Display, altijd 400 — net als op de site. Lilita is de
     kicker erboven, nooit de kop zelf. */
  font-size: var(--text-h2);
  color: var(--color-text-on-deep);
}
.band ul {
  margin: var(--space-2) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-4); max-width: var(--maxw-prose); text-align: left;
}
/* `align-items: start` staat er expliciet bij: zonder die regel erft een `.band li` de
   grid-standaard `normal`, en dan is de uitlijning van het teken formeel een andere dan
   die van `.lst li`. Zichtbaar maakte het niets uit (het teken heeft een vaste 12px), maar
   "dezelfde uitlijning" is onderdeel van één opsommingsvorm, dus het wordt gezegd. */
.band li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; }
/* Het teken zelf staat niet hier maar één keer, verderop bij `.lst` — zie daar.
   Geschiedenis van deze plek: eerst een losse stip van 12px (02-09 uit de vormtaal),
   daarna een streek. Britt keurde 19-09 de streepjes af, dus deze band deelt nu
   hetzelfde vierkantje als de uitlegblokken. */

/* De twee acties staan binnen de band (15-09), zodat band en voet één
   diepblauw slotblok vormen. Op diepblauw krijgt de tweede knop het lichte
   vlak: een kaartwit vlak op diepblauw leest als knop, niet als gat. */
.band__acties { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* De crème variant uit de handoff, ALLEEN op de uitlegpagina (Britt 17-09: dat blok
   daar niet meer diepblauw). Twee kolommen in plaats van gecentreerd, zoals de vier
   blokken erboven, en een inktlijn boven — de diepblauwe voet volgt er direct op, dus
   die lijn is de scheiding. De voordeur houdt de diepblauwe band: die staat in de
   handoff bij "akkoord, blijft zoals het is". */
.band--licht { background: var(--color-surface); color: var(--color-text); border-top: var(--border-hair) solid var(--color-border); padding: 80px 0 72px; }
.band--licht .band__inner { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 80px; align-items: start; text-align: left; }
.band--licht .kicker { color: var(--color-primary); }
/* `line-height` expliciet: zonder deze regel erft de kop de 1.06 van de globale
   h1/h2/h3-regel en komt hij op 42,4 uit, terwijl het frame 44 tekent (1.1, dezelfde
   verhouding als de vier blokken erboven). Over drie regels scheelt dat 5px. Gemeten
   19-09 tegen `demohub-uitleg-voet.html`; de meting van 18-09 keek hier niet naar de
   regelafstand, alleen naar de korpsgrootte. */
.band--licht h2 { color: var(--color-text); font-size: 40px; line-height: 1.1; }
.band--licht ul { max-width: none; margin: 0; }
.band--licht li { font-size: 17px; line-height: 1.55; color: var(--color-text); }
.band--licht li > span { display: block; }
.band--licht .band__acties { margin-top: 32px; }
@media (max-width: 900px) {
  .band--licht { padding: 48px 0; }
  .band--licht .band__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .band--licht h2 { font-size: 30px; }
  /* Britt 26-09 (gebundelde ronde, plaat 2): op smal de knoppen in het midden van het inhoudsvlak,
     los én per rij als ze afbreken; kicker, kop en de drie regels blijven links. */
  .band--licht .band__acties { justify-content: center; }
}

/* ---------------------------------------------- uitlegpagina - */

.paginakop { padding: var(--space-7) 0 var(--space-6); border-bottom: var(--border-hair) solid var(--color-border); }
/* De terug-link stond op 149×17 en haalde de tikmaat niet. Hij staat alleen in zijn
   alinea, dus de uitzondering voor een link ín een zin geldt hier niet. 44px hoog via
   inline-flex verandert niets aan het uiterlijk — de alinea is toch al een eigen regel. */
.paginakop__terug { font-size: var(--text-small); font-weight: var(--weight-medium); }
.paginakop__terug a { display: inline-flex; align-items: center; min-height: 44px; }
/* Zwart, zoals de kop van het overzicht (`.hero h1`). Britt 26-09 (voice-ronde): de drie uitlegkoppen
   stonden in kobalt; kobalt blijft voor labels, links, knoppen en accenten. */
.paginakop h1 { margin-top: var(--space-4); font-size: var(--text-h1); color: var(--color-text); max-width: 26ch; }
.paginakop__regel { margin-top: var(--space-4); max-width: 56ch; font-size: 1.125rem; }
.paginakop__acties { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Britt 26-09 (gebundelde ronde, plaat 3): op smal de knoppen in het midden van het inhoudsvlak,
   los én per rij als ze afbreken ("Hoe zit dat met mijn eigen stijl?" staat tot 430 op een eigen
   rij); terug-link, kicker, kop en regel blijven links. De kop volgt korter op de balk. */
@media (max-width: 900px) {
  .paginakop { padding-top: var(--space-5, 24px); }
  .paginakop__acties { justify-content: center; }
}

/* Het opsommingsteken is het vierkantje van de site, één bron voor alle blokken.

   Bron: `03-website/src/styles/doorloop.css` (`.dl-lijst`, regel 240 e.v.) — "Staat in
   de maten-tabel van de handoff: 12px vierkant, radius 3, snoep, 1.5px inkt. Komt terug
   in elk venster en elke kaart van de doorloop." Het staat live op `/contact`, `/beheer`
   en `/websites`. Een gekozen vorm dus, geen nieuwe.

   Wat hier eerst stond: een streek van 18×3 met onregelmatige radius onder −1,6°, de
   taal van de veeg. Britt 19-09: "De korte streepjes vóór de teksten voelen voor mij
   niet als BB. Mijn correctie vervangt op dit punt het streeprecept uit de handoff."
   De veeg zelf blijft waar hij hoort — in de nav en achter een kernwoord — maar hij is
   geen opsommingsteken.

   Twee dingen bewust NIET overgenomen van `.dl-lijst`: de tekstmaat (16/1.45) en de
   regelafstand (10px). De hub draagt 16,5/1.55 met 14px, en Britts correctie gaat over
   het teken, niet over de tekst. `margin-top` staat daarom op de regelhoogte in plaats
   van de vaste 5px van de site: `(1.55em − 12px) / 2` centreert het vierkant optisch in
   de eerste regel, ook waar de tekst 17px is (kaart, band) of 15px (grens).

   Er is precies ÉÉN regel die het teken tekent, voor álle opsommingen in de hub: de vier
   uitlegblokken (`.lst`) én de op-maat-band (`.band li`, zowel de diepblauwe op de
   voordeur als de crème op de uitlegpagina's). Die band droeg een eigen streek in een
   eigen kleur — kobalt op crème, snoep op diepblauw — en dat was op één pagina een tweede
   opsommingsvorm naast deze. Wie het teken verandert, verandert het overal. */
.lst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lst li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: 16.5px; line-height: 1.55;
  color: var(--color-text); text-wrap: pretty;
}
.lst li::before,
.band li::before {
  content: ""; width: 12px; height: 12px;
  margin-top: calc((1.55em - 12px) / 2);
  background: var(--color-surface-pop-1);
  border: var(--border-hair) solid var(--color-border);
  border-radius: 3px;
  box-sizing: border-box;
}

/* Blok 1 · pijn — geen kaart. De grond wordt blush over de volle breedte, met een
   inktlijn eronder. Een kaart maakt van een probleem een product. */
.uitleg-pijn {
  background: var(--color-surface-soft);
  border-bottom: var(--border-hair) solid var(--color-border);
  padding: 56px 0 60px;
}
.uitleg-pijn__in { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 80px; align-items: start; }
.uitleg-pijn h2 { font-size: 34px; line-height: 1.1; margin: 0; text-wrap: balance; }
.uitleg-pijn__vorm { width: 56px; height: 56px; margin-top: 22px; display: block; }
/* KLEURVARIANT VOOR DE BLUSH GROND — alleen de vulling, verder niets.

   Britt 19-09: "Eén opsommingsvorm betekent dezelfde geometrie, maat, rand en
   uitlijning. Een kleurvariant voor een andere ondergrond mag, zolang die uit het
   BB-palet komt en consequent wordt toegepast."

   Geometrie, maat, radius, de 1,5px inktrand en de uitlijning komen ongewijzigd uit de
   gedeelde regel bij `.lst`. Hier wisselt uitsluitend `background` van snoep naar
   kobalt.

   Waarom: het teken is op ware grootte beoordeeld, mét de inktrand, naast hetzelfde
   teken op vlak, room en diepblauw. Op die drie leest de snoepvulling als vulling; op
   blush niet, en dan wordt het vierkant een leeg selectievakje — precies de vorm die uit
   deze hub moest. Het contrastgetal was de aanleiding om te kijken, de plaat was het
   oordeel (snoep op blush 1,19:1, op vlak 1,40, op room 1,30; kobalt op blush 4,94:1).

   De regel hangt aan de GROND, niet aan dit blok: elke opsomming op blush krijgt kobalt.
   `.uitleg-pijn` is vandaag de enige blush grond mét een opsomming — de andere blush in
   deze hub is de hover-wash op de voordeurregels, en die draagt geen lijst. Komt er een
   tweede blush blok met een lijst, dan hoort die selector hierbij. */
.uitleg-pijn .lst li::before { background: var(--color-primary); }

/* Blok 2 · werking — dé kaart, en de enige met een plaat. Dit is wat het systeem
   doet, dus dit is het blok dat naar voren mag komen. */
.uitleg-werk { padding: 72px 0 0; }
.uitleg-kaart {
  position: relative;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 80px; align-items: start;
  margin-right: 8px; padding: 40px 44px;
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 6px 7px 0 var(--bb-snoep), 6px 7px 0 var(--border-hair) var(--color-border);
}
.uitleg-kaart h2 { font-size: 34px; line-height: 1.1; margin: 0; text-wrap: balance; }
.uitleg-kaart__vorm { position: absolute; right: -18px; top: -30px; width: 76px; height: 76px; }
.uitleg-kaart .lst li { font-size: 17px; }

/* Blok 3 + 4 naast elkaar: het register breed, de grens smal ernaast.
   `padding-block` en niet de shorthand: dit element ís het omhulsel, en een
   shorthand zette de zijpadding op nul. Op 390 liep de grens daardoor 390 breed in
   plaats van 342 — dus tot tegen de schermrand. Gemeten tegen het frame. */
.uitleg-twee { padding-block: 64px 88px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 80px; align-items: start; }

/* Blok 3 · probeer — een genummerd register, geen opsomming. Het zijn stappen die
   je in volgorde doet, dus <ol> en niet <ul>. */
.uitleg-probeer h2 { display: flex; align-items: center; gap: 14px; font-size: 34px; line-height: 1.1; margin: 0; }
.uitleg-probeer h2 img { width: 40px; height: 40px; flex: none; }
.uitleg-reg { list-style: none; margin: 20px 0 0; padding: 0; border-top: var(--border-hair) solid var(--color-border); }
.uitleg-reg li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px;
  padding: 18px 0; border-bottom: var(--border-hair) solid var(--color-border); align-items: start;
}
.uitleg-reg__nr { font-family: var(--font-accent, var(--font-display)); font-weight: 400; font-size: 22px; line-height: 1; color: var(--color-primary); padding-top: 3px; }
.uitleg-reg p { margin: 0; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

/* Blok 4 · grens — stil, roet, geen vlak en geen rand. Een noot bij de demo, geen
   functielijst; daarom kleiner en zachter dan het register ernaast. */
.uitleg-grens { padding-top: 6px; }
.uitleg-grens__vorm { width: 44px; height: 44px; margin-bottom: 14px; display: block; }
.uitleg-grens h2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0; color: var(--color-text); }
.uitleg-grens .lst { margin-top: 18px; gap: 12px; }
/* De tekst blijft kleiner en zachter — dat is de rol van dit blok. Het teken zelf niet:
   dat is dezelfde 12px snoep met inktrand als in de andere drie blokken, en het zakt via
   de `calc` in de basisregel vanzelf mee met deze 15px. */
.uitleg-grens .lst li { font-size: 15px; color: var(--bb-roet); }

@media (max-width: 900px) {
  .uitleg-pijn { padding: 40px 0 44px; }
  .uitleg-pijn__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .uitleg-pijn h2, .uitleg-kaart h2, .uitleg-probeer h2 { font-size: 27px; }
  .uitleg-werk { padding: 44px 0 0; }
  .uitleg-kaart { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 22px 24px; }
  .uitleg-kaart__vorm { width: 56px; height: 56px; right: -10px; top: -24px; }
  .uitleg-twee { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 44px 56px; }
}

/* ---------------------------------------------- voet --------- */
/* Structuur van voet E van de site (Footer.astro), inhoud van de hub. Room op
   diepblauw is 8,47 AAA.

   15-09: hier stond "links in mono", en dat was een misgelezen spiegel. De site zet
   `--font-mono` op een stack die dáár als Momo Trust Sans uitkomt; de token-kopie in
   deze demo stond nog op `ui-monospace`, dus de voet van de hub stond in blokletters
   terwijl de site dat niet doet. Nu expliciet de sans.

   19-09: van een gecentreerde kolom naar het groepenraster van de handoff. */

.voet {
  background: var(--color-surface-deep);
  color: var(--color-text-on-deep);
  border-top: var(--border-hair) solid var(--color-border);
}
.voet a {
  color: var(--color-text-on-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  position: relative;
}
/* Onderstreping als pseudo-element in plaats van een border: een border zou de
   raakvlakhoogte van 44px zichtbaar maken als een streep over de volle regel. */
.voet a:hover::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px;
  height: 2px; background: var(--bb-snoep);
}
.voet a:focus-visible { outline: 2px solid var(--color-surface); outline-offset: 3px; border-radius: 2px; }

/* design-qa meldt hier WARN `kaart-rij-ritme` (34px hoogteverschil tussen de twee
   groepen). Dat blijft staan: die regel bewaakt een kaartenrij, en dit is een
   navigatiekolom. De ene groep heeft vier links en de andere drie, dus één regel
   verschil — gelijktrekken zou een lege regel in een voet betekenen. */
.voet__groepen {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px 260px; gap: 0 56px;
  padding: 112px 0 20px; align-items: start;
}
.voet__lockup { width: 200px; height: auto; display: block; margin-top: 8px; }

.voet__groep { position: relative; padding-top: 8px; }
/* Twee vormen over elkaar: rust zichtbaar, wakker op nul. De hele groep wisselt ze,
   dus ook wanneer de focus via het toetsenbord ergens in de groep landt. */
.voet__vormen { position: absolute; left: 0; top: -58px; width: 48px; height: 48px; display: block; }
.voet__vorm { position: absolute; inset: 0; width: 48px; height: 48px; transition: opacity var(--dur-quick, 0.16s) var(--ease-out); }
.voet__vorm--wakker { opacity: 0; }
.voet__groep:hover .voet__vorm--rust,
.voet__groep:focus-within .voet__vorm--rust { opacity: 0; }
.voet__groep:hover .voet__vorm--wakker,
.voet__groep:focus-within .voet__vorm--wakker { opacity: 1; animation: voet-wiebel 0.62s var(--ease-out); }
@keyframes voet-wiebel { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

.voet__groepkop {
  font-family: var(--font-accent, var(--font-display)); font-weight: 400;
  font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--bb-snoep); margin: 0;
}
.voet__groep ul { list-style: none; margin: 8px 0 0; padding: 0; }
.voet__groep a { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.2; min-height: 34px; }
.voet__pijl { margin-left: 6px; font-size: 13px; color: var(--bb-snoep); display: inline-block; transition: transform var(--dur-quick, 0.16s) var(--ease-out); }
.voet__ext:hover .voet__pijl { transform: translate(2px, -2px); }

/* De onderregel is `space-between`: noot links, socials rechts. De handoff zet er
   rechts ook "Demo terugzetten" bij en zegt er zelf bij: staat die knop al elders, haal
   hem hier weg. Hij staat in élke demo op de beheerpagina, waar ook werkelijk iets te
   resetten valt — de noot verwijst ernaar. */
.voet__onder {
  border-top: var(--border-hair) solid rgba(245, 239, 225, 0.3); padding: 18px 0 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.voet__noot {
  margin: 0; font-family: var(--font-sans); font-weight: 500;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-on-deep-muted, rgba(245, 239, 225, 0.78));
  max-width: 62ch;
}

/* De drie kanalen. Het ontwerp tekent ronde plaatshouders van 40px met een gestippelde
   rand en de letters IG/LI/FB, en zegt erbij: vervangen door de echte iconen. Dat zijn
   `SocialIcoon.astro` in de room-variant — dezelfde tekening als de site-voet, dus geen
   rand en geen rondje eromheen: de vorm ís het icoon.
   Het raakvlak is 44×44 en niet de 40 van de plaatshouder; dat is onzichtbaar (het icoon
   blijft 34px, gelijk aan de site) en haalt de tikmaat met ruimte over. */
.voet__socs { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.voet a.voet__soc { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
/* De hover-streep van de tekstlinks hoort niet onder een icoon. */
.voet a.voet__soc:hover::after { display: none; }
.voet__socicoon {
  width: 34px; height: 34px; overflow: visible; opacity: 0.92;
  transition: opacity var(--dur-quick, 0.16s) var(--ease-out), translate var(--dur-quick, 0.16s) var(--ease-out);
}
.voet__soc:hover .voet__socicoon { opacity: 1; translate: 0 -2px; }

@media (max-width: 900px) {
  .voet__groepen { grid-template-columns: 1fr 1fr; gap: 44px 20px; padding: 44px 0 16px; }
  .voet__lockup { grid-column: 1 / -1; width: 170px; margin: 0; }
  .voet__groep { padding-top: 0; margin-top: 52px; }
  .voet__vormen, .voet__vorm { width: 38px; height: 38px; }
  .voet__vormen { top: -46px; }
  .voet__onder { padding: 16px 0 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .voet__vorm, .voet__pijl, .voet__socicoon { transition: none; }
  .voet__soc:hover .voet__socicoon { translate: none; }
  .voet__groep:hover .voet__vorm--wakker,
  .voet__groep:focus-within .voet__vorm--wakker { animation: none; }
}

/* ═══ Voordeur-regels, dialoog en flow-beeld ═══════════════════════════
   Geport uit 03-website/src/pages/labs/hub-voordeur-dialoog.astro op 14-09,
   nadat Britt het daar had goedgekeurd. Drie gelockte besluiten zitten hierin:
   de regels dragen zonder doos (13-09), het flow-beeld is transparant (14-09),
   en hover verkleurt de hele regel in plaats van twee losse onderstrepingen
   (14-09). Zie 01-brand/design-system/DECISIONS.md.
   ═══════════════════════════════════════════════════════════════════ */
  /* ── de regels: geen doos, geen object ───────────────────────────────── */
  .rij-lijst { list-style: none; margin: 0; padding: 0; }
  .rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-5);
    border-block-start: 1.5px solid var(--color-text);
  }
  .rij:last-child { border-block-end: 1.5px solid var(--color-text); }
  /* De hele regel is één klikdoel. Dat is geen doos: er is geen rand, geen radius
     en geen schaduw — alleen de haarlijnen die er toch al staan. */
  .rij-link {
    grid-column: 1;
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-6);
    color: inherit;
    text-decoration: none;
  }
  .rij-kicker {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-soft);
  }
  .rij-naam {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
  }
  .rij-regel { color: var(--color-text-soft); max-width: 54ch; }
  .rij-meer {
    margin-block-start: var(--space-2);
    font-weight: 600;
    color: var(--bb-blauw);
  }
  .rij-nr {
    grid-column: 2;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bb-blauw);
    justify-self: end;
    padding-block-start: var(--space-6);
  }
  /* ── hover: de hele regel verkleurt ──────────────────────────────────
     19-09 hersteld: hier ontbrak de OPENING `/*` van dit commentaar. Bij het
     porten uit de Astro-`<style>` op 14-09 is de eerste regel weggevallen. De
     CSS-parser las daardoor alles van hier tot de eerstvolgende `{` als één
     selector — inclusief `.rij` — en gooide de regel eronder weg. Gemeten in de
     CSSOM van de browser: twee `.rij`-regels, geen enkele met `transition`. De
     wash sprong dus hard aan en uit in plaats van te verlopen.
     De wash loopt iets buiten de tekst en houdt de haarlijnen heel; het is een
     staat, geen kaart. Daarom geen rand en geen schaduw — de drager blijft
     "geen doos" (DECISIONS 13-09). */
  .rij {
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, ease);
  }
  /* `.rij` is de ouder van de link, niet het kind — vandaar :hover op de regel
     zelf plus :focus-within voor het toetsenbord. */
  .rij:hover,
  .rij:focus-within {
    background-color: var(--color-surface-soft);
    box-shadow: 0 0 0 var(--space-3) var(--color-surface-soft);
  }
  @media (prefers-reduced-motion: reduce) {
    .rij { transition: none; }
  }
  .rij-link:focus-visible {
    outline: 2px solid var(--color-focus, var(--bb-blauw));
    outline-offset: -4px;
  }
  /* ── de dialoog ──────────────────────────────────────────────────────── */
  .dlg {
    /* GEEN position hier. Een modale <dialog> krijgt van de browser zelf
       `position: fixed; inset: 0; margin: auto` — en dát is wat hem centreert.
       Ik had er `position: relative` op gezet om de sluitknop te kunnen plaatsen;
       daarmee viel hij uit de fixed-laag en plakte hij linksboven (Britt zag het,
       ik niet — het stond ook op mijn eigen platen). Een fixed element is zelf al
       een containing block, dus de absolute sluitknop werkt gewoon. */
    /* Gemeten: de computed margin stond op 0 terwijl de browser-stylesheet
       `margin: auto` geeft — ergens in de site-CSS wordt hij genuld. Met
       inset 0 aan alle kanten en margin 0 is de doos over-bepaald en wint
       links/boven, dus plakt hij in de hoek. Expliciet terugzetten. */
    margin: auto;
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-lg, 16px);
    padding: 0;
    max-inline-size: min(64rem, calc(100vw - 2 * var(--space-4)));
    inline-size: 100%;
    max-block-size: calc(100vh - 2 * var(--space-6));
    background: var(--color-surface);
    color: var(--color-text);
    overflow: auto;
  }
  .dlg::backdrop { background: rgb(47 54 161 / 0.55); }
  /* Stond sticky en viel daardoor half buiten de dialoog. Nu absoluut binnen de
     dialoog zelf, dus altijd op zijn plek en altijd boven de plaat. */
  .dlg-sluit-form { position: absolute; top: 0; right: 0; z-index: 3; }
  .dlg-sluit {
    min-inline-size: 44px;
    min-block-size: 44px;
    margin: var(--space-3);
    border: 1.5px solid var(--color-text);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .dlg-sluit:focus-visible { outline: 2px solid var(--color-focus, var(--bb-blauw)); outline-offset: 2px; }
  /* Gemeten 13-09: met plaat bóven tekst stond "Open de demo" op y=1193 in een
     scherm van 1000px — de belangrijkste knop viel buiten beeld, en dat sloopt
     precies de reden dat deze dialoog bestaat. Vanaf 900px dus naast elkaar. */
  .dlg-inhoud { display: grid; }
  @media (min-width: 900px) {
    .dlg-inhoud { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: start; }
    .dlg-kolommen { grid-template-columns: 1fr; gap: var(--space-6); }
  }
  /* Transparant: geen eigen vlak en geen rand meer om het beeld. Britt 14-09:
     "ik denk dat de diagram gewoon transparant met de punten erbij rustiger
     oogt." Het beeld staat nu direct op de room-grond van de dialoog. */
  .dlg-plaat { margin: 0 var(--space-4); }
  .fb-grens { fill: none; stroke: var(--color-text); stroke-width: 1.5; }
  /* Gewichten expliciet: Momo Trust Sans is variabel (200-800), Lilita bestaat
     alleen in 400. Een gewicht dat niet bestaat is faux-bold en dat blokkeert. */
  /* Kicker volgens de canon: Lilita One, hoofdletters, kobalt, gewicht 400.
     Nu de kaart weg is draagt dit accent het verschil tussen wat jij doet en
     wat er daarna gebeurt. Britt 14-09: "waarom moet alles weer op kaarten?" */
  .fb-label {
    font-family: var(--font-accent);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.12em;
    fill: var(--color-primary);
  }
  .fb-handeling { font-family: var(--font-display); font-size: 21px; font-weight: 400; fill: var(--color-text); }
  .fb-gevolg { font-family: var(--font-body); font-size: 16px; font-weight: 600; fill: var(--color-text); }
  .fb-nr {
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: 19px;
    fill: var(--color-surface);
    text-anchor: middle;
  }
  .fb-knoop-druk { fill: var(--color-surface-pop-1); mix-blend-mode: multiply; }
  .fb-knoop { fill: var(--color-primary); }
  .fb-knoop-rand { fill: none; stroke: var(--color-text); stroke-width: 3; stroke-linejoin: round; }
  /* Op 390 staat de dialoog van rand tot rand; met 16px zijruimte meldde de
     meetlat op 14-09 "5px tussen de tekst en de rand" op de kaderzin. 24px
     geeft de letters lucht van de rand van het paneel. */
  .dlg-body { padding: var(--space-6) var(--space-5) var(--space-6); }
  @media (min-width: 900px) {
    /* De plaat is breedbeeld (1280×800) en dus laag; bovenaan uitlijnen liet ~450px
       dode ruimte eronder staan en dat leest als onaf. Verticaal centreren verdeelt
       de lucht en maakt het een bewuste marge in plaats van een restje. */
    /* Het beeld stond verticaal gecentreerd; dat kwam uit de tijd dat er een
       breedbeeld-schermafdruk in zat. Het beeld is nu hoog en smal, dus centreren
       duwde het naar beneden met een gat erboven. Britt 14-09: "hij moet verder
       naar boven." Nu bovenaan uitgelijnd, gelijk met de tekst ernaast. */
    /* 15-09: "ik wil dat die jij doet dit sectie gewoon op 1 lijn komt met de
       een veld bijwerken sectie." Bovenaan uitlijnen deed dat nog niet: de
       viewBox heeft 10 eenheden dode ruimte boven de eerste kaart, waardoor
       JIJ DOET DIT op 58 stond en het label ernaast op 71. De offset zet die
       twee op één regel; hij staat als variabele zodat hij bij een wijziging in
       de plaat op één plek verschuift. */
    .dlg-plaat { margin-inline-start: var(--space-4); align-self: start;
                 margin-block-start: var(--plaat-lijn, 13px); }
    .dlg-body { padding-block-start: var(--space-6); padding-inline-end: var(--space-6); }
  }
  /* Het label zegt in twee woorden wat dit scherm is. Britt 13-09: "het is gewoon
     heel belangrijk dat we aangeven dat dit zomaar voorbeelden zijn van
     mogelijkheden, niet dat dit een systeem is wat af is." */
  .dlg-label {
    display: inline-block;
    background: var(--color-surface-pop-1);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
  }
  .dlg-kader {
    color: var(--color-text-soft);
    margin: 0 0 var(--space-6);
    /* `max-width: 60ch` is een maximum en geen begrenzing: op 390 rekende de
       ch-maat van de variabele letter breder dan de kolom, en dan steekt de
       tekstdoos 3px buiten het paneel. `min(…, 100%)` kan dat niet. */
    max-inline-size: min(60ch, 100%);
  }
  .dlg-kicker {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-soft);
    margin: 0 0 var(--space-2);
  }
  .dlg-kop {
    font-family: var(--font-display);
    font-weight: 400;
    /* 1.75rem gaf 28px op 390 en de canon-typeschaal staat daar 25,6px toe. */
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.1;
    margin: 0 0 var(--space-2);
  }
  .dlg-regel { color: var(--color-text-soft); margin: 0 0 var(--space-3); max-width: 60ch; }
  .dlg-kolommen { display: grid; gap: var(--space-6); }
  /* Alleen op de smalle band waar plaat en tekst nog boven elkaar staan. Vanaf
     900px staan ze naast elkaar en zou dit de tekstkolom op 210px zetten. */
  @media (min-width: 760px) and (max-width: 899px) {
    .dlg-kolommen { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  }
  /* Gemeten 13-09: deze h3 erfde rgb(247,244,237) uit de site-CSS — room op room,
     contrast ≈1:1, dus in de praktijk onzichtbaar. De design-linter ving het niet,
     want die opent de dialoog nooit en meet dus alleen wat dicht zit. */
  .dlg-subkop {
    color: var(--color-text);
    /* h3 erft sitebreed het display-font, en dat bestaat alleen in 400 — met
       font-weight 700 werd dat faux-bold. Dit is een klein kapitaal-label, dus
       het bodyfont (variabel 200-800) is hier sowieso het juiste. */
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 var(--space-3);
  }
  /* Gemeten 13-09: alles in de dialoog stond op 955px, de lijstregels op 971.
     De 16px inspringing was ruimte voor een opsommingsteken dat een globale reset
     op `list-style: none` zet — dus inspringen zonder bolletje. Weg ermee. */
  /* De markering is dezelfde snoep als de schaduw onder de knoop, zodat oog en
     tekst elkaar vinden zonder uitleg. Het nummer staat er klein bij. */
  .dlg-zin { margin: 0; max-width: 58ch; }
  /* Zelfde constructie als de gelockte veeg (`marketing-pages.css .eh-veeg`):
     een ::before erachter in plaats van een achtergrond op de tekst zelf. Een
     achtergrond mét padding gaf 2px tussen letter en vlakrand (design-qa
     `vlak-zonder-marge`, BLOCK) en een radius van 3px buiten de schaal. Met een
     laag erachter is er geen zichtbare rand die de letters kan raken. */
  .merk {
    position: relative;
    isolation: isolate;
    /* nowrap zoals de canon-veeg: een markering die over twee regels breekt
       rendert als een sliver, want de laag erachter is één doos. Gezien op de
       plaat van 13-09 — markering 3 was gewoon weg. Daarom zijn de gemarkeerde
       stukken kort gehouden. */
    white-space: nowrap;
    background: none;
    color: var(--color-text);
  }
  .merk::before {
    content: "";
    position: absolute;
    inset: -1px -0.16em -2px -0.16em;
    z-index: -1;
    background: var(--color-surface-pop-1);
    border-radius: 0.16em 0.22em 0.14em 0.2em;
    transform: rotate(-0.7deg);
  }
  .merk sup {
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: 0.7em;
    margin-inline-start: 2px;
    color: var(--bb-diepblauw);
  }
  .dlg-lijst { margin: 0; padding-inline-start: 0; display: grid; gap: var(--space-3); }
  .dlg-lijst li { color: var(--color-text-soft); }
  /* Gemeten 13-09 op drie breedtes × drie demo's: op 1440 viel "Open de demo"
     bij voorraad én planning buiten beeld (938 en 1062 tegen een scherm van 900),
     want de langere demo's maken de kolom hoger. Eerst stond deze balk alleen op
     mobiel vast; dat was te smal gedacht. De hoofdactie hoort altijd bereikbaar te
     zijn — anders doet dit scherm niet waarvoor het bestaat. */
  /* De balk plakt onderaan zodat "Open de demo" altijd in beeld staat (fix van
     13-09). Keerzijde: hij ligt óver de tekst die eronder doorscrolt, en op 390
     sneed hij bij voorraad een zin doormidden — gezien op de plaat van 14-09.
     De ruimte hieronder zorgt dat het einde van de tekst hem hoe dan ook vrij
     komt; halverwege scrollen schuift tekst er nog steeds onderdoor, en dat is
     wat een plakkende balk nu eenmaal doet. */
  .dlg-body { padding-block-end: calc(var(--space-8) + var(--space-5)); }
  .dlg-acties {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
    padding-block: var(--space-4);
    background: var(--color-surface);
    border-block-start: 1.5px solid var(--color-text);
  }
  /* 15-09: deze regel stond ongescoped en overschreef daarmee de hoofdknop op
     élke hubpagina — die werd een pil terwijl de tweede knop ernaast op
     --radius-md bleef staan. Twee vormen naast elkaar in dezelfde rij. Nu
     alleen binnen de dialoog. */
  .dlg .knop--hoofd {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-5);
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-md);
    background: var(--bb-blauw);
    color: var(--color-text-on-deep);
    font-weight: 600;
    text-decoration: none;
  }
  .knop-tekst {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--bb-blauw);
    font-weight: 600;
    text-underline-offset: 4px;
  }
  .knop--hoofd:focus-visible,
  .knop-tekst:focus-visible { outline: 2px solid var(--color-focus, var(--bb-blauw)); outline-offset: 2px; }
  @media (max-width: 720px) {
    /* De sluitknop zat op mobiel bovenop de rechterbovenhoek van de mockup en
       dekte daar bediening af. De plaat zakt onder de knop. */
    .dlg-plaat { margin-block-start: calc(44px + 2 * var(--space-3)); }
    .rij-link { padding-block: var(--space-5); }
    .rij-nr { padding-block-start: var(--space-5); }
    .dlg { max-inline-size: 100%; border-radius: var(--radius-md, 12px); }
  }
/* Twee dingen die de site-CSS gratis gaf en hier niet: de opsomming had bolletjes
   (een globale reset zet die op de site uit) en de subkop plakte tegen de zin
   erboven. Gezien op de plaat van 14-09. */
.dlg-lijst { list-style: none; margin: 0; padding: 0; }
.dlg-subkop + .dlg-zin { margin-block-start: var(--space-2); }
.dlg-zin + .dlg-subkop { margin-block-start: var(--space-5); }
/* De actiebalk plakt onderaan zodat "Open de demo" altijd in beeld staat; zonder
   deze ruimte schuift de laatste regel er half onderdoor. */
.dlg-body { padding-block-end: calc(var(--space-8) + var(--space-5)); }
/* In de site staat deze link zonder onderstreping; hub.css onderstreept alle
   links in lopende tekst. Hier dus expliciet uit, zoals in het lab. */
.dlg-acties .knop-tekst { text-decoration: none; }
.dlg-acties .knop-tekst:hover { text-decoration: underline; }

/* Op een smal scherm sneed de plakkende balk dwars door de lopende tekst: de
   zin onder de kop hield halverwege op, met de rand van de balk erdoorheen.
   Gezien op de plaat van 14-09. De balk plakt daar niet meer — de dialoog is
   op die breedte toch volledig scherm en je scrolt hem sowieso af. Op desktop
   blijft hij plakken, want dáár viel "Open de demo" buiten beeld (fix 13-09). */
@media (max-width: 720px) {
  /* Britt 26-09 (gebundelde ronde, plaat 1): op smal "Open de demo" en "Lees de hele uitleg" in het
     midden van de dialoog, elk op zijn eigen rij als ze afbreken; de tekst erboven blijft links. */
  .dlg-acties { position: static; justify-content: center; }
  .dlg-body { padding-block-end: var(--space-6); }
}