/* AUD-174: dit stijlblok stond tot en met 4 keer letterlijk gedupliceerd,
   byte-identiek op over.html, privacy.html en voorwaarden.html, en 96,9%
   gelijk op index.html. Elke visuele aanpassing moest daardoor handmatig tot
   in 4 bestanden herhaald worden; een gemiste plek (bijvoorbeeld de
   .price-flag-kleur van AUD-40, die alleen op index.html was hersteld) bleef
   onopgemerkt zolang de betrokken pagina de regel toch niet gebruikte.

   Nu één gedeeld bestand, ingeladen door alle vijf HTML-pagina's (index,
   over, privacy, voorwaarden, 404). Het is de volledige vereniging van wat
   elke pagina had: regels die maar op één type pagina gelden (bijvoorbeeld
   .doc-kaart, alleen relevant voor de juridische pagina's, of table.vergelijk,
   alleen op index.html) doen op de andere pagina's simpelweg niets, want daar
   staat de bijbehorende HTML niet. Geen enkele pagina heeft daardoor nog een
   eigen lokaal stijlblok nodig. */
/* Lettertypen zelf gehost (gelijk aan de app): geen verzoeken naar Google
   Fonts, dus geen bezoekers-IP naar derden (AVG) en sneller. Variabele fonts
   wght 400-700. Licenties: SIL OFL, zie assets/fonts/OFL-*.txt.

   AUD-359: alleen woff2. Elke browser die deze site kan tonen ondersteunt
   woff2 (Chrome 36+, Firefox 39+, Safari 12+, Edge 14+); de woff-terugval
   werd dus nooit geladen en reisde wel ruim 300 KB mee in elk artefact. De
   .woff-bronnen blijven in versiebeheer staan, maar zijn in .gitattributes
   op export-ignore gezet, net als assets/og-image.svg. */
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-var-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dmsans-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dmsans-var-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ==========================================================
   SamenVvE · Community Warmth: The Neighborhood Story
   Tokens overgenomen uit de SamenVvE-app (app.css)
   ========================================================== */
:root {
  --ink:        #1c2433;
  --ink-2:      #2c3950;
  --ink-soft:   #51607a;
  /* Donkerder dan #8896aa (haalde 3.0:1 op wit, 2.68:1 op crème); gelijk aan de app. */
  --ink-muted:  #606f86;
  --line:       #e9e5db;
  --line-soft:  #f1eee6;
  --canvas:     #ffffff;
  --surface:    #f4f2ec;
  --surface-2:  #eae7de;

  --ochre:      #c98a2b;
  /* Iets donkerder dan #a06a18 zodat oker tekst op crème 4.5:1 haalt; gelijk aan de app. */
  --ochre-dark: #976417;
  --ochre-soft: #fbf1de;
  --ochre-line: #ecd6a8;

  --green:      #1d7a52;
  --green-soft: #e7f4ee;
  --red:        #b4322a;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(60,50,30,.04), 0 10px 32px -14px rgba(60,50,30,.12);
  --shadow:    0 2px 4px rgba(60,50,30,.05), 0 18px 44px -16px rgba(60,50,30,.16);
  --maxw: 1120px;

  /* spacious rhythm: marketingpagina */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 104px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--surface); }

body {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.65;
  color: var(--ink); background: transparent;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- de wijk: vaste parallax-achtergrond ---------- */
.wijk-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(#e7f2f7 0%, #edf1ec 48%, var(--surface) 100%);
}
.wijk-laag {
  position: absolute; left: 0; right: -1600px;
  background-repeat: repeat-x; will-change: transform;
}
.laag-lucht  { top: 0; height: 300px; background-image: url(../assets/wijk-lucht.svg); background-size: 1600px 300px; opacity: .9; }
.laag-huizen { bottom: 118px; height: 420px; background-image: url(../assets/wijk-huizen.svg); background-size: 1600px 420px; }
.laag-straat { bottom: 0; height: 170px; background-image: url(../assets/wijk-straat.svg); background-size: 1600px 170px; }
/* zachte sluier: bovenin rustig voor tekst, onderin blijft de wijk kleurig */
.wijk-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(244,242,236,.86) 0%, rgba(244,242,236,.58) 45%, rgba(244,242,236,.32) 75%, rgba(244,242,236,.16) 100%);
}
@media (max-width: 700px) {
  .wijk-laag { right: -960px; }
  .laag-lucht  { height: 180px; background-size: 960px 180px; }
  .laag-huizen { bottom: 71px; height: 252px; background-size: 960px 252px; }
  .laag-straat { height: 102px; background-size: 960px 102px; }
  .wijk-bg::after { background: linear-gradient(rgba(244,242,236,.9) 0%, rgba(244,242,236,.72) 45%, rgba(244,242,236,.5) 75%, rgba(244,242,236,.34) 100%); }
}

img, svg { display: block; max-width: 100%; }
a { color: var(--ochre-dark); }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 1000; }
.skip-link:focus { left: 12px; top: 12px; }

/* AUD-338 (#948): de spritekaart met het vinkje-symbool. Uit beeld, maar niet
   met display:none: een <use> mag naar een symbool in een verborgen svg
   verwijzen, en dit is de vorm die overal werkt. Nul bij nul plus overflow
   hidden, zodat de kaart geen ruimte inneemt en niets verschuift. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* AUD-182: visueel verborgen, wel voorleesbaar voor schermlezers. */
.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;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ---------- typografie ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: 34em; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ochre-dark);
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--ochre); border-radius: 2px; }
.kicker.k-teal  { color: #2c6470; } .kicker.k-teal::before  { background: #4f9aa8; }
.kicker.k-green { color: #41682f; } .kicker.k-green::before { background: #8fb977; }
.kicker.k-blue  { color: #31597c; } .kicker.k-blue::before  { background: #6ea9cf; }

/* ---------- knoppen ---------- */
/* Het hidden-attribuut moet winnen van de display hieronder. Zonder deze regel
   blijft een knop met [hidden] gewoon staan, want display:inline-flex
   overschrijft de display:none die de browser aan hidden geeft. Dat is precies
   de valkuil waarmee de winkelschakelaar (BIZ-37) stilletjes niets zou doen. */
[hidden] { display: none !important; }
/* AUD-43: de bestelknoppen ([data-winkel-knop]) staan standaard verborgen en
   worden pas zichtbaar als mijn.samenvve.nl/winkel-status.php zegt dat de
   winkel open is (BIZ-37). Blijft die reactie uit (script geblokkeerd,
   trage of platliggende console), dan blijft een bezoeker zonder JS anders
   met helemaal geen bestel-CTA achter. De terugval ([data-winkel-fallback],
   een eerlijke "mail ons"-knop naast elke bestelknop) staat om diezelfde
   reden ook standaard verborgen, en verschijnt via twee onafhankelijke
   wegen: hieronder meteen voor bezoekers zonder JavaScript, en met een
   timeout in js/site.js voor bezoekers met JavaScript bij wie het
   statusscript niet op tijd reageert. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: 999px; white-space: nowrap;
  font: 600 1.02rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: rgba(255,255,255,.72); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-muted); background: var(--canvas); }
/* Geen okeren knopvlak meer: oker blijft accent en wordt nooit een heel
   knopvlak (huisstijlafspraak), en na twee pogingen bleef het wringen.
   Bestellen is gewoon de primaire handeling en draagt de primaire navy knop. */
@media (min-width: 1140px) {
  /* Boven deze grens staat "Probeer de demo" al rechtsboven in de menubalk;
     dezelfde knop nog eens in de hero is dubbelop. Eronder verdwijnt de
     menubalkknop in het hamburgermenu en is de heroknop juist de enige weg
     naar de demo. Zo concurreren er in de hero ook nooit twee navy knoppen. */
  .hero-demo { display: none; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(238,245,247,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 24px -18px rgba(60,50,30,.25); }
.nav { display: flex; align-items: center; gap: var(--s-3); min-height: 76px; position: relative; }
.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand b { color: var(--ochre-dark); font-weight: inherit; }
.site-footer .brand b { color: var(--ochre); }
.nav-links { display: flex; gap: 5px; margin-left: auto; list-style: none; }
.nav-links a {
  display: inline-block; padding: 10px 11px; border-radius: 999px; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .98rem;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { background: var(--surface-2); color: var(--ink); }
/* De kennisbank is een eigen module en mag dat in de balk laten zien.
   Kleurkaders van Ibo (27-08-2026): geen oker, geen zwart, en sinds de
   avondronde ook geen groen; daarom een zachte was van het eigen
   merkblauw (--ink-familie). De eigen hover moet erbij: de algemene
   hoverregel hierboven weegt even zwaar als .nav-kb en zonder eigen hover
   verliest de knop zijn tint niet en wint hij hem ook niet. */
.nav-links a.nav-kb {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px;
  background: #e8edf5; color: var(--ink-2);
}
.nav-links a.nav-kb svg { width: 14px; height: 14px; flex: 0 0 auto; }
.nav-links a.nav-kb:hover { background: #dce4f0; color: var(--ink); }
.nav-cta { flex: 0 0 auto; margin-left: var(--s-1); }
.nav-cta .btn { min-height: 44px; padding: 10px 22px; font-size: .95rem; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line); border-radius: 12px; width: 48px; height: 48px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--ink); }

/* Breekpunt, nagemeten op 24-08-2026 (UX-126, VVE-App#1052).
   Beschikbaar: .wrap geeft min(1120, viewport) - 80 aan padding, dus vanaf een
   viewport van 1200 is dat 1040 en daaronder krimpt het mee.
   Nodig met zes items: 166 (.brand) + 24 (nav-gap) + 638 (.nav-links,
   sinds de kennisbank-pill met boekje, nagemeten 27-08-2026)
   + 24 (nav-gap) + 8 (.nav-cta marge) + 172 (knop) = 1033. De pill is
   daarom bewust smal gehouden (padding 10px, gap 5px, icoon 14px,
   gewicht 500): bij een bredere pill knelt het budget van 1040.
   VALKUIL: de gap van .nav telt TWEE keer, tussen logo en lijst en tussen
   lijst en knop. Wie hem een keer telt, komt 24px te laag uit en denkt dat
   het past terwijl de knop uitsteekt.
   Met een schuifbalk van ~15px is 1040 pas beschikbaar vanaf viewport 1135,
   dus hieronder naar het hamburgermenu; boven 1140 is er ~7px speling.
   Dit brak toen "Kennisbank" als zevende item werd toegevoegd zonder opnieuw
   te meten: de balk had 1127 nodig, kreeg 1040, en kneep het verschil uit het
   wordmerk (34px buiten zijn eigen vak, nog 4px lucht tot het eerste item) en
   uit de demoknop (drie regels, 68px hoog in een balk van 76px).
   Voeg je een item toe of maak je een label langer: meet opnieuw. */
@media (max-width: 1139px) {
  .nav-toggle { display: inline-flex; }
  .nav-links, .nav-cta { display: none; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: -20px; right: -20px; top: 76px;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s-2) 20px var(--s-3);
    box-shadow: var(--shadow);
  }
  .nav.is-open .nav-links a { padding: 14px 16px; font-size: 1.05rem; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: var(--s-5) 0 0; overflow: hidden; }
.hero-inner { display: grid; text-align: center; justify-items: center; padding-bottom: clamp(150px, 24vw, 280px); }
.hero-kern { display: grid; gap: var(--s-4); justify-items: center; position: relative; }
.hero-kern::before {
  content: ""; position: absolute; inset: -70px -110px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,242,236,.94) 48%, rgba(244,242,236,.6) 74%, rgba(244,242,236,0) 100%);
}
.hero .lead { margin: 0 auto; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ochre-soft); border: 1px solid var(--ochre-line);
  color: var(--ochre-dark); font-weight: 600; font-size: .92rem;
  padding: 8px 18px; border-radius: 999px;
}
.hero-badge svg { width: 17px; height: 17px; }

.hero h1 .accent { position: relative; white-space: nowrap; }
.hero h1 .accent svg {
  position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em;
  overflow: visible;
}
.hero h1 .accent path { stroke: var(--ochre); stroke-width: 7; fill: none; stroke-linecap: round; opacity: .55; }

.hero-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
/* Op een telefoon stapelen de drie knoppen onder elkaar. Met hun eigen
   inhoudsbreedte (259, 156 en 186 pixels) wordt dat een rafelige kolom, dus
   daar strekken ze tot de volle breedte. Scheelt ook mistikken: elke knop is
   dan even makkelijk te raken. */
@media (max-width: 700px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

.hero-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.avatars { display: flex; }
.avatars span {
  width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .9rem/1 var(--font-body); color: #fff;
}
.avatars span + span { margin-left: -12px; }
.hero-social p { font-size: .95rem; color: var(--ink-soft); max-width: 22em; text-align: left; }

/* onderin de hero blijft ruimte open: daar rijdt de wijk voorbij */

/* ---------- secties ---------- */
.section { padding: var(--s-6) 0; overflow-x: clip; }
.section-head { display: grid; gap: var(--s-2); max-width: 680px; margin-bottom: var(--s-5); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* zachte mist achter tekst die boven de wijk zweeft */
.section-head.centered { position: relative; }
.section-head.centered::before {
  content: ""; position: absolute; inset: -44px -90px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,242,236,.92) 45%, rgba(244,242,236,.55) 72%, rgba(244,242,236,0) 100%);
}

/* ---------- verhaal ---------- */
.story { background: var(--ink); color: #f4f2ec; }
.story .kicker { color: var(--ochre); }
.story .kicker::before { background: var(--ochre); }
.story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-5); align-items: center; }
.story h2 { color: #fff; }
.story p { color: #c6cddb; max-width: 36em; }
.story p + p { margin-top: var(--s-2); }
.story strong { color: #fff; }
.story-quote {
  background: var(--ink-2); border: 1px solid #3a4763; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.story-quote blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; color: #fff; }
.story-quote blockquote::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--ochre); margin-bottom: 14px; }
.story-quote figcaption { margin-top: var(--s-3); display: flex; align-items: center; gap: 12px; color: #aab4c8; font-size: .95rem; }
.story-quote figcaption span:first-child {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--ochre);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
}
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }

/* ---------- zo werkt het ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.step-card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 36px); box-shadow: var(--shadow-sm);
  display: grid; gap: var(--s-2); align-content: start;
  transition: transform .2s ease, box-shadow .2s ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-num {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ochre-soft); border: 1px solid var(--ochre-line); color: var(--ochre-dark);
}
.step-card p { color: var(--ink-soft); font-size: 1rem; }
.sn-teal   { background: #e4f0f2; border-color: #c3dde2; color: #2c6470; }
.sn-orange { background: #fdeedd; border-color: #f0d4ae; color: #a95f16; }
.sn-green  { background: #e9f3e3; border-color: #cae2bc; color: #41682f; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- functies ---------- */
.features { background: rgba(255,255,255,.82); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; display: grid; gap: 12px; align-content: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--ochre-line); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ochre-soft); border: 1px solid var(--ochre-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 24px; height: 24px; stroke: var(--ochre-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* elke module z'n eigen kleur, zoals de huizen in de wijk */
.fi-teal   { background: #e4f0f2; border-color: #c3dde2; } .fi-teal svg   { stroke: #2c6470; }
.fi-orange { background: #fdeedd; border-color: #f0d4ae; } .fi-orange svg { stroke: #a95f16; }
.fi-green  { background: #e9f3e3; border-color: #cae2bc; } .fi-green svg  { stroke: #41682f; }
.fi-blue   { background: #e6eff7; border-color: #c6dcec; } .fi-blue svg   { stroke: #31597c; }
.fi-red    { background: #fbeae8; border-color: #f0c9c5; } .fi-red svg    { stroke: #93332c; }
.fi-navy   { background: #e9ecf2; border-color: #ccd3e0; } .fi-navy svg   { stroke: #2c3950; }
.feature h3 { font-size: 1.08rem; }
.feature p { font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- kosten ---------- */
.price-flag {
  position: absolute; top: -14px; right: 24px;
  background: var(--ochre); color: var(--ink); font-weight: 700; font-size: .82rem;
  padding: 6px 16px; border-radius: 999px; letter-spacing: .03em;
}

/* ---------- slot-cta ---------- */
.finale { padding-bottom: 0; }
/* de grote finale: de wijk in volle kleur */
.finale-card {
  border: 1px solid #c9dfe7; border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(300px, 34vw, 420px);
  position: relative; overflow: hidden; text-align: center;
  background-color: #e7f2f7;
  background-image: url(../assets/wijk-straat.svg), url(../assets/wijk-huizen.svg), linear-gradient(#e2eff5, #f6f1e4);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: 1100px 117px, 1100px 289px, 100% 100%;
  background-position: left bottom, left calc(100% - 100px), center;
}
.finale-card h2 { max-width: 15em; margin: 0 auto var(--s-2); }
.finale-card .lead { margin: 0 auto var(--s-3); }
.finale-card .kicker { margin-bottom: var(--s-2); }
@media (max-width: 700px) {
  .finale-card {
    padding-bottom: 250px;
    background-size: 700px 74px, 700px 184px, 100% 100%;
    background-position: left bottom, left calc(100% - 62px), center;
  }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #aab4c8; padding: var(--s-5) 0 var(--s-4); margin-top: var(--s-3); }
.footer-grid { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer .brand img { box-shadow: 0 0 0 1.5px #3a4763; }
.site-footer p { font-size: .95rem; max-width: 26em; }
.footer-links { list-style: none; display: grid; gap: 8px; }
.footer-links a { color: #c6cddb; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-base { border-top: 1px solid #35415c; margin-top: var(--s-4); padding-top: var(--s-3); font-size: .88rem; color: #8593ab; display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: space-between; }
.footer-maker { color: #c6cddb; text-decoration: none; font-weight: 600; }
.footer-maker:hover { color: #fff; text-decoration: underline; }

/* ---------- pijnpunten ---------- */
.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); max-width: 940px; margin: 0 auto; }
.pain {
  background: var(--canvas); border: 1px solid var(--line); border-left: 5px solid var(--red);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm);
  display: grid; gap: 12px; align-content: start;
}
.pain h3 { font-size: 1.15rem; }
.pain p { color: var(--ink-soft); font-size: .98rem; }
.pain .bron { font-size: .85rem; color: var(--ink-muted); font-style: italic; }
.pain .antwoord {
  background: var(--green-soft); border-left: 4px solid var(--green); border-radius: 10px;
  padding: 12px 16px; display: grid; gap: 4px; font-size: .95rem; color: var(--ink-2);
}
.antwoord-label { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.antwoord-label svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .pains { grid-template-columns: 1fr; } }

/* ---------- spotlights met app-screens ---------- */
.spot { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-5); align-items: center; }
.spot + .spot { margin-top: var(--s-6); }
.spot.omgekeerd .spot-tekst { order: 2; }
.spot-tekst { position: relative; }
.spot-tekst::before {
  content: ""; position: absolute; inset: -52px -85px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,242,236,.97) 52%, rgba(244,242,236,.75) 76%, rgba(244,242,236,0) 100%);
}
.spot-tekst h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin-bottom: 14px; }
.spot-tekst > p { color: var(--ink-soft); }
.spot-punten { list-style: none; display: grid; gap: 10px; margin-top: var(--s-3); }
.spot-punten li { display: flex; gap: 10px; font-size: .98rem; align-items: flex-start; }
.spot-punten svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
@media (max-width: 860px) { .spot { grid-template-columns: 1fr; } .spot.omgekeerd .spot-tekst { order: 0; } }

/* app-screen mockup, in de stijl van de echte app */
.app-screen {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  max-width: 400px; width: 100%; margin: 0 auto; overflow: hidden; font-size: .88rem; line-height: 1.45;
}
.as-top { display: flex; gap: 9px; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line-soft); font-weight: 700; font-family: var(--font-display); font-size: .95rem; }
.as-top img { width: 20px; height: 20px; border-radius: 6px; }
.as-top b { color: var(--ochre-dark); font-weight: inherit; }
.as-body { padding: 16px; display: grid; gap: 12px; }
.as-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-kop strong { font-size: .95rem; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.chip-amber { background: #fbf2dd; color: #8a5f00; }
.chip-green { background: var(--green-soft); color: var(--green); }
.chip-ochre { background: var(--ochre-soft); color: var(--ochre-dark); }
.chip-blue { background: #e6eff7; color: #31597c; }
/* Meertaligheid: de talenstrip onder de sectiekop. Rustige witte pillen;
   oker alleen als dun accent op de eerste (de brontaal). */
.taal-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-3); }
.taal-strip .chip { background: #fff; border: 1px solid var(--line-soft); color: var(--ink-soft); font-size: .78rem; font-weight: 600; padding: 5px 13px; }
.taal-strip .chip.is-bron { border-color: var(--ochre-line); color: var(--ochre-dark); }
.tl { list-style: none; display: grid; }
.tl li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.tl li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--green); background: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.tl .dot svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tl li.open .dot { background: #fff; border-color: var(--ink-muted); }
.tl time { display: block; font-size: .72rem; color: var(--ink-muted); }
.tl p { font-size: .85rem; }
.as-rij { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.as-rij:last-child { border-bottom: none; }
.as-rij .bedrag { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-balk { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.as-balk span { display: block; height: 100%; width: 89%; background: var(--green); border-radius: 99px; }
.as-voet { padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.as-voet svg { flex: 0 0 16px; width: 16px; height: 16px; }

/* ---------- vergelijking ---------- */
.vergelijk-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }
table.vergelijk { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .95rem; }
.vergelijk th, .vergelijk td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.vergelijk tr:last-child th, .vergelijk tr:last-child td { border-bottom: none; }
.vergelijk thead th { font-family: var(--font-display); font-size: 1.02rem; border-bottom: 2px solid var(--line); }
.vergelijk thead th.hl { color: var(--ochre-dark); }
.vergelijk tbody th { font-weight: 600; color: var(--ink-2); }
.vergelijk td.hl { background: var(--ochre-soft); font-weight: 600; }
.v-ja { color: var(--green); font-weight: 700; }
.v-nee { color: var(--red); font-weight: 700; }
.v-half { color: #9a6a00; font-weight: 600; }
.vergelijk-noot { font-size: .85rem; color: var(--ink-soft); margin-top: var(--s-2); background: rgba(244,242,236,.9); border-radius: 10px; padding: 10px 14px; display: inline-block; }

/* ---------- prijstiers ---------- */
.kosten-anker {
  background: var(--surface-2); border: 1.5px dashed var(--ink-muted); border-radius: var(--r-lg);
  padding: 22px 28px; max-width: 760px; margin: 0 auto var(--s-4); text-align: center; color: var(--ink-soft); font-size: 1.02rem;
}
.kosten-anker strong { color: var(--ink); }
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); align-items: stretch; max-width: 760px; margin: 0 auto; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow-sm); }
.tier.uitgelicht { background: var(--ink); color: #f4f2ec; box-shadow: var(--shadow); position: relative; }
.tier h3 { font-size: 1.15rem; }
.tier.uitgelicht h3 { color: var(--ochre); }
.tier .prijs { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.tier .prijs small { font-size: .4em; font-family: var(--font-body); font-weight: 500; }
.tier .prijs-jaar { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.tier.uitgelicht .prijs-jaar { color: #c6cddb; }
.tier .sub { font-size: .92rem; color: var(--ink-soft); }
.tier.uitgelicht .sub { color: #c6cddb; }
.tier ul { list-style: none; display: grid; gap: 8px; font-size: .95rem; color: var(--ink-soft); }
.tier.uitgelicht ul { color: #c6cddb; }
/* Op de donkere kaart valt een navy knop weg tegen de achtergrond; daar wordt
   de primaire knop wit met donkere tekst, dezelfde omkering als de kop. */
.tier.uitgelicht .btn-primary { background: #fff; color: var(--ink); }
.tier.uitgelicht .btn-primary:hover { background: #efece4; }
/* De twee prijskaarten staan naast elkaar: als de ene knop bij hover omhoog
   wipt en de andere niet, oogt dat als een fout. Hier wipt er dus geen een;
   de hoverkleur is de terugkoppeling. */
.tier .btn:hover { transform: none; box-shadow: var(--shadow-sm); }
.tier li { display: flex; gap: 8px; align-items: flex-start; }
.tier li svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; }
.kosten-noot { text-align: center; color: var(--ink-soft); font-size: .95rem; max-width: 640px; margin: var(--s-4) auto 0; background: rgba(244,242,236,.9); border-radius: 12px; padding: 12px 18px; }
.rekenvoorbeeld {
  max-width: 760px; margin: var(--s-4) auto 0; background: var(--green-soft); border: 1px solid #cfe5da;
  border-radius: var(--r-lg); padding: 22px 28px; text-align: center; font-size: 1.02rem; color: var(--ink-2);
}
.rekenvoorbeeld strong { color: var(--green); }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- hero feitenregel ---------- */
.hero-feiten { display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: center; font-size: .95rem; color: var(--ink-soft); font-weight: 500; }
.hero-feiten span { display: inline-flex; align-items: center; gap: 7px; }
.hero-feiten svg { width: 16px; height: 16px; flex: none; }

/* ---------- usp-strip: kies je onderwerp ---------- */
.kort { padding-top: var(--s-5); }
.usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
a.usp {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: grid; gap: 10px; align-content: start;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.usp:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--ochre-line); text-decoration: none; }
.usp h3 { font-size: 1.08rem; }
.usp p { font-size: .93rem; color: var(--ink-soft); }
.usp .meer { color: var(--ochre-dark); font-weight: 700; font-size: .9rem; }
@media (max-width: 860px) { .usps { grid-template-columns: 1fr; } }

/* ---------- brug: van drie beloftes naar het volledige aanbod ---------- */
.kort-brug { margin-top: var(--s-4); display: grid; gap: 14px; justify-items: center; text-align: center; position: relative; }
.kort-brug::before {
  content: ""; position: absolute; inset: -30px -70px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,242,236,.92) 45%, rgba(244,242,236,.55) 72%, rgba(244,242,236,0) 100%);
}
.kort-brug p { color: var(--ink-soft); max-width: 36em; }
.kort-brug p strong { color: var(--ink); }
.brug-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.brug-pills a {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.brug-pills a:hover { border-color: var(--ochre-line); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- functies: het aanbod per thema ---------- */
.module-groepen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.module-groep {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; display: grid; gap: 14px; align-content: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.module-groep:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--ochre-line); }
.module-groep header { display: flex; align-items: center; gap: 12px; }
.module-groep h3 { font-size: 1.1rem; }
.module-groep ul { list-style: none; display: grid; gap: 9px; font-size: .93rem; color: var(--ink-soft); }
.module-groep li { display: flex; gap: 9px; align-items: flex-start; }
.m-ok { color: var(--green); font-weight: 700; flex: none; line-height: 1.5; }
@media (max-width: 1000px) { .module-groepen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .module-groepen { grid-template-columns: 1fr; } }

/* ---------- echte cijfers kaart (verhaal) ---------- */
.cijfers-kaart dl { display: grid; gap: 12px; margin: 0; }
.cijfers-kaart .rij { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 1px solid #3a4763; padding-bottom: 10px; }
.cijfers-kaart .rij:last-child { border-bottom: none; padding-bottom: 0; }
.cijfers-kaart dt { color: #aab4c8; font-size: .95rem; margin: 0; }
.cijfers-kaart dd { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff; white-space: nowrap; }
.cijfers-kaart .kaart-kop { color: var(--ochre); font-weight: 700; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 16px; }

/* ---------- vergelijkingstabel: vaste eerste kolom + schuif-hint ---------- */
.vergelijk thead th:first-child, .vergelijk tbody th {
  position: sticky; left: 0; background: #fff; z-index: 1;
  box-shadow: 6px 0 8px -6px rgba(60,50,30,.18);
}
.schuif-hint { display: none; }
@media (max-width: 860px) {
  .schuif-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
  .schuif-hint svg { width: 16px; height: 16px; }

  /* UX-99: de koppenkolom is sticky en pakte met de vrije kolombreedte meer dan
     de helft van een telefoonscherm, waardoor de SamenVvE-kolom half buiten
     beeld begon. Daarom vaste maten voor juist die twee kolommen: 140 + 190 =
     330px past binnen de 335px die een toestel van 375px overhoudt na de
     padding van .wrap. Op een ruimer toestel blijft er een streepje van de
     derde kolom zichtbaar, en dat is precies de hint dat er meer rechts staat.
     De twee kolommen waar je naartoe schuift houden zo elk ruim 200px. */
  table.vergelijk { font-size: .9rem; }
  .vergelijk th, .vergelijk td { padding: 12px 12px; }
  .vergelijk thead th:first-child, .vergelijk tbody th {
    width: 140px; min-width: 140px; max-width: 140px;
    /* Geen 'hyphens: auto' hier: die brak ook gewone woorden af die prima op de
       volgende regel pasten ("Innen op de ei-gen rekening"), en dat leest
       slordig. In deze kolom is 116px over voor tekst, dus zo'n 16 tekens per
       regel. Sinds de rijkoppen korter zijn (UX-100) past alles daarin op één
       woord na: 'tweestapsverificatie' heeft in de tekst zelf een zacht
       afbreekstreepje (&shy;) gekregen, op een plek die klopt. Onzichtbaar zolang
       er ruimte is, dus op desktop merk je er niets van. break-word is alleen
       nog het vangnet als er ooit een lang woord bijkomt. */
    overflow-wrap: break-word;
  }
  .vergelijk .hl { width: 190px; min-width: 190px; }
}

/* ---------- aanvraagformulier (demo / kennismaking) ---------- */
.aanvraag {
  max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; display: grid; gap: 16px; text-align: left; box-shadow: var(--shadow);
}
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 600; font-size: .92rem; }
.veld input {
  min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font: inherit; background: var(--surface); color: var(--ink); width: 100%;
}
.veld input:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.keuze { border: none; padding: 0; display: grid; gap: 8px; }
.keuze legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 4px; }
.keuze label { display: flex; gap: 10px; align-items: center; font-size: .98rem; min-height: 32px; cursor: pointer; }
.keuze input { width: 20px; height: 20px; accent-color: var(--ochre); flex: none; }
.aanvraag .btn { width: 100%; }
.form-noot { font-size: .82rem; color: var(--ink-muted); text-align: center; }
.form-noot a { color: var(--ochre-dark); }
/* Honeypot bij het aanvraagformulier: voor mensen onzichtbaar en onbereikbaar,
   bots vullen het toch in en verraden zichzelf bij de demo-aanmelding. */
.niet-invullen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* hidden moet winnen van de display:grid hieronder, anders blijft het formulier
   na versturen staan naast de bevestiging. */
.aanvraag[hidden], .aanvraag-ok[hidden] { display: none; }
.aanvraag-ok { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid #cfe5da; border-left: 5px solid var(--green); border-radius: var(--r-lg); padding: 26px; text-align: left; box-shadow: var(--shadow); display: grid; gap: 12px; }
.aanvraag-ok h3 { font-size: 1.2rem; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.aanvraag-ok h3 svg { flex: none; width: 26px; height: 26px; }
.aanvraag-ok p { color: var(--ink-soft); font-size: .98rem; }
.aanvraag-ok .btn { width: 100%; margin-top: 4px; }
.aanvraag-ok:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }
.tier-noot { font-size: .88rem; color: var(--green); font-weight: 600; }
.tier.uitgelicht .tier-noot { color: #8fd4b2; }

/* ---------- veelgestelde vragen ---------- */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--ochre-dark); font-family: var(--font-body); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq .antwoord-tekst { padding: 16px 24px 22px; color: var(--ink-soft); font-size: 1rem; }
.faq .antwoord-tekst a { color: var(--ochre-dark); }

/* ---------- ai-hulp ---------- */
.ai-afspraken-kop { text-align: center; margin: var(--s-5) auto var(--s-4); max-width: 560px; position: relative; display: grid; gap: 10px; justify-items: center; }
.ai-afspraken-kop::before {
  content: ""; position: absolute; inset: -28px -70px; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(244,242,236,.92) 45%, rgba(244,242,236,.5) 75%, rgba(244,242,236,0) 100%);
}
.ai-afspraken-kop h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.ai-afspraken-kop p { color: var(--ink-soft); font-size: 1rem; }
.ai-afspraken { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); max-width: 940px; margin: 0 auto; }
.ai-afspraak {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-content: start;
}
.ai-afspraak .feature-icon { grid-row: span 2; }
.ai-afspraak h3 { font-size: 1.08rem; align-self: center; }
.ai-afspraak p { grid-column: 2; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 700px) { .ai-afspraken { grid-template-columns: 1fr; } }

/* ---------- ai-functies: alles op een rij, ingeklapt ---------- */
.ai-alle { max-width: 780px; margin: var(--s-4) auto 0; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ai-alle summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.ai-alle summary::-webkit-details-marker { display: none; }
.ai-alle summary::after { content: "+"; font-size: 1.6rem; color: var(--ochre-dark); font-family: var(--font-body); line-height: 1; flex: none; }
.ai-alle[open] summary::after { content: "\2013"; }
.ai-alle[open] summary { border-bottom: 1px solid var(--line-soft); }
.ai-functie-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; padding: 20px 24px; }
.ai-functie-lijst h4 { font-size: .98rem; margin-bottom: 2px; }
.ai-functie-lijst p { font-size: .9rem; color: var(--ink-soft); }
.ai-alle .ai-noot { padding: 0 24px 20px; font-size: .88rem; color: var(--ink-muted); }
@media (max-width: 640px) { .ai-functie-lijst { grid-template-columns: 1fr; } }

/* ---------- reveal on scroll ----------
   AUD-216: verbergen mag alleen onder html.js (gezet door js/js-vlag.js in
   de head, vóór de eerste render). Zonder JavaScript bestond de vlag niet en
   was vrijwel de hele homepage onzichtbaar, inclusief de bestelterugval van
   AUD-43; nu is zichtbaar de standaard en is de animatie de opt-in. */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .step-card, .feature, .kb-toc summary::before { transition: none; }
}

/* ---------- juridische pagina's (over, privacy, voorwaarden) ---------- */
/* Lopende tekst hoort hier op een kaart en niet los op de wijk-illustratie:
   die achtergrond is gemaakt om ONDER kaarten door te lopen, en tekst die er
   direct op staat wordt onleesbaar zodra er een huis achter valt. Zelfde
   kaartbehandeling als de rest van de site. */
.doc-kaart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.doc-kaart > :first-child { margin-top: 0; }
.doc-kaart h2 { margin-top: var(--s-4); }
.doc-kaart h2:first-of-type { margin-top: var(--s-2); }

/* AUD-176: verving een losse inline style-combinatie (margin-top plus
   gedempte inktkleur) die op tientallen alinea's en lijsten van de
   juridische pagina's werd herhaald. Eén klasse, zodat de "gedempte
   lopende tekst"-stijl op één plek aanpasbaar is. */
.doc-alinea { margin-top: var(--s-2); color: var(--ink-soft); }

@media (max-width: 640px) {
  /* Niet tegen de schermrand: dan raakt de kaartrand het glas en
     leest het als een fout in plaats van als een kaart. */
  .doc-kaart { padding: var(--s-4) var(--s-3); margin: 0 14px; }
}

/* Foutpagina (404): eigen klassen in plaats van inline styles, in lijn met
   de opruiming van AUD-176; nodig om style-src ooit strikt te krijgen. */
/* .sectie-strak (AUD-337) doet hetzelfde op de homepage en de juridische
   pagina's; een regel, zodat die maat op een plek staat. */
.fout-sectie, .sectie-strak { padding-top: var(--s-4); }
.fout-kaart { max-width: 760px; text-align: center; }
.fout-kaart h1 { margin-top: var(--s-2); }
.fout-lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.fout-actie { margin-top: var(--s-5); margin-bottom: var(--s-4); }


/* ==========================================================
   AUD-337: van style-attributen naar klassen
   ==========================================================
   Dezelfde opruimroute als AUD-176 (.doc-alinea) en AUD-186 (de
   404-pagina), nu voor de 69 resterende style-attributen. Twee redenen:

   1. Beveiliging. Zolang er ergens een style-attribuut staat, moet de
      Content-Security-Policy 'unsafe-inline' in style-src houden, en dan
      mag een injectie ook opgemaakte content of een overlay tonen.
   2. Onderhoud. Een maat die los in de HTML staat, verandert nooit op alle
      plekken tegelijk; dat is precies hoe de schil eerder uit de pas liep.

   De regels hieronder zijn een letterlijke overzetting van wat er in die
   attributen stond: geen enkele berekende waarde verandert. Waar de
   bestaande CSS het al deed (de afstand tussen twee .spot-blokken staat in
   .spot + .spot) is het attribuut simpelweg weggehaald.
   .github/scripts/check_no_repeated_inline_style.py bewaakt vanaf nu de
   telling, met een plafond dat alleen omlaag mag. */

/* ---------- juridische pagina's (over, privacy, voorwaarden) ---------- */
.doc-kaart { max-width: 760px; }
.doc-kaart h1 { margin-top: var(--s-2); }
.doc-kaart .lead { max-width: none; }
.doc-blok { margin-top: var(--s-4); }
.doc-blok-ruim { margin-top: var(--s-5); }
/* Laatste blok voor de slotregel: houdt afstand tot de streep eronder. */
.doc-slot { margin-bottom: var(--s-5); }
.doc-lijst { display: grid; gap: 8px; padding-left: 1.2em; }
.doc-gegevens { list-style: none; display: grid; gap: 10px; font-size: .98rem; }
.doc-gegevenskaart { margin-top: var(--s-2); max-width: 520px; }
.doc-slotregel {
  color: var(--ink-muted); font-size: .9rem;
  border-top: 1px solid var(--line); padding-top: var(--s-3);
}

/* ---------- homepage ---------- */
.section-head.strak { margin-bottom: var(--s-4); }
.story-kop { margin: 18px 0 22px; }
.steps-ruim { margin-top: var(--s-5); }
/* De vijf buurtgezichten in de hero. Losse kleuren, geen betekenis: ze
   staan voor vijf verschillende mensen. Waar een tokenkleur precies gelijk
   was, staat het token er (dezelfde waarde, een bron). */
.av-oker  { background: var(--ochre); }
.av-groen { background: var(--green); }
.av-blauw { background: #2c4d80; }
.av-rood  { background: var(--red); }
.av-grijs { background: var(--ink-soft); }
/* Chip die rechts uitlijnt in een .as-rij, zoals .bedrag dat al deed. */
.chip-rechts { margin-left: auto; }
/* Tweede kop binnen hetzelfde voorbeeldscherm, na een rij eronder. */
.as-kop-vervolg { margin-top: 6px; }
/* Vulling van de stembalk. De maat hoort bij het voorbeeld (68 procent
   voor), vandaar een eigen klasse en geen los attribuut. */
.as-balk span.vul-68 { width: 68%; }
.tl-strak { margin-top: 4px; }
/* Geciteerd fragment in een voorbeeldscherm: het origineel uit de notulen,
   en de Turkse mededeling. */
.as-citaat {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 12px 14px; font-size: .85rem;
}
.as-citaat-cursief { font-style: italic; }
/* Rij met alleen actiechips: geen scheidingslijn, dicht op de rij erboven. */
.as-rij-acties { border-bottom: none; padding: 2px 0 0; gap: 8px; flex-wrap: wrap; }
/* Toelichting in de vergelijkingstabel, kleiner en gedempt. In de kop ook
   in de tekstletter, want daar staat de kop zelf in de displayletter. */
.vergelijk small { color: var(--ink-muted); }
.vergelijk thead th small { font-weight: 400; font-family: var(--font-body); }


/* ==========================================================
   MKT-2: de kennisbank (/kennisbank/)
   ==========================================================
   Eigen klassen, geen eigen stijlblok en geen style-attributen: de
   kennisbank draait op deze gedeelde stylesheet, net als de rest van de
   site. De artikelen zelf lenen de leesbreedte van de juridische pagina's
   (.doc-kaart, max 760px) zodat lopende tekst overal even breed leest;
   alleen wat de kennisbank echt toevoegt (kruimelpad, kaartenlijst,
   gerelateerde artikelen, de demoverwijzing) staat hieronder. */

/* ---------- overzichtspagina ---------- */
/* UX-117: de kennisbank als kaartenbak. Eén paneel tilt de bibliotheek van
   de wijkillustratie (tekst staat nooit meer los op de tekening); daarin
   een filterrij met per onderwerp de telling, en één plat raster met de
   nieuwste artikelen bovenaan. De filterrij is een JS-verrijking en staat
   daarom achter de js-vlag van AUD-216: zonder JavaScript blijft de rij weg
   en staan alle kaarten gewoon zichtbaar. De actieve tag is gevuld in inkt
   (het stempel van de kaartenbak), met de telling in oker als accent. */
.kb-paneel {
  margin-top: var(--s-4); background: var(--canvas);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--s-4);
}
@media (max-width: 640px) { .kb-paneel { padding: var(--s-3); } }
/* UX-120: de zoekbalk is de la van de kaartenbak, een volle-breedte pil met
   loep boven de tags. Net als de filterrij een JS-verrijking achter de
   js-vlag: zonder JavaScript geen dood veld en alle kaarten zichtbaar. */
.kb-zoek { display: none; }
html.js .kb-zoek {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--canvas); padding: 9px 16px;
  transition: border-color .15s ease;
}
html.js .kb-zoek:focus-within { border-color: var(--ochre-dark); }
.kb-zoek-icoon { width: 17px; height: 17px; color: var(--ink-muted); flex: none; }
.kb-zoek input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.kb-zoek input::placeholder { color: var(--ink-muted); }
/* De lege staat wijst de weg: term, suggestie en een knop terug naar alles. */
.kb-leeg { margin-top: var(--s-3); color: var(--ink-soft); }
.kb-leeg .kb-tag { margin-top: 10px; }
.kb-filter { display: none; }
html.js .kb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-filterkop {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-right: 4px;
}
.kb-tag {
  appearance: none; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--ink-soft); background: var(--canvas);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kb-tag:hover { border-color: var(--ochre-line); color: var(--ink); }
.kb-tag:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 2px; }
.kb-tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kb-tag-tal { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.kb-tag[aria-pressed="true"] .kb-tag-tal { color: var(--ochre); }
.kb-teller { margin-top: 12px; font-size: .9rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* UX-122: de inhoudsopgave als tabbladenregister van de kaartenbak. Dicht is
   hij één regel boven de teller; open toont hij per onderwerp een tab in de
   kaartlabelstijl, en elke tab klapt uit naar de titels erachter. Native
   details/summary en bewust NIET achter de js-vlag: zonder JavaScript zijn
   de zoekbalk en de filterrij er niet, en dan is dit register de enige
   snelle weg door de lijst. */
.kb-toc { margin-top: 12px; }
.kb-toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; }
.kb-toc summary::-webkit-details-marker { display: none; }
.kb-toc summary:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 2px; }
/* De chevron komt uit de CSS en niet uit een herhaald SVG-symbool: dicht
   wijst hij naar rechts, open naar beneden. */
.kb-toc summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ochre-dark); border-bottom: 2px solid var(--ochre-dark);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.kb-toc details[open] > summary::before { transform: rotate(45deg); }
.kb-toc summary .kb-tag-tal { margin-left: 0; }
.kb-toc > details > summary {
  font-weight: 600; font-size: .95rem; color: var(--ink-2); padding: 9px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); transition: border-color .15s ease, color .15s ease;
}
.kb-toc > details > summary:hover { border-color: var(--ochre-line); color: var(--ink); }
.kb-toc > details[open] > summary { border-radius: var(--r) var(--r) 0 0; }
.kb-toc-groepen {
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); background: var(--canvas);
  padding: 2px 16px 10px;
}
.kb-toc-groep + .kb-toc-groep { border-top: 1px solid var(--line-soft); }
.kb-toc-groep > summary {
  padding: 11px 0;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ochre-dark);
}
.kb-toc-lijst { list-style: none; padding-left: 17px; }
.kb-toc-lijst li + li { border-top: 1px solid var(--line-soft); }
.kb-toc-lijst a {
  display: block; padding: 8px 0; font-size: .95rem;
  color: var(--ink-soft); text-decoration: none;
}
.kb-toc-lijst a:hover { color: var(--ink); text-decoration: underline; }
/* De metaregel van een kaart: onderwerp links (klein kapitaal, oker), datum
   rechts. Twee niveaus structuur: de filterrij is de navigatie, het label
   op de kaart de herkomst. */
.kb-kaart-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.kb-onderwerp {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ochre-dark);
}
/* .kb-kaart zet display:grid en wint dat anders van de UA-regel voor
   [hidden]; zonder deze regel filtert de filterrij dus niets weg. */
.kb-kaart[hidden] { display: none; }
.kb-lijst { margin-top: var(--s-3); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); list-style: none; }
.kb-kaart {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s-3); display: grid; gap: 10px; align-content: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kb-kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kb-kaart h2, .kb-kaart h3 { font-size: 1.35rem; line-height: 1.25; }
.kb-kaart h2 a, .kb-kaart h3 a { color: var(--ink); text-decoration: none; }
.kb-kaart h2 a:hover, .kb-kaart h3 a:hover { text-decoration: underline; }
.kb-kaart p { color: var(--ink-soft); font-size: .98rem; }
.kb-datum { font-size: .85rem; color: var(--ink-muted); }
.kb-meer { font-weight: 600; font-size: .95rem; color: var(--ochre-dark); text-decoration: none; }
.kb-meer:hover { text-decoration: underline; }
/* Eerlijke regel onder de lijst zolang de kennisbank nog groeit. */
.kb-noot { margin-top: var(--s-4); color: var(--ink-muted); font-size: .92rem; }
@media (max-width: 860px) { .kb-lijst { grid-template-columns: 1fr; } }

/* ---------- artikelsjabloon ---------- */
/* UX-123: het leesvlak van een artikel is wit, gelijk aan de kaartenbak van
   het overzicht. De doc-kaart zelf blijft crème voor de juridische pagina's;
   lange leestekst op crème leest op een telefoon als grauw grijs. */
.doc-kaart.kb-artikel-kaart { background: var(--canvas); }
/* Kruimelpad: klein en gedempt, want het is oriëntatie en geen inhoud. De
   scheidingstekens komen uit de CSS en niet uit de opmaak, zodat een
   schermlezer de lijst voorleest zonder losse leestekens ertussen. */
.kb-kruimels { font-size: .88rem; color: var(--ink-muted); }
.kb-kruimels ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-kruimels li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.kb-kruimels a { color: var(--ink-soft); text-decoration: none; }
.kb-kruimels a:hover { text-decoration: underline; }
.kb-kruimels [aria-current="page"] { color: var(--ink-muted); }
/* UX-119: de eerste kruimel is een echte terugknop, in de pilvorm van de
   filtertags op het overzicht. Op smalle schermen vervalt de paginanaam
   ernaast; de titel staat er direct onder. */
.kb-terug {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--canvas);
  font-weight: 600; color: var(--ink-2);
  transition: border-color .15s ease, color .15s ease;
}
.kb-terug svg { width: 16px; height: 16px; }
.kb-terug:hover { border-color: var(--ochre-line); color: var(--ink); text-decoration: none; }
.kb-terug:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 2px; }
@media (max-width: 640px) {
  .kb-kruimels li[aria-current="page"] { display: none; }
}

/* UX-118: artikeltitels zijn hele zinnen; de homepage-maat van h1 (minimaal
   2.4rem) maakte ze op een telefoon een muur van vier regels en het lange
   woord verduurzamingsbesluit liep zelfs uit beeld. Eigen schaal, plus nette
   afbreking: hyphens werkt dankzij lang="nl" op <html>, overflow-wrap is de
   terugval voor engines zonder Nederlands afbreekwoordenboek. */
.kb-artikelkop {
  margin-top: var(--s-2);
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.kb-kaart h2, .kb-kaart h3, .kb-tekst h2 { overflow-wrap: break-word; hyphens: auto; }
/* Vangnet voor lange samenstellingen in de lopende tekst (zoals
   bestuurdersaansprakelijkheidsverzekering): breekt alleen wat anders
   overloopt, zonder de tekst te hyphenaten. */
.kb-tekst, .kb-demo p, .kb-verder-lijst a { overflow-wrap: break-word; }
.kb-artikel-datum { margin-top: var(--s-2); font-size: .9rem; color: var(--ink-muted); }
.kb-tekst { margin-top: var(--s-4); }
.kb-tekst h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.kb-genummerd { list-style: decimal; }

/* Gerelateerde artikelen: het laatste blok van een artikel, een rustige lijst
   achter een streep, geen tweede kaart in de kaart. De afslag voor wie na de
   demovraag nog niet klaar is. */
.kb-verder { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.kb-verder h2 { font-size: 1.25rem; }
.kb-verder-lijst { list-style: none; display: grid; gap: 10px; margin-top: var(--s-2); }
.kb-verder-lijst a { color: var(--ink); }

/* MKT-16 (#1041): de bronnen onder de artikeltekst, ingeklapt in hetzelfde
   stille register als de artikeldatum. De tekst draagt het verhaal; dit blok
   laat zien waar hij op steunt. */
.kb-bronnen { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.kb-bronnen summary { cursor: pointer; font-size: .95rem; color: var(--ink-muted); }
.kb-bronnen ul { list-style: none; margin-top: var(--s-2); display: grid; gap: 8px; font-size: .92rem; color: var(--ink-soft); }
.kb-bronnen a { color: var(--ink); }

/* De demoverwijzing, direct onder de tekst die ernaartoe leidt. Bewust een
   blok in de pagina en geen popup of balk die meeschuift: wie het artikel
   uitleest mag de vraag krijgen, wie halverwege stopt niet. */
.kb-demo {
  margin-top: var(--s-4); margin-bottom: var(--s-2);
  background: var(--ochre-soft); border: 1px solid var(--ochre-line);
  border-radius: var(--r-lg); padding: var(--s-3);
  display: grid; gap: var(--s-2); justify-items: start;
}
.kb-demo p { color: var(--ink-soft); max-width: 44em; }
.kb-demo .btn { min-height: 46px; padding: 12px 24px; font-size: .98rem; }