/* Ona zelfscan — sectie-CSS, lichte paginastijl (mvp2.html)
   Alle kleuren lopen via de tokens in de .oz-regel hieronder.
   Donkere variant: zie de tokens in "Ona Zelfscan (demo).html". */

/* ── Zelfscan-sectie ── */
.oz{--ink:#1d1d1b;--green:#b2ffa0;--purple:#9b8af0;--turq:#a2ffe7;--bg:#f6f6f6;--fg:#1d1d1b;--card:#fff;--surf:#fff;--surf2:#fff;--surf3:#fff;--line:rgba(29,29,27,.1);--bd:rgba(29,29,27,.16);--bd2:rgba(29,29,27,.18);--bd25:rgba(29,29,27,.25);--hov:rgba(29,29,27,.04);--fill:rgba(29,29,27,.12);--fill2:rgba(29,29,27,.16);--fill4:rgba(29,29,27,.3);--t28:rgba(29,29,27,.32);--t42:rgba(29,29,27,.45);--t45:rgba(29,29,27,.5);--t70:rgba(29,29,27,.72);--t72:rgba(29,29,27,.72);--t75:rgba(29,29,27,.8);--mut:rgba(29,29,27,.62);--mut2:rgba(29,29,27,.56);--panel:rgba(178,255,160,.28);--panelBd:rgba(29,29,27,.08);--grnBd:rgba(110,190,90,.8);--glow:radial-gradient(ellipse at center,rgba(155,138,240,.16) 0%,transparent 62%)}
.oz{background:var(--bg);color:var(--fg);position:relative;overflow:clip;padding:60px 24px}
@media(min-width:768px){.oz{padding:90px 40px}}
.oz-glow{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:min(980px,130%);height:620px;background:var(--glow);pointer-events:none}
.oz-inner{position:relative;max-width:1200px;margin:0 auto}
.oz-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:900px){.oz-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}.oz-head{position:sticky;top:48px;margin-bottom:0;padding-right:16px}}
.oz-grid-wide{grid-template-columns:minmax(0,1fr);max-width:1200px}
.oz-head{max-width:620px;margin-bottom:clamp(28px,4vw,40px)}
.oz-kicker{font-family:'Plus Jakarta Sans';font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--purple);margin-bottom:16px}
.oz-h2{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(28px,4.6vw,44px);letter-spacing:-.035em;line-height:1.07;margin-bottom:16px;text-wrap:pretty}
.oz-sub{font-weight:300;font-size:16px;line-height:1.62;color:var(--mut);text-wrap:pretty}
.oz-card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3.6vw,32px);min-height:clamp(400px,58vw,452px);display:flex;flex-direction:column;container-type:inline-size;transition:height .42s cubic-bezier(.2,.7,.2,1)}
@keyframes ozUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.oz-anim{animation:ozUp .34s cubic-bezier(.2,.7,.2,1) both}
.oz-step{display:flex;flex-direction:column;flex:1}
.oz-step-top{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.4vw,30px)}
.oz-back{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--bd2);background:transparent;color:var(--fg);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s}
.oz-back:hover{border-color:var(--t45);background:var(--hov)}
.oz-prog{flex:1;min-width:0}
.oz-prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.oz-prog-part{font-family:'Plus Jakarta Sans';font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.oz-prog-count{font-family:'Plus Jakarta Sans';font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--t45);white-space:nowrap}
.oz-prog-tracks{display:flex;gap:6px}
.oz-prog-track{height:3px;border-radius:2px;background:var(--fill);overflow:hidden}
.oz-prog-fill{height:100%;background:var(--green);border-radius:2px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.oz-q{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(21px,6cqw,28px);letter-spacing:-.025em;line-height:1.16;margin-bottom:10px;text-wrap:pretty}
.oz-help{font-size:14.5px;font-weight:300;line-height:1.55;color:var(--mut);margin-bottom:6px;max-width:48ch}
.oz-body{margin-top:18px}
.oz-footer{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.oz-footer-end{padding-top:30px}
.oz-footer-note{font-size:13px;color:var(--mut2)}
.oz-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--mut2);max-width:52ch}
/* De link naar de privacyverklaring hoort bij deze kleine regel en niet op
   te vallen: zelfde grijs als de tekst eromheen, met alleen de onderstreping
   als teken dat je erop kunt klikken. */
.oz-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.oz-note a:hover{color:var(--fg)}
.oz-choices{display:flex;flex-direction:column;gap:10px}
.oz-choices-wrap{flex-direction:row;flex-wrap:wrap}
.oz-choice{display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;min-height:56px;padding:13px 18px;text-align:left;border-radius:16px;border:1px solid var(--bd);background:var(--surf);color:var(--fg);font-family:'Plus Jakarta Sans';font-weight:600;font-size:15.5px;letter-spacing:-.012em;line-height:1.3;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.oz-choice:hover{border-color:var(--grnBd);background:var(--hov);transform:translateY(-1px)}
.oz-choice.is-on{background:var(--green);border-color:var(--green);color:var(--ink)}
.oz-choice-sub{font-family:Inter;font-weight:400;font-size:13px;color:var(--mut);letter-spacing:0}
.oz-choice.is-on .oz-choice-sub{color:rgba(29,29,27,.6)}
.oz-labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px}
.oz-lchip{min-height:48px;padding:10px 6px;border-radius:14px;border:1px solid var(--bd);background:var(--surf);color:var(--fg);font-family:'Plus Jakarta Sans';font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .18s,background .18s}
.oz-lchip:hover{border-color:var(--grnBd);background:var(--hov)}
.oz-lchip.is-on{background:var(--green);border-color:var(--green);color:var(--ink)}
.oz-lchip-wide{grid-column:1/-1;font-weight:500}
.oz-row{display:flex;gap:12px;flex-wrap:wrap}
.oz-row .oz-field{flex:1 1 150px}
.oz-field{display:block}
.oz-field-l{display:block;font-family:'Plus Jakarta Sans';font-weight:600;font-size:12.5px;color:var(--t70);margin-bottom:7px;letter-spacing:.01em}
.oz-input-wrap{position:relative;display:block}
.oz-input{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--bd);background:var(--surf2);color:var(--fg);font-family:'Plus Jakarta Sans';font-weight:600;font-size:16px;letter-spacing:-.01em;outline:none;transition:border-color .16s,box-shadow .16s}
.oz-input::placeholder{color:var(--t28);font-weight:500}
.oz-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(178,255,160,.16)}
.oz-input.is-err{border-color:#ff9b8a}
.oz-input.is-err:focus{border-color:#ff9b8a;box-shadow:0 0 0 3px rgba(255,155,138,.18)}
.oz-err{display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:#ff9b8a}
.oz-suffix{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13.5px;color:var(--mut2);pointer-events:none}
.oz-input-wrap:has(.oz-suffix) .oz-input{padding-right:96px}
.oz-source{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--mut2);max-width:46ch}
.oz-source-dot{flex:0 0 auto;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--turq)}
.oz-followup{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.oz-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 30px;border-radius:999px;border:none;background:var(--green);color:var(--ink);font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;letter-spacing:-.01em;cursor:pointer;transition:transform .2s,box-shadow .2s}
.oz-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(178,255,160,.5)}
.oz-btn:disabled{background:var(--fill);color:var(--t42);cursor:not-allowed}
.oz-btn:disabled:hover{transform:none;box-shadow:none}
.oz-btn-full{width:100%}
.oz-btn-a{text-decoration:none;color:var(--ink)}
.oz-ghost{background:none;border:none;color:var(--mut);font-family:'Plus Jakarta Sans';font-weight:600;font-size:14px;cursor:pointer;padding:12px 2px;min-height:44px;transition:color .18s;text-decoration:none;display:inline-flex;align-items:center}
.oz-ghost:hover{color:var(--fg)}
.oz-ghost-link{border-bottom:1px solid var(--bd25);padding-bottom:4px;border-radius:0;color:var(--fg)}
.oz-ghost-link:hover{border-color:var(--green)}
.oz-chip{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.oz-chip-green{background:var(--green);color:var(--ink)}
.oz-chip-turq{background:var(--turq);color:var(--ink)}
.oz-chip-neutral{background:var(--fill);color:var(--t75);box-shadow:inset 0 0 0 1px var(--bd)}
.oz-verdict{justify-content:center;padding:clamp(6px,2vw,22px) 0}
.oz-verdict .oz-chip{align-self:flex-start;margin-bottom:22px}
.oz-verdict-h{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(25px,7.6cqw,38px);letter-spacing:-.035em;line-height:1.08;max-width:22ch;margin-bottom:16px;text-wrap:pretty}
.oz-verdict-b{font-weight:300;font-size:15.5px;line-height:1.62;color:var(--mut);max-width:52ch}
.oz-result{gap:0}
.oz-result-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3cqw,44px);margin-top:0}
.oz-result-c{display:flex;flex-direction:column;gap:24px}
.oz-result-foot{margin-top:4px;display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-wrap:wrap}
@container (min-width:700px){.oz-result-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}.oz-result-c2{justify-content:flex-start;padding-top:0}.oz-result-foot .oz-cta{flex-direction:row;align-items:center;gap:22px}.oz-result-verdict{font-size:19px;max-width:44ch}}
.oz-result-top{display:flex;flex-direction:column;gap:12px}
.oz-result-top .oz-chip{align-self:flex-start}
.oz-result-verdict{font-family:'Plus Jakarta Sans';font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.3;max-width:36ch;text-wrap:pretty}
.oz-eyebrow{margin-top:0;font-family:'Plus Jakarta Sans';font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--mut2)}
.oz-stat-label{display:block;font-family:'Plus Jakarta Sans';font-weight:600;font-size:13px;letter-spacing:-.005em;color:var(--t72)}
.oz-headline{margin-top:12px}
.oz-headline .oz-stat-label{margin-bottom:8px}
.oz-amount{display:flex;align-items:baseline;gap:11px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(42px,14cqw,70px);letter-spacing:-.045em;line-height:1}
.oz-amount em{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;letter-spacing:0;color:var(--mut)}
.oz-headline-b{margin-top:16px;font-weight:300;font-size:14.5px;line-height:1.6;color:var(--mut);max-width:54ch}
.oz-nest{margin-top:22px}
.oz-nest-bar{height:14px;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--fill2);overflow:hidden}
.oz-nest-ona{height:100%;background:var(--green);border-radius:999px}
.oz-nest-legend{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.oz-nest-item{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--mut);max-width:50ch}
.oz-nest-item b{font-family:'Plus Jakarta Sans';font-weight:700;color:var(--fg);margin-right:4px}
.oz-sw{flex:0 0 auto;width:10px;height:10px;margin-top:5px;border-radius:3px}
.oz-sw-green{background:var(--green)}
.oz-sw-ghost{background:var(--bd2);box-shadow:inset 0 0 0 1px var(--fill4)}
.oz-panel{padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--panelBd)}
.oz-panel-amount{display:block;margin-top:7px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(20px,5.2cqw,26px);letter-spacing:-.03em;color:var(--fg)}
.oz-panel-b{margin-top:6px;font-size:13.5px;font-weight:300;line-height:1.55;color:var(--mut);max-width:48ch}
.oz-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.oz-cta-sub{font-size:13px;color:var(--mut2)}
.oz-promo{display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:20px;background:var(--surf3);border:1px solid var(--line)}
.oz-promo-t{display:block;font-family:'Plus Jakarta Sans';font-weight:800;font-size:19px;letter-spacing:-.025em}
.oz-promo-s{display:block;margin-top:4px;font-size:13px;color:var(--mut2)}
.oz-promo-l{list-style:none;display:flex;flex-direction:column;gap:10px}
.oz-promo-l li{display:flex;gap:11px;font-size:14px;line-height:1.45;color:var(--mut)}
.oz-promo-l li::before{content:'';flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--green)}
.oz-promo-f{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.oz-promo-p{font-family:'Plus Jakarta Sans';font-weight:800;font-size:22px;letter-spacing:-.03em}
.oz-fine{font-size:12px;line-height:1.55;color:var(--mut);max-width:56ch}

/* Laadindicator in een knop: toont dat er gewerkt wordt terwijl de knop uit staat. */
.oz-spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.65;animation:oz-spin .7s linear infinite}
@keyframes oz-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.oz-spin{animation:none;border-top-color:currentColor;opacity:.35}}

/* Twee keuzes naast elkaar, alleen op desktop. De grens van 768px is dezelfde
   die useResponsive aanhoudt, zodat lijst en layout hetzelfde omslagpunt
   gebruiken. Een oneven laatste keuze loopt over de volle breedte, anders
   staat hij er verloren bij. */
@media (min-width: 768px) {
  /* Bij een oneven aantal opties liet de laatste zich over beide kolommen
     uitrekken. Dat gaf een knop die twee keer zo breed was als de rest, dus hij
     blijft nu gewoon in zijn eigen kolom staan. */
  .oz-choices.oz-choices-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
}