/* ==========================================================================
   Posworld — designsysteem
   ==========================================================================
   Uitgangspunt: een redactioneel constructiesysteem in plaats van een
   verzameling zwevende kaarten. Drie principes dragen het hele ontwerp:

   1. ZICHTBARE CONSTRUCTIE. Haarlijnen, een margekolom met nummers en labels,
      en velden die tegen de schermrand lopen. De opbouw van de pagina is
      afleesbaar, zoals in een goed gezet jaarverslag of een spec-sheet.
   2. TWEE STEMMEN. Een serif (Source Serif 4) draagt de uitspraken, een
      grotesk (Instrument Sans) draagt alles wat functioneel is: navigatie,
      knoppen, labels, tabellen. Het contrast tussen die twee doet het werk,
      niet kleur of schaduw.
   3. RITME. Secties verschillen bewust in breedte, uitlijning, ondergrond en
      beeldverhouding. Niet elke sectie is een gecentreerde kop met een grid.

   Volgorde: fonts -> tokens -> reset -> typografie -> layout -> componenten
   -> utilities. De tokennamen uit de vorige versie blijven bestaan, want de
   adminpagina's bouwen daarop verder.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts. Lokaal gehost: geen externe request, geen cookie, geen CDN.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("/fonts/instrumentsans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("/fonts/instrumentsans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/sourceserif4-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/sourceserif4-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Merk. De ladder is opgebouwd rond de themakleur #6BBBB7 (brand-400): tint 177°,
       met de verzadiging die oploopt naarmate de trede donkerder wordt. Elke trede
       deelt dus dezelfde kleurfamilie.

       De themakleur zelf is licht (luminantie .42) en kan geen witte tekst dragen:
       wit haalt er 2,2:1 op. Alles wat tekst of een bedieningselement is, gebruikt
       daarom een donkerdere trede. De grens ligt bij brand-600: dat is de lichtste
       trede die op papier nog 3:1 haalt en dus geschikt is voor iconen en randen.
       Tekst begint bij brand-700 (5,2:1), de primaire knop bij brand-800 (6,4:1). */
    --brand-950: #08302E;
    --brand-900: #0C4D4A;
    --brand-800: #136A66;
    --brand-700: #197974;
    --brand-600: #2E9B96;
    --brand-500: #45B0AB;
    --brand-400: #6BBBB7;
    --brand-300: #8FCCC9;
    --brand-200: #B9DFDD;
    --brand-100: #DBF0EF;
    --brand-50:  #F1F9F8;

    /* De logokleur staat niet in de CSS: beeldmerk en woordmerk zitten samen in
       posworld-lockup.png en dragen hun kleur zelf. Wijzigt het logo, vervang dan
       dat bestand en posworld-lockup-inverse.png. */

    /* Warme tint. Draagt nu de basisachtergrond: papier in plaats van scherm. */
    --sand-50:  #FAF8F5;
    --sand-100: #F4EFE8;
    --sand-200: #E7DDD1;
    /* Donker genoeg voor 4.5:1 op --sand-100, zodat de labels erop leesbaar blijven. */
    --sand-600: #8C6144;

    /* Neutralen met een lichte warmte. */
    --ink:      #10201F;
    --ink-2:    #3A4E51;
    /* 5.4:1 op wit en 4.9:1 op de zandtint: haalt WCAG AA op elke achtergrond hier. */
    --muted:    #5C6E70;

    /* Haarlijnen. Het hele systeem hangt hieraan, vandaar drie gradaties. */
    --rule:      #DCDCD5;
    --rule-soft: #EAE8E1;
    --rule-dark: rgba(255, 255, 255, .16);
    --line:      var(--rule);
    --line-2:    var(--rule-soft);

    /* Het diepe veld: de achtergrond achter de productbeelden, de donkere banden
       en de slotband. Bewust een eigen token en geen trede van de merkladder: die
       moet monotoon blijven omdat --brand-900 ook de hoverkleur van de primaire
       knop is. Bijna-zwart maakte het beeld zwaar en drukte de pagina dicht; deze
       tint blijft duidelijk teal en houdt wit op ruim 11:1. --field-deep-2 is één
       trede lichter en scheidt de footer van de slotband erboven. */
    --field-deep:   #0A3B39;
    --field-deep-2: #0D4C49;

    /* Het lichte productveld: de ondergrond achter de mockups. Los van --field-deep,
       want dat draagt ook de donkere secties en de slotband, en die hebben lichte
       tekst die op een bleke tint zou verdwijnen. Op dit vlak is de tekst donker. */
    --field-tint:   #E6F2F2;

    /* Ondergronden. Vier stuks, meer niet: papier, warm, zand, inkt. */
    --paper:    #FFFFFF;
    --warm:     #F7F5F1;
    --surface:  var(--paper);
    --bg:       var(--warm);
    --bg-tint:  #F1F5F4;

    --ok-bg:    #EAF7EF;
    --ok-fg:    #1B6B3F;
    --err-bg:   #FDF0EF;
    --err-fg:   #A32A1E;
    --err-line: #E9B7B1;

    /* Ruimte. Vier-punts basis, consequent gebruikt. */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Radius is bewust bijna afwezig: vlakken, velden en beeldkaders hebben rechte
       hoeken. De uitzondering zijn de knoppen, die volledig rond zijn. Dat contrast
       is opzet: de constructie van de pagina is strak en hoekig, wat je kan aanklikken
       is zacht en staat er duidelijk los van. Invoervelden blijven hoekig, want die
       horen bij de structuur en niet bij de acties. */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-pill: 999px;

    /* Schaduw wordt spaarzaam gebruikt: enkel waar iets echt boven de pagina
       zweeft (menupaneel, productbeeld op een donker veld). */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(16, 32, 31, .05);
    --shadow-lg: 0 30px 60px -28px rgba(2, 33, 31, .45), 0 12px 24px -18px rgba(2, 33, 31, .30);

    /* Maatvoering van de pagina. --shell is het volledige canvas, --rail de
       margekolom met de nummers en labels, --measure de leesbreedte. */
    --shell:      86rem;
    --shell-pad:  clamp(1.25rem, 4.2vw, 4.5rem);
    --rail:       12.5rem;
    --rail-gap:   clamp(2rem, 4vw, 4.5rem);
    --measure:    38rem;
    --measure-sm: 32rem;

    /* De afstand van de inhoudsrand van .shell tot de schermrand. Hiermee laat je
       een element exact tot tegen de browserrand lopen, ongeacht waar het staat.
       Een percentage werkt hier niet: dat rekent tegen het bevattende blok, en in
       een grid is dat de cel en niet de shell. 100vw telt de scrollbalk mee, dus
       er blijft hooguit een paar pixel over; html heeft overflow-x:clip die opvangt. */
    --edge: calc(var(--shell-pad) + max(0px, (100vw - var(--shell)) / 2));

    --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI",
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-text: var(--font-sans);
    --font-display: "Source Serif 4", "Iowan Old Style", Georgia,
                    "Times New Roman", Times, serif;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --header-h: 4.25rem;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
    /* clip en niet hidden: hidden op html of body maakt van de viewport een
       scrollcontainer en breekt daarmee position:sticky van de header. clip
       snijdt enkel af wat rechts buiten beeld valt bij een volvlak-element. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink-2);
    background: var(--warm);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   3. Typografie
   --------------------------------------------------------------------------
   De serif staat op 400 en niet op vet: op groot formaat leest een lichte
   serif rustiger en duurder dan een zware sans. De grotesk neemt alles over
   wat klein en functioneel is.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--ink);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.014em;
    line-height: 1.08;
}

h1 {
    font-size: clamp(2.35rem, 1.45rem + 3.7vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -.02em;
}
h2 {
    font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
}
h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: -.008em;
}
h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-800); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }
small { font-size: .875rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-7) 0; }

:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Het label boven een kop. De aanloopstreep maakt er een echt merkteken van
   in plaats van een gekleurd woordje. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-700);
    margin: 0 0 var(--space-4);
}
.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .5;
    flex-shrink: 0;
}
.eyebrow--plain::before { display: none; }

.lead {
    font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: var(--measure);
}

/* Grote uitspraak in serif. Vervangt de gecentreerde sectiekop op plaatsen
   waar de boodschap belangrijker is dan de structuur. */
.pull {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: -.012em;
    color: var(--ink);
    max-width: 26ch;
    margin: 0;
    text-wrap: balance;
}

/* Cijfer als beeldelement: bouwjaar, prijs, aantal dagen. */
.datum { display: block; }
.datum__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
    line-height: .95;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
    overflow-wrap: break-word;
}
/* Kleinere maat voor een woord in plaats van een getal: een plaatsnaam op
   vier rem breekt in een smalle kolom, een cijfer niet. */
.datum--sm .datum__value { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); letter-spacing: -.02em; }
.datum__label {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: .875rem;
    line-height: 1.45;
    color: var(--muted);
    max-width: 22ch;
}
.on-ink .datum__value,
.band--ink .datum__value { color: #fff; }
.on-ink .datum__label,
.band--ink .datum__label { color: rgba(214, 243, 240, .72); }

/* --------------------------------------------------------------------------
   4. Layout: shell, band, rail
   -------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 60rem; }
.shell--wide { max-width: 96rem; }

/* Verticaal ritme. De banden verschillen bewust in hoogte, zodat een pagina
   niet als een stapel gelijke blokken leest. */
.band {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6.4vw, 7.5rem);
}
.band--tall   { padding-block: clamp(4.5rem, 2.2rem + 9vw, 10rem); }
.band--tight  { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.band--paper { background: var(--paper); }
.band--warm  { background: var(--warm); }
.band--sand  { background: var(--sand-100); }
.band--tint  { background: var(--bg-tint); }
.band--ink {
    background: var(--field-deep);
    color: rgba(214, 243, 240, .82);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4, .band--ink strong { color: #fff; }
.band--ink .eyebrow { color: var(--brand-300); }
/* Knoppen houden hun eigen kleurenpaar: .btn--onDark heeft een witte vulling en
   moet dus donkere tekst houden. Zonder de uitsluiting wint deze regel het van
   de knopklasse en verdwijnt het opschrift in de vulling. */
.band--ink a:not(.btn) { color: #fff; }
.band--ink .muted { color: rgba(214, 243, 240, .62); }

/* De haarlijnen zijn per ondergrond een tint donkerder of lichter gezet. Op zand
   verdwijnt de standaardlijn anders volledig in de achtergrond. */
.band--sand { --rule: #DCCFC0; --rule-soft: #E6DBCE; }
.band--tint { --rule: #D3DEDD; --rule-soft: #E0E9E8; }
.band--ink  { --rule: rgba(255, 255, 255, .22); --rule-soft: rgba(255, 255, 255, .14); }

/* Haarlijn boven een band. Dit is het element dat het hele systeem hoorbaar
   maakt: elke sectie begint met een streep over de volle breedte. */
.band--rule { border-top: 1px solid var(--rule); }
.band--rule-soft { border-top: 1px solid var(--rule-soft); }

/* De margekolom. Links het nummer en het label, rechts de inhoud. Op mobiel
   klapt het label boven de inhoud, met dezelfde haarlijn erboven. */
.rail {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}
.rail__aside { position: relative; }
.rail__index {
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--brand-700);
    font-variant-numeric: lining-nums tabular-nums;
    display: block;
    margin-bottom: var(--space-2);
}
.band--ink .rail__index { color: var(--brand-300); }
.rail__label {
    font-family: var(--font-sans);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 20ch;
    margin: 0;
}
.band--ink .rail__label { color: rgba(214, 243, 240, .6); }

@media (min-width: 62rem) {
    .rail {
        grid-template-columns: var(--rail) minmax(0, 1fr);
        gap: 0 var(--rail-gap);
    }
    /* De aside blijft meelopen tijdens het scrollen van een lange sectie.
       Rustig effect: het label blijft staan, de inhoud beweegt. */
    .rail--sticky .rail__aside {
        position: sticky;
        top: calc(var(--header-h) + 2.5rem);
    }
    /* Inhoud die de margekolom overslaat en dus verder naar rechts begint. */
    .rail__wide { grid-column: 1 / -1; }
}

/* Twee kolommen met een bewust ongelijke verhouding. Vervangt de symmetrische
   split: de kolommen zijn nooit 50/50 en lijnen bovenaan uit, niet in het midden. */
.slab {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 62rem) {
    .slab { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 6rem); }
    .slab--text-narrow { grid-template-columns: 5fr 7fr; }
    .slab--media-narrow { grid-template-columns: 7fr 5fr; }
    .slab--wide-media { grid-template-columns: 4fr 6fr; }
    .slab--reverse > :first-child { order: 2; }
    .slab--center { align-items: center; }
    /* Optische verspringing: de tweede kolom zakt iets weg, zodat de compositie
       niet als twee gelijke bakken naast elkaar leest. */
    .slab--offset > :last-child { margin-top: clamp(1.5rem, 4vw, 4.5rem); }
    .slab--offset.slab--reverse > :first-child { margin-top: clamp(1.5rem, 4vw, 4.5rem); }
    .slab--offset.slab--reverse > :last-child { margin-top: 0; }
}

/* Leesbreedte. Lange lopende tekst blijft binnen een prettige maat, ook als
   de kolom breder is. */
.measure { max-width: var(--measure); }
.measure--sm { max-width: var(--measure-sm); }
.measure--lg { max-width: 46rem; }

/* Elementen die tot tegen de schermrand lopen. Negatieve marges in plaats van
   width:100vw: een grid- of flexkind rekt dan mee zonder dat de breedte tegen
   het verkeerde bevattende blok wordt afgemeten. */
.bleed-r { margin-right: calc(-1 * var(--edge)); }
.bleed-l { margin-left: calc(-1 * var(--edge)); }
.bleed { margin-inline: calc(-1 * var(--edge)); }
@media (max-width: 61.99rem) {
    /* Op smalle schermen bloedt alleen wat er echt beter van wordt: beeld. */
    .bleed-r--desktop, .bleed-l--desktop { margin-inline: 0; }
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 200;
    background: var(--brand-800);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* Grid- en flexkinderen krijgen standaard min-width:auto, wat gelijkstaat aan hun
   min-content. Eén lange <legend>, een brede <select>-optie of een lang woord duwt
   daardoor de hele kolom breder dan het scherm. Expliciet op 0 zetten voorkomt dat. */
.slab > *,
.rail > *,
.plans > *,
.form > *,
.form__row > *,
.feature-rows > li,
.checklist > li,
.pain-rows > li,
.hero__body > * { min-width: 0; }
fieldset { min-inline-size: 0; }
.input, .select, .textarea { min-width: 0; }

/* --------------------------------------------------------------------------
   5. Knoppen en links
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.875rem;
    padding: .6875rem 1.375rem;
    font-family: var(--font-sans);
    font-size: .96875rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color .16s var(--ease), border-color .16s var(--ease),
                color .16s var(--ease), transform .12s var(--ease);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* De primaire knop draagt de themakleur zelf. Die is licht, dus de tekst erop is
   donker en niet wit: wit haalt op --brand-500 maar 2,6:1, de donkere tekst 5,5:1.
   De rand in --brand-600 geeft de knop een eigen contour van 3,4:1 tegen papier;
   zonder die rand zou het vlak zelf te weinig van de achtergrond verschillen. */
.btn--primary {
    background: var(--brand-500);
    color: var(--brand-950);
    border-color: var(--brand-600);
}
/* Bij hover licht de knop op in plaats van te verdiepen: op deze lichte tint is
   dat de enige richting die de tekst contrastrijker maakt in plaats van vlakker. */
.btn--primary:hover { background: var(--brand-400); color: var(--brand-950); border-color: var(--brand-600); }

.btn--secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule);
}
.btn--secondary:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: rgba(16, 32, 31, .05); color: var(--ink); }

.btn--onDark { background: #fff; color: var(--brand-950); }
.btn--onDark:hover { background: var(--brand-100); color: var(--brand-950); }

.btn--outlineDark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
}
.btn--outlineDark:hover { background: rgba(255, 255, 255, .09); color: #fff; border-color: rgba(255, 255, 255, .6); }

.btn--lg { min-height: 3.25rem; padding: .875rem 1.875rem; font-size: 1.03125rem; }
.btn--block { width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
}

/* Tekstlink met pijl. Staat bijna altijd op zichzelf als vervolgactie, dus het
   tikdoel is opgetrokken tot 44px hoog. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    gap: .5rem;
    font-family: var(--font-sans);
    font-size: .96875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-700);
    border-bottom: 1px solid transparent;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--brand-800); }
.band--ink .link-arrow { color: #fff; }
.band--ink .link-arrow:hover { color: var(--brand-200); }

/* Telefoonnummer als vertrouwenselement, niet als knop. */
.phone-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .96875rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.phone-link svg { color: var(--brand-600); }
.phone-link:hover { color: var(--brand-700); }

/* --------------------------------------------------------------------------
   6. Header en navigatie
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.3) blur(14px);
    border-bottom: 1px solid var(--rule-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: none;
    flex-shrink: 0;
    color: var(--ink);
}
/* Het volledige logo, beeldmerk en woordmerk in één bestand. De hoogte stuurt
   de maat; de breedte volgt uit de beeldverhouding in de viewBox. */
.brand__logo { display: block; height: 2.125rem; width: auto; }
/* In de footer mag het merk wat groter: daar is het een afsluiter en geen
   navigatie-element dat op ruimte moet inleveren. */
.brand--light .brand__logo { height: 2.5rem; }
.brand--light { color: #fff; }

/* Het losse beeldmerk. Blijft in gebruik op de inlogpagina van het beheer. */
.brand__mark { display: block; flex-shrink: 0; }
.brand__mark img { display: block; width: 28px; height: 28px; }

.nav { display: none; margin-left: var(--space-6); }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }

.nav__link,
.nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .625rem;
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.nav__link:hover, .nav__toggle:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brand-600); }

.nav__toggle svg { transition: transform .18s var(--ease); opacity: .6; }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__panel {
    position: absolute;
    top: calc(100% + .75rem);
    left: -.5rem;
    min-width: 22rem;
    padding: var(--space-2);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px -24px rgba(2, 33, 31, .28);
    list-style: none;
    margin: 0;
    display: none;
}
.nav__panel[data-open] { display: block; }
.nav__panel li { margin: 0; }

.nav__panel a {
    display: block;
    padding: .5rem .75rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 550;
    font-size: .9375rem;
}
.nav__panel a span {
    display: block;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--muted);
    line-height: 1.4;
    margin-top: .1rem;
}
.nav__panel a:hover { background: var(--brand-50); color: var(--brand-800); }
.nav__panel__foot {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule-soft);
}

.header-actions { display: none; align-items: center; gap: var(--space-5); margin-left: auto; }

.nav-burger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    color: var(--ink);
}

@media (min-width: 62rem) {
    .nav { display: block; }
    .header-actions { display: flex; }
    .nav-burger { display: none; }
}
@media (max-width: 78rem) {
    .header-actions .phone-link { display: none; }
}

/* Mobiel paneel */
.mobile-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 99;
    background: var(--paper);
    overflow-y: auto;
    padding: var(--space-5) 0 var(--space-8);
    display: none;
}
.mobile-nav[data-open] { display: block; }
body[data-nav-open] { overflow: hidden; }

.mobile-nav__label {
    font-family: var(--font-sans);
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-700);
    margin: var(--space-6) 0 var(--space-2);
    font-weight: 600;
}
.mobile-nav__label:first-child { margin-top: 0; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
/* Bewust "li a" en niet "a": deze regel is voor de menuregels met het pijltje rechts.
   Op alle links in het paneel toegepast overrulede ze ook de knoppen onderaan — die
   kregen dan padding 0, tekst links via space-between en de inktkleur in plaats van wit. */
.mobile-nav li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8125rem 0;
    font-family: var(--font-sans);
    font-weight: 550;
    color: var(--ink);
    text-decoration: none;
}
.mobile-nav li a:hover { color: var(--brand-700); }

.mobile-nav__cta { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
/* Volle breedte, dus de tekst mag afbreken in plaats van uit de knop te lopen. */
.mobile-nav__cta .btn { white-space: normal; }

/* Sticky CTA op mobiel */
.sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: .625rem var(--space-5) calc(.625rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    display: flex;
    gap: var(--space-2);
}
.sticky-cta .btn { flex: 1; }
@media (min-width: 62rem) { .sticky-cta { display: none; } }
body:has(.mobile-nav[data-open]) .sticky-cta { display: none; }

/* --------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------
   Geen gecentreerde kop met twee knoppen en een screenshot eronder. De hero is
   een tweeluik: links de uitspraak op papier, rechts een donker veld dat tot
   tegen de schermrand loopt met het product erin. Op mobiel wordt dat een
   eigen compositie: tekst, actie, dan het donkere veld over de volle breedte.
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--paper);
    overflow: hidden;
}
.hero__grid { display: grid; }

.hero__body {
    padding-block: clamp(2.75rem, 1.8rem + 4.5vw, 6rem) clamp(2.25rem, 1.5rem + 3vw, 4rem);
    max-width: 40rem;
}
.hero__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .875rem;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--space-5);
}
.hero__kicker b { color: var(--brand-700); font-weight: 600; }
.hero__kicker span[aria-hidden] { color: var(--rule); }
/* Op een smal scherm passen de twee labels niet naast elkaar. Ze komen dan onder
   elkaar te staan zonder scheidingsteken, in plaats van met een schuine streep
   die aan het einde van de eerste regel blijft hangen. */
@media (max-width: 30rem) {
    .hero__kicker { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .hero__kicker span[aria-hidden] { display: none; }
}

.hero h1 { margin-bottom: var(--space-5); max-width: 15ch; }
.hero__intro {
    font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 34rem;
    margin-bottom: var(--space-6);
}
.hero__cta { align-items: center; gap: var(--space-4) var(--space-6); }

/* Het productveld. Lichte tint, rechte hoeken, loopt naar rechts van het scherm af.
   Het beeld wordt hier gedragen door het vlak zelf, niet door een zware schaduw. */
.hero__stage {
    position: relative;
    background: var(--field-tint);
    display: flex;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3.5rem);
}
/* Een rustige lichtval in plaats van een gradient-blob: één zachte lichtbron
   linksboven, nauwelijks zichtbaar, die het vlak diepte geeft. */
.hero__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(46rem 30rem at 18% 0%, rgba(255, 255, 255, .55), transparent 64%);
    pointer-events: none;
}
.hero__stage .mockup { position: relative; width: 100%; }
.hero__stage .mockup svg {
    border-radius: 3px;
    box-shadow: 0 24px 48px -28px rgba(10, 59, 57, .45), 0 4px 12px -6px rgba(10, 59, 57, .18);
}
.hero__stage .mockup--devices svg { box-shadow: none; filter: drop-shadow(0 26px 40px rgba(10, 59, 57, .22)); }
.hero__stage figcaption { color: var(--muted); text-align: left; }

@media (min-width: 62rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: stretch;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
    .hero__body {
        padding-block: clamp(4rem, 2rem + 6vw, 8rem) clamp(3.5rem, 2rem + 5vw, 7rem);
        align-self: center;
    }
    .hero__stage {
        margin-right: calc(-1 * var(--edge));
        padding-right: clamp(2rem, 6vw, 8rem);
        padding-block: clamp(3rem, 5vw, 6rem);
    }
    /* Het beeld mag iets groter zijn dan de kolom: het loopt bewust door. */
    .hero__stage .mockup { max-width: 46rem; }
}
@media (max-width: 61.99rem) {
    .hero__stage {
        margin-inline: calc(-1 * var(--edge));
        padding-inline: var(--shell-pad);
        padding-block: clamp(2rem, 6vw, 3rem);
    }
}

/* De feitenbalk onder de hero. Geen pillen, maar een raster met haarlijnen:
   leest als specificaties, niet als badges. */
.spec {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    grid-template-columns: repeat(2, 1fr);
}
.spec > li {
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 1px solid var(--rule-soft);
}
.spec > li + li { border-left: 1px solid var(--rule-soft); padding-left: var(--space-4); }
.spec > li:nth-child(odd) { border-left: 0; padding-left: 0; }
.spec__k {
    display: block;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .375rem;
}
.spec__v {
    display: block;
    font-family: var(--font-sans);
    font-size: .96875rem;
    font-weight: 550;
    line-height: 1.4;
    color: var(--ink);
}
.spec a { color: inherit; }
@media (min-width: 48rem) {
    .spec { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
    .spec > li { border-bottom: 0; padding-block: var(--space-5); }
    .spec > li + li { border-left: 1px solid var(--rule-soft); padding-left: var(--space-5); }
    .spec > li:nth-child(odd) { border-left: 1px solid var(--rule-soft); padding-left: var(--space-5); }
    .spec > li:first-child { border-left: 0; padding-left: 0; }
}
.spec--3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 48rem) { .spec--3 { grid-template-columns: repeat(3, 1fr); } }

/* Gestapelde variant voor smalle kolommen: alles onder elkaar, alleen
   horizontale haarlijnen. Wint het van de kolomregels hierboven. */
.spec--stack { grid-template-columns: 1fr; border-top: 0; }
.spec--stack > li,
.spec--stack > li + li,
.spec--stack > li:nth-child(odd),
.spec--stack > li:first-child {
    border-left: 0;
    padding-left: 0;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule-soft);
}
.spec--stack > li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec--stack > li:first-child { padding-top: 0; }
@media (min-width: 48rem) {
    .spec--stack { border-bottom: 0; }
    .spec--stack > li,
    .spec--stack > li + li,
    .spec--stack > li:nth-child(odd),
    .spec--stack > li:first-child { border-left: 0; padding-left: 0; }
}
.band--ink .spec--stack > li { border-bottom-color: var(--rule-dark); }
.band--ink .spec--stack > li:last-child { border-bottom: 0; }
.on-ink .spec, .band--ink .spec { border-color: var(--rule-dark); }
.on-ink .spec > li, .band--ink .spec > li { border-color: var(--rule-dark); }
.on-ink .spec__k, .band--ink .spec__k { color: rgba(214, 243, 240, .66); }
.on-ink .spec__v, .band--ink .spec__v { color: #fff; }

/* --------------------------------------------------------------------------
   8. Register: de genummerde lijst die de kaartenrasters vervangt
   --------------------------------------------------------------------------
   Elke rij is een regel in een index: nummer, naam, omschrijving, pijl. Er is
   geen kader, geen schaduw en geen afronding. Bij hover licht de hele rij op.
   -------------------------------------------------------------------------- */
.register {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    counter-reset: reg;
}
.register > li { margin: 0; border-bottom: 1px solid var(--rule-soft); }

.register__row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas:
        "num name go"
        ".   desc desc";
    align-items: baseline;
    gap: .375rem var(--space-4);
    padding: var(--space-5) 0;
    text-decoration: none;
    color: inherit;
    transition: background-color .18s var(--ease), padding-inline .18s var(--ease);
}
.register__num {
    grid-area: num;
    font-family: var(--font-sans);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--brand-700);
    font-variant-numeric: lining-nums tabular-nums;
}
/* De naam is in de meeste registers een echte <h2> of <h3>: de koppenstructuur
   van de pagina blijft zo intact, ook al ziet de rij eruit als een tabelregel. */
.register__name {
    grid-area: name;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}
.register__desc {
    grid-area: desc;
    font-size: .96875rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 52ch;
    margin: 0;
}
.register__go {
    grid-area: go;
    align-self: center;
    color: var(--brand-600);
    opacity: .45;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
a.register__row:hover { background: var(--brand-50); padding-inline: var(--space-4); color: inherit; }
a.register__row:hover .register__go { opacity: 1; transform: translateX(4px); }
a.register__row:hover .register__name { color: var(--brand-800); }

@media (min-width: 60rem) {
    .register__row {
        grid-template-columns: 3.5rem minmax(11rem, 17rem) minmax(0, 1fr) auto;
        grid-template-areas: "num name desc go";
        align-items: center;
        gap: var(--space-5);
        padding-block: var(--space-5);
    }
    .register__name { font-size: 1.375rem; }
}

/* Compacte variant voor lange indexen (alle functies). */
.register--compact .register__row { padding-block: var(--space-4); }
.register--compact .register__name { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; }

/* Variant op donkere ondergrond. */
.band--ink .register { border-color: var(--rule-dark); }
.band--ink .register > li { border-color: var(--rule-dark); }
.band--ink .register__name { color: #fff; }
.band--ink .register__desc { color: rgba(214, 243, 240, .62); }
.band--ink .register__num,
.band--ink .register__go { color: var(--brand-300); }
.band--ink a.register__row:hover { background: rgba(255, 255, 255, .05); }
.band--ink a.register__row:hover .register__name { color: var(--brand-200); }

/* --------------------------------------------------------------------------
   9. Rijen: opsommingen zonder kaders
   -------------------------------------------------------------------------- */
/* Twee kolommen met haarlijnen ertussen. Vervangt .feature-list met icoonbadges. */
.feature-rows {
    display: grid;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--rule-soft);
}
.feature-rows > li {
    margin: 0;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--rule-soft);
}
.feature-rows h3 { margin-bottom: .375rem; display: flex; align-items: center; gap: .5rem; }
.feature-rows h3 svg { color: var(--brand-600); }
.feature-rows p { font-size: .96875rem; color: var(--muted); margin: 0; max-width: 46ch; }
@media (min-width: 52rem) {
    .feature-rows--2 { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
    .feature-rows--2 > li:nth-child(odd) { border-right: 1px solid var(--rule-soft); padding-right: clamp(2rem, 5vw, 4.5rem); }
    .feature-rows--2 > li:nth-child(even) { padding-left: 0; }
}
.band--ink .feature-rows, .band--ink .feature-rows > li { border-color: var(--rule-dark); }
.band--ink .feature-rows p { color: rgba(214, 243, 240, .62); }
.band--ink .feature-rows h3 svg { color: var(--brand-300); }

/* Pijnpunten: genummerde regels in plaats van omkaderde blokjes. */
.pain-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    counter-reset: pain;
    border-top: 1px solid var(--rule);
}
.pain-rows > li {
    counter-increment: pain;
    margin: 0;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1.0625rem;
    color: var(--ink-2);
}
.pain-rows > li::before {
    content: counter(pain, decimal-leading-zero);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--sand-600);
    font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 52rem) {
    .pain-rows { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
    .pain-rows > li:nth-child(odd) { border-right: 1px solid var(--rule-soft); padding-right: clamp(2rem, 5vw, 4.5rem); }
}

/* Kolommen gescheiden door verticale haarlijnen. Derde alternatief naast het
   register en de rijen: geschikt waar elk item evenveel gewicht heeft en er een
   naam, een zin en een link in moeten. De streep staat midden in de gootbreedte. */
.columns {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.columns > li { margin: 0; }
.columns__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    color: inherit;
    transition: background-color .18s var(--ease);
}
.columns__item h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.18;
    letter-spacing: -.012em;
    margin: 0 0 var(--space-2);
    color: var(--ink);
}
.columns__item p { font-size: .9375rem; color: var(--muted); margin: 0 0 var(--space-4); }
.columns__item .link-arrow { margin-top: auto; font-size: .875rem; min-height: 2rem; }
.columns__item .icon-badge { margin-bottom: var(--space-4); }
a.columns__item:hover h3 { color: var(--brand-800); }
a.columns__item:hover .link-arrow svg { transform: translateX(4px); }

@media (min-width: 46rem) {
    .columns--4, .columns--2 { grid-template-columns: repeat(2, 1fr); }
    .columns--4 > li, .columns--2 > li { border-left: 1px solid var(--rule-soft); }
    .columns--4 > li:nth-child(2n+1), .columns--2 > li:nth-child(2n+1) { border-left: 0; }
    .columns--4 .columns__item, .columns--2 .columns__item { padding-inline: clamp(1.25rem, 2.6vw, 2.25rem); }
    .columns--4 > li:nth-child(2n+1) .columns__item,
    .columns--2 > li:nth-child(2n+1) .columns__item { padding-left: 0; }
    .columns--4 > li:nth-child(2n) .columns__item,
    .columns--2 > li:nth-child(2n) .columns__item { padding-right: 0; }
}
@media (min-width: 72rem) {
    .columns--4 { grid-template-columns: repeat(4, 1fr); }
    /* Ruimte voor twee regels titel, zodat de omschrijvingen in alle vier de
       kolommen op dezelfde hoogte beginnen ook als één naam afbreekt. */
    .columns--4 .columns__item h3 { min-height: 2.36em; }
    .columns--4 > li { border-left: 1px solid var(--rule-soft); }
    .columns--4 > li:nth-child(2n+1) { border-left: 1px solid var(--rule-soft); }
    .columns--4 > li:nth-child(4n+1) { border-left: 0; }
    .columns--4 .columns__item,
    .columns--4 > li:nth-child(2n+1) .columns__item,
    .columns--4 > li:nth-child(2n) .columns__item { padding-inline: clamp(1.25rem, 2vw, 2rem); }
    .columns--4 > li:nth-child(4n+1) .columns__item { padding-left: 0; }
    .columns--4 > li:nth-child(4n) .columns__item { padding-right: 0; }
}
@media (min-width: 62rem) {
    .columns--3 { grid-template-columns: repeat(3, 1fr); }
    .columns--3 > li { border-left: 1px solid var(--rule-soft); }
    .columns--3 > li:nth-child(3n+1) { border-left: 0; }
    .columns--3 .columns__item { padding-inline: clamp(1.25rem, 2.4vw, 2.25rem); }
    .columns--3 > li:nth-child(3n+1) .columns__item { padding-left: 0; }
    .columns--3 > li:nth-child(3n) .columns__item { padding-right: 0; }
}
.band--ink .columns,
.band--ink .columns > li,
.band--ink .columns__item { border-color: var(--rule-dark); }
.band--ink .columns__item h3 { color: #fff; }
.band--ink .columns__item p { color: rgba(214, 243, 240, .62); }

/* Eenvoudige checklist. Blijft bestaan, nu zonder kader. */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: .6875rem; align-items: flex-start; margin: 0; font-size: .96875rem; }
.checklist svg { color: var(--brand-600); margin-top: .3rem; }
.band--ink .checklist svg { color: var(--brand-300); }
@media (min-width: 40rem) { .checklist--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); } }

/* Checklist met haarlijnen, voor langere opsommingen. */
.checklist--ruled { gap: 0; border-top: 1px solid var(--rule-soft); }
.checklist--ruled li { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 40rem) {
    .checklist--ruled.checklist--2 { gap: 0 clamp(2rem, 5vw, 4rem); }
    .checklist--ruled.checklist--2 li:nth-child(odd) { border-right: 1px solid var(--rule-soft); padding-right: clamp(2rem, 5vw, 4rem); }
}

/* Antwoordblok: vraag als kop, kort feitelijk antwoord meteen eronder. */
.answers { display: grid; }
.answers > * { padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); border-bottom: 1px solid var(--rule-soft); }
.answers > *:first-child { padding-top: 0; }
.answers > *:last-child { border-bottom: 0; padding-bottom: 0; }
.answer h2, .answer h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -.012em;
    margin-bottom: var(--space-4);
    max-width: 34ch;
    /* Een icoon in de kop moet naast de tekst blijven staan: svg staat in de
       reset op display:block en zou anders een eigen regel opeisen. */
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}
.answer h2 > svg, .answer h3 > svg { margin-top: .3em; color: var(--brand-600); }
.answer__lead { font-size: 1.0625rem; color: var(--ink-2); max-width: var(--measure); }
.answer p + p { color: var(--muted); font-size: .96875rem; max-width: var(--measure); }

/* Rij met sectorlinks. Haarlijnen in plaats van pillen. */
.audience-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-soft);
}
.audience-row li { margin: 0; }
.audience-row a {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
    gap: .5rem;
    padding: .5rem 1.125rem .5rem 0;
    margin-right: 1.125rem;
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 550;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.audience-row a:hover { color: var(--brand-800); border-bottom-color: var(--brand-600); }
.audience-row svg { color: var(--brand-600); opacity: 1; }

/* Rij met onderdelen van het platform: leest als een opsomming, niet als badges. */
.chain {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.25rem);
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.014em;
}
.chain li { margin: 0; display: inline-flex; align-items: center; }
/* Het scheidingsteken staat achter het woord, niet ervoor: bij het afbreken
   van de regel begint de volgende regel dan met een woord in plaats van met
   een zwevend bolletje. */
.chain li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: .4375rem;
    height: .4375rem;
    margin-inline: .875rem;
    border-radius: 50%;
    background: var(--brand-400);
    flex-shrink: 0;
}
.band--ink .chain { color: #fff; }

/* --------------------------------------------------------------------------
   10. Beeld: kaders, bijschriften en volvlakken
   -------------------------------------------------------------------------- */
.mockup { position: relative; margin: 0; }
.mockup svg {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(16, 32, 31, .06), 0 24px 48px -32px rgba(2, 33, 31, .35);
}
.mockup--devices svg { border-radius: 0; box-shadow: none; filter: drop-shadow(0 24px 40px rgba(2, 33, 31, .16)); }
.mockup figcaption {
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--muted);
    text-align: left;
    max-width: 34rem;
}

/* Beeld op een gekleurd veld. Het veld draagt het beeld, in plaats van een
   schaduw onder een afgeronde rechthoek. */
.stage {
    position: relative;
    padding: clamp(1.5rem, 4vw, 4rem);
    background: var(--field-tint);
}
.stage--sand { background: var(--sand-100); }
.stage--paper { background: var(--paper); border: 1px solid var(--rule-soft); }
/* De donkere variant blijft bestaan voor een veld dat juist wél moet contrasteren. */
.stage--deep { background: var(--field-deep); }
.stage .mockup svg { box-shadow: 0 22px 44px -28px rgba(10, 59, 57, .42), 0 3px 10px -6px rgba(10, 59, 57, .16); }
.stage--deep .mockup svg { box-shadow: var(--shadow-lg); }
.stage figcaption { color: var(--muted); }
.stage--deep figcaption { color: rgba(214, 243, 240, .64); }

/* Beeld dat groter is dan zijn kolom en dus doorloopt over de rand. */
@media (min-width: 62rem) {
    .stage--overflow-r { margin-right: calc(-1 * var(--edge)); padding-right: clamp(2rem, 6vw, 7rem); }
    .stage--overflow-l { margin-left: calc(-1 * var(--edge)); padding-left: clamp(2rem, 6vw, 7rem); }
}
@media (max-width: 61.99rem) {
    .stage--overflow-r, .stage--overflow-l {
        margin-inline: calc(-1 * var(--edge));
        padding-inline: var(--shell-pad);
    }
}

/* --------------------------------------------------------------------------
   11. Kaarten. Blijven bestaan waar een kaart functioneel klopt (een pakket,
   een toestel, een formulier), maar zonder schaduw en zonder afronding.
   -------------------------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: clamp(var(--space-5), 2vw, var(--space-6));
}
.card--flat { background: transparent; border-color: var(--rule-soft); }

/* Icoonbadge. Nu een vierkant met haarlijn in plaats van een gevuld blokje. */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--brand-700);
    margin-bottom: var(--space-4);
}
.icon-badge--sand { color: var(--sand-600); }
.icon-badge--sm { width: 2rem; height: 2rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Tarieven
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.plan {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) 0;
    position: relative;
}
@media (min-width: 46rem) {
    .plans { grid-template-columns: repeat(2, 1fr); }
    .plan { padding: var(--space-6) clamp(1.5rem, 3vw, 2.25rem); }
    .plan:nth-child(odd) { border-right: 1px solid var(--rule); padding-left: 0; }
    .plan:nth-child(even) { padding-right: 0; }
}
@media (min-width: 76rem) {
    .plans { grid-template-columns: repeat(3, 1fr); }
    .plan, .plan:nth-child(odd), .plan:nth-child(even) {
        border-right: 1px solid var(--rule);
        padding-inline: clamp(1.5rem, 2.4vw, 2.25rem);
    }
    .plan:first-child { padding-left: 0; }
    .plan:nth-child(3n) { border-right: 0; padding-right: 0; }
}
/* Een laatste formule die alleen op haar rij staat, krijgt geen losse
   scheidingslijn rechts van zich. */
@media (min-width: 46rem) {
    .plan:last-child { border-right: 0; }
}
.plan--highlight { background: var(--brand-50); }
@media (min-width: 46rem) {
    .plan--highlight { padding-inline: clamp(1.5rem, 2.4vw, 2.25rem); }
}
/* Het label staat in elke formule, ook waar het leeg blijft. Zo beginnen de
   naam en het bedrag in alle kolommen op dezelfde hoogte en blijft de prijslijst
   afleesbaar als een tabel. */
.plan__badge {
    display: block;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-700);
    min-height: 1.2em;
    margin-bottom: var(--space-3);
}
.plan__name {
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-3);
}
.plan__price {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    color: var(--ink);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.plan__price b {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}
.plan__price span { font-size: .875rem; color: var(--muted); font-weight: 500; font-family: var(--font-sans); }
.plan__staff {
    display: block;
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 600;
    color: var(--brand-800);
    margin-bottom: var(--space-2);
}
.plan__audience { font-size: .9375rem; color: var(--muted); margin-bottom: var(--space-5); }
.plan .btn { margin-bottom: var(--space-5); }
.plan__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
    font-size: .90625rem;
    border-top: 1px solid var(--rule-soft);
    padding-top: var(--space-4);
}
.plan__features li { display: flex; gap: .5rem; align-items: flex-start; margin: 0; }
.plan__features svg { color: var(--brand-600); margin-top: .3rem; flex-shrink: 0; }
.plan__features li[data-limit] { color: var(--muted); }
.plan__features li[data-limit] svg { color: var(--sand-600); }
.plan__more { margin-top: var(--space-3); font-size: .875rem; color: var(--muted); }
.plan__foot { margin-top: auto; padding-top: var(--space-4); font-size: .8125rem; color: var(--muted); }

/* Modules en credits: dezelfde ledgerlogica als de abonnementen. */
.addon { display: flex; flex-direction: column; }
.addon__price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: var(--space-3);
}
.addon__price span { font-family: var(--font-sans); font-size: .875rem; font-weight: 500; color: var(--muted); margin-left: .375rem; letter-spacing: 0; }
.addon__bundles { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.addon__bundles li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: .625rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .9375rem;
    margin: 0;
}
.addon__bundles b { font-family: var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); background: transparent; }
.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    font-family: var(--font-sans);
    font-weight: 550;
    font-size: 1.03125rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-800); }
.faq summary svg { flex-shrink: 0; margin-top: .3rem; color: var(--brand-600); transition: transform .2s var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__body { padding: 0 0 var(--space-5); font-size: .96875rem; color: var(--ink-2); max-width: 46rem; }

/* --------------------------------------------------------------------------
   14. Slotband met de oproep tot actie
   --------------------------------------------------------------------------
   Geen gecentreerde doos met afgeronde hoeken, maar een donkere band over de
   volle breedte, asymmetrisch verdeeld.
   -------------------------------------------------------------------------- */
.closing { background: var(--field-deep); color: rgba(214, 243, 240, .78); }
.closing__grid { display: grid; gap: var(--space-7); align-items: start; }
.closing h2 {
    color: #fff;
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
    line-height: 1.06;
    margin-bottom: var(--space-5);
    max-width: 16ch;
}
.closing p { color: rgba(214, 243, 240, .72); max-width: 34rem; }
.closing .btn-row { margin-top: var(--space-6); }
.closing__note { margin-top: var(--space-5); font-size: .875rem; color: rgba(214, 243, 240, .62); }
.closing__aside { border-top: 1px solid var(--rule-dark); padding-top: var(--space-5); }
@media (min-width: 62rem) {
    .closing__grid { grid-template-columns: 7fr 4fr; gap: clamp(3rem, 6vw, 7rem); }
    .closing__aside { border-top: 0; border-left: 1px solid var(--rule-dark); padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); }
}

/* --------------------------------------------------------------------------
   15. Kruimelpad
   -------------------------------------------------------------------------- */
.breadcrumb { padding-top: var(--space-5); }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: .8125rem;
    color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; gap: .375rem; margin: 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-700); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-2); }
.breadcrumb svg { color: var(--rule); }

/* --------------------------------------------------------------------------
   16. Formulieren
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: .375rem; }
.field > label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .875rem;
    color: var(--ink);
}
.field__hint { font-size: .8125rem; color: var(--muted); }

.input, .textarea, .select {
    width: 100%;
    min-height: 2.875rem;
    padding: .6875rem .875rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: #c6c6bd; }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6E70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.5rem; }

.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--err-line); }
.field-error { font-size: .875rem; color: var(--err-fg); font-weight: 500; }
.field-error:empty { display: none; }

/* Rekencontrole tegen spambots: smal invulveld, want er komt maar één getal in. */
.input--narrow { width: 6rem; max-width: 100%; }
.field--captcha {
    padding: var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--warm);
}

/* Honeypot: onzichtbaar voor mensen, wel in de DOM voor bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.choice-grid { display: grid; gap: .5rem; }
@media (min-width: 34rem) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
.choice {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6875rem .875rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--paper);
    cursor: pointer;
    font-size: .9375rem;
    min-height: 2.875rem;
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover { border-color: var(--brand-600); }
.choice input { width: 1.125rem; height: 1.125rem; accent-color: var(--brand-600); margin: 0; }
.choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }

fieldset { border: 0; padding: 0; margin: 0; }
legend {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .875rem;
    color: var(--ink);
    padding: 0;
    margin-bottom: .5rem;
}

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: .96875rem;
    border: 1px solid transparent;
}
.alert--error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
.alert--error a { color: var(--err-fg); }
.alert--ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert ul { margin: .5rem 0 0; padding-left: 1.125rem; }

/* De foutmelding boven een formulier. Een dikkere rand links en wat ademruimte eromheen:
   op een telefoon is dit het eerste wat de bezoeker na het versturen ziet, en het moet
   niet te verwarren zijn met de rest van het paneel. De fouten zijn links naar het veld. */
#form-errors {
    border-left: 4px solid var(--err-fg);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
#form-errors:focus { outline: none; }
#form-errors:focus-visible { outline: 2px solid var(--err-fg); outline-offset: 2px; }
#form-errors li { margin-top: .25rem; }
#form-errors a { text-decoration: underline; text-underline-offset: .18em; }

/* Het veld waar de fout bij hoort. De rode rand alleen viel te weinig op; met een lichte
   vulling zie je ook op een klein scherm meteen wélk vak het is. Het veld krijgt bovendien
   scroll-margin, zodat het bij het aanklikken van een fout niet onder de kop verdwijnt. */
.field--error { scroll-margin-top: calc(var(--header-h) + 1rem); }
.field--error .input, .field--error .textarea, .field--error .select { background: var(--err-bg); }
.field--error > label, .field--error > legend { color: var(--err-fg); }

/* Het formulierpaneel: één rustig vlak, geen zwevende kaart. */
.panel {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
}
.panel--warm { background: var(--warm); border-color: var(--rule-soft); }
.panel__head { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule-soft); }
.panel__head h2 {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.008em;
    margin: 0 0 .25rem;
    line-height: 1.35;
}
.panel__head p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   17. Notities en labels
   -------------------------------------------------------------------------- */
.notice {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--sand-100);
    border-left: 2px solid var(--sand-600);
    font-size: .9375rem;
    color: var(--ink-2);
}
.notice svg { color: var(--sand-600); flex-shrink: 0; margin-top: .2rem; }
.notice--brand { background: var(--brand-50); border-left-color: var(--brand-600); }
.notice--brand svg { color: var(--brand-700); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: var(--radius-xs);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tag--plus { background: var(--brand-100); color: var(--brand-800); }
.tag--module { background: var(--sand-200); color: var(--sand-600); }

/* --------------------------------------------------------------------------
   18. Prose (juridische tekst en lange artikelen)
   -------------------------------------------------------------------------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: var(--space-8); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.375rem; }
.prose li { margin-bottom: .375rem; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    /* Eén tint lichter dan de slotband erboven. Genoeg om de overgang te laten
       voelen zonder er een harde scheiding van te maken. */
    background: var(--field-deep-2);
    color: rgba(214, 243, 240, .7);
    font-family: var(--font-sans);
    font-size: .9375rem;
    padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem) var(--space-6);
}
.site-footer a { color: rgba(214, 243, 240, .7); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Bovenaan een redactionele afsluiter met het merk, daaronder pas de kolommen. */
.footer-masthead {
    display: grid;
    gap: var(--space-6);
    padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    border-bottom: 1px solid var(--rule-dark);
}
/* Alleen de merkzin staat in serif. De overige regels in de kop blijven de
   grotesk gebruiken, anders leest een adresregel als een uitspraak. */
.footer-masthead__claim {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.014em;
    color: #fff;
    max-width: 24ch;
    margin: 0;
}
.footer-masthead__note {
    margin: var(--space-4) 0 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(214, 243, 240, .66);
    max-width: 34ch;
}
.footer-masthead address {
    font-style: normal;
    line-height: 1.8;
    font-size: .9375rem;
    color: rgba(214, 243, 240, .70);
}
.footer-masthead address strong { color: #fff; font-weight: 600; }
@media (min-width: 62rem) {
    .footer-masthead { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); align-items: end; }
}

.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3.5rem); } }

.footer-grid h2 {
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule-dark);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-grid li { margin: 0; }

.store-badges { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.store-badges a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    text-decoration: none;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--rule-dark);
}
.store-badges a:hover { border-bottom-color: rgba(255, 255, 255, .6); text-decoration: none; }

.footer-bottom {
    margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule-dark);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
    color: rgba(214, 243, 240, .68);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }

/* --------------------------------------------------------------------------
   20. Beweging
   --------------------------------------------------------------------------
   Eén effect, heel klein: inhoud komt bij het in beeld komen enkele pixels
   omhoog. Geen parallax, geen schaal, geen vertraging per element.
   -------------------------------------------------------------------------- */
/* De verborgen begintoestand staat achter (scripting: enabled). Zonder
   JavaScript, en dus ook voor een crawler die geen scripts uitvoert, wordt deze
   regel nooit toegepast en staat alle inhoud gewoon zichtbaar op de pagina. */
@media (scripting: enabled) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .7s var(--ease), transform .7s var(--ease);
        will-change: opacity, transform;
    }
    [data-reveal][data-shown] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.text-center { text-align: center; }
.muted { color: var(--muted); }
.rule-top { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
.rule-bottom { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-6); }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.pb-sticky { padding-bottom: 4.5rem; }
@media (min-width: 62rem) { .pb-sticky { padding-bottom: 0; } }