/* ═══════════════════════════════════════════════════════════════
   de Groei-tuin — de advertentiepagina's

   Erft de merklaag van style.css. Wat hier anders is dan op de website:

   · geen menu. Betaald verkeer mag maar één kant op, en elke link in de
     kop is een uitgang.
   · één belofte, één knop, en die knop komt twee keer terug: boven de
     vouw en aan het eind.
   · smallere tekstkolom dan op de site — je leest hier niet, je beslist.
   ═══════════════════════════════════════════════════════════════ */

/* Geen eigen achtergrondkleur meer: deze pagina's stonden op een vlakke
   haverkleur terwijl de site een levend veld heeft. Daardoor las een
   productpagina als een andere website. Nu draait ruimte.js hier
   hetzelfde veld als op de homepage; de bandenritmiek doet de rest.
   .land-body blijft alleen voor de bedankpagina's. */
/* min-height erbij: op de korte bedankpagina's stopte dit haververlaagje
   op de laatste tekstregel en keek je daaronder tegen het levende veld —
   een kaarsrechte snede over de volle breedte, halverwege het scherm.
   Nu loopt het vlak altijd minstens tot onderaan het venster door. */
.land-body { background: var(--haver); min-height: 100vh; }



.land {
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

.land__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
  padding: clamp(40px, 7vh, 80px) 0 clamp(70px, 10vh, 130px);
}
.land__titel {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 400; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  margin-bottom: 1.3rem;
}
.land__titel em { font-style: italic; }
.land__belofte {
  font-size: 1.04rem; line-height: 1.72; color: var(--inkt-dof);
  max-width: 44ch; margin-bottom: 1.8rem;
}

.land__plaatsen { margin: .2rem 0 1rem; font-size: 1.12rem; }

.land__punten { list-style: none; margin: 0 0 2rem; max-width: 46ch; }
.land__punten li {
  position: relative; padding-left: 26px; margin-bottom: .7rem;
  font-size: .95rem; line-height: 1.65;
}
.land__punten li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 60% 40% 55% 45%;
  background: var(--groen);
}

/* ── Een jaar of een half jaar, in de hero ──────────────────────
   Twee knoppen die zichtbaar maken dát er een keuze is, nog vóór je één
   bedrag gelezen hebt. Dat is het hele punt: het halfjaartraject stond
   eerst als bijzin onder de prijs, en zo leest het als een uitzondering
   in plaats van als een tweede weg. */
.pakket { margin-bottom: 1.6rem; }
.pakket__knoppen {
  display: inline-flex; gap: 3px; margin-bottom: 1.15rem;
  padding: 3px; border-radius: 999px;
  background: rgba(43,36,30,.06);
  border: 1px solid rgba(43,36,30,.09);
}
.pakket__knop {
  font-family: var(--grotesk); font-weight: 600; font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(43,36,30,.7); background: none; border: 0; cursor: pointer;
  padding: 9px 17px; border-radius: 999px;
  transition: color 150ms var(--ease-uit), background-color 150ms var(--ease-uit),
              box-shadow 150ms var(--ease-uit);
}
.pakket__knop:hover { color: var(--inkt); }
.pakket__knop.is-aan {
  color: #F7F2E8;
  background: linear-gradient(172deg, #43764C, #33603D);
  box-shadow: 0 6px 14px -8px rgba(24,40,26,.7);
}
.pakket__knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Zonder JavaScript staat `is-schakelbaar` er niet en blijven beide panelen
   staan — dan hoort er wel een kopje boven, anders lees je zes punten en
   twee bedragen zonder te weten wat bij wat hoort. */
.pakket:not(.is-schakelbaar) .pakket__knoppen { display: none; }
.pakket:not(.is-schakelbaar) .pakket__paneel + .pakket__paneel {
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(43,36,30,.12);
}
.pakket:not(.is-schakelbaar) #paneel-jaar::before { content: "Een jaar"; }
.pakket:not(.is-schakelbaar) #paneel-half::before { content: "Een half jaar"; }
.pakket:not(.is-schakelbaar) .pakket__paneel::before {
  display: block; margin-bottom: .6rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--groen-diep);
}

.pakket__paneel .land__punten { margin-bottom: 1.2rem; }
.pakket__paneel .land__prijs { margin-bottom: 0; }
.pakket__samen {
  margin: 1.1rem 0 0; max-width: 46ch;
  font-family: var(--type); font-size: .84rem; line-height: 1.62;
  color: rgba(43,36,30,.74);
}

.land__prijs { margin-bottom: 1.6rem; }
.land__prijs-bij { font-size: .84rem; color: var(--inkt-dof); margin-left: .5rem; }
.land__knop { display: inline-block; }
.land__gerust {
  font-size: .78rem; line-height: 1.6; color: var(--inkt-dof);
  margin-top: .9rem; max-width: 44ch;
}

.land__beeld { margin: 0; }
.land__beeld img { display: block; width: 100%; height: auto; }
.land__beeld.vorm { aspect-ratio: 4 / 5; --schuif-x: 5%; --schuif-y: -4%; }
.land__beeld.vorm img { height: 100%; object-fit: cover; }
/* het boek blijft rechthoekig en zweeft — een boek is geen blob */
.land__beeld.ding__foto--zweeft {
  position: relative; display: flex; justify-content: center;
  padding: 0 0 clamp(26px, 4vw, 44px);
}
.land__beeld.ding__foto--zweeft img {
  width: auto; max-width: min(100%, 320px); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(43,36,30,.16),
              0 10px 20px -10px rgba(43,36,30,.30),
              0 40px 60px -34px rgba(43,36,30,.55);
}
.land__beeld.ding__foto--zweeft::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: min(60%, 210px); height: 20px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(43,36,30,.26), transparent 70%);
  filter: blur(5px); z-index: -1;
}

/* ── het slot: het formulier ─────────────────────────────────── */

.land__slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
.land__aanhef { grid-column: 1 / -1; margin-bottom: 1.8rem; }
.land__slot-kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15;
  margin-bottom: .5rem;
}
.land__aanhef > .type { color: var(--inkt-dof); }

.land__form {
  display: grid; gap: 4px; align-content: start;
  background: linear-gradient(180deg, rgb(250 247 240 / .9), rgb(247 242 232 / .74));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 52px -34px rgba(34,31,26,.45);
  padding: clamp(24px, 3.5vw, 40px);
}
.land__label {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-dof);
  margin-top: 14px;
}
/* Waren scherpe kadertjes met 3px ronding — het enige op de hele site dat
   er zo uitzag. Nu hetzelfde glas als de rest: zacht, rond, en een groene
   rand die oplicht waar je typt. */
.land__veld {
  font-family: var(--type); font-size: .98rem; color: var(--inkt);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(34,31,26,.05);
  border-radius: 14px;
  padding: 13px 15px; width: 100%;
  transition: border-color 160ms var(--ease-uit), background-color 160ms var(--ease-uit);
}
.land__veld:focus {
  outline: none; border-color: var(--groen);
  background: rgba(255,255,255,.85);
}
.land__groot { resize: vertical; font-family: var(--type); border-radius: 18px; }
.land__vink {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; font-size: .9rem; color: var(--inkt);
}
.land__vink input { width: 17px; height: 17px; accent-color: var(--groen); }
.land__verstuur { margin-top: 22px; justify-self: start; }

.land__voordeel { align-self: start; margin-top: 14px; }

/* De agenda en de vrije momenten stonden hier, maar dit onderdeel staat
   intussen ook op de homepage en op de bedankpagina — en die laden land.css
   niet. Daar viel de agenda dus kaal uit elkaar: dagknoppen als losse
   woorden, uren als één blauwe linkketting. Verhuisd naar style.css, de
   laag die élke pagina laadt. */


.land__dank {
  max-width: 46ch; padding: clamp(70px, 12vh, 140px) 0;
}
.land__dank .land__titel { font-size: clamp(2rem, 4.4vw, 3rem); }
.dank__afspraak { margin: 0 0 1.6rem; }
.dank__verder {
  font-size: .95rem; line-height: 1.6; color: var(--inkt-dof);
}
.dank__verder a { color: var(--groen-diep); text-underline-offset: 3px; }

/* Hier stond een streep van één pixel over de volle breedte boven de
   voettekst. Dat is precies de harde horizontale snede die op deze site
   nergens mag staan (huisregel 1), en de randcontrole van
   bedankt-gesprek.html meldde hem ook als zodanig. De voettekst scheidt
   zich nu met lucht in plaats van met een lijn. */
.land__voet {
  padding: 40px clamp(20px, 5vw, 48px) 30px;
  font-size: .78rem; color: var(--inkt-dof);
  text-align: center;
}
.land__voet a { color: var(--inkt-dof); }

@media (max-width: 860px) {
  .land__hero, .land__slot { grid-template-columns: 1fr; }
  /* Het beeld mag boven staan, maar niet het hele eerste scherm opeten:
     de belofte, de prijs en de knop horen binnen één blik te liggen. */
  .land__beeld { order: -1; max-width: 420px; margin-inline: auto; }
  .land__beeld.ding__foto--zweeft img { max-width: min(58vw, 210px); }
  /* Bij het mentorship is de foto sfeer, geen product: daar leest de
     belofte eerst en komt Nele eronder. */
  .land__beeld.vorm { order: 0; aspect-ratio: 4 / 5; max-width: 340px; }
}

/* De kopbalk staat NIET meer hier: elke pagina gebruikt exact dezelfde
   .kop uit style.css. Twee verschillende balken lieten het menu
   verspringen zodra je van de site naar een productpagina klikte.
   Wat hier overblijft is alleen de ruimte die de vaste balk inneemt. */
.land { padding-top: clamp(96px, 12vh, 130px); }

/* ═══ De hero van het boek: één beeld ══════════════════════════
   Er stond een losse cover naast de tekst. Nu draagt één plaat het hele
   scherm — het boek op een bemoste steen, met licht dat door de bladeren
   valt — en staat de tekst in een glazen kader op de lege linkerkant.

   WAAROM EEN KADER EN GEEN SLUIER OVER HET BEELD. De linkerkant is niet
   egaal: er hangen donkere bladeren in de hoeken (tot rgb(95,89,31)).
   Tekst rechtstreeks op die plaat haalt 2,1:1 — onleesbaar. Een sluier
   die dát oplost moet zo dik dat het bos verdwijnt. Een kader lost het
   lokaal op: de tekst staat op crème, en het beeld blijft er rondom
   volledig zichtbaar. Dezelfde taal als de balk en de laden. */
.plaathero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: min(88vh, 760px);
  display: grid; align-items: center;
  padding: clamp(90px, 12vh, 130px) clamp(20px, 5vw, 48px) clamp(60px, 9vh, 100px);
  overflow: hidden;
}
.plaathero__plaat {
  position: absolute; inset: 0; z-index: 0;
  display: block;
}
.plaathero__film.is-zichtbaar { opacity: 1; }
.plaathero__plaat img.is-weg { opacity: 0; transition: opacity 700ms var(--ease-uit, ease); }
.plaathero__plaat img { transition: opacity 700ms var(--ease-uit, ease); }

/* DE ONDERRAND. De plaat hield hard op: gemeten 137/255 verschil op één
   pixelrij, dwars over de volle breedte. Dat is precies de rechte lijn
   die hier nergens mag staan.

   Geen geverfde golf eroverheen — die moet de kleur van de buur hebben,
   en de buur is hier een levend veld. Wél een masker dat het beeld zelf
   laat wegvallen, met dezelfde geëffende helling als de banden: een
   rechte alfa-helling heeft harde hoeken aan begin en eind, en juist die
   hoeken lees je als een streep. Bij een mistige plaat als deze leest
   het resultaat als mist die oplost, niet als een rand. */
.plaathero__plaat {
  --vloei-plaat: clamp(90px, 13vh, 190px);
  -webkit-mask-image: linear-gradient(to bottom,
      #000 calc(100% - var(--vloei-plaat)),
      rgba(0,0,0,.947) calc(100% - var(--vloei-plaat) * .86),
      rgba(0,0,0,.79)  calc(100% - var(--vloei-plaat) * .68),
      rgba(0,0,0,.5)   calc(100% - var(--vloei-plaat) * .5),
      rgba(0,0,0,.24)  calc(100% - var(--vloei-plaat) * .32),
      rgba(0,0,0,.055) calc(100% - var(--vloei-plaat) * .14),
      rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      #000 calc(100% - var(--vloei-plaat)),
      rgba(0,0,0,.947) calc(100% - var(--vloei-plaat) * .86),
      rgba(0,0,0,.79)  calc(100% - var(--vloei-plaat) * .68),
      rgba(0,0,0,.5)   calc(100% - var(--vloei-plaat) * .5),
      rgba(0,0,0,.24)  calc(100% - var(--vloei-plaat) * .32),
      rgba(0,0,0,.055) calc(100% - var(--vloei-plaat) * .14),
      rgba(0,0,0,0) 100%);
}
/* de sectie zelf mag dan ook geen eigen rand meer trekken */
.plaathero { background: transparent; }

/* DE BOVENRAND. main.land heeft 130px kopruimte voor de zwevende balk.
   Daardoor begon de plaat 130px onder de bovenkant van de pagina, met
   crème erboven — en dus met een kaarsrechte lijn van 197/255 dwars over
   het scherm. De plaat hoort tegen de bovenrand te staan; de balk zweeft
   er toch overheen. De kopruimte zit nu ín de sectie, als padding. */
main.land > .plaathero:first-child { margin-top: calc(-1 * var(--kopruimte, 130px)); }
main.land { --kopruimte: clamp(110px, 14vh, 150px); padding-top: var(--kopruimte); }

.plaathero__plaat img {
  width: 100%; height: 100%; display: block;
  /* het boek staat rechts in de plaat: bij een smaller scherm mag de
     linkerkant wegvallen, het boek nooit */
  object-fit: cover; object-position: 72% 50%;
}
.plaathero__woord {
  position: relative; z-index: 1;
  width: min(100%, 545px);
  justify-self: start;
  /* Verder naar links dan de tekstkolom van de rest van de site. Dat is
     hier met opzet: het beeld wordt geanimeerd, en hoe meer bos er
     rechts van het kader overblijft, hoe meer er te zien is als het gaat
     leven. De ondergrens houdt hem van de schermrand af. */
  margin-left: max(clamp(16px, 3vw, 40px), calc(50vw - 660px));
  background: linear-gradient(180deg, rgb(250 247 240 / .95), rgb(247 242 232 / .91));
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
          backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 40px 80px -40px rgba(34,31,26,.55);
  padding: clamp(30px, 4vw, 46px);
}
/* binnen het kader is de kop iets rustiger: hij staat op 545px in plaats
   van op een halve pagina, dus dezelfde clamp zou hem laten uitbreken */
.plaathero__woord .land__titel { font-size: clamp(2rem, 3.6vw, 3rem); }
.plaathero__woord .land__belofte { max-width: 40ch; }
.plaathero__woord .land__punten { max-width: 40ch; }

/* De EDG-hero heeft meer in het kader staan dan de boekpagina — een logo,
   een kop, een zin, twee knoppen en een feitenregel — dus hij mag breder. */
.edg-plaathero .plaathero__woord { width: min(100%, 600px); }
.edg-plaathero .edg-logo--groot { max-width: 260px; height: auto; margin: 6px 0 14px; }
.edg-plaathero .hero__kop { margin-top: 0; }
.edg-plaathero .edg-hero__feiten { margin-bottom: 0; }

@media (max-width: 860px) {
  /* Op een telefoon is er geen lege linkerkant meer: dan gaat het beeld
     bovenaan staan en het kader eronder, zodat geen van beide het
     andere in de weg zit. */
  .plaathero {
    min-height: 0; padding: 0 0 clamp(40px, 7vh, 70px);
    align-items: stretch;
  }
  .plaathero__plaat {
    position: relative; inset: auto;
    height: min(52vh, 340px);
  }
  .plaathero__plaat img, .plaathero__film { object-position: 66% 50%; }
  /* `.edg-plaathero .plaathero__woord` staat hierboven met een eigen
     breedte (min(100%, 600px)) en wint het op specificiteit van een kale
     `.plaathero__woord`. Op een telefoon gaf dat 100% breed PLUS de marges:
     het kader stak rechts uit het scherm (Tobias, 18-09: "staat kader niet
     gecentreerd"). Daarom hier dezelfde selector erbij, en uitrekken in
     plaats van links aanleunen. */
  .plaathero__woord,
  .edg-plaathero .plaathero__woord {
    width: auto; justify-self: stretch;
    margin: -34px clamp(14px, 4vw, 26px) 0;
    border-radius: 24px;
  }
}

/* ═══ Mentorship: de laag tussen belofte en formulier ══════════
   De pagina was hero → stilte → formulier. Dat draagt geen bedrag van
   8.880 euro: er zat niets tussen "dit bestaat" en "vul je gegevens in".
   Deze vier secties doen elk één ding — herkennen, het mechanisme
   uitleggen, afbakenen, en de prijs eerlijk noemen. */

/* De css van de oude vijf-zinnen-sectie is hier weg: die sectie is
   vervangen door het gewicht (zie onderaan dit bestand). */

/* ── waarom paarden ── */
.mentor-waarom {
  display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
  padding: clamp(60px, 9vh, 110px) 0;
}
.mentor-waarom__beeld { margin: 0; }
.mentor-waarom__beeld img { display: block; width: 100%; height: auto; }
.mentor-waarom__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.14;
  margin: .8rem 0 1.1rem;
}
.mentor-waarom__woord .type { margin-bottom: 1rem; max-width: 46ch; }
/* "Dit is geen verplicht onderdeel" moet je zien staan zonder te lezen.
   Een kadertje zou hier misstaan (huisregel 2: geen gekleurd vlak midden in
   een reeks, dat leest als waarschuwing), dus doet een dikkere groene streep
   het werk — dezelfde vorm als de regel eronder, maar zwaarder. */
.mentor-waarom__keuze {
  border-left: 3px solid var(--groen); padding-left: 16px;
  margin-top: clamp(18px, 2.6vh, 26px);
}
.mentor-waarom__keuze strong { color: var(--groen-diep); }
.mentor-waarom__klein {
  font-size: .92rem !important; color: rgba(43, 36, 30, .78);
  border-left: 2px solid rgba(58, 107, 68, .3); padding-left: 14px;
}

/* De css van "voor wie wel / voor wie niet" en van de losse prijskaart is
   hier weg: allebei zijn ze opgegaan in de weging (zie onderaan). */

@media (max-width: 860px) {
  .mentor-waarom { grid-template-columns: 1fr; }
  .mentor-waarom__beeld { max-width: 380px; }
}


/* ═══ Het gewicht ══════════════════════════════════════════════
   Stenen met haar zinnen erop, die je kan wegleggen. Overgenomen uit het
   Anima Nexus-proefstuk, maar in het licht gezet: daar waren het donkere
   platen op zwart, hier tuinstenen op haver.

   Het doek is bewust hoog (min 62vh): een steen die je wegsmijt moet
   ergens heen kunnen, anders vliegt hij meteen het kader uit en voelt
   het als een truc in plaats van als iets dat je zelf doet. */
/* HET VELD MAG HIER NIET DOORSCHIJNEN. De sectie had geen eigen
   achtergrond, dus je keek dwars door de stenen heen op de levende
   groene wassen van js/ruimte.js. Dat maakte het geheel lichtgroen en
   dat hoort hier niet: de stenen zijn beige, de grond onder ze hoort
   beige te zijn.

   De haver komt er dus als vlak overheen. DIT VLAK MOET AAN BEIDE KANTEN
   WEGVALLEN. Het viel eerst alleen bovenaan uit en hield onderaan hard op
   — dat mocht, want daar lag toen nog een golfstrook overheen. Die strook
   is weg, en toen stond er dus een kaarsrechte streep dwars over de volle
   breedte: erboven dekkend haver, eronder het levende veld. Precies de
   fout waar deze site niet tegen kan.

   Het vlak loopt daarom een veer voorbij de sectie door (top/bottom
   negatief), zodat de vervaging in lege ruimte gebeurt en niet over de
   tekst. */
.gewicht {
  padding: clamp(50px, 8vh, 90px) 0 clamp(30px, 5vh, 60px);
  position: relative;
  --veer: clamp(110px, 14vh, 190px);
}
.gewicht::before {
  content: ""; position: absolute; z-index: -1;
  top: calc(-1 * var(--veer) * .5); bottom: calc(-1 * var(--veer) * .8);
  left: calc(50% - 50vw); width: 100vw;
  background: var(--haver, #EFE7DA);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.055) calc(var(--veer) * 0.14),
      rgba(0,0,0,0.24) calc(var(--veer) * 0.32),
      rgba(0,0,0,0.5) calc(var(--veer) * 0.5),
      rgba(0,0,0,0.79) calc(var(--veer) * 0.68),
      rgba(0,0,0,0.947) calc(var(--veer) * 0.86),
      rgba(0,0,0,1) calc(var(--veer) * 1),
      rgba(0,0,0,1) calc(100% - var(--veer) * 1),
      rgba(0,0,0,0.947) calc(100% - var(--veer) * 0.86),
      rgba(0,0,0,0.79) calc(100% - var(--veer) * 0.68),
      rgba(0,0,0,0.5) calc(100% - var(--veer) * 0.5),
      rgba(0,0,0,0.24) calc(100% - var(--veer) * 0.32),
      rgba(0,0,0,0.055) calc(100% - var(--veer) * 0.14),
      rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.055) calc(var(--veer) * 0.14),
      rgba(0,0,0,0.24) calc(var(--veer) * 0.32),
      rgba(0,0,0,0.5) calc(var(--veer) * 0.5),
      rgba(0,0,0,0.79) calc(var(--veer) * 0.68),
      rgba(0,0,0,0.947) calc(var(--veer) * 0.86),
      rgba(0,0,0,1) calc(var(--veer) * 1),
      rgba(0,0,0,1) calc(100% - var(--veer) * 1),
      rgba(0,0,0,0.947) calc(100% - var(--veer) * 0.86),
      rgba(0,0,0,0.79) calc(100% - var(--veer) * 0.68),
      rgba(0,0,0,0.5) calc(100% - var(--veer) * 0.5),
      rgba(0,0,0,0.24) calc(100% - var(--veer) * 0.32),
      rgba(0,0,0,0.055) calc(100% - var(--veer) * 0.14),
      rgba(0,0,0,0) 100%);
}
.gewicht__kop { max-width: 48ch; }
.gewicht__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.12;
  margin: .8rem 0 0;
}
.gewicht__lead {
  color: rgba(43, 36, 30, .82); margin-top: 1rem; line-height: 1.72;
  max-width: 46ch;
}

.gewicht__doek {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(340px, 52vh, 520px);
  margin-top: clamp(10px, 2vh, 24px);
}
#gewichtDoek {
  display: block; width: 100%; height: 100%;
  /* pan-y: verticaal scrollen blijft werken op een telefoon; alleen een
     treffer op een steen onderschept de aanraking (zie js/gewicht.js) */
  touch-action: pan-y;
  cursor: grab;
}
#gewichtDoek.grijpt { cursor: grabbing; }

.gewicht__teller {
  position: absolute; left: clamp(20px, 6vw, 64px); top: 4px;
  margin: 0; display: flex; align-items: baseline; gap: 9px;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(43,36,30,.55);
}
.gewicht__teller span:first-child {
  font-family: var(--serif); font-size: 2rem; letter-spacing: -.02em;
  color: var(--groen); text-transform: none;
}
/* de aanwijzing verdwijnt zodra iemand het door heeft — een hint die
   blijft staan nadat je hem opvolgde, leest als een verwijt */
.gewicht__hint {
  position: absolute; right: clamp(20px, 6vw, 64px); bottom: 14px; margin: 0;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: rgba(43, 36, 30, .45);
  transition: opacity 500ms var(--ease-uit, ease);
}
.gewicht.is-aangeraakt .gewicht__hint { opacity: 0; }

.gewicht__klaar {
  /* Ligt IN het doek, over de plek waar de stapel stond. Absoluut, dus het
     houdt geen lege ruimte bezet zolang er nog stenen liggen — dat was
     tweehonderd pixels niets, midden op de pagina. */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(46ch, 86%); text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 700ms var(--ease-uit), transform 700ms var(--ease-uit);
  pointer-events: none;
}
.gewicht__klaar.is-op { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto; }
.gewicht__klaar .type:first-child {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--groen); margin-bottom: .6rem;
}
.gewicht__klein { font-size: .95rem !important; color: rgba(43,36,30,.8); margin-bottom: 1.4rem; }

@media (max-width: 1100px) {
  /* Onder deze breedte is er geen ruimte meer naast de tekst en zou de
     boom over de zinnen vallen. Dan liever niets. */
  .jaar__eik { display: none; }
}

@media (max-width: 700px) {
  /* 54vh was 456px op een iPhone, en de stenen liggen onderaan: 300px
     lucht boven de stapel. 40vh laat nog ruimte om een steen omhoog te
     slepen; de camera schaalt mee (zie maat() in gewicht.js). */
  .gewicht__doek { height: clamp(290px, 40vh, 460px); }
  .gewicht__teller span:first-child { font-size: 1.6rem; }
  .gewicht__hint { font-size: .9rem; }
}

/* ═══ Hoe een jaar eruitziet ═══════════════════════════════════
   Dit ontbrak, en het was het grootste gat op de pagina. Wie 8.880 euro
   overweegt belt niet omdat het te duur is, maar omdat het te vaag is.
   Zes momenten, in de volgorde waarin ze komen. */
/* Huisregel 8: de golf van de band erna hangt over de laatste stap. Hier
   stond 26–44px ruimte, terwijl de golf 93px (telefoon) tot 99px (desktop)
   hoog is. Gemeten: op 1440 lag de onderkant van "je hebt me niet meer
   nodig" 63px ónder de golfrand, op 390 verdween "een manier van kijken
   die van jou is geworden" half onder het groen. De ruimte volgt nu de
   golf zelf — de volle hoogte, want .78 (de vuistregel uit CLAUDE.md)
   gaat uit van een golf die laag is aan de tekstkant, en deze golf piekt
   precies boven de laatste regel: gemeten bleef er met .85 nog −14 over. */
.jaar { padding: clamp(44px, 6vh, 76px) 0 calc(var(--golf) * 1.06); }
.jaar__kop { max-width: 48ch; margin-bottom: clamp(22px, 3.5vh, 38px); }
.jaar__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.12; margin: .8rem 0 0;
}
.jaar__lead { color: rgba(43,36,30,.82); margin-top: 1rem; line-height: 1.72; max-width: 46ch; }

/* ── de eik naast de lijst ────────────────────────────────────
   Hij stond eerst als kolom naast de tijdlijn, sticky, en was daardoor
   een plaatje van driehonderd pixels. Te klein: dan draagt hij niets.

   Nu is hij precies zo hoog als de lijst zelf — hij begint bij "Eerst" en
   eindigt bij "Je hebt me niet meer nodig". Dat is de hele bedoeling van
   deze sectie in één beeld: één boom over twaalf maanden, met wortels.

   Hij is daarom ABSOLUUT geplaatst en niet meer sticky: top 0 tot bottom 0
   van de lijst, en de hoogte stuurt de breedte (width:auto). Hij mag naar
   de rechter SCHERMrand uitbreken — binnen de tekstkolom zou hij op die
   hoogte nooit passen. De kruin is open genoeg om de laatste woorden van
   een regel niet te storen; de tekst zelf is 52 tekens breed en blijft
   ruim links van de stam. */
.jaar__blad { position: relative; }

.jaar__eik {
  position: absolute;
  top: 0; bottom: 0;
  /* uit de tekstkolom naar de schermrand, met een marge zodat hij niet
     tegen het glas plakt */
  right: calc(50% - 50vw + clamp(10px, 2.5vw, 54px));
  margin: 0; width: auto;
  pointer-events: none;
}
.jaar__eik img {
  display: block;
  height: 100%; width: auto;
  /* de plaat mag nooit uitrekken: hij past zich aan de hoogte aan en de
     breedte volgt uit zijn eigen verhouding */
  object-fit: contain; object-position: bottom right;
  opacity: .92;
}

.jaar__lijst {
  list-style: none; margin: 0; padding: 0; max-width: 62ch;
  position: relative;
}
/* DE LIJN VAN EEN JAAR. Hij was één egale groene haarlijn — correct en
   volstrekt kleurloos. Nu loopt hij van bosgroen naar goud: je ziet aan
   de kleur dat er iets verschuift tussen het eerste gesprek en het eind.
   De lijn wordt met een masker onthuld terwijl je scrolt, van boven naar
   beneden, zodat het jaar zich onder je ogen aftekent. */
.jaar__lijst::before {
  content: ""; position: absolute; left: 0; top: .5em; bottom: 2.2em;
  width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom,
    #3A6B44 0%, #5C8A4E 34%, #93A85A 62%, #D6A83F 100%);
  transform-origin: top;
  transform: scaleY(var(--jaar-groei, 0));
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.rust .jaar__lijst::before { transform: none; }

.jaar__stap {
  position: relative; padding: 0 0 clamp(20px, 3vh, 30px) clamp(28px, 3.6vw, 42px);
  /* elk moment komt naar boven zodra hij in beeld schuift */
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--ease-uit, ease), transform 700ms var(--ease-uit, ease);
}
.jaar__stap.is-op { opacity: 1; transform: none; }
.rust .jaar__stap { opacity: 1; transform: none; }
.jaar__stap:last-child { padding-bottom: 0; }
/* het blaadje op de lijn kleurt mee met waar je in het jaar zit */
.jaar__stap::before {
  content: ""; position: absolute; left: -5px; top: .38em;
  width: 12px; height: 12px; border-radius: 60% 0 60% 0;
  background: var(--stip, #3A6B44);
  box-shadow: 0 0 0 6px var(--haver, #EFE7DA);
  transform: scale(.4); opacity: 0;
  transition: transform 600ms cubic-bezier(.34,1.56,.64,1) 120ms, opacity 400ms ease 120ms;
}
.jaar__stap.is-op::before { transform: scale(1); opacity: 1; }
.rust .jaar__stap::before { transform: none; opacity: 1; }
.jaar__stap:nth-child(1) { --stip: #3A6B44; }
.jaar__stap:nth-child(2) { --stip: #4C7C48; }
.jaar__stap:nth-child(3) { --stip: #6E9150; }
.jaar__stap:nth-child(4) { --stip: #93A85A; }
.jaar__stap:nth-child(5) { --stip: #BFA24C; }
.jaar__stap--slot::before { background: #D6A83F; }
/* "Rond maand vijf" stond in een okerkleurig kadertje om op te vallen.
   Dat deed het ook — als het enige gekleurde vlak in de hele lijst leek
   het een waarschuwing of een uitgelicht aanbod, en het zette een kader
   midden in een reeks die juist doorloopt. De zin is sterk genoeg zonder.
   Het blaadje op de lijn kleurt daar al mee. */
.jaar__wanneer {
  display: block; margin-bottom: .35rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--groen);
}
.jaar__stap h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.25; margin: 0 0 .5rem;
}
.jaar__stap p {
  font-family: var(--type); font-size: .97rem; line-height: 1.75;
  color: rgba(43,36,30,.8); margin: 0; max-width: 52ch;
}


/* ═══ Een jaar, of een half jaar ═══════════════════════════════
   Hier stond de "rekening die niemand maakt": twee kolommen met een bedrag.
   De prijs is van de site af, dus de sectie is nu alleen nog de keuze
   tussen een jaar en een half jaar, met de tabel eronder. */
.keuzevlak { padding: clamp(32px, 4.5vh, 56px) 0 clamp(40px, 6vh, 68px); }
.keuzevlak__kop { max-width: 52ch; margin-bottom: clamp(18px, 3vh, 30px); }
.keuzevlak__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; margin: 0 0 .7rem;
  color: var(--inkt);
}
.keuzevlak__lead {
  margin: 0; max-width: 58ch;
  font-family: var(--type); font-size: 1rem; line-height: 1.66;
  color: rgba(43,36,30,.8);
}
.keuzevlak__handeling { margin-top: clamp(26px, 4vh, 42px); text-align: center; }
.keuzevlak__gerust {
  margin: 1rem auto 0; max-width: 44ch;
  font-family: var(--type); font-size: .9rem; line-height: 1.6;
  color: rgba(43,36,30,.68);
}

/* ── de tabel ───────────────────────────────────────────────────
   Een tabel, geen twee kaarten met elk zes bolletjes: twee kaarten naast
   elkaar dwingen je heen en weer te lezen om te vinden wat er verschilt.
   De tabel toont alleen waar de twee uit elkaar lopen. Rustig, plat,
   zonder eigen kleurvlak. */
.keuze { margin-top: 0; }
/* Drie kolommen passen op een telefoon, maar krap. Blijft er toch iets
   over de rand vallen, dan schuift de tabel in zijn eigen doosje in
   plaats van de hele pagina zijwaarts te duwen. */
.keuze__rol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Zonder maximum liep de tabel over de volle 984px en stond er een halve
   pagina leegte tussen "Om de veertien dagen online" en "1,5 uur". Je oog
   moet dan te ver reizen om twee getallen te vergelijken, en juist dat
   vergelijken is waar deze tabel voor bestaat. */
.keuze__tabel {
  width: 100%; max-width: 720px; border-collapse: collapse;
  font-family: var(--type); font-size: .95rem;
}
.keuze__tabel th,
.keuze__tabel td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid rgba(43,36,30,.12);
  vertical-align: top;
}
.keuze__tabel thead th {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .15em; text-transform: uppercase;
  /* .55 gaf 3,24:1 en kleine kapitalen van 10px hebben 4,5 nodig. Die
     waarde was overgenomen van een buur die zelf al te laag zat —
     overgenomen zonder te meten is precies hoe zo'n fout zich verspreidt. */
  color: rgba(43,36,30,.76); padding-bottom: 9px;
  border-bottom-color: rgba(43,36,30,.2);
}
.keuze__tabel tbody th {
  font-weight: 500; color: rgba(43,36,30,.84);
  line-height: 1.5; padding-left: 0;
}
.keuze__tabel td { color: rgba(43,36,30,.9); }
/* De jaarkolom is de kolom waar de pagina over gaat; een streepje kleur
   houdt hem bij elkaar zonder dat er een kaart omheen hoeft. */
.keuze__tabel th:nth-child(2),
.keuze__tabel td:nth-child(2) { background: rgba(58,107,68,.055); }
/* --groen (#3A6B44) haalt op dit zand 4,22:1. Dezelfde diepere tint als
   de bedragen eronder haalt het wél. */
.keuze__tabel thead th:nth-child(2) { color: #2C5334; }
.keuze__eerlijk {
  margin: 1rem 0 0; max-width: 62ch;
  font-family: var(--type); font-size: .95rem; line-height: 1.66;
  color: rgba(43,36,30,.8);
  border-left: 2px solid rgba(58,107,68,.42); padding-left: 16px;
}
@media (max-width: 560px) {
  .keuze__tabel { font-size: .88rem; }
  .keuze__tabel th, .keuze__tabel td { padding: 10px 9px; }
  .keuze__tabel tbody th { padding-left: 0; }
}


/* de paardensectie staat nu lager op de pagina en mag daar wat lucht */
.mentor-waarom { padding-block: clamp(34px, 5vh, 64px); }

/* ═══ De randen tussen secties ═════════════════════════════════
   Er stond hier een golfstrook tussen elke twee secties (js/golven.js).
   Die is eruit: op schermbreedte was de golf zo flauw dat hij als een
   rechte streep las, en een gekleurde vorm tegen een andere kleur blíjft
   een snede — hoe je hem ook buigt. De banden hieronder vervloeien nu
   zelf, dus er is geen rand meer om te tekenen. */

/* De vlakken waar die randen bij horen. Ze breken uit de tekstkolom naar
   de volle breedte en houden hun eigen binnenmarge, precies zoals de
   banden op de homepage. */
.bandje {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px);
}
/* 984 en niet 1080: de tekstkolom van .land is 1080 BREED MINUS zijn eigen
   binnenmarge, dus 984. Stond dit op 1080, dan begon elke gekleurde sectie
   48px verder naar links dan de secties ertussen — met vijf banden onder
   elkaar loopt de linkerkantlijn dan zichtbaar te rafelen. */
.bandje > * { max-width: 984px; margin-inline: auto; }
/* ── de randen van een bandje: een golf, of een uitvloei ──────
   Deze pagina's hebben hun eigen bandensysteem (.bandje), maar dezelfde
   afspraak als de homepage: aan de ene kant een golf, aan de andere een
   uitvloei, en nergens een snede.

   De golf staat op een EIGEN LAAG bóven de band (::before, top: -golf) met
   exact dezelfde kleur als de band eronder — dan is de naad tussen die twee
   per definitie onzichtbaar en vervaagt alleen de golf zelf. Dat vervagen
   zit in het masker: een feGaussianBlur die alleen verticaal werkt, dus de
   golfvorm blijft scherp maar zijn rand lost op over tientallen pixels. */
.bandje {
  /* 220px golf betekent 220px verplichte leegte bij de buur erboven, anders
     valt de golf over diens laatste tekstregels. Bij ~100px is de vorm nog
     altijd onmiskenbaar een golf (amplitude ~26px over de volle breedte) en
     kost hij minder dan de helft. */
  --golf: clamp(88px, 11vh, 140px);
  --veer: clamp(60px, 8vh, 110px);
  position: relative;
  background: var(--bandkleur);
}
.bandje::before, .bandje::after {
  content: ""; position: absolute; left: 0; right: 0;
  z-index: 0; pointer-events: none;
  background: var(--bandkleur);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bandje::before { top: calc(-1 * var(--golf) + 1px); height: var(--golf); }
.bandje::after  { bottom: calc(-1 * var(--veer) + 1px); height: var(--veer);
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.947) 14%,
      rgba(0,0,0,0.79) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.24) 68%,
      rgba(0,0,0,0.055) 86%,
      rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.947) 14%,
      rgba(0,0,0,0.79) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.24) 68%,
      rgba(0,0,0,0.055) 86%,
      rgba(0,0,0,0) 100%); }
.bandje > * { position: relative; z-index: 1; }

/* Wie komt op met een golf en wie vloeit in — afwisseling, geen trucje
   dat zich herhaalt. */
.bandje--room::before  { -webkit-mask-image: url("assets/golf/zacht-b-boven.svg"); mask-image: url("assets/golf/zacht-b-boven.svg"); }
.bandje--salie::before { -webkit-mask-image: url("assets/golf/zacht-c-boven.svg"); mask-image: url("assets/golf/zacht-c-boven.svg"); }
.bandje--mos::before, .bandje--zand::before {
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.055) 14%,
      rgba(0,0,0,0.24) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.79) 68%,
      rgba(0,0,0,0.947) 86%,
      rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.055) 14%,
      rgba(0,0,0,0.24) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.79) 68%,
      rgba(0,0,0,0.947) 86%,
      rgba(0,0,0,1) 100%);
}

.bandje--room  { --bandkleur: var(--room, #F7F2E8); }
.bandje--zand  { --bandkleur: var(--haver-diep, #E5DACA); }
/* De twee groene trappen: room en zand liggen zó dicht bij haver dat je de
   overgang alleen ziet als je ernaar zoekt. Deze registreren wél, zonder
   gekleurd vlak te worden — de tuin in de schaduw. */
.bandje--salie { --bandkleur: var(--salie, #E6EBDD); }
.bandje--mos   { --bandkleur: var(--mos, #D2DBC3); }


/* ═══ Elke Dag Gelukkig — kleur en objecten ════════════════════
   De pagina was correct maar sober: na de hero liep alles in dezelfde
   beige door, met witte kaarten erop en verder niets. Kleur alléén lost
   dat niet op — een pagina heeft ook dingen nodig die er staan.

   Alle drie de objecten zijn echte platen die al op deze site leven; er
   is niets nieuws voor gegenereerd. Ze staan alle drie ACHTER of NAAST
   de inhoud, nooit onder lopende tekst. */

.edg-herken, .edg-poorten, .edg-slot { position: relative; }

/* de laurierstengel boven de zeventien poorten */
.edg-tak {
  position: absolute; z-index: 2; pointer-events: none;
  /* vanaf de rechter SCHERMrand, niet vanaf de tekstkolom: zo staat hij
     er bij élke breedte volledig op in plaats van half afgesneden */
  right: calc(50% - 50vw); top: -6%;
  width: min(27vw, 380px); height: auto;
  opacity: .9;
  filter: drop-shadow(-10px 16px 18px rgba(34, 31, 26, .14));
  transform-origin: 92% 40%;
  animation: tak-wieg 16s ease-in-out infinite;
}
.rust .edg-tak { animation: none; }
.edg-poorten > *:not(.edg-tak) { position: relative; z-index: 1; }

/* De zwevende blaadjes zijn eruit. Ze dreven door de sectie heen en
   werden aan de rand van hun eigen kader afgesneden — een half blad leest
   als een fout, niet als een detail. Een object dat beweegt binnen een
   begrensd vlak is per definitie ooit half zichtbaar; dan liever niets. */

/* de klaver bij de laatste handeling — half uit beeld, groot */
.edg-klaver {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% - 50vw - 6vw); bottom: -18%;
  width: min(34vw, 460px); height: auto;
  opacity: .16;
  filter: saturate(.6) brightness(1.6);
}
.edg-slot > *:not(.edg-klaver) { position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* Hoger opgehangen dan op desktop. Hij staat met z-index 2 vóór de tekst
     ("de bladpunten vallen over de kaartrand, nooit over de tekst"), maar
     op een telefoon begint de alinea meteen onder de titel en vielen de
     bladeren over "vindt geluk op een andere manier". Vanaf -11% hangt hij
     over de rand van de band erboven, waar een tak hoort. */
  .edg-tak { width: min(44vw, 220px); top: -11%; }
  .edg-klaver { width: 62vw; bottom: -10%; opacity: .12; }
}


/* ── de secties op EDG staan verder uit elkaar ────────────────
   "Alles is gewoon een doorlopende pagina." Kleur alleen lost dat niet op:
   twee secties met evenveel lucht ertussen als binnenin lezen als één
   sectie, wat je er ook onder legt. Een band die een eigen tint heeft mag
   daarom ook meer ademen dan een blad dat gewoon doorloopt. */
.band--sectie { padding-block: clamp(46px, 7vh, 92px); }
.band--room + .band--salie,
.band--salie + .band--mos,
.band--mos + .band--room { margin-top: clamp(10px, 2vh, 28px); }


/* ── de vragen op de mentorpagina ─────────────────────────────
   Wie twijfelt over 8.880 euro leest niet van boven naar beneden; die
   zoekt zijn eigen bezwaar. Daarom staan de antwoorden hier ook los, vlak
   vóór de rekening — en daarom mag het schema ze pas claimen als ze hier
   echt staan. */
.vragenblad { padding: clamp(36px, 5vh, 64px) 0 0; }
.vragenblad__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.14;
  margin: .8rem 0 clamp(24px, 4vh, 40px);
}

/* De vragenlijst is smaller dan de kolom, en `.bandje > *` zet op elk direct
   kind `margin-inline: auto`. Daardoor stond de lijst gecentreerd onder een
   kop die links begint — scheef. Hier hoort hij gewoon links uit te lijnen. */
.vragenblad .vragen { margin-inline: 0; max-width: 64ch; }

/* ── de stappen van het jaar staan stil ──────────────────────
   Ze kwamen één voor één omhoog geschoven bij het scrollen (opacity 0 +
   translateY 14px). Dat leest niet als elegantie maar als blokken die uit
   zichzelf verschuiven — en het is bovendien lopende tekst, en daar hoort
   geen scroll-reveal op. Ze staan er nu gewoon. */
.jaar__stap { opacity: 1; transform: none; transition: none; }
.jaar__stap::before { transform: none; opacity: 1; transition: none; }

/* ── het bedrag in de hero ────────────────────────────────────
   Het stond op tweeënzeventig procent van de pagina en de hero zei alleen
   dat het "later besproken" werd — terwijl het er verderop gewoon staat.
   Dat leest als ontwijken. Hier staat het, groot genoeg om niet te missen
   en klein genoeg om de belofte niet te overstemmen. */
.land__prijs {
  margin: clamp(20px, 3vh, 30px) 0 clamp(18px, 2.5vh, 26px);
  font-family: var(--type); font-size: 1.02rem; color: var(--inkt);
  line-height: 1.5;
}
.land__prijs strong {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.02em;
  color: var(--groen-diep); margin-right: .35em;
  vertical-align: -.04em;
}
.land__prijs span {
  display: block; margin-top: .3rem;
  font-size: .88rem; color: rgba(43, 36, 30, .66);
}

/* ── het formulier in twee kolommen ──────────────────────────
   Vier velden onder elkaar is vier labels plus vier regels plus vier
   tussenruimtes — samen zo hoog als een halve sectie, voor vragen die
   nauwelijks iets vragen. Naam en mailadres staan nu naast elkaar. */
.land__rij {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
}
.land__vak { display: grid; gap: 4px; align-content: start; }
.land__optie {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--inkt-fluister); margin-left: .4em;
}
@media (max-width: 560px) {
  /* Op een telefoon is twee kolommen naast elkaar te smal om in te typen. */
  .land__rij { grid-template-columns: 1fr; }
}

/* ── het bijschrift onder de herofoto ─────────────────────────
   Eén regel die de "ik" van deze pagina een naam geeft. Hij hangt onder de
   foto en niet erover: tekst op een foto kost altijd contrast, en dit moet
   in één oogopslag leesbaar zijn. */
.land__bijschrift {
  /* Zit in .land__beeldblok, dus niet meer als los rasteritem in kolom 2 —
     dan kwam het in een eigen rij en hing het tot 250px onder de foto. */
  margin: .7rem 0 0; text-align: center;
  font-family: var(--type); font-size: .82rem; line-height: 1.45;
  color: var(--inkt-dof); text-wrap: balance;
}
.land__bijschrift strong { font-weight: 600; color: var(--inkt); }

/* ── wie je tegenover je hebt ─────────────────────────────────
   Twee tekstkolommen en geen beeld. Een klassieke beeld-naast-tekst-sectie
   kost hier ruim zeshonderd pixels; dit kost er tweehonderd, en de foto van
   Nele staat al in de hero. */
.wie { padding: clamp(28px, 4vh, 48px) 0 0; }
.wie__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(1.5rem, 2.9vw, 2.1rem); line-height: 1.16;
  margin: .6rem 0 clamp(14px, 2.2vh, 22px); max-width: 30ch;
}
.wie__kolommen {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3.5vw, 48px);
}
.wie__kolommen .type { margin: 0; max-width: 46ch; }
.wie__kolommen a { color: var(--groen-diep); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .wie__kolommen { grid-template-columns: 1fr; gap: 14px; }
}

/* ── de gegolfde scheidingslijn ───────────────────────────────
   Tussen twee secties die dezelfde beige grond delen kan geen kleurvlak
   scheiden — daar zou je een kleur moeten verzinnen die er niet hoort. Wat
   wél scheidt is een getekende lijn: één golvend pad over de volle breedte,
   in het groen van de site op lage dekking. Dezelfde hand als de Levenslijn
   op de homepage.

   Geen snede: het is een dunne, gebogen lijn met lucht eromheen, geen rand
   tussen twee vlakken. */
.scheiding {
  width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(30px, 4vw, 52px);
  margin-block: clamp(6px, 1.5vh, 16px);
  background: url("assets/golf/scheiding.svg") center/100% 100% no-repeat;
  pointer-events: none;
}

/* ── één sectie helemaal in het groen ─────────────────────────
   Het rustpunt halverwege. Diepgroen met crème tekst, precies zoals de
   contactband op de homepage — dezelfde kleur, dezelfde omkering van de
   knop. Het is de sectie die het minst hoeft te verkopen en het grootste
   beeld heeft; de foto komt er sterker uit dan op beige. */
.bandje--diep { --bandkleur: var(--olijf-diep); color: rgba(247, 242, 232, .9); }
.bandje--diep h2, .bandje--diep h3 { color: var(--room); }
.bandje--diep .label { color: rgba(231, 201, 180, .95); }
.bandje--diep .label::after { border-color: rgba(247, 242, 232, .45); }
.bandje--diep .type { color: rgba(247, 242, 232, .88); }
/* Deze sectie staat op de diepgroene band, dus deze regel wint van die
   hierboven — en hier zat de fout: .7 haalde 4,12:1 en was dus al te laag
   voordat ik eraan kwam. Nooit gemeten toen ze geschreven werd. */
.bandje--diep .mentor-waarom__klein { color: rgba(247, 242, 232, .9); }
.bandje--diep .mentor-waarom__keuze { border-left-color: #C6D9BA; }
.bandje--diep .mentor-waarom__keuze strong { color: #E8F0E1; }
/* de sikkel achter de foto wordt zand, anders valt groen op groen weg */
.bandje--diep .vorm::before { background: var(--haver-diep); }
.bandje--diep::before { -webkit-mask-image: url("assets/golf/zacht-a-boven.svg"); mask-image: url("assets/golf/zacht-a-boven.svg"); }

/* ── ruimte voor de golf die van de volgende band overhangt ───
   Een band die met een golf opkomt hangt een paar honderd pixels boven zijn
   buur. Op desktop valt dat in lege ruimte; op een telefoon viel de golf van
   de jaarband over de laatste regels van de sectie erboven — halfdoorzichtig
   salie over lopende tekst, en dan is het onleesbaar. Wie vóór een band
   staat, reserveert die ruimte. */
/* De golf hangt over zijn buur heen; die buur moet dus onderaan minstens
   de golfhoogte vrijhouden, anders valt halfdoorzichtig salie over de
   laatste regels lopende tekst. Gemeten: bij .78 bleef er 35px overlap. */
/* De +34px is niet willekeurig. Met alleen .78 bleef er tien pixel tussen
   de laatste tekstregel en de bovenkant van de golf. Meetkundig is dat geen
   overlap, maar een golf heeft een zachte rand en halfdoorzichtige kleur:
   op tien pixel ligt hij zichtbaar tegen je regels aan. Nu is de speling
   ruim veertig pixel en staat er lucht tussen. */
.voor-band { padding-bottom: calc(var(--golf, 140px) * .78 + 34px); }

@media (max-width: 760px) {
  /* Een golf van 220px is op een scherm van 844px een kwart beeld. */
  .bandje { --golf: clamp(76px, 11vh, 120px); }
}

/* Foto en bijschrift als één rasteritem in de hero. */
.land__beeldblok { display: flex; flex-direction: column; }

/* Op de bladpagina's staan de banden in style.css (.band--*), niet in het
   .bandje-systeem. Dezelfde afspraak geldt: wie vóór een golf staat,
   reserveert de ruimte die de golf overhangt (huisregel 8).

   De regel zelf stond hier een tweede keer, woordelijk gelijk aan die
   hierboven. Twee keer dezelfde regel is ongevaarlijk tot je er één
   aanpast: dan draait de andere je correctie stil terug. */

/* De twee tabknoppen "Een jaar / Een half jaar" waren 30px hoog: net te
   laag voor een vinger. */
@media (max-width: 700px) {
  .pakket__knop { min-height: 42px; }
}

/* ── de link naar de gratis eerste poort (poort-1.html) ───────────
   In de pennenregel op de groene band en in de zin van de hero. Zelfde
   kleur als de tekst eromheen: het is geen knop, het is een zin waar je op
   kan klikken. De streep eronder zegt dat. */
.pen__link, .tekstlink {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.pen__link:hover, .tekstlink:hover { text-decoration-thickness: 2px; }
.pen__link { display: inline-block; padding-block: 10px; }   /* tikdoel op een telefoon */