/*
  Stivato marketingsite. Kleuren volgen het logo: navy #181f38 en groen #48af5c. Acties in een donkerder groen (--action) voor genoeg contrast.
  Plus Jakarta Sans voor koppen en Inter voor tekst.
  De pagina is lichtgrijs (--page) met witte kaarten zonder rand, met een schaduw. Iconen uit Phosphor, net als de app. Kleur is betekenis, geen versiering: donkergroen voor acties, logogroen voor kleine accenten en status. Groene iconen op wit gebruiken --lime-600 (3:1).
  Maten op een 8px grid in rem, 4px alleen voor details. Knoppen en velden radius 8, kaarten radius 16, foto's radius 24.
*/

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #181f38;
  --ink-2: #1e293b;
  --text: #0f172a;
  --muted: #5b6578; /* 5,3:1 op --page */
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --soft: #f8fafc;
  --soft-2: #f1f5f9;
  --page: #f3f5f8; /* de achtergrond van elke pagina, witte kaarten liggen erop */
  --white: #ffffff;
  --action: #2f7d42; /* groen voor knoppen en links, 5,08:1 met wit */
  --action-hover: #276b38;
  --tint: #ecf7ee;
  --tint-soft: #f5faf6;
  --lime: #48af5c;
  --lime-600: #3f9c52;
  --lime-50: #ecf7ee;
  --on-dark: #cbd5e1;
  --on-dark-muted: #94a3b8;
  --wait: #9a4a00;
  --wait-bg: #fff4e5;

  --font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  --s-1: 0.25rem;
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 2.5rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 5rem;
  --s9: 6rem;
  --s10: 8rem;

  --r-ctl: 0.5rem;
  --r-card: 1rem;
  --r-photo: 1.5rem;
  --shell: 80rem;
  --margin: 2rem;
  --hdr: 5rem; /* ruimte die het zwevende menu boven de pagina inneemt */

  --shadow-shot: 0 2rem 4rem -1.5rem rgb(24 31 56 / 0.22), 0 0.5rem 1rem -0.5rem rgb(24 31 56 / 0.08);
  --shadow-card: 0 1px 2px rgb(24 31 56 / 0.04), 0 0.5rem 1.5rem -0.5rem rgb(24 31 56 / 0.12);
  --shadow-float: 0 0 0 1px rgb(24 31 56 / 0.05), 0 1rem 2.5rem -0.5rem rgb(24 31 56 / 0.2);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--action); text-underline-offset: 0.2em; }
a:hover { color: var(--action-hover); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -4rem; z-index: 100; background: var(--ink); color: var(--white); padding: var(--s1) var(--s2); border-radius: var(--r-ctl); }
.skip:focus { top: var(--s2); color: var(--white); }
.mono { font-variant-numeric: tabular-nums; font-size: 0.875em; font-weight: 500; }
.small { font-size: 0.875rem; line-height: 1.5rem; color: var(--muted); }
.center { text-align: center; }

.shell { width: 100%; max-width: calc(var(--shell) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }

/* Typografie */
.display {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 3.75rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--muted); max-width: 38rem; text-wrap: pretty; }
.accent { color: var(--lime-600); }
.punt { margin-left: -0.08em; }

/* Kleine hulpklassen voor ruimte, altijd op het grid */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.pt-0 { padding-top: 0; }
.pt-7 { padding-top: var(--s7); }
.mx-auto { margin-left: auto; margin-right: auto; }
.img-natural { aspect-ratio: auto; }

/* Knoppen en links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 3rem; padding: 0 var(--s3);
  border-radius: var(--r-ctl); border: 1px solid transparent;
  font: 600 0.9375rem/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--action); color: var(--white); }
.btn-primary:hover { background: var(--action-hover); color: var(--white); }
.btn-primary svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.btn-primary:hover svg { transform: translateX(2px); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { height: 2.5rem; padding: 0 var(--s2); font-size: 0.9375rem; }
.link { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.3em; }
.link:hover { text-decoration-color: currentColor; }
.link svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.link:hover svg { transform: translateX(2px); }
.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.cta-note { margin-top: var(--s2); font-size: 0.875rem; color: var(--muted); }

.checks { display: grid; gap: var(--s1); margin-top: var(--s2); }
.checks li { display: flex; gap: var(--s1); align-items: flex-start; }
.checks svg { flex: none; width: 1.25rem; height: 1.5rem; color: var(--lime-600); }
.on-dark .checks svg, .dark .checks svg { color: var(--lime); }
.checks--row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 0.9375rem; color: var(--muted); }

/* Kopbalk */
/* Zwevend menu: een afgeronde balk met ruimte erboven. Samen 5rem hoog, net als de sticky offsets op de pagina. */
.hdr { position: sticky; top: 0; z-index: 50; padding-top: var(--s2); margin-bottom: calc(-1 * var(--hdr)); pointer-events: none; }
.hdr-bar {
  height: 4rem; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s2) 0 var(--s3);
  pointer-events: auto; border-radius: var(--r-card); border: 1px solid rgb(24 31 56 / 0.08);
  background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 0.5rem 2rem -0.75rem rgb(24 31 56 / 0.18), 0 1px 2px rgb(24 31 56 / 0.04);
}
.hdr-link { padding: var(--s1) 0; color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.hdr-link:hover { color: var(--action); }
.hdr-link + .btn { margin-left: calc(-1 * var(--s1)); }
/* Logo: SVG uit /assets/img/merk, hoogte op het grid, breedte volgt */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; width: auto; height: 2rem; }
.nav { display: flex; gap: var(--s3); margin-right: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: var(--s1) 0; }
.nav { margin-left: var(--s3); }
.nav a:hover { color: var(--action); }
.nav a[aria-current="page"] { color: var(--action); font-weight: 600; }
.menu-btn { display: none; margin-left: auto; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 1.25rem; height: 1.25rem; }

/* Secties */
.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s7) 0; }
.section--soft { background: var(--soft); }
.section--white { background: var(--white); }
.intro { max-width: 46rem; }
.intro .lead { margin-top: var(--s2); }
.intro.center { margin: 0 auto; }
.intro.center .lead { margin-left: auto; margin-right: auto; }

/* Browserframe rond een echt scherm */
.browser { position: relative; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-shot); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: var(--s2); height: 2rem; padding: 0 var(--s2); background: var(--soft); border-bottom: 1px solid var(--line); }
.browser-dots { display: flex; gap: var(--s1); }
.browser-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-2); }
.browser-url { flex: 1; max-width: 18rem; margin: 0 auto; height: 1.25rem; border-radius: 0.25rem; background: var(--white); border: 1px solid var(--line); font-size: 0.75rem; line-height: 1.125rem; color: var(--muted); text-align: center; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

/* Hero: tekst links, rechts de backoffice met de scanner-app rechtsvoor en twee korte notities. Licht en zonder foto. */
.hero { position: relative; overflow: hidden; padding: calc(var(--hdr) + var(--s7)) 0 var(--s7); background: radial-gradient(60rem 36rem at 75% 55%, var(--soft-2) 0%, rgb(241 245 249 / 0) 70%), var(--white); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); gap: var(--s7); align-items: center; }
.hero-sub { margin-top: var(--s3); max-width: 32rem; font-family: var(--display); font-size: 1.375rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.hero .lead { margin-top: var(--s2); max-width: 34rem; font-size: 1rem; line-height: 1.5rem; }
.hero .cta-group { margin-top: var(--s4); }
.hero .checks--row { margin-top: var(--s3); gap: var(--s1) var(--s3); font-size: 0.8125rem; }
.hero .checks--row svg { width: 1rem; height: 1.25rem; }
@media (min-width: 75rem) { .hero .checks--row { flex-wrap: nowrap; white-space: nowrap; } }
.hero-visual { position: relative; padding: var(--s8) var(--s7) var(--s9) 0; }
.hero-visual::before { content: ""; position: absolute; left: 0; right: 10%; bottom: var(--s2); height: var(--s6); border-radius: 50%; background: rgb(24 31 56 / 0.14); filter: blur(1.5rem); }
.hero-visual .browser { position: relative; }
.hero-phones { position: absolute; z-index: 1; right: 0; bottom: var(--s9); display: flex; align-items: flex-end; width: 40%; }
.hero-phones .phone { width: 56%; padding: 0.375rem; border-radius: 1.5rem; }
.hero-phones .phone img { border-radius: 1.125rem; }
.hero-phones .phone + .phone { margin-left: -12%; margin-bottom: calc(-1 * var(--s3)); }
.notitie { position: absolute; z-index: 1; display: grid; gap: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.notitie b { font-size: 1rem; line-height: 1.5rem; color: var(--ink); }
.notitie svg { position: absolute; width: 3rem; height: 3rem; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notitie--boven { top: 0; left: 18%; text-align: right; }
.notitie--boven svg { right: -3.5rem; top: var(--s3); }
.notitie--onder { right: 0; bottom: 0; padding-left: var(--s6); text-align: left; }
.notitie--onder svg { left: 0; top: calc(-1 * var(--s4)); transform: scaleX(-1) rotate(-20deg); }
.js .hero-phones { opacity: 0; transform: translateY(var(--s2)); transition: opacity 0.5s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s; }
.js .notitie { opacity: 0; transition: opacity 0.4s var(--ease) 0.5s; }
.js .hero-visual.is-in .hero-phones, .js .hero-visual.is-in .notitie { opacity: 1; transform: none; }
.link--play { gap: var(--s1); }
.link--play svg { width: 1.5rem; height: 1.5rem; }
.link--play:hover svg { transform: none; }

/* Rond vinkje voor een gelukte actie, in de regel op de homepage en op Lancering */
.toast-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--lime-600); color: var(--white); }
.toast-icon svg { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }

/* Voordelen: kop met uitleg eronder, drie kolommen daaronder */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--tint); color: var(--action); margin-bottom: var(--s3); }
.icon-tile svg { width: 1.5rem; height: 1.5rem; }

/* Donkere band met foto: voor wie */
/* Foto's op donker krijgen de tint van het logo-navy: de foto geeft alleen licht en donker, de kleur komt van --ink */
.band-list { display: grid; gap: var(--s1); }
.band-list a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; gap: var(--s2); align-items: center;
  padding: var(--s2) var(--s3); border-radius: var(--r-card);
  background: rgb(24 31 56 / 0.55); border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--white); text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.band-list a:hover { background: rgb(24 31 56 / 0.75); border-color: rgb(255 255 255 / 0.28); color: var(--white); }
.band-list .ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: rgb(255 255 255 / 0.08); }
.band-list .ico svg, .band-list a > svg { width: 1.25rem; height: 1.25rem; }
.band-list a > svg { color: var(--on-dark-muted); transition: transform 0.2s var(--ease); }
.band-list a:hover > svg { transform: translateX(2px); color: var(--white); }
.band-list b { display: block; font-size: 1rem; }
.band-list span span { display: block; font-size: 0.875rem; color: var(--on-dark); }

/* Koppelingen: tegels met de naam en of het al werkt */
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.logos li { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: var(--s2) var(--s3); border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(24 31 56 / 0.04); }
.logos img { width: auto; max-width: 9rem; object-fit: contain; }
/* Hoogte per logo, zodat brede en ronde logo's optisch even zwaar zijn */
.logo--s { height: 1.5rem; }
.logo--m { height: 2rem; }
.logo--l { height: 2.5rem; }
.logo--xl { height: 3rem; }

.more { margin-top: var(--s4); }
.feature .checks { margin-top: var(--s3); }

/* Foto met afgeronde hoeken */
.photo { position: relative; overflow: hidden; border-radius: var(--r-photo); background: var(--soft-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { max-width: 30rem; justify-self: center; box-shadow: var(--shadow-shot); }

/* Slotblok: donkere band met een foto, onder elke pagina */
.closing { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: var(--s9) 0; isolation: isolate; }
.closing-photo { position: absolute; inset: 0; z-index: -1; background: var(--ink) url("../img/foto/afsluiter-magazijn.webp") right center / cover no-repeat; background-blend-mode: luminosity; }
.closing-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(24 31 56 / 0.97) 0%, rgb(24 31 56 / 0.88) 50%, rgb(24 31 56 / 0.6) 100%); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: center; }
.closing .h2 { color: var(--white); }
.closing .lead { color: var(--on-dark); margin-top: var(--s2); }
.closing .cta-note { color: var(--on-dark-muted); }
.closing .link { color: var(--white); text-decoration-color: rgb(255 255 255 / 0.4); }
.closing .checks { gap: var(--s2); color: var(--on-dark); }

/* Rondleiding met tabs */
.tour { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 20rem; gap: var(--s5); align-items: start; margin-top: var(--s7); }
.tour-tabs { display: grid; gap: var(--s-1); grid-row: span 2; }
.tour-tab {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  padding: var(--s2); border: 1px solid transparent; border-radius: var(--r-ctl); background: none;
  font: 500 1.0625rem/1.5rem var(--font); color: var(--muted); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.tour-tab svg { width: 1.25rem; height: 1.25rem; flex: none; }
.tour-tab:hover { color: var(--ink); background: rgb(24 31 56 / 0.04); }
.tour-tab[aria-selected="true"] { background: var(--white); border-color: var(--line); color: var(--action); font-weight: 700; box-shadow: 0 1px 2px rgb(24 31 56 / 0.06); }
.tour-panel { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s5); align-items: start; animation: fade-in 0.4s var(--ease); }
.tour-panel[hidden] { display: none; }
.tour-text .h3 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; }
.tour-text p { margin-top: var(--s2); color: var(--muted); }
.tour-text .link { margin-top: var(--s3); }
.tour-note { grid-column: 2 / 4; font-size: 0.8125rem; color: var(--muted); }
@keyframes fade-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Overstappen in stappen */

/* Vertrouwen */
.trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.trust .lead { margin-top: var(--s2); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.tile b { display: flex; align-items: center; gap: var(--s1); font-size: 1.0625rem; }
.tile b svg { width: 1.25rem; height: 1.25rem; color: var(--lime-600); }
.tile p { margin-top: var(--s1); color: var(--muted); }

/* Vragen */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
.faq-grid .small { margin-top: var(--s3); }
.faq { display: grid; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) 0; font-family: var(--display); font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--action); transition: transform 0.2s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s6) var(--s3) 0; color: var(--muted); max-width: 44rem; }

/* Subpagina's */
.page-hero { padding: calc(var(--hdr) + var(--s8)) 0 var(--s7); background: linear-gradient(180deg, var(--tint-soft) 0%, var(--white) 100%); }
.page-hero.center { text-align: center; }
.page-hero.center .display { margin: 0 auto; max-width: 52rem; }
.page-hero.center .cta-group { justify-content: center; }
.page-hero .lead { margin-top: var(--s3); }
.page-hero.center .lead { margin-left: auto; margin-right: auto; }
.crumbs { display: flex; gap: var(--s1); font-size: 0.875rem; color: var(--muted); margin-bottom: var(--s3); }
.page-hero.center .crumbs { justify-content: center; }
.crumbs a { color: var(--muted); }
.page-hero .display { max-width: 56rem; }
.page-shot { margin-top: var(--s7); }

/* Kop met uitleg eronder, nooit naast elkaar */
.split { display: grid; gap: var(--s2); max-width: 46rem; }
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.lines li { padding: var(--s4); border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); }
.lines p { margin-top: var(--s1); color: var(--muted); }
.lines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lines--pain li { background: var(--soft); border-color: transparent; }

.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
.feature + .feature { margin-top: var(--s9); }
.feature--flip > :first-child { order: 2; }
.feature:has(> .phones) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature .lead { margin-top: var(--s2); }

.dark { background: var(--ink); color: var(--white); }
.dark .h2, .dark .h3 { color: var(--white); }
.dark .lead { color: var(--on-dark); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.facts li { padding-top: var(--s2); border-top: 2px solid var(--lime); }
.facts b { display: block; color: var(--white); font-size: 1.125rem; }
.facts span { display: block; margin-top: var(--s-1); color: var(--on-dark-muted); }
.facts--light { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin-top: var(--s5); }
.facts--light li { border-top-color: var(--lime); }
.facts--light b { color: var(--ink); }
.facts--light span { color: var(--muted); }

.conn-group + .conn-group { margin-top: var(--s9); }
.conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
/* Tegel per koppeling: logo en status bovenaan, wat er gekoppeld wordt eronder */
.conn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.conn-logo { display: flex; align-items: center; gap: var(--s2); height: 3rem; }
.conn-logo img { width: auto; max-width: 9rem; object-fit: contain; }
.conn-logo--eigen .icon-tile { margin: 0; }
.conn-logo b { font-family: var(--display); font-size: 1.125rem; line-height: 1.5rem; color: var(--ink); }
.conn small { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; line-height: 1.5rem; }
.conn .is-later .conn-logo { filter: grayscale(1); opacity: 0.5; }
.flag { flex: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; padding: var(--s-1) var(--s1); border-radius: 999px; }
.flag--ok { background: var(--tint); color: var(--action); }
.flag--p { background: var(--soft); color: var(--muted); }

.notice { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s5); border-radius: var(--r-ctl); background: var(--wait-bg); color: var(--wait); font-size: 0.9375rem; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.plan--pick { border: 2px solid var(--action); box-shadow: 0 1.5rem 3rem -1.5rem rgb(47 125 66 / 0.3); }
.plan-tag { position: absolute; top: calc(-1 * var(--s2)); left: var(--s4); padding: var(--s-1) var(--s2); border-radius: 999px; background: var(--action); color: var(--white); font-size: 0.75rem; line-height: 1.5rem; font-weight: 600; }
.plan-price { margin-top: var(--s3); font-size: 2.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.plan-price small { display: block; margin-top: var(--s1); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.plan .small { margin-top: var(--s1); }
.plan .checks { margin: var(--s3) 0 var(--s4); }
.plan .btn, .plan .link { margin-top: auto; }
.plan .btn { width: 100%; }

.form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.what { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-card); background: var(--soft); }
.form { display: grid; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-shot); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.field { display: grid; gap: var(--s1); }
.field label { font-weight: 600; font-size: 0.9375rem; }
.hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: var(--s1) var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--white);
  font: 400 1rem/1.5 var(--font); color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #64748b; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--lime-600); outline-offset: 0; border-color: var(--lime-600); }
.field [aria-invalid="true"] { border-color: #b4231f; }
.err { color: #b4231f; font-size: 0.875rem; }
.hp { position: absolute; left: -9999px; }

.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--s5); font-size: 1.5rem; }
.prose p, .prose ul { margin-top: var(--s2); color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: var(--s3); }

/* Footer */
.ftr { background: var(--soft); border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s4); font-size: 0.9375rem; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) repeat(2, minmax(0, 2fr)); gap: var(--s5); }
.ftr-fn ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
.ftr-about p { margin-top: var(--s2); color: var(--muted); max-width: 22rem; }
.ftr h2 { font-size: 0.875rem; font-weight: 700; margin-bottom: var(--s2); }
.ftr ul { display: grid; gap: var(--s1); }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--action); }
.ftr-base { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }

/* Verschijnen bij scrollen, alleen met JS en zonder reduced motion. In de hero korter, die moet er meteen staan. */
.js .reveal { opacity: 0; transform: translateY(1rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: 0.08s; }
.js .reveal-d2 { transition-delay: 0.16s; }
.js .reveal-d3 { transition-delay: 0.24s; }
.js .hero .reveal { transition-duration: 0.45s; }
.js .hero .reveal:not(.is-in) { transform: translateY(0.5rem); }
.js .hero .reveal-d1, .js .hero .reveal-d2 { transition-delay: 0.05s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 68rem) {
  .tour { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .tour-tabs { grid-row: auto; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin: 0 calc(-1 * var(--margin)); padding: var(--s-1) var(--margin) var(--s1); scroll-padding: 0 var(--margin); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tour-tab { scroll-snap-align: start; }
  .tour-panel { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tour-note { grid-column: auto; }
  .trust, .faq-grid, .form-grid, .feature, .feature:has(> .phones) { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .feature--flip > :first-child { order: 0; }
  .conn, .plans, .lines--3, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .ftr-about { grid-column: 1 / -1; }
}

/* Menu inklappen */
@media (max-width: 60rem) {
  .nav { display: none; }
  .hdr-demo { display: none; }
  .hdr .btn-primary { margin-left: 0; }
  .hdr.is-open .nav { margin-left: 0; }
  .menu-btn { display: inline-flex; margin-left: 0; }
  .hdr.is-open .nav {
    display: grid; position: absolute; top: calc(100% + var(--s1)); left: 0; right: 0; gap: 0;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: var(--s1) var(--s3) var(--s3);
  }
  .hdr.is-open .nav a { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
}

/* Mobiel */
@media (max-width: 47.99rem) {
  :root { --margin: 1rem; --hdr: 4rem; }
  .section { padding: var(--s7) 0; }
  .page-hero { padding: calc(var(--hdr) + var(--s6)) 0 var(--s5); }
  .hdr { padding-top: var(--s1); }
  .hdr-bar { height: 3.5rem; gap: var(--s2); padding: 0 var(--s1) 0 var(--s2); }
  .hdr .btn-sm { padding: 0 var(--s2); font-size: 0.875rem; }
  .brand img { height: 1.75rem; }
  .browser-bar { height: 1.5rem; }
  .browser-url { display: none; }
  .tiles, .lines, .lines--3, .conn, .plans, .facts, .field-row { grid-template-columns: minmax(0, 1fr); }
  .conn li { padding: var(--s2) var(--s3); }
  .form { padding: var(--s3); }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-fn { grid-column: 1 / -1; }
  .plan-tag { left: var(--s3); }
}

/* Nieuwe secties op kleinere schermen */
@media (max-width: 68rem) {
  .hero-grid, .closing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}
@media (max-width: 47.99rem) {
  .hero { padding: calc(var(--hdr) + var(--s6)) 0 var(--s7); }
  .closing { padding: var(--s7) 0; }
  .band-list a { padding: var(--s2); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zonder JS staan alle schermen van de rondleiding onder elkaar */
.tour:not(.is-ready) { grid-template-columns: minmax(0, 1fr); }
.tour:not(.is-ready) .tour-panel, .tour:not(.is-ready) .tour-note { grid-column: 1 / -1; }

/* Aankondiging: losse one-pager voor de lancering (templates/lancering.twig) */
.teaser-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.teaser-bar-row { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.teaser-date { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2); color: var(--white); font-size: 0.875rem; font-weight: 500; }
.teaser-date svg { width: 1rem; height: 1rem; color: var(--lime); }
.teaser { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--white); padding: var(--s10) 0 var(--s9); min-height: min(100dvh, 56rem); display: flex; align-items: center; }
.teaser-photo { position: absolute; inset: 0; z-index: -1; background: var(--ink) url("../img/foto/afsluiter-magazijn.webp") right center / cover no-repeat; background-blend-mode: luminosity; }
.teaser-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50rem 30rem at 80% 40%, rgb(72 175 92 / 0.12), transparent 70%), linear-gradient(90deg, rgb(24 31 56 / 0.97) 0%, rgb(24 31 56 / 0.9) 45%, rgb(24 31 56 / 0.7) 100%); }
.teaser-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: var(--s7); align-items: center; }
.teaser .display { color: var(--white); }
.teaser .accent { color: var(--lime); }
.teaser .lead { color: var(--on-dark); margin-top: var(--s3); max-width: 34rem; }
.teaser-visual { position: relative; }
.teaser-visual .browser { box-shadow: 0 2rem 5rem -1rem rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08); }
.countdown { position: absolute; right: calc(-1 * var(--s3)); bottom: calc(-1 * var(--s5)); display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--white); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
.countdown b { font-family: var(--display); font-size: 2.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--action); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

.signup { margin-top: var(--s5); max-width: 34rem; }
.signup-row { display: flex; gap: var(--s1); padding: var(--s1); border-radius: 0.75rem; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.18); }
.signup-row input { flex: 1; min-width: 0; height: 3rem; padding: 0 var(--s2); border: 0; border-radius: var(--r-ctl); background: var(--white); color: var(--text); font: 400 1rem/1.5 var(--font); }
.signup-row input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.signup-row input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #dc2626; }
.signup .err { display: block; margin-top: var(--s1); color: #fca5a5; }
.signup-note { margin-top: var(--s2); font-size: 0.875rem; color: var(--on-dark-muted); }
.signup-note a { color: var(--white); }
.signup-done { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); max-width: 34rem; padding: var(--s2) var(--s3) var(--s2) var(--s2); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.signup-done b { display: block; }
.signup-done span span { display: block; font-size: 0.875rem; color: var(--muted); }

.peeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.peek-img { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--s3); border-radius: var(--r-card); background: var(--soft-2); box-shadow: 0 0 0 1px rgb(24 31 56 / 0.06); }
.peek-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s var(--ease); }
.peeks li:hover .peek-img img { transform: scale(1.03); }
.peeks p { margin-top: var(--s1); color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tags li { padding: var(--s1) var(--s2); border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5rem; font-weight: 500; color: var(--ink); }

.teaser-ftr { padding: var(--s3) 0; background: var(--ink); border-top: 1px solid rgb(255 255 255 / 0.08); color: var(--on-dark-muted); font-size: 0.875rem; }
.teaser-ftr-row { display: flex; justify-content: space-between; gap: var(--s2); }
.teaser-ftr a { color: var(--on-dark); }

@media (max-width: 68rem) {
  .teaser-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .peeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countdown { right: var(--s2); }
}
@media (max-width: 47.99rem) {
  .teaser { padding: var(--s9) 0 var(--s8); min-height: 0; }
  .teaser-date { font-size: 0.8125rem; padding: var(--s-1) var(--s1); }
  .signup-row { flex-direction: column; }
  .signup-row input { flex: none; }
  .signup-row .btn { width: 100%; }
  .peeks { grid-template-columns: minmax(0, 1fr); }
  .countdown { bottom: calc(-1 * var(--s4)); padding: var(--s1) var(--s2); }
  .countdown b { font-size: 2rem; }
}

/* Uitklapmenu in de kopbalk: Functies en Voor wie */
.nav { align-items: center; }
.nav-item { position: static; }
.nav-item:has(.mega--wie) { position: relative; }
.hdr-bar { position: relative; }
.nav-top { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s1) 0; border: 0; background: none; color: var(--ink-2); font: 500 0.9375rem/1.5 var(--font); cursor: pointer; }
.nav-item { display: flex; align-items: center; }
.nav .nav-top { color: var(--ink-2); font-weight: 500; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-left: var(--s-1); padding: 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink-2); cursor: pointer; }
.nav-toggle:hover { background: var(--soft-2); color: var(--action); }
.nav-toggle svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.nav .nav-top:hover, .nav .nav-top[aria-current="page"] { color: var(--action); }
.nav .nav-top[aria-current="page"] { font-weight: 600; }
.nav-item.is-open .nav-toggle svg { transform: rotate(180deg); }
.mega {
  display: none; position: absolute; top: calc(100% + var(--s3)); left: calc(-1 * var(--s3)); z-index: 60;
  padding: var(--s3); border-radius: var(--r-card); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-float);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -2rem; height: 2rem; }
.nav-item.is-open .mega { display: grid; animation: fade-in 0.2s var(--ease); }
@media (hover: hover) and (min-width: 60.01rem) { .nav-item:hover .mega { display: grid; } }
.mega--functies { top: calc(100% + var(--s1)); left: 0; right: 0; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--s3); }
.mega--functies::before { left: 0; right: 0; }
.mega--functies .mega-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega--wie { width: 24rem; }
.mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.mega-list--1 { grid-template-columns: minmax(0, 1fr); }
.nav .mega-list a { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s1) var(--s2); border-radius: var(--r-ctl); color: var(--ink); font-size: 0.9375rem; transition: background-color 0.2s var(--ease); }
.nav .mega-list a:hover { background: var(--soft-2); color: var(--ink); }
.mega-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--tint); color: var(--action); }
.mega-ico svg { width: 1.25rem; height: 1.25rem; }
.mega-list b { display: block; font-weight: 600; line-height: 1.25rem; }
.mega-list span span { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted); font-weight: 400; }
.mega-side { padding: var(--s1) 0 var(--s1) var(--s3); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.mega-kop { font-size: 0.875rem; line-height: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: var(--s1); }
.nav .mega-side ul a { display: block; padding: var(--s-1) 0; font-size: 0.9375rem; color: var(--ink-2); }
.nav .mega-side ul a:hover { color: var(--action); }
.nav .mega-side .link { margin-top: auto; padding-top: var(--s2); color: var(--action); font-size: 0.9375rem; }

@media (max-width: 60rem) {
  .hdr.is-open .nav { max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
  .hdr.is-open .nav .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .hdr.is-open .nav .nav-top { flex: 1; padding: var(--s2) 0; border-bottom: 0; font-size: 1.0625rem; }
  .hdr.is-open .nav .nav-toggle { width: 3rem; height: 3rem; }
  .hdr.is-open .nav .mega { flex-basis: 100%; }
  .mega { position: static; width: auto; padding: 0 0 var(--s2); border: 0; box-shadow: none; }
  .mega::before { display: none; }
  .nav-item.is-open .mega { display: block; }
  .mega-list { grid-template-columns: minmax(0, 1fr); }
  .hdr.is-open .nav .mega-list a { border-bottom: 0; padding: var(--s1); }
  .mega-side { display: block; padding: var(--s1) var(--s1) 0; border: 0; }
  .mega-side .mega-kop, .mega-side ul { display: none; }
  .hdr.is-open .nav .mega-side .link { padding: 0; border: 0; }
}

/* Pagina Functies: kop, zoeken, overzicht met groepskaarten, daarna per groep een uitklaplijst */
.fn-hero { padding-bottom: var(--s7); }
.fn-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: var(--s7); align-items: center; }
.fn-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7); margin-top: var(--s5); }
.fn-stats b { display: block; font-family: var(--display); font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.fn-stats span { display: block; margin-top: var(--s1); color: var(--muted); }

.fn-search { padding: var(--s4) 0 0; }
.fn-search-box { position: relative; max-width: 40rem; margin: 0 auto; }
.fn-search-box svg { position: absolute; left: var(--s2); top: 0; width: 1.25rem; height: 3.5rem; color: var(--muted); pointer-events: none; }
.fn-search-box input { width: 100%; height: 3.5rem; padding: 0 var(--s2) 0 var(--s6); border: 1px solid var(--line-2); border-radius: 0.75rem; background: var(--soft); font: 400 1rem/1.5 var(--font); color: var(--text); }
.fn-search-box input:focus-visible { outline: 2px solid var(--action); outline-offset: 0; background: var(--white); }
.fn-search-status { max-width: 40rem; margin: var(--s1) auto 0; min-height: 1.5rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--muted); text-align: center; }

.fn-overview { padding-top: var(--s5); }
.fn-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.fn-gcard { position: relative; display: flex; flex-direction: column; padding: var(--s3); border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(24 31 56 / 0.04); }
.fn-gcard-top { display: flex; align-items: center; gap: var(--s2); }
.fn-gcard-top .icon-tile { margin: 0; }
.fn-num { font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--action); font-variant-numeric: tabular-nums; }
.fn-count { margin-left: auto; font-size: 0.8125rem; color: var(--muted); }
.fn-gcard .h3 { margin-top: var(--s2); font-size: 1.375rem; line-height: 1.75rem; }
.fn-gcard .h3 a { color: inherit; text-decoration: none; }
.fn-gcard .h3 a:hover { color: var(--action); }
.fn-gcard > p { margin-top: var(--s1); font-size: 0.9375rem; color: var(--muted); }
.fn-gcard-img { margin: var(--s3) 0 var(--s2); overflow: hidden; aspect-ratio: 16 / 10; border-radius: 0.75rem; background: var(--soft-2); box-shadow: 0 0 0 1px rgb(24 31 56 / 0.06); }
.fn-gcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fn-gcard-img.is-foto img { object-position: center; }
.fn-gcard-list { display: grid; }
.fn-gcard-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: var(--s1) 0; border-bottom: 1px solid var(--soft-2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5rem; text-decoration: none; }
.fn-gcard-list a:hover { color: var(--action); }
.fn-gcard-list svg { flex: none; width: 1rem; height: 1rem; color: var(--line-2); transform: rotate(-90deg); }
.fn-gcard-list a:hover svg { color: var(--action); }
.fn-gcard-more { margin-top: auto; padding-top: var(--s2); font-size: 0.9375rem; }

.fn-jump { position: sticky; top: 5rem; z-index: 20; background: rgb(255 255 255 / 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fn-jump ul { display: flex; gap: var(--s1); overflow-x: auto; padding: var(--s1) 0; scrollbar-width: none; }
.fn-jump ul::-webkit-scrollbar { display: none; }
.fn-jump a { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; padding: var(--s1) var(--s2); border-radius: 999px; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.fn-jump a:hover { background: var(--soft-2); color: var(--ink); }
.fn-jump a[aria-current="true"] { background: var(--ink); color: var(--white); }
.fn-jump-num { font-variant-numeric: tabular-nums; font-size: 0.75rem; opacity: 0.6; }

.fn-detail { padding-top: var(--s7); }
.fn-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: start; scroll-margin-top: 5rem; }
.fn-group + .fn-group { margin-top: var(--s9); }
.fn-group-head { position: sticky; top: 10rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s2); align-items: center; }
.fn-group-head .icon-tile { margin: 0; grid-row: 1; grid-column: 1; }
.fn-group-head .fn-num { grid-row: 1; grid-column: 2; }
.fn-group-head .h2 { grid-column: 1 / -1; margin-top: var(--s1); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.fn-group-head p { grid-column: 1 / -1; color: var(--muted); }
.fn-items { display: grid; gap: var(--s1); }
.fn-item { border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); scroll-margin-top: 5rem; }
.fn-item[open] { border-color: var(--line-2); box-shadow: 0 0.5rem 1.5rem -1rem rgb(24 31 56 / 0.2); }
.fn-item summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer; list-style: none; }
.fn-item summary::-webkit-details-marker { display: none; }
.fn-item-text { flex: 1; min-width: 0; }
.fn-item-text b { display: block; font-family: var(--display); font-size: 1.0625rem; color: var(--ink); }
.fn-item-text span { display: block; font-size: 0.9375rem; color: var(--muted); }
.fn-item-count { flex: none; padding: 0 var(--s1); border-radius: 999px; background: var(--tint); color: var(--action); font-size: 0.8125rem; line-height: 1.5rem; font-weight: 500; }
.fn-item summary > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--muted); transition: transform 0.2s var(--ease); }
.fn-item[open] summary > svg { transform: rotate(180deg); }
.fn-item ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s4); margin: 0 var(--s3); padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5rem; }
.fn-item li { display: flex; gap: var(--s1); align-items: flex-start; }
.fn-item li svg { flex: none; width: 1rem; height: 1.5rem; color: var(--lime-600); }
.fn-item li.later { color: var(--muted); }
.fn-item li.later svg { color: var(--line-2); }
.fn-item li[hidden], .fn-item[hidden], .fn-group[hidden] { display: none; }
.fn-later { flex: none; margin-left: auto; padding: 0 var(--s1); border-radius: 999px; background: var(--soft-2); font-size: 0.75rem; line-height: 1.5rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fn-item mark { background: var(--lime-50); color: inherit; border-radius: 2px; }
.fn-empty { padding: var(--s5) 0; text-align: center; color: var(--muted); }
.fn-note { display: flex; gap: var(--s1); align-items: center; margin-top: var(--s7); font-size: 0.875rem; color: var(--muted); }
.fn-note svg { width: 1rem; height: 1rem; }
.is-searching .fn-overview { display: none; }
.is-searching .fn-group + .fn-group { margin-top: var(--s6); }

@media (max-width: 75rem) {
  .fn-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 68rem) {
  .fn-hero-grid, .fn-group { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .fn-group-head { position: static; }
}
@media (max-width: 47.99rem) {
  .fn-jump { top: 4rem; }
  .fn-groups { grid-template-columns: minmax(0, 1fr); }
  .fn-stats b { font-size: 2.25rem; }
  .fn-item summary { padding: var(--s2); flex-wrap: wrap; }
  .fn-item-count { order: 3; }
  .fn-item ul { grid-template-columns: minmax(0, 1fr); margin: 0 var(--s2); }
}

/* Voor wie: een kaart per doelgroep met foto, en de bedrijfstypes */
.wie-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.wie-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(24 31 56 / 0.04); }
.wie-card-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--soft-2); }
.wie-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.wie-card:hover .wie-card-img img { transform: scale(1.03); }
.wie-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s3); }
.wie-card .h3 a { color: inherit; text-decoration: none; }
.wie-card .h3 a:hover { color: var(--action); }
.wie-card-body > p { margin-top: var(--s1); color: var(--muted); }
.wie-card .checks { margin-bottom: var(--s3); }
.wie-card-more { margin-top: auto; }
.types { display: grid; gap: var(--s2); counter-reset: type; }
.types li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); counter-increment: type; }
.types li::before { content: counter(type); grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tint); color: var(--action); font-family: var(--display); font-weight: 700; }
.types b { color: var(--ink); line-height: 1.5rem; }
.types span { color: var(--muted); font-size: 0.9375rem; line-height: 1.5rem; }
@media (max-width: 68rem) { .wie-cards { grid-template-columns: minmax(0, 1fr); max-width: 36rem; } }

/* Prijzen: vergelijking per pakket. Het aanbevolen pakket krijgt een lichte achtergrond. */
.compare { max-width: 100%; margin-top: var(--s5); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.compare table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5rem; }
.compare th, .compare td { padding: var(--s1) var(--s3); text-align: left; }
.compare thead th { padding-top: var(--s2); padding-bottom: var(--s2); font-family: var(--display); font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.compare thead th:not(:first-child), .compare td { width: 9rem; text-align: center; }
.compare tbody th { font-weight: 400; color: var(--ink-2); }
.compare .compare-kop th { padding-top: var(--s3); font-weight: 700; font-size: 0.8125rem; color: var(--muted); }
.compare td svg { width: 1.25rem; height: 1.5rem; color: var(--lime-600); vertical-align: top; }
.compare-nee { display: inline-block; width: 0.75rem; height: 2px; border-radius: 1px; background: var(--line-2); vertical-align: middle; }
.compare .is-pick { background: var(--tint-soft); }
.compare thead .is-pick { color: var(--action); }
@media (max-width: 47.99rem) {
  .compare table { min-width: 0; font-size: 0.875rem; line-height: 1.25rem; }
  .compare th, .compare td { padding: var(--s1) var(--s2); }
  .compare thead th { font-size: 0.875rem; }
  .compare thead th:not(:first-child), .compare td { width: 4.5rem; padding-left: var(--s1); padding-right: var(--s1); }
}


/* Homepage: telefoonframes voor de scanner-app en de tijdlijn bij overstappen */
/* Telefoonframes met echte schermen uit de scanner-app. Het middelste staat vooraan. */
.phones { position: relative; display: flex; justify-content: center; align-items: center; padding: var(--s4) 0 var(--s6); }
.phone { flex: none; width: 32%; padding: var(--s1); border-radius: 2rem; background: var(--ink); box-shadow: var(--shadow-shot); }
.phone img { display: block; width: 100%; height: auto; border-radius: 1.5rem; }
.phone--midden { position: relative; z-index: 1; width: 40%; }
.phone--links { margin-right: -6%; transform: translateY(var(--s4)) rotate(-3deg); opacity: 0.92; }
.phone--rechts { margin-left: -6%; transform: translateY(var(--s4)) rotate(3deg); opacity: 0.92; }
.phones--twee .phone { width: 40%; }
.phones--twee .phone--midden { width: 46%; margin-left: -6%; }

/* Overstappen als tijdlijn met grote cijfers */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.timeline li { padding-top: var(--s3); border-top: 2px solid var(--ink); }
.timeline-nr { display: block; font-family: var(--display); font-size: 3.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.timeline-dag { display: block; margin-top: var(--s2); font-size: 0.8125rem; line-height: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--action); }
.timeline .h3 { margin-top: var(--s1); }
.timeline p { margin-top: var(--s1); color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 68rem) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .timeline { gap: var(--s4) var(--s3); }
  .timeline-nr { font-size: 2.5rem; }
  .phone { padding: var(--s-1); border-radius: 1.25rem; }
  .phone img { border-radius: 1rem; }
}

/* Tussen tablet en breed scherm past de link Demo aanvragen niet in de kopbalk. Demo staat ook in het slotblok en de footer. */
@media (max-width: 75rem) { .hdr-demo { display: none; } }

/*
  Homepage in beweging. Zoals een app die je ziet werken: kleine voorbeelden spelen één keer af als een blok in beeld komt.
  Alleen transform en opacity. app.js zet .is-in, bij reduced motion meteen. Zonder JS staat alles er direct.
  .stagger: de kinderen komen na elkaar binnen (--i zet app.js). .stagger--traag voor een voorbeeld dat je stap voor stap leest.
*/
.js .stagger > * { opacity: 0; transform: translateY(0.75rem) scale(0.97); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger--traag > * { transition-delay: calc(0.15s + var(--i, 0) * 450ms); }



/* Je dag in één oogopslag: tegels zoals op Home */
.dag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.dag li { display: grid; align-content: space-between; gap: var(--s2); min-height: 8rem; padding: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 1px 2px rgb(24 31 56 / 0.04), 0 0.5rem 1rem -0.5rem rgb(24 31 56 / 0.1); }
.dag-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s1); }
.dag-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--tint); color: var(--action); }
.dag-ico svg { width: 1.25rem; height: 1.25rem; }
.dag-num { font-family: var(--display); font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dag-num--tijd { color: var(--wait); }
.dag b { display: block; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink); }
.dag li > span:last-child > span { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted); }

/* Rondleiding als één kaart met de tabs erboven */
.tour--kaart { grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s6); }
.tour--kaart .tour-tabs { grid-row: auto; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; gap: var(--s1); }
.tour-card { background: var(--white); border-radius: var(--r-photo); box-shadow: 0 2rem 4rem -1.5rem rgb(24 31 56 / 0.18), 0 0.5rem 1rem -0.5rem rgb(24 31 56 / 0.06); overflow: hidden; }
.tour--kaart .tour-panel { grid-column: auto; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6); align-items: center; padding: var(--s6); }
.tour--kaart .tour-text { order: -1; }
.tour--kaart .browser { box-shadow: 0 0 0 1px var(--line), 0 1.5rem 3rem -1.5rem rgb(24 31 56 / 0.25); }
.tour--kaart .tour-note { grid-column: auto; text-align: center; }
.tour-foot { display: flex; justify-content: space-between; padding: 0 var(--s4) var(--s2); }
.tour-foot[hidden] { display: none; }
.tour-foot button { display: inline-flex; align-items: center; gap: var(--s1); min-height: 3rem; padding: 0; background: none; border: 0; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tour-foot button:hover { color: var(--ink); }
.tour-foot svg { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.tour-foot [data-tour-prev] svg { transform: rotate(180deg); }
.tour-foot [data-tour-next] { color: var(--action); }
.tour-foot [data-tour-next]:hover { color: var(--action-hover); }
.tour-foot [data-tour-next]:hover svg { transform: translateX(2px); }

/* Koppelingen: ringen, lijnen naar het midden met een puls, vierkante tegels die zacht op en neer gaan. Stil bij reduced motion. */
.hubsec .intro .more { margin-top: var(--s2); }
.hub { position: relative; width: 100%; max-width: 60rem; aspect-ratio: 960 / 448; margin: var(--s2) auto calc(-1 * var(--s4)); }
.hub-ringen { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
.hub-ringen span { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(24 31 56 / 0.07); transform: translate(-50%, -50%); }
.hub-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-basis path { fill: none; stroke: rgb(72 175 92 / 0.35); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* De puls loopt over de lijn met stroke-dashoffset. Licht voor de browser, en de enige uitzondering op transform en opacity. */
.hub-puls path { fill: none; stroke: var(--lime-600); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 191; stroke-dashoffset: 200; animation: hub-puls 4.2s linear infinite; }
.hub-puls path.terug { animation-direction: reverse; }
@keyframes hub-puls { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.hub-tegels { position: absolute; inset: 0; }
.hub-tegel { position: absolute; display: flex; align-items: center; justify-content: center; width: 3.5rem; aspect-ratio: 1; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-card); transform: translate(-50%, -50%); animation: hub-zweef 6s ease-in-out infinite; }
.hub-tegel img { width: 2rem; height: 2rem; object-fit: contain; border-radius: 0.375rem; }
.hub-tegel.is-aan { box-shadow: 0 0 0 0.25rem rgb(72 175 92 / 0.14), var(--shadow-card); }
.hub-tegel--dhl { background: #ffcc00; }
/* Bij hover verschijnt de naam boven de tegel. Alleen ter herkenning, de tegel is geen link. De schermlezer leest de alt-tekst. */
.hub-tegel:hover { z-index: 2; animation-play-state: paused; }
.hub-naam { position: absolute; left: 50%; bottom: calc(100% + var(--s1)); padding: var(--s-1) var(--s1); border-radius: var(--r-ctl); background: var(--ink); color: var(--white); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 0.25rem); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.hub-naam::after { content: ""; position: absolute; left: 50%; top: 100%; border: 0.25rem solid transparent; border-top-color: var(--ink); transform: translateX(-50%); }
.hub-tegel:hover .hub-naam { opacity: 1; transform: translate(-50%, 0); }
.hub-tegel--dhl img { width: 2.5rem; border-radius: 0; }
@keyframes hub-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.25rem; } }
.hub-kern { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 5rem; aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0.5rem rgb(72 175 92 / 0.08), var(--shadow-float); transform: translate(-50%, -50%); }
.hub-kern img { width: 3rem; height: 3rem; }
.hub-kern::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: hub-ring 3.2s var(--ease) infinite; }
@keyframes hub-ring { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(1.9); opacity: 0; } }
@media (max-width: 47.99rem) {
  .hub { margin-top: var(--s4); }
  .hub-tegel { width: 2.5rem; border-radius: 0.75rem; }
  .hub-tegel img { width: 1.5rem; height: 1.5rem; }
  .hub-tegel--dhl img { width: 2rem; }
  .hub-tegel.is-aan { box-shadow: 0 0 0 0.125rem rgb(72 175 92 / 0.14), var(--shadow-card); }
  .hub-kern { width: 3.5rem; }
  .hub-kern img { width: 2rem; height: 2rem; }
}
@media (max-width: 40rem) {
  .hub-tegel.is-extra { display: none; }
  .hub-tegel { width: 2rem; border-radius: 0.5rem; }
  .hub-tegel img { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; }
  .hub-kern { width: 3rem; }
  .hub-kern img { width: 1.75rem; height: 1.75rem; }
}

/* Regels: Wanneer, En, Dan en het resultaat */
.regel { width: 100%; max-width: 30rem; margin: 0 auto; }
.regel-stap + .regel-stap { position: relative; padding-top: var(--s4); }
.regel-stap + .regel-stap::before { content: ""; position: absolute; left: 2.25rem; top: var(--s1); height: var(--s2); border-left: 2px dashed var(--line-2); }
.regel-lbl { display: block; margin-bottom: var(--s1); font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.regel-kaart { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
.regel-kaart small { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.regel-kaart b { display: block; font-size: 1.125rem; line-height: 1.75rem; color: var(--ink); }
.regel-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tint); color: var(--action); }
.regel-ico svg { width: 1.25rem; height: 1.25rem; }
.regel-ico--en { background: var(--wait-bg); color: var(--wait); }
.regel-ico--dan { background: var(--ink); color: var(--white); }
.regel-uit { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: var(--s2) var(--s3) var(--s2) var(--s2); background: var(--tint); border-radius: var(--r-card); }
.regel-uit b { display: block; font-size: 0.9375rem; color: var(--ink); }
.regel-uit span span { display: block; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Tijdlijn: de lijn tekent zich per stap */
.timeline li { position: relative; border-top: 0; }
.timeline li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lime-600); transform-origin: left; }
.js .timeline li::before { transform: scaleX(0); transition: transform 0.8s var(--ease); transition-delay: calc(0.1s + var(--i, 0) * 120ms); }
.js .timeline.is-in li::before { transform: none; }

@media (max-width: 68rem) {
  .tour--kaart .tour-tabs { justify-content: start; }
  .tour--kaart .tour-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
}
@media (max-width: 68rem) {
  .hero-visual { max-width: 44rem; padding: var(--s7) var(--s5) var(--s7) 0; }
}
@media (max-width: 47.99rem) {
  .hero-visual { padding: 0 var(--s4) var(--s6) 0; }
  .hero-phones { width: 44%; bottom: 0; }
  .hero-phones .phone { padding: 0.25rem; border-radius: 1rem; }
  .hero-phones .phone img { border-radius: 0.75rem; }
  .notitie { display: none; }
  .dag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
  .dag li:last-child { grid-column: 1 / -1; }
  .dag li { min-height: 7rem; }
  .tour--kaart .tour-panel { padding: var(--s3); }
  .tour-foot { padding: 0 var(--s3); }
}

/*
  Eén achtergrond. Elke pagina is --page, zonder witte vlakken of verlopen. Witte kaarten hebben geen rand, alleen een schaduw.
  Donkere blokken staan als afgerond paneel in de pagina.
*/
body, .hero, .page-hero, .section--soft, .section--white, .ftr { background: var(--page); }
.ftr { border-top: 1px solid var(--line); }
.closing + .ftr { border-top: 0; } /* na het slotblok is de lijn dubbel */
.closing { margin: 0 var(--s3) var(--s3); border-radius: var(--r-photo); }

.logos li, .lines li, .conn li, .plan, .form, .tags li, .fn-gcard, .fn-item, .fn-item[open], .wie-card, .types li, .compare,
.dag li, .tour-tab[aria-selected="true"], .what, .lines--pain li {
  background: var(--white); border-color: transparent; box-shadow: var(--shadow-card);
}
.plan--pick { border-color: var(--action); }
.regel-kaart, .mega, .hdr.is-open .nav { border-color: transparent; }
.fn-search-box input { background: var(--white); border-color: transparent; box-shadow: var(--shadow-card); }

@media (max-width: 47.99rem) {
  .closing { margin: 0 var(--s1) var(--s1); border-radius: var(--r-card); }
}

/*
  Homepage in hoofdstukken. Een hoofdstuk opent met een grote groene zin (.hoofdstuk-kop, een h2).
  Daarna steeds hetzelfde patroon: .stuk is tekst met een groot beeld, .stuk--om zet het beeld links. .breed staat over de hele kolom.
  Het tweede hoofdstuk is een donker paneel.
*/
.hero + .hoofdstuk { padding-top: var(--s8); }
.hoofdstuk { padding: var(--s10) 0 0; }
.hoofdstuk--laatste { padding-bottom: var(--s10); }
.hoofdstuk-kop { max-width: 20ch; font-family: var(--display); font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; color: var(--lime-600); text-wrap: balance; }
.stuk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; margin-top: var(--s9); }
.hoofdstuk-kop + .stuk, .hoofdstuk-kop + .breed { margin-top: var(--s7); }
.stuk--om > :first-child { order: 2; }
.stuk-kop { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.stuk .lead { margin-top: var(--s2); }
.stuk .checks { margin-top: var(--s3); }
.stuk .more { margin-top: var(--s3); }
.stuk--vragen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.stuk--vragen .small { margin-top: var(--s2); }
.breed { margin-top: var(--s9); }
.breed .intro .lead { margin-top: var(--s2); }
.breed .tour--kaart { margin-top: var(--s5); }
.stuk .phones { padding: var(--s2) 0 var(--s5); }
.stuk .dag { gap: var(--s2); }

/* Voor wie: donkere band met een foto van het team, als afgerond paneel tussen de hoofdstukken */
.band { position: relative; overflow: hidden; isolation: isolate; margin: var(--s10) var(--s3) 0; padding: var(--s9) 0; border-radius: var(--r-photo); background: var(--ink); color: var(--white); }
.band-photo { position: absolute; inset: 0; z-index: -1; background: var(--ink) url("../img/foto/team-scannen.webp") 60% center / cover no-repeat; background-blend-mode: luminosity; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(24 31 56 / 0.96) 0%, rgb(24 31 56 / 0.82) 40%, rgb(24 31 56 / 0.35) 70%, rgb(24 31 56 / 0.6) 100%); }
.band-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }
.band .h2 { color: var(--white); }
.band .lead { color: var(--on-dark); margin-top: var(--s3); }
.band + .hoofdstuk { padding-top: var(--s10); }

/* Je gegevens: de vier punten als witte kaarten */
.tiles--kaart { gap: var(--s2); }
.tiles--kaart .tile { padding: var(--s3); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-card); }

/* Inpakken: een groot voorbeeld dat één keer afspeelt. Vinkjes en de melding komen binnen met transform en opacity. */
.inpak { display: grid; gap: var(--s2); width: 100%; max-width: 32rem; margin: 0 auto; padding: var(--s3); background: var(--white); border-radius: var(--r-photo); box-shadow: var(--shadow-shot); }
.inpak svg { width: 1.25rem; height: 1.25rem; flex: none; }
.inpak-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.inpak-kop small { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted); }
.inpak-kop b { display: block; font-family: var(--display); font-size: 1.25rem; line-height: 1.75rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.inpak-chip { display: inline-flex; align-items: center; gap: var(--s1); height: 2rem; padding: 0 var(--s2); border-radius: var(--r-ctl); background: var(--wait-bg); color: var(--wait); font-size: 0.875rem; font-weight: 600; }
.inpak-scan { display: flex; align-items: center; gap: var(--s1); height: 3rem; padding: 0 var(--s2); border-radius: var(--r-ctl); background: var(--page); box-shadow: inset 0 0 0 2px var(--lime); color: var(--muted); font-size: 0.9375rem; }
.inpak-regels { display: grid; gap: var(--s1); }
.inpak-regels li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s2); border-radius: var(--r-ctl); background: var(--page); }
.inpak-regels b { display: block; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink); }
.inpak-regels small { display: block; font-size: 0.8125rem; line-height: 1.25rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.inpak-regels em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.inpak-vink { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); }
.inpak-vink svg { position: relative; z-index: 1; width: 1rem; height: 1rem; color: var(--white); }
.inpak-vink::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime-600); }
.inpak-klaar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border-radius: var(--r-card); background: var(--tint); }
.inpak-klaar b { display: block; font-size: 1rem; color: var(--ink); }
.inpak-klaar span span { display: block; font-size: 0.875rem; color: var(--ink-2); }
.js .inpak-vink::before, .js .inpak-vink svg { opacity: 0; transform: scale(0.4); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); transition-delay: calc(0.5s + var(--i) * 0.6s); }
.js .inpak.is-in .inpak-vink::before, .js .inpak.is-in .inpak-vink svg { opacity: 1; transform: none; }
.js .inpak-klaar { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.5s var(--ease) 2.5s, transform 0.6s var(--ease) 2.5s; }
.js .inpak.is-in .inpak-klaar { opacity: 1; transform: none; }

@media (max-width: 68rem) {
  .band-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .stuk, .stuk--vragen { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .stuk--om > :first-child { order: 0; }
}
@media (max-width: 47.99rem) {
  .hero + .hoofdstuk { padding-top: var(--s6); }
  .hoofdstuk { padding-top: var(--s8); }
  .hoofdstuk--laatste { padding-bottom: var(--s8); }
  .band { margin: var(--s8) var(--s1) 0; padding: var(--s7) 0; border-radius: var(--r-card); }
  .band-list a { padding: var(--s2); }
  .band + .hoofdstuk { padding-top: var(--s8); }
  .stuk, .breed { margin-top: var(--s7); }
  .hoofdstuk-kop + .stuk, .hoofdstuk-kop + .breed { margin-top: var(--s5); }
  .inpak { padding: var(--s2); }
  .inpak-kop b { font-size: 1.125rem; }
}

/* Overstappen op de homepage: de stappen onder elkaar, met een lijn tussen de nummers */
.stuk--start { align-items: start; }
.timeline--verticaal { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
.timeline--verticaal li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s3); padding: 0 0 var(--s5); }
.timeline--verticaal li:last-child { padding-bottom: 0; }
.timeline--verticaal li::before { top: 3.5rem; bottom: 0; left: calc(1.75rem - 1px); right: auto; width: 2px; height: auto; transform-origin: top; }
.timeline--verticaal li:last-child::before { display: none; }
.js .timeline--verticaal li::before { transform: scaleY(0); }
.js .timeline--verticaal.is-in li::before { transform: none; }
.timeline--verticaal .timeline-nr { grid-row: span 3; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--lime-600); color: var(--white); font-size: 1.125rem; letter-spacing: 0; }
.timeline--verticaal .timeline-dag { margin-top: var(--s-1); }
.timeline--verticaal .h3 { font-size: 1.25rem; }
.timeline--verticaal p { max-width: 32rem; }

/* Je gegevens: vier punten op een rij, zonder kaarten */
.zeker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); text-align: center; }
.zeker-ico { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: var(--s2); border-radius: 50%; background: var(--tint); color: var(--action); }
.zeker-ico svg { width: 1.75rem; height: 1.75rem; }
.zeker b { display: block; font-family: var(--display); font-size: 1.125rem; line-height: 1.5rem; color: var(--ink); }
.zeker p { max-width: 16rem; margin: var(--s1) auto 0; font-size: 0.9375rem; line-height: 1.5rem; color: var(--muted); }
.zeker-blok, .zeker-blok + .stuk { margin-top: var(--s10); }
@media (max-width: 68rem) { .zeker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); } }
@media (max-width: 47.99rem) {
  .zeker-blok, .zeker-blok + .stuk { margin-top: var(--s8); }
  .timeline--verticaal li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s2); }
  .timeline--verticaal .timeline-nr { width: 3rem; height: 3rem; font-size: 1rem; }
  .timeline--verticaal li::before { top: 3rem; left: calc(1.5rem - 1px); }
  .faq details p { padding-right: 0; }
  .zeker { grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s5); }
}

/* Aankondiging (lancering): licht, in dezelfde stijl als de homepage. Overschrijft de eerdere donkere opzet. */
html { background: var(--page); }
.teaser-bar { top: var(--s2); }
.teaser-bar-row { height: 4rem; padding: 0 var(--s2) 0 var(--s3); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-card); }
.teaser-bar .brand img { height: 2rem; width: auto; }
.teaser-date { border: 0; background: var(--tint); color: var(--action); font-weight: 600; }
.teaser-date svg { color: var(--action); }
.teaser { background: var(--page); color: var(--text); min-height: 0; padding: calc(var(--s10) + var(--s4)) 0 var(--s8); }
.teaser .display { color: var(--ink); }
.teaser .accent { color: var(--lime-600); }
.teaser .lead { color: var(--muted); margin-top: var(--s2); }
.teaser-visual .browser { box-shadow: var(--shadow-shot); }
.signup-row { background: var(--white); border: 0; box-shadow: var(--shadow-card); }
.signup-row input { background: var(--page); }
.signup-row input:focus-visible { outline-color: var(--action); }
.signup .err { color: #b4231f; }
.signup-note { color: var(--muted); }
.signup-note a { color: var(--action); }
.signup-done { box-shadow: var(--shadow-card); }
.teaser-komt { padding-top: var(--s8); }
.teaser-komt .peeks { margin-top: var(--s7); }
.peek-img { background: var(--white); box-shadow: var(--shadow-card); }
.teaser-ftr { background: var(--page); border-top: 0; color: var(--muted); }
.teaser-ftr a { color: var(--ink-2); }
@media (max-width: 47.99rem) {
  .teaser { padding: var(--s10) 0 var(--s6); }
  .teaser-bar-row { height: 3.5rem; }
  .teaser-bar .brand img { height: 1.75rem; }
}

/* Taalkeuze met vlaggen (templates/_components/talen.twig) */
.talen { position: relative; }
.talen summary { display: inline-flex; align-items: center; gap: var(--s1); min-height: 2.75rem; padding: 0 var(--s1); border-radius: var(--r-ctl); font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.talen summary::-webkit-details-marker { display: none; }
.talen summary:hover { background: var(--page); }
.vlag { flex: none; width: 1.5rem; height: 1rem; border-radius: 2px; box-shadow: 0 0 0 1px rgb(24 31 56 / 0.1); }
.talen-lijst { position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 60; display: grid; min-width: 11rem; padding: var(--s1); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-float); }
.talen-lijst a { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.talen-lijst a:hover { background: var(--page); color: var(--ink); }
.talen-lijst a[aria-current] { font-weight: 700; }
.hdr .talen { margin-left: auto; }
.teaser-rechts { display: inline-flex; align-items: center; gap: var(--s1); }
@media (max-width: 47.99rem) {
  .talen-code { display: none; }
  .teaser-date { display: none; }
  .hdr-bar { gap: var(--s1); }
  .talen summary { padding: 0 var(--s-1); }
}