/* ============================================================
   AiMELO landingspagina's · distributie-opdracht
   Eén stijl, drie pagina's: elke doelgroep krijgt zijn eigen kop
   en eigen bewijs, maar dezelfde aanmeldknop.

   Huisstijlregels die hier hard in zitten:
   - papier #FBF7EE, nooit wit
   - #8DC63F is vlakkleur; groene tekst op papier is #5F8F22
   - tekst op groen vlak is #14310A, nooit wit
   - Titillium 900 voor koppen, 400 voor tekst; mono alleen voor getallen
   - vormtaal: groene dot, harde offset-schaduw, pill-knop, polaroid
   ============================================================ */

:root {
  --paper:      #FBF7EE;
  --surface:    #F2ECDD;
  --surface-2:  #EDE5D2;
  --ink:        #1F262F;
  --muted:      #5C6671;
  --navy:       #1F262F;
  --navy-2:     #2A3340;
  --green:      #8DC63F;
  --green-dark: #76AD2D;
  --green-deep: #5F8F22;
  --lime:       #D6FF8E;
  --green-ink:  #14310A;
  --line:       rgba(31,38,47,.12);
  --font:       'Titillium Web', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r:          22px;
  --r-lg:       34px;
  --hard:       6px 6px 0 var(--navy);
}

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

.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 22px; }

/* ---------- kop van de pagina ---------- */
.top { padding: 26px 0 0; display: flex; align-items: center; justify-content: space-between; }
.top img { height: 46px; width: auto; }
.top .terug { font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 8px; }
.kicker {
  font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--green-deep); margin-bottom: 18px;
}
.kl { text-transform: lowercase; }
.dot {
  display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: var(--green); margin-right: .6em; vertical-align: .04em;
}
h1 {
  font-weight: 900; font-size: clamp(37px, 9.2vw, 56px); line-height: 1.0;
  letter-spacing: -.035em; text-wrap: balance;
}
h1.met-mark { line-height: 1.2; }
.mark {
  background: linear-gradient(104deg,
    transparent .5%, var(--lime) 2%, var(--lime) 97.5%, transparent 99.5%);
  color: var(--green-ink); padding: .02em .1em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lead { font-size: 19.5px; color: var(--muted); margin-top: 20px; }
.lead b { color: var(--ink); font-weight: 700; }

/* ---------- knop ---------- */
.knop {
  display: inline-block; background: var(--green); color: var(--green-ink);
  font-weight: 800; font-size: 19px; text-decoration: none;
  padding: 17px 34px; border-radius: 999px; box-shadow: var(--hard);
  margin-top: 30px; transition: transform .12s ease, box-shadow .12s ease;
}
.knop:hover { background: var(--green-dark); transform: translate(2px,2px); box-shadow: 4px 4px 0 var(--navy); }
.knop:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.onder-knop {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--muted);
  margin-top: 16px; letter-spacing: .01em;
}

/* ---------- polaroid ---------- */
.polaroid {
  background: #fff; padding: 12px 12px 46px; border-radius: 4px;
  box-shadow: 0 18px 50px rgba(31,38,47,.18);
  transform: rotate(-2.4deg); margin: 46px auto 10px; max-width: 400px; position: relative;
}
.polaroid::before {
  content: ''; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 120px; height: 26px; background: var(--lime); opacity: .92;
}
.polaroid img { border-radius: 2px; }
.polaroid figcaption {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-size: 14.5px; font-weight: 700; color: var(--muted);
}

/* ---------- secties ---------- */
section { padding: 50px 0; }
h2 {
  font-weight: 900; font-size: clamp(26px, 6.4vw, 34px); line-height: 1.12;
  letter-spacing: -.025em; margin-bottom: 20px; text-wrap: balance;
}
.punten { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.punten li { position: relative; padding-left: 30px; }
.punten li::before {
  content: ''; position: absolute; left: 2px; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}
.punten b { font-weight: 700; }

/* ---------- donkere sectie met het bewijs ---------- */
.bewijs {
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
  padding: 34px 28px; margin: 8px 0;
}
.bewijs .quote {
  font-weight: 900; font-size: clamp(23px, 5.6vw, 30px); line-height: 1.16;
  letter-spacing: -.02em; text-wrap: balance;
}
.bewijs .wie { color: var(--lime); font-weight: 700; font-size: 15.5px; margin-top: 16px; }
.bewijs .tel { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.bewijs .tel div { flex: 1; min-width: 120px; }
.bewijs .tel .v {
  display: block; font-family: var(--font-mono); font-weight: 600; font-size: 34px;
  color: var(--green); line-height: 1; letter-spacing: -.02em;
}
.bewijs .tel p { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 6px; line-height: 1.35; }

/* ---------- praktisch ---------- */
.praktisch { background: var(--surface); border-radius: var(--r-lg); padding: 30px 26px; }
.praktisch dl { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.praktisch dl > div { display: flex; gap: 16px; align-items: baseline; }
.praktisch dt {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); width: 5.6em; flex: none; padding-top: 3px;
}
.praktisch dd { margin: 0; font-weight: 600; }
.praktisch dd a { color: var(--green-deep); font-weight: 700; }
.praktisch figure { margin-top: 24px; }
.praktisch figure img { border-radius: var(--r); border: 3px solid #fff; box-shadow: var(--hard); }
.praktisch figcaption { font-size: 14.5px; color: var(--muted); margin-top: 12px; font-weight: 600; }

/* ---------- afsluiter ---------- */
.slot { text-align: center; padding: 56px 0 20px; }
.slot h2 { margin-bottom: 14px; }
.slot p { color: var(--muted); }
.plekken {
  display: inline-block; background: var(--lime); color: var(--green-ink);
  font-weight: 800; font-size: 14.5px; padding: 8px 16px; border-radius: 999px; margin-top: 20px;
}

footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 50px;
  font-size: 14px; color: var(--muted);
}
footer a { font-weight: 700; }
footer p + p { margin-top: 8px; }

@media (max-width: 420px) {
  .bewijs, .praktisch { border-radius: var(--r); padding-left: 20px; padding-right: 20px; }
  .polaroid { transform: rotate(-1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop { transition: none; }
}

/* ============================================================
   Varianten per pagina
   Elke landingspagina heeft een eigen opbouw, want de aarzelaar
   leest anders dan de tienjarige. Dit zijn de blokken die niet
   op alle pagina's voorkomen.
   ============================================================ */

/* ---------- vraag-en-antwoord (optijd.aimelo.nl) ---------- */
.vragen { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.vraag {
  background: var(--surface); border-radius: var(--r); padding: 20px 22px;
  border-left: 5px solid var(--green);
}
.vraag h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 7px; line-height: 1.25;
}
.vraag p { margin: 0; color: var(--muted); font-size: 16px; }
.vraag p b { color: var(--ink); font-weight: 700; }

/* ---------- speelse variant (magikook.aimelo.nl) ---------- */
.groenvlak {
  background: var(--green); color: var(--green-ink);
  border-radius: var(--r-lg); padding: 30px 26px; margin: 8px 0;
}
.groenvlak h2 { color: var(--green-ink); }
.groenvlak .punten li::before { background: var(--green-ink); }
.groenvlak .punten li { color: rgba(20,49,10,.88); }
.groenvlak .punten b { color: var(--green-ink); }

.maak {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-top: 4px;
}
.maak div {
  background: var(--paper); border-radius: 16px; padding: 16px 16px 14px; text-align: center;
}
.maak .emoji { font-size: 30px; line-height: 1; display: block; margin-bottom: 8px; }
.maak b { display: block; font-weight: 800; font-size: 15.5px; }
.maak span.uit { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* ============================================================
   De recap-reel
   Zestien avonden achter elkaar zegt meer dan één foto. De strook
   loopt door tot voorbij de schermrand, zodat je ziet dat je kunt
   vegen. Video's laden pas als de kaart in beeld komt: ze zijn
   samen ruim honderd megabyte.
   ============================================================ */
.reel-sectie { padding: 46px 0 40px; }
.reel-sectie h2 { margin-bottom: 8px; }
.reel-intro { color: var(--muted); font-size: 16.5px; margin: 0 0 22px; }

.reel { margin: 0 -22px; }
.reel-spoor {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 22px 20px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.reel-spoor::-webkit-scrollbar { height: 7px; }
.reel-spoor::-webkit-scrollbar-thumb { background: rgba(31,38,47,.22); border-radius: 999px; }

.reel-kaart {
  flex: 0 0 250px; scroll-snap-align: start;
  background: var(--navy); border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(31,38,47,.14);
}
.reel-beeld { position: relative; aspect-ratio: 4/3; background: var(--navy-2); }
.reel-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  border: none; border-radius: 50%; background: rgba(141,198,63,.95); color: var(--green-ink);
  font-size: 18px; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.reel-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.reel-tekst { padding: 14px 16px 18px; }
.reel-datum {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.reel-tekst h3 {
  font-size: 17px; font-weight: 800; color: #fff; margin: 5px 0 6px;
  line-height: 1.2; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* De blurbs lopen van één zin tot een halve alinea. Zonder deze rem wordt elke
   kaart zo hoog als de langste tekst, en dat is een muur in plaats van een strook. */
.reel-tekst p {
  font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.72); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.reel-onder { font-size: 15px; color: var(--muted); margin: 4px 0 0; }
.reel-tel { font-family: var(--font-mono); font-weight: 600; color: var(--green-deep); font-size: 17px; }

@media (max-width: 420px) {
  .reel-kaart { flex-basis: 224px; }
}