/* ==========================================================================
   ViRank — visuele laag "De meetlat"
   --------------------------------------------------------------------------
   Uitgangspunt: ViRank meet posities. De site is daarom gebouwd als een
   meetinstrument, niet als een kaartenverzameling.

   De drie dragende principes:
   1. DE AS       Een doorlopende verticale maatlijn links van de inhoud.
                  Secties zijn genummerde streepjes op die as.
   2. HET REGISTER Inhoud staat in registers gescheiden door haarlijnen.
                  Geen dozen om losse stukjes tekst.
   3. DE SCHAAL   Data wordt geplot op een schaal met streepjes, niet als
                  balk in een kaartje. Oranje markeert uitsluitend jouw
                  positie of de eerstvolgende actie.

   Rechte hoeken zijn de norm: een meetinstrument is niet afgerond.
   Alleen bedienbare elementen krijgen 2px, zodat ze aanraakbaar ogen.
   ========================================================================== */

:root{
  /* --- Inkt en papier ------------------------------------------------- */
  --navy:#000A6B;          /* koppen, de as, structuur */
  --navy-diep:#00063F;     /* zware vlakken */
  --navy-web:#1B2A8F;      /* links in lopende tekst */
  --inkt:#14161F;          /* bodytekst: bijna zwart, niet grijs */
  --inkt-2:#3E4354;        /* secundaire tekst */
  --inkt-3:#6B7186;        /* bijschrift, metadata */

  --papier:#FFFFFF;
  --papier-warm:#FBFAF7;   /* warm, niet het blauwgrijs van elke SaaS-site */
  --lijn:#DCDCD4;          /* haarlijn, warm grijs */
  --lijn-sterk:#A8A99F;
  --as:#C9CAC0;            /* de maatlijn zelf */

  /* --- Signaal --------------------------------------------------------- */
  --oranje:#C2410C;        /* uitsluitend: jouw positie, primaire actie */
  --oranje-diep:#9A330A;
  --oranje-vlak:#FDF0E7;
  --groen:#14663E;         /* behaald, uitgevoerd */
  --groen-vlak:#EDF6F1;
  --rood:#A31B14;          /* verlies, fout */
  --rood-vlak:#FCF0EF;
  --ai:#4A3A9E;            /* AI-oppervlak, onderscheidt zich van Google-blauw */
  --ai-vlak:#F0EDFA;

  /* --- Typografie ------------------------------------------------------
     Twee families. Archivo blijft de merkletter (continuïteit met ViVortis),
     maar wordt bewust niet als zware display-sans ingezet: koppen staan op
     600, gematigde grootte, en de bodytekst is groot en donker. Dat is de
     omkering van de gebruikelijke reuzenkop-met-klein-grijs-tekstje.        */
  --sans:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:'Archivo', -apple-system, 'Segoe UI', sans-serif;

  /* --- Maatvoering: 8px-grondmaat, asbreedte vast ---------------------- */
  --m1:4px;  --m2:8px;  --m3:12px; --m4:16px; --m5:24px;
  --m6:32px; --m7:48px; --m8:72px; --m9:112px;
  --rand:clamp(20px,5vw,56px);
  --breed:1240px;
  --lees:68ch;
  --as-breedte:clamp(0px,6vw,88px);   /* ruimte links voor de maatlijn */

  --r-bedien:2px;                     /* enige radius in het systeem */
}

/* --------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--sans);font-size:18px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"tnum" 0;
}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--navy-web)}
:focus-visible{outline:2px solid var(--oranje);outline-offset:3px}
::selection{background:var(--oranje-vlak)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:200}
.skip:focus{left:16px;top:16px;background:var(--navy);color:#fff;padding:12px 18px}

/* ---------------------------------------------------------- Typografie -- */
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--navy);letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(24px,2.5vw,32px)}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.012em;line-height:1.25}
h4{font-size:17px;font-weight:600;letter-spacing:-.008em}
p{margin:0}
strong,b{font-weight:600;color:var(--inkt)}
.inleiding{font-size:clamp(19px,1.5vw,21px);line-height:1.55;color:var(--inkt);font-weight:400}
.terzijde{font-size:15px;line-height:1.5;color:var(--inkt-3)}

/* Cijfers en codes altijd in mono met tabellarische uitlijning */
.getal,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* -------------------------------------------------------------- Layout -- */
.wrap{max-width:var(--breed);margin-inline:auto;padding-inline:var(--rand)}
.sec{padding-block:var(--m8)}
.sec--ruim{padding-block:var(--m9)}
.sec--krap{padding-block:var(--m7)}

/* DE AS — verticale maatlijn met genummerde streepjes.
   Dit is het dragende merkelement en vervangt het eyebrow-label. */
.as{position:relative;padding-left:var(--as-breedte)}
.as::before{
  content:"";position:absolute;left:calc(var(--as-breedte) - 24px);top:6px;bottom:0;
  width:1px;background:var(--as);
}
.as__tik{
  position:absolute;left:calc(var(--as-breedte) - 24px);top:6px;
  display:flex;align-items:center;gap:8px;transform:translateX(-100%);padding-right:10px;
}
.as__tik b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--inkt-3);font-variant-numeric:tabular-nums}
.as__tik i{display:block;width:14px;height:1px;background:var(--as)}
@media (max-width:860px){
  .as{padding-left:0}
  .as::before{left:0;top:0;height:100%}
  .as__tik{position:static;transform:none;padding:0 0 var(--m3);border-left:0}
  .as__tik i{display:none}
  .as{padding-left:var(--m5);border-left:1px solid var(--as)}
  .as::before{display:none}
}

/* Sectiekop: geen label, geen centrering. De kop staat links en draagt zelf. */
.kop{max-width:30ch;margin-bottom:var(--m6)}
.kop p{margin-top:var(--m4);max-width:56ch;color:var(--inkt-2);font-size:17px;line-height:1.55}
.kop--breed{max-width:44ch}

/* -------------------------------------------------------------- Knoppen --
   Rechthoekig met 2px. De primaire knop is massief oranje; de secundaire is
   een tekstlink met onderlijn, geen tweede omkaderde knop ernaast.          */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border:1px solid transparent;border-radius:var(--r-bedien);
  font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.knop--primair{background:var(--oranje);color:#fff;border-color:var(--oranje)}
.knop--primair:hover{background:var(--oranje-diep);border-color:var(--oranje-diep)}
.knop--kader{background:transparent;color:var(--navy);border-color:var(--lijn-sterk)}
.knop--kader:hover{border-color:var(--navy);background:var(--papier-warm)}
.knop--licht{background:#fff;color:var(--navy);border-color:#fff}
.knop--licht:hover{background:var(--papier-warm)}
.knop--klein{min-height:40px;padding:9px 16px;font-size:15px}
.knop--vol{width:100%}

/* Secundaire actie = onderstreepte tekstlink, niet nog een knop */
.actie{
  display:inline-flex;align-items:baseline;gap:8px;color:var(--navy);font-weight:600;font-size:17px;
  text-decoration:none;border-bottom:1px solid var(--lijn-sterk);padding-bottom:2px;
}
.actie:hover{border-bottom-color:var(--oranje);color:var(--oranje)}
.actie::after{content:"→";font-family:var(--mono);font-size:14px}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m5);margin-top:var(--m6)}

/* --------------------------------------------------------- Aankondiging -- */
.aankondiging{position:relative;overflow:hidden;background:radial-gradient(700px 200px at 20% 0%,rgba(0,0,128,.6),transparent 60%),linear-gradient(180deg,#0B0F3A,#070A20);color:#fff;font-size:14px;border-bottom:1px solid rgba(255,255,255,.12)}.aankondiging::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 120px);pointer-events:none}
.aankondiging a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:11px;padding:9px var(--rand);color:#fff;text-decoration:none;flex-wrap:wrap}.aankondiging a::before{content:"";width:16px;height:3px;background:var(--oranje);flex:none}.aankondiging a::after{content:"\2192";color:#FFB48A;font-weight:700}.aankondiging a b{color:#fff;font-weight:750}.aankondiging a span{color:#AAB2CC}
.aankondiging b{font-weight:600;letter-spacing:.01em}
.aankondiging span{color:#AEB4DE}
.aankondiging a:hover b{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------- Header -- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--lijn)}
.hdr__in{position:relative;display:flex;align-items:center;gap:var(--m6);height:72px}
.logo{display:inline-flex;align-items:center;gap:1px;min-height:44px;font-weight:700;font-size:21px;letter-spacing:-.05em;color:var(--navy);text-decoration:none;flex:none}
.logo i{font-style:normal;color:var(--oranje)}

.hoofdnav{display:flex;margin-right:auto;height:100%;list-style:none;margin-block:0;padding:0}
.hoofdnav>li{position:static;display:flex}
.hoofdnav__knop{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 var(--m4);border:0;background:none;
  font-size:16px;font-weight:500;color:var(--inkt-2);cursor:pointer;text-decoration:none;position:relative;
}
/* actieve staat: een streepje op de maatlijn, geen gekleurde pil */
.hoofdnav__knop::after{content:"";position:absolute;left:var(--m4);right:var(--m4);bottom:0;height:2px;background:transparent}
.hoofdnav__knop:hover{color:var(--navy)}
.hoofdnav__knop:hover::after,.hoofdnav__knop[aria-expanded=true]::after{background:var(--lijn-sterk)}
.hoofdnav__knop[aria-current=page]{color:var(--navy);font-weight:600}
.hoofdnav__knop[aria-current=page]::after{background:var(--oranje)}
.hoofdnav__knop svg{transition:transform .16s}
.hoofdnav__knop[aria-expanded=true] svg{transform:rotate(180deg)}

/* Mega menu: vlak, rechthoekig, kolommen gescheiden door haarlijnen */
.mega{position:absolute;top:100%;left:0;right:0;transform:translateY(-4px);background:#fff;border:1px solid #E5E2D8;border-top:0;border-radius:0 0 18px 18px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:110;box-shadow:0 34px 60px -34px rgba(6,10,40,.5);overflow:hidden}
.mega[data-open=true]{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,128,.026) 0 1px,transparent 1px 132px);pointer-events:none}
.mega__grid{position:relative;display:grid}
.mega__kol{padding:30px 30px;border-right:1px solid #E5E2D8}
.mega__eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C2410C;margin-bottom:18px}
.mega__eyebrow .mega__tick{width:18px;height:3px;background:#C2410C;flex:none}
.mega__eyebrow svg{width:17px;height:17px;flex:none;display:block}
.mega__kol h3{display:none}
.mega__kol ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.mega__kol a{display:block;padding:9px 10px;margin:0 -10px;border-radius:9px;text-decoration:none;transition:background .14s;border-bottom:0}
.mega__kol a b{display:block;font-size:15.5px;font-weight:650;color:#000080;letter-spacing:-.01em;line-height:1.25}
.mega__kol a small{display:block;font-size:13px;color:#5A6478;margin-top:1px}
.mega__kol a:hover{background:#F4F5FB;border-bottom:0}
.mega__kol a:hover b{color:#C2410C}
.mega__promo{position:relative;background:radial-gradient(560px 300px at 78% 0%,rgba(0,0,128,.55),transparent 60%),linear-gradient(180deg,#0B0F3A 0%,#070A20 100%);color:#E7E9F4;padding:30px 30px;display:flex;flex-direction:column}
.mega__promo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 120px);pointer-events:none}
.mega__promo>*{position:relative}
.mega__promo-tick{width:26px;height:3px;background:#C2410C;margin-bottom:14px}
.mega__promo h3{display:none}
.mega__promo h4{font-size:1.15rem;font-weight:750;color:#fff;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px}
.mega__promo p{font-size:.9rem;color:#AAB2CC;line-height:1.55;margin-bottom:16px}
.mega__promo-cta{background:#C2410C;color:#fff;font-weight:700;font-size:.92rem;border-radius:10px;padding:12px 18px;text-align:center;text-decoration:none;margin-top:6px;transition:background .15s}
.mega__promo-cta:hover{background:#E86A2E}
.mega__promo-link{margin-top:12px;font-size:.86rem;color:#fff;text-decoration:none;border-bottom:2px solid #C2410C;align-self:flex-start}
.mega__promo-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.mega__promo-links a{color:#D7DBEC;font-size:14px;text-decoration:none}
.mega__promo-links a:hover{color:#fff}
/* hover-brug: dekt de dode zone tussen knop en paneel, zodat het menu open blijft */
.mega{overflow:visible}
.mega::after{content:none}
.mega__promo{border-radius:0 0 18px 0}


.hdr__cta{display:flex;align-items:center;gap:18px;flex:none;margin-left:12px;padding-left:20px;border-left:1px solid var(--lijn)}.hdr__cta .knop--primair{border-radius:10px;padding:11px 20px;font-weight:650}
.hdr__login{font-size:16px;font-weight:500;color:var(--inkt-2);text-decoration:none}
.hdr__login:hover{color:var(--navy)}
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--lijn-sterk);border-radius:var(--r-bedien);background:none}
@media (max-width:1100px){.hoofdnav,.hdr__login{display:none}.hamburger{display:flex}}

/* Mobiel menu */
.mob{position:fixed;inset:72px 0 0;background:var(--papier);z-index:99;overflow-y:auto;padding-bottom:120px;display:none}
.mob[data-open=true]{display:block}
.mob-scan{padding:16px var(--rand);border-bottom:1px solid var(--lijn)}
.mob-scan .lbl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oranje);display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mob-scan .lbl .tick{width:16px;height:3px;background:var(--oranje)}
.mob-scan .veld{display:flex;gap:7px;background:#fff;border:1.5px solid var(--navy);border-radius:11px;padding:6px;box-shadow:0 10px 24px rgba(0,0,128,.07)}
.mob-scan input{flex:1;min-width:20px;border:none;outline:none;font:inherit;font-size:15px;padding:8px 10px;background:transparent;color:var(--inkt)}
.mob-scan input::placeholder{color:#9AA1B5}
.mob-scan button{border:none;background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:14px;border-radius:8px;padding:0 16px;white-space:nowrap;cursor:pointer}
.mob__groep{border-bottom:1px solid var(--lijn)}
.mob__kop{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px var(--rand);border:0;background:none;font-size:18px;font-weight:650;color:var(--navy);text-align:left;text-decoration:none;cursor:pointer}
.mob__kop svg{transition:transform .18s;color:var(--oranje)}
.mob__kop[aria-expanded=true] svg{transform:rotate(180deg)}
.mob__paneel{display:none;padding:0 var(--rand) var(--m5)}
.mob__paneel[data-open=true]{display:block}
.mob__paneel>a:first-child{display:inline-block;padding:8px 0 2px;font-size:14px;font-weight:700;color:var(--oranje);text-decoration:none;border:0}
.mob__paneel h4{display:flex;align-items:center;gap:9px;font-family:inherit;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oranje);margin:18px 0 6px;font-weight:800}
.mob__paneel h4::before{content:"";width:16px;height:3px;background:var(--oranje);flex:none}
.mob__paneel a{display:block;padding:11px 0;font-size:16px;color:var(--inkt);text-decoration:none;border-bottom:1px solid #ECEAE1;font-weight:500}
.mob__cta{padding:var(--m6) var(--rand);display:grid;gap:11px;border-top:1px solid var(--lijn);background:#fff}
.mob__cta .knop{border-radius:10px;font-weight:650}
.mob__cta .knop--secundair{background:#fff;border:1.5px solid var(--navy);color:var(--navy)}

/* ---------------------------------------------------------- Kruimelpad -- */
.kruimels{border-bottom:1px solid var(--lijn)}
.kruimels ol{display:flex;flex-wrap:wrap;gap:var(--m2);list-style:none;margin:0;padding:var(--m4) 0;font-family:var(--mono);font-size:12.5px;color:var(--inkt-3)}
.kruimels li{display:flex;align-items:center;gap:var(--m2)}
.kruimels li+li::before{content:"/";color:var(--as)}
.kruimels a{color:var(--inkt-3);text-decoration:none}
.kruimels a:hover{color:var(--oranje)}
.kruimels [aria-current=page]{color:var(--inkt)}

/* ----------------------------------------------------------------- Hero --
   Geen label, geen mock-up rechts, geen vinkjesrij, geen dubbele knop.
   De hero is een openingspagina: kop, kernzin, één actie, en daaronder de
   meting die het verhaal draagt — over de volle breedte, op een schaal.     */
.opening{padding-block:var(--m8) var(--m7);border-bottom:1px solid var(--lijn)}
.opening__kop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m7) var(--m9);align-items:end}
.opening h1{max-width:15ch}
.opening__zin{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--inkt);max-width:46ch}
.opening__zin+.opening__zin{margin-top:var(--m4);color:var(--inkt-2);font-size:17px}
@media (max-width:900px){.opening__kop{grid-template-columns:1fr;gap:var(--m5);align-items:start}}

/* Het scanveld: één regel, onderstreept, geen doos */
.scan{margin-top:var(--m6);max-width:520px}
.scan__label{display:block;font-size:15px;color:var(--inkt-2);margin-bottom:var(--m3)}
.scan__rij{display:flex;gap:var(--m3);align-items:stretch;border-bottom:2px solid var(--navy);padding-bottom:var(--m2)}
.scan__rij:focus-within{border-bottom-color:var(--oranje)}
.scan__rij input{flex:1;min-width:0;border:0;background:none;padding:8px 0;font:inherit;font-size:19px;color:var(--inkt);outline:0}
.scan__rij input::placeholder{color:var(--inkt-3)}
.scan__voet{margin-top:var(--m3);font-size:14.5px;color:var(--inkt-3)}
@media (max-width:520px){.scan__rij{flex-direction:column;align-items:stretch;border-bottom:0;gap:var(--m3)}.scan__rij input{border-bottom:2px solid var(--navy)}}

/* ------------------------------------------------------------ DE SCHAAL --
   Het signatuurelement: een positie geplot op een schaal met streepjes.
   Vervangt zowel de voortgangsbalk als de statistiekkaart.                  */
.schaal{display:grid;gap:var(--m5)}
.meting{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(0,3fr) auto;gap:var(--m5);align-items:baseline}
.meting__naam{font-size:16px;font-weight:500;color:var(--inkt)}
.meting__naam em{display:block;font-style:normal;font-size:13.5px;color:var(--inkt-3);margin-top:2px}
.meting__spoor{position:relative;height:26px;border-bottom:1px solid var(--lijn)}
/* streepjes op de schaal: 0, 25, 50, 75, 100 */
.meting__spoor::before{
  content:"";position:absolute;inset:auto 0 0;height:6px;
  background-image:linear-gradient(90deg,var(--as) 1px,transparent 1px);
  background-size:25% 100%;
}
.meting__vlag{
  position:absolute;bottom:0;width:2px;background:var(--navy);height:20px;
  transition:left .7s cubic-bezier(.2,.8,.2,1);left:0;
}
.meting__vlag::after{
  content:attr(data-waarde);position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums;
}
.meting--jij .meting__vlag{background:var(--oranje);height:26px}
.meting--jij .meting__vlag::after{color:var(--oranje);font-weight:700}
.meting--ai .meting__vlag{background:var(--ai)}
.meting--ai .meting__vlag::after{color:var(--ai)}
.meting__uit{font-family:var(--mono);font-size:14px;color:var(--inkt-3);font-variant-numeric:tabular-nums}
@media (max-width:700px){.meting{grid-template-columns:1fr;gap:var(--m2)}.meting__uit{display:none}}

/* ------------------------------------------------------------- REGISTER --
   Inhoud in rijen gescheiden door haarlijnen. Geen kaarten.                 */
.register{border-top:1px solid var(--lijn)}
.register__rij{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--m5);
  align-items:start;padding:var(--m5) 0;border-bottom:1px solid var(--lijn);
}
.register__n{font-family:var(--mono);font-size:13px;color:var(--inkt-3);font-variant-numeric:tabular-nums;padding-top:3px;min-width:2.5ch}
.register__t{font-size:17px;font-weight:500;color:var(--inkt);line-height:1.4}
.register__t span{display:block;font-weight:400;font-size:15.5px;color:var(--inkt-2);margin-top:var(--m2);max-width:62ch}
.register__w{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--groen);white-space:nowrap;font-variant-numeric:tabular-nums}
.register__rij:hover{background:var(--papier-warm)}
@media (max-width:640px){.register__rij{grid-template-columns:auto minmax(0,1fr);gap:var(--m3) var(--m4)}.register__w{grid-column:2}}

/* --------------------------------------------------------- Kolomregister --
   Voor opsommingen: kolommen met een streepje ervoor, geen kaartjes.        */
.kolommen{display:grid;gap:0;border-top:1px solid var(--lijn)}
.kolommen--2{grid-template-columns:repeat(2,1fr)}
.kolommen--3{grid-template-columns:repeat(3,1fr)}
.kolommen>*{padding:var(--m5) var(--m5) var(--m6) 0;border-bottom:1px solid var(--lijn);border-right:1px solid var(--lijn)}
.kolommen>*:last-child{border-right:0}
.kolommen h3{margin-bottom:var(--m3)}
.kolommen p{font-size:16px;line-height:1.55;color:var(--inkt-2);max-width:40ch}
.kolommen__n{font-family:var(--mono);font-size:12px;color:var(--oranje);display:block;margin-bottom:var(--m3);font-variant-numeric:tabular-nums}
@media (max-width:900px){.kolommen--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kolommen--2,.kolommen--3{grid-template-columns:1fr}.kolommen>*{border-right:0;padding-right:0}}

/* ---------------------------------------------------------------- Lijst --
   Opsommingen krijgen een streepje, geen vinkje in een rondje.              */
.lijst{list-style:none;margin:var(--m5) 0 0;padding:0;display:grid;gap:var(--m4);border-top:1px solid var(--lijn)}
.lijst li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--m4);padding-top:var(--m4);font-size:17px;line-height:1.5;color:var(--inkt-2)}
.lijst li::before{content:"";width:14px;height:1px;background:var(--oranje);margin-top:13px}
.lijst--kaal{border-top:0}
.lijst--kaal li{padding-top:0}

/* ------------------------------------------------------------ Lopende tekst */
.tekst{max-width:var(--lees)}
.tekst>*+*{margin-top:var(--m5)}
.tekst h2{margin-top:var(--m8)}
.tekst h3{margin-top:var(--m7)}
.tekst h2:first-child,.tekst h3:first-child{margin-top:0}
.tekst p{color:var(--inkt);line-height:1.65;font-size:18px}
.tekst a:not(.knop):not(.actie){color:var(--navy-web);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--lijn-sterk)}
.tekst a:not(.knop):not(.actie):hover{color:var(--oranje);text-decoration-color:var(--oranje)}
.tekst ul,.tekst ol{margin:var(--m5) 0;padding:0;list-style:none;display:grid;gap:var(--m3)}
.tekst li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--m4);color:var(--inkt);line-height:1.55}
.tekst ul li::before{content:"";width:14px;height:1px;background:var(--oranje);margin-top:13px}
.tekst ol{counter-reset:n}
.tekst ol li{counter-increment:n}
.tekst ol li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--oranje);padding-top:3px;font-variant-numeric:tabular-nums}
.tekst blockquote{margin:var(--m6) 0;padding-left:var(--m5);border-left:2px solid var(--oranje)}
.tekst blockquote p{font-size:20px;line-height:1.45;color:var(--navy);font-weight:500}

/* Kort antwoord: een uitgelicht register, geen doos met schaduw */
.antwoord{border-top:2px solid var(--navy);border-bottom:1px solid var(--lijn);padding:var(--m5) 0}
.antwoord__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oranje);display:block;margin-bottom:var(--m3)}
.antwoord p{font-size:19px;line-height:1.5;color:var(--inkt)}
.antwoord p+p{margin-top:var(--m3);font-size:17px;color:var(--inkt-2)}

/* Inhoudsopgave als genummerde index */
.index{border-top:1px solid var(--lijn);padding-top:var(--m4);margin:var(--m6) 0}
.index h2{font-family:var(--mono);font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3);margin:0 0 var(--m4)!important;font-weight:500}
.index ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:0}
.index li{counter-increment:t;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--m3);padding:10px 0;border-bottom:1px solid var(--lijn)}
.index li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--inkt-3);padding-top:3px;font-variant-numeric:tabular-nums}
.index a{font-size:16px;color:var(--inkt-2);text-decoration:none}
.index a:hover{color:var(--oranje)}

/* ---------------------------------------------------------------- Tabel -- */
.tabelwrap{overflow-x:auto;margin:var(--m6) 0}
table.vr{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
table.vr th,table.vr td{padding:var(--m4) var(--m4) var(--m4) 0;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
table.vr thead th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--inkt-3);border-bottom:1px solid var(--navy);padding-bottom:var(--m3);
}
table.vr tbody th{font-weight:500;color:var(--inkt)}
table.vr tbody tr:hover{background:var(--papier-warm)}

/* ------------------------------------------------------------- Prijzen --
   Twee registers naast elkaar, gescheiden door een lijn. Geen prijskaarten. */
.prijzen{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--navy)}
.plan{padding:var(--m6) var(--m6) var(--m6) 0;border-right:1px solid var(--lijn)}
.plan:last-child{border-right:0;padding-left:var(--m6)}
.plan--top{background:var(--papier-warm)}
.plan__merk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3);display:block;margin-bottom:var(--m3)}
.plan--top .plan__merk{color:var(--oranje)}
.plan__prijs{display:flex;align-items:baseline;gap:var(--m2);margin:var(--m4) 0 var(--m2)}
.plan__prijs b{font-family:var(--mono);font-size:clamp(34px,3.4vw,44px);font-weight:500;color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan__prijs span{font-size:15px;color:var(--inkt-3)}
.plan .knop{margin-top:var(--m5)}
.plan ul{list-style:none;margin:var(--m6) 0 0;padding:var(--m5) 0 0;border-top:1px solid var(--lijn);display:grid;gap:var(--m4)}
.plan li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--m3);font-size:16px;line-height:1.45;color:var(--inkt-2)}
.plan li::before{content:"";width:14px;height:1px;background:var(--oranje);margin-top:11px}
@media (max-width:820px){.prijzen{grid-template-columns:1fr}.plan{border-right:0;border-bottom:1px solid var(--lijn);padding-left:0!important}}

/* -------------------------------------------------------------- Vragen --
   Genummerde regels, opengeklapt met een verticale lijn. Geen kaartaccordion. */
.vragen{border-top:2px solid var(--navy)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:var(--m4);
  padding:var(--m5) 0;font-size:18px;font-weight:500;color:var(--navy);line-height:1.4;align-items:baseline;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::before{content:attr(data-n);font-family:var(--mono);font-size:12px;color:var(--inkt-3);font-weight:400;font-variant-numeric:tabular-nums}
.vraag summary:hover{color:var(--oranje)}
.vraag__teken{width:14px;height:14px;position:relative;justify-self:end;align-self:center}
.vraag__teken::before,.vraag__teken::after{content:"";position:absolute;background:var(--oranje);transition:transform .2s}
.vraag__teken::before{left:0;right:0;top:6px;height:2px}
.vraag__teken::after{top:0;bottom:0;left:6px;width:2px}
.vraag[open] .vraag__teken::after{transform:scaleY(0)}
.vraag__a{padding:0 var(--m8) var(--m5) 36px;font-size:17px;line-height:1.6;color:var(--inkt-2);border-left:1px solid var(--oranje);margin-left:17px}
.vraag__a p+p{margin-top:var(--m3)}
@media (max-width:620px){.vraag__a{padding-right:0}}

/* ---------------------------------------------------------------- Beeld -- */
figure.beeld{margin:0}
figure.beeld img{width:100%;border:1px solid var(--lijn)}
figure.beeld figcaption{margin-top:var(--m3);font-family:var(--mono);font-size:12.5px;color:var(--inkt-3);line-height:1.45}

/* Sfeerbeeld: volle breedte, geen afronding, tekst eronder niet erop */
.sfeer{margin:0 0 var(--m6)}
.sfeer img{width:100%;height:clamp(200px,24vw,300px);object-fit:cover;border:1px solid var(--lijn)}
.sfeer figcaption{margin-top:var(--m3);font-family:var(--mono);font-size:12.5px;color:var(--inkt-3)}

/* ------------------------------------------------------- Twee kolommen --
   Asymmetrisch: 7/5, niet 50/50, en de kolommen wisselen van kant.          */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--m7) var(--m9);align-items:start}
.split--om>*:first-child{order:2}
.split__tekst>.tekst{margin-top:var(--m5)}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--m6)}.split--om>*:first-child{order:0}}

/* ------------------------------------------------------------- Uitkomst --
   Resultaatcijfers als geplotte metingen, niet als zwevende kaarten.        */
.uitkomsten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:2px solid var(--navy)}
.uitkomst{padding:var(--m5) var(--m5) var(--m6) 0;border-right:1px solid var(--lijn)}
.uitkomst:last-child{border-right:0}
.uitkomst b{display:block;font-family:var(--mono);font-size:clamp(30px,3vw,40px);font-weight:500;color:var(--oranje);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.uitkomst span{display:block;margin-top:var(--m3);font-size:15.5px;color:var(--inkt-2);line-height:1.4;max-width:26ch}
@media (max-width:620px){.uitkomsten{grid-template-columns:1fr}.uitkomst{border-right:0;border-bottom:1px solid var(--lijn);padding-right:0}}

/* --------------------------------------------------------------- Citaat -- */
.citaat{margin:0;max-width:60ch}
.citaat blockquote{margin:0;padding:0;border:0}
.citaat blockquote p{font-size:clamp(21px,2.1vw,26px);line-height:1.4;color:var(--navy);font-weight:500;letter-spacing:-.015em}
.citaat__wie{display:flex;align-items:center;gap:var(--m4);margin-top:var(--m5);padding-top:var(--m4);border-top:1px solid var(--lijn)}
.citaat__wie img{width:44px;height:44px;object-fit:cover;flex:none;border:1px solid var(--lijn)}
.citaat__wie b{display:block;font-size:16px;color:var(--inkt)}
.citaat__wie small{font-size:14px;color:var(--inkt-3)}

/* --------------------------------------------------------------- Expert -- */
.expert{display:flex;gap:var(--m5);align-items:flex-start;border-top:1px solid var(--lijn);padding-top:var(--m5);max-width:var(--lees)}
.expert img{width:56px;height:56px;object-fit:cover;flex:none;border:1px solid var(--lijn)}
.expert b{display:block;font-size:17px;color:var(--inkt)}
.expert span{display:block;font-family:var(--mono);font-size:12.5px;color:var(--oranje);margin-top:2px}
.expert p{margin-top:var(--m3);font-size:16px;color:var(--inkt-2);line-height:1.5}

/* ------------------------------------------------------------ Formulier -- */
.vrform{max-width:640px}
.veld{margin-bottom:var(--m6)}
.veld label{display:block;font-size:16px;font-weight:500;color:var(--inkt);margin-bottom:var(--m2)}
.veld .req{color:var(--oranje)}
.veld input,.veld select,.veld textarea{
  width:100%;border:0;border-bottom:1px solid var(--lijn-sterk);border-radius:0;
  padding:12px 0;font:inherit;font-size:18px;background:none;color:var(--inkt);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-bottom-color:var(--oranje);border-bottom-width:2px;padding-bottom:11px}
.veld textarea{min-height:150px;resize:vertical;border:1px solid var(--lijn-sterk);padding:var(--m4)}
.veld textarea:focus{border-color:var(--oranje)}
.veld small{display:block;margin-top:var(--m2);font-size:14px;color:var(--inkt-3)}
.veld--hp{position:absolute;left:-9999px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--m6)}
@media (max-width:640px){.form-2{grid-template-columns:1fr}}
.formstatus{padding:var(--m4) var(--m5);margin-bottom:var(--m5);font-size:16px;border-left:3px solid}
.formstatus--ok{background:var(--groen-vlak);border-color:var(--groen);color:var(--groen)}
.formstatus--fout{background:var(--rood-vlak);border-color:var(--rood);color:var(--rood)}

/* ---------------------------------------------------------- Verwijzingen -- */
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--lijn)}
.hub>div{padding:var(--m5) var(--m5) var(--m6) 0;border-right:1px solid var(--lijn)}
.hub>div:last-child{border-right:0}
.hub h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3);margin-bottom:var(--m4)}
.hub ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hub li{border-bottom:1px solid var(--lijn)}
.hub li:last-child{border-bottom:0}
.hub a{display:block;padding:10px 0;font-size:15.5px;color:var(--inkt-2);text-decoration:none;line-height:1.35}
.hub a:hover{color:var(--oranje)}
@media (max-width:900px){.hub{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hub{grid-template-columns:1fr}.hub>div{border-right:0;padding-right:0}}

/* ------------------------------------------------------------- Slotactie --
   Geen groot afgerond vlak: een zware bovenlijn en een asymmetrische zetting. */
.slot{border-top:2px solid var(--navy);padding-top:var(--m7)}
.slot__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m7) var(--m9);align-items:start}
.slot h2{max-width:16ch}
.slot p{margin-top:var(--m4);font-size:18px;line-height:1.55;color:var(--inkt-2);max-width:46ch}
.mens{border-left:1px solid var(--lijn);padding-left:var(--m5)}
.mens__top{display:flex;align-items:center;gap:var(--m4)}
.mens__ph{width:48px;height:48px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:15px;flex:none}
.mens__top b{display:block;font-size:16px;color:var(--inkt)}
.mens__top span{font-family:var(--mono);font-size:12.5px;color:var(--inkt-3)}
.mens p{margin-top:var(--m4);font-size:16px;color:var(--inkt-2);line-height:1.5}
.mens .actie{margin-top:var(--m4)}
@media (max-width:900px){.slot__in{grid-template-columns:1fr}.mens{border-left:0;border-top:1px solid var(--lijn);padding-left:0;padding-top:var(--m5)}}

/* --------------------------------------------------------------- Footer -- */
.ftr{border-top:1px solid var(--lijn);margin-top:var(--m9);padding-top:var(--m7)}
.ftr__in{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:var(--m6)}
.ftr__merk p{margin-top:var(--m4);font-size:15.5px;color:var(--inkt-2);line-height:1.5;max-width:34ch}
.ftr__scan{margin-top:var(--m5);display:flex;gap:var(--m3);max-width:300px;border-bottom:1px solid var(--lijn-sterk);padding-bottom:var(--m2)}
.ftr__scan input{flex:1;min-width:0;border:0;background:none;padding:6px 0;font:inherit;font-size:16px}
.ftr__scan input:focus{outline:0}
.ftr h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3);margin-bottom:var(--m4)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{font-size:15px;color:var(--inkt-2);text-decoration:none}
.ftr ul a:hover{color:var(--oranje)}
.ftr__bot{margin-top:var(--m8);border-top:1px solid var(--lijn);padding-block:var(--m5);display:flex;justify-content:space-between;gap:var(--m4) var(--m6);flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--inkt-3)}
.ftr__bot>div{min-width:0}
.ftr__bot>div:last-child{display:flex;flex-wrap:wrap;gap:var(--m2) var(--m5)}
.ftr__bot a{color:var(--inkt-3);text-decoration:none}
.ftr__bot a:hover{color:var(--oranje)}
@media (max-width:1000px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr}}

/* ------------------------------------------------------- Mobiele actie --- */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:var(--m3);
  padding:var(--m3) var(--rand) calc(var(--m3) + env(safe-area-inset-bottom));
  background:var(--papier);border-top:1px solid var(--navy);transform:translateY(110%);transition:transform .24s;
}
.stickycta[data-on=true]{transform:none}
.stickycta .knop{flex:1;min-height:48px;font-size:16px}
@media (max-width:768px){.stickycta{display:flex}body{padding-bottom:76px}}

/* ---------------------------------------------------------- Statusmerken --
   Eén systeem voor status, ook buiten het dashboard herkenbaar.             */
.merk{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.merk::before{content:"";width:8px;height:8px;flex:none}
.merk--actie::before{background:var(--oranje)}
.merk--klaar::before{background:var(--groen)}
.merk--let::before{background:var(--rood)}
.merk--ai::before{background:var(--ai)}
.merk--actie{color:var(--oranje)}
.merk--klaar{color:var(--groen)}
.merk--let{color:var(--rood)}
.merk--ai{color:var(--ai)}

/* --------------------------------------------------------------- Motion -- */
.komt{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.komt.er{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.komt{opacity:1;transform:none}}

@media print{
  .hdr,.ftr,.stickycta,.aankondiging,.mob,.slot{display:none!important}
  body{font-size:11pt;color:#000}
}

/* De globale strong/b-kleur mag de omgekeerde vlakken niet overschrijven */
.aankondiging b,.aankondiging strong{color:#fff}
.mens__top b,.citaat__wie b,.expert b{color:var(--inkt)}

/* Custom-logo (Customizer) proporties */
.logo--img{display:inline-flex;align-items:center}
.logo--img img{height:34px;width:auto;max-width:180px;display:block}
.ftr .logo--img img{height:30px}

/* Officiele wordmark-SVG in header/footer */
.logo .logo-svg{height:30px;width:auto;display:block}
.ftr .logo .logo-svg{height:28px}
.logo{line-height:0}


/* ============ VV-FOOTER-NAVY (expert-level, sitebreed) ============ */
.vf{background:radial-gradient(1100px 480px at 14% 0%,rgba(0,0,128,.5),transparent 60%),linear-gradient(180deg,#0B0F3A 0%,#070A20 100%);color:#E7E9F4;position:relative;overflow:hidden;border-top:0}
.vf::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 120px);pointer-events:none}
.vf .vf-in{position:relative;max-width:1180px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(20px,4vw,48px) 0}
.vf .vf-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,3fr);gap:clamp(30px,5vw,64px)}
.vf .vf-logolink{display:inline-block;line-height:0}
.vf .vf-logo{height:30px;width:auto;display:block;margin-bottom:18px}
.vf .vf-merk p{color:#AAB2CC;font-size:.92rem;line-height:1.6;max-width:34ch;margin-bottom:22px}
.vf .vf-scan{display:flex;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:7px;max-width:380px}
.vf .vf-scan input{flex:1;min-width:40px;border:none;background:transparent;outline:none;color:#fff;font:inherit;font-size:.95rem;padding:9px 12px}
.vf .vf-scan input::placeholder{color:#8A94AC}
.vf .vf-scan button{border:none;background:#C2410C;color:#fff;font:inherit;font-weight:700;font-size:.9rem;border-radius:8px;padding:0 18px;cursor:pointer;white-space:nowrap;transition:background .15s}
.vf .vf-scan button:hover{background:#E86A2E}
.vf .vf-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.8rem;color:#AAB2CC}
.vf .vf-trust span{display:flex;align-items:center;gap:7px}
.vf .vf-trust svg{flex:none}
.vf .vf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,36px)}
.vf .vf-col{border:0}
.vf .vf-col>summary{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8A94AC;font-weight:750;margin-bottom:14px;list-style:none;display:flex;align-items:center;justify-content:space-between}
.vf .vf-col>summary::-webkit-details-marker{display:none}
.vf .vf-col .chev{display:none;transition:transform .2s;color:#8A94AC}
.vf .vf-col ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.vf .vf-col a{color:#D7DBEC;font-size:.92rem;text-decoration:none;transition:color .15s,padding .15s;display:inline-block}
.vf .vf-col a:hover{color:#fff;padding-left:3px}
.vf .vf-assur{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(34px,5vw,54px);padding:18px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);font-size:.84rem;color:#AAB2CC}
.vf .vf-assur b{color:#fff;font-weight:650}
.vf .vf-assur span{display:flex;align-items:center;gap:8px}
.vf .vf-assur svg{flex:none}
.vf .vf-bot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0 26px;font-size:.82rem;color:#8A94AC}
.vf .vf-legal{display:flex;gap:8px 18px;flex-wrap:wrap}
.vf .vf-legal-a{color:#AAB2CC;text-decoration:none}
.vf .vf-legal-a:hover{color:#fff;text-decoration:underline}
.vf .vf-legal-a.priv{color:#FFB48A}
@media(max-width:1000px){.vf .vf-top{grid-template-columns:1fr;gap:38px}.vf .vf-cols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:600px){
  .vf .vf-cols{grid-template-columns:1fr;gap:0}
  .vf .vf-col{border-bottom:1px solid rgba(255,255,255,.12)}
  .vf .vf-col>summary{cursor:pointer;padding:16px 0;margin-bottom:0}
  .vf .vf-col .chev{display:block}
  .vf .vf-col[open] .chev{transform:rotate(180deg)}
  .vf .vf-col ul{padding:0 0 16px}
  .vf .vf-scan{max-width:100%}
  .vf .vf-bot{flex-direction:column;align-items:flex-start;gap:12px}
}
/* ============ /VV-FOOTER-NAVY ============ */

/* mega promo score-ring (Product) */
.mega__promo-score{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.mps-ring{width:46px;height:46px;flex:none;border-radius:50%;background:conic-gradient(#7BD89B 0 84%,rgba(255,255,255,.12) 84% 100%);display:flex;align-items:center;justify-content:center}
.mps-ring i{width:36px;height:36px;border-radius:50%;background:#0B0F3A;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:.92rem;color:#fff}
.mps-tx b{display:block;font-size:.9rem;color:#fff;font-weight:700}
.mps-tx>span{font-size:.76rem;color:#8FA0CF}

@media(max-width:1100px){.hdr__cta{margin-left:0;padding-left:0;border-left:0}}

/*NO-STRIPES*/
.aankondiging::after,.mega::before,.mega__promo::before,.vf::before{background:none}


/*RESP-FIX-2026: mobile-first overflow fixes*/
.skip{left:16px;top:-80px}
@media(max-width:480px){
  .scanveld{flex-wrap:wrap}
  .scanveld>.knop,.scanveld>button,.scanveld>.i-knop{flex:1 1 100%;justify-content:center;text-align:center}
  .vf .vf-scan{flex-wrap:wrap}
  .vf .vf-scan button{flex:1 1 100%}
}
@media(max-width:640px){
  .hdr__in{gap:14px}
  .hdr__cta .knop--primair{padding:10px 14px;font-size:14px}
}
@media(max-width:420px){
  :root{--rand:16px}
  .hdr__in{gap:10px}
  .hdr__cta .knop--primair{padding:9px 12px;font-size:13.5px}
  .logo .logo-svg,.logo .logo-sv{height:25px}
  .logo--img img{height:26px}
}
@media(max-width:344px){
  :root{--rand:12px}
  .hdr__in{gap:7px}
  .hdr__cta .knop--primair{padding:8px 10px;font-size:12.5px}
  .logo .logo-svg,.logo .logo-sv{height:22px}
}
/*END-RESP-FIX-2026*/

/*RESP-FIX-2026b*/
@media(max-width:480px){.acties{flex-wrap:wrap}}
/*END-RESP-FIX-2026b*/

/*RESP-FIX-FOOTER*/
@media(max-width:768px){body{padding-bottom:0}}
/*END-RESP-FIX-FOOTER*/