/* ==========================================================================
   CentrAid.Web — site-opmaak bovenop de designtokens.
   Tokens komen uit css/centraid-tokens.css (bron: Brain 04-branding,
   gesynchroniseerd via deploy/sync-branding.ps1 — daar nooit in wijzigen).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; }

/* --- Sectiebreedtes -------------------------------------------------------
   Tekstsecties krijgen een smallere, gecentreerde kolom; op een breed scherm
   blijft 72rem met 70ch-tekst anders links hangen met een lege rechterflank.
   Brede secties (kaarten, bio, prijzen) houden de volle .ca-omhulsel. */
.ca-omhulsel.smal { max-width: 48rem; }

/* --- Header / footer ---------------------------------------------------- */
.site-header {
  /* Geen balk: de header zweeft boven de pagina, het logo valt ín de hero.
     pointer-events op de link alleen, zodat de onzichtbare strook niets
     blokkeert. */
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  padding-block: var(--ca-r-3) 0;
  text-align: left;
  pointer-events: none;
}
.site-header a { pointer-events: auto; display: inline-block; }
/* Niet mee-centreren met de pagina-inhoud: op brede schermen schoof het logo
   dan uit de hero-hoek (review Pieter 2026-09-03). Links verankerd blijft
   het op elke breedte op zijn plek staan. */
.site-header .ca-omhulsel { max-width: none; }
.site-logo { width: 4.75rem; height: auto; }

/* Pagina's zonder hero (status, privacy, voorwaarden) reserveren zelf ruimte
   onder het zwevende logo. */
main > .ca-sectie:first-child:not(.hero) { padding-top: 7rem; }

.site-footer {
  border-top: 2px dotted var(--ca-stippel);
  padding-block: var(--ca-r-4);
  font-size: var(--ca-t-klein);
  line-height: var(--ca-r-klein);
  color: var(--ca-tekst-zacht);
}
.site-footer .ca-omhulsel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ca-r-2) var(--ca-r-4);
  align-items: center;
  justify-content: space-between;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--ca-r-3); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(56rem 30rem at 50% -12%, rgb(201 138 75 / 20%), transparent 62%),
    radial-gradient(40rem 26rem at 8% 115%, rgb(138 154 123 / 15%), transparent 60%),
    var(--ca-schelp);
  text-align: center;
  /* Voor de decoratieve .ca-schijf: die steekt links en boven buiten beeld. */
  position: relative;
  overflow: clip;
}
.hero .ca-omhulsel { max-width: 58rem; position: relative; }
/* De zand-warme hero-schijf verviel met de fotoversie: de levensboom-foto
   (.hero-sfeer, verderop) is nu de achtergrond (besluit Pieter 2026-09-04). */
.hero-lead-2 { color: var(--ca-tekst-zacht); }
/* Beide hero-leads in dezelfde tekstletter én -grootte (review Pieter
   2026-09-03) — de serif en het h3-formaat bleven elders op de pagina. */
.hero .section-lead { font-family: var(--ca-tekst-font); font-size: var(--ca-t-body); }
/* Pieters vaste regelval in de leads geldt alleen waar hij past; op smalle
   schermen zouden de afbrekingen rafelige halve regels geven. */
@media (max-width: 640px) {
  .hero .section-lead br, .hero-lead-2 br { display: none; }
}
.section-lead strong { color: var(--ca-terra); }
.uitroep { color: var(--ca-terra); }
.hero-tagline {
  font-family: var(--ca-hand);
  font-weight: 600;
  color: var(--ca-accent);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-block: var(--ca-r-3);
}
.hero p { margin-inline: auto; }
.hero-cta { margin-top: var(--ca-r-4); }
.urgency {
  font-size: var(--ca-t-klein);
  color: var(--ca-tekst-zacht);
  margin-top: var(--ca-r-2);
  /* Geen 70ch-plafond: de regel vloeit met de schermbreedte mee in plaats van
     vroeg af te breken (review 2026-09-03). */
  max-width: none;
}

/* --- Checklist "Herken je dit?" ------------------------------------------ */
.checklist { list-style: none; padding: 0; margin-block: var(--ca-r-4); }
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-block: var(--ca-r-2);
}
.checklist li::before {
  /* Vinkje in een cirkel: "ja, dit ben ik". Kruisjes stonden hier even
     (flyer-taal) maar lazen als fout/verwijderd — Pieter, 2026-08-27.
     De cirkel is licht onregelmatig (zelfde pad als de benefits-chip):
     een passer-cirkel was het enige machinale rondje op de pagina. */
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.1em;
  height: 1.1em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.2 C 18.3 0.9, 22.9 5.4, 22.8 11.8 C 22.7 18.4, 18.1 23, 11.8 22.8 C 5.6 22.6, 1.1 18.2, 1.2 11.9 C 1.3 5.6, 5.8 1.5, 12 1.2 Z" fill="none" stroke="%23b0563b" stroke-width="1.8"/><path d="M7.4 12.4 10.6 15.6 16.6 9" fill="none" stroke="%23b0563b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
.checklist-close {
  font-family: var(--ca-hand);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);
  line-height: 1.25;
}
.checklist-close a {
  color: var(--ca-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* --- Vlakke banden -------------------------------------------------------- */
.band-schelp { background: var(--ca-schelp); }

/* --- Wat verandert er (donkere sectie) ------------------------------------ */
.benefits { list-style: none; padding: 0; margin-block: var(--ca-r-4); }
.benefits li {
  position: relative;
  padding-left: 1.75rem;
  margin-block: var(--ca-r-2);
}
.benefits li::before {
  /* Geschilderde chip met vinkje — de huisstijl schrijft opsommingen
     "zonder hartjes" voor (referentiepagina, 2026-08-06). */
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.1em;
  height: 1.1em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.2 C 18.3 0.9, 22.9 5.4, 22.8 11.8 C 22.7 18.4, 18.1 23, 11.8 22.8 C 5.6 22.6, 1.1 18.2, 1.2 11.9 C 1.3 5.6, 5.8 1.5, 12 1.2 Z" fill="%23d8a362"/><path d="M7.6 12.4 10.7 15.5 16.5 9.2" fill="none" stroke="%23231e1a" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* --- Kompas --------------------------------------------------------------- */
.compass { text-align: center; }
.compass-visual {
  max-width: 34rem;
  margin-inline: auto;
  margin-block: var(--ca-r-4);
}
.compass-themes {
  font-family: var(--ca-kop);
  font-size: var(--ca-t-h3);
  color: var(--ca-accent);
}
.compass p { margin-inline: auto; }

/* --- Hoe het traject werkt ------------------------------------------------ */
.steps {
  list-style: none;
  padding: 0;
  margin-block: var(--ca-r-4);
  display: grid;
  gap: var(--ca-r-3);
  counter-reset: step;
}
/* Stap 1 en 2 naast elkaar, stap 3 op dezelfde kaartbreedte gecentreerd
   eronder (achtste review Pieter 2026-09-04; drie naast elkaar bleef te
   krap voor de lange stap-3-tekst, en vol-breed onder elkaar oogde leeg). */
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - (var(--ca-r-3) / 2));
    justify-self: center;
  }
}
.steps li {
  counter-increment: step;
  background: var(--ca-zand-warm);
  border-radius: var(--ca-rond-zacht);
  padding: var(--ca-r-4);
  box-shadow: var(--ca-schaduw);
  text-align: center;
  /* Flex-kolom zodat de handgeschreven slotregels in alle kaarten op
     dezelfde hoogte (onderaan) uitlijnen (zesde review 2026-09-04). */
  display: flex;
  flex-direction: column;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  margin-inline: auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ca-rond-organisch);   /* geen passer-cirkel */
  background: var(--ca-accent);
  color: var(--ca-accent-op);
  font-family: var(--ca-kop);
  font-weight: 700;
  margin-bottom: var(--ca-r-2);
}
/* Iets meer lucht in de kaarten: de tekst oogde samengeduwd (review
   Pieter 2026-09-03). Tweede ronde diezelfde dag: gecentreerde lopende
   tekst bleef geduwd ogen — de romp is nu links uitgelijnd met alinea-lucht
   en (waar het opsombaar is) een vlekjes-lijstje; nummer, icoon en titel
   blijven gecentreerd. */
.steps li { text-align: left; }
.steps .ca-icoon { display: block; margin-inline: auto; }
.steps h3 { margin-block: 0 var(--ca-r-2); text-align: center; }
.steps p { margin-block: 0; line-height: 1.7; }
.steps p + p, .steps p + ul { margin-top: var(--ca-r-2); }
.steps ul.ca-vlekjes { margin-top: var(--ca-r-2); }
/* Handgeschreven slotregel per stap — de speelse "enter" die Pieter vroeg.
   Elke slotregel in de kleur van de eigen nummerchip (stap 1 = terra is al
   de standaard accentkleur; stap 2 = oker, stap 3 = mos — vierde review
   2026-09-03). Oker en mos worden licht met aarde bijgemengd zodat ze als
   tekst leesbaar blijven op het lichte vlak. */
.steps .ca-hand { display: block; text-align: center; margin-top: auto; padding-top: var(--ca-r-3); }
.steps li:nth-child(2) .ca-hand { color: color-mix(in srgb, var(--ca-oker) 72%, var(--ca-aarde)); }
.steps li:nth-child(3) .ca-hand { color: color-mix(in srgb, var(--ca-mos) 82%, var(--ca-aarde)); }
/* Elke stap zijn eigen kleur — terra, oker, mos: het speelse kleurritme van de
   referentiepagina (review 2026-09-03, "jong en fris"). */
.steps li:nth-child(1)::before { background: var(--ca-terra); color: var(--ca-creme); }
.steps li:nth-child(2)::before { background: var(--ca-oker); color: var(--ca-aarde); }
.steps li:nth-child(3)::before { background: var(--ca-mos); color: var(--ca-creme); }

/* --- Wie begeleidt je ----------------------------------------------------- */
.bio {
  display: grid;
  gap: var(--ca-r-5);
  align-items: start;
}
@media (min-width: 48rem) {
  .bio { grid-template-columns: minmax(16rem, 2fr) 3fr; }
}
.bio-portrait {
  aspect-ratio: 1 / 1.04;
  width: 100%;
  object-fit: cover;
}
/* Staand beeld met het gezicht bovenin (evelien-deur): de standaard
   center-crop sneed de kruin af op brede schermen (vijfde review 2026-09-03). */
.bio-portrait-hoog { object-position: 50% 12%; }
.bio blockquote {
  margin: var(--ca-r-4) 0 0;
  padding-left: var(--ca-r-3);
  border-left: 3px solid var(--ca-accent);
  font-family: var(--ca-kop);
  font-style: italic;
  color: var(--ca-tekst-zacht);
}

/* --- Getuigenissen ---------------------------------------------------------
   Kaarten met een lichte, afwisselende draai — hetzelfde speelse gebaar als de
   brush-titels. De naam in vet accent, geen script: de huisstijl staat maximaal
   één handregel per scherm toe. */
.getuigenissen {
  display: grid;
  gap: var(--ca-r-4);
  margin-block: var(--ca-r-5);
}
@media (min-width: 55rem) {
  .getuigenissen { grid-template-columns: 1fr 1fr; }
}
.getuigenis-kaart {
  margin: 0;
  background: var(--ca-zand-warm);
  border-radius: var(--ca-rond-zacht);
  padding: var(--ca-r-4) var(--ca-r-5);
  box-shadow: var(--ca-schaduw);
  position: relative;
}
.getuigenis-kaart:nth-child(odd) { rotate: -0.6deg; }
.getuigenis-kaart:nth-child(even) { rotate: 0.5deg; }
.getuigenis-kaart::before {
  content: "\201C";
  position: absolute;
  top: 0.22em;   /* op 0.02em plakte het aanhalingsteken tegen de kaartrand (review 2026-09-03) */
  left: 0.22em;
  font-family: var(--ca-brush);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--ca-oker-zacht);
}
.getuigenis-kaart blockquote {
  margin: 0;
  font-family: var(--ca-kop);
  font-style: italic;
  color: var(--ca-tekst-zacht);
}
/* De verbatim getuigenissen zijn soms meerdere alinea's lang. */
.getuigenis-kaart blockquote p { margin-block: 0; }
.getuigenis-kaart blockquote p + p { margin-top: var(--ca-r-2); }
.getuigenis-kaart figcaption {
  margin-top: var(--ca-r-2);
  font-weight: 700;
  color: var(--ca-accent);
}
.getuigenis-kaart figcaption::before { content: "— "; }
/* De kaarten blijven zelf licht op het terracotta-vlak (sectie op .ca-warm
   sinds review 2026-09-03); de lichte kleuren staan hier hard zodat de warme
   sectievariabelen er niet doorheen lekken — zelfde truc als .signup-card. */
.ca-warm .getuigenis-kaart {
  --ca-accent: #b0563b;
  --ca-tekst-zacht: #5c5248;
}

/* --- Aanbod / prijzen ------------------------------------------------------ */
.aanbod { position: relative; overflow: clip; }
.aanbod-schijf {
  /* Zachte salie-schijf rechts, deels buiten beeld — vormvariatie in de
     aanbod-sectie. Niet boven de sectierand uit laten steken: de
     afgeknipte bovenkant las als een blok dat uit het niets opdook (review
     Pieter 2026-09-03); nu een zachte halve boog vanaf de rechterrand. */
  right: -22rem;
  top: 3rem;
  left: auto;
  background: var(--ca-salie);
  opacity: 0.18;
}
.pricing {
  display: grid;
  gap: var(--ca-r-4);
  margin-block: var(--ca-r-5);
  align-items: stretch;
}
@media (min-width: 55rem) {
  .pricing { grid-template-columns: 1fr 1fr; }
}
.pricing-card {
  background: var(--ca-zand-warm);
  border-radius: var(--ca-rond-zacht);
  padding: var(--ca-r-5);
  box-shadow: var(--ca-schaduw);
  /* Kolomflex: de prijs schuift naar onder zodat prijs en knop van beide
     kaarten op dezelfde hoogte staan. */
  display: flex;
  flex-direction: column;
}
.pricing-card .price {
  margin-top: auto;
  padding-top: var(--ca-r-3);
  border-top: 2px dotted var(--ca-stippel);
}
.pricing-card .ca-knop { text-align: center; }
.pricing-card.is-guided { border: 2px solid var(--ca-accent); background: var(--ca-schelp); }
.pricing-card h3 { margin-top: 0; }
.pricing-card ul { padding-left: 1.25rem; }
.pricing-card li { margin-block: var(--ca-r-1); }
.pricing-note {
  font-style: italic;
  color: var(--ca-tekst-zacht);
}
/* De gevoelszin zelf in het oker (review Pieter 2026-09-03) — donker
   bijgemengd zodat hij op de zand-warme kaart leesbaar blijft. */
.pricing-note em {
  color: color-mix(in srgb, var(--ca-oker) 72%, var(--ca-aarde));
  font-weight: 600;
}
.price {
  font-family: var(--ca-kop);
  font-size: var(--ca-t-h2);
  font-weight: 700;
  margin-block: var(--ca-r-3) var(--ca-r-2);
}
/* Toelichting onder de vroegboekprijs: "vroegboekprijs tot en met …, vanaf … €377".
   Een eigen regel in de gewone tekstletter, zacht van kleur — géén doorgestreepte prijs. */
.price-note {
  display: block;
  font-family: var(--ca-tekst-font);
  font-size: var(--ca-t-klein);
  font-weight: 400;
  color: var(--ca-tekst-zacht);
  margin-top: 0.35rem;
}
.pricing-limit {
  font-size: var(--ca-t-klein);
  font-weight: 600;
  color: var(--ca-terra);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

/* --- FAQ -------------------------------------------------------------------
   De vragen in de tekstletter, kleiner dan de sectiekop: in Literata op
   h3-formaat overstemden ze de kop "Veelgestelde vragen" (review 2026-09-03).
   De kop zelf in de brush-letter, net als de sectietitels (vraag Pieter,
   vierde review 2026-09-03) — tweede brush-kop in deze sectie is zijn
   expliciete keuze, boven de doseringsregel. */
.faq { margin-top: var(--ca-r-5); }
.faq h3 {
  font-size: var(--ca-t-h2);
  margin-bottom: var(--ca-r-3);
  font-family: var(--ca-brush);
  font-weight: 400;
  color: var(--ca-mos);
  rotate: -1.5deg;
  padding-block: 0.1em;
}
.faq details {
  border-bottom: 2px dotted var(--ca-stippel);
  padding-block: var(--ca-r-2);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--ca-tekst-font);
  font-size: var(--ca-t-body);
  color: var(--ca-tekst);
  list-style: none;
  position: relative;
  padding-left: 1.6rem;
  transition: color var(--ca-duur) var(--ca-curve);
}
.faq summary:hover { color: var(--ca-terra); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.5em;
  height: 0.5em;
  border-right: 2.5px solid var(--ca-terra);
  border-bottom: 2.5px solid var(--ca-terra);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.faq details[open] > summary::before { transform: rotate(45deg); }
.faq summary:focus:not(:focus-visible) { outline: none; }
.faq p { margin-top: var(--ca-r-2); }

/* --- Wachtlijstformulier ----------------------------------------------------
   De kaart staat op een .ca-diep-sectie maar blijft zelf licht; de kleuren
   staan hier hard op de lichte waarden zodat de donkere sectievariabelen er
   niet doorheen lekken. */
.signup-card {
  background: #faf5ec;
  color: #3a322c;
  border-radius: var(--ca-rond-zacht);
  padding: var(--ca-r-5);
  box-shadow: var(--ca-schaduw);
  max-width: 34rem;
  margin-inline: auto;
}
.signup-card h3 { margin-top: 0; color: #3a322c; }
.signup-card p { color: #55493f; }
.form-field { margin-block: var(--ca-r-3); }
.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--ca-r-1);
}
/* Blazor's InputText rendert zonder type-attribuut, dus niet op [type] matchen. */
.form-field input:not([type="checkbox"]) {
  width: 100%;
  font: inherit;
  color: #3a322c;
  background: #fff;
  border: 1px solid rgb(107 95 85 / 40%);
  border-radius: var(--ca-rond);
  padding: var(--ca-r-2);
}
.form-consent {
  display: flex;
  gap: var(--ca-r-2);
  align-items: flex-start;
  font-size: var(--ca-t-klein);
  line-height: var(--ca-r-klein);
  color: #55493f;
}
.form-consent input { margin-top: 0.2em; width: 1.1em; height: 1.1em; accent-color: #b0563b; }
.form-consent a { color: #b0563b; }
.form-error {
  background: rgb(176 86 59 / 12%);
  border: 1px solid #b0563b;
  border-radius: var(--ca-rond);
  padding: var(--ca-r-2) var(--ca-r-3);
  margin-block: var(--ca-r-3);
  color: #3a322c;
}
.signup-button {
  width: 100%;
  text-align: center;
  font-size: var(--ca-t-body);
  cursor: pointer;
  background: #b0563b;
  color: #faf5ec;
}
.signup-button:hover { background: #9c4c34; }

/* Honeypot: buiten beeld, bewust niet display:none. */
.section-cta { margin-top: var(--ca-r-4); }

.form-choice {
  border: 0;
  padding: 0;
  margin-block: var(--ca-r-3);
}
.form-choice legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--ca-r-1);
}
.form-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 var(--ca-r-3) var(--ca-r-1) 0;
}
.form-choice input { width: 1.1em; height: 1.1em; accent-color: #b0563b; }

.hp-field {
  position: absolute;
  left: -6000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Statuspagina's --------------------------------------------------------- */
.status-page { text-align: center; max-width: 44rem; margin-inline: auto; }
.status-page p { margin-inline: auto; }
.status-page .ca-knop { margin-top: var(--ca-r-4); }

/* Optioneel motivatieveld op de bevestigd-pagina. */
.motivatie-veld {
  text-align: left;
  background: #f0e4cf;
  border-radius: var(--ca-rond);
  padding: var(--ca-r-3) var(--ca-r-4);
  margin-block: var(--ca-r-4);
}
.motivatie-vraag {
  display: block;
  font-weight: 600;
  margin-bottom: var(--ca-r-2);
  color: #3a322c;
}
.motivatie-veld textarea {
  width: 100%;
  font: inherit;
  color: #3a322c;
  background: #fff;
  border: 1px solid rgb(107 95 85 / 40%);
  border-radius: var(--ca-rond);
  padding: var(--ca-r-2);
  resize: vertical;
}
.motivatie-veld .ca-knop { margin-top: var(--ca-r-2); }
.motivatie-hint {
  font-size: var(--ca-t-klein);
  color: #55493f;
  margin-block: var(--ca-r-2);
}
.motivatie-dank { text-align: center; }
.form-optioneel { font-weight: 400; color: #55493f; }

/* --- Sfeerbeelden ------------------------------------------------------------
   De fotoversie werd op 2026-09-04 dé landingspagina (op de root); dit zijn
   haar beeldlagen. */
.sfeer-foto { margin: var(--ca-r-4) auto 0; max-width: 44rem; }
.sfeer-foto img { display: block; width: 100%; }
.sfeer-foto.smal { max-width: 30rem; }
/* De borstelring steekt ~6-10% buiten de foto (per zijde verschillend, zie
   de meting in centraid-tokens.css): op 34rem breed is dat boven en onder
   zo'n 1,8rem — de marges moeten dus ruimer dan r-3, anders plakt de ring
   tegen de mailregel erboven en de kaart eronder (vraag Pieter 2026-09-04).
   De breedte is 82% i.p.v. 100% op smalle schermen: dan past de ring mét
   overhang binnen het scherm en wordt hij niet afgekapt (Android-screenshot
   Pieter 2026-09-04). */
.sfeer-foto.slot-foto { margin: var(--ca-r-5) auto var(--ca-r-5); width: min(34rem, 82%); }
/* Vangnet: mocht de ring toch nét buiten de viewport steken, laat hem van het
   canvas lopen in plaats van de pagina horizontaal te laten scrollen. */
#wachtlijst { overflow-x: clip; }
/* Visitekaartje-foto (de grote boom) als gedeeltelijke hero-achtergrond
   (vijfde review 2026-09-03, vraag Evelien): lage dekking en een mask dat
   naar onderen wegfadet, zodat titel en CTA leesbaar blijven. Zesde review
   2026-09-04: de boom mag meer doorkomen. */
.hero-sfeer {
  position: absolute;
  inset: 0;
  background: url("../images/ijk-levensboom.webp") center 40% / cover no-repeat;
  opacity: 0.24;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 85%);
  pointer-events: none;
}
/* Journal-foto als sfeerlaag over de héle twijfel/FAQ-sectie, zoals de boom
   in de hero: één doorlopende achtergrond op lage dekking die boven en onder
   in de sectiekleur wegvloeit. De eerdere band midden in de sectie bleef
   randen tonen, hoe breed de fade ook was (zevende review 2026-09-04). */
.faq-band { position: relative; overflow-x: clip; }
.faq-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/ijk-journal.webp") center 35% / cover no-repeat;
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  pointer-events: none;
}
.faq-band > * { position: relative; }
/* Smalle schermen krijgen de halve versie van beide sfeerlagen (perf-ronde
   2026-09-17): 385 -> 145 kB voor de boom, 122 -> 47 kB voor het journal. Het
   zijn decoratieve lagen op 24 % en 10 % dekking achter een fade-masker; dat een
   960-brede foto op een telefoon met een scherm van dubbele dichtheid iets
   zachter staat, ziet niemand — een halve megabyte op mobiele data wel. De grens
   ligt op 900 px omdat de hero daarboven écht breed uitloopt. */
@media (max-width: 900px) {
  .hero-sfeer { background-image: url("../images/ijk-levensboom-960.webp"); }
  .faq-band::before { background-image: url("../images/ijk-journal-960.webp"); }
}
/* De duinpad-blend achter "Vanbinnen wringt er iets" verviel op Pieters
   vraag (2026-09-04): ook op dekking 0,12 bleef de sectie te onrustig. */

/* --- Kleinigheden ------------------------------------------------------------ */
.section-lead { font-size: var(--ca-t-h3); font-family: var(--ca-kop); }
.center { text-align: center; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Gevoelsronde (Pieters review 2026-08-27): warmte en ritme.
   ========================================================================== */

/* Sectieritme: het token (3,5–6rem) oogde op deze pagina te luchtig. */
.ca-sectie { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.25rem); }

/* De hero begint pas onder het zwevende logo (±6,5rem hoog met marge). */
.hero.ca-sectie { padding-top: clamp(7rem, 6rem + 3vw, 8.5rem); }

/* Een sectie die op een golf eindigt: de golf is het laatste kind en moet op
   de onderrand van de sectie liggen, dus daar vervalt de onderpadding en
   ademt de golf zelf naar boven. */
.ca-sectie:has(> .ca-golf, > .ca-golf-2, > .ca-golf-3) { padding-bottom: 0; }
.ca-sectie > .ca-golf,
.ca-sectie > .ca-golf-2,
.ca-sectie > .ca-golf-3 { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Emotionele kernzinnen: Caveat-handregels in het accent (Voluit-stijl). */
.accent-line {
  font-family: var(--ca-hand);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.85rem);
  line-height: 1.25;
  color: var(--ca-accent);
}

/* --- Voluit-gebaren (flyer-ronde 2026-09-03) ------------------------------ */
/* Alleen voor voorleessoftware: de echte "!" naast het decoratieve
   uitroepteken-met-hartje. */
.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Lijn-icoon per stap, in de stapkleur — tussen nummerchip en titel. */
.steps .ca-icoon { margin-bottom: var(--ca-r-1); }
.steps li:nth-child(1) .ca-icoon { background: var(--ca-terra); }
.steps li:nth-child(2) .ca-icoon { background: var(--ca-oker); }
.steps li:nth-child(3) .ca-icoon { background: var(--ca-mos); }

/* ==========================================================================
   Voluit-laag (huisstijlronde 2026-08-27): de flyer-taal van de definitieve
   referentiepagina — brush-titels, kickers, pil-knoppen, warme kaarten.
   Tokens en klassen (.ca-brush/.ca-hand/.ca-kicker) komen uit de Brain.
   ========================================================================== */

/* Titels in Kaushan Script, licht gedraaid; op donkere secties in crème.
   Dosering blijft binnen de huisstijlregel: één brush-titel per sectie/scherm. */
.hero h1,
.ca-sectie h2 {
  font-family: var(--ca-brush);
  font-weight: 400;
  font-variation-settings: normal;
  color: var(--ca-mos);
  rotate: -2deg;
  padding-block: 0.1em;      /* Kaushans halen lopen buiten de em-box */
}
.ca-sectie h2 { rotate: -1.5deg; }
.ca-diep h2,
.ca-warm h2 { color: var(--ca-creme); }
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 4.8vw, 4rem); }

/* Statuspagina's (bedankt/bevestigd): zelfde brush-titel als de rest van de
   flow — een kale Literata-h1 las als een systeempagina (review 2026-09-03). */
.status-page h1 {
  font-family: var(--ca-brush);
  font-weight: 400;
  color: var(--ca-mos);
  rotate: -2deg;
  padding-block: 0.1em;
}

/* Knoppen als pil — de vorm van de referentiepagina. */
.ca-knop { border-radius: var(--ca-rond-pil); }