/* De opmaak van flowscribe.nl.

   Het concept is "geluid wordt tekst" (L-LANCERING, 12 oktober 2026). Het
   merkteken van de app is vijf staven, een golf; op de site wordt die golf
   regels transcript. Daarom: de app zelf als klikbare demo onder de kop, de
   golf die bij "Zo werkt het" in notulen verandert, en de ramp van
   het merkteken (`frontend/src/styles/tokens.css`, `--ramp-*`) als enige kleur.

   Eén lettertype, Inter, lokaal en onder de OFL, voor koppen en tekst, zoals
   de app (U-LETTER). Een serif voor de koppen is op 12 oktober 2026 geprobeerd
   en afgewezen door Kyan: de site volgt de app. De site laadt niets van buiten: geen
   import en geen adres van een ander domein. */

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

/* Het bedrag dat optelt: een geregistreerd getal, zodat het te animeren is. */
@property --bedrag { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --inkt: #0c1630;
  --inkt-zacht: #4a5670;
  --papier: #ffffff;
  --grond: #f4f6fa;
  --lijn: #dfe4ee;
  --lijn-zacht: #e9edf4;
  --accent: #1f69ff;          /* het merkblauw van de app; 4,65:1 op wit */
  --accent-sterk: #1554d6;
  --accent-inkt: #ffffff;
  --nadruk: #0a398c;          /* de cursieve woorden in de kop */
  --navy: #0a398c;
  --blauw: #1f69ff;
  --teal: #1794a3;
  --groen: #58ba64;
  --spreker-0: #6a5f98;      /* --spreker-1 tot -3 van de app, zodat de namen */
  --spreker-1: #507100;      /* overal dezelfde kleur hebben als in het voorbeeld */
  --spreker-2: #a94700;
  --glas: rgba(255, 255, 255, .78);
  --glas-rand: rgba(255, 255, 255, .95);
  --schaduw: 0 30px 70px -30px rgba(12, 22, 48, .28), 0 2px 6px -2px rgba(12, 22, 48, .06);
  --wolk:
    radial-gradient(40% 46% at 35% 45%, rgba(31, 105, 255, .30), transparent 72%),
    radial-gradient(36% 44% at 68% 40%, rgba(23, 148, 163, .26), transparent 72%),
    radial-gradient(24% 30% at 52% 80%, rgba(88, 186, 100, .14), transparent 72%);
  --ramp: linear-gradient(90deg, var(--navy), var(--blauw) 35%, var(--teal) 70%, var(--groen));
  --ramp-staand: linear-gradient(180deg, var(--navy), var(--blauw) 35%, var(--teal) 70%, var(--groen));
  --liniatuur: rgba(12, 22, 48, .05);
  --baan: 74rem;
  --radius: 18px;
  color-scheme: light dark;
  /* Tekstlinks: het merkblauw haalt op de grond 4,29:1 en dat is te weinig
     voor gewone tekst (gemeten 12 oktober 2026); deze haalt 5,93. Zelfde
     afleiding als --link in de app (het merk, iets donkerder). */
  --link: #1554d6;
  /* Bewegingscurves uit de animate-skill; geen eigen benaderingen. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --inkt: #eef2f9;
    --inkt-zacht: #a9b3c6;
    --papier: #111a2b;
    --grond: #0a1120;
    --lijn: #24304a;
    --lijn-zacht: #1a2438;
    --accent: #7ea6ff;        /* 7,4:1 op de donkere grond */
    --accent-sterk: #a2bfff;
    --accent-inkt: #0a1120;
    --nadruk: #9fc0ff;
    --link: #8fb1ff;
    --spreker-0: #beb4f3;
    --spreker-1: #80a500;
    --spreker-2: #ec7622;
    --glas: rgba(20, 29, 47, .72);
    --glas-rand: rgba(255, 255, 255, .09);
    --schaduw: 0 30px 70px -30px rgba(0, 0, 0, .7);
    --liniatuur: rgba(255, 255, 255, .035);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 17px/1.65 var(--sans);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.oversla {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-inkt);
  padding: .6rem 1rem; border-radius: 0 0 12px 0; z-index: 10;
}
.oversla:focus { left: 0; top: 0; }

a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-sterk); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.knop:focus-visible, .knop-kaal:focus-visible { border-radius: 999px; }

.vlak { position: relative; }
.baan { max-width: var(--baan); margin: 0 auto; padding: 5.5rem 1.5rem; position: relative; }

/* --- kop van de pagina --- */

.kop {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--grond) 80%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--lijn) 60%, transparent);
}
.kop .baan { padding-top: .75rem; padding-bottom: .75rem; }
.kop-baan { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.merk, .voet-merk {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 650; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--inkt); text-decoration: none;
}
.merkteken { width: 30px; height: 30px; flex: none; display: block; }
.hoofdnav { margin-right: auto; }
.hoofdnav ul, .voetlijst {
  display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.hoofdnav a { color: var(--inkt-zacht); text-decoration: none; font-size: .95rem; }
.hoofdnav a:hover, .hoofdnav a[aria-current="page"] { color: var(--inkt); }
.hoofdnav a[aria-current="page"] { font-weight: 600; }
.kop-knoppen { display: flex; align-items: center; gap: .4rem; }

/* --- knoppen: pillen met een vaste hoogte --- */

.knop, .knop-kaal {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.4rem; border-radius: 999px;
  text-decoration: none; font-weight: 550; font-size: .96rem; white-space: nowrap;
  transition: background-color .15s, box-shadow .2s;
}
.knop { background: var(--inkt); color: var(--grond); }
.knop:hover { background: var(--accent); color: var(--accent-inkt);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.knop-kaal { color: var(--inkt); border: 1px solid var(--lijn); background: transparent; }
.knop-kaal:hover { color: var(--inkt); background: var(--papier); }
.kop .knop-kaal { border-color: transparent; }
.knoppen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* --- tekst --- */

h1, h2 { font-family: var(--sans); font-weight: 650; color: var(--inkt); text-wrap: balance; }
h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.3rem); line-height: 1.05;
  letter-spacing: -.035em; margin: 0 0 1.5rem;
}
/* Nadruk in de kop is kleur en geen cursief: Inter staat hier zonder cursief,
   en de app doet het ook zo. */
h1 em, h2 em { font-style: normal; color: var(--nadruk); }
/* De kop komt woord voor woord omhoog uit een masker, één keer bij het laden. */
.woord { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.woord > span { display: inline-block; animation: woord-op .9s var(--ease-out) both; animation-delay: calc(.1s + var(--i) * 70ms); }
@keyframes woord-op { from { transform: translateY(105%); } to { transform: translateY(0); } }
.hero .lood, .hero .knoppen { animation: rijs .8s var(--ease-out) both; }
.hero .lood { animation-delay: .45s; }
.hero .knoppen { animation-delay: .6s; }
.hero .demo { animation: rijs 1s var(--ease-out) both; animation-delay: .7s; }
@keyframes rijs { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 1rem; }
h3 { font-size: 1.1rem; line-height: 1.35; letter-spacing: -.012em; margin: 0 0 .45rem; font-weight: 620; }
p { margin: 0 0 1rem; }
.lood { font-size: 1.2rem; color: var(--inkt-zacht); max-width: 40rem; line-height: 1.6; }
.klein { font-size: .88rem; color: var(--inkt-zacht); }
.label {
  display: inline-block; font-size: .7rem; font-weight: 650; margin: 0;
  letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht);
}

/* --- hero: de kop gecentreerd, de demo eronder --- */

.hero { isolation: isolate; overflow: hidden; }
/* Liniatuur, zoals een notitieblok, die naar beneden wegvloeit. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(180deg, transparent 0 39px, var(--liniatuur) 39px 40px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 70rem; height: 40rem; left: 50%; top: 22rem; transform: translateX(-50%);
  background: var(--wolk); filter: blur(40px);
}
.hero .baan { padding-top: 5.5rem; padding-bottom: 3rem; }
.hero-tekst { text-align: center; max-width: 48rem; margin: 0 auto; }
.hero-tekst h1 { margin-left: auto; margin-right: auto; }
.hero .lood { font-size: 1.22rem; margin-left: auto; margin-right: auto; }
.hero .knoppen { justify-content: center; }
.hero .demo { margin-top: 3.5rem; }
.demo-onderschrift { margin: 1rem auto 0; max-width: 40rem; text-align: center; font-size: .92rem; color: var(--inkt-zacht); }
.demo-tip { display: none; }


/* --- de omzetting: geluid wordt tekst ---
   Een golf over de volle breedte. Zonder scroll-tijdlijn staat hij er als
   stille golf; mét scroll-tijdlijn zakt hij in en verschijnt wat je na afloop
   hebt, een besluit en de actiepunten (onderaan, in de @supports). */
.omzetting { position: relative; }
.omzet-binnen { padding: 1.5rem 0 2.5rem; display: grid; }
.omzet-golf, .omzet-tekst { grid-area: 1 / 1; }
.omzet-golf { height: 11rem; display: flex; align-items: center; gap: 4px; }
.omzet-golf i {
  flex: 1; height: var(--h); border-radius: 99px; transform-origin: center;
  background: color-mix(in oklab, var(--navy) calc(100% - var(--n) * 1.6%), var(--teal));
  opacity: .9;
}
.omzet-tekst { align-self: center; justify-self: center; display: none; width: min(36rem, 100%); }
/* Hier dient .app-scherm alleen voor de tokens van de app; de body-regels van
   de app (achtergrond, letter) horen niet mee. */
.omzet-tekst.app-scherm { background: transparent; }
.omzet-label { margin: 0 0 .6rem; text-align: center; font-size: 1.15rem; font-weight: 600; color: var(--inkt); }
.omzet-kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--schaduw); padding: 1.1rem 1.3rem; font-family: var(--font); color: var(--text);
}
.omzet-kop { margin: .2rem 0 .35rem; font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.omzet-besluit { margin: 0 0 .9rem; }
.omzet-kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.omzet-kaart li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.omzet-avatar {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 650; color: var(--spreker);
  background: color-mix(in srgb, var(--spreker) 14%, transparent);
}
.omzet-wie { font-size: .82rem; color: var(--text-dim); white-space: nowrap; }

/* --- het voorbeeld: de app zelf ---
   De onderdelen komen uit `app-onderdelen.css` (gegenereerd uit de app). Hier
   staat alleen het canvas eromheen: de grond van de app met de wolk, zoals het
   detailscherm hem tekent. */
.voorbeeld .baan { padding-top: 3rem; }
.kaart {
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1.75rem;
}
/* De demo: het echte scherm op een vast canvas van 1280 bij 780, met zoom
   passend gemaakt. Vast, omdat de CSS van de app daarop is vastgezet
   (site/werktuig/app_onderdelen.py, BREEDTE). */
.demo { position: relative; margin-top: 2.5rem; }
.app-label {
  position: absolute; top: -.7rem; left: 1.5rem; z-index: 3;
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 999px;
  padding: .2rem .7rem; color: var(--accent);
}
.demo-kader {
  border-radius: 20px; overflow: hidden; box-shadow: var(--schaduw);
  border: 1px solid var(--lijn); width: fit-content; max-width: 100%; margin: 0 auto;
}
.demo-venster {
  width: 1280px; height: 780px; zoom: var(--demo-zoom);
  position: relative; contain: layout paint; overflow: hidden;
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: var(--fs-base); line-height: 1.5; text-align: left;
}
/* Specifiek genoeg om van de regels van de app te winnen (.app-scherm .x is
   0,2,0 en staat later in de cascade). */
.demo .demo-venster > #root { height: 100%; }
.demo .demo-venster .app-indeling { min-height: 0; height: 100%; }
.demo .demo-venster .rail { height: 100%; position: relative; }
.demo .demo-venster .werkgebied { overflow-y: auto; height: 100%; scroll-behavior: smooth; }
/* Transcript en Notulen: kaarten met een eigen scrollvlak, en hoger dan het
   venster, zodat het venster zelf ook scrolt (Kyan, 13 oktober 2026: "ze zijn
   toch wat kort, maak de pagina dan maar deels scrollbaar"). Daarvoor stonden
   ze op precies wat er paste op 780 (376 en 528 pixels). In de app is het
   tweeluik minstens 34rem en verder de hoogte van het scherm. */
.demo .demo-venster .transcript-tweeluik,
.demo .demo-venster .notulen-tweeluik { height: 720px; min-height: 0; }
.demo-invoer { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
/* Wat in de demo niets doet, reageert ook niet: geen handje, geen hover
   (Kyan, 12 oktober 2026: "sommige dingen zijn aanklikbaar terwijl ze niet
   aanklikbaar horen te zijn"). */
.demo .demo-dood { cursor: default; pointer-events: none; }
/* De app tekent een knop met aria-disabled half doorzichtig; hier draagt elke
   dode knop dat attribuut voor de schermlezer, dus alleen een knop die in de
   app zelf uit stond (data-app-uit) krijgt die opmaak. */
.demo .demo-venster .demo-dood[aria-disabled="true"]:not([data-app-uit]) { opacity: 1; }
/* De klikbare delen (tabbladen, sprekers, springknoppen) zijn hier labels en
   in de app knoppen. De regels van de app zetten daar alles zelf, op de
   uitlijning na, die een knop van de browser krijgt (gemeten 12 oktober 2026).
   De knoppen die niets doen zijn gewoon <button> gebleven. */
:where(.demo label.demo-knop) { text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.demo label { cursor: pointer; }

/* De zoom van de demo loopt in stappen van 20 pixels mee met de breedte, zodat
   het venster nooit wordt afgeknipt. Eén formule kan niet: een lengte delen
   door een lengte (100cqw / 1440px) is nog niet in elke browser een getal.
   Gegenereerd: zoom = (breedte - marges) / 1280. Het canvas is 1280 breed omdat de app daaronder de kaarttitel Transcript afkapt (gemeten 12 oktober 2026). */
.demo { --demo-zoom: .2; }
@media (min-width: 320px) { .demo { --demo-zoom: 0.221; } }
@media (min-width: 340px) { .demo { --demo-zoom: 0.237; } }
@media (min-width: 360px) { .demo { --demo-zoom: 0.253; } }
@media (min-width: 380px) { .demo { --demo-zoom: 0.268; } }
@media (min-width: 400px) { .demo { --demo-zoom: 0.284; } }
@media (min-width: 420px) { .demo { --demo-zoom: 0.3; } }
@media (min-width: 440px) { .demo { --demo-zoom: 0.315; } }
@media (min-width: 460px) { .demo { --demo-zoom: 0.331; } }
@media (min-width: 480px) { .demo { --demo-zoom: 0.346; } }
@media (min-width: 500px) { .demo { --demo-zoom: 0.362; } }
@media (min-width: 520px) { .demo { --demo-zoom: 0.378; } }
@media (min-width: 540px) { .demo { --demo-zoom: 0.393; } }
@media (min-width: 560px) { .demo { --demo-zoom: 0.409; } }
@media (min-width: 580px) { .demo { --demo-zoom: 0.425; } }
@media (min-width: 600px) { .demo { --demo-zoom: 0.44; } }
@media (min-width: 620px) { .demo { --demo-zoom: 0.456; } }
@media (min-width: 640px) { .demo { --demo-zoom: 0.471; } }
@media (min-width: 660px) { .demo { --demo-zoom: 0.487; } }
@media (min-width: 680px) { .demo { --demo-zoom: 0.503; } }
@media (min-width: 700px) { .demo { --demo-zoom: 0.518; } }
@media (min-width: 720px) { .demo { --demo-zoom: 0.521; } }
@media (min-width: 740px) { .demo { --demo-zoom: 0.537; } }
@media (min-width: 760px) { .demo { --demo-zoom: 0.553; } }
@media (min-width: 780px) { .demo { --demo-zoom: 0.568; } }
@media (min-width: 800px) { .demo { --demo-zoom: 0.584; } }
@media (min-width: 820px) { .demo { --demo-zoom: 0.6; } }
@media (min-width: 840px) { .demo { --demo-zoom: 0.615; } }
@media (min-width: 860px) { .demo { --demo-zoom: 0.631; } }
@media (min-width: 880px) { .demo { --demo-zoom: 0.646; } }
@media (min-width: 900px) { .demo { --demo-zoom: 0.662; } }
@media (min-width: 920px) { .demo { --demo-zoom: 0.678; } }
@media (min-width: 940px) { .demo { --demo-zoom: 0.693; } }
@media (min-width: 960px) { .demo { --demo-zoom: 0.709; } }
@media (min-width: 980px) { .demo { --demo-zoom: 0.725; } }
@media (min-width: 1000px) { .demo { --demo-zoom: 0.74; } }
@media (min-width: 1020px) { .demo { --demo-zoom: 0.756; } }
@media (min-width: 1040px) { .demo { --demo-zoom: 0.771; } }
@media (min-width: 1060px) { .demo { --demo-zoom: 0.787; } }
@media (min-width: 1080px) { .demo { --demo-zoom: 0.803; } }
@media (min-width: 1100px) { .demo { --demo-zoom: 0.818; } }
@media (min-width: 1120px) { .demo { --demo-zoom: 0.834; } }
@media (min-width: 1140px) { .demo { --demo-zoom: 0.85; } }
@media (min-width: 1160px) { .demo { --demo-zoom: 0.865; } }
@media (min-width: 1180px) { .demo { --demo-zoom: 0.881; } }
@media (min-width: 1200px) { .demo { --demo-zoom: .884; } }

/* Tabbladen. De app zet .tab-inhoud op flex met 0,2,0; deze regels moeten
   daarvan winnen, anders staat het verborgen paneel gewoon onder het zichtbare
   (gemeten 12 oktober 2026: het notulenpaneel hing onder het transcript). */
.demo .demo-venster .demo-paneel { display: none; }
.demo:has(#demo-tab-t:checked) .demo-venster .demo-transcript,
.demo:has(#demo-tab-n:checked) .demo-venster .demo-notulen,
.demo:has(#demo-tab-d:checked) .demo-venster .demo-delen { display: flex; }
.demo:has(#demo-tab-t:checked) .demo-tab[for="demo-tab-t"],
.demo:has(#demo-tab-n:checked) .demo-tab[for="demo-tab-n"],
.demo:has(#demo-tab-d:checked) .demo-tab[for="demo-tab-d"] {
  color: var(--text); border-bottom-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.demo:has(#demo-tab-t:focus-visible) .demo-tab[for="demo-tab-t"],
.demo:has(#demo-tab-n:focus-visible) .demo-tab[for="demo-tab-n"],
.demo:has(#demo-tab-d:focus-visible) .demo-tab[for="demo-tab-d"],
.demo:has(.demo-sp:focus-visible) .sp-rij { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.demo:has([name="demo-sprong"]:focus-visible) .notulendoc-sprong-knop { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Sprekers: kies er een of meer, de rest van het transcript wijkt. */
.demo:has(.demo-sp:checked) .transcript-blok { opacity: .38; transition: opacity .2s var(--ease-out), background-color .2s var(--ease-out); }

/* Actiepunten: afvinken werkt, en de tellers lopen mee. */
.demo .actiepunt:has(.actiepunt-vink:checked) .actiepunt-kop { opacity: .8; }
.demo .actiepunt:has(.actiepunt-vink:checked) .actiepunt-tekst { color: var(--text-muted); text-decoration: line-through; }
.demo .actieblok:has(.actiepunt-vink:checked) .actieblok-teller { font-size: 0; }
.demo .actieblok:has(.actiepunt-vink:checked) .actieblok-teller::after { content: "alles af"; font-size: var(--fs-xs); }
.demo-teller::before { content: "0"; }
/* Het getal en de meter per combinatie van afgevinkte punten staan in
   app-onderdelen.css (gegenereerd door demo_bouw.cjs): :has() binnen :has()
   bestaat niet, dus elke combinatie is een eigen regel. */
.demo .actiekolom-meter i { transition: width .3s var(--ease-out); }

/* Notulen: een springknop toont het document vanaf dat onderwerp
   (de regels per knop staan in app-onderdelen.css). */
.demo .notulendoc-document { animation: none; }

/* --- rijen: genummerd, redactioneel, met haarlijnen ertussen --- */

.blokken { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
.blokken.drie { grid-template-columns: repeat(3, 1fr); }
.blok p { color: var(--inkt-zacht); margin-bottom: .5rem; }

.rijen { counter-reset: rij; margin-top: 2.5rem; border-top: 1px solid var(--lijn); }
.rijen .blok {
  position: relative;
  counter-increment: rij; display: grid; grid-template-columns: 6rem minmax(0, 22rem) minmax(0, 1fr);
  gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--lijn); align-items: baseline;
}
.rijen .blok::before {
  content: counter(rij, decimal-leading-zero);
  font-size: 2.2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; color: var(--accent);
  font-variant-numeric: lining-nums;
}
.rijen .blok h3 { font-weight: 650; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; margin: 0; }
.rijen .blok p { margin: 0; font-size: 1.05rem; }

/* Wat je eraan hebt: staande kaarten waarvan er één open staat (Kyan,
   13 oktober 2026, naar Celadon). Een andere vorm dan de rijen van Waarom
   FlowScribe eronder (UI-review 12 oktober 2026: twee rijenlijsten na elkaar
   lazen als één lange lijst). Dicht is een kaart 7rem breed met de kop staand;
   open neemt hij de rest. */
.klap { margin-top: 2.5rem; position: relative; }
.klap-invoer { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.klap-rij { display: flex; gap: 1rem; height: 17rem; }
.klap-kaart {
  position: relative; overflow: hidden; flex: 0 0 7rem;
  display: flex; flex-direction: column; padding: 1.5rem;
  border-radius: var(--radius); border: 1px solid var(--lijn); background: var(--papier);
  transition: flex .55s var(--ease-out), background-color .3s ease, box-shadow .3s ease;
}
.klap-knop { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; }
.klap-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Dicht: het nummer bovenin en het korte label staand eronder. */
.klap-nr {
  position: absolute; left: 1.5rem; top: 1.5rem; font-size: 1.05rem; font-weight: 650;
  color: var(--accent); font-variant-numeric: tabular-nums lining-nums; transition: opacity .25s ease;
}
.klap-staand {
  position: absolute; left: 1.5rem; bottom: 1.5rem; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 1.05rem; font-weight: 620; letter-spacing: -.01em; color: var(--inkt); white-space: nowrap;
  transition: opacity .25s ease;
}
/* Open: het icoon, de kop met de zin onderaan, en het nummer groot en licht
   op de achtergrond. De inhoud heeft een vaste breedte, zodat de tekst niet
   opnieuw breekt terwijl de kaart opengaat. */
.klap-groot {
  position: absolute; right: 1.25rem; top: .25rem; font-size: 8rem; font-weight: 700; line-height: 1;
  letter-spacing: -.06em; color: var(--accent); opacity: 0; transition: opacity .3s ease;
  font-variant-numeric: tabular-nums lining-nums; pointer-events: none;
}
.klap-ico {
  width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  opacity: 0; transition: opacity .25s ease;
}
.klap-ico .icoon { width: 1.25rem; height: 1.25rem; }
.klap-inhoud { margin-top: auto; width: min(30rem, 100%); min-width: 22rem; opacity: 0; transition: opacity .25s ease; }
.klap-inhoud h3 { font-size: 1.6rem; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 .6rem; }
.klap-inhoud p { margin: 0; font-size: 1.08rem; color: var(--inkt-zacht); max-width: 28rem; }
/* De open kaart: een regel per rondje, want :checked kan niet zeggen "de kaart
   met hetzelfde nummer". Komt er een vierde bij, dan ook een vierde regel. */
#oplevert-0:checked ~ .klap-rij > :nth-child(1),
#oplevert-1:checked ~ .klap-rij > :nth-child(2),
#oplevert-2:checked ~ .klap-rij > :nth-child(3) {
  flex: 1 1 0; box-shadow: var(--schaduw);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--papier);
}
#oplevert-0:checked ~ .klap-rij > :nth-child(1) :is(.klap-inhoud, .klap-ico),
#oplevert-1:checked ~ .klap-rij > :nth-child(2) :is(.klap-inhoud, .klap-ico),
#oplevert-2:checked ~ .klap-rij > :nth-child(3) :is(.klap-inhoud, .klap-ico) { opacity: 1; transition-delay: .2s; }
#oplevert-0:checked ~ .klap-rij > :nth-child(1) .klap-groot,
#oplevert-1:checked ~ .klap-rij > :nth-child(2) .klap-groot,
#oplevert-2:checked ~ .klap-rij > :nth-child(3) .klap-groot { opacity: .1; transition-delay: .2s; }
#oplevert-0:checked ~ .klap-rij > :nth-child(1) :is(.klap-staand, .klap-nr),
#oplevert-1:checked ~ .klap-rij > :nth-child(2) :is(.klap-staand, .klap-nr),
#oplevert-2:checked ~ .klap-rij > :nth-child(3) :is(.klap-staand, .klap-nr) { opacity: 0; }
#oplevert-0:checked ~ .klap-rij > :nth-child(1) .klap-knop,
#oplevert-1:checked ~ .klap-rij > :nth-child(2) .klap-knop,
#oplevert-2:checked ~ .klap-rij > :nth-child(3) .klap-knop { cursor: default; }
/* De focusring van het verborgen rondje komt op zijn kaart. */
#oplevert-0:focus-visible ~ .klap-rij > :nth-child(1),
#oplevert-1:focus-visible ~ .klap-rij > :nth-child(2),
#oplevert-2:focus-visible ~ .klap-rij > :nth-child(3) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .klap-kaart:hover { background-color: color-mix(in srgb, var(--accent) 4%, var(--papier)); }
  .klap-kaart:hover .klap-staand { color: var(--accent); }
}

/* Waarom: de kop blijft links staan terwijl de punten rechts langskomen. */
.sterk .baan { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 4rem; }
.zijkop { position: sticky; top: 6rem; align-self: start; }
.sterk .rijen { margin-top: 0; }
.rijen.streep .blok { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: 2rem 0 2.25rem; }
.rijen.streep .blok::before {
  content: ""; width: 2.5rem; height: 4px; border-radius: 4px; background: var(--ramp); margin-bottom: .6rem;
}

/* Stappen: drie genummerde stops op één lijn. */
.genummerd { counter-reset: stap; position: relative; }
.genummerd::before {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 1px;
  background: var(--lijn);
}
.genummerd .blok { counter-increment: stap; position: relative; }
.genummerd .blok::before {
  content: counter(stap);
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: 999px; margin-bottom: 1.4rem;
  background: var(--grond); border: 1px solid var(--lijn); position: relative;
  color: var(--inkt); font-family: var(--sans); font-size: 1.3rem;
}
.genummerd .blok:first-child::before { background: var(--inkt); color: var(--grond); border-color: var(--inkt); }

.punten { margin: 0 0 1rem; padding-left: 1.1rem; }
.punten li { margin-bottom: .35rem; }
.vinkjes { list-style: none; padding: 0; columns: 2; column-gap: 3rem; max-width: 50rem; margin: 1.5rem 0; }
.vinkjes li { position: relative; padding-left: 1.7rem; break-inside: avoid; margin-bottom: .6rem; }
.vinkjes li::before {
  content: ""; position: absolute; left: .15rem; top: .42em;
  width: .7rem; height: .38rem; border: solid var(--teal);
  border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* Veiligheid: de donkere band in het midden van de pagina. */
.veilig {
  background: #0b1530; color: #e9eef8;
  --inkt: #f1f4fb; --inkt-zacht: #aeb9cf; --accent: #8db0ff; --accent-sterk: #b3caff; --link: #8db0ff;
  --nadruk: #9fc0ff; --lijn: #24304a;
  overflow: hidden; isolation: isolate;
}
.veilig::after {
  content: ""; position: absolute; z-index: -1; inset: -30% -20% -30% 35%;
  background: var(--wolk); filter: blur(40px); opacity: .85;
}
.veilig h2 { max-width: 20ch; }
.veilig .baan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 3rem; align-items: center; }
.beloften { list-style: none; margin: 1.75rem 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.beloften li {
  position: relative; padding-left: 2.2rem; font-size: 1.1rem; font-weight: 550; color: var(--inkt);
  line-height: 1.4;
}
.beloften li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 30%, transparent); border: 1.5px solid var(--teal);
}
.schild { width: 100%; max-width: 16rem; justify-self: center; overflow: visible; }
.schild-rand, .schild-vink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.schild-rand { stroke: color-mix(in srgb, #8db0ff 70%, transparent); stroke-width: 3; }
.schild-vink { stroke: #58ba64; stroke-width: 6; }

.slot { isolation: isolate; overflow: hidden; }
.slot .baan { text-align: center; padding-top: 7rem; padding-bottom: 7rem; }
.slot::before {
  content: ""; position: absolute; inset: 10% 15%; z-index: -1;
  background: var(--wolk); filter: blur(40px); opacity: .9;
}
.slot h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 18ch; margin-left: auto; margin-right: auto; }
.slot .lood { margin-left: auto; margin-right: auto; }
.slot .knoppen { justify-content: center; }

/* Prijs op home: het bedrag groot links, wat erin zit rechts. */
.prijsblok .baan { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; align-items: start; }
.groot-bedrag {
  font-size: clamp(3.2rem, 6.5vw, 5rem); font-weight: 650; line-height: 1;
  letter-spacing: -.045em; margin: 1.25rem 0 .4rem; font-variant-numeric: lining-nums;
}
.groot-bedrag .klein { font-size: 1rem; font-weight: 400; letter-spacing: 0; vertical-align: .9em; }
.prijsblok .vinkjes { margin-top: .5rem; }
.telt { display: inline-block; position: relative; font-variant-numeric: tabular-nums lining-nums; }

/* --- knoppen: een kleine indruk bij het klikken, een lift bij hover --- */
.knop:active, .knop-kaal:active { transform: scale(.97); transition: transform .12s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .knop:hover { transform: translateY(-1px); }
}

/* --- prijzen --- */

.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.paginakop + .prijsraster .baan { padding-top: 3.5rem; }

/* --- Prijzen, naar n8n.io/pricing (Kyan, 13 oktober 2026) ---
   De kop en het raster vormen één donker vlak met de merkgloed onderin;
   glazen kaarten, een vak met de uren, een knop met de proef eronder, en een
   band met de prijsgedachte. De vergelijking staat daarna weer op licht. */
.paginakop.prijskop .baan { padding-bottom: 0; }
.prijsraster {
  isolation: isolate; overflow: hidden; color: #fff; margin-top: -1px;
  --inkt: #ffffff; --inkt-zacht: rgba(255, 255, 255, .72); --lijn: rgba(255, 255, 255, .14);
  --papier: rgba(255, 255, 255, .06); --link: #9fd6ff; --accent: #8db0ff; --accent-inkt: #0c1630;
  background:
    radial-gradient(60% 50% at 20% 100%, rgba(31, 105, 255, .45), transparent 70%),
    radial-gradient(50% 45% at 85% 100%, rgba(23, 148, 163, .4), transparent 70%),
    radial-gradient(35% 30% at 55% 105%, rgba(88, 186, 100, .3), transparent 70%),
    linear-gradient(rgba(7, 24, 63, .58), rgba(7, 24, 63, .58)), #0a2a6b;
}
.prijsraster .baan { padding-top: 2rem; padding-bottom: 5rem; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* De termijn: per maand of per jaar, als schakelaar. */
.termijn { border: 0; margin: 0 0 1.5rem; padding: 4px; display: inline-flex; gap: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.termijn-invoer { position: absolute; opacity: 0; width: 1px; height: 1px; }
.termijn label { padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-size: .92rem; font-weight: 550;
  color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; gap: .5rem; transition: background-color .2s ease, color .2s ease; }
.termijn-invoer:checked + label { background: #fff; color: #0c1630; }
.termijn-invoer:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.termijn-voordeel { font-size: .75rem; font-weight: 650; padding: .1rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, #58ba64 30%, transparent); color: #c9f2cd; }
.termijn-invoer:checked + label .termijn-voordeel { background: #e3f6e5; color: #1f6b2a; }
.tm-jaar { display: none; }
.prijzenkader:has(#termijn-jaar:checked) .tm-jaar { display: block; }
.prijzenkader:has(#termijn-jaar:checked) .tm-maand { display: none; }
.schakelrij { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.schakelrij .termijn { margin: 0; }

.proefband {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; margin-bottom: 1.25rem;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
}
.proefband h2 { font-size: 1.05rem; margin: 0 0 .1rem; letter-spacing: -.01em; }
.proefband p { margin: 0; color: rgba(255, 255, 255, .75); }
.proefband .klap-ico { opacity: 1; background: rgba(255, 255, 255, .12); color: #fff; }

.pakketten { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
/* Subgrid: de zeven delen van elke kaart (naam, gebruikers, zin, bedrag,
   urenvak, knop, lijst) staan in alle vier op dezelfde hoogte, ook als Team
   een zin van twee regels heeft of Basis geen urenkeuze. */
.kaart.pakket {
  position: relative; display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0;
  align-content: start; padding: 1.6rem 1.4rem; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.kaart.pakket.nadruk { border: 1px solid rgba(159, 214, 255, .55); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(159, 214, 255, .25);
  background: linear-gradient(180deg, rgba(141, 176, 255, .2), rgba(255, 255, 255, .05)); }
.pakket h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.pakket-label {
  position: absolute; top: 1.45rem; right: 1.2rem; margin: 0;
  font-size: .68rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px; color: #0c1630; background: #9fd6ff;
}
.pakket-voor { color: rgba(255, 255, 255, .72); margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.5; }
.pakket .prijs { font-size: 2.6rem; letter-spacing: -.04em; margin: 0; line-height: 1.05; font-weight: 650; white-space: nowrap; }
.pakket .prijs sup { font-size: .42em; letter-spacing: 0; vertical-align: 1.05em; line-height: 0; margin-left: .03em; }
.pakket .prijs .munt { font-size: .6em; vertical-align: .5em; margin-right: .08em; font-weight: 600; }
.prijs-eenheid { display: inline-block; vertical-align: .15em; margin-left: .5rem; font-size: .82rem; font-weight: 450; letter-spacing: 0; color: rgba(255, 255, 255, .72); white-space: normal; max-width: 6.5rem; line-height: 1.25; }
.btwregel { margin: .35rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .6); }
.btwregel span { color: rgba(255, 255, 255, .5); }
.voordeelregel { display: inline-block; margin: .45rem 0 0; padding: .15rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 650; background: color-mix(in srgb, #58ba64 28%, transparent); color: #c9f2cd; }
.jaarregel { margin: .2rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .6); }
.jaarregel sup, .was sup { font-size: 1em; vertical-align: baseline; }
.jaarregel .munt, .was .munt { font-size: 1em; vertical-align: baseline; }
.pakket .was { margin: 0 0 .15rem; font-size: .85rem; color: rgba(255, 255, 255, .5); }
.pakket-mensen { display: grid; gap: .25rem; margin: 0 0 .6rem; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.pakket-mensen p { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pakket-mensen .icoon { width: 1rem; height: 1rem; }
.pakket-knop .klein { color: rgba(255, 255, 255, .8); margin: 0; font-size: .8rem; }
/* Het urenvak als uitklapmenu, zoals n8n de uitvoeringen kiest (13 oktober
   2026). De lijst verschijnt zolang het vak focus heeft, of zolang een van de
   keuzerondjes toetsenbordfocus heeft; een klik op een keuze zet de focus op
   het rondje buiten het vak en dan klapt hij dicht. De korte vertraging op
   `visibility` houdt de keuze aanklikbaar terwijl de focus wisselt. */
/* Even hoog in alle vier de kaarten (Kyan, 13 oktober 2026: "overal die
   dropdown vakjes even groot"): de subgrid geeft de rij één hoogte, en het vak
   vult die, met de inhoud in het midden. */
.uren-keuze { position: relative; align-self: stretch; display: flex; flex-direction: column; margin: 1.1rem 0 1rem; }
.uren-rondjes { border: 0; margin: 0; padding: 0; }
.bundel-invoer { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.uren-vak { position: relative; flex: 1; display: flex; align-items: center; min-height: 4.75rem; padding: .85rem 2.6rem .85rem .85rem; border-radius: 14px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.uren-menu { cursor: pointer; outline: none; transition: border-color .15s ease, background-color .15s ease; }
.uren-menu:hover, .uren-menu:focus { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .11); }
.uren-keuze:has(.bundel-invoer:focus-visible) .uren-menu { outline: 2px solid #fff; outline-offset: 2px; }
.uren-vak .bundel-deel { display: flex; align-items: center; gap: .75rem; }
.uren-getal { font-size: 1.9rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.uren-tekst { font-size: .86rem; line-height: 1.35; }
.uren-tekst span { color: rgba(255, 255, 255, .62); }
.uren-pijl { position: absolute; right: .9rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.uren-menu:focus .uren-pijl, .uren-menu:focus-within .uren-pijl,
.uren-keuze:has(.bundel-invoer:focus-visible) .uren-pijl { transform: rotate(180deg); }
.uren-lijst {
  position: absolute; z-index: 6; left: -1px; right: -1px; top: calc(100% + 6px); padding: 4px;
  border-radius: 12px; background: #0f2556; border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
  visibility: hidden; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top;
  transition: opacity .15s ease, transform .15s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .2s;
}
.uren-menu:focus .uren-lijst, .uren-menu:focus-within .uren-lijst,
.uren-keuze:has(.bundel-invoer:focus-visible) .uren-lijst { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.uren-lijst { max-height: 18rem; overflow-y: auto; }
.uren-lijst label { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .7rem; border-radius: 8px; cursor: pointer; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.uren-lijst label:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.uren-vink { visibility: hidden; color: #8be09a; font-weight: 700; }
/* De keuze in het uitklapmenu (Pro: blokken, Team: 2 tot 10 personen) toont het
   bijbehorende bedrag en de uren. Uitgeschreven tot negen keuzes, het meeste
   dat een pakket heeft (Team); komt er een pakket met meer, dan hier erbij. */
.pakket:has(.bundel-invoer:nth-of-type(1):checked) .uren-lijst label:nth-child(1) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(2):checked) .uren-lijst label:nth-child(2) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(3):checked) .uren-lijst label:nth-child(3) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(4):checked) .uren-lijst label:nth-child(4) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(5):checked) .uren-lijst label:nth-child(5) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(6):checked) .uren-lijst label:nth-child(6) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(7):checked) .uren-lijst label:nth-child(7) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(8):checked) .uren-lijst label:nth-child(8) .uren-vink,
.pakket:has(.bundel-invoer:nth-of-type(9):checked) .uren-lijst label:nth-child(9) .uren-vink { visibility: visible; }
.bundel-groep > .bundel-deel { display: none; }
.bundel-groep > .bundel-deel:first-child { display: block; }
.uren-vak .bundel-groep > .bundel-deel:first-child { display: flex; }
.pakket:has(.bundel-invoer:nth-of-type(2):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(3):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(4):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(5):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(6):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(7):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(8):checked) .bundel-groep > .bundel-deel:first-child,
.pakket:has(.bundel-invoer:nth-of-type(9):checked) .bundel-groep > .bundel-deel:first-child { display: none; }
.pakket:has(.bundel-invoer:nth-of-type(2):checked) .bundel-groep > .bundel-deel:nth-child(2),
.pakket:has(.bundel-invoer:nth-of-type(3):checked) .bundel-groep > .bundel-deel:nth-child(3),
.pakket:has(.bundel-invoer:nth-of-type(4):checked) .bundel-groep > .bundel-deel:nth-child(4),
.pakket:has(.bundel-invoer:nth-of-type(5):checked) .bundel-groep > .bundel-deel:nth-child(5),
.pakket:has(.bundel-invoer:nth-of-type(6):checked) .bundel-groep > .bundel-deel:nth-child(6),
.pakket:has(.bundel-invoer:nth-of-type(7):checked) .bundel-groep > .bundel-deel:nth-child(7),
.pakket:has(.bundel-invoer:nth-of-type(8):checked) .bundel-groep > .bundel-deel:nth-child(8),
.pakket:has(.bundel-invoer:nth-of-type(9):checked) .bundel-groep > .bundel-deel:nth-child(9) { display: block; }
.pakket:has(.bundel-invoer:nth-of-type(2):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(2),
.pakket:has(.bundel-invoer:nth-of-type(3):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(3),
.pakket:has(.bundel-invoer:nth-of-type(4):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(4),
.pakket:has(.bundel-invoer:nth-of-type(5):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(5),
.pakket:has(.bundel-invoer:nth-of-type(6):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(6),
.pakket:has(.bundel-invoer:nth-of-type(7):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(7),
.pakket:has(.bundel-invoer:nth-of-type(8):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(8),
.pakket:has(.bundel-invoer:nth-of-type(9):checked) .uren-vak .bundel-groep > .bundel-deel:nth-child(9) { display: flex; }
/* De knop met de proef eronder, in het merkverloop. */
.pakket-knop {
  align-self: start; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem 1rem; border-radius: 12px;
  text-decoration: none; color: #fff; font-weight: 600; margin-bottom: 1.25rem;
  background: linear-gradient(90deg, #1f69ff, #1794a3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .15s ease, transform .15s ease;
}
.pakket-knop .klein { color: rgba(255, 255, 255, .8); font-weight: 450; }
.pakket-knop:hover { filter: brightness(1.08); }
.pakket-knop:active { transform: scale(.98); }
.erfenis { font-size: .86rem; font-weight: 600; margin: .25rem 0 .6rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, .16); }
.vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .88rem; color: rgba(255, 255, 255, .86); }
.vinklijst li { position: relative; padding-left: 1.5rem; }
.vinklijst li::before {
  content: ""; position: absolute; left: .1rem; top: .38em; width: .6rem; height: .32rem;
  border: solid #8be09a; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
/* De band met de prijsgedachte, zoals n8n "Pay for full executions". */
.prijsband {
  margin-top: 1.5rem; padding: 1.4rem 1.6rem; border-radius: 18px;
  background: linear-gradient(90deg, rgba(31, 105, 255, .35), rgba(23, 148, 163, .3) 55%, rgba(88, 186, 100, .3));
  border: 1px solid rgba(255, 255, 255, .16);
}
.prijsband h2 { font-size: 1.25rem; margin: 0 0 .2rem; }
.prijsband p { margin: 0; color: rgba(255, 255, 255, .82); }
.prijsregels { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9rem; color: rgba(255, 255, 255, .86); }
.prijsregels li { position: relative; padding-left: 1.5rem; }
.prijsregels li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .6rem; height: .32rem;
  border: solid #8be09a; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* De vergelijking, weer op licht. */
.vergelijk-rol { overflow-x: auto; margin-top: 1.5rem; }
.vergelijk { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 40rem; }
.vergelijk th, .vergelijk td { padding: .8rem .75rem; border-bottom: 1px solid var(--lijn); text-align: center; }
.vergelijk thead th { font-size: 1rem; font-weight: 650; }
.vergelijk tbody th { text-align: left; font-weight: 450; color: var(--inkt); width: 40%; }
.vergelijk .vink { color: var(--teal); font-weight: 700; }
.vergelijk .streep { display: inline-block; width: .7rem; height: 2px; border-radius: 2px; vertical-align: middle; background: color-mix(in srgb, var(--inkt-zacht) 60%, transparent); }

/* Contact onderaan elke pagina (13 oktober 2026), naar Mercury, Granola en
   Stripe: de vraag van de bezoeker als kop, één zin en één actie, op een
   zachte merkwolk. De bedrijfsgegevens staan in de voet. */
.contactband { isolation: isolate; overflow: hidden; border-top: 1px solid var(--lijn); scroll-margin-top: 4.5rem; }
.contactband::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -4rem; width: 80rem; height: 34rem;
  transform: translateX(-50%); background: var(--wolk); filter: blur(60px); opacity: .45; pointer-events: none;
}
.contactband .baan { text-align: center; padding-top: 5rem; padding-bottom: 5rem; }
.contactband h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0 auto .7rem; }
.contactband .lood { margin: 0 auto; }
.hulpkaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2.75rem 0 0; text-align: left; }
.hulpkaart {
  display: flex; flex-direction: column; padding: 1.5rem; border-radius: 20px;
  border: 1px solid var(--lijn); background: color-mix(in srgb, var(--papier) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(12, 22, 48, .04), 0 12px 32px -18px rgba(12, 22, 48, .18);
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s ease, border-color .3s ease;
}
.hulpkaart .klap-ico { opacity: 1; margin-bottom: 1.1rem; }
.hulpkaart h3 { font-size: 1.15rem; letter-spacing: -.02em; margin: 0 0 .45rem; }
.hulpkaart p { color: var(--inkt-zacht); margin: 0 0 1.25rem; font-size: .95rem; }
.hulpkaart .hulpkaart-actie { margin: auto 0 0; }
@media (hover: hover) and (pointer: fine) {
  .hulpkaart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--lijn));
    box-shadow: 0 1px 2px rgba(12, 22, 48, .04), 0 24px 48px -22px rgba(12, 22, 48, .28); }
}
.anders { margin: 2rem auto 0; color: var(--inkt-zacht); }
.anders a { color: var(--link); font-weight: 550; }
/* De bedrijfsgegevens in de voet: klein, als rij van feiten. */
.voet .feitenrij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: .5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.feitenrij dt { font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: .15rem; }
.feitenrij dd { margin: 0; font-size: .88rem; color: var(--inkt); }
.voet .feitenrij a { color: var(--inkt); text-decoration: underline; text-underline-offset: 2px; }
.prijs { font-size: 2.2rem; font-weight: 650; letter-spacing: -.02em;
  margin-bottom: .1rem; font-variant-numeric: lining-nums tabular-nums; }
.prijs .klein { font-weight: 400; letter-spacing: 0; }
.beslaat { font-weight: 550; margin-bottom: .5rem; }

/* --- vragen --- */

.vragen { display: grid; gap: 1.75rem 3rem; grid-template-columns: 1fr 1fr; margin-top: 2rem; }
.vraag { border-top: 1px solid var(--lijn); padding-top: 1.2rem; }
.vraag p { color: var(--inkt-zacht); }

/* --- contact --- */

.gegevens { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 2rem; margin: 0; }
.gegevens dt { color: var(--inkt-zacht); }
.gegevens dd { margin: 0; }

/* --- juridische pagina's: een ander genre, een smalle leeskolom --- */

.juridisch .baan { max-width: 48rem; }
.juridisch h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.juridisch h2 { margin-top: 2.75rem; font-size: 1.5rem; }
.juridisch ol { padding-left: 1.4rem; }
.juridisch li { margin-bottom: .75rem; }
.versie { color: var(--inkt-zacht); font-size: .95rem; margin-top: -.5rem; }
.adres { line-height: 1.9; }

/* Wat er nog niet is. Zichtbaar met opzet; `bouw.py` telt ze. */
.ontbreekt {
  background: var(--papier); border: 1px dashed var(--lijn);
  border-radius: 4px; padding: 0 .35rem; font-style: italic; color: var(--inkt-zacht);
}
.wacht {
  font-size: 1.05rem; color: var(--inkt-zacht);
  border-left: 3px solid var(--lijn); padding-left: 1rem; max-width: 42rem;
}

/* --- voet --- */

.voet { border-top: 1px solid var(--lijn); background: var(--papier); }
.voet .baan { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.voet-baan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; }
.voet-merk { margin: 0; }
.voet a { color: var(--inkt-zacht); text-decoration: none; }
.voet a:hover { color: var(--inkt); }
.voetlijst { margin: 0; justify-content: flex-end; }
.voet .klein { grid-column: 1 / -1; margin: 0; }


/* --- de hero als de voordeur van de app ---
   Kyans keuze (12 oktober 2026): de merkwolk onder een donkere sluier met witte
   tekst, zoals de voordeur en de deelpagina van de app (besluit "Het merk in de
   app", 14 september 2026: sluier 58 procent navy). De demo steekt eruit naar de
   lichte pagina. */
.hero::before {
  inset: 0 0 20rem 0; z-index: -2; -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(45% 70% at 18% 20%, rgba(31, 105, 255, .55), transparent 70%),
    radial-gradient(40% 60% at 82% 30%, rgba(23, 148, 163, .5), transparent 70%),
    radial-gradient(35% 50% at 60% 95%, rgba(88, 186, 100, .35), transparent 70%),
    linear-gradient(rgba(7, 24, 63, .58), rgba(7, 24, 63, .58)),
    #0a2a6b;
}
.hero::after { display: none; }
.hero-tekst {
  --inkt: #ffffff; --inkt-zacht: rgba(255, 255, 255, .86); --nadruk: #9fd6ff; --lijn: rgba(255,255,255,.3);
}
.hero .knop { background: #ffffff; color: #0c1630; }
.hero .knop:hover { background: #e8eefc; color: #0c1630; }
.hero .knop-kaal { color: #ffffff; border-color: rgba(255, 255, 255, .4); }
.hero .knop-kaal:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero .baan { padding-top: 6rem; }
.app-label { box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
.demo-kader { box-shadow: 0 40px 90px -30px rgba(7, 24, 63, .55), 0 2px 6px rgba(0,0,0,.08); border-color: rgba(255,255,255,.25); }

/* De bronnen: drie glazen kaartjes in de zijmarges naast de kop (Kyan,
   13 oktober 2026, naar Celadon). Ze liggen nooit over de demo, die moet
   klikbaar blijven; bij het scrollen drijven ze naar hem toe en lossen op
   (onderaan, in de @supports). Alleen waar er naast de kop ruimte is. */
.hero .baan { position: relative; }
.bronnen { display: none; list-style: none; margin: 0; padding: 0; }
@media (min-width: 75rem) {
  .bronnen { display: block; }
  .bron { position: absolute; z-index: 1; animation: rijs .9s var(--ease-out) both; animation-delay: calc(1s + var(--i) * 120ms); }
  .bron:nth-child(1) { left: 1.5rem; top: 12.5rem; rotate: -3deg; }
  .bron:nth-child(2) { right: 4.5rem; top: 8.5rem; rotate: 2.5deg; }
  .bron:nth-child(3) { right: 1rem; top: 17rem; rotate: -1.5deg; }
}
.bron-kaart {
  display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem .65rem .65rem; max-width: 16rem;
  border-radius: 16px; color: #fff; line-height: 1.3;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.bron-kaart strong { display: block; font-size: .9rem; font-weight: 620; }
.bron-kaart strong + span { display: block; font-size: .8rem; color: rgba(255, 255, 255, .78); }
.bron-ico {
  width: 2.2rem; height: 2.2rem; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
}
.bron-ico .icoon { width: 1.05rem; height: 1.05rem; }
.icoon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- de kop van een vervolgpagina: dezelfde donkere voordeur als de hero,
   compacter (Hoe het werkt, 13 oktober 2026). --- */
.paginakop { isolation: isolate; overflow: hidden; color: #fff;
  --inkt: #ffffff; --inkt-zacht: rgba(255, 255, 255, .86); --nadruk: #9fd6ff; --lijn: rgba(255,255,255,.3);
  background:
    radial-gradient(45% 90% at 15% 10%, rgba(31, 105, 255, .55), transparent 70%),
    radial-gradient(40% 80% at 85% 30%, rgba(23, 148, 163, .5), transparent 70%),
    linear-gradient(rgba(7, 24, 63, .58), rgba(7, 24, 63, .58)), #0a2a6b; }
.paginakop .baan { padding-top: 5.5rem; padding-bottom: 4.5rem; }
.paginakop h1 { margin-bottom: 1rem; }
.paginakop .lood { margin: 0; }

/* --- de stappenlijn: vier stops op een stippellijn (naar Celadon). De lijn
   loopt van het midden van de eerste stop naar dat van de laatste; een tweede,
   doorgetrokken lijn in de merkramp tekent zich er bij het scrollen overheen,
   en elke stop licht op zodra die lijn hem bereikt (onderaan, @supports). --- */
.stappenlijn .baan { padding-top: 5rem; }
.lijn { list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2rem; }
.lijn::before, .lijn::after {
  content: ""; position: absolute; top: 1.6rem; height: 0; z-index: 0;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
}
.lijn::before { border-top: 2px dotted color-mix(in srgb, var(--inkt-zacht) 45%, transparent); }
.lijn::after { border-top: 2px solid transparent; border-image: var(--ramp) 1; transform: scaleX(0); transform-origin: left; }
.lijn-stop { position: relative; z-index: 1; text-align: center; }
.lijn-nr {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 650; font-size: 1.1rem;
  background: var(--papier); color: var(--accent); border: 2px solid var(--lijn);
  box-shadow: 0 0 0 8px var(--grond);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.lijn-stop h2, .lijn-stop h3 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 .4rem; }
.lijn-stop > p { color: var(--inkt-zacht); margin: 0 auto 1rem; max-width: 16rem; }
.lijn-punten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.lijn-punten li {
  font-size: .82rem; padding: .25rem .65rem; border-radius: 999px; color: var(--inkt);
  background: var(--papier); border: 1px solid var(--lijn);
}
/* Zonder scroll-tijdlijn staan de stops gewoon aan. */
.lijn::after { transform: scaleX(1); }
.lijn-nr { background: var(--accent); color: var(--accent-inkt); border-color: var(--accent); }

/* --- per stap een stuk van de echte app (Hoe het werkt, 13 oktober 2026):
   tekst en beeld naast elkaar, om en om links en rechts, zoals Linear en
   Fathom hun functies laten zien. Het beeld is een achtergrond, met een eigen
   versie voor het donkere thema; de verhouding is die van het vastgelegde
   stuk, zodat er niets wordt afgesneden. --- */
.beeldstappen .baan { display: grid; gap: 6rem; padding-top: 2rem; }
.beeldstap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; }
.beeldstap:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.beeldstap:nth-child(even) .beeldstap-tekst { order: 2; }
.beeldstap-nr { display: inline-block; font-size: .8rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.beeldstap h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 1rem; }
.beeldstap-tekst p { color: var(--inkt-zacht); margin: 0; max-width: 28rem; }
.beeldstap-raam {
  padding: clamp(.75rem, 2vw, 1.5rem); border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--lijn);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--blauw) 14%, transparent), transparent 70%),
    var(--papier);
  box-shadow: var(--schaduw);
}
.beeld { aspect-ratio: var(--r); border-radius: 12px; background: center / cover no-repeat;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--inkt) 8%, transparent); }
.beeld-opnemen { --r: 1400 / 883; background-image: url(/beelden/hoe-opnemen-licht.webp); }
.beeld-uitschrijven { --r: 1400 / 837; background-image: url(/beelden/hoe-uitschrijven-licht.webp); }
.beeld-notulen { --r: 1400 / 838; background-image: url(/beelden/hoe-notulen-licht.webp); }
.beeld-delen { --r: 1400 / 996; background-image: url(/beelden/hoe-delen-licht.webp); }
@media (prefers-color-scheme: dark) {
  .beeld-opnemen { background-image: url(/beelden/hoe-opnemen-donker.webp); }
  .beeld-uitschrijven { background-image: url(/beelden/hoe-uitschrijven-donker.webp); }
  .beeld-notulen { background-image: url(/beelden/hoe-notulen-donker.webp); }
  .beeld-delen { background-image: url(/beelden/hoe-delen-donker.webp); }
}

/* --- Veiligheid (16 oktober 2026, tweede ronde op Kyans "nog wat mooiers"):
   een kop met een schild in ringen, vier tegels die half over die kop
   schuiven, de weg van de opname als schema met een kader om alles wat
   binnen de EU gebeurt, rubrieken als kaarten met vinkjes, en de documenten
   als kaarten. Alleen CSS; beweging alleen zonder reduced motion. --- */
.vv { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vi-ico {
  width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center; flex: none;
  color: #fff; background: linear-gradient(135deg, var(--blauw), var(--teal));
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--blauw) 70%, transparent);
}
.vi-ico .icoon { width: 1.3rem; height: 1.3rem; }

.paginakop.veiligkop .baan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem;
  align-items: center; padding-bottom: 9rem; }
.schildbeeld { position: relative; aspect-ratio: 1; width: min(100%, 24rem); justify-self: center; display: grid; place-items: center; }
.schildbeeld .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); }
.schildbeeld .r1 { inset: 0; }
.schildbeeld .r2 { inset: 14%; border-color: rgba(255, 255, 255, .22); }
.schildbeeld .r3 { inset: 28%; border-color: rgba(255, 255, 255, .3);
  background: radial-gradient(circle, rgba(126, 166, 255, .22), transparent 70%); }
.schild-kern {
  position: relative; width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #2a63e8, #1794a3 60%, #58ba64);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.schild-kern .icoon { width: 46%; height: 46%; color: #fff; stroke-width: 1.6; }
.schild-label {
  position: absolute; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .5rem .85rem .5rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .55);
}
.schild-label .icoon { width: 1rem; height: 1rem; color: #8be09a; stroke-width: 2.6; }
.schild-label.l0 { top: 8%; left: -4%; }
.schild-label.l1 { top: 46%; right: -10%; }
.schild-label.l2 { bottom: 8%; left: 6%; }

.kortblok .baan { padding-top: 0; padding-bottom: 3rem; margin-top: -6rem; position: relative; z-index: 2; }
.feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.feit { padding: 1.6rem; border-radius: var(--radius); background: var(--papier); border: 1px solid var(--lijn);
  box-shadow: var(--schaduw); }
.feit .vi-ico { margin-bottom: 1.25rem; }
.feit h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; margin: 0 0 .4rem; }
.feit p { margin: 0; color: var(--inkt-zacht); font-size: .95rem; }

.routeblok .baan { padding-top: 4rem; }
.stroom { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem minmax(0, 3.3fr); align-items: center; margin-top: 3rem; }
.knoop { padding: 1.4rem; border-radius: var(--radius); background: var(--papier); border: 1px solid var(--lijn); }
.knoop .vi-ico { width: 2.4rem; height: 2.4rem; border-radius: 12px; margin-bottom: 1rem; }
.knoop h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 .3rem; }
.knoop p { margin: 0; font-size: .92rem; color: var(--inkt-zacht); line-height: 1.5; }
.knoop-jij .vi-ico { background: var(--inkt); color: var(--grond); box-shadow: none; }
.stroom-pijl { position: relative; height: 100%; display: grid; place-items: center; padding: 0 .9rem; }
.stroom-label { position: absolute; top: calc(50% - 2.4rem); display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--inkt-zacht); white-space: nowrap; }
.stroom-label .icoon { width: .9rem; height: .9rem; }
.stroom-lijn { position: relative; width: 100%; height: 2px; background: var(--ramp); border-radius: 2px; }
.stroom-lijn::after { content: ""; position: absolute; right: -2px; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--groen); border-right: 2px solid var(--groen); transform: translateY(-50%) rotate(45deg); }
.stroom-lijn i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--blauw); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blauw) 22%, transparent); display: none; }
.stroom-eu { position: relative; padding: 3rem 1.25rem 1.25rem; border-radius: calc(var(--radius) + 8px);
  border: 2px dashed color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent); }
.stroom-eu-label { position: absolute; top: .9rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.stroom-eu-label .icoon { width: 1rem; height: 1rem; }
.stroom-knopen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.stroom-knopen .knoop { position: relative; box-shadow: var(--schaduw); }
.stroom-knopen .knoop:not(:last-child)::after {
  content: ""; position: absolute; right: -1.2rem; top: 50%; width: .6rem; height: .6rem;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); opacity: .6;
}
.stroom-slot { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; margin: 1.25rem 0 0;
  color: var(--inkt-zacht); font-size: .95rem; }
.stroom-slot .icoon { width: 1.1rem; height: 1.1rem; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .stroom-lijn i { display: block; animation: stroom-loop 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes stroom-loop { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
}

.rubriek .baan { padding-top: .75rem; padding-bottom: .75rem; }
.rubriek-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem;
  padding: 2.5rem; border-radius: calc(var(--radius) + 6px); background: var(--papier); border: 1px solid var(--lijn); }
.rubriek-kop .vi-ico { margin-bottom: 1.1rem; }
.rubriek-kop h2 { font-size: 1.6rem; letter-spacing: -.025em; margin: 0 0 .5rem; }
.rubriek-kop p { margin: 0; color: var(--inkt-zacht); }
.rubriek-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; align-content: start; }
.rubriek-item h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 650; margin: 0 0 .35rem; }
.rubriek-item .vink { width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--groen) 18%, transparent); color: color-mix(in srgb, var(--groen) 70%, var(--inkt)); }
.rubriek-item .vink .icoon { width: .8rem; height: .8rem; stroke-width: 3; }
.rubriek-item p { margin: 0 0 0 1.9rem; color: var(--inkt-zacht); }
.routeblok + .rubriek .baan { padding-top: 2rem; }

.papierblok .baan { padding-top: 4rem; }
.documenten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.document { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--radius);
  background: var(--papier); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none;
  transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease; }
.document-tekst { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.document-tekst span { color: var(--inkt-zacht); font-size: .9rem; line-height: 1.45; }
.document-pijl { color: var(--accent); transition: transform .2s var(--ease-out); }
.document-pijl .icoon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .document:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--lijn)); transform: translateY(-2px); box-shadow: var(--schaduw); }
  .document:hover .document-pijl { transform: translateX(3px); }
}

/* --- wat je zelf instelt: drie kaarten --- */
.zelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.zelf-kaart {
  padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--lijn);
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%),
    var(--papier);
}
.zelf-kaart .klap-ico { margin-bottom: 1.1rem; opacity: 1; }
.zelf-kaart h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.02em; }
.zelf-kaart p { margin: 0; color: var(--inkt-zacht); }

/* --- smal scherm ---
   58 procent van het verkeer op een prijspagina is mobiel (onderzoek,
   sectie 4), dus vier kolommen naast elkaar is daar geen optie. */

@media (max-width: 64rem) {
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paginakop.veiligkop .baan { grid-template-columns: minmax(0, 1fr); padding-bottom: 8rem; }
  .schildbeeld { width: min(70%, 18rem); }
  .schild-label.l1 { right: -34%; }
  .schild-label.l0 { left: -24%; }
  .stroom { grid-template-columns: minmax(0, 1fr); }
  .stroom-pijl { height: 5.5rem; }
  .stroom-lijn { width: 2px; height: 100%; background: var(--ramp-staand); }
  .stroom-lijn::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%) rotate(135deg); }
  .stroom-label { top: 50%; left: calc(50% + 1rem); transform: translateY(-50%); }
  .stroom-lijn i { left: 50%; margin-left: -5px; margin-top: 0; animation-name: stroom-val; }
  @keyframes stroom-val { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
  .rubriek-kaart { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 2rem; }
  .documenten { grid-template-columns: minmax(0, 1fr); }
  .beeldstap, .beeldstap:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .beeldstap:nth-child(even) .beeldstap-tekst { order: 0; }
  .beeldstappen .baan { gap: 4.5rem; }
  .sterk .baan, .prijsblok .baan, .veilig .baan { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .zijkop { position: static; }
  .rijen .blok { grid-template-columns: 4rem minmax(0, 1fr); }
  .rijen .blok p { grid-column: 2; }
  .pakketten { grid-template-columns: 1fr 1fr; }
  .hulpkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .prijsregels { grid-template-columns: minmax(0, 1fr); }
  .feiten, .rubriek-items, .stroom-knopen { grid-template-columns: minmax(0, 1fr); }
  /* Op een telefoon past het schild niet naast de tegels: alleen de tekst. */
  .schildbeeld { display: none; }
  .paginakop.veiligkop .baan { padding-bottom: 7.5rem; }
  .stroom-knopen .knoop:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -1.2rem; transform: translateX(-50%) rotate(135deg); }
  .rubriek-kaart { padding: 1.5rem; }
  .baan { padding: 3.5rem 1rem; }
  .hero .baan { padding-top: 3rem; padding-bottom: 2.5rem; }
  .blokken, .blokken.drie, .pakketten, .vragen
    { grid-template-columns: minmax(0, 1fr); }
  .genummerd::before { display: none; }
  .vinkjes { columns: 1; }
  .kop-baan { gap: .6rem .5rem; flex-wrap: wrap; }
  .merk { font-size: 1rem; gap: .45rem; }
  .merk .merkteken { width: 26px; height: 26px; }
  .hoofdnav { margin-right: 0; width: 100%; order: 3; }
  .hoofdnav ul { gap: 1.25rem; }
  .kop-knoppen { margin-left: auto; gap: .15rem; }
  .kop .knop, .kop .knop-kaal { padding: 0 .75rem; min-height: 2.3rem; font-size: .86rem; }
  /* Het tikvlak is 44 px, ook waar de knop of de link kleiner oogt
     (rubriek: raakdoel 44, gemeten 36,8 en 22 px). */
  .kop .knop, .kop .knop-kaal, .hoofdnav a { position: relative; }
  .kop .knop::after, .kop .knop-kaal::after, .hoofdnav a::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .schild { max-width: 9rem; justify-self: start; }
  .demo-tip { display: inline; }
  .omzet-golf { height: 7rem; gap: 2px; }
  .omzet-golf i:nth-child(2n) { display: none; }
  .omzet-kaart li { grid-template-columns: auto minmax(0, 1fr); }
  .omzet-wie { grid-column: 2; }
  .rijen .blok { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .rijen .blok p { grid-column: auto; }
  /* Op een telefoon is er geen ruimte om open te klappen: alles open, onder
     elkaar, en de rondjes doen niets. */
  .paginakop .baan { padding-top: 3rem; padding-bottom: 3rem; }
  /* De stappenlijn staat op een telefoon rechtop, met de lijn links. */
  .lijn { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .lijn::before, .lijn::after { left: 1.6rem; right: auto; top: 1.6rem; bottom: 1.6rem; height: auto; width: 0; }
  .lijn::before { border-top: 0; border-left: 2px dotted color-mix(in srgb, var(--inkt-zacht) 45%, transparent); }
  .lijn::after { border-top: 0; border-left: 2px solid var(--accent); border-image: none; transform-origin: top; }
  .lijn-stop { text-align: left; padding-left: 4.5rem; }
  .lijn-nr { position: absolute; left: 0; top: 0; margin: 0; }
  .lijn-stop > p { margin-left: 0; }
  .lijn-punten { justify-content: flex-start; }
  .zelf { grid-template-columns: minmax(0, 1fr); }
  .hulpkaarten { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
  .contactband .baan { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .klap-rij { flex-direction: column; height: auto; }
  .klap-kaart { flex: none; gap: 1.2rem; padding: 1.25rem; }
  .klap-staand, .klap-knop, .klap-nr, .klap-groot { display: none; }
  .klap-inhoud { opacity: 1; min-width: 0; width: auto; }
  .klap-ico { opacity: 1; }
  .klap-inhoud h3 { font-size: 1.3rem; }
  .rijen .blok::before { font-size: 2rem; }
  .voet-baan { grid-template-columns: minmax(0, 1fr); }
  .voetlijst { justify-content: flex-start; }
}

/* --- scroll-gedreven beweging ---
   Alleen waar de browser een scroll-tijdlijn kent en de lezer geen minder
   beweging gevraagd heeft. Zonder deze blokken staat alles er gewoon, stil. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .beeldstap-raam { animation: raam-op linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes raam-op { from { opacity: 0; transform: translateY(40px) scale(.97); } }
    /* De kop van de pagina wordt glas zodra je begint te scrollen. */
    .kop { animation: kop-glas linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
    @keyframes kop-glas {
      from { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    }

    /* Geluid wordt tekst: de golf zakt in, de zinnen schrijven zich uit. */
    .omzetting { view-timeline: --omzet block; }
    .omzet-golf i {
      animation: inzakken linear both; animation-timeline: --omzet;
      animation-range: cover 10% cover 38%;
    }
    @keyframes inzakken {
      70% { opacity: .5; }
      to { transform: scaleY(.03); opacity: 0; }
    }
    .omzet-tekst { display: grid; position: relative; z-index: 1; animation: verschijn linear both; animation-timeline: --omzet; animation-range: cover 36% cover 46%; }
    @keyframes verschijn { from { opacity: 0; } to { opacity: 1; } }
    .omzet-kaart > *, .omzet-kaart li {
      animation: rijs linear both; animation-timeline: --omzet;
      animation-range: cover calc(38% + var(--n, 0) * 4%) cover calc(50% + var(--n, 0) * 4%);
    }

    /* Secties schuiven één keer rustig binnen terwijl ze in beeld komen. */
    .vlak:not(.hero) h2, .rijen .blok, .genummerd .blok, .vraag, .pakket {
      animation: rijs linear both; animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .rijen .blok::before {
      animation: cijfer-in linear both; animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes cijfer-in { from { opacity: 0; transform: translateX(-12px); } }


    /* De lijn tussen de stappen trekt zich van links naar rechts. */
    .genummerd { view-timeline: --stappen block; }
    .genummerd::before {
      transform-origin: left; animation: lijn linear both; animation-timeline: --stappen;
      animation-range: entry 30% cover 50%;
    }
    @keyframes lijn { from { transform: scaleX(0); } }

    /* Het bedrag telt van nul op zodra het in beeld komt. */
    .telt-tekst { position: absolute; inset: 0; opacity: 0; }
    .telt::after {
      content: counter(bedrag); counter-reset: bedrag var(--bedrag);
      animation: tel linear both; animation-timeline: view(); animation-range: entry 30% cover 45%;
    }
    @keyframes tel { from { --bedrag: 0; } to { --bedrag: var(--doel); } }

    /* De beloften komen er een voor een bij, en het schild tekent zich. */
    .veilig { view-timeline: --veilig block; }
    .beloften li {
      animation: rijs linear both; animation-timeline: --veilig;
      animation-range: entry calc(20% + var(--i) * 12%) entry calc(60% + var(--i) * 12%);
    }
    .schild-rand {
      stroke-dasharray: 1; animation: teken linear both; animation-timeline: --veilig;
      animation-range: entry 20% entry 100%;
    }
    .schild-vink {
      stroke-dasharray: 1; animation: teken linear both; animation-timeline: --veilig;
      animation-range: entry 90% cover 40%;
    }
    @keyframes teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

    /* Onder elke rij tekent de merkstreep zich terwijl je hem leest. */
    .rijen .blok::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--ramp); transform-origin: left;
      animation: streep-rij linear both; animation-timeline: view();
      animation-range: entry 60% cover 50%;
    }
    @keyframes streep-rij { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* De stappenlijn op een telefoon: hij staat daar onder de vouw, dus hij
       tekent zich terwijl je hem in beeld scrolt, en elke stop licht op zodra
       de lijn erbij is. Op een breed scherm staat hij bij het laden al in
       beeld; daar tekent hij zich één keer na de kop (buiten deze @supports). */
    @media (max-width: 44rem) {
      .stappenlijn { view-timeline: --lijn block; }
      .lijn::after { animation: lijn-trek-staand linear both; animation-timeline: --lijn; animation-range: entry 10% cover 60%; }
      .lijn-nr { animation: stop-aan linear both; animation-timeline: --lijn;
        animation-range: entry calc(5% + var(--i) * 12%) cover calc(20% + var(--i) * 12%); }
      .lijn-stop h2, .lijn-stop > p, .lijn-punten { animation: rijs linear both; animation-timeline: --lijn;
        animation-range: entry calc(5% + var(--i) * 12%) cover calc(22% + var(--i) * 12%); }
    }

    /* De bronnen drijven bij de eerste 420 pixels scrollen naar de demo toe en
       lossen erin op. Twee naar binnen, één vanaf links. */
    .bron-kaart { animation: naar-demo linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
    .bron:nth-child(1) .bron-kaart { --dx: 5rem; }
    .bron:nth-child(n+2) .bron-kaart { --dx: -5rem; }
    @keyframes naar-demo {
      to { translate: var(--dx) 9rem; scale: .85; opacity: 0; }
    }

    /* De wolk in de donkere band drijft langzaam mee met het scrollen. */
    .veilig::after { animation: drijf linear both; animation-timeline: view(); }
    @keyframes drijf { from { transform: translate(-8%, 10%); } to { transform: translate(6%, -10%); } }
  }
}

/* De stappenlijn op een breed scherm: hij staat bij het laden in beeld, dus hij
   tekent zich één keer na de kop, en elke stop licht op als de lijn hem bereikt
   (stop i op i / (n - 1) van de lijn, 1,6 seconde voor de hele lijn). */
@keyframes lijn-trek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lijn-trek-staand { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stop-aan {
  from { background: var(--papier); color: var(--accent); border-color: var(--lijn); }
  to { background: var(--accent); color: var(--accent-inkt); border-color: var(--accent); }
}
@media (min-width: 44.01rem) and (prefers-reduced-motion: no-preference) {
  .lijn::after { animation: lijn-trek 1.6s cubic-bezier(.45, 0, .55, 1) .5s both; }
  .lijn-nr { animation: stop-aan .3s ease-out both; animation-delay: calc(.5s + var(--i) * 1.6s / (var(--n) - 1)); }
  .lijn-stop h2, .lijn-stop > p, .lijn-punten {
    animation: rijs .7s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(.55s + var(--i) * 1.6s / (var(--n) - 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}