/*
 * 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; }
.mock-panel { border-left: 1px solid var(--p-border); padding: 1.125rem 1.25rem; background: #fff; }
.mock-panel-inhoud { 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; }
.demo-panel { border-left: 1px solid var(--p-border); padding: 1.75rem; background: var(--p-warm-zacht); }
.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 { 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: 3.5rem 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 .datum { color: var(--p-muted); font-size: 0.875rem; margin: 0 0 2.5rem; }
.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); }

/* =====================================================================
   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. */

.vs-hero {
  padding: 4rem 0 3rem;
  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-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; }