/* werkwijze: CSS van de secties op /werkwijze/ (docs/prototype/werkwijze.html, inline <style>).
   De veelgestelde vragen en de afsluiter zijn gedeelde blokken (styles.css). */
/* Werkwijze: paginaspecifieke stijlen. Thema-kleuren komen uit src/site.css. */
:root{--paper:var(--color-paper);--paper-2:var(--color-paper-2);--card:var(--color-card);
  --ink:var(--color-ink);--ink-2:var(--color-ink-2);--ink-3:var(--color-ink-3);--rule:var(--color-rule);
  --accent:var(--color-accent);--accent-soft:var(--color-accent-soft);--ok:var(--color-ok);--ok-soft:var(--color-ok-soft);
  --postit:var(--color-postit);--serif:var(--font-serif);--mono:var(--font-mono);--hand:var(--font-hand);
  --c-a:#C9C0AE;--c-b:var(--color-ink);--c-c:#8FA79A;--c-d:#E2D9C8;}
/* ---------- hero: de offerte met de rode pen ---------- */
.qd{position:relative;max-width:520px;margin-inline:auto;padding:0 0 48px}
.qd-paper{position:relative;background:#fff;border-radius:6px;box-shadow:0 30px 60px -28px rgb(25 23 20 / .35),0 0 0 1px rgb(25 23 20 / .05);padding:26px 26px 22px;rotate:-1.2deg}
.qd-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:8px}
.qd-top b{font-family:var(--serif);font-size:28px}
.qd-top span{font-family:var(--serif);font-weight:700}
.qd-sub{font-size:13px;color:var(--ink-3);margin:6px 0 14px}
.qd-row{display:grid;grid-template-columns:8.6em 1fr;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #EEE9DF;font-size:14px}
.qd-row > span{font-weight:600}
.qd-track{position:relative;height:16px}
.qd-bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:4px;background:var(--c)}
.qd-old{transition:opacity .5s 1.6s}
.qd-new{background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1) 1.9s}
.qd-strike{position:absolute;left:-2%;top:-6px;width:104%;height:26px;overflow:visible}
.qd-strike path{fill:none;stroke:#C0392B;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease 1s}
.qd-total{display:flex;justify-content:space-between;padding-top:12px;font-weight:700;font-size:14px}
.qd-hand{position:absolute;font-family:var(--hand);color:var(--accent);font-size:19px;line-height:1.15;opacity:0;transition:opacity .6s var(--d,0s),transform .6s var(--d,0s);transform:translateY(6px)}
.qd-hand.qd-inline{position:static;grid-column:2;margin-top:-4px}
.qd-hand.blue{color:var(--color-blueprint)}
.qd.play .qd-old{opacity:.28}
.qd.play .qd-new{transform:none}
.qd.play .qd-strike path{stroke-dashoffset:0}
.qd.play .qd-hand{opacity:1;transform:none}
.qd-brace{position:absolute;right:-6px;width:12px;border:2px solid var(--color-blueprint);border-left:0;border-radius:0 10px 10px 0;opacity:0;transition:opacity .6s 2.6s}
.qd.play .qd-brace{opacity:.8}
@media (max-width:640px){
.qd-paper{padding:20px 16px 18px}
.qd-row{grid-template-columns:7em 1fr;font-size:13px}
.qd-hand{font-size:16px}
}
/* ---------- stappen: meter "hulp van AI" per stap ---------- */
.meter{display:flex;gap:4px}
.meter i{width:22px;height:8px;border-radius:2px;background:var(--rule)}
.meter i.on{background:var(--accent)}
/* ---------- review: van voorstel tot goedkeuring ---------- */
.rv{background:#fff;border-radius:16px;box-shadow:0 30px 60px -25px rgb(25 23 20 / .3),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden;font-size:13px}
.rv-h{padding:12px 16px;border-bottom:1px solid #EEE;display:flex;justify-content:space-between;gap:10px;color:var(--ink-3);font-size:12px}
.rv-state{font-weight:700}
.rv-track{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:12px 16px;border-bottom:1px solid #EEE}
.rv-track span{font-size:11px;font-weight:700;color:var(--ink-3);padding-top:7px;border-top:3px solid #EEE9DF;transition:color .3s,border-color .3s}
.rv[data-s="1"] .rv-track span:nth-child(-n+1),
.rv[data-s="2"] .rv-track span:nth-child(-n+2),
.rv[data-s="3"] .rv-track span:nth-child(-n+3),
.rv[data-s="4"] .rv-track span{color:var(--ink);border-color:var(--accent)}
.rv[data-s="4"] .rv-track span{border-color:var(--ok)}
.rv-code{font-family:var(--mono);font-size:12.5px;padding:10px 0}
.rv .ln{padding:3px 16px;white-space:pre;opacity:0;transform:translateY(4px);transition:opacity .4s var(--d,0s),transform .4s var(--d,0s),background .4s}
.rv .ln.add{background:#EEF7F0}
.rv .ln.del{background:#FBECE8;color:#9A4A3A}
.rv .ln .ai{font-family:var(--font-sans);font-size:10px;font-weight:700;color:var(--ink-3);margin-left:10px}
.rv .fix{display:none}
.rv .ln.del{text-decoration:none}
.rv-c{margin:6px 16px 12px;padding:12px;border-radius:10px;background:var(--paper);display:flex;gap:10px;font-size:13px;opacity:0;transform:translateY(8px);transition:all .5s}
.rv-av{width:30px;height:30px;border-radius:50%;flex:none;background:repeating-linear-gradient(135deg,#E4DCCD 0 5px,#DDD4C3 5px 10px)}
.rv-tests{margin:0 16px 12px;border:1px solid #EEE;border-radius:10px;padding:4px 0;opacity:0;transition:opacity .4s}
.rv-tests div{display:flex;align-items:center;gap:10px;padding:5px 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rv-tests i{font-style:normal;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex:none;transition:background .3s var(--d,0s),border-color .3s var(--d,0s)}
.rv-tests em{margin-left:auto;font-style:normal;font-family:var(--font-sans);font-size:10px;font-weight:700;color:var(--accent)}
.rv-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #EEE}
.rv-f small{color:var(--ink-3);font-size:12px;opacity:0;transition:opacity .4s .5s}
.rv-ok{font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--ok);border:2px solid var(--ok);padding:4px 10px;border-radius:6px;transform:rotate(-4deg) scale(1.6);opacity:0;transition:all .35s cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
/* stap 1: voorstel */
.rv[data-s="1"] .ln.v,.rv[data-s="2"] .ln.v,.rv[data-s="3"] .ln.v,.rv[data-s="4"] .ln.v{opacity:1;transform:none}
/* stap 2: review met opmerking, de fout wordt aangepast */
.rv[data-s="2"] .rv-c,.rv[data-s="3"] .rv-c,.rv[data-s="4"] .rv-c{opacity:1;transform:none}
.rv[data-s="2"] .ln.bad,.rv[data-s="3"] .ln.bad,.rv[data-s="4"] .ln.bad{text-decoration:line-through;background:#FBECE8;color:#9A4A3A}
.rv[data-s="2"] .fix,.rv[data-s="3"] .fix,.rv[data-s="4"] .fix{display:block}
.rv[data-s="2"] .fix,.rv[data-s="3"] .fix,.rv[data-s="4"] .fix{opacity:1;transform:none}
/* stap 3: tests */
.rv[data-s="3"] .rv-tests,.rv[data-s="4"] .rv-tests{opacity:1}
.rv[data-s="3"] .rv-tests i,.rv[data-s="4"] .rv-tests i{background:var(--ok);border-color:var(--ok)}
.rv[data-s="3"] .rv-tests i::after,.rv[data-s="4"] .rv-tests i::after{content:"✓"}
/* stap 4: goedgekeurd */
.rv[data-s="4"] .rv-ok{opacity:1;transform:rotate(-4deg) scale(1)}
.rv[data-s="4"] .rv-f small{opacity:1}
.rv-steps li{transition:opacity .3s}
.rv-steps[data-s] li{opacity:.45}
.rv-steps[data-s="1"] li:nth-child(1),.rv-steps[data-s="2"] li:nth-child(2),.rv-steps[data-s="3"] li:nth-child(3),.rv-steps[data-s="4"] li:nth-child(4){opacity:1}
.rv-steps .n{transition:background .3s,color .3s}
.rv-steps[data-s="1"] li:nth-child(1) .n,.rv-steps[data-s="2"] li:nth-child(2) .n,.rv-steps[data-s="3"] li:nth-child(3) .n,.rv-steps[data-s="4"] li:nth-child(4) .n{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:640px){
.rv .ln,.rv-code{font-size:10.5px}
.rv-track span{font-size:9.5px}
}
/* ---------- stappen: scènes uit de homepage ---------- */
.ps-stage{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--rule);container-type:inline-size;box-shadow:0 30px 60px -30px rgb(25 23 20 / .35)}
.ps-nav{position:relative}
.ps-nav::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:var(--rule)}
.ps-item.is-done .ps-dot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ps-item.is-done .ps-title{color:var(--ink)}
.scene{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none;font-size:clamp(8px,2.2cqw,15px);line-height:1.35;overflow:hidden}
.scene.on{opacity:1;transform:none}
.scene .a{opacity:0;transform:translateY(.8em);transition:opacity .5s var(--d,0s),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.scene.on .a{opacity:1;transform:none}
.scene .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease var(--d,0s)}
.scene.on .draw{stroke-dashoffset:0}
.scene .ph{border-radius:50%}
/* scène 1: aan tafel */
.sc1{background-color:#E2CDAE;background-image:repeating-linear-gradient(91deg,rgba(120,80,40,.07) 0 2px,transparent 2px 23px),repeating-linear-gradient(89deg,rgba(255,255,255,.1) 0 1px,transparent 1px 41px)}
.sc1 .cup{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:#F7F4EE;box-shadow:0 .5em 1.2em rgba(60,40,20,.25)}
.sc1 .cup::before{content:"";position:absolute;inset:14%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .25em #EDE7DD}
.sc1 .cup i{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle at 38% 35%,#8A5A35,#4A2C17 70%)}
.sc1 .cup::after{content:"";position:absolute;right:3%;top:44%;width:13%;height:12%;border-radius:40%;background:#fff;box-shadow:0 0 0 .12em #E3DCD0}
.sc1 .nb{position:absolute;left:33%;top:12%;width:60%;height:80%;rotate:-2deg;border-radius:.3em;box-shadow:0 1.2em 2.4em rgba(60,40,20,.25);background-color:#FDFCF7;background-image:linear-gradient(90deg,transparent 10%,#E9A6A0 10%,#E9A6A0 calc(10% + 1px),transparent 0),repeating-linear-gradient(transparent 0 1.6em,#D7E3EC 1.6em calc(1.6em + 1px));padding:.9em 1.1em 1em 13%}
.sc1 .nb-head{font-family:var(--hand);font-size:1.25em;color:#2B3F86}
.sc1 .nb svg{width:100%;height:auto;overflow:visible}
.sc1 .ink{fill:none;stroke:#2B3F86;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc1 .red{fill:none;stroke:#C0392B;stroke-width:2;stroke-linecap:round}
.sc1 svg text{font-family:var(--hand);font-size:13px;fill:#2B3F86}
.sc1 .postit{position:absolute;left:5%;bottom:8%;width:22%;aspect-ratio:1.1;background:var(--postit);padding:.7em;font-family:var(--hand);font-size:1.05em;line-height:1.2;box-shadow:0 .6em 1em rgba(60,40,20,.2);rotate:7deg}
.sc1 .pen{position:absolute;left:27%;top:52%;width:2%;height:34%;border-radius:1em;background:linear-gradient(90deg,#1F2A44,#3B4E7A);rotate:24deg;box-shadow:.3em .4em .6em rgba(0,0,0,.2)}
/* scène 2: het voorstel */
.sc2{background:var(--paper-2)}
.sc2 .doc{position:absolute;left:11%;right:11%;top:7%;bottom:7%;background:#fff;border-radius:.4em;box-shadow:0 1.5em 3em -1em rgba(25,23,20,.3);padding:1.5em 1.8em;display:flex;flex-direction:column}
.sc2 .doc-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:.5em;margin-bottom:.4em}
.sc2 .doc-top b{font-family:var(--serif);font-size:1.9em}
.sc2 .doc-top span{font-family:var(--serif);font-weight:700;font-size:1em}
.sc2 .doc-sub{font-size:.95em;color:var(--ink-3);margin-bottom:.5em}
.sc2 .phase{display:grid;grid-template-columns:4.2em 1fr auto;gap:.35em .8em;align-items:center;padding:.6em 0;border-bottom:1px solid #EEE9DF}
.sc2 .ph-n{font-weight:700;color:var(--accent);font-size:.85em}
.sc2 .ph-t{font-weight:600}
.sc2 .ph-p{font-size:.85em;color:var(--ink-3)}
.sc2 .gt{grid-column:2/4;height:.45em;background:#F1ECE3;border-radius:1em;position:relative;overflow:hidden}
.sc2 .gt i{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);background:var(--ink);border-radius:1em;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1) var(--d2)}
.sc2.on .gt i{transform:scaleX(1)}
.sc2 .axis{display:flex;justify-content:space-between;margin:.35em 0 0 5em;font-size:.75em;color:var(--ink-3)}
.sc2 .total{display:flex;justify-content:space-between;align-items:center;margin-top:.7em;padding-top:.6em;border-top:2px solid var(--ink);font-weight:700}
.sc2 .doc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:1em}
.sc2 .sign svg{width:9em;height:3em;overflow:visible}
.sc2 .sign path{fill:none;stroke:#2B3F86;stroke-width:2;stroke-linecap:round}
.sc2 .sign span{display:block;border-top:1px solid var(--ink-3);font-size:.8em;color:var(--ink-3);padding-top:.2em}
.sc2 .stamp2{font-weight:800;letter-spacing:.12em;color:var(--ok);border:.18em solid var(--ok);padding:.2em .6em;border-radius:.3em;font-size:1.25em;rotate:-8deg;opacity:0;scale:1.8;transition:opacity .2s var(--d),scale .35s cubic-bezier(.3,1.6,.5,1) var(--d)}
.sc2.on .stamp2{opacity:1;scale:1}
/* scène 3: eerste demo */
.sc3{background:linear-gradient(#EFE9DE,#E4DCCD)}
.sc3 .laptop{position:absolute;left:11%;right:11%;top:8%}
.sc3 .screen{position:relative;aspect-ratio:16/10;background:#1D1C1A;border-radius:.8em .8em .2em .2em}
.sc3 .app{position:absolute;inset:3.5%;background:#fff;border-radius:.3em;overflow:hidden}
.sc3 .app-bar{display:flex;justify-content:space-between;align-items:center;padding:.6em 1em;border-bottom:1px solid #EEE;font-weight:700}
.sc3 .app-bar span{font-weight:500;font-size:.85em;color:var(--ink-3)}
.sc3 .r3{display:grid;grid-template-columns:1fr 3.6em 5.4em;gap:.6em;align-items:center;padding:.55em 1em;border-bottom:1px solid #F2EEE7}
.sc3 .c{position:relative;height:1.3em}
.sc3 .wf{position:absolute;top:.25em;bottom:.25em;left:0;background:#E9E4DA;border-radius:.3em;transition:opacity .4s var(--d)}
.sc3 .rl{position:absolute;inset:0;white-space:nowrap;opacity:0;transition:opacity .4s var(--d);font-size:.92em}
.sc3.on .wf{opacity:0}
.sc3.on .rl{opacity:1}
.sc3 .pill3{display:inline-block;padding:.05em .6em;border-radius:1em;font-size:.82em;font-weight:700;background:#F1ECE3;color:var(--ink-3)}
.sc3 .btnv,.sc3 .okv{position:absolute;inset:0;display:flex;align-items:center;opacity:0}
.sc3 .btnv span{background:var(--ink);color:#fff;padding:.1em .7em;border-radius:1em;font-size:.82em;font-weight:700}
.sc3 .okv span{background:var(--ok-soft);color:var(--ok);padding:.1em .7em;border-radius:1em;font-size:.82em;font-weight:700}
.sc3.on .btnv{animation:btnv 3.4s forwards}
.sc3.on .okv{animation:okv 3.4s forwards}
@keyframes btnv{0%,30%{opacity:0}38%,82%{opacity:1;transform:none}85%{transform:scale(.88)}90%,100%{opacity:0}}
@keyframes okv{0%,88%{opacity:0}94%,100%{opacity:1}}
.sc3 .cursor{position:absolute;width:1.5em;left:62%;top:96%;opacity:0;z-index:3}
.sc3.on .cursor{animation:cur 3.4s forwards}
@keyframes cur{0%,30%{opacity:0;left:62%;top:96%}38%{opacity:1;left:62%;top:96%}78%{left:84%;top:20%;transform:none}84%{transform:scale(.8)}88%{transform:none}100%{opacity:1;left:84%;top:20%}}
.sc3 .toast3{position:absolute;right:5%;bottom:7%;background:var(--ok);color:#fff;font-weight:700;font-size:.85em;padding:.5em .9em;border-radius:.6em;opacity:0}
.sc3.on .toast3{animation:t3 3.8s forwards}
@keyframes t3{0%,88%{opacity:0;transform:translateY(.6em)}100%{opacity:1;transform:none}}
.sc3 .base{height:.9em;margin:0 -7%;background:linear-gradient(#DDD8CF,#B9B3A8);border-radius:0 0 1em 1em;position:relative}
.sc3 .base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:35%;background:#A9A398;border-radius:0 0 .5em .5em}
.sc3 .hnote{position:absolute;left:6%;bottom:5%;font-family:var(--hand);color:var(--accent);font-size:1.3em;rotate:-3deg}
/* scène 4: live */
.sc4{background:#F1EEE7}
.sc4 svg.links{position:absolute;inset:0;width:100%;height:100%}
.sc4 .links path{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sc4 .switch{position:absolute;left:50%;top:6%;translate:-50% 0;display:flex;align-items:center;gap:.7em;background:#fff;padding:.6em 1.1em;border-radius:3em;box-shadow:0 .6em 1.4em rgba(25,23,20,.12);font-weight:700;z-index:2}
.sc4 .sw-l{color:var(--ink-3);font-size:.9em}
.sc4 .sw-track{width:3.4em;height:1.8em;border-radius:2em;background:#CFC8BA;position:relative;transition:background .3s .9s}
.sc4 .sw-track i{position:absolute;top:.2em;left:.2em;width:1.4em;height:1.4em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1) .9s}
.sc4.on .sw-track{background:var(--ok)}
.sc4.on .sw-track i{transform:translateX(1.6em)}
.sc4 .sw-live{color:var(--ink-3);transition:color .3s 1s}
.sc4.on .sw-live{color:var(--ok)}
.sc4 .dev{position:absolute;z-index:1}
.sc4 .tab4{left:4%;top:31%;width:31%;aspect-ratio:4/3;background:#232220;border-radius:.8em;padding:4%}
.sc4 .mon4{left:38%;top:29%;width:33%}
.sc4 .mon4 .scr{aspect-ratio:16/10;background:#232220;border-radius:.5em;padding:3%}
.sc4 .mon4 .stand{width:18%;height:.9em;margin:0 auto;background:#B9B3A8}
.sc4 .mon4 .foot{width:40%;height:.3em;margin:0 auto;background:#A9A398;border-radius:1em}
.sc4 .ph4{left:76%;top:24%;width:18%;aspect-ratio:9/17;background:#232220;border-radius:1.2em;padding:5% 4%}
.sc4 .in{width:100%;height:100%;background:#fff;border-radius:.4em;padding:.5em;font-size:.8em;display:flex;flex-direction:column;gap:.4em}
.sc4 .in b{font-size:.95em}
.sc4 .chk{width:2.6em;height:2.6em;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3em;margin:.2em auto 0}
.sc4 .bars4{display:flex;align-items:flex-end;gap:6%;flex:1;padding-top:.3em}
.sc4 .bars4 i{flex:1;background:var(--accent);border-radius:.2em .2em 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.2,.8,.2,1) var(--d)}
.sc4.on .bars4 i{transform:scaleY(1)}
.sc4 .notif4{background:var(--ink);color:#fff;border-radius:.5em;padding:.45em;font-size:.9em}
.sc4 .team4{position:absolute;left:4%;right:4%;bottom:5%;display:flex;align-items:center;gap:.9em;background:#fff;border-radius:1em;padding:.7em 1em;box-shadow:0 .4em 1em rgba(25,23,20,.08)}
.sc4 .team4 b{font-family:var(--serif);font-size:1.1em}
.sc4 .team4 small{color:var(--ink-3);margin-left:auto;font-size:.85em}
.sc4 .av{position:relative;width:2.4em;height:2.4em;border-radius:50%;background:repeating-linear-gradient(135deg,#E4DCCD 0 4px,#DDD4C3 4px 8px)}
.sc4 .av::after{content:"✓";position:absolute;right:-.3em;bottom:-.2em;width:1.2em;height:1.2em;border-radius:50%;background:var(--ok);color:#fff;font-size:.7em;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;opacity:0;scale:.3;transition:opacity .2s var(--d),scale .3s cubic-bezier(.3,1.6,.5,1) var(--d)}
.sc4.on .av::after{opacity:1;scale:1}
/* scène 5: verder bouwen */
.sc5{background:var(--card)}
.sc5 .log{position:absolute;left:5%;top:8%;width:56%}
.sc5 .log h4{font-family:var(--serif);font-size:1.35em;margin:0 0 .6em}
.sc5 .log-e{display:grid;grid-template-columns:3.2em 1fr auto;gap:.6em;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:.6em;padding:.6em .8em;margin-bottom:.5em}
.sc5 .v{font-family:var(--mono);font-size:.8em;color:var(--ink-3)}
.sc5 .t{font-weight:600;font-size:.95em}
.sc5 .sz{font-size:.75em;font-weight:700;padding:.15em .6em;border-radius:1em;background:var(--ok-soft);color:var(--ok)}
.sc5 .sz.m{background:#FCEBC5;color:#8A6A12}
.sc5 .sz.g{background:var(--accent-soft);color:var(--accent)}
.sc5 .was{font-family:var(--hand);color:var(--accent);font-size:1.1em;margin:-.2em 0 .5em .4em}
.sc5 .stack{position:absolute;right:5%;bottom:13%;width:33%;display:flex;flex-direction:column-reverse;align-items:center;gap:.3em}
.sc5 .blk{width:var(--w);padding:.55em .4em;border-radius:.4em;text-align:center;font-size:.8em;font-weight:700;color:#fff;background:var(--c);opacity:0;transform:translateY(-10em);transition:opacity .2s var(--d),transform .55s cubic-bezier(.3,1.35,.5,1) var(--d)}
.sc5.on .blk{opacity:1;transform:none}
.sc5 .blk.base5{opacity:1;transform:none;transition:none}
.sc5 .stack-l{position:absolute;right:5%;bottom:5%;width:33%;text-align:center;font-family:var(--hand);font-size:1.15em;color:var(--ink-2)}
/* ---------- oplevering: de opleverbon ---------- */
.bon{position:relative;background:#FDFCF7;border:1px dashed #BDB5A5;box-shadow:0 24px 48px -24px rgb(25 23 20 / .3);padding:26px 26px 30px;font-family:var(--mono);font-size:13px;rotate:1deg;max-width:480px;margin-inline:auto}
.bon h3{font-family:var(--mono);font-size:15px;letter-spacing:.12em;font-weight:700}
.bon ul{list-style:none;margin:16px 0 0;padding:0}
.bon li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:9px 0;border-bottom:1px dotted #CFC7B8;line-height:1.45}
.bon .box{width:16px;height:16px;border:1.5px solid var(--ink-2);border-radius:2px;margin-top:2px;position:relative}
.bon .box::after{content:"";position:absolute;left:3px;top:-4px;width:7px;height:14px;border:solid var(--color-blueprint);border-width:0 2.5px 2.5px 0;rotate:40deg;opacity:0;transition:opacity .3s var(--d,0s)}
.bon.play .box::after{opacity:1}
.bon .sig{font-family:var(--hand);font-size:24px;color:var(--color-blueprint);margin-top:18px;opacity:0;transition:opacity .6s 1.6s}
.bon.play .sig{opacity:1}
.bon .sig-l{font-family:var(--font-sans);font-size:11px;color:var(--ink-3);border-top:1px solid var(--ink-3);display:inline-block;padding-top:2px;min-width:180px}
.bon .coffee{position:absolute;right:22px;bottom:18px;width:70px;height:70px;border-radius:50%;border:7px solid rgb(140 90 40 / .14)}
/* tooltip in onze kleuren */
.tip{position:absolute;z-index:20;width:max-content;max-width:260px;border-radius:10px;background:var(--ink);color:var(--paper);padding:8px 12px;font-size:13px;line-height:1.4;font-weight:400}
.term{border-bottom:1.5px dotted var(--ink-3);cursor:help}

/* scène: ontwerp, schermen met opmerkingen en een stempel */
.sc6{background:linear-gradient(#EEF0EA,#E3E6DE)}
.sc6 .board{position:absolute;left:8%;right:8%;top:7%;bottom:7%;background:#fff;border-radius:.4em;box-shadow:0 1.5em 3em -1em rgba(25,23,20,.3);padding:1.2em 1.4em;display:flex;flex-direction:column;gap:.8em}
.sc6 .b-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:.4em}
.sc6 .b-top b{font-family:var(--serif);font-size:1.7em}
.sc6 .b-top span{font-size:.85em;color:var(--ink-3)}
.sc6 .mock{position:relative;flex:1;border:1px solid #E6E0D5;border-radius:.4em;display:flex;flex-direction:column;background:#FBFAF7}
.sc6 .m-bar{display:flex;gap:.3em;padding:.45em .6em;border-bottom:1px solid #EEE9DF}
.sc6 .m-bar i{width:.5em;height:.5em;border-radius:50%;background:#DDD6CA}
.sc6 .m-body{flex:1;display:grid;grid-template-columns:22% 1fr}
.sc6 .m-side{border-right:1px solid #EEE9DF;padding:.7em .6em;display:flex;flex-direction:column;gap:.5em}
.sc6 .m-side i,.sc6 .m-rows i,.sc6 .m-h{display:block;height:.55em;border-radius:.3em;background:#E9E4DA}
.sc6 .m-side i:first-child{background:var(--accent);opacity:.7}
.sc6 .m-main{padding:.7em .9em;display:flex;flex-direction:column;gap:.6em}
.sc6 .m-h{width:45%;height:.8em;background:#D9D2C5}
.sc6 .m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.sc6 .m-cards i{height:2.4em;border-radius:.35em;background:#F1ECE3;border:1px solid #E6E0D5}
.sc6 .m-rows{display:flex;flex-direction:column;gap:.45em}
.sc6 .m-rows i:nth-child(2){width:85%}
.sc6 .m-rows i:nth-child(3){width:70%}
.sc6 .m-btn{align-self:flex-end;margin-top:auto;background:var(--ink);color:#fff;font-weight:700;font-size:.8em;padding:.35em .9em;border-radius:1em;transition:padding .5s ease 1.9s,font-size .5s ease 1.9s}
.sc6.on .m-btn{padding:.6em 1.4em;font-size:1em}
.sc6 .pin{position:absolute;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;background:#C0392B;color:#fff;font-weight:800;font-size:.8em;display:flex;align-items:center;justify-content:center;box-shadow:0 .3em .6em rgba(0,0,0,.2)}
.sc6 .notes{display:grid;gap:.3em}
.sc6 .note{margin:0;font-family:var(--hand);font-size:1.1em;line-height:1.25;color:#2B3F86;display:flex;gap:.5em;align-items:baseline}
.sc6 .note b{font-family:var(--sans,system-ui);font-size:.65em;background:#C0392B;color:#fff;border-radius:50%;width:1.6em;height:1.6em;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sc6 .ok{color:var(--ok);font-family:var(--sans,system-ui);font-weight:800}
.sc6 .stamp3{position:absolute;right:13%;top:38%;font-weight:800;letter-spacing:.12em;color:var(--ok);border:.18em solid var(--ok);padding:.2em .6em;border-radius:.3em;font-size:1.15em;rotate:-8deg;background:rgba(255,255,255,.88);opacity:0;scale:1.8;transition:opacity .2s var(--d),scale .35s cubic-bezier(.3,1.6,.5,1) var(--d)}
.sc6.on .stamp3{opacity:1;scale:1}

.ps-nav{grid-template-columns:repeat(var(--step-count,6),minmax(0,1fr))}
@media(max-width:1023px){.ps-nav .ps-title{font-family:var(--font-sans);font-size:13px;overflow-wrap:anywhere}}
@media(max-width:639px){.ps-nav{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.ps-nav::before{display:none}.ps-nav .ps-title{font-size:12px}}