/* Open-workshop landingspagina's, v2. Alleen nieuwe componenten; styles.css blijft ongemoeid.
   Wetten die hier gelden: cream is de grond, navy-deep is het statement, sand is de zone en
   telt maximaal twee per pagina, lime is de CTA en telt maximaal twee elementen per scherm,
   Montserrat 700 alleen vanaf 20px, regellengte 540px bij 16px en 470px bij 14px,
   radii per hoogte 8/12/20/24 en pill 100. */

/* ---------- nav boven een lichte hero ----------
   De navpil is wit-op-transparant en zakt op cream onder 4,5:1. Op de AFW-pagina
   staat de grond dus dicht. DESIGN.md zwijgt hierover; dit is de vastgelegde keuze. */
.nav.solid .bar{background:rgba(13,34,64,.92);border-color:rgba(255,255,255,.14)}

/* ---------- hero ---------- */
.wsh{position:relative;overflow:hidden;padding:132px 0 72px}
.wsh-deep{background:var(--navy-deep)}
.wsh-cream{background:var(--cream)}
.wsh-deep .wsh-bg{position:absolute;inset:0}
.wsh-deep .wsh-bg img{width:100%;height:100%;object-fit:cover;opacity:.30;filter:saturate(.7)}
.wsh-deep .wsh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,23,41,.94) 30%,rgba(13,34,64,.82) 100%)}
.wsh-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.wsh-inner-1{position:relative;z-index:2}
.wsh-inner-1>*{max-width:860px}
.wsh h1{font-family:var(--font-display);font-weight:700;font-size:48px;letter-spacing:-.8px;line-height:1.06;margin-top:14px;text-wrap:balance;max-width:16ch}
.wsh-deep h1{color:var(--on-deep)}
.wsh-cream h1{color:var(--navy)}
/* De belofte staat als h2 onder de titel: Stefan wil de grotere belofte bovenaan.
   Montserrat 700 blijft daarmee boven de 20px-ondergrens, ook op de telefoon. */
.wsh-promise{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.4px;margin-top:16px;max-width:20ch}
.wsh-deep .wsh-promise{color:var(--on-deep-body)}
.wsh-cream .wsh-promise{color:var(--navy)}
.wsh-facts{list-style:none;margin:24px 0 0;display:grid;gap:8px;max-width:540px}
.wsh-facts li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline}
.wsh-facts span{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.wsh-facts b{font-family:var(--font-text);font-size:15px;font-weight:600;line-height:1.45}
.wsh-deep .wsh-facts span{color:var(--on-deep-sec)}
.wsh-deep .wsh-facts b{color:var(--on-deep)}
.wsh-cream .wsh-facts span{color:var(--text-sec)}
.wsh-cream .wsh-facts b{color:var(--navy)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.cta-note{font-size:13px;margin-top:12px;max-width:440px;line-height:1.5;color:var(--text-sec)}
.cta-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.wsh-deep .cta-note,.ws-final .cta-note{color:var(--on-deep-sec)}
.wsh-deep .cta-note a,.ws-final .cta-note a{color:var(--on-deep);font-weight:400}
.wsh-trust{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-family:var(--font-brand);font-size:13px;font-weight:600}
.wsh-deep .wsh-trust,.ws-final .wsh-trust{color:var(--on-deep-body)}
.wsh-cream .wsh-trust{color:var(--text-sec)}
.wsh-trust .stars svg{fill:var(--gold)}
.wsh-media .hvid{width:100%;margin:0;aspect-ratio:16/9;height:auto;border-radius:24px}
.wsh-cap{font-family:var(--font-brand);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;margin-top:12px}
.wsh-deep .wsh-cap{color:var(--on-deep-sec)}
.wsh-cream .wsh-cap{color:var(--text-sec)}
/* De eerste angst van het businesspubliek is dat dit een developerdag is, dus die
   regel staat boven de vouw en niet pas in de FAQ. */
.wsh-nocode{display:inline-block;margin-top:14px;font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border-radius:100px;padding:8px 16px;color:var(--navy);background:#fff;border:1px solid var(--border-dark)}
/* De garantie is ons sterkste ongebruikte middel. Het label blijft bewust niet lime:
   met de ticketknop erboven zouden er anders drie lime elementen in de hero staan. */
.wsh-gline{margin-top:20px;max-width:470px;font-size:14px;line-height:1.55;padding-left:16px}
.wsh-gline span{display:block;font-family:var(--font-brand);font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:4px}
.wsh-deep .wsh-gline{color:var(--on-deep-body);border-left:4px solid rgba(255,255,255,.28)}
.wsh-deep .wsh-gline span{color:var(--on-deep-sec)}
.wsh-cream .wsh-gline{color:var(--text);border-left:4px solid var(--border-dark)}
.wsh-cream .wsh-gline span{color:var(--label)}

/* ---------- cijferstrook ---------- */
.ws-stats{background:var(--navy);padding:48px 0}
.ws-st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ws-st-v{font-family:var(--font-brand);font-weight:700;font-size:48px;letter-spacing:-1.4px;line-height:1;color:var(--on-deep);font-variant-numeric:tabular-nums}
.ws-st-stars{display:inline-flex;gap:3px;margin-top:10px}
.ws-st-stars svg{width:15px;height:15px;fill:var(--gold)}
.ws-st p{font-family:var(--font-text);font-size:14px;line-height:1.5;color:var(--on-deep-sec);margin-top:10px;max-width:300px}

/* ---------- probleemblok ----------
   Twee kolommen op laptop: de kop links, de opsomming rechts. Met alles onder
   elkaar bleef de halve breedte leeg, en kapittel 3 vraagt dat de ruimte die
   overblijft een besluit is. */
.ws-problem{background:var(--cream)}
.ws-prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ws-prob-grid .sec-head{margin-bottom:24px}
.ws-lead{font-family:var(--font-text);font-weight:600;font-size:18px;line-height:1.5;color:var(--navy);max-width:540px;margin-bottom:20px}
.ws-turn{font-size:16px;line-height:1.65;color:var(--text);max-width:540px;margin-top:20px;font-weight:600}

/* ---------- lijsten ---------- */
.ws-check,.ws-dot,.ws-cross{list-style:none;display:grid;gap:12px}
.ws-check li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:var(--text);max-width:540px}
.ws-check li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:100px;background:var(--sage);border:1px solid var(--green)}
.ws-check li::after{content:"";position:absolute;left:5px;top:11px;width:8px;height:4px;border-left:2px solid var(--green-dark);border-bottom:2px solid var(--green-dark);transform:rotate(-45deg)}
.ws-dot li{position:relative;padding-left:20px;font-size:16px;line-height:1.6;color:var(--text);max-width:540px}
.ws-dot li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:100px;background:var(--navy)}
.ws-cross li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:var(--text-sec);max-width:540px}
.ws-cross li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:100px;background:#EDE6D7;border:1px solid var(--border-dark)}
.ws-cross li::after{content:"";position:absolute;left:5px;top:10px;width:9px;height:9px;background:linear-gradient(45deg,transparent 43%,var(--text-sec) 43%,var(--text-sec) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--text-sec) 43%,var(--text-sec) 57%,transparent 57%)}

/* ---------- wat je bouwt (zone 1, sand) ---------- */
.ws-build{background:var(--sand)}
.ws-build-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ws-shot{margin:0}
.ws-shot img{width:100%;border-radius:24px;object-fit:cover;aspect-ratio:16/9}
.ws-shot figcaption,.gsc-item figcaption{font-family:var(--font-brand);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-sec);margin-top:10px;line-height:1.4}
.ws-note{font-size:14px;line-height:1.55;color:var(--text-sec);margin-top:24px;max-width:470px}

/* ---------- voor wie ---------- */
.ws-forwho{background:var(--cream)}
.ws-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ws-card{background:#fff;border-radius:24px;padding:28px}
.ws-card h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.2px;color:var(--navy);margin-bottom:20px}
.ws-card p{font-size:16px;line-height:1.6;color:var(--text)}
.ws-card p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ws-card.yes{border-top:4px solid var(--lime-5)}
.ws-card.no{background:#F6F1E6;border-top:4px solid var(--border-dark)}
.ws-card.no h3{color:var(--text-sec)}

/* ---------- videotestimonials ---------- */
.ws-vids{background:var(--cream)}
.ws-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ws-vslot{aspect-ratio:16/9;border-radius:20px;background:#EEF2F8;border:1px dashed var(--border-cool);display:flex;align-items:center;justify-content:center}
.ws-vslot-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:16px}
.ws-play{width:52px;height:52px;border-radius:100px;background:var(--navy-deep);display:flex;align-items:center;justify-content:center}
.ws-play svg{width:24px;height:24px}
.ws-vslot-label{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-sec)}

/* ---------- galerij-scroller ----------
   Horizontaal, scroll-snap per kaart, geen autoscroll: een tweede bewegende rij naast
   de logo-marquee een scherm eerder zou om aandacht vechten. */
.ws-photos{background:var(--cream);padding-bottom:72px}
.gsc{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gsc::-webkit-scrollbar{display:none}
.gsc-track{display:flex;gap:24px;padding:0 40px;width:max-content}
.gsc-item{margin:0;width:420px;flex-shrink:0;scroll-snap-align:start}
.gsc-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px}
.gsc-item .ws-vslot{border-radius:24px}
.gsc-hint{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-sec);margin-top:20px}

/* ---------- wat je leert ---------- */
.ws-learn{background:var(--cream)}
.ws-learn-list{grid-template-columns:1fr 1fr;column-gap:40px}
.ws-two-lists{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ws-two-lists h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--navy);margin:14px 0 16px}
.ws-two-lists .eyebrow{display:block}

/* ---------- programma ---------- */
.ws-program{background:var(--cream)}
.pg{max-width:760px;border-top:1px solid var(--border)}
.pg-row{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--border);align-items:baseline}
.pg-t{font-family:var(--font-brand);font-weight:700;font-size:14px;color:var(--navy);font-variant-numeric:tabular-nums}
.pg-w{font-size:16px;line-height:1.55;color:var(--text)}
.ws-program .cta-row{margin-top:32px}

/* ---------- trainers (de teamweergave van de homepage) ---------- */
.ws-trainers{background:var(--cream);padding:96px 0}
.ws-trainers .tmr-roster{grid-template-columns:repeat(3,1fr)}

/* ---------- inbegrepen ---------- */
.ws-included{background:var(--cream)}
.ws-inc-list{grid-template-columns:1fr 1fr;column-gap:40px}
.ws-bon-head{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--navy);margin-top:48px}
.ws-bonuses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.ws-bonuses .bn{background:#fff;border-radius:20px;padding:24px}
.ws-bonuses h4{font-family:var(--font-text);font-weight:600;font-size:16px;color:var(--navy);line-height:1.4}
.ws-bonuses p{font-size:14px;line-height:1.6;color:var(--text-sec);margin-top:8px;max-width:470px}

/* ---------- prijs (zone 2, sand) ---------- */
.ws-price{background:var(--sand)}
.ws-price-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.pc{background:#fff;border-radius:24px;padding:32px}
.pc-tag{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--label)}
.pc-fig{margin:12px 0 24px}
.pc-fig b{display:block;font-family:var(--font-brand);font-weight:700;font-size:48px;letter-spacing:-1.4px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.pc-fig span{display:block;font-family:var(--font-text);font-size:14px;color:var(--text-sec);margin-top:8px}
.pc .ws-check{margin-bottom:24px}
.pc .ws-check li{font-size:14px;max-width:470px}
.pc-vip{background:var(--navy-deep)}
.pc-vip .pc-tag{color:var(--lime)}
.pc-vip .pc-fig b{color:var(--on-deep);font-size:32px}
.pc-vip .pc-fig span{color:var(--on-deep-sec)}
.pc-vip .ws-check li{color:var(--on-deep-body)}
.pc-vip .ws-check li::before{background:rgba(232,240,216,.14);border-color:rgba(232,240,216,.38)}
.pc-vip .ws-check li::after{border-color:var(--sage)}
.ws-fineprint{font-size:14px;line-height:1.6;color:var(--text-sec);margin-top:32px;max-width:470px}

/* ---------- garantie ---------- */
.ws-guarantee{background:var(--navy);padding:96px 0}
.ws-guarantee h2{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.5px;color:var(--on-deep);margin-top:14px}
.ws-guarantee p{font-size:18px;line-height:1.6;color:var(--on-deep-body);margin-top:16px;max-width:600px}

/* ---------- reviews (de wall van de homepage, ongewijzigd) ---------- */
.ws-reviews .sec-head{max-width:760px}
.ws-reviews .qcard p{font-size:14px}

/* ---------- locatie ---------- */
.ws-location{background:var(--cream)}
.ws-location h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--navy);margin:14px 0 12px}
.ws-location p{font-size:16px;line-height:1.65;color:var(--text);max-width:540px}
.ws-location .eyebrow{display:block}
.ws-addr{font-family:var(--font-brand);font-size:14px;font-weight:600;color:var(--navy);margin-top:16px;line-height:1.6}
.ws-maplink{display:inline-block;margin-top:16px;font-family:var(--font-brand);font-size:14px;font-weight:600;color:var(--navy);border-bottom:1.5px solid var(--navy);padding-bottom:2px}

/* ---------- terugverdienblok ---------- */
.ws-roi{background:var(--cream)}
.pb-board .roi-cards{grid-template-columns:1.2fr 1fr}
.pb-board .rv-u{font-size:24px;font-weight:600}
.pb-board .rc .rs{font-family:var(--font-text);font-size:13px;color:var(--text-sec);margin-top:8px}
.pb-board .rc.primary .rs{color:var(--on-deep-sec)}
.pb-board .rc.primary .rv{color:var(--lime)}

/* ---------- faq ---------- */
.ws-faq{background:var(--cream)}
.ws-crosslink{border-top:1px solid rgba(255,255,255,.16);padding-top:16px;margin-top:4px}
/* Ch1 wet 3 en 4: lime is nooit tekst. Op de navy aside is de link cream met onderlijn. */
.ws-crosslink a{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---------- afsluiter ---------- */
.ws-final{background:var(--navy-deep);padding:96px 0}
.ws-final h2{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.6px;color:var(--on-deep);margin-top:14px;line-height:1.1;text-wrap:balance}
.ws-final p{font-size:18px;line-height:1.55;color:var(--on-deep-body);margin-top:16px;max-width:600px}

/* ---------- sticky ---------- */
.ws-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.14);transform:translateY(110%);transition:transform .4s var(--ease);display:none}
.ws-sticky.on{transform:translateY(0)}
.ws-sticky-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.ws-sticky-txt b{display:block;font-family:var(--font-brand);font-weight:700;font-size:20px;color:var(--on-deep);line-height:1.1;font-variant-numeric:tabular-nums}
.ws-sticky-txt span{display:block;font-family:var(--font-brand);font-size:12px;color:var(--on-deep-sec);margin-top:2px}
.ws-sticky .btn{flex-shrink:0}

/* ---------- logo-marquee ---------- */
.ws-wall{padding:56px 0;background:var(--cream)}
.ws-wall .woc-row:hover .woc-track{animation-play-state:paused}

/* ---------- overzicht ---------- */
.ow-hero{padding:132px 0 80px}
.ow-what{background:var(--cream)}
.ow-editions{background:var(--sand)}
.ow-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.ow-card{background:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column}
.ow-card h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--navy);margin-top:12px;line-height:1.15}
.ow-line{font-size:16px;line-height:1.6;color:var(--text);margin-top:12px;max-width:470px}
.ow-meta{list-style:none;margin:20px 0 24px;display:grid;gap:8px;border-top:1px solid var(--border);padding-top:16px}
.ow-meta li{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline}
.ow-meta span{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-sec)}
.ow-meta b{font-family:var(--font-text);font-size:14px;font-weight:600;color:var(--navy);line-height:1.45}
.ow-card .btn{align-self:flex-start;margin-top:auto}

/* ---------- laptop ---------- */
@media(max-width:1024px){
  .wsh-inner{grid-template-columns:1fr;gap:40px}
  .wsh h1{font-size:40px}
  .ws-st-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .ws-st-v{font-size:40px}
  .ws-build-grid,.ws-two-lists,.ws-prob-grid{grid-template-columns:1fr;gap:32px}
  .ws-vgrid,.ws-bonuses{grid-template-columns:1fr 1fr}
  .ws-trainers .tmr-roster{grid-template-columns:1fr 1fr}
  .gsc-item{width:360px}
}

/* ---------- telefoon ---------- */
@media(max-width:768px){
  .ws-wall{padding:40px 0}
  .wsh{padding:100px 0 48px}
  .wsh h1{font-size:32px;letter-spacing:-.5px;max-width:none}
  /* 20px is de ondergrens van Montserrat (ch2), dus de belofte stopt daar en
     wordt niet kleiner gezet om ruimte te winnen. */
  .wsh-promise{font-size:20px;letter-spacing:-.2px;max-width:none;margin-top:12px}
  .wsh-facts{margin-top:16px;gap:6px}
  .wsh-facts li{grid-template-columns:56px 1fr;gap:10px}
  .wsh-facts span{font-size:11px;letter-spacing:1.2px}
  .wsh-facts b{font-size:14px}
  .cta-row{margin-top:18px}
  .cta-row .btn{width:100%;justify-content:space-between}
  .wsh-trust{margin-top:14px;font-size:12px}
  .wsh-gline{margin-top:16px;font-size:13px}
  .wsh-nocode{margin-top:10px;padding:6px 12px;font-size:12px;letter-spacing:.4px}
  .pad{padding:64px 0}
  .ws-stats{padding:40px 0}
  .ws-st-grid{grid-template-columns:1fr;gap:24px}
  .ws-st-v{font-size:36px}
  .ws-st p{max-width:none;font-size:14px}
  .ws-lead{font-size:16px}
  .ws-two,.ws-vgrid,.ws-bonuses,.ws-price-grid,.ow-grid,.ws-learn-list,.ws-inc-list{grid-template-columns:1fr}
  .pb-board .roi-cards{grid-template-columns:1fr;gap:12px}
  .pb-board .rc{padding:20px}
  .ws-trainers{padding:64px 0}
  .ws-trainers .tmr-roster{grid-template-columns:1fr 1fr}
  .ws-guarantee{padding:56px 0}
  .ws-guarantee h2{font-size:24px}
  .ws-final{padding:64px 0}
  .ws-final h2{font-size:28px}
  .pg-row{grid-template-columns:64px 1fr;gap:16px}
  .pc{padding:24px}
  .pc-fig b{font-size:40px}
  .ws-check li,.ws-dot li,.ws-cross li,.ws-card p,.ws-turn{font-size:16px}
  .ws-sticky{display:block}
  body.has-sticky{padding-bottom:76px}
  .ws-bon-head{font-size:20px}
  .gsc{scroll-padding-inline:22px}
  .gsc-track{gap:16px;padding:0 22px}
  .gsc-item{width:280px}
  .ws-photos{padding-bottom:48px}
  .ow-meta li{grid-template-columns:1fr;gap:2px}
}
@media(max-width:420px){
  .ws-sticky-txt b{font-size:18px}
  .ws-sticky .btn{font-size:13px;padding:11px 12px 11px 18px}
}

/* ch12: wie beweging uit heeft, krijgt geen beweging. */
@media(prefers-reduced-motion:reduce){
  .ws-sticky{transition:none}
  .ws-wall .woc-track{animation:none}
  .gsc{scroll-behavior:auto}
}

/* Luma injecteert checkout-button.css in de head op het moment dat het script laadt,
   dus na onze stylesheet. Met gelijke specificiteit wint hun regel en worden onze CTA's
   donkergrijze pillen. Deze blokken hebben een klasse meer en winnen daarom altijd. */
a.luma-checkout--button.btn{font-family:inherit;font-size:14px;font-weight:600;padding:13px 14px 13px 22px;border-radius:100px;text-decoration:none;box-shadow:none}
a.luma-checkout--button.btn-primary{background-color:var(--lime);color:var(--navy);border:1px solid var(--lime-5)}
a.luma-checkout--button.btn-primary:hover{background-color:var(--lime-4);color:var(--navy);box-shadow:none}
a.luma-checkout--button.btn-ghost{background-color:transparent;color:var(--navy);border:1.5px solid var(--border-dark);padding:12px 22px}
a.luma-checkout--button.btn-ghost:hover{background-color:transparent;color:var(--navy);border-color:var(--navy);box-shadow:none}
.pc-vip a.luma-checkout--button.btn-ghost{color:var(--on-deep);border-color:rgba(255,255,255,.3)}
.pc-vip a.luma-checkout--button.btn-ghost:hover{color:var(--on-deep);border-color:var(--on-deep)}
.ws-sticky a.luma-checkout--button.btn-primary{font-size:14px}

/* ---------- correcties uit de audit van 14 sep 2026 ----------
   Elke regel hier is een gemeten fout, niet een smaakkeuze. */

/* Ch1 wet 3, lime telt maximaal twee elementen per scherm. In de hero staan de
   navknop en de ticketknop al; de eyebrow op donker gaat daarom naar de stille
   variant, die kapittel 2 expliciet toestaat. Zelfde reden voor de VIP-tag en
   het lime icoontje in de geluidsknop. */
.wsh .eyebrow.on-dark,.ws-final .eyebrow.on-dark,.ws-guarantee .eyebrow.on-dark{color:var(--on-deep-sec)}
.pc-vip .pc-tag{color:var(--on-deep-sec)}
.wsh .hvid-sound svg{stroke:var(--on-deep)}

/* Ch3, de maat: een alinea stopt op 540px, ook de deck onder een sectiekop.
   styles.css zet .sec-head p op 760 voor de homepage; hier geldt de prose-breedte. */
.wsh ~ section .sec-head p{max-width:540px}
/* Een uitgelichte review is een pull quote en mag de blokbreedte nemen, niet meer. */
.ws-reviews .featured p{max-width:760px}

/* Ch2: mono staat niet op een cream marketingpagina, en 11px zakt onder de
   12px-ondergrens. Beide regels kwamen mee uit de homepage-component. */
.ws-trainers .tmr-meas{font-family:var(--font-brand);font-size:12px;color:var(--text-sec)}
.ws-roi .note{font-family:var(--font-text);color:var(--text-sec)}

/* Ch2 wet 6: 12px is de ondergrens, ook voor bijschriften en kickers. */
.wsh-cap,.ws-shot figcaption,.gsc-item figcaption,.wsh-gline span{font-size:12px}

/* Ch3, de maat op 14px: 470px. De FAQ-kolom is 620 breed, dus de alinea krijgt een plafond. */
.ws-faq .faq-a p,.ws-faq .aside p{max-width:470px}

/* Het terugverdiengetal is het ene lime cijfer op navy dat kapittel 2 per pagina
   toestaat (metric colorplay). Het label eromheen blijft daarom stil. */
.pb-board .rc.primary .rl{color:var(--on-deep-sec)}

/* ---------- correcties uit de CRO-review van 14 sep 2026 ---------- */

/* Werkgever-blok bij de prijs. Alleen feiten die in de invite staan: de factuur
   uit Luma en het certificaat. Geen teamkorting, want die bestaat niet. */
.ws-employer{background:#fff;border-radius:24px;padding:28px;margin-top:32px;max-width:760px}
.ws-employer h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.2px;color:var(--navy);margin-bottom:20px}
.ws-employer .ws-check li{font-size:16px}

/* De drie videokaarten kostten op 400px een heel scherm terwijl er nog niets in
   staat. Op de telefoon worden het snapkaarten naast elkaar, met een regel die
   zegt wat er komt. Op laptop blijft het een rij van drie. */
.ws-vhint{margin-top:20px}

/* De cookiebanner dekte op 400px het onderste kwart van het eerste scherm af,
   inclusief de garantie. Op deze pagina's is hij een strook van twee regels. */
@media(max-width:768px){
  .cookie-banner{bottom:0;left:0;right:0;border-radius:16px 16px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -8px 24px rgba(9,24,44,.3)}
  .cookie-banner p{font-size:11px;line-height:1.4;min-width:0;flex:1 1 100%}
  .cookie-banner .cb-actions{width:100%;justify-content:flex-end;gap:6px}
  .cookie-banner button{padding:8px 14px;font-size:11px}
  .cb-link{padding:8px 6px!important}
  .ws-vgrid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin:0 -22px;padding:0 22px;scrollbar-width:none}
  .ws-vgrid::-webkit-scrollbar{display:none}
  .ws-vgrid .ws-vslot{flex:0 0 260px;scroll-snap-align:start}
  .ws-employer{padding:24px;margin-top:24px}
}
/* Het slotscherm draagt al de laatste ticketknop; de eyebrow van het subscribe-blok
   gaat daarom naar de stille variant. */
.ws-subscribe .eyebrow{color:var(--on-deep-sec)}

/* ---------- tweede ronde CRO-besluiten (14 sep) ---------- */

/* De videorij is compact en met een attribuut uit te zetten:
   zet data-videos="none" en de hele sectie verdwijnt, zonder code te knippen. */
.ws-vids[data-videos="none"]{display:none}
.ws-vids{padding-top:48px;padding-bottom:48px}
.ws-vids .sec-head{margin-bottom:28px}
.ws-vids .ws-vslot{aspect-ratio:16/9}

/* Drie routes naast elkaar. Nieuwe copy, zonder cijfers die we niet hebben. */
.ws-compare{background:var(--cream)}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cmp-c{background:#fff;border-radius:24px;padding:24px}
.cmp-c h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.2px;color:var(--text-sec);margin-bottom:12px}
.cmp-c p{font-size:16px;line-height:1.6;color:var(--text-sec);max-width:540px}
.cmp-ours{background:var(--navy-deep)}
.cmp-ours h3{color:var(--on-deep)}
.cmp-ours p{color:var(--on-deep-body)}

@media(max-width:1024px){ .cmp{grid-template-columns:1fr} }
@media(max-width:768px){
  .ws-vids{padding-top:40px;padding-bottom:40px}
  .cmp-c{padding:20px}
  .cmp-c p{font-size:16px}
}

/* De cookiebanner is op de telefoon een strook van een regel met twee knoppen.
   De instellingen blijven bereikbaar via de link in de footer. */
@media(max-width:768px){
  .cookie-banner #cbSettings{display:none}
  .cookie-banner p{flex:1 1 100%}
}

/* ---------- inkorting tot vijftien schermen (14 sep, tweede ronde) ---------- */

/* Curriculum en volledige tijdlijn achter een toggle. Dicht op elk scherm:
   de vijf bullets en de vier blokken zijn het antwoord, de rest is bewijs. */
.ws-more{margin-top:24px;border-top:1px solid var(--border);padding-top:16px}
.ws-more>summary{list-style:none;cursor:pointer;font-family:var(--font-brand);font-size:14px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:8px;padding:8px 0}
.ws-more>summary::-webkit-details-marker{display:none}
.ws-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:-4px}
.ws-more[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.ws-more>summary:hover{color:var(--lime-7)}
.ws-more .ws-check,.ws-more .pg{margin-top:16px}
.ws-more .pg{border-top:1px solid var(--border)}

/* Niet voor jou: twee regels, grijs, geen kaart. */
.ws-notfor{margin-top:20px;font-size:16px;line-height:1.6;color:var(--text-sec);max-width:540px}
.ws-notfor b{color:var(--text-sec);font-weight:600}

/* Garantie als kaart onder de prijs, niet meer als eigen sectie. */
.ws-gcard{background:var(--navy);border-radius:24px;padding:28px;margin-top:24px;max-width:760px}
.ws-gcard .eyebrow{display:block;color:var(--on-deep-sec);margin-bottom:10px}
.ws-gcard h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--on-deep)}
.ws-gcard p{font-size:16px;line-height:1.6;color:var(--on-deep-body);margin-top:12px;max-width:540px}

/* Waar en wanneer als een regel bij de prijs. */
.ws-where{font-family:var(--font-brand);font-size:14px;font-weight:600;color:var(--navy);margin-top:24px;line-height:1.6;max-width:760px}
.ws-where a{text-decoration:underline;text-underline-offset:3px}

/* Bonussen: een rij van drie compacte kaarten. */
.ws-bonuses .bn{padding:20px}
.ws-bonuses h4{font-size:16px}
.ws-bonuses p{font-size:14px;margin-top:6px}

/* Reviewkaarten compacter: geen lege ruimte onder een korte quote. */
.ws-reviews .qgrid{grid-template-columns:repeat(3,1fr);align-items:start}
.ws-reviews .qcard{padding:20px}
.ws-reviews .featured{padding:28px}

@media(max-width:768px){
  .ws-gcard,.ws-employer{padding:22px}
  .ws-reviews .featured{padding:22px}
  .ws-where{font-size:13px}
}

/* ---------- compacter op de telefoon: de pagina moest van 22 naar 15 schermen ---------- */

/* Drie trainers en drie bonussen staan naast elkaar in een scroller in plaats van
   onder elkaar. Zelfde patroon als de galerij, dus geen nieuw gebaar. */
.gsc-sm .gsc-track{align-items:stretch}
.gsc-sm .tr-card,.gsc-sm .tmr-m,.gsc-sm .bn{flex:0 0 260px;scroll-snap-align:start}
.gsc-sm .tmr-roster{display:flex;gap:16px}
.gsc-sm .ws-bonuses{display:flex;gap:16px;margin-top:0}

/* Drie routes als rijen, niet als kaarten: de vergelijking leest sneller. */
.cmp{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--border);max-width:760px}
.cmp-c{background:transparent;border-bottom:1px solid var(--border);border-radius:0;padding:16px 0;display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline}
.cmp-c h3{font-family:var(--font-text);font-weight:600;font-size:16px;letter-spacing:0;color:var(--text-sec);margin:0}
.cmp-c p{font-size:16px;line-height:1.55;color:var(--text)}
.cmp-ours{background:transparent}
.cmp-ours h3{color:var(--navy)}
.cmp-ours p{color:var(--text);font-weight:600}
.sec-head-2{margin-top:48px}

/* Twee uitkomstkaarten naast elkaar, ook op de telefoon: ze zijn kort. */
.pb-board .roi-cards{grid-template-columns:1fr 1fr;gap:12px}
.roi .controls{padding:24px}

/* VIP is een strook onder de standaardkaart, geen tweede volle kaart. */
.pc-vip{padding:20px 24px}
.pc-vip .pc-fig{margin:8px 0 14px}
.pc-vip .ws-check{gap:8px}

@media(max-width:768px){
  .cmp-c{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .cmp-c h3{font-size:14px}
  .cmp-c p{font-size:16px}
  .sec-head-2{margin-top:36px}
  .pb-board .roi-cards{gap:10px}
  .pb-board .rc{padding:16px}
  .pb-board .rc .rv{font-size:28px;margin-top:8px}
  .pb-board .rv-u{font-size:18px}
  .gsc-sm .tr-card,.gsc-sm .tmr-m,.gsc-sm .bn{flex:0 0 240px}
  .tmr .tmr-m img{width:64px;height:64px}
  .faq .aside{padding:22px}
  .faq .aside p{margin:8px 0 12px}
  /* De footer is op deze drie pagina's twee kolommen in plaats van vijf stapels. */
  footer .ft-top{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  footer .ft-brand{grid-column:1 / -1}
  .cta-illus .inner{padding-top:40px;padding-bottom:40px}
}

/* Programma onder de galerij: een sectie voor de dag, niet twee. */
.ws-day{margin-top:40px}
.ws-day .cta-row{margin-top:28px}

/* Bonussen staan nu in het prijsblok, als onderdeel van de waarde. */
.ws-bon-row{margin-top:32px}
.ws-bon-row .ws-bon-head{margin-top:0;margin-bottom:16px;font-size:20px}
.ws-fine{display:inline-block;margin-top:8px;font-family:var(--font-text);font-size:13px;font-weight:400;color:var(--text-sec);line-height:1.55}

/* Reviewkaarten in dezelfde scroller-vorm op de telefoon. De featured blijft staan. */
@media(max-width:768px){
  .ws-reviews .qgrid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin:0 -22px;padding:0 22px;scrollbar-width:none}
  .ws-reviews .qgrid::-webkit-scrollbar{display:none}
  .ws-reviews .qcard{flex:0 0 280px;scroll-snap-align:start}
  /* De aside bij de FAQ is op de telefoon twee regels, geen navy kaart. */
  .ws-faq .aside{background:transparent;color:var(--text);padding:20px 0 0;border-top:1px solid var(--border);border-radius:0;position:static}
  .ws-faq .aside h3{color:var(--navy);font-size:16px}
  .ws-faq .aside p{color:var(--text-sec);margin:8px 0 0}
  .ws-faq .aside a{color:var(--navy);text-decoration:underline}
  .ws-crosslink{border-top:none;padding-top:0;margin-top:8px}
  .ws-crosslink a{color:var(--navy)}
  .ws-st p{font-size:13px}
  .ws-st-grid{gap:18px}
  .pc{padding:24px}
  .ws-gcard{padding:20px}
  .ws-gcard h3{font-size:20px}
  .ws-employer{padding:0;background:transparent;margin-top:20px}
  .ws-employer h3{font-size:16px;margin-bottom:12px}
}

/* Laatste stap naar vijftien schermen. Kapittel 3 laat onder 768px elke maat een
   stap op de ladder zakken; dat geldt ook voor de ruimte onder een sectiekop
   (48 naar 32) en voor de padding binnen de FAQ-rijen. */
@media(max-width:768px){
  .wsh ~ section .sec-head{margin-bottom:32px}
  .sec-head-2{margin-top:32px}
  .ws-faq .faq-q{padding:16px 20px}
  .ws-faq .faq-a p{padding:0 20px 16px}

  .ws-reviews .rev-badge{margin-bottom:16px}
  .ws-day{margin-top:28px}
  .gsc-hint{margin-top:14px}
  .roi .chead{margin-bottom:16px}
  .ws-roi .cmp{margin-top:-8px}
  .pc-fig b{font-size:36px}
  .gsc-item figcaption,.ws-shot figcaption{margin-top:8px}
}

/* Correcties na de compactiemeting. */
/* Ch2: Montserrat blijft op of boven 20px, ook in de compacte FAQ-aside. */
.ws-faq .aside h3{font-size:20px}
/* Alleen op de telefoon staat de aside op cream; daar wordt de link navy.
   Op laptop blijft de navy kaart met de witte link uit styles.css. */
@media(max-width:768px){
  .ws-faq .aside .faq-mail{color:var(--navy);text-decoration:underline}
  .ws-employer h3{font-size:20px}
}
/* Ch3: de maat volgt de fontgrootte, 470px bij 14 en 15px. */
.ws-notfor{max-width:540px}
.ws-where{max-width:470px}

/* Laatste maatstappen op de telefoon, alle binnen de ladder (een stap lager). */
@media(max-width:768px){
  .wsh{padding-bottom:40px}
  .ws-stats{padding:32px 0}
  .ws-wall{padding:32px 0}
  .gsc-item{width:260px}
  .ws-day{margin-top:24px}
  .ws-bon-row{margin-top:20px}
  .pg-row{padding:10px 0}
  .ws-more{margin-top:20px;padding-top:12px}
  .cta-illus .inner{padding-top:32px;padding-bottom:32px}
}

/* ================= herstructurering na Stefan's kritiek (14 sep) ================= */

/* Ch1 wet 1: het blok waar het werk zichtbaar wordt staat op navy-1, de grond die
   de wet aanwijst voor waar gewerkt wordt. Kaarten erop blijven wit, hairlines
   stappen naar ramp-navy-3. */
.ws-build{background:#EEF2F8}
.ws-build .ws-more{border-color:#ACBCD0}

/* Voor wie, met de niveaucurve ernaast. */
.ws-forwho{background:var(--cream)}
.ws-who-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.ws-who{background:#fff;border-radius:24px;padding:28px;border-top:4px solid var(--lime-5)}
.ws-who h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.2px;color:var(--navy);margin-bottom:16px}
.ws-level{margin:0}
.ws-level svg{width:100%;height:auto;border-radius:24px;display:block}
.ws-level figcaption{font-family:var(--font-brand);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-sec);margin-top:10px}

/* Vergelijking: links vandaag, rechts na deze dag. */
.ws-compare{background:var(--cream)}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp2-c{border-radius:24px;padding:28px}
.cmp2-c h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.2px;margin-bottom:16px}
.cmp2-now{background:#F6F1E6}
.cmp2-now h3{color:var(--text-sec)}
.cmp2-then{background:var(--navy-deep)}
.cmp2-then h3{color:var(--on-deep)}
.cmp2-then .ws-check li{color:var(--on-deep-body)}
.cmp2-then .ws-check li::before{background:rgba(232,240,216,.14);border-color:rgba(232,240,216,.38)}
.cmp2-then .ws-check li::after{border-color:var(--sage)}

/* Sfeergalerij: twee rijen die tegengesteld lopen. */
.ws-marquee{background:var(--cream);padding:56px 0}
.ws-marquee .eyebrow{display:block;margin-bottom:24px}
.mq{overflow:hidden;width:100%;margin-bottom:16px}
.mq:last-child{margin-bottom:0}
.mq-track{display:flex;gap:16px;width:max-content}
.mq-l{animation:mq-left 46s linear infinite}
.mq-r{animation:mq-right 54s linear infinite}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq:hover .mq-track,.mq.paused .mq-track{animation-play-state:paused}
.mq-item{flex:0 0 340px}
.mq-item img,.mq-item .ws-vslot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px}
.mq-vid[data-videos="none"]{display:none}

/* Offer-stack: alles in het ticket als een lijst, prijs en garantie sluiten af. */
.ws-price{background:var(--sand)}
.stack{background:#fff;border-radius:24px;padding:28px;max-width:760px}
.stack-list{margin-bottom:24px}
.stack-list li b{color:var(--navy);font-weight:600}
.stack-foot{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.stack-price b{display:block;font-family:var(--font-brand);font-weight:700;font-size:48px;letter-spacing:-1.4px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;margin-top:8px}
.stack-price span:last-child{display:block;font-family:var(--font-text);font-size:14px;color:var(--text-sec);margin-top:8px}
.stack-vip{border-top:1px solid var(--border);margin-top:24px;padding-top:24px}
.stack-vip .pc-tag{display:block;margin-bottom:16px}
.stack-vip .ws-check{margin-bottom:20px}
.stack-vip .ws-check li{font-size:15px}

/* Terugverdienblok: invoer boven, uitkomst onder. */
.pb-toggle{display:flex;background:var(--sage);border-radius:100px;padding:4px;margin-bottom:24px}
.pb-toggle button{flex:1;padding:9px;border:none;background:none;font-family:var(--font-brand);font-weight:600;font-size:12px;color:var(--navy);border-radius:100px;cursor:pointer;transition:all .3s var(--ease)}
.pb-toggle button.active{background:var(--lime-2);color:var(--navy);box-shadow:inset 0 0 0 1px var(--lime-5)}
.pb-board{display:grid;gap:20px}
.pb-board .roi-cards{grid-template-columns:1fr 1fr 1.2fr;margin-bottom:0}

@media(max-width:1024px){
  .ws-who-grid{grid-template-columns:1fr;gap:28px}
  .cmp2{grid-template-columns:1fr}
}
@media(max-width:768px){
  .ws-marquee{padding:40px 0}
  .mq-item{flex:0 0 240px}
  .ws-who,.cmp2-c,.stack{padding:20px}
  .stack-price b{font-size:36px}
  .stack-foot{gap:16px}
  .pb-board .roi-cards{grid-template-columns:1fr 1fr}
  .pb-board .rc.primary{grid-column:1 / -1}
}
/* Ch12: wie beweging uit heeft, krijgt een gewone scroller. */
@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;scroll-snap-type:x mandatory}
  .mq-track{animation:none}
  .mq-item{scroll-snap-align:start}
}

/* Offer-stack, variant A met labels rechts. */
.stack-a{display:grid;gap:0;list-style:none}
.stack-a li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--border);font-size:16px;line-height:1.55;color:var(--text);max-width:none;padding-left:0}
.stack-a li::before,.stack-a li::after{display:none}
.stack-a li:last-child{border-bottom:none}
.stack-a li b{font-family:var(--font-brand);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--label);white-space:nowrap}
.stack-sub{font-family:var(--font-text);font-weight:600;font-size:16px;color:var(--navy);margin:20px 0 16px}
.ws-prob{margin-bottom:20px}
.ws-level-top{font-family:var(--font-text);font-weight:600;font-size:16px;line-height:1.5;color:var(--navy);margin-bottom:16px;max-width:540px}
.mq-h{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.6px;line-height:1.1;color:var(--navy);margin-top:14px}
@media(max-width:768px){
  .mq-h{font-size:28px}
  .stack-a li{grid-template-columns:1fr;gap:4px;padding:10px 0}
  .stack-a li b{font-size:11px}
}

/* ================= ronde 3 ================= */

/* 1. Vergelijkingsblok: rechts groen, links grijs.
   Rood kan hier niet: kapittel 1 wet 5 houdt rood voor fouten en verbiedt rood
   als versiering. Het verschil tussen grijze kruisjes en groene vinkjes op een
   groene lijn doet hetzelfde werk. */
.cmp2-then{border-top:4px solid var(--green)}
.cmp2-now{border-top:4px solid var(--border-dark)}
.cross-hard li::before{background:#EDE6D7;border-color:var(--border-dark)}
.cross-hard li::after{opacity:.9}

/* 2. Beide rijen bewegen, met een duidelijk verschil in snelheid. */
.mq-l{animation-duration:34s}
.mq-r{animation-duration:52s}

/* 4. Het bouwblok en het programma staan op navy, niet op het koele navy-1. */
.ws-build{background:var(--navy)}
.ws-build .sec-head h2{color:var(--on-deep)}
.ws-build .sec-head .eyebrow{color:var(--on-deep-sec)}
.ws-build .ws-check li{color:var(--on-deep-body)}
.ws-build .ws-check li::before{background:rgba(232,240,216,.14);border-color:rgba(232,240,216,.38)}
.ws-build .ws-check li::after{border-color:var(--sage)}
.ws-build .ws-note{color:var(--on-deep-sec)}
.ws-build .ws-more{border-color:rgba(255,255,255,.16)}
.ws-build .ws-more>summary{color:var(--on-deep)}
.ws-build .ws-more>summary::after{border-color:var(--on-deep)}
.ws-build .ws-more>summary:hover{color:var(--lime)}
.ws-program{background:var(--navy)}
.ws-program .sec-head h2{color:var(--on-deep)}
.ws-program .sec-head .eyebrow{color:var(--on-deep-sec)}
.ws-program .pg{border-color:rgba(255,255,255,.16)}
.ws-program .pg-row{border-color:rgba(255,255,255,.16)}
.ws-program .pg-t{color:var(--gold)}
.ws-program .pg-w{color:var(--on-deep-body)}

/* 5. Taalvlaggen naast de rol, klein en met een hairline zodat wit niet wegvalt. */
.tmr-flags{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.tmr-flags .flag{width:16px;height:11px;border-radius:2px;display:block}

/* 6. VIP krijgt een gouden hairline, de tag in gold-ink omdat gold als tekst
   onder 3:1 zakt (kapittel 1, verboden vijf). */
.stack-vip{border:1px solid var(--gold);border-radius:20px;padding:20px;margin-top:24px}
.stack-vip .pc-tag{color:var(--label)}

/* 7. De hero-samenvatting is op de telefoon een regel per feit. */
@media(max-width:768px){
  .wsh-facts li{grid-template-columns:1fr;gap:0}
  .wsh-facts span{display:none}
  .wsh-facts b{font-size:15px;line-height:1.5}
  .wsh-facts{gap:2px;margin-top:14px}
}
.fact-short{display:none}
@media(max-width:768px){.fact-long{display:none}.fact-short{display:block}}
/* Ch3: ook een regel in de offer-stack stopt op de maat van 540px. */
.stack-a li>span{max-width:540px}

/* ================= de vijf stages ================= */

/* Stage 1 staat direct onder de cijferstrook: een kop en een regel, verder niets.
   Geen zichtbaar stage-label, de volgorde doet het werk. */
.ws-stage1{background:var(--cream);padding-top:64px;padding-bottom:16px}
.ws-stage1 h2{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.5px;color:var(--navy);line-height:1.15}
.ws-stage1 p{font-size:18px;line-height:1.55;color:var(--text);margin-top:12px;max-width:610px;font-weight:600}

/* Stage 2 opent met dezelfde vorm: kop, regel, drie oorzaken. */
.ws-compare{padding-top:32px}

/* Stage 3: de drie handelingen boven de opleverlijst. */
.ws-s3{margin-bottom:32px}
.ws-build .ws-s3 li{color:var(--on-deep-body)}
.ws-build .ws-s3 li::before{background:var(--lime-5)}
.ws-subhead{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.4px;color:var(--navy);margin-bottom:20px}
.ws-build .ws-subhead{color:var(--on-deep)}

/* Stage 4: de brug boven het bewijsblok. */
.ws-stage4{background:var(--cream);padding-bottom:0}
.ws-stage4 .sec-head{margin-bottom:0}
.ws-trainers{padding-top:40px}

/* Stage 5: het manager-blok staat los, na de rekensom. */
.ws-manager{background:var(--cream);padding-top:48px;padding-bottom:48px}
.ws-manager .ws-employer{margin-top:0}

@media(max-width:768px){
  .ws-stage1{padding-top:48px}
  .ws-stage1 h2{font-size:24px}
  .ws-stage1 p{font-size:16px}
  .ws-subhead{font-size:20px}
  .ws-manager{padding-top:40px;padding-bottom:40px}
}

/* ================= ronde 4: samenhang ================= */

/* 9. Stage 1 is een rustig statement: kop, twee regels, veel lucht, geen kaart.
   Het probleemblok eronder heeft bullets, dus de twee lijken niet op elkaar. */
.ws-stage1{background:var(--cream);padding:96px 0 64px;text-align:left}
.ws-stage1 h2{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.6px;color:var(--navy);line-height:1.1;max-width:16ch}
.ws-stage1 p{font-size:18px;line-height:1.6;color:var(--text);margin-top:20px;max-width:540px;font-weight:400}
.ws-stage1-2{color:var(--text-sec)!important;margin-top:12px!important}

/* 8. Vinkjes zijn overal lime, ook in de rechterkolom van de vergelijking. */
.ws-check li::before{background:var(--lime-2);border-color:var(--lime-5)}
.ws-check li::after{border-color:var(--lime-ink)}
.cmp2-then .ws-check li::before,.cmp2-yes .ws-check li::before{background:var(--lime-2);border-color:var(--lime-5)}
.cmp2-then .ws-check li::after,.cmp2-yes .ws-check li::after{border-color:var(--lime-ink)}
.ws-build .ws-check li::before{background:rgba(222,254,179,.18);border-color:rgba(222,254,179,.45)}
.ws-build .ws-check li::after{border-color:var(--lime)}
.cmp2-then{border-top:4px solid var(--lime-5)}
.cmp2-yes{background:#fff;border-top:4px solid var(--lime-5)}
.cmp2-no{background:#F6F1E6;border-top:4px solid var(--border-dark)}
.cmp2-yes h3{color:var(--navy)}
.cmp2-no h3{color:var(--text-sec)}

/* 5. De niveaucurve is een eigen sectie, zonder label in het beeld. */
.ws-level-sec{background:var(--cream);padding-top:0}
.ws-level-sec .sec-head{margin-bottom:24px}
.ws-level-sec .ws-level svg{border-radius:24px}
.ws-forwho{padding-bottom:48px}

/* 4. De garantie is een rustige kaart op cream, geen titel die schreeuwt. */
.ws-guarantee{background:var(--cream);padding:64px 0}
.ws-guarantee .gcard{background:var(--navy-deep);border-radius:24px;padding:40px;max-width:760px}
.ws-guarantee .gcard .eyebrow{display:block;color:var(--on-deep-sec);margin-bottom:16px}
.ws-guarantee .gcard p{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.35;letter-spacing:-.4px;color:var(--on-deep);max-width:600px}

/* 6. Beide marquee-rijen lopen dezelfde kant op, even snel. */
.mq-l,.mq-r{animation:mq-left 40s linear infinite}
.mq-r{animation-direction:normal}

/* 2. Het programma draagt alleen zijn eigen kop. */
.ws-program .sec-head{margin-bottom:24px}

@media(max-width:768px){
  .ws-stage1{padding:64px 0 48px}
  .ws-stage1 h2{font-size:28px}
  .ws-stage1 p{font-size:16px}
  .ws-guarantee{padding:48px 0}
  .ws-guarantee .gcard{padding:24px}
  .ws-guarantee .gcard p{font-size:20px}
}
/* De stage-3-regel staat op het navy bouwblok: navy op navy was onleesbaar. */
.ws-build .ws-lead{color:var(--on-deep)}

/* ---------- coherentie-pass ronde 4 ---------- */
/* Het bijschrift onder de curve was een lange regel in kapitalen; dat leest zwaar
   en het is een zin, geen label. */
.ws-level-sec .ws-level figcaption{font-family:var(--font-text);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--text-sec);line-height:1.6;max-width:540px;margin-top:16px}
/* Het bouwblok en het programma staan tegen elkaar aan. Een stap op de navy-ladder
   (ch1 wet 7) houdt ze uit elkaar zonder een extra lijn of rand. */
.ws-program{background:var(--navy-deep)}
.ws-program .pg,.ws-program .pg-row{border-color:rgba(255,255,255,.14)}

/* ================= ronde 5 ================= */

/* 3. Vinkjes in de offer-stack, lime zoals overal. Stefans keuze. */
.stack-a li{padding-left:30px;position:relative}
.stack-a li::before{content:"";display:block;position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:100px;background:var(--lime-2);border:1px solid var(--lime-5)}
.stack-a li::after{content:"";display:block;position:absolute;left:5px;top:19px;width:8px;height:4px;border-left:2px solid var(--lime-ink);border-bottom:2px solid var(--lime-ink);transform:rotate(-45deg)}
.stack-a li:first-child::before{top:8px}
.stack-a li:first-child::after{top:13px}

/* 3. De garantie-eyebrow in lime, en de programmatijden ook.
   BEWUSTE AFWIJKING van kapittel 1 wet 3 (lime telt maximaal twee elementen per
   scherm): het uurschema toont acht tot tien lime tijden op een scherm. Besluit
   Stefan, 15 september. */
.ws-guarantee .gcard .eyebrow{color:var(--lime)}
.ws-program .pg-t{color:var(--lime)}

/* 9. De toolrij: logo's even groot en kleiner dan onze eigen mark. */
.ws-tools{background:var(--cream);padding-top:0}
.ws-tools .eyebrow{display:block;margin-bottom:12px}
.ws-tools-line{font-family:var(--font-text);font-weight:600;font-size:18px;line-height:1.5;color:var(--navy);max-width:540px}
.tool-row{display:flex;align-items:center;gap:48px;flex-wrap:wrap;margin-top:24px}
.tool{height:28px;display:flex;align-items:center}
.tool img{height:100%;width:auto;max-width:220px;object-fit:contain}
.ws-tools-note{font-size:14px;color:var(--text-sec);margin-top:20px}

@media(max-width:768px){
  .tool-row{gap:28px;margin-top:20px}
  .tool{height:22px}
  .ws-tools-line{font-size:16px}
}
/* Het OpenAI-woordmerk staat met veel witruimte in zijn eigen canvas; zonder
   correctie is het merk drie keer kleiner dan het Claude-lockup ernaast. */
.tool-openai{overflow:visible}
.tool-openai img{height:195%}
/* De bonuskop in de stack is een tussenkop, geen regel met een vinkje. */
.stack-a li.stack-sep{padding-left:0;padding-top:20px;border-bottom:none}
.stack-a li.stack-sep::before,.stack-a li.stack-sep::after{display:none}
.stack-a li.stack-sep span{font-family:var(--font-text);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--navy)}

/* ================= ronde 6: c3 als basis ================= */

/* 1. Hero, cijfers en logo's vormen samen de donkere kop. De logomuur staat
   daaronder op cream, met de logo's in hun eigen kleur. */
[data-section="hero"],[data-section="proof"]{background:var(--navy-deep)}
[data-section="hero"]{padding-bottom:48px}
[data-section="proof"]{padding-top:24px;padding-bottom:40px}
[data-section="logos"]{background:var(--cream);padding-top:40px;padding-bottom:40px}
[data-section="logos"] .woc-logo img{filter:none;opacity:.82}

/* Het bouwblok is licht in deze opzet; de basisstijl kleurde de tekst voor navy,
   dus de override draagt het attribuut twee keer plus de klasse en wint. */
[data-section="build"]{background:var(--cream)}
[data-section="build"][data-section="build"].ws-build .sec-head h2,
[data-section="build"][data-section="build"].ws-build h3,
[data-section="build"][data-section="build"].ws-build .ws-subhead{color:var(--navy)}
[data-section="build"][data-section="build"].ws-build .sec-head p,
[data-section="build"][data-section="build"].ws-build p,
[data-section="build"][data-section="build"].ws-build li,
[data-section="build"][data-section="build"].ws-build .ws-lead{color:var(--text)}
[data-section="build"][data-section="build"].ws-build .ws-note{color:var(--text-sec)}
[data-section="build"][data-section="build"].ws-build .ws-check li::before{background:var(--lime-2);border-color:var(--lime-5)}
[data-section="build"][data-section="build"].ws-build .ws-check li::after{border-color:var(--lime-ink)}
[data-section="build"][data-section="build"].ws-build .ws-more{border-color:var(--border)}
[data-section="build"][data-section="build"].ws-build .ws-more>summary{color:var(--navy)}
[data-section="build"][data-section="build"].ws-build .ws-more>summary::after{border-color:var(--navy)}

/* 1. Het programma blijft navy. */
[data-section="programme"]{background:var(--navy)}

/* 3. De eyebrow van "What you build" in lime. Kapittel 2 zegt: eyebrow is gold op
   licht en lime op donker. Dit blok is licht, en rauw lime als tekst haalt geen
   3:1 (kapittel 1, verboden vijf). Daarom lime-ink, de inktvariant die wet 4
   expliciet toestaat. Op de donkere garantiekaart blijft het echte lime. */
[data-section="build"] .sec-head .eyebrow{color:var(--lime-ink)}

/* 10. Meer lucht tussen de drie trainerskaarten op desktop. */
@media(min-width:1025px){
  .ws-trainers .tmr-roster,.ws-trainers .gsc-track.tmr-roster{gap:48px}
  .ws-trainers .gsc-sm .tmr-m{flex:0 0 calc((100% - 96px) / 3)}
}
/* De hero draagt nu één metaregel in plaats van drie blokken. */
.wsh-meta{font-family:var(--font-text);font-weight:600;font-size:16px;line-height:1.5;margin-top:20px;max-width:540px;color:var(--on-deep)}
.wsh-cream .wsh-meta{color:var(--navy)}
@media(max-width:768px){.wsh-meta{font-size:15px;margin-top:16px}}
/* Drie deelnemersclips in een rij, 16:9, klik om af te spelen. */
.ws-vcard{margin:0}
.ws-vplay{width:100%;aspect-ratio:16/9;border-radius:20px;background:#0D2240;display:block;object-fit:cover}
@media(max-width:768px){
  .ws-vgrid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin:0 -22px;padding:0 22px;scrollbar-width:none}
  .ws-vgrid .ws-vcard{flex:0 0 280px;scroll-snap-align:start}
}
/* De AFW-hero volgt de ad-cover en staat op cream; de bewijsband eronder blijft
   navy-deep, zoals in c3. */
.wsh-cream[data-section="hero"]{background:var(--cream)}
.wsh-cream[data-section="hero"] .wsh-meta{color:var(--navy)}
/* Overzichtspagina: hero en cijferstrook vormen één doorlopend navy-deep blok,
   zoals c3 op de trackpagina's. Geen kleurnaad, en de hero sluit strak aan. */
.ow-hero{padding-bottom:32px}
.ow-hero + .ws-stats{background:var(--navy-deep);padding-top:16px;padding-bottom:48px}

/* ---------- ronde 7 ---------- */
/* 10. Trainerskaarten terug naar de maat van de homepage: geen scroller op
   desktop, drie kaarten van 256px zoals in de teamweergave daar. */
@media(min-width:1025px){
  .ws-trainers .gsc{overflow:visible}
  .ws-trainers .gsc-track.tmr-roster{display:grid;grid-template-columns:repeat(3,256px);gap:24px;width:auto}
  .ws-trainers .gsc-sm .tmr-m{flex:none;width:256px}

}
@media(max-width:1024px){
  .ws-trainers .gsc-sm .tmr-m{flex:0 0 240px}
  .ws-trainers .tmr-m img{width:166px;height:166px}
}
/* 10. De kicker boven de curve krijgt lucht, boven en onder. */
.ws-level-sec .sec-head .eyebrow{display:block;margin-top:24px;margin-bottom:24px}
.level-img{width:100%;height:auto;border-radius:24px;display:block}

/* 1. De beloftezin breekt waar de <br> staat, op elke breedte. */
.wsh-promise br{display:inline}
/* 7. Bonussen als drie kaarten: de waarde groot, de titel eronder. */
.bonus-block{margin-top:28px;border-top:1px solid var(--border);padding-top:24px}
.bonus-head{font-family:var(--font-text);font-weight:600;font-size:16px;color:var(--navy);margin-bottom:16px}
.bonus-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bonus-card{background:var(--cream);border-radius:20px;padding:20px}
.bonus-val{display:block;font-family:var(--font-brand);font-weight:700;font-size:32px;letter-spacing:-.6px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.bonus-card h4{font-family:var(--font-text);font-weight:600;font-size:15px;color:var(--navy);margin-top:12px;line-height:1.35}
.bonus-card p{font-size:14px;line-height:1.55;color:var(--text-sec);margin-top:6px;max-width:470px}
@media(max-width:768px){
  .bonus-row{grid-template-columns:1fr;gap:12px}
  .bonus-card{padding:16px}
  .bonus-val{font-size:28px}
}
/* 1. De beloftezin breekt na "pipeline". Op laptop past elke helft op een regel;
   daarvoor moet de maat mee, want 20ch knipt de tweede helft. */
.wsh-promise{max-width:38ch}