/* Experiment 3A "abnehmleben": lange landingpage + mini-quiz (DE-vertaling van afslank-leven, 14-08-2026)
   Design tokens 1-op-1 uit abnehm-check-2 (afgeleid van dokteronline.com). Geen visuele
   wijzigingen t.o.v. afslank-leven, alleen COPY/HTML zijn vertaald (zie script.js/index.html).
   Nieuw t.o.v. de quizfunnels: lange-pagina layout (secties, swipe-rijen,
   sticky CTA-balk, FAQ-accordion), naar het model van de Breinfijn
   zenuwstelsel-ss pagina. CTA-afspraak: gevulde knop = naar de check,
   omlijnde knop = doorlezen naar de volgende sectie. */

:root {
  /* Merk (ongewijzigd) */
  --teal: #316e74;
  --teal-dark: #284f54;
  --teal-soft: #1d9f8a;
  --lime: #73cf11;
  --lime-dark: #5fae0c;
  --mint: #deeeee;
  --bg: #f1f6f8;
  --surface: #ffffff;
  --ink: #1d1c1c;
  --ink-soft: #4a5658;
  --line: #d7e3e5;
  --trust: #00b67a;
  --shadow: 0 10px 30px rgba(40, 79, 84, 0.10);
  --shadow-sm: 0 4px 14px rgba(40, 79, 84, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --font: "Manrope", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* Lange-pagina tokens */
  --maxw-page: 1080px;
  --maxw-text: 680px;
  --section-y: clamp(48px, 7vw, 88px);
  --mist: #e7f1f2;   /* sectietint tussen --bg en --mint in */
  --warm: #faf3e7;   /* eerlijkheidsblok: warm, maar rustig */
  --header-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Backstop tegen horizontale overflow; de swipe-rijen hebben daarnaast
     contain:paint (zie .swipe), anders rapporteert scrollWidth te breed. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--teal); }

p { max-width: 62ch; }

/* Ankerdoelen: focus na een sprong + ruimte onder de sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.sec:focus { outline: none; }

/* ---------- Header ---------- */
.siteHeader {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* Eigen compositing-laag: voorkomt het bekende iOS Safari-glitch waarbij
     sticky elementen tijdens scrollen dubbel/ghosted renderen i.c.m. de
     overflow-x: clip op body (zie hieronder). */
  transform: translateZ(0);
}
.siteHeader .wrap {
  max-width: var(--maxw-page); margin: 0 auto; height: 100%;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.siteHeader .logo-img { height: 22px; width: auto; }
.siteHeader .btn { display: none; }
@media (min-width: 640px) {
  .siteHeader .btn { display: inline-flex; padding: 12px 22px; }
}

/* ---------- Secties ---------- */
.sec { padding-block: var(--section-y); }
.sec > .wrap { max-width: var(--maxw-page); margin: 0 auto; padding-inline: 20px; }
.wrap-text { max-width: var(--maxw-text); }
.sec--white { background: var(--surface); }
.sec--bg { background: var(--bg); }
.sec--mist { background: var(--mist); }
.sec--warm { background: var(--warm); }
.sec--deep { background: linear-gradient(160deg, var(--teal-dark), var(--teal)); color: #fff; }

.sec h2 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.18; letter-spacing: -0.02em; font-weight: 800;
  margin-bottom: 14px; text-wrap: balance;
}
.sec .sec-lead { color: var(--ink-soft); margin-bottom: 26px; }
.sec--deep .sec-lead { color: rgba(255,255,255,.85); }

/* Doorlees-CTA onderaan een sectie */
.sec-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Typografie / kleine componenten (uit de quizfunnels) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--teal);
  background: var(--mint); padding: 6px 12px; border-radius: 99px;
  letter-spacing: .01em; margin-bottom: 16px;
}
.eyebrow svg { width: 15px; height: 15px; flex: 0 0 auto; }

h1 {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.12; letter-spacing: -0.02em; font-weight: 800;
  margin-bottom: 16px; text-wrap: balance;
}
.lede { font-size: 17.5px; color: var(--ink-soft); margin-bottom: 26px; }

/* ---------- Buttons ----------
   Gevuld (lime) = naar de check. Omlijnd = doorlezen. Nooit mengen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: none; border-radius: 99px;
  padding: 17px 26px; font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; text-decoration: none; text-align: center;
  transition: transform .12s, box-shadow .18s, background .18s, border-color .18s;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primary { background: var(--lime); color: #14310a; box-shadow: 0 4px 12px rgba(115,207,17,.22); }
.btn-primary:hover { background: var(--lime-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 4px 12px rgba(49,110,116,.20); }
.btn-teal:hover { background: var(--teal-dark); }
.btn-outline {
  background: transparent; color: var(--teal);
  border: 2px solid var(--teal); box-shadow: none;
  padding: 15px 24px; /* 2px rand gecompenseerd: gelijke hoogte met gevuld */
}
.btn-outline:hover { background: var(--mint); }
.btn-invert { background: #fff; color: var(--teal-dark); }
.btn-invert:hover { background: var(--mint); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--sm { padding: 13px 20px; font-size: 15.5px; }
@media (min-width: 640px) {
  .btn { width: auto; }
}

/* Leeslink in de hero: bewust geen knopvorm (een knopvorm zou concurreren
   met de gevulde CTA erboven). */
.readlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-weight: 700; font-size: 15.5px;
  text-decoration: underline; text-underline-offset: 3px;
}
.readlink:hover { color: var(--ink); }
.readlink svg { width: 16px; height: 16px; }

/* Focus alleen zichtbaar bij toetsenbord */
:focus-visible { outline: 3px solid var(--teal-soft); outline-offset: 2px; border-radius: 6px; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; gap: 36px; }
.hero-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 6px; }
.proofline {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.proofline span { display: inline-flex; align-items: center; gap: 7px; }
.proofline svg { width: 16px; height: 16px; color: var(--teal-soft); flex: 0 0 auto; }
.proofline .stars svg { color: var(--trust); width: 15px; height: 15px; }
.stars { display: inline-flex; gap: 2px; }

/* Hero-visual: op mobile alleen de rekenkaart (geen foto, op verzoek van Sterre
   13-08-2026). Vanaf 900px komt de foto terug met de kaart eroverheen geschoven
   (Wellis-patroon, maar zonder absolute positionering: negatieve marge is
   robuuster). */
.hero-visual { position: relative; }
.hero-media { display: none; }
.calc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}
.calc-card h3 { font-size: 17.5px; letter-spacing: -0.01em; margin-bottom: 12px; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-fields .field { margin-top: 0; }
.calc-fields input { padding: 13px; font-size: 16px; }
.calc-out {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--mint); color: var(--teal-dark);
  font-weight: 600; font-size: 15px; line-height: 1.45;
}
.calc-out strong { font-variant-numeric: tabular-nums; }
.calc-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.45; max-width: none; }
.calc-card .btn { width: 100%; margin-top: 14px; font-size: 15.5px; padding: 14px 20px; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; }
  .hero-media { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: auto; height: 460px; object-fit: cover; object-position: 50% 22%; box-shadow: var(--shadow); }
  .calc-card { margin: -170px 22px 0; }
}

/* ---------- Herkenning (vinkjeslijst) ---------- */
.signs { list-style: none; display: flex; flex-direction: column; margin-bottom: 24px; }
.signs li {
  display: flex; gap: 14px; align-items: baseline;
  padding-block: 13px; border-bottom: 1px solid var(--line);
  font-size: 16.5px; font-weight: 600;
}
.signs .tick {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mint); color: var(--teal); display: grid; place-items: center;
  transform: translateY(4px);
}
.signs .tick svg { width: 13px; height: 13px; }
/* Mechanisme-lijst in de verhaal-kaart. Bewust een pijl en geen vinkje:
   het vinkje betekent op deze pagina "dit herken ik" (blok 2), de pijl
   betekent "dit doet het" (feedbackronde 2, 11-08). */
.mech { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mech li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mech .mech-arrow { width: 16px; flex: 0 0 auto; color: var(--teal); display: inline-flex; transform: translateY(2px); }
.mech .mech-arrow svg { width: 15px; height: 15px; }

/* ---------- Swipe-rij (verhaal-kaarten) ----------
   contain:paint is verplicht: zonder dit rapporteert scrollWidth breder dan de
   viewport en zoomt mobiele Chrome de pagina uit (les uit zenuwstelsel-ss). */
.swipe {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  contain: paint;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { flex: 0 0 min(100%, 340px); scroll-snap-align: start; scroll-snap-stop: always; }
.swipe > *:last-child { scroll-snap-align: end; }
@media (min-width: 900px) {
  .swipe { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; contain: none; }
  /* Kaarten met sterk ongelijke tekstlengte (bv. "Het verhaal") niet uitrekken naar de langste kaart. */
  .swipe--top { align-items: start; }
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--ink-soft); }

/* Carrousel-bolletjes (JS bouwt ze; verdwijnen zodra de rij een raster is) */
.dots { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.dots button {
  width: 32px; height: 32px; border: none; background: transparent;
  display: grid; place-items: center; border-radius: 50%;
}
.dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: transform .18s, background .18s;
}
.dots button[aria-current="true"] .dot { background: var(--teal); transform: scale(1.5); }
@media (min-width: 900px) { .dots { display: none; } }

/* ---------- Reviews ---------- */
.reviews { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; contain: paint; padding-bottom: 6px; scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.reviews > * { flex: 0 0 min(100%, 320px); scroll-snap-align: start; scroll-snap-stop: always; }
.reviews > *:last-child { scroll-snap-align: end; }
@media (min-width: 900px) {
  .reviews { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; contain: none; }
}
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review .name { font-weight: 700; font-size: 14.5px; }
.review .date { font-size: 12.5px; color: var(--ink-soft); }
.review .stars svg { width: 14px; height: 14px; color: var(--trust); }
.review p { font-size: 14.5px; color: var(--ink-soft); }
.review .src { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: auto; }
.review .src svg { width: 13px; height: 13px; color: var(--trust); }

/* ---------- Artsen ---------- */
.doctors { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; contain: paint; padding-bottom: 6px; scrollbar-width: none; }
.doctors::-webkit-scrollbar { display: none; }
.doctors > * { flex: 0 0 min(72%, 240px); scroll-snap-align: start; scroll-snap-stop: always; }
.doctors > *:last-child { scroll-snap-align: end; }
@media (min-width: 900px) {
  .doctors { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; contain: none; }
}
.doctor-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm); }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.doctor-tag { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.3; padding: 7px 9px; border-radius: var(--radius-sm); }
.doctor-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; margin-top: 12px; }
.doctor-name svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; }
.doctor-reg { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Stappen (hoe het werkt): hergebruikt .swipe/.card, alleen het nummerbadge is nieuw ---------- */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px;
  background: var(--teal); color: #fff; font-weight: 800; font-size: 16px;
}

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.trust-item svg { width: 17px; height: 17px; color: var(--teal-soft); flex: 0 0 auto; }
.trust-item .stars svg { width: 15px; height: 15px; color: var(--trust); }

/* ---------- Trust-strip (volle-breedte balk, resultaatsectie) ---------- */
.trust-strip { background: var(--teal); }
.trust-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px; padding-block: 14px;
}
.trust-strip-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.trust-strip-item svg { width: 17px; height: 17px; color: #fff; flex: 0 0 auto; }

/* ---------- Stat-cards (resultaatsectie) ---------- */
.stat-cards { display: flex; flex-direction: column; gap: 12px; }
.stat-card {
  background: var(--mint); border-radius: var(--radius); padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.stat-card-text { display: flex; flex-direction: column; gap: 3px; }
.stat-card .stat-num { font-size: 26px; font-weight: 800; color: var(--teal-dark); line-height: 1.1; }
.stat-card .stat-label { font-size: 13.5px; color: var(--ink-soft); }
.stat-card svg { width: 26px; height: 26px; color: var(--teal-soft); flex: 0 0 auto; }
.stat-card--highlight { background: var(--warm); }
.stat-card--highlight .stat-num { color: var(--ink); }
.stat-card--highlight svg { color: var(--ink); }

/* Groter plaatje: rechterkolom (stat-cards) verticaal centreren t.o.v. de linkerkolom */
@media (min-width: 900px) {
  .split--center-end { align-self: center; }
}

.edu-note { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; }

/* Groter plaatje: redactionele split op desktop */
.split { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: 56px; }
  /* CTA in dezelfde rij als de linkerkolom plaatsen (i.p.v. een eigen rij eronder),
     zodat hij onderaan uitlijnt op dezelfde hoogte als de rechterkolom (de *indicatie-
     tekst). De rij-hoogte wordt bepaald door de rechterkolom (langste inhoud).
     GEEN position:sticky meer op .split-aside: die zat in dezelfde grid-cel als de
     CTA, en een sticky element "veegt" tijdens het scrollen over al zijn eigen
     grid-cel heen — dus ook over de onderaan uitgelijnde CTA, ongeacht achtergrond-
     kleur of z-index. Zonder sticky scrollt alles gewoon normaal mee, geen overlap. */
  .split > .split-aside { grid-column: 1; grid-row: 1; align-self: start; }
  .split > .split--center-end { grid-column: 2; grid-row: 1; }
  .split > .split-cta { grid-column: 1; grid-row: 1; align-self: end; }
}

/* ---------- Quiz (inline) ---------- */
.quiz-panel {
  max-width: 640px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.quiz-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; min-height: 32px; }
.q-dots { display: inline-flex; gap: 6px; }
.q-dots .qd { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .18s, transform .18s; }
.q-dots .qd.on { background: var(--teal); transform: scale(1.25); }
.quiz-back {
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; visibility: hidden;
}
.quiz-back.show { visibility: visible; }
.quiz-back:hover { background: var(--mint); }
.quiz-back svg { width: 15px; height: 15px; }
.q-title { font-size: clamp(20px, 4.5vw, 25px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 8px; }
.q-help { font-size: 15px; color: var(--ink-soft); margin-bottom: 20px; }

.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius-sm); padding: 17px 18px;
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: border-color .18s, background .18s, transform .12s;
}
.option:hover { border-color: var(--teal-soft); }
.option:active { transform: scale(.99); }
.option .tick {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--line); flex: 0 0 auto;
  display: grid; place-items: center; transition: all .18s;
}
.option .tick svg { width: 14px; height: 14px; opacity: 0; }
.option.selected { border-color: var(--teal); background: #f3fafb; }
.option.selected .tick { background: var(--teal); border-color: var(--teal); }
.option.selected .tick svg { opacity: 1; color: #fff; }

.cta-row { margin-top: 24px; }
.cta-row .btn { width: 100%; }

.field { margin-top: 20px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.field input {
  width: 100%; border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px; font-size: 16px; font-family: inherit; background: var(--surface);
}
.field input:focus { outline: none; border-color: var(--teal); }
.bmi-readout {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--mint); color: var(--teal);
  font-weight: 700; font-size: 15.5px; text-align: center;
}

.fade-in { animation: fadeUp .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Resultaat + productkaarten ---------- */
.result-head .eyebrow { background: #e7f6ed; color: var(--trust); }
.result-head h3 { font-size: clamp(21px, 4.5vw, 26px); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.result-personal {
  background: var(--mint); border-left: 3px solid var(--teal-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px; margin: 14px 0 16px;
  font-weight: 600; color: var(--teal-dark); line-height: 1.5; font-size: 15.5px;
}
.result-intro { color: var(--ink-soft); margin-bottom: 22px; font-size: 15.5px; }
.match-cards { display: flex; flex-direction: column; gap: 16px; }
.match {
  background: var(--surface); border: 1.5px solid #cfe6e3;
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.match .freq {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--teal);
  background: var(--mint); padding: 5px 11px; border-radius: 99px; margin-bottom: 12px;
  align-self: flex-start;
}
.match .freq svg { width: 15px; height: 15px; flex: 0 0 auto; }
.match h3, .match h4 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 2px; }
.match-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em; }
.match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.match-price { font-size: 16.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.match-effect {
  font-size: 13px; font-weight: 700; color: var(--trust);
  background: #e7f6ed; padding: 4px 11px; border-radius: 99px;
}
.match p { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.match-specs { margin: 0 0 16px; }
.match-specs div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.match-specs div:last-child { border-bottom: none; }
.match-specs dt { color: var(--ink-soft); font-weight: 600; flex: 0 0 auto; }
.match-specs dd { font-weight: 700; text-align: right; }
.match .btn { font-size: 15.5px; padding: 14px 20px; margin-top: auto; width: 100%; }
@media (min-width: 720px) { .match-cards { flex-direction: row; } .match-cards .match { flex: 1; } }

.reversal {
  display: flex; gap: 12px; align-items: flex-start;
  background: #f3fafb; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-top: 20px; font-size: 14.5px; color: var(--ink-soft);
}
.reversal svg { width: 22px; height: 22px; color: var(--teal); flex: 0 0 auto; margin-top: 1px; }
.reversal strong { color: var(--ink); }
.result-foot { text-align: center; margin-top: 20px; font-size: 15px; }
.result-foot a { font-weight: 700; }
.disclaimer {
  font-size: 12px; color: var(--ink-soft); margin-top: 26px;
  padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.5;
  max-width: none;
}

/* Alle-producten: horizontale slider op mobiel, raster op desktop (feedback 13-08-2026: geen slider meer op desktop). */
.product-grid {
  display: flex; gap: 16px; margin-top: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; contain: paint;
  padding-bottom: 6px; scrollbar-width: none;
}
.product-grid::-webkit-scrollbar { display: none; }
/* Bewust breder dan 320px op mobiel: bij smallere kaarten passen er zoveel naast elkaar
   dat de restafstand kleiner is dan één kaartbreedte, waardoor de middelste bolletjes
   allemaal op dezelfde (maximale) scrollpositie uitkomen en dus niks lijken te doen. */
.product-grid > * { flex: 0 0 min(70%, 380px); scroll-snap-align: start; scroll-snap-stop: always; }
.product-grid > *:last-child { scroll-snap-align: end; }
@media (min-width: 900px) {
  .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; contain: none; }
}
.product-foot { text-align: center; margin-top: 26px; font-size: 15.5px; max-width: none; }
.product-foot a { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--maxw-text); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 17px; font-weight: 700; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .18s; margin-right: 4px;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq .faq-a { padding-bottom: 18px; color: var(--ink-soft); font-size: 15.5px; }

/* Afbakening (9b) */
.honest {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  max-width: var(--maxw-text); margin-top: 34px;
}
.honest h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.honest p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- Slot + footer ---------- */
.sec--deep h2 { color: #fff; }
.sec--deep p { color: rgba(255,255,255,.88); }
.slot-inner { max-width: var(--maxw-text); margin-inline: auto; text-align: center; }
.slot-inner .btn { margin-top: 24px; }

.siteFooter { background: var(--surface); border-top: 1px solid var(--line); padding: 28px 0 88px; }
.siteFooter .wrap { max-width: var(--maxw-page); margin: 0 auto; padding-inline: 20px; }
.siteFooter p { font-size: 12px; color: var(--ink-soft); max-width: none; }

/* Sticky CTA-balk verwijderd op verzoek van Sterre (feedbackronde 11-08). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .fade-in { animation: none; }
}