/* ============================================================
   meet-olivia.com — huisstijl van Olivia.

   De opbouw volgt het Sierra-thema: donkere hero met een schuine baan, daarna
   lichte secties met kaarten. De kleuren en het lettertype zijn die van de
   gast-app, zodat de site en het product op elkaar lijken.

   Sierra is donkerblauw met paars. Dat is hier bewust niet overgenomen: het
   vecht met het warme groen en zand van Olivia, en dan zou de site niet meer
   op het product lijken dat hij verkoopt.
   ============================================================ */

:root {
  --groen: #3B4A37;
  --groen-diep: #22271F;
  --zand: #E4C58C;
  --zand-zacht: #F3EFE6;
  --papier: #FBFBF5;
  --inkt: #22271F;
  --zacht: #5A6149;
  --gedempt: #6C7359;
  /* Was #9AA391. Dat gaf op papierwit een contrast van 2,5 waar 4,5 nodig is,
     en juist de kleine regels die het bezwaar wegnemen ("geen app om te
     downloaden") stonden erin. Deze waarde haalt 4,8 en oogt nog steeds
     rustig. */
  --vaag: #6A7263;
  --goud: #9A8A5F;
  --lijn: rgba(34, 39, 31, 0.10);
  --kaart: #ffffff;

  --display: "Bricolage Grotesque", "Iowan Old Style", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;

  /* Deze drie zijn nagemeten in het origineel, niet geschat. Ze bepalen meer
     van de herkenbaarheid dan de kleuren doen:
       - hoeken zijn overal 10px; ronde pillen komen alleen voor bij labels
       - er is precies één schaduw, breed en heel licht, nooit gestapeld
       - de omhullende breedte is 1240px, ruimer dan ik eerst aanhield */
  --breed: 1240px;
  --radius: 10px;
  --schaduw: 0 20px 60px rgba(34, 39, 31, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.omhulsel { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }

/* Nagemeten in het origineel: 60px op 72px regelafstand, gewicht 600, en een
   lichte negatieve letterafstand. Gewicht 700 op grote koppen las als een
   reclamefolder; 600 is rustiger en scheelt meer dan je zou denken. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
/* De ondergrenzen waren voor een telefoon te groot: op 390px viel de h1 over
   drie regels terwijl er met de vaste regelafbreking twee bedoeld zijn.
   Nagemeten en daarop teruggebracht.

   `text-wrap: balance` verdeelt de woorden gelijk over de regels in plaats van
   er eentje alleen op de laatste regel te laten staan. Dat is wat een kop
   rommelig laat ogen. Browsers die het niet kennen negeren de regel. */
h1 { font-size: clamp(30px, 7.4vw, 60px); text-wrap: balance; }
h2 { font-size: clamp(24px, 5.4vw, 40px); text-wrap: balance; }
h3 { text-wrap: balance; }
h3 { font-size: 20px; }
p { margin: 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--goud); margin-bottom: 14px;
}
/* Het streepje-met-kapitalen is vervangen door een gevuld labeltje (.chip
   onderaan dit bestand). Deze regel blijft staan voor pagina's die .kicker nog
   gebruiken, maar zonder het streepje, want dat is het patroon dat overal
   opduikt op gegenereerde sites. */

/* ---- knoppen ---- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* 18/25 en 10px hoek, exact zoals in het origineel. De ronde pilknop die
     hier eerst stond is het duidelijkste kenmerk van een gegenereerde site. */
  padding: 18px 25px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--body); font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.knop:hover { transform: translateY(-1px); }
.knop-vol { background: var(--zand); color: var(--groen-diep); }
.knop-vol:hover { background: #efd5a4; }
.knop-rand { background: transparent; color: var(--groen); border-color: rgba(34, 39, 31, .22); }
.knop-rand:hover { border-color: var(--groen); }
.knop-groen { background: var(--groen); color: var(--papier); }
.knop-licht { background: var(--kaart); color: var(--groen); border-color: var(--lijn); }

/* ---- kop van de site ---- */
/* Eén kop, altijd licht. Twee varianten leverden een donkere balk op de
   homepage en een lichte elders; dat verschil viel op als een fout. */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 245, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.kop .rij { display: flex; align-items: center; gap: 26px; height: 74px; }
.merk { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--groen-diep); font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -.02em; }
.merk-teken {
  width: 34px; height: 34px; border-radius: var(--radius); flex: none;
  /* Het bestand is een vierkant met scherpe hoeken; de ronding komt van hier. */
  object-fit: cover;
}
.menu { display: flex; gap: 24px; margin-left: auto; align-items: center; }
/* Alleen de kale menulinks, niet de knoppen die er sinds kort in staan.
   Zonder `:not(...)` wint `.menu a` van `.knop-groen` op specificiteit, en dan
   krijgt de demoknop gedempt groen op donkergroen: onleesbaar. Gemeten
   voordat dit erin stond: achtergrond #3B4A37 met tekst #5A6149. */
.menu a:not(.knop):not(.taalknop) { color: var(--zacht); text-decoration: none; font-size: 15px; font-weight: 600; }
.menu a:not(.knop):not(.taalknop):hover { color: var(--groen-diep); }
.menu a:not(.knop):not(.taalknop)[aria-current="page"] { color: var(--groen); }
.kop .knop { padding: 11px 20px; font-size: 14.5px; }
.hamburger { display: none; margin-left: auto; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer; }
.taalknop { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--gedempt); border: 1px solid var(--lijn); padding: 7px 12px; border-radius: var(--radius); }
.taalknop:hover { border-color: var(--groen); color: var(--groen); }

/* ---- hero ---- */
/* Licht als basis. De hero was bijna zwart; dat maakte de hele site zwaar,
   terwijl het product juist vriendelijk moet ogen. Groen is nu accent. */
.hero { position: relative; background: var(--papier); color: var(--inkt); overflow: hidden; border-bottom: 1px solid var(--lijn); }
/* Nagemeten: 180px boven en 130px onder. Zoveel lucht voelt in code fout maar
   op het scherm goed; het is het verschil tussen een brochure en een product. */
.hero .omhulsel { position: relative; z-index: 2; padding-top: clamp(64px, 7vw, 118px); padding-bottom: clamp(64px, 7vw, 110px); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { color: var(--inkt); }
.hero .onder { color: var(--zacht); font-size: 19px; margin: 20px 0 30px; max-width: 34ch; }
.hero .voetnoot { color: var(--vaag); font-size: 14px; margin-top: 20px; }
.hero .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
/* De schuine baan achter het scherm, net als in het origineel. */
.hero-baan {
  position: absolute; inset: 0 0 0 52%; background: var(--zand-zacht);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); z-index: 1;
}
.roterend { color: var(--goud); display: inline-block; min-width: 4ch; }
.roterend::after { content: ""; display: inline-block; width: 2px; height: .82em; background: var(--goud); margin-left: 4px; vertical-align: -.06em; animation: knipper 1s steps(2) infinite; }
@keyframes knipper { 50% { opacity: 0; } }

/* ---- secties ---- */
/* Het origineel ademt trager dan ik eerst aanhield. */
.sectie { padding: clamp(64px, 8vw, 112px) 0; overflow: clip; }
.sectie-zand { background: var(--zand-zacht); }
/* Het enige donkere vlak, en in het zachtere groen in plaats van het
   bijna-zwarte. Eén rustpunt is genoeg. */
.sectie-groen { background: var(--groen); color: var(--papier); }
.sectie-groen h2, .sectie-groen h3 { color: var(--papier); }
.sectie-groen .lead { color: rgba(251, 251, 245, .78); }
.sectiekop { max-width: 46ch; margin-bottom: 48px; }
.sectiekop.midden { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.sectiekop.midden .lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
.lead { color: var(--zacht); font-size: 18px; margin-top: 16px; }

.raster { display: grid; gap: 22px; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kaart {
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--schaduw);
}
.kaart h3 { margin-bottom: 10px; }
.kaart p { color: var(--zacht); font-size: 15.5px; }
.kaart-ikoon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--zand-zacht); color: var(--groen); display: grid; place-items: center; margin-bottom: 18px; }
.sectie-groen .kaart { background: rgba(251, 251, 245, .06); border-color: rgba(251, 251, 245, .14); box-shadow: none; }
.sectie-groen .kaart p { color: rgba(251, 251, 245, .72); }
.sectie-groen .kaart-ikoon { background: rgba(228, 197, 140, .16); color: var(--zand); }

/* stappen */
.stap-nr { font-family: var(--display); font-size: 44px; font-weight: 700; color: var(--zand); line-height: 1; margin-bottom: 14px; }

/* opsomming met vinkjes */
.vinklijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.vinklijst li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--zacht); }
.vinklijst svg { flex: none; margin-top: 4px; color: var(--groen); }
.sectie-groen .vinklijst li { color: rgba(251,251,245,.78); }
.sectie-groen .vinklijst svg { color: var(--zand); }

/* ---- prijzen ---- */
.prijskaart { display: flex; flex-direction: column; gap: 18px; }
.prijskaart.uitgelicht { border-color: var(--groen); box-shadow: 0 0 0 2px var(--groen), var(--schaduw); position: relative; }
.prijsvlag { position: absolute; top: -13px; left: 28px; background: var(--groen); color: var(--papier); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius); }
.prijs { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -.03em; }
.prijs small { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--gedempt); letter-spacing: 0; }

/* ---- beeldplek ---- */
.beeld {
  background: var(--zand-zacht); border: 1px dashed rgba(34, 39, 31, .22); border-radius: var(--radius);
  display: grid; place-items: center; text-align: center; color: var(--vaag);
  font-size: 13px; padding: 20px; overflow: hidden;
}
.beeld img { border-radius: calc(var(--radius) - 2px); }
.beeld-tekst b { display: block; color: var(--gedempt); font-size: 14px; margin-bottom: 4px; }
.beeld-tekst code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ---- vragen ---- */
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  padding: 22px 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.015em;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; margin-left: auto; font-family: var(--body); font-size: 24px; color: var(--goud); font-weight: 400; }
.vraag[open] summary::after { content: "–"; }
.vraag p { color: var(--zacht); font-size: 16px; padding: 0 40px 24px 0; margin-top: -4px; }

/* ---- reviews ---- */
.review { display: flex; flex-direction: column; gap: 16px; }
.review .tekst { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.5; }
.review .wie { display: flex; align-items: center; gap: 12px; }
.review .rondje { width: 40px; height: 40px; border-radius: 50%; background: var(--zand-zacht); border: 1px solid var(--lijn); flex: none; }
.review .naam { font-weight: 700; font-size: 14.5px; }
.review .rol { font-size: 13px; color: var(--vaag); }
.plaatshouder { outline: 1px dashed rgba(154, 138, 95, .5); outline-offset: 4px; }
.plaatshouder-let { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B5B2E; background: rgba(228, 197, 140, .22); padding: 3px 9px; border-radius: var(--radius); margin-bottom: 12px; }

/* ---- formulier ---- */
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld span { font-size: 14px; font-weight: 700; }
.veld .ster { color: #B2553F; }
.veld input, .veld textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--kaart); font-family: inherit; font-size: 16px; color: var(--inkt);
}
.veld textarea { min-height: 120px; resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: 2px solid var(--groen); outline-offset: 1px; }

/* ---- voet ---- */
.voet { background: var(--groen); color: rgba(251, 251, 245, .74); padding: 64px 0 30px; }
.voet h4 { color: var(--papier); font-size: 15px; margin-bottom: 14px; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
.voet a { color: rgba(251, 251, 245, .7); text-decoration: none; font-size: 15px; }
.voet a:hover { color: var(--papier); }
.voet .kolommen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voet .onderaan { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(251, 251, 245, .12); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 14px; color: rgba(251, 251, 245, .5); }

/* ---- smaller ---- */
@media (max-width: 980px) {
  .hero-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-baan { display: none; }
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet .kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .sectie { padding: 68px 0; }
  .menu { display: none; }
  .hamburger { display: block; }
  /* De demoknop en de taalknop pasten niet naast het logo: de knop brak over
     drie regels en duwde het hamburgermenu van het scherm af. Beide staan al
     in het uitklapmenu, dus in de balk zelf kunnen ze weg. */
  .kop .knop, .kop .taalknop { display: none; }
  /* De taalknop blijft zo breed als zijn inhoud, de demoknop vult de rij: dat
     is de handeling waar het menu voor openstaat. */
  .menu.open .taalknop { display: inline-flex; align-self: flex-start; margin-top: 18px; }
  .menu.open .knop { display: flex; justify-content: center; margin-top: 12px; padding: 15px 20px; font-size: 16px; }
  /* Het uitgeklapte menu.

     Wat er eerst niet klopte: `.menu` staat op de brede weergave op
     `align-items: center` voor de balk, en dat centreerde hier elk item apart.
     Daardoor begon elke link op een andere x, terwijl de knoppen eronder links
     stonden. En het tikvlak was zo breed als het woord, dus naast "Help" tikken
     deed niets. Nu is alles even breed en links uitgelijnd.

     De schaduw maakt duidelijk dat het menu boven de pagina ligt en niet
     onderdeel van de kop is. */
  .menu.open {
    display: flex; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw); padding: 6px 24px 20px;
  }
  /* De hele rij is aantikbaar, niet alleen het woord. */
  .menu.open a:not(.knop):not(.taalknop) {
    display: block; padding: 15px 0; font-size: 17px;
    border-bottom: 1px solid var(--lijn);
  }
  .raster-2, .raster-3, .raster-4 { grid-template-columns: minmax(0, 1fr); }
  .voet .kolommen { grid-template-columns: 1fr; }
}

/* ============================================================
   Vormtaal van Sierra, in Olivia's kleuren.

   Wat deze site eerst miste en wat het onderscheid maakt:

   1. BEELD LOOPT OVER DE RAND. Sierra snijdt schermafdrukken af op de rand van
      het scherm in plaats van ze netjes in een kaart te zetten. Dat geeft het
      gevoel dat je naar een echt product kijkt en niet naar een brochure.
   2. GEEN KAARTRAND op split-secties. Alleen tekst en beeld, veel wit.
   3. EEN GEVULD LABELTJE boven de kop, geen streepje met kapitalen.
   4. EEN WOORD IN DE KOP met kleur en onderstreping.
   5. DE STAPPEN IN EEN PANEEL met scheidingslijnen en pijlen ertussen.
   ============================================================ */

/* 1. Beeld dat over de rand loopt. De helft van het raster mag buiten de
      omhullende breedte vallen tot aan de rand van het venster. */
/* De marge moet de afstand overbruggen van de binnenrand van de omhullende
   tot de rand van het venster. `50% - 50vw` leek goed maar rekent met de
   breedte van de kolom waar het beeld in staat, niet met die van de omhullende
   daarboven; dat gaf 313px horizontaal scrollen. Deze som klopt wel:

     halve vensterbreedte  -  halve omhullende  +  de marge ernaast

   Onder 980px staat het beeld boven de tekst en vervalt de bleed. */
.bleed-rechts { margin-right: calc(-1 * (50vw - (var(--breed) / 2) + 24px)); }
.bleed-links  { margin-left:  calc(-1 * (50vw - (var(--breed) / 2) + 24px)); }
.bleed-rechts .beeld, .bleed-links .beeld { border-radius: var(--radius); }
.bleed-rechts .beeld { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bleed-links  .beeld { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
@media (max-width: 980px) {
  .bleed-rechts, .bleed-links { margin-left: 0; margin-right: 0; }
  .bleed-rechts .beeld, .bleed-links .beeld { border-radius: var(--radius); }
}

/* 3. Labeltje als gevulde chip, met dezelfde hoek als al het andere.

   Nagemeten in het origineel: daar is geen enkel tekstlabel pilvormig. De
   ronde hoeken die er zitten (100px) staan uitsluitend op vierkante avatars
   en icoontjes, waar ze een cirkel maken. Een pil om tekst is dus geen
   kenmerk van het thema maar een eigen toevoeging, en die is eruit. */
.chip {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--groen); background: rgba(59, 74, 55, .10);
  padding: 7px 14px; border-radius: var(--radius); margin-bottom: 18px;
}
.sectie-groen .chip { color: var(--zand); background: rgba(228, 197, 140, .18); }

/* 4. Nadruk binnen een kop. */
h1 em, h2 em, h3 em {
  font-style: normal; color: var(--groen);
  text-decoration: underline; text-decoration-thickness: 3px;
  text-underline-offset: 6px; text-decoration-color: var(--zand);
}
.hero h1 em { color: var(--goud); }
.sectie-groen h2 em { color: var(--zand); text-decoration-color: rgba(251,251,245,.45); }

/* 5. De drie stappen in één paneel. */
.stappenpaneel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw); overflow: hidden; position: relative;
}
.stappenpaneel > div { padding: 34px 30px 38px; position: relative; }
.stappenpaneel > div + div { border-left: 1px solid var(--lijn); }
.stapmerk {
  position: absolute; top: 22px; right: 22px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zacht);
  background: var(--zand-zacht); padding: 4px 9px; border-radius: 6px;
}
/* Pijltje op de scheidingslijn, precies zoals in het origineel. */
.stappenpaneel > div + div::before {
  content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--zand-zacht);
  border: 1px solid var(--lijn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236C7359' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
@media (max-width: 820px) {
  .stappenpaneel { grid-template-columns: minmax(0, 1fr); }
  .stappenpaneel > div + div { border-left: 0; border-top: 1px solid var(--lijn); }
  .stappenpaneel > div + div::before { left: 50%; top: -13px; transform: translateX(-50%) rotate(90deg); }
}

/* Hero: e-mailveld met knop ernaast, zoals in het origineel. */
.vangrij { display: flex; gap: 10px; max-width: 460px; }
.vangrij input {
  flex: 1; min-width: 0; padding: 15px 18px; border: 1px solid var(--lijn);
  border-radius: var(--radius); background: var(--kaart); font: inherit; font-size: 15px; color: var(--inkt);
}
.vangrij input:focus { outline: 2px solid var(--groen); outline-offset: 1px; }
.vangrij .knop { white-space: nowrap; }
@media (max-width: 560px) { .vangrij { flex-direction: column; } .vangrij .knop { justify-content: center; } }

/* Vertrouwensregel onder de hero. */
.vertrouwen { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.vertrouwen p { font-size: 13px; color: var(--vaag); margin-bottom: 14px; }
.vertrouwen .logos { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
/* Echte logo's: alleen het merk, geen kader eromheen. De hoogte is gelijk
   zodat ze op één lijn staan; de breedte volgt per merk, want Safari is breed
   en Android smal. Iets gedempt, want ze mogen de knop ernaast niet overstemmen. */
img.logo {
  height: 26px; width: auto; opacity: .8;
  transition: opacity .15s ease;
}
img.logo:hover { opacity: 1; }
/* Terugval wanneer een bestand ontbreekt. */
.logo-tekst {
  height: 34px; padding: 0 16px; display: grid; place-items: center;
  border: 1px dashed rgba(34,39,31,.18); border-radius: var(--radius);
  font-size: 11.5px; color: var(--vaag);
}

/* Split-sectie zonder kaartrand: alleen tekst en beeld. */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; }
@media (max-width: 980px) { .split { grid-template-columns: minmax(0,1fr); gap: 34px; } }

/* Tekstlink in de voetnoot onder het invoerveld. */
.stille-link { color: var(--groen); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(59,74,55,.3); text-underline-offset: 3px; }
.stille-link:hover { text-decoration-color: var(--groen); }

/* Het stapnummer staat nu in het paneel en niet meer op een kaart. */
.stappenpaneel .stap-nr {
  width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--groen); color: var(--zand);
  font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 16px;
}
.stappenpaneel h3 { margin-bottom: 8px; }
.stappenpaneel p { color: var(--zacht); font-size: 15.5px; }

/* Het roterende woord stond in goud op licht papier en was nauwelijks te
   lezen. Het is het woord waar de hele kop om draait, dus het moet juist het
   sterkste contrast hebben van de regel. */
.roterend { color: var(--groen); }
.roterend::after { background: var(--groen); }
/* Tijdens het tikken staat de cursor stil. Een cursor die knippert terwijl er
   letters bijkomen leest als haperen in plaats van als typen. */
.roterend.typt::after { animation: none; opacity: 1; }

/* De chip stond in doorzichtig groen en las als grijs. Zand geeft hem de
   warmte van de rest van de huisstijl. */
.chip { color: #6B5B2E; background: rgba(228, 197, 140, .38); }

/* Het beeld in de hero mag niet zo hoog worden dat de tekst ernaast in het
   niet valt. */
.hero .bleed-rechts .beeld { max-height: 520px; }

/* ---- in beeld komen bij het scrollen ----------------------------------
   `onthul` wordt door site.js gezet, nooit hier. Daardoor kan er niets
   onzichtbaar blijven staan als het script iets overslaat of niet laadt. */
.onthul {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1) var(--vertraging, 0ms),
              transform .6s cubic-bezier(.22, .61, .36, 1) var(--vertraging, 0ms);
}
.onthul.inBeeld { opacity: 1; transform: none; }

/* Vangt het geval af dat iemand beweging uitzet terwijl de pagina al open
   staat; het script slaat de animatie dan al over bij het laden. */
@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1; transform: none; transition: none; }
}

/* ---- maandelijks of jaarlijks ----------------------------------------- */
.termijnkiezer { display: none; }
.js .termijnkiezer {
  display: flex; gap: 4px; width: max-content; margin: 0 auto 44px;
  padding: 4px; background: var(--zand-zacht);
  border: 1px solid var(--lijn); border-radius: var(--radius);
}
.termijnknop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: 0; border-radius: 7px; background: transparent;
  font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--zacht);
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.termijnknop:hover { color: var(--groen-diep); }
.termijnknop[aria-pressed="true"] { background: var(--groen); color: var(--papier); }
.termijnknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.voordeel {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(228, 197, 140, .45); color: #6B5B2E;
}
.termijnknop[aria-pressed="true"] .voordeel { background: var(--zand); color: var(--groen-diep); }

/* Welke van de twee bedragen te zien is, hangt aan de rasterrij en niet aan
   losse kaarten. Eén attribuut omzetten schakelt ze dus allemaal tegelijk. */
.pakketten[data-termijn="maand"] .bij-jaar,
.pakketten[data-termijn="jaar"] .bij-maand { display: none; }

@media (max-width: 460px) {
  .js .termijnkiezer { width: 100%; }
  .termijnknop { flex: 1; justify-content: center; padding: 11px 12px; font-size: 14px; }
  .voordeel { display: none; }
}

/* Op een eigen regel onder het bedrag. Zakelijke kopers rekenen zelf terug,
   maar het moet er wel staan en het mag de prijs niet in de weg zitten. */
.prijs .btw {
  display: block; font-family: var(--body); font-size: 13px; font-weight: 500;
  letter-spacing: 0; color: var(--vaag); margin-top: 4px;
}

/* Een echte afbeelding in plaats van een plaatshouder. De stippellijn en het
   zandvlak horen bij de plek, niet bij het beeld zelf. `contain` en niet
   `cover`, want een productmockup mag niet bijgesneden worden. */
.beeld-echt {
  width: 100%; height: auto; object-fit: contain;
  background: none; border: 0; padding: 0;
}
.hero .beeld-echt { max-height: 560px; margin-left: auto; }

/* De hero-mockup staat in de kolom en loopt niet door de rand. */
.hero-beeld { display: flex; justify-content: flex-end; }
@media (max-width: 980px) { .hero-beeld { justify-content: center; } }

/* Vlaggetje in de taalknop. Een dun randje eromheen, anders loopt het wit van
   de Nederlandse vlag weg tegen de lichte achtergrond van de knop. */
.taalknop { display: inline-flex; align-items: center; gap: 8px; }
/* 18 bij 12 is 3 op 2, en beide vlaggen zijn op die verhouding getekend.
   Daardoor vullen ze het vak precies, zonder rek en zonder witrand. */
.vlag {
  width: 18px; height: 12px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(34, 39, 31, .12);
  display: block;
}

/* Beeld in een split-blok mag de sectie niet overheersen.

   Zonder begrenzing volgt de hoogte de verhouding van het bestand, en dan werd
   een staande schermafdruk van 1206 bij 2622 bijna tweeduizend pixels hoog
   naast een tekstkolom van een paar regels. De breedte volgt nu de hoogte, dus
   de verhouding blijft kloppen en hoge en vierkante beelden staan even hoog. */
.split .beeld-echt {
  max-height: 560px;
  width: auto;
  margin-inline: auto;
}
@media (max-width: 980px) { .split .beeld-echt { max-height: 460px; } }