/* ==========================================================================
   Invisible Set Point VSL-funnel v2 — MindFrame
   Losse funnel. Geen afhankelijkheid van de CSS of JS van masseus.academy.
   ========================================================================== */

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-var-latin.woff2") format("woff2");
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  --bg:          #0D0D0F;
  --bg-card:     #17171B;
  --orange:      #FF6A3D;
  --orange-warm: #FF8A4C;
  --text:        #F7F3EE;
  --text-2:      #D8D2C8;
  --line:        #2A2A31;
  --nude:        #E9DDD2;
  --ink:         #0D0D0F;

  --grad-cta:    linear-gradient(135deg, var(--orange) 0%, var(--orange-warm) 100%);
  --glow-weak:   rgba(255, 106, 61, 0.12);
  --glow:        rgba(255, 106, 61, 0.15);
  --glow-strong: rgba(255, 106, 61, 0.18);

  --radius-card: 20px;
  --radius-btn:  14px;
  --radius-field: 12px;
  --radius-video: 16px;

  --w-content:   1180px;
  --w-text:      820px;
  --w-video:     1080px;

  --space-section:        clamp(64px, 10vw, 120px);
  --space-section-mobile: 72px;

  --pad-x: 20px;
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(36px, 3.2vw + 22px, 62px);
  --fs-h2:      clamp(28px, 1.9vw + 20px, 44px);
  --fs-sub:     clamp(17px, 0.5vw + 15px, 22px);
  --fs-body:    clamp(17px, 0.3vw + 15px, 18px);
  --fs-cta:     clamp(16px, 0.25vw + 15px, 18px);
  --fs-eyebrow: clamp(12px, 0.2vw + 11px, 14px);
}

@media (min-width:600px){ :root{ --pad-x:32px; } }
@media (min-width:1024px){ :root{ --pad-x:48px; } }

/* ── Basis ─────────────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--font-head);
  color:var(--text);
  margin:0;
  text-wrap:balance;
  letter-spacing:-.02em;
}
h1{ font-size:var(--fs-hero); font-weight:700; line-height:1.1; }
h2{ font-size:var(--fs-h2);   font-weight:600; line-height:1.15; }
h3{ font-size:clamp(19px,.6vw + 17px,22px); font-weight:600; line-height:1.3; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--w-content); margin-inline:auto; padding-inline:var(--pad-x); }
.wrap--text{ max-width:calc(var(--w-text) + var(--pad-x) * 2); }
.wrap--video{ max-width:calc(var(--w-video) + var(--pad-x) * 2); }

.section{ position:relative; padding-block:var(--space-section-mobile); }
@media (min-width:768px){ .section{ padding-block:var(--space-section); } }
.section--tight{ position:relative; padding-block:clamp(40px,6vw,72px); }

.center{ text-align:center; }
.center .section-sub,.center .cta-support{ margin-inline:auto; }

/* Licht: een bron per sectie, sterkte naar belang. */
.glow{ position:relative; isolation:isolate; overflow-x:clip; overflow-y:visible; }
.glow::before{
  content:""; position:absolute; z-index:-1;
  left:50%; translate:-50% 0;
  width:min(1100px,130vw); aspect-ratio:1/1;
  background:radial-gradient(circle at center, var(--glow) 0%, rgba(255,106,61,.05) 38%, transparent 68%);
  pointer-events:none;
}
.glow--top::before{ top:-22%; }
.glow--center::before{ top:50%; translate:-50% -50%; }
.glow--weak::before{ background:radial-gradient(circle at center, var(--glow-weak) 0%, transparent 62%); }
.glow--soft::before{ background:radial-gradient(circle at center, var(--glow-weak) 0%, transparent 62%); }
.glow--strong::before{ background:radial-gradient(circle at center, var(--glow-strong) 0%, rgba(255,106,61,.06) 40%, transparent 70%); }

/* ── Onderdelen van /vsl/scan, /vsl/book en /vsl/thanks ────────────────── */

.wrap--narrow{ max-width:calc(720px + var(--pad-x) * 2); }
.wrap--calendar{ max-width:calc(860px + var(--pad-x) * 2); }

.wordmark{ padding-top:28px; padding-bottom:4px; text-align:center; }
.wordmark a{
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); text-decoration:none;
}
.wordmark a:hover{ color:var(--text); }

.card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(24px,4vw,36px);
}
.confirm-card{ max-width:560px; margin:clamp(36px,5vw,48px) auto 0; text-align:left; }
.confirm-card h2{ font-size:clamp(19px,.6vw + 17px,22px); margin-bottom:12px; }

/* ── Koppen ────────────────────────────────────────────────────────────── */

.section-head{ margin-bottom:clamp(28px,4vw,44px); }

.eyebrow{
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); margin:0 0 16px;
}

.steplabel{
  display:inline-block;
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2);
  border:1px solid var(--line); border-radius:99px;
  padding:7px 16px; margin:0 0 22px;
}

.section-title{ margin:0; }
.section-title + p{ margin-top:16px; }
.section-sub{
  font-size:var(--fs-sub); font-weight:500; color:var(--text-2);
  line-height:1.55; margin:16px 0 0; max-width:60ch;
}
.hero-sub{
  font-size:var(--fs-sub); font-weight:500; line-height:1.55;
  color:var(--text-2); margin:24px auto 0; max-width:56ch;
}
h1 em,h2 em{ font-style:normal; color:var(--orange); }

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.btn-cta{
  display:flex; align-items:center; justify-content:center; text-align:center; gap:.5em;
  width:100%; max-width:440px; min-height:56px; padding:18px 24px;
  background:var(--grad-cta); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-cta); font-weight:700; line-height:1.2;
  text-decoration:none; border:0; border-radius:var(--radius-btn); cursor:pointer;
  box-shadow:0 8px 32px var(--glow);
  transition:filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
@media (min-width:600px){ .btn-cta{ padding:18px 32px; } }
.btn-cta:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,106,61,.28); }
.btn-cta:active{ transform:translateY(0); }

/* ── Leven in de knop ──────────────────────────────────────────────────
   Twee dingen, allebei bewust klein. De gloed eronder ademt in acht tellen,
   en er loopt af en toe een smalle glans overheen. De knop zelf beweegt niet:
   een knop die heen en weer schuift leest goedkoop en maakt de pagina onrustig.

   De glans schuift met transform, dat is het goedkoopste wat je een browser
   kunt vragen. overflow:hidden knipt alleen de glans af, niet de eigen schaduw
   van de knop: die valt buiten het element en blijft dus gewoon staan. */
.btn-cta{
  position:relative; overflow:hidden; isolation:isolate;
  animation:cta-adem 8s ease-in-out infinite;
}
@keyframes cta-adem{
  0%,100%{ box-shadow:0 8px 32px var(--glow); }
  50%    { box-shadow:0 10px 40px rgba(255,106,61,.30); }
}
.btn-cta::after{
  content:""; position:absolute; z-index:-1; top:-20%; bottom:-20%;
  left:0; width:38%; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  transform:translate3d(-160%,0,0) skewX(-16deg);
  animation:cta-glans 8s ease-in-out infinite;
}
@keyframes cta-glans{
  0%, 58%  { transform:translate3d(-160%,0,0) skewX(-16deg); }
  86%,100% { transform:translate3d(420%,0,0) skewX(-16deg); }
}
/* Kijkt iemand er al naar, dan hoeft de glans niet meer te trekken. */
.btn-cta:hover::after{ animation-play-state:paused; }
/* In de vaste balk onderaan blijft alleen de gloed over: een glans die daar
   continu staat te lopen trekt te veel aandacht weg van de pagina. */
.sticky-cta .btn-cta::after{ display:none; }
.btn-cta--wide{ max-width:480px; }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 28px;
  background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  border:1px solid var(--line); border-radius:var(--radius-btn); cursor:pointer;
  text-decoration:none;
  transition:border-color 180ms ease, background 180ms ease;
}
.btn-ghost:hover{ border-color:var(--orange); background:rgba(255,106,61,.06); }

.btn-note{ font-size:14px; line-height:1.5; color:var(--text-2); margin:12px 0 0; text-align:center; }
/* Regel die direct onder een formulier hoort te staan in plaats van los
   eronder te zweven. */
.btn-note--strak{ margin-top:16px; }
.btn-note strong{ color:var(--text); font-weight:600; }
/* Sectie die aansluit op wat erboven staat, met minder lucht ertussen. */
.section--aansluitend{ padding-top:clamp(26px,3.5vw,42px); }

.cta-block{ display:flex; flex-direction:column; align-items:center; margin-top:var(--space-mt,32px); }
.cta-block .btn-cta{ margin-inline:auto; }
.cta-block--spaced{ margin-top:40px; }
.cta-row{ padding-block:clamp(30px,4.5vw,44px); }
.cta-row .cta-block{ margin:0; }
.cta-support{ color:var(--text-2); max-width:60ch; margin:16px auto 0; }

/* ── /vsl : vergrendelde thumbnail ─────────────────────────────────────── */

.landing{ padding-top:clamp(40px,7vw,72px); }
/* Op de bedankpagina stond 164 pixels tussen "ongeveer 90 minuten" en de kop
   eronder: de hero en de volgende sectie zetten allebei hun volle ruimte in.
   Op een telefoon leest dat als het einde van de pagina, terwijl er juist nog
   iets komt. Alleen hier ingekort, de andere pagina's houden hun rust. */
[data-page="ls-bedankt"] .landing{ padding-bottom:clamp(18px,3.5vw,30px); }
[data-page="ls-bedankt"] .landing + .section{ padding-top:clamp(24px,4.5vw,40px); }

/* De kop op de landingspagina staat sinds de vereenvoudiging alleen: geen
   subtitel eronder en geen secties meer onder de knop. Hij mag daarom een
   slag kleiner dan de gedeelde heromaat. Dat scheelt op een telefoon een
   regel of twee, waardoor de video en de knop hoger in beeld komen. De
   variabele zelf blijft ongemoeid, want die geldt ook elders in de funnel. */
.landing h1{
  font-size:clamp(29px, 2.6vw + 19px, 52px);
  /* Ruimer dan de 1.1 die de rest van de funnel gebruikt. Daar staan koppen
     van een of twee regels; deze loopt over vier en dan plakken de regels
     aan elkaar. Meer lucht leest rustiger, wat past bij een pagina die
     verder helemaal leeg is. */
  line-height:1.24;
  /* Breder dan de 16ch waar hij eerst op stond. Smal gecentreerd leest als
     een gedicht; met meer tekens per regel valt hij minder als blok in het
     midden en meer als een zin. Drie regels in plaats van vier. */
  max-width:21ch;
  margin-inline:auto;
}

.lockthumb{
  position:relative; display:block;
  width:100%; max-width:860px; margin:clamp(32px,5vw,44px) auto 0;
  padding:0; border:1px solid var(--line); border-radius:var(--radius-video);
  background:var(--bg-card); overflow:hidden; cursor:pointer;
  aspect-ratio:16/9;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  transition:border-color 200ms ease, transform 200ms ease;
}
.lockthumb:hover{ border-color:rgba(255,106,61,.4); transform:translateY(-2px); }

.lockthumb__media{ position:absolute; inset:0; }
.lockthumb__loop{ width:100%; height:100%; object-fit:cover; }

.lockthumb__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,15,.18) 0%, rgba(13,13,15,.28) 55%, rgba(13,13,15,.78) 100%);
}

.lockthumb__lock{
  position:absolute; top:14px; left:14px;
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; color:var(--text);
  background:rgba(13,13,15,.62); border:1px solid rgba(255,255,255,.2);
}
.lockthumb__lock svg{ width:19px; height:19px; }

.lockthumb__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center;
  width:clamp(62px,9vw,84px); aspect-ratio:1;
  border-radius:50%; background:var(--grad-cta); color:var(--ink);
  box-shadow:0 10px 40px rgba(255,106,61,.4);
  transition:scale 200ms ease;
}
.lockthumb:hover .lockthumb__play{ scale:1.05; }
.lockthumb__play svg{ width:42%; height:42%; margin-left:6%; }

.lockthumb__pill{
  position:absolute; right:14px; bottom:14px;
  font-size:13px; font-weight:600; color:var(--text);
  background:rgba(13,13,15,.66); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; padding:7px 14px;
}

/* ── /vsl : social proof ───────────────────────────────────────────────── */

.proofcards{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:820px){ .proofcards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }

.proofcard{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:24px;
}
.proofcard__result{
  font-family:var(--font-head); font-size:19px; font-weight:600;
  line-height:1.3; color:var(--text); margin:0 0 14px; text-wrap:balance;
}
.proofcard__name{ font-size:15px; font-weight:600; color:var(--text-2); margin:0; }

/* ── Modal ─────────────────────────────────────────────────────────────── */

/* Let op: het paneel schuift, niet de laag.

   Op 23 september is geprobeerd de laag zelf de schuiver te maken, met de
   body op position:fixed erbij. In Chrome met een iPhone-scherm klopte alles,
   maar op een echte iPhone viel het paneel uit elkaar: te smal, afgeknipt en
   zonder verduistering erachter. Niet opnieuw proberen zonder een echt
   toestel om het op na te kijken. */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; }
.modal[hidden]{ display:none; }
.modal__overlay{ position:absolute; inset:0; background:rgba(5,5,6,.78); }

.modal__panel{
  position:relative; width:100%; max-width:520px;
  max-height:calc(100dvh - 32px); overflow-y:auto;
  /* Houdt het slepen binnen het paneel, zodat de pagina erachter niet
     meebeweegt zodra je de onderkant raakt. Losse toevoeging, verandert
     niets aan de plaatsing. */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(22px,4vw,32px);
  animation:modal-in 150ms ease-out;
}
.modal__panel:focus{ outline:none; }
@keyframes modal-in{ from{ opacity:0 } to{ opacity:1 } }

.modal__close{
  position:absolute; top:12px; right:12px;
  display:grid; place-items:center; width:38px; height:38px;
  background:transparent; color:var(--text-2);
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
}
.modal__close:hover{ color:var(--text); border-color:var(--orange); }
.modal__close svg{ width:18px; height:18px; }

.modal__title{ font-size:clamp(22px,1vw + 20px,26px); margin:0 40px 8px 0; }
.modal__sub{ color:var(--text-2); margin:0 0 22px; }
/* De datum springt eruit. Dit is het eerste moment waarop iemand hem ziet,
   want op de knop staat hij bewust niet. */
.modal__sub strong{ color:var(--orange); font-weight:600; }

body.modal-open{ overflow:hidden; }

/* ── Embeds ────────────────────────────────────────────────────────────── */

.embed{ position:relative; width:100%; margin-inline:auto; border-radius:var(--radius-card); }
.embed--form{ min-height:312px; }
.embed--survey{ max-width:720px; }
.embed--calendar{ max-width:860px; }

/* De gereserveerde hoogte is gemeten aan de echte formulieren van GHL, per
   schermbreedte. Zit die er ver naast, dan springt de halve pagina op het
   moment dat GHL de iframe op maat zet. Een paar pixels ernaast merkt niemand. */
.embed--survey[data-embed="survey"]{ min-height:670px; }
.embed--survey[data-embed="prep"]{ min-height:456px; }
.embed--calendar{ min-height:708px; }
@media (min-width:430px){ .embed--survey[data-embed="survey"]{ min-height:640px; } }
@media (min-width:768px){
  .embed--survey[data-embed="survey"]{ min-height:624px; }
  .embed--survey[data-embed="prep"]{ min-height:440px; }
  .embed--calendar{ min-height:726px; }
}
@media (min-width:1024px){ .embed--calendar{ min-height:892px; } }

/* Gereserveerde hoogte loslaten zodra de iframe geladen is. */
.embed--gemeten{ min-height:0; }
.embed iframe{ display:block; width:100%; border:0; }

[data-embed-status]{ }
.embed__placeholder,[data-embed-status]{
  /* Absoluut, zodat het laadvlak achter de iframe ligt in plaats van ernaast.
     Stonden ze naast elkaar, dan werd de houder tijdens het laden even zo hoog
     als allebei samen en sprong de pagina eronder twee keer.
     pointer-events uit: het is alleen een tekstje, en blijft hij onverhoopt
     staan dan mag hij nooit klikken opvangen die voor iets anders bedoeld zijn. */
  position:absolute; inset:0; pointer-events:none; z-index:2;
  /* Bovenin en niet in het midden: het gereserveerde kader is bijna 900 pixels
     hoog, dus een gecentreerd bericht valt op een laptop onder de vouw. Juist
     dan zie je alleen een leeg vlak, precies wat dit moest oplossen. */
  display:flex; align-items:flex-start; justify-content:center; text-align:center;
  padding:clamp(48px, 13vh, 130px) 24px 24px;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); border:1px dashed rgba(255,106,61,.34); border-radius:inherit;
  /* Dekkend, zodat het vlak ook over een iframe heen valt die al inhoud heeft.
     Dat is nodig zodra het formulier binnenin doorschakelt naar de agenda:
     dan staat er een leeg wit kader dat anders over dit bericht heen zou
     liggen. */
  background:var(--bg);
  transition:opacity 220ms ease, visibility 220ms ease;
}

/* Weg als het klaar is, maar niet uit de pagina gehaald: hetzelfde vlak komt
   terug zodra GHL binnen de iframe naar een volgende stap gaat. */
.embed--klaar > [data-embed-status]{ opacity:0; visibility:hidden; }

/* Drie puntjes die na elkaar oplichten. Zonder die beweging lijkt een
   wachtbericht net zo stil als een leeg vlak. */
.laadregel{ display:inline-flex; align-items:center; }
.laadpunten{ display:inline-flex; gap:4px; margin-left:8px; }
.laadpunten i{
  width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:laadpunt 1.2s ease-in-out infinite;
}
.laadpunten i:nth-child(2){ animation-delay:.16s; }
.laadpunten i:nth-child(3){ animation-delay:.32s; }
@keyframes laadpunt{
  0%,80%,100%{ opacity:.25; transform:translateY(0); }
  40%        { opacity:1;   transform:translateY(-3px); }
}
/* Rustig pulseren, zodat zichtbaar is dat er iets gebeurt in plaats van dat
   er iets stuk is. */
@keyframes laadvlak{
  0%,100%{ opacity:.55; }
  50%    { opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .embed__placeholder,[data-embed-status]{ animation:none !important; }
  .laadpunten i{ animation:none !important; opacity:1 !important; }
}

.embed--video{
  aspect-ratio:16/9; border-radius:var(--radius-video);
  border:1px solid var(--line); background:var(--bg); overflow:hidden;
}
.embed--video iframe{ height:100%; }
.embed--vsl{ max-width:var(--w-video); box-shadow:0 24px 80px rgba(0,0,0,.5); }
/* Kader voor een Tella-video die vanzelf inlaadt. Vaste verhouding, zodat er
   niets verspringt terwijl de speler binnenkomt. */
.tellaslot{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-video); border:1px solid var(--line);
  background:var(--bg-card);
}
.tellaslot iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

.embed__poster{ position:absolute; inset:0; }
.embed__poster img{ width:100%; height:100%; object-fit:cover; }

/* Bewegende voorvertoning met een afspeelknop erover. De speler van Tella
   komt pas na een tik; daarom moet hier zichtbaar zijn dat er iets te tikken
   valt. Scheelt ook dat we die hele speler niet laden voor iemand die de
   video toch niet start. */
.embed__loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.embed--video[data-tella-op-klik]{ cursor:pointer; }
.embed__play{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.22); border:0; cursor:pointer; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.embed__play::before{
  content:""; position:absolute; width:72px; height:72px; border-radius:50%;
  background:var(--grad-cta); box-shadow:var(--glow); transition:transform .18s ease;
}
.embed__play svg{ position:relative; width:26px; height:26px; margin-left:4px; }
.embed__play:hover::before{ transform:scale(1.06); }
.embed__play:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .embed__play::before{ transition:none; }
  .embed__play:hover::before{ transform:none; }
}

/* ── Kaartrasters ──────────────────────────────────────────────────────── */

.grid3,.grid4{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:680px){ .grid3,.grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (min-width:1024px){
  .grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.minicard{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:24px;
  transition:border-color 180ms ease;
}
.minicard:hover{ border-color:rgba(255,106,61,.3); }
.minicard__title{ font-size:18px; margin:0 0 10px; }
.minicard p{ font-size:16px; margin:0; }
.minicard--icon .minicard__title{ margin-top:16px; }

.cardicon{
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; color:var(--orange);
  background:rgba(255,106,61,.1); border:1px solid rgba(255,106,61,.2);
  flex:0 0 auto;
}
.cardicon svg{ width:22px; height:22px; }

/* ── Waarom verandering niet blijft ────────────────────────────────────── */

.split{ display:grid; gap:clamp(32px,5vw,48px); }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:64px; align-items:start; }
  .split__tekst{ position:sticky; top:48px; }
}

.split__kaarten{ display:flex; flex-direction:column; gap:14px; }

.oldcard{
  display:flex; gap:16px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:20px;
  transition:border-color 180ms ease;
}
.oldcard:hover{ border-color:rgba(255,106,61,.3); }
.oldcard__title{ font-size:17px; margin:0 0 8px; }
.oldcard__body p{ font-size:15.5px; margin:0 0 6px; }
.oldcard__body p:last-child{ margin-bottom:0; }
.oldcard__label{
  display:inline-block; margin-top:10px !important;
  font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--orange); background:rgba(255,106,61,.1);
  border-radius:99px; padding:5px 12px;
}
.oldcard__slot{ margin-top:10px !important; font-size:14.5px; color:var(--text-2); font-style:italic; }

/* ── One Belief ────────────────────────────────────────────────────────── */

.belief{ text-align:center; }
.belief__inner{ max-width:820px; margin-inline:auto; }
.belief__aanloop{ font-size:var(--fs-sub); color:var(--text-2); margin:0 0 28px; }
.belief__regel{
  font-family:var(--font-head); font-size:var(--fs-h2); font-weight:600;
  line-height:1.2; letter-spacing:-.02em; color:var(--text);
  text-wrap:balance; margin:0;
}
.belief__regel + .belief__regel{ margin-top:.55em; }
.belief em{ font-style:normal; color:var(--orange); }
.belief__naam{ margin-top:36px; font-size:var(--fs-sub); color:var(--text-2); }

/* ── Stappen ───────────────────────────────────────────────────────────── */

.steps-v2{ display:flex; flex-direction:column; gap:20px; }

.stepcard{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(24px,4vw,36px);
}
.stepcard__label{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin:0 0 12px;
}
.stepcard__title{ font-size:clamp(21px,1vw + 18px,26px); margin:0 0 14px; }
.stepcard__kop{ font-size:var(--fs-sub); font-weight:600; color:var(--text); margin:0 0 14px; }
.stepcard__kern{ font-weight:600; color:var(--text); }
.stepcard__slot{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:15.5px; color:var(--text-2);
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 18px; padding:0; }
.chips li{
  font-size:13.5px; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:99px; padding:6px 13px;
}

.uitgelicht{
  border-left:2px solid var(--orange); padding:4px 0 4px 18px;
  margin:18px 0; color:var(--text);
}
.uitgelicht p{ margin:0 0 6px; }
.uitgelicht p:last-child{ margin:0; }
.uitgelicht--groot p{
  font-family:var(--font-head); font-size:clamp(18px,.8vw + 16px,22px);
  font-weight:600; line-height:1.3;
}

.cyclus{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  list-style:none; margin:0 0 18px; padding:0;
  counter-reset:c;
}
.cyclus li{
  position:relative; font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  border:1px solid var(--line); border-radius:99px; padding:8px 15px;
}
.cyclus li:not(:last-child)::after{
  content:"→"; margin-left:10px; color:var(--orange);
  position:absolute; right:-22px; top:50%; translate:0 -50%;
}
.cyclus li:not(:last-child){ margin-right:12px; }
.cyclus-tekst{ color:var(--text-2); }

/* ── Trust en fotoslots ────────────────────────────────────────────────── */

.trust{ text-align:center; }
.trust__line{
  font-size:var(--fs-sub); font-weight:500; color:var(--text);
  max-width:52ch; margin:0 auto 28px;
}
.trust__beelden{ display:grid; gap:16px; grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
@media (min-width:680px){ .trust__beelden{ grid-template-columns:1fr 1fr; } }

.fotoslot{
  display:grid; place-items:center;
  border:1px dashed var(--line); border-radius:var(--radius-card);
  background:rgba(255,255,255,.02); color:var(--text-2);
  font-size:13px; letter-spacing:.06em; text-align:center; padding:16px;
}
.fotoslot--breed{ width:100%; }
.fotoslot--klein{ margin-top:14px; }

/* ── Loopvideo ─────────────────────────────────────────────────────────── */

.loopslot{ border-radius:var(--radius-video); overflow:hidden; }
.loopslot video{ width:100%; display:block; }

/* ── Reviews ───────────────────────────────────────────────────────────── */

.reviews{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:768px){ .reviews{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media (min-width:768px){
  .reviews--solo{ grid-template-columns:minmax(0,1fr); max-width:calc(50% - 12px); margin-inline:auto; }
}

.review{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:20px;
  transition:border-color 180ms ease;
}
@media (min-width:768px){ .review{ padding:24px; } }
.review:hover{ border-color:rgba(255,106,61,.35); }

.review__title{
  font-family:var(--font-head); font-size:clamp(20px,.9vw + 17px,25px);
  font-weight:600; line-height:1.22; letter-spacing:-.015em;
  color:var(--text); margin:0 0 14px; text-wrap:balance;
}
.review__sub{ font-size:15px; line-height:1.45; color:var(--orange); margin:-6px 0 14px; }

/* De knop en de iframe delen exact dezelfde doos. Daardoor blijft het beeld
   even groot en op dezelfde plek staan zodra de video start. */
.review__frame{
  position:relative; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; background:var(--bg);
}
.review__video{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; padding:0; margin:0;
  border:0; background:transparent; cursor:pointer;
}
.review__video picture,.review__video img{ display:block; width:100%; height:100%; object-fit:cover; }
.review__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.review__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center; width:56px; aspect-ratio:1;
  border-radius:50%; background:var(--grad-cta); color:var(--ink);
  box-shadow:0 6px 24px var(--glow);
  transition:scale 180ms ease;
}
.review__video:hover .review__play{ scale:1.04; }
.review__play svg{ width:44%; height:44%; margin-left:6%; }

.review__name{ margin:16px 0 0; font-size:15px; font-weight:600; color:var(--text); }
.review__name .role{ font-weight:400; color:var(--text-2); }
.review__name .role::before{ content:"|"; margin:0 8px; color:var(--line); }

.review--wide{ padding:clamp(14px,2vw,20px); }
.review--wide .review__frame{ border-radius:12px; }

/* Let op: deze .meer bestond al en hoort bij de reviewrij. De inklapbare
   lijst met extra ervaringen heet daarom .meerrv, niet .meer. */
.meer{ display:flex; justify-content:center; margin-top:28px; }

/* ── Wel of niet voor jou ──────────────────────────────────────────────── */

.fit{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:820px){ .fit{ grid-template-columns:1fr 1fr; gap:22px; } }

.fit__kaart{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(22px,3vw,30px);
}
.fit__kaart--wel{ border-color:rgba(255,106,61,.32); }
.fit__kop{
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 18px; color:var(--text-2);
}
.fit__kaart--wel .fit__kop{ color:var(--orange); }
.fit__kaart ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fit__kaart li{
  position:relative; padding-left:22px; font-size:16px; line-height:1.5;
}
.fit__kaart li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:2px; background:var(--line);
}
.fit__kaart--wel li::before{ background:var(--orange); }
.fit__slot{
  margin-top:26px; text-align:center; color:var(--text-2);
  max-width:60ch; margin-inline:auto;
}

/* ── Bas en Anna ───────────────────────────────────────────────────────── */

.founders{ display:grid; gap:clamp(28px,4vw,48px); }
@media (min-width:900px){
  .founders{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:56px; align-items:start; }
}
.founders__slot{ margin-top:22px; font-size:var(--fs-sub); font-weight:600; color:var(--text); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq{ display:flex; flex-direction:column; gap:10px; }

.faq__item{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-family:var(--font-head); font-size:17px; font-weight:600;
  line-height:1.35; color:var(--text);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--orange); }
/* De geopende vraag blijft oranje, zodat je ziet welk antwoord je leest. */
.faq__item[open] summary{ color:var(--orange); }
.faq__item[open] .faq__chev{ color:var(--orange); }

.faq__chev{ flex:0 0 auto; color:var(--text-2); transition:transform 200ms ease; }
.faq__chev svg{ width:20px; height:20px; display:block; }
.faq__item[open] .faq__chev{ transform:rotate(180deg); }

.faq__body{ padding:0 20px 20px; max-width:720px; }
.faq__body p{ margin:0 0 10px; font-size:16px; line-height:1.6; color:var(--text-2); }
.faq__body p:last-child{ margin:0; }
.faq__body strong{ color:var(--text); font-weight:600; }
.faq__body ul{
  margin:0 0 10px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:7px;
}
.faq__body ul:last-child{ margin:0; }
.faq__body li{
  position:relative; padding-left:20px;
  font-size:16px; line-height:1.55; color:var(--text-2);
}
/* Eigen opsommingsteken, zodat het bij de accentkleur past. */
.faq__body li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--orange);
}

/* Rustige hover: iets warmere rand, geen felle gloed. */
.faq__item{ transition:border-color 180ms ease, box-shadow 180ms ease; }
@media (hover:hover){
  .faq__item:hover{
    border-color:rgba(255,106,61,.32);
    box-shadow:0 0 0 1px rgba(255,106,61,.06);
  }
}
.faq__item summary:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }

/* Het antwoord schuift open in plaats van er ineens te staan. In browsers die
   interpolate-size kennen animeert de echte hoogte; de rest krijgt gewoon een
   nette vervaging. */
@supports (interpolate-size: allow-keywords){
  .faq__item{ interpolate-size:allow-keywords; }
  .faq__item::details-content{
    block-size:0; overflow:hidden;
    transition:block-size 320ms cubic-bezier(.22,.61,.36,1), content-visibility 320ms allow-discrete;
  }
  .faq__item[open]::details-content{ block-size:auto; }
}
@supports not (interpolate-size: allow-keywords){
  .faq__item[open] .faq__body{ animation:faq-in 260ms cubic-bezier(.22,.61,.36,1) both; }
  @keyframes faq-in{
    from{ opacity:0; transform:translateY(-6px); }
    to  { opacity:1; transform:none; }
  }
}
@media (prefers-reduced-motion:reduce){
  .faq__item::details-content{ transition:none !important; }
  .faq__item[open] .faq__body{ animation:none !important; }
}

/* Op mobiel mag de vraag wat groter, dat scant sneller. */
@media (max-width:520px){
  .faq__item summary{ font-size:16.5px; padding:16px 16px; gap:12px; }
  .faq__body{ padding:0 16px 18px; }
}

/* ── Slot ──────────────────────────────────────────────────────────────── */

/* Zonder eigen marge plakt de tekst tegen de kop aan; h2 heeft er van
   zichzelf geen. */
.final h2{ font-size:var(--fs-hero); font-weight:700; line-height:1.1;
  margin-bottom:20px; }
.final p{ font-size:var(--fs-sub); color:var(--text-2); }
.mb-32{ margin-bottom:32px; }

/* ── Sticky CTA ────────────────────────────────────────────────────────── */

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(13,13,15,.94);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
  opacity:0; transition:opacity 200ms ease;
}
.sticky-cta[hidden]{ display:none; }
.sticky-cta.is-zichtbaar{ opacity:1; }
.sticky-cta__tekst{ margin:0; font-size:14px; font-weight:600; color:var(--text); flex:1 1 auto; }
.sticky-cta .btn-cta{ width:auto; max-width:none; min-height:48px; padding:12px 18px; font-size:15px; flex:0 0 auto; }
@media (min-width:768px){ .sticky-cta{ display:none !important; } }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer{
  border-top:1px solid var(--line);
  margin-top:clamp(56px,8vw,96px); padding-block:32px;
  text-align:center; font-size:14px; color:var(--text-2);
}
.site-footer ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px;
}
/* Padding erbij zodat de voetnootlinks op mobiel groot genoeg zijn om aan
   te tikken; visueel verandert er niets. */
.site-footer a{ color:var(--text-2); text-decoration:none;
  display:inline-block; padding:8px 4px; margin:-8px -4px; }
.site-footer a:hover{ color:var(--text); text-decoration:underline; }
.site-footer .sep{ color:var(--line); }
@media (max-width:599px){ .site-footer .sep{ display:none; } }

/* ── Cookiemelding (staat uit via COOKIEMELDING_AAN in vsl.js) ─────────── */

.cookiebar{
  position:fixed; z-index:70; left:12px; right:12px; bottom:12px;
  max-width:440px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:12px 14px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.cookiebar__tekst{ flex:1 1 220px; margin:0; font-size:13px; line-height:1.45; color:var(--text-2); }
.cookiebar__knoppen{ display:flex; gap:8px; margin-left:auto; }
.cookiebar__knop{
  font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1;
  padding:9px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text);
}
.cookiebar__knop--ja{ background:var(--grad-cta); border-color:transparent; color:var(--ink); }

/* ── Beweging ──────────────────────────────────────────────────────────── */
/* Bewust geen scroll-reveals. Beweging alleen op hover en in de loopvideo. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn-cta:hover,.lockthumb:hover{ transform:none; }
  .btn-cta{ animation:none !important; box-shadow:0 8px 32px var(--glow) !important; }
  .btn-cta::after{ display:none !important; }
  .lockthumb:hover .lockthumb__play,.review__video:hover .review__play{ scale:1; }
}

/* ==========================================================================
   GHL form overrides
   --------------------------------------------------------------------------
   Deze pagina kan de inhoud van een GHL-iframe niet stylen. Onderstaande
   waarden zijn bedoeld om over te nemen in de GHL-formbuilder.

   Veld:      achtergrond #17171B, border 1px #2A2A31, radius 12px,
              hoogte minimaal 52px, padding 14px 16px,
              tekst #F7F3EE 16px Manrope 400, placeholder #D8D2C8
   Label:     boven het veld, #D8D2C8, 14px, Manrope 500, marge 8px
   Focus:     border #FF6A3D, box-shadow 0 0 0 3px rgba(255,106,61,.18)
   Knop:      gradient 135deg #FF6A3D -> #FF8A4C, tekst #0D0D0F,
              Manrope 700 17px, radius 14px, hoogte 56px, volle breedte
   Knoptekst: ONTGRENDEL DE VIDEO ->
   ========================================================================== */


/* ── v2.1: ritme rond de video, trustvideo, foto's en beweging ─────────── */

/* De video staat dichter op de subtitel en de CTA staat er direct onder. */
/* De toegangsbalk erboven zorgt al voor de scheiding, dus de hero hoeft niet
   nog eens de volle sectieruimte te pakken. Zo komt de speler hoger in beeld. */
.watch-hero--strak{ padding-top:clamp(34px,4.5vw,58px); padding-bottom:clamp(20px,3vw,28px); }
.section--video{ position:relative; padding-block:0 clamp(18px,2.5vw,24px); }
.section--nacta{ position:relative; padding-block:0 clamp(44px,6vw,64px); }
.section--nacta .cta-block{ margin-top:0; }

/* De loopvideo van Bas en Anna onder de vertrouwensregel. */
.trust__video{
  max-width:760px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--radius-video);
  overflow:hidden; background:var(--bg-card);
  aspect-ratio:16/9;
}
.trust__video img,.trust__video video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Foto's in de oprichterssectie. */
.founders__portret{
  width:100%; height:auto; border-radius:var(--radius-card);
  border:1px solid var(--line);
}
.founders__podium{
  width:100%; height:auto; margin-top:14px;
  border-radius:var(--radius-card); border:1px solid var(--line);
}

/* Compilatie als brede kaart tussen de reviews. */
.reviews--wide-row{ grid-template-columns:1fr !important; }

/* ── Oranje koppen op de VSL-pagina ────────────────────────────────────
   Bas wil dat de kaartkoppen in deze blokken eruit springen. Alleen de koppen
   van herkenning, de vergelijking en de stappen; de praktijkkaarten in .grid4
   blijven wit zodat niet de hele pagina oranje wordt. */
.grid3 .minicard__title,
.oldcard__title,
.stepcard__title{ color:var(--orange); }

/* Inklapbaar verhaal in een reviewkaart. Zelfde principe als de FAQ: native
   details, geen JavaScript, en de standaard browserstyling eraf. */
.review__meer{ margin-top:14px; }
.review__meer summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  /* Ruim genoeg om met een duim te raken. */
  min-height:44px; padding:12px 0 6px; cursor:pointer; list-style:none;
  border-top:1px solid var(--line);
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  letter-spacing:.02em; color:var(--orange);
}
.review__meer summary::-webkit-details-marker{ display:none; }
.review__meer summary:hover{ color:var(--orange-warm); }
.review__meer summary:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.review__chev{ display:grid; place-items:center; width:17px; height:17px; flex:0 0 auto;
  transition:transform 220ms ease; }
.review__chev svg{ width:100%; height:100%; }
.review__meer[open] .review__chev{ transform:rotate(180deg); }
.review__meer[open] summary{ margin-bottom:2px; }
.review__meer .voorna{ margin-top:12px; }
@supports (interpolate-size: allow-keywords){
  .review__meer{ interpolate-size:allow-keywords; }
  .review__meer::details-content{
    block-size:0; overflow:hidden;
    transition:block-size 280ms cubic-bezier(.22,.61,.36,1), content-visibility 280ms allow-discrete;
  }
  .review__meer[open]::details-content{ block-size:auto; }
}
@media (prefers-reduced-motion:reduce){
  .review__chev{ transition:none !important; }
  .review__meer::details-content{ transition:none !important; }
}

/* ── Menu op de homepage ───────────────────────────────────────────────
   Zelfde principe als de stappenbalk in de funnel: hij staat vast bovenaan en
   verschijnt pas zodra iemand gaat scrollen, zodat de kop het eerste is wat je
   ziet. */
.sitenav{
  position:sticky; top:0; z-index:40; height:64px;
  background:rgba(13,13,15,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; translate:0 -100%;
  transition:opacity 220ms ease, translate 260ms ease, visibility 260ms;
}
.sitenav.zichtbaar{ opacity:1; visibility:visible; translate:0 0; }
.sitenav__binnen{
  display:flex; align-items:center; gap:18px; height:100%;
}
.sitenav__merk{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 4px;
  font-family:var(--font-head); font-size:17px; font-weight:700;
  letter-spacing:-.01em; color:var(--text); text-decoration:none; flex:0 0 auto;
}
.sitenav__links{
  display:none; flex:1 1 auto; gap:4px; list-style:none; margin:0; padding:0;
}
.sitenav__links a{
  display:block; padding:8px 13px; border-radius:999px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--text-2); white-space:nowrap;
  transition:color 160ms ease, background 160ms ease;
}
.sitenav__links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.sitenav__cta{
  width:auto; max-width:none; min-height:42px; padding:10px 18px;
  font-size:14px; flex:0 0 auto; margin-left:auto;
}
@media (min-width:900px){
  .sitenav__links{ display:flex; justify-content:center; }
  .sitenav__cta{ margin-left:0; }
}
/* Op smalle schermen alleen het merk en de knop: de ankers passen daar niet
   naast en de knop is daar het belangrijkst. */
@media (max-width:520px){
  .sitenav{ height:58px; }
  .sitenav__cta{ font-size:13.5px; padding:9px 14px; }
}
/* De ankers mogen niet achter de balk verdwijnen. */
[data-page="home"] section[id]{ scroll-margin-top:76px; }
/* De kaarten rekken hier niet mee met de hoogste in de rij. Klapt iemand er
   een open, dan groeit alleen die kaart en blijven de buren zoals ze waren. */
[data-page="home"] .reviewgrid{ align-items:flex-start; }
html:has(> body[data-page="home"]){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html:has(> body[data-page="home"]){ scroll-behavior:auto; }
}

/* ── Opvolgpagina /leeronskennen ───────────────────────────────────────
   Dezelfde bouwstenen als de voorbereidingspagina, met een paar varianten
   voor de andere volgorde en het zwaardere mediablok. */

/* Zacht scrollen naar de ankerlink onderaan. Dit moet op het element staan dat
   daadwerkelijk scrollt, en dat is html en niet body. */
html:has(> body[data-page="kennis"]){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html:has(> body[data-page="kennis"]){ scroll-behavior:auto; }
}
/* Alleen op de opvolgpagina; daar staat geen menu boven de pagina. */
[data-page="kennis"] #ervaringen{ scroll-margin-top:24px; }

/* Drie kolommen in plaats van vier, zodat de video's hier groter staan. */
@media (min-width:1080px){
  .ytgrid--ruim > *{ flex:0 0 calc((100% - 36px) / 3); }
}

/* De uitzending krijgt een echte videokaart met het beeld uit de aflevering. */
.uitzending{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--radius-video); border:1px solid var(--line);
  background:var(--bg-card); text-decoration:none;
  transition:border-color 180ms ease, transform 180ms ease;
}
.uitzending:hover{ border-color:rgba(255,106,61,.42); transform:translateY(-2px); }
.uitzending__beeld{ position:relative; display:block; aspect-ratio:16/9; }
.uitzending__beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.uitzending__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--grad-cta); color:var(--ink);
  box-shadow:0 10px 34px rgba(255,106,61,.32);
  transition:scale 180ms ease;
}
.uitzending:hover .uitzending__play{ scale:1.05; }
.uitzending__play svg{ width:34%; height:34%; margin-left:8%; }
.uitzending__balk{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding:16px 20px; border-top:1px solid var(--line);
}
.uitzending__bron{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.uitzending__titel{
  font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--text);
}
.uitzending__meta{ font-size:13.5px; color:var(--text-2); margin-left:auto; white-space:nowrap; }
@media (max-width:520px){
  .uitzending__play{ width:58px; height:58px; }
  .uitzending__meta{ margin-left:0; width:100%; }
}

/* Ondersteunende alinea onder de subkop: kleiner, zodat de aandacht naar de
   video eronder gaat. */
.section-sub--klein{
  font-size:clamp(14.5px, .2vw + 14px, 16px);
  color:var(--text-2); opacity:.9; max-width:56ch; margin-top:14px;
}
.center .section-sub--klein{ margin-inline:auto; }

/* Eén mediakaart op volle breedte in plaats van twee naast elkaar. */
.mediagrid--enkel{ grid-template-columns:1fr !important; margin-top:16px; }

/* Rij met sociale kanalen: tekstchips, geen iconenmuur. */
.socialrij{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0; padding:0; list-style:none;
}
.socialrij .btn-ghost{ width:auto; min-height:44px; padding:11px 20px; font-size:14.5px; }

/* ── Hero: rustige opbouw bij binnenkomst ──────────────────────────────
   Alles staat gewoon in de HTML en krijgt alleen een opacity-animatie. Zo
   verschuift er niets in de opmaak en blijft de kop het eerste wat de browser
   kan tekenen. */
@keyframes hero-in{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
.hero-trap > *{ animation:hero-in 520ms cubic-bezier(.22,.61,.36,1) both; }
.hero-trap > .eyebrow{ animation-delay:0ms; }
.hero-trap > h1,
.hero-trap > .section-head > h1{ animation-delay:120ms; }
.hero-trap > .hero-sub,
.hero-trap > .section-sub{ animation-delay:260ms; }
.hero-trap > .lockthumb,
.hero-trap > .cta-block{ animation-delay:380ms; }

/* Dezelfde opbouw, maar dan voor de kop van de voorbereidingspagina waar de
   onderdelen in een header zitten. */
.hero-trap .section-head > *{ animation:hero-in 520ms cubic-bezier(.22,.61,.36,1) both; }
.hero-trap .section-head > .gelukt{ animation-delay:0ms; }
.hero-trap .section-head > .eyebrow{ animation-delay:120ms; }
.hero-trap .section-head > h1{ animation-delay:240ms; }
.hero-trap .section-head > .section-sub{ animation-delay:360ms; }

/* Eyebrow als knopje, zodat hij meer opvalt. */
.eyebrow--badge{
  display:inline-block; padding:9px 18px; border-radius:999px;
  /* Was oranje op oranje, waardoor hij met de kop en de knop om aandacht
     concurreerde. Nu een donkere grond met witte tekst: hij blijft leesbaar
     als bovenregel, maar het oranje is voortaan van de kop en de knop. */
  background:rgba(12,12,14,.72); border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  margin-inline:auto; line-height:1.45; text-wrap:balance;
}
/* Meer lucht tussen de bovenregel en de kop, zodat het twee dingen zijn en
   niet een blok. */
.landing .eyebrow--badge{ margin-bottom:clamp(22px, 4vw, 34px); }
/* Op smalle schermen breekt de regel toch; dan mag hij iets krapper zitten. */
@media (max-width:520px){
  .eyebrow--badge{ padding:8px 15px; }
}

/* Pijltje dat aangeeft dat er onder de vouw meer staat. */
.scrolltip{
  display:grid; place-items:center; width:30px; height:30px;
  margin:18px auto 0; color:var(--text-2);
  animation:scrolltip-wip 1.8s ease-in-out infinite;
  transition:opacity 300ms ease;
}
.scrolltip svg{ width:22px; height:22px; display:block; }
.scrolltip.is-weg{ opacity:0; pointer-events:none; }
@keyframes scrolltip-wip{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(6px); }
}

@media (prefers-reduced-motion:reduce){
  .hero-trap > *,
  .hero-trap .section-head > *{ animation:none !important; opacity:1 !important; transform:none !important; }
  .scrolltip{ animation:none !important; }
}

/* ── Beweging: rustig invaden zodra iets in beeld komt ─────────────────── */

.reveal-aan [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal-aan [data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }

/* De bullets in wel/niet komen om en om van links en rechts binnen. */
.reveal-aan .fit__kaart li{
  opacity:0;
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1), transform 520ms cubic-bezier(.22,.61,.36,1);
}
.reveal-aan .fit__kaart li:nth-child(odd){ transform:translateX(-18px); }
.reveal-aan .fit__kaart li:nth-child(even){ transform:translateX(18px); }
.reveal-aan .fit__kaart.is-in li{ opacity:1; transform:none; }
.reveal-aan .fit__kaart.is-in li:nth-child(1){ transition-delay:80ms; }
.reveal-aan .fit__kaart.is-in li:nth-child(2){ transition-delay:180ms; }
.reveal-aan .fit__kaart.is-in li:nth-child(3){ transition-delay:280ms; }
.reveal-aan .fit__kaart.is-in li:nth-child(4){ transition-delay:380ms; }
.reveal-aan .fit__kaart.is-in li:nth-child(5){ transition-delay:480ms; }
.reveal-aan .fit__kaart.is-in li:nth-child(6){ transition-delay:580ms; }

/* Kaarten naast elkaar komen met een klein verschil binnen. */
.reveal-aan .reviews [data-reveal]:nth-child(even),
.reveal-aan .grid3 [data-reveal]:nth-child(even),
.reveal-aan .grid4 [data-reveal]:nth-child(even){ transition-delay:90ms; }
.reveal-aan .split__kaarten [data-reveal]:nth-child(odd){ transition-delay:60ms; }

/* Trapsgewijs binnen een groep: elk kind komt 70ms na het vorige binnen. Zo
   bouwt een rij kaarten of bullets zichzelf op in plaats van in een klap te
   verschijnen. */
.reveal-aan .reveal-trap > [data-reveal]:nth-child(1){ transition-delay:0ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(2){ transition-delay:70ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(3){ transition-delay:140ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(4){ transition-delay:210ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(5){ transition-delay:280ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(6){ transition-delay:350ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(7){ transition-delay:420ms; }
.reveal-aan .reveal-trap > [data-reveal]:nth-child(8){ transition-delay:490ms; }

/* Variant die van links inschuift in plaats van van onderen. */
.reveal-aan [data-reveal="links"]{ transform:translateX(-22px); }
.reveal-aan [data-reveal="links"].is-in{ transform:none; }

/* Markeerveeg: een oranje balk die achter het woord doorloopt zodra het blok
   in beeld komt. Bedoeld voor een enkel woord in een kop, niet voor hele zinnen. */
/* De nadruk licht op zodra het blok in beeld komt: van de gewone tekstkleur
   naar oranje, met een korte gloed. Eerder stond hier een markeerbalk, maar die
   viel uiteen zodra de kop over meerdere regels brak. */
.markeer{
  color:var(--text);
  text-shadow:0 0 0 rgba(255,106,61,0);
  transition:color 520ms ease 260ms, text-shadow 520ms ease 260ms;
}
.reveal-aan [data-reveal].is-in .markeer,
html:not(.reveal-aan) .markeer{
  color:var(--orange);
  text-shadow:0 0 26px rgba(255,106,61,.30);
}

@media (prefers-reduced-motion:reduce){
  .reveal-aan [data-reveal],
  .reveal-aan .fit__kaart li{ opacity:1 !important; transform:none !important; transition:none !important; }
  .markeer{ color:var(--orange) !important; text-shadow:none !important; transition:none !important; }
}

/* ── /vsl: posterbeeld staat er meteen, de loop komt erachteraan ───────── */

.lockthumb__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.lockthumb__loop{
  position:absolute; inset:0;
  opacity:0; transition:opacity 400ms ease;
}
.lockthumb__loop.is-klaar{ opacity:1; }

/* Podiumfoto in de sectie over echte begeleiding. */
.podium{ margin:0; border-radius:var(--radius-video); overflow:hidden; border:1px solid var(--line); }
.podium img{ width:100%; height:auto; display:block; }

/* ── "In deze 8:30 ontdek je" ──────────────────────────────────────────── */

.punten{ list-style:none; margin:0; padding:0; }
/* Korte regels: strak onder elkaar, bedoeld om te scannen, niet te lezen. */
.punten{ max-width:34ch; margin-inline:auto; }
.punten li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:15px 0; border-top:1px solid var(--line);
}
.punten li:last-child{ border-bottom:1px solid var(--line); }
.punten p{
  margin:0; font-size:clamp(17px,.5vw + 16px,19px); line-height:1.35;
  font-weight:500; color:var(--text);
}

.punten__vink{
  display:grid; place-items:center; width:26px; height:26px; margin-top:1px;
  border-radius:50%; color:var(--orange);
  background:rgba(255,106,61,.12); border:1px solid rgba(255,106,61,.28);
}
.punten__vink svg{ width:14px; height:14px; }

/* ==========================================================================
   Toegangsbevestiging (/vsl/watch)
   --------------------------------------------------------------------------
   Een wit vlak boven aan een verder donkere pagina. De watch-pagina leek te
   veel op de landingspagina, en de speler start niet uit zichzelf, waardoor
   bezoekers na het invullen twijfelden of ze nu wel binnen waren. Deze balk
   breekt het donker en bevestigt dat in een oogopslag.
   ========================================================================== */

.toegang{
  background:#FFFFFF;
  color:var(--ink);
  padding-block:clamp(22px, 3.4vw, 40px);
  text-align:center;
}
.toegang__wrap{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.toegang__vink{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--grad-cta); color:#FFFFFF;
  box-shadow:0 6px 18px rgba(255,106,61,.32);
}
.toegang__kop{
  margin:0;
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(28px, 2.6vw + 16px, 46px);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.toegang__sub{
  margin:0;
  font-size:var(--fs-body); font-weight:500;
  color:rgba(13,13,15,.62);
}

/* De balk komt binnen in plaats van er te staan. Juist die beweging vertelt
   dat er zojuist iets is gelukt. */
@keyframes toegangIn{
  from{ opacity:0; transform:translateY(-12px); }
  to  { opacity:1; transform:none; }
}
@keyframes toegangVink{
  from{ opacity:0; transform:scale(.55); }
  to  { opacity:1; transform:none; }
}
.toegang{ animation:toegangIn 520ms cubic-bezier(.2,.7,.3,1) both; }
.toegang__vink{ animation:toegangVink 420ms cubic-bezier(.2,.9,.3,1) 200ms both; }

@media (prefers-reduced-motion:reduce){
  .toegang,.toegang__vink{ animation:none; }
}

/* ── Hero /vsl/watch: twee duidelijke regels, een oranje focus ─────────── */

.h1-regel{ display:block; }

/* De nadruk in de kop mag gewoon afbreken. Hij stond eerder op nowrap voor een
   korte zin van twee woorden; bij een langere zin liep hij daardoor buiten
   beeld. text-wrap:balance verdeelt de regels netjes. */
.watch-hero h1 em{ white-space:normal; }

/* De kop staat hier onder de toegangsbalk en hoeft niet meer als eerste de
   aandacht te pakken. Een slag kleiner dan --fs-hero leest rustiger en brengt
   de speler hoger in beeld, zodat de video eerder binnen het scherm valt. */
.watch-hero h1{ text-wrap:balance; font-size:clamp(32px, 2.6vw + 20px, 52px); }
.watch-hero .hero-sub{ font-size:clamp(16px, 0.4vw + 14px, 20px); }

.hero-sub .duur{ font-weight:600; color:inherit; }

/* ── Voortgang door de aanvraag ────────────────────────────────────────── */

.stappen{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 10px; list-style:none; margin:0 0 22px; padding:0;
}
.stappen li{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--text-2);
  opacity:.5;
}
.stappen li.nu{ opacity:1; color:var(--text); }
.stappen li.af{ opacity:.8; }
.stappen li:not(:last-child)::after{
  content:""; width:18px; height:1px; background:var(--line); margin-left:4px;
}
.stappen__bol{
  display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; font-size:12px; font-weight:600;
  border:1px solid var(--line); color:var(--text-2);
}
.stappen li.nu .stappen__bol{
  background:var(--grad-cta); border-color:transparent; color:var(--ink);
}
.stappen li.af .stappen__bol{ border-color:rgba(255,106,61,.45); color:var(--orange); }

/* ── Bevestiging ───────────────────────────────────────────────────────── */

.gelukt{
  display:grid; place-items:center; width:56px; height:56px;
  margin:0 auto 18px; border-radius:50%;
  color:var(--orange); background:rgba(255,106,61,.12);
  border:1px solid rgba(255,106,61,.3);
}
.gelukt svg{ width:26px; height:26px; }

.klaarzetten{ display:grid; gap:14px; margin-top:clamp(28px,4vw,40px); text-align:left; }
@media (min-width:820px){ .klaarzetten{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }

.klaarkaart{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:22px;
}
.klaarkaart h2{ font-size:17px; margin:0 0 8px; }
.klaarkaart p{ margin:0; font-size:15.5px; color:var(--text-2); }

/* Op de scan- en kalenderpagina heeft de placeholder een rustiger label. */
.embed--survey .embed__placeholder,
.embed--calendar [data-embed-status]{ }
.embed__placeholder,[data-embed-status]{ letter-spacing:.08em; text-transform:none; font-size:14px; }

/* ── Genummerde stappen (scanpagina) ───────────────────────────────────── */

.steps{ list-style:none; margin:0 0 24px; padding:0; text-align:left; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--line);
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps .num{
  font-family:var(--font-head); font-size:clamp(19px,1vw + 17px,24px);
  font-weight:700; color:var(--orange); font-variant-numeric:tabular-nums;
}
.steps .step-text{
  font-size:var(--fs-sub); font-weight:500; color:var(--text); line-height:1.4;
}
.note-lines{ color:var(--text-2); text-align:center; max-width:52ch; margin-inline:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   VOORBEREIDINGSPAGINA (/vsl/thanks)
   Bouwt op dezelfde tokens als de rest van de funnel. Alles mobile first.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Stappenbalk ── */
.stapnav{
  position:sticky; top:0; z-index:40;
  height:60px;
  background:rgba(13,13,15,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.stapnav ol{
  display:flex; gap:4px; list-style:none; margin:0; padding:10px 0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stapnav ol::-webkit-scrollbar{ display:none; }
.stapnav a{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--text-2);
  border:1px solid transparent; transition:color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.stapnav a:hover{ color:var(--text); }
.stapnav a.nu{ color:var(--text); border-color:rgba(255,106,61,.35); background:rgba(255,106,61,.08); }
.stapnav__n{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  font-size:11px; font-weight:700; background:var(--bg-card); border:1px solid var(--line);
}
.stapnav a.nu .stapnav__n{ background:var(--orange); border-color:var(--orange); color:#0D0D0F; }

/* ── Media / autoriteit ── */
.mediakop{
  margin:0 0 16px; text-align:center; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
}
.mediagrid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .mediagrid{ grid-template-columns:1.6fr 1fr; align-items:stretch; } }

.mediakaart{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:22px 46px 22px 22px; text-decoration:none;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); transition:border-color 180ms ease, transform 180ms ease;
}
.mediakaart:hover{ border-color:rgba(255,106,61,.4); transform:translateY(-2px); }
.mediakaart__bron{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
}
.mediakaart__titel{ font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--text); }
.mediakaart__tekst{ font-size:14px; line-height:1.55; color:var(--text-2); }
.mediakaart__meta{ font-size:12px; color:var(--text-2); opacity:.75; }
.mediakaart__pijl{
  position:absolute; right:20px; top:22px; color:var(--orange);
  transition:transform 180ms ease;
}
.mediakaart:hover .mediakaart__pijl{ transform:translateX(3px); }
.mediakaart--groot{ padding:26px 48px 26px 26px; }
.mediakaart--groot .mediakaart__titel{ font-size:23px; }

/* ── Checklijst onder video 1 ── */
.checklijst{ list-style:none; margin:26px auto 0; padding:0; max-width:560px; }
.checklijst li{
  position:relative; padding:11px 0 11px 30px; font-size:15px; color:var(--text-2);
  border-top:1px solid var(--line);
}
.checklijst li:last-child{ border-bottom:1px solid var(--line); }
.checklijst li::before{
  content:""; position:absolute; left:4px; top:18px; width:9px; height:9px;
  border-radius:50%; background:var(--orange);
}

.grid3--punten{ margin-top:26px; }

/* ── Reviewraster ── */
/* Flex in plaats van grid: een laatste rij die niet vol is, komt dan netjes
   gecentreerd te staan in plaats van links uitgelijnd met een gat ernaast. */
.reviewgrid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.reviewgrid > .review{ flex:0 0 100%; }
@media (min-width:680px){ .reviewgrid > .review{ flex:0 0 calc((100% - 20px) / 2); } }
@media (min-width:1080px){ .reviewgrid > .review{ flex:0 0 calc((100% - 40px) / 3); } }
.reviewgrid--rest{ margin-top:20px; }

.reviewgrid .review{
  display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:18px;
}
.reviewgrid .review__title{ font-size:16px; line-height:1.35; margin:0 0 12px; }
.reviewgrid .review__frame{ margin-bottom:0; }
/* Naam en rol sluiten de kaart af als kleine, rustige regel. */
.reviewgrid .review__name{
  margin:14px 0 0; font-size:12.5px; font-weight:600;
  color:var(--text-2); letter-spacing:.01em;
}
.reviewgrid .review__name .role{ font-weight:400; }

.voorna{ margin:14px 0 0; padding:0; border-top:0; }
.voorna dt{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); margin-bottom:3px;
}
.voorna dd{ margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--text-2); }
.voorna dd:last-child{ margin-bottom:0; }

/* ── YouTube ── */
.thema{ margin:0 0 36px; }
.thema__kop{
  margin:0 0 16px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
}
/* Flex in plaats van grid, zodat een thema met minder video's gecentreerd
   staat in plaats van links met een gat ernaast. Net als bij de reviews. */
.ytgrid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.ytgrid > *{ flex:0 0 100%; }
@media (min-width:600px){ .ytgrid > *{ flex:0 0 calc((100% - 18px) / 2); } }
@media (min-width:1080px){ .ytgrid > *{ flex:0 0 calc((100% - 54px) / 4); } }

.yt__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-video); border:1px solid var(--line); background:var(--bg-card);
}
.yt__frame iframe{ width:100%; height:100%; border:0; display:block; }
.yt__knop{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer; display:block;
}
.yt__knop img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:rgba(13,13,15,.72); color:#fff; backdrop-filter:blur(3px);
  transition:scale 180ms ease, background 180ms ease;
}
.yt__play svg{ width:20px; height:20px; margin-left:2px; }
.yt__knop:hover .yt__play{ scale:1.08; background:var(--orange); }
.yt__knop:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.yt__duur{
  position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:5px;
  background:rgba(13,13,15,.82); color:#fff; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.yt__titel{
  margin:11px 0 0; font-family:var(--font-body); font-size:14px; font-weight:600;
  line-height:1.45; color:var(--text);
}

/* ── Podcast ── */
.podcast{
  margin-top:14px; padding:26px;
  background:var(--bg-card); border:1px solid rgba(255,106,61,.28);
  border-radius:var(--radius-card);
  box-shadow:0 0 0 1px rgba(255,106,61,.05), 0 18px 60px rgba(255,106,61,.07);
}
.podcast__kop{ margin-bottom:20px; }
.podcast__kop h3{ margin:0 0 8px; font-size:21px; }
.podcast__kop p{ margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--text-2); max-width:60ch; }
/* De speler draait in een iframe van Spotify; die kleuren zijn van buitenaf
   niet te sturen. Vandaar het eigen kader eromheen. */
.podcast__speler{ position:relative; min-height:180px; border-radius:12px; overflow:hidden; }
.podcast__speler iframe{ display:block; width:100%; }

/* De FAQ gebruikt bewust de stijl van de VSL-pagina (.faq / .faq__item /
   .faq__chev / .faq__body hierboven). Hier alleen de aanvulling voor een
   antwoord dat nog moet komen. */
.faq__nog{ color:var(--text-2); opacity:.75; font-style:italic; }

/* ── Checklist onderaan ── */
.checkkaart{
  padding:28px; background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--radius-card);
}
.checkkaart h2{ margin:0 0 6px; font-size:21px; }
.checkkaart > p{ margin:0 0 16px; font-size:14px; color:var(--text-2); }
.checkkaart ul{ list-style:none; margin:0; padding:0; }
.checkkaart li{
  position:relative; padding:9px 0 9px 28px; font-size:15px; color:var(--text-2);
}
.checkkaart li::before{
  content:""; position:absolute; left:3px; top:15px; width:11px; height:6px;
  border-left:2px solid var(--orange); border-bottom:2px solid var(--orange);
  rotate:-45deg;
}

@media (prefers-reduced-motion:reduce){
  .mediakaart, .yt__play, .faq__pijl{ transition:none; }
  .mediakaart:hover{ transform:none; }
}

/* ── Aanpassingen voorbereidingspagina ─────────────────────────────────── */

/* Stappenbalk komt pas in beeld zodra iemand gaat scrollen. */
.stapnav{
  opacity:0; visibility:hidden; translate:0 -100%;
  transition:opacity 220ms ease, translate 260ms ease, visibility 260ms;
}
.stapnav.zichtbaar{ opacity:1; visibility:visible; translate:0 0; }
.stapnav a.nu{
  color:var(--ink); background:var(--grad-cta); border-color:transparent;
}
.stapnav a.nu .stapnav__n{
  background:rgba(13,13,15,.22); border-color:transparent; color:var(--ink);
}

/* Doorstap onder de video's, in plaats van een opsomming. */
.navolg{ margin-top:30px; text-align:center; }
.navolg .btn-cta{ display:inline-flex; margin-inline:auto; }
.navolg--breed{ margin-top:34px; grid-column:1/-1; }

/* Bevestiging in plaats van een doorstapknop, op de pagina na het invullen. */
.afgerond{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 auto; padding:13px 22px;
  background:var(--bg-card); border:1px solid rgba(255,106,61,.28);
  border-radius:99px;
  font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--text);
}
.afgerond__vink{ display:grid; place-items:center; width:18px; height:18px; color:var(--orange); }
.afgerond__vink svg{ width:100%; height:100%; }

/* Zelfde bevestiging, maar dan als blok op de plek van het formulier. */
.afkaart{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  max-width:560px; margin-inline:auto; padding:clamp(26px,4vw,36px);
  background:var(--bg-card); border:1px solid rgba(255,106,61,.28);
  border-radius:var(--radius-card);
}
.afkaart__vink{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:rgba(255,106,61,.12); color:var(--orange);
}
.afkaart__vink svg{ width:22px; height:22px; }
.afkaart__kop{
  margin:0; font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--text);
}
.afkaart__tekst{ margin:0; font-size:15.5px; line-height:1.6; color:var(--text-2); max-width:42ch; }

/* Media-kaarten wat warmer, zodat het oranje ook hier terugkomt. */
.mediakaart__bron{ color:var(--orange); }
.mediakaart--groot{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,106,61,.10), transparent 60%),
    var(--bg-card);
  border-color:rgba(255,106,61,.26);
}

/* Thema-koppen en labels in het oranje, voor herkenbaarheid door de pagina. */
.thema__kop{ color:var(--orange); }
.voorna dt{ color:var(--orange); }
.checklijst li::before{ background:var(--orange); }
.checkkaart li::before{ border-color:var(--orange); }
.checkkaart{
  background:
    radial-gradient(100% 120% at 50% 0%, rgba(255,106,61,.08), transparent 62%),
    var(--bg-card);
  border-color:rgba(255,106,61,.22);
}
.yt__knop:hover .yt__play{ background:var(--orange); }
.podcast{ border-color:rgba(255,106,61,.3); }

/* ── Compacte hero op de voorbereidingspagina ──────────────────────────────
   Deze pagina is een doorloop, geen landingspagina. De kop mag daarom klein
   blijven, zodat stap 1 al binnen het eerste scherm zichtbaar is. */

[data-prep] .prep-hero .eyebrow{ margin-bottom:10px; }

/* De hero is alleen de aankondiging. Hij mag kleiner en breder, zodat de
   stapkop eronder het eerste is wat je echt ziet. */
[data-prep] .prep-hero h1{
  font-size:clamp(20px, .55vw + 18px, 26px);
  line-height:1.25; max-width:42ch; margin-inline:auto;
}
[data-prep] .prep-hero .section-sub{
  font-size:clamp(14px, .2vw + 13px, 15.5px);
  max-width:62ch; margin-top:10px;
}

/* De stapaanduiding is het belangrijkste ankerpunt op de pagina. */
[data-prep] .section:not(.prep-hero) .eyebrow{
  font-size:clamp(13px, .3vw + 12px, 15px);
  letter-spacing:.16em; margin-bottom:14px;
}

/* Rustiger ritme: minder lucht tussen de secties en onder de koppen. */
[data-prep] .section{ padding-block:56px; }
@media (min-width:768px){
  [data-prep] .section{ padding-block:clamp(56px, 6vw, 84px); }
}
[data-prep] .section-head{ margin-bottom:clamp(22px, 3vw, 32px); }
[data-prep] .prep-hero{
  padding-block:clamp(28px,4vw,42px) clamp(18px,3vw,26px);
}
[data-prep] .section-sub{
  font-size:clamp(15px, .25vw + 14px, 17px);
  max-width:52ch; margin-top:12px; line-height:1.6;
}
[data-prep] .center .section-sub{ margin-inline:auto; }
[data-prep] .prep-hero .gelukt{
  width:40px; height:40px; margin-bottom:14px;
}
[data-prep] .prep-hero .gelukt svg{ width:19px; height:19px; }
[data-prep] .prep-hero .section-head{ margin-bottom:0; }

/* Stap 1 sluit direct aan, zodat je meteen ziet waar je moet beginnen. */
[data-prep] #stap-1{ padding-top:clamp(30px,4vw,48px); }

/* De kop van de opvolgpagina is kort en mag groter dan die van de
   voorbereidingspagina, die uit een hele zin bestaat. Staat bewust ná de
   algemene regels hierboven, anders winnen die. */
[data-page="kennis"] .prep-hero h1{
  font-size:clamp(30px, 2vw + 22px, 46px);
  max-width:20ch;
}
[data-page="kennis"] .prep-hero .section-sub{
  font-size:clamp(16px, .3vw + 15px, 19px); max-width:46ch;
}

/* De stappenbalk staat vast bovenaan. Zonder deze marge landt de stapkop er
   precies achter zodra je in de balk op een stap klikt. */
[data-prep] #stap-1,
[data-prep] #stap-2,
[data-prep] #stap-3,
[data-prep] #stap-4,
[data-prep] #stap-5{ scroll-margin-top:76px; }

/* ── Speeltip onder de lange video ── */
.speedtip{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:18px auto 0; padding:11px 18px; max-width:max-content;
  font-size:14.5px; line-height:1.45; color:var(--text);
  background:rgba(255,106,61,.09);
  border:1px solid rgba(255,106,61,.32);
  border-radius:999px;
}
.speedtip b{ color:var(--orange); font-weight:700; }
.speedtip__ico{ flex:none; color:var(--orange); display:grid; place-items:center; }
.speedtip__ico svg{ width:17px; height:17px; display:block; }
@media (max-width:520px){
  .speedtip{ border-radius:14px; text-align:left; align-items:flex-start; }
}

/* Compilatiekaart: doorlopende tekst in plaats van daarvoor en daarna. */
.watjehoort{ margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line); }
.watjehoort__kop{
  margin:0 0 6px; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--orange);
}
.watjehoort p{ margin:0 0 9px; font-size:14px; line-height:1.55; color:var(--text-2); }
.watjehoort p:last-child{ margin-bottom:0; }

/* Brede compilatiekaart tussen de eerste drie verhalen en de rest. */
.review--breed{
  display:grid; gap:22px; margin-top:20px; padding:22px;
  background:var(--bg-card); border:1px solid rgba(255,106,61,.24);
  border-radius:var(--radius-card);
}
@media (min-width:820px){
  .review--breed{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; padding:26px; }
}
.review--breed .review__frame{ margin:0; }
.review--breed__tekst .review__title{ margin:0 0 12px; font-size:19px; line-height:1.35; }
.review--breed__tekst p{ margin:0 0 9px; font-size:14.5px; line-height:1.6; color:var(--text-2); }
.review--breed__tekst p:last-child{ margin:0; }

/* ==========================================================================
   Eigen opt-informulier in de modal
   --------------------------------------------------------------------------
   Verving het iframe van GoHighLevel. Gebruikt dezelfde velden en knoppen als
   de rest van de funnel, dus hier staat alleen wat specifiek is.
   ========================================================================== */

.optinform{ margin-top:4px; }
.optinform .veldrij{ display:grid; gap:12px; }
@media (min-width:520px){ .optinform .veldrij{ grid-template-columns:1fr 1fr; } }
.optinform .veldwrap{ display:flex; flex-direction:column; gap:7px; }
.optinform .veldwrap--breed{ grid-column:1 / -1; }
.optinform .veldwrap__label{
  font-size:12.5px; font-weight:600; color:var(--text-2); letter-spacing:.03em;
}
.optinform .veld{
  width:100%; box-sizing:border-box; padding:13px 15px;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-field);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.optinform .veld:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,61,.16), 0 0 22px -6px rgba(255,106,61,.55);
}
.optinform .btn-cta{ width:100%; margin-top:18px; }
.optinform__note{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:12px 0 0; font-size:12.5px; color:var(--text-2); opacity:.62;
}
/* Losse korte regels in het herkenningsblok. Geen alinea's maar vier
   stappen, dus elk op een eigen regel en geen opsommingstekens ervoor.

   Links uitgelijnd binnen dezelfde kolom als de punten erboven. Gecentreerd
   raakt je oog bij elke nieuwe regel de linkerkant kwijt, en de slotzin loopt
   over meer dan een regel. */
/* Instagramknop. Bewust niet oranje: de agendaknop bovenaan is wat iemand nu
   moet doen, en twee oranje knoppen op een pagina laten je precies niet zien
   welke van de twee ertoe doet. Deze valt op door de rand en het icoon, in de
   kleuren van Instagram zelf, zodat hij herkenbaar is als iets anders in
   plaats van als een zwakkere versie van de eerste. */
/* Kleine bovenregel, voor boven de video op de bedankpagina. De gewone
   eyebrow is een badge met een rand; die trekt daar te veel aandacht weg van
   de video zelf. */
.eyebrow--klein{
  margin:clamp(26px,4vw,38px) 0 12px;
  font-size:11px; letter-spacing:.2em; opacity:.75;
}

/* De knop staat nu onder de video in plaats van los in de hero. Iets minder
   ruimte erboven, zodat knop en video als een geheel lezen. */
.cta-block--navideo{ margin-top:clamp(20px,3vw,26px); }

.btn-insta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  font-family:var(--font-body); font-size:15px; font-weight:600;
  color:var(--text); text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-btn);
  /* Twee lagen: de kaartkleur vult de knop, het verloop tekent de rand. */
  background-image:
    linear-gradient(var(--bg-card), var(--bg-card)),
    linear-gradient(115deg, #F9CE34, #EE2A7B 48%, #6228D7);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.btn-insta svg{ width:19px; height:19px; flex:none; }
.btn-insta:hover{ transform:translateY(-1px); box-shadow:0 8px 26px -12px rgba(238,42,123,.65); }
.btn-insta:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .btn-insta{ transition:none; } .btn-insta:hover{ transform:none; } }

/* Korte lopende tekst onder een kop, gecentreerd. Een of twee zinnen; bij
   meer regels leest links uitlijnen beter. */
.lopend{
  max-width:52ch; margin:0 auto;
  font-size:clamp(15.5px,.3vw + 15px,17px); line-height:1.65; color:var(--text-2);
}

.kortregel{
  margin:0 auto .5em; max-width:62ch; text-align:left;
  font-size:clamp(16.5px,.4vw + 15.5px,18.5px); line-height:1.55; color:var(--text-2);
}
.kortregel--sterk{ margin-top:1.1em; margin-bottom:0; color:var(--text); font-weight:600; }

/* De drie punten uit de sessie. Zelfde vorm als de wachtpagina vlak voor de
   sessie: vinkje, oranje kop, uitleg eronder. Eigen naam, want .punten is
   in deze funnel al bezet door een ander blok. */
.sessiepunten{ list-style:none; margin:0; padding:0; max-width:62ch; margin-inline:auto; }
.sessiepunten li{ position:relative; padding:16px 0 16px 34px; }
.sessiepunten li + li{ border-top:1px solid var(--line); }
.sessiepunten li::before{
  content:""; position:absolute; left:2px; top:27px; width:13px; height:7px;
  border-left:2px solid var(--orange); border-bottom:2px solid var(--orange);
  rotate:-45deg;
}
.sessiepunten b{
  display:block; color:var(--orange); font-weight:600;
  font-size:clamp(16.5px,.35vw + 15.5px,18px); line-height:1.4;
}

/* Sfeerbeeld. Vaste verhouding, zodat de pagina niet verspringt zolang de
   video nog niet geladen is. */
/* Wie je spreekt: twee ronde portretten naast elkaar.

   Blijft naast elkaar staan op elke breedte, ook op 320 pixels. Onder elkaar
   zou het een lijstje worden en dan lees je het als een opsomming van mensen
   in plaats van als "een van deze twee belt je". */
/* De video onder de bevestiging van de voorbereiding. */
.vklaar__kop{ font-family:var(--font-head); font-size:clamp(19px,3vw,23px); line-height:1.25;
  margin:4px 0 8px; letter-spacing:-.015em; }
.vklaar__sub{ color:var(--text-2); margin:0 0 20px; }
.vklaar .embed--video{ margin-top:6px; }

.team{
  list-style:none; margin:clamp(22px,4vw,30px) 0 0; padding:0;
  display:flex; justify-content:center; gap:clamp(22px,7vw,52px);
}
.team__lid{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.team__foto{
  display:block; width:clamp(104px,26vw,132px); height:clamp(104px,26vw,132px);
  border-radius:50%; object-fit:cover; object-position:50% 50%;
  border:1px solid var(--line); background:var(--bg-card);
}
/* Een staand portret in een rondje snijdt onderaan af. Iets hoger uitsnijden
   houdt het gezicht in beeld in plaats van de kin op de rand. */
.team__foto--staand{ object-position:50% 22%; }
.team__naam{ font-size:14.5px; font-weight:600; color:var(--text); letter-spacing:.01em; }

.sfeer{ margin:clamp(28px,4vw,40px) auto 0; max-width:62ch; }
.sfeer__video{
  display:block; width:100%; height:auto; aspect-ratio:16 / 9;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius-card); object-fit:cover;
}
.sfeer__kader{ position:relative; }

/* Verschijnt alleen als de video niet uit zichzelf speelt: omdat de bezoeker
   beweging heeft beperkt, of omdat de telefoon automatisch afspelen weigert,
   bijvoorbeeld in de spaarstand. Zonder deze knop blijft er een stilstaand
   beeld staan waar niets mee te beginnen is. */
.sfeer__play{
  position:absolute; inset:0; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:rgba(0,0,0,.28); border:0; border-radius:var(--radius-card);
  cursor:pointer; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.sfeer__play::before{
  content:""; position:absolute; width:64px; height:64px; border-radius:50%;
  background:var(--grad-cta); box-shadow:var(--glow-weak);
  transition:transform .18s ease;
}
.sfeer__play svg{ position:relative; width:22px; height:22px; margin-left:3px; }
.sfeer__play:hover::before{ transform:scale(1.06); }
.sfeer__play:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .sfeer__play::before{ transition:none; }
  .sfeer__play:hover::before{ transform:none; }
}

.sfeer__bij{
  margin:10px 0 0; text-align:center;
  font-size:12.5px; color:var(--text-2); opacity:.6;
}

.cta-block--onder{ margin-top:clamp(32px,4vw,44px); }

/* Wat je krijgt als je je aanmeldt. Staat boven het formulier, niet eronder:
   mensen vullen pas een nummer in als ze weten waarom we het vragen. */
.krijgt{ list-style:none; margin:0 0 22px; padding:0; }
/* Onder de knop: dan hoort er een scheiding boven, anders lijkt het bij de
   voorwaarden te horen die er vlak boven staan. */
.krijgt--onder{
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line);
}
.krijgt li{
  position:relative; padding:8px 0 8px 26px;
  font-size:14.5px; line-height:1.55; color:var(--text-2);
}
.krijgt li::before{
  content:""; position:absolute; left:2px; top:14px; width:10px; height:5px;
  border-left:2px solid var(--orange); border-bottom:2px solid var(--orange);
  rotate:-45deg;
}
.krijgt b{ color:var(--text); font-weight:600; }

/* Landnummer en telefoonnummer als een veld. De keuzelijst is smal en de
   invoer krijgt de rest, zodat het op een telefoon van 320 breed nog past.
   Bewust de eigen keuzelijst van het besturingssysteem: die opent op een
   telefoon als een wiel en werkt met de duim, waar een eigen uitklapmenu dat
   nooit net zo goed doet. */
.telveld{ display:flex; gap:8px; align-items:stretch; }
.telveld__land{
  flex:0 0 auto; width:104px; padding:13px 8px;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-field);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  /* Eigen pijltje, want zonder appearance tekent de browser er geen meer. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23a8a29b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px;
  padding-right:26px;
}
.telveld__land:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,61,.16);
}
.telveld__nummer{ flex:1 1 auto; min-width:0; }

/* Toelichting onder een veld. Hoort bij het veld, dus binnen dezelfde label. */
.optinform .veldwrap__hint{
  font-size:12px; line-height:1.5; color:var(--text-2); opacity:.7;
}

.optinform__fout{
  margin:14px 0 0; padding:11px 14px;
  border-radius:var(--radius-field);
  background:rgba(255,106,61,.12); border:1px solid rgba(255,106,61,.4);
  color:var(--text); font-size:13.5px; line-height:1.5;
}

/* Het verborgen veld tegen bots. Niet display:none, want sommige bots slaan
   onzichtbare velden over. Het staat er echt, maar buiten beeld en buiten de
   toetsenbordvolgorde, dus een mens komt er nooit bij. */
.val{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* De vertrouwensregel staat nu alleen; zonder video eronder hoeft er geen
   ruimte voor gereserveerd te worden. */
.trust--alleenregel .trust__line{ margin-bottom:0; }

/* De loopvideo staat nu onder de herkenningskaarten in plaats van vlak onder
   de VSL. Daar trok hij de aandacht weg van de video waar de pagina om draait. */
.loopslot--nahd{ margin-top:clamp(28px, 5vw, 44px); }

/* ==========================================================================
   Meer ervaringen, ingeklapt
   --------------------------------------------------------------------------
   Zestien ervaringen achter elkaar besloegen bijna een derde van de pagina.
   Zes blijven staan, de rest zit hierachter. Native details, dus het werkt
   ook zonder javascript en de video's erin laden pas bij openen.
   ========================================================================== */

.meerrv{ margin-top:clamp(20px, 4vw, 32px); }

.meerrv__knop{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:420px; margin-inline:auto;
  padding:15px 22px; cursor:pointer; list-style:none;
  border:1px solid var(--line); border-radius:var(--radius-btn);
  background:var(--bg-card); color:var(--text);
  font-family:var(--font-head); font-size:var(--fs-cta); font-weight:700;
  transition:border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.meerrv__knop::-webkit-details-marker{ display:none; }
.meerrv__knop:hover{ border-color:rgba(255,106,61,.45); color:var(--orange); }
.meerrv__knop:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.meerrv__aantal{
  display:grid; place-items:center; min-width:26px; height:26px; padding:0 8px;
  border-radius:99px; background:var(--grad-cta); color:var(--ink);
  font-size:13px; font-weight:700;
}
.meerrv__chev{ display:inline-flex; color:var(--text-2); transition:transform 220ms ease; }
.meerrv__chev svg{ width:20px; height:20px; display:block; }
.meerrv[open] .meerrv__chev{ transform:rotate(180deg); }
.meerrv[open] .meerrv__knop{ border-color:rgba(255,106,61,.35); color:var(--orange); }

.meerrv__inhoud{ margin-top:clamp(20px, 4vw, 32px); }

@media (prefers-reduced-motion:reduce){ .meerrv__chev{ transition:none; } }

/* ==========================================================================
   Warme sectie: waarom verandering niet blijft
   --------------------------------------------------------------------------
   Deze sectie volgt direct op "Herken je dit?". Twee stapels kaarten achter
   elkaar op hetzelfde donkere vlak lazen als één lange brij: het oog ziet een
   patroon dat het al kent en stopt met lezen. Inhoudelijk doen ze iets heel
   anders, en dat mag je zien.

   Daarom staat dit blok op een eigen warme ondergrond, van rand tot rand, met
   een oranje lijn boven en onder. Het leest als een hoofdstukbreuk in een
   pagina die verder vijfentwintig schermen bijna-zwart is. Geen wit vlak: dat
   zou de rest van de funnel breken.
   ========================================================================== */

.sectie--warm{
  position:relative;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,106,61,.20), transparent 68%),
    linear-gradient(180deg, #1B1210 0%, #17100F 55%, #120D0C 100%);
  border-block:1px solid rgba(255,106,61,.28);
  margin-block:clamp(28px, 5vw, 56px);
}
/* Geen uitlopers nodig: de sectie is zelf al zo breed als het venster, en
   alleen .wrap erbinnen houdt de inhoud smal. Met uitlopers van 50vw kon de
   pagina zijwaarts schuiven. */

/* Binnen de warme sectie mogen de kaarten oplichten in plaats van weg te
   zakken. Ze staan op een lichtere ondergrond met een oranje rand links, zodat
   het rijtje leest als een opsomming en niet als losse blokken. */
.sectie--warm .oldcard{
  background:linear-gradient(120deg, rgba(255,106,61,.10), rgba(35,24,21,.85) 55%);
  border-color:rgba(255,106,61,.26);
  border-left:3px solid var(--orange);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
}
.sectie--warm .oldcard:hover{
  border-color:rgba(255,138,76,.55);
  border-left-color:var(--orange-warm);
}
.sectie--warm .cardicon{
  background:var(--grad-cta); color:var(--ink);
  border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(255,106,61,.8);
}
.sectie--warm .oldcard__title{ color:var(--text); }
.sectie--warm .oldcard__label{
  background:var(--grad-cta); color:var(--ink); border:none;
}
.sectie--warm .eyebrow{ color:var(--orange-warm); }

/* Het kopje bovenaan mag hier zwaarder wegen: dit is de scharnierpagina van
   het verhaal, waar het van "jij" naar "waarom het tot nu toe niet lukte" gaat. */
.sectie--warm .section-sub{ color:var(--text); opacity:.86; }

/* De vertrouwensregel is meeverhuisd met de loopvideo, naar onder de
   herkenningskaarten. Daar hoort hij bij het beeld in plaats van bij de knop. */
.trust__line--nahd{
  text-align:center; margin:clamp(30px, 5vw, 48px) auto 16px;
}

/* ── Foto's bij de korte ervaringen op /vsl ──────────────────────────────
   Ronde portretten met een doorzichtige rand, klein in de hoek van de kaart.
   Ze staan er om een gezicht te geven aan de zin ernaast, niet om aandacht te
   trekken: vandaar rechtsboven en bescheiden van maat. */

.proofcard{ position:relative; }
.proofcard__foto{
  position:absolute; top:18px; right:18px;
  width:62px; height:62px; display:block;
  border-radius:50%;
  /* Een zachte gloed eronder, zodat het portret loskomt van de kaart zonder
     dat er een harde rand omheen hoeft. */
  box-shadow:0 6px 20px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(255,106,61,.22);
}
.proofcard__foto img{ width:100%; height:100%; display:block; border-radius:50%; }

/* Ruimte vrijhouden, anders loopt de tekst onder het portret door. */
.proofcard__result{ padding-right:74px; }

@media (min-width:520px){
  .proofcard__foto{ width:72px; height:72px; }
  .proofcard__result{ padding-right:86px; }
}

/* Met vier kaarten staan ze op een breder scherm mooier naast elkaar dan
   onder elkaar. */
@media (min-width:760px){
  .proofcards{ grid-template-columns:1fr 1fr; }
}


/* ── Plaatshouders voor de livesessiefunnel ─────────────────────────────
   Zichtbaar en lelijk met opzet. Zolang er een plaatshouder op een pagina
   staat, is die pagina niet klaar om open te gaan, en dat moet je zien. */
.plaatshouder{
  border:2px dashed rgba(255,106,61,.55); border-radius:var(--radius-btn);
  background:rgba(255,106,61,.06); padding:clamp(22px,5vw,40px) clamp(18px,4vw,32px);
  text-align:center; margin-block:clamp(18px,4vw,28px);
}
.plaatshouder--klein{ padding:clamp(16px,3vw,24px); }
.plaatshouder__kop{
  font-family:var(--font-head); font-weight:700; color:var(--orange);
  font-size:clamp(15px,2vw,17px); margin:0 0 8px;
}
.plaatshouder__uitleg{ color:var(--text-2); font-size:14.5px; margin:0; }