/* PrivaSearch: de publieke site (marketing, juridische pagina's, het doorstuurformulier).

   Dezelfde taal als de werkruimte-app: de tokens (--priva-*) en de klassen voor glas, diepte,
   bediening en beweging komen uit priva.css, dat de layout vóór dit bestand koppelt. Hier staat
   alleen wat van de site zelf is: de opbouw, de typografie, de iconen en de donkere panelen.

   Afspraken (7 oktober 2026):
   - geen kleur als losse hexwaarde, behalve de eigen tinten van de site in :root hieronder;
   - een glaslaag heeft een dekkende terugval; doorschijnend en vervagen staan onder @supports;
   - alles wat verschuift of animeert staat in het ene blok onder prefers-reduced-motion:
     no-preference, onderaan. Wie minder beweging vraagt ziet meteen de eindtoestand;
   - geen inline stijl of script: de pagina draait onder een strikte CSP. */

:root {
    --ink: var(--priva-ink);
    --muted: var(--priva-muted);
    --paper: var(--priva-paper);
    --line: var(--priva-line);
    --soft: var(--priva-soft);
    --dark: var(--priva-primary);
    --warn: var(--priva-danger);
    --warn-soft: var(--priva-danger-bg);
    --ease: var(--priva-ease-out);

    /* De eigen tinten van de site: het mint van de huisstijl (versiering, en tekst op een donker
       paneel) en het donkere paneel zelf. Het contrast van elk paar hieronder wordt nagerekend in
       resources/js/marketing/__tests__/glass.test.ts. */
    --site-mint: #b7e3c0;
    --site-mint-deep: #5f9e84;
    --site-dark-top: #1d4f45;
    --site-dark-bottom: #0f2b27;
    --site-on-dark: #e8f1ea;
    --site-on-dark-muted: #c9dbcf;
    --site-warn-tile: #f3ddd4;

    /* De gloed op een donker paneel: mint linksonder en diep mint rechtsboven. De dekking is zo
       gekozen dat tekst ook op het lichtste punt van het paneel 4,5:1 haalt. */
    --site-glow-mint: 14%;
    --site-glow-deep: 28%;

    /* De bovenbalk van de site is dichter dan die van de app (88% tegen 78%): hier schuift ze over
       een donker paneel, en de focusring van een menulink moet daar 3:1 halen. */
    --site-glass-bar: 88%;

    /* Afgeleiden van de gedeelde tokens: de lichte bovenrand van een gevulde knop, de vulling van
       een rij bij de muis en van een tabelkop op glas, en de duur van een illustratie (een icoon dat
       één keer beweegt, de regels van het voorbeeld). */
    --site-sheen: inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 22%, transparent);
    --site-hover: color-mix(in srgb, var(--priva-surface) 60%, transparent);
    --site-link-tint: color-mix(in srgb, var(--priva-accent) 18%, transparent);
    --site-head: color-mix(in srgb, var(--priva-soft) 60%, transparent);
    --site-illustration: 700ms;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--priva-font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* De achtergrond van de site is die van de app (de klasse `mesh` uit priva.css): het papier met de
   drie tinten. Een marketingpagina is vele schermen hoog, dus hier herhalen de tinten zich om de
   120rem, elk met haar middelpunt ruim binnen die strook zodat er geen naad is. Geen beweging: de
   drie drijvende lichtvlekken van vroeger zijn weg. */
body.mesh {
    min-height: 100dvh;
    background-image:
        radial-gradient(ellipse 52rem 30rem at 6% 20%, var(--priva-mesh-sage), transparent 72%),
        radial-gradient(ellipse 44rem 28rem at 98% 40%, var(--priva-mesh-warm), transparent 72%),
        radial-gradient(ellipse 48rem 30rem at 64% 64%, var(--priva-mesh-mint), transparent 72%),
        radial-gradient(ellipse 40rem 26rem at 2% 82%, var(--priva-mesh-warm), transparent 72%);
    background-size: 100% 120rem;
    background-repeat: repeat-y;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Eén focusring voor alles wat focus kan krijgen, dezelfde als in de app. */
:focus-visible {
    outline: 3px solid var(--priva-focus);
    outline-offset: 3px;
    border-radius: var(--priva-radius-label);
}

/* Op een donker paneel is de groene ring te donker (onder 3:1); daar is hij mint. */
.cta :focus-visible,
.panel-dark :focus-visible {
    outline-color: var(--site-mint);
}

html {
    scroll-padding-top: 5.5rem;
}

/* --- Raamwerk ----------------------------------------------------------- */

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
}

/* De bovenbalk is de glaslaag `glass-bar` (de klasse staat in de layout): doorschijnend papier dat
   vervaagt wat eronder schuift. Met JavaScript is hij bovenaan de pagina nog doorzichtig en wordt hij
   glas zodra de pagina schuift (`is-stuck`) of het menu open is. Op de balk staat alleen inkt:
   gedempte tekst haalt 4,5:1 niet boven een donker paneel. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--priva-line);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.js .topbar:not(.is-stuck):not(.nav-open) {
    --priva-elev: 0 0 transparent;
    --priva-edge: 0 0 transparent;
    border-bottom-color: transparent;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ruimte tussen het woordmerk en het menu, ook met de langere Duitse labels (PRIV-242). */
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--priva-target);
    flex: 0 0 auto;
}

.brand-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Het woordmerk: Priva in het lettertype van de tekst, Search in dat van de koppen. */
.brand-word {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.brand-word span {
    color: var(--muted);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
}

/* Het woordmerk op de balk: het tweede deel is ook inkt zodra de balk glas is. */
.topbar .brand-word span {
    color: var(--ink);
    opacity: 0.82;
}

.topbar nav {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
    margin-left: auto;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 26px;
}

/* Hamburger: alleen zichtbaar op smalle schermen en alleen als JavaScript draait. */
.nav-toggle {
    display: none;
    width: var(--priva-target);
    height: var(--priva-target);
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--priva-surface);
    border: 1px solid var(--priva-outline);
    border-radius: var(--priva-radius-control);
    box-shadow: var(--priva-shadow-1);
    color: var(--ink);
    cursor: pointer;
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out);
}

.nav-toggle:hover {
    background-color: var(--priva-soft);
    border-color: var(--ink);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
}

.nav-toggle-bars::before {
    transform: translateY(-6px);
}

.nav-toggle-bars::after {
    transform: translateY(6px);
}

.topbar.nav-open .nav-toggle-bars {
    background: transparent;
}

.topbar.nav-open .nav-toggle-bars::before {
    transform: rotate(45deg);
}

.topbar.nav-open .nav-toggle-bars::after {
    transform: rotate(-45deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.topbar nav a:not(.button) {
    position: relative;
    padding: 10px 0;
    white-space: nowrap;
    color: var(--ink);
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.topbar nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--priva-accent);
    opacity: 0;
    transition: opacity var(--priva-duration) var(--priva-ease-out);
}

.topbar nav a.active {
    font-weight: 600;
}

.topbar nav a:not(.button):hover::after,
.topbar nav a.active::after {
    opacity: 1;
}

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

/* Dezelfde rangorde als in de app: de hoofdknop is dekkend donker met een lichte bovenrand, de
   tweede knop is een dekkend wit vlak met de omlijning (3:1 op elk vlak). Minstens 44 pixels hoog. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--priva-target);
    padding: 9px 22px;
    border: 1px solid var(--priva-primary);
    border-radius: var(--priva-radius-control);
    background-color: var(--priva-primary);
    color: var(--priva-on-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    transition:
        color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.button:hover {
    border-color: var(--priva-primary-hover);
    background-color: var(--priva-primary-hover);
    box-shadow: var(--site-sheen), var(--priva-shadow-2);
}

.button.secondary {
    border-color: var(--priva-outline);
    background-color: var(--priva-surface);
    color: var(--ink);
    box-shadow: var(--priva-shadow-1);
}

.button.secondary:hover {
    border-color: var(--ink);
    background-color: var(--priva-soft);
    box-shadow: var(--priva-shadow-2);
}

/* --- Typografie --------------------------------------------------------- */

.eyebrow {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 18px;
}

h1 {
    font-size: clamp(34px, 4vw, 52px);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    letter-spacing: -1.2px;
    line-height: 1.12;
    /* Het kleurverloop vult alleen het vlak van de kop: zonder deze ruimte valt de staart van een g of
       een j van de onderste regel erbuiten en is ze afgekapt. De marge geeft dezelfde ruimte terug. */
    padding-bottom: 0.18em;
    margin: 0 0 calc(22px - 0.18em);
    max-width: 22ch;
    background: linear-gradient(165deg, var(--ink) 30%, var(--priva-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    letter-spacing: -1.2px;
    line-height: 1.15;
    margin: 0 0 18px;
    max-width: 22ch;
}

h3 {
    font-size: 18px;
    margin: 0 0 8px;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
}

.lead {
    font-size: 19px;
    color: var(--muted);
    max-width: 560px;
    margin: 0 0 32px;
}

/* Een label: een pil met een dekkende tint, een scherpe rand en een punt ervoor, zoals in de app.
   Het is informatie, geen knop: geen toestand bij de muis. */
.tagline,
.chip,
.mock .badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--priva-outline);
    border-radius: 999px;
    background-color: var(--priva-badge-neutral);
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    padding: 3px 11px;
    white-space: nowrap;
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
}

.tagline::before,
.chip::before,
.mock .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.tagline {
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.inline-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

/* Onder de muis vult een tint van het accent de link vanaf de onderstreping: de lijn wordt een
   markeerstreep. Het vullen zelf staat in het blok voor beweging; zonder dat blok staat de tint er
   meteen. */
.inline-link,
.footer-note a {
    background-image: linear-gradient(var(--site-link-tint), var(--site-link-tint));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0;
    border-radius: 2px;
}

.inline-link:hover,
.footer-note a:hover {
    background-size: 100% 100%;
    text-decoration-color: var(--ink);
}

/* --- Glas: de panelen van de site ---------------------------------------

   Elk vlak hieronder is de laag `glass-panel` van de app (wit) of `glass-soft` (salie), opgebouwd
   uit dezelfde tokens. Buiten @supports is het de dekkende vulkleur. Een laag in de pagina vervaagt
   niet: ze ligt op de egale achtergrond, en vervagen kost op een lange pagina alleen rekentijd. */
.mock,
.price,
.verder a,
.duo article,
.objections article,
.legal-facts,
.tiers-wrap,
.mail,
.form,
.faq-accordion details,
section.legal,
.done,
.toc {
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
}

.callout,
.quote,
footer {
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-soft);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar.glass-bar {
        --priva-layer-opacity: var(--site-glass-bar);
    }

    .mock,
    .price,
    .verder a,
    .duo article,
    .objections article,
    .legal-facts,
    .tiers-wrap,
    .mail,
    .form,
    .faq-accordion details,
    section.legal,
    .done,
    .toc {
        background-color: color-mix(in srgb, var(--priva-surface) var(--priva-glass-panel), transparent);
    }

    .callout,
    .quote,
    footer {
        background-color: color-mix(in srgb, var(--priva-soft) var(--priva-glass-soft), transparent);
    }
}

/* --- Iconentegel -------------------------------------------------------- */

/* Eén rand en één lichtlijn, op een dekkend wit vlak met de eerste trede schaduw. */
.icon-tile {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--priva-radius-panel);
    color: var(--priva-accent);
    background-color: var(--priva-surface);
    border: 1px solid var(--priva-line);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
    transition:
        color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.icon {
    flex: 0 0 auto;
    color: var(--priva-accent);
}

/* Het aanraakvlak is de hele li, pijler of kaart, niet de tegel van 46px: je hovert een kaart,
   niet een icoontje. De tegel komt een trede omhoog; wat de glyph daarbij doet staat in het blok
   met beweging onderaan. */
:is(li, .pillar, .card):hover > .icon-tile {
    color: var(--ink);
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.rail li:hover::after {
    color: var(--priva-accent);
}

/* Een glyphdeel dat wegschuift mag buiten de 24×24 vallen; in de tegel van 46px is daar ruimte voor. */
.icon-tile svg {
    overflow: visible;
}

.icon-tile svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Lijnen die zich laten tekenen dragen hun eigen lengte in --len; de dasharray staat er altijd op,
   want een streep die precies even lang is als het pad zie je niet. */
.i-draw {
    --len: 30;
    stroke-dasharray: var(--len);
    stroke-dashoffset: 0;
}

[data-icon="review"] .i-check {
    --len: 9;
}

[data-icon="eye-off"] .i-slash {
    --len: 25;
}

[data-icon="trail"] .i-lines {
    --len: 19;
}

[data-icon="shield"] .i-check {
    --len: 10;
}

[data-icon="file"] .i-lines {
    --len: 11;
}

[data-icon="pulse"] .i-wave {
    --len: 32;
}

/* De wijzers draaien om het midden van de wijzerplaat, niet om het midden van hun eigen bounding
   box: vandaar view-box in plaats van fill-box. */
[data-icon="clock"] .i-hands {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

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

.hero {
    padding: 56px 0 76px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.hero > * {
    min-width: 0;
}

/* De kop van de homepage is twee zinnen lang: op de maat van een korte paginakop liep hij over zeven
   regels. Kleiner en breder, zodat hij in drie à vier regels naast het voorbeeld staat. */
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 18px;
    max-width: 46ch;
}

/* Onder een vertaalde juridische pagina (15 oktober 2026, besluit van de eigenaar): de zin dat ze met
   hulp van AI uit het Nederlands is vertaald en dat de Nederlandse versie geldt. Klein en stil, in de
   kleur van een onderschrift, op de breedte van de juridische tekst. */
.translation-note {
    max-width: 760px;
    margin: 8px 0 56px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.translation-note a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--priva-outline);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.translation-note a:hover {
    color: var(--ink);
}

/* De dag waarop de inhoud van de pagina het laatst is gewijzigd (22 oktober 2026): klein, onder de inhoud. */
.page-updated {
    max-width: 760px;
    margin: 8px 0 32px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

/* Een verwijzing naar een wetsartikel in lopende tekst of in een kop: ze staat er, voor wie haar
   zoekt, maar leest niet mee. Kleiner, zonder gewicht en in de kleur van een onderschrift. */
.law-ref {
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
}

.panel-dark .law-ref,
.cta .law-ref {
    color: inherit;
    opacity: 0.78;
}

/* De merktekens onder de hero, over de volle breedte: de kaders waar de inrichting op is afgestemd
   en, als de hosting er zo staat, twee eigenschappen van de hosting. Een verwijzing, geen keurmerk:
   geen vlak en geen kleur van een ander, alleen inkt met de rand in het accent. Zonder de tweede
   groep staat de verwijzing ernaast, met de tweede groep eronder. */
.frameworks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: space-between;
    gap: 26px 44px;
    align-items: start;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.frameworks .eyebrow {
    margin: 0 0 16px;
}

.frameworks ul {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.frameworks li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.framework-mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    color: var(--ink);
}

.framework-ring {
    color: var(--priva-accent);
}

.frameworks strong,
.frameworks small {
    display: block;
}

.frameworks strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.frameworks small,
.frameworks-note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

/* De verwijzing naar de pagina's waar het staat uitgelegd: stil, in de kleur van een onderschrift. */
.frameworks-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    align-self: end;
}

.frameworks-note a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--priva-outline);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.frameworks-note a:hover {
    color: var(--ink);
}

.frameworks-group + .frameworks-group + .frameworks-note {
    grid-column: 1 / -1;
    justify-self: start;
}

/* De assistenten die je koppelt: het beeldmerk in één kleur, die van de huisstijl, met de naam
   ernaast. Een verwijzing naar wat de bezoeker al gebruikt: geen vlak, geen rand en geen kleur van
   het merk zelf. */
.assistants {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 56px;
    list-style: none;
    margin: 0 0 44px;
    padding: 0;
}

.assistants li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.assistant-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: var(--priva-accent);
}

.assistants strong,
.assistants small {
    display: block;
}

.assistants strong {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.assistants small {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

/* Het voorbeeld in de hero ligt een trede hoger dan een gewoon paneel. */
.mock {
    position: relative;
    padding: 26px;
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.mock .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.mock .badge {
    border-color: var(--priva-success);
    background-color: var(--priva-badge-success);
    color: var(--priva-success);
    font-size: 10.5px;
}

.mock pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--ink);
}

.mock small {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}

/* De eindtoestand van het voorbeeld: het origineel doorgehaald, het pseudoniem ernaast. Zonder
   JavaScript en voor wie minder beweging vraagt staat het er meteen zo; de overgang ernaartoe staat
   in het blok met beweging. De doorhaling zit in de kleur van de tekst: geen dekking, want gedimde
   tekst haalt het contrast niet. */
.mock .del {
    color: var(--warn);
    text-decoration: line-through;
    text-decoration-color: var(--warn);
}

.mock .tag {
    display: inline-block;
    background-color: var(--priva-badge-success);
    border: 1px solid var(--priva-success);
    border-radius: var(--priva-radius-label);
    padding: 0 6px;
    font-weight: 600;
    color: var(--priva-success);
}

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

section {
    padding: 74px 0;
    border-top: 1px solid var(--line);
}

.page-head {
    padding: 40px 0 8px;
    max-width: 820px;
}

.page-head + section,
.page-head + .toc + section {
    border-top: 0;
    padding-top: 46px;
}

.section-head {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}

.section-head .lead {
    margin: 0;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.split > * {
    min-width: 0;
}

/* --- Editorial rijen ---------------------------------------------------- */

.rows {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: row;
    border-top: 1px solid var(--line);
}

/* Een rij is genummerd, als in een rapport: een cijfer in het kopletter, geen icoon in een vakje. */
.rows li {
    counter-increment: row;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 28px;
    align-items: baseline;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}

.rows li::before {
    content: counter(row, decimal-leading-zero);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--priva-accent);
}

.rows.warn li::before {
    color: var(--warn);
}

.rows h3 {
    margin-bottom: 10px;
}

.rows p {
    margin: 0;
    color: var(--muted);
    max-width: 68ch;
}


/* --- Flow-rail ---------------------------------------------------------- */

.rail {
    list-style: none;
    counter-reset: r;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    position: relative;
}

.rail::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--site-mint) 18%,
        var(--site-mint-deep) 50%,
        var(--site-mint) 82%,
        transparent
    );
    transform-origin: left;
}

.rail li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.rail li::after {
    counter-increment: r;
    content: "0" counter(r);
    position: absolute;
    top: 4px;
    left: 58px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    color: var(--muted);
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.rail strong {
    font-size: 15px;
    margin-top: 4px;
}

.rail span {
    color: var(--muted);
}

.rail.rail-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Pijlers en kaarten ------------------------------------------------- */

.pillars {
    display: grid;
    border-top: 1px solid var(--line);
}

/* Twee pijlers als lijst met lijnen: geen vlak, geen streep, geen icoon. */
.pillar {
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.pillar h3 {
    margin-bottom: 8px;
}

/* Tot 23 oktober 2026 had een prijskaart een gekleurde streep links; die is weg, zoals elke gekleurde
   rand als accent (besluit van de eigenaar van 14 oktober 2026). Het bedrag staat in de kopletter, zoals
   de bedragen op de homepage. */
.price .amount {
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
}

.pillar p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.pillar .tagline {
    margin-bottom: 8px;
}

/* De maatregelen per thema op de pagina Security & vertrouwen: een rij per thema, het thema links
   en de maatregelen rechts in twee kolommen. Geen kaarten: zo staat alles dicht op elkaar en leest
   het als een overzicht. */
.cards {
    display: grid;
    border-top: 1px solid var(--line);
}

.card {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 10px 40px;
    align-items: baseline;
    min-width: 0;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.card h3 {
    margin: 0;
    font-size: 19px;
}

.card .plain-list {
    margin: 0;
    /* Twee kolommen alleen als elk minstens 18rem breed is; daaronder één. */
    columns: 18rem 2;
    column-gap: 36px;
    font-size: 14.5px;
    line-height: 1.6;
}

.card .plain-list li {
    break-inside: avoid;
}

/* De kaders in de kop en de inhoudsopgave van een lange pagina. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip {
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
}

.toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 28px 0 0;
    padding: 8px 12px;
    font-size: 14px;
}

.toc strong {
    padding: 0 10px 0 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.toc a {
    display: inline-flex;
    align-items: center;
    min-height: var(--priva-target);
    padding: 0 12px;
    border-radius: var(--priva-radius-control);
    font-weight: 600;
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.toc a:hover {
    background-color: var(--site-hover);
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* --- Check-list --------------------------------------------------------- */

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.check-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    font-size: 15px;
}

.check-list li::before {
    content: "✓";
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--priva-success);
    border-radius: 50%;
    background-color: var(--priva-badge-success);
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    color: var(--priva-success);
    font-weight: 700;
    font-size: 12px;
}

/* Wat iets niet doet (op /werking: wat de AI niet ziet) krijgt een neutraal kruisje, geen groen
   vinkje: een vinkje bij "Niet:" leest tegenstrijdig (PRIV-306). */
.check-list li.is-not::before {
    content: "✕";
    border-color: var(--priva-outline);
    background-color: var(--priva-soft);
    color: var(--muted);
}

/* Een verwijzing naar een wetsartikel in een grote inleiding houdt de grootte van die zin en mag
   afbreken: kleiner midden in een grote zin leest als een losse noot (PRIV-306). */
.lead .law-ref {
    font-size: inherit;
    white-space: normal;
}

.check-list li > b,
.check-list li > span {
    grid-column: 2;
}

.check-list b {
    display: block;
}

.check-list span {
    color: var(--muted);
}

/* --- Video -------------------------------------------------------------- */

.video {
    margin: 0 0 56px;
}

.video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    box-shadow: var(--priva-shadow-2);
}

.video figcaption {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--muted);
    max-width: 68ch;
}

/* --- Formulier ---------------------------------------------------------- */

/* Het formulier is een glazen paneel. Een veld draagt de klasse `field` uit priva.css (bijna dekkend
   wit met een zachte binnenschaduw); hier staan alleen zijn maat en zijn rand. */
.form {
    display: grid;
    gap: 24px;
    align-content: start;
    padding: 32px;
}

.form-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

.form-field > span:not(.select),
.form-field legend {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    padding: 0;
}

.form-field > span em,
.field-hint {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

.field-hint {
    font-size: 12.5px;
    display: block;
    margin: 6px 0 12px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form .field {
    width: 100%;
    min-height: var(--priva-target);
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    border: 1px solid var(--priva-field-border);
    border-radius: var(--priva-radius-control);
    padding: 10px 14px;
}

.form .field::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form textarea.field {
    resize: vertical;
    min-height: 116px;
    line-height: 1.6;
}

.form .field[aria-invalid="true"] {
    border-color: var(--warn);
    border-width: 2px;
}

.form .select {
    display: block;
}

.choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Een keuze is een schakelaar met zijn tekst: het hele vak is het doel, minstens 44 pixels hoog. */
.choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--priva-target);
    font-size: 14.5px;
    padding: 8px 14px;
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-control);
    background-color: var(--site-hover);
    cursor: pointer;
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out);
}

.choice:hover {
    border-color: var(--priva-outline);
}

.choice:has(input:checked) {
    border-color: var(--priva-accent);
    background-color: var(--priva-surface);
}

/* De melding bij een veld: dezelfde vorm als in de app, tekst met een streep ervoor. */
.field-note {
    display: block;
    border-left: 2px solid var(--warn);
    padding-left: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warn);
}

/* De melding boven een formulier is de laag `glass-tone` met `tone-error` (de klassen staan in de
   view): hier alleen de maat en het teken. */
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 18px 14px 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--priva-radius-control);
    font-size: 14px;
    font-weight: 600;
    color: var(--warn);
}

.form-error .icon {
    color: currentColor;
    margin-top: 1px;
}

.form-actions {
    display: grid;
    gap: 12px;
    justify-items: start;
    margin-top: 4px;
}

.form-actions small {
    font-size: 12.5px;
    color: var(--muted);
    max-width: 52ch;
}

/* Privacymelding bij het demoformulier (art. 13 AVG). */
.form-privacy {
    max-width: 62ch;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Het doorstuurformulier naar een werkruimte: één smal paneel. */
.form.narrow {
    max-width: 560px;
}

/* De bevestiging na een aanvraag: een paneel met een teken ervoor. */
.done {
    display: grid;
    gap: 22px;
    max-width: 820px;
    margin: 40px 0 70px;
    padding: 40px 44px 44px;
}

.done .icon-tile {
    color: var(--priva-success);
    border-color: var(--priva-success);
    background-color: var(--priva-badge-success);
}

.done .eyebrow {
    color: var(--priva-success);
}

.done h1,
.done .lead {
    margin-bottom: 0;
}

/* --- Donkere panelen ---------------------------------------------------- */

.panel-dark,
.cta {
    position: relative;
    isolation: isolate;
    color: var(--site-on-dark);
    background:
        radial-gradient(
            90% 70% at 12% 100%,
            color-mix(in srgb, var(--site-mint) var(--site-glow-mint), transparent) 0%,
            transparent 62%
        ),
        radial-gradient(
            80% 60% at 95% 4%,
            color-mix(in srgb, var(--site-mint-deep) var(--site-glow-deep), transparent) 0%,
            transparent 58%
        ),
        linear-gradient(165deg, var(--site-dark-top) 0%, var(--dark) 55%, var(--site-dark-bottom) 100%);
    border: 1px solid var(--site-dark-top);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 14%, transparent),
        var(--priva-shadow-3);
}

.panel-dark {
    border-radius: var(--priva-radius-panel);
    padding: 32px;
}

/* Het etiket op een donker paneel: licht glas op donker. */
.panel-dark .flag {
    display: inline-block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--site-on-dark);
    background: color-mix(in srgb, var(--priva-surface) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--priva-surface) 30%, transparent);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 20px;
}

.panel-dark ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

.panel-dark li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    padding: 11px 10px;
    border-radius: var(--priva-radius-control);
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.panel-dark li:hover {
    background-color: color-mix(in srgb, var(--priva-surface) 8%, transparent);
}

.panel-dark .icon {
    color: var(--site-mint);
    margin-top: 1px;
}

.panel-dark strong {
    color: var(--priva-on-primary);
    font-weight: 600;
}

.panel-dark p {
    color: var(--site-on-dark-muted);
}

.panel-dark h2,
.panel-dark h3 {
    color: var(--priva-on-primary);
}

.panel-dark .inline-link,
.cta .inline-link {
    --site-link-tint: color-mix(in srgb, var(--site-mint) 24%, transparent);
    color: var(--priva-on-primary);
    text-decoration-color: var(--site-mint);
}

.panel-dark .inline-link:hover,
.cta .inline-link:hover {
    text-decoration-color: var(--priva-on-primary);
}

/* Het contactblok onderaan een pagina: een donker paneel met één alinea en één knop. */
.panel-dark.contact {
    padding: 44px 48px 48px;
}

.panel-dark.contact h2 {
    max-width: 24ch;
}

.panel-dark.contact p {
    max-width: 68ch;
    margin: 0 0 26px;
    font-size: 16px;
}

/* De lichte knop op een donker paneel. */
.cta .button,
.panel-dark .button {
    border-color: var(--priva-surface);
    background-color: var(--priva-surface);
    color: var(--dark);
    box-shadow: var(--priva-shadow-2);
}

.cta .button:hover,
.panel-dark .button:hover {
    border-color: var(--site-mint);
    background-color: var(--site-mint);
}

/* --- Callout / quote ---------------------------------------------------- */

.callout {
    margin-top: 38px;
    padding: 26px 30px;
    font-size: 14.5px;
    color: var(--muted);
}

.callout strong {
    color: var(--ink);
}

.panel-dark + .callout {
    margin-top: 20px;
}

.quote {
    margin: 44px 0 0;
    padding: 36px 40px;
    font-size: 20px;
    line-height: 1.5;
    max-width: 860px;
}

.quote small {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 14px;
}

/* --- "Meer" link met pijl ----------------------------------------------- */

.more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--priva-target);
    margin-top: 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.more:hover {
    text-decoration-color: var(--priva-accent);
}

.more + .more {
    margin-left: 32px;
}

.more::after {
    content: "→";
    display: inline-block;
    transition: translate var(--priva-duration) var(--priva-ease-out);
}

/* --- Verder lezen ------------------------------------------------------- */

.verder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 44px;
}

.verder a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px;
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.verder a:hover {
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.verder strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.verder span {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* --- CTA ---------------------------------------------------------------- */

.cta {
    border-radius: 10px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 44px;
    align-items: center;
    margin: 24px 0 70px;
}

.cta > * {
    min-width: 0;
}

.cta h2 {
    color: var(--priva-on-primary);
    max-width: none;
}

.cta p {
    color: var(--site-on-dark-muted);
    margin: 0 0 26px;
    font-size: 17px;
}

.cta ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--site-on-dark-muted);
    display: grid;
    gap: 14px;
}

.cta li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cta .icon {
    color: var(--site-mint);
    margin-top: 1px;
}

/* --- Footer ------------------------------------------------------------- */

/* De voet is een saliegroene glaslaag onderaan de pagina: links het merk, daarnaast twee kolommen
   met een kop (het product, en juridisch met contact), en onder een lijn de toelichting en de
   gegevens van de dienstverlener. */
footer {
    margin: 0 0 28px;
    padding: 40px 40px 30px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px 56px;
}

.footer-brand p {
    margin: 10px 0 0;
    max-width: 34ch;
}

.footer-brand .footer-tagline {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
}

/* De merktekens onder in de eerste kolom: dezelfde tekens als onder de hero, klein, met alleen de
   naam ernaast, onder elkaar. */
.footer-marks {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.footer-marks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.footer-marks .framework-mark {
    width: 34px;
    height: 34px;
}

.footer-heading {
    margin: 0 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
}

.footer-nav,
.footer-legal {
    display: grid;
}

.footer-nav a,
.footer-legal a {
    display: flex;
    align-items: center;
    min-height: 34px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.footer-nav a:hover,
.footer-legal a:hover {
    text-decoration-color: var(--priva-accent);
}

/* De taalwisselaar (PRIV-242, fase 7): alleen op een pagina die in meer dan één publieke taal bestaat,
   en alleen in de footer (besluit van de eigenaar, 15 oktober 2026), met de namen van de talen. De taal
   van nu is tekst, geen link. */
.language-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.language-switch-label .icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.language-switch ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switch a,
.language-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--priva-target);
    padding: 8px 16px;
    border: 1px solid var(--priva-field-border);
    border-radius: 999px;
    background: var(--paper);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
}

.language-switch a:hover {
    border-color: var(--priva-accent);
    background: var(--soft);
}

.language-current {
    border-color: var(--priva-primary);
    background: var(--priva-primary);
    color: var(--priva-on-primary);
    font-weight: 600;
}

.language-suggestion {
    position: fixed;
    z-index: 30;
    inset-inline: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 740px;
    margin-inline: auto;
    padding: 16px 60px 16px 20px;
    border: 1px solid var(--priva-field-border);
    border-radius: var(--priva-radius-panel);
    background: var(--paper);
    box-shadow: var(--priva-shadow-2);
    color: var(--ink);
}

.language-suggestion[hidden] {
    display: none;
}

.language-suggestion > .icon {
    flex: none;
}

.language-suggestion p {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.language-suggestion .button {
    flex: none;
    font-size: 14px;
}

.language-suggestion-close {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
    display: grid;
    place-items: center;
    width: var(--priva-target);
    height: var(--priva-target);
    padding: 0;
    border: 0;
    border-radius: var(--priva-radius-label);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.language-suggestion-close:hover {
    background: var(--soft);
}

@media (max-width: 600px) {
    .language-suggestion {
        flex-wrap: wrap;
        padding: 16px 56px 16px 16px;
    }

    .language-suggestion p {
        flex-basis: calc(100% - 32px);
    }

    .language-suggestion .button {
        margin-inline-start: 32px;
    }
}

.footer-bottom {
    display: grid;
    gap: 12px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

.footer-note,
.footer-identity {
    margin: 0;
}

.footer-note {
    max-width: 760px;
}

.footer-note a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

/* --- Reveal ------------------------------------------------------------- */

/* Een blok met data-reveal staat er altijd. Alleen met JavaScript én voor wie niet om minder
   beweging vroeg komt het in beeld: de regel `.js [data-reveal]` staat in het blok onderaan. */
@media print {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --- Prijzen ------------------------------------------------------------ */

.prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.price {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 28px;
    transition: box-shadow var(--priva-duration) var(--priva-ease-out);
}

.price:hover {
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.price h3 {
    margin: 0 0 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.price .amount {
    margin: 0;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -1.4px;
    color: var(--ink);
}

/* "per maand" hangt onder het bedrag, niet ernaast: anders breekt het op smalle kaarten. */
.price .amount span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--muted);
}

.price .alt {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.price ul {
    list-style: none;
    padding: 22px 0 0;
    margin: 22px 0 26px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    font-size: 14.5px;
}

.price li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
}

.price li::before {
    content: "\2713";
    color: var(--priva-success);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

/* De knop zakt naar de onderkant zodat de drie kaarten gelijk uitlijnen. */
.price .button {
    margin-top: auto;
    align-self: start;
}

.price-note {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--muted);
    max-width: 78ch;
}

/* --- Aanvullende diensten ----------------------------------------------- */

.addons {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.addons li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: start;
    padding: 30px 14px;
    border-bottom: 1px solid var(--line);
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.addons li:hover {
    background-color: var(--site-hover);
}

.addons strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
}

.addons span {
    display: block;
    color: var(--muted);
    font-size: 15px;
    max-width: 62ch;
}

.addon-price {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-size: 21px;
    letter-spacing: -0.5px;
    color: var(--ink);
}

.addon-price small {
    font-size: 13.5px;
    letter-spacing: normal;
    color: var(--muted);
}

.addon-price span {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 13px;
}

/* --- Tabellen ----------------------------------------------------------- */

/* Een tabel schuift op een smal scherm binnen haar eigen kader; de pagina zelf wordt nooit breder.
   De kop is salie op het glas, een rij licht op bij de muis. */
.tiers-wrap {
    overflow-x: auto;
}

.tiers {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.5;
}

.tiers th,
.tiers td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.tiers tbody tr:last-child th,
.tiers tbody tr:last-child td {
    border-bottom: 0;
}

.tiers thead th {
    font-weight: 600;
    color: var(--ink);
    background-color: var(--site-head);
}

.tiers thead small {
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--priva-accent);
    margin-bottom: 4px;
}

.tiers tbody th {
    width: 22%;
    font-weight: 500;
    color: var(--ink);
}

.tiers td {
    color: var(--muted);
}

.tiers tbody tr,
.legal-table tbody tr {
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.tiers tbody tr:hover,
.legal-table tbody tr:hover {
    background-color: var(--site-hover);
}

.tiers td.yes,
.tiers td.no,
.tiers td.maybe {
    padding-left: 44px;
    position: relative;
}

.tiers td.yes::before,
.tiers td.no::before,
.tiers td.maybe::before {
    position: absolute;
    left: 16px;
    top: 17px;
    width: 18px;
    height: 18px;
    border: 1px solid;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.tiers td.yes::before {
    content: "✓";
    color: var(--priva-success);
    background: var(--priva-badge-success);
}

.tiers td.no::before {
    content: "×";
    color: var(--warn);
    background: var(--priva-badge-danger);
}

.tiers td.maybe::before {
    content: "–";
    color: var(--ink);
    border-color: var(--priva-outline);
    background: var(--priva-badge-neutral);
}

.footnote {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 90ch;
}

/* --- Genummerde stappen en codevoorbeeld -------------------------------- */

.steps {
    list-style: none;
    counter-reset: s;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 18px;
}

.steps li {
    counter-increment: s;
    position: relative;
    padding-left: 46px;
}

.steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--priva-primary);
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    color: var(--priva-on-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.steps b {
    display: block;
    font-weight: 600;
}

.steps span {
    color: var(--muted);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: var(--priva-radius-label);
    background: var(--soft);
    color: var(--ink);
}

.code-sample {
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: var(--priva-radius-panel);
    background: color-mix(in srgb, var(--site-dark-bottom) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--priva-surface) 16%, transparent);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.6;
}

.code-sample code {
    padding: 0;
    background: none;
    color: var(--site-on-dark);
}

/* --- Veelgestelde vragen als uitklaplijst ------------------------------- */

/* Elke vraag is een eigen glazen paneel; het plusje draait een kwartslag als het antwoord open is. */
.faq-accordion {
    display: grid;
    gap: 10px;
}

/* Vragen direct onder een lijst (zoals op /eu-hosting) krijgen lucht. */
.check-list + .faq-accordion {
    margin-top: 44px;
}

.faq-accordion details {
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.faq-accordion details:hover,
.faq-accordion details[open] {
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.faq-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--priva-target);
    padding: 18px 64px 18px 24px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    border-radius: var(--priva-radius-panel);
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    border: 1px solid var(--priva-outline);
    background-color: var(--priva-surface);
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
    color: var(--ink);
}

.faq-accordion details[open] summary::after {
    content: "–";
}

.faq-accordion details p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--muted);
    font-size: 15px;
    max-width: 82ch;
}

/* Een antwoord met een lijst (de vragen op een vergelijkingspagina, 22 oktober 2026): dezelfde maat en
   kleur als een antwoord in een alinea, en dicht onder de zin die de lijst inleidt. */
.faq-accordion details ul,
.faq-accordion details ol {
    margin: 0;
    padding: 0 24px 22px 44px;
    color: var(--muted);
    font-size: 15px;
    max-width: 82ch;
}

.faq-accordion details li + li {
    margin-top: 6px;
}

.faq-accordion details p + ul,
.faq-accordion details p + ol {
    margin-top: -12px;
}

.faq-accordion details p strong {
    color: var(--ink);
}

.faq-accordion + .verder {
    margin-top: 64px;
}

/* --- Overtuig je werkgever ---------------------------------------------- */

.duo,
.objections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.duo article,
.objections article {
    min-width: 0;
    padding: 30px 32px;
}

.duo h3 {
    margin-bottom: 12px;
}

.duo p,
.objections p {
    margin: 0;
    color: var(--muted);
}

/* Wat je kunt zeggen: een melding in de vorm van de app, getint in de accentkleur, zonder streep. */
.duo .duo-say {
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--priva-accent) 45%, transparent);
    border-radius: var(--priva-radius-control);
    background-color: var(--priva-soft);
    color: var(--ink);
}

.objections .objection {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--warn);
}

.mail {
    overflow: hidden;
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.mail-head {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 18px 24px;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background-color: var(--site-head);
}

.mail-head b {
    display: inline-block;
    min-width: 92px;
    font-weight: 600;
    color: var(--ink);
}

.mail pre {
    margin: 0;
    padding: 22px 24px 26px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.button[hidden] {
    display: none;
}

.copy-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--priva-success);
}

/* --- Veelgestelde vragen ------------------------------------------------ */

.faq {
    margin: 0;
    border-top: 1px solid var(--line);
}

.faq dt {
    padding-top: 26px;
    font-weight: 600;
    color: var(--ink);
}

.faq dd {
    margin: 10px 0 0;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
    max-width: 78ch;
}

/* --- Juridische pagina's ------------------------------------------------- */

/* Lopende tekst op één rustig glazen paneel; de tekst blijft smal omdat dit leeswerk is, maar
   tabellen mogen de volle breedte van het paneel gebruiken. */
section.legal {
    max-width: 1120px;
    margin: 34px 0 70px;
    padding: 44px 48px 48px;
    border: 1px solid var(--priva-line);
}

.legal h2,
.legal h3,
.legal p,
.legal .plain-list,
.legal .check-list,
.legal .callout,
.legal .steps,
.legal .legal-facts {
    max-width: 760px;
}

.legal h2 {
    font-size: 22px;
    letter-spacing: -0.5px;
    margin: 44px 0 14px;
}

.legal h2:first-child {
    margin-top: 0;
}

.legal h3 {
    font-size: 17px;
    margin: 28px 0 10px;
}

.legal p {
    color: var(--muted);
    margin: 0 0 16px;
}

.legal .check-list,
.legal .callout {
    margin-top: 24px;
}

.plain-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: var(--muted);
}

.plain-list li {
    position: relative;
    padding: 0 0 12px 22px;
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--priva-accent);
}

/* Bedrijfsgegevens: labels links, waarden rechts, op mobiel onder elkaar. */
.legal-facts {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 20px;
    margin: 0 0 8px;
    padding: 22px 26px;
    background-color: var(--site-hover);
}

.legal-facts dt {
    font-weight: 600;
}

.legal-facts dd {
    margin: 0;
    color: var(--muted);
}

/* Een tabel op het paneel: licht glas op glas, met een saliegroene kop. */
.legal-table {
    max-width: 1120px;
    margin: 8px 0 20px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--site-hover);
    box-shadow: var(--priva-shadow-1);
}

.legal-table table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.legal-table th,
.legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.legal-table th {
    color: var(--ink);
    font-weight: 600;
    background-color: var(--site-head);
}

.legal-table tbody th {
    width: 24%;
    background-color: transparent;
}

.legal-table tr:last-child td,
.legal-table tbody tr:last-child th {
    border-bottom: 0;
}

/* Waar het bewijs staat: een verwijzing binnen een tabel, kleiner dan de tekst ernaast. */
.legal-table .proof {
    width: 26%;
    font-size: 13px;
}

/* --- Blog ---------------------------------------------------------------- */

/* Een artikel is leeswerk op het paneel van de juridische pagina's (section.legal); hieronder staat
   alleen wat een artikel daarbovenop nodig heeft. De lijst van artikelen is een redactionele lijst
   met lijnen, geen raster van kaarten. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 28px;
    font-size: 13.5px;
    color: var(--muted);
}

.crumbs a {
    font-weight: 600;
}

.crumbs a:hover,
.post-list a:hover {
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.crumbs + .page-head {
    padding-top: 18px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.post-list {
    list-style: none;
    max-width: 860px;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.post-list li {
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.post-list h2,
.post-list h3 {
    max-width: none;
    margin: 10px 0;
    font-size: 22px;
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.post-list h3 {
    font-size: 19px;
}

.post-list li > p:last-child {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
}

/* Het overzicht: het nieuwste artikel uitgelicht op een paneel, met zijn korte samenvatting op het
   donkere vlak ernaast; daaronder de andere artikelen als rijen. Een hele rij is de link: de titel
   draagt haar, en het vlak eromheen rekt die link op. */
.post-feature {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: stretch;
    margin: 34px 0 0;
    padding: 36px;
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.post-feature-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.post-feature .post-meta {
    align-items: center;
}

.post-feature h2 {
    max-width: 20ch;
    margin: 22px 0 16px;
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.9px;
}

.post-feature h2 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.post-feature-text > p:not(.post-meta) {
    max-width: 52ch;
    margin: 0 0 28px;
    font-size: 17px;
    color: var(--muted);
}

.post-feature .button {
    margin-top: auto;
}

.post-feature .panel-dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-feature .panel-dark .flag {
    align-self: flex-start;
}

.post-feature .panel-dark li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--site-mint);
}

.post-feature .panel-dark strong {
    color: inherit;
}

.post-rows {
    max-width: none;
    display: grid;
    gap: 6px;
    border-top: 0;
}

/* Een rij is in rust alleen tekst. Onder de muis of met de focus op de titel wordt ze een paneel van
   de site (vulkleur, rand en schaduw), kleurt de onderstreping van de titel naar het accent en vult
   de pijl zich. Geen egaal getint vlak over de volle breedte. */
.post-rows li {
    position: relative;
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 28px;
    align-items: start;
    padding: 26px 24px;
    border: 1px solid transparent;
    border-radius: var(--priva-radius-panel);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover,
.post-rows li:focus-within {
    border-color: var(--priva-line);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.post-rows .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 4px;
}

.post-rows h3 {
    margin: 0 0 8px;
    font-size: 21px;
}

.post-rows h3 a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover h3 a,
.post-rows h3 a:focus-visible {
    text-decoration-color: var(--priva-accent);
}

.post-rows h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--priva-radius-panel);
}

.post-rows li p {
    max-width: 66ch;
    margin: 0;
    color: var(--muted);
}

.post-rows .post-more {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    white-space: nowrap;
}

.post-arrow {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--priva-outline);
    border-radius: 50%;
    font-size: 16px;
    color: var(--ink);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        color var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover .post-arrow,
.post-rows li:focus-within .post-arrow {
    border-color: var(--dark);
    background-color: var(--dark);
    color: var(--priva-surface);
}

.post h2,
.post h3 {
    scroll-margin-top: 96px;
}

.post strong {
    color: var(--ink);
}

.post ol {
    max-width: 760px;
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--muted);
}

.post ol li {
    padding-bottom: 10px;
}

.post blockquote {
    max-width: 760px;
    margin: 24px 0;
    padding: 20px 24px 4px;
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--site-hover);
}

.post blockquote p {
    color: var(--ink);
}

.post .post-takeaways {
    margin: 0 0 40px;
}

.post-takeaways h2 {
    margin-top: 0;
}

.post-takeaways .plain-list {
    margin: 0;
}

.post-faq {
    max-width: 860px;
    margin-top: 24px;
}

.post-faq details p + p {
    margin-top: -8px;
}

/* --- Responsief --------------------------------------------------------- */

@media (max-width: 900px) {
    .post-feature {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .post-rows li {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 18px;
    }

    .post-rows .post-meta {
        flex-direction: row;
        align-items: center;
    }

    .post-rows .post-more {
        display: none;
    }

    .duo,
    .objections,
    .rail.rail-3,
    .prices,
    .cards {
        grid-template-columns: 1fr;
    }
    .addons li {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .addon-price,
    .addon-price span {
        text-align: left;
    }
    .hero,
    .split,
    .section-head {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .frameworks {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .frameworks ul {
        flex-wrap: wrap;
    }
    .section-head {
        gap: 20px;
        align-items: start;
    }
    .rail {
        grid-template-columns: 1fr 1fr;
    }
    .rail::before {
        display: none;
    }
    .verder {
        grid-template-columns: 1fr;
    }
    .cta {
        grid-template-columns: 1fr;
        padding: 40px 28px;
    }
    .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* De bovenbalk klapt eerder in dan de rest van de pagina. De taalwisselaar staat alleen in de footer
   (15 oktober 2026); zonder hem is de volle balk met de langere Duitse labels (PRIV-242) 973 pixels
   breed in het lettertype van de site, en 1046 als het lettertype niet laadt en dat van het apparaat invalt. Vanaf
   1061 pixels staat alles op één regel; daaronder het menu achter de knop. De drempel staat ook in
   public/marketing.js. Het hoofdmenu is `.topbar-inner > nav`. */
@media (max-width: 1060px) {
    .nav-toggle {
        display: inline-flex;
    }
    .topbar-actions {
        margin-left: 0;
        gap: 10px;
    }
    .topbar-inner > nav {
        gap: 0;
    }
    /* Met JavaScript wordt de nav een uitklappaneel onder de balk: een laag die boven de inhoud
       zweeft (de dekking en de vervaging van `glass-float`). */
    .js .topbar nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--priva-duration) var(--priva-ease-out),
            visibility var(--priva-duration);
    }
    .js .topbar-inner > nav {
        display: grid;
        padding: 6px 28px 16px;
        background-color: var(--priva-surface);
        border-top: 1px solid var(--priva-line);
        border-bottom: 1px solid var(--priva-line);
        box-shadow: var(--priva-shadow-3);
    }
    .js .topbar.nav-open nav {
        opacity: 1;
        visibility: visible;
    }
    .js .topbar-inner > nav a:not(.button) {
        display: flex;
        align-items: center;
        min-height: var(--priva-target);
        padding: 12px 2px;
        font-size: 16px;
        border-bottom: 1px solid var(--priva-line);
    }
    .js .topbar-inner > nav a:not(.button):last-child {
        border-bottom: 0;
    }
    .js .topbar-inner > nav a:not(.button)::after {
        display: none;
    }
    .js .topbar-inner > nav a.active {
        font-weight: 600;
    }
    /* Zonder JavaScript: geen paneel, maar de links netjes onder elkaar in de balk. */
    html:not(.js) .topbar-inner {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    html:not(.js) .topbar-inner > nav {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 0 18px;
        margin-left: 0;
    }
    html:not(.js) .nav-toggle {
        display: none;
    }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    @media (max-width: 1060px) {
        .js .topbar-inner > nav {
            background-color: color-mix(in srgb, var(--priva-surface) var(--priva-glass-float), transparent);
            -webkit-backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
            backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
        }
    }
}

@media (max-width: 700px) {
    .legal-facts {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 20px;
    }
    .legal-facts dd {
        margin-bottom: 10px;
    }
    .legal h2 {
        font-size: 20px;
        margin-top: 36px;
    }
    section.legal {
        padding: 28px 20px 32px;
    }
    .form {
        padding: 22px 18px;
    }
    .done {
        padding: 28px 22px 32px;
    }
    footer {
        padding: 26px 20px 26px;
    }
}

@media (max-width: 560px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
    .wrap {
        padding: 0 16px;
    }
    .topbar-inner {
        padding: 10px 16px;
    }
    .js .topbar-inner > nav {
        padding-right: 16px;
        padding-left: 16px;
    }
    .rail {
        grid-template-columns: 1fr;
    }
    .rows li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
        padding: 26px 0;
    }
    .rows li::before {
        font-size: 24px;
    }
    .icon-tile {
        width: 40px;
        height: 40px;
    }
    .card {
        grid-template-columns: minmax(0, 1fr);
    }
    .card .plain-list {
        columns: 1;
    }
    .field-row,
    .choices {
        grid-template-columns: 1fr;
    }
    h1 {
        max-width: none;
    }
    section {
        padding: 54px 0;
    }
    .quote {
        padding: 26px 22px;
        font-size: 17px;
    }
    .rail li::after {
        left: 52px;
    }
    .mock {
        padding: 20px 16px;
    }
    .more + .more {
        margin-left: 0;
    }
    .more {
        display: flex;
    }
    .duo article,
    .objections article {
        padding: 24px 20px;
    }
    .callout {
        padding: 22px 20px;
    }
    .panel-dark,
    .panel-dark.contact {
        padding: 24px 18px;
    }
    .cta {
        padding: 32px 20px;
    }
    .faq-accordion summary {
        padding-left: 18px;
    }
    .faq-accordion details p {
        padding: 0 18px 20px;
    }
}

/* --- Beweging -----------------------------------------------------------

   Alles wat verschuift, schaalt, draait of animeert. Wie minder beweging vraagt krijgt dit blok niet
   en ziet meteen de eindtoestand; kleur, rand en schaduw mogen hierboven wel verlopen. Bediening
   beweegt in 150, 200 of 250 ms (de tokens van de app). Een illustratie (een icoon dat één keer iets
   doet, het voorbeeld in de hero, de lijn van de rail) speelt één keer en niets herhaalt zich. */
/* --- Vergelijken (PRIV-235) ---------------------------------------------
   De vergelijkingspagina's en hun verzamelpagina. Een redactionele opbouw: lijnen in plaats van
   kaarten, een genummerde lijst in het kopletter, een tabel als grootboek. Geen vlak met een icoon
   erin en geen dikke rand als accent. De logo's van de partijen staan in de inktkleur van de
   huisstijl, nooit in de kleur van het merk. */

.party-logo {
    flex: 0 0 auto;
    display: block;
    height: 30px;
    width: auto;
    max-width: 100%;
    color: var(--ink);
}

.party-logo-ictrecht {
    height: 46px;
}

.party-logo-greenpt {
    height: 44px;
}

/* Twee lagen op elkaar: het logo in de inktkleur van de huisstijl, en hetzelfde logo in de kleur van
   het merk, dat bij aanwijzen of focus verschijnt. De kleuren zelf staan als fill op de vormen. */
.logo-swap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

.logo-swap .logo-brand {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.parties a:hover .logo-brand,
.parties a:focus-visible .logo-brand,
.duel-side:hover .logo-brand {
    opacity: 1;
}

/* Alleen een logo met een tweede laag wisselt: een logo zonder merkkleur blijft staan. */
.parties a:hover .logo-swap .logo-mono,
.parties a:focus-visible .logo-swap .logo-mono,
.duel-side:hover .logo-swap .logo-mono {
    opacity: 0;
}

.party-logo-aiaiai {
    height: 38px;
}

.duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0 40px;
    align-items: start;
    padding: 34px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.duel-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.duel-mark .brand-word {
    font-size: 28px;
}

.duel-line {
    margin: 0 0 14px;
    max-width: 38ch;
    color: var(--muted);
}

.duel-price {
    margin: 0;
    font-size: 14.5px;
    color: var(--muted);
}

.duel-price strong {
    color: var(--ink);
    font-weight: 600;
}

.duel-site {
    margin: 14px 0 0;
    font-size: 14.5px;
}

/* De partij staat rechts uitgelijnd tegenover PrivaSearch; op een smal scherm staan ze onder elkaar
   en lijnt alles links uit. */
.duel-or + .duel-side {
    text-align: right;
}

.duel-or + .duel-side .duel-mark {
    justify-content: flex-end;
}

.duel-or + .duel-side .duel-line {
    margin-left: auto;
}

.duel-or {
    align-self: center;
    margin: 0;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-style: italic;
    font-size: 26px;
    color: var(--priva-accent);
}

.verdict {
    list-style: none;
    counter-reset: verdict;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.verdict li {
    counter-increment: verdict;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: baseline;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    line-height: 1.55;
    max-width: none;
}

.verdict li::before {
    content: counter(verdict);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 44px;
    line-height: 1;
    color: var(--priva-accent);
}

.verdict li > strong {
    grid-column: 2;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--ink);
}

.verdict li > strong ~ * {
    grid-column: 2;
}

.ledger-wrap {
    overflow-x: auto;
}

.ledger {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
}

.ledger th,
.ledger td {
    padding: 20px 22px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.ledger thead th {
    padding-top: 0;
    padding-bottom: 14px;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 21px;
    letter-spacing: -0.3px;
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.ledger tbody th {
    width: 19%;
    padding-left: 0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--muted);
}

.ledger td {
    width: 40.5%;
    color: var(--muted);
}

.ledger td:first-of-type,
.ledger-own td,
.ledger-own th {
    color: var(--ink);
    background-color: var(--site-head);
}

.ledger thead th {
    padding-top: 16px;
}

.ledger thead th:nth-child(2) {
    background-color: var(--site-head);
}

.ledger-wide td {
    width: auto;
}

.ledger-wide td:first-of-type {
    background-color: transparent;
    color: var(--muted);
}

.ledger-wide thead th {
    font-family: inherit;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
    background-color: transparent;
}

.ledger-wide thead th:nth-child(2) {
    background-color: transparent;
}

.ledger-wide tbody th {
    padding-left: 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.ledger-wide .ledger-own td:first-of-type {
    background-color: var(--site-head);
    color: var(--ink);
}

/* Wat je aan een risico doet (PRIV-238): een regel onder de uitleg op /risicos. */
.remedy {
    margin-top: 8px;
}

/* Wat het abonnement van een assistent zelf regelt (PRIV-238): lopende tekst op leesbreedte. */
.own-plan {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
}

.own-plan p {
    margin: 0;
}

.weigh {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 72px;
}

.weigh h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

.weigh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.weigh-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.parts {
    list-style: none;
    counter-reset: parts;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 72px;
}

.parts li {
    counter-increment: parts;
    break-inside: avoid;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.parts li::before {
    content: counter(parts, decimal-leading-zero);
    grid-row: span 2;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1.2px;
    line-height: 1.9;
    color: var(--priva-accent);
}

.parts strong {
    font-weight: 600;
    color: var(--ink);
}

.parts span {
    color: var(--muted);
    font-size: 15px;
}

.parties {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.parties li {
    border-bottom: 1px solid var(--line);
}

.parties a {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 190px auto;
    gap: 8px 32px;
    align-items: center;
    padding: 24px 0;
    color: inherit;
    text-decoration: none;
}

.parties a:hover .parties-go,
.parties a:focus-visible .parties-go {
    text-decoration: underline;
}

.parties-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.parties-mark .party-logo {
    height: 24px;
    max-width: 150px;
}

.parties-mark .party-logo-ictrecht,
.parties-mark .party-logo-aiaiai,
.parties-mark .party-logo-greenpt {
    height: 32px;
}

.parties-mark .assistant-logo,
.duel-mark .assistant-logo {
    width: 30px;
    height: 30px;
}

/* Een partij zonder logo als vorm: de naam in het kopletter. */
.parties-name {
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 21px;
    letter-spacing: -0.3px;
}

.duel-mark .parties-name {
    font-size: 28px;
}

.parties-text {
    color: var(--muted);
    font-size: 15px;
}

.parties-text small {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink);
}

.parties-price {
    font-size: 14px;
    color: var(--ink);
}

.parties-go {
    font-weight: 600;
    color: var(--priva-accent);
    white-space: nowrap;
}

.sources {
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.sources p {
    max-width: 78ch;
}

.sources ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

@media (max-width: 860px) {
    .duel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .duel-or {
        align-self: start;
    }

    .duel-or + .duel-side {
        text-align: left;
    }

    .duel-or + .duel-side .duel-mark {
        justify-content: flex-start;
    }

    .duel-or + .duel-side .duel-line {
        margin-left: 0;
    }

    .verdict li {
        grid-template-columns: 52px minmax(0, 1fr);
        font-size: 16.5px;
    }

    .verdict li::before {
        font-size: 32px;
    }

    .weigh {
        grid-template-columns: minmax(0, 1fr);
    }

    .parts {
        columns: 1;
    }

    .parties a {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Op een smal scherm is de tabel een stapel: het onderwerp als kopje, daaronder elke kolom met
       haar naam ervoor. */
    .ledger {
        min-width: 0;
    }

    .ledger thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ledger tr,
    .ledger tbody th,
    .ledger td {
        display: block;
        width: auto;
    }

    .ledger tbody th {
        padding: 22px 0 10px;
        border-bottom: 0;
    }

    .ledger td,
    .ledger-wide tbody th {
        padding: 14px 16px;
    }

    .ledger td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: var(--ink);
    }
}

/* --- Concept homepage (/homepage-v2, 22 oktober 2026) -------------------

   Een tweede versie van de homepage om naast de echte te bekijken: minder tekst, meer beeld. Alles
   staat onder een eigen voorvoegsel (`hv2-`), zodat de echte homepage niets merkt. Dezelfde taal als
   de rest van de site: tokens, geen eigen kleuren, geen kaarten met een icoon in een vakje en geen
   dikke gekleurde rand; de schermen zijn de echte schermafbeeldingen van de kennisbank in een
   eenvoudig venster. Alles wat beweegt staat in het blok voor beweging onderaan.

   Sinds 22 oktober 2026 is dit de homepage zelf (besluit van de eigenaar); het voorvoegsel is
   gebleven. De vorige homepage (/homepage-v1) gebruikt de klassen zonder voorvoegsel. */

.hv2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
    padding: 64px 0 56px;
}

.hv2-kicker,
.pg-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--priva-line);
    border-radius: 999px;
    background-color: var(--priva-surface);
    box-shadow: var(--priva-shadow-1);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.hv2-kicker::before,
.pg-kicker::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--priva-success);
    box-shadow: 0 0 0 4px var(--priva-badge-success);
}

.hv2-hero h1,
.pg-hero h1 {
    font-size: clamp(34px, 4.3vw, 54px);
    letter-spacing: -1.4px;
    line-height: 1.08;
    max-width: 17ch;
    margin-bottom: calc(26px - 0.18em);
}

.hv2-hero h1 span,
.pg-hero h1 span {
    display: block;
    color: var(--priva-accent);
}

.hv2-lead,
.pg-lead {
    font-size: 20px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 34ch;
    margin: 0 0 34px;
}

.hv2-primary,
.hv2-play,
.pg-primary {
    min-height: 52px;
    padding: 12px 26px;
    font-size: 17px;
}

.hv2-play svg {
    flex: 0 0 auto;
    color: var(--priva-accent);
}

.hv2-proof,
.pg-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
}

.hv2-proof li,
.pg-proof li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hv2-proof li::before,
.pg-proof li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--priva-badge-success);
    color: var(--priva-success);
    font-size: 11px;
    font-weight: 700;
}

/* Het voorbeeld: hetzelfde stuk tekst twee keer, het origineel en wat de assistent ziet, met de
   privacyreview ertussen. Het paneel is `.mock`, dus de pseudoniemen verschijnen zoals op de homepage. */
.hv2-demo {
    display: grid;
    margin: 0;
    padding: 22px;
    border-radius: calc(var(--priva-radius-panel) * 2);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
}

.hv2-doc {
    padding: 16px 18px 18px;
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-paper);
}

.hv2-doc-safe {
    border-color: var(--priva-success);
    background-color: var(--priva-success-bg);
}

.hv2-doc-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
}

.hv2-doc-head span + span {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.hv2-doc-safe .hv2-doc-head span:first-child {
    color: var(--priva-success);
}

.hv2-doc-text {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 2.05;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.hv2-doc-text mark {
    padding: 1px 4px;
    border-radius: var(--priva-radius-label);
    background-color: var(--priva-badge-warning);
    box-shadow: inset 0 -2px 0 var(--priva-warning);
    color: var(--ink);
}

.hv2-demo .tag {
    background-color: var(--priva-surface);
}

.hv2-review {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--priva-success);
}

.hv2-review::before,
.hv2-review::after {
    content: "";
    flex: 1 1 0;
    border-top: 1px dashed var(--priva-outline);
}

.hv2-review svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: 50%;
    background-color: var(--priva-badge-success);
}

.hv2-demo figcaption {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* De assistenten: een rustige rij direct onder de hero. */
section.hv2-band {
    padding: 36px 0 44px;
    text-align: center;
}

/* De ene zin die zegt wat PrivaSearch is (blog.definition), boven de assistenten. */
.hv2-definition,
.pg-definition {
    max-width: 62ch;
    margin: 0 auto 30px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
}

.hv2-band-label {
    margin: 0 0 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.hv2-assistants {
    justify-content: center;
    margin: 0;
    text-align: left;
}

/* Wat er misgaat: een getint vlak met een genummerde lijst. */
section.hv2-problem,
section.pg-tinted {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px 64px;
    margin: 20px 0;
    padding: 64px clamp(24px, 5vw, 64px);
    border: 1px solid var(--priva-line);
    border-radius: calc(var(--priva-radius-panel) * 2);
    background-color: var(--priva-soft);
}

.hv2-problem h2 {
    margin-bottom: 14px;
}

.hv2-sub,
.pg-sub {
    margin: 0;
    font-size: 18px;
    color: var(--muted);
}

.hv2-numbered,
.pg-numbered {
    counter-reset: hv2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hv2-numbered li,
.pg-numbered li {
    counter-increment: hv2;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 8px;
    padding: 20px 0;
    border-top: 1px solid var(--priva-outline);
}

.hv2-numbered li:first-child,
.pg-numbered li:first-child {
    border-top: 0;
    padding-top: 0;
}

.hv2-numbered li::before,
.pg-numbered li::before {
    content: counter(hv2, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--priva-font-heading);
    font-size: 30px;
    line-height: 1;
    color: var(--warn);
}

.hv2-numbered h3,
.pg-numbered h3 {
    margin: 2px 0 6px;
    font-size: 20px;
}

.hv2-numbered p,
.pg-numbered p {
    margin: 0;
    color: var(--muted);
}

.hv2-problem .more,
.pg-tinted .more {
    grid-column: 2;
    justify-self: start;
}

/* De stappen: tekst en scherm om en om. */
section.hv2-steps,
section.pg-steps {
    border-top: 0;
}

.hv2-steps-head,
.pg-steps-head {
    max-width: 720px;
    margin-bottom: 20px;
}

.hv2-step,
.pg-step {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    align-items: center;
    padding: 44px 0;
}

.hv2-step:nth-of-type(odd),
.hv2-step-flip,
.pg-step:nth-of-type(odd),
.pg-step-flip {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.hv2-step:nth-of-type(odd) .hv2-shot,
.hv2-step-flip .hv2-shot,
.pg-step:nth-of-type(odd) .pg-shot,
.pg-step-flip .pg-shot {
    order: -1;
}

.hv2-step-text > p,
.pg-step-text > p {
    margin: 0;
    font-size: 17px;
    color: var(--muted);
    max-width: 40ch;
}

.hv2-step-text h3,
.pg-step-text h3 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.4vw, 30px);
    letter-spacing: -0.6px;
    line-height: 1.2;
}

.hv2-step-text h2,
.pg-step-text h2 {
    margin-bottom: 16px;
}

.hv2-step-text > p.hv2-step-number,
.pg-step-text > p.pg-step-number {
    margin: 0 0 10px;
    font-family: var(--priva-font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--priva-accent);
}

.hv2-step-number::after,
.pg-step-number::after {
    content: "";
    display: inline-block;
    width: 36px;
    margin-left: 12px;
    vertical-align: middle;
    border-top: 1px solid var(--priva-accent);
}

/* Een scherm uit de app in een eenvoudig venster: een balk met drie punten erboven. */
.hv2-shot,
.pg-shot {
    position: relative;
    padding-top: 30px;
    border: 1px solid var(--priva-line);
    border-radius: calc(var(--priva-radius-panel) * 1.5);
    background-color: var(--priva-sidebar);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
    overflow: hidden;
}

.hv2-shot::before,
.pg-shot::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--priva-outline);
    box-shadow:
        14px 0 0 var(--priva-outline),
        28px 0 0 var(--priva-outline);
}

/* De zijbalk van de app valt links buiten het venster: het beeld is breder dan het venster en schuift
   naar links (de zijbalk is 248 van de 1440 pixels). Wat overblijft is ongeveer 5 bij 4. */
.hv2-shot img,
.pg-shot img {
    display: block;
    width: calc(100% / 0.83);
    max-width: none;
    height: auto;
    margin-left: calc(-100% * 0.17 / 0.83);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 0 0;
    border-top: 1px solid var(--priva-line);
    background-color: var(--priva-paper);
}

.hv2-step-text .more,
.pg-step-text .more {
    margin-top: 22px;
}

/* Twee schermen over elkaar: het activiteitenlog en het AI-beleid. */
.hv2-shot-pair,
.pg-shot-pair {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.hv2-shot-pair::before,
.pg-shot-pair::before {
    content: none;
}

.hv2-shot-pair img,
.pg-shot-pair img {
    grid-area: 1 / 1;
    max-width: 100%;
    margin-left: 0;
    aspect-ratio: 5 / 4;
    object-position: 100% 0;
    border: 1px solid var(--priva-line);
    border-radius: calc(var(--priva-radius-panel) * 1.5);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
}

.hv2-shot-pair img:first-child,
.pg-shot-pair img:first-child {
    width: 82%;
}

.hv2-shot-pair img:last-child,
.pg-shot-pair img:last-child {
    width: 66%;
    justify-self: end;
    margin-top: 38%;
}

/* De merktekens op de homepage (22 oktober 2026): de strook van de vorige homepage, direct onder de
   hero en buiten haar raster, zodat het eerste scherm van een telefoon er niet langer van wordt. */
.frameworks.hv2-marks {
    padding: 30px 0 44px;
}

/* Wat de AI wel en niet ziet: het donkere paneel van de site. */
section.hv2-sees {
    padding-top: 30px;
    border-top: 0;
}

.hv2-sees-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 32px 56px;
    padding: clamp(28px, 5vw, 56px);
    border-radius: calc(var(--priva-radius-panel) * 2);
}

.hv2-sees-head h2 {
    margin: 0;
}

.hv2-sees-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.panel-dark .hv2-sees-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--site-on-dark);
}

.panel-dark .hv2-yes li,
.panel-dark .hv2-no li {
    padding: 10px 0;
    color: var(--site-on-dark);
}

.panel-dark .hv2-yes li:hover,
.panel-dark .hv2-no li:hover {
    background-color: transparent;
}

.hv2-yes li::before,
.hv2-no li::before {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.hv2-yes li::before {
    content: "✓";
    background-color: var(--site-mint);
    color: var(--site-dark-bottom);
}

.hv2-no li::before {
    content: "✕";
    border: 1px solid var(--site-on-dark-muted);
    color: var(--site-on-dark);
}

/* Afgeschermd: vier feiten als een lijst met lijnen, het teken ervoor zonder vakje. */
.hv2-trust-head {
    max-width: 720px;
}

.hv2-facts,
.pg-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.hv2-facts li,
.pg-facts li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--priva-line);
    font-size: 17px;
    color: var(--muted);
}

.hv2-facts .icon {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--priva-accent);
}

.hv2-facts strong,
.pg-facts strong {
    color: var(--ink);
    font-weight: 600;
}

.hv2-trust .more {
    margin-top: 24px;
}

/* Voor wie: drie kolommen met een lijn erboven. */
.hv2-columns,
.pg-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.hv2-columns li,
.pg-columns li {
    padding-top: 20px;
    border-top: 1px solid var(--priva-outline);
}

.hv2-columns h3,
.pg-columns h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.hv2-columns p,
.pg-columns p {
    margin: 0;
    color: var(--muted);
}

/* De prijs: twee bedragen groot, de rest in een zin. */
section.hv2-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 56px;
    align-items: end;
}

.hv2-price h2 {
    margin: 0;
}

.hv2-price-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.hv2-price-list dt {
    font-size: 14px;
    color: var(--muted);
}

.hv2-price-list dd {
    margin: 4px 0 0;
    font-family: var(--priva-font-heading);
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.1;
    color: var(--ink);
}

.hv2-price-list dd small {
    font-family: var(--priva-font-sans);
    font-size: 14px;
    color: var(--muted);
}

/* Veelgestelde vragen op de homepage (22 oktober 2026): een redactionele lijst met lijnen, geen
   panelen. De kop links, de vragen rechts; op een smal scherm onder elkaar. Werkt zonder script: het
   is een gewoon <details>. */
section.hv2-faq,
section.pg-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px 64px;
    align-items: start;
}

.hv2-faq-head h2,
.pg-faq-head h2 {
    margin: 0;
}

.hv2-faq .faq-accordion,
.pg-faq .faq-accordion {
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.hv2-faq .faq-accordion details,
.hv2-faq .faq-accordion details:hover,
.hv2-faq .faq-accordion details[open],
.pg-faq .faq-accordion details,
.pg-faq .faq-accordion details:hover,
.pg-faq .faq-accordion details[open] {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.hv2-faq .faq-accordion summary,
.pg-faq .faq-accordion summary {
    padding: 20px 52px 20px 0;
    font-size: 17px;
    border-radius: 0;
}

.hv2-faq .faq-accordion summary::after,
.pg-faq .faq-accordion summary::after {
    right: 0;
}

.hv2-faq .faq-accordion summary:focus-visible,
.pg-faq .faq-accordion summary:focus-visible {
    outline: 2px solid var(--priva-accent);
    outline-offset: 2px;
}

.hv2-faq .faq-accordion details p,
.pg-faq .faq-accordion details p {
    padding: 0 52px 22px 0;
    font-size: 16px;
    line-height: 1.6;
}

.hv2-price-note {
    grid-column: 2;
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .hv2-hero,
    section.hv2-problem,
    .hv2-step,
    .hv2-sees-panel,
    section.hv2-price,
    section.hv2-faq,
    section.pg-tinted,
    .pg-step,
    section.pg-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv2-hero {
        gap: 44px;
        padding-top: 40px;
    }

    .hv2-step,
    .pg-step {
        gap: 28px;
        padding: 32px 0;
    }

    .hv2-step:nth-of-type(odd),
    .hv2-step-flip,
    .pg-step:nth-of-type(odd),
    .pg-step-flip {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv2-step:nth-of-type(odd) .hv2-shot,
    .hv2-step-flip .hv2-shot,
    .pg-step:nth-of-type(odd) .pg-shot,
    .pg-step-flip .pg-shot {
        order: 0;
    }

    .hv2-problem .more,
    .hv2-price-note,
    .pg-tinted .more {
        grid-column: auto;
    }

    .hv2-facts,
    .hv2-columns,
    .pg-facts,
    .pg-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv2-columns,
    .pg-columns {
        gap: 28px;
    }
}

@media (max-width: 560px) {
    /* Het eerste scherm van een telefoon (22 oktober 2026, verzoek van de eigenaar): kop, inleiding,
       de knoppen én de bovenkant van het voorbeeld in één beeld. De kicker is daar een regel tekst
       zonder pil, de kop kleiner, en de drie vinkjes schuiven onder het voorbeeld: de inhoud van de
       hero wordt dan één kolom (`display: contents`), zodat de volgorde in CSS kan. */
    .hv2-hero {
        gap: 0;
        padding: 22px 0 40px;
    }

    .hv2-hero-copy {
        display: contents;
    }

    .hv2-kicker,
    .pg-kicker {
        display: block;
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        font-size: 12.5px;
        color: var(--muted);
    }

    .hv2-kicker::before,
    .pg-kicker::before {
        display: none;
    }

    .hv2-hero h1,
    .pg-hero h1 {
        max-width: none;
        font-size: 28px;
        letter-spacing: -0.8px;
        margin-bottom: calc(14px - 0.18em);
    }

    .hv2-lead,
    .pg-lead {
        max-width: none;
        font-size: 16.5px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hv2-hero .hero-actions,
    .pg-hero .hero-actions {
        gap: 10px;
    }

    .hv2-hero .hero-actions .button,
    .pg-hero .hero-actions .button {
        width: 100%;
        min-height: 48px;
        padding: 10px 20px;
        font-size: 16px;
    }

    .hv2-demo {
        order: 1;
        margin-top: 24px;
        padding: 14px;
    }

    .hv2-proof,
    .pg-proof {
        order: 2;
        margin-top: 22px;
    }

    .hv2-doc {
        padding: 12px 14px 14px;
    }

    .hv2-doc-text {
        font-size: 12px;
        line-height: 1.9;
    }

    .hv2-sees-columns,
    .hv2-price-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- De kernpagina's in het ontwerp van de homepage (23 oktober 2026) -----

   Verzoek van de eigenaar: "De upgrade die de homepage heeft gekregen graag doortrekken op de andere
   algemene marketingpagina's." De acht kernpagina's (/werking, /prijzen, /eu-hosting, /avg-ai-act,
   /risicos, /ai-chatbots-en-avg, /overtuig-je-werkgever en /over-ons, in elke taal) gebruiken de
   klassen met het voorvoegsel `pg-`. Die delen hun regels met de homepage: elke regel hierboven met
   een `hv2-`-klasse noemt haar `pg-`-tweeling ernaast, zodat een waarde op één plek staat. Wat hier
   volgt is alleen wat een kernpagina anders doet: een hero van één kolom zonder voorbeeld, een getint
   vlak met een kop links en de inhoud rechts, de nummers in de accentkleur.

   pg-hero        de kop van de pagina: pg-kicker, h1 (een <span> erin is de tweede regel in het
                  accent), pg-lead, .hero-actions met .pg-primary, eventueel pg-proof
   pg-steps       genummerde stappen met een echt scherm (pg-step, pg-step-text, pg-step-number, pg-shot)
   pg-tinted      een getint vlak: pg-tinted-head links, de inhoud rechts (pg-numbered, .check-list)
   pg-numbered    een genummerde lijst met lijnen; .warn voor wat misgaat
   pg-faq         de vragen: pg-faq-head links, .faq-accordion of dl.faq rechts */

.pg-hero {
    max-width: 920px;
    padding: 56px 0 40px;
}

.pg-hero h1 {
    max-width: 22ch;
}

.pg-hero .pg-lead {
    max-width: 44ch;
    margin-bottom: 18px;
}

.pg-hero .pg-lead + .hero-actions,
.pg-hero .pg-lead + .pg-proof {
    margin-top: 32px;
}

.pg-hero + section {
    border-top: 0;
    padding-top: 32px;
}

/* /werking: op mobiel staat de video boven de "Plan een demo"-knop. */
.werking-intro {
    display: contents;
}

.pg-tinted-head {
    min-width: 0;
}

.pg-tinted-head .lead {
    margin: 14px 0 0;
    font-size: 17px;
}

section.pg-tinted > :not(.pg-tinted-head) {
    min-width: 0;
}

.pg-tinted .check-list {
    margin: 0;
}

.pg-numbered li::before {
    grid-column: 1;
    grid-row: 1 / span 4;
    color: var(--priva-accent);
}

/* Een punt mag meer dan een kop en een alinea hebben (een tweede alinea, "Wat je eraan doet"): alles
   staat in de kolom naast het nummer. */
.pg-numbered li > * {
    grid-column: 2;
}

.pg-numbered p + p {
    margin-top: 10px;
}

/* Een kader of een alinea onder de inhoud van een getint vlak, in de kolom van de inhoud. */
.pg-tinted > .callout {
    grid-column: 2;
    margin: 4px 0 0;
}

.pg-note {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
}

.pg-numbered.warn li::before {
    color: var(--warn);
}

.pg-numbered .remedy {
    margin-top: 10px;
}

.pg-faq-head .lead {
    margin: 14px 0 0;
    font-size: 17px;
}

.pg-faq .check-list {
    margin: 22px 0 0;
}

.pg-faq dl.faq {
    border-top: 0;
}

.pg-faq dl.faq dt:first-child {
    padding-top: 0;
}

@media (max-width: 900px) {
    .pg-tinted > .callout,
    .pg-note {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    /* De kop en de inleiding blijven bovenaan; daarna de video, dan de knop en de drie punten. */
    .werking-intro {
        display: flex;
        flex-direction: column;
        padding-top: 22px;
    }

    .werking-intro > .pg-hero {
        display: contents;
    }

    .werking-intro > section {
        order: 1;
        padding: 4px 0 0;
    }

    .werking-intro > section .video {
        margin-bottom: 0;
    }

    .werking-intro .hero-actions {
        order: 2;
    }

    .werking-intro .pg-proof {
        order: 3;
        margin-bottom: 28px;
    }

    .pg-hero {
        padding: 22px 0 28px;
    }

    .pg-hero .pg-lead {
        margin-bottom: 14px;
    }

    .pg-hero .pg-lead + .hero-actions,
    .pg-hero .pg-lead + .pg-proof {
        margin-top: 22px;
    }

    .pg-hero .pg-proof {
        margin-top: 22px;
    }

    section.pg-tinted {
        padding: 36px 20px;
    }

    .pg-numbered li {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .pg-numbered li::before {
        font-size: 24px;
    }
}

/* --- Concept homepage v3 (/homepage-v3, 22 oktober 2026): het product eerst ---

   Een korte kop in het midden en daaronder het echte scherm van de privacyreview als held, met twee
   uitsneden van andere schermen eroverheen. Een schermafbeelding van de kennisbank is 1440 pixels
   breed met links de zijbalk; een uitsnede (`hv3-crop-*`) is een vak met een vaste verhouding waarin
   de afbeelding groter en verschoven staat, zodat alleen het gekozen stuk zichtbaar is. De maten zijn
   die van het stuk in pixels van het origineel: breedte = 1440 / w, links = -x / w, boven = -y / h.
   Alles staat onder `hv3-`; tokens, geen eigen kleuren, geen kaarten met een icoon. */

.hv3-hero {
    max-width: 940px;
    margin: 0 auto;
    padding: 52px 0 40px;
    text-align: center;
}

.hv3-kicker {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.hv3-hero h1 {
    max-width: none;
    margin: 0 auto calc(22px - 0.18em);
    font-size: clamp(32px, 4.6vw, 56px);
    letter-spacing: -1.6px;
    line-height: 1.05;
}

.hv3-hero h1 span {
    display: block;
    color: var(--priva-accent);
}

.hv3-lead {
    max-width: 46ch;
    margin: 0 auto 30px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--muted);
}

.hv3-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hv3-primary,
.hv3-secondary {
    min-height: 50px;
    padding: 11px 28px;
    font-size: 17px;
}

/* De held: het venster met de privacyreview, en twee uitsneden die eroverheen liggen. */
.hv3-stage {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.hv3-shots {
    position: relative;
}

.hv3-window,
.hv3-float,
.hv3-thumb {
    overflow: hidden;
    border: 1px solid var(--priva-line);
    background-color: var(--priva-surface);
}

.hv3-window {
    border-radius: calc(var(--priva-radius-panel) * 2);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
}

.hv3-window-bar {
    display: flex;
    gap: 7px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--priva-line);
    background-color: var(--priva-paper);
}

.hv3-window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--priva-line);
}

.hv3-crop {
    position: relative;
    overflow: hidden;
}

.hv3-crop img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
}

/* review.png zonder zijbalk, vanaf de melding: het origineel en de detecties (x 262-1440, y 370-1040). */
.hv3-crop-review {
    aspect-ratio: 1178 / 670;
}

.hv3-crop-review img {
    width: 122.2%;
    left: -22.2%;
    top: -55.2%;
}

.hv3-float {
    position: absolute;
    border-radius: calc(var(--priva-radius-panel) * 1.5);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
}

/* zoeken-resultaten.png, de vraag: x 310-1220, y 80-215. */
.hv3-float-search {
    left: -36px;
    bottom: -32px;
    width: 46%;
}

.hv3-crop-search {
    aspect-ratio: 910 / 135;
}

.hv3-crop-search img {
    width: 158.2%;
    left: -34.1%;
    top: -59.3%;
}

/* document-vrijgegeven.png, het begin van de vrijgegeven tekst: x 310-1100, y 556-766. */
.hv3-float-released {
    right: -36px;
    top: -36px;
    width: 44%;
}

.hv3-crop-released {
    aspect-ratio: 790 / 210;
}

.hv3-crop-released img {
    width: 182.3%;
    left: -39.2%;
    top: -264.8%;
}

.hv3-stage figcaption {
    max-width: 56ch;
    margin: 52px auto 0;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    color: var(--muted);
}

/* De assistenten: één rustige regel in het midden. */
section.hv3-assistants {
    padding: 44px 0;
    border-top: 0;
    text-align: center;
}

.hv3-assistants-label {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--muted);
}

.hv3-assistants .assistants {
    justify-content: center;
    margin: 0;
    text-align: left;
}

/* Drie stappen: de kop blijft naast de stappen staan terwijl je scrolt. */
section.hv3-steps {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}

.hv3-steps-head {
    position: sticky;
    top: 104px;
}

.hv3-steps-head h2 {
    margin-bottom: 14px;
}

.hv3-steps-head p:not(.eyebrow) {
    margin: 0 0 18px;
    font-size: 17px;
    color: var(--muted);
}

.hv3-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: hv3-step;
}

.hv3-step-list li {
    counter-increment: hv3-step;
    padding: 0 0 48px;
}

.hv3-step-list li + li {
    padding-top: 40px;
    border-top: 1px solid var(--priva-line);
}

.hv3-step-text {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 8px;
}

.hv3-step-text::before {
    content: counter(hv3-step, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--priva-font-heading);
    font-size: 26px;
    line-height: 1.1;
    color: var(--priva-accent);
}

.hv3-step-text h3 {
    margin: 0 0 6px;
    font-size: 22px;
}

.hv3-step-text p {
    margin: 0;
    color: var(--muted);
}

.hv3-thumb {
    margin: 22px 0 0 60px;
    border-radius: var(--priva-radius-panel);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.hv3-crop-folders,
.hv3-crop-approve,
.hv3-crop-results {
    aspect-ratio: 1096 / 490;
}

.hv3-crop-folders img,
.hv3-crop-approve img,
.hv3-crop-results img {
    width: 131.4%;
    left: -27%;
}

/* sharepoint-import-mappen.png y 380-870, review-goedkeuren.png y 96-586, zoeken-resultaten.png y 60-550. */
.hv3-crop-folders img {
    top: -77.6%;
}

.hv3-crop-approve img {
    top: -19.6%;
}

.hv3-crop-results img {
    top: -12.2%;
}

/* De donkere band over de hele breedte. Het vlak is een randafbeelding die buiten het vak uitsteekt
   (border-image-outset): dat tekent tot de rand van het venster zonder dat de pagina breder wordt. */
section.hv3-band {
    margin: 24px 0;
    padding: 88px 0;
    border-top: 0;
    border-image: linear-gradient(165deg, var(--site-dark-top) 0%, var(--dark) 55%, var(--site-dark-bottom) 100%)
        fill 0 / 0 / 0 100vmax;
    color: var(--site-on-dark);
}

.hv3-band :focus-visible {
    outline-color: var(--site-mint);
}

.hv3-band-head {
    max-width: 640px;
    margin-bottom: 40px;
}

.hv3-band-label {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--site-mint);
}

.hv3-band h2 {
    margin: 0;
    color: var(--site-on-dark);
}

.hv3-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hv3-side {
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--site-on-dark) 22%, transparent);
    border-radius: calc(var(--priva-radius-panel) * 1.5);
}

.hv3-side-ai {
    border-color: var(--site-mint-deep);
    background-color: color-mix(in srgb, var(--site-mint) 8%, transparent);
}

.hv3-side-label {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--site-on-dark-muted);
}

.hv3-side-ai .hv3-side-label {
    color: var(--site-mint);
}

.hv3-sample {
    margin: 0 0 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.hv3-sample mark {
    padding: 1px 4px;
    border-radius: var(--priva-radius-label);
    background-color: var(--priva-badge-warning);
    color: var(--ink);
}

.hv3-sample span {
    padding: 1px 6px;
    border: 1px solid var(--site-mint);
    border-radius: var(--priva-radius-label);
    color: var(--site-mint);
}

.hv3-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hv3-side li {
    padding: 11px 0;
    border-top: 1px solid color-mix(in srgb, var(--site-on-dark) 16%, transparent);
    color: var(--site-on-dark);
}

/* Afgeschermd: vier feiten in twee kolommen met lijnen. */
section.hv3-calm {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 24px 64px;
    border-top: 0;
}

.hv3-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    margin: 0;
}

.hv3-facts div {
    padding: 18px 0;
    border-top: 1px solid var(--priva-line);
}

.hv3-facts dt {
    font-weight: 600;
    color: var(--ink);
}

.hv3-facts dd {
    margin: 4px 0 0;
    color: var(--muted);
}

/* De prijs: één regel in het midden. */
section.hv3-price {
    text-align: center;
}

.hv3-price-title {
    max-width: 24ch;
    margin: 0 auto 26px;
    font-family: var(--priva-font-heading);
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.2;
    color: var(--ink);
}

.hv3-price-tiers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 56px;
    margin: 0 0 18px;
    color: var(--muted);
}

.hv3-price-tiers strong {
    display: block;
    font-family: var(--priva-font-heading);
    font-size: 42px;
    font-weight: var(--priva-heading-weight);
    line-height: 1.15;
    color: var(--ink);
}

.hv3-price-note {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

@media (max-width: 1180px) {
    .hv3-float-search {
        left: -12px;
    }

    .hv3-float-released {
        right: -12px;
    }
}

@media (max-width: 900px) {
    section.hv3-steps,
    section.hv3-calm,
    .hv3-compare {
        grid-template-columns: minmax(0, 1fr);
    }

    section.hv3-steps {
        gap: 32px;
    }

    .hv3-steps-head {
        position: static;
    }
}

/* Het eerste scherm van een telefoon: kop, één zin, de twee knoppen naast elkaar, en daaronder een
   ingezoomde uitsnede van de privacyreview (het origineel met de markeringen), zonder de twee
   zwevende uitsneden: die zijn op deze breedte te klein om te lezen. */
@media (max-width: 700px) {
    .hv3-hero {
        padding: 22px 0 22px;
    }

    .hv3-kicker {
        margin-bottom: 12px;
        font-size: 12.5px;
    }

    .hv3-hero h1 {
        max-width: none;
        font-size: 28px;
        letter-spacing: -0.7px;
        margin-bottom: calc(14px - 0.18em);
    }

    .hv3-lead {
        font-size: 16.5px;
        margin-bottom: 20px;
    }

    .hv3-actions {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hv3-actions .button {
        flex: 1 1 0;
        min-height: 48px;
        padding: 10px 12px;
        font-size: 15.5px;
    }

    .hv3-window {
        border-radius: calc(var(--priva-radius-panel) * 1.5);
    }

    .hv3-window-bar {
        padding: 9px 12px;
    }

    .hv3-window-bar span {
        width: 8px;
        height: 8px;
    }

    /* review.png ingezoomd op de partijen met hun markeringen: x 360-910, y 610-990. */
    .hv3-crop-review {
        aspect-ratio: 550 / 380;
    }

    .hv3-crop-review img {
        width: 261.8%;
        left: -65.5%;
        top: -160.5%;
    }

    .hv3-float {
        display: none;
    }

    .hv3-stage figcaption {
        margin-top: 16px;
        font-size: 13px;
    }

    .hv3-step-text {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv3-step-text::before {
        grid-row: auto;
        margin-bottom: 6px;
        font-size: 18px;
    }

    .hv3-thumb {
        margin-left: 0;
    }

    section.hv3-band {
        padding: 64px 0;
    }

    .hv3-side {
        padding: 22px 20px;
    }

    .hv3-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Concept homepage v4 (/homepage-v4, 22 oktober 2026): het verhaal ---

   Een pagina als een tijdschriftartikel: een grote kop met een kopregel, één zin die zichtbaar
   verandert, en vier scènes in een smalle leeskolom. Uitspraken van PrivaSearch en de schermen staan
   breder dan de kolom; een getinte plaat loopt tot de rand van het venster met een randafbeelding
   die buiten het vak uitsteekt (border-image-outset), zodat de pagina niet breder wordt. Alles onder
   `hv4-`; tokens, geen eigen kleuren. */

.hv4-opener {
    padding: 36px 0 72px;
}

.hv4-dateline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin: 0 0 32px;
    padding: 10px 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--priva-line);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.hv4-opener h1 {
    max-width: 24ch;
    margin: 0 0 calc(40px - 0.18em);
    font-size: clamp(36px, 5.6vw, 74px);
    letter-spacing: -2px;
    line-height: 1.02;
}

.hv4-opener-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    padding-top: 32px;
    border-top: 1px solid var(--priva-line);
}

.hv4-deck {
    max-width: 34ch;
    margin: 0 0 28px;
    font-size: 21px;
    line-height: 1.55;
    color: var(--muted);
}

.hv4-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.hv4-primary {
    min-height: 50px;
    padding: 11px 28px;
    font-size: 17px;
}

.hv4-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--priva-target);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--priva-outline);
    text-underline-offset: 5px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.hv4-link:hover {
    text-decoration-color: var(--ink);
}

/* De zin die verandert: de naam doorgestreept, het pseudoniem erachter. */
.hv4-line {
    margin: 0;
}

.hv4-line p {
    margin: 0;
    font-family: var(--priva-font-heading);
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.5;
    color: var(--ink);
}

.hv4-line del,
.hv4-was {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--priva-danger);
    text-decoration-thickness: 2px;
}

.hv4-line ins,
.hv4-is {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid var(--priva-accent);
    border-radius: var(--priva-radius-label);
    background-color: var(--priva-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.62em;
    line-height: 1.8;
    vertical-align: 0.15em;
    color: var(--priva-accent);
    text-decoration: none;
    white-space: nowrap;
}

.hv4-line figcaption {
    margin-top: 14px;
    font-size: 14px;
    color: var(--muted);
}

/* De leeskolom. */
.hv4-story {
    max-width: 40rem;
    margin: 0 auto;
}

section.hv4-scene {
    padding: 64px 0 56px;
    border-top: 0;
}

.hv4-scene-mark {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.hv4-scene-mark span {
    margin-right: 10px;
    font-family: var(--priva-font-heading);
    font-size: 16px;
    letter-spacing: 0;
    color: var(--priva-accent);
}

.hv4-scene h2 {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(30px, 3.8vw, 44px);
}

.hv4-scene p:not(.hv4-scene-mark) {
    margin: 0 0 20px;
    font-size: 19px;
    line-height: 1.75;
    color: var(--ink);
}

.hv4-drop::first-letter {
    float: left;
    margin: 0.08em 0.1em 0 0;
    font-family: var(--priva-font-heading);
    font-size: 4.1em;
    line-height: 0.82;
    color: var(--priva-accent);
}

.hv4-scene p.hv4-aside {
    padding-left: 18px;
    border-left: 1px solid var(--priva-outline);
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}

/* Breder dan de kolom: de uitspraken, het overzicht van pseudoniemen en de platen. */
.hv4-pull,
.hv4-spread,
.hv4-plate {
    width: min(56rem, 100vw - 56px);
    margin-right: 0;
    margin-left: calc(50% - min(28rem, 50vw - 28px));
}

.hv4-pull {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 48px 0;
    border-top: 1px solid var(--priva-line);
    border-bottom: 1px solid var(--priva-line);
    text-align: center;
}

.hv4-pull p {
    margin: 0 auto;
    max-width: 22ch;
    font-family: var(--priva-font-heading);
    font-size: clamp(28px, 4.2vw, 50px);
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--priva-accent);
}

.hv4-pull blockquote {
    margin: 0;
}

.hv4-pull figcaption {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.hv4-spread {
    margin-top: 8px;
    margin-bottom: 32px;
}

.hv4-spread ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hv4-spread li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--priva-line);
}

.hv4-spread li:last-child {
    border-bottom: 1px solid var(--priva-line);
}

.hv4-was {
    font-family: var(--priva-font-heading);
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.2;
    text-align: right;
}

.hv4-is {
    justify-self: start;
    font-size: clamp(14px, 1.5vw, 18px);
    vertical-align: baseline;
}

.hv4-spread figcaption {
    max-width: 52ch;
    margin: 22px auto 0;
    font-size: 15px;
    text-align: center;
    color: var(--muted);
}

.hv4-plate {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 48px 0;
    border-image: linear-gradient(var(--priva-soft), var(--priva-soft)) fill 0 / 0 / 0 100vmax;
}

.hv4-plate-shot {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1178 / 760;
    border: 1px solid var(--priva-line);
    border-radius: calc(var(--priva-radius-panel) * 1.5);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-3);
}

/* Een scherm zonder zijbalk en zonder de balk erboven: x 262-1440, y 56-816. */
.hv4-plate-shot img {
    position: absolute;
    display: block;
    width: 122.2%;
    max-width: none;
    height: auto;
    left: -22.2%;
    top: -7.4%;
}

/* review-goedkeuren.png begint lager, onder een half afgesneden regel: y 96-856. */
.hv4-plate-review img {
    top: -12.6%;
}

.hv4-plate figcaption {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
    color: var(--muted);
}

section.hv4-coda {
    margin-top: 32px;
    border-top: 2px solid var(--ink);
}

@media (max-width: 860px) {
    .hv4-opener-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* Het eerste scherm van een telefoon: de kopregel, de kop, één zin, de knop met de link ernaast, en
   de zin die verandert als het beeld van wat PrivaSearch doet. */
@media (max-width: 700px) {
    .hv4-opener {
        padding: 18px 0 40px;
    }

    .hv4-dateline {
        margin-bottom: 20px;
        padding: 8px 0;
        font-size: 11px;
        letter-spacing: 1.6px;
    }

    .hv4-opener h1 {
        font-size: 35px;
        letter-spacing: -1px;
        line-height: 1.06;
        margin-bottom: calc(18px - 0.18em);
    }

    .hv4-opener-body {
        gap: 22px;
        padding-top: 0;
        border-top: 0;
    }

    .hv4-deck {
        margin-bottom: 18px;
        font-size: 17px;
        line-height: 1.5;
    }

    .hv4-actions {
        flex-wrap: nowrap;
        gap: 18px;
    }

    .hv4-primary {
        min-height: 48px;
        padding: 10px 20px;
        font-size: 16px;
    }

    .hv4-link {
        font-size: 16px;
    }

    .hv4-line {
        padding: 18px 0 0;
        border-top: 1px solid var(--priva-line);
    }

    .hv4-line p {
        font-size: 22px;
        line-height: 1.55;
    }

    .hv4-line figcaption {
        margin-top: 8px;
        font-size: 13px;
    }

    section.hv4-scene {
        padding: 48px 0 40px;
    }

    .hv4-scene p:not(.hv4-scene-mark) {
        font-size: 18px;
    }

    .hv4-pull,
    .hv4-spread,
    .hv4-plate {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .hv4-pull {
        padding: 36px 0;
    }

    .hv4-spread li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 16px 0;
    }

    .hv4-was {
        text-align: left;
    }

    .hv4-plate {
        padding: 28px 0;
    }
}

/* --- Concept homepage v5 (/homepage-v5, 22 oktober 2026): kloek en warm ---

   Vlakken over de hele breedte in de kleuren van de huisstijl: diep groen, warm zand en licht mint.
   Een vlak is een randafbeelding die buiten het vak uitsteekt (border-image-outset): ze tekent tot
   de rand van het venster zonder dat de pagina breder wordt. Korte uitspraken in groot, getallen in
   de kopletter, en een tekening uit eenvoudige vormen die hier haar kleuren krijgt. Alles onder
   `hv5-`; tokens en de eigen tinten van de site, geen andere kleuren. */

.hv5-opener,
.hv5-block {
    position: relative;
    margin: 0;
    border-top: 0;
}

.hv5-dark {
    border-image: linear-gradient(165deg, var(--site-dark-top) 0%, var(--dark) 55%, var(--site-dark-bottom) 100%)
        fill 0 / 0 / 0 100vmax;
    color: var(--site-on-dark);
}

.hv5-dark :focus-visible {
    outline-color: var(--site-mint);
}

.hv5-sand {
    border-image: linear-gradient(var(--priva-mesh-warm), var(--priva-mesh-warm)) fill 0 / 0 / 0 100vmax;
}

.hv5-mint {
    border-image: linear-gradient(var(--priva-mesh-mint), var(--priva-mesh-mint)) fill 0 / 0 / 0 100vmax;
}

/* De opening: het donkere vlak met de kop, de knoppen en de tekening. */
.hv5-opener {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    align-items: center;
    padding: 72px 0 80px;
}

.hv5-label {
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--site-mint);
}

.hv5-opener h1 {
    max-width: none;
    margin: 0 0 calc(24px - 0.18em);
    background: none;
    color: var(--site-on-dark);
    font-size: clamp(40px, 5.3vw, 70px);
    letter-spacing: -2px;
    line-height: 1.02;
}

.hv5-opener h1 span {
    display: block;
    color: var(--site-mint);
}

.hv5-lead {
    max-width: 32ch;
    margin: 0 0 32px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--site-on-dark-muted);
}

.hv5-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hv5-actions .button {
    min-height: 52px;
    padding: 12px 28px;
    font-size: 17px;
    box-shadow: none;
}

.hv5-primary {
    border-color: var(--site-mint);
    background-color: var(--site-mint);
    color: var(--site-dark-bottom);
}

.hv5-primary:hover {
    border-color: var(--site-on-dark);
    background-color: var(--site-on-dark);
}

.hv5-secondary {
    border-color: var(--site-on-dark-muted);
    background-color: transparent;
    color: var(--site-on-dark);
}

.hv5-secondary:hover {
    border-color: var(--site-on-dark);
    background-color: color-mix(in srgb, var(--site-on-dark) 10%, transparent);
}

/* De tekening: twee documenten en een vinkje ertussen. */
.hv5-art {
    margin: 0;
}

.hv5-art svg {
    display: block;
    width: 100%;
    height: auto;
}

.hv5-doc {
    fill: var(--priva-surface);
}

.hv5-bar {
    fill: var(--priva-line);
}

.hv5-mark {
    fill: var(--priva-badge-warning);
}

.hv5-tag {
    fill: var(--priva-accent);
}

.hv5-badge {
    fill: var(--site-mint);
}

.hv5-tick {
    fill: none;
    stroke: var(--site-dark-bottom);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv5-flow {
    fill: none;
    stroke: var(--site-on-dark-muted);
    stroke-width: 2;
    stroke-dasharray: 3 5;
}

.hv5-art figcaption {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--site-on-dark-muted);
}

.hv5-art figcaption span:nth-child(2) {
    text-align: center;
}

.hv5-art figcaption span:last-child {
    text-align: right;
}

/* Een vlak: een kop in groot en daaronder de inhoud. */
section.hv5-block {
    padding: 96px 0;
}

.hv5-block h2 {
    max-width: 16ch;
    margin-bottom: 44px;
    font-size: clamp(34px, 5.2vw, 66px);
    letter-spacing: -1.6px;
    line-height: 1.05;
}

.hv5-dark h2 {
    color: var(--site-on-dark);
}

/* Zand: drie uitspraken, genummerd in de kopletter. */
.hv5-statements,
.hv5-steps {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.hv5-statements {
    counter-reset: hv5-statement;
}

.hv5-statements li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 26px 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    counter-increment: hv5-statement;
}

.hv5-statements li::before {
    content: counter(hv5-statement, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--priva-font-heading);
    font-size: 28px;
    line-height: 1.2;
    color: var(--priva-warning);
}

.hv5-statements strong,
.hv5-steps strong {
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    color: var(--ink);
}

.hv5-statements strong {
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.15;
}

.hv5-statements span,
.hv5-steps span {
    font-size: 17px;
    color: var(--muted);
}

/* Mint: vier stappen naast elkaar, elk met een lijn erboven. */
.hv5-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    counter-reset: hv5-step;
}

.hv5-steps li {
    display: grid;
    align-content: start;
    gap: 10px;
    padding-top: 22px;
    border-top: 2px solid var(--ink);
    counter-increment: hv5-step;
}

.hv5-steps li::before {
    content: counter(hv5-step);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 1.4px;
    color: var(--priva-accent);
}

.hv5-steps strong {
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.1;
}

/* Donker: vier getallen. */
.hv5-figures dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin: 0 0 36px;
}

.hv5-figures dl div {
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--site-on-dark) 26%, transparent);
}

.hv5-figures dt {
    font-family: var(--priva-font-heading);
    font-size: clamp(56px, 7vw, 96px);
    line-height: 1;
    letter-spacing: -2px;
    white-space: nowrap;
    color: var(--site-mint);
}

.hv5-figures dd {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--site-on-dark-muted);
}

.hv5-dark-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--priva-target);
    font-weight: 600;
    color: var(--site-on-dark);
    text-decoration: underline;
    text-decoration-color: var(--site-mint);
    text-underline-offset: 5px;
}

/* De vragen. */
.hv5-faq .faq-accordion {
    max-width: 820px;
}

.hv5-faq details p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--muted);
}

@media (max-width: 960px) {
    .hv5-opener {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .hv5-art {
        max-width: 520px;
    }

    .hv5-steps,
    .hv5-figures dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Het eerste scherm van een telefoon: de kop in groot, één zin, de twee knoppen naast elkaar en de
   tekening eronder, alles binnen het donkere vlak. */
@media (max-width: 700px) {
    .hv5-opener {
        gap: 26px;
        padding: 30px 0 40px;
    }

    .hv5-label {
        margin-bottom: 14px;
        font-size: 11px;
    }

    .hv5-opener h1 {
        max-width: none;
        font-size: 40px;
        letter-spacing: -1.2px;
        line-height: 1.04;
        margin-bottom: calc(16px - 0.18em);
    }

    .hv5-lead {
        margin-bottom: 22px;
        font-size: 17px;
    }

    .hv5-actions {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hv5-actions .button {
        flex: 1 1 0;
        min-height: 48px;
        padding: 10px 12px;
        font-size: 15.5px;
    }

    .hv5-art figcaption {
        font-size: 10.5px;
        letter-spacing: 0.8px;
    }

    section.hv5-block {
        padding: 64px 0;
    }

    .hv5-block h2 {
        margin-bottom: 28px;
    }

    .hv5-statements li {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 20px 0;
    }

    .hv5-statements li::before {
        font-size: 22px;
    }

    .hv5-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .hv5-figures dl {
        gap: 28px 20px;
    }

    .hv5-figures dt {
        font-size: 56px;
    }

    .hv5-figures dl div:last-child {
        grid-column: 1 / -1;
    }

    .hv5-faq details p {
        padding: 0 18px 18px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Concepten v4 en v5: het pseudoniem verschijnt na de doorgestreepte naam, en in de tekening van
       v5 worden de gemarkeerde regels pseudoniemen nadat het vinkje er staat. Eén keer. */
    .js .hv4-line ins,
    .js .hv4-line del {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out),
            text-decoration-color var(--priva-duration-slow) var(--priva-ease-out);
        transition-delay: calc(var(--site-illustration) * 0.5);
    }

    .js .hv4-line ins {
        transition-delay: var(--site-illustration);
    }

    .js .hv4-line:not(.is-in) del {
        text-decoration-color: transparent;
    }

    .js .hv4-line:not(.is-in) ins {
        opacity: 0;
        transform: translateY(-0.3em);
    }

    .js .hv5-tag {
        transform-box: fill-box;
        transform-origin: left center;
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--site-illustration) var(--priva-ease-out);
        transition-delay: calc(var(--site-illustration) * 0.6);
    }

    .js .hv5-art:not(.is-in) .hv5-tag {
        opacity: 0;
        transform: scaleX(0.3);
    }

    /* Concept homepage: de privacyreview verschijnt tussen het origineel en de vrijgegeven versie, en
       een scherm schuift omhoog als zijn stap in beeld komt. Eén keer, niets herhaalt zich. */
    .js .hv2-review {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out);
        transition-delay: calc(var(--site-illustration) * 0.3);
    }

    .js .hv2-demo:not(.is-in) .hv2-review {
        opacity: 0;
        transform: scale(0.94);
    }

    .js .hv2-step .hv2-shot,
    .js .pg-step .pg-shot {
        transition: transform var(--site-illustration) var(--priva-ease-out);
    }

    .js .hv2-step[data-reveal]:not(.is-in) .hv2-shot,
    .js .pg-step[data-reveal]:not(.is-in) .pg-shot {
        transform: translateY(24px);
    }

    /* De wissel naar de merkkleur vloeit over: de rustige curve, want met de steile is hij in een
       paar beelden voorbij en oogt hij als een sprong. */
    .logo-swap svg {
        transition: opacity var(--priva-duration-slow) var(--priva-ease-icon);
    }

    html {
        scroll-behavior: smooth;
    }

    /* Bediening: een knop en een kaart komen een pixel omhoog, een knop zakt bij het indrukken. */
    .button:hover,
    .verder a:hover {
        translate: 0 -1px;
    }

    .button:active {
        translate: 0 1px;
        transition-duration: var(--priva-duration-fast);
    }

    :is(li, .pillar, .card):hover > .icon-tile {
        translate: 0 -2px;
    }

    .more:hover::after,
    .post-rows li:hover .post-arrow {
        translate: 4px 0;
    }

    .inline-link,
    .footer-note a {
        transition:
            background-size var(--priva-duration) var(--priva-ease-out),
            text-decoration-color var(--priva-duration) var(--priva-ease-out);
    }

    .brand-logo {
        transition: rotate var(--priva-duration-slow) var(--priva-ease-out);
    }

    .brand:hover .brand-logo {
        rotate: -90deg;
    }

    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        transition:
            transform var(--priva-duration) var(--priva-ease-out),
            background-color var(--priva-duration-fast) var(--priva-ease-out);
    }

    /* Het menu van een smal scherm zakt in beeld. */
    @media (max-width: 1060px) {
        .js .topbar nav {
            translate: 0 -8px;
            transition:
                opacity var(--priva-duration) var(--priva-ease-out),
                translate var(--priva-duration) var(--priva-ease-out),
                visibility var(--priva-duration);
        }

        .js .topbar.nav-open nav {
            translate: 0 0;
        }
    }

    /* Wat in beeld komt: een blok met data-reveal, zodra het script het `is-in` geeft. */
    .js [data-reveal] {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js [data-reveal]:not(.is-in) {
        opacity: 0;
        transform: translateY(8px);
    }

    /* Een antwoord dat openklapt. */
    .faq-accordion details[open] > p {
        animation: site-drop var(--priva-duration-slow) var(--priva-ease-out) backwards;
    }

    .faq-accordion summary::after {
        transition: rotate var(--priva-duration) var(--priva-ease-out);
    }

    .faq-accordion details[open] summary::after {
        rotate: 180deg;
    }

    /* Illustratie: de lijn van de rail tekent zich als de sectie in beeld komt. */
    .rail::before {
        transition: transform var(--site-illustration) var(--priva-ease-out);
    }

    .js section[data-reveal]:not(.is-in) .rail::before {
        transform: scaleX(0);
    }

    /* Illustratie: de pseudonimisering speelt zich af zodra het voorbeeld in beeld komt, regel voor
       regel. De kleur van het origineel verloopt, het pseudoniem verschijnt ernaast. */
    .js .mock .del {
        transition:
            color var(--priva-duration-slow) var(--priva-ease-out),
            text-decoration-color var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js .mock .tag {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js .mock:not(.is-in) .del {
        color: var(--ink);
        text-decoration-color: transparent;
    }

    .js .mock:not(.is-in) .tag {
        opacity: 0;
        transform: translateY(-0.3em) scale(0.92);
    }

    .mock .swap:nth-of-type(1) .del,
    .mock .swap:nth-of-type(1) .tag {
        transition-delay: 350ms;
    }

    .mock .swap:nth-of-type(2) .del,
    .mock .swap:nth-of-type(2) .tag {
        transition-delay: 650ms;
    }

    .mock .swap:nth-of-type(3) .del,
    .mock .swap:nth-of-type(3) .tag {
        transition-delay: 950ms;
    }

    .mock .swap:nth-of-type(4) .del,
    .mock .swap:nth-of-type(4) .tag {
        transition-delay: 1250ms;
    }

    /* Illustratie: de glyph doet één keer iets dat bij de stap hoort. Eenmalig, niet lopend, want
       vijf doorlopende loops naast elkaar is kermis. */
    [data-icon="review"] .i-page-a,
    [data-icon="review"] .i-page-b,
    [data-icon="lock"] .i-shackle,
    [data-icon="layers"] .i-top {
        transition: transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="review"] .i-page-a {
        transform: translateX(-1.2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="review"] .i-page-b {
        transform: translateX(1.2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="lock"] .i-shackle,
    :is(li, .pillar, .card):hover > [data-icon="layers"] .i-top {
        transform: translateY(-2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="upload"] .i-arrow,
    :is(li, .pillar, .card):hover > [data-icon="cloud-out"] .i-arrow {
        animation: glyph-liftoff var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scan"] .i-ring {
        animation: glyph-ping var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scan"] .i-pupil,
    :is(li, .pillar, .card):hover > [data-icon="sparkle"] .i-spark {
        animation: glyph-pop var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="search"] .i-glass {
        animation: glyph-sweep var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="plug"] svg {
        animation: glyph-plugin var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="eye-off"] .i-slash,
    :is(li, .pillar, .card):hover > [data-icon="trail"] .i-lines,
    :is(li, .pillar, .card):hover > [data-icon="file"] .i-lines,
    :is(li, .pillar, .card):hover > [data-icon="review"] .i-check,
    :is(li, .pillar, .card):hover > [data-icon="shield"] .i-check,
    :is(li, .pillar, .card):hover > [data-icon="pulse"] .i-wave {
        animation: glyph-draw var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="alert"] svg {
        animation: glyph-shake var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scale"] svg {
        animation: glyph-tilt var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="key"] svg {
        animation: glyph-nudge var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover
        > :is(
            [data-icon="ghost"],
            [data-icon="europe"],
            [data-icon="users"],
            [data-icon="building"],
            [data-icon="server"],
            [data-icon="layers"]
        )
        svg {
        animation: glyph-bob var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="clock"] .i-hands {
        animation: glyph-spin var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="server"] .i-led {
        animation: glyph-blink var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="server"] .i-led:nth-of-type(2) {
        animation-delay: 120ms;
    }

    @keyframes site-drop {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    @keyframes glyph-draw {
        from {
            stroke-dashoffset: var(--len);
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes glyph-liftoff {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        42% {
            transform: translateY(-9px);
            opacity: 0;
        }
        43% {
            transform: translateY(9px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes glyph-ping {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        55% {
            transform: scale(1.4);
            opacity: 0;
        }
        56% {
            transform: scale(0.72);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes glyph-pop {
        0%,
        100% {
            transform: scale(1);
        }
        45% {
            transform: scale(1.5);
        }
    }

    @keyframes glyph-sweep {
        0%,
        100% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(2px, -1.6px);
        }
        50% {
            transform: translate(0.6px, 2px);
        }
        75% {
            transform: translate(-2px, 0.6px);
        }
    }

    @keyframes glyph-plugin {
        0%,
        100% {
            transform: translateY(0);
        }
        38% {
            transform: translateY(2.6px);
        }
        68% {
            transform: translateY(-1.1px);
        }
    }

    @keyframes glyph-tilt {
        0%,
        100% {
            transform: rotate(0);
        }
        30% {
            transform: rotate(7deg);
        }
        68% {
            transform: rotate(-5deg);
        }
    }

    @keyframes glyph-shake {
        0%,
        100% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-1.7px);
        }
        40% {
            transform: translateX(1.7px);
        }
        60% {
            transform: translateX(-1.1px);
        }
        80% {
            transform: translateX(0.7px);
        }
    }

    @keyframes glyph-bob {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2.6px);
        }
    }

    @keyframes glyph-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes glyph-nudge {
        0%,
        100% {
            transform: translateX(0);
        }
        45% {
            transform: translateX(2.2px);
        }
    }

    @keyframes glyph-blink {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.2;
        }
    }
}

/* Het vangnet voor wie minder beweging vraagt, hetzelfde als in de app: elke overgang die hierboven
   buiten het blok staat (kleur, rand, schaduw) is dan meteen klaar. */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-name: none !important;
    }
}