:root {
  /* colour */
  --color-page: #ffffff;
  --color-surface: #f5f8f4;
  --color-surface-2: #eef3ed;
  --color-ink: #0b100c;
  --color-ink-2: #3d453f;
  --color-ink-3: #6f7873;
  --color-line: #e2e8e1;
  --color-line-strong: #cfd8cd;
  --color-accent: #5ad84a;
  --r-4: 3px;
  --fs-17: 17px;
  --color-warn: #c8442e;
  --color-warn-wash: #fdf0ed;
  --color-accent-deep: #2f9b21;
  --color-accent-veil: #f4fdf2;
  --color-warn-wash: #fdeeea;
  --color-accent-shadow: rgba(47, 155, 33, 0.22);
  --color-accent-wash: #edfbea;
  --color-accent-ink: #1c6613;
  --color-accent-ink-2: #2a8f1e;
  --color-on-accent-soft: #e2f6de;
  --color-on-accent-veil: rgba(255, 255, 255, 0.12);
  --color-on-accent-line: rgba(255, 255, 255, 0.22);
  --shadow-accent: 0 28px 56px -28px rgba(28, 102, 19, 0.55);
  --color-dark: #0b100c;
  --color-dark-2: #171d18;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #a9b3ac;
  --color-star: #f2b01e;
  --color-shadow: rgba(11, 16, 12, 0.08);
  --color-shadow-hard: rgba(11, 16, 12, 0.55);
  --color-shadow-soft: rgba(11, 16, 12, 0.04);
  --color-frame: #dfe5de;
  --color-slot: #f0f3ef;
  --color-slot-stripe: #e2e8e1;

  /* type */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", "Helvetica", sans-serif;
  --font-body: "Plus Jakarta Sans", "Helvetica Neue", "Helvetica", sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;
  --font-head: "Plus Jakarta Sans", "Helvetica Neue", "Helvetica", sans-serif;

  /* Koppen groeien mee met het venster in plaats van te springen op een
     breekpunt. Zo staat er op een laptop van 1024px geen kop van 68px in een
     smalle kolom, en op 375px geen kop die over zes regels valt.
     Het eerste getal geldt op 375px, het laatste vanaf ongeveer 1400px. */
  --type-display-1: clamp(36px, 1.5rem + 3.2vw, 66px);
  --type-display-2: clamp(28px, 1.25rem + 2.1vw, 46px);
  --type-heading-2: clamp(22px, 1.15rem + 1.1vw, 32px);
  --type-heading-3: clamp(21px, 1.125rem + 0.8vw, 28px);
  --type-heading-4: clamp(17px, 1rem + 0.3vw, 20px);
  --type-lead: clamp(17px, 0.97rem + 0.4vw, 21px);
  --type-body: clamp(16px, 0.96rem + 0.16vw, 17.5px);
  --type-body-soft: clamp(15px, 0.9rem + 0.18vw, 16.5px);
  --type-faq: clamp(18px, 1rem + 0.7vw, 24px);
  --type-micro: clamp(13px, 0.79rem + 0.1vw, 14px);
  --type-hero: clamp(34px, 1.4rem + 3.4vw, 68px);
  --lh-display: 1.1;
  --lh-display-2: 1.16;
  --lh-heading: 1.25;
  --lh-lead: 1.55;
  --fs-11: 11px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-68: 68px;
  --fs-28: 28px;
  --fs-84: 84px;
  --fs-104: 104px;
  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-normal: 1.5;
  --lh-loose: 1.62;
  --ls-tight: -0.035em;
  --ls-snug: -0.015em;
  --ls-wide: 0.12em;
  --ls-hair: -0.045em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 700;

  /* space */
  --sp-0: 0px;
  --sp-2: 2px;
  --sp-1: 1px;
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-120: 120px;
  --sp-52: 52px;
  --sp-sec: 136px;
  --sp-sec-m: 72px;
  --sp-hero-m: 64px;
  --shadow-btn: 0 1px 2px rgba(11, 16, 12, 0.08), 0 6px 16px -6px var(--color-accent);
  --shadow-lift: 0 24px 48px -24px rgba(11, 16, 12, 0.22);
  --shadow-shot: 0 20px 40px -24px rgba(11, 16, 12, 0.18);
  --type-display-1-m: clamp(34px, 9.4vw, 42px);
  --type-display-2-m: clamp(27px, 7.4vw, 32px);

  /* geometry */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --r-6: 6px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-20: 20px;
  /* Radius loopt niet verder dan 20px. De namen r-24 en r-28 blijven bestaan
     voor bestaande regels, maar geven allebei 20px. */
  --r-24: 24px;
  --r-28: 24px;
  --r-pill: 999px;
  --wrap-max: 1200px;
  --wrap-wide: 1320px;
  --wrap-narrow: 760px;
  --measure: 62ch;
  --w-status: 420px;
  --w-rank-name: 140px;
  --h-rot: 1.06em;
  --h-map: 560px;
  --h-map-mob: 420px;
  --sp-1: 1px;
  --h-hero-band: 720px;
  --h-thumb: 64px;
  --h-chart: 260px;
  --h-chart-mob: 200px;
  --h-demo: 640px;
  --h-demo-mob: 720px;
  --w-demo-phone: 400px;
  --w-plan: 280px;
  --w-lane: 120px;
  --w-when: 64px;
  --w-shot-native: 838px;
  --h-photo-band: 400px;
  --h-hero: 660px;
  --h-photo-band-mob: 320px;
  --measure-lead: 48ch;
  --size-logo: 30px;
  --size-logo-sm: 24px;
  --size-dot: 7px;
  --size-avatar: 44px;
  --size-avatar-lg: 96px;
  --size-icon: 22px;
  --size-tap: 48px;
  --h-hero-photo: 460px;
  --h-photo-wide: 320px;
  --h-photo-tall: 420px;
  --h-tile: 240px;
  --h-bar: 120px;
  --h-embed: 640px;
  --h-map: 520px;
  --h-cal: 620px;
  --h-tile-row: 260px;
  --h-tile-photo: 380px;
  --h-hero-photo-min: 320px;
  --h-hero-grid: 430px;
  --w-phone-shot: 340px;
  --w-ui-shot: 1031px;
  --w-ui-min: 760px;
  --h-panel-tall: 420px;
  --h-mosaic-photo: 300px;
  --h-mosaic-photo-mob: 240px;
  --w-phone-inline: 280px;
  --h-tile-shot: 220px;
  --h-tile-shot-mob: 180px;
  --h-mtile-photo: 380px;
  --h-mtile-photo-mob: 260px;
  --h-mtile-overlay: 68px;
  --h-artikel: 260px;
  --h-artikel-mob: 200px;
  --h-mosaic: 520px;
  --h-tile-a: 300px;
  --h-tile-b: 400px;
  --h-tile-c: 240px;
  --h-tile-d: 350px;
  --h-tile-e: 440px;
  --h-claim: 150px;
  --h-tile-even: 430px;
  --w-hero-copy: 960px;
  --w-hero-lead: 520px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --sp-72: 72px;
  --color-accent-line: #cdeec6;
  --h-tile-row-mob: 200px;
  --h-whatis-photo: 460px;
  --w-whatis-avatar: 36px;
  --w-tile-min: 240px;
  --w-cta: 260px;
  --w-overlay: 180px;
  --h-cal-mob: 560px;
  --w-hero-cards: 380px;
  --h-type: 72px;
  --pad-section: clamp(56px, 2rem + 4vw, 104px);
  --pad-section-tight: clamp(40px, 1.5rem + 2.4vw, 72px);
  --pad-wrap: clamp(20px, 0.5rem + 3.2vw, 40px);
  /* mobiele typeschaal: kleiner dan desktop, zelfde rangorde */
  --type-m-hero: 34px;
  --type-m-1: 32px;
  --type-m-2: 25px;
  --type-m-3: 19px;
  --pad-m-section: 44px;
  --shadow-card: 0 var(--sp-2) var(--sp-16) var(--color-shadow-soft);
  --shadow-float: 0 var(--sp-10) var(--sp-32) var(--color-shadow);
}

/* ---------- reset ---------- */
.page * { box-sizing: border-box; }
.page {
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.page a { text-decoration: none; }
.page p a, .page li a, .page .body a, .page .body-soft a, .page .lead a, .page .micro a { color: var(--color-accent-deep); }
.page p a:hover, .page li a:hover, .page .body a:hover, .page .body-soft a:hover, .page .lead a:hover, .page .micro a:hover { color: var(--color-ink); }
.page p, .page h1, .page h2, .page h3, .page h4, .page ul, .page li, .page figure { margin: var(--sp-0); padding: var(--sp-0); }
.page ul { list-style: none; }
.page img { display: block; max-width: 100%; }

/* ---------- shell ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-wrap);
  padding-right: var(--pad-wrap);
  display: flex;
  flex-direction: column;
}
.section {
  display: flex;
  flex-direction: column;
  padding-top: var(--pad-section);
  padding-bottom: var(--pad-section);
}
.section-tight { padding-top: var(--pad-section-tight); padding-bottom: var(--pad-section-tight); }
.section-surface { background: var(--color-surface); }
.section-dark { background: var(--color-dark); color: var(--color-on-dark); }
.section-dark .body-soft, .section-dark .lead { color: var(--color-on-dark-soft); }
.main { display: flex; flex-direction: column; flex: 1 1 auto; }

.stack-8 { display: flex; flex-direction: column; gap: var(--sp-8); }
.stack-12 { display: flex; flex-direction: column; gap: var(--sp-12); }
.stack-16 { display: flex; flex-direction: column; gap: var(--sp-16); }
.stack-24 { display: flex; flex-direction: column; gap: var(--sp-24); }
.stack-40 { display: flex; flex-direction: column; gap: var(--sp-40); }
.stack-64 { display: flex; flex-direction: column; gap: var(--sp-64); }
.row-12 { display: flex; flex-direction: row; gap: var(--sp-12); flex-wrap: wrap; }
.row-24 { display: flex; flex-direction: row; gap: var(--sp-24); flex-wrap: wrap; }
.row-40 { display: flex; flex-direction: row; gap: var(--sp-40); }
.row-center { align-items: center; }
.row-between { justify-content: space-between; }
.grow { flex: 1 1 var(--sp-0); min-width: var(--sp-0); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-deep);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.section-dark .eyebrow { color: var(--color-accent); }
.display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}
.heading-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-heading-2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}
.heading-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--type-heading-3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}
.heading-4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--type-heading-4);
  line-height: var(--lh-heading);
}
.accent-line { color: var(--color-accent-deep); }
.lead {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
  max-width: var(--measure-lead);
  text-wrap: pretty;
}
.body { font-size: var(--type-body); line-height: var(--lh-loose); color: var(--color-ink-2); text-wrap: pretty; }
.body-soft { font-size: var(--type-body-soft); line-height: var(--lh-loose); color: var(--color-ink-3); text-wrap: pretty; }
.micro { font-size: var(--type-micro); color: var(--color-ink-3); letter-spacing: var(--ls-snug); }
.mono { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-snug); }
.strong { font-weight: var(--fw-bold); color: var(--color-ink); }

/* ---------- buttons ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap);
  padding-left: var(--sp-28);
  padding-right: var(--sp-28);
  border-radius: var(--r-10);
  background: var(--color-accent);
  color: var(--color-ink);
  border: var(--bw-1) solid var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  letter-spacing: var(--sp-0);
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.button-primary:hover { background: var(--color-accent-deep); color: var(--color-on-dark); border-color: var(--color-accent-deep); }
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap);
  padding-left: var(--sp-24);
  padding-right: var(--sp-24);
  border-radius: var(--r-10);
  background: var(--color-page);
  color: var(--color-ink);
  border: var(--bw-1) solid var(--color-line-strong);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.button-ghost:hover { border-color: var(--color-ink); color: var(--color-ink); }
.section-dark .button-ghost { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: var(--sp-0);
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  border-bottom: var(--bw-1) solid var(--color-line);
  z-index: 20;
}
.header-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-16) var(--sp-40);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-32);
}
.brand-logo { height: var(--size-logo); width: auto; align-self: flex-start; flex: 0 0 auto; }
.nav { display: flex; flex-direction: row; align-items: center; gap: var(--sp-28); }
.nav-link {
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  color: var(--color-ink-2);
  display: flex;
  align-items: center;
  min-height: var(--size-tap);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link.is-active { color: var(--color-ink); font-weight: var(--fw-bold); }
.nav-burger {
  display: none;
  width: var(--size-tap);
  height: var(--size-tap);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-10);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--color-page);
  padding: var(--sp-0);
  cursor: pointer;
}
.burger-bar { width: var(--sp-20); height: var(--bw-2); background: var(--color-ink); border-radius: var(--r-pill); }

/* ---------- footer ---------- */
.site-footer { background: var(--color-dark); color: var(--color-on-dark); display: flex; flex-direction: column; }
.footer-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-80) var(--sp-40) var(--sp-32) var(--sp-40);
  display: flex;
  flex-direction: row;
  gap: var(--sp-64);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1 1 var(--sp-0); }
.footer-cols { display: flex; flex-direction: row; gap: var(--sp-64); }
.footer-col { display: flex; flex-direction: column; gap: var(--sp-12); }
.footer-heading {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}
.footer-link { font-size: var(--fs-15); color: var(--color-on-dark); }
.footer-link:hover { color: var(--color-accent); }
.footer-bottom {
  width: 100%;
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-24) var(--sp-40) var(--sp-40) var(--sp-40);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--sp-16);
  border-top: var(--bw-1) solid var(--color-dark-2);
}
.footer-note { font-size: var(--fs-12); color: var(--color-on-dark-soft); }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: row; gap: var(--sp-64); align-items: center; padding-top: var(--sp-80); padding-bottom: var(--sp-96); }
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-24); flex: 1 1 var(--sp-0); }
.hero-visual { display: flex; flex-direction: column; gap: var(--sp-12); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.hero-photo { width: 100%; height: var(--h-hero-photo); object-fit: cover; border-radius: var(--r-20); }
.proof-row { display: flex; flex-direction: row; gap: var(--sp-12); }
.trust-row { display: flex; flex-direction: row; gap: var(--sp-20); flex-wrap: wrap; align-items: center; }
.trust-item { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); font-size: var(--fs-13); color: var(--color-ink-3); }
.dot {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  flex: 0 0 auto;
}

.platform-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-10); }
.platform-strip { height: var(--sp-32); width: auto; }
.platform-label { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.section-dark .platform-label { color: var(--color-on-dark-soft); }
.section-dark .platform-name { display: inline-flex; align-items: center; gap: var(--sp-8); font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--color-on-dark); }

.vp-mobile .platform-strip { height: var(--sp-24); }

/* ---------- cards ---------- */
.card-float {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  box-shadow: var(--shadow-float);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.card-panel {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  box-shadow: var(--shadow-card);
}
.card-service {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.card-service:hover { border-color: var(--color-accent); }
.card-num {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-black);
  color: var(--color-ink);
  background: var(--color-accent);
  border-radius: var(--r-pill);
  width: var(--sp-28);
  height: var(--sp-28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.card-quote {
  background: var(--color-surface);
  border-radius: var(--r-20);
  padding: var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.quote-text { font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.quote-person { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); }
.avatar { width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--r-pill); object-fit: cover; background: var(--color-surface-2); }

/* ---------- flow ---------- */
.flow-band { background: var(--color-dark); color: var(--color-on-dark); display: flex; flex-direction: column; }
.flow-band .body-soft, .flow-band .lead { color: var(--color-on-dark-soft); }
.flow-band .eyebrow { color: var(--color-accent); }
.flow { display: flex; flex-direction: row; align-items: stretch; gap: var(--sp-12); }
.flow-step {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  border: var(--bw-1) solid var(--color-dark-2);
  border-radius: var(--r-14);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  background: var(--color-dark-2);
}
.flow-step-label { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--color-on-dark); }
.flow-step-num { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--color-accent); }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: var(--fs-20); flex: 0 0 auto; }
.flow-loop { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.loop-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  border: var(--bw-1) solid var(--color-dark-2);
  border-radius: var(--r-pill);
  padding: var(--sp-10) var(--sp-16);
  font-size: var(--fs-13);
  color: var(--color-on-dark-soft);
}

/* ---------- stats & results ---------- */
.stat-row { display: flex; flex-direction: row; gap: var(--sp-24); }
.stat {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-28);
  border-radius: var(--r-20);
  background: var(--color-accent-wash);
}
.stat-value { font-family: var(--font-display); font-size: var(--fs-56); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.stat-label { font-size: var(--fs-14); color: var(--color-ink-2); line-height: var(--lh-normal); }
.card-result {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}
.result-compare { display: flex; flex-direction: row; align-items: center; gap: var(--sp-16); }
.result-side { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--sp-0); }
.result-side-label { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.result-number { font-family: var(--font-display); font-size: var(--fs-36); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.result-number.is-now { color: var(--color-accent-deep); }
.result-meta { font-size: var(--fs-13); color: var(--color-ink-3); }
.result-foot { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); border-top: var(--bw-1) solid var(--color-line); padding-top: var(--sp-16); }
.stars { display: flex; flex-direction: row; gap: var(--sp-2); color: var(--color-star); font-size: var(--fs-13); }

/* ---------- review / product blocks ---------- */
.review-card {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}
.review-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  border-radius: var(--r-pill);
  padding: var(--sp-6) var(--sp-12);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}
.tag-quiet { background: var(--color-surface-2); color: var(--color-ink-3); }
.reply-block {
  border-left: var(--bw-3) solid var(--color-accent);
  padding-left: var(--sp-14);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ---------- dashboard mock ---------- */
.dash {
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-bar { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); padding: var(--sp-14) var(--sp-20); border-bottom: var(--bw-1) solid var(--color-line); background: var(--color-surface); }
.dash-body { display: flex; flex-direction: row; gap: var(--sp-16); padding: var(--sp-20); }
.dash-col { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.dash-tile {
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}
.dash-tile-title { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.dash-metric { font-family: var(--font-display); font-size: var(--fs-30); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.chart { display: flex; flex-direction: row; align-items: flex-end; gap: var(--sp-6); height: var(--h-bar); }
.chart-bar { flex: 1 1 var(--sp-0); background: var(--color-surface-2); border-radius: var(--r-6); }
.chart-bar.is-up { background: var(--color-accent); }
.meter { display: flex; flex-direction: column; gap: var(--sp-6); }
.meter-track { height: var(--sp-8); border-radius: var(--r-pill); background: var(--color-surface-2); display: flex; }
.meter-fill { height: var(--sp-8); border-radius: var(--r-pill); background: var(--color-accent); }
.line-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); padding-top: var(--sp-10); padding-bottom: var(--sp-10); border-bottom: var(--bw-1) solid var(--color-line); }
.line-item.is-last { border-bottom-width: var(--sp-0); }

/* ---------- product screenshots ---------- */
.shot {
  width: 100%;
  display: block;
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: var(--shadow-float);
  background: var(--color-page);
}
.shot-crop { height: var(--h-photo-tall); object-fit: cover; object-position: left top; }
.shot-crop-short { height: var(--h-photo-wide); object-fit: cover; object-position: left top; }
.shot-caption { display: flex; flex-direction: column; gap: var(--sp-6); }
.vp-mobile .shot-crop, .vp-mobile .shot-crop-short { height: var(--h-tile); }

/* ---------- plans ---------- */
.card-plan {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.card-plan.is-featured { border-color: var(--color-accent); border-width: var(--bw-2); box-shadow: var(--shadow-card); }
.plan-price { font-family: var(--font-display); font-size: var(--fs-44); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.plan-per { font-size: var(--fs-13); color: var(--color-ink-3); }
.vp-tablet .card-plan { flex-basis: 45%; }
.vp-mobile .card-plan { padding: var(--sp-20); }

/* ---------- lists ---------- */
.bullet-list { display: flex; flex-direction: column; gap: var(--sp-12); }
.bullet-item { display: flex; flex-direction: row; gap: var(--sp-12); align-items: flex-start; font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--color-ink-2); }
.bullet-mark { width: var(--size-dot); height: var(--size-dot); border-radius: var(--r-pill); background: var(--color-accent); flex: 0 0 auto; margin-top: var(--sp-10); }
.check-mark {
  width: var(--sp-20);
  height: var(--sp-20);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: var(--sp-4);
}

/* ---------- gallery ---------- */
.gallery-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-24); }
.gallery-item { display: flex; flex-direction: column; gap: var(--sp-12); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.gallery-item.is-wide { flex: 2 1 var(--sp-0); }
.gallery-photo { width: 100%; height: var(--h-tile); object-fit: cover; border-radius: var(--r-14); }
.gallery-photo.is-tall { height: var(--h-photo-tall); }
.filter-row { display: flex; flex-direction: row; gap: var(--sp-8); flex-wrap: wrap; }
.chip {
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  padding-left: var(--sp-20);
  padding-right: var(--sp-20);
  border-radius: var(--r-pill);
  border: var(--bw-1) solid var(--color-line-strong);
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--color-ink-2);
  background: var(--color-page);
}
.chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
.chip.is-active { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.chip.is-active:hover { color: var(--color-on-dark); }
a.card-service { color: var(--color-ink); }
a.eco-card { color: var(--color-ink); }
a.eco-card:hover { color: var(--color-ink); border-color: var(--color-accent); }
a.demo-check, a.grow-step, a.rank-row, a.search-col { color: var(--color-ink); }
a.card-service:hover { color: var(--color-ink); border-color: var(--color-accent); }

/* image placeholder */
.photo-slot {
  width: 100%;
  height: var(--h-tile);
  border-radius: var(--r-14);
  border: var(--bw-1) solid var(--color-line);
  background-color: var(--color-slot);
  background-image: repeating-linear-gradient(135deg, var(--color-slot) var(--sp-0), var(--color-slot) var(--sp-8), var(--color-slot-stripe) var(--sp-8), var(--color-slot-stripe) var(--sp-10));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16);
}
.photo-slot.is-tall { height: var(--h-photo-tall); }
.photo-slot.is-wide { height: var(--h-photo-wide); }
.photo-slot.is-hero { height: var(--h-hero-photo); border-radius: var(--r-20); }
.slot-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--color-ink-3);
  background: var(--color-page);
  border-radius: var(--r-pill);
  padding: var(--sp-6) var(--sp-12);
  text-align: center;
}

/* ---------- contact form mockup ---------- */
.form-mock {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  box-shadow: var(--shadow-card);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.mock-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  border: var(--bw-1) dashed var(--color-line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-6) var(--sp-12);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--color-ink-3);
}
.field-row { display: flex; flex-direction: row; gap: var(--sp-16); }
.field { display: flex; flex-direction: column; gap: var(--sp-8); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.field-label { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-ink); }
.field-input {
  min-height: var(--size-tap);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-10);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-15);
  color: var(--color-ink-3);
  display: flex;
  align-items: center;
  background: var(--color-page);
}
.field-input.is-area { min-height: var(--h-photo-wide); align-items: flex-start; }
.contact-aside { display: flex; flex-direction: column; gap: var(--sp-24); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.contact-line { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- canvas frames ---------- */
.canvas {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-96);
  padding: var(--sp-64);
  font-family: var(--font-body);
  color: var(--color-ink);
}
.canvas-head { display: flex; flex-direction: column; gap: var(--sp-12); }
.canvas-title { font-family: var(--font-display); font-size: var(--fs-36); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.page-block { display: flex; flex-direction: column; gap: var(--sp-24); }
.page-block-title { font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-black); letter-spacing: var(--ls-snug); }
.frame-row { display: flex; flex-direction: row; gap: var(--sp-40); align-items: flex-start; }
.frame-col { display: flex; flex-direction: column; gap: var(--sp-12); }
.frame-label { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); }
.frame {
  border: var(--bw-1) solid var(--color-frame);
  border-radius: var(--r-20);
  background: var(--color-page);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.frame-desktop { width: 1440px; }
.frame-tablet { width: 834px; }
.frame-mobile { width: 390px; }

/* ---------- tablet ---------- */
.vp-tablet .wrap, .vp-tablet .header-inner, .vp-tablet .footer-inner, .vp-tablet .footer-bottom { padding-left: var(--sp-32); padding-right: var(--sp-32); }
.vp-tablet .hero { flex-direction: column; align-items: stretch; gap: var(--sp-40); padding-top: var(--sp-48); padding-bottom: var(--sp-64); }
.vp-tablet .hero-photo { height: var(--h-photo-wide); }
.vp-tablet .nav { display: none; }
.vp-tablet .nav-burger { display: flex; }
.vp-tablet .row-40 { flex-wrap: wrap; }
.vp-tablet .flow { flex-wrap: wrap; }
.vp-tablet .flow-step { flex-basis: 40%; }
.vp-tablet .flow-arrow { display: none; }
.vp-tablet .stat-row { flex-wrap: wrap; }
.vp-tablet .stat { flex-basis: 45%; }
.vp-tablet .card-result { flex-basis: 45%; }
.vp-tablet .card-service { flex-basis: 45%; }
.vp-tablet .dash-body { flex-direction: column; }
.vp-tablet .footer-inner { flex-direction: column; gap: var(--sp-40); }
.vp-tablet .stat-value { font-size: var(--fs-44); }

/* ---------- mobile ---------- */
.vp-mobile .wrap, .vp-mobile .header-inner, .vp-mobile .footer-inner, .vp-mobile .footer-bottom { padding-left: var(--sp-20); padding-right: var(--sp-20); }
.vp-mobile {
  --type-display-1: var(--fs-36);
  --type-display-2: var(--fs-28);
  --type-heading-2: var(--fs-22);
  --type-heading-3: var(--fs-20);
  --type-heading-4: var(--fs-17);
  --type-lead: var(--fs-17);
  --type-body: var(--fs-16);
  --type-body-soft: var(--fs-15);
  --type-faq: var(--fs-18);
  --type-micro: var(--fs-13);
  --type-hero: var(--fs-36);
  --pad-section: var(--sp-56);
  --pad-section-tight: var(--sp-40);
  --pad-wrap: var(--sp-20);
}
.vp-tablet {
  --type-display-1: var(--fs-48, 48px);
  --type-display-2: var(--fs-36);
  --type-heading-2: var(--fs-26);
  --type-heading-3: var(--fs-24);
  --type-lead: var(--fs-18);
  --type-hero: var(--fs-56);
  --pad-section: var(--sp-72);
  --pad-wrap: var(--sp-32);
}
.vp-mobile .quote-text { font-size: var(--fs-18); }
.vp-mobile .nav { display: none; }
.vp-mobile .nav-burger { display: flex; }
.vp-mobile .header-cta { display: none; }
.vp-mobile .hero { flex-direction: column; align-items: stretch; gap: var(--sp-28); padding-top: var(--sp-32); padding-bottom: var(--sp-40); }
.vp-mobile .hero-photo { height: var(--h-tile); }
.vp-mobile .hero-copy { gap: var(--sp-16); }
.vp-mobile .button-primary, .vp-mobile .button-ghost { width: 100%; }
.vp-mobile .row-12, .vp-mobile .row-24, .vp-mobile .row-40 { flex-direction: column; gap: var(--sp-16); }
.vp-mobile .row-12.keep-row { flex-direction: row; }
.vp-mobile .row-24.keep-row { flex-direction: row; flex-wrap: wrap; }
.vp-mobile .row-24.keep-row > * { flex: 1 1 calc(50% - var(--sp-8)); }
.vp-mobile .proof-row { flex-direction: column; }
.vp-mobile .flow { flex-direction: column; }
.vp-mobile .flow-arrow { transform: rotate(90deg); }
.vp-mobile .stat-row { flex-direction: column; }
.vp-mobile .stat { padding: var(--sp-20); }
.vp-mobile .stat-value { font-size: var(--fs-44); }
.vp-mobile .card-panel, .vp-mobile .card-service, .vp-mobile .card-quote { padding: var(--sp-20); }
.vp-mobile .dash-body { flex-direction: column; }
.vp-mobile .result-compare { gap: var(--sp-10); }
.vp-mobile .result-number { font-size: var(--fs-30); }
.vp-mobile .gallery-grid { flex-direction: column; }
.vp-mobile .gallery-item { flex-basis: auto; }
.vp-mobile .field-row { flex-direction: column; }
.vp-mobile .form-mock { padding: var(--sp-20); }
.vp-mobile .footer-inner { flex-direction: column; gap: var(--sp-32); padding-top: var(--sp-48); }
.vp-mobile .footer-cols { flex-direction: column; gap: var(--sp-28); }
.vp-mobile .footer-bottom { flex-direction: column; }
.vp-mobile .trust-row { flex-direction: column; align-items: flex-start; gap: var(--sp-10); }
.vp-mobile .field-input.is-area { min-height: var(--h-tile); }

/* ---------- pill/label integrity ---------- */
.nav-link, .chip, .button-primary, .button-ghost, .footer-link, .tag, .tag-quiet { white-space: nowrap; }
.tag, .tag-quiet { flex: 0 0 auto; }
.chip { flex: 0 0 auto; }
.shot-plain { border-width: var(--sp-0); box-shadow: none; background: transparent; border-radius: var(--sp-0); }
.widget-mount { display: flex; flex-direction: column; width: 100%; min-height: var(--h-tile); }

/* ---------- rust ---------- */
.section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.section-tight { padding-top: var(--pad-section-tight); padding-bottom: var(--pad-section-tight); }
.card-service {
  background: transparent;
  border-width: var(--sp-0);
  border-top-width: var(--bw-1);
  border-top-style: solid;
  border-top-color: var(--color-line-strong);
  border-radius: var(--sp-0);
  padding: var(--sp-24) var(--sp-0) var(--sp-0) var(--sp-0);
}
.card-service:hover, a.card-service:hover { border-top-color: var(--color-accent); }
.vp-mobile .card-service { padding: var(--sp-20) var(--sp-0) var(--sp-0) var(--sp-0); }
.site-embed { width: 100%; height: var(--h-embed); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.vp-mobile .site-embed { height: var(--h-photo-tall); }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}
.dot, .bullet-mark { animation: dot-pulse 1.8s ease-in-out infinite; }

/* ---------- beweging ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--sp-20)); }
  to { opacity: 1; transform: translateY(var(--sp-0)); }
}
/* Verbergen mag alleen als het script draait en de klasse js-motion zet.
   Zonder script is alles gewoon zichtbaar: nooit een lege pagina door JS. */
.js-motion .reveal { opacity: 0; }
.js-motion .reveal.is-in { animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; }
  .dot, .bullet-mark, .type-caret { animation: none; }
}

.meter-fill { transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* rankinglijst */
.rank-list { display: flex; flex-direction: column; }
.rank-row {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-12);
  padding-top: var(--sp-12); padding-bottom: var(--sp-12);
  border-bottom: var(--bw-1) solid var(--color-line);
  transition: background 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--r-10);
}
.rank-row.is-last { border-bottom-width: var(--sp-0); }
.rank-row.is-you { background: var(--color-accent-wash); }
.rank-row.is-moving { transform: translateY(calc(var(--sp-2) * -1)); }
.rank-pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--sp-32); height: var(--sp-32);
  border-radius: var(--r-10); background: var(--color-surface-2);
  font-family: var(--font-mono); font-size: var(--fs-14); color: var(--color-ink-2);
  flex: 0 0 auto;
}
.rank-row.is-you .rank-pos { background: var(--color-accent); color: var(--color-on-dark); }
.rank-name { flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.rank-move { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--color-accent-deep); }

/* live typen */
.type-caret {
  display: inline-block; width: var(--bw-2); height: var(--fs-16);
  background: var(--color-accent); vertical-align: text-bottom;
  animation: dot-pulse 1s steps(2, end) infinite;
}
.type-line { min-height: var(--h-type, 72px); }
.live-badge {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
}

/* ---------- typografische opfrissing ----------
   Eén schaal voor de hele site: de maten komen uit de --type-* tokens
   bovenaan dit bestand en groeien mee met het venster. Geen losse
   px-waarden per breekpunt meer; die vochten met elkaar. */
.display-1 {
  font-size: var(--type-display-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  max-width: 22ch;
  text-wrap: balance;
}
.display-2 {
  font-size: var(--type-display-2);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-display-2);
  max-width: 26ch;
  text-wrap: balance;
}
.display-2.is-tight { max-width: 15ch; }
.lead {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-lead);
  color: var(--color-ink-2);
  text-wrap: pretty;
}
.body, .body-soft { max-width: var(--measure); text-wrap: pretty; }
.heading-3 { letter-spacing: var(--ls-snug); }

/* eyebrow rustiger: geen pil, alleen een regel */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-0);
  background: transparent;
  border-width: var(--sp-0);
  color: var(--color-ink-3);
}

/* secties krijgen een haarlijn in plaats van een vlak */
.section { border-top: var(--bw-1) solid var(--color-line); }
.section-tight { border-top-width: var(--sp-0); }
.section-surface { border-top-color: var(--color-line); }
.section-dark { border-top-width: var(--sp-0); }

/* fototegels worden typografische tegels */
.photo-slot {
  background: var(--color-surface);
  border: var(--bw-1) solid var(--color-line);
  border-left: var(--bw-3) solid var(--color-accent);
  border-radius: var(--r-14);
  align-items: flex-end;
  justify-content: flex-start;
  height: var(--h-photo-wide);
}
.photo-slot.is-tall { height: var(--h-photo-tall); }
.slot-label {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-ink-2);
  letter-spacing: var(--ls-snug);
  text-transform: none;
  max-width: var(--measure-lead);
}

/* De schaal komt uit de tokens bovenaan het mobielblok. */
.vp-mobile .display-1, .vp-mobile .display-2 { letter-spacing: var(--ls-tight); }

/* FAQ: vraag-en-antwoord blok dat AI kan lezen */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  display: flex; flex-direction: column; gap: var(--sp-10);
  padding-top: var(--sp-32); padding-bottom: var(--sp-32);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.faq-item.is-last { border-bottom-width: var(--sp-0); }
.faq-q {
  font-family: var(--font-display);
  font-size: var(--type-faq);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  max-width: var(--measure);
}
.faq-a { color: var(--color-ink-2); max-width: var(--measure); text-wrap: pretty; }

/* ---------- flexkolommen mogen krimpen ---------- */
.hero-copy, .hero-visual, .grow, .row-40 > *, .row-24 > *, .row-12 > * { min-width: var(--sp-0); }
.display-1, .display-2, .faq-q, .heading-3 { overflow-wrap: break-word; }
.hero-visual { flex: 1 1 var(--sp-0); }

/* ---------- hero: kop past in de kolom ---------- */
/* Geen vaste px-maat op .hero .display-1: die zou de breekpuntregels overrulen.
   De maat schaalt mee via --fs-display-1. */
.hero-copy { flex: 1.35 1 var(--sp-0); }



/* ---------- labels: machineleesbaar, ook op wit ---------- */
.eyebrow, .platform-label, .dash-tile-title, .footer-heading, .frame-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-12);
}
.eyebrow { color: var(--color-accent-deep); }

/* hero: één zachte groene lichtbron op wit.
   Home gebruikt <section class="hero">, de andere pagina's <section class="section-tight">.
   Geen .section-tight zonder section: dat is ook de wrapper binnen een flowband. */
section.hero, section.section-tight { background-image: none; }

/* ---------- agentstatus: het systeem dat draait ---------- */
.agent-status {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  width: 100%;
  max-width: var(--w-status);
  padding: var(--sp-16) var(--sp-20);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
}
.agent-status-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
}
.agent-status-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-2);
}
.agent-status-clock { margin-left: auto; color: var(--color-accent-deep); }
.agent-status-track {
  height: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--color-surface-2);
  display: flex;
  overflow: hidden;
}
.agent-status-fill {
  height: var(--sp-4);
  width: var(--sp-0);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  transition: width 0.6s linear;
}
.agent-status-step {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-ink);
  min-height: var(--sp-20);
}
.agent-status-done { color: var(--color-accent-deep); }

/* ---------- getallen die oplopen ---------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- optimaliseren: strook die één keer overtrekt ---------- */
@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.is-optimising {
  position: relative;
  overflow: hidden;
}
.sweep-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-accent-wash), transparent);
  animation: sweep 1.8s ease-in-out infinite;
}
.sweep-layer {
  display: flex;
  height: var(--sp-2);
  width: 100%;
  overflow: hidden;
}

/* ---------- ranking: het klimmen leesbaar maken ---------- */
.rank-row { transition: background 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.rank-move { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--color-accent-deep); font-weight: var(--fw-bold); }
.rank-row.is-you { background: var(--color-accent-wash); }
.rank-row.is-you .rank-pos { background: var(--color-accent); color: var(--color-ink); }

/* GEGENEREERD: mediaqueries */
/* Spiegelt de .vp-tablet en .vp-mobile regels hierboven, zodat de site in een
   echte browser hetzelfde doet als in het schermoverzicht. Pas de .vp-* regel aan
   en laat dit blok opnieuw genereren; niet los bijwerken. */

@media (min-width: 641px) and (max-width: 1024px) {
  .card-plan { flex-basis: 45%; }
  .wrap, .header-inner, .footer-inner, .footer-bottom { padding-left: var(--sp-32); padding-right: var(--sp-32); }
  .hero { flex-direction: column; align-items: stretch; gap: var(--sp-40); padding-top: var(--sp-48); padding-bottom: var(--sp-64); }
  .hero-photo { height: var(--h-photo-wide); }
  .nav { display: none; }
  .nav-burger { display: flex; }
  .row-40 { flex-wrap: wrap; }
  .flow { flex-wrap: wrap; }
  .flow-step { flex-basis: 40%; }
  .flow-arrow { display: none; }
  .stat-row { flex-wrap: wrap; }
  .stat { flex-basis: 45%; }
  .card-result { flex-basis: 45%; }
  .card-service { flex-basis: 45%; }
  .dash-body { flex-direction: column; }
  .footer-inner { flex-direction: column; gap: var(--sp-40); }
  .stat-value { font-size: var(--fs-44); }
}

@media (max-width: 640px) {
  .platform-strip { height: var(--sp-24); }
  .shot-crop, .shot-crop-short { height: var(--h-tile); }
  .card-plan { padding: var(--sp-20); }
  .wrap, .header-inner, .footer-inner, .footer-bottom { padding-left: var(--sp-20); padding-right: var(--sp-20); }
  .quote-text { font-size: var(--fs-18); }
  .nav { display: none; }
  .nav-burger { display: flex; }
  .header-cta { display: none; }
  .hero { flex-direction: column; align-items: stretch; gap: var(--sp-28); padding-top: var(--sp-32); padding-bottom: var(--sp-40); }
  .hero-photo { height: var(--h-tile); }
  .hero-copy { gap: var(--sp-16); }
  .button-primary, .button-ghost { width: 100%; }
  .row-12, .row-24, .row-40 { flex-direction: column; gap: var(--sp-16); }
  .row-12.keep-row { flex-direction: row; }
  .row-24.keep-row { flex-direction: row; flex-wrap: wrap; }
  .row-24.keep-row > * { flex: 1 1 calc(50% - var(--sp-8)); }
  .proof-row { flex-direction: column; }
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
  .stat-row { flex-direction: column; }
  .stat { padding: var(--sp-20); }
  .stat-value { font-size: var(--fs-44); }
  .card-panel, .card-service, .card-quote { padding: var(--sp-20); }
  .dash-body { flex-direction: column; }
  .result-compare { gap: var(--sp-10); }
  .result-number { font-size: var(--fs-30); }
  .gallery-grid { flex-direction: column; }
  .gallery-item { flex-basis: auto; }
  .field-row { flex-direction: column; }
  .form-mock { padding: var(--sp-20); }
  .footer-inner { flex-direction: column; gap: var(--sp-32); padding-top: var(--sp-48); }
  .footer-cols { flex-direction: column; gap: var(--sp-28); }
  .footer-bottom { flex-direction: column; }
  .trust-row { flex-direction: column; align-items: flex-start; gap: var(--sp-10); }
  .field-input.is-area { min-height: var(--h-tile); }
  .card-service { padding: var(--sp-20) var(--sp-0) var(--sp-0) var(--sp-0); }
  .site-embed { height: var(--h-photo-tall); }
}

/* ---------- mobiel: stappen op hun eigen hoogte ---------- */
/* flex: 1 1 0 in een kolom verdeelt de hoogte gelijk, waardoor korte stappen
   even hoog worden als de langste. Op mobiel dus meegroeien met de inhoud. */
.vp-mobile .flow-step { flex: 0 0 auto; }
.vp-mobile .flow-loop { flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
.vp-mobile .agent-status { max-width: 100%; }
.vp-mobile .faq-item { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }

@media (max-width: 640px) {
  .flow-step { flex: 0 0 auto; }
  .flow-loop { flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
  .agent-status { max-width: 100%; }
  .faq-item { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }
}

/* Formuliervelden: één regel houdt de vaste hoogte, zodat velden naast
   elkaar gelijk blijven als een placeholder wil afbreken. */
.field-input:not(.is-area) {
  height: var(--size-tap);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- zoekbalk-mockup ---------- */
.search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--size-tap);
  padding: var(--sp-12) var(--sp-16);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  background: var(--color-page);
  width: 100%;
}
.search-icon { font-size: var(--fs-16); color: var(--color-ink-3); flex: 0 0 auto; }
.search-query { font-size: var(--fs-16); color: var(--color-ink); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.search-source { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); flex: 0 0 auto; }

/* ---------- AI-antwoord ---------- */
.ai-answer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-24);
  background: var(--color-surface);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
}
.ai-answer-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
}
.ai-answer-body { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--color-ink); max-width: var(--measure); }
.ai-mark { font-weight: var(--fw-bold); color: var(--color-accent-deep); }
.cite-row { display: flex; flex-direction: row; gap: var(--sp-8); flex-wrap: wrap; }
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-10);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-2);
  background: var(--color-page);
}

/* ---------- Google-resultaat ---------- */
.serp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-20);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
}
.serp-url { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); }
.serp-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  color: var(--color-accent-deep);
}
.serp-snippet { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--color-ink-2); }
.serp-foot { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }

/* ---------- publicatielog ---------- */
.log-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-14);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.log-row.is-last { border-bottom-width: var(--sp-0); }
.log-time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); flex: 0 0 auto; min-width: var(--sp-56); }
.log-text { font-size: var(--fs-15); color: var(--color-ink-2); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }

.vp-mobile .ai-answer-body { font-size: var(--fs-16); }
.vp-mobile .search-source { display: none; }
@media (max-width: 640px) {
  .ai-answer-body { font-size: var(--fs-16); }
  .search-source { display: none; }
}

/* Zoekbalk: één regel, vaste hoogte. Anders groeit de pil tijdens het typen. */
.search-field { height: var(--size-tap); }
.search-query { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rankregel: in een smal paneel passen vier kolommen niet naast elkaar.
   De naam houdt een ondergrens en de meta zakt naar de volgende regel. */
.vp-tablet .rank-row, .vp-mobile .rank-row { flex-wrap: wrap; }
.vp-tablet .rank-name, .vp-mobile .rank-name { flex: 1 1 auto; min-width: var(--w-rank-name); }
@media (max-width: 1024px) {
  .rank-row { flex-wrap: wrap; }
  .rank-name { flex: 1 1 auto; min-width: var(--w-rank-name); }
}

/* Faselabel: meerdere woorden, dus geen rond badge van 28px zoals .card-num. */
.phase-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--r-6);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ---------- branche-rotator in de hero ---------- */
.rotator {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--h-rot);
  vertical-align: bottom;
  /* Breedte volgt het actieve woord; anders staat de kolom altijd op het
     langste woord en valt er een gat voor het woord erna. */
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rotator-item {
  display: block;
  /* Eigen breedte, los van de ouder: anders leest de meting 0 zodra de
     rotator zelf een vaste breedte krijgt. */
  width: max-content;
  height: var(--h-rot);
  line-height: var(--h-rot);
  color: var(--color-accent-deep);
  white-space: nowrap;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.rotator-track { display: flex; flex-direction: column; transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- bedrijfstype-kiezer (Oplossingen) ---------- */
.picker-grid { display: flex; flex-direction: row; gap: var(--sp-20); }
.picker-grid .picker-card {
  position: relative;
  flex: 1 1 0;
  height: 520px;
  border-radius: var(--r-24);
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-ink);
  text-align: left;
  font: inherit;
  color: inherit;
  white-space: normal;
  box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
  transition: box-shadow 0.4s ease;
}
.picker-grid .picker-card:hover { box-shadow: 0 var(--sp-32) var(--sp-64) var(--color-shadow-hard); }
.picker-grid .picker-card[aria-selected="true"] { box-shadow: 0 var(--sp-32) var(--sp-64) var(--color-shadow-hard); }
.picker-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; }
.picker-card:hover .picker-photo { transform: scale(1.045); }
.picker-grid .picker-card:not([aria-selected="true"]) .picker-photo { filter: grayscale(0.4) brightness(0.68); }
.picker-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 16, 12, 0.12) 0%, rgba(11, 16, 12, 0) 32%, rgba(11, 16, 12, 0.94) 100%),
    linear-gradient(180deg, rgba(11, 16, 12, 0.28) 0%, rgba(11, 16, 12, 0) 18%);
  transition: opacity 0.5s ease;
}
.picker-grid .picker-card[aria-selected="true"] .picker-veil { opacity: 0.9; }
.picker-frame {
  position: absolute; inset: var(--sp-14);
  border-radius: var(--r-14);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.16);
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
.picker-grid .picker-card[aria-selected="true"] .picker-frame { opacity: 1; border-color: rgba(255, 255, 255, 0.4); }
.picker-num {
  position: absolute; top: var(--sp-28); left: var(--sp-28);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.5);
}
.picker-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-10); }
.picker-kicker {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-10);
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.picker-kicker::before { content: ''; display: block; width: var(--sp-18); height: var(--bw-1); background: currentColor; }
.picker-grid .picker-card[aria-selected="true"] .picker-kicker { color: var(--color-accent); }
.picker-title { font-family: var(--font-display); font-size: var(--fs-36); font-weight: var(--fw-black); letter-spacing: var(--ls-hair); line-height: var(--lh-snug); color: var(--color-on-dark); }
.picker-sub { font-size: var(--fs-15); line-height: var(--lh-normal); color: rgba(255, 255, 255, 0.7); max-width: 34ch; opacity: 0; max-height: 0; transition: opacity 0.4s ease; overflow: hidden; }
.picker-grid .picker-card[aria-selected="true"] .picker-sub { opacity: 1; max-height: 6em; }
.picker-cta {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-8);
  font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold);
  color: var(--color-on-dark);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-1) solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.3s ease, gap 0.3s ease, color 0.3s ease;
}
.picker-grid .picker-card:hover .picker-cta, .picker-grid .picker-card[aria-selected="true"] .picker-cta { border-color: var(--color-accent); color: var(--color-accent); gap: var(--sp-12); }

.route-switcher { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); padding-bottom: var(--sp-8); }
.route-switcher[hidden] { display: none; }
.route-switcher-label { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.route-switch-sep { color: var(--color-line-strong); }
.route-switch-tab { background: none; border: none; padding: 0; font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--color-ink-3); cursor: pointer; }
.route-switch-tab[aria-selected="true"] { color: var(--color-accent-deep); }
.route-switch-tab:hover { color: var(--color-ink); }

.route-prompt { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--color-ink-3); }
.route-prompt[hidden] { display: none; }
@media (max-width: 900px) {
  .picker-grid { flex-direction: column; }
  .picker-grid .picker-card { height: 360px; }
  .picker-sub { opacity: 1; max-height: none; }
}
.vp-tablet .picker-grid, .vp-mobile .picker-grid { flex-direction: column; }
.vp-tablet .picker-grid .picker-card, .vp-mobile .picker-grid .picker-card { height: 360px; }
.vp-tablet .picker-sub, .vp-mobile .picker-sub { opacity: 1; max-height: none; }

/* ---------- routepaneel: herkenning, systeem, product per bedrijfstype ---------- */
.route-panel { display: flex; flex-direction: column; gap: var(--sp-64); opacity: 1; transition: opacity 0.32s ease; }
.route-panel.is-swap { opacity: 0; }
.route-panel .flow-band-inset { border-radius: var(--r-20); padding: var(--sp-40) var(--sp-32); }
@media (max-width: 640px) {
  .route-panel .flow-band-inset { padding: var(--sp-24) var(--sp-20); border-radius: var(--r-14); }
  .route-panel { gap: var(--sp-48); }
}
.vp-mobile .route-panel .flow-band-inset { padding: var(--sp-24) var(--sp-20); border-radius: var(--r-14); }
.vp-mobile .route-panel { gap: var(--sp-48); }

/* ---------- branche-selector ---------- */
.sel-tabs { display: flex; flex-direction: row; gap: var(--sp-8); flex-wrap: wrap; }
.sel-tab {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-16);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  background: var(--color-page);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.sel-tab:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.sel-tab[aria-selected="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.sel-panel { display: flex; flex-direction: row; gap: var(--sp-32); opacity: 1; transition: opacity 0.32s ease; }
.sel-panel.is-swap { opacity: 0; }
.sel-media { flex: 1 1 var(--sp-0); min-width: var(--sp-0); display: flex; flex-direction: column; }
.sel-copy { flex: 1 1 var(--sp-0); min-width: var(--sp-0); display: flex; flex-direction: column; gap: var(--sp-16); }
.sel-feature-list { display: flex; flex-direction: column; gap: var(--sp-10); }

/* ---------- kaart ---------- */
.map-frame {
  width: 100%;
  height: var(--h-map);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
}
.vp-mobile .map-frame { height: var(--h-map-mob); }
@media (max-width: 640px) { .map-frame { height: var(--h-map-mob); } }

/* ---------- nav: subtiele blur zodra je scrolt ---------- */
.site-header { transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--color-line-strong);
  box-shadow: 0 var(--sp-1) var(--sp-24) var(--color-shadow-soft);
}

/* ---------- mobiel: kaartrijen worden swipebaar ---------- */
/* Onder elkaar stapelen maakt een rij van vier kaarten een muur van scrollen.
   Horizontaal swipen houdt de sectie op één schermhoogte. */
.vp-mobile .row-24, .vp-mobile .sel-tabs, .vp-mobile .filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sp-20);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-6);
}
.vp-mobile .row-24 > * { flex: 0 0 78%; scroll-snap-align: start; }
.vp-mobile .sel-tabs > *, .vp-mobile .filter-row > * { scroll-snap-align: start; }
.vp-mobile .sel-panel { flex-direction: column; gap: var(--sp-20); }
.vp-mobile .row-40 { flex-direction: column; }

@media (max-width: 640px) {
  .row-24, .sel-tabs, .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sp-20);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-6);
  }
  .row-24 > * { flex: 0 0 78%; scroll-snap-align: start; }
  .sel-tabs > *, .filter-row > * { scroll-snap-align: start; }
  .sel-panel { flex-direction: column; gap: var(--sp-20); }
  .row-40 { flex-direction: column; }
  /* Swipe-hint: de rij loopt zichtbaar door de rand heen */
  .row-24 { margin-right: calc(var(--sp-20) * -1); padding-right: var(--sp-20); }
}
.vp-mobile .row-24::-webkit-scrollbar, .vp-mobile .sel-tabs::-webkit-scrollbar { display: none; }

/* Contact loopt via WhatsApp: geen formulier meer op de site.
   .form-mock en .field-* blijven staan voor het geval er later toch
   een formulier komt, maar worden nu niet gebruikt. */

/* ---------- live productdemo ---------- */
.demo-switch {
  display: flex;
  flex-direction: row;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-surface-2);
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.demo-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-20);
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.demo-switch-btn[aria-pressed="true"] {
  background: var(--color-page);
  color: var(--color-ink);
  box-shadow: 0 var(--sp-1) var(--sp-8) var(--color-shadow-soft);
}

.demo-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
.demo-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  overflow: hidden;
  box-shadow: 0 var(--sp-24) var(--sp-64) var(--color-shadow-soft);
  transition: max-width 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.62s ease;
}
.demo-shell.is-phone {
  max-width: var(--w-demo-phone);
  border-radius: var(--r-28);
  border-width: var(--bw-3);
  border-color: var(--color-ink);
}
.demo-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-16);
  background: var(--color-surface);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.demo-shell.is-phone .demo-bar { justify-content: center; padding: var(--sp-10); }
.demo-dots { display: flex; flex-direction: row; gap: var(--sp-6); flex: 0 0 auto; }
.demo-dot { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-pill); background: var(--color-line-strong); }
.demo-shell.is-phone .demo-dots { display: none; }
.demo-url {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding: var(--sp-6) var(--sp-12);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-notch {
  display: none;
  width: var(--sp-56);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--color-line-strong);
}
.demo-shell.is-phone .demo-notch { display: block; }
.demo-shell.is-phone .demo-url { display: none; }
.demo-iframe {
  display: block;
  width: 100%;
  height: var(--h-demo);
  border: none;
  background: var(--color-surface);
}
.demo-shell.is-phone .demo-iframe { height: var(--h-demo-mob); }
.demo-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

/* onderdelen die in de demo te zien zijn */
.demo-checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-8); }
.demo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-14);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-size: var(--fs-14);
  color: var(--color-ink-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ---------- groeitijdlijn ---------- */
.grow-line { display: flex; flex-direction: column; gap: var(--sp-0); }
.grow-step {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-16);
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.grow-step.is-last { border-bottom-width: var(--sp-0); }
.grow-when {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
  flex: 0 0 auto;
  min-width: var(--sp-80, 88px);
}
.grow-what { font-size: var(--fs-16); color: var(--color-ink); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.grow-step.is-now .grow-what { font-weight: var(--fw-bold); }
.grow-step.is-now .grow-when { color: var(--color-accent-deep); }

/* paginateller */
.page-count {
  font-family: var(--font-display);
  font-size: var(--fs-68);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-hair);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.vp-mobile .page-count { font-size: var(--fs-44); }

/* ecosysteem */
.eco-row { display: flex; flex-direction: row; gap: var(--sp-16); flex-wrap: wrap; }
.eco-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding: var(--sp-20);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  background: var(--color-page);
}
.eco-card.is-base { border-color: var(--color-accent); background: var(--color-accent-wash); }
.eco-plus {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-black);
  color: var(--color-ink-3);
  flex: 0 0 auto;
}

.vp-mobile .demo-iframe { height: var(--h-demo-mob); }
.vp-mobile .demo-switch { align-self: stretch; }
.vp-mobile .demo-switch-btn { flex: 1 1 var(--sp-0); justify-content: center; }
.vp-mobile .eco-plus { display: none; }
@media (max-width: 640px) {
  .demo-iframe { height: var(--h-demo-mob); }
  .demo-switch { align-self: stretch; }
  .demo-switch-btn { flex: 1 1 0; justify-content: center; }
  .eco-plus { display: none; }
  .grow-when { min-width: 72px; }
}

/* Prijskaarten: 45% basis liet er twee per regel staan en blies de derde
   op tot volle breedte. Vaste basis met een bovengrens houdt de rij netjes. */
.card-plan { flex: 1 1 var(--w-plan); max-width: 100%; }
@media (max-width: 1024px) and (min-width: 641px) {
  .card-plan { flex: 0 1 var(--w-plan); }
}
@media (max-width: 640px) {
  .card-plan { flex: 1 1 100%; }
}
.vp-tablet .card-plan { flex: 0 1 var(--w-plan); }
.vp-mobile .card-plan { flex: 1 1 100%; }

/* ---------- zoeken toen en nu ---------- */
.search-pair { display: flex; flex-direction: row; gap: var(--sp-24); }
.search-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding: var(--sp-24);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  background: var(--color-page);
}
.search-col.is-ai { border-color: rgba(90, 216, 74, 0.4); background: var(--color-accent-wash); }
.search-col-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
}
.search-col.is-ai .search-col-head { color: var(--color-accent-deep); }
.query-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: text;
  gap: var(--sp-10);
  min-height: var(--size-tap);
  padding: var(--sp-12) var(--sp-16);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-size: var(--fs-15);
  color: var(--color-ink);
}
.query-text { flex: 1 1 var(--sp-0); min-width: var(--sp-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-col.is-ai .query-line { align-items: flex-start; border-radius: var(--r-14); }
.search-col.is-ai .query-text { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
.result-stack { display: flex; flex-direction: column; gap: var(--sp-10); }
.result-line {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-0);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.result-line.is-last { border-bottom-width: var(--sp-0); }
.result-name { font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--color-ink); }
.result-name.is-you { color: var(--color-accent-deep); }
.result-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); }
.answer-text { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--color-ink); }
.answer-text .ai-mark { font-weight: var(--fw-bold); color: var(--color-accent-deep); }

.then-now { display: flex; flex-direction: row; gap: var(--sp-24); flex-wrap: wrap; }
.then-now-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.then-now-when {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
}

.vp-mobile .search-pair { flex-direction: column; }
.vp-mobile .search-col { padding: var(--sp-20); }
@media (max-width: 860px) {
  .search-pair { flex-direction: column; }
  .search-col { padding: var(--sp-20); }
}

/* ---------- zichtbaarheidsgrafiek ---------- */
.chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-28);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
}
.chart-head { display: flex; flex-direction: row; align-items: baseline; gap: var(--sp-16); flex-wrap: wrap; }
.chart-legend { display: flex; flex-direction: row; gap: var(--sp-16); flex-wrap: wrap; }
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-14);
  color: var(--color-ink-2);
  white-space: nowrap;
}
.legend-swatch { width: var(--sp-12); height: var(--sp-12); border-radius: var(--r-4); background: var(--color-accent); flex: 0 0 auto; }
.legend-swatch.is-2 { background: var(--color-accent-deep); }
.legend-swatch.is-3 { background: var(--color-ink); }
.legend-swatch.is-4 { background: var(--color-line-strong); }

.chart-plot {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--sp-16);
  height: var(--h-chart);
  padding-top: var(--sp-8);
  border-bottom: var(--bw-1) solid var(--color-line-strong);
}
.chart-month {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-8);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  height: 100%;
}
.chart-bars { display: flex; flex-direction: row; align-items: flex-end; gap: var(--sp-4); height: 100%; }
.chart-bar {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  height: 0%;
  border-radius: var(--r-4) var(--r-4) var(--sp-0) var(--sp-0);
  background: var(--color-accent);
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-bar.is-2 { background: var(--color-accent-deep); }
.chart-bar.is-3 { background: var(--color-ink); }
.chart-bar.is-4 { background: var(--color-line-strong); }
.chart-axis { display: flex; flex-direction: row; gap: var(--sp-16); }
.chart-axis-item {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-3);
  text-align: center;
}
.chart-note { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }

.sum-row { display: flex; flex-direction: row; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.sum-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding: var(--sp-20);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  background: var(--color-page);
}
.sum-item.is-result { border-color: var(--color-accent); background: var(--color-accent-wash); }
.sum-op {
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-black);
  color: var(--color-ink-3);
  flex: 0 0 auto;
}

.vp-mobile .chart-plot { height: var(--h-chart-mob); gap: var(--sp-8); }
.vp-mobile .chart-axis { gap: var(--sp-8); }
.vp-mobile .chart-card { padding: var(--sp-20); }
.vp-mobile .sum-op { display: none; }
@media (max-width: 860px) {
  .chart-plot { height: var(--h-chart-mob); gap: var(--sp-8); }
  .chart-axis { gap: var(--sp-8); }
  .chart-card { padding: var(--sp-20); }
  .sum-op { display: none; }
  .chart-legend { gap: var(--sp-10); }
}

/* ---------- hero als fotoband ---------- */
.hero-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--h-hero-band);
  padding-top: var(--sp-80);
  padding-bottom: var(--sp-80);
  border-radius: var(--r-28);
  overflow: hidden;
  /* Kleurlaag over de foto: geen los overlay-element nodig. */
  background: transparent;
}
.hero-band-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-56);
}
.hero-band-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.hero-band-copy .display-1 { color: var(--color-on-dark); }
.hero-band-copy .lead { color: var(--color-on-dark-soft); }
.hero-band-copy .eyebrow { color: var(--color-accent); }
.hero-band-copy .heading-3 { color: var(--color-on-dark); }
.hero-band-copy .trust-item { color: var(--color-on-dark-soft); }

/* zoekmock rechts */
.mock-search {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.mock-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-20);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
}
.mock-query {
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  font-size: var(--fs-17);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vergrootglas uit twee echte elementen: ring plus steel. */
.mock-glass {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  width: var(--sp-24);
  height: var(--sp-24);
  flex: 0 0 auto;
}
.mock-glass-ring {
  width: var(--sp-16);
  height: var(--sp-16);
  border: var(--bw-2) solid var(--color-ink-2);
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.mock-glass-stem {
  width: var(--sp-8);
  height: var(--bw-2);
  border-radius: var(--r-pill);
  background: var(--color-ink-2);
  transform: rotate(45deg) translate(var(--sp-2), var(--sp-2));
  flex: 0 0 auto;
}
.mock-divider {
  width: var(--bw-1);
  height: var(--sp-20);
  background: var(--color-line);
  flex: 0 0 auto;
}
.mock-platforms { height: var(--sp-28); width: auto; flex: 0 0 auto; }
.mock-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16);
  background: var(--color-page);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft);
}
.mock-card.is-you { box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft), 0 0 0 var(--bw-2) var(--color-accent) inset; }
.mock-thumb {
  width: var(--h-thumb);
  height: var(--h-thumb);
  border-radius: var(--r-14);
  background: var(--color-surface-2);
  flex: 0 0 auto;
  object-fit: cover;
}
.mock-lines { display: flex; flex-direction: column; gap: var(--sp-6); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.mock-name { font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--color-ink); }
.mock-name.is-you { color: var(--color-accent-deep); }
.mock-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); }
.mock-rank {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-ink-3);
  flex: 0 0 auto;
}

.vp-tablet .hero-band-inner { flex-direction: column; align-items: stretch; gap: var(--sp-40); }
.vp-mobile .hero-band {
  min-height: var(--sp-0);
  border-radius: var(--r-20);
  padding-top: var(--sp-40);
  padding-bottom: var(--sp-40);
}
.vp-mobile .hero-band-inner { flex-direction: column; align-items: stretch; gap: var(--sp-28); }
.vp-mobile .mock-bar { padding: var(--sp-14) var(--sp-16); }
.vp-mobile .mock-query { font-size: var(--fs-15); }
@media (max-width: 1024px) {
  .hero-band-inner { flex-direction: column; align-items: stretch; gap: var(--sp-40); }
}
@media (max-width: 640px) {
  .hero-band {
    min-height: 0;
    border-radius: var(--r-20);
    padding-top: var(--sp-40);
    padding-bottom: var(--sp-40);
    }
  .hero-band-inner { gap: var(--sp-28); }
  .mock-bar { padding: var(--sp-14) var(--sp-16); }
  .mock-query { font-size: var(--fs-15); }
}
.button-ghost.is-on-dark { border-color: var(--color-on-dark-soft); color: var(--color-on-dark); background: transparent; }
.button-ghost.is-on-dark:hover { border-color: var(--color-accent); color: var(--color-on-dark); }
.hero-band .agent-status { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.hero-band .agent-status-label, .hero-band .agent-status-step, .hero-band .agent-status-clock { color: var(--color-on-dark-soft); }
.hero-band .agent-status-track { background: rgba(255, 255, 255, 0.16); }
.platform-strip.is-small { height: var(--sp-20); align-self: flex-start; }
.mock-card.is-you { box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft), 0 0 0 var(--bw-2) var(--color-accent) inset; }
.mock-rank { min-width: var(--sp-16); text-align: right; }

/* Buiten de top 3: rood. Binnen de top 3: groen. */
.mock-card.is-out { box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft), 0 0 0 var(--bw-2) var(--color-warn) inset; }
.mock-card.is-out .mock-name { color: var(--color-warn); }
.mock-card.is-out .mock-rank { color: var(--color-warn); }
.mock-card.is-you .mock-rank { color: var(--color-accent-deep); font-weight: var(--fw-bold); }
.mock-card { transition: box-shadow 0.5s ease; }
.mock-name, .mock-rank { transition: color 0.5s ease; }
.mock-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-warn);
  transition: color 0.5s ease;
}
.mock-card.is-you .mock-flag { color: var(--color-accent-deep); }

/* ---------- agentkaarten ---------- */
.agent-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding: var(--sp-28);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  color: var(--color-ink);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.agent-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
  transform: translateY(calc(var(--sp-4) * -1));
  color: var(--color-ink);
}
.agent-card-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); }
.agent-card-name {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
}
.agent-live {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.closer {
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink);
  max-width: var(--measure);
  text-wrap: balance;
}
.vp-mobile .agent-card { padding: var(--sp-20); }
.vp-mobile .closer { font-size: var(--fs-20); }
@media (max-width: 640px) {
  .agent-card { padding: var(--sp-20); }
  .closer { font-size: var(--fs-20); }
}

/* ---------- browserframe en pijlers ---------- */
.browser-frame {
  display: flex;
  flex-direction: column;
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--color-page);
  box-shadow: 0 var(--sp-24) var(--sp-64) var(--color-shadow-soft);
}
.browser-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  background: var(--color-surface);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.browser-shot { display: block; width: 100%; height: auto; }
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  padding-top: var(--sp-20);
  border-top: var(--bw-2) solid var(--color-accent);
}
.pillar-label {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink);
}
.vp-mobile .browser-frame { border-radius: var(--r-14); }
/* De schermafbeelding is 838px breed; groter tonen maakt hem zacht. */
.browser-frame { align-self: center; max-width: var(--w-shot-native); width: 100%; }
.browser-frame.is-live { max-width: 100%; }
/* 3. Bijschrift op het groene paneel moet leesbaar zijn. */
.search-col.is-ai .micro { color: var(--color-ink-2); }

/* ---------- werkpaneel: eigen productvisual ---------- */
.work-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-32);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-24) var(--sp-64) var(--color-shadow-soft);
}
.work-head { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; }
.work-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink);
}
.work-live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
}
.work-lane {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-24);
  padding-bottom: var(--sp-20);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.work-lane.is-last { border-bottom-width: var(--sp-0); padding-bottom: var(--sp-0); }
.work-lane-name {
  flex: 0 0 auto;
  min-width: var(--w-lane);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
  padding-top: var(--sp-6);
}
.work-rows { display: flex; flex-direction: column; gap: var(--sp-10); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.work-row { display: flex; flex-direction: row; align-items: baseline; gap: var(--sp-14); flex-wrap: wrap; }
.work-when { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); flex: 0 0 auto; min-width: var(--w-when); }
.work-what { font-size: var(--fs-16); color: var(--color-ink); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.work-state {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.4s ease, color 0.4s ease;
}
.work-state.is-done { background: var(--color-accent-wash); color: var(--color-accent-deep); }
.work-state.is-wait { background: var(--color-surface-2); color: var(--color-ink-2); }
.work-state.is-plan { background: var(--color-surface-2); color: var(--color-ink-2); }

/* ---------- fotoband als rustpunt ---------- */
.photo-band {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--h-photo-band);
  padding-top: var(--sp-64);
  padding-bottom: var(--sp-64);
  background-image: linear-gradient(180deg, rgba(11, 16, 12, 0.12) 0%, rgba(11, 16, 12, 0.72) 100%), url("qr-code-scannen-aan-tafel.png");
  background-size: cover, cover;
  background-position: center, center 40%;
  background-repeat: no-repeat, no-repeat;
}
.photo-band-line {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--color-on-dark);
  max-width: var(--measure);
  text-wrap: balance;
}
.vp-mobile .photo-band { min-height: var(--h-photo-band-mob); padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
.vp-mobile .photo-band-line { font-size: var(--fs-24); }
.vp-mobile .work-panel { padding: var(--sp-20); gap: var(--sp-20); }
.vp-mobile .work-lane { flex-direction: column; gap: var(--sp-12); }
.vp-mobile .work-row { gap: var(--sp-8); }
@media (max-width: 860px) {
  .work-lane { flex-direction: column; gap: var(--sp-12); }
  .work-panel { padding: var(--sp-20); gap: var(--sp-20); }
  .photo-band { min-height: var(--h-photo-band-mob); padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
  .photo-band-line { font-size: var(--fs-24); }
}

.hero-band { border-radius: var(--sp-0); }
.hero-band-inner { gap: var(--sp-64); }
.hero-band-copy .display-1x { color: var(--color-ink); }



/* Zoekbalk in de hero: rustiger, met meer lucht en een zachte lift. */
.mock-bar {
  gap: var(--sp-14);
  padding: var(--sp-18) var(--sp-14) var(--sp-18) var(--sp-24);
  border-color: var(--color-line);
  border-radius: var(--r-pill);
  box-shadow: 0 var(--sp-2) var(--sp-6) var(--color-shadow-soft), 0 var(--sp-20) var(--sp-48) var(--color-shadow-soft);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.mock-bar:hover { border-color: var(--color-line-strong); }
.mock-query { font-weight: var(--fw-medium); letter-spacing: var(--ls-snug); }
.mock-glass-ring { border-color: var(--color-ink-3); }
.mock-glass-stem { background: var(--color-ink-3); }
.mock-divider { height: var(--sp-24); background: var(--color-line); }
.mock-platforms { height: var(--sp-24); padding-right: var(--sp-6); }
.mock-caret {
  width: var(--bw-2);
  height: var(--fs-18);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  flex: 0 0 auto;
  animation: dot-pulse 1.1s steps(2, end) infinite;
}
.vp-mobile .mock-bar { padding: var(--sp-14) var(--sp-12) var(--sp-14) var(--sp-18); gap: var(--sp-10); }
@media (max-width: 640px) {
  .mock-bar { padding: var(--sp-14) var(--sp-12) var(--sp-14) var(--sp-18); gap: var(--sp-10); }
}

/* Typend effect in de zoekbalk: cursor staat direct achter de tekst. */
.mock-query-wrap { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.mock-query { flex: 0 1 auto; }
.mock-caret { height: var(--fs-20); background: var(--color-ink); animation: caret-blink 1.05s steps(2, end) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mock-bar { padding: var(--sp-20) var(--sp-16) var(--sp-20) var(--sp-24); }
.vp-mobile .mock-bar { padding: var(--sp-16) var(--sp-12) var(--sp-16) var(--sp-18); }

/* Makers: twee portretten naast de tekst. */
.maker { display: flex; flex-direction: column; gap: var(--sp-8); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.maker-photo {
  width: 100%;
  height: var(--h-photo-wide);
  object-fit: cover;
  border-radius: var(--r-14);
  border: var(--bw-1) solid var(--color-line);
}
.vp-mobile .maker-photo { height: var(--h-photo-band-mob); }

/* Klantcases */
.case-grid { display: flex; flex-direction: row; gap: var(--sp-24); flex-wrap: wrap; }
.case-card {
  display: flex; flex-direction: column; gap: var(--sp-16);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  padding: var(--sp-28);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.case-quote { font-size: var(--fs-18); line-height: var(--lh-normal); color: var(--color-ink); text-wrap: pretty; }
.case-who { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.case-name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-ink); }
.case-where { font-size: var(--fs-14); color: var(--color-ink-3); }
.case-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding-top: var(--sp-16); border-top: var(--bw-1) solid var(--color-line);
}
.case-figure { font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-black); color: var(--color-ink); letter-spacing: var(--ls-tight); white-space: nowrap; flex: 0 0 auto; }
.case-figure-note { font-size: var(--fs-13); color: var(--color-ink-2); }
.demo-flag {
  display: inline-flex; align-items: center; gap: var(--sp-8); align-self: flex-start;
  padding: var(--sp-6) var(--sp-14); border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-ink-2);
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.vp-mobile .case-card { padding: var(--sp-20); }
@media (max-width: 640px) { .case-card { padding: var(--sp-20); } }

/* Logostrook vult de hoogte van de zoekbalk en sluit rechts netjes af. */
.mock-bar { padding-right: var(--sp-0); overflow: hidden; }
.mock-divider { display: none; }
.mock-platforms {
  height: auto;
  align-self: stretch;
  object-fit: cover;
  object-position: right center;
  padding: var(--sp-0);
  border-left: var(--bw-1) solid var(--color-line);
  margin-left: var(--sp-8);
}

/* Platformtabs in de zoekbalk, in plaats van een geplakte logostrook. */
.mock-bar { padding-right: var(--sp-8); overflow: visible; }
.mock-tabs {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-4);
  flex: 0 0 auto; padding-left: var(--sp-12);
  border-left: var(--bw-1) solid var(--color-line);
}
.mock-tab {
  padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-3);
  white-space: nowrap;
  transition: background 0.4s ease, color 0.4s ease;
}
.mock-tab.is-active { background: var(--color-accent-wash); color: var(--color-accent-deep); }
@media (max-width: 520px) {
  .mock-tabs { display: none; }
  .mock-bar { padding-right: var(--sp-18); }
}

/* Full-bleed hero met foto, zoals gevraagd. */
.hero-band {
  position: relative;
  background-image: linear-gradient(96deg, rgba(11, 16, 12, 0.9) 0%, rgba(11, 16, 12, 0.74) 42%, rgba(11, 16, 12, 0.34) 100%), url("restaurant-gasten-aan-tafel.jpg");
  background-size: cover, cover;
  background-position: center, 72% 34%;
  background-repeat: no-repeat, no-repeat;
  padding-top: var(--sp-120);
  padding-bottom: var(--sp-120);
  min-height: var(--h-hero);
  justify-content: center;
}
.hero-band-copy .display-1 { color: var(--color-on-dark); }
.hero-band-copy .lead { color: var(--color-on-dark-soft); }
.hero-band-copy .eyebrow { color: var(--color-on-dark-soft); }
.hero-band-copy .trust-item { color: var(--color-on-dark-soft); }
.hero-band .button-ghost.is-on-dark { border-color: rgba(255, 255, 255, 0.4); color: var(--color-on-dark); }
.hero-band .button-ghost.is-on-dark:hover { border-color: var(--color-accent); color: var(--color-on-dark); }
.hero-band .agent-status { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.hero-band .agent-status-label, .hero-band .agent-status-step, .hero-band .agent-status-clock { color: var(--color-on-dark-soft); }
.hero-band .agent-status-track { background: rgba(255, 255, 255, 0.16); }
.vp-tablet .hero-band { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.vp-mobile .hero-band {
  padding-top: var(--sp-56);
  padding-bottom: var(--sp-56);
  min-height: var(--sp-0);
  background-image: linear-gradient(180deg, rgba(11, 16, 12, 0.72) 0%, rgba(11, 16, 12, 0.93) 62%), url("restaurant-gasten-aan-tafel.jpg");
  background-position: center, center 22%;
}
@media (max-width: 1024px) { .hero-band { padding-top: var(--sp-80); padding-bottom: var(--sp-80); } }
@media (max-width: 640px) {
  .hero-band {
    padding-top: var(--sp-56);
    padding-bottom: var(--sp-56);
    min-height: var(--sp-0);
    background-image: linear-gradient(180deg, rgba(11, 16, 12, 0.72) 0%, rgba(11, 16, 12, 0.93) 62%), url("restaurant-gasten-aan-tafel.jpg");
    background-position: center, center 22%;
  }
}

/* Copy en zoekkaart lijnen bovenaan uit. */
.hero-band-inner { align-items: flex-start; }

/* Lichte fotohero: daglicht, donkere tekst, foto rechts vrij. */
.hero-band {
  background-image: linear-gradient(92deg, var(--color-page) 0%, rgba(255, 255, 255, 0.96) 34%, rgba(255, 255, 255, 0.7) 54%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0) 100%), url("haarsalon-interieur.png");
  background-size: cover, cover;
  background-position: center, 76% center;
  border-bottom: var(--bw-1) solid var(--color-line);
}
.hero-band-copy .display-1 { color: var(--color-ink); }
.hero-band-copy .lead { color: var(--color-ink-2); }
.hero-band-copy .eyebrow { color: var(--color-ink-3); }
.hero-band-copy .trust-item { color: var(--color-ink-2); }
.hero-band .button-ghost.is-on-dark { border-color: var(--color-line-strong); color: var(--color-ink); background: var(--color-page); }
.hero-band .button-ghost.is-on-dark:hover { border-color: var(--color-accent); color: var(--color-ink); }
.hero-band .agent-status { background: var(--color-surface); border-color: var(--color-line); }
.hero-band .agent-status-label, .hero-band .agent-status-step, .hero-band .agent-status-clock { color: var(--color-ink-2); }
.hero-band .agent-status-track { background: var(--color-surface-2); }
.vp-mobile .hero-band, @media (max-width: 640px) { }
.vp-mobile .hero-band {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.93) 44%, var(--color-page) 72%), url("haarsalon-interieur.png");
  background-position: center, center 12%;
}
@media (max-width: 640px) {
  .hero-band {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.93) 44%, var(--color-page) 72%), url("haarsalon-interieur.png");
    background-position: center, center 12%;
  }
}

/* Fotolagen in de hero: rustige crossfade tussen lokale zaken. */
.hero-band { background-image: none; background-color: var(--color-page); overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2.4s ease-in-out, transform 14s linear;
}
.hero-shot.is-on { opacity: 1; transform: scale(1); }
.hero-veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(92deg, var(--color-page) 0%, rgba(255, 255, 255, 0.95) 32%, rgba(255, 255, 255, 0.68) 52%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
}
.hero-band-inner { position: relative; }
.vp-mobile .hero-veil, .vp-mobile .hero-shot { background-position: center 24%; }
.vp-mobile .hero-veil {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.92) 42%, var(--color-page) 70%);
}
@media (max-width: 640px) {
  .hero-shot { background-position: center 24%; }
  .hero-veil { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.92) 42%, var(--color-page) 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot { transition: none; transform: none; }
}

/* Platformlogo's in plaats van tekstlabels in de zoekbalk. */
.mock-tab { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-8); opacity: 0.42; transition: opacity 0.4s ease, background 0.4s ease; }
.mock-tab.is-active { background: var(--color-accent-wash); opacity: 1; }
.mock-tab-logo { height: var(--sp-20); width: auto; display: block; }
.vp-mobile .mock-tab-logo { height: var(--sp-18); }

/* Eén vrijstaande logostrook, netjes in de balk. */
.mock-platforms {
  height: var(--sp-18);
  width: auto;
  display: block;
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  padding-left: var(--sp-14);
  border-left: var(--bw-1) solid var(--color-line);
  border-radius: var(--sp-0);
  background: transparent;
  object-fit: contain;
}
.vp-mobile .mock-platforms { height: var(--sp-18); margin-left: auto; padding-left: var(--sp-10); }
@media (max-width: 520px) { .mock-platforms { display: none; } }

/* Logostrook blijft rechts staan, ongeacht de typende tekst. */
.mock-query { flex: 1 1 0; min-width: 0; }
.mock-platforms { margin-left: auto; height: var(--sp-32); image-rendering: -webkit-optimize-contrast; }
.vp-mobile .mock-platforms { height: var(--sp-24); }

/* ---------- header: sticky, licht, twee CTA's ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  border-bottom: var(--bw-1) solid var(--color-line);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 var(--sp-2) var(--sp-20) var(--color-shadow-soft); }
.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-32);
  padding-top: var(--sp-18);
  padding-bottom: var(--sp-18);
  transition: padding 0.3s ease;
}
.site-header.is-scrolled .header-inner { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.header-actions { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); flex: 0 0 auto; }
.header-login {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-ink-2);
  white-space: nowrap;
}
.header-login:hover { color: var(--color-ink); }
.header-cta-ghost { padding: var(--sp-10) var(--sp-18); font-size: var(--fs-14); }
.mobile-panel { display: none; }
.mobile-panel.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-20) var(--sp-24) var(--sp-20);
  border-top: var(--bw-1) solid var(--color-line);
  background: var(--color-page);
}
.mobile-link {
  display: flex;
  align-items: center;
  min-height: var(--sp-48);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  border-bottom: var(--bw-1) solid var(--color-line);
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-burger { display: flex; }
  .header-cta-ghost { display: none; }
}
@media (max-width: 520px) {
  .header-cta { display: none; }
}

/* ---------- hero: productkaarten naast de tekst ---------- */
.hero-checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-16); }
.hero-check {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font-family: var(--font-body); font-size: var(--fs-15); color: var(--color-ink-2);
}
.hero-cards { display: flex; flex-direction: column; gap: var(--sp-12); flex: 0 1 var(--w-hero-cards); min-width: var(--sp-0); }
.hero-card {
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-18) var(--sp-20);
  background: var(--color-page);
  border-radius: var(--r-14);
  box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft);
}
.hero-card-label {
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent-deep);
}
.hero-card-big {
  font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight); color: var(--color-ink);
}
.hero-card-foot { font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-3); }

/* ---------- productshowcase met tabs ---------- */
.showcase { display: flex; flex-direction: column; gap: var(--sp-24); }
.showcase-tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-8); }
.showcase-tab {
  padding: var(--sp-10) var(--sp-18);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-medium);
  color: var(--color-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.showcase-tab:hover { border-color: var(--color-ink-3); color: var(--color-ink); }
.showcase-tab.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.showcase-body { display: flex; flex-direction: column; }
.showcase-panel { display: none; flex-direction: row; gap: var(--sp-40); align-items: center; }
.showcase-panel.is-active { display: flex; }
.showcase-copy { display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.showcase-visual { flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.mini-panel {
  display: flex; flex-direction: column;
  padding: var(--sp-20) var(--sp-24);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.mini-row {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--sp-16);
  padding-top: var(--sp-14); padding-bottom: var(--sp-14);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.mini-row.is-last { border-bottom-width: var(--sp-0); }
.mini-big { font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }

/* ---------- geruststelling onder de hero ---------- */
.assure-strip { border-top: var(--bw-1) solid var(--color-line); border-bottom: var(--bw-1) solid var(--color-line); padding: var(--sp-16) 0; }
.assure-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-10) var(--sp-28); }
.assure-item { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-15); color: var(--color-ink-2); white-space: nowrap; }
@media (max-width: 700px) {
  .assure-row { justify-content: flex-start; gap: var(--sp-8) var(--sp-18); }
  .assure-item { font-size: var(--fs-14); }
}

/* ---------- zes klusjes worden één overzicht ---------- */
.merge { display: flex; flex-direction: column; align-items: center; gap: var(--sp-20); }
.merge-in { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-10); }
.merge-chip {
  padding: var(--sp-10) var(--sp-18);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-family: var(--font-body); font-size: var(--fs-15); color: var(--color-ink-2);
  white-space: nowrap;
}
.merge-in.is-left { justify-content: flex-start; }
.whatis-visual { position: relative; border-radius: var(--r-24); overflow: hidden; box-shadow: 0 var(--sp-10) var(--sp-32) var(--color-shadow); }
.whatis-photo { display: block; width: 100%; height: var(--h-whatis-photo); object-fit: cover; }
.whatis-float {
  position: absolute;
  left: var(--sp-20);
  right: var(--sp-20);
  bottom: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  border-radius: var(--r-20);
  background: var(--color-page);
  box-shadow: 0 var(--sp-8) var(--sp-24) var(--color-shadow);
}
.whatis-float-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.whatis-avatar { width: var(--w-whatis-avatar); height: var(--w-whatis-avatar); border-radius: var(--r-pill); object-fit: cover; }
.whatis-stars { margin-left: auto; color: var(--color-star); font-size: var(--fs-14); letter-spacing: 1px; }
.whatis-flag { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); color: var(--color-accent-deep); }
@media (max-width: 700px) { .whatis-photo { height: var(--h-tile-row-mob); } }
.one-view.is-compact .one-view-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .one-view.is-compact .one-view-body { grid-template-columns: minmax(0, 1fr); } }
.merge-arrow { font-size: var(--fs-26); color: var(--color-accent-deep); }
.merge .browser-frame { width: 100%; }

/* ---------- stappen ---------- */
.step { display: flex; flex-direction: column; gap: var(--sp-12); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-44); height: var(--sp-44);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-black);
  flex: 0 0 auto;
}

/* ---------- misgelopen gasten + rekensom als één blok ---------- */
.miss {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: var(--sp-48);
  padding: var(--sp-48);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-28);
  box-shadow: 0 var(--sp-10) var(--sp-32) var(--color-shadow-soft);
}
.miss-copy { display: flex; flex-direction: column; gap: var(--sp-20); }
.miss-calc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-28);
  background: var(--color-surface);
  border-radius: var(--r-24);
}
.calc.is-stacked { flex-direction: column; gap: var(--sp-24); }
.calc.is-stacked .calc-inputs, .calc.is-stacked .calc-out { align-self: stretch; width: 100%; }
.calc.is-stacked .calc-out { background: var(--color-page); }
.calc.is-stacked .calc-line > :first-child { min-width: var(--sp-0); }
.calc.is-stacked .calc-value { white-space: nowrap; font-size: var(--fs-22); }
.calc.is-stacked .calc-value.is-accent, .calc.is-stacked .calc-value.is-warn { font-size: var(--fs-30); }
@media (max-width: 900px) {
  .miss { grid-template-columns: minmax(0, 1fr); gap: var(--sp-28); padding: var(--sp-24); }
  .miss-calc { padding: var(--sp-20); }
}

/* ---------- rekensom ---------- */
.calc { display: flex; flex-direction: row; gap: var(--sp-40); align-items: flex-start; }
.calc-inputs { display: flex; flex-direction: column; gap: var(--sp-20); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.calc-field { display: flex; flex-direction: column; gap: var(--sp-8); }
.calc-label { font-family: var(--font-body); font-size: var(--fs-15); color: var(--color-ink-2); }
.calc-input-wrap, .calc-select-wrap {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-16);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-14);
}
.calc-input-wrap:focus-within, .calc-select-wrap:focus-within { border-color: var(--color-accent); }
.calc-prefix { font-family: var(--font-display); font-size: var(--fs-20); color: var(--color-ink-3); }
.calc-input {
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  min-height: var(--sp-48);
  border: none; background: transparent; outline: none;
  font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--color-ink);
}
.calc-out {
  display: flex; flex-direction: column; gap: var(--sp-4);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  padding: var(--sp-28);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.calc-line {
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-16);
  padding-top: var(--sp-14); padding-bottom: var(--sp-14);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.calc-line.is-total { border-bottom-width: var(--sp-0); padding-top: var(--sp-20); }
.calc-value { font-family: var(--font-display); font-size: var(--fs-26); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.calc-value.is-quiet { color: var(--color-ink-3); }
.calc-value.is-accent { color: var(--color-accent-deep); font-size: var(--fs-36); }
.calc-value.is-warn { color: var(--color-warn); font-size: var(--fs-36); }

/* ---------- zonder / met ---------- */
.versus { display: flex; flex-direction: row; gap: var(--sp-24); }
.versus-col {
  display: flex; flex-direction: column; gap: var(--sp-16);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  padding: var(--sp-28);
  border-radius: var(--r-20);
}
.versus-col.is-before { background: var(--color-surface); }
.versus-col.is-after { background: var(--color-accent-wash); }
.versus-head {
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-ink-3);
}
.versus-col.is-after .versus-head { color: var(--color-accent-deep); }
.cross-mark { color: var(--color-ink-3); flex: 0 0 auto; }

/* ---------- kaart ---------- */
.map-embed {
  width: 100%;
  height: var(--h-map);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
}

/* ---------- prijzen ---------- */
.price-card {
  display: flex; flex-direction: column; gap: var(--sp-12);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  padding: var(--sp-28);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.price-card.is-featured { border-color: var(--color-accent); box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft); }
.price-flag {
  align-self: flex-start;
  padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.price-note {
  display: flex; flex-direction: column; gap: var(--sp-20);
  padding: var(--sp-28);
  background: var(--color-surface);
  border-radius: var(--r-20);
}
.micro-on-dark { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--color-on-dark-soft); }

/* ---------- tablet en mobiel ---------- */
@media (max-width: 900px) {
  .showcase-panel.is-active { flex-direction: column; align-items: stretch; gap: var(--sp-24); }
  .calc { flex-direction: column; gap: var(--sp-24); }
  .versus { flex-direction: column; }
  .hero-cards { flex-direction: column; }
}
@media (max-width: 640px) {
  .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-6); }
  .hero-checks { flex-direction: column; gap: var(--sp-8); }
  .merge-chip { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
  .calc-out, .price-card, .price-note, .versus-col, .mini-panel { padding: var(--sp-20); }
  .calc-value.is-accent, .calc-value.is-warn { font-size: var(--fs-28); }
}
.vp-tablet .showcase-panel.is-active { flex-direction: column; align-items: stretch; }
.vp-tablet .calc, .vp-tablet .versus { flex-direction: column; }
.vp-mobile .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; }
.vp-mobile .hero-checks { flex-direction: column; gap: var(--sp-8); }

/* Boekingsagenda: eigen kader, scrollt zelf op kleine schermen. */
.cal-mount {
  width: 100%;
  min-height: var(--h-cal);
  overflow: auto;
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
}
.vp-mobile .cal-mount { min-height: var(--h-cal-mob); }
@media (max-width: 640px) { .cal-mount { min-height: var(--h-cal-mob); } }

/* ---------- hero: wit, tekst links, product rechts ---------- */
.hero-clean {
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  padding-top: var(--sp-80);
  padding-bottom: var(--sp-40);
}
.hero-clean-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-64);
}
.hero-clean-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-24);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.hero-clean-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
.float-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-14) var(--sp-18);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  box-shadow: 0 var(--sp-14) var(--sp-40) var(--color-shadow-soft);
}
.float-card.is-one { left: calc(var(--sp-32) * -1); bottom: var(--sp-56); }
.float-card.is-two { right: calc(var(--sp-24) * -1); top: var(--sp-40); }
.trust-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding-top: var(--sp-56);
}
.trust-strip-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
}
.trust-strip-items { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-28); }
.marq {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-16);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sp-80), #000 calc(100% - var(--sp-80)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--sp-80), #000 calc(100% - var(--sp-80)), transparent);
}
.marq.is-back { margin-top: var(--sp-12); opacity: 0.55; }
.marq-track { display: flex; flex-direction: row; width: max-content; animation: marq-run 52s linear infinite; }
.marq-track.is-reverse { animation-duration: 64s; animation-direction: reverse; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq-row { display: flex; flex-direction: row; gap: var(--sp-12); padding-right: var(--sp-12); }
.marq-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--sp-10) var(--sp-18);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--color-ink-2);
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.marq-item:hover { border-color: var(--color-accent); color: var(--color-ink); transform: translateY(-1px); }
@keyframes marq-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marq-track, .marq-track.is-reverse { animation: none; }
  .marq.is-back { display: none; }
}
@media (max-width: 640px) {
  .marq-item { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
  .marq.is-back { display: none; }
}
.trust-strip-item {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-ink-3);
  white-space: nowrap;
}
@media (max-width: 1080px) {
  .hero-clean-inner { flex-direction: column; align-items: stretch; gap: var(--sp-40); }
  .float-card { display: none; }
}
@media (max-width: 640px) {
  .hero-clean { padding-top: var(--sp-40); }
  .trust-strip-items { gap: var(--sp-16); }
  .trust-strip-item { font-size: var(--fs-15); }
}
.vp-tablet .hero-clean-inner { flex-direction: column; align-items: stretch; gap: var(--sp-40); }
.vp-tablet .float-card { display: none; }
.vp-mobile .hero-clean-inner { flex-direction: column; align-items: stretch; gap: var(--sp-28); }
.vp-mobile .float-card { display: none; }
.vp-mobile .hero-clean { padding-top: var(--sp-40); }
.vp-mobile .trust-strip-item { font-size: var(--fs-15); }

/* ---------- hero: gecentreerd, met tegelrij eronder ---------- */
.hero-mid { display: flex; flex-direction: column; background: var(--color-page); padding-top: var(--sp-80); padding-bottom: var(--sp-40); }
.hero-mid-copy { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.display-1.is-centered, .lead.is-centered { text-align: center; max-width: var(--measure); align-self: center; }
.display-1.is-accent { color: var(--color-accent-deep); }
.lead.is-centered { max-width: var(--measure-lead); }
.hero-mid-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); padding-top: var(--sp-16); }
.button-primary.is-big, .button-ghost.is-big { padding: var(--sp-16) var(--sp-32); font-size: var(--fs-17); min-width: var(--w-cta); justify-content: center; }
.hero-mid-note { font-family: var(--font-body); font-size: var(--fs-14); color: var(--color-ink-3); text-align: center; }

.tile-row { display: flex; flex-direction: row; align-items: stretch; gap: var(--sp-16); padding-top: var(--sp-56); }
.tile {
  display: flex; flex-direction: column; gap: var(--sp-8);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
  overflow: hidden;
}
.tile.is-shot, .tile.is-photo { padding: var(--sp-0); }
.tile.is-note, .tile.is-agenda { padding: var(--sp-20); }
.tile.is-shot { flex: 1.4 1 var(--sp-0); }
.tile-img { width: 100%; height: 100%; min-height: var(--h-tile-row); object-fit: cover; display: block; }
.tile-label {
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent-deep);
}
.tile-foot { margin-top: auto; font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-3); }
.tile-line { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-12); padding-top: var(--sp-10); }
.tile-date {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--sp-40); padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-10); background: var(--color-accent-wash);
  color: var(--color-accent-deep); font-family: var(--font-mono); font-size: var(--fs-12);
  flex: 0 0 auto;
}
.tile-what { display: flex; flex-direction: column; gap: var(--sp-2); min-width: var(--sp-0); }

@media (max-width: 1080px) {
  .tile-row { flex-wrap: wrap; }
  .tile { flex: 1 1 var(--w-tile-min); }
  .tile.is-shot { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .hero-mid { padding-top: var(--sp-40); }
  .hero-mid-cta { align-self: stretch; }
  .button-primary.is-big, .button-ghost.is-big { width: 100%; }
  .tile-row { flex-direction: column; padding-top: var(--sp-32); }
  .tile { flex: 0 0 auto; }
  .tile-img { min-height: var(--h-tile-row-mob); }
}
.vp-tablet .tile-row { flex-wrap: wrap; }
.vp-tablet .tile { flex: 1 1 var(--w-tile-min); }
.vp-tablet .tile.is-shot { flex: 1 1 100%; }
.vp-mobile .hero-mid { padding-top: var(--sp-40); }
.vp-mobile .tile-row { flex-direction: column; padding-top: var(--sp-32); }
.vp-mobile .tile { flex: 0 0 auto; }
.vp-mobile .tile-img { min-height: var(--h-tile-row-mob); }
.vp-mobile .button-primary.is-big, .vp-mobile .button-ghost.is-big { width: 100%; }

/* Tegelrij: knoppen staan in de middelste kolom, tussen de tegels. */
.tile-row { align-items: stretch; }
.tile-mid {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-10);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
}
.tile-mid .hero-mid-cta { padding-top: var(--sp-0); align-self: stretch; }
.tile-mid .button-primary.is-big, .tile-mid .button-ghost.is-big { width: 100%; min-width: var(--sp-0); }
.tile-mid .tile.is-note { align-self: stretch; margin-top: var(--sp-10); }
.note-line { font-family: var(--font-body); font-size: var(--fs-17); color: var(--color-ink); }
.note-accent { color: var(--color-accent-deep); font-weight: var(--fw-bold); }

.tile.is-ui { padding: var(--sp-18); }
.ui-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-10); }
.ui-title { font-family: var(--font-display); font-size: var(--fs-17); font-weight: var(--fw-bold); }
.ui-sub { font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-3); }
.ui-line {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-10);
  padding-top: var(--sp-10); padding-bottom: var(--sp-10);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.ui-line.is-last { border-bottom-width: var(--sp-0); }
.ui-mark {
  width: var(--sp-28); height: var(--sp-28); border-radius: var(--r-pill);
  background: var(--color-accent-wash); flex: 0 0 auto;
}
.ui-what { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.ui-line .tag { flex: 0 0 auto; }

.tile.is-photo { position: relative; }
.tile-overlay {
  position: absolute;
  left: var(--sp-18); bottom: var(--sp-18);
  max-width: var(--w-overlay);
  font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  color: var(--color-on-dark);
  text-shadow: 0 var(--sp-2) var(--sp-16) var(--color-shadow-hard);
}
@media (max-width: 1080px) {
  .tile-mid { flex: 1 1 100%; order: -1; }
}
@media (max-width: 640px) {
  .tile-mid { order: -1; }
  .tile.is-ui { flex: 0 0 auto; }
}
.vp-tablet .tile-mid { flex: 1 1 100%; order: -1; }
.vp-mobile .tile-mid { order: -1; }

/* Trapsgewijze tegels: twee kolommen zakken, zoals in de referentie. */
.tile-row { align-items: flex-start; }
.tile.is-drop { margin-top: var(--sp-56); }
.tile-mid { align-self: flex-start; }
.tile.is-ui, .tile.is-photo { align-self: flex-start; }
.note-accent-line {
  font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight); color: var(--color-accent-deep);
}
.tile.is-note { gap: var(--sp-4); }
@media (max-width: 1080px) { .tile.is-drop { margin-top: var(--sp-0); } }
.vp-tablet .tile.is-drop, .vp-mobile .tile.is-drop { margin-top: var(--sp-0); }

.h-accent { color: var(--color-accent-deep); }
.rating-line { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--sp-8); }
.rating-text { font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--color-ink); }

/* Staande foto-uitsnedes: hoger kader zodat er niets wordt afgeknepen. */
.tile.is-photo .tile-img { height: var(--h-tile-photo); min-height: var(--h-tile-photo); }
.tile.is-photo { flex: 0 1 var(--w-tile-min); }
.tile.is-photo { border-color: transparent; }
@media (max-width: 1080px) {
  /* Vier tegels in een 2x2-raster: elke tegel neemt precies een halve regel,
     dus er kan er nooit een als enige op een regel overblijven. */
  .tile-row > .tile { flex: 1 1 calc(50% - var(--sp-16)); align-self: stretch; }
  .tile.is-photo { flex: 1 1 calc(50% - var(--sp-16)); }
  .tile.is-photo .tile-img { height: auto; min-height: var(--sp-0); aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .tile.is-photo { flex: 0 0 auto; align-self: stretch; }
  .tile.is-photo .tile-img { height: auto; min-height: var(--sp-0); aspect-ratio: 1 / 1; }
}
.vp-tablet .tile-row > .tile { flex: 1 1 calc(50% - var(--sp-16)); align-self: stretch; }
.vp-tablet .tile.is-photo .tile-img { height: auto; min-height: var(--sp-0); aspect-ratio: 4 / 3; }
.vp-mobile .tile.is-photo { flex: 0 0 auto; align-self: stretch; }
.vp-mobile .tile.is-photo .tile-img { height: auto; min-height: var(--sp-0); aspect-ratio: 1 / 1; }

/* ---------- hero: vijf zones, één compositie ---------- */
.hero-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--sp-16);
  padding-top: var(--sp-40);
}
.hero-col { display: flex; flex-direction: column; gap: var(--sp-12); min-width: var(--sp-0); }
.hero-col.is-feed { flex: 1.25 1 var(--sp-0); }
.hero-col.is-photo-a { flex: 0.9 1 var(--sp-0); }
.hero-col.is-mid { flex: 1 1 var(--sp-0); align-items: stretch; gap: var(--sp-10); }
.hero-col.is-activity { flex: 1 1 var(--sp-0); }
.hero-col.is-photo-b { flex: 0.9 1 var(--sp-0); }

/* Eén kaartstijl voor alle product-UI in de hero. */
.panel {
  display: flex;
  flex-direction: column;
  padding: var(--sp-18);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-10) var(--sp-32) var(--color-shadow-soft);
}
.panel.is-quiet { box-shadow: none; background: var(--color-surface); border-color: transparent; gap: var(--sp-2); }
.panel-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-12); }
.panel-title { font-family: var(--font-display); font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--color-ink); }
.panel-sub { font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-3); }
.panel-label {
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent-deep);
}

/* Reviewregel */
.rv {
  display: flex; flex-direction: row; gap: var(--sp-12);
  padding-top: var(--sp-14); padding-bottom: var(--sp-14);
  border-top: var(--bw-1) solid var(--color-line);
}
.rv.is-last { padding-bottom: var(--sp-0); }
.rv-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-40); height: var(--sp-40); flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-display); font-size: var(--fs-14); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}
.rv-body { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.rv-top { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.rv-name { font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--color-ink); }
.rv-when { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); flex: 0 0 auto; }
.rv-meta { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-3); }
.stars.is-small { font-size: var(--fs-13); }
.rv-text { font-family: var(--font-body); font-size: var(--fs-14); color: var(--color-ink-2); text-wrap: pretty; }
.rv-status {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-accent-deep);
}
.rv-status.is-new { color: var(--color-ink-3); }

/* Activiteitenregel */
.act {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-10);
  padding-top: var(--sp-12); padding-bottom: var(--sp-12);
  border-top: var(--bw-1) solid var(--color-line);
  font-family: var(--font-body); font-size: var(--fs-14); color: var(--color-ink-2);
}
.act.is-last { padding-bottom: var(--sp-0); }

/* Foto's: vaste staande verhouding, zelfde radius als de kaarten. */
.shot-card {
  position: relative;
  display: flex;
  border-radius: var(--r-20);
  overflow: hidden;
  box-shadow: 0 var(--sp-10) var(--sp-32) var(--color-shadow-soft);
}
.shot-img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.shot-overlay {
  position: absolute;
  left: var(--sp-18); bottom: var(--sp-18);
  max-width: var(--w-overlay);
  font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  color: var(--color-on-dark);
  text-shadow: 0 var(--sp-2) var(--sp-16) var(--color-shadow-hard);
}

/* Tablet: drie zones boven, twee eronder. Geen wees mogelijk. */
@media (max-width: 1080px) {
  .hero-grid { flex-wrap: wrap; align-items: stretch; }
  .hero-col.is-mid { flex: 1 1 100%; order: -1; }
  .hero-col.is-feed { flex: 1 1 calc(50% - var(--sp-16)); }
  .hero-col.is-activity { flex: 1 1 calc(50% - var(--sp-16)); }
  .hero-col.is-photo-a, .hero-col.is-photo-b { flex: 1 1 calc(50% - var(--sp-16)); }
  .shot-img { aspect-ratio: 4 / 3; }
}
/* Mobiel: eigen volgorde — kop, knoppen, foto, reviews, activiteit. */
@media (max-width: 720px) {
  .hero-grid { flex-direction: column; align-items: stretch; }
  .hero-col.is-mid { order: -2; }
  .hero-col.is-photo-a { order: -1; }
  .hero-col.is-photo-b { display: none; }
  .shot-img { aspect-ratio: 1 / 1; }
  .button-primary.is-big, .button-ghost.is-big { width: 100%; }
}
.vp-tablet .hero-grid { flex-wrap: wrap; align-items: stretch; }
.vp-tablet .hero-col.is-mid { flex: 1 1 100%; order: -1; }
.vp-tablet .hero-col.is-feed, .vp-tablet .hero-col.is-activity,
.vp-tablet .hero-col.is-photo-a, .vp-tablet .hero-col.is-photo-b { flex: 1 1 calc(50% - var(--sp-16)); }
.vp-tablet .shot-img { aspect-ratio: 4 / 3; }
.vp-mobile .hero-grid { flex-direction: column; align-items: stretch; }
.vp-mobile .hero-col.is-mid { order: -2; }
.vp-mobile .hero-col.is-photo-a { order: -1; }
.vp-mobile .hero-col.is-photo-b { display: none; }
.vp-mobile .shot-img { aspect-ratio: 1 / 1; }

/* Eén overzicht: vier onderdelen naast elkaar in plaats van een schermafbeelding. */
.one-view {
  display: flex; flex-direction: column; gap: var(--sp-20);
  width: 100%;
  padding: var(--sp-28);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
}
.one-view-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.one-view-body { display: flex; flex-direction: row; gap: var(--sp-24); }
.ov-cell {
  display: flex; flex-direction: column; gap: var(--sp-8);
  flex: 1 1 var(--sp-0); min-width: var(--sp-0);
  padding-top: var(--sp-16);
  border-top: var(--bw-2) solid var(--color-accent);
}
.ov-label { font-family: var(--font-display); font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--color-ink); }
.ov-line {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-8);
  font-family: var(--font-body); font-size: var(--fs-14); color: var(--color-ink-2);
}
.ov-line.is-wait { color: var(--color-ink-3); }
@media (max-width: 900px) {
  .one-view-body { flex-wrap: wrap; }
  .ov-cell { flex: 1 1 calc(50% - var(--sp-24)); }
}
@media (max-width: 560px) {
  .one-view { padding: var(--sp-20); }
  .one-view-body { flex-direction: column; gap: var(--sp-20); }
}
.vp-tablet .one-view-body { flex-wrap: wrap; }
.vp-tablet .ov-cell { flex: 1 1 calc(50% - var(--sp-24)); }
.vp-mobile .one-view-body { flex-direction: column; gap: var(--sp-20); }
.vp-mobile .one-view { padding: var(--sp-20); }

/* Profielfoto's in de reviewfeed. */
img.rv-avatar {
  width: var(--sp-40); height: var(--sp-40);
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--color-surface);
  flex: 0 0 auto;
}
/* Zacht groen verloop onder de hero, in plaats van vlak wit. */
.hero-mid {
  background-image: linear-gradient(180deg, var(--color-page) 0%, var(--color-accent-veil) 55%, var(--color-page) 100%);
}

/* In de kop is alleen "#1" groen; het doelgroepwoord houdt de koptekstkleur. */
.rotator.is-ink .rotator-item { color: var(--color-ink); }

/* Vijf zones, één blok: gelijke hoogte, niets overlapt. */
.hero-grid { align-items: stretch; }
.hero-col.is-feed { flex: 1.15 1 var(--sp-0); }
.hero-col.is-photo-a, .hero-col.is-photo-b { flex: 0.85 1 var(--sp-0); }
.hero-col.is-mid { flex: 1 1 var(--sp-0); }
.hero-col.is-activity { flex: 1 1 var(--sp-0); }

/* Knoppen mogen krimpen met hun kolom; anders duwen ze over de buren heen. */
.hero-col.is-mid .button-primary.is-big,
.hero-col.is-mid .button-ghost.is-big { min-width: var(--sp-0); width: 100%; }
.hero-col.is-mid .panel.is-quiet { margin-top: auto; }

/* Foto's vullen de kolomhoogte in plaats van een eigen verhouding te houden. */
.hero-col.is-photo-a .shot-card, .hero-col.is-photo-b .shot-card { flex: 1 1 var(--sp-0); }
.hero-col.is-photo-a .shot-img, .hero-col.is-photo-b .shot-img {
  height: 100%;
  aspect-ratio: auto;
  min-height: var(--h-hero-photo-min);
}
.shot-overlay { max-width: calc(100% - var(--sp-36)); }
@media (max-width: 1080px) {
  .hero-col.is-photo-a .shot-img, .hero-col.is-photo-b .shot-img { height: auto; aspect-ratio: 4 / 3; min-height: var(--sp-0); }
}
@media (max-width: 720px) {
  .hero-col.is-photo-a .shot-img { aspect-ratio: 1 / 1; }
}
.vp-tablet .hero-col.is-photo-a .shot-img, .vp-tablet .hero-col.is-photo-b .shot-img { height: auto; aspect-ratio: 4 / 3; min-height: var(--sp-0); }
.vp-mobile .hero-col.is-photo-a .shot-img { height: auto; aspect-ratio: 1 / 1; min-height: var(--sp-0); }

/* Rekensom die zich één keer zelf invult. */
.calc.is-demo .calc-input-wrap { border-color: var(--color-accent); }
.calc-input.is-typing { color: var(--color-accent-deep); }
.calc-hint {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-8);
  font-family: var(--font-mono); font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.calc.is-demo .calc-hint { opacity: 1; }

/* ---------- hero-compositie: onderkanten op één lijn ---------- */
.hero-grid {
  align-items: flex-end;
  height: var(--h-hero-grid);
  gap: var(--sp-20);
}
.hero-col { height: 100%; }
.hero-col.is-feed, .hero-col.is-photo-a, .hero-col.is-mid,
.hero-col.is-activity, .hero-col.is-photo-b { flex: 1 1 var(--sp-0); }
/* Hoog, laag, hoog, laag, hoog. */
.hero-col.is-photo-a, .hero-col.is-activity { height: 68%; }

/* De reviewfeed loopt bewust door onder de onderrand. */
.hero-col.is-feed .panel { height: 100%; overflow: hidden; }
.hero-col.is-activity .panel { height: 100%; overflow: hidden; }

/* Midden: knoppen bovenaan, kaartje tegen de onderlijn. */
.hero-col.is-mid { justify-content: flex-start; }

/* Foto's in een licht kader, zoals de rest van de kaarten. */
.hero-col.is-photo-a .shot-card, .hero-col.is-photo-b .shot-card {
  height: 100%;
  padding: var(--sp-6);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
}
.hero-col.is-photo-a .shot-img, .hero-col.is-photo-b .shot-img {
  height: 100%;
  min-height: var(--sp-0);
  border-radius: var(--r-14);
}
.shot-overlay { left: var(--sp-24); bottom: var(--sp-24); }

@media (max-width: 1080px) {
  .hero-grid { height: auto; align-items: stretch; }
  .hero-col, .hero-col.is-photo-a, .hero-col.is-activity { height: auto; }
  .hero-col.is-feed .panel, .hero-col.is-activity .panel { height: auto; overflow: visible; }
}
.vp-tablet .hero-grid { height: auto; align-items: stretch; }
.vp-tablet .hero-col, .vp-tablet .hero-col.is-photo-a, .vp-tablet .hero-col.is-activity { height: auto; }
.vp-tablet .hero-col.is-feed .panel, .vp-tablet .hero-col.is-activity .panel { height: auto; overflow: visible; }
.vp-mobile .hero-grid { height: auto; align-items: stretch; }
.vp-mobile .hero-col { height: auto; }

/* ---------- typografische finish ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* Cijfers op vaste breedte: rustiger bij oplopende tellers. */
.mono, .calc-out-value, .rank-pos, .stat-value, .plan-price, .metric-value, .mock-rank {
  font-variant-numeric: tabular-nums;
}
.display-1 { letter-spacing: -0.05em; }
.display-2 { letter-spacing: -0.042em; }
.heading-3, .heading-4, .faq-q, .pillar-label, .plan-name { letter-spacing: -0.022em; }
.button-primary, .button-ghost { letter-spacing: -0.01em; }

/* ---------- mobiel: sluitende regels, ook in de 390px-preview ---------- */
/* De preview schaalt de container, niet het venster, dus de mediaquery's
   vuren daar niet. Deze regels doen hetzelfde voor .vp-mobile. */
.vp-mobile .showcase-panel.is-active { flex-direction: column; align-items: stretch; gap: var(--sp-24); }
.vp-mobile .calc, .vp-mobile .versus { flex-direction: column; gap: var(--sp-24); }
.vp-mobile .showcase-copy { align-items: stretch; }
.vp-mobile .showcase-copy .button-ghost { align-self: stretch; text-align: center; justify-content: center; }

/* Een lange waarde rechts mag afbreken in plaats van uit de kaart lopen. */
.mini-row { align-items: flex-start; gap: var(--sp-16); }
.mini-row > :last-child { text-align: right; min-width: var(--sp-0); }
.mini-row > :first-child { min-width: var(--sp-0); }
@media (max-width: 520px) {
  .mini-row { flex-direction: column; gap: var(--sp-4); }
  .mini-row > :last-child { text-align: left; }
}
.vp-mobile .mini-row { flex-direction: column; gap: var(--sp-4); }
.vp-mobile .mini-row > :last-child { text-align: left; }

/* Doelgroepen in de vertrouwensbalk: één rustige rij per regel. */
@media (max-width: 640px) {
  .trust-strip-items { gap: var(--sp-12) var(--sp-20); }
}
.vp-mobile .trust-strip-items { gap: var(--sp-12) var(--sp-20); }
.vp-mobile .trust-strip-item { font-size: var(--fs-15); }

/* Knoppen en pillen op telefoon: volle breedte waar dat rustiger leest. */
.vp-mobile .hero-mid-cta { align-self: stretch; }
.vp-mobile .eco-pills { justify-content: flex-start; }

/* De fotokolommen erven op desktop hun hoogte van het raster. Zodra dat raster
   uit elkaar valt (tablet, telefoon) moet die 100% los, anders klapt de keten
   kaart → afbeelding dicht tot nul. */
@media (max-width: 1080px) {
  .hero-col.is-photo-a .shot-card, .hero-col.is-photo-b .shot-card { height: auto; }
  .hero-col.is-photo-a .shot-img, .hero-col.is-photo-b .shot-img { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .hero-col.is-photo-a .shot-img, .hero-col.is-photo-b .shot-img { aspect-ratio: 4 / 3; }
}
.vp-tablet .hero-col.is-photo-a .shot-card, .vp-tablet .hero-col.is-photo-b .shot-card { height: auto; }
.vp-tablet .hero-col.is-photo-a .shot-img, .vp-tablet .hero-col.is-photo-b .shot-img { height: auto; aspect-ratio: 4 / 3; }
.vp-mobile .hero-col.is-photo-a .shot-card, .vp-mobile .hero-col.is-photo-b .shot-card { height: auto; }
.vp-mobile .hero-col.is-photo-a .shot-img, .vp-mobile .hero-col.is-photo-b .shot-img { height: auto; aspect-ratio: 4 / 3; min-height: var(--sp-0); }

/* Op desktop vult de fotokaart de kolom via flex-basis 0. In een kolom-flex
   (tablet/telefoon) betekent basis 0 juist HOOGTE nul, dus daar moet flex los. */
@media (max-width: 1080px) {
  .hero-col.is-photo-a .shot-card, .hero-col.is-photo-b .shot-card { flex: 0 0 auto; }
}
.vp-tablet .hero-col.is-photo-a .shot-card, .vp-tablet .hero-col.is-photo-b .shot-card { flex: 0 0 auto; }
.vp-mobile .hero-col.is-photo-a .shot-card, .vp-mobile .hero-col.is-photo-b .shot-card { flex: 0 0 auto; }
/* Tabs mogen niet buiten de kaart lopen; ze schuiven horizontaal. */
.vp-mobile .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; }
.vp-mobile .showcase-tab { flex: 0 0 auto; }

/* ---------- hero: drie agents als hoofdrolspelers ---------- */
/* Zone 5 was een foto, is nu de Search Agent: zelfde hoogtegedrag als zone 1. */
.hero-col.is-search { display: flex; flex-direction: column; gap: var(--sp-12); min-width: var(--sp-0); flex: 1 1 var(--sp-0); height: 100%; }
.hero-col.is-search .panel { height: 100%; overflow: hidden; }

.agent-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
  white-space: nowrap;
}

/* Social Agent: de post die klaarstaat. */
.post-mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  background: var(--color-surface);
  border-radius: var(--r-14);
}
.post-quote {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.post-by { font-size: var(--fs-13); color: var(--color-ink-3); }

/* Search Agent: de kansenlijst. */
.kans {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.kans.is-last { border-bottom-width: var(--sp-0); }
.kans-q { font-size: var(--fs-14); color: var(--color-ink-2); min-width: var(--sp-0); }

/* Tablet: de Search Agent schuift mee in het 2x2-raster. */
@media (max-width: 1080px) {
  .hero-col.is-search { flex: 1 1 calc(50% - var(--sp-16)); height: auto; }
  .hero-col.is-search .panel { height: auto; overflow: visible; }
}
.vp-tablet .hero-col.is-search { height: auto; }
.vp-tablet .hero-col.is-search .panel { height: auto; overflow: visible; }
/* Telefoon: onder de reviews, want daar is de volgorde verticaal. */
@media (max-width: 720px) {
  .hero-col.is-search { order: 4; height: auto; }
  .hero-col.is-search .panel { height: auto; overflow: visible; }
}
.vp-mobile .hero-col.is-search { order: 4; height: auto; }
.vp-mobile .hero-col.is-search .panel { height: auto; overflow: visible; }

/* ---------- hero-raster: één sluitende regel per breakpoint ----------
   Dit blok staat opzettelijk als laatste in het bestand. Eerdere losse
   flex-regels zonder mediaquery wonnen het van de tablet- en telefoonregels;
   door alles hier af te sluiten geldt per breedte één beslissing. */
@media (min-width: 1081px) {
  .hero-grid { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; height: var(--h-hero-grid); gap: var(--sp-20); }
  .hero-grid > .hero-col { flex: 1 1 var(--sp-0); height: 100%; }
  .hero-grid > .hero-col.is-photo-a, .hero-grid > .hero-col.is-activity { height: 68%; }
}
@media (max-width: 1080px) and (min-width: 721px) {
  .hero-grid { flex-direction: row; flex-wrap: wrap; align-items: stretch; height: auto; gap: var(--sp-20); }
  .hero-grid > .hero-col { flex: 1 1 calc(50% - var(--sp-20)); height: auto; }
  .hero-grid > .hero-col.is-mid { flex: 1 1 100%; order: -1; }
  .hero-grid > .hero-col .panel { height: auto; overflow: visible; }
}
@media (max-width: 720px) {
  .hero-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; height: auto; gap: var(--sp-16); }
  .hero-grid > .hero-col { flex: 0 0 auto; height: auto; }
  .hero-grid > .hero-col.is-mid { order: -2; }
  .hero-grid > .hero-col.is-photo-a { order: -1; }
  .hero-grid > .hero-col .panel { height: auto; overflow: visible; }
}
/* Dezelfde drie standen voor de schaalpreviews. */
.vp-tablet .hero-grid { flex-direction: row; flex-wrap: wrap; align-items: stretch; height: auto; }
.vp-tablet .hero-grid > .hero-col { flex: 1 1 calc(50% - var(--sp-20)); height: auto; }
.vp-tablet .hero-grid > .hero-col.is-mid { flex: 1 1 100%; order: -1; }
.vp-tablet .hero-grid > .hero-col .panel { height: auto; overflow: visible; }
.vp-mobile .hero-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; height: auto; gap: var(--sp-16); }
.vp-mobile .hero-grid > .hero-col { flex: 0 0 auto; height: auto; }
.vp-mobile .hero-grid > .hero-col.is-mid { order: -2; }
.vp-mobile .hero-grid > .hero-col.is-photo-a { order: -1; }
.vp-mobile .hero-grid > .hero-col .panel { height: auto; overflow: visible; }

/* Een lange naam mag de sterrenregel niet raken: één regel, netjes afgekapt. */
.rv-name {
  line-height: var(--lh-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: var(--sp-0);
}
.rv-top { align-items: center; }

/* Wisselend woord: zachte crossfade, geen sprong in de regel. */
.word-swap {
  display: inline-block;
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.word-swap.is-out { opacity: 0; transform: translateY(calc(var(--sp-4) * -1)); }
/* In een label krijgt het woord dezelfde groene nadruk als in de kop. */
.word-accent { color: var(--color-accent-deep); font-weight: var(--fw-semi); }

/* De hint hoort er altijd te staan, niet alleen tijdens een demonstratie. */
.calc-hint.is-static { opacity: 1; }

/* Een veld waar je in kunt typen, moet daar ook naar uitzien. */
.calc-input-wrap { cursor: text; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.calc-input-wrap:hover { border-color: var(--color-line-strong); }
.calc-input-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--sp-3) var(--color-accent-wash);
}
.calc-input::selection { background: var(--color-accent-wash); color: var(--color-ink); }

/* ---------- showpiece: productbeeld op ware grootte ----------
   Beelden worden nooit groter getoond dan hun eigen pixels, dus blijven ze
   scherp. Het beeld staat in een licht getint vlak zodat de kaart eromheen
   rust geeft in plaats van een rand op een rand. */
.showpiece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-56) var(--sp-40);
  background: var(--color-accent-veil);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-24);
}
.showpiece-phone {
  display: block;
  width: 100%;
  max-width: var(--w-phone-shot);
  height: auto;
  filter: drop-shadow(0 var(--sp-24) var(--sp-56) var(--color-shadow-hard));
}
.showpiece-ui {
  display: block;
  width: 100%;
  max-width: var(--w-ui-shot);
  height: auto;
  border-radius: var(--r-14);
  border: var(--bw-1) solid var(--color-line);
  background: var(--color-page);
  box-shadow: 0 var(--sp-24) var(--sp-64) var(--color-shadow-soft);
}
.showpiece-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
  text-align: center;
}
@media (max-width: 640px) {
  .showpiece { padding: var(--sp-28) var(--sp-16); gap: var(--sp-16); border-radius: var(--r-20); }
}
.vp-mobile .showpiece { padding: var(--sp-28) var(--sp-16); gap: var(--sp-16); }

/* Een brede tabel wordt op een telefoon onleesbaar als je hem laat krimpen.
   Daarom schuift hij daar horizontaal, op leesbare grootte. */
@media (max-width: 900px) {
  .showpiece { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .showpiece-ui-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-14);
  }
  .showpiece-ui-scroll .showpiece-ui { min-width: var(--w-ui-min); }
}
.vp-mobile .showpiece-ui-scroll { width: 100%; overflow-x: auto; }
.vp-mobile .showpiece-ui-scroll .showpiece-ui { min-width: var(--w-ui-min); }

/* ---------- quotes: rustiger, groter, beter gespatieerd ---------- */
.quote-text {
  font-size: var(--fs-26);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -0.028em;
  color: var(--color-ink);
  text-wrap: pretty;
  max-width: var(--measure);
}
.card-quote {
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  box-shadow: 0 var(--sp-1) var(--sp-2) var(--color-shadow-soft),
              0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
}
.quote-person .strong { letter-spacing: -0.015em; }
.post-quote {
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
}
@media (max-width: 640px) { .quote-text { font-size: var(--fs-20); } }
.vp-mobile .quote-text { font-size: var(--fs-20); }

/* ---------- kaarten: één zachte, gelaagde schaduw i.p.v. platte randen ---------- */
.card-panel, .panel, .mini-panel, .agent-card, .case-card, .tile {
  box-shadow: 0 var(--sp-1) var(--sp-2) var(--color-shadow-soft),
              0 var(--sp-12) var(--sp-32) var(--color-shadow-soft);
}
.button-primary {
  box-shadow: 0 var(--sp-8) var(--sp-20) var(--color-accent-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.button-primary:hover { transform: translateY(calc(var(--sp-1) * -1)); }
.button-primary:active { transform: translateY(0); box-shadow: 0 var(--sp-2) var(--sp-8) var(--color-accent-shadow); }
.button-ghost { transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; }

/* ---------- hero-mozaïek: drie brede kolommen ----------
   Vijf smalle kolommen lieten elke regel afbreken. Drie kolommen van ruim
   driehonderd pixels geven de kaarten de breedte die ze nodig hebben. */
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-8);
}
.hero-cta-row { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); }
.hero-cta .hero-mid-note { text-align: center; }

.mosaic {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-20);
  padding-top: var(--sp-56);
}
.mosaic-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
}
/* Middelste kolom start iets lager: dat geeft het geheel ritme zonder
   dat er een gat valt. */
.mosaic-col:nth-child(2) { padding-top: var(--sp-32); }
.panel.is-tall { min-height: var(--h-panel-tall); }
.panel.is-accent { background: var(--color-accent-veil); border-color: var(--color-accent-line); }

.shot-card.is-mosaic { padding: var(--sp-0); border: none; box-shadow: none; }
.shot-card.is-mosaic .shot-img {
  width: 100%;
  height: var(--h-mosaic-photo);
  object-fit: cover;
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow-soft);
}

@media (max-width: 1080px) {
  .mosaic { flex-wrap: wrap; }
  .mosaic-col { flex: 1 1 calc(50% - var(--sp-20)); }
  .mosaic-col:nth-child(2) { padding-top: var(--sp-0); }
  .panel.is-tall { min-height: var(--sp-0); }
}
@media (max-width: 720px) {
  .mosaic { flex-direction: column; gap: var(--sp-16); padding-top: var(--sp-32); }
  .mosaic-col { flex: 0 0 auto; gap: var(--sp-16); }
  .hero-cta-row { flex-direction: column; align-self: stretch; }
  .hero-cta-row .button-primary, .hero-cta-row .button-ghost { width: 100%; text-align: center; justify-content: center; }
  .shot-card.is-mosaic .shot-img { height: var(--h-mosaic-photo-mob); }
}
.vp-tablet .mosaic { flex-wrap: wrap; }
.vp-tablet .mosaic-col { flex: 1 1 calc(50% - var(--sp-20)); }
.vp-tablet .mosaic-col:nth-child(2) { padding-top: var(--sp-0); }
.vp-tablet .panel.is-tall { min-height: var(--sp-0); }
.vp-mobile .mosaic { flex-direction: column; gap: var(--sp-16); padding-top: var(--sp-32); }
.vp-mobile .mosaic-col { flex: 0 0 auto; gap: var(--sp-16); padding-top: var(--sp-0); }
.vp-mobile .panel.is-tall { min-height: var(--sp-0); }
.vp-mobile .hero-cta-row { flex-direction: column; align-self: stretch; }
.vp-mobile .hero-cta-row .button-primary, .vp-mobile .hero-cta-row .button-ghost { width: 100%; text-align: center; justify-content: center; }
.vp-mobile .shot-card.is-mosaic .shot-img { height: var(--h-mosaic-photo-mob); }

/* De kolommen zijn nu breed genoeg; een naam mag weer volledig staan. */
.rv-name { white-space: normal; overflow: visible; text-overflow: clip; }
.rv-top { align-items: baseline; gap: var(--sp-12); }
.rv-when { align-self: flex-start; }

/* ---------- reviewslider ---------- */
.rv-slider { display: flex; flex-direction: column; gap: var(--sp-16); }
.rv-track {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: var(--sp-0);
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track > .rv {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-bottom-width: var(--sp-0);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.rv-dots { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); }
.rv-dot {
  width: var(--sp-24);
  height: var(--sp-4);
  border-radius: var(--r-pill);
  border: none;
  padding: var(--sp-0);
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.rv-dot.is-active { background: var(--color-accent); width: var(--sp-40); }
.rv-dot:hover { background: var(--color-accent-deep); }

/* ---------- FAQ: uitklapbaar ---------- */
.faq-q {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--sp-0);
  cursor: pointer;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--color-accent-deep); }
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: var(--sp-24);
  height: var(--sp-24);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  transition: background 0.3s ease, transform 0.3s ease;
}
.faq-mark::before, .faq-mark::after { content: none; }
/* Het plusteken is opgebouwd uit een achtergrond, niet uit pseudo-elementen. */
.faq-mark {
  background-image:
    linear-gradient(var(--color-ink-2), var(--color-ink-2)),
    linear-gradient(var(--color-ink-2), var(--color-ink-2));
  background-size: var(--sp-10) var(--bw-2), var(--bw-2) var(--sp-10);
  background-position: center, center;
  background-repeat: no-repeat;
}
.faq-item.is-open .faq-mark {
  background-color: var(--color-accent-wash);
  background-size: var(--sp-10) var(--bw-2), var(--bw-2) var(--sp-0);
  background-image:
    linear-gradient(var(--color-accent-deep), var(--color-accent-deep)),
    linear-gradient(var(--color-accent-deep), var(--color-accent-deep));
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin: var(--sp-0);
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, padding-top 0.34s ease;
  opacity: 0;
  padding-top: var(--sp-0);
}
.faq-a > span { min-height: var(--sp-0); }
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: var(--sp-12);
}

/* ---------- mozaïek v2: vijf tegels, geen lege ruimte ---------- */
/* De vaste hoogte is eraf: elke tegel is zo hoog als zijn inhoud, en de
   kolommen vullen elkaar aan in plaats van dat er een gat onder valt. */
.panel.is-tall { min-height: var(--sp-0); }
.mosaic-col:nth-child(2) { padding-top: var(--sp-0); }
.mosaic-col:nth-child(3) { padding-top: var(--sp-32); }

/* Het telefoonbeeld in de Social Agent-tegel. */
.panel.is-phone { align-items: stretch; }
.phone-shot {
  display: block;
  width: 100%;
  max-width: var(--w-phone-inline);
  height: auto;
  align-self: center;
  border-radius: var(--r-14);
}

/* Productbeeld als eigen tegel: alleen het bovenste deel, netjes afgesneden. */
.tile-shot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  overflow: hidden;
  box-shadow: 0 var(--sp-1) var(--sp-2) var(--color-shadow-soft),
              0 var(--sp-12) var(--sp-32) var(--color-shadow-soft);
}
.tile-shot-ui {
  display: block;
  width: 100%;
  height: var(--h-tile-shot);
  object-fit: cover;
  object-position: left top;
}
.tile-shot-cap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-14) var(--sp-20);
  border-top: var(--bw-1) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-2);
}
@media (max-width: 1080px) { .mosaic-col:nth-child(3) { padding-top: var(--sp-0); } }
@media (max-width: 720px) { .tile-shot-ui { height: var(--h-tile-shot-mob); } }
.vp-tablet .mosaic-col:nth-child(3) { padding-top: var(--sp-0); }
.vp-mobile .mosaic-col:nth-child(3) { padding-top: var(--sp-0); }
.vp-mobile .tile-shot-ui { height: var(--h-tile-shot-mob); }

/* Het doelgroepwoord in de kop krijgt de accentkleur, net als #1. */
.rotator.is-accent .rotator-item { color: var(--color-accent-deep); }

/* ---------- heromozaïek: vijf getrapte tegels ----------
   Zoals de referentie: vijf smalle kolommen die op verschillende hoogtes
   beginnen en onderaan het scherm worden afgesneden. De sectie snijdt af,
   niet de tegels zelf, zodat er geen harde rand ontstaat. */
.hero-mid { overflow: hidden; }
.mosaic {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-top: var(--sp-40);
  margin-bottom: calc(var(--sp-64) * -1);
}
.mcol { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
/* De trap: buiten laag, midden hoog. */
.mcol.is-a { padding-top: var(--sp-12); }
.mcol.is-b { padding-top: var(--sp-56); }
.mcol.is-c { padding-top: var(--sp-0); }
.mcol.is-d { padding-top: var(--sp-40); }
.mcol.is-e { padding-top: var(--sp-8); }

.mtile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-18);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-1) var(--sp-2) var(--color-shadow-soft),
              0 var(--sp-16) var(--sp-40) var(--color-shadow-soft);
}
.mtile.is-quiet { background: var(--color-surface); border-color: transparent; box-shadow: none; }
.mtile.is-tint { background: var(--color-accent-veil); border-color: var(--color-accent-line); }
.mtile.is-photo { padding: var(--sp-0); border: none; overflow: hidden; }
.mtile-img { display: block; width: 100%; height: var(--h-mtile-photo); object-fit: cover; }
.mtile-overlay {
  align-self: flex-start;
  margin-top: calc(var(--h-mtile-overlay) * -1);
  padding: var(--sp-16) var(--sp-20);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
  text-shadow: 0 var(--sp-1) var(--sp-8) rgba(0, 0, 0, 0.55);
}
.mtile-head { display: flex; flex-direction: row; align-items: center; }
.mtile-foot { border-top: var(--bw-1) solid var(--color-line); padding-top: var(--sp-8); }
.mtile-foot .kans { border-bottom: none; padding-top: var(--sp-0); padding-bottom: var(--sp-0); display: flex; flex-direction: row; justify-content: space-between; }
.mtile-claim {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  color: var(--color-ink);
}
.mtile-phone { display: block; width: 100%; height: auto; border-radius: var(--r-14); }

/* CTA staat in de middelste kolom, boven de Search-tegel. */
.mcol.is-c .hero-cta { gap: var(--sp-10); padding-top: var(--sp-0); }
.mcol.is-c .hero-cta .button-primary, .mcol.is-c .hero-cta .button-ghost { width: 100%; justify-content: center; text-align: center; }

/* Tablet: twee rijen, geen trap. */
@media (max-width: 1080px) {
  .mosaic { flex-wrap: wrap; margin-bottom: var(--sp-0); padding-top: var(--sp-32); }
  .mcol { flex: 1 1 calc(33.333% - var(--sp-16)); padding-top: var(--sp-0); }
  .mcol.is-c { flex: 1 1 100%; order: -1; }
  .mcol.is-c .hero-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  .mcol.is-c .hero-cta .button-primary, .mcol.is-c .hero-cta .button-ghost { width: auto; }
}
@media (max-width: 720px) {
  .mosaic { flex-direction: column; gap: var(--sp-14); }
  .mcol { flex: 0 0 auto; }
  .mcol.is-c .hero-cta { flex-direction: column; }
  .mcol.is-c .hero-cta .button-primary, .mcol.is-c .hero-cta .button-ghost { width: 100%; }
  .mtile-img { height: var(--h-mtile-photo-mob); }
}
.vp-tablet .mosaic { flex-wrap: wrap; margin-bottom: var(--sp-0); }
.vp-tablet .mcol { flex: 1 1 calc(33.333% - var(--sp-16)); padding-top: var(--sp-0); }
.vp-tablet .mcol.is-c { flex: 1 1 100%; order: -1; }
.vp-mobile .mosaic { flex-direction: column; gap: var(--sp-14); margin-bottom: var(--sp-0); }
.vp-mobile .mcol { flex: 0 0 auto; padding-top: var(--sp-0); }
.vp-mobile .mcol.is-c .hero-cta { flex-direction: column; }
.vp-mobile .mcol.is-c .hero-cta .button-primary, .vp-mobile .mcol.is-c .hero-cta .button-ghost { width: 100%; }
.vp-mobile .mtile-img { height: var(--h-mtile-photo-mob); }

/* Het gepubliceerde artikel: bovenkant zichtbaar, netjes afgesneden. */
.artikel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-14);
  border: var(--bw-1) solid var(--color-line);
}
.artikel-img { display: block; width: 100%; height: var(--h-artikel); object-fit: cover; object-position: center top; }
@media (max-width: 720px) { .artikel-img { height: var(--h-artikel-mob); } }
.vp-mobile .artikel-img { height: var(--h-artikel-mob); }

/* ---------- heromozaïek v3: één geheel, onderaan afgesneden ----------
   Alle vijf de kolommen zijn even hoog en eindigen op dezelfde lijn; het
   verschil zit in de bovenkant. De sectie snijdt de onderrand af, zodat het
   beeld doorloopt in plaats van te stoppen. Laatste blok in het bestand,
   dus dit wint van alle eerdere mozaïekregels. */
.hero-mid { overflow: hidden; }
.mosaic {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--sp-16);
  height: var(--h-mosaic);
  padding-top: var(--sp-40);
  margin-bottom: calc(var(--sp-56) * -1);
}
.mosaic > .mcol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  flex: 1 1 var(--sp-0);
  min-width: var(--sp-0);
  height: 100%;
}
.mosaic > .mcol.is-a { padding-top: var(--sp-24); }
.mosaic > .mcol.is-b { padding-top: var(--sp-72); }
.mosaic > .mcol.is-c { padding-top: var(--sp-0); }
.mosaic > .mcol.is-d { padding-top: var(--sp-56); }
.mosaic > .mcol.is-e { padding-top: var(--sp-16); }
/* Elke tegel vult wat er in zijn kolom over is en snijdt netjes af. */
.mosaic .mtile { flex: 1 1 var(--sp-0); overflow: hidden; }
.mosaic .mcol.is-c .mtile { flex: 1 1 var(--sp-0); }

.mtile-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
  white-space: nowrap;
}
.mosaic .mtile-img { height: 100%; }
.mosaic .mtile-phone { max-width: 100%; margin-top: auto; margin-bottom: calc(var(--sp-24) * -1); }
.mosaic .artikel { flex: 1 1 var(--sp-0); border-bottom: none; border-radius: var(--r-14) var(--r-14) var(--sp-0) var(--sp-0); }
.mosaic .artikel-img { height: 100%; }
.mosaic .mcol.is-c .hero-cta { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .mosaic { flex-wrap: wrap; height: auto; margin-bottom: var(--sp-0); padding-top: var(--sp-32); }
  .mosaic > .mcol { flex: 1 1 calc(33.333% - var(--sp-16)); height: auto; padding-top: var(--sp-0); }
  .mosaic > .mcol.is-c { flex: 1 1 100%; order: -1; }
  .mosaic .mtile { flex: 0 0 auto; }
  .mosaic .mtile-img { height: var(--h-mtile-photo); }
  .mosaic .artikel-img { height: var(--h-artikel); }
  .mosaic .mtile-phone { margin-bottom: var(--sp-0); }
}
@media (max-width: 720px) {
  .mosaic { flex-direction: column; gap: var(--sp-14); }
  .mosaic > .mcol { flex: 0 0 auto; }
  .mosaic .mtile-img { height: var(--h-mtile-photo-mob); }
  .mosaic .artikel-img { height: var(--h-artikel-mob); }
}
.vp-tablet .mosaic { flex-wrap: wrap; height: auto; margin-bottom: var(--sp-0); }
.vp-tablet .mosaic > .mcol { flex: 1 1 calc(33.333% - var(--sp-16)); height: auto; padding-top: var(--sp-0); }
.vp-tablet .mosaic > .mcol.is-c { flex: 1 1 100%; order: -1; }
.vp-tablet .mosaic .mtile { flex: 0 0 auto; }
.vp-tablet .mosaic .mtile-img { height: var(--h-mtile-photo); }
.vp-tablet .mosaic .artikel-img { height: var(--h-artikel); }
.vp-tablet .mosaic .mtile-phone { margin-bottom: var(--sp-0); }
.vp-mobile .mosaic { flex-direction: column; height: auto; gap: var(--sp-14); margin-bottom: var(--sp-0); }
.vp-mobile .mosaic > .mcol { flex: 0 0 auto; height: auto; padding-top: var(--sp-0); }
.vp-mobile .mosaic .mtile { flex: 0 0 auto; }
.vp-mobile .mosaic .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .artikel-img { height: var(--h-artikel-mob); }
.vp-mobile .mosaic .mtile-phone { margin-bottom: var(--sp-0); }

/* ---------- heromozaïek v4 ----------
   De vaste kolomhoogte is eraf: die rekte kaarten met weinig inhoud uit tot
   lege vlakken. Elke tegel is nu zo hoog als zijn eigen inhoud; de beelden
   zijn zo gemaat dat de onderkanten vanzelf op één lijn uitkomen. */
.mosaic { height: auto; align-items: flex-start; }
.mosaic > .mcol { height: auto; }
.mosaic .mtile { flex: 0 0 auto; }
.mosaic .mcol.is-c .mtile { flex: 0 0 auto; }

/* Bovenkanten getrapt, hoogtes complementair: samen één onderlijn. */
.mosaic > .mcol.is-a { padding-top: var(--sp-24); }
.mosaic > .mcol.is-b { padding-top: var(--sp-72); }
.mosaic > .mcol.is-c { padding-top: var(--sp-0); }
.mosaic > .mcol.is-d { padding-top: var(--sp-56); }
.mosaic > .mcol.is-e { padding-top: var(--sp-16); }

.mosaic .is-b .mtile-img { height: var(--h-tile-b); }
.mosaic .is-e .mtile-img { height: var(--h-tile-e); }
.mosaic .is-d .mtile-phone { height: var(--h-tile-d); width: auto; max-width: 100%; align-self: center; object-fit: cover; object-position: center top; margin-bottom: var(--sp-0); border-radius: var(--r-14); }
.mosaic .is-c .artikel-img { height: var(--h-tile-c); }
.mosaic .is-a .rv-track > .rv { min-height: var(--h-tile-a); }

@media (max-width: 1080px) {
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
  .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
  .mosaic .is-c .artikel-img { height: var(--h-artikel); }
  .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); }
}
@media (max-width: 720px) {
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
  .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
}
.vp-tablet .mosaic .is-b .mtile-img, .vp-tablet .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
.vp-tablet .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
.vp-tablet .mosaic .is-c .artikel-img { height: var(--h-artikel); }
.vp-tablet .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); }
.vp-mobile .mosaic .is-b .mtile-img, .vp-mobile .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
.vp-mobile .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
.vp-mobile .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); }

/* ---------- hero: overlap wegnemen ----------
   De knoppen hadden een eigen minimumbreedte en konden niet krimpen, dus ze
   liepen over de buurkolommen heen. Ze volgen nu de kolom. */
.mosaic .hero-cta { width: 100%; align-items: stretch; }
.mosaic .hero-cta .button-primary,
.mosaic .hero-cta .button-ghost {
  width: 100%;
  min-width: var(--sp-0);
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
/* De middenkolom is smal. Een iets kleiner label past daar op één regel,
   zodat beide knoppen dezelfde hoogte houden. */
.mosaic .hero-cta .button-primary.is-big,
.mosaic .hero-cta .button-ghost.is-big {
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  font-size: var(--fs-15);
}

/* Het artikel stond op flex-basis 0 in een kolom: dat is hoogte nul.
   Het krijgt zijn eigen hoogte terug. */
.mosaic .artikel { flex: 0 0 auto; }
.mosaic .is-c .artikel-img { height: var(--h-tile-c); }

/* De overlay blijft binnen de foto. */
.mosaic .mtile-overlay {
  max-width: calc(100% - var(--sp-32));
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  font-size: var(--fs-18);
}

/* Alle vijf de kolommen even breed, ongeacht hun inhoud. */
.mosaic > .mcol { flex: 1 1 0%; width: 0%; }

/* De afsnijding was bedoeld voor de vaste kolomhoogte. Die is er niet meer,
   dus deze regel kniptte alleen nog de halve hero weg. */
.hero-mid { overflow: visible; flex-direction: column; }
.mosaic { margin-bottom: var(--sp-0); }

/* ---------- claim-slider: één zin tegelijk, rustig doorschuiven ---------- */
.mtile.is-claim {
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-16);
  background: var(--color-surface);
  border-color: transparent;
  box-shadow: none;
  padding: var(--sp-20);
  min-height: var(--h-claim);
}
.claim-track { display: flex; flex-direction: column; justify-content: center; flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.claim {
  display: none;
  flex-direction: column;
  gap: var(--sp-10);
  animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.claim.is-on { display: flex; }
.claim-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
}
.claim-text {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.024em;
  color: var(--color-ink);
  text-wrap: pretty;
}
.claim-dots { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-8); flex: 0 0 auto; }
.claim-dot {
  width: var(--sp-4);
  height: var(--sp-4);
  border: none;
  padding: var(--sp-0);
  border-radius: var(--r-pill);
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background 0.3s ease, height 0.3s ease;
}
.claim-dot.is-active { background: var(--color-accent); height: var(--sp-20); }
@media (max-width: 640px) { .claim-text { font-size: var(--fs-18); } }
.vp-mobile .claim-text { font-size: var(--fs-18); }

/* ---------- agenda: wat de agents deze week doen ---------- */
.agenda { display: flex; flex-direction: column; gap: var(--sp-8); }
.ag-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-14);
  background: var(--color-surface);
}
.ag-row.is-next { background: var(--color-accent-wash); }
.ag-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sp-40);
  height: var(--sp-40);
  border-radius: var(--r-10);
  background: var(--color-page);
}
.ag-day { font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; color: var(--color-ink-3); line-height: var(--lh-tight); }
.ag-num { font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.ag-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.ag-title { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--color-ink); }
.ag-sub { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.ag-mark { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* ---------- reviewslider: aantrekkelijker ---------- */
.mosaic .is-a .mtile { padding: var(--sp-0); overflow: hidden; }
.mosaic .is-a .mtile-tag { padding: var(--sp-18) var(--sp-18) var(--sp-12) var(--sp-18); }
.mosaic .is-a .rv-track > .rv {
  padding: var(--sp-0) var(--sp-18) var(--sp-18) var(--sp-18);
  gap: var(--sp-14);
  align-items: flex-start;
}
.mosaic .is-a img.rv-avatar {
  width: var(--sp-48);
  height: var(--sp-48);
  border: var(--bw-2) solid var(--color-page);
  box-shadow: 0 var(--sp-2) var(--sp-8) var(--color-shadow-soft);
}
.mosaic .is-a .rv-name { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: -0.018em; }
.mosaic .is-a .rv-text {
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  padding: var(--sp-12) var(--sp-14);
  background: var(--color-surface);
  border-radius: var(--r-14);
}
.mosaic .is-a .rv-status {
  align-self: flex-start;
  padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
}
.mosaic .is-a .rv-status.is-new { background: var(--color-surface-2); color: var(--color-ink-2); }
.mosaic .is-a .rv-dots { padding: var(--sp-0) var(--sp-18) var(--sp-18) var(--sp-18); }
.mosaic .is-a .stars.is-small { color: var(--color-star); }

/* Een lage beoordeling die bij de ondernemer terechtkomt in plaats van online. */
.rv-status.is-alert {
  background: var(--color-warn-wash);
  color: var(--color-warn);
}
.mosaic .is-a .rv-status.is-alert { background: var(--color-warn-wash); color: var(--color-warn); }
.rv-status.is-alert .dot { background: var(--color-warn); }
/* Vijf reviews naast elkaar: de stippen blijven op één regel. */
.rv-dots { flex-wrap: nowrap; }
.rv-dot { flex: 0 0 auto; }

/* Reviewtekst gebruikt de volle breedte van de kaart: de avatar staat boven
   de tekst in plaats van ernaast, zodat de kaart korter kan. */
.mosaic .is-a .rv-track > .rv { flex-direction: column; gap: var(--sp-10); }
.mosaic .is-a .rv-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.mosaic .is-a img.rv-avatar { width: var(--sp-36); height: var(--sp-36); }
.mosaic .is-a .rv-body { width: 100%; gap: var(--sp-8); }
.mosaic .is-a .rv-text { max-width: none; }
.mosaic .is-a .rv-top { width: 100%; }

/* ---------- alle tegels even hoog ----------
   Vier van de vijf kolommen krijgen dezelfde hoogte; de reviewslider volgt
   zijn eigen inhoud omdat de reviews in lengte verschillen. */
.mosaic > .mcol { height: var(--h-tile-even); }
.mosaic > .mcol.is-a { height: auto; }
.mosaic > .mcol.is-b .mtile,
.mosaic > .mcol.is-d .mtile,
.mosaic > .mcol.is-e .mtile { flex: 1 1 var(--sp-0); overflow: hidden; }
.mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: 100%; }
.mosaic > .mcol.is-c .mtile.is-claim { flex: 1 1 var(--sp-0); min-height: var(--sp-0); }
.mosaic .agenda { overflow: hidden; }

@media (max-width: 1080px) {
  .mosaic > .mcol, .mosaic > .mcol.is-a { height: auto; }
  .mosaic > .mcol.is-b .mtile, .mosaic > .mcol.is-d .mtile, .mosaic > .mcol.is-e .mtile { flex: 0 0 auto; }
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
  .mosaic > .mcol.is-c .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }
}
@media (max-width: 720px) {
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
}
.vp-tablet .mosaic > .mcol, .vp-tablet .mosaic > .mcol.is-a { height: auto; }
.vp-tablet .mosaic > .mcol.is-b .mtile, .vp-tablet .mosaic > .mcol.is-d .mtile, .vp-tablet .mosaic > .mcol.is-e .mtile { flex: 0 0 auto; }
.vp-tablet .mosaic .is-b .mtile-img, .vp-tablet .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
.vp-tablet .mosaic > .mcol.is-c .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }
.vp-mobile .mosaic > .mcol, .vp-mobile .mosaic > .mcol.is-a { height: auto; }
.vp-mobile .mosaic > .mcol.is-b .mtile, .vp-mobile .mosaic > .mcol.is-d .mtile, .vp-mobile .mosaic > .mcol.is-e .mtile { flex: 0 0 auto; }
.vp-mobile .mosaic .is-b .mtile-img, .vp-mobile .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic > .mcol.is-c .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }

/* ---------- claim-slider: kleine visual per belofte ---------- */
.mtile.is-claim { flex-direction: column; justify-content: space-between; padding: var(--sp-20); }
.claim-track { justify-content: flex-start; width: 100%; }
.claim { gap: var(--sp-12); }
.claim-text { font-size: var(--fs-18); }

.claim-vis {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-14);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
}
.cv-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; }
.cv-stars { color: var(--color-star); font-size: var(--fs-15); letter-spacing: var(--ls-snug); }
.cv-badge {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-mono); font-size: var(--fs-11);
}
.cv-bar { display: block; width: 100%; height: var(--sp-6); border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.cv-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--color-accent); }
.cv-note { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); line-height: var(--lh-snug); }
.cv-chip {
  display: inline-flex; align-items: center;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--color-ink-2);
  font-family: var(--font-mono); font-size: var(--fs-11);
}
.cv-quote { font-size: var(--fs-14); color: var(--color-ink); line-height: var(--lh-snug); }
.cv-q { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-2); min-width: var(--sp-0); }
.cv-up { color: var(--color-accent-deep); font-size: var(--fs-15); }
.cv-browser {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  background: var(--color-surface);
  border-radius: var(--r-10);
}
.cv-dots { display: flex; flex-direction: row; gap: var(--sp-4); flex: 0 0 auto; }
.cv-dot { width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-pill); background: var(--color-line-strong); }
.cv-url { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }

/* Stippen onderaan, horizontaal: past beter onder een bredere kaart. */
.claim-dots { flex-direction: row; justify-content: flex-start; gap: var(--sp-8); padding-top: var(--sp-14); }
.claim-dot { width: var(--sp-20); height: var(--sp-4); }
.claim-dot.is-active { width: var(--sp-32); height: var(--sp-4); }

/* De claim-slider staat nu in kolom B (waar de foto stond) en de middenkolom
   houdt alleen de knoppen. */
@media (min-width: 1081px) {
  .mosaic > .mcol.is-b .mtile.is-claim { flex: 1 1 var(--sp-0); min-height: var(--sp-0); }
}
.mosaic > .mcol.is-c { justify-content: flex-start; height: auto; }
.mosaic > .mcol.is-c .hero-cta { flex: 0 0 auto; }

/* Onder 1080px volgt de claim-tegel zijn eigen inhoud. De oude vangnetten
   wezen nog naar kolom C; de tegel staat nu in kolom B. */
@media (max-width: 1080px) {
  .mosaic > .mcol.is-b .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }
}
.vp-tablet .mosaic > .mcol.is-b .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }
.vp-mobile .mosaic > .mcol.is-b .mtile.is-claim { flex: 0 0 auto; min-height: var(--h-claim); }

/* ---------- hero compacter, zoals de referentie ----------
   De kop staat daar op ongeveer 76px in plaats van 104, met minder lucht
   eromheen en een smallere tekstkolom. */
.hero-mid { padding-top: var(--sp-56); padding-bottom: var(--sp-56); }
.hero-mid-copy { gap: var(--sp-14); }
.hero-mid .display-1 { font-size: var(--type-hero); line-height: var(--lh-display); max-width: var(--w-hero-copy); }
.hero-mid .lead.is-centered { max-width: var(--w-hero-lead); }
.mosaic { padding-top: var(--sp-32); gap: var(--sp-14); }
.mosaic .mtile { padding: var(--sp-16); }
.mosaic > .mcol { gap: var(--sp-14); }

@media (max-width: 1080px) {
  .hero-mid { padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
}


.hero-cta-mob { display: none; }
.swipe-dots { display: none; }
.price-mob-note { display: none; }

/* ---------- premiumlaag: voortgang, instap, licht op de knop ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bw-2, 2px);
  z-index: 90;
  pointer-events: none;
  background: transparent;
}
.read-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-accent);
  transition: transform 90ms linear;
}
.js-rise .rise {
  opacity: 0;
  transform: translate3d(0, var(--sp-16), 0);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-rise .rise.is-in { opacity: 1; transform: none; }
.button-primary {
  position: relative;
  overflow: hidden;
}
/* Geen glow of gradient onder de cursor: de knop wordt bij hover simpelweg
   donkerder (zie .button-primary:hover bovenaan). Dat is rustiger en leest
   als een knop in plaats van als een effect. */
.button-primary:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .js-rise .rise { opacity: 1; transform: none; transition: none; }
  .button-primary:active { transform: none; }
  .read-progress { display: none; }
}


/* ---------- rekensom: voorbeelden lopen door tot je zelf invult ---------- */
.calc-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; }
.calc-own {
  border: var(--bw-1) solid var(--color-line-strong);
  background: var(--color-page);
  border-radius: var(--r-pill);
  padding: var(--sp-8) var(--sp-16);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.calc-own:hover { border-color: var(--color-accent); }
.calc.is-demo .calc-input { transition: opacity 160ms ease, transform 160ms ease; }
.calc-input.is-flip { animation: calc-flip 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes calc-flip {
  0% { opacity: 0; transform: translate3d(0, var(--sp-8), 0); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-input.is-flip { animation: none; }
}


/* ---------- wat je terugziet: ritme links, beeld met kaart rechts ---------- */
.effects { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-64); align-items: center; }
.effects-copy { display: flex; flex-direction: column; gap: var(--sp-20); }
.effect-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.effect-row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: var(--sp-20);
  align-items: baseline;
  padding: var(--sp-16) 0;
  border-bottom: var(--bw-1) solid var(--color-line);
}
.effect-row:first-child { border-top: var(--bw-1) solid var(--color-line); }
.effect-when { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 700; color: var(--color-ink); }
.effect-what { font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.effects-visual { position: relative; }
.effects-photo { display: block; width: 100%; height: 560px; object-fit: cover; border-radius: var(--r-28); }
.effects-card {
  position: absolute;
  right: var(--sp-24);
  bottom: var(--sp-24);
  width: min(300px, calc(100% - var(--sp-48)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-20);
  border-radius: var(--r-20);
  background: var(--color-page);
  box-shadow: 0 var(--sp-12) var(--sp-32) var(--color-shadow);
}
.effects-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-40);
  height: var(--sp-40);
  border-radius: var(--r-12);
  background: var(--color-surface);
}
.effects-card .button-primary { margin-top: var(--sp-4); text-align: center; justify-content: center; }
@media (max-width: 900px) {
  .effects { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .effects-photo { height: var(--h-tile-row-mob); }
  .effects-card { position: static; width: 100%; margin-top: calc(var(--sp-32) * -1); }
  .effect-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}


/* ---------- één doorlopende pagina in plaats van gestapelde blokken ---------- */
.main > .section { border-top: var(--sp-0); }
.main > .section-surface {
  background: linear-gradient(
    180deg,
    var(--color-page) 0%,
    var(--color-surface) var(--pad-section),
    var(--color-surface) calc(100% - var(--pad-section)),
    var(--color-page) 100%
  );
}
.main > .section-dark { border-top: var(--sp-0); }
/* Twee vlakken naast elkaar zouden een naad geven; de tweede loopt gewoon door. */
.main > .section-surface + .section-surface {
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-surface) calc(100% - var(--pad-section)),
    var(--color-page) 100%
  );
}


/* ---------- onderdelen: de rij loopt vanzelf door, met een lijn eronder ---------- */
.showcase-rail { display: flex; flex-direction: column; gap: var(--sp-12); }
.showcase-line {
  position: relative;
  height: var(--bw-2, 2px);
  border-radius: var(--r-pill);
  background: var(--color-line);
  overflow: hidden;
}
.showcase-line-fill {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-accent);
}
.showcase.is-manual .showcase-line { opacity: 0.45; }


/* Lange branchewoorden mogen de kop van de rekensom niet laten botsen. */
.miss-calc .heading-3 { text-wrap: pretty; overflow-wrap: anywhere; line-height: 1.2; }
.miss-calc .word-swap { white-space: nowrap; }


/* ---------- mobiel: kleinere blokken, alles op één kolom ---------- */
@media (max-width: 700px) {
  .miss { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-20); border-radius: var(--r-20); }
  .miss-calc { padding: var(--sp-16); border-radius: var(--r-20); }
  .miss-copy { gap: var(--sp-16); }
  .calc-bar { gap: var(--sp-8); }
  .calc-own { padding: var(--sp-6) var(--sp-12); font-size: var(--fs-13); }
  .calc.is-stacked .calc-value { font-size: var(--fs-20); }
  .calc.is-stacked .calc-value.is-accent, .calc.is-stacked .calc-value.is-warn { font-size: var(--fs-26); }

  .effects { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .effects-photo { height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-20); }
  .effects-card { position: static; width: 100%; margin-top: var(--sp-12); padding: var(--sp-16); }
  .effect-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-12) 0; }
  .effect-when { font-size: var(--fs-14); color: var(--color-ink-3); }
  .effect-what { font-size: var(--fs-15); }

  .whatis-photo { height: auto; aspect-ratio: 4 / 5; }
  .whatis-float { left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); padding: var(--sp-12); }

  .one-view.is-compact .one-view-body { grid-template-columns: minmax(0, 1fr); }
  .assure-strip { padding: var(--sp-12) 0; }
  .showcase-line { height: 2px; }
}
@media (max-width: 480px) {
  .miss { padding: var(--sp-16); }
  .effects-photo, .whatis-photo { aspect-ratio: 1 / 1; }
}

/* Dezelfde maatvoering in de mobiele weergave van de editor. */
.vp-mobile .miss { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-20); border-radius: var(--r-20); }
.vp-mobile .miss-calc { padding: var(--sp-16); }
.vp-mobile .calc.is-stacked .calc-value { font-size: var(--fs-20); }
.vp-mobile .calc.is-stacked .calc-value.is-accent, .vp-mobile .calc.is-stacked .calc-value.is-warn { font-size: var(--fs-26); }
.vp-mobile .effects { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.vp-mobile .effects-photo { height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-20); }
.vp-mobile .effects-card { position: static; width: 100%; margin-top: var(--sp-12); padding: var(--sp-16); }
.vp-mobile .effect-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-12) 0; }
.vp-mobile .effect-when { font-size: var(--fs-14); color: var(--color-ink-3); }
.vp-mobile .effect-what { font-size: var(--fs-15); }
.vp-mobile .whatis-photo { height: auto; aspect-ratio: 4 / 5; }
.vp-mobile .whatis-float { left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); padding: var(--sp-12); }
.vp-mobile .one-view.is-compact .one-view-body { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .marq.is-back { display: none; }
.vp-mobile .marq-item { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
.vp-mobile .assure-strip { padding: var(--sp-12) 0; }
.vp-mobile .assure-row { justify-content: flex-start; gap: var(--sp-8) var(--sp-18); }
.vp-mobile .assure-item { font-size: var(--fs-14); }
.vp-mobile .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-6); }

/* Niets mag horizontaal buiten het scherm vallen. */
.page { overflow-x: hidden; }


/* ---------- mobiel: de compositie blijft staan, alleen kleiner ---------- */
/* De kaart hoort op de foto te liggen, net als op desktop. */
@media (max-width: 700px) {
  .effects-card {
    position: absolute;
    right: var(--sp-12);
    left: var(--sp-12);
    bottom: var(--sp-12);
    width: auto;
    margin-top: var(--sp-0);
    padding: var(--sp-14);
    gap: var(--sp-8);
  }
  .effects-card .heading-3 { font-size: var(--fs-18); }
  .effects-card .body-soft { font-size: var(--fs-14); }
  .effects-card-mark { width: var(--sp-28); height: var(--sp-28); }
  .effects-photo { aspect-ratio: 3 / 4; }

  /* Tijdstip en omschrijving blijven naast elkaar, zoals op desktop. */
  .effect-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--sp-12); }
  .effect-when { font-size: var(--fs-13); }

  /* Het overzicht blijft een raster van vier, niet vier losse blokken. */
  .one-view.is-compact .one-view-body,
  .one-view .one-view-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .effects-photo, .whatis-photo { aspect-ratio: 3 / 4; }
  .one-view.is-compact .one-view-body,
  .one-view .one-view-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vp-mobile .effects-card {
  position: absolute;
  right: var(--sp-12);
  left: var(--sp-12);
  bottom: var(--sp-12);
  width: auto;
  margin-top: var(--sp-0);
  padding: var(--sp-14);
  gap: var(--sp-8);
}
.vp-mobile .effects-card .heading-3 { font-size: var(--fs-18); }
.vp-mobile .effects-card .body-soft { font-size: var(--fs-14); }
.vp-mobile .effects-card-mark { width: var(--sp-28); height: var(--sp-28); }
.vp-mobile .effects-photo { aspect-ratio: 3 / 4; }
.vp-mobile .effect-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--sp-12); }
.vp-mobile .effect-when { font-size: var(--fs-13); }
.vp-mobile .one-view.is-compact .one-view-body,
.vp-mobile .one-view .one-view-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* ---------- hero op mobiel: kolommen krijgen hun breedte terug ---------- */
/* Een eerdere regel zet alle kolommen op width 0% voor de gelijke verdeling
   op desktop. Op een telefoon staan ze onder elkaar en moeten ze vol. */
@media (max-width: 720px) {
  .mosaic { flex-direction: column; height: auto; gap: var(--sp-14); margin-bottom: var(--sp-0); padding-top: var(--sp-24); }
  .mosaic > .mcol { flex: 0 0 auto; width: 100%; height: auto; padding-top: var(--sp-0); }
  .mosaic .mtile { flex: 0 0 auto; }
  .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); }
  .mosaic .is-b .mtile-img,
  .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
  .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
  .mosaic .is-d .mtile-phone { height: auto; max-height: var(--h-mtile-photo-mob); }
  .mosaic .mcol.is-c { order: -1; }
}
.vp-mobile .mosaic { flex-direction: column; height: auto; gap: var(--sp-14); margin-bottom: var(--sp-0); padding-top: var(--sp-24); }
.vp-mobile .mosaic > .mcol { flex: 0 0 auto; width: 100%; height: auto; padding-top: var(--sp-0); }
.vp-mobile .mosaic .mtile { flex: 0 0 auto; }
.vp-mobile .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); }
.vp-mobile .mosaic .is-b .mtile-img,
.vp-mobile .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
.vp-mobile .mosaic .is-d .mtile-phone { height: auto; max-height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .mcol.is-c { order: -1; }


/* ---------- hero op mobiel: tegelraster in plaats van een lange stapel ---------- */
@media (max-width: 720px) {
  .hero-mid-copy { gap: var(--sp-16); }

  .mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-10);
    align-items: start;
    height: auto;
    padding-top: var(--sp-20);
    margin-bottom: var(--sp-0);
  }
  .mosaic > .mcol {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
    width: auto;
    height: auto;
    flex: 0 0 auto;
    padding-top: var(--sp-0);
  }
  /* De knoppen en het artikel lopen over de volle breedte en staan bovenaan. */
  .mosaic > .mcol.is-c { grid-column: 1 / -1; order: -1; }
  .mosaic .mtile { flex: 0 0 auto; border-radius: var(--r-14); }
  .mosaic .mtile-tag { font-size: var(--fs-11); padding: var(--sp-10) var(--sp-12) var(--sp-6) var(--sp-12); }
  .mosaic .is-b .mtile-img,
  .mosaic .is-e .mtile-img { height: 168px; }
  .mosaic .is-c .artikel-img { height: 150px; }
  .mosaic .is-d .mtile-phone { height: auto; max-height: 200px; }
  .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); padding: var(--sp-0) var(--sp-12) var(--sp-12) var(--sp-12); }
  .mosaic .is-a .mtile-tag { padding: var(--sp-12) var(--sp-12) var(--sp-8) var(--sp-12); }
  .mosaic .mtile-overlay { max-width: calc(100% - var(--sp-16)); padding-left: var(--sp-10); padding-right: var(--sp-10); font-size: var(--fs-13); }
  .mosaic .mtile.is-claim { grid-column: auto; }
}
.vp-mobile .hero-mid-copy { gap: var(--sp-16); }
.vp-mobile .mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
  align-items: start;
  height: auto;
  padding-top: var(--sp-20);
  margin-bottom: var(--sp-0);
}
.vp-mobile .mosaic > .mcol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding-top: var(--sp-0);
}
.vp-mobile .mosaic > .mcol.is-c { grid-column: 1 / -1; order: -1; }
.vp-mobile .mosaic .mtile { flex: 0 0 auto; border-radius: var(--r-14); }
.vp-mobile .mosaic .mtile-tag { font-size: var(--fs-11); padding: var(--sp-10) var(--sp-12) var(--sp-6) var(--sp-12); }
.vp-mobile .mosaic .is-b .mtile-img,
.vp-mobile .mosaic .is-e .mtile-img { height: 168px; }
.vp-mobile .mosaic .is-c .artikel-img { height: 150px; }
.vp-mobile .mosaic .is-d .mtile-phone { height: auto; max-height: 200px; }
.vp-mobile .mosaic .is-a .rv-track > .rv { min-height: var(--sp-0); padding: var(--sp-0) var(--sp-12) var(--sp-12) var(--sp-12); }
.vp-mobile .mosaic .is-a .mtile-tag { padding: var(--sp-12) var(--sp-12) var(--sp-8) var(--sp-12); }
.vp-mobile .mosaic .mtile-overlay { max-width: calc(100% - var(--sp-16)); padding-left: var(--sp-10); padding-right: var(--sp-10); font-size: var(--fs-13); }


/* ---------- wat je aan een onderdeel hebt ---------- */
.showcase-gains { display: flex; flex-direction: column; gap: var(--sp-8); list-style: none; margin: 0; padding: 0; }
.showcase-gain {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-10);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--color-ink-2);
  text-wrap: pretty;
}
.showcase-gain .check-mark { flex: 0 0 auto; }
@media (max-width: 700px) { .showcase-gain { font-size: var(--fs-14); } }


/* ---------- de mensen achter het systeem ---------- */
.makers { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-64); align-items: center; }
.makers-copy { display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; }
.makers-people { display: flex; flex-direction: column; gap: var(--sp-16); }
.maker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-18);
  padding: var(--sp-16);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  background: var(--color-page);
  transition: border-color 200ms ease, transform 200ms ease;
}
.maker:hover { border-color: var(--color-line-strong); transform: translateY(-1px); }
.maker-photo { width: var(--sp-80); height: var(--sp-80); border-radius: var(--r-pill); object-fit: cover; flex: 0 0 auto; }
.maker-text { display: flex; flex-direction: column; gap: var(--sp-3); }
.maker-name { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; color: var(--color-ink); }
.maker-role { font-family: var(--font-body); font-size: var(--fs-14); color: var(--color-ink-3); }
@media (max-width: 900px) {
  .makers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-28); }
}
@media (max-width: 700px) {
  .maker { padding: var(--sp-12); gap: var(--sp-14); }
  .maker-photo { width: var(--sp-56); height: var(--sp-56); }
  .maker-name { font-size: var(--fs-16); }
  .maker-role { font-size: var(--fs-13); }
}
.vp-mobile .makers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-28); }
.vp-mobile .maker { padding: var(--sp-12); gap: var(--sp-14); }
.vp-mobile .maker-photo { width: var(--sp-56); height: var(--sp-56); }
.vp-mobile .maker-name { font-size: var(--fs-16); }
.vp-mobile .maker-role { font-size: var(--fs-13); }


/* ============================================================
   Mobiel (≤720px) — eigen structuur, niet de desktop verkleind.
   Één kolom, één beeld per sectie: geen meeschuivende tegeltjes
   voor kerncontent (zo gebouwd als rocketplanner.nl, klant.review
   en onme.nl op een telefoon). Prijskaarten staan als volledige
   kaarten onder elkaar, met hun eigen kenmerken zichtbaar.
   Getest op 375, 390, 430, tablet en desktop; desktop ongemoeid.
   De .vp-mobile-kopieën zijn voor de mobiele weergave in de editor.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(47, 155, 33, 0.14); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: var(--bw-2) solid var(--color-accent-deep);
  outline-offset: var(--sp-3);
  border-radius: var(--r-6);
}

@media (max-width: 720px) {
.section-tight { padding-top: var(--pad-section-tight); padding-bottom: var(--pad-section-tight); }
.stack-40 { gap: var(--sp-28); }
.stack-64 { gap: var(--sp-32); }
.stack-24 { gap: var(--sp-16); }
.row-40 { flex-direction: column; gap: var(--sp-28); }
.row-40 > .grow, .row-40 > .grow.stack-24 { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; }
.row-12 { gap: var(--sp-8); align-items: flex-start; }
.row-12 > .button-primary, .row-12 > .button-ghost { width: auto; align-self: flex-start; }
.page { overflow-x: hidden; }
.display-1 { line-height: 1.12; }
.display-2 { line-height: 1.18; }
.lead { line-height: 1.5; }
.lead, .body, .body-soft, .micro, .faq-a { text-wrap: pretty; }
.display-1, .display-2, .heading-2, .heading-3, .faq-q { text-wrap: balance; }
.main > .section > .wrap > .stack-12, .main > .section > .wrap > .miss-copy { max-width: 36ch; }
.button-primary, .button-ghost { width: auto; padding-left: var(--sp-18); padding-right: var(--sp-18); min-height: 48px; }
.hero-mid { padding-top: var(--sp-44); overflow: visible; }
.hero-mid-copy { gap: var(--sp-16); }
.hero-mid-copy .display-1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero-mid-copy .lead { max-width: 30ch; margin-left: auto; margin-right: auto; }
.mosaic .hero-cta { display: none; }
.hero-cta-mob { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-10); width: 100%; max-width: 340px; margin: var(--sp-4) auto var(--sp-0); }
.hero-cta-mob .button-primary, .hero-cta-mob .button-ghost { width: 100%; min-height: 50px; font-size: var(--fs-16); justify-content: center; text-align: center; }
.hero-cta-mob .rating-line { justify-content: center; margin-top: var(--sp-2); }
.hero-cta-mob .hero-mid-note { text-align: center; font-size: var(--fs-13); }
.mosaic { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; height: auto; align-items: stretch; gap: var(--sp-16); padding-top: var(--sp-32); margin: 0; mask-image: none; -webkit-mask-image: none; }
.mosaic > .mcol { flex: 0 0 auto; width: 100%; height: auto; padding-top: 0; }
.mosaic > .mcol.is-c { display: none; }
.mosaic > .mcol.is-e { order: 1; }
.mosaic > .mcol.is-a { order: 2; }
.mosaic > .mcol.is-b { order: 3; }
.mosaic > .mcol.is-d { order: 4; }
.mosaic > .mcol > .mtile { flex: 0 0 auto; }
.mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.mosaic .is-a .mtile { padding: var(--sp-16); }
.mosaic .is-a .rv-track > .rv { min-height: 200px; }
.claim-text { font-size: var(--fs-18); }
.trust-strip { padding-top: var(--sp-16); padding-bottom: var(--sp-4); }
.marq.is-back { display: none; }
.marq-item { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
.assure-strip { padding: var(--sp-14) 0; }
.assure-row { flex-wrap: wrap; justify-content: center; gap: var(--sp-10) var(--sp-20); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.assure-row > .assure-item { font-size: var(--fs-13); }
.whatis-photo { height: auto; aspect-ratio: 5 / 4; }
.whatis-float { left: var(--sp-10); right: var(--sp-10); bottom: var(--sp-10); padding: var(--sp-12); gap: var(--sp-6); }
.merge-in, .merge-in.is-left { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; gap: var(--sp-8); mask-image: none; -webkit-mask-image: none; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.merge-chip { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
.one-view { padding: var(--sp-16); }
.one-view-head { gap: var(--sp-2); }
.one-view .one-view-body, .one-view.is-compact .one-view-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.one-view .one-view-body > .ov-cell { width: auto; max-width: none; padding: var(--sp-12); }
.miss { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); padding: var(--sp-18); border-radius: var(--r-20); }
.miss-copy { gap: var(--sp-14); }
.miss-copy > .bullet-list { display: flex; flex-direction: column; gap: var(--sp-10); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.miss-copy > .bullet-list > .bullet-item { width: auto; max-width: none; flex-direction: row; align-items: flex-start; padding: 0; border: 0; background: none; font-size: var(--fs-14); }
.miss-calc { padding: var(--sp-16); gap: var(--sp-16); }
.calc { flex-direction: column; gap: var(--sp-20); }
.calc-inputs { gap: var(--sp-10); }
.calc-field { gap: var(--sp-4); }
.calc-input-wrap, .calc-select-wrap { height: 48px; min-height: 48px; }
.calc-input, .calc-select { font-size: 16px; }
.calc-label { font-size: var(--fs-13); }
.calc-out { gap: var(--sp-8); padding: var(--sp-14); }
.calc-line { align-items: center; gap: var(--sp-12); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.calc-line > :first-child { flex: 1 1 auto; min-width: 0; }
.calc-line .body-soft, .calc-line .strong { font-size: var(--fs-13); line-height: 1.3; }
.calc.is-stacked .calc-value.is-accent, .calc.is-stacked .calc-value.is-warn { font-size: var(--fs-26); }
.calc-own { min-height: 44px; padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.calc-bar { gap: var(--sp-8); }
.miss-calc > .stack-12 .body-soft { font-size: var(--fs-13); }
.showcase-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--sp-8); padding-bottom: var(--sp-4); }
.showcase-tabs::-webkit-scrollbar { display: none; }
.showcase-tabs > .showcase-tab { flex: 0 0 auto; }
.showcase-rail { gap: var(--sp-8); }
.showcase-panel.is-active { flex-direction: column; align-items: stretch; gap: var(--sp-20); }
.showcase-body { gap: var(--sp-16); }
.showcase-copy { gap: var(--sp-12); }
.effects { gap: var(--sp-20); }
.effects-photo { height: auto; aspect-ratio: 5 / 4; }
.effect-list { display: flex; flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.effect-list > .effect-row, .effect-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-10) 0; width: auto; max-width: none; background: none; border-radius: 0; }
.effect-when { font-size: var(--fs-13); }
.effect-what { font-size: var(--fs-14); }
.row-24:has(> .step) { flex-direction: column; gap: var(--sp-16); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.row-24:has(> .step) > .step { flex: 0 0 auto; width: auto; max-width: none; }
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.versus > .versus-col, .versus-col { width: auto; max-width: none; padding: var(--sp-14); }
.versus .bullet-item { font-size: var(--fs-13); line-height: 1.4; gap: var(--sp-6); }
.row-24:has(> .price-card) { flex-direction: column; gap: var(--sp-16); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.row-24 > .price-card { flex: 0 0 auto; width: auto; max-width: none; }
.row-24 > .price-card .plan-price { font-size: var(--fs-40); }
.row-24 > .price-card .price-flag { white-space: nowrap; }
.makers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.makers-people { gap: var(--sp-12); }
.faq-q { min-height: 48px; }
.cal-mount, .cal-inline-container, .cal-embed { height: var(--h-cal-mob); min-height: var(--h-cal-mob); }
.map-embed { height: var(--h-map-mob); min-height: var(--h-map-mob); }
.rv-dot, .claim-dot { position: relative; }
.rv-dot::after, .claim-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.rv-dots, .claim-dots { gap: var(--sp-12); }
.swipe-dots { display: flex; flex-direction: row; justify-content: center; gap: var(--sp-8); padding-top: var(--sp-2); }
.swipe-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--color-line-strong); transition: background 200ms ease, width 200ms ease; }
.swipe-dot.is-on { width: 18px; background: var(--color-accent); }
.swipe-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
.footer-link { display: inline-flex; align-items: center; min-height: 40px; }
.brand { min-height: 44px; }
.nav-drawer-link { min-height: 48px; }
.field-input, input, textarea, select { font-size: 16px; }
.contact-line a.body { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
}

.vp-mobile .section-tight { padding-top: var(--pad-section-tight); padding-bottom: var(--pad-section-tight); }
.vp-mobile .stack-40 { gap: var(--sp-28); }
.vp-mobile .stack-64 { gap: var(--sp-32); }
.vp-mobile .stack-24 { gap: var(--sp-16); }
.vp-mobile .row-40 { flex-direction: column; gap: var(--sp-28); }
.vp-mobile .row-40 > .grow, .vp-mobile .row-40 > .grow.stack-24 { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; }
.vp-mobile .row-12 { gap: var(--sp-8); align-items: flex-start; }
.vp-mobile .row-12 > .button-primary, .vp-mobile .row-12 > .button-ghost { width: auto; align-self: flex-start; }
.vp-mobile .page { overflow-x: hidden; }
.vp-mobile .display-1 { line-height: 1.12; }
.vp-mobile .display-2 { line-height: 1.18; }
.vp-mobile .lead { line-height: 1.5; }
.vp-mobile .lead, .vp-mobile .body, .vp-mobile .body-soft, .vp-mobile .micro, .vp-mobile .faq-a { text-wrap: pretty; }
.vp-mobile .display-1, .vp-mobile .display-2, .vp-mobile .heading-2, .vp-mobile .heading-3, .vp-mobile .faq-q { text-wrap: balance; }
.vp-mobile .main > .section > .wrap > .stack-12, .vp-mobile .main > .section > .wrap > .miss-copy { max-width: 36ch; }
.vp-mobile .button-primary, .vp-mobile .button-ghost { width: auto; padding-left: var(--sp-18); padding-right: var(--sp-18); min-height: 48px; }
.vp-mobile .hero-mid { padding-top: var(--sp-44); overflow: visible; }
.vp-mobile .hero-mid-copy { gap: var(--sp-16); }
.vp-mobile .hero-mid-copy .display-1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.vp-mobile .hero-mid-copy .lead { max-width: 30ch; margin-left: auto; margin-right: auto; }
.vp-mobile .mosaic .hero-cta { display: none; }
.vp-mobile .hero-cta-mob { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-10); width: 100%; max-width: 340px; margin: var(--sp-4) auto var(--sp-0); }
.vp-mobile .hero-cta-mob .button-primary, .vp-mobile .hero-cta-mob .button-ghost { width: 100%; min-height: 50px; font-size: var(--fs-16); justify-content: center; text-align: center; }
.vp-mobile .hero-cta-mob .rating-line { justify-content: center; margin-top: var(--sp-2); }
.vp-mobile .hero-cta-mob .hero-mid-note { text-align: center; font-size: var(--fs-13); }
.vp-mobile .mosaic { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; height: auto; align-items: stretch; gap: var(--sp-16); padding-top: var(--sp-32); margin: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .mosaic > .mcol { flex: 0 0 auto; width: 100%; height: auto; padding-top: 0; }
.vp-mobile .mosaic > .mcol.is-c { display: none; }
.vp-mobile .mosaic > .mcol.is-e { order: 1; }
.vp-mobile .mosaic > .mcol.is-a { order: 2; }
.vp-mobile .mosaic > .mcol.is-b { order: 3; }
.vp-mobile .mosaic > .mcol.is-d { order: 4; }
.vp-mobile .mosaic > .mcol > .mtile { flex: 0 0 auto; }
.vp-mobile .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .is-a .mtile { padding: var(--sp-16); }
.vp-mobile .mosaic .is-a .rv-track > .rv { min-height: 200px; }
.vp-mobile .claim-text { font-size: var(--fs-18); }
.vp-mobile .trust-strip { padding-top: var(--sp-16); padding-bottom: var(--sp-4); }
.vp-mobile .marq.is-back { display: none; }
.vp-mobile .marq-item { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
.vp-mobile .assure-strip { padding: var(--sp-14) 0; }
.vp-mobile .assure-row { flex-wrap: wrap; justify-content: center; gap: var(--sp-10) var(--sp-20); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .assure-row > .assure-item { font-size: var(--fs-13); }
.vp-mobile .whatis-photo { height: auto; aspect-ratio: 5 / 4; }
.vp-mobile .whatis-float { left: var(--sp-10); right: var(--sp-10); bottom: var(--sp-10); padding: var(--sp-12); gap: var(--sp-6); }
.vp-mobile .merge-in, .vp-mobile .merge-in.is-left { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; gap: var(--sp-8); mask-image: none; -webkit-mask-image: none; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.vp-mobile .merge-chip { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
.vp-mobile .one-view { padding: var(--sp-16); }
.vp-mobile .one-view-head { gap: var(--sp-2); }
.vp-mobile .one-view .one-view-body, .vp-mobile .one-view.is-compact .one-view-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .one-view .one-view-body > .ov-cell { width: auto; max-width: none; padding: var(--sp-12); }
.vp-mobile .miss { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); padding: var(--sp-18); border-radius: var(--r-20); }
.vp-mobile .miss-copy { gap: var(--sp-14); }
.vp-mobile .miss-copy > .bullet-list { display: flex; flex-direction: column; gap: var(--sp-10); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .miss-copy > .bullet-list > .bullet-item { width: auto; max-width: none; flex-direction: row; align-items: flex-start; padding: 0; border: 0; background: none; font-size: var(--fs-14); }
.vp-mobile .miss-calc { padding: var(--sp-16); gap: var(--sp-16); }
.vp-mobile .calc { flex-direction: column; gap: var(--sp-20); }
.vp-mobile .calc-inputs { gap: var(--sp-10); }
.vp-mobile .calc-field { gap: var(--sp-4); }
.vp-mobile .calc-input-wrap, .vp-mobile .calc-select-wrap { height: 48px; min-height: 48px; }
.vp-mobile .calc-input, .vp-mobile .calc-select { font-size: 16px; }
.vp-mobile .calc-label { font-size: var(--fs-13); }
.vp-mobile .calc-out { gap: var(--sp-8); padding: var(--sp-14); }
.vp-mobile .calc-line { align-items: center; gap: var(--sp-12); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.vp-mobile .calc-line > :first-child { flex: 1 1 auto; min-width: 0; }
.vp-mobile .calc-line .body-soft, .vp-mobile .calc-line .strong { font-size: var(--fs-13); line-height: 1.3; }
.vp-mobile .calc.is-stacked .calc-value.is-accent, .vp-mobile .calc.is-stacked .calc-value.is-warn { font-size: var(--fs-26); }
.vp-mobile .calc-own { min-height: 44px; padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.vp-mobile .calc-bar { gap: var(--sp-8); }
.vp-mobile .miss-calc > .stack-12 .body-soft { font-size: var(--fs-13); }
.vp-mobile .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--sp-8); padding-bottom: var(--sp-4); }
.vp-mobile .showcase-tabs::-webkit-scrollbar { display: none; }
.vp-mobile .showcase-tabs > .showcase-tab { flex: 0 0 auto; }
.vp-mobile .showcase-rail { gap: var(--sp-8); }
.vp-mobile .showcase-panel.is-active { flex-direction: column; align-items: stretch; gap: var(--sp-20); }
.vp-mobile .showcase-body { gap: var(--sp-16); }
.vp-mobile .showcase-copy { gap: var(--sp-12); }
.vp-mobile .effects { gap: var(--sp-20); }
.vp-mobile .effects-photo { height: auto; aspect-ratio: 5 / 4; }
.vp-mobile .effect-list { display: flex; flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .effect-list > .effect-row, .vp-mobile .effect-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-10) 0; width: auto; max-width: none; background: none; border-radius: 0; }
.vp-mobile .effect-when { font-size: var(--fs-13); }
.vp-mobile .effect-what { font-size: var(--fs-14); }
.vp-mobile .row-24:has(> .step) { flex-direction: column; gap: var(--sp-16); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .row-24:has(> .step) > .step { flex: 0 0 auto; width: auto; max-width: none; }
.vp-mobile .versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .versus > .versus-col, .vp-mobile .versus-col { width: auto; max-width: none; padding: var(--sp-14); }
.vp-mobile .versus .bullet-item { font-size: var(--fs-13); line-height: 1.4; gap: var(--sp-6); }
.vp-mobile .row-24:has(> .price-card) { flex-direction: column; gap: var(--sp-16); overflow: visible; margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
.vp-mobile .row-24 > .price-card { flex: 0 0 auto; width: auto; max-width: none; }
.vp-mobile .row-24 > .price-card .plan-price { font-size: var(--fs-40); }
.vp-mobile .row-24 > .price-card .price-flag { white-space: nowrap; }
.vp-mobile .makers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.vp-mobile .makers-people { gap: var(--sp-12); }
.vp-mobile .faq-q { min-height: 48px; }
.vp-mobile .cal-mount, .vp-mobile .cal-inline-container, .vp-mobile .cal-embed { height: var(--h-cal-mob); min-height: var(--h-cal-mob); }
.vp-mobile .map-embed { height: var(--h-map-mob); min-height: var(--h-map-mob); }
.vp-mobile .rv-dot, .vp-mobile .claim-dot { position: relative; }
.vp-mobile .rv-dot::after, .vp-mobile .claim-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.vp-mobile .rv-dots, .vp-mobile .claim-dots { gap: var(--sp-12); }
.vp-mobile .swipe-dots { display: flex; flex-direction: row; justify-content: center; gap: var(--sp-8); padding-top: var(--sp-2); }
.vp-mobile .swipe-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--color-line-strong); transition: background 200ms ease, width 200ms ease; }
.vp-mobile .swipe-dot.is-on { width: 18px; background: var(--color-accent); }
.vp-mobile .swipe-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
.vp-mobile .footer-link { display: inline-flex; align-items: center; min-height: 40px; }
.vp-mobile .brand { min-height: 44px; }
.vp-mobile .nav-drawer-link { min-height: 48px; }
.vp-mobile .field-input, .vp-mobile input, .vp-mobile textarea, .vp-mobile select { font-size: 16px; }
.vp-mobile .contact-line a.body { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }

/* Knoppen breken hun label nooit af. Past een rij niet meer, dan gaat de
   tweede knop onder de eerste staan (flex-wrap staat al op .row-12). */
@media (max-width: 900px) {
  .hero-cta .button-primary, .hero-cta .button-ghost { flex: 0 1 auto; }
}

/* ---------- kleine correcties na de typografische pas ---------- */
/* "Zelf invullen" viel over twee regels in een pil van 114px. */
.calc-own { border-radius: var(--r-10); white-space: nowrap; }
/* De beoordelingsregel is één regel; "Google" mag er niet af breken. */
.rating-line { flex-wrap: nowrap; }
.rating-text { white-space: nowrap; }

/* ============================================================
   Sectieritme op de homepage
   Niet elke sectie is even groot en even breed. Het product krijgt
   de meeste ruimte, ondersteunende secties juist minder, en twee
   secties die bij elkaar horen worden met een lijn verbonden in
   plaats van met een kleurvlak gescheiden.
   ============================================================ */

/* Het product: de sectie waar iemand ziet wat hij koopt. Meer lucht
   en een bredere container dan de rest van de pagina. */
.section-open {
  padding-top: calc(var(--pad-section) * 1.4);
  padding-bottom: calc(var(--pad-section) * 1.4);
}
.section-open > .wrap { max-width: var(--wrap-wide); }

/* Kaart en makers zijn samen één moment: "waar we werken en wie we zijn".
   De eerste sluit krap af, de tweede begint met een dunne lijn. */
.section-pair { padding-bottom: var(--pad-section-tight); }
.section.is-joined { padding-top: var(--sp-0); border-top-width: var(--sp-0); }
.section.is-joined > .wrap {
  border-top: var(--bw-1) solid var(--color-line);
  padding-top: var(--pad-section-tight);
}

/* Compositie wisselt: hierboven staat de tekst links, hier het beeld.
   Op mobiel blijft de opsomming juist bovenaan, want dat is de inhoud. */
@media (min-width: 901px) {
  .effects-visual { order: -1; }
}

/* ---------- header: strakke driedeling, twee acties ---------- */
:root { --color-wa: #25d366; }
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-24);
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
.site-header.is-scrolled .header-inner { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.nav { justify-content: center; gap: var(--sp-24); }
.header-actions { justify-self: end; gap: var(--sp-10); }
.header-cta-ghost, .header-cta {
  min-height: var(--sp-40);
  padding: var(--sp-0) var(--sp-20);
  font-size: var(--fs-14);
}
@media (max-width: 1080px) {
  .header-inner { grid-template-columns: auto auto; justify-content: space-between; }
  .header-cta-ghost { display: none; }
}
.vp-tablet .header-inner, .vp-mobile .header-inner { grid-template-columns: auto auto; justify-content: space-between; }
.vp-tablet .header-cta-ghost, .vp-mobile .header-cta-ghost { display: none; }

/* ---------- WhatsApp: altijd rechtsonder ---------- */
.wa-float {
  position: fixed;
  right: var(--pad-wrap);
  bottom: var(--pad-wrap);
  z-index: 60;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
  min-height: var(--sp-56);
  padding: var(--sp-0) var(--sp-20) var(--sp-0) var(--sp-16);
  border-radius: var(--r-pill);
  background: var(--color-wa);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.wa-float:hover { color: var(--color-ink); transform: translateY(calc(var(--sp-2) * -1)); box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow); }
.wa-float-icon { flex: 0 0 auto; width: var(--size-icon); height: var(--size-icon); }
@media (max-width: 640px) {
  .wa-float {
    width: var(--sp-56);
    height: var(--sp-56);
    padding: var(--sp-0);
    justify-content: center;
  }
  .wa-float-label { display: none; }
}

/* ---------- mobiel: minder onderdelen, meer lucht ---------- */
.only-mobile { display: none; }
.m-parts { display: flex; flex-direction: column; border-top: var(--bw-1) solid var(--color-line); }
.m-part {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
  min-height: var(--size-tap);
  padding: var(--sp-16) var(--sp-28) var(--sp-16) var(--sp-0);
  border-bottom: var(--bw-1) solid var(--color-line);
  color: var(--color-ink);
}
.m-part:hover { color: var(--color-ink); background: var(--color-surface); }
.m-part::after {
  content: "→";
  position: absolute;
  right: var(--sp-2);
  top: var(--sp-16);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--color-ink-3);
}
.m-part-name { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); }
.m-part-line { font-size: var(--fs-15); color: var(--color-ink-2); text-wrap: pretty; }

@media (max-width: 640px) {
  [data-screen-label="Product"], [data-screen-label="Kanalen"], [data-screen-label="Altijd aan"], [data-screen-label="Rekensom"], [data-screen-label="Systeem"], [data-screen-label="Nederland"], [data-screen-label="Makers"] { display: none; }
  .only-mobile { display: block; }
  .mosaic { display: flex; flex-direction: column; gap: var(--sp-16); }
  .mosaic .mcol.is-b, .mosaic .mcol.is-c, .mosaic .mcol.is-d, .mosaic .mcol.is-e { display: none; }
  .one-view { display: none; }
  .section, .section-open, .section-surface, .section-tight { padding-top: var(--sp-48); padding-bottom: var(--sp-48); }
  .hero-mid { padding-bottom: var(--sp-24); }
  .merge-in.is-left { gap: var(--sp-8); }
  .m-part { padding-top: var(--sp-14); padding-bottom: var(--sp-14); }
}
.vp-mobile [data-screen-label="Product"], .vp-mobile [data-screen-label="Kanalen"], .vp-mobile [data-screen-label="Altijd aan"], .vp-mobile [data-screen-label="Rekensom"], .vp-mobile [data-screen-label="Systeem"], .vp-mobile [data-screen-label="Nederland"], .vp-mobile [data-screen-label="Makers"] { display: none; }
.vp-mobile .only-mobile { display: block; }
.vp-mobile .mosaic { display: flex; flex-direction: column; gap: var(--sp-16); }
.vp-mobile .mosaic .mcol.is-b, .vp-mobile .mosaic .mcol.is-c, .vp-mobile .mosaic .mcol.is-d, .vp-mobile .mosaic .mcol.is-e { display: none; }
.vp-mobile .one-view { display: none; }
.vp-mobile .section, .vp-mobile .section-open, .vp-mobile .section-surface, .vp-mobile .section-tight { padding-top: var(--sp-48); padding-bottom: var(--sp-48); }
.vp-mobile .hero-mid { padding-bottom: var(--sp-24); }
.vp-mobile .merge-in.is-left { gap: var(--sp-8); }
.vp-mobile .m-part { padding-top: var(--sp-14); padding-bottom: var(--sp-14); }

.vp-mobile .wa-float { width: var(--sp-56); height: var(--sp-56); padding: var(--sp-0); justify-content: center; }
.vp-mobile .wa-float-label { display: none; }

/* ---------- mobiel: fotoplaten op een papieren ondergrond ---------- */
:root { --color-paper: #f6f4f0; }
.m-plates { display: flex; flex-direction: column; gap: var(--sp-32); }
.m-plate { display: flex; flex-direction: column; gap: var(--sp-10); }
.m-plate-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-20); }
.m-plate.is-portrait .m-plate-img { aspect-ratio: 1 / 1; }
.m-plate.only-mobile { display: none; }
.m-plate-cap { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); text-wrap: pretty; }

@media (max-width: 640px) {
  .only-mobile.m-plate { display: flex; }
  body, .page { background: var(--color-paper); }
  .site-header, .site-header.is-scrolled { background: var(--color-paper); }
  .section-surface { background: var(--color-page); }
  .lead { font-size: var(--fs-18); }
  .m-plates .m-plate, #voorbeelden .m-plate { margin-left: calc(var(--pad-wrap) * -1); margin-right: calc(var(--pad-wrap) * -1); }
  .m-plates .m-plate-img, #voorbeelden .m-plate-img { border-radius: var(--sp-0); aspect-ratio: 3 / 4; }
  .m-plates .m-plate-cap, #voorbeelden .m-plate-cap { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }
  .whatis-visual { margin-left: calc(var(--pad-wrap) * -1); margin-right: calc(var(--pad-wrap) * -1); border-radius: var(--sp-0); }
  .whatis-float { display: none; }
}
.vp-mobile .only-mobile.m-plate { display: flex; }
.vp-mobile body, .vp-mobile .page { background: var(--color-paper); }
.vp-mobile .site-header, .vp-mobile .site-header.is-scrolled { background: var(--color-paper); }
.vp-mobile .section-surface { background: var(--color-page); }
.vp-mobile .lead { font-size: var(--fs-18); }
.vp-mobile .m-plates .m-plate, .vp-mobile #voorbeelden .m-plate { margin-left: calc(var(--pad-wrap) * -1); margin-right: calc(var(--pad-wrap) * -1); }
.vp-mobile .m-plates .m-plate-img, .vp-mobile #voorbeelden .m-plate-img { border-radius: var(--sp-0); aspect-ratio: 3 / 4; }
.vp-mobile .m-plates .m-plate-cap, .vp-mobile #voorbeelden .m-plate-cap { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }
.vp-mobile .whatis-visual { margin-left: calc(var(--pad-wrap) * -1); margin-right: calc(var(--pad-wrap) * -1); border-radius: var(--sp-0); }
.vp-mobile .whatis-float { display: none; }

/* ---------- bewijs: echte schermen naast de uitleg ---------- */
.proof-stack { display: flex; flex-direction: column; gap: var(--sp-40); }
.proof-lede { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-48); }
.proof-copy { display: flex; flex-direction: column; gap: var(--sp-20); max-width: 720px; flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.proof-aside { display: flex; flex-direction: column; gap: var(--sp-12); flex: 0 0 auto; }
.proof-shots { display: flex; flex-direction: column; gap: var(--sp-28); }
.proof-shot { display: flex; flex-direction: column; gap: var(--sp-8); margin: var(--sp-0); }
.proof-shot-frame { border: var(--bw-1) solid var(--color-line); border-radius: var(--r-14); background: var(--color-page); overflow: hidden; box-shadow: var(--shadow-card); }
.proof-shot-img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.proof-shot-cap { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); text-wrap: pretty; }
.proof-shot.is-phone { max-width: 240px; }
.proof-shot.is-phone .proof-shot-frame { border-radius: var(--r-24); }

/* Schermafbeeldingen op ware grootte: nooit vergroot en nooit gekrompen, want
   krimpen maakt de tekst erin zowel klein als onscherp. Past het beeld niet in
   de kolom, dan schuift het horizontaal. */
.proof-shot-hint { display: none; }
.shot-hint { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); }
.shot-scroll { width: 100%; }
.proof-shot-frame.is-true, .shot-scroll { scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
.proof-shot-frame.is-true::-webkit-scrollbar, .shot-scroll::-webkit-scrollbar { height: var(--sp-6); }
.proof-shot-frame.is-true::-webkit-scrollbar-thumb, .shot-scroll::-webkit-scrollbar-thumb {
  background: var(--color-line-strong);
  border-radius: var(--r-pill);
}
@media (max-width: 900px) {
  .proof-shot-frame.is-true { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .proof-shot-frame.is-true .proof-shot-img { width: auto; max-width: none; }
  .shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-14); }
  .shot-scroll .shot { width: auto; max-width: none; }
  .proof-shot-hint { display: inline; }
}
.vp-mobile .proof-shot-frame.is-true { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vp-mobile .proof-shot-frame.is-true .proof-shot-img { width: auto; max-width: none; }
.vp-mobile .shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-14); }
.vp-mobile .shot-scroll .shot { width: auto; max-width: none; }
.vp-mobile .proof-shot-hint { display: inline; }

/* ---------- spaarkaart ---------- */
.stampcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-24);
  border-radius: var(--r-24);
  background: var(--color-ink);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-float);
}
.stampcard-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.stampcard-brand { display: inline-flex; flex-direction: row; align-items: center; gap: var(--sp-12); }
.stampcard-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-40); height: var(--sp-40);
  border-radius: var(--r-10);
  background: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-display); font-size: var(--fs-13); font-weight: var(--fw-bold);
}
.stampcard-name { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); }
.stampcard-count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-on-dark-soft); }
.stampcard-stamps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-10); }
.stamp {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-pill);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.22);
  font-size: var(--fs-14);
  color: var(--color-on-dark-soft);
}
.stamp.is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
.stampcard-reward {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.16);
}
.stampcard-reward-name { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); }

@media (max-width: 640px) {
  .proof-lede { flex-direction: column; gap: var(--sp-24); }
  .proof-stack { gap: var(--sp-28); }
  .proof-shots { gap: var(--sp-20); }
  .proof-copy { gap: var(--sp-16); }
  .proof-shot.is-phone { max-width: 200px; align-self: flex-start; }
  .stampcard { padding: var(--sp-20); }
}
.vp-mobile .proof-lede { flex-direction: column; gap: var(--sp-24); }
.vp-mobile .proof-stack { gap: var(--sp-28); }
.vp-mobile .proof-shots { gap: var(--sp-20); }
.vp-mobile .proof-copy { gap: var(--sp-16); }
.vp-mobile .proof-shot.is-phone { max-width: 200px; align-self: flex-start; }
.vp-mobile .stampcard { padding: var(--sp-20); }

.m-parts.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-40); }
@media (max-width: 640px) {
  .m-parts.is-two { grid-template-columns: minmax(0, 1fr); }
}
.vp-mobile .m-parts.is-two { grid-template-columns: minmax(0, 1fr); }


/* ---------- home: pijnpunten, twee bij twee ---------- */
.duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
@media (max-width: 1080px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vp-tablet .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-mobile .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pain-card {
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-24);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.pain-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.pain-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-18); color: var(--color-ink); }
.pain-line { font-family: var(--font-body); font-size: var(--type-body-soft); line-height: var(--lh-normal); color: var(--color-ink-2); text-wrap: pretty; }

/* ---------- home: cijfers uit onderzoek ---------- */
.stat-card {
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-24);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-left: var(--sp-3) solid var(--color-accent-deep);
  border-radius: var(--r-14);
}
.stat-num { font-family: var(--font-display); font-size: var(--fs-44); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--color-ink); }
.stat-line { font-family: var(--font-body); font-size: var(--type-body-soft); line-height: var(--lh-normal); color: var(--color-ink-2); text-wrap: pretty; }
.stat-src { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }

/* ---------- home: onderdeel per rij, tekst naast één beeld ---------- */
.zig { display: flex; flex-direction: column; gap: var(--sp-64); }
.zig-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); align-items: center; }
.zig-copy { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 460px; }
.zig-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent-deep); }
.zig-link { align-self: flex-start; margin-top: var(--sp-4); font-family: var(--font-body); font-size: var(--fs-15); color: var(--color-ink); border-bottom: var(--bw-1) solid var(--color-line-strong); padding-bottom: var(--sp-2); }
.zig-link:hover { border-bottom-color: var(--color-accent); }
.zig-visual {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-28);
  background: var(--color-surface);
  border-radius: var(--r-20);
}
.zig-visual.is-veil { background: var(--color-accent-veil); }
.zig-visual > * { width: 100%; }

/* Een telefoon en een browservenster om een echte foto heen. */
.vis-phone {
  width: 100%; max-width: 268px;
  padding: var(--sp-8);
  background: var(--color-dark);
  border-radius: var(--r-28);
  box-shadow: 0 var(--sp-18) var(--sp-56) var(--color-shadow);
}
/* Alleen een losse schermfoto in het toestel; klassen als .lock-wall en
   .pass-photo zetten hun eigen hoogte en mogen niet worden overruled. */
.vis-phone > img { display: block; width: 100%; height: auto; border-radius: var(--r-20); }
.vis-browser {
  width: 100%;
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  overflow: hidden;
  box-shadow: 0 var(--sp-14) var(--sp-40) var(--color-shadow-soft);
}
.vis-bar {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-6);
  padding: var(--sp-10) var(--sp-12);
  background: var(--color-surface-2);
  border-bottom: var(--bw-1) solid var(--color-line);
}
.vis-dot { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-pill); background: var(--color-line-strong); flex: 0 0 auto; }
.vis-url {
  margin-left: var(--sp-8);
  padding: var(--sp-3) var(--sp-12);
  background: var(--color-page);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3);
}
.vis-browser img { display: block; width: 100%; height: auto; }
.zig-visual .card-panel { box-shadow: 0 var(--sp-14) var(--sp-40) var(--color-shadow-soft); }
.zig-row.is-flip .zig-visual { order: -1; }

/* ---------- home: hero met twee beelden in plaats van vijf ---------- */
.hero-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); align-items: start; }
.hero-duo > .mtile { height: 100%; }
.hero-duo .mtile.is-photo { padding: var(--sp-0); overflow: hidden; }
.hero-duo .mtile-img { width: 100%; height: auto; min-height: var(--sp-0); aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- home: rekensom en stappen, tekst naast één blok ---------- */
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); align-items: start; }
.pair-copy { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 460px; }
.calc-card { padding: var(--sp-28); background: var(--color-page); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); }
.step-rows { display: flex; flex-direction: column; gap: var(--sp-16); }
.step-row {
  display: grid; grid-template-columns: var(--sp-40) minmax(0, 1fr); gap: var(--sp-16); align-items: start;
  padding: var(--sp-20) var(--sp-24);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.step-row-num {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-40); height: var(--sp-40);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--color-accent-deep);
}
.step-row-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.step-row-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-18); color: var(--color-ink); }

/* ---------- home: plannen als drie regels naast de uitleg ---------- */
.plan-rows { display: flex; flex-direction: column; gap: var(--sp-12); }
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16); align-items: baseline;
  padding: var(--sp-20) var(--sp-24);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
}
.plan-row.is-featured { border-color: var(--color-accent); }
.plan-row-head { display: flex; flex-direction: column; gap: var(--sp-4); min-width: var(--sp-0); }
.plan-row-name { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-18); color: var(--color-ink); }
.plan-row-line { font-family: var(--font-body); font-size: var(--type-body-soft); line-height: var(--lh-normal); color: var(--color-ink-2); text-wrap: pretty; }
.plan-row-price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-30); letter-spacing: var(--ls-tight); color: var(--color-ink); white-space: nowrap; }
.plan-row-per { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.plan-row-flag { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent-deep); }

/* Onder 900px staat alles onder elkaar: beeld eerst, dan de tekst. */
@media (max-width: 900px) {
  .zig { gap: var(--sp-40); }
  .zig-row, .pair-row, .hero-duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
  .zig-copy, .pair-copy { max-width: none; }
  .zig-visual { padding: var(--sp-18); }
  .hero-duo .mtile.is-photo { order: -1; }
  .hero-duo .mtile-img { height: auto; aspect-ratio: 16 / 10; }
  .calc-card { padding: var(--sp-18); }
}
@media (max-width: 640px) {
  .duo-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-num { font-size: var(--fs-30); }
  .stat-card { padding: var(--sp-16); gap: var(--sp-6); }
  .pain-card, .step-row, .plan-row { padding: var(--sp-18); }
  .plan-row { grid-template-columns: minmax(0, 1fr); }
}
.vp-tablet .zig-row, .vp-tablet .pair-row, .vp-tablet .hero-duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
.vp-tablet .hero-duo .mtile.is-photo { order: -1; }
.vp-tablet .hero-duo .mtile-img { height: auto; aspect-ratio: 16 / 10; }
.vp-mobile .zig { gap: var(--sp-40); }
.vp-mobile .zig-row, .vp-mobile .pair-row, .vp-mobile .hero-duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
.vp-mobile .zig-copy, .vp-mobile .pair-copy { max-width: none; }
.vp-mobile .zig-visual { padding: var(--sp-18); }
.vp-mobile .hero-duo .mtile.is-photo { order: -1; }
.vp-mobile .hero-duo .mtile-img { height: auto; aspect-ratio: 16 / 10; }
.vp-mobile .duo-grid { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .stat-num { font-size: var(--fs-30); }
.vp-mobile .stat-card { padding: var(--sp-16); gap: var(--sp-6); }
.vp-mobile .pain-card, .vp-mobile .step-row, .vp-mobile .plan-row { padding: var(--sp-18); }
.vp-mobile .plan-row { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .calc-card { padding: var(--sp-18); }


/* ---------- koppen in serif, cijfers blijven sans ---------- */
.display-1, .display-2, .heading-2, .heading-3, .faq-q {
  font-family: var(--font-head);
  letter-spacing: -0.012em;
}
.stat-num, .calc-value, .plan-price, .plan-row-price, .step-row-num, .card-num, .step-num { font-family: var(--font-display); }

/* ---------- kleine hulpjes ---------- */
.stack-4 { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero-duo .stars.is-small { color: var(--color-star); }
.hero-duo .rv-dots { padding: var(--sp-0) var(--sp-18) var(--sp-18) var(--sp-18); }
.hero-duo .mtile { display: flex; flex-direction: column; }
.plan-row-name { flex-wrap: wrap; }


/* Dezelfde reviewkaart, nu buiten het mozaïek. */
.hero-duo .rv-track > .rv { min-height: var(--h-tile-a); }

@media (max-width: 1080px) {
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
  .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
  .mosaic .is-c .artikel-img { height: var(--h-artikel); }
  .hero-duo .rv-track > .rv { min-height: var(--sp-0); }
}
@media (max-width: 720px) {
  .mosaic .is-b .mtile-img, .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
  .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
}
.vp-tablet .mosaic .is-b .mtile-img, .vp-tablet .mosaic .is-e .mtile-img { height: var(--h-mtile-photo); }
.vp-tablet .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
.vp-tablet .mosaic .is-c .artikel-img { height: var(--h-artikel); }
.vp-tablet .hero-duo .rv-track > .rv { min-height: var(--sp-0); }
.vp-mobile .mosaic .is-b .mtile-img, .vp-mobile .mosaic .is-e .mtile-img { height: var(--h-mtile-photo-mob); }
.vp-mobile .mosaic .is-d .mtile-phone { height: auto; width: 100%; }
.vp-mobile .mosaic .is-c .artikel-img { height: var(--h-artikel-mob); }
.vp-mobile .hero-duo .rv-track > .rv { min-height: var(--sp-0); }

/* ---------- hero: overlap wegnemen ----------
   De knoppen hadden een eigen minimumbreedte en konden niet krimpen, dus ze
   liepen over de buurkolommen heen. Ze volgen nu de kolom. */
.mosaic .hero-cta { width: 100%; align-items: stretch; }
.mosaic .hero-cta .button-primary,
.mosaic .hero-cta .button-ghost {
  width: 100%;
  min-width: var(--sp-0);
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
/* De middenkolom is smal. Een iets kleiner label past daar op één regel,
   zodat beide knoppen dezelfde hoogte houden. */
.mosaic .hero-cta .button-primary.is-big,
.mosaic .hero-cta .button-ghost.is-big {
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  font-size: var(--fs-15);
}

/* Het artikel stond op flex-basis 0 in een kolom: dat is hoogte nul.
   Het krijgt zijn eigen hoogte terug. */
.mosaic .artikel { flex: 0 0 auto; }
.mosaic .is-c .artikel-img { height: var(--h-tile-c); }

/* De overlay blijft binnen de foto. */
.mosaic .mtile-overlay {
  max-width: calc(100% - var(--sp-32));
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  font-size: var(--fs-18);
}

/* Alle vijf de kolommen even breed, ongeacht hun inhoud. */
.mosaic > .mcol { flex: 1 1 0%; width: 0%; }

/* De afsnijding was bedoeld voor de vaste kolomhoogte. Die is er niet meer,
   dus deze regel kniptte alleen nog de halve hero weg. */
.hero-mid { overflow: visible; flex-direction: column; }
.mosaic { margin-bottom: var(--sp-0); }

/* ---------- claim-slider: één zin tegelijk, rustig doorschuiven ---------- */
.mtile.is-claim {
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-16);
  background: var(--color-surface);
  border-color: transparent;
  box-shadow: none;
  padding: var(--sp-20);
  min-height: var(--h-claim);
}
.claim-track { display: flex; flex-direction: column; justify-content: center; flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.claim {
  display: none;
  flex-direction: column;
  gap: var(--sp-10);
  animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.claim.is-on { display: flex; }
.claim-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-deep);
}
.claim-text {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.024em;
  color: var(--color-ink);
  text-wrap: pretty;
}
.claim-dots { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-8); flex: 0 0 auto; }
.claim-dot {
  width: var(--sp-4);
  height: var(--sp-4);
  border: none;
  padding: var(--sp-0);
  border-radius: var(--r-pill);
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background 0.3s ease, height 0.3s ease;
}
.claim-dot.is-active { background: var(--color-accent); height: var(--sp-20); }
@media (max-width: 640px) { .claim-text { font-size: var(--fs-18); } }
.vp-mobile .claim-text { font-size: var(--fs-18); }

/* ---------- agenda: wat de agents deze week doen ---------- */
.agenda { display: flex; flex-direction: column; gap: var(--sp-8); }
.ag-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-14);
  background: var(--color-surface);
}
.ag-row.is-next { background: var(--color-accent-wash); }
.ag-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sp-40);
  height: var(--sp-40);
  border-radius: var(--r-10);
  background: var(--color-page);
}
.ag-day { font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; color: var(--color-ink-3); line-height: var(--lh-tight); }
.ag-num { font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.ag-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--sp-0); min-width: var(--sp-0); }
.ag-title { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--color-ink); }
.ag-sub { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.ag-mark { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* ---------- reviewslider: aantrekkelijker ---------- */
.hero-duo .mtile { padding: var(--sp-0); overflow: hidden; }
.hero-duo .mtile-tag { padding: var(--sp-18) var(--sp-18) var(--sp-12) var(--sp-18); }
.hero-duo .rv-track > .rv {
  padding: var(--sp-0) var(--sp-18) var(--sp-18) var(--sp-18);
  gap: var(--sp-14);
  align-items: flex-start;
}
.hero-duo img.rv-avatar {
  width: var(--sp-48);
  height: var(--sp-48);
  border: var(--bw-2) solid var(--color-page);
  box-shadow: 0 var(--sp-2) var(--sp-8) var(--color-shadow-soft);
}
.hero-duo .rv-name { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: -0.018em; }
.hero-duo .rv-text {
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  padding: var(--sp-12) var(--sp-14);
  background: var(--color-surface);
  border-radius: var(--r-14);
}
.hero-duo .rv-status {
  align-self: flex-start;
  padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
}
.hero-duo .rv-status.is-new { background: var(--color-surface-2); color: var(--color-ink-2); }
.hero-duo .rv-dots { padding: var(--sp-0) var(--sp-18) var(--sp-18) var(--sp-18); }
.hero-duo .stars.is-small { color: var(--color-star); }
.hero-duo .rv-name { font-size: var(--fs-16); line-height: var(--lh-snug); }
.hero-duo .rv-top { align-items: flex-start; }

/* Hero: één rij knoppen, gecentreerd, ook op laptop. */
.hero-cta-mid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); width: 100%; }
.hero-cta-mid .hero-btns { display: flex; flex-direction: row; justify-content: center; gap: var(--sp-12); flex-wrap: wrap; }
.hero-cta-mid .rating-line { justify-content: center; }
.hero-cta-mid .hero-mid-note { text-align: center; }
@media (max-width: 560px) {
  .hero-cta-mid { align-items: stretch; }
  .hero-cta-mid .hero-btns { flex-direction: column; }
  .hero-cta-mid .hero-btns .button-primary, .hero-cta-mid .hero-btns .button-ghost { width: 100%; justify-content: center; text-align: center; }
}
.vp-mobile .hero-cta-mid { align-items: stretch; }
.vp-mobile .hero-cta-mid .hero-btns { flex-direction: column; }
.vp-mobile .hero-cta-mid .hero-btns .button-primary, .vp-mobile .hero-cta-mid .hero-btns .button-ghost { width: 100%; justify-content: center; text-align: center; }

.vis-who { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--color-ink); }
.vis-avatar { width: var(--sp-36); height: var(--sp-36); border-radius: var(--r-pill); object-fit: cover; flex: 0 0 auto; }
.zig-visual .stars.is-small { color: var(--color-star); }


/* ---------- home: laatste puntjes voor de telefoon ---------- */
.zig-link { white-space: nowrap; }
.plan-row-flag { white-space: nowrap; }

/* De zoekmock moet op een telefoon niet over drie regels vallen. */
@media (max-width: 640px) {
  .zig-visual .mock-card { padding: var(--sp-10) var(--sp-12); gap: var(--sp-10); }
  .zig-visual .mock-name { font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: var(--sp-0); }
  .zig-visual .mock-meta { font-size: var(--fs-11); white-space: nowrap; flex: 0 0 auto; }
  .zig-visual .mock-query { font-size: var(--fs-14); }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .plan-row .stack-4 { align-items: flex-end; }
}
.vp-mobile .zig-visual .mock-card { padding: var(--sp-10) var(--sp-12); gap: var(--sp-10); }
.vp-mobile .zig-visual .mock-name { font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: var(--sp-0); }
.vp-mobile .zig-visual .mock-meta { font-size: var(--fs-11); white-space: nowrap; flex: 0 0 auto; }
.vp-mobile .zig-visual .mock-query { font-size: var(--fs-14); }
.vp-mobile .plan-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.vp-mobile .plan-row .stack-4 { align-items: flex-end; }

.plan-row-per { white-space: nowrap; }
.zig-visual .stampcard-name, .zig-visual .stampcard-count, .zig-visual .stampcard-reward-name { white-space: nowrap; }
@media (max-width: 640px) {
  .zig-visual .mock-name { font-size: var(--fs-13); }
}
.vp-mobile .zig-visual .mock-name { font-size: var(--fs-13); }

.vis-flag {
  align-self: flex-start;
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-mono); font-size: var(--fs-12);
  white-space: nowrap;
}
.zig-visual .vis-who { white-space: nowrap; }


/* ---------- reviews zoals ze op de site van een klant staan ---------- */
.vis-site { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-18); }
.vis-site-head { font-family: var(--font-head); font-size: var(--fs-18); color: var(--color-ink); }
.vis-rev {
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-12);
  padding: var(--sp-14);
  background: var(--color-surface);
  border-radius: var(--r-14);
}
.vis-rev-body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: var(--sp-0); }
.vis-rev-top { display: flex; flex-direction: row; align-items: baseline; gap: var(--sp-8); }
.vis-rev-name { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--color-ink); white-space: nowrap; }
.vis-rev-when { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); white-space: nowrap; }
.vis-rev-text { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--color-ink-2); text-wrap: pretty; }
.vis-site-foot { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.vis-site .vis-avatar { width: var(--sp-32); height: var(--sp-32); }


/* ---------- spaarkaart: de pas zoals hij in de wallet staat ---------- */
.vis-phone.is-wallet { max-width: 300px; }
.wallet-screen {
  display: flex; flex-direction: column; gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-14) var(--sp-16);
  background: var(--color-surface);
  border-radius: var(--r-20);
}
.wallet-notch {
  width: var(--sp-56); height: var(--sp-6);
  margin: var(--sp-0) auto var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--color-line-strong);
}
.wallet-note {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-12);
  background: var(--color-page);
  border-radius: var(--r-12);
  box-shadow: 0 var(--sp-2) var(--sp-10) var(--color-shadow-soft);
}
.wallet-note-app { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.wallet-note-text { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--color-ink); text-wrap: pretty; }
.wallet-pass {
  display: flex; flex-direction: column; gap: var(--sp-14);
  padding: var(--sp-14);
  background: var(--color-dark);
  border-radius: var(--r-14);
}
.wallet-pass-top { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.wallet-mark {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-32); height: var(--sp-32); flex: 0 0 auto;
  border-radius: var(--r-10);
  background: var(--color-accent);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-11); color: var(--color-dark);
}
.wallet-pass-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); color: var(--color-on-dark); white-space: nowrap; }
.wallet-pass-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-on-dark-soft); white-space: nowrap; }
.wallet-stamps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-6); }
.wallet-stamp {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-pill);
  border: var(--bw-1) solid var(--color-on-dark-soft);
  font-size: var(--fs-12); color: transparent;
}
.wallet-stamp.is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); }
.wallet-reward {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-12);
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.14);
}
.wallet-reward-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); color: var(--color-on-dark); }
.wallet-reward-when { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-on-dark-soft); }
.wallet-foot { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); text-align: center; }

.wallet-note.is-quiet { background: var(--color-page); box-shadow: none; border: var(--bw-1) solid var(--color-line); }

.wallet-hero { display: flex; justify-content: center; }

.widget-mount.is-site { min-height: var(--sp-0); padding: var(--sp-14); }


/* ---------- pijnpunten: zelfde kaartvorm als de cijfers ---------- */
.pain-card {
  gap: var(--sp-6);
  padding: var(--sp-24);
  border-radius: var(--r-14);
  border-left: var(--sp-3) solid var(--color-line-strong);
}
.pain-head { align-items: center; gap: var(--sp-10); }
.pain-x {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-24); height: var(--sp-24); flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--color-surface-2);
  font-size: var(--fs-11); color: var(--color-ink-3);
}
.pain-name { font-size: var(--fs-17); font-weight: var(--fw-semi); letter-spacing: var(--ls-snug); }
@media (max-width: 640px) {
  .pain-card { padding: var(--sp-16) var(--sp-18); }
}
.vp-mobile .pain-card { padding: var(--sp-16) var(--sp-18); }


/* ---------- cijfer- en pijnkaarten: icoon boven, streep links, geen rand ---------- */
.stat-card, .pain-card {
  border-top: none; border-right: none; border-bottom: none;
  box-shadow: 0 var(--sp-1) var(--sp-2) var(--color-shadow-soft),
              0 var(--sp-10) var(--sp-28) var(--color-shadow-soft);
}
.card-icon { display: flex; align-items: center; justify-content: flex-start; height: var(--sp-24); }
.stat-card .card-icon { color: var(--color-accent-deep); }
.pain-card .card-icon { color: var(--color-ink-3); }
.stat-card { gap: var(--sp-6); }
.stat-card .stat-num { margin-top: var(--sp-4); }
.stat-card .stat-src { margin-top: var(--sp-6); }
.pain-card { gap: var(--sp-6); }
.pain-card .pain-name { margin-top: var(--sp-2); }

.vis-device { display: block; width: 100%; max-width: 1010px; height: auto; }


/* ---------- klantenkaart: de kaartsoorten in een slider ---------- */
.loy-slider { display: flex; flex-direction: column; align-items: center; gap: var(--sp-14); width: 100%; }
.loy-tabs { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); }
.loy-tab {
  padding: var(--sp-6) var(--sp-12);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-ink-3);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.loy-tab:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
.loy-tab.is-on { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent-deep); }
.loy-track { position: relative; display: grid; }
.loy-slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: var(--sp-12);
  opacity: 0;
  transform: translateY(var(--sp-8));
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.loy-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.loy-dots { display: flex; flex-direction: row; gap: var(--sp-6); }
.loy-dot {
  width: var(--sp-6); height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--color-line-strong);
  border: 0;
  padding: var(--sp-0);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.loy-dot.is-on { width: var(--sp-18); background: var(--color-accent); }

/* Kaartvarianten: licht en groen naast de donkere pas. */
.wallet-pass.is-light { background: var(--color-page); border: var(--bw-1) solid var(--color-line); }
.wallet-pass.is-light .wallet-pass-name, .wallet-pass.is-light .wallet-reward-name { color: var(--color-ink); }
.wallet-pass.is-light .wallet-pass-count, .wallet-pass.is-light .wallet-reward-when { color: var(--color-ink-3); }
.wallet-pass.is-light .wallet-reward { border-top-color: var(--color-line); }
.wallet-pass.is-light .wallet-mark { background: var(--color-dark); color: var(--color-on-dark); }
.wallet-pass.is-accent { background: var(--color-accent-deep); }
.wallet-pass.is-accent .wallet-mark { background: var(--color-page); color: var(--color-dark); }
.wallet-pass.is-accent .wallet-reward { border-top-color: rgba(255, 255, 255, 0.2); }

/* Balk voor punten en tegoed, in plaats van stempels. */
.wallet-meter { height: var(--sp-8); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.wallet-pass.is-light .wallet-meter { background: var(--color-surface-2); }
.wallet-meter-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--color-accent); }
.wallet-meter-fill.is-60 { width: 60%; }
.wallet-meter-fill.is-65 { width: 65%; }
.wallet-pass.is-accent .wallet-meter-fill { background: var(--color-page); }

.wallet-pass.is-accent .wallet-pass-name, .wallet-pass.is-accent .wallet-pass-count,
.wallet-pass.is-accent .wallet-reward-name, .wallet-pass.is-accent .wallet-reward-when { color: var(--color-dark); }
.wallet-pass.is-accent .wallet-reward { border-top-color: rgba(11, 16, 12, 0.22); }
.wallet-pass.is-accent .wallet-meter { background: rgba(11, 16, 12, 0.16); }
.wallet-pass.is-accent .wallet-meter-fill { background: var(--color-dark); }


/* ---------- pas met de foto van de zaak erop ---------- */
.wallet-pass { padding: var(--sp-0); overflow: hidden; }
.wallet-photo { display: block; width: 100%; height: var(--sp-64); object-fit: cover; }
.wallet-pass-body { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-14); }
.wallet-pass-top { gap: var(--sp-10); }
.wallet-pass-name { font-size: var(--fs-15); }
.wallet-meter-fill.is-100 { width: 100%; }


/* ---------- walletscherm: pas met foto, gegevens en QR ---------- */
.wallet-screen { gap: var(--sp-10); padding: var(--sp-12) var(--sp-0) var(--sp-14); overflow: hidden; }
.wallet-bar {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: var(--sp-0) var(--sp-14);
}
.wallet-time { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-12); color: var(--color-ink); }
.wallet-icons { display: flex; flex-direction: row; align-items: flex-end; gap: var(--sp-4); }
.wallet-ico { display: block; background: var(--color-ink); border-radius: var(--r-4); }
.wallet-ico.is-a { width: var(--sp-12); height: var(--sp-8); }
.wallet-ico.is-b { width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-pill); }
.wallet-ico.is-c { width: var(--sp-16); height: var(--sp-8); border-radius: var(--r-4); }
.wallet-head {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: var(--sp-0) var(--sp-14);
}
.wallet-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.wallet-plus {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-28); height: var(--sp-28);
  border-radius: var(--r-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body); font-size: var(--fs-16); line-height: 1;
}
.loy-tabs {
  justify-content: flex-start; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-0) var(--sp-14) var(--sp-2);
  scrollbar-width: none;
}
.loy-tabs::-webkit-scrollbar { display: none; }
.loy-tab { flex: 0 0 auto; }
.loy-viewport { overflow: hidden; padding-left: var(--sp-14); }
.loy-track { display: flex; flex-direction: row; gap: var(--sp-10); transition: transform 0.45s ease; }
.loy-slide {
  grid-area: auto;
  flex: 0 0 82%;
  display: block;
  opacity: 0.45;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}
.loy-slide.is-on { opacity: 1; }
.loy-dots { justify-content: center; }

.pass { display: flex; flex-direction: column; background: var(--color-accent-deep); border-radius: var(--r-14); overflow: hidden; }
.pass.is-dark { background: var(--color-dark); }
.pass.is-accent { background: var(--color-accent); }
.pass.is-light { background: var(--color-page); border: var(--bw-1) solid var(--color-line); }
.pass-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); padding: var(--sp-12) var(--sp-14); }
.pass-logo {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-28); height: var(--sp-28); flex: 0 0 auto;
  border-radius: var(--r-10);
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-13); color: var(--color-dark);
}
/* Inkt volgt de kaart: donkere letters op de groene en witte passen, witte
   letters alleen op de zwarte. Groen is te licht voor wit. */
.pass-brand { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); color: var(--color-dark); white-space: nowrap; }
.pass-logo { background: var(--color-dark); color: var(--color-page); }
.pass.is-dark .pass-brand { color: var(--color-on-dark); }
.pass.is-dark .pass-logo { background: var(--color-page); color: var(--color-dark); }
.pass-photo { display: block; width: 100%; height: var(--sp-80); object-fit: cover; }
.pass-body { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-14); }
/* Labels op rij één, waarden op rij twee: dan staan beide kolommen op één lijn,
   ook als een label over twee regels valt. */
.pass-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: var(--sp-2) var(--sp-12);
}
.pass-meta-item { display: contents; }
.pass-meta-key {
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-dark);
}
.pass-meta-val {
  font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); color: var(--color-dark);
  min-width: var(--sp-0);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--lh-snug);
}
.pass.is-dark .pass-meta-key { color: rgba(255, 255, 255, 0.72); }
.pass.is-dark .pass-meta-val { color: var(--color-on-dark); }
.pass.is-light .pass-meta-key { color: var(--color-ink-3); }
.pass-qr {
  align-self: center;
  padding: var(--sp-10);
  background: var(--color-page);
  border-radius: var(--r-12);
}
.pass-qr img { display: block; width: var(--sp-72); height: var(--sp-72); }


/* ---------- melding boven de kaart, zoals op een telefoon ---------- */
.wallet-push {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-0) var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  background: var(--color-page);
  border-radius: var(--r-14);
  box-shadow: 0 var(--sp-3) var(--sp-14) var(--color-shadow-soft);
}
.push-top { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); }
.push-logo {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-16); height: var(--sp-16); flex: 0 0 auto;
  border-radius: var(--r-4);
  background: var(--color-accent-deep);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-11); color: var(--color-on-dark);
}
.push-app { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-when { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.push-title { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-13); color: var(--color-ink); }
.push-text { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--color-ink-2); text-wrap: pretty; }


/* ---------- eigenaarskant: bericht aan je leden ---------- */
.owner-panel {
  display: flex; flex-direction: column; gap: var(--sp-14);
  width: 100%;
  padding: var(--sp-18);
  background: var(--color-page);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20);
  box-shadow: 0 var(--sp-14) var(--sp-40) var(--color-shadow-soft);
}
.owner-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.owner-title { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-16); color: var(--color-ink); }
.owner-tag { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.owner-picks { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-6); }
.owner-pick {
  padding: var(--sp-6) var(--sp-12);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-page);
  font-family: var(--font-body); font-size: var(--fs-13); color: var(--color-ink-2);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.owner-pick:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
.owner-pick.is-on { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent-deep); }
.owner-msg {
  padding: var(--sp-14);
  background: var(--color-surface);
  border-radius: var(--r-14);
}
.owner-msg-text { font-family: var(--font-body); font-size: var(--type-body-soft); line-height: var(--lh-normal); color: var(--color-ink); text-wrap: pretty; }
.owner-foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.owner-who { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--color-ink-3); }
.owner-send {
  padding: var(--sp-6) var(--sp-14);
  border-radius: var(--r-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body); font-size: var(--fs-13); white-space: nowrap;
}
.owner-note { font-family: var(--font-mono); font-size: var(--fs-11); line-height: var(--lh-normal); color: var(--color-ink-3); }


/* ---------- vergrendelscherm: zo komt het bericht aan bij de gast ---------- */
.owner-demo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-14); width: 100%; }
.owner-demo .owner-picks { justify-content: center; }
.owner-demo .owner-note { text-align: center; }
.vis-phone.is-lock { max-width: 300px; }
.lock-screen {
  position: relative;
  min-height: 380px;
  display: flex; flex-direction: column; gap: var(--sp-14);
  padding: var(--sp-12) var(--sp-12) var(--sp-18);
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--color-dark);
}
.lock-wall { position: absolute; inset: var(--sp-0); width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.lock-bar { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.lock-time-small { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-12); color: var(--color-on-dark); }
.lock-bar .wallet-ico { background: var(--color-on-dark); }
.lock-clock { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); padding-top: var(--sp-10); }
.lock-day { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-13); color: var(--color-on-dark); }
.lock-time { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-on-dark); }
.lock-push {
  position: relative;
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-10);
  margin-top: var(--sp-24);
  padding: var(--sp-12);
  background: var(--color-page);
  border-radius: var(--r-14);
  box-shadow: 0 var(--sp-6) var(--sp-20) var(--color-shadow);
}
.lock-logo {
  display: flex; align-items: center; justify-content: center;
  width: var(--sp-28); height: var(--sp-28); flex: 0 0 auto;
  border-radius: var(--r-10);
  background: var(--color-accent-deep);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-13); color: var(--color-on-dark);
}
.lock-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: var(--sp-0); }
.lock-title { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-13); color: var(--color-ink); text-wrap: pretty; }
.lock-text { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--color-ink-2); text-wrap: pretty; }


/* ---------- mobiel: onderdelen blijven twee bij twee, net als op laptop ---------- */
@media (max-width: 640px) {
  .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .pain-card { padding: var(--sp-14); gap: var(--sp-6); }
  .pain-head { gap: var(--sp-8); }
  .pain-x { width: var(--sp-20); height: var(--sp-20); }
  .pain-name { font-size: var(--fs-15); }
  .pain-line { font-size: var(--fs-13); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .stat-card { padding: var(--sp-14); }
  .stat-num { font-size: var(--fs-28); }
  .stat-line { font-size: var(--fs-13); }
  .stat-src { font-size: var(--fs-11); }
  .owner-picks { justify-content: center; }
}
.vp-mobile .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.vp-mobile .pain-card { padding: var(--sp-14); gap: var(--sp-6); }
.vp-mobile .pain-head { gap: var(--sp-8); }
.vp-mobile .pain-x { width: var(--sp-20); height: var(--sp-20); }
.vp-mobile .pain-name { font-size: var(--fs-15); }
.vp-mobile .pain-line { font-size: var(--fs-13); }
.vp-mobile .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.vp-mobile .stat-card { padding: var(--sp-14); }
.vp-mobile .stat-num { font-size: var(--fs-28); }
.vp-mobile .stat-line { font-size: var(--fs-13); }
.vp-mobile .stat-src { font-size: var(--fs-11); }


/* ================= mobiel: één ritme =================
   Staat achteraan en overschrijft de losse per-onderdeel-waarden hierboven,
   zodat op een telefoon elke sectie dezelfde maatverdeling gebruikt. */
@media (max-width: 720px) {
  /* Eén goot: alles lijnt links uit op dezelfde lijn. */
  .section > .wrap, .header-inner, .footer-inner, .footer-bottom { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }

  /* Vier afstanden, niet meer: 32 tussen blokken, 20 binnen een blok,
     12 tussen kaarten, 8 tussen regels. */
  .stack-64, .stack-40 { gap: var(--sp-32); }
  .row-40 { gap: var(--sp-32); }
  .stack-24 { gap: var(--sp-20); }
  .stack-16, .row-24 { gap: var(--sp-12); }
  .stack-12 { gap: var(--sp-10); }
  .stack-8 { gap: var(--sp-8); }
  .row-24:has(> .step), .row-24:has(> .price-card) { gap: var(--sp-12); }

  /* Eén padding en één radius voor elk vlak. */
  .one-view, .miss, .miss-calc, .versus-col, .price-card, .card-plan, .agent-card,
  .case-card, .chart-card, .work-panel, .search-col, .pain-card, .stat-card,
  .effects-card, .mosaic .is-a .mtile {
    padding: var(--sp-16);
    border-radius: var(--r-14);
  }
  .one-view .one-view-body > .ov-cell { padding: var(--sp-12); border-radius: var(--r-10); }
  .miss { gap: var(--sp-20); }
  .miss-calc { gap: var(--sp-16); }
  .calc-out { padding: var(--sp-14); border-radius: var(--r-10); }

  /* Twee ondersteunende maten in plaats van vier: 15 voor labels, 14 voor
     bijregels. Onder 14 wordt het op een telefoon niet meer gelezen. */
  .pain-line, .stat-line, .effect-what, .versus .bullet-item,
  .miss-copy > .bullet-list > .bullet-item, .calc-line .body-soft,
  .calc-line .strong, .miss-calc > .stack-12 .body-soft, .assure-row > .assure-item {
    font-size: var(--fs-14);
  }
  .pain-name, .effect-when, .calc-label { font-size: var(--fs-15); }
  .stat-src { font-size: var(--fs-12); }

  /* Rasters van twee blijven twee, met dezelfde tussenruimte als de kaarten. */
  .duo-grid, .stat-grid, .versus, .one-view .one-view-body, .one-view.is-compact .one-view-body {
    gap: var(--sp-12);
  }
}

/* Eén goot: alles lijnt links uit op dezelfde lijn. */
.vp-mobile .section > .wrap, .vp-mobile .header-inner, .vp-mobile .footer-inner, .vp-mobile .footer-bottom { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }

/* Vier afstanden, niet meer: 32 tussen blokken, 20 binnen een blok,
   12 tussen kaarten, 8 tussen regels. */
.vp-mobile .stack-64, .vp-mobile .stack-40 { gap: var(--sp-32); }
.vp-mobile .row-40 { gap: var(--sp-32); }
.vp-mobile .stack-24 { gap: var(--sp-20); }
.vp-mobile .stack-16, .vp-mobile .row-24 { gap: var(--sp-12); }
.vp-mobile .stack-12 { gap: var(--sp-10); }
.vp-mobile .stack-8 { gap: var(--sp-8); }
.vp-mobile .row-24:has(> .step), .vp-mobile .row-24:has(> .price-card) { gap: var(--sp-12); }

/* Eén padding en één radius voor elk vlak. */
.vp-mobile .one-view, .vp-mobile .miss, .vp-mobile .miss-calc, .vp-mobile .versus-col, .vp-mobile .price-card, .vp-mobile .card-plan, .vp-mobile .agent-card,
.vp-mobile .case-card, .vp-mobile .chart-card, .vp-mobile .work-panel, .vp-mobile .search-col, .vp-mobile .pain-card, .vp-mobile .stat-card,
.vp-mobile .effects-card, .vp-mobile .mosaic .is-a .mtile {
  padding: var(--sp-16);
  border-radius: var(--r-14);
}
.vp-mobile .one-view .one-view-body > .ov-cell { padding: var(--sp-12); border-radius: var(--r-10); }
.vp-mobile .miss { gap: var(--sp-20); }
.vp-mobile .miss-calc { gap: var(--sp-16); }
.vp-mobile .calc-out { padding: var(--sp-14); border-radius: var(--r-10); }

/* Twee ondersteunende maten in plaats van vier: 15 voor labels, 14 voor
   bijregels. Onder 14 wordt het op een telefoon niet meer gelezen. */
.vp-mobile .pain-line, .vp-mobile .stat-line, .vp-mobile .effect-what, .vp-mobile .versus .bullet-item,
.vp-mobile .miss-copy > .bullet-list > .bullet-item, .vp-mobile .calc-line .body-soft,
.vp-mobile .calc-line .strong, .vp-mobile .miss-calc > .stack-12 .body-soft, .vp-mobile .assure-row > .assure-item {
  font-size: var(--fs-14);
}
.vp-mobile .pain-name, .vp-mobile .effect-when, .vp-mobile .calc-label { font-size: var(--fs-15); }
.vp-mobile .stat-src { font-size: var(--fs-12); }

/* Rasters van twee blijven twee, met dezelfde tussenruimte als de kaarten. */
.vp-mobile .duo-grid, .vp-mobile .stat-grid, .vp-mobile .versus, .vp-mobile .one-view .one-view-body, .vp-mobile .one-view.is-compact .one-view-body {
  gap: var(--sp-12);
}


/* ================= MOBIEL: eigen ontwerp (≤640px) =================
   Niet een verkleinde desktop. Twee onderdelen blijven naast elkaar waar een
   halve schermbreedte leesbaar is; alleen wat in ~160px zou breken gaat op
   volle breedte. Dit blok staat achteraan en overschrijft alles hierboven. */
@media (max-width: 640px) {
  /* -- goot en sectieritme -- */
  .section > .wrap, .wrap, .header-inner, .footer-inner, .footer-bottom { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }
  .section, .section-open, .section-surface, .section-tight { padding-top: var(--pad-m-section); padding-bottom: var(--pad-m-section); }
  .page { overflow-x: clip; }
  /* De rekensom stond op mobiel uit; hij past nu in één kolom. */
  [data-screen-label="Rekensom"] { display: flex; }

  /* -- typografie: kleinere schaal, zelfde rangorde -- */
  .display-1 { font-size: var(--type-m-1); line-height: 1.1; letter-spacing: var(--ls-snug); }
  .hero-mid .display-1 { font-size: var(--type-m-hero); }
  .display-2 { font-size: var(--type-m-2); line-height: 1.18; letter-spacing: var(--ls-snug); }
  .heading-2 { font-size: var(--type-m-3); line-height: 1.28; }
  .heading-3 { font-size: var(--fs-17); line-height: 1.3; }
  .lead { font-size: var(--fs-17); line-height: 1.5; }
  .body { font-size: var(--fs-16); line-height: 1.5; }
  .body-soft { font-size: var(--fs-15); }
  .eyebrow { font-size: var(--fs-12); }
  .micro, .micro-on-dark { font-size: var(--fs-13); }
  .faq-q { font-size: var(--fs-17); }
  .faq-a { font-size: var(--fs-15); }
  .display-1, .display-2, .heading-2, .heading-3, .faq-q, .pain-name, .stat-line { text-wrap: balance; }
  .lead, .body, .body-soft, .micro, .faq-a, .pain-line { text-wrap: pretty; }
  .heading-2, .heading-3, .pain-name, .plan-row-name, .step-row-name { overflow-wrap: break-word; }

  /* -- twee naast elkaar: het uitgangspunt --
     Kaarten, cijfers, voordelen en losse regels blijven twee kolommen. Een
     oneven laatste kaart neemt de hele regel, zodat er nooit een halve
     wees naast wit staat. */
  .duo-grid, .stat-grid, .versus,
  .row-24:has(> .card-service),
  .row-24:has(> .versus-col),
  .trust-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-12) var(--sp-10);
    align-items: stretch;
    justify-content: initial;
  }
  /* Deze rijen zijn op mobiel geen swipe-carrousel meer maar een raster:
     de horizontale scroll en de uitloop naar de rand gaan eraf. */
  .row-24:has(> .card-service), .row-24:has(> .versus-col) {
    overflow: visible;
    margin-right: var(--sp-0);
    padding-right: var(--sp-0);
    padding-bottom: var(--sp-0);
    scroll-snap-type: none;
  }
  .row-24:has(> .card-service) > .card-service:last-child:nth-child(odd),
  .versus > .versus-col:last-child:nth-child(odd),
  .trust-row > .trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Kaartinhoud op maat van een halve schermbreedte. */
  .card-service { padding: var(--sp-14) 0 0 0; gap: var(--sp-6); }
  .card-service .heading-3 { font-size: var(--fs-15); line-height: 1.25; }
  .card-service .body { font-size: var(--fs-14); line-height: 1.42; }
  .card-service .tag, .card-service .tag-quiet { font-size: var(--fs-12); }
  .card-num { font-size: var(--fs-12); }
  .pain-card, .stat-card { padding: var(--sp-14); gap: var(--sp-6); border-radius: var(--r-14); }
  .pain-name { font-size: var(--fs-15); line-height: 1.25; }
  .pain-line, .stat-line, .trust-item, .versus .bullet-item { font-size: var(--fs-14); line-height: 1.4; }
  .stat-num { font-size: var(--fs-28); line-height: 1.05; }
  .stat-src { font-size: var(--fs-12); }
  .versus-col { padding: var(--sp-14); }
  .versus-head { font-size: var(--fs-15); min-height: var(--sp-40); }
  /* Een brede schermafbeelding schuift binnen zijn kader; zeg dat erbij. */
  .proof-shot-hint { display: block; }

  /* Vier geruststellingen als 2x2 in plaats van vier losse regels. */
  .assure-strip { padding: var(--sp-14) 0; }
  .assure-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-14); }
  .assure-row > .assure-item, .assure-item { font-size: var(--fs-14); white-space: normal; align-items: flex-start; }
  .assure-item .check-mark { margin-top: var(--sp-2); }

  /* -- volle breedte waar een halve kolom de tekst zou breken -- */
  .zig { gap: var(--sp-40); }
  .zig-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-16); }
  .zig-row.is-flip .zig-visual { order: 0; }
  .zig-copy { gap: var(--sp-8); max-width: none; }
  .zig-visual { padding: var(--sp-14); border-radius: var(--r-14); }
  .zig-link { display: inline-flex; align-items: center; min-height: var(--sp-40); font-size: var(--fs-15); }
  .pair-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-20); }
  .pair-copy { gap: var(--sp-12); max-width: none; }
  .calc-card { padding: var(--sp-16); border-radius: var(--r-14); }

  /* -- hero: kop, knoppen, foto, dan de reviews op volle breedte -- */
  .hero-mid { padding-top: var(--sp-40); padding-bottom: var(--sp-24); }
  .hero-duo { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-12); }
  .hero-duo > .mtile { width: 100%; height: auto; }
  .hero-duo .mtile-overlay { white-space: nowrap; }
  /* Reviewkaart: naam naast de foto in plaats van eronder. */
  .rv-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); min-width: var(--sp-0); flex: 1 1 auto; }
  img.rv-avatar { width: var(--sp-36); height: var(--sp-36); }
  .rv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-top { align-items: center; gap: var(--sp-10); }
  .hero-duo .mtile.is-photo { order: -1; }
  .hero-duo .mtile-img { height: auto; aspect-ratio: 16 / 10; }
  .hero-duo .rv-track > .rv { min-height: var(--sp-0); }
  .hero-duo .mtile-tag { font-size: var(--fs-12); padding: var(--sp-14) var(--sp-14) var(--sp-8) var(--sp-14); }
  .hero-duo .rv-dots { padding: var(--sp-0) var(--sp-14) var(--sp-14) var(--sp-14); }
  .mtile-overlay { font-size: var(--fs-14); padding: var(--sp-12) var(--sp-14); }
  /* Hero-knoppen: één kolom, elk op volle breedte. */
  .hero-cta-mid { align-items: stretch; }
  .hero-cta-mid .hero-btns { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: var(--sp-10); }
  .hero-cta-mid .hero-btns > .button-primary, .hero-cta-mid .hero-btns > .button-ghost { width: 100%; min-width: var(--sp-0); justify-content: center; text-align: center; }

  /* -- stappen en plannen: twee kolommen binnen één regel -- */
  .step-rows, .plan-rows { gap: var(--sp-10); }
  .step-row { grid-template-columns: var(--sp-32) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-14); }
  .step-row-num { width: var(--sp-32); height: var(--sp-32); font-size: var(--fs-14); }
  .step-row-name { font-size: var(--fs-16); }
  .plan-row { gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-14); }
  .plan-row-name { font-size: var(--fs-16); }
  .plan-row-line { font-size: var(--fs-14); line-height: 1.4; }
  .plan-row-price { font-size: var(--fs-22); }
  .plan-row-per { font-size: var(--fs-12); }
  .plan-row-flag { font-size: var(--fs-11); }

  /* -- knoppen: naast elkaar als beide labels passen, anders onder elkaar -- */
  .row-12 { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-10); align-items: stretch; }
  .row-12 > .button-primary, .row-12 > .button-ghost { flex: 1 1 auto; min-height: var(--size-tap); justify-content: center; text-align: center; }

  /* -- beeld: verhouding in plaats van vaste hoogte -- */
  .shot-crop, .shot-crop-short { height: auto; aspect-ratio: 4 / 3; }
  .shot { border-radius: var(--r-14); }
  .vis-device, .vis-browser, .vis-phone { max-width: 100%; }
  .mock-name { min-width: var(--sp-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mock-meta { white-space: nowrap; font-size: var(--fs-12); }
  .owner-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .owner-pick { width: 100%; min-height: var(--sp-40); justify-content: center; }

  /* -- footer: twee kolommen links, één rij onderin -- */
  .footer-inner { flex-direction: column; gap: var(--sp-32); padding-top: var(--sp-40); }
  .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-16); }
  .footer-col { gap: var(--sp-6); }
  .footer-link { min-height: var(--sp-36); font-size: var(--fs-15); }
  .footer-bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8); }
}

/* -- goot en sectieritme -- */
.vp-mobile .section > .wrap, .vp-mobile .wrap, .vp-mobile .header-inner, .vp-mobile .footer-inner, .vp-mobile .footer-bottom { padding-left: var(--pad-wrap); padding-right: var(--pad-wrap); }
.vp-mobile .section, .vp-mobile .section-open, .vp-mobile .section-surface, .vp-mobile .section-tight { padding-top: var(--pad-m-section); padding-bottom: var(--pad-m-section); }
.vp-mobile .page { overflow-x: clip; }
/* De rekensom stond op mobiel uit; hij past nu in één kolom. */
.vp-mobile [data-screen-label="Rekensom"] { display: flex; }

/* -- typografie: kleinere schaal, zelfde rangorde -- */
.vp-mobile .display-1 { font-size: var(--type-m-1); line-height: 1.1; letter-spacing: var(--ls-snug); }
.vp-mobile .hero-mid .display-1 { font-size: var(--type-m-hero); }
.vp-mobile .display-2 { font-size: var(--type-m-2); line-height: 1.18; letter-spacing: var(--ls-snug); }
.vp-mobile .heading-2 { font-size: var(--type-m-3); line-height: 1.28; }
.vp-mobile .heading-3 { font-size: var(--fs-17); line-height: 1.3; }
.vp-mobile .lead { font-size: var(--fs-17); line-height: 1.5; }
.vp-mobile .body { font-size: var(--fs-16); line-height: 1.5; }
.vp-mobile .body-soft { font-size: var(--fs-15); }
.vp-mobile .eyebrow { font-size: var(--fs-12); }
.vp-mobile .micro, .vp-mobile .micro-on-dark { font-size: var(--fs-13); }
.vp-mobile .faq-q { font-size: var(--fs-17); }
.vp-mobile .faq-a { font-size: var(--fs-15); }
.vp-mobile .display-1, .vp-mobile .display-2, .vp-mobile .heading-2, .vp-mobile .heading-3, .vp-mobile .faq-q, .vp-mobile .pain-name, .vp-mobile .stat-line { text-wrap: balance; }
.vp-mobile .lead, .vp-mobile .body, .vp-mobile .body-soft, .vp-mobile .micro, .vp-mobile .faq-a, .vp-mobile .pain-line { text-wrap: pretty; }
.vp-mobile .heading-2, .vp-mobile .heading-3, .vp-mobile .pain-name, .vp-mobile .plan-row-name, .vp-mobile .step-row-name { overflow-wrap: break-word; }

/* -- twee naast elkaar: het uitgangspunt --
   Kaarten, cijfers, voordelen en losse regels blijven twee kolommen. Een
   oneven laatste kaart neemt de hele regel, zodat er nooit een halve
   wees naast wit staat. */
.vp-mobile .duo-grid, .vp-mobile .stat-grid, .vp-mobile .versus,
.vp-mobile .row-24:has(> .card-service),
.vp-mobile .row-24:has(> .versus-col),
.vp-mobile .trust-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12) var(--sp-10);
  align-items: stretch;
  justify-content: initial;
}
/* Deze rijen zijn op mobiel geen swipe-carrousel meer maar een raster. */
.vp-mobile .row-24:has(> .card-service), .vp-mobile .row-24:has(> .versus-col) {
  overflow: visible;
  margin-right: var(--sp-0);
  padding-right: var(--sp-0);
  padding-bottom: var(--sp-0);
  scroll-snap-type: none;
}
.vp-mobile .row-24:has(> .card-service) > .card-service:last-child:nth-child(odd),
.vp-mobile .versus > .versus-col:last-child:nth-child(odd),
.vp-mobile .trust-row > .trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Kaartinhoud op maat van een halve schermbreedte. */
.vp-mobile .card-service { padding: var(--sp-14) 0 0 0; gap: var(--sp-6); }
.vp-mobile .card-service .heading-3 { font-size: var(--fs-15); line-height: 1.25; }
.vp-mobile .card-service .body { font-size: var(--fs-14); line-height: 1.42; }
.vp-mobile .card-service .tag, .vp-mobile .card-service .tag-quiet { font-size: var(--fs-12); }
.vp-mobile .card-num { font-size: var(--fs-12); }
.vp-mobile .pain-card, .vp-mobile .stat-card { padding: var(--sp-14); gap: var(--sp-6); border-radius: var(--r-14); }
.vp-mobile .pain-name { font-size: var(--fs-15); line-height: 1.25; }
.vp-mobile .pain-line, .vp-mobile .stat-line, .vp-mobile .trust-item, .vp-mobile .versus .bullet-item { font-size: var(--fs-14); line-height: 1.4; }
.vp-mobile .stat-num { font-size: var(--fs-28); line-height: 1.05; }
.vp-mobile .stat-src { font-size: var(--fs-12); }
.vp-mobile .versus-col { padding: var(--sp-14); }
.vp-mobile .versus-head { font-size: var(--fs-15); min-height: var(--sp-40); }
/* Een brede schermafbeelding schuift binnen zijn kader; zeg dat erbij. */
.vp-mobile .proof-shot-hint { display: block; }

/* Vier geruststellingen als 2x2 in plaats van vier losse regels. */
.vp-mobile .assure-strip { padding: var(--sp-14) 0; }
.vp-mobile .assure-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-14); }
.vp-mobile .assure-row > .assure-item, .vp-mobile .assure-item { font-size: var(--fs-14); white-space: normal; align-items: flex-start; }
.vp-mobile .assure-item .check-mark { margin-top: var(--sp-2); }

/* -- volle breedte waar een halve kolom de tekst zou breken -- */
.vp-mobile .zig { gap: var(--sp-40); }
.vp-mobile .zig-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-16); }
.vp-mobile .zig-row.is-flip .zig-visual { order: 0; }
.vp-mobile .zig-copy { gap: var(--sp-8); max-width: none; }
.vp-mobile .zig-visual { padding: var(--sp-14); border-radius: var(--r-14); }
.vp-mobile .zig-link { display: inline-flex; align-items: center; min-height: var(--sp-40); font-size: var(--fs-15); }
.vp-mobile .pair-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-20); }
.vp-mobile .pair-copy { gap: var(--sp-12); max-width: none; }
.vp-mobile .calc-card { padding: var(--sp-16); border-radius: var(--r-14); }

/* -- hero: kop, knoppen, foto, dan de reviews op volle breedte -- */
.vp-mobile .hero-mid { padding-top: var(--sp-40); padding-bottom: var(--sp-24); }
.vp-mobile .hero-duo { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-12); }
.vp-mobile .hero-duo > .mtile { width: 100%; height: auto; }
.vp-mobile .hero-duo .mtile-overlay { white-space: nowrap; }
/* Reviewkaart: naam naast de foto in plaats van eronder. */
.vp-mobile .rv-head { display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); min-width: var(--sp-0); flex: 1 1 auto; }
.vp-mobile img.rv-avatar { width: var(--sp-36); height: var(--sp-36); }
.vp-mobile .rv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-mobile .rv-top { align-items: center; gap: var(--sp-10); }
.vp-mobile .hero-duo .mtile.is-photo { order: -1; }
.vp-mobile .hero-duo .mtile-img { height: auto; aspect-ratio: 16 / 10; }
.vp-mobile .hero-duo .rv-track > .rv { min-height: var(--sp-0); }
.vp-mobile .hero-duo .mtile-tag { font-size: var(--fs-12); padding: var(--sp-14) var(--sp-14) var(--sp-8) var(--sp-14); }
.vp-mobile .hero-duo .rv-dots { padding: var(--sp-0) var(--sp-14) var(--sp-14) var(--sp-14); }
.vp-mobile .mtile-overlay { font-size: var(--fs-14); padding: var(--sp-12) var(--sp-14); }
/* Hero-knoppen: één kolom, elk op volle breedte. */
.vp-mobile .hero-cta-mid { align-items: stretch; }
.vp-mobile .hero-cta-mid .hero-btns { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: var(--sp-10); }
.vp-mobile .hero-cta-mid .hero-btns > .button-primary, .vp-mobile .hero-cta-mid .hero-btns > .button-ghost { width: 100%; min-width: var(--sp-0); justify-content: center; text-align: center; }

/* -- stappen en plannen: twee kolommen binnen één regel -- */
.vp-mobile .step-rows, .vp-mobile .plan-rows { gap: var(--sp-10); }
.vp-mobile .step-row { grid-template-columns: var(--sp-32) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-14); }
.vp-mobile .step-row-num { width: var(--sp-32); height: var(--sp-32); font-size: var(--fs-14); }
.vp-mobile .step-row-name { font-size: var(--fs-16); }
.vp-mobile .plan-row { gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-14); }
.vp-mobile .plan-row-name { font-size: var(--fs-16); }
.vp-mobile .plan-row-line { font-size: var(--fs-14); line-height: 1.4; }
.vp-mobile .plan-row-price { font-size: var(--fs-22); }
.vp-mobile .plan-row-per { font-size: var(--fs-12); }
.vp-mobile .plan-row-flag { font-size: var(--fs-11); }

/* -- knoppen: naast elkaar als beide labels passen, anders onder elkaar -- */
.vp-mobile .row-12 { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-10); align-items: stretch; }
.vp-mobile .row-12 > .button-primary, .vp-mobile .row-12 > .button-ghost { flex: 1 1 auto; min-height: var(--size-tap); justify-content: center; text-align: center; }

/* -- beeld: verhouding in plaats van vaste hoogte -- */
.vp-mobile .shot-crop, .vp-mobile .shot-crop-short { height: auto; aspect-ratio: 4 / 3; }
.vp-mobile .shot { border-radius: var(--r-14); }
.vp-mobile .vis-device, .vp-mobile .vis-browser, .vp-mobile .vis-phone { max-width: 100%; }
.vp-mobile .mock-name { min-width: var(--sp-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-mobile .mock-meta { white-space: nowrap; font-size: var(--fs-12); }
.vp-mobile .owner-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.vp-mobile .owner-pick { width: 100%; min-height: var(--sp-40); justify-content: center; }

/* -- footer: twee kolommen links, één rij onderin -- */
.vp-mobile .footer-inner { flex-direction: column; gap: var(--sp-32); padding-top: var(--sp-40); }
.vp-mobile .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-16); }
.vp-mobile .footer-col { gap: var(--sp-6); }
.vp-mobile .footer-link { min-height: var(--sp-36); font-size: var(--fs-15); }
.vp-mobile .footer-bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8); }


/* ================= huisstijl: Instrument, bijna vierkante vlakken =================
   Koppen in Instrument Serif, alles daaronder in Instrument Sans. Vlakken
   worden gescheiden door een lijn in plaats van een schaduw; de radius staat
   in :root en loopt niet verder dan 6px. Geldt op elk formaat. */
.display-1, .display-2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.032em; }
.heading-2, .heading-3, .heading-4, .faq-q { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.024em; }
.stat-num, .plan-row-price, .plan-price, .calc-value { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.pain-name, .step-row-name, .plan-row-name, .rv-name, .mtile-overlay, .versus-head { font-weight: 700; letter-spacing: -0.015em; }
.button-primary, .button-ghost { font-weight: 600; letter-spacing: -0.01em; }
.lead { font-weight: var(--fw-regular); }
.pain-name, .step-row-name, .plan-row-name, .rv-name, .mtile-overlay, .card-num, .versus-head, .step-row-num,
.button-primary, .button-ghost, .nav-link, .brand, .footer-heading { font-family: var(--font-display); }

/* Geen zwevende kaarten: één haarlijn doet het werk. */
.card-panel, .panel, .mini-panel, .agent-card, .case-card, .tile, .shot, .shot-card,
.pain-card, .stat-card, .step-row, .plan-row, .calc-card, .zig-visual, .versus-col,
.mtile, .one-view, .vis-browser, .vis-phone, .price-card, .card-plan { box-shadow: none; }
.pain-card, .stat-card, .step-row, .plan-row { background: var(--color-page); border: var(--bw-1) solid var(--color-line-strong); }
.section-surface .pain-card, .section-surface .stat-card, .section-surface .step-row, .section-surface .plan-row { background: var(--color-page); }
.zig-visual { background: var(--color-surface); border: var(--bw-1) solid var(--color-line); }
.zig-visual.is-veil { background: var(--color-accent-veil); border-color: var(--color-accent-line); }
.button-primary, .button-ghost { border-radius: var(--r-10); }


/* ================= labels: geen gespatieerde mono meer =================
   De kleine kopjes stonden in monospace, groen en met wijde letterafstand.
   Ze worden nu Archivo, halfvet en in de gewone inktkleur: het label leest
   als een kopje in plaats van als systeemtekst. */
.eyebrow, .zig-eyebrow, .platform-label, .dash-tile-title, .footer-heading,
.frame-label, .trust-strip-label, .m-plate-cap, .stat-src, .mtile-tag, .card-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.eyebrow, .zig-eyebrow, .platform-label, .trust-strip-label, .frame-label {
  font-size: var(--fs-13);
  color: var(--color-ink-2);
}
.footer-heading { font-size: var(--fs-13); letter-spacing: 0.01em; }
.stat-src, .m-plate-cap { font-size: var(--fs-12); color: var(--color-ink-3); letter-spacing: normal; }
.tag, .tag-quiet { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; text-transform: none; }


/* ================= abonnementen: compacte regels met een knop =================
   Elke regel is nu zelf een link, met een zichtbare knop rechts. Verticaal
   strakker: minder padding, kleinere prijs, minder ruimte tussen de regels. */
.plan-rows { display: grid; grid-template-columns: minmax(0, 1fr) 84px 148px; row-gap: var(--sp-8); column-gap: var(--sp-16); }
.plan-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-14) var(--sp-16);
  border-radius: var(--r-14);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.24s cubic-bezier(0.22, 1, 0.36, 1), background 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-row:hover { border-color: var(--color-accent); background: var(--color-accent-veil); }
.plan-row-head { gap: var(--sp-2); }
.plan-row-name { font-size: var(--fs-17); }
.plan-row-line { font-size: var(--fs-14); line-height: 1.4; }
.plan-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-0); }
.plan-row-price { font-size: var(--fs-24); line-height: 1.1; }
.plan-row-per { font-family: var(--font-display); font-size: var(--fs-12); color: var(--color-ink-3); }
.plan-row-flag {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-12);
  letter-spacing: 0.01em; text-transform: none; color: var(--color-accent-deep);
  padding: var(--sp-2) var(--sp-8); border-radius: var(--r-6); background: var(--color-accent-veil);
}
.plan-row-cta {
  display: flex; width: 100%; align-items: center; justify-content: center;
  min-height: var(--sp-40); padding: var(--sp-0) var(--sp-16);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14);
  border: var(--bw-1) solid var(--color-line-strong); border-radius: var(--r-10);
  background: var(--color-page); color: var(--color-ink); white-space: nowrap;
}
.plan-row.is-featured .plan-row-cta { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
.plan-row:hover .plan-row-cta { border-color: var(--color-accent); }

/* Nog een paar labels die in mono waren blijven staan. */
.rv-when, .rv-status, .plan-row-per, .dash-tile-title, .m-part-name, .calc-label {
  font-family: var(--font-display); letter-spacing: 0.01em; text-transform: none;
}

/* De foto van de eigenaar op Over ons. */
.about-photo { margin: var(--sp-0); display: flex; flex-direction: column; gap: var(--sp-10); }
.about-photo-img { width: 100%; height: 420px; object-fit: cover; object-position: center 25%; border-radius: var(--r-14); display: block; }
.about-photo-cap { font-family: var(--font-display); font-size: var(--fs-13); color: var(--color-ink-3); }

@media (max-width: 640px) {
  /* Op een telefoon: knop onder de regel, over de volle breedte. */
  .plan-rows { grid-template-columns: minmax(0, 1fr); }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-12); }
  .plan-row-cta { grid-column: 1 / -1; width: 100%; margin-top: var(--sp-4); }
  .plan-row-side { align-self: start; }
  .plan-row-price { font-size: var(--fs-22); }
  .about-photo-img { height: 300px; }
}
.vp-mobile .plan-rows { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .plan-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-12); }
.vp-mobile .plan-row-cta { grid-column: 1 / -1; width: 100%; margin-top: var(--sp-4); }
.vp-mobile .plan-row-side { align-self: start; }
.vp-mobile .plan-row-price { font-size: var(--fs-22); }
.vp-mobile .about-photo-img { height: 300px; }


/* Tussen telefoon en breed beeld is de plankolom smal: dan gaat de knop
   onder de regel staan, zodat de uitleg de volle breedte houdt. */
@media (min-width: 641px) and (max-width: 1180px) {
  .plan-rows { grid-template-columns: minmax(0, 1fr) 84px; }
  .plan-row { grid-template-columns: subgrid; }
  .plan-row-cta { grid-column: 1 / -1; margin-top: var(--sp-6); }
  .plan-row-side { align-self: start; }
}


/* ================= hero met bewegend beeld =================
   Het beeld ligt achter de tekst, met een donkere sluier ertussen zodat de
   tekst op elk frame leesbaar blijft. Staat er geen videobestand in ,
   dan blijft de poster staan: dezelfde compositie, stil beeld. */
.hero-mid.is-media {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--sp-72);
  padding-bottom: var(--sp-72);
  background: var(--color-dark);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-video.is-on { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 12, 0.74) 0%, rgba(12, 14, 12, 0.62) 45%, rgba(12, 14, 12, 0.82) 100%);
}
.hero-mid.is-media > .wrap { position: relative; z-index: 1; }
.hero-mid.is-media .display-1,
.hero-mid.is-media .lead,
.hero-mid.is-media .rating-text { color: var(--color-on-dark); }
.hero-mid.is-media .lead { color: rgba(255, 255, 255, 0.88); }
.hero-mid.is-media .hero-mid-note { color: rgba(255, 255, 255, 0.72); }
.hero-mid.is-media .stars { color: var(--color-star); }
.hero-mid.is-media .button-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-on-dark);
}
.hero-mid.is-media .button-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-on-dark); }
.hero-mid.is-media .h-accent { color: var(--color-accent); }
.hero-mid.is-media .rotator.is-accent { color: var(--color-accent); }

/* De branchestrook hoort nu bij de hero: hij staat op hetzelfde beeld. */
.hero-mid.is-media > .trust-strip { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Onder deze voorkeur speelt motion.js niets af; het element blijft staan
     zodat het posterframe zichtbaar is in plaats van een zwart vlak. */
  .hero-video:first-of-type { opacity: 1; }
}

@media (max-width: 640px) {
  .hero-mid.is-media { min-height: 520px; padding-top: var(--sp-48); padding-bottom: var(--sp-48); }
  .hero-scrim { background: linear-gradient(180deg, rgba(12, 14, 12, 0.72) 0%, rgba(12, 14, 12, 0.66) 40%, rgba(12, 14, 12, 0.86) 100%); }
}
.vp-mobile .hero-mid.is-media { min-height: 520px; padding-top: var(--sp-48); padding-bottom: var(--sp-48); }


/* Staat beweging uit, dan het stille beeld dat bij het formaat hoort. */
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .hero-media { background-image: url("hero-hoog-poster.jpg"); }
}

/* ---------- hero: lichte overlay in plaats van een zwarte laag ----------
   De video blijft helder; alleen achter het tekstblok in het midden staat
   extra diepte, zodat witte kop, knoppen en notitie leesbaar blijven. */
.hero-mid.is-media .hero-video { filter: saturate(1.03) brightness(1.09) contrast(0.98); }
.hero-scrim {
  background:
    radial-gradient(88% 62% at 50% 60%, rgba(8, 18, 12, 0.60) 0%, rgba(8, 18, 12, 0.42) 46%, rgba(8, 18, 12, 0.12) 78%, rgba(8, 18, 12, 0) 100%),
    linear-gradient(180deg, rgba(8, 18, 12, 0.22) 0%, rgba(8, 18, 12, 0.04) 40%, rgba(8, 18, 12, 0.26) 100%);
}
.hero-mid.is-media .display-1 { text-shadow: 0 1px 26px rgba(6, 14, 10, 0.38); }
.hero-mid.is-media .lead { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 18px rgba(6, 14, 10, 0.36); }


/* Op een telefoon staat het gezicht hoger in beeld dan het midden. */
@media (max-width: 640px) {
  .hero-mid.is-media .hero-video { object-position: 50% 40%; }
}
.vp-mobile .hero-mid.is-media .hero-video { object-position: 50% 40%; }

/* Het wisselende woord staat altijd op een eigen regel: beide states hebben
   dan hetzelfde aantal regels en het blok eronder blijft stilstaan. */
.hero-mid.is-media [data-hero-woord] {
  display: block;
  position: relative;
  width: 100%;
  height: var(--h-rot);
  overflow: visible;
}
/* Groen op een licht filmframe: een donkere halo houdt het woord leesbaar. */
.hero-mid.is-media .h-accent,
.hero-mid.is-media [data-hero-woord] .rotator-item {
  text-shadow: 0 1px 4px rgba(6, 14, 10, 0.7);
}
/* De woordwissel loopt volledig in CSS: twee gestapelde woorden op één klok
   van 13s, elk 6,5s in beeld. Geen JS die breedte of transform schrijft, dus
   een hertekening van de kop kan de wissel niet meer stilzetten. */
.hero-mid.is-media [data-hero-woord] .rotator-track { display: contents; }
.hero-mid.is-media [data-hero-woord] .rotator-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: auto;
  height: var(--h-rot);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.22em);
  animation: heroWoord 13s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.hero-mid.is-media [data-hero-woord] .rotator-item:nth-child(2) { animation-delay: 6.5s; }
/* De twee woorden kruisen: de fade-out van het ene loopt precies gelijk met
   de fade-in van het andere, dus de kop staat nooit zonder laatste woord. */
@keyframes heroWoord {
  0%, 46% { opacity: 1; transform: translateY(0); }
  50%, 96% { opacity: 0; transform: translateY(-0.22em); }
  97% { opacity: 0; transform: translateY(0.22em); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mid.is-media [data-hero-woord] .rotator-item { animation: none; opacity: 0; transform: none; }
  .hero-mid.is-media [data-hero-woord] .rotator-item:first-child { opacity: 1; }
}

/* ================= hero: één doorlopend beeld onder de navigatie =========
   De balk zweeft boven het beeld en het beeld begint aan de bovenrand van het
   venster, dus geen witte strook boven de video. De branchestrook staat op
   hetzelfde beeld, waardoor kop, knoppen en sectoren één vlak vormen. */
:root { --h-nav: 82px; }

body:has(.hero-mid.is-media) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  /* Een matglazen witte balk, geen witte sluier met witte tekst: de video
     eronder is licht, dus alleen donkere ink haalt genoeg contrast. Logo en
     links blijven daarom donker, precies zoals in de gescrolde toestand. */
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border-bottom: var(--bw-1) solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
body:has(.hero-mid.is-media) .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--color-line);
  box-shadow: 0 var(--sp-2) var(--sp-20) var(--color-shadow-soft);
}

/* Het beeld loopt tot achter de balk; de kop houdt afstand van de balk. */
.hero-mid.is-media {
  /* Het beeld is decor, niet het onderwerp: lager dan een volledig scherm en
     eindigend op de sectorstrook, zodat er geen strook video onder de pillen
     doorloopt. */
  min-height: 78svh;
  padding-top: calc(var(--h-nav) + var(--sp-32));
  padding-bottom: var(--sp-0);
  justify-content: center;
  gap: var(--sp-32);
}
/* De strook hoort onderaan het beeld, niet meegecentreerd met de kop: auto
   marge boven duwt hem tegen de onderrand van de video. */
.hero-mid.is-media > .trust-strip {
  margin-top: auto;
  padding-top: var(--sp-40);
  padding-bottom: var(--sp-20);
}

/* Meer beeld, minder sluier: alleen achter de kop staat extra diepte, en
   onderaan een zachte band waar de sectoren op liggen. */
.hero-scrim {
  background:
    radial-gradient(74% 46% at 50% 40%, rgba(8, 18, 12, 0.62) 0%, rgba(8, 18, 12, 0.44) 52%, rgba(8, 18, 12, 0.14) 100%),
    linear-gradient(180deg, rgba(8, 18, 12, 0.38) 0%, rgba(8, 18, 12, 0.22) 22%, rgba(8, 18, 12, 0.26) 62%, rgba(8, 18, 12, 0.5) 100%);
}
/* Gecentreerd uitsnijden: bij een hoge uitsnede kwamen de koppen achter de
   navigatiebalk terecht. De clips zijn met marge rond de personen gemaakt,
   dus het midden houdt gezichten vrij van boven- en onderrand. */
.hero-mid.is-media .hero-video { object-position: 50% 50%; transform-origin: 50% 50%; will-change: transform; }

/* Sectoren op beeld. Witte ink vraagt een donkere grond, dus de strook krijgt
   zijn eigen verloop en de pillen een donkere vulling: een lichte vulling op
   een licht frame gaf wit-op-wit. */
.trust-strip.is-on-media {
  align-items: center;
  padding-top: var(--sp-40);
  padding-bottom: var(--sp-8);
  background: linear-gradient(180deg, rgba(6, 14, 10, 0) 0%, rgba(6, 14, 10, 0.58) 42%, rgba(6, 14, 10, 0.72) 100%);
}
/* Het label staat bovenaan de strook, waar het verloop nog niet dekt. Het
   krijgt daarom dezelfde donkere grond als de pillen, zodat de leesbaarheid
   niet van de gradient afhangt. */
.trust-strip.is-on-media .trust-strip-label {
  color: var(--color-on-dark);
  text-align: center;
  align-self: center;
  padding: var(--sp-8) var(--sp-18);
  border-radius: var(--r-pill);
  background: rgba(6, 14, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trust-strip.is-on-media .marq-item {
  background: rgba(6, 14, 10, 0.62);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-on-dark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trust-strip.is-on-media .marq-item:hover { border-color: var(--color-accent); color: var(--color-on-dark); }
/* Eén rij sectoren op het beeld. Twee stroken maakten de onderkant druk en
   legden een tweede band over de video. */
.trust-strip.is-on-media .marq.is-back { display: none; }
/* align-items: center hierboven maakt de marquee shrink-to-fit, waardoor hij
   zo breed werd als zijn hele track en zijn fade buiten beeld viel. */
.trust-strip.is-on-media .marq { align-self: stretch; }

@media (max-width: 640px) {
  :root { --h-nav: 66px; }
  .hero-mid.is-media {
    min-height: 72svh;
    padding-top: calc(var(--h-nav) + var(--sp-24));
    padding-bottom: var(--sp-0);
  }
  .hero-mid.is-media .hero-video { object-position: 50% 48%; }
}
.vp-mobile .hero-mid.is-media .hero-video { object-position: 50% 48%; }

/* ---------- mobiel: strakker ritme ----------
   Op een telefoon zijn 90% van de bezoekers. De secties stonden daar op
   desktopritme: 56px lucht boven en onder elke sectie plus ruime stacks, wat
   veel scrollen kost zonder dat er iets bijkomt. Hieronder één strakker
   ritme: kortere secties, kleinere gaten, en een harde maat op alle lopende
   tekst zodat er geen blokken van tien regels ontstaan. */
.vp-mobile {
  --pad-section: var(--sp-40);
  --pad-section-tight: var(--sp-28);
}
.vp-mobile .section-open { padding-top: var(--sp-44); padding-bottom: var(--sp-44); }
.vp-mobile .stack-64 { gap: var(--sp-24); }
.vp-mobile .stack-40 { gap: var(--sp-20); }
.vp-mobile .stack-24 { gap: var(--sp-14); }
.vp-mobile .stack-12 { gap: var(--sp-8); }

/* Lopende tekst krijgt een vaste maat. Zonder deze regel loopt een alinea
   over de volle breedte en leest hij als een lap tekst. */
.vp-mobile .lead, .vp-mobile .body, .vp-mobile .body-soft, .vp-mobile .faq-a, .vp-mobile .miss-copy > .body-soft {
  max-width: 38ch;
}
.vp-mobile .lead { font-size: var(--fs-16); line-height: 1.45; }
.vp-mobile .body-soft { font-size: var(--fs-14); line-height: 1.5; }

/* Sectiekoppen dichter op hun tekst dan op de sectie erboven. */
.vp-mobile .section > .wrap > .stack-12 + *, .vp-mobile .section > .wrap > .stack-24 + * { margin-top: var(--sp-4); }
@media (max-width: 720px) {

/* ---------- mobiel: strakker ritme ----------
   Op een telefoon zijn 90% van de bezoekers. De secties stonden daar op
   desktopritme: 56px lucht boven en onder elke sectie plus ruime stacks, wat
   veel scrollen kost zonder dat er iets bijkomt. Hieronder één strakker
   ritme: kortere secties, kleinere gaten, en een harde maat op alle lopende
   tekst zodat er geen blokken van tien regels ontstaan. */
:root {
  --pad-section: var(--sp-40);
  --pad-section-tight: var(--sp-28);
}
:root .section-open { padding-top: var(--sp-44); padding-bottom: var(--sp-44); }
:root .stack-64 { gap: var(--sp-24); }
:root .stack-40 { gap: var(--sp-20); }
:root .stack-24 { gap: var(--sp-14); }
:root .stack-12 { gap: var(--sp-8); }

/* Lopende tekst krijgt een vaste maat. Zonder deze regel loopt een alinea
   over de volle breedte en leest hij als een lap tekst. */
:root .lead, :root .body, :root .body-soft, :root .faq-a, :root .miss-copy > .body-soft {
  max-width: 38ch;
}
:root .lead { font-size: var(--fs-16); line-height: 1.45; }
:root .body-soft { font-size: var(--fs-14); line-height: 1.5; }

/* Sectiekoppen dichter op hun tekst dan op de sectie erboven. */
:root .section > .wrap > .stack-12 + *, :root .section > .wrap > .stack-24 + * { margin-top: var(--sp-4); }
}

/* ---------- profielvoorbeeld op "Hoe het werkt" ----------
   Twee bedrijfsprofielen naast elkaar: hetzelfde bedrijf, één keer met een
   dood profiel en één keer met een levend profiel. Geen namaak van een
   zoekmachine-paneel; dit is een Rateflow-kaart met dezelfde gegevens die een
   klant als eerste ziet. */
.gprof-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20);
  align-items: stretch;
}
.gprof {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-18);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  background: var(--color-page);
  min-width: 0;
}
.gprof.is-good { border-color: var(--color-accent); box-shadow: 0 2px 18px var(--color-accent-shadow); }
.gprof-top { display: flex; flex-direction: column; gap: var(--sp-4); }
.gprof-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-22); line-height: 1.2; }
.gprof-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); font-size: var(--fs-14); color: var(--color-ink-2); }
.gprof-score { font-weight: 600; color: var(--color-ink); }
.gprof-stars { color: var(--color-star); }
.gprof-star-off { color: var(--color-line-strong); }
.gprof-cat, .gprof-count, .gprof-dot { color: var(--color-ink-3); }
.gprof-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 122px; gap: var(--sp-6); }
.gprof-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--r-6); display: block; }
.gprof-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  border: var(--bw-1) dashed var(--color-line-strong);
  border-radius: var(--r-6);
  font-size: var(--fs-11);
  color: var(--color-ink-3);
  text-align: center;
}
.gprof-photo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  border-radius: var(--r-6);
  background: var(--color-surface);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-ink-2);
}
.gprof-tabs { display: flex; gap: var(--sp-8); padding-bottom: var(--sp-12); border-bottom: var(--bw-1) solid var(--color-line); }
.gprof-tab {
  padding: var(--sp-6) var(--sp-14);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  color: var(--color-ink);
}
.gprof-actions { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-bottom: var(--sp-12); border-bottom: var(--bw-1) solid var(--color-line); }
.gprof-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.gprof-info-row { font-size: var(--fs-13); color: var(--color-ink-2); }
.gprof-open { color: var(--color-accent-deep); font-weight: 600; }
.gprof-chip {
  padding: var(--sp-6) var(--sp-12);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  color: var(--color-ink-2);
  white-space: nowrap;
}
.gprof-chip.is-lead { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-on-dark); font-weight: 600; }
/* Wat de zoeker denkt. Twee identieke kaarten waarop alleen de reviews
   verschillen: de gedachte eronder maakt in één blik zichtbaar wat dat doet. */
.gprof-think {
  margin-top: auto;
  padding: var(--sp-12) var(--sp-14);
  border-radius: var(--r-14);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-2);
}
.gprof.is-good .gprof-think { background: var(--color-accent-wash); color: var(--color-ink); }

@media (max-width: 720px) {
  .gprof-pair { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
  .gprof { padding: var(--sp-14); gap: var(--sp-12); }
  .gprof-name { font-size: var(--fs-20); }
}
.vp-mobile .gprof-pair { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.vp-mobile .gprof { padding: var(--sp-14); gap: var(--sp-12); }
.vp-mobile .gprof-name { font-size: var(--fs-20); }

/* ---------- kort voorbeeld naast een sectie ----------
   Vervangt de kleine dashboardschermen op de binnenpagina's: die waren op
   deze maat onleesbaar en kwamen zichtbaar niet uit dezelfde hand. Dit is een
   tekstvoorbeeld dat wel leesbaar blijft en het punt van de sectie maakt. */
.mini-ex {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-20);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-14);
  background: var(--color-page);
}
.mini-ex-cap {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-ink-3);
}
.mini-ex-line { font-size: var(--fs-15); color: var(--color-ink); }
.mini-ex-good { color: var(--color-accent-deep); font-weight: 600; }
.mini-ex-q {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1.3;
}
.mini-ex-a {
  padding: var(--sp-14);
  border-radius: var(--r-12);
  background: var(--color-accent-wash);
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--color-ink);
}
.mini-ex-note { font-size: var(--fs-13); line-height: 1.45; color: var(--color-ink-3); }
@media (max-width: 720px) {
  .mini-ex { padding: var(--sp-16); }
}
.vp-mobile .mini-ex { padding: var(--sp-16); }

/* ---------- websitepagina ----------
   Herkenningsrij: korte regels die iemand in één blik afloopt, geen bullets
   in een lange kolom. */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-8);
}
.chip-line {
  padding: var(--sp-12) var(--sp-16);
  border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-12);
  background: var(--color-page);
  font-size: var(--fs-15);
  color: var(--color-ink);
}

/* De keten: elk onderdeel voedt het volgende. Loopt door op smalle schermen
   in plaats van te schuiven. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}
.chain-step {
  padding: var(--sp-10) var(--sp-16);
  border: var(--bw-1) solid var(--color-line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.chain-step.is-end {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink, #0d2b12);
}
.chain-pair { display: inline-flex; align-items: center; gap: var(--sp-8); }
.chain-arrow { color: var(--color-ink-3); font-size: var(--fs-15); }

/* Twee kaarten naast elkaar mogen de rij vullen. De globale .card-plan blijft
   op 280px staan; de prijzenrij van drie rekent daarop. */
.row-24.is-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-plan.is-wide { flex: 1 1 auto; width: auto; max-width: none; }
@media (max-width: 720px) {
  .row-24.is-duo { grid-template-columns: minmax(0, 1fr); }
}
.vp-mobile .row-24.is-duo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .chip-grid { grid-template-columns: minmax(0, 1fr); }
  .chain-step { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }
}
.vp-mobile .chip-grid { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .chain-step { font-size: var(--fs-14); padding: var(--sp-8) var(--sp-14); }


/* ---------- prijzen: drie pakketten ----------
   Eigen raster. De globale .card-plan rekent met een vaste basis van 280px en
   liet drie kaarten ongelijk vallen. Groei staat een maat hoger en zwaarder,
   want dat is het pakket waar de meeste zaken op uitkomen. */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); align-items: stretch; }
.plan-grid > .card-plan { flex: none; width: auto; min-width: 0; max-width: none; height: 100%; gap: var(--sp-16); }
.plan-grid > .card-plan.is-featured { border-color: var(--color-accent); border-width: var(--bw-2); background: var(--color-page); }
@media (min-width: 901px) {
  .plan-grid > .card-plan.is-featured { margin-top: calc(var(--sp-20) * -1); padding-top: var(--sp-28); padding-bottom: var(--sp-28); }
}
.plan-head { display: flex; flex-direction: column; gap: var(--sp-8); }
.plan-name-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.plan-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-ink-3); }
.plan-grid > .card-plan.is-featured .plan-name { color: var(--color-accent-deep); }
.plan-claim { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: 1.25; letter-spacing: var(--ls-tight); color: var(--color-ink); text-wrap: pretty; }
.plan-for { font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-3); text-wrap: pretty; max-width: none; }
.plan-amount { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); padding-top: var(--sp-16); border-top: var(--bw-1) solid var(--color-line); }
.plan-grid .plan-price { font-size: var(--fs-40); white-space: nowrap; flex: 0 0 auto; }
.plan-grid .plan-per { min-width: 0; }
.plan-list-label { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-13); color: var(--color-ink-3); }
.plan-grid .bullet-list { gap: var(--sp-10); }
.plan-grid .bullet-item { font-size: var(--fs-14); line-height: 1.5; }
.plan-note { font-size: var(--fs-13); line-height: 1.5; color: var(--color-ink-2); background: var(--color-accent-veil); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-12); padding: var(--sp-12); text-wrap: pretty; }
.plan-cta { margin-top: auto; }
.plan-base { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-20); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-surface); }
.plan-base .assure-row { justify-content: flex-start; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
.vp-tablet .plan-grid, .vp-mobile .plan-grid { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .plan-claim { font-size: var(--fs-18); }


/* ---------- prijzen: pakketten onder elkaar ----------
   Drie kaarten naast elkaar maakten het verschil onleesbaar: je vergeleek
   kolommen in plaats van stappen. Onder elkaar leest het als een ladder,
   waarbij Groei het zwaarste vlak is. */
.plan-stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.plan-slab {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-20) var(--sp-32); padding: var(--sp-24);
  border: var(--bw-1) solid var(--color-line-strong); border-radius: var(--r-20);
  background: var(--color-page);
}
.plan-slab.is-featured { border-color: var(--color-accent); border-width: var(--bw-2); background: var(--color-accent-veil); padding: var(--sp-28); }
.plan-slab-info { display: flex; flex-direction: column; gap: var(--sp-10); }
.plan-badge-row { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-10); }
.plan-slab .plan-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-15); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-ink-3); }
.plan-slab.is-featured .plan-name { color: var(--color-accent-deep); }
.plan-slab-claim { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-22); line-height: 1.2; letter-spacing: var(--ls-tight); color: var(--color-ink); text-wrap: pretty; }
.plan-slab.is-featured .plan-slab-claim { font-size: var(--fs-26); }
.plan-fit { font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; max-width: none; }
.plan-fit .strong { color: var(--color-ink); }
.plan-amount-big { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-8); margin-top: var(--sp-2); }
.plan-amount-big .plan-price { font-size: var(--fs-40); white-space: nowrap; flex: 0 0 auto; }
.plan-slab.is-featured .plan-amount-big .plan-price { font-size: var(--fs-56); }
.plan-slab-value { display: flex; flex-direction: column; gap: var(--sp-14); min-width: 0; }
.plan-slab-value .bullet-list { gap: var(--sp-10); }
.plan-slab-value .bullet-item { font-size: var(--fs-15); line-height: 1.5; }
.plan-free {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-16); border-radius: var(--r-12);
  border: var(--bw-1) solid var(--color-accent); background: var(--color-page);
}
.plan-free-head { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--color-ink); }
.plan-free-line { font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; max-width: none; }
.plan-slab-foot {
  grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: var(--sp-10) var(--sp-16);
  padding-top: var(--sp-18); border-top: var(--bw-1) solid var(--color-line);
}
.plan-slab-foot .micro { max-width: 46ch; }
@media (max-width: 860px) {
  .plan-slab, .plan-slab.is-featured { grid-template-columns: minmax(0, 1fr); padding: var(--sp-18); gap: var(--sp-16); }
  .plan-slab-claim, .plan-slab.is-featured .plan-slab-claim { font-size: var(--fs-20); }
  .plan-slab.is-featured .plan-amount-big .plan-price { font-size: var(--fs-40); }
  .plan-slab-foot { flex-direction: column; align-items: stretch; padding-top: var(--sp-14); }
  .plan-slab-foot > .button-primary, .plan-slab-foot > .button-ghost { width: 100%; }
}
.vp-tablet .plan-slab, .vp-tablet .plan-slab.is-featured,
.vp-mobile .plan-slab, .vp-mobile .plan-slab.is-featured { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .plan-slab, .vp-mobile .plan-slab.is-featured { padding: var(--sp-18); }
.vp-mobile .plan-slab-claim, .vp-mobile .plan-slab.is-featured .plan-slab-claim { font-size: var(--fs-20); }
.vp-mobile .plan-slab.is-featured .plan-amount-big .plan-price { font-size: var(--fs-40); }
.vp-mobile .plan-slab-foot { flex-direction: column; align-items: stretch; }
.vp-mobile .plan-slab-foot > .button-primary, .vp-mobile .plan-slab-foot > .button-ghost { width: 100%; }


/* Eén rustige regel onder de ladder voor wat er verder in zit. */
.zig-aside { font-size: var(--fs-15); line-height: 1.6; color: var(--color-ink-2); max-width: 62ch; text-wrap: pretty; }
.zig-aside a { color: var(--color-ink); border-bottom: var(--bw-1) solid var(--color-line-strong); }
.zig-aside a:hover { border-bottom-color: var(--color-accent); }
.vp-mobile .zig-aside { font-size: var(--fs-14); }


/* Verwijzing naar de andere branches: één regel, geen kaartgrid. */
.branch-aside { font-size: var(--fs-15); line-height: 1.6; color: var(--color-ink-2); max-width: 70ch; text-wrap: pretty; }
.branch-aside a { color: var(--color-ink); border-bottom: var(--bw-1) solid var(--color-line-strong); }
.branch-aside a:hover { border-bottom-color: var(--color-accent); }
.vp-mobile .branch-aside { font-size: var(--fs-14); }


/* ---------- home: wat je misloopt ----------
   Was een grid van vier kaarten met op alle vier hetzelfde kruis-icoon.
   Nu een lijst op haarlijnen: de tekst doet het werk, niets eromheen. */
.miss-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-0) var(--sp-48); margin: var(--sp-0); }
.miss-item { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-20) var(--sp-0); border-top: var(--bw-1) solid var(--color-line); }
.miss-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-17); color: var(--color-ink); }
.miss-line { margin: var(--sp-0); font-size: var(--fs-15); line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }

/* ---------- home: cijfers uit onderzoek ----------
   Vier getallen naast elkaar op een haarlijn. Geen kaart, geen icoon:
   het getal is de inhoud, de rest was decoratie. */
.fig-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-32); }
.fig { display: flex; flex-direction: column; gap: var(--sp-6); padding-top: var(--sp-20); border-top: var(--bw-2) solid var(--color-ink); }
.fig-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-40); line-height: 1; letter-spacing: var(--ls-tight); color: var(--color-ink); }
.fig-line { font-size: var(--fs-15); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.fig-src { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }

@media (max-width: 860px) {
  .miss-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-0); }
  .miss-item { padding: var(--sp-16) var(--sp-0); }
  .fig-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); }
  .fig-num { font-size: var(--fs-30); }
  .fig-line { font-size: var(--fs-14); }
}
.vp-tablet .fig-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-mobile .miss-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-0); }
.vp-mobile .miss-item { padding: var(--sp-16) var(--sp-0); }
.vp-mobile .fig-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); }
.vp-mobile .fig-num { font-size: var(--fs-30); }
.vp-mobile .fig-line { font-size: var(--fs-14); }


/* Zoekopdrachten per branche, overgenomen van de losse branchepagina's. */
.sel-queries { display: flex; flex-direction: column; gap: var(--sp-10); margin-top: var(--sp-4); }
.sel-queries-label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.vp-mobile .sel-queries .chip { font-size: var(--fs-13); }


/* ---------- mobiel: laatste correcties ----------
   Op de homepage zweeft de balk over de hero (--h-nav: 82px). De mobiele
   regel zette de ruimte boven de kop op 48px, dus viel de eerste regel
   achter de balk. De ruimte rekent nu met de balk mee, net als op desktop. */
@media (max-width: 640px) {
  .hero-mid.is-media { padding-top: calc(var(--h-nav) + var(--sp-20)); }
}
.vp-mobile .hero-mid.is-media { padding-top: calc(var(--h-nav) + var(--sp-20)); }

/* Vier cijfers onder elkaar: op kolommen van 165px brak de bronregel af. */
@media (max-width: 860px) {
  .fig-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .fig { padding-top: var(--sp-14); }
  .fig-num { font-size: var(--fs-30); }
}
.vp-mobile .fig-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.vp-mobile .fig { padding-top: var(--sp-14); }
.vp-mobile .fig-src { white-space: normal; }


/* ---------- Voor wie op mobiel ----------
   De kaartrijen swipen bewust horizontaal, maar vier korte zoekopdrachten
   wil je in één oogopslag zien: die wrappen. */
@media (max-width: 640px) {
  .sel-queries .filter-row { flex-wrap: wrap; overflow-x: visible; margin-right: var(--sp-0); padding-right: var(--sp-0); scroll-snap-type: none; }
  /* Tekst en agent-label naast elkaar liet de tekst over twee regels
     afbreken met het label ernaast. Onder elkaar leest het als één regel. */
  .sel-feature-list .line-item { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
}
.vp-mobile .sel-queries .filter-row { flex-wrap: wrap; overflow-x: visible; margin-right: var(--sp-0); padding-right: var(--sp-0); scroll-snap-type: none; }
.vp-mobile .sel-feature-list .line-item { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }


/* De vergelijking naast elkaar geeft op een telefoon twee kolommen van 165px
   waarin elke regel afbreekt. Onder elkaar blijft het leesbaar en houdt het
   contrast tussen de twee blokken zijn werking. */
@media (max-width: 640px) {
  .versus { display: flex; flex-direction: column; gap: var(--sp-12); }
  .versus-col { width: 100%; }
}
.vp-mobile .versus { display: flex; flex-direction: column; gap: var(--sp-12); }
.vp-mobile .versus-col { width: 100%; }


/* Knoppen die bij een voorbeeldpaneel horen: ze tonen wat de agent voorstelt,
   ze zijn geen actie voor de bezoeker. */
.button-primary.is-static, .button-ghost.is-static { cursor: default; pointer-events: none; }


/* ---------- over ons: de twee gezichten ----------
   Stonden in een kaart met een foto op vaste tegelhoogte, waardoor de
   portretten klein en afgesneden waren. Nu op volle kolombreedte,
   vierkant zoals het bronbeeld, tekst eronder. */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40); }
.person { display: flex; flex-direction: column; gap: var(--sp-16); margin: var(--sp-0); }
.person-photo {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; object-position: 50% 30%;
  border-radius: var(--r-20); background: var(--color-surface);
}
.person-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.person-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-20); color: var(--color-ink); }
.person-role { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }
.person-line { margin-top: var(--sp-6); font-size: var(--fs-15); line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }

@media (max-width: 720px) {
  .people { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .person-name { font-size: var(--fs-18); }
}
.vp-mobile .people { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.vp-mobile .person-name { font-size: var(--fs-18); }


/* ---------- voor wie: branches naast elkaar ----------
   Verving een tabbalk met zes knoppen en zes verborgen panelen. Alles staat
   nu tegelijk op de pagina: je scant het en vindt jezelf, zonder te klikken. */
.branche-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40); }
.branche { display: flex; flex-direction: column; gap: var(--sp-12); }
.branche-foto {
  display: block; width: 100%; aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; object-position: 50% 45%;
  border-radius: var(--r-16); background: var(--color-surface);
}
.branche-naam { margin: var(--sp-4) var(--sp-0) var(--sp-0); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-20); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.branche-tekst { margin: var(--sp-0); font-size: var(--fs-15); line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }
.branche-chips { flex-wrap: wrap; overflow-x: visible; margin-right: var(--sp-0); padding-right: var(--sp-0); scroll-snap-type: none; padding-top: var(--sp-2); }

@media (max-width: 900px) { .branche-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); } }
@media (max-width: 680px) {
  .branche-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .branche-foto { aspect-ratio: 16 / 10; }
  .branche-naam { font-size: var(--fs-18); }
}
.vp-tablet .branche-grid { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .branche-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.vp-mobile .branche-foto { aspect-ratio: 16 / 10; }
.vp-mobile .branche-naam { font-size: var(--fs-18); }
/* De chiprij swipet elders horizontaal; hier wil je ze allemaal zien. */
.vp-mobile .branche-chips, .vp-tablet .branche-chips { flex-wrap: wrap; overflow-x: visible; margin-right: var(--sp-0); padding-right: var(--sp-0); }
.vp-mobile .branche-chips .chip { font-size: var(--fs-13); }

@media (max-width: 680px) {
  .branche-grid .branche-chips { flex-wrap: wrap; overflow-x: visible; margin-right: var(--sp-0); padding-right: var(--sp-0); }
}


/* De regels onder een sectie (.branch-aside, .zig-aside) zijn lopende tekst
   met een paar links erin. De algemene linkkleur is .page p a (0,1,2) en wint
   van een enkele klasse, waardoor die links groen op wit uitkwamen: 3,6:1 en
   dus onder de leesbaarheidsgrens voor tekst van 15px. Met .page ervoor wint
   deze regel wel: inkt met een accentstreep eronder. */
.page .branch-aside a, .page .zig-aside a {
  color: var(--color-ink);
  border-bottom: var(--bw-1) solid var(--color-line-strong);
}
.page .branch-aside a:hover, .page .zig-aside a:hover { border-bottom-color: var(--color-accent); }


/* De naamregel in de reviewkaart brak op een telefoon middenin af, met de
   sterren er los naast. De sterren wijken nu naar de volgende regel. */
.review-head { flex-wrap: wrap; }
.review-head > .strong { min-width: 0; }


/* Een rij van drie of meer kaarten swipet op mobiel horizontaal, anders wordt
   het een muur van scrollen. Maar een rij van twee is meestal tekst naast één
   paneel: die hoort gewoon onder elkaar, op volle breedte. */
@media (max-width: 640px) {
  .row-24:not(:has(> :nth-child(3))) {
    flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none;
    margin-right: var(--sp-0); padding-right: var(--sp-0);
  }
  .row-24:not(:has(> :nth-child(3))) > * { flex: 1 1 100%; scroll-snap-align: none; }
}
.vp-mobile .row-24:not(:has(> :nth-child(3))) {
  flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none;
  margin-right: var(--sp-0); padding-right: var(--sp-0);
}
.vp-mobile .row-24:not(:has(> :nth-child(3))) > * { flex: 1 1 100%; scroll-snap-align: none; }


/* ---------- mobiel: aanraakvlakken en labels ----------
   Een vinger is geen muis: alles waar je op tikt krijgt minstens 44px hoogte.
   Bij de bolletjes van de klantenkaart blijft de stip klein, maar het vlak
   eromheen wordt aanraakbaar. */
@media (max-width: 640px) {
  .footer-link { min-height: var(--sp-44); }
  .zig-link { min-height: var(--sp-44); }
  .loy-tab { min-height: var(--sp-44); display: inline-flex; align-items: center; }
  .loy-dots { gap: var(--sp-0); }
  .loy-dot {
    height: var(--sp-44); width: var(--sp-28);
    background: none; border-radius: var(--sp-0);
    display: grid; place-items: center;
  }
  .loy-dot::before {
    content: ''; display: block;
    width: var(--sp-6); height: var(--sp-6);
    border-radius: var(--r-pill); background: var(--color-line-strong);
    transition: background 0.3s ease, width 0.3s ease;
  }
  .loy-dot.is-on { width: var(--sp-36); background: none; }
  .loy-dot.is-on::before { width: var(--sp-18); background: var(--color-accent); }

  /* Bronvermelding en functietitels zijn echte inhoud, geen decoratie:
     op een telefoon niet kleiner dan 12px. */
  .fig-src, .person-role, .flow-step-num { font-size: var(--fs-12); }
}
.vp-mobile .footer-link { min-height: var(--sp-44); }
.vp-mobile .zig-link { min-height: var(--sp-44); }
.vp-mobile .loy-tab { min-height: var(--sp-44); display: inline-flex; align-items: center; }
.vp-mobile .loy-dots { gap: var(--sp-0); }
.vp-mobile .loy-dot {
  height: var(--sp-44); width: var(--sp-28);
  background: none; border-radius: var(--sp-0);
  display: grid; place-items: center;
}
.vp-mobile .loy-dot::before {
  content: ''; display: block;
  width: var(--sp-6); height: var(--sp-6);
  border-radius: var(--r-pill); background: var(--color-line-strong);
}
.vp-mobile .loy-dot.is-on { width: var(--sp-36); background: none; }
.vp-mobile .loy-dot.is-on::before { width: var(--sp-18); background: var(--color-accent); }
.vp-mobile .fig-src, .vp-mobile .person-role, .vp-mobile .flow-step-num { font-size: var(--fs-12); }


/* ---------- pakketten: één kolom, van boven naar beneden ----------
   Drie vlakken onder elkaar in een smalle kolom. Per vlak: naam en belofte
   links, prijs rechts op dezelfde hoogte, drie tot vijf korte regels, één knop.
   Groei is het donkerste vlak en het enige met een label. */
.tier-intro { max-width: 760px; margin: 0 auto; text-align: center; align-items: center; }
.tier-intro .eyebrow { justify-content: center; }
.tier-list { display: flex; flex-direction: column; gap: var(--sp-16); width: 100%; max-width: 760px; margin: 0 auto; }
.tier {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-20);
  padding: var(--sp-28); border: var(--bw-1) solid var(--color-line);
  border-radius: var(--r-20); background: var(--color-page);
}
.tier.is-featured { border: var(--bw-2) solid var(--color-accent); padding: var(--sp-32) var(--sp-28) var(--sp-28); box-shadow: 0 var(--sp-12) var(--sp-40) var(--color-shadow-soft); }
.tier-flag {
  position: absolute; top: calc(var(--sp-12) * -1); left: var(--sp-28);
  padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill);
  background: var(--color-accent-deep); color: var(--color-page);
  font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-13);
}
.tier-top { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--sp-20); }
.tier-id { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tier-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-26); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.tier-claim { margin: 0; font-size: var(--fs-16); line-height: 1.45; color: var(--color-ink-2); text-wrap: pretty; max-width: 34ch; }
.tier-amount { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.tier-price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-40); line-height: 1; letter-spacing: var(--ls-tight); color: var(--color-ink); }
.tier.is-featured .tier-price { font-size: var(--fs-56); color: var(--color-accent-deep); }
.tier-per { margin-top: var(--sp-6); font-size: var(--fs-13); color: var(--color-ink-3); }
.tier-free {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-14) var(--sp-16); border-radius: var(--r-12);
  background: var(--color-accent-veil);
}
.tier-free-head { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--color-ink); }
.tier-free-line { font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.tier-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-24); }
.tier-points li { display: flex; flex-direction: row; gap: var(--sp-10); font-size: var(--fs-15); line-height: 1.45; color: var(--color-ink); }
.tier-points strong { font-weight: var(--fw-semi); }
.tier-foot { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16); padding-top: var(--sp-20); border-top: var(--bw-1) solid var(--color-line); }
.tier-note { font-size: var(--fs-13); line-height: 1.5; color: var(--color-ink-3); }
.tier-assure { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-8) var(--sp-24); max-width: 760px; margin: 0 auto; }
.tier-assure > span { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--color-ink); }
.tier-vat { text-align: center; margin: 0 auto; }

@media (max-width: 640px) {
  .tier-intro { text-align: left; align-items: flex-start; }
  .tier-intro .eyebrow { justify-content: flex-start; }
  .tier, .tier.is-featured { padding: var(--sp-20); gap: var(--sp-16); }
  .tier.is-featured { padding-top: var(--sp-28); }
  .tier-flag { left: var(--sp-20); }
  .tier-name { font-size: var(--fs-22); }
  .tier-claim { font-size: var(--fs-15); }
  .tier-price { font-size: var(--fs-30); }
  .tier.is-featured .tier-price { font-size: var(--fs-40); }
  .tier-points { grid-template-columns: minmax(0, 1fr); }
  .tier-foot { flex-direction: column; align-items: stretch; padding-top: var(--sp-16); }
  .tier-foot > a { width: 100%; justify-content: center; text-align: center; }
  .tier-assure { flex-direction: column; align-items: flex-start; }
}
.vp-mobile .tier-intro { text-align: left; align-items: flex-start; }
.vp-mobile .tier, .vp-mobile .tier.is-featured { padding: var(--sp-20); gap: var(--sp-16); }
.vp-mobile .tier.is-featured { padding-top: var(--sp-28); }
.vp-mobile .tier-flag { left: var(--sp-20); }
.vp-mobile .tier-name { font-size: var(--fs-22); }
.vp-mobile .tier-price { font-size: var(--fs-30); }
.vp-mobile .tier.is-featured .tier-price { font-size: var(--fs-40); }
.vp-mobile .tier-points { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .tier-foot { flex-direction: column; align-items: stretch; }
.vp-mobile .tier-foot > a { width: 100%; justify-content: center; text-align: center; }
.vp-mobile .tier-assure { flex-direction: column; align-items: flex-start; }


/* =====================================================================
   RUSTIG THEMA · pagina's als één doorlopend verhaal
   Grote secties, tekst naast één beeld, dunne lijnen in plaats van kaarten.
   ===================================================================== */
.rf-hero { padding: var(--sp-96) var(--sp-0) var(--sp-80); border-bottom: var(--bw-1) solid var(--color-line); }
.rf-hero.is-compact { padding: var(--sp-80) var(--sp-0) var(--sp-48); border-bottom: none; }
.rf-hero-inner { display: flex; flex-direction: column; gap: var(--sp-24); }
.rf-hero-inner > * { max-width: 880px; }
.rf-hero-inner .lead { max-width: 640px; }
.rf-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-8); }
.rf-actions.is-center { justify-content: center; }

.rf-sec { padding: var(--sp-120) var(--sp-0); }
.rf-sec.is-tint { background: var(--color-surface); }
.rf-sec.is-flush { padding-top: var(--sp-0); }
.rf-stack { display: flex; flex-direction: column; gap: var(--sp-48); }
.rf-head { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 720px; }

.rf-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-80); align-items: center; }
.rf-split.is-flip > .rf-copy { order: 2; }
.rf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-80); }
.rf-copy { display: flex; flex-direction: column; gap: var(--sp-20); min-width: 0; max-width: 540px; }
.rf-media { min-width: 0; }
.rf-step { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent-deep); }
.rf-text { margin: var(--sp-0); font-size: var(--type-body); line-height: 1.65; color: var(--color-ink-2); text-wrap: pretty; }
.page .rf-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--sp-44); font-weight: var(--fw-semi); color: var(--color-ink); border-bottom: var(--bw-2) solid var(--color-accent); }
.page .rf-link:hover { color: var(--color-accent-deep); }
.tier-more { align-self: center; }

.rf-shot { display: block; width: 100%; height: auto; }
.rf-shot.is-framed { border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }

.rf-points { list-style: none; margin: var(--sp-0); padding: var(--sp-0); display: flex; flex-direction: column; }
.rf-points li { display: flex; flex-direction: row; gap: var(--sp-12); padding: var(--sp-12) var(--sp-0); border-top: var(--bw-1) solid var(--color-line); font-size: var(--type-body); line-height: 1.5; color: var(--color-ink); }
.rf-points li:last-child { border-bottom: var(--bw-1) solid var(--color-line); }

/* Stappenketting: van website live naar meer klanten. */
.rf-chain { list-style: none; margin: var(--sp-0); padding: var(--sp-0); display: flex; flex-direction: column; align-items: flex-start; max-width: 440px; }
.rf-chain-step { position: relative; padding: var(--sp-14) var(--sp-20); border: var(--bw-1) solid var(--color-line-strong); border-radius: var(--r-20); background: var(--color-page); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-18); color: var(--color-ink); }
.rf-chain-step + .rf-chain-step { margin-top: var(--sp-28); }
.rf-chain-step + .rf-chain-step::before { content: ''; position: absolute; left: var(--sp-28); top: calc(var(--sp-28) * -1 - var(--bw-1)); width: var(--bw-1); height: var(--sp-28); background: var(--color-line-strong); }
.rf-chain-step.is-end { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-page); }
.rf-chain.is-muted .rf-chain-step { color: var(--color-ink-2); }
.rf-chain.is-muted .rf-chain-step.is-end { background: var(--color-surface-2); border-color: var(--color-line-strong); color: var(--color-ink-2); }

.rf-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); align-items: start; }
.rf-compare-col { display: flex; flex-direction: column; gap: var(--sp-24); padding: var(--sp-32); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.rf-compare-col.is-rf { border: var(--bw-2) solid var(--color-accent-deep); }
.rf-compare-label { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-3); }

.rf-grid-list { list-style: none; margin: var(--sp-0); padding: var(--sp-0); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-64); }
.rf-grid-list li { display: flex; flex-direction: row; gap: var(--sp-12); padding: var(--sp-16) var(--sp-0); border-top: var(--bw-1) solid var(--color-line-strong); font-size: var(--fs-18); color: var(--color-ink); }

.rf-all { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); text-align: center; }
.rf-all-words { margin: var(--sp-0); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-24); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-display-2); line-height: 1.15; letter-spacing: var(--ls-tight); color: var(--color-ink); max-width: 960px; }
.rf-statement { display: flex; flex-direction: column; gap: var(--sp-20); max-width: 860px; }

.rf-biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-48); }
.rf-biz-col { display: flex; flex-direction: column; gap: var(--sp-8); padding-top: var(--sp-20); border-top: var(--bw-2) solid var(--color-ink); }
.rf-biz-title { margin: var(--sp-0) var(--sp-0) var(--sp-8); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-22); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.rf-biz-list { list-style: none; margin: var(--sp-0); padding: var(--sp-0); }
.rf-biz-list li { padding: var(--sp-12) var(--sp-0); border-bottom: var(--bw-1) solid var(--color-line); font-size: var(--fs-18); color: var(--color-ink); }

.rf-costs { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.rf-costs-list { list-style: none; margin: var(--sp-0); padding: var(--sp-0); }
.rf-costs-list li { padding: var(--sp-12) var(--sp-0); border-bottom: var(--bw-1) solid var(--color-line); font-size: var(--fs-16); color: var(--color-ink-2); text-decoration: line-through; text-decoration-color: var(--color-line-strong); }
.rf-costs-total { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--sp-12); padding-top: var(--sp-4); }
.rf-costs-total span { font-size: var(--fs-15); color: var(--color-ink-2); }
.rf-costs-total strong { font-family: var(--font-display); font-size: var(--fs-22); color: var(--color-accent-deep); }

.rf-cta { padding: var(--sp-120) var(--sp-0); background: var(--color-dark); }
.rf-cta-inner { display: flex; flex-direction: column; gap: var(--sp-20); max-width: 780px; }
.rf-cta .display-2 { color: var(--color-on-dark); }
.rf-cta .lead { color: var(--color-on-dark-soft); }

.tier-fit { margin: var(--sp-0); font-size: var(--fs-15); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.tier-fit strong { color: var(--color-ink); font-weight: var(--fw-semi); }

@media (max-width: 900px) {
  .rf-split, .rf-two { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  .rf-split.is-flip > .rf-copy { order: 0; }
  .rf-compare { grid-template-columns: minmax(0, 1fr); }
  .rf-biz { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
}
@media (max-width: 640px) {
  .rf-hero { padding: var(--sp-56) var(--sp-0) var(--sp-48); }
  .rf-hero.is-compact { padding: var(--sp-48) var(--sp-0) var(--sp-32); }
  .rf-sec { padding: var(--sp-64) var(--sp-0); }
  .rf-sec.is-flush { padding-top: var(--sp-0); }
  .rf-cta { padding: var(--sp-64) var(--sp-0); }
  .rf-actions { flex-direction: column; align-items: stretch; }
  .rf-actions > a { width: 100%; justify-content: center; text-align: center; }
  .rf-split, .rf-two { gap: var(--sp-32); }
  .rf-copy { gap: var(--sp-16); }
  .rf-grid-list { grid-template-columns: minmax(0, 1fr); }
  .rf-grid-list li, .rf-biz-list li { font-size: var(--fs-16); }
  .rf-compare-col, .rf-costs { padding: var(--sp-20); }
  .rf-chain-step { font-size: var(--fs-16); padding: var(--sp-12) var(--sp-16); }
  .rf-chain-step + .rf-chain-step { margin-top: var(--sp-20); }
  .rf-chain-step + .rf-chain-step::before { top: calc(var(--sp-20) * -1 - var(--bw-1)); height: var(--sp-20); left: var(--sp-24); }
  .rf-all { align-items: flex-start; text-align: left; }
  .rf-all-words { justify-content: flex-start; flex-direction: column; font-size: var(--type-heading-2); }
}
.vp-mobile .rf-split, .vp-mobile .rf-two, .vp-tablet .rf-split, .vp-tablet .rf-two { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.vp-mobile .rf-split.is-flip > .rf-copy, .vp-tablet .rf-split.is-flip > .rf-copy { order: 0; }
.vp-mobile .rf-compare, .vp-mobile .rf-biz, .vp-mobile .rf-grid-list { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .rf-sec { padding: var(--sp-64) var(--sp-0); }
.vp-mobile .rf-sec.is-flush { padding-top: var(--sp-0); }
.vp-mobile .rf-hero { padding: var(--sp-56) var(--sp-0) var(--sp-48); }
.vp-mobile .rf-cta { padding: var(--sp-64) var(--sp-0); }
.vp-mobile .rf-actions { flex-direction: column; align-items: stretch; }
.vp-mobile .rf-all { align-items: flex-start; text-align: left; }
.vp-mobile .rf-all-words { justify-content: flex-start; flex-direction: column; font-size: var(--type-heading-2); }

.tier-id { flex: 1 1 auto; }
.tier-per { white-space: nowrap; }
.tier-claim { max-width: 44ch; }
/* Op de prijzenpagina lijnt de ladder uit met de kop erboven. */
.rf-stack > .tier-list, .rf-stack > .tier-assure, .rf-stack > .tier-vat { margin-left: var(--sp-0); max-width: 880px; }
.rf-stack > .tier-assure { justify-content: flex-start; }
.rf-stack > .tier-vat { text-align: left; }

/* Pakketregels altijd in één kolom: twee smalle kolommen braken elke regel af. */
.tier-points { grid-template-columns: minmax(0, 1fr); }
.tier-flag { white-space: nowrap; }
.tier-note { max-width: 44ch; }

/* .page li zet marge en padding op nul (0,1,1) en won van de enkele klasse.
   Met .page ervoor krijgen deze lijsten hun eigen maat terug. */
.page .rf-chain-step { padding: var(--sp-14) var(--sp-20); display: block; }
.page .rf-chain-step + .rf-chain-step { margin-top: var(--sp-28); }
.page .rf-points li { padding: var(--sp-12) var(--sp-0); }
.page .rf-grid-list li { padding: var(--sp-16) var(--sp-0); }
.page .rf-biz-list li, .page .rf-costs-list li { padding: var(--sp-12) var(--sp-0); }
.page .rf-biz-title { margin: var(--sp-0) var(--sp-0) var(--sp-8); }
.rf-step { white-space: nowrap; }
.rf-all-words > span { display: inline-block; white-space: nowrap; }
@media (max-width: 640px) {
  .page .rf-chain-step { padding: var(--sp-12) var(--sp-16); }
  .page .rf-chain-step + .rf-chain-step { margin-top: var(--sp-20); }
  .rf-step { white-space: normal; }
  .rf-all-words > span { white-space: normal; }
}

@media (min-width: 641px) { .page .rf-chain-step { white-space: nowrap; } }


/* Knoppen in de pakketten: lange tekst mag op een smal scherm naar twee
   regels in plaats van aan de rand afgesneden te worden. */
@media (max-width: 640px) {
  .tier-foot > .button-primary, .tier-foot > .button-ghost,
  .rf-actions > .button-primary, .rf-actions > .button-ghost {
    white-space: normal; height: auto; min-height: var(--sp-48);
    padding-top: var(--sp-12); padding-bottom: var(--sp-12);
    line-height: 1.3; text-align: center; overflow: visible;
  }
  /* Labels in de voorbeeldschermen: op een telefoon minimaal 12px. */
  .vis-url, .mock-meta, .push-logo, .push-app, .push-when, .pass-meta-key { font-size: var(--fs-12); }
}
.vp-mobile .tier-foot > .button-primary, .vp-mobile .tier-foot > .button-ghost,
.vp-mobile .rf-actions > .button-primary, .vp-mobile .rf-actions > .button-ghost {
  white-space: normal; height: auto; min-height: var(--sp-48);
  padding-top: var(--sp-12); padding-bottom: var(--sp-12);
  line-height: 1.3; text-align: center; overflow: visible;
}
.vp-mobile .vis-url, .vp-mobile .mock-meta, .vp-mobile .push-logo, .vp-mobile .push-app, .vp-mobile .push-when, .vp-mobile .pass-meta-key { font-size: var(--fs-12); }

@media (max-width: 640px) { .zig-visual .mock-meta { font-size: var(--fs-12); } }
.vp-mobile .zig-visual .mock-meta { font-size: var(--fs-12); }


/* ---------- juridische pagina's: rustig leesbare tekst ---------- */
.legal { display: flex; flex-direction: column; max-width: 760px; }
.legal-block { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-28) var(--sp-0); border-top: var(--bw-1) solid var(--color-line); }
.legal-block:first-child { border-top: none; padding-top: var(--sp-0); }
.page .legal-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-20); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.page .legal-p { font-size: var(--fs-16); line-height: 1.7; color: var(--color-ink-2); text-wrap: pretty; max-width: 68ch; }
@media (max-width: 640px) {
  .legal-block { padding: var(--sp-20) var(--sp-0); }
  .page .legal-h { font-size: var(--fs-18); }
  .page .legal-p { font-size: var(--fs-15); }
}
.vp-mobile .legal-block { padding: var(--sp-20) var(--sp-0); }
.vp-mobile .legal-h { font-size: var(--fs-18); }


/* =====================================================================
   VERFIJNING · lettertype, witruimte, knoppen en vormen, mobiel
   Plus Jakarta Sans: modern en vriendelijk, goed leesbaar op kleine schermen.
   Knoppen als pil, kaarten met zachte hoeken, meer lucht tussen secties.
   ===================================================================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.display-1 { font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: 1.04; }
.display-2 { font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: 1.1; }
.lead { color: var(--color-ink-2); line-height: 1.55; }

/* Labels boven secties: rustig in de gewone letter in plaats van mono. */
.rf-step, .rf-compare-label, .sel-queries-label, .fig-src {
  font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-13);
  letter-spacing: 0; text-transform: none;
}
.eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-14); }

/* Knoppen: pil, 52px hoog, zachte schaduw op de primaire knop. */
.page .button-primary, .page .button-ghost {
  min-height: var(--sp-52); padding: 0 var(--sp-24); border-radius: var(--r-pill);
  font-size: var(--fs-16); font-weight: var(--fw-semi); 
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.page .button-primary { box-shadow: var(--shadow-btn); }
.page .button-primary:hover { transform: translateY(-1px); }
.page .button-ghost { background: var(--color-page); border-color: var(--color-line-strong); }
.page .button-ghost:hover { border-color: var(--color-ink); }
.page .button-ghost.is-on-dark { background: transparent; }
.page .header-cta, .page .header-cta-ghost { min-height: var(--sp-44); padding: 0 var(--sp-20); font-size: var(--fs-15); }
.check-mark { border-radius: var(--r-pill); }

/* Vormen: pakketten, vergelijking en beelden met zachte hoeken. */
.tier { border-radius: var(--r-24); }
.tier.is-featured { box-shadow: var(--shadow-lift); }
.tier-flag { border-radius: var(--r-pill); }
.rf-compare-col, .rf-costs { border-radius: var(--r-24); }
.rf-shot { border-radius: var(--r-20); }
.rf-shot.is-framed { box-shadow: var(--shadow-shot); }
.rf-chain-step { border-radius: var(--r-pill); }
.map-frame { border-radius: var(--r-24); }

/* Witruimte: meer lucht, smallere tekstkolommen. */
.rf-sec { padding: var(--sp-sec) var(--sp-0); }
.rf-cta { padding: var(--sp-sec) var(--sp-0); }
.rf-hero { padding: var(--sp-120) var(--sp-0) var(--sp-96); }
.rf-cta-inner { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.rf-cta-inner .rf-actions { justify-content: center; }
.rf-copy .rf-text, .rf-head .lead { max-width: 58ch; }

/* Mobiel: grotere tikvlakken, knoppen over de hele breedte, rustige ritme. */
@media (max-width: 640px) {
  .rf-sec { padding: var(--sp-sec-m) var(--sp-0); }
  .rf-cta { padding: var(--sp-sec-m) var(--sp-0); }
  .rf-hero { padding: var(--sp-hero-m) var(--sp-0) var(--sp-56); }
  .display-1 { font-size: var(--type-display-1-m); }
  .display-2 { font-size: var(--type-display-2-m); }
  .lead { font-size: var(--fs-17); }
  .page .button-primary, .page .button-ghost { width: 100%; justify-content: center; min-height: var(--sp-56); }
  .page .header-cta, .page .header-cta-ghost { width: auto; min-height: var(--sp-44); }
  .rf-cta-inner { align-items: flex-start; text-align: left; }
  .rf-cta-inner .rf-actions { justify-content: flex-start; }
  .tier { border-radius: var(--r-20); }
  .rf-shot { border-radius: var(--r-14); }
  .mobile-link { min-height: var(--sp-52); display: flex; align-items: center; font-size: var(--fs-18); }
}
.vp-mobile .rf-sec, .vp-mobile .rf-cta { padding: var(--sp-sec-m) var(--sp-0); }
.vp-mobile .rf-hero { padding: var(--sp-hero-m) var(--sp-0) var(--sp-56); }
.vp-mobile .page .button-primary, .vp-mobile .page .button-ghost, .vp-mobile .button-primary, .vp-mobile .button-ghost { width: 100%; justify-content: center; }


/* =====================================================================
   PAKKETTEN NAAST ELKAAR
   Drie kaarten van gelijke hoogte. Per kaart: naam, prijs, belofte,
   een lijn, de regels, en onderaan één knop over de hele breedte.
   Groei is het donkere vlak met het label. Op mobiel onder elkaar.
   ===================================================================== */
.page .tier-list, .rf-stack > .tier-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); max-width: var(--wrap-max); margin: 0 auto; align-items: stretch; }
.rf-stack > .tier-assure, .rf-stack > .tier-vat { max-width: var(--wrap-max); margin-left: auto; margin-right: auto; }
.rf-stack > .tier-assure { justify-content: center; }
.rf-stack > .tier-vat { text-align: center; }
.page .tier { display: flex; flex-direction: column; gap: var(--sp-0); height: 100%; padding: var(--sp-32); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-24); background: var(--color-page); box-shadow: none; }
.page .tier-top, .page .tier-id { display: contents; }
.page .tier-name { order: 1; font-size: var(--fs-28); font-weight: var(--fw-bold); padding-right: var(--sp-120); }
.page .tier-amount { order: 2; flex-direction: row; align-items: baseline; gap: var(--sp-6); margin-top: var(--sp-8); }
.page .tier-price, .page .tier.is-featured .tier-price { font-size: var(--fs-40); font-weight: var(--fw-bold); color: var(--color-ink); }
.page .tier-per { margin-top: var(--sp-0); font-size: var(--fs-16); color: var(--color-ink-3); }
.page .tier-claim { order: 3; margin-top: var(--sp-16); font-size: var(--fs-16); line-height: 1.5; color: var(--color-ink-2); max-width: none; }
.page .tier-fit { order: 4; margin-top: var(--sp-8); font-size: var(--fs-14); color: var(--color-ink-3); }
.page .tier-fit strong { color: var(--color-ink-2); }
.page .tier-free { order: 5; margin-top: var(--sp-20); }
.page .tier-points { order: 6; margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: var(--bw-1) solid var(--color-line); gap: var(--sp-14); }
.page .tier-points li { font-size: var(--fs-15); }
.page .tier-foot { order: 7; margin-top: auto; padding-top: var(--sp-32); border-top: none; flex-direction: column; align-items: stretch; gap: var(--sp-10); }
.page .tier-foot > a { width: 100%; justify-content: center; text-align: center; }
.page .tier-note { text-align: center; max-width: none; }
.page .tier-flag { position: absolute; top: var(--sp-28); right: var(--sp-28); left: auto; padding: var(--sp-8) var(--sp-16); background: var(--color-page); color: var(--color-ink); font-size: var(--fs-14); font-weight: var(--fw-semi); box-shadow: var(--shadow-btn); }

.page .tier.is-featured { background: var(--color-dark); border-color: var(--color-dark); box-shadow: var(--shadow-lift); }
.page .tier.is-featured .tier-name, .page .tier.is-featured .tier-price, .page .tier.is-featured .tier-points li, .page .tier.is-featured .tier-fit strong { color: var(--color-on-dark); }
.page .tier.is-featured .tier-per, .page .tier.is-featured .tier-claim, .page .tier.is-featured .tier-fit, .page .tier.is-featured .tier-note { color: var(--color-on-dark-soft); }
.page .tier.is-featured .tier-points { border-top-color: var(--color-dark-2); }
.page .tier.is-featured .check-mark { background: var(--color-dark-2); color: var(--color-accent); }
.page .tier.is-featured .tier-free { background: var(--color-dark-2); }
.page .tier.is-featured .tier-free-head { color: var(--color-on-dark); }
.page .tier.is-featured .tier-free-line { color: var(--color-on-dark-soft); }

@media (min-width: 961px) {
  .page .tier-list, .rf-stack > .tier-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page .tier { padding: var(--sp-24); border-radius: var(--r-20); }
  .page .tier-flag { top: var(--sp-20); right: var(--sp-20); }
  .page .tier-name { padding-right: var(--sp-120); }
}
.vp-mobile .tier-list, .vp-tablet .tier-list { grid-template-columns: minmax(0, 1fr); }


/* Groei in het Rateflow-groen in plaats van zwart. Het groen loopt van licht
   bovenin naar diep onderin; de tekst staat op het diepe deel, wit met
   voldoende contrast. Knop en label wit, zoals op een gekleurd vlak hoort. */
.page .tier.is-featured { background: linear-gradient(165deg, var(--color-accent-ink-2) 0%, var(--color-accent-ink) 62%); border-color: var(--color-accent-ink); box-shadow: var(--shadow-accent); }
.page .tier.is-featured .tier-per, .page .tier.is-featured .tier-claim, .page .tier.is-featured .tier-fit, .page .tier.is-featured .tier-note, .page .tier.is-featured .tier-free-line { color: var(--color-on-accent-soft); }
.page .tier.is-featured .tier-points { border-top-color: var(--color-on-accent-line); }
.page .tier.is-featured .check-mark { background: var(--color-page); color: var(--color-accent-ink); }
.page .tier.is-featured .tier-free { background: var(--color-on-accent-veil); }
.page .tier.is-featured .button-primary { background: var(--color-page); border-color: var(--color-page); color: var(--color-accent-ink); box-shadow: var(--shadow-btn); }
.page .tier.is-featured .button-primary:hover { background: var(--color-accent-veil); border-color: var(--color-accent-veil); color: var(--color-accent-ink); }
.page .tier.is-featured .tier-flag { background: var(--color-accent); color: var(--color-ink); box-shadow: none; }
/* Reviews en Compleet: groene knop, zodat alle drie de kaarten bij elkaar horen. */
.page .tier:not(.is-featured) .button-ghost { border-color: var(--color-accent-deep); color: var(--color-accent-ink); }
.page .tier:not(.is-featured) .button-ghost:hover { background: var(--color-accent-veil); }
.page .tier:not(.is-featured) { border-color: var(--color-line-strong); }


/* Groei: licht en strak. Witte kaart met een groene rand, een zweem groen
   bovenin, groen label en groene knop. Geen vol vlak, geen verloop. */
.page .tier.is-featured { background: linear-gradient(180deg, var(--color-accent-veil) 0%, var(--color-page) 40%); border: var(--bw-2) solid var(--color-accent); box-shadow: 0 var(--sp-20) var(--sp-40) calc(var(--sp-20) * -1) var(--color-accent-shadow); }
.page .tier.is-featured .tier-name, .page .tier.is-featured .tier-price, .page .tier.is-featured .tier-points li, .page .tier.is-featured .tier-fit strong, .page .tier.is-featured .tier-free-head { color: var(--color-ink); }
.page .tier.is-featured .tier-per, .page .tier.is-featured .tier-note, .page .tier.is-featured .tier-fit { color: var(--color-ink-3); }
.page .tier.is-featured .tier-claim, .page .tier.is-featured .tier-free-line { color: var(--color-ink-2); }
.page .tier.is-featured .tier-points { border-top-color: var(--color-line); }
.page .tier.is-featured .check-mark { background: var(--color-accent-wash); color: var(--color-accent-deep); }
.page .tier.is-featured .tier-free { background: var(--color-accent-wash); }
.page .tier.is-featured .button-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); box-shadow: var(--shadow-btn); }
.page .tier.is-featured .button-primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-on-dark); }
.page .tier.is-featured .tier-flag { background: var(--color-accent); color: var(--color-ink); box-shadow: none; }
.page .tier:not(.is-featured) .button-ghost { border-color: var(--color-line-strong); color: var(--color-ink); }
.page .tier:not(.is-featured) .button-ghost:hover { border-color: var(--color-ink); background: var(--color-page); }
.page .tier:not(.is-featured) { border-color: var(--color-line); }


/* ---------- mobiele fouten uit de laatste controle ---------- */
/* Kaartvoet: de notitie liep naast de knop uit de kaart. Nooit laten omslaan. */
.page .tier-foot { flex-wrap: nowrap; }
.page .tier-note { width: 100%; }
/* Zekerheden onder de pakketten liepen over elkaar: gewone regelhoogte. */
.page .tier-assure > span { height: auto; min-height: var(--sp-0); line-height: 1.4; align-items: flex-start; }
@media (max-width: 640px) { .page .tier-assure { gap: var(--sp-12); } }
.vp-mobile .tier-assure { gap: var(--sp-12); }
/* Rekensom: het wisselende woord brak midden in het woord af en de kop schoof
   over de tekst eronder. Heel woord op één regel, kop in gewone hoogte. */
#rekensom .word-swap { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
#rekensom .display-2 { overflow-wrap: normal; word-break: normal; height: auto; }
#rekensom .pair-copy { display: flex; flex-direction: column; gap: var(--sp-16); }
/* Voorbeeldlabel in de gewone letter in plaats van mono hoofdletters. */
.calc-hint { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semi); letter-spacing: var(--sp-0); text-transform: none; color: var(--color-accent-deep); }
.page .tier-assure > span { white-space: nowrap; }

/* Functietitel in de gewone letter; mono hoofdletters oogden als sjabloon. */
.person-role { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-medium, 500); letter-spacing: var(--sp-0); text-transform: none; color: var(--color-accent-deep); }
.vp-mobile .person-role { font-size: var(--fs-14); }
@media (max-width: 640px) { .person-role { font-size: var(--fs-14); } }

/* "Website. Blogs. …" op mobiel als gewone regels onder elkaar. */
@media (max-width: 640px) { .rf-all-words { display: block; } .rf-all-words > span { display: block; } }
.vp-mobile .rf-all-words { display: block; }
.vp-mobile .rf-all-words > span { display: block; }
.page .rf-link { white-space: nowrap; }

/* Vinkjeslijsten als raster: vinkje in een vaste kolom, tekst neemt de rest.
   Zo kan de tekst nooit smaller worden dan de regel en niet over de lijn lopen. */
.page .rf-points li, .page .rf-grid-list li, .page .tier-points li, .page .tier-assure > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-12); align-items: start; }
.page .rf-points li > span:last-child, .page .rf-grid-list li > span:last-child, .page .tier-points li > span:last-child { min-width: 0; }
.vp-mobile .rf-cta-inner .rf-actions { flex-direction: column; align-items: stretch; }


/* ===== Websites: het verhaal van website + blogs ===== */
.rf-note { margin: var(--sp-0); font-size: var(--fs-14); line-height: 1.5; color: var(--color-ink-3); text-wrap: pretty; }
.rf-pages { list-style: none; margin: var(--sp-0); padding: var(--sp-0); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.page .rf-pages li { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-14) var(--sp-16); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-12); background: var(--color-page); }
.rf-pages-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-16); color: var(--color-ink); }
.rf-pages-url { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-biz-list.is-query li { font-style: italic; color: var(--color-ink); }
.rf-biz-list.is-query li::before { content: '“'; color: var(--color-accent-deep); font-style: normal; margin-right: var(--sp-2); }
.rf-biz-list.is-query li::after { content: '”'; color: var(--color-accent-deep); font-style: normal; margin-left: var(--sp-2); }
.rf-net { display: block; width: 100%; height: auto; max-width: 560px; }
.rf-net-lines line { stroke: var(--color-line-strong); stroke-width: 2; }
.rf-net-node rect { fill: var(--color-page); stroke: var(--color-line-strong); stroke-width: 1.5; }
.rf-net-node text { font-family: var(--font-display); font-weight: 600; font-size: 17px; fill: var(--color-ink); text-anchor: middle; }
.rf-net-node.is-main rect { fill: var(--color-accent-deep); stroke: var(--color-accent-deep); }
.rf-net-node.is-main text { fill: var(--color-page); }
.rf-sources, .rf-journal { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-28); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.rf-sources .rf-grid-list { column-gap: var(--sp-24); }
.page .rf-sources .rf-grid-list li { font-size: var(--fs-16); padding: var(--sp-12) var(--sp-0); }
.rf-journal ul { list-style: none; margin: var(--sp-0); padding: var(--sp-0); }
.page .rf-journal li { padding: var(--sp-14) var(--sp-0); border-bottom: var(--bw-1) solid var(--color-line); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-17); line-height: 1.35; color: var(--color-ink); text-wrap: pretty; }
.rf-journal-more { font-weight: var(--fw-semi); color: var(--color-accent-deep); }
.rf-dash { margin: var(--sp-0); display: flex; flex-direction: column; gap: var(--sp-10); }
.rf-dash-scroll { border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rf-dash-scroll img { display: block; width: 100%; height: auto; }
.rf-dash-cap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8); font-size: var(--fs-15); color: var(--color-ink-2); }
.rf-dash-hint { display: none; font-size: var(--fs-13); color: var(--color-ink-3); }
@media (max-width: 900px) {
  .rf-dash-scroll img { width: 820px; max-width: none; }
  .rf-dash-hint { display: inline; }
}
@media (max-width: 640px) {
  .rf-pages { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .page .rf-pages li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--sp-12); padding: var(--sp-12) var(--sp-14); }
  .rf-sources, .rf-journal { padding: var(--sp-20); }
  .rf-sources .rf-grid-list { grid-template-columns: minmax(0, 1fr); }
  .rf-net-node text { font-size: 19px; }
}
.vp-mobile .rf-pages, .vp-mobile .rf-sources .rf-grid-list { grid-template-columns: minmax(0, 1fr); }
.vp-mobile .page .rf-pages li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--sp-12); }
.vp-mobile .rf-dash-scroll img { width: 820px; max-width: none; }
.vp-mobile .rf-dash-hint { display: inline; }


/* ===== Over ons ===== */
.about-words { margin: var(--sp-0) var(--sp-0) var(--sp-16); display: flex; flex-direction: column; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-display-2); line-height: 1.12; letter-spacing: var(--ls-tight); color: var(--color-ink); }
.about-words span:nth-child(odd) { color: var(--color-accent-deep); }
.person-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-44); height: var(--sp-44); flex: none; border: var(--bw-1) solid var(--color-line); border-radius: var(--r-12); color: var(--color-ink-2); background: var(--color-page); }
.social-icon:hover { color: var(--color-accent-deep); border-color: var(--color-accent); }
.team-dev { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-48); align-items: center; padding: var(--sp-32); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-surface); }
.team-dev-copy { display: flex; flex-direction: column; gap: var(--sp-12); }
.team-sum { margin: var(--sp-0); display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-6) var(--sp-10); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-20); color: var(--color-ink); }
.team-op { color: var(--color-ink-3); }
.team-sum strong { color: var(--color-accent-deep); }
.follow { display: flex; flex-direction: row; align-items: center; gap: var(--sp-12); }
.follow-label { font-size: var(--fs-15); color: var(--color-ink-2); }
.footer-social { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--sp-44); color: inherit; opacity: 0.85; }
.footer-social:hover { opacity: 1; }
@media (max-width: 900px) { .team-dev { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); padding: var(--sp-20); } }
.vp-mobile .team-dev, .vp-tablet .team-dev { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); padding: var(--sp-20); }
@media (max-width: 640px) { .about-words { font-size: var(--type-heading-2); } }
.vp-mobile .about-words { font-size: var(--type-heading-2); }

.rf-fig { margin: var(--sp-0); display: flex; flex-direction: column; gap: var(--sp-10); }
.zig-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
.widget-mount.is-live { min-height: var(--sp-0); }

@media (max-width: 1200px) { .rf-sources .rf-grid-list { grid-template-columns: minmax(0, 1fr); } }
.rf-biz-list.is-query li::before { margin-right: var(--sp-0); }
.rf-biz-list.is-query li::after { margin-left: var(--sp-0); }

/* Knoppen onder elkaar op mobiel, ook binnen CTA-blokken. */
@media (max-width: 640px) {
  .page .rf-actions { flex-direction: column; align-items: stretch; }
  .page .rf-actions > a { width: 100%; justify-content: center; text-align: center; }
  .rf-net-node text { font-size: 20px; }
}
.vp-mobile .page .rf-actions, .page.vp-mobile .rf-actions { flex-direction: column; align-items: stretch; }
.page.vp-mobile .rf-actions > a { width: 100%; justify-content: center; text-align: center; }
.page.vp-mobile .rf-net-node text { font-size: 20px; }
.rf-dash-hint { white-space: nowrap; }

.page .team-sum > *, .page .follow-label, .page .person-top .person-name { height: auto; line-height: 1.3; white-space: nowrap; }
.page .person-top { width: 100%; }
.page .person-top .person-name { flex: 1 1 auto; min-width: var(--sp-0); }
.page .person-text > .person-role { height: auto; line-height: 1.4; }

.mock-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: var(--sp-0); }
.widget-mount.is-live { display: flex; align-items: center; justify-content: center; min-height: 240px; padding: var(--sp-24) var(--sp-16); }


/* ===== Dashboard: per screenshot korte uitleg + kleiner beeld ===== */
.dash-list { display: flex; flex-direction: column; gap: var(--sp-64); }
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-48); align-items: center; }
.dash-row.is-flip > .dash-copy { order: 2; }
.dash-copy { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.dash-shot { position: relative; display: block; border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); overflow: hidden; background: var(--color-page); box-shadow: 0 var(--sp-8) var(--sp-24) var(--color-shadow-soft); }
.dash-shot img { display: block; width: 100%; height: auto; }
.dash-zoom { display: none; position: absolute; right: var(--sp-10); bottom: var(--sp-10); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--color-ink); color: var(--color-page); font-size: var(--fs-13); font-weight: var(--fw-semi); }
.dash-shot:hover { border-color: var(--color-accent); }
@media (max-width: 900px) {
  .dash-list { gap: var(--sp-48); }
  .dash-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
  .dash-row.is-flip > .dash-copy { order: 0; }
  .dash-zoom { display: inline-block; }
}
.vp-mobile .dash-row, .vp-tablet .dash-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
.vp-mobile .dash-row.is-flip > .dash-copy, .vp-tablet .dash-row.is-flip > .dash-copy { order: 0; }
.vp-mobile .dash-zoom { display: inline-block; }

.page .dash-zoom { white-space: nowrap; height: auto; line-height: 1.3; }
@media (max-width: 1040px) {
  .dash-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
  .dash-row.is-flip > .dash-copy { order: 0; }
  .dash-shot { max-width: 720px; }
}


/* ===== Voor wie + homepage-reminder ===== */
.rf-head.is-center { align-items: center; text-align: center; margin: var(--sp-0) auto; }
.rf-note.is-center { text-align: center; }
.vw-map { width: 100%; max-width: 880px; margin: var(--sp-0) auto; }
.vw-map .map-frame { display: block; width: 100%; height: 640px; border: none; background: transparent; }
.vw-flow { list-style: none; margin: var(--sp-0); padding: var(--sp-0); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.page .vw-flow-step { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.vw-flow-num { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--color-accent-deep); }
.vw-flow-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-22); letter-spacing: var(--ls-tight); color: var(--color-ink); }
.vw-flow-line { font-size: var(--fs-15); line-height: 1.55; color: var(--color-ink-2); text-wrap: pretty; }
.miss-list.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-remind { list-style: none; margin: var(--sp-4) var(--sp-0) var(--sp-0); padding: var(--sp-0); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-8) var(--sp-24); }
.page .tier-remind li { display: flex; flex-direction: row; align-items: center; gap: var(--sp-8); font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--color-ink); }
@media (max-width: 900px) {
  .vw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miss-list.is-three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vw-map .map-frame { height: 520px; }
  .vw-flow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .page .vw-flow-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-12); row-gap: var(--sp-4); padding: var(--sp-16); }
  .vw-flow-num { grid-row: span 2; font-size: var(--fs-15); padding-top: var(--sp-2); }
  .vw-flow-title { font-size: var(--fs-18); }
  .tier-remind { flex-direction: column; align-items: flex-start; }
}
.vp-mobile .vw-map .map-frame { height: 520px; }
.vp-mobile .vw-flow, .vp-mobile .miss-list.is-three { grid-template-columns: minmax(0, 1fr); }
.vp-tablet .vw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page.vp-mobile .vw-flow-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-12); row-gap: var(--sp-4); padding: var(--sp-16); }
.vp-mobile .vw-flow-num { grid-row: span 2; }
.vp-mobile .tier-remind { flex-direction: column; align-items: flex-start; }


/* ===== Stappenlijst: genummerde tijdlijn in plaats van losse pillen =====
   Zelfde taal als de rest van de site: dunne lijnen, groene nummers,
   geen zwarte eindknop. Geldt voor alle .rf-chain op de site. */
.page .rf-chain { counter-reset: rfstep; display: flex; flex-direction: column; align-items: stretch; max-width: 480px; padding: var(--sp-24) var(--sp-28); border: var(--bw-1) solid var(--color-line); border-radius: var(--r-20); background: var(--color-page); }
.page .rf-chain-step, .page .rf-chain-step.is-end, .page .rf-chain.is-muted .rf-chain-step, .page .rf-chain.is-muted .rf-chain-step.is-end {
  counter-increment: rfstep; position: relative; display: grid; grid-template-columns: var(--sp-28) minmax(0, 1fr); column-gap: var(--sp-16); align-items: center;
  margin: var(--sp-0); padding: var(--sp-10) var(--sp-0); border: none; border-radius: var(--sp-0); background: transparent;
  font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-16); line-height: 1.35; color: var(--color-ink); white-space: normal;
}
.page .rf-chain-step + .rf-chain-step { margin-top: var(--sp-0); }
.page .rf-chain-step::before, .page .rf-chain-step + .rf-chain-step::before {
  content: counter(rfstep); position: relative; left: auto; top: auto; z-index: 1; display: grid; place-items: center;
  width: var(--sp-28); height: var(--sp-28); border-radius: var(--r-pill); background: var(--color-accent-veil); border: var(--bw-1) solid var(--color-line);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--color-accent-deep);
}
.page .rf-chain-step + .rf-chain-step::after { content: ''; position: absolute; left: calc(var(--sp-14) - 0.5px); top: calc(var(--sp-10) * -1 - var(--sp-0)); width: var(--bw-1); height: calc(var(--sp-20)); background: var(--color-line-strong); }
.page .rf-chain-step.is-end { color: var(--color-accent-deep); }
.page .rf-chain-step.is-end::before { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-page); }
.page .rf-chain.is-muted .rf-chain-step { color: var(--color-ink-2); }
.page .rf-chain.is-muted .rf-chain-step::before { background: var(--color-surface-2); color: var(--color-ink-3); }
.page .rf-chain.is-muted .rf-chain-step.is-end::before { background: var(--color-surface-2); border-color: var(--color-line); color: var(--color-ink-3); }
@media (max-width: 640px) {
  .page .rf-chain { padding: var(--sp-16) var(--sp-20); max-width: none; }
  .page .rf-chain-step { font-size: var(--fs-15); padding: var(--sp-8) var(--sp-0); }
}
.page.vp-mobile .rf-chain { padding: var(--sp-16) var(--sp-20); max-width: none; }

.about-quote { margin: var(--sp-0); display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-0); }
.about-quote::before { content: "“"; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 72px; line-height: 0.6; color: var(--color-accent-deep); }
.about-quote p { margin: var(--sp-0); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-26, 26px); line-height: 1.3; letter-spacing: var(--ls-tight); color: var(--color-ink); text-wrap: pretty; }
.about-quote footer { font-size: var(--fs-14); color: var(--color-ink-3); }
@media (max-width: 640px) { .about-quote p { font-size: var(--fs-20); } }
.vp-mobile .about-quote p { font-size: var(--fs-20); }

/* Staande social post: als telefoonscherm, niet over de hele kolom. */
.social-post { margin: var(--sp-0) auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); max-width: 300px; }
.social-post img { display: block; width: 100%; height: auto; border-radius: var(--r-20); border: var(--bw-1) solid var(--color-line); box-shadow: 0 var(--sp-16) var(--sp-40) var(--color-shadow-soft); }
.social-post .rf-note { text-align: center; }
@media (max-width: 640px) { .social-post { max-width: 260px; } }
.vp-mobile .social-post { max-width: 260px; }

/* Mobiel menu: inloggen als nette knop onder de hoofdknop, zoals op desktop. */
.mobile-actions { display: flex; flex-direction: column; gap: var(--sp-10); margin-top: var(--sp-16); }
.mobile-actions > a { width: 100%; justify-content: center; text-align: center; min-height: var(--sp-48); }

/* Bovenaan de homepage: geen matglazen balk over de video, maar een zachte
   witte overloop die in het beeld verdwijnt. Pas na scrollen komt de balk. */
body:has(.hero-mid.is-media) .site-header:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}