/* Gedeelde stijlen voor de publieke marketingpagina's (.mkt-*).
   Bewust globaal i.p.v. component-scoped: deze utilities worden door ~10 publieke pagina's
   gedeeld en component-scoped CSS lekt niet tussen componenten (bekende les, project-CLAUDE.md).
   Kleuren/typografie uitsluitend via de design-tokens in tokens.css (WCAG 2.2 AAA, 7:1). */

.mkt-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 20px;
}

.mkt-section-tight { padding-top: 24px; padding-bottom: 24px; }

.mkt-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-ink, var(--accent));
    margin: 0 0 10px;
}

/* Single-page site (conform Publiek.dc.html): elke sectie-anchor krijgt scroll-margin-top zodat
   de sticky header 'm niet overlapt na een anchor-sprong, en scroll-behavior:smooth zorgt voor
   een vloeiende sprong i.p.v. een harde jump — puur CSS, geen JS nodig. Respecteert
   prefers-reduced-motion (WCAG 2.3.3, AAA — dit project handhaaft AAA overal). */
[id^="sec-"], .mkt-anchor-heading {
    scroll-margin-top: 78px;
}

/* ---- Scroll-in-animatie voor alle secties (wwwroot/js/reveal.js) ----
   De klasse wordt uitsluitend via JS toegevoegd (progressive enhancement: zonder JS blijft
   alles gewoon meteen zichtbaar, nooit permanent opacity:0). Eenmalige fade-up zodra een sectie
   de viewport in scrollt, niet opnieuw bij terugscrollen. Respecteert prefers-reduced-motion
   zowel in JS (voegt de klasse dan niet toe) als hier in CSS (defense-in-depth). */
.mkt-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mkt-reveal-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mkt-reveal { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.pub-shell) {
        scroll-behavior: smooth;
    }
}

.mkt-h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin: 0 0 14px;
}

.mkt-h2 {
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 12px;
}

.mkt-h3 {
    font-size: 16.5px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mkt-lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink2);
    max-width: 720px;
    margin: 0 0 20px;
}

.mkt-body {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink2);
    margin: 0 0 10px;
}

/* ---- Hero ---- */
.mkt-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    padding-top: 56px;
}

/* Fade-up entree-animatie, zoals Publiek.dc.html's `animation:fadeUp .35s ease both` op het
   hero-tekstblok — alleen de allereerste hero (sec-hero) op de homepage zelf, niet op de
   donkere keuringsmodule-hero verderop (die is al zichtbaar bij paginalading, geen entree-effect
   nodig). Respecteert prefers-reduced-motion (WCAG 2.3.3, AAA). */
@keyframes mkt-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    #sec-hero > div:first-child {
        animation: mkt-fade-up 0.4s ease both;
    }
}

.mkt-hero-media picture {
    display: block;
}

.mkt-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}

.mkt-hero-photo {
    border-radius: 18px;
    aspect-ratio: 700 / 430;
    object-fit: cover;
}

.mkt-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mkt-hero-microcopy {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--ink3);
    margin: 10px 0 0;
}

.mkt-hero-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.mkt-hero-media-badged { position: relative; }

.mkt-hero-badge {
    position: absolute;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.mkt-hero-badge-1 { bottom: -10px; left: -4px; }
.mkt-hero-badge-2 { top: -8px; right: -4px; }

@media (max-width: 560px) {
    .mkt-hero-badge { display: none; }
}

/* ---- Kaart-grids ---- */
.mkt-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mkt-card {
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 14px;
    padding: 20px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mkt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

.mkt-card img {
    max-width: 100%;
    border-radius: 10px;
}

.mkt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.mkt-icon svg { width: 22px; height: 22px; }

/* ---- Kaarten die op mobiel inklappen tot icoon+titel (bv. de compliance-kaartjes) ----
   <details>/<summary> i.p.v. een custom JS-toggle: native toetsenbord-/schermlezerondersteuning
   zonder extra werk (Enter/Space + automatische aria-expanded-semantiek).
   BELANGRIJKE BROWSER-VALKUIL (gevonden 2026-07-21): een <details> zonder het open-attribuut
   wordt door de renderengine intern als "gesloten" gelayout, ongeacht welke CSS display-waarde
   je op de children zet — de eerdere aanpak (`:not([open]) > :not(summary) { display:block }`
   op desktop forceren) faalde daardoor stilzwijgend: de tekst zat wel in de DOM/a11y-tree, maar
   werd nergens zichtbaar gerenderd (offsetHeight van de body bleef groter dan de kaart zelf).
   Fix: de markup zet nu zelf het `open`-attribuut op elke kaart (zie de .razor-bestanden) zodat
   de content in élke browser altijd écht open/zichtbaar start. Op desktop (>640px) blijft hij
   permanent open (klikken is uitgeschakeld via pointer-events:none op de summary); op mobiel
   (≤640px) kan de gebruiker 'm alsnog dichtklikken — dat pad (open→dicht) gebruikt wél gewoon
   het native <details>-gedrag, want daar hoeft niets tegen de browser in geforceerd te worden. */
.mkt-collapsible-card > summary.mkt-collapsible-summary {
    list-style: none;
    cursor: default;
}

.mkt-collapsible-summary::-webkit-details-marker { display: none; }

.mkt-collapsible-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mkt-collapsible-summary .mkt-icon { margin-bottom: 0; flex: none; }
.mkt-collapsible-summary .mkt-h3 { margin: 0; }

/* ---- Compliance-kaartjes (sec. "Gebouwd op een solide, toetsbare basis"): titels lopen sterk
   uiteen in lengte (1 tot 4 regels, bv. "Beveiligd inloggen" vs. de volledige WCAG/EN 301 549/
   WAI-ARIA-opsomming). Zonder een gereserveerde titelhoogte begint de body-tekst van elke kaart
   op een andere hoogte, wat de rij visueel laat "springen" — daarom hier (bewust NIET op alle
   .mkt-collapsible-card-gebruiken elders, die hebben vaak juist korte titels en zouden onnodige
   witruimte krijgen) een vaste min-height ter grootte van de langste titel (3 regels @ 16.5px/1.5),
   met verticale centrering erbinnen zodat kortere titels niet scheef ogen. */
.mkt-compliance-card .mkt-h3 {
    min-height: 74px;
    display: flex;
    align-items: center;
}

/* ---- Functie-tegels (sec-functies): titel boven, badge/prijs eronder i.p.v. op dezelfde regel —
   voorkomt dat een lange titel de badge van tegel tot tegel op een andere hoogte laat landen. Elke
   tegel is een grid-cel (auto-fit), dus `stretch` maakt alle tegels in een rij al gelijk van hoogte;
   de vaste min-height op de titel zorgt dat de badge daarbinnen altijd op dezelfde regel begint,
   ongeacht of de titel op 1 of 2 regels uitkomt. */
.mkt-feature-card { display: flex; flex-direction: column; }

.mkt-feature-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.mkt-feature-summary .mkt-h3 {
    min-height: 46px;
    display: flex;
    align-items: flex-start;
    margin: 0 0 10px;
}

.mkt-feature-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.mkt-feature-price {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink2);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mkt-collapsible-summary {
        cursor: pointer;
        position: relative;
        padding-right: 28px;
    }

    .mkt-collapsible-summary:focus-visible {
        outline: 3px solid var(--focus-ring, var(--accent));
        outline-offset: 3px;
        border-radius: 6px;
    }

    .mkt-collapsible-summary::after {
        content: "";
        position: absolute;
        right: 2px;
        top: 50%;
        width: 10px;
        height: 10px;
        margin-top: -6px;
        border-right: 2px solid var(--ink3);
        border-bottom: 2px solid var(--ink3);
        transform: rotate(45deg);
        transition: transform 0.15s ease;
    }

    .mkt-collapsible-card[open] .mkt-collapsible-summary::after {
        transform: rotate(-135deg);
        margin-top: -3px;
    }

    .mkt-collapsible-card .mkt-body { margin-top: 10px; }

    /* Expliciet i.p.v. te vertrouwen op de browser-eigen <details>-collapse-styling — dwingt
       hetzelfde ingeklapte gedrag deterministisch af, ongeacht de renderengine. */
    .mkt-collapsible-card:not([open]) > :not(summary) { display: none; }
}

@media (min-width: 641px) {
    /* Forceert de inhoud altijd zichtbaar op desktop, ook zonder het open-attribuut. */
    .mkt-collapsible-card:not([open]) > :not(summary) { display: block; }
    .mkt-collapsible-card > summary.mkt-collapsible-summary { pointer-events: none; }
}

/* ---- Functie-tegels als echte accordion (sec-functies), op élke breedte ----
   Bewust een uitzondering op de "forceer open op desktop"-regel hierboven: de rijenlijst
   (titel + badge) moet een compacte, klikbare accordion zijn — open op desktop (standaard-
   gedrag, ook zonder JS: de markup zet `open`), dicht op mobiel. Dat laatste gebeurt via
   collapsible-defaults.js (`.mkt-collapsible-card[open]` → attribuut weg bij <=640px op
   page-load, geen aparte selector nodig — .mkt-feature-card draagt die klasse al mee).
   Daarna blijft het op élke breedte een echte toggle: klikken opent/sluit, en deze regels
   respecteren gewoon het al dan niet aanwezige open-attribuut. Selectors zijn hier even
   specifiek als de regels hierboven — winnen dus alleen omdat ze later in het bestand staan
   (cascade-volgorde), niet via hogere specificiteit. */
.mkt-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mkt-feature-card { padding: 0; }

.mkt-feature-card:not([open]) > :not(summary) { display: none; }

.mkt-feature-card > summary.mkt-collapsible-summary {
    cursor: pointer;
    position: relative;
    padding: 16px 34px 16px 18px;
    padding-right: 34px;
}

.mkt-feature-card > summary.mkt-collapsible-summary:focus-visible {
    outline: 3px solid var(--focus-ring, var(--accent));
    outline-offset: -3px;
    border-radius: 10px;
}

.mkt-feature-card > summary.mkt-collapsible-summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--ink3);
    border-bottom: 2px solid var(--ink3);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.mkt-feature-card[open] > summary.mkt-collapsible-summary::after {
    transform: rotate(-135deg);
    margin-top: -3px;
}

.mkt-feature-summary .mkt-h3 {
    min-height: 0;
    font-size: 15.5px;
}

.mkt-feature-card .mkt-body {
    margin: 0 18px 16px;
}

@media (min-width: 641px) {
    .mkt-feature-card > summary.mkt-collapsible-summary { pointer-events: auto; }
}

/* ---- 2-koloms vergelijking (bv. stickerservice: bestellen vs. zelf printen) ---- */
.mkt-compare-cols {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mkt-compare-col { display: flex; flex-direction: column; }

/* ---- Stappenflow ---- */
.mkt-steps {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    counter-reset: mkt-step;
}

.mkt-step {
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.mkt-step-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.mkt-step-body {
    padding: 16px 18px 20px;
}

.mkt-step-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
}

/* ---- Statistieken ---- */
.mkt-stats {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    text-align: center;
}

.mkt-stat-value {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
}

.mkt-stat-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink3);
}

/* ---- Carrousel (schermafbeeldingen) ----
   Roteert automatisch (wwwroot/js/carousel.js); blijft zonder JS werken via scroll-snap + de
   #shot-*-anchor-links op elke dot (de browser scrollt een geneste overflow-container native
   mee bij een intern anchor-sprong). De native scrollbar is bewust onzichtbaar gemaakt (blijft
   wel functioneel scrollbaar/sleepbaar) — de puntjes + pauzeknop zijn de zichtbare bediening. */
.mkt-carousel { position: relative; }

.mkt-carousel-pause {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bd3);
    background: var(--card);
    color: var(--ink2);
    font-size: 13px;
    cursor: pointer;
}

.mkt-carousel-pause:hover { background: var(--bg2); color: var(--ink); }

.mkt-carousel-pause:focus-visible {
    outline: 3px solid var(--focus-ring, var(--accent));
    outline-offset: 2px;
}

.mkt-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    gap: 20px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    /* Scrollbar visueel verbergen (Firefox + Chromium/WebKit) — overflow-x:auto blijft
       functioneel (sleep-/pijltjes-/programmatisch scrollen werkt gewoon door), alleen de
       systeembalk zelf toont zich niet. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mkt-carousel-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .mkt-carousel-track { scroll-behavior: smooth; }
}

.mkt-carousel-slide {
    flex: 0 0 100%;
    max-width: 820px;
    margin: 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.mkt-carousel-slide picture { display: block; }

.mkt-carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--bd3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.mkt-carousel-caption {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink2);
}

.mkt-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.mkt-carousel-dot {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: transparent;
    font-size: 1px;
    text-decoration: none;
}

/* Het echte, zichtbare puntje — los van de 44px-tapdoel-hitbox (.mkt-carousel-dot zelf), zelfde
   patroon als de knoppen-hit-area-uitbreiding elders in dit project (.hit-target). */
.mkt-carousel-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bd3);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.mkt-carousel-dot:hover::before { background: var(--accent-ink, var(--accent)); }

.mkt-carousel-dot:focus-visible {
    outline: 3px solid var(--focus-ring, var(--accent));
    outline-offset: 2px;
    border-radius: 50%;
}

/* Actieve dia highlighten via :target op de bijbehorende slide — de slide zit een niveau dieper
   dan .mkt-carousel-dots (in .mkt-carousel-track ernaast), dus :has() op de gemeenschappelijke
   ouder (.mkt-carousel) i.p.v. een sibling-combinator (die alleen gelijk-niveau-elementen matcht). */
.mkt-carousel:has(#shot-dashboard:target) .mkt-carousel-dot[href="#shot-dashboard"]::before,
.mkt-carousel:has(#shot-medewerker:target) .mkt-carousel-dot[href="#shot-medewerker"]::before,
.mkt-carousel:has(#shot-inspectie:target) .mkt-carousel-dot[href="#shot-inspectie"]::before {
    background: var(--accent);
    transform: scale(1.3);
}

/* ---- Video ---- */
.mkt-video {
    width: 100%;
    max-width: 860px;
    border-radius: 14px;
    display: block;
    margin: 0 auto;
    background: #000;
}

/* ---- Testimonial ---- */
.mkt-quote {
    border-left: 4px solid var(--accent);
    padding: 6px 0 6px 18px;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
    max-width: 760px;
    margin: 0;
}

.mkt-quote-author {
    font-style: normal;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink3);
    margin-top: 10px;
    display: block;
}

/* ---- CTA-band ---- */
.mkt-cta-band {
    background: var(--accent);
    color: #ffffff;
    border-radius: 16px;
    padding: 36px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.mkt-cta-band .mkt-h2 { color: #ffffff; margin: 0 0 4px; }
/* #ffe3ec op var(--accent) (#a3123c) haalde slechts ≈6,45:1 — onder de AAA-eis van 7:1
   (AAA-audit-bevinding). Vol wit (zonder opacity, dat het effectieve contrast weer zou
   verlagen) haalt op dezelfde achtergrond ≈7,75:1; onderscheid met de kop komt uit het
   font-gewicht (normaal vs. 800), niet uit een kleurverschil. */
.mkt-cta-band p { color: #ffffff; margin: 0; }

.mkt-cta-band .btn-invert {
    background: #ffffff;
    color: var(--accent);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: none;
    white-space: nowrap;
}

.mkt-cta-band .btn-invert:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ---- Vertrouwensbalk (branches i.p.v. klantlogo's) ---- */
.mkt-trustbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 8px;
    text-align: center;
}

.mkt-trustbar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink3);
    margin: 0 0 14px;
}

.mkt-trustbar-items {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mkt-trustbar-item {
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink2);
}

/* ---- Vergelijkingstabel (QR-Database vs. Excel/papier) ---- */
.mkt-compare-table th[scope="row"] { font-weight: 600; }

.mkt-compare-table .mkt-compare-highlight {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-ink, var(--accent));
    font-weight: 700;
}

.mkt-compare-table thead .mkt-compare-highlight {
    background: var(--accent);
    color: #ffffff;
    border-radius: 8px 8px 0 0;
}

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

/* Maandelijks/jaarlijks-schakelaar: een echte radiogroep (2 verborgen radio's + labels als
   pil-knoppen), CSS-only — zelfde checkbox-hack-patroon als het mobiele hamburgermenu
   (PublicLayout.razor.css .pub-nav-check). Werkt zonder JS/interactiviteit (de publieke site
   rendert bewust statisch/SSR) én is native toetsenbord-/schermlezerbedienbaar (een radiogroep
   heeft ingebouwde pijltjestoetsen-navigatie, in tegenstelling tot de eerdere losse
   knoppen-met-@@onclick die zonder interactiviteit dood waren). */
.mkt-billing-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.mkt-billing-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mkt-billing-radio:focus-visible + .pill-toggle-btn {
    outline: 3px solid var(--focus-ring, var(--accent));
    outline-offset: 2px;
}

.pill-toggle-btn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    min-height: 44px;
    border-radius: 999px;
    border: 1.5px solid var(--bd3);
    background: var(--card);
    color: var(--ink2);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mkt-billing-radio:checked + .pill-toggle-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* Prijzen per plan: bij paginalading tonen de maandbedragen; zodra de "Jaarlijks"-radio
   aangevinkt is, wisselt :has() (ondersteund in alle huidige evergreen-browsers, al elders in
   dit bestand gebruikt) de zichtbaarheid om — puur CSS, geen JS. */
.mkt-price-yearly { display: none; }

.mkt-pricing-scope:has(#pricing-period-yearly:checked) .mkt-price-monthly { display: none; }
.mkt-pricing-scope:has(#pricing-period-yearly:checked) .mkt-price-yearly { display: inline; }

.mkt-plans {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
}

.mkt-plan {
    position: relative;
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mkt-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

.mkt-plan-popular {
    border: 2px solid var(--accent);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 16%, transparent);
}

.mkt-plan-popular-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.mkt-matrix-groupheader {
    background: var(--chip2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--theadink, var(--ink3));
}

.mkt-plan-name {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 6px;
}

.mkt-plan-price {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.mkt-plan-price small {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink3);
    letter-spacing: 0;
}

.mkt-plan ul {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    flex: 1 1 auto;
}

.mkt-plan li {
    font-size: 13.5px;
    color: var(--ink2);
    padding: 5px 0 5px 22px;
    position: relative;
}

.mkt-plan li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-ink, var(--accent));
    font-weight: 800;
}

/* ---- Functie-/prijzenmatrix (tabel) ---- */
.mkt-table-wrap { overflow-x: auto; }

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

.mkt-table th, .mkt-table td {
    border-bottom: 1px solid var(--bd3);
    padding: 10px 12px;
    text-align: left;
}

.mkt-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--theadink, var(--ink3));
}

.mkt-table td.mkt-center, .mkt-table th.mkt-center { text-align: center; }

/* ---- FAQ (details/summary) ---- */
.mkt-faq details {
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 12px;
    margin-bottom: 10px;
}

.mkt-faq summary {
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 700;
    font-size: 14.5px;
    min-height: 44px;
    border-radius: 12px;
}

.mkt-faq details[open] summary { border-bottom: 1px solid var(--bd3); }

.mkt-faq .mkt-faq-answer {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink2);
}

/* ---- Roadmap ---- */
.mkt-roadmap-group { margin-bottom: 28px; }

/* Kwartaal-kop (bv. "Q3 2026") — bewust een klein mono-label i.p.v. .mkt-h2: die laatste is
   dezelfde grote sectietitel-stijl als "Roadmap" erboven, wat een tweede, even grote titel
   direct onder de eerste zou geven (verwarrende "dubbele titel", niet conform Publiek.dc.html
   dat hier expliciet een klein `font-family:'IBM Plex Mono';font-size:11px`-label gebruikt). */
.mkt-roadmap-quarter {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink3);
    margin: 0 0 12px;
}

.mkt-roadmap-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mkt-roadmap-card .pill { margin-top: 6px; }

/* ---- Contactpagina (patroon Publiek.dc.html: info links, formulierkaart rechts) ---- */
.mkt-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.mkt-contact-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 6px;
}

.mkt-contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mkt-contact-detail a { color: var(--ink); text-decoration: none; font-weight: 600; margin: 0; }
.mkt-contact-detail a:hover { color: var(--accent-ink, var(--accent)); text-decoration: underline; }

.mkt-icon-sm {
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-bottom: 0;
}

.mkt-icon-sm svg { width: 16px; height: 16px; }

.mkt-contact-hours {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--ink3);
    margin: 0;
}

.mkt-contact-form-card {
    background: var(--chip2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mkt-contact-form-disclaimer {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink3);
    text-align: center;
    margin: 6px 0 0;
}

@media (max-width: 820px) {
    .mkt-contact-grid { grid-template-columns: 1fr; }
}

/* ---- Formulieren (contact/registreren) ---- */
.mkt-form {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mkt-form label {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.mkt-form input, .mkt-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bd-input, var(--bd3));
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    padding: 10px 12px;
    min-height: 44px;
}

.mkt-form textarea { min-height: 130px; resize: vertical; }

/* Honeypot: visueel én voor hulptechnologie verborgen (bots vullen hem alsnog in). */
.mkt-trap {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mkt-alert-error {
    background: var(--card);
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}

.mkt-alert-success {
    background: var(--card);
    border: 1.5px solid var(--tgreen3, #2c7a3f);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}

/* ---- Donkere contrastband (keuringsmodule e.d.) ----
   Vaste kleuren i.p.v. design-tokens: dit moet in beide thema's hetzelfde donkere contrast blijven
   (zelfde #262d34/#b8c0c8-paar als de admin-sidebar, AAA 1.4.6 al geverifieerd op 7,6:1). */
.mkt-dark-banner {
    background: #262d34;
    color: #b8c0c8;
}

.mkt-dark-banner .mkt-h1,
.mkt-dark-banner .mkt-h2 { color: #ffffff; }

.mkt-eyebrow-dark { color: #f0a5bc; }

.mkt-lead-dark { color: #b8c0c8; }

.mkt-checklist {
    list-style: none;
    margin: 4px 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.mkt-checklist li {
    padding-left: 26px;
    position: relative;
}

.mkt-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #7fc9a2;
    font-weight: 800;
}

@media (max-width: 820px) {
    .mkt-hero { grid-template-columns: 1fr; padding-top: 32px; }
    .mkt-section { padding: 32px 14px; }
}