/* ==========================================================================
   eaachecker.nl · gedeeld design system (sinds 2026-10-09)

   Eén stylesheet voor de hele publieke site. Geen build-stap: dit bestand is
   de bron én de uitvoer. Pagina-eigen stijl hoort in een klein <style>-blok
   op die pagina, nooit in een kopie van wat hier al staat.

   Richting "meetinstrument":
   - Eén letter: Geist (tekst en koppen), Geist Mono alleen voor gemeten data
     zoals URL's, selectors en codefragmenten. Geen decoratieve mono-eyebrows.
   - Navy is de kleur van tekst en vertrouwen. Sienna (--action) is ALLEEN de
     actiekleur: knoppen, de kicker boven een kop, links in lopende tekst.
     Geen cursieve accentwoorden in koppen.
   - Bewijs boven sfeer: echte meetwaarden, geen verlopen, geen grain.

   Contrast nagerekend (WCAG 1.4.3):
   --text  #33445A op #FFFFFF 10,1:1 · op #F6F8FB 9,6:1
   --muted #5D6C7E op #FFFFFF 5,4:1  · op #F6F8FB 5,1:1 · op #EDF1F7 4,7:1
   --action #A8481A op #FFFFFF 5,8:1 · op #F6F8FB 5,5:1 · wit op --action 5,8:1
   #C9D4E2 op --ink 10,2:1 · #F2B48F op --ink 8,3:1
   ========================================================================== */

:root {
  --ink: #0F2540;
  --ink-2: #1E3A5C;
  --text: #33445A;
  --muted: #5D6C7E;
  --line: #DCE3EC;
  --line-2: #C9D3DF;
  --bg: #F6F8FB;
  --paper: #FFFFFF;
  --soft: #EDF1F7;
  --action: #A8481A;
  --action-hover: #8C3B14;
  --action-tint: #FBEFE8;
  --steel: #2D5A9B;
  --ok: #15803D;
  --ok-ink: #0F5B2C;
  --ok-tint: #E8F5EC;
  --warn: #B45309;
  --warn-ink: #8A4006;
  --warn-tint: #FDF2E3;
  --danger: #B91C1C;
  --danger-ink: #9B1717;
  --danger-tint: #FCEBEB;
  --on-dark: #C9D4E2;
  --on-dark-accent: #F2B48F;

  --r-xl: 20px;
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(15,37,64,.05), 0 12px 32px -12px rgba(15,37,64,.16);
  --shadow-lg: 0 2px 4px rgba(15,37,64,.04), 0 30px 60px -20px rgba(15,37,64,.28);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 650; letter-spacing: -.025em; line-height: 1.12; }
h1 { font-size: clamp(36px, 5.6vw, 60px); letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -.03em; }
h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.3; }
h4 { font-size: 17px; letter-spacing: -.01em; line-height: 1.35; }
/* Lange Nederlandse samenstellingen (toegankelijkheidsverklaring) mogen een
   smal scherm nooit opzij duwen: breken mag, afbreken alleen op mobiel. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 480px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }
p { margin: 0; }
strong, b { font-weight: 600; color: var(--ink); }
a { color: inherit; }
code, kbd, samp { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 4px; }
.section-dark :focus-visible, .cta-band :focus-visible { outline-color: #9CC0F0; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.link { color: var(--action); font-weight: 550; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.tiny { font-size: 13px; }
.center { text-align: center; }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap, .wrap-narrow { padding: 0 32px; } }

.section { padding: 72px 0; }
@media (min-width: 960px) { .section { padding: 104px 0; } }
.section-tight { padding: 56px 0; }
@media (min-width: 960px) { .section-tight { padding: 72px 0; } }
.section-white { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-soft { background: var(--soft); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark h2, .section-dark h3, .section-dark h4, .section-dark strong { color: #fff; }
.section-dark .kicker { color: var(--on-dark-accent); }
.section-dark .sec-lead { color: var(--on-dark); }
.section-dark .link { color: var(--on-dark-accent); }

.kicker { display: inline-block; font-weight: 600; font-size: 14.5px; color: var(--action); margin-bottom: 14px; letter-spacing: 0; }
.sec-head { margin-bottom: 44px; max-width: 760px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-bottom: 16px; }
.sec-lead { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; color: var(--text); max-width: 40em; }
.sec-lead + .sec-lead { margin-top: 14px; }

.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 40px; }
.split > *, .grid > *, .hero-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .split-wide-left { grid-template-columns: 1.2fr .8fr; }
  .split-wide-right { grid-template-columns: .85fr 1.15fr; }
  .split.top { align-items: start; }
}
.stack > * + * { margin-top: 16px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* .96 en niet minder: boven de donkere sectie mengt de vervaging de navy
     erdoor. Bij .88 zakte het logo daar naar 4,3:1 (sienna) en 4,0:1 (.nl). */
  background: rgba(246,248,251,.96);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled, .site-header.menu-open { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.logo b { color: var(--action); font-weight: 650; }
.logo small { font: 500 11px var(--mono); color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.nav { display: none; gap: 26px; font-size: 15px; }
.nav a { color: var(--text); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 20px 20px; }
.mobile-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--soft); color: var(--ink); text-decoration: none; font-weight: 550; font-size: 17px; }
.mobile-menu .btn { margin-top: 16px; width: 100%; }
@media (min-width: 960px) {
  .nav { display: flex; }
  .menu-btn, .mobile-menu { display: none !important; }
}

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 16px/1.2 var(--sans); text-decoration: none; text-align: center;
  transition: background-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn-action { background: var(--action); color: #fff; }
.btn-action:hover { background: var(--action-hover); }
.btn-action:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0A1A30; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--soft); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- formulieren ---------- */
.flabel { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 8px; }
.flabel .opt { font-weight: 400; color: var(--muted); }
.field, select.field, textarea.field {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff;
  font: 400 16px var(--sans); color: var(--ink);
}
textarea.field { padding: 12px 14px; min-height: 120px; line-height: 1.5; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235D6C7E' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field::placeholder { color: #7A8797; }
.field:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(45,90,155,.18); }
.hint { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex-shrink: 0; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain legend { padding: 0; }

/* segmentkeuze (radio's als kaarten) */
.seg { display: grid; gap: 8px; }
@media (min-width: 560px) { .seg { grid-template-columns: repeat(3, 1fr); } }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff;
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.seg label small { font-weight: 400; color: var(--muted); font-size: 13px; }
.seg label:hover { border-color: var(--muted); }
.seg input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #F8FAFD; }
.seg input:focus-visible + label { outline: 3px solid var(--steel); outline-offset: 2px; }

/* het scanformulier: één regel met webadres en knop */
.scan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; box-shadow: var(--shadow); max-width: 600px; }
.scan-row { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 560px) { .scan-row { flex-direction: row; } }
.urlbox { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 56px; border-radius: 10px; background: var(--bg); border: 1.5px solid transparent; cursor: text; }
.urlbox:focus-within { border-color: var(--steel); background: #fff; box-shadow: 0 0 0 3px rgba(45,90,155,.15); }
.urlbox svg { flex-shrink: 0; color: var(--muted); width: 20px; height: 20px; }
.urlbox input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; outline: none; font: 500 17px var(--sans); color: var(--ink); }
.urlbox input::placeholder { color: #7A8797; }
.scan-row .btn { min-height: 56px; }
.scan-step2 { padding: 18px 10px 10px; display: grid; gap: 16px; }
.scan-step2 legend { font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 8px; }
.scan-note { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-left: 4px; font-size: 14px; color: var(--muted); }
.scan-note span { display: inline-flex; align-items: center; gap: 6px; }
.scan-note svg { color: var(--ok); width: 16px; height: 16px; }
.scan-foot { font-size: 14px; color: var(--muted); margin-top: 10px; padding-left: 4px; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 64px; }
@media (min-width: 960px) { .hero { padding: 72px 0 96px; } }
.hero-grid { display: grid; gap: 44px; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items: center; } }
.hero h1 { margin-bottom: 20px; }
.hero h1 .soft { color: var(--muted); }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; color: var(--text); max-width: 34em; margin-bottom: 28px; }
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 14px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 10px;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint); flex-shrink: 0; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text); }
.trust a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.trust a:hover { text-decoration-color: var(--ink); }

/* paginakop voor subpagina's */
.page-hero { padding: 40px 0 48px; }
@media (min-width: 960px) { .page-hero { padding: 64px 0 64px; } }
.page-hero h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 18px; max-width: 18em; }
.page-hero .lead { max-width: 40em; }
.breadcrumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.meta-line { font-size: 14px; color: var(--muted); margin-top: 18px; }

/* ---------- kaarten ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card-lg { border-radius: var(--r-xl); padding: 28px; }
.card-shadow { box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p + p { margin-top: 10px; }
.card-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.card-link:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.card-link .go { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--action); font-size: 15px; }
/* Kaart naar een verwante pagina: titel en een korte regel eronder. */
.related .rt { font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.35; }
.related .rd { font-size: 15px; color: var(--muted); }
.section-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: var(--on-dark); }

.icon-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--ink); margin-bottom: 14px; }
.icon-badge svg { width: 20px; height: 20px; }
.section-dark .icon-badge { background: rgba(255,255,255,.08); color: #fff; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; line-height: 1.5; }
.ticks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px;
  background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ticks li > span, .ticks li > div { min-width: 0; }
.ticks .sub { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.ticks.no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

.steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.step::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 650; font-size: 15px; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { font-size: 15.5px; }

/* cijfers met bron */
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
/* Drie feiten gaan meteen naar drie kolommen: in twee kolommen bleef er een
   leeg vak in lijnkleur over (de achtergrond van .facts). */
@media (min-width: 720px) { .facts-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .facts-4 { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--paper); padding: 24px; }
.fact b { display: block; font-size: clamp(30px, 3.4vw, 38px); font-weight: 650; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.fact p { font-size: 15px; line-height: 1.5; }
.fact cite { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 10px; }

/* staafgrafiek met aandelen (onderzoek, homepage). Het percentage staat altijd
   als tekst naast de staaf; de staaf zelf is grafisch.
   --ink-2 op --soft 10,9:1 · --action op --soft 5,1:1 (grens 3:1). */
.chart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin: 24px 0 0; display: grid; gap: 18px; max-width: 900px; }
.chart-title { font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.4; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: 6px 16px; align-items: center; }
@media (min-width: 720px) { .bar-row { grid-template-columns: 150px minmax(0, 1fr) 64px; grid-template-areas: "label track val"; } }
.bar-label { grid-area: label; font: 500 14.5px var(--mono); color: var(--ink); min-width: 0; }
.bar-track { grid-area: track; display: block; height: 14px; border-radius: 7px; background: var(--soft); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 7px; background: var(--ink-2); }
.bar-row:first-of-type .bar-fill { background: var(--action); }
.bar-val { grid-area: val; font-weight: 650; font-size: 17px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
/* Gestapeld: label en waarde boven de staaf, ook op desktop. Voor labels in
   gewone taal, die niet in een kolom van 150px passen. */
.chart-stacked .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: 8px 16px; }
.chart-stacked .bar-label { font: 550 15px/1.35 var(--sans); }
.chart-stacked .bar-track { height: 10px; }

/* Tijdlijn: datum boven, kop, één regel. Horizontaal vanaf 860px, met een
   doorlopende lijn door de bolletjes; daaronder een verticale lijn links.
   Het laatste punt (.is-now) draagt de actiekleur. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 28px 30px; min-width: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.timeline li::after { content: ""; position: absolute; left: 6.5px; top: 22px; bottom: 0; border-left: 1.5px dashed var(--line-2); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline .is-now::before { border-color: var(--action); background: var(--action); box-shadow: 0 0 0 5px var(--action-tint); }
.tl-when { display: block; font-size: 14px; font-weight: 600; color: var(--action); margin-bottom: 4px; }
.timeline h3 { font-size: 19px; margin-bottom: 4px; }
.timeline p { font-size: 15.5px; line-height: 1.5; max-width: 22em; }
.tl-num { display: block; font-size: clamp(40px, 5vw, 56px); font-weight: 650; letter-spacing: -.04em; line-height: 1; color: var(--ink); margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
@media (min-width: 860px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .timeline li { padding: 34px 0 0; }
  .timeline li::before { top: 0; }
  .timeline li::after { left: 22px; right: -32px; top: 7px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--line-2); }
}

/* Kerncijfers op één regel: label klein, getal groot. */
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 340px; margin: 0 0 24px; }
.mini-stats > div { min-width: 0; padding: 12px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.mini-stats dt { font-size: 13.5px; color: var(--muted); }
.mini-stats dd { margin: 2px 0 0; font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Een voorwaarde in beeld: twee blokjes met "én" ertussen, plus een actie. */
.micro { display: grid; gap: 20px; margin-top: 20px; padding: 22px; border-radius: var(--r-lg); background: var(--soft); }
@media (min-width: 900px) { .micro { padding: 28px 32px; } .micro:has(> .micro-cta) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; } }
.micro > * { min-width: 0; }
.micro-title { font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.micro-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.micro-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.micro-chip b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.micro-and { font-weight: 650; color: var(--action); }
.micro-cta p { margin-bottom: 14px; }

/* opvallende notitie */
.callout { border-radius: var(--r); padding: 18px 20px; background: var(--soft); border-left: 4px solid var(--ink); font-size: 16px; }
.callout-action { background: var(--action-tint); border-left-color: var(--action); }
.callout-ok { background: var(--ok-tint); border-left-color: var(--ok); color: var(--ok-ink); }
.callout-warn { background: var(--warn-tint); border-left-color: var(--warn); }
.callout p + p { margin-top: 8px; }

.reassure { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.reassure svg { flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; color: var(--action); }
.section-dark .reassure svg { color: var(--on-dark-accent); }

.guarantee { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--ok-tint); color: var(--ok-ink); font-size: 15px; line-height: 1.45; }
.guarantee svg { flex-shrink: 0; width: 22px; height: 22px; }
.guarantee strong { color: var(--ok-ink); }

/* ---------- uitklappers ---------- */
.more { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.more > summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 20px; position: relative; color: var(--ink); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background: var(--soft) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230F2540' stroke-width='1.6'/%3E%3C/svg%3E");
}
.more[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%230F2540' stroke-width='1.6'/%3E%3C/svg%3E"); }
.more .more-title { display: block; font-weight: 600; font-size: 16.5px; }
.more .more-hint { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.more .more-body { padding: 4px 20px 22px; }
.section-dark .more { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section-dark .more > summary { color: #fff; }
.section-dark .more .more-hint { color: var(--on-dark); }
.section-dark .more > summary::after { background-color: rgba(255,255,255,.12); filter: invert(1); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3, .faq summary .q { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ink); margin: 0; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 24px; font-weight: 400; color: var(--muted); line-height: 1.2; }
.faq details[open] > summary::after { content: "\2212"; }
.faq details > p, .faq details > div { padding: 0 0 18px; max-width: 44em; }
.faq details > p + p { margin-top: -6px; }
.faq .faq-more > summary { font-weight: 600; color: var(--action); padding: 20px 44px 20px 0; }
.faq .faq-more > summary::after { color: var(--action); }
.faq .faq-more .faq-more-items details:last-child { border-bottom: 0; }

/* ---------- tabellen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.table caption { text-align: left; padding: 14px 18px 0; font-size: 14px; color: var(--muted); caption-side: top; }
.table th, .table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--soft); }
.table thead th { font-size: 14px; font-weight: 600; color: var(--ink); background: #FAFBFD; border-bottom: 1px solid var(--line); }
.table tbody th { font-weight: 550; color: var(--ink); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .c { text-align: center; }
.table .hl { background: #FBF6F2; }
.table thead .hl { background: var(--action-tint); color: var(--action-hover); }
.table .yes, .table .no { font-weight: 700; }
.table .yes { color: var(--ok); }
.table .no { color: var(--muted); }

/* ---------- lopende tekst (gidsen, juridische pagina's) ---------- */
.prose { font-size: 17.5px; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 56px; margin-bottom: -2px; scroll-margin-top: 88px; }
.prose h3 { font-size: 21px; margin-top: 36px; margin-bottom: -6px; scroll-margin-top: 88px; }
.prose h4 { margin-top: 28px; margin-bottom: -8px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--muted); }
.prose a:not(.btn) { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover { color: var(--action-hover); text-decoration-thickness: 2px; }
.prose blockquote { margin: 0; padding: 16px 20px; border-left: 4px solid var(--line-2); background: var(--paper); border-radius: 0 var(--r) var(--r) 0; }
.prose code { background: var(--soft); padding: 2px 6px; border-radius: 5px; }
.prose pre { font: 400 13.5px/1.6 var(--mono); background: var(--ink); color: #E6ECF4; padding: 16px 18px; border-radius: var(--r); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose .table-wrap { margin-top: 24px; }
.prose figure { margin: 24px 0; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Lijst met per regel een kop en een getal: fouten met hun aandeel, principes
   met hun aantal criteria. Leest op 320px beter dan een tabel van drie of vier
   kolommen die opzij scrolt. Op een <ol>/<ul> met role="list", omdat Safari
   een lijst zonder opsommingsteken anders niet meer als lijst voorleest. */
.rowlist, .prose .rowlist { list-style: none; margin-top: 20px; padding: 0; border-top: 1px solid var(--line); }
.rowlist > li, .prose .rowlist > li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rowlist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 4px; }
.rowlist-val { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

.article-layout { display: grid; gap: 40px; }
@media (min-width: 1080px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; } }
.toc { font-size: 14.5px; }
@media (min-width: 1080px) { .toc { position: sticky; top: 88px; } }
.toc p { font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; }
.toc li a:hover { color: var(--ink); border-left-color: var(--ink); }

/* ---------- pillen en meetlabels ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pill-neutral { background: var(--soft); color: var(--ink-2); }
.pill-ok { background: var(--ok-tint); color: var(--ok-ink); }
.pill-warn { background: var(--warn-tint); color: var(--warn-ink); }
.pill-danger { background: var(--danger-tint); color: var(--danger-ink); }
.severity-kritiek { background: #FAD9D9; color: #8A1414; }
.severity-ernstig { background: var(--danger-tint); color: var(--danger-ink); }
.severity-matig   { background: var(--warn-tint); color: var(--warn-ink); }
.severity-laag    { background: var(--soft); color: #44546A; }
.check-manual, .check-advies { background: #F1F4F8; color: #44546A; border: 1px dashed #AEBBCB; }
.risk-hoog   { background: var(--danger-tint); color: var(--danger-ink); }
.risk-middel { background: var(--warn-tint); color: var(--warn-ink); }
.risk-laag   { background: var(--ok-tint); color: var(--ok-ink); }
.source-mark { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 550; color: var(--muted); }
.source-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.source-mark.is-tested { color: var(--action); }

/* ---------- productkaart (uitslag in miniatuur) ---------- */
.report-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; margin: 0; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.rc-url { font: 500 14px var(--mono); color: var(--ink); }
.rc-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.mini-ring { --p: 57; --c: var(--warn); width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--soft) 0); }
.mini-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.mini-ring b { position: relative; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.layers { padding: 16px 22px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
.layer { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 14.5px; }
.layer b { font: 600 15px var(--mono); }
.bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--muted); }
.bar.hl i { background: var(--action); }
.finds { list-style: none; margin: 0; padding: 4px 0; }
.finds li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 13px 22px; border-top: 1px solid var(--soft); }
.finds li:first-child { border-top: 0; }
.finds .pill { margin-top: 1px; height: fit-content; }
.ftitle { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.35; }
.fmeta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.fmeta .tag { color: var(--action); font-weight: 600; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: #FBFCFE; font-size: 13.5px; color: var(--muted); }
.rc-foot a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.rc-foot a:hover { color: var(--action); text-decoration: underline; }
.card-cap { font-size: 13.5px; color: var(--muted); margin-top: 12px; text-align: center; }

/* bevinding zoals in het rapport */
.doc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.doc-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); background: #FBFCFE; font-size: 13.5px; color: var(--muted); }
.doc-body { padding: 22px 20px; display: grid; gap: 16px; }
.doc-body h3 { font-size: 18.5px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-body p { font-size: 15.5px; line-height: 1.6; }
.doc-body .lbl { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.code-pair { display: grid; gap: 8px; }
.code-pair pre { margin: 0; padding: 12px 14px; border-radius: 10px; font: 400 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.code-pair small { display: block; font: 600 12px var(--sans); margin-bottom: 4px; }
.code-pair .before { background: #FDF1F1; color: #5E1515; border: 1px solid #F3D5D5; }
.code-pair .after { background: #EEF7F1; color: #11402A; border: 1px solid #CFE7D7; }

/* tests in de donkere sectie */
.test { display: flex; flex-direction: column; gap: 10px; }
.test .vis { height: 96px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; margin-bottom: 8px; }
.test h3 { font-size: 18.5px; }
.test p { font-size: 15.5px; line-height: 1.55; }
.test .cost { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; color: #fff; }
.wcag-tags { font: 500 12.5px var(--mono); color: var(--muted); margin-top: 8px; }
.section-dark .wcag-tags { color: #9FB0C5; }
.vs-bars { padding: 24px; }
.vs-bars .layer { color: var(--on-dark); }
.vs-bars .layer b { color: #fff; font-size: 20px; }
.vs-bars .bar { background: rgba(255,255,255,.1); height: 10px; }
.vs-bars .bar i { background: #8EA3BD; }
.vs-bars .bar.hl i { background: #E8875A; }

/* ---------- prijskaarten ---------- */
.plans { display: grid; gap: 20px; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; position: relative; }
.plan-main { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }
.plan-badge { position: absolute; top: -13px; left: 26px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 20px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 4px; }
.price b { font-size: 46px; font-weight: 650; letter-spacing: -.035em; line-height: 1; }
.price span { color: var(--muted); font-size: 15px; }
.price-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }
.plan .ticks { margin-bottom: 26px; }
.plan > .btn { margin-top: auto; }
.plan-foot { font-size: 14px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; }
.plan .guarantee { margin-top: 18px; }

/* ---------- oprichter ---------- */
.founder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow); }
.founder img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; }
.founder h3 { margin-bottom: 2px; }
.founder .role { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.founder p + p { margin-top: 12px; }
.founder .co { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }

.qa { border-top: 1px solid var(--line); }
.qa > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.qa .q { font-weight: 600; color: var(--ink); font-size: 18px; letter-spacing: -.01em; margin-bottom: 6px; }
.qa .a-lead { font-weight: 550; color: var(--ink); margin-bottom: 4px; }

/* ---------- slot-CTA ---------- */
.cta-band { background: var(--ink); color: var(--on-dark); border-radius: 24px; padding: 48px 24px; text-align: center; }
@media (min-width: 768px) { .cta-band { padding: 64px 48px; } }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band .sec-lead { color: var(--on-dark); margin: 0 auto 28px; }
.cta-band .scan { margin: 0 auto; text-align: left; }
.cta-band .scan-note { justify-content: center; color: #AEBBCC; }
.cta-band .scan-note svg { color: #7DD39B; }
.cta-band .link { color: var(--on-dark-accent); }
.cta-band .kicker { color: var(--on-dark-accent); }

/* ---------- footer ---------- */
.site-footer { padding: 56px 0 36px; font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--line); background: var(--soft); margin-top: 0; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: 14.5px; letter-spacing: 0; margin: 0 0 12px; color: var(--ink); font-weight: 650; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer li a { display: inline-block; padding: 4px 0; color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .about { margin-top: 12px; max-width: 24em; line-height: 1.55; }
/* Voet met zes thematische linkkolommen (sinds 24-10-2026). Op desktop staat
   het merkblok links over twee rijen, met drie kolommen van twee rijen ernaast.
   Elke kolom blijft zo breed genoeg voor "Toegankelijkheidsverklaring" zonder
   dat het woord over de rand loopt. Een pagina met de oude vierkoloms voet
   (zonder .foot-map) houdt de regels hierboven. */
.foot-map { gap: 36px 32px; }
@media (min-width: 560px) {
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-map .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .foot-map { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 32px 32px; }
  .foot-map .foot-brand { grid-column: 1; grid-row: 1 / span 2; }
}
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal a { color: var(--muted); }
.legal a:hover { color: var(--ink); }

/* ---------- vaste knop onderaan (mobiel) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -10px rgba(15,37,64,.18);
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.sticky-cta.is-on { transform: none; visibility: visible; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 960px) { .sticky-cta.mobile-only { display: none; } }
/* Een anker of Tab-stop onderaan mag niet achter de vaste knop verdwijnen
   (2.4.11). Stond eerst per pagina; nu voor elke pagina met de knop. */
@media (max-width: 959px) { html:has(.sticky-cta.mobile-only) { scroll-padding-bottom: 104px; } }
.sticky-convert .inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sticky-convert .score-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 14px; flex-shrink: 0; }
.sticky-convert .label { font-size: 14.5px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.sticky-convert .label span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.sticky-convert .btn { width: auto; min-height: 46px; }

/* ---------- dialoog ---------- */
dialog.sheet { padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); color: var(--text); width: min(92vw, 620px); max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: var(--shadow-lg); }
dialog.sheet::backdrop { background: rgba(15,37,64,.55); }
.sheet-body { padding: 24px; }
@media (min-width: 640px) { .sheet-body { padding: 32px; } }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.sheet-head h2 { font-size: 26px; }
.close-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.close-btn:hover { background: var(--soft); }
.form-error { color: var(--danger); font-size: 14.5px; line-height: 1.5; margin-top: 16px; }

/* ---------- scanpaneel (wachten op de uitslag) ---------- */
.scan-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.scan-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
.scan-panel-header .state { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.scan-panel-body { padding: 24px 20px; }
@media (min-width: 640px) { .scan-panel-body { padding: 32px 30px 28px; } }
.scan-panel-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--soft); font-size: 13px; color: var(--muted); }
.scan-target-label { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.scan-target { font: 500 clamp(18px, 2.4vw, 24px) var(--mono); color: var(--ink); word-break: break-all; margin-bottom: 26px; }
.scan-step-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.scan-step-row strong { color: var(--ink); font-weight: 600; }
.scan-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--action); animation: scan-pulse 1.6s ease-out infinite; }
@keyframes scan-pulse { 0% { box-shadow: 0 0 0 0 rgba(168,72,26,.55); } 80% { box-shadow: 0 0 0 14px rgba(168,72,26,0); } 100% { box-shadow: 0 0 0 0 rgba(168,72,26,0); } }
.scan-progress-segments { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.scan-segment { height: 6px; background: var(--line); border-radius: 3px; position: relative; overflow: hidden; transition: background .4s ease; }
.scan-segment.done { background: var(--ink); }
.scan-segment.active::after { content: ""; position: absolute; inset: 0; background: var(--action); transform-origin: left; animation: scan-segment-fill var(--seg-duration, 4s) linear forwards; }
@keyframes scan-segment-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* De laatste stap komt nooit uit zichzelf vol: zie startLoadingProgress(). */
.scan-segment.tail::after { animation-name: scan-segment-tail; animation-timing-function: cubic-bezier(.25,.5,.3,1); }
@keyframes scan-segment-tail { from { transform: scaleX(0); } to { transform: scaleX(.94); } }
.scan-step-note { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 62ch; }
.scan-finishing-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--text); }
.scan-finishing-dots { display: inline-flex; gap: 4px; flex-shrink: 0; }
.scan-finishing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--action); animation: scan-dot 1.4s ease-in-out infinite; }
.scan-finishing-dots i:nth-child(2) { animation-delay: .2s; }
.scan-finishing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes scan-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.scan-insights-label { font-size: 14px; color: var(--muted); margin: 28px 0 10px; font-weight: 550; }
.scan-insights { position: relative; display: grid; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px 46px; }
@media (min-width: 640px) { .scan-insights { padding: 26px 28px 46px; } }
.scan-insight { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; }
.scan-insight.active { opacity: 1; transform: none; }
.scan-insight .tag { font-size: 13px; font-weight: 600; color: var(--action); margin-bottom: 8px; }
.scan-insight .body { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.scan-insight .body em { font-style: normal; font-weight: 600; color: var(--ink); }
.scan-insight-dots { position: absolute; bottom: 18px; right: 22px; display: flex; gap: 5px; }
.scan-insight-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(15,37,64,.18); transition: background .3s, transform .3s; }
.scan-insight-dots span.active { background: var(--action); transform: scale(1.3); }
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r); padding: 12px 14px; font-size: 14.5px; line-height: 1.5; background: var(--warn-tint); color: #5C3304; margin-bottom: 20px; }
.notice svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.notice-neutral { background: var(--soft); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .scan-pulse, .scan-finishing-dots i { animation: none !important; }
  .scan-insight { transition: none !important; }
}

/* ---------- uitslag ----------
   De scanuitslag op de homepage, opgebouwd als meetrapport: kop met score en
   verdeling naar ernst, de bekeken pagina's, dan de voorbeelden met hun
   meetgegevens. Links uitgelijnd, net als de productkaart (.report-card).
   Kleuren van de ernstbalk (grafisch, de aantallen staan ernaast als tekst):
   #8A1414 9,6:1 · #D04A3A 4,5:1 · #D97A2B 3,1:1 · #7D8B9C 3,5:1, op #FFFFFF. */
.result-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.res-head { display: grid; gap: 24px; padding: 24px 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .res-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px 36px; } .res-dist { border-left: 1px solid var(--line); padding-left: 32px; } }
.res-score { display: flex; gap: 18px; align-items: center; min-width: 0; }
.res-score-text { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.score-ring { --pct: 0; --color: var(--ink); width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--color) calc(var(--pct) * 1%), var(--soft) 0); }
.score-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.score-ring > * { position: relative; }
.score-num { font-size: 38px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.res-eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); }
.res-label { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.025em; }
.res-url { font: 500 13.5px var(--mono); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-score-text .pill { margin-top: 6px; }
@media (max-width: 419px) {
  .res-score { gap: 14px; align-items: flex-start; }
  .score-ring { width: 76px; height: 76px; }
  .score-ring::before { inset: 7px; }
  .score-num { font-size: 26px; }
  .res-label { font-size: 22px; }
  .res-score-text .pill { white-space: normal; }
  .finding { padding: 14px; }
}
.res-dist { min-width: 0; display: grid; gap: 12px; align-content: center; }
.res-total { font-size: 15.5px; color: var(--text); }
.res-total b { font-size: 30px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); margin-right: 4px; }
.sev-bar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--soft); }
.sev-bar i { display: none; }
.sev-bar i.on { display: block; flex: var(--n) 1 0; }
.sev-bar .k, .sev-legend .k::before { background: #8A1414; }
.sev-bar .e, .sev-legend .e::before { background: #D04A3A; }
.sev-bar .m, .sev-legend .m::before { background: #D97A2B; }
.sev-bar .l, .sev-legend .l::before { background: #7D8B9C; }
.sev-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--text); }
.sev-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sev-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sev-legend b { color: var(--ink); font-weight: 650; }
.res-manual { font-size: 14px; color: var(--muted); line-height: 1.5; }

.res-pages { padding: 16px 20px 18px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
@media (min-width: 640px) { .res-pages { padding: 18px 36px 20px; } }
.res-pages-label { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 28px; }
@media (min-width: 640px) { .page-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-list li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 14.5px; }
.page-list .pl-type { flex-shrink: 0; font-weight: 600; color: var(--ink); }
.page-list .pl-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px var(--mono); color: var(--muted); }

.result-block { padding: 24px 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .result-block { padding: 28px 36px; } }
.result-block:last-child { border-bottom: 0; }
.result-block-quiet { background: #FBFCFE; padding-top: 18px; padding-bottom: 18px; }
@media (min-width: 640px) { .result-block-quiet { padding-top: 20px; padding-bottom: 20px; } }
.result-block-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.result-block-head h3, .res-block-title { font-size: 18px; }
.res-block-title { margin-bottom: 16px; }

/* Eén bevinding: ernst en titel, wat er mis is, dan de meetgegevens en het element. */
.preview-list { display: grid; gap: 12px; }
.finding { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: #fff; display: grid; gap: 10px; min-width: 0; }
.finding-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.finding-head .pill { flex-shrink: 0; position: relative; top: -1px; }
.finding-head h4 { font-size: 16.5px; line-height: 1.35; min-width: 0; flex: 1 1 14em; }
.finding > p { font-size: 15px; line-height: 1.55; }
.finding .note { font-size: 14px; color: var(--muted); }
.finding-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 10px; border-top: 1px solid var(--soft); font-size: 13.5px; }
.finding-meta > div { display: flex; gap: 6px; min-width: 0; }
.finding-meta dt { color: var(--muted); }
.finding-meta dd { margin: 0; color: var(--ink); font-weight: 550; min-width: 0; }
.finding-meta .is-tested { color: var(--action); }
.finding-code { margin: 0; min-width: 0; }
.finding-code figcaption { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.finding-code pre { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font: 400 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-empty { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 18px 20px; }

.scope-note > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink); font-size: 15px; }
.scope-note > summary::-webkit-details-marker { display: none; }
.scope-note > summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.scope-note[open] > summary::after { content: "\2212"; }
.scope-note .body { margin-top: 14px; display: grid; gap: 10px; font-size: 15px; line-height: 1.6; }
.offer { background: var(--bg); }
.offer-teaser { font-size: 17px; color: var(--ink); max-width: 38em; margin: 0 0 18px; line-height: 1.55; }
.offer-box { display: grid; gap: 14px; align-items: center; }
@media (min-width: 560px) { .offer-box { grid-template-columns: minmax(0, 1fr) auto; } }
.offer-price { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.offer-price b { font-size: 26px; letter-spacing: -.02em; }
.offer-price .sub { font-size: 13.5px; color: var(--muted); }
.offer-terms { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.ticks-2 { gap: 12px 28px; margin-bottom: 22px; }
@media (min-width: 640px) { .ticks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.result-block .guarantee { margin-top: 14px; }