/* Visuele richting (gekozen door Ryan, 14 oktober): rustig, gelaagd, één merk. Drie vormen in plaats van één: de open sectie op de basis,
   de band over de volle breedte (donker of crème) en één afgerond vlak voor het product (Meten). Binnen een sectie hooguit
   één laag kaarten. Grotere schaal uit de markt: hero 80, kop 52, lopende tekst 18, sectie 120 boven en onder, kop tot inhoud 64. */
:root { --t1: 80px; --t2: 52px; --t3: 18px; --s6: 120px; --s7: 144px; --island-radius: 28px; --island-gap: 0px; }
@media (max-width: 820px) { :root { --t1: 44px; --t2: 34px; --t3: 17px; --s6: 72px; --s7: 88px; } }
h2 { line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); }
.label { margin-bottom: var(--ruimte-label); }
section h2 { margin-bottom: var(--ruimte-lede); }

/* Open sectie: op de basis, zonder vlak */
section.open { padding: var(--s6) 0; border: 0; background: transparent; margin: 0; border-radius: 0; }
/* Band: volle breedte, geen hoeken, eigen toon */
section.band { margin: 0; border-radius: 0; border: 0; padding: var(--s6) 0; }
section.band.light { background: var(--light-bg); color: var(--light-ink); }
section.band.light .label { color: var(--gold-ink); }
section.band.light .lede { color: var(--light-muted); }
/* Het product-vlak: één afgerond eiland, 20 px van de rand */
section.richting-split { margin: 0 20px; border-radius: var(--island-radius); background: var(--panel); padding: var(--s6) 0; }

/* Hero: één beeld, één kop, één zin, één knop, strook van drie feiten (Function, Superpower) */
.hero h1 { max-width: 11ch; }
.hero .lede { max-width: 40ch; }
.hero-stats { border-top: 1px solid var(--line-2); padding-top: 24px; }

/* Meten is weten: beeld links groot en vast (58%), tekst rechts; de drie stappen als strook met haarlijnen onderaan */
.measure.richting-split .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.measure.richting-split .wrap + .wrap { display: block; margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line-2); }
.measure.richting-split .sticky { position: sticky; top: calc(88px + 40px); }
.measure.richting-split .panes { aspect-ratio: 4 / 5; max-height: min(640px, calc(100vh - 160px)); min-height: 420px; width: 100%; margin: 0; border-radius: 24px; overflow: hidden; }
.measure.richting-split .m-copy .lede { font-family: var(--serif); font-size: 22px; color: var(--accent-text); margin-bottom: 48px; }
.measure.richting-split .step { padding: 40px 0; min-height: 0; border-top: 1px solid var(--line-2); }
.measure.richting-split .step:first-child { border-top: 0; padding-top: 0; }
.measure.richting-split .step:last-child { padding-bottom: 0; }
.measure.richting-split .step h3 { font-size: 30px; }
.measure.richting-split .step p { font-size: 17px; }
.measure.richting-split .tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.measure.richting-split .tiles li { padding: 14px; gap: 8px; }
.measure.richting-split .tiles b { font-size: 14px; }
.measure.richting-split .tiles svg { width: 22px; height: 22px; }
.measure .sys.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; margin: 0; border: 0; }
.measure .sys.strip li { border-top: 0; border-left: 1px solid var(--line-2); padding: 4px 32px; }
.measure .sys.strip li:first-child { border-left: 0; padding-left: 0; }
.measure .sys.strip h3 { font-size: 22px; }
.measure .sys.strip p { font-size: 15px; max-width: none; }
@media (max-width: 820px) {
  section.richting-split { margin: 0 12px; }
  .measure.richting-split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .measure.richting-split .sticky { position: static; }
  .measure.richting-split .panes { aspect-ratio: 4 / 3; min-height: 0; }
  .measure.richting-split .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure .sys.strip { grid-template-columns: 1fr; gap: 24px; }
  .measure .sys.strip li { border-left: 0; padding: 0; }
  .measure.richting-split .wrap + .wrap { margin-top: 48px; padding-top: 32px; }
}

/* De vijf funderingen: open op de basis, kaarten 3:4 (Oura) */
.found.open .card { flex-basis: 400px; aspect-ratio: 3 / 4; }

/* Zo werkt het: vier genummerde fotokaarten (Superpower) */
.how.band .wrap { display: block; }
.how-head { max-width: 720px; margin-bottom: 64px; }
.how-head h2 { font-size: 44px; }
.stepcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stepcards .pic { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; margin-bottom: 20px; background: #0a2a0a; }
.stepcards .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stepcards .chip { position: absolute; top: 14px; left: 14px; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--bg-rgb) / 0.55); backdrop-filter: blur(8px); color: var(--off); font-size: 13px; font-weight: 600; }
.stepcards b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.stepcards li > span { display: block; color: var(--light-muted); font-size: 16px; max-width: 30ch; }
@media (max-width: 820px) { .stepcards { grid-template-columns: 1fr 1fr; gap: 16px; } .how-head { margin-bottom: 32px; } .how-head h2 { font-size: 30px; } .stepcards b { font-size: 19px; } }

/* Waarom ELIMA: crème band, zijn donkere kaarten blijven */
.why.band h2 { font-size: 44px; }

/* Bewijs: het getal in de kop (Oura: 86% in de H2), zijn vijf pillen, kaarten lichter met Inter 19 */
.voices.proof.open .proof-top { text-align: center; margin-bottom: 64px; }
.voices.proof.open .stat.inline { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; max-width: 16ch; margin: 0 auto 40px; }
.voices.proof.open .stat.inline .num { color: var(--accent-text); }
.voices.proof.open .quotes li { background: var(--panel); border-color: var(--line-2); }
.voices.proof.open .quotes p { font-size: 19px; line-height: 1.55; }
.voices.proof.open .stars { font-size: 15px; }
@media (max-width: 820px) { .voices.proof.open .proof-top { margin-bottom: 40px; } }

/* Oprichter: crème band, 5/7, portret 4:5 */
.founder.band .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.founder.band .photo { max-width: 320px; }
.founder.band h2 { font-size: 44px; }
@media (max-width: 820px) { .founder.band .wrap { grid-template-columns: 1fr; gap: 32px; } .founder.band .photo { max-width: 240px; } }

/* Burn-out: donkere band met een foto op lage sterkte achter de tekst (Levels, Superpower), deuren blijven */
.burnout.band.photo { position: relative; overflow: hidden; }
.burnout.band.photo .bg { position: absolute; inset: 0; opacity: 0.22; }
.burnout.band.photo .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.burnout.band.photo .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0.6) 50%, rgb(var(--bg-rgb) / 0.2) 100%); }
.burnout.band.photo .wrap { position: relative; z-index: 1; }
.burnout.band .doors a { background: rgb(var(--glass-rgb) / calc(0.85 + var(--glass-plus))); backdrop-filter: blur(8px); }

/* Vragen: open, één kolom van 880 gecentreerd (Ryan: geen lege linkerkolom) */
.faq.open .wrap { display: block; max-width: 880px; }
.faq.open .faq-head { text-align: left; margin-bottom: 32px; }

/* Afsluiter: gecentreerde kop boven het formulier (Levels, Eight Sleep) */
.contact.band.close .wrap { display: block; max-width: 880px; }
.close-head { text-align: center; margin-bottom: 48px; }
.close-head h2 { font-size: 64px; }
.close-head .lede { margin: 0 auto; }
.contact.band.close .form { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 40px; }
@media (max-width: 820px) { .close-head h2 { font-size: 36px; } .contact.band.close .form { padding: 24px; } }

/* Eén haarlijn tussen open secties op de basis, zodat de overgang leesbaar blijft zonder vlak */
section.open + section.open { border-top: 1px solid var(--line); }

/* Deuren bij burn-out: kaartmaat van de andere kaarttitels (24), hoeken 20 */
.burnout.band .doors li { border: 0; }
.burnout.band .doors a { font-size: 24px; border-radius: 20px; padding: 24px 32px; margin-bottom: 16px; border: 1px solid var(--line-2); }
.burnout.band .doors svg { width: 20px; height: 20px; }
/* Het vaste beeld bij Meten vult de kolom zolang je scrolt (sticky), in een stilstaande opname lijkt de kolom onder het beeld leeg */
.measure.richting-split .sticky { align-self: start; }

/* Oprichter: portret 240 (Ryan) */
.founder.band .photo { max-width: 240px; }
/* De rij ervaringen loopt tot de rand van het vlak en vervaagt aan beide kanten (Oura) */
.voices.proof.open .quotes.revs { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: calc(50vw - 50%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); }
@media (max-width: 820px) { .voices.proof.open .quotes.revs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); } }
/* Meten: het vaste beeld vult de hoogte van het scherm onder de balk, zodat de kolom nooit leeg oogt */
.measure.richting-split .panes { max-height: calc(100vh - 140px); }

/* Zo werkt het: open op de basis (twee crème banden achter elkaar vielen samen); de fotokaarten in het donker */
.how.open .label { color: var(--accent-label); }
.how.open .lede { color: var(--muted); }
.how.open .textlink { color: var(--off); border-bottom-color: var(--gold-line); }
.how.open .stepcards b { color: var(--off); }
.how.open .stepcards li > span { color: var(--muted); }
/* Zo werkt het open op de basis: kop boven, de vier kaarten eronder over de volle breedte */
.how.open .wrap { display: block; }
/* De ervaringskaarten houden hun kaartvorm nu de sectie geen eiland meer is */
.voices.proof.open .quotes li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; }
.voices.proof.open .quotes li > span:last-child { margin-top: auto; }
@media (max-width: 820px) { .voices.proof.open .quotes li { padding: 24px; } }

/* De drie stappen: alleen nummer en naam (Ryan, 14 oktober) */
.measure .sys.strip li { padding: 8px 32px; }
.measure .sys.strip h3 { margin: 0; }

/* Vormwissel: de funderingen en de vragen als crème band, zodat geen twee open vlakken op elkaar volgen */
.found.band.light h2 { color: var(--light-ink); }
.found.band.light .bars button i { background: rgb(var(--gold-ink-rgb) / 0.3); }
.found.band.light .bars li.on button i { background: var(--gold-ink); }
.found.band.light .arrow { border-color: rgb(var(--ink-rgb) / 0.3); color: var(--light-ink); }
.found.band.light .arrow:hover { border-color: var(--light-ink); }
.faq.band.light .wrap { display: block; max-width: 880px; }
.faq.band.light .faq-head { margin-bottom: 32px; }
.faq.band.light h2, .faq.band.light summary { color: var(--light-ink); }
.faq.band.light .faq-list.frame { border-color: rgb(var(--ink-rgb) / 0.18); background: rgb(255 255 255 / calc(0.35 + var(--white-plus))); }
.faq.band.light details { border-color: var(--light-line); }
.faq.band.light summary svg { color: var(--accent-ink); }
.faq.band.light .answer { color: var(--light-muted); }
.faq.band.light .answer a, .faq.band.light .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }

/* Doortrekken naar alle pagina's (apply_richting.py): het paneel, open vlakken en banden per onderdeel */
section.plaat { margin: 0 20px; border-radius: var(--island-radius); background: var(--panel); border: 0; padding: var(--s6) 0; }
section.plaat.light { background: var(--light-bg); color: var(--light-ink); }
section.plaat.light .label { color: var(--gold-ink); }
section.plaat + section.plaat, section.hero + section.plaat, section.plaat + section.band, section.band + section.plaat, section.plaat + section.open, section.open + section.plaat { margin-top: 20px; }
section.plaat + section.open, section.plaat + section.band { margin-top: 0; }
section.band.light + section.band.light { border-top: 1px solid var(--light-line); }
@media (max-width: 820px) { section.plaat { margin: 0 12px; } }
/* Afsluiter met één knop */
.cta.band.close { text-align: center; padding: var(--s7) 0; }
/* Onderdelen die van vlak wisselen: de kaarten houden hun vorm */
.voices.open .quotes li, .stories.open li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; }
.stories.open ul { max-width: 860px; }
.voices.open h2, .stories.open h2 { color: var(--off); }
.contact.band.close .wrap { display: block; max-width: 880px; }
.next.band.light h2, .next.band.light .doors a { color: var(--light-ink); }
.next.band.light .doors li { border-color: var(--light-line); }
.next.band.light .doors a:hover { color: var(--accent-ink); }
.next.band.light .doors svg { color: var(--accent-ink); }
.pair.band.light .wrap > div { background: var(--panel); color: var(--off); border-color: transparent; }
.pair.band.light .wrap > div .label { color: var(--accent-label); }
.pair.band.light .wrap > div .lede { color: var(--muted); }
.pair.band.light .wrap > div .textlink { color: var(--off); border-bottom-color: var(--gold-line); }
.numbers.band.light h2 { color: var(--light-ink); }
.numbers.band.light .row { border-color: rgb(var(--ink-rgb) / 0.18); }
.numbers.band.light .row li + li { border-color: var(--light-line); }
.numbers.band.light .row p { color: var(--light-ink); }
.numbers.band.light .row small, .numbers.band.light .lede { color: var(--light-muted); }
.policy.plaat { margin: 0 20px; padding: var(--s6) 0 var(--s7); }
.measure.flow.plaat .wrap, .measure.plain.plaat .wrap { padding-inline: 0; }
.faq.band.light .wrap { display: block; max-width: 880px; }
.faq.band.light .faq-list.frame details:first-child { border-top: 0; }
.faq.band.light .faq-groups h3 { color: var(--light-ink); }
.faq.band.light .topic { background: rgb(255 255 255 / calc(0.4 + var(--white-plus))); border-color: rgb(var(--ink-rgb) / 0.14); }
.faq.band.light .topic > summary b, .faq.band.light .basics summary { color: var(--light-ink); }
.faq.band.light .topic > summary small { color: var(--light-muted); }
.faq.band.light .topic .faq-list details { border-color: var(--light-line); }
.faq.band.light .topic .faq-list details:first-child { border-top: 1px solid var(--light-line); }
.doors-wrap.open .doors2 a .cap b, .doors-wrap.open .doors2 a .cap span { color: var(--off); }
.plan.open .plan-list { border-color: var(--line-2); }
.statement.light.band .wrap { text-align: center; }
.seg.open .media, .seg.light.band .media { border-radius: 24px; }
.seg.light.band h2 { color: var(--light-ink); }
.seg.light.band .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
.level.open .list li, .level.light.band .list li { grid-template-columns: 1fr; }
.measure.plain.plaat .step h3 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); }
/* Crème afsluiter als het blok ervoor donker is */
.cta.light.band.close .label { color: var(--gold-ink); }
.cta.light.band.close h2 { color: var(--light-ink); }
.cta.light.band.close .lede, .cta.light.band.close .small { color: var(--light-muted); }
.contact.light.band.close h2 { color: var(--light-ink); }
.contact.light.band.close .form { background: var(--panel); }
/* Beleidspagina's: de kop (één lang woord) past op de telefoon */
.policy h1 { hyphens: auto; }
/* Wisselende blokken op crème: bewijs, ervaringen, verhaal, niveaus */
.voices.light.band h2, .voices.proof.light.band .stat { color: var(--light-ink); }
.voices.proof.light.band .stat .num { color: var(--accent-ink); }
.voices.light.band .label { color: var(--gold-ink); }
.voices.proof.light.band .areas li { color: var(--light-ink); background: rgb(255 255 255 / calc(0.45 + var(--white-plus))); }
.voices.light.band .quotes li, .stories.light.band li { background: var(--panel); color: var(--off); border-color: transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border-radius: 20px; }
.voices.light.band .quotes p, .stories.light.band p { color: var(--off); }
.voices.light.band .quotes li > span:last-child, .stories.light.band .who { color: var(--muted); }
.voices.light.band .textlink, .stories.light.band .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
.voices.light.band .rev-arrows .arrow { border-color: rgb(var(--ink-rgb) / 0.3); color: var(--light-ink); }
.story.light.band .chapter h2, .story.light.band h2 { color: var(--light-ink); }
.story.light.band .chapter p { color: var(--light-muted); }
.story.light.band .chapter + .chapter { border-color: var(--light-line); }
.plan.light.band .plan-item .t, .plan.light.band h2 { color: var(--light-ink); }
.plan.light.band .plan-body p, .plan.light.band .lede { color: var(--light-muted); }
.plan.light.band .plan-list, .plan.light.band .plan-item { border-color: var(--light-line); }
.level.light.band h2, .level.light.band .list b { color: var(--light-ink); }
.level.light.band .list li { border-color: var(--light-line); }
.signals.light.band h2, .signals.light.band .list.plain li { color: var(--light-ink); }
.cause-block.light.band h2 { color: var(--light-ink); }
.route.light.band h2, .route.light.band .phases h3 { color: var(--light-ink); }
.route.light.band .phases p, .route.light.band .lede { color: var(--light-muted); }
.route.light.band .phases li { border-color: rgb(var(--ink-rgb) / 0.3); }
.route.light.band .phases .when, .route.light.band .phases .n { color: var(--gold-ink); }
.gets.light.band h2, .gets.light.band .list b { color: var(--light-ink); }
.gets.light.band .list li { border-color: var(--light-line); }
.gets.light.band .list span { color: var(--light-muted); }
.gets.light.band .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }

/* Ryan, 14 oktober (drie punten op de homepage) */
/* 1. Het getal weer de hoofdrol: op een eigen regel, groter dan de zin (Oura's 86% staat op 72 px) */
.voices.proof .stat.inline { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; max-width: 22ch; margin-inline: auto; margin-bottom: 40px; }
.voices.proof .stat.inline .num { display: block; font-size: 72px; line-height: 1; margin-bottom: 20px; letter-spacing: -0.02em; }
@media (max-width: 820px) { .voices.proof .stat.inline .num { font-size: 56px; } }
/* 2. Oprichter: foto en tekst als één gecentreerde compositie, foto 240 */
.founder.band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.founder.band .photo { max-width: 240px; width: 100%; }
.founder.band .founder-copy { max-width: 60ch; display: flex; flex-direction: column; align-items: center; }
.founder.band .founder-copy .lede { margin-inline: auto; }
.founder.band h2 { font-size: 40px; }
@media (max-width: 820px) { .founder.band .wrap { gap: 24px; } .founder.band .photo { max-width: 200px; } }
/* 3. Meten rustiger: kleiner beeld, lab en ring als twee duidelijke delen, de tegels als haarlijnlijst (Function), geen losse chips */
@media (min-width: 821px) { .measure.richting-split .wrap { grid-template-columns: 5fr 7fr; gap: 72px; } }
.measure.richting-split .sticky { max-width: 400px; }
.measure.richting-split .panes { max-height: 480px; min-height: 360px; }
.measure.richting-split .step { padding: 36px 0; }
.measure.richting-split .step h3 { font-size: 28px; margin-bottom: 8px; }
.measure.richting-split .step p { font-size: 16px; }
.measure.richting-split .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; margin: 20px 0 20px; border-top: 1px solid var(--line-2); }
.measure.richting-split .tiles li { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transform: none; }
.measure.richting-split .tiles li:hover { transform: none; }
.measure.richting-split .tiles svg { width: 18px; height: 18px; flex: none; }
.measure.richting-split .tiles b { font-size: 15px; font-weight: 500; }
.measure.richting-split .step p.after { font-size: 15px; color: var(--muted); }
.measure.richting-split .checks { gap: 6px 20px; margin: 4px 0 20px; }
.measure.richting-split .checks li { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .measure.richting-split .sticky { max-width: none; } .measure.richting-split .tiles { grid-template-columns: 1fr 1fr; } }
/* Meten op de telefoon: de kolom mag niet breder worden dan het vlak */
.measure.richting-split .steps { grid-template-columns: minmax(0, 1fr); }
.measure.richting-split .step { grid-template-columns: 40px minmax(0, 1fr); }
.measure.richting-split .step > div { min-width: 0; }
@media (max-width: 820px) { .measure.richting-split .step { grid-template-columns: 32px minmax(0, 1fr); } .measure.richting-split .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Beleidspagina's: de leesplaat begint onder de balk en de kop blijft op één woord */
main > .policy.plaat:first-child { margin-top: 20px; }
.policy h1 { hyphens: manual; }
/* Ryan 14 okt avond: de zin onder 94% was "giga" (de regel voor .open won van de 28 px hierboven); het getal draagt, de zin is ondergeschikt; de pillen kleiner */
.voices.proof .stat.inline, .voices.proof.open .stat.inline { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; max-width: 26ch; margin: 0 auto 32px; }
.voices.proof .stat.inline .num, .voices.proof.open .stat.inline .num { display: block; font-size: 72px; line-height: 1; margin-bottom: 16px; }
.voices.proof .areas { gap: 10px; max-width: 560px; }
.voices.proof .areas li { padding: 8px 18px; font-size: 14px; min-height: 0; }
@media (max-width: 820px) {
  .voices.proof .stat.inline .num, .voices.proof.open .stat.inline .num { font-size: 56px; }
  .voices.proof .areas li { padding: 6px 14px; font-size: 13px; }
}
/* oprichter: foto weer naast de tekst, compact en samen gecentreerd (Ryan: foto boven de tekst kost te veel ruimte) */
.founder.band .wrap { display: grid; grid-template-columns: 220px minmax(0, 560px); justify-content: center; align-items: center; gap: 56px; text-align: left; }
.founder.band .photo { max-width: 220px; }
.founder.band .founder-copy { align-items: flex-start; max-width: 560px; }
.founder.band .founder-copy .lede { margin-inline: 0; }
@media (max-width: 820px) { .founder.band .wrap { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; } .founder.band .photo { max-width: 120px; } .founder.band h2 { font-size: 28px; } }

/* Geen horizontaal scrollen (Ryan, 15 oktober). Oorzaak: de rij ervaringen is 100vw breed, en 100vw is met een zichtbare schuifbalk (Mac met muis)
   de breedte van de schuifbalk breder dan de pagina. De sectie knipt nu haar eigen overloop af; html en body knippen alleen als vangnet. */
section.voices { overflow-x: clip; }
html, body { overflow-x: clip; }

/* ==== Homepage (15 oktober, één systeem): alles onder body.home, zodat niets naar de andere pagina's lekt. Bron van dit blok: één schone set, geen lagen.
   Regel van Ryan: niets dat met de scroll meebeweegt krijgt een transitie; geen logistiek op de homepage; eerst de layout, de teksten blijven. ==== */
/* SYSTEEM. Typografie: label sans 12 kapitalen .14em goud · H2 serif 48 · stapnaam 40 · kaarttitel 24 · tekst 18 · klein 14.
   Chips: sans 13, haarlijn 1px, geen vulling, niet vet, niet cursief (de chips in het scrollblok op 15). Kaarten: ronding 24, beeld 4:5. */

/* De kolom: 1200 tot 1440 breed, daarna meegroeiend tot 1520. Eén sectiemaat. */
body.home { --content: clamp(1200px, 80vw, 1520px); --kaart: 24px; }
/* Tot 1600 breed een buitenmarge van 64 px (Oura: de inhoud staat breed), zodat de linkerrand van de inhoud gelijk ligt met het logo in de balk
   (24 px plaat + 40 px). Op 1440 wordt de kolom 1312. Vanaf 1600 groeit de kolom zoals hierboven en lijnt de balk uit met de kolom. */
@media (min-width: 821px) and (max-width: 1599px) { body.home { --gutter: 64px; --content: 100000px; } body.home section.plaat { --gutter: 44px; } }
/* (het afgeronde vlak staat 20 px van de rand; binnenin 44 px, zodat ook daar de kop op 64 staat) */
body.home main > section:not(.hero) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }

/* De balk zoals Oura (Ryan): tot 1600 breed 24 px van de rand met het logo 40 px binnen de plaat (de regels in menu.css gelden dan gewoon).
   Vanaf 1600 lijnt de balk uit met de kolom: de plaat 40 px buiten de kolom, het logo op de linkerrand van de inhoud, de knop op de rechterrand. */
@media (min-width: 1600px) {
  :root .bar::before, :root .bar.floating::before { left: calc((100% - min(100% - 2 * var(--gutter), var(--content))) / 2 - 40px); right: calc((100% - min(100% - 2 * var(--gutter), var(--content))) / 2 - 40px); }
  :root .bar > .wrap, :root .bar.floating > .wrap { width: min(100% - 2 * var(--gutter), var(--content)); padding-left: 0; padding-right: 0; }
  :root .bar .panel, :root .bar.floating .panel { left: calc((100% - min(100% - 2 * var(--gutter), var(--content))) / 2 - 40px); right: calc((100% - min(100% - 2 * var(--gutter), var(--content))) / 2 - 40px); }
}

/* Typografie */
body.home .label, body.home .stappen .stap .n { display: block; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-label); margin: 0 0 var(--ruimte-label); }
body.home section.band.light .label, body.home .faq.light .label { color: var(--gold-ink); }
body.home main > section:not(.hero) h2:not(.stat) { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin-bottom: var(--ruimte-lede); }
body.home main > section:not(.hero) .lede { font-size: var(--fs-lede); line-height: var(--lh-lede); }

/* Chips: één stijl */
body.home .chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.home .chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font-family: var(--sans); font-size: 13px; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.3; color: var(--off-dim); white-space: nowrap; transform: none; box-shadow: none; }

/* Opening: de haarlijn boven de drie cijfers loopt niet door tot in de foto */
body.home .hero .hero-stats { max-width: 600px; }

/* Beelden als AVIF met de JPG of PNG als terugval (ronde 7); het picture-element doet niet mee in de opmaak */
body.home picture { display: contents; }

/* 1. Het stappenplan als gestapelde kaarten (ronde 6; Function Health, Ryans keuze). De opener scrolt mee. Daarna schuift elke stap als plaat over de
   vorige en laat bovenaan een tab van 64 px staan: native position: sticky met oplopende top (96 px voor de zwevende balk + 64 per stap). De stapel is de
   voortgang; er is geen lijn of teller. Elke plaat loopt bij het vastzetten tot onder de rand van het scherm (100vh − top + 20vh), zodat je nooit een
   onderrand ziet; een leeg item achter de laatste plaat geeft de derde stap ongeveer een halve schermhoogte. Daarna loopt de stapel
   samen weg. De glazen kaarten wisselen op een drempel (in 700 ms, uit 300 ms); alles wat met de scroll meeloopt heeft geen transitie. */
body.home main > section.stappen.stapel-sectie:not(.hero) { padding-top: 128px !important; padding-bottom: 0 !important; }
body.home .stap-kop { margin-bottom: 64px; }
body.home .stap-kop .label { margin-bottom: var(--ruimte-label); }
body.home main > .stappen .stap-kop h2:not(.stat) { font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0; }
body.home .stapel { position: relative; }
/* ?overzicht (alleen voor opnames van de hele pagina): de platen onder elkaar, niet vast */
body.home .stapel.overzicht .stapkaart { position: relative; top: auto; height: auto; padding-bottom: 64px; margin-bottom: 20px; }
body.home .stapel.overzicht .stapel-rust { display: none; }
/* de rust per plaat: een leeg item binnen de lijst (padding telt voor sticky niet mee); het schuift achter de vaste plaat langs en is nooit te zien */
body.home .stapel-rust { height: 60vh; list-style: none; pointer-events: none; }
/* De platen staan vast onder elkaar met een oplopende top en een tab van 64 per stap; maten, top en rust per stap staan in het blok
   "Stappen en app-blok naar de benchmark (22 oktober)" onderaan dit bestand. */
body.home .stapkaart { --stapel-top: 96px; position: sticky; top: calc(var(--stapel-top) + var(--i) * 64px); height: calc(100vh - 24px - var(--i) * 64px); margin: 0 20px; background: var(--panel); border-radius: 32px; box-shadow: inset 0 1px 0 rgb(var(--off-rgb) / 0.12), 0 -24px 48px rgb(var(--shadow-rgb) / calc(0.28 * var(--sh))); }
@media (min-width: 821px) and (max-width: 1599px) { body.home .stapkaart { --gutter: 44px; } }
/* De rail (Ryan: "heel clean"): een haarlijn links van de tekst, met een gouden vulling van 2 px die met de scroll meeloopt (geen transitie) en een punt
   bij elke tab: komend een ring, actief goud met een zachte gloed, gehad goud. Elke plaat draagt zijn eigen stuk; samen lopen ze door van de eerste tab
   tot het einde van de stapel. In de actieve plaat loopt de lijn tijdens het rustmoment vol tot de onderkant. */
body.home .stapkaart > .wrap { position: relative; height: 100%; }
body.home .stap-rail { position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: rgb(var(--off-rgb) / 0.14); }
body.home .stapkaart:first-child .stap-rail { top: 32px; }
body.home .stap-rail b { position: absolute; left: -0.5px; top: 0; width: 2px; height: var(--vul, 0px); background: var(--gold); border-radius: 2px; }
body.home .rail-punt { position: absolute; left: -27.5px; top: 28px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgb(var(--off-rgb) / 0.4); background: var(--panel); transition: background-color .2s linear, border-color .2s linear, box-shadow .2s linear; }
body.home .stapkaart.actief .rail-punt { background: var(--gold); border-color: var(--accent-line); box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / calc(0.16 * var(--glow))), 0 0 14px rgb(var(--gold-rgb) / calc(0.55 * var(--glow))); }
body.home .stapkaart.gehad .rail-punt { background: var(--gold); border-color: var(--accent-line); }
body.home .stapkaart .tab { display: flex; align-items: center; gap: 10px; height: 64px; margin: 0; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-label); }
body.home .stapkaart .tab .punt { opacity: .6; }
body.home .stap-inhoud { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, var(--beeld-b)); justify-content: space-between; column-gap: clamp(48px, 9vw, 128px); align-items: start; margin-top: 24px; --beeld-b: clamp(576px, calc(576px + (100vw - 1440px) * 0.2167), 680px); }
body.home .stap-tekst h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 3.6vw, 56px); line-height: 1.05; color: var(--off); margin: 0; }
body.home .stap-tekst p { font-size: 18px; line-height: 1.55; color: rgb(var(--off-rgb) / 0.72); max-width: 46ch; margin-top: 20px; }
body.home .stap-beeld { position: relative; width: 100%; aspect-ratio: 576 / 470; border-radius: 16px; overflow: hidden; background: var(--panel-hi); container-type: size; }
body.home .stap-beeld > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* stap 01: de buisjes helemaal en rustig in de bovenste helft, zodat de kaart linksonder ze vrijlaat */
body.home .stap-beeld > picture > img.pos-buisjes { object-position: 50% 100%; }
/* stap 02: een uitsnede van het onderste deel (x 24 tot 82%, y 29 tot 100% van de foto): de plankaart ligt op de trui, onder de hand met de ring en links van de andere hand */
body.home .stap-beeld > picture > img.pos-trui { inset: auto; left: -41%; bottom: 0; width: 171%; height: auto; max-width: none; object-fit: fill; }
/* stap 03: de foto als kader (gespiegeld, de hand rechts); het app-scherm staat er met een vierpuntstransformatie precies in */
body.home .foto-kader { position: absolute; aspect-ratio: 1800 / 1201; width: calc(var(--kz, 1.1) * max(100cqw, 100cqh * 1.4988)); left: calc((100cqw - var(--kz, 1.1) * max(100cqw, 100cqh * 1.4988)) * var(--fx, 0)); top: calc((100cqh - var(--kz, 1.1) * max(100cqh, 100cqw / 1.4988)) * var(--fy, .5)); }
body.home .foto-kader > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.home .foto-kader.gespiegeld > picture > img { transform: scaleX(-1); }
/* de telefoon rechts van de coachkaart: 1,34 keer ingezoomd en links uitgelijnd, zodat de kaart linksonder alleen de planten bedekt */
body.home .stap-beeld.telefoon-stap .foto-kader { --kz: 1.34; --fx: 0; --fy: .5; }
body.home .stap-beeld.telefoon-stap .gk.hoofd { width: 300px; }
body.home .scherm-laag { position: absolute; left: 0; top: 0; width: 1800px; height: 1201px; transform-origin: 0 0; transform: scale(var(--ks, 0)); pointer-events: none; }
body.home .scherm-laag .scherm { position: absolute; left: 0; top: 0; width: 1206px; height: 2622px; max-width: none; transform-origin: 0 0; border-radius: 150px; }
/* De glazen kaarten: één stijl. Hoofdkaart linksonder op 20, tweede rechtsboven op 20. Ze overlappen nooit en bedekken nooit het onderwerp:
   in stap 01 en 03 raakt de tweede kaart in deze foto's het onderwerp, dus die valt daar weg (regel uit de opdracht). */
body.home .gk { position: absolute; z-index: 2; color: var(--off); background: rgb(var(--glass-rgb) / calc(0.62 + var(--glass-plus))); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border-radius: 16px; padding: 16px 18px; box-shadow: 0 16px 36px rgb(var(--ink-rgb) / calc(0.22 * var(--sh))); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
body.home .gk.hoofd { left: 20px; bottom: 20px; width: 320px; }
body.home .gk.twee { right: 20px; top: 20px; width: 250px; }
body.home .stap-beeld:has(.pos-buisjes) .gk.twee, body.home .stap-beeld.telefoon-stap .gk.twee { display: none; }
body.home .gk small { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: var(--off-dim); margin-bottom: 8px; }
body.home .gk p { font-size: 15px; line-height: 1.45; color: var(--off); }
body.home .gk-getal { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
body.home .gk-getal b { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; color: var(--accent-text); }
body.home .gk .gk-dim { color: var(--off-dim); font-size: 14px; }
body.home .gk-lijst { display: grid; gap: 8px; }
body.home .gk-lijst li { display: flex; align-items: center; gap: 10px; color: var(--off); white-space: nowrap; font-size: 15px; }
body.home .gk-lijst i:not(.ic) { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--fc); }
body.home .gk-iconen .ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgb(var(--gold-rgb) / calc(0.14 * var(--glow))); color: var(--accent-text); }
body.home .gk-iconen .ic svg { width: 13px; height: 13px; }
body.home .weken .wk { width: 56px; flex: none; font-size: 12px; color: var(--off-dim); }
body.home .weken .nm { flex: 1; }
body.home .weken .vink { display: grid; place-items: center; width: 18px; height: 18px; color: var(--accent-text); }
body.home .weken .vink svg { width: 14px; height: 14px; }
body.home .weken li.vaag { opacity: .35; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 95%); mask-image: linear-gradient(90deg, #000 30%, transparent 95%); }
body.home .gk-chat { display: flex; align-items: flex-start; gap: 12px; }
body.home .gk-chat img { position: static; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; display: block; }
body.home .gk-chat small { margin-bottom: 4px; }
body.home .gk-grafiek svg { display: block; width: 100%; height: auto; }
body.home .gk-grafiek .dagen { display: flex; justify-content: space-between; padding: 0 2px 0 4px; font-size: 11px; color: var(--off-dim); }
/* In en uit: een wissel op een drempel. In: dekking 0 naar 1, blur 10 naar 0, schaal .985 naar 1, geen verschuiving, 700 ms; de tweede kaart 140 ms later.
   Uit (de volgende plaat schuift eroverheen): dekking naar 0, blur naar 6, 300 ms. Zonder script en bij "minder beweging" staan ze meteen. */
html.js body.home .stapkaart .gk { opacity: 0; filter: blur(10px); transform: scale(.985); transition: none; }
html.js body.home .stapkaart.aan .gk { opacity: 1; filter: blur(0); transform: none; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
html.js body.home .stapkaart.aan .gk.twee { transition-delay: .14s; }
html.js body.home .stapkaart.weg .gk { opacity: 0; filter: blur(6px); transform: none; transition: opacity .3s ease, filter .3s ease; }
@media (prefers-reduced-motion: reduce) { html.js body.home .stapkaart .gk, html.js body.home .stapkaart.weg .gk { opacity: 1; filter: none; transform: none; transition: none; } }

/* Moment 1 uit LEVENDE-BEELDEN.md (Ryan, 17 oktober): de stapel bouwt zich op. Elk beeld speelt één keer af, de eerste keer dat de glazen kaarten
   van een plaat komen (het script zet dan "speel"), en blijft daarna op de eindstand staan. Hooguit 3,5 s, geen tellers vanaf 0, geen decor zonder data.
   Stap 01: de ring rond 100+ vult zich, daarna komen de onderdelen één voor één. Stap 02: week 1 en 2 vinken zich af, de huidige week licht op in goud.
   Stap 03: de coach typt (drie puntjes), daarna verschijnt het bericht. Bij minder beweging staat meteen de eindstand. */
/* Stap 01: de ring loopt om het getal heen en vult zich (zoals de ring rond "104" bij Function); de onderdelen staan ernaast */
body.home .lab-rij { display: flex; align-items: center; gap: 16px; }
body.home .ring-getal { position: relative; flex: none; width: 104px; height: 104px; display: grid; place-content: center; text-align: center; }
body.home .ring-getal b { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; color: var(--accent-text); }
body.home .ring-getal span { display: block; margin-top: 4px; font-size: 11px; color: var(--off-dim); }
body.home .gk-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
body.home .gk-ring circle { fill: none; stroke-width: 2.5; }
body.home .gk-ring .r-baan { stroke: rgb(var(--off-rgb) / 0.16); }
body.home .gk-ring .r-vul { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 0; }
html.js body.home .stapkaart .gk-ring .r-vul { stroke-dashoffset: 289; }
html.js body.home .stapkaart.speel .gk-ring .r-vul { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.22, 1, .36, 1) .35s; }
body.home .lab-tekst p { font-size: 15px; line-height: 1.4; }
body.home .lab-tekst .gk-dim { margin-top: 6px; font-size: 13px; }
html.js body.home .stapkaart .gk-lab .rij { opacity: 0; filter: blur(4px); }
html.js body.home .stapkaart.speel .gk-lab .rij { opacity: 1; filter: blur(0); transition: opacity .5s ease 1.55s, filter .5s ease 1.55s; }
html.js body.home .stapkaart.speel .gk-lab .rij + .rij { transition-delay: 1.95s; }
body.home .weken li.nu .nm { color: var(--off); }
html.js body.home .stapkaart .weken .vink { opacity: 0; transform: scale(.6); }
html.js body.home .stapkaart.speel .weken .vink { opacity: 1; transform: none; transition: opacity .35s ease .7s, transform .35s cubic-bezier(.22, 1, .36, 1) .7s; }
html.js body.home .stapkaart.speel .weken li:nth-child(2) .vink { transition-delay: 1.2s; }
html.js body.home .stapkaart.speel .weken li.nu .nm { color: var(--accent-text); transition: color .5s ease 1.75s; }
html.js body.home .stapkaart.speel .weken li.nu i { box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / calc(0.22 * var(--glow))); transition: box-shadow .5s ease 1.75s; }
body.home .gk-chat > div { position: relative; }
body.home .typen { position: absolute; left: 0; top: 22px; display: flex; gap: 5px; opacity: 0; pointer-events: none; }
body.home .typen i { width: 6px; height: 6px; border-radius: 50%; background: var(--off-dim); opacity: .35; }
html.js body.home .stapkaart .gk-chat p { opacity: 0; }
html.js body.home .stapkaart.speel .gk-chat p { opacity: 1; transition: opacity .4s ease .8s; } /* Ryan 18 okt: typen duurde te lang */
html.js body.home .stapkaart.speel .typen { animation: typen-wissel .7s ease .1s forwards; }
html.js body.home .stapkaart.speel .typen i { animation: typen-stip .5s ease-in-out .1s 1; }
html.js body.home .stapkaart.speel .typen i:nth-child(2) { animation-delay: .2s; }
html.js body.home .stapkaart.speel .typen i:nth-child(3) { animation-delay: .3s; }
@keyframes typen-wissel { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes typen-stip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
body.home .gk-grafiek .lijn { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js body.home .stapkaart .gk-grafiek .lijn { stroke-dashoffset: 1; }
html.js body.home .stapkaart.speel .gk-grafiek .lijn { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.22, 1, .36, 1) .3s; }
@media (prefers-reduced-motion: reduce) {
  html.js body.home .stapkaart .gk-ring .r-vul, html.js body.home .stapkaart .gk-grafiek .lijn { stroke-dashoffset: 0; transition: none; }
  html.js body.home .stapkaart .gk-lab .rij, html.js body.home .stapkaart .weken .vink, html.js body.home .stapkaart .gk-chat p { opacity: 1; filter: none; transform: none; transition: none; }
  html.js body.home .stapkaart .weken li.nu .nm { color: var(--accent-text); }
  body.home .typen { display: none; }
}

/* Telefoon (onder 820): niet vast, drie platen onder elkaar; het beeld bovenaan (4:3) met één glazen kaart, daaronder tab, titel en tekst */
@media (max-width: 820px) {
  body.home main > section.stappen.stapel-sectie:not(.hero) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
  body.home .stap-kop { margin-bottom: var(--ruimte-inhoud); }
  body.home .stapel { display: grid; gap: 24px; }
  body.home .stapel-rust { display: none; }
  body.home .stapkaart { position: relative; top: auto; height: auto; margin: 0; border-radius: 28px 28px 0 0; box-shadow: inset 0 1px 0 rgb(var(--off-rgb) / 0.12); padding: 16px 0 28px; }
  body.home .stapkaart .wrap { width: calc(100% - 32px); }
  /* de rail op de telefoon: links langs de drie kaarten (x 8), door de tussenruimte heen, met een punt bij elk label */
  body.home .stapkaart > .wrap { height: auto; }
  body.home .stap-rail { left: -8px; top: -16px; bottom: -52px; }
  body.home .stapkaart:first-child .stap-rail { top: var(--punt-y, 0px); }
  body.home .stapkaart:nth-last-child(2) .stap-rail { bottom: 0; }
  body.home .rail-punt { left: -11.5px; top: calc(var(--punt-y, 0px) - 4px); }
  /* volgorde op de telefoon: beeld, tab, titel, tekst */
  body.home .stapkaart > .wrap { display: flex; flex-direction: column; }
  body.home .stap-inhoud { display: contents; }
  body.home .stap-beeld { order: 1; }
  body.home .stapkaart .tab { order: 2; height: auto; margin: 20px 0 12px; }
  body.home .stap-tekst { order: 3; }
  body.home .stap-tekst h3 { font-size: 34px; line-height: 1.1; }
  body.home .stap-tekst p { font-size: 16px; margin-top: 12px; }
  /* op de telefoon alle drie de beelden 1:1, zodat het telefoonscherm in stap 03 boven de coachkaart past (admin, 17 oktober) */
  body.home .stap-beeld { aspect-ratio: 1 / 1; border-radius: 14px; }
  body.home .gk { padding: 12px 14px; border-radius: 14px; font-size: 14px; }
  body.home .gk.hoofd { left: 12px; bottom: 12px; width: 72%; }
  /* stap 03: de coachkaart 64% (hij raakte op 72% het telefoonscherm); de telefoon iets naar rechts en omhoog, zodat 84 GOED en Factoren vrij blijven */
  body.home .stap-beeld.telefoon-stap .gk.hoofd { width: 64%; }
  body.home .stap-beeld.telefoon-stap .foto-kader { --kz: 1.18; --fx: 0; --fy: 1; }
  /* stap 02 op de telefoon: de andere hand valt buiten beeld, zodat de plankaart geen hand bedekt */
  body.home .stap-beeld > picture > img.pos-trui { left: -2.6%; width: 171%; }
  /* stap 01 op de telefoon: de labkaart iets compacter, zodat hij onder de buisjes blijft */
  body.home .stap-beeld:has(.pos-buisjes) .gk { padding: 10px 12px; }
  body.home .ring-getal { width: 80px; height: 80px; }
  body.home .ring-getal b { font-size: 24px; }
  body.home .ring-getal span { font-size: 10px; margin-top: 2px; }
  body.home .lab-rij { gap: 12px; }
  body.home .lab-tekst p { font-size: 13px; }
  body.home .lab-tekst .gk-dim { font-size: 11.5px; }
  body.home .stap-beeld:has(.pos-buisjes) .gk .gk-dim { font-size: 12px; }
  body.home .gk.twee { display: none; }
  body.home .gk small { font-size: 11px; margin-bottom: 6px; }
  body.home .gk p, body.home .gk-lijst li { font-size: 14px; }
  body.home .gk-getal b { font-size: 32px; }
  body.home .gk .gk-dim { font-size: 12.5px; }
  body.home .gk-lijst { gap: 5px; }
  body.home .gk-chat img { width: 30px; height: 30px; }
  body.home .weken .wk { width: 48px; font-size: 11px; }
  html.js body.home .stapkaart .gk { filter: blur(8px); transform: none; }
  html.js body.home .stapkaart.aan .gk { transition: opacity .6s cubic-bezier(.22, 1, .36, 1), filter .6s cubic-bezier(.22, 1, .36, 1); }
}

/* Kaarten: één stijl. De funderingen een derde van de kolom breed, 4:5, ronding 24, titel 24, tekst 14 */
body.home .found .card { flex: 0 0 calc((min(100vw - 2 * var(--gutter), var(--content)) - 48px) / 3); aspect-ratio: 4 / 5; border-radius: var(--kaart); }
body.home .found .card .cap b { font-size: var(--fs-kaart); line-height: var(--lh-kaart); margin-bottom: 6px; }
body.home .found .card .cap span { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.5; min-height: 3em; }
body.home .found .card img.pos-ei { object-position: 50% 48%; }
body.home .found .card .kaart-link { position: absolute; inset: 0; display: block; color: inherit; border-radius: inherit; }
body.home .found .card .kaart-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
body.home .found .card::after { pointer-events: none; }
body.home .found .card .cap { right: 76px; }
body.home .found .card .pijl { position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(var(--off-rgb) / 0.4); color: var(--off); transition: border-color .25s ease, background-color .25s ease; }
body.home .found .card .pijl svg { width: 14px; height: 14px; }
body.home .found .card .kaart-link:hover .pijl { border-color: var(--accent-line); background-color: rgb(var(--bg-rgb) / 0.35); }
body.home .burnout .doors a { font-size: var(--fs-kaart); line-height: var(--lh-kaart); padding: 24px 32px; border-radius: var(--kaart); }
body.home .burnout .doors li:last-child a { margin-bottom: 0; }

/* 4. De vijf funderingen, open op het donker: de kop links zoals alle andere koppen; drie kaarten helemaal vrij, de rand van de vierde vervaagt in de marge */
body.home .found .found-head { text-align: left; max-width: none; margin: 0 0 var(--ruimte-inhoud); }
body.home .found.open .rail-wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter)), transparent 100%); }
/* Ryan 29 okt: alle vijf naast elkaar op de computer, kleiner en staand (3:4), zonder pijltjes en zonder de balk eronder; de hele kaart blijft de link. Op de telefoon blijft het vegen */
body.home .found .card img.pos-beweging { object-position: 58% 50%; }
@media (min-width: 821px) {
  body.home .found .rail-wrap, body.home .found.open .rail-wrap { padding-right: max(var(--gutter), calc((100% - var(--content)) / 2)); -webkit-mask-image: none; mask-image: none; }
  body.home .found .rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; overflow: visible; padding-right: 0; }
  body.home .found .card, body.home .found.open .card { flex: none; aspect-ratio: 3 / 4; }
  body.home .found .rail-foot, body.home .found .card .pijl { display: none; }
  body.home .found .card .cap { left: 20px; bottom: 20px; right: 16px; }
  body.home .found .card .cap b { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; margin-bottom: 0; }
  body.home .found .card .chip { transform: scale(.85); transform-origin: top left; }
}
@media (min-width: 1180px) {
  body.home .found .card .cap b { white-space: nowrap; }
}
/* Ryan 2 nov: kop "De ELIMA Methode" met een regel eronder; op de telefoon kleinere kaarten, twee tegelijk in beeld */
body.home .found .found-head .lede { max-width: 620px; margin: 16px 0 0; }
@media (max-width: 820px) {
  body.home .found .rail .card, body.home .found.open .rail .card { flex-basis: 46vw; aspect-ratio: 3 / 4; }
  body.home .found .rail .card .pijl { display: none; }
  body.home .found .rail .card .cap { left: 14px; bottom: 14px; right: 12px; }
  body.home .found .rail .card .cap b { font-size: 17px; line-height: 1.2; }
  body.home .found .rail .card .chip { top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 12px; }
  body.home .found .rail .card .chip svg { width: 18px; height: 18px; }
}

/* Koppen van de uitlichtingen: label, kop en één regel */
body.home .blok-kop { margin-bottom: var(--ruimte-inhoud); }
body.home .blok-kop:not(.wrap) { max-width: 760px; }
body.home .blok-kop .lede { color: var(--off-dim); margin-top: 0; max-width: 46ch; }
body.home section.band.light .blok-kop .lede { color: var(--light-muted); }

/* 10. Burn-out als smalle strook (Prescan): de toon van het vlak, haarlijnen, kop links en de twee deuren naast elkaar */
body.home main > section.strook { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
body.home .burnout.strook { background: var(--panel); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
body.home .burnout.strook .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
body.home .burnout.strook h2:not(.stat) { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); }
body.home .burnout.strook .label { margin-bottom: var(--ruimte-label); }
body.home .burnout.strook .doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.home .burnout.strook .doors li, body.home .burnout.strook .doors li:last-child { border: 0; }
body.home .burnout.strook .doors a { margin: 0; border: 1px solid var(--line-2); background: var(--bg); }

/* 5. App & portaal (Ryans premium stuk): crème band, zodat de donkergroene schermen oplichten (Oura). Kop en regel gecentreerd, de vier onderdelen als chips
   met icoon eronder. Hooguit drie telefoons, groot en scherp met zachte schaduwen: de chat in het midden en het hoogst, lab en modules ernaast (admin, 15 oktober).
   Het portaal (portaal-data.png) verschijnt als één groot frameloos venster achter de telefoons zodra het bestand bestaat (Linear): hoek 16, haarlijn goud
   op lage sterkte, onderaan afgesneden en vervagend; de telefoons staan er half voor. */
body.home .app-blok .wrap { display: block; }
body.home .app-tekst { text-align: center; margin-bottom: 56px; }
body.home .app-kop h2 { color: var(--light-ink); }
body.home .app-blok .lede { color: var(--light-muted); max-width: 40ch; margin: 0 auto; }
body.home .app-lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
body.home .app-lijst li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgb(var(--ink-rgb) / 0.18); border-radius: 999px; font-family: var(--sans); font-size: 13px; line-height: 1.3; color: var(--light-ink); white-space: nowrap; }
body.home .app-lijst svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
body.home .app-beeld { position: relative; max-width: 1080px; margin-inline: auto; aspect-ratio: 1.62 / 1; }
body.home .app-beeld .venster { display: none; }
/* het vak eindigt waar de middelste telefoon eindigt, zodat boven en onder het blok dezelfde 108 staat (Ryan: de ruimte rond dit blok) */
body.home .app-beeld.met-portaal { aspect-ratio: 1.215 / 1; }
body.home .app-beeld.met-portaal .venster { display: block; position: absolute; z-index: 1; left: 4%; width: 92%; top: 0; border-radius: 16px; overflow: hidden; background: #011400; border: 1px solid rgb(var(--gold-edge-rgb) / calc(0.14 * var(--edge))); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); }
body.home .venster-balk { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; background: #072207; border-bottom: 1px solid rgb(var(--gold-edge-rgb) / calc(0.08 * var(--edge))); }
body.home .venster-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.18); }
body.home .venster-scherm { position: relative; aspect-ratio: 16 / 10; }
/* de bovenste 2% van portaal-data valt weg, zodat de bovenste kaart niet half op de rand staat (admin, 16 oktober) */
body.home .venster-scherm img { position: absolute; left: 0; top: -2%; width: 100%; height: auto; display: block; }
body.home .app-beeld .schermen img { position: absolute; height: auto; border-radius: 28px; border: 1px solid rgb(var(--ink-rgb) / 0.1); box-shadow: 0 24px 48px rgb(var(--ink-rgb) / calc(0.16 * var(--sh))), 0 4px 12px rgb(var(--ink-rgb) / calc(0.08 * var(--sh))); opacity: 0; transition: opacity .4s ease; }
body.home .app-beeld .schermen img.geladen { opacity: 1; }
/* Scherp en leesbaar, elk scherm voor minstens 80% zichtbaar (ronde 4). Nu twee: het lab links erachter, de modules ervoor. Komt de neutrale chat terug
   (img class "sc"), dan schuift alles naar drie: lab links, modules in het midden, chat rechts. Links en rechts evenveel ruimte. */
body.home .app-beeld .schermen .sm { left: 47%; width: 28%; top: 0; z-index: 6; }
body.home .app-beeld .schermen .sl { left: 25%; width: 24%; top: 8%; z-index: 4; }
body.home .app-beeld .schermen:has(.sc) .sm { left: 36%; width: 28%; }
body.home .app-beeld .schermen:has(.sc) .sl { left: 13%; width: 24%; }
body.home .app-beeld .schermen .sc { left: 63%; width: 24%; top: 8%; z-index: 5; }
body.home .app-beeld.met-portaal .schermen .sm { top: 26%; }
body.home .app-beeld.met-portaal .schermen .sl, body.home .app-beeld.met-portaal .schermen .sc { top: 34%; }


/* Moment 2 (LEVENDE-BEELDEN.md): de opnames van Colin (portaal-data, app-modules, eventueel app-chat) liggen over het stilstaande scherm en spelen
   één voor één en één keer af als het blok in beeld komt; daarna blijft het laatste beeld staan. Een pauzeknop met tekst. Bij minder beweging niet vanzelf. */
body.home .venster-scherm .film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
body.home .app-beeld .schermen video.film { position: absolute; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: 50% 0; border-radius: 28px; z-index: 7; }
body.home .app-beeld .film { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
body.home .app-beeld .film.klaar { opacity: 1; }
body.home .opname-knop { position: absolute; z-index: 8; right: 4%; top: 12px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(var(--off-rgb) / 0.22); background: rgb(var(--bg-rgb) / 0.6); color: var(--off); font-family: var(--sans); font-size: 13px; cursor: pointer; transition: border-color .16s ease; }
body.home .opname-knop:hover { border-color: var(--gold-line); }
body.home .opname-knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* 9. Waarom ELIMA: Ryans zes onderdelen (kopjes en teksten), twee kolommen van drie met haarlijnen, het bospad ernaast (terug op zijn verzoek, 17 oktober) */
body.home .why.open .why-head { text-align: left; margin-bottom: 40px; }
body.home .waarom-zes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: stretch; }
body.home .beeld-zes { position: relative; min-height: 420px; border-radius: var(--kaart); overflow: hidden; background: var(--panel); }
body.home .beeld-zes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
body.home .zes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-content: start; border-top: 1px solid var(--line-2); }
body.home .zes li { padding: 28px 0; border-bottom: 1px solid var(--line-2); transition: border-color .16s ease; }
body.home .zes h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--off); margin: 0 0 8px; transition: color .16s ease; }
body.home .zes p { font-size: 17px; line-height: 1.5; color: rgb(var(--off-rgb) / 0.72); max-width: 34ch; }
body.home .zes li:hover { border-bottom-color: var(--gold-line); }
body.home .zes li:hover h3 { color: var(--accent-soft); }
body.home .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 5. Bewijs op het donker: 94% op 72, de zin op 30 in twee regels, de gebieden als chips */
body.home .voices.proof .stat.inline, body.home .voices.proof.open .stat.inline { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; max-width: 22ch; margin: 0 auto 28px; }
body.home .voices.proof .stat.inline .num, body.home .voices.proof.open .stat.inline .num { font-size: 72px; }
/* De gebieden: Ryans gouden pillen, een bewuste uitzondering op de chipstijl (Ryan, 15 oktober). De rij van drie en twee komt uit concept.css. */
body.home .voices.proof .areas { gap: 12px; max-width: 640px; }
body.home .voices.proof .basis { margin-top: 16px; font-size: 14px; color: var(--muted); text-align: center; }
body.home .voices.proof .areas li { min-height: 0; padding: 10px 22px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--panel-hi); font-size: 16px; font-weight: 600; font-style: italic; color: var(--off); }
/* Ervaringen: elk citaat volledig, de kaarten zo hoog als het langste citaat; citaat 18, naam 13 */
body.home .voices.proof .quotes.revs li { gap: 14px; padding: 28px; border-radius: var(--kaart); }
body.home .voices.proof .quotes.revs p { font-size: 18px; line-height: 1.55; }
body.home .voices.proof .quotes.revs li > span:last-child { font-size: 13px; color: var(--muted); padding-top: 0; }


/* 7. Vragen: op dezelfde linkerrand als de rest */
body.home .faq.band.light .wrap { max-width: none; }

/* 8. Afsluiter: één zin, dezelfde knop als in de balk */
body.home .afsluiter { text-align: center; border-top: 1px solid var(--line); }
body.home .afsluiter .lede { margin: 0 auto var(--ruimte-inhoud); }
body.home .afsluiter .small { display: block; margin-top: 20px; font-size: 14px; color: var(--muted); }

/* Hovers (Ryan, 15 oktober: "dat was een beetje interactief"). Zacht, rond .35 s, alleen kleur, rand, een kleine verschuiving of zoom;
   nooit een transitie op iets dat met de scroll meebeweegt (de parallax van de kaartbeelden gebruikt transform, de zoom gebruikt scale). */
body.home .burnout .doors a { transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
body.home .burnout .doors a svg { transition: transform .35s var(--ease); }
body.home .burnout .doors a:hover, body.home .burnout .doors a:focus-visible { color: var(--accent-soft); background-color: var(--panel-hi); border-color: var(--gold-line); }
body.home .burnout .doors a:hover svg, body.home .burnout .doors a:focus-visible svg { transform: translateX(4px); }
html.js body.home .found .card img { transition: scale .6s var(--ease) !important; }
body.home .found .card .kaart-link:hover img, body.home .found .card .kaart-link:focus-visible img { scale: 1.03; }
body.home .found .card .pijl svg { transition: transform .35s var(--ease); }
body.home .found .card .kaart-link:hover .pijl svg { transform: translateX(2px); }
body.home .voices.proof .areas li { transition: transform .35s var(--ease), background-color .35s ease; }
body.home .voices.proof .areas li:hover { transform: translateY(-3px); background-color: rgb(var(--gold-rgb) / calc(0.12 * var(--glow))); }
body.home .voices.proof .quotes.revs li { transition: border-color .35s ease; }
body.home .voices.proof .quotes.revs li:hover { border-color: var(--gold-line); }
body.home main .textlink { transition: color .3s ease, border-color .3s ease; }
body.home main .textlink svg { transition: transform .3s var(--ease); }
body.home main .textlink:hover { border-bottom-color: var(--accent-line); }
body.home main .textlink:hover svg { transform: translateX(3px); }
body.home section.band.light .textlink:hover { border-bottom-color: var(--gold-ink); }
body.home .faq summary { transition: color .3s ease; }
body.home .faq.band.light summary:hover { color: var(--accent-ink); }

/* De vaste knop onderaan op de telefoon; verborgen zolang het menuvel open is */
body.home .vast-cta { display: none; }

@media (max-width: 820px) {
  body.home .chips { gap: 6px; margin-top: 16px; }
  body.home .chips li { font-size: 14px; padding: 6px 12px; }
  body.home .app-tekst { margin-bottom: 32px; }
  /* Op de telefoon de drie telefoons groot naast elkaar, de chat in het midden; met portaal het venster over de volle breedte erachter */
  body.home .app-beeld { aspect-ratio: 1 / 1.02; }
  body.home .app-beeld.met-portaal { aspect-ratio: 1 / 1.152; }
  body.home .app-beeld.met-portaal .venster { left: 4%; width: 92%; border-radius: 12px; }
  body.home .venster-balk { height: 20px; gap: 4px; padding: 0 10px; }
  body.home .venster-balk i { width: 5px; height: 5px; }
  body.home .app-beeld .schermen .sm { left: 43%; width: 46%; top: 0; }
  body.home .app-beeld .schermen .sl { left: 11%; width: 36%; top: 10%; }
  body.home .app-beeld .schermen:has(.sc) .sm { left: 30%; width: 40%; }
  body.home .app-beeld .schermen:has(.sc) .sl { left: 3%; width: 28%; }
  body.home .app-beeld .schermen .sc { left: 69%; width: 28%; top: 10%; }
  body.home .app-beeld.met-portaal .schermen .sm { top: 22%; }
  body.home .app-beeld.met-portaal .schermen .sl, body.home .app-beeld.met-portaal .schermen .sc { top: 30%; }
  body.home .app-beeld .schermen img { border-radius: 16px; box-shadow: 0 14px 28px rgb(var(--ink-rgb) / calc(0.16 * var(--sh))); }
  body.home .app-beeld .schermen video.film { border-radius: 16px; }
  body.home .app-lijst { gap: 8px; }
  body.home .app-lijst li { font-size: 14px; padding: 6px 12px; }
  /* Op de telefoon dezelfde kaarten, kleiner; het beeld is 4:5 zodat beide kaarten erin passen */
  /* stap 01 op de telefoon: de buisjes onderin beeld, zodat de twee kaarten ze niet afdekken */
  /* De opening: het beeld over de volle breedte, tot de rechterrand (admin, 15 oktober) */
  body.home .hero .hero-media { width: 100%; aspect-ratio: auto; height: min(460px, 118vw); }
  body.home .found .card .cap span { font-size: 15px; min-height: 6em; }
  body.home .found .card, body.home .found.open .card { flex-basis: 80vw; }
  body.home .found .card .cap { right: 64px; }
  body.home .found .card .pijl { right: 16px; bottom: 16px; width: 32px; height: 32px; }
  body.home .waarom-zes { grid-template-columns: 1fr; gap: 24px; }
  body.home .beeld-zes { min-height: 0; aspect-ratio: 4 / 3; }
  body.home .zes { grid-template-columns: 1fr; }
  body.home .zes li { padding: 20px 0; }
  body.home .zes h3 { font-size: 22px; }
  body.home .zes p { font-size: 16px; }
  body.home .burnout.strook .wrap { grid-template-columns: 1fr; gap: 20px; }
  body.home .burnout.strook .doors { grid-template-columns: 1fr; gap: 10px; }
  body.home .voices.proof .stat.inline .num, body.home .voices.proof.open .stat.inline .num { font-size: 56px; }
  body.home .voices.proof .areas li { padding: 8px 16px; font-size: 14px; }
  body.home .voices.proof .quotes.revs li { padding: 22px; }
  body.home .voices.proof .quotes.revs p { font-size: 17px; }
  body.home .burnout .doors a { padding: 20px 24px; }
  body.home .hero .actions .btn { display: none; }
  body.home .vast-cta { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 25; height: 52px; box-shadow: 0 10px 30px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); }
  html.menu-open body.home .vast-cta { display: none; }
  body.home { padding-bottom: 84px; }
}

/* ==== Ontwerpsysteem, ronde 7 (17 oktober; DESIGN-SYSTEEM.md). Staat onderaan, zodat het de oudere regels hierboven overschrijft. ==== */
/* Ruimte: sectiepadding 108 boven en onder (systeem 112, bereik 96 tot 128; met 108 wordt de afstand tussen de inhoud van twee secties 216, binnen
   200 tot 220). Op de telefoon 72. Marge 64 op 1440, ongeveer 104 vanaf 1600 (inhoud rond 1700 op 1920), 20 op de telefoon. */
body.home { --kaart: 16px; }
@media (max-width: 820px) { body.home { --gutter: 20px; } }
@media (min-width: 1600px) { body.home { --content: min(100vw - 208px, 1600px); } }
body.home main > section.stappen.stapel-sectie:not(.hero) { padding-bottom: var(--sec) !important; }
body.home section.open + section.plaat { margin-top: 0; }

/* Typografie: hooguit 11 groottes (12, 13, 14, 15, 17, 24, 32, 44, 52, 56, 72). Tekst 17 met lh 1,5, kolommen rond 480 (hooguit ongeveer 52 tekens). */
body.home .label { letter-spacing: var(--ls-label); }
body.home .hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
body.home main > section:not(.hero) h2:not(.stat) { line-height: var(--lh-h2); }
body.home main > section:not(.hero) .lede, body.home .hero .lede { font-size: var(--fs-lede); line-height: var(--lh-lede); max-width: 480px; }
body.home .app-blok .lede, body.home .afsluiter .lede, body.home .faq .faq-head .lede { margin-left: auto; margin-right: auto; }
body.home .faq .faq-head .lede { margin-left: 0; }
body.home .faq .answer p { font-size: 17px; line-height: 1.5; max-width: 480px; }
body.home .founder.plaat .lede { font-size: var(--fs-lede); line-height: var(--lh-lede); max-width: 480px; }
body.home .stap-tekst p { font-size: var(--fs-lede); line-height: var(--lh-lede); }
body.home .hero .hero-stats b { font-size: 32px; }
body.home .hero .btn, body.home .afsluiter .btn { font-size: 15px; }
body.home .voices.proof .areas li { font-size: 17px; }
body.home .voices.proof .quotes.revs p { font-size: 17px; line-height: 1.5; }
body.home .voices.proof .quotes.revs li > span:last-child { font-size: 14px; }
body.home .stap-tekst h3 { font-size: var(--fs-stap); }
/* Reviews: tekstkolom 480 breed (kaart 536 met 28 binnenruimte), ronding 16, geen schaduw, zo hoog als de langste tekst */
body.home .voices.proof .quotes.revs li { flex: 0 0 536px; border-radius: var(--kaart); box-shadow: none; }
/* Kaarten: ronding 16, geen schaduw. Tekstkaarten met een haarlijn en 24 tot 32 binnenruimte. */
body.home .found .card, body.home .found.open .card { border-radius: var(--kaart); box-shadow: none; }
body.home .faq .faq-list.frame { border-radius: var(--kaart); }
body.home .burnout .doors a { border-radius: var(--kaart); }

/* De oprichter op donker, als plaat; de foto weer 240 (4:5) naast de tekst, zoals Ryan hem had (17 oktober: "weer groter gemaakt, ik weet niet waar dat vandaan komt") */
body.home .founder.plaat .wrap { display: grid; grid-template-columns: 240px minmax(0, 560px); justify-content: center; align-items: center; column-gap: 56px; width: min(100% - 2 * var(--gutter), var(--content)); max-width: none; margin-inline: auto; text-align: left; }
body.home .founder.plaat .photo { margin: 0; width: 240px; max-width: none; border-radius: var(--kaart); overflow: hidden; }
body.home .founder.plaat .photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; display: block; }
body.home .founder.plaat .founder-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; }
body.home .founder.plaat .label { color: var(--accent-label); }
body.home .founder.plaat h2 { color: var(--off); margin-bottom: var(--ruimte-lede); font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); } /* Ryan 18 okt: zoals versie 2 */
body.home .founder.plaat .lede { color: rgb(var(--off-rgb) / 0.72); margin: 0 0 24px; line-height: var(--lh-lede); }
body.home .founder.plaat .textlink { color: var(--off); border-bottom-color: var(--gold-line); }

/* Hover: alleen kleur, in 160 ms; een beeld zoomt hooguit 1,03 in 600 ms; geen optillen of verschuiven */
body.home .burnout .doors a { transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
body.home .burnout .doors a:hover svg, body.home .burnout .doors a:focus-visible svg { transform: none; }
body.home .found .card .kaart-link:hover .pijl svg { transform: none; }
body.home .found .card .pijl { transition: border-color .16s ease, background-color .16s ease; }
body.home .voices.proof .areas li { transition: background-color .16s ease; }
body.home .voices.proof .areas li:hover { transform: none; }
body.home .voices.proof .quotes.revs li { transition: border-color .16s ease; }
body.home main .textlink { transition: color .16s ease, border-color .16s ease; }
body.home main .textlink:hover svg { transform: none; }
body.home .faq summary { transition: color .16s ease; }
body.home .stap-knop .naam { transition: text-decoration-color .16s ease; }

/* Binnenkomst van blokken: van wazig naar scherp (dekking 0 naar 1, blur 8 naar 0, 8 px), 450 ms, gestaffeld kop, tekst (+80), knop (+160);
   één keer per element. Het script zet de klassen en haalt ze na afloop weer weg. Bij minder beweging staat alles meteen. */
html.js body.home .in-wacht { opacity: 0; filter: blur(8px); } /* zonder verschuiving: kwaliteitslat 6, Ryan "vervagen en verschijnen" (21 oktober) */
html.js body.home .in-wacht.in { opacity: 1; filter: blur(0); transform: none; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), filter .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--in-d, 0ms); }
@media (prefers-reduced-motion: reduce) { html.js body.home .in-wacht { opacity: 1; filter: none; transform: none; } }

@media (max-width: 820px) {
  body.home .faq .answer p, body.home .voices.proof .quotes.revs p { font-size: 16px; }
  body.home .voices.proof .quotes.revs li { flex: 0 0 86%; }
  body.home .founder.plaat .wrap { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  body.home .founder.plaat .photo { width: 120px; }
}

/* ---- Ryan 18/19 oktober: labkaart als rapport met categorieën (zoals Function), plankaart met de vijf funderingen die tegelijk lopen ---- */
body.home .gk-lab, body.home .gk-plan { width: 300px; }
body.home .lab-kop { display: flex; align-items: center; gap: 14px; }
body.home .ring-getal.klein { width: 60px; height: 60px; }
body.home .ring-getal.klein b { font-size: 19px; letter-spacing: -0.01em; }
body.home .lab-titel { font-size: 15px; color: var(--off); line-height: 1.3; }
body.home .lab-kop .gk-dim { font-size: 13px; margin-top: 2px; }
body.home .lab-cats, body.home .plan-rijen { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgb(var(--off-rgb) / 0.12); display: grid; gap: 9px; }
body.home .lab-cats li, body.home .plan-rijen li { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 12px; font-size: 14px; color: var(--off); white-space: nowrap; }
body.home .plan-rijen li { grid-template-columns: 9px 1fr 64px; gap: 10px; }
body.home .plan-rijen i:not(.balk) { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
body.home .gk .balk { display: block; height: 4px; border-radius: 4px; background: rgb(var(--off-rgb) / 0.14); overflow: hidden; }
body.home .gk .balk b { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--gold); transform-origin: left; transform: scaleX(var(--v)); }
body.home .plan-nu { margin-top: 12px !important; font-size: 13px !important; color: var(--accent-label) !important; }
body.home .plan-nu span { color: var(--off-dim); margin-right: 8px; }
/* opbouw: de balkjes vullen één keer als de plaat stilstaat */
html.js body.home .stapkaart .gk .balk b { transform: scaleX(0); }
html.js body.home .stapkaart.speel .gk .balk b { transform: scaleX(var(--v)); transition: transform .9s cubic-bezier(.22, 1, .36, 1) .5s; }
html.js body.home .stapkaart.speel .gk li:nth-child(2) .balk b { transition-delay: .6s; }
html.js body.home .stapkaart.speel .gk li:nth-child(3) .balk b { transition-delay: .7s; }
html.js body.home .stapkaart.speel .gk li:nth-child(4) .balk b { transition-delay: .8s; }
html.js body.home .stapkaart.speel .gk li:nth-child(5) .balk b { transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) { html.js body.home .stapkaart .gk .balk b { transform: scaleX(var(--v)); transition: none; } }
@media (max-width: 820px) {
  body.home .gk-lab, body.home .gk-plan { width: 78%; }
  body.home .ring-getal.klein { width: 48px; height: 48px; }
  body.home .ring-getal.klein b { font-size: 15px; }
  body.home .lab-cats, body.home .plan-rijen { margin-top: 10px; padding-top: 8px; gap: 6px; }
  body.home .lab-cats li, body.home .plan-rijen li { font-size: 12.5px; grid-template-columns: 1fr 48px; }
  body.home .plan-rijen li { grid-template-columns: 8px 1fr 48px; }
}

/* ---- Waarom ELIMA als één kaart, zoals het lidmaatschapsblok van Function (Ryan, 19 oktober) ---- */
body.home .why .lid-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--panel); border: 1px solid rgb(var(--off-rgb) / 0.12); border-radius: 32px; padding: 64px 72px; max-width: 1120px; margin-inline: auto; box-shadow: 0 30px 60px -30px rgb(var(--shadow-rgb) / calc(0.5 * var(--sh))); }
body.home .why .lid-links { padding-right: 64px; border-right: 1px solid rgb(var(--off-rgb) / 0.12); display: flex; flex-direction: column; align-items: flex-start; }
body.home .why .lid-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-label); margin-bottom: var(--ruimte-label); }
body.home .why .lid-label svg { width: 20px; height: 20px; }
body.home .why .lid-links h2 { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); margin: 0; }
body.home .why .lid-getal { display: flex; align-items: baseline; gap: 10px; margin: 48px 0 0; }
body.home .why .lid-getal b { font-family: var(--serif); font-weight: 400; font-size: 88px; line-height: .9; color: var(--off); letter-spacing: -0.02em; }
body.home .why .lid-getal span { font-size: 22px; color: var(--off-dim); }
body.home .why .lid-sub { margin-top: 12px; font-size: 15px; color: var(--muted); }
body.home .why .lid-links .btn { margin-top: 32px; width: 100%; height: 52px; }
body.home .why .lid-lijst { list-style: none; margin: 0; padding: 0 0 0 64px; display: grid; gap: 18px; align-content: center; }
body.home .why .lid-lijst li { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 1.35; color: var(--off); }
body.home .why .lid-lijst svg { flex: none; width: 22px; height: 22px; color: var(--accent-text); }
@media (max-width: 1000px) {
  body.home .why .lid-kaart { grid-template-columns: 1fr; padding: 40px 32px; }
  body.home .why .lid-links { padding: 0 0 32px; border-right: 0; border-bottom: 1px solid rgb(var(--off-rgb) / 0.12); }
  body.home .why .lid-lijst { padding: 32px 0 0; gap: 14px; }
}
@media (max-width: 820px) {
  body.home .why .lid-kaart { padding: 28px 20px; border-radius: 24px; }
  body.home .why .lid-getal { margin-top: 28px; }
  body.home .why .lid-getal b { font-size: 64px; }
  body.home .why .lid-lijst li { font-size: 15px; text-wrap: pretty; }
}
/* oprichter: de naam kleiner, zoals versie 2 (Ryan, 18 oktober); wint van de algemene h2-regel */
body.home main > section.founder:not(.hero) h2:not(.stat) { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); }
/* labkaart compacter, zodat hij de buisjes vrijlaat */
body.home .gk-lab { width: 280px; padding: 14px 16px; }
body.home .gk-lab .ring-getal.klein { width: 48px; height: 48px; }
body.home .gk-lab .ring-getal.klein b { font-size: 15px; }
body.home .gk-lab .lab-cats { margin-top: 10px; padding-top: 10px; gap: 6px; }
body.home .gk-lab .lab-cats li { font-size: 13.5px; }
/* App & portaal kleiner (Ryan, 18 oktober: "een fucking groot blok"): de compositie 78% van de breedte, minder ruimte */
@media (min-width: 821px) {
  body.home .app-blok { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
  body.home .app-beeld { max-width: 860px; }
}
/* 94%: sterretje met de bron onderaan de pagina (Ryan, 19 oktober) */
body.home .proof .basis .ster { font-size: 12px; margin-left: 2px; vertical-align: super; }
body.home .proof .basis .ster a { color: var(--accent-text); text-decoration: none; }
body.home .bronnen { padding: 32px 0 40px; border-top: 1px solid var(--line); }
body.home .bron-94 { max-width: 80ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
body.home .bron-94 sup { color: var(--accent-text); margin-right: 4px; }
/* oprichter: Ryans eigen zin als citaat (19 oktober) */
body.home .founder.plaat .founder-quote { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--off); margin: -8px 0 24px; padding-left: 16px; border-left: 2px solid var(--accent-line); }

/* ---- App & portaal compact (Ryan, 18 en 19 oktober: "een fucking groot blok"): tekst links, beeld rechts, het blok past in één scherm ---- */
@media (min-width: 1001px) {
  body.home .app-blok { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
  body.home .app-blok .wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 72px; align-items: center; }
  body.home .app-tekst { text-align: left; margin-bottom: 0; }
  body.home .app-kop h2 { margin-bottom: var(--ruimte-lede); }
  body.home .app-blok .lede { margin: 0; max-width: 32ch; }
  body.home .app-lijst { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin-top: 24px; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }
  body.home .app-lijst li { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12); border-radius: 0; padding: 12px 0; font-size: 15px; gap: 12px; }
  body.home .app-beeld { width: 100%; max-width: 640px; margin-inline: auto 0; }
  body.home .app-beeld .opname-knop { top: auto; bottom: -40px; }
}
/* 94%: de zin op één regel, zonder losse "op" op de tweede regel (Ryan, 19 oktober) */
@media (min-width: 821px) { body.home .voices.proof .stat.inline, body.home .voices.proof.open .stat.inline { max-width: none; white-space: nowrap; } }
/* 94%: op de telefoon de pillen op hun eigen breedte, gecentreerd, niet uitgerekt over de hele rij (Ryan, 19 oktober: "die band van slaap niet zo groot") */
@media (max-width: 820px) {
  .proof .areas { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; max-width: 360px; margin-inline: auto; }
  .proof .areas li, .proof .areas li:nth-child(4), .proof .areas li:nth-child(5) { grid-column: auto; flex: 0 0 auto; min-height: 40px; padding: 0 18px; font-size: 14px; }
}
/* Waarom ELIMA: zonder het dubbele "66 dagen" onder de titel (Ryan, 19 oktober); de zin direct onder de titel */
body.home .why .lid-sub { margin-top: 14px; }
@media (min-width: 1001px) { body.home .why .lid-links { justify-content: center; } }
/* 15 nov (Ryan koos B): onder de titel zijn zin als lede. De ruimte was dubbel (16 onder de kop + 14 boven de regel); nu 16 zoals elke kop en lede. */
body.home .why .lid-sub { margin-top: 0; font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--muted); max-width: 30ch; }
@media (min-width: 1001px) { body.home .why .lid-links .btn { margin-top: var(--ruimte-inhoud); } }
/* Ontwerpkritiek 20 oktober (Design-plugin), zonder tekstwijzigingen:
   1. Telefoon: de vaste knop bedekte de cijfers in de opening. De knop in de opening staat er weer; de vaste knop komt pas als die uit beeld is (concept.js).
   2. Telefoon: de pauzeknop stond over het portaalscherm; nu onder het beeld.
   3. Burn-out: "Voor Organisaties" brak af en de twee kaarten waren ongelijk hoog. */
@media (max-width: 820px) {
  body.home .hero .actions .btn { display: inline-flex; }
  body.home .vast-cta { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  html.cta-wacht body.home .vast-cta { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 1000px) {
  body.home .app-beeld { margin-bottom: 44px; }
  body.home .app-beeld .opname-knop { top: auto; bottom: -44px; right: 0; }
}
@media (min-width: 821px) {
  body.home .burnout.strook .doors li { display: flex; }
  body.home .burnout.strook .doors a { flex: 1; white-space: nowrap; padding-inline: 28px; }
}
/* Stapelkaarten: titel en zin verticaal in het midden naast de foto, zodat er geen groot leeg vlak onder de tekst staat (Ryans keuze, 20 oktober) */
@media (min-width: 821px) { body.home .stap-inhoud { align-items: center; } }
/* App & portaal: de functies met de namen uit de app, elk met één regel (nacht 20 op 21 oktober, Ryans notitie 19 oktober) */
body.home .app-lijst.app-fn li { display: flex; align-items: flex-start; gap: 12px; white-space: normal; }
body.home .app-lijst.app-fn svg { margin-top: 2px; }
body.home .app-fn .fn { display: grid; gap: 2px; }
body.home .app-fn .fn b { font-weight: 600; font-size: 15px; color: var(--light-ink); }
body.home .app-fn .fn small { font-size: 14px; line-height: 1.4; color: var(--light-muted); }
@media (max-width: 1000px) {
  body.home .app-lijst.app-fn { flex-direction: column; flex-wrap: nowrap; gap: 0; max-width: 520px; margin-inline: auto; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); text-align: left; }
  body.home .app-lijst.app-fn li { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12); border-radius: 0; padding: 12px 0; }
}
@media (min-width: 1001px) { body.home .app-lijst.app-fn li { padding: 10px 0; } }
/* Vragen op home zoals op de subpagina's: kop links, vragen rechts (21 oktober, één bouwsteen op de hele site) */
@media (min-width: 1001px) {
  body.home .faq.band.light .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
  body.home .faq.band.light .faq-head { position: sticky; top: 120px; margin: 0; }
}
/* App & portaal, opnieuw (21 oktober, Ryan 19 oktober: geen scrollende opname, geen chatscherm, mooiere dashboardviews, niet te groot):
   het portaal als venster, één telefoon met Mijn data ervoor, en het coachbericht als glazen kaart. Stil beeld, alles leesbaar. */
body.home .app-beeld.app-comp { position: relative; aspect-ratio: 1.3 / 1; max-width: 640px; width: 100%; margin-inline: auto 0; }
body.home .app-comp .ac-venster { position: absolute; right: 0; top: 0; width: 86%; border-radius: 14px; overflow: hidden; background: #011400; border: 1px solid rgb(var(--ink-rgb) / 0.12); box-shadow: 0 30px 60px rgb(var(--ink-rgb) / calc(0.22 * var(--sh))); }
body.home .app-comp .ac-balk { display: flex; gap: 6px; padding: 9px 12px; background: #062006; }
body.home .app-comp .ac-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
body.home .app-comp .ac-venster img { display: block; width: 100%; height: auto; }
body.home .app-comp .ac-tel { position: absolute; left: 0; bottom: 0; width: 31%; border-radius: 26px; overflow: hidden; border: 5px solid #0d1a0d; background: #011400; box-shadow: 0 30px 60px rgb(var(--ink-rgb) / calc(0.3 * var(--sh))); }
body.home .app-comp .ac-tel img { display: block; width: 100%; height: auto; }
body.home .app-comp picture { display: contents; }
body.home .app-comp .gk.ac-coach { position: absolute; right: 4%; bottom: 2%; left: auto; top: auto; width: min(300px, 52%); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; }
body.home .app-comp .ac-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
body.home .app-comp .gk.ac-coach small { margin-bottom: 4px; }
body.home .app-comp .gk.ac-coach p { font-size: 14px; }
@media (max-width: 1000px) {
  body.home .app-beeld.app-comp { margin: 32px auto 0; aspect-ratio: 1.15 / 1; }
  body.home .app-comp .ac-tel { width: 36%; border-radius: 20px; border-width: 4px; }
  body.home .app-comp .gk.ac-coach { width: 62%; right: 0; bottom: 0; padding: 12px 14px; }
}
body.home .app-comp .gk.ac-coach { background: #072207; border-color: rgb(var(--off-rgb) / 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 20px 44px rgb(var(--ink-rgb) / calc(0.28 * var(--sh))); }
/* Stap 02: het notitieboek in avondlicht in plaats van de truifoto van burn-out (21 oktober) */
body.home .stap-beeld > picture > img.pos-boek { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Stapel, stap 02 en 03 (21 oktober, Ryan: "foto's en de app-introductiefoto zijn ondermaats"): geen stockfoto's meer, maar een productvlak
   met echte schermen. Stap 02: het portaal met de modules achter de plankaart. Stap 03: de telefoon met Mijn data, de coach en de slaapgrafiek. */
body.home .stap-beeld.stage { background: radial-gradient(90% 80% at 70% 20%, rgb(var(--gold-rgb) / calc(0.16 * var(--glow))), transparent 62%), radial-gradient(70% 70% at 10% 100%, rgba(13, 45, 13, 0.9), transparent 70%), #031a03; border: 1px solid rgb(var(--off-rgb) / 0.08); }
body.home .stage .st-venster { position: absolute; right: -8%; top: 9%; width: 92%; border-radius: 12px; overflow: hidden; border: 1px solid rgb(var(--off-rgb) / 0.12); box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / calc(0.5 * var(--sh))); background: #011400; }
body.home .stage .st-balk { display: flex; gap: 6px; padding: 8px 11px; background: #062006; }
body.home .stage .st-balk i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
body.home .stage .st-venster img, body.home .stage .st-tel img { display: block; width: 100%; height: auto; position: static; }
body.home .stage picture { display: contents; }
body.home .stage .st-tel { position: absolute; right: 9%; top: 7%; width: 37%; border-radius: 26px; overflow: hidden; border: 5px solid #0d1a0d; background: #011400; box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / calc(0.55 * var(--sh))); }
body.home .stage-app .gk.twee { left: 20px; right: auto; top: 20px; width: 236px; }
body.home .stage-app .gk.hoofd { left: 20px; bottom: 20px; width: 300px; }
@media (max-width: 820px) {
  body.home .stage .st-venster { right: -14%; top: 8%; width: 100%; }
  body.home .stage .st-tel { right: 7%; top: 6%; width: 44%; border-radius: 20px; border-width: 4px; }
  body.home .stage-app .gk.hoofd { width: 70%; }
}
/* Ruimte strakker (21 oktober, Ryan: "spacing ondermaats"): sectiepadding 88 in plaats van 108, zodat tussen de inhoud van twee secties 176 staat in plaats van 216 */
@media (min-width: 821px) { body.home main > section.stappen.stapel-sectie:not(.hero) { padding-top: var(--sec) !important; } }
/* Telefoon: in App & portaal eerst de kop, dan het beeld, dan de functies (21 oktober) */
@media (max-width: 1000px) {
  body.home .app-blok .wrap { display: flex; flex-direction: column; }
  body.home .app-blok .app-tekst { display: contents; }
  body.home .app-blok .app-kop { order: 1; }
  body.home .app-blok .app-beeld { order: 2; margin: 28px auto 8px; }
  body.home .app-blok .app-lijst { order: 3; margin-top: 28px; }
}
/* Koppen met een evenwichtige regelval, zonder een los woord op de laatste regel (21 oktober) */
body.home main h1, body.home main h2, body.home main h3 { text-wrap: balance; }
body.home .stap-kop h2 { max-width: 20ch; }
/* Telefoon (21 oktober): de oprichter onder elkaar in plaats van een gekrompen tweekolomsblok; in stap 01 de buisjes in beeld boven de labkaart */
@media (max-width: 820px) {
  body.home .founder.plaat .wrap { grid-template-columns: 1fr; row-gap: 24px; }
  body.home .founder.plaat .photo { width: 200px; }
  body.home .stap-beeld > picture > img.pos-buisjes { object-position: 35% 92%; }
}
@media (max-width: 820px) {
  body.home .stap-beeld:has(.pos-buisjes) { aspect-ratio: 4 / 5; }
  body.home .stap-beeld:has(.pos-buisjes) .gk.hoofd { top: 12px; bottom: auto; width: 64%; }
  body.home .stap-beeld > picture > img.pos-buisjes { object-position: 60% 100%; }
}

/* ===== Na de denkpartner (21 oktober) ===== */
/* De kaart "Je plan" zonder nagemaakte voortgangsbalken: de vijf funderingen, de module van deze week uitgelicht */
body.home .plan-rijen li { grid-template-columns: 9px minmax(0, 1fr) auto; }
body.home .plan-rijen li:not(.nu) { color: var(--off-dim); }
body.home .plan-rijen li em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--badge-fg); background: var(--badge-bg); border-radius: 999px; padding: 2px 8px; }
/* De kop op drie regels zoals geschreven ("weer de regie over" bleef niet heel) */
@media (min-width: 1100px) { body.home .hero h1 { max-width: none; white-space: nowrap; } }
/* 15 nov (Ryan: "als je een scherm kleiner maakt, dan wordt die titel steeds groot ten opzichte van de rest"): onder 1100 gaf max-width 11ch
   vier regels met "over" alleen. Nu ook daar drie regels: de maat volgt de breedte, zodat "weer de regie over" (9,2 em) altijd past. */
@media (min-width: 821px) and (max-width: 1099px) { body.home .hero h1 { max-width: none; white-space: nowrap; font-size: min(var(--fs-h1), calc((50vw - 72px) / 9.3)); } }
@media (max-width: 820px) { body.home .hero h1 { max-width: none; font-size: min(44px, calc((100vw - 40px) / 9.3)); } body.home .hero h1 br { display: inline; } }
/* De tweede handeling in de opening als omlijnde knop, gelijk aan de subpagina's */
.hero .actions .textlink { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 1px solid rgb(var(--off-rgb) / 0.32); border-radius: 999px; text-decoration: none; background-image: none; font-size: 15px; font-weight: 500; color: var(--off); transition: border-color .2s ease, background-color .2s ease; }
.hero .actions .textlink::after { display: none; }
.hero .actions .textlink:hover { border-color: var(--accent-line); background-color: rgb(var(--gold-rgb) / calc(0.08 * var(--glow))); }
/* Statlabels in de opening op één regel, de rij zo breed als de inhoud */
@media (min-width: 1100px) { .hero-stats span { white-space: nowrap; } body.home .hero .hero-stats { max-width: none; width: max-content; } }
.hero .actions { flex-wrap: wrap; } .hero .actions .btn, .hero .actions .textlink { white-space: nowrap; }
/* Oprichter en Waarom als één paar: dezelfde kaart, dezelfde breedte, op dezelfde as (kritiekpunt 7) */
@media (min-width: 821px) {
  body.home main > section.founder.plaat:not(.hero) { margin: 0; background: none; border-radius: 0; padding-bottom: 0 !important; }
  body.home .founder.plaat .wrap { width: min(100% - 2 * var(--gutter), 1120px); max-width: 1120px; margin-inline: auto; justify-content: start; grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; background: var(--panel); border: 1px solid rgb(var(--off-rgb) / 0.12); border-radius: 32px; padding: 56px 72px; box-shadow: 0 30px 60px -30px rgb(var(--shadow-rgb) / calc(0.5 * var(--sh))); }
  body.home main > section.founder.plaat + section.why:not(.hero) { padding-top: 24px !important; }
}
/* Stap 01: de labkaart steekt links en onder over de rand van de foto, zodat de buisjes vrij blijven (zoals de plankaart in stap 02) */
@media (min-width: 821px) { body.home .stap-beeld:has(.pos-buisjes) { overflow: visible; } body.home .stap-beeld:has(.pos-buisjes) .gk.hoofd { left: -64px; bottom: -28px; width: 268px; } }
/* De labcategorieën met een gouden vinkje (staat in je rapport), zoals op de subpagina's */
body.home .lab-cats li { grid-template-columns: minmax(0, 1fr) 16px; }
body.home .lab-cats li::after { content: ""; width: 14px; height: 14px; justify-self: end; background: var(--accent-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Stap 02 en 03: het beeld vrij op de stapkaart, zonder eigen vlak en rand (geen doos in doos); in stap 03 alleen telefoon en coach, zoals de tekst zegt */
@media (min-width: 821px) {
  body.home .stap-beeld.stage { background: radial-gradient(70% 70% at 60% 40%, rgb(var(--gold-rgb) / calc(0.13 * var(--glow))), transparent 70%); border: 0; overflow: visible; box-shadow: none; }
  body.home .stage .st-venster { right: 0; }
  body.home .stage-app .gk-grafiek { display: none; }
  body.home .stage-app .st-tel { right: 20%; }
  body.home .stage-app .gk.hoofd { left: 2%; bottom: 14%; width: 300px; }
}
/* Keuring Fable 5: oprichter en Waarom op dezelfde breedte en linkerrand als de rest van de pagina (1176, x 64), niet 1120 */
@media (min-width: 821px) {
  body.home main > section.founder.plaat { --gutter: 64px; }
  body.home .founder.plaat .wrap { width: min(100% - 2 * var(--gutter), var(--content)); max-width: none; }
  body.home .why .lid-kaart { max-width: none; }
}
/* Keuring Fable 7: de telefoon dekte de zijbalk van het portaal; nu venster links, telefoon rechts, coachkaart links onder */
@media (min-width: 821px) { body.home .app-comp .ac-venster { left: 0; right: auto; width: 84%; } body.home .app-comp .ac-tel { left: auto; right: 0; width: 30%; } body.home .app-comp .gk.ac-coach { left: 6%; right: auto; bottom: 2%; } }
/* Keuring Fable 4: na de laatste plaat korter stilstaan (was 60vh lege scroll, nu 40vh: de laatste plaat staat nog even stil); de gouden lijn vult mee */
/* Lezer 06:40: de inhoud van de oprichterskaart in het midden van de brede kaart (rechts bleef een derde leeg); de twee burn-outtegels even breed */
@media (min-width: 821px) { body.home .founder.plaat .wrap { justify-content: center; grid-template-columns: 240px minmax(0, 600px); } }
@media (min-width: 821px) { body.home .burnout.strook .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, 100%); } }
/* Lezer 06:40: de portaalschermen waren te klein om te lezen; het venster toont nu de linkerbovenhoek iets ingezoomd (zijbalk en kaarten ~30% groter), het venster blijft even groot */
@media (min-width: 821px) {
  body.home .app-comp .ac-venster picture, body.home .stage .st-venster picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  body.home .app-comp .ac-venster img, body.home .stage .st-venster img { width: 130%; max-width: none; }
}
/* Lezer 06:40: op de telefoon eerst wat je krijgt, dan de knop (de knop stond vóór de opsomming) */
@media (max-width: 1000px) {
  body.home .why .lid-kaart { display: flex; flex-direction: column; }
  body.home .why .lid-links { display: contents; }
  body.home .why .lid-links > * { align-self: flex-start; }
  body.home .why .lid-lijst { order: 1; padding: 24px 0 0; margin-top: 24px; border-top: 1px solid rgb(var(--off-rgb) / 0.12); }
  body.home .why .lid-links .btn { order: 2; align-self: stretch; margin-top: 28px; }
}
/* Op hogere schermen (1440x900) bleef onder in elke stapplaat ~300 px leeg: de inhoud staat nu midden in de plaat */
@media (min-width: 821px) { body.home .stapkaart > .wrap { display: flex; flex-direction: column; } body.home .stapkaart .stap-inhoud { margin-block: auto; } }
/* Oprichter en Waarom als paar: dezelfde kaarttitel (44), lager dan de sectiekoppen (56) */
body.home main > section.why .lid-links h2, body.home main > section.founder .founder-copy h2 { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); }
/* De bewegingsfoto heeft een groene lensvlek links van het midden: in staande kaarten valt hij zo buiten beeld (lezer 06:40) */
img[src*="/images/beweging."] { object-position: 100% 50%; }
/* Telefoon: de oprichterskaart even breed als de Waarom-kaart (20 marge) en minder lucht bovenin; daartussen 16 */
@media (max-width: 820px) {
  body.home main > section.founder.plaat:not(.hero) { margin: 0; padding-top: var(--sec) !important; padding-bottom: 0 !important; background: none; border-radius: 0; border: 0; }
  body.home main > section.founder.plaat .wrap { width: auto; margin-inline: 20px; padding: 28px 20px 32px; background: var(--panel); border: 1px solid rgb(var(--off-rgb) / 0.12); border-radius: 24px; }
  body.home main > section.founder.plaat + section.why:not(.hero) { padding-top: 16px !important; }
}
/* Het portaalscherm "Modules" zegt "Komt vrij dinsdag", de site "elke vrijdag" (lezer 06:40). Tot Colin een nieuw scherm maakt: alleen de bovenste 63% (zijbalk, de afgeronde weken en de titels van week 7 tot 9) */
.bs-venster picture.uitsnede-modules, body.home .stage .st-venster picture.uitsnede-modules, .bs-krijgt .bs-raam.bs-scherm picture.uitsnede-modules, .bs-venster picture:has(img[src*="portaal-modules"]), body.home .stage .st-venster picture:has(img[src*="portaal-modules"]), .bs-krijgt .bs-raam.bs-scherm picture:has(img[src*="portaal-modules"]) { display: block; aspect-ratio: 16 / 9 !important; overflow: hidden; }
.bs-venster img[src*="portaal-modules"], body.home .stage .st-venster img[src*="portaal-modules"], .bs-krijgt .bs-raam.bs-scherm img[src*="portaal-modules"] { width: 143% !important; max-width: none !important; height: auto !important; max-height: none !important; }
/* Lezer 06:40: voetlinks op de telefoon met een tikvlak van ongeveer 40 px */
@media (max-width: 820px) { .footer .cols div { gap: 0; } .footer .cols a { display: inline-block; padding-block: 9px; } .footer .cols b { margin-bottom: 4px; } }
/* Het mailadres onder de slotknop als link */
span.small a[href^="mailto:"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--gold-edge-rgb) / calc(0.55 * var(--edge))); }
span.small a[href^="mailto:"]:hover { color: var(--off); text-decoration-color: var(--accent-line); }
/* Het notitieboek staat onderin de foto: in liggende kaarten de uitsnede lager, zodat het boek in beeld is (lezer: donker en onduidelijk) */
.bs-deuren img[src*="/images/reflectie-notitieboek."], .bw img[src*="/images/reflectie-notitieboek."] { object-position: 50% 88%; }
/* Lezer 07:20: een zichtbare naad waar de foto in de opening begint; het verloop is nu breder en begint volledig donker */
@media (min-width: 821px) { .hero-media:not(.bs-vis)::after { background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 6%, rgb(var(--bg-rgb) / 0.72) 22%, rgb(var(--bg-rgb) / 0.3) 42%, rgb(var(--bg-rgb) / 0) 62%), linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 70%, rgb(var(--bg-rgb) / 0.35) 100%); } }
/* Waarom-kaart: "Het 66 Dagen Traject" niet als "Het 66 / Dagen Traject" */
body.home .why .lid-links h2 { text-wrap: balance; }
/* Lezer 07:20 */
/* Burn-outband: 16 px tussen de tegels, kop met regelafstand 1,15 */
@media (min-width: 821px) { body.home .burnout.strook .doors { gap: 16px !important; } }
body.home .burnout.strook h2 { line-height: var(--lh-stap); }
/* Uitsneden van het modulescherm: rechts net na de tweede kolom (geen half afgesneden kaart), onderaan een zachte overgang */
.bs-venster picture.uitsnede-modules img, body.home .stage .st-venster picture.uitsnede-modules img, .bs-krijgt .bs-raam.bs-scherm picture.uitsnede-modules img { width: 141% !important; }
picture.uitsnede-modules { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
/* Telefoon: tekstlinks met een tikvlak van 44 px en dezelfde lettergrootte als de zin eromheen */
@media (max-width: 820px) { main .textlink { min-height: 44px; display: inline-flex; align-items: center; } main p .textlink, main .lede .textlink { min-height: 0; font-size: inherit; } }
/* Lezer 07:20, telefoon: de kaarten in stap 02 en 03 kleiner en onderaan, zodat ze het scherm minder afdekken */
@media (max-width: 820px) {
  body.home .stage-plan .st-venster { top: 4%; }
  body.home .stage-plan .gk.hoofd.gk-plan { width: 60%; left: 8px; bottom: 8px; padding: 10px 12px; }
  body.home .stage-plan .plan-rijen { margin-top: 8px; padding-top: 6px; gap: 3px; }
  body.home .stage-plan .plan-rijen li em { font-size: 9.5px; padding: 1px 6px; }
  body.home .stage-app .st-tel { right: 4%; }
  body.home .stage-app .gk.hoofd { width: 56%; left: 8px; bottom: 8px; }
  body.home .stage-app .gk.hoofd p { font-size: 12.5px; }
}
/* Lezer 07:20: op de telefoon de inhoud van de stapplaten op dezelfde 20 px rand als de rest van de pagina (was 16) */
@media (max-width: 820px) { body.home .stapkaart > .wrap { width: calc(100% - 40px); } }
/* Juridische pagina's: de gouden stip in de inhoudsopgave op het midden van de regel (stond 6 px te hoog) */
.policy .toc li::before { top: 17px !important; }
/* Het bospad in liggende deurkaarten: het pad in beeld in plaats van de onscherpe takken bovenin (lezer 07:20) */
.bs-deuren img[src*="/images/natuur-bospad."], .bw img[src*="/images/natuur-bospad."], .panel .visual img[src*="/images/natuur-bospad."] { object-position: 50% 78%; }
/* Lezer 07:20: het slotblok zei drie keer hetzelfde (label "Kennismaken", kop "Plan een kennismaking." en de knop); het label vervalt */
section#kennismaken.band.close > .wrap > .label, section#kennismaken.band.close .label, section#kennismaken.afsluiter .label { display: none; }

/* App & portaal op de telefoon (keuring Fable, 21 oktober): drie beelden over elkaar in 350 × 304 was onleesbaar. Op de telefoon één beeld met één kaart: de telefoon groot, de coachkaart ernaast; het portaalvenster alleen vanaf 821. */
@media (max-width: 820px) {
  body.home #app .app-comp { aspect-ratio: auto; height: 380px; }
  body.home #app .app-comp .ac-venster { display: none; }
  body.home #app .app-comp .ac-tel { left: 0; right: auto; top: 0; bottom: auto; width: 44%; }
  body.home #app .app-comp .ac-coach { left: auto; right: 0; top: auto; bottom: 8%; width: 55%; }
}

/* Richting A (Ryan, 21 oktober): op de foto's van het stappenplan alleen één echt element uit de app, of één feit. Geen coachzinnen, geen zelfbedachte lijstjes. */
body.home .stap-beeld > picture > img.pos-notitieboek { object-position: 50% 82%; }
body.home .gk.gk-feit { width: auto; padding: 16px 20px 15px; }
body.home .gk-feit b { display: block; font: 400 44px/1 var(--serif); color: var(--accent-text); letter-spacing: -0.01em; }
body.home .gk-feit span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--off); }
body.home .gk.gk-ui { padding: 0; overflow: hidden; background: #011400; border-color: rgb(var(--off-rgb) / 0.18); box-shadow: 0 22px 48px rgb(var(--shadow-rgb) / calc(0.4 * var(--sh))); }
body.home .gk.gk-ui picture, body.home .gk.gk-ui img { display: block; width: 100%; height: auto; }
body.home .gk.gk-ui-module { width: 300px; }
body.home .gk.gk-ui-score { width: 320px; }
@media (min-width: 821px) {
  body.home .stap-beeld.stap-foto { overflow: visible; }
  body.home .stap-beeld.stap-foto > picture > img { border-radius: 16px; }
  body.home .stap-beeld.stap-foto .gk.hoofd { left: -64px; bottom: -28px; }
  body.home .stap-beeld:has(.pos-buisjes) .gk.gk-feit { width: auto; }
}
@media (max-width: 820px) {
  body.home .gk-feit b { font-size: 34px; }
  body.home .gk-feit span { font-size: 13px; }
  body.home .gk.gk-ui-module, body.home .gk.gk-ui-score { width: 74%; }
  body.home .stap-beeld:has(.pos-buisjes) .gk.gk-feit { top: auto; bottom: 12px; width: auto; }
}
/* De tegel Uitgerustheid uit Mijn data is zelf al een kaart: geen tweede rand eromheen */
body.home .gk.gk-ui-score { width: 224px; background: transparent; border: 0; border-radius: 15px; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 820px) { body.home .gk.gk-ui-score { width: 46%; } }

/* App & portaal als vastgezet blok (Ryan, 21 oktober): tekst links blijft staan, rechts wisselt het beeld bij het scrollen van drie appschermen naar het portaal.
   De wissel hangt aan de scroll (halverwege het blok) en duurt 0,6 s: alleen dekking en blur, geen verschuiving. Op tablet en telefoon staan beide standen onder elkaar. */
body.home .app-standen { display: flex; gap: 8px; margin: 22px 0 6px; }
body.home .app-standen span { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(var(--ink-rgb) / 0.18); color: rgb(var(--ink-rgb) / 0.55); transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
body.home .app-standen span.aan { color: var(--sel-fg); background: var(--gold-btn); border-color: var(--gold-btn); }
body.home .app-podium { position: relative; }
body.home .ap-stand { transition: opacity .6s cubic-bezier(.22, 1, .36, 1), filter .6s cubic-bezier(.22, 1, .36, 1); }
body.home .ap-app { display: flex; justify-content: center; align-items: center; gap: 22px; }
body.home .ap-tel { width: 28%; max-width: 236px; border-radius: 34px; overflow: hidden; border: 6px solid #0d1a0d; background: #011400; box-shadow: 0 34px 70px rgb(var(--ink-rgb) / calc(0.28 * var(--sh))); }
body.home .ap-tel.ap-mid { width: 32%; max-width: 270px; }
body.home .ap-tel img, body.home .ap-venster img { display: block; width: 100%; height: auto; }
body.home .ap-venster { border-radius: 14px; overflow: hidden; background: #011400; border: 1px solid rgb(var(--ink-rgb) / 0.12); box-shadow: 0 34px 70px rgb(var(--ink-rgb) / calc(0.24 * var(--sh))); }
body.home .ap-venster .ac-balk { display: flex; gap: 6px; padding: 10px 14px; background: #062006; }
body.home .ap-venster .ac-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
@media (min-width: 1001px) {
  body.home main > section.app-wissel { height: 210vh; padding-top: 0 !important; padding-bottom: 0 !important; }
  body.home .app-wissel .app-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; align-items: center; }
  body.home .app-wissel .app-pin > .wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 72px; align-items: center; width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
  body.home .app-wissel .app-podium { height: min(620px, 74vh); }
  body.home .app-wissel .ap-stand { position: absolute; inset: 0; }
  body.home .app-wissel .ap-tel.ap-mid { margin-top: -28px; }
  body.home .app-wissel .ap-portaal { display: flex; align-items: center; }
  body.home .app-wissel .ap-venster { width: 100%; }
  body.home .app-wissel[data-stand="app"] .ap-portaal, body.home .app-wissel[data-stand="portaal"] .ap-app { opacity: 0; filter: blur(10px); pointer-events: none; }
}
@media (max-width: 1000px) {
  body.home .app-standen { display: none; }
  body.home .app-podium { display: grid; gap: 28px; margin-top: 32px; }
  body.home .ap-app { gap: 12px; }
  body.home .ap-tel { border-radius: 22px; border-width: 4px; }
}
@media (prefers-reduced-motion: reduce) { body.home .ap-stand, body.home .app-standen span { transition: none; } }
/* Telefoon: kop, dan de schermen, dan de functies (zelfde volgorde als eerder het app-beeld) */
@media (max-width: 1000px) { body.home .app-blok .app-podium { order: 2; margin: 28px 0 8px; } body.home .app-blok .app-standen { order: 1; } }

/* De bron van de 94% hoort bij de kleine lettertjes: in de voet, boven de onderste regel, op dezelfde breedte (Ryan, 21 oktober: "tussen gepropt") */
.footer .bron-94 { max-width: 88ch; margin: 0; padding: 22px 0 0; border-top: 1px solid rgb(var(--off-rgb) / 0.1); font-size: 13px; line-height: 1.6; color: var(--muted); }
.footer .bron-94 sup { color: var(--accent-text); margin-right: 4px; }
.footer .cols + .bron-94 { margin-top: var(--s4); }
.footer .bron-94 + .bottom { margin-top: 14px; padding-top: 0; border-top: 0; }

/* ===== App & portaal, ronde 2 (Ryan, 21 oktober middag) =====
   Twee kolommen: links scrollen de delen door (De app, Je data), rechts blijft een donker vlak staan zoals bij Oura, met drie telefoons
   die elkaar licht overlappen. Het vlak verandert mee met het deel dat in beeld is. De middelste telefoon is een nagebouwd Mijn data-scherm
   uit de app (zelfde maten en kleuren), waarvan de cirkels vollopen. */
body.home .app-scroll .wrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 72px; align-items: start; }
body.home .as-label { font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink-2); margin: 0 0 14px; }
body.home .as-deel .app-lijst.app-fn { margin: 0; max-width: none; }
body.home .as-rechts { position: relative; }
body.home .as-vlak { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #0d2d0d 0%, #011400 70%); border-radius: 28px; }
body.home .as-waaier { position: absolute; inset: 0; }
body.home .as-tel { position: absolute; top: 9%; width: 34%; aspect-ratio: 1206 / 2622; border-radius: 9% / 4.2%; overflow: hidden; border: 5px solid #1a2a1a; background: #011400; box-shadow: 0 40px 80px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); container-type: inline-size; transition: opacity .6s ease, filter .6s ease, scale .6s cubic-bezier(.22, 1, .36, 1); }
body.home .as-tel picture, body.home .as-tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
body.home .as-tel.as-l { left: 4%; transform: perspective(1600px) rotateY(16deg) translateY(calc(var(--p, 0.5) * -48px + 40px)); transform-origin: right center; z-index: 1; }
body.home .as-tel.as-r { right: 4%; transform: perspective(1600px) rotateY(-16deg) translateY(calc(var(--p, 0.5) * -48px + 40px)); transform-origin: left center; z-index: 1; }
body.home .as-tel.as-m { left: 33%; top: 5%; width: 36%; z-index: 2; transform: translateY(calc(var(--p, 0.5) * -24px + 12px)); }
body.home .as-vlak[data-stand="data"] .as-tel.as-l, body.home .as-vlak[data-stand="data"] .as-tel.as-r { opacity: .38; filter: blur(1.5px); }
body.home .as-vlak[data-stand="data"] .as-tel.as-m { scale: 1.05; }
body.home .as-scherm { width: 100%; height: 100%; }

/* nagebouwd Mijn data-scherm; maten in punten van het echte scherm (402 breed) */
body.home .md { --u: calc(100cqw / 402); box-sizing: border-box; height: 100%; padding: calc(16 * var(--u)) calc(14 * var(--u)) 0; background: #011400; color: #eceae4; font-family: var(--sans); position: relative; overflow: hidden; }
body.home .md * { box-sizing: border-box; }
body.home .md p { margin: 0; }
body.home .md-top { display: flex; justify-content: space-between; align-items: center; }
body.home .md-terug { display: inline-flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #0a240a; border: 1px solid rgb(var(--off-rgb) / 0.1); font-size: calc(15 * var(--u)); }
body.home .md-chat { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #0a240a; border: 1px solid rgb(var(--off-rgb) / 0.1); }
body.home .md-datum { margin-top: calc(16 * var(--u)) !important; font-size: calc(13 * var(--u)); color: rgb(var(--off-rgb) / 0.62); }
body.home .md-titel { font: 400 calc(28 * var(--u)) / 1.2 var(--serif); margin: calc(2 * var(--u)) 0 calc(16 * var(--u)) !important; }
body.home .md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
body.home .md-tegel { background: #072207; border: 1px solid rgb(var(--off-rgb) / 0.08); border-radius: calc(18 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); height: calc(166 * var(--u)); display: flex; flex-direction: column; }
body.home .md-tegel.md-laag { height: calc(136 * var(--u)); }
body.home .md-lab { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(14 * var(--u)); color: rgb(var(--off-rgb) / 0.62); }
body.home .md-lab svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; }
body.home .md-ring { position: relative; width: calc(90 * var(--u)); aspect-ratio: 1; margin: auto auto calc(6 * var(--u)); }
body.home .md-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
body.home .md-baan { fill: none; stroke: rgb(var(--off-rgb) / 0.08); stroke-width: 3.4; }
body.home .md-vul { fill: none; stroke: #ddaa6a; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
body.home .md.speelt .md-vul { stroke-dashoffset: var(--doel); }
body.home .md-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 400; font-size: calc(27 * var(--u)); font-variant-numeric: tabular-nums; }
body.home .md-bpm { margin: auto 0 0; text-align: center; }
body.home .md-bpm b { font-weight: 400; font-size: calc(32 * var(--u)); }
body.home .md-bpm span { font-size: calc(14 * var(--u)); color: rgb(var(--off-rgb) / 0.62); margin-left: calc(5 * var(--u)); }
body.home .md-sub { text-align: center; font-size: calc(12.5 * var(--u)); line-height: 1.45; color: rgb(var(--off-rgb) / 0.62); margin: calc(4 * var(--u)) 0 auto !important; }
body.home .md-waarde { font-size: calc(18 * var(--u)); margin-top: auto !important; }
body.home .md-balk { display: flex; gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); }
body.home .md-balk i { height: calc(6 * var(--u)); border-radius: 99px; background: #ddaa6a; flex: 0 0 22%; }
body.home .md-balk i + i { background: #7fb07a; flex: 1; }
body.home .md-leg { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)) !important; font-size: calc(12.5 * var(--u)); color: rgb(var(--off-rgb) / 0.62); }
body.home .md-leg span::before { content: ""; display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #ddaa6a; margin-right: calc(6 * var(--u)); vertical-align: middle; }
body.home .md-leg span + span::before { background: #7fb07a; }
body.home .md-blokken { display: flex; gap: calc(5 * var(--u)); margin: calc(10 * var(--u)) 0 calc(8 * var(--u)); }
body.home .md-blokken i { flex: 1; height: calc(6 * var(--u)); border-radius: 99px; background: #ddaa6a; }
body.home .md-blokken i:last-child { background: rgb(var(--off-rgb) / 0.1); }
body.home .md-nav { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(18 * var(--u)); display: flex; gap: calc(10 * var(--u)); align-items: center; }
body.home .md-tabs { flex: 1; display: flex; justify-content: space-around; height: calc(60 * var(--u)); align-items: flex-end; padding-bottom: calc(10 * var(--u)); border-radius: 999px; background: #0a240a; border: 1px solid rgb(var(--off-rgb) / 0.1); font-size: calc(11 * var(--u)); font-weight: 600; color: #eceae4; }
body.home .md-tabs span:last-child { color: #ddaa6a; }
body.home .md-plus { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #0a240a; border: 1px solid rgb(var(--off-rgb) / 0.1); font-size: calc(26 * var(--u)); color: #eceae4; }

/* de losse tegel in stap 03: zelfde tegel, eigen maat (176 breed in de app) */
body.home .gk.gk-levend { container-type: inline-size; overflow: visible; }
body.home .md.md-los { --u: calc(100cqw / 176); padding: 0; background: transparent; height: auto; overflow: visible; }
body.home .md-los .md-tegel { box-shadow: 0 22px 48px rgb(var(--shadow-rgb) / calc(0.4 * var(--sh))); }

@media (max-width: 1000px) {
  body.home .app-scroll .wrap { display: flex; flex-direction: column; }
  body.home .as-links { display: contents; }
  body.home .app-scroll .app-kop { order: 1; }
  body.home .as-rechts { order: 2; width: 100%; margin: 28px 0 8px; }
  body.home .as-deel { order: 3; margin-top: 24px; }
  body.home .as-vlak { height: auto; aspect-ratio: 1 / 0.9; max-height: 560px; }
  body.home .as-tel { width: 38%; top: 8%; }
  body.home .as-tel.as-l { left: 2%; }
  body.home .as-tel.as-r { right: 2%; }
  body.home .as-tel.as-m { width: 40%; left: 30%; top: 5%; }
  body.home .as-tel { border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .md-vul, body.home .as-tel, body.home .as-deel { transition: none; }
  body.home .as-tel.as-l, body.home .as-tel.as-r, body.home .as-tel.as-m { --p: 0.5; }
}

/* Stappenplan zonder loze ruimte (Ryan, 21 oktober): de foto vult de hoogte van de plaat (tot 760), de tekst staat er in het midden naast. */
@media (min-width: 821px) {
  body.home .stapkaart .stap-inhoud { flex: 1 1 auto; min-height: 0; margin: 12px 0 36px; align-items: stretch; }
  body.home .stapkaart .stap-tekst { align-self: center; }
  body.home .stapkaart .stap-beeld { aspect-ratio: auto; height: 100%; max-height: 760px; align-self: center; }
}
/* Stap 02: de hand met de telefoon en het Vandaag-scherm (Ryan, 21 oktober); de telefoon in het midden van de uitsnede */
body.home .stap-beeld > picture > img.pos-hand { object-position: 54% 50%; }

/* ===== App & portaal, ronde 3 (Ryan, 21 oktober): vijf onderdelen links, alleen de naam en één regel (geen inhoud van de app);
   rechts de drie telefoons, de middelste toont het onderdeel dat in beeld is, de buren de onderdelen ervoor en erna. Bij Het portaal wisselt het vlak naar het portaal.
   Onderzoek: _research/FUNCTIE-OVERZICHT-ONDERZOEK.md (Bevel, Attio, Raycast). */
body.home .as-deel h3 { margin: 0 0 8px; color: var(--light-ink); }
body.home .as-deel p { margin: 0; font-size: 17px; color: rgb(var(--ink-rgb) / 0.62); }
body.home .as-ook { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); font-size: 14px; color: rgb(var(--ink-rgb) / 0.62); }
body.home .as-ook span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-ink-2); margin: 0 20px 3px 0; vertical-align: middle; }
body.home .as-tel .sc { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.22, 1, .36, 1); }
body.home .as-tel .sc > picture, body.home .as-tel .sc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
body.home .as-tel[data-toon="0"] .sc[data-s="0"], body.home .as-tel[data-toon="1"] .sc[data-s="1"], body.home .as-tel[data-toon="2"] .sc[data-s="2"], body.home .as-tel[data-toon="3"] .sc[data-s="3"] { opacity: 1; }
body.home .as-tel.as-l, body.home .as-tel.as-r { opacity: .55; }
body.home .as-portaal { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 0 0 6%; opacity: 0; transition: opacity .6s ease, filter .6s ease; filter: blur(8px); pointer-events: none; }
body.home .as-portaal .as-venster { width: 118%; border-radius: 14px; overflow: hidden; border: 1px solid rgb(var(--off-rgb) / 0.12); box-shadow: 0 34px 70px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); }
body.home .as-venster .ac-balk { display: flex; gap: 6px; padding: 10px 14px; background: #062006; }
body.home .as-venster .ac-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
body.home .as-venster img { display: block; width: 100%; height: auto; }
body.home .as-vlak .as-waaier { transition: opacity .6s ease, filter .6s ease; }
body.home .as-vlak[data-i="4"] .as-waaier { opacity: 0; filter: blur(8px); }
body.home .as-vlak[data-i="4"] .as-portaal { opacity: 1; filter: none; }
body.home .as-klein { display: none; }
@media (max-width: 1000px) {
  body.home .app-scroll .wrap { display: block; }
  body.home .as-links { display: block; }
  body.home .as-rechts { display: none; }
  body.home .as-deel { min-height: 0; opacity: 1; margin-top: 36px; }
  body.home .as-klein { display: block; margin-top: 18px; }
  body.home .as-tel-los { width: 56%; margin: 0 auto; border-radius: 26px; overflow: hidden; border: 4px solid #1a2a1a; background: #011400; box-shadow: 0 24px 50px rgb(var(--ink-rgb) / calc(0.25 * var(--sh))); aspect-ratio: 1206 / 2622; }
  body.home .as-tel-los img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  body.home .as-klein .as-venster { border-radius: 12px; }
}
body.home .as-ook { gap: 6px 22px; }
body.home .as-ook span + span::before { content: none; }
@media (max-width: 1000px) {
  body.home .as-tel-los { aspect-ratio: 1206 / 1800; border-bottom: 0; border-radius: 26px 26px 0 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); box-shadow: none; }
  body.home .as-deel { margin-top: 28px; }
}
/* App & portaal: alleen de namen, geen uitleg eronder (Ryan, 21 oktober) */
body.home .as-deel h3 { margin: 0; }
/* Stappenplan op telefoon en kleine tablet (Ryan, 21 oktober: "veel ruimte boven en onder"): de foto hooguit 56% van het scherm hoog,
   zodat foto, label en tekst samen in één scherm passen. Op een telefoon van 390 blijft hij vierkant. */
@media (max-width: 820px) {
  body.home .stapkaart .stap-beeld { aspect-ratio: auto; height: min(100vw - 40px, 56vh); }
  body.home .stapkaart .stap-beeld:has(.pos-buisjes) { aspect-ratio: auto; height: min(100vw - 40px, 56vh); }
}

/* ===== App & portaal, ronde 4 (Ryan + ontwerpkritiek, 21 oktober): kop op 56 zoals de andere blokken; de vijf namen als rustige lijst
   (schreefloos, met icoon, geen eigen koppen meer) die met de kop blijft staan; een gouden lijn langs de lijst loopt mee met de scroll
   (zonder transitie); het actieve onderdeel wisselt per vijfde van het blok. Patroon Attio en Bevel. */
body.home .app-scroll .app-kop h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
body.home .as-lijst { position: relative; margin-top: var(--ruimte-inhoud); }
body.home .as-lijn { display: none; }
body.home .as-deel h3 { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-item)/var(--lh-item) var(--sans); color: var(--light-ink); }
body.home .as-deel h3 svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink-2); }

/* Stappenplan, ronde 2 (Ryan, 21 oktober: "veel ruimte boven en onder", "100+ op die plek"):
   foto hooguit 600 hoog, kop 64, het feit van stap 01 als groot getal in de tekstkolom; elementen uit de app binnen de foto met 24 marge. */
body.home .stap-feit { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgb(var(--off-rgb) / 0.14); max-width: 420px; }
body.home .stap-feit b { display: block; font: 400 56px/1 var(--serif); color: var(--accent-text); letter-spacing: -0.01em; }
body.home .stap-feit span { display: block; margin-top: 8px; font-size: 16px; color: rgb(var(--off-rgb) / 0.72); }
@media (min-width: 821px) {
  body.home .stapkaart .stap-tekst h3 { font-size: clamp(44px, 4.3vw, 64px); line-height: 1.04; }
  body.home .stapkaart .stap-beeld { max-height: 600px; }
  body.home .stap-beeld.stap-foto { overflow: hidden; }
  body.home .stap-beeld.stap-foto .gk.hoofd { left: 24px; bottom: 24px; }
}
@media (max-width: 820px) {
  body.home .stap-feit { margin-top: 20px; padding-top: 16px; }
  body.home .stap-feit b { font-size: 40px; }
}
@media (min-width: 821px) {
  body.home .stapkaart { height: min(calc(100vh - 24px - var(--i) * 64px), 740px); }
  body.home .stapkaart .stap-inhoud { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); column-gap: 96px; justify-content: stretch; }
  body.home .stapkaart .stap-beeld { width: 100%; }
}

/* ===== Stappenplan, opnieuw gebouwd (Ryan, 21 oktober: "niet tweaken, opnieuw"). Het stapelen, de rail en de animaties blijven.
   Opbouw naar Function Health: de inhoud staat bovenaan de plaat, direct onder het label; kop en foto beginnen op dezelfde hoogte.
   De foto 600 breed (576 : 470), het getal of de tegel uit de app groot en midden op de foto. Lege ruimte alleen onderaan, waar de volgende plaat overheen schuift. */
@media (max-width: 820px) { body.home .stapel-v2 .stapkaart { height: auto; padding-bottom: 24px; } }
body.home .stapel-v2 .sk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: clamp(64px, 7vw, 120px); align-items: start; margin-top: 28px; }
body.home .stapel-v2 .sk-tekst h3 { font: 400 var(--fs-stap)/var(--lh-stap) var(--serif); letter-spacing: var(--ls-stap); color: var(--off); margin: 0; text-wrap: balance; }
body.home .stapel-v2 .sk-tekst p { font-size: var(--fs-lede); line-height: var(--lh-lede); color: rgb(var(--off-rgb) / 0.72); max-width: 46ch; margin: 20px 0 0; }
body.home .stapel-v2 .sk-beeld { position: relative; aspect-ratio: 576 / 470; border-radius: 20px; overflow: hidden; background: var(--panel-hi); }
body.home .stapel-v2 .sk-beeld > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.home .stapel-v2 .sk-beeld img.sk-buisjes { object-position: 50% 80%; }
body.home .stapel-v2 .sk-beeld img.sk-hand { object-position: 54% 50%; }
body.home .stapel-v2 .gk.sk-glas { inset: 0; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: fit-content; height: fit-content; }
body.home .stapel-v2 .gk.sk-getal { padding: 20px 32px 18px; border-radius: 20px; text-align: center; background: rgb(var(--glass-rgb) / calc(0.5 + var(--glass-plus))); }
body.home .stapel-v2 .sk-getal b { display: block; font: 400 76px/1 var(--serif); color: var(--off); letter-spacing: -0.02em; }
body.home .stapel-v2 .sk-getal span { display: block; margin-top: 6px; font-size: 16px; color: rgb(var(--off-rgb) / 0.82); }
body.home .stapel-v2 .gk.sk-tegel { width: 224px; padding: 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; container-type: inline-size; }
@media (max-width: 820px) {
  body.home .stapel-v2 .stapkaart .tab { order: 0; margin: 0 0 24px; }
  body.home .stapel-v2 .sk { order: 1; display: flex; flex-direction: column; gap: 20px; margin-top: 0; }
  body.home .stapel-v2 .sk-tekst p { margin-top: 12px; }
  body.home .stapel-v2 .sk-beeld { width: 100%; aspect-ratio: 4 / 3.2; }
  body.home .stapel-v2 .sk-getal b { font-size: 56px; }
  body.home .stapel-v2 .gk.sk-tegel { width: 46%; }
}
/* De glazen elementen niet over het onderwerp: het getal linksboven op de rustige achtergrond van de buisjesfoto, de tegel linksonder op de ringfoto */
body.home .stapel-v2 .gk.sk-getal { inset: auto; left: 28px; top: 28px; margin: 0; }
body.home .stapel-v2 .gk.sk-tegel { inset: auto; left: 24px; bottom: 24px; margin: 0; }
@media (max-width: 820px) {
  body.home .stapel-v2 .gk.sk-getal { left: 16px; top: 16px; padding: 14px 20px 12px; }
  body.home .stapel-v2 .gk.sk-tegel { left: 14px; bottom: 14px; }
}
/* Staptitel 40 (lh 1,1), telefoon 28, kleiner dan de H2 (ruimte-ronde 2, 21 oktober) */
body.home .stapel-v2 .sk-tekst h3 { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); max-width: none; text-wrap: balance; }
/* ===== Koppen en ruimte, hele site (bouwer, 21 oktober avond; Ryan: "alle koppen op de hele website, al die spacing, echt goed").
   De maten staan nu op één plek: tokens.css (letterschaal --fs-*, --lh-*, --ls-*, sectiemaat --sec 88/72, afstanden --ruimte-*).
   De regels in deze en de andere stylesheets lezen hun maat van de rol; er staan geen losse kopmaten meer. */
/* Burn-outstrook: met de kaarttitel van 26 passen de twee deuren pas vanaf 1440 breed naast elkaar; daaronder staan ze onder elkaar in de rechterkolom */
@media (min-width: 821px) and (max-width: 1439px) { body.home .burnout.strook .doors { grid-template-columns: minmax(0, 1fr); width: 100%; } }

/* ===== Stappen en app-blok naar de benchmark (22 oktober) =====
   Ryan koos Function Health voor de stappen en Eight Sleep voor het app-blok (_research/BENCHMARK-STAPPEN-APPBLOK-1022.md).
   Stappen (computer, vanaf 821 breed): grote platen met native position: sticky. Plaat 01 is 100vh min de top min 24 (hooguit 820, minstens 560),
   elke volgende plaat 64 lager, zodat ze op dezelfde onderrand eindigen en de tab van 64 met het label blijft staan. De top staat vast op 96
   (de balk past erboven) en op hoge schermen staat het blok midden in beeld. Tekst linksboven (titel 40, tekst 17/26, kolom 480), het beeld
   rechts in de plaat met 24 rondom, ongeveer 46% van de plaat breed, ronding 24. Per stap 1,3 schermhoogte scroll: de volgende plaat schuift
   1 op 1 met de vinger binnen (ongeveer 0,8 vh) en daarvoor staat de plaat stil (de rest van de 1,3 vh, in een leeg li.stapel-rust).
   De laatste plaat staat 0,6 vh stil voor de stapel samen wegloopt. Niets wat met de scroll meebeweegt heeft een transitie.
   Telefoon: de lijst van ronde 3 blijft. Minder beweging: niets vast, de platen onder elkaar. */
@media (min-width: 821px) {
  body.home #stappenplan { --H0: clamp(560px, calc(100vh - 120px), 790px); --T0: max(96px, calc((100vh - var(--H0)) / 2)); }
  /* bouwlijst home 2 (29 oktober, Chris na meting van Function op 1440: tekst 515, gat 160, foto 576): dezelfde verhouding van de breedte van tekst tot foto
     (41 : 13 : 46). De plaat is even hoog als zijn inhoud: 88 boven (de strook van 64 plus 24), de foto, 24 onder. Alle drie gelijk; de laagste grens blijft H0 min 128 */
  body.home #stappenplan { --plaat: calc(100vw - 40px); --span: calc(var(--plaat) - 68px); --img-w: min(576px, calc(var(--span) * 0.46)); --img-h: min(470px, calc(var(--H0) - 264px)); --Hp: calc(var(--img-h) + 136px); }
  body.home main > section#stappenplan:not(.hero) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
  body.home #stappenplan .stap-kop { margin-bottom: var(--ruimte-inhoud); }
  body.home .stapel-v2 .stapkaart { --gutter: 44px; position: sticky; top: calc(var(--T0) + var(--i) * 64px); height: var(--Hp); width: calc(100% - 40px); max-width: none; margin: 0 auto; padding: 0; overflow: hidden; transition: none; }
  body.home .stapel-v2 .stapkaart > .wrap { display: block; height: 100%; }
  body.home .stapel-v2 .stapel-rust { display: none; }
  /* het beeld vult de plaat tot 120 naast de tekstkolom van 480 (ronde 3: 732 op 1440, 804 op 1512, 1020 vanaf 1600 breed),
     en is minstens 46% van de plaat op smalle schermen */
  /* bouwlijst home (29 oktober, gemeten op Function bij 1440): de foto 576 x 470 (40vw), op elke plaat even groot; past hij niet in de laagste plaat, dan wordt hij lager, op alle drie gelijk */
  body.home .stapel-v2 .sk { display: block; margin: 0; padding-top: 20px; }
  /* de tekst begint bovenaan, 24 onder de strook van 64 met het label: de hoofdletters van de kop staan gelijk met de bovenkant van de foto */
  body.home .stapel-v2 .stapkaart .tab { font-size: 14px; letter-spacing: 0.08em; }
  body.home .stapel-v2 .sk-tekst { position: absolute; top: 112px; bottom: 24px; left: 0; display: flex; flex-direction: column; justify-content: flex-start; width: 520px; max-width: none; margin: 0; }
  /* de kop op één regel: 44 zoals gekozen, kleiner alleen als de langste kop (Labonderzoek & Analyse, 554 breed op 44) anders tot op 64 van de foto komt */
  body.home .stapel-v2 .sk-tekst h3 { width: max-content; max-width: none; margin: 0; font-size: min(44px, calc((var(--span) - var(--img-w) - 64px) / 12.6)); line-height: 1.08; white-space: nowrap; }
  body.home .stapel-v2 .sk-tekst p { max-width: none; margin: 20px 0 0; line-height: 26px; text-wrap: pretty; }
  body.home .stapel-v2 .sk-tekst h3 { text-box: trim-start cap alphabetic; }
  body.home .stapel-v2 .sk-beeld { position: absolute; top: 112px; bottom: auto; right: 0; left: auto; width: var(--img-w); max-width: none; height: var(--img-h); aspect-ratio: auto; border-radius: 24px; overflow: hidden; justify-self: auto; }
  body.home .stapel-v2 .sk-beeld img.sk-buisjes { object-position: 50% 60%; }
  body.home .stapel-v2 .sk-beeld img.sk-hand { object-position: 54% 50%; }
  body.home .stapel-v2 .gk.sk-getal { left: 28px; top: 28px; }
  body.home .stapel-v2 .gk.sk-tegel { width: 200px; left: 24px; bottom: 24px; }
  body.home .stapel-v2.overzicht .stapkaart { position: relative; top: auto; height: var(--H0); margin-bottom: 20px; }
}
@media (min-width: 1600px) { body.home .stapel-v2 .stapkaart { width: calc(var(--content) + 88px); } body.home #stappenplan { --plaat: calc(var(--content) + 88px); } }
/* smalle computers (821 tot 1199): de tekst krijgt meer breedte (49 tegen 40), anders loopt plaat 02 over op 860. De plaat houdt de hoogte van de laagste plaat
   van de stapel en de foto vult die hoogte, zodat er onderin geen lege band komt */
@media (min-width: 821px) and (max-width: 1199px) {
  body.home #stappenplan { --img-w: calc(var(--span) * 0.40); --img-h: calc(var(--H0) - 264px); --Hp: calc(var(--H0) - 128px); }
  body.home .stapel-v2 .sk-tekst { width: min(520px, calc(var(--span) * 0.49)); }
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  /* de stilstand per plaat: 1,3 vh per stap min wat de plaat zelf aan scroll geeft (hoogte min 64); de platen zijn even hoog (--Hp) */
  body.home .stapel-v2:not(.overzicht) > .stapel-rust { display: block; height: 60vh; }
  body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(2), body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(4) { height: calc(130vh - var(--Hp) + 64px); }
}
@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  body.home .stapel-v2 .stapkaart { position: relative; top: auto; height: var(--Hp); margin-bottom: 20px; }
}

/* App-blok (computer, vanaf 1001 breed): lijst links (kolom 480), rechts een donker vlak van ongeveer 660 x 680 (46vw tot 900, 76vh tot 860) met ronding 24 op de
   rechterrand van de kolom, niet meer tot de rand van het scherm. Het blok staat vast en schuift per onderdeel 0,9 schermhoogte door.
   De vijf namen zijn een vertoonlijst in serif 36 (telefoon 24), onder de H2 van 52; niet-actief op 46% dekking (contrast 3,1 : 1 op crème), het actieve vol, met één regel
   eronder (sans 17) die invervaagt. Om die regel ruimte te geven schuiven de namen eronder 34 px mee met de scroll (concept.js blok 16,
   zonder transitie, geen sprong); alleen de dekking wisselt kort. De gouden lijn langs de lijst blijft. */
@media (min-width: 1001px) {
  body.home #app { --vis-w: clamp(440px, 46vw, 900px); --vis-h: clamp(520px, calc(100vh - 192px), 900px); --zin: 34px; }
  body.home main > section.app-scroll.app-blok { height: calc(100vh + 5 * 40vh); padding-top: 0 !important; padding-bottom: 0 !important; overflow-x: clip; }
  body.home .app-scroll.app-blok > .wrap { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--vis-w); column-gap: clamp(64px, 6.7vw, 96px); align-items: start; }
  body.home .app-scroll.app-blok .as-links { position: sticky; top: 0; height: 100vh; box-sizing: border-box; max-width: 480px; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  body.home .app-scroll.app-blok .app-kop { padding-top: 0; }
  body.home .app-scroll.app-blok .as-lijst { position: relative; flex: none; display: block; height: calc(5 * 56px + var(--zin)); margin: var(--ruimte-inhoud) 0 0; padding-left: 26px; }
  body.home .app-scroll.app-blok .as-lijn { display: block; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: rgb(var(--ink-rgb) / 0.1); }
  body.home .app-scroll.app-blok .as-lijn b { position: absolute; left: 0; top: 0; width: 2px; height: var(--voortgang, 0%); border-radius: 2px; background: var(--gold); }
  body.home .app-scroll.app-blok .as-deel, body.home .app-scroll.app-blok .as-deel:last-of-type { position: relative; display: block; height: 56px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: .46; transform: translateY(var(--dy, 0px)); transition: opacity .3s ease; }
  body.home .app-scroll.app-blok .as-deel.aan { opacity: 1; }
  body.home .app-scroll.app-blok .as-deel h3 { display: block; margin: 0; padding-top: 6px; font: 400 36px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--light-ink); white-space: nowrap; }
  body.home .app-scroll.app-blok .as-deel h3 svg { display: none; }
  body.home .app-scroll.app-blok .as-zin { position: absolute; left: 0; top: 52px; white-space: nowrap; font-size: var(--fs-lede); line-height: 26px; color: rgb(var(--ink-rgb) / 0.66); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  body.home .app-scroll.app-blok .as-deel.aan .as-zin { opacity: 1; transition-delay: .08s; }
  body.home .app-scroll.app-blok .as-ook { margin-top: 32px; }
  body.home .app-scroll.app-blok .as-rechts { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: flex-end; }
  body.home .app-scroll.app-blok .as-vlak { position: relative; top: auto; flex: none; width: var(--vis-w); height: var(--vis-h); margin: 0; border-radius: 24px; container-type: size; }
  /* drie telefoons midden in het vlak, gemeten aan de hoogte van het vlak (cqh), zodat ze bij elke breedte heel in beeld blijven:
     de middelste 80% hoog, de buren 68% en iets lager, 6% achter de middelste; met hun lichte meebeweging (--p) */
  body.home .app-scroll.app-blok .as-tel { top: 50%; width: auto; height: 68cqh; }
  body.home .app-scroll.app-blok .as-tel.as-l { left: auto; right: calc(50% + 12cqh); transform: perspective(1600px) rotateY(16deg) translateY(calc(-50% + var(--p, 0.5) * -48px + 40px)); }
  body.home .app-scroll.app-blok .as-tel.as-r { right: auto; left: calc(50% + 12cqh); transform: perspective(1600px) rotateY(-16deg) translateY(calc(-50% + var(--p, 0.5) * -48px + 40px)); }
  body.home .app-scroll.app-blok .as-tel.as-m { left: 50%; height: 80cqh; transform: translate(-50%, calc(-50% + var(--p, 0.5) * -24px + 12px)); }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) { body.home .app-scroll.app-blok .as-deel, body.home .app-scroll.app-blok .as-zin { transition: none; } }
/* Telefoon en tablet (tot 1000): elk onderdeel met naam (serif 24), de regel eronder (16) en zijn beeld, samen binnen één scherm */
@media (max-width: 1000px) {
  body.home .app-scroll .as-deel h3 { display: block; font: 400 24px/1.2 var(--serif); letter-spacing: -0.01em; }
  body.home .app-scroll .as-deel h3 svg { display: none; }
  body.home .app-scroll .as-zin { margin-top: 6px; font-size: var(--fs-lede); line-height: 1.5; color: rgb(var(--ink-rgb) / 0.66); }
  body.home .app-scroll .as-klein { margin-top: 16px; }
}
/* stap 03: de uitsnede iets naar links, zodat de tegel Uitgerustheid linksonder op de lichte achtergrond ligt en niet op de vingers; beide ringen blijven vrij */
@media (min-width: 821px) { body.home .stapel-v2 .sk-beeld img.sk-ring { object-position: 4% 50%; } }
/* telefoon en kleine tablet: het beeld hooguit half zo hoog als het scherm, zodat een plaat met de lijst erbij in één scherm past (631 x 762) */
@media (max-width: 820px) {
  body.home .stapel-v2 .sk-beeld { aspect-ratio: auto; height: min(calc((100vw - 40px) / 1.25), 50vh); }
  /* de buisjes onder het glas met 100+ in plaats van erachter, en de tegel Uitgerustheid hooguit 160 breed, zodat hij de vingers vrijlaat */
  body.home .stapel-v2 .sk-beeld img.sk-buisjes { object-position: 50% 60%; }
  body.home .stapel-v2 .gk.sk-tegel { width: min(46%, 160px); }
}

/* Ronde 3 (keurder, 22 oktober) */
/* Stappen: plaat 01 hooguit 790 (op 1440 x 900 blijft het 780), zodat de open ruimte in de linkerkolom niet groter wordt dan op 1440.
   Komt de balk terug, dan zakt de stapel naar 112 (24 onder de balk, die tot 88 loopt), in 500 ms met de balk mee; gaat de balk weg, dan schuift hij
   even zacht terug naar 96. Op hoge schermen staat de stapel al lager dan 112 en beweegt er niets. */
@media (min-width: 821px) {
  html.js body.home .stapel-v2 .stapkaart { transition: top .5s var(--ease); }
  html:not(.balk-weg):has(.bar.floating) body.home .stapel-v2 .stapkaart, html:has(.bar:focus-within) body.home .stapel-v2 .stapkaart, html:has(.bar.open) body.home .stapel-v2 .stapkaart { top: calc(max(var(--T0), 112px) + var(--i) * 64px); }
  /* de tegel Uitgerustheid iets kleiner, zodat hij de duim vrijlaat */
  body.home .stapel-v2 .gk.sk-tegel { width: clamp(150px, 28%, 176px); }
}
@media (min-width: 821px) and (prefers-reduced-motion: reduce) { html.js body.home .stapel-v2 .stapkaart { transition: none; } }
/* Telefoon: het beeld hooguit 43% van de schermhoogte, zodat plaat en vaste knop samen passen (631 x 762); de rail eindigt in de plaat; de tegel kleiner */
@media (max-width: 820px) {
  body.home .stapel-v2 .sk-beeld { height: min(calc((100vw - 40px) / 1.25), 43vh); }
  body.home .stapel-v2 .stap-rail, body.home .stapel-v2 .stapkaart:nth-last-child(2) .stap-rail { bottom: 0; }
  body.home .stapel-v2 .gk.sk-tegel { width: min(38%, 128px); }
  body.home .stapel-v2 .sk-beeld img.sk-ring { object-position: 50% 100%; } /* op een breed, laag beeld (631) staat de duim zo hoger, vrij van de tegel */
}
/* App-blok: het vlak 100vh min 2 x 96 hoog (hooguit 900), zodat boven en onder hooguit 96 overblijft. Komt de balk terug, dan zakt het vaste scherm
   16 px mee (500 ms, zoals de stapel), zodat het vlak 24 onder de balk blijft. */
@media (min-width: 1001px) {
  html.js body.home .app-scroll.app-blok .as-links, html.js body.home .app-scroll.app-blok .as-rechts { transition: translate .5s var(--ease); }
  html:not(.balk-weg):has(.bar.floating) body.home .app-scroll.app-blok .as-links, html:not(.balk-weg):has(.bar.floating) body.home .app-scroll.app-blok .as-rechts,
  html:has(.bar:focus-within) body.home .app-scroll.app-blok .as-links, html:has(.bar:focus-within) body.home .app-scroll.app-blok .as-rechts,
  html:has(.bar.open) body.home .app-scroll.app-blok .as-links, html:has(.bar.open) body.home .app-scroll.app-blok .as-rechts { translate: 0 16px; }
  /* het portaal: venster in het midden met 40 rondom, zo groot als het vlak. Het scherm toont de zijbalk en de eerste kolom kaarten tot in de
     tussenruimte (59% van de opname, 850 van 1440), zodat er geen halve kaart aan de rand staat; onderaan valt een strook van de zijbalk weg */
  body.home .app-scroll.app-blok .as-portaal { padding: 40px; justify-content: center; align-items: stretch; }
  body.home .app-scroll.app-blok .as-portaal .as-venster { width: 100%; height: 100%; display: flex; flex-direction: column; }
  body.home .app-scroll.app-blok .as-portaal .as-venster > picture { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  body.home .app-scroll.app-blok .as-portaal .as-venster img { display: block; width: calc(100% * 1440 / 850); max-width: none; height: auto; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) { html.js body.home .app-scroll.app-blok .as-links, html.js body.home .app-scroll.app-blok .as-rechts { transition: none; } }
/* De rij met extra functies breekt in evenwichtige regels (geen los "Documenten") */
body.home .as-ook, body.home .app-scroll.app-blok .as-ook { display: block; text-wrap: balance; line-height: 1.9; }
body.home .as-ook span { display: inline-block; white-space: nowrap; margin-right: 22px; }
body.home .as-ook span:last-child { margin-right: 0; }
/* Mijn data: bij het opnieuw afspelen eerst zonder overgang terug naar leeg (concept.js, speel) */
body.home .md.md-terug .md-vul { transition: none; }

/* Bouwlijst home (29 oktober, Ryan: "Ja, zoals Function"): elke plaat een titel, twee zinnen, drie vinkjes, en in de foto een echt stuk van de app als glazen paneel.
   De vinkjes komen pas in de HTML als Ryan de tekst koos. De uitsneden zijn echte schermen (demo-cliënt), geen nagebouwde tegels. */
/* vinkjes zoals Function: elk op één regel (6 tot 9 woorden), 16 px, rij 28. Geen knop op de platen (Ryan 29 oktober): de enige actie is Plan een kennismaking */
body.home .stapel-v2 .sk-vink { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
body.home .stapel-v2 .sk-vink li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 28px; color: var(--off); }
body.home .stapel-v2 .sk-vink svg { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--accent-text); }
body.home .stapel-v2 .gk.sk-scherm { inset: auto; left: 24px; bottom: 24px; margin: 0; width: clamp(180px, 36%, 280px); height: auto; padding: 8px; border-radius: 20px; background: rgb(var(--glass-rgb) / calc(0.8 + var(--glass-plus))); }
/* stap 02: de foto toont de telefoon al; het paneel staat linksboven op de vage achtergrond, vrij van hand en telefoon */
body.home .stapel-v2 .gk.sk-scherm-boven { top: 24px; bottom: auto; }
/* stap 03: één echte tegel, op de plek en in de maat van de oude tegel, zodat de vingers vrij blijven */
body.home .stapel-v2 .gk.sk-scherm-klein { width: clamp(150px, 28%, 176px); padding: 6px; border-radius: 18px; }
body.home .stapel-v2 .sk-scherm picture { display: block; }
body.home .stapel-v2 .sk-scherm img { display: block; width: 100%; height: auto; border-radius: 13px; }
@media (max-width: 820px) {
  body.home .stapel-v2 .sk-vink { margin-top: 16px; }
  body.home .stapel-v2 .gk.sk-scherm { left: 14px; bottom: 14px; width: min(46%, 180px); padding: 5px; border-radius: 14px; }
  body.home .stapel-v2 .gk.sk-scherm-boven { top: 14px; bottom: auto; width: min(36%, 150px); } /* links van de telefoon in de foto */
  body.home .stapel-v2 .gk.sk-scherm-klein { width: min(34%, 120px); }
  body.home .stapel-v2 .sk-scherm img { border-radius: 10px; }
}
/* Telefoon, de lijn van de stapplaten op dezelfde maat als op de computer (Ryan 29 oktober): lijn 20 van de rand, tekst en foto 24 van de lijn */
@media (max-width: 820px) {
  body.home .stapkaart > .wrap { padding-left: 24px; }
  body.home .stap-rail { left: 0; }
  body.home .rail-punt { left: -3.5px; }
}
/* Tekst op de stapplaten zoals Function (Ryan 29 oktober, gemeten op functionhealth.com/how-it-works): alles in één volle kleur. Gewicht 400, want 300 werd dof
   op donkergroen (Ryan 29 oktober, "D: zo laten"); het vinkje goud, 20 groot, lijn 2 */
body.home .stapel-v2 .sk-tekst p { font-size: 18px; line-height: 27px; font-weight: 400; color: rgb(var(--off-rgb)); }
body.home .stapel-v2 .sk-vink { margin-top: 32px; gap: 8px; }
body.home .stapel-v2 .sk-vink li { font-weight: 400; line-height: 24px; gap: 10px; color: rgb(var(--off-rgb)); }
body.home .stapel-v2 .sk-vink svg { width: 20px; height: 20px; margin-top: 2px; color: var(--gold); stroke-width: 2; }
@media (max-width: 820px) {
  body.home .stapel-v2 .sk-tekst p { font-size: 16px; line-height: 24px; margin-top: 16px; }
  body.home .stapel-v2 .sk-vink { margin-top: 24px; }
}
/* Telefoon: de lijn loopt door de tussenruimte van stap 01 tot stap 03, net als op de computer (Ryan 29 oktober); de laatste plaat houdt zijn eind */
@media (max-width: 820px) {
  body.home .stapel-v2 .stapkaart { overflow: visible; }
  body.home .stapel-v2 .stapkaart .stap-rail { bottom: -48px; }
  body.home .stapel-v2 .stapkaart:nth-last-child(2) .stap-rail { bottom: 0; }
}
/* App-blok (Ryan 2 november): één scherm. Links de kop, de namen uit de app met hun icoon (4 x 2) en een knop naar /traject/app; rechts het portaal (Modules) met de telefoon (Vandaag) ervoor */
body.home #app.ab2 .ab2-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
body.home #app.ab2 h2 { margin: 0; }
body.home #app.ab2 .lede { margin: 16px 0 0; font-size: 18px; line-height: 27px; color: var(--light-ink); max-width: 26em; }
body.home #app.ab2 .ab2-namen { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
body.home #app.ab2 .ab2-namen li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--light-ink); }
body.home #app.ab2 .ab2-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--gold); display: grid; place-items: center; }
body.home #app.ab2 .ab2-ico svg { width: 20px; height: 20px; }
body.home #app.ab2 .ab2-meer { margin-top: 36px; }
body.home #app.ab2 .ab2-beeld { position: relative; aspect-ratio: 16 / 11.5; }
body.home #app.ab2 .ab2-venster { position: absolute; left: 0; top: 0; width: 88%; border-radius: 14px; overflow: hidden; background: #011400; box-shadow: 0 30px 80px rgb(1 20 0 / .28); }
body.home #app.ab2 .ab2-balk { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #0b1a0b; }
body.home #app.ab2 .ab2-balk i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .18); }
body.home #app.ab2 .ab2-venster img, body.home #app.ab2 .ab2-tel img { display: block; width: 100%; height: auto; }
body.home #app.ab2 .ab2-venster img { aspect-ratio: 2880 / 1380; object-fit: cover; object-position: top; }
body.home #app.ab2 .ab2-tel { position: absolute; right: 0; bottom: 0; width: 27%; border-radius: 30px; border: 6px solid #0d1a0d; overflow: hidden; background: #011400; box-shadow: 0 30px 70px rgb(1 20 0 / .35); }
@media (max-width: 1199px) { body.home #app.ab2 .ab2-grid { gap: 40px; } }
@media (max-width: 820px) {
  body.home #app.ab2 .ab2-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.home #app.ab2 .ab2-tekst { display: contents; }
  body.home #app.ab2 h2 { order: 1; } body.home #app.ab2 .lede { order: 2; font-size: 16px; line-height: 24px; }
  body.home #app.ab2 .ab2-beeld { order: 3; margin-top: 32px; aspect-ratio: auto; display: flex; justify-content: center; }
  body.home #app.ab2 .ab2-venster { display: none; }
  body.home #app.ab2 .ab2-tel { position: relative; width: 60%; }
  body.home #app.ab2 .ab2-namen { order: 4; margin-top: 32px; gap: 12px 16px; }
  body.home #app.ab2 .ab2-namen li { font-size: 15px; gap: 10px; }
  body.home #app.ab2 .ab2-ico { width: 36px; height: 36px; border-radius: 10px; }
  body.home #app.ab2 .ab2-meer { order: 5; align-self: flex-start; margin-top: 28px; }
}
body.home #app.ab2 .ab2-meer { background: transparent; color: var(--light-ink); border: 1px solid rgb(var(--ink-rgb) / 0.3); box-shadow: none; }
body.home #app.ab2 .ab2-meer:hover { border-color: var(--gold-ink); background: rgb(var(--ink-rgb) / 0.04); }
body.home #app.ab2 .ab2-meer svg { width: 14px; height: 14px; margin-left: 8px; }

/* Stapplaten, vast patroon voor een label op de foto (Ryan, 5 november): op elke plaat dezelfde kaart, rechtsboven, even breed,
   met dezelfde tekstmaat en hetzelfde lijstvinkje in de kleine regel ("100+ / biomarkers", "Oura Ring / inbegrepen").
   De ringfoto schuift per breedte zodat de ringen vrij blijven. */
body.home .stapel-v2 .gk.sk-getal { inset: auto; left: auto; right: 24px; top: 24px; width: 216px; box-sizing: border-box; padding: 16px 20px 14px; border-radius: 18px; text-align: left; }
body.home .stapel-v2 .sk-getal b { font-size: 34px; line-height: 1; white-space: nowrap; }
body.home .stapel-v2 .sk-getal span { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15px; }
body.home .stapel-v2 .sk-getal span svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
body.home .stapel-v2 .sk-beeld img.sk-ring { object-position: 52% 50%; }
@media (max-width: 820px) {
  body.home .stapel-v2 .gk.sk-getal { right: 14px; top: 14px; width: 152px; padding: 11px 14px 10px; border-radius: 14px; }
  body.home .stapel-v2 .sk-getal b { font-size: 24px; }
  body.home .stapel-v2 .sk-getal span { margin-top: 5px; font-size: 13px; gap: 5px; }
  body.home .stapel-v2 .sk-getal span svg { width: 15px; height: 15px; }
  body.home .stapel-v2 .sk-beeld img.sk-ring { object-position: 72% 60%; }
}
@media (min-width: 821px) and (max-width: 1199px) { body.home .stapel-v2 .sk-beeld img.sk-ring { object-position: 95% 50%; } }

/* Home na de hero (10 november, Sanjay). Eerst het herkenningsblok, dan de stappen; volgt de bekende opbouw "probleem, dan plan"
   (HERKENNING-MARKT-1109.md: Newmedix en Human Upgrade). Koppen 48 / 28 op laptop, 30 / 22 op telefoon. */
body.home .hk { background: var(--light-bg); color: var(--light-ink); padding: 96px 0; }
body.home .hk-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
body.home .hk-label { display: block; font: 600 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
body.home .hk h2 { font: 400 48px/1.08 var(--serif); letter-spacing: -0.01em; margin: 0; max-width: 13ch; text-wrap: balance; }
body.home .hk-brug { margin: 28px 0 0; color: var(--light-muted); font: 400 18px/1.45 var(--sans); }
body.home .hk-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.home .hk-lijst li { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px 12px 12px; border: 1px solid var(--light-line); border-radius: 16px; background: rgb(255 255 255 / .6); font-size: 16px; line-height: 22px; }
body.home .hk-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(var(--gold-ink-rgb) / .6); display: grid; place-items: center; color: var(--gold-ink); }
body.home .hk-ico svg { width: 22px; height: 22px; }
body.home #stappenplan .stap-intro { margin-top: 12px; }
@media (max-width: 1080px) { body.home .hk-raster { grid-template-columns: 1fr; gap: 32px; } }
@media (min-width: 821px) {
  body.home .hero .hero-copy { align-self: end; padding-bottom: 64px; } /* afgestemd met Chris, 10 nov: hero loopt rustiger over in het crème blok */
  body.home main > section#stappenplan:not(.hero) { padding-top: 104px !important; }
  body.home #stappenplan .stap-kop h2 { font-size: 48px; line-height: 1.08; max-width: none; }
  body.home .stapel-v2 .sk-tekst h3 { font-size: min(28px, calc((var(--span) - var(--img-w) - 64px) / 12.6)); }
}
@media (max-width: 820px) {
  body.home .hk { padding: 64px 0; }
  body.home .hk h2 { font-size: 30px; max-width: none; }
  body.home .hk-brug { margin-top: 16px; font-size: 16px; }
  body.home .hk-lijst { grid-template-columns: 1fr; gap: 8px; }
  body.home .hk-lijst li { min-height: 60px; padding: 10px 14px 10px 10px; }
  body.home .hk-ico { width: 42px; height: 42px; }
  body.home .hk-ico svg { width: 20px; height: 20px; }
  body.home main > section#stappenplan:not(.hero) { padding-top: 72px !important; }
  body.home #stappenplan .stap-kop h2 { font-size: 30px; line-height: 1.12; text-wrap: balance; }
  body.home .stapel-v2 .sk-tekst h3 { font-size: 22px; }
}


/* Stapkaarten home (Ryan 15 nov, "wel beter"): de foto staat rechts en onder even ver van de rand (44), en begint nog gelijk met de kop;
   het groene glasvlak heeft boven en onder evenveel ruimte. */
@media (min-width: 821px) {
  body.home .stapel-v2 .sk-beeld { height: calc(var(--img-h) - 20px); }
  body.home .stapel-v2 .gk.sk-getal { padding-bottom: 16px; }
  /* Ryan 15 nov, keuze B: minder lege ruimte onder de vinkjes. Foto 380 hoog (kaart 70 lager) en de kop 36 in plaats van 28,
     met dezelfde grens als eerst zodat de kop nooit tegen de foto loopt. */
  body.home #stappenplan { --img-h: min(400px, calc(var(--H0) - 264px)); }
  body.home .stapel-v2 .sk-tekst h3 { font-size: min(36px, calc((var(--span) - var(--img-w) - 64px) / 12.6)); }
}

/* Stapkaarten op een smal scherm (Ryan 15 nov: "die kaarten moeten ook gewoon over elkaar heen komen"). Ook hier blijven ze bij het scrollen staan
   en schuift de volgende eroverheen. concept.js zet per kaart --kaart-top: onder de menubalk, of bij een hoge kaart zo dat de onderkant boven de knop blijft. */
@media (max-width: 820px) {
  body.home .stapel-v2 { display: block; }
  body.home .stapel-v2 .stapkaart { position: sticky; top: var(--kaart-top, 76px); bottom: var(--kaart-bottom, auto); margin: 0; border-radius: 28px; background: var(--panel); box-shadow: 0 -18px 36px -16px rgb(0 0 0 / .55), inset 0 1px 0 rgb(var(--off-rgb) / .12); }
  body.home .stapel-v2 .stapkaart:last-of-type { margin-bottom: 0; }
  body.home .stapel-v2 .sk-beeld { max-height: 42vh; }
  /* het lijntje zonder gaten: vanaf de bovenrand van elke kaart (bij de eerste vanaf het rondje) tot onderin */
  body.home .stapel-v2 .stapkaart .stap-rail { top: -16px; bottom: -24px; } /* de wrap staat 16 onder de bovenrand en 24 boven de onderrand */
  body.home .stapel-v2 .stapkaart:first-child .stap-rail { top: var(--punt-y, 26px); }
}

/* Stapkaarten op de computer (Ryan 15 nov: "misschien moet je iets minder scrollen om door die kaart heen te gaan"): per stap 1 schermhoogte scroll
   in plaats van 1,3 (de stilstand na plaat 01 en 02 was 724 px op een laptop), en na de laatste plaat 40% in plaats van 60%. Het lijntje loopt in die stilstand vol. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  /* Ryan 15 nov (2): "hij komt vanuit de leegte naar boven ... extra scrollen for no reason". Geen stilstand meer: de volgende kaart sluit met
     een kleine tussenruimte (12) direct aan en schuift meteen over de vorige; het lijntje van de vorige kaart loopt eronder door. */
  body.home .stapel-v2:not(.overzicht) > .stapel-rust, body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(2), body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(4) { height: 12px; }
}

/* Stapkaarten als een map (Ryan 15 nov: "dat je stap 02 en stap 03 ziet ... zoals die naar boven wordt gevouwen, als een soort map, dat je dat ook eerst
   daaronder hebt"). Op de computer staan de stappen die nog komen als tabblad (64) onderin het beeld; bij het scrollen vouwt de volgende open naar boven.
   Elke kaart blijft onderin hangen met alleen zijn tab zichtbaar (sticky bottom), en de tussenruimte is precies zo groot dat de volgende kaart
   meteen begint te bewegen als de vorige vast staat: geen stilstand. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.home .stapel-v2:not(.overzicht) .stapkaart { bottom: calc((3 - var(--i)) * 64px - var(--Hp)); }
  /* lijntje eerst (Ryan 15 nov): na elke kaart een rust zo lang als zijn lijn (Hp - 32); de volgende kaart blijft al die tijd als tabblad onderin */
  body.home .stapel-v2:not(.overzicht) > .stapel-rust, body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(2), body.home .stapel-v2:not(.overzicht) > .stapel-rust:nth-child(4) { height: calc(var(--Hp) - 32px); }
  /* het hele blok (actieve kaart plus de tabbladen eronder, Hp + 128) staat tegen de onderkant van het scherm, zodat de map aansluit zonder leegte;
     de ruimte erboven krijgt de kop van het blok, die blijft staan zolang de kaarten openvouwen (alleen als er plek voor is) */
  body.home #stappenplan { --T0: max(96px, calc(100vh - var(--Hp) - 128px)); }
}
@media (min-width: 821px) and (min-height: 860px) and (prefers-reduced-motion: no-preference) {
  body.home #stappenplan .stap-kop { position: sticky; top: max(84px, calc(var(--T0) - 172px)); }
}

/* Map (Ryan 15 nov): "dat je geen voorbeeld ziet van stap 02 ... alleen die titel, alsof het een map is die naar boven komt". De inhoud van een
   opkomende kaart staat op --inhoud (0 tot 1, gezet door concept.js en direct aan de scroll gekoppeld, zonder overgang); het tabblad blijft altijd zichtbaar. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.home .stapel-v2:not(.overzicht) .stapkaart .sk { opacity: var(--inhoud, 1); }
}

/* Telefoon als map (Ryan 15 nov): de rust na elke kaart (hoogte gezet door concept.js), een lagere foto zodat het blok met tabbladen in beeld past,
   en de inhoud van een opkomende kaart pas op het laatst (--inhoud), net als op de computer. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  body.home .stapel-v2:not(.overzicht) > .stapel-rust { display: block; }
  body.home .stapel-v2 .sk-beeld { max-height: 26vh; }
  body.home .stapel-v2:not(.overzicht) .stapkaart .sk { opacity: var(--inhoud, 1); }
}

/* 15 nov (Ryan: de tekst onder zijn foto "lijkt ... lichtgrijs. Alsof je het niet helemaal hoort te lezen ... hoort niet lichtgrijs te zijn",
   en "zo'n quote moet niet in cursief"): oprichtersblok op home met leesbare tekst en de quote recht. */
body.home .founder.plaat .lede { color: rgb(var(--off-rgb) / 0.9); }
body.home .founder.plaat .founder-quote { font-style: normal; text-wrap: balance; }
body.home .why .lid-sub { color: rgb(var(--off-rgb) / 0.9); } /* zelfde leesbare tint als het oprichtersblok erboven */

/* Stap 01 (Ryan 15 nov avond: "die hadden we helemaal gemaakt"): de labfoto (lab-licht.jpg) rechts in het beeldvak, vanaf links een verloop
   naar de kaartkleur, met daarin de zeven onderdelen van het labonderzoek; Vitamines & Mineralen licht op met de gouden streep. Geen glazen kaartje. */
body.home .stapel-v2 .sk-beeld.s1d { background: var(--bg); }
body.home .stapel-v2 .sk-beeld.s1d > picture > img.s1-foto { position: absolute; top: 0; bottom: 0; left: auto; right: 0; width: 80%; height: 100%; object-fit: cover; object-position: 50% 50%; }
body.home .stapel-v2 .sk-beeld.s1d::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 22%, rgb(var(--bg-rgb) / .97) 29%, rgb(var(--bg-rgb) / .9) 35%, rgb(var(--bg-rgb) / .78) 41%, rgb(var(--bg-rgb) / .62) 48%, rgb(var(--bg-rgb) / .44) 55%, rgb(var(--bg-rgb) / .27) 62%, rgb(var(--bg-rgb) / .13) 70%, rgb(var(--bg-rgb) / .04) 78%, rgb(var(--bg-rgb) / 0) 86%); }
body.home .s1d .s1c { position: absolute; top: 0; bottom: 0; left: 0; width: 52%; z-index: 2; display: flex; align-items: center; padding-left: 26px; }
body.home .s1-lijst { list-style: none; margin: 0; padding: 0; }
body.home .s1-lijst li { display: flex; align-items: center; gap: 10px; font-family: var(--serif); white-space: nowrap; font-size: 16px; height: 28px; }
body.home .s1-lijst li::before { content: ''; width: 14px; height: 1px; background: var(--gold); opacity: 0; flex: none; }
body.home .s1-lijst li.af0 { color: #F4F1E8; font-size: 19px; height: 34px; }
body.home .s1-lijst li.af0::before { opacity: 1; }
body.home .s1-lijst li.af1 { color: rgb(236 234 228 / .75); }
body.home .s1-lijst li.af2 { color: rgb(236 234 228 / .55); }
body.home .s1-lijst li.af3 { color: rgb(236 234 228 / .36); }
@media (max-width: 820px) {
  /* telefoon: zelfde opbouw als op de computer (lijst op de foto, verloop van links), in het vak van de andere stappen */
  body.home .stapel-v2 .sk-beeld.s1d > picture > img.s1-foto { width: 74%; object-position: 12% 40%; }
  body.home .s1d .s1c { width: 60%; padding-left: 16px; }
  body.home .s1-lijst li { font-size: 13.5px; height: 21px; gap: 8px; }
  body.home .s1-lijst li::before { width: 10px; }
  body.home .s1-lijst li.af0 { font-size: 15.5px; height: 26px; }
}

/* Stapel bovenaan (Ryan 15 nov avond: "een heel vlak leeg daarboven ... hij mag helemaal naar boven doorscrollen ... of die titel blijft staan").
   Computer: het blok (kop, actieve kaart, tabbladen) staat nu bovenin, direct onder de balk, in plaats van tegen de onderkant van het scherm.
   - Hoge schermen (860+): de kop blijft staan (top 100) en schaalt mee tot hij op één regel past; de kaarten beginnen direct onder de kop.
   - Lagere schermen: geen staande kop; de kaarten beginnen direct onder de balk (112).
   De foto krimpt zo nodig, zodat de tabbladen van de volgende stappen altijd in beeld blijven; de tabbladen hangen direct onder de actieve kaart. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  /* --T0vast: de plek onder de zichtbare balk (bepaalt de maat van de kaart, verandert niet tijdens het scrollen);
     --T0: de echte plek, die met de balk meeschuift (balk weg bij naar beneden scrollen: alles 76 omhoog) */
  body.home #stappenplan { --T0vast: 112px; --T0: 112px; --img-h: min(520px, calc(var(--H0) - 264px), calc(100vh - var(--T0vast) - 272px)); }
  html.balk-weg body.home #stappenplan { --T0: 36px; }
  body.home .stapel-v2:not(.overzicht) .stapkaart { bottom: calc(100vh - var(--T0) - 2 * var(--Hp) - (var(--i) - 1) * 64px); }
  html.js body.home .stapel-v2:not(.overzicht) .stapkaart { transition: top .5s var(--ease), bottom .5s var(--ease); }
  body.home #stappenplan .stap-kop h2 { font-size: min(52px, calc((100vw - 136px) / 26.5)); }
}
@media (min-width: 821px) and (min-height: 860px) and (prefers-reduced-motion: no-preference) {
  body.home #stappenplan { --kopTop: 100px; --T0vast: calc(100px + var(--kopH, 104px) + 20px); --T0: calc(var(--kopTop) + var(--kopH, 104px) + 20px); }
  html.balk-weg body.home #stappenplan { --kopTop: 24px; --T0: calc(var(--kopTop) + var(--kopH, 104px) + 20px); }
  body.home #stappenplan .stap-kop { position: sticky; top: var(--kopTop); transition: top .5s var(--ease); }
}
/* Telefoon (Ryan 15 nov avond: "bij de telefoon moet je die ruimte erboven niet meer zien"): schuift de balk weg, dan schuift de stapel mee
   omhoog tot 12 px onder de rand (--schuifTel, gezet door concept.js); komt de balk terug, dan zakt hij weer. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  html.js body.home .stapel-v2:not(.overzicht) .stapkaart { transition: top .5s var(--ease), bottom .5s var(--ease); }
  html.balk-weg body.home .stapel-v2:not(.overzicht) .stapkaart { top: calc(var(--kaart-top, 76px) - var(--schuifTel, 0px)); bottom: calc(var(--kaart-bottom, 0px) + var(--schuifTel, 0px)); }
}

/* 15 nov: kernzin direct na de opening, in twee tonen zoals Apple en Linear. Maten gemeten op apple.com/apple-vision-pro en vertaald
   naar onze schaal: 44 px op de computer (kleiner dan de opening, 0,85 x H2), 28 px op de telefoon; gedimd 58% (zo leesbaar als Apple's grijs). */
body.home main > section.kern { background: var(--bg); padding-block: clamp(72px, calc(5.25vw + 51.5px), 120px); }
body.home .kern .kern-zin { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, calc(1.75vw + 21.2px), 44px); line-height: 1.2; letter-spacing: -0.01em; max-width: 40ch; margin: 0 auto; text-align: center; text-wrap: balance; }
body.home .kern .kern-licht { color: var(--off); }
body.home .kern .kern-dim { color: rgb(var(--off-rgb) / 0.58); }
@media (max-width: 820px) { body.home .kern .kern-zin { letter-spacing: 0; } }

/* App-blok op de computer (Ryan 15 nov avond: "die afbeelding staat er ver boven ... de titel staat een beetje half in het midden en die telefoon
   steekt er weer onderuit"): beeld en tekst even hoog. Bovenkant van het portaal gelijk met de titel, onderkant van de telefoon gelijk met de knop;
   het portaal iets smaller, zodat de telefoon de kaarten in het portaal niet meer half afdekt. */
@media (min-width: 821px) {
  body.home #app.ab2 .ab2-grid { align-items: stretch; }
  body.home #app.ab2 .ab2-beeld { aspect-ratio: auto; }
  body.home #app.ab2 .ab2-venster { top: 8px; width: 76%; }
  body.home #app.ab2 .ab2-tel { bottom: 0; width: auto; height: 88%; }
  body.home #app.ab2 .ab2-tel img { width: auto; height: 100%; }
}