/* Generated by website/src/tokens.ts from packages/web/src/styles.css. Do not edit: change the app tokens. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --color-grond: #F4F5F7;
  --color-vlak: #FFFFFF;
  --color-lijn: #E1E4EA;
  --color-lijn-zacht: #F0F1F4;
  --color-lijn-veld: #878E9B;
  --color-spoor: #E6E8EC;
  --color-inkt: #16181D;
  --color-zacht: #5B6270;
  --color-stil: #B9BEC8;
  --color-leeg: #C9CDD4;
  --color-kernel: #16181D;
  --color-teal: #0F6E6E;
  --color-teal-donker: #0A4F4F;
  --color-teal-licht: #E6F2F1;
  --color-amber: #B4540A;
  --color-amber-donker: #8A3F06;
  --color-amber-licht: #FBEFE3;
  --color-groen: #1B7F4D;
  --color-groen-tekst: #14603A;
  --color-groen-licht: #E4F3EA;
  --color-rood: #B42318;
  --color-rood-licht: #FBE9E7;
  --color-amber-rand: #F0D9C2;
  --color-grond-licht: #FAFBFC;
  --color-spoor-licht: #ECEEF2;
  --color-accent: #E08A3C;
  --color-creme: #F6F1E7;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-32: 32px;
  --leading-kop: 1.2;
  --leading-rij: 1.4;
  --leading-tekst: 1.45;
  --leading-ruim: 1.9;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-7: 7px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-14: 14px;
  --radius-17: 17px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-23: 23px;
}

/* The website's stylesheet. Colours, fonts, type scale and radii come only from the app's tokens (tokens.css, generated
   from packages/web/src/styles.css). The few greys the mock uses on dark bands are mixed from those tokens below,
   not typed as new values. Measurements follow docs/mock/website at 1280 px; the layout is fluid down to 390 px. */

:root {
  --w-lijn-donker: color-mix(in srgb, var(--color-inkt) 90%, var(--color-vlak));
  --w-tekst-donker: var(--color-stil);
  --w-voet-stil: color-mix(in srgb, var(--color-zacht) 30%, var(--color-stil));
  --w-stip: color-mix(in srgb, var(--color-leeg) 50%, var(--color-lijn));
  --w-rand-donker: color-mix(in srgb, var(--color-zacht) 85%, var(--color-leeg));
  --w-schaduw-telefoon: 0 18px 40px color-mix(in srgb, var(--color-inkt) 16%, transparent);
  --w-schaduw-venster: 0 18px 40px color-mix(in srgb, var(--color-inkt) 10%, transparent);
  --w-schaduw-zacht: 0 12px 28px color-mix(in srgb, var(--color-inkt) 8%, transparent);
  --w-rand: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--color-inkt); background: var(--color-grond); font-size: var(--text-16); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--color-teal); text-decoration: none; }
a:hover { color: var(--color-teal-donker); }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
/* On ink, teal is only 2.94:1: the ring is the teal tint there (canvas "toegankelijkheid", C3). */
.band-donker :focus-visible, .voet :focus-visible, .agentkaart.donker :focus-visible { outline-color: var(--color-teal-licht); }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-spoor-licht); border-radius: var(--radius-4); padding: 1px 4px; }
img, svg { max-width: 100%; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.naar-inhoud { position: absolute; left: -9999px; top: calc(100% + 11px); z-index: 10; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-10); background: var(--color-vlak); border: 1px solid var(--color-teal); color: var(--color-teal-donker); font-size: var(--text-15); font-weight: 600; }
.naar-inhoud:focus { left: 24px; }

/* Utility text */
.zacht { color: var(--color-zacht); }
.amber { color: var(--color-amber-donker); }
.groen { color: var(--color-groen-tekst); }
.half { font-weight: 500; }
.nowrap { white-space: nowrap; }
.klein { font-size: var(--text-12); }
.klein-13 { font-size: var(--text-13); }
.klein-14 { font-size: var(--text-14); }
.tekst-17 { font-size: var(--text-17); }
.actie { color: var(--color-teal); font-weight: 500; }

/* Column and bands */
.kolom { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.stapel { display: flex; flex-direction: column; gap: 28px; }
.stapel-4 { display: flex; flex-direction: column; gap: 4px; }
.stapel-14 { display: flex; flex-direction: column; gap: 14px; }
.stapel-18 { display: flex; flex-direction: column; gap: 18px; }
.stapel-24 { display: flex; flex-direction: column; gap: 24px; }
.stapel-32 { display: flex; flex-direction: column; gap: 32px; }
.band { padding: 72px 0; }
.band-56 { padding: 56px 0; }
.band-48 { padding: 48px 0; }
.band-wit { background: var(--color-vlak); border-top: 1px solid var(--color-lijn); border-bottom: 1px solid var(--color-lijn); }
.band-onderrand { border-bottom: 0; }
.band-donker { background: var(--color-inkt); border-bottom: 1px solid var(--w-lijn-donker); }
.band-ondernemers { padding: 24px 0 72px; }
.band-onder { padding: 0 0 72px; }
.band-help { padding: 40px 0 72px; }
.ruimte-boven { padding-top: 6px; }
.smal { max-width: 760px; }

/* Header */
.kop { background: var(--color-vlak); border-bottom: 1px solid var(--color-lijn); position: relative; }
.kop-rij { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; padding-bottom: 12px; }
.merk { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--color-inkt); margin-right: 12px; }
.merk:hover { color: var(--color-inkt); }
.merk span { font-weight: 600; font-size: var(--text-17); }
.logo { flex-shrink: 0; display: block; }
.logo-j { fill: var(--color-teal); }
.logo-stip { fill: var(--color-accent); }
.merk-voet .logo-j { fill: var(--color-teal-licht); }
.hoofdmenu { display: flex; flex-wrap: wrap; gap: 2px; font-size: var(--text-15); flex-grow: 1; }
.hoofdmenu a, .menupaneel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--color-inkt); }
.hoofdmenu a[aria-current="page"], .menupaneel a[aria-current="page"] { background: var(--color-teal-licht); color: var(--color-teal-donker); font-weight: 500; }
.kop-acties { display: flex; align-items: center; gap: 14px; }
.inloggen { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-inkt); font-size: var(--text-15); padding: 0 4px; }
.menuknop { display: none; }
.menuknop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: var(--radius-10); border: 1px solid var(--color-leeg); background: var(--color-vlak); font-size: var(--text-14); font-weight: 600; }
.menuknop summary::-webkit-details-marker { display: none; }
.menupaneel { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--color-vlak); border-bottom: 1px solid var(--color-lijn); box-shadow: var(--w-schaduw-zacht); display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; font-size: var(--text-16); }

/* Buttons */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.knop { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: var(--radius-10); font: inherit; font-size: var(--text-16); font-weight: 600; white-space: nowrap; border: 1px solid var(--color-teal); background: var(--color-teal); color: var(--color-vlak); cursor: pointer; }
.knop-primair:hover { color: var(--color-vlak); background: var(--color-teal-donker); border-color: var(--color-teal-donker); }
.knop-licht { background: var(--color-vlak); color: var(--color-inkt); border-color: var(--color-leeg); }
.knop-licht:hover { color: var(--color-inkt); border-color: var(--color-zacht); }
.knop-donker { background: transparent; color: var(--color-vlak); border-color: var(--w-rand-donker); }
.knop-donker:hover { color: var(--color-vlak); border-color: var(--color-vlak); }
.knop-klein { height: 44px; padding: 0 16px; font-size: var(--text-14); }
.knop-44 { height: 44px; padding: 0 20px; }
.knop-vol { width: 100%; }
.meer { font-weight: 600; white-space: nowrap; }

/* Section heads */
.sectiekop { display: flex; flex-direction: column; gap: 10px; }
.sectiekop-8 { gap: 8px; }
.eyebrow { font-size: var(--text-13); font-weight: 600; color: var(--color-teal-donker); display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-4); background: var(--color-teal); flex-shrink: 0; }
.eyebrow-amber { color: var(--color-amber-donker); }
.eyebrow-amber::before { background: var(--color-amber); }
.h1 { font-weight: 600; letter-spacing: -0.01em; }
.h1-home { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.08; }
.h1-pagina { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.h1-prijzen { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.08; max-width: 820px; }
.h1-privacy { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; }
.h1-help { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
.h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; line-height: var(--leading-kop); }
.h2-klein { font-size: var(--text-24); font-weight: 600; line-height: 1.25; }
.h2-22 { font-size: var(--text-22); font-weight: 600; }
.lead { font-size: 19px; color: var(--color-zacht); max-width: 680px; }
.lead-vol { max-width: none; }
.lead-700 { max-width: 700px; }
.inleiding { font-size: var(--text-17); color: var(--color-zacht); max-width: 680px; }
.inleiding-breed { max-width: 760px; }
.alinea { font-size: var(--text-17); line-height: 1.6; }
.alinea + .alinea { margin-top: 14px; }
.alinea-groot { font-size: var(--text-17); line-height: 1.6; }
.citaat { margin: 0; font-size: 19px; line-height: 1.55; }
.label { display: inline-flex; align-self: flex-start; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-11); font-size: var(--text-12); font-weight: 600; }
.label-review { background: var(--color-amber-licht); color: var(--color-amber-donker); }
.label-concept { background: var(--color-spoor); color: var(--color-zacht); }

/* Grids and two-column rows */
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); }
.raster-210 { --min: 210px; }
.raster-240 { --min: 240px; }
.raster-260 { --min: 260px; }
.raster-280 { --min: 280px; }
.raster-300 { --min: 300px; }
.raster-320 { --min: 320px; }
.raster-12 { gap: 12px; }
.raster-14 { gap: 14px; }
.raster-start { align-items: start; }
.tweeluik { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.tweeluik-midden { align-items: center; }
.tweeluik-boven { align-items: flex-start; }
.tweeluik-groot { gap: 40px 56px; }
.tweeluik-breed { gap: 32px 64px; }
.tweeluik-stap { gap: 20px 48px; }
.tweeluik-demo { gap: 32px 56px; }
.tweeluik-zij { gap: 32px 56px; }
.tweeluik-tekst { display: flex; flex-direction: column; gap: 14px; }
.tweeluik-beeld { min-width: 0; }
.tweeluik-300 { flex: 1 1 300px; }
.tweeluik-340 { flex: 1 1 340px; }
.tweeluik-360 { flex: 1 1 360px; }
.tweeluik-380 { flex: 1 1 380px; }
.tweeluik-400 { flex: 1 1 400px; }
.tweeluik-420 { flex: 1 1 420px; }
.tweeluik-480 { flex: 1 1 480px; }
.tweeluik-500 { flex: 1 1 500px; }

/* Cards */
.kaart { background: var(--color-vlak); border: 1px solid var(--color-lijn); border-radius: var(--w-rand); }
.kaart h3 { font-weight: 600; }
.kaart-voet { margin-top: auto; padding-top: 6px; display: flex; }
.faq { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.faq h3 { font-size: var(--text-16); }
.faq p { color: var(--color-zacht); font-size: var(--text-15); }
.belofte { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.belofte h3 { font-size: var(--text-17); }
.belofte p { color: var(--color-zacht); }
.laan { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.laan-kop { display: flex; flex-direction: column; gap: 4px; }
.laan h3, .laan .laan-kop-2 { font-size: var(--text-22); line-height: 1.25; font-weight: 600; }
.functie { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.functie h3 { font-size: var(--text-18); }
.functie p { color: var(--color-zacht); }
.functie-pakket { margin-top: auto; padding-top: 10px; font-size: var(--text-13); color: var(--color-teal-donker); font-weight: 500; }
.kortkaart { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.kortkaart-kop { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.kortkaart p { color: var(--color-zacht); font-size: var(--text-15); }
.balk { padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.balk-tekst { flex: 1 1 420px; }
.balk-los { padding: 0 24px; background: none; border: 0; gap: 16px 32px; }
.balk-los .balk-tekst { flex: 1 1 360px; }
.notitiekaart { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.pakketbalk { padding: 28px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.pakketbalk-tekst { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }

/* Icons and lists */
.icoon { flex-shrink: 0; margin-top: 3px; }
.icoon-teal { color: var(--color-teal); }
.icoon-groen { color: var(--color-groen); }
.icoon-wit { color: var(--color-vlak); margin-top: 0; width: 12px; height: 12px; }
.icoon-stil { color: var(--w-tekst-donker); }
.icoon-zacht { color: var(--color-zacht); margin-top: 0; }
.vinken { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--color-inkt); }
.vinken li { display: flex; gap: 10px; align-items: flex-start; }
.vinken-groot { font-size: var(--text-17); }
.prijskaart-punten { font-size: var(--text-15); }
.stapnummer { flex-shrink: 0; border-radius: 50%; background: var(--color-teal-licht); color: var(--color-teal-donker); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.stapnummer-m { width: 32px; height: 32px; }
.stapnummer-l { width: 36px; height: 36px; }
.stapnummer-s { width: 30px; height: 30px; font-size: var(--text-14); }
.stappenkaart { margin: 0; padding: 26px 28px; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.stappenkaart li { display: flex; gap: 14px; align-items: flex-start; }
.genummerd { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: var(--text-17); }
.verder { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.verder-kop { font-size: var(--text-13); font-weight: 600; color: var(--color-zacht); }
.verder-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
.bron { font-size: var(--text-13); color: var(--color-zacht); }
.lopende-tekst { max-width: 760px; }

/* Hero sections */
.held { padding: 64px 0 72px; }
.held-stapel { display: flex; flex-direction: column; gap: 48px; }
.held-tekst { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.held-kantoren .held-tekst, .held-inhoud .tweeluik-tekst { max-width: none; }
.held-760 { max-width: 760px; }
.held-prijzen { padding: 64px 0 40px; }
.held-inhoud { padding: 40px 0 72px; }
.held-privacy { padding: 56px 0 48px; }
.held-privacy .held-tekst { gap: 14px; }
.stoelen { display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: flex-start; justify-content: center; }
.stoel { display: flex; flex-direction: column; gap: 10px; }
.stoel-telefoon { flex: 0 1 300px; min-width: 260px; }
.stoel-kantoor { flex: 1 1 520px; min-width: 0; }
.stoel-label { font-size: var(--text-13); font-weight: 600; color: var(--color-zacht); }

/* App illustrations (example figures from the mock) */
.telefoon { background: var(--color-inkt); border-radius: 34px; padding: 10px; box-shadow: var(--w-schaduw-telefoon); max-width: 300px; }
.telefoon-vak { flex: 0 1 300px; min-width: 260px; }
.telefoon-scherm { background: var(--color-grond); border-radius: 26px; padding: 22px 16px 18px; display: flex; flex-direction: column; gap: 14px; font-size: var(--text-13); line-height: var(--leading-rij); }
.tel-kop { display: flex; flex-direction: column; gap: 2px; }
.tel-titel { font-size: var(--text-20); font-weight: 600; line-height: 1.25; }
.tel-titel-19 { font-size: 19px; }
.tel-knop { height: 44px; border-radius: var(--radius-10); background: var(--color-teal); color: var(--color-vlak); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: var(--text-14); }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tegel { background: var(--color-vlak); border: 1px solid var(--color-lijn); border-radius: var(--w-rand); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tegel-tekst { padding: 12px; gap: 4px; }
.tegel-label, .tegel-onder { font-size: var(--text-12); color: var(--color-zacht); }
.tegel-onder.amber { color: var(--color-amber-donker); }
.tegel-bedrag { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-cond); }
.groep { display: flex; flex-direction: column; gap: 8px; }
.groepkop { font-size: var(--text-13); font-weight: 600; color: var(--color-teal-donker); display: flex; align-items: center; gap: 8px; }
.groepkop::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-4); background: var(--color-teal); }
.groepkop.amber { color: var(--color-amber-donker); }
.groepkop.amber::before { background: var(--color-amber); }
.lijstkaart { background: var(--color-vlak); border: 1px solid var(--color-lijn); border-radius: var(--w-rand); }
.vraagrij { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.vraagrij + .vraagrij, .lijstrij + .lijstrij { border-top: 1px solid var(--color-lijn-zacht); }
.vraagrij .actie { font-weight: 500; }
.lijstrij { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px; }
.lijstrij-tekst { flex: 1 1 220px; min-width: 0; }
.lijstrij-bedrag { color: var(--color-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lijstrij-actie { color: var(--color-teal); font-weight: 500; white-space: nowrap; }
.venster { background: var(--color-vlak); border: 1px solid var(--color-lijn); border-radius: var(--w-rand); overflow: hidden; }
.venster-sterk { box-shadow: var(--w-schaduw-venster); }
.venster-zacht { box-shadow: var(--w-schaduw-zacht); }
.venster-balk { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--color-grond-licht); border-bottom: 1px solid var(--color-lijn); }
.stip { width: 10px; height: 10px; border-radius: var(--radius-5); background: var(--w-stip); flex-shrink: 0; }
.venster-titel { margin-left: 10px; font-size: var(--text-12); color: var(--color-zacht); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venster-inhoud { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; font-size: var(--text-13); line-height: var(--leading-rij); }
.venster-grond { background: var(--color-grond); }
.venster-kop { display: flex; flex-direction: column; gap: 4px; }
.venster-titelregel { font-size: var(--text-20); font-weight: 600; line-height: 1.25; }
.venster-tabel { font-size: var(--text-13); line-height: var(--leading-rij); }
.venster-tabel > * + * { border-top: 1px solid var(--color-lijn-zacht); }
.venster-voet { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; color: var(--color-zacht); background: var(--color-grond-licht); }
.venster-voet .actie { font-weight: 500; }
.venster-blok { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.statusrij { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 11px 16px; }
.statusrij-naam { flex: 0 0 110px; font-weight: 500; }
.venster-status-smal .statusrij-naam { flex-basis: 100px; }
.statusrij-telling { font-variant-numeric: tabular-nums; color: var(--color-zacht); }
.statusrij-uitkomst { flex: 1 1 160px; text-align: right; }
.venster-status-smal .statusrij-uitkomst { flex-basis: 120px; }
.statusrij-uitkomst.amber { color: var(--color-amber-donker); }
.balkjes { display: flex; gap: 3px; flex: 0 0 auto; }
.balkje { width: 14px; height: 6px; border-radius: var(--radius-2); background: var(--color-groen); }
.balkje-amber { background: var(--color-amber); }
.balkje-leeg { background: var(--color-leeg); }
.cijferrij { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 11px 16px; }
.cijferrij-naam { flex: 1 1 140px; }
.cijferrij-bedrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cijferrij-bedrag.actie { font-weight: 500; }
.keuzerij { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--color-vlak); }
.keuzerij.gekozen { background: var(--color-teal-licht); }
.radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--w-voet-stil); background: var(--color-vlak); flex-shrink: 0; margin-top: 2px; }
.radio-aan { border: 5px solid var(--color-teal); }
.venster-voet-tekst { display: block; }
.delen { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.delen-tekst { border: 1px solid var(--color-lijn); border-radius: 8px; padding: 10px 12px; }
.delen-vink { display: flex; align-items: center; gap: 10px; }
.vinkvak { width: 16px; height: 16px; border-radius: var(--radius-4); background: var(--color-teal); display: flex; align-items: center; justify-content: center; }
.delen-voet { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mini-knop { height: 32px; padding: 0 14px; border-radius: 8px; background: var(--color-teal); color: var(--color-vlak); font-weight: 500; display: inline-flex; align-items: center; }

/* Trust strip */
.strip { background: var(--color-vlak); border-top: 1px solid var(--color-lijn); border-bottom: 1px solid var(--color-lijn); padding: 22px 0; }
.strip-rij { margin: 0 auto; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; font-size: var(--text-15); }
.strip-item { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }

/* Agent cards */
.agentkaart { padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.agentkaart h3 { margin-bottom: 6px; font-size: var(--text-18); }
.agentkaart.donker { background: var(--color-inkt); border-color: var(--color-inkt); }
.agentkaart.donker h3, .agentkaart.donker strong { color: var(--color-vlak); }
.telrij { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; }
.telrij + .telrij { border-top: 1px solid var(--color-lijn-zacht); }
.telgetal { width: 56px; text-align: right; font-size: var(--text-32); font-weight: 600; line-height: 1; color: var(--color-teal-donker); font-variant-numeric: tabular-nums; font-family: var(--font-cond); }
.telgetal.amber { color: var(--color-amber-donker); }
.nooitrij { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.nooitrij + .nooitrij { border-top: 1px solid var(--w-lijn-donker); }
.nooit-uitleg { color: var(--w-tekst-donker); }

/* Tables */
.tabelkaart { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: var(--text-15); }
.tabel th { text-align: left; padding: 12px 18px; font-size: var(--text-13); font-weight: 600; color: var(--color-zacht); border-bottom: 1px solid var(--color-lijn); white-space: nowrap; }
.tabel td { padding: 12px 18px; text-align: left; font-variant-numeric: tabular-nums; vertical-align: top; }
.tabel tbody tr + tr td { border-top: 1px solid var(--color-lijn-zacht); }
.tabel .rechts { text-align: right; }
.inbegrepen { display: inline-flex; align-items: center; gap: 8px; color: var(--color-groen-tekst); font-weight: 500; }
.inbegrepen .icoon { margin-top: 0; }
.tabelblok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tabelblok h3 { font-size: var(--text-18); font-weight: 600; }

/* Price cards */
.prijskaart { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.prijskaart.uitgelicht { border: 2px solid var(--color-teal); }
.prijskaart-kop { display: flex; flex-direction: column; gap: 4px; }
.prijskaart-kop h3 { font-size: var(--text-18); }
.prijskaart .sub { font-size: var(--text-14); color: var(--color-zacht); }
.prijs { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bedrag { font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-cond); }
.per { font-size: var(--text-14); color: var(--color-zacht); }
.notitie { font-size: var(--text-13); color: var(--color-zacht); }
.prijskaart .kaart-voet { padding-top: 8px; }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; font-size: var(--text-15); }
.pil { padding: 9px 16px; border-radius: var(--radius-20); background: var(--color-vlak); border: 1px solid var(--color-lijn); color: var(--color-inkt); }
.pil-aan { background: var(--color-teal-licht); border-color: var(--color-teal-licht); color: var(--color-teal-donker); font-weight: 500; }

/* Steps on content pages */
.stap { display: flex; gap: 16px; align-items: flex-start; }
.stap-tekst { display: flex; flex-direction: column; gap: 6px; }
.stap-tekst h3 { font-size: var(--text-20); font-weight: 600; line-height: 1.3; }
.stap-tekst p { color: var(--color-zacht); font-size: var(--text-17); }

/* Forms */
.formulier { background: var(--color-grond); border: 1px solid var(--color-lijn); border-radius: var(--w-rand); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld label { font-size: var(--text-14); font-weight: 500; }
.veld input, .veld textarea { height: 48px; padding: 0 14px; border-radius: var(--radius-10); border: 1px solid var(--color-leeg); font: inherit; background: var(--color-vlak); color: var(--color-inkt); width: 100%; }
.veld textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: none; border-color: var(--color-teal); }
.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { display: none; border-radius: var(--w-rand); padding: 14px 16px; font-weight: 500; }
.melding:target { display: block; }
.melding-goed { background: var(--color-groen-licht); color: var(--color-groen-tekst); }
.melding-fout { background: var(--color-rood-licht); color: var(--color-rood); }

/* Closing band */
.slot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.slot-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.slot-met-beeld { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px; }
.slot-met-beeld .slot-tekst { flex: 1 1 380px; }
.slot-beeld { flex: 0 1 220px; height: 220px; display: flex; align-items: center; justify-content: center; background: var(--color-teal-licht); border-radius: 20px; }
.slotkop { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; line-height: 1.15; color: var(--color-vlak); max-width: 760px; }

/* Beeld (docs/29 §5): the four colour themes of the canvas "Jelto illustratiesysteem", as in the app's styles.css.
   A path carries only the class of its colour slot (vul-hoofd, vul-detail, vul-accent); the theme class fills it in. */
.beeld-teal { --beeld-hoofd: var(--color-teal); --beeld-detail: var(--color-vlak); --beeld-accent: var(--color-accent); --beeld-grond: var(--color-teal-licht); }
.beeld-amber { --beeld-hoofd: var(--color-amber); --beeld-detail: var(--color-vlak); --beeld-accent: var(--color-teal); --beeld-grond: var(--color-amber-licht); }
.beeld-kernel { --beeld-hoofd: var(--color-teal-licht); --beeld-detail: var(--color-teal); --beeld-accent: var(--color-amber); --beeld-grond: var(--color-inkt); }
.beeld-groen { --beeld-hoofd: var(--color-groen); --beeld-detail: var(--color-vlak); --beeld-accent: var(--color-inkt); --beeld-grond: var(--color-groen-licht); }
.beeld .vul-hoofd { fill: var(--beeld-hoofd); }
.beeld .vul-detail { fill: var(--beeld-detail); }
.beeld .vul-accent { fill: var(--beeld-accent); }
.beeld-cirkel { background: var(--beeld-grond); border-radius: 9999px; }
span.beeld { display: inline-flex; flex-shrink: 0; }
span.beeld svg { display: block; max-width: 100%; height: auto; }
.beeldband { background: var(--beeld-grond); display: flex; align-items: center; justify-content: center; }
.beeldband-hoog { height: 220px; }
.beeldband-laag { height: 170px; }
.kaart-beeld { overflow: hidden; padding: 0; }
.kaart-beeld .laan-inhoud { padding: 28px; display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; }
.kaart-beeld .stapkaart-inhoud { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.stapkaart-nummer { font-size: var(--text-14); font-weight: 600; color: var(--color-teal-donker); }
.stapkaart-inhoud h3 { font-size: var(--text-18); }
.stapkaart-inhoud p { color: var(--color-zacht); font-size: var(--text-15); }
.belofte-beeld { gap: 10px; }
.belofte-beeld h3 { margin-top: 2px; }
.prijskaart > .beeld { margin-bottom: -6px; }
.strip-item { align-items: center; gap: 14px; }
.agentkaart .beeld { margin-bottom: 10px; }
.faq-tweeluik { gap: 32px 40px; }
.faq-tweeluik .sectiekop { gap: 12px; }
.faq-tweeluik .beeld { margin-top: 12px; }
.faq-lijst { flex: 2 1 480px; min-width: 0; }
.beeldpaneel { position: relative; min-width: 0; border-radius: 28px; overflow: hidden; background: var(--beeld-grond); }
.beeldpaneel-home { flex: 1 1 420px; height: 460px; }
.held-paneel { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.held-paneel .beeldpaneel-home { flex: none; }
.bijschrift { font-size: var(--text-13); color: var(--color-zacht); }
.beeldpaneel-topic { flex: 1 1 380px; height: 380px; }
.beeldpaneel > span { position: absolute; display: block; }
.beeldpaneel-home .bp-1 { left: 6%; top: 24px; transform: rotate(-8deg); }
.beeldpaneel-home .bp-2 { right: 8%; top: 40px; transform: rotate(6deg); }
.beeldpaneel-home .bp-3 { left: 22%; bottom: 10px; }
.beeldpaneel-topic .bp-1 { left: 10%; top: 40px; }
.beeldpaneel-topic .bp-2 { right: 8%; bottom: 30px; }
.beeldpaneel-topic .bp-3 { right: 14%; top: 26px; transform: rotate(8deg); }
.beeldpaneel-kaart { position: absolute; left: 50%; top: 46%; transform: translate(-36%, -50%); width: 280px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: var(--text-14); }
.beeldpaneel-kaart .eyebrow { font-size: var(--text-14); font-weight: 500; }
.beeldpaneel-kaart .half { font-weight: 500; }
.beeldpaneel-kaart .knop { align-self: flex-start; height: 36px; padding: 0 14px; font-size: var(--text-14); font-weight: 500; }
.held-beeld { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.held-beeld .held-tekst { flex: 1 1 420px; max-width: none; }
.stappaneel { flex: 1 1 380px; height: 300px; border-radius: 24px; background: var(--beeld-grond); display: flex; align-items: center; justify-content: center; }
.tweeluik-stap:nth-child(even) { flex-direction: row-reverse; }
.pakketbalk-beeld { background: var(--beeld-grond); border-color: transparent; border-radius: 24px; padding: 36px; gap: 20px 28px; justify-content: flex-start; }
.pakketbalk-beeld .pakketbalk-tekst { flex: 1 1 360px; }
.verder-kaarten { display: flex; flex-wrap: wrap; gap: 16px; }
.verder-kaart { flex: 1 1 240px; padding: 18px; display: flex; align-items: center; gap: 14px; color: var(--color-inkt); font-weight: 500; }
.verder-kaart:hover { color: var(--color-teal-donker); border-color: var(--color-zacht); }

/* Footer */
.voet { background: var(--color-inkt); color: var(--color-leeg); font-size: var(--text-14); }
.voet-boven { padding-top: 48px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.voet-merk { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.merk-voet { color: var(--color-vlak); margin-right: 0; }
.voet-kolommen { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.voet-kolom { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.voet-kolom a { color: var(--color-leeg); padding: 4px 0; }
.voet-kolom a:hover { color: var(--color-vlak); }
.voet-titel { font-size: var(--text-13); font-weight: 600; color: var(--color-vlak); margin-bottom: 6px; }
.voet-onder { padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--w-lijn-donker); font-size: var(--text-13); color: var(--w-voet-stil); }

/* Breadcrumbs */
.kruimelpad { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: var(--text-14); }
.kruimelpad a { color: var(--color-zacht); }
.kruimelpad a:hover { color: var(--color-teal-donker); }
.kruimel-scheider { color: var(--w-voet-stil); }
.kruimelpad [aria-current] { color: var(--color-inkt); }

/* Side menu (privacy, help) */
.zijmenu { flex: 1 1 220px; max-width: 280px; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-15); }
.zijmenu-kop { font-size: var(--text-13); font-weight: 600; color: var(--color-zacht); padding: 0 12px 8px; }
.zijmenu a { padding: 8px 12px; border-radius: 8px; color: var(--color-inkt); }
.zijmenu-help a { padding: 10px 12px; }
.zijmenu a.aan { background: var(--color-teal-licht); color: var(--color-teal-donker); font-weight: 500; }
.zijmenu a.sub { padding: 7px 12px 7px 24px; font-size: var(--text-14); color: var(--color-zacht); }
.zijmenu a.sub-aan { color: var(--color-teal-donker); font-weight: 600; }

/* Privacy chapters */
.hoofdstukken { flex: 999 1 560px; min-width: 0; max-width: 780px; display: flex; flex-direction: column; }
.hoofdstuk { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; border-top: 1px solid var(--color-lijn); scroll-margin-top: 16px; }
.hoofdstuk h2 { font-size: var(--text-24); font-weight: 600; line-height: 1.25; }
.hoofdstuk-nr { color: var(--color-zacht); font-variant-numeric: tabular-nums; }
.kader { border-radius: var(--w-rand); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.kader-teal { background: var(--color-teal-licht); }
.kader-amber { background: var(--color-amber-licht); }
.kader-kop { font-size: var(--text-13); font-weight: 600; color: var(--color-teal-donker); }
.kader-amber .kader-kop { color: var(--color-amber-donker); }
.kader-tekst { font-size: var(--text-17); line-height: 1.55; }
.kader-tekst p + p { margin-top: 8px; }

/* Help */
.helpbalk { background: var(--color-vlak); border-bottom: 1px solid var(--color-lijn); padding: 20px 0; }
.helpbalk-rij { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.helpbalk-titel { font-weight: 600; font-size: var(--text-17); color: var(--color-inkt); }
.zoekveld { flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--color-leeg); border-radius: 24px; background: var(--color-vlak); }
.zoekveld:focus-within { border-color: var(--color-teal); }
.zoekveld input { flex-grow: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: transparent; height: 44px; color: var(--color-inkt); }
.artikel { flex: 999 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.helpkop { margin-top: 16px; font-size: var(--text-24); font-weight: 600; line-height: 1.25; }
.helptekst { font-size: var(--text-17); line-height: 1.6; }
.helptekst p + p, .helptekst p + ul, .helptekst ul + p { margin-top: 12px; }
.helptekst ul ul { margin: 6px 0 0; padding-left: 20px; }
.helptekst h3 { font-size: var(--text-18); margin-top: 8px; }
.helplijst { line-height: 1.6; }
.helpstappen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.helpstappen li { display: flex; gap: 14px; align-items: flex-start; }
.helpstap { font-size: var(--text-17); line-height: 1.6; padding-top: 1px; }
.nuttig { margin-top: 16px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.nuttig-knoppen { display: flex; gap: 10px; }
.nuttig .melding { flex-basis: 100%; }
.leesook-blok { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.leesook { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--color-inkt); }
.leesook:hover { color: var(--color-inkt); border-color: var(--color-teal); }
.leesook .label { margin-top: 4px; }
.helpcategorie { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; scroll-margin-top: 16px; }

/* Phone and tablet widths */
@media (max-width: 960px) {
  .hoofdmenu, .inloggen { display: none; }
  .menuknop { display: block; }
  .kop-rij { flex-wrap: nowrap; justify-content: space-between; }
  .merk { margin-right: 0; }
}
@media (max-width: 720px) {
  .band { padding: 56px 0; }
  .beeldpaneel-home { height: 360px; }
  .beeldpaneel-topic { height: 300px; }
  .beeldpaneel > span svg { width: auto; height: 120px; }
  .beeldpaneel-home .bp-3 svg { height: 150px; }
  .beeldpaneel-kaart { width: min(280px, 80%); }
  .stappaneel { height: 240px; }
  .stappaneel svg { height: 170px; width: auto; }
  .tweeluik-stap:nth-child(even) { flex-direction: row; }
  .held { padding: 40px 0 56px; }
  .held-inhoud { padding: 28px 0 56px; }
  .zijmenu { max-width: none; flex-basis: 100%; }
  .tabel-stapel thead { display: none; }
  .tabel-stapel, .tabel-stapel tbody, .tabel-stapel tr, .tabel-stapel td { display: block; width: 100%; }
  .tabel-stapel tr { padding: 14px 18px; }
  .tabel-stapel tbody tr + tr { border-top: 1px solid var(--color-lijn-zacht); }
  .tabel-stapel tbody tr + tr td { border-top: 0; }
  .tabel-stapel td, .tabel-stapel td.rechts { padding: 4px 0; text-align: left; }
  /* Tap targets of at least 44 high on a phone (canvas "toegankelijkheid", F1 and F3). */
  .voet-kolom { gap: 0; }
  .voet-kolom a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .meer, .kruimelpad a, .zijmenu a, .verder-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .beeldpaneel-kaart .knop { height: 44px; }
  .pil, .helpbalk-titel { display: inline-flex; align-items: center; min-height: 44px; }
  .tabel-stapel td[data-kop]::before { content: attr(data-kop); display: block; font-size: var(--text-12); font-weight: 600; color: var(--color-zacht); }
}
@media (max-width: 480px) {
  .kolom { padding: 0 16px; }
  .kop-acties { gap: 8px; }
  .laan, .formulier, .pakketbalk, .stappenkaart { padding: 22px 20px; }
  .agentkaart { padding: 22px 20px; }
  .balk-los { padding: 0 16px; }
  .knoppen .knop { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
}