/*
 * Opmaak van de publieke website (pentrical.com).
 *
 * Overgenomen uit de Vue-componenten LandingView.vue en LegalView.vue, die
 * scoped styles gebruikten met .landing respectievelijk .legal als wortel.
 * Die wortelklassen staan in de Blade-sjablonen nog steeds om de regels
 * hieronder ongewijzigd te kunnen laten werken.
 *
 * Pentrical-merkstijl (PENTRICAL_DESIGN_SYSTEM.html) - bewust los van het
 * tenant-thema van de applicatie.
 */

/* ---------------- Basis ----------------
   In de Vue-applicatie kwam dit uit Tailwinds reset, die op elke pagina
   werd meegeladen. Deze stylesheet staat op zichzelf en moet het dus zelf
   meebrengen.

   Zonder border-box telt padding en rand bij de opgegeven breedte op. Alles
   met `width: 100%` — de knoppen in de prijskaarten, de velden van het
   contactformulier — wordt dan breder dan de kolom waar het in staat, en
   steekt eruit of overlapt de buur. De rest van deze stylesheet regelt zijn
   eigen marges en lijstopmaak, dus verder is er geen reset nodig. */
*, *::before, *::after { box-sizing: border-box; }

/* Pentrical-merkstijl (PENTRICAL_DESIGN_SYSTEM.html) — bewust los van het
   tenant-thema. Alle interactieve kleuren zijn AA-combinaties uit de
   tokens (primary-600 op wit, highlight-500 alleen met donkere tekst). */
.landing {
  --p-primary: #21C4F1;
  --p-primary-interactive: #076393;
  --p-primary-dark: #074F63;
  --p-primary-licht: #AFE4FE;
  --p-navy: #044172;
  --p-navy-deep: #0E2538;
  --p-blauw-100: #EAF1FC;
  --p-blauw-200: #BFD7F7;
  --p-warm: #EFEDD7;
  --p-warm-zacht: #F7F6EF;
  --p-mint: #C9E7B8;
  --p-coral: #FF6B45;
  /* Donkerder oranje dan de coral: haalt met witte tekst 4.7 en is dus
     bruikbaar als vlak mét tekst erop, wat de coral niet is. */
  --p-oranje: #CB4801;
  --p-coral-licht: #FFE3D9;
  /* De neutrale grijzen komen uit de grijsladder van tien stappen in
     PENTRICAL_DESIGN_SYSTEM_WEBSITE.html. Die ladder heeft een fractie blauw
     door het grijs gemengd (~220° tint), sterker bij de lichte stappen en
     bijna neutraal bij de donkere — grijs dat gekozen is in plaats van
     overgenomen.

     Welke stap: --p-text is stap 900, --p-muted stap 700, --p-border stap
     200. Die keuze is gemaakt op contrast, niet op naam: --p-muted is hier
     geen lichtgrijze bijschriftkleur maar de kleur van de lopende tekst
     onder een kop, en haalt 8.0 op wit (was 9.2). Stap 600 zou semantisch
     "muted" heten maar zakt naar 5.1, en dat maakt de halve site zichtbaar
     lichter. Wil je hier ooit een lichtere tint: voeg een eigen token toe,
     verschuif deze niet. */
  --p-text: #161718;
  --p-muted: #4F5154;
  --p-border: #D6DAE1;
  /* Het grijs van een invoerveld of keuzemenu. WCAG 2.2 SC 1.4.11 (Non-text
     Contrast) eist 3:1 voor de rand die zo'n bediening herkenbaar maakt, en
     bij een wit veld op een witte kaart is die rand de énige begrenzing —
     er is hier geen tekst of vulling die het kan overnemen. --p-border
     haalt 1.4 en is daarvoor te licht; deze stap (500 uit de ladder) haalt
     3.4 — het lichtste grijs uit de ladder dat de eis nog haalt.

     Een sierrand mag wél licht blijven: kaartomlijningen, scheidingslijnen
     en tabelregels vallen niet onder 1.4.11, want ze wijzen geen bediening
     aan. Daarom twee tokens en niet één donkere voor alles — dat laatste
     zou de hele site zwaarder maken zonder dat het iets oplost. */
  --p-border-bediening: #878C97;
  --p-radius: 16px;
  --p-radius-groot: 28px;
  --p-shadow: 0 12px 32px rgba(22, 23, 24, 0.12);
  --p-shadow-zacht: 0 6px 24px rgba(4, 65, 114, 0.10);

  /* Kleuren voor gemarkeerde woorden in een kop, op lichte achtergronden.
     Op wit halen ze 6,5 en 4,7; op de donkerste lichte achtergrond
     (blauw-200, het blauwe briefje) 4,4 en 3,2. Dat volstaat: alle koppen
     zijn vet en minstens 19px, waarmee 3 : 1 de eis is.
     Op de twee donkere secties zijn ze allebei te donker (blauw zakt daar
     naar 1,4); die krijgen verderop een lichte tegenhanger. */
  --kop-accent-blauw: #076393;
  --kop-accent-oranje: #CB4801;
  /* Cyaan is de lichtste van de drie: 3,2 op wit, net boven de 3 : 1 die
     voor deze vette koppen geldt. LET OP: op de getinte achtergronden zakt
     hij daaronder (2,9 op de demo-sectie, 2,2 op het blauwe briefje). Op wit
     kan hij dus overal, daarbuiten alleen bewust. */
  --kop-accent-cyaan: #189BBF;

  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--p-text);
  background: #fff;
  /* In de Vue-app zat dit in een h-screen-container en scrollde het blok in
     zichzelf (height: 100vh + overflow-y: auto). Als losse pagina scrollt het
     document zelf. min-height houdt de footer onderaan op korte pagina's.

     Let op: géén overflow op dit element. Dat zou er een scroll-container van
     maken en de sticky topbar hieronder stilzetten. Het horizontaal afkappen
     van de hero-blobs gebeurt daarom op html/body. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* `clip`, niet `hidden`. Beide kappen het horizontale overschot van de
   hero-blobs af, maar `overflow-x: hidden` laat de andere as naar `auto`
   berekenen en maakt van body een scroll-container — en dan plakt de topbar
   aan een container die zelf niet scrollt, dus nergens aan. Dat is precies de
   valkuil die hierboven benoemd staat, alleen een regel te laat toegepast.
   `clip` kapt af zonder scroll-container, waardoor sticky blijft werken. */
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.landing > * { flex-shrink: 0; }
.landing main { flex: 1 0 auto; }

.shell { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }

.landing section { scroll-margin-top: 5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus (WCAG 2.2 — zichtbaar en niet afgesneden) */
.landing :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--p-primary-interactive);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; top: -3rem; left: 1rem; z-index: 100;
  background: var(--p-navy-deep); color: #fff; padding: 0.625rem 1rem;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ---------------- Topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.topbar--scrolled { border-color: var(--p-border); box-shadow: 0 4px 20px rgba(22, 23, 24, 0.06); }
/* Omlaag scrollen = balk glijdt weg, omhoog = terug in beeld (site.js). */
.topbar--verborgen { transform: translateY(-100%); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }
.topbar-links { display: flex; align-items: center; gap: 1.5rem; }
.wordmark-logo { height: 2rem; width: auto; }
/* Terugknop op tekstpagina's. Blijft ook op smalle schermen staan: daar
   verdwijnt de navigatie achter het menu, maar juist iemand die vanuit het
   registratiescherm hier belandt moet terug kunnen. */
.terug {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--p-muted); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.terug:hover { color: var(--p-text); }
.terug svg { width: 1.125rem; height: 1.125rem; }
.topnav { display: flex; align-items: center; gap: 1.5rem; }
.topnav a { color: var(--p-muted); text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 0.375rem 0; }
.topnav a:hover { color: var(--p-primary-interactive); }
/* .topnav a wint qua specificiteit van .btn-sm — CTA-padding expliciet terugzetten */
.topnav a.btn-sm { padding: 0.5rem 1.75rem; }
.topnav-login { color: var(--p-text) !important; }

/* Taalschakelaar (EN|NL). Dezelfde vorm als in de applicatie, zodat de
   overstap van website naar app niet als een ander product voelt.
   Twee klassen diep, want `.topnav a` zou anders de padding platslaan. */
.lang-switch {
  display: inline-flex; gap: 0.125rem; padding: 0.1875rem;
  border-radius: 9999px; border: 1px solid var(--p-border);
  background: rgba(255, 255, 255, 0.6);
}
.lang-switch .lang-switch__btn {
  border-radius: 9999px; padding: 0.1875rem 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  color: var(--p-muted); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.lang-switch .lang-switch__btn:hover { color: var(--p-primary-interactive); }
.lang-switch .lang-switch__btn--active {
  background: var(--p-navy-deep); color: #fff;
}
.menu-knop {
  display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer;
  color: var(--p-navy-deep);
}
.menu-knop svg { width: 1.5rem; height: 1.5rem; }
.mobiel-menu {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 1.5rem 1.25rem; border-bottom: 1px solid var(--p-border);
  background: #fff;
  animation: menu-open 0.25s ease-out both;
}
.mobiel-menu a { padding: 0.625rem 0; color: var(--p-text); text-decoration: none; font-weight: 600; }
.mobiel-taal { padding: 0.5rem 0; }
/* Items komen in rap tempo één voor één binnen */
.mobiel-menu > * { animation: menu-item-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.mobiel-menu > *:nth-child(1) { animation-delay: 0.05s; }
.mobiel-menu > *:nth-child(2) { animation-delay: 0.1s; }
.mobiel-menu > *:nth-child(3) { animation-delay: 0.15s; }
.mobiel-menu > *:nth-child(4) { animation-delay: 0.2s; }
.mobiel-menu > *:nth-child(5) { animation-delay: 0.25s; }
.mobiel-menu > *:nth-child(6) { animation-delay: 0.3s; }
.mobiel-menu > *:nth-child(7) { animation-delay: 0.35s; }
.mobiel-menu a.btn { margin-top: 0.875rem; padding: 0.75rem 1.5rem; }
/* In het uitklapmenu staan de items onder elkaar; zonder dit rekt de pil
   over de volle breedte uit en is het geen pil meer. */
.mobiel-menu .lang-switch { align-self: flex-start; margin: 0.375rem 0; }
@keyframes menu-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes menu-item-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
/* `:not([hidden])` is hier de kern, niet netheid. Het hidden-attribuut werkt
   via een browserregel (`[hidden] { display: none }`) die door élke eigen
   display-regel verslagen wordt. Stond hier kaal `display: flex`, dan stond
   het menu op smalle schermen altijd open en deed de knop zichtbaar niets.
   Voor de knop geldt hetzelfde omgekeerd: die hoort verborgen te blijven tot
   het script hem aanzet, anders bedient hij zonder JavaScript een menu dat
   niet open kan. */
@media (max-width: 860px) {
  .topnav { display: none; }
  .menu-knop:not([hidden]) { display: inline-flex; }
  .mobiel-menu:not([hidden]) { display: flex; }
}

/* ---------------- Knoppen ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; font-weight: 700; text-decoration: none; border: 0;
  padding: 0.75rem 1.5rem; font-size: 1rem; font-family: inherit; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-sm { padding: 0.5rem 1.75rem; font-size: 0.9375rem; }
.btn-lg { padding: 0.9375rem 1.875rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-pijl { width: 1.125rem; height: 1.125rem; transition: transform 0.2s; }
.btn:hover .btn-pijl { transform: translateX(4px); }
.btn-primary { background: var(--p-primary-interactive); color: #fff !important; box-shadow: 0 6px 18px rgba(7, 99, 147, 0.28); }
.btn-primary:hover { background: var(--p-navy); transform: translateY(-2px); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }
/* De omlijnde knop: wit met een rand in de merkkleur, en grijs bij hover.
   Dat is bewust andersom dan het eerst was (grijs in rust, blauw bij hover).
   Twee redenen: de knop hoort in rust al herkenbaar te zijn als knop, en de
   rand in de merkkleur stond toch al zo in de prijskaarten — dat verschil is
   nu opgeheven, één omlijnde knop, overal dezelfde.

   WCAG 2.2 SC 1.4.11 vraagt 3:1 voor de informatie die een bediening
   herkenbaar maakt. In rust doet de rand dat, en die haalt 6.5. Bij hover
   zakt de rand bewust naar het lichte --p-border (1.4), maar dan is de knop
   al herkend én neemt de tekst het over: die verkleurt naar de merkkleur
   (6.5) en de knop komt 2px omhoog. De herkenbaarheid verhuist dus van de
   rand naar de tekst in plaats van te verdwijnen.

   Let op als je hieraan sleutelt: haal je die tekstverkleuring weg, dan
   blijft er in de hover-stand niets over dat de 3:1 haalt. */
.btn-ghost { border: 2px solid var(--p-primary-interactive); color: var(--p-text) !important; background: #fff; }
.btn-ghost:hover { border-color: var(--p-border); color: var(--p-primary-interactive) !important; transform: translateY(-2px); }
.btn-donker { background: var(--p-navy-deep); color: #fff !important; }
.btn-donker:hover { background: var(--p-navy); transform: translateY(-2px); }
.btn-inverse { background: #fff; color: var(--p-navy-deep) !important; }
.btn-inverse:hover { background: var(--p-warm); transform: translateY(-2px); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden; padding: 4.5rem 0 5rem;
  /* Een zachte beige band langs de hele onderrand (de warme paletkleur,
     --p-warm), zodat de overgang naar de witte sectie eronder overal
     zichtbaar is en niet alleen linksonder waar de warme vlek toevallig
     zit. Links iets voller, aansluitend op die vlek. */
  background:
    linear-gradient(180deg, rgba(239, 237, 215, 0) 62%, rgba(239, 237, 215, 0.65) 100%),
    radial-gradient(60rem 16rem at 10% 100%, rgba(239, 237, 215, 0.55) 0%, transparent 65%);
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; pointer-events: none; }
.hero-blob--cyan { width: 34rem; height: 34rem; right: -10rem; top: -12rem; background: var(--p-primary-licht); }
.hero-blob--warm { width: 26rem; height: 26rem; left: -10rem; bottom: -10rem; background: var(--p-warm); }
.hero-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--p-blauw-100); color: var(--p-navy);
  font-weight: 700; font-size: 0.875rem;
  border-radius: 9999px; padding: 0.4375rem 1rem; margin: 0 0 1.5rem;
}
.eyebrow-icon { width: 1rem; height: 1rem; }
.hero h1 {
  font-size: clamp(2.375rem, 5vw, 3.75rem); line-height: 1.06; font-weight: 900;
  letter-spacing: -0.025em; color: var(--p-navy-deep); margin: 0 0 1.375rem;
}
/* Gekleurde woorden in een kop.
   De klasse ligt vast, de wáárde hangt af van de achtergrond waar de kop op
   staat: op de donkere secties zouden deze twee wegvallen. Vandaar
   variabelen in plaats van harde kleuren — de cascade kiest ze om, zodat
   één keuze in het beheerscherm overal leesbaar blijft. */
.kop-accent--blauw { color: var(--kop-accent-blauw); }
.kop-accent--oranje { color: var(--kop-accent-oranje); }
.kop-accent--cyaan { color: var(--kop-accent-cyaan); }
/* De twee donkere secties: de waarom-sectie en het slotblok. Daar wisselt
   elke kleur naar zijn lichte tegenhanger binnen dezelfde kleurfamilie —
   blauw en cyaan blijven koel, oranje blijft warm. Laagste contrast hier:
   6,7. Cyaan zou op de navy nog net kunnen (4,8), maar op het verloop van
   het slotblok zakt hij naar 2,8; één regel voor beide is voorspelbaarder
   dan per sectie een uitzondering. */
.waarom, .closing {
  --kop-accent-blauw: var(--p-primary-licht);
  --kop-accent-oranje: var(--p-coral-licht);
  --kop-accent-cyaan: var(--p-primary-licht);
}
.hero-sub { max-width: 34rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.6; color: var(--p-muted); }
.hero-cta { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.hero-chips { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.hero-chips li { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 1rem; font-weight: 600; color: var(--p-muted); }
.hero-chips svg { width: 1rem; height: 1rem; color: var(--p-primary-interactive); }

/* Hero: intro-animatie */
.hero-copy > * { animation: hero-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.32s; }
.hero-visual { animation: hero-in 0.8s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Productmock */
.hero-visual { position: relative; }
.mock-browser {
  background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius);
  box-shadow: var(--p-shadow); overflow: hidden;
}
.mock-browser-bar {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--p-border); background: var(--p-warm-zacht);
}
.dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--p-border); }
.mock-url {
  margin-left: 0.625rem; font-size: 0.75rem; color: var(--p-muted);
  background: #fff; border: 1px solid var(--p-border); border-radius: 9999px; padding: 0.1875rem 0.75rem;
}
.mock-body { display: grid; grid-template-columns: 1.2fr 1fr; }
.mock-canvas {
  position: relative; padding: 1.75rem 1.25rem; display: flex; flex-direction: column;
  gap: 1rem; align-items: flex-start;
  background:
    linear-gradient(rgba(4, 65, 114, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 65, 114, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* Ring verschijnt met vertraging: pas als de cursor is aangekomen */
.mock-el { border-radius: 10px; transition: box-shadow 0.2s 0.55s; }
.mock-el--actief { box-shadow: 0 0 0 2px var(--p-primary), 0 0 0 6px rgba(33, 196, 241, 0.25); }
.mock-el--btn {
  background: var(--p-primary-interactive); color: #fff; font-weight: 700; font-size: 0.875rem;
  padding: 0.5rem 1.125rem; border-radius: 9999px;
}
.mock-el--swatch { width: 3.25rem; height: 3.25rem; background: var(--p-primary); border-radius: 12px; }
.mock-el--input {
  border: 1px solid var(--p-border); background: #fff; color: var(--p-muted);
  font-size: 0.8125rem; padding: 0.5rem 0.875rem; border-radius: 8px; width: 85%;
}
/* Cursor beweegt naar het actieve element (posities t.o.v. de canvas:
   button bovenaan, swatch in het midden, input onderaan) */
.mock-cursor {
  position: absolute; color: var(--p-navy-deep);
  transition: top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.mock-cursor svg { width: 1.375rem; height: 1.375rem; }
.mock-cursor--button { top: 2.5rem; left: 4.5rem; }
.mock-cursor--swatch { top: 6.3rem; left: 3.2rem; }
.mock-cursor--input { top: 9.5rem; left: 6rem; }
/* De drie specificatiepanelen liggen op elkaar in dezelfde rastercel, ook
   de panelen die niet aan de beurt zijn. Daardoor is de mock zo hoog als
   het langste paneel en blijft die hoogte bij elke stap gelijk.

   Op een breed scherm maakte dat niets uit: daar is de kolom ernaast altijd
   hoger. Op een telefoon is de kolom smal, breken de waarden over twee of
   drie regels, en bepaalt het paneel de hoogte van het geheel - dat scheelde
   19px per stap, dus schoof de pagina om de paar seconden een stukje op.

   Verbergen gebeurt met visibility en niet met display: display: none haalt
   het paneel uit de berekening en dan telt zijn hoogte juist niet mee. De
   fade hangt daarom aan :not([hidden]): een animatie begint opnieuw als zijn
   naam van niets naar spec-in springt, maar niet als een element alleen
   zichtbaar wordt. */
.mock-panel {
  border-left: 1px solid var(--p-border); padding: 1.125rem 1.25rem; background: #fff;
  display: grid; align-content: start;
}
.mock-panel-inhoud { grid-area: 1 / 1; }
.mock-panel-inhoud[hidden] { display: block; visibility: hidden; }
.mock-panel-inhoud:not([hidden]) { animation: spec-in 0.2s ease-out; }
.mock-panel-titel { margin: 0 0 0.625rem; font-weight: 800; font-size: 0.875rem; color: var(--p-navy-deep); }
.mock-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3125rem 0.75rem; }
.mock-panel dt { font-size: 0.75rem; color: var(--p-muted); }
.mock-panel dd { margin: 0; font-size: 0.75rem; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--p-text); }

.float-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--p-border); border-radius: 9999px;
  padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: var(--p-shadow-zacht);
  animation: chip-zweef 5s ease-in-out infinite;
}
.float-chip .swatch { width: 0.875rem; height: 0.875rem; border-radius: 4px; }
.float-chip--1 { top: -1.125rem; left: -1.5rem; }
.float-chip--2 { bottom: -1rem; right: 6%; animation-delay: 1.2s; }
.float-chip--3 { bottom: -1.25rem; left: 18%; animation-delay: 2.4s; }
@keyframes chip-zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-sub { max-width: 42rem; }
  .float-chip--1 { left: auto; right: 0.5rem; }
  .float-chip--2 { right: 0.25rem; }
}

/* Op smalle schermen staat de kop direct onder een topbalk die de volle
   breedte vult; de 4,5rem die op desktop lucht geeft leest daar als een
   gat. De onderrand blijft wél staan: die draagt de beige band naar de
   sectie eronder. */
@media (max-width: 760px) {
  .hero { padding-top: 2.25rem; }
}

/* ---------------- Secties (algemeen) ---------------- */
section h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em;
  color: var(--p-navy-deep); text-align: center; margin: 0 0 0.75rem;
}
.sectie-sub { text-align: center; color: var(--p-muted); font-size: 1.125rem; max-width: 40rem; margin: 0 auto 2.75rem; line-height: 1.6; }
.sectie-sub--licht { color: var(--p-blauw-200); }

/* Naden tussen twee secties met dezelfde achtergrond, op mobiel.

   Elke sectie draagt zijn eigen boven- en onderrand. Waar twee secties een
   verschillende achtergrond hebben is de som daarvan de overgang tussen twee
   kleurbanden en hoort hij er te zijn. Waar ze dezelfde achtergrond hebben is
   er geen band en geen scheiding: dan tel je op een telefoon 120 tot 152px
   pure leegte, en dat leest als een pagina die kapot is in plaats van als rust.

   Op een breed scherm valt dat niet op, want daar staat er inhoud naast en is
   het beeldvullend. Op 375px scroll je er doorheen.

   De onderrand van de bovenste sectie blijft de hele afstand dragen; alleen de
   bovenrand van de onderste gaat eraf. Dat halveert de naad zonder dat er een
   nieuwe maat bijkomt die met de rest uit de pas loopt. Uitkomst: 48 tot 86px.

   Deze paren zijn geteld, niet gegokt — staat er een sectie bij die zijn eigen
   achtergrond krijgt, dan hoort hij hier weg. */
@media (max-width: 760px) {
  .demo + .demo,          /* homepage: demo-animatie -> stappen */
  .pricing + .faq,        /* homepage: prijzen -> vragen */
  .faq + .faq,            /* vragenpagina: rubriek -> rubriek */
  .faq + .closing,        /* elke pagina met een afsluitblok */
  .vs-diepgang + .faq,
  .prijzen-calc + .vs-diepgang,
  .alt-lijst + .vs-diepgang { padding-top: 0; }
}

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------- Probleemsectie ---------------- */
/* Speelse "memo's": elk pijnpunt zijn eigen kleur, licht gekanteld
   als losse briefjes — bij hover draaien ze recht */
.pijn { padding: 5rem 0 5rem; }
.pijn-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pijn-kaart {
  border-radius: 20px; padding: 2rem;
  box-shadow: 0 12px 28px rgba(22, 23, 24, 0.08);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s;
}
.pijn-kaart:nth-child(1) { transform: rotate(-1.75deg); }
.pijn-kaart:nth-child(2) { transform: rotate(1.25deg) translateY(0.75rem); animation-duration: 8.5s; animation-delay: -3s; }
.pijn-kaart:nth-child(3) { transform: rotate(-1.25deg); animation-duration: 7.5s; animation-delay: -5.5s; }
.pijn-kaart:hover { transform: rotate(0deg) translateY(-0.375rem); box-shadow: 0 20px 44px rgba(22, 23, 24, 0.14); animation-play-state: paused; }
/* Elk briefje ademt heel langzaam op en neer, in zijn eigen tempo en vanaf
   een eigen punt in de slag (negatieve delay). Op de losse
   `translate`-eigenschap, niet op `transform`: daar staat de kanteling al op,
   en de hover-lift hoort er gewoon bovenop te blijven werken. */
.pijn-kaart { animation: kaart-adem 7s ease-in-out infinite; }
@keyframes kaart-adem {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}
.pijn--coral { background: var(--p-coral-licht); }
.pijn--blauw { background: var(--p-blauw-200); }
.pijn--mint { background: var(--p-mint); }
.pijn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; color: #fff;
  box-shadow: 0 6px 14px rgba(22, 23, 24, 0.16);
}
.pijn--coral .pijn-chip { background: var(--p-coral); }
.pijn--blauw .pijn-chip { background: var(--p-navy); }
.pijn--mint .pijn-chip { background: #617059; }
.pijn-chip svg { width: 1.5rem; height: 1.5rem; }
.pijn-kaart h3 { font-size: 1.25rem; font-weight: 800; margin: 1rem 0 0.5rem; color: var(--p-navy-deep); }
.pijn-kaart p { margin: 0; color: var(--p-navy-deep); opacity: 0.75; line-height: 1.55; font-size: 1rem; }

/* ---------------- Demo ---------------- */
.demo { padding: 4.5rem 0; background: var(--p-blauw-100); border-radius: var(--p-radius-groot); margin: 0 1rem; }
/* Demo-animatie en stappen vormen op de homepage één doorlopend blauw vlak:
   alleen de buitenste hoeken ronden, de naad ertussen blijft strak. De
   bovenste sectie draagt de tussenafstand (zelfde afspraak als mobiel).
   Zonder :has-ondersteuning blijven de hoeken gewoon rond - onschuldig. */
.demo:has(+ .demo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.demo + .demo { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.demo-vlak {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
  background: #fff; border-radius: var(--p-radius); overflow: hidden;
  border: 1px solid var(--p-border); box-shadow: var(--p-shadow-zacht);
  max-width: 56rem; margin: 0 auto 3.5rem;
}
.demo-canvas {
  position: relative; padding: 2.5rem 2rem; display: flex; flex-direction: column;
  gap: 1.375rem; align-items: flex-start;
  background:
    linear-gradient(rgba(4, 65, 114, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 65, 114, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.demo-el { font-family: inherit; cursor: pointer; border: 0; transition: box-shadow 0.2s, transform 0.15s; }
.demo-el:hover { transform: scale(1.03); }
.demo-el--actief { box-shadow: 0 0 0 2px var(--p-primary), 0 0 0 7px rgba(33, 196, 241, 0.22) !important; }
.demo-el--btn {
  background: var(--p-primary-interactive); color: #fff; font-weight: 700; font-size: 1rem;
  padding: 0.75rem 1.5rem; border-radius: 9999px;
}
.demo-el--swatch { width: 4.25rem; height: 4.25rem; background: var(--p-primary); border-radius: 14px; }
.demo-el--input {
  border: 1px solid var(--p-border); background: #fff; color: var(--p-muted); text-align: left;
  font-size: 0.9375rem; padding: 0.75rem 1rem; border-radius: 10px; width: min(18rem, 90%);
}
/* Dezelfde meelopende cursor als in de hero-mock. pointer-events uit, anders
   vangt hij de klik af voor het element waar hij net op wijst. */
.demo-cursor {
  position: absolute; color: var(--p-navy-deep); pointer-events: none;
  transition: top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.demo-cursor svg { width: 1.5rem; height: 1.5rem; }
.demo-cursor--button { top: 3.5rem; left: 5.5rem; }
.demo-cursor--swatch { top: 8.75rem; left: 4.25rem; }
.demo-cursor--input { top: 13.5rem; left: 7.5rem; }
/* Loopt de demo vanzelf, dan verschijnt de ring pas als de cursor er is;
   bij een echte klik (site.js haalt de klasse dan weg) direct. */
.demo-vlak--wacht .demo-el { transition: box-shadow 0.2s 0.55s, transform 0.15s; }
/* Zelfde stapeling als bij de hero-mock hierboven, om dezelfde reden: op
   mobiel staat dit paneel onder het canvas en draagt het dus de hoogte van
   het hele vlak. Zonder dit verschilde die 41px per stap. */
.demo-panel {
  border-left: 1px solid var(--p-border); padding: 1.75rem; background: var(--p-warm-zacht);
  display: grid; align-content: start;
}
.demo-panel-inhoud { grid-area: 1 / 1; }
.demo-panel-inhoud[hidden] { display: block; visibility: hidden; }
.demo-panel-titel { margin: 0 0 1rem; font-weight: 800; font-size: 1rem; color: var(--p-navy-deep); }
.demo-specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.demo-specs dt { font-size: 0.875rem; color: var(--p-muted); }
.demo-specs dd { margin: 0; font-size: 0.875rem; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.demo-panel-inhoud:not([hidden]) { animation: spec-in 0.22s ease-out; }
@keyframes spec-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Route: open stappen op de sectie-achtergrond, geen kaarten. Groot
   ghost-nummer met de icoon-chip er overheen; stippellijn-pijlen
   overbruggen de kolom-gaps (absoluut gepositioneerd in de gap). */
.stroom {
  list-style: none; padding: 0 0.5rem; margin: 0;
  display: grid; gap: 4.5rem; grid-template-columns: repeat(3, 1fr);
}
.stroom-stap { position: relative; }
.stroom-kop { position: relative; margin-bottom: 0.625rem; }
/* Dubbeldruk: vol gekleurd cijfer met daaroverheen een verschoven contour-
   kopie in de contrasterende kleur (via ::after met data-nr), als een
   drukwerk-misregistratie. De kopie schuift bij het inscrollen van exact
   boven het cijfer naar zijn verschoven stand - het "misdrukje" ontstaat
   waar je bij staat te kijken. */
.stroom--coral { --stap-kleur: var(--p-coral); --stap-contour: rgba(4, 65, 114, 0.45); }
.stroom--blauw { --stap-kleur: var(--p-navy); --stap-contour: rgba(255, 107, 69, 0.5); }
.stroom--mint  { --stap-kleur: #617059; --stap-contour: rgba(4, 65, 114, 0.45); }
.stroom-nr {
  position: relative; display: inline-block;
  font-size: 5.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  color: var(--stap-kleur); user-select: none;
  /* Het volle cijfer ademt zachtjes mee: kleine zwaai plus minieme kanteling,
     trager dan en met een andere fase dan de contourkopie, zodat de misdruk
     tussen de twee lagen zichtbaar blijft veranderen. Zelfde reden als bij
     de contour om dit als één gesloten baan te doen in plaats van als losse
     assen via @property: zo blijft het op de grafische laag. */
  transform: translateZ(0);
  animation: cijfer-zwaai 13s linear infinite,
             cijfer-kantel 6.8s ease-in-out infinite alternate;
  will-change: translate, rotate;
}
.stroom-stap:nth-child(2) .stroom-nr { animation-delay: -4.3s, -2.2s; }
.stroom-stap:nth-child(3) .stroom-nr { animation-delay: -8.6s, -4.4s; }
@keyframes cijfer-zwaai {
  0% { translate: 1.34px -0.10px; }
  6% { translate: 1.43px 1.19px; }
  12% { translate: 0.68px 0.89px; }
  19% { translate: -0.46px -0.64px; }
  25% { translate: -1.34px -1.50px; }
  31% { translate: -1.43px -0.64px; }
  38% { translate: -0.68px 0.89px; }
  44% { translate: 0.46px 1.19px; }
  50% { translate: 1.34px -0.10px; }
  56% { translate: 1.43px -1.39px; }
  62% { translate: 0.68px -1.09px; }
  69% { translate: -0.46px 0.44px; }
  75% { translate: -1.34px 1.30px; }
  81% { translate: -1.43px 0.44px; }
  88% { translate: -0.68px -1.09px; }
  94% { translate: 0.46px -1.39px; }
  100% { translate: 1.34px -0.10px; }
}
@keyframes cijfer-kantel { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
.stroom-nr::after {
  content: attr(data-nr); position: absolute; left: 0; top: 0;
  color: transparent; -webkit-text-stroke: 2px var(--stap-contour);
  /* translateZ(0) doet niets aan de plek maar dwingt een eigen grafische
     laag af: de tekst met zijn stroke wordt dan één keer gerasterd en
     daarna alleen nog verschoven, subpixel-nauwkeurig. Zonder dat rondt de
     browser elke frame af naar hele pixels, en bij een beweging van
     honderdsten van een pixel per frame zie je dat als horten. */
  transform: translate(0.375rem, 0.375rem) translateZ(0);
  /* Geen transition op transform: de scrollpositie stuurt die waarde elke
     frame aan (zie .stroom--scrub verderop) en de na-ijling in het script
     dempt hem al. Een overgang erbovenop start elke frame opnieuw en maakt
     nooit af - dat is precies wat de cijfers schokkerig maakte. */
  /* Continue drift op de losse translate-property, los van de
     inscroll-schuif op transform (zelfde truc als de mistwolken).

     Eén gesloten baan met genoeg tussenpunten, en bewust géén losse assen
     via @property meer. Die vorige opzet golfde weliswaar mooi, maar een
     animatie op een custom property kan de browser niet naar de grafische
     laag verplaatsen: hij rekende elk frame opnieuw en tekende de tekst
     - mét zijn stroke - er telkens bij. Bij 0,013 pixel verschuiving per
     frame is dat vragen om horten, want zonder eigen laag rondt hij af naar
     hele pixels en verspringt de contour om de seconde.

     De baan hieronder is een Lissajous-figuur (2:3): hij komt exact terug
     op zijn beginpunt, oogt onregelmatig en heeft nergens een hoekpunt waar
     de beweging stilvalt. will-change zet de tekst op een eigen laag, zodat
     hij één keer gerasterd wordt en daarna alleen nog verschoven. */
  animation: dubbeldruk-drift 11s linear infinite;
  will-change: translate;
}
/* Elke stap uit de pas met de andere, anders bewegen ze synchroon. */
.stroom-stap:nth-child(2) .stroom-nr::after { animation-delay: -3.7s; }
.stroom-stap:nth-child(3) .stroom-nr::after { animation-delay: -7.4s; }
@keyframes dubbeldruk-drift {
  0% { translate: 1.00px 0.75px; }
  6% { translate: 4.54px 4.68px; }
  12% { translate: 6.00px 3.76px; }
  19% { translate: 4.54px -0.88px; }
  25% { translate: 1.00px -3.50px; }
  31% { translate: -2.54px -0.88px; }
  38% { translate: -4.00px 3.76px; }
  44% { translate: -2.54px 4.68px; }
  50% { translate: 1.00px 0.75px; }
  56% { translate: 4.54px -3.18px; }
  62% { translate: 6.00px -2.26px; }
  69% { translate: 4.54px 2.38px; }
  75% { translate: 1.00px 5.00px; }
  81% { translate: -2.54px 2.38px; }
  88% { translate: -4.00px -2.26px; }
  94% { translate: -2.54px -3.18px; }
  100% { translate: 1.00px 0.75px; }
}
/* Scroll-gestuurd, net als het bento-raster: JS zet per stap --kp
   (0 = nog niet binnen, 1 = geland) en deze regels rekenen daar de stand
   uit. De stap zelf komt omhoog en fadet in over het eerste deel van zijn
   voortgang; het misdrukje schuift open in het laatste deel (vanaf 0.55),
   dus altijd nét na de landing - en omhoog scrollen schuift de drukplaat
   weer dicht. Zonder JS of met reduced motion krijgt .stroom de
   scrub-klasse niet en staat alles op zijn plek. */
.stroom--scrub .stroom-stap {
  --kp: 1;
  opacity: calc(var(--kp) * 1.15 - 0.05);
  translate: 0 calc(4rem * (1 - var(--kp)));
}
/* Geen transition hier, en dat is met opzet. De scrollpositie stuurt deze
   waarde elke frame aan en de na-ijling in het script dempt hem al; er een
   overgang overheen leggen betekent dat elke frame een nieuwe overgang start
   die nooit afmaakt. Twee dempingen over elkaar leverden precies het
   schokkerige, achterlopende beeld op dat hier weg moest. De hover-stand
   sneuvelde om dezelfde reden: die sprong tijdens het scrollen heen en weer
   met de scrub-stand zodra de muis boven de sectie hing. */
.stroom--scrub .stroom-nr::after {
  transform: translate(
    calc(0.375rem * max(0, var(--kp) - 0.55) / 0.45),
    calc(0.375rem * max(0, var(--kp) - 0.55) / 0.45)) translateZ(0);
}
.stroom-stap h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.375rem; color: var(--p-navy-deep); }
.stroom-stap p { margin: 0; color: var(--p-muted); line-height: 1.55; font-size: 1rem; }
.stroom-pijl {
  position: absolute; top: 0.875rem; right: -4.375rem;
  width: 4.25rem; height: auto; color: var(--p-navy); opacity: 0.4;
}
.stroom-pijl--omlaag { transform: scaleY(-1); top: 1.5rem; }

@media (max-width: 860px) {
  .stroom { grid-template-columns: 1fr; gap: 2.25rem; max-width: 26rem; margin: 0 auto; }
  .stroom-pijl { display: none; }
}

@media (max-width: 760px) {
  .demo { margin: 0; border-radius: 0; }
  .demo-vlak { grid-template-columns: 1fr; }
  .demo-panel { border-left: 0; border-top: 1px solid var(--p-border); }

  /* Zie het naden-blok bij "Secties (algemeen)": demo en stappen vormen op
     mobiel één doorlopende band. De marge onder het vlak mag daar mee omlaag. */
  .demo-vlak { margin-bottom: 1.5rem; }
}

/* ---------------- Features (bento) ---------------- */
.features { padding: 5rem 0; }
.eyebrow--midden { display: flex; width: fit-content; margin: 0 auto 1.25rem; }
.features .bento { margin-top: 2.75rem; }
.bento { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
.bento-kaart {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 2rem; grid-column: span 2;
  border: 1px solid rgba(4, 65, 114, 0.07);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s;
}
.bento-kaart:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(4, 65, 114, 0.16); }
/* Scroll-gestuurde assemblage: JS zet per kaart --kp (0 = uiteengevallen,
   1 = op zijn plek) en deze regels rekenen daar de stand uit. Elke kaart
   heeft een eigen spreidrichting (--sx/--sy/--sr) richting zijn hoek van
   het raster. Alles op de losse translate/rotate/scale-properties zodat de
   hover-lift (op transform) onafhankelijk blijft werken. Zijwaarts
   uitstekende kaarten mogen geen scrollbalk veroorzaken: */
.features { overflow-x: clip; }
.bento--scrub .bento-kaart {
  --kp: 1;
  opacity: calc(var(--kp) * 1.25 - 0.05);
  filter: blur(calc((1 - var(--kp)) * 6px));
  translate: calc(var(--sx, 0rem) * (1 - var(--kp))) calc(var(--sy, 3rem) * (1 - var(--kp)));
  rotate: calc(var(--sr, 0deg) * (1 - var(--kp)));
  scale: calc(1 - 0.18 * (1 - var(--kp)));
}
.bento--scrub .bento-kaart:nth-child(1) { --sx: -7rem; --sy: -4.5rem; --sr: -5deg; }
.bento--scrub .bento-kaart:nth-child(2) { --sx: 7rem; --sy: -4rem; --sr: 4deg; }
.bento--scrub .bento-kaart:nth-child(3) { --sx: -8rem; --sy: 4rem; --sr: 3.5deg; }
.bento--scrub .bento-kaart:nth-child(4) { --sx: 0rem; --sy: 6.5rem; --sr: -3deg; }
.bento--scrub .bento-kaart:nth-child(5) { --sx: 8rem; --sy: 4rem; --sr: -4deg; }
.bento--scrub .bento-kaart:nth-child(6) { --sx: 0rem; --sy: 7rem; --sr: 1.5deg; }
.bento-kaart--vol { grid-column: span 4; display: flex; gap: 1.5rem; align-items: flex-start; }
.bento-kaart--vol h3 { margin-top: 0; }
.bento-kaart--vol .bento-icon { flex: none; }
.tint-blauw {
  background: linear-gradient(135deg, #DCEBFB 0%, #F2F8FE 100%);
  --bento-accent: var(--p-primary-interactive); --bento-offset: rgba(33, 196, 241, 0.38);
}
.tint-warm {
  background: linear-gradient(135deg, #FCECDF 0%, #FDF7F0 100%);
  --bento-accent: var(--p-coral); --bento-offset: rgba(255, 107, 69, 0.26);
}
.tint-mint {
  background: linear-gradient(135deg, #E0F0D4 0%, #F3F9EE 100%);
  --bento-accent: #617059; --bento-offset: rgba(97, 112, 89, 0.26);
}
/* Groot decoratief icoon in de hoek */
.bento-deco {
  position: absolute; right: -1.75rem; bottom: -1.75rem;
  width: 10rem; height: 10rem; opacity: 0.07; pointer-events: none;
}
.tint-blauw .bento-deco { color: var(--p-navy); }
.tint-warm .bento-deco { color: var(--p-coral); }
.tint-mint .bento-deco { color: #617059; }
.bento-tekst { position: relative; }
/* Geen vlakje meer achter het icoon (dat motief komt elders al genoeg
   voor): een groot open lijn-icoon in de accentkleur, met een platte
   offset-kopie eronder — alsof het net verschoven gedrukt is. */
.bento-icon {
  position: relative; display: inline-flex; color: var(--bento-accent);
  filter: drop-shadow(0.3rem 0.3rem 0 var(--bento-offset));
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.25s;
}
.bento-kaart:hover .bento-icon {
  transform: rotate(-6deg);
  filter: drop-shadow(0.45rem 0.45rem 0 var(--bento-offset));
}
.bento-icon svg { width: 2.75rem; height: 2.75rem; stroke-width: 1.75; }
.bento-kaart h3 { font-size: 1.25rem; font-weight: 800; margin: 1.125rem 0 0.375rem; color: var(--p-navy-deep); }
.bento-kaart p { margin: 0; color: var(--p-muted); line-height: 1.55; }
@media (min-width: 861px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-kaart { grid-column: span 2; }
  .bento-kaart--groot { grid-column: span 4; }
  .bento-kaart--vol { grid-column: span 6; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-kaart, .bento-kaart--groot, .bento-kaart--vol { grid-column: span 1; }
  .bento-kaart--vol { flex-direction: column; gap: 0; }
  .bento-kaart--vol h3 { margin-top: 1rem; }
}

/* ---------------- Quotes (sectie verwijderd, stijlen bewaard) ----------------
   Ongebruikt tot er echte klantquotes zijn; zie de toelichting in het script. */
.quotes { padding: 4.5rem 0 5rem; }
.quote-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.quote-kaart {
  margin: 0; background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: var(--p-shadow-zacht);
}
.quote-kaart blockquote { margin: 0; flex: 1; }
.quote-kaart blockquote p { margin: 0; line-height: 1.6; color: var(--p-text); font-size: 1rem; }
.quote-kaart figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.quote-rol { color: var(--p-muted); }
.avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-blauw-200); color: var(--p-navy-deep); font-weight: 800;
}

/* ---------------- Waarom (donker) ---------------- */
.waarom {
  position: relative; overflow: hidden;
  background: var(--p-navy-deep); color: #fff;
  padding: 5rem 0; border-radius: var(--p-radius-groot); margin: 0 1rem;
  --mx: 0; --my: 0;
}

/* Mist: grote, zwaar geblurde wolken in navy/petrol/cyaan die traag
   door het vlak driften. De drift zit op `transform` (keyframes), de
   muis-parallax op de losse `translate`-property — onafhankelijk van
   elkaar. Alles blijft donker genoeg voor AA-contrast van de tekst. */
.waarom-mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mist-wolk {
  position: absolute; border-radius: 50%; filter: blur(56px);
  will-change: transform, opacity;
  animation: mist-drift-a 15s ease-in-out infinite alternate;
  transition: translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mist-wolk--1 {
  width: 40rem; height: 40rem; left: -12rem; top: -14rem;
  background: radial-gradient(circle, rgba(15, 116, 144, 0.65), transparent 62%);
  translate: calc(var(--mx) * 3rem) calc(var(--my) * 2rem);
}
.mist-wolk--2 {
  width: 32rem; height: 32rem; right: -8rem; top: -6rem;
  background: radial-gradient(circle at 60% 40%, rgba(33, 196, 241, 0.4), transparent 58%);
  animation: mist-drift-b 19s -6s ease-in-out infinite alternate;
  translate: calc(var(--mx) * -4rem) calc(var(--my) * 3rem);
}
.mist-wolk--3 {
  width: 46rem; height: 30rem; left: 18%; bottom: -14rem;
  background: radial-gradient(ellipse, rgba(4, 65, 114, 0.85), transparent 62%);
  animation: mist-drift-a 23s -12s ease-in-out infinite alternate;
  translate: calc(var(--mx) * 2rem) calc(var(--my) * -3rem);
}
.mist-wolk--4 {
  width: 24rem; height: 24rem; right: 14%; bottom: -5rem;
  background: radial-gradient(circle, rgba(175, 228, 254, 0.28), transparent 58%);
  animation: mist-drift-b 12s -3s ease-in-out infinite alternate;
  translate: calc(var(--mx) * -5rem) calc(var(--my) * -2rem);
}
/* Twee tegengestelde patronen. De verplaatsing moet fors zijn t.o.v. de
   wolkgrootte (hier tot ~28rem per halve cyclus), anders leest een zwaar
   geblurde gradiënt als stilstand — dat was precies de eerdere klacht. */
@keyframes mist-drift-a {
  0%   { transform: translate3d(-12rem, 4rem, 0) scale(0.8); opacity: 0.45; }
  35%  { transform: translate3d(2rem, -6rem, 0) scale(1.25); opacity: 1; }
  70%  { transform: translate3d(10rem, 5rem, 0) scale(0.95); opacity: 0.6; }
  100% { transform: translate3d(16rem, -3rem, 0) scale(1.15); opacity: 0.9; }
}
@keyframes mist-drift-b {
  0%   { transform: translate3d(12rem, -5rem, 0) scale(1.3); opacity: 1; }
  35%  { transform: translate3d(-2rem, 7rem, 0) scale(0.85); opacity: 0.4; }
  70%  { transform: translate3d(-11rem, -6rem, 0) scale(1.1); opacity: 0.85; }
  100% { transform: translate3d(-16rem, 4rem, 0) scale(1.35); opacity: 1; }
}
.waarom h2 { color: #fff; }
.waarom-watermerk {
  position: absolute; right: -5rem; top: 50%; transform: translateY(-50%) rotate(-8deg);
  width: 32rem; opacity: 0.09; pointer-events: none;
}
.waarom-grid { position: relative; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.waarom-kaart {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  /* Rechthoekig, op de rechterbovenhoek na: die ene ronding houdt de kaart
     herkenbaar bij het merk terwijl de dikke witte linkerrand hem verankert. */
  border-left: 0.6rem solid #fff;
  border-radius: 0 var(--p-radius) 0 0; padding: 1.75rem;
}
.waarom-icon { width: 1.75rem; height: 1.75rem; color: var(--p-primary); }
/* De sectie vertelt zich in volgorde: eerst de kop, dan de subregel, dan de
   kaarten die van links naar rechts van boven op hun plek vallen, en als
   laatste popt per kaart het icoon. Alle verborgen beginstanden hangen aan
   .reveal (die alleen via JS op de sectie komt), zodat alles zonder JS of met
   reduced motion gewoon meteen zichtbaar is. */
.waarom.reveal h2,
.waarom.reveal .sectie-sub {
  opacity: 0; transform: translateY(-1rem);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.waarom.reveal h2 { transition-delay: 0.05s; }
.waarom.reveal .sectie-sub { transition-delay: 0.18s; }
.waarom.reveal.is-in h2,
.waarom.reveal.is-in .sectie-sub { opacity: 1; transform: none; }
/* De kaartengolf hangt aan het raster zelf (dat apart wordt geobserveerd),
   zodat hij pas start als de kaarten echt in beeld komen - aan de sectie
   hangen betekende dat de golf al buiten beeld was uitgespeeld. Het raster
   als geheel doet niet mee met de generieke .reveal-fade: de kaarten regelen
   hun eigen verschijning. */
/* Scroll-gestuurd, zelfde mechaniek als bento en stappen: JS zet per
   kaart --kp en deze regels rekenen de stand uit. De kaarten vallen van
   ver boven hun plek naar beneden terwijl je scrolt; het icoon verschijnt
   in het laatste stuk van de kaartvoortgang (vanaf 0.55), draaiend vanuit
   het niets - dus altijd nét na de landing van zijn kaart. Omhoog
   scrollen tilt de kaarten weer op en vouwt de iconen terug. */
.waarom-grid--scrub .waarom-kaart {
  --kp: 1;
  opacity: calc(var(--kp) * 1.2 - 0.1);
  translate: 0 calc(-7rem * (1 - var(--kp)));
  scale: calc(1 - 0.15 * (1 - var(--kp)));
}
.waarom-grid--scrub .waarom-icon {
  opacity: calc((var(--kp) - 0.55) / 0.45 * 1.1);
  scale: calc(0.4 + 0.6 * max(0, var(--kp) - 0.55) / 0.45);
  rotate: calc(-45deg * (1 - max(0, var(--kp) - 0.55) / 0.45));
}
.waarom-kaart h3 { font-size: 1.25rem; font-weight: 800; margin: 0.875rem 0 0.375rem; }
.waarom-kaart p { margin: 0; color: var(--p-blauw-200); line-height: 1.55; font-size: 1rem; }
@media (max-width: 760px) { .waarom { margin: 0; border-radius: 0; } }

/* ---------------- Prijzen ---------------- */
.pricing { padding: 5.5rem 0 4.5rem; }
.periode-switch {
  display: flex; justify-content: center; gap: 0.25rem; margin: 0 auto 2.5rem;
  background: var(--p-warm-zacht); border: 1px solid var(--p-border);
  border-radius: 9999px; padding: 0.3125rem; width: fit-content;
}
.periode-switch button {
  border: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 0.9375rem;
  color: var(--p-muted); border-radius: 9999px; padding: 0.5625rem 1.25rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s;
}
.periode-switch button.actief { background: var(--p-navy-deep); color: #fff; }
/* "2 maanden gratis" op de maand/jaar-schakelaar. Dezelfde oranje als de
   "Most popular"-badge, in beide standen.
   Stond eerder op de coral met in de actieve stand witte tekst erop, en dat
   haalde 2.82 — ruim onder de 4.5 die AA vraagt. Wit op deze oranje haalt
   4.70, en het is meteen dezelfde kleur als op /pricing. */
.switch-badge {
  background: var(--p-oranje); color: #fff; font-size: 0.75rem; font-weight: 800;
  border-radius: 9999px; padding: 0.125rem 0.5625rem;
}
.periode-switch button.actief .switch-badge { background: var(--p-oranje); color: #fff; }

.price-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
/* De kaart draagt boven- en onderaan een gekleurde strip van 33px. Die zijn
   pseudo-elementen: het zijn zuivere decoratie en zo blijft de HTML vrij van
   lege elementen. Ze liggen binnen de rand (absolute posities gaan uit van
   het padding-vlak), dus de rand van de kaart blijft er omheen doorlopen.
   De ruimte ervoor zit in de padding: 44px boven, 74px onder. */
.price-card {
  position: relative; background: #fff; border: 1px solid var(--p-border);
  border-radius: var(--p-radius); padding: 2.75rem 2rem 4.625rem;
  display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  --strip: var(--p-blauw-100);
  /* De strips en de ingehaakte badge lopen tot in de hoeken. Een rand maakt
     de bínnenronding kleiner dan de buitenronding (16px min de randdikte),
     dus een vaste radius op die elementen kiert precies in de bocht - te
     zien bij het uitgelichte plan met zijn 2px rand. Clippen op de kaart
     lost dat op voor elke randdikte tegelijk. */
  overflow: hidden;
}
.price-card::before,
.price-card::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2.0625rem;
  background: var(--strip); pointer-events: none;
}
.price-card::before { top: 0; border-radius: var(--p-radius) var(--p-radius) 0 0; }
.price-card::after { bottom: 0; border-radius: 0 0 var(--p-radius) var(--p-radius); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-zacht); }
/* Het uitgelichte plan krijgt een dikkere rand in de merkkleur: dat is wat
   de kaart optilt tussen de twee met de grijze hairline. De 2px zit in de
   kaartbreedte (border-box), dus de kaarten blijven even groot. */
.price-card--featured {
  border: 2px solid var(--p-primary-interactive);
  box-shadow: var(--p-shadow); --strip: var(--p-warm);
}
/* Een rand van 2px duwt de inhoud een pixel verder naar binnen dan de rand
   van 1px op de andere kaarten. Naast elkaar in het raster begint de tekst
   daardoor net niet op dezelfde hoogte; die pixel halen we terug uit de
   padding. Geldt ook voor het goedkoopste plan, dat zijn rand van de
   rekenmodule krijgt. */
.price-card--featured,
.prijs-kaart--beste { padding: calc(2.75rem - 1px) calc(2rem - 1px) calc(4.625rem - 1px); }
.price-card--enterprise { background: var(--p-warm-zacht); }
/* Badge in de rechterbovenhoek, ingehaakt in de strip: buitenhoek volgt de
   kaartronding, binnenhoek is klein. Hij is iets hoger dan de strip en steekt
   er dus onderuit — dat is precies wat hem los maakt van de strip.
   Standaard donkerblauw; het uitgelichte plan ("Most popular") krijgt oranje.
   Zelfde regel op de homepage en op /pricing, zodat dezelfde badge niet per
   pagina een andere kleur heeft. */
.badge {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: var(--p-primary-interactive); color: #fff;
  font-size: 0.875rem; font-weight: 700; line-height: 1.25rem;
  /* De hoek volgt de bínnenkant van de kaartrand, niet de buitenkant.
     Anders loopt de badge de bocht uit en kiert hij tegen de rand -
     zichtbaar bij het uitgelichte plan met zijn 2px rand. 14px voor alle
     badges, zodat ze onderling dezelfde vorm houden. */
  border-radius: 0 14px 0 0.375rem;
  padding: 0.625rem 1.5rem; margin: 0; white-space: nowrap;
}
.price-card--featured .badge { background: var(--p-oranje); }
.price-card h3 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--p-navy-deep); }
.price { margin: 0; display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; }
.price strong { font-size: 3rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--p-navy-deep); }
.price span { color: var(--p-muted); }
.price-note { margin: 0.25rem 0 2rem; font-size: 0.875rem; color: var(--p-muted); min-height: 1.25rem; }
/* align-content: start om dezelfde reden als bij .prijs-punten: de lijst rekt
   mee zodat de knop onderaan uitkomt, en zonder dit verdeelt het raster zijn
   rijen over die extra ruimte - een kort plan kreeg dan grotere regelafstand
   dan een lang plan. */
/* De knop staat nu bóven de lijst, dus de lijst is het element dat mag
   uitrekken (flex: 1) om ongelijke plannen even hoog te maken.
   align-content: start om dezelfde reden als bij .prijs-punten: zonder dat
   verdeelt het raster zijn rijen over die extra ruimte, waardoor een kort
   plan grotere regelafstand kreeg dan een lang plan. */
.price-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.25rem; align-content: start; flex: 1;
}
.price-card li { display: flex; align-items: flex-start; gap: 0.875rem; font-size: 1rem; line-height: 2rem; }
.check { width: 0.875rem; height: 0.875rem; color: var(--p-primary); flex: none; margin-top: 0.5625rem; }
/* .btn-ghost heeft een rand van 2px en .btn-primary niet; naast elkaar in het
   raster scheelde dat 4px in hoogte, en daarmee stond de opsomming eronder
   ook scheef. Een onzichtbare rand van dezelfde dikte trekt ze gelijk. */
.price-card .btn-primary { border: 2px solid transparent; }
.price-card .btn { margin-bottom: 1.75rem; }

.garanties {
  list-style: none; padding: 0; margin: 2.75rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem 2rem;
}
.garanties li { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; color: var(--p-muted); }
/* Het beeldmerk vervangt hier het schild-icoon. 18px, met contain zodat de
   vorm zijn eigen verhouding houdt (hij is iets breder dan hoog) in plaats
   van uitgerekt te worden naar een vierkant. */
.garantie-merk { width: 1.125rem; height: 1.125rem; object-fit: contain; flex: none; }

/* ---------------- FAQ ---------------- */
.faq { padding: 4.5rem 0; }
.faq h2 { margin-bottom: 2rem; }
.faq-item { border-bottom: 1px solid var(--p-border); }
.faq-item summary {
  cursor: pointer; font-weight: 700; font-size: 1.0625rem; color: var(--p-navy-deep);
  padding: 1.125rem 2rem 1.125rem 0; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Chevron-down om te openen; rotatie van 180° is precies chevron-up, dus
   één icoon volstaat voor beide standen. */
.faq-item .faq-chevron {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; color: var(--p-primary-interactive); transition: transform 0.2s;
}
.faq-item[open] .faq-chevron { transform: translateY(-50%) rotate(180deg); }
.faq-item p { margin: 0 0 1.25rem; color: var(--p-muted); line-height: 1.65; max-width: 42rem; }

/* Open-animatie: echte hoogte-transitie waar ::details-content +
   interpolate-size bestaat (Chromium), elders een fade/slide-fallback */
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content {
  height: 0; opacity: 0; overflow: clip;
  transition: height 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease-out,
    content-visibility 0.3s allow-discrete;
}
.faq-item[open]::details-content { height: auto; opacity: 1; }
@supports not (interpolate-size: allow-keywords) {
  .faq-item[open] p { animation: faq-in 0.28s ease-out; }
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- Contact ---------------- */
.contact { padding: 4.5rem 0 5.5rem; background: var(--p-warm-zacht); border-radius: var(--p-radius-groot); margin: 0 1rem; }
.contact-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
.contact h2 { text-align: left; }
.contact-copy p { color: var(--p-muted); line-height: 1.65; font-size: 1.0625rem; }
.contact-alt a { color: var(--p-primary-interactive); font-weight: 700; }
.contact-form { background: #fff; border-radius: var(--p-radius); padding: 2rem; box-shadow: var(--p-shadow-zacht); display: grid; gap: 1.125rem; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.veld { display: grid; gap: 0.375rem; }
.veld label { font-weight: 700; font-size: 1rem; color: var(--p-navy-deep); }
.optioneel { font-weight: 400; color: var(--p-muted); }
.veld :is(input, select, textarea) {
  font-family: inherit; font-size: 1rem; color: var(--p-text);
  border: 1px solid var(--p-border-bediening); border-radius: 10px; padding: 0.6875rem 0.875rem;
  background: #fff; width: 100%;
}
.veld :is(input, select, textarea):hover { border-color: var(--p-muted); }
/* De systeempijl van een select reserveert zijn eigen, browserbepaalde
   ruimte rechts — los van padding-right, en altijd smaller dan de
   linkerpadding van de tekst. Daardoor staat die pijl dichter bij de rand
   dan de tekst links. Eigen pijl erin, op dezelfde afstand tot de rand
   (0.875rem) als de tekst links heeft. */
.veld select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234F5154' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem 1rem;
}
.veld select::-ms-expand { display: none; }
.veld [aria-invalid="true"] { border-color: #9C3B2E; }
.veld-fout { margin: 0; font-size: 0.875rem; color: #9C3B2E; font-weight: 600; }
.form-fout {
  margin: 0; padding: 0.75rem 1rem; border-radius: 10px; font-weight: 600;
  background: #FBEAE6; color: #9C3B2E; border: 1px solid #D89A8C;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-succes {
  background: #fff; border-radius: var(--p-radius); padding: 3rem 2rem; text-align: center;
  box-shadow: var(--p-shadow-zacht);
}
.succes-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #EAF4E2; color: #424D3C;
}
.succes-icon svg { width: 1.75rem; height: 1.75rem; }
.contact-succes h3 { font-size: 1.25rem; font-weight: 800; color: var(--p-navy-deep); margin: 1rem 0 0.375rem; }
.contact-succes p { color: var(--p-muted); margin: 0; }
@media (max-width: 860px) {
  .contact { margin: 0; border-radius: 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 2rem; }
  .veld-rij { grid-template-columns: 1fr; }
}

/* ---------------- Slot-CTA ---------------- */
.closing { padding: 5rem 0; }
.closing-kaart {
  background: linear-gradient(120deg, var(--p-navy-deep) 0%, var(--p-navy) 55%, var(--p-primary-dark) 100%);
  color: #fff; text-align: center; border-radius: var(--p-radius-groot);
  padding: 4rem 2rem;
}
.closing-kaart h2 { color: #fff; }
/* Zelfde leesbreedte als de gewone tekstkolommen: ±90-95 tekens per regel,
   gecentreerd in de kaart. Let op: de ch-eenheid is smaller dan een
   gemiddeld teken — 78ch komt bij dit lettertype uit op ~95 échte tekens,
   gelijk aan een .vs-diepgang-alinea. */
.closing-kaart p { color: var(--p-blauw-200); margin: 0 auto 2rem; font-size: 1.125rem; max-width: 78ch; }

/* ---------------- Back-to-top ---------------- */
.top-knop {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-navy-deep); color: #fff; box-shadow: var(--p-shadow);
  transition: background 0.15s, transform 0.15s;
}
.top-knop:hover { background: var(--p-navy); transform: translateY(-3px); }
.top-knop svg { width: 1.25rem; height: 1.25rem; }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--p-border); padding: 3rem 0 2rem; }
.footer-boven {
  /* De vergelijkkolom draagt de langste labels ("Pentrical vs Storybook
     Docs") en krijgt daarom net wat meer ruimte dan de andere kolommen. */
  display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr;
  padding-bottom: 2rem; border-bottom: 1px solid var(--p-border);
}
.footer-merk p { color: var(--p-muted); max-width: 18rem; line-height: 1.6; margin: 1rem 0 0; font-size: 1rem; }
.footer-kolom { display: flex; flex-direction: column; gap: 0.625rem; }
/* De kolomkoppen in de voet staan niet in kapitalen en zijn een maat kleiner
   dan de koppen in de inhoud: het zijn wegwijzers, geen tussenkoppen. De
   letterafstand die bij de kapitalen hoorde is weg; de koppenregel onderaan
   dit bestand geeft ze dezelfde -0,02em als alle andere koppen. */
.footer-kolom h3 { font-size: 1.1875rem; font-weight: 800; color: var(--p-navy-deep); margin: 0 0 0.25rem; }
.footer-kolom a { color: var(--p-muted); text-decoration: none; font-size: 1rem; }
.footer-kolom a:hover { color: var(--p-primary-interactive); text-decoration: underline; }
.footer-onder {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem; font-size: 0.875rem; color: var(--p-muted);
}
@media (max-width: 760px) {
  .footer-boven { grid-template-columns: 1fr 1fr; }
  .footer-merk { grid-column: 1 / -1; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- Tekstpagina's ----------------
   Voorwaarden, privacy, disclaimer en losse inhoudspagina's.

   LegalView.vue had hiervoor een eigen kopie van de topbar, de shell en de
   footer, met identieke klassenamen als de landingpage. In één stylesheet
   zouden die elkaar overschrijven, en de kale h1/h2/p/a-selectors die daar
   stonden zouden bovendien de hele site raken. Deze pagina's gebruiken nu
   dezelfde chrome als de landingpage (.landing als wortel) en alleen de
   typografie hieronder is eigen — netjes afgeschermd onder .content-page. */
.content-page { padding: 0 0 4.5rem; }
.content-page .shell { max-width: 46rem; }
.content-page h1 {
  font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em;
  color: var(--p-navy-deep); margin: 0 0 0.25rem;
}
.content-page h2 { font-size: 1.25rem; font-weight: 800; color: var(--p-navy-deep); margin: 2rem 0 0.5rem; }
.content-page h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.375rem; }
.content-page p { line-height: 1.7; margin: 0 0 0.875rem; color: var(--p-text); }
.content-page ul, .content-page ol { line-height: 1.7; margin: 0 0 0.875rem; padding-left: 1.25rem; }
.content-page li { margin-bottom: 0.375rem; }
.content-page a { color: var(--p-primary-interactive); }

/* ---------------- Kop van een tekstpagina ----------------
   Kruimelpad, datumstempel, titel en een inleiding, op dezelfde lichte
   wassing als de kop van een vergelijkingspagina (de declaratie staat daar,
   verderop in dit bestand).

   Bewust geen donker blok zoals je het op veel juridische pagina's ziet.
   Deze pagina's worden gelezen en niet gescand; een zwaar vlak bovenaan
   maakt de tekst alleen maar plechtiger dan hij hoeft te zijn, en het zou
   het enige donkere vlak op de hele site zijn.

   Alles staat onder `.content-page`, want de typografie daarvan
   (`.content-page p`, `ol`, `li`, `a`) is specifieker dan een losse klasse
   en zou deze regels anders overstemmen. */
/* Een haarlijn sluit de kop af. Zonder loopt de inleiding zonder pauze over
   in artikel 1, en de wassing alleen is te licht om de grens te trekken op
   een blok van deze hoogte - de kleurvlekken zijn getekend op de ruimere
   maat van een vergelijkingspagina. De gekleurde streep die daar onder het
   oordeel staat is hier geen optie: die betekent iets (blauw voor ons,
   coral voor de ander) en zou hier alleen maar versiering zijn. */
.doc-hero {
  padding: 2.75rem 0 2.5rem;
  border-bottom: 1px solid var(--p-border);
}

.content-page .kruimels { margin: 0 0 1.25rem; }
.content-page .kruimels ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.content-page .kruimels li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--p-muted);
}
/* Het scheidingsteken is met randen getekend en niet als letter gezet.
   Gegenereerde inhoud wordt door een deel van de schermlezers voorgelezen,
   en "groter dan" tussen elke kruimel helpt niemand. Een vorm zonder tekst
   heeft niets om voor te lezen. */
.content-page .kruimels li + li::before {
  content: '';
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  border-top: 1.5px solid var(--p-border-bediening);
  border-right: 1.5px solid var(--p-border-bediening);
  transform: rotate(45deg);
}
.content-page .kruimels a {
  color: var(--p-muted);
  font-weight: 600;
  text-decoration: none;
  /* Zonder deze ruimte is de link 18px hoog en blijft hij onder de 24px die
     WCAG 2.2 SC 2.5.8 vraagt. De uitzondering voor links in een lopende zin
     gaat hier niet op: een kruimelpad is een lijst, geen zin. De items
     staan gecentreerd in de rij, dus de tekst blijft op één lijn met de
     kruimels die geen link zijn. */
  padding-block: 0.25rem;
}
.content-page .kruimels a:hover {
  color: var(--p-primary-interactive);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content-page .kruimels [aria-current] { color: var(--p-text); font-weight: 700; }

/* ---- Feiten over het document, en de printknop ----
   Wanneer vastgesteld, uit hoeveel artikelen, en een knop om af te drukken.

   Geen kaart. Dat was de eerste poging en die sloeg door: een getinte doos met
   een rand eromheen leest als een uitgelicht blok, terwijl dit bijschrift is
   bij de titel erboven. Nu staan de feiten gewoon in de kop, en komt de kleur
   van de streepjes in plaats van van een vlak.

   Het streepje met het kapitaallabel eronder komt van .bedrag op de
   vergelijkingspagina's, de manier waarop deze site een getal met een etiket
   zet. Bekende vormtaal op een nieuwe plek dus, geen nieuwe uitvinding.

   Waarom oranje en niet de merkcyaan: naast elkaar in de browser gezet haalde
   de cyaan te weinig tegen de lichte achtergrond en viel hij weg, en het
   interactieblauw maakte er blauw op blauw van. --p-oranje is de donkere
   oranje uit het palet en niet de speelse coral - op een juridische pagina is
   dat het verschil tussen levendig en luidruchtig.

   De streepjes zijn versiering en geen betekenisdrager: het etiket zegt wat
   het getal is. Er geldt dus geen contrasteis voor; WCAG 1.4.11 gaat over
   vormen die informatie dragen. */
.content-page .doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin: 1.75rem 0 0;
}
.content-page .doc-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1.75rem;
  margin: 0;
  padding: 0;
}
.content-page .doc-feit {
  display: grid;
  gap: 0.0625rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--p-oranje);
}
.content-page .doc-feit dt {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--p-muted);
}
.content-page .doc-feit dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--p-navy-deep);
}

/* De printknop is een gewone .btn-ghost; hier alleen het formaat van het
   icoon, want de knoppenset gaat uit van een pijl van 1,125rem. */
.doc-print svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

/* ---- Twee kolommen op breed scherm ----
   Tekst links, gegevens rechts. Op een kolom van 64rem loopt de inleiding
   toch nooit breder dan zijn leesbare 62 tekens, dus de ruimte rechts stond
   leeg; daar staan de feiten en de printknop nu.

   Het kruimelpad loopt over beide kolommen: het is het pad naar deze pagina
   en hoort bovenaan, niet in een van de twee helften.

   De rechterkolom is `auto` breed en sluit dus om zijn inhoud. Daar staat de
   printknop met 154px als breedste element in; een vaste breedte zou bij een
   langere vertaling gaan knellen.

   Alleen vanaf 64em, hetzelfde omslagpunt als het raster van de tekst
   eronder. Daaronder stapelt alles zoals het al deed, en dat is op een
   telefoon ook de enige zinnige volgorde. */
@media (min-width: 64em) {
  .doc-hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
    /* Zonder dit rekken beide kolommen tot de hoogte van de langste, en dan
       staat de printknop midden in het niets uitgelijnd. */
    align-items: start;
  }
  .content-page .kruimels { grid-column: 1 / -1; }

  /* Onder elkaar in plaats van naast elkaar: in een smalle kolom leest een
     etiket boven zijn waarde beter dan twee paren naast elkaar geperst. */
  .content-page .doc-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    /* De feiten beginnen op de regel van de titel en niet erboven: de kop is
       waar het oog landt, en de gegevens zijn bijschrift daarbij. */
    margin-top: 0.625rem;
  }
  .content-page .doc-feiten { flex-direction: column; gap: 0.875rem; }
}

.doc-hero h1 { margin: 0 0 0.875rem; }
.content-page .doc-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--p-muted);
}

/* De tekst begint op afstand van de hero; die ruimte zat eerder in de
   bovenmarge van het artikel zelf. */
.content-page .content-page__raster { padding-top: 2.75rem; }

@media (max-width: 640px) {
  .doc-hero { padding: 2rem 0 1.75rem; }
  .content-page .content-page__raster { padding-top: 2rem; }
}

/* ---------------- Inhoudsopgave op tekstpagina's ----------------
   De juridische pagina's tellen 19, 11 en 8 genummerde hoofdstukken. Zonder
   index is de enige manier om artikel 12 te vinden: scrollen tot je hem
   tegenkomt. Hij staat daarom links en blijft staan terwijl de tekst
   langsloopt; op smalle schermen wordt het een dichtgeklapt kaartje boven de
   tekst.

   Alleen pagina's met genoeg hoofdstukken krijgen er een (zie
   Rendering/Inhoudsopgave.php). Vandaar de aparte klasse op het artikel:
   zonder index blijft de pagina de enkele kolom die hij altijd was, en
   verandert er voor die pagina's niets. */

/* De pagina wordt breder om de index ernaast kwijt te kunnen, niet om de
   tekst uit te rekken - die houdt zijn leesbare regellengte. De dubbele
   klasse zorgt dat deze regel wint van `.content-page .shell` hierboven,
   ongeacht de volgorde waarin ze ooit komen te staan. */
.content-page.content-page--met-index .shell { max-width: 64rem; }
.content-page--met-index .content-page__tekst { max-width: 42rem; }

/* Springen naar een hoofdstuk mag de kop niet onder de bovenbalk zetten. Die
   is 4,25rem hoog en komt terug zodra je omhoog scrolt, dus de ruimte moet
   gereserveerd blijven ook al is hij op het moment van springen weggegleden.

   Ruimer dan de 5rem van de landingspagina: daar landt de bezoeker op een
   sectie met eigen lucht eromheen, hier staat de kop direct onder de balk.
   Gemeten bij 6rem: 27px tussen balk en kop, tegen 11px bij 5rem. */
.content-page__tekst :is(h2, h3) { scroll-margin-top: 6rem; }

/* --- De lijst zelf, gedeeld door beide varianten --- */
/* Alles hieronder staat onder `.content-page`, want de typografie daarvan
   (`.content-page ol`, `.content-page li`, `.content-page a`) is specifieker
   dan een losse klasse en zou deze regels anders overstemmen. */
.content-page .inhoud__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  /* De doorlopende lijn waar het actieve hoofdstuk een stuk van overneemt. */
  border-left: 2px solid var(--p-border);
}
.content-page .inhoud__lijst li { margin: 0; }

.content-page .inhoud__link {
  display: block;
  /* Trekt de eigen rand precies over de doorlopende lijn heen, zodat het
     actieve hoofdstuk die lijn kleurt in plaats van er een tweede naast te
     zetten. */
  margin-left: -2px;
  border-left: 2px solid transparent;
  padding: 0.375rem 0 0.375rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--p-muted);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.content-page .inhoud__link:hover {
  color: var(--p-primary-interactive);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Het hoofdstuk waar de lezer nu is. Drie signalen tegelijk - vet, kleur en
   de gekleurde lijn - want kleur alleen volstaat niet (WCAG 1.4.1). Wie niet
   kijkt maar luistert hoort het via aria-current, dat site.js meezet; dat
   attribuut is hier meteen de haak voor de opmaak, zodat de twee niet uit
   elkaar kunnen lopen. */
.content-page .inhoud__link[aria-current] {
  border-left-color: var(--p-primary-interactive);
  color: var(--p-primary-interactive);
  font-weight: 700;
}

/* --- Smal scherm: dichtgeklapt kaartje boven de tekst --- */
/* Dicht bij het openen van de pagina: de lezer kwam voor de tekst. Een
   <details> doet dat zonder JavaScript en brengt zijn eigen toetsenbord- en
   schermlezergedrag mee. */
.inhoud__uitklap {
  margin: 0 0 2.5rem;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-warm-zacht);
  /* Bewust geen overflow: hidden - dat zou de focusring van de knop
     afsnijden, en juist die moet heel blijven (WCAG 2.2 SC 2.4.11). */
}
.inhoud__knop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  font-weight: 700;
  color: var(--p-navy-deep);
  cursor: pointer;
  /* Het standaard driehoekje verschilt per browser; hieronder staat een
     eigen pijl die in alle browsers hetzelfde is. */
  list-style: none;
}
.inhoud__knop::-webkit-details-marker { display: none; }
.inhoud__knop::before {
  content: '';
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.inhoud__uitklap[open] .inhoud__knop::before { transform: rotate(45deg); }

.content-page .inhoud__uitklap .inhoud__lijst {
  /* De speling links en rechts is er voor de focusring: zodra een vak
     scrolt, kapt het ook horizontaal af, en dan verdwijnt de linkerkant van
     de ring om een link. Gemeten: ring 3px plus 2px offset, dus 5px. De
     negatieve marge zet de lijst daarna terug op zijn plek. */
  margin: 0 calc(1rem - 5px) 1rem;
  padding-inline: 5px;
  /* Negentien hoofdstukken vullen anders het hele telefoonscherm voordat de
     tekst begint. Binnen het kaartje scrollen houdt de index bereikbaar
     zonder de pagina over te nemen. */
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Ruimer aanraakvlak dan bij de muisvariant. WCAG 2.2 SC 2.5.8 vraagt
   minstens 24x24 px; op een telefoon is dat de ondergrens, niet het doel. */
.inhoud__uitklap .inhoud__link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* --- Breed scherm: de kolom links --- */
.inhoud__paneel { display: none; }
.inhoud__titel {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-muted);
}

@media (min-width: 64em) {
  .content-page--met-index .content-page__raster {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3.5rem;
    /* Zonder dit rekt de index zich uit tot de hoogte van de tekst en heeft
       `position: sticky` niets om binnen te schuiven. */
    align-items: start;
  }
  .content-page__kop { grid-column: 1 / -1; }

  .inhoud__uitklap { display: none; }
  .inhoud__paneel { display: block; }

  .inhoud {
    position: sticky;
    /* Onder de bovenbalk (4,25rem) plus lucht. */
    top: 5.5rem;
    /* Negentien hoofdstukken passen niet op elke schermhoogte. Dan scrollt de
       lijst in zichzelf, in plaats van dat de laatste artikelen onbereikbaar
       onder de vouw blijven hangen. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Zodat een link die met Tab in beeld komt niet half onder de rand van
       het paneel blijft steken (WCAG 2.2 SC 2.4.11). */
    scroll-padding-block: 0.75rem;
    /* En dezelfde eis aan de zijkant: `overflow-y: auto` kapt ook
       horizontaal af, waardoor de focusring om een link zijn linkerkant
       verloor. 5px = 3px ring plus 2px offset; de negatieve marge houdt de
       kolom optisch op zijn plaats. */
    padding-inline: 5px;
    margin-inline: -5px;
  }
}

/* Op papier heeft een index geen functie: er valt niets te klikken, en de
   nummers staan al in de koppen. */


/* =====================================================================
   Vergelijkingspagina's (/vs/…, /alternatives/…, /for/…)
   =====================================================================

   Ontwerpuitgangspunt: de eerlijkheid moet in de opmaak zitten, niet
   alleen in de tekst. Daarom krijgt de concurrent een eigen accentkleur
   in plaats van grijs, staan de oordeelkaarten op gelijke breedte, en
   dragen rijen waar de ander wint diens kleur. Een pagina waar één kolom
   groen is en de andere grijs, leest als reclame — en dan telt geen
   enkel argument op de pagina nog mee.

   De coral is bewust de kleur van de ander: hij komt uit hetzelfde
   palet, is even sterk als het blauw, en haalt AA op donkere tekst. */

/* Dezelfde wassing draagt de kop van een tekstpagina (.doc-hero, hierboven).
   Eén declaratie voor allebei: de site hoort één manier te hebben om een
   pagina te openen, en die mag niet uiteenlopen als de merkkleuren ooit
   verschuiven. De maatvoering verschilt wel - een vergelijkingspagina opent
   ruimer dan een juridisch document. */
.vs-hero,
.doc-hero {
  background:
    radial-gradient(60rem 30rem at 15% -10%, var(--p-blauw-100) 0%, transparent 60%),
    radial-gradient(45rem 25rem at 95% 0%, var(--p-warm-zacht) 0%, transparent 55%);
}
.vs-hero { padding: 4rem 0 3rem; }
.vs-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 1.75rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border-radius: 9999px;
  background: #fff; border: 1px solid var(--p-border);
  font-size: 0.8125rem; font-weight: 700; color: var(--p-muted);
}
.vs-eyebrow svg { width: 1rem; height: 1rem; color: var(--p-primary-interactive); }
.vs-eyebrow time { color: var(--p-text); font-weight: 600; }

/* De twee namen, even groot. Zie de toelichting in vs-hero.blade.php. */
.vs-namen { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.vs-naam {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em;
  padding: 0.3125rem 0.875rem; border-radius: 10px;
  background: var(--p-coral-licht); color: var(--p-navy-deep);
}
.vs-naam--wij { background: var(--p-blauw-200); }
.vs-tegen { font-size: 0.875rem; font-weight: 700; color: var(--p-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.vs-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08;
  letter-spacing: -0.03em; margin: 0 0 1.25rem; max-width: 20ch;
}
.vs-lead { font-size: 1.1875rem; line-height: 1.6; color: var(--p-muted); max-width: 60ch; margin: 0 0 1.75rem; }
.vs-jump {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--p-primary-interactive); text-decoration: none;
}
.vs-jump:hover { text-decoration: underline; }
.vs-jump svg { width: 1.125rem; height: 1.125rem; }

/* ---- Het oordeel ---- */
.vs-oordeel { padding: 4rem 0; }
/* Links uitgelijnd, en dat is een keuze. De landingspagina centreert zijn
   koppen — dat werkt voor een brochure. Een vergelijking wordt gelezen als
   document: je scant de koppen langs de linkerkantlijn op zoek naar de alinea
   die jouw vraag beantwoordt. Gecentreerde koppen boven lopende tekst maken
   daar reclame van, en juist deze pagina's moeten níét als reclame lezen. */
.vs-oordeel h2, .vs-tabel-sectie h2, .vs-scenario h2,
.comparison-pagina section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem); letter-spacing: -0.02em;
  margin: 0 0 0.625rem; text-align: left;
}
/* De afsluitkaart is de ene uitzondering op die linkse koppen: dat blok ís
   de brochure, met gecentreerde tekst en knop — de kop hoort daar niet als
   enige element links te staan. */
.comparison-pagina .closing-kaart h2 { text-align: center; }
.vs-oordeel .sectie-sub, .vs-tabel-sectie .sectie-sub, .vs-scenario .sectie-sub {
  font-size: 1.0625rem; color: var(--p-muted); max-width: 62ch;
  margin: 0 0 2.25rem; text-align: left;
}

.oordeel-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.oordeel-kaart {
  border-radius: var(--p-radius-groot); padding: 2rem;
  border: 1px solid var(--p-border); background: #fff;
}
.oordeel-kaart--ons { background: var(--p-blauw-100); border-color: var(--p-blauw-200); }
.oordeel-kaart--hen { background: var(--p-warm-zacht); border-color: var(--p-warm); }
.oordeel-kaart h3 { font-size: 1.25rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.oordeel-lead { color: var(--p-muted); margin: 0 0 1.25rem; }
.oordeel-kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.oordeel-kaart li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.5; }
.oordeel-kaart li svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.1875rem; color: var(--p-primary-interactive); }
.oordeel-kaart--hen li svg { color: var(--p-coral); }
.oordeel-voetnoot { margin: 1.75rem 0 0; color: var(--p-muted); font-size: 1rem; max-width: 70ch; }

/* ---- De tabel ---- */
.vs-tabel-sectie { padding: 3rem 0 4rem; }
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-tabel { width: 100%; border-collapse: collapse; min-width: 40rem; }
.vs-tabel th, .vs-tabel td { text-align: left; padding: 1rem 1.125rem; vertical-align: top; }
.vs-tabel thead th {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--p-muted); border-bottom: 2px solid var(--p-border);
}
.vs-tabel tbody th { font-weight: 700; width: 34%; }
.rij-noot { display: block; font-weight: 400; font-size: 0.875rem; color: var(--p-muted); margin-top: 0.25rem; }
.vs-rij { border-bottom: 1px solid var(--p-border); }
/* De winnaar van de rij krijgt een gekleurde rand aan de linkerkant. */
.vs-rij--ons { box-shadow: inset 3px 0 0 var(--p-primary-interactive); }
.vs-rij--hen { box-shadow: inset 3px 0 0 var(--p-coral); }
.cel-waarde { display: block; }
.cel-beter {
  display: inline-block; margin-top: 0.4375rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.125rem 0.5rem; border-radius: 9999px;
  background: var(--p-blauw-200); color: var(--p-navy-deep);
}
.cel-beter--hen { background: var(--p-coral-licht); }
.tabel-bron { margin-top: 1.25rem; font-size: 0.875rem; color: var(--p-muted); max-width: 75ch; }

/* ---- Uitgerekende voorbeelden ---- */
.vs-scenario { padding: 3rem 0 4.5rem; background: var(--p-warm-zacht); }
.scenario-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.scenario-kaart {
  background: #fff; border: 1px solid var(--p-border);
  border-radius: var(--p-radius); padding: 1.5rem;
}
/* Ook zichtbaar wanneer de ander goedkoper is — juist die kaart. */
.scenario-kaart--hen { border-color: var(--p-coral); }
.scenario-wie { font-weight: 700; margin: 0 0 1.125rem; line-height: 1.4; }
.scenario-bedragen { display: grid; gap: 0.875rem; }
.bedrag { display: grid; gap: 0.125rem; padding-left: 0.75rem; border-left: 3px solid var(--p-blauw-200); }
.bedrag--hen { border-left-color: var(--p-coral-licht); }
.bedrag-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-muted); }
.bedrag strong { font-size: 1.375rem; letter-spacing: -0.01em; }
.bedrag-som { font-size: 0.8125rem; color: var(--p-muted); }
.scenario-oordeel { margin: 1.125rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--p-muted); }

@media (max-width: 860px) {
  .oordeel-kaarten { grid-template-columns: 1fr; }
  .vs-hero { padding: 2.5rem 0 2rem; }
}

/* ---- Vinkjes en kruisjes in de vergelijkingstabel ----
   Drie standen, elk met een eigen vorm én kleur. Vorm alleen zou te subtiel
   zijn, kleur alleen sluit uit wie kleur niet onderscheidt (WCAG 1.4.1) —
   vandaar allebei, plus het woord voor schermlezers. */
.tabel-legenda {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: 0.875rem; color: var(--p-muted);
}
.tabel-legenda li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cel-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 8px; flex-shrink: 0;
  margin-bottom: 0.375rem;
}
.cel-mark svg { width: 1rem; height: 1rem; stroke-width: 2.75; }
.cel-mark--yes { background: var(--p-blauw-200); color: var(--p-primary-interactive); }
.cel-mark--partial { background: var(--p-warm); color: #7A5A1E; }
/* Stap 100 uit de grijsladder — de enige losse grijstint hier, want een
   eigen token voor één vlak is meer administratie dan het waard is. */
.cel-mark--no { background: #EAECF1; color: var(--p-muted); }
/* In de kolom van de concurrent krijgt een vinkje diens kleur, zodat de
   tabel niet suggereert dat alleen onze kolom meetelt. */
.vs-tabel td:last-child .cel-mark--yes { background: var(--p-coral-licht); color: #A33417; }

/* ---- De vergelijkingstabel op een telefoon ----
   640px tabel in een venster van 342px: de waarden werden halverwege
   afgekapt ("€39 per plan, 3 e...") en de kolom van de ander viel
   volledig buiten beeld. Je kon er zijwaarts doorheen vegen, maar niets
   liet zien dat dat kon — en zelfs dan vergelijk je twee kolommen die
   nooit samen in beeld staan, wat precies is waar een vergelijkingstabel
   voor bedoeld is.

   Daarom hier geen tabel maar een blok per rij: eerst het kenmerk, daaronder
   de twee antwoorden met hun kolomnaam erbij (uit `data-kolom`). Alles past,
   niets valt weg, en de twee staan onder elkaar in plaats van naast elkaar.

   De tabelrollen staan in de blade expliciet in de HTML; zonder dat zou een
   schermlezer hier geen tabel meer horen. Zie de toelichting daar. */
@media (max-width: 760px) {
  .vs-tabel, .vs-tabel thead, .vs-tabel tbody,
  .vs-tabel tr, .vs-tabel th, .vs-tabel td { display: block; }
  .vs-tabel { min-width: 0; }
  /* De kopregel kan weg: elke cel draagt zijn kolomnaam nu zelf. Hij blijft
     wel in de HTML staan, voor schermlezers en voor de brede weergave. */
  .vs-tabel thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .vs-rij { padding: 1.25rem 0 1.5rem; }
  .vs-tabel tbody th { width: auto; padding: 0 0 0.25rem 0.875rem; }
  .vs-tabel td {
    display: grid; grid-template-columns: auto 1fr;
    gap: 0 0.625rem; align-items: start;
    padding: 0.875rem 0 0 0.875rem;
  }
  /* Het vinkje of kruisje staat links en loopt langs de hele cel mee, zodat
     kolomnaam, waarde en "beter" er als één blok naast staan. */
  .vs-tabel td .cel-mark { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .vs-tabel td::before {
    content: attr(data-kolom); grid-column: 2;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--p-muted); margin-bottom: 0.125rem;
  }
  /* Dezelfde kleuren als de kolomkoppen op een breed scherm dragen. */
  .vs-tabel td:first-of-type::before { color: var(--p-primary-interactive); }
  .vs-tabel td:last-of-type::before { color: #A33417; }
  .vs-tabel td .cel-waarde { grid-column: 2; }
  .vs-tabel td .cel-beter { grid-column: 2; justify-self: start; }
}

/* ---- Leesbaarheid: nooit breder dan ~85 tekens ----
   Een regel die over de volle 74rem loopt, dwingt het oog terug over een te
   grote afstand en je raakt de regel kwijt. Dit geldt voor lopende tekst, niet
   voor tabellen en kaarten die hun eigen breedte al beperken. */
.comparison-prose,
.vs-scenario .sectie-sub,
.vs-oordeel .sectie-sub,
.vs-tabel-sectie .sectie-sub,
.tabel-bron,
.oordeel-voetnoot { max-width: 78ch; }
/* De diepgang-tekstblokken staan los in de volle breedte van de sectie. */
.vs-diepgang { padding: 3.5rem 0; }
/* De begrenzing zit op de kolom, niet op de alinea's. Stond hij op de
   alinea's, dan bleven de koppen de volle sectiebreedte houden en staken ze
   rechts buiten de tekst uit — de leesregel loopt dan niet meer langs één
   kantlijn en de kop hoort niet meer bij zijn eigen tekst.
   De kolom staat gecentreerd (margin: auto zit al op .shell); 44rem levert bij
   17px lopende tekst rond de 78 tekens per regel op.

   Dezelfde kolom voor de kop van de pagina: zo staan de twee stukken lopende
   tekst — de introductie en de diepgang — op dezelfde kantlijnen, met de
   brede onderdelen (oordeelkaarten, tabel) daartussen.

   De FAQ-sectie deelt hem ook: die begon los op 46rem (shell--narrow), iets
   breder dan de introtekst erboven — de vragen staken daardoor net buiten
   de leesregel uit. Nu dezelfde 44rem, dus dezelfde kantlijn. */
.vs-hero .shell,
.vs-diepgang .shell,
.faq .shell { max-width: 44rem; }
/* De eigen begrenzingen mogen weg: de kolom regelt het nu. Bleven ze staan,
   dan bleef de tekst binnen de kolom nóg smaller en oogde hij weggedrukt. */
.vs-hero h1 { max-width: none; }
.vs-lead { max-width: none; }
.vs-diepgang h2 { text-align: left; font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: 2.5rem 0 0.75rem; }
.vs-diepgang h2:first-child { margin-top: 0; }
.vs-diepgang p { line-height: 1.7; color: var(--p-muted); font-size: 1.0625rem; }

/* ---- Beweging ----
   Kaarten en tabelrijen komen bij het in beeld scrollen rustig omhoog. Bewust
   klein: het mag opvallen dat de pagina leeft, niet dat er geanimeerd wordt.
   Alles hieronder staat uit zodra het systeem om minder beweging vraagt. */
@media (prefers-reduced-motion: no-preference) {
  .oordeel-kaart, .scenario-kaart {
    animation: vs-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  .vs-naam { animation: vs-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .vs-naam--wij { animation-delay: 0.08s; }
  .vs-tegen { animation: vs-fade 0.5s ease-out 0.28s both; }

  /* De rij licht op waar je leest: helpt het oog de regel vasthouden over
     drie kolommen, en is meteen het kleine beetje leven dat de tabel mist. */
  .vs-rij { transition: background 0.18s ease; }
  .vs-rij:hover { background: var(--p-blauw-100); }
  .vs-rij--hen:hover { background: var(--p-warm-zacht); }

  .oordeel-kaart { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s; }
  .oordeel-kaart:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-zacht); }
}
@keyframes vs-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vs-pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes vs-fade { from { opacity: 0; } to { opacity: 0.65; } }

/* ---- Meer kleur ----
   De oordeelsectie krijgt een eigen achtergrond, zodat de pagina niet één
   witte kolom is van boven tot onder. De accentstreep bovenaan pakt beide
   kleuren op: blauw voor ons, coral voor hen — het hele idee van de pagina in
   één streep. */
.vs-oordeel {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--p-blauw-100) 100%);
}
.vs-oordeel::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--p-primary-interactive) 0%, var(--p-primary) 45%, var(--p-coral) 100%);
}
.vs-tabel thead th:nth-child(2) { color: var(--p-primary-interactive); }
.vs-tabel thead th:nth-child(3) { color: #A33417; }

/* =====================================================================
   Prijzen met rekenmodule (/pricing)
   ===================================================================== */

.prijzen-calc { padding: 3rem 0 4.5rem; }
.prijzen-calc h2 { text-align: left; }
.prijzen-calc .sectie-sub { text-align: left; margin: 0 0 2rem; max-width: 62ch; }

/* ---- De bediening ---- */
.calc-bediening {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end;
  justify-content: space-between;
  background: var(--p-blauw-100); border: 1px solid var(--p-blauw-200);
  border-radius: var(--p-radius-groot); padding: 1.75rem;
  margin-bottom: 2.5rem;
}
.calc-regel { flex: 1 1 22rem; }
.calc-regel > label {
  display: block; font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-muted);
  margin-bottom: 0.625rem;
}
.calc-invoer { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
/* 44x44: dat is de maat uit WCAG 2.5.5 (AAA) en uit de richtlijnen van
   Apple. De AA-eis (2.5.8) is 24x24 en werd met 36 al gehaald, maar deze
   twee knoppen worden op een telefoon met een duim bediend en zijn rond,
   dus het raakvlak is kleiner dan het vierkant suggereert. */
.calc-stap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--p-blauw-200); background: #fff; cursor: pointer;
  color: var(--p-primary-interactive); transition: background 0.15s, transform 0.1s;
}
.calc-stap:hover { background: var(--p-blauw-200); }
.calc-stap:active { transform: scale(0.94); }
.calc-stap svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
/* Het getal is de hoofdzaak van dit blok: groot, en met tabulaire cijfers
   zodat het niet verspringt bij het slepen. */
.calc-invoer output {
  font-size: 2.25rem; font-weight: 900; letter-spacing: -0.02em;
  color: var(--p-navy-deep); min-width: 2.5ch; text-align: center;
  font-variant-numeric: tabular-nums;
}

.calc-schuif { width: 100%; accent-color: var(--p-primary-interactive); cursor: pointer; }

.calc-periode { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 9999px; background: #fff; border: 1px solid var(--p-blauw-200); }
.periode-knop {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 0.5rem 1rem; border-radius: 9999px; color: var(--p-muted);
  transition: background 0.15s, color 0.15s;
}
.periode-knop--actief { background: var(--p-navy-deep); color: #fff; }
/* De korting-swatch.
   De tekst erin haalt ruim AA (donker navy op mint: 11.6, op cyaan: 7.6),
   maar de pil zélf stak met 1.35 nauwelijks af tegen het wit eromheen. Dat is
   te weinig voor SC 1.4.11 (3:1 voor niet-tekstuele informatie). Of een
   decoratieve pil daar strikt onder valt, is een discussie die je niet wilt
   voeren op een prijzenpagina — vandaar een rand die het punt weghaalt.
   In de actieve knop is de rand onzichtbaar tegen het navy, maar daar zorgt
   de cyaan vulling zelf al voor 10.2 tegen de knop. */
.periode-korting {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.125rem 0.5rem; border-radius: 9999px;
  background: var(--p-oranje); color: #fff;
}
.periode-knop--actief .periode-korting { background: var(--p-oranje); color: #fff; }

/* ---- De plankaarten ---- */
/* stretch (de standaard) in plaats van start: alle kaarten even hoog, ook al
   heeft het ene plan meer regels dan het andere. De kaart is er al op gebouwd
   - hij is een flex-kolom en de puntenlijst rekt mee (flex: 1) - zodat de
   knoppen daardoor op één lijn onderaan komen te staan. */
/* De kaarten zelf komen van .price-card (zie "Prijzen" hierboven): dezelfde
   opmaak als op de homepage, één definitie. Hieronder staat alleen nog wat
   de rekenmodule extra heeft. */
.prijs-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.prijs-kaart { transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s; }
/* Berekende bedragen springen bij het schuiven; gelijke cijferbreedtes houden
   het bedrag op zijn plek in plaats van te laten wiebelen. */
.prijs-kaart .price strong { font-variant-numeric: tabular-nums; }
/* Het goedkoopste plan bij dit aantal editors. Een rand plus een label, niet
   alleen kleur — anders is de aanwijzing weg voor wie kleur niet ziet. */
.prijs-kaart--beste { border-color: var(--p-primary-interactive); border-width: 2px; }
/* Past niet bij dit aantal: gedempt maar leesbaar, en met een reden erbij. */
.prijs-kaart--past-niet { opacity: 0.55; }
/* Ruimte voor de som plus het oordeel: allebei één regel met hun marge, dat
   is 47px, plus lucht naar de knop eronder. Altijd gereserveerd, ook als er
   niets staat - anders verspringt de knop per kaart zodra de rekenmodule iets
   te melden heeft. Grid i.p.v. block, zodat de marges van de twee regels niet
   samenvallen met die van de zone. */
.prijs-extra { display: grid; align-content: start; min-height: 3.875rem; }
.prijs-som { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.prijs-oordeel {
  margin: 0.375rem 0 0; font-size: 0.75rem; font-weight: 700;
  color: var(--p-primary-interactive);
}
.prijs-kaart--past-niet .prijs-oordeel { color: var(--p-muted); }
.btn-block { width: 100%; }

/* ---- Wat het elders kost ---- */
.calc-elders {
  margin-top: 2.5rem; padding: 1.5rem 1.75rem;
  background: var(--p-warm-zacht); border: 1px solid var(--p-warm);
  border-radius: var(--p-radius);
}
.calc-elders h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.calc-elders ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.875rem; }
.calc-elders li { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.elders-naam { font-weight: 700; min-width: 11rem; }
.calc-elders strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: #A33417; }
.elders-som { font-size: 0.8125rem; color: var(--p-muted); }

@media (prefers-reduced-motion: no-preference) {
  .prijs-kaart--beste { transition: border-color 0.2s, transform 0.2s; }
}
@media (max-width: 860px) {
  .calc-bediening { padding: 1.25rem; gap: 1.25rem; }
  .elders-naam { min-width: 0; }
}

/* ---- De contactregel onder de prijskaarten ----
   De plek waar de Enterprise-kaart stond. Bewust een regel en geen kaart:
   drie kaarten met een prijs plus één zonder maakte €99 middenmoot in
   plaats van plafond, en de kaart beloofde dingen die de
   vergelijkingspagina's eerlijk ontkennen. Ingetogen opmaak — dit is de
   nooduitgang, niet het aanbod. */
.prijs-contact {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: var(--p-warm-zacht); border: 1px solid var(--p-warm);
  border-radius: var(--p-radius);
  text-align: center;
}
.prijs-contact p { margin: 0; max-width: 62ch; margin-inline: auto; line-height: 1.6; color: var(--p-muted); }
.prijs-contact strong { color: var(--p-text); margin-right: 0.375rem; }
.prijs-contact a { color: var(--p-primary-interactive); font-weight: 700; white-space: nowrap; margin-left: 0.375rem; }

/* ---- Alternatievenlijst (/alternatives/…) ----
   De eigen kaart krijgt de blauwe rand, maar verder dezelfde vorm als de
   rest: ook onze kaart heeft een "sla over als"-regel, en dat verschil
   in kleur mag niet groter zijn dan dat. */
.alt-lijst { padding: 3rem 0 4rem; }
.alt-lijst h2 { text-align: left; }
.alt-lijst .sectie-sub { text-align: left; margin-bottom: 1.5rem; max-width: 70ch; }
.alt-disclosure {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--p-warm-zacht); border: 1px solid var(--p-warm);
  border-radius: var(--p-radius); padding: 1rem 1.25rem; margin-bottom: 2rem;
}
.alt-disclosure svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.1875rem; color: var(--p-primary-interactive); }
.alt-disclosure p { margin: 0; color: var(--p-muted); max-width: 75ch; line-height: 1.6; }

.alt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: alt; }
.alt-item {
  counter-increment: alt; position: relative;
  background: #fff; border: 1px solid var(--p-border);
  border-radius: var(--p-radius); padding: 1.75rem 1.75rem 1.75rem 4.5rem;
}
.alt-item--ons { border-color: var(--p-primary-interactive); box-shadow: var(--p-shadow-zacht); }
.alt-item::before {
  content: counter(alt);
  position: absolute; left: 1.5rem; top: 1.75rem;
  width: 2rem; height: 2rem; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 1rem;
  background: var(--p-blauw-100); color: var(--p-primary-interactive);
}
.alt-item--ons::before { background: var(--p-primary-interactive); color: #fff; }
.alt-kop h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; text-align: left; }
.alt-tagline { margin: 0.25rem 0 0; color: var(--p-muted); font-weight: 600; }
.alt-body { margin: 0.875rem 0 0; color: var(--p-muted); line-height: 1.65; max-width: 75ch; }
.alt-feiten { margin: 1.125rem 0 0; display: grid; gap: 0.625rem; }
.alt-feit { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.alt-feit dt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p-muted); }
.alt-feit dd { margin: 0; line-height: 1.55; max-width: 65ch; }
/* De sla-over-regel valt op — juist bij onze eigen kaart. */
.alt-feit--skip dt { color: #A33417; }
.alt-link { display: inline-flex; align-items: center; gap: 0.4375rem; margin-top: 1rem; font-weight: 700; color: var(--p-primary-interactive); text-decoration: none; }
.alt-link:hover { text-decoration: underline; }
.alt-link svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
  .alt-item { padding-left: 1.75rem; padding-top: 4rem; }
  .alt-item::before { top: 1.5rem; left: 1.75rem; }
  .alt-feit { grid-template-columns: 1fr; gap: 0.125rem; }
}

/* ---------------- Koppen in Encode Sans ----------------
   Onderaan het bestand, zodat deze regel wint van de losse kopregels
   hierboven (zelfde specificiteit, laatste telt). Encode Sans komt net
   als Source Sans 3 van Bunny (zie layout.blade.php). Gewicht 700, en
   de letters iets naar elkaar toe: Encode Sans is een brede letter en
   de lange koppen passen zo beter binnen hun regel. */
.landing :is(h1, h2, h3, h4) { font-family: 'Encode Sans', 'Source Sans 3', sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* Alle h3'en even groot en met dezelfde regelafstand, waar ze ook staan.
   28px in absolute maat en niet als factor: de kolomkoppen in de voet zijn
   19px en zouden anders een krappere regelafstand krijgen dan de rest. */
.landing h3 { line-height: 1.75rem; }

/* =====================================================================
   Afdrukken
   =====================================================================

   Bewust het laatste blok van dit bestand. Een media query telt niet mee
   voor de specificiteit, alleen de volgorde: stond dit hoger, dan zou
   elke gewone regel die er ná komt eroverheen schrijven. Dat gebeurde ook -
   de achtergrondwassing van .doc-hero wordt honderd regels verderop gezet
   en won van het `background: none` hierin.
   ===================================================================== */

/* ---------------- Afdrukken ----------------
   Op papier hoort een document te liggen en geen website. Alles wat scherm is
   gaat eruit: de balk bovenaan, de voettekst, de knop terug naar boven, de
   inhoudsopgave, het kruimelpad en de printknop zelf. Er valt op papier niets
   te klikken, dus navigatie kost alleen inkt.

   De kop verliest ook zijn vorm. De gekleurde wassing, de haarlijn, de oranje
   streepjes en de kapitaaletiketten zijn er voor het scherm: ze drukken half
   af, kosten inkt, en laten het er als een uitdraai van een website uitzien
   in plaats van als het document dat het is.

   Wat overblijft: de titel, waar het document over gaat, de datum waarop het
   is vastgesteld, en de artikelen. Het aantal artikelen gaat eruit - dat is
   een hulpmiddel bij het scrollen, en wie het papier vasthoudt ziet zelf hoe
   dik het is.

   Maten in pt en niet in rem: op papier is een punt een punt, en px hangt aan
   een schermresolutie die hier niet bestaat. */
@media print {
  @page { margin: 2cm; }

  /* De schil. */
  .topbar,
  .footer,
  .top-knop,
  .skip-link,
  .doc-print,
  .content-page .inhoud,
  .content-page .kruimels { display: none; }

  /* De flexkolom met min-height: 100vh houdt op papier een lege pagina over. */
  .landing {
    display: block;
    min-height: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  /* Geen vlakken, geen randen, geen kolombreedtes: de tekst krijgt de marge
     van @page en verder niets. */
  .doc-hero {
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .shell { max-width: none; padding: 0; }
  .content-page { padding: 0; }
  .content-page .content-page__raster { padding-top: 0; }
  .content-page--met-index .content-page__tekst { max-width: none; }

  /* De datum als gewone regel onder de titel in plaats van als etiket boven
     een waarde. Het dubbelepunt komt uit CSS omdat het alleen op papier
     nodig is; op het scherm staat het etiket erboven en leest een
     schermlezer het paar zonder hulp. */
  .content-page .doc-meta { display: block; margin: 0; }
  .content-page .doc-feiten { display: block; margin: 0; }
  .content-page .doc-feit {
    display: block;
    border-left: 0;
    padding-left: 0;
  }
  .content-page .doc-feit dt,
  .content-page .doc-feit dd {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
  }
  .content-page .doc-feit dt::after { content: ': '; }
  /* Ná de regel hierboven die alle feiten op `block` zet: gelijke
     specificiteit, dus de laatste wint. Stond dit bij de andere verborgen
     onderdelen bovenaan, dan kwam "Artikelen: 19" alsnog op papier. */
  .content-page .doc-feit--artikelen { display: none; }

  /* Zwart op wit. De merkkleuren zijn op papier of te licht of zonde van de
     inkt, en een gekleurde link is misleidend als er niets te klikken valt. */
  .content-page h1 { color: #000; font-size: 20pt; margin: 0 0 0.35rem; }
  .content-page h2 { color: #000; font-size: 12pt; }
  .content-page h3 { color: #000; font-size: 11pt; }
  .content-page .doc-lead {
    color: #000;
    font-size: inherit;
    max-width: none;
    margin: 0 0 0.35rem;
  }
  .content-page a { color: #000; text-decoration: none; }

  /* Een kop mag niet als laatste regel onder aan een pagina achterblijven,
     en een alinea niet met één losse regel beginnen of eindigen. */
  .content-page :is(h1, h2, h3) {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .content-page :is(p, li) { orphans: 3; widows: 3; }
}