/* Hero */
        .hero { padding: 72px 0 56px; text-align: center; }

.hero .eyebrow {
            font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--brand-orange-text);
            font-weight: 600; margin-bottom: 18px;
        }

.hero h1 {
            font-size: 60px; line-height: 1.05;
            margin: 0 auto 22px; letter-spacing: -0.025em;
            color: var(--brand-navy); font-weight: 700;
            max-width: 880px;
        }

.hero h1 em {
            font-family: var(--font-serif);
            font-style: italic; font-weight: 400;
            color: var(--brand-orange-dark);
        }

.hero p.lead {
            font-size: 20px; line-height: 1.5;
            color: var(--fg-2); max-width: 680px;
            margin: 0 auto 28px;
        }

.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }

.hero .reassure { font-size: 13px; color: var(--fg-3); }

.hero .reassure strong { color: var(--brand-navy); font-weight: 600; }

.hero-visual {
            margin: 48px auto 0;
            max-width: 1080px;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--line);
            background: var(--surface);
        }

.hero-visual img,
        .hero-visual video { display: block; width: 100%; height: auto; }

.annotated-media { position: relative; }

.media-callout {
            position: absolute;
            z-index: 2;
            max-width: 220px;
            padding: 8px 10px;
            border-radius: var(--radius-md);
            background: rgba(28, 52, 76, 0.94);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
            text-align: left;
            box-shadow: 0 8px 18px rgba(13, 27, 42, 0.18);
            border: 1px solid rgba(255,255,255,0.16);
            pointer-events: none;
        }

.media-callout--light {
            background: rgba(255,255,255,0.95);
            color: var(--brand-navy);
            border-color: var(--line);
        }

.media-callout::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--brand-orange);
            box-shadow: 0 0 0 3px rgba(219,129,48,0.22);
        }

.media-callout--hero-open { left: 68%; top: 38%; }

.media-callout--hero-open::after { left: -16px; top: 50%; transform: translateY(-50%); }

.media-callout--hero-assign { right: 11%; top: 12%; }

.media-callout--hero-assign::after { right: -16px; top: 50%; transform: translateY(-50%); }

.media-callout--hero-save { right: 2%; top: 20%; }

.media-callout--hero-save::after { right: -16px; top: 50%; transform: translateY(-50%); }

/* Trust strip */
        .trust { padding: 28px 0 8px; text-align: center; }

.trust .lead-claim {
            font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--fg-3);
            font-weight: 600; margin-bottom: 16px;
        }

.trust .lead-claim strong { color: var(--brand-navy); }

.trust .micro {
            display: flex; justify-content: center; gap: 36px;
            flex-wrap: wrap; font-size: 14px; color: var(--fg-2);
        }

.trust .micro span { display: inline-flex; align-items: center; gap: 8px; }

.trust .micro svg { width: 16px; height: 16px; color: var(--success); }

/* Section base */
        section.block { padding: 80px 0; border-top: 1px solid var(--line); }

.block--warm { background: var(--paper-warm); }

section.block h2 {
            font-size: 40px; font-weight: 700;
            letter-spacing: -0.02em; margin: 0 0 12px;
            color: var(--brand-navy);
        }

section.block h2 em {
            font-family: var(--font-serif); font-style: italic;
            font-weight: 400; color: var(--brand-orange-dark);
        }

section.block .sub {
            font-size: 18px; color: var(--fg-2);
            max-width: 640px; margin: 0 0 40px;
            line-height: 1.5;
        }

/* Problem cards */
        .problem-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 20px; margin-bottom: 24px;
        }

.problem-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-left: 4px solid var(--warn);
            border-radius: var(--radius-md);
            padding: 22px 22px 20px;
        }

.problem-card .quote {
            font-family: var(--font-serif); font-style: italic;
            font-size: 19px; line-height: 1.4;
            color: var(--fg-1); margin-bottom: 14px;
        }

.problem-card .source { font-size: 13px; color: var(--fg-3); }

.problem-card .source a {
            color: var(--fg-2); text-decoration: none;
            border-bottom: 1px dotted var(--slate-300);
        }

.problem-card .source a:hover { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }

.problem-tag {
            display: inline-block; font-size: 11px;
            text-transform: uppercase; letter-spacing: 0.1em;
            font-weight: 600; color: var(--warn);
            margin-bottom: 12px;
        }

.problem-footer {
            font-size: 15px; color: var(--fg-2);
            background: var(--paper-warm);
            border-radius: var(--radius-md);
            padding: 18px 22px; line-height: 1.5;
        }

.problem-footer strong { color: var(--brand-navy); }

/* Voor / na */
        .vn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.vn-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-sm);
        }

.vn-card h3 {
            font-size: 14px; text-transform: uppercase;
            letter-spacing: 0.12em; font-weight: 600;
            margin-bottom: 14px;
        }

.vn-card.vn-before h3 { color: var(--warn); }

.vn-card.vn-after h3 { color: var(--success); }

.vn-image-wrap {
            aspect-ratio: 16 / 10;
            background: var(--slate-50);
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--line);
        }

.vn-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vn-card .vn-caption {
            font-size: 14px; color: var(--fg-2);
            line-height: 1.5; margin-top: 14px;
        }

/* Features */
        /* Eén kolom: een schermafbeelding van de planner is pas bewijs als de
           namen en tijden leesbaar zijn, en dat lukt niet op halve breedte. */
        .features-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }

.feature {
            display: flex; flex-direction: column;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

.feature-image {
            aspect-ratio: 16 / 9;
            background: var(--slate-50);
            border-bottom: 1px solid var(--line);
            overflow: hidden;
        }

.feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.feature-image .media-callout,
        .step-image .media-callout,
        .vn-image-wrap .media-callout {
            left: 12px;
            bottom: 12px;
            max-width: calc(100% - 24px);
        }

.feature-image .media-callout::after,
        .step-image .media-callout::after,
        .vn-image-wrap .media-callout::after {
            display: none;
        }

.feature-body { padding: 24px 26px 28px; }

.feature .ico {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: var(--paper-warm);
            display: inline-flex; align-items: center; justify-content: center;
            margin-bottom: 14px; color: var(--brand-navy);
        }

.feature .ico svg { width: 20px; height: 20px; }

.feature h3 {
            font-size: 20px; font-weight: 600;
            margin: 0 0 8px; color: var(--brand-navy);
            letter-spacing: -0.01em;
        }

.feature p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }

.feature--portal {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: 1.1fr 1fr;
            gap: 0;
            background: linear-gradient(155deg, var(--brand-navy) 0%, #243F5E 100%);
            color: #fff;
            overflow: hidden;
        }

.feature--portal .feature-portal-phones {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 16px;
            padding: 56px 32px 0;
            position: relative;
        }

.feature--portal .feature-portal-phones img {
            display: block;
            width: 200px;
            height: auto;
            border-radius: 14px;
            box-shadow: 0 12px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.08);
            background: var(--paper);
        }

.feature--portal .feature-portal-phones img:nth-child(1) { transform: translateY(28px); }

.feature--portal .feature-portal-phones img:nth-child(3) { transform: translateY(28px); }

.feature--portal .feature-portal-phones img:nth-child(2) { transform: scale(1.05); z-index: 1; }

.feature--portal .feature-portal-phones .media-callout {
            left: 32px;
            top: 28px;
            max-width: 240px;
        }

.feature--portal .feature-portal-phones .media-callout::after {
            right: -16px;
            top: 50%;
            transform: translateY(-50%);
        }

.feature--portal .feature-portal-body {
            padding: 48px 48px 48px 8px;
            display: flex; flex-direction: column; justify-content: center;
        }

.feature--portal .ico { background: rgba(255,255,255,0.12); color: #fff; }

.feature--portal h3 { color: #fff; font-size: 24px; }

.feature--portal p { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.6; }

.rules-panel {
            margin-top: 32px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 30px;
            box-shadow: var(--shadow-sm);
        }

.rules-panel h3 {
            font-size: 24px;
            color: var(--brand-navy);
            letter-spacing: -0.015em;
            margin: 0 0 8px;
        }

.rules-panel > p {
            font-size: 16px;
            line-height: 1.55;
            color: var(--fg-2);
            max-width: 780px;
            margin: 0 0 22px;
        }

.rules-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

.rule-card {
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 18px;
            background: var(--slate-50);
        }

.rule-card strong {
            display: block;
            color: var(--brand-navy);
            margin-bottom: 7px;
            font-size: 15px;
        }

.rule-card p {
            font-size: 14px;
            line-height: 1.55;
            color: var(--fg-2);
            margin: 0;
        }

.rules-note {
            margin-top: 18px;
            padding: 16px 18px;
            border-radius: var(--radius-md);
            background: var(--paper-warm);
            font-size: 14px;
            line-height: 1.55;
            color: var(--fg-2);
        }

.rules-note strong { color: var(--brand-navy); }

/* How it works (steps) */
        .steps {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px 32px;
            counter-reset: step;
            margin-top: 16px;
            list-style: none;
        }

.step {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 22px;
            position: relative;
            counter-increment: step;
        }

.step::before {
            content: counter(step);
            position: absolute;
            top: -16px; left: 22px;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--brand-navy);
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 14px;
        }

.step h3 {
            font-size: 17px; font-weight: 600;
            margin: 10px 0 6px; color: var(--brand-navy);
        }

.step p { font-size: 14px; color: var(--fg-2); line-height: 1.5; }

.step-image {
            aspect-ratio: 4 / 3;
            background: var(--slate-50);
            border-radius: var(--radius-sm);
            overflow: hidden;
            position: relative;
            margin-top: 14px;
            border: 1px solid var(--line);
        }

.step-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.demo-cta { margin-top: 36px; text-align: center; font-size: 15px; color: var(--fg-2); }

.demo-cta a { color: var(--brand-navy); font-weight: 600; }

/* Testimonial */
        .testimonial-wrap {
            background: var(--brand-navy);
            color: #fff;
            border-radius: var(--radius-xl);
            padding: 56px 56px 52px;
            position: relative;
        }

.testimonial-quote {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 28px;
            line-height: 1.4;
            color: #fff;
            max-width: 720px;
            margin: 0 0 28px;
        }

.testimonial-quote::before {
            content: '\201C';
            font-size: 80px;
            line-height: 1;
            color: var(--brand-orange);
            display: block;
            margin-bottom: -20px;
        }

.testimonial-attrib { display: flex; align-items: center; gap: 16px; }

.testimonial-avatar {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: var(--brand-orange);
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 600; font-size: 18px;
            overflow: hidden;
        }

.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }

.testimonial-meta .name { font-weight: 600; }

.testimonial-meta .role { font-size: 14px; color: rgba(255,255,255,0.65); }

.testimonial-logo {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: #fff;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            flex: none;
            padding: 4px;
        }

.testimonial-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Testimonial grid */
        .testimonial-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 20px; margin-top: 20px;
        }

.testimonial-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 24px 24px 20px;
            display: flex; flex-direction: column;
        }

.testimonial-card .quote {
            font-family: var(--font-serif); font-style: italic;
            font-size: 18px; line-height: 1.45;
            color: var(--fg-1); margin: 0 0 18px;
            flex: 1;
        }

.testimonial-card .attrib { display: flex; align-items: center; gap: 12px; }

.testimonial-card .club-logo {
            width: 48px; height: 48px; flex: none;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }

.testimonial-card .club-logo img { width: 100%; height: 100%; object-fit: contain; }

.testimonial-card .name { font-weight: 600; font-size: 15px; color: var(--fg-1); }

.testimonial-card .club { font-size: 13px; color: var(--fg-3); }

.stats-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            list-style: none;
            margin-top: 32px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

.stats-strip li {
            text-align: center;
            padding: 22px 16px;
            border-right: 1px solid var(--line);
        }

.stats-strip li:last-child { border-right: none; }

.stats-strip strong {
            display: block;
            font-size: 32px;
            font-weight: 700;
            color: var(--brand-navy);
            letter-spacing: -0.02em;
            line-height: 1;
            margin-bottom: 6px;
        }

.stats-strip span {
            display: block;
            font-size: 13px;
            color: var(--fg-2);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 500;
        }

/* Pricing */
        .pricing-wrap {
            max-width: 520px;
            margin: 0 auto;
        }

.price-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 28px;
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-md);
        }

.price-eyebrow {
            font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--brand-orange-text);
            font-weight: 600; margin-bottom: 8px;
        }

.price-amount {
            display: flex; align-items: baseline; gap: 8px;
            margin-bottom: 6px;
        }

.price-amount .euro {
            font-size: 56px; font-weight: 700;
            color: var(--brand-navy);
            letter-spacing: -0.025em; line-height: 1;
        }

.price-amount .per { font-size: 16px; color: var(--fg-2); }

.price-tagline { font-size: 15px; color: var(--fg-2); margin-bottom: 18px; }

.price-compare {
            font-size: 13px; color: var(--fg-3); line-height: 1.6;
            padding-bottom: 18px; margin-bottom: 18px;
            border-bottom: 1px solid var(--line);
        }

.price-features { list-style: none; margin-bottom: 22px; flex: 1; }

.price-features li {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 15px; color: var(--fg-1);
            line-height: 1.5; padding: 6px 0;
        }

.price-features li svg {
            flex-shrink: 0; width: 18px; height: 18px;
            color: var(--success); margin-top: 2px;
        }

.price-card .btn { width: 100%; }

.price-card .guarantee {
            font-size: 13px; color: var(--fg-3);
            text-align: center; margin-top: 10px;
        }








.continuity {
            margin-top: 28px;
            background: var(--brand-navy);
            color: #fff;
            border-radius: var(--radius-lg);
            padding: 30px;
            box-shadow: var(--shadow-md);
        }

.continuity h3 {
            /* Het blok is navy en zet color op wit; zonder inherit wint de
               navy koptekstkleur uit base.css en valt de kop weg in de
               achtergrond. */
            color: inherit;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -0.015em;
            margin: 0 0 8px;
        }

.continuity > p {
            font-size: 15px;
            line-height: 1.6;
            color: rgba(255,255,255,0.76);
            max-width: 720px;
            margin: 0 0 20px;
        }

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

.continuity-card {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-md);
            padding: 16px;
        }

.continuity-card strong {
            display: block;
            color: #fff;
            font-size: 14px;
            margin-bottom: 6px;
        }

.continuity-card p {
            color: rgba(255,255,255,0.74);
            font-size: 13px;
            line-height: 1.55;
            margin: 0;
        }

.continuity-card a {
            color: #fff;
            font-weight: 600;
            text-decoration: underline;
        }

/* FAQ */
        .faq details {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            margin-bottom: 10px;
            overflow: hidden;
        }

.faq summary {
            cursor: pointer;
            padding: 18px 22px;
            font-weight: 600;
            font-size: 16px;
            color: var(--brand-navy);
            list-style: none;
            position: relative;
            transition: background 150ms ease;
        }

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

.faq summary::after {
            content: '+';
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 22px;
            font-weight: 300;
            color: var(--fg-3);
            transition: transform 200ms ease;
        }

.faq details[open] summary::after { content: '\2212'; }

.faq summary:hover { background: var(--slate-50); }

.faq .faq-body {
            padding: 0 22px 20px;
            font-size: 15px;
            color: var(--fg-2);
            line-height: 1.6;
        }

.faq .faq-body p + p { margin-top: 10px; }

/* Closing CTA */
        .closing {
            text-align: center;
            background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
            border-top: 1px solid var(--line);
            padding: 80px 0;
        }

.closing h2 {
            font-size: 44px;
            font-weight: 700;
            color: var(--brand-navy);
            letter-spacing: -0.025em;
            margin: 0 auto 14px;
            max-width: 720px;
        }

.closing h2 em {
            font-family: var(--font-serif); font-style: italic;
            font-weight: 400; color: var(--brand-orange-dark);
        }

.closing p {
            font-size: 18px; color: var(--fg-2);
            max-width: 540px;
            margin: 0 auto 28px;
        }

.closing .reassure { font-size: 13px; color: var(--fg-3); margin-top: 14px; }

.closing .reassure a {
            color: var(--brand-navy);
            text-decoration: none;
            border-bottom: 1px dotted var(--slate-300);
        }

/* Responsive */
        @media (max-width: 1000px) {
            .hero h1 { font-size: 48px; }
            .problem-grid { grid-template-columns: 1fr; }
            .testimonial-grid { grid-template-columns: 1fr 1fr; }
            .vn-grid { grid-template-columns: 1fr; }
            .features-grid { grid-template-columns: 1fr; }
            .rules-grid { grid-template-columns: 1fr; }
            .feature--portal { grid-template-columns: 1fr; }
            .feature--portal .feature-portal-phones { padding: 40px 24px 0; gap: 12px; }
            .feature--portal .feature-portal-phones img { width: 160px; }
            .feature--portal .feature-portal-body { padding: 32px 28px 36px; }
            .steps { grid-template-columns: 1fr; row-gap: 32px; }
            .closing h2 { font-size: 36px; }
        }

@media (max-width: 720px) {
            .hero { padding: 40px 0 32px; }
            .hero h1 { font-size: 34px; }
            .hero p.lead { font-size: 17px; }
            .hero .ctas { flex-direction: column; align-items: stretch; }
            .hero .ctas .btn { width: 100%; }

            section.block { padding: 56px 0; }
            section.block h2 { font-size: 28px; }
            section.block .sub { font-size: 16px; }

            .media-callout,
            .feature-image .media-callout,
            .step-image .media-callout,
            .vn-image-wrap .media-callout {
                position: static;
                display: block;
                max-width: none;
                margin: 10px 10px 0;
                background: var(--surface);
                color: var(--brand-navy);
                border: 1px solid var(--line);
                box-shadow: none;
            }
            .media-callout::after { display: none; }
            .hero-visual {
                display: flex;
                flex-direction: column;
                gap: 0;
            }
            .hero-visual .media-callout {
                margin: 10px 12px 0;
            }
            .hero-visual .media-callout:last-child {
                margin-bottom: 12px;
            }
            .feature-image,
            .step-image,
            .vn-image-wrap {
                aspect-ratio: auto;
                overflow: visible;
            }
            .feature-image img,
            .vn-image-wrap img {
                height: auto;
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }
            .step-image img {
                height: auto;
                aspect-ratio: 4 / 3;
                object-fit: cover;
            }
            .feature--portal .feature-portal-phones .media-callout {
                flex-basis: 100%;
                order: -1;
                margin: 0 0 18px;
            }
            .feature--portal .feature-portal-phones {
                flex-wrap: wrap;
            }

            .rules-panel { padding: 22px; }
            .rules-panel h3 { font-size: 21px; }

            .steps { grid-template-columns: 1fr; }
            .continuity { padding: 24px; }
            .continuity-grid { grid-template-columns: 1fr; }
            .price-amount .euro { font-size: 44px; }

            .testimonial-wrap { padding: 32px 24px; }
            .testimonial-quote { font-size: 21px; }
            .testimonial-grid { grid-template-columns: 1fr; }
            .stats-strip { grid-template-columns: 1fr 1fr; }
            .stats-strip li { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
            .stats-strip li:nth-child(2), .stats-strip li:nth-child(4) { border-right: none !important; }
            .stats-strip li:nth-child(3), .stats-strip li:nth-child(4) { border-bottom: none; }
            .stats-strip strong { font-size: 26px; }

            .closing { padding: 56px 0; }
            .closing h2 { font-size: 28px; }


            .trust .micro { gap: 18px; font-size: 13px; }
        }