/* Ontwerpsysteem op alle pagina's behalve de homepage (die heeft zijn eigen blok onderaan richting.css) en /concept/.
   Deel A van de andere pagina's (17 oktober): het systeem doortrekken, geen nieuwe opbouw. Bron: DESIGN-SYSTEEM.md.
   Dit is de laatste stylesheet op elke pagina, zodat de regels hieronder de oudere maten overschrijven. */

/* ---- Ruimte en raster: sectieruimte 108 (zodat tussen de inhoud van twee secties 216 staat), 72 op de telefoon.
   Marge 64 op 1440, ongeveer 104 vanaf 1600 (inhoud rond 1700 op 1920), 20 op de telefoon. Tekst 17 met lh 1,5 (telefoon 16). ---- */
body:not(.home) { --t3: 17px; --kaart: 16px; line-height: 1.5; }
@media (min-width: 821px) and (max-width: 1599px) { body:not(.home) { --gutter: 64px; --content: 100000px; } body:not(.home) section.plaat { --gutter: 44px; } }
@media (min-width: 1600px) { body:not(.home) { --content: min(100vw - 208px, 1600px); } }
@media (max-width: 820px) { body:not(.home) { --gutter: 20px; --t3: 16px; } }
body:not(.home) main > section:not(.hero):not(.strook) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
/* twee donkere secties achter elkaar krijgen een haarlijn als scheiding */
body:not(.home) main > section.open + section.open, body:not(.home) main > section.open + section.band.close:not(.light), body:not(.home) main > section.band.close:not(.light) + section.open { border-top: 1px solid var(--line); }

/* ---- Typografie: H2 52 (telefoon 36), lh 1,06; labels .1em; lopende tekst 17 in kolommen van hooguit 520 ---- */
body:not(.home) .label { letter-spacing: var(--ls-label); }
body:not(.home) main > section:not(.hero):not(.strook):not(.policy):not(.pair) h2:not(.stat) { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
body:not(.home) .lede { font-size: var(--fs-lede); line-height: var(--lh-lede); }
body:not(.home) main > section:not(.policy) p { line-height: 1.5; }
body:not(.home) main > section:not(.policy):not(.hero) .lede, body:not(.home) main > section:not(.policy) .wrap > div > p:not(.huge):not(.stat), body:not(.home) .hero .lede { max-width: 520px; }
body:not(.home) .cta .lede, body:not(.home) .statement p, body:not(.home) .hero.midden .lede { margin-left: auto; margin-right: auto; }

/* ---- Kleur: wat van crème naar donker ging (hooguit twee crème momenten per pagina) krijgt de tekstkleuren van donker ---- */
body:not(.home) main > section.open:not(.hero), body:not(.home) main > section.band.close:not(.light) { background: transparent; color: var(--off); }
body:not(.home) main > section.open .label, body:not(.home) main > section.band.close:not(.light) .label { color: var(--accent-label); }
body:not(.home) main > section.open h2, body:not(.home) main > section.open h3, body:not(.home) main > section.band.close:not(.light) h2 { color: var(--off); }
body:not(.home) main > section.open .lede, body:not(.home) main > section.band.close:not(.light) .lede { color: rgb(var(--off-rgb) / 0.72); }
body:not(.home) main > section.open .list li { border-color: var(--line-2); }
body:not(.home) main > section.open .list b { color: var(--off); }
body:not(.home) main > section.open .list span { color: rgb(var(--off-rgb) / 0.72); }
body:not(.home) main > section.open .textlink, body:not(.home) main > section.band.close:not(.light) .textlink { color: var(--off); border-bottom-color: var(--gold-line); }
body:not(.home) main > section.open .over-text p { color: rgb(var(--off-rgb) / 0.72); }
body:not(.home) main > section.open .over-text .hl { color: var(--accent-text); }

/* ---- Kaarten: ronding 16, geen schaduw, hoogte gelijk aan de inhoud ---- */
body:not(.home) .pair .wrap { align-items: start; }
body:not(.home) .pair .wrap > div, body:not(.home) .voices .quotes li, body:not(.home) .faq .faq-list.frame, body:not(.home) .form,
body:not(.home) .burnout .doors a, body:not(.home) .doors a, body:not(.home) .seg .media, body:not(.home) .numbers .wrap > div,
body:not(.home) .stories li, body:not(.home) .why-cards li { border-radius: var(--kaart); box-shadow: none; }
body:not(.home) .voices.proof .quotes li { height: auto; }

/* ---- Chips: één stijl (sans 13, haarlijn, geen vulling, niet vet en niet cursief). Uitzondering: de gouden pillen bij 94% (Ryan) ---- */
body:not(.home) .checks li, body:not(.home) .theme-row li { display: inline-flex; align-items: center; height: auto; min-height: 32px; padding: 6px 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; line-height: 1.3; color: var(--off-dim); }
body:not(.home) .checks li::before { display: none; }
body:not(.home) section.light .checks li, body:not(.home) section.light .theme-row li { border-color: rgb(var(--ink-rgb) / 0.18); color: var(--light-ink); }
body:not(.home) .theme-row { gap: 8px; }
body:not(.home) .voices.proof .areas li { min-height: 0; padding: 10px 22px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--panel-hi); color: var(--off); font-size: 17px; font-weight: 600; font-style: italic; transition: background-color .16s ease; }
body:not(.home) .voices.proof .areas li:hover { transform: none; background-color: rgb(var(--gold-rgb) / calc(0.12 * var(--glow))); }

/* ---- De opening met een lege rechterhelft (/traject/app, /methode/funderingen, /over, /vragen): voorlopig kop en zin gecentreerd ---- */
body:not(.home) .hero.midden .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---- Beeld: AVIF in picture, het picture-element doet niet mee in de opmaak ---- */
body:not(.home) picture { display: contents; }

/* ---- Hover: alleen kleur, 160 ms; niets schuift of tilt op ---- */
body:not(.home) main .textlink { transition: color .16s ease, border-color .16s ease; }
body:not(.home) main .textlink:hover svg { transform: none; }
body:not(.home) .quotes li, body:not(.home) .proof .areas li { transition: border-color .16s ease, background-color .16s ease; }
body:not(.home) .quotes li:hover { transform: none; }

/* ---- Kennismaken zonder formulier (/traject en /burn-out): kop, zin en de knop naar /kennismaking ---- */
body:not(.home) .contact.zonder-form .wrap { display: block; }
body:not(.home) .contact.zonder-form .knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: var(--ruimte-inhoud); }
body:not(.home) .contact.zonder-form .small { font-size: 14px; color: var(--muted); }
/* op /kennismaking: minstens 24 ruimte tussen de zin en het formulier */
body:not(.home) .contact.lead .lede { margin-bottom: 24px; }

/* ---- Juridische pagina's: één documentstijl. Geen plaat, een kolom van 68 tekens, tekst 17 met lh 1,6, H2 32 en H3 22 met 48 boven elk
   artikel, de datum bovenaan en de inhoudsopgave onder de titel, met ankers die onder de balk uitkomen ---- */
body:not(.home) main > section.policy, body:not(.home) main > section.policy.plaat { margin: 0; border-radius: 0; background: none; border: 0; padding-top: var(--sec) !important; }
main > .policy:first-child { margin-top: 0; }
body:not(.home) .policy .wrap, body:not(.home) .policy.solo .wrap { display: block; }
body:not(.home) .policy article { max-width: 68ch; }
body:not(.home) .policy .date { display: block; font-size: 14px; color: var(--muted); margin: 0 0 16px; }
body:not(.home) .policy h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 var(--ruimte-inhoud); }
body:not(.home) .policy .toc { position: static; margin: 0 0 16px; padding: 24px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
body:not(.home) .policy .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; }
body:not(.home) .policy .toc a { padding: 6px 0; border-left: 0; font-size: 15px; color: var(--off-dim); }
body:not(.home) .policy .toc a:hover { color: var(--off); }
body:not(.home) .policy p, body:not(.home) .policy li { font-size: 17px; line-height: 1.6; }
body:not(.home) .policy h2 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; margin: 48px 0 var(--ruimte-lede); scroll-margin-top: 104px; }
body:not(.home) .policy h3 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-item); line-height: var(--lh-item); margin: 32px 0 12px; scroll-margin-top: 104px; }
@media (max-width: 820px) { body:not(.home) .policy .toc ol { grid-template-columns: 1fr; } body:not(.home) .policy .toc { display: block; } }

/* ---- Kaarttitel: kleine labels binnen een kaart of rij tellen niet als label (hooguit 6 per pagina); sans 13, halfvet, geen hoofdletters ---- */
body:not(.home) .kaart-kop { display: block; margin: 0 0 10px; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--off-dim); }
body:not(.home) section.light .kaart-kop { color: var(--light-muted); }

/* ---- Het laatste element van een sectie heeft geen marge onder, zodat de sectieruimte de afstand bepaalt (tussen de inhoud van twee secties 216) ---- */
body:not(.home) main > section:not(.hero):not(.policy) .wrap > :last-child,
body:not(.home) main > section:not(.hero):not(.policy) .wrap > :last-child > :last-child,
body:not(.home) main > section:not(.hero):not(.policy) .wrap > div > :last-child { margin-bottom: 0; }
body:not(.home) .statement p { max-width: 540px; }
body:not(.home) main > section.open + section.plaat { margin-top: 0; }
/* de kaarten die door een sterkere oude regel nog op 24 stonden */
body:not(.home) .seg .media, body:not(.home) .faq details.topic, body:not(.home) .doors a.slot, body:not(.home) .numbers .row,
body:not(.home) .calc .result, body:not(.home) .result, body:not(.home) .doors2 a.slot, body:not(.home) .pair .wrap > div, body:not(.home) .contact .form, body:not(.home) .contact.island .form { border-radius: var(--kaart) !important; box-shadow: none; }
/* de pijl achter de laatste regel van een juridische tekst kreeg zonder raster geen maat; samengestelde woorden in een deurlink breken niet op het streepje */
body:not(.home) .policy .foot svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }
body:not(.home) .doors a span { text-wrap: balance; line-height: 1.12; }
body:not(.home) .doors a small { line-height: 1.45; text-wrap: pretty; }
body:not(.home) .nw { white-space: nowrap; }
/* telefoon: de openingsfoto (4:5, hooguit 460 hoog) bleef 368 breed en liet rechts een strook van 22 px open; hij loopt nu tot de rand */
@media (max-width: 820px) { body:not(.home) .hero-media { width: 100%; } }
/* gecentreerde koppen en zinnen verdelen hun regels gelijk, zodat er geen los woord onderaan blijft staan ("van / ons.") */
body:not(.home) .cta h2, body:not(.home) .cta .lede, body:not(.home) .hero.midden h1, body:not(.home) .hero.midden .lede, body:not(.home) .statement p { text-wrap: balance; }
/* lopende tekst ook in de vragen en in de afsluiter hooguit 540 breed (de antwoorden op de burn-outpagina's waren 601, de zin onder de afsluiter op /vragen 681) */
body:not(.home) .faq .answer p, body:not(.home) .faq details p { max-width: 540px; }
body:not(.home) .cta .wrap > p { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---- /kennismaking past in één scherm (Ryan, 18 oktober) ----
   Het blok met kop en formulier vult het scherm onder de balk: verticaal gecentreerd, compacter formulier, kleiner tekstvak. */
@media (min-width: 821px) {
  body:not(.home) main > .contact.island.lead { margin-top: 20px; min-height: calc(100svh - 92px - 20px); padding-top: 32px !important; padding-bottom: 32px !important; display: flex; align-items: center; box-sizing: border-box; } /* main heeft al 72 boven */
  main > .contact.island.lead > .wrap { width: min(100% - 2 * var(--gutter), var(--content)); align-items: center; }
  .contact.island.lead .form { padding: 28px 32px; gap: 14px; }
  .contact.island.lead .form label { gap: 6px; font-size: 13px; }
  .contact.island.lead .form input, .contact.island.lead .form select { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .contact.island.lead .form textarea { min-height: 96px; height: 96px; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .contact.island.lead .form textarea { min-height: 72px; height: 72px; }
  .contact.island.lead .form { padding: 22px 28px; gap: 10px; }
}
/* 94%: de regel met de basis, het sterretje en de bron onderaan de pagina, zoals op de homepage (Ryan, 19 oktober) */
body:not(.home) .voices.proof .basis { margin: 16px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
html.js body:not(.home) .proof-top.draw.in > .basis { transition-delay: .45s; }
body:not(.home) .ster { font-size: 12px; line-height: 0; margin-left: 2px; vertical-align: super; }
body:not(.home) .ster a { color: var(--accent-text); text-decoration: none; }
body:not(.home) .bronnen { padding: 32px 0 40px; border-top: 1px solid var(--line); }
body:not(.home) .bron-94 { max-width: 80ch; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
body:not(.home) .bron-94 sup { color: var(--accent-text); margin-right: 4px; }
/* 94% op de andere pagina's: de zin op één regel en de bronregel gecentreerd onder de pillen (Ryan, 19 oktober) */
@media (min-width: 821px) { body:not(.home) .voices.proof h2.stat { max-width: none; white-space: nowrap; } }
body:not(.home) .voices.proof .basis { align-self: center; justify-self: center; margin-inline: auto; }
/* het kennismakingsformulier (19 oktober): de valkuil voor bots staat buiten beeld (niet display:none, dan slaan bots hem over),
   de zin over toestemming staat letterlijk en altijd zichtbaar direct boven de knop, in de kleine tekststijl */
.form .valkuil { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
body:not(.home) .form .toestemming { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* /bedankt en /aanmelden-mislukt (19 oktober): één donker eiland met label, kop, zin en de weg terug, gecentreerd; op de computer vult het
   eiland het scherm onder de balk, net als op /kennismaking */
body:not(.home) .contact.melding .wrap { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
body:not(.home) .contact.melding h1 { margin-bottom: 16px; }
body:not(.home) .contact.melding .lede { margin: 0 auto; max-width: 40ch; }
body:not(.home) .contact.melding .textlink { margin-top: 32px; }
body:not(.home) .contact.melding .knoppen { justify-content: center; }
/* Koppen en ruimte (21 oktober avond): een stappenlijst direct onder de kop staat op de inhoudsafstand (40, telefoon 32), net als onder een lede */
body:not(.home) .measure h2 + .steps { margin-top: var(--ruimte-inhoud); }
/* Juridische pagina's op de telefoon: de H1 heeft de maat van alle openingen (44); "Privacyverklaring" is één woord van 373 breed en mag daarom afbreken */
@media (max-width: 820px) { body:not(.home) .policy h1 { hyphens: auto; -webkit-hyphens: auto; } }