/* reveals */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* micro-interacties */
.btn{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
nav a.on{color:var(--stamp);border-bottom:1px solid var(--stamp);padding-bottom:2px}
/* ---------- walkthrough (PC-13) ---------- */
.wt{border:1px solid var(--rule);background:var(--paper-deep);padding:26px 28px 22px}
.wt-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 20px;padding:0}
.wt-steps li{color:var(--ink-soft);transition:color .3s ease}
.wt-steps li.on{color:var(--stamp)}
.wt-stage{position:relative;min-height:300px}
.wt-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;
  pointer-events:none}
.wt-panel.on{opacity:1;transform:none}
/* stap 1: code typt zichzelf */
.wt-code{font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:22px 26px;
  width:min(100%,460px);min-height:64px;display:flex;align-items:center}
.wt-caret{display:inline-block;width:8px;height:1.05em;background:var(--stamp);
  margin-left:1px;animation:wtBlink 1s steps(1) infinite}
.wt-live{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stamp);margin-left:14px;opacity:0;transition:opacity .3s ease;white-space:nowrap}
.wt-live.on{opacity:1}
@keyframes wtBlink{50%{opacity:0}}
/* stap 2: getekend browservenster */
.wt-frame{position:relative;background:var(--paper);border:1px solid var(--ink);
  width:min(100%,460px);height:240px;overflow:hidden;display:flex;flex-direction:column}
.wt-url{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding:8px 12px}
.wt-skel{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.wt-skel i{display:block;height:9px;background:var(--rule);opacity:.7}
.wt-skel i:nth-child(1){width:55%}
.wt-skel i:nth-child(2){width:85%}
.wt-skel i:nth-child(3){width:70%}
.wt-banner{position:absolute;left:10px;right:10px;bottom:10px;background:var(--paper);
  border:1.5px solid var(--ink);padding:12px 14px;transform:translateY(130%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wt-panel.on .wt-banner{transform:none;transition-delay:.5s}
.wt-panel.on .wt-banner.away{transform:translateY(130%);transition-delay:0s}
.wt-banner strong{font-weight:600;font-size:.95rem;display:block;margin-bottom:8px}
.wt-choices{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em}
.wt-choices b{font-weight:500;border:1px solid var(--ink);padding:6px 10px;
  transition:background .25s ease}
.wt-choices b.hit{background:var(--stamp-soft)}
.wt-cursor{position:absolute;left:55%;top:30%;width:10px;height:10px;border-radius:50%;
  background:var(--ink);opacity:0;z-index:2;
  transition:left .6s cubic-bezier(.2,.7,.2,1),top .6s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.wt-cursor.on{opacity:.7}
.wt-cursor.click{animation:wtClick .25s ease}
@keyframes wtClick{50%{transform:scale(.7)}}
/* stap 3: het ontvangstbewijs, gestempeld */
.wt-receipt{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--ink);
  background:var(--paper);border:1px dashed var(--rule);padding:20px 24px;
  display:flex;flex-direction:column;gap:8px;width:min(100%,320px)}
.wt-panel .wt-receipt span{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.wt-panel.on .wt-receipt span{opacity:1;transform:none}
.wt-panel.on .wt-receipt span:nth-child(1){transition-delay:.15s}
.wt-panel.on .wt-receipt span:nth-child(2){transition-delay:.27s}
.wt-panel.on .wt-receipt span:nth-child(3){transition-delay:.39s}
.wt-panel.on .wt-receipt span:nth-child(4){transition-delay:.51s}
.wt-stamp{display:flex;position:absolute;right:12%;bottom:4%;top:auto;left:auto;
  width:110px;height:110px;font-size:.55rem;opacity:0}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(24deg) scale(1.6)}
  60%{opacity:.95;transform:rotate(9deg) scale(.94)}
  100%{opacity:.85;transform:rotate(11deg) scale(1)}
}
.wt-panel.on .wt-stamp{animation:stampIn .5s cubic-bezier(.2,.8,.3,1.2) .9s both}
.wt-cap{margin-top:18px;color:var(--ink-soft);min-height:1.6em}
/* ---------- how-it-works visuals (PC-16) ---------- */
.hv{border:1px solid var(--rule);background:var(--paper-deep);padding:22px;margin:18px 0 10px;
  display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.hv-cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 26px}
/* scan: gestreepte lijn sweept over een documentkaart, cookies worden gevonden en ingedeeld */
.hv-doc{position:relative;flex:1 1 220px;min-height:150px;background:var(--paper);
  border:1px solid var(--rule);padding:14px;overflow:hidden}
.hv-doc>i{display:block;height:8px;background:var(--rule);opacity:.7;margin-bottom:10px}
.hv-doc>i:nth-child(1){width:60%}.hv-doc>i:nth-child(2){width:85%}.hv-doc>i:nth-child(3){width:45%}
.hv-chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--ink);
  border:1px solid var(--stamp);background:var(--stamp-soft);padding:2px 7px;
  display:inline-block;margin:6px 6px 0 0;opacity:0}
.hv-line{position:absolute;left:0;right:0;top:0;height:0;border-top:2px dashed var(--stamp);opacity:0}
.hv.play .hv-line{animation:hvSweep 5.2s linear infinite}
.hv.play .hv-chip.c1{animation:hvChipA 5.2s linear infinite}
.hv.play .hv-chip.c2{animation:hvChipB 5.2s linear infinite}
.hv.play .hv-chip.c3{animation:hvChipC 5.2s linear infinite}
@keyframes hvSweep{0%{top:0;opacity:1}42%{top:calc(100% - 2px);opacity:1}46%,100%{opacity:0}}
@keyframes hvChipA{0%,10%{opacity:0}16%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes hvChipB{0%,22%{opacity:0}28%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes hvChipC{0%,34%{opacity:0}40%,86%{opacity:1}92%,100%{opacity:0}}
.hv-ledger{flex:1 1 180px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.hv-cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px dashed var(--rule);padding-bottom:8px;
  display:flex;justify-content:space-between;gap:12px}
.hv-cat b{color:var(--stamp);font-weight:500;opacity:0}
.hv.play .hv-cat .t1{animation:hvTickA 5.2s linear infinite}
.hv.play .hv-cat .t2{animation:hvTickB 5.2s linear infinite}
.hv.play .hv-cat .t3{animation:hvTickC 5.2s linear infinite}
@keyframes hvTickA{0%,48%{opacity:0}54%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes hvTickB{0%,56%{opacity:0}62%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes hvTickC{0%,64%{opacity:0}70%,86%{opacity:1}92%,100%{opacity:0}}
/* bewijs: statisch ontvangstbewijs + annotaties in gewone taal */
.hv-notes{list-style:none;margin:0;padding:0;flex:1 1 180px;display:flex;flex-direction:column;
  gap:10px;justify-content:center}
.hv-notes li{color:var(--ink-soft);font-size:.95rem;padding-left:18px;position:relative}
.hv-notes li::before{content:"";position:absolute;left:0;top:.55em;width:10px;
  border-top:1px dashed var(--stamp)}
/* meten: uit tot er gekozen is, dan flippen de regels */
.hv-rows{display:flex;flex-direction:column;gap:14px;flex:1 1 100%}
.hv-click{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--stamp);opacity:0}
.hv-measure.in .hv-click{opacity:1;transition:opacity .3s ease .6s}
.hv-row{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;min-height:1.5em}
.hv-row .off,.hv-row .on2{position:absolute;left:0;top:0;transition:opacity .5s ease}
.hv-row .off{color:var(--ink-soft)}
.hv-row .on2{color:var(--stamp);opacity:0}
.hv-measure.in .hv-row .off{opacity:0;transition-delay:1.2s}
.hv-measure.in .hv-row .on2{opacity:1;transition-delay:1.2s}

/* ---------- pricing + faq (PC-17/PC-18) ---------- */
.seg{display:inline-flex;border:1px solid var(--ink);margin:26px 0 0}
.seg button{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:0;color:var(--ink);padding:10px 16px;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg button:not(.on):hover{color:var(--stamp)}
.tier{transition:box-shadow .18s ease}
.tier:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tier .price strong{display:inline-block;min-width:3.2ch}
.tier .pop-band{background:var(--stamp-soft);color:var(--stamp);font-family:var(--mono);
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:6px 8px;margin:-30px -24px 10px}
details.faq{border-bottom:1px dashed var(--rule);padding:18px 0}
details.faq summary{cursor:pointer;list-style:none;display:flex;gap:14px;align-items:baseline;
  font-weight:600;font-size:1.08rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .fn{font-family:var(--mono);color:var(--stamp);font-size:.8rem}
details.faq summary .m{font-family:var(--mono);color:var(--stamp);margin-left:auto;
  transition:transform .25s ease;display:inline-block}
details.faq[open] summary .m{transform:rotate(45deg)}
details.faq p{color:var(--ink-soft);margin:12px 0 0;max-width:62ch}

/* ---------- polish (PC-20) ---------- */
/* demo-box als browservenster met eenmalige knop-pulse */
.demo-box.demo-frame{border:1px solid var(--ink);padding:0;display:block}
.demo-box.demo-frame .demo-inner{padding:32px 36px;display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between}
@keyframes pulseOnce{
  0%{box-shadow:0 0 0 0 rgba(179,64,42,.25)}
  70%{box-shadow:0 0 0 14px rgba(179,64,42,0)}
  100%{box-shadow:0 0 0 0 rgba(179,64,42,0)}
}
.demo-box.reveal.in .btn.primary{animation:pulseOnce .9s ease 1 .5s}
/* clausule-lijnen tekenen zichzelf */
ol.clauses li{border-bottom:0;
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 9px);
  background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;
  transition:background-size .7s ease}
ol.clauses li.in{background-size:100% 1px}

/* stempel-moment (PC-14): hero-stempel stempelt eenmalig in */
.stamp.reveal{opacity:0;transform:none;transition:none}
.stamp.reveal.in{animation:stampIn .5s cubic-bezier(.2,.8,.3,1.2) .8s both}
@media(max-width:820px){
  /* mobiel eindigt de stempel op 8deg; de fill-mode van stampIn zou anders 11deg opleggen */
  .stamp.reveal.in{animation-name:stampInM}
}
@keyframes stampInM{
  0%{opacity:0;transform:rotate(21deg) scale(1.6)}
  60%{opacity:.95;transform:rotate(6deg) scale(.94)}
  100%{opacity:.85;transform:rotate(8deg) scale(1)}
}
@media(max-width:640px){
  .wt{padding:20px 16px 18px}
  .wt-stage{min-height:340px}
  .wt-stamp{right:4%;width:96px;height:96px;font-size:.5rem}
}

/* ---------- scroll-gedreven walkthrough (PC-23) ---------- */
/* vaste wrapper-hoogte in CSS = geen layout-shift; onder 820px collabeert de wrapper op inhoud */
@media(min-width:820px){
  .wt-scroll{height:260vh}
  .wt-scroll .wt{position:sticky;top:76px}
  .wt-steps li[role="button"]{cursor:pointer}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  /* walkthrough: toon het eindbeeld, geen beweging */
  .wt-steps li{color:var(--ink)}
  .wt-panel{position:static;display:none;opacity:1;transform:none}
  .wt-panel[data-p="3"]{display:flex;position:relative;min-height:300px}
  .wt-panel .wt-receipt span{opacity:1;transform:none;transition:none}
  .wt-panel.on .wt-stamp,.wt-panel[data-p="3"] .wt-stamp{animation:none;opacity:.85}
  .wt-banner{transition:none}
  .wt-caret{animation:none}
  .wt-stage{min-height:0}
  /* PC-23: geen scroll-runway bij reduced motion, statisch eindbeeld zonder sticky */
  .wt-scroll{height:auto}
  .wt-scroll .wt{position:static}
  .stamp.reveal{opacity:.85;transform:rotate(11deg)}
  .stamp.reveal.in{animation:none}
  /* how-it-works visuals: eindstand */
  .hv .hv-chip,.hv .hv-cat b{animation:none;opacity:1}
  .hv-line{display:none}
  .hv-row .off{opacity:0}
  .hv-row .on2{opacity:1}
  .hv-click{opacity:1}
  ol.clauses li{background-size:100% 1px;transition:none}
  .demo-box.reveal.in .btn.primary{animation:none}
}

/* ---------- eerlijke prijs-calculator vs-cookiebot (PC-25) ---------- */
.calc{border:1px solid var(--rule);background:var(--paper-deep);padding:22px 24px;margin:26px 0 4px}
.calc-label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.calc-slider{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:18px}
.calc input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 200px;max-width:340px;
  height:20px;margin:0;padding:0;background:transparent;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule)}
.calc input[type=range]::-moz-range-track{height:2px;background:var(--rule)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-7px;border-radius:0;background:var(--paper);
  border:1.5px solid var(--ink);transition:border-color .18s ease,background .18s ease}
.calc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:0;
  background:var(--paper);border:1.5px solid var(--ink);
  transition:border-color .18s ease,background .18s ease}
.calc input[type=range]:hover::-webkit-slider-thumb{border-color:var(--stamp)}
.calc input[type=range]:hover::-moz-range-thumb{border-color:var(--stamp)}
/* zichtbare stap-aanduiding: vaste breedte zodat het label niet verspringt */
.calc-step{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink);
  min-width:18ch}
/* resultaatregels: het bedrag-element krijgt een vaste minimum-breedte in ch,
   zodat wisselende teksten nergens layout-shift veroorzaken (breedste = NL gratis-of-7) */
.calc-row{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--ink-soft);margin:0 0 8px}
.calc-row:last-child{margin-bottom:0}
.calc-amt{display:inline-block;min-width:33ch;color:var(--ink)}
.calc-pc .calc-amt{color:var(--stamp);font-weight:500}
/* melding voor voorleessoftware: uit beeld, wel in de voorleesvolgorde (PC-29) */
.calc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- "maak hem van jou" in de hero (PC-24) ---------- */
/* De hero had rechts een groot leeg vlak met alleen de stempel erin. Daar
   staat nu het product zelf: een getekend venster met de ECHTE banner (in een
   iframe, zie preview.html) die meebeweegt met de kleuren die je kiest. */
.mk{border:1px solid var(--rule);background:var(--paper-deep);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:13px}
.mk-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mk-presets{display:flex;flex-wrap:wrap;gap:6px}
.mk-preset{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);background:transparent;color:var(--ink);padding:6px 9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .16s ease,color .16s ease}
.mk-preset:hover{background:var(--ink);color:var(--paper)}
.mk-preset[aria-pressed="true"]{background:var(--stamp);border-color:var(--stamp);color:var(--paper)}
.mk-swatch{width:9px;height:9px;border:1px solid currentColor;display:inline-block}
.mk-frame{border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.mk-url{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding:8px 11px}
.mk-frame iframe{display:block;width:100%;height:352px;border:0;background:var(--paper)}
.mk-fields{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.mk-field{display:flex;align-items:center;gap:7px}
.mk-field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.mk-field input[type="color"]{width:38px;height:24px;padding:0;border:1px solid var(--ink);
  background:transparent;cursor:pointer}
.mk-title{flex:1 1 100%;display:flex;flex-direction:column;gap:6px}
.mk-title input{font-family:var(--serif);font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);padding:8px 10px;width:100%}
.mk-title input:focus{border-color:var(--ink);outline:none}
.mk-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px dashed var(--rule);padding-top:12px}
.mk-copy{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--ink);background:transparent;color:var(--ink);padding:8px 12px;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.mk-copy:hover{background:var(--ink);color:var(--paper)}
.mk-more{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--stamp);text-decoration:none;border-bottom:1px dashed var(--stamp)}
.mk-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--ink-soft);
  line-height:1.7;margin:0}
.mk-note b{color:var(--stamp);font-weight:500}

/* twee kolommen zodra er ruimte is; daaronder stapelt de speeltuin gewoon */
@media(min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:40px;align-items:start;
    padding-top:72px}
  .hero h1{font-size:clamp(2.4rem,4.4vw,3.9rem);max-width:11ch}
  .hero .lede{font-size:1.06rem;margin-top:24px}
  .hero .actions{margin-top:30px}
  /* de stempel stond in het lege vlak dat nu gevuld is; hij zakt mee naar links */
  .stamp{position:static;width:116px;height:116px;margin-top:32px;font-size:.54rem;transform:rotate(9deg)}
  .stamp.reveal.in{animation-name:stampInM}
}
@media(min-width:1260px){
  /* de hero mag breder zijn dan de tekstkolom van de rest van het document */
  .hero{width:1180px;margin-left:-178px;margin-right:-178px;grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  .hero h1{font-size:clamp(3rem,4.4vw,4.6rem)}
}
@media(prefers-reduced-motion:reduce){
  .mk-frame iframe{scrollbar-width:none}
}

/* ---------- "wij kijken op je site" (PC-31, staat uit tot B37) ---------- */
/* De hero belooft dat wij op je site kijken en in gewone taal zeggen of het
   goed staat. Dit is dat, als document: een scanlijn die over een pagina loopt
   en daarna een oordeel met een stempel. Zolang data-scan="off" staat blijft
   het formulier verborgen en doet de JS niets. */
.scan{margin-top:30px;max-width:46ch}
.scan[hidden]{display:none}
.scan-label{display:block;margin-bottom:9px}
.scan-row{display:flex;gap:8px;flex-wrap:wrap}
.scan-row input{flex:1 1 200px;font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);padding:13px 12px}
.scan-row input:focus{outline:2px solid var(--stamp);outline-offset:2px}
.scan-row .btn{padding:13px 20px}
.scan-out{margin-top:18px}
.scan-out:empty{display:none}
.scan-doc{position:relative;border:1px solid var(--rule);background:var(--paper-deep);
  padding:16px 18px;overflow:hidden}
.scan-doc>i{display:block;height:8px;background:var(--rule);opacity:.7;margin-bottom:10px}
.scan-doc>i:nth-child(1){width:58%}.scan-doc>i:nth-child(2){width:86%}.scan-doc>i:nth-child(3){width:44%}
.scan-sweep{position:absolute;left:0;right:0;top:0;height:0;border-top:2px dashed var(--stamp);
  animation:scanSweep 1.6s linear infinite}
@keyframes scanSweep{0%{top:0}100%{top:calc(100% - 2px)}}
.scan-busy{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:12px}
/* het oordeel */
.scan-verdict{position:relative;border:1px solid var(--ink);background:var(--paper);padding:20px 22px}
.scan-verdict h3{font-weight:600;font-size:1.05rem;margin-bottom:4px;max-width:30ch}
.scan-verdict .scan-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.scan-list{list-style:none;margin:0 0 14px;padding:0}
.scan-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink);
  border-bottom:1px dashed var(--rule);padding:8px 0}
.scan-list li span:last-child{color:var(--ink-soft);text-align:right;white-space:nowrap}
.scan-list li.needs span:last-child{color:var(--stamp)}
.scan-verdict p{color:var(--ink-soft);max-width:44ch;font-size:.95rem}
.scan-stamp{position:absolute;right:16px;bottom:14px;width:84px;height:84px;
  border:2px solid var(--stamp);border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--stamp);font-family:var(--mono);
  font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;
  transform:rotate(9deg);opacity:.85;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='r3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .92 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23r3)'/%3E%3C/svg%3E")}
.scan-error{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--stamp);
  border:1px dashed var(--stamp);padding:12px 14px}
@media(max-width:640px){.scan-stamp{display:none}}
@media(prefers-reduced-motion:reduce){
  .scan-sweep{animation:none;top:calc(50% - 1px)}
}

/* ---------- micro-delights (PC-26) ---------- */
/* De laag kleine momenten die het document af laat voelen: een antwoord dat
   openvouwt in plaats van springt, een onderstreping die inglijdt, inkt die
   een knop vult, een liniaal langs het document, en een stempel die je
   opnieuw mag zetten. Alles uit in reduced-motion, onderaan dit bestand. */

/* 1. FAQ vouwt open en dicht i.p.v. springen.
   Niet de grid-rows-truc uit de spec: die vraagt dat het antwoord ook in de
   layout blijft staan als de <details> dicht is, en dan staan de links in het
   antwoord nog in de tab-volgorde en in de voorleesvolgorde terwijl je ze niet
   ziet. `::details-content` animeert dezelfde beweging met de juiste semantiek
   (dicht = echt weg) en valt in oudere browsers stil terug op direct openen. */
details.faq{interpolate-size:allow-keywords}
details.faq::details-content{block-size:0;overflow:hidden;
  transition:block-size .35s ease,content-visibility .35s allow-discrete}
details.faq[open]::details-content{block-size:auto}
details.faq .faq-body>p{margin:0;padding-top:12px}

/* 2. Nav-onderstreep glijdt in vanaf links; de actieve pagina houdt zijn vaste streep */
nav a{background:linear-gradient(var(--stamp),var(--stamp)) no-repeat left bottom/0 1px;
  transition:background-size .25s ease,color .18s ease}
/* de actieve pagina heeft al een vaste streep; die krijgt er geen tweede bij */
nav a:not(.on):hover,nav a:not(.on):focus-visible{background-size:100% 1px}

/* 3. Inkt vult de primaire knop vanuit het midden i.p.v. een harde kleurwissel */
.btn.primary{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::before{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;
  margin:-50% 0 0 -50%;border-radius:50%;background:var(--ink);z-index:-1;
  transform:scale(0);transition:transform .35s ease}
.btn.primary:hover::before,.btn.primary:focus-visible::before{transform:scale(2.2)}
/* de knop houdt zijn eigen vlak; de inkt komt eroverheen, dus geen dubbele wissel */
.btn.primary:hover,.btn.primary:focus-visible{background:var(--stamp);border-color:var(--ink);
  transition:border-color .35s ease}

/* 4. Leesliniaal: de lijn die met je meeleest langs het document.
   Vast aan de bovenrand omdat de masthead niet meescrollt: in de tekststroom
   onder de masthead-rand zou de liniaal juist uit beeld zijn zodra hij iets te
   melden heeft. 2px inkt, geen laag over de tekst; site.js hangt hem alleen op
   bij pagina's langer dan twee schermen. */
.ruler{position:fixed;top:0;left:0;right:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;z-index:9;pointer-events:none}

/* 5. De hero-stempel mag je opnieuw zetten */
.stamp.reveal{cursor:pointer}
.stamp.reveal.restamp{animation:stampIn .5s cubic-bezier(.2,.8,.3,1.2) both}
@media(max-width:820px){.stamp.reveal.restamp{animation-name:stampInM}}
@media(min-width:1000px){.stamp.reveal.restamp{animation-name:stampInM}}

@media(prefers-reduced-motion:reduce){
  details.faq::details-content{transition:none}
  nav a{transition:none}
  .btn.primary::before{display:none}
  .btn.primary:hover,.btn.primary:focus-visible{background:var(--ink);border-color:var(--ink);transition:none}
  /* de liniaal blijft: hij beweegt statisch mee met je scrollpositie */
  .stamp.reveal{cursor:default}
  .stamp.reveal.restamp{animation:none}
}

/* ---------- paginawissels (PC-27) ---------- */
/* Dertien pagina's die aanvoelen als één document, niet als losse bestanden.
   Een crossfade van nog geen kwart seconde, verder niets: geen schuivende
   panelen, geen theater. Browsers die cross-document view transitions niet
   kennen negeren dit blok en navigeren zoals altijd, dus er valt niets stuk.
   `@view-transition` moet in de oude én de nieuwe pagina staan; site.css hangt
   aan alle dertien, dus dat klopt vanzelf. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pcFadeOut .18s ease both}
::view-transition-new(root){animation:pcFadeIn .22s ease both}
@keyframes pcFadeOut{to{opacity:0}}
@keyframes pcFadeIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- fonts, zelf gehost (PC-27 tweede helft / B39) ---------- */
/* De site laadde deze twee families bij Google. Dat is een render-blokkerend
   verzoek naar een derde partij op elke pagina, en op een site over toestemming
   en meten is dat een slechte binnenkomer. De bestanden staan nu in
   assets/fonts/; herkomst en licenties in assets/fonts/README.md.

   De unicode-ranges komen letterlijk uit de Google-CSS en horen mee te gaan bij
   elke vervanging: zij bepalen dat latin-ext alleen opgehaald wordt als een
   pagina er tekens uit nodig heeft. Fraunces is variabel over gewicht 300 tot
   900 met een optical-size-as, dus een bestand dekt alle gewichten die de site
   gebruikt. De cursieve snede is nieuw: de oude regel vroeg hem niet op terwijl
   drie pagina's <em> gebruiken, dus daar stond een scheefgetrokken rechte
   letter. font-display:swap houdt de tekst zichtbaar tijdens het laden. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-300-900-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-300-900-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-italic-300-900-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-italic-300-900-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}