* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 22px); scroll-behavior: smooth; overscroll-behavior: none; overflow-x: clip; }
body { overflow-x: clip; }
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: grid; grid-template-rows: 1fr auto; }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0;}
p.kicker:last-of-type { margin-bottom: 1.1rem;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {

    --primary-font: "Satoshi", "Satoshi Fallback", -apple-system, system-ui, sans-serif;
    --header-font: "Clash Display", "Clash Display Fallback", var(--primary-font);

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --font-size-h1: 2.7rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.15rem;
    --font-size-h5: 0.95rem;
    --font-size-h6: 0.85rem;
    --font-size-body: 0.9rem;
    --font-size-lead: 1.05rem;
    --font-size-small: 0.75rem;

    --my-darkred: #410016;
    --my-beige-blue: #E7EFF2;
    --my-soft-blue: #78B1C6;
    --my-soft-blue-dark: #5D97AD;
    --my-soft-blue-deep: #3E697A; /* tekst op lichte achtergronden: contrast >= 4.5:1 (a11y), zelfde tint */
    --my-primary: #3D7387;
    --my-dark-brown: #1A160F;
    --my-brown-soft: #5C564C;
    --my-white: #FFFFFF;
    --my-mauve: #D9CDD9;
    --my-grey: #FAFAFA;

    --on-darkred: #E7EFF2;
    --on-darkred-soft: #C6A9B4;
    --on-darkred-line: rgba(231, 239, 242, 0.16);

    --main-color: var(--my-dark-brown);
    --soft-color: var(--my-brown-soft);
    --background-color: var(--my-beige-blue);
    --surface-color: var(--my-white);
    --accent-color: var(--my-darkred);
    --line-color: var(--my-mauve);

    --line-height-small: 1.1;
    --line-height-regular: 1.5;
    --line-height-large: 1.65;

    --gutter-side: 1.6rem;
    --gutter-top: 1rem;
    --max-width: 58rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 41rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 2.8rem;
    --half-gap: calc(var(--gap) / 2);

    --margin: var(--margin-y) auto;
    --margin-y: 4.4rem;
    --padding-top: 4rem;
    --section-pad-y: 4.4rem;
    --btn-padding: 0.8em 1.6em;
    /* Buitenhoogte van .btn (geen border, geen expliciete height): verticale
       padding (2 x 0.8em) plus de content-regel (line-height x font-size).
       Volgt automatisch --font-size-body mee over de mediaqueries heen. */
    --btn-height: calc(var(--font-size-body) * (var(--line-height-regular) + 1.6));

    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1);

    --border-radius: 0.2rem;
    --border-radius-sm: 0.15rem;
    --border-radius-lg: 0.4rem;
    --hairline: 1px solid var(--line-color);
    --btn-border-radius: 0.2rem;

    --logo-width: 8.5rem;

    --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-semibold); font-family: var(--header-font); line-height: var(--line-height-small); letter-spacing: -0.02em; color: var(--accent-color); margin-bottom: 0.5em; text-wrap: balance; }
h1, .h1 {font-size: var(--font-size-h1); letter-spacing: -0.03em; }
h2, .h2 {font-size: var(--font-size-h2); letter-spacing: -0.025em; }
h3, .h3 {font-size: var(--font-size-h3); letter-spacing: -0.01em; }
h4, .h4 {font-size: var(--font-size-h4); letter-spacing: -0.01em; }
h5, .h5 {font-size: var(--font-size-h5); letter-spacing: 0; }
h6, .h6 {font-size: var(--font-size-h6); letter-spacing: 0; }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; }

header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
.container {max-width: var(--max-width); width: var(--width); margin: 0 auto; position: relative; }
footer > nav { max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--background-color); }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

section[id] { scroll-margin-top: 4.5rem; }

/* --------------- IMAGES --------------- */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; user-select: none;}

/* --------------- SELECTION --------------- */
*::selection { background: var(--main-color); color: var(--background-color); }

/* --------------- FOCUS --------------- */
:focus-visible { outline: 2px solid var(--my-soft-blue); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 3px; }

[data-scheme="dark"] :focus-visible { outline-color: var(--on-darkred); }

/* --------------- NO VISIBLE SCROLLBAR --------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* --------------- VISUEEL VERBORGEN --------------- */
/* Tekst die alleen voor screenreaders en tekstgerichte crawlers bestaat: uit
   beeld, maar wel in de accessibility tree en in de HTML. Gebruikt op links
   die enkel een afbeelding tonen, zoals de App Store-badge in de footer. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* --------------- SOCIALS --------------- */
ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 1.8rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }

/* --------------- BUTTONS --------------- */
button { touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: var(--my-primary); color: var(--my-white); font-weight: var(--font-bold); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center; transition: background 200ms var(--my-ease-out), color 200ms var(--my-ease-out); }
.btn:hover { background: color-mix(in srgb, var(--my-primary) 85%, #000); color: var(--my-white); }

.btn.ghost { background: none; color: var(--accent-color); font-weight: var(--font-semibold); border-radius: 0; padding: var(--btn-padding); padding-left: 0; padding-right: 0; border-bottom: 2px solid var(--line-color); box-shadow: none; }
.btn.ghost:hover { background: none; color: var(--accent-color); border-bottom-color: var(--accent-color); transform: none; }

/* De app-knop (DD-042): "Download de app", in het donkerrood van de titels en het
   CTA-bord met witte tekst. Staat als tweede actie naast de blauwe web-knop, dus
   duidelijk een andere weg zonder harder te roepen. Hover volgt hetzelfde recept
   als .btn: dezelfde kleur, 15% naar zwart. */
.btn.app { background: var(--my-darkred); color: var(--my-white); }
.btn.app:hover { background: color-mix(in srgb, var(--my-darkred) 85%, #000); color: var(--my-white); }
/* Op het donkerrode bord (data-scheme=dark) valt donkerrood weg. Daar wordt het
   een omlijnde knop in de lichte tekstkleur van dat bord, die op hover volloopt.
   De lijn zit in een inset box-shadow en niet in een border, zodat de knop exact
   even hoog blijft als de primaire knop ernaast (--btn-height rekent zonder border). */
[data-scheme="dark"] .btn.app { background: none; color: var(--on-darkred); box-shadow: inset 0 0 0 2px var(--on-darkred); }
[data-scheme="dark"] .btn.app:hover { background: var(--on-darkred); color: var(--my-darkred); }
/* De knop verbergt zichzelf op Android zolang er geen Play Store-app is
   (setupAppDownload). .btn is inline-flex en wint het anders van [hidden]. */
.btn[hidden] { display: none; }

/* --------------- ARROW --------------- */
/* Ronde pijlknop naast een slider. De svg komt uit de sprite en erft currentColor;
   de knop zelf staat op een hairline-cirkel, in lijn met de rest van het boekje. */
.arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--surface-color); color: var(--accent-color); border: 1px solid transparent; transition: background 200ms var(--my-ease-out), color 200ms var(--my-ease-out), border-color 200ms var(--my-ease-out), opacity 200ms var(--my-ease-out); }
.arrow.outlined { background: none; border: var(--hairline); }
.arrow > svg { width: 0.75rem; height: 0.75rem; transition: transform 200ms var(--my-ease-out); }
.arrow:hover { background: var(--my-soft-blue); color: var(--my-white); border-color: transparent; }

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */

header { position: fixed; top: 0; z-index: 10; left: 0; right: 0; margin: 0 auto; background: rgba(231, 239, 242, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--hairline); }
header img, header svg { max-width: 100%;}
nav#mobile, .burger, .mobile { display: none;  }
#skiplink { position: fixed;  left: 50%; top: -40rem; transform: translate(-50%, -50%);  text-transform: none; font-size: 1rem; background: var(--surface-color);  opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem;  z-index: 5; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

.wordmark { font-family: var(--header-font); font-weight: var(--font-medium); font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1; color: inherit; }
.wordmark .dot { color: var(--my-soft-blue); }

nav#desktop { margin: 0 auto; padding: 0.7rem 0; max-width: var(--max-width); width: var(--width); z-index: 10;  position: relative; }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; gap: 1.6rem;}
nav#desktop > ul li {position: relative; display: flex; align-items: center; }
nav#desktop > ul li.login { margin-left: 2.5rem; }
nav#desktop > ul li a { display: flex; }
nav#desktop > ul > li.logo {margin-right: auto; max-width: none; color: var(--accent-color); }
nav#desktop > ul > li:not(.logo, .cta, .burger) > a { font-size: var(--font-size-small); font-weight: var(--font-medium); color: var(--main-color); padding: .3rem 0; position: relative; }

nav#desktop > ul > li:not(.logo, .cta, .burger) > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--my-ease-out); }
nav#desktop > ul > li:not(.logo, .cta, .burger):hover > a::after { transform: scaleX(1); }
nav#desktop > ul > li.active > a { color: var(--accent-color); }
nav#desktop > ul > li.active > a::after { transform: scaleX(1); }
nav#mobile > ul > li.active > a { color: var(--my-primary); }
nav#desktop > ul > li.cta > a { padding: 0.5em 1.2em; font-size: var(--font-size-small); }
nav#desktop > ul > li.cta:nth-last-of-type(3) { margin-left: .9rem; }
nav#desktop > ul > li.cta + li.cta { margin-left: -1.2rem;}
nav#desktop > ul > li.cta.red a { background: var(--my-darkred);}
/* Android zonder Play Store-url: setupAppDownload() maakt het anker hidden, de lege li verdwijgt mee. */
nav#desktop > ul > li.cta:has(> a[hidden]) { display: none; }

nav#desktop > ul > li.switcher { align-items: center; justify-content: center; width: 2em; height: 2em; border: 1px solid var(--main-color); border-radius: 50%; cursor: pointer; flex-shrink: 0; }
nav#desktop > ul > li.switcher > span { font-size: 0.85em; line-height: 1; pointer-events: none; }
nav#desktop > ul > li.switcher ul.lang { list-style: none; position: absolute; bottom: -.5rem; right: -.5rem; transform: translateY(100%); opacity: 0; pointer-events: none; transition: opacity 250ms; background: var(--background-color); border: 1px solid var(--main-color); border-radius: .75rem; padding: .4rem .75rem; display: flex; flex-direction: column; gap: .4rem; white-space: nowrap; z-index: 10; }
nav#desktop > ul > li.switcher ul.lang::before { content: ""; position: absolute; width: 100%; top: -1rem; left: 0; height: 1rem; }
nav#desktop > ul > li.switcher:hover ul.lang, nav#desktop > ul > li.switcher:focus-within ul.lang { opacity: 1; pointer-events: all; }
nav#desktop > ul > li.switcher ul.lang li a { display: block; padding: .15rem .3rem; }
nav#desktop > ul > li.switcher ul.lang li.active a { text-decoration: underline; text-underline-offset: .2em; }
nav#desktop > ul > li.switcher ul.lang li a:hover { text-decoration: underline; text-underline-offset: .2em; }

nav#mobile { position: fixed; top: 0; transform: translateX(-100%); transition: transform 500ms var(--my-ease); height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: flex-start; background: var(--background-color); z-index: 9; }
nav#mobile > ul { display: flex;flex-direction: column; align-items: flex-start; gap: 0.4rem; height: 100%; margin-top: 3rem; padding: 2rem var(--gutter-side); width: 100%;  border-top: var(--hairline); }
nav#mobile > ul > li { display: flex; }
nav#mobile > ul > li:not(.cta) > a { padding: 0.5rem 0; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h3); color: var(--accent-color);  }
nav#mobile > ul > li.cta { margin-top: 1.4rem; }
nav#mobile > ul > li.cta > a { font-size: var(--font-size-body); } 
nav#mobile > ul > li.cta.red { margin-top: 0rem;}
nav#mobile > ul > li.cta.red > a { background: var(--my-darkred);}
/* Android zonder Play Store-url: setupAppDownload() maakt het anker hidden, de lege li verdwijgt mee. */
nav#mobile > ul > li.cta:has(> a[hidden]) { display: none; }
nav#mobile > ul > li.switcher ul.lang { display: flex; flex-direction: row; gap: 0.5rem; padding: 0; list-style: none; }
nav#mobile > ul > li.switcher ul.lang li { display: flex; }
nav#mobile > ul > li.switcher ul.lang li.active > a { text-decoration: underline; }
nav#mobile > ul > li.switcher ul.lang li > a { padding: 0.5rem; }

button.burger { position: relative; width: 1.2rem; height: calc(0.8rem + 3px); transition: transform 500ms var(--my-ease);  z-index: 99;  display: none; align-items: center; background-color: transparent; }

button.burger::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
button.burger > span { width: 1.2rem; height: 3px; position: absolute; background: var(--my-darkred); transition: transform 500ms var(--my-ease);  border-radius: 2px;}
button.burger > span:nth-of-type(1) { transform: translateY(-.4rem); }
button.burger > span:nth-of-type(2) { transform: none }
button.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

body.menu-open button.burger { transform: rotate(90deg)  }
body.menu-open button.burger span:nth-of-type(1) { transform: rotate(45deg);}
body.menu-open button.burger span:nth-of-type(2) { transform: scaleX(0);}
body.menu-open button.burger span:nth-of-type(3) { transform: rotate(-45deg);}
body.menu-open nav#mobile { transform: none;  }

@media only screen and (min-width: 851px) {
    nav#desktop > ul li.burger { display: none; }
}
@media only screen and (max-width: 850px) {
    header { height: 3rem;}
    nav#mobile { display: flex; }
    button.burger { display: flex;  width: 1.5rem;  }
    button.burger > span { width: 1.4rem; }
    button.burger > span:nth-of-type(1) { transform: translateY(-.475rem); }
    button.burger > span:nth-of-type(2) { transform: none }
    button.burger > span:nth-of-type(3) { transform: translateY(.475rem); }
    .wordmark { font-size: 1.5rem;}
    nav#desktop li:not(.logo,.burger) { display: none; }
}

/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */

footer { background: var(--my-dark-brown); color: var(--on-darkred); padding-block: 3.4rem 2rem; }
footer .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.4rem; align-items: start; }
footer .footer-brand .wordmark { font-size: var(--font-size-h4); color: var(--on-darkred); }
footer .footer-brand .wordmark .dot { color: var(--my-soft-blue); }
footer .footer-tagline { margin-top: 0.9rem; max-width: 20rem; font-size: var(--font-size-small); color: var(--on-darkred-soft); }
footer .footer-col-title { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); color: var(--my-soft-blue); margin-bottom: 0.9rem; }
footer .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
footer .footer-col a { font-size: var(--font-size-small); color: var(--on-darkred); }
footer .footer-col a:hover { color: var(--my-soft-blue); }
footer .footer-col a.footer-badge { position: relative; display: inline-block; margin-top: 0.4rem; }
footer .footer-col a.footer-badge img { display: block; height: 40px; width: auto; }
footer .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.4rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--on-darkred-line); font-size: var(--font-size-small); color: var(--on-darkred-soft); }
footer .footer-base a:hover { color: var(--my-soft-blue); }

footer .footer-company { flex: 1 1 auto; text-align: center; font-variant-numeric: tabular-nums; }

@media only screen and (max-width: 960px) {
    footer .footer-grid { grid-template-columns: repeat(4, 1fr); }
    footer .footer-brand { grid-column: 1 / -1; }
}
@media only screen and (max-width: 700px) {
    footer .footer-grid { grid-template-columns: 1fr 1fr; }
    footer .footer-brand { grid-column: 1 / -1; }
}

/* --------------- SECTIONS --------------- */
main > section { padding-block: var(--section-pad-y); }
/* youturn-principe: opeenvolgende secties met dezelfde achtergrond krijgen geen
   top-padding (enkele tussenruimte). Bij een kleurwissel blijft de volle ruimte
   staan. Groepen: beige, papier (wit/grijs), donker. */
main > section:is(.content:not(.grey), .features, .pricing, .stats, .calculator, .negotiation, .blog-related, .blog-index) + section:is(.content:not(.grey), .features, .pricing, .stats, .calculator, .negotiation, .blog-related, .blog-index),
main > section:is(.how-it-works, .explainer, .split, .app-slider, .statement:not([data-scheme="dark"]), .content.grey) + section:is(.how-it-works, .explainer, .split, .app-slider, .statement:not([data-scheme="dark"]), .content.grey),
main > section:is(.cta-banner, .audience, .statement[data-scheme="dark"]) + section:is(.cta-banner, .audience, .statement[data-scheme="dark"]) { padding-top: 0; }
.section-head { max-width: var(--max-width-narrow); margin-bottom: 3rem; }
.section-head .lead { color: var(--soft-color); font-size: var(--font-size-lead); line-height: var(--line-height-large); margin-top: 0.8rem; }

.kicker { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h6); letter-spacing: 0.04em;  color: var(--my-soft-blue-deep); margin-bottom: 1.1rem; }

.kicker::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 0.1em; background: var(--my-soft-blue); margin-top: -.05em; }

/* =========================================================== */
/* ================= HERO: DE VERTREKSTAAT =================== */
/* =========================================================== */

section.hero { background: var(--background-color); padding-block: 5rem 5.4rem; }

section.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.6rem; align-items: center; }
section.hero h1.h1 { line-height: 1.04; margin-bottom: 1.3rem; max-width: 15ch; }
section.hero h1.h1::after { content: "."; color: var(--my-soft-blue);}

section.hero h1.h1 em { font-weight: var(--font-semibold); color: var(--accent-color); }
section.hero .hero-lead { max-width: 26rem; font-size: var(--font-size-lead);  color: var(--soft-color); }
section.hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: 2.2rem; }
section.hero .hero-price-note { flex-basis: 100%; font-size: var(--font-size-small); color: var(--soft-color); margin: 0.2rem 0 0; }
/* De App Store-badge als tweede CTA (DD-041). Apple's artwork blijft onaangetast
   (alleen height, breedte naar rato): de hoogte volgt --btn-height, zodat de
   badge even hoog is als de knop ernaast, op elke breedte. De hero-actions-flex
   zet hem al verticaal gecentreerd naast de knop, met dezelfde gap als tussen
   de knoppen. */
section.hero .app-store-badge { position: relative; display: inline-flex; align-items: center; }
section.hero .app-store-badge img { display: block; width: auto; height: var(--btn-height); }

section.hero .hero-board { margin: 0; min-width: 0; background: var(--surface-color); border: var(--hairline); border-radius: var(--border-radius); padding: 2rem 2.1rem; }
section.hero .board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0; padding-bottom: 0.8rem; border-bottom: 2px solid var(--accent-color); }
section.hero .board-title { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h3); letter-spacing: -0.01em; color: var(--accent-color); }
section.hero .board-sub { font-size: var(--font-size-h6); color: var(--soft-color);  margin-bottom: .1em; display: inline-block; }
section.hero table.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
section.hero .board th { padding: 0.8rem 0 0.4rem; font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--soft-color); text-align: left; }
section.hero .board :is(th, td):last-child { text-align: right; }
section.hero .board td { padding: 0.55rem 0; border-top: var(--hairline); font-size: var(--font-size-h5); }
section.hero .board td.board-amount { font-weight: var(--font-medium); }

section.hero .board tr.board-today td { border-top: 0; background: rgba(120, 177, 198, 0.1); }
section.hero .board tr.board-today td:first-child { border-top-left-radius: var(--border-radius-sm); border-bottom-left-radius: var(--border-radius-sm); }
section.hero .board tr.board-today td:last-child { border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); }
section.hero .board-today-label { font-weight: var(--font-medium); }

section.hero .board-input { display: inline-flex; align-items: baseline; gap: 0.25em; }
section.hero .board-euro { color: var(--soft-color); }
section.hero .board-omzet { width: 5.5em; padding: 0.15em 0.1em; border-bottom: 1.5px solid var(--my-soft-blue-dark); background: none; color: var(--main-color); font: inherit; font-weight: var(--font-medium); font-variant-numeric: tabular-nums; text-align: right; }
section.hero .board-omzet::placeholder { color: var(--my-mauve); }
section.hero .board-omzet:focus { outline: none; border-bottom-color: var(--accent-color); }

section.hero .board tr.board-total td { border-top: 2px solid var(--accent-color); padding-block: 0.8rem 0.7rem; }
section.hero .board tr.board-total td:first-child { color: var(--soft-color); }

section.hero .board tr.board-arrival td { border-top: 0; padding: 0.6rem 0 0; vertical-align: top; }
section.hero .board tr.board-arrival td:first-child { color: var(--soft-color); }
section.hero .board td.board-fee { padding-left: 1rem; font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 3.3rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent-color); white-space: nowrap; }

section.hero .pct-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.7rem; max-width: 10rem;}
section.hero .pct-option { padding: 0.2em 0.5em; border: 1px solid var(--line-color); border-radius: var(--border-radius-sm); background: none; color: var(--soft-color); font-size: var(--font-size-small); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; transition: background 160ms var(--my-ease-out), color 160ms var(--my-ease-out), border-color 160ms var(--my-ease-out); }
section.hero .pct-option:hover { border-color: var(--my-soft-blue-dark); color: var(--accent-color); }
section.hero .pct-option.is-active { background: var(--accent-color); border-color: var(--accent-color); color: var(--on-darkred); }

section.hero .pct-custom { display: inline-flex; align-items: stretch; }
section.hero .pct-input { width: 1.9em; padding: 0.2em 0.1em 0.2em 0.35em; border: 1px solid var(--line-color); border-right: 0; border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); background: var(--surface-color); color: var(--main-color); font: inherit; font-size: var(--font-size-small); font-weight: var(--font-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; text-align: right; }
section.hero .pct-input:focus { outline: none; border-color: var(--my-soft-blue-dark); position: relative; z-index: 1; }
section.hero .pct-suffix { display: inline-flex; align-items: center; padding: 0.2em 0.45em 0.2em 0.1em; border: 1px solid var(--line-color); border-left: 0; border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0; color: var(--soft-color); font-size: var(--font-size-small); font-weight: var(--font-semibold); line-height: 1.2; }

html:not(.js) section.hero :is(.board-input, .pct-switch) { display: none; }
html:not(.js) section.hero .board tr.board-today { display: none; }

section.hero .board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1.6rem 0 0; }
section.hero .board-action { display: inline-block; padding: 0.45em 1em; border: var(--hairline); border-radius: var(--border-radius); color: var(--accent-color); font-size: var(--font-size-small); font-weight: var(--font-semibold); }
section.hero .board-chip { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--font-size-small); color: var(--soft-color); }
section.hero .board-chip::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--my-soft-blue-dark); }

@media only screen and (max-width: 1000px) {
    section.hero .container { grid-template-columns: 1fr; gap: 0; }
    section.hero .hero-board { margin-top: 2.6rem; max-width: 34rem; }
}
@media only screen and (max-width: 768px) {
    section.hero { padding-block: 3.6rem 3rem; }
    section.hero h1.h1 { max-width: none; font-size: 2.4rem; }
    section.hero .hero-actions { gap: 0.8rem 1.2rem; margin-top: 1.8rem; }
    section.hero .hero-board { margin-top: 2.4rem; max-width: none; }
    section.hero .board td.board-fee { font-size: 1.9rem; }
}

/* =========================================================== */
/* ====================== HOE HET WERKT ====================== */
/* =========================================================== */

section.how-it-works { background: var(--my-grey); }
section.how-it-works .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; list-style-type: none; }
section.how-it-works .steps::before { content: ""; position: absolute; top: calc(0.85rem - 1px); left: 0; right: 0; height: 2px; background: var(--my-soft-blue); }
section.how-it-works .step { position: relative; padding-top: 2.7rem; }
section.how-it-works .step-num { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: var(--border-radius-sm); background: var(--my-soft-blue); color: var(--accent-color); font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h6); }
section.how-it-works .step:last-child .step-num { background: var(--accent-color); color: var(--on-darkred); }
section.how-it-works .step-title { font-size: var(--font-size-h4); margin: 0 0 0.4rem; }
section.how-it-works .step-text { color: var(--soft-color); margin: 0; max-width: 24rem; }
section.how-it-works .steps-actions { margin-top: 2.4rem; }
section.how-it-works + section.explainer { display: flex; flex-direction: column; }
section.how-it-works + section.explainer .container { margin-top: var(--margin-y);}

@media only screen and (max-width: 768px) {
    section.how-it-works .steps { grid-template-columns: 1fr; gap: 1.8rem; }
    section.how-it-works .steps::before { display: none; }
    section.how-it-works .step { padding-top: 0; padding-left: 3rem; }
    section.how-it-works .step:not(:last-child)::before { content: ""; position: absolute; top: 0; left: calc(0.85rem - 1px); width: 2px; height: calc(100% + 1.8rem); background: var(--my-soft-blue); }
}

/* =========================================================== */
/* ========================= VOOR WIE ======================== */
/* =========================================================== */

section.audience { background: var(--accent-color); color: var(--on-darkred); }
section.audience .h2 { color: var(--on-darkred); }
section.audience .kicker { color: var(--my-soft-blue); }
section.audience .kicker::before { background: var(--my-soft-blue); }
section.audience .audience-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.4rem; align-items: start; }
section.audience .audience-intro .lead { color: var(--on-darkred-soft); font-size: var(--font-size-lead); line-height: var(--line-height-large); max-width: 24rem; margin-top: 0.8rem; }
section.audience .audience-intro .lead a { color: var(--on-darkred); text-decoration: underline; text-underline-offset: .2em; transition: color 160ms var(--my-ease-out); }
section.audience .audience-intro .lead a:hover { color: var(--my-soft-blue); }
section.audience .recognition { display: flex; flex-direction: column; }
section.audience .recognition-item { position: relative; padding: 1.05rem 0 1.05rem 1.8rem; border-top: 1px solid var(--on-darkred-line); font-size: var(--font-size-h5); color: var(--on-darkred); }
section.audience .recognition-item:last-child { border-bottom: 1px solid var(--on-darkred-line); }
section.audience .recognition-item::before { content: ""; position: absolute; left: 0; top: 1.4rem; width: 0.7em; height: 0.7em; border-radius: var(--border-radius-sm); background: var(--my-soft-blue); }
section.audience .recognition-item.pain { color: var(--my-grey); }
section.audience .recognition-item.pain::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; top: 1.4rem; border-radius: var(--border-radius-sm); background: var(--my-grey); color: var(--accent-color); font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 0.72em; }

@media only screen and (max-width: 768px) {
    section.audience .audience-grid { grid-template-columns: 1fr; gap: 2rem; }
    section.audience .recognition-item { font-size: var(--font-size-body); }
}

/* =========================================================== */
/* ========================= FEATURES ======================== */
/* =========================================================== */

section.features { background: var(--background-color); }
section.features .feature-list { display: grid; grid-template-columns: minmax(14rem, 0.9fr) 2.1fr; column-gap: 2.6rem; margin: 0; }
section.features .feature { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding-block: 1.05rem; border-top: var(--hairline); }
section.features .feature:last-child { border-bottom: var(--hairline); }
section.features .feature-title { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h4); letter-spacing: -0.01em; color: var(--accent-color); margin: 0; }
section.features .feature-text { color: var(--soft-color); margin: 0; max-width: 38rem; }

section.content:first-of-type + section.features { background: var(--my-white); display: flex; flex-direction: column; }
section.content:first-of-type + section.features .container { margin-top: var(--margin-y);}

@media only screen and (max-width: 700px) {
    section.features .feature-list { display: flex; flex-direction: column; }
    section.features .feature { grid-template-columns: 1fr; row-gap: 0.25rem; }
}

/* =========================================================== */
/* ====================== HAS CONTROLS ======================= */
/* =========================================================== */
/* Generieke sliderlaag, 1-op-1 overgenomen uit the-youturn: de .slider is de
   scrollbak, de pijlen naast de kop sturen hem aan. De knoppen doven zichzelf
   uit zodra er niets meer te scrollen valt (data-has-scroll/left/right, gezet
   door setupControlScrollButtons). Zonder JS blijft het gewoon een swipe-rij. */
section.has-controls { overflow: hidden; }
section.has-controls .has-slider { width: 100%; position: relative; --own-delay: 25ms; }
section.has-controls .slider { width: 100%; min-width: 0; overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
section.has-controls .slider ul { display: grid; grid-auto-flow: column; }

section.has-controls .ctrl-btns { display: flex; align-items: center; gap: 0.5rem; z-index: 2; transition: opacity 400ms var(--my-ease-out); }
section.has-controls .ctrl-btns button > svg { transform: translateX(var(--own-transform-x, 0.05rem)); }
section.has-controls .ctrl-btns button:nth-of-type(1) > svg { transform: scaleX(-1) translateX(var(--own-transform-x, 0.05rem)); }
section.has-controls .ctrl-btns button:hover > svg { --own-transform-x: 0.16rem; }

section.has-controls:has(.slider[data-has-scroll=false]) .ctrl-btns { opacity: 0; pointer-events: none; }
section.has-controls:has(.slider[data-right=true]) .ctrl-btns button:nth-of-type(2),
section.has-controls:has(.slider[data-left=true]) .ctrl-btns button:nth-of-type(1) { opacity: 0.3; pointer-events: none; }

/* =========================================================== */
/* ======================== APP SLIDER ======================= */
/* =========================================================== */

section.app-slider { background: var(--surface-color); }
/* Als de slider de pagina opent moet hij, net als een openende Content-sectie, onder de vaste header vandaan komen. */
section.app-slider:first-of-type:first-of-type { padding-top: 7.5rem; }
section.app-slider .app-slider-head { display: flex; align-items: flex-end; gap: 2rem; margin-bottom: 2.6rem; }
section.app-slider .app-slider-head .section-head { margin-bottom: 0; }
section.app-slider .ctrl-btns { margin-left: auto; margin-bottom: 0.3rem; }

/* De ul krijgt exact de maten van .container, zodat de eerste kaart met de kop
   uitlijnt; de kolommen erna lopen door tot buiten de sectie. De ::after is de
   naloop-gutter uit youturn, zodat de laatste kaart niet tegen de rand plakt. */
section.app-slider .slider ul { grid-gap: 1rem; align-items: start; max-width: var(--max-width); width: var(--width); margin: 0 auto; }
section.app-slider .slider ul::after { content: ""; width: 12rem; height: 1px; flex-shrink: 0;  }

section.app-slider .shot { width: 13rem; scroll-snap-align: center; }
section.app-slider .shot figure { margin: 0; }
/* Flinke radius: het beeld is een telefoonscherm, inclusief statusbalk en
   Dynamic Island (bewust niet weggesneden). */
section.app-slider .shot-image { display: block; width: 100%; height: auto; border: var(--hairline); border-radius: 1.6rem; overflow: hidden; background: var(--surface-color); }
section.app-slider .shot-image img { display: block; width: 100%; height: auto; }
/* Onderschrift alleen bij hover: blijft in de opmaak (geen verspringen, wel leesbaar voor
   screenreaders), maar onzichtbaar tot de muis op de kaart staat. */
section.app-slider .shot-caption { margin-top: 0.8rem; font-size: var(--font-size-small); color: var(--soft-color); text-align: center; text-wrap: balance; opacity: 0; transition: opacity 500ms var(--my-ease-out); }
section.app-slider .shot:is(:hover, :focus-within) .shot-caption { opacity: 1; }
/* Touch: swipen is de bediening, dus de pijlen weg; en omdat hover niet bestaat neemt de
   kaart in het midden (data-active, gezet door de center-observer in script.js) die rol over. */
@media (hover: none) {
    section.app-slider .ctrl-btns { display: none; }
    section.app-slider .shot[data-active=true] .shot-caption { opacity: 1; }
}


section.app-slider .app-slider-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem; margin-top: 1.8rem; }
/* Apple's badge onaangetast: alleen schalen op hoogte, minimaal 40px. */
section.app-slider .app-store-badge { position: relative; display: inline-flex; }
section.app-slider .app-store-badge img { display: block; width: auto; height: 40px; }

@media only screen and (max-width: 768px) {
    section.app-slider .app-slider-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; margin-bottom: 2rem; }
    section.app-slider .ctrl-btns { margin-left: 0; margin-bottom: 0; }
    section.app-slider .slider ul::after { width: 1rem;}
}

@media (prefers-reduced-motion: reduce) {
    section.has-controls .slider { scroll-behavior: auto; }
}

/* =========================================================== */
/* ========================= PRICING ========================= */
/* =========================================================== */

section.pricing { background: var(--background-color); }
section.pricing .tariff { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--hairline); border-bottom: var(--hairline); }
section.pricing .tariff-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 1.8rem 1.8rem 1.9rem; }
section.pricing .tariff-plan + .tariff-plan { border-left: var(--hairline); }
section.pricing .plan-label { font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--soft-color); }
section.pricing .plan-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.4rem 0 0; }
section.pricing .price-amount { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 3.4rem; line-height: 1; color: var(--accent-color); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
section.pricing .price-per { color: var(--soft-color); font-size: var(--font-size-body); }
section.pricing .plan-note { display: flex; flex-direction: column; gap: 0.1rem; color: var(--soft-color); font-size: var(--font-size-small); margin: 0.2rem 0 0; }

section.pricing .tariff-plan.highlight { background: var(--accent-color); }
section.pricing .tariff-plan.highlight .plan-label { color: var(--my-soft-blue); }
section.pricing .tariff-plan.highlight .price-amount { color: var(--my-white); }
section.pricing .tariff-plan.highlight .price-per, section.pricing .tariff-plan.highlight .plan-note { color: var(--on-darkred-soft); }
section.pricing .plan-flag { position: absolute; top: 1.9rem; right: 1.8rem; font-size: var(--font-size-small); font-weight: var(--font-semibold); color: var(--accent-color); background: var(--my-soft-blue); padding: 0.15em 0.6em; border-radius: var(--border-radius-sm); }

section.pricing .price-under { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.6rem; align-items: start; margin-top: 2.2rem; }
section.pricing .price-includes { display: flex; flex-direction: column; margin: 0; }
section.pricing .price-includes li { position: relative; padding: 0.55rem 0 0.55rem 1.8rem; font-size: var(--font-size-body); color: var(--main-color); border-top: var(--hairline); }
section.pricing .price-includes li:last-child { border-bottom: var(--hairline); }
section.pricing .price-includes li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 1.05em; height: 1.05em; background: var(--my-soft-blue-dark); -webkit-mask: var(--check-mask) center / 0.85em no-repeat; mask: var(--check-mask) center / 0.85em no-repeat; }
section.pricing .price-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
section.pricing .price-foot { color: var(--soft-color); font-size: var(--font-size-small); margin: 0; max-width: 24rem; }

@media only screen and (max-width: 768px) {
    section.pricing .tariff { grid-template-columns: 1fr; }
    section.pricing .tariff-plan + .tariff-plan { border-left: 0; border-top: var(--hairline); }
    section.pricing .price-under { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* =========================================================== */
/* ================= HONORARIUM-CALCULATOR =================== */
/* =========================================================== */
/* De regels met section:is(.calculator, .negotiation) deelt hij met de onderhandel-calculator. */

section:is(.calculator, .negotiation) { background: var(--background-color); --thumb: 1.3rem; }
section:is(.calculator, .negotiation) .calc-board { display: grid; grid-template-columns: 1.12fr 0.88fr; background: var(--surface-color); border: var(--hairline); border-radius: var(--border-radius); overflow: hidden; }

section:is(.calculator, .negotiation) .calc-input { padding: 0.9rem 2.1rem 1.2rem; }
section:is(.calculator, .negotiation) .calc-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.7rem 1.6rem; padding-block: 1.2rem; border-top: var(--hairline); }
section:is(.calculator, .negotiation) .calc-field:first-of-type { border-top: 0; }
section:is(.calculator, .negotiation) .calc-label { display: flex; flex-direction: column; gap: 0.15rem; }
section:is(.calculator, .negotiation) .calc-label :is(label, .calc-legend) { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h5); color: var(--accent-color); cursor: default; }
section:is(.calculator, .negotiation) .calc-hint { font-size: var(--font-size-small); color: var(--soft-color); }

section:is(.calculator, .negotiation) .calc-money { display: inline-flex; align-items: baseline; gap: 0.3rem; font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h3); color: var(--accent-color); }
section:is(.calculator, .negotiation) .calc-unit { font-size: 0.7em; color: var(--soft-color); }
section:is(.calculator, .negotiation) .calc-number { width: 3.4em; padding: 0.05em 0.1em; border-bottom: 1.5px solid var(--my-soft-blue-dark); background: none; color: var(--accent-color); font: inherit; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-align: right; transition: border-color 160ms var(--my-ease-out); }
section:is(.calculator, .negotiation) .calc-number.calc-pct { width: 2.3em; }
section:is(.calculator, .negotiation) .calc-field-omzet[data-omzet="maand"] .calc-number { width: 4.1em; }
section:is(.calculator, .negotiation) .calc-number:hover { border-bottom-color: var(--accent-color); }
section:is(.calculator, .negotiation) .calc-number:focus { outline: none; border-bottom-color: var(--accent-color); background: rgba(120, 177, 198, 0.1); }

section.calculator .calc-slider { grid-column: 1 / -1; --band-x: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--band-from)); --band-y: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--band-to)); }
section.calculator .calc-range { display: block; width: 100%; height: 1.6rem; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --track: linear-gradient(to right, var(--line-color) var(--band-x), var(--my-soft-blue) var(--band-x) var(--band-y), var(--line-color) var(--band-y)); }
section.calculator .calc-range::-webkit-slider-runnable-track { height: 0.3rem; border-radius: 1rem; background: var(--track); }
section.calculator .calc-range::-moz-range-track { height: 0.3rem; border-radius: 1rem; background: var(--track); }
section.calculator .calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((0.3rem - var(--thumb)) / 2); border-radius: 50%; background: var(--surface-color); border: 2px solid var(--accent-color); box-shadow: 0 1px 4px rgba(65, 0, 22, 0.18); transition: transform 160ms var(--my-ease-out); }
section.calculator .calc-range::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border-radius: 50%; background: var(--surface-color); border: 2px solid var(--accent-color); box-shadow: 0 1px 4px rgba(65, 0, 22, 0.18); transition: transform 160ms var(--my-ease-out); }
section.calculator .calc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
section.calculator .calc-range:active::-moz-range-thumb { transform: scale(1.12); }
section.calculator .calc-range:focus-visible { outline: none; }
section.calculator .calc-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--my-soft-blue); outline-offset: 2px; }
section.calculator .calc-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--my-soft-blue); outline-offset: 2px; }
section.calculator .calc-scale { position: relative; display: flex; justify-content: space-between; margin-top: 0.2rem; font-size: var(--font-size-small); color: var(--soft-color); font-variant-numeric: tabular-nums; }
section.calculator .calc-band { position: absolute; top: 0; left: var(--band-x); width: calc(var(--band-y) - var(--band-x)); text-align: center; color: var(--my-soft-blue-deep); font-weight: var(--font-medium); }

/* Werkdagen per week (1-5) of per twee weken (1-10, in twee rijen van vijf). De
   lijnen tussen de knoppen zijn de achtergrond die door de gap van 1px valt. Omzet
   per werkdag of per maand gebruikt dezelfde schakelaar; wat dan niet meetelt
   (werkdagen, werkweken, de dag) krijgt data-relevant="false". */
section:is(.calculator, .negotiation) :is(.calc-days-wrap, .calc-omzet-wrap) { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
section:is(.calculator, .negotiation) .calc-board [data-relevant="false"] { display: none; }
section:is(.calculator, .negotiation) .calc-ritme { display: inline-flex; border: var(--hairline); border-radius: var(--border-radius); overflow: hidden; }
section:is(.calculator, .negotiation) .calc-ritme button { padding: 0.35rem 0.75rem; background: none; font-size: var(--font-size-small); font-weight: var(--font-medium); color: var(--soft-color); transition: background 160ms var(--my-ease-out), color 160ms var(--my-ease-out); }
section:is(.calculator, .negotiation) .calc-ritme button + button { border-left: var(--hairline); }
section:is(.calculator, .negotiation) .calc-ritme button:hover { background: rgba(120, 177, 198, 0.12); color: var(--accent-color); }
section:is(.calculator, .negotiation) .calc-ritme button[aria-pressed="true"] { background: var(--accent-color); color: var(--on-darkred); }
section:is(.calculator, .negotiation) .calc-ritme button:focus-visible { outline: 2px solid var(--my-soft-blue); outline-offset: -2px; }

section:is(.calculator, .negotiation) .calc-days { position: relative; display: grid; grid-template-columns: repeat(5, 2.3rem); gap: 1px; background: var(--line-color); border: var(--hairline); border-radius: var(--border-radius); overflow: hidden; }
section:is(.calculator, .negotiation) .calc-days input { position: absolute; opacity: 0; pointer-events: none; }
section:is(.calculator, .negotiation) .calc-days label { display: flex; align-items: center; justify-content: center; height: 2.3rem; background: var(--surface-color); font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h5); color: var(--soft-color); font-variant-numeric: tabular-nums; transition: background 160ms var(--my-ease-out), color 160ms var(--my-ease-out); }
section:is(.calculator, .negotiation) .calc-field-days[data-ritme="week"] .calc-days :is(input, label):nth-of-type(n+6) { display: none; }
section:is(.calculator, .negotiation) .calc-days label:hover { background: color-mix(in srgb, var(--my-soft-blue) 12%, var(--surface-color)); color: var(--accent-color); }
section:is(.calculator, .negotiation) .calc-days input:checked + label { background: var(--accent-color); color: var(--on-darkred); }
section:is(.calculator, .negotiation) .calc-days input:focus-visible + label { outline: 2px solid var(--my-soft-blue); outline-offset: -2px; }

section:is(.calculator, .negotiation) .calc-stepper { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h3); color: var(--accent-color); }
section:is(.calculator, .negotiation) .calc-stepper .calc-number { width: 1.7em; text-align: center; }
section:is(.calculator, .negotiation) .calc-stepper button { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: var(--hairline); border-radius: 50%; background: none; color: var(--accent-color); font-family: var(--primary-font); font-size: var(--font-size-h5); line-height: 1; transition: background 200ms var(--my-ease-out), color 200ms var(--my-ease-out), border-color 200ms var(--my-ease-out); }
section:is(.calculator, .negotiation) .calc-stepper button:hover { background: var(--my-soft-blue); border-color: transparent; color: var(--my-white); }

section:is(.calculator, .negotiation) .calc-result { display: flex; flex-direction: column; padding: 2rem 2.1rem 2.1rem; background: var(--accent-color); color: var(--on-darkred); }
section:is(.calculator, .negotiation) .calc-result .kicker { color: var(--my-soft-blue); margin-bottom: 1.4rem; }
section:is(.calculator, .negotiation) .calc-outcome { margin: 0; }
section:is(.calculator, .negotiation) .calc-outcome > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.75rem; border-top: 1px solid var(--on-darkred-line); }
section:is(.calculator, .negotiation) .calc-outcome dt { font-size: var(--font-size-body); color: var(--on-darkred-soft); }
section:is(.calculator, .negotiation) .calc-outcome dd { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h4); color: var(--on-darkred); font-variant-numeric: tabular-nums; white-space: nowrap; }
section.calculator .calc-outcome > .calc-year { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 0 1.3rem; border-top: 0; }
section.calculator .calc-year dt { font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; }
section.calculator .calc-year dd { font-size: 3.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--my-white); }
section.calculator .calc-year dd[data-size="long"] { font-size: 2.7rem; }
section:is(.calculator, .negotiation) .calc-note { margin: 0.9rem 0 0; font-size: var(--font-size-small); color: var(--on-darkred-soft); }
section:is(.calculator, .negotiation) .calc-cta { margin-top: auto; padding-top: 1.6rem; }
section:is(.calculator, .negotiation) .calc-cta p { margin: 0 0 1rem; padding-top: 1.3rem; border-top: 2px solid var(--on-darkred); color: var(--on-darkred); }
section:is(.calculator, .negotiation) .calc-foot { margin: 0; padding-block: 1.1rem 0.4rem; border-top: var(--hairline); font-size: var(--font-size-small); color: var(--soft-color); }

section:is(.calculator, .negotiation) .calc-static { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h4); color: var(--accent-color); font-variant-numeric: tabular-nums; }
section:is(.calculator, .negotiation) .calc-static-head { padding-top: 0.6rem; font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--soft-color); }
html:not(.js) section:is(.calculator, .negotiation) :is(.calc-money, .calc-slider, .calc-days-wrap, .calc-omzet-wrap, .calc-stepper, .lead:not(.calc-nojs)) { display: none; }
html.js section:is(.calculator, .negotiation) :is(.calc-static, .calc-static-head, .calc-nojs) { display: none; }

@media only screen and (max-width: 860px) {
    section:is(.calculator, .negotiation) .calc-board { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 560px) {
    section:is(.calculator, .negotiation) .calc-input { padding: 0.4rem 1.2rem 0.8rem; }
    section:is(.calculator, .negotiation) .calc-field { grid-template-columns: 1fr; gap: 0.6rem; }
    section:is(.calculator, .negotiation) .calc-field > :not(.calc-label, .calc-slider) { justify-self: start; }
    section:is(.calculator, .negotiation) :is(.calc-days-wrap, .calc-omzet-wrap) { align-items: flex-start; }
    section:is(.calculator, .negotiation) .calc-money .calc-number:not(.calc-pct) { text-align: left; }
    section:is(.calculator, .negotiation) .calc-result { padding: 1.6rem 1.2rem 1.4rem; }
    section.calculator .calc-year dd { font-size: 3rem; }
    section.calculator .calc-year dd[data-size="long"] { font-size: 2.3rem; }
    section:is(.calculator, .negotiation) .calc-cta .btn { width: 100%; }
}

/* =========================================================== */
/* ================= ONDERHANDEL-CALCULATOR ================== */
/* =========================================================== */

section.negotiation > .container > .calc-nojs { max-width: var(--max-width-narrow); margin-bottom: 2.4rem; color: var(--soft-color); font-size: var(--font-size-lead); line-height: var(--line-height-large); }
section.negotiation .calc-board { grid-template-columns: 1.2fr 0.8fr; overflow: clip; }
section.negotiation .calc-input { --pad-x: 2.1rem; padding-inline: var(--pad-x); }

section.negotiation .nego-practice { min-width: 0; margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); border-top: var(--hairline); }
section.negotiation .nego-head { display: flex; align-items: center; gap: 0.8rem; min-height: 1.9rem; padding-top: 1.8rem; }
section.negotiation .nego-title { margin: 0; font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h4); color: var(--accent-color); }
section.negotiation .nego-remove { margin-left: auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border: var(--hairline); border-radius: 50%; background: var(--surface-color); color: var(--accent-color); font-size: var(--font-size-h5); line-height: 1; transition: background 200ms var(--my-ease-out), color 200ms var(--my-ease-out), border-color 200ms var(--my-ease-out); }
section.negotiation .nego-remove:hover { background: var(--accent-color); border-color: transparent; color: var(--on-darkred); }

section.negotiation .nego-practice .calc-field-omzet { border-top: 0; padding-block: 1.1rem 1rem; }
section.negotiation .nego-practice .calc-field-days { padding-block: 1.1rem 1rem; }
section.negotiation .nego-pcts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding-block: 1rem 1.4rem; border-top: var(--hairline); }
section.negotiation .nego-pct { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
section.negotiation .nego-pct label { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h5); color: var(--accent-color); }
section.negotiation .nego-pct + .nego-arrow + .nego-pct { align-items: flex-end; }
section.negotiation .nego-arrow { padding-bottom: 0.35rem; font-size: var(--font-size-h4); color: var(--my-soft-blue-dark); }

section.negotiation .nego-add { width: 100%; margin-block: 0.4rem 1.2rem; padding: 0.85rem; border: 1.5px dashed var(--my-soft-blue-dark); border-radius: var(--border-radius); background: none; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h5); color: var(--accent-color); transition: background 160ms var(--my-ease-out), border-color 160ms var(--my-ease-out); }
section.negotiation .nego-add:hover { background: rgba(120, 177, 198, 0.12); border-color: var(--accent-color); }
section.negotiation :is(.nego-add, .nego-remove):focus-visible { outline: 2px solid var(--my-soft-blue); outline-offset: 2px; }
section.negotiation .nego-list + .calc-foot { margin-top: 0.4rem; }

/* Sticky alleen als het bord in het scherm past; anders zet setupStickyFit()
   data-sticky="false" en scrolt het gewoon mee. */
section.negotiation .nego-sticky { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; --sticky-top: 5.6rem; }
section.negotiation .nego-sticky[data-sticky="false"] { position: static; }
html[data-anchor="vast"] { overflow-anchor: none; }
section.negotiation .nego-total { padding-bottom: 1.3rem; }
section.negotiation .nego-year { margin: 0 0 0.5rem; font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--on-darkred-soft); }
section.negotiation .nego-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; margin: 0 0 1.1rem; color: var(--on-darkred-soft); }
section.negotiation .nego-range b { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: var(--font-size-h4); color: var(--on-darkred); font-variant-numeric: tabular-nums; white-space: nowrap; }
section.negotiation .nego-range .nego-to { color: var(--my-soft-blue); }
section.negotiation .nego-gain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0; color: var(--on-darkred-soft); }
section.negotiation .nego-gain b { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; color: var(--my-white); font-variant-numeric: tabular-nums; white-space: nowrap; }
section.negotiation .nego-gain b[data-size="long"] { font-size: 2.7rem; }
section.negotiation .nego-month dd { font-size: var(--font-size-h4); }
section.negotiation .nego-sub { margin: 1.1rem 0 0.2rem; font-size: var(--font-size-small); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--on-darkred-soft); }
section.negotiation .nego-rows > div { padding-block: 0.5rem; }
section.negotiation .nego-rows > div:first-child { border-top: 0; }
section.negotiation .nego-rows > div[hidden] { display: none; }
section.negotiation .nego-rows dt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
section.negotiation .nego-rows dt small { font-size: var(--font-size-small); color: var(--on-darkred-soft); opacity: 0.8; }
section.negotiation .nego-rows dd { font-size: var(--font-size-h5); }

html:not(.js) section.negotiation :is(.nego-remove, .nego-add) { display: none; }

@media only screen and (max-width: 860px) {
    section.negotiation .calc-board { grid-template-columns: 1fr; }
    section.negotiation .nego-sticky { position: static; }
}
@media only screen and (max-width: 560px) {
    section.negotiation .calc-input { --pad-x: 1.2rem; }
    section.negotiation .nego-head { padding-top: 1.4rem; }
    section.negotiation .nego-pcts { gap: 0.6rem; }
    section.negotiation .nego-pct label { font-size: var(--font-size-small); }
    section.negotiation .nego-gain b { font-size: 3rem; }
    section.negotiation .nego-gain b[data-size="long"] { font-size: 2.3rem; }
}

/* =========================================================== */
/* =========================== FAQ =========================== */
/* =========================================================== */

section.faq { background: var(--background-color); }
section.faq .faq-list, section.explainer .faq-list { border-top: var(--hairline); }

section.faq .faq-item, section.explainer .faq-item { border-bottom: var(--hairline); }
section.faq .faq-q, section.explainer .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h4); color: var(--accent-color); cursor: pointer; list-style: none;  }
section.faq .faq-q::-webkit-details-marker, section.explainer .faq-q::-webkit-details-marker { display: none; }
section.faq div.faq-q { padding-bottom: 2rem; }

section.faq .faq-icon, section.explainer .faq-icon { position: relative; flex-shrink: 0; width: 1rem; height: 1rem; }
section.faq .faq-icon::before, section.faq .faq-icon::after, section.explainer .faq-icon::before, section.explainer .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 2px; background: var(--accent-color); transform: translate(-50%, -50%); transition: transform 250ms var(--my-ease-out); }
section.faq .faq-icon::after, section.explainer .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
section.faq .faq-item[open] .faq-icon::after, section.explainer .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
section.faq .faq-a, section.explainer .faq-a { overflow: hidden; }
section.faq .faq-a p, section.explainer .faq-a p { color: var(--soft-color); padding-bottom: 1.25rem; margin: 0; max-width: 38rem; }
section div.faq-a { padding-bottom: 1rem;}

section.faq .faq-item[data-animated] .faq-a, section.explainer .faq-item[data-animated] .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--my-ease-out); }
section.faq .faq-item[data-animated][open] .faq-a, section.explainer .faq-item[data-animated][open] .faq-a { grid-template-rows: 1fr; }
section.faq .faq-item[data-animated] .faq-a > *, section.explainer .faq-item[data-animated] .faq-a > * { min-height: 0; }

/* =========================================================== */
/* ======================== CTA BANNER ======================= */
/* =========================================================== */

section.cta-banner { background: var(--accent-color); color: var(--on-darkred); }
section.cta-banner .cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 3rem; align-items: flex-end; padding-block: 2.6rem; border-top: 2px solid var(--on-darkred); border-bottom: 2px solid var(--on-darkred); }
section.cta-banner .h2 { color: var(--on-darkred); margin-bottom: 0.3em; }
section.cta-banner .lead { color: var(--on-darkred-soft); font-size: var(--font-size-lead); margin: 0; }
/* Knop en App Store-badge naast elkaar in de rechterkolom (DD-041): de web-knop
   eerst, de badge als tweede, verticaal gecentreerd en met dezelfde gap als de
   hero. Apple's artwork onaangetast (alleen height, breedte naar rato): de
   hoogte volgt --btn-height, zodat de badge even hoog is als de knop ernaast,
   witte variant op het donkerrode bord. Zonder badge staat de knop precies
   waar hij stond. */
section.cta-banner .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
section.cta-banner .app-store-badge { position: relative; display: inline-flex; align-items: center; }
section.cta-banner .app-store-badge img { display: block; width: auto; height: var(--btn-height); }

@media only screen and (max-width: 768px) {
    section.cta-banner .cta-inner { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2rem; }
    /* Op mobiel blijft de knop over de volle breedte staan zoals hij altijd stond;
       de badge zakt eronder. */
    section.cta-banner .cta-actions .btn { flex: 1 1 100%; }
}

/* =========================================================== */
/* =================== APP-DOWNLOAD POPUP ==================== */
/* =========================================================== */

/* De QR-popup achter de knop "Download de app" (DD-042), en dezelfde inhoud op de
   pagina /app/. Mechaniek uit swipe4work (overlay, .inner, transitie), maar op een
   <dialog>: de browser regelt dan zelf de top-layer, de focus-val en Escape.
   De dialog vult het scherm en centreert de .inner; klikken naast de .inner is dus
   een klik op de dialog zelf en sluit hem (setupAppDownload). */
dialog.app-popup { width: 100%; max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: none; color: var(--main-color); overflow: hidden; }
dialog.app-popup[open] { display: grid; place-items: center; }
dialog.app-popup::backdrop { background: rgba(26, 22, 15, 0.55); }

/* De kaart zelf: licht papier met een hairline, zoals het hero-bord. Hij komt van
   onderen omhoog. @starting-style geeft de begintoestand voor het openen; browsers
   die het niet kennen tonen de kaart gewoon meteen. */
dialog.app-popup .app-popup-inner { position: relative; width: var(--width); max-width: 22rem; max-height: calc(100% - 2rem); overflow-y: auto; padding: 2.4rem 1.8rem 2rem; background: var(--surface-color); border: var(--hairline); border-radius: var(--border-radius-lg); text-align: center; opacity: 1; transform: none; transition: opacity 300ms var(--my-ease-out), transform 300ms var(--my-ease-out); }
@starting-style { dialog.app-popup[open] .app-popup-inner { opacity: 0; transform: translateY(1.2rem); } }

/* Sluitknop rechtsboven: hetzelfde kruis als in swipe4work, in de kleuren hier. */
dialog.app-popup .app-popup-close { position: absolute; top: 0.55rem; right: 0.55rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: none; color: var(--accent-color); transition: background 200ms var(--my-ease-out), color 200ms var(--my-ease-out); }
dialog.app-popup .app-popup-close:hover { background: var(--accent-color); color: var(--on-darkred); }
dialog.app-popup .app-popup-close span { position: relative; display: block; width: 0.8rem; height: 0.8rem; }
dialog.app-popup .app-popup-close span::before, dialog.app-popup .app-popup-close span::after { content: ""; position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; border-radius: 1rem; background: currentColor; transform: rotate(var(--r, 45deg)); }
dialog.app-popup .app-popup-close span::after { --r: -45deg; }

/* De inhoud: titel, tekst, QR en badges. Gedeeld met de pagina /app/, dus geen
   selectoren die van de popup afhangen. */
.app-panel-title { color: var(--accent-color); }
.app-panel-text { max-width: 24em; margin-inline: auto; color: var(--soft-color); }
.app-panel-qr { width: 9rem; margin: 1.4rem auto 0; padding: 0.6rem; background: var(--my-white); border: var(--hairline); border-radius: var(--border-radius); }
.app-panel-qr img { display: block; width: 100%; height: auto; }
.app-panel-qr figcaption { margin-top: 0.5rem; font-size: var(--font-size-small); color: var(--soft-color); }
.app-panel-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.4rem; }
.app-panel-badges a { position: relative; display: inline-flex; }
.app-panel-badges img { display: block; width: auto; height: 40px; }

/* De pagina /app/: dezelfde kaart-inhoud, maar los op de achtergrond en op
   leesbreedte. Wie hier op een telefoon komt gaat door naar de store
   (app-redirect.js); op een laptop blijf je hier en scan je de code. */
section.app-page { padding-block: var(--section-pad-y); }
section.app-page .container { max-width: var(--max-width-narrow); text-align: center; }

/* =========================================================== */
/* ==================== COMPONENT LIBRARY ==================== */
/* =========================================================== */

/* ----- STATS / kerngegevens ----- */
section.stats { background: var(--background-color); }
section.stats .stat-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 2.6rem; }
section.stats .stat { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding-block: 1.15rem; border-top: var(--hairline); }
section.stats .stat:last-child { border-bottom: var(--hairline); }
section.stats .stat-value { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 0.08em; margin: 0; font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 2.9rem; line-height: 1; color: var(--accent-color); font-variant-numeric: tabular-nums; letter-spacing: -0.03em;  width: 2.5em; }
section.stats .stat-value .counter { display: inline-flex; }
section.stats .stat-affix { font-size: 0.52em; font-weight: var(--font-medium); color: var(--soft-color); }
section.stats .stat-label { color: var(--soft-color); font-size: var(--font-size-lead); margin: 0; }
@media only screen and (max-width: 640px) {
    section.stats .stat-list { display: flex; flex-direction: column; }
    section.stats .stat { grid-template-columns: 1fr; row-gap: 0.25rem; }
    section.stats .stat-value { justify-content: flex-start; }
}

/* ----- TESTIMONIALS ----- */
section.testimonials { background: var(--my-grey); }
section.testimonials .testimonial-list { display: flex; flex-direction: column; }
section.testimonials .testimonial { display: grid; grid-template-columns: 1fr auto; column-gap: 2.6rem; align-items: baseline; padding-block: 1.5rem; border-top: var(--hairline); }
section.testimonials .testimonial:last-child { border-bottom: var(--hairline); }
section.testimonials .testimonial-quote { margin: 0; max-width: 34rem; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h4); line-height: var(--line-height-regular); color: var(--accent-color); letter-spacing: -0.01em; }
section.testimonials .testimonial-by { display: flex; flex-direction: column; gap: 0.1rem; text-align: right; }
section.testimonials .testimonial-name { font-weight: var(--font-semibold); color: var(--main-color); }
section.testimonials .testimonial-role { font-size: var(--font-size-small); color: var(--soft-color); }

@media only screen and (max-width: 640px) {
    section.testimonials .testimonial { grid-template-columns: 1fr; row-gap: 0.6rem; }
    section.testimonials .testimonial-by { text-align: left; }
}

/* ----- SPLIT tekst + beeld ----- */
section.split { background: var(--surface-color); overflow: hidden; }
section.split .split-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4.4rem; align-items: center; }
section.split.reverse .split-media { order: -1; }
section.split .split-copy { max-width: 30rem; }
section.split .split-lead { color: var(--soft-color); font-size: var(--font-size-lead); line-height: var(--line-height-large); margin-top: 0.4rem; }
/* De vinkjeslijst is gedeeld met de App Slider, zodat die twee secties elkaar op
   de homepage kunnen vervangen zonder dat de opsomming er anders uit gaat zien. */
.split-points { display: flex; flex-direction: column; margin: 1.6rem 0 0; }
.split-points li { position: relative; padding: 0.65rem 0 0.65rem 1.8rem; color: var(--main-color); border-top: var(--hairline); }
.split-points li:last-child { border-bottom: var(--hairline); }
.split-points li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 1.05em; height: 1.05em; background: var(--my-soft-blue-dark); -webkit-mask: var(--check-mask) center / 0.85em no-repeat; mask: var(--check-mask) center / 0.85em no-repeat; }
section.split .split-actions { margin-top: 2rem; }
section.split .split-media { margin: 0; }
section.split .split-image, section.split .split-media picture { display: block; width: 100%; height: auto; border: var(--hairline); border-radius: var(--border-radius); overflow: hidden; }
section.split .split-media picture { display: flex; }
section.split .split-caption { margin-top: 0.7rem; font-size: var(--font-size-small); color: var(--soft-color); }
@media only screen and (max-width: 820px) {
    section.split .split-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    section.split .split-copy { max-width: 34rem; }
    section.split.reverse .split-media { order: 0; }
}

/* ----- STATEMENT (grote typografische adempauze) ----- */
section.statement { background: var(--my-grey); text-align: center; padding-block: var(--section-pad-y) !important; }
section.statement .container { max-width: 48rem; }
section.statement .statement-kicker { justify-content: center; margin-bottom: 1.6rem; }
section.statement .statement-text { font-family: var(--header-font); font-weight: var(--font-semibold); font-size: 3.2rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent-color); margin: 0; }
section.statement .statement-text em { font-style: normal; color: var(--my-soft-blue-dark); }
section.statement .statement-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2.4rem; }

section.statement[data-scheme="dark"] { background: var(--accent-color); }
section.statement[data-scheme="dark"] .statement-text { color: var(--on-darkred); }
section.statement[data-scheme="dark"] .statement-text em { color: var(--my-soft-blue); }

@media only screen and (max-width: 768px) {
    section.statement .statement-text { font-size: 2rem;}
}

/* ----- EXPLAINER (accordion + media) ----- */
section.explainer { background: var(--surface-color); }
section.explainer .container { max-width: 41rem;}
section.explainer .explainer-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 3rem; align-items: center; }

section.explainer .explainer-grid.no-media { grid-template-columns: 1fr; max-width: 44rem; }
section.explainer.reverse .explainer-media { order: 1; }
section.explainer .explainer-media { margin: 0; border: var(--hairline); border-radius: var(--border-radius); overflow: hidden; align-self: stretch; }
section.explainer .explainer-image { display: block; width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 820px) {
    section.explainer .explainer-grid { grid-template-columns: 1fr; gap: 2rem; }
    section.explainer.reverse .explainer-media { order: 0; }
}

section.standard article.prose { max-width: 40rem; margin-inline: auto; }
.prose table { border-collapse: collapse;}
.prose table :is(td,tr) { border: 1px solid var(--main-color); padding: 0.5rem; }

/* --------------- CONTENT SECTION --------------- */
section.content { background: var(--background-color); }
section.content.white { background: var(--background-color); }
section.content.grey { background: var(--my-grey); }
section.content > .container { max-width: var(--max-width-narrow); }
section.content > .container > * + * { margin-top: 1.6rem; }
section.content .text .kicker { margin-bottom: 0.9rem; }
section.content .title h2 { margin: 0; }
section.content nav.buttons { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; margin-top: 2rem; }
section.content .images { display: grid; gap: 1rem; }
section.content .images:not([data-count="1"]) { grid-template-columns: repeat(2, 1fr); }
section.content .images img { display: block; width: 100%; height: auto; border: var(--hairline); border-radius: var(--border-radius); }
section.content .quote { padding-left: 1.3rem; border-left: var(--hairline); }
section.content .quote blockquote { margin: 0; font-family: var(--header-font); font-weight: var(--font-medium); color: var(--accent-color); letter-spacing: -0.01em; }
section.content .quote .kicker { margin: 0.8rem 0 0; }
section.content .signature { display: flex; align-items: center; gap: 1.2rem; padding-top: 1.4rem; border-top: var(--hairline); }
section.content .signature .media { width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
section.content .signature .who p { margin: 0; }
section:is(.content,.standard) .prose h2 { font-size: var(--font-size-h3); }
section:is(.content,.standard) .prose h3 { font-size: var(--font-size-h4); }
section:is(.content,.standard) .prose h4 { font-size: var(--font-size-h5); }
section:is(.content,.standard) .prose h5 { font-size: var(--font-size-h6); }

section.content:first-of-type:first-of-type  { padding-top: 7.5rem;}
section.content:first-of-type:first-of-type h1::after { content: "."; color: var(--my-soft-blue); }

@media only screen and (max-width: 560px) {
    section.content .images:not([data-count="1"]) { grid-template-columns: 1fr; }
}

/* --------------- BLOG INDEX --------------- */
section.blog-index { background: var(--background-color); padding-block: 6rem 5.4rem; }
section.blog-index .section-head { max-width: 44rem; }
section.blog-index .section-head .lead a { text-decoration: underline; text-underline-offset: .2em; transition: color 160ms var(--my-ease-out); }
section.blog-index .section-head .lead a:hover { color: var(--my-primary); }
section.blog-index .blog-list { list-style: none; margin-top: 1rem; border-top: var(--hairline); }
section.blog-index .blog-row { border-bottom: var(--hairline); }
section.blog-index .blog-row-link { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: baseline; gap: 0.6rem 1.6rem; padding-block: 1.5rem; color: var(--main-color); transition: color 160ms var(--my-ease-out); }
section.blog-index .blog-row-date { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; color: var(--soft-color); white-space: nowrap; }
section.blog-index .blog-row-title { display: block; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h4); letter-spacing: -0.01em; line-height: 1.2; }
section.blog-index .blog-row-excerpt { display: block; margin-top: 0.45rem; font-size: var(--font-size-small); line-height: var(--line-height-regular); color: var(--soft-color); max-width: 52ch; }
section.blog-index .blog-row-arrow { align-self: center; color: var(--soft-color); font-size: var(--font-size-h5); transition: transform 200ms var(--my-ease-out), color 160ms var(--my-ease-out); }
section.blog-index .blog-row-link:hover { color: var(--my-primary); }
section.blog-index .blog-row-link:hover .blog-row-arrow { transform: translateX(0.3rem); color: var(--my-primary); }
@media only screen and (max-width: 560px) {
    section.blog-index .blog-row-link { grid-template-columns: 1fr auto; }
    section.blog-index .blog-row-date { grid-column: 1 / -1; order: -1; }
}

/* --------------- BLOG POST (single) --------------- */
/* De blog-variant van section.content: een kop (titel, datum, leestijd) boven
   een leeskolom met een sticky TOC ernaast. Alles binnen de content-sectie. */
section.content.blog-content { padding-block: 5.8rem 0; }
section.content.blog-content > .container { max-width: var(--max-width); }
section.content.blog-content > .container > * + * { margin-top: 0; }

section.content.blog-content .blog-post-head { margin-bottom: 2.6rem; }
section.content.blog-content .blog-breadcrumb { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); margin-bottom: 1.1rem; }
section.content.blog-content .blog-breadcrumb a { color: var(--soft-color); transition: color 160ms var(--my-ease-out); }
section.content.blog-content .blog-breadcrumb a:hover { color: var(--my-primary); }
section.content.blog-content .blog-post-head h1.h1 { max-width: 22ch; margin-bottom: 1rem; }
section.content.blog-content .blog-details { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: baseline; font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); color: var(--soft-color); font-variant-numeric: tabular-nums; }
section.content.blog-content .blog-details-sep { opacity: 0.5; }

section.content.blog-content .blog-post-body { display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; gap: 3.4rem; align-items: start; padding-bottom: var(--margin-y); }
section.content.blog-content .blog-article { min-width: 0; }
section.content.blog-content .blog-article > * + * { margin-top: 1.6rem; }
section.content.blog-content .prose :is(h2, h3) { scroll-margin-top: 5.2rem; }

.blog-side { position: sticky; top: 5.6rem; align-self: start; }
.blog-toc-label { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--my-soft-blue-dark); margin-bottom: 0.8rem; }
.blog-toc ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; border-left: var(--hairline); }
.blog-toc a { display: block; font-size: var(--font-size-small); line-height: 1.3; color: var(--soft-color); border-left: 2px solid transparent; margin-left: -1px; padding-left: 0.9rem; transition: color 160ms var(--my-ease-out), border-color 160ms var(--my-ease-out); }
.blog-toc a:hover { color: var(--main-color); }
.blog-toc a.active { color: var(--my-primary); border-left-color: var(--my-primary); }
/* Rustig kaartje naar de rekenhulp onder de TOC (DD-051). */
.blog-calc { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; background: var(--surface-color); border: var(--hairline); border-radius: var(--border-radius); }
.blog-toc + .blog-calc { margin-top: 2.2rem; }
.blog-calc-text { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-small); line-height: 1.3; color: var(--main-color); }
.blog-calc-link { font-size: var(--font-size-small); font-weight: var(--font-semibold); color: var(--my-primary); }
.blog-calc-link:hover { color: var(--accent-color); }
@media only screen and (max-width: 860px) {
    section.content.blog-content { padding-top: 4.8rem; }
    section.content.blog-content .blog-post-body { grid-template-columns: 1fr; }
    .blog-side { position: static; }
    .blog-toc { display: none; }
    .blog-toc + .blog-calc { margin-top: 0; }
    .blog-calc { max-width: 24rem; }
}

/* --------------- MEER BLOGPOSTS --------------- */
section.blog-related { background: var(--background-color); padding-block: 4.4rem 4.8rem; }
section.blog-related .section-head { margin-bottom: 1.8rem; }
section.blog-related .blog-related-cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
section.blog-related .blog-card { border-top: 2px solid var(--main-color); }
section.blog-related .blog-card-link { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding-top: 1rem; color: var(--main-color); }
section.blog-related .blog-card-date { font-family: var(--header-font); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; color: var(--soft-color); }
section.blog-related .blog-card-title { font-family: var(--header-font); font-weight: var(--font-medium); font-size: var(--font-size-h4); line-height: 1.2; letter-spacing: -0.01em; transition: color 160ms var(--my-ease-out); }
section.blog-related .blog-card-excerpt { font-size: var(--font-size-small); line-height: var(--line-height-regular); color: var(--soft-color); }
section.blog-related .blog-card-more { margin-top: auto; padding-top: 0.7rem; font-size: var(--font-size-small); font-weight: var(--font-semibold); color: var(--my-primary); }
section.blog-related .blog-card-link:hover .blog-card-title { color: var(--my-primary); }
@media only screen and (max-width: 720px) {
    section.blog-related .blog-related-cards { grid-template-columns: 1fr; }
}

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; }
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + * { margin-top: .2em;}
.prose p + ul { margin-top: 0.5em;}

/* --------------- 404 PAGE --------------- */
section.not-found .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: var(--margin); }

/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies {
    --odf_main_color: black;
    --odf_background_color: white;
    --odf_highlight_color: maroon;
}

/* --------------- GLOBAL MEDIA QUERIES --------------- */
@media only screen and (max-width: 900px) {
    :root {
        --font-size-h1: 2.5rem;
        --section-pad-y: 3.4rem;
    }
}

@media only screen and (max-width: 850px) {
    :root {
        --logo-width: 4.5rem;
        --gutter-top: 1rem;
        --gutter-side: 1.2rem;
        --font-size-h1: 2.3rem;
        --font-size-h2: 1.7rem;
        --font-size-body: 1rem;
    }
}

@media only screen and (max-width: 480px) {
    html { font-size: 16px; }
    :root {
        --font-size-h1: 2rem;
        --gutter-side: 1.1rem;
    }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}


/* --------------- ANIMATIONS --------------- */
html.js .activate-children > * { transition: transform 600ms var(--my-ease-out), opacity 600ms var(--my-ease-out); transition-delay: calc(var(--cascade, 0) * var(--own-delay, 90ms)); }
html.js .activate-children.activate > * { transform: translateY(1.4rem); opacity: 0; }

html.js section.hero .activate-children > tr.board-arrival { transition-duration: 750ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
html.js section.hero .activate-children.activate > tr.board-arrival { transform: translateY(2rem); }

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion: reduce) {
    html.js .activate-children > *, html.js .activate-children.activate > * { opacity: 1; transform: none; transition: none; }
    html.js section.hero .activate-children > tr.board-arrival, html.js section.hero .activate-children.activate > tr.board-arrival { transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* =========================================================== */
/* ================ EXTRAS (voorheen extras.css) ============= */
/* =========================================================== */
/* --------------- FORMULIER --------------- */
/* Uit .parking/extras.css. De youturn-variabelen zijn hier naar dentalfacts
   palet gemapt; de rest is 1-op-1 overgenomen (floating labels, select,
   required-asterisk, e-mailvalidatie). */
form.custom {
    --scheme-primary: var(--main-color);
    --scheme-background: var(--surface-color);
    --primaryFont: var(--primary-font);
    --font-semi-bold: var(--font-semibold);
}

form.custom {
    /* Layout */
    --form-columns: 1;
    --form-gap: 1em;

    /* Inputs */
    --form-main-color: var(--scheme-primary);
    --form-input-background-color: var(--background-color);
    --form-padding-x: .7em;
    --form-padding-y: .7em;
    --form-padding: var(--form-padding-x) var(--form-padding-y);

    /* Borders */
    --form-border-color: var(--line-color);
    --form-border-width: 1px;
    --form-border-radius: var(--border-radius);

    /* Labels */
    --form-label-color: var(--soft-color);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--scheme-background);
    --form-label-asterisk-color: var(--accent-color);
    --form-label-transform-distance: 80%;

    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--my-primary);
    --form-color-error: var(--accent-color);

    /* Transition */
    --form-transition: 250ms var(--my-ease-out);
}
/* LAYOUT */
form.custom { position: relative; width: 100%; margin: 0; }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap);}
form.custom fieldset > div { position: relative; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primaryFont); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), padding var(--form-transition); border: var(--form-border-width) solid var(--form-border-color);  background: var(--form-input-background-color); border-radius: var(--form-border-radius); }
form.custom :is(textarea, input, select):focus-visible { outline: none; border: var(--form-border-width) solid var(--form-color-focus); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

/* TEXTAREA EXTRA'S */
form.custom .normal textarea { min-width: 100%; max-width: 100%; resize: none;  border: var(--form-border-width) solid var(--form-border-color); }
form.custom .normal textarea:focus-visible { border: var(--form-border-width) solid var(--form-color-focus);  }

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 2em; }

/* LABEL */
form.custom .normal label { position: absolute;  top: calc(var(--form-padding-y) - .1em);  left: var(--form-padding-x); opacity: .85; pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color);  border-radius: var(--form-label-border-radius);}
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { transform: translate(calc(var(--form-padding-x) * -.5), calc(var(--form-label-transform-distance) * -1)) scale(0.7); padding: 0 .2em 0 0.5em; opacity: 1; background: var(--form-label-background-color); max-width: unset; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))):not([required]) + label, form.custom .select[data-active=true] select:not([required]) + label { padding: 0 .5em;}

/* ASTERISK */
form.custom .normal :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em; color: var(--form-label-asterisk-color); transition: var(--form-transition); }
form.custom .normal :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }

/* EMAIL VALIDATION */
form.custom input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Ongeldig"; display: inline-block; margin-left: 0.5em; padding: 0 0.5em; color: var(--form-color-error); }

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color);  border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: var(--form-padding-y); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); font-weight: var(--font-semi-bold); opacity: 0; }
form.custom .select[data-active=true]  span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em;   }
form.custom .field ul li { position: relative; display: flex;  color: var(--form-label-color);}
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }
form.custom .btn { font-size: inherit;}

/* CAPTCHA NOTICES */
form.custom small { font-size: .6rem; opacity: 1; }
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* --------------- CONTACTSECTIE --------------- */
section.contact { background: var(--background-color); padding-block: 6rem 5.4rem; }
section.contact:only-child { min-height: 100%; }
section.contact.white { background: var(--surface-color); }
section.contact.grey { background: var(--my-grey); }
section.contact > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3.6rem; align-items: start; }
section.contact .contact-intro { max-width: 30rem; }
section.contact .contact-intro .prose { margin-top: 0.9rem; }
section.contact .contact-intro nav.buttons { margin-top: 1.8rem; }
section.contact .contact-company { margin-top: 2.4rem; padding-top: 1.4rem; border-top: var(--hairline); font-size: var(--font-size-small); line-height: var(--line-height-large); color: var(--soft-color); font-variant-numeric: tabular-nums; }
section.contact .contact-company .kicker { margin-bottom: 0.6rem; }
section.contact .contact-company a { color: var(--my-primary); }
@media only screen and (max-width: 760px) {
    section.contact > .container { grid-template-columns: 1fr; gap: 2.6rem; }
    section.contact .contact-intro { max-width: none; }
}

/* --------------- FAQ ACCORDION (uit .parking, met max-height-transitie) --------------- */
ul.faq { --faq-main-color: var(--main-color); }
ul.faq { list-style: none; padding: 0; width: 100%; max-width: var(--max-width-narrow); margin-inline: auto; border-top: var(--hairline); }
ul.faq button { color: inherit; background: inherit; border: 0; font-size: inherit; display: block; line-height: 1.3; width: 100%; text-align: left; font-weight: var(--font-medium); font-family: var(--header-font); }
ul.faq > li { border-bottom: var(--hairline); }
ul.faq > li h3 { margin-bottom: 0; }
ul.faq > li button { padding: 1.05rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: pointer; transition: color 333ms ease; background: transparent; color: var(--faq-main-color); }
ul.faq > li button:hover { color: var(--my-primary); }
ul.faq > li button span { position: relative; width: 1.1rem; height: 1.1rem; display: flex; align-items: center; justify-content: center; color: var(--accent-color); flex-shrink: 0; }
ul.faq > li button span::before, ul.faq > li button span::after { content: ""; position: absolute; width: .7rem; height: 2px; border-radius: 1rem; background: currentColor; transform: rotate(var(--r, 0deg)); transition: transform 333ms ease; }
ul.faq > li button span::before { --r: -90deg; }
ul.faq > li > div { transition: padding 333ms ease, max-height 333ms ease; overflow: hidden; color: var(--faq-main-color); }
ul.faq > li > div > div { transform: translateY(-.5rem); transition: transform 333ms ease; padding: 0 0 1.3rem; }
ul.faq > li > div > div > *:last-child { margin-bottom: 0; }
ul.faq > li > div[aria-hidden=true] { max-height: 0px; }
ul.faq > li > div[aria-hidden=false] { max-height: var(--height, unset); }
ul.faq > li > div[aria-hidden=false] > div { transform: none; }
ul.faq > li button[aria-expanded=true] span::before { --r: 0deg; }
/* In de explainer (naast een beeld) niet centreren op leesbreedte. */
section.explainer ul.faq { margin-inline: 0; }