@import url('tokens.css?v=758cee1e'); /* de enige plek waar kleuren staan — zie tokens.css */
@import url('chrome.css?v=78660177'); /* header, mobiel menu en voettekst - ook geladen door src/index.css */
/* ============================================================================
   VoiceHelden — website-v2
   Opzet, sectie-indeling en UX-patronen volgen fonio.ai/nl: wit canvas,
   1px-borders in plaats van schaduwen, radius 12px, sticky witte header van
   72px, container 1152px, secties van 48px, koppen in medium gewicht.

   Kleuren volgen sinds 3 september 2026 ook fonio, conform de huisstijl in
   voicehelden-hq/CLAUDE.md: near-black tekst #0F0F16, koppen #020617, accent
   indigo #585DFE, border #E1E3F4. Typografie blijft Plus Jakarta Sans - een
   bewuste afwijking van fonio's Roboto. Teksten, beelden, cijfers, logo's en
   testimonials van fonio blijven verboden; alleen vorm is overgenomen.
   ========================================================================= */

/* De kleurtokens stonden hier tot 13 september 2026 als eigen :root-blok. Ze
   staan nu in assets/tokens.css, dat hierboven als eerste regel wordt
   geïmporteerd, zodat de React-app (src/index.css) exact dezelfde waarden
   gebruikt. De regels van een @import komen in de cascade op de plek van de
   import te staan — dus vóór alles hieronder, precies waar het :root-blok
   stond. Aan de weergave verandert er niets.
   Definieer hier geen :root opnieuw: dat zou de import stil overschrijven en
   de twee lagen weer uit elkaar laten lopen. */

/*
  Self-hosted Plus Jakarta Sans (W79), latin and latin-ext subsets of the
  variable font (SIL Open Font License, see assets/fonts/). The pages used to
  load it from Google Fonts, which sent the visitor's IP address to
  Google before consent. Do not add a font stylesheet from a CDN.
*/
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* --- reset ---------------------------------------------------------------- */

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

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.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;
}

/* --- layout -------------------------------------------------------------- */

/* .wrap staat sinds W60 in chrome.css: de voettekst gebruikt hem ook. */
.wrap--narrow { max-width: 720px; }

.section { padding: 72px 0; position: relative; } /* 21 sep 2026: fonio.ai meet 80px; 48px stond te dicht op elkaar */
.section--tight { padding: 48px 0; }
.section--wide  { padding: 112px 0; }
.section--canvas { background: var(--canvas); }
.section--navy { background: var(--navy-deep); }

@media (max-width: 720px) {
  .section, .section--wide { padding: 56px 0; }
}

.center { text-align: center; }

/* --- typografie ---------------------------------------------------------- */

.h-hero    { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.15; }
.h-section { font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.2; }
.h-card    { font-size: 18px; font-weight: 600; }

.lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
.copy { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }
.small { font-size: 13.5px; color: var(--muted-2); }
/* De prijsregel die bij elke 'Maak jouw eigen AI-receptionist'-knop hoort. Het woord
   'gratis' staat nergens zonder deze regel in dezelfde blik (6:193/6:194 BW). */
.cta-note { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); margin: 10px 0 0; }
.section--navy .cta-note { color: rgba(255, 255, 255, 0.62); }
.mobile-nav .cta-note { margin-top: 12px; }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head .h-section { margin-bottom: 14px; }
.section--navy .h-section, .section--navy h3 { color: #fff; }
.section--navy .lead { color: rgba(255, 255, 255, 0.62); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--white);
  font-size: 13.5px; font-weight: 500; color: var(--navy);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.section--navy .eyebrow { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); }

.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 10px;
}

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

/* De basis .btn, .btn:active en .btn--sm staan in chrome.css (de header
   gebruikt ze), net als --dark, --outline, --quiet en .btn-row. Die import
   staat op regel 2, dus voor alles hier: de varianten hieronder komen er nog
   steeds na en overschrijven dus nog steeds wat ze overschreven. */
.btn--lg { height: 50px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }


.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); }


.btn--onnavy { background: #fff; color: var(--navy-deep); }
.btn--onnavy:hover { background: #EEEFFE; }


.btn-row--center { justify-content: center; }

/* De header, het mobiele menu en de voettekst staan sinds W60 in
   chrome.css, dat hierboven op regel 2 wordt geimporteerd. De React-app laadt
   hetzelfde bestand, zodat de SEO-pagina's dezelfde chrome hebben in plaats
   van een herstylede kopie ervan. */

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

/* 44px boven en 14px onder de kop (was 56/18): zo staat de regel "In 15 minuten
   live" op 1024x768 net boven de vouw (review 9 sep 2026). */
.hero { position: relative; overflow: hidden; padding: 64px 0 72px; text-align: center; }
.hero-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero .h-hero { margin-bottom: 14px; }
.hero .lead { max-width: 560px; margin: 0 auto 28px; }

/* Zachte gradient-vormen, zelfde rol als de pastelvormen bij fonio */
.aura { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.aura--l { top: -120px; left: -140px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(30, 58, 102, 0.16), transparent 68%); }
.aura--r { top: -80px; right: -160px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(232, 119, 34, 0.16), transparent 68%); }

/* Belblok (W37, Steven 9 sep 2026: "meer zoals fonio.ai/nl, simpeler"): één
   witte kaart met twee regels — landcode + nummer, en een gevulde knop over de
   volle breedte. Het naamveld staat verborgen in dezelfde kaart en verschijnt
   pas als er zonder naam wordt verstuurd (app.js, sectie 6); vandaar dezelfde
   rij-opmaak. Zachte schaduw is hier de enige uitzondering op "geen schaduw":
   de kaart moet loskomen van de aura's erachter. */
.call-form { max-width: 420px; margin: 0 auto; }
.call-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; text-align: left;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  /* 21 sep 2026: geen schaduw meer; fonio tekent kaarten met alleen de 1px rand */
}
/* W93 (24 sep 2026): de regel boven de velden die zegt wat de kaart doet. */
.call-card__title { margin: 2px 2px -2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.call-card__row {
  display: flex; align-items: stretch; height: 48px; min-width: 0; /* anders bepaalt de intrinsieke breedte van het tel-veld de rij en loopt hij op 320px uit de kaart */
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.call-card__row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.call-card__row .dial {
  flex: 0 0 auto; border: 0; border-right: 1px solid var(--border); border-radius: 0;
  background: transparent; padding: 0 8px 0 12px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
/* De rij toont de focus al met :focus-within; de algemene :focus-visible-rand
   zou er een tweede kader in tekenen. */
.call-card__row .dial:focus-visible { outline: 0; }
.call-card__row input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink);
}
.call-card__row input::placeholder { color: var(--muted-2); }

/* W84 (Steven, 20 september 2026): naam en bedrijfsnaam delen één rij boven het
   nummer, met dezelfde scheidingslijn als de landcode ernaast. Onder 480px
   staan ze onder elkaar: twee velden van nog geen 160px met "Bedrijfsnaam"
   erin zijn met een duim niet te doen. De rij groeit dan mee in plaats van op
   48px te blijven staan. */
.call-card__row--duo input { flex: 1 1 50%; }
.call-card__row--duo input ~ input { border-left: 1px solid var(--border); }
@media (max-width: 480px) {
  .call-card__row--duo { height: auto; flex-direction: column; }
  .call-card__row--duo input { flex: 0 0 auto; height: 46px; }
  .call-card__row--duo input ~ input { border-left: 0; border-top: 1px solid var(--border); }
}

.call-card .btn { height: 48px; font-size: 15px; }
.call-card .btn svg { flex: 0 0 auto; }
.call-form .form-status { text-align: center; margin: 10px 0 0; }
.call-form .form-status:empty { display: none; }
.call-form .consent { margin: 12px auto 0; max-width: 400px; font-size: 12px; line-height: 1.6; color: var(--muted-2); }
.call-form .consent a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
/* W84 (Steven, 21 sep 2026): de zin wacht tot het formulier wordt aangeraakt; app.js zet en haalt de klasse. */
.call-form .consent.consent--wacht { display: none; }

/* Onder de kaart: stille demolink en één prijsregel. */
.hero-demo { margin: 18px 0 0; font-size: 14.5px; font-weight: 600; }
.hero-demo a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.hero-demo a:hover { text-decoration-color: var(--navy); }
.hero-price { margin: 10px auto 0; max-width: 600px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } /* 600px: de NL-regel past dan op één regel, net als de Engelse */

.form-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; min-height: 20px; }
.form-status.is-ok { color: var(--ok-text); }
.form-status.is-err { color: #b3261e; }
.form-status.is-info { color: var(--muted); }

.proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 28px; }
.proof-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--white);
}
.proof-pill .stack { display: flex; flex-direction: column; line-height: 1.1; }
.proof-pill .stars { display: inline-flex; gap: 1.5px; }
.proof-pill .lbl { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.proof-note { font-size: 13.5px; color: var(--muted-2); }

/* --- kaarten ------------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--navy); }
.card .ico {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--cool); margin-bottom: 6px;
}
.card .h-card { margin: 0; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card--link:hover { transform: translateY(-2px); }
.card--accent { background: var(--accent-tint); border-color: var(--warn-line); }
.card__foot { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }

.tag {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--cool); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
}

.tick-list { display: grid; gap: 9px; }
.tick-list li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tick-list svg { flex: 0 0 auto; margin-top: 3px; }

/* --- rondleiding (video) ------------------------------------------------- */

.tour {
  max-width: 832px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--canvas);
}
.tour__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--white);
}
.tour__bar .t { font-size: 14px; font-weight: 600; color: var(--navy); }
.tour__bar .d { flex: 0 0 auto; white-space: nowrap; font-size: 13px; color: var(--muted-2); } /* de duur breekt niet; de titel links mag wel omlopen */
/* W58: reserveer de juiste verhouding voordat metadata er is. Daarna wint
   de eigen verhouding van de opname, ook na schermrotatie zonder bronwissel. */
.tour video { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 10; object-fit: contain; background: #000; }
.tour video:fullscreen { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  #rondleiding .tour { max-width: none; margin-inline: calc(12px - var(--gutter)); }
  .tour video { aspect-ratio: auto 9 / 16; }
}
/* .btn zet zelf een display, en die wint van de browserregel voor [hidden]
   (zie de noot bij .intake-step): zonder deze regel staat de knop
   Schermvullend er ook in een browser die hem niet kan uitvoeren (W55). */
.btn[hidden] { display: none; }
.tour__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 18px; background: var(--white); border-top: 1px solid var(--border); }
/* Smal: de knoppen vullen de rij in plaats van dat de laatste alleen onderaan hangt. */
@media (max-width: 560px) { .tour__foot .btn { flex: 1 1 auto; } }

/* De zeven scenes als leesbare, aanklikbare hoofdstukken (W55).
   De desktop- en mobiele montage delen dezelfde voice-over en tijden. */
.tour-steps {
  max-width: 832px; margin: 20px auto 0; padding: 0; list-style: none;
  display: grid; gap: 2px;
}
.tour-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; border-top: 1px solid var(--border); }
.tour-steps li:first-child { border-top: 0; }
.tour-steps .t {
  /* 40px hoog: een tijdstempel is op een telefoon een knop, geen bijschrift. */
  flex: 0 0 auto; min-width: 56px; min-height: 40px; display: inline-flex;
  align-items: center; justify-content: center;
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--white); cursor: pointer;
  font: 600 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.tour-steps .t:hover { border-color: var(--accent); }
.tour-steps b { display: block; font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.tour-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* --- stappen ------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.step .n {
  font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em;
  display: block; margin-bottom: 12px;
}
.step h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* --- integraties --------------------------------------------------------- */

.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--navy);
}

/* --- reviews ------------------------------------------------------------- */

.quote {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
}
.quote p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.quote footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote .av { width: 34px; height: 34px; border-radius: 50%; background: var(--cool); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--navy); }
.quote .who b { display: block; font-size: 14px; color: var(--navy); }
.quote .who span { font-size: 12.5px; color: var(--muted-2); }
.quote--placeholder { background: repeating-linear-gradient(135deg, #fff, #fff 10px, #F7F8FC 10px, #F7F8FC 20px); border-style: dashed; }
.quote--placeholder p { color: var(--muted-2); font-style: italic; }

/* --- prijzen ------------------------------------------------------------- */

.guarantee {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--r-full); background: var(--ok-bg); border: 1px solid var(--ok-line);
  font-size: 13.5px; font-weight: 600; color: var(--ok-text);
}

.toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 30px 0 44px; }
.toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--canvas);
}
.toggle button {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--white); border-color: var(--border); color: var(--navy); }
.toggle .pct { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.toggle-note { font-size: 13.5px; color: var(--muted); min-height: 20px; margin: 0; text-align: center; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 26px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.plan--popular { border-color: var(--navy); }
.plan__badge {
  position: absolute; top: -11px; left: 26px;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--navy); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.plan h3 { font-size: 20px; font-weight: 600; }
.plan .fit { font-size: 13.5px; color: var(--muted-2); margin: 4px 0 18px; }
.plan .amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .amount .cur { font-size: 20px; font-weight: 500; color: var(--navy); }
.plan .amount .was { font-size: 20px; font-weight: 500; color: var(--muted-2); text-decoration: line-through; }
.plan .amount .now { font-size: 40px; font-weight: 600; color: var(--navy); letter-spacing: -0.03em; line-height: 1; }
.plan .save { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: var(--r-full); background: var(--accent-tint); color: var(--warn-text); font-size: 12px; font-weight: 700; }
.plan .terms { font-size: 12.5px; color: var(--muted-2); margin: 10px 0 20px; }
.plan .btn { margin-bottom: 8px; }
.plan .cta-note { margin: 0 0 12px; }
/* S40: de tweede startkeuze. Zichtbaar losgemaakt van de proefregel erboven,
   want het is een andere prijs en een andere garantie, geen voetnoot. */
.plan .paynow { margin: 0 0 20px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--canvas); font-size: 13px; line-height: 1.55; color: var(--ink); }
/* Dezelfde regel op elke kaart: wat een pakket wel en niet is. Onderaan, zodat
   de drie kaarten op dezelfde hoogte eindigen. */
.plan .plan-note { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--divider); font-size: 13px; line-height: 1.55; color: var(--muted-2); }
.plan .block-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 10px; }
.plan .plan-list { display: grid; gap: 9px; margin-bottom: 20px; }
.plan .plan-list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.plan .plan-list li b { color: var(--navy); font-weight: 600; }
.plan hr { border: 0; border-top: 1px solid var(--divider); margin: 0 0 18px; }

/* Vergelijkingstabel */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.compare { min-width: 720px; font-size: 14px; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--divider); }
.compare thead th { position: sticky; top: 0; background: var(--white); z-index: 1; }
.compare thead th span { display: block; font-size: 13px; font-weight: 500; color: var(--muted-2); }
.compare thead th b { font-size: 17px; color: var(--navy); }
.compare tbody th { font-weight: 500; color: var(--ink); width: 40%; }
.compare td { color: var(--muted); text-align: center; }
.compare tr.group th {
  background: var(--canvas); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.compare tr.group td { background: var(--canvas); }
.compare .yes { color: var(--ok-text); font-weight: 700; }
.compare .no { color: var(--muted-2); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 16px; font-weight: 500; color: var(--navy);
}
.faq-q .pm { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq-q .pm::before, .faq-q .pm::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.6px; background: var(--navy);
  transform: translateY(-50%); transition: transform .22s ease, opacity .22s ease;
}
.faq-q .pm::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open .faq-q .pm::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .28s ease; }
.faq-a p { margin: 0; padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 62ch; }

/* --- slot-CTA ------------------------------------------------------------ */

.closer { padding: 112px 0; text-align: center; position: relative; overflow: hidden; }
.closer .h-section { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 16px; }
.closer .lead { max-width: 560px; margin: 0 auto 30px; }

/* De voettekst staat sinds W60 in chrome.css, samen met de keurmerken en de
   sociale iconen die er eerder los onder stonden. */

/* --- formulieren --------------------------------------------------------- */

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); font: inherit; font-size: 15px; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.panel { padding: 26px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.panel--canvas { background: var(--canvas); }

.data-list { display: grid; gap: 14px; }
.data-list div { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); }
.data-list b { display: block; font-size: 12.5px; color: var(--muted-2); margin-bottom: 3px; font-weight: 600; }
.data-list span, .data-list a { font-size: 15px; color: var(--navy); font-weight: 500; }

.numbered { display: grid; gap: 12px; counter-reset: n; }
.numbered li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.numbered li::before {
  counter-increment: n; content: counter(n);
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cool); color: var(--navy);
  font-size: 12.5px; font-weight: 700; display: grid; place-items: center;
}

/* --- prose --------------------------------------------------------------- */

.prose { max-width: 720px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.prose ul { display: grid; gap: 10px; margin: 0 0 20px; }
.prose li { display: flex; gap: 10px; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* --- livechat ------------------------------------------------------------
   De widget heeft geen HTML op de pagina: app.js sectie 16 bouwt hem op elke
   v2-pagina. Alles hier leunt op de tokens uit :root, zodat een kleurwijziging
   op een plek blijft.

   Stapeling: de launcher staat op z-index 65 -- boven de header (60) en het
   mobiele menu (55), onder de consentbalk (70). app.js verbergt hem zolang die
   balk in beeld staat, zodat de cookiekeuze altijd bedienbaar blijft. Het
   geopende paneel staat er met 75 juist boven: dan is de keuze al gemaakt en
   zou de balk het gesprek bedekken.                                          */

.vh-chat-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 65;
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--accent); color: var(--white);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 37, 71, .18);
}
.vh-chat-launcher:hover { background: var(--accent-dark); }
.vh-chat-launcher[hidden] { display: none; }

.vh-chat-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 75;
  display: flex; flex-direction: column;
  width: 360px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 32px));
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(15, 37, 71, .22); overflow: hidden;
}
.vh-chat-panel[hidden] { display: none; }

.vh-chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--canvas);
}
.vh-chat-titel { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.vh-chat-sluit {
  width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.vh-chat-sluit:hover { background: var(--cool); color: var(--navy); }

.vh-chat-inhoud { padding: 16px 16px 0; overflow-y: auto; }
.vh-chat-intro { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.vh-chat-log { display: grid; gap: 10px; margin: 0 0 12px; max-height: 300px; overflow-y: auto; }
.vh-chat-log[hidden] { display: none; }
.vh-chat-msg { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--canvas); }
.vh-chat-msg--visitor { background: var(--cool); }
.vh-chat-msg--system { background: var(--white); border: 1px solid var(--border); }
.vh-chat-wie { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.vh-chat-tekst { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.vh-chat-melding { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--muted); }
.vh-chat-melding:empty { display: none; }
.vh-chat-melding.is-ok { color: var(--ok-text); }
.vh-chat-melding.is-err { color: #b3261e; }
.vh-chat-melding.is-info { color: var(--muted); }

.vh-chat-verder {
  margin: 0 0 12px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--white); color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.vh-chat-verder:hover { border-color: var(--navy); }
.vh-chat-verder[hidden] { display: none; }

.vh-chat-form { padding: 0 16px 4px; }
.vh-chat-form[hidden] { display: none; }
.vh-chat-field { display: grid; gap: 6px; margin-bottom: 12px; }
.vh-chat-field label { font-size: 13px; font-weight: 600; color: var(--navy); }
.vh-chat-field input, .vh-chat-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); font: inherit; font-size: 15px; color: var(--ink);
}
.vh-chat-field textarea { min-height: 76px; resize: vertical; }
.vh-chat-verstuur {
  width: 100%; height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--accent); color: var(--white);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.vh-chat-verstuur:hover { background: var(--accent-dark); }
.vh-chat-verstuur[disabled] { background: var(--muted-2); cursor: default; }

/* De honeypot mag niet display:none zijn -- dat slaan bots juist over. Hij
   staat buiten beeld en buiten de tab-volgorde, zodat een bezoeker hem nooit
   raakt. */
.vh-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.vh-chat-privacy {
  margin: 0; padding: 12px 16px 16px;
  font-size: 12px; line-height: 1.6; color: var(--muted-2);
}
.vh-chat-privacy a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* Op een telefoon vult het paneel het scherm: een venster van 360px naast een
   toetsenbord laat van het gesprek niets over. */
@media (max-width: 480px) {
  .vh-chat-panel {
    left: 0; right: 0; top: 0; bottom: 0;
    width: auto; max-width: none; max-height: none;
    border: 0; border-radius: 0;
  }
  /* Zodra er berichten staan groeit het gesprek mee en staat het invoerveld
     onderaan, zoals elk chatvenster. Zolang er niets staat zou dat een gat van
     een half scherm tussen de intro en het formulier geven, dus dan niet. */
  .vh-chat-panel:has(.vh-chat-log:not([hidden])) .vh-chat-inhoud { flex: 1 1 auto; }
  .vh-chat-log { max-height: none; }
}

/* --- animaties ----------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* @keyframes menu-in staat bij het menu zelf, in chrome.css. */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Duur onder een onboardingstap — zegt wat de stap kost, niet wat hij is. */
.step-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}

/* --- prijzen (W26): kaarten met alleen het verschil, één blok "inbegrepen",
       op-maat-formulier ------------------------------------------------- */

.plan .who { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 6px 0 14px; }
.plan .minutes { font-size: 13.5px; line-height: 1.5; color: var(--muted-2); margin: 0 0 18px; }
.plan .minutes b { color: var(--navy); font-weight: 600; }

.included { margin-top: 20px; padding: 26px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.included .h-card { margin: 0 0 14px; }
.tick-list--2col { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
@media (max-width: 640px) { .tick-list--2col { grid-template-columns: 1fr; } }

.opmaat-head { max-width: 640px; margin-bottom: 22px; }
.opmaat-form { max-width: 720px; }
.field .opt { font-weight: 400; color: var(--muted-2); }
.form-consent { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.form-consent a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* --- W27: homepage naar de feedback van 7 september 2026 -------------------
   B. de badge-regel onder de hero is nu twee links; D. drie perks met een
   monochroom icoon in de accentkleur; E. koppelingen met een eerlijk label
   voor wat er nog niet is. Alles 1px border, geen schaduw, radius 12px.
   Reviewronde 7 sep: labels, sub en note in --muted (--muted-2 haalde 2,4:1),
   hero-links onderstreept, koppelingsicoon neutraal (geen nagetekend
   Google-merk), consentbalk noemt PostHog en linkt naar het privacybeleid.  */

.proof-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.proof-note a:hover { color: var(--navy); }

.section.perks { padding: 40px 0; }
.perk-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .perk-list { grid-template-columns: 1fr; } }
.perk {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
  font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--navy);
}
.perk .perk-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; background: var(--accent-tint); color: var(--accent);
}

.integrations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .integrations { grid-template-columns: 1fr; } }
/* Twee koppelingen in plaats van drie (W24). Zonder dit blijft de derde kolom
   leeg en staat het blok links in plaats van gecentreerd. */
.integrations--duo { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
@media (max-width: 860px) { .integrations--duo { grid-template-columns: 1fr; } }
.integration {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
}
.integration .logo { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-tint); color: var(--accent); }
.integration .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.integration b { font-size: 15px; font-weight: 600; color: var(--navy); }
.integration .sub { font-size: 13px; color: var(--muted); }
.integration .status { font-size: 12.5px; font-weight: 600; color: var(--ok-text); }
.integration--muted b { color: var(--muted); }
.integration--muted .sub, .integration--muted .status { color: var(--muted); }
.integration--muted .logo { color: var(--muted-2); background: var(--canvas); }
.integrations-note { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.integrations-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.integrations-note a:hover { color: var(--navy); }

/* Partnerpagina (W30): tabellen, radiogroep, vinkje, honeypot, volgende stap */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--divider); line-height: 1.55; }
.tbl th { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); background: var(--canvas); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--muted); }
.tbl td b { color: var(--navy); font-weight: 600; }
.field--radios { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.field--radios legend { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; padding: 0; }
.radio { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); margin: 4px 0; }
.radio input, .check input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 6px; }
.check a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Juridische pagina's (W32): privacybeleid, voorwaarden, verwerkersovereenkomst
   en over-ons. Eén leeskolom van 72ch; koppen in --navy, lopende tekst in
   --muted, links onderstreept. Geen nieuwe kleuren, geen schaduwen: dezelfde
   1px-lijnen als de rest van de site. De teksten zelf komen uit de React-
   bronnen (src/components/*Page.jsx) en worden hier alleen opgemaakt. */
.legal { max-width: 72ch; margin-top: 28px; }
.legal-date { display: block; margin: 12px 0 0; color: var(--muted); }
.legal .legal-intro { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.legal section { padding: 28px 0; border-bottom: 1px solid var(--border); }
.legal section:last-of-type { border-bottom: 0; }
.legal h2 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.01em; }
.legal h2 .num { display: inline-block; min-width: 2ch; margin-right: 10px; color: var(--muted-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.legal p { margin: 0 0 12px; }
.legal p:last-child { margin-bottom: 0; }
.legal ul { margin: 4px 0 12px; padding-left: 20px; list-style: disc; display: grid; gap: 6px; }
.legal ul:last-child { margin-bottom: 0; }
.legal ol { margin: 4px 0 12px; padding-left: 22px; list-style: decimal; display: grid; gap: 6px; }
.legal ol:last-child { margin-bottom: 0; }
.legal ol ul, .legal ol ol { margin: 6px 0 0; }
.legal li::marker { color: var(--muted-2); }
.legal strong { color: var(--navy); font-weight: 600; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  padding: 2px 6px; border-radius: 6px;
  background: var(--canvas); border: 1px solid var(--border); color: var(--ink);
}
.legal .legal-note { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.7; color: var(--muted); }
.legal .data-list a { text-decoration: none; }

/* De keurmerken in de voettekst staan sinds W60 in chrome.css. */

/* --- integratiebeeld (Steven, 9 sep 2026, W44) ---------------------------
   Eén beeld (assets/img/integraties-2026-09.webp): het VoiceHelden-logo tussen
   twee ringen met logo's van tools die je via de webhook bereikt. Het beeld
   heeft een witte achtergrond en de sectie is --canvas, daarom staat het in
   een witte kaart met rand, net als de tegels eronder. De bestandsnaam draagt
   een datum omdat /v2/assets/** een jaar immutable gecachet wordt (W43): een
   nieuw beeld krijgt een nieuwe naam. .orbit-list is de leesbare versie voor
   schermlezers en verschijnt op smalle schermen. ------------------------- */
.orbit-figure {
  width: min(640px, 100%); margin: 8px auto 0; padding: 16px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.orbit-figure img { display: block; width: 100%; height: auto; }

.orbit-list {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 760px) {
  .orbit-list {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip: auto; white-space: normal; list-style: none;
    display: grid; gap: 12px;
  }
  .orbit-list li {
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px;
    font-size: 14px; line-height: 1.6; color: var(--muted);
  }
  .orbit-list b { color: var(--navy); }
}

/* De sociale iconen in de voettekst staan sinds W60 in chrome.css. */

/* --- aanmeldstroom partnerprogramma (P15) ---------------------------------
   partner-worden-contact.html en en/partners-contact.html. Eén stap per scherm,
   zonder sitemenu en zonder voettekst: op deze pagina is precies één ding te
   doen, en elke andere link is een uitgang. Alleen het logo blijft staan, plus
   één weg terug naar de partnerpagina — een bezoeker moet nooit vastzitten.

   De vorm volgt fonio's aanmeldpagina (dunne voortgangsbalk boven de vraag,
   grote keuzeknoppen, één kolom van 560px); de teksten, cijfers en het aanbod
   zijn de onze, zoals de huisstijlregel in voicehelden-hq/CLAUDE.md eist.
   Alles hieronder gebruikt de tokens uit :root en de bestaande .btn/.field —
   er komt geen kleur en geen tweede knopstijl bij. */

.intake-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--white); }
/* dvh telt de adresbalk van een telefoon niet mee; oudere browsers houden vh. */
@supports (min-height: 100dvh) { .intake-page { min-height: 100dvh; } }

.intake-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h); padding: 0 var(--gutter);
}
.intake-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.intake-back:hover { color: var(--navy); }

/* De ruimte onderaan is ruim, en met opzet: elke andere pagina heeft een
   voettekst waar de vaste consentbalk overheen valt, deze pagina niet. Zonder
   die ruimte liggen bij een eerste bezoeker — precies de bezoeker uit een
   advertentie — de knoppen Terug/Doorgaan en de statusregel onder de balk
   zodra hij naar beneden scrollt, en dat zijn de enige knoppen die deze pagina
   heeft. De clamp volgt de hoogte van de balk mee op een smal scherm, waar zijn
   tekst over meer regels loopt. */
.intake-main { flex: 1 0 auto; display: flex; justify-content: center; padding: 16px var(--gutter) clamp(140px, 42vh, 360px); }
.intake-shell { width: 100%; max-width: 560px; }

/* Voortgangsbalk: drie segmenten, gevuld tot en met de stap waar de bezoeker
   staat. De balk zelf is decoratief (aria-hidden); de regel eronder zegt in
   woorden hetzelfde en is daarmee de voorleesbare versie. */
.intake-bar { display: flex; gap: 6px; }
.intake-bar span { flex: 1 1 0; height: 3px; border-radius: var(--r-full); background: var(--border); transition: background .25s ease; }
.intake-bar span.is-done { background: var(--accent); }
/* --muted en niet --muted-2: de balk erboven is aria-hidden en dus decoratief,
   waardoor deze regel de enige leesbare voortgangsaanduiding van de pagina is.
   #A4A6B6 haalt op 12px maar ~2,4:1 tegen wit, ver onder de 4,5:1 van WCAG AA;
   #555B6E haalt ~6,8:1. --muted-2 is bedoeld voor placeholders en bijschriften,
   niet voor tekst die de bezoeker moet kunnen lezen. */
.intake-count { margin: 12px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.intake-step { margin-top: 22px; }
.intake-step[hidden] { display: none; }
.intake-q {
  margin: 0 0 10px; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.02em; color: var(--navy);
}
/* De kop krijgt bij elke stap de focus (tabindex="-1"), zodat een schermlezer
   en het toetsenbord meeverhuizen. De ring mag daarbij niet tegen de tekst
   aanplakken. */
.intake-q:focus-visible { outline-offset: 6px; }
.intake-sub { margin: 0 0 24px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }

/* Stap 1. Eén klik is de keuze én de volgende stap, dus de knoppen zien eruit
   als rijen om aan te tikken — niet als een radiolijst met een knop erachter. */
.intake-choices { display: grid; gap: 10px; }
.intake-choices button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; padding: 0 20px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--navy);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.intake-choices button::after { content: '\203A'; font-size: 20px; line-height: 1; color: var(--muted-2); }
.intake-choices button:hover { border-color: var(--accent); background: var(--accent-tint); }
.intake-choices button:hover::after { color: var(--accent); }
.intake-choices button[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Stap 2: de weg terug naar stap 1 staat onder de vervolgstap. */
.intake-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.intake-actions .btn { flex: 1 1 auto; justify-content: center; }
.intake-actions .btn--quiet { flex: 0 0 auto; }

/* Stap 2. De vervolgstap is het enige wat er dan nog toe doet, dus die staat in
   een eigen kader, met de agendaknop van de gekozen route. */
.intake-done {
  padding: 26px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--canvas);
  display: grid; gap: 14px; justify-items: start;
}
/* Een auteursregel met display wint van de browserstijl voor [hidden]; zonder
   deze regel staan beide vervolgstappen tegelijk in beeld. Elk blok hieronder
   dat een display krijgt en met [hidden] wordt verborgen, heeft zo'n regel
   nodig. */
.intake-done[hidden] { display: none; }
.intake-done p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
/* W95 (Steven, 24 sep 2026): de Koalendar-embed op stap 2 bleef 300px breed. Twee oorzaken:
   justify-items: start laat het widgetblok op zijn intrinsieke breedte staan, en in een kolom
   van 560px kiest Koalendar zijn smalle weergave. Het blok vult nu de kaart, en zodra stap 2
   zichtbaar is wordt de kolom breed genoeg voor de volledige weergave (het iframe zelf stopt
   bij 896px). De lopende tekst houdt zijn leesbreedte. */
.intake-done > [id^="inline-widget-"] { justify-self: stretch; width: 100%; min-width: 0; }
.intake-shell:has([data-intake-step="2"]:not([hidden])) { max-width: 960px; }
.intake-shell:has([data-intake-step="2"]:not([hidden])) .intake-q, .intake-done p { max-width: 640px; }

/* Zonder JavaScript werkt een stappenstroom niet. De stroom gaat dan uit en
   dit blok neemt het over: mailen kan altijd. */
.intake-noscript { display: grid; gap: 14px; justify-items: start; margin-top: 22px; }
.intake-noscript p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* W56 (25 sep 2026): de statutaire regel (Dirivian B.V., adres, KvK, btw). Geen
   navigatie, dus geen uitweg: alleen de gegevens die een B.V. met een handelsnaam
   rechtstreeks toegankelijk moet houden. 13px zoals de onderregel van de gewone
   voettekst, maar in --muted: --muted-2 haalt op wit geen WCAG AA (zie .intake-count). */
.intake-legal { padding: 20px var(--gutter) 28px; border-top: 1px solid var(--border); text-align: center; }
.intake-legal p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Aanmeldstroom partnerprogramma op een telefoon (P15). Vijf keuzeknoppen plus
   kop vallen op 390px net niet boven de vaste consentbalk, en dan is bij
   binnenkomst juist de onderste optie half bedekt — "Meer dan 500", de grootste
   partner. Wegklikken of scrollen lost het op, maar niemand scrolt naar iets
   waarvan hij niet weet dat het er staat. Alles hier iets compacter scheelt
   ongeveer vijftig pixels; boven 430px is er ruimte zat. Deze query staat
   bewust achteraan, ná de basisregels die hij overschrijft. */
@media (max-width: 430px) {
  .intake-main { padding-top: 8px; }
  /* Twee kolommen, zoals de aanmeldpagina van fonio ook doet. Vijf keuzes onder
     elkaar zijn op 390px samen hoger dan de ruimte boven de vaste consentbalk,
     en dan staat juist de onderste optie ("Meer dan 500", de grootste partner)
     achter die balk — gemeten op staging: onderkant 564px, balk begon eerder.
     In twee kolommen passen ze alle vijf ruim boven de balk. De laatste knop
     loopt over de volle breedte, zodat er geen half vakje overblijft. */
  .intake-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .intake-choices button { min-height: 52px; padding: 0 14px; font-size: 15px; }
  .intake-choices button:last-child { grid-column: 1 / -1; }
  /* De chevron kost breedte die de tekst hier harder nodig heeft. */
  .intake-choices button::after { display: none; }
  .intake-q { margin-bottom: 8px; }
  .intake-sub { margin-bottom: 18px; }
}

/* W48: billing choice. Native buttons remain keyboard accessible. */
.billing-switch{display:flex;justify-content:center;gap:4px;margin:0 auto 12px;padding:4px;border:1px solid var(--border);border-radius:14px;width:max-content;max-width:100%;background:var(--canvas)}.billing-switch button{border:0;border-radius:10px;padding:12px 18px;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;font-weight:600}.billing-switch button[aria-pressed="true"]{background:var(--white);color:var(--ink);outline:1px solid var(--border)}.billing-switch button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.billing-switch span{font-size:11px;color:var(--accent);margin-left:7px}.billing-explainer{text-align:center;color:var(--muted);font-size:13px;margin:0 auto 26px;max-width:650px;min-height:40px}.plans .terms{min-height:44px}.plans .cta-note{min-height:72px}.plans .paynow{min-height:104px}@media(max-width:420px){.billing-switch button{padding:11px 12px}.billing-switch span{display:block;margin:2px 0 0}}

/* --- W89: kerninfo-strip, branchechips, ingevouwen secties en tabbladen ---
   Feedback Julian (22 sep 2026): front page kort, detail op klik. Alles op
   bestaande tokens; de plus/min is dezelfde als bij de FAQ. */
.sectors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 720px; margin: 26px auto 0; }
.sectors__label { margin-right: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--white);
  font-size: 13.5px; font-weight: 500; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--navy); }
.chip--muted { background: transparent; border-style: dashed; color: var(--muted); white-space: normal; height: auto; min-height: 32px; padding: 4px 12px; }

.section.perks--top { padding: 0 0 8px; }
.perk-list--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .perk-list--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .perk-list--4 { grid-template-columns: 1fr; } }
a.perk { text-decoration: none; transition: border-color .15s ease; }
a.perk:hover { border-color: var(--navy); }
.perk .perk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perk .perk-text b { font-weight: 600; }
.perk .perk-text small { font-size: 13px; font-weight: 400; color: var(--muted); }
/* W101 (Steven, 25 sep 2026): vier gelijke blokken. De link in elk lijstitem vulde de rij niet,
   dus alleen de tegel met een titel over twee regels groeide. Nu vult elke tegel de rijhoogte
   en staat het icoon bovenaan, zodat de teksten op dezelfde lijn beginnen. */
.perk-list--4 > li { display: flex; }
.perk-list--4 .perk { flex: 1 1 auto; align-items: flex-start; }

.section--fold { padding: 0; }
.section--fold + .section:not(.section--fold) { border-top: 1px solid var(--divider); }
.fold { border-top: 1px solid var(--divider); }
.fold__head {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 22px;
  padding: 26px 0;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.fold__head:hover .fold__title, .fold__head:hover .fold__title-sm { color: var(--accent); }
.fold__title { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.25; font-weight: 600; color: var(--navy); }
.fold__title-sm { font-size: 15px; font-weight: 600; color: var(--navy); }
.fold__sub { font-size: 15px; line-height: 1.5; color: var(--muted); }
.fold__head .pm { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.fold__head .pm::before, .fold__head .pm::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.6px; background: var(--navy);
  transform: translateY(-50%); transition: transform .22s ease, opacity .22s ease;
}
.fold__head .pm::after { transform: translateY(-50%) rotate(90deg); }
.fold[open] > .fold__head .pm::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.fold__body { padding: 2px 0 44px; }
.fold__lead { max-width: 720px; margin: 0 0 26px; }
.fold--inline { max-width: 832px; margin: 22px auto 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.fold--inline .fold__head { grid-template-columns: 1fr auto; padding: 16px 18px; }
.fold--inline .tour-steps { margin: 0; padding: 0 18px 6px; }
@media (max-width: 720px) {
  .fold__head { grid-template-columns: 1fr auto; padding: 20px 0; }
  .fold__sub { grid-column: 1 / -1; }
}

.tabs { max-width: 832px; margin: 0 auto; }
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.tab {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--white);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--navy); cursor: pointer; white-space: nowrap;
}
.tab:hover { border-color: var(--navy); }
.tab[aria-selected="true"] { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tab-panel { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.tab-panel[hidden] { display: none; }
.tab-panel .h-card { margin: 0; }
.tab-panel p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
/* Op een telefoon lopen de acht knoppen gewoon door op een volgende regel;
   een horizontaal scrollende strook zet knoppen buiten het scherm en dat
   weigert test-homepage.mjs terecht. */

/* 21 sep 2026: het fonio-ritme van 72px is voor een telefoon te ruim; daar houden we de oude 48px. */
@media (max-width: 760px) {
  .section { padding: 48px 0; }
  .hero { padding: 40px 0 52px; }
}