/* Curriva-website. Kleuren uit het C-beeldmerk en app/src/app/curriva-brand.css. */

@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Basis, gelijk aan de lichte app */
  --ink: #243953;
  --ink-strong: #172a43;
  --muted: #5d6f87;
  --bg: #ffffff;
  --bg-cool: #f6f9fd;
  --line: rgb(36 57 83 / 0.10);
  --line-strong: rgb(36 57 83 / 0.16);

  /* Actie: diep blauw uit het logo */
  --blue: #185dd4;
  --blue-hover: #124eb8;
  --blue-soft: #eaf2ff;
  --blue-soft-hover: #dce8fd;
  --blue-text: var(--blue);
  --blue-text-hover: var(--blue-hover);

  /* Vlakken: kaarten, knoppen en zachte tinten. In het donker wisselen ze mee (zie Donkere weergave). */
  --surface: #ffffff;
  --soft-teal: #e6f5f2;
  --soft-violet: #f3edfd;
  --soft-pink: #fdf0f5;

  /* De drie linten van het beeldmerk */
  --ribbon-top: linear-gradient(100deg, #03e0e0, #07b4f4 55%, #1765ee);
  --ribbon-left: linear-gradient(200deg, #2a7ff8, #5a4ef7 45%, #8a1cf6);
  --ribbon-bottom: linear-gradient(100deg, #ff168f, #fc4f4f 55%, #ffc414);
  --spectrum: linear-gradient(90deg, #03e0e0, #07b4f4, #1765ee, #5a4ef7, #8a1cf6, #ff168f, #fc4f4f, #ffc414);

  /* Merkverloop van de Vandaag-hero */
  --brand-gradient: linear-gradient(118deg, #185dd4 0%, #4a47e0 38%, #9a37d6 68%, #e82872 100%);
  --brand-ink: linear-gradient(100deg, #185dd4, #9a37d6 55%, #e82872);

  /* Tint per onderdeel, zoals --icon-tint-* in de app */
  --tint-cyan: #00769f;
  --tint-violet: #873de4;
  --tint-blue: #185dd4;
  --tint-pink: #d91d66;
  --tint-orange: #b96200;
  --tint-teal: #007f7f;

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 32px);
  --gap: clamp(40px, 6vw, 72px);
  --section: clamp(48px, 6vw, 80px);
  --section-top: clamp(40px, 5vw, 64px);
  --radius: 20px;
  --frame-pad: 6px;
  --frame-radius: min(1.6vw, 18px);

  /* transitions.dev: gedeelde bewegingswaarden */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Texts reveal */
  --stagger-dur: 700ms;
  --stagger-distance: 12px;
  --stagger-stagger: 80ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: #5d6f87;
  --tabs-text-active: #172a43;
  --tabs-bar-bg: rgb(36 57 83 / 0.06);
  --tabs-pill-bg: var(--surface);
  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: #5d6f87;
  --shimmer-highlight: #873de4;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  /* Streaming text */
  --stream-gap: 45ms;
  --stream-fade: 350ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal (wissel tussen route-stappen) */
  --panel-open-dur: 400ms;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
/* Een <picture> met een donkere bron gedraagt zich als de img erin. */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink-strong); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
svg { flex-shrink: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 8px 14px; border-radius: 10px; background: var(--ink-strong); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }

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

.ink {
  background: var(--brand-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Met Curriva: elk probleem uit ‘Herkenbaar?’ krijgt hier zijn antwoord. */
.section-answer { padding-top: 0; }
.answers { list-style: none; display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.answer {
  display: flex; flex-direction: column; padding: 28px;
  border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px color-mix(in srgb, var(--tint) 60%, transparent);
  position: relative; overflow: hidden;
}
.answer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tint); opacity: 0.8; }
.answer-before { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.answer-before svg { flex: none; width: 18px; height: 18px; fill: currentColor; opacity: 0.7; }
.answer-before s { text-decoration-color: color-mix(in srgb, #e0336b 70%, transparent); text-decoration-thickness: 1.5px; }
.answer h3 { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.3; }
.answer-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 14%, transparent); }
.answer-icon svg { width: 14px; height: 14px; fill: var(--tint); }
.answer > p:last-child { margin-top: 10px; color: var(--muted); line-height: 1.6; }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.25;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0;
}
.btn-lg { padding: 14px 16px 14px 20px; font-size: 1.0625rem; }
.btn-sm { padding: 8px 12px; font-size: 0.9375rem; border-radius: 10px; }
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 10px 24px -12px rgb(24 93 212 / 0.75);
}
.btn-primary:hover { background: var(--blue-hover); }
.btn-soft { background: var(--blue-soft); color: var(--blue-text); }
.btn-soft:hover { background: var(--blue-soft-hover); }
.btn-white { background: var(--surface); color: var(--blue-text); box-shadow: 0 12px 28px -14px rgb(23 42 67 / 0.6); }
.btn-white:hover { background: #f1f6ff; }
.btn-white:focus-visible { outline-color: #fff; }
.btn-icon { width: 18px; height: 18px; fill: currentColor; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.btn:hover .btn-icon { transform: translateX(2px); }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--blue-text); text-decoration: none; padding: 12px 4px;
}
.link-more:hover { color: var(--blue-text-hover); }
.t-learn-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.link-quiet { font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.link-quiet:hover { color: var(--blue-text); }

.assurance { font-size: 0.9375rem; color: var(--muted); }
.assurance svg { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; fill: currentColor; }

/* ---------- Kop ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; height: 68px; gap: 16px; }
.header-side { display: flex; flex: 1; align-items: center; }
.header-actions { justify-content: flex-end; gap: 8px; }
.header-nav { display: none; gap: 4px; }
.header-nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.header-nav a:hover { color: var(--blue-text); background: var(--bg-cool); }
.header-nav a[aria-current="page"] { color: var(--ink-strong); background: var(--bg-cool); }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.wordmark { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.045em; color: var(--ink-strong); line-height: 1; }
.wordmark span { color: #e82872; }
.brand-sm img { width: 24px; height: 24px; }
.brand-sm .wordmark { font-size: 1.25rem; }

.header-actions .link-quiet, .header-actions .btn { display: none; }
.menu-toggle {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-strong);
}
.menu-toggle svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: currentColor; transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out; }
.menu-toggle .icon-swap-b { opacity: 0; transform: scale(0.25); filter: blur(2px); }
.menu-toggle[aria-expanded="true"] .icon-swap-a { opacity: 0; transform: scale(0.25); filter: blur(2px); }
.menu-toggle[aria-expanded="true"] .icon-swap-b { opacity: 1; transform: scale(1); filter: blur(0); }

.mobile-menu { border-top: 1px solid var(--line); background: var(--surface); }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: 12px 20px; }
.mobile-menu a:not(.btn) { padding: 12px 0; font-size: 1.125rem; font-weight: 500; color: var(--ink-strong); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu a[aria-current="page"] { color: var(--blue-text); }
.mobile-menu .btn { margin-top: 16px; padding: 14px 18px; font-size: 1.0625rem; }
.mobile-menu:not([hidden]) { animation: menu-in var(--duration-fast) var(--ease-smooth-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

@media (min-width: 960px) {
  .header-nav { display: flex; }
  .header-actions .link-quiet, .header-actions .btn { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */

.hero { position: relative; padding-top: clamp(48px, 8vw, 96px); overflow: clip; }
.hero-glow {
  position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgb(3 224 224 / 0.16), transparent 70%),
    radial-gradient(32% 38% at 50% 8%, rgb(90 78 247 / 0.10), transparent 70%),
    radial-gradient(36% 40% at 84% 30%, rgb(255 22 143 / 0.12), transparent 70%),
    radial-gradient(30% 30% at 92% 62%, rgb(255 196 20 / 0.12), transparent 70%);
}
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgb(255 255 255 / 0.8); box-shadow: 0 0 0 1px var(--line), 0 6px 20px -12px rgb(23 42 67 / 0.4);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink);
}
.eyebrow-pill .dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 200deg, #03e0e0, #1765ee, #8a1cf6, #ff168f, #fc4f4f, #ffc414, #03e0e0); }
.hero h1 {
  margin-top: 24px;
  max-width: 16ch;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.hero .lead { margin-top: 22px; max-width: 50ch; font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.55; color: var(--muted); }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.hero .assurance { margin-top: 18px; }

.hero-visual { position: relative; margin-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(64px, 8vw, 104px); }
.frame {
  margin: 0;
  padding: var(--frame-pad);
  border-radius: var(--frame-radius);
  background: rgb(255 255 255 / 0.7);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgb(23 42 67 / 0.35), 0 12px 24px -16px rgb(23 42 67 / 0.18);
}
.frame img {
  width: 100%;
  border-radius: max(4px, calc(var(--frame-radius) - var(--frame-pad)));
  outline: 1px solid rgb(23 42 67 / 0.08); outline-offset: -1px;
}
.frame-hero { max-width: 1200px; margin-inline: auto; -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
/* Alleen het rustige bovenste deel van Vandaag: begroeting, ‘Verder waar je was’ en de drie stappen. */
.frame-hero picture { display: block; aspect-ratio: 2390 / 1240; overflow: hidden; }
.frame-hero img { height: 100%; object-fit: cover; object-position: top; }

.float-card {
  position: absolute; left: max(0px, calc(50% - 600px)); bottom: clamp(24px, 4vw, 48px);
  width: min(360px, 78vw);
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(23 42 67 / 0.06), 0 24px 48px -20px rgb(23 42 67 / 0.45);
}
.float-title { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.float-title svg { width: 16px; height: 16px; fill: var(--blue); }
.float-heading { margin-top: 10px; font-weight: 600; color: var(--ink-strong); line-height: 1.35; }
.float-text { margin-top: 4px; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }
.mini-btn { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 0.875rem; font-weight: 600; }
.mini-btn svg { width: 14px; height: 14px; fill: currentColor; }

.phone {
  position: absolute; right: max(0px, calc(50% - 590px)); bottom: 0;
  width: clamp(150px, 19vw, 230px);
  margin: 0; padding: 7px;
  border-radius: 34px;
  background: #0f1a2b;
  box-shadow: 0 30px 60px -24px rgb(15 26 43 / 0.55);
}
.phone img { border-radius: 27px; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; width: 100%; }

@media (min-width: 760px) and (max-width: 1023px) {
  /* Tablet: een kleinere kaart, zodat hij het scherm en de telefoon niet wegdrukt. */
  .float-card { width: 300px; padding: 14px 16px 16px; }
  .float-heading { font-size: 0.9375rem; }
  .float-text { font-size: 0.875rem; }
}
@media (max-width: 759px) {
  /* Op een telefoon laat de hero het telefoonscherm zien; het desktopbeeld is daar te klein. */
  .frame-hero { display: none; }
  .phone { position: relative; right: auto; bottom: auto; width: min(270px, 72vw); margin-inline: auto; }
  /* De kaart staat onder de telefoon, niet eroverheen: zo blijft het scherm leesbaar. */
  .float-card { position: relative; left: auto; bottom: auto; margin: 20px auto 0; width: min(340px, 100%); }
  .hero-visual { display: flex; flex-direction: column; padding-bottom: 8px; }
  .hero-visual .phone { order: 1; }
  .hero-visual .float-card { order: 2; }
  /* Stapbeelden: inzoomen op de linkerbovenhoek, waar de pagina begint. */
  .route-panel .frame img, .frame-wide img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 0; }
}

/* ---------- Paginakop (Functies, Opleidingen, AI en privacy, Prijzen) ---------- */

/* Kleiner dan de hero van de startpagina: eyebrow, kop en inleiding, gecentreerd op dezelfde gloed. */
.page-hero { position: relative; padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 56px); overflow: clip; }
.page-hero .hero-glow { height: 100%; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.page-hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero h1 { margin-top: 14px; max-width: 20ch; font-size: clamp(2.4rem, 5.6vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.06; }
.page-hero .lead { margin-top: 20px; max-width: 48ch; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* Springlinks naar de onderdelen van een lange pagina */
.page-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.page-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgb(255 255 255 / 0.85); box-shadow: 0 0 0 1px var(--line);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.page-jump a:hover { color: var(--ink-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.page-jump svg { width: 16px; height: 16px; fill: var(--tint); }

/* Verder lezen: een kaart per pagina, onderaan de startpagina */
.explore { list-style: none; display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 640px) { .explore { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) { .explore { grid-template-columns: repeat(4, 1fr); } }
.explore li { display: flex; }
.explore-card {
  display: flex; flex: 1; flex-direction: column; padding: 22px 22px 20px; border-radius: 16px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none;
}
/* De kaarten rijzen op met .t-stagger-line; de hover verandert daarom alleen de rand, zoals bij de sectoren. */
.explore-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 40%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--tint) 70%, transparent); }
.explore-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--tint) 12%, transparent); }
.explore-icon svg { width: 22px; height: 22px; fill: var(--tint); }
.explore-card h3 { margin-top: 18px; font-size: 1.1875rem; letter-spacing: -0.015em; }
.explore-card p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.explore-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: 0.9375rem; font-weight: 600; color: var(--blue-text); }
.explore-more svg { width: 16px; height: 16px; fill: currentColor; }
.explore-card:hover .explore-more { color: var(--blue-text-hover); }
/* Op mobiel staat het icoon naast de kop; zo blijven vier kaarten onder elkaar compact. */
@media (max-width: 639px) {
  .explore-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 18px 18px 16px; }
  .explore-card h3 { margin-top: 0; }
  .explore-card p, .explore-more { grid-column: 1 / -1; }
  .explore-card p { margin-top: 10px; }
  .explore-more { padding-top: 12px; }
}

/* ---------- Ingebouwd ---------- */

.route-docs { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line); text-align: center; }
.route-docs .explore-more { margin-top: 4px; padding-top: 0; text-decoration: none; }
.route-docs .explore-more:hover { color: var(--blue-text-hover); }
.built-in { padding-block: clamp(48px, 7vw, 72px) clamp(8px, 1.5vw, 16px); }
.built-in .container { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.built-in-label { font-size: 0.9375rem; color: var(--muted); }
.built-in-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.built-in-list li {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600; font-size: 0.9375rem; color: var(--ink-strong);
}

/* ---------- Secties ---------- */

.section { position: relative; padding-block: var(--section-top) var(--section); }
/* Ankers landen nog steeds direct onder de menubalk, ook met meer ruimte boven de sectie. */
.section[id] { scroll-margin-top: calc(20px - var(--section-top)); }
.section-cool { background: var(--bg-cool); border-block: 1px solid var(--line); }
.section-top-line { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 600; color: var(--blue-text);
}
.eyebrow svg { width: 18px; height: 18px; fill: currentColor; }
.eyebrow-tint { color: var(--tint); }
.section h2 {
  margin-top: 14px;
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.section-lead { margin-top: 20px; max-width: 52ch; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--muted); }
/* Alleen voor schermlezers en zoekmachines, zoals de kop boven de plannen. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footnote { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  .split-feature { grid-template-columns: 1fr 1fr; align-items: center; }
  .split-reverse > :first-child { order: 2; }
  .split-faq { grid-template-columns: 4fr 8fr; }
}

/* Herkenbaar */
.pains { list-style: none; counter-reset: pain; }
.pains li { display: flex; gap: 18px; padding-block: 30px; border-top: 1px solid var(--line); }
.pains li:first-child { padding-top: 0; border-top: 0; }
.pains li:last-child { padding-bottom: 0; }
.pains svg { width: 26px; height: 26px; margin-top: 2px; fill: #e0336b; }
.pains li:nth-child(2) svg { fill: #f2533f; }
.pains li:nth-child(3) svg { fill: #d97a00; }
.pains h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.35; }
.pains p { margin-top: 6px; color: var(--muted); }
@media (min-width: 1024px) { .split-problem .pains { padding-top: 8px; } }

/* Route */
.route { margin-top: clamp(36px, 5vw, 56px); }
.tabs-wrap { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
.tabs-wrap::-webkit-scrollbar { display: none; }

.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 44px;
  padding: 4px 18px 4px 8px;
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 600; font-size: 1rem; white-space: nowrap;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}
.tab-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.875rem; color: var(--tint); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--tabs-dur) var(--tabs-ease), color var(--tabs-dur) var(--tabs-ease);
}
.t-tab[aria-selected="true"] .tab-num { background: var(--tint); color: #fff; box-shadow: none; }
.t-tabs-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: 44px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  box-shadow: 0 0 0 1px rgb(23 42 67 / 0.06), 0 4px 12px -4px rgb(23 42 67 / 0.25);
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

.route-panels { display: grid; margin-top: clamp(32px, 4.5vw, 48px); }
.route-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.route-panel[hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }
.js .route-panel {
  transition:
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease),
    transform var(--panel-open-dur) var(--panel-ease),
    visibility 0s linear var(--panel-open-dur);
}
.js .route-panel[hidden] { filter: blur(var(--panel-blur)); transform: translateY(8px); }
.js .route-panel.is-active { transition-delay: 0s; }
@media (min-width: 1024px) { .route-panel { grid-template-columns: 4fr 8fr; } }
.step-label { font-size: 0.9375rem; font-weight: 600; color: var(--tint); }

/* Vorige en volgende onder de demo (main.js zet ze erin) */
.route-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: clamp(20px, 3vw, 28px); }
.route-step {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px;
  border: 0; border-radius: 999px; background: var(--surface); cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line-strong), 0 4px 12px -6px rgb(23 42 67 / 0.2);
  transition: color var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out, opacity var(--duration-quick) ease-out;
}
.route-step b { font-weight: 600; color: var(--ink-strong); transition: color var(--duration-quick) ease-out; }
.route-step svg { width: 18px; height: 18px; fill: var(--ink-strong); transition: transform var(--duration-fast) var(--ease-smooth-out), fill var(--duration-quick) ease-out; }
.route-step-prev { width: 44px; padding: 0; justify-content: center; }
.route-step:not(:disabled):hover { box-shadow: 0 0 0 1px rgb(24 93 212 / 0.35), 0 6px 16px -8px rgb(24 93 212 / 0.45); }
.route-step:not(:disabled):hover b { color: var(--blue-text); }
.route-step:not(:disabled):hover svg { fill: var(--blue); }
.route-step-next:not(:disabled):hover svg { transform: translateX(2px); }
.route-step-prev:not(:disabled):hover svg { transform: translateX(-2px); }
.route-step:disabled { opacity: 0.4; cursor: default; box-shadow: 0 0 0 1px var(--line-strong); }
@media (max-width: 479px) { .route-step-next { flex: 1; justify-content: space-between; } }
.route-text h3 { margin-top: 8px; font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.025em; line-height: 1.2; }
.route-text > p:not(.step-label) { margin-top: 16px; color: var(--muted); }

.checks { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: baseline; }
.checks svg { width: 18px; height: 18px; fill: var(--tint, var(--blue)); position: relative; top: 3px; }

/* Feedback-kaart */
.card {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -32px rgb(23 42 67 / 0.4);
}
.demo-stack { position: relative; }
.demo-stack::before {
  content: ""; position: absolute; inset: 8% -4% -6% 10%; z-index: -1; border-radius: 40px; filter: blur(40px); opacity: 0.35;
  background: var(--ribbon-bottom);
}
.split-reverse .demo-stack::before { background: var(--ribbon-left); inset: 8% 10% -6% -4%; }

.chain { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.9375rem; color: var(--ink-strong); }
.chain-step { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.chain-dot {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--muted); font-size: 0.8125rem;
  transition: background-color var(--duration-slow) var(--ease-smooth-out), box-shadow var(--duration-slow) var(--ease-smooth-out);
}
.chain-dot svg, .chain-dot b { grid-area: 1 / 1; transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out; }
.chain-dot svg { width: 15px; height: 15px; fill: #fff; opacity: 0; transform: scale(0.25); filter: blur(2px); }
.chain-dot b { font-weight: 600; }
.chain-step.is-done .chain-dot { background: var(--blue); box-shadow: none; }
.chain-step.is-done .chain-dot svg { opacity: 1; transform: scale(1); filter: blur(0); }
.chain-step.is-done .chain-dot b { opacity: 0; transform: scale(0.25); filter: blur(2px); }
.chain-line { flex: 1; min-width: 12px; height: 2px; border-radius: 2px; background: var(--line-strong); position: relative; overflow: hidden; }
.chain-line::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-very-slow) var(--ease-smooth-out); }
.chain-line.is-done::after { transform: scaleX(1); }

.feedback-body { padding: 20px 22px 22px; }
.feedback-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--muted); }
.feedback-meta svg, .feedback-source svg { width: 16px; height: 16px; fill: var(--muted); }
.feedback-meta strong { color: var(--ink-strong); font-weight: 600; }
.feedback-body blockquote { margin: 12px 0 0; padding-left: 14px; border-left: 2px solid #9db8ea; color: var(--ink-strong); font-size: 1.0625rem; }
.feedback-source { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.action-box { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line); }
.action-title, .improved-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-strong); }
.action-title svg { width: 18px; height: 18px; fill: var(--tint-pink); }
.action-box p:not(.action-title), .improved p:not(.improved-title) { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; }
.improved { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--soft-teal); box-shadow: inset 0 0 0 1px rgb(0 127 127 / 0.16); }
.improved-title svg { width: 18px; height: 18px; fill: var(--tint-teal); }
.js .improved { opacity: 0; transform: translateY(8px); filter: blur(2px); transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); }
.js .improved.is-shown { opacity: 1; transform: none; filter: none; }

.cycle { list-style: none; counter-reset: cycle; margin-top: 28px; display: grid; gap: 0; position: relative; }
.cycle li { counter-increment: cycle; position: relative; padding: 0 0 18px 44px; color: var(--ink); }
.cycle li:last-child { padding-bottom: 0; }
.cycle li::before {
  content: counter(cycle);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.8125rem; font-weight: 600; color: var(--tint-pink); background: var(--surface); box-shadow: inset 0 0 0 1.5px rgb(217 29 102 / 0.35);
}
.cycle li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(rgb(217 29 102 / 0.28), rgb(217 29 102 / 0.08)); }

/* Coach-kaart */
.coach-card { display: flex; flex-direction: column; min-height: 500px; overflow: hidden; }
.coach-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.coach-head img { width: 36px; height: 36px; }
.coach-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.coach-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--tint-teal); background: var(--soft-teal); }
.coach-status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #10a37f; }
.coach-status-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #10a37f; opacity: 0; animation: coach-pulse 2.4s var(--ease-smooth-out) infinite; }
@keyframes coach-pulse { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }
/* De context van de pagina, zoals de balk boven het coachpaneel in de app. */
.coach-context { display: flex; align-items: flex-start; gap: 8px; padding: 10px 20px; border-block: 1px solid var(--line); background: var(--bg-cool); font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.coach-context svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: var(--tint-violet); }
.coach-context strong { font-weight: 600; color: var(--ink-strong); }
.coach-context.is-changed { animation: context-flash 1200ms var(--ease-smooth-out); }
@keyframes context-flash { 0% { background: var(--soft-violet); } 100% { background: var(--bg-cool); } }
.coach-screens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.coach-screens-label { margin-right: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.coach-screen {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.coach-screen svg { width: 15px; height: 15px; fill: currentColor; }
.coach-screen:hover { color: var(--ink-strong); }
.coach-screen[aria-selected="true"] { color: var(--tint-violet); background: var(--soft-violet); box-shadow: inset 0 0 0 1.5px rgb(135 61 228 / 0.45); }
.checks strong { font-weight: 600; color: var(--ink-strong); }
@media (max-width: 479px) {
  /* Op een telefoon staat het label erboven en delen de drie knoppen de breedte. */
  .coach-screens { gap: 6px; }
  .coach-screens-label { flex-basis: 100%; }
  .coach-screen { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
}
@media (max-width: 399px) { .coach-screen svg { display: none; } }
.coach-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; line-height: 1.55; }
.bubble-user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.bubble-coach { align-self: flex-start; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-strong); border-bottom-left-radius: 6px; }
.memory { align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.8125rem; color: var(--tint-violet); background: var(--soft-violet); }
.memory svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: currentColor; }
.thinking { font-size: 0.9375rem; font-weight: 500; }
.thinking[hidden] { display: none; }
.coach-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 16px; padding: 12px 8px 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 0.9375rem; }
.replay { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--blue-soft); color: var(--blue-text); cursor: pointer; }
.replay:hover { background: var(--blue-soft-hover); }
.replay svg { width: 18px; height: 18px; fill: currentColor; }
.replay::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%); }

/* Shimmer text */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* Streaming text */
.t-stream-w {
  opacity: 0;
  filter: blur(var(--stream-blur));
  transition:
    opacity var(--stream-fade) var(--stream-ease),
    filter var(--stream-fade) var(--stream-ease);
}
.t-stream-w.is-in {
  opacity: 1;
  filter: blur(0);
}
.bubble-coach.is-waiting { visibility: hidden; }
/* Letterbalk in de coachdemo: groen = staat er, amber = deels, stippelrand = nog open (geen rood, zoals in de app). */
.coach-letters { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line); }
.coach-letters[hidden] { display: none; }
.coach-letters-badge { padding: 2px 7px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-text); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.05em; }
.coach-letters-row { flex: 1; display: flex; gap: 6px; }
.coach-letter { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 5px 0 4px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); opacity: 0.45; transform: scale(0.92); transition: transform 320ms cubic-bezier(0.3, 0.7, 0.4, 1.2), opacity 200ms, background-color 200ms; }
.coach-letter b { font-size: 1rem; line-height: 1.15; }
.coach-letter small { font-size: 0.625rem; }
.coach-letter.is-in { opacity: 1; transform: none; }
.coach-letter.is-in[data-status="ja"] { background: #e3f6ef; color: #08734f; box-shadow: inset 0 0 0 1px #b8e6d3; }
.coach-letter.is-in[data-status="deels"] { background: #fff3df; color: #b96200; box-shadow: inset 0 0 0 1px #f5d9a8; }
.coach-letter.is-in[data-status="open"] { background: var(--surface); color: #b96200; box-shadow: none; outline: 1.5px dashed #f0c98a; outline-offset: -1.5px; }
html.dark .coach-letter.is-in[data-status="ja"] { background: rgb(8 115 79 / 0.22); color: #7fd9b4; box-shadow: inset 0 0 0 1px rgb(127 217 180 / 0.3); }
html.dark .coach-letter.is-in[data-status="deels"] { background: rgb(185 98 0 / 0.22); color: #ffc477; box-shadow: inset 0 0 0 1px rgb(255 196 119 / 0.3); }
html.dark .coach-letter.is-in[data-status="open"] { color: #ffc477; outline-color: rgb(255 196 119 / 0.45); }
@media (prefers-reduced-motion: reduce) { .coach-letter { transition: none; } }

/* Schrijven */
.doc-types { display: grid; gap: 0; }
.doc-types > div { display: grid; gap: 4px; padding-block: 20px; border-top: 1px solid var(--line); }
.doc-types > div:first-child { border-top: 0; padding-top: 0; }
.doc-types > div:last-child { padding-bottom: 0; }
.doc-types dt { font-weight: 600; color: var(--ink-strong); }
.doc-types dd { color: var(--muted); }
@media (min-width: 640px) {
  .doc-types > div { grid-template-columns: 7.5rem 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  /* De lijst is hoger dan de tekst ernaast: bovenaan uitlijnen, met de eerste regel op de hoogte van de kop. */
  .split-feature:has(> .doc-types) { align-items: start; }
  .split-feature > .doc-types { padding-top: 38px; }
}
.frame-wide { margin-top: clamp(48px, 7vw, 80px); }

/* Functieraster */
.features { display: grid; gap: 48px 56px; margin-top: clamp(40px, 6vw, 56px); }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features dt { display: flex; flex-direction: column; gap: 14px; font-weight: 600; font-size: 1.125rem; color: var(--ink-strong); }
.features dt svg { width: 28px; height: 28px; fill: var(--tint); }
.features dd { margin-top: 6px; color: var(--muted); }

/* CTA midden */
.cta-band { padding-block: clamp(56px, 8vw, 88px); background: var(--bg-cool); border-top: 1px solid var(--line); position: relative; }
.cta-band::before { content: ""; position: absolute; inset: -1px 0 auto; height: 3px; background: var(--spectrum); opacity: 0.9; }
.cta-band-row { display: grid; gap: 28px; align-items: center; }
.cta-band h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.15; }
.cta-band p:not(.assurance) { margin-top: 10px; color: var(--muted); font-size: 1.125rem; }
.cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 900px) {
  .cta-band-row { grid-template-columns: 1fr auto; }
  .cta-band-actions { align-items: flex-end; }
}

/* AI */
.section-dark { background: #0f1a2b; color: #c9d5e6; overflow: hidden; isolation: isolate; }
.section-dark h2, .section-dark h3, .section-dark dt { color: #fff; }
.section-dark .eyebrow { color: #7fd8f4; }
.section-dark .section-lead { color: #a9b8cc; }
/* Een lichte sectie direct na de donkere krijgt dezelfde ruimte als onderaan. */
.section-dark + .section { padding-top: var(--section); }
.dark-glow {
  position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 70%; height: 90%;
  background:
    radial-gradient(45% 45% at 70% 30%, rgb(138 28 246 / 0.30), transparent 70%),
    radial-gradient(40% 40% at 40% 50%, rgb(7 180 244 / 0.20), transparent 70%),
    radial-gradient(35% 35% at 85% 70%, rgb(255 22 143 / 0.18), transparent 70%);
  filter: blur(20px);
}
.ai-grid { display: grid; gap: 20px; margin-top: clamp(40px, 6vw, 56px); }
@media (min-width: 900px) { .ai-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ai-col { padding: 28px; border-radius: var(--radius); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09); }
.ai-col h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.ai-col p { margin-top: 6px; color: #a9b8cc; }
.ai-list { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
.ai-list li { display: flex; gap: 12px; align-items: baseline; color: #dbe4f0; }
.ai-list svg { width: 18px; height: 18px; position: relative; top: 3px; }
.ai-yes svg { fill: #2fe0c9; }
.ai-no svg { fill: #ff7a8a; }
.privacy { display: grid; gap: 28px; margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(32px, 5vw, 44px); border-top: 1px solid rgb(255 255 255 / 0.10); }
@media (min-width: 900px) { .privacy { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.privacy dt { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.privacy dt svg { width: 20px; height: 20px; fill: #7fd8f4; }
.privacy dd { margin-top: 6px; color: #a9b8cc; }

/* AI per opdracht: een schakelaar die laat zien wat er aan- en uitgaat */
.ai-switch { overflow: hidden; }
.ai-switch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ai-switch-title { font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.ai-switch-sub { font-size: 0.875rem; color: var(--muted); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tabs-bar-bg); }
.seg button {
  height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--muted);
  transition: background-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.seg button:hover { color: var(--ink-strong); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink-strong); box-shadow: 0 0 0 1px rgb(23 42 67 / 0.06), 0 2px 8px -3px rgb(23 42 67 / 0.25); }
.ai-switch[data-mode="on"] .seg [data-ai-mode="on"] { background: var(--blue); color: #fff; }
.ai-switch-rows { list-style: none; padding: 4px 20px; }
.ai-switch-rows li {
  display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line);
  transition: opacity var(--duration-slow) var(--ease-smooth-out), filter var(--duration-slow) var(--ease-smooth-out);
}
.ai-switch-rows li:first-child { border-top: 0; }
.ai-switch[data-mode="off"] .ai-switch-rows .is-ai { opacity: 0.5; filter: saturate(0); }
.ai-switch-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--tint) 12%, transparent); }
.ai-switch-icon svg { width: 18px; height: 18px; fill: var(--tint); }
.ai-switch-rows b { display: block; font-weight: 600; color: var(--ink-strong); line-height: 1.35; }
.ai-switch-rows small { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.ai-state { display: grid; margin-left: auto; flex: none; }
.ai-state > span, .ai-state-always { grid-area: 1 / 1; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-align: center; }
.ai-state-off { color: var(--muted); background: rgb(36 57 83 / 0.07); }
.ai-state-on, .ai-state-always { color: var(--tint-teal); background: var(--soft-teal); }
.ai-switch[data-mode="off"] .ai-state-on, .ai-switch[data-mode="on"] .ai-state-off { visibility: hidden; }
.ai-switch-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg-cool); font-size: 0.875rem; color: var(--muted); }
.ai-switch-foot svg { width: 16px; height: 16px; fill: currentColor; }

/* Geheugen: een voorstel met bronnen, dat jij goedkeurt of weigert */
.memory-card { overflow: hidden; }
.memory-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.memory-head img { width: 36px; height: 36px; }
.memory-title { flex: 1; font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.memory-tag { display: grid; }
.memory-tag > span {
  grid-area: 1 / 1; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-align: center; white-space: nowrap;
  transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out;
}
.memory-tag-pending { color: var(--tint-violet); background: var(--soft-violet); }
.memory-tag-accepted { color: var(--tint-teal); background: var(--soft-teal); }
.memory-tag-rejected { color: var(--muted); background: rgb(36 57 83 / 0.07); }
.memory-card:not([data-state="pending"]) .memory-tag-pending,
.memory-card:not([data-state="accepted"]) .memory-tag-accepted,
.memory-card:not([data-state="rejected"]) .memory-tag-rejected { opacity: 0; transform: translateY(4px); filter: blur(2px); }
.memory-body { padding: 20px; }
.memory-pattern { font-size: 1.0625rem; font-weight: 500; color: var(--ink-strong); line-height: 1.5; }
.memory-sources-label { margin-top: 18px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.memory-sources { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.memory-sources li { padding: 12px 14px; border-radius: 12px; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line); }
.memory-sources blockquote { margin: 0; color: var(--ink-strong); font-size: 0.9375rem; }
.memory-sources span { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }
.memory-foot { display: grid; align-items: center; min-height: 68px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-cool); }
.memory-foot > * { grid-area: 1 / 1; }
.memory-actions { display: flex; gap: 8px; }
.memory-quiet { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.memory-quiet:hover { color: var(--ink-strong); background: var(--bg); }
.memory-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-strong); }
.memory-result svg { width: 18px; height: 18px; }
.memory-result-accepted svg { fill: var(--tint-teal); }
.memory-result-rejected svg { fill: var(--muted); }
.memory-result button { margin-left: auto; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.memory-result button:hover { color: var(--blue-text); }
.memory-card:not([data-state="pending"]) .memory-actions,
.memory-card:not([data-state="accepted"]) .memory-result-accepted,
.memory-card:not([data-state="rejected"]) .memory-result-rejected { visibility: hidden; }

/* Vragen */
.faq { border-top: 1px solid var(--line); }
.faq-aside { margin-top: 16px; max-width: 36ch; color: var(--muted); }
.faq-aside a { color: var(--blue-text); text-underline-offset: 3px; }
.faq-aside a:hover { color: var(--blue-text-hover); }
.t-acc { border-bottom: 1px solid var(--line); }
.t-acc h3 { font-size: inherit; }
.t-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 22px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 1.125rem; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.01em;
}
.t-acc-head:hover { color: var(--blue-text); }
.t-acc-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-panel-inner p { padding-bottom: 22px; max-width: 60ch; color: var(--muted); }

.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

/* Slot-CTA */
.final { padding-block: 0 var(--section); }
/* Na een koele sectie (Verder lezen) zou het paneel tegen de rand plakken. */
.section-cool + .final { padding-top: var(--section); }
.final-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(48px, 8vw, 88px) clamp(24px, 5vw, 64px);
  border-radius: 28px;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgb(74 71 224 / 0.75);
}
.final-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 50% at 12% 100%, rgb(3 224 224 / 0.35), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgb(253 148 32 / 0.40), transparent 70%);
}
.final-watermark { position: absolute; z-index: -1; right: -6%; top: -18%; width: min(52%, 460px); opacity: 0.16; filter: saturate(0) brightness(3); }
.final-riva { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: rgb(255 255 255 / 0.94); box-shadow: 0 18px 40px -18px rgb(15 26 43 / 0.6); }
.final-riva img { width: 104px; height: 104px; }
.final h2 { margin-top: 28px; max-width: 18ch; font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.08; color: #fff; }
.final-panel > p:not(.assurance) { margin-top: 16px; max-width: 46ch; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: rgb(255 255 255 / 0.88); }
.final-panel .btn { margin-top: 32px; }
.assurance-light { margin-top: 16px; color: rgb(255 255 255 / 0.85); }

/* Riva knippert af en toe */
.final-riva img { animation: riva-bob 5s ease-in-out infinite; }
@keyframes riva-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }

/* Voet */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px; }
.footer-row { display: grid; gap: 20px; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-nav a { font-weight: 400; color: var(--ink); text-decoration: none; font-size: 0.9375rem; padding-block: 4px; }
.footer-nav a:hover { color: var(--blue-text); }
.footer-note { font-size: 0.875rem; color: var(--muted); }
/* Onderste regel: copyright en juridische links links, de weergaveknop rechts. */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-legal a { font-size: 0.875rem; color: var(--muted); text-decoration: none; padding-block: 2px; }
.footer-legal a:hover { color: var(--blue-text); }
@media (min-width: 900px) {
  .footer-row { grid-template-columns: auto 1fr; }
  .footer-nav { justify-content: flex-end; }
  .footer-bottom { grid-column: 1 / -1; }
}

/* Privacyverklaring en voorwaarden: lopende tekst in één smalle kolom. */
.legal { max-width: 720px; margin-inline: auto; line-height: 1.65; }
.legal-meta { font-size: 0.9375rem; color: var(--muted); }
.legal-toc { margin-top: 24px; padding: 20px 24px; border-radius: 16px; background: var(--bg-cool); box-shadow: 0 0 0 1px var(--line); }
.legal-toc p { font-weight: 600; color: var(--ink-strong); }
.legal-toc ol { margin: 10px 0 0; padding-left: 1.4em; columns: 2 240px; column-gap: 32px; }
.legal-toc li { padding-block: 2px; break-inside: avoid; }
.section .legal h2 { margin-top: 56px; max-width: none; font-size: clamp(1.375rem, 2.4vw, 1.625rem); letter-spacing: -0.02em; line-height: 1.25; scroll-margin-top: 88px; }
.legal h3 { margin-top: 28px; font-size: 1.0625rem; }
.legal h2 + p, .legal h3 + p { margin-top: 12px; }
.legal p, .legal ul, .legal .legal-table, .legal .legal-form { margin-top: 14px; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--ink-strong); font-weight: 600; }
.legal p a, .legal li a { color: var(--blue-text); }
.legal p a:hover, .legal li a:hover { color: var(--blue-text-hover); }
.legal-table { overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 600; color: var(--ink-strong); background: var(--bg-cool); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-form { padding: 20px 24px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.legal-form p + p { margin-top: 10px; }
.legal-toc > :first-child, .legal-form > :first-child { margin-top: 0; }

/* ---------- Texts reveal (transitions.dev) ---------- */

.js .t-stagger-line {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  transition-delay: calc(var(--stagger-stagger) * var(--i, 0));
  will-change: transform, opacity, filter;
}
.js .t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.js .t-stagger.is-done .t-stagger-line { will-change: auto; }
/* Grotere vlakken komen op zonder vervaging: dat is rustiger en goedkoper. */
.js [data-reveal-frame] { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease-smooth-out), transform 800ms var(--ease-smooth-out); }
.js [data-reveal-frame].is-shown { opacity: 1; transform: none; }
.js .demo-stack[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease-smooth-out), transform 800ms var(--ease-smooth-out); }
.js .demo-stack[data-reveal].is-shown { opacity: 1; transform: none; }

/* Learn more hover (transitions.dev) */
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .t-stagger-line { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .js [data-reveal-frame], .js .demo-stack[data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .t-tabs-pill, .t-tab, .tab-num, .coach-screen { transition: none !important; }
  .coach-status-dot::after, .coach-context.is-changed { animation: none !important; }
  .js .route-panel { transition: none !important; }
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
  .t-shimmer::before { animation: none !important; }
  .t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }
  .chain-dot, .chain-dot svg, .chain-dot b, .chain-line::after, .js .improved { transition: none !important; }
  .menu-toggle svg, .btn-icon { transition: none !important; }
  .route-step, .route-step svg, .ai-switch-rows li, .seg button, .memory-tag > span { transition: none !important; }
  .mobile-menu:not([hidden]) { animation: none; }
  .final-riva img { animation: none; }
}

/* 404 */
.notfound { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.notfound h1 { margin-top: 12px; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.notfound p { max-width: 40ch; color: var(--muted); margin-bottom: 12px; }

@media (max-width: 479px) {
  .tab-long { display: none; }
  .tabs-wrap { margin-inline: 0; padding-inline: 0; }
  .t-tabs { display: flex; width: 100%; gap: 2px; }
  .t-tab { flex: 1 0 auto; justify-content: center; padding: 4px 8px 4px 4px; gap: 6px; font-size: 0.875rem; }
  .tab-num { width: 26px; height: 26px; font-size: 0.8125rem; }
  /* Vier tabbladen (Kiezen, Opbouw, Klaarzetten, Beginnen) passen alleen zonder nummers; het actieve tabblad houdt het zijne. */
  .t-tabs:has(> .t-tab:nth-child(5)) .t-tab { padding-inline: 6px; font-size: 0.8125rem; gap: 4px; }
  .t-tabs:has(> .t-tab:nth-child(5)) .t-tab:not([aria-selected="true"]) .tab-num { display: none; }
  /* Feedback · Nieuwe versie · Verwerkt past op 390 pixels met kleinere letters en een kortere lijn. */
  .chain { gap: 4px; padding: 16px 12px; font-size: 0.8125rem; }
  .chain-step { gap: 4px; }
  .chain-dot { width: 22px; height: 22px; }
  .chain-line { min-width: 6px; }
  .feedback-body { padding: 18px 16px 20px; }
}

/* Opleidingen */
.programmes-note { margin-top: clamp(28px, 4vw, 40px); max-width: 62ch; color: var(--muted); }
/* Acht sectoren als kaarten: icoon en naam op één regel, de opleidingen als gewone tekst, onderaan de formulieren als labels. */
.sectors { display: grid; gap: 12px; margin-top: clamp(48px, 7vw, 72px); }
@media (min-width: 640px) { .sectors { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1024px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sectors > div { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
/* De kaarten rijzen op met .t-stagger-line; die bezit transform en transition, dus de hover verandert alleen de rand. */
.sectors > div:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 40%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--tint) 70%, transparent); }
.sectors dt { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--ink-strong); }
.sectors dt svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; fill: var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.sectors dd { flex: 1; display: flex; flex-direction: column; margin-top: 12px; }
.sector-programmes { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.sector-foot { margin-top: auto; padding-top: 16px; }
.sector-docs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sector-docs li { padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--tint); background: color-mix(in srgb, var(--tint) 9%, transparent); }
.sector-frame { margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

/* Prijzen: drie plannen, Student in het midden uitgelicht. */
.pricing-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-head h2, .pricing-head .section-lead { margin-inline: auto; }
.plans { display: grid; gap: 20px; margin-top: clamp(36px, 5vw, 56px); align-items: start; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } }
/* Op de prijspagina staan de plannen direct onder de paginakop; het label van Student steekt erboven uit. */
.plans-first { margin-top: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 28px; border-radius: var(--radius); background: var(--bg);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -36px rgb(23 42 67 / 0.4);
}
.plan-featured { box-shadow: 0 0 0 2px var(--blue), 0 30px 60px -30px rgb(24 93 212 / 0.55); }
.plan-badge {
  position: absolute; top: 0; left: 28px; transform: translateY(-50%);
  padding: 4px 12px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 0.8125rem; font-weight: 600;
}
.plan-name { font-size: 1.25rem; letter-spacing: -0.015em; color: var(--tint); }
.plan-for { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; }
.plan-price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-amount { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.plan-per { font-weight: 500; color: var(--muted); }
.plan-alt { margin-top: 8px; min-height: 1.6em; font-size: 0.9375rem; color: var(--muted); }
.plan-cta { margin-top: 22px; padding: 12px 16px; width: 100%; }
.plan-list { list-style: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan-list li { display: flex; gap: 12px; align-items: baseline; font-size: 0.9375rem; }
.plan-list svg { width: 18px; height: 18px; fill: var(--tint); position: relative; top: 3px; }
.plan-trial { padding: 10px 12px; margin-inline: -12px; border-radius: 12px; background: color-mix(in srgb, var(--tint-violet) 8%, transparent); color: var(--ink-strong); font-weight: 500; }
.plan-trial svg { fill: var(--tint-violet); }
.plans-note { margin: clamp(24px, 3vw, 32px) auto 0; max-width: 62ch; text-align: center; font-size: 0.9375rem; color: var(--muted); }

/* ---------- Aanmelden: modal (transitions.dev) ---------- */

:root {
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side: formulier → ‘Kijk in je mail’ */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --error: #c8264d;
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
/* Lengte van het vinkpad (getTotalLength 31,2), naar boven afgerond. */
.t-success-check svg path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

.t-input {
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
  will-change: transform;
}
.t-input.is-error { transition: border-color var(--revert-dur, 280ms) ease-out, box-shadow var(--revert-dur, 280ms) ease-out; }
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

/* De dialoog zelf: open via showModal(), zodat focus, Escape en de achtergrond vanzelf goed gaan. */
.signup {
  /* In de modal mag de tekst sneller opkomen dan op de pagina. */
  --stagger-dur: 520ms;
  --stagger-stagger: 45ms;
  --stagger-distance: 10px;
  width: min(940px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  overflow: visible;
}
.signup::backdrop {
  background: rgb(15 26 43 / 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--modal-open-dur) var(--modal-ease);
}
.signup.is-open::backdrop { opacity: 1; }
.signup.is-closing::backdrop { opacity: 0; transition-duration: var(--modal-close-dur); }
html.has-modal { overflow: hidden; }

.signup-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
  border-radius: 28px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 1px rgb(23 42 67 / 0.06), 0 40px 90px -30px rgb(15 26 43 / 0.55);
}

/* Linkerkant: het merkverloop van de slot-CTA, met Riva en wat Gratis inhoudt. */
.signup-side {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--brand-gradient); color: #fff;
}
.signup-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 40% at 0% 100%, rgb(3 224 224 / 0.35), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgb(253 148 32 / 0.4), transparent 70%);
}
.signup-watermark { position: absolute; z-index: -1; right: -28%; top: -10%; width: 90%; opacity: 0.14; filter: saturate(0) brightness(3); }
.signup-riva { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: rgb(255 255 255 / 0.95); box-shadow: 0 16px 36px -16px rgb(15 26 43 / 0.6); }
.signup-riva img { width: 70px; height: 70px; animation: riva-bob 5s ease-in-out infinite; }
.signup-side-kicker { margin-top: 28px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.78); }
.signup-side-title { margin-top: 6px; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; }
.signup-side-list { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.signup-side-list li { display: flex; gap: 10px; align-items: baseline; font-size: 0.9375rem; line-height: 1.45; color: rgb(255 255 255 / 0.92); }
.signup-side-list svg { width: 16px; height: 16px; fill: #fff; position: relative; top: 3px; opacity: 0.9; }
.signup-side-price { margin-top: auto; padding-top: 28px; display: flex; align-items: baseline; gap: 10px; font-size: 0.875rem; color: rgb(255 255 255 / 0.82); }
.signup-side-price span { font-size: 2rem; font-weight: 650; letter-spacing: -0.04em; color: #fff; line-height: 1; }

/* Rechterkant: formulier en bevestiging op dezelfde plek. */
.signup-main { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 40px 44px 36px; }
.signup-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer;
}
.signup-close:hover { background: rgb(36 57 83 / 0.06); color: var(--ink-strong); }
.signup-close svg { width: 20px; height: 20px; fill: currentColor; }

.signup-panes { position: relative; }
.signup-pane {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--page-slide-distance));
  filter: blur(var(--page-blur));
  /* Weggaan gaat sneller dan opkomen, zodat de twee panelen niet dubbel in beeld staan. */
  transition:
    opacity    var(--duration-quick) var(--page-fade-ease),
    transform  var(--duration-quick) var(--page-slide-ease),
    filter     var(--duration-quick) var(--page-slide-ease),
    visibility 0s linear var(--duration-quick);
}
/* Het formulier wijkt naar links, de kiezer en de bevestiging komen van rechts. */
.signup-pane[data-pane-id="form"] { transform: translateX(calc(var(--page-slide-distance) * -1)); }
.signup-panes[data-pane="form"] [data-pane-id="form"],
.signup-panes[data-pane="pick"] [data-pane-id="pick"],
.signup-panes[data-pane="done"] [data-pane-id="done"] {
  position: relative;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); filter: blur(0);
  transition:
    opacity    var(--page-fade-dur)  var(--page-fade-ease)  var(--duration-micro),
    transform  var(--page-slide-dur) var(--page-slide-ease) var(--duration-micro),
    filter     var(--page-slide-dur) var(--page-slide-ease) var(--duration-micro),
    visibility 0s linear 0s;
}

.signup h2 { margin-top: 10px; font-size: clamp(1.75rem, 3vw, 2.125rem); line-height: 1.15; letter-spacing: -0.035em; padding-right: 32px; }
.signup-dot { color: #e82872; }
.signup-lead { margin-top: 10px; max-width: 44ch; color: var(--muted); font-size: 1rem; }
.signup-lead strong { color: var(--ink-strong); font-weight: 600; word-break: break-word; }
.signup-plan {
  display: flex; gap: 10px; align-items: baseline; margin-top: 18px;
  padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--tint-violet) 8%, transparent); color: var(--ink-strong); font-size: 0.9375rem;
}
.signup-plan svg { width: 16px; height: 16px; fill: var(--tint-violet); position: relative; top: 2px; }

.signup-form { display: grid; gap: 18px; margin-top: 26px; }
.field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); }
.field-optional { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.field-box {
  position: relative;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg);
}
.field-box:hover { border-color: rgb(36 57 83 / 0.28); }
.field-box:focus-within { border-color: var(--blue-text); box-shadow: 0 0 0 4px rgb(24 93 212 / 0.14); }
.field-box.is-error { border-color: var(--error); box-shadow: 0 0 0 4px rgb(200 38 77 / 0.12); }
.field-box input, .field-box select {
  display: block; width: 100%; margin: 0; padding: 12px 14px;
  border: 0; border-radius: 12px; background: transparent;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink-strong);
  outline: none;
}
.field-box input::placeholder { color: #95a3b6; }
.field-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.field-select select:invalid, .field-select select.is-empty { color: #95a3b6; }
.field-caret { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.field-tip { margin-top: 7px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
/* De foutmelding neemt de plek van de tip in, zodat het formulier niet verspringt. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); }
.field > * { grid-column: 1; }
.signup [hidden] { display: none !important; }
.field-error { grid-row: 3; margin-top: 7px; font-size: 0.8125rem; line-height: 1.45; font-weight: 500; color: var(--error); }
.field label { grid-row: 1; }
.field .field-box { grid-row: 2; }
.field .field-tip { grid-row: 3; transition: opacity var(--revert-dur) ease-out; }
.field.is-error .field-tip { opacity: 0; }
.field:not(:has(.field-tip)) .field-error:not(:empty) { min-height: 0; }

/* Opleiding: een knop die eruitziet als een veld en de kiezer opent. */
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); }
.programme-trigger {
  grid-row: 2;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px 10px 10px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--bg); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out, background-color var(--duration-quick) ease-out;
}
.programme-trigger:hover { border-color: rgb(36 57 83 / 0.28); background: var(--bg-cool); }
.programme-trigger:focus-visible { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 4px rgb(24 93 212 / 0.14); }
.programme-trigger.is-chosen { border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 3%, #fff); }
.programme-trigger-text { flex: 1; min-width: 0; display: grid; }
.programme-trigger-name { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.programme-trigger:not(.is-chosen) .programme-trigger-name { font-weight: 500; color: var(--ink); }
.programme-trigger-hint { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.programme-trigger-action { display: inline-flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 600; color: var(--blue-text); }
.programme-trigger-action svg { width: 14px; height: 14px; fill: currentColor; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.programme-trigger:hover .programme-trigger-action svg { transform: translateX(2px); }
/* Text states swap (transitions.dev): icoon en tekst komen zacht op hun plek na een keuze. */
.programme-trigger.is-swapped .tile,
.programme-trigger.is-swapped .programme-trigger-text { animation: t-swap-in var(--duration-fast) ease-in-out both; }
.programme-trigger.is-swapped .programme-trigger-text { animation-delay: var(--duration-stagger); }
@keyframes t-swap-in { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }

/* Tegel met icoon in de tint van de sector, zoals IconTile in de app. */
.tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--tile-bg); color: var(--tile-fg); }
.tile svg { width: 20px; height: 20px; fill: currentColor; }
.tile[data-tint="0"] { --tile-fg: #00769f; --tile-bg: #e5f6fa; }
.tile[data-tint="1"] { --tile-fg: #873de4; --tile-bg: #f0ebfa; }
.tile[data-tint="2"] { --tile-fg: #185dd4; --tile-bg: #eaf2ff; }
.tile[data-tint="3"] { --tile-fg: #d91d66; --tile-bg: #fcecf3; }
.tile[data-tint="4"] { --tile-fg: #b96200; --tile-bg: #fbf2e5; }
.tile[data-tint="5"] { --tile-fg: #007f7f; --tile-bg: #e5f5f5; }
.tile[data-tint="neutral"] { --tile-fg: var(--muted); --tile-bg: rgb(36 57 83 / 0.06); }

/* De kiezer: zoeken, richtingen als chips, opleidingen als tegels. */
.signup-pick { outline: none; }
/* Sticky rekent vanaf de binnenrand; de negatieve top laat de kop tot in de opvulling doorlopen. */
.pick-head { position: sticky; top: -40px; z-index: 1; margin: -40px -44px 0; padding: 40px 44px 14px; background: linear-gradient(var(--bg) 88%, rgb(255 255 255 / 0)); }
.pick-back {
  display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0 -10px; padding: 6px 10px;
  border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); cursor: pointer;
}
.pick-back:hover { background: rgb(36 57 83 / 0.06); color: var(--ink-strong); }
.pick-back svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.pick-back:hover svg { transform: translateX(-2px); }
.pick-search { position: relative; display: block; margin-top: 18px; }
.pick-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: var(--muted); pointer-events: none; }
.pick-search input {
  display: block; width: 100%; padding: 12px 14px 12px 42px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg);
  font: inherit; font-size: 1rem; color: var(--ink-strong); outline: none;
  transition: border-color var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out;
}
.pick-search input::placeholder { color: #95a3b6; }
.pick-search input:focus { border-color: var(--blue-text); box-shadow: 0 0 0 4px rgb(24 93 212 / 0.14); }
.pick-chips {
  display: flex; gap: 6px; margin: 12px -44px 0; padding: 2px 44px 4px; overflow-x: auto; scrollbar-width: none;
  /* Chips verdwijnen zacht aan de randen in plaats van af te breken. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.pick-chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong);
  font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-quick) ease-out, color var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out;
}
.chip svg { width: 14px; height: 14px; fill: currentColor; }
.chip:hover { background: var(--bg-cool); color: var(--ink-strong); }
.chip[aria-pressed="true"] { background: var(--ink-strong); color: #fff; box-shadow: 0 0 0 1px var(--ink-strong); }
.pick-body { padding: 12px 0 4px; }
.pick-group + .pick-group { margin-top: 18px; }
.pick-group-title { margin-bottom: 8px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick-grid-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-tile {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--line);
  font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  transition: background-color var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out;
}
.pick-grid-sectors .pick-tile { flex-direction: column; gap: 10px; padding: 14px; }
.pick-tile:hover { background: var(--bg-cool); box-shadow: 0 0 0 1px var(--line-strong); }
.pick-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue); }
.pick-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 5%, #fff); box-shadow: 0 0 0 2px var(--blue); }
.pick-tile-text { min-width: 0; padding-right: 26px; }
.pick-grid-sectors .pick-tile-text { padding-right: 0; }
.pick-tile-name { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink-strong); }
.pick-tile-desc { display: -webkit-box; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-tile-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; animation: check-in var(--duration-fast) var(--ease-smooth-out); }
@keyframes check-in { from { opacity: 0; transform: scale(0.8); } }
.pick-tile-check svg { width: 12px; height: 12px; fill: currentColor; }
.pick-empty { padding: 16px; border-radius: 14px; background: var(--bg-cool); font-size: 0.9375rem; }
.pick-empty p + p { margin-top: 4px; color: var(--muted); }
.pick-empty .btn { margin-top: 12px; padding: 8px 14px; font-size: 0.9375rem; }
/* Texts reveal als binnenkomst, zoals .t-enter in de app. */
.t-enter { animation: t-enter var(--stagger-dur) var(--stagger-ease) both; animation-delay: calc(var(--i, 0) * var(--duration-stagger)); }
@keyframes t-enter { from { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); } }

.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.signup-error {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgb(200 38 77 / 0.2); background: rgb(200 38 77 / 0.05);
  font-size: 0.9375rem; line-height: 1.45; color: var(--error);
  animation: signup-error-in var(--duration-fast) var(--ease-smooth-out);
}
.signup-error svg { width: 18px; height: 18px; fill: currentColor; position: relative; top: 1px; }
@keyframes signup-error-in { from { opacity: 0; transform: translateY(-4px); } }

.signup-submit { position: relative; width: 100%; justify-content: space-between; margin-top: 4px; }
.signup-submit[aria-busy="true"] { cursor: progress; background: var(--blue-hover); }
.signup-submit[aria-busy="true"] .btn-icon { opacity: 0; }
.signup-submit .t-shimmer { --shimmer-base: rgb(255 255 255 / 0.72); --shimmer-highlight: #fff; }
.signup-spinner {
  position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff;
  opacity: 0; transition: opacity var(--duration-quick) ease-out;
  animation: signup-spin 700ms linear infinite;
}
.signup-submit[aria-busy="true"] .signup-spinner { opacity: 1; }
@keyframes signup-spin { to { transform: rotate(360deg); } }
.signup-fine { display: flex; gap: 8px; align-items: baseline; margin-top: 14px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.signup-fine svg { width: 14px; height: 14px; fill: currentColor; position: relative; top: 2px; }

/* Bevestiging */
.signup-done { display: flex; flex-direction: column; justify-content: center; padding-block: 12px; outline: none; }
/* Op desktop een vaste hoogte: wisselen tussen formulier, kiezer en bevestiging laat de kaart staan. */
@media (min-width: 760px) {
  .signup-card { height: min(800px, calc(100dvh - 32px)); }
  .signup-main { display: flex; flex-direction: column; }
  .signup-panes { flex: 1; }
  .signup-panes[data-pane="done"] [data-pane-id="done"] { min-height: 100%; }
}
.signup-badge { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 50%; background: var(--brand-gradient); color: #fff; box-shadow: 0 18px 36px -16px rgb(74 71 224 / 0.75); }
.signup-badge .t-success-check svg { width: 40px; height: 40px; }
.signup-badge-glow { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgb(74 71 224 / 0.25); opacity: 0; }
.signup-panes[data-pane="done"] .signup-badge-glow { animation: signup-glow 1200ms var(--ease-smooth-out) 250ms both; }
@keyframes signup-glow { 0% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.35); } }
.signup-steps { list-style: none; display: grid; gap: 12px; margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--bg-cool); box-shadow: 0 0 0 1px var(--line); }
.signup-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 0.9375rem; color: var(--ink); }
.signup-steps li span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-text); font-size: 0.8125rem; font-weight: 700; position: relative; top: -1px; }
.signup-done-actions .btn { padding: 12px 20px; }
.signup-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }
.signup-again { border: 0; background: transparent; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.signup-again:hover { color: var(--blue-text); }

/* Promovideo: de knop in de hero en de modal met de video. */
.link-video { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; gap: 10px; }
.play-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.play-dot svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.link-video:hover .play-dot { transform: scale(1.08); }
.link-meta { font-weight: 500; color: var(--muted); }
/* Video over een feature (Functies): een poster met afspeelknop die dezelfde modal opent. */
.cta-row-start { justify-content: flex-start; margin-top: 22px; }
.video-tile { position: relative; display: block; width: 100%; padding: var(--frame-pad); border: 0; border-radius: var(--frame-radius); background: rgb(255 255 255 / 0.7); cursor: pointer; font: inherit;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgb(23 42 67 / 0.35), 0 12px 24px -16px rgb(23 42 67 / 0.18); }
.video-tile img { width: 100%; aspect-ratio: 16 / 9; border-radius: max(4px, calc(var(--frame-radius) - var(--frame-pad))); outline: 1px solid rgb(23 42 67 / 0.08); outline-offset: -1px; }
.video-tile-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--blue); color: #fff;
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.75), 0 18px 36px -12px rgb(24 93 212 / 0.7); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.video-tile-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.video-tile:hover .video-tile-play { transform: scale(1.08); }
.video-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
html.dark .video-tile { background: rgb(255 255 255 / 0.04); box-shadow: 0 0 0 1px var(--line-strong); }

.video-modal {
  width: min(1120px, calc(100vw - 32px), calc((100dvh - 132px) * 16 / 9));
  max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  overflow: visible;
}
.video-modal::backdrop {
  background: rgb(15 26 43 / 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--modal-open-dur) var(--modal-ease);
}
.video-modal.is-open::backdrop { opacity: 1; }
.video-modal.is-closing::backdrop { opacity: 0; transition-duration: var(--modal-close-dur); }
.video-card {
  position: relative; border-radius: 24px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 1px rgb(23 42 67 / 0.06), 0 40px 90px -30px rgb(15 26 43 / 0.55);
}
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #fbfbfc; }
.video-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: rgb(15 26 43 / 0.5); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.video-close:hover { background: rgb(15 26 43 / 0.7); }
.video-close svg { width: 20px; height: 20px; fill: currentColor; }
.video-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px 16px 24px; }
.video-foot p { font-weight: 600; color: var(--ink-strong); }
.video-foot span { font-weight: 500; color: var(--muted); }
.video-foot .btn { padding: 12px 20px; }
html.dark .video-modal::backdrop { background: rgb(8 12 18 / 0.7); }
html.dark .video-card { box-shadow: 0 0 0 1px var(--line-strong); }
@media (max-width: 759px) {
  .video-card { border-radius: 18px; }
  .video-foot { padding: 14px 16px; }
  .video-foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal::backdrop, .play-dot { transition: none !important; }
}

/* Telefoon: onderblad over de volle breedte, met een smalle merkband in plaats van de zijkolom. */
@media (max-width: 759px) {
  .signup { width: 100vw; max-height: calc(100dvh - 12px); margin: auto 0 0; }
  .signup.t-modal { transform: translateY(24px); }
  .signup.t-modal.is-open { transform: translateY(0); }
  .signup.t-modal.is-closing { transform: translateY(24px); }
  .signup-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - 12px); border-radius: 24px 24px 0 0; }
  .signup-side { flex-direction: row; align-items: center; gap: 14px; padding: 16px 64px 16px 20px; }
  .signup-riva { width: 48px; height: 48px; flex: none; }
  .signup-riva img { width: 38px; height: 38px; }
  .signup-side-kicker { margin-top: 0; font-size: 0.75rem; }
  .signup-side-title { margin-top: 0; font-size: 1rem; }
  .signup-side-list, .signup-side-price { display: none; }
  .signup-main { padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
  .signup-close { top: 20px; right: 12px; color: #fff; }
  .signup-close:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
  .signup-form { margin-top: 20px; gap: 16px; }
  .pick-head { top: -26px; margin: -26px -20px 0; padding: 26px 20px 12px; }
  .pick-chips { margin-inline: -20px; padding-inline: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .pick-grid-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
  .signup::backdrop { transition: none !important; }
  .signup-pane { transition: none !important; transform: none !important; filter: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-input { animation: none !important; transform: none !important; }
  .signup-riva img, .signup-badge-glow { animation: none !important; }
  .signup-error { animation: none; }
  .t-enter, .pick-tile-check, .programme-trigger.is-swapped .tile, .programme-trigger.is-swapped .programme-trigger-text { animation: none !important; }
}

/* ---------- Inleveren: mailvenster en logboek ---------- */
:root {
  /* Success check (transitions.dev) */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 12px;
  --check-blur-dur: 500ms;
  --check-blur-from: 8px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Text states swap (transitions.dev) */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
}

.mail-card { position: relative; overflow: hidden; }
.mail-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mail-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); }
.mail-icon svg { width: 18px; height: 18px; fill: #fff; }
.mail-title { font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.mail-from { font-size: 0.875rem; color: var(--muted); }

.mail-fields { margin: 0; padding: 6px 20px; }
.mail-fields > div { display: grid; grid-template-columns: 6.25rem 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.mail-fields > div:last-child { border-bottom: 0; }
.mail-fields dt { color: var(--muted); }
.mail-fields dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-strong); min-width: 0; }
.mail-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--blue-text); background: var(--blue-soft); }
.mail-muted { color: var(--muted); }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 8px; font-size: 0.8125rem; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip svg { width: 15px; height: 15px; flex: none; fill: var(--tint-pink); }

/* Versturen → Verstuurd: de knop maakt plaats voor het vinkje. */
.mail-send { display: grid; justify-items: end; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-cool); }
.mail-send > * { grid-area: 1 / 1; }
.mail-button {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 0.9375rem; color: #fff; background: var(--blue);
  transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) ease-in-out;
}
.mail-button svg { width: 16px; height: 16px; fill: currentColor; }
.mail-button.is-pressed { transform: scale(0.96); }
.mail-button.is-gone { opacity: 0; transform: scale(0.9); filter: blur(2px); }
.mail-sent { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--tint-teal); opacity: 0; transition: opacity var(--duration-fast) ease-in-out; }
.mail-sent.is-shown { opacity: 1; }
.mail-sent .t-success-check { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #fff; background: var(--tint-teal); }
.mail-sent .t-success-check svg { width: 16px; height: 16px; }

.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 21; stroke-dashoffset: 21; }
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* Logboek: regels komen op zoals de texts reveal elders op de pagina. */
.mail-log { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.mail-log-title { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.mail-log-title svg { width: 16px; height: 16px; fill: var(--muted); }
.mail-log ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; min-height: 9.5rem; }
.log-entry { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.js .log-entry { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); }
.js .log-entry.is-in { opacity: 1; transform: none; filter: none; }
.log-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.log-icon svg { width: 15px; height: 15px; }
.log-icon-sent { background: var(--blue-soft); } .log-icon-sent svg { fill: var(--blue); }
.log-icon-ok { background: var(--soft-teal); } .log-icon-ok svg { fill: var(--tint-teal); }
.log-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.9375rem; color: var(--ink-strong); line-height: 1.35; }
.log-line strong { font-weight: 600; }
.log-time { margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.mail-log blockquote { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid rgb(0 127 127 / 0.35); font-size: 0.9375rem; color: var(--ink); }
.log-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--blue-text); background: var(--blue-soft); transition: color var(--duration-fast) ease-in-out, background-color var(--duration-fast) ease-in-out; }
.log-tag.is-approved { color: var(--tint-teal); background: var(--soft-teal); }
.t-text-swap {
  display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
.mail-replay { position: absolute; right: 14px; top: 14px; }
.mail-head { padding-right: 64px; }

@media (max-width: 480px) {
  .mail-fields > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-text-swap { transition: none !important; }
  .mail-button, .mail-sent, .js .log-entry, .log-tag { transition: none !important; }
}

/* Feedbacktabel: een antwoord uit de mail komt erbij (texts reveal), Curriva stelt voor wat je deed,
   ‘Overnemen’ zet het in de cel, de plek wisselt (text states swap), het rondje wordt een vinkje (icon swap)
   en de teller springt op (number pop-in). Zie transitions.dev. */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
}
.fbt-card { position: relative; overflow: hidden; }
.fbt-head { display: flex; align-items: center; gap: 12px; padding: 16px 64px 16px 20px; border-bottom: 1px solid var(--line); }
.fbt-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--tint-pink); }
.fbt-icon svg { width: 18px; height: 18px; fill: #fff; }
.fbt-head-text { min-width: 0; flex: 1; }
.fbt-title { font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.fbt-sub { font-size: 0.875rem; color: var(--muted); }
.fbt-count { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.fbt-num { display: inline-block; font-weight: 700; font-size: 1rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fbt-num.is-pop { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
@keyframes t-digit-pop-in {
  0% { transform: translateY(var(--digit-distance)); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}
.fbt-cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr 0.9fr; gap: 12px; padding: 9px 20px; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--bg-cool); border-bottom: 1px solid var(--line); }
.fbt-rows { list-style: none; margin: 0; padding: 0; min-height: 13rem; }
.fbt-row { padding: 12px 20px 14px; border-bottom: 1px solid var(--line); }
.fbt-row:last-child { border-bottom: 0; }
.js .fbt-row[data-fbt-new] { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); }
.js .fbt-row[data-fbt-new].is-in { opacity: 1; transform: none; filter: none; }
.fbt-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-strong); }
.fbt-mail { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; color: var(--tint-violet); background: var(--soft-violet); }
.fbt-mail svg { width: 13px; height: 13px; fill: currentColor; }
.fbt-status { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: var(--bg-cool); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--duration-fast) ease-in-out, box-shadow var(--duration-fast) ease-in-out; }
.fbt-status svg { grid-area: 1 / 1; width: 12px; height: 12px; transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out; }
.fbt-status-a { fill: var(--muted); }
.fbt-status-b { fill: #fff; opacity: 0; transform: scale(0.25); filter: blur(2px); }
.fbt-status.is-done { background: var(--tint-teal); box-shadow: none; }
.fbt-status.is-done .fbt-status-a { opacity: 0; transform: scale(0.25); filter: blur(2px); }
.fbt-status.is-done .fbt-status-b { opacity: 1; transform: scale(1); filter: blur(0); }
.fbt-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 0.9fr; gap: 12px; align-items: start; font-size: 0.875rem; line-height: 1.45; color: var(--ink); }
.fbt-feedback { padding-left: 10px; border-left: 2px solid rgb(24 93 212 / 0.35); color: var(--ink-strong); }
.fbt-feedback span { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); }
.fbt-label { display: none; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.fbt-swap { display: grid; }
.fbt-swap > .fbt-suggest, .fbt-swap > .fbt-filled { grid-area: 2 / 1; }
.fbt-swap > .fbt-label { grid-area: 1 / 1; }
.fbt-suggest { display: block; padding: 6px 8px; border-radius: 8px; font-size: 0.8125rem; background: var(--soft-pink); box-shadow: inset 0 0 0 1px rgb(217 29 102 / 0.18); transition: opacity var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out, transform var(--duration-fast) var(--ease-smooth-out); }
.fbt-suggest-from { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.fbt-take { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: var(--blue-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.fbt-take svg { width: 11px; height: 11px; fill: currentColor; }
.fbt-take.is-pressed { transform: scale(0.94); }
.fbt-filled { opacity: 0; filter: blur(2px); transform: translateY(4px); transition: opacity var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out, transform var(--duration-fast) var(--ease-smooth-out); }
.js .fbt-suggest { opacity: 0; filter: blur(2px); }
.fbt-card.is-suggesting .fbt-suggest { opacity: 1; filter: none; }
.fbt-card.is-taken .fbt-suggest { opacity: 0; filter: blur(2px); transform: scale(0.98); pointer-events: none; }
.fbt-card.is-taken .fbt-filled { opacity: 1; filter: none; transform: none; }
.fbt-card.is-settled .fbt-suggest { display: none; }
.fbt-replay { position: absolute; right: 14px; top: 14px; }

@media (max-width: 640px) {
  .fbt-cols { display: none; }
  .fbt-grid { grid-template-columns: 1fr; gap: 8px; }
  .fbt-label { display: block; }
  .fbt-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fbt-num.is-pop { animation: none !important; }
  .js .fbt-row[data-fbt-new], .fbt-status, .fbt-status svg, .fbt-suggest, .fbt-take, .fbt-filled { transition: none !important; }
}

/* ---------- Boeken: foto van een bladzijde → Riva leest → verwijzing in je werk ---------- */
.boek-card { position: relative; overflow: hidden; }
.boek-head { display: flex; align-items: center; gap: 12px; padding: 16px 64px 16px 20px; border-bottom: 1px solid var(--line); }
.boek-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--tint-orange); }
.boek-icon svg { width: 18px; height: 18px; fill: #fff; }
.boek-head-text { min-width: 0; flex: 1; }
.boek-title { font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.boek-sub { font-size: 0.875rem; color: var(--muted); }
.boek-page { font-size: 0.8125rem; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boek-body { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 16px 20px; align-items: start; }
.boek-photo { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px rgb(36 57 83 / 0.12); transform: rotate(-1.5deg); }
.boek-read { min-width: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.boek-status { display: grid; margin-bottom: 8px; font-size: 0.75rem; font-weight: 600; }
.boek-status > span { grid-area: 1 / 1; transition: opacity var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out; }
.boek-done { display: inline-flex; align-items: center; gap: 5px; color: var(--tint-teal); }
.boek-done svg { width: 12px; height: 12px; fill: currentColor; }
.boek-line { margin-bottom: 6px; }
.boek-line mark { padding: 0 2px; border-radius: 3px; color: inherit; background: rgb(246 196 0 / 0.32); }
.boek-doubt { text-decoration: underline dotted rgb(185 98 0 / 0.8) 2px; text-underline-offset: 4px; }
.boek-use { padding: 12px 20px 16px; border-top: 1px solid var(--line); background: var(--bg-cool); }
.boek-use-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.boek-use-label svg { width: 13px; height: 13px; fill: currentColor; }
.boek-field { padding: 8px 10px; border-radius: 8px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-strong); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.boek-cite { color: var(--tint-teal); font-weight: 600; transition: opacity var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out; }
.boek-actions { display: grid; margin-top: 8px; font-size: 0.75rem; font-weight: 600; }
.boek-actions > span { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 5px; transition: opacity var(--duration-fast) ease-in-out, filter var(--duration-fast) ease-in-out, transform var(--duration-fast) var(--ease-smooth-out); }
.boek-actions svg { width: 12px; height: 12px; fill: currentColor; }
.boek-insert { padding: 3px 9px; border-radius: 6px; color: var(--blue-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.boek-insert.is-pressed { transform: scale(0.94); }
.boek-inserted { color: var(--tint-teal); padding: 3px 0; }
.boek-replay { position: absolute; right: 14px; top: 14px; }
/* Begintoestand alleen met JavaScript; zonder JavaScript staat het eindbeeld er. */
.js .boek-card .boek-photo { opacity: 0; transform: rotate(-1.5deg) translateY(var(--stagger-distance)); transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease); }
.js .boek-card.is-photo .boek-photo { opacity: 1; transform: rotate(-1.5deg); }
.js .boek-card .boek-line { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); transition: opacity var(--stagger-dur) var(--stagger-ease) calc(var(--i) * var(--stagger-step, 90ms)), transform var(--stagger-dur) var(--stagger-ease) calc(var(--i) * var(--stagger-step, 90ms)), filter var(--stagger-dur) var(--stagger-ease) calc(var(--i) * var(--stagger-step, 90ms)); }
.js .boek-card.is-read .boek-line { opacity: 1; transform: none; filter: none; }
.js .boek-card .boek-status > span { opacity: 0; filter: blur(2px); }
.js .boek-card.is-reading .boek-reading, .js .boek-card.is-read .boek-done { opacity: 1; filter: none; }
.js .boek-card.is-read .boek-reading { opacity: 0; }
.js .boek-card .boek-cite, .js .boek-card .boek-actions > span { opacity: 0; filter: blur(2px); }
.js .boek-card.is-suggest .boek-insert { opacity: 1; filter: none; }
.js .boek-card.is-cited .boek-insert { opacity: 0; filter: blur(2px); transform: scale(0.96); }
.js .boek-card.is-cited .boek-cite, .js .boek-card.is-cited .boek-inserted { opacity: 1; filter: none; }

@media (max-width: 640px) {
  .boek-body { grid-template-columns: 6.5rem 1fr; gap: 12px; }
  .boek-page { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .boek-card .boek-photo, .js .boek-card .boek-line, .boek-status > span, .boek-cite, .boek-actions > span { transition: none !important; }
}

/* ---------- Donkere weergave ----------
   html.dark staat aan als het systeem donker is, of als je dat met de knop in de kop kiest.
   Kleuren uit de donkere app (app/src/app/curriva-brand.css). Vlakken krijgen randen in plaats
   van schaduwen; grote merkvlakken worden rustig en donker. */

html.dark {
  color-scheme: dark;
  --ink: #c9d6e6;
  --ink-strong: #eef3fa;
  --muted: #9aabc1;
  --bg: #19212d;
  --bg-cool: #1c2633;
  --surface: #202b39;
  --line: rgb(237 240 245 / 0.09);
  --line-strong: rgb(237 240 245 / 0.15);

  --blue: #286add;
  --blue-hover: #2d6fdf;
  --blue-soft: #233958;
  --blue-soft-hover: #2a4468;
  --blue-text: #82adf0;
  --blue-text-hover: #a5c4f5;

  --tint-cyan: #01b5ed;
  --tint-violet: #b079ff;
  --tint-blue: #5c9bff;
  --tint-pink: #ff5c97;
  --tint-orange: #ff9b24;
  --tint-teal: #00c8c8;

  --soft-teal: #172d2d;
  --soft-violet: #2a2533;
  --soft-pink: #30232b;

  --tabs-text-muted: #9aabc1;
  --tabs-text-active: #eef3fa;
  --tabs-bar-bg: rgb(237 240 245 / 0.06);
  --shimmer-base: #9aabc1;
  --shimmer-highlight: #c9a6ff;
}

/* Het merkverloop in tekst, lichter gemaakt zodat het op de donkere achtergrond leesbaar blijft. */
html.dark { --brand-ink: linear-gradient(100deg, #6fa5ff, #b48cff 55%, #ff6fa8); }

/* Kop en menu */
html.dark .site-header { background: rgb(25 33 45 / 0.82); }
html.dark .header-nav a:hover, html.dark .header-nav a[aria-current="page"] { background: rgb(237 240 245 / 0.06); }
html.dark .header-nav a:hover { color: var(--blue-text); }
html.dark .link-quiet:hover { color: var(--blue-text); }
html.dark .footer-nav a:hover { color: var(--blue-text); }
html.dark .skip { background: var(--surface); }

/* Geen schaduwen: randen maken de vlakken. */
html.dark .btn-primary { box-shadow: none; }
html.dark .btn-white { box-shadow: none; }
html.dark .frame { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
html.dark .frame img { outline-color: rgb(237 240 245 / 0.06); }
html.dark .card { box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .float-card { box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .phone { background: #0c121b; box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .eyebrow-pill { background: rgb(237 240 245 / 0.05); box-shadow: 0 0 0 1px var(--line); }
html.dark .page-jump a { background: rgb(237 240 245 / 0.04); }
html.dark .explore-card:hover, html.dark .sectors > div:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 50%, transparent); }
html.dark .explore-card, html.dark .sectors > div { background: var(--surface); }
html.dark .t-tabs-pill { box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .route-step { box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .route-step:not(:disabled):hover { box-shadow: 0 0 0 1px rgb(130 173 240 / 0.5); }
html.dark .route-step:not(:disabled):hover b, html.dark .route-step:not(:disabled):hover svg { color: var(--blue-text); fill: var(--blue-text); }
html.dark .seg button[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--line-strong); background: rgb(237 240 245 / 0.10); }
html.dark .ai-switch[data-mode="on"] .seg [data-ai-mode="on"] { background: var(--blue); }
html.dark .plan { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .plan-featured { box-shadow: 0 0 0 2px var(--blue); }
html.dark .demo-stack::before { opacity: 0.12; }

/* Gloed achter de koppen: zachter, anders wordt het grijs-paars. */
html.dark .hero-glow { opacity: 0.45; }

/* Zachte vlakken die in het licht een vaste tint hadden */
html.dark .improved { box-shadow: inset 0 0 0 1px rgb(0 200 200 / 0.2); }
html.dark .coach-status-dot { background: #1fc79c; }
html.dark .coach-screen[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px rgb(176 121 255 / 0.5); }
html.dark .cycle li::before { box-shadow: inset 0 0 0 1.5px rgb(255 92 151 / 0.45); }
html.dark .cycle li:not(:last-child)::after { background: linear-gradient(rgb(255 92 151 / 0.35), rgb(255 92 151 / 0.08)); }
html.dark .feedback-body blockquote { border-left-color: #3e5f93; }
html.dark .fbt-suggest { box-shadow: inset 0 0 0 1px rgb(255 92 151 / 0.25); }
html.dark .fbt-feedback { border-left-color: rgb(130 173 240 / 0.45); }
html.dark .mail-log blockquote { border-left-color: rgb(0 200 200 / 0.4); }
html.dark .ai-state-off, html.dark .memory-tag-rejected { background: rgb(237 240 245 / 0.07); }
html.dark .memory-quiet:hover { background: rgb(237 240 245 / 0.06); }
@keyframes context-flash-dark { 0% { background: #2f2640; } 100% { background: var(--bg-cool); } }
html.dark .coach-context.is-changed { animation-name: context-flash-dark; }

/* De donkere AI-sectie valt al samen met de pagina: alleen een haarlijn scheidt hem. */
html.dark .section-dark { background: var(--bg); border-block: 1px solid var(--line); }
html.dark .dark-glow { opacity: 0.4; }
html.dark .ai-col { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* Slot-CTA: geen groot merkvlak, maar een kaart met een smalle spectrumlijn. */
html.dark .final-panel { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.dark .final-panel::before { background: var(--spectrum); inset: 0 0 auto; height: 3px; opacity: 0.9; }
html.dark .final-watermark { opacity: 0.025; filter: saturate(0) brightness(4); }
html.dark .final-riva { background: rgb(237 240 245 / 0.06); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.dark .final h2 { color: var(--ink-strong); }
html.dark .final-panel > p:not(.assurance) { color: var(--ink); }
html.dark .assurance-light { color: var(--muted); }
html.dark .final-panel .btn-white { background: var(--blue); color: #fff; }
html.dark .final-panel .btn-white:hover { background: var(--blue-hover); }
html.dark .cta-band::before { opacity: 0.7; }

/* Aanmelden */
html.dark .signup::backdrop { background: rgb(8 12 18 / 0.65); }
html.dark .signup-card { box-shadow: 0 0 0 1px var(--line-strong); }
html.dark .signup-side { background: var(--bg-cool); border-right: 1px solid var(--line); }
html.dark .signup-side::before { background: var(--spectrum); inset: 0 0 auto; height: 3px; }
html.dark .signup-watermark { opacity: 0.025; }
html.dark .signup-riva { background: rgb(237 240 245 / 0.06); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.dark .signup-side-kicker { color: var(--blue-text); }
html.dark .signup-side-title, html.dark .signup-side-price span { color: var(--ink-strong); }
html.dark .signup-side-list li { color: var(--ink); }
html.dark .signup-side-list svg { fill: var(--tint-teal); }
html.dark .signup-side-price { color: var(--muted); }
html.dark .signup-badge { box-shadow: none; }
html.dark .field-box input::placeholder, html.dark .pick-search input::placeholder { color: #6c7d93; }
html.dark .field-box:hover { border-color: rgb(237 240 245 / 0.28); }
html.dark .programme-trigger.is-chosen { background: color-mix(in srgb, var(--blue) 10%, var(--bg)); }
html.dark .pick-head { background: linear-gradient(var(--bg) 88%, rgb(25 33 45 / 0)); }
html.dark .pick-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 12%, var(--bg)); }
html.dark .chip[aria-pressed="true"] { background: var(--ink-strong); color: var(--bg); }
html.dark .signup-close:hover { background: rgb(237 240 245 / 0.08); }
html.dark .tile[data-tint="0"] { --tile-fg: #01b5ed; --tile-bg: #1c2c32; }
html.dark .tile[data-tint="1"] { --tile-fg: #b079ff; --tile-bg: #2a2533; }
html.dark .tile[data-tint="2"] { --tile-fg: #5c9bff; --tile-bg: #233958; }
html.dark .tile[data-tint="3"] { --tile-fg: #ff5c97; --tile-bg: #30232b; }
html.dark .tile[data-tint="4"] { --tile-fg: #ff9b24; --tile-bg: #30291f; }
html.dark .tile[data-tint="5"] { --tile-fg: #00c8c8; --tile-bg: #172d2d; }
html.dark .tile[data-tint="neutral"] { --tile-bg: rgb(237 240 245 / 0.07); }
@media (max-width: 759px) {
  html.dark .signup-side { border-right: 0; border-bottom: 1px solid var(--line); }
  html.dark .signup-close { color: var(--muted); }
}

/* ---------- Weergaveknop ---------- */

/* Een schakelaar met zon en maan: de knop schuift, het icoon wisselt (icon swap, transitions.dev). */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; flex: none;
  width: 60px; height: 32px; padding: 3px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(36 57 83 / 0.08); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.theme-toggle:hover { background: rgb(36 57 83 / 0.12); }
/* Een groter raakvlak dan de knop zelf. */
.theme-toggle::after { content: ""; position: absolute; inset: -6px -2px; }
.theme-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; pointer-events: none; }
.theme-track svg { width: 13px; height: 13px; fill: var(--muted); opacity: 0.7; }
.theme-knob {
  position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(23 42 67 / 0.2), 0 2px 8px -2px rgb(23 42 67 / 0.25);
  transform: translateX(0);
  transition: transform var(--duration-slow) cubic-bezier(0.34, 1.35, 0.64, 1), background-color var(--duration-fast) var(--ease-smooth-out);
}
.theme-knob svg {
  grid-area: 1 / 1; width: 15px; height: 15px;
  transition: opacity var(--duration-fast) ease-in-out, transform var(--duration-slow) var(--ease-smooth-out), filter var(--duration-fast) ease-in-out;
}
.theme-knob .theme-sun { fill: #e8a100; }
.theme-knob .theme-moon { fill: #c9d6ff; opacity: 0; transform: rotate(-90deg) scale(0.4); filter: blur(2px); }
html.dark .theme-toggle { background: #2a3a55; box-shadow: inset 0 0 0 1px rgb(130 173 240 / 0.25); }
html.dark .theme-toggle:hover { background: #31446a; }
html.dark .theme-toggle .theme-knob { transform: translateX(28px); background: #121a26; box-shadow: 0 0 0 1px rgb(130 173 240 / 0.3); }
html.dark .theme-toggle .theme-sun { opacity: 0; transform: rotate(90deg) scale(0.4); filter: blur(2px); }
html.dark .theme-toggle .theme-moon { opacity: 1; transform: none; filter: none; }
/* Wisselen van weergave zonder dat elk element zijn eigen overgang afspeelt. */
html.theme-switching *:not(.theme-toggle, .theme-toggle *), html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-knob, .theme-knob svg { transition: none !important; }
}
html.dark .boek-line mark { background: rgb(246 196 0 / 0.22); }
html.dark .boek-doubt { text-decoration-color: rgb(255 196 119 / 0.8); }
html.dark .boek-cite, html.dark .boek-done, html.dark .boek-inserted { color: #5fd4c4; }
html.dark .boek-photo { box-shadow: 0 0 0 1px var(--line-strong); }