:root {
    /* Exacte huisstijlkleuren zoals opgegeven */
    --color-primary: #000F47;
    --color-primary-title: #000F47;
    --color-primary-foreground: hsl(0 0% 100%);
    --color-secondary: #0B4BFF;
    --color-light-blue: #CEECFF;
    --color-muted: hsl(215 16% 47%);
    --color-border: hsl(214 18% 88%);
    --color-background: #ffffff;
    --color-body-bg: #f9f9f9;
    --color-soft: #f1f1f1;
    --color-disabled: #8b96b5;
    --text-dark: #3D3C37;
    --color-hero-bg: #000F47;
    --color-hero-bg-soft: #000F47;
    --color-hero-sky: #DCEAFB;
    --color-accent-gold: #FFBF00;
    --color-accent-gold-dark: #CC9900;
    --color-card-tint: #EAF4FF;
    --color-cream: #F7F3EE;
    --color-pale-blue: #EAF4FF;
    --font-headline: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--color-body-bg);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; }
button, input, textarea { font: inherit; }

.container {
    width: min(100% - 40px, 1200px);
    margin: 0 auto;
    padding: 0;
}
section { padding: 64px 0; }

.animate-on-scroll { opacity: 1; transform: none; }
.label-uppercase {
    display: block;
    color: var(--color-secondary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Cursief accentwoord in koppen, zoals "collectieve" op jouwzorgkeuze.nl */
.italic-accent {
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary);
}

/* buttons */
.cta-primary, .cta-secondary, .cta-light, .cta-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 48px;
    border-radius: 7px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.cta-primary {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.cta-primary:hover { opacity: .92; }
.cta-secondary, .cta-light {
    background: #fff;
    color: var(--color-muted);
    border-color: transparent;
    text-decoration: underline;
    min-height: auto;
    padding: 0;
}
.cta-secondary:hover, .cta-light:hover { color: var(--color-primary); }
.material-icons { font-size: 20px; line-height: 1; }

/* header */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 0;
}
.main-header .container { width: min(100% - 40px, 1320px); }
.main-nav {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.logo-group { flex: 0 0 auto; }
.logo a {
    display: block;
    width: 180px;
    height: 42px;
    background: none;
}
.mmb-logo { display: none; }
.nav-links-desktop { display: none; }
.cta-header {
    margin-left: auto;
    width: auto;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 7px;
    background: #fff;
    color: var(--text-dark);
    font-size: .75rem;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/*
.cta-header::after {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3Cpath d='M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3Cpath d='M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E") center / contain no-repeat;
}
*/
.cta-header:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* hero */
.hero-section {
    position: relative;
    min-height: auto;
    padding: 72px 0 64px;
    text-align: left;
    background: var(--color-hero-sky);
    overflow: hidden;
}
/* Decoratieve illustratie i.p.v. foto: bleedt over de volledige rechterkant
   van de hero, los van de container-breedte (net als jouwzorgkeuze.nl) */
.hero-visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    min-width: 420px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.hero-illustration { width: 100%; height: 100%; }
.ill-navy { fill: var(--color-primary); }
.ill-gold { fill: var(--color-accent-gold); }
.ill-white { fill: #fff; }
.ill-gold-rays line { stroke: var(--color-accent-gold); stroke-width: 9; stroke-linecap: round; }
.ill-navy-line { fill: none; stroke: var(--color-primary); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ill-navy-line-thin { stroke: var(--color-primary); stroke-width: 6; stroke-linecap: round; }

.hero-container {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 1320px);
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 560px;
}
.hero-top {
    max-width: 560px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.hero-eyebrow { margin: 0; }
.hero-headline {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-headline);
    font-size: clamp(2.6rem, 4.2vw, 3.75rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.hero-headline .highlight-primary {
    color: var(--color-primary);
}
.hero-headline .highlight-accent {
    display: inline-block;
    color: var(--color-secondary);
    font-style: italic;
    font-weight: 500;
    transform: none;
    text-shadow: none;
}
.hero-subheadline {
    margin: 0;
    max-width: 520px;
    color: var(--color-muted);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    font-weight: 400;
}

.hero-widget-column {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    scroll-margin-top: 90px;
}
/* De iframe-kaart en de advies-optie samen in 1 witte kaart, gescheiden
   door een 'of'-lijn - zo krijgt persoonlijk advies evenveel visueel
   gewicht als zelf vergelijken, i.p.v. een losse link eronder */
.hero-widget-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 24px 24px 22px;
    box-shadow: 0 18px 34px -18px rgba(2,8,23,.22), 0 2px 8px rgba(2,8,23,.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Duidelijk eigen zone i.p.v. nog een dun lijntje in dezelfde rij: ruime
   afstand tot wat erboven staat + zachte achtergrondtint, zodat "liever
   persoonlijk advies" als bewust tweede pad voelt i.p.v. drukte */
.hero-advies-block {
    position: relative;
    margin-top: 20px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}
.hero-advies-divider-label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .03em;
    box-shadow: 0 3px 8px -2px rgba(0,15,71,.4), 0 0 0 4px #fff;
}
.hero-advies-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-cream);
    border: 1.5px solid transparent;
    border-radius: 12px;
    color: var(--color-primary);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.hero-advies-link .material-icons { color: var(--color-accent-gold-dark); font-size: 22px; flex-shrink: 0; }
.hero-advies-link-text { display: flex; flex-direction: column; gap: 1px; }
.hero-advies-link strong { font-size: .92rem; font-weight: 700; }
.hero-advies-link small { font-size: .78rem; font-weight: 400; color: var(--color-muted); }
.hero-advies-link:hover { border-color: var(--color-accent-gold-dark); background: #fff; }
/* Besparings-badge, als sticker op de hoek van de widget-kaart */
.hero-savings-badge {
    position: absolute;
    top: -20px;
    right: -16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--color-accent-gold) 0%, var(--color-accent-gold-dark) 100%);
    color: var(--color-hero-bg);
    text-align: center;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.28), 0 0 0 5px var(--color-hero-sky);
}
.hero-savings-badge strong {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
}
.hero-savings-badge span {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
    margin-top: 4px;
}
body.vergelijk-fullscreen-active .hero-visual { display: none; }

/* USP-sectie onder de hero, zelfde format als independer.nl's
   icp-usp-list-with-icons: icoon + titel + korte subtekst, in 3 kolommen */
.usp-section {
    background: var(--color-background);
    padding: 44px 0;
    border-bottom: 1px solid var(--color-border);
}
.usp-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 24px;
}
.usp-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 240px;
}
.usp-icon {
    color: var(--color-accent-gold);
    font-size: 28px !important;
    flex-shrink: 0;
    margin-top: 2px;
}
.usp-item h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}
.usp-item p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-muted);
}


.vergelijk-widget-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: #fff;
    color: var(--color-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.vergelijk-widget-kicker .material-icons { font-size: 15px; }

/* vergelijk-widget (embedded iframe) */
.vergelijk-widget-frame {
    /* Hoeveel px van de iframe-inhoud we naar boven schuiven om de titel/kop
       binnen quotr.nl te verbergen en direct bij de upload-zone te beginnen.
       Deze offset blijft gelijk in fase 1 en 2: we vergroten alleen het
       zichtbare venster, we schuiven niet verder - zo blijft precies dezelfde
       (nog geladen) iframe-inhoud in beeld en herlaadt er niets.
       LET OP: dit is en blijft schatwerk zonder live inzage in de iframe -
       vorige poging (250/140) schoot door en toonde de knop i.p.v. de
       dropzone; deze waarde zit er tussenin. Fine-tune 'm zelf in devtools. */
    --vergelijk-crop-offset: 222px;
    /* Fase 1 (default): alleen de upload-zone zichtbaar */
    --vergelijk-height-compact: 130px;
    /* Fase 2 (na 'upload'-signaal): ook de "Check je besparing"-knop zichtbaar */
    --vergelijk-height-medium: 460px;

    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    height: var(--vergelijk-height-compact);
    transition: height .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1),
                border-radius .4s ease, box-shadow .5s ease, top .5s cubic-bezier(.65,0,.35,1),
                left .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1);
}
.vergelijk-widget-frame.is-compact { height: var(--vergelijk-height-compact); }
.vergelijk-widget-frame.is-medium { height: var(--vergelijk-height-medium); }

/* De iframe zelf is altijd (ruim) hoger dan het venster; we schuiven 'm omhoog
   met een negatieve top, zodat alleen de upload-zone zichtbaar blijft en de
   quotr-titel/kop erboven buiten beeld valt. scrolling="no" voorkomt dat de
   iframe zelf intern scrollbaar is. Deze top blijft ongewijzigd tussen fase 1
   en 2 - alleen de hoogte van het venster (.vergelijk-widget-frame) groeit,
   zodat er simpelweg meer van dezelfde iframe zichtbaar wordt. */
.vergelijk-iframe {
    display: block;
    position: absolute;
    left: 0;
    top: calc(-1 * var(--vergelijk-crop-offset));
    width: 100%;
    height: calc(100% + var(--vergelijk-crop-offset));
    border: 0;
    background: #fff;
    transition: top .5s cubic-bezier(.65,0,.35,1), height .5s cubic-bezier(.65,0,.35,1);
}

/* Fullscreen staat: getriggerd op het 'quotes_viewed' signaal. Dezelfde iframe
   (zelfde DOM-node, geen reload!) wordt uitvergroot tot een "kiosk"-weergave:
   alleen de sticky header en de footer blijven staan, al het overige (de
   hero-tekstkolom en alle secties eronder) wordt verborgen. De iframe zelf
   wordt edge-to-edge (geen kaart/border/schaduw meer) en de hoogte wordt door
   script.js berekend als het beschikbare kavel tussen header en footer
   (we kunnen de werkelijke content-hoogte binnen de cross-origin iframe niet
   uitlezen, dus we "boxen" 'm op het beschikbare scherm - vandaar dat de
   iframe zelf weer intern scrollbaar wordt, scrolling="auto"). */
body.vergelijk-fullscreen-active {
    overflow: hidden;
}
body.vergelijk-fullscreen-active main > section:not(.hero-section) {
    display: none;
}
body.vergelijk-fullscreen-active .hero-section {
    padding: 0;
}
body.vergelijk-fullscreen-active .hero-container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}
body.vergelijk-fullscreen-active .hero-top,
body.vergelijk-fullscreen-active .hero-savings-badge {
    display: none;
}
body.vergelijk-fullscreen-active #nav-cta-vergelijk {
    display: none;
}
body.vergelijk-fullscreen-active .hero-widget-card {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
}
.hero-widget-column.is-fullscreen {
    gap: 0;
}
.hero-widget-column.is-fullscreen .vergelijk-widget-kicker,
.hero-widget-column.is-fullscreen .terms-notice,
.hero-widget-column.is-fullscreen .hero-advies-block {
    display: none;
}
.vergelijk-widget-frame.is-fullscreen {
    width: 100%;
    /* Hoogte wordt inline gezet door script.js: 100vh minus de gemeten
       header- en footerhoogte, met een veilige fallback voordat JS actief is */
    height: 80vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.vergelijk-widget-frame.is-fullscreen .vergelijk-iframe {
    top: 0;
    height: 100%;
}

/* Alleen tijdens het echte laden van de iframe (eerste keer) tonen we een
   spinner. Daarna verandert er nooit meer een overlay overheen - het venster
   wordt alleen groter, zodat er nooit een 'herladen'-gevoel ontstaat. */
.vergelijk-widget-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: var(--color-muted);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    padding: 0 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.vergelijk-widget-frame:not(.is-loaded) .vergelijk-widget-loading {
    opacity: 1;
    visibility: visible;
}
.vergelijk-widget-loading .spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: vergelijk-spin .8s linear infinite;
}
@keyframes vergelijk-spin { to { transform: rotate(360deg); } }

.terms-notice {
    margin: 0;
    color: var(--color-muted);
    font-size: .75rem;
}
.terms-notice a {
    color: var(--color-primary);
    text-decoration: underline;
}
.terms-notice a:hover { color: #000; }

/* logo cloud */
.logo-cloud-section { background: var(--color-background); padding: 64px 0; }
.logo-cloud-header { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.logo-cloud-intro { color: var(--color-muted); margin: 14px 0 26px; line-height: 1.55; }
.logo-tile-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    height: 104px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.logo-tile img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.logo-tile--placeholder {
    background: var(--color-body-bg);
    border-style: dashed;
    color: var(--color-disabled);
}
.logo-tile--placeholder .material-icons { font-size: 32px; }

/* sections and cards */
.section-header { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-header--left { margin-left: 0; margin-right: 0; text-align: left; }
.section-title, .story-title, .cta-title {
    font-family: var(--font-headline);
    font-size: clamp(1.875rem, 2.6vw, 2.25rem);
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.how-it-works-section { background: var(--color-cream); padding-top: 72px; }
.how-it-works-cta { text-align: center; margin: -20px 0 44px; }
.pill-outline-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: opacity .2s ease;
}
.pill-outline-cta:hover { opacity: .88; }
.how-it-works-main { max-width: 100%; }
.steps-column {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 22px;
}
.step-card, .deep-dive-card, .info-card, .steps-follow-up {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
}
.step-card {
    position: relative;
    min-height: 180px;
    padding: 34px 26px 30px;
}
.step-number-graphic {
    position: absolute;
    top: -18px;
    left: 24px;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 6px 14px -4px rgba(2,8,23,.3);
}
.step-number-graphic::before { content: "Stap "; }
.step-title {
    margin-bottom: 10px;
    color: var(--text-dark);
    font-size: 1.125rem;
    font-weight: 700;
}
.step-description { color: var(--color-muted); font-size: .95rem; }
.steps-follow-up {
    max-width: 920px;
    margin: 44px auto 0;
    padding: 28px 32px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.steps-follow-up .material-icons {
    position: static;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
}
.steps-follow-up h3 { font-size: 1.125rem; margin-bottom: 8px; font-weight: 700; }
.steps-follow-up p { color: var(--color-muted); }
.how-it-works-image-wrapper { display: none; }

/* industries-section - branche-selector met tabs, geïnspireerd op maia.insure maar in eigen huisstijl */
.industries-section { background: var(--color-background); }
.industry-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 40px;
    overflow-x: auto;
}
.industry-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 0 auto;
    min-width: 168px;
    padding: 0 4px 18px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .98rem;
    transition: color .2s ease;
}
.industry-tab-icon { display: block; color: var(--color-primary); }
.industry-tab-icon .branch-icon { width: 30px; height: 30px; }
.industry-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background .2s ease;
}
.industry-tab:hover { color: var(--color-primary); }
.industry-tab.is-active { color: var(--color-primary); }
.industry-tab.is-active::after { background: var(--color-secondary); }

/* gedeelde tekenstijl voor de custom branche-iconen (tabs + grote bleed-icoon) */
.branch-icon circle { fill: none; stroke: currentColor; stroke-width: 14; }
.branch-icon rect { fill: currentColor; }
.branch-icon path, .branch-icon line { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }

.industry-panel { display: none; }
.industry-panel.is-active {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
    border-radius: 16px;
    padding: 48px;
    min-height: 320px;
}
.industry-panel-text h3 {
    font-family: var(--font-body);
    font-weight: 800;
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 22px;
    max-width: 460px;
}
.industry-usp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 32px;
    max-width: 480px;
}
.industry-usp-list li { color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.5; }
.industry-usp-list li strong { color: var(--color-accent-gold); font-weight: 700; }
.industry-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 30px;
    border-radius: 10px;
    background: var(--color-secondary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity .2s ease;
}
.industry-cta:hover { opacity: .88; }
.industry-panel-visual {
    position: absolute;
    right: -70px;
    bottom: -60px;
    width: 340px;
    height: 340px;
    color: var(--color-accent-gold);
    opacity: .95;
    pointer-events: none;
}
.industry-panel-visual .branch-icon { width: 100%; height: 100%; }

/* coverage-section - Arbo/WIA/WGA dekkingsvergelijking, LET OP: bevat placeholder-inhoud, zie comment in index.html */
.coverage-section { background: var(--color-cream); }
.coverage-intro { max-width: 760px; color: var(--color-muted); line-height: 1.6; margin-bottom: 40px; }
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.coverage-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 32px 28px;
}
.coverage-card-header {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.coverage-card-header h3 {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.coverage-card-subtitle { color: var(--color-muted); font-size: .9rem; }
.coverage-list { list-style: none; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.coverage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--text-dark); }
.coverage-list .material-icons { font-size: 19px; color: var(--color-secondary); flex: 0 0 auto; margin-top: 1px; }
.coverage-card-cta { margin-top: 24px; width: 100%; }
.coverage-card-footnote { margin-top: 14px; color: var(--color-muted); font-size: .85rem; }

.deep-dive-section { background: #fff; }

.deep-dive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.card-inner-content { padding: 30px; }
.no-policy-card {
    grid-column: 1 / -1;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    text-align: center;
}
.no-policy-card .card-inner-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px;
}
.no-policy-card .label-uppercase { color: rgba(255,255,255,.75); }
.no-policy-card h3 {
    font-size: clamp(1.875rem, 2.6vw, 2.25rem);
    line-height: 1.25;
    margin-bottom: 12px;
    font-weight: 700;
}
.info-title {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 12px;
    font-weight: 700;
}
.no-policy-card h3 { color: #fff; margin-bottom: 16px; }
.no-policy-card p:not(.label-uppercase), .info-card p:not(.label-uppercase) { color: var(--color-muted); font-size: .95rem; }
.no-policy-card p {
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    margin: 0 auto 24px;
}
.no-policy-card .cta-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 7px;
    border: 1px solid #fff;
    background: #fff;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}
.no-policy-card .cta-light:hover {
    background: #f8fafc;
    color: var(--color-primary);
}
.no-policy-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.no-policy-card .cta-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 7px;
    border: 1px solid var(--color-accent-gold);
    background: linear-gradient(155deg, var(--color-accent-gold) 0%, var(--color-accent-gold-dark) 100%);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: filter .2s ease;
}
.no-policy-card .cta-gold:hover { filter: brightness(1.06); }

.story-section { background: var(--color-cream); }
.story-block-wrapper {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 40px;
}

.story-content p:not(.label-uppercase) { color: var(--color-muted); font-size: 1rem; }
.story-title { color: var(--color-primary); margin-bottom: 20px; }
.story-content strong { color: var(--text-dark); font-weight: 700; }
.video-wrapper { border-radius: 8px; overflow: hidden; background: #eef0f4; min-height: 320px; }
.video-wrapper img, .video-wrapper iframe { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    background: #000F47;
}
/* faq */
.faq-section { background: #fff; }
.faq-accordion { max-width: 900px; margin: 0 auto; }
.faq-category-title {
    color: var(--color-primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 42px 0 12px;
}
.faq-category-title:first-child { margin-top: 0; }
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--text-dark);
    padding: 20px 56px 20px 22px;
    position: relative;
    font-weight: 700;
    font-size: .95rem;
    transition: color .2s ease;
}
.faq-question:hover { color: var(--color-secondary); }
.faq-question::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: currentColor;
    font-size: 1.5rem;
    font-weight: 400;
}
.faq-item.active .faq-question { color: var(--color-secondary); }
.faq-item.active .faq-question::after { content: "−"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer p { padding: 0 22px 22px; color: var(--color-muted); }

/* final cta and footer */
.cta-section { background: var(--color-primary); color: #fff; text-align: center; padding: 72px 0; }
.cta-title { color: #fff; }
.cta-section p { max-width: 620px; margin: 14px auto 28px; color: rgba(255,255,255,.82); }
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-section .cta-light {
    min-height: 52px;
    padding: 0 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Primaire actie */
.cta-section .footer-cta-primary {
    background: #FFBF00;
    color: #000F47;
    border-color: #FFBF00;
}

.cta-section .footer-cta-primary:hover {
    background: #FFD05A;
    color: #000F47;
    border-color: #FFD05A;
}

/* Secundaire actie */
.cta-section .footer-cta-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.65);
}

.cta-section .footer-cta-secondary:hover {
    background: #fff;
    color: #000F47;
    border-color: #fff;
}

.main-footer {
    background: #fff;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    padding: 36px 0 0;
    font-size: .92rem;
}
.main-footer a { color: var(--color-primary); font-weight: 600; text-decoration: none; transition: color .2s ease; }
.main-footer a:hover { color: var(--color-secondary); text-decoration: underline; }
.footer-container {
    display: grid;
    grid-template-columns: 1.5fr .8fr;
    gap: 40px;
    padding-bottom: 30px;
}
.mmb-logo-footer { display: none; }
.footer-branding > a {
    display: block;
    width: 180px;
    height: 42px;
    margin-bottom: 18px;
    background: none;
}
.footer-description { max-width: 680px; }
.footer-title { color: var(--text-dark); font-size: .875rem; font-weight: 700; margin-bottom: 14px; }
.footer-links { list-style: none; display: grid; gap: 8px; }
.footer-bottom { border-top: 1px solid var(--color-border); padding: 22px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.privacy-links { display: flex; gap: 10px; align-items: center; }

/* popups and cookies */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2,8,23,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.popup-overlay.is-visible { opacity: 1; visibility: visible; }
.popup-content {
    width: min(100%, 620px);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 30px;
    position: relative;
}
.popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 2rem;
    cursor: pointer;
    transition: color .2s ease;
}
.popup-close:hover { color: var(--color-primary); }
.popup-title { color: var(--color-primary); font-size: 1.35rem; line-height: 1.2; margin-bottom: 12px; font-weight: 700; }
.popup-description, .privacy-content p, .privacy-content li { color: var(--color-muted); }
.privacy-content h3 { margin: 22px 0 8px; color: var(--text-dark); }
.link { color: var(--color-secondary); text-decoration: underline; transition: color .2s ease; }
.link:hover { color: var(--color-primary); }
.privacy-content ul { padding-left: 20px; }
.popup-cta-container { margin-top: 22px; }
.popup-mailto-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--color-muted);
    font-size: .8rem;
}
.popup-mailto-hint .material-icons { font-size: 16px; flex: 0 0 auto; }
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background: #fff;
    border-top: 1px solid var(--color-border);
    padding: 18px 0;
    box-shadow: 0 -8px 24px rgba(2,8,23,.08);
    transform: translateY(120%);
    transition: transform .3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cookie-text h3 { color: var(--text-dark); margin-bottom: 4px; }
.cookie-text p { color: var(--color-muted); font-size: .9rem; }
.cookie-actions, .cookie-settings-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-actions .cta-primary, .cookie-actions .cta-secondary, .cookie-settings-actions .cta-primary, .cookie-settings-actions .cta-secondary { width: auto; min-height: 40px; padding: 0 16px; }
.switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; transition: .2s; }
.slider:before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: white; transition: .2s; }
input:checked + .slider { background: var(--color-primary); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 999px; }
.slider.round:before { border-radius: 50%; }
.cookie-category { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.cookie-category-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 8px; }
.cookie-category-description { color: var(--color-muted); }

@media (max-width: 900px) {
    section { padding: 48px 0; }
    .main-header .container { width: 100%; padding: 0 28px; }
    .main-nav { min-height: 82px; }
    .logo a { width: 240px; height: 58px; }
    .cta-header { font-size: 0; min-height: 44px; padding: 0 16px; border-radius: 9px; }
    .cta-header::before { content: "Direct vergelijken"; font-size: 1rem; }
    .cta-header::after { width: 20px; height: 20px; }
    .hero-section { padding: 56px 0 48px; text-align: center; }
    .hero-container { max-width: 560px; }
    /* Op mobiel is er te weinig breedte om de illustratie + tekst leesbaar
       naast elkaar te tonen: val terug op de effen lichtblauwe achtergrond */
    .hero-visual, .hero-savings-badge { display: none; }
    .hero-content { max-width: 100%; align-items: center; margin: 0 auto; }
    .hero-top { max-width: 100%; align-items: center; }
    .hero-widget-column { align-items: center; }
    .hero-subheadline { max-width: 560px; }
    .hero-headline { font-size: clamp(2.15rem, 7vw, 3.25rem); line-height: 1.12; }
    .hero-advies-link { align-self: center; }

    .coverage-grid { grid-template-columns: 1fr; }
    .industry-tabs { gap: 20px; justify-content: flex-start; }
    .industry-tab { min-width: 130px; font-size: .9rem; }
    .industry-panel.is-active { grid-template-columns: 1fr; padding: 32px; }
    .industry-panel-visual { display: none; }
    .section-header--left { text-align: center; }
    .hero-eyebrow { align-self: center; }
    .vergelijk-widget-kicker { align-self: center; }
    .usp-row { flex-direction: column; text-align: left; }
    .vergelijk-widget-frame {
        --vergelijk-height-compact: 125px;
        --vergelijk-height-medium: 380px;
        --vergelijk-crop-offset: 205px;
        max-width: 480px;
        border-radius: 14px;
    }
    .vergelijk-widget-frame.is-fullscreen { max-width: none; }
    .section-header { margin-bottom: 36px; }
    .section-title, .story-title, .cta-title { font-size: 1.8rem; }
    .steps-column, .deep-dive-grid, .story-block-wrapper { grid-template-columns: 1fr; }
    .step-card { min-height: 0; padding: 34px 32px; }
    .step-number-graphic { font-size: 1.125rem; margin-bottom: 14px; }
    .step-title { font-size: 1.125rem; margin-bottom: 10px; }
    .step-description { font-size: .95rem; }
    .steps-follow-up { display: block; padding: 32px; }
    .steps-follow-up .material-icons { margin-bottom: 16px; }
    .story-block-wrapper { padding: 28px; }
    .footer-container, .footer-bottom .container { grid-template-columns: 1fr; display: grid; }
    .cookie-banner-content { align-items: stretch; flex-direction: column; }
}

@media (max-width: 560px) {
    .main-nav { min-height: 70px; }
    .main-header .container { padding: 0 18px; }
    .logo a { width: 190px; height: 48px; }
    .cta-header { min-height: 40px; padding: 0 12px; }
    .cta-header::before { font-size: .95rem; }
    .cta-header::after { width: 18px; height: 18px; }
    .hero-container, .container { width: min(100% - 40px, 1200px); }
    .hero-section { padding-top: 54px; }
    .hero-headline { font-size: 2.2rem; }
    .hero-subheadline { font-size: 1.05rem; }
    .vergelijk-widget-frame {
        --vergelijk-height-compact: 115px;
        --vergelijk-height-medium: 340px;
        --vergelijk-crop-offset: 195px;
    }
    .terms-notice { font-size: .72rem; }
    .hero-savings-badge { width: 64px; height: 64px; right: 14px; top: -12px; }
    .hero-savings-badge strong { font-size: .95rem; }
    .hero-savings-badge span { font-size: .5rem; }
    .section-title, .story-title, .cta-title { font-size: 1.8rem; }
    .card-inner-content, .story-block-wrapper { padding: 24px; }
    .video-wrapper { min-height: 220px; }
}


/* Hero en iframe */
/* Hero v2: scoped overrides; the remainder of the supplied site is retained. */
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ffffff;outline-offset:4px}
.logo a{background:none}.brand-logo{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.main-nav{min-height:82px}.logo a{width:220px;height:48px}
.nav-links-desktop{display:flex;gap:28px;list-style:none;margin-left:auto;font-size:13px}.nav-links-desktop a{text-decoration:none}.cta-header{margin-left:12px;min-height:42px;font-size:13px}
.hero-section{background:#F7F3EE;padding:44px 0 48px;overflow:hidden}
.hero-container{max-width:1200px;display:grid;grid-template-columns:550px 1fr;position:relative;column-gap:56px}
.hero-top{max-width:660px;grid-column:1/-1;gap:12px;position:relative;z-index:2;pointer-events:none}
.hero-eyebrow{font-size:13px;font-weight:600;color:#000F47;letter-spacing:.02em;text-transform:none}
.hero-headline{font-size:54px;line-height:1.06;letter-spacing:-1.6px;font-weight:500}
.hero-headline em{font-weight:500;color:#0B4BFF}
.hero-subheadline{font-size:16px;line-height:1.6;max-width:610px;color:#3D3C37;margin-top:4px}
.hero-widget-column{grid-column:1;z-index:3;margin-top:24px;width:100%;scroll-margin-top:100px}
.hero-widget-card{border-radius:18px;padding:26px;gap:0;box-shadow:0 12px 36px #143b7314;border:1px solid #fff}
.route-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.route-heading h2{font-size:19px;font-weight:700;color:#000F47}.route-heading>span{font-size:11px;color:#32654e;background:#eaf5ef;border-radius:20px;padding:4px 9px}
.route-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ccd7e7;margin-bottom:20px;gap:8px}
.route-tabs button{padding:10px 5px 14px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;color:#5a687c;font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.route-tabs button[aria-selected=true]{color:#0B4BFF;border-bottom-color:#0B4BFF}.tab-hint{display:block;font-size:11px;font-weight:400;margin-top:2px}
.route-copy h3{font-size:15px;color:#000F47;margin-bottom:6px}.route-copy p{font-size:13px;color:#3D3C37;line-height:1.55;margin-bottom:16px}
.vergelijk-widget-frame{--vergelijk-crop-offset:222px;--vergelijk-height-compact:150px;--vergelijk-height-medium:460px;border-radius:10px;max-width:none}
.vergelijk-widget-frame.is-uncropped{height:480px}.vergelijk-widget-frame.is-uncropped .vergelijk-iframe{top:0;height:100%}
.tool-help{display:flex;gap:12px;justify-content:space-between;align-items:start;margin-top:9px;font-size:10px;color:#637187}.tool-help button{font-size:10px;background:none;border:0;text-decoration:underline;cursor:pointer;color:#234b89;white-space:nowrap}
.terms-notice{font-size:10px;line-height:1.5;color:#758092;text-align:left;margin:13px 0 0}.terms-notice a{color:#50647e}
.hero-advice-row{border-top:1px solid #e2e8f0;margin-top:18px;padding-top:16px;display:flex;flex-direction:column;gap:8px;color:#607086;font-size:12px}
.hero-advice-button{display:flex;justify-content:space-between;align-items:center;min-height:44px;border:1px solid #c3cfe0;border-radius:8px;background:white;color:#000F47;font-size:13px;font-weight:600;padding:10px 14px;cursor:pointer}.hero-advice-button:hover{background:#eff5fc;border-color:#000F47}
.hero-person{position:absolute;right:-22px;bottom:-48px;width:590px;height:630px;pointer-events:none}
.portrait-disc{position:absolute;width:520px;height:520px;border-radius:50%;background:#CEECFF;bottom:-95px;left:36px}
.hero-person img{position:absolute;height:600px;width:auto;bottom:-32px;left:92px;object-fit:contain;object-position:bottom}
.hero-teaser{position:absolute;right:0;top:112px;transform:rotate(5deg);width:176px;min-height:152px;border-radius:22px 22px 22px 3px;padding:22px 12px;background:#FFBF00;color:#000F47;display:flex;flex-direction:column;text-align:center;box-shadow:0 7px 0 #c1933217}
.hero-teaser span:first-child{font-size:14px}.hero-teaser strong{font-family:var(--font-headline);font-size:40px;font-weight:800;line-height:1.2}.hero-teaser span:last-child{font-size:10px;margin-top:7px}
.person-note{position:absolute;bottom:80px;left:40px;display:flex;align-items:center;gap:12px;background:white;padding:15px 21px;border-radius:12px;box-shadow:0 12px 30px #12335c12;color:#000F47;transform:rotate(-3deg)}
.person-note strong,.person-note span:not(.note-check){display:block;font-size:13px}.person-note span:not(.note-check){font-size:12px;color:#4d6077}.note-check{display:grid;place-items:center;width:30px;height:30px;background:#CEECFF;color:#000F47;border-radius:50%}
.manual-checklist{list-style:none;display:grid;gap:10px;font-size:13px;margin-bottom:20px;color:#334b66}.manual-checklist li:before{content:'✓';margin-right:10px;color:#217a59}.start-manual{background:#FFBF00;border:1px solid #e8b52b;border-radius:8px;min-height:48px;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;width:100%;font-weight:700;color:#000F47;cursor:pointer}.start-manual:hover{background:#ffda70}.manual-note{font-size:11px;text-align:center;margin-top:10px;color:#657489}
.usp-section{padding:28px 0}.usp-row{gap:24px}.usp-icon{color:#000F47}.usp-item h3{font-size:14px}.usp-item p{font-size:12px}.logo-tile span{font-weight:700;color:#000F47}
.journey-toolbar{display:flex;justify-content:space-between;padding:14px 24px;border-bottom:1px solid #dbe3ef;gap:20px;background:white}.journey-toolbar button{border:0;background:none;color:#163f82;cursor:pointer;font-size:13px;min-height:32px}
body.vergelijk-fullscreen-active{overflow:auto}
body.vergelijk-fullscreen-active .hero-container{display:block}
body.vergelijk-fullscreen-active .hero-widget-column{margin:0}
body.vergelijk-fullscreen-active .hero-person,body.vergelijk-fullscreen-active .route-heading,body.vergelijk-fullscreen-active .route-tabs,body.vergelijk-fullscreen-active .route-copy,body.vergelijk-fullscreen-active .hero-advice-row,body.vergelijk-fullscreen-active .tool-help{display:none}
body.vergelijk-fullscreen-active .hero-widget-card{border:0}
body.vergelijk-fullscreen-active .vergelijk-widget-frame{min-height:460px;height:calc(100dvh - 150px);max-width:none}
body.vergelijk-fullscreen-active .vergelijk-iframe{top:0;height:100%}
.demo-notice{background:#fff5d9;color:#634500;text-align:center;font:12px/1.5 var(--font-body);padding:8px 15px}
@media(min-width:1600px){.hero-person{right:0}}
@media(max-width:1100px){.hero-container{grid-template-columns:500px 1fr;gap:20px}.hero-person{right:-110px}.hero-teaser{right:80px;top:80px;width:155px}.nav-links-desktop{gap:18px}}
@media(max-width:900px){.nav-links-desktop{display:none}.hero-section{text-align:left;padding:32px 0}.hero-container{display:block;max-width:580px}.hero-top{align-items:flex-start;pointer-events:auto}.hero-headline{font-size:44px}.hero-subheadline{font-size:15px}.hero-widget-column{align-items:stretch}.hero-eyebrow{align-self:flex-start}.hero-person{display:none}.main-nav{min-height:72px}.logo a{width:205px;height:46px}.cta-header{font-size:12px}.cta-header:before{content:none}.hero-widget-card{padding:24px}.usp-row{gap:18px}.usp-item{flex:auto}.desktop-break{display:none}.vergelijk-widget-frame{max-width:none}}
@media(max-width:480px){.main-header .container{padding:0 16px}.logo a{width:172px;height:40px}.main-nav{gap:10px;min-height:64px}.cta-header{padding:0 9px;font-size:11px;margin-left:auto;min-height:38px}.hero-container{width:calc(100% - 32px)}.hero-headline{font-size:38px;letter-spacing:-1px}.hero-eyebrow{font-size:11px}.hero-widget-card{padding:20px 17px}.route-heading h2{font-size:17px}.route-tabs button{font-size:14px}.hero-subheadline{font-size:14px}.tool-help{flex-wrap:wrap;gap:6px}.hero-section{padding-top:26px}.journey-toolbar{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Vaste interne viewport bij uitsnedes; alleen het buitenvenster groeit. */
.vergelijk-widget-frame.is-compact .vergelijk-iframe,
.vergelijk-widget-frame.is-medium .vergelijk-iframe { height: 760px; }
.vergelijk-widget-frame.is-fullscreen .vergelijk-iframe { top: 0; height: 100%; }
#manual-intro { text-align:left; margin:0 0 14px; padding:12px; background:#f1f6fc; border-radius:8px; }

/* De echte Quotr-knop blijft zichtbaar en direct aanklikbaar. */
.vergelijk-widget-frame.is-manual-crop:not(.is-fullscreen):not(.is-uncropped) { border:1px solid #ccd9e9; background:#f8fafc; }
/* Niet animeren tussen uitsnedes: tussenliggende bediening niet tijdelijk tonen. */
.vergelijk-iframe { transition:none; }


/* Compacte hero: minder herhaling, dezelfde routes en privacytekst. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero-section { padding-top:34px; padding-bottom:38px; }
.hero-top { gap:10px; }
.hero-headline { font-size:48px; }
.hero-subheadline { margin-top:0; }
.hero-widget-column { margin-top:20px; }
.hero-widget-card { padding:22px 26px; }
.route-tabs { margin-bottom:14px; }
.route-tabs button { padding-top:2px; padding-bottom:12px; }
.route-copy p { margin-bottom:12px; }
.tool-help { justify-content:flex-end; margin-top:7px; }
.hero-advice-row { margin-top:14px; padding-top:13px; gap:7px; }
.hero-person { bottom:-38px; height:590px; }
.hero-person img { height:560px; bottom:-24px; }
.hero-teaser,.person-note { transform:none; border-radius:16px; box-shadow:0 8px 24px #143b7312; }
.hero-teaser { top:88px; min-height:128px; padding:19px 14px; }
.hero-teaser span:first-child { font-size:14px; margin-top:0; }
.hero-teaser strong { font-size:36px; }
.person-note { bottom:92px; left:50px; padding:16px 20px; }
.person-note strong { font-size:14px; }
.person-note span:not(.note-check) { font-size:12px; margin-top:3px; }
@media(max-width:1100px) and (min-width:901px) { .hero-teaser { right:90px; top:72px; } }
@media(max-width:900px) { .hero-section { padding:28px 0; } .hero-headline { font-size:42px; } }
@media(max-width:480px) { .hero-headline { font-size:35px; } .hero-widget-card { padding:20px 17px; } .hero-subheadline { max-width:320px; } }

/* Merkpalet en compacte adviesingang */
.hero-eyebrow { color:#0B4BFF; }
.hero-headline { font-size:44px; line-height:1.12; max-width:680px; }
.hero-subheadline { max-width:530px; }
.hero-teaser { background:#FFBF00; color:#000F47; }
.hero-advice-row { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.hero-advice-row>span { color:#000F47; font-size:13px; }
.hero-advice-button { flex:0 0 auto; gap:18px; min-height:44px; padding:10px 14px; border-color:#000F47; }
.advice-dialog { max-width:560px; padding:32px; }
.advice-dialog .popup-title { padding-right:24px; font-size:26px; }
.advice-dialog .popup-description { margin-bottom:22px; }
.contact-options { display:grid; gap:10px; }
.contact-option { display:grid; grid-template-columns:40px minmax(0,1fr) 16px; align-items:center; gap:14px; min-height:84px; padding:16px; border:1px solid #dbe1e9; border-radius:12px; color:#000F47; text-decoration:none; background:#fff; }
.contact-option strong,.contact-option small { display:block; }
.contact-option strong { font-size:16px; }
.contact-option small { margin-top:4px; font-size:12px; color:#3D3C37; overflow-wrap:anywhere; }
.contact-icon { display:grid; place-items:center; height:40px; width:40px; border-radius:50%; background:#F7F3EE; font-size:22px; }
.contact-option[href]:hover { border-color:#0B4BFF; background:#F7F3EE; }
.contact-option[aria-disabled=true] { opacity:.55; cursor:default; }
@media(max-width:900px) {
 .hero-headline { font-size:38px; }
 .hero-section { padding-top:24px; }
 .hero-widget-column { margin-top:18px; }
}
@media(max-width:480px) {
 .main-nav { min-height:60px; }
 .logo a { width:142px; height:34px; }
 .cta-header { min-height:36px; }
 .hero-headline { font-size:31px; letter-spacing:-.6px; }
 .hero-headline br { display:none; }
 .hero-headline em:before { content:' '; }
 .hero-eyebrow { font-size:11px; }
 .hero-subheadline { font-size:14px; line-height:1.5; }
 .hero-widget-card { padding:18px 16px; border-radius:15px; }
 .route-tabs { gap:12px; }
 .route-tabs button { font-size:14px; }
 .tab-hint { font-size:11px; }
 .route-copy p { font-size:12px; }
 .hero-advice-row { flex-wrap:wrap; gap:9px; }
 .hero-advice-button { min-height:44px; }
 .advice-dialog { padding:26px 20px; }
 .advice-dialog .popup-title { font-size:23px; }
 .contact-option { padding:13px; gap:10px; grid-template-columns:34px minmax(0,1fr) 12px; }
 .contact-icon { width:34px; height:34px; }
}

/* Cirkeluitsnede: bovenkant vrij, tafel en foto volgen onderaan de cirkel. */
.hero-section { background:#CEECFF; }
.hero-person { bottom:0; height:590px; }
.portrait-disc { width:520px; height:520px; bottom:0; left:36px; background:#F7F3EE; }
.portrait-window { position:absolute; left:36px; bottom:0; width:520px; height:590px; clip-path:url(#portrait-curve); }
.portrait-window img { height:560px; width:auto; left:56px; bottom:0; }
.portrait-clip-defs { position:absolute; }
.hero-advice-row { background:#F7F3EE; border:0; border-radius:12px; padding:14px; margin-top:16px; }
.advice-copy strong,.advice-copy small { display:block; }
.advice-copy strong { font-size:13px; font-weight:600; }
.advice-copy small { font-size:11px; line-height:1.5; color:#3D3C37; margin-top:3px; }
.hero-advice-button { background:white; border-color:#0B4BFF; color:#0B4BFF; }
.hero-advice-button:hover { background:#000F47; color:white; border-color:#000F47; }
.contact-option-primary { background:#000F47; border-color:#000F47; color:white; min-height:98px; }
.contact-option-primary small { color:#fff; }
.contact-option-primary .contact-icon { background:#FFBF00; color:#000F47; }
.contact-option-primary[href]:hover { background:#0B4BFF; color:white; }
.contact-option-primary[aria-disabled=true] { opacity:1; }
.hero-teaser { top:75px; padding:20px 18px; width:180px; text-align:left; box-shadow:0 10px 28px #000F4714; }
.hero-teaser span:first-child { font:600 12px/1.4 var(--font-body); }
.hero-teaser strong { font:600 30px/1.08 var(--font-headline); margin-top:5px; }
.person-note { left:32px; bottom:120px; border:1px solid #000F4710; padding:17px 20px; }
.person-note .note-check { color:#000F47; background:#CEECFF; }
@media(max-width:1100px) and (min-width:901px) { .hero-teaser { right:90px; top:84px; } }
@media(max-width:480px) { .hero-advice-row { padding:13px; } .hero-advice-button { width:100%; justify-content:space-between; } }

.hero-teaser { width:205px; }
.hero-teaser strong { font-size:27px; letter-spacing:-.5px; }

/* Uitlijning identiek aan de headercontainer. */
.journey-toolbar { padding:0; }
.journey-toolbar-inner { width:min(100% - 40px,1320px); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; }
.toolbar-advisor { display:inline-flex; align-items:center; gap:8px; }
.availability-dot { display:inline-block; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#8190a6; margin-right:7px; }
.is-call-open .availability-dot { background:#237b4b; box-shadow:0 0 0 4px #237b4b14; }
.hero-advice-row .advice-copy strong { display:flex; align-items:center; }
.hero-teaser { text-align:center; }
.hero-teaser strong { font-size:54px; letter-spacing:-1px; }
@media(max-width:900px){ .journey-toolbar-inner { width:100%; padding:10px 28px; } }
@media(max-width:480px){ .journey-toolbar-inner { padding:10px 16px; gap:12px; } .journey-toolbar button { font-size:12px; text-align:left; } .toolbar-advisor { max-width:50%; } }

@media(min-width:481px) and (max-width:560px) { .journey-toolbar-inner { padding-left:18px; padding-right:18px; } }

/* Belhulp uitsluitend bij de vergelijking, niet in de hero. */
.toolbar-help { display:flex; align-items:center; gap:18px; }
.toolbar-help-copy strong,.toolbar-help-copy small { display:block; }
.toolbar-help-copy strong { font-size:13px; color:#000F47; font-weight:600; }
.toolbar-help-copy small { font-size:11px; color:#3D3C37; margin-top:3px; }
.journey-toolbar .toolbar-advisor { min-height:42px; border:1px solid #c5d3e5; border-radius:8px; background:white; padding:9px 16px; gap:12px; font-weight:600; }
.journey-toolbar .is-call-open .toolbar-advisor { background:#000F47; border-color:#000F47; color:white; }
.popup-office-status { font-size:12px; color:#3D3C37; margin:-10px 0 18px; }
.advice-preview-notice { background:#fff0bd; color:#000F47; padding:8px 14px; font-size:12px; }
.advice-preview .journey-toolbar { display:block; margin-bottom:16px; border:1px solid #dbe1e9; border-radius:8px; overflow:hidden; }
.advice-preview .journey-toolbar-inner { width:100%; padding:12px; }
@media(max-width:700px) {
 .journey-toolbar-inner { align-items:flex-start; }
 .toolbar-help { align-items:flex-end; flex-direction:column; gap:7px; max-width:65%; text-align:right; }
 .journey-toolbar .toolbar-advisor { max-width:none; font-size:12px; min-height:40px; }
 .toolbar-help-copy strong { font-size:12px; }
 .toolbar-help-copy small { font-size:10px; }
}

/* Contactpopup: dezelfde typografie, kleuren en rustige kaarten als de hero. */
/* Contactpopup */
#advies-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 15 71 / 45%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

#advies-popup.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#advies-popup .advice-dialog {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid #000F471A;
    border-radius: 18px;
    background: #FFFFFF;
    color: #000F47;
    box-shadow: 0 18px 48px #000F471C;
    font-family: var(--font-body, sans-serif);
}

#advies-popup .popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #000F47;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

#advies-popup .popup-close:hover {
    background: #F7F3EE;
    color: #3D3C37;
}

#advies-popup .popup-title {
    margin: 0 30px 12px 0;
    padding: 0;
    color: #000F47;
    font-family: var(--font-headline, Georgia, serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.5px;
}

#advies-popup .popup-description {
    margin: 0 0 12px;
    color: #3D3C37;
    font-size: 14px;
    line-height: 1.6;
}

#advies-popup .popup-office-status {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #F7F3EE;
    color: #3D3C37;
    font-size: 12px;
    line-height: 1.6;
}

#advies-popup .contact-options {
    display: grid;
    gap: 10px;
}

#advies-popup .contact-option {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #000F4726;
    border-radius: 8px;
    background: #FFFFFF;
    color: #000F47;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease;
}

#advies-popup .contact-option strong,
#advies-popup .contact-option small {
    display: block;
}

#advies-popup .contact-option strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

#advies-popup .contact-option small {
    margin-top: 3px;
    color: #3D3C37;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#advies-popup .contact-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F7F3EE;
    color: #000F47;
}

#advies-popup .contact-option[href]:not([aria-disabled="true"]):hover {
    background: #F7F3EE;
    border-color: #000F47;
}

/* Primaire contactoptie */
#advies-popup .contact-option-primary {
    min-height: 84px;
    background: #000F47;
    border-color: #000F47;
    color: #FFFFFF;
}

#advies-popup .contact-option-primary small {
    color: #FFFFFF;
}

#advies-popup .contact-option-primary .contact-icon {
    background: #FFFFFF20;
    color: #FFFFFF;
}

#advies-popup .contact-option-primary[href]:not([aria-disabled="true"]):hover {
    background: #3D3C37;
    border-color: #3D3C37;
    color: #FFFFFF;
}

/* Nog niet beschikbare contactopties */
#advies-popup .contact-option[aria-disabled="true"] {
    opacity: 1;
    background: #F7F3EE;
    border-color: #000F4726;
    color: #3D3C37;
    cursor: default;
}

#advies-popup .contact-option[aria-disabled="true"] small {
    color: #3D3C37;
}

#advies-popup .contact-option[aria-disabled="true"] .contact-icon {
    background: #FFFFFF;
    color: #000F47;
}

#advies-popup .contact-option-primary[aria-disabled="true"] {
    border: 2px solid #000F47;
    color: #000F47;
}

/* Scheiding tussen primaire en overige opties */
#advies-popup .contact-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    color: #3D3C37;
    font-size: 12px;
    text-align: center;
}

#advies-popup .contact-divider::before,
#advies-popup .contact-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #000F471A;
}

#advies-popup a:focus-visible,
#advies-popup button:focus-visible {
    outline: 3px solid #000F47;
    outline-offset: 3px;
}

/* Mobiel */
@media (max-width: 480px) {
    #advies-popup {
        padding: 16px;
    }

    #advies-popup .advice-dialog {
        max-height: calc(100dvh - 32px);
        padding: 24px 18px;
    }

    #advies-popup .popup-title {
        font-size: 28px;
    }

    #advies-popup .popup-description {
        font-size: 13px;
    }

    #advies-popup .contact-option {
        padding: 12px;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #advies-popup,
    #advies-popup .contact-option {
        transition: none;
    }
}

/* Badges: drie regels en persoonlijke geruststelling. */
.hero-teaser { transform:rotate(4deg); border-radius:22px 22px 22px 4px; padding:22px 14px; }
.hero-teaser span:first-child { font:500 14px/1.4 var(--font-body); }
.hero-teaser strong { font-size:40px; line-height:1.15; letter-spacing:-.5px; margin:4px 0; }
.hero-teaser span:last-child { font:500 12px/1.4 var(--font-body); margin-top:6px; }
.person-note .note-check { background:#CEECFF; color:#000F47; }

/* Eenduidige acties en duidelijke uploadkeuze. */
:root { --action-radius:8px; }
.cta-primary,.cta-secondary,.cta-light,.cta-header,.pill-outline-cta,.industry-cta,
.no-policy-card .cta-gold,.hero-advice-button,.advisor-action,.contact-option,
.route-tabs button { border-radius:var(--action-radius); }
.hero-headline { font-size:clamp(40px,4.1vw,58px); font-weight:600; line-height:1.06; letter-spacing:-1.4px; }
.hero-headline em { display:inline-block; font-weight:600; color:#000F47; }
.route-tabs { border:0; gap:10px; margin-bottom:18px; }
.route-tabs button { border:1px solid #c6d2e3; padding:13px 14px; margin:0; background:#fff; color:#3D3C37; min-height:66px; }
.route-tabs button[aria-selected=true] { background:#0B4BFF; color:#fff; border-color:#0B4BFF; box-shadow:0 3px 8px #0B4BFF18; }
.route-tabs button:hover { border-color:#0B4BFF; }
.route-tabs button:focus-visible,.hero-advice-button:focus-visible { outline:3px solid #FFBF00; outline-offset:3px; }
.hero-widget-column:not(.is-fullscreen) .vergelijk-widget-frame.is-compact:not(.is-manual-crop) { outline:2px solid #0B4BFF; outline-offset:3px; box-shadow:0 0 0 7px #eaf3ff; background:#eaf3ff; margin-top:8px; margin-bottom:20px; }
.hero-advice-row { background:transparent; border-top:1px solid #e2e8f0; border-radius:0; padding:14px 0 0; margin-top:16px; }
.portrait-window img { left:auto; right:0; height:590px; bottom:0; }
@media(max-width:900px) { .hero-headline { font-size:44px; } }
@media(max-width:480px) {
 .hero-headline { font-size:clamp(29px,8vw,38px); letter-spacing:-.8px; }
 .hero-headline br { display:initial; }
 .hero-headline em:before { content:none; }
 .route-tabs { gap:8px; }
 .route-tabs button { padding:11px 10px; font-size:14px; }
 .hero-advice-row { padding:13px 0 0; }
}

/* Rustige tabs, prominente besparing en behoud van de grote titel. */
.route-tabs { border-bottom:1px solid #ccd7e7; gap:8px; margin-bottom:18px; }
.route-tabs button { border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; padding:10px 5px 13px; min-height:0; margin-bottom:-1px; }
.route-tabs button[aria-selected=true] { background:transparent; color:#0B4BFF; border-bottom-color:#0B4BFF; box-shadow:none; }
.route-tabs button:hover { background:#F7F3EE; }
.hero-widget-column:not(.is-fullscreen) .vergelijk-widget-frame.is-compact:not(.is-manual-crop) { outline:1px dashed #8a9fbd; outline-offset:0; box-shadow:none; background:#f8f8f8; margin-top:0; margin-bottom:16px; }
.hero-teaser { border-radius:var(--action-radius); transform:none; }
.hero-teaser strong { font-size:56px; line-height:1.05; }
.hero-teaser-mobile { display:none; }
@media(max-width:900px) {
 .hero-top { display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:16px; align-items:center; }
 .hero-top .hero-eyebrow,.hero-top .hero-headline { grid-column:1/-1; }
 .hero-top .hero-subheadline { grid-column:1; grid-row:3; max-width:none; margin:0; }
 .hero-top .hero-teaser-mobile { display:flex; position:static; grid-column:2; grid-row:3; width:104px; min-height:0; padding:12px 8px; margin:8px 0 0; box-shadow:none; }
 .hero-teaser-mobile span:first-child,.hero-teaser-mobile span:last-child { font-size:11px; margin:0; }
 .hero-teaser-mobile strong { font-size:36px; margin:3px 0; }
}

/* Compacte, speelse badge en consistente merkkleuren. */
.hero-headline { color:#000F47; }
.hero-headline em { color:#0B4BFF; }
.usp-section .usp-icon { color:#000F47; }
.hero-teaser { width:158px; min-height:0; padding:14px 12px; transform:rotate(5deg); border-radius:var(--action-radius); }
.hero-teaser span:first-child,.hero-teaser span:last-child { font-size:11px; line-height:1.35; margin:0; }
.hero-teaser strong { font-size:58px; line-height:1; letter-spacing:-2px; margin:4px 0; }
@media(max-width:900px) {
 .hero-top .hero-teaser-mobile { width:98px; padding:10px 7px; margin:8px 3px 5px 0; transform:rotate(5deg); }
 .hero-teaser-mobile span:first-child,.hero-teaser-mobile span:last-child { font-size:10px; }
 .hero-teaser-mobile strong { font-size:40px; letter-spacing:-1px; margin:3px 0; }
}

/* Variant B: twee directe acties, Quotr pas zichtbaar na de start. */
body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-widget-column { display:none; }
body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-container { min-height:520px; display:flex; justify-content:center; flex-direction:column; }
body[data-hero-variant="B"] .hero-top { width:59%; max-width:690px; pointer-events:auto; gap:18px; }
body[data-hero-variant="B"] .hero-headline { font-size:clamp(40px,4.1vw,58px); }
body[data-hero-variant="B"] .hero-subheadline { max-width:490px; font-size:17px; color:#000F47; }
.hero-choice-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; width:100%; }
.hero-choice-actions button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:56px; padding:15px 20px; border-radius:var(--action-radius); font:600 14px/1.4 var(--font-body); cursor:pointer; }
.hero-choice-primary { background:#000F47; border:1px solid #000F47; color:#fff; }
.hero-choice-primary:hover { background:#0B4BFF; border-color:#0B4BFF; }
.hero-choice-primary span { font-size:24px; line-height:1; }
.hero-choice-secondary { background:#fff; border:1px solid #000F4740; color:#000F47; }
.hero-choice-secondary:hover { border-color:#000F47; background:#F7F3EE; }
.hero-choice-actions button:focus-visible { outline:3px solid #0B4BFF; outline-offset:4px; }
.hero-choice-hint { font-size:12px; color:#000F47; margin:-7px 0 0; }
body[data-hero-variant="B"] .hero-top .terms-notice { max-width:440px; margin:0; font-size:11px; color:#3D3C37; }
body[data-hero-variant="B"] .hero-top .terms-notice a { color:#000F47; }
body[data-hero-variant="B"] .hero-person { right:-38px; bottom:-48px; transform:scale(.84); transform-origin:right bottom; }
body[data-hero-variant="B"] .hero-person .hero-teaser { right:12px; top:82px; }
body[data-hero-variant="B"] .person-note { left:65px; bottom:100px; }
@media(min-width:901px) and (max-width:1100px) {
 body[data-hero-variant="B"] .hero-person { right:-40px; transform:scale(.70); }
 body[data-hero-variant="B"] .hero-top { width:63%; }
 .hero-choice-actions { gap:10px; }
 .hero-choice-actions button { padding:14px; font-size:13px; }
}
@media(max-width:900px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-container { min-height:0; }
 body[data-hero-variant="B"] .hero-top { width:100%; display:flex; gap:16px; }
 body[data-hero-variant="B"] .hero-headline { font-size:44px; }
 body[data-hero-variant="B"] .hero-top .hero-teaser-mobile { display:none; }
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { display:block; position:relative; align-self:center; right:auto; bottom:auto; width:590px; height:590px; transform:scale(.60); transform-origin:center top; margin-top:24px; margin-bottom:-236px; }
 body[data-hero-variant="B"] .hero-person .hero-teaser { right:35px; top:72px; }
 body[data-hero-variant="B"] .hero-section { padding-bottom:0; }
 body[data-hero-variant="B"] .hero-subheadline { font-size:16px; }
}
@media(max-width:480px) {
 body[data-hero-variant="B"] .hero-headline { font-size:clamp(29px,8vw,38px); }
 .hero-choice-actions { flex-direction:column; gap:10px; margin-top:4px; }
 .hero-choice-actions button { width:100%; min-height:54px; }
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { transform:scale(.50); margin-bottom:-295px; }
}

/* Definitief palet voor variant B; losse acties met geel als primair accent. */
:root {
 --color-primary:#000F47; --color-primary-title:#000F47;
 --color-secondary:#0B4BFF; --color-light-blue:#CEECFF;
 --color-background:#FFFFFF; --color-body-bg:#FFFFFF;
 --color-cream:#F7F3EE; --color-soft:#F7F3EE;
 --color-hero-sky:#CEECFF; --color-pale-blue:#CEECFF; --color-card-tint:#CEECFF;
 --color-accent-gold:#FFBF00; --text-dark:#3D3C37;
}
body[data-hero-variant="B"] .hero-section { background:#CEECFF; }
body[data-hero-variant="B"] .hero-headline { color:#000F47; }
body[data-hero-variant="B"] .hero-headline em { color:#0B4BFF; }
body[data-hero-variant="B"] .hero-subheadline,
body[data-hero-variant="B"] .hero-choice-hint,
body[data-hero-variant="B"] .hero-top .terms-notice { color:#3D3C37; }
body[data-hero-variant="B"] .portrait-disc { background:#F7F3EE; }
body[data-hero-variant="B"] .hero-choice-primary { background:#FFBF00; border-color:#FFBF00; color:#000F47; }
body[data-hero-variant="B"] .hero-choice-primary:hover { background:#FFD98A; border-color:#FFD98A; box-shadow:none; }
body[data-hero-variant="B"] .hero-choice-secondary { background:#FFFFFF; border-color:#000F4733; color:#000F47; }
body[data-hero-variant="B"] .hero-choice-secondary:hover { background:#F7F3EE; border-color:#000F47; }
body[data-hero-variant="B"] .person-note { background:#FFFFFF; color:#000F47; }
body[data-hero-variant="B"] .person-note span:not(.note-check) { color:#3D3C37; }
body[data-hero-variant="B"] .person-note .note-check { color:#000F47; background:#CEECFF; }
body[data-hero-variant="B"] .hero-teaser { background:#FFBF00; color:#000F47; }
body[data-hero-variant="B"] .usp-icon { color:#000F47; }
body[data-hero-variant="B"] .usp-item p { color:#3D3C37; }
body[data-hero-variant="B"].vergelijk-fullscreen-active .hero-top { display:none; }

/* Kleurhover en grotere portretcompositie. */
.hero-choice-actions button { transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
.hero-choice-secondary span { font-size:24px; line-height:1; }
body[data-hero-variant="B"] .hero-choice-primary:hover { transform:none; }
body[data-hero-variant="B"] .hero-choice-secondary:hover { background:#F7F3EE; border-color:#F7F3EE; transform:none; box-shadow:none; }
body[data-hero-variant="B"] .cta-primary:hover,
body[data-hero-variant="B"] .contact-option-primary[href]:hover { background:#0B4BFF; border-color:#0B4BFF; color:#FFFFFF; }
body[data-hero-variant="B"] .hero-person { transform:scale(.92); }
body[data-hero-variant="B"] .hero-person .hero-teaser { width:178px; padding:16px 12px; }
body[data-hero-variant="B"] .hero-person .hero-teaser strong { font-size:64px; }
body[data-hero-variant="B"] .hero-person .hero-teaser span { font-size:12px; }
body[data-hero-variant="B"] .person-note { padding:20px 23px; gap:14px; }
body[data-hero-variant="B"] .person-note strong { font-size:15px; }
body[data-hero-variant="B"] .person-note span:not(.note-check) { font-size:13px; }
body[data-hero-variant="B"] .person-note .note-check { width:34px; height:34px; }
@media(min-width:901px) and (max-width:1100px) {
 body[data-hero-variant="B"] .hero-person { transform:scale(.76); }
}
@media(max-width:900px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { transform:scale(.66); margin-bottom:-200.6px; }
}
@media(max-width:480px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { transform:scale(.55); margin-bottom:-265.5px; }
}
@media(max-width:360px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { transform:scale(.51); margin-bottom:-289.1px; }
}


/* Vorige versie behouden, met de grotere dame op desktop. */
body[data-hero-variant="B"] .hero-person { transform:scale(.98); right:-50px; }
@media(min-width:901px) and (max-width:1100px) {
 body[data-hero-variant="B"] .hero-person { transform:scale(.80); }
}
@media(max-width:900px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person { right:auto; }
}

/* Mobiel: direct van de acties naar de voordelen, zonder portretblok. */
body[data-hero-variant="B"] .person-note .note-check { color:#000F47; background:#CEECFF; }
@media(max-width:900px) {
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-person,
 body[data-hero-variant="B"] .hero-top .hero-teaser-mobile { display:none; }
 body[data-hero-variant="B"]:not(.vergelijk-fullscreen-active) .hero-section { padding-bottom:28px; }
}


.journey-toolbar .toolbar-help {
    gap: 20px;
}

.journey-toolbar .toolbar-help-copy strong {
    color: #000F47;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.journey-toolbar .toolbar-help-copy small {
    margin-top: 5px;
    color: #3D3C37;
    font-size: 12px;
    line-height: 1.5;
}

.journey-toolbar .availability-dot {
    display: none;
}

.journey-toolbar .is-call-open .availability-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #6ABF30;
    box-shadow: 0 0 0 4px #6ABF301A;
}

.journey-toolbar .toolbar-advisor {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid #000F4733;
    border-radius: 8px;
    background: #FFFFFF;
    color: #000F47;
    font-weight: 600;
}

.journey-toolbar .is-call-open .toolbar-advisor {
    background: #000F47;
    border-color: #000F47;
    color: #FFFFFF;
}

.journey-toolbar .toolbar-advisor:hover {
    background: #F7F3EE;
    border-color: #000F47;
}

.journey-toolbar .is-call-open .toolbar-advisor:hover {
    background: #3D3C37;
    border-color: #3D3C37;
}

@media (max-width: 700px) {
    .journey-toolbar .toolbar-help {
        align-items: flex-start;
        gap: 10px;
        text-align: left;
    }

    .journey-toolbar .toolbar-help-copy strong {
        font-size: 13px;
    }

    .journey-toolbar .toolbar-help-copy small {
        font-size: 11px;
    }
}
.journey-toolbar .toolbar-help {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.journey-toolbar .advisor-avatar {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F7F3EE;
}

/* Uitsnede op gezicht, zonder het originele bestand te wijzigen. */
.journey-toolbar .advisor-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: circle(50%);
}

.journey-toolbar .advisor-avatar {
    overflow: visible;
}

.journey-toolbar .advisor-avatar img {
    object-fit: none;
    object-position: 51% 20%;
    /* Gebruik onderstaande uitsnede in plaats van object-fit: none. */
    object-fit: cover;
    transform: scale(1);
}

.journey-toolbar .advisor-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: none;
    width: 10px;
    height: 10px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #6ABF30;
}

.journey-toolbar .is-call-open .advisor-avatar::after {
    display: block;
}

/* De statusstip staat voortaan op de foto. */
.journey-toolbar .toolbar-help .availability-dot {
    display: none;
}

@media (max-width: 700px) {
    .journey-toolbar .toolbar-help {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }

    .journey-toolbar .advisor-avatar {
        width: 40px;
        height: 40px;
    }

    .journey-toolbar .toolbar-advisor {
        grid-column: 2;
        justify-self: start;
        max-width: none;
    }
}


/* Mid-page producttour: abstracte weergave van de echte Quotr-flow. */
.comparison-showcase-section {
    background: #F7F3EE;
    padding: 88px 0 92px;
    overflow: hidden;
}
.comparison-showcase__intro {
    max-width: 760px;
    margin-bottom: 44px;
}
.comparison-showcase__intro .section-title {
    margin: 0;
    color: #000F47;
    font-size: clamp(2.1rem, 3.5vw, 3.15rem);
}
.comparison-showcase__lead {
    max-width: 680px;
    margin-top: 14px;
    color: #3D3C37;
    font-size: 16px;
    line-height: 1.65;
}
.comparison-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: clamp(52px, 7vw, 98px);
    align-items: center;
}
.comparison-showcase__stage {
    position: relative;
    min-height: 520px;
    border-radius: 28px;
    background: #CEECFF;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,15,71,.05);
}
.comparison-showcase__stage::before,
.comparison-showcase__stage::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.comparison-showcase__stage::before {
    width: 360px;
    height: 360px;
    right: -135px;
    top: -155px;
    background: rgba(255,255,255,.48);
}
.comparison-showcase__stage::after {
    width: 220px;
    height: 220px;
    left: -110px;
    bottom: -125px;
    background: rgba(11,75,255,.08);
}
.showcase-demo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px) scale(.99);
    pointer-events: none;
    transition: opacity .32s ease, transform .42s ease, visibility .32s;
}
.showcase-demo.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}
.demo-browserbar {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(0,15,71,.09);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: rgba(247,243,238,.95);
    color: #3D3C37;
}
.demo-browserbar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,15,71,.2);
}
.demo-browserbar__label {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
}
.demo-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 26px;
    border: 1px solid rgba(0,15,71,.09);
    border-radius: 0 0 18px 18px;
    background: #FFFFFF;
    color: #000F47;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,15,71,.09);
}
.demo-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #CEECFF;
    color: #000F47;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.demo-screen__heading {
    text-align: center;
}
.demo-screen__heading strong,
.demo-screen__heading small {
    display: block;
}
.demo-screen__heading strong {
    font-size: clamp(20px, 2.3vw, 29px);
    line-height: 1.16;
    letter-spacing: -.025em;
}
.demo-screen__heading small {
    margin-top: 7px;
    color: #3D3C37;
    font-size: 11px;
}
.demo-upload-zone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 145px;
    margin-top: 25px;
    padding: 20px;
    border: 1.5px dashed rgba(0,15,71,.28);
    border-radius: 14px;
    background: #F7F3EE;
    overflow: hidden;
}
.demo-upload-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0B4BFF;
    box-shadow: 0 6px 18px rgba(0,15,71,.08);
}
.demo-upload-icon .material-icons { font-size: 24px; }
.demo-upload-empty { text-align: center; }
.demo-upload-empty strong,
.demo-upload-empty span { display: block; }
.demo-upload-empty strong { font-size: 12px; }
.demo-upload-empty span { margin-top: 3px; color: #3D3C37; font-size: 10px; }
.demo-file-row {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 28px;
    align-items: center;
    gap: 11px;
    min-height: 70px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #FFFFFF;
    color: #000F47;
    box-shadow: 0 8px 26px rgba(0,15,71,.10);
    opacity: 0;
    transform: translateY(22px) scale(.96);
}
.demo-file-type {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #CEECFF;
    color: #000F47;
    font-size: 10px;
    font-weight: 800;
}
.demo-file-copy strong,
.demo-file-copy small { display: block; }
.demo-file-copy strong { font-size: 11px; }
.demo-file-copy small { margin-top: 3px; color: #3D3C37; font-size: 9px; }
.demo-file-status {
    position: relative;
    width: 26px;
    height: 26px;
}
.demo-file-status__loading {
    position: absolute;
    inset: 2px;
    border: 2px solid rgba(0,15,71,.14);
    border-top-color: #0B4BFF;
    border-radius: 50%;
    opacity: 0;
}
.demo-file-status__done {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #000F47;
    color: #FFFFFF;
    font-size: 16px;
    opacity: 0;
    transform: scale(.6);
}
.demo-upload-progress {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 3px;
    border-radius: 999px;
    background: rgba(0,15,71,.08);
    overflow: hidden;
    opacity: 0;
}
.demo-upload-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #0B4BFF;
    transform: scaleX(0);
    transform-origin: left;
}
.demo-primary-action {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 49px;
    margin-top: 18px;
    border-radius: 9px;
    background: #000F47;
    color: #FFFFFF;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
}
.demo-primary-action__loading,
.demo-primary-action__ready {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.demo-primary-action__loading {
    background: #8B96B5;
    opacity: 0;
}
.demo-primary-action__loading i {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
}
.demo-primary-action__ready { opacity: 0; transform: translateY(8px); }
.demo-primary-action__ready b { font-size: 18px; font-weight: 500; }
.demo-text-link {
    display: block;
    margin-top: 12px;
    color: #5C6C84;
    font-size: 10px;
    text-align: center;
    text-decoration: underline;
}

/* Stap 1 animatie */
.showcase-demo.is-active .demo-upload-icon,
.showcase-demo.is-active .demo-upload-empty { animation: demo-upload-empty-out .45s 1.05s ease both; }
.showcase-demo.is-active .demo-file-row { animation: demo-file-in .55s 1.18s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-file-status__loading { animation: demo-spinner-visible 1.55s 1.7s ease both, demo-spin .7s 1.7s linear infinite; }
.showcase-demo.is-active .demo-upload-progress { animation: demo-fade-in .2s 1.7s ease both, demo-fade-out .25s 3.25s ease forwards; }
.showcase-demo.is-active .demo-upload-progress span { animation: demo-progress-x 1.5s 1.75s cubic-bezier(.25,.65,.25,1) both; }
.showcase-demo.is-active .demo-file-status__done { animation: demo-check-in .35s 3.2s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-primary-action__loading { animation: demo-button-loading 1.25s 2.1s ease both; }
.showcase-demo.is-active .demo-primary-action__loading i { animation: demo-spin .7s 2.1s linear infinite; }
.showcase-demo.is-active .demo-primary-action__ready { animation: demo-button-ready .4s 3.35s ease both; }

.demo-results-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 18px;
}
.demo-results-heading > div strong { display: block; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.16; }
.demo-sort { color: #000F47; font-size: 10px; font-weight: 700; }
.demo-summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-bottom: 14px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 5px 14px rgba(0,15,71,.04);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
}
.demo-summary-row > div { min-width: 0; padding: 12px; border-right: 1px solid rgba(0,15,71,.10); }
.demo-summary-row > div:last-child { border-right: 0; }
.demo-summary-row small,
.demo-summary-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-summary-row small { color: #607086; font-size: 8px; font-weight: 700; }
.demo-summary-row strong { margin-top: 4px; color: #000F47; font-size: 9px; }
.demo-results-loading {
    height: 5px;
    margin-bottom: 17px;
    border-radius: 999px;
    background: #EFF2F7;
    overflow: hidden;
}
.demo-results-loading span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #0B4BFF;
    transform: scaleX(0);
    transform-origin: left;
}
.demo-offers {
    display: grid;
    gap: 10px;
}
.demo-offer {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 80px 62px;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 13px;
    border: 1px solid rgba(0,15,71,.11);
    border-radius: 11px;
    background: #FFFFFF;
    opacity: 0;
    transform: translateY(18px) scale(.985);
}
.demo-offer--best { border-color: rgba(11,75,255,.34); }
.demo-offer__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0B4BFF;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, 5px) scale(.85);
}
.demo-insurer {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 700;
}
.demo-insurer--a { background: #F7F3EE; color: #000F47; }
.demo-insurer--b { background: #CEECFF; color: #000F47; }
.demo-insurer--c { background: #000F47; color: #FFFFFF; }
.demo-offer__copy small,
.demo-offer__copy strong,
.demo-offer__saving small,
.demo-offer__saving strong { display: block; }
.demo-offer__copy small { color: #607086; font-size: 8px; }
.demo-offer__copy strong { margin-top: 2px; color: #000F47; font-size: 10px; }
.demo-offer__saving { padding-left: 10px; border-left: 1px solid rgba(0,15,71,.10); text-align: center; }
.demo-offer__saving strong { font-family: var(--font-headline); font-size: 21px; line-height: 1; }
.demo-offer__saving small { margin-top: 3px; color: #607086; font-size: 7px; }
.demo-offer__button {
    display: grid;
    place-items: center;
    min-height: 34px;
    border-radius: 7px;
    background: #000F47;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
}

/* Stap 2 animatie */
.showcase-demo.is-active .demo-summary-row { animation: demo-slide-down .45s .45s ease both; }
.showcase-demo.is-active .demo-results-loading span { animation: demo-progress-x 1.7s .75s cubic-bezier(.2,.75,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(1) { animation: demo-card-in .5s 1.75s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(2) { animation: demo-card-in .5s 2.1s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(3) { animation: demo-card-in .5s 2.45s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer__badge { animation: demo-badge-in .4s 2.95s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-offer--best { animation: demo-card-in .5s 1.75s cubic-bezier(.2,.8,.2,1) both, demo-best-pulse .55s 3.15s ease both; }

.demo-choice-list { display: grid; gap: 12px; margin-top: 20px; }
.demo-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 78px 72px;
    align-items: center;
    gap: 12px;
    min-height: 94px;
    padding: 14px;
    border: 1px solid rgba(0,15,71,.12);
    border-radius: 12px;
    background: #FFFFFF;
    transition: border-color .25s ease, background-color .25s ease, opacity .25s ease, transform .25s ease;
}
.demo-choice-copy small,
.demo-choice-copy strong,
.demo-choice-copy span,
.demo-choice-saving strong,
.demo-choice-saving small { display: block; }
.demo-choice-copy small { color: #607086; font-size: 8px; }
.demo-choice-copy strong { margin-top: 2px; font-size: 10px; }
.demo-choice-copy span { margin-top: 5px; color: #607086; font-size: 7px; text-decoration: underline; }
.demo-choice-saving { text-align: center; }
.demo-choice-saving strong { font-family: var(--font-headline); font-size: 22px; line-height: 1; }
.demo-choice-saving small { margin-top: 3px; color: #607086; font-size: 7px; }
.demo-choice-button {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 38px;
    border-radius: 7px;
    background: #000F47;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    overflow: hidden;
}
.demo-choice-button__before,
.demo-choice-button__after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.demo-choice-button__after { opacity: 0; transform: translateY(8px); }
.demo-choice-button__after .material-icons { font-size: 13px; }
.demo-choice-button--ghost { background: #FFFFFF; color: #000F47; border: 1px solid rgba(0,15,71,.20); }
.demo-choice-check {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #6ABF30;
    color: #FFFFFF;
    font-size: 14px;
    opacity: 0;
    transform: scale(.4);
}
.demo-pointer {
    position: absolute;
    z-index: 5;
    right: 36px;
    top: 172px;
    color: #0B4BFF;
    font-size: 30px;
    filter: drop-shadow(0 3px 3px rgba(0,15,71,.16));
    opacity: 0;
    transform: translate(48px, 54px) rotate(-16deg);
}
.demo-confirmation {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 13px;
    border-radius: 10px;
    background: #EAF6EE;
    color: #000F47;
    opacity: 0;
    transform: translateY(18px);
}
.demo-confirmation__icon { color: #3A9B61; font-size: 22px; }
.demo-confirmation strong,
.demo-confirmation small { display: block; }
.demo-confirmation strong { font-size: 10px; }
.demo-confirmation small { margin-top: 2px; color: #3D3C37; font-size: 8px; }
.demo-advice-note {
    position: absolute;
    right: 26px;
    bottom: 18px;
    display: none;
    align-items: center;
    gap: 9px;
    max-width: 230px;
    padding: 9px 11px;
    border: 1px solid rgba(0,15,71,.12);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(0,15,71,.08);
}
.demo-advice-note__avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; overflow: hidden; background: #F7F3EE; }
.demo-advice-note__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.demo-advice-note strong,
.demo-advice-note small { display: block; }
.demo-advice-note strong { font-size: 9px; }
.demo-advice-note small { margin-top: 2px; color: #3D3C37; font-size: 7px; }

/* Stap 3 animatie */
.showcase-demo.is-active .demo-pointer { animation: demo-pointer-move 1.2s .75s cubic-bezier(.25,.7,.25,1) both; }
.showcase-demo.is-active .demo-choice-card--selected { animation: demo-select-card .5s 1.85s ease both; }
.showcase-demo.is-active .demo-choice-card--muted { animation: demo-dim-card .45s 2.1s ease both; }
.showcase-demo.is-active .demo-choice-button__before { animation: demo-hide-before .25s 1.82s ease both; }
.showcase-demo.is-active .demo-choice-button__after { animation: demo-show-after .35s 1.9s ease both; }
.showcase-demo.is-active .demo-choice-check { animation: demo-check-in .38s 2.08s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-confirmation { animation: demo-confirmation-in .48s 2.55s cubic-bezier(.2,.8,.2,1) both; }

.comparison-showcase__features {
    display: grid;
    gap: 34px;
}
.showcase-feature {
    position: relative;
    display: grid;
    grid-template-columns: 5px minmax(0,1fr);
    gap: 22px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000F47;
    text-align: left;
    cursor: pointer;
    opacity: .32;
    transition: opacity .25s ease, transform .25s ease;
}
.showcase-feature:hover,
.showcase-feature:focus-visible,
.showcase-feature.is-active { opacity: 1; }
.showcase-feature:hover { transform: translateX(3px); }
.showcase-feature:focus-visible { outline: 3px solid #0B4BFF; outline-offset: 8px; }
.showcase-feature__progress {
    position: relative;
    display: block;
    width: 5px;
    min-height: 112px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,15,71,.10);
}
.showcase-feature__progress > span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000F47;
    transform: scaleY(0);
    transform-origin: top center;
}
.showcase-feature.is-active .showcase-feature__progress > span {
    animation: showcase-progress var(--showcase-duration, 7600ms) linear forwards;
}
.showcase-feature__content strong,
.showcase-feature__content > span { display: block; }
.showcase-feature__content strong {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: clamp(22px, 2vw, 31px);
    line-height: 1.18;
    letter-spacing: -.03em;
}
.showcase-feature__number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: #CEECFF;
    color: #000F47;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}
.showcase-feature__content > span {
    max-width: 520px;
    color: #3D3C37;
    font-size: 14px;
    line-height: 1.65;
}
.comparison-showcase.is-paused .showcase-feature.is-active .showcase-feature__progress > span,
.comparison-showcase.is-paused .showcase-demo.is-active * {
    animation-play-state: paused !important;
}

@keyframes showcase-progress { to { transform: scaleY(1); } }
@keyframes demo-upload-empty-out { to { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes demo-file-in { to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes demo-spinner-visible { 0%,100% { opacity: 0; } 8%,82% { opacity: 1; } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-fade-in { to { opacity: 1; } }
@keyframes demo-fade-out { to { opacity: 0; } }
@keyframes demo-progress-x { to { transform: scaleX(1); } }
@keyframes demo-check-in { to { opacity: 1; transform: scale(1); } }
@keyframes demo-button-loading { 0% { opacity: 0; } 15%,85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes demo-button-ready { to { opacity: 1; transform: translateY(0); } }
@keyframes demo-slide-down { to { opacity: 1; transform: translateY(0); } }
@keyframes demo-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes demo-badge-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes demo-best-pulse { 50% { box-shadow: 0 0 0 5px rgba(11,75,255,.10); } }
@keyframes demo-pointer-move {
    0% { opacity: 0; transform: translate(48px,54px) rotate(-16deg); }
    18% { opacity: 1; }
    78%,100% { opacity: 1; transform: translate(0,0) rotate(-16deg); }
}
@keyframes demo-select-card {
    0% { border-color: rgba(0,15,71,.12); background: #FFFFFF; transform: scale(1); }
    45% { transform: scale(.992); }
    100% { border-color: #6ABF30; background: #F4FBF6; transform: scale(1); box-shadow: 0 0 0 2px rgba(106,191,48,.12); }
}
@keyframes demo-dim-card { to { opacity: .46; transform: scale(.985); } }
@keyframes demo-hide-before { to { opacity: 0; transform: translateY(-8px); } }
@keyframes demo-show-after { to { opacity: 1; transform: translateY(0); background: #6ABF30; } }
@keyframes demo-confirmation-in { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
    .comparison-showcase__grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 42px; }
    .comparison-showcase__stage { min-height: 500px; }
    .demo-screen { padding: 22px; }
    .demo-offer { grid-template-columns: 40px minmax(0,1fr) 70px 58px; gap: 9px; }
}
@media (max-width: 900px) {
    .comparison-showcase-section { padding: 64px 0 68px; }
    .comparison-showcase__intro { margin-bottom: 30px; }
    .comparison-showcase__grid { grid-template-columns: 1fr; gap: 34px; }
    .comparison-showcase__stage { min-height: 500px; }
    .comparison-showcase__features { gap: 22px; }
    .showcase-feature { gap: 16px; opacity: .42; }
    .showcase-feature__progress { min-height: 90px; }
    .showcase-feature__content strong { font-size: 22px; }
}
@media (max-width: 560px) {
    .comparison-showcase-section { padding: 50px 0 56px; }
    .comparison-showcase__lead { font-size: 14px; }
    .comparison-showcase__stage { min-height: 435px; border-radius: 20px; }
    .showcase-demo { padding: 16px; }
    .demo-browserbar { min-height: 29px; padding: 0 10px; }
    .demo-browserbar__label { font-size: 7px; }
    .demo-screen { padding: 17px 14px; }
    .demo-screen__heading strong { font-size: 19px; }
    .demo-screen__heading small { font-size: 9px; }
    .demo-upload-zone { min-height: 130px; margin-top: 18px; }
    .demo-file-row { left: 10px; right: 10px; grid-template-columns: 34px minmax(0,1fr) 24px; padding: 9px; }
    .demo-file-type { width: 34px; height: 34px; }
    .demo-results-heading { margin-bottom: 12px; }
    .demo-results-heading > div strong { font-size: 18px; }
    .demo-sort { display: none; }
    .demo-summary-row > div { padding: 9px 7px; }
    .demo-summary-row small { font-size: 7px; }
    .demo-summary-row strong { font-size: 7.5px; }
    .demo-offers { gap: 8px; }
    .demo-offer { grid-template-columns: 34px minmax(0,1fr) 58px; min-height: 69px; padding: 10px; }
    .demo-offer .demo-offer__button { display: none; }
    .demo-insurer { width: 33px; height: 33px; border-radius: 9px; font-size: 15px; }
    .demo-offer__copy strong { font-size: 9px; }
    .demo-offer__saving strong { font-size: 18px; }
    .demo-choice-card { grid-template-columns: 34px minmax(0,1fr) 58px; min-height: 82px; padding: 11px; }
    .demo-choice-card .demo-choice-button { grid-column: 2 / -1; min-height: 34px; }
    .demo-choice-card--muted { display: none; }
    .demo-pointer { top: 230px; right: 27px; font-size: 26px; }
    .demo-confirmation { left: 14px; right: 14px; bottom: 16px; }
    .showcase-feature__content strong { font-size: 20px; }
    .showcase-feature__content > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-demo,
    .showcase-feature { transition: none; }
    .showcase-feature.is-active .showcase-feature__progress > span,
    .showcase-demo.is-active * { animation: none !important; }
    .showcase-feature.is-active .showcase-feature__progress > span { transform: scaleY(1); }
    .showcase-demo.is-active .demo-upload-icon,
    .showcase-demo.is-active .demo-upload-empty { opacity: 0; }
    .showcase-demo.is-active .demo-file-row { opacity: 1; transform: translateY(-50%) scale(1); }
    .showcase-demo.is-active .demo-file-status__done,
    .showcase-demo.is-active .demo-primary-action__ready,
    .showcase-demo.is-active .demo-summary-row,
    .showcase-demo.is-active .demo-offer,
    .showcase-demo.is-active .demo-offer__badge,
    .showcase-demo.is-active .demo-choice-check,
    .showcase-demo.is-active .demo-confirmation { opacity: 1; transform: none; }
    .showcase-demo.is-active .demo-upload-progress span,
    .showcase-demo.is-active .demo-results-loading span { transform: scaleX(1); }
    .showcase-demo.is-active .demo-choice-card--selected { border-color: #6ABF30; background: #F4FBF6; }
    .showcase-demo.is-active .demo-choice-button__before { opacity: 0; }
    .showcase-demo.is-active .demo-choice-button__after { opacity: 1; transform: none; }
    .showcase-demo.is-active .demo-choice-card--muted { opacity: .46; }
}


/* Producttour v3: 4 stappen, sneller tempo en aanvraagstap. */
.comparison-showcase__features { gap: 24px; }
.showcase-feature__progress { min-height: 88px; }
.showcase-feature.is-active .showcase-feature__progress > span {
    animation-duration: var(--showcase-duration, 4300ms);
}

/* Snellere interne animaties: de inhoud is ruim vóór de volgende stap klaar. */
.showcase-demo.is-active .demo-upload-icon,
.showcase-demo.is-active .demo-upload-empty { animation: demo-upload-empty-out .32s .55s ease both; }
.showcase-demo.is-active .demo-file-row { animation: demo-file-in .42s .68s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-file-status__loading { animation: demo-spinner-visible 1.05s 1.02s ease both, demo-spin .62s 1.02s linear infinite; }
.showcase-demo.is-active .demo-upload-progress { animation: demo-fade-in .16s 1.02s ease both, demo-fade-out .2s 2.15s ease forwards; }
.showcase-demo.is-active .demo-upload-progress span { animation: demo-progress-x 1.02s 1.06s cubic-bezier(.25,.65,.25,1) both; }
.showcase-demo.is-active .demo-file-status__done { animation: demo-check-in .28s 2.08s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-primary-action__loading { animation: demo-button-loading .9s 1.35s ease both; }
.showcase-demo.is-active .demo-primary-action__loading i { animation: demo-spin .62s 1.35s linear infinite; }
.showcase-demo.is-active .demo-primary-action__ready { animation: demo-button-ready .32s 2.22s ease both; }

.showcase-demo.is-active .demo-summary-row { animation: demo-slide-down .34s .28s ease both; }
.showcase-demo.is-active .demo-results-loading span { animation: demo-progress-x 1.05s .48s cubic-bezier(.2,.75,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(1) { animation: demo-card-in .38s 1.18s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(2) { animation: demo-card-in .38s 1.45s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(3) { animation: demo-card-in .38s 1.72s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer__badge { animation: demo-badge-in .3s 2.02s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-offer--best { animation: demo-card-in .38s 1.18s cubic-bezier(.2,.8,.2,1) both, demo-best-pulse .42s 2.24s ease both; }

.showcase-demo.is-active .demo-pointer { animation: demo-pointer-move .82s .48s cubic-bezier(.25,.7,.25,1) both; }
.showcase-demo.is-active .demo-choice-card--selected { animation: demo-select-card .38s 1.28s ease both; }
.showcase-demo.is-active .demo-choice-card--muted { animation: demo-dim-card .34s 1.48s ease both; }
.showcase-demo.is-active .demo-choice-button__before { animation: demo-hide-before .2s 1.25s ease both; }
.showcase-demo.is-active .demo-choice-button__after { animation: demo-show-after .28s 1.32s ease both; }
.showcase-demo.is-active .demo-choice-check { animation: demo-check-in .3s 1.48s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-confirmation { animation: demo-confirmation-in .38s 1.88s cubic-bezier(.2,.8,.2,1) both; }

/* Stap 4: aanvraagformulier, abstract gehouden maar herkenbaar als de laatste wizardstap. */
.demo-screen--apply { padding-bottom: 22px; }
.demo-apply-heading { margin-bottom: 14px; }
.demo-selected-summary {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 10px;
    background: #F4FBF6;
    opacity: 0;
    transform: translateY(-8px);
}
.demo-selected-summary small,
.demo-selected-summary strong { display: block; }
.demo-selected-summary small { color: #607086; font-size: 8px; }
.demo-selected-summary strong { margin-top: 2px; color: #000F47; font-size: 9px; }
.demo-selected-summary > .material-icons { color: #3A9B61; font-size: 20px; }
.demo-application-form { display: grid; gap: 9px; margin-top: 13px; }
.demo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.demo-form-field {
    position: relative;
    min-height: 58px;
    padding: 9px 34px 9px 11px;
    border: 1px solid rgba(0,15,71,.12);
    border-radius: 9px;
    background: #FFFFFF;
    overflow: hidden;
}
.demo-form-field small { display:block; color:#607086; font-size:7px; font-weight:700; }
.demo-form-field strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 7px;
    color: #000F47;
    font-size: 9px;
    opacity: 0;
    transform: translateX(-5px);
}
.demo-form-placeholder {
    position: absolute;
    left: 11px;
    right: 36px;
    bottom: 12px;
    height: 8px;
    border-radius: 999px;
    background: #EEF1F5;
    transform-origin: left;
}
.demo-form-check {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EAF6EE;
    color: #3A9B61;
    font-size: 13px;
    opacity: 0;
    transform: scale(.55);
}
.demo-apply-consent {
    display:flex;
    align-items:center;
    gap:7px;
    color:#3D3C37;
    font-size:8px;
    opacity:0;
}
.demo-checkbox {
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    border-radius:4px;
    background:#000F47;
    color:#FFFFFF;
    font-size:11px;
}
.demo-apply-action {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 48px;
    margin-top: 12px;
    border-radius: 9px;
    background: #FFBF00;
    color: #000F47;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
}
.demo-apply-action > span {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.demo-apply-action__default b { font-size:18px; font-weight:500; }
.demo-apply-action__loading,
.demo-apply-action__done { opacity:0; }
.demo-apply-action__loading { background:#8B96B5; color:#FFFFFF; }
.demo-apply-action__loading i {
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#FFFFFF;
    border-radius:50%;
}
.demo-apply-action__done { background:#000F47; color:#FFFFFF; transform:translateY(7px); }
.demo-apply-action__done .material-icons { font-size:16px; }

.showcase-demo.is-active .demo-selected-summary { animation: demo-slide-down .32s .28s ease both; }
.showcase-demo.is-active .demo-form-field--1 strong { animation: demo-form-value .28s .82s ease both; }
.showcase-demo.is-active .demo-form-field--1 .demo-form-placeholder { animation: demo-placeholder-away .25s .78s ease both; }
.showcase-demo.is-active .demo-form-field--1 .demo-form-check { animation: demo-check-in .25s 1.03s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-form-field--2 strong { animation: demo-form-value .28s 1.15s ease both; }
.showcase-demo.is-active .demo-form-field--2 .demo-form-placeholder { animation: demo-placeholder-away .25s 1.11s ease both; }
.showcase-demo.is-active .demo-form-field--2 .demo-form-check { animation: demo-check-in .25s 1.36s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-form-field--3 strong { animation: demo-form-value .28s 1.45s ease both; }
.showcase-demo.is-active .demo-form-field--3 .demo-form-placeholder { animation: demo-placeholder-away .25s 1.41s ease both; }
.showcase-demo.is-active .demo-form-field--3 .demo-form-check { animation: demo-check-in .25s 1.66s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-apply-consent { animation: demo-fade-in .24s 1.78s ease both; }
.showcase-demo.is-active .demo-apply-action__default { animation: demo-apply-default .22s 2.18s ease both; }
.showcase-demo.is-active .demo-apply-action__loading { animation: demo-apply-loading .8s 2.16s ease both; }
.showcase-demo.is-active .demo-apply-action__loading i { animation: demo-spin .62s 2.16s linear infinite; }
.showcase-demo.is-active .demo-apply-action__done { animation: demo-button-ready .3s 2.94s ease both; }

@keyframes demo-form-value { to { opacity:1; transform:translateX(0); } }
@keyframes demo-placeholder-away { to { opacity:0; transform:scaleX(.35); } }
@keyframes demo-apply-default { to { opacity:0; transform:translateY(-6px); } }
@keyframes demo-apply-loading { 0%,100% { opacity:0; } 10%,88% { opacity:1; } }

@media (max-width: 900px) {
    .comparison-showcase__features { gap: 18px; }
    .showcase-feature__progress { min-height: 76px; }
}
@media (max-width: 560px) {
    .demo-form-grid { grid-template-columns: 1fr; gap: 7px; }
    .demo-form-field { min-height: 49px; padding-top: 7px; padding-bottom: 7px; }
    .demo-form-field strong { margin-top: 4px; font-size: 8px; }
    .demo-form-placeholder { bottom: 10px; }
    .demo-application-form { gap: 7px; margin-top: 9px; }
    .demo-selected-summary { padding: 8px 10px; }
    .demo-apply-action { min-height: 43px; margin-top: 9px; }
    .showcase-feature__progress { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-demo.is-active .demo-selected-summary,
    .showcase-demo.is-active .demo-form-field strong,
    .showcase-demo.is-active .demo-form-check,
    .showcase-demo.is-active .demo-apply-consent,
    .showcase-demo.is-active .demo-apply-action__done { opacity:1; transform:none; }
    .showcase-demo.is-active .demo-form-placeholder,
    .showcase-demo.is-active .demo-apply-action__default,
    .showcase-demo.is-active .demo-apply-action__loading { opacity:0; }
}


/* Minimalistische variant producttour: minder visuele ruis, geen browser-frame. */
.comparison-showcase-section {
    background: #FFFFFF;
}
.comparison-showcase__grid {
    align-items: stretch;
}
.comparison-showcase__stage {
    min-height: 500px;
    padding: 12px;
    border-radius: 24px;
    background: #F7F3EE;
    box-shadow: inset 0 0 0 1px rgba(0,15,71,.06);
}
.comparison-showcase__stage::before,
.comparison-showcase__stage::after {
    display: none;
}
.showcase-demo {
    padding: 0;
    transform: translateX(12px) scale(.995);
}
.demo-browserbar {
    display: none;
}
.demo-screen {
    height: 100%;
    min-height: 476px;
    padding: 30px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 16px 34px rgba(0,15,71,.06);
}
.demo-kicker {
    background: #F7F3EE;
}
.demo-upload-zone {
    background: #FBFAF8;
    border-color: rgba(0,15,71,.18);
}
.demo-upload-icon {
    box-shadow: none;
}
.demo-file-row,
.demo-summary-row,
.demo-offer,
.demo-choice-card,
.demo-application-card,
.demo-application-summary {
    box-shadow: none;
}
.demo-results-loading {
    background: #E8EDF5;
}
.demo-confirmation,
.demo-success-card {
    box-shadow: none;
}
@media (max-width: 900px) {
    .comparison-showcase__stage {
        min-height: 485px;
        padding: 10px;
    }
    .demo-screen {
        min-height: 465px;
        padding: 24px;
    }
}
@media (max-width: 560px) {
    .comparison-showcase-section {
        background: #FFFFFF;
    }
    .comparison-showcase__stage {
        min-height: 420px;
        padding: 8px;
        border-radius: 18px;
    }
    .showcase-demo {
        padding: 0;
    }
    .demo-screen {
        min-height: 404px;
        padding: 16px 14px;
        border-radius: 16px;
    }
}


/* Definitieve rustige producttour: neutral brown sectie, zonder browser/chrome frame. */
.comparison-showcase-section {
    background: #F7F3EE;
}
.comparison-showcase__stage {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.comparison-showcase__stage::before,
.comparison-showcase__stage::after,
.demo-browserbar {
    display: none;
}
.showcase-demo {
    padding: 0;
}
.demo-screen {
    border: 1px solid rgba(0,15,71,.08);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 14px 32px rgba(0,15,71,.055);
}
@media (max-width: 900px) {
    .comparison-showcase__stage {
        padding: 0;
    }
}
@media (max-width: 560px) {
    .comparison-showcase-section {
        background: #F7F3EE;
    }
    .comparison-showcase__stage {
        padding: 0;
        border-radius: 0;
    }
}


/* Stap 4 vernieuwd: persoonlijk advies na de aanvraag. */
.demo-screen--aftercare {
    padding-bottom: 22px;
}
.demo-aftercare-heading {
    margin-bottom: 14px;
}
.demo-aftercare-summary {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 10px;
    background: #F4FBF6;
    opacity: 0;
    transform: translateY(-8px);
}
.demo-aftercare-summary small,
.demo-aftercare-summary strong { display:block; }
.demo-aftercare-summary small { color:#607086; font-size:8px; }
.demo-aftercare-summary strong { margin-top:2px; color:#000F47; font-size:9px; }
.demo-aftercare-summary > .material-icons { color:#3A9B61; font-size:20px; }
.demo-advisor-card {
    display:grid;
    grid-template-columns: 48px minmax(0,1fr) 24px;
    align-items:center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 12px;
    background: #FFFFFF;
    opacity: 0;
    transform: translateY(10px);
}
.demo-advisor-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #F7F3EE;
}
.demo-advisor-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}
.demo-advisor-card__copy small,
.demo-advisor-card__copy strong,
.demo-advisor-card__copy span {
    display:block;
}
.demo-advisor-card__copy small {
    color:#607086;
    font-size:8px;
    font-weight:700;
}
.demo-advisor-card__copy strong {
    margin-top:2px;
    color:#000F47;
    font-size:11px;
    line-height:1.35;
}
.demo-advisor-card__copy span {
    margin-top:4px;
    color:#3D3C37;
    font-size:8px;
    line-height:1.45;
}
.demo-advisor-card__signal {
    color:#0B4BFF;
    font-size:22px;
}
.demo-aftercare-list {
    display:grid;
    gap: 9px;
    margin-top: 12px;
}
.demo-aftercare-item {
    display:grid;
    grid-template-columns: 22px minmax(0,1fr);
    gap: 10px;
    align-items:start;
    padding: 10px 11px;
    border-radius: 10px;
    background: #F7F3EE;
    opacity: 0;
    transform: translateY(8px);
}
.demo-aftercare-item > .material-icons {
    color:#000F47;
    font-size:18px;
}
.demo-aftercare-item strong,
.demo-aftercare-item small { display:block; }
.demo-aftercare-item strong {
    color:#000F47;
    font-size:9px;
    line-height:1.35;
}
.demo-aftercare-item small {
    margin-top:2px;
    color:#3D3C37;
    font-size:8px;
    line-height:1.45;
}
.demo-aftercare-status {
    display:flex;
    align-items:center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #EAF3FF;
    color:#000F47;
    opacity:0;
    transform: translateY(10px);
}
.demo-aftercare-status > .material-icons {
    color:#0B4BFF;
    font-size:20px;
}
.demo-aftercare-status strong,
.demo-aftercare-status small { display:block; }
.demo-aftercare-status strong { font-size:10px; }
.demo-aftercare-status small { margin-top:2px; color:#3D3C37; font-size:8px; }

.showcase-demo.is-active .demo-aftercare-summary { animation: demo-slide-down .28s .22s ease both; }
.showcase-demo.is-active .demo-advisor-card { animation: demo-confirmation-in .35s .55s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-aftercare-item--1 { animation: demo-confirmation-in .3s .95s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-aftercare-item--2 { animation: demo-confirmation-in .3s 1.18s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-aftercare-item--3 { animation: demo-confirmation-in .3s 1.41s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-aftercare-status { animation: demo-confirmation-in .35s 1.78s cubic-bezier(.2,.8,.2,1) both; }

@media (max-width: 560px) {
    .demo-aftercare-summary { padding: 8px 10px; }
    .demo-advisor-card { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 10px; }
    .demo-advisor-card__signal { display:none; }
    .demo-advisor-card__avatar { width:42px; height:42px; }
    .demo-advisor-card__copy strong { font-size:10px; }
    .demo-advisor-card__copy span { font-size:7.5px; }
    .demo-aftercare-item { gap: 8px; padding: 9px 10px; }
    .demo-aftercare-item strong { font-size:8.5px; }
    .demo-aftercare-item small { font-size:7.5px; }
    .demo-aftercare-status { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-demo.is-active .demo-aftercare-summary,
    .showcase-demo.is-active .demo-advisor-card,
    .showcase-demo.is-active .demo-aftercare-item,
    .showcase-demo.is-active .demo-aftercare-status { opacity:1; transform:none; }
}
\n\n/* Producttour v7: rustiger ritme, cursors in stap 1/2 en simpele planner als 'En daarna?'. */
.showcase-feature.is-active .showcase-feature__progress > span {
    animation-duration: var(--showcase-duration, 4700ms);
}

/* Cursor als menselijk ritme in de eerste twee stappen. */
.demo-step-pointer {
    position: absolute;
    z-index: 8;
    color: #0B4BFF;
    font-size: 29px;
    line-height: 1;
    filter: drop-shadow(0 3px 3px rgba(0,15,71,.14));
    opacity: 0;
    pointer-events: none;
}
.demo-step-pointer--upload {
    right: 36px;
    top: 185px;
    transform: translate(70px, 64px) rotate(-16deg);
}
.demo-step-pointer--compare {
    right: 29px;
    top: 212px;
    transform: translate(58px, 58px) rotate(-16deg);
}
.showcase-demo.is-active .demo-step-pointer--upload {
    animation: demo-pointer-upload 1.05s .48s cubic-bezier(.25,.72,.25,1) both;
}
.showcase-demo.is-active .demo-upload-zone {
    animation: demo-upload-zone-click .32s 1.37s ease both;
}
.showcase-demo.is-active .demo-step-pointer--compare {
    animation: demo-pointer-compare 1.08s 2.05s cubic-bezier(.25,.72,.25,1) both;
}
.showcase-demo.is-active .demo-offer--best {
    animation: demo-card-in .42s 1.32s cubic-bezier(.2,.8,.2,1) both, demo-best-hover .44s 2.86s ease both;
}
@keyframes demo-pointer-upload {
    0% { opacity:0; transform:translate(70px,64px) rotate(-16deg); }
    18% { opacity:1; }
    72% { opacity:1; transform:translate(0,0) rotate(-16deg); }
    82% { transform:translate(2px,2px) rotate(-16deg) scale(.92); }
    100% { opacity:0; transform:translate(2px,2px) rotate(-16deg) scale(.92); }
}
@keyframes demo-upload-zone-click {
    50% { border-color:#0B4BFF; box-shadow:0 0 0 4px rgba(11,75,255,.08); }
}
@keyframes demo-pointer-compare {
    0% { opacity:0; transform:translate(58px,58px) rotate(-16deg); }
    16% { opacity:1; }
    72% { opacity:1; transform:translate(-54px,12px) rotate(-16deg); }
    84% { transform:translate(-52px,14px) rotate(-16deg) scale(.92); }
    100% { opacity:0; transform:translate(-52px,14px) rotate(-16deg) scale(.92); }
}
@keyframes demo-best-hover {
    0%,100% { border-color:rgba(11,75,255,.28); background:#FFFFFF; transform:translateY(0); }
    50% { border-color:#0B4BFF; background:#F8FBFF; transform:translateY(-2px); }
}

/* Iets rustiger interne timing: actie blijft zichtbaar vóór de stap wisselt. */
.showcase-demo.is-active .demo-upload-icon,
.showcase-demo.is-active .demo-upload-empty { animation: demo-upload-empty-out .38s 1.42s ease both; }
.showcase-demo.is-active .demo-file-row { animation: demo-file-in .46s 1.55s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-file-status__loading { animation: demo-spinner-visible 1.2s 1.95s ease both, demo-spin .7s 1.95s linear infinite; }
.showcase-demo.is-active .demo-upload-progress { animation: demo-fade-in .18s 1.95s ease both, demo-fade-out .22s 3.05s ease forwards; }
.showcase-demo.is-active .demo-upload-progress span { animation: demo-progress-x 1.08s 2s cubic-bezier(.25,.65,.25,1) both; }
.showcase-demo.is-active .demo-file-status__done { animation: demo-check-in .3s 3.02s cubic-bezier(.2,.9,.2,1.25) both; }
.showcase-demo.is-active .demo-primary-action__loading { animation: demo-button-loading 1s 2.34s ease both; }
.showcase-demo.is-active .demo-primary-action__loading i { animation: demo-spin .68s 2.34s linear infinite; }
.showcase-demo.is-active .demo-primary-action__ready { animation: demo-button-ready .34s 3.18s ease both; }

.showcase-demo.is-active .demo-summary-row { animation: demo-slide-down .38s .35s ease both; }
.showcase-demo.is-active .demo-results-loading span { animation: demo-progress-x 1.18s .60s cubic-bezier(.2,.75,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(1) { animation: demo-card-in .42s 1.32s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(2) { animation: demo-card-in .42s 1.68s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer:nth-child(3) { animation: demo-card-in .42s 2.04s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-offer__badge { animation: demo-badge-in .34s 2.42s cubic-bezier(.2,.9,.2,1.25) both; }

/* Stap 4: simpele afspraakplanner met Dwight. */
.demo-screen--planner {
    padding-bottom: 24px;
}
.demo-planner-heading {
    margin-bottom: 14px;
}
.demo-planner-heading small {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
}
.demo-planner-advisor {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(0,15,71,.10);
    border-radius: 12px;
    background: #FFFFFF;
    opacity: 0;
    transform: translateY(8px);
}
.demo-planner-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #F7F3EE;
}
.demo-planner-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}
.demo-planner-advisor-copy strong,
.demo-planner-advisor-copy small { display:block; }
.demo-planner-advisor-copy strong { color:#000F47; font-size:12px; }
.demo-planner-advisor-copy small { margin-top:2px; color:#3D3C37; font-size:8px; }
.demo-planner-online {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#3D3C37;
    font-size:8px;
    font-weight:700;
}
.demo-planner-online i {
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#6ABF30;
}
.demo-planner-card {
    position: relative;
    margin-top: 12px;
    padding: 14px;
    border-radius: 13px;
    background: #F7F3EE;
    opacity: 0;
    transform: translateY(10px);
}
.demo-planner-card__top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.demo-planner-card__top strong { color:#000F47; font-size:11px; }
.demo-planner-card__top span { color:#607086; font-size:8px; }
.demo-planner-days {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:12px;
}
.demo-planner-days > span {
    display:grid;
    place-items:center;
    min-height:52px;
    border:1px solid rgba(0,15,71,.10);
    border-radius:9px;
    background:#FFFFFF;
}
.demo-planner-days small,
.demo-planner-days strong { display:block; }
.demo-planner-days small { color:#607086; font-size:7px; }
.demo-planner-days strong { margin-top:2px; color:#000F47; font-size:13px; }
.demo-planner-days .is-day-active {
    border-color:#0B4BFF;
    box-shadow:inset 0 0 0 1px #0B4BFF;
}
.demo-planner-times {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:8px;
}
.demo-planner-times button {
    min-height:36px;
    padding:0 8px;
    border:1px solid rgba(0,15,71,.14);
    border-radius:8px;
    background:#FFFFFF;
    color:#000F47;
    font:700 9px/1 var(--font-body);
}
.demo-planner-time-target {
    transition:none;
}
.demo-step-pointer--planner {
    right: 43px;
    bottom: 23px;
    transform: translate(52px,30px) rotate(-16deg);
}
.demo-planner-confirmation {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:11px 13px;
    border-radius:11px;
    background:#EAF6EE;
    color:#000F47;
    opacity:0;
    transform:translateY(9px);
}
.demo-planner-confirmation > .material-icons { color:#3A9B61; font-size:21px; }
.demo-planner-confirmation strong,
.demo-planner-confirmation small { display:block; }
.demo-planner-confirmation strong { font-size:10px; }
.demo-planner-confirmation small { margin-top:2px; color:#3D3C37; font-size:8px; }
.showcase-demo.is-active .demo-planner-advisor { animation:demo-confirmation-in .38s .35s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-planner-card { animation:demo-confirmation-in .4s .72s cubic-bezier(.2,.8,.2,1) both; }
.showcase-demo.is-active .demo-step-pointer--planner { animation:demo-pointer-planner 1.08s 1.42s cubic-bezier(.25,.72,.25,1) both; }
.showcase-demo.is-active .demo-planner-time-target { animation:demo-time-select .34s 2.30s ease both; }
.showcase-demo.is-active .demo-planner-confirmation { animation:demo-confirmation-in .4s 2.62s cubic-bezier(.2,.8,.2,1) both; }
@keyframes demo-pointer-planner {
    0% { opacity:0; transform:translate(52px,30px) rotate(-16deg); }
    18% { opacity:1; }
    74% { opacity:1; transform:translate(-48px,-5px) rotate(-16deg); }
    85% { transform:translate(-46px,-3px) rotate(-16deg) scale(.92); }
    100% { opacity:0; transform:translate(-46px,-3px) rotate(-16deg) scale(.92); }
}
@keyframes demo-time-select {
    to { background:#000F47; border-color:#000F47; color:#FFFFFF; }
}
@media (max-width:560px) {
    .demo-step-pointer--upload { right:22px; top:180px; font-size:25px; }
    .demo-step-pointer--compare { right:19px; top:226px; font-size:25px; }
    .demo-planner-advisor { grid-template-columns:42px minmax(0,1fr); gap:10px; }
    .demo-planner-avatar { width:42px; height:42px; }
    .demo-planner-online { grid-column:2; margin-top:-4px; }
    .demo-planner-card { padding:11px; }
    .demo-planner-days > span { min-height:46px; }
    .demo-planner-times button { min-height:34px; }
    .demo-step-pointer--planner { right:28px; bottom:20px; font-size:25px; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-demo.is-active .demo-step-pointer { display:none; }
    .showcase-demo.is-active .demo-planner-advisor,
    .showcase-demo.is-active .demo-planner-card,
    .showcase-demo.is-active .demo-planner-confirmation { opacity:1; transform:none; }
    .showcase-demo.is-active .demo-planner-time-target { background:#000F47; border-color:#000F47; color:#FFFFFF; }
}


/* v8 fixes: zichtbare cursorbeweging in stap 1/2 + compacte planner in stap 4. */
.demo-screen { position: relative; }
.demo-step-pointer {
    z-index: 30;
    color: #0B4BFF;
    font-size: 32px;
    opacity: 0;
    filter: drop-shadow(0 4px 4px rgba(0,15,71,.18));
}
.demo-step-pointer--upload {
    right: 44px;
    top: 190px;
    transform: translate(100px, 78px) rotate(-18deg);
}
.demo-step-pointer--compare {
    right: 44px;
    top: 238px;
    transform: translate(92px, 68px) rotate(-18deg);
}
.showcase-demo.is-active .demo-step-pointer--upload {
    animation: demo-pointer-upload-v8 1.32s .42s cubic-bezier(.22,.72,.2,1) both;
}
.showcase-demo.is-active .demo-step-pointer--compare {
    animation: demo-pointer-compare-v8 1.34s 1.88s cubic-bezier(.22,.72,.2,1) both;
}
@keyframes demo-pointer-upload-v8 {
    0% { opacity:0; transform:translate(100px,78px) rotate(-18deg); }
    14% { opacity:1; }
    66% { opacity:1; transform:translate(-22px,8px) rotate(-18deg); }
    78% { opacity:1; transform:translate(-19px,11px) rotate(-18deg) scale(.88); }
    89% { opacity:1; transform:translate(-22px,8px) rotate(-18deg) scale(1); }
    100% { opacity:0; transform:translate(-22px,8px) rotate(-18deg); }
}
@keyframes demo-pointer-compare-v8 {
    0% { opacity:0; transform:translate(92px,68px) rotate(-18deg); }
    14% { opacity:1; }
    68% { opacity:1; transform:translate(-78px,8px) rotate(-18deg); }
    80% { opacity:1; transform:translate(-75px,11px) rotate(-18deg) scale(.88); }
    90% { opacity:1; transform:translate(-78px,8px) rotate(-18deg) scale(1); }
    100% { opacity:0; transform:translate(-78px,8px) rotate(-18deg); }
}

/* Stap 4 bewust simpel: Dwight + één compacte agenda. */
.demo-screen--planner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 476px;
    padding: 26px 28px 24px;
    overflow: hidden;
}
.demo-planner-heading {
    margin: 0 0 14px;
    text-align: left;
}
.demo-planner-heading .demo-kicker {
    margin-bottom: 7px;
}
.demo-planner-heading strong {
    font-size: clamp(21px, 2.1vw, 28px);
}
.demo-planner-heading small {
    max-width: 430px;
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.45;
}
.demo-planner-advisor {
    grid-template-columns: 52px minmax(0,1fr) auto;
    padding: 11px 13px;
    margin: 0;
}
.demo-planner-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}
.demo-planner-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
    transform: none !important;
    position: static !important;
}
.demo-planner-card {
    margin-top: 11px;
    padding: 12px;
}
.demo-planner-days > span { min-height: 46px; }
.demo-planner-times button { min-height: 34px; }
.demo-planner-confirmation {
    margin-top: 10px;
    padding: 10px 12px;
}
.demo-step-pointer--planner {
    right: 38px;
    bottom: 21px;
}

@media (max-width: 560px) {
    .demo-step-pointer--upload { right: 26px; top: 182px; font-size: 27px; }
    .demo-step-pointer--compare { right: 28px; top: 222px; font-size: 27px; }
    .demo-screen--planner { min-height: 404px; padding: 16px 14px; }
    .demo-planner-heading strong { font-size: 19px; }
    .demo-planner-heading small { font-size: 8.5px; }
    .demo-planner-advisor { grid-template-columns: 40px minmax(0,1fr); padding: 9px 10px; }
    .demo-planner-avatar { width: 40px; height: 40px; }
    .demo-planner-online { grid-column: 2; }
    .demo-planner-card { margin-top: 9px; padding: 10px; }
    .demo-planner-days { margin-top: 9px; gap: 6px; }
    .demo-planner-days > span { min-height: 42px; }
    .demo-planner-times { gap: 6px; margin-top: 6px; }
    .demo-planner-times button { min-height: 31px; }
    .demo-planner-confirmation { margin-top: 8px; }
}


/* v9: rustiger tempo, maar geen lange stilstand aan het einde van iedere stap. */
.demo-results-confirmation {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #EAF6EE;
    color: #000F47;
    opacity: 0;
    transform: translateY(10px);
}
.demo-results-confirmation > .material-icons {
    color: #3A9B61;
    font-size: 20px;
}
.demo-results-confirmation strong,
.demo-results-confirmation small {
    display: block;
}
.demo-results-confirmation strong {
    font-size: 9px;
}
.demo-results-confirmation small {
    margin-top: 2px;
    color: #3D3C37;
    font-size: 8px;
}

/* Stap 2 eindigt bewust met een korte bevestiging. */
.showcase-demo.is-active .demo-results-confirmation {
    animation: demo-confirmation-in .34s 3.48s cubic-bezier(.2,.8,.2,1) both;
}

/* Stap 3: bevestiging later laten landen zodat het einde natuurlijk voelt. */
.showcase-demo.is-active .demo-confirmation {
    animation: demo-confirmation-in .38s 3.10s cubic-bezier(.2,.8,.2,1) both;
}

/* Stap 4: tijdslot en bevestiging iets later, met een korte rustige hold erna. */
.showcase-demo.is-active .demo-step-pointer--planner {
    animation: demo-pointer-planner 1.02s 1.70s cubic-bezier(.25,.72,.25,1) both;
}
.showcase-demo.is-active .demo-planner-time-target {
    animation: demo-time-select .30s 2.58s ease both;
}
.showcase-demo.is-active .demo-planner-confirmation {
    animation: demo-confirmation-in .38s 3.18s cubic-bezier(.2,.8,.2,1) both;
}

@media (max-width: 560px) {
    .demo-results-confirmation {
        left: 14px;
        right: 14px;
        bottom: 14px;
        min-height: 46px;
        padding: 8px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-demo.is-active .demo-results-confirmation {
        opacity: 1;
        transform: none;
    }
}


/* Verzekeraars logo */
.insurer-logo-grid {
    gap: 18px;
}
.insurer-logo-tile {
    position: relative;
    width: 125px;
    height: 80px;
    padding: 22px 24px;
    background: #FFFFFF;
}
.insurer-logo-tile img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 58px;
    max-width: 100%;
    object-fit: contain;
}
.insurer-logo-tile .logo-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #000F47;
    font-weight: 700;
    text-align: center;
}
.insurer-logo-tile.is-logo-missing img { display: none; }
.insurer-logo-tile.is-logo-missing .logo-fallback { display: flex; }

/* Toekomstige branche-sectie. Voor nu hidden in HTML. Geen externe foto's. */
.industries-section--cards { background: #FFFFFF; }
.industry-cards-header { max-width: 760px; margin-bottom: 34px; }
.industry-cards-intro { max-width: 700px; margin-top: 14px; color: #3D3C37; line-height: 1.65; }
.industry-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.industry-card { overflow: hidden; border: 1px solid rgba(0,15,71,.10); border-radius: 18px; background: #FFFFFF; }
.industry-card__visual { position: relative; min-height: 230px; overflow: hidden; }
.industry-card__visual--installatie { background: #CEECFF; }
.industry-card__visual--drogisterij { background: #F7F3EE; }
.industry-shape { position: absolute; display: block; border-radius: 999px; }
.industry-card__visual--installatie .industry-shape--one { width: 230px; height: 230px; right: -45px; top: -55px; background: #0B4BFF; }
.industry-card__visual--installatie .industry-shape--two { width: 150px; height: 150px; left: 42px; bottom: -66px; background: #FFBF00; }
.industry-card__visual--installatie .industry-shape--three { width: 94px; height: 94px; left: 44%; top: 34%; background: #000F47; border-radius: 22px; transform: rotate(16deg); }
.industry-card__visual--drogisterij .industry-shape--one { width: 260px; height: 140px; right: -62px; bottom: 28px; background: #FFBF00; transform: rotate(-16deg); }
.industry-card__visual--drogisterij .industry-shape--two { width: 165px; height: 165px; left: 26px; top: -54px; background: #CEECFF; }
.industry-card__visual--drogisterij .industry-shape--three { width: 84px; height: 160px; left: 47%; bottom: -38px; background: #0B4BFF; border-radius: 24px; transform: rotate(22deg); }
.industry-visual-label { position: absolute; left: 24px; bottom: 20px; z-index: 3; padding: 8px 12px; border-radius: 999px; background: #FFFFFF; color: #000F47; font-size: 12px; font-weight: 700; }
.industry-card__body { padding: 26px; }
.industry-partner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; color: #3D3C37; font-size: 11px; }
.industry-partner-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 30px; padding: 4px 10px; border: 1px solid rgba(0,15,71,.12); border-radius: 7px; background: #F7F3EE; color: #000F47; font-size: 12px; }
.industry-card__body h3 { margin: 0 0 10px; color: #000F47; font-size: 22px; }
.industry-card__body p { margin: 0 0 22px; color: #3D3C37; font-size: 14px; line-height: 1.65; }
.industry-card__cta { display: inline-flex; align-items: center; gap: 12px; color: #000F47; font-weight: 700; font-size: 14px; text-decoration: none; }
.industry-card__cta:hover { color: #0B4BFF; }
@media (max-width: 760px) {
    .industry-card-grid { grid-template-columns: 1fr; }
    .industry-card__visual { min-height: 190px; }
}


/* Deep dive v2: conversion-first, lighter and more modular. */
.deep-dive-section--v2 { background:#FFFFFF; padding:72px 0 80px; }
.deep-dive-v2 { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(330px,.78fr); gap:20px; align-items:stretch; }
.deep-dive-v2__main { position:relative; min-height:430px; overflow:hidden; border:1px solid rgba(0,15,71,.08); border-radius:20px; background:#CEECFF; color:#000F47; }
.deep-dive-v2__main-copy { position:relative; z-index:2; max-width:600px; padding:54px 48px 50px; }
.deep-dive-v2__main h3 { max-width:560px; margin:0 0 16px; color:#000F47; font-family:var(--font-headline); font-size:clamp(2.2rem,3.4vw,3.15rem); line-height:1.06; font-weight:500; letter-spacing:-.025em; }
.deep-dive-v2__main p { max-width:540px; margin:0; color:#3D3C37; font-size:16px; line-height:1.7; }
.deep-dive-v2__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.deep-dive-v2__primary,.deep-dive-v2__secondary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:52px; padding:13px 18px; border-radius:8px; text-decoration:none; font-size:14px; font-weight:700; transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
.deep-dive-v2__primary { border:1px solid #FFBF00; background:#FFBF00; color:#000F47; }
.deep-dive-v2__primary:hover { border-color:#FFD98A; background:#FFD98A; }
.deep-dive-v2__secondary { border:1px solid rgba(0,15,71,.18); background:#FFFFFF; color:#000F47; }
.deep-dive-v2__secondary:hover { border-color:#000F47; background:#F7F3EE; }
.deep-dive-v2__visual { position:absolute; right:-18px; bottom:-30px; width:250px; height:250px; pointer-events:none; }
.deep-dive-v2__orb { position:absolute; inset:28px 12px 12px 36px; border-radius:50%; background:rgba(255,255,255,.52); }
.deep-dive-v2__mini-card { position:absolute; display:grid; place-items:center; border:1px solid rgba(0,15,71,.08); background:#FFFFFF; box-shadow:0 14px 28px rgba(0,15,71,.07); }
.deep-dive-v2__mini-card--back { right:84px; bottom:46px; width:104px; height:128px; border-radius:16px; transform:rotate(-8deg); color:#0B4BFF; }
.deep-dive-v2__mini-card--back .material-icons { font-size:34px; }
.deep-dive-v2__mini-card--front { right:20px; bottom:18px; width:126px; height:154px; padding:22px 18px; border-radius:18px; place-items:start; transform:rotate(5deg); }
.deep-dive-v2__mini-check { position:absolute; top:-9px; right:-9px; display:grid; place-items:center; width:30px; height:30px; border:3px solid #CEECFF; border-radius:50%; background:#000F47; color:#FFFFFF; font-size:16px; }
.deep-dive-v2__mini-icon { color:#000F47; font-size:34px; }
.deep-dive-v2__mini-line { display:block; width:82px; height:8px; margin-top:18px; border-radius:999px; background:#CEECFF; }
.deep-dive-v2__mini-line--short { width:58px; margin-top:8px; }
.deep-dive-v2__aside { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:20px; }
.deep-dive-v2__info-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; align-items:start; padding:30px 30px 28px; border:1px solid rgba(0,15,71,.10); border-radius:18px; background:#FFFFFF; color:#000F47; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.deep-dive-v2__info-card:hover { transform:translateY(-2px); border-color:rgba(11,75,255,.22); box-shadow:0 12px 28px rgba(0,15,71,.055); }
.deep-dive-v2__info-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:#F7F3EE; color:#000F47; }
.deep-dive-v2__info-icon .material-icons { font-size:23px; }
.deep-dive-v2__info-card .label-uppercase { margin:2px 0 8px; color:#0B4BFF; font-size:11px; }
.deep-dive-v2__info-card .info-title { margin:0 0 10px; color:#000F47; font-size:17px; line-height:1.3; }
.deep-dive-v2__info-card p:not(.label-uppercase) { margin:0; color:#3D3C37; font-size:14px; line-height:1.65; }
@media (max-width:980px) { .deep-dive-v2 { grid-template-columns:1fr; } .deep-dive-v2__main { min-height:390px; } .deep-dive-v2__aside { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; } }
@media (max-width:700px) { .deep-dive-section--v2 { padding:52px 0 58px; } .deep-dive-v2__main { min-height:auto; } .deep-dive-v2__main-copy { padding:34px 28px 36px; } .deep-dive-v2__main h3 { font-size:2.25rem; } .deep-dive-v2__main p { font-size:15px; } .deep-dive-v2__visual { display:none; } .deep-dive-v2__aside { grid-template-columns:1fr; } }
@media (max-width:480px) { .deep-dive-v2__main { border-radius:16px; } .deep-dive-v2__main-copy { padding:28px 20px 30px; } .deep-dive-v2__main h3 { font-size:2rem; } .deep-dive-v2__actions { flex-direction:column; } .deep-dive-v2__primary,.deep-dive-v2__secondary { width:100%; justify-content:space-between; } .deep-dive-v2__info-card { grid-template-columns:42px minmax(0,1fr); padding:22px 20px; gap:14px; } .deep-dive-v2__info-icon { width:42px; height:42px; border-radius:11px; } }


/* Deep dive simple: één CTA-blok en twee rustige tekstkolommen. */
.deep-dive-section--simple {
    background:#FFFFFF;
    padding:72px 0 78px;
}
.deep-dive-simple {
    max-width:1180px;
    margin:0 auto;
}
.deep-dive-simple__cta {
    display:grid;
    grid-template-columns:minmax(0,1.3fr) auto;
    gap:36px;
    align-items:center;
    padding:36px 40px;
    border-radius:18px;
    background:#CEECFF  ;
}
.deep-dive-simple__cta-copy {
    max-width:680px;
}
.deep-dive-simple__cta h3 {
    margin:0 0 10px;
    color:#000F47;
    font-family:var(--font-headline);
    font-size:clamp(2rem,3vw,2.7rem);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.02em;
}
.deep-dive-simple__cta p {
    margin:0;
    color:#3D3C37;
    font-size:15px;
    line-height:1.65;
}
.deep-dive-simple__actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:250px;
}
.deep-dive-simple__primary,
.deep-dive-simple__secondary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:50px;
    padding:12px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.deep-dive-simple__primary {
    border:1px solid #FFBF00;
    background:#FFBF00;
    color:#000F47;
}
.deep-dive-simple__primary:hover {
    border-color:#FFD98A;
    background:#FFD98A;
}
.deep-dive-simple__secondary {
    border:1px solid rgba(0,15,71,.18);
    background:#FFFFFF;
    color:#000F47;
}
.deep-dive-simple__secondary:hover {
    border-color:#000F47;
    background:#FFFFFF;
}
.deep-dive-simple__info {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    margin-top:36px;
    border-top:1px solid rgba(0,15,71,.12);
}
.deep-dive-simple__info article {
    padding:30px 36px 0 0;
}
.deep-dive-simple__info article + article {
    padding-left:36px;
    padding-right:0;
    border-left:1px solid rgba(0,15,71,.12);
}
.deep-dive-simple__info .label-uppercase {
    margin:0 0 8px;
    color:#0B4BFF;
    font-size:11px;
}
.deep-dive-simple__info h4 {
    margin:0 0 9px;
    color:#000F47;
    font-size:18px;
    line-height:1.35;
}
.deep-dive-simple__info p:not(.label-uppercase) {
    margin:0;
    color:#3D3C37;
    font-size:14px;
    line-height:1.7;
}
@media (max-width:860px) {
    .deep-dive-simple__cta {
        grid-template-columns:1fr;
        gap:24px;
        padding:30px;
    }
    .deep-dive-simple__actions {
        min-width:0;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .deep-dive-simple__primary,
    .deep-dive-simple__secondary {
        min-width:220px;
    }
}
@media (max-width:620px) {
    .deep-dive-section--simple {
        padding:52px 0 58px;
    }
    .deep-dive-simple__cta {
        padding:24px 20px;
        border-radius:14px;
    }
    .deep-dive-simple__cta h3 {
        font-size:2rem;
    }
    .deep-dive-simple__actions {
        flex-direction:column;
    }
    .deep-dive-simple__primary,
    .deep-dive-simple__secondary {
        width:100%;
        min-width:0;
    }
    .deep-dive-simple__info {
        grid-template-columns:1fr;
        margin-top:28px;
    }
    .deep-dive-simple__info article,
    .deep-dive-simple__info article + article {
        padding:24px 0 0;
        border-left:0;
    }
    .deep-dive-simple__info article + article {
        margin-top:24px;
        border-top:1px solid rgba(0,15,71,.12);
    }
}

/* =========================================
   Team / persoonlijk contact - compact
   ========================================= */

.team-contact-section {
    padding: 64px 0;
    background: #CEECFF;
    overflow: hidden;
}

.team-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
}

.team-contact-content {
    max-width: 520px;
}

.team-contact-content .section-title {
    margin-bottom: 12px;
}

.team-contact-intro {
    margin: 0 0 22px;
    max-width: 500px;
    color: #3D3C37;
    font-size: .98rem;
    line-height: 1.55;
}


/* Contactopties compact op één regel */

..team-contact-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.team-contact-option {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    min-height: 42px;
    padding: 9px 14px;

    background: #fff;
    border: 1px solid rgba(0, 15, 71, .14);
    border-radius: 8px;

    color: #000F47;
    text-decoration: none;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.team-contact-option:hover {
    background: #fff;
    border-color: #0B4BFF;
    color: #000F47;
}

.team-member-role {
    display: block;
    margin-top: 3px;
    padding-left: 2px;
    color: rgba(0, 15, 71, .62);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.team-contact-option strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.team-contact-option small {
    display: none;
}

.team-contact-option > span:last-child {
    font-size: 15px;
    line-height: 1;
}
.team-contact-option strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.team-contact-option small {
    display: none;
}

.team-contact-option > span:last-child {
    font-size: 15px;
    line-height: 1;
}

.team-contact-option strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.team-contact-option small {
    display: none;
}

.team-contact-option > span:last-child {
    font-size: 16px;
}


/* Teamcarousel: 3 tegelijk */

.team-carousel-wrapper {
    min-width: 0;
}

.team-carousel {
    display: flex;
    gap: 12px;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
}

.team-carousel::-webkit-scrollbar {
    display: none;
}

.team-member {
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.team-member-image {
    overflow: hidden;

    aspect-ratio: 4 / 5;
    margin-bottom: 8px;

    background: #F7F3EE;
    border-radius: 14px;
}

.team-member-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;

    transition: transform .3s ease;
}

.team-member:hover .team-member-image img {
    transform: scale(1.02);
}

.team-member strong {
    display: block;
    padding-left: 2px;
    color: #000F47;
    font-size: 13px;
    font-weight: 700;
}


/* Controls compacter */

.team-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

.team-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;
    border: 1px solid rgba(0, 15, 71, .16);
    border-radius: 50%;

    background: #fff;
    color: #000F47;

    font: inherit;
    font-size: 15px;

    cursor: pointer;
}

.team-carousel-arrow:hover {
    background: #000F47;
    border-color: #000F47;
    color: #fff;
}


/* Tablet */

@media (max-width: 900px) {
    .team-contact-section {
        padding: 56px 0;
    }

    .team-contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .team-contact-content {
        max-width: 620px;
    }

    .team-member {
        flex-basis: calc((100% - 24px) / 3);
    }
}


/* Mobile */

@media (max-width: 600px) {
    .team-contact-section {
        padding: 48px 0;
    }

    .team-contact-options {
        gap: 6px;
    }

    .team-contact-option {
        min-height: 40px;
        padding: 8px 12px;
    }

    .team-member {
        flex-basis: 42%;
    }

    .team-carousel-controls {
        justify-content: flex-start;
    }
}