/* HostPro Academy · webinarfunnel
   Gebouwd naar het Figma-ontwerp (export 25 sep 2026): NL + EN, desktop 1440 en mobiel 390.
   Tokens komen uit DESIGN-TOKENS.md. Koppen Manrope 800, lopende tekst Inter.
   De vorige versie staat in _oud/2026-09-22-framework/. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens ── */
:root{
  --canvas:#F4F1E8; --zand:#E6DECB; --kaart:#FFFFFF; --kaart-2:#FBFAF5;
  --groen:#1F453E; --groen-2:#2C504A; --groen-3:#2F6B5A; --groen-4:#183932; --accent:#1F5A49; --mint:#8ACBA4; --pil:#DDEFE4; --tint:#E6F2EA;
  --ink:#131E19; --ink-2:#34423B; --ink-3:#5E6B64; --licht:#F2F4F1; --wit:#F5F5F5;
  --amber-bg:#F1E6CC; --amber:#8A5A1E; --noot-bg:#FFF3C4; --live:#D8452F;
  --lijn:rgba(19,30,25,.09); --lijn-2:#DBDBD6; --lijn-donker:rgba(242,244,241,.12);
  --r:14px; --r-kaart:22px; --r-pil:999px;
  /* kaartschaduw gemeten onder de Figma-kaarten (leer-, stap-, FAQ- en kopkaart): ±45px diep, ±30px opzij */
  --schaduw:0 15px 30px rgba(19,30,25,.23);
  --schaduw-klein:0 1px 2px rgba(19,30,25,.04),0 18px 40px -24px rgba(19,30,25,.28);
  --schaduw-2:0 2px 4px rgba(19,30,25,.05),0 30px 60px -30px rgba(19,30,25,.35);
  --f-kop:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-tekst:"Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* sectie-afstand: Figma zet de eerste pil ±115px onder de sectierand, en eindigt 111-112px onder het laatste element */
  --sectie:115px; --sectie-onder:112px; --goot:64px;
  --i-pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");
  --i-vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --i-vink-groen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5A49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --i-vink-mint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ACBA4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --i-kruis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5A1E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --i-kalender:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5A49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F453E'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
  --i-ster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F453E'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.7l-6.1 3.4 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E");
  --i-ster-mint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ACBA4'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.7l-6.1 3.4 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5A49' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  --i-links:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131E19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-rechts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131E19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media(max-width:760px){:root{--sectie:57px;--sectie-onder:58px;--goot:20px;--r-kaart:20px}}

/* ── basis ── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--canvas);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-tekst);font-size:18.5px;line-height:1.6;color:var(--ink-2);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pil);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
/* op donkergroene vlakken is de merkgroene ring onzichtbaar: mint */
.op-groen :focus-visible,.vipstrook :focus-visible,.quote :focus-visible,.mobalk:focus-visible,.video:focus-visible{outline-color:var(--mint)}
.mobalk:focus-visible,.video:focus-visible{outline-offset:-6px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--goot)}
.smal{max-width:900px}
section{padding:var(--sectie) 0 var(--sectie-onder)}
.op-zand{background:var(--zand)}
.op-groen{background:var(--groen);color:rgba(242,244,241,.78);
  --ink:#F2F4F1;--ink-2:rgba(242,244,241,.86);--ink-3:rgba(242,244,241,.72);--accent:var(--mint);--lijn:var(--lijn-donker)}
.op-groen h1,.op-groen h2,.op-groen h3{color:var(--ink)}
.midden{text-align:center}
.midden .eyebrow{margin-inline:auto}

/* ── typografie ── */
h1,h2,h3{font-family:var(--f-kop);font-weight:800;color:var(--ink);letter-spacing:-.02em;text-wrap:wrap}
h1{font-size:56px;line-height:1.06}
h2{font-size:63px;line-height:1.05}
h3{font-size:22.4px;line-height:1.3;letter-spacing:0;font-weight:700}
h1 em,h2 em,h3 em,.accent{font-style:normal;color:var(--accent)}
.regel{display:block}
/* ruim: tekst die in Figma 1-2px buiten zijn kader loopt; iets meer ruimte rechts zodat de regels breken zoals in Figma */
@media(min-width:761px){.ruim{margin-right:-6px}}
@media(max-width:760px){.ruim{margin-right:-4px}}
/* eyebrow: blok (flex) i.p.v. inline-flex, anders zet de regelhoogte van de body een strut boven de pil.
   Sectiepil 25px hoog zoals in Figma; de pil in de hero is iets voller (29px). */
.eyebrow{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:4px 13px;border-radius:var(--r-pil);
  background:var(--pil);color:var(--accent);font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase}
.hero .eyebrow{padding:6px 13px}
.op-groen .eyebrow{background:rgba(138,203,164,.16);color:var(--mint)}
.eyebrow+h1{margin-top:22px}
.eyebrow+h2{margin-top:16px}
.intro{font-size:20px;line-height:1.55;color:var(--ink-2)}
.op-groen .intro{color:rgba(242,244,241,.78)}
h1+.intro,h2+.intro{margin-top:22px;max-width:44ch}
.kopje{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.klein{font-size:14.5px;color:var(--ink-3)}
.bron{margin-top:40px;font-size:15.5px;color:var(--ink-3)}
.op-groen .bron{color:rgba(242,244,241,.6)}
.link{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--accent)}

/* sectiekop: kop links, intro of pijlen rechts */
.sectiekop{display:grid;grid-template-columns:minmax(0,1fr) 555px;gap:40px 56px;align-items:end}
.sectiekop .intro{margin:0;max-width:none}
.sectiekop.enkel{grid-template-columns:1fr}
/* kop tot inhoud: 52px (de rail heeft zelf 6px bovenmarge voor de schaduw) */
.sectiekop+*{margin-top:52px}
.sectiekop+.rail{margin-top:46px}
.sectiekop .eyebrow{margin-bottom:0}
.sectiekop.breed h2{max-width:none}

/* ── knoppen ── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 30px;border-radius:var(--r-pil);
  background:var(--groen);color:var(--wit);font-weight:600;font-size:20px;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background-color .18s ease,transform .18s var(--ease),box-shadow .18s ease}
.knop:hover{background:var(--accent);transform:translateY(-1px)}
.knop.pijl::after{content:"";flex:none;width:.85em;height:.85em;background:currentColor;
  -webkit-mask:var(--i-pijl) center/contain no-repeat;mask:var(--i-pijl) center/contain no-repeat;transition:transform .18s var(--ease)}
.knop.pijl:hover::after{transform:translate(2px,-2px)}
.knop.vol{display:flex;width:100%}
.knop.klein{min-height:46px;padding:10px 24px;font-size:17px}
.knop.licht{background:var(--canvas);color:var(--groen)}
.knop.licht:hover{background:#FBFAF5}
/* knop met twee regels: titel en subregel */
.knop.dubbel{flex-direction:column;gap:2px;padding:16px 34px;border-radius:16px;white-space:normal;text-align:center}
.knop.dubbel b{font-size:20.6px;font-weight:600;line-height:1.3}
.knop.dubbel span{font-size:16px;font-weight:400;line-height:1.4;color:rgba(242,244,241,.75)}
.knop.dubbel.licht b{color:var(--groen)}
.knop.dubbel.licht span{color:#5E6B64}
.stil{display:inline-block;font-size:16px;color:var(--ink-3);text-decoration:underline;text-underline-offset:4px}
.stil:hover{color:var(--accent)}

/* ── kopbalk ── */
.kopbalk{background:var(--canvas);border-bottom:1px solid var(--lijn)}
.kopbalk .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
/* met infokaart (registratie): Figma-kop 99px hoog, kaart 64×430 */
.kopbalk:has(.kopinfo) .wrap{height:99px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo img{width:44px;height:44px;border-radius:8px}
.logo span{font-family:var(--f-kop);font-weight:800;font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap}
.logo span i{font-style:normal;font-weight:500;color:var(--ink-2)}
.kopinfo{display:flex;align-items:center;gap:28px;padding:12px 16px;border-radius:14px;background:var(--kaart-2);box-shadow:var(--schaduw)}
.kopinfo b{display:block;font-size:14.3px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.kopinfo>div span{display:block;font-size:14.5px;color:var(--ink-3);line-height:1.4}
.livepil{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-pil);background:var(--pil);color:var(--accent);
  font-weight:700;font-size:13px;line-height:1.2;white-space:nowrap}
.livepil::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live)}
.livepil.licht{background:var(--canvas);color:var(--accent)}
.kopinfo .livepil{font-size:14px;padding:7px 14px}

/* bevestigingsbalk */
.bevestiging{background:var(--pil);color:var(--accent);text-align:center;padding:10px 20px;font-size:16px;font-weight:600;line-height:1.4}
.bevestiging::before{content:"";display:inline-block;width:13px;height:13px;margin:0 6px -1px 0;background:var(--accent);
  -webkit-mask:var(--i-vink) center/contain no-repeat;mask:var(--i-vink) center/contain no-repeat}

/* ── hero ── */
.hero{padding:52px 0 85px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 540px;grid-template-areas:"tekst form" "meer form" "foto foto";grid-template-rows:auto auto auto;gap:0 72px;align-items:start}
.hero-tekst{grid-area:tekst;min-width:0}.hero .formkaart,.hero .hero-kaart{grid-area:form;min-width:0;align-self:center}.hero-meer{grid-area:meer;min-width:0}.hero-foto{grid-area:foto}
.hero-tekst h1{margin-top:22px}
.hero-tekst .intro{margin-top:22px;max-width:510px}
.hero-meer{margin-top:24px}
.hero h1{font-size:56px}
.vink{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:12px}
.vink li{position:relative;padding-left:34px;font-size:19px;font-weight:400;line-height:1.4;color:var(--ink)}
.vink li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--groen) var(--i-vink) center/12px no-repeat}
.vink.mint li::before{background:rgba(138,203,164,.16) var(--i-vink-mint) center/13px no-repeat}
.vink.mint li{color:rgba(242,244,241,.86);font-weight:400}
.hostrij{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding-top:20px;border-top:1px solid var(--lijn)}
.hostrij .wie{display:flex;align-items:center;gap:12px;min-width:0}
.hostrij .score{flex:none}
.hostrij img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.hostrij .wie b{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.hostrij .wie span{display:block;font-size:16px;color:var(--ink-3);line-height:1.35}
.score{text-align:right;font-size:16px;color:var(--ink-3);line-height:1.3;white-space:nowrap}
.score b{color:var(--ink);font-weight:700}
.sterren{display:block;height:13px;margin-bottom:6px;background:var(--i-ster) 0 0/16px 14.7px repeat-x;width:80px;margin-left:auto}
.op-groen .sterren{background-image:var(--i-ster-mint)}
.midden .score{text-align:center}
.midden .sterren{margin:0 auto 6px}

/* fotokaart onder de hero */
.fotokaart{position:relative;height:500px;border-radius:var(--r-kaart);overflow:hidden;margin-top:49px;box-shadow:var(--schaduw)}
.fotokaart img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.fotokaart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.fotokaart p{position:absolute;left:30px;bottom:26px;z-index:1;max-width:420px;font-family:var(--f-kop);font-weight:700;font-size:26px;line-height:1.25;color:#fff;text-wrap:wrap}
.fotokaart .livepil{position:absolute;right:30px;bottom:26px;z-index:1;font-size:14px;padding:8px 14px}

/* ── formulierkaart ── */
/* formulier- en VIP-kaart: zware, diepe schaduw (onder de kaart nog zichtbaar op 56px), onderaan iets minder ruimte */
.kaart{background:var(--kaart);border-radius:var(--r-kaart);padding:28px 28px 22px;box-shadow:0 24px 60px rgba(19,30,25,.38)}
.formkaart h3{font-size:26px}
.datumregel{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:16px;font-weight:600;color:var(--accent)}
.datumregel::before{content:"";width:18px;height:18px;background:var(--i-kalender) center/contain no-repeat}
form .rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;margin:13px 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input[type=email],input[type=tel]{width:100%;font:inherit;font-size:18px;height:52px;padding:0 16px;border:1px solid var(--lijn-2);
  border-radius:12px;background:var(--kaart-2);color:var(--ink);transition:border-color .16s,box-shadow .16s}
input::placeholder{color:#9AA39E}
input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,90,73,.35)}
.formkaart .knop{margin-top:21px}
/* p.klein: .video.klein in de VIP-kaart mag niet meedoen */
.formkaart p.klein{margin-top:9px;text-align:center;line-height:1.4}
/* toestemmingen (AVG): apart voor e-mail en WhatsApp, standaard uit */
/* 2px boven/onder op het label: klikvlak minstens 24px hoog, ook bij een regel; gap en marge daarop gecorrigeerd */
.toestemming{display:flex;flex-direction:column;gap:4px;margin:14px 0 -2px}
.vinkje{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--ink-2);cursor:pointer;padding:2px 0}
.vinkje span{text-wrap:pretty}
.vinkje input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--groen);cursor:pointer}
.formkaart p.privacyregel{margin-top:4px;font-size:13px;text-wrap:balance}
.privacyregel a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.formfout{margin-top:10px;padding:9px 12px;border-radius:12px;text-wrap:balance;background:#FBE9E5;color:#9A2E1C;font-size:14px;line-height:1.45;text-align:center}
.formkaart .knop:disabled{opacity:.6;cursor:progress;transform:none}

/* ── aftelband ── */
.aftel{padding:64px 0}
.aftel .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.aftel h2{font-size:43px;line-height:1.1}
.aftel .eyebrow+h2{margin-top:15px}
.klok{display:grid;grid-template-columns:repeat(4,100px);border-top:1px solid var(--lijn-donker);border-bottom:1px solid var(--lijn-donker)}
.klok div{padding:22px 0 19px 24px;border-left:1px solid var(--lijn-donker)}
.klok div:first-child{border-left:0;padding-left:0}
.klok b{display:block;font-family:var(--f-kop);font-weight:800;font-size:43px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.klok span{display:block;margin-top:3px;font-size:16px;color:rgba(242,244,241,.7)}

/* ── kaartenrasters ── */
.raster{display:grid;gap:16px}
.raster.vier{grid-template-columns:repeat(4,1fr)}
.raster.drie{grid-template-columns:repeat(3,1fr)}
.raster.twee{grid-template-columns:repeat(2,1fr)}
.blok{background:var(--kaart);border-radius:var(--r-kaart);padding:24px;box-shadow:var(--schaduw);color:var(--ink-2)}
.blok h3{color:var(--ink)}
.blok h3+p{margin-top:10px}
.blok p{font-size:18.5px;line-height:1.6}
.blok:has(>.icoon){padding:26px 24px 34px}
.icoon{width:44px;height:44px;border-radius:12px;background:var(--pil);display:grid;place-items:center;margin-bottom:22px}
.icoon svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:9px;background:var(--pil);color:var(--accent);
  font-weight:700;font-size:14px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:4px 10px;border-radius:var(--r-pil);background:var(--pil);color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.chiprij{display:flex;align-items:center;gap:10px;margin-bottom:18px}

/* stappenkaarten met knop */
.stap{display:flex;flex-direction:column;padding:28px 26px 29px}
/* nummer: rechthoekige pil met Manrope 800, zoals in Figma */
.stap>.chip{align-self:flex-start;height:34px;min-width:38px;padding:0 9px;margin-bottom:20px;font-family:var(--f-kop);font-weight:800;font-size:16px;letter-spacing:0}
.stap p{margin-top:10px}
.stap .knop{margin-top:auto;padding-top:0;padding-bottom:0}
.stap p+.knop{margin-top:20px}
.stap .knop{min-height:45px;font-size:17px}
.stap .sub{margin-top:11px;text-align:center;color:var(--ink-2)}
.stap .sub a{text-decoration:none}
.stap .sub a:hover{text-decoration:underline;text-underline-offset:4px}
/* naast elkaar: knoppen op één hoogte, ook als één tekst een regel langer is (Figma: knoppen gelijk).
   De knop zakt naar onderen; kaarten zonder sub-regel krijgen een lege regel van dezelfde hoogte (11px + 1 regel). */
@media(min-width:1024px){
  .raster.drie>.stap:has(>.knop)>p:has(+.knop){margin-bottom:20px}
  .raster.drie>.stap:has(>.knop)>p+.knop{margin-top:auto}
  .raster.drie>.stap:has(>.knop):not(:has(>.sub))::after{content:"";flex:none;height:calc(11px + 18.5px*1.6)}
}

/* ── cijfers ── */
.cijfers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:1px solid var(--lijn-donker);border-bottom:1px solid var(--lijn-donker)}
.cijfers div{padding:19px 24px;border-left:1px solid var(--lijn-donker)}
.cijfers div:first-child{border-left:0;padding-left:0}
.cijfers b{display:block;font-family:var(--f-kop);font-weight:800;font-size:42px;line-height:1.1;color:#fff;letter-spacing:-.02em}
.cijfers span{display:block;margin-top:4px;font-size:16px;color:rgba(242,244,241,.78)}

/* ── rails (horizontaal scrollen) ── */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-right:calc(-1 * var(--goot));padding:6px var(--goot) 40px 0;margin-bottom:-26px}
/* 40px onderrand zodat de kaartschaduw niet hard wordt afgesneden; -26px houdt de afstand tot de bronregel gelijk */
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:none;scroll-snap-align:start}
/* uitbetalingen staan in Figma iets verder uit elkaar (18px) dan reviews en ledenverhalen (16px) */
.rail:has(>.schermkaart){gap:18px}
.rail-nav{display:flex;gap:11px;justify-self:end;margin-bottom:2px}
.rail-nav button{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(19,30,25,.26);display:grid;place-items:center;transition:transform .18s var(--ease)}
.rail-nav button::before{content:"";width:24px;height:24px;background:var(--i-rechts) center/contain no-repeat}
.rail-nav button:first-child::before{background-image:var(--i-links)}
.rail-nav button:hover{transform:translateY(-1px)}
/* uitbetalingen: schermafbeeldingen met label */
.schermkaart{width:243px;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--schaduw)}
.schermkaart img{width:100%;height:372px;object-fit:cover;object-position:top}
.schermkaart span{display:block;padding:18px 10px;text-align:center;font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;color:#5E6B64}
/* reviews: de afbeelding is de kaart */
.reviewkaart{width:288px;height:400px;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--schaduw)}
.reviewkaart img{width:100%;height:auto}

/* ── hosts ── */
.host{padding:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(19,30,25,.1)}
.host img{width:100%;height:487px;object-fit:cover;object-position:50% 20%}
.host div{padding:32px 26px 25px}
.host .rol{display:block;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.host h3{margin-top:5px}
.host p{margin-top:12px}

/* ── ledenverhalen ── */
.quote{width:520px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:32px 24px 26px 31px;
  border-radius:var(--r-kaart);background:var(--groen);color:#fff}
.quote:nth-child(3n+2){background:var(--groen-3)}
.quote:nth-child(3n){background:var(--groen-4)}
.quote p{font-family:var(--f-kop);font-weight:500;font-size:21px;line-height:1.45;letter-spacing:-.01em}
.quote footer{display:flex;align-items:center;gap:12px}
.quote footer::before{content:"";flex:none;width:40px;height:40px;border-radius:10px;background:url(images/logo.png) center/cover no-repeat}
.quote b{display:block;font-size:18.4px;font-weight:700;line-height:1.2}
.quote span{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,244,241,.7);line-height:1.5}

/* ── voor wie wel / niet ── */
.fit{padding:28px 28px 30px}
.fit.ja{background:var(--tint);box-shadow:none}
.fit ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.fit li{position:relative;padding-left:36px;font-size:19px;line-height:30px;color:var(--ink-2)}
.fit li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%}
.fit.ja li::before{background:var(--pil) var(--i-vink-groen) center/16px no-repeat}
.fit.nee li::before{background:var(--amber-bg) var(--i-kruis) center/12px no-repeat}

/* ── veelgestelde vragen ── */
.faq{margin-top:52px;display:flex;flex-direction:column;gap:11px}
.vraag{background:var(--kaart-2);border-radius:var(--r-kaart);box-shadow:var(--schaduw)}
.vraag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;
  font-family:var(--f-kop);font-weight:700;font-size:20.8px;line-height:1.3;color:var(--ink);letter-spacing:0}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--pil) var(--i-plus) center/12px no-repeat;transition:transform .25s var(--ease)}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag summary:hover{color:var(--accent)}
/* 888px breed: het eerste NL-antwoord breekt voor '20:00.' zoals in Figma */
.vraag p{padding:0 24px 22px;max-width:888px;font-size:19px;line-height:1.6;color:var(--ink-2)}
.vraagnoot{font-size:20px;line-height:1.55;color:var(--ink-2);margin-bottom:0}
.vraagnoot a{text-decoration:underline;text-underline-offset:4px}
.vraagnoot a:hover{color:var(--accent)}

/* ── slot-cta ── */
.slot h2{max-width:720px;margin-inline:auto}
.slot .intro{margin:31px auto 0;max-width:none;font-size:20px}
.slot:not(.op-groen) .intro{max-width:590px}
.slot .knop{margin-top:44px}
.slot .score{margin-top:19px;font-size:17px;color:rgba(242,244,241,.7)}
/* krap: slot met minder lucht tussen kop, intro en knop (EN-registratie, bedanktpagina) */
@media(min-width:761px){
  .slot.krap .intro{margin-top:17px}
  .slot.krap .knop{margin-top:31px}
  .slot.krap .score{margin-top:17px}
}
.slot .score b{color:#fff}

/* ── voettekst ── */
.voet{background:var(--canvas);border-top:1px solid var(--lijn);padding:20px 0 27px;font-size:14.3px;color:var(--ink-2)}
.voet .rij{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.voet .rij>span{color:var(--ink-3)}
.voet nav{display:flex;gap:24px;flex-wrap:wrap}
.voet nav a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.voet nav a:hover{color:var(--accent)}
.voet .disclaimer{margin-top:8px;font-size:12.3px;line-height:20px;color:#6B7973}
.voet .disclaimer b{font-weight:600;color:inherit}

/* ── video ── */
.video{position:relative;border-radius:var(--r-kaart);overflow:hidden;background:var(--groen);box-shadow:var(--schaduw-2);display:block;color:#fff;text-decoration:none}
.video .titel{display:block;background:var(--groen);color:var(--wit);text-align:center;font-weight:600;font-size:19px;padding:12.5px 20px;line-height:1.4}
.video .poster{position:relative;aspect-ratio:16/9;background:#2b3a34;overflow:hidden}
/* Figma toont de poster 1,6x ingezoomd vanaf boven-midden, zodat de ingebrande ondertitel wegvalt */
.video .poster img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);transform-origin:50% 0}
/* gemeten verdonkering in Figma: 5% boven, 27% onder */
.video .poster::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28))}
.video .poster::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:rgba(255,255,255,.92) var(--i-play) 56% 50%/34px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.video:hover .poster::after{transform:scale(1.06)}
.video .bijschrift{position:absolute;left:22px;bottom:17px;z-index:1;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.video.klein .poster::after{width:84px;height:84px}
.video.klein{border-radius:16px;box-shadow:none}
.video.klein .bijschrift{left:22px;bottom:18px;font-size:13px}

/* ── VIP-strook op de bedanktpagina ── */
.vipstrook{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:16px;padding:22px 28px 21px;border-radius:var(--r-kaart);
  background:var(--groen);color:rgba(242,244,241,.78)}
.vipstrook h3{color:#fff}
.vipstrook p{margin-top:8px;max-width:580px;font-size:18px;line-height:1.5}
.vipstrook .knop{flex:none}

/* notitie voor het team */
.notitie{position:relative;margin-top:17px;padding:12px 16px;border-radius:12px;background:var(--noot-bg);color:#6B5310;font-size:15px;line-height:1.5}

/* prijsbalk en checkout-placeholder */
.prijsbalk{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding:22px 28px;border-radius:var(--r-kaart);background:#fff;box-shadow:var(--schaduw)}
.prijsbalk span{font-family:var(--f-kop);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.prijsbalk b{font-family:var(--f-kop);font-weight:800;font-size:30px;line-height:1.2;color:var(--accent);letter-spacing:-.02em}
.placeholder{min-height:420px;display:grid;place-content:center;text-align:center;padding:40px;border-radius:var(--r-kaart);background:#fff;
  border:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='22' ry='22' stroke='%23CFCFCA' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") no-repeat;box-shadow:var(--schaduw)}
.placeholder b{display:block;font-family:var(--f-kop);font-weight:700;font-size:20px;color:var(--ink);margin-bottom:6px}
.placeholder span{display:block;font-size:17px;color:var(--ink-3);line-height:1.6}
/* ingevuld via config.js: HubSpot Meetings in de agendakaart, Stripe-knop in de afrekensectie */
.placeholder.met-agenda{display:block;min-height:0!important;padding:0;background:#fff;overflow:hidden}
.placeholder.met-agenda .meetings-iframe-container{min-height:640px}
/* zolang de agenda laadt (of niet laadt): rustig agenda-icoon in het midden, geen lege witte kaart */
.placeholder.met-agenda:not(:has(iframe)){background:#fff var(--i-kalender) center/44px no-repeat}
.placeholder.met-checkout{min-height:0!important;padding:48px 28px;background:#fff;place-content:center}

/* ── het gesprek: wat je meeneemt en de tijdlijn ── */
.plan{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan>div{background:var(--groen-2);border-radius:var(--r-kaart);padding:28px 28px 30px}
.plan h3{color:#fff}
.plan .vink{margin-top:15px;gap:10px}
.plan .vink li{padding-left:36px;font-size:19px;line-height:30px;font-weight:400}
.plan .vink li::before{width:24px;height:24px;top:3px}
.tijdlijn{list-style:none;margin-top:14px}
.tijdlijn li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--lijn-donker);font-size:18.5px;line-height:29px;color:rgba(242,244,241,.78)}
.tijdlijn li>:last-child{margin:0}
.tijdlijn li:first-child{border-top:0;padding-top:5px}
.tijdlijn li>span{font-weight:600;font-size:16px;white-space:nowrap;color:var(--mint);font-variant-numeric:tabular-nums;padding-top:2px}
.tijdlijn li b{color:#fff;font-weight:700}
.knoprij{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}
.knoprij .klein{font-size:15.5px;color:rgba(242,244,241,.6)}

/* brief van Rens: de sectie begint met de foto, niet met een pil, dus de gewone 112px bovenaan */
section:has(>.wrap>.brief){padding-top:var(--sectie-onder)}
.brief{display:grid;grid-template-columns:480px minmax(0,1fr);gap:88px;align-items:center}
.brief img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r-kaart);box-shadow:0 28px 60px rgba(19,30,25,.45)}
.brief p{margin-top:14px;font-size:20.3px;line-height:34px;color:var(--ink-2)}
.brief h2+p{margin-top:20px}
.brief .naam{margin-top:25px;padding-top:20px;border-top:1px solid var(--lijn)}
.brief .naam b{display:block;font-family:var(--f-kop);font-weight:700;font-size:20px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.brief .naam span{display:block;margin-top:0;font-size:17px;line-height:1.4;color:var(--ink-3)}

/* brede kaart: iets tussengekomen */
.tussen{margin-top:16px;padding:22px 26px 21px;background:var(--kaart-2);border-radius:var(--r-kaart);box-shadow:var(--schaduw)}
.tussen h3{font-size:22px}
.tussen p{margin-top:2px;font-size:18px;line-height:1.6;color:var(--ink-2)}

/* ── VIP-productkaarten ── */
.product{background:var(--kaart-2);padding:22px 22px 30px;min-width:0}
.product h3,.product p,.product .chiprij{padding:0 5px}
.mock{position:relative;height:176px;border-radius:var(--r);overflow:hidden;margin-bottom:18px;font-size:12.5px;line-height:1.35}
.mock-chat{background:#E7E1D3}
.mock-chat .kop{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--groen);color:#fff;font-weight:700;font-size:14px}
.mock-chat .kop::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--mint)}
.mock-chat .b{width:max-content;max-width:74%;margin:10px 14px 0;padding:8px 11px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:var(--schaduw-klein);font-size:12.5px;line-height:1.35}
.mock-chat .b.ik{margin-left:auto;background:var(--pil);border-bottom-right-radius:4px}
.mock-chat .b.zij{border-bottom-left-radius:4px}
.mock-boek{background:linear-gradient(180deg,#F0ECE0,#D9CFB8);display:grid;place-items:center}
.mock-boek::before{content:"";position:absolute;width:118px;height:154px;border-radius:8px;background:#fff;transform:rotate(-7deg) translate(-14px,4px);box-shadow:var(--schaduw-klein)}
.mock-boek .boek{position:relative;width:112px;height:150px;padding:14px 12px 12px;border-radius:8px;background:var(--groen);color:#fff;transform:rotate(7deg) translate(14px,0);box-shadow:var(--schaduw-2);display:flex;flex-direction:column}
.mock-boek small{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);line-height:1.3}
.mock-boek b{margin-top:8px;font-family:var(--f-kop);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em}
.mock-boek .boek::after{content:"";margin-top:auto;width:20px;height:20px;background:url(images/logo.png) center/contain no-repeat;opacity:.9}
.mock-replay{background:#2b3a34}
.mock-replay img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);transform-origin:50% 0}
.mock-replay::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28))}
.mock-replay .pil{position:absolute;z-index:2;left:14px;top:12px;padding:5px 10px;border-radius:var(--r-pil);background:#fff;color:var(--ink);font-weight:600;font-size:12px}
.mock-replay::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.92) var(--i-play) 56% 50%/20px no-repeat}
.mock-replay .balk{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.mock-replay .balk::after{content:"";display:block;width:38%;height:100%;border-radius:2px;background:var(--mint)}
.mock-live{background:var(--groen);display:grid;justify-items:center;align-content:center;gap:12px;color:#fff}
.mock-live .koppen{display:flex}
.mock-live .koppen img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--groen)}
.mock-live .koppen img+img{margin-left:-15px}
.mock-live .livepil{background:#fff;font-size:12px;padding:6px 11px}
.mock-live q{display:block;max-width:220px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.12);text-align:center;font-size:12.5px;quotes:"\201C" "\201D"}

/* ── mobiele balk ── */
.mobalk{display:none}

/* ── varianten van de hero ── */
/* zonder kaart rechts (bedankt- en na-boekingpagina's): één kolom, video eronder, geen eigen onderrand */
.hero.enkel,.hero.zonder-kaart{padding-bottom:0}
.hero.enkel .wrap,.hero.zonder-kaart .wrap{grid-template-columns:1fr;grid-template-areas:"tekst" "meer" "foto";grid-template-rows:auto;gap:0}
.hero.enkel .video,.hero.zonder-kaart .video{margin-top:48px;box-shadow:0 0 16px rgba(19,30,25,.075)}
/* kaart rechts zonder foto eronder (VIP-aanbod, booking): tekstblok verticaal gecentreerd naast de kaart */
.hero.centreer,.hero.boek{padding-bottom:88px}
@media(min-width:761px){
  .hero.centreer .wrap{grid-template-areas:". form" "tekst form" "meer form" ". form";grid-template-rows:1fr auto auto 1fr}
  .hero.boek .wrap{grid-template-areas:"tekst form" "meer form";grid-template-rows:auto 1fr}
  .hero.boek .hero-kaart{align-self:center}
}
.hero-kaart .video{margin-top:48px}
/* VIP-kaart: iets strakker dan het registratieformulier; de link onder de knop staat verder weg */
.hero.centreer .hero-kaart{padding:26px 28px 24px}
.hero.centreer .hero-kaart p.klein{margin-top:14px}
/* regeleinde dat alleen op brede schermen geldt */
@media(max-width:760px){br.alleen-groot{display:none}}

/* ── responsive ── */
@media(max-width:1100px){
  h1,.hero h1{font-size:46px}
  h2{font-size:52px}
  .aftel h2{font-size:36px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 440px;gap:0 40px}
  /* tablet: kop boven de intro, anders worden intro en kaarten te smal (geen Figma voor deze breedte) */
  .sectiekop{grid-template-columns:1fr;gap:22px}
  .sectiekop .intro,.sectiekop .vraagnoot{max-width:640px}
  .sectiekop .rail-nav{justify-self:start}
  .raster.vier{grid-template-columns:repeat(2,1fr)}
  .brief{grid-template-columns:360px 1fr;gap:48px}
  .klok{grid-template-columns:repeat(4,88px)}
  .klok b{font-size:36px}
  .plan{grid-template-columns:1fr}
}
/* tablet: stappen en aftelband onder elkaar, anders loopt de derde kaart buiten beeld */
@media(min-width:761px) and (max-width:1023px){
  .raster.drie:has(>.stap){grid-template-columns:1fr}
  .aftel .wrap{grid-template-columns:1fr;gap:28px}
  .aftel .klok{justify-self:start}
}
/* tablet: hero met kaart in één kolom (tekst, kaart, lijst, foto), anders wordt de tekstkolom ±160px smal */
@media(min-width:761px) and (max-width:960px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"tekst" "form" "meer" "foto";grid-template-rows:auto;gap:40px 0}
  .hero.centreer .wrap,.hero.boek .wrap{grid-template-areas:"tekst" "form" "meer";grid-template-rows:auto}
  .hero.enkel .wrap,.hero.zonder-kaart .wrap{grid-template-areas:"tekst" "foto";gap:0}
  .hero .formkaart,.hero .hero-kaart{max-width:560px;align-self:start}
  /* kopbalk: de infokaart past hier niet naast het logo, alleen de livepil blijft */
  .kopbalk:has(.kopinfo) .wrap{height:80px}
  .kopinfo{padding:0;background:none;box-shadow:none;gap:0}
  .kopinfo>div{display:none}
  .hero-tekst .intro,.hero-meer{max-width:600px}
  .hero-meer{margin-top:0}
  .fotokaart{margin-top:0}
  .brief{grid-template-columns:minmax(0,1fr);gap:36px}
  .brief img{width:320px}
}
/* EN-FAQ-noot op één regel, iets boven de onderkant van de kop (zoals de EN-Figma van de booking) */
@media(min-width:1280px){.vraagnoot.een-regel{white-space:nowrap;margin-bottom:16px}}
/* mobiel: gemeten op de Figma-export van 390px breed */
@media(max-width:760px){
  body{font-size:16px}
  h1,.hero h1{font-size:37px;line-height:1.05}
  h2,.slot h2{font-size:34px;line-height:1.06}
  h3{font-size:20px}
  /* sectiepil 24px hoog met 12px/.12em (calib 11.8-12.2px); de hero-pil blijft 11px/.08em */
  .eyebrow{font-size:12px;letter-spacing:.12em;padding:4px 12px}
  .hero .eyebrow{font-size:11px;letter-spacing:.08em;padding:6px 12px}
  .eyebrow+h1{margin-top:22px}
  .eyebrow+h2,.aftel .eyebrow+h2{margin-top:15px}
  h2.strak{letter-spacing:-.023em}
  .intro,.hero-tekst .intro,.vraagnoot,.slot .intro{font-size:18px;line-height:1.55}
  .hero-tekst .intro{margin-top:20px}
  .kopje{font-size:13px}
  .klein{font-size:13.5px}
  .bron{font-size:14px;line-height:1.5}
  label{font-size:12px;letter-spacing:.06em}
  .knop{font-size:18px}
  .knop.klein{font-size:17px}
  .stap .knop{font-size:15.5px}
  .kopbalk .wrap,.kopbalk:has(.kopinfo) .wrap{height:62px}
  .logo img{width:40px;height:40px}
  .logo span{font-size:15px}
  .kopinfo{padding:0;background:none;box-shadow:none;gap:0}
  .kopinfo>div{display:none}
  .kopinfo .livepil{font-size:13px;padding:7px 12px}
  .bevestiging{font-size:14.5px;padding:12px 18px;line-height:18px}
  .bevestiging::before{width:11px;height:11px;margin-right:5px}
  /* hero: pil 28px onder de kop of de balk, 26px tussen tekst, kaart, lijst en foto */
  .hero{padding:28px 0 var(--sectie)}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"tekst" "form" "meer" "foto";grid-template-rows:auto;gap:26px 0}
  .hero.centreer .wrap,.hero.boek .wrap{grid-template-areas:"tekst" "form" "meer"}
  .hero.enkel .wrap,.hero.zonder-kaart .wrap{grid-template-areas:"tekst" "foto";gap:0}
  .hero.enkel .video,.hero.zonder-kaart .video{margin-top:28px}
  .hero.centreer,.hero.boek{padding-bottom:var(--sectie)}
  .hero-kaart .video{margin-top:25px}
  .hero-tekst .intro{max-width:none}
  .hero-meer{margin-top:0}
  .vink li{font-size:17px}
  .kaart{padding:20px 20px 18px}
  .formkaart{padding-left:18px;padding-right:18px}
  form .rij{gap:10px}
  .mock-live q{max-width:250px;padding:7px 16px;font-size:10.7px}
  .mock-live .livepil{font-size:11px}
  .formkaart h3{font-size:23.5px}
  .datumregel{font-size:14.5px}
  .hero.centreer .hero-kaart{padding:20px 18px 17px}
  .hero.centreer .hero-kaart p.klein{margin-top:17px}
  .hero.centreer .hero-kaart .stil{font-size:14.5px;line-height:1.25}
  .hostrij{gap:10px;align-items:flex-start;margin-top:20px;padding-top:15px}
  .hostrij .wie b,.hostrij .wie span{white-space:nowrap}
  .hostrij img{width:36px;height:36px}
  .hostrij .wie b{font-size:14px}
  .hostrij .wie span{font-size:14px}
  .hostrij .score{font-size:14px}
  .fotokaart{height:260px;margin-top:0}
  .fotokaart p{left:20px;bottom:64px;font-size:20px;max-width:none;right:20px}
  .fotokaart .livepil{left:18px;right:auto;bottom:16px;font-size:13px}
  .sectiekop{grid-template-columns:1fr;gap:13px}
  .sectiekop h2{max-width:none}
  .sectiekop .intro{margin:0}
  .sectiekop+*{margin-top:24px}
  .sectiekop+.rail{margin-top:18px}
  .rail-nav{display:none}
  .aftel{padding:40px 0}
  .aftel .wrap{grid-template-columns:1fr;gap:17px}
  .aftel h2{font-size:28px}
  /* klok 80px hoog: cijfers 20px onder de bovenlijn, label 11px eronder */
  .klok{grid-template-columns:repeat(4,1fr);text-align:center}
  .klok div,.klok div:first-child{padding:15px 0 11px;border-left:0}
  .klok b{font-size:28px}
  .klok span{margin-top:0;font-size:15px}
  .raster.vier,.raster.drie,.raster.twee,.plan{grid-template-columns:1fr}
  .raster{gap:18px}
  .raster:has(>.stap),.raster:has(>.product){gap:16px}
  /* kaarttekst op mobiel ±16.7-17px (calib), alleen de leerkaarten gebruiken 16px */
  .blok p{font-size:16.7px;line-height:27px}
  .fit li,.plan .vink li{font-size:17px;line-height:26px}
  .vraag p{font-size:17px;line-height:27.5px}
  .tijdlijn li{font-size:16.7px;line-height:26px}
  /* kaart met icoon: icoon naast de titel, tekst eronder over de volle breedte */
  .raster:has(>.blok>.icoon){gap:12px}
  .blok:has(>.icoon){display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:center;padding:16px 18px 20px}
  .blok:has(>.icoon) .icoon{width:40px;height:40px;margin:0}
  .blok:has(>.icoon) p{grid-column:1/-1;margin-top:12px;font-size:16px;line-height:1.625}
  .cijfers{grid-template-columns:1fr;margin-top:22px}
  .cijfers div,.cijfers div:first-child{padding:13px 0;border-left:0;border-top:1px solid var(--lijn-donker)}
  .cijfers div:first-child{border-top:0}
  .cijfers b{font-size:30px}
  .cijfers span{margin-top:0;font-size:14px;line-height:1.4}
  .rail{gap:18px}
  .rail:has(>.quote){gap:16px}
  .schermkaart{width:240px}
  .schermkaart span{padding:15px 10px}
  .reviewkaart{width:280px;height:390px}
  .host img{height:264px}
  .host div{padding:27px 20px 20px}
  .host .rol{font-size:12px}
  .quote{width:320px;min-height:auto;padding:26px 22px 24px;gap:28px}
  .quote p{font-size:18px;line-height:1.53}
  .quote footer::before{width:32px;height:32px;border-radius:8px}
  .quote b{font-size:17px}
  .quote span{font-size:11px;letter-spacing:.1em}
  .fit{padding:21px 20px}
  .fit ul{gap:11px}
  .fit.ja li::before{background-size:15px}
  .faq{margin-top:23px;gap:10px}
  .vraag summary{padding:18px 16px 17px 18px;font-size:17.6px}
  .vraag p{padding:0 18px 20px}
  .slot .intro{margin-top:16px}
  .slot .knop{margin-top:31px}
  .slot.op-groen .knop{padding-top:13px;padding-bottom:13px}
  .slot .score{font-size:15px}
  .voet{padding:20px 0 25px;font-size:13px}
  .voet .rij{flex-direction:column;align-items:flex-start;gap:9px}
  .voet .rij>span{line-height:17px}
  .voet nav{gap:18px}
  .voet .disclaimer{margin-top:10px;font-size:11.1px;line-height:18px}
  .vipstrook{flex-direction:column;align-items:flex-start;gap:20px;padding:21px 20px 22px}
  .vipstrook p{font-size:16.2px;line-height:24.5px}
  .vipstrook .knop{width:100%}
  .video .titel{font-size:17px;padding:13px 20px}
  .video .poster::after,.video.klein .poster::after{width:64px;height:64px;margin:-32px 0 0 -32px;background-size:34px}
  .video .bijschrift{left:22px;right:20px;bottom:17px;font-size:12.5px;line-height:1.35}
  .video.klein .bijschrift{right:auto;bottom:18px;font-size:11px}
  .brief{grid-template-columns:1fr;gap:22px}
  .brief img{width:220px;aspect-ratio:4/5;object-position:50% 15%}
  .brief p{font-size:18px;line-height:1.7}
  .brief h2+p{margin-top:23px}
  .brief .naam{margin-top:24px;padding-top:21px}
  .brief .naam b{font-size:18px}
  .brief .naam span{margin-top:2px;font-size:15.5px}
  .knoprij{flex-direction:column;align-items:stretch;gap:16px}
  .knoprij .knop{width:100%}
  .knoprij .knop.dubbel{padding:13px 20px}
  .knoprij .klein{font-size:13.5px;text-align:center}
  .plan{gap:18px}
  .plan>div{padding:21px 20px 24px}
  .plan .vink{gap:11px}
  .plan .vink li::before{top:1px}
  .tijdlijn li{grid-template-columns:50px 1fr}
  .tijdlijn li>span{font-size:15px}
  .prijsbalk{padding:22px 28px}
  .prijsbalk span{font-size:18px;letter-spacing:0}
  .prijsbalk b{font-size:26px}
  .placeholder{min-height:320px;padding:28px 20px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23CFCFCA' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") no-repeat}
  .placeholder b{font-size:18px}
  .placeholder span{font-size:15.4px}
  .stap{padding:22px 20px 25px}
  .stap>.chip{height:32px;min-width:36px;font-size:14.5px}
  .stap h3+p{margin-top:9px}
  .stap .sub{margin-top:9px}
  .tussen{padding:20px 26px}
  .tussen h3{font-size:20px}
  .tussen p{margin-top:6px;font-size:16.2px;line-height:25px}
  .product{padding:16px 16px 20px}
  .product h3,.product p,.product .chiprij{padding:0 4px}
  .product .chip{min-width:32px;height:32px}
  .product .chiprij{margin-bottom:19px}
  .product h3+p{margin-top:8px}
  .product p{line-height:1.63}
  .mock{height:190px}
  .mock-chat .b{font-size:10.75px;margin-top:7px}
  .notitie{padding:11px 14px;font-size:13.7px}
  .knop.dubbel{width:100%}
  .knop.dubbel b{font-size:18.7px}
  .knop.dubbel span{font-size:14.3px}
  /* vaste balk onderaan als zwevende kaart, verschijnt zodra het formulier uit beeld is */
  .mobalk{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;border-radius:16px;background:var(--groen);color:#fff;text-align:center;text-decoration:none;
    padding:11px 20px;box-shadow:0 -12px 30px -14px rgba(0,0,0,.35);
    transform:translateY(calc(100% + 48px));transition:transform .28s ease-out}
  .mobalk.toon{transform:none}
  .mobalk b{display:block;font-size:18px;font-weight:700;line-height:1.25}
  .mobalk span{display:block;margin-top:0;font-size:13.3px;line-height:1.3;color:rgba(242,244,241,.72)}
}
@media(max-width:360px){
  .logo span i{display:none}
  .hostrij{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── cookiebanner van HubSpot ─────────────────────────────────────────────
   HubSpot zet de banner standaard bovenaan, over de kop en het formulier heen.
   Hier: een lage kaart onderaan in de huisstijl (tekst links, knoppen rechts), op mobiel
   een blad onderaan het scherm. Alleen uiterlijk en positie; de werking (opt-in per
   categorie) blijft van HubSpot. HubSpot stuurt de banner met CSS-variabelen aan en voegt
   zijn eigen stijl later in, daarom !important. */
#hs-banner-parent{
  --hs-banner-inset:auto 0 24px 0 !important;
  --hs-banner-width:1120px !important;
  --hs-banner-font-family:"Inter","Helvetica Neue",Arial !important;
  --hs-banner-font-size:14px !important;
  --hs-banner-text-color:#34423B !important;
  --hs-banner-color:#FBFAF5 !important;
  --hs-banner-corners:22px !important;
  --hs-banner-padding:22px 26px !important;
  --hs-banner-button-corners:999px !important;
  --hs-banner-accept-color:#1F453E !important;
  --hs-banner-accept-border-color:#1F453E !important;
  --hs-banner-accept-text-color:#F5F5F5 !important;
  --hs-banner-decline-color:transparent !important;
  --hs-banner-decline-border-color:#1F453E !important;
  --hs-banner-decline-text-color:#1F453E !important;
  --hs-banner-settings-text-color:#5E6B64 !important;
}
#hs-banner-parent #hs-eu-cookie-confirmation{max-width:calc(100% - 48px)!important;box-shadow:0 2px 4px rgba(19,30,25,.06),0 24px 60px -18px rgba(19,30,25,.38)!important;border:1px solid rgba(19,30,25,.08)!important}
/* raster: beide alinea's links (de tweede is bij HubSpot een los element), knoppen rechts */
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:36px!important;row-gap:6px!important;align-items:center!important}
#hs-eu-cookie-confirmation #hs-eu-header-container{grid-column:1 / -1}
#hs-eu-cookie-confirmation #hs-eu-policy-wording,#hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer{grid-column:1;min-width:0}
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area{grid-column:2;grid-row:1 / span 3}
#hs-banner-parent #hs-eu-policy-wording p{line-height:1.55!important}
#hs-banner-parent #hs-eu-policy-wording p + p{margin-top:6px!important}
#hs-banner-parent #hs-eu-cookie-disclaimer{font-size:12.5px!important;color:#5E6B64!important}
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area{flex:none!important;align-items:center!important}
#hs-eu-cookie-confirmation #hs-eu-confirmation-button-group{flex-wrap:nowrap!important;align-items:center!important;gap:10px!important}
#hs-banner-parent #hs-eu-confirmation-button,#hs-banner-parent #hs-eu-decline-button{min-width:0!important;height:44px!important;padding:0 22px!important;font-weight:600!important;font-size:14.5px!important;line-height:1.2!important;white-space:nowrap}
#hs-banner-parent #hs-eu-cookie-settings-button{min-width:0!important;height:44px!important;padding:0 10px!important;font-weight:600!important;text-underline-offset:3px;white-space:nowrap}
/* HubSpot geeft de drie knoppen flex:1 (even breed); hier houdt elke knop zijn eigen breedte */
#hs-banner-parent #hs-eu-cookie-settings-button,#hs-banner-parent #hs-eu-confirmation-button,#hs-banner-parent #hs-eu-decline-button{flex:none!important}
#hs-eu-cookie-confirmation #hs-eu-opt-in-buttons{flex:none!important;flex-wrap:nowrap!important;gap:10px!important}
#hs-banner-parent #hs-eu-confirmation-button:hover{background:#1F5A49!important;border-color:#1F5A49!important}
#hs-banner-parent #hs-eu-decline-button:hover{background:rgba(31,69,62,.06)!important}
#hs-banner-parent button:focus-visible{outline:3px solid #1F5A49!important;outline-offset:2px!important}
@media(max-width:900px){
  #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner{grid-template-columns:1fr;row-gap:8px!important}
  #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area{grid-column:1;grid-row:auto;margin-top:8px}
  #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group{flex-wrap:wrap!important}
}
@media(max-width:760px){
  #hs-banner-parent{--hs-banner-inset:auto 0 0 0 !important;--hs-banner-width:100% !important;--hs-banner-corners:20px 20px 0 0 !important;--hs-banner-padding:18px 20px calc(16px + env(safe-area-inset-bottom)) !important;--hs-banner-font-size:13px !important}
  #hs-banner-parent #hs-eu-cookie-confirmation{max-width:100%!important;max-height:70vh!important;border-width:1px 0 0!important}
  #hs-banner-parent #hs-eu-cookie-disclaimer{font-size:12px!important}
  #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;width:100%}
  #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons{display:contents!important}
  #hs-banner-parent #hs-eu-cookie-settings-button{grid-column:1 / -1;order:3;height:36px!important}
  #hs-banner-parent #hs-eu-confirmation-button,#hs-banner-parent #hs-eu-decline-button{width:100%;padding:0 12px!important}
}