@font-face{font-family:'Inter';src:url('/assets/fonts/inter-var.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/assets/fonts/inter-tight-var.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-var.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --geel:#F5B400;
  --geel-hover:#FFC21F;
  --op-geel:#16130A;
  --inkt:#17160F;
  --inkt-2:#4A473E;
  --stil:#6B675D;
  --stil-2:#A29E94;
  --grond:#F7F7F5;
  --wit:#FFFFFF;
  --zacht:#F3F3F0;
  --doek:#EEEDE8;
  --geel-was:#FFF5D9;
  --lijn:#ECEBE7;
  --lijn-2:#DCDAD4;
  --groen:#187A43;
  --mark:#FFE9A8;
  --keuze:#FCF0CF;
  --keuze-rand:#E2BD5A;
  --knop-vlak:#FFFDF6;
  --knop-rand:#E2D3A8;
  --nacht:#13120E;
  --max:1280px;
  --pad:clamp(16px,4vw,64px);
  --r-blok:28px;
  --r-kaart:24px;
  --r-app:16px;
  --r-rij:10px;
  --sch-vel:0 1px 1px rgba(23,22,15,.04),0 2px 6px rgba(23,22,15,.04),0 24px 60px -20px rgba(23,22,15,.14);
  --sch-app:0 1px 2px rgba(23,22,15,.05),0 34px 70px -30px rgba(23,22,15,.32);
  --app:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --satoshi:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Letter: standaard Inter Tight (koppen) + Inter (tekst). Zie de schakelaar rechtsonder. */
  --font-kop:'Inter Tight','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-tekst:var(--app);
  --w-tekst:400;
  --w-kop:560;
  --w-mega:560;
  --ls-kop:-.035em;
  --ls-mega:-.042em;
  --lh-kop:1.04;
  --lh-mega:1;
}
html.letter-satoshi{--font-kop:var(--satoshi);--font-tekst:var(--satoshi);--w-tekst:450;--w-kop:800;--w-mega:820;--ls-kop:-.04em;--ls-mega:-.045em;--lh-kop:1;--lh-mega:.97}
html.letter-inter{--font-kop:var(--app);--font-tekst:var(--app);--w-tekst:400;--w-kop:700;--w-mega:750;--ls-kop:-.028em;--ls-mega:-.032em;--lh-kop:1.06;--lh-mega:1.02}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--grond);color:var(--inkt);font-family:var(--font-tekst);font-size:17px;line-height:1.55;font-weight:var(--w-tekst);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:6px}
.info :focus-visible{outline-color:var(--geel)}
.wrap{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}
.pt{color:var(--geel)}

/* ---------- Typografie ---------- */
.mega,.kop,.kaart h3,.faq summary{font-family:var(--font-kop)}
.mega{font-size:clamp(40px,5.2vw,76px);font-weight:var(--w-mega);line-height:var(--lh-mega);letter-spacing:var(--ls-mega)}
.kop{font-size:clamp(34px,3.7vw,54px);font-weight:var(--w-kop);line-height:var(--lh-kop);letter-spacing:var(--ls-kop)}
.label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--inkt-2);max-width:34em}
.klein{font-size:14px;color:var(--stil)}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-geel{background:var(--geel);color:var(--op-geel)}
.btn-geel:hover{background:var(--geel-hover);transform:translateY(-1px)}
.btn-groot{min-height:56px;padding:0 30px;font-size:17px}
.btn-rand{border-color:var(--lijn-2);background:var(--wit)}
.btn-rand:hover{border-color:var(--inkt)}
.btn-inkt{background:#1B1A16;color:#FBFAF7}
.btn-inkt:hover{background:#000;transform:translateY(-1px)}
.btn-wit{background:var(--wit);color:var(--inkt)}
.btn-wit:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(23,22,15,.35)}
.btn-witrand{border-color:rgba(255,255,255,.55);color:var(--wit);background:transparent}
.btn-witrand:hover{background:var(--wit);color:var(--inkt)}

/* Schuine lijnen: alleen nog zacht in één hoek van een geel vlak */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(23,22,15,.11) 0 1px,transparent 1px 11px);
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000 0%,rgba(0,0,0,.4) 40%,transparent 75%);
          mask-image:radial-gradient(60% 70% at 100% 0%,#000 0%,rgba(0,0,0,.4) 40%,transparent 75%)}

/* ---------- Menu: twee losse kaartjes (links merk en links, rechts inloggen en knop) ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav-in{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nav-kaart{pointer-events:auto;display:flex;align-items:center;gap:4px;height:48px;padding:0 6px 0 18px;border-radius:12px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 rgba(23,22,15,.04),0 0 0 1px rgba(23,22,15,.05);transition:box-shadow .25s ease,background-color .25s ease}
.nav-kaart.rechts{padding:0 6px 0 6px}
.nav.scrolled .nav-kaart{background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(23,22,15,.06),0 10px 28px -14px rgba(23,22,15,.25)}
.logo{display:inline-flex;align-items:baseline;font-family:var(--satoshi);font-weight:850;font-size:22px;letter-spacing:-.045em;text-decoration:none;line-height:1;margin-right:18px}
.logo .pt{font-size:1.1em;line-height:0}
.nav-links{display:flex;gap:0}
.nav-links a,.nav-in .inlog{padding:8px 11px;border-radius:8px;text-decoration:none;font-weight:500;font-size:14px;color:var(--inkt-2);font-family:var(--app);letter-spacing:-.005em}
.nav-links a:hover,.nav-in .inlog:hover{background:rgba(23,22,15,.05);color:var(--inkt)}
.nav-knop{text-transform:none;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:8px;background:#1B1A16;color:#FBFAF7;font-family:var(--app);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;margin-left:4px;transition:background-color .18s ease}
.nav-knop .kort{display:none}
.nav-knop:hover{background:#000}
.menuknop{display:none;width:36px;height:36px;border-radius:8px;border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.menuknop svg{width:20px;height:20px}
.paneel{pointer-events:auto;display:none;width:min(var(--max),100% - 2*var(--pad));margin:8px auto 0;background:var(--wit);border-radius:14px;box-shadow:var(--sch-app);padding:8px;border:1px solid var(--lijn)}
.paneel a{display:block;padding:13px 14px;font-size:18px;font-weight:600;text-decoration:none;border-radius:10px}
.paneel a:hover{background:var(--zacht)}
.paneel .btn{display:flex;margin-top:8px}
@media (max-width:960px){
  .nav-links,.nav-in .inlog{display:none}
  .menuknop{display:inline-flex}
  .paneel.open{display:block}
}
@media (max-width:420px){.nav .nav-knop{height:32px;padding:0 11px;font-size:13px;background:var(--geel);color:var(--op-geel)}.nav .nav-knop .lang{display:none}.nav .nav-knop .kort{display:inline}.nav-kaart.rechts{padding:0 4px 0 6px}}

/* ---------- Hero: 3D-beeld bovenin, één grote regel, korte zin, invoerveld ---------- */
.hero{position:relative;background:linear-gradient(180deg,#E4E3DF 0%,#EDECE8 38%,var(--grond) 78%)}
.hero-boven{position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:clamp(64px,16svh,170px);text-align:center}
.hero-3d{position:absolute;left:0;right:0;top:0;height:min(40svh,380px);pointer-events:none}
.hero-3d canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.hero-3d.klaar canvas{opacity:1}
.hero h1{font-family:'Inter Tight','Inter',ui-sans-serif,system-ui,sans-serif;font-size:clamp(40px,6.6vw,100px);font-weight:560;letter-spacing:-.045em;line-height:.98;margin:0;max-width:11.5em;text-wrap:balance;position:relative}
.hero-zin{text-wrap:balance;margin-top:clamp(14px,1.6vw,22px);font-size:clamp(17px,1.5vw,22px);font-weight:450;letter-spacing:-.01em;color:var(--inkt);position:relative}
.hero-acties{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;margin-top:clamp(22px,2.4vw,30px);position:relative}
.hero-hoe{display:inline-flex;align-items:center;height:52px;padding:0 20px;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(23,22,15,.1);font-family:var(--app);font-weight:600;font-size:14.5px;color:var(--inkt);text-decoration:none;transition:background-color .18s ease}
.hero-hoe:hover{background:rgba(255,255,255,.95)}
html.hero-foto .hero-hoe{background:rgba(255,255,255,.9)}
.hero-wl{display:flex;gap:6px;width:min(440px,100%);margin-top:0;padding:5px;border-radius:12px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(23,22,15,.07),0 12px 30px -16px rgba(23,22,15,.3);position:relative}
.hero-wl input{flex:1;min-width:0;border:0;background:transparent;font-size:15.5px;padding:0 12px;color:var(--inkt);font-family:var(--app)}
.hero-wl input:focus{outline:none}
.hero-wl:focus-within{box-shadow:0 0 0 1px var(--inkt),0 0 0 5px rgba(245,180,0,.25),0 12px 30px -16px rgba(23,22,15,.3)}
.hero-wl .nav-knop{height:42px;margin:0;border:0;cursor:pointer;font-size:14.5px;padding:0 16px}
.hero-wl[hidden]{display:none}
.hero-na{position:relative;margin-top:14px;font-size:13.5px;color:var(--stil);font-family:var(--app)}
html.hero-foto .hero-na{color:rgba(255,255,255,.85)}
.hero-wl-fout{min-height:1.4em;margin-top:8px;font-size:14.5px;color:#9A3412;position:relative}
.hero-wl-ok{display:inline-flex;gap:10px;align-items:center;margin-top:14px;padding:12px 18px;border-radius:12px;background:var(--wit);border:1px solid var(--lijn);font-weight:600;position:relative}
.hero-wl-ok[hidden]{display:none}
.hero-wl-ok svg{width:20px;height:20px;color:var(--groen)}
@media (max-width:760px){.hero h1{white-space:normal;max-width:9em;text-wrap:balance}.hero-3d{top:clamp(56px,8svh,90px);height:36svh}.hero-boven{min-height:0;justify-content:flex-start;padding-top:calc(clamp(56px,8svh,90px) + 36svh);padding-bottom:40px}}

/* ---------- App-onderdelen (zoals in de app: Inter, lichte vlakken, witte kaarten) ---------- */
.app,.snip,.a-vel{font-family:var(--app);letter-spacing:-.006em}
.a-vel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-app)}
.a-rond{width:38px;height:38px;border-radius:50%;background:var(--wit);display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(23,22,15,.06)}
.a-rond svg{width:18px;height:18px}
.a-ini{width:40px;height:40px;border-radius:50%;background:var(--wit);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;box-shadow:0 1px 2px rgba(23,22,15,.06)}
.a-ini.kl{width:32px;height:32px;font-size:12px;box-shadow:none}
.a-mk{border-radius:3px;padding:1px 0;transition:background-color .3s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.a-mk.aan{background:var(--mark)}
.a-pager{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--inkt-2)}
.a-pager button,.a-pager .pg{width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--inkt)}
.a-pager button:disabled{color:var(--lijn-2);cursor:default}
.a-pager button:hover:not(:disabled){background:var(--zacht)}
.a-pager svg{width:16px;height:16px}
.a-prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:10px 0 18px}
.a-prog i{height:3px;border-radius:2px;background:var(--lijn-2);transition:background-color .3s}
.a-prog i.klaar{background:var(--stil)}
.a-prog i.nu{background:#DFA40E}
.a-vraag{font-size:20px;font-weight:700;letter-spacing:-.018em;line-height:1.25;margin-bottom:12px}
.a-opt{display:block;width:100%;text-align:left;padding:13px 16px;border-radius:var(--r-rij);border:1px solid transparent;background:transparent;font-weight:600;font-size:15px;line-height:1.3;cursor:pointer;transition:background-color .15s,border-color .15s}
.a-opt+.a-opt{margin-top:2px}
.a-opt:hover{background:var(--zacht)}
.a-opt[aria-pressed="true"]{background:var(--keuze);border-color:var(--keuze-rand)}
.a-scheid{height:1px;background:var(--lijn);margin:6px 16px}
.a-typ{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--lijn-2);margin-top:12px;padding:4px 0 8px}
.a-typ input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;padding:6px 0;color:var(--inkt)}
.a-typ input::placeholder{color:var(--stil)}
.a-typ input:focus{outline:none}
.a-typ:focus-within{border-bottom-color:var(--inkt)}
.a-stuur{width:32px;height:32px;border-radius:50%;border:0;background:#1B1A16;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.a-stuur[hidden]{display:none}
.a-stuur svg,.a-mic svg{width:15px;height:15px}
.a-mic{width:32px;height:32px;border-radius:50%;border:1px solid var(--lijn);background:var(--wit);display:grid;place-items:center;flex:none;color:var(--inkt-2)}
.a-onder{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.a-pil{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--lijn-2);background:var(--wit);font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s}
.a-pil:hover{border-color:var(--inkt)}
.a-pil.room{background:var(--knop-vlak);border-color:var(--knop-rand)}
.a-pil.room:hover{background:#FBF3DD;border-color:#CDB679}
.a-pil.geel{background:var(--geel);border-color:var(--geel);color:var(--op-geel);font-weight:650}
.a-pil.geel:hover{background:var(--geel-hover)}
.a-pil.zwart{background:#1B1A16;border-color:#1B1A16;color:#FBFAF7}
.a-pil svg{width:15px;height:15px}
.a-toevoegen{font-size:14px;color:var(--inkt-2)}
.a-keuzes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;color:var(--stil)}
.a-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px;border-radius:999px;background:var(--keuze);color:var(--inkt);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-chip svg{width:13px;height:13px;flex:none}
.a-chip span{overflow:hidden;text-overflow:ellipsis}
.a-tekst{font-size:15px;line-height:1.6;color:var(--inkt)}
.a-tekst p+p{margin-top:12px}
.a-sig{font-size:13px;line-height:1.5;color:var(--stil)}
.a-labels{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--stil);margin-top:3px}

/* ---------- Secties ---------- */

/* Functiekaarten */
.kaart{flex:0 0 min(560px,86vw);height:600px;scroll-snap-align:start;border-radius:var(--r-kaart);padding:32px 32px 0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.kaart.geel{background:var(--geel-was)}
.kaart.grijs{background:var(--doek)}
.kaart .label{color:var(--stil)}
.kaart h3{font-size:clamp(24px,2vw,30px);line-height:1.1;font-weight:var(--w-kop);letter-spacing:var(--ls-kop);margin-top:14px;max-width:14em;padding-right:60px}
.plus{position:absolute;top:24px;right:24px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(23,22,15,.28);background:rgba(255,255,255,.5);display:grid;place-items:center;cursor:pointer;transition:transform .25s ease,background-color .2s,color .2s,border-color .2s}
.plus svg{width:20px;height:20px}
.plus:hover{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.plus[aria-expanded="true"]{transform:rotate(45deg);border-color:rgba(255,255,255,.6);background:transparent;color:var(--wit)}
.plus[aria-expanded="true"]:hover{background:var(--wit);color:var(--inkt)}
.info{position:absolute;inset:0;z-index:2;background:#1B1A16;color:var(--wit);padding:32px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;border-radius:inherit}
.info[hidden]{display:none}
.info p.label{color:var(--geel);margin-bottom:auto;font-size:12.5px;letter-spacing:.12em}
.info p{font-size:clamp(19px,1.7vw,23px);line-height:1.4;font-weight:500;letter-spacing:-.01em;max-width:22em}
.info a{display:inline-flex;align-items:center;gap:8px;color:var(--geel);font-weight:650;font-size:16.5px;text-underline-offset:5px}
.info a svg{width:18px;height:18px}

/* productschermpje onderin de kaart: één wit vel, loopt van de kaart af */
.snip{margin-top:auto;background:var(--wit);border-radius:var(--r-app) var(--r-app) 0 0;box-shadow:0 1px 2px rgba(23,22,15,.05),0 20px 50px -20px rgba(23,22,15,.22);padding:20px 22px 0;height:372px;overflow:hidden;font-size:14px;line-height:1.45}
.s-kop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.s-titel{font-size:21px;font-weight:750;letter-spacing:-.022em;line-height:1.15}
.s-titel small{font-size:14px;font-weight:500;color:var(--stil);letter-spacing:0;margin-left:6px}
.s-sub{font-size:13.5px;color:var(--stil);font-weight:500;margin-top:3px}
.s-uitleg{font-size:13.5px;color:var(--inkt-2);margin-top:6px}
.s-rij{padding:11px 0;border-top:1px solid var(--lijn)}
.s-rij:first-child{border-top:0}
.s-rij p{font-size:14px}
.s-rij b{font-weight:600}
.s-lijst{margin-top:14px;border:1px solid var(--lijn);border-radius:12px;padding:0 14px}
.s-zoek{display:flex;gap:8px;margin-top:14px}
.s-zoek span{flex:1;display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:10px;background:var(--zacht);color:var(--stil);font-size:13.5px}
.s-zoek svg{width:14px;height:14px}
.s-zoek .a-pil{min-height:38px;font-size:13.5px;padding:0 14px}
.s-filters{display:flex;gap:6px;margin-top:12px;white-space:nowrap}
.s-filters span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:9px;border:1px solid var(--lijn);font-size:12.5px;font-weight:550;background:var(--wit)}
.s-filters span.aan{background:#1B1A16;border-color:#1B1A16;color:#fff}
.s-filters i{font-style:normal;opacity:.6}
.s-mailrij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 10px}
.s-mailrij .w{font-size:13px;color:var(--stil)}
.s-mailrij .d{font-size:12.5px;color:var(--stil);text-align:right}
.s-mailrij b{grid-column:1/-1;font-size:14px}
.s-mailrij p{grid-column:1/-1;font-size:13px;color:var(--inkt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-veld{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--lijn);font-size:14px}
.s-veld span{color:var(--stil)}
.s-punten{display:flex;align-items:center;gap:8px;margin:12px 0 14px;padding:9px 12px;border:1px solid var(--lijn);border-radius:12px;font-size:12.5px;font-weight:550}
.s-punten svg{width:13px;height:13px;flex:none}
.s-punten span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-punten b{font-weight:700}
.s-persoon{display:flex;align-items:center;gap:12px}
.s-persoon div{min-width:0;flex:1}
.s-persoon b{display:block;font-size:14px;font-weight:600}
.s-persoon span{font-size:12.5px;color:var(--stil)}
.s-persoon .tag{font-size:12px;font-weight:600;color:var(--inkt-2);background:var(--zacht);padding:3px 9px;border-radius:6px;flex:none}
.s-dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--groen);flex:none}
.s-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-logo{width:32px;height:32px;border-radius:9px;background:var(--zacht);display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.s-voet{font-size:12.5px;color:var(--stil);margin-top:12px}
@media (max-width:640px){
  .kaart{height:auto;min-height:560px;padding:24px 20px 0}
  .plus{top:18px;right:16px;width:44px;height:44px}
  .kaart h3{padding-right:50px}
  .snip{height:320px;padding:16px 16px 0;margin-top:28px}
  .info{padding:24px 20px}
  .s-filters span:nth-child(n+3){display:none}
}

@media (max-width:480px){
  .hero-hoe{width:100%;justify-content:center;height:46px}
  .hero-wl{flex-direction:column}
  .hero-wl input{padding:13px 10px}
  .hero-wl .nav-knop{width:100%;justify-content:center;height:46px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Knoppen met een tastbaar randje (Superlist): zachte glans bovenin, donkere onderrand, licht indrukken ---------- */
.btn-geel,.btn-inkt,.nav-knop{transition:transform .14s ease,box-shadow .14s ease,background .18s ease}
.btn-geel{background:linear-gradient(180deg,#FFC93A 0%,#F5B400 58%,#EEAB00 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(140,85,0,.22),0 1px 2px rgba(23,22,15,.12),0 8px 18px -10px rgba(190,120,0,.75)}
.btn-geel:hover{background:linear-gradient(180deg,#FFD050 0%,#FFC21F 58%,#F5B400 100%)}
.btn-inkt,.nav-knop{background:linear-gradient(180deg,#3B382F 0%,#1B1A16 62%);color:#FBFAF7;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.18),0 8px 18px -10px rgba(0,0,0,.6)}
.btn-inkt:hover,.nav-knop:hover{background:linear-gradient(180deg,#47443A 0%,#24231E 62%)}
.btn-geel:active,.btn-inkt:active,.nav-knop:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px rgba(23,22,15,.06)}
.pil-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 17px;border-radius:999px;border:1.5px solid var(--inkt);font-weight:650;font-size:14.5px;text-decoration:none;transition:background-color .18s,color .18s}
.pil-link:hover{background:var(--inkt);color:var(--wit)}
.pil-link svg{width:15px;height:15px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-2)}
.midden{text-align:center}
.midden .lead{margin-inline:auto}

/* ---------- Hero, variant Foto (Square): een echte zaak op groot formaat ---------- */
.hero-foto-vlak{display:none}
html.hero-foto .hero{background:var(--grond)}
html.hero-foto .hero-3d{display:none}
html.hero-foto .hero-boven{width:auto;margin:12px 12px 0;border-radius:var(--r-blok);overflow:hidden;isolation:isolate;min-height:min(calc(100svh - 12px),880px);padding:120px var(--pad) clamp(64px,11svh,128px)}
html.hero-foto .hero-foto-vlak{display:block;position:absolute;inset:0;z-index:-1;background:#3A3127}
.hero-foto-vlak img{width:100%;height:100%;object-fit:cover;object-position:30% 42%}
.hero-foto-vlak::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,8,.34) 0%,rgba(18,14,8,.06) 30%,rgba(18,14,8,.16) 56%,rgba(18,14,8,.62) 100%)}
html.hero-foto .hero h1,html.hero-foto .hero-zin{color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.25)}
html.hero-foto .hero-wl{background:rgba(255,255,255,.96);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
html.hero-foto .hero-wl-fout{color:#FFD58A}
html.hero-foto .hero-boven :focus-visible{outline-color:#fff}
html.hero-foto .hero .slab{margin-top:20px}
@media (max-width:760px){
  html.hero-foto .hero-boven{margin:8px 8px 0;min-height:min(calc(100svh - 8px),760px);padding-top:110px}
  .hero-foto-vlak img{object-position:16% 50%}
}

/* Een stukje product onderaan het eerste scherm: de vraag met drie keuzes */

/* ---------- Privacy: zegels in de uitleg van Gekeurd ---------- */
.vl-van{font-size:13.5px!important;font-weight:600;color:var(--stil)!important;margin-top:16px!important}
.vl-zegels{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.vl-zegels li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--stil)}
.vl-zegel{width:52px;height:52px}
.vl-zegel circle{fill:var(--wit);stroke:var(--inkt);stroke-width:2}
.vl-zegel circle.binnen{fill:none;stroke:var(--lijn-2);stroke-width:1;stroke-dasharray:2 3}
.vl-zegel text{text-anchor:middle;fill:var(--inkt);font-family:var(--app);font-weight:800}
.vl-zegel .z1{font-size:10px}.vl-zegel .z2{font-size:8.5px;font-weight:700}
.vl-bron{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--inkt);text-underline-offset:3px}
/* ---------- Beginnen is gewoon inloggen: het inlogkaartje als beeld ---------- */
.mb-beeld{display:grid;place-items:center;padding:clamp(24px,4vw,56px);border-radius:28px;background:radial-gradient(70% 70% at 50% 40%,rgba(245,180,0,.16),transparent 70%),var(--doek)}
.mb-kaart{width:min(380px,100%);background:var(--wit);border-radius:22px;padding:24px;box-shadow:0 1px 2px rgba(23,22,15,.06),0 30px 60px -28px rgba(23,22,15,.4);font-family:var(--app);display:grid;gap:10px}
.mb-merkje{width:30px;height:auto;margin-bottom:4px}
.mb-titel{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.mb-knop{position:relative;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:12px;box-shadow:0 0 0 1px var(--lijn-2);font-weight:600;font-size:15px}
.mb-knop svg{width:20px;height:20px;flex:none}
.mb-knop.aan{box-shadow:0 0 0 2px var(--inkt)}
.mb-tik{position:absolute;right:22px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:rgba(245,180,0,.55);box-shadow:0 0 0 0 rgba(245,180,0,.5);animation:mbTik 2.4s ease-out infinite}
@keyframes mbTik{0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(245,180,0,.55)}60%{transform:scale(1);box-shadow:0 0 0 14px rgba(245,180,0,0)}100%{transform:scale(.6);box-shadow:0 0 0 0 rgba(245,180,0,0)}}
.mb-klaar{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:12px 14px;border-radius:12px;background:#EEF6F0;font-size:13.5px;line-height:1.45;color:var(--inkt-2)}
.mb-klaar b{color:var(--inkt);font-weight:650}
.mb-klaar svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--groen);color:#fff;flex:none;margin-top:1px}
/* ---------- Jij runt de zaak (Square): tegels rond de kop ---------- */
.tegel{width:clamp(84px,9.6vw,148px);aspect-ratio:1;border-radius:clamp(16px,1.7vw,24px);overflow:hidden;justify-self:center;background:var(--doek);position:relative}
.tegel img{width:100%;height:100%;object-fit:cover}
.tegel.ja{background:var(--geel);color:var(--op-geel);display:flex;flex-direction:column;justify-content:center;padding:0 12%;font-family:var(--font-kop);font-weight:750;font-size:clamp(12px,1.25vw,19px);line-height:.98;letter-spacing:-.04em;white-space:nowrap}
.tegel.inkt{background:#1B1A16;display:grid;place-items:center}
.tegel.inkt span{font-family:var(--satoshi);font-weight:850;color:#fff;font-size:clamp(17px,1.8vw,27px);letter-spacing:-.05em}
.tegel.wit{background:var(--wit);box-shadow:0 0 0 1px var(--lijn);display:grid;place-items:center;font-family:var(--app)}
.tegel.wit div{display:flex;flex-direction:column;align-items:center;gap:8px}
.tegel.wit img{width:clamp(22px,2.4vw,34px);height:auto}
.tegel.wit svg{width:clamp(28px,3vw,42px);height:auto;padding:clamp(5px,.6vw,9px);border-radius:50%;background:#E3F1E8;color:var(--groen)}
.tegel.zacht{background:var(--geel-was);display:grid;place-items:center}
.tegel.zacht img{width:42%;height:auto}
.tegel.vraag{background:var(--geel-was);display:flex;align-items:flex-end;padding:12%;font-family:var(--font-kop);font-weight:700;font-size:clamp(17px,1.9vw,28px);line-height:.98;letter-spacing:-.04em;color:var(--op-geel)}
.tegel.wit em{font-style:normal;font-size:clamp(10px,.85vw,12.5px);font-weight:650;padding:3px 9px;border-radius:999px;background:var(--keuze);white-space:nowrap}
html:not(.hero-foto) .alleen-foto,html.hero-foto .zonder-foto{display:none}

.prijs-sec .kop{margin-top:0}

.faq-meer{display:contents}
.faq-meer[hidden]{display:none}

/* ---------- Slot en voet ---------- */
.slot{position:relative;min-height:min(88svh,780px);display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 50% 52%,rgba(245,180,0,.13),transparent 70%),linear-gradient(180deg,var(--grond) 0%,#EDECE8 50%,#E6E4DE 100%)}
.slot-3d{position:absolute;inset:0;z-index:-1;pointer-events:none}
.slot-3d canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.slot-3d.klaar canvas{opacity:1}
.slot-paneel{text-align:center;padding-block:clamp(72px,9vw,120px)}
.slot-paneel .mega{font-family:'Inter Tight','Inter',ui-sans-serif,system-ui,sans-serif;font-size:clamp(44px,6.6vw,100px);font-weight:560;letter-spacing:-.045em;line-height:.98;color:var(--inkt)}
.slot-paneel .lead{margin:18px auto 0;color:var(--inkt-2);max-width:26em;text-wrap:balance}
.wl{display:flex;gap:6px;width:min(440px,100%);margin:clamp(24px,2.6vw,32px) auto 0;padding:5px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(23,22,15,.07),0 12px 30px -16px rgba(23,22,15,.3)}
.wl input{flex:1;min-width:0;background:transparent;border:0;color:var(--inkt);font-size:15.5px;padding:0 12px;font-family:var(--app)}
.wl input::placeholder{color:var(--stil)}
.wl input:focus{outline:none}
.wl:focus-within{box-shadow:0 0 0 1px var(--inkt),0 0 0 5px rgba(245,180,0,.25),0 12px 30px -16px rgba(23,22,15,.3)}
.wl .nav-knop{height:42px;margin:0;border:0;cursor:pointer;font-size:14.5px;padding:0 16px}
.wl[hidden]{display:none}
.wl-fout{margin-top:12px;color:#9A3412;font-size:14.5px;min-height:1.4em;font-weight:600}
.wl-ok{display:flex;gap:14px;align-items:flex-start;max-width:520px;margin:clamp(28px,3vw,40px) auto 0;text-align:left;background:var(--wit);border-radius:var(--r-kaart);padding:20px 22px}
.wl-ok[hidden]{display:none}
.wl-ok svg{width:26px;height:26px;flex:none;margin-top:1px;color:var(--groen)}
.wl-ok b{display:block;font-size:18px;letter-spacing:-.01em}
.wl-ok p{margin-top:4px;color:var(--inkt-2)}
.voet{padding-top:clamp(72px,8vw,112px);overflow:hidden}
.voet-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;font-size:15px}
.voet .logo{font-size:28px}
.voet-grid p{color:var(--stil);margin-top:14px;max-width:22em}
.voet h2{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stil);margin-bottom:14px}
.voet li+li{margin-top:8px}
.voet a{text-decoration:none;color:var(--inkt-2)}
.voet a:hover{color:var(--inkt);text-decoration:underline;text-underline-offset:4px}
.voet-onder{border-top:1px solid var(--lijn-2);margin-top:56px;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--stil)}
.voet-merk{font-family:var(--satoshi);font-weight:850;font-size:clamp(96px,23vw,360px);letter-spacing:-.065em;line-height:1;color:#E7E5DF;text-align:center;margin:clamp(8px,2vw,24px) 0 -.04em;user-select:none;white-space:nowrap}
.voet-merk .pt{color:var(--geel)}
@media (max-width:900px){.voet-grid{grid-template-columns:1fr 1fr}.voet-grid>div:first-child{grid-column:1/-1}}
@media (max-width:480px){
  .wl{flex-direction:column;padding:6px}
  .wl input{padding:14px 12px}
  .wl .nav-knop{width:100%;justify-content:center;height:46px}
}

/* Schakelaar rechtsonder: de letter (Kees, 05-11) */
.schakelaars{position:fixed;z-index:60;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--app)}
.schakel{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#1B1A16;color:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.schakel span{font-size:12px;font-weight:600;padding:0 6px 0 10px;opacity:.7}
.schakel button{font-size:12.5px;font-weight:650;border:0;border-radius:999px;padding:7px 12px;min-height:34px;background:transparent;color:#fff;cursor:pointer;letter-spacing:0}
.schakel button[aria-pressed="true"]{background:var(--geel);color:var(--op-geel)}
.schakel button:focus-visible{outline:2px solid var(--geel);outline-offset:2px}
@media (max-width:480px){.schakel span{display:none}.schakel button{padding:6px 9px;font-size:12px}}

/* ---------- Verhaal: mail komt binnen, jij tikt, Soonbeam schrijft (scrollen stuurt het beeld) ----------
   Zonder script of bij 'minder beweging' staan de drie schermen gewoon naast of onder elkaar, in hun eindstand. */
.vh{position:relative;margin-top:clamp(72px,9vw,128px)}
.vh-plak{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(16px,2vw,28px);align-items:start}
.vh-koppen,.vh-podium,.vh-doek{display:contents}
.vh-kop{font-family:var(--font-kop);font-weight:var(--w-mega);letter-spacing:var(--ls-mega);line-height:1;font-size:clamp(28px,2.6vw,38px);color:var(--inkt);grid-row:1}
.vh-kop[data-s="0"]{grid-column:1}.vh-kop[data-s="1"]{grid-column:2}.vh-kop[data-s="2"]{grid-column:3}
.vh-mail{grid-column:1;grid-row:2}.vh-vel{grid-column:2;grid-row:2}.vh-antw{grid-column:3;grid-row:2}
.vh:not(.vh-aan) .vh-vlieg,.vh-voortgang{display:none}
@media (max-width:900px){
  .vh:not(.vh-aan) .vh-plak{grid-template-columns:minmax(0,440px);justify-content:center;gap:16px}
  .vh:not(.vh-aan) .vh-kop[data-s]{grid-column:1;grid-row:auto;margin-top:28px}
  .vh:not(.vh-aan) .vh-kop[data-s="0"]{margin-top:0}
  .vh:not(.vh-aan) .vh-kaart{grid-column:1;grid-row:auto}
}

/* De kaarten: wit, zacht glanzend, zoals de 3D-dingen in de hero */
.vh-kaart{position:relative;font-family:var(--app);letter-spacing:-.006em;background:linear-gradient(180deg,#FFFFFF 0%,#FCFBF8 100%);border-radius:24px;padding:22px 24px 24px;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(23,22,15,.05),0 0 0 1px rgba(23,22,15,.06),0 2px 4px rgba(23,22,15,.04),0 28px 56px -26px rgba(23,22,15,.3),0 70px 120px -70px rgba(140,90,0,.28)}
.vh-kaart::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(23,22,15,.16) 0%,rgba(23,22,15,0) 55%,rgba(255,255,255,0) 70%,rgba(255,255,255,.5) 100%)}
.vh-foto{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(23,22,15,.18)}
.vh-brief{font-family:'Source Serif 4',Georgia,serif;font-size:16.5px;line-height:1.55;color:var(--inkt);letter-spacing:0}
.vh-brief p+p{margin-top:10px}

/* 1. Mail */
.vh-van{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.vh-van .vh-ft{position:relative;flex:none}
.vh-van .vh-ft::after{content:"";position:absolute;right:-1px;top:-1px;width:11px;height:11px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 2px #fff}
.vh-van div{min-width:0;flex:1}
.vh-van b{display:block;font-size:15.5px;font-weight:650;line-height:1.25}
.vh-van div span{display:block;font-size:13.5px;color:var(--stil)}
.vh-van time{font-size:12.5px;color:var(--stil);align-self:flex-start;margin-top:2px}
.vh-mk{border-radius:4px;padding:1px 3px;margin:0 -3px;background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 0/100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 2. Vraag met keuzes */
.vh-pil{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:999px;font-family:'Source Serif 4',Georgia,serif;font-size:15.5px;line-height:1.3;color:var(--op-geel);white-space:nowrap;
  background:linear-gradient(180deg,#FFD95E 0%,#F9C127 55%,#F2B000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(150,90,0,.18),0 1px 2px rgba(120,70,0,.18),0 14px 26px -14px rgba(170,105,0,.7)}
.vh-pil img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.vh-dok{margin-bottom:14px}
.vh-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:12px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.3;transition:background-color .25s ease,border-color .25s ease}
.vh-opt+.vh-opt{margin-top:2px}
.vh-opt i{width:22px;height:22px;border-radius:50%;background:#1B1A16;color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.vh-opt i svg{width:13px;height:13px}
.vh-opt.is-aan{background:var(--keuze);border-color:var(--keuze-rand)}
.vh-opt.is-aan i{opacity:1;transform:none}
.vh-typ{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--lijn-2);margin-top:12px;padding:6px 0 9px;font-size:14.5px;color:var(--stil)}
.vh-typ span:first-child{flex:1}
.vh-typ .a-mic{width:30px;height:30px}

/* 3. Antwoord */
.vh-antw-kop{display:flex;align-items:center;gap:12px}
.vh-bee{position:relative;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,#fff 0%,#F4F2EC 70%,#E6E3DA 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,22,15,.07),0 6px 14px -6px rgba(23,22,15,.35)}
.vh-bee img{width:23px;height:auto}
.vh-bee::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,rgba(245,180,0,0) 0deg,rgba(245,180,0,.95) 300deg,rgba(245,180,0,0) 360deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));opacity:0;transition:opacity .3s ease}
.vh-antw.schrijft .vh-bee::before{opacity:1;animation:vhDraai 1.1s linear infinite}
@keyframes vhDraai{to{transform:rotate(360deg)}}
.vh-antw-kop b{display:block;font-size:18px;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.vh-antw-kop div span{display:block;font-size:13.5px;color:var(--stil);margin-top:2px}
.vh-keuze{display:flex;align-items:center;gap:8px;margin:16px 0 14px;font-size:13.5px;color:var(--stil)}
.vh-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand);color:var(--inkt);font-family:var(--app);font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap}
.vh-schrijf{border-top:1px solid var(--lijn);padding-top:14px}
.vh-schrijf mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px;margin:0 -2px}
.vh-aan .vh-schrijf mark{background:none;padding:0;margin:0}
.vh-aan .vh-schrijf mark .vh-w{background:var(--mark);border-radius:3px;padding:0 2px;margin:0 -2px}
.vh-sig{color:var(--stil);font-size:15px}
.vh-knoppen{display:flex;gap:8px;margin-top:18px}
.vh-stuur,.vh-aanp{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 20px;border-radius:999px;font-weight:650;font-size:14.5px;white-space:nowrap}
.vh-stuur{min-width:136px;color:var(--op-geel);background:linear-gradient(180deg,#FFC93A 0%,#F5B400 58%,#EEAB00 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(140,85,0,.22),0 1px 2px rgba(23,22,15,.12),0 8px 18px -10px rgba(190,120,0,.75);transition:filter .3s ease,opacity .3s ease,background .3s ease,color .3s ease}
.vh-stuur svg{width:16px;height:16px}
.vh-stuur-b{display:none;align-items:center;gap:7px}
.vh-stuur.klaar{background:linear-gradient(180deg,#3B382F 0%,#1B1A16 62%);color:#FBFAF7;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.42),0 8px 18px -10px rgba(0,0,0,.6)}
.vh-stuur.klaar .vh-stuur-a{display:none}.vh-stuur.klaar .vh-stuur-b{display:inline-flex}
.vh-aanp{background:var(--knop-vlak);box-shadow:inset 0 0 0 1px var(--knop-rand)}

/* ---- Met script: één podium dat blijft staan terwijl je scrolt ---- */
.vh.vh-aan{height:240vh;height:240svh;scroll-margin-top:-30vh}
.vh-aan .vh-plak{position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px));height:calc(100svh - env(safe-area-inset-top,0px));width:auto;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:clamp(80px,11vh,112px) 0 clamp(20px,3.4vh,36px);isolation:isolate}
.vh-aan .vh-plak::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 38% at 50% 58%,rgba(245,180,0,.15),rgba(245,180,0,0) 72%)}
.vh-aan .vh-koppen{display:block;position:relative;width:100%;flex:none;height:clamp(46px,6vw,86px)}
.vh-aan .vh-kop{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;font-size:clamp(42px,5.8vw,84px);letter-spacing:calc(var(--ls-mega) - .004em)}
.vh-wd{display:inline-block;will-change:transform,opacity}
.vh-aan .vh-podium{display:block;position:relative;flex:1;width:100%;min-height:0}
.vh-aan .vh-doek{display:grid;position:absolute;left:50%;top:50%;width:400px;height:470px;place-items:center;perspective:1300px;transform-origin:50% 50%;transform:translate(-50%,-50%)}
.vh-aan .vh-kaart{grid-area:1/1;width:400px;will-change:transform,opacity;backface-visibility:hidden}
.vh-aan .vh-kaart::after{opacity:var(--vh-sch,0)}
.vh-aan .vh-mk{white-space:nowrap;background-size:var(--vh-mk,100%) 100%}
.vh-aan .vh-vlieg{display:block;position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none}
.vh-aan .vh-pil.vh-vlieg{display:inline-flex}
.vh-stip{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFF3C4 0%,#FFCB2E 38%,#E9A500 100%);box-shadow:0 4px 10px -3px rgba(170,105,0,.55)}
.vh-jij{width:50px;height:50px;z-index:1900}
.vh-aan .vh-pil.vh-vlieg,.vh-aan .vh-chip.vh-vlieg{z-index:2000}
.vh-jij img{width:50px;height:50px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 10px 22px -8px rgba(23,22,15,.55)}
.vh-jij em{position:absolute;left:34px;top:38px;font-style:normal;font-family:var(--app);font-weight:650;font-size:12.5px;line-height:1;padding:6px 9px;border-radius:999px;background:#1B1A16;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.5);white-space:nowrap}
.vh-rimpel{width:64px;height:64px;border-radius:50%;border:2px solid rgba(245,180,0,.9);background:radial-gradient(circle,rgba(245,180,0,.28),rgba(245,180,0,0) 70%);z-index:1880}
.vh-vlieger{width:62px;height:62px;overflow:visible;z-index:2100;filter:drop-shadow(0 12px 14px rgba(23,22,15,.22))}
.vh-spoor{width:400px;height:470px;overflow:visible;z-index:2090}
.vh-aan .vh-voortgang{display:flex;gap:6px;flex:none;margin-top:8px}
.vh-voortgang i{position:relative;width:34px;height:4px;border-radius:2px;background:var(--lijn-2);overflow:hidden}
.vh-voortgang i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--inkt);transform-origin:0 50%;transform:scaleX(var(--vh-v,0))}
@media (max-width:640px){
  .vh-aan .vh-plak{padding-top:84px}
  .vh-aan .vh-koppen{height:46px}
  .vh-aan .vh-kop{font-size:clamp(36px,10.4vw,46px)}
}
.vh-w{display:inline-block;position:relative}
.vh-w.vh-cur::after{content:"";position:absolute;right:-4px;top:.18em;bottom:.12em;width:2px;border-radius:1px;background:var(--geel);box-shadow:0 0 6px rgba(245,180,0,.6)}

/* ---------- Telefoon: compacter (Kees, 07-11) ---------- */
@media (max-width:640px){.voet-onder{margin-top:36px}}

/* ---------- Privacy: drie tastbare tegels (1:1), tik voor uitleg (Kees, 08-11) ---------- */
.vt{max-width:820px;margin:clamp(36px,4vw,56px) auto 0;text-align:left}
.vt-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.vt-kaart{position:relative;aspect-ratio:1/1;max-width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:clamp(12px,2vw,24px);border:0;border-radius:clamp(18px,2.2vw,26px);background:linear-gradient(180deg,#FFFFFF 0%,#FAF9F5 100%);color:var(--inkt);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,22,15,.08),0 5px 0 #E6E2D6,0 6px 0 rgba(23,22,15,.06),0 18px 28px -14px rgba(23,22,15,.28);
  transform:translateY(0);transition:transform .14s ease,box-shadow .14s ease,background-color .2s}
.vt-kaart:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,22,15,.08),0 7px 0 #E6E2D6,0 8px 0 rgba(23,22,15,.06),0 24px 32px -14px rgba(23,22,15,.3)}
.vt-kaart:active,.vt-kaart[aria-expanded="true"]{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(23,22,15,.08),0 1px 0 #E6E2D6,0 2px 0 rgba(23,22,15,.06),0 6px 10px -6px rgba(23,22,15,.25)}
.vt-kaart[aria-expanded="true"]{background:linear-gradient(180deg,#FFF8E2 0%,#FFF1C9 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1.5px #EBC45A,0 1px 0 #E2B947,0 6px 10px -6px rgba(23,22,15,.25)}
.vt-kaart:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}
.vt-ico{width:clamp(32px,4vw,46px);height:clamp(32px,4vw,46px);border-radius:clamp(10px,1.2vw,14px);display:grid;place-items:center;background:var(--zacht);color:var(--inkt)}
.vt-ico.geel{background:var(--geel);color:var(--op-geel)}
.vt-ico svg{width:58%;height:58%}
.vt-ico.geel svg{width:70%;height:50%}
.vt-plus{position:absolute;top:clamp(10px,1.8vw,20px);right:clamp(10px,1.8vw,20px);width:clamp(22px,2.6vw,30px);height:clamp(22px,2.6vw,30px);border-radius:50%;background:var(--zacht);display:grid;place-items:center;transition:transform .25s,background-color .2s}
.vt-plus svg{width:55%;height:55%}
.vt-kaart[aria-expanded="true"] .vt-plus{transform:rotate(45deg);background:#fff}
.vt-tekst{display:grid;gap:3px}
.vt-tekst b{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(14.5px,2vw,24px);letter-spacing:calc(var(--ls-kop) * .7);line-height:1.1}
.vt-tekst span{font-size:clamp(12px,1.3vw,15px);line-height:1.3;color:var(--stil)}
.vt-meer{margin-top:18px;padding:clamp(18px,2.4vw,28px);border-radius:22px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn),0 18px 34px -24px rgba(23,22,15,.35);animation:vtOpen .28s ease}
.vt-meer h3{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(18px,1.7vw,22px);letter-spacing:calc(var(--ls-kop) * .7);line-height:1.2}
.vt-meer p{color:var(--inkt-2);margin-top:8px;font-size:clamp(15px,1.3vw,16.5px);line-height:1.55;max-width:44em}
@keyframes vtOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vt-kaart,.vt-plus{transition:none}.vt-meer{animation:none}}
@media (max-width:640px){.vt{margin-top:24px}.vt-meer{margin-top:14px}.vt-tekst span{font-size:12px}}

/* ======================================================================
   v7 (08-11): rustiger, in het ritme van Revolut. Per sectie een kop, hooguit
   één zin, één knop en één groot beeld. Pilknoppen wisselen het beeld, geen
   schuifbalken op de telefoon.
   ====================================================================== */
.sec{padding-top:clamp(80px,8vw,120px)}
.r-kop .kop{text-wrap:balance}
.r-lead{margin-top:16px;font-size:clamp(18px,1.4vw,21px);line-height:1.45;color:var(--inkt-2);max-width:27em;letter-spacing:-.006em;text-wrap:pretty}
.r-kop.midden .r-lead{margin-inline:auto}
.r-knop{margin-top:24px;min-height:48px;padding:0 22px;font-size:15.5px}
.btn-wit{box-shadow:inset 0 -2px 0 rgba(23,22,15,.12),0 8px 20px -10px rgba(0,0,0,.6)}
.btn-wit:active{transform:translateY(1px)}
@keyframes rIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pilknoppen die het beeld wisselen (Revolut: "Zelf beleggen / Automatisch beleggen") */
.wissel{display:flex;flex-wrap:wrap;gap:8px}
.wissel button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#E9E7E1;color:var(--inkt);font-family:var(--app);font-weight:600;font-size:15px;letter-spacing:-.005em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 -1px 0 rgba(23,22,15,.07);transition:background-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease}
.wissel button:hover{background:#DEDBD3}
.wissel button[aria-pressed="true"]{background:linear-gradient(180deg,#3B382F 0%,#1B1A16 62%);color:#FBFAF7;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.4),0 8px 16px -10px rgba(0,0,0,.6)}
.wissel button:active{transform:translateY(1px)}
@media (max-width:400px){.wissel{gap:6px}.wissel button{padding:0 14px;font-size:14.5px}}

/* Twee kolommen op breed scherm: tekst links, beeld rechts */
.r-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.r-twee>*{min-width:0}

/* ---- Functies: drie kaarten ---- */
.f-kaarten{margin-inline:auto}
.f-wissel{justify-content:center;margin-top:18px}
.f-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,4vw,56px)}
.f-kaarten .kaart{flex:none;height:560px}
.f-kaarten .snip{height:350px}
@media (min-width:1024px){.f-wissel{display:none}}
@media (max-width:1023px){
  .f-kaarten{display:block;max-width:560px;margin-top:32px}
  .f-kaarten .kaart:not(.is-aan){display:none}
  .f-kaarten .kaart.is-aan{animation:rIn .35s ease}
  .f-kaarten .kaart>.label{display:none}
  .f-kaarten .kaart h3{margin-top:2px}
}
@media (max-width:640px){
  .f-kaarten .kaart{height:auto;min-height:0;padding:22px 18px 0}
  .f-kaarten .snip{height:300px;margin-top:24px}
  .f-kaarten .kaart h3{font-size:24px;padding-right:56px}
}

/* ---- Beginnen is gewoon inloggen: het kaartje op een getint vlak (Semrush) ---- */
.mb-beeld{display:grid;place-items:center;padding:clamp(28px,5vw,64px) clamp(18px,5vw,64px);border-radius:28px;background:radial-gradient(70% 60% at 50% 45%,rgba(255,255,255,.7),transparent 70%),var(--geel-was)}
.mb-beeld .mb-kaart{width:min(380px,100%)}

/* ---- Privacy: één donker vlak ---- */
.r-donker{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(80px,8vw,120px);padding-block:clamp(72px,8vw,112px);background:var(--nacht);color:#F4F2EC}
.r-donker::before{content:"";position:absolute;left:50%;top:52%;width:min(980px,150vw);height:560px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(245,180,0,.2),rgba(245,180,0,0));z-index:-1;pointer-events:none}
.r-donker .kop{color:#fff}
.r-donker .r-lead{color:rgba(255,255,255,.7)}
.r-donker :focus-visible{outline-color:var(--geel)}
.r-donker .vt-meer{color:var(--inkt)}
.r-donker .vt-meer :focus-visible{outline-color:var(--inkt)}
.r-donker .vt-kaart:focus-visible{outline:2px solid var(--geel)}
.r-donker .vt-kaart{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.06),0 5px 0 #CFC9B8,0 6px 0 rgba(0,0,0,.4),0 22px 34px -14px rgba(0,0,0,.7)}
.r-donker .vt-kaart:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.06),0 7px 0 #CFC9B8,0 8px 0 rgba(0,0,0,.4),0 26px 38px -14px rgba(0,0,0,.75)}
.r-donker .vt-kaart:active,.r-donker .vt-kaart[aria-expanded="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1.5px #EBC45A,0 1px 0 #E2B947,0 6px 10px -6px rgba(0,0,0,.6)}
.pv-knop{text-align:center;margin-top:clamp(32px,4vw,44px)}

/* ---- Onderweg: één grote foto met één wit kaartje ---- */
.r-twee-dag{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.d-wissel{margin-top:30px}
.d-zin{margin-top:18px;font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(21px,1.9vw,27px);letter-spacing:calc(var(--ls-kop) * .7);line-height:1.2;max-width:19em;min-height:2.4em;color:var(--inkt)}
.d-wissel-smal,.d-zin-smal{display:none}
.d-beeld{position:relative;aspect-ratio:4/5;max-width:520px;margin-left:auto;border-radius:28px;overflow:hidden;background:var(--doek);isolation:isolate;box-shadow:0 40px 80px -44px rgba(23,22,15,.55)}
.d-staat{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.d-staat.is-aan{opacity:1;visibility:visible;transition:opacity .55s ease}
.d-staat>img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.d-staat.is-aan>img{transform:none}
.d-kaart{position:absolute;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:14px 16px;border-radius:20px;background:#fff;font-family:var(--app);letter-spacing:-.006em;color:var(--inkt);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 44px -18px rgba(0,0,0,.55);opacity:0;transform:translateY(12px);transition:opacity .45s ease .18s,transform .55s cubic-bezier(.2,.8,.2,1) .18s}
.d-staat.is-aan .d-kaart{opacity:1;transform:none}
.d-kaart.boven{top:16px;bottom:auto}
.d-merk,.d-mic,.d-vink{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;grid-row:span 2}
.d-merk{background:var(--geel-was)}
.d-merk img{width:22px;height:auto}
.d-mic{background:#1B1A16;color:#fff}
.d-mic svg{width:19px;height:19px}
.d-vink{background:#E3F1E8;color:var(--groen)}
.d-vink svg{width:20px;height:20px}
.d-t{min-width:0}
.d-t b{display:block;font-size:15.5px;font-weight:650;line-height:1.25}
.d-t span{display:block;font-size:13.5px;color:var(--stil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-kaart time{font-size:12.5px;color:var(--stil);align-self:start;margin-top:2px}
.d-kaart em{grid-column:2/-1;justify-self:start;margin-top:8px;padding:4px 11px;border-radius:999px;background:var(--keuze);font-style:normal;font-size:12.5px;font-weight:650;color:var(--op-geel)}
.d-klaar{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:900px){
  .r-twee{grid-template-columns:1fr;gap:32px}
  .d-wissel-breed,.d-zin-breed{display:none}
  .d-wissel-smal{display:flex;justify-content:center;margin-top:18px}
  .d-zin-smal{display:block;text-align:center;margin:14px auto 0;font-size:20px}
  .d-beeld{margin-inline:auto}
}
@media (max-width:640px){
  .d-beeld{margin-inline:calc(-1 * var(--pad));max-width:none;border-radius:0;box-shadow:none}
}

/* ---- Jij runt de zaak ---- */

/* ---- Voor wie: breed vier kaarten, smal één grote foto met pilknoppen ---- */
.mensen{width:min(var(--max),100% - 2*var(--pad));margin:clamp(40px,4.4vw,56px) auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mens{margin:0;border-radius:26px;padding:9px 9px 16px;background:var(--m,#FCEFC9)}
.mens-foto{position:relative}
.mens-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:19px}
.ballon{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:15px 15px 15px 5px;background:var(--wit);font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.38;color:var(--inkt);box-shadow:0 14px 30px -16px rgba(23,22,15,.5)}
.ballon .a-mk{background:var(--mark)}
.mens figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 6px 0}
.mens figcaption b{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:19px;letter-spacing:calc(var(--ls-kop) * .6)}
.mens figcaption span{font-size:14px;color:var(--inkt-2)}
.m-wissel{display:none}
.mensen-noot{text-align:center;margin-top:20px;font-size:13.5px}
@media (max-width:1023px){
  .mensen{grid-template-columns:minmax(0,1fr);max-width:440px;gap:0;margin-top:32px}
  .mens{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
  .mens.is-aan{opacity:1;visibility:visible;transition:opacity .45s ease}
  .mens-foto img{aspect-ratio:1/1;object-position:50% 30%}
  .m-wissel{display:flex;justify-content:center;margin-top:18px}
  .mensen-noot{margin-top:12px}
}

/* ---- Prijs: één rustige kaart ---- */
.pk7{position:relative;max-width:500px;margin:clamp(36px,4vw,52px) auto 0;padding:clamp(28px,4vw,44px);border-radius:32px;background:var(--wit);text-align:left;
  box-shadow:0 0 0 1px rgba(23,22,15,.05),0 2px 6px rgba(23,22,15,.04),0 40px 80px -40px rgba(23,22,15,.3)}
.pk7::after{content:"";position:absolute;left:14%;right:14%;bottom:-44px;height:60%;z-index:-2;background:radial-gradient(closest-side,rgba(245,180,0,.3),transparent);pointer-events:none}
.pk-bedrag{display:flex;align-items:flex-start;gap:6px;font-family:var(--font-kop);font-weight:var(--w-mega);line-height:.82}
.pk-bedrag sup{font-size:clamp(28px,3vw,40px);line-height:1;margin-top:.1em}
.pk-bedrag b{font-weight:inherit;font-size:clamp(84px,8.4vw,116px);letter-spacing:calc(var(--ls-mega) - .02em)}
.pk-onder{margin-top:16px;font-size:17px;font-weight:600;color:var(--inkt)}
.pk-onder span{display:block;font-weight:400;color:var(--stil)}
.pk-lijst{margin:26px 0 30px;padding-top:22px;border-top:1px solid var(--lijn);display:grid;gap:12px}
.pk-lijst li{display:flex;gap:12px;align-items:center;font-size:16.5px;font-weight:550;line-height:1.35}
.pk-lijst svg{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--geel-was);flex:none}
.pk7 .btn{width:100%}

/* ---- Vragen: uitklaplijst (Semrush) ---- */
.faq7{max-width:820px;margin:clamp(32px,4vw,52px) auto 0;display:grid;gap:8px}
.faq7 details{border-radius:20px;background:#EFEDE7;transition:background-color .2s ease,box-shadow .2s ease}
.faq7 details:hover{background:#EAE8E1}
.faq7 details[open]{background:var(--wit);box-shadow:0 0 0 1px var(--lijn),0 20px 40px -28px rgba(23,22,15,.3)}
.faq7 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 16px 18px 22px;border-radius:20px}
.faq7 summary::-webkit-details-marker{display:none}
.faq7 summary>span{display:grid;gap:5px;font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(17px,1.4vw,20px);letter-spacing:calc(var(--ls-kop) * .5);line-height:1.25}
.faq7 small{font-family:var(--app);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.faq7 summary i{width:40px;height:40px;border-radius:50%;background:var(--wit);box-shadow:0 0 0 1px var(--lijn-2);display:grid;place-items:center;flex:none;transition:transform .25s ease,background-color .2s ease}
.faq7 summary i svg{width:16px;height:16px}
.faq7 details[open] summary i{transform:rotate(45deg);background:var(--geel);box-shadow:none}
.faq7 details p{padding:0 22px 22px;color:var(--inkt-2);font-size:16px;max-width:42em}
.faq7-onder{display:flex;justify-content:center;align-items:center;gap:12px 22px;flex-wrap:wrap;margin-top:22px}
.faq7-onder .pil-link{background:transparent;cursor:pointer;font-family:inherit}
#faq-knop[hidden]{display:none}
.faq7-help{font-weight:600;font-size:14.5px;text-underline-offset:3px}

/* ---- Slot ---- */
.slot{margin-top:clamp(80px,8vw,120px)}

/* ---- Telefoon: koppen links (Revolut), minder lucht ---- */
@media (max-width:640px){
  .mb-beeld{padding:20px 14px;border-radius:24px}
  .d-beeld{aspect-ratio:5/6}
  .r-kop.midden,.faq-sec .kop.midden,.prijs-sec{text-align:left}
  .r-kop.midden .r-lead{margin-inline:0}
  .r-lead{font-size:18.5px}
  .pv-feiten{grid-template-columns:1fr;gap:16px}
  .pv-knop{text-align:left}
  .pk7{padding:26px 22px 22px}
  .faq7 summary{padding:16px 12px 16px 18px}
  .faq7 summary>span{font-size:17px}
  .faq7 details p{padding:0 18px 18px;font-size:15.5px}
  .faq7-onder{justify-content:flex-start}
  .slot{min-height:min(70svh,600px)}
  .slot-paneel{padding-block:56px}
}

/* ---- Vergelijkschakelaars: op de telefoon ingeklapt achter één klein rondje ---- */
.schakel-open{display:none}
@media (max-width:640px){
  .schakel-open{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#1B1A16;color:#fff;font-family:var(--app);font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
  .schakelaars:not(.open) .schakel{display:none}
  .schakelaars.open .schakel-open{background:var(--geel);color:var(--op-geel)}
}

/* ---------- Ronde 08-11: tabs in de foto, functies strakker op mobiel ---------- */
.d-beeld .d-wissel{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:center;flex-wrap:nowrap;gap:8px;margin:0;padding:0 12px}
.d-beeld .d-wissel button{min-height:40px;padding:0 16px;font-size:14.5px;background:rgba(18,17,14,.34);color:#fff;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.d-beeld .d-wissel button:hover{background:rgba(18,17,14,.5)}
.d-beeld .d-wissel button[aria-pressed="true"]{background:#fff;color:var(--inkt);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.d-beeld .d-wissel button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.d-beeld::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.38));z-index:1;pointer-events:none}
.d-staat .d-kaart{z-index:2}
.d-kaart{bottom:76px}
.d-kaart.boven{top:16px;bottom:auto}
@media (max-width:380px){.d-beeld .d-wissel{gap:6px;padding:0 8px}.d-beeld .d-wissel button{padding:0 12px;font-size:13.5px}}
.f-alle{display:none}
@media (max-width:1023px){
  #functies .r-kop .r-knop{display:none}
  .f-wissel{display:flex;flex-wrap:nowrap;gap:0;width:100%;max-width:560px;margin:28px auto 0;padding:4px;border-radius:999px;background:#E9E7E1;box-shadow:inset 0 1px 2px rgba(23,22,15,.08)}
  .f-wissel button{flex:1 1 0;min-height:40px;padding:0 8px;background:transparent;box-shadow:none;color:var(--inkt-2)}
  .f-wissel button:hover{background:transparent;color:var(--inkt)}
  .f-wissel button[aria-pressed="true"]{background:#fff;color:var(--inkt);box-shadow:0 1px 2px rgba(23,22,15,.1),0 6px 14px -8px rgba(23,22,15,.35)}
  .f-kaarten{margin-top:14px}
  .f-kaarten .snip{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .f-alle{display:flex;justify-content:center;margin-top:22px}
}

/* ======================================================================
   Ronde 2 (08-11, Kees): meer ruimte, vaker een andere achtergrond, de tegels
   draaien om "Jij runt de zaak", en iets van het speelse uit de hero terug.
   Vier tinten: warm gebroken wit, wit, zacht geel en één donker vlak.
   ====================================================================== */
:root{--ritme:clamp(64px,6.7vw,96px);--r-band:clamp(28px,3vw,44px);--warm:#F3F1EA}
/* Banden: elke sectie een eigen vlak dat met ronde bovenhoeken over de vorige schuift */
.band{position:relative;isolation:isolate;padding-block:var(--ritme)}
.band-wit{background:var(--wit)}
.band-warm{background:radial-gradient(70% 55% at 50% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),var(--warm)}
.band-geel{background:radial-gradient(46% 42% at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0) 75%),var(--geel-was)}


#functies{margin-top:0}
.voet{background:var(--grond)}

/* ---- Zwevende 3D-dingen uit de hero, spaarzaam aan de rand van een sectie ---- */
.zw-plek{position:relative}
.zweef{position:absolute;z-index:2;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 18px rgba(80,60,20,.18));animation:zweef 7s ease-in-out infinite alternate}
@keyframes zweef{from{transform:translate3d(0,0,0) rotate(var(--zr,-4deg))}to{transform:translate3d(0,-12px,0) rotate(calc(var(--zr,-4deg) * -1))}}
.zw-f{width:clamp(84px,9vw,140px);right:0;top:-10px;--zr:-6deg}
.zw-at{width:clamp(64px,7vw,108px);right:-10px;top:-26px;--zr:-8deg;animation-duration:8s}
.zw-vink{width:clamp(70px,7vw,104px);right:-24px;top:-34px;--zr:5deg;animation-duration:6.5s}
.zw-vragen{max-width:820px;margin-inline:auto;height:0}
.zw-v{width:clamp(80px,9vw,140px);right:0;top:-18px;--zr:-7deg;animation-duration:7.5s}
.mb-beeld{position:relative;overflow:visible}
.pk7{overflow:visible}
.band-wit .pk7{box-shadow:0 0 0 1px rgba(23,22,15,.07),0 2px 6px rgba(23,22,15,.05),0 40px 80px -36px rgba(120,80,0,.35)}
@media (max-width:640px){
  .zw-f{width:72px;right:2px;top:-88px}
  .zw-at{width:60px;right:-4px;top:-22px}
  .zw-vink{width:62px;right:-6px;top:-30px}
  .zw-v{width:74px;right:2px;top:-84px}
}
/* De inlogkaart zweeft zacht, zoals de kaartjes in de hero */
.mb-beeld .mb-kaart{animation:kaartZweef 9s ease-in-out infinite alternate}
@keyframes kaartZweef{from{transform:translate3d(0,0,0) rotate(-.6deg)}to{transform:translate3d(0,-8px,0) rotate(.6deg)}}

.band-warm .faq7 details{background:rgba(255,255,255,.72)}
.band-warm .faq7 details:hover{background:#fff}
.band-warm .faq7 details[open]{background:#fff}

/* ---- Jij runt de zaak: de tegels draaien in een ellips om de kop en blijven rechtop ---- */
@property --baan{syntax:'<angle>';inherits:true;initial-value:0deg}
.zaak{overflow:hidden}
.baan{position:relative;--t:clamp(104px,9vw,136px);--rx:min(540px,calc(50vw - var(--t) / 2 - 28px));--ry:clamp(200px,17vw,250px);--n:9;
  height:calc(2 * var(--ry) + var(--t) + 24px);animation:baanDraai 96s linear infinite}
.baan.stil{animation-play-state:paused}
@keyframes baanDraai{to{--baan:360deg}}
.baan-ring{position:absolute;inset:0}
.baan .tegel{position:absolute;left:50%;top:50%;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);justify-self:auto;--i:var(--di);
  --hoek:calc(var(--baan) + var(--i) * 360deg / var(--n) - 90deg);
  transform:translate3d(calc(cos(var(--hoek)) * var(--rx)),calc(sin(var(--hoek)) * var(--ry)),0) scale(calc(.93 + sin(var(--hoek)) * .07));
  box-shadow:0 1px 2px rgba(23,22,15,.06),0 22px 34px -20px rgba(120,80,0,.45);will-change:transform}
.baan .tegel.vraag,.baan .tegel.zacht{background:var(--wit)}
.baan .tegel.wit{box-shadow:0 0 0 1px rgba(23,22,15,.05),0 22px 34px -20px rgba(120,80,0,.4)}
.baan .tegel.ja{font-size:calc(var(--t) * .14);padding:0 calc(var(--t) * .12)}
.baan .tegel.inkt span{font-size:calc(var(--t) * .2)}
.baan .tegel.vraag{font-size:calc(var(--t) * .2);padding:calc(var(--t) * .12)}
.baan .tegel.wit em{font-size:calc(var(--t) * .095)}
.baan .tegel.wit img{width:calc(var(--t) * .25)}
.baan .tegel.wit svg{width:calc(var(--t) * .3);padding:calc(var(--t) * .065)}
.baan-kop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;margin:0;text-align:center;white-space:nowrap}
@media (min-width:761px){.baan-kop{font-size:clamp(40px,4.6vw,68px)}}
@media (max-width:760px){
  .baan{--t:84px;--rx:min(150px,calc(50vw - var(--t) / 2 - 8px));--ry:206px;--n:8;margin-inline:calc(-1 * var(--pad))}
  .baan .tegel{--i:var(--mi)}
  .baan .alleen-breed{display:none!important}
  .baan-kop{font-size:32px;line-height:1.02}
  .baan-kop span{display:block}
  .baan-kop br{display:none}
}
@media (max-width:374px){.baan{--t:76px;--ry:212px}.baan-kop{font-size:30px}}
@media (max-width:640px){.band.slot{min-height:min(76svh,640px)}}

/* ======================================================================
   v8 (08-11): één systeem, gemeten aan Revolut, Semrush en Cleo.
   Zes lettergroottes, twee lettertypes (plus de mailletter in productbeelden),
   één knopvorm. Geel is alleen voor "Naar de wachtlijst".
   Vast ritme: sectie 144 / 96 px, kop naar zin 16, zin naar knop 28, knop of
   zin naar beeld 56 / 40. Rechte overgangen tussen de vlakken.
   ====================================================================== */
:root{
  --t-h1:clamp(44px,6.1vw,88px);
  --t-h2:clamp(36px,3.9vw,56px);
  --t-h3:clamp(22px,1.7vw,24px);
  --t-lead:clamp(18px,1.4vw,20px);
  --t-tekst:16px;
  --t-klein:14px;
  --naar-beeld:clamp(40px,3.9vw,56px);
}
body{font-size:var(--t-tekst)}
.kop,.hero h1{text-wrap:balance}
.hero h1{font-size:var(--t-h1);letter-spacing:-.04em;line-height:1}
.kop{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em}
.r-lead,.hero-zin{font-size:var(--t-lead);line-height:1.45;color:var(--inkt);font-weight:400;letter-spacing:-.006em}
.r-lead{margin-top:16px;max-width:30em}
.hero-zin{max-width:31em;margin-inline:auto}
.klein,.hero-na,.mensen-noot{font-size:var(--t-klein)}
.r-donker .r-lead{color:rgba(255,255,255,.78)}

/* ---- Eén knop: pil, 52 hoog (48 op de telefoon), 16 px. Geel = wachtlijst. ---- */
.btn{min-height:52px;padding:0 26px;font-size:var(--t-tekst);font-weight:600;border-radius:999px;gap:8px}
.btn-rand{border:1.5px solid var(--inkt);background:transparent;color:var(--inkt)}
.btn-rand:hover{background:var(--inkt);color:#FBFAF7;border-color:var(--inkt)}
.btn-witrand{border-width:1.5px}
.nav-knop{height:40px;padding:0 18px;border-radius:999px;font-size:var(--t-klein);
  background:linear-gradient(180deg,#FFC93A 0%,#F5B400 58%,#EEAB00 100%);color:var(--op-geel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(140,85,0,.22),0 1px 2px rgba(23,22,15,.12)}
.nav-knop:hover{background:linear-gradient(180deg,#FFD050 0%,#FFC21F 58%,#F5B400 100%)}
.wissel button{font-size:var(--t-tekst)}
@media (max-width:640px){.btn{min-height:48px;padding:0 22px}}
@media (max-width:420px){.nav .nav-knop{height:36px}}

/* ---- Hero: veld en knoppen als pillen ---- */
.hero-acties{gap:12px}
.hero-wl,.wl{border-radius:999px;padding:5px}
.hero-wl input,.wl input{font-size:var(--t-tekst);padding:0 18px}
.hero-wl .btn,.wl .btn{min-height:46px;padding:0 22px;flex:none}
.hero-hoe{height:auto;min-height:56px;background:transparent;box-shadow:none}
.hero-hoe:hover{background:var(--inkt)}
.hero-na{margin-top:16px}
@media (max-width:480px){
  .hero-wl,.wl{flex-direction:column;border-radius:26px;padding:6px}
  .hero-wl input,.wl input{padding:13px 14px}
  .hero-wl .btn,.wl .btn{width:100%}
  .hero-hoe{min-height:48px;width:100%}
}

/* ---- Schuifschermen: één zin onder elke kop ---- */
.vh-zin{display:block;margin:12px auto 0;max-width:26em;font-family:var(--font-tekst);font-weight:400;font-size:var(--t-lead);line-height:1.4;letter-spacing:-.006em;color:var(--inkt);white-space:normal}
.vh:not(.vh-aan) .vh-zin{margin-inline:0}
@media (max-width:640px){.vh-zin{font-size:17px;max-width:20em}}

/* ---- Vaste ruimte tussen kop en beeld ---- */
.band.r-donker{margin-top:0}
.f-kaarten,.mensen,.vt,.d-blok{margin-top:var(--naar-beeld)}
.r-kop .kop,.st-vlak .kop{margin:0}

/* ---- Functies: kop, zin, drie kaarten (breed) of pilknoppen met één kaart (telefoon) ---- */
.kaart{padding:32px 32px 0}
.kaart h3{font-size:var(--t-h3);margin-top:0;padding-right:0;max-width:none}
.k-zin{margin-top:8px;font-size:var(--t-tekst);color:var(--inkt)}
.f-kaarten .kaart{height:540px}
.f-kaarten .snip{height:360px}
.f-alle{display:flex;justify-content:center;margin-top:40px}
@media (max-width:1023px){
  .f-wissel{margin-top:var(--naar-beeld)}
  .f-kaarten{margin-top:14px}
}
@media (max-width:640px){
  .f-kaarten .kaart{height:auto;padding:24px 20px 0}
  .f-kaarten .kaart h3{font-size:var(--t-h3);padding-right:0}
  .f-kaarten .snip{height:300px;margin-top:24px}
  .f-alle{justify-content:flex-start;margin-top:28px}
}

/* ---- Onderweg: telefoon één foto met pilknoppen, breed drie momenten naast elkaar ---- */
.d-foto{position:absolute;inset:0}
.d-foto>img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.d-staat.is-aan .d-foto>img{transform:none}
.d-moment{display:none}
.d-zin{display:block;margin:16px 0 0;font-family:var(--font-tekst);font-size:var(--t-lead);font-weight:400;letter-spacing:-.006em;line-height:1.4;color:var(--inkt);min-height:2.8em;max-width:none}
@media (max-width:1023px){
  .d-beeld{margin-inline:auto;max-width:520px}
}
@media (max-width:640px){
  .d-beeld{margin-inline:calc(-1 * var(--pad));max-width:none;border-radius:0;box-shadow:none;aspect-ratio:5/6}
}
@media (min-width:1024px){
  .d-beeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;aspect-ratio:auto;max-width:none;margin:0;overflow:visible;border-radius:0;background:none;box-shadow:none}
  .d-beeld::after{display:none}
  .d-staat{position:relative;inset:auto;opacity:1;visibility:visible;transition:none}
  .d-foto{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--doek);box-shadow:0 30px 60px -40px rgba(23,22,15,.5)}
  .d-foto>img{transform:none}
  .d-staat .d-kaart{opacity:1;transform:none;bottom:14px;left:14px;right:14px}
  .d-staat .d-kaart.boven{top:14px;bottom:auto}
  .d-beeld .d-wissel{display:none}
  .d-moment{display:grid;gap:4px;padding:18px 4px 0}
  .d-moment b{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.15}
  .d-moment span{font-size:var(--t-tekst);color:var(--inkt)}
  .d-zin{display:none}
}

/* ---- Privacy: drie tastbare tegels ---- */
.vt-ico.geel svg{width:58%;height:58%}
.vt-tekst b{font-size:clamp(16px,2vw,24px)}
.vt-tekst span{font-size:var(--t-klein)}
.vt-meer h3{font-size:var(--t-h3)}
.vt-meer p{font-size:var(--t-tekst)}
.vl-zegels{margin-top:16px}
.pv-knop{text-align:center;margin-top:var(--naar-beeld)}
@media (max-width:640px){
  .vt-kaart{padding:12px}
  .vt-tekst b{font-size:16px;letter-spacing:-.01em}
  .vt-tekst span{font-size:13px;line-height:1.25}
  .pv-knop{text-align:left}
}

/* ---- Voor wie ---- */
.mens figcaption b{font-size:var(--t-lead)}
.mens figcaption span{font-size:var(--t-klein)}
.mensen-noot{margin-top:20px}

/* ---- Beginnen en prijs: twee vlakken (Semrush) ---- */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.st-vlak{display:flex;flex-direction:column;border-radius:32px;padding:clamp(28px,4vw,56px)}
.st-in{background:var(--geel-was)}
.st-prijs{background:var(--zacht)}
.st-in .mb-beeld{margin-top:var(--naar-beeld);background:radial-gradient(70% 60% at 50% 45%,rgba(255,255,255,.75),transparent 70%);padding:8px 0 0}
.st-noot{margin-top:28px;max-width:30em}
.pk-bedrag{margin-top:var(--naar-beeld)}
.pk-bedrag b{font-size:var(--t-h1);letter-spacing:-.05em}
.pk-bedrag sup{font-size:var(--t-h3)}
.pk-onder{margin-top:16px;font-weight:400}
.pk-lijst{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--lijn-2)}
.pk-lijst li{font-size:var(--t-tekst);font-weight:500}
.pk-lijst svg{background:var(--wit)}
.pk-knop{margin-top:auto;align-self:flex-start}
.st-prijs .pk-lijst{margin-bottom:40px}
@media (max-width:1023px){
  .st-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .st-vlak{border-radius:26px;padding:28px 20px}
  .st-in .mb-beeld{padding:0}
  .pk-knop{width:100%}
}

/* ---- Vragen ---- */
.faq7{margin-top:var(--naar-beeld)}
.faq7 summary>span{font-size:var(--t-lead);gap:0}
.faq7 details p{font-size:var(--t-tekst)}
.faq7-help{font-size:var(--t-tekst)}

/* ---- Slot: Jij runt de zaak ---- */
.slot8{background:radial-gradient(46% 42% at 50% 34%,rgba(255,255,255,.85),rgba(255,255,255,0) 75%),var(--geel-was);overflow:hidden}
.slot8 .baan-kop{font-size:var(--t-h2)}
.slot-onder{text-align:center}
.slot-onder .r-lead{margin:8px auto 0;max-width:26em;text-wrap:balance}
.slot-onder .wl{margin:28px auto 0;background:var(--wit)}
.slot-onder .wl-ok{background:var(--wit)}
@media (max-width:760px){
  .slot-onder{text-align:left}
  .slot-onder .r-lead{margin-inline:0}
}

/* ---- Voet: zelfde letterschaal ---- */
.voet-grid{font-size:var(--t-tekst)}
.voet h2{font-size:var(--t-klein);letter-spacing:0;text-transform:none;font-weight:600;color:var(--inkt)}
.voet-onder{font-size:var(--t-klein)}

/* ---- Koppen lichten op bij het scrollen (Cleo). Zonder script staan ze gewoon in beeld. ---- */
.kop.licht{opacity:.14;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.kop.licht.aan{opacity:1;transform:none}
.baan-kop.licht{transform:translate(-50%,calc(-50% + 14px))}
.baan-kop.licht.aan{transform:translate(-50%,-50%)}

/* ---- Vergelijkschakelaars alleen voor Kees (?kees achter het adres) ---- */
html:not(.kees) .schakelaars{display:none}

/* ---- Ronde 2 na meting: korter (Revolut houdt 96 tot 128 px tussen twee secties) ---- */
.vh{margin-top:clamp(24px,3vw,48px)}
.vh.vh-aan{height:320vh;height:320svh}
.st-in .mb-beeld{max-height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.st-in .mb-beeld .mb-kaart{animation:none}
.slot8 .baan{--ry:clamp(170px,14vw,200px)}
@media (max-width:760px){.slot8 .baan{--ry:206px}.slot8 .baan-kop{font-size:var(--t-h2)}}
.voet-merk{font-size:clamp(80px,16vw,240px)}
@media (min-width:1024px){.d-foto{aspect-ratio:5/6}}
@media (max-width:420px){.nav .nav-knop{font-size:var(--t-klein)}}
.d-beeld .d-wissel button{font-size:var(--t-tekst)}
@media (max-width:380px){.d-beeld .d-wissel button{font-size:var(--t-klein)}}

@media (max-width:640px){.pk-bedrag b{font-size:80px}}
/* Zonder beweging op een smal scherm: elke kop direct boven zijn eigen kaart */
@media (max-width:900px){
  .vh:not(.vh-aan) .vh-kop[data-s="0"]{grid-row:1}.vh:not(.vh-aan) .vh-mail{grid-row:2}
  .vh:not(.vh-aan) .vh-kop[data-s="1"]{grid-row:3}.vh:not(.vh-aan) .vh-vel{grid-row:4}
  .vh:not(.vh-aan) .vh-kop[data-s="2"]{grid-row:5}.vh:not(.vh-aan) .vh-antw{grid-row:6}
}
.vh:not(.vh-aan) .vh-pil{white-space:normal}

/* ---- Schuifschermen, ronde 3 ---- */
.vh-anker{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start}
@media (max-width:1023px){html:has(.vh-aan){scroll-snap-type:y proximity}}
/* ======================================================================
   v9 (08-11): de werkdag als telefoon met de echte app, de 3D-familie
   door de pagina (slot, munt), en afwerking: drie rondingen, twee
   schaduwen, één lijndikte voor iconen, één tempo voor beweging.
   ====================================================================== */
:root{
  --r-s:12px; --r-m:20px; --r-l:28px;
  --sch-1:0 1px 2px rgba(23,22,15,.06),0 10px 24px -14px rgba(23,22,15,.28);
  --sch-2:0 1px 2px rgba(23,22,15,.06),0 36px 70px -34px rgba(23,22,15,.38);
  --gaan:cubic-bezier(.2,.7,.2,1);
}

/* ---- Afwerking: rondingen ---- */
.kaart,.st-vlak,.mens,.vt-meer,.vh-kaart,.mb-kaart{border-radius:var(--r-l)}
.snip{border-radius:var(--r-m) var(--r-m) 0 0}
.mens-foto img,.faq7 details,.faq7 summary,.wl-ok,.paneel{border-radius:var(--r-m)}
.nav-kaart,.mb-knop,.mb-klaar,.s-lijst{border-radius:var(--r-s)}
.vt-kaart{border-radius:var(--r-l)}
.baan .tegel{border-radius:var(--r-l)}
@media (max-width:760px){.vt-kaart,.baan .tegel{border-radius:var(--r-m)}}
@media (max-width:640px){.st-vlak{border-radius:var(--r-l)}}

/* ---- Afwerking: schaduwen ---- */
.mb-kaart,.faq7 details[open],.vt-meer{box-shadow:var(--sch-2)}
.snip{box-shadow:var(--sch-1)}

/* ---- Afwerking: iconen in één lijndikte ---- */
.vt-ico svg,.vt-plus svg,.faq7 summary i svg,.pk-lijst svg,.mb-klaar svg,.vl-zegel{stroke-width:2.2}

/* ---- Afwerking: één tempo ---- */
.btn,.wissel button,.nav-knop{transition:background .2s var(--gaan),color .2s var(--gaan),border-color .2s var(--gaan),transform .14s var(--gaan),box-shadow .2s var(--gaan)}
.vt-kaart{transition:transform .14s var(--gaan),box-shadow .14s var(--gaan),background-color .2s var(--gaan)}
.faq7 details,.faq7 summary i{transition:background-color .2s var(--gaan),box-shadow .2s var(--gaan),transform .45s var(--gaan)}
.kop.licht{transition:opacity .9s var(--gaan),transform .9s var(--gaan)}

/* ---- 3D-familie ---- */
.zw-plek{position:relative}
.zw-slot{width:clamp(76px,7.6vw,112px);right:clamp(0px,6vw,120px);top:-24px;--zr:6deg;animation-duration:7.5s;filter:drop-shadow(0 22px 22px rgba(0,0,0,.5))}
.st-prijs{position:relative}
.zw-munt{width:clamp(76px,7.4vw,108px);right:clamp(20px,3vw,40px);top:-26px;--zr:-8deg;animation-duration:8.5s}
@media (max-width:640px){
  .zw-slot{position:relative;display:block;right:auto;top:auto;width:60px;margin:0 0 20px}
  .zw-munt{width:68px;right:14px;top:-22px}
}


/* ======================================================================
   v10 (08-11): één rustige kopbalk (Revolut, Semrush, Cleo) en één grote
   zin in plaats van de werkdag (Cleo).
   ====================================================================== */

/* ---- Terugvallen op een stap alleen binnen de schuifschermen; de functiekaarten zijn geen haakpunt meer ---- */
.kaart{scroll-snap-align:none}
@media (max-width:1023px){html.vh-snap{scroll-snap-type:y proximity}}
@media (max-width:1023px){html:has(.vh-aan):not(.vh-snap){scroll-snap-type:none}}


/* ======================================================================
   v12 (08-11): sectie 4 bijna 1 op 1 naar Current ("Build credit while
   you bank"). Maten uit hun schermafbeelding (1920 breed), omgerekend
   naar schermbreedte. Afwijking: foto 2:1 in plaats van 16:9, zodat
   onze foto (1600 breed) scherp blijft.
   ====================================================================== */
.cur12{background:#fff;color:#111;padding:8.85vw 0 2.5vw}
.cur-tekst{text-align:center;padding-inline:max(16px,4vw)}
.cur-kop{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:max(48px,6vw);line-height:.87;letter-spacing:-.04em}
.cur-sub{text-wrap:balance;margin-top:max(20px,2.35vw);font-size:clamp(16px,1.2vw,23px);line-height:1.35;letter-spacing:-.005em}
.cur-foto{margin:max(40px,5.6vw) 2.4vw 0}
.cur-foto img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:26% 50%}
@media (max-width:760px){
  .cur12{padding:88px 0 16px}
  .cur-kop{font-size:13.4vw;line-height:.9}
  .cur-sub{margin-top:18px;max-width:22em;margin-inline:auto}
  .cur-foto{margin:40px 16px 0}
  .cur-foto img{aspect-ratio:1/1;object-position:16% 50%}
}

/* ---- v13: kop altijd zichtbaar, kop in onze koppenletter, scherpe foto met ronde hoeken ---- */
.nav.weg{transform:none}
.cur-kop{font-family:var(--font-kop);font-weight:500;letter-spacing:-.045em;line-height:.9}
.cur-foto{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);box-sizing:content-box}
.cur-foto img{border-radius:var(--r-l);aspect-ratio:16/9;object-position:50% 38%}
@media (max-width:760px){
  .cur-foto{padding-inline:16px}
  .cur-foto img{border-radius:var(--r-m);aspect-ratio:4/5;object-position:44% 50%}
}

/* ---- v14: bredere foto (niet alleen vakmensen) ---- */
.cur-foto img{object-position:50% 42%}
@media (max-width:760px){.cur-foto img{object-position:26% 50%}}
html{overflow-x:clip}

/* ---- v15: de foto groot, de zin erin ---- */
.cur15{background:#fff;padding:max(16px,1.1vw)}
.c15-beeld{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-l);height:min(calc(100svh - 2 * max(16px,1.1vw)),62vw);min-height:560px;background:#2a2622}
.c15-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
.c15-beeld::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(14,12,9,.74) 0%,rgba(14,12,9,.42) 30%,rgba(14,12,9,0) 58%)}
.c15-tekst{position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,4.2vw,72px);color:#fff}
.c15-tekst .cur-kop{color:#fff;margin:0}
.c15-tekst .cur-sub{color:rgba(255,255,255,.92);margin:max(16px,1.6vw) 0 0;max-width:26em;text-wrap:pretty}
@media (max-width:760px){
  .cur15{padding:12px}
  .c15-beeld{border-radius:var(--r-m);height:min(calc(100svh - 24px),680px);min-height:540px}
  .c15-beeld img{object-position:70% 50%}
  .c15-beeld::after{background:linear-gradient(to top,rgba(14,12,9,.78) 0%,rgba(14,12,9,.45) 32%,rgba(14,12,9,0) 60%)}
  .c15-tekst{padding:28px 24px}
  .c15-tekst .cur-sub{margin-inline:0;max-width:20em}
}

/* ---- v16: privacy ook als kaart, in dezelfde witte lijst als de foto ---- */
:root{--g15:max(16px,1.1vw)}
.cur15{padding:var(--g15)}
.k16{background:#fff;padding:0 var(--g15) var(--g15)}
#privacy.r-donker{margin:0;border-radius:var(--r-l)}
@media (max-width:760px){
  :root{--g15:12px}
  #privacy.r-donker{border-radius:var(--r-m)}
}

/* ---- v17: de wachtlijst onderaan ook als kaart ---- */
.k17{background:var(--warm);padding:0 var(--g15) var(--g15)}
.k17 .slot8{border-radius:var(--r-l)}
@media (max-width:760px){.k17 .slot8{border-radius:var(--r-m)}}

/* ---- v18: op de telefoon geen knop in de kopbalk (Revolut, Cleo); de wachtlijst staat in het menu ---- */
@media (max-width:760px){.nav .nav-knop{display:none}}

/* ---- v20: de app op de computer en de telefoon (Revolut) ---- */
.tel{--w:clamp(244px,22vw,304px);width:var(--w);padding:calc(var(--w) * .034);border-radius:calc(var(--w) * .17);
  background:linear-gradient(145deg,#3A3832 0%,#17160F 40%,#0E0D0A 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 0 0 1px rgba(23,22,15,.25),0 50px 90px -40px rgba(23,22,15,.6),0 20px 40px -24px rgba(23,22,15,.4)}
.tel-scherm{position:relative;aspect-ratio:780/1688;border-radius:calc(var(--w) * .135);overflow:hidden;background:#F7F7F5}
.tel-app{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tel-balk{position:absolute;left:0;right:0;top:0;height:7%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 10%;font-family:var(--app);font-weight:600;font-size:calc(var(--w) * .05);color:var(--inkt);font-variant-numeric:tabular-nums}
.tel-eiland{position:absolute;left:50%;top:22%;width:30%;height:44%;transform:translateX(-50%);border-radius:999px;background:#0E0D0A}
.tel-st svg{width:calc(var(--w) * .13);height:auto;fill:currentColor}

.app20{background:#fff;padding-block:clamp(64px,6.4vw,104px) clamp(80px,7.4vw,120px)}
.app20-beeld{position:relative;max-width:1180px;margin:clamp(40px,4.4vw,64px) auto 0;padding:0 clamp(48px,9vw,150px) 0 var(--pad);box-sizing:border-box}
.app20-venster{margin:0;border-radius:var(--r-m);overflow:hidden;background:#F7F7F5;box-shadow:0 0 0 1px rgba(23,22,15,.09),var(--sch-2)}
.app20-balk{position:relative;height:38px;display:flex;align-items:center;gap:7px;padding:0 16px;background:#EEECE6;border-bottom:1px solid rgba(23,22,15,.07)}
.app20-balk i{width:10px;height:10px;border-radius:50%;background:rgba(23,22,15,.15)}
.app20-balk span{position:absolute;left:50%;transform:translateX(-50%);font:500 12px/1 var(--app);color:var(--inkt-2);background:#fff;border-radius:7px;padding:6px 48px}
.app20-venster img{display:block;width:100%;height:auto}
.app20-tel{position:absolute;right:var(--pad);bottom:clamp(-72px,-5vw,-32px)}
.app20-tel .tel{--w:clamp(210px,19vw,272px)}
.app20-punten{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:clamp(88px,9vw,140px)}
.app20-punten h3{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.2;margin:0}
.app20-punten p{margin:8px 0 0;color:var(--inkt-2);font-size:var(--t-tekst);line-height:1.5;max-width:22em}
@media (max-width:760px){
  .app20{padding-block:72px 80px}
  .app20-beeld{padding:0 18% 0 16px;margin-top:104px}
  .app20-balk{height:24px;gap:5px;padding:0 10px}
  .app20-balk i{width:6px;height:6px}
  .app20-balk span{font-size:9px;padding:3px 18px;border-radius:5px}
  .app20-tel{right:12px;bottom:-56px}
  .app20-tel .tel{--w:38vw}
  .app20-punten{grid-template-columns:1fr;gap:28px;margin-top:104px}
}

/* ---- v21: de drie punten als rustige kaarten met een symbool ---- */
.vh-zin{text-wrap:balance}
.app21-punten{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(96px,9.4vw,148px)}
.app21-punten li{background:#F6F5F1;border-radius:var(--r-l);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;align-items:flex-start}
.app21-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--inkt);box-shadow:0 0 0 1px rgba(23,22,15,.06),0 6px 14px -8px rgba(23,22,15,.25)}
.app21-ico svg{width:26px;height:26px;stroke-width:2}
.app21-stem{background:var(--geel);box-shadow:0 0 0 1px rgba(150,100,0,.12),0 6px 14px -8px rgba(150,100,0,.45)}
.app21-punten h3{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(22px,1.75vw,26px);letter-spacing:-.025em;line-height:1.15;margin:clamp(40px,4vw,64px) 0 0;text-wrap:balance}
.app21-punten p{margin:10px 0 0;color:var(--inkt-2);font-size:var(--t-tekst);line-height:1.5;max-width:24em}
/* de stem beweegt zacht, alleen als je dat niet hebt uitgezet */
@media (prefers-reduced-motion:no-preference){
  .app21-stem path{transform-box:fill-box;transform-origin:center;animation:stem21 1.4s ease-in-out infinite}
  .app21-stem path:nth-child(2){animation-delay:-.2s}.app21-stem path:nth-child(3){animation-delay:-.4s}
  .app21-stem path:nth-child(4){animation-delay:-.6s}.app21-stem path:nth-child(5){animation-delay:-.8s}
}
@keyframes stem21{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@media (max-width:760px){
  .app21-punten{grid-template-columns:1fr;gap:12px;margin-top:104px}
  .app21-punten li{display:grid;grid-template-columns:52px 1fr;column-gap:18px;align-items:start;padding:22px 20px}
  .app21-ico{grid-row:span 2}
  .app21-punten h3{margin-top:2px;font-size:21px}
  .app21-punten p{margin-top:6px}
}

/* ---- v22: product in het eerste scherm, de telefoon alleen op mobiel, en de bron bij elk antwoord ---- */
.hero-kijk{position:relative;z-index:1;width:min(460px,calc(100% - 2*var(--pad)));margin:calc(-1 * clamp(64px,16svh,170px) + 56px) auto 0;padding:0;border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(23,22,15,.07),0 40px 80px -40px rgba(23,22,15,.45),0 12px 28px -18px rgba(23,22,15,.3)}
.hero-kijk img{display:block;width:100%;height:auto}
.hero{padding-bottom:clamp(56px,6vw,96px)}
@media (max-width:760px){.hero-kijk{margin-top:20px;width:calc(100% - 32px);border-radius:20px}.hero{padding-bottom:48px}
  .hero-3d{height:27svh}.hero-boven{padding-top:calc(clamp(56px,8svh,90px) + 27svh);padding-bottom:0}}

@media (max-width:760px){
  .app20-beeld{padding:0;margin-top:48px;display:flex;justify-content:center}
  .app20-venster{display:none}
  .app20-tel{position:static}
  .app20-tel .tel{--w:min(290px,74vw)}
  .app21-punten{margin-top:64px}
}

.bron22{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(16px,1.4vw,20px);padding:clamp(28px,4vw,64px);border-radius:var(--r-l);background:#F6F5F1}
.bron22-tekst h3{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(28px,2.7vw,40px);letter-spacing:-.03em;line-height:1.08;margin:0}
.bron22-tekst p{margin:14px 0 0;color:var(--inkt-2);font-size:var(--t-lead);line-height:1.45;max-width:24em}
.bron22-kaart{background:#fff;border-radius:var(--r-m);padding:8px 0 4px;box-shadow:0 0 0 1px rgba(23,22,15,.07),var(--sch-1);font-family:var(--app)}
.bron22-kop{margin:0;padding:14px 22px 6px;font-size:14px;color:var(--inkt-2)}
.bron22-rij{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:16px 22px;border-top:1px solid rgba(23,22,15,.07)}
.bron22-rij:first-of-type{border-top:0}
.bron22-rij i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(23,22,15,.25);font-size:13px;font-weight:600}
.bron22-rij b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.bron22-rij p{margin:4px 0 0;font-size:15px;color:var(--inkt-2)}
.bron22-rij span{display:inline-flex;align-items:center;gap:4px;margin-left:6px;white-space:nowrap;color:var(--inkt-2)}
.bron22-rij span svg{width:14px;height:14px}
@media (max-width:900px){.bron22{grid-template-columns:1fr;gap:24px}}
@media (max-width:760px){.bron22{padding:24px 16px 16px}.bron22-tekst{padding-inline:4px}.bron22-rij{padding:14px 16px;gap:12px}.bron22-kop{padding:12px 16px 4px}.bron22-rij span{margin-left:0;display:flex;margin-top:2px}}

/* ---- v23: zelf tikken onder de hero ---- */
.d23{font-family:var(--app);text-align:left}
.d23-mail{padding:18px 22px 20px}
.d23-van{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;color:#6E6A5F}
.d23-van i{width:8px;height:8px;border-radius:50%;background:#F5B400;margin-left:-2px}
.d23-van span{margin-left:auto;font-variant-numeric:tabular-nums}
.d23-vraag{margin:4px 0 0 16px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--inkt);line-height:1.3}
.d23-klein{margin-top:16px;font-size:16px}
.d23-keuzes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 16px}
.d23-keuzes button{font:600 15px/1 var(--app);color:var(--inkt);height:40px;padding:0 18px;border-radius:999px;border:1.5px solid #EADFB9;background:#FFFCF2;cursor:pointer;transition:background-color .2s var(--gaan),border-color .2s var(--gaan),transform .12s var(--gaan)}
.d23-keuzes button:hover{background:#FFF5D6}
.d23-keuzes button:active{transform:scale(.97)}
.d23-keuzes button[aria-pressed="true"]{background:#FBE3A0;border-color:#EFC556}
.d23-keuzes button:focus-visible,.d23-stuur:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.d23-tip{margin:12px 0 0 16px;font-size:13.5px;color:#6B675E}
.d23-antw{border-top:1px solid rgba(23,22,15,.08);background:#FCFBF8;padding:16px 22px 20px;animation:d23in .35s var(--gaan)}
.d23-kop{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;color:var(--inkt)}
.d23-kop img{width:18px;height:auto}
.d23-kop span{margin-left:auto;font-weight:400;color:#6E6A5F;font-size:14px}
.d23-tekst{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--inkt)}
.d23-tekst p{margin:0 0 10px}
.d23-tekst mark{background:#FCEAB2;color:inherit;border-radius:4px;padding:0 2px}
.d23-w{opacity:0;transition:opacity .25s ease}.d23-w.aan{opacity:1}
.d23-knoppen{display:flex;align-items:center;gap:14px;margin-top:6px}
.d23-knoppen span{font-size:13.5px;color:#8A8577}
.d23-stuur{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--app);height:40px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;color:var(--op-geel);background:linear-gradient(180deg,#FFC93A 0%,#F5B400 58%,#EEAB00 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(140,85,0,.22)}
.d23-stuur svg{width:16px;height:16px}
.d23-stuur.is-weg{background:var(--inkt);color:#fff;box-shadow:none}
@keyframes d23in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:760px){.d23-mail{padding:16px 16px 18px}.d23-antw{padding:14px 16px 18px}.d23-vraag{font-size:17px}}

/* ---- v25: schuifschermen zonder koppen, alleen de kaarten ---- */
.vh-aan .vh-koppen{display:none}
.vh-aan .vh-plak{padding-top:clamp(72px,9vh,96px)}

/* ---- v26: het Soonbeam-teken voor het woord ---- */
.logo-teken{align-self:center;width:auto;height:.98em;flex:none;margin-right:.3em}

/* ---- v27: Soonbeam als avatar in de schuifschermen ---- */
.vh-beeav img{object-fit:contain;background:#FFFDF6}
.vh-beeav em{background:var(--geel);color:var(--op-geel)}

/* ---- v28: de baan vol kleine foto's van mensen aan het werk ---- */
.slot8 .baan{--n:32;--t:clamp(54px,4.7vw,70px);height:calc(2.36 * var(--ry) + var(--t) + 24px)}
.baan .tegel.blij{width:calc(var(--t) * var(--tf));height:calc(var(--t) * var(--tf));margin:calc(var(--t) * var(--tf) / -2) 0 0 calc(var(--t) * var(--tf) / -2);
  border-radius:calc(var(--t) * var(--tf) * .3);background:var(--doek);
  transform:translate3d(calc(cos(var(--hoek)) * var(--rx) * var(--rf)),calc(sin(var(--hoek)) * var(--ry) * var(--rf)),0) scale(calc(.94 + sin(var(--hoek)) * .06));
  box-shadow:0 0 0 2px #fff,0 14px 22px -14px rgba(120,80,0,.45)}
@media (max-width:760px){.slot8 .baan{--n:20;--t:46px;--rx:min(140px,calc(50vw - var(--t) / 2 - 14px));--ry:190px}}

/* v35: op de computer beslaat het 3D-vlak de hele bovenkant, zodat de symbolen rond de kop kunnen staan */
@media (min-width:761px){.hero-3d{height:min(100svh,940px)}}

/* ---- v38: navigatie links en rechts (midden open), in de ronde vorm en diepte van de pil uit v36 ---- */
.nav-in{align-items:center}
.nav-kaart,.nav-kaart.rechts{height:60px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  box-shadow:0 0 0 1px rgba(23,22,15,.06),0 14px 34px -20px rgba(23,22,15,.32);transition:background-color .25s var(--gaan),box-shadow .25s var(--gaan)}
.nav-kaart{padding:0 10px 0 22px;gap:6px}
.nav-kaart.rechts{padding:0 8px 0 10px}
.nav.scrolled .nav-kaart{background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(23,22,15,.07),0 16px 36px -18px rgba(23,22,15,.36)}
.nav-links{margin-left:10px;gap:2px}
.nav-links a{padding:8px 13px;border-radius:999px;font-size:14.5px}
.nav-in .inlog{border-radius:999px;color:var(--stil);font-size:14px;padding:8px 12px}
.nav-knop{height:44px;padding:0 20px}
.menuknop{border-radius:999px}
@media (max-width:960px){.nav-kaart,.nav-kaart.rechts{height:56px}.nav-kaart{padding:0 18px}.nav-kaart.rechts{padding:0 6px}.nav-knop{height:40px;padding:0 16px}}

/* ---- v39: foto op de telefoon: beeld boven, tekst eronder op donker, zodat beide mensen te zien zijn ---- */
@media (max-width:760px){
  .c15-beeld{background:#1E1B16}
  .c15-beeld img{bottom:auto;height:68%;object-position:36% 40%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .c15-beeld::after{background:linear-gradient(to top,rgba(14,12,9,.35) 0%,rgba(14,12,9,0) 45%)}
}

/* ---- v39: icoontjes fijner, alle drie in beweging ---- */
.app21-ico{width:56px;height:56px;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#FAF9F5 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,22,15,.07),0 8px 18px -10px rgba(23,22,15,.3)}
.app21-stem{background:linear-gradient(180deg,#FFCB3D 0%,#F5B400 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(150,100,0,.14),0 8px 18px -10px rgba(150,100,0,.5)}
.app21-ico svg{width:28px;height:28px;stroke-width:1.6}
.app21-overal .rij-t,.app21-overal .rij-c{stroke:#E0A000;stroke-width:1.9;stroke-dasharray:1;stroke-dashoffset:0}
.app21-pen .lijn{stroke:#E0A000;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0}
@media (max-width:760px){.app21-punten li{grid-template-columns:56px 1fr}}
@media (prefers-reduced-motion:no-preference){
  .app21-overal .rij-t{animation:rijT 3.2s var(--gaan) infinite}
  .app21-overal .rij-c{animation:rijC 3.2s var(--gaan) infinite}
  .app21-pen .pen{animation:pen39 2.8s ease-in-out infinite}
  .app21-pen .lijn{animation:lijn39 2.8s ease-in-out infinite}
}
@keyframes rijT{0%{stroke-dashoffset:1;opacity:1}18%,78%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes rijC{0%,28%{stroke-dashoffset:1;opacity:1}50%,78%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes pen39{0%,100%{transform:translate(-1.2px,0) rotate(0)}12%{transform:translate(-1.2px,.6px) rotate(-3deg)}55%{transform:translate(2.6px,.6px) rotate(-3deg)}70%{transform:translate(2.6px,0) rotate(0)}}
@keyframes lijn39{0%,10%{stroke-dashoffset:1;opacity:1}55%,80%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}

/* ---- v39: antwoordknoppen onder de vraag; het gekozen antwoord wordt geel ---- */
.ballon-k{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ballon-k b{font-family:var(--app);font-weight:600;font-size:12.5px;line-height:1;padding:7px 11px;border-radius:999px;background:#fff;color:var(--inkt);
  box-shadow:inset 0 0 0 1px rgba(23,22,15,.14);transition:background-color .35s var(--gaan),box-shadow .35s var(--gaan),transform .35s var(--gaan)}
.mens.is-aan .ballon-k b.kies{transition-delay:1.3s;background:var(--geel);color:var(--op-geel);box-shadow:inset 0 0 0 1px rgba(150,100,0,.25),0 4px 10px -6px rgba(150,100,0,.6)}
@media (min-width:1024px){
  .gezien .mens .ballon-k b.kies{background:var(--geel);color:var(--op-geel);box-shadow:inset 0 0 0 1px rgba(150,100,0,.25),0 4px 10px -6px rgba(150,100,0,.6)}
  .gezien .mens[data-m="0"] .ballon-k b.kies{transition-delay:.9s}.gezien .mens[data-m="1"] .ballon-k b.kies{transition-delay:1.3s}
  .gezien .mens[data-m="2"] .ballon-k b.kies{transition-delay:1.7s}.gezien .mens[data-m="3"] .ballon-k b.kies{transition-delay:2.1s}
}

/* ---- v39: indicator in plaats van namen; verspringt vanzelf ---- */
.m-stip{display:none}
@media (max-width:1023px){
  .m-wissel{display:none}
  .m-stip{display:flex;justify-content:center;gap:2px;margin-top:20px}
  .m-stip button{display:grid;place-items:center;width:34px;height:28px;padding:0;border:0;background:none;cursor:pointer;transition:width .4s var(--gaan)}
  .m-stip i{position:relative;display:block;width:100%;height:5px;margin:0 6px;border-radius:999px;background:rgba(23,22,15,.14);overflow:hidden;width:16px;transition:width .4s var(--gaan)}
  .m-stip button[aria-pressed="true"]{width:52px}
  .m-stip button[aria-pressed="true"] i{width:40px;background:rgba(23,22,15,.18)}
  .m-stip i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--inkt);transform:scaleX(0);transform-origin:left}
  .m-stip button[aria-pressed="true"] i::after{transform:scaleX(1)}
  .m-stip button.loopt i::after{animation:mvul 5.2s linear forwards}
  .m-stip button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px;border-radius:8px}
}
@keyframes mvul{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- v40: de drie app-kaarten zoals de echte app: zelfde opbouw, zelfde maten, niets over elkaar ---- */
.f-kaarten .snip.ap{background:#F7F6F3;padding:22px 20px 0;font-size:13.5px;line-height:1.42;color:var(--inkt);box-shadow:0 0 0 1px rgba(23,22,15,.06),0 24px 50px -24px rgba(23,22,15,.3)}
.ap p{margin:0}
.ap-titel{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:21px;letter-spacing:-.022em;line-height:1.15}
.ap-titel small{font-weight:500;font-size:13px;color:#67635A;letter-spacing:0}
.ap-uitleg{margin-top:6px !important;color:#5E5A51;font-size:13px;line-height:1.45}
.ap-lijst{margin-top:12px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(23,22,15,.07);overflow:hidden}
.ap-rij{padding:11px 14px}
.ap-rij+.ap-rij{border-top:1px solid rgba(23,22,15,.07)}
.ap-mail{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;align-items:start}
.ap-kop{display:flex;justify-content:space-between;gap:8px;color:#67635A;font-size:12.5px}
.ap-mail b{display:block;margin-top:1px;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-voor{margin-top:1px !important;color:#5E5A51;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-ico{display:grid;place-items:center;width:18px;height:18px;margin-top:9px;color:#67635A}
.ap-ico svg{width:16px;height:16px}
.ap-zoek{display:flex;gap:8px;margin-top:12px}
.ap-veld{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:#fff;border-radius:12px;color:#6E6A60;white-space:nowrap;overflow:hidden}
.ap-veld svg{flex:none;width:15px;height:15px;color:#5E5A51}
.ap-toe{flex:none;display:flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;background:#FFFBEF;box-shadow:inset 0 0 0 1.5px #E5D4A1;font-weight:600}
.ap-chips{display:flex;gap:6px;margin-top:10px;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.ap-chips span{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(23,22,15,.09);font-weight:500;font-size:12.5px}
.ap-chips span.aan{background:var(--inkt);color:#fff;box-shadow:none}
.ap-chips i{font-style:normal;color:#6E6A60}.ap-chips .aan i{color:rgba(255,255,255,.72)}
.ap-feit p:first-child{font-size:13.5px}
.ap-meta{display:flex;gap:12px;margin-top:3px !important;color:#6E6A60;font-size:12px;white-space:nowrap;overflow:hidden}
.ap-meta span:last-child{overflow:hidden;text-overflow:ellipsis}
.ap-sectie{display:flex;justify-content:space-between;margin:14px 2px 0 !important;font-weight:600;font-size:13px}
.ap-sectie span+span{color:#6E6A60;font-weight:500}
.ap-sectie+.ap-lijst{margin-top:8px}
.ap-persoon,.ap-deel{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:11px;align-items:center}
.ap-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:650;font-size:12px}
.ap-persoon b,.ap-deel b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-persoon em{font-style:normal;font-weight:500;color:#6E6A60}
.ap-persoon span:not(.ap-av),.ap-deel span:not(.ap-dico){display:block;color:#67635A;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-dico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#F4F2EC;color:#3B382F}
.ap-dico svg{width:18px;height:18px}

/* ---- v42: grote, bewegende illustraties in plaats van icoontjes ---- */
.app21-punten li{padding-top:clamp(18px,1.8vw,26px)}
.app21-punten h3{margin-top:clamp(18px,1.6vw,26px)}
.ill{position:relative;width:100%;height:200px;font-family:var(--app);color:var(--inkt)}
.ill .r{display:block;height:7px;border-radius:4px;background:#ECEAE3;width:82%}
.ill .r.k{width:56%}
.il-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(23,22,15,.16);font-weight:600;font-size:10.5px;white-space:nowrap}
/* 1. telefoon en laptop */
.il-lap{position:absolute;left:2%;top:22px;width:66%}
.il-scherm{position:relative;aspect-ratio:16/10.4;background:#fff;border:7px solid #1E1D19;border-bottom-width:9px;border-radius:13px 13px 5px 5px;padding:14px 14px 0;display:flex;flex-direction:column;gap:9px;box-shadow:0 18px 30px -18px rgba(23,22,15,.45)}
.il-voet{height:10px;margin:0 -9%;background:linear-gradient(180deg,#E4E1D9,#B9B5AA);border-radius:2px 2px 12px 12px;box-shadow:0 8px 14px -8px rgba(23,22,15,.4)}
.il-chip-l{align-self:flex-start;background:var(--geel);box-shadow:inset 0 0 0 1px rgba(150,100,0,.2)}
.il-tel{position:absolute;right:5%;top:46px;width:25%;max-width:92px;aspect-ratio:9/18.5;padding:5px;border-radius:17px;background:#1E1D19;box-shadow:0 22px 34px -18px rgba(23,22,15,.55)}
.il-tscherm{position:relative;height:100%;border-radius:12px;background:#fff;padding:18px 7px 8px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.il-tscherm .il-chip{height:20px;font-size:9.5px;padding:0 8px}
.il-vinger{position:absolute;left:34%;top:52px;width:22px;height:22px;border-radius:50%;background:rgba(23,22,15,.18);box-shadow:0 0 0 6px rgba(23,22,15,.06);opacity:0}
.il-vonk{position:absolute;left:78%;top:92px;width:12px;height:12px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 5px rgba(245,180,0,.25),0 0 18px rgba(245,180,0,.8);opacity:0}
/* 2. stem */
.ill-stem{display:flex;flex-direction:column;justify-content:center;gap:22px}
.il-rij{display:flex;align-items:center;gap:20px;padding-left:8px}
.il-mic{position:relative;flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:linear-gradient(180deg,#FFCB3D,#F2AE00);color:#1E1D19;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(150,90,0,.2),0 16px 26px -12px rgba(190,120,0,.6)}
.il-mic svg{width:32px;height:32px;position:relative}
.il-mic i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(245,180,0,.55);opacity:0}
.il-golf{flex:1;display:flex;align-items:center;gap:4px;height:64px}
.il-golf b{flex:1;max-width:5px;height:var(--h);border-radius:3px;background:#1E1D19;opacity:.85;transform-origin:center}
.il-zin{margin:0;align-self:flex-start;max-width:100%;padding:11px 15px;border-radius:16px 16px 16px 5px;background:#fff;font-family:'Source Serif 4',Georgia,serif;font-size:15px;box-shadow:0 0 0 1px rgba(23,22,15,.06),0 12px 24px -16px rgba(23,22,15,.4);white-space:nowrap}
.il-zin span{display:inline-block}
/* 3. punten naar mail */
.il-brief{position:absolute;left:0;top:30px;width:41%;min-width:118px;padding:12px 12px 14px;background:#FFF1BF;border-radius:6px 6px 14px 6px;transform:rotate(-5deg);box-shadow:0 16px 24px -16px rgba(120,80,0,.55);font-size:11.5px}
.il-brief b{display:block;font-weight:700;font-size:10.5px;letter-spacing:.02em;color:#8A6400;margin-bottom:6px}
.il-brief p{margin:3px 0 0;padding-left:12px;position:relative;font-weight:500;white-space:nowrap;font-size:11px}
.il-brief p::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#1E1D19}
.il-pijl{position:absolute;left:37%;top:20px;width:15%;color:#E0A000}
.il-mail{position:absolute;right:0;top:12px;width:52%;min-height:168px;padding:14px 14px 12px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(23,22,15,.06),0 20px 32px -18px rgba(23,22,15,.45);display:flex;flex-direction:column;gap:7px}
.il-aan,.il-groet{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:12.5px}
.il-groet{margin-top:4px;color:#5E5A51}
.il-mail i{display:block;height:6px;border-radius:3px;background:#DAD6CB;transform-origin:left}
.il-mail .l2{width:92%}.il-mail .l3{width:97%}.il-mail .l4{width:60%}
.il-pen{position:absolute;right:10px;bottom:10px;width:24px;height:24px;color:#1E1D19}
.il-pen svg{width:100%;height:100%}

/* aanpassen in één zin */
.ill-aanpas .il-mail2{left:0;right:0;width:auto;top:6px;min-height:0;padding:14px 16px 14px}
.il-tekst{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.5}
.il-getal{position:relative;display:inline-block;min-width:1.25em;text-align:center}
.il-getal s,.il-getal b{text-decoration:none;font-weight:inherit;border-radius:4px;padding:0 2px}
.il-getal b{position:absolute;left:0;right:0;top:0;background:var(--mark,#FCE59A);opacity:0}
.il-invoer{position:absolute;left:6%;right:0;bottom:6px;display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(23,22,15,.08),0 16px 28px -16px rgba(23,22,15,.45);font-size:13px;color:var(--inkt)}
.il-typ{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.il-stuur{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--geel);color:#1E1D19}
.il-stuur svg{width:16px;height:16px}

@media (prefers-reduced-motion:no-preference){
  .il-typ{animation:typ2 5s steps(18,end) infinite}
  .il-stuur{animation:stuur 5s var(--gaan) infinite}
  .il-getal s{animation:oud 5s var(--gaan) infinite}
  .il-getal b{animation:nieuw 5s var(--gaan) infinite}
  .il-chip-t{animation:chipT 4.4s var(--gaan) infinite}
  .il-vinger{animation:vinger 4.4s var(--gaan) infinite}
  .il-vonk{animation:vonk 4.4s cubic-bezier(.45,0,.3,1) infinite}
  .il-chip-l{animation:chipL 4.4s var(--gaan) infinite}
  .il-mic i{animation:ring 2.2s ease-out infinite}.il-mic i+i{animation-delay:1.1s}
  .il-golf b{animation:golf 1.1s ease-in-out infinite;animation-delay:var(--d)}
  .il-zin span{animation:typ 4.6s steps(28,end) infinite}
  .il-mail .l1{animation:l1 4.8s var(--gaan) infinite}.il-mail .l2{animation:l2 4.8s var(--gaan) infinite}
  .il-mail .l3{animation:l3 4.8s var(--gaan) infinite}.il-mail .l4{animation:l4 4.8s var(--gaan) infinite}
  .il-groet{animation:groet 4.8s var(--gaan) infinite}
  .il-pen{animation:pen42 4.8s var(--gaan) infinite}
  .il-pijl{animation:pijl 4.8s ease-in-out infinite}
}
@keyframes chipT{0%,14%{background:#fff;transform:scale(1)}18%{transform:scale(.9)}24%,88%{background:var(--geel);transform:scale(1)}100%{background:#fff}}
@keyframes vinger{0%,6%{opacity:0;transform:scale(1.4)}14%{opacity:1;transform:scale(1)}24%{opacity:0;transform:scale(.8)}100%{opacity:0}}
@keyframes vonk{0%,26%{left:74%;top:96px;opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}40%{left:52%;top:18px}50%{left:18%;top:58px;opacity:1;transform:scale(1)}54%,100%{left:18%;top:58px;opacity:0;transform:scale(.4)}}
@keyframes chipL{0%,50%{opacity:0;transform:scale(.6)}56%{opacity:1;transform:scale(1.08)}60%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(1)}}
@keyframes typ2{0%,6%{clip-path:inset(0 100% 0 0)}36%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes stuur{0%,40%{transform:scale(1)}44%{transform:scale(.82)}50%,100%{transform:scale(1)}}
@keyframes oud{0%,48%{opacity:1}54%,94%{opacity:0}100%{opacity:1}}
@keyframes nieuw{0%,50%{opacity:0;transform:translateY(-6px)}58%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes golf{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes typ{0%,8%{clip-path:inset(0 100% 0 0)}70%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes l1{0%,10%{transform:scaleX(0)}24%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes l2{0%,22%{transform:scaleX(0)}36%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes l3{0%,34%{transform:scaleX(0)}48%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes l4{0%,46%{transform:scaleX(0)}58%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes groet{0%,58%{opacity:0}66%,92%{opacity:1}100%{opacity:0}}
@keyframes pen42{0%,8%{transform:translate(-60px,-96px)}24%{transform:translate(0,-96px)}26%{transform:translate(-80px,-83px)}36%{transform:translate(0,-83px)}38%{transform:translate(-80px,-70px)}48%{transform:translate(0,-70px)}50%{transform:translate(-80px,-57px)}58%{transform:translate(-30px,-57px)}66%,100%{transform:translate(0,0)}}
@keyframes pijl{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

@media (max-width:760px){
  .app21-punten li{display:flex;flex-direction:column;padding:18px 18px 24px}
  .ill{height:190px}
  .app21-punten h3{margin-top:16px}
}

/* ---- v43: privacy in warm donker met matglas; alles meteen leesbaar, niets open te klikken ---- */
#privacy.r-donker{background:radial-gradient(120% 90% at 50% 0%,#3A2F1C 0%,#2A2317 45%,#1F1A12 100%);color:#F6F1E4}
#privacy.r-donker::before{top:58%;width:min(1100px,160vw);height:620px;background:radial-gradient(closest-side,rgba(245,180,0,.26),rgba(245,180,0,0))}
#privacy .r-lead{color:rgba(246,241,228,.74)}
#privacy .zw-slot{width:clamp(96px,9.5vw,148px)}
.pv3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);max-width:1080px;margin:clamp(40px,4.4vw,60px) auto 0}
.pv-k{position:relative;margin:0;padding:clamp(22px,2.2vw,30px);border-radius:var(--r-l);color:#F6F1E4;
  background:linear-gradient(180deg,rgba(255,250,235,.12) 0%,rgba(255,250,235,.05) 100%);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.22),inset 0 0 0 1px rgba(255,250,235,.10),0 30px 50px -30px rgba(0,0,0,.7)}
.pv-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#F6F1E4;background:rgba(255,250,235,.10);box-shadow:inset 0 1px 0 rgba(255,250,235,.18),inset 0 0 0 1px rgba(255,250,235,.08)}
.pv-ico.geel{background:linear-gradient(180deg,#FFCB3D,#F2AE00);color:#1E1D19;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(245,180,0,.7)}
.pv-ico svg{width:22px;height:22px}
.pv-k h3{margin:clamp(28px,3vw,44px) 0 0;font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(21px,1.7vw,25px);letter-spacing:-.025em;line-height:1.15;color:#fff}
.pv-k p{margin:10px 0 0;font-size:var(--t-tekst);line-height:1.5;color:rgba(246,241,228,.72)}
.pv-zegels{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.pv-zegels li{height:26px;display:flex;align-items:center;padding:0 10px;border-radius:999px;font-family:var(--app);font-size:12px;font-weight:600;color:#F6F1E4;background:rgba(255,250,235,.08);box-shadow:inset 0 0 0 1px rgba(255,250,235,.14)}
.pv-bron{display:inline-block;margin-top:12px;font-size:13.5px;color:rgba(246,241,228,.8);text-underline-offset:3px}
.pv-bron:hover{color:#fff}
#privacy .pv-knop{margin-top:clamp(32px,3.4vw,48px)}
@media (max-width:860px){.pv3{grid-template-columns:1fr;max-width:520px}.pv-k h3{margin-top:22px}}

/* ---- v44: rekensom terug, als lichte tastbare kaart ---- */
.rk44{padding-top:clamp(24px,3vw,48px)}
.rk-kaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);max-width:1080px;margin:clamp(36px,4vw,56px) auto 0;padding:clamp(28px,4vw,56px);border-radius:var(--r-l);
  background:linear-gradient(180deg,#fff 0%,#FDFCF8 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,22,15,.06),0 30px 60px -36px rgba(23,22,15,.4)}
.rk-in{display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,3vw,40px)}
.rk-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-tekst);font-weight:500;color:var(--inkt)}
.rk-ctl output{font-family:var(--font-kop);font-weight:var(--w-kop);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-hint{margin:10px 0 0;font-size:var(--t-klein);color:var(--stil)}
.rk-ctl input{--vul:30%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:12px 0 0;background:transparent;cursor:pointer}
.rk-ctl input::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#F5B400 0,#F5B400 var(--vul),#ECE9E1 var(--vul));box-shadow:inset 0 1px 2px rgba(23,22,15,.12)}
.rk-ctl input::-moz-range-track{height:8px;border-radius:999px;background:#ECE9E1}
.rk-ctl input::-moz-range-progress{height:8px;border-radius:999px;background:#F5B400}
.rk-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(23,22,15,.1),0 4px 10px -2px rgba(23,22,15,.35);transition:transform .15s var(--gaan)}
.rk-ctl input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(23,22,15,.1),0 4px 10px -2px rgba(23,22,15,.35)}
.rk-ctl input:active::-webkit-slider-thumb{transform:scale(1.12)}
.rk-ctl input:focus-visible{outline:none}
.rk-ctl input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--inkt)}
.rk-ctl input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--inkt)}
.rk-uit{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,34px);border-radius:calc(var(--r-l) - 6px);background:var(--geel-was,#FFF6DA);box-shadow:inset 0 0 0 1px rgba(200,150,0,.14)}
.rk-uit p{margin:0}
.rk-l{font-size:var(--t-klein);color:var(--inkt-2)}
.rk-l2{margin-top:clamp(18px,2vw,26px) !important;padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(150,110,0,.16)}
.rk-uren,.rk-geld{font-family:var(--font-kop);font-weight:var(--w-kop);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-top:8px !important}
.rk-uren span{font-size:clamp(40px,4vw,56px)}
.rk-geld span{font-size:clamp(48px,5.2vw,76px)}
.rk-uren,.rk-geld{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.rk-uren small,.rk-geld small{white-space:nowrap}
.rk-uren small,.rk-geld small{font-size:clamp(17px,1.4vw,21px);letter-spacing:-.01em;color:var(--inkt-2)}
.rk-fijn{margin-top:10px !important;font-size:13px;color:var(--stil)}
.rk-vgl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(20px,2.4vw,28px);padding:14px 18px;border-radius:999px;background:#fff;color:var(--inkt);text-decoration:none;font-size:var(--t-klein);
  box-shadow:0 0 0 1px rgba(23,22,15,.08),0 8px 18px -12px rgba(23,22,15,.4);transition:transform .15s var(--gaan),box-shadow .2s var(--gaan)}
.rk-vgl:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(23,22,15,.12),0 12px 22px -12px rgba(23,22,15,.45)}
.rk-vgl svg{flex:none;width:18px;height:18px;color:#C98F00}
@media (max-width:860px){.rk-kaart{grid-template-columns:1fr;padding:22px}}
/* envelop bij de vragen iets verder naar rechts, zodat hij nooit over een langere kop valt */
@media (min-width:1024px){.zw-vragen{max-width:1000px}}

/* ---- v45: in de app-kaarten geen tweede kop en uitleg meer; de lijst begint bovenaan ---- */
.f-kaarten .snip.ap{padding-top:18px}
.f-kaarten .snip.ap>:first-child{margin-top:0 !important}


.vsn{margin:clamp(32px,3.4vw,48px) auto 0;max-width:34em;text-align:center;color:var(--inkt-2);font-size:var(--t-klein);line-height:1.5}

.v4{padding-block:clamp(72px,7vw,112px)}
.v4-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);max-width:1160px;margin:clamp(40px,4.4vw,64px) auto 0}
.v4-lab{display:flex;align-items:center;gap:8px;font-size:var(--t-klein);font-weight:600;color:var(--inkt-2)}
.v4-lab::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.v4-kol.is-wij .v4-lab{color:var(--inkt)}
.v4-kol.is-wij .v4-lab::before{background:var(--geel);box-shadow:0 0 0 3px rgba(245,180,0,.25)}
.v4-kol h3{margin:12px 0 0;font-size:clamp(26px,2.5vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:600;min-height:2.2em;text-wrap:balance}
.v4-kol.is-zij h3{color:rgba(23,22,15,.38)}
.v4-vlak{margin-top:clamp(20px,2vw,28px);border-radius:var(--r-l);padding:clamp(28px,4vw,56px) clamp(20px,3.4vw,48px);display:grid;gap:10px;align-content:center;min-height:440px;position:relative;overflow:hidden}
.is-zij .v4-vlak{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px)}
.is-wij .v4-vlak{background:radial-gradient(120% 90% at 50% 115%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%)}
.is-wij .v4-vlak::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none}
.v4-k{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;border-radius:14px;padding:15px 18px}
.is-zij .v4-k{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.is-wij .v4-k{background:rgba(255,255,255,.92);box-shadow:0 10px 24px -16px rgba(120,80,0,.45);color:var(--inkt)}
.v4-k i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-top:1px}
.v4-k i svg{width:13px;height:13px}
.is-zij .v4-k i{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.is-wij .v4-k i{background:var(--inkt);color:var(--geel)}
.v4-k small{display:block;font-size:12.5px;font-weight:600;opacity:.6;letter-spacing:.01em}
.v4-k p{margin:2px 0 0;font-size:16px;line-height:1.4}
.is-wij .v4-k p{font-weight:500}
@media (max-width:820px){.v4-raster{grid-template-columns:1fr;gap:40px}.v4-vlak{min-height:0}.v4-kol h3{min-height:0}}


/* ======================================================================
   Artikel (12-11): dezelfde letters, knoppen en vlakken als de home.
   Lezen eerst: één kolom van 680 px, inhoud links die meeloopt.
   ====================================================================== */
.leesbalk{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--geel);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.ak{background:linear-gradient(180deg,#E4E3DF 0%,#EDECE8 45%,var(--grond) 100%);padding:clamp(120px,13vw,168px) 0 0;text-align:center}
.ak-pad{display:flex;justify-content:center;gap:8px;align-items:center;font-size:var(--t-klein);color:var(--stil);font-weight:500}
.ak-pad a{text-decoration:none;color:var(--inkt-2)}
.ak-pad a:hover{color:var(--inkt);text-decoration:underline;text-underline-offset:3px}
.ak-pad svg{width:14px;height:14px;color:var(--stil-2)}
.ak h1{font-family:var(--font-kop);font-size:clamp(40px,5.6vw,80px);font-weight:var(--w-mega);letter-spacing:-.042em;line-height:1;max-width:12em;margin:22px auto 0;text-wrap:balance}
.ak-zin{font-size:var(--t-lead);line-height:1.45;max-width:30em;margin:20px auto 0;text-wrap:balance;letter-spacing:-.006em}
.ak-meta{display:flex;justify-content:center;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:28px;font-size:var(--t-klein);color:var(--inkt-2)}
.ak-wie{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--inkt)}
.av{width:36px;height:36px;border-radius:50%;background:var(--inkt);color:var(--geel);display:grid;place-items:center;font-family:var(--font-kop);font-weight:700;font-size:15px;flex:none}
.ak-meta .stip{width:4px;height:4px;border-radius:50%;background:var(--stil-2)}

/* Beeld bovenaan: de klachtmail zoals Soonbeam hem leest, op het gele zonnevlak */
.ak-beeld{position:relative;overflow:hidden;width:min(1160px,100% - 2*var(--pad));margin:clamp(40px,4.4vw,64px) auto 0;border-radius:var(--r-l);
  background:radial-gradient(120% 90% at 50% 118%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%);padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px);display:grid;place-items:center}
.ak-beeld::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none}
.mail{position:relative;width:min(560px,100%);text-align:left;font-family:var(--app);background:var(--wit);border-radius:20px;box-shadow:0 1px 2px rgba(23,22,15,.06),0 40px 80px -36px rgba(120,80,0,.55);padding:22px 24px 20px}
.mail-van{display:flex;align-items:center;gap:12px}
.mail-van .a-ini{background:var(--doek);box-shadow:none}
.mail-van b{display:block;font-size:15px}
.mail-van small{display:block;font-size:13px;color:var(--stil)}
.mail-van time{margin-left:auto;font-size:13px;color:var(--stil)}
.mail h2{font-family:var(--app);font-size:18px;font-weight:700;letter-spacing:-.015em;margin:16px 0 8px}
.mail p{font-size:15px;line-height:1.55;color:var(--inkt-2)}
.mail mark{background:var(--mark);color:var(--inkt);border-radius:4px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mail-voet{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.mail-voet span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--stil);margin-right:4px}
.mail-voet em{font-style:normal;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand)}

/* Opbouw: inhoud links, tekst in het midden */
.as{display:grid;grid-template-columns:220px minmax(0,680px);justify-content:center;gap:clamp(40px,6vw,96px);width:min(1160px,100% - 2*var(--pad));margin:clamp(56px,6vw,88px) auto 0}
.inhoud{position:sticky;top:96px;align-self:start;font-size:var(--t-klein)}
.inhoud .label,.inh-m summary{font-size:11.5px;color:var(--stil);display:block;margin-bottom:12px}
.inhoud ol{border-left:1px solid var(--lijn-2)}
.inhoud a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--stil);line-height:1.35;transition:color .15s,border-color .15s}
.inhoud a:hover{color:var(--inkt)}
.inhoud a.nu{color:var(--inkt);font-weight:600;border-left-color:var(--geel)}
.zij-cta{margin-top:28px;border-radius:20px;background:var(--inkt);color:#FBFAF7;padding:20px}
.zij-cta svg{width:34px;height:auto;color:#3A3830}
.zij-cta b{display:block;margin-top:12px;font-family:var(--font-kop);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.zij-cta p{margin-top:6px;color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.45}
.zij-cta .nav-knop{margin:14px 0 0;display:flex;width:100%;height:44px;align-items:center;justify-content:center;line-height:1}
.inh-m{display:none}

/* Lopende tekst */
.at{font-size:18px;line-height:1.7;color:var(--inkt);letter-spacing:-.005em}
.at>p+p,.at>p+ul,.at>ul+p{margin-top:20px}
.at>p:first-child{font-size:var(--t-lead)}
.at h2{font-family:var(--font-kop);font-weight:600;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.032em;line-height:1.08;margin:clamp(64px,6vw,88px) 0 18px;scroll-margin-top:110px;text-wrap:balance}
.at h2 .nr{display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--geel);color:var(--op-geel);font-size:.62em;letter-spacing:0;vertical-align:.22em;margin-right:.35em;font-weight:700}
.at a{text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
.at ul.stip{display:grid;gap:10px}
.at ul.stip li{position:relative;padding-left:26px}
.at ul.stip li::before{content:"";position:absolute;left:4px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--geel)}
.at strong{font-weight:650}

.kort{margin-top:36px;background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--sch-vel);padding:clamp(22px,2.6vw,32px);scroll-margin-top:110px}
.kort .v4-lab{color:var(--inkt)}
.kort .v4-lab::before{background:var(--geel);box-shadow:0 0 0 3px rgba(245,180,0,.25)}
.kort ol{margin-top:16px;display:grid;gap:12px;counter-reset:k}
.kort li{counter-increment:k;display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:17px;line-height:1.5}
.kort li::before{content:counter(k);width:30px;height:30px;border-radius:50%;background:var(--geel-was);display:grid;place-items:center;font-weight:700;font-size:14px;margin-top:-2px}

.tip{margin-top:28px;display:grid;grid-template-columns:40px 1fr;gap:14px;background:var(--geel-was);border-radius:20px;padding:18px 22px;font-size:16.5px;line-height:1.55}
.tip svg{width:40px;height:auto;color:var(--inkt)}
.tip b{display:block}

/* Instead of / write: het donkere en het gele vlak van de home, rijen gelijk */
.ww{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(3,auto);gap:10px 12px;margin-top:28px}
.ww .v4-vlak{grid-row:span 4;display:grid;grid-template-rows:subgrid;min-height:0;margin:0;padding:22px;gap:10px;border-radius:24px}
.ww .v4-lab{margin-bottom:4px}
.ww .is-zij.v4-vlak{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px)}
.ww .is-wij.v4-vlak{background:radial-gradient(120% 90% at 50% 115%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%)}
.ww .is-wij.v4-vlak::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none}
.ww .is-wij .v4-lab{color:var(--inkt)}
.ww .is-wij .v4-lab::before{background:var(--inkt)}
.is-zij.v4-vlak .v4-lab{color:rgba(255,255,255,.6)}
.ww .v4-k{padding:13px 15px}
.ww .v4-k p{margin:0;font-size:15.5px}
.is-zij .v4-k p{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}

/* Sjablonen */
.sj-sprong{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sj-sprong a{font-size:14px;font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn-2);transition:box-shadow .15s,background-color .15s}
.sj-sprong a:hover{box-shadow:0 0 0 1.5px var(--inkt)}
.sjablonen{display:grid;gap:16px;margin-top:24px}
.sj{background:var(--wit);border-radius:var(--r-kaart);box-shadow:0 0 0 1px var(--lijn),0 18px 40px -30px rgba(23,22,15,.3);padding:22px clamp(18px,2.4vw,28px) 26px;font-family:var(--app);scroll-margin-top:110px}
.sj-kop{display:flex;align-items:center;gap:12px}
.sj-nr{font-size:12.5px;font-weight:700;color:var(--stil);font-variant-numeric:tabular-nums}
.sj h3{font-family:var(--font-kop);font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;margin:0}
.sj-kopie{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1.5px solid var(--inkt);background:transparent;font-weight:600;font-size:14px;cursor:pointer;transition:background-color .15s,color .15s}
.sj-kopie:hover{background:var(--inkt);color:#FBFAF7}
.sj-kopie svg{width:16px;height:16px}
.sj-kopie.ok{background:var(--groen);border-color:var(--groen);color:#fff}
.sj-ond{display:flex;gap:10px;align-items:baseline;margin-top:16px;padding:10px 14px;border-radius:12px;background:var(--zacht);font-size:15px;font-weight:600}
.sj-ond span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.sj-tekst{margin-top:16px;font-size:16px;line-height:1.6;color:var(--inkt-2);display:grid;gap:12px}
.ph{background:var(--mark);color:var(--inkt);border-radius:4px;padding:0 3px;font-weight:500}

/* Halverwege: Soonbeam op het gele vlak */
.mid{position:relative;overflow:hidden;margin-top:clamp(56px,6vw,80px);border-radius:var(--r-l);padding:clamp(26px,3.4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;
  background:radial-gradient(120% 90% at 80% 118%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%)}
.mid::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 80% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none}
.mid>*{position:relative}
.mid h3{font-family:var(--font-kop);font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.mid p{margin-top:10px;font-size:16.5px;line-height:1.5}
.mid .btn{margin-top:20px}
.mo{background:var(--wit);border-radius:18px;padding:18px;font-family:var(--app);box-shadow:0 30px 60px -34px rgba(120,80,0,.6)}
.mo small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.mo b{display:block;font-size:17px;letter-spacing:-.015em;line-height:1.3;margin:6px 0 12px}
.mo span{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;font-weight:600;font-size:14.5px}
.mo span+span{margin-top:4px}
.mo span.aan{background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand)}
.mo span.aan i{width:20px;height:20px;border-radius:50%;background:var(--inkt);color:var(--geel);display:grid;place-items:center}
.mo span.aan i svg{width:12px;height:12px}

/* Fouten */
.fouten{display:grid;gap:10px;margin-top:22px}
.fouten li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;background:var(--wit);border-radius:16px;padding:15px 18px;box-shadow:0 0 0 1px var(--lijn);font-size:16.5px;line-height:1.5}
.fouten i{width:28px;height:28px;border-radius:50%;background:#24231C;color:rgba(255,255,255,.75);display:grid;place-items:center}
.fouten i svg{width:13px;height:13px}
.fouten b{display:block}

.at .faq7{margin:22px 0 0;max-width:none}
.at .faq7 details{background:var(--wit)}
.at .faq7 details p{font-size:16px;padding-top:0}

.auteur{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;margin-top:clamp(56px,6vw,80px);padding-top:28px;border-top:1px solid var(--lijn-2);font-size:15px;color:var(--inkt-2)}
.auteur .av{width:56px;height:56px;font-size:22px}
.auteur b{display:block;color:var(--inkt);font-size:16px}

/* Verder lezen */
.verder{padding-block:clamp(72px,7vw,112px) 0}
.verder .kop{text-align:center}
.vl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);width:min(1160px,100% - 2*var(--pad));margin:clamp(32px,3.6vw,48px) auto 0}
.vl a{display:block;text-decoration:none;background:var(--wit);border-radius:var(--r-kaart);padding:10px 10px 22px;box-shadow:0 0 0 1px var(--lijn);transition:transform .2s ease,box-shadow .2s ease}
.vl a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--lijn),0 24px 48px -30px rgba(23,22,15,.35)}
.vl-beeld{aspect-ratio:16/10;border-radius:16px;display:grid;place-items:center;position:relative;overflow:hidden}
.vl-beeld svg{width:34%;height:auto;position:relative}
.vl-beeld.geel{background:radial-gradient(120% 90% at 50% 118%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%);color:var(--inkt)}
.vl-beeld.geel path:first-child{fill:#fff}
.vl-beeld.geel::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg)}
.vl-beeld.donker{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px);color:#3A3830}
.vl-beeld.warm{background:var(--doek);color:var(--inkt)}
.vl small{display:block;margin:18px 12px 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stil)}
.vl h3{margin:8px 12px 0;font-family:var(--font-kop);font-size:var(--t-h3);font-weight:600;letter-spacing:-.022em;line-height:1.2}
.vl span{display:block;margin:10px 12px 0;font-size:var(--t-klein);color:var(--stil)}
.verder+.slot8{margin-top:clamp(40px,4vw,64px)}

@media (max-width:1000px){
  .as{grid-template-columns:minmax(0,680px)}
  .inhoud{display:none}
  .inh-m{display:block;margin-top:28px;background:var(--wit);border-radius:18px;box-shadow:0 0 0 1px var(--lijn)}
  .inh-m summary{list-style:none;cursor:pointer;margin:0;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .inh-m summary::-webkit-details-marker{display:none}
  .inh-m summary svg{width:16px;height:16px;transition:transform .2s}
  .inh-m[open] summary svg{transform:rotate(180deg)}
  .inh-m ol{padding:0 18px 14px;display:grid;gap:2px;counter-reset:m}
  .inh-m a{display:block;padding:7px 0;text-decoration:none;font-size:15.5px;color:var(--inkt-2)}
  .vl{grid-template-columns:1fr 1fr}
  .vl a:last-child{display:none}
}
@media (max-width:640px){
  .at{font-size:17px}
  .mid{grid-template-columns:1fr}
  .ww{grid-template-columns:1fr;grid-template-rows:none}
  .ww .v4-vlak{grid-row:auto;grid-template-rows:none}
  .vl{grid-template-columns:1fr}
  .vl a:last-child{display:block}
  .ak-meta>.stip:nth-child(2){display:none}
  .sj-kopie span{display:none}
  .sj-kopie{width:38px;padding:0;justify-content:center}
  .mail{padding:18px}
}
@media (prefers-reduced-motion:reduce){.leesbalk{display:none}}


/* ======================================================================
   Pagina's (12-11): functies, voor wie, prijzen, help, over ons, blog.
   Zelfde letters, knoppen en vlakken als de home en het artikel.
   ====================================================================== */
.ak-label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-2)}
.ak-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 3px rgba(245,180,0,.25)}
.ak-label+h1{margin-top:18px}
.ak-knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ak.zonder-beeld{padding-bottom:clamp(8px,2vw,24px)}
.midden .r-lead{margin-inline:auto}

/* Blokken op een pagina */
.pblok{padding-top:clamp(80px,8vw,128px)}
.pblok .r-kop{margin-bottom:clamp(32px,4vw,56px)}
.pblok.band{padding-bottom:clamp(80px,8vw,128px);margin-top:clamp(80px,8vw,128px)}
.smal{width:min(1160px,100% - 2*var(--pad));margin-inline:auto}

/* Rij: tekst naast een beeld, om en om */
.rijen{display:grid;gap:clamp(72px,9vw,136px)}
.rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,88px);align-items:center}
.rij.om .rij-tekst{order:2}
.rij-tekst h2,.rij-tekst h3{font-family:var(--font-kop);font-size:clamp(30px,3vw,46px);font-weight:var(--w-kop);letter-spacing:var(--ls-kop);line-height:1.05;text-wrap:balance}
.rij-tekst p{margin-top:16px;font-size:18px;line-height:1.6;color:var(--inkt-2);max-width:30em}
.rij-tekst .btn{margin-top:26px}
.rij-tekst .ak-label{margin-bottom:16px}
.vinkjes{display:grid;gap:12px;margin-top:22px}
.vinkjes li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:17px;line-height:1.5}
.vinkjes li::before{content:"";width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:var(--geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}

/* Vlakken: geel (zon), donker (streep), warm (doek) */
.vlak{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l);padding:clamp(24px,4vw,56px);display:grid;place-items:center;min-height:clamp(320px,34vw,460px)}
.vlak>*{position:relative;z-index:1}
.vlak.geel{background:radial-gradient(120% 90% at 50% 118%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%)}
.vlak.geel::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none}
.vlak.donker{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px);color:#F6F1E4}
.vlak.warm{background:var(--doek)}
.vlak.wit{background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}

/* App-kaart: een stukje van de app op een vlak */
.app-kaart{width:min(440px,100%);background:var(--wit);color:var(--inkt);border-radius:20px;padding:20px;font-family:var(--app);text-align:left;
  box-shadow:0 1px 2px rgba(23,22,15,.06),0 40px 80px -36px rgba(80,60,0,.5)}
.vlak.donker .app-kaart{box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.app-kaart+.app-kaart{margin-top:12px}
.app-kop{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.app-kop b{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;color:var(--stil);font-weight:600}
.app-titel{display:block;font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin-top:8px}
.app-tekst{font-size:15px;line-height:1.55;color:var(--inkt-2);margin-top:10px}
.app-tekst p+p{margin-top:8px}
.app-rijen{display:grid;gap:6px;margin-top:12px}
.app-rij{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--zacht);font-size:14.5px;line-height:1.45}
.app-rij>i{grid-row:span 2;width:28px;height:28px;border-radius:9px;background:var(--wit);display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 1px var(--lijn)}
.app-rij>i svg{width:15px;height:15px}
.app-rij b{font-weight:600}
.app-rij small{display:block;font-size:12.5px;color:var(--stil)}
.app-keuzes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.app-keuzes span{font-size:14px;font-weight:600;padding:8px 13px;border-radius:999px;background:var(--zacht)}
.app-keuzes span.aan{background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand)}
.app-knop{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;height:40px;padding:0 18px;border-radius:999px;background:#1B1A16;color:#FBFAF7;font-size:14px;font-weight:600}
.app-mark{background:var(--mark);border-radius:4px;padding:1px 2px}

/* Kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.kaarten.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.kaarten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.kk{position:relative;display:block;background:var(--wit);border-radius:var(--r-kaart);padding:clamp(22px,2.4vw,30px);box-shadow:0 0 0 1px var(--lijn);text-decoration:none;color:inherit}
a.kk{transition:transform .2s ease,box-shadow .2s ease}
a.kk:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--lijn),0 24px 48px -30px rgba(23,22,15,.35)}
.kk-ico{width:46px;height:46px;border-radius:14px;background:var(--geel-was);color:var(--inkt);display:grid;place-items:center}
.kk-ico svg{width:22px;height:22px}
.kk-ico.geel{background:var(--geel);color:var(--op-geel)}
.kk-ico.donker{background:#24231C;color:var(--geel)}
.kk h3{font-family:var(--font-kop);font-size:clamp(20px,1.6vw,23px);font-weight:600;letter-spacing:-.022em;line-height:1.2;margin-top:18px}
.kk p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--inkt-2)}
.kk .meer{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:15px}
.kk .meer svg{width:16px;height:16px;transition:transform .2s}
a.kk:hover .meer svg{transform:translateX(3px)}
.band-warm .kk,.vlak.warm .kk{box-shadow:none}

/* Stappen 1-2-3 */
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);counter-reset:st}
.stap{counter-increment:st;background:var(--wit);border-radius:var(--r-kaart);padding:clamp(22px,2.4vw,30px);box-shadow:0 0 0 1px var(--lijn)}
.stap::before{content:counter(st);width:36px;height:36px;border-radius:50%;background:var(--geel);color:var(--op-geel);display:grid;place-items:center;font-weight:700;font-size:15px}
.stap h3{font-family:var(--font-kop);font-size:clamp(20px,1.6vw,23px);font-weight:600;letter-spacing:-.022em;line-height:1.2;margin-top:18px}
.stap p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--inkt-2)}

/* Een groot citaat of uitspraak */
.uitspraak{font-family:var(--font-kop);font-size:clamp(28px,3.2vw,48px);font-weight:var(--w-kop);letter-spacing:var(--ls-kop);line-height:1.12;text-align:center;max-width:22em;margin-inline:auto;text-wrap:balance}
.uitspraak .geel{background:linear-gradient(transparent 62%,var(--mark) 62%)}

/* Tabel (vergelijken, prijzen) */
.tabel{width:100%;border-collapse:separate;border-spacing:0;background:var(--wit);border-radius:var(--r-kaart);box-shadow:0 0 0 1px var(--lijn);overflow:hidden;font-size:16px}
.tabel th,.tabel td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top;line-height:1.45}
.tabel tr:last-child td{border-bottom:0}
.tabel th{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil);background:var(--zacht)}
.tabel td:first-child{font-weight:600}
.tabel-wrap{overflow-x:auto;border-radius:var(--r-kaart)}

/* Blogoverzicht */
.uitgelicht{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,48px);align-items:center;text-decoration:none;color:inherit;background:var(--wit);border-radius:var(--r-l);padding:12px clamp(12px,2vw,16px) 12px 12px;box-shadow:0 0 0 1px var(--lijn);transition:box-shadow .2s ease}
.uitgelicht:hover{box-shadow:0 0 0 1px var(--lijn),0 30px 60px -36px rgba(23,22,15,.35)}
.uitgelicht .vl-beeld{aspect-ratio:16/10;border-radius:20px}
.uitgelicht .vl-beeld svg{width:30%}
.uitgelicht small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stil)}
.uitgelicht h2{font-family:var(--font-kop);font-size:clamp(28px,2.8vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin-top:12px;text-wrap:balance}
.uitgelicht p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--inkt-2)}
.uitgelicht span{display:block;margin-top:16px;font-size:var(--t-klein);color:var(--stil)}
.blog-lijst{margin-top:clamp(20px,2.4vw,32px)}
.blog-lijst.vl{width:auto;margin-inline:0}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.blog-filter a{font-size:14px;font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn-2)}
.blog-filter a:hover{box-shadow:0 0 0 1.5px var(--inkt)}

/* Een rustige tekstpagina (help, privacy): hergebruikt .as/.at van het artikel */
.at h3{font-family:var(--font-kop);font-weight:600;font-size:clamp(21px,1.8vw,25px);letter-spacing:-.022em;line-height:1.2;margin:36px 0 10px}
.at ol.cijfers{display:grid;gap:10px;counter-reset:c;margin-top:16px}
.at ol.cijfers li{counter-increment:c;position:relative;padding-left:40px}
.at ol.cijfers li::before{content:counter(c);position:absolute;left:0;top:.1em;width:28px;height:28px;border-radius:50%;background:var(--geel-was);display:grid;place-items:center;font-weight:700;font-size:14px}
.at .tabel-wrap{margin-top:22px}
.at figure.vlak{margin-top:28px;min-height:0}
.at .kaarten{margin-top:22px}

/* Contact onderaan help */
.contact{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--inkt);color:#FBFAF7;border-radius:var(--r-kaart);padding:22px 24px;margin-top:28px}
.contact svg{width:40px;height:auto;color:#3A3830}
.contact b{display:block;font-family:var(--font-kop);font-size:20px;font-weight:600;letter-spacing:-.02em}
.contact p{color:rgba(255,255,255,.66);font-size:15px;margin-top:4px !important}
.contact .btn{min-height:44px}

@media (max-width:1000px){
  .kaarten,.kaarten.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stappen{grid-template-columns:1fr}
  .uitgelicht{grid-template-columns:1fr;padding:10px 10px 22px}
  .uitgelicht>div{padding:0 12px}
}
@media (max-width:760px){
  .rij{grid-template-columns:1fr;gap:28px}
  .rij.om .rij-tekst{order:0}
  .vlak{min-height:0}
}
@media (max-width:640px){
  .kaarten,.kaarten.twee,.kaarten.vier{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact svg{display:none}
  .tabel{font-size:15px}
  .tabel th,.tabel td{padding:12px 14px}
}

/* ======================================================================
   Bedrijfspagina's (12-11): voor wie, prijzen, help, over ons, privacy.
   Alleen bd-klassen; verder de onderdelen uit pagina.css en artikel.css.
   ====================================================================== */

/* Vraag met tikantwoorden (zoals de ballonnen op de home) */
.bd-vraag{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.42;color:var(--inkt)}
.bd-vraag mark{background:var(--mark);color:inherit;border-radius:4px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bd-keuzes{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;font-family:var(--app)}
.bd-keuzes span{font-size:13.5px;font-weight:600;line-height:1;padding:9px 13px;border-radius:999px;background:var(--zacht);color:var(--inkt)}
.bd-keuzes span.aan{background:var(--geel);color:var(--op-geel);box-shadow:inset 0 0 0 1px rgba(150,100,0,.25),0 4px 10px -6px rgba(150,100,0,.6)}

/* Kop van "voor wie": vier mensen met hun vraag */
.bd-mensen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(1160px,100% - 2*var(--pad));margin:clamp(48px,5vw,72px) auto 0;text-align:left}
.bd-mens{margin:0}
.bd-mens-in{position:relative}
.bd-mens img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--r-m)}
.bd-ballon{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 13px;border-radius:16px 16px 16px 5px;background:var(--wit);box-shadow:0 14px 30px -16px rgba(23,22,15,.5)}
.bd-ballon .bd-vraag{font-size:15px}
.bd-ballon .bd-keuzes{margin-top:9px;gap:5px}
.bd-ballon .bd-keuzes span{font-size:12.5px;padding:7px 10px}
.bd-mens figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 4px 0}
.bd-mens figcaption b{font-family:var(--font-kop);font-weight:600;font-size:19px;letter-spacing:-.022em}
.bd-mens figcaption span{font-size:var(--t-klein);color:var(--inkt-2)}
.bd-noot{text-align:center;margin-top:18px;font-size:13px;color:var(--stil)}

/* Mailkaarten per vak */
.bd-mails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.bd-mail{display:flex;flex-direction:column;background:var(--wit);border-radius:var(--r-kaart);padding:22px 22px 24px;box-shadow:0 0 0 1px var(--lijn),0 24px 48px -40px rgba(23,22,15,.4)}
.bd-vak{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stil)}
.bd-vak i{width:36px;height:36px;border-radius:12px;background:var(--geel-was);color:var(--inkt);display:grid;place-items:center;flex:none}
.bd-vak i svg{width:18px;height:18px}
.bd-van{margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn);font-size:13px;color:var(--stil);font-family:var(--app)}
.bd-van b{color:var(--inkt);font-weight:600}
.bd-mail .bd-vraag{margin-top:6px}
.bd-mail .bd-keuzes{margin-top:auto;padding-top:18px}

/* Past wel, past niet: geel en donker vlak naast elkaar */
.bd-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.bd-twee .vlak{display:flex;flex-direction:column;place-items:initial;min-height:0;padding:clamp(28px,4vw,52px)}
.bd-twee .ak-label{color:inherit;opacity:.8}
.bd-twee .vlak.geel .ak-label::before{background:var(--inkt);box-shadow:0 0 0 3px rgba(23,22,15,.12)}
.bd-twee h3{font-family:var(--font-kop);font-size:clamp(28px,2.6vw,38px);font-weight:600;letter-spacing:-.032em;line-height:1.06;margin-top:16px;text-wrap:balance}
.bd-twee .vlak>p{margin-top:12px;font-size:17px;line-height:1.55;max-width:32em}
.bd-twee .vlak.donker>p{color:rgba(246,241,228,.72)}
.bd-twee .app-kaart{margin-top:auto;width:100%;max-width:none}
.bd-twee .app-kaart:first-of-type{margin-top:28px}
.bd-lijst{display:grid;gap:12px;margin-top:24px}
.bd-lijst li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:17px;line-height:1.5}
.bd-lijst li::before{content:"";width:26px;height:26px;border-radius:50%;margin-top:0;
  background:#1B1A16 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B400' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.bd-lijst.nee li::before{background:rgba(255,250,235,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E4' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,250,235,.14)}
.bd-lijst.nee li{color:rgba(246,241,228,.86)}
.bd-twee .bd-voet{margin-top:auto;padding-top:28px}
.bd-twee .vlak.donker a:not(.btn){color:#fff;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}

/* Prijs: witte kaart op het zonnevlak */
.bd-prijs{min-height:0;padding:clamp(20px,5vw,72px) clamp(12px,4vw,72px)}
.bd-pk{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);width:min(1000px,100%);background:var(--wit);border-radius:28px;overflow:hidden;
  box-shadow:0 1px 2px rgba(23,22,15,.06),0 50px 90px -40px rgba(120,80,0,.55)}
.bd-pk-l{display:flex;flex-direction:column;padding:clamp(28px,4vw,52px)}
.bd-pk-l .ak-label{align-self:flex-start}
.bd-pk-l .pk-bedrag{margin-top:26px}
.bd-pk-l .pk-onder{margin-top:14px;font-size:17px;color:var(--inkt-2)}
.bd-pk-l .btn{margin-top:auto;align-self:flex-start}
.bd-pk-l .bd-klein{margin-top:14px;font-size:14px;line-height:1.5;color:var(--stil)}
.bd-pk-r{padding:clamp(28px,4vw,52px);background:var(--zacht)}
.bd-pk-r h2{font-family:var(--font-kop);font-size:20px;font-weight:600;letter-spacing:-.02em}
.bd-pk-r .pk-lijst{margin:18px 0 0;padding:0;border:0;gap:13px}
.bd-pk-r .pk-lijst li{font-size:16px;font-weight:500;align-items:flex-start}
.bd-pk-r .pk-lijst svg{background:var(--wit);width:24px;height:24px;padding:5px;margin-top:-1px}
.bd-knop-ruimte{height:28px}

/* Wat een team betaalt */
.bd-som{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.bd-som div{background:var(--wit);border-radius:var(--r-kaart);padding:clamp(20px,2.2vw,28px);box-shadow:0 0 0 1px var(--lijn)}
.bd-som small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stil)}
.bd-som b{display:block;margin-top:14px;font-family:var(--font-kop);font-size:clamp(34px,3.4vw,48px);font-weight:650;letter-spacing:-.04em;line-height:1}
.bd-som span{display:block;margin-top:8px;font-size:14px;color:var(--inkt-2)}
.bd-som div.aan{background:var(--geel-was);box-shadow:inset 0 0 0 1px var(--keuze-rand)}
.bd-onder{text-align:center;margin-top:20px;font-size:15px;color:var(--inkt-2)}

/* Help: snelle sprongen in de kop */
.bd-sprong{justify-content:center;margin-top:30px}
.bd-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.bd-start li{background:var(--wit);border-radius:20px;padding:20px 22px;box-shadow:0 0 0 1px var(--lijn);font-size:16px;line-height:1.55;color:var(--inkt-2);counter-increment:bs}
.bd-start{counter-reset:bs}
.bd-start li::before{content:counter(bs);width:30px;height:30px;border-radius:50%;background:var(--geel);color:var(--op-geel);display:grid;place-items:center;font-weight:700;font-size:14px}
.bd-start b{display:block;margin-top:14px;font-family:var(--font-kop);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--inkt)}
.bd-start a{color:var(--inkt)}
.at h2+.faq7{margin-top:18px}

/* Over ons: de mens erachter */
.bd-wie{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.bd-wie-tekst{background:var(--wit);border-radius:var(--r-l);padding:clamp(28px,4vw,52px);box-shadow:0 0 0 1px var(--lijn)}
.bd-wie-tekst .av{width:64px;height:64px;font-size:26px}
.bd-wie-tekst h3{font-family:var(--font-kop);font-size:clamp(28px,2.6vw,38px);font-weight:600;letter-spacing:-.032em;line-height:1.06;margin-top:22px}
.bd-wie-tekst p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--inkt-2);max-width:34em}
.bd-gegevens{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px);color:#F6F1E4;border-radius:var(--r-l);padding:clamp(28px,4vw,52px);display:flex;flex-direction:column}
.bd-gegevens>svg{width:52px;height:auto;color:#3A3830}
.bd-gegevens dl{display:grid;gap:0;margin-top:22px}
.bd-gegevens dl div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;padding:13px 0;border-top:1px solid rgba(255,250,235,.1);font-size:15.5px}
.bd-gegevens dt{color:rgba(246,241,228,.6)}
.bd-gegevens dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.bd-gegevens a{color:#fff;text-decoration-color:var(--geel);text-underline-offset:3px}

/* Doorgestreepte ergernissen (zoals "Instead of" op de home) */
.bd-last{display:grid;gap:10px;width:100%}
.bd-last li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;padding:15px 16px;border-radius:16px;background:rgba(255,250,235,.06);box-shadow:inset 0 0 0 1px rgba(255,250,235,.08);font-size:15.5px;line-height:1.45;color:rgba(246,241,228,.78)}
.bd-last li b{display:block;color:#F6F1E4;font-weight:600;margin-bottom:2px}
.bd-last i{width:28px;height:28px;border-radius:50%;background:rgba(255,250,235,.1);display:grid;place-items:center;color:rgba(246,241,228,.75)}
.bd-last i svg{width:13px;height:13px}

/* Privacy: wie doet wat */
.at .bd-tabel td:first-child{font-weight:600;width:34%}
.at .bd-tabel td:last-child{color:var(--inkt-2);white-space:nowrap}
.bd-ok{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--geel-was)}
.bd-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.bd-docs a{display:flex;flex-direction:column;gap:6px;background:var(--wit);border-radius:20px;padding:20px;box-shadow:0 0 0 1px var(--lijn);text-decoration:none;color:var(--inkt);font-size:15px;line-height:1.4;transition:box-shadow .2s ease,transform .2s ease}
.bd-docs a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--lijn-2),0 20px 40px -28px rgba(23,22,15,.35)}
.bd-docs a b{font-family:var(--font-kop);font-size:18px;font-weight:600;letter-spacing:-.02em}
.bd-docs a span{color:var(--stil);font-size:14px}
.bd-docs svg{width:22px;height:22px;color:var(--inkt);margin-bottom:6px}

@media (max-width:1000px){
  .bd-mails{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-som{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-pk{grid-template-columns:1fr}
  .bd-wie{grid-template-columns:1fr}
  .bd-mensen{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,32%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .bd-mensen::-webkit-scrollbar{display:none}
  .bd-mens{scroll-snap-align:start}
}
@media (max-width:760px){
  .bd-twee{grid-template-columns:1fr}
  .bd-docs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bd-mails{grid-template-columns:1fr}
  .bd-mensen{grid-auto-columns:78%;gap:12px}
  .bd-start{grid-template-columns:1fr}
  .bd-pk-l .btn{align-self:stretch}
  .at .bd-tabel td:last-child{white-space:normal}
  .bd-gegevens dl div{grid-template-columns:1fr;gap:2px}
}

/* Laatste blok vóór het wachtlijstblok: ruimte eronder */
.bd-laatste{padding-bottom:clamp(80px,8vw,128px)}
.bd-pk-l .pk-bedrag b{font-size:clamp(88px,9vw,128px)}
.bd-pk-l .pk-bedrag sup{font-size:clamp(28px,2.6vw,38px)}

/* ======================================================================
   Blog (12-11): beelden bovenaan de artikelen over Outlook, Gmail en
   overstappen, kleine beelden op de kaarten, en het blogoverzicht.
   Alles met bl- ervoor; de rest komt uit artikel.css en pagina.css.
   ====================================================================== */

/* Twee kaarten naast elkaar op het gele vlak, met een pijl ertussen */
.bl-duo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:14px;width:min(860px,100%);text-align:left;font-family:var(--app)}
.bl-pijl{width:44px;height:44px;border-radius:50%;background:var(--inkt);color:var(--geel);display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(80,50,0,.6)}
.bl-pijl svg{width:20px;height:20px}
.bl-kaart{background:var(--wit);border-radius:20px;padding:18px 18px 16px;box-shadow:0 1px 2px rgba(23,22,15,.06),0 40px 80px -36px rgba(120,80,0,.55);color:var(--inkt)}
.bl-kop{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.bl-kop b{margin-left:auto;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600;color:var(--stil)}
.bl-kop svg{width:15px;height:15px;color:var(--inkt)}

/* Velden van een regel of filter */
.bl-veld{margin-top:10px}
.bl-veld small{display:block;font-size:12px;font-weight:600;color:var(--stil);margin-bottom:5px}
.bl-veld span{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border-radius:10px;background:var(--zacht);box-shadow:inset 0 0 0 1px var(--lijn);font-size:14px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.bl-veld span em{font-style:normal;color:var(--stil);font-weight:600;flex:none}
.bl-veld span code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px}
.bl-vink{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:13.5px;font-weight:600;line-height:1.3}
.bl-vink i{flex:none;width:18px;height:18px;border-radius:5px;background:var(--inkt);color:var(--geel);display:grid;place-items:center}
.bl-vink i svg{width:11px;height:11px}
.bl-vink.uit i{background:var(--wit);box-shadow:inset 0 0 0 1.5px var(--lijn-2)}
.bl-vink.uit{color:var(--stil);font-weight:500}

/* Een map of labellijst */
.bl-lijst{display:grid;gap:2px;margin-top:10px}
.bl-lijst li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--inkt-2)}
.bl-lijst li b{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--stil)}
.bl-lijst li.aan{background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand);color:var(--inkt);font-weight:600}
.bl-lijst li.aan b{color:var(--inkt)}
.bl-lijst .tus{margin-top:6px;padding:6px 10px 2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.bl-stip{width:10px;height:10px;border-radius:3px;flex:none;background:var(--c,#A29E94)}
.bl-lijst svg{width:16px;height:16px;flex:none;color:var(--stil)}

/* Een mail in de map, die nog een antwoord nodig heeft */
.bl-mail{margin-top:10px;padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--lijn)}
.bl-mail-van{display:flex;align-items:center;gap:10px}
.bl-mail-van .a-ini{width:32px;height:32px;font-size:12px;background:var(--doek);box-shadow:none}
.bl-mail-van b{display:block;font-size:14px;line-height:1.2}
.bl-mail-van small{display:block;font-size:12.5px;color:var(--stil)}
.bl-mail-van time{margin-left:auto;font-size:12px;color:var(--stil);align-self:start}
.bl-mail p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--inkt-2)}
.bl-mail mark{background:var(--mark);color:var(--inkt);border-radius:4px;padding:1px 2px}
.bl-nog{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:999px;background:#24231C;color:#FBFAF7}
.bl-nog::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--geel)}

/* Overstappen: je adres, en twee kanten om te vervangen */
.bl-lagen{position:relative;width:min(840px,100%);display:grid;gap:14px;font-family:var(--app);text-align:left}
.bl-adres{justify-self:center;display:flex;align-items:center;gap:12px;background:var(--wit);border-radius:999px;padding:10px 20px 10px 10px;box-shadow:0 1px 2px rgba(23,22,15,.06),0 30px 60px -30px rgba(120,80,0,.55)}
.bl-adres i{width:36px;height:36px;border-radius:50%;background:var(--inkt);color:var(--geel);display:grid;place-items:center;flex:none}
.bl-adres i svg{width:17px;height:17px}
.bl-adres small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.bl-adres b{display:block;font-size:16px;letter-spacing:-.01em}
.bl-tak{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bl-tak .bl-kaart{padding:22px 22px 20px}
.bl-tak .bl-kaart h3{font-family:var(--font-kop);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:10px}
.bl-tak .bl-kaart p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--inkt-2)}
.bl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bl-chips span{font-size:13px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--zacht);box-shadow:inset 0 0 0 1px var(--lijn)}
.bl-chips span.aan{background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand)}
.bl-maat{display:inline-flex;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--geel-was);color:var(--inkt)}
.bl-maat.groot{background:#24231C;color:#FBFAF7}

/* Filterrecepten: de sjabloonkaart van het artikel, met velden.
   .at h3 uit pagina.css gaf de kop in een sjabloonkaart marge; hier weer recht. */
.at .sj h3{margin:0}
.bl-velden{margin-top:16px;display:grid;gap:8px}
.bl-velden div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 14px;border-radius:12px;background:var(--zacht);font-size:15px;line-height:1.45}
.bl-velden dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--stil)}
.bl-velden dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.bl-velden code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:14px;background:var(--wit);border-radius:6px;padding:1px 6px;box-shadow:0 0 0 1px var(--lijn)}
.sj .bl-waarom{margin-top:14px;font-size:15px;line-height:1.55;color:var(--inkt-2)}

/* Ruimte na een tabel in de tekst */
.at .tabel-wrap+p,.at .tabel-wrap+ul{margin-top:24px}
.at>ol+p,.at>.sjablonen+p{margin-top:20px}

/* Code in lopende tekst (zoekwoorden voor Gmail) */
.at code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86em;background:var(--wit);border-radius:6px;padding:1px 6px;box-shadow:0 0 0 1px var(--lijn-2)}
.at .bl-velden code{font-size:14px;box-shadow:0 0 0 1px var(--lijn);overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Bronnen onderaan een artikel */
.bl-bron{margin-top:clamp(40px,4vw,56px);padding:20px 22px;border-radius:18px;background:var(--zacht);font-size:15px;line-height:1.55;color:var(--inkt-2)}
.bl-bron b{display:block;color:var(--inkt);font-size:15.5px}
.bl-bron ul{margin-top:8px;display:grid;gap:4px}
.bl-bron a{color:var(--inkt-2)}

/* Kleine beelden op de kaarten (overzicht en "Keep reading") */
.bl-vb{position:relative;z-index:1;display:grid;gap:7px;width:min(72%,260px);font-family:var(--app)}
.bl-vb span{margin:0;display:flex;align-items:center;gap:9px;background:var(--wit);color:var(--inkt);border-radius:11px;padding:9px 12px;font-size:13px;font-weight:600;line-height:1.2;box-shadow:0 14px 30px -18px rgba(23,22,15,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-vb span i{flex:none;width:9px;height:9px;border-radius:3px;background:var(--c,var(--geel))}
.bl-vb span em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--stil);font-weight:600}
.bl-vb span.aan{background:var(--keuze);box-shadow:inset 0 0 0 1px var(--keuze-rand),0 14px 30px -18px rgba(23,22,15,.45)}
.vl-beeld.donker .bl-vb span{box-shadow:0 16px 30px -16px rgba(0,0,0,.7)}
.bl-vb span:nth-child(2){margin:0 0 0 9%}
.bl-vb span:nth-child(3){margin:0 0 0 18%}
.uitgelicht .bl-vb{width:min(70%,340px);gap:9px}
.uitgelicht .bl-vb span{font-size:15px;padding:12px 15px;border-radius:13px}

/* Blogoverzicht */
.bl-overzicht{padding-top:clamp(40px,4.4vw,64px);padding-bottom:clamp(72px,7vw,112px)}
.bl-sectie{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:clamp(56px,6vw,88px)}
.bl-sectie h2{font-family:var(--font-kop);font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.025em}
.bl-sectie span{font-size:var(--t-klein);color:var(--stil)}
.blog-lijst.bl-drie{grid-template-columns:repeat(3,1fr)}
.blog-lijst.bl-drie a:last-child{display:block}
.vl p.bl-zin{margin:8px 12px 0;font-size:15.5px;line-height:1.5;color:var(--inkt-2)}

@media (max-width:1000px){
  .blog-lijst.bl-drie{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .bl-duo{grid-template-columns:1fr;justify-items:stretch}
  .bl-pijl{justify-self:center;transform:rotate(90deg);width:38px;height:38px}
  .bl-tak{grid-template-columns:1fr}
}
@media (max-width:640px){
  .blog-lijst.bl-drie{grid-template-columns:1fr}
  .bl-velden div{grid-template-columns:1fr;gap:4px}
  .bl-sectie{flex-direction:column;gap:4px}
  .bl-adres b{font-size:15px}
  .bl-vb,.uitgelicht .bl-vb{width:86%}
  .bl-vb span:nth-child(2){margin-left:5%}
  .bl-vb span:nth-child(3){margin-left:10%}
  .uitgelicht .bl-vb span{font-size:14px;padding:10px 13px}
  .tabel.bl-vier{font-size:14px}
  .tabel.bl-vier th,.tabel.bl-vier td{padding:11px 9px}
  .tabel.bl-vier th{font-size:11px;letter-spacing:.05em}
}

/* ======================================================================
   Functiepagina's (12-11): het overzicht en de vier detailpagina's.
   Alles hier begint met fn-. Bouwt op pagina.css en artikel.css.
   ====================================================================== */

/* Kopbeeld: twee app-kaarten naast elkaar, met een pijl ertussen */
.fn-duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;width:min(940px,100%)}
.fn-duo .app-kaart{width:100%;height:100%}
.fn-pijl{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.72);display:grid;place-items:center;color:var(--inkt);box-shadow:0 8px 20px -12px rgba(120,80,0,.6)}
.fn-pijl svg{width:20px;height:20px}

/* Onderdelen binnen een app-kaart */
.app-kaart .mail-van{margin-bottom:14px}
.app-kaart .mail-van b{font-size:15px}
.fn-voet{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.fn-voet .app-knop{margin-top:0}
.fn-voet>span:not(.app-knop){font-size:14px;font-weight:600;color:var(--stil)}
.fn-voet .fn-rechts{margin-left:auto}
.fn-veld{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:42px;padding:0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--lijn-2);color:var(--stil);font-size:14.5px}
.fn-veld svg{width:16px;height:16px;flex:none}
.fn-spraak{display:flex;align-items:center;gap:12px;margin-top:10px;padding:9px 14px 9px 9px;border-radius:999px;background:var(--zacht);font-size:14.5px;font-weight:600}
.fn-spraak i{width:34px;height:34px;border-radius:50%;background:var(--geel);color:var(--op-geel);display:grid;place-items:center;flex:none}
.fn-spraak i svg{width:16px;height:16px}
.fn-golf{display:flex;align-items:center;gap:3px;height:22px;margin-left:auto}
.fn-golf span{width:3px;border-radius:2px;background:var(--inkt-2)}
.fn-tussen{display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.fn-ok{color:var(--groen)}
.fn-vraag{background:var(--geel-was)}
.fn-vraag>i{background:var(--geel);box-shadow:none;font-weight:700;font-size:14px}
.app-rij>i.fn-ok{color:var(--groen)}
.app-rij>i img,.app-rij>i svg.fn-merk{width:16px;height:16px}

/* Bijlage in een mail */
.fn-bijlage{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--lijn-2)}
.fn-bijlage i{width:36px;height:40px;border-radius:8px;background:#FCE8E4;color:#B4402A;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;flex:none}
.fn-bijlage b{display:block;font-size:14.5px;font-weight:600}
.fn-bijlage small{display:block;font-size:12.5px;color:var(--stil)}

/* Voor en na: zo schrijft een chatbot, zo schrijf jij */
.fn-vs{width:min(440px,100%);display:grid;gap:12px}
.fn-vs-zij{border-radius:20px;padding:18px 20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-family:var(--app)}
.fn-vs-zij small,.fn-vs .app-kop{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fn-vs-zij small{color:rgba(255,255,255,.55)}
.fn-vs-zij p{margin-top:8px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.8);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.fn-vs .app-tekst{font-size:16px;color:var(--inkt);font-weight:500}

/* Twee talen naast elkaar */
.fn-talen{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(580px,100%)}
.fn-talen .app-kaart{width:100%;padding:18px}
.fn-taal{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--zacht);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--inkt-2)}
.fn-talen .app-tekst{font-size:15px}
.fn-talen .app-tekst+.app-tekst{margin-top:10px;padding-top:10px;border-top:1px solid var(--lijn)}

/* Kennisbank en team: de onderdelen van de home (ap-) op een witte kaart */
.fn-kb .ap-zoek{margin-top:0}
.fn-kb .ap-veld{background:var(--zacht);font-size:14px}
.fn-kb .ap-toe{font-size:14px}
.fn-kb .ap-chips span{font-size:13px}
.fn-kb .ap-lijst{box-shadow:0 0 0 1px var(--lijn)}
.fn-kb .ap-feit p:first-child{font-size:14.5px;line-height:1.45}
.fn-kb .ap-meta{font-size:12.5px}
.fn-kb .ap-sectie:first-child{margin-top:0 !important}
.fn-av-g{background:#E3F1E7;color:#1E6B3C}
.fn-av-b{background:#E7EEFD;color:#2352C4}
.fn-voorstel{margin-top:12px;padding:14px;border-radius:14px;background:var(--geel-was)}
.fn-voorstel small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-2)}
.fn-voorstel p{margin-top:6px;font-size:15px;line-height:1.5;font-weight:500}
.fn-voorstel .fn-voet{border-top-color:rgba(23,22,15,.08);margin-top:12px;padding-top:12px}

/* Telefoon op een vlak */
.fn-tel{width:250px;border-radius:42px;background:#13120E;padding:9px;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 40px 80px -30px rgba(80,50,0,.7)}
.fn-tel-scherm{position:relative;border-radius:34px;background:var(--grond);padding:44px 14px 18px;font-family:var(--app);min-height:440px;overflow:hidden}
.fn-tel-scherm::before{content:"";position:absolute;top:11px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:999px;background:#13120E}
.fn-tel-scherm>b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.fn-tel-scherm>small{display:block;font-size:12px;color:var(--stil);margin-top:2px}
.fn-tel-rij{margin-top:10px;background:var(--wit);border-radius:14px;padding:11px 12px;box-shadow:0 0 0 1px var(--lijn)}
.fn-tel-rij small{display:flex;justify-content:space-between;font-size:11.5px;color:var(--stil)}
.fn-tel-rij b{display:block;margin-top:3px;font-size:13.5px;font-weight:600;line-height:1.35}
.fn-tel-rij .app-keuzes{margin-top:8px;gap:5px}
.fn-tel-rij .app-keuzes span{font-size:12px;padding:5px 10px}

/* Overzicht: kleine functies, icoon naast de titel */
.fn-klein .kk{padding:22px 24px}
.fn-klein .kk-kop{display:flex;align-items:center;gap:14px}
.fn-klein .kk-ico{width:40px;height:40px;border-radius:12px;flex:none}
.fn-klein .kk-ico svg{width:20px;height:20px}
.fn-klein h3{margin-top:0;font-size:clamp(18px,1.4vw,20px)}
.fn-klein p{margin-top:10px;font-size:15.5px}

/* Overzicht: de grote vier krijgen een gekleurde hoek */
.fn-vier .kk{padding:clamp(24px,2.8vw,36px);min-height:100%}
.fn-vier .kk h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.03em}
.fn-vier .kk p{font-size:17px;max-width:28em}

/* Twee grenzen op een donker vlak */
.fn-grens{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;place-items:initial;min-height:0;padding:clamp(28px,5vw,72px)}
.fn-grens h2{font-family:var(--font-kop);font-size:clamp(30px,3vw,46px);font-weight:var(--w-kop);letter-spacing:var(--ls-kop);line-height:1.05;text-wrap:balance}
.fn-grens>div>p{margin-top:16px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.7);max-width:26em}
.fn-grens ul{display:grid;gap:12px}
.fn-grens li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fn-grens li i{width:40px;height:40px;border-radius:12px;background:var(--geel);color:var(--op-geel);display:grid;place-items:center}
.fn-grens li i svg{width:20px;height:20px}
.fn-grens li b{display:block;font-family:var(--font-kop);font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:#FBFAF7}
.fn-grens li p{margin-top:4px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.7)}

/* Ruimte vóór een blok van de home dat zelf een band is */
.fn-voor-band{padding-bottom:clamp(80px,8vw,128px)}

/* Detailpagina: overzichtstabel en ontwikkelaars */
.fn-tabel td:first-child{width:30%}
.fn-ontw{margin-top:clamp(20px,2vw,28px)}
.fn-ontw .btn{white-space:nowrap}


/* Logo's in de kop van Integrations */
.fn-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);width:min(820px,100%);list-style:none;padding:0}
.fn-logos li{display:grid;justify-items:center;text-align:center;gap:4px;background:var(--wit);border-radius:22px;padding:clamp(22px,3vw,34px) 16px;box-shadow:0 1px 2px rgba(23,22,15,.06),0 40px 80px -36px rgba(120,80,0,.55);font-family:var(--app)}
.fn-logo{width:64px;height:64px;border-radius:18px;background:var(--zacht);display:grid;place-items:center;margin-bottom:12px;color:var(--inkt)}
.fn-logo svg{width:32px;height:32px}
.fn-logos b{font-size:18px;font-weight:700;letter-spacing:-.015em}
.fn-logos small{font-size:14px;color:var(--stil)}

/* Postvak: rij met initialen */
.fn-mailrij{align-items:center}
.fn-mailrij .a-ini{grid-row:span 2;width:34px;height:34px;font-size:12px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}

/* Invulveld met knipperende cursor */
.fn-veld-aan{color:var(--inkt);font-weight:500;box-shadow:inset 0 0 0 2px var(--inkt)}
.fn-cursor{width:2px;height:18px;margin-left:-8px;background:var(--inkt);animation:fnKnipper 1.1s steps(1) infinite}
@keyframes fnKnipper{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fn-cursor{animation:none}}

/* Ontwikkelaarsbalk: icoon in geel */
.fn-ontw>svg{width:30px;height:30px;color:var(--geel)}

/* Tegels: een kaart met een klein beeld uit de app bovenin (zoals Linear en Notion) */
.fn-tegels .kk{display:flex;flex-direction:column;padding:10px 10px 26px}
.fn-tegels .kk>h3,.fn-tegels .kk>p,.fn-tegels .kk>.meer,.fn-tegels .kk>.ak-label{margin-inline:clamp(12px,1.4vw,18px)}
.fn-tegels .kk>.ak-label{margin-top:22px;font-size:11.5px}
.fn-tegels .kk>.ak-label+h3{margin-top:10px}
.fn-tegels .kk>.meer{margin-top:auto;padding-top:16px}
.fn-beeld{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;min-height:clamp(220px,20vw,280px);display:grid;place-items:center;padding:clamp(18px,2.4vw,32px)}
.fn-beeld>*{position:relative;z-index:1}
.fn-beeld.geel{background:radial-gradient(120% 90% at 50% 118%,#FFE9A6 0%,#FFD23F 35%,#F5B400 70%,#E9A100 100%)}
.fn-beeld.geel::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 14deg);pointer-events:none;z-index:0}
.fn-beeld.donker{background:#24231C repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px)}
.fn-beeld.warm{background:var(--doek)}
.fn-beeld .app-kaart{width:min(340px,100%);padding:16px;border-radius:16px}
.fn-beeld .app-titel{font-size:15.5px}
.fn-beeld .app-tekst{font-size:14px}
.fn-beeld .app-keuzes span{font-size:13px;padding:6px 11px}
.fn-beeld .app-rij{padding:9px 12px;font-size:13.5px}
.fn-beeld .app-rij small{font-size:12px}
.fn-tegels.kaarten.twee .fn-beeld{min-height:clamp(240px,24vw,320px)}
.fn-mini-logos{display:flex;gap:12px}
.fn-mini-logos span{width:clamp(64px,6.5vw,92px);height:clamp(64px,6.5vw,92px);border-radius:22px;background:var(--wit);display:grid;place-items:center;box-shadow:0 20px 40px -24px rgba(120,80,0,.6)}
.fn-mini-logos svg{width:44%;height:44%}
.fn-doorhaal{text-decoration:line-through;text-decoration-color:#C0392B;color:var(--stil)}
.fn-nieuw{background:var(--mark);border-radius:4px;padding:0 3px;font-weight:600;color:var(--inkt)}
.fn-zeg{display:inline-flex;margin-top:10px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:12px 12px 12px 4px;background:var(--inkt);color:#FBFAF7}
.fn-notitie{font-size:14px;line-height:1.6;color:var(--inkt);background:var(--geel-was);border-radius:10px;padding:10px 12px;font-weight:500}
.fn-stap-pijl{display:block;margin:8px auto;width:18px;height:18px;color:var(--stil)}

/* Beeldvlakken: inhoud mag nooit breder worden dan het vlak */
.fn-ak{grid-template-columns:minmax(0,1fr)}
.fn-ak>*{justify-self:center;max-width:100%}
.fn-nw{white-space:nowrap}

/* Groter durven: de app-kaart in het kopbeeld */
.ak-beeld .app-kaart{width:min(500px,100%);padding:24px 26px;border-radius:22px}
.ak-beeld .app-titel{font-size:clamp(17px,1.5vw,20px)}
.ak-beeld .app-rij{font-size:15.5px;padding:13px 16px}
.ak-beeld .app-rij small{font-size:13.5px}
.ak-beeld .app-keuzes span{font-size:15px;padding:9px 15px}
.ak-beeld .fn-duo .app-kaart{width:100%}
/* De bronkaart van de home op een donker vlak */
.vlak.donker .bron22-kaart{color:var(--inkt);width:min(520px,100%)}
/* Twee talen: even hoog, de vraag van de klant stiller */
.fn-talen .app-kaart+.app-kaart{margin-top:0}
.fn-talen .fn-vraagt{font-size:13px;color:var(--stil);font-style:italic}

@media (max-width:760px){
  .fn-duo{grid-template-columns:1fr;gap:12px}
  .fn-pijl{justify-self:center;transform:rotate(90deg);width:40px;height:40px}
  .fn-grens{grid-template-columns:1fr}
  .fn-talen{grid-template-columns:1fr}
  .fn-tabel td:first-child{width:auto}
  .fn-logos{grid-template-columns:1fr;width:min(360px,100%)}
  .fn-logos li{grid-template-columns:56px 1fr;justify-items:start;text-align:left;column-gap:14px;padding:16px;align-items:center}
  .fn-logos .fn-logo{grid-row:span 2;width:56px;height:56px;margin:0}
}
@media (max-width:640px){
  .fn-tel{width:236px}
  .fn-tel-scherm{min-height:400px}
  .fn-grens li{grid-template-columns:1fr;gap:12px;padding:18px}
  .fn-voet{flex-wrap:wrap}
}