/* TextShield huisstijl — één stylesheet voor marketing, auth, account en console.
   Palet gepipet uit het logo; koppen Bitter, broodtekst Figtree, labels IBM Plex Mono
   (beide zelf gehost, latin + latin-ext). Bewust géén gradients/glassmorphism/
   overdadige animaties — zie docs/plans/2026-07-05-001 (anti-vibecoded-kaders). */

/* ---------- fonts (zelf gehost, OFL) ---------- */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bitter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bitter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/bitter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/bitter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/figtree-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/figtree-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/figtree-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/figtree-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- variabelen (uit het logo gepipet) ---------- */
:root {
  --groen: #0B3B2B;        /* logo-donkergroen: koppen, primaire knoppen */
  --groen-donker: #072A1F; /* hover/actief */
  --zee: #67B497;          /* logo-zeegroen: accenten, randen, chips */
  --smaragd: #256B52;      /* links (leesbaar zeegroen) */
  --mint: #9BD4BC;         /* lichte zeegroen-tint op donkere vlakken */
  --teal-diep: #0B3B2B;    /* donkere vlakken (zelfde als logo-groen) */
  --inkt: #111111;         /* broodtekst */
  --grijs: #5C6B64;        /* gedempte tekst */
  --lijn: #D6E4DD;         /* randen */
  --veld: #F2F7F4;         /* lichte vlakken/achtergronden */
  --wit: #FFFFFF;
  --geel-flash: #FFFBE6;
  --geel-flash-rand: #E8D48A;
  --rood: #A33A2E;
  --rood-licht: #FBEEEC;
  --kop: 'Bitter', Georgia, serif;
  --tekst: 'Figtree', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--wit);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main { flex: 1; width: 100%; }
::selection { background: var(--zee); color: #FFFFFF; }

.shell { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }
main.shell { padding-top: 2rem; padding-bottom: 3.5rem; }
main.shell-narrow { max-width: 560px; }

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 700;
  color: var(--groen);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.2rem 0 0.7rem;
}
h1 { font-size: 2.1rem; margin-top: 0.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p, ul, ol { margin: 0.7rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.35rem 0; }

a { color: var(--smaragd); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--groen); }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

.lead { font-size: 1.2rem; }
.muted { color: var(--grijs); }
hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }
code, pre { font-family: var(--mono); background: var(--veld); }
code { padding: 0.1rem 0.3rem; }
pre { padding: 0.8rem 1rem; overflow-x: auto; border: 1px solid var(--lijn); }
img { max-width: 100%; height: auto; }

/* ---------- header ---------- */
.site-header { border-bottom: 2px solid var(--groen); background: var(--wit); }
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { display: block; height: 68px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--tekst);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--groen);
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-nav form { display: inline; margin: 0; }

/* ---------- footer (donkergroen, witte tekst, geen lijnen) ---------- */
.site-footer {
  background: var(--groen);
  color: #FFFFFF;
  margin-top: auto;
  padding: 2rem 0 3.6rem;
  font-size: 0.9rem;
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--mint); }
.site-footer p { margin: 0.3rem 0; }
/* Logo absoluut links; tekst + footerlinks vormen één gecentreerd blok ernaast.
   Symmetrische padding reserveert de logo-ruimte zodat het blok op de shell-as centreert. */
.footer-top { position: relative; padding: 0 72px; }
.footer-shield { position: absolute; left: 0; top: 0; width: 56px; height: 56px; }
.footer-center { max-width: 70ch; margin: 0 auto; text-align: center; }
.footer-tagline { font-size: 0.9rem; line-height: 1.65; font-style: italic; color: #FFFFFF; margin: 0 0 1rem; }
.site-footer .footer-onder { font-size: 0.82rem; margin: 0; }
@media (max-width: 600px) {
  .footer-top { padding: 0; }
  .footer-shield { position: static; display: block; margin: 0 auto 0.6rem; }
}
.app-footer { padding: 1rem 0; }

/* ---------- knoppen ---------- */
.btn, button:not(.link) {
  display: inline-block;
  font-family: var(--tekst);
  font-weight: 600;
  font-size: 1rem;
  background: var(--groen);
  color: var(--wit);
  border: 2px solid var(--groen);
  border-radius: 10px;
  padding: 0.55rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.btn:hover, button:not(.link):hover { background: var(--groen-donker); border-color: var(--groen-donker); color: var(--wit); }
.btn.secondary, button.secondary {
  background: transparent;
  color: var(--groen);
}
.btn.secondary:hover, button.secondary:hover { background: var(--veld); color: var(--groen-donker); }
.site-nav a.btn { color: var(--wit); padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.site-nav a.btn:hover { text-decoration: none; }
button.link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--smaragd);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-nav button.link { font-family: var(--tekst); font-weight: 600; font-size: 0.95rem; color: var(--groen); text-decoration: none; }
.site-nav button.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- formulieren ---------- */
label { display: block; font-weight: 500; margin: 0.9rem 0 0.25rem; }
input, textarea, select {
  font: inherit;
  color: var(--inkt);
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--wit);
  max-width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--groen); outline: 1px solid var(--groen); }
input[type='email'], input[type='password'], input[type='text'], input[type='url'] { width: 100%; }
textarea { width: 100%; }
fieldset { border: 1px solid var(--lijn); border-radius: 3px; }

/* ---------- meldingen ---------- */
.flash {
  background: var(--geel-flash);
  border: 1px solid var(--geel-flash-rand);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0.9rem 0;
}
.flash.error { background: var(--rood-licht); border-color: var(--rood); }
.flash.success { background: var(--veld); border-color: var(--smaragd); }

/* ---------- tabellen ---------- */
table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
th, td { border: 1px solid var(--lijn); padding: 0.45rem 0.65rem; text-align: left; font-size: 0.9rem; }
th { background: var(--veld); font-family: var(--tekst); font-weight: 600; color: var(--groen); }

/* ---------- kaarten / kolommen (bestaande klassen) ---------- */
.cols { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.col { flex: 1; min-width: 260px; }
.card { flex: 1; min-width: 220px; border: 1px solid var(--lijn); border-radius: 3px; padding: 1.1rem 1.2rem; background: var(--wit); }
.card h3 { margin-top: 0; }
.box { border: 1px solid var(--lijn); border-radius: 3px; padding: 0.8rem; background: var(--veld); }
/* Padding gelijk boven/onder: geen kop-marge boven of alinea-marge onder in het blok. */
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
.box.summary { background: var(--wit); border-color: var(--smaragd); }
.price { font-family: var(--kop); font-size: 1.9rem; font-weight: 700; color: var(--groen); margin: 0.3rem 0; }
.price span { font-family: var(--tekst); font-size: 1rem; font-weight: 400; color: var(--grijs); }

/* ---------- marketing: full-bleed secties ---------- */
main.bleed { padding: 0; }
.section { padding: 3.2rem 0 3.6rem; }
.section.tint { background: var(--veld); }
.section.dark { background: var(--teal-diep); color: #DCEFE6; }
.section.dark h2 { color: var(--mint); }
.section.dark a { color: var(--mint); }
.section.dark .btn { background: var(--mint); border-color: var(--mint); color: var(--teal-diep); }
.section.dark .btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.section h2 { margin-top: 0; }
.eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smaragd);
  margin: 0 0 0.8rem;
}

/* ---------- hero (achtergrondfoto + animatie-placeholder) ----------
   Achtergrond: /bg_hero.webp (2560×1095, lossy ~249 KB). Houd de linkerkant
   rustig/licht (daar staat de kop). Ontbreekt de foto, dan valt de hero terug
   op de effen --veld-kleur. bg_hero.jpg staat als reserve in public/. */
.hero {
  position: relative;
  padding: 3.6rem 0 4rem;
  background-color: var(--veld);
  background-image: url('/bg_hero.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--lijn);
}
/* lichte sluier van links → rechts houdt de donkergroene kop leesbaar,
   ongeacht welke foto eronder ligt */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(242, 247, 244, 0.42) 0%,
    rgba(242, 247, 244, 0.12) 40%,
    rgba(242, 247, 244, 0) 62%);
  pointer-events: none;
}
.hero .shell { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); margin: 0 0 1rem; }
.hero-accent { display: block; }
.hero .lead { font-size: 1.15rem; }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* animatie: rechts in de hero, ±4:3 — scraper-robotje maakt tekst tot onzin */
.hero-anim {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--lijn);
  overflow: hidden;
}
/* twee tekstlagen over elkaar: onder = serieus, boven = onzin (met witte
   achtergrond zodat 'ie de serieuze tekst volledig afdekt waar 'ie onthuld is) */
.ha-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0.95rem 1.1rem;
  overflow: hidden;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
}
.ha-layer p { margin: 0 0 0.5rem; }
.ha-layer p:last-child { margin-bottom: 0; }
.ha-serious { color: var(--inkt); font-size: clamp(0.66rem, 1.35vw, 0.8rem); }
.ha-poison {
  z-index: 2;
  background: var(--wit);
  color: #A6493E;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 1.2vw, 0.72rem);
  clip-path: inset(0 0 100% 0);
}
.ha-bot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 30px;
  height: 32px;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}
.ha-bot svg { display: block; }
.ha-eye { animation: ha-blink 2.4s steps(1) infinite; }
@keyframes ha-blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .ha-eye { animation: none; } }
/* dashboard-illustratie: full-bleed band (afbeelding 2560×800, ±3,2:1) */
.dashboard-band { line-height: 0; background: var(--veld); }
.dashboard-illu { display: block; width: 100%; height: auto; }

/* ---------- Big Tech (donkere sectie): kop + tekst wit ----------
   Hoge specificiteit nodig: .section.dark h2 (0,2,1) zou anders --mint winnen. */
.section.dark.bigtech h2 { color: #FFFFFF; font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.bigtech p { color: #FFFFFF; }

/* ---------- "eindelijk tanden" + "Zo werkt het"-kaart ---------- */
.tanden-sectie { background: var(--veld); }
.tanden-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6rem; align-items: stretch; }
/* grote kop, valt in ±3 regels */
.tanden-copy h2 { margin-top: 0; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.15; }
.werkwijze {
  background: var(--zee);
  color: var(--groen);
  border-radius: 10px;
  padding: 1.9rem 2rem 1.7rem;
}
.werkwijze h2 { color: var(--groen); margin: 0 0 0.6rem; }
.werkwijze-stappen { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 1rem; }
.werkwijze-stappen li { margin: 0; font-size: 0.95rem; color: var(--groen); line-height: 1.6; }
.werkwijze-stappen strong { color: var(--groen); }
.werkwijze sup { color: var(--groen); font-weight: 700; }
.werkwijze-noot {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--groen-donker);
}

/* ---------- prijzen-band ---------- */
.prijzen-band { background: #B0DCCB; }
.prijzen-band h2 { margin-top: 0; }
.prijs-kaarten { margin-top: 1.4rem; align-items: stretch; }
.prijs-kaarten .card { min-height: 190px; border-radius: 10px; display: flex; flex-direction: column; }
.prijs-kaarten .card h3 {
  font-family: var(--tekst);
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.prijs-kaarten .card > p:not(.kaart-cta) { margin-bottom: 0.4rem; }
.kaart-cta { margin: 1rem 0 0; padding-top: 0.4rem; }
.kaart-cta .btn { display: inline-block; }
.prijs-kaarten .card .price + p { margin-top: 0.2rem; }
.prijs-kaarten .card p:last-of-type { margin-top: auto; }
.specimen { display: flex; flex-direction: column; gap: 1rem; }
.pane { margin: 0; padding: 1.1rem 1.25rem 1.25rem; border-radius: 3px; }
.pane figcaption {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pane p { margin: 0; font-size: 0.95rem; }
.pane p + p { margin-top: 0.6rem; }
.pane-mens { background: var(--wit); border: 1px solid var(--lijn); box-shadow: 4px 4px 0 var(--lijn); }
.pane-mens figcaption { color: var(--smaragd); }
.pane-bot { background: #082B1F; border: 1px solid #1C5A44; }
.pane-bot figcaption { color: var(--zee); }
.pane-bot p { font-family: var(--mono); color: var(--mint); font-size: 0.88rem; line-height: 1.7; }
.stand-chip {
  border: 1px solid var(--zee);
  color: var(--zee);
  padding: 0.05rem 0.45rem;
  letter-spacing: 0.08em;
}
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  background: var(--mint);
  margin-left: 0.15em;
  vertical-align: text-bottom;
  animation: ts-caret 1.1s steps(1) infinite;
}
@keyframes ts-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ---------- standen ---------- */
.standen { border-top: 1px solid var(--lijn); margin: 1.4rem 0 1.2rem; }
.stand-row {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr 1.4fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
}
.stand-row p { margin: 0; }
.stand-naam {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--groen);
  border: 1px solid var(--groen);
  border-radius: 3px;
  padding: 0.15rem 0.6rem;
  justify-self: start;
}
.stand-uitkomst span {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grijs);
}
.stand-waarom { color: var(--grijs); font-size: 0.92rem; }

/* ---------- stappen (echte volgorde) ---------- */
.stappen { list-style: none; counter-reset: stap; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.stappen li { counter-increment: stap; }
.stappen li::before {
  content: 'stap ' counter(stap);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smaragd);
}
.stappen h3 { margin: 0.3rem 0 0.4rem; }
.stappen p { margin: 0; font-size: 0.95rem; }

/* ---------- demo-strip (test het nu meteen) ---------- */
.demo-strip { background: var(--zee); padding: 0.9rem 0; }
.demo-strip p { margin: 0; color: var(--groen-donker); font-size: 1.02rem; }
.demo-strip a { color: var(--groen-donker); font-weight: 600; }
.demo-strip a:hover { color: #FFFFFF; }

/* ---------- doelgroep (wél / nog niet) ---------- */
.doelgroep { flex: 1; min-width: 280px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px; padding: 1.2rem 1.4rem; }
.doelgroep h3 { margin-top: 0; }
.doelgroep.wel { border-top: 3px solid var(--zee); }
.doelgroep.niet { border-top: 3px solid var(--grijs); }
.doelgroep.niet h3 { color: var(--grijs); }
.doelgroep p { font-size: 0.92rem; }

/* ---------- dashboard (ingelogde gebruiker) ---------- */
.dash-intro { color: var(--grijs); margin: 0 0 1.2rem; }
.dash-intro strong { color: var(--groen); }

/* statusbalk: één oogopslag "is mijn bescherming actief?" */
.dash-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.4rem;
  background: var(--wit); border: 1px solid var(--lijn); border-left: 5px solid var(--zee);
  border-radius: 10px; padding: 1rem 1.3rem; margin: 0.4rem 0 1.8rem;
}
.dash-status.ok   { border-left-color: #2E8B57; }
.dash-status.warn { border-left-color: #C99A2E; background: var(--geel-flash); }
.dash-status.none { border-left-color: var(--grijs); }
.dash-status .st-kop { font-family: var(--kop); font-weight: 700; color: var(--groen); font-size: 1.15rem; }
.dash-status .st-meta { color: var(--grijs); font-size: 0.92rem; }
.dash-status .st-alert { color: var(--rood); font-weight: 600; }

/* kerncijfers als tegels */
.dash-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem; margin: 0 0 2rem; }
.tile { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 1rem 1.1rem 1.05rem; }
.tile .num { font-family: var(--kop); font-weight: 700; font-size: 2rem; color: var(--groen); line-height: 1.05; }
.tile .lbl { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); margin-top: 0.4rem; line-height: 1.35; }
.tile.accent { background: var(--groen); border-color: var(--groen); }
.tile.accent .num { color: #FFFFFF; }
.tile.accent .lbl { color: var(--mint); }
.tile.alert .num { color: var(--rood); }

/* tabel in een kaart (nettere randen dan kale tabel) */
.dash-block { margin: 0 0 2rem; }
.dash-block > h2, .dash-block > h3 { margin-bottom: 0.6rem; }
.tabel-kaart { border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.tabel-kaart table { margin: 0; border: 0; }
.tabel-kaart th, .tabel-kaart td { border-left: 0; border-right: 0; }
.tabel-kaart tr:first-child th { border-top: 0; }
.tabel-kaart td .num-cel { font-family: var(--mono); font-weight: 600; }

/* recente gebeurtenissen als tijdlijn */
.gebeurtenissen { list-style: none; padding: 0; margin: 0; }
.gebeurtenissen li { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.gebeurtenissen li:last-child { border-bottom: 0; }
.gebeurtenissen time { font-family: var(--mono); font-size: 0.78rem; color: var(--grijs); white-space: nowrap; min-width: 10rem; }
.gebeurtenissen .geb-tekst { flex: 1; }
.gebeurtenissen .geb-tekst .geb-titel { color: var(--groen); }
.gebeurtenissen .geb-tekst .geb-snippet { color: var(--grijs); font-size: 0.88rem; }

/* lege staat / eerste stappen */
.dash-leeg { background: var(--veld); border: 1px dashed var(--zee); border-radius: 10px; padding: 1.3rem 1.4rem; }
.dash-leeg h3 { margin-top: 0; }

/* paginering onder lange lijsten */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 0; }
.pager-knop {
  font-family: var(--tekst); font-weight: 600; font-size: 0.9rem;
  color: var(--groen); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 8px; padding: 0.35rem 0.8rem; background: var(--wit);
}
.pager-knop:hover { background: var(--veld); color: var(--groen-donker); text-decoration: none; }
.pager-knop.is-uit { color: var(--grijs); background: var(--veld); border-color: var(--lijn); cursor: default; opacity: 0.6; }
.pager-tel { font-family: var(--mono); font-size: 0.8rem; color: var(--grijs); }

/* ---------- onboarding-checklist (dashboard) ---------- */
.onboarding { border: 1px solid var(--zee); border-radius: 12px; padding: 1.3rem 1.4rem; background: var(--wit); margin: 0.4rem 0 1.8rem; }
.onboarding h2 { margin-top: 0; }
.onboarding > p { color: var(--grijs); margin-top: 0.2rem; }
.ob-steps { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 1rem; }
.ob-step { display: flex; gap: 0.9rem; align-items: flex-start; }
.ob-mark { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; font-family: var(--tekst); }
.ob-step.done .ob-mark { background: #2E8B57; color: #FFFFFF; }
.ob-step.active .ob-mark { background: var(--groen); color: #FFFFFF; }
.ob-step.todo .ob-mark { background: var(--veld); color: var(--grijs); border: 2px solid var(--lijn); }
.ob-body { flex: 1; }
.ob-body .ob-titel { font-weight: 600; color: var(--groen); }
.ob-step.done .ob-body .ob-titel { color: var(--grijs); text-decoration: line-through; }
.ob-body p { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--grijs); }
.ob-cta { margin-top: 0.6rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- account: intro + tabs + statuspills ---------- */
.account-intro { background: var(--veld); border-radius: 10px; padding: 1.1rem 1.35rem; margin: 0.4rem 0 1.4rem; }
.account-intro h2 { margin-top: 0; }
.account-intro ol { margin: 0.5rem 0 0; }
.account-intro li { margin: 0.3rem 0; }

.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; border-bottom: 2px solid var(--lijn); margin: 0 0 1.6rem; }
.tabs a {
  font-family: var(--tekst); font-weight: 600; font-size: 0.95rem; color: var(--grijs);
  text-decoration: none; padding: 0.55rem 1rem; border: 2px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; margin-bottom: -2px;
}
.tabs a:hover { color: var(--groen); background: var(--veld); }
.tabs a.active { color: var(--groen); background: var(--wit); border-color: var(--lijn); border-bottom-color: var(--wit); }

.pill { display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; vertical-align: middle; }
.pill.ok { background: #E4F2EA; color: #2E7D32; }
.pill.wacht { background: var(--geel-flash); color: #8A6D1A; }
.pill.uit { background: var(--rood-licht); color: var(--rood); }

.plan-kaart { border: 1px solid var(--lijn); border-radius: 10px; padding: 1.2rem 1.35rem; max-width: 460px; }
.plan-kaart h3 { margin-top: 0; }
.plan-kaart .plan-regel { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--lijn); font-size: 0.95rem; }
.plan-kaart .plan-regel:last-of-type { border-bottom: 0; }
.plan-kaart .plan-regel span:first-child { color: var(--grijs); }

/* abonnementskeuze: jaar/maand-switch (pure CSS) + twee plan-kaarten */
.abo-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.abo-switch { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; margin: 0.2rem 0 1.3rem; }
.abo-switch label { margin: 0; padding: 0.5rem 1.3rem; cursor: pointer; font-family: var(--tekst); font-weight: 600; font-size: 0.9rem; color: var(--grijs); user-select: none; display: inline-flex; align-items: center; }
#abo-year:checked ~ .abo-switch label[for="abo-year"],
#abo-month:checked ~ .abo-switch label[for="abo-month"] { background: var(--groen); color: #FFFFFF; }

.abo-cards { align-items: stretch; }
.plan-card { flex: 1; min-width: 240px; display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: 12px; padding: 1.3rem 1.4rem; background: var(--wit); }
.plan-card h3 { margin: 0 0 0.3rem; }
.plan-card .prijs { font-family: var(--kop); font-weight: 700; font-size: 2rem; color: var(--groen); margin: 0.2rem 0 0; line-height: 1.1; }
.plan-card .prijs span { font-family: var(--tekst); font-size: 1rem; font-weight: 400; color: var(--grijs); }
.plan-card .prijs-noot { font-size: 0.82rem; color: var(--grijs); margin: 0.15rem 0 0.9rem; }
.plan-specs { list-style: none; padding: 0; margin: 0.4rem 0 1.2rem; display: grid; gap: 0.4rem; }
.plan-specs li { font-size: 0.92rem; padding-left: 1.4rem; position: relative; }
.plan-specs li::before { content: '✓'; position: absolute; left: 0; color: var(--zee); font-weight: 700; }
.plan-card form { margin-top: auto; }
.plan-card .btn { width: 100%; text-align: center; }

/* toggle: standaard jaar tonen, maand verbergen; bij #abo-month:checked omwisselen */
.plan-card .prijs-month, .plan-card .prijs-noot.prijs-month, .plan-card .kies-month { display: none; }
#abo-month:checked ~ .abo-cards .prijs-year,
#abo-month:checked ~ .abo-cards .prijs-noot.prijs-year,
#abo-month:checked ~ .abo-cards .kies-year { display: none; }
#abo-month:checked ~ .abo-cards .prijs-month,
#abo-month:checked ~ .abo-cards .prijs-noot.prijs-month { display: block; }
#abo-month:checked ~ .abo-cards .kies-month { display: inline-block; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-anim { aspect-ratio: 16 / 9; min-height: 210px; }
  .tanden-grid { grid-template-columns: 1fr; gap: 1.9rem; }
  .stand-row { grid-template-columns: 1fr 1fr; }
  .stand-naam { grid-column: 1 / -1; }
  .stand-waarom { grid-column: 1 / -1; }
  .stappen { grid-template-columns: 1fr; gap: 1.4rem; }
  .dash-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.3rem; }
  .site-logo img { height: 42px; }
  .site-header .shell { justify-content: center; }
  .site-nav { justify-content: center; gap: 0.9rem; }
  main.shell { padding-top: 1.4rem; }
  .hero { padding: 2.2rem 0 2.6rem; }
  .section { padding: 2.2rem 0 2.6rem; }
  .footer-links { text-align: left; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .gebeurtenissen li { flex-direction: column; gap: 0.15rem; }
  .gebeurtenissen time { min-width: 0; }
}

/* Registratiepagina: 2 kolommen (form links ~2/3, wachtlijst rechts ~1/3) */
.reg-layout { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.reg-main { flex: 2 1 380px; min-width: 0; }
.reg-aside { flex: 1 1 260px; }
@media (max-width: 720px) { .reg-layout { flex-direction: column; } .reg-aside { flex-basis: auto; } }

/* Klikbare dashboard-tegel (bv. actieve websites → sites-pagina) */
.tile-link { text-decoration: none; color: inherit; cursor: pointer; display: block; transition: box-shadow .12s, transform .12s; }
.tile-link:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }

/* Tekst-link die een modal opent (bv. "test als bot") */
.linklabel { color: var(--groen); cursor: pointer; text-decoration: underline; }
.linklabel:hover { opacity: .8; }

/* Per-URL-beheer: modi-uitleg via een "?"-knop + CSS-only modal */
.ts-help { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; margin-left: 0.35rem; border: 1px solid var(--lijn); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--grijs); cursor: pointer; user-select: none; vertical-align: middle; }
.ts-help:hover { background: var(--groen); color: #FFFFFF; border-color: var(--groen); }
.ts-modal-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ts-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; align-items: center; justify-content: center; padding: 1rem; }
.ts-modal-toggle:checked ~ .ts-modal { display: flex; }
.ts-modal-card { background: #FFFFFF; border-radius: 10px; padding: 1.3rem 1.6rem 1.5rem; max-width: 460px; width: 100%; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22); }
.ts-modal-card h3 { margin: 0 0 0.6rem; }
.ts-modal-x { float: right; margin: -0.3rem -0.4rem 0 0; font-size: 1.5rem; line-height: 1; color: var(--grijs); cursor: pointer; text-decoration: none; }
.ts-modi-dl dt { font-weight: 600; margin-top: 0.6rem; }
.ts-modi-dl dd { margin: 0.1rem 0 0; color: var(--grijs); }