/* Polyproof — beginpagina v2 (Rob 13 okt 2026): "de pagina leest zichzelf na".
   Eén groot moment: de kop met een tikfout die de rode pen verbetert. Daarna een live AI-demo op gelinieerd papier,
   en onderdelen die zichzelf corrigeren als je erlangs scrolt. Zelfde tokens als de app (pp.css). Mobiel eerst. */
:root{--paper:#fdfcf9;--ruled:rgba(22,33,58,.07);--pen:var(--red);--ink-soft:rgba(22,33,58,.42)}
@media (prefers-color-scheme:dark){:root{--paper:#1a2133;--ruled:rgba(255,255,255,.06);--ink-soft:rgba(233,237,246,.42)}}
body.home{background:var(--bg)}
.home main{padding:0;max-width:none;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left))}
.home h2{font:500 clamp(30px,6vw,46px)/1.08 Newsreader,Georgia,serif;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.home h3{font:700 17px/1.3 Inter,system-ui,sans-serif;margin:0 0 6px}
.home section.wrap,.home .band,.home .demo,.home .fvdband,.home .final{padding-block:56px}
.intro{color:var(--ink2);max-width:60ch;margin:0 0 22px;font-size:17px}
.band{background:var(--card);border-block:1px solid var(--line)}
.hmicro{font-size:13px;color:var(--ink2);margin:8px 0 0}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- kop ---------- */
.hbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 6px) max(16px,calc(50vw - 524px)) 6px}
.hnav{display:none;gap:24px;margin-left:auto}
.hnav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--ink2);min-height:44px;display:inline-flex;align-items:center}
.hnav a:hover{color:var(--ink)}
.hlang{display:flex;gap:2px;margin-left:auto}
.hlang>a{font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none;min-width:38px;min-height:40px;display:inline-grid;place-items:center;border-radius:8px}
.hlang>a.on{color:var(--ink);background:var(--card)}
@media (min-width:880px){.hnav{display:flex}.hlang{margin-left:8px}}

/* ---------- de rode pen (gedeeld) ---------- */
.fx{position:relative;display:inline-block;white-space:nowrap}
.fx .o{transition:color .3s,opacity .3s}
.fx .st{position:absolute;left:-3%;top:52%;width:106%;height:.42em;transform:translateY(-50%);overflow:visible;pointer-events:none;clip-path:inset(-50% 100% -50% 0)}
.fx .st path{fill:none;stroke:var(--pen);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fx .n{position:absolute;left:50%;bottom:72%;transform:translateX(-50%) rotate(-4deg);font:600 1.05em/1 Caveat,"Segoe Print","Bradley Hand",cursive;color:var(--green);white-space:nowrap;clip-path:inset(0 100% 0 0);pointer-events:none}
.fx .num{position:absolute;right:-.7em;top:-.2em;font:700 10px/1 Inter,system-ui,sans-serif;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--pen);color:#fff;opacity:0}
.fx.on .st{animation:pp-draw .5s cubic-bezier(.6,.1,.3,1) var(--d,0s) forwards}
.fx.on .o{animation:pp-fade .4s calc(var(--d,0s) + .25s) forwards}
.fx.on .n{animation:pp-write .7s steps(14,end) calc(var(--d,0s) + .45s) forwards}
.fx.on .num{animation:pp-pop .3s calc(var(--d,0s) + 1s) forwards}
@keyframes pp-draw{to{clip-path:inset(-50% -4% -50% 0)}}
@keyframes pp-fade{to{color:var(--ink-soft)}}
@keyframes pp-write{to{clip-path:inset(0 -8% 0 0)}}
@keyframes pp-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .fx .st{clip-path:none}.fx .o{color:var(--ink-soft)}.fx .n{clip-path:none}.fx .num{opacity:1}
  .fx.on .st,.fx.on .o,.fx.on .n,.fx.on .num{animation:none}
}

/* ---------- 1. hero: de kop verbetert zichzelf ---------- */
.hero{max-width:1080px;margin:0 auto;padding:clamp(56px,11vw,120px) max(16px,env(safe-area-inset-left)) 40px;position:relative}
.hh .nw{white-space:nowrap}
.hh{font:500 clamp(56px,15vw,132px)/1.02 Newsreader,Georgia,serif;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hh .fx .n{font-size:.62em;bottom:80%}
.hh .fx .st path{stroke-width:4}
.note.hn{font:600 clamp(20px,3.2vw,28px)/1 Caveat,cursive;color:var(--pen);margin:6px 0 0;text-align:right;opacity:0;transform:rotate(-3deg);position:relative}
.note.hn span{display:inline-block;padding:2px 12px;border:2px solid var(--pen);border-radius:50% 46% 52% 48%/60% 55% 45% 40%}
.note.hn.on{animation:pp-pop .4s .95s both}
@media (prefers-reduced-motion:reduce){.note.hn{opacity:1;transform:rotate(-3deg)}}
.hgrid{display:grid;gap:26px;margin-top:clamp(18px,4vw,36px);align-items:end}
.lede{font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:var(--ink2);max-width:46ch;margin:0}
.hform .lbl{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.hrow{display:flex;flex-direction:column;gap:10px}
.hrow .go{min-height:52px}
@media (min-width:520px){.hrow{flex-direction:row}.hrow input{flex:1}.hrow .go{flex:none}}
@media (min-width:900px){.hgrid{grid-template-columns:1fr 1fr;gap:48px}.note.hn{position:absolute;right:max(16px,env(safe-area-inset-left));top:clamp(56px,11vw,120px);margin:0}}
.facts{list-style:none;padding:22px 0 0;margin:34px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;font-weight:600;color:var(--ink2)}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts li::before{content:"✓";font:600 22px/1 Caveat,cursive;color:var(--green)}

/* ---------- 2. live demo op gelinieerd papier ---------- */
.demo{background:var(--card);border-block:1px solid var(--line)}
.dgrid{display:grid;gap:16px}
@media (min-width:900px){.dgrid{grid-template-columns:1fr 1fr;gap:22px}}
.dpaper{--lh:34px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px 20px 16px 52px;position:relative;
  background-image:linear-gradient(90deg,transparent 38px,rgba(198,42,63,.12) 38px,rgba(198,42,63,.12) 39px,transparent 39px),repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),var(--ruled) calc(var(--lh) - 1px) var(--lh));
  background-position:0 0,0 18px;box-shadow:0 1px 0 var(--line),0 22px 44px -30px rgba(22,33,58,.45);min-height:240px}
.dpaper textarea{display:block;width:100%;border:0;background:transparent;padding:0;font:400 19px/var(--lh) Newsreader,Georgia,serif;color:var(--ink);resize:vertical;min-height:calc(var(--lh) * 6)}
.dpaper textarea:focus{outline:none}
.dpaper:focus-within{border-color:var(--ink)}
.dbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.dcount{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.out{view-transition-name:pp-demo-out}
.dtext{font:400 19px/2.35 Newsreader,Georgia,serif;margin:0;padding-top:6px}
.dtext .fx .n{font-size:1.05em}
.dhint{color:var(--ink2);font:italic 400 18px/1.6 Newsreader,Georgia,serif;margin:6px 0 0}
.dok{font:600 24px/1 Caveat,cursive;color:var(--green);margin:12px 0 0}
.dnotes{margin:14px 0 0;padding:12px 0 0 20px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink2);display:grid;gap:6px}
.dnotes li::marker{color:var(--pen);font-weight:700}
.dnotes b{color:var(--ink);font-weight:600;margin-right:4px}
.dmore{margin:14px 0 0;font-weight:600}
.dmore a{color:var(--ink)}
.dmore a.go{color:#fff;text-decoration:none}
.dwork{display:flex;align-items:center;gap:12px;color:var(--ink2);font:italic 400 18px/1.6 Newsreader,Georgia,serif;margin:8px 0 0}
.pen{width:46px;height:14px;background:linear-gradient(90deg,var(--pen),var(--pen)) 0 50%/0 2.5px no-repeat;animation:pp-scribble 1.1s ease-in-out infinite}
@keyframes pp-scribble{0%{background-size:0 2.5px}60%{background-size:100% 2.5px}100%{background-size:100% 2.5px;opacity:0}}
::view-transition-old(pp-demo-out),::view-transition-new(pp-demo-out){animation-duration:.35s}

/* ---------- 3. stappen (echte volgorde) ---------- */
.hsteps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:22px}
.hsteps li{counter-increment:s;position:relative;padding-left:60px;min-height:44px}
.hsteps li::before{content:counter(s);position:absolute;left:0;top:-4px;font:500 46px/1 Newsreader,Georgia,serif;color:var(--pen)}
.hsteps b{display:block;font-size:17px;margin-bottom:4px}
.hsteps span{display:block;color:var(--ink2);max-width:62ch}
@media (min-width:900px){.hsteps{grid-template-columns:repeat(3,1fr);gap:32px}}

/* ---------- 4. wat we controleren: elk onderdeel corrigeert zichzelf ---------- */
.checks{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.checks li{display:grid;gap:12px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.checks b{display:block;font-size:17px;margin-bottom:4px}
.checks li>div:last-child span{color:var(--ink2);max-width:62ch;display:block}
.cx{font:400 clamp(22px,4vw,28px)/1.9 Newsreader,Georgia,serif;padding-top:10px}
@media (min-width:860px){.checks li{grid-template-columns:400px 1fr;gap:40px}}
.dead{text-decoration:underline;text-decoration-color:var(--ink-soft);text-underline-offset:5px;transition:text-decoration-color .4s}
.cx.on .dead{text-decoration:underline wavy var(--pen);text-decoration-thickness:1.5px}
.tag404{display:inline-block;margin-left:12px;font:700 13px/1 Inter,system-ui,sans-serif;color:var(--pen);border:2px solid var(--pen);border-radius:4px;padding:5px 7px;transform:rotate(-8deg) scale(.4);opacity:0;vertical-align:middle}
.cx.on .tag404{animation:pp-stamp .35s .3s forwards}
@keyframes pp-stamp{to{opacity:1;transform:rotate(-8deg) scale(1)}}
.cimg{display:flex;align-items:center;gap:16px;font-size:clamp(18px,3vw,22px);line-height:1.3}
.cimg .cat{width:110px;height:74px;flex:none;border-radius:6px;outline:2.5px solid transparent;outline-offset:4px;transition:outline-color .4s .2s}
.cimg.on .cat{outline-color:var(--pen)}
.gsnip{display:grid;gap:2px;font:400 15px/1.35 Inter,system-ui,sans-serif;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;max-width:360px}
.gsnip .gt{color:#1a0dab;font-size:19px}
.gsnip .gu{color:#3c7a3c;font-size:13px}
.gsnip .gd{color:var(--ink2);transition:background .4s .2s}
.gsnip.on .gd{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
@media (prefers-color-scheme:dark){.gsnip .gt{color:#8ab4f8}.gsnip .gu{color:#81c995}}
@media (prefers-reduced-motion:reduce){.tag404{opacity:1;transform:rotate(-8deg)}.cimg .cat{outline-color:var(--pen)}}

/* ---------- 5. Fout van de dag: krantenknipsel ---------- */
.fvdband{background:var(--bg)}
.clip{position:relative;background:var(--paper);padding:26px 22px 34px;max-width:760px;transform:rotate(-.6deg);
  box-shadow:0 2px 0 var(--line),0 26px 50px -34px rgba(22,33,58,.5);
  --z:12px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--z) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--z) 100%}
.stamp{position:absolute;right:16px;top:16px;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:var(--pen);border:2px solid var(--pen);border-radius:4px;padding:6px 8px;transform:rotate(6deg)}
.fvdq{font:400 clamp(22px,3.6vw,30px)/2 Newsreader,Georgia,serif;margin:6px 0 10px;padding-right:90px}
.fvdc{margin:0 0 10px;color:var(--ink2);font-style:italic}
.fvdm{margin:0;font-size:13px;color:var(--ink2)}
.fvdtag{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--greenbg);color:var(--green)}
.fvdtag.att{background:var(--redbg);color:var(--red)}
.fvdtag.top{background:var(--hl);color:var(--amber)}
.fvdimg{display:block;max-width:100%;max-height:300px;margin:14px 0;border-radius:6px}
.sect2{font-size:15px;margin:34px 0 10px}
.fvdl{list-style:none;padding:0;margin:0;max-width:760px}
.fvdl li{padding:14px 0;border-top:1px solid var(--line)}
.fvdl li::after{content:"";display:block;clear:both}
.fvdl p{margin:6px 0 4px;font:400 19px/1.9 Newsreader,Georgia,serif}
.fvdl small{font-size:13px;color:var(--ink2)}
.fvdth{float:right;width:72px;height:72px;object-fit:cover;border-radius:8px;margin:0 0 6px 10px}
.fvdl mark,.clip mark{background:var(--hl);color:inherit;padding:0 2px}

/* ---------- 6. voor wie ---------- */
.who{display:grid;gap:0;border-top:1px solid var(--line)}
.who>div{padding:20px 0;border-bottom:1px solid var(--line)}
.who p{margin:0;color:var(--ink2)}
@media (min-width:860px){.who{grid-template-columns:repeat(3,1fr);border-top:0}.who>div{border-bottom:0;border-left:1px solid var(--line);padding:4px 24px}.who>div:first-child{border-left:0;padding-left:0}}

/* ---------- 7. vergelijking ---------- */
.cmp-wrap{overflow-x:auto;margin:0 0 12px;display:none}
.cmpm{display:grid;gap:10px;margin:0 0 12px}
.cmpm>div{background:var(--bg);border-radius:12px;padding:14px 16px}
.cmpm h3{font-size:15px;margin:0 0 6px}
.cmpm p{margin:0 0 4px;color:var(--ink2);font-size:15px}
.cmpm .us{color:var(--green);font-weight:700}
.cmp{border-collapse:collapse;width:100%;font-size:15px}
.cmp th,.cmp td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:14px;color:var(--ink2);font-weight:600}
.cmp tbody th{font-weight:600}
.cmp .us{background:var(--greenbg);font-weight:600}
.cmp thead .us{color:var(--green)}
@media (min-width:760px){.cmp-wrap{display:block}.cmpm{display:none}}

/* ---------- 8. eindredactie ---------- */
.htwo{display:grid;gap:28px;align-items:center}
.ticks{padding:0;margin:16px 0 0;list-style:none;display:grid;gap:10px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:2px;top:-4px;font:600 24px/1 Caveat,cursive;color:var(--green)}
.cta-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.cta-card p{margin:0 0 14px}
@media (min-width:880px){.htwo{grid-template-columns:1.3fr 1fr;gap:48px}}

/* ---------- 9. privacy ---------- */
.privl{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.privl>div{padding:18px 0;border-bottom:1px solid var(--line)}
.privl dt{font-weight:700;margin-bottom:4px}
.privl dd{margin:0;color:var(--ink2);max-width:62ch}
@media (min-width:860px){.privl{grid-template-columns:1fr 1fr;column-gap:40px}}

/* ---------- 10. vragen ---------- */
#vragen details{border-bottom:1px solid var(--line);max-width:780px}
#vragen summary{cursor:pointer;font-weight:600;padding:18px 40px 18px 0;min-height:44px;list-style:none;position:relative}
#vragen summary::-webkit-details-marker{display:none}
#vragen summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 28px/1 Newsreader,Georgia,serif;color:var(--pen);transition:transform .2s}
#vragen details[open] summary::after{transform:rotate(45deg)}
#vragen details p{margin:0 0 18px;color:var(--ink2)}

/* ---------- slot ---------- */
.final{background:var(--card);border-top:1px solid var(--line);text-align:center}
.final h2{font-size:clamp(34px,7vw,60px);margin-bottom:22px}
.final .hf2{max-width:580px;margin:0 auto;text-align:left}
.final .hf2 .hmicro{text-align:center}
.hfoot{text-align:center;font-size:13px;color:var(--ink2);padding:24px 16px calc(env(safe-area-inset-bottom) + 24px);background:var(--card)}
.hfoot a{color:var(--ink2)}
/* panel ronde 3 */
.lede .ink{color:var(--ink);font-weight:600}
.dsam{display:flex;gap:4px;margin-left:auto}
.dsam .ghost{min-height:36px;padding:0 10px;font-size:12px}
.dnotes .kind{display:inline-block;font-size:12px;color:var(--pen);border:1px solid currentColor;border-radius:3px;padding:0 5px;transform:rotate(-2deg)}
.dmore .go{display:inline-flex}
.fvdtag{background:none!important;border:2px solid currentColor;border-radius:4px;transform:rotate(-3deg);font-weight:700;letter-spacing:.02em;padding:2px 8px}
.fvdtag.att{color:var(--red)}.fvdtag.top{color:var(--amber)}
.hero .hform input{background:var(--paper);border-width:2px}
.dbar{flex-wrap:wrap}
.dbar .go,.dcount,.dsam .ghost{white-space:nowrap}
.dsam .dsl{font-size:12px;color:var(--ink2);align-self:center;margin-right:4px}
@media (max-width:560px){.dsam{order:-1;width:100%;margin:0}}
/* waarom nu: AI bouwt websites, wie leest ze na? */
.aiwhy{padding-block:64px;background:var(--bg)}
.aiwhy h2{font-size:clamp(34px,7vw,60px);max-width:16ch}
.aiwhy-q{position:relative;white-space:nowrap;background:linear-gradient(transparent 62%,rgba(198,42,63,.18) 62% 92%,transparent 92%)}
.whyl{list-style:none;padding:0;margin:8px 0 26px;display:grid;border-top:1px solid var(--line)}
.whyl li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.whyl b{font-size:17px}
.whyl span{color:var(--ink2);max-width:62ch}
@media (min-width:860px){.whyl{grid-template-columns:repeat(3,1fr);border-top:0}.whyl li{border-bottom:0;border-left:1px solid var(--line);padding:4px 24px}.whyl li:first-child{border-left:0;padding-left:0}}
.aiwhy-a{font:400 clamp(21px,3vw,27px)/1.45 Newsreader,Georgia,serif;max-width:40ch;margin:0;position:relative}
.aiwhy-note{font:700 40px/1 Caveat,cursive;color:var(--green);margin-left:8px;display:inline-block;transform:rotate(-8deg)}

/* ---------- navigatie: mobiel een vaste tabbalk onderin, laptop links bovenin (Rob 13 okt) ---------- */
.mtab{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);
  padding:6px max(8px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 6px) max(8px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line)}
.mtab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;text-decoration:none;color:var(--ink2);font-size:11px;font-weight:600;border-radius:12px}
.mtab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtab a[aria-current="page"]{color:var(--ink)}
.mtab a[aria-current="page"] svg{stroke:var(--red)}
body.home{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
body.home:has(.mtab) #ppc{bottom:calc(76px + env(safe-area-inset-bottom))}
.hnav a[aria-current="page"]{color:var(--ink)}
@media (min-width:880px){.mtab{display:none}body.home{padding-bottom:0}body.home:has(.mtab) #ppc{bottom:16px}}
/* subpagina's */
.phead2{padding-top:clamp(36px,8vw,72px)!important;padding-bottom:8px!important}
.phead2 h1{font:500 clamp(38px,8vw,64px)/1.05 Newsreader,Georgia,serif;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
/* homepage: door naar functies en prijzen */
.homemore{display:flex;flex-wrap:wrap;gap:12px 28px;padding-block:8px 40px!important}
.morelink{font:500 clamp(19px,2.6vw,23px)/1.3 Newsreader,Georgia,serif;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.morelink::after{content:" →";color:var(--red)}
.phead2 + section,.phead + section.wrap{padding-top:20px!important}
.phead2 + section.band{margin-top:24px}
/* minder verschuiving bij het laden van de serif-letter: vaste ruimte voor de koppen */
.phead2 h1,.phead h1{min-height:2.1em}
@media (min-width:700px){.phead2 h1,.phead h1{min-height:1.05em}}
/* functies: notitie van de eindredacteur bij elk voorbeeld (panel 13 okt) */
.cnote{display:block;margin-top:2px;font:600 20px/1.1 Caveat,'Segoe Print',cursive;color:var(--pen);transform:rotate(-2deg);transform-origin:left;opacity:0;transition:opacity .4s .9s}
.on>.cnote,.on .cnote{opacity:1}
.cimg .cnote{flex-basis:100%}
.cimg{flex-wrap:wrap}
.gsnip .cnote{margin-top:6px}
@media (prefers-reduced-motion:reduce){.cnote{opacity:1;transition:none}}
.prepub{display:grid;gap:4px;margin-top:22px;padding:16px 18px;border:1px dashed var(--line);border-radius:12px}
.prepub span{color:var(--ink2)}
.phead2 .hform{margin-top:18px;max-width:560px}
/* panel 13 okt */
.hmicro{font-size:14px}
@media (max-width:560px){.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}}
.fvdcta{margin:18px 0 8px}
.fvdcta .go{display:inline-flex}
.hand3{font:600 24px/1 Caveat,'Segoe Print',cursive;color:var(--pen);transform:rotate(-2deg);margin:0 0 6px;text-align:center}
.hand3.left{text-align:left}
.midcta{margin:28px 0 0;max-width:560px}
.docn{display:inline-block;font:600 12px/1 Inter,system-ui,sans-serif;color:var(--ink2);border:1px solid var(--line);border-radius:5px;padding:5px 7px;margin-right:8px;vertical-align:middle;background:var(--card)}
.fvdcta p{margin:0 0 8px;font-weight:600}
#vragen details[open]{background:var(--card);border-radius:12px;padding:0 14px;box-shadow:inset 3px 0 0 var(--pen)}
.phead2 .hand3{display:block;margin:0 0 16px}
/* ervaringen */
.proofband{padding:48px 0}
.pstats{font-size:17px;color:var(--ink2);margin:0 0 18px}
.pstats b{font:500 28px/1 Newsreader,Georgia,serif;color:var(--ink)}
.pquotes{display:grid;gap:14px}
@media (min-width:760px){.pquotes{grid-template-columns:repeat(2,1fr)}}
.pqc{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.pqc blockquote{margin:0 0 10px;font:400 19px/1.45 Newsreader,Georgia,serif}
.pqc figcaption{font-size:14px;font-weight:600}
.pqc figcaption span{font-weight:400;color:var(--ink2)}
.qst{display:block;color:#e0a100;letter-spacing:2px;margin:0 0 6px;font-size:18px}