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

:root {
  /* Donker — koppen, structuur, de donkere CTA-sectie */
  --navy:        #020617;
  --navy-deep:   #101828;
  --ink:         #0F0F16;   /* bodytekst */
  --muted:       #555B6E;
  --muted-2:     #A4A6B6;

  /* Accent indigo — links, badges, de gevulde CTA-knop */
  --accent:      #585DFE;
  --accent-dark: #4B50E6;
  --accent-tint: #EEEFFE;

  /* Vlakken en lijnen */
  --white:   #FFFFFF;
  --canvas:  #F7F8FC;   /* zachte vlakken; de pagina zelf is wit */
  --border:  #E1E3F4;
  --divider: #E1E3F4;
  --cool:    #EEEFFE;

  /* Status */
  --ok-bg: #E9F1E8; --ok-line: #CEE1CC; --ok-text: #3D6B3A;
  --warn-bg: #FBEAE0; --warn-line: #F5D4C0; --warn-text: #B25A2E;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  --gutter: 28px;
  --maxw: 1152px;
  --header-h: 72px;
}

/* --- 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 { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 720px; }

.section { padding: 48px 0; position: relative; }
.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 'Probeer 30 dagen gratis'-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 ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active { transform: scale(.99); }
.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn--lg { height: 50px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }

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

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

.btn--outline { background: var(--white); color: var(--navy); border-color: var(--border); }
.btn--outline:hover { border-color: var(--navy); }

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

.btn--quiet { background: transparent; color: var(--navy); }
.btn--quiet:hover { background: var(--cool); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
}
.header-inner {
  max-width: 1376px; margin: 0 auto; padding: 0 var(--gutter); /* brede container (W37: vier knoppen rechts) */
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--navy); }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--navy);
  display: grid; place-items: center; flex: 0 0 auto;
}
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.brand .name b { color: var(--accent); font-weight: 700; }

/* Het echte logo in plaats van het icoon-plus-woordmerk. Dit is wat bezoekers
   herkennen van de huidige site en uit advertenties, dus het blijft staan --
   fonio levert de layout, niet het merk. Vaste hoogte zodat de header niet
   verspringt terwijl het plaatje laadt. */
.brand-logo { height: 34px; width: auto; display: block; }
@media (max-width: 600px) { .brand-logo { height: 28px; } }

/* De footer is wit (zie .site-footer) en het logobestand is al zwart, dus hier hoort
   geen filter. Tot W51 stond hier brightness(0) invert(1) uit de tijd dat de footer
   donker was; dat maakte het logo wit op wit en dus onzichtbaar op alle v2-paginas.
   Wordt de footer ooit weer donker, zet het filter dan terug samen met die kleur. */

.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px; border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.nav > a:hover, .nav-trigger:hover { background: var(--canvas); color: var(--navy); }
.nav > a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.nav-trigger svg { transition: transform .18s ease; }

.has-menu { position: relative; }
.has-menu.is-open .nav-trigger svg { transform: rotate(180deg); }
.has-menu.is-open .nav-trigger { background: var(--canvas); }

.menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  display: none; width: 480px; padding: 10px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(15, 37, 71, 0.10);
}
/* De 10px tussen de knop en het paneel is geen hovergebied: wie naar een item
   beweegt staat daar even boven niets, `mouseleave` vuurt op .has-menu (zie
   app.js) en het menu sluit voordat de muis er is. Dit onzichtbare bruggetje
   hoort bij het paneel zelf, dus de muis blijft binnen .has-menu en het menu
   blijft open. Het bestaat alleen zolang het menu open is, want .menu is
   anders display:none — het vangt dus nooit een klik af die er niet voor is. */
.menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 11px;
}
.has-menu.is-open .menu { display: block; animation: menu-in .14s ease; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-col + .menu-col { margin-top: 10px; }
.menu .kicker { padding: 8px 10px 2px; margin: 0; }
.menu a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--r-sm);
}
.menu a:hover { background: var(--canvas); }
.menu a .ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px;
  background: var(--cool);
}
.menu a b { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.menu a span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }

.header-right { display: flex; align-items: center; gap: 10px; }
.lang {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.lang:hover { border-color: var(--navy); color: var(--navy); }

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); cursor: pointer; }
.burger span { display: block; width: 16px; height: 1.8px; margin: 3px auto; border-radius: 2px; background: var(--navy); transition: transform .25s ease, opacity .25s ease; }
.burger.is-open span:nth-child(1) { transform: translateY(4.8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-4.8px) rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 55;
  background: var(--white); overflow-y: auto; padding: 18px var(--gutter) 40px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--divider);
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.mobile-nav .kicker { margin: 24px 0 2px; }
.mobile-nav .btn-row { margin-top: 26px; }
.mobile-nav .btn { flex: 1 1 100%; }
/* De menurij-regel hierboven (.mobile-nav a) wint op specificiteit van .btn--dark
   en .btn--quiet: zonder dit was de donkere CTA in het open menu donkere tekst
   op een donkere achtergrond en kreeg Inloggen een scheidingslijn. */
.mobile-nav .btn-row .btn { justify-content: center; padding: 0 20px; border-bottom: 0; font-size: 15px; font-weight: 600; }
.mobile-nav .btn-row .btn--dark { color: #fff; }
.mobile-nav .btn-row .btn--dark:hover { color: #fff; }

/* Header-rechts (W37): [EN/NL] [Inloggen] [Demo boeken] [Probeer 30 dagen gratis].
   Vier elementen plus vijf navitems passen niet meer op elke laptop. Regel uit
   de review van 9 sep 2026: op elke breedte moet je kunnen inloggen én van
   taal wisselen, want geen van beide staat in de footer. Daarom:
   - tot 1380px verdwijnt alleen "Demo boeken" (de demo staat in de voettekst
     van elke pagina, op de homepage ook onder de kaart en bij de rondleiding);
   - vanaf 1190px neemt het mobiele menu het over: nav en Inloggen weg, burger
     erbij; het menu draagt Inloggen, Demo boeken en de taal;
   - onder 1000px gaat ook de taalwissel de burger in.
   De donkere CTA houdt overal zijn volledige tekst; onder 380px worden alleen
   de marges smaller, anders krijgt een 360px-telefoon een horizontale
   scrollbalk (de NL-tekst is 183px breed). */
.nav > a, .nav-trigger, .header-right .btn { white-space: nowrap; }
@media (max-width: 1380px) {
  .header-inner { gap: 14px; }
  .nav > a, .nav-trigger { padding: 0 9px; font-size: 14px; }
  .header-right { gap: 8px; }
  .header-right .btn--outline { display: none; }
}
@media (max-width: 1190px) {
  .nav, .header-right .btn--quiet { display: none; }
  .burger { display: block; }
}
@media (max-width: 1000px) {
  .header-right .lang { display: none; }
}
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .header-right { gap: 6px; }
  .header-right .btn--sm { padding: 0 10px; font-size: 13.5px; }
  .burger { width: 36px; }
}

/* --- 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: 44px 0 64px; 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);
  box-shadow: 0 10px 30px rgba(15, 37, 71, 0.07);
}
.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); }
.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; }

/* 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 */
/* Vaste beeldverhouding (W37): tot de W38-bestanden er staan geeft de poster een
   404 en is de video leeg; zonder vaste hoogte zou de sectie dan inklappen en
   de pagina verspringen zodra het bestand er wél is. 832px breed = 520px hoog. */
.tour video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #000; }
.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; } }

/* --- 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); box-shadow: 0 14px 40px rgba(15, 37, 71, .08); }
.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 20px; }
/* 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; }

/* --- footer -------------------------------------------------------------- */

.site-footer { background: var(--white); border-top: 1px solid var(--divider); padding: 64px 0 0; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); max-width: 260px; }
.footer-brand a { display: block; font-size: 14.5px; color: var(--muted); }
.footer-brand a:hover { color: var(--navy); }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: 14.5px; color: var(--muted); }
.footer-col a:hover { color: var(--navy); }

.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.footer-badges span {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; color: var(--muted);
}

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--divider);
}
.footer-bottom p, .footer-bottom a, .footer-bottom button { font-size: 13px; color: var(--muted-2); margin: 0; }
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--navy); }
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom button { background: none; border: 0; padding: 0; cursor: pointer; }

/* --- 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); }

/* --- consentbalk --------------------------------------------------------- */

.consentbar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  max-width: 560px; margin: 0 auto; padding: 18px 20px; display: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(15, 37, 71, .16);
}
.consentbar.is-visible { display: block; animation: fade-up .35s ease both; }
.consentbar p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.consentbar a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

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

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

@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@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); }

/* Logobalk (W29): één regel, grijs label, logo's in eigen kleur */
.section.logos { padding: 8px 0 40px; }
.logos-label { margin: 0 0 16px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.logos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; }
.logos-list img { height: 44px; width: auto; display: block; opacity: .85; transition: opacity .2s; }
.logos-list a:hover img { opacity: 1; }
/* Lockup voor een partner zonder eigen woordmerk-bestand (StandIn): icoon + naam
   in onze eigen letter; het icoon komt van standin.co/brand/rebrand-icon.svg. */
.logos-list .logo-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; opacity: .85; transition: opacity .2s; }
.logos-list .logo-lockup img { height: 36px; opacity: 1; }
.logos-list .logo-lockup:hover { opacity: 1; }

/* 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 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; }

/* --- keurmerken in de footer (Steven, 8 sep 2026) -------------------------
   Twee zelfverklaringen met een lauwerkrans, naar de referentie die Steven
   stuurde. Geen keurmerk van een derde partij: wij zeggen dit zelf. Wat het
   onderbouwt: het privacybeleid en de verwerkersovereenkomst voor de AVG, en
   voor de AI Act het feit dat de assistent in zijn begroeting zegt dat hij een
   AI is en dat nooit ontkent (transparantieplicht, artikel 50). Zet er niets
   bij wat we niet op die manier kunnen aanwijzen.
   De krans is decoratief en zit in CSS, niet in de HTML: hij staat op elke
   pagina en hoort niet in de voorleesvolgorde. -------------------------- */
.footer-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 48px; margin-top: 44px; }
.trustmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted);
}
.trustmark::before, .trustmark::after {
  content: ""; width: 22px; height: 38px; flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2044%22%3E%3Cpath%20d%3D%22M19.9%2039.8%20L18.7%2038.7%20L17.6%2037.4%20L16.6%2036.1%20L15.6%2034.7%20L14.8%2033.3%20L14.1%2031.8%20L13.4%2030.2%20L12.9%2028.6%20L12.5%2027.0%20L12.2%2025.3%20L12.1%2023.7%20L12.0%2022.0%20L12.1%2020.3%20L12.2%2018.7%20L12.5%2017.0%20L12.9%2015.4%20L13.4%2013.8%20L14.1%2012.2%20L14.8%2010.7%20L15.6%209.3%20L16.6%207.9%20L17.6%206.6%20L18.7%205.3%20L19.9%204.2%22%20fill%3D%22none%22%20stroke%3D%22%23BFC2D2%22%20stroke-width%3D%221.0%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20fill%3D%22%23BFC2D2%22%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%2240.5%22%20rx%3D%226.0%22%20ry%3D%221.6%22%20transform%3D%22rotate%28262.0%2012.4%2040.5%29%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%2231.8%22%20rx%3D%226.0%22%20ry%3D%221.6%22%20transform%3D%22rotate%28281.0%207.6%2031.8%29%22%2F%3E%3Cellipse%20cx%3D%226.0%22%20cy%3D%2222.0%22%20rx%3D%226.0%22%20ry%3D%221.6%22%20transform%3D%22rotate%28300.0%206.0%2022.0%29%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%2212.2%22%20rx%3D%226.0%22%20ry%3D%221.6%22%20transform%3D%22rotate%28319.0%207.6%2012.2%29%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%223.5%22%20rx%3D%226.0%22%20ry%3D%221.6%22%20transform%3D%22rotate%28338.0%2012.4%203.5%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.trustmark::after { transform: scaleX(-1); }

/* --- 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); }
}

/* --- sociale kanalen in de footer (W37) ------------------------------------
   Twee iconen onder het mailadres: Instagram en LinkedIn. Dezelfde kleur als het
   mailadres erboven (--muted, 6,8:1 op wit; --muted-2 haalde de 3:1 voor
   bedieningselementen niet), donker bij hover, klikvlak 36px. `.footer-brand a`
   zet display:block; hier overschreven. */
.footer-social { display: flex; gap: 4px; margin-top: 14px; }
.footer-brand .footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--muted);
  transition: color .16s ease, background .16s ease;
}
.footer-brand .footer-social a:hover { color: var(--navy); background: var(--canvas); }

/* --- 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 gekozen klantenrange staat bovenaan met een weg terug: wie zich
   vergist heeft, hoeft niet eerst het formulier in te vullen om dat te merken. */
.intake-recap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 22px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--canvas);
  font-size: 14px; color: var(--muted);
}
.intake-recap b { color: var(--navy); font-weight: 600; }
.intake-recap button {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.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 3. De vervolgstap is het enige wat er dan nog toe doet, dus die staat in
   een eigen kader; .intake-note draagt de eerlijke mededeling als de aanmelding
   niet in de CRM aankwam (503/404, zie partner-intake.js). */
.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); }
.intake-note {
  margin: 18px 0 0; padding: 14px 16px;
  border: 1px solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-bg);
  font-size: 14px; line-height: 1.65; color: var(--warn-text);
}
.intake-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.intake-note[hidden] { display: none; }

/* Zonder JavaScript werkt een stappenstroom niet. Het formulier gaat dan uit en
   dit blok neemt het over: mailen kan altijd, en de twee agendalinks hangen
   niet aan onze code. */
.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); }

/* 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; }
}