.p-hoe-het-werkt .hero-photo{aspect-ratio:4/5;max-height:640px}.p-hoe-het-werkt .steps-title{max-width:16ch;margin-bottom:clamp(56px,7vw,104px)}.p-hoe-het-werkt .steps{flex-direction:column;gap:clamp(72px,9vw,144px);display:flex}.p-hoe-het-werkt .step{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(32px,6vw,112px);display:grid}.p-hoe-het-werkt .step--flip .step-copy{order:2}.p-hoe-het-werkt .step-copy h3{font-size:var(--step-head);margin-bottom:28px}.p-hoe-het-werkt .step-copy p{max-width:54ch;font-size:var(--step-lead);color:var(--on-dark-muted);line-height:1.4}.p-hoe-het-werkt .step-copy p+p{font-size:var(--step-body);margin-top:18px;line-height:1.55}.p-hoe-het-werkt .frag{background:var(--paper);width:min(360px,100%);color:var(--ink);transition:transform var(--mid) var(--ease-out);border-radius:24px;justify-self:center;padding:24px}.p-hoe-het-werkt .frag:hover{transform:rotate(-1.5deg)translateY(-4px)}.p-hoe-het-werkt .frag-head{font-weight:700;font-size:var(--step-lead);letter-spacing:-.01em}.p-hoe-het-werkt .frag-list{flex-direction:column;gap:10px;margin-top:18px;display:flex}.p-hoe-het-werkt .frag-list li{border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:6px;font-weight:500;display:flex}.p-hoe-het-werkt .frag-list li.is-on{background:var(--paper-2)}.p-hoe-het-werkt .frag-list .band{min-height:40px;font-size:var(--step-small);padding:0 26px}.p-hoe-het-werkt .frag-btn{background:var(--ink);color:var(--on-dark);text-align:center;border-radius:12px;margin-top:18px;padding:14px;font-weight:500}.p-hoe-het-werkt .frag--pass{background:var(--night-3);color:var(--on-dark);--mark-fill:var(--mango);--mark-cut:var(--night-3)}.p-hoe-het-werkt .frag-pass-top{justify-content:space-between;align-items:center;display:flex}.p-hoe-het-werkt .frag-pass-top .mark{width:36px;height:36px}.p-hoe-het-werkt .frag-pill{background:var(--mango);color:var(--ink);font-size:var(--step-small);border-radius:999px;padding:4px 12px;font-weight:500}.p-hoe-het-werkt .frag-name{font-weight:700;font-size:var(--step-lead);letter-spacing:-.01em;margin-top:20px}.p-hoe-het-werkt .frag-meta{font-size:var(--step-small);color:var(--on-dark-muted)}.p-hoe-het-werkt .frag-qr-wrap{background:var(--paper);border-radius:14px;place-items:center;margin-top:18px;padding:18px;display:grid}.p-hoe-het-werkt .qr{width:150px;height:150px}.p-hoe-het-werkt .qr rect{fill:var(--ink)}.p-hoe-het-werkt .frag--ok{background:var(--night-3);color:var(--on-dark);text-align:center;padding:36px 24px}.p-hoe-het-werkt .frag-ok-check{background:var(--lemon);width:96px;height:96px;animation:hoe-het-werkt-pulse 2.4s var(--ease-out) infinite;border-radius:50%;margin:0 auto 20px;position:relative}.p-hoe-het-werkt .frag-ok-check:after{content:"";background:var(--ink);clip-path:polygon(0 55%,14% 40%,38% 64%,86% 0,100% 14%,38% 92%);position:absolute;inset:30px 26px}@keyframes hoe-het-werkt-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.p-hoe-het-werkt .frag-ok-title{font-weight:700;font-size:var(--step-lead);letter-spacing:-.01em}.p-hoe-het-werkt .frag--ok .frag-meta{margin-top:6px}.p-hoe-het-werkt .frag-saved{background:var(--night);font-size:var(--step-small);border-radius:12px;margin-top:20px;padding:12px}.p-hoe-het-werkt .frag-saved strong{color:var(--lemon)}.p-hoe-het-werkt .night-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 48px;display:grid}.p-hoe-het-werkt .night-head h2,.p-hoe-het-werkt .night-head .lead{grid-column:1}.p-hoe-het-werkt .night-loop{grid-area:1/2/3}.p-hoe-het-werkt .night-head .lead{max-width:36ch}.p-hoe-het-werkt .night-loop{aspect-ratio:9/16;object-fit:cover;background:var(--night-2);width:min(200px,100%)}.p-hoe-het-werkt .night-stage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,72px);display:grid}.p-hoe-het-werkt .night-time{letter-spacing:-.04em;color:var(--lemon);font-variant-numeric:tabular-nums;font-size:clamp(5rem,3rem + 8vw,10rem);font-weight:700;line-height:.85}.p-hoe-het-werkt .night-scene{font-size:var(--step-head);margin-top:24px}.p-hoe-het-werkt .night-text{max-width:42ch;font-size:var(--step-lead);color:var(--on-dark-muted);min-height:6.5em;margin-top:20px;line-height:1.4}.p-hoe-het-werkt .night-photo{aspect-ratio:3/2}.p-hoe-het-werkt .night-photo img{transition:opacity .26s ease, transform 1.2s var(--ease-out)}.p-hoe-het-werkt .night-photo.is-swapping img{opacity:0;transform:scale(1.05)}.p-hoe-het-werkt .night-copy.is-swapping .night-scene,.p-hoe-het-werkt .night-copy.is-swapping .night-text{opacity:0;transform:translateY(8px)}.p-hoe-het-werkt .night-scene,.p-hoe-het-werkt .night-text{transition:opacity .22s ease, transform .32s var(--ease-out)}.p-hoe-het-werkt .night-control{margin-top:clamp(40px,5vw,64px)}.p-hoe-het-werkt .night-control input{width:100%}.p-hoe-het-werkt .night-control input::-webkit-slider-runnable-track{background:var(--night-3);height:10px}.p-hoe-het-werkt .night-ticks{font-size:var(--step-small);color:var(--on-dark-muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:8px;display:flex}.p-hoe-het-werkt .pasdemo-grid{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,5vw,80px);display:grid}.p-hoe-het-werkt .pasdemo-plate{aspect-ratio:1;position:relative}.p-hoe-het-werkt .pass{background:var(--night);width:min(300px,76%);color:var(--on-dark);--mark-fill:var(--cherry);--mark-cut:var(--night);border-radius:22px;padding:20px;position:absolute;top:50%;left:50%;translate:-50% -50%}.p-hoe-het-werkt .pass-top{justify-content:space-between;align-items:center;display:flex}.p-hoe-het-werkt .pass-top .mark{width:34px;height:34px}.p-hoe-het-werkt .pass-tier{background:var(--black-cherry);color:var(--on-dark);font-size:var(--step-small);border-radius:999px;padding:4px 12px;font-weight:500}.p-hoe-het-werkt .pass-name{font-size:var(--step-lead);letter-spacing:-.01em;margin-top:18px;font-weight:700}.p-hoe-het-werkt .pass-meta{font-size:var(--step-small);color:var(--on-dark-muted)}.p-hoe-het-werkt .pass-panel{background:var(--paper);color:var(--ink);text-align:center;font-size:var(--step-small);min-height:210px;animation:hoe-het-werkt-panel-in .32s var(--ease-out);border-radius:14px;flex-direction:column;justify-content:center;gap:8px;margin-top:16px;padding:16px;display:flex}.p-hoe-het-werkt .pass-panel[hidden]{display:none}@keyframes hoe-het-werkt-panel-in{0%{opacity:0;transform:translateY(8px)}}.p-hoe-het-werkt .pass-panel .qr{width:130px;height:130px;margin:0 auto}.p-hoe-het-werkt .pass-big{font-size:var(--step-head);letter-spacing:-.02em;font-weight:700;line-height:1}.p-hoe-het-werkt .pass-chip{background:var(--lemon);border-radius:999px;align-self:center;margin-top:8px;padding:6px 12px;font-weight:500}.p-hoe-het-werkt .pass-list{text-align:left;font-weight:500}.p-hoe-het-werkt .pass-list li{gap:12px;padding:10px 0;display:flex}.p-hoe-het-werkt .pass-list li+li{border-top:1px solid var(--paper-2)}.p-hoe-het-werkt .pass-list span{width:28px;color:var(--muted);font-weight:400}.p-hoe-het-werkt .pasdemo-copy h2{max-width:14ch}.p-hoe-het-werkt .pasdemo-tabs{flex-wrap:wrap;gap:28px;margin-top:40px;display:flex}.p-hoe-het-werkt .pasdemo-tabs button{font-size:var(--step-body);color:var(--muted);transition:color var(--fast);background:0 0;border:0;padding:8px 0;font-weight:500;position:relative}.p-hoe-het-werkt .pasdemo-tabs button:after{content:"";background:var(--cherry);transform-origin:0;height:3px;transition:transform var(--mid) var(--ease-out);position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.p-hoe-het-werkt .pasdemo-tabs button:hover,.p-hoe-het-werkt .pasdemo-tabs button[aria-selected=true]{color:var(--ink)}.p-hoe-het-werkt .pasdemo-tabs button[aria-selected=true]:after{transform:scaleX(1)}.p-hoe-het-werkt .pasdemo-tabs button:focus-visible{outline-color:var(--ink)}.p-hoe-het-werkt .pasdemo-text{margin-top:32px}.p-hoe-het-werkt .pasdemo-text h3{font-size:var(--step-lead)}.p-hoe-het-werkt .pasdemo-text p{max-width:46ch;font-size:var(--step-lead);color:var(--muted);margin-top:14px;line-height:1.4}.p-hoe-het-werkt .pasdemo-text>*{transition:opacity .22s ease, transform .32s var(--ease-out)}.p-hoe-het-werkt .pasdemo-text.is-swapping>*{opacity:0;transform:translateY(8px)}.p-hoe-het-werkt .regels-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);display:grid}.p-hoe-het-werkt .regels-list{grid-template-columns:1fr 1fr;gap:48px 56px;display:grid}.p-hoe-het-werkt .regels-list h3{font-size:var(--step-lead);letter-spacing:-.01em}.p-hoe-het-werkt .regels-list p{max-width:42ch;margin-top:12px}.p-hoe-het-werkt .veilig-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,5vw,80px);display:grid}.p-hoe-het-werkt .veilig-photo{aspect-ratio:4/5}.p-hoe-het-werkt .veilig .lead{margin-top:20px}.p-hoe-het-werkt .tips{grid-template-columns:1fr 1fr;gap:36px 48px;margin-top:48px;display:grid}.p-hoe-het-werkt .tips h3{font-size:var(--step-lead);color:var(--lemon);letter-spacing:-.01em}.p-hoe-het-werkt .tips p{color:var(--on-dark-muted);max-width:40ch;margin-top:10px}.p-hoe-het-werkt .vragen-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;display:grid}.p-hoe-het-werkt .vragen-head{top:calc(var(--bar-h) + 24px);flex-direction:column;grid-column:1/5;align-self:start;gap:40px;display:flex;position:sticky}.p-hoe-het-werkt .vragen-search{max-width:340px}.p-hoe-het-werkt .answers{columns:2;grid-column:5/13;column-gap:56px;line-height:1.55}.p-hoe-het-werkt .answers p{break-inside:avoid;color:var(--on-dark-muted);margin-bottom:22px}.p-hoe-het-werkt .answers p[hidden]{display:none}.p-hoe-het-werkt .answers b{color:var(--on-dark);font-weight:500}.p-hoe-het-werkt .answers mark{background:var(--lemon);color:var(--ink);padding:0 2px}.p-hoe-het-werkt .answers a{color:var(--lemon);text-underline-offset:3px}.p-hoe-het-werkt .faq-empty{font-size:var(--step-lead);grid-column:5/13}.p-hoe-het-werkt .faq-empty a{color:var(--lemon)}.p-hoe-het-werkt .cta-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:48px;display:grid}.p-hoe-het-werkt .cta .lead{margin-top:28px}.p-hoe-het-werkt .cta .btn{margin-top:36px}.p-hoe-het-werkt .cta-bands{flex-direction:column;align-items:flex-start;gap:18px;display:flex}.p-hoe-het-werkt .cta-bands .band{font-size:var(--step-lead);min-height:72px;transition:transform var(--mid) var(--ease-out);padding:0 44px}.p-hoe-het-werkt .cta-bands .band:first-child{transform:rotate(-4deg)}.p-hoe-het-werkt .cta-bands .band:nth-child(2){transform:rotate(3deg)translate(40px)}.p-hoe-het-werkt .cta-bands .band:nth-child(3){transform:rotate(-2deg)translate(12px)}.p-hoe-het-werkt .cta-bands:hover .band{transform:none}@media (max-width:960px){.p-hoe-het-werkt .hero-photo{aspect-ratio:16/10}.p-hoe-het-werkt .step,.p-hoe-het-werkt .night-stage,.p-hoe-het-werkt .pasdemo-grid,.p-hoe-het-werkt .regels-grid,.p-hoe-het-werkt .veilig-grid,.p-hoe-het-werkt .cta-grid{grid-template-columns:1fr}.p-hoe-het-werkt .step--flip .step-copy{order:0}.p-hoe-het-werkt .frag{justify-self:start}.p-hoe-het-werkt .night .wrap{flex-direction:column;display:flex}.p-hoe-het-werkt .night-stage{display:contents}.p-hoe-het-werkt .night-head{order:0}.p-hoe-het-werkt .night-photo{order:1;margin-top:40px}.p-hoe-het-werkt .night-control{order:2;margin-top:16px}.p-hoe-het-werkt .night-copy{order:3;margin-top:24px}.p-hoe-het-werkt .night-ticks{display:none}.p-hoe-het-werkt .night-head{grid-template-columns:1fr}.p-hoe-het-werkt .night-loop{grid-area:auto/1;width:min(180px,45%)}.p-hoe-het-werkt .vragen-head{grid-column:1/-1;margin-bottom:40px;position:static}.p-hoe-het-werkt .answers,.p-hoe-het-werkt .faq-empty{grid-column:1/-1}.p-hoe-het-werkt .veilig-photo{aspect-ratio:16/10}.p-hoe-het-werkt .pasdemo-plate{max-width:560px}}@media (max-width:640px){.p-hoe-het-werkt .regels-list,.p-hoe-het-werkt .tips{grid-template-columns:1fr;gap:32px}.p-hoe-het-werkt .answers{columns:1}.p-hoe-het-werkt .night-text{min-height:9em}.p-hoe-het-werkt .pass{width:min(270px,84%);padding:16px}.p-hoe-het-werkt .pass-panel{min-height:0}.p-hoe-het-werkt .pass-panel .qr{width:104px;height:104px}.p-hoe-het-werkt .cta .h-display{font-size:15vw}.p-hoe-het-werkt .cta-bands .band{font-size:var(--step-body);min-height:56px}.p-hoe-het-werkt .cta-bands .band:nth-child(2){transform:rotate(3deg)translate(20px)}}@media (prefers-reduced-motion:reduce){.p-hoe-het-werkt .frag-ok-check{animation:none}}.p-hoe-het-werkt .duo img{filter:none;mix-blend-mode:normal}.p-hoe-het-werkt .duo:hover img{animation:none}
