/*
 * Batterijsimulator - Stripe-inspired Design
 * Clean, modern, trustworthy appearance
 */

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #fafafa;
    color: #1a1a1a;
    line-height: 1.6;
    min-height: 100vh;
}

/* ============================================
   FIXED HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e7eb;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 3 px rainbow along the top of the header, moving like the feedback button's border */
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4d4d, #ff9f1c, #ffd60a, #2ec27e, #3a86ff, #8338ec, #ff4d4d);
    background-size: 300% 100%;
    animation: rainbow-shift 8s linear infinite;
    pointer-events: none;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.36em;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
}

/* The brand mark before the name: 1.75 x Inter's cap height, so it scales with the responsive font-size */
.header-logo-mark {
    height: 1.275em;
    width: auto;
    flex-shrink: 0;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header-nav a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.header-nav a:hover {
    color: #2563eb;
}

/* Only the calculator link stands out, in the accent gradient. The shades reach at least 4.5:1 on white.
   A span inside the link carries the gradient, so it spans the word even when the link is a full-width menu row. */
.header-highlight {
    background: linear-gradient(90deg, #2563eb, #7c3aed);  /* blue to violet */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-nav a:hover .header-highlight {
    filter: brightness(0.8);
}

/* The price beside the report's link: a small tint, not the report button's gradient */
.nav-badge {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: 1px;
}

/* From 1280px all links share one row, which is full until about 1440px: tighter gaps and no price badge there */
@media (min-width: 1280px) and (max-width: 1439px) {
    .header-nav {
        gap: 20px;
    }

    .nav-badge {
        display: none;
    }
}

/* The paid report under the hero: a text link in the accent colour, on its own line above "Last updated",
   between the subtitle and the small print in size so the calculator stays the main action
   (fit-content keeps the click target to the text, not the full row) */
.hero-report-link {
    display: block;
    width: fit-content;
    margin: 24px auto 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-wrap: balance;
}

.hero-report-link:hover {
    color: #1d4ed8;
    text-decoration-color: currentColor;
}

/* The page links and language switcher; on small screens they move into the dropdown menu */
.header-links {
    display: contents;
}

/* Menu button, only shown on small screens */
.menu-toggle {
    display: none;
}

/* Language Switcher */
.lang-switcher {
    order: 1;  /* inside .header-links in the markup, but shown after the feedback button */
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid #e5e7eb;
}

.lang-link {
    color: #9ca3af !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-link:hover {
    color: #2563eb !important;
}

.lang-link.active {
    color: #2563eb !important;
    background-color: #f3f4f6;
}

.lang-separator {
    color: #d1d5db;
    font-size: 0.8rem;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.main-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   COUNTRY SWITCH (home page): whose rules the calculator follows
   ============================================ */
/* Elements with data-countries only show in those countries; html[data-country] is set by app.js */
html:not([data-country]) [data-countries]:not([data-countries~="be"]),
html[data-country="be"] [data-countries]:not([data-countries~="be"]),
html[data-country="nl"] [data-countries]:not([data-countries~="nl"]),
html[data-country="world"] [data-countries]:not([data-countries~="world"]) {
    display: none !important;
}

.country-block {
    margin-bottom: 32px;
}

.country-switch {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px;
    gap: 4px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
}

.country-option {
    display: flex;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.country-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.country-option span {
    display: block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.country-option:hover span {
    color: #1a1a1a;
}

.country-option input:checked + span {
    background: #ffffff;
    color: #2563eb;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.country-option input:focus-visible + span {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.country-hint {
    max-width: 560px;
    margin: 12px auto 0;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

@media (max-width: 480px) {
    .country-option span {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    text-align: center;
    padding: 64px 0 48px;
}

.hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

/* Thin rule under the home page title: blue into violet, fading out at both ends */
.title-rule {
    display: block;
    width: min(440px, 80%);
    height: 2px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(58, 134, 255, 0) 0%, rgba(58, 134, 255, 0.9) 28%,
        rgba(37, 99, 235, 0.9) 52%, rgba(124, 58, 237, 0.7) 80%, rgba(124, 58, 237, 0) 100%);
}

.hero .subtitle {
    font-size: 1.25rem;
    color: #4b5563;
    max-width: 600px;
    margin: 0 auto 24px;
    font-weight: 400;
    line-height: 1.7;
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.9rem;
}

/* On the home page, the same darker grey as the rest of the hero's small text (7.2:1 instead of 4.6:1) */
.page-home .trust-item {
    color: #4b5563;
}

.trust-item svg {
    width: 18px;
    height: 18px;
    color: #10b981;
}

.simulation-counter {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #4b5563;
}

.simulation-counter #simulation-count {
    font-weight: 700;
    background-image: linear-gradient(90deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.last-updated {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.85rem;
    color: #4b5563;
    text-decoration: none;
}

/* Grey like the date beside it; the underline shows it is a link (the report link above is the hero's one accent) */
.last-updated-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.last-updated:hover .last-updated-link {
    color: #2563eb;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* ============================================
   TOOL VERSION SELECTOR
   ============================================ */
.tool-version-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tool-version-selector {
    display: flex;
    gap: 12px;
}

.tool-version-option {
    flex: 1;
    cursor: pointer;
}

.tool-version-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.tool-version-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tool-version-option:hover .tool-version-card {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tool-version-option input[type="radio"]:checked + .tool-version-card {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.tool-version-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease;
}

.tool-version-option input[type="radio"]:checked + .tool-version-card .tool-version-radio {
    border-color: #2563eb;
}

.tool-version-option input[type="radio"]:checked + .tool-version-card .tool-version-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}

.tool-version-content {
    flex: 1;
}

.tool-version-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.tool-version-description {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

@media (max-width: 600px) {
    .tool-version-selector {
        flex-direction: column;
    }
}

/* ============================================
   INVESTMENT SELECTOR (battery, solar panels + battery, solar panels)
   ============================================ */
.investment-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.investment-option {
    cursor: pointer;
    display: flex;
}

.investment-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.investment-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 20px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.investment-option:hover .investment-card {
    border-color: #d1d5db;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.investment-option input[type="radio"]:checked + .investment-card {
    background: #f3f7ff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.investment-option input[type="radio"]:focus-visible + .investment-card {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.investment-radio {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.investment-option input[type="radio"]:checked + .investment-card .investment-radio {
    border-color: #2563eb;
}

.investment-option input[type="radio"]:checked + .investment-card .investment-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}

.investment-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.investment-icons .icon-tile {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

.investment-icons .icon-tile svg {
    width: 22px;
    height: 22px;
}

.investment-plus {
    font-size: 1.1rem;
    font-weight: 600;
    color: #9ca3af;
}

.investment-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.investment-description {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b7280;
}

@media (max-width: 700px) {
    .investment-selector {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .investment-card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        row-gap: 2px;
        align-items: center;
        padding: 14px 44px 14px 14px;
    }

    .investment-icons {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .investment-icons .icon-tile {
        width: 36px;
        height: 36px;
    }

    .investment-plus {
        display: none;
    }

    .investment-icons .icon-tile + .investment-plus + .icon-tile {
        margin-left: -14px;
        box-shadow: 0 0 0 2px #ffffff;
    }

    .investment-radio {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ============================================
   INPUT SECTION
   ============================================ */
.input-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

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

.input-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.input-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Line icon on a tinted tile before each input-card title */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.icon-tile svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-tile--blue { background: #e4edfd; color: #2563eb; }
.icon-tile--teal { background: #ddeef3; color: #0e7490; }
.icon-tile--amber { background: #fef6c8; color: #b58105; }  /* warm yellow (sun), 3.2:1 icon contrast */
.icon-tile--violet { background: #ede9fe; color: #7c3aed; }
/* Neutral, for the cards about data and tariffs, so the four colours keep their meaning */
.icon-tile--grey { background: #f3f4f6; color: #4b5563; }

.input-group {
    margin-bottom: 14px;
}

.input-group:last-child {
    margin-bottom: 0;
}

/* Tariff Type Selector */
.tariff-type-group {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.tariff-type-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tariff-option {
    flex: 1;
    cursor: pointer;
}

.tariff-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.tariff-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tariff-option:hover .tariff-card {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tariff-option input[type="radio"]:checked + .tariff-card {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.tariff-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
}

.tariff-option input[type="radio"]:checked + .tariff-card .tariff-radio {
    border-color: #2563eb;
}

.tariff-option input[type="radio"]:checked + .tariff-card .tariff-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}

.tariff-content {
    flex: 1;
}

.tariff-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.tariff-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Type of battery (advanced version): two equal choices side by side in one track, one always chosen */
.battery-type-group {
    border: 0;
    min-width: 0;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e5e7eb;
}

.battery-type-group legend {
    padding: 0;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

.battery-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: #eef0f3;
    border-radius: 9px;
}

.battery-type-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.battery-type-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.battery-type-card {
    display: block;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: #4b5563;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.battery-type-option:hover .battery-type-card {
    background: rgba(255, 255, 255, 0.6);
}

.battery-type-option input[type="radio"]:checked + .battery-type-card {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.battery-type-option input[type="radio"]:focus-visible + .battery-type-card {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Optimization Mode Selector */
.optimization-mode-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.optimization-option {
    flex: 1;
    cursor: pointer;
}

/* Disabled optimization option */
.optimization-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.optimization-option.disabled .optimization-card {
    pointer-events: none;
    background-color: #f9fafb;
}

.optimization-option.disabled .optimization-radio {
    border-color: #d1d5db;
}

/* Hint text for disabled TOU */
.tou-disabled-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 10px;
    font-style: italic;
}

.optimization-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.optimization-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.optimization-option:hover .optimization-card {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.optimization-option input[type="radio"]:checked + .optimization-card {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.optimization-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
}

.optimization-option input[type="radio"]:checked + .optimization-card .optimization-radio {
    border-color: #2563eb;
}

.optimization-option input[type="radio"]:checked + .optimization-card .optimization-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}

.optimization-content {
    flex: 1;
}

.optimization-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.optimization-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Data Source Selector */
.data-source-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-source-option {
    flex: 1;
    cursor: pointer;
}

.data-source-option input[type="radio"] {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.data-source-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.data-source-option:hover .data-source-card {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.data-source-option input[type="radio"]:checked + .data-source-card {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.data-source-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
}

.data-source-option input[type="radio"]:checked + .data-source-card .data-source-radio {
    border-color: #2563eb;
}

.data-source-option input[type="radio"]:checked + .data-source-card .data-source-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}

.data-source-content {
    flex: 1;
}

.data-source-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.data-source-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* CSV info display */
.csv-info {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 10px;
}

/* CSV extrapolation note in results */
.extrapolation-note {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #92400e;
}

.csv-info p {
    margin: 0 0 4px 0;
    font-size: 0.8rem;
    color: #166534;
}

.csv-info p:last-child {
    margin-bottom: 0;
}

/* File input styling */
input[type="file"] {
    font-size: 0.85rem;
    padding: 8px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: #2563eb;
    background: #f3f7ff;
}

/* Input hint text */
.input-hint {
    font-size: 0.7rem;
    color: #9ca3af;
    margin: 6px 0 0 0;
    line-height: 1.4;
}

/* On/off switch: a checkbox drawn as a track with a knob; the label text sits on its left */
.switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #1a1a1a;
    cursor: pointer;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.switch-track {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #d1d5db;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.switch:hover .switch-track {
    background: #9ca3af;
}

.switch input:checked + .switch-track {
    background: #2563eb;
}

.switch:hover input:checked + .switch-track {
    background: #1d4ed8;
}

.switch input:checked + .switch-track::after {
    transform: translateX(18px);
}

.switch input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* The capacity tariff of the simple version: set apart from the prices above, its field under the switch */
.capacity-tariff-group {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.capacity-tariff-field {
    margin-top: 14px;
}

/* A field's "What is this?" link to its explanation on the methodology page */
a.input-hint-link {
    display: inline-block;
    color: #2563eb;
    text-decoration: none;
}

a.input-hint-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0;
}

input, select {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 12px;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:hover, select:hover {
    border-color: #9ca3af;
}

input:focus, select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* ============================================
   CTA BUTTON
   ============================================ */
.cta-container {
    text-align: center;
    margin: 32px 0 48px;
}

.cta-link {
    text-decoration: none;
}

button {
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 16px 48px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* An outlined button beside or instead of the dark one: "Hou me op de hoogte" */
.button-secondary {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.button-secondary:hover {
    background: #f3f4f6;
}

@media (prefers-reduced-motion: reduce) {
    /* Scrolls jump instead of gliding */
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   METHODOLOGY SECTION & ACCORDION
   ============================================ */
.methodology-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafafa;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
    text-align: left;
    transition: background-color 0.2s ease;
}

.accordion-header:hover {
    background: #f3f4f6;
}

.accordion-icon {
    transition: transform 0.3s ease;
    color: #6b7280;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #ffffff;
}

.accordion-content p,
.accordion-content ul {
    padding: 16px 20px;
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.7;
}

.accordion-content ul {
    padding-left: 36px;
}

.accordion-content li {
    margin-bottom: 8px;
}

.accordion-content li:last-child {
    margin-bottom: 0;
}

/* ============================================
   RESULTS SECTION
   ============================================ */
.results-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 80px;  /* keep the title clear of the sticky header after "Bereken winst met ..." */
}

#loading {
    text-align: center;
    padding: 24px;
    color: #6b7280;
}

/* Results title with the PDF download button beside it; the row draws the title's line */
.results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.results-header .section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.download-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;  /* override the global mobile button { width: 100% } */
    padding: 8px 16px;
    border: 1px solid #2563eb;
    background: #ffffff;
    color: #2563eb;
    font-size: 0.9rem;
}

/* A light tint on hover instead of the global button:hover fill */
.download-pdf:hover {
    background: #f3f7ff;
}

.download-pdf:disabled {
    transform: none;
    box-shadow: none;
}

/* Before the first calculation: greyed out, so it's clear the results come first */
.download-pdf:disabled:not(.busy) {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.download-pdf.busy {
    cursor: progress;
}

.download-pdf svg {
    width: 16px;
    height: 16px;
}

/* While the report is being made, a spinner replaces the icon */
.download-pdf-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.download-pdf.busy .download-pdf-spinner {
    display: inline-block;
}

.download-pdf.busy .download-pdf-icon {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.download-pdf-error {
    font-size: 0.85rem;
    color: #b91c1c;
}

/* Under the title row: pulled up close to its button */
.results-header + .download-pdf-error {
    margin: -12px 0 20px;
}

/* The same button again at the end of the results, centred */
.results-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Results Grids: key results (always visible) and advanced analysis */
.key-results,
.secondary-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Cards share the grid's rows, so titles and values line up across cards */
.key-results .result-card,
.secondary-results .result-card {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
}

.key-results .result-card {
    grid-row: span 3;
}

.secondary-results .result-card {
    grid-row: span 4;
}

.key-results .result-card h3,
.secondary-results .result-card h3 {
    align-self: end;
}

.key-results .result-card .value {
    font-size: 2rem;
}

.result-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.result-card:hover {
    border-color: #d1d5db;
}

.result-card h3 {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.result-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Total profit is the bottom line, so its card stands out */
.result-card.highlight {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    border-color: transparent;
}

.result-card.highlight h3,
.result-card.highlight .value,
.result-card.highlight .result-detail {
    color: white;
}

.result-term {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.result-detail {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b7280;
}

/* Advanced Financial Analysis (collapsed by default) */
.advanced-financial {
    margin-top: 24px;
}

.advanced-financial summary {
    cursor: pointer;
    font-weight: 600;
    color: #2563eb;
}

.advanced-financial[open] summary {
    margin-bottom: 16px;
}

.advanced-footnote {
    margin-top: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b7280;
}

.advanced-footnote a {
    color: #2563eb;
}

/* ============================================
   RESULTS SUBSECTIONS
   ============================================ */
.results-subsection {
    margin-bottom: 32px;
}

.results-subsection:last-child {
    margin-bottom: 0;
}

.subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.financial-summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid #d1d5db;
}

.financial-summary.positive {
    background-color: #f0fdf4;
    border-left-color: #22c55e;
    color: #166534;
}

.financial-summary.negative {
    background-color: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.financial-summary.warning {
    background-color: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.verdict-label {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

/* Advice under the results: the best plug-in battery (filled in by showPlugIn() in app.js) */
.advice-card {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.advice-loading {
    font-size: 0.9rem;
    color: #6b7280;
}

.advice-title {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.advice-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 8px;
}

.advice-link {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2563eb;
}

.advice-link:hover {
    color: #1d4ed8;
}

.advice-link[hidden] {
    display: none;
}

.advice-note {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}

.advice-note a {
    color: #2563eb;
}

/* The report card "Jouw beste opstelling" right under the key results (showReportCard() in app.js), and the
   dialog its button opens */
.report-card {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 24px;
    margin-top: 20px;
    padding: 24px;
    border: 1px solid #2563eb;
    border-radius: 12px;
    background: #f3f7ff;
    text-align: left;
}

.report-card[hidden] {
    display: none;
}

.report-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.report-card-personal {
    line-height: 1.5;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.report-card .advice-loading {
    margin-bottom: 8px;
}

.report-card-lead {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 12px;
}

.report-card-points {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.report-card-points li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 6px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #1a1a1a;
}

/* A check mark drawn with two borders */
.report-card-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #2563eb;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.report-card-price {
    color: #1a1a1a;
    margin-bottom: 2px;
}

.report-card-price span {
    font-size: 0.9rem;
    color: #4b5563;
}

.report-card-guarantee {
    font-size: 0.9rem;
    color: #4b5563;
    margin-bottom: 16px;
}

/* The one button of the paid report: the only element on the site with this fill */
.button-report {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    padding: 14px 28px;
}

.button-report:hover {
    background: linear-gradient(90deg, #1d4ed8, #6d28d9);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.report-card-status {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 8px 0 16px;
}

.report-card-testimonial {
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 3px solid #2563eb;
    font-size: 0.9rem;
    color: #4b5563;
}

.report-card-testimonial cite {
    font-style: normal;
    font-size: 0.85rem;
    color: #6b7280;
}

.report-card .advice-note + .advice-note {
    margin-top: 4px;
}

.report-card-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
}

.report-card-preview-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2563eb;
}

.report-card-preview:hover .report-card-preview-link {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .report-card {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }
}

/* Three small pages of the report, drawn without images (_report_preview.html) */
.report-thumbs {
    position: relative;
    display: block;
    width: 200px;
    height: 150px;
    flex-shrink: 0;
}

.report-thumb {
    position: absolute;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 92px;
    height: 128px;
    padding: 8px 7px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.report-thumb--years {
    left: 0;
    transform: rotate(-6deg);
}

.report-thumb--tariffs {
    left: 108px;
    transform: rotate(6deg);
}

.report-thumb--summary {
    left: 54px;
    top: 0;
    z-index: 1;
}

.report-thumb-bar {
    flex-shrink: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.report-thumb-line {
    flex-shrink: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
}

.report-thumb-line--title {
    width: 70%;
    height: 6px;
    background: #1a1a1a;
}

.report-thumb-line--short {
    width: 55%;
}

.report-thumb-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    border: 1px solid #2563eb;
    border-radius: 3px;
    background: #f3f7ff;
}

.report-thumb-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    padding: 0 6px;
    border-bottom: 1px solid #e5e7eb;
}

.report-thumb-bars span {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: #10b981;
}

.report-thumb-bars span:nth-child(2) {
    background: #2563eb;
}

.report-thumb-bars span:nth-child(3) {
    background: #ef4444;
}

.report-thumb-row {
    flex-shrink: 0;
    height: 14px;
    border-radius: 2px;
    background: #f3f4f6;
}

.report-thumb-row--best {
    border: 1px solid #2563eb;
    background: #f3f7ff;
}

/* The bar to the report card at the bottom of a phone's screen, after a result (app.js) */
.report-sticky {
    display: none;
}

@media (max-width: 640px) {
    .report-sticky:not([hidden]):not(.covered) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;  /* above the header, under the cookie banner */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }
}

.report-sticky-link {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2563eb;
    text-decoration: none;
}

.report-sticky-close,
.report-sticky-close:hover,
.report-sticky-close:active {
    width: auto;
    padding: 6px;
    background: none;
    box-shadow: none;
    transform: none;
    color: #6b7280;
}

.feedback-dialog.report-dialog {
    inset: 0;
    margin: auto;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
}

.report-dialog .feedback-dialog-intro a {
    color: #2563eb;
}

.report-dialog .alert-signup {
    margin-top: 0;
    padding: 0;
    border: none;
}

/* The consent checkbox of the report's waitlist form */
.quote-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.85rem;
    font-weight: 400;
    color: #4b5563;
}

.quote-consent input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #2563eb;
}

.quote-consent a {
    color: #2563eb;
}

/* The email sign-ups: "alert me" under the verdicts "not profitable" and "marginal", and the report's waitlist */
.alert-signup {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.alert-signup-title {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.alert-signup-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 12px;
}

.alert-signup-row {
    display: flex;
    gap: 8px;
}

.alert-signup-row input {
    flex: 1;
    min-width: 0;
}

.alert-signup-row button {
    padding: 10px 20px;
    white-space: nowrap;
}

.alert-signup-note {
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}

.alert-signup-note a {
    color: #2563eb;
}

.alert-signup-status {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #166534;
}

.alert-signup-status:empty {
    display: none;
}

.alert-signup-status.error {
    color: #b91c1c;
}

@media (max-width: 480px) {
    .alert-signup-row {
        flex-direction: column;
    }
}

/* The page of a link in an alert email (templates/alerts.html) */
.alerts-page {
    max-width: 560px;
    margin: 48px auto;
    text-align: center;
}

.alerts-page h1 {
    font-size: 1.75rem;
    margin-bottom: 12px;
}

.alerts-page p {
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 24px;
}

.alerts-page a {
    color: #2563eb;
}

/* ============================================
   CHART SECTION
   ============================================ */
.chart-section {
    margin-top: 0;
    padding-top: 0;
}

.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-align: center;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
}

.chart-placeholder p {
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 500;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #4b5563;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 32px 24px;
    text-align: center;
}

.footer-content {
    max-width: 960px;
    margin: 0 auto;
}

.footer-disclaimer {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;  /* whole links move to a second row on tablets instead of breaking */
    justify-content: center;
    gap: 12px 24px;
}

.footer-links a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #2563eb;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 900px) {
    .input-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1279px) {
    /* Below 1280px the page links and the language switcher move into a dropdown under the header
       (the five links, the switcher and the feedback button need about 1020px next to the logo) */
    .header-links {
        display: none;
        position: absolute;
        top: calc(100% + 1px);  /* just below the header's bottom border */
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
    }

    .header-links.open {
        display: flex;
    }

    .header-links > a {
        padding: 12px 24px;  /* same inset as the logo */
        font-size: 1rem;
    }

    .header-links > a:hover {
        background: #f9fafb;
    }

    .menu-toggle {
        /* Right before the links in the markup, so Tab goes from the button into the open menu,
           but shown at the far right */
        order: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;  /* override the global mobile button { width: 100% } */
        height: 40px;
        padding: 0;
        margin-right: -8px;  /* line the icon up with the page edge rather than the button edge */
        border-radius: 8px;
        background: none;
        color: #1a1a1a;
    }

    .menu-toggle:hover,
    .menu-toggle:active {
        background: #f3f4f6;
        transform: none;
        box-shadow: none;
    }

    .menu-toggle svg {
        width: 24px;
        height: 24px;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle-open,
    .menu-toggle:not([aria-expanded="true"]) .menu-toggle-close {
        display: none;
    }

    /* Language switcher at the bottom of the menu */
    .lang-switcher {
        margin: 8px 0 0;
        padding: 8px 24px 0;  /* same inset as the page links */
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }

    .lang-link {
        padding: 8px 12px;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 0 16px;
        height: 56px;
    }

    .header-logo {
        font-size: 1.25rem;
    }

    .header-nav {
        gap: 12px;
    }

    .header-links > a {
        padding: 12px 16px;
    }

    .lang-switcher {
        padding-left: 16px;
    }
}

@media (max-width: 400px) {
    .site-header {
        padding: 0 12px;
    }

    .header-logo {
        font-size: 1.1rem;
    }

    .header-nav {
        gap: 8px;
    }

    .header-links > a {
        padding: 12px;
    }

    .lang-switcher {
        padding-left: 12px;
    }
}

@media (max-width: 640px) {
    .main-container {
        padding: 0 16px;
    }

    .hero {
        padding: 40px 0 32px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero .subtitle {
        font-size: 1.1rem;
    }

    .hero-report-link {
        font-size: 1rem;
    }

    .trust-indicators {
        flex-direction: column;
        gap: 12px;
    }

    .input-section,
    .results-section {
        padding: 20px;
    }

    .input-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .key-results,
    .secondary-results {
        grid-template-columns: 1fr;
    }

    button {
        width: 100%;
        padding: 14px 24px;
    }

    .footer-links {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.about-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.about-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    color: white;
}

.about-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.about-card p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 12px;
}

.about-card p:last-child {
    margin-bottom: 0;
}

.mission-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mission-list li {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mission-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d1fae5;
    color: #047857;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Feedback Section */
.feedback-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.feedback-intro {
    font-size: 0.95rem;
    color: #4b5563;
    margin-bottom: 24px;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
}

.form-group textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 12px;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea:hover {
    border-color: #9ca3af;
}

.form-group textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.submit-btn {
    align-self: flex-start;
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.submit-btn:hover {
    background: #333333;
    transform: translateY(-1px);
}

.submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.feedback-success {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #d1fae5;
    color: #047857;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.feedback-success svg {
    flex-shrink: 0;
}

.feedback-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #6b7280;
}

@media (max-width: 640px) {
    .submit-btn {
        width: 100%;
    }
}

/* What's New Section */
.whats-new-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 80px;  /* keep the title clear of the sticky header */
}

.whats-new-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.whats-new-list li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
}

.whats-new-list li[hidden] {
    display: none;
}

.whats-new-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    padding-top: 1px;
}

.whats-new-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;  /* override the global mobile button { width: 100% } */
    margin-top: 20px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
}

.whats-new-more:hover {
    background: #f3f7ff;
    border-color: #2563eb;
}

.whats-new-more:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .whats-new-section {
        padding: 20px;
    }

    .whats-new-list li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ============================================
   FEEDBACK WIDGET (header button + popover)
   ============================================ */
.feedback-trigger {
    display: inline-flex;
    flex-shrink: 0;
    width: auto;  /* override the global mobile button { width: 100% } */
    padding: 2px;
    border: none;
    border-radius: 999px;
    animation: rainbow-shift 8s linear infinite;
    font-family: inherit;
    cursor: pointer;
}

/* :hover is listed too, so the global button:hover background doesn't replace the rainbow */
.feedback-trigger,
.feedback-trigger:hover {
    background: linear-gradient(90deg, #ff4d4d, #ff9f1c, #ffd60a, #2ec27e, #3a86ff, #8338ec, #ff4d4d);
    background-size: 300% 100%;
}

/* 150% of a 300%-wide background moves it exactly one width, so the loop is seamless */
@keyframes rainbow-shift {
    to { background-position: 150% 0; }
}

.feedback-trigger-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border-radius: 999px;
    padding: 5px 14px;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.feedback-trigger-inner svg {
    width: 16px;
    height: 16px;
    color: #2563eb;
    flex-shrink: 0;
}

.feedback-trigger:hover .feedback-trigger-inner {
    background: #f3f7ff;
}

.feedback-trigger:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.feedback-dialog {
    inset: 72px 24px auto auto;
    margin: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 88px);
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
    overflow: auto;
}

.feedback-dialog::backdrop {
    background: rgba(17, 24, 39, 0.2);
}

.feedback-dialog [hidden] {
    display: none;
}

.feedback-dialog-bar {
    height: 4px;
    background: linear-gradient(90deg, #ff4d4d, #ff9f1c, #ffd60a, #2ec27e, #3a86ff, #8338ec);
}

.feedback-dialog-body {
    padding: 20px;
}

.feedback-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.feedback-dialog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.feedback-dialog-close {
    display: inline-flex;
    width: auto;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.feedback-dialog-close:hover {
    color: #1a1a1a;
    background: #f3f4f6;
    transform: none;
    box-shadow: none;
}

.feedback-dialog-intro {
    margin: 4px 0 16px;
    font-size: 0.875rem;
    color: #4b5563;
}

.feedback-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feedback-dialog .form-group textarea {
    min-height: 100px;
}

.feedback-dialog .submit-btn {
    align-self: flex-end;
    padding: 10px 20px;
    font-size: 0.95rem;
}

.feedback-dialog-error {
    font-size: 0.85rem;
    color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
    .feedback-trigger,
    .site-header::before {
        animation: none;
    }
}

@media (max-width: 960px) {
    /* Icon-only button: the header has no room for the label on smaller screens */
    .feedback-trigger-label {
        display: none;
    }

    .feedback-trigger-inner {
        padding: 5px;
    }
}

@media (min-width: 641px) and (max-width: 960px) {
    .header-nav {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .feedback-dialog {
        inset: 64px 16px auto 16px;
        width: auto;
        max-height: calc(100vh - 80px);
    }
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-settings-link {
    padding: 0;
    border-radius: 0;
    background: none;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 400;
    transition: color 0.2s ease;
}

.cookie-settings-link:hover {
    color: #2563eb;
    background: none;
    transform: none;
    box-shadow: none;
}

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 200;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
    text-align: left;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
}

.cookie-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

/* Both choices look the same, so declining is as easy as accepting */
.cookie-banner-button {
    min-width: 110px;
    padding: 10px 20px;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cookie-banner-button {
        flex: 1;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   LANDING PAGES (ondernemingen, installateurs)
   ============================================ */
/* Hero with a call to action between the subtitle and the trust items */
.lp-hero h1 {
    line-height: 1.2;
    text-wrap: balance;  /* no lone word on the last line */
}

.lp-hero .subtitle {
    max-width: 680px;
    margin-bottom: 32px;
}

/* The trust items are longer than on the home page, so they may wrap onto a second row */
.lp-hero .trust-indicators {
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 32px;
}

/* The live counter's trust item hides when there is no count; .trust-item's display: flex would override hidden */
.lp-hero [hidden] {
    display: none;
}

.lp-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
}

/* A link that looks like the primary button */
.lp-cta {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.lp-cta:hover {
    background: #333333;
    transform: translateY(-1px);
}

.lp-cta-note {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #6b7280;
}

.lp-cta-note a {
    color: #2563eb;
    overflow-wrap: anywhere;
}

.lp-cta-row {
    margin-top: 40px;
    text-align: center;
}

.lp-section {
    margin: 0 0 64px;
    scroll-margin-top: 80px;  /* keep the title clear of the sticky header after a jump to #contact */
}

.lp-section h2 {
    margin-bottom: 32px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    text-align: center;
    text-wrap: balance;
}

/* An intro paragraph sits closer to its title */
.lp-section h2:has(+ .lp-section-intro) {
    margin-bottom: 12px;
}

.lp-section-intro {
    max-width: 640px;
    margin: 0 auto 32px;
    color: #4b5563;
    text-align: center;
}

.lp-section-note {
    margin-top: 24px;
    color: #4b5563;
    text-align: center;
}

.lp-nowrap {
    white-space: nowrap;
}

/* A single column of text in the middle of the page */
.lp-narrow {
    max-width: 680px;
    margin: 0 auto;
}

.lp-closing {
    margin-top: 24px;
    color: #1a1a1a;
}

.lp-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Two cards per row, so four cards never split into three and one */
.lp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.lp-card {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lp-card h3 {
    margin-bottom: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
}

.lp-card p {
    font-size: 0.95rem;
    color: #4b5563;
}

.lp-card a {
    color: #2563eb;
}

.lp-card-narrow {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* After the example cards: full width and dashed, so it reads as "anything else" */
.lp-card-open {
    grid-column: 1 / -1;
    border-style: dashed;
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.03);
    box-shadow: none;
}

.lp-card-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Bullet list with the check icon of the home page's trust items */
.lp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-list li {
    position: relative;
    padding-left: 30px;
    color: #374151;
}

.lp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* A neutral dot instead of the check, for a list of problems */
.lp-list-dots li::before {
    top: 9px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}

/* Numbered steps, each number in a circle with the about-page icon gradient */
.lp-steps {
    list-style: none;
    counter-reset: lp-step;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

.lp-steps li {
    counter-increment: lp-step;
}

.lp-steps li::before {
    content: counter(lp-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.lp-steps h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
}

.lp-steps p {
    font-size: 0.95rem;
    color: #4b5563;
}

.lp-offer {
    padding: 40px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 16px;
    text-align: center;
}

.lp-offer h2 {
    margin-bottom: 16px;
}

.lp-offer p {
    max-width: 640px;
    margin: 0 auto 16px;
    color: #4b5563;
}

.lp-offer .lp-cta {
    margin-top: 8px;
}

.lp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

/* A mockup beside a grid of cards: the cards get the wider column */
.lp-split-cards {
    grid-template-columns: 2fr 3fr;
}

/* Document mockup: placeholder bars only, never numbers */
.lp-doc-mock {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.lp-mock-label {
    margin-bottom: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-doc-title {
    margin-bottom: 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.lp-doc-meta {
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Stands in for a chart */
.lp-doc-chart {
    height: 72px;
    margin: 12px 0;
    border-radius: 6px;
    background: #eef0f3;
}

.lp-doc-chapter {
    margin: 14px 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.lp-doc-line {
    display: block;
    height: 10px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #eef0f3;
}

/* Varying widths, so the bars read as lines of text */
.lp-doc-line:nth-of-type(4n+1) {
    width: 92%;
}

.lp-doc-line:nth-of-type(4n+2) {
    width: 68%;
}

.lp-doc-line:nth-of-type(4n+3) {
    width: 84%;
}

.lp-doc-line:nth-of-type(4n) {
    width: 56%;
}

.lp-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    margin-bottom: 16px;
    border: 2px dashed #c7c9d1;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 0.75rem;
}

.lp-founder {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 760px;
    margin: 0 auto;
}

.lp-founder p {
    margin-bottom: 12px;
    color: #4b5563;
}

.lp-founder p:last-child {
    margin-bottom: 0;
}

/* A photo if there is one, otherwise the about page's person icon on its gradient */
.lp-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #ffffff;
    object-fit: cover;
}

.lp-faq {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid #e5e7eb;
}

.lp-faq details {
    border-bottom: 1px solid #e5e7eb;
}

.lp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Safari still draws its own triangle without this */
.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: #2563eb;
}

.lp-faq details[open] summary::after {
    content: "−";
}

.lp-faq details p {
    padding-bottom: 16px;
    color: #4b5563;
}

/* The feedback-section card look, with the form beside a short aside */
.lp-contact {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
    align-items: start;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* .feedback-success sets display: flex, which would otherwise override the hidden attribute */
.lp-contact [hidden] {
    display: none !important;
}

.lp-contact-aside {
    padding: 24px;
    border-radius: 12px;
    background: #fafafa;
    color: #4b5563;
    font-size: 0.95rem;
}

.lp-contact-email {
    display: inline-block;
    margin: 4px 0 12px;
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.lp-contact-email:hover,
.lp-contact-crosslink a:hover {
    text-decoration: underline;
}

.lp-contact-crosslink {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.lp-contact-crosslink a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.lp-checkboxes {
    border: none;
    padding: 0;
    margin: 0;
}

.lp-checkboxes legend {
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

.lp-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #1a1a1a;
    cursor: pointer;
}

/* The global input rule sets width: 100% */
.lp-checkboxes input {
    width: auto;
    accent-color: #2563eb;
}

.lp-form-note {
    font-size: 0.85rem;
    color: #6b7280;
}

.lp-form-error {
    font-size: 0.85rem;
    color: #b91c1c;
}

.lp-form-error a {
    color: inherit;
}

/* Off-screen rather than display: none, because some bots skip fields hidden that way */
.lp-honeypot {
    position: absolute;
    left: -9999px;
}

@media (max-width: 900px) {
    .lp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Too narrow for a 2x2 grid beside the mockup, so the mockup goes on top */
    .lp-split-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .lp-split,
    .lp-contact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .lp-cta {
        display: block;
        text-align: center;
    }

    .lp-section {
        margin-bottom: 48px;
    }

    .lp-section h2 {
        font-size: 1.5rem;
    }

    .lp-offer,
    .lp-contact {
        padding: 24px;
    }

    .lp-grid-2,
    .lp-steps {
        grid-template-columns: 1fr;
    }

    .lp-founder {
        flex-direction: column;
    }

    /* Keeps the address on one line on most phones */
    .lp-contact-email {
        font-size: 1rem;
    }
}

/* "Batterijsimulator.be," can't wrap, so the title shrinks on the smallest phones */
@media (max-width: 340px) {
    .lp-hero h1 {
        font-size: 1.75rem;
    }
}

/* ============================================
   BLOG PAGES (blog list and posts)
   Rules only some blog pages use are scoped with :where(.page-blog...), which adds no specificity.
   ============================================ */

/* CSS Variables (not defined in main style.css) */
:root {
    --text-primary: #1a1a1a;
    --text-secondary: #4b5563;
    --border: #e5e7eb;
    --surface: #fafafa;
    --accent: #2563eb;
}

.blog-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.blog-header {
    margin-bottom: 2rem;
}

.blog-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.blog-title {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.blog-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.blog-content h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.blog-content h3 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.blog-content ul, .blog-content ol {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
}

:where(.page-blog, .page-blog-tou) .table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

:where(.page-blog, .page-blog-tou) .results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 500px;
}

:where(.page-blog, .page-blog-tou) .results-table th, :where(.page-blog, .page-blog-tou) .results-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

:where(.page-blog, .page-blog-tou) .results-table th {
    background: var(--surface);
    font-weight: 600;
    color: var(--text-primary);
}

:where(.page-blog, .page-blog-tou) .results-table td {
    color: var(--text-secondary);
}

:where(.page-blog, .page-blog-tou) .results-table tr:hover {
    background: var(--surface);
}

:where(.page-blog-tou) .results-table .winner {
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

:where(.page-blog-tou) .results-table .loser {
    background: #fef2f2;
    color: #991b1b;
}

:where(.page-blog-flanders) .blog-content a {
    color: var(--accent);
    text-decoration: none;
}

:where(.page-blog-flanders) .blog-content a:hover {
    text-decoration: underline;
}

.highlight-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

:where(.page-blog, .page-blog-tou) .highlight-box.warning {
    border-left: 4px solid #f59e0b;
}

.highlight-box.info {
    border-left: 4px solid var(--accent);
}

:where(.page-blog-tou, .page-blog-flanders) .highlight-box.success {
    border-left: 4px solid #22c55e;
}

:where(.page-blog-tou) .highlight-box.danger {
    border-left: 4px solid #ef4444;
}

.highlight-box h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.highlight-box p {
    margin-bottom: 0;
}

:where(.page-blog) .sensitivity-results {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

:where(.page-blog) .sensitivity-item {
    background: var(--surface);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
}

:where(.page-blog) .sensitivity-label {
    font-weight: 600;
    color: var(--text-primary);
}

:where(.page-blog) .sensitivity-value {
    color: var(--text-secondary);
}

:where(.page-blog-tou) .params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

:where(.page-blog-tou) .params-section {
    background: var(--surface);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

:where(.page-blog-tou) .params-section h4 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

:where(.page-blog-tou) .params-section table {
    width: 100%;
    font-size: 0.85rem;
}

:where(.page-blog-tou) .params-section td {
    padding: 0.25rem 0;
    border: none;
}

:where(.page-blog-tou) .params-section td:first-child {
    color: var(--text-secondary);
}

:where(.page-blog-tou) .params-section td:last-child {
    text-align: right;
    font-weight: 500;
    color: var(--text-primary);
}

:where(.page-blog-tou) .strategy-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

:where(.page-blog-tou) .strategy-box {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

:where(.page-blog-tou) .strategy-box h4 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

:where(.page-blog-tou) .strategy-box.winner {
    border-color: #22c55e;
    background: #f0fdf4;
}

:where(.page-blog-tou) .strategy-box.loser {
    border-color: #ef4444;
    background: #fef2f2;
}

:where(.page-blog-flanders) .highlight-box ul {
    margin-bottom: 0;
}

.cta-box {
    background: linear-gradient(135deg, var(--accent) 0%, #0ea5e9 100%);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.cta-box h3 {
    color: white;
    margin-bottom: 1rem;
}

.cta-box p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.5rem;
}

.cta-button {
    display: inline-block;
    background: white;
    color: var(--accent);
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
}

/* Blog listing styles */
:where(.page-blog) .blog-listing {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem 1rem;
}

:where(.page-blog) .blog-listing-title {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

:where(.page-blog) .blog-listing-intro {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

:where(.page-blog) .article-cards {
    display: grid;
    gap: 1.5rem;
}

:where(.page-blog) .article-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

:where(.page-blog) .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--accent);
}

:where(.page-blog) .article-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

:where(.page-blog) .article-title {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0.5rem 0;
    line-height: 1.4;
}

:where(.page-blog) .article-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

:where(.page-blog) .article-read-more {
    color: var(--accent);
    font-weight: 500;
}

:where(.page-blog) .blog-divider {
    max-width: 800px;
    margin: 2rem auto;
    border: none;
    border-top: 1px solid var(--border);
}

/* Key figure card */
:where(.page-blog-flanders) .key-figure {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}

:where(.page-blog-flanders) .key-figure-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    white-space: nowrap;
}

:where(.page-blog-flanders) .key-figure-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

:where(.page-blog-flanders) .key-figure-desc a {
    color: var(--accent);
    text-decoration: none;
}

:where(.page-blog-flanders) .key-figure-desc a:hover {
    text-decoration: underline;
}

/* Combined chart */
:where(.page-blog-flanders) .chart-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

:where(.page-blog-flanders) .chart-section h4 {
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

:where(.page-blog-flanders) .chart-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

:where(.page-blog-flanders) .combined-chart {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 280px;
}

:where(.page-blog-flanders) .axis-left, :where(.page-blog-flanders) .axis-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 2rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

:where(.page-blog-flanders) .axis-left {
    text-align: right;
    padding-right: 8px;
    min-width: 38px;
}

:where(.page-blog-flanders) .axis-right {
    text-align: left;
    padding-left: 8px;
    min-width: 38px;
    color: #e5580c;
}

:where(.page-blog-flanders) .axis-label {
    line-height: 1;
}

:where(.page-blog-flanders) .axis-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
}

:where(.page-blog-flanders) .axis-title.left {
    color: var(--accent);
}

:where(.page-blog-flanders) .axis-title.right {
    color: #e5580c;
}

:where(.page-blog-flanders) .chart-area {
    flex: 1;
    position: relative;
    padding-bottom: 2rem;
}

:where(.page-blog-flanders) .chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4%;
    height: 100%;
    position: relative;
    z-index: 1;
    border-bottom: 2px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

:where(.page-blog-flanders) .bar-group {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

:where(.page-blog-flanders) .bar-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
}

:where(.page-blog-flanders) .bar {
    width: 70%;
    max-width: 55px;
    border-radius: 4px 4px 0 0;
    background: var(--accent);
    min-height: 4px;
}

:where(.page-blog-flanders) .bar.projected {
    background: repeating-linear-gradient( 45deg, #adc4f7, #adc4f7 4px, #cedcfb 4px, #cedcfb 8px );
    border: 2px dashed var(--accent);
}

:where(.page-blog-flanders) .bar-label-row {
    display: flex;
    gap: 4%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

:where(.page-blog-flanders) .bar-label {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    padding-top: 6px;
}

/* SVG line overlay */
:where(.page-blog-flanders) .line-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 2rem);
    z-index: 2;
    pointer-events: none;
}

:where(.page-blog-flanders) .cum-dot-label {
    font-size: 9px;
    font-weight: 700;
    fill: #e5580c;
    text-anchor: middle;
}

:where(.page-blog-flanders) .chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

:where(.page-blog-flanders) .chart-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

:where(.page-blog-flanders) .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

:where(.page-blog-flanders) .legend-dot.actual {
    background: var(--accent);
}

:where(.page-blog-flanders) .legend-dot.projected {
    background: repeating-linear-gradient( 45deg, #adc4f7, #adc4f7 3px, #cedcfb 3px, #cedcfb 6px );
    border: 1.5px dashed var(--accent);
}

:where(.page-blog-flanders) .legend-line {
    width: 18px;
    height: 3px;
    background: #e5580c;
    border-radius: 2px;
    display: inline-block;
}

:where(.page-blog-flanders) .chart-source {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.8rem;
}

:where(.page-blog-flanders) .chart-source a {
    color: #999;
}

/* Source list */
:where(.page-blog-flanders) .source-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0 1.5rem;
}

:where(.page-blog-flanders) .source-list h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

:where(.page-blog-flanders) .source-list ol {
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

:where(.page-blog-flanders) .source-list a {
    color: var(--text-secondary);
    word-break: break-all;
}

.blog-nav {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.blog-nav a {
    color: var(--accent);
    text-decoration: none;
}

.blog-nav a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .blog-title {
        font-size: 1.5rem;
    }
    :where(.page-blog, .page-blog-tou) .results-table {
        font-size: 0.8rem;
    }
    :where(.page-blog, .page-blog-tou) .results-table th, :where(.page-blog, .page-blog-tou) .results-table td {
        padding: 0.5rem;
    }
    .cta-box {
        padding: 1.5rem;
    }
    .cta-box h3 {
        font-size: 1.1rem;
    }
    :where(.page-blog-tou) .strategy-comparison {
        grid-template-columns: 1fr;
    }
    :where(.page-blog-tou) .params-grid {
        grid-template-columns: 1fr;
    }
    :where(.page-blog-flanders) .combined-chart {
        height: 220px;
    }
    :where(.page-blog-flanders) .chart-bars {
        gap: 2%;
    }
    :where(.page-blog-flanders) .bar-value {
        font-size: 0.6rem;
    }
    :where(.page-blog-flanders) .bar {
        max-width: 40px;
    }
    :where(.page-blog-flanders) .axis-left, :where(.page-blog-flanders) .axis-right {
        font-size: 0.6rem;
        min-width: 30px;
    }
    :where(.page-blog-flanders) .cum-dot-label {
        font-size: 7px;
    }
    :where(.page-blog-flanders) .key-figure {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .blog-article {
        padding: 1.5rem 0.75rem;
    }
    .blog-title {
        font-size: 1.3rem;
    }
    .blog-intro {
        font-size: 1rem;
    }
    .blog-content h2 {
        font-size: 1.25rem;
    }
    .blog-content h3 {
        font-size: 1.1rem;
    }
    .highlight-box {
        padding: 1rem;
    }
}

/* ============================================
   PERSONAL REPORT (rapport): the free calculator beside the report, on the blog's article layout
   ============================================ */
.report-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 1.5rem 0;
}

.report-column {
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.report-column-paid {
    border-color: #2563eb;
    background: #f3f7ff;
}

.blog-content .report-column h3 {
    margin-top: 0;
}

.blog-content .report-column ul {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .report-compare {
        grid-template-columns: 1fr;
    }
}

/* The report beside a page's call to the calculator (_report_cta.html): blog posts, the battery overview */
.report-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 1.5rem 0;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-align: left;
}

.report-cta-preview {
    flex-shrink: 0;
}

.report-cta .report-thumbs {
    width: 150px;
    height: 112px;
}

.report-cta .report-thumb {
    width: 70px;
    height: 98px;
    padding: 6px 5px;
    gap: 4px;
}

.report-cta .report-thumb--tariffs {
    left: 80px;
}

.report-cta .report-thumb--summary {
    left: 40px;
}

.report-cta .report-thumb-bars {
    height: 46px;
}

.report-cta .report-thumb-row {
    height: 10px;
}

.report-cta-title,
.blog-content .report-cta-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #1a1a1a;
}

.report-cta-text,
.blog-content .report-cta-text {
    margin: 0 0 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
}

.report-cta-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2563eb;
}

@media (max-width: 640px) {
    .report-cta-preview {
        display: none;
    }
}

/* The example report (_report_example.html): three pages side by side, scrolling sideways on a phone */
.report-example {
    margin: 1rem 0 2rem;
    scroll-margin-top: 80px;
}

.blog-content .report-example-note {
    font-size: 0.9rem;
    color: #6b7280;
}

.report-example-pages {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px;
}

.report-page {
    scroll-snap-align: start;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    font-size: 0.85rem;
    line-height: 1.45;
}

.report-page-bar {
    display: block;
    height: 4px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.blog-content .report-page h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.blog-content .report-page h3 + .report-page-table,
.blog-content .report-page .report-page-table + h3 {
    margin-top: 12px;
}

.blog-content .report-page p {
    margin: 0 0 8px;
    font-size: 0.85rem;
}

.blog-content .report-page .report-page-small {
    color: #4b5563;
}

.report-page-best {
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: #f3f7ff;
}

.blog-content .report-page-best p {
    margin: 0 0 2px;
}

.blog-content .report-page-best .report-page-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #2563eb;
}

.report-page-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 12px;
}

.report-page-figures dt {
    font-size: 0.75rem;
    color: #6b7280;
}

.report-page-figures dd {
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
}

.report-page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.report-page-table th,
.report-page-table td {
    padding: 5px 4px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}

.report-page-table th:last-child,
.report-page-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.report-page-table th {
    font-weight: 500;
    color: #6b7280;
}

.report-page-row-best td {
    font-weight: 700;
    background: #f3f7ff;
}

@media (max-width: 640px) {
    .report-example-pages {
        grid-template-columns: repeat(3, 85%);
    }
}

/* ============================================
   BATTERY OVERVIEW (thuisbatterijen)
   ============================================ */
.bat-hero {
    padding-bottom: 32px;
}

.bat-hero .subtitle {
    margin-bottom: 12px;
}

.bat-checked {
    font-size: 0.85rem;
    color: #4b5563;
}

/* The type filter on the left, the sort menu on the right */
.bat-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.bat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
}

.bat-chip {
    cursor: pointer;
}

.bat-chip input {
    position: absolute;  /* visually hidden, still focusable and announced */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

.bat-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.bat-chip:hover > span {
    border-color: #d1d5db;
}

.bat-chip input:checked + span {
    border-color: #2563eb;
    background: #f3f7ff;
    color: #2563eb;
}

.bat-chip input:focus-visible + span {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.bat-chip-count {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.bat-chip input:checked + span .bat-chip-count {
    color: inherit;
}

.bat-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 0.9rem;
}

/* The global select rule makes it full width */
.bat-sort select {
    width: auto;
    padding: 7px 36px 7px 12px;
    background-position: right 10px center;
    font-size: 0.9rem;
}

.bat-table-card {
    overflow-x: auto;  /* a last resort; below 900px each battery is a card instead */
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.bat-table th,
.bat-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
}

.bat-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.bat-table tbody tr + tr {
    border-top: 1px solid #f3f4f6;
}

.bat-table tbody tr:hover {
    background: #fafafa;
}

.bat-table .bat-num {
    text-align: right;
    white-space: nowrap;
}

/* A column header is a plain sort button, not the global dark button */
.bat-table th button {
    padding: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
}

.bat-table th button:hover {
    background: none;
    color: #2563eb;
    transform: none;
    box-shadow: none;
}

.bat-table th button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.bat-table th[aria-sort] button {
    color: #2563eb;
}

.bat-table th[aria-sort="ascending"] button::after {
    content: " \2191";
}

.bat-table th[aria-sort="descending"] button::after {
    content: " \2193";
}

.bat-model {
    min-width: 180px;
    max-width: 250px;
}

.bat-brand {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
}

.bat-name {
    display: block;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.bat-note {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;  /* no lone word, such as a unit, on the last line */
}

.bat-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bat-badge--plug-in {
    background: #f3f7ff;
    color: #2563eb;
}

/* The control modes: blue when a novice can switch it on, struck through when not, faint when no source was found */
.bat-th-link {
    color: inherit;
    text-decoration: underline dotted #9ca3af;
    text-underline-offset: 3px;
}

.bat-modes {
    display: inline-flex;
    gap: 6px;
}

.bat-mode {
    position: relative;
    display: inline-flex;
    color: #2563eb;
}

.bat-mode svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bat-mode--off {
    color: #6b7280;
}

.bat-mode--off::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    right: -1px;
    border-top: 2px solid #6b7280;
    transform: rotate(-45deg);
}

.bat-mode--unknown {
    color: #d1d5db;
}

.bat-unit,
.bat-sub {
    color: #6b7280;
    font-size: 0.75rem;
}

.bat-sub {
    display: block;
    margin-top: 2px;
}

/* The capacity next to the largest battery in the table */
.bat-bar {
    display: block;
    min-width: 64px;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(#2563eb, #2563eb) left / var(--fill) 100% no-repeat, #e5e7eb;
}

.bat-none {
    color: #6b7280;
}

.bat-price {
    color: #1a1a1a;
    text-decoration: underline dotted #9ca3af;
    text-underline-offset: 3px;
}

.bat-price:hover {
    color: #2563eb;
    text-decoration-color: currentColor;
}

/* Price per kWh is the figure to compare, so it is highlighted */
.bat-key {
    font-weight: 700;
    background-image: linear-gradient(90deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bat-table-note {
    margin-top: 12px;
    color: #6b7280;
    font-size: 0.8rem;
}

.bat-section {
    margin-top: 64px;
}

.bat-section h2 {
    margin-bottom: 20px;
    color: #1a1a1a;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bat-glossary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

.bat-glossary > div {
    padding: 16px 0;
    border-top: 1px solid #e5e7eb;
}

.bat-glossary dt {
    margin-bottom: 4px;
    color: #1a1a1a;
    font-weight: 600;
}

.bat-glossary dd {
    color: #4b5563;
    font-size: 0.95rem;
}

.bat-glossary a,
.bat-sources a {
    color: #2563eb;
}

.bat-tips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bat-tip {
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.bat-tip h3 {
    margin-bottom: 8px;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.bat-tip p {
    color: #4b5563;
    font-size: 0.92rem;
}

.bat-section-note {
    max-width: 600px;
    margin: 32px auto 0;
    color: #4b5563;
    text-align: center;
}

.bat-section .lp-cta-row {
    margin-top: 20px;
}

.bat-sources {
    max-width: 680px;
    margin: 56px auto 64px;
    color: #6b7280;
    font-size: 0.8rem;
    text-align: center;
}

/* Price per kWh against the month each battery came on the market: points placed in % by the template */
.bat-chart-section .bat-section-note {
    margin-top: 12px;
}

.bat-chart {
    margin: 24px 0 0;
    padding: 20px 24px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bat-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: #4b5563;
    font-size: 0.85rem;
}

.bat-chart-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bat-chart-legend .bat-point {
    position: relative;
    transform: none;
}

.bat-chart-unit {
    margin: 0 0 8px;
    color: #6b7280;
    font-size: 0.75rem;
}

/* Room on the left for the euro labels and below for the years */
.bat-chart-plot {
    position: relative;
    height: 320px;
    margin: 0 8px 32px 56px;
    border-bottom: 1px solid #d1d5db;
}

.bat-chart-grid {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #f3f4f6;
}

.bat-chart-grid > span {
    position: absolute;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bat-chart-years > span {
    position: absolute;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    color: #6b7280;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* A circle for a plug-in battery, a diamond for an installed one */
.bat-point {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
    transform: translate(-50%, 50%);
    cursor: default;
}

/* The diamond is drawn by ::before, so the tip inside it isn't rotated */
.bat-point--installed {
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.bat-point--installed::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 2px solid #ffffff;
    border-radius: 2px;
    background: #1a1a1a;
    box-shadow: 0 0 0 1px #1a1a1a;
    transform: rotate(45deg);
}

.bat-chart-plot .bat-point:hover,
.bat-chart-plot .bat-point:focus-visible {
    z-index: 2;
    outline: none;
}

.bat-chart-plot .bat-point--plug-in:hover,
.bat-chart-plot .bat-point--plug-in:focus-visible,
.bat-chart-plot .bat-point--installed:hover::before,
.bat-chart-plot .bat-point--installed:focus-visible::before {
    box-shadow: 0 0 0 3px #93c5fd;
}

.bat-chart-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    background: #1a1a1a;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.45;
    transform: translateX(-50%);
}

.bat-chart-tip strong {
    display: block;
}

.bat-point:hover .bat-chart-tip,
.bat-point:focus .bat-chart-tip {
    display: block;
}

/* Points near an edge open their tip towards the middle, so it stays inside the card */
.bat-point--tip-left .bat-chart-tip {
    left: auto;
    right: -6px;
    transform: none;
}

.bat-point--tip-right .bat-chart-tip {
    left: -6px;
    transform: none;
}

/* Tablets and phones: each battery becomes a card, and the sort menu takes over from the column headers */
@media (max-width: 900px) {
    .bat-tips {
        grid-template-columns: 1fr;
    }

    .bat-table-card {
        overflow: visible;
        background: none;
        border: none;
        box-shadow: none;
    }

    .bat-table thead {
        display: none;
    }

    .bat-table,
    .bat-table tbody {
        display: block;
    }

    .bat-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
        margin-bottom: 12px;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
    }

    .bat-table tbody tr + tr {
        border-top: 1px solid #e5e7eb;
    }

    .bat-table tbody tr:hover {
        background: #ffffff;
    }

    /* display: grid would otherwise show the rows the filter hides */
    .bat-table tbody tr[hidden] {
        display: none;
    }

    .bat-table th,
    .bat-table td {
        padding: 0;
    }

    .bat-table .bat-num {
        text-align: left;
    }

    .bat-model {
        grid-column: 1 / -1;
        max-width: none;
    }

    .bat-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #6b7280;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .bat-bar {
        max-width: 120px;
    }
}

/* Tablets have room for four figures per row */
@media (min-width: 601px) and (max-width: 900px) {
    .bat-table tbody tr {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bat-glossary {
        grid-template-columns: 1fr;
    }

    .bat-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .bat-sort select {
        flex: 1;
    }

    .bat-chart {
        padding: 16px 12px 12px;
    }

    .bat-chart-plot {
        height: 260px;
        margin-left: 48px;
    }

    /* Every other year, so the labels don't touch */
    .bat-chart-years > span:nth-child(even) {
        display: none;
    }
}

/* ============================================
   TARIFF HISTORY PAGE (/nl/energietarieven)
   Charts drawn by static/js/tariffs.js
   ============================================ */
.tar-page {
    --tar-fixed: #2563eb;
    --tar-variable: #0f9d76;
    --tar-dynamic: #e5580c;
    --tar-sup-1: #7c3aed;
    --tar-sup-2: #0891b2;
    --tar-sup-3: #b45309;
}

.tar-hero {
    padding-bottom: 28px;
}

.tar-hero .subtitle {
    margin-bottom: 12px;
}

.tar-checked {
    font-size: 0.85rem;
    color: #4b5563;
}

/* The key message: one sentence, then three numbers */
.tar-verdict {
    padding: 28px 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.tar-verdict::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
}

.tar-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2563eb;
}

.tar-verdict h2 {
    margin: 6px 0 8px;
    font-size: 1.6rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}

.tar-verdict > p {
    color: #4b5563;
    max-width: 680px;
}

.tar-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.tar-stat {
    padding: 16px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}

.tar-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tar-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.45;
}

.tar-verdict-scope {
    margin-top: 16px;
    color: #6b7280;
    font-size: 0.8rem;
}

.tar-section {
    margin-top: 56px;
}

.tar-section h2 {
    margin-bottom: 6px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}

.tar-lead {
    color: #4b5563;
    max-width: 680px;
    margin-bottom: 16px;
}

.tar-lead strong {
    color: #1a1a1a;
}

.tar-card {
    padding: 20px 24px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tar-seg {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    border-radius: 8px;
    background: #f3f4f6;
}

.tar-seg button {
    white-space: nowrap;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
}

.tar-seg button[aria-pressed="true"] {
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.tar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: #4b5563;
}

.tar-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tar-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.tar-unit {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0 0 4px;
}

.tar-note {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}

.tar-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: inherit;
}

.tar-svg text {
    font-size: 11px;
    fill: #6b7280;
    font-variant-numeric: tabular-nums;
}

.tar-svg .tar-grid {
    stroke: #f3f4f6;
}

.tar-svg .tar-axis {
    stroke: #d1d5db;
}

.tar-svg .tar-label {
    font-size: 12px;
    font-weight: 600;
    fill: #1a1a1a;
}

.tar-plot {
    position: relative;
}

.tar-tip {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    min-width: 150px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 0.78rem;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    opacity: 0;
    transition: opacity .1s;
    font-variant-numeric: tabular-nums;
}

.tar-tip b {
    font-weight: 600;
}

.tar-tip span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tar-tip i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

/* Bill per scenario: light bar = without battery, solid bar = with battery */
.tar-bills {
    display: grid;
    gap: 14px;
}

.tar-bill {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
    align-items: center;
}

.tar-bill-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.tar-bill-name small {
    display: block;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.78rem;
}

.tar-bill-track {
    position: relative;
    height: 34px;
}

.tar-bill-bar {
    position: absolute;
    left: 0;
    height: 14px;
    border-radius: 0 4px 4px 0;
    transition: width .35s ease;
}

.tar-bill-bar--before {
    top: 0;
    opacity: .22;
}

.tar-bill-bar--after {
    top: 18px;
}

.tar-bill-val {
    position: absolute;
    font-size: 0.78rem;
    color: #4b5563;
    white-space: nowrap;
    transition: left .35s ease;
    font-variant-numeric: tabular-nums;
    line-height: 14px;
}

.tar-bill-val--after {
    top: 18px;
    color: #1a1a1a;
    font-weight: 600;
}

.tar-bill-val--before {
    top: 0;
}

.tar-best {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 1px;
}

/* Drill-down: question cards that open */
.tar-faq {
    display: grid;
    gap: 12px;
}

.tar-q {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.tar-q > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
}

.tar-q > summary::-webkit-details-marker {
    display: none;
}

.tar-q-title {
    font-weight: 600;
    color: #1a1a1a;
}

.tar-q-answer {
    grid-column: 1;
    color: #4b5563;
    font-size: 0.92rem;
}

.tar-q-chevron {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f3f4f6;
    color: #4b5563;
    transition: transform .2s;
}

.tar-q[open] .tar-q-chevron {
    transform: rotate(180deg);
}

.tar-q-body {
    padding: 0 24px 20px;
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
}

.tar-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tar-matrix th, .tar-matrix td {
    padding: 10px 8px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
    vertical-align: top;
}

.tar-matrix thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 600;
}

.tar-pill {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
}

.tar-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.tar-pill--fixed {
    color: var(--tar-fixed);
    background: rgba(37,99,235,.08);
}

.tar-pill--variable {
    color: #0b7a5c;
    background: rgba(15,157,118,.1);
}

.tar-pill--dynamic {
    color: #c2410c;
    background: rgba(229,88,12,.1);
}

.tar-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.tar-mini div {
    padding: 12px;
    border-radius: 8px;
    background: #f9fafb;
}

.tar-mini b {
    display: block;
    font-size: 1.25rem;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.tar-mini span {
    font-size: 0.8rem;
    color: #4b5563;
}

.tar-method {
    margin-top: 40px;
}

.tar-method summary {
    cursor: pointer;
    color: #2563eb;
    font-weight: 500;
    font-size: 0.92rem;
}

.tar-method ul {
    margin: 12px 0 0 20px;
    color: #4b5563;
    font-size: 0.85rem;
    display: grid;
    gap: 4px;
}

.tar-cta {
    margin: 56px 0 64px;
    padding: 32px;
    border-radius: 12px;
    text-align: center;
    background: #f3f7ff;
    border: 1px solid #cedcfb;
}

.tar-cta h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.tar-cta p {
    color: #4b5563;
    margin-bottom: 18px;
}

.tar-cta a {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.tar-cta a:hover {
    background: #333333;
}

@media (max-width: 720px) {
    .tar-stats, .tar-mini {
        grid-template-columns: 1fr;
    }

    .tar-verdict {
        padding: 22px 20px;
    }

    .tar-verdict h2 {
        font-size: 1.3rem;
    }

    .tar-bill {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tar-card {
        padding: 16px 14px 12px;
    }

    .tar-q > summary {
        padding: 16px;
    }

    .tar-q-body {
        padding: 14px 16px 16px;
    }
}

/* An asterisk on a statement that rests on the Endex estimate, and its note at the foot of the page */
.tar-star {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.tar-footnotes {
    margin-top: 16px;
    color: #6b7280;
    font-size: 0.8rem;
}