/* ─────────────────────────────────────────────────────────────────────────
   MODULE:        apps/site (marketingsite)
   DOET:          De ene stylesheet van de publieke site. Tokens uit het
                  handoff-README, de typeschaal, de knoppen en elke klasse die
                  index.html en de andere pagina's gebruiken. Geen inline
                  stijlen in de HTML, want Caddy stuurt een strikte CSP mee
                  met style-src 'self' en fonts.googleapis.com.

   CONNECTS:      index.html, chatgpt-tracking.html, start.html, call.html,
                  bedankt.html, privacy.html ──▶ link rel=stylesheet
                  Google Fonts ──▶ Instrument Sans, IBM Plex Mono

   SAFE TO EDIT:  Ja. Maten en kleuren komen uit README.md van de handoff en
                  docs/09-design-system.md; verander een waarde daar eerst.
   BREAKS IF:     Iemand een volronde hoek op iets met tekst zet,
                  een hoofdletterlabel met letter-spacing toevoegt, of een
                  schaduw. Die drie zijn in het product afgeschaft en de
                  site volgt het product.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --navy-900: #0B1F3A;
  --navy-800: #16305A;
  --navy-700: #1B4079;
  --navy-600: #255397;
  --navy-500: #3A6FB5;
  --navy-100: #E9EFF8;
  --navy-50: #F6F9FD;
  --page: #F1F4F8;
  --ink-900: #101B2D;
  --ink-600: #55637A;
  --ink-400: #8D99AC;
  --line: #E4E8EF;
  --white: #FFFFFF;
  --positive: #0F7B4F;
  --caution: #A66A00;

  /* Twee toevoegingen die niet in de handoff-tabel staan, allebei om het
     contrast. caution-text is het amber voor tekst onder 18px (form-fout,
     de reden in een feedrij, de kloofpercentages in een tabel): #A66A00 haalt
     op wit 4,48 op 1 en dat is net onder de 4,5 die AA voor kleine tekst
     vraagt; #8F5C00 haalt 5,68. Grote getallen en balken houden --caution.
     line-input is de rand van een invoerveld: --line op wit is 1,23 op 1 en
     onzichtbaar voor wie slecht ziet; deze haalt 3,4 op 1. */
  --caution-text: #8F5C00;
  --line-input: #7A8699;

  --r-kaart: 12px;
  --r-bedien: 6px;
  --r-tag: 4px;
  --r-balk: 2px;

  --font-sans: "Instrument Sans", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --container: 1120px;
  --gutter: 24px;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--navy-600); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

table { border-collapse: collapse; }

/* Het hidden-attribuut wint van elke display in dit bestand, anders kan
   site.js een bestemming (.dest, inline-flex) nooit verbergen. */
[hidden] { display: none !important; }

/* Een sprong naar een anker landt onder de plakkende kop, niet eronder
   verstopt: kophoogte 64 plus 24 lucht. Onder 720px is de kop niet meer
   plakkend en volstaat 16. */
[id] { scroll-margin-top: 88px; }

.mono { font-family: var(--font-mono); }
.accent { color: var(--caution); }
.muted { color: var(--ink-600); font-weight: 400; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--r-bedien);
  font-size: 15px;
  font-weight: 500;
}
.skip-link:focus { top: 12px; color: var(--white); text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-bedien);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 19px;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }
.btn--primary:hover { background: var(--navy-600); border-color: var(--navy-600); color: var(--white); }

.btn--secondary { background: var(--white); border-color: var(--line); color: var(--navy-900); }
.btn--secondary:hover { color: var(--navy-600); border-color: var(--navy-500); }

.btn--header { padding: 9px 15px; font-size: 15px; }
.btn--hero { padding: 14px 27px; font-size: 17px; }
.btn--small { padding: 10px 19px; font-size: 15px; }
.btn--mid { padding: 12px 23px; font-size: 16px; }
.btn--card { display: flex; width: 100%; padding: 12px 19px; font-size: 16px; }

.btn--on-dark-primary { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.btn--on-dark-primary:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.btn--on-dark-secondary { background: transparent; border-color: var(--navy-500); color: var(--white); }
.btn--on-dark-secondary:hover { color: var(--white); border-color: var(--white); }

.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-row--wide { gap: 12px; justify-content: center; }

/* ── Kop ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.brand:hover { color: var(--navy-900); text-decoration: none; }
.brand__mark { flex: none; width: 19px; height: 19px; color: var(--navy-900); }

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 10px 26px;
  flex: 1 1 260px;
  flex-wrap: wrap;
  font-size: 15px;
  white-space: nowrap;
}
.site-nav a { color: var(--ink-600); }
.site-nav a:hover { color: var(--navy-600); }
.site-nav a.is-active { color: var(--navy-900); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.site-header__login { color: var(--ink-600); padding: 0 10px; }

/* ── Banden en secties ─────────────────────────────────────────────────── */

.band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--top-only { border-bottom: 0; }

.section { padding-top: 128px; padding-bottom: 128px; }
.section--gap { padding-top: 128px; padding-bottom: 96px; }
.section--steps { padding-top: 128px; padding-bottom: 0; }
.section--flush { padding-top: 0; padding-bottom: 96px; }
.section--tail { padding-top: 0; padding-bottom: 128px; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 72px;
  align-items: center;
}
.two-col > * { min-width: 0; }

.prose { max-width: 28em; }
.prose__text { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--ink-600); }
.prose__small { margin-top: 22px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.prose__cta { margin-top: 30px; }

.h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--navy-900);
}
.h2--centered { margin-left: auto; margin-right: auto; text-align: center; }

.point { display: flex; align-items: baseline; gap: 12px; }
.point__dot {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--navy-700);
  flex: none;
  position: relative;
  top: -2px;
}
.point__dot--small { width: 7px; height: 7px; border-radius: 7px; }
.point strong { font-weight: 600; color: var(--ink-900); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 7px; background: var(--positive); flex: none; }
.dot--small { width: 6px; height: 6px; border-radius: 6px; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding-top: 112px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__title {
  max-width: 16em;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy-900);
}
.hero__sub {
  margin-top: 24px;
  max-width: 34em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ink-600);
}
.hero__points {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 34em;
  text-align: left;
}
.hero__points .point { font-size: 17px; line-height: 1.5; color: var(--ink-600); }
.hero__cta { margin-top: 40px; }
.hero__note { margin-top: 18px; font-size: 14px; color: var(--ink-600); }

/* ── Live events (hero) ────────────────────────────────────────────────── */

@keyframes swRowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes swPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.feed {
  width: 100%;
  max-width: 760px;
  margin: 56px auto 0 auto;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  overflow: hidden;
}
.feed__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feed__title { font-size: 16px; font-weight: 600; color: var(--navy-900); }
.dot--pulse { animation: swPulse 1.5s ease-in-out infinite; }
.feed__state { font-size: 14px; color: var(--ink-600); }
.feed__when { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-600); }
.feed__pause {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feed__pause:hover { color: var(--navy-600); }

.feed__stats {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--navy-50);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.stat { min-width: 0; }
.stat__label { font-size: 13px; color: var(--ink-600); }
.stat__value {
  margin-top: 4px;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.stat__value--estimated { color: var(--ink-600); }
.stat__value--gap { color: var(--caution); }

.feed__list { padding: 0 22px 8px 22px; min-height: 232px; }
.feed__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.feed__row--in { animation: swRowIn 0.45s ease-out; }
.feed__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-600); }
.feed__event { font-size: 15px; color: var(--ink-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__source { color: var(--ink-600); }
.feed__why { color: var(--caution-text); }
.feed__value { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--navy-900); }
.feed__value--empty { color: var(--ink-400); }
.feed__wait { padding: 14px 0; font-size: 14px; color: var(--ink-600); }

/* ── Bestemmingen ──────────────────────────────────────────────────────── */

.strip {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 36px;
  flex-wrap: wrap;
}
.strip__label { font-size: 15px; color: var(--ink-600); white-space: nowrap; }
.dest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-900);
  white-space: nowrap;
}
.dest__mono {
  width: 28px;
  height: 28px;
  border-radius: var(--r-bedien);
  background: var(--page);
  color: var(--ink-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ── De kloof ──────────────────────────────────────────────────────────── */

.gap__prose { max-width: 26em; }
.lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; color: var(--ink-900); }
.lead + .lead { margin-top: 24px; }
.gap__claim {
  margin-top: 28px;
  font-size: clamp(21px, 2vw, 24px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy-900);
}

.bars { display: flex; flex-direction: column; gap: 44px; }
.bar__head { display: flex; align-items: baseline; gap: 12px; }
.bar__label { font-size: 16px; color: var(--ink-600); }
.bar__number {
  margin-left: auto;
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.bar__number--estimated { color: var(--ink-600); }
.bar__number--gap { color: var(--caution); }
.bar__track { display: block; margin-top: 12px; height: 12px; border-radius: var(--r-balk); background: var(--navy-100); }
.bar__fill { display: block; height: 12px; border-radius: var(--r-balk); background: var(--navy-900); }
.bar__fill--measured { width: 100%; background: var(--navy-900); }
.bar__fill--estimated { width: 60%; background: var(--ink-400); }
.bar__fill--gap { width: 40%; background: var(--caution); }
.bars__note { margin-top: -20px; font-size: 13px; line-height: 1.5; color: var(--ink-600); }

/* ── CTA-rij ───────────────────────────────────────────────────────────── */

.cta-row {
  padding-top: 0;
  padding-bottom: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.cta-row__text { font-size: 15px; color: var(--ink-600); }

/* ── Productkaarten ────────────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px;
}

.card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.card__title {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.card__text { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-600); }
.card__point { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-900); }
.card__link { margin-top: 24px; }
.card__link a { font-size: 16px; font-weight: 600; color: var(--navy-700); }

.mock {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  background: var(--navy-50);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.mock--scroll { display: block; overflow-x: auto; }
.mock__head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; }
.mock__title { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.chip {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-bedien);
  background: var(--white);
  padding: 3px 9px;
  font-size: 12px;
  color: var(--ink-600);
}
.mock__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.mock__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-600); }
.mock__event { font-size: 14px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__source { color: var(--ink-600); }
.mock__value { font-family: var(--font-mono); font-size: 13px; color: var(--navy-900); }
.mock__value--empty { color: var(--ink-400); }

.mini-table { width: 100%; min-width: 360px; font-size: 14px; }
.mini-table th { text-align: left; padding: 0 0 10px 0; font-size: 12px; font-weight: 500; color: var(--ink-600); }
.mini-table th.num { text-align: right; padding-left: 12px; }
.mini-table td { padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink-900); }
.mini-table td.num { padding-left: 12px; text-align: right; font-family: var(--font-mono); }
.mini-table .num--platform { color: var(--ink-600); }
.mini-table .num--site { color: var(--navy-900); }
.mini-table .num--gap { color: var(--caution-text); }
.mini-table .num--zero { color: var(--ink-600); }
.mini-table .total td { padding-top: 12px; padding-bottom: 0; font-weight: 600; }
.mini-table .total td:first-child { color: var(--navy-900); }
.mini-table .total td.num { font-weight: 500; }

/* ── Panelen (Journey, Reading depth, All clients) ─────────────────────── */

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  background: var(--white);
  overflow: hidden;
}
.panel__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.panel__head--state { align-items: center; gap: 10px; }
.panel__title { font-size: 16px; font-weight: 600; color: var(--navy-900); }
.panel__sub { font-size: 14px; color: var(--ink-600); }
.panel__path { font-family: var(--font-mono); font-size: 13px; color: var(--ink-600); }

.journey { padding: 8px 20px 20px 20px; display: flex; flex-direction: column; }
.journey__row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.journey__row--hit { background: var(--navy-50); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.journey__row--credit { padding-bottom: 0; border-bottom: 0; }
.journey__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-600); }
.journey__time--strong { color: var(--navy-900); }
.journey__text { font-size: 15px; color: var(--ink-900); }
.journey__text--strong { font-weight: 600; color: var(--navy-900); }
.journey__side { font-size: 13px; color: var(--ink-600); }
.journey__value { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--navy-900); }
.journey__label { font-size: 13px; color: var(--ink-600); }
.journey__credit { font-size: 14px; color: var(--ink-900); }

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  padding: 1px 7px;
  font-size: 12px;
  color: var(--navy-700);
}

.depth__body { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: stretch; }
.wire { border: 1px solid var(--line); border-radius: var(--r-bedien); overflow: hidden; display: flex; flex-direction: column; }
.wire__head { height: 52px; background: var(--navy-100); }
.wire__band { height: 64px; background: var(--navy-50); border-top: 1px solid var(--line); }
.wire__band--short { height: 56px; }
.wire__stop { border-top: 2px solid var(--caution); padding: 8px 12px; background: var(--white); font-size: 12px; color: var(--caution-text); }
.wire__form { height: 72px; background: var(--navy-50); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-600); }
.depth__stats { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.depth__num { font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--navy-900); }
.depth__num--gap { color: var(--caution); }
.depth__num--estimated { color: var(--ink-600); }
.depth__label { margin-top: 6px; font-size: 13px; color: var(--ink-600); }

.table-scroll { overflow-x: auto; }
.clients-table { width: 100%; font-size: 14px; }
.clients-table th {
  text-align: left;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-600);
  border-bottom: 1px solid var(--line);
}
.clients-table th.num { text-align: right; padding: 10px 12px; }
.clients-table th.num--last { padding-right: 20px; }
.clients-table td { padding: 12px 20px; color: var(--ink-900); border-bottom: 1px solid var(--line); }
.clients-table td.num { padding: 14px 12px; text-align: right; font-family: var(--font-mono); }
.clients-table td.num--last { padding-right: 20px; }
.clients-table tr:last-child td { border-bottom: 0; }
.clients-table .col-band { background: var(--navy-50); }
.clients-table .num--counted { color: var(--navy-900); }
.clients-table .num--claimed { color: var(--ink-600); }
.clients-table .num--gap { color: var(--caution-text); }
.client__state { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12px; color: var(--ink-600); }

/* ── Drie stappen ──────────────────────────────────────────────────────── */

.steps__title { max-width: 20em; }
.steps__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-kaart); padding: 28px; }
.step__num { font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--navy-700); }
.step__title { margin-top: 16px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--navy-900); }
.step__text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.steps__note { margin-top: 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-600); }
.steps__cta { margin-top: 36px; justify-content: center; }

/* ── Prijzen ───────────────────────────────────────────────────────────── */

.pricing-head {
  padding-top: 112px;
  padding-bottom: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pricing__title {
  max-width: 18em;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy-900);
}
.pricing__sub { margin-top: 18px; font-size: 16px; color: var(--ink-600); }

.stepper {
  margin-top: -40px;
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  background: var(--navy-50);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.stepper__label { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.stepper__control { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-bedien); background: var(--white); overflow: hidden; }
.stepper__btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--navy-700);
  cursor: pointer;
  font-family: inherit;
}
.stepper__btn:focus-visible { outline-offset: -2px; }
.stepper__count { min-width: 44px; text-align: center; font-size: 16px; font-weight: 600; color: var(--navy-900); }
.stepper__advice { font-size: 15px; color: var(--ink-600); }

.plans {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px;
  align-items: stretch;
}
/* Met minimum 200 (handoff) geeft auto-fit tussen 688 en 907px drie kaarten
   plus Custom alleen op een tweede rij. Daar twee naast twee. */
@media (min-width: 688px) and (max-width: 907px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan { padding: 26px 22px; }
.plan__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__name { font-size: 16px; font-weight: 600; color: var(--navy-900); }
.plan__rec { font-size: 13px; color: var(--navy-700); }
.plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__amount { font-size: 36px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--navy-900); }
.plan__per { font-size: 14px; color: var(--ink-600); }
.plan__vat { margin-top: 6px; font-size: 13px; color: var(--ink-600); }
.plan__events { margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan__events-label { font-size: 13px; color: var(--ink-600); }
.plan__events-num { margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--navy-900); }
.plan__events-over { margin-top: 4px; font-size: 13px; color: var(--ink-600); }
.plan__list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.plan__list .point { font-size: 15px; line-height: 1.5; color: var(--ink-900); }
.plan__cta { margin-top: 26px; }
.plan__note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink-600); }
.pricing__note { margin-top: 22px; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ink-600); }

/* ── Vragen ────────────────────────────────────────────────────────────── */

.faq { max-width: 760px; }
.faq__title {
  text-align: center;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.faq__list { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-kaart); background: var(--white); overflow: hidden; }
.faq__list details + details { border-top: 1px solid var(--line); }
.faq__q {
  padding: 20px 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-900);
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.faq__q:focus-visible { outline-offset: -2px; }
.faq__q-text { flex: 1 1 auto; min-width: 0; }
.faq__sign { font-family: var(--font-mono); font-size: 17px; font-weight: 400; color: var(--ink-600); }
.faq__sign::after { content: "+"; }
details[open] .faq__sign::after { content: "\2013"; }
.faq__a { padding: 0 22px 20px 22px; font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.faq__cta { margin-top: 28px; justify-content: center; }

/* ── Donkere band ──────────────────────────────────────────────────────── */

.dark-band { background: var(--navy-900); }
.dark-band__inner {
  padding-top: 112px;
  padding-bottom: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dark-band__title {
  max-width: 18em;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--white);
}
.dark-band__sub { margin-top: 20px; max-width: 32em; font-size: 18px; line-height: 1.5; color: var(--navy-100); }
.dark-band__cta { margin-top: 36px; }

/* ── Voet ──────────────────────────────────────────────────────────────── */

.site-footer { background: var(--white); border-top: 1px solid var(--line); }
.site-footer__inner {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.site-footer__brand { min-width: 0; max-width: 30em; }
.site-footer__text { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.site-footer__links { display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 15px; }

/* ── Formulieren (start, call) en tekstpagina's (bedankt, privacy) ─────── */

.page-narrow { max-width: 640px; }
.page-narrow--top { padding-top: 96px; padding-bottom: 128px; }
.page__title {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--navy-900);
}
.page__lead { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-600); }
.page__text { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-900); }
.page__text + .page__text { margin-top: 14px; }
.page__h2 { margin-top: 40px; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--navy-900); }
.page__links { margin-top: 28px; display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 16px; }

.form { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.form-fout {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--caution);
  border-radius: var(--r-bedien);
  background: var(--white);
  font-size: 15px;
  color: var(--ink-900);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--ink-900); }
.field__hint { font-size: 13px; color: var(--ink-600); }
.field__input {
  width: 100%;
  border: 1px solid var(--line-input);
  border-radius: var(--r-bedien);
  background: var(--white);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-900);
}
.field__input:focus { outline: 2px solid var(--navy-500); outline-offset: 1px; border-color: var(--navy-500); }
.field__input--mono { font-family: var(--font-mono); font-size: 16px; }
.field__input--number { max-width: 120px; }
textarea.field__input { min-height: 120px; resize: vertical; }
.form__actions { margin-top: 8px; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.form__note { font-size: 14px; color: var(--ink-600); }

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Smal scherm ───────────────────────────────────────────────────────── */
/* De kop is onder 720px niet meer plakkend: drie rijen (merk, navigatie,
   knoppen) zouden een kwart van een telefoonscherm vast innemen. De knoppen
   mogen omslaan, en onder 480px valt Set up call uit de kop; hij staat in
   de hero al. De drie getallen van de feed krijgen elk minstens 120px en
   de gebeurtenis mag over twee regels, anders is de reden (de kern van de
   hero) op een telefoon afgekapt. */

@media (max-width: 720px) {
  .site-header { position: static; }
  .site-header__actions { flex-wrap: wrap; white-space: normal; }
  [id] { scroll-margin-top: 16px; }
}
@media (max-width: 480px) {
  .site-header .btn--secondary { display: none; }
  .feed__stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .feed__event { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ── Beweging uit als de bezoeker daarom vraagt ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot--pulse { animation: none; }
  .feed__row--in { animation: none; }
}

/* ── forms ── */
/* De kaart van /start, /call en /bedankt en de leespagina /privacy. Bouwt
   op het blok Formulieren hierboven; die regels blijven ongewijzigd, dit
   blok zet er alleen de kaartmaten en de afwijkende maten overheen. */

.form-page { padding-top: 64px; padding-bottom: 128px; }

.form-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  padding: 32px;
}
.form-card__title {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.form-card__lead { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-600); }
.form-card__text { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-900); }
.form-card__links { margin-top: 24px; display: flex; gap: 12px 24px; flex-wrap: wrap; font-size: 16px; }
.form-card__note { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--ink-600); }

.form-card .form { margin-top: 28px; }
.form-card .form-fout { margin-top: 24px; color: var(--caution-text); font-weight: 500; }
.form-card .form-fout:not([hidden]) + .form { margin-top: 16px; }
.form-card .field__label { font-size: 15px; color: var(--ink-600); }
.form-card .field__input { min-height: 44px; padding: 10px 12px; line-height: 22px; }
.form-card textarea.field__input { min-height: 120px; }
.form-card .form__actions { margin-top: 6px; }

.page-read { max-width: 720px; }
.page__list { margin-top: 12px; padding-left: 22px; list-style: disc; font-size: 16px; line-height: 1.6; color: var(--ink-900); }
.page__list li + li { margin-top: 4px; }
.placeholder { font-family: var(--font-mono); font-size: 15px; color: var(--caution-text); }

@media (max-width: 600px) {
  .form-page { padding-top: 32px; padding-bottom: 96px; }
  .form-card { padding: 24px 20px; }
}

/* ── chatgpt-tracking ── */
/* Alleen wat chatgpt-tracking.html extra nodig heeft boven op de klassen
   hierboven: de smallere herokop, de bron in navy in de Live events-lijst,
   het middelste getal in navy-700, twee balkbreedtes en de Sources-tabel. */

.hero__title--chatgpt { max-width: 15em; }

.feed__source--gpt { color: var(--navy-700); font-weight: 500; }
.stat__value--sent { color: var(--navy-700); }

.bar__fill--three-quarters { width: 75%; }
.bar__fill--sliver { width: 1%; }

.sources-table { width: 100%; font-size: 14px; }
.sources-table th {
  text-align: left;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-600);
  border-bottom: 1px solid var(--line);
}
.sources-table th.num { text-align: right; padding: 10px 12px; }
.sources-table th.num--last { padding-right: 20px; }
.sources-table td { padding: 13px 20px; color: var(--ink-900); border-bottom: 1px solid var(--line); }
.sources-table td.num { padding: 13px 12px; text-align: right; font-family: var(--font-mono); }
.sources-table td.num--last { padding-right: 20px; }
.sources-table tr:last-child td { border-bottom: 0; }
.sources-table .col-band { background: var(--navy-50); }
.sources-table td.num--value { color: var(--navy-900); }
.sources-table td.num--share { color: var(--ink-600); }
.sources-table td.num--gap { color: var(--caution-text); }
.sources-table .num--strong { font-weight: 500; }
.sources-table .row--chatgpt { background: var(--navy-50); }
.sources-table .row--chatgpt td:first-child { font-weight: 600; color: var(--navy-900); }
.sources-table .tag { margin-left: 6px; padding: 1px 6px; font-size: 11px; }
.tag--referred { color: var(--ink-600); font-weight: 400; }

/* ── eigen meting: consentbanner ─────────────────────────────────────────── */
.consent { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 30; margin: 0 auto; max-width: 560px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.consent__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-900); }
.consent__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--small { padding: 9px 16px; font-size: 15px; }
.btn--secondary.btn--small { padding: 8px 15px; }
@media (max-width: 480px) { .consent { left: 12px; right: 12px; bottom: 12px; } }