/* Vaste pagina's (tools/vaste.mjs): sectorpagina's, probeer-pagina, over, security.
   Enkel merktokens uit ui/merk.css; bouwt verder op home.css, dienst.css en ontdek.css. */

/* hero */
.vs-hero h1{max-width:14ch}
.vs-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vs-chips li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 13px;border-radius:999px;font-size:13.5px;color:var(--tekst-2);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tekst-3);flex:none}

/* rechterkaart in de hero: het verloop van één aanvraag */
.vs-verloop ol{list-style:none;display:grid;gap:2px;counter-reset:v}
.vs-verloop li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;padding:14px 12px;border-radius:16px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-verloop li .mono{padding-top:3px;color:var(--tekst-3)}
.vs-verloop li b{display:block;font-weight:600;font-size:15.5px}
.vs-verloop li div span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--tekst-2)}
.vs-verloop li:last-child .mono{color:var(--goud)}
.vs-noot{margin:12px 4px 2px;font-size:12.5px;color:var(--tekst-3)}
.vs-drie dl{display:grid;gap:2px}
.vs-drie dl div{padding:16px 14px;border-radius:16px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-drie dt{font-weight:600;font-size:15.5px}
.vs-drie dd{margin-top:6px;font-size:14px;line-height:1.5;color:var(--tekst-2)}

/* twee kolommen: kop links, inhoud rechts */
.vs-twee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.vs-twee > .dn-sectiekop{margin-bottom:0}
.vs-tekst{display:grid;gap:18px;font-size:17px;line-height:1.6;color:var(--zacht,var(--tekst-2))}
.vs-tekst a,.vs-onder a,.vs-live-tekst a:not(.knop){color:inherit;text-decoration:underline;text-underline-offset:3px}

/* de pijn (lichte sectie) */
.vs-lijst{list-style:none;display:grid;border-top:1px solid var(--lijn)}
.vs-lijst li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--lijn);font-size:17px;line-height:1.5}
.vs-lijst li::before{content:"";position:absolute;left:4px;top:29px;width:14px;height:1px;background:currentColor;opacity:.5}
.vs-slotzin{margin-top:26px;font-family:var(--font-kop);font-size:calc(clamp(21px,1.7vw,25px) * var(--kop-schaal));line-height:1.3;max-width:34ch}

/* stappen: vier kaarten */
.vs-stappen{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vs-stappen li{display:grid;gap:10px;align-content:start;padding:26px 26px 28px;border-radius:22px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-stappen .mono{color:var(--tekst-3)}
.vs-stappen h3{font-size:calc(clamp(22px,1.8vw,26px) * var(--kop-schaal))}
.vs-stappen p{font-size:15.5px;line-height:1.55;color:var(--tekst-2)}
.vs-onder{margin-top:28px;max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--tekst-2)}

/* aanbod: Online en Volledig */
.vs-formules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vs-formule{position:relative;display:grid;gap:12px;align-content:start;padding:28px;border-radius:22px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .4s}
.vs-formule:hover{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45)}
.vs-formule .mono{color:var(--tekst-2)}
.vs-formule b{font-family:var(--font-kop);font-weight:var(--kop-gewicht);font-size:calc(clamp(32px,3vw,44px) * var(--kop-schaal));line-height:1;letter-spacing:-.02em}
.vs-formule b small{font-family:var(--font-tekst);font-size:14px;letter-spacing:0;color:var(--tekst-2)}
.vs-formule p{font-size:15.5px;line-height:1.55;color:var(--tekst-2)}
.vs-formule i{position:absolute;right:24px;top:24px;font-style:normal;color:var(--tekst-3);transition:color .3s,transform .3s}
.vs-formule:hover i{color:var(--goud);transform:translateX(3px)}
.vs-prijsnoot{margin-top:18px;max-width:80ch;line-height:1.55}

/* uitproberen */
.vs-live{border-top:1px solid var(--haar)}
.vs-live-tekst{display:grid;gap:18px}
.vs-live-tekst p:not(.lead):not(.dn-klein){color:var(--tekst-2)}

/* security */
.vs-weglijst{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:w}
.vs-weglijst li{display:grid;gap:10px;align-content:start;padding:22px 20px 24px;border-radius:20px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-weglijst .mono{color:var(--tekst-3)}
.vs-weglijst h3{font-size:calc(19px * var(--kop-schaal));line-height:1.2}
.vs-weglijst p{font-size:14px;line-height:1.5;color:var(--tekst-2)}
.vs-checklijst{list-style:none;display:grid;border-top:1px solid var(--lijn)}
.vs-checklijst li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--lijn)}
.vs-checklijst li .mono{padding-top:3px;color:var(--zacht)}
.vs-checklijst li[data-staat=ja] .mono{color:var(--inkt)}
.vs-checklijst b{display:block;font-weight:600}
.vs-checklijst li div span{display:block;margin-top:2px;color:var(--zacht);line-height:1.5}
.vs-raster{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vs-raster li{padding:24px;border-radius:20px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.vs-raster h3{font-size:calc(21px * var(--kop-schaal))}
.vs-raster p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.vs-tabel{overflow-x:auto;border-radius:20px;box-shadow:inset 0 0 0 1px var(--haar)}
.vs-tabel:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.vs-tabel table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.vs-tabel th,.vs-tabel td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--haar)}
.vs-tabel thead th{font:500 11px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-3)}
.vs-tabel tbody th{font-weight:600}
.vs-tabel td{color:var(--tekst-2)}
.vs-tabel tbody tr:last-child > *{border-bottom:0}
.vs-feiten{display:grid;margin-top:8px;border-top:1px solid var(--haar)}
.vs-feiten div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--haar)}
.vs-feiten dt{font:500 11px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-3);padding-top:4px}
.vs-feiten dd{color:var(--tekst)}
.vs-feiten a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.vs-incident,.vs-bedrijf,.vs-eerlijk{border-top:1px solid var(--haar)}

/* over: blok met Steffie */
.vs-mens{display:grid;gap:18px;margin:0}
.vs-mens picture,.vs-mens img{display:block;width:100%;border-radius:24px}
.vs-mens img{aspect-ratio:4/5;object-fit:cover;background:var(--zwart-2)}
.vs-mens figcaption{display:grid;gap:6px;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.vs-mens figcaption b{font-family:var(--font-kop);font-weight:var(--kop-gewicht);font-size:calc(24px * var(--kop-schaal));color:var(--tekst)}

@media (max-width:1100px){.vs-weglijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .vs-twee,.vs-stappen,.vs-formules,.vs-raster{grid-template-columns:1fr}
  .vs-twee{gap:28px}
  .vs-verloop li{grid-template-columns:72px minmax(0,1fr);gap:10px}
}
@media (max-width:560px){
  .vs-weglijst{grid-template-columns:1fr}
  .vs-feiten div{grid-template-columns:1fr;gap:4px}
  .vs-formule,.vs-stappen li{padding:22px}
}