/** Shopify CDN: Minification failed

Line 561:55 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:actie-korting (INDEX:0) */
.zv-actie {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --indigo-soft:#efecf7; --paper:#fffdf8;
  --cream:#fdfaf2; --band:#f4f0e6; --gold:#e4a311; --gold-lt:#f5c84a; --gold-soft:#fbf0d4; --belt:#9c6c08;
  --line:#e7e0cf; --line-2:#dcd2bd; --muted:#6f6786; --muted-2:#8c84a6; --danger:#c52e2f;
  color:var(--ink); line-height:1.5;
}
.zv-actie .wrap { max-width:1080px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-actie .btn { font-weight:800; font-size:14.5px; border:none; border-radius:12px; padding:13px 20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s; white-space:nowrap; }
.zv-actie .btn svg { width:16px; height:16px; }
.zv-actie .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -14px rgba(180,126,10,.85); }
.zv-actie .btn--gold:hover { transform:translateY(-2px); }
.zv-actie .btn--ghost-light { color:#fff; border:1.5px solid rgba(255,255,255,.4); background:transparent; }
.zv-actie .btn--ghost-light:hover { background:rgba(255,255,255,.12); }
.zv-actie a:focus-visible, .zv-actie button:focus-visible { outline:2px solid var(--gold-lt); outline-offset:2px; }

.zv-actie .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.34) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 4% 102%,rgba(0,80,159,.5) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,60px); }
.zv-actie .page-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); }
.zv-actie .page-hero .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-actie .page-hero h1 { color:#fff; font-size:clamp(30px,4vw,50px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:14px; max-width:22ch; text-wrap:balance; }
.zv-actie .page-hero .sub { font-size:clamp(16px,1.5vw,19px); font-weight:500; color:#e4dffb; margin-top:16px; max-width:56ch; line-height:1.5; }
.zv-actie .hero-cta { display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; }

.zv-actie .grp { background:var(--cream); padding:clamp(30px,4vw,56px) 0; }
.zv-actie .grp.alt { background:var(--paper); }
.zv-actie .grp-lead { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--belt); margin-bottom:8px; }
.zv-actie .grp h2 { font-size:clamp(22px,2.6vw,32px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-actie .grp .sub { font-size:15.5px; font-weight:500; color:var(--muted); margin-top:10px; max-width:60ch; line-height:1.55; }
.zv-actie .fine { font-size:12.5px; font-weight:500; color:var(--muted-2); margin-top:26px; max-width:70ch; line-height:1.5; }

.zv-actie .pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
@media (max-width:900px) { .zv-actie .pgrid { grid-template-columns:1fr; } }

.zv-actie .help { margin-top:6px; background:var(--indigo-deep); color:#fff; border-radius:20px; padding:clamp(28px,3.5vw,46px); text-align:center; position:relative; overflow:hidden; }
.zv-actie .help::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; left:-140px; bottom:-180px; background:radial-gradient(circle,rgba(0,80,159,.4),transparent 60%); }
.zv-actie .help h3 { font-size:clamp(22px,2.4vw,30px); font-weight:900; letter-spacing:-.015em; position:relative; }
.zv-actie .help p { font-size:16px; color:#d8d2ef; margin:12px auto 0; max-width:52ch; line-height:1.55; position:relative; }
.zv-actie .help .row { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:24px; position:relative; }

.zv-actie .acard { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 24px; box-shadow:0 20px 48px -44px rgba(26,18,48,.5); display:flex; flex-direction:column; position:relative; }
.zv-actie .acard.pop { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold),0 18px 44px -22px rgba(180,126,10,.4); }
.zv-actie .acard__flag { align-self:flex-start; margin-bottom:12px; color:var(--belt); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--gold-soft); border-radius:999px; padding:4px 11px; }
.zv-actie .acard h3 { font-size:21px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; }
.zv-actie .acard__hook { font-size:14px; font-weight:500; color:var(--muted); margin-top:6px; line-height:1.5; min-height:2.6em; }
.zv-actie .acard__price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:16px; }
.zv-actie .acard__price .now { font-size:27px; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.zv-actie .acard__price .per { font-size:13px; font-weight:700; color:var(--muted); }
.zv-actie .acard__price .was { font-size:14px; font-weight:700; color:var(--muted-2); text-decoration:line-through; }
.zv-actie .acard__period { flex-basis:100%; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--belt, var(--muted)); }
.zv-actie .acard__once { font-size:12.5px; font-weight:700; color:var(--muted); }
.zv-actie .acard__after { margin-top:6px; font-size:14.5px; font-weight:700; color:#5b5374; }
.zv-actie .acard__after .per { font-size:13px; font-weight:700; color:var(--muted); }
.zv-actie .acard__badge { display:inline-block; align-self:flex-start; margin-top:8px; font-size:11.5px; font-weight:800; color:#fff; background:var(--danger); border-radius:999px; padding:4px 11px; }
.zv-actie .acard .btn--ghost { background:transparent; color:var(--indigo); border:1.6px solid var(--line-2); margin-top:20px; }
.zv-actie .acard .btn--ghost:hover { border-color:var(--indigo); }
/* END_SECTION:actie-korting */

/* START_SECTION:betaling-mislukt (INDEX:3) */
.zv-payfail {
  --ink:#1a1230; --indigo:#322469; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --line:#e7e0cf; --muted:#6f6786; --rood:#e24b4a;
  color:var(--ink); line-height:1.5;
  background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-payfail .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-payfail .pf { display:flex; align-items:center; padding:clamp(40px,6vw,90px) 0; }
.zv-payfail .pf-card { max-width:620px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:clamp(30px,4vw,52px); box-shadow:0 34px 74px -46px rgba(26,18,48,.55); text-align:center; }
.zv-payfail .pf-ic { width:84px; height:84px; border-radius:50%; background:rgba(226,75,74,.12); color:var(--rood); display:grid; place-items:center; margin:0 auto 22px; }
.zv-payfail .pf-ic svg { width:44px; height:44px; }
.zv-payfail .pf-card h1 { font-size:clamp(26px,3.2vw,38px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.05; }
.zv-payfail .pf-card p.lead { font-size:16.5px; font-weight:500; color:#5b5374; margin:14px auto 0; max-width:46ch; line-height:1.6; }
.zv-payfail .pf-ref { display:inline-flex; align-items:center; gap:9px; margin-top:20px; background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:700; color:var(--muted); }
.zv-payfail .pf-ref b { color:var(--ink); font-weight:900; }
.zv-payfail .pf-reasons { text-align:left; background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-top:26px; }
.zv-payfail .pf-reasons h3 { font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--indigo); margin-bottom:12px; }
.zv-payfail .pf-reasons ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.zv-payfail .pf-reasons li { position:relative; padding-left:26px; font-size:14.5px; font-weight:600; color:#5b5374; line-height:1.5; }
.zv-payfail .pf-reasons li::before { content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; border:2px solid var(--gold); }
.zv-payfail .pf-cta { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.zv-payfail .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; padding:14px 24px; }
.zv-payfail .btn svg { width:18px; height:18px; }
.zv-payfail .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-payfail .btn--gold:hover { filter:brightness(1.03); }
.zv-payfail .btn--ghost { background:transparent; color:var(--indigo); border:1.5px solid var(--line); }
.zv-payfail .btn--ghost:hover { background:var(--cream); }
.zv-payfail .pf-help { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--muted); }
.zv-payfail .pf-help a { font-weight:800; }
.zv-payfail .pf-help .call { display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:900; color:var(--indigo); margin-top:8px; text-decoration:none; }
.zv-payfail .pf-help .call svg { width:18px; height:18px; }
/* END_SECTION:betaling-mislukt */

/* START_SECTION:borg (INDEX:4) */
.zv-borg {
  --ink:#1a1230; --indigo:#322469; --gold:#E4A311; --blue:#00509F; --canvas:#f7efe0; --paper:#fffdf8;
  --line:#e6dcc6; --muted:#6f6786;
  background:var(--canvas); color:var(--ink);
}
.zv-borg .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
@media(max-width:720px){ .zv-borg .wrap{ padding:0 20px; } }
.zv-borg .eyebrow { font-size:12px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--blue); display:inline-block; }
.zv-borg h1 { font-size:clamp(28px,4vw,38px); font-weight:900; letter-spacing:-.015em; color:var(--indigo); line-height:1.08; margin-top:12px; }
.zv-borg .lead { font-size:16.5px; font-weight:500; color:#473f5e; line-height:1.62; margin-top:18px; }

.zv-borg .btn { font-weight:800; font-size:14.5px; border:none; border-radius:999px; padding:14px 24px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; text-align:center; transition:transform .15s,box-shadow .15s; white-space:normal; }
.zv-borg .btn--blue { background:var(--blue); color:#fff; box-shadow:0 10px 26px -12px rgba(0,80,159,.6); }
.zv-borg .btn--blue:hover { transform:translateY(-2px); }
.zv-borg .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -12px rgba(180,126,10,.85); }
.zv-borg .btn--gold:hover { transform:translateY(-2px); }
.zv-borg .btn--wide { width:100%; }
.zv-borg a:focus-visible, .zv-borg button:focus-visible, .zv-borg summary:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }

.zv-borg .borg-intro .wrap { padding:64px 32px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
@media(max-width:880px){ .zv-borg .borg-intro .wrap{ grid-template-columns:1fr; gap:32px; padding:44px 20px; } }
.zv-borg .intro-media-fallback { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; max-width:320px; margin:0 auto; border-radius:24px; background:var(--paper); border:1px solid var(--line); color:var(--blue); }
.zv-borg .intro-media-fallback svg { width:35%; height:35%; }
.zv-borg .intro-media { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:32px; max-width:340px; margin:0 auto; }
.zv-borg .intro-media img { width:100%; max-width:240px; height:auto; display:block; margin:0 auto; object-fit:contain; }
.zv-borg .borg-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.zv-borg .borg-ctas .btn:not(.btn--wide) { flex:1 1 220px; }
.zv-borg .borg-ctas .btn--wide { flex:1 1 100%; }

.zv-borg .borg-certs .wrap { padding:0 32px 72px; }
@media(max-width:720px){ .zv-borg .borg-certs .wrap{ padding:0 20px 52px; } }
.zv-borg .certs-box { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:36px; box-shadow:0 26px 60px -46px rgba(26,18,48,.5); }
.zv-borg .certs-mark { position:absolute; top:22px; right:26px; opacity:.5; }
.zv-borg .certs-grid { display:flex; flex-wrap:wrap; gap:12px; padding-right:100px; }
@media(max-width:560px){ .zv-borg .certs-grid{ padding-right:0; } .zv-borg .certs-mark{ display:none; } }
.zv-borg .cert-pill { display:inline-flex; align-items:center; font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); background:#fbe9c7; border:1px solid #eccf86; border-radius:999px; padding:11px 18px; text-decoration:none; transition:background .15s,transform .15s; }
.zv-borg .cert-pill:hover { background:var(--gold); transform:translateY(-1px); }
.zv-borg .cert-pill--empty { opacity:.55; cursor:default; }
.zv-borg .cert-pill--empty:hover { background:#fbe9c7; transform:none; }

/* ===== Nieuw: informatieblokken ===== */
.zv-borg .certs-title { font-size:clamp(22px,3vw,28px); font-weight:900; color:var(--indigo); line-height:1.15; margin:0 0 8px; }
.zv-borg .certs-text { font-size:16px; color:#473f5e; line-height:1.62; margin:0 0 20px; max-width:68ch; }
.zv-borg .borg-info .wrap { padding-bottom:56px; }
.zv-borg .borg-info h2 { font-size:clamp(22px,3vw,28px); font-weight:900; color:var(--indigo); line-height:1.15; margin:0 0 14px; }
.zv-borg .borg-info h3 { font-size:17px; font-weight:800; color:var(--indigo); margin:0 0 6px; }
.zv-borg .borg-info p { font-size:16px; color:#473f5e; line-height:1.62; margin:0 0 12px; max-width:68ch; }
.zv-borg .info-two { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media(max-width:880px){ .zv-borg .info-two{ grid-template-columns:1fr; gap:24px; } }
.zv-borg .info-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:30px; }
.zv-borg .info-card--gold { border-left:5px solid var(--gold); }

.zv-borg ul.check { list-style:none; padding:0; margin:0; }
.zv-borg ul.check li { position:relative; padding-left:28px; margin-bottom:10px; font-size:16px; color:#473f5e; line-height:1.5; }
.zv-borg ul.check li::before { content:""; position:absolute; left:2px; top:.42em; width:12px; height:7px; border-left:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(-45deg); }
.zv-borg ul.check--grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 28px; }
@media(max-width:880px){ .zv-borg ul.check--grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .zv-borg ul.check--grid{ grid-template-columns:1fr; } }

.zv-borg ol.steps { list-style:none; counter-reset:stap; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.zv-borg ol.steps li { counter-increment:stap; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; }
.zv-borg ol.steps li::before { content:counter(stap); display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; background:var(--blue); color:#fff; font-weight:800; margin-bottom:12px; }
.zv-borg ol.steps p { font-size:15px; margin:0; }
@media(max-width:880px){ .zv-borg ol.steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .zv-borg ol.steps{ grid-template-columns:1fr; } }

.zv-borg .faq { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:6px 30px; }
.zv-borg .faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.zv-borg .faq details:last-child { border-bottom:none; }
.zv-borg .faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-weight:800; font-size:16.5px; color:var(--indigo); }
.zv-borg .faq summary::-webkit-details-marker { display:none; }
.zv-borg .faq summary::after { content:"+"; color:var(--gold); font-size:22px; line-height:1; }
.zv-borg .faq details[open] summary::after { content:"–"; }
.zv-borg .faq details p { margin:10px 0 0; }

.zv-borg .borg-contact .wrap { padding-bottom:72px; }
.zv-borg .contact-box { background:var(--indigo); color:#fff; border-radius:22px; padding:36px; display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; }
.zv-borg .contact-box h2 { font-size:clamp(22px,3vw,28px); font-weight:900; color:#fff; margin:0 0 8px; }
.zv-borg .contact-box p { color:#ddd6f0; margin:0; font-size:16px; line-height:1.6; }
.zv-borg .contact-actions { display:flex; flex-wrap:wrap; gap:12px; }
.zv-borg .btn--light { background:#fff; color:var(--indigo); }
.zv-borg .btn--light:hover { transform:translateY(-2px); }
@media(max-width:880px){ .zv-borg .contact-box{ grid-template-columns:1fr; padding:28px; } }
/* END_SECTION:borg */

/* START_SECTION:camera-hardware (INDEX:6) */
.zv-camera {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --indigo-soft:#efecf7;
  --cream:#fdfaf2; --paper:#fffdf8; --sand:#efe9d6; --sand-2:#e6dfca;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08;
  --rood:#c52e2f; --red:#e24b4a; --ok:#2f8f5b;
  --line:#e8e0cd; --line-2:#ded6c0; --muted:#6f6786; --muted-2:#8c84a6;
  color:var(--ink); line-height:1.5; background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-camera .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(16px,3.4vw,48px); }
.zv-camera .topbar { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zv-camera .topbar .wrap { display:flex; align-items:center; gap:9px; padding-top:13px; padding-bottom:13px; }
.zv-camera .crumb { font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
.zv-camera .crumb a { color:var(--indigo); font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.zv-camera .crumb a svg { width:15px; height:15px; }
.zv-camera .crumb .sep { color:var(--line-2); }
.zv-camera .crumb b { color:var(--indigo); font-weight:800; }
.zv-camera a:focus-visible, .zv-camera button:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }
.zv-camera .btn svg { width:17px; height:17px; }

/* Hero */
.zv-camera .ch-hero .wrap { padding-top:clamp(30px,4.4vw,56px); padding-bottom:clamp(26px,3.4vw,40px); }
.zv-camera .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--rood); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.zv-camera .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.zv-camera .ch-hero h1 { font-size:clamp(30px,4.4vw,48px); font-weight:900; letter-spacing:-.02em; line-height:1.04; color:var(--indigo); margin:16px 0 0; max-width:760px; }
.zv-camera .ch-hero p { font-size:16.5px; font-weight:600; color:var(--muted); margin:14px 0 0; max-width:640px; line-height:1.5; }
.zv-camera .ch-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* Trust strip */
.zv-camera .ch-trust { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zv-camera .ch-trust ul { list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 22px; padding-top:16px; padding-bottom:16px; }
@media(max-width:860px){ .zv-camera .ch-trust ul { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.zv-camera .ch-trust li { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:var(--indigo); line-height:1.3; }
.zv-camera .ch-trust li svg { width:18px; height:18px; flex:none; color:var(--ok); }
.zv-camera .ch-trust a { color:inherit; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.zv-camera .ch-trust a:hover { text-decoration-color:currentColor; }

/* Shop: filters + grid */
.zv-camera .ch-shop { padding-top:clamp(30px,3.6vw,46px); scroll-margin-top:132px; }
.zv-camera .cat-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.zv-camera .cat-head h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; margin:0; }
.zv-camera .cat-hint { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
.zv-camera .cat-hint svg { width:15px; height:15px; color:var(--belt); }
@media(max-width:680px){ .zv-camera .cat-hint { margin-left:0; } }
.zv-camera .ch-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.zv-camera .ch-chip { font-family:inherit; font-size:13.5px; font-weight:800; color:var(--indigo); background:#fff; border:1.5px solid var(--line-2); border-radius:999px; padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:border-color .14s,background .14s,color .14s; }
.zv-camera .ch-chip:hover { border-color:var(--indigo); }
.zv-camera .ch-chip .n { font-size:11.5px; font-weight:800; color:var(--muted); background:var(--cream); border-radius:999px; padding:1px 7px; }
.zv-camera .ch-chip.on { background:var(--indigo); border-color:var(--indigo); color:#fff; }
.zv-camera .ch-chip.on .n { background:rgba(255,255,255,.18); color:#fff; }
.zv-camera .ch-chip[hidden] { display:none; }
.zv-camera .hw-group-h { font-size:17px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; line-height:1.2; margin:0 0 12px; }
.zv-camera .hw-grid + .hw-group-h { margin-top:30px; }
.zv-camera .hw-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media(max-width:980px){ .zv-camera .hw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .zv-camera .hw-grid { grid-template-columns:1fr; } }
.zv-camera .hw { display:flex; flex-direction:column; gap:10px; min-width:0; background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:12px 12px 16px; transition:border-color .14s,box-shadow .14s; }
.zv-camera .hw.has { border-color:var(--indigo); box-shadow:0 10px 26px -18px rgba(50,36,105,.6); }
.zv-camera .hw-media { position:relative; aspect-ratio:5/2; border-radius:11px; background:linear-gradient(135deg,var(--indigo-soft),#f6f1e3); display:grid; place-items:center; color:var(--indigo); }
.zv-camera .hw-media svg { width:46px; height:46px; opacity:.8; }
.zv-camera .hw-type { position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); background:#fff; border-radius:999px; padding:4px 9px; }
.zv-camera .hw-name { font-size:16px; font-weight:800; color:var(--ink); line-height:1.25; margin:4px 4px 0; }
.zv-camera .hw-model { font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:-4px 4px 0; }
.zv-camera .hw-key { margin:0 4px; display:flex; flex-direction:column; gap:4px; }
.zv-camera .hw-key div { display:grid; grid-template-columns:82px 1fr; gap:8px; font-size:12.5px; line-height:1.4; }
.zv-camera .hw-key dt { color:var(--muted); font-weight:700; }
.zv-camera .hw-key dd { margin:0; color:#3a3550; font-weight:600; overflow-wrap:anywhere; }
.zv-camera .hw-spec-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:12px; font-weight:800; color:var(--indigo); background:none; border:none; padding:2px 4px; cursor:pointer; }
.zv-camera .hw-spec-btn svg { width:12px; height:12px; transition:transform .16s; }
.zv-camera .hw-spec-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.zv-camera .hw-specs { max-height:0; overflow:hidden; transition:max-height .2s ease; margin:0 4px; }
.zv-camera .hw-specs-in { padding-top:10px; border-top:1px solid var(--line); }
.zv-camera .hw-desc p { font-size:12.5px; font-weight:500; line-height:1.55; color:#3a3550; margin:0 0 8px; }
.zv-camera .hw-desc + .hw-spec-model { margin-top:12px; }
.zv-camera .hw-spec-model { font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.zv-camera .hw-spec-list { display:flex; flex-direction:column; gap:6px; }
.zv-camera .hw-spec-row { display:flex; flex-direction:column; gap:1px; font-size:12.5px; font-weight:600; color:#3a3550; }
.zv-camera .hw-spec-l { color:var(--muted); font-weight:700; }
.zv-camera .hw-buy { margin-top:auto; padding:6px 4px 0; display:flex; flex-direction:column; gap:10px; }
.zv-camera .hw-modes { display:flex; gap:8px; }
.zv-camera .modechip { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-family:inherit; border:1.5px solid var(--line-2); background:#fff; border-radius:11px; padding:7px 12px; text-align:left; cursor:pointer; transition:border-color .14s,background .14s,box-shadow .14s; }
.zv-camera .modechip:hover { border-color:#c9bda0; }
.zv-camera .modechip .ml { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.zv-camera .modechip .mp { font-size:16px; font-weight:900; color:var(--ink); line-height:1.15; }
.zv-camera .modechip .mu { font-size:10.5px; font-weight:700; color:var(--muted); }
.zv-camera .modechip.on { border-color:var(--indigo); background:var(--indigo-soft); box-shadow:0 8px 20px -14px rgba(50,36,105,.7); }
.zv-camera .modechip.on .ml { color:var(--indigo); }
.zv-camera .modechip.on .mp { color:var(--indigo); }
.zv-camera .modechip.koop.on { border-color:var(--belt); background:#fbf1e0; }
.zv-camera .modechip.koop.on .ml, .zv-camera .modechip.koop.on .mp { color:var(--belt); }
.zv-camera .stepper { align-self:flex-start; display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:11px; overflow:hidden; background:#fff; }
.zv-camera .stepper button { width:38px; height:40px; border:none; background:#fff; color:var(--indigo); font-size:20px; font-weight:800; line-height:1; display:grid; place-items:center; cursor:pointer; }
.zv-camera .stepper button:disabled { color:var(--line-2); cursor:default; }
.zv-camera .stepper button:hover:not(:disabled) { background:var(--indigo-soft); }
.zv-camera .stepper .q { min-width:34px; text-align:center; font-size:15px; font-weight:900; color:var(--ink); }
.zv-camera .hw-chosen { display:block; font-size:11px; font-weight:800; color:var(--ok); }

/* Sticky setup bar: shown once something is chosen, settles above Uw camera-setup. Right-
   aligned so it clears the contact FAB (bottom-left, assets/zv-contact-fab.css); below 960px
   the two don't fit side by side, so the bar sits above the FAB (96px tall, 72px <=600px). */
.zv-camera .ch-bar { position:sticky; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; justify-content:flex-end; padding:0 20px; margin-top:24px; pointer-events:none; }
@media(max-width:960px){ .zv-camera .ch-bar { bottom:calc(128px + env(safe-area-inset-bottom, 0px)); } }
@media(max-width:600px){ .zv-camera .ch-bar { bottom:calc(100px + env(safe-area-inset-bottom, 0px)); padding:0 16px; } }
.zv-camera .ch-bar[hidden] { display:none; }
.zv-camera .ch-bar-in { pointer-events:auto; display:flex; align-items:center; gap:14px; max-width:100%; background:var(--indigo); color:#fff; border-radius:999px; padding:8px 8px 8px 18px; box-shadow:0 18px 40px -18px rgba(26,18,48,.7); }
.zv-camera .ch-bar-t { font-size:13.5px; font-weight:700; }
.zv-camera .ch-bar-t b { font-weight:900; }
.zv-camera .ch-bar a { flex:none; font-size:13.5px; font-weight:800; color:var(--ink); background:var(--gold); border-radius:999px; padding:9px 15px; text-decoration:none; }
@media(max-width:620px){ .zv-camera .ch-bar-in { gap:10px; padding-left:14px; } .zv-camera .ch-bar-t { font-size:12.5px; } }

/* Uw camera-setup: summary + callback */
.zv-camera .ch-setup { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:20px; align-items:start; padding-top:clamp(28px,3.4vw,40px); scroll-margin-top:132px; }
@media(max-width:860px){ .zv-camera .ch-setup { grid-template-columns:1fr; } }
.zv-camera .summary, .zv-camera .cam-contact { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 26px 56px -42px rgba(26,18,48,.5); }
.zv-camera .summary h2 { font-size:clamp(19px,2.2vw,24px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; margin:0; }
.zv-camera .sum-cams { display:flex; align-items:center; gap:10px; margin-top:14px; background:var(--cream); border:1px solid var(--line-2); border-radius:13px; padding:12px 14px; }
.zv-camera .sum-cams .ci { width:34px; height:34px; border-radius:10px; background:#fff; display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 1px var(--line-2); }
.zv-camera .sum-cams .ci svg { width:19px; height:19px; color:var(--indigo); }
.zv-camera .sum-cams b { font-size:21px; font-weight:900; color:var(--ink); line-height:1; }
.zv-camera .sum-cams span { font-size:12px; font-weight:700; color:var(--muted); display:block; margin-top:2px; }
.zv-camera .sum-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.zv-camera .sum-list .sl { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:#3a3550; }
.zv-camera .sum-list .sl .q { color:var(--muted); font-weight:800; }
.zv-camera .sum-list .sl .v { font-weight:800; white-space:nowrap; }
.zv-camera .sum-empty { font-size:13px; font-weight:600; color:var(--muted-2); margin-top:14px; line-height:1.5; }
.zv-camera .sum-tot { border-top:1.5px solid var(--line); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:7px; }
.zv-camera .sum-tot:empty { display:none; }
.zv-camera .sum-tot .tr { display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; color:#3a3550; }
.zv-camera .sum-tot .tr.big { font-size:17px; font-weight:900; color:var(--ink); }
.zv-camera .sum-tot .tr.big .accent { color:var(--indigo); }
.zv-camera .sum-tot .muted { font-size:12px; font-weight:600; color:var(--muted-2); }
.zv-camera .sumbtn { margin-top:16px; width:100%; font-family:inherit; font-weight:800; font-size:15.5px; border:none; border-radius:13px; padding:15px; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--gold); color:var(--ink); box-shadow:0 2px 0 var(--belt); transition:transform .14s,box-shadow .14s; cursor:pointer; }
.zv-camera .sumbtn:hover { transform:translateY(-1px); box-shadow:0 4px 0 var(--belt),0 12px 24px -12px rgba(180,126,10,.7); }
.zv-camera .sumbtn:disabled { background:var(--sand); color:var(--muted-2); box-shadow:none; cursor:default; transform:none; }
.zv-camera .sumbtn svg { width:18px; height:18px; }
.zv-camera .sum-note { display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); margin-top:11px; text-align:center; }
.zv-camera .sum-note svg { width:14px; height:14px; color:var(--ok); flex:none; }
.zv-camera .cam-contact { display:flex; flex-direction:column; gap:9px; }
.zv-camera .cam-contact-h { font-size:15px; font-weight:900; color:var(--indigo); margin-bottom:2px; }
.zv-camera .cam-contact input { font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); border:1.5px solid var(--line); border-radius:8px; padding:11px 12px; background:#fff; }
.zv-camera .cam-contact-consent { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.zv-camera .cam-contact-consent input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--indigo); }
.zv-camera .cam-contact-consent span { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.zv-camera .cam-contact-consent a { color:var(--indigo); font-weight:800; }
.zv-camera .cam-contact button { font-family:inherit; font-size:14px; font-weight:800; color:#fff; background:var(--indigo); border:none; border-radius:8px; padding:12px 16px; cursor:pointer; }
.zv-camera .cam-contact-err { font-size:12px; font-weight:700; color:var(--red); display:none; }
.zv-camera .cam-contact-done { display:none; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#2f8f5b; }
.zv-camera .cam-contact-done svg { width:16px; height:16px; flex:none; }

/* Niet gevonden wat u zocht? */
.zv-camera .ch-cta { padding-top:clamp(36px,4.4vw,56px); }
.zv-camera .ch-cta-in { display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; background:var(--indigo); color:#fff; border-radius:20px; padding:clamp(22px,3vw,34px); }
.zv-camera .ch-cta-in > div:first-child { flex:1 1 380px; }
.zv-camera .ch-cta h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; letter-spacing:-.015em; line-height:1.15; margin:0; color:#fff; }
.zv-camera .ch-cta p { font-size:15px; font-weight:600; line-height:1.5; margin:8px 0 0; color:rgba(255,255,255,.82); max-width:620px; }
.zv-camera .ch-cta-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* FAQ: the Veelgestelde vragen accordion (.fq-item), scoped here. */
.zv-camera .ch-faq { padding-top:clamp(36px,4.4vw,56px); padding-bottom:80px; }
.zv-camera .ch-faq > * { max-width:880px; }
.zv-camera .ch-faq h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; line-height:1.15; margin:0 0 16px; }
.zv-camera .fq-item { background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:0 12px 30px -34px rgba(26,18,48,.5); }
.zv-camera .fq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; font-family:inherit; background:none; border:none; padding:18px 20px; font-size:16px; font-weight:800; color:var(--indigo); line-height:1.35; cursor:pointer; }
.zv-camera .fq-q .pm { flex:none; width:26px; height:26px; border-radius:50%; background:var(--cream); color:var(--indigo); display:grid; place-items:center; transition:transform .2s,background .15s; }
.zv-camera .fq-q .pm svg { width:15px; height:15px; }
.zv-camera .fq-item.open .fq-q .pm { transform:rotate(45deg); background:var(--gold); }
.zv-camera .fq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.zv-camera .fq-a-in { padding:0 20px 20px; font-size:15px; font-weight:500; color:#5b5374; line-height:1.6; }
.zv-camera .fq-a-in a { font-weight:800; color:var(--indigo); }
.zv-camera .ch-faq-more { font-size:14px; font-weight:600; color:var(--muted); margin:16px 0 0; }
.zv-camera .ch-faq-more a { font-weight:800; color:var(--indigo); }
/* END_SECTION:camera-hardware */

/* START_SECTION:contact-page (INDEX:16) */
.zv-contact {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --indigo-soft:#ece8fb;
  --paper:#fffdf8; --cream:#fdfaf2; --gold:#e4a311; --gold-lt:#f5c84a;
  --line:#e7e0cf; --line-2:#ddd4c0; --muted:#6f6786; --ok:#2f8f5b;
  color:var(--ink); line-height:1.5;
}
.zv-contact .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-contact .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.3) 0%,rgba(197,46,47,0) 55%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(38px,4.6vw,64px) 0 clamp(30px,3.5vw,46px); }
.zv-contact .page-hero .crumbs { font-size:12.5px; font-weight:700; color:#cdc6e8; display:flex; gap:8px; align-items:center; }
.zv-contact .page-hero .crumbs a { color:#cdc6e8; text-decoration:none; }
.zv-contact .page-hero .crumbs a:hover { color:#fff; }
.zv-contact .page-hero .crumbs b { color:#fff; }
.zv-contact .page-hero .eyebrow { display:inline-block; margin-top:14px; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lt); }
.zv-contact .page-hero h1 { color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:10px; }
.zv-contact .page-hero .lead { font-size:clamp(15px,1.5vw,17.5px); font-weight:500; color:#dcd6f0; margin-top:14px; max-width:60ch; line-height:1.6; }
.zv-contact .cn-wrap { padding:clamp(40px,4.5vw,68px) 0 clamp(56px,6vw,90px); background:var(--cream); }
.zv-contact .cn-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,3.5vw,44px); align-items:start; }
@media(max-width:900px){ .zv-contact .cn-grid { grid-template-columns:1fr; } }
.zv-contact .cn-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,38px); box-shadow:0 24px 54px -44px rgba(26,18,48,.5); }
.zv-contact .cn-card h2 { font-size:24px; font-weight:900; color:var(--indigo); letter-spacing:-.015em; }
.zv-contact .cn-card p.hint { font-size:14.5px; font-weight:500; color:var(--muted); margin-top:8px; line-height:1.5; }
.zv-contact .fld { margin-top:18px; }
.zv-contact .fld label { display:block; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.zv-contact .fld input, .zv-contact .fld select, .zv-contact .fld textarea { width:100%; background:var(--cream); border:1.5px solid var(--line-2); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); }
.zv-contact .fld textarea { min-height:120px; resize:vertical; }
.zv-contact .fld input:focus, .zv-contact .fld select:focus, .zv-contact .fld textarea:focus { outline:none; border-color:var(--indigo); background:#fff; }
.zv-contact .fld-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .zv-contact .fld-row { grid-template-columns:1fr; } }
.zv-contact .fld-consent .cn-consent { display:flex; align-items:flex-start; gap:10px; margin-bottom:0; cursor:pointer; }
.zv-contact .fld-consent .cn-consent input { width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--indigo); }
.zv-contact .fld-consent .cn-consent span { font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.zv-contact .fld--invalid.fld-consent .cn-consent span { color:#9a2b2b; }
.zv-contact .fld-consent .cn-consent a { color:var(--indigo); font-weight:800; }
.zv-contact .cn-submit { margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.zv-contact .cn-priv { font-size:12.5px; font-weight:600; color:var(--muted); max-width:34ch; line-height:1.45; }
.zv-contact .cn-priv a { color:var(--indigo); font-weight:800; }
.zv-contact .cn-ok { margin-top:0; margin-bottom:18px; background:rgba(47,143,91,.1); border:1px solid rgba(47,143,91,.4); border-radius:12px; padding:16px 18px; color:#256b45; font-size:14.5px; font-weight:700; }
.zv-contact .cn-err { margin-bottom:14px; background:rgba(197,46,47,.08); border:1px solid rgba(197,46,47,.35); border-radius:12px; padding:13px 16px; color:#9a2b2b; font-size:14px; font-weight:700; }
.zv-contact .cn-err a { color:#9a2b2b; text-decoration:underline; }
.zv-contact .fld--invalid input, .zv-contact .fld--invalid select, .zv-contact .fld--invalid textarea { border-color:#c52e2f; background:rgba(197,46,47,.05); }
.zv-contact .cn-hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zv-contact .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; }
.zv-contact .btn svg { width:18px; height:18px; }
.zv-contact .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; padding:14px 24px; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-contact .btn--gold:hover { filter:brightness(1.03); }
.zv-contact .cn-side { display:flex; flex-direction:column; gap:16px; }
.zv-contact .cn-opt { display:flex; gap:15px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 16px 40px -38px rgba(26,18,48,.5); }
.zv-contact .cn-opt .ic { flex:none; width:46px; height:46px; border-radius:13px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; }
.zv-contact .cn-opt .ic svg { width:24px; height:24px; }
.zv-contact .cn-opt h3 { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-contact .cn-opt p { font-size:14px; font-weight:500; color:#5b5374; margin-top:5px; line-height:1.5; }
.zv-contact .cn-opt a.big { display:inline-block; font-size:18px; font-weight:900; color:var(--ink); margin-top:6px; text-decoration:none; }
.zv-contact .cn-opt .sub { font-size:12.5px; font-weight:700; color:var(--muted); margin-top:4px; }
.zv-contact .cn-hours { background:var(--indigo-deep); color:#fff; border-radius:16px; padding:22px; }
.zv-contact .cn-hours h3 { color:#fff; font-size:15px; font-weight:900; letter-spacing:.01em; }
.zv-contact .cn-hours ul { list-style:none; padding:0; margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.zv-contact .cn-hours li { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; color:#d8d2ef; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:9px; }
.zv-contact .cn-hours li span { flex:none; }
.zv-contact .cn-hours li b { color:#fff; font-weight:800; text-align:right; }
.zv-contact .cn-hours .now { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; font-weight:800; color:#c9f0d8; }
.zv-contact .cn-hours .now i { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.zv-contact .cn-hours .now[hidden] { display:none; }
.zv-contact .cn-hours .now.is-closed { color:#d8d2ef; }
.zv-contact .cn-hours .now.is-closed i { background:#8c84a6; }
/* END_SECTION:contact-page */

/* START_SECTION:cta-block (INDEX:17) */
.finder-sec { position: relative; overflow: hidden; color: #fff; padding: clamp(46px, 5vw, 78px) 0; background: var(--indigo-deep); }
.finder-sec.theme-gold { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-lt) 100%); color: #3a2a06; }
.finder-sec.theme-indigo { background: var(--indigo-deep); }
.finder-sec::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; right: -160px; top: -220px; background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%); }
.finder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 472px; gap: clamp(36px, 5vw, 72px); align-items: center; }
.fs-copy .eyebrow { color: var(--gold-lt); display: block; }
.finder-sec.theme-gold .fs-copy .eyebrow { color: #7a560a; }
.fs-copy h2 { font-size: clamp(30px, 3.6vw, 50px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; margin-top: 12px; }
.fs-copy p { font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; color: #d8d2ef; margin-top: 18px; max-width: 46ch; line-height: 1.5; }
.finder-sec.theme-gold .fs-copy p { color: #5c4410; }
.fs-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.fs-media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.4)); }
.finder-sec .lio-guide { display: flex; justify-content: center; }
.finder-sec .lio-guide img { width: clamp(240px, 26vw, 340px); height: auto; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.4)); }
@media (max-width: 900px) { .finder-grid { grid-template-columns: 1fr; gap: 32px; } }
/* END_SECTION:cta-block */

/* START_SECTION:faq (INDEX:20) */
.community { padding: clamp(56px, 6vw, 100px) 0; background: var(--band); }
.community .pf-intro { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 4vw, 60px); }
.community .pf-intro .eyebrow { display: block; color: var(--belt); }
.community .pf-intro h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; color: var(--indigo); letter-spacing: -0.02em; line-height: 1.05; margin: 14px 0 0; text-wrap: balance; }
.cq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cq-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; box-shadow: 0 12px 30px -20px rgba(26, 18, 48, 0.4), 0 2px 5px -3px rgba(26, 18, 48, 0.1); transition: transform 0.18s, box-shadow 0.18s; }
.cq-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(26, 18, 48, 0.5); }
.cq-topic { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--belt); }
.cq-topic .cq-no { color: var(--gold); font-variant-numeric: tabular-nums; }
/* margin + font-style set explicitly so Dawn's global blockquote rule (italic, border-left,
   UA margin 1em 40px) cannot leak in — the standalone HTML relies on a *{margin:0} reset. */
.cq-q { position: relative; margin: 14px 0 0; font-style: normal; background: var(--indigo-soft); color: var(--indigo); border-radius: 12px; padding: 14px 16px 14px 46px; font-size: 15px; font-weight: 600; line-height: 1.5; border: none; }
.cq-q svg { position: absolute; left: 15px; top: 16px; width: 21px; height: 21px; color: var(--indigo-2); opacity: 0.75; }
.cq-a { margin-top: 16px; }
.cq-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: var(--indigo); letter-spacing: 0.01em; }
.cq-brand svg { width: 16px; height: 16px; flex: none; }
.cq-a p { font-size: 14.5px; font-weight: 500; color: #5b5374; margin: 8px 0 0; line-height: 1.55; }
@media (max-width: 900px) { .cq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cq-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.cq-close { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 820px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: clamp(28px, 3vw, 44px); text-align: center; box-shadow: 0 20px 44px -30px rgba(26, 18, 48, 0.4); }
.cq-close h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; color: var(--indigo); letter-spacing: -0.015em; text-wrap: balance; }
.cq-close p { font-size: 16px; font-weight: 500; color: var(--muted); margin: 14px auto 0; line-height: 1.6; max-width: 60ch; }
.cq-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 26px; }
/* END_SECTION:faq */

/* START_SECTION:feature-cards (INDEX:21) */
.platform { background: var(--band); padding: clamp(56px, 6vw, 100px) 0; }
.platform .pf-intro { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 4vw, 60px); }
.platform .pf-intro .eyebrow { display: block; color: var(--belt); }
.platform .pf-intro h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; color: var(--indigo); letter-spacing: -0.02em; line-height: 1.05; margin-top: 14px; text-wrap: balance; }
.bucket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bucket { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 38px 32px 30px; overflow: hidden; text-decoration: none; color: inherit; background: linear-gradient(180deg, #fffdf8 0%, #f9f3e6 100%); box-shadow: 0 12px 30px -20px rgba(26, 18, 48, 0.4), 0 2px 5px -3px rgba(26, 18, 48, 0.12); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.bucket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gold); transform: scaleX(0.34); transform-origin: left; transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
.bucket:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -34px rgba(26, 18, 48, 0.55), 0 4px 10px -5px rgba(26, 18, 48, 0.18); border-color: var(--line-2); }
.bucket:hover::before { transform: scaleX(1); }
.bk-top { display: flex; align-items: flex-start; justify-content: space-between; }
.bk-ic { width: 58px; height: 58px; color: var(--indigo); background: #efecf7; border-radius: 15px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(50, 36, 105, 0.08); }
.bk-ic svg, .bk-ic img { width: 36px; height: 36px; object-fit: contain; }
.bk-no { font-size: 13px; font-weight: 900; color: var(--gold); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.bucket h3 { font-size: 25px; font-weight: 900; color: var(--indigo); letter-spacing: -0.015em; line-height: 1.08; margin-top: 22px; }
.bucket p { font-size: 15px; font-weight: 500; color: #5b5374; margin-top: 11px; line-height: 1.55; flex: 1; }
.bk-meta { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.bk-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--indigo); margin-top: 16px; white-space: nowrap; }
.bk-link svg { width: 17px; height: 17px; transition: transform 0.18s; }
.bucket:hover .bk-link svg { transform: translateX(4px); }
@media (max-width: 880px) { .bucket-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.bucket--soon { cursor: pointer; }
.bucket--soon:hover { transform: none; box-shadow: 0 12px 30px -20px rgba(26, 18, 48, 0.4), 0 2px 5px -3px rgba(26, 18, 48, 0.12); border-color: var(--line); }
.bucket--soon:hover::before { transform: scaleX(0.34); }
.bucket--soon .bk-link { color: var(--muted); }
.bucket--soon .bk-link svg { opacity: 0.6; }
.bk-soon { position: absolute; top: 16px; right: 16px; background: var(--indigo); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.bk-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.bk-price-amt { font-size: 14px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.bk-price-amt b { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.bk-soon--promo { position: static; background: var(--gold); color: var(--ink); font-size: 12px; padding: 5px 9px; }

/* "Voor wie is dit?" info popover */
.whoinfo { position: relative; display: inline-block; margin-top: 22px; }
.whoinfo-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); color: var(--indigo); border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 800; line-height: 1; font-family: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s, background 0.15s; }
.whoinfo-btn:hover, .whoinfo-btn:focus-visible { border-color: var(--gold); background: var(--cream); transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(180, 126, 10, 0.5); outline: none; }
.whoinfo-btn svg { width: 18px; height: 18px; color: var(--belt); }
.whoinfo-panel { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%) translateY(-6px); width: min(940px, 88vw); background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; text-align: left; box-shadow: 0 44px 84px -42px rgba(26, 18, 48, 0.65), 0 8px 20px -12px rgba(26, 18, 48, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 30; }
.whoinfo:hover .whoinfo-panel, .whoinfo:focus-within .whoinfo-panel, .whoinfo.open .whoinfo-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.whoinfo-panel::before { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: var(--cream); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.wi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wi-col h4 { font-size: 15px; font-weight: 900; color: var(--indigo); letter-spacing: -0.01em; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2.5px solid var(--gold); display: inline-block; }
.wi-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wi-col li { position: relative; padding-left: 17px; font-size: 13.5px; font-weight: 600; color: #5b5374; line-height: 1.45; }
.wi-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.wi-col li b { color: var(--ink); font-weight: 800; }
@media (max-width: 720px) { .wi-grid { grid-template-columns: 1fr; gap: 18px; } }
/* END_SECTION:feature-cards */

/* START_SECTION:finder-preview (INDEX:25) */
.finder-sec { position: relative; overflow: hidden; color: #fff; padding: clamp(28px, 3vw, 48px) 0; background: var(--indigo-deep); }
.finder-sec::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; right: -160px; top: -200px; background: radial-gradient(circle, rgba(228, 163, 17, 0.26), transparent 64%); pointer-events: none; }
.finder-sec::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -180px; bottom: -220px; background: radial-gradient(circle, rgba(0, 80, 159, 0.4), transparent 62%); pointer-events: none; }
.finder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 472px; gap: clamp(36px, 5vw, 80px); align-items: center; }
/* Heading design-lock — colour + font declared directly so Dawn's global
   `h1,h2,h3 { color: rgb(var(--color-foreground)) }` (a direct h2 rule that otherwise
   beats the inherited white) cannot turn the large heading dark. Sizes/clamps unchanged. */
.finder-sec .fs-copy .eyebrow { display: block; color: var(--zv-eyebrow-on-dark); font-family: var(--zv-heading-font); font-size: 12px; font-weight: 800; line-height: 18px; letter-spacing: 0.24em; text-transform: uppercase; }
.finder-sec .fs-copy h2 { color: var(--zv-heading-on-dark); font-family: var(--zv-heading-font); font-size: clamp(30px, 3.6vw, 50px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; margin-top: 14px; text-wrap: balance; }
.finder-sec .fs-copy p { color: var(--zv-body-on-dark); font-family: var(--zv-heading-font); font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; margin-top: 18px; max-width: 46ch; line-height: 1.55; }
.lio-guide { position: relative; margin-top: 22px; margin-left: -8px; width: max-content; will-change: transform; }
.lio-guide img { width: clamp(260px, 26vw, 340px); height: auto; display: block; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.48)); opacity: 1; transition: opacity 0.22s ease; animation: lioFloat 4.5s ease-in-out infinite; }
@keyframes lioFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-0.6deg); } }
@keyframes lioPop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.lio-guide.lio-pop { animation: lioPop 0.34s ease; }
@media (prefers-reduced-motion: reduce) { .lio-guide img { animation: none; } .lio-guide.lio-pop { animation: none; } }

.kh-card { background: var(--cream); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 8px 22px -10px rgba(0, 0, 0, 0.4); }
.kh-head { padding: 18px 22px 0; }
.kh-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo); }
.kh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.kh-lead { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.kh-progress { height: 6px; border-radius: 999px; background: var(--band-2); margin-top: 13px; overflow: hidden; }
.kh-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f0b73a); border-radius: 999px; }
.kh-body { padding: 16px 22px 6px; }
.kh-step { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.finder-sec .kh-body h3 { color: var(--zv-heading-on-light); font-family: var(--zv-heading-font); font-size: clamp(20px, 2.1vw, 24px); font-weight: 900; letter-spacing: -0.015em; line-height: 1.12; margin-top: 6px; text-wrap: balance; }
.kh-qsub { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.kh-opts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kh-opts a { display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 14px; min-height: 60px; text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.kh-opts a:hover { border-color: var(--indigo); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(26, 18, 48, 0.5); }
.kh-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; }
.kh-ic svg { width: 22px; height: 22px; }
.kh-label { flex: 1; font-size: 15px; font-weight: 800; color: var(--indigo); letter-spacing: -0.01em; }
.kh-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); }
.kh-opts a:hover .kh-radio { border-color: var(--gold); }
.kh-foot { padding: 6px 22px 18px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; }
.kh-opt { width: 100%; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.kh-opt:hover { border-color: var(--indigo); transform: translateY(-1px); box-shadow: 0 12px 26px -18px rgba(26, 18, 48, 0.5); }
.kh-back { background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; padding: 0 0 10px; }
/* ── Result state (1:1 with the design .res-*/.pl-*), scoped to the finder card ── */
.kh-result { padding-top: 14px; }
.kh-card .res-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kh-card .res-eyebrow { font-size: 12px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 0.16em; }
.kh-card .res-seg { background: var(--indigo-soft); color: var(--indigo); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.kh-card .res-pathway { margin-top: 12px; background: var(--indigo-soft); border: 1px solid #d9d0ee; border-radius: 16px; padding: 15px 18px; }
.kh-card .res-pathway .rp-line { display: block; font-size: 20px; font-weight: 900; color: var(--indigo); letter-spacing: -0.01em; }
.kh-card .res-pathway .rp-desc { font-size: 13.5px; font-weight: 600; color: #5b5374; margin-top: 6px; line-height: 1.5; }
.kh-card .res-pathway .rp-reason { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid #d9d0ee; line-height: 1.5; }
.kh-card .res-substep { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; margin-top: 14px; }
.kh-card .res-card { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 18px 40px -30px rgba(26, 18, 48, 0.5); }
.kh-card .pl { display: flex; align-items: center; gap: 14px; }
.kh-card .pl-badge { flex: none; }
.kh-card .pl-badge svg { width: 92px; height: 92px; display: block; }
.kh-card .pl-plat { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; }
.kh-card .pl-pop { background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 900; border-radius: 999px; padding: 2px 8px; text-transform: none; letter-spacing: 0; }
.kh-card .pl-name { font-size: 24px; font-weight: 900; color: var(--indigo); line-height: 1.05; margin-top: 3px; }
.kh-card .pl-price { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 5px; }
.kh-card .pl-price span { font-weight: 600; color: var(--muted); margin-left: 2px; }
.kh-card .res-h1 { font-size: 17px; font-weight: 800; color: var(--indigo); margin-top: 14px; line-height: 1.3; }
.kh-card .res-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.kh-card .res-trust span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); }
.kh-card .res-trust i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.kh-card .res-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; align-items: center; }
.kh-card .btn-gold { display: inline-flex; align-items: center; gap: 9px; background: var(--gold); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 900; padding: 13px 20px; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(180, 126, 10, 0.8); transition: transform 0.15s, box-shadow 0.15s; }
.kh-card .btn-gold:hover { transform: translateY(-2px); }
.kh-card .btn-gold svg { width: 18px; height: 18px; }
.kh-card .btn-ghost { background: none; border: 1.5px solid #d8cdb4; color: var(--indigo); font-size: 14px; font-weight: 800; padding: 12px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s; }
.kh-card .btn-ghost:hover { border-color: var(--indigo); background: var(--cream); }
.kh-card .res-alts { margin-top: 12px; animation: khFade 0.26s ease both; }
.kh-card .res-alts[hidden] { display: none; }
.kh-card .res-alts-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.kh-card .alt { display: block; position: relative; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 42px 12px 14px; margin-bottom: 10px; transition: border-color 0.16s, transform 0.16s; }
.kh-card .alt:hover { border-color: #c9bda0; transform: translateY(-1px); }
.kh-card .pl.mini .pl-badge svg { width: 50px; height: 50px; }
.kh-card .pl.mini .pl-plat { font-size: 10px; }
.kh-card .pl.mini .pl-name { font-size: 16px; margin-top: 1px; }
.kh-card .pl.mini .pl-price { font-size: 13px; margin-top: 2px; }
.kh-card .alt-sub { margin-top: 6px; margin-left: 64px; font-size: 13px; font-weight: 600; color: var(--muted); }
.kh-card .alt-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.kh-card .res-restart { display: flex; align-items: center; gap: 7px; width: max-content; margin: 14px auto 2px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 800; font-family: inherit; }
.kh-card .res-restart:hover { color: var(--indigo); }
.kh-card .res-restart svg { width: 16px; height: 16px; }
@keyframes khFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kh-card .res-alts { animation: none; } .kh-card .btn-gold { transition: none; } }
@media (max-width: 980px) { .finder-grid { grid-template-columns: 1fr; gap: 32px; } }
/* END_SECTION:finder-preview */

/* START_SECTION:gids-bedankt (INDEX:27) */
.zv-thanks {
  --ink:#1a1230; --indigo:#322469; --indigo-soft:#ece8fb; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --line:#e7e0cf; --line-2:#ddd4c0; --muted:#6f6786; --ok:#2f8f5b;
  color:var(--ink); line-height:1.5;
  background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-thanks .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-thanks .tk { display:flex; align-items:center; padding:clamp(40px,6vw,90px) 0; }
.zv-thanks .tk-card { max-width:640px; margin:0 auto; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:clamp(32px,4vw,56px); box-shadow:0 34px 74px -46px rgba(26,18,48,.55); }
.zv-thanks .tk-ic { width:88px; height:88px; border-radius:50%; background:rgba(47,143,91,.14); color:var(--ok); display:grid; place-items:center; margin:0 auto 22px; }
.zv-thanks .tk-ic svg { width:46px; height:46px; }
.zv-thanks .tk-card h1 { font-size:clamp(27px,3.2vw,40px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.04; }
.zv-thanks .tk-card p.lead { font-size:16.5px; font-weight:500; color:#5b5374; margin:14px auto 0; max-width:46ch; line-height:1.6; }
.zv-thanks .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; padding:14px 24px; }
.zv-thanks .btn svg { width:18px; height:18px; }
.zv-thanks .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-thanks .tk-dl { margin-top:26px; }
.zv-thanks .tk-dl.is-soon { cursor:default; opacity:.7; box-shadow:none; }
.zv-thanks .tk-next { text-align:left; background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-top:28px; }
.zv-thanks .tk-next h3 { font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--indigo); margin-bottom:14px; }
.zv-thanks .tk-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:520px){ .zv-thanks .tk-links { grid-template-columns:1fr; } }
.zv-thanks .tk-links a { display:flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:14.5px; font-weight:800; color:var(--indigo); text-decoration:none; transition:transform .15s,border-color .15s; }
.zv-thanks .tk-links a:hover { transform:translateY(-2px); border-color:var(--line-2); }
.zv-thanks .tk-links a .ic { flex:none; width:34px; height:34px; border-radius:9px; background:var(--indigo-soft); display:grid; place-items:center; }
.zv-thanks .tk-links a .ic svg { width:19px; height:19px; }
.zv-thanks .tk-help { margin-top:24px; font-size:14.5px; font-weight:600; color:var(--muted); }
.zv-thanks .tk-help a { font-weight:800; color:var(--indigo); }
/* END_SECTION:gids-bedankt */

/* START_SECTION:hero-banner (INDEX:29) */
.hero {
  --indigo-deep:#281c54; --indigo:#322469; --gold:#e4a311; --gold-lt:#f5c84a;
  --ink:#1a1230; --paper:#fffdf8; --cream:#fdfaf2; --line:#e7e0cf; --belt:#9c6c08;
  position:relative; overflow:hidden; display:block; background:var(--cream);
  padding: clamp(14px,1.6vw,26px) 0 clamp(26px,3vw,44px);
}
/* full-bleed rounded video with a white card floating on the left (1:1 Brand 3 hero) */
.hero-media {
  position:relative; display:flex; align-items:center; overflow:visible;
  height:clamp(440px,44vw,600px); width:100%;
  max-width:1440px; margin:0 auto; padding:0 clamp(16px,3vw,48px);
}
.hero-video-slot {
  position:absolute; inset:0 clamp(16px,3vw,48px); z-index:0;
  border-radius:16px; overflow:hidden; background:var(--indigo-deep);
  box-shadow:0 40px 90px -54px rgba(26,18,48,.6);
}
.hero-video-slot .hero-video-bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  z-index:0; filter:blur(24px) saturate(1.15); transform:scale(1.08);
}
.hero-video-slot .hero-video, .hero-video-slot video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:2; background:transparent;
}
.hero-card {
  position:relative; z-index:3;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:clamp(26px,2.4vw,42px); max-width:470px;
  margin:0 0 0 clamp(-56px, -3.5vw, -20px);
  box-shadow:0 34px 74px -38px rgba(26,18,48,.5);
}
.hero-card .hero-copy { max-width:none; display:flex; flex-direction:column; align-items:flex-start; }
.hero-card h1 {
  color:var(--indigo); font-size:clamp(28px,2.8vw,40px); font-weight:900;
  letter-spacing:-.02em; line-height:1.05; margin:0; text-wrap:balance;
}
.hero-card p.sub {
  color:#5b5374; max-width:44ch; font-size:clamp(14.5px,1.1vw,16.5px);
  font-weight:500; line-height:1.58; margin-top:14px;
}
.hero-bullets { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.hero-bullets li { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:600; color:#3a3550; }
.hero-bullets .bchk { flex:none; width:26px; height:26px; border-radius:50%; background:var(--gold); display:grid; place-items:center; box-shadow:0 4px 14px -6px rgba(0,0,0,.35); }
.hero-bullets .bchk svg { width:15px; height:15px; color:var(--indigo); }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.hero .btn { font-weight:800; font-size:15px; border:none; border-radius:12px; padding:14px 22px; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer; transition:transform .14s,box-shadow .14s; }
.hero .btn svg { width:18px; height:18px; flex:none; }
.hero .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 2px 0 #b67e0a; }
.hero .btn--gold:hover { transform:translateY(-1px); box-shadow:0 4px 0 #b67e0a,0 10px 22px -12px rgba(180,126,10,.7); }
.hero .btn--light { background:var(--cream); color:var(--indigo); border:1.5px solid var(--line); }
.hero a:focus-visible, .hero .btn:focus-visible { outline:3px solid var(--gold-lt); outline-offset:3px; }

@media (max-width:760px) {
  .hero-media { height:auto; flex-direction:column; align-items:stretch; padding:0 14px; }
  .hero-video-slot { position:relative; inset:auto; height:300px; width:100%; }
  .hero-card { max-width:none; margin:-44px 12px 0; }
  .hero-card h1 { font-size:clamp(28px,8vw,40px); }
}
/* END_SECTION:hero-banner */

/* START_SECTION:herroepen-page (INDEX:30) */
.zv-herroepen {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --indigo-soft:#ece8fb;
  --paper:#fffdf8; --cream:#fdfaf2; --gold:#e4a311; --gold-lt:#f5c84a;
  --line:#e7e0cf; --line-2:#ddd4c0; --muted:#6f6786; --ok:#2f8f5b;
  color:var(--ink); line-height:1.5;
}
.zv-herroepen .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-herroepen .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.3) 0%,rgba(197,46,47,0) 55%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(38px,4.6vw,64px) 0 clamp(30px,3.5vw,46px); }
.zv-herroepen .page-hero .crumbs { font-size:12.5px; font-weight:700; color:#cdc6e8; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.zv-herroepen .page-hero .crumbs a { color:#cdc6e8; text-decoration:none; }
.zv-herroepen .page-hero .crumbs a:hover { color:#fff; }
.zv-herroepen .page-hero .crumbs b { color:#fff; }
.zv-herroepen .page-hero .eyebrow { display:inline-block; margin-top:14px; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lt); }
.zv-herroepen .page-hero h1 { color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:10px; }
.zv-herroepen .page-hero .lead { font-size:clamp(15px,1.5vw,17.5px); font-weight:500; color:#dcd6f0; margin-top:14px; max-width:62ch; line-height:1.6; }
.zv-herroepen .hp-wrap { padding:clamp(40px,4.5vw,68px) 0 clamp(56px,6vw,90px); background:var(--cream); }
.zv-herroepen .hp-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,3.5vw,44px); align-items:start; }
@media(max-width:900px){ .zv-herroepen .hp-grid { grid-template-columns:1fr; } }
.zv-herroepen .hp-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,38px); box-shadow:0 24px 54px -44px rgba(26,18,48,.5); }
.zv-herroepen .hp-card h2 { font-size:24px; font-weight:900; color:var(--indigo); letter-spacing:-.015em; }
.zv-herroepen .hp-card p.hint { font-size:14.5px; font-weight:500; color:var(--muted); margin-top:8px; line-height:1.5; }
.zv-herroepen .fld { margin-top:18px; }
.zv-herroepen .fld label { display:block; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.zv-herroepen .fld label .opt { font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
.zv-herroepen .fld input, .zv-herroepen .fld select, .zv-herroepen .fld textarea { width:100%; background:var(--cream); border:1.5px solid var(--line-2); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); }
.zv-herroepen .fld textarea { min-height:100px; resize:vertical; }
.zv-herroepen .fld input:focus, .zv-herroepen .fld select:focus, .zv-herroepen .fld textarea:focus { outline:none; border-color:var(--indigo); background:#fff; }
.zv-herroepen .fld-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .zv-herroepen .fld-row { grid-template-columns:1fr; } }
.zv-herroepen .fld-consent .hp-consent { display:flex; align-items:flex-start; gap:10px; margin-bottom:0; cursor:pointer; }
.zv-herroepen .fld-consent .hp-consent input { width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--indigo); }
.zv-herroepen .fld-consent .hp-consent span { font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.zv-herroepen .fld--invalid.fld-consent .hp-consent span { color:#9a2b2b; }
.zv-herroepen .fld-consent .hp-consent a { color:var(--indigo); font-weight:800; }
.zv-herroepen .hp-submit { margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.zv-herroepen .hp-priv { font-size:12.5px; font-weight:600; color:var(--muted); max-width:34ch; line-height:1.45; }
.zv-herroepen .hp-priv a { color:var(--indigo); font-weight:800; }
.zv-herroepen .hp-ok { margin-top:0; margin-bottom:18px; background:rgba(47,143,91,.1); border:1px solid rgba(47,143,91,.4); border-radius:12px; padding:16px 18px; color:#256b45; font-size:14.5px; font-weight:700; }
.zv-herroepen .hp-err { margin-bottom:14px; background:rgba(197,46,47,.08); border:1px solid rgba(197,46,47,.35); border-radius:12px; padding:13px 16px; color:#9a2b2b; font-size:14px; font-weight:700; }
.zv-herroepen .hp-err a { color:#9a2b2b; text-decoration:underline; }
.zv-herroepen .fld--invalid input, .zv-herroepen .fld--invalid select, .zv-herroepen .fld--invalid textarea { border-color:#c52e2f; background:rgba(197,46,47,.05); }
.zv-herroepen .hp-hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zv-herroepen .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; }
.zv-herroepen .btn svg { width:18px; height:18px; }
.zv-herroepen .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; padding:14px 24px; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-herroepen .btn--gold:hover { filter:brightness(1.03); }
.zv-herroepen .hp-pdf { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.zv-herroepen .hp-pdf .ic { flex:none; width:42px; height:42px; border-radius:12px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; }
.zv-herroepen .hp-pdf .ic svg { width:22px; height:22px; }
.zv-herroepen .hp-pdf h3 { font-size:15px; font-weight:900; color:var(--indigo); }
.zv-herroepen .hp-pdf p { font-size:13.5px; font-weight:500; color:var(--muted); margin-top:4px; line-height:1.5; }
.zv-herroepen .hp-pdf-link { display:inline-block; margin-top:8px; font-size:13.5px; font-weight:800; color:var(--indigo); text-decoration:underline; }
.zv-herroepen .hp-side { display:flex; flex-direction:column; gap:16px; }
.zv-herroepen .hp-opt { display:flex; gap:15px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 16px 40px -38px rgba(26,18,48,.5); }
.zv-herroepen .hp-opt .ic { flex:none; width:46px; height:46px; border-radius:13px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; }
.zv-herroepen .hp-opt .ic svg { width:24px; height:24px; }
.zv-herroepen .hp-opt h3 { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-herroepen .hp-opt p { font-size:14px; font-weight:500; color:#5b5374; margin-top:5px; line-height:1.5; }
.zv-herroepen .hp-opt a.big { display:inline-block; font-size:18px; font-weight:900; color:var(--ink); margin-top:6px; text-decoration:none; }
.zv-herroepen .hp-opt .sub { font-size:12.5px; font-weight:700; color:var(--muted); margin-top:4px; }
.zv-herroepen .hp-hours { background:var(--indigo-deep); color:#fff; border-radius:16px; padding:22px; }
.zv-herroepen .hp-hours h3 { font-size:15px; font-weight:900; letter-spacing:.01em; }
.zv-herroepen .hp-hours ul { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.zv-herroepen .hp-hours li { display:flex; justify-content:space-between; font-size:14px; font-weight:600; color:#d8d2ef; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:9px; }
.zv-herroepen .hp-hours li b { color:#fff; font-weight:800; }
/* END_SECTION:herroepen-page */

/* START_SECTION:hoe-het-werkt (INDEX:31) */
.zv-hoe {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --indigo-soft:#efecf7; --paper:#fffdf8;
  --cream:#fdfaf2; --band:#f4f0e6; --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08;
  --line:#e7e0cf; --muted:#6f6786;
  color:var(--ink); line-height:1.5;
}
.zv-hoe .wrap { max-width:1120px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-hoe .btn { font-weight:800; font-size:14px; border:none; border-radius:12px; padding:13px 20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s; }
.zv-hoe .btn svg { width:16px; height:16px; }
.zv-hoe .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -14px rgba(180,126,10,.85); }
.zv-hoe .btn--gold:hover { transform:translateY(-2px); }
.zv-hoe .btn--ghost { background:transparent; color:var(--indigo); border:1.6px solid var(--line); }
.zv-hoe .btn--ghost:hover { border-color:var(--indigo); }
.zv-hoe a:focus-visible { outline:2px solid var(--gold-lt); outline-offset:2px; }

/* hero */
.zv-hoe .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.34) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 4% 102%,rgba(0,80,159,.5) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,60px); }
.zv-hoe .page-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); }
.zv-hoe .page-hero .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-hoe .page-hero h1 { color:#fff; font-size:clamp(30px,4vw,52px); font-weight:900; letter-spacing:-.02em; line-height:1.03; margin-top:14px; max-width:22ch; text-wrap:balance; }
.zv-hoe .page-hero .lead { font-size:clamp(16px,1.5vw,19px); font-weight:500; color:#e4dffb; margin-top:16px; max-width:60ch; line-height:1.55; }

/* steps */
.zv-hoe .hw { background:var(--cream); padding:clamp(30px,4vw,56px) 0 clamp(20px,3vw,40px); }
.zv-hoe .hw-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s; }
@media(max-width:820px){ .zv-hoe .hw-steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .zv-hoe .hw-steps{ grid-template-columns:1fr; } }
.zv-hoe .hw-step { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:0 16px 40px -38px rgba(26,18,48,.5); counter-increment:s; }
.zv-hoe .hw-step::before { content:"0" counter(s); position:absolute; top:20px; right:20px; font-size:26px; font-weight:900; color:var(--gold); opacity:.5; font-variant-numeric:tabular-nums; }
.zv-hoe .hw-step .ic { width:52px; height:52px; border-radius:14px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; margin-bottom:16px; }
.zv-hoe .hw-step .ic svg { width:28px; height:28px; }
.zv-hoe .hw-step h3 { font-size:19px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; }
.zv-hoe .hw-step p { font-size:14.5px; font-weight:500; color:#5b5374; margin-top:9px; line-height:1.55; }

/* meldkamer flow */
.zv-hoe .hw-mk { background:var(--indigo-deep); color:#fff; padding:clamp(46px,5vw,84px) 0; position:relative; overflow:hidden; }
.zv-hoe .hw-mk::before { content:""; position:absolute; width:600px; height:600px; border-radius:50%; right:-180px; top:-200px; background:radial-gradient(circle,rgba(228,163,17,.2),transparent 62%); }
.zv-hoe .hw-mk .wrap { position:relative; }
.zv-hoe .hw-mk .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); }
.zv-hoe .hw-mk .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-hoe .hw-mk h2 { font-size:clamp(28px,3.4vw,44px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:14px; max-width:20ch; text-wrap:balance; }
.zv-hoe .hw-mk .lead { font-size:17px; color:#d8d2ef; margin-top:16px; max-width:56ch; line-height:1.6; }
.zv-hoe .hw-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }
@media(max-width:820px){ .zv-hoe .hw-timeline{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .zv-hoe .hw-timeline{ grid-template-columns:1fr; } }
.zv-hoe .hw-tl { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:22px 20px; }
.zv-hoe .hw-tl .t { font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-lt); }
.zv-hoe .hw-tl h4 { font-size:17px; font-weight:900; margin-top:8px; }
.zv-hoe .hw-tl p { font-size:13.5px; color:#cdc6e8; margin-top:7px; line-height:1.5; }

/* features */
.zv-hoe .hw-feat { background:var(--paper); padding:clamp(46px,5vw,84px) 0; }
.zv-hoe .hw-feat .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:760px){ .zv-hoe .hw-feat .grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.zv-hoe .hw-fcard { border:1px solid var(--line); border-radius:16px; padding:26px 24px; background:linear-gradient(180deg,#fffdf8,#f9f3e6); }
.zv-hoe .hw-fcard .ic { width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--indigo); display:grid; place-items:center; margin-bottom:14px; }
.zv-hoe .hw-fcard .ic svg { width:24px; height:24px; }
.zv-hoe .hw-fcard h3 { font-size:18px; font-weight:900; color:var(--indigo); }
.zv-hoe .hw-fcard p { font-size:14.5px; font-weight:500; color:#5b5374; margin-top:8px; line-height:1.55; }

/* cta */
.zv-hoe .hw-cta { background:var(--band); padding:clamp(46px,5vw,80px) 0; }
.zv-hoe .hw-cta .box { text-align:center; max-width:720px; margin:0 auto; }
.zv-hoe .hw-cta h2 { font-size:clamp(24px,2.8vw,36px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-hoe .hw-cta p { font-size:16px; color:var(--muted); margin:12px auto 0; max-width:52ch; line-height:1.55; }
.zv-hoe .hw-cta .row { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
/* END_SECTION:hoe-het-werkt */

/* START_SECTION:klantenservice (INDEX:38) */
.zv-svc {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --indigo-soft:#efecf7;
  --cream:#fdfaf2; --paper:#ffffff; --sand:#efe9d6; --gold:#e4a311; --gold-lt:#f5c84a;
  --belt:#9c6c08; --ok:#2f8f5b; --line:#e9e2d2; --line-2:#ddd5c2; --muted:#6f6786;
  background:var(--cream); color:var(--ink); line-height:1.5;
}
.zv-svc .wrap { max-width:1160px; margin:0 auto; padding:0 clamp(20px,3.4vw,48px); }
.zv-svc .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--belt); }
.zv-svc .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-svc h1, .zv-svc h2, .zv-svc h3 { color:var(--indigo); }
.zv-svc .btn { font-weight:800; font-size:15px; border:none; border-radius:12px; padding:14px 22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; text-decoration:none; transition:transform .14s,box-shadow .14s; }
.zv-svc .btn svg { width:18px; height:18px; }
.zv-svc .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 2px 0 var(--belt); }
.zv-svc .btn--gold:hover { transform:translateY(-1px); box-shadow:0 4px 0 var(--belt),0 12px 24px -12px rgba(180,126,10,.7); }
.zv-svc .btn--indigo { background:var(--indigo); color:#fff; }
.zv-svc .btn--indigo:hover { background:var(--indigo-2); }
.zv-svc .btn--ghost { background:transparent; color:var(--indigo); border:2px solid var(--indigo); padding:12px 20px; }
.zv-svc .btn--ghost:hover { background:var(--indigo-soft); }
.zv-svc a:focus-visible, .zv-svc button:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; border-radius:8px; }

/* hero */
.zv-svc .svc-hero { background:radial-gradient(120% 130% at 82% 0%, var(--indigo-soft) 0%, #f6eedd 46%, var(--cream) 100%); }
.zv-svc .svc-hero .wrap { text-align:center; display:flex; flex-direction:column; align-items:center; padding:clamp(48px,6vw,86px) clamp(20px,3.4vw,48px); }
.zv-svc .svc-hero h1 { font-size:clamp(32px,5vw,60px); font-weight:900; letter-spacing:-.025em; line-height:1; margin-top:14px; }
.zv-svc .svc-hero .intro { font-size:clamp(16px,1.6vw,18.5px); font-weight:500; color:#473f5e; margin-top:22px; line-height:1.6; max-width:52ch; }
.zv-svc .hero-search { display:flex; align-items:center; gap:10px; width:100%; max-width:560px; margin:30px auto 0; background:#fff; border:1.5px solid var(--line-2); border-radius:16px; padding:8px 8px 8px 18px; box-shadow:0 26px 54px -30px rgba(26,18,48,.5); }
.zv-svc .hero-search > svg { width:21px; height:21px; color:var(--muted); flex:none; }
.zv-svc .hero-search input { flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:16px; font-weight:500; color:var(--ink); padding:11px 4px; }
.zv-svc .hero-search input:focus { outline:none; }
.zv-svc .hero-search .btn { border-radius:12px; padding:13px 22px; white-space:nowrap; }
.zv-svc .popular { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center; margin-top:18px; }
.zv-svc .popular .pl { font-size:13px; font-weight:700; color:var(--muted); }
.zv-svc .popular .svc-pop { font-size:13px; font-weight:700; color:var(--indigo); background:var(--sand); border:none; border-radius:999px; padding:7px 13px; cursor:pointer; transition:.15s; }
.zv-svc .popular .svc-pop:hover { background:var(--indigo); color:#fff; }

/* faq */
.zv-svc .svc-faq { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(44px,5vw,72px) 0; }
.zv-svc .svc-faq .head { text-align:center; max-width:680px; margin:0 auto; }
.zv-svc .svc-faq h2 { font-size:clamp(28px,3.4vw,40px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:11px; }
.zv-svc .cats { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px auto 0; max-width:760px; }
.zv-svc .cat { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; color:var(--indigo); background:var(--cream); border:1.5px solid var(--line); border-radius:999px; padding:10px 16px; cursor:pointer; transition:.15s; }
.zv-svc .cat:hover { border-color:var(--indigo-2); }
.zv-svc .cat.on { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.zv-svc .cat .cdot { width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.zv-svc .cat.on .cdot { background:var(--gold-lt); }
.zv-svc .faq { max-width:720px; margin:30px auto 0; display:flex; flex-direction:column; gap:10px; }
.zv-svc .faq-chapter { display:flex; align-items:baseline; gap:12px; font-size:clamp(19px,2.1vw,23px); font-weight:900; letter-spacing:-.01em; color:var(--indigo); margin:38px 0 4px; padding-bottom:10px; border-bottom:2px solid var(--indigo-soft); }
.zv-svc .faq-chapter:first-child { margin-top:0; }
.zv-svc .faq-chapter[hidden] { display:none; }
.zv-svc .faq-chapter .fc-num { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; border-radius:9px; background:var(--indigo); color:#fff; font-size:14px; font-weight:900; }
.zv-svc .faq-item { background:var(--cream); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.zv-svc .faq-item[hidden] { display:none; }
.zv-svc .faq-q { width:100%; text-align:left; background:none; border:none; padding:17px 20px; display:flex; align-items:center; gap:14px; font-size:15.5px; font-weight:800; color:var(--ink); cursor:pointer; }
.zv-svc .faq-q .qtext { flex:1; }
.zv-svc .faq-q .qx { margin-left:auto; width:22px; height:22px; flex:none; color:var(--indigo); transition:transform .2s; }
.zv-svc .faq-item.open .faq-q .qx { transform:rotate(45deg); }
.zv-svc .faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.zv-svc .faq-a-inner { padding:0 20px 18px; font-size:14.5px; font-weight:500; color:#5b5374; line-height:1.6; }
.zv-svc .faq-a-inner a { color:var(--indigo); font-weight:700; }
.zv-svc .faq-empty { text-align:center; font-size:14.5px; font-weight:600; color:var(--muted); padding:24px; }
.zv-svc .faq-note { background:var(--indigo-soft); border-color:var(--indigo-soft); }
.zv-svc .faq-note-inner { padding:16px 20px; font-size:14px; font-weight:600; color:var(--indigo); line-height:1.6; }

/* direct contact */
.zv-svc .svc-direct { padding:clamp(44px,5vw,72px) 0; }
.zv-svc .svc-direct .head { text-align:center; max-width:640px; margin:0 auto 34px; }
.zv-svc .svc-direct .head h2 { font-size:clamp(28px,3.4vw,40px); font-weight:900; letter-spacing:-.02em; margin-top:11px; }
.zv-svc .ct-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,280px)); gap:16px; justify-content:center; }
@media (max-width:520px) { .zv-svc .ct-grid { grid-template-columns:1fr; } }
.zv-svc .ct { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 22px; text-align:left; transition:transform .15s,box-shadow .15s,border-color .15s; box-shadow:0 26px 54px -46px rgba(26,18,48,.4); }
.zv-svc .ct:hover { transform:translateY(-3px); border-color:var(--indigo-soft); box-shadow:0 32px 60px -44px rgba(26,18,48,.5); }
.zv-svc .ct .ci { width:50px; height:50px; border-radius:13px; background:var(--indigo-soft); display:grid; place-items:center; margin-bottom:16px; }
.zv-svc .ct .ci svg { width:24px; height:24px; color:var(--indigo); }
.zv-svc .ct h3 { font-size:17px; font-weight:900; color:var(--indigo); }
.zv-svc .ct p { font-size:13.5px; font-weight:600; color:var(--muted); margin-top:5px; line-height:1.45; }
.zv-svc .ct .cv { font-size:15px; font-weight:800; color:var(--belt); margin-top:14px; }
.zv-svc .hk-note { text-align:center; margin-top:24px; font-size:13.5px; font-weight:600; color:var(--muted); }
.zv-svc .hk-note a { color:var(--indigo); font-weight:800; text-decoration:underline; }

/* nieuwe klant */
.zv-svc .svc-klant { padding:clamp(48px,6vw,80px) 0; }
.zv-svc .svc-klant .card { background:linear-gradient(165deg,#fff,#fbf4e6); border:1px solid var(--line); border-radius:26px; padding:clamp(34px,4vw,52px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; box-shadow:0 40px 90px -54px rgba(26,18,48,.5); }
.zv-svc .svc-klant .kt h2 { font-size:clamp(26px,3vw,36px); font-weight:900; letter-spacing:-.02em; max-width:18ch; margin-top:11px; }
.zv-svc .svc-klant .kt p { font-size:16px; font-weight:500; color:#473f5e; margin-top:12px; max-width:46ch; line-height:1.55; }
.zv-svc .svc-klant .kb { display:flex; gap:12px; flex-wrap:wrap; }
.zv-svc .svc-klant .kb .btn { font-size:16px; padding:16px 26px; }
@media (max-width:600px) { .zv-svc .svc-klant .kb { width:100%; } .zv-svc .svc-klant .kb .btn { flex:1 1 100%; } }
/* END_SECTION:klantenservice */

/* START_SECTION:legal-page (INDEX:39) */
.zv-legal {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --gold-soft:#fbf0d4; --belt:#9c6c08; --line:#e7e0cf;
  --muted:#6f6786; --muted-2:#8c84a6;
  color:var(--ink); line-height:1.5;
}
.zv-legal .wrap { max-width:1000px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-legal .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.34) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 4% 102%,rgba(0,80,159,.5) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(40px,5vw,72px) 0 clamp(30px,3.5vw,48px); }
.zv-legal .page-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); }
.zv-legal .page-hero .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-legal .page-hero h1 { color:#fff; font-size:clamp(30px,4vw,52px); font-weight:900; letter-spacing:-.02em; line-height:1.03; margin-top:14px; max-width:22ch; text-wrap:balance; }
.zv-legal .page-hero .he-date { font-size:13.5px; font-weight:600; color:#cdc6e8; margin-top:12px; }
.zv-legal .lg-note { background:var(--gold-soft); border-top:1px solid #eddfba; border-bottom:1px solid #eddfba; }
.zv-legal .lg-note .wrap { display:flex; align-items:center; gap:12px; padding:13px 0; font-size:13.5px; font-weight:700; color:var(--belt); }
.zv-legal .lg-note svg { flex:none; width:20px; height:20px; }
.zv-legal .lg { background:var(--cream); padding:clamp(30px,4vw,56px) 0 clamp(56px,6vw,90px); }
.zv-legal .lg-body { max-width:760px; }
/* prose: styles the page-body legal content (lg-sec blocks or plain rte) */
.zv-legal .lg-body h2 { font-size:22px; font-weight:900; color:var(--indigo); letter-spacing:-.015em; line-height:1.2; margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.zv-legal .lg-body h2 .n { color:var(--gold); margin-right:8px; }
.zv-legal .lg-body > h2:first-child, .zv-legal .lg-body > .lg-sec:first-child h2 { margin-top:0; padding-top:0; border-top:none; }
.zv-legal .lg-body h3 { font-size:17px; font-weight:900; color:var(--indigo); margin-top:20px; }
.zv-legal .lg-body p { font-size:15.5px; font-weight:500; color:#463f5c; margin-top:14px; line-height:1.65; }
.zv-legal .lg-body ul, .zv-legal .lg-body ol { margin-top:14px; padding-left:20px; display:flex; flex-direction:column; gap:9px; }
.zv-legal .lg-body li { font-size:15px; font-weight:500; color:#463f5c; line-height:1.55; }
.zv-legal .lg-body b, .zv-legal .lg-body strong { color:var(--ink); font-weight:800; }
.zv-legal .lg-body a { color:var(--indigo); font-weight:800; text-decoration:underline; }
.zv-legal .lg-sec { scroll-margin-top:96px; }
.zv-legal .lg-callout { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--indigo); border-radius:10px; padding:16px 18px; margin-top:16px; font-size:14.5px; font-weight:600; color:#463f5c; line-height:1.6; }
.zv-legal .lg-contact { background:var(--indigo-deep); color:#fff; border-radius:16px; padding:24px 26px; margin-top:24px; }
.zv-legal .lg-contact h3 { font-size:17px; font-weight:900; color:#fff; margin-top:0; }
.zv-legal .lg-contact p { color:#d8d2ef; }
.zv-legal .lg-contact a { color:var(--gold-lt); }
/* END_SECTION:legal-page */

/* START_SECTION:mantelzorg-gids (INDEX:60) */
.zv-gids {
  --ink:#1a1230; --indigo:#322469; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --line:#e7e0cf; --line-2:#ddd4c0;
  --muted:#6f6786; --ok:#2f8f5b;
  color:var(--ink); line-height:1.5;
}
.zv-gids .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-gids .gd { background:var(--cream); padding:clamp(40px,5vw,80px) 0 clamp(56px,6vw,96px); position:relative; overflow:hidden; }
.zv-gids .gd::before { content:""; position:absolute; width:560px; height:560px; border-radius:50%; left:-200px; top:-160px; background:radial-gradient(circle,rgba(228,163,17,.16),transparent 62%); }
.zv-gids .gd-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr .9fr; gap:clamp(34px,5vw,72px); align-items:center; }
@media(max-width:900px){ .zv-gids .gd-grid { grid-template-columns:1fr; } }
.zv-gids .eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--belt); }
.zv-gids h1 { font-size:clamp(32px,4.2vw,54px); font-weight:900; color:var(--indigo); letter-spacing:-.025em; line-height:1.02; margin-top:14px; text-wrap:balance; }
.zv-gids .lead { font-size:clamp(16px,1.6vw,20px); font-weight:500; color:#5b5374; margin-top:18px; max-width:48ch; line-height:1.6; }
.zv-gids .gd-list { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.zv-gids .gd-list li { display:flex; gap:13px; align-items:flex-start; font-size:16px; font-weight:600; color:#463f5c; line-height:1.45; }
.zv-gids .gd-list .ck { flex:none; width:26px; height:26px; border-radius:50%; background:var(--gold); display:grid; place-items:center; margin-top:1px; }
.zv-gids .gd-list .ck svg { width:15px; height:15px; color:var(--indigo); }
.zv-gids .gd-form { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3vw,40px); box-shadow:0 34px 74px -46px rgba(26,18,48,.55); }
.zv-gids .gd-cover { position:relative; background:linear-gradient(150deg,#322469,#473a86); border-radius:14px; aspect-ratio:1/1.18; margin:-70px auto 22px; max-width:200px; box-shadow:0 30px 60px -28px rgba(40,28,84,.7); display:flex; flex-direction:column; justify-content:space-between; padding:20px 18px; color:#fff; transform:rotate(-3deg); }
.zv-gids .gd-cover .k { font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-lt); }
.zv-gids .gd-cover h3 { font-size:22px; font-weight:900; line-height:1.05; letter-spacing:-.01em; }
.zv-gids .gd-cover .b { font-size:11px; font-weight:700; color:#d8d2ef; }
@media(max-width:900px){ .zv-gids .gd-cover { margin-top:0; } }
.zv-gids .gd-form h2 { font-size:22px; font-weight:900; color:var(--indigo); letter-spacing:-.015em; text-align:center; }
.zv-gids .gd-form p.sub { font-size:14.5px; font-weight:500; color:var(--muted); text-align:center; margin-top:8px; line-height:1.5; }
.zv-gids .gd-form p.sub a { color:var(--indigo); font-weight:800; }
.zv-gids .gd-fld { margin-top:16px; }
.zv-gids .gd-fld label { display:block; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.zv-gids .gd-fld input { width:100%; background:var(--cream); border:1.5px solid var(--line-2); border-radius:12px; padding:14px 15px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); }
.zv-gids .gd-fld input:focus { outline:none; border-color:var(--indigo); background:#fff; }
.zv-gids .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; }
.zv-gids .btn svg { width:18px; height:18px; }
.zv-gids .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; padding:14px 24px; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-gids .gd-form .btn { width:100%; justify-content:center; margin-top:20px; }
.zv-gids .gd-priv { font-size:12px; font-weight:600; color:var(--muted); text-align:center; margin-top:14px; line-height:1.45; }
.zv-gids .gd-priv a { color:var(--indigo); font-weight:800; }
.zv-gids .gd-trust { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:16px; font-size:12.5px; font-weight:700; color:var(--ok); }
.zv-gids .gd-trust svg { width:15px; height:15px; }
/* END_SECTION:mantelzorg-gids */

/* START_SECTION:oplossingen (INDEX:64) */
/* Dawn-proof reset: the design relies on a global *{margin:0}; scope it to this page only. */
.opl-page h2, .opl-page h3, .opl-page h4, .opl-page p, .opl-page ul, .opl-page li, .opl-page summary { margin: 0; padding: 0; }
.opl-page ul { list-style: none; }
.opl-page { background: var(--paper); }
.opl-panel[hidden] { display: none; }

/* ---- category switcher (VERBATIM) ---- */
.catnav { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 15px clamp(20px, 3.4vw, 48px); background: var(--cream); border-bottom: 1px solid var(--line); }
.catnav__lbl { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.catnav__tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.catnav__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px solid var(--line-2); background: #fff; border-radius: 13px; padding: 9px 18px; cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.catnav__t b { font-size: 15px; font-weight: 800; color: #3a3550; line-height: 1.15; }
.catnav__t span { font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
.catnav__t:hover { border-color: var(--indigo); transform: translateY(-1px); }
.catnav__t:hover b { color: var(--indigo); }
.catnav__t--link { text-decoration: none; color: inherit; line-height: normal; }
.catnav__t.on { background: var(--indigo); border-color: var(--indigo); }
.catnav__t.on b { color: #fff; }
.catnav__t.on span { color: #cdc6e8; }
@media (max-width: 640px) { .catnav__lbl { display: none; } .catnav__t { padding: 8px 14px; } }

/* ---- hero (VERBATIM) ---- */
.hero { --hero-pad-x: clamp(20px, 3.6vw, 52px); position: relative; display: block; background: var(--paper); max-width: 1240px; margin: 0 auto; padding: clamp(10px, 1.4vw, 18px) var(--hero-pad-x) clamp(24px, 3vw, 40px); }
.vhero { position: relative; overflow: visible; border-radius: 0; height: clamp(440px, 44vw, 600px); display: flex; align-items: center; background: repeating-linear-gradient(135deg, #2d2156 0 22px, #281c54 22px 44px); box-shadow: none; }
.vhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: 8px; box-shadow: 0 40px 90px -54px rgba(26, 18, 48, 0.6); }
.vhero::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; pointer-events: none; background: linear-gradient(90deg, rgba(18, 12, 38, 0.5) 0%, transparent 26%, transparent 74%, rgba(18, 12, 38, 0.5) 100%); }
/* Negative margin pulls the card left over the photo (intentional bleed). Floored so the card's
   own left padding never overlaps .hero's left padding — otherwise its text clips at .hero's edge. */
.vhero__copy { position: relative; z-index: 2; margin: 0 0 0 max(clamp(-96px, -6.5vw, -44px), calc(-1 * var(--hero-pad-x) + 12px)); max-width: 440px; background: rgba(253, 250, 242, 0.94); border-radius: 6px; padding: clamp(26px, 2.7vw, 38px); box-shadow: 0 40px 80px -40px rgba(26, 18, 48, 0.6); }
.vhero__eye { font-size: 12.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #9c6c08; }
.hero .vhero__copy h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--indigo); margin-top: 14px; text-wrap: balance; }
.vhero__bul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.vhero__bul li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 700; color: #5b5374; }
.vhero__bul .bchk { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.vhero__bul .bchk svg { width: 15px; height: 15px; color: var(--indigo); }
.vhero__copy .vhero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.vhero__cta a { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; border-radius: 13px; padding: 14px 22px; text-decoration: none; transition: transform 0.14s; }
.vhero__cta a:hover { transform: translateY(-1px); }
.vhero__cta a svg { width: 18px; height: 18px; }
.vhero__cta .cta-gold { background: var(--gold); color: var(--ink); box-shadow: 0 2px 0 var(--belt); }
.vhero__partners { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: clamp(16px, 2.2vw, 26px) 4px clamp(4px, 1vw, 10px); }
.vhero__pnote { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vhero__logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vhero__logos .lchip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -18px rgba(26, 18, 48, 0.4); }
.vhero__logos .lchip img { height: 24px; width: auto; display: block; }
.vhero__logos .lchip.sec img { height: 30px; }

/* ---- product grid (VERBATIM) ---- */
.pak { position: relative; padding: clamp(34px, 3.6vw, 50px) clamp(24px, 3.4vw, 56px) clamp(30px, 3vw, 42px); background: linear-gradient(180deg, #fbf5e9 0%, #f4ecda 100%); border-top: 1px solid var(--line); }
.pak__head { max-width: 1080px; margin: 0 auto 26px; }
.pak__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pak__head h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; color: var(--indigo); letter-spacing: -0.015em; line-height: 1.05; }
.pak__head .ph-sub { font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.pak__head .compare { font-size: 14px; font-weight: 800; color: var(--indigo); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.pak__head .compare svg { width: 16px; height: 16px; }
.pgrid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); max-width: calc(var(--cols, 3) * 360px); margin-left: auto; margin-right: auto; }
.pgrid[data-n="1"] { --cols: 1; } .pgrid[data-n="2"] { --cols: 2; } .pgrid[data-n="3"] { --cols: 3; }
/* Equal-height cards, actions pinned to the bottom (2026-09-24, every tab). The grid's default
   align-items:stretch keeps each row's cards the same height, and each card is a flex column
   whose action block has margin-top:auto (.ltc__cta for the ltc cards, .pcard__foot for the
   tile/Vista card). Any extra height therefore sits between the bullets and the actions, and
   the "In winkelwagen" buttons line up across a row. Mijn Thuis used to override both margins
   to 0 and grow a trailing .ltc__spacer instead, which put the space under the actions
   (195px under Alert and 249px under Protect at 1280, next to the taller Vista). That
   override and the spacer are gone. */
.pcard { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px 24px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(26, 18, 48, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pcard:hover { border-color: var(--line-2); box-shadow: 0 6px 20px -12px rgba(26, 18, 48, 0.22); }
.pcard.pop { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), 0 18px 44px -22px rgba(50, 36, 105, 0.45); }
.pcard.pop .pcard__flag { background: var(--indigo); color: #fff; border-radius: 999px; padding: 5px 12px; align-self: flex-start; margin-bottom: 14px; }
.pcard__flag { align-self: flex-start; margin-bottom: 12px; color: var(--belt); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pcard--tile { padding-top: 14px; }
/* Vista (2026-09-23): the tile article now opens with the same .ltc__head as Alert/Protect,
   so give it their top padding, or its header sits 10px higher in the Mijn Thuis row. */
.pcard--tile.pcard--vista { padding-top: 24px; scroll-margin-top: 132px; }
/* ...and after its .ltc__div the form starts right away (ltc cards: 18px after the divider),
   instead of the tile's extra 16px .pcard__cta margin on top of the divider's own 18px. */
.pcard--vista .pcard__cta { margin-top: 0; }
.pcard__tileimg { border-radius: 6px; overflow: hidden; margin: 0 0 16px; border: 1px solid var(--line); }
.pcard__tileimg img { width: 100%; height: auto; display: block; }
.pcard__foot { margin-top: auto; padding-top: 4px; }
.pcard__price { display: flex; align-items: baseline; gap: 7px; }
.pcard__price .amt { font-size: 27px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.pcard__price .per { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.pcard__sub { font-size: 12.5px; font-weight: 600; color: #797290; margin-top: 3px; }
.pcard__sku { font-size: 12px; font-weight: 500; color: var(--muted-2); margin-top: 8px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pcard__cta { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pcard__plus { margin-top: 0; border: none; border-top: 1px solid var(--line); border-radius: 0; overflow: hidden; background: none; }
.pcard__plus summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--indigo); padding: 12px 2px; transition: color 0.15s; }
.pcard__plus summary:hover { color: var(--belt); }
.pcard__plus summary::-webkit-details-marker { display: none; }
.pcard__plus summary svg { width: 15px; height: 15px; transition: transform 0.2s; }
.pcard__plus[open] summary svg { transform: rotate(180deg); }
.pcard__plus-opt { display: flex; align-items: center; gap: 9px; padding: 0 2px 12px; font-size: 13px; font-weight: 700; color: #4a4458; cursor: pointer; }
.pcard__plus-opt input { width: 17px; height: 17px; accent-color: #322469; flex: none; cursor: pointer; }
/* Quantity row (Afstandsbediening, 2026-10-29): a count instead of a checkbox. */
.pcard__plus-opt [data-zv-qty] { width: 58px; height: 28px; padding: 0 4px; border: 1.5px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; text-align: center; }
.pcard__plus-opt span:nth-of-type(1) { flex: 1; }
.pcard__plus-pr { font-weight: 900; color: var(--belt); }
.pcard__plus-hint { font-size: 12px; font-weight: 600; color: var(--muted-2); margin: -2px 2px 10px; }
.pcard__term { font-size: 12.5px; font-weight: 700; color: var(--muted-2); padding: 10px 2px; border-top: 1px solid var(--line); margin-top: 2px; }
.pcard__cta .btn { width: 100%; justify-content: center; font-size: 14.5px; padding: 13px 18px; border-radius: 6px; }
.pcard__cta .btn--ghost { border-width: 1.5px; }
/* Same border box as the ghost button (2026-09-24): .btn has border:none, so the gold button
   was one ghost border shorter (44 vs 46px at 1x, 47px at 2x). Next to a ghost card, its
   bottom-pinned action block started lower and the buttons didn't line up. A transparent
   border of the same width makes both variants the same height. */
.pcard__cta .btn--gold { border: 1.5px solid transparent; }
.pcard__direct { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font-family: inherit; font-weight: 800; font-size: 13.5px; color: var(--indigo); cursor: pointer; padding: 5px 4px; transition: color 0.14s; }
.pcard__direct svg { width: 15px; height: 15px; transition: transform 0.16s; }
.pcard__direct:hover { color: var(--belt); }
.pcard__direct:hover svg { transform: translateX(3px); }

/* Card-grid redesign (2026-09-11 Langer Thuis, 2026-09-14 extended to Mijn Thuis
   Alert/Protect). Reuses .pcard/.pcard__flag/.pcard__price/.pcard__plus-opt/
   .pcard__plus-pr/.pcard__plus-hint from the shared tile-card rules above. */
.pcard--ltc { padding-top: 24px; }
/* Popular flag straddles the card's top border instead of sitting in flex flow (Robi
   feedback, 2026-09-14): the base .pcard.pop .pcard__flag rule pushes .ltc__head down on
   the popular card only, misaligning the three-card header row. Out of flow here, .ltc__head
   is the true first flex child on every ltc card regardless of which one is popular. */
.pcard--ltc.pop .pcard__flag { position: absolute; top: -13px; right: 16px; margin-bottom: 0; white-space: nowrap; z-index: 1; }
.ltc__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ltc__icon { flex: none; width: 40px; height: 40px; }
.ltc__icon svg { width: 100%; height: 100%; }
.ltc__headtext { min-width: 0; }
.ltc__name { margin: 0; font-size: 18px; font-weight: 900; color: var(--ink); }
.ltc__tagline { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.ltc__term { font-size: 12.5px; font-weight: 700; color: var(--muted-2); margin: 4px 0 0; }
.ltc__checklist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ltc__checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 600; color: #4a4458; line-height: 1.4; }
.ltc__checklist .bchk { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; margin-top: 1px; }
.ltc__checklist .bchk svg { width: 11px; height: 11px; }
.ltc__checklist a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.ltc__intro { font-weight: 800; color: var(--indigo); }
.ltc__div { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.ltc__hw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ltc__hw li { font-size: 12.5px; font-weight: 600; color: var(--muted-2); line-height: 1.4; padding-left: 13px; position: relative; }
.ltc__hw li::before { content: '\2013'; position: absolute; left: 0; }
.ltc__cta { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ltc__buy { width: 100%; justify-content: center; font-family: inherit; font-size: 14.5px; padding: 0 18px; min-height: 46px; box-sizing: border-box; border-radius: 6px; }
/* Card actions (2026-09-24, Thijs): "Wat zit erin?" and "Uitbreidingen" are full-width secondary
   buttons, stacked 8px apart, in the outline "In winkelwagen" style: the ghost variant's white
   fill, 1.5px var(--line-2) border, indigo text and cream/indigo hover (zv-chrome.css .btn--ghost),
   with the 6px radius and the 14.5px/800 size and weight of .pcard__cta .btn, 46px tall like
   "In winkelwagen" (border-box, so every pixel ratio gives 46; one 8px gap between all three). No 2px hover lift: the summary would lift away
   from its own open panel. The chevron stays. Each panel is inside its own <details>, so it
   opens directly under its button and pushes the next one down. "Meer informatie" stays a
   centred text link underneath. Scoped to .pcard .ltc__cta: the cart drawer never clones these
   summaries, only the .ltc__optgroup blocks inside the Uitbreidingen panel
   (hydrateLineOptions()), and those keep their own rules below. */
.pcard .ltc__cta .ltc__links { display: flex; flex-direction: column; gap: 8px; }
.ltc__watzit, .ltc__uitbreidingen { text-align: center; }
.pcard .ltc__cta .ltc__watzit summary, .pcard .ltc__cta .ltc__uitbreidingen summary { list-style: none; cursor: pointer; box-sizing: border-box; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 6px; font-size: 14.5px; font-weight: 800; line-height: 1; color: var(--indigo); transition: background 0.15s, border-color 0.15s; }
.pcard .ltc__cta .ltc__watzit summary:hover, .pcard .ltc__cta .ltc__uitbreidingen summary:hover { background: var(--cream); border-color: var(--indigo); color: var(--indigo); }
.ltc__watzit summary::-webkit-details-marker, .ltc__uitbreidingen summary::-webkit-details-marker { display: none; }
.ltc__watzit summary svg, .ltc__uitbreidingen summary svg { width: 14px; height: 14px; transition: transform 0.2s; }
.ltc__watzit[open] summary svg, .ltc__uitbreidingen[open] summary svg { transform: rotate(180deg); }
.ltc__panel { text-align: left; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ltc__optgroup { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ltc__optgroup:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.ltc__optgroup-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--indigo); }
.ltc__more { display: inline-flex; align-items: center; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; padding: 4px 2px; transition: color 0.14s; }
.ltc__more:hover { color: var(--belt); }
/* In the stacked column above, keep the text link its own width and centred (a column flex item
   would otherwise stretch to full width, with the text at the left). */
.pcard .ltc__cta .ltc__more { align-self: center; }
/* Grid footnote (2026-09-24): one full-width line centred directly under the cards, exactly as
   wide as the .pgrid above it. It used to be `.ltc__footnote { max-width: 760px; margin: 22px auto 0 }`,
   but the page reset `.opl-page p { margin: 0 }` (0,1,1) beat that rule (0,1,0), so the auto
   margins never applied: the 760px box sat at the left edge of .pak's content box, left of the
   centred 1080px grid at 1280px and up, with no gap under the cards. Two classes (0,2,0) now
   win over the reset. max-width repeats the grid's own calc(var(--cols) * 360px), and 420px at
   720px and below, with --cols taken from the grid's data-n, so both boxes stay the same width. */
.pgrid[data-n="1"] + .ltc__footnote { --cols: 1; } .pgrid[data-n="2"] + .ltc__footnote { --cols: 2; }
.pak .ltc__footnote { max-width: calc(var(--cols, 3) * 360px); margin: 22px auto 0; font-size: 12.5px; font-weight: 600; color: var(--muted-2); line-height: 1.5; text-align: center; }
@media (max-width: 720px) { .pak .ltc__footnote { max-width: 420px; } }
.ltc__buy[aria-busy="true"] { opacity: 0.6; cursor: default; }
/* Huren/Kopen (2026-10-23): segmented choice on the package card and under a hardware add-on row.
   Huren (default) leaves the card as before; .is-koop swaps the huur price, looptijd and buy
   button for the .ltc__koop-only blocks. */
.ltc__mode { display: inline-flex; align-self: flex-start; gap: 2px; margin: 0 0 12px; padding: 3px; background: var(--cream); border: 1.5px solid var(--line-2); border-radius: 999px; }
.ltc__mode label { position: relative; cursor: pointer; }
.ltc__mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ltc__mode span { display: block; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--muted); }
.ltc__mode input:checked + span { background: var(--indigo); color: #fff; }
.ltc__mode input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* Uitbreidingen list (2026-10-27): one bordered list, a row per add-on. A row is the checkbox and the
   name and, where there is a real Huren/Kopen choice, the two-segment control (.ltc__mode--seg) on its own
   line right under the name: a grid, two equal columns across the full row, each segment a single line
   ("Huren <price>/mnd", "Kopen <price>"). A single-option row (Ontzorgpakket, NAMI's Koop-only Videodeurbel) has just its
   price at the right. Row padding and the name-to-control gap were halved 2026-10-27 so a toggleable row
   reads as a plain row plus one compact line. The price inside the label (.pcard__plus-pr) is only for
   the cart drawer, which drops the control: the card hides it while the row has one. */
.ltc__list { border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
.ltc__list > * { border-top: 1px solid var(--line); }
.ltc__list > *:first-child { border-top: none; }
.ltc__list > .pcard__plus-opt, .ltc__list > .pcard__plus-item { padding: 5px 12px; }
.ltc__list .pcard__plus-item .pcard__plus-opt { padding: 0; }
.ltc__list .pcard__plus-pr { white-space: nowrap; }
.pcard__plus-item { display: grid; gap: 4px; }
.pcard__plus-item:has(.ltc__mode) .pcard__plus-pr { display: none; }
.ltc__mode--seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 2px; gap: 2px; border-radius: 9px; }
.ltc__mode--seg label { display: block; min-width: 0; }
.ltc__mode--seg span { padding: 4px 2px; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; white-space: nowrap; }
/* The list is the container: its width is 175px (tablet, 3 columns) to ~316px (large phone), not a
   fixed ~300. 12px text needs a list of ~264px, 11px ~248px; below that the two segments stack, still
   one line each. Measured with the widest pair, Videodeurbel's Huren and compact Kopen text. */
.ltc__list { container-type: inline-size; }
@container (min-width: 262px) { .ltc__mode--seg span { font-size: 12px; } }
@container (max-width: 244px) { .ltc__mode--seg { grid-template-columns: minmax(0, 1fr); } }
.pcard--ltc:not(.is-koop) .ltc__koop-only { display: none; }
.pcard--ltc.is-koop .ltc__huur-only { display: none; }
.pcard--ltc.is-koop > .pcard__price, .pcard--ltc.is-koop > .ltc__term, .pcard--ltc.is-koop .ltc__buy[data-zv-add] { display: none; }
.ltc__koopprice { display: flex; align-items: baseline; gap: 7px; }
.ltc__koopprice .amt { font-size: 27px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.ltc__koopprice .per { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ltc__koopnote { font-size: 12.5px; font-weight: 700; color: var(--muted-2); margin: 4px 0 0; }
.ltc__buy--soon[disabled] { opacity: 0.55; cursor: not-allowed; }
.pcard__plus-opt.is-soon { cursor: default; }
.pcard__plus-opt.is-soon span { color: var(--muted); }

.pgnote { display: flex; align-items: center; gap: 12px; margin: 26px auto 0; background: var(--indigo-soft); border: 1px solid #ddd5f0; border-radius: 14px; padding: 14px 18px; max-width: 760px; }
.pgnote .pn-ic { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px #ddd5f0; }
.pgnote .pn-ic svg { width: 20px; height: 20px; color: var(--indigo); }
.pgnote b { color: var(--indigo); font-weight: 800; }
.pgnote span { font-size: 13.5px; font-weight: 600; color: #4a4458; line-height: 1.4; }
.mt-camhw { max-width: 1080px; margin: 30px auto 0; padding: clamp(28px, 3.2vw, 42px) clamp(24px, 3.4vw, 48px); background: var(--gold); border-radius: 16px; box-shadow: 0 2px 0 var(--belt); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mt-camhw h3 { font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.mt-camhw__btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--ink); background: var(--paper); border-radius: 13px; padding: 15px 26px; text-decoration: none; transition: transform 0.14s; }
.mt-camhw__btn:hover { transform: translateY(-1px); }
.mt-camhw__btn svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .vhero__copy { margin: 0 16px -28px; max-width: none; } }
@media (max-width: 720px) { .pgrid, .pgrid[data-n="2"], .pgrid[data-n="3"] { --cols: 1; max-width: 420px; } }

/* ---- Waarom Zo Veilig (VERBATIM) ---- */
.opl-page .why { padding: clamp(48px, 5vw, 84px) clamp(24px, 3.4vw, 60px); background: var(--paper); border-top: 1px solid var(--line); }
.why__head { max-width: 760px; margin: 0 auto clamp(26px, 3vw, 44px); text-align: center; }
.why__eye { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--belt); }
.why__eye .d { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.why__head h3 { margin-top: 12px; font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -0.02em; color: var(--indigo); line-height: 1.08; text-wrap: balance; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.2vw, 40px); max-width: 1080px; margin: 0 auto; }
.why__card { display: flex; flex-direction: column; }
.why__ph { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: var(--sand-2); box-shadow: 0 28px 56px -30px rgba(26, 18, 48, 0.5), 0 4px 12px -7px rgba(26, 18, 48, 0.3); }
.why__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(37, 26, 77, 0.22) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.why__card h4 { margin-top: 20px; font-size: clamp(20px, 2.1vw, 27px); font-weight: 900; letter-spacing: -0.015em; color: var(--ink); line-height: 1.12; text-wrap: balance; }
.why__card p { margin-top: 11px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.why__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 15px; font-weight: 800; color: var(--belt); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; align-self: flex-start; }
.why__link:hover { border-color: var(--gold); }
.why__link svg { width: 18px; height: 18px; transition: transform 0.2s; }
.why__link:hover svg { transform: translateX(4px); }
@media (max-width: 820px) { .why__grid { grid-template-columns: 1fr; } }

/* ---- Direct online geregeld / Stappen (VERBATIM) ---- */
.opl-page .stappen { padding: clamp(40px, 4vw, 60px) clamp(24px, 3.4vw, 56px); background: var(--cream); border-top: 1px solid var(--line); }
.stappen h2 { text-align: center; color: var(--indigo); font-size: clamp(24px, 2.8vw, 32px); font-weight: 900; letter-spacing: -0.015em; line-height: 1.1; margin: 0 auto; max-width: 20ch; }
.stappen .st-sub { text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 11px; }
.steprow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 38px auto 0; max-width: 1180px; }
@media (max-width: 880px) { .steprow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steprow { grid-template-columns: 1fr; } }
.stap { display: flex; gap: 14px; }
.stap .sic { width: 50px; height: 50px; flex: none; border-radius: 13px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.stap .sic svg { width: 25px; height: 25px; color: var(--indigo); }
.stap.hl .sic { background: var(--indigo); border-color: var(--indigo); }
.stap.hl .sic svg { color: var(--gold-lt); }
.stap .sk { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.stap b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); margin-top: 2px; line-height: 1.2; }
.stap p { font-size: 13.5px; font-weight: 500; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.stap .belbtn { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 13px; font-weight: 800; color: var(--indigo); background: var(--sand); border: none; border-radius: 9px; padding: 9px 13px; cursor: pointer; font-family: inherit; text-decoration: none; }
.stap .belbtn svg { width: 15px; height: 15px; }

/* ---- Partners / technology band (VERBATIM) ---- */
.opl-page .partners { background: radial-gradient(64% 120% at 95% 0%, rgba(197, 46, 47, 0.42) 0%, rgba(197, 46, 47, 0) 55%), radial-gradient(66% 122% at 3% 102%, rgba(0, 80, 159, 0.6) 0%, rgba(0, 80, 159, 0) 58%), linear-gradient(180deg, #2c3076 0%, #262a64 100%); color: #fff; padding: clamp(34px, 3.4vw, 48px) clamp(24px, 3.4vw, 56px); display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: center; }
.partners__t { max-width: 42ch; }
.partners__t .eb { font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); }
.partners__t .partners__h { font-size: clamp(20px, 2vw, 26px); font-weight: 900; line-height: 1.12; margin-top: 11px; letter-spacing: -0.01em; color: #fff; }
.partners__t p { font-size: 14.5px; font-weight: 500; color: #cdc6e8; margin-top: 10px; line-height: 1.5; }
.opl-page .partners .walkthrough-btn { display: inline-flex; align-items: center; gap: 11px; margin-top: 20px; background: var(--indigo); color: #fff; border-radius: 999px; padding: 8px 20px 8px 8px; font-weight: 800; font-size: 14px; line-height: 1; text-decoration: none; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); transition: transform 0.15s; }
.opl-page .partners .walkthrough-btn:hover { transform: translateY(-2px); }
.opl-page .partners .walkthrough-btn:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.opl-page .partners .walkthrough-btn .play { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.opl-page .partners .walkthrough-btn .play svg { width: 14px; height: 14px; color: #26190a; margin-left: 2px; }
.partners__logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.logochip { background: #fff; border-radius: 13px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.5); }
.logochip img { height: 30px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.logochip.sec img { height: 34px; }
@media (max-width: 880px) { .opl-page .partners { grid-template-columns: 1fr; } .partners__logos { justify-content: flex-start; } }
@media (max-width: 560px) { .opl-page .partners__logos { display: grid; grid-template-columns: 1fr 1fr; } .opl-page .partners__logos .logochip { width: 100%; } }

/* Meer informatie modal / breakout (pb- and pbd- classes). NB: no bare asterisk-slash in this comment. */
.pb-scrim { position: fixed; inset: 0; z-index: 9999; background: rgba(17, 14, 45, 0.52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: flex-end; animation: pbFade 0.2s ease; }
.pb-scrim[hidden] { display: none; }
/* Body scroll-lock while the drawer is open. JS sets top:-scrollY for exact restore. */
body.zv-drawer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
@keyframes pbFade { from { opacity: 0; } to { opacity: 1; } }
.pb-panel { position: relative; width: min(74vw, 1180px); max-width: calc(100vw - 200px); height: 100%; min-height: 100%; display: flex; flex-direction: column; color: #fff; background: radial-gradient(64% 120% at 96% 0%, rgba(197, 46, 47, 0.34) 0%, rgba(197, 46, 47, 0) 55%), radial-gradient(66% 122% at 2% 102%, rgba(0, 80, 159, 0.5) 0%, rgba(0, 80, 159, 0) 58%), linear-gradient(180deg, #2c3076 0%, #242a5f 100%); box-shadow: -50px 0 120px -40px rgba(0, 0, 0, 0.72); animation: pbSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 1024px) { .pb-panel { width: 92vw; max-width: 92vw; } }
@media (max-width: 640px) { .pb-panel { width: 100vw; max-width: 100vw; } }
@keyframes pbSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.pb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.8vw, 38px) clamp(16px, 1.8vw, 22px); border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.pb-eye { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); }
.pb-eye .d { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pb-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.015em; margin-top: 10px; line-height: 1.06; color: var(--zv-heading-on-dark); }
.pb-lead { font-size: 14px; font-weight: 500; color: #cdc6e8; margin-top: 9px; max-width: 62ch; line-height: 1.5; }
.pb-lead b { color: #fff; font-weight: 800; }
.pb-x { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 0.15s; }
.pb-x svg { width: 20px; height: 20px; } .pb-x:hover { background: rgba(255, 255, 255, 0.18); }
.pb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(20px, 2.6vw, 32px) clamp(20px, 2.8vw, 38px) clamp(28px, 3vw, 40px); }
.pb-buy { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 9px; border: none; border-radius: 6px; padding: 14px 18px; font-family: inherit; font-weight: 900; font-size: 14.5px; cursor: pointer; margin-top: 14px; background: var(--gold); color: var(--ink); box-shadow: 0 2px 0 var(--belt); transition: transform 0.14s, box-shadow 0.14s; }
.pb-buy svg { width: 18px; height: 18px; }
.pb-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--belt), 0 12px 24px -12px rgba(180, 126, 10, 0.7); }
.pb-buy[disabled] { opacity: 0.6; cursor: default; transform: none; }
.pb-buy-2 { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font-family: inherit; font-weight: 800; font-size: 13px; color: var(--indigo); cursor: pointer; margin-top: 9px; padding: 4px; }
.pb-buy-2 svg { width: 15px; height: 15px; transition: transform 0.16s; }
.pb-buy-2:hover svg { transform: translateX(3px); }
.pbd-flag { display: inline-block; vertical-align: middle; margin-left: 12px; background: none; color: var(--gold-lt); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; padding: 0; }
.pbd-switch { display: inline-flex; gap: 5px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 13px; padding: 5px; margin-bottom: 22px; flex-wrap: wrap; }
.pbd-tab { border: none; background: transparent; color: #d3cdea; font-family: inherit; font-weight: 800; font-size: 13.5px; border-radius: 9px; padding: 9px 16px; cursor: pointer; transition: background 0.14s, color 0.14s; }
.pbd-tab:hover { background: rgba(255, 255, 255, 0.08); }
.pbd-tab.on { background: var(--paper); color: var(--indigo); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.4); }
.pbd-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .pbd-main { grid-template-columns: 1fr; } }
.pbd-left { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 22px 24px 12px; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.5); }
.pbd-sec-h { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--belt); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pbd-items { list-style: none; }
.pbd-item { display: flex; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pbd-item:last-child { border-bottom: none; }
.pbd-ic { width: 22px; height: 22px; border-radius: 50%; background: #eaf3ee; display: grid; place-items: center; flex: none; margin-top: 2px; }
.pbd-ic svg { width: 13px; height: 13px; color: var(--ok); }
.pbd-it-body { flex: 1; min-width: 0; }
.pbd-it-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pbd-it-name { font-size: 16px; font-weight: 800; color: var(--indigo); line-height: 1.2; }
.pbd-qty { color: var(--belt); font-weight: 900; margin-right: 5px; }
.pbd-it-tag { font-size: 13.5px; font-weight: 500; color: #5b5374; margin-top: 5px; line-height: 1.45; }
.pbd-specs { display: grid; grid-template-columns: auto 1fr; gap: 9px 24px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pbd-spx { margin-top: 12px; }
.pbd-spx summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--indigo); background: none; border: none; border-radius: 0; padding: 2px 0; transition: color 0.15s; }
.pbd-spx summary:hover { color: var(--belt); }
.pbd-spx summary::-webkit-details-marker { display: none; }
.pbd-spx summary svg { width: 14px; height: 14px; transition: transform 0.2s; }
.pbd-spx[open] summary svg { transform: rotate(180deg); }
.pbd-sec-toggle { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pbd-sec-toggle::-webkit-details-marker { display: none; }
.pbd-sec-toggle svg { width: 17px; height: 17px; transition: transform 0.2s; }
.pbd-pkg[open] .pbd-sec-toggle svg { transform: rotate(180deg); }
.pbd-spec-k { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.pbd-spec-v { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.pbd-buy { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.pbd-buy-card { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 22px 20px; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.5); border: 1px solid var(--gold); }
.pbd-plat { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.pbd-buy-name { font-size: 21px; font-weight: 900; color: var(--indigo); line-height: 1.05; margin-top: 4px; letter-spacing: -0.01em; }
.pbd-price { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.pbd-amt { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.pbd-per { font-size: 14px; font-weight: 700; color: var(--muted); }
.pbd-sub { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-top: 5px; line-height: 1.4; }
.pbd-buy-card .pb-buy { margin-top: 16px; }
/* Woning box (2026-09-24): the question in the old single option's title style, then one row per
   option (each row is its own label: checkbox, option text, price), then the per-verdieping items. */
.pbd-plus { margin-top: 12px; padding: 13px 14px; border-radius: 12px; background: var(--sand); border: 1px solid var(--line); display: block; transition: background 0.15s, border-color 0.15s; }
.pbd-plus.on { background: #eef3ff; border-color: var(--indigo); }
.pbd-plus-h { font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--indigo); line-height: 1.35; margin-bottom: 10px; }
.pbd-plus-row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.pbd-plus-row + .pbd-plus-row { margin-top: 8px; }
.pbd-plus input { width: 19px; height: 19px; margin-top: 1px; accent-color: #322469; flex: none; cursor: pointer; }
.pbd-plus-t { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pbd-plus-t span:first-child { font-size: 13px; font-weight: 700; color: #4a4458; }
.pbd-plus-pr { font-size: 13px; font-weight: 900; color: var(--belt); white-space: nowrap; }
.pbd-soon { display: flex; gap: 10px; margin-top: 16px; background: var(--indigo-soft); border: 1px solid #e2ddf1; border-radius: 8px; padding: 13px 14px; color: var(--indigo); }
.pbd-soon svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pbd-soon span { font-size: 12.5px; font-weight: 600; color: #4a4458; line-height: 1.45; }
.pbd-soon a { color: var(--indigo); font-weight: 800; text-decoration: underline; white-space: nowrap; }
.pbd-guarantee { display: flex; gap: 11px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 14px 16px; color: var(--gold-lt); }
.pbd-guarantee svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pbd-guarantee span { font-size: 12.5px; font-weight: 600; color: #cdc6e8; line-height: 1.45; }
.pbd-guarantee b { color: #fff; font-weight: 800; }
.pbd-info { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 18px; }
.pbd-info-title { font-size: 15.5px; font-weight: 900; color: var(--belt); line-height: 1.3; }
.pbd-info-body { font-size: 13.5px; font-weight: 500; color: #5b5374; line-height: 1.6; margin-top: 9px; }
.pbd-info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .pbd-info-cols { grid-template-columns: 1fr; } }
.pbd-info-p { font-size: 13.5px; font-weight: 500; color: #5b5374; line-height: 1.55; margin-top: 8px; }
.pbd-deploy { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pbd-deploy li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; color: #5b5374; line-height: 1.45; }
.pbd-deploy li .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--belt); margin-top: 7px; }
.pbd-deploy li b { color: var(--indigo); }

/* add-to-cart confirmation drawer (addcart- classes; header / scroll / footer regions). */
.addcart { position: fixed; inset: 0; z-index: 10000; }
.addcart[hidden] { display: none; }
/* .addcart .addcart__scrim: 2 classes outranks the base reset `div:empty{display:none}`, which would otherwise hide the empty backdrop. */
.addcart .addcart__scrim { position: fixed; inset: 0; display: block; background: rgba(20, 14, 40, 0.6); animation: acFade 0.2s ease; }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }
.addcart__panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(820px, 100vw); background: var(--paper); box-shadow: -30px 0 70px -30px rgba(26, 18, 48, 0.5); display: flex; flex-direction: column; animation: acSlide 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes acSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.addcart__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 30px 32px; background: var(--paper); border-bottom: 1px solid var(--line); min-height: 96px; }
.addcart__t { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 900; color: var(--indigo); letter-spacing: -0.01em; }
.addcart__chk { width: 32px; height: 32px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; }
.addcart__chk svg { width: 18px; height: 18px; color: #fff; }
.addcart__x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer; flex: none; transition: border-color 0.15s, color 0.15s; }
.addcart__x:hover { border-color: var(--indigo); color: var(--indigo); }

.addcart__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 32px 40px; }
.addcart__count { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.addcart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.addcart__item { background: #fff; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.addcart__item-head { display: flex; align-items: flex-start; gap: 14px; padding: 17px 18px; }
.addcart__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.addcart__name { font-size: 16px; font-weight: 900; color: var(--indigo); line-height: 1.2; }
.addcart__meta { font-size: 12px; font-weight: 700; color: var(--belt); letter-spacing: 0.02em; }
.addcart__pricewrap { display: flex; align-items: flex-start; gap: 10px; flex: none; }
.addcart__price { font-size: 15px; font-weight: 900; color: var(--indigo); white-space: nowrap; }
.addcart__price .per { font-size: 12px; font-weight: 700; color: var(--muted); }
.addcart__rm { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; font-size: 16px; line-height: 1; cursor: pointer; flex: none; transition: border-color 0.15s, color 0.15s; }
.addcart__rm:hover { border-color: var(--red); color: var(--red); }
/* Rider row (2026-10-30): informational, quieter than a package row (cream, smaller, muted note). */
.addcart__item--rider { background: var(--cream); }
.addcart__item--rider .addcart__item-head { padding: 12px 18px; }
.addcart__item--rider .addcart__name { font-size: 14px; font-weight: 800; }
.addcart__item--rider .addcart__meta { color: var(--muted); font-weight: 600; }
.addcart__item--rider .addcart__price { font-size: 13px; }
.addcart__opt { display: flex; align-items: center; gap: 11px; padding: 12px 18px; background: var(--sand); border-top: 1px solid var(--line); cursor: pointer; }
.addcart__opt input { width: 18px; height: 18px; accent-color: var(--indigo); flex: none; cursor: pointer; }
.addcart__opt-label { flex: 1; font-size: 13px; font-weight: 800; color: var(--indigo); }
.addcart__opt-price { font-size: 13px; font-weight: 900; color: var(--belt); flex: none; }
/* Woning (2026-09-24): the question and one .addcart__opt row per option share one sand block,
   rows 16px apart instead of the 24px and divider between separate options; labels in the card's
   option style (.pcard__plus-opt). The drawer is portaled to <body>, so the p margin is set here. */
.addcart__woning { background: var(--sand); border-top: 1px solid var(--line); padding: 12px 0 4px; }
.addcart__woning-h { margin: 0; padding: 0 18px 2px; font-size: 13px; font-weight: 700; color: var(--indigo); line-height: 1.4; }
.addcart__woning .addcart__opt { border-top: none; padding-top: 8px; padding-bottom: 8px; }
.addcart__woning .addcart__opt-label { font-weight: 700; color: #4a4458; }

.addcart__note { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 16px; line-height: 1.45; }
.addcart__empty { font-size: 14px; font-weight: 600; color: var(--muted); margin: 20px 0; text-align: center; }
.addcart__err { color: var(--red-deep); font-size: 12.5px; font-weight: 700; margin-top: 8px; }

/* Cart-drawer clones of a package card's own Uitbreidingen/Extra-diensten option
   groups (see hydrateLineOptions()) — .ltc__optgroup/.pcard__plus keep their card
   styling (header, option rows), these rules only add the drawer's own edge padding
   (cards get it for free from the ancestor .pcard's own padding) and neutralise the
   tile-card fallback's <summary> accordion chrome, which has no <details> parent here
   so it can't actually expand/collapse. */
.addcart__lineopts .ltc__optgroup, .addcart__lineopts .pcard__plus { padding: 12px 18px; margin: 0; border-top: 1px solid var(--line); }
.addcart__lineopts .pcard__plus summary { cursor: default; pointer-events: none; }
.addcart__lineopts .pcard__plus summary svg { display: none; }

.pcard__price .amt { transition: color 0.35s ease; }
.pcard__price .amt.is-updated { color: var(--belt); }

.addcart__foot { flex: 0 0 auto; padding: 18px 32px 22px; background: var(--paper); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.addcart__cont { font-family: inherit; font-weight: 800; font-size: 15px; color: var(--indigo); background: #fff; border: 2px solid var(--indigo); border-radius: 12px; padding: 14px; cursor: pointer; transition: background 0.15s; }
.addcart__cont:hover { background: var(--indigo-soft); }
.addcart__go { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 900; font-size: 15px; color: var(--ink); background: var(--gold); border-radius: 12px; padding: 14px; text-decoration: none; box-shadow: 0 2px 0 var(--belt); transition: transform 0.14s, box-shadow 0.14s; }
.addcart__go svg { width: 17px; height: 17px; }
.addcart__go:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--belt), 0 12px 24px -12px rgba(180, 126, 10, 0.7); }
.addcart__x:focus-visible, .addcart__rm:focus-visible, .addcart__cont:focus-visible, .addcart__go:focus-visible, .addcart__opt input:focus-visible, .addcart__lineopts input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (max-width: 860px) { .addcart__panel { width: 100vw; } }
@media (max-width: 560px) { .addcart__head { padding: 22px 20px; min-height: 84px; } .addcart__scroll { padding: 20px 20px 36px; } .addcart__foot { padding: 16px 20px 20px; } }
.pcard__direct[aria-busy="true"], .pb-buy[aria-busy="true"] { opacity: 0.6; cursor: default; }
.pcard__err { color: var(--red-deep); font-size: 12.5px; font-weight: 700; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .catnav__t, .vhero__cta a, .pcard, .pcard__direct, .why__link svg { transition: none; } .pb-scrim, .pb-panel, .addcart__scrim, .addcart__panel { animation: none; } }
/* Veilig Onderweg: 'Binnenkort beschikbaar' coming-soon block (1:1 Brand 3 pages.jsx) */
.cs-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);align-items:start;max-width:1080px;margin:8px auto 0;}
@media(max-width:860px){.cs-wrap{grid-template-columns:1fr;}}
.cs-copy p{font-size:16px;font-weight:500;color:#463f5c;line-height:1.6;max-width:52ch;}
.cs-formbox{background:#fffdf8;border:1px solid #e7e0cf;border-radius:18px;padding:clamp(22px,2.4vw,30px);box-shadow:0 24px 54px -44px rgba(26,18,48,.5);}
.cs-formbox>b{display:block;font-size:15px;font-weight:900;color:#322469;margin-bottom:12px;}
.cs-form{display:flex;flex-direction:column;gap:12px;}
.cs-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:800;color:#1a1230;}
.cs-form input[type=email],.cs-form input[type=tel]{background:#fdfaf2;border:1.5px solid #ddd4c0;border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;font-weight:600;color:#1a1230;}
.cs-form input:focus{outline:none;border-color:#322469;background:#fff;}
/* .cs-form prefix (2026-10-12): .cs-form label (0,1,1) used to win, stacking the checkbox above its text in bold. */
.cs-form .cs-check{flex-direction:row;align-items:flex-start;gap:8px;font-size:12px;font-weight:600;color:#5b5374;}
.cs-check input{width:16px;height:16px;flex:none;margin-top:1px;accent-color:#322469;}
.cs-check a{color:#322469;font-weight:800;}
.cs-err{font-size:12px;font-weight:700;color:#e24b4a;}
.cs-form .btn--gold{justify-content:center;margin-top:4px;}
.cs-done{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:#2f8f5b;}
.cs-done[hidden]{display:none;}
.cs-done-ic svg{width:20px;height:20px;flex:none;}
/* Vista: callout-only VISTA Lead callback form (1:1 with Brand 3 pages.jsx) */
.pcard__vista{display:flex;flex-direction:column;gap:10px;}
.pcard__vista-form{display:flex;flex-direction:column;gap:9px;}
.pcard__vista-form input{font-family:inherit;font-size:13.5px;font-weight:600;color:#1a1230;border:1.5px solid #e8e0cd;border-radius:6px;padding:11px 12px;background:#fff;}
.pcard__vista-form input:focus{outline:none;border-color:#322469;}
/* Vista call-time field (2026-09-24). Its placeholder, then "Wanneer mogen wij bellen? (optioneel)", was
   about 227px wide at 13.5px, but in the 3-column tablet range the field is only 135-149px wide
   (721-768px viewport; still tight at 1024), so the text was cut off. No legible font size fits
   there (it would need about 8.9px at 768). Instead, a visible label above the field carries the
   same wording and wraps, in this page's existing form-label style (.cs-form label, the Veilig
   Onderweg form). The label wraps the unchanged input (same name and placeholder, no id), so it
   is also the input's accessible name. The in-field placeholder is transparent, so the wording
   never shows twice or cut off. Later on 2026-09-24 (Thijs), label and placeholder both became
   "Wanneer mogen wij bellen?" without "(optioneel)"; the label approach stays. Since 2026-10-12 (S-10)
   both read "Wanneer belt u het liefst?" from snippets/zv-form-copy.liquid, still without "(optioneel)". */
.pcard__vista-time{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:800;color:#1a1230;line-height:1.4;}
.pcard__vista-time input::placeholder{color:transparent;}
/* Vista consent (2026-09-24): the same checkbox row as the Overzicht AV consent (.zv-overzicht
   .ovcheck in zv-checkout-overview.liquid): a 19px indigo checkbox 2px down, an 11px gap and
   13.5px/1.5 label text, so the box sits on the label's first line exactly as it does there.
   The label wraps the checkbox, so the whole label is its click/tap target; min-height keeps
   that target at least 24px tall even if the text ever fits on one line. */
.pcard__vista-consent{display:flex;align-items:flex-start;gap:11px;min-height:24px;cursor:pointer;}
/* [type] adds specificity: Dawn's base.css `input[type="checkbox"] { width: auto }` (0,1,1, loaded later) otherwise wins and squeezes the box to 13px wide. */
.pcard__vista-consent input[type="checkbox"]{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--indigo);}
.pcard__vista-consent span{font-size:13.5px;font-weight:600;color:#5b5374;line-height:1.5;}
.pcard__vista-consent a{color:#322469;font-weight:800;}
/* Vista advice text (2026-09-24): secondary text like the card footnotes (.ltc__footnote,
   .pcard__plus-hint): 12px/600 at line-height 1.5. The colour is var(--muted) rather than
   their --muted-2, which is only 3.5:1 on the white card, below WCAG AA for 12px text
   (--muted is 5.3:1). The space before the button is its margin-top, not a margin here:
   the page reset `.opl-page p { margin: 0 }` outranks a one-class rule on this <p>. */
.pcard__vista-note{font-size:12px;font-weight:600;color:var(--muted);line-height:1.5;}
/* Vista submit (2026-09-24): the existing .btn--indigo variant (zv-chrome.css: indigo fill, white
   text, indigo-2 and a 2px lift on hover) at the other card CTAs' size. That means the
   .pcard__cta .btn / .ltc__buy font (14.5px/800), 13px 18px padding, 6px radius and 1.5px border
   box, plus the 18px content line their arrow icon sets, so a one-line label is exactly as tall
   as "In winkelwagen". The values are mirrored here because the button can't take the .btn
   classes: the form's markup is part of the byte-identical Vista lead path. No nowrap, so the
   label wraps centred when the card is narrow. text-wrap:pretty rather than balance: for this
   label, Chrome's balance breaks after "een" ("Plan een / vrijblijvend adviesgesprek"), while
   pretty keeps the even split "Plan een vrijblijvend / adviesgesprek". margin-top 7px plus the
   form's 9px gap leaves 16px between the advice text and the button. */
.pcard__vista-form button{margin-top:7px;width:100%;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:14.5px;font-weight:800;line-height:18px;text-align:center;text-wrap:pretty;color:#fff;background:var(--indigo);border:1.5px solid transparent;border-radius:6px;padding:13px 18px;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s,background 0.15s,color 0.15s;}
.pcard__vista-form button:hover{transform:translateY(-2px);background:var(--indigo-2);color:#fff;}
.pcard__vista-err{font-size:12px;font-weight:700;color:#e24b4a;}
.pcard__vista-done{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#2f8f5b;padding:6px 2px;}
.pcard__vista-done svg{width:17px;height:17px;flex:none;}
.pcard__vista-form[hidden],.pcard__vista-done[hidden]{display:none;}
/* END_SECTION:oplossingen */

/* START_SECTION:over-ons (INDEX:65) */
.zv-overons {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --gold:#E4A311; --belt:#9c6c08;
  --red:#E5292A; --blue:#00509F; --canvas:#f7efe0; --paper:#fffdf8; --sand:#efe6d2;
  --line:#e6dcc6; --muted:#6f6786; --muted-2:#b8b0d6;
  background:var(--canvas); color:var(--ink);
}
.zv-overons .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
@media(max-width:720px){ .zv-overons .wrap{ padding:0 20px; } }
.zv-overons .eyebrow { font-size:12px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--red); display:inline-block; }
.zv-overons h2 { font-size:38px; font-weight:900; letter-spacing:-.015em; color:var(--indigo); line-height:1.04; margin-top:12px; }
.zv-overons .lead { font-size:16.5px; font-weight:500; color:#473f5e; line-height:1.62; margin-top:18px; }
.zv-overons .lead--accent { font-weight:800; color:var(--indigo); }
.zv-overons .btn { font-weight:800; font-size:15px; border:none; border-radius:999px; padding:15px 26px; line-height:1; display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s,background .15s,color .15s; white-space:nowrap; }
.zv-overons .btn svg{ width:18px; height:18px; }
.zv-overons .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -12px rgba(180,126,10,.85); }
.zv-overons .btn--gold:hover { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(180,126,10,.95); }
.zv-overons .btn--ghost-light { color:var(--indigo); border:1.5px solid var(--line); background:#fff; }
.zv-overons .btn--ghost-light:hover { background:var(--paper); border-color:var(--indigo); }
.zv-overons a:focus-visible, .zv-overons button:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }

/* hero */
.zv-overons .oo-hero .wrap { position:relative; z-index:2; max-width:1280px; padding:clamp(10px,1.4vw,18px) clamp(20px,3.6vw,52px) clamp(24px,3vw,40px); }
.zv-overons .hero-media { position:relative; border-radius:8px; overflow:visible; height:clamp(440px,44vw,600px); display:flex; align-items:center; background:#2d2156 center 42%/cover no-repeat; background-size:cover; background-position:center 42%; box-shadow:0 40px 90px -54px rgba(26,18,48,.6); }
.zv-overons .hero-media::after { content:""; position:absolute; inset:0; z-index:1; border-radius:8px; pointer-events:none; background:linear-gradient(90deg,rgba(18,12,38,.5) 0%,transparent 26%,transparent 74%,rgba(18,12,38,.5) 100%); }
.zv-overons .hero-card { position:relative; z-index:3; margin:0 0 0 clamp(-64px,-4.5vw,-28px); max-width:440px; background:rgba(253,250,242,.94); border-radius:6px; padding:clamp(26px,2.7vw,38px); box-shadow:0 40px 80px -40px rgba(26,18,48,.6); }
.zv-overons .hero-copy { max-width:none; display:flex; flex-direction:column; align-items:flex-start; }
.zv-overons .hero-copy .eyebrow { color:var(--belt,#9c6c08); display:inline-block; letter-spacing:.24em; }
.zv-overons .hero-copy .eyebrow::before { display:none; }
.zv-overons .hero-copy h1 { color:var(--indigo); text-shadow:none; font-size:clamp(24px,2.4vw,34px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:14px; }
.zv-overons .hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
@media(max-width:760px){ .zv-overons .hero-media{ height:auto; min-height:360px; aspect-ratio:4/3; } .zv-overons .hero-card{ margin:0 16px -28px; max-width:none; } .zv-overons .hero-copy h1{ font-size:clamp(30px,9vw,44px); } }

/* trust-top */
.zv-overons .trust-top { background:var(--paper); border-bottom:1px solid var(--line); }
.zv-overons .trust-top .wrap { padding:24px 32px; display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap; }
.zv-overons .tt-label { font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); flex:none; }
.zv-overons .tt-logos { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.zv-overons .tt-chip { display:flex; align-items:center; justify-content:center; padding:9px 15px; border-radius:11px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px -20px rgba(26,18,48,.4); }
.zv-overons .tt-chip img { height:23px; width:auto; display:block; object-fit:contain; }
.zv-overons .tt-chip.lead img { height:29px; }
.zv-overons .tt-chip.lead { border-color:#eccf86; background:#fffdf6; }
@media(max-width:720px){ .zv-overons .trust-top .wrap{ flex-direction:column; gap:14px; } }

/* intro */
.zv-overons .intro .wrap { padding:84px 32px; display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center; }
@media(max-width:880px){ .zv-overons .intro .wrap{ grid-template-columns:1fr; gap:36px; padding:56px 20px; } }
.zv-overons .photowrap { position:relative; }
.zv-overons .introphoto { width:100%; display:block; border-radius:24px; object-fit:cover; aspect-ratio:720/500; box-shadow:0 36px 70px -40px rgba(26,18,48,.5); }
.zv-overons .photowrap .yrs { position:absolute; left:-22px; bottom:34px; background:var(--gold); color:var(--ink); border-radius:16px; padding:16px 20px; box-shadow:0 18px 40px -22px rgba(26,18,48,.6); }
.zv-overons .photowrap .yrs b { display:block; font-size:34px; font-weight:900; line-height:1; }
.zv-overons .photowrap .yrs span { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
@media(max-width:880px){ .zv-overons .photowrap .yrs{ left:14px; } }
.zv-overons .intro-pillars { list-style:none; margin:20px 0 4px; padding:0; display:flex; flex-direction:column; gap:15px; }
.zv-overons .intro-pillars li { display:flex; gap:13px; align-items:flex-start; font-size:17px; line-height:1.55; color:#4a4458; }
.zv-overons .intro-pillars li .dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--gold); margin-top:10px; }
.zv-overons .intro-pillars li b { color:var(--indigo); font-weight:800; }
.zv-overons .partner { display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.zv-overons .partner .ic { width:46px; height:46px; border-radius:12px; background:var(--indigo); display:flex; align-items:center; justify-content:center; flex:none; }
.zv-overons .partner .ic svg { width:24px; height:24px; }
.zv-overons .partner .t b { font-size:15px; font-weight:900; color:var(--ink); }

/* stats */
.zv-overons .stats { background:radial-gradient(64% 120% at 95% 0%,rgba(197,46,47,.42) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 3% 102%,rgba(0,80,159,.6) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#262a64 100%); color:var(--paper); }
.zv-overons .stats .wrap { padding:72px 32px; }
.zv-overons .stats .head { text-align:center; max-width:1000px; margin:0 auto; }
.zv-overons .stats .eyebrow { color:var(--gold); }
.zv-overons .stats h2 { color:var(--paper); font-size:34px; margin-top:10px; }
.zv-overons .stats .sub { color:var(--muted-2); font-size:15.5px; font-weight:600; margin-top:12px; line-height:1.5; }
.zv-overons .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px; }
@media(max-width:880px){ .zv-overons .grid4{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .zv-overons .grid4{ grid-template-columns:1fr; } }
.zv-overons .stat { background:rgba(255,255,255,.06); border:1.6px solid rgba(226,75,74,.55); border-radius:18px; padding:26px 22px; box-shadow:0 0 0 3px rgba(226,75,74,.1); }
.zv-overons .stat.hl { background:#c52e2f; border-color:#c52e2f; color:#fff; box-shadow:0 18px 40px -20px rgba(197,46,47,.7); }
.zv-overons .stat .n { font-size:46px; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--paper); }
.zv-overons .stat .l { font-size:13.5px; font-weight:700; color:var(--muted-2); margin-top:10px; line-height:1.4; }
.zv-overons .stat.hl .l { color:#ffe3df; }
.zv-overons .stats .note { text-align:center; font-size:13.5px; font-weight:700; color:var(--muted-2); margin-top:28px; }
.zv-overons .stats .note b { color:var(--gold); }

/* blocks */
.zv-overons .blocks .wrap { padding:84px 32px; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media(max-width:880px){ .zv-overons .blocks .wrap{ grid-template-columns:1fr; padding:56px 20px; } }
.zv-overons .block { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:36px 34px; box-shadow:0 26px 60px -46px rgba(26,18,48,.5); }
.zv-overons .block .tag { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--indigo); background:var(--sand); border-radius:999px; padding:7px 13px; }
.zv-overons .block .tag .d { width:7px; height:7px; border-radius:50%; display:inline-block; }
.zv-overons .block .tag .d-red { background:var(--red); }
.zv-overons .block .tag .d-gold { background:var(--gold); }
.zv-overons .block .tag .d-blue { background:var(--blue); }
.zv-overons .block h3 { font-size:25px; font-weight:900; color:var(--indigo); margin-top:18px; line-height:1.1; }
.zv-overons .block p { font-size:15.5px; font-weight:500; color:#473f5e; line-height:1.62; margin-top:14px; }

/* partners-band */
.zv-overons .partners-band { background:linear-gradient(180deg,#f3ead7,#efe6d2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zv-overons .partners-band .wrap { padding:80px 32px; display:grid; grid-template-columns:1fr 1.28fr; gap:54px; align-items:center; }
@media(max-width:880px){ .zv-overons .partners-band .wrap{ grid-template-columns:1fr; gap:34px; padding:56px 20px; } }
.zv-overons .pb-photo img { width:100%; display:block; border-radius:24px; aspect-ratio:720/500; object-fit:cover; box-shadow:0 36px 70px -40px rgba(26,18,48,.5); }
.zv-overons .partners-band .eyebrow { color:var(--red); }
.zv-overons .sec-feature { margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--paper); border:1px solid #eccf86; border-radius:18px; padding:20px 22px; box-shadow:0 18px 40px -28px rgba(180,126,10,.5); }
.zv-overons .sec-logo img { height:40px; width:auto; display:block; }
.zv-overons .sec-points { list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; min-width:240px; margin:0; padding:0; }
.zv-overons .sec-points li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.zv-overons .sec-points li .ck { width:20px; height:20px; border-radius:50%; background:#eaf3ee; display:grid; place-items:center; flex:none; margin-top:1px; }
.zv-overons .sec-points li .ck svg { width:12px; height:12px; color:#2f8f5b; }

/* videoband */
.zv-overons .videoband { background:radial-gradient(64% 120% at 95% 0%,rgba(197,46,47,.42) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 3% 102%,rgba(0,80,159,.6) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#262a64 100%); color:var(--paper); }
.zv-overons .videoband .wrap { padding:80px 32px; }
@media(max-width:720px){ .zv-overons .videoband .wrap{ padding:56px 20px; } }
.zv-overons .vb-head { text-align:center; max-width:780px; margin:0 auto 36px; }
.zv-overons .videoband .eyebrow { color:var(--gold); }
.zv-overons .videoband h2 { color:var(--paper); font-size:34px; margin-top:10px; }
.zv-overons .videoband .lead { color:#e9e4f5; }
.zv-overons .vb-frame { position:relative; max-width:920px; margin:0 auto; aspect-ratio:16/9; border-radius:20px; overflow:hidden; box-shadow:0 50px 100px -40px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.14); background:#000; }
.zv-overons .vb-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.zv-overons .vb-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zv-overons .vb-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; border:none; cursor:pointer; background:rgba(46,33,96,.92); display:grid; place-items:center; box-shadow:0 20px 50px -16px rgba(0,0,0,.6); transition:transform .15s,background .15s; }
.zv-overons .vb-play:hover { transform:translate(-50%,-50%) scale(1.06); background:var(--gold); }
.zv-overons .vb-play svg { width:30px; height:30px; color:#fff; margin-left:4px; }
.zv-overons .vb-play:hover svg { color:var(--ink); }
.zv-overons .vb-note { max-width:780px; margin:30px auto 0; text-align:center; font-size:14.5px; font-weight:600; color:var(--muted-2); line-height:1.6; }

/* waarom */
.zv-overons .waarom .wrap { padding:20px 32px 90px; display:grid; grid-template-columns:1fr 1.18fr; gap:54px; align-items:center; }
@media(max-width:880px){ .zv-overons .waarom .wrap{ grid-template-columns:1fr; gap:36px; padding:10px 20px 64px; } }
.zv-overons .waarom-h { margin-bottom:14px; }
.zv-overons .feat { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.zv-overons .feat:last-child { border-bottom:none; }
.zv-overons .feat .ic { width:48px; height:48px; border-radius:13px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; }
.zv-overons .feat .ic svg { width:24px; height:24px; }
.zv-overons .feat .t b { font-size:16.5px; font-weight:800; color:var(--ink); }
.zv-overons .feat .t p { font-size:14px; font-weight:500; color:var(--muted); margin-top:3px; line-height:1.45; }
.zv-overons .satis { position:relative; }
.zv-overons .teamphoto { width:100%; display:block; border-radius:24px; object-fit:cover; aspect-ratio:720/500; box-shadow:0 36px 70px -40px rgba(26,18,48,.5); }
.zv-overons .satis .pill { position:absolute; left:-20px; bottom:30px; background:var(--red); color:#fff; border-radius:50%; width:96px; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 18px 40px -20px rgba(26,18,48,.7); }
.zv-overons .satis .pill b { font-size:24px; font-weight:900; line-height:1; }
.zv-overons .satis .pill span { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }

/* stappen */
.zv-overons .stappen { background:var(--paper); border-top:1px solid var(--line); }
.zv-overons .stappen .wrap { padding:72px 32px; }
@media(max-width:720px){ .zv-overons .stappen .wrap{ padding:52px 20px; } }
.zv-overons .stappen h2 { text-align:center; color:var(--indigo); font-size:32px; }
.zv-overons .stappen .sub { text-align:center; font-size:15px; font-weight:600; color:var(--muted); margin-top:12px; }
.zv-overons .steprow { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:42px; }
@media(max-width:880px){ .zv-overons .steprow{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:520px){ .zv-overons .steprow{ grid-template-columns:1fr; } }
.zv-overons .stap { display:flex; gap:14px; }
.zv-overons .stap .ic { width:50px; height:50px; flex:none; border-radius:13px; background:var(--canvas); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--indigo); }
.zv-overons .stap .ic svg { width:25px; height:25px; }
.zv-overons .stap.hl .ic { background:var(--indigo); border-color:var(--indigo); color:#f5c84a; }
.zv-overons .stap .k { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.zv-overons .stap b { display:block; font-size:16px; font-weight:900; color:var(--ink); margin-top:2px; line-height:1.2; }
.zv-overons .stap p { font-size:13.5px; font-weight:500; color:var(--muted); margin-top:7px; line-height:1.5; }
.zv-overons .stap .belbtn { display:inline-flex; align-items:center; gap:7px; margin-top:11px; font-size:13px; font-weight:800; color:var(--indigo); background:var(--sand); border:none; border-radius:9px; padding:9px 13px; cursor:pointer; text-decoration:none; }
.zv-overons .stap .belbtn svg { width:15px; height:15px; }
/* END_SECTION:over-ons */

/* START_SECTION:safety-signals (INDEX:72) */
.signals { padding: clamp(30px, 4vw, 52px) 0; background: var(--paper); }
.sig-head { text-align: center; font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; color: var(--indigo); letter-spacing: -0.015em; margin-bottom: 22px; }
.sig-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sig-chip { display: inline-flex; align-items: center; gap: 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px 12px 12px; box-shadow: 0 12px 30px -22px rgba(26, 18, 48, 0.4); }
.sig-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--indigo-soft); color: var(--indigo); }
.sig-ic img { width: 24px; height: 24px; object-fit: contain; }
.sig-label { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.sig--alert .sig-ic { background: #fdeceb; color: var(--red); }
.sig--success .sig-ic { background: #e3f0e8; color: var(--ok); }
.sig--info .sig-ic { background: var(--indigo-soft); color: var(--indigo); }
/* END_SECTION:safety-signals */

/* START_SECTION:story (INDEX:74) */
.story { padding: clamp(56px, 6vw, 104px) 0; background: var(--paper); }
/* Focal point 60% 30% keeps the woman and her mother central and every face visible. */
.story-stage { position: relative; display: flex; align-items: center; border-radius: 8px; overflow: visible; min-height: clamp(420px, 46vw, 560px); background-size: cover; background-position: 60% 30%; background-repeat: no-repeat; background-color: #cdbfae; box-shadow: 0 40px 90px -54px rgba(26, 18, 48, 0.6); }
.story-stage::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(90deg, rgba(40, 28, 84, 0.34), rgba(40, 28, 84, 0) 52%); pointer-events: none; }
/* Negative left margin overlaps the card onto the image for depth (per design). */
.story-card { position: relative; z-index: 2; background: var(--cream); max-width: 430px; margin: 0 0 0 clamp(-56px, -3.5vw, -20px); padding: clamp(32px, 3.4vw, 48px); border-radius: 6px; box-shadow: 0 40px 80px -40px rgba(26, 18, 48, 0.6); }
.story-card .eyebrow { color: var(--belt); display: block; }
.story-card h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; color: var(--indigo); letter-spacing: -0.02em; line-height: 1.04; margin-top: 13px; text-wrap: balance; }
.story-card p { font-size: 16px; font-weight: 500; color: #5b5374; margin-top: 16px; line-height: 1.6; }
.story-card .sc-link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--rood); margin-top: 22px; letter-spacing: 0.02em; text-decoration: none; }
.story-card .sc-link svg { width: 18px; height: 18px; transition: transform 0.18s; }
.story-card .sc-link:hover svg { transform: translateX(4px); }
/* On small screens keep the card below the faces (image anchored to the top). */
@media (max-width: 760px) {
  .story-stage { align-items: flex-end; background-position: 50% 22%; }
  .story-card { margin: 0 16px -28px; max-width: none; }
}
/* END_SECTION:story */

/* START_SECTION:testimonials (INDEX:75) */
.reviews { padding: clamp(46px, 5vw, 84px) 0; color: #fff; overflow: hidden; background: radial-gradient(64% 120% at 95% 0%, rgba(197, 46, 47, 0.42) 0%, rgba(197, 46, 47, 0) 55%), radial-gradient(66% 122% at 3% 102%, rgba(0, 80, 159, 0.6) 0%, rgba(0, 80, 159, 0) 58%), linear-gradient(180deg, #2c3076 0%, #262a64 100%); }
.reviews .rv-headcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; text-decoration: none; color: inherit; background: var(--paper); border-radius: 16px; padding: 26px 28px; max-width: 520px; margin: 0 auto 32px; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.6); transition: transform 0.15s; }
.reviews .rv-headcard:hover { transform: translateY(-2px); }
.rv-tp { height: 26px; width: auto; margin-bottom: 8px; }
.reviews .rv-headcard h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; color: var(--indigo); letter-spacing: -0.015em; }
.reviews .rv-headcard p { font-size: 14px; font-weight: 600; color: var(--muted); }
.rv-rating { display: flex; align-items: center; gap: 11px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.rv-num { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.rv-stars { display: inline-flex; gap: 3px; }
.tp-star { width: 26px; height: 26px; border-radius: 4px; background: #00b67a; display: grid; place-items: center; }
.tp-star svg { width: 18px; height: 18px; color: #fff; }
.tp-star.off { background: #d8cdb4; }
.rv-meta { font-size: 13px; font-weight: 600; color: var(--muted); }
.rv-meta b { color: var(--ink); font-weight: 800; }

.rv-slider { display: flex; align-items: center; gap: 14px; }
.rv-viewport { overflow: hidden; flex: 1; }
.rv-track { display: flex; gap: 18px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.rv-nav { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background 0.15s, opacity 0.15s; }
.rv-nav:hover { background: rgba(255, 255, 255, 0.18); }
.rv-nav svg { width: 22px; height: 22px; }
.rv-nav:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 600px) { .rv-nav { display: none; } }

.rv-card { flex: 0 0 calc((100% - 36px) / 3); box-sizing: border-box; background: var(--paper); border-radius: 14px; padding: 22px 22px 18px; display: flex; flex-direction: column; color: var(--ink); box-shadow: 0 24px 46px -34px rgba(0, 0, 0, 0.5); }
@media (max-width: 900px) { .rv-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 600px) { .rv-card { flex-basis: 100%; } }
.rv-cstars { display: inline-flex; gap: 3px; margin-bottom: 13px; }
.rv-cstars .tp-star { width: 22px; height: 22px; }
.rv-cstars .tp-star svg { width: 15px; height: 15px; }
.rv-card h4 { font-size: 17px; font-weight: 900; color: var(--indigo); letter-spacing: -0.01em; line-height: 1.2; }
.rv-body { font-size: 14px; font-weight: 500; color: #4a4458; margin-top: 8px; line-height: 1.5; flex: 1; }
.rv-by { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); font-size: 13px; font-weight: 800; display: grid; place-items: center; flex: none; overflow: hidden; }
.rv-ava img { width: 100%; height: 100%; object-fit: cover; }
.rv-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.rv-date { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.rv-verif { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.rv-verif svg { width: 15px; height: 15px; }

.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.rv-dots { display: flex; gap: 8px; }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); border: none; cursor: pointer; padding: 0; transition: background 0.15s, width 0.15s; }
.rv-dot.on { background: var(--gold); width: 22px; border-radius: 999px; }
.rv-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 11px 19px; transition: background 0.15s; }
.rv-all:hover { background: rgba(255, 255, 255, 0.2); }
.rv-all svg { width: 16px; height: 16px; }
/* END_SECTION:testimonials */

/* START_SECTION:trust-partners (INDEX:76) */
.trustbar {
  --paper: #fffdf8;
  --line: #e4dac4;
  --muted: #6f6786;
  background: var(--cream, #fdfaf2);
  border-bottom: 1px solid var(--line);
}
.trustbar .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px clamp(20px, 3.4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.trustbar .tb-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.trustbar .tb-logos {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.trustbar .tb-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -22px rgba(26, 18, 48, 0.4);
}
.trustbar .tb-chip img {
  height: 26px;
  width: auto;
  display: block;
}
.trustbar .tb-chip.sec img {
  height: 30px;
}
@media (max-width: 760px) {
  .trustbar .wrap { gap: 16px; }
  .trustbar .tb-label { flex: 1 0 100%; }
}
/* END_SECTION:trust-partners */

/* START_SECTION:veelgestelde-vragen (INDEX:77) */
.zv-faqhub {
  --ink:#1a1230; --indigo:#322469; --indigo-deep:#281c54; --indigo-soft:#efecf7; --paper:#fffdf8;
  --cream:#fdfaf2; --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --line:#e7e0cf; --line-2:#dcd2bd; --muted:#6f6786;
  color:var(--ink); line-height:1.5;
}
.zv-faqhub .wrap { max-width:1000px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-faqhub .btn { font-weight:800; font-size:15px; border:none; border-radius:999px; padding:14px 24px; line-height:1; display:inline-flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s; }
.zv-faqhub .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -12px rgba(180,126,10,.85); }
.zv-faqhub .btn--gold:hover { transform:translateY(-2px); }
.zv-faqhub .btn--ghost-light { color:#fff; border:1.5px solid rgba(255,255,255,.4); background:transparent; }
.zv-faqhub a:focus-visible, .zv-faqhub button:focus-visible { outline:2px solid var(--gold-lt); outline-offset:2px; }

/* hero */
.zv-faqhub .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.34) 0%,rgba(197,46,47,0) 55%),radial-gradient(66% 122% at 4% 102%,rgba(0,80,159,.5) 0%,rgba(0,80,159,0) 58%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px); }
.zv-faqhub .page-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); }
.zv-faqhub .page-hero .eyebrow .d { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.zv-faqhub .page-hero h1 { color:#fff; font-size:clamp(30px,4vw,52px); font-weight:900; letter-spacing:-.02em; line-height:1.03; margin-top:14px; max-width:20ch; text-wrap:balance; }
.zv-faqhub .page-hero .searchbar { display:flex; gap:10px; max-width:560px; margin-top:24px; }
.zv-faqhub .page-hero .searchbar input { flex:1; background:#fff; border:1.5px solid transparent; border-radius:999px; padding:15px 22px; font:inherit; font-size:16px; font-weight:600; color:var(--ink); box-shadow:0 20px 40px -26px rgba(0,0,0,.6); }
.zv-faqhub .page-hero .searchbar input:focus { outline:none; border-color:var(--gold-lt); }

/* faq */
.zv-faqhub .fq { background:var(--cream); padding:clamp(30px,4vw,56px) 0 clamp(50px,6vw,90px); }
.zv-faqhub .fq-cats { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px; }
.zv-faqhub .fq-cat { font-size:13.5px; font-weight:800; color:var(--indigo); background:var(--paper); border:1.5px solid var(--line-2); border-radius:999px; padding:10px 17px; cursor:pointer; transition:all .15s; }
.zv-faqhub .fq-cat:hover { border-color:var(--indigo); }
.zv-faqhub .fq-cat.on { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.zv-faqhub .fq-group { margin-bottom:34px; }
.zv-faqhub .fq-group > h2 { font-size:20px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.zv-faqhub .fq-group > h2 .ic { width:32px; height:32px; border-radius:9px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; flex:none; }
.zv-faqhub .fq-group > h2 .ic svg { width:19px; height:19px; }
.zv-faqhub .fq-item { background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:0 12px 30px -34px rgba(26,18,48,.5); }
.zv-faqhub .fq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:none; border:none; padding:18px 20px; font-size:16px; font-weight:800; color:var(--indigo); line-height:1.35; cursor:pointer; }
.zv-faqhub .fq-q .pm { flex:none; width:26px; height:26px; border-radius:50%; background:var(--cream); color:var(--indigo); display:grid; place-items:center; transition:transform .2s,background .15s; }
.zv-faqhub .fq-q .pm svg { width:15px; height:15px; }
.zv-faqhub .fq-item.open .fq-q .pm { transform:rotate(45deg); background:var(--gold); }
.zv-faqhub .fq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.zv-faqhub .fq-a-in { padding:0 20px 20px; font-size:15px; font-weight:500; color:#5b5374; line-height:1.6; }
.zv-faqhub .fq-a-in a { font-weight:800; color:var(--indigo); }
.zv-faqhub .fq-empty { display:none; text-align:center; color:var(--muted); font-size:15px; font-weight:600; padding:30px; }
.zv-faqhub .fq-empty a { color:var(--indigo); font-weight:800; }
.zv-faqhub .fq-cta { background:var(--indigo-deep); color:#fff; border-radius:20px; padding:clamp(28px,3.5vw,46px); text-align:center; margin-top:12px; position:relative; overflow:hidden; }
.zv-faqhub .fq-cta::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-120px; top:-140px; background:radial-gradient(circle,rgba(228,163,17,.22),transparent 62%); }
.zv-faqhub .fq-cta h3 { font-size:clamp(22px,2.4vw,30px); font-weight:900; letter-spacing:-.015em; position:relative; }
.zv-faqhub .fq-cta p { font-size:16px; color:#d8d2ef; margin:12px auto 0; max-width:52ch; line-height:1.55; position:relative; }
.zv-faqhub .fq-cta .row { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:24px; position:relative; }
/* END_SECTION:veelgestelde-vragen */

/* START_SECTION:zakelijk (INDEX:80) */
.zv-zakelijk {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --indigo-deep:#281c54; --indigo-soft:#efecf7;
  --paper:#ffffff; --cream:#fdfaf2; --band:#f4f0e6; --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08;
  --ok:#2f8f5b; --line:#e7e0cf; --line-2:#dcd2bd; --muted:#6f6786;
  background:var(--paper); color:var(--ink); line-height:1.5;
}
.zv-zakelijk .wrap { max-width:1280px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-zakelijk .eyebrow { font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; display:inline-block; }
.zv-zakelijk .btn { font-weight:800; font-size:15px; border:none; border-radius:999px; padding:15px 26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s; white-space:nowrap; }
.zv-zakelijk .btn svg { width:18px; height:18px; }
.zv-zakelijk .btn--gold { background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -12px rgba(180,126,10,.85); }
.zv-zakelijk .btn--gold:hover { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(180,126,10,.95); }
.zv-zakelijk a:focus-visible, .zv-zakelijk button:focus-visible, .zv-zakelijk input:focus-visible { outline:2px solid var(--gold-lt); outline-offset:2px; }

/* hero */
.zv-zakelijk .zhero { position:relative; overflow:hidden; color:#fff; padding:clamp(56px,7vw,108px) 0 clamp(48px,6vw,96px);
  background:linear-gradient(100deg, rgba(40,28,84,.94) 0%, rgba(40,28,84,.86) 34%, rgba(40,28,84,.64) 60%, rgba(40,28,84,.5) 100%), linear-gradient(180deg, rgba(40,28,84,.5) 0%, rgba(40,28,84,.2) 38%, rgba(40,28,84,.66) 100%), var(--zhero-img) center 62%/cover no-repeat, var(--indigo-deep); }
.zv-zakelijk .zhero::before { content:""; position:absolute; width:680px; height:680px; border-radius:50%; right:-180px; top:-220px; background:radial-gradient(circle,rgba(228,163,17,.26),transparent 64%); pointer-events:none; }
.zv-zakelijk .zhero::after { content:""; position:absolute; width:560px; height:560px; border-radius:50%; left:-200px; bottom:-260px; background:radial-gradient(circle,rgba(0,80,159,.42),transparent 62%); pointer-events:none; }
.zv-zakelijk .zhero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr minmax(460px, 560px); gap:clamp(36px,5vw,80px); align-items:center; }
@media(max-width:980px){ .zv-zakelijk .zhero-grid{ grid-template-columns:1fr; gap:36px; } }
.zv-zakelijk .zhc .eyebrow { color:var(--gold-lt); }
.zv-zakelijk .zhc h1 { color:#fff; font-size:clamp(38px,5vw,68px); font-weight:900; letter-spacing:-.025em; line-height:1; margin-top:16px; text-wrap:balance; }
.zv-zakelijk .zhc p.sub { font-size:clamp(17px,1.7vw,22px); font-weight:500; color:#e4dffb; margin-top:18px; max-width:50ch; line-height:1.5; }
.zv-zakelijk .zhc .roadmap { display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-size:13px; font-weight:800; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:8px 15px; color:#f0ebff; }
.zv-zakelijk .zhc .roadmap i { width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* lead form card */
.zv-zakelijk .lead { position:relative; background:var(--paper); color:var(--ink); border:none; border-radius:20px; padding:clamp(26px,2.8vw,38px); box-shadow:0 40px 90px -36px rgba(10,6,30,.75); overflow:hidden; }
.zv-zakelijk .lead::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }
.zv-zakelijk .lead h2 { font-size:25px; font-weight:900; color:var(--indigo); letter-spacing:-.015em; line-height:1.15; }
.zv-zakelijk .lead .lh { font-size:15px; font-weight:500; color:#4a4363; margin-top:8px; line-height:1.5; }
.zv-zakelijk .lead form { margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.zv-zakelijk .lead .form-err { font-size:13px; font-weight:700; color:#c52e2f; }
/* .zf, not .field: Dawn's base.css styles every .field globally (display:flex + an :after outline box) */
.zv-zakelijk .zf { display:block; }
.zv-zakelijk .zf label { display:block; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--indigo); margin-bottom:7px; }
.zv-zakelijk .zf input, .zv-zakelijk .zf select, .zv-zakelijk .zf textarea { display:block; width:100%; min-width:0; font-family:inherit; font-size:15px; font-weight:500; color:var(--ink); background:#f7f5fb; border:1.5px solid transparent; border-radius:12px; padding:13px 15px; box-shadow:none; transition:border-color .15s,box-shadow .15s,background-color .15s; }
.zv-zakelijk .zf input::placeholder, .zv-zakelijk .zf textarea::placeholder { color:#8f88a8; opacity:1; }
.zv-zakelijk .zf input:hover, .zv-zakelijk .zf select:hover, .zv-zakelijk .zf textarea:hover { background:#f1eef8; }
.zv-zakelijk .zf input:focus, .zv-zakelijk .zf select:focus, .zv-zakelijk .zf textarea:focus { outline:none; background:var(--paper); border-color:var(--indigo); box-shadow:0 0 0 4px rgba(50,36,105,.12); }
.zv-zakelijk .zf select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23322469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.zv-zakelijk .zf textarea { resize:vertical; min-height:96px; line-height:1.45; }
.zv-zakelijk .frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .zv-zakelijk .frow{ grid-template-columns:1fr; } }
.zv-zakelijk .lead .submit { margin-top:4px; width:100%; }
.zv-zakelijk .lead .priv { font-size:12.5px; font-weight:500; color:#5d5676; text-align:center; margin-top:4px; line-height:1.4; }
.zv-zakelijk .lead .consent { display:flex; gap:11px; align-items:flex-start; font-size:13px; font-weight:500; color:#3a3550; line-height:1.45; text-align:left; margin-top:2px; }
.zv-zakelijk .lead .consent input { margin-top:2px; width:17px; height:17px; flex:none; accent-color:var(--indigo); cursor:pointer; }
.zv-zakelijk .lead .consent a { color:var(--indigo); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.zv-zakelijk .lead .submit[disabled] { opacity:.72; filter:saturate(.75); cursor:not-allowed; transform:none; box-shadow:0 10px 26px -12px rgba(180,126,10,.5); }
.zv-zakelijk .lead-done { text-align:center; padding:18px 6px 8px; }
.zv-zakelijk .lead-done .ok { width:58px; height:58px; border-radius:50%; background:var(--ok); display:grid; place-items:center; margin:0 auto 14px; }
.zv-zakelijk .lead-done .ok svg { width:30px; height:30px; color:#fff; }
.zv-zakelijk .lead-done h3 { font-size:21px; font-weight:900; color:var(--indigo); }
.zv-zakelijk .lead-done p { font-size:14.5px; font-weight:600; color:var(--muted); margin-top:8px; line-height:1.5; }

/* value props */
.zv-zakelijk .props { background:var(--band); padding:clamp(52px,6vw,92px) 0; }
.zv-zakelijk .props-head { max-width:680px; margin:0 auto clamp(36px,4vw,52px); text-align:center; }
.zv-zakelijk .props-head .eyebrow { color:var(--belt); }
.zv-zakelijk .props-head h2 { font-size:clamp(26px,3.2vw,42px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.05; margin-top:13px; text-wrap:balance; }
.zv-zakelijk .props-head p { font-size:17px; font-weight:500; color:var(--muted); margin-top:14px; line-height:1.55; }
.zv-zakelijk .props-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:880px){ .zv-zakelijk .props-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.zv-zakelijk .prop.asset { background:none; border:none; padding:0; box-shadow:none; border-radius:16px; overflow:hidden; }
.zv-zakelijk .prop.asset img { display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 24px 50px -34px rgba(26,18,48,.45),0 3px 10px -7px rgba(26,18,48,.2); }

/* tech */
.zv-zakelijk .tech { background:var(--paper); padding:clamp(52px,6vw,92px) 0; }
.zv-zakelijk .tech-head { max-width:720px; margin:0 auto clamp(28px,3vw,44px); text-align:center; }
.zv-zakelijk .tech-head .eyebrow { color:var(--belt); }
.zv-zakelijk .tech-head h2 { font-size:clamp(26px,3.2vw,42px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.05; margin-top:13px; text-wrap:balance; }
.zv-zakelijk .tech-head p { font-size:17px; font-weight:500; color:var(--muted); margin-top:14px; line-height:1.55; }
.zv-zakelijk .tech-asset { background:#fbf6ec; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -44px rgba(26,18,48,.45); }
.zv-zakelijk .tech-asset img { display:block; width:100%; height:auto; aspect-ratio:1500/980; object-fit:cover; }
.zv-zakelijk .tech-benes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 34px; margin-top:clamp(30px,3.4vw,46px); }
@media(max-width:760px){ .zv-zakelijk .tech-benes{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.zv-zakelijk .bene h4 { font-size:18px; font-weight:900; color:var(--indigo); position:relative; padding-top:16px; }
.zv-zakelijk .bene h4::before { content:""; position:absolute; top:0; left:0; width:34px; height:4px; border-radius:2px; background:var(--gold); }
.zv-zakelijk .bene p { font-size:15px; font-weight:500; color:#5b5374; margin-top:10px; line-height:1.55; }

/* audience */
.zv-zakelijk .audience { background:var(--band); padding:clamp(52px,6vw,88px) 0; }
.zv-zakelijk .aud-head { max-width:680px; margin:0 auto clamp(30px,3vw,44px); text-align:center; }
.zv-zakelijk .aud-head .eyebrow { color:var(--belt); }
.zv-zakelijk .aud-head h2 { font-size:clamp(26px,3.2vw,40px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.05; margin-top:12px; text-wrap:balance; }
.zv-zakelijk .aud-head p { font-size:17px; font-weight:500; color:var(--muted); margin-top:13px; line-height:1.55; }
.zv-zakelijk .aud-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:760px){ .zv-zakelijk .aud-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.zv-zakelijk .aud-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:32px 30px; box-shadow:0 1px 2px rgba(26,18,48,.04); }
.zv-zakelijk .aud-card .tag { font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--belt); }
.zv-zakelijk .aud-card h3 { font-size:22px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; margin-top:8px; }
.zv-zakelijk .aud-card ul { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; padding:0; }
.zv-zakelijk .aud-card li { display:flex; align-items:flex-start; gap:11px; font-size:15px; font-weight:500; color:#3a3550; line-height:1.45; }
.zv-zakelijk .aud-card li .ck { width:20px; height:20px; border-radius:50%; background:#eaf3ee; display:grid; place-items:center; flex:none; margin-top:1px; }
.zv-zakelijk .aud-card li .ck svg { width:12px; height:12px; color:var(--ok); }
.zv-zakelijk .aud-card .builds { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; font-weight:800; color:var(--muted); }

/* anchor */
.zv-zakelijk .anchor { background:var(--indigo-deep); color:#fff; padding:clamp(52px,6vw,92px) 0; position:relative; overflow:hidden; }
.zv-zakelijk .anchor::before { content:""; position:absolute; width:560px; height:560px; border-radius:50%; left:-200px; top:-160px; background:radial-gradient(circle,rgba(0,80,159,.4),transparent 62%); }
.zv-zakelijk .anchor-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:860px){ .zv-zakelijk .anchor-grid{ grid-template-columns:1fr; gap:30px; } }
.zv-zakelijk .anchor .eyebrow { color:var(--gold-lt); }
.zv-zakelijk .anchor h2 { color:#fff; font-size:clamp(26px,3vw,42px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:13px; text-wrap:balance; }
.zv-zakelijk .anchor p { font-size:17px; font-weight:500; color:#d8d2ef; margin-top:16px; line-height:1.6; }
.zv-zakelijk .anchor-stats { display:flex; flex-wrap:wrap; gap:14px; }
.zv-zakelijk .astat { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:22px 24px; flex:1; min-width:160px; }
.zv-zakelijk .astat b { display:block; font-size:34px; font-weight:900; color:var(--gold-lt); letter-spacing:-.01em; line-height:1; }
.zv-zakelijk .astat span { display:block; font-size:13.5px; font-weight:700; color:#cfc7ee; margin-top:8px; line-height:1.4; }
/* END_SECTION:zakelijk */

/* START_SECTION:zelf-samenstellen-matcher (INDEX:81) */
.zv-match {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --indigo-soft:#efecf7;
  --cream:#fdfaf2; --paper:#fffdf8; --gold:#e4a311; --belt:#9c6c08;
  --red:#e24b4a; --rood:#c52e2f; --line:#e8e0cd; --line-2:#ded6c0; --muted:#6f6786;
  color:var(--ink); line-height:1.5; background:#fbf5e9;
}
.zv-match .wrap { max-width:1180px; margin:0 auto; padding:clamp(24px,3.4vw,44px) clamp(16px,3.4vw,48px); }
.zv-match .zvm-card { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:clamp(18px,2.6vw,30px); box-shadow:0 26px 56px -42px rgba(26,18,48,.5); display:flex; flex-direction:column; gap:22px; max-width:860px; }
.zv-match fieldset { border:0; margin:0; padding:0; min-width:0; }
.zv-match legend, .zv-match .zvm-ql { display:block; padding:0; font-size:clamp(16px,1.8vw,18px); font-weight:900; color:var(--indigo); letter-spacing:-.01em; line-height:1.3; margin-bottom:10px; }
.zv-match #zvm-q1 { font-size:clamp(20px,2.4vw,26px); }
.zv-match .zvm-block { display:flex; flex-direction:column; gap:20px; padding-top:20px; border-top:1px solid var(--line); }
.zv-match .zvm-block[hidden], .zv-match [data-block][hidden], .zv-match .zvm-err[hidden] { display:none; }
.zv-match .zvm-opts { display:flex; flex-wrap:wrap; gap:10px; }
.zv-match .zvm-opt { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:800; color:var(--indigo); background:#fff; border:1.5px solid var(--line-2); border-radius:12px; padding:11px 15px; cursor:pointer; transition:border-color .14s,background .14s; }
.zv-match .zvm-opt:hover { border-color:var(--indigo); }
.zv-match .zvm-opt input { width:18px; height:18px; margin:0; flex:none; accent-color:var(--indigo); }
.zv-match .zvm-opt:has(input:checked) { border-color:var(--indigo); background:var(--indigo-soft); }
.zv-match .zvm-opt:has(input:focus-visible) { outline:2px solid var(--indigo); outline-offset:3px; }
.zv-match .is-missing legend, .zv-match .is-missing .zvm-ql { color:var(--rood); }
.zv-match .is-missing .zvm-opt { border-color:var(--red); }
.zv-match .zvm-step { display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:11px; overflow:hidden; background:#fff; }
.zv-match .zvm-step button { width:42px; height:44px; border:none; background:#fff; color:var(--indigo); font-family:inherit; font-size:20px; font-weight:800; line-height:1; cursor:pointer; }
.zv-match .zvm-step button:hover { background:var(--indigo-soft); }
.zv-match .zvm-step input { width:56px; height:44px; border:none; border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); text-align:center; font-family:inherit; font-size:16px; font-weight:900; color:var(--ink); background:#fff; -moz-appearance:textfield; appearance:textfield; }
.zv-match .zvm-step input::-webkit-outer-spin-button, .zv-match .zvm-step input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.zv-match .zvm-step button:focus-visible, .zv-match .zvm-step input:focus-visible, .zv-match .zvm-go:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }
.zv-match .zvm-err { font-size:13.5px; font-weight:700; color:var(--rood); }
.zv-match .zvm-go { align-self:flex-start; display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:15.5px; font-weight:800; color:var(--ink); background:var(--gold); border:none; border-radius:13px; padding:15px 22px; box-shadow:0 2px 0 var(--belt); cursor:pointer; transition:transform .14s,box-shadow .14s; }
.zv-match .zvm-go:hover { transform:translateY(-1px); box-shadow:0 4px 0 var(--belt),0 12px 24px -12px rgba(180,126,10,.7); }
.zv-match .zvm-go svg { width:18px; height:18px; }
@media(max-width:520px){ .zv-match .zvm-go { align-self:stretch; justify-content:center; } .zv-match .zvm-opt { flex:1 1 100%; } }
/* END_SECTION:zelf-samenstellen-matcher */

/* START_SECTION:zelf-samenstellen (INDEX:82) */
.zv-zelf {
  --ink:#1a1230; --indigo:#322469; --indigo-2:#473a86; --indigo-soft:#efecf7;
  --cream:#fdfaf2; --paper:#fffdf8; --sand:#efe9d6; --sand-2:#e6dfca;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08;
  --rood:#c52e2f; --red:#e24b4a; --ok:#2f8f5b;
  --line:#e8e0cd; --line-2:#ded6c0; --muted:#6f6786; --muted-2:#8c84a6;
  color:var(--ink); line-height:1.5; background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-zelf .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(16px,3.4vw,48px); }
.zv-zelf .topbar { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zv-zelf .topbar .wrap { display:flex; align-items:center; gap:9px; padding-top:13px; padding-bottom:13px; }
.zv-zelf .crumb { font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
.zv-zelf .crumb a { color:var(--indigo); font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.zv-zelf .crumb a svg { width:15px; height:15px; }
.zv-zelf .crumb .sep { color:var(--line-2); }
.zv-zelf .crumb b { color:var(--indigo); font-weight:800; }
.zv-zelf a:focus-visible, .zv-zelf button:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }
.zv-zelf .btn svg { width:17px; height:17px; }

/* Hero */
.zv-zelf .ch-hero .wrap { padding-top:clamp(30px,4.4vw,56px); padding-bottom:clamp(26px,3.4vw,40px); }
.zv-zelf .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--rood); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.zv-zelf .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.zv-zelf .ch-hero h1 { font-size:clamp(30px,4.4vw,48px); font-weight:900; letter-spacing:-.02em; line-height:1.04; color:var(--indigo); margin:16px 0 0; max-width:760px; }
.zv-zelf .ch-hero p { font-size:16.5px; font-weight:600; color:var(--muted); margin:14px 0 0; max-width:640px; line-height:1.5; }
.zv-zelf .ch-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* Trust strip */
.zv-zelf .ch-trust { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.zv-zelf .ch-trust ul { list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 22px; padding-top:16px; padding-bottom:16px; }
@media(max-width:860px){ .zv-zelf .ch-trust ul { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.zv-zelf .ch-trust li { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:var(--indigo); line-height:1.3; }
.zv-zelf .ch-trust li svg { width:18px; height:18px; flex:none; color:var(--ok); }
.zv-zelf .ch-trust a { color:inherit; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.zv-zelf .ch-trust a:hover { text-decoration-color:currentColor; }

/* Shop: filters + grid */
.zv-zelf .ch-shop { padding-top:clamp(30px,3.6vw,46px); scroll-margin-top:132px; }
.zv-zelf .cat-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.zv-zelf .cat-head h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; margin:0; }
.zv-zelf .cat-hint { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
.zv-zelf .cat-hint svg { width:15px; height:15px; color:var(--belt); }
@media(max-width:680px){ .zv-zelf .cat-hint { margin-left:0; } }
.zv-zelf .ch-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.zv-zelf .ch-chip { font-family:inherit; font-size:13.5px; font-weight:800; color:var(--indigo); background:#fff; border:1.5px solid var(--line-2); border-radius:999px; padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:border-color .14s,background .14s,color .14s; }
.zv-zelf .ch-chip:hover { border-color:var(--indigo); }
.zv-zelf .ch-chip .n { font-size:11.5px; font-weight:800; color:var(--muted); background:var(--cream); border-radius:999px; padding:1px 7px; }
.zv-zelf .ch-chip.on { background:var(--indigo); border-color:var(--indigo); color:#fff; }
.zv-zelf .ch-chip.on .n { background:rgba(255,255,255,.18); color:#fff; }
.zv-zelf .ch-chip[hidden] { display:none; }
.zv-zelf .hw-group-h { font-size:17px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; line-height:1.2; margin:0 0 12px; }
.zv-zelf .hw-grid + .hw-group-h { margin-top:30px; }
.zv-zelf .hw-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media(max-width:980px){ .zv-zelf .hw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .zv-zelf .hw-grid { grid-template-columns:1fr; } }
.zv-zelf .hw { display:flex; flex-direction:column; gap:10px; min-width:0; background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:12px 12px 16px; transition:border-color .14s,box-shadow .14s; }
.zv-zelf .hw.has { border-color:var(--indigo); box-shadow:0 10px 26px -18px rgba(50,36,105,.6); }
.zv-zelf .hw-media { position:relative; aspect-ratio:5/2; border-radius:11px; background:linear-gradient(135deg,var(--indigo-soft),#f6f1e3); display:grid; place-items:center; color:var(--indigo); }
.zv-zelf .hw-media svg { width:46px; height:46px; opacity:.8; }
.zv-zelf .hw-type { position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); background:#fff; border-radius:999px; padding:4px 9px; }
.zv-zelf .hw-name { font-size:16px; font-weight:800; color:var(--ink); line-height:1.25; margin:4px 4px 0; }
.zv-zelf .hw-model { font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:-4px 4px 0; }
.zv-zelf .hw-key { margin:0 4px; display:flex; flex-direction:column; gap:4px; }
.zv-zelf .hw-key div { display:grid; grid-template-columns:82px 1fr; gap:8px; font-size:12.5px; line-height:1.4; }
.zv-zelf .hw-key dt { color:var(--muted); font-weight:700; }
.zv-zelf .hw-key dd { margin:0; color:#3a3550; font-weight:600; overflow-wrap:anywhere; }
.zv-zelf .hw-spec-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:12px; font-weight:800; color:var(--indigo); background:none; border:none; padding:2px 4px; cursor:pointer; }
.zv-zelf .hw-spec-btn svg { width:12px; height:12px; transition:transform .16s; }
.zv-zelf .hw-spec-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.zv-zelf .hw-specs { max-height:0; overflow:hidden; transition:max-height .2s ease; margin:0 4px; }
.zv-zelf .hw-specs-in { padding-top:10px; border-top:1px solid var(--line); }
.zv-zelf .hw-desc p { font-size:12.5px; font-weight:500; line-height:1.55; color:#3a3550; margin:0 0 8px; }
.zv-zelf .hw-desc + .hw-spec-model { margin-top:12px; }
.zv-zelf .hw-spec-model { font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.zv-zelf .hw-spec-list { display:flex; flex-direction:column; gap:6px; }
.zv-zelf .hw-spec-row { display:flex; flex-direction:column; gap:1px; font-size:12.5px; font-weight:600; color:#3a3550; }
.zv-zelf .hw-spec-l { color:var(--muted); font-weight:700; }
.zv-zelf .hw-buy { margin-top:auto; padding:6px 4px 0; display:flex; flex-direction:column; gap:10px; }
.zv-zelf .hw-modes { display:flex; gap:8px; }
.zv-zelf .modechip { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-family:inherit; border:1.5px solid var(--line-2); background:#fff; border-radius:11px; padding:7px 12px; text-align:left; cursor:pointer; transition:border-color .14s,background .14s,box-shadow .14s; }
.zv-zelf .modechip:hover { border-color:#c9bda0; }
.zv-zelf .modechip .ml { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.zv-zelf .modechip .mp { font-size:16px; font-weight:900; color:var(--ink); line-height:1.15; }
.zv-zelf .modechip .mu { font-size:10.5px; font-weight:700; color:var(--muted); }
.zv-zelf .modechip.on { border-color:var(--indigo); background:var(--indigo-soft); box-shadow:0 8px 20px -14px rgba(50,36,105,.7); }
.zv-zelf .modechip.on .ml { color:var(--indigo); }
.zv-zelf .modechip.on .mp { color:var(--indigo); }
.zv-zelf .modechip.koop.on { border-color:var(--belt); background:#fbf1e0; }
.zv-zelf .modechip.koop.on .ml, .zv-zelf .modechip.koop.on .mp { color:var(--belt); }
.zv-zelf .stepper { align-self:flex-start; display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:11px; overflow:hidden; background:#fff; }
.zv-zelf .stepper button { width:38px; height:40px; border:none; background:#fff; color:var(--indigo); font-size:20px; font-weight:800; line-height:1; display:grid; place-items:center; cursor:pointer; }
.zv-zelf .stepper button:disabled { color:var(--line-2); cursor:default; }
.zv-zelf .stepper button:hover:not(:disabled) { background:var(--indigo-soft); }
.zv-zelf .stepper .q { min-width:34px; text-align:center; font-size:15px; font-weight:900; color:var(--ink); }
.zv-zelf .hw-chosen { display:block; font-size:11px; font-weight:800; color:var(--ok); }

/* Sticky setup bar: shown once something is chosen, settles above Uw set. Right-
   aligned so it clears the contact FAB (bottom-left, assets/zv-contact-fab.css); below 960px
   the two don't fit side by side, so the bar sits above the FAB (96px tall, 72px <=600px). */
.zv-zelf .ch-bar { position:sticky; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; justify-content:flex-end; padding:0 20px; margin-top:24px; pointer-events:none; }
@media(max-width:960px){ .zv-zelf .ch-bar { bottom:calc(128px + env(safe-area-inset-bottom, 0px)); } }
@media(max-width:600px){ .zv-zelf .ch-bar { bottom:calc(100px + env(safe-area-inset-bottom, 0px)); padding:0 16px; } }
.zv-zelf .ch-bar[hidden] { display:none; }
.zv-zelf .ch-bar-in { pointer-events:auto; display:flex; align-items:center; gap:14px; max-width:100%; background:var(--indigo); color:#fff; border-radius:999px; padding:8px 8px 8px 18px; box-shadow:0 18px 40px -18px rgba(26,18,48,.7); }
.zv-zelf .ch-bar-t { font-size:13.5px; font-weight:700; }
.zv-zelf .ch-bar-t b { font-weight:900; }
.zv-zelf .ch-bar a { flex:none; font-size:13.5px; font-weight:800; color:var(--ink); background:var(--gold); border-radius:999px; padding:9px 15px; text-decoration:none; }
@media(max-width:620px){ .zv-zelf .ch-bar-in { gap:10px; padding-left:14px; } .zv-zelf .ch-bar-t { font-size:12.5px; } }

/* Matcher result (sections/zelf-samenstellen-matcher.liquid): recommended cards marked, the rest dimmed. */
.zv-zelf .zv-match-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:-6px 0 20px; padding:11px 16px; background:#fbf1e0; border:1.5px solid var(--gold); border-radius:12px; font-size:13.5px; font-weight:700; color:var(--ink); }
.zv-zelf .zv-match-note[hidden] { display:none; }
.zv-zelf .zv-match-note button { font-family:inherit; font-size:13.5px; font-weight:800; color:var(--indigo); background:none; border:none; padding:2px 0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.zv-zelf .hw.zv-match-hit { border-color:var(--gold); box-shadow:0 10px 26px -18px rgba(180,126,10,.7); }
.zv-zelf .hw.zv-match-hit.has { border-color:var(--indigo); }
.zv-zelf .hw.zv-match-dim:not(.has) { opacity:.5; transition:opacity .14s,border-color .14s,box-shadow .14s; }
.zv-zelf .hw.zv-match-dim:not(.has):hover, .zv-zelf .hw.zv-match-dim:not(.has):focus-within { opacity:1; }
.zv-zelf .zv-match-badge { position:absolute; top:10px; right:10px; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--ink); background:var(--gold); border-radius:999px; padding:4px 10px; }

/* Uw set: summary + callback */
.zv-zelf .ch-setup { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:20px; align-items:start; padding-top:clamp(28px,3.4vw,40px); scroll-margin-top:132px; }
@media(max-width:860px){ .zv-zelf .ch-setup { grid-template-columns:1fr; } }
.zv-zelf .summary, .zv-zelf .cam-contact { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 26px 56px -42px rgba(26,18,48,.5); }
.zv-zelf .summary h2 { font-size:clamp(19px,2.2vw,24px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; margin:0; }
.zv-zelf .sum-cams { display:flex; align-items:center; gap:10px; margin-top:14px; background:var(--cream); border:1px solid var(--line-2); border-radius:13px; padding:12px 14px; }
.zv-zelf .sum-cams .ci { width:34px; height:34px; border-radius:10px; background:#fff; display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 1px var(--line-2); }
.zv-zelf .sum-cams .ci svg { width:19px; height:19px; color:var(--indigo); }
.zv-zelf .sum-cams b { font-size:21px; font-weight:900; color:var(--ink); line-height:1; }
.zv-zelf .sum-cams span { font-size:12px; font-weight:700; color:var(--muted); display:block; margin-top:2px; }
.zv-zelf .sum-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.zv-zelf .sum-list .sl { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:#3a3550; }
.zv-zelf .sum-list .sl .q { color:var(--muted); font-weight:800; }
.zv-zelf .sum-list .sl .v { font-weight:800; white-space:nowrap; }
.zv-zelf .sum-empty { font-size:13px; font-weight:600; color:var(--muted-2); margin-top:14px; line-height:1.5; }
.zv-zelf .sum-tot { border-top:1.5px solid var(--line); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:7px; }
.zv-zelf .sum-tot:empty { display:none; }
.zv-zelf .sum-tot .tr { display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; color:#3a3550; }
.zv-zelf .sum-tot .tr.big { font-size:17px; font-weight:900; color:var(--ink); }
.zv-zelf .sum-tot .tr.big .accent { color:var(--indigo); }
.zv-zelf .sum-tot .muted { font-size:12px; font-weight:600; color:var(--muted-2); }
.zv-zelf .sumbtn { margin-top:16px; width:100%; font-family:inherit; font-weight:800; font-size:15.5px; border:none; border-radius:13px; padding:15px; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--gold); color:var(--ink); box-shadow:0 2px 0 var(--belt); transition:transform .14s,box-shadow .14s; cursor:pointer; }
.zv-zelf .sumbtn:hover { transform:translateY(-1px); box-shadow:0 4px 0 var(--belt),0 12px 24px -12px rgba(180,126,10,.7); }
.zv-zelf .sumbtn:disabled { background:var(--sand); color:var(--muted-2); box-shadow:none; cursor:default; transform:none; }
.zv-zelf .sumbtn svg { width:18px; height:18px; }
.zv-zelf .sum-note { display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); margin-top:11px; text-align:center; }
.zv-zelf .sum-note svg { width:14px; height:14px; color:var(--ok); flex:none; }
.zv-zelf .cam-contact { display:flex; flex-direction:column; gap:9px; }
.zv-zelf .cam-contact-h { font-size:15px; font-weight:900; color:var(--indigo); margin-bottom:2px; }
.zv-zelf .cam-contact input { font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); border:1.5px solid var(--line); border-radius:8px; padding:11px 12px; background:#fff; }
.zv-zelf .cam-contact-consent { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.zv-zelf .cam-contact-consent input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--indigo); }
.zv-zelf .cam-contact-consent span { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.zv-zelf .cam-contact-consent a { color:var(--indigo); font-weight:800; }
.zv-zelf .cam-contact button { font-family:inherit; font-size:14px; font-weight:800; color:#fff; background:var(--indigo); border:none; border-radius:8px; padding:12px 16px; cursor:pointer; }
.zv-zelf .cam-contact-err { font-size:12px; font-weight:700; color:var(--red); display:none; }
.zv-zelf .cam-contact-done { display:none; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#2f8f5b; }
.zv-zelf .cam-contact-done svg { width:16px; height:16px; flex:none; }

/* Niet gevonden wat u zocht? */
.zv-zelf .ch-cta { padding-top:clamp(36px,4.4vw,56px); }
.zv-zelf .ch-cta-in { display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; background:var(--indigo); color:#fff; border-radius:20px; padding:clamp(22px,3vw,34px); }
.zv-zelf .ch-cta-in > div:first-child { flex:1 1 380px; }
.zv-zelf .ch-cta h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; letter-spacing:-.015em; line-height:1.15; margin:0; color:#fff; }
.zv-zelf .ch-cta p { font-size:15px; font-weight:600; line-height:1.5; margin:8px 0 0; color:rgba(255,255,255,.82); max-width:620px; }
.zv-zelf .ch-cta-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* FAQ: the Veelgestelde vragen accordion (.fq-item), scoped here. */
.zv-zelf .ch-faq { padding-top:clamp(36px,4.4vw,56px); padding-bottom:80px; }
.zv-zelf .ch-faq > * { max-width:880px; }
.zv-zelf .ch-faq h2 { font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--indigo); letter-spacing:-.015em; line-height:1.15; margin:0 0 16px; }
.zv-zelf .fq-item { background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:0 12px 30px -34px rgba(26,18,48,.5); }
.zv-zelf .fq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; font-family:inherit; background:none; border:none; padding:18px 20px; font-size:16px; font-weight:800; color:var(--indigo); line-height:1.35; cursor:pointer; }
.zv-zelf .fq-q .pm { flex:none; width:26px; height:26px; border-radius:50%; background:var(--cream); color:var(--indigo); display:grid; place-items:center; transition:transform .2s,background .15s; }
.zv-zelf .fq-q .pm svg { width:15px; height:15px; }
.zv-zelf .fq-item.open .fq-q .pm { transform:rotate(45deg); background:var(--gold); }
.zv-zelf .fq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.zv-zelf .fq-a-in { padding:0 20px 20px; font-size:15px; font-weight:500; color:#5b5374; line-height:1.6; }
.zv-zelf .fq-a-in a { font-weight:800; color:var(--indigo); }
.zv-zelf .ch-faq-more { font-size:14px; font-weight:600; color:var(--muted); margin:16px 0 0; }
.zv-zelf .ch-faq-more a { font-weight:800; color:var(--indigo); }
/* END_SECTION:zelf-samenstellen */

/* START_SECTION:zv-404 (INDEX:83) */
.zv-404 {
  --ink:#1a1230; --indigo:#322469; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --line:#e7e0cf; --line-2:#ddd4c0;
  --muted:#6f6786; --muted-2:#8c84a6;
  color:var(--ink); line-height:1.5; background:var(--cream);
}
.zv-404 .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-404 .nf { display:flex; align-items:center; padding:clamp(48px,7vw,110px) 0; background:radial-gradient(70% 120% at 92% 0%,rgba(228,163,17,.14),transparent 58%); }
.zv-404 .nf-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:820px){ .zv-404 .nf-grid { grid-template-columns:1fr; } }
.zv-404 .nf-code { font-size:clamp(120px,20vw,240px); font-weight:900; letter-spacing:-.05em; line-height:.82; color:var(--indigo); position:relative; }
.zv-404 .nf-code span { color:var(--gold); }
.zv-404 .nf-code::after { content:"Pagina niet gevonden"; position:absolute; left:6px; bottom:-4px; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--belt); }
.zv-404 .nf h1 { font-size:clamp(28px,3.4vw,42px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; line-height:1.05; text-wrap:balance; }
.zv-404 .nf p { font-size:17px; font-weight:500; color:#5b5374; margin-top:16px; max-width:46ch; line-height:1.6; }
.zv-404 .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:999px; font:inherit; font-weight:800; text-decoration:none; padding:13px 22px; }
.zv-404 .btn svg { width:18px; height:18px; }
.zv-404 .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-404 .btn--indigo { background:var(--indigo); color:#fff; }
.zv-404 .btn--ghost { background:transparent; color:var(--indigo); border:1.5px solid var(--line); }
.zv-404 .btn--ghost:hover { background:var(--paper); }
.zv-404 .nf-search { margin-top:26px; display:flex; gap:10px; max-width:420px; }
.zv-404 .nf-search input { flex:1; background:#fff; border:1.5px solid var(--line-2); border-radius:999px; padding:13px 20px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); }
.zv-404 .nf-search input:focus { outline:none; border-color:var(--indigo); }
.zv-404 .nf-cta { display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; }
.zv-404 .nf-links { margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.zv-404 .nf-links h4 { font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.zv-404 .nf-links ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
@media(max-width:520px){ .zv-404 .nf-links ul { grid-template-columns:1fr; } }
.zv-404 .nf-links a { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--indigo); text-decoration:none; }
.zv-404 .nf-links a svg { width:16px; height:16px; color:var(--gold); transition:transform .15s; }
.zv-404 .nf-links a:hover svg { transform:translateX(3px); }
/* END_SECTION:zv-404 */

/* START_SECTION:zv-cart (INDEX:84) */
.zv-cart {
  --ink:#1a1230; --indigo:#322469; --indigo-soft:#ece8fb; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --line:#e7e0cf; --line-2:#ddd4c0;
  --muted:#6f6786; --muted-2:#8c84a6; --rood:#e24b4a;
  color:var(--ink); line-height:1.5; background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-cart .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-cart .cartbar { background:var(--paper); border-bottom:1px solid var(--line); }
.zv-cart .cartbar .wrap { display:flex; align-items:baseline; gap:14px; padding:22px 0; flex-wrap:wrap; }
.zv-cart .cartbar h1 { font-size:clamp(26px,3vw,36px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-cart .cartbar .cnt { font-size:14px; font-weight:700; color:var(--muted); }
.zv-cart .cartbar .cont { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--indigo); text-decoration:none; }
.zv-cart .cartbar .cont svg { width:16px; height:16px; transform:rotate(180deg); }
.zv-cart .cwrap { padding:clamp(24px,3vw,40px) 0 90px; }
.zv-cart .clayout { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start; }
@media(max-width:920px){ .zv-cart .clayout { grid-template-columns:1fr; } }
.zv-cart .citems { background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 22px 52px -44px rgba(26,18,48,.5); }
.zv-cart .citem { display:grid; grid-template-columns:88px 1fr auto; gap:18px; padding:22px; border-bottom:1px solid var(--line); align-items:start; }
.zv-cart .citem:last-child { border-bottom:none; }
.zv-cart .ci-thumb { width:88px; height:88px; border-radius:14px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; overflow:hidden; }
.zv-cart .ci-thumb svg { width:44px; height:44px; }
.zv-cart .ci-thumb img { width:100%; height:100%; object-fit:cover; }
.zv-cart .ci-line { font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--belt); }
.zv-cart .ci-name { font-size:18px; font-weight:900; color:var(--indigo); margin-top:3px; letter-spacing:-.01em; }
.zv-cart .ci-name a { color:inherit; text-decoration:none; }
.zv-cart .ci-meta { font-size:13.5px; font-weight:600; color:var(--muted); margin-top:6px; line-height:1.5; }
.zv-cart .ci-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.zv-cart .ci-tag { font-size:11.5px; font-weight:700; color:var(--indigo); background:var(--indigo-soft); border-radius:999px; padding:4px 11px; }
.zv-cart .ci-actions { display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.zv-cart .qty { display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:999px; overflow:hidden; }
.zv-cart .qty .qbtn { width:34px; height:34px; background:var(--cream); border:none; color:var(--indigo); font-size:18px; font-weight:800; line-height:34px; text-align:center; text-decoration:none; }
.zv-cart .qty .qbtn:hover { background:var(--indigo-soft); }
.zv-cart .qty span { min-width:34px; text-align:center; font-size:15px; font-weight:800; color:var(--ink); }
.zv-cart .ci-remove { background:none; border:none; color:var(--muted); font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.zv-cart .ci-remove:hover { color:var(--rood); }
.zv-cart .ci-remove svg { width:14px; height:14px; }
.zv-cart .ci-right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.zv-cart .ci-price { font-size:19px; font-weight:900; color:var(--ink); white-space:nowrap; }
.zv-cart .ci-price span { font-size:12.5px; font-weight:700; color:var(--muted); }
.zv-cart .ci-note { font-size:12px; font-weight:700; color:var(--muted); text-align:right; line-height:1.4; max-width:160px; }
.zv-cart .ci-badge { display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--indigo); background:var(--indigo-soft); border-radius:6px; padding:3px 8px; }
@media(max-width:480px){
  .zv-cart .citem { grid-template-columns:88px 1fr; }
  .zv-cart .ci-right {
    grid-column:1 / -1;
    align-items:flex-start;
    text-align:left;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .zv-cart .ci-note { text-align:left; max-width:none; }
}
.zv-cart .cg-head { margin:0; padding:14px 22px; font-size:12.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--belt); background:var(--cream); border-bottom:1px solid var(--line); }
.zv-cart .cgroup + .cgroup .cg-head { border-top:1px solid var(--line); }
.zv-cart .cg-sub { display:flex; justify-content:space-between; gap:12px; padding:14px 22px; font-size:14.5px; font-weight:700; color:#5b5374; background:var(--cream); }
.zv-cart .cg-sub b { font-weight:800; color:var(--ink); }
.zv-cart .csummary { position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; }
.zv-cart .ccost, .zv-cart .cactions { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 22px 52px -44px rgba(26,18,48,.5); }
.zv-cart .ccost h2 { font-size:18px; font-weight:900; color:var(--indigo); }
.zv-cart .srow { display:flex; justify-content:space-between; gap:12px; font-size:14.5px; font-weight:600; color:#5b5374; padding:11px 0; border-bottom:1px solid var(--line); }
.zv-cart .srow b { font-weight:800; color:var(--ink); }
.zv-cart .sgroup { margin-top:14px; }
.zv-cart .sg-head { margin:0; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--belt); }
.zv-cart .srow--sub span { font-weight:800; }
.zv-cart .srow.total { font-size:17px; color:var(--ink); border-bottom:none; padding-top:15px; }
.zv-cart .srow.total b { font-size:22px; color:var(--indigo); }
.zv-cart .s-sub { font-size:12.5px; font-weight:600; color:var(--muted); margin:2px 0 16px; line-height:1.5; }
/* Dark cost-breakdown card (2026-11-02), mirrors Overzicht's .ovcost--dark; .cactions is the light card below it. */
.zv-cart .ccost--dark { background:var(--indigo); border-color:var(--indigo); color:var(--cream); }
.zv-cart .ccost--dark h2 { color:var(--cream); }
.zv-cart .ccost--dark .sg-head { color:var(--gold-lt); }
.zv-cart .ccost--dark .srow { color:var(--indigo-soft); border-bottom-color:rgba(255,255,255,.12); }
.zv-cart .ccost--dark .srow b { color:var(--cream); }
.zv-cart .ccost--dark .srow.total { border-bottom:none; }
.zv-cart .ccost--dark .srow.total b { color:var(--gold-lt); }
.zv-cart .ccost--dark .s-sub { color:var(--indigo-soft); }
.zv-cart .btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; padding:14px 24px; }
.zv-cart .btn svg { width:18px; height:18px; }
.zv-cart .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-cart .btn--ghost { background:transparent; color:var(--indigo); border:1.5px solid var(--line); }
.zv-cart .cta-checkout { width:100%; justify-content:center; margin-top:4px; }
.zv-cart .cta-checkout[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; }
.zv-cart .cinstall-hint { margin:10px 0 0; font-size:13px; font-weight:700; color:#c52e2f; text-align:center; }
.zv-cart .cinstall-section { padding:22px; border-top:1px solid var(--line); }
.zv-cart .cinstall-section > .ci-line { display:block; margin-bottom:12px; }
.zv-cart .cinstall-options { display:flex; flex-direction:column; gap:12px; }
.zv-cart .cinstall-opt { display:grid; grid-template-columns:auto 64px 1fr auto; gap:16px; align-items:center; padding:16px; border:1.5px solid var(--line-2); border-radius:16px; cursor:pointer; }
.zv-cart .cinstall-opt:has(input:checked) { border-color:var(--indigo); background:var(--indigo-soft); }
.zv-cart .cinstall-opt:has(input:checked) .cinstall-icon { background:var(--indigo); color:#fff; }
.zv-cart .cinstall-opt input { width:22px; height:22px; flex:none; accent-color:var(--indigo); }
.zv-cart .cinstall-opt input:disabled { opacity:.6; }
.zv-cart .cinstall-icon { width:64px; height:64px; border-radius:12px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; flex:none; }
.zv-cart .cinstall-icon svg { width:30px; height:30px; }
.zv-cart .cinstall-title { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-cart .cinstall-price { font-size:16px; font-weight:900; color:var(--ink); white-space:nowrap; }
.zv-cart .cinstall-options[hidden], .zv-cart .cinstall-summary[hidden] { display:none; }
.zv-cart .cinstall-summary { display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:start; }
.zv-cart .cinstall-summary .ci-price { font-size:19px; }
.zv-cart .cinstall-change, .zv-cart .cinstall-cancel { background:none; border:none; padding:0; font:inherit; font-size:13px; font-weight:700; color:var(--indigo); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.zv-cart .cinstall-change:hover, .zv-cart .cinstall-cancel:hover { color:var(--belt); }
.zv-cart .cinstall-cancel { align-self:flex-start; color:var(--muted); }
.zv-cart .cinstall-err { margin-top:10px; font-size:12.5px; font-weight:700; color:#c52e2f; }
@media(max-width:480px){
  .zv-cart .cinstall-section { padding:18px; }
  .zv-cart .cinstall-opt { grid-template-columns:auto 52px 1fr; row-gap:6px; }
  .zv-cart .cinstall-icon { width:52px; height:52px; }
  .zv-cart .cinstall-icon svg { width:24px; height:24px; }
  .zv-cart .cinstall-price { grid-column:2 / 4; font-size:14px; }
  .zv-cart .cinstall-summary { grid-template-columns:52px 1fr auto; gap:12px; }
  .zv-cart .cinstall-summary .ci-price { font-size:16px; }
}
.zv-cart .c-guarantee { margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.zv-cart .c-guarantee div { display:flex; align-items:center; gap:11px; font-size:13px; font-weight:700; color:#5b5374; }
.zv-cart .c-guarantee i { flex:none; width:26px; height:26px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; }
.zv-cart .c-guarantee i svg { width:15px; height:15px; }
.zv-cart .pay-row { display:flex; gap:8px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.zv-cart .pay-row span { font-size:12px; font-weight:800; color:var(--muted-2); }
.zv-cart .pay-chip { font-size:11px; font-weight:800; color:var(--indigo); background:var(--cream); border:1px solid var(--line); border-radius:7px; padding:5px 9px; }
.zv-cart .cempty { text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:clamp(40px,6vw,72px) 24px; box-shadow:0 22px 52px -44px rgba(26,18,48,.5); }
.zv-cart .cempty .ic { width:84px; height:84px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; margin:0 auto 22px; }
.zv-cart .cempty .ic svg { width:42px; height:42px; }
.zv-cart .cempty h2 { font-size:26px; font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-cart .cempty p { font-size:16px; font-weight:500; color:#5b5374; margin:12px auto 0; max-width:44ch; line-height:1.55; }
.zv-cart .cempty .ce-cta { display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
/* Layout 2026-11-03 (Robi): cards like Overzicht — installatie first, then Maandelijkse / Eenmalige kosten. */
.zv-cart .citems { background:none; border:none; box-shadow:none; overflow:visible; display:flex; flex-direction:column; gap:20px; }
.zv-cart .cvcard { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 22px 52px -44px rgba(26,18,48,.5); }
.zv-cart .cv-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.zv-cart .cv-head h2 { margin:0; font-size:20px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; }
.zv-cart .cv-badge { margin-left:auto; font-size:12.5px; font-weight:800; color:#5a3d00; background:#fdeccb; border-radius:999px; padding:5px 12px; }
.zv-cart .cv-hint { margin-left:auto; font-size:13.5px; font-weight:600; color:var(--muted); }
.zv-cart .cv-todo { margin-left:auto; font-size:13px; font-weight:800; color:var(--belt); }
.zv-cart .cvcard .citem { grid-template-columns:52px 1fr auto; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.zv-cart .cvcard .citem:last-of-type { border-bottom:1px solid var(--line); }
.zv-cart .cvcard .ci-thumb { width:52px; height:52px; border-radius:12px; }
.zv-cart .cvcard .ci-thumb svg { width:26px; height:26px; }
.zv-cart .cvcard .ci-name { font-size:16px; margin-top:0; }
.zv-cart .cvcard .ci-meta { margin-top:2px; }
.zv-cart .cvcard .ci-actions { margin-top:8px; }
.zv-cart .cvcard .ci-right { gap:6px; }
.zv-cart .cvcard .ci-price { font-size:16px; }
.zv-cart .cvtot { margin-top:14px; padding-top:14px; border-top:2px solid var(--indigo); display:flex; flex-direction:column; gap:6px; }
.zv-cart .cvtot > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.zv-cart .cvtot > .cvtot-calc { flex-direction:column; align-items:stretch; gap:4px; padding:6px 0 8px; border-bottom:1px dashed var(--line-2); }
.zv-cart .cvtot-calc > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; color:#5b5374; }
.zv-cart .cvtot-calc span:last-child { white-space:nowrap; font-weight:700; }
.zv-cart .cvtot-disc { color:#1f7a45 !important; font-weight:800 !important; }
.zv-cart .cvtot-main span, .zv-cart .cvtot-main b { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-cart .cvtot-main b { font-size:18px; white-space:nowrap; }
.zv-cart .cvtot-main small { font-size:13px; font-weight:700; color:var(--muted); }
.zv-cart .cvtot-promo span, .zv-cart .cvtot-promo b { font-size:15px; font-weight:800; color:var(--indigo); }
.zv-cart .cvtot-promo b { white-space:nowrap; }
/* Installatie as the first card: options side by side */
.zv-cart .cinstall-section { padding:24px; border-top:1px solid var(--line); }
.zv-cart .cinstall-section--todo { border:2px solid var(--gold); }
.zv-cart .cinstall-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:10px; }
.zv-cart .cinstall-opt { grid-template-columns:auto 1fr; grid-template-areas:"radio icon" "title title" "desc desc" "price price"; gap:6px 10px; padding:14px; border-radius:14px; align-items:center; }
.zv-cart .cinstall-opt input { grid-area:radio; }
.zv-cart .cinstall-opt .cinstall-icon { grid-area:icon; width:40px; height:40px; border-radius:10px; justify-self:end; }
.zv-cart .cinstall-opt .cinstall-icon svg { width:22px; height:22px; }
.zv-cart .cinstall-title { grid-area:title; font-size:15px; line-height:1.3; }
.zv-cart .cinstall-desc { grid-area:desc; font-size:13px; font-weight:600; color:var(--muted); line-height:1.35; }
.zv-cart .cinstall-price { grid-area:price; font-size:16px; }
.zv-cart .cinstall-opt:has(input:checked) { border-color:var(--gold); background:#fff6e2; }
.zv-cart .cinstall-opt:has(input:checked) .cinstall-icon { background:var(--indigo); color:#fff; }
.zv-cart .cinstall-summary { margin-top:10px; grid-template-columns:52px 1fr auto; }
.zv-cart .cinstall-summary .cinstall-icon { width:52px; height:52px; }
.zv-cart .cinstall-summary .ci-price { font-size:16px; }
.zv-cart .cinstall-cancel { grid-column:1 / -1; justify-self:start; }
/* Timeline */
.zv-cart .ccost--dark h2 { font-size:20px; margin-bottom:18px; }
.zv-cart .cvtl { list-style:none; margin:0; padding:0; }
.zv-cart .cvtl-step { position:relative; display:flex; flex-direction:column; gap:4px; padding:0 0 18px 28px; }
.zv-cart .cvtl-step::before { content:""; position:absolute; left:2px; top:5px; width:12px; height:12px; border-radius:50%; border:2px solid var(--gold); box-sizing:border-box; }
.zv-cart .cvtl-step--today::before { background:var(--gold); }
.zv-cart .cvtl-step--monthly::before { border-color:#fff; }
.zv-cart .cvtl-step:not(:last-child)::after { content:""; position:absolute; left:7px; top:20px; bottom:2px; width:2px; background:rgba(255,255,255,.22); }
.zv-cart .cvtl-label { font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lt); }
.zv-cart .cvtl-amt { font-size:30px; font-weight:900; color:#fff; line-height:1.15; }
.zv-cart .cvtl-amt--sm { font-size:17px; }
.zv-cart .cvtl-amt--md { font-size:22px; }
.zv-cart .cvtl-amt small { font-size:14px; font-weight:600; color:var(--indigo-soft); }
.zv-cart .cvtl-sub { font-size:13px; font-weight:600; color:var(--indigo-soft); }
.zv-cart .cvtl-save { align-self:flex-start; margin-top:2px; font-size:13px; font-weight:800; color:#3a2a06; background:var(--gold-lt); border-radius:999px; padding:3px 11px; }
.zv-cart .cvtl-parts { margin:6px 0 0; display:flex; flex-direction:column; gap:3px; }
.zv-cart .cvtl-parts > div { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--indigo-soft); }
.zv-cart .cvtl-parts dt, .zv-cart .cvtl-parts dd { margin:0; }
.zv-cart .cvtl-parts dd { white-space:nowrap; font-weight:700; color:#fff; }
.zv-cart .ccost--dark .s-sub { margin:4px 0 0; }
.zv-cart .cinstall-hint { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:#fdeccb; color:#5a3d00; text-align:left; }
.zv-cart .cinstall-hint a { color:inherit; }
@media(max-width:600px){
  .zv-cart .cvcard { padding:18px 16px; border-radius:16px; }
  .zv-cart .cv-head { flex-direction:column; align-items:flex-start; gap:6px; }
  .zv-cart .cv-head h2 { font-size:18px; }
  .zv-cart .cv-badge, .zv-cart .cv-hint, .zv-cart .cv-todo { margin-left:0; }
  .zv-cart .cvcard .citem { grid-template-columns:40px 1fr auto; gap:12px; padding:12px 0; }
  .zv-cart .cvcard .ci-thumb { width:40px; height:40px; border-radius:10px; }
  .zv-cart .cvcard .ci-thumb svg { width:20px; height:20px; }
  .zv-cart .cvcard .ci-name { font-size:15px; }
  .zv-cart .cvcard .ci-right { grid-column:auto; align-items:flex-end; text-align:right; margin-top:0; padding-top:0; border-top:none; }
  .zv-cart .cvcard .ci-price { font-size:15px; }
  .zv-cart .cvtot-calc > div, .zv-cart .cvtot-promo span, .zv-cart .cvtot-promo b { font-size:13.5px; }
  .zv-cart .cinstall-section { padding:18px 16px; }
  .zv-cart .cinstall-opt { grid-template-columns:auto 1fr auto; grid-template-areas:"radio title price" "radio desc price"; }
  .zv-cart .cinstall-opt .cinstall-icon { display:none; }
  .zv-cart .cinstall-price { grid-column:auto; font-size:15px; }
  .zv-cart .cvtl-amt { font-size:26px; }
}
/* END_SECTION:zv-cart */

/* START_SECTION:zv-checkout-overview (INDEX:85) */
.zv-overzicht {
  --ink:#1a1230; --indigo:#322469; --indigo-soft:#ece8fb; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --line:#e7e0cf; --line-2:#ddd4c0;
  --muted:#6f6786; --muted-2:#8c84a6;
  color:var(--ink); line-height:1.5; background:linear-gradient(180deg,#fbf5e9,#f4ecda);
}
.zv-overzicht .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-overzicht .ovbar { background:var(--paper); border-bottom:1px solid var(--line); padding:22px 0 18px; }
.zv-overzicht .ovbar-top { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.zv-overzicht .ovbar h1 { font-size:clamp(26px,3vw,36px); font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-overzicht .ovback { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--indigo); text-decoration:none; }
.zv-overzicht .ovback svg { width:16px; height:16px; }
.zv-overzicht .ovsub { margin-top:6px; font-size:15px; font-weight:500; color:#5b5374; max-width:60ch; }
.zv-overzicht .ovsteps { list-style:none; display:flex; gap:22px; margin-top:18px; flex-wrap:wrap; padding:0; }
.zv-overzicht .ovsteps li { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; color:var(--muted); }
.zv-overzicht .ovsteps .n { width:26px; height:26px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; font-size:13px; }
.zv-overzicht .ovsteps .n svg { width:14px; height:14px; }
.zv-overzicht .ovsteps li.active { color:var(--indigo); }
.zv-overzicht .ovsteps li.active .n { background:var(--gold); color:#3a2a06; }
.zv-overzicht .ovsteps li.done .n { background:var(--indigo); color:#fff; }
.zv-overzicht .ovnoscript { padding:16px 0; font-size:14px; color:var(--muted); }
.zv-overzicht .ovwrap { padding:clamp(24px,3vw,40px) 0 90px; }
.zv-overzicht .olayout { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start; }
.zv-overzicht .ov-left, .zv-overzicht .ov-right { display:flex; flex-direction:column; gap:20px; }
@media(max-width:920px){
  .zv-overzicht .olayout { grid-template-columns:1fr; }
  .zv-overzicht .ov-right { order:1; }
  .zv-overzicht .ov-left { order:2; }
}
.zv-overzicht .ovcard { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 22px 52px -44px rgba(26,18,48,.5); }
.zv-overzicht .ovcard h2 { font-size:18px; font-weight:900; color:var(--indigo); }
.zv-overzicht .ovcard-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.zv-overzicht .ovedit { margin-left:auto; font-size:13.5px; font-weight:800; color:var(--indigo); text-decoration:none; }
.zv-overzicht .ovitems { display:flex; flex-direction:column; }
.zv-overzicht .ovitem { display:grid; grid-template-columns:64px 1fr auto; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }
.zv-overzicht .ovitem:last-child { border-bottom:none; padding-bottom:0; }
.zv-overzicht .ovi-thumb { width:64px; height:64px; border-radius:12px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; overflow:hidden; }
.zv-overzicht .ovi-thumb svg { width:32px; height:32px; }
.zv-overzicht .ovi-thumb img { width:100%; height:100%; object-fit:cover; }
.zv-overzicht .ovi-line { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--belt); }
.zv-overzicht .ovi-name { font-size:16.5px; font-weight:900; color:var(--indigo); margin-top:2px; }
.zv-overzicht .ovi-meta { font-size:13px; font-weight:600; color:var(--muted); margin-top:4px; }
.zv-overzicht .ovi-right { text-align:right; }
.zv-overzicht .ovi-price { font-size:17px; font-weight:900; color:var(--ink); white-space:nowrap; }
.zv-overzicht .ovi-price span { font-size:12px; font-weight:700; color:var(--muted); }
.zv-overzicht .ovi-right .ovi-meta { max-width:230px; margin-left:auto; }
@media(max-width:480px){
  .zv-overzicht .ovitem { grid-template-columns:64px 1fr; }
  .zv-overzicht .ovi-right {
    grid-column:1 / -1;
    text-align:left;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .zv-overzicht .ovi-right .ovi-meta { text-align:left; max-width:none; margin-left:0; }
}
.zv-overzicht .ovgroup + .ovgroup { margin-top:20px; }
.zv-overzicht .ovg-head { margin:0 0 2px; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--belt); }
.zv-overzicht .ovg-sub { display:flex; justify-content:space-between; gap:12px; padding:12px 0 0; font-size:14px; font-weight:700; color:#5b5374; }
.zv-overzicht .ovg-sub b { font-weight:800; color:var(--ink); }
.zv-overzicht .ovdl { margin-top:12px; }
.zv-overzicht .ovdl > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; color:#5b5374; padding:10px 0; border-bottom:1px solid var(--line); }
.zv-overzicht .ovdl > div:last-child { border-bottom:none; }
.zv-overzicht .ovdl dt { font-weight:600; }
.zv-overzicht .ovdl dd { font-weight:800; color:var(--ink); text-align:right; }
.zv-overzicht .ovdl dd.strong { font-size:18px; color:var(--indigo); }
.zv-overzicht .ovbreakdown > div.ovbreakdown-total { border-top:1.5px solid var(--line-2); border-bottom:none; padding-top:12px; }
.zv-overzicht .ovbreakdown > div.ovbreakdown-total dt { font-weight:800; color:var(--ink); }
.zv-overzicht .ovbreakdown-group { margin-top:16px; }
.zv-overzicht .ovbreakdown-group .ovdl { margin:2px 0 0; }
.zv-overzicht .ovbreakdown > div.ovbreakdown-sub dt { font-weight:800; }
.zv-overzicht .ovinstall-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.zv-overzicht .ovinstall-section > .ovi-line { display:block; margin-bottom:12px; }
.zv-overzicht .ovinstall-options { display:flex; flex-direction:column; gap:12px; }
.zv-overzicht .ovinstall-opt { display:grid; grid-template-columns:auto 64px 1fr auto; gap:16px; align-items:center; padding:16px; border:1.5px solid var(--line-2); border-radius:16px; cursor:pointer; }
.zv-overzicht .ovinstall-opt:has(input:checked) { border-color:var(--indigo); background:var(--indigo-soft); }
.zv-overzicht .ovinstall-opt:has(input:checked) .ovinstall-icon { background:var(--indigo); color:#fff; }
.zv-overzicht .ovinstall-opt input { width:22px; height:22px; flex:none; accent-color:var(--indigo); }
.zv-overzicht .ovinstall-opt input:disabled { opacity:.6; }
.zv-overzicht .ovinstall-icon { width:64px; height:64px; border-radius:12px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; flex:none; }
.zv-overzicht .ovinstall-icon svg { width:30px; height:30px; }
.zv-overzicht .ovinstall-title { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-overzicht .ovinstall-price { font-size:16px; font-weight:900; color:var(--ink); white-space:nowrap; }
.zv-overzicht .ovinstall-err { margin-top:10px; font-size:12.5px; font-weight:700; color:#c52e2f; }
@media(max-width:480px){
  .zv-overzicht .ovinstall-opt { grid-template-columns:auto 52px 1fr; row-gap:6px; }
  .zv-overzicht .ovinstall-icon { width:52px; height:52px; }
  .zv-overzicht .ovinstall-icon svg { width:24px; height:24px; }
  .zv-overzicht .ovinstall-price { grid-column:2 / 4; font-size:14px; }
}
.zv-overzicht .ovexplain { margin-top:16px; display:flex; gap:11px; padding:14px 16px; background:var(--cream); border:1px solid var(--line); border-radius:14px; }
.zv-overzicht .ovexplain svg { flex:none; width:20px; height:20px; color:var(--indigo); margin-top:1px; }
.zv-overzicht .ovexplain p { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.zv-overzicht .ovcost-sub { font-size:13.5px; font-weight:500; color:#5b5374; margin-top:4px; }
.zv-overzicht .ovblock { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.zv-overzicht .ovblock:first-of-type { margin-top:14px; padding-top:0; border-top:none; }
.zv-overzicht .ovblock-eb { display:block; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--belt); margin-bottom:6px; }
.zv-overzicht .ovblock p { font-size:13.5px; font-weight:600; color:#5b5374; line-height:1.5; }
.zv-overzicht .ovblock-amt { font-size:28px; font-weight:900; color:var(--indigo); margin-top:6px; }
.zv-overzicht .ovcost-note { font-size:12px; font-weight:600; color:var(--muted); line-height:1.5; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.zv-overzicht .ovtimeline { margin-top:18px; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.12); color:var(--cream); }
.zv-overzicht .ovtimeline-title { margin:0 0 16px; font-size:17px; font-weight:900; line-height:1.3; letter-spacing:0; color:var(--cream); }
.zv-overzicht .ovtimeline-steps { list-style:none; margin:0; padding:0; }
.zv-overzicht .ovtimeline-step { position:relative; display:flex; flex-direction:column; gap:3px; padding:0 0 20px 28px; }
.zv-overzicht .ovtimeline-step:last-child { padding-bottom:0; }
.zv-overzicht .ovtimeline-step::before { content:''; position:absolute; left:0; top:3px; width:14px; height:14px; box-sizing:border-box; border-radius:50%; border:2px solid var(--gold); }
.zv-overzicht .ovtimeline-step--today::before { background:var(--gold); }
.zv-overzicht .ovtimeline-step--monthly::before { border-color:var(--cream); }
.zv-overzicht .ovtimeline-step::after { content:''; position:absolute; left:6px; top:21px; bottom:0; width:2px; background:var(--indigo-soft); opacity:.3; }
.zv-overzicht .ovtimeline-step:last-child::after { content:none; }
.zv-overzicht .ovtimeline-label { font-size:12px; font-weight:900; line-height:20px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-lt); }
.zv-overzicht .ovtimeline-amt { font-size:30px; font-weight:900; line-height:1.15; letter-spacing:-.01em; color:var(--cream); }
.zv-overzicht .ovtimeline-amt small { font-size:14px; font-weight:700; letter-spacing:0; color:var(--indigo-soft); }
.zv-overzicht .ovtimeline-amt--sm { font-size:20px; }
.zv-overzicht .ovtimeline-amt--md { font-size:24px; }
.zv-overzicht .ovtimeline-parts { margin:6px 0 0; }
.zv-overzicht .ovtimeline-parts > div { display:flex; justify-content:space-between; gap:12px; padding:2px 0; font-size:13.5px; font-weight:600; color:var(--indigo-soft); }
.zv-overzicht .ovtimeline-parts dt, .zv-overzicht .ovtimeline-parts dd { margin:0; }
.zv-overzicht .ovtimeline-parts dd { font-weight:800; white-space:nowrap; }
.zv-overzicht .ovtimeline-sub { font-size:13px; font-weight:600; color:var(--indigo-soft); }
.zv-overzicht .ovtimeline-note { margin:14px 0 0; padding-left:28px; font-size:14px; font-weight:700; line-height:1.4; color:var(--indigo-soft); }
@media(max-width:480px){
  .zv-overzicht .ovtimeline { padding:18px 0 0; }
  .zv-overzicht .ovtimeline-amt { font-size:26px; }
  .zv-overzicht .ovtimeline-amt--sm { font-size:18px; }
  .zv-overzicht .ovtimeline-amt--md { font-size:22px; }
}
/* One dark card for the cost breakdown and "Wanneer betaalt u wat?" (2026-11-02); .ovcost-details is the light card below it. */
.zv-overzicht .ovcost--dark { background:var(--indigo); border-color:var(--indigo); color:var(--cream); }
.zv-overzicht .ovcost--dark h2 { color:var(--cream); }
.zv-overzicht .ovcost--dark .ovcost-sub, .zv-overzicht .ovcost--dark .ovblock p { color:var(--indigo-soft); }
.zv-overzicht .ovcost--dark .ovblock-eb, .zv-overzicht .ovcost--dark .ovg-head { color:var(--gold-lt); }
.zv-overzicht .ovcost--dark .ovdl > div { color:var(--indigo-soft); border-bottom-color:rgba(255,255,255,.12); }
.zv-overzicht .ovcost--dark .ovdl > div:last-child { border-bottom:none; }
.zv-overzicht .ovcost--dark .ovdl dd { color:var(--cream); }
.zv-overzicht .ovcost--dark .ovbreakdown > div.ovbreakdown-total { border-top-color:rgba(255,255,255,.12); }
.zv-overzicht .ovcost--dark .ovbreakdown > div.ovbreakdown-total dt { color:var(--cream); }
.zv-overzicht .ovcost--dark .ovdl dd.strong { font-size:28px; line-height:1.15; color:var(--gold-lt); }
.zv-overzicht .ovcost-details > :first-child { margin-top:0; }
.zv-overzicht .ovdelivery { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:11px; }
.zv-overzicht .ovdelivery svg { flex:none; width:22px; height:22px; color:var(--indigo); }
.zv-overzicht .ovdelivery p { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.zv-overzicht .ovtrust { display:flex; flex-wrap:wrap; gap:10px 18px; padding:16px 4px; }
.zv-overzicht .ovtrust span { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted-2); }
.zv-overzicht .ovtrust svg { width:15px; height:15px; color:var(--indigo); }
.zv-overzicht .ovcheck { display:flex; align-items:flex-start; gap:11px; cursor:pointer; }
.zv-overzicht .ovcheck input { width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--indigo); }
.zv-overzicht .ovcheck span { font-size:13.5px; font-weight:600; color:#5b5374; line-height:1.5; }
.zv-overzicht .ovcheck a { color:var(--indigo); font-weight:800; }
.zv-overzicht .ovconsent-err { margin-top:8px; font-size:12.5px; font-weight:700; color:#c52e2f; }
.zv-overzicht .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer; border-radius:12px; font:inherit; font-weight:800; text-decoration:none; padding:14px 24px; width:100%; }
.zv-overzicht .btn svg { width:18px; height:18px; }
.zv-overzicht .btn--gold { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; box-shadow:0 14px 30px -18px rgba(228,163,17,.9); }
.zv-overzicht .btn--gold:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.zv-overzicht .btn--ghost { background:transparent; color:var(--indigo); border:1.5px solid var(--line); }
.zv-overzicht .ovcta { margin-top:16px; }
.zv-overzicht .ovclosing { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; margin-top:14px; text-align:center; }
.zv-overzicht .ovback2 { margin-top:10px; }
/* Layout 2026-11-02: monthly and one-off cards on the left, timeline + checkout on the right. */
.zv-overzicht .ovgroup + .ovgroup { margin-top:0; }
.zv-overzicht .ovcard-head { align-items:center; margin-bottom:4px; }
.zv-overzicht .ovcard-head h2 { font-size:20px; }
.zv-overzicht .ovbadge { margin-left:auto; font-size:12.5px; font-weight:800; color:#5a3d00; background:#fdeccb; border-radius:999px; padding:5px 12px; }
.zv-overzicht .ovcard-hint { margin-left:auto; font-size:13.5px; font-weight:600; color:var(--muted); }
.zv-overzicht .ovitem { grid-template-columns:52px 1fr auto; padding:14px 0; }
.zv-overzicht .ovitem:last-child { border-bottom:1px solid var(--line); padding-bottom:14px; }
.zv-overzicht .ovi-thumb { width:52px; height:52px; }
.zv-overzicht .ovi-thumb svg { width:26px; height:26px; }
.zv-overzicht .ovi-name { font-size:16px; margin-top:0; }
.zv-overzicht .ovtot { margin-top:14px; padding-top:14px; border-top:2px solid var(--indigo); display:flex; flex-direction:column; gap:6px; }
.zv-overzicht .ovtot > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.zv-overzicht .ovtot-main span { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-overzicht .ovtot-main b { font-size:18px; font-weight:900; color:var(--indigo); white-space:nowrap; }
.zv-overzicht .ovtot-main small { font-size:13px; font-weight:700; color:var(--muted); }
.zv-overzicht .ovtot-promo span, .zv-overzicht .ovtot-promo b { font-size:14px; font-weight:700; color:var(--belt); }
.zv-overzicht .ovtot-promo b { white-space:nowrap; }
.zv-overzicht .ovgroup .ovedit { display:inline-block; margin-top:14px; }
.zv-overzicht .ovinstall-section { margin-top:4px; padding-top:16px; border-top:none; }
.zv-overzicht .ovinstall-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.zv-overzicht .ovinstall-label { font-size:16px; font-weight:900; color:var(--indigo); }
.zv-overzicht .ovinstall-todo { font-size:13px; font-weight:800; color:var(--belt); }
.zv-overzicht .ovinstall-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.zv-overzicht .ovinstall-opt { grid-template-columns:auto 1fr; grid-template-areas:"radio icon" "title title" "price price"; gap:8px 10px; align-items:center; padding:14px; border-radius:14px; }
.zv-overzicht .ovinstall-opt input { grid-area:radio; }
.zv-overzicht .ovinstall-icon { grid-area:icon; width:40px; height:40px; border-radius:10px; justify-self:end; }
.zv-overzicht .ovinstall-icon svg { width:22px; height:22px; }
.zv-overzicht .ovinstall-title { grid-area:title; font-size:15px; line-height:1.3; }
.zv-overzicht .ovinstall-price { grid-area:price; font-size:16px; }
.zv-overzicht .ovinstall-opt:has(input:checked) { border-color:var(--gold); background:#fff6e2; }
.zv-overzicht .ovinstall-section--todo .ovinstall-opt { border-color:var(--gold-lt); }
@media(max-width:480px){
  .zv-overzicht .ovitem { grid-template-columns:52px 1fr auto; }
  .zv-overzicht .ovi-right { grid-column:auto; text-align:right; margin-top:0; padding-top:0; border-top:none; }
  .zv-overzicht .ovinstall-opt { grid-template-columns:auto 1fr auto; grid-template-areas:"radio title price"; }
  .zv-overzicht .ovinstall-icon { display:none; }
  .zv-overzicht .ovinstall-price { grid-column:auto; font-size:15px; }
}
.zv-overzicht .ovtimeline--solo { margin-top:0; padding-top:0; border-top:none; }
.zv-overzicht .ovtimeline--solo .ovtimeline-title { font-size:20px; margin-bottom:20px; }
.zv-overzicht .ovtimeline-parts { margin-top:8px; }
.zv-overzicht .ovconsent-msg { margin-bottom:12px; padding:10px 12px; border-radius:10px; background:#fdeccb; font-size:13.5px; font-weight:700; color:#5a3d00; }
.zv-overzicht .ovconsent-msg a { color:inherit; }
.zv-overzicht .ovconsent .ovconsent-err[data-ov-needs-activation] { margin:0 0 12px; }
.zv-overzicht .ovcta { font-size:16px; }
.zv-overzicht .ovcta-amt { font-weight:900; white-space:nowrap; }
.zv-overzicht .ovdetails-title { font-size:16px !important; margin-bottom:2px; }
.zv-overzicht .ovcost-details .ovdl { margin-top:6px; }
.zv-overzicht .ovcost-details .ovcost-note { margin-top:8px; }
/* Mobile: first what you order (incl. the installation choice), then when you pay and the button. */
@media(max-width:920px){
  .zv-overzicht .ov-left { order:1; }
  .zv-overzicht .ov-right { order:2; }
}
/* 2026-11-02 (2): discount rows, savings pill, mobile polish. */
.zv-overzicht .ovtot > .ovtot-calc { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:4px; padding:6px 0 8px; border-bottom:1px dashed var(--line-2); }
.zv-overzicht .ovtot-calc > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; color:#5b5374; }
.zv-overzicht .ovtot-calc span:last-child { white-space:nowrap; font-weight:700; }
.zv-overzicht .ovtot-disc { color:#1f7a45 !important; }
.zv-overzicht .ovtot-disc span { font-weight:800 !important; }
.zv-overzicht .ovtot-promo span, .zv-overzicht .ovtot-promo b { font-size:15px; font-weight:800; color:var(--indigo); }
.zv-overzicht .ovsave { align-self:flex-start; margin-top:4px; font-size:13px; font-weight:800; color:#3a2a06; background:var(--gold-lt); border-radius:999px; padding:4px 12px; }
@media(max-width:600px){
  .zv-overzicht .wrap { padding:0 14px; }
  .zv-overzicht .ovwrap { padding:18px 0 60px; }
  .zv-overzicht .ov-left, .zv-overzicht .ov-right { gap:14px; }
  .zv-overzicht .olayout { gap:14px; }
  .zv-overzicht .ovcard { padding:18px 16px; border-radius:16px; }
  .zv-overzicht .ovcard-head { flex-direction:column; align-items:flex-start; gap:6px; }
  .zv-overzicht .ovcard-head h2 { font-size:18px; }
  .zv-overzicht .ovbadge, .zv-overzicht .ovcard-hint { margin-left:0; }
  .zv-overzicht .ovitem { grid-template-columns:40px 1fr auto; gap:12px; padding:12px 0; align-items:start; }
  .zv-overzicht .ovitem:last-child { padding-bottom:12px; }
  .zv-overzicht .ovi-thumb { width:40px; height:40px; border-radius:10px; }
  .zv-overzicht .ovi-thumb svg { width:20px; height:20px; }
  .zv-overzicht .ovi-name { font-size:15px; line-height:1.3; }
  .zv-overzicht .ovi-meta { font-size:12.5px; line-height:1.4; }
  .zv-overzicht .ovi-price { font-size:15px; }
  .zv-overzicht .ovtot-main span { font-size:15px; }
  .zv-overzicht .ovtot-main b { font-size:16px; }
  .zv-overzicht .ovtot-calc > div, .zv-overzicht .ovtot-promo span, .zv-overzicht .ovtot-promo b { font-size:13.5px; }
  .zv-overzicht .ovtimeline--solo .ovtimeline-title { font-size:18px; margin-bottom:16px; }
  .zv-overzicht .ovtimeline-amt:not(.ovtimeline-amt--sm):not(.ovtimeline-amt--md) { font-size:28px; }
  .zv-overzicht .ovtimeline-parts > div { font-size:13px; }
  .zv-overzicht .ovcta { flex-wrap:wrap; text-align:center; padding:14px 16px; }
  .zv-overzicht .ovcta-amt { display:block; font-size:18px; }
  .zv-overzicht .ovcta-dot { display:none; }
  .zv-overzicht .ovcheck span { font-size:13px; }
  .zv-overzicht .ovdl > div { font-size:13.5px; }
  .zv-overzicht .ovtrust { padding:8px 2px; gap:8px 14px; }
  .zv-overzicht .ovbar { padding:16px 0 14px; }
  .zv-overzicht .ovsteps { gap:10px; margin-top:12px; }
  .zv-overzicht .ovsteps li:not(.active) { font-size:0; gap:0; }
  .zv-overzicht .ovsteps .n { width:24px; height:24px; font-size:12px; }
}
/* END_SECTION:zv-checkout-overview */

/* START_SECTION:zv-search (INDEX:88) */
.zv-search {
  --ink:#1a1230; --indigo:#322469; --paper:#fffdf8; --cream:#fdfaf2;
  --gold:#e4a311; --gold-lt:#f5c84a; --belt:#9c6c08; --gold-soft:#fbf0d4;
  --line:#e7e0cf; --line-2:#ddd4c0; --indigo-soft:#ece8fb; --muted:#6f6786;
  color:var(--ink); line-height:1.5;
}
.zv-search .wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.6vw,52px); }
.zv-search .page-hero { background:radial-gradient(64% 120% at 92% 0%,rgba(197,46,47,.3) 0%,rgba(197,46,47,0) 55%),linear-gradient(180deg,#2c3076 0%,#241c54 100%); color:#fff; padding:clamp(38px,4.6vw,64px) 0 clamp(34px,4vw,54px); }
.zv-search .page-hero .crumbs { font-size:12.5px; font-weight:700; color:#cdc6e8; display:flex; gap:8px; align-items:center; }
.zv-search .page-hero .crumbs a { color:#cdc6e8; text-decoration:none; }
.zv-search .page-hero .crumbs b { color:#fff; }
.zv-search .page-hero .eyebrow { display:inline-block; margin-top:14px; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lt); }
.zv-search .page-hero h1 { color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-top:10px; }
.zv-search .searchbar { display:flex; gap:10px; max-width:640px; margin-top:24px; }
.zv-search .searchbar input { flex:1; background:#fff; border:1.5px solid transparent; border-radius:999px; padding:16px 22px; font:inherit; font-size:16px; font-weight:600; color:var(--ink); box-shadow:0 20px 40px -26px rgba(0,0,0,.6); }
.zv-search .searchbar input:focus { outline:none; border-color:var(--gold-lt); }
.zv-search .searchbar .btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; border-radius:999px; font:inherit; font-weight:800; padding:15px 24px; background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; }
.zv-search .searchbar .btn svg { width:18px; height:18px; }
.zv-search .sh-links { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }
.zv-search .sh-links a { font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.zv-search .sh-links a svg { width:16px; height:16px; }
.zv-search .sh-links .back { color:var(--gold-lt); }
.zv-search .sh-links .ctc { color:#fff; }
.zv-search .sr-wrap { padding:clamp(30px,3.5vw,52px) 0 90px; background:var(--cream); }
.zv-search .sr-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.zv-search .sr-count { font-size:15px; font-weight:700; color:var(--muted); }
.zv-search .sr-count b { color:var(--indigo); font-weight:900; }
.zv-search .sr-filters { display:flex; gap:9px; margin-left:auto; flex-wrap:wrap; }
.zv-search .sr-chip { font-size:13px; font-weight:800; color:var(--indigo); background:var(--paper); border:1.5px solid var(--line-2); border-radius:999px; padding:9px 16px; cursor:pointer; transition:all .15s; }
.zv-search .sr-chip:hover { border-color:var(--indigo); }
.zv-search .sr-chip.on { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.zv-search .sr-list { display:flex; flex-direction:column; gap:12px; }
.zv-search .sr-item { display:flex; gap:18px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 14px 36px -34px rgba(26,18,48,.5); text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s; }
.zv-search .sr-item:hover { transform:translateY(-2px); box-shadow:0 26px 50px -34px rgba(26,18,48,.5); border-color:var(--line-2); }
.zv-search .sr-ic { flex:none; width:48px; height:48px; border-radius:13px; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; }
.zv-search .sr-ic svg { width:24px; height:24px; }
.zv-search .sr-cat { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--belt); }
.zv-search .sr-item h3 { font-size:18px; font-weight:900; color:var(--indigo); letter-spacing:-.01em; margin-top:3px; }
.zv-search .sr-item h3 mark { background:var(--gold-soft); color:var(--belt); border-radius:3px; padding:0 2px; }
.zv-search .sr-item p { font-size:14.5px; font-weight:500; color:#5b5374; margin-top:6px; line-height:1.5; }
.zv-search .sr-item .go { flex:none; align-self:center; width:22px; height:22px; color:var(--muted); }
.zv-search .sr-empty { text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:clamp(40px,6vw,72px) 24px; box-shadow:0 20px 48px -44px rgba(26,18,48,.5); }
.zv-search .sr-empty .ic { width:80px; height:80px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:grid; place-items:center; margin:0 auto 20px; }
.zv-search .sr-empty .ic svg { width:40px; height:40px; }
.zv-search .sr-empty h2 { font-size:24px; font-weight:900; color:var(--indigo); letter-spacing:-.02em; }
.zv-search .sr-empty p { font-size:16px; font-weight:500; color:#5b5374; margin:12px auto 0; max-width:44ch; line-height:1.55; }
.zv-search .sr-sugg { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.zv-search .sr-sugg button { font-size:13.5px; font-weight:800; color:var(--indigo); background:var(--cream); border:1.5px solid var(--line-2); border-radius:999px; padding:9px 16px; cursor:pointer; }
.zv-search .sr-sugg button:hover { border-color:var(--indigo); }
.zv-search .sr-empty .ce-cta { margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.zv-search .btn--gold { display:inline-flex; align-items:center; gap:9px; border-radius:12px; font-weight:800; text-decoration:none; padding:13px 22px; background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:#3a2a06; }
.zv-search .btn--ghost { display:inline-flex; align-items:center; gap:9px; border-radius:12px; font-weight:800; text-decoration:none; padding:13px 22px; background:transparent; color:var(--indigo); border:1.5px solid var(--line-2); }
.zv-search .btn--gold svg, .zv-search .btn--ghost svg { width:18px; height:18px; }
/* END_SECTION:zv-search */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:zv-cart-line-price (INDEX:139) */
.zv-line-was { font-size:.8em; font-weight:700; color:var(--muted); text-decoration:line-through; margin-right:6px; }
/* END_SNIPPET:zv-cart-line-price */