/* ═══════════════════════════════════════════════
   BATTERY HEALTH CHECK — AVILOO Light Mode (ALT)
   Design Direction: Light + AVILOO Cyan accent
   Fonts: Outfit (headings) + Sora (body)
   ═══════════════════════════════════════════════ */

:root {
    --green: #009DDF;
    --green-dark: #00688F;   /* A11-01: cyan for TEXT on light surfaces (6.22 white, 5.71 #f5f5f7, 5.46 #f0f0f2) */
    --on-accent: #031059;    /* A11-01: text on any --green fill (5.64:1) */
    --green-glow: rgba(0, 157, 223, 0.25);
    --green-bg: rgba(0, 157, 223, 0.08);
    --black: #ffffff;
    --off-black: #f5f5f7;
    --dark-gray: #f0f0f2;
    --mid-gray: #d8dae0;
    --field-border: #80858f; /* R9 (A11Y N4, 1.4.11): form-control edges, 3.70:1 on white, 3.40 on #f5f5f7, 3.25 on #f0f0f2 */
    --text-gray: #5b626f;
    --white: #1a1a2e;
    --red: #C42B3A;          /* A11-01: was #DC3545 (3.9-4.2:1 on panels); now 4.73+ on every light surface */
    --red-bg: rgba(220, 53, 69, 0.08);
    --font-heading: 'Outfit', 'Outfit Fallback', 'Outfit Fallback Android', sans-serif;
    --font-body: 'Sora', 'Sora Fallback', 'Sora Fallback Android', sans-serif;
    --max-w: 1200px;
    --section-pad: clamp(4rem, 8vw, 7rem);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }  /* A11-05: targets land below the fixed 84px nav */

body {
    font-family: var(--font-body);
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.stat-number {
    font-family: var(--font-heading);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════
   NOISE OVERLAY
   ═══════════════════════════════════════════════ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ═══════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.section-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--green-dark);
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 1.25rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 640px;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.7rem 1.6rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-primary {
    background: var(--green);
    color: #031059;
}
.btn-primary:hover {
    background: var(--white);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 40px var(--green-glow);
}
.btn-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--mid-gray);
}
.btn-ghost:hover {
    border-color: var(--green);
    color: var(--green-dark);
}
.btn-secondary {
    background: transparent;
    color: var(--green-dark);
    border: 2px solid var(--green);
}
.btn-secondary:hover {
    background: var(--green);
    color: var(--on-accent);
    transform: translateY(-1px);
    box-shadow: 0 10px 40px var(--green-glow);
}
.btn-large {
    padding: 1.1rem 3rem;
    font-size: 1.1rem;
    font-weight: 900;
}

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 157, 223, 0.15);
    transition: padding 0.4s;
}
.nav.scrolled {
    padding: 0.8rem 2rem;
    border-bottom-color: rgba(0, 157, 223, 0.3);
}
.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* --- Brand group: logo + divider + AVILOO --- */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}
.nav-logo .logo-text .primary {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #009DDF, #031059);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.nav-brand-divider {
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 16px;
    flex-shrink: 0;
}
.nav-aviloo {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.nav-aviloo:hover { opacity: 1; }
.nav-aviloo img {
    height: 38px;
    width: auto;
    display: block;
}

/* --- Hamburger (hidden on desktop) --- */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.active span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav actions (right side) --- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-audience {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
    margin-right: 1rem;
    white-space: nowrap;
    align-self: center;
}
.nav-audience:hover { text-decoration: underline; }

.nav-cta {
    background: var(--green);
    color: #031059;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.7rem 1.6rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.2s;
}
.nav-cta:hover {
    background: var(--white);
    color: #ffffff;
    transform: translateY(-1px);
}
.nav-cta--ghost {
    background: transparent;
    color: var(--text-gray);
    border: 1px solid var(--mid-gray);
}
.nav-cta--ghost:hover {
    background: transparent;
    border-color: var(--green);
    color: var(--green-dark);
    transform: translateY(-1px);
}
.nav-cta--green {
    color: var(--green-dark);
    border-color: var(--green);
}

/* --- Nav menu (links + CTA) --- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}

/* --- Nav link / dropdown trigger --- */
.nav-link {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-gray);
    padding: 0.6rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
    white-space: nowrap;
}
.nav-link:hover { color: var(--white); }
.nav-link svg { opacity: 0.4; transition: transform 0.2s, opacity 0.2s; }

/* --- Dropdown menu --- */
.nav-dropdown {
    position: relative;
}

/* Invisible bridge that keeps hover alive between trigger and menu */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 16px;
    pointer-events: none;
}
.nav-dropdown:hover::after,
.nav-dropdown.is-open::after {
    pointer-events: auto;
}

.nav-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);
    left: -1rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 280px;
    padding: 0.5rem;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    pointer-events: none;
}

/* Open state. With JS, .is-open is set by click, Enter/Space and mouse hover intent (main.js).
   Without JS, :hover and :focus-within open it (A11-03). */
html:not(.js) .nav-dropdown:hover .nav-dropdown-menu,
html:not(.js) .nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
    pointer-events: auto;
}
html:not(.js) .nav-dropdown:hover .nav-link svg,
.nav-dropdown.is-open .nav-link svg {
    transform: rotate(180deg);
    opacity: 0.7;
}

.nav-dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-dropdown-item:hover {
    background: rgba(0, 157, 223,0.06);
}
.nav-dropdown-item:hover .nav-dropdown-title {
    color: var(--green-dark);
}
.nav-dropdown-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--white);
    margin-bottom: 0.15rem;
    transition: color 0.15s;
}
.nav-dropdown-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
}

/* --- Collapsed nav (TRD-17) ---
   One breakpoint: 1,180 px, the same value as BHC_NAV_BP in main.js. With the AVILOO lock-up in the
   bar, the four menus, the audience link and the button only fit on one line above that, so from
   901 to 1,180 px the menu now collapses behind the menu button too, as it does on phones. Measured
   with Playwright on driver, trade and shared pages from 901 to 1,440 px: the bar stays 84 px or
   less, the button keeps to one line, the AVILOO image keeps its 95 px, nothing scrolls sideways. */
.nav-cta, .nav-audience, .nav-logo .logo-text .primary { white-space: nowrap; }
.nav-brand, .nav-aviloo { flex-shrink: 0; }
@media (min-width: 1181px) and (max-width: 1279px) {
    .nav-link { padding-left: 0.7rem; padding-right: 0.7rem; }
    .nav-audience { margin-right: 0.6rem; }
    .nav-brand-divider { margin: 0 12px; }
}
@media (max-width: 900px) {
    .nav { padding: 0.8rem 1rem; }
    .nav-brand-divider { margin: 0 10px; height: 24px; }
    .nav-aviloo img { height: 28px; }
}
@media (max-width: 1180px) {
    .nav .container { position: relative; }
    .nav-hamburger { display: flex; }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6rem 2rem 3rem;
        gap: 0;
        z-index: 999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-menu.open { display: flex; }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    .nav-dropdown { width: 100%; }
    .nav-link {
        font-size: 1.1rem;
        padding: 0.75rem 0;
        width: 100%;
        justify-content: space-between;
        color: var(--white);
    }

    .nav-dropdown-menu {
        display: none;
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0 0 0.5rem 1rem;
        min-width: 0;
        margin-top: 0;
    }
    .nav-dropdown.active .nav-dropdown-menu { display: block; visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
    .nav-dropdown.active .nav-link svg { transform: rotate(180deg); }
    .nav-dropdown-item { padding: 0.6rem 0; }
    .nav-dropdown-item:hover { background: transparent; }

    .nav-menu > .nav-cta,
    .nav-menu > .aud-for > .nav-cta {
        margin-top: 2rem;
        width: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
/* Trade hero (.thero-*): static two columns, same structure as the consumer hero.
   Replaced the depth-zoom hero in Nov 2026 (DES-01, DES-04, A11Y-04). No motion. The right
   column shows AVILOO's sample certificate in front of the AVILOO Box in a car. */
.thero {
    position: relative;
    background: linear-gradient(165deg, #FBFDFF 0%, #E9F2FB 55%, #DCEBF7 100%);
    padding: calc(var(--section-pad) + 2.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.thero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.thero-eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00688f;
    margin: 0 0 1rem;
}
.thero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    line-height: 1.06;
    color: #031059;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.thero-sub {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.55;
    color: #3a4257;
    max-width: 34rem;
    margin: 0 0 1.6rem;
}
.thero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.thero-actions .btn-large {
    min-height: 48px;
    justify-content: center;
    padding: 1rem 2.25rem;
}
.thero-actions .btn-ghost {
    color: #031059;
    border-color: #031059;
}
.thero-link {
    display: inline-block;
    color: #031059;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0 0 1.4rem;
}
.thero-price {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #3a4257;
    max-width: 34rem;
    margin: 0;
}
.thero-price strong { color: #031059; }
.thero-price a { color: #00688f; text-decoration: underline; text-underline-offset: 3px; }
.thero-proof {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 1.4rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid #cfdbe8;
    font-weight: 600;
    font-size: 0.875rem;
    color: #3a4257;
}
.thero-proof li::before { content: "\2713\00a0"; color: #00688f; font-weight: 800; }
.thero-proof a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.thero-media {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 480px;
}
.thero-stack { position: relative; }
.thero-box {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(3, 16, 89, 0.18);
}
.thero-cert {
    position: absolute;
    left: 4%;
    bottom: -2.5rem;
    width: 42%;
    max-width: 200px;
    height: auto;
    background: #ffffff;
    border: 1px solid var(--mid-gray);
    box-shadow: 0 20px 40px rgba(3, 16, 89, 0.24);
}
.thero-media-note {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-gray);
    margin: 3.25rem 0 0;
    text-align: right;
}
@media (max-width: 860px) {
    .thero-inner { grid-template-columns: 1fr; }
    .thero-media { margin: 0 auto; }
}
@media (max-width: 600px) {
    .thero { padding-top: calc(var(--section-pad) + 2rem); }
    .thero-actions .btn-large { flex: 1 1 100%; }
}

.hero-cta {
    display: inline-block;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
    animation: fade-up 0.8s ease 0.4s both;
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Head-to-head comparison */
.science-h2h {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 3rem;
}
.h2h-side {
    flex: 1;
    min-width: 0;
    padding: 3rem 2.5rem;
    text-align: center;
}
.h2h-bad {
    background: rgba(220, 53, 69, 0.04);
    border: 1px solid rgba(220, 53, 69, 0.12);
    border-right: none;
}
.h2h-good {
    background: rgba(0, 157, 223, 0.04);
    border: 1px solid rgba(0, 157, 223, 0.12);
    border-left: none;
}
.h2h-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}
.h2h-bad .h2h-label { color: var(--red); }
.h2h-good .h2h-label { color: var(--green-dark); }
.h2h-stat {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.h2h-bad .h2h-stat {
    color: var(--red);
    text-shadow: 0 0 40px rgba(220, 53, 69, 0.3);
}
.h2h-good .h2h-stat {
    color: var(--green-dark);
    text-shadow: 0 0 40px rgba(0, 157, 223, 0.3);
}
.h2h-detail {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}
.h2h-vs {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    color: var(--text-gray);
    letter-spacing: 0.1em;
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
    width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    z-index: 1;
}

/* Mobile: stack the h2h */
@media (max-width: 650px) {
    .science-h2h {
        flex-direction: column;
        align-items: stretch;
    }
    .h2h-bad { border-right: 1px solid rgba(220, 53, 69, 0.12); border-bottom: none; }
    .h2h-good { border-left: 1px solid rgba(0, 157, 223, 0.12); border-top: none; }
    .h2h-vs {
        width: 48px;
        height: 48px;
        margin: -24px auto;
        position: relative;
        z-index: 2;
    }
    .h2h-side { padding: 2.5rem 1.5rem; }
}

/* ═══════════════════════════════════════════════
   AVILOO ICON CARDS (Why AVILOO section)
   ═══════════════════════════════════════════════ */
.aviloo-icon {
    width: 160px;
    margin: 0 auto 1rem;
    filter: none;
    mix-blend-mode: normal;
}

.proof-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    opacity: 0.4;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 8px var(--green); }
}

/* ═══════════════════════════════════════════════
   CTA / FORM SECTION
   ═══════════════════════════════════════════════ */
.final-cta {
    padding: 7rem 2rem;
    background: var(--off-black);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, var(--green-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.4;
}
.final-cta .section-title { margin-bottom: 3rem; }
.cta-form {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.cta-form input,
.cta-form select {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--dark-gray);
    border: 1px solid var(--field-border);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.cta-form input::placeholder { color: var(--text-gray); }
.cta-form input:focus,
.cta-form select:focus { border-color: var(--green); }
.cta-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23a0a0a0'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
    color: var(--text-gray);
}
.cta-form select option {
    background: var(--dark-gray);
    color: var(--white);
}
.cta-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.cta-submit {
    width: 100%;
    padding: 1.1rem;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    margin-top: 0.5rem;
}
.cta-submit:hover {
    background: var(--white);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 40px var(--green-glow);
}
.cta-note {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   MEGA FOOTER
   ═══════════════════════════════════════════════ */
.footer-mega {
    background: var(--black);
    position: relative;
    overflow: hidden;
}
.footer-mega::before {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 157, 223, 0.04) 0%, transparent 70%);
    pointer-events: none;
}
.footer-accent-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), #031059, transparent);
    opacity: 0.6;
}
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 4rem 2rem 2rem;
}

/* Footer grid — 4 columns */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 0.9fr 1.2fr;
    gap: 2rem;
}

/* Brand column */
.footer-col-brand { padding-right: 1rem; }
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.footer-logo-text {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--white);
}
.footer-tagline {
    font-size: 0.85rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.footer-aviloo-badge {
    display: inline-flex;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--mid-gray);
    background: rgba(0, 0, 0, 0.03);
    transition: border-color 0.3s, background 0.3s;
}
.footer-aviloo-badge:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
}
.footer-aviloo-badge > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.footer-aviloo-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-gray);
    font-weight: 600;
}

/* Column titles */
.footer-col-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--white);
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
}
.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--green);
}

/* Link lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a,
.footer-links span {
    font-size: 0.85rem;
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--green-dark); }

/* Contact links with icons */
.footer-links-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.footer-links-contact svg {
    color: var(--green-dark);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

/* Footer CTA button */
.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 1.4rem;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.footer-cta-btn:hover {
    background: var(--white);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Separator */
.footer-separator {
    height: 1px;
    background: var(--mid-gray);
    margin: 2.5rem 0;
    opacity: 0.5;
}

/* Stats ribbon */
.footer-stats {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.footer-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.footer-stat-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--green-dark);
    line-height: 1;
}
.footer-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    font-weight: 600;
}

/* Legal bar */
.footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.footer-legal-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.footer-legal-left span {
    font-size: 0.75rem;
    color: var(--text-gray);
}
.footer-legal-entity {
    font-size: 0.7rem !important;
}
.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.footer-legal-links a {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-legal-links a:hover {
    color: var(--green-dark);
    text-decoration: underline;
}

/* Disclaimer */
.footer-disclaimer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.7rem;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Footer responsive */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-col-brand { grid-column: 1 / -1; padding-right: 0; }
    .footer-stats { flex-wrap: wrap; }
    .footer-stat { min-width: 80px; }
}
@media (max-width: 600px) {
    .footer-inner { padding: 3rem 1.5rem 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    .footer-legal { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .footer-legal-links { gap: 1rem; }
}

.footer-aviloo-badge {
    margin: 1.5rem auto;
    padding: 1.25rem 2rem;
    border: 1px solid var(--mid-gray);
    display: inline-flex;
    background: rgba(0, 0, 0, 0.03);
}
.footer-aviloo-badge:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════════
   PAGE BODY (inner pages)
   ═══════════════════════════════════════════════ */
.page-body {
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 800px;
}
.page-body h2, .page-body h3 {
    color: var(--white);
    margin: 2rem 0 1rem;
}
.page-body p { margin-bottom: 1rem; }
/* A11-01: body links are underlined (1.4.1) and never restyle .btn links */
.page-body a:not(.btn) { color: var(--green-dark); text-decoration: underline; text-underline-offset: 0.15em; }
.page-body a:not(.btn):hover { text-decoration-thickness: 2px; }
.page-body a.btn-primary,
.comparison-body a.btn-primary { color: var(--on-accent); }
.page-body a.btn-primary:hover,
.comparison-body a.btn-primary:hover { color: #ffffff; }
.page-body a.btn:hover,
.comparison-body a.btn:hover { text-decoration: none; }
.page-body ul, .page-body ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}
.page-body li { margin-bottom: 0.5rem; }
.page-body strong { color: var(--white); }

/* Blog card (reused on blog listing) */
.blog-card {
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    padding: 2rem;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s, transform 0.2s;
}
.blog-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}
.blog-card .card-date {
    font-size: 0.75rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.blog-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.blog-card p {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}
.blog-card .card-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
.blog-card .card-figure {
    position: relative;
    margin-bottom: 1rem;
}
.blog-card .card-figure .card-image { margin-bottom: 0; }
.blog-card .card-image-ai {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: #0A1628;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.3rem 0.55rem;
}
.blog-card .card-type {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-gray);
    margin-bottom: 0.35rem;
}

/* Blog post: labelled dates, byline, disclosure, UK-law banner, update log */
.post-meta {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin: 1.25rem 0 0.25rem;
}
.post-meta time { color: var(--white); font-weight: 600; }
.post-byline {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--white);
    margin-bottom: 1.25rem;
}
.post-disclosure {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-gray);
    background: var(--off-black);
    border-left: 3px solid var(--mid-gray);
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}
.post-disclosure a,
.post-law-banner a { color: #00688f; text-decoration: underline; }
.post-law-banner {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--white);
    background: var(--green-bg);
    border-left: 3px solid var(--green);
    padding: 0.85rem 1rem;
    margin-bottom: 2rem;
}
.post-update-note {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mid-gray);
    font-size: 0.85rem;
    color: var(--text-gray);
}
.post-update-note h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--white);
    margin-bottom: 0.75rem;
}
.post-update-note ul { list-style: none; }
.post-update-note li { margin-bottom: 0.35rem; }
.post-update-note time { font-weight: 600; color: var(--white); }

/* Blog post, Phase 2: standfirst, lead image, numbered sources, interest line, CTA, topics */
.post-standfirst {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--white);
    margin: 0.75rem 0 0.5rem;
}
.post-figure { margin: 0 0 2rem; }
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure-caption {
    font-size: 0.78rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
}
.post-figure-caption a { color: #00688f; text-decoration: underline; }
.post-figure-ai { font-weight: 600; }
.post-sources-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mid-gray);
}
.post-sources-section h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--white);
    margin-bottom: 0.75rem;
}
.post-sources {
    padding-left: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-gray);
}
.post-sources li { margin-bottom: 0.4rem; scroll-margin-top: 6rem; }
.post-sources a { color: #00688f; text-decoration: underline; overflow-wrap: anywhere; }
.post-interest {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-gray);
}
.post-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}
.post-topics {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-gray);
}
.post-topic { color: #00688f; text-decoration: underline; }

/* Contact form (standalone page) */
.contact-form {
    max-width: 600px;
    display: grid;
    gap: 1rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--dark-gray);
    border: 1px solid var(--field-border);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-gray); }
.contact-form input[type="range"] { border-color: transparent; }  /* R9: a slider's edge is its track and thumb */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--green); }
.contact-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23a0a0a0'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
    color: var(--text-gray);
}
.contact-form select option {
    background: var(--dark-gray);
    color: var(--white);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
/* Reveal-on-scroll is JS-gated: with no JS (or before it runs) content stays visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split-problem { border-right: none; border-bottom: 1px solid var(--mid-gray); }
    .big-numbers-grid { grid-template-columns: repeat(2, 1fr); }
    .big-num-item:nth-child(2)::after { display: none; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .steps-grid::before { display: none; }
    .science-badges { justify-content: center; }
    .compliance-items { grid-template-columns: 1fr; }
    .money-line { flex-direction: column; text-align: center; gap: 0.3rem; }
    .money-line .value { margin-left: 0; white-space: normal; }   /* A11-07: long values wrap at 320 px */
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cta-form-row { grid-template-columns: 1fr; }
    .proof-logos { gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════
   VIDEO MODAL
   ═══════════════════════════════════════════════ */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.video-modal.open {
    opacity: 1;
    pointer-events: all;
}
.video-modal[hidden] { display: none; }   /* closed: out of the Tab order and the accessibility tree */
.video-modal-inner {
    width: 90vw;
    max-width: 1000px;
    position: relative;
}
.video-modal video {
    width: 100%;
    display: block;
    background: #000;
}
.video-modal-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mid-gray);
    background: var(--black);
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.video-modal-close:hover { border-color: var(--green); }

/* Page hero image (inner pages) */
.page-hero-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    margin-top: 60px;
}
.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}
.page-hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.85) 100%);
}
.page-hero-image + section {
    padding-top: var(--section-pad) !important;
    margin-top: -80px;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════
   LOGO CAROUSEL
   ═══════════════════════════════════════════════ */
.logo-carousel {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-carousel-track {
    display: flex;
    gap: 3rem;
    align-items: center;
    width: max-content;
    animation: carousel-scroll 40s linear infinite;
}
.logo-carousel-track img {
    height: 35px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%) brightness(0.4);
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.logo-carousel-track img:hover { opacity: 0.8; }
@keyframes carousel-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══ Logo strip (WCAG 2.2.2), Nov 2026 ═══
   The strip moves for more than 5 s, so it has a visible Pause button, it pauses while hovered
   or focused, and it does not move under reduced motion (every logo then shows once, wrapped).
   The TÜV marks sit on their own "TÜV Certified" line, apart from AVILOO's customers. */
.logo-strip { text-align: center; }
.logo-strip-caption {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-gray);
    margin-bottom: 1rem;
}
/* Hover over the logos, or keyboard focus reaching the strip, pauses it; once the visitor has used
   the button (.user-set), the button alone decides, so "Play logos" plays while it has focus. */
.logo-carousel:hover .logo-carousel-track,
.logo-strip:not(.user-set):focus-within .logo-carousel-track,
.logo-carousel.is-paused .logo-carousel-track { animation-play-state: paused; }
.logo-carousel-toggle {
    margin: 0.75rem auto 0;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray);
    background: transparent;
    border: 1px solid var(--mid-gray);
    cursor: pointer;
}
.logo-carousel-toggle:hover { color: #031059; border-color: #031059; }
.tuev-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 2rem;
    margin-top: 1.5rem;
}
.tuev-line-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-gray);
}
.tuev-line img { height: 32px; width: auto; filter: grayscale(100%) brightness(0.4); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
    .logo-carousel { mask-image: none; -webkit-mask-image: none; }
    .logo-carousel-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem; }
    .logo-carousel-track .logo-dup, .logo-carousel-toggle { display: none; }
}

/* ═══════════════════════════════════════════════
   FAQ PAGE
   ═══════════════════════════════════════════════ */
.faq-section {
    padding: calc(var(--section-pad) + 4rem) 2rem var(--section-pad);
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}
.faq-sidebar {
    position: sticky;
    top: 6rem;
}
.faq-item {
    border-bottom: 1px solid var(--mid-gray);
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-align: left;
    padding: 1.25rem 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.2s;
}
.faq-question:hover { color: var(--green-dark); }
.faq-question::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--green-dark);
    flex-shrink: 0;
    transition: transform 0.3s;
}
.faq-item.open .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    /* A11-11: a shut answer is out of the Tab order and the accessibility tree, as aria-expanded
       says. visibility switches after the close animation, and at once on open. */
    visibility: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease, visibility 0s linear 0.4s;
}
.faq-item.open .faq-answer {
    max-height: 500px;
    padding-bottom: 1.25rem;
    visibility: visible;
    transition-delay: 0s;
}
.faq-answer p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.7;
}
.faq-answer p strong { color: var(--white); }
/* DRV-03: the two audience headings on /faq/, drivers first. */
.faq-audience {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    line-height: 1.2;
    color: var(--white);
    margin: 0 0 1rem;
}
.faq-audience-next { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--mid-gray); }
.faq-sidebar-trade { margin-top: 1rem; font-size: 0.9rem; }
.faq-sidebar-trade a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 900px) {
    .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .faq-sidebar { position: static; }
}

/* ═══════════════════════════════════════════════
   CALCULATOR PAGE
   ═══════════════════════════════════════════════ */
.calc-hero {
    padding: 8rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.calc-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.calc-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.4;
}
.calc-main {
    padding: 0 2rem 6rem;
    position: relative;
    z-index: 1;
}
.calc-wrapper {
    max-width: 700px;
    margin: 0 auto;
}
.calc-step {
    animation: fade-up 0.5s ease both;
}
.calc-card {
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    padding: 2.5rem;
}
.calc-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--green);
}
.calc-card-header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--white);
}
.calc-step-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.calc-inputs {
    display: grid;
    gap: 1.5rem;
}
.calc-field label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}
.calc-field input {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--black);
    border: 1px solid var(--field-border);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.2s;
}
.calc-field input::placeholder { color: var(--text-gray); }
.calc-field input:focus { border-color: var(--green); }
.field-required {
    color: var(--green-dark);
    font-weight: 700;
    margin-left: 0.15em;
}
.field-optional {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-gray);
    margin-left: 0.4em;
    text-transform: lowercase;
    letter-spacing: 0.03em;
}
.calc-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-top: 0.4rem;
}
.field-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-top: 0.35rem;
    line-height: 1.4;
}
.field-warn {
    display: none;
    font-size: 0.78rem;
    color: var(--red);
    margin-top: 0.35rem;
    line-height: 1.4;
}
.field-warn.show { display: block; }
.form-group input.field-invalid,
.field-invalid { border-color: var(--red) !important; }
.calc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.calc-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}
.calc-note {
    font-size: 0.8rem;
    color: var(--text-gray);
    text-align: center;
}
.calc-error {
    color: var(--red);
    font-size: 0.85rem;
    text-align: center;
}

/* Results hero */
.calc-results-hero {
    text-align: center;
    padding: 3rem 0;
}
.calc-big-results {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.calc-result-card {
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    padding: 2rem 1.5rem;
    text-align: center;
}
.calc-result-card.accent {
    border-color: var(--green);
    position: relative;
    overflow: hidden;
}
.calc-result-card.accent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--green-bg);
    pointer-events: none;
}
.calc-result-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--green-dark);
    line-height: 1;
    text-shadow: 0 0 30px var(--green-glow);
    position: relative;
}
.calc-result-label {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-top: 0.8rem;
    font-weight: 600;
    position: relative;
}

/* Breakdown */
.calc-breakdown {
    display: grid;
    gap: 0;
}
.calc-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 2rem;
}
.calc-line:last-child { border-bottom: none; }
.calc-line-label {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.4;
}
.calc-line-label .calc-hint { margin-top: 0.25rem; }
.calc-line-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--white);
    white-space: nowrap;
    text-align: right;
}
.calc-line-value.green { color: var(--green-dark); }
.calc-line-value.red { color: var(--red); }
.calc-line.highlight {
    background: var(--black);
    margin: 0 -2.5rem;
    padding: 1rem 2.5rem;
    border-bottom: none;
}
.calc-line.green-line { border-top: 2px solid var(--green); }
.calc-line.roi-line {
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--green);
    border-bottom: none;
}
.calc-line.roi-line .calc-line-value {
    font-size: 1.8rem;
    text-shadow: 0 0 30px var(--green-glow);
}
.calc-note-box {
    background: var(--red-bg);
    border-left: 3px solid var(--red);
    padding: 1.2rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-top: 1rem;
}
.calc-note-box strong { color: var(--white); }

/* CTA */
.calc-cta-section {
    text-align: center;
    padding: 4rem 0;
    position: relative;
}
.calc-cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.3;
}

/* Scorecard */
.calc-scorecard {
    margin-top: 2rem;
}
.sc-question {
    margin-bottom: 1.5rem;
}
.sc-q-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--white);
    margin-bottom: 0.8rem;
}
.sc-options {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sc-opt {
    padding: 0.6rem 1.2rem;
    background: var(--black);
    border: 1px solid var(--field-border);
    color: var(--text-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sc-opt:hover {
    border-color: var(--green);
    color: var(--green-dark);
}
.sc-opt.selected {
    background: var(--green);
    color: var(--on-accent);
    border-color: var(--green);
}
.sc-score-display {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}
.sc-score-ring {
    width: 120px;
    height: 120px;
    position: relative;
    flex-shrink: 0;
}
.sc-score-ring svg { width: 100%; height: 100%; }
.sc-score-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    color: var(--white);
}
.sc-persona {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.sc-persona-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
}
.sc-action-box {
    background: var(--green-bg);
    border-left: 3px solid var(--green);
    padding: 1.2rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-top: 1.5rem;
}
.sc-action-box strong { color: var(--white); }

/* Pillar cards */
.calc-pillar {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    margin-bottom: 1rem;
    transition: border-color 0.3s;
}
.calc-pillar:hover { border-color: rgba(0, 0, 0, 0.1); }
.calc-pillar-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    flex-shrink: 0;
}
.calc-pillar-content { flex: 1; }
.calc-pillar-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}
.calc-pillar-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.calc-pillar-desc strong { color: var(--white); }
.calc-pillar-stat {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.calc-pillar-num {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
}
.calc-pillar-num.green { color: var(--green-dark); }
.calc-pillar-context {
    font-size: 0.85rem;
    color: var(--text-gray);
}
.calc-pillar-detail {
    font-size: 0.8rem;
    color: var(--text-gray);
}

/* Total card */
.calc-total-card {
    margin-top: 2rem;
    background: var(--off-black);
    border: 2px solid var(--green);
    padding: 2rem;
}
.calc-total-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    text-align: center;
}
.calc-total-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.calc-total-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--white);
    line-height: 1;
}
.calc-total-value.green {
    color: var(--green-dark);
    text-shadow: 0 0 30px var(--green-glow);
}
.calc-total-sub {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-top: 0.4rem;
}
.calc-total-item.accent {
    position: relative;
}
.calc-total-caveat {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-gray);
    text-align: center;
}
.calc-explainer {
    padding: 0 0 var(--section-pad);
    position: relative;
    z-index: 1;
}
.calc-total-item.accent::before {
    content: '';
    position: absolute;
    inset: -2rem -1rem;
    background: var(--green-bg);
    pointer-events: none;
}

/* Calculator responsive */
@media (max-width: 900px) {
    .calc-big-results { grid-template-columns: 1fr; }
    .calc-field-row { grid-template-columns: 1fr; }
    .calc-total-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .sc-score-display { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
    .calc-card { padding: 1.5rem; }
    .calc-line.highlight { margin: 0 -1.5rem; padding: 1rem 1.5rem; }
    .calc-pillar { flex-direction: column; gap: 1rem; padding: 1.5rem; }
    .calc-pillar-stat { flex-direction: column; gap: 0.25rem; }
    .sc-options { flex-direction: column; }
}

/* ═══════════════════════════════════════════════
   SCORECARD PAGE (standalone)
   ═══════════════════════════════════════════════ */
.sc-hero {
    padding: 8rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sc-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.4;
}
.sc-main {
    padding: 0 2rem 6rem;
}
.sc-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

/* Progress bar */
.sc-progress {
    height: 3px;
    background: var(--mid-gray);
    margin-bottom: 0.5rem;
}
.sc-progress-bar {
    height: 100%;
    background: var(--green);
    width: 0;
    transition: width 0.4s ease;
}
.sc-progress-text {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-align: right;
    margin-bottom: 2rem;
    font-weight: 600;
}

/* Question cards */
.sc-q-card {
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    padding: 1.75rem 2rem;
    margin-bottom: 1rem;
    position: relative;
    transition: border-color 0.3s, opacity 0.3s;
}
.sc-q-card.answered {
    border-color: var(--green);
    box-shadow: inset 3px 0 0 var(--green);
}
.sc-q-num {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--text-gray);
    line-height: 1;
}
.sc-q-card .sc-q-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 1rem;
    padding-right: 2.5rem;
}
.sc-q-card .sc-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sc-q-card .sc-opt {
    padding: 0.55rem 1.1rem;
    background: var(--black);
    border: 1px solid var(--field-border);
    color: var(--text-gray);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sc-q-card .sc-opt:hover {
    border-color: var(--green);
    color: var(--green-dark);
}
.sc-q-card .sc-opt.selected {
    background: var(--green);
    color: var(--on-accent);
    border-color: var(--green);
}

/* Results header */
.sc-results-header {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem 0 3rem;
}
.sc-score-ring-large {
    width: 160px;
    height: 160px;
    position: relative;
    flex-shrink: 0;
}
.sc-score-ring-large svg { width: 100%; height: 100%; }
.sc-score-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sc-score-big {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.5rem;
    color: var(--white);
    line-height: 1;
}
.sc-score-of {
    font-size: 0.8rem;
    color: var(--text-gray);
    font-weight: 600;
}
.sc-persona-block { flex: 1; }
.sc-persona-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--green);
    color: var(--green-dark);
    margin-bottom: 0.75rem;
}
.sc-persona-name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}
.sc-persona-summary {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Breakdown bars */
.sc-breakdown {
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    padding: 2rem;
    margin-bottom: 2rem;
}
.sc-breakdown-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--green);
}
.sc-breakdown-row {
    display: grid;
    gap: 1.25rem;
}
.sc-breakdown-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
}
.sc-breakdown-bar-bg {
    height: 6px;
    background: var(--mid-gray);
    grid-column: 1 / -1;
    order: -1;
}
.sc-breakdown-bar {
    height: 100%;
    width: 0;
    background: var(--green);
    transition: width 1s ease;
}
.sc-breakdown-label {
    font-size: 0.85rem;
    color: var(--text-gray);
}
.sc-breakdown-score {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--white);
    text-align: right;
}

/* Action plan */
.sc-action-plan {
    margin-bottom: 2rem;
}
.sc-action-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}
.sc-action-item {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.sc-action-item:hover {
    border-color: rgba(0, 0, 0, 0.06);
}
.sc-action-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.sc-action-item strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.sc-action-item p {
    font-size: 0.85rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

/* Results CTA */
.sc-results-cta {
    text-align: center;
    padding: 3rem 0 1rem;
    border-top: 1px solid var(--mid-gray);
    margin-top: 1rem;
}
.sc-results-cta h3 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* Scorecard responsive */
@media (max-width: 600px) {
    .sc-results-header { flex-direction: column; text-align: center; gap: 1.5rem; }
    .sc-score-ring-large { width: 130px; height: 130px; }
    .sc-q-card { padding: 1.25rem 1.5rem; }
    .sc-q-num { top: 1.25rem; right: 1.5rem; }
    .sc-q-card .sc-options { flex-direction: column; }
    .sc-action-item { flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; }
    .sc-breakdown { padding: 1.5rem; }
}

/* ═══════════════════════════════════════════════
   COMPARISON PAGES
   ═══════════════════════════════════════════════ */
.cmp-hero {
    padding: var(--section-pad) 0;
    padding-top: calc(var(--section-pad) + 5rem);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 157, 223, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(0, 157, 223, 0.03) 0%, transparent 60%);
    border-bottom: 1px solid var(--mid-gray);
}
.cmp-subtitle {
    color: var(--text-gray);
    font-size: 1.1rem;
    max-width: 700px;
    margin-top: 1rem;
    line-height: 1.7;
}
.cmp-body-section {
    padding: 0 0 var(--section-pad) 0;
}

/* ── Comparison body — wider than generic page-body ── */
.comparison-body {
    max-width: 960px;
}
.comparison-body h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--white);
    margin: 3.5rem 0 1.25rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mid-gray);
}
.comparison-body h2:first-child {
    border-top: none;
    padding-top: 2.5rem;
    margin-top: 0;
}
.comparison-body h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--white);
    margin: 2rem 0 0.75rem;
}
.comparison-body hr {
    border: none;
    height: 1px;
    background: var(--mid-gray);
    margin: 2.5rem 0;
}

/* ── Tables (comparison + page-body) ── */
.page-body table,
.comparison-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 2rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.page-body thead,
.comparison-body thead {
    position: sticky;
    top: 0;
}
.page-body th,
.comparison-body th {
    background: var(--dark-gray);
    color: var(--green-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--green);
    white-space: nowrap;
}
.page-body th:first-child,
.comparison-body th:first-child {
    color: var(--text-gray);
}
.page-body td,
.comparison-body td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--mid-gray);
    color: var(--text-gray);
    vertical-align: top;
}
.page-body tr:last-child td,
.comparison-body tr:last-child td {
    border-bottom: none;
}
.page-body td:first-child,
.comparison-body td:first-child {
    color: var(--white);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.page-body tr:hover td,
.comparison-body tr:hover td {
    background: rgba(0, 157, 223, 0.03);
}
.page-body td strong,
.comparison-body td strong {
    color: var(--white);
    font-weight: 600;
}

/* Highlight AVILOO column (2nd column in vs tables, varies in full table) */
.comparison-body td:nth-child(2) {
    color: var(--white);
}

/* ── Responsive table wrapper (JS-injected) ── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--mid-gray);
}
.table-wrap table {
    margin: 0;
}

/* ── Comparison links list (index page) ── */
.comparison-body ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.comparison-body ul li {
    margin-bottom: 0;
}
.comparison-body ul li > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--mid-gray);
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    margin-bottom: -1px;
}
.comparison-body ul li > a:hover {
    border-color: var(--green);
    background: rgba(0, 157, 223, 0.04);
    transform: translateX(4px);
    text-decoration: none;
}
.comparison-body ul li > a::before {
    content: '→';
    color: var(--green-dark);
    font-weight: 700;
    flex-shrink: 0;
}
.comparison-body ul li strong {
    color: var(--white);
}

/* ── CTA button in body ── */
.comparison-body .btn-primary {
    display: inline-block;
    margin-top: 1rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .page-body th,
    .comparison-body th {
        font-size: 0.75rem;
        padding: 0.7rem 0.75rem;
    }
    .page-body td,
    .comparison-body td {
        font-size: 0.82rem;
        padding: 0.65rem 0.75rem;
    }
    .comparison-body h2 {
        font-size: 1.3rem;
    }
    .cmp-subtitle {
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .comparison-body ul li > a {
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
    }
}

/* ── Comparison disclaimer ── */
.cmp-disclaimer {
    max-width: 960px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--mid-gray);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-gray);
}
.cmp-disclaimer p { margin: 0 0 0.5rem; }
.cmp-disclaimer a { color: var(--text-gray); text-decoration: underline; }
.cmp-disclaimer a:hover { color: var(--green-dark); }

/* ═══════════════════════════════════════════════
   LANDING PAGES
   ═══════════════════════════════════════════════ */

/* ── Landing Navbar (minimal) ── */
.nav-landing .nav-menu,
.nav-landing .nav-hamburger { display: none; }
.nav-landing .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Partner Badge ── */
.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.75rem;
    background: var(--black);
    border: 2px solid var(--mid-gray);
    margin-bottom: 2rem;
}
.partner-badge-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    font-weight: 700;
}
.partner-badge-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* ── Landing Hero ── */
.landing-hero {
    padding: calc(var(--section-pad) + 5rem) 0 var(--section-pad);
    text-align: center;
}
.landing-hero-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.08;
    color: var(--white);
    max-width: 720px;
    margin: 0 auto 1.25rem;
}
.landing-hero-context {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.landing-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.landing-hero-meta {
    font-size: 0.8rem;
    color: var(--text-gray);
    letter-spacing: 0.05em;
}
.landing-offer-chip {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: var(--green);
    color: var(--on-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 24px var(--green-glow);
}

/* ── Sources footnote (gated to credibility pages) ── */
.landing-sources {
    padding: 1.25rem 0 2rem;
    border-top: 1px solid var(--mid-gray);
}
.landing-sources-text {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

/* ── Credibility (dealer-group) ── */
.landing-credibility {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--off-black);
}
.landing-credibility .logo-carousel-track img {
    mix-blend-mode: multiply;
}

/* ── Problem Stats ── */
.landing-stats {
    padding: var(--section-pad) 0;
    background: var(--off-black);
}
.landing-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.landing-stat-card {
    padding: 2rem 1.5rem;
    background: var(--black);
    border: 1px solid var(--mid-gray);
    text-align: center;
}
.landing-stat-card--alert {
    border-color: rgba(220, 53, 69, 0.4);
    border-left: 3px solid var(--red);
}
.landing-stat-number {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--white);
    margin-bottom: 0.5rem;
}
.landing-stat-card--alert .landing-stat-number { color: var(--red); }
.landing-stat-text {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.5;
}

/* ── Citation superscripts (keep footnote markers legible inside display numbers) ── */
.landing-stat-number sup,
.landing-benefit-stat sup,
.landing-trust-item sup {
    font-size: 0.35em;
    font-weight: 600;
    vertical-align: super;
    margin-left: 0.15em;
    letter-spacing: 0;
}
.landing-stat-number sup a,
.landing-benefit-stat sup a,
.landing-trust-item sup a {
    color: var(--text-gray);
    text-decoration: none;
}
.landing-stat-number sup a:hover,
.landing-benefit-stat sup a:hover,
.landing-trust-item sup a:hover {
    color: var(--green-dark);
}

/* ── Solution / Steps ── */
.landing-solution {
    padding: var(--section-pad) 0;
    text-align: center;
}
.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}
.landing-step {
    padding: 2rem 1.5rem;
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
    position: relative;
}
.landing-step-number {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
    line-height: 1;
}
.landing-step h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.landing-step p {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
}
.landing-solution-note {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-gray);
}

/* ── Offer Banner ── */
.offer-banner {
    padding: 2.5rem 0;
    background: var(--black);
}
.offer-banner-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(0, 157, 223, 0.06) 0%, rgba(0, 157, 223, 0.02) 100%);
    border: 2px solid var(--green);
    position: relative;
    overflow: hidden;
}
.offer-banner-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--green), var(--green-dark));
}
.offer-banner-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--green);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.4rem;
}
.offer-banner-headline {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--white);
    letter-spacing: -0.01em;
}
.offer-banner-sub {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-top: 0.3rem;
}
.offer-banner-content { flex: 1; min-width: 0; }
.offer-banner-cta {
    flex-shrink: 0;
    padding: 0.6rem 1.5rem;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.2s;
    white-space: nowrap;
}
.offer-banner-cta:hover { background: var(--white); color: #ffffff; }
/* A page's own offer (offer_text), worded by the partner, so it runs longer. */
.offer-banner--custom .offer-banner-inner { max-width: 820px; align-items: flex-start; }
.offer-banner-text {
    font-size: 0.95rem;
    color: var(--white);
    line-height: 1.6;
    margin: 0.5rem 0 0;
}
.offer-banner-contact {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin: 0.6rem 0 0;
}
.offer-banner-contact a { color: var(--green-dark); font-weight: 600; white-space: nowrap; }
/* R9 (A11Y N5, 1.4.10): the contact email may break on a narrow phone; at 320 px it ran 23 px past the edge. */
@media (max-width: 480px) { .offer-banner-contact a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; } }
.offer-banner--custom .offer-banner-cta { align-self: center; }

/* Landing enquiry: hidden spam trap, and the optional small print above the sources. */
.landing-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.landing-closing-note { padding: 1.5rem 0 0.5rem; }
.landing-closing-note-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-gray);
    line-height: 1.6;
}
.landing-closing-note-text p { margin: 0 0 0.5rem; }
.landing-closing-note-text a { color: var(--green-dark); }

/* ── Enterprise Note ── */
.landing-enterprise-note {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--dark-gray);
    border: 1px solid var(--mid-gray);
    font-size: 0.9rem;
    color: var(--text-gray);
}
.landing-enterprise-note a {
    color: var(--green-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.landing-enterprise-note a:hover { color: var(--green-dark); }

/* ── General Contact Note ── */
.landing-contact-note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.7;
}
.landing-contact-note a {
    color: var(--green-dark);
    font-weight: 600;
    text-decoration: none;
}
.landing-contact-note a:hover { text-decoration: underline; }

/* ── Benefits ── */
.landing-benefits {
    padding: var(--section-pad) 0;
    text-align: center;
}
.landing-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.landing-benefit {
    padding: 1.5rem 1rem;
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
}
.landing-benefit-stat {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--green-dark);
    margin-bottom: 0.4rem;
}
.landing-benefit-label {
    font-size: 0.85rem;
    color: var(--text-gray);
    line-height: 1.4;
}

/* ── Warranty Strip ── */
.landing-warranty {
    padding: var(--section-pad) 0;
    background: var(--black);
}
.landing-warranty-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, rgba(0, 157, 223, 0.06) 0%, rgba(0, 157, 223, 0.02) 100%);
    border: 2px solid var(--green);
    position: relative;
    overflow: hidden;
}
.landing-warranty-badge {
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1;
    color: var(--green-dark);
}
.landing-warranty-badge span {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-gray);
}
.landing-warranty-copy h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 0.6rem;
}
.landing-warranty-copy p {
    font-size: 0.92rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.landing-warranty-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.landing-warranty-facts li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.85rem;
    color: var(--white);
    line-height: 1.4;
}
.landing-warranty-facts li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green-dark);
    font-weight: 800;
}
@media (max-width: 640px) {
    .landing-warranty-inner { grid-template-columns: 1fr; text-align: center; }
    .landing-warranty-badge { margin: 0 auto; }
    .landing-warranty-facts { grid-template-columns: 1fr; text-align: left; max-width: 340px; margin: 0 auto; }
}

/* ── Optional Body ── */
.landing-body {
    padding: 3rem 0;
}

/* ── CTA Form Section ── */
.landing-cta {
    padding: var(--section-pad) 0;
    background: var(--off-black);
}
.landing-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.landing-cta-copy .section-title {
    text-align: left;
    margin-bottom: 1rem;
}
.landing-cta-copy .section-label {
    text-align: left;
}
.landing-cta-copy p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.landing-cta-checklist {
    list-style: none;
    padding: 0;
}
.landing-cta-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-gray);
    font-size: 0.95rem;
}
.landing-cta-checklist .check {
    color: var(--green-dark);
    font-weight: 700;
}
.landing-form-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}
.landing-form-sub {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

/* ── Landing Volume Slider ── */
.landing-volume-slider {
    flex: 1;
    accent-color: var(--green-dark);  /* R9 (1.4.11): the thumb and filled track at 5.7:1, was 2.8 */
    height: 6px;
}
.landing-volume-display {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--white);
    min-width: 3ch;
    text-align: right;
}
.landing-volume-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-gray);
    margin-bottom: 0.75rem;
}
.landing-pricing-summary {
    background: rgba(0, 157, 223, 0.06);
    border: 1px solid rgba(0, 157, 223, 0.2);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}
.landing-pricing-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-gray);
}
.landing-pricing-row + .landing-pricing-row { margin-top: 0.35rem; }
.landing-pricing-value { font-weight: 700; color: var(--white); }
.landing-pricing-note { font-size: 0.7rem; color: var(--text-gray); margin-top: 0.25rem; }  /* R9: VAT note under "Due today" */
.landing-pricing-highlight { color: var(--green-dark); }
.landing-pricing-promo {
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(0, 157, 223, 0.3);
}
/* R9: free tests are credit added on top (CRM wallet_credit), not a discount, so no red minus. */
.landing-pricing-promo span { color: var(--green-dark); font-weight: 600; }
.landing-pricing-promo-value { color: var(--green-dark); font-weight: 700; }
.landing-promo-tests { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--green-dark); margin: 0 0 0.5rem; }
.landing-first-order-note { text-align: center; font-size: 0.75rem; color: var(--text-gray); margin: 0 0 0.5rem; }

/* ── Consultation CTA (opt-in alternative to buy-now) ── */
.landing-consultation-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 2rem;
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(0, 157, 223, 0.08) 0%, rgba(0, 157, 223, 0.02) 100%);
    border: 1px solid rgba(0, 157, 223, 0.3);
    border-left: 4px solid var(--green);
}
.landing-consultation-cta-copy { flex: 1; min-width: 0; }
.landing-consultation-cta-tag {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.landing-consultation-cta h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.3;
    color: var(--white);
    margin: 0 0 0.5rem;
}
.landing-consultation-cta p {
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    max-width: 620px;
}
.landing-consultation-cta-btn { white-space: nowrap; flex-shrink: 0; }

.landing-consultation-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
    color: var(--text-gray);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
}
.landing-consultation-divider::before,
.landing-consultation-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mid-gray);
}

@media (max-width: 800px) {
    .landing-consultation-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem 1.25rem;
        gap: 1.25rem;
    }
    .landing-consultation-cta-btn { width: 100%; text-align: center; }
}

/* ── Tier Table (opt-in via use_tier_table) ── */
.landing-tier-table-wrap {
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}
.landing-tier-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.landing-tier-table-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--green-dark);
    font-weight: 700;
}
.landing-tier-table-footnote {
    font-size: 0.7rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
}
.tier-row-selected td { background: rgba(0, 157, 223, 0.08) !important; }
.tier-row-selected td:first-child { box-shadow: inset 3px 0 0 var(--green); }

.landing-selected-summary {
    background: rgba(0, 157, 223, 0.06);
    border: 1px solid rgba(0, 157, 223, 0.25);
    border-left: 3px solid var(--green);
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
}
.landing-selected-summary .lts-tier {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(0, 157, 223, 0.2);
}
.landing-selected-summary .lts-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-gray);
    margin-right: 0.4rem;
}
.landing-selected-summary .lts-tier strong { color: var(--green-dark); font-weight: 800; }
.landing-selected-summary .lts-bundle { color: var(--green-dark); font-weight: 700; }
.landing-selected-summary .lts-line {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    color: var(--text-gray);
}
.landing-selected-summary .lts-line span:last-child { color: var(--white); font-weight: 600; }
.landing-selected-summary .lts-promo span { color: var(--red); font-weight: 600; }
.landing-selected-summary .lts-total {
    border-top: 1px solid rgba(0, 157, 223, 0.2);
    padding-top: 0.4rem;
    margin-top: 0.5rem;
}
.landing-selected-summary .lts-total span { color: var(--white); font-weight: 700; }
.landing-selected-summary .lts-total span:last-child { color: var(--green-dark); font-size: 1rem; }
.landing-selected-summary .lts-change {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
}
.landing-selected-summary .lts-change:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .tier-table { font-size: 0.78rem; }
}

/* ── Trust Bar ── */
.landing-trust {
    padding: 2.5rem 0;
}
.landing-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.landing-trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.landing-trust-item span {
    font-size: 0.8rem;
    color: var(--text-gray);
}
.landing-trust-item strong {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
}
.landing-trust-divider {
    width: 1px;
    height: 28px;
    background: var(--mid-gray);
}

/* ── Sticky Mobile CTA ── */
.landing-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--black);
    border-top: 1px solid var(--mid-gray);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}
.landing-sticky-cta .btn {
    width: 100%;
    text-align: center;
}

/* ── Landing Footer ── */
.landing-footer {
    padding: 1.5rem 0;
    border-top: 1px solid var(--mid-gray);
}
.landing-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}
.landing-footer-links {
    display: flex;
    gap: 1.5rem;
}
.landing-footer-links a {
    color: var(--text-gray);
    transition: color 0.2s;
}
.landing-footer-links a:hover { color: var(--green-dark); }

/* ── Landing Responsive ── */
@media (max-width: 900px) {
    .landing-stats-grid { grid-template-columns: 1fr; }
    .landing-steps { grid-template-columns: 1fr; }
    .landing-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .landing-cta-inner { grid-template-columns: 1fr; }
    .landing-sticky-cta { display: block; }
    /* R9 (A11Y N1, WCAG 2.4.11): the fixed bar must never hide what has focus. Its height is kept
       clear at the foot of the page and when the browser scrolls a focused control into view; with
       the cookie banner showing, the bar sits on top of the banner, and both heights are kept clear.
       While a form field has focus the bar steps aside, as a phone keyboard would cover it anyway.
       This is the same at 900 px and below, so a laptop at 200% zoom gets it too. */
    html:has(.landing-sticky-cta) { --landing-bar-h: 4.75rem; scroll-padding-bottom: calc(var(--landing-bar-h) + 1rem); }
    html.consent-open:has(.landing-sticky-cta) { scroll-padding-bottom: calc(var(--consent-h, 7rem) + var(--landing-bar-h) + 1rem); }
    body:has(.landing-sticky-cta) { padding-bottom: var(--landing-bar-h); }
    html.consent-open body:has(.landing-sticky-cta) { padding-bottom: calc(var(--consent-h, 7rem) + var(--landing-bar-h)); }
    html.consent-open .landing-sticky-cta { bottom: var(--consent-h, 7rem); }
    body:has(:is(input, select, textarea):focus) .landing-sticky-cta { display: none; }
    .landing-trust-divider { display: none; }
    .offer-banner-inner { flex-wrap: wrap; }
    .offer-banner-cta { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .landing-benefits-grid { grid-template-columns: 1fr; }
    .partner-badge {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
    }
    .partner-badge-logo { height: 36px; }
    .landing-footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .offer-banner-inner { padding: 1.25rem; gap: 1rem; }
    .offer-banner-headline { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════
   TIER PRICING TABLE (Get Started page)
   ═══════════════════════════════════════════════ */

.tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: var(--font-body);
}

.tier-table thead th {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-gray);
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--green);
    text-align: left;
}

.tier-table thead th:nth-child(2),
.tier-table thead th:nth-child(3),
.tier-table thead th:nth-child(4),
.tier-table thead th:nth-child(5) {
    text-align: right;
}

.tier-table tbody td {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--mid-gray);
    color: var(--white);
    vertical-align: middle;
}

.tier-table tbody td:nth-child(2),
.tier-table tbody td:nth-child(3) {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-gray);
}

.tier-table tbody td:nth-child(4),
.tier-table tbody td:nth-child(5) {
    text-align: right;
    font-family: var(--font-heading);
    font-weight: 700;
}

.tier-table tbody tr:hover {
    background: var(--green-bg);
}

.tier-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
}

.tier-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-accent);
    background: var(--green);
    padding: 0.15rem 0.4rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.tier-row-gold {
    background: var(--green-bg);
    border-left: 3px solid var(--green);
}

.tier-row-gold td {
    border-bottom-color: var(--green);
}

.tier-row-gold td:first-child {
    padding-left: 0.5rem;
}

.tier-row-gold .tier-label {
    color: var(--green-dark);
}

/* Buy Now buttons in tier table */
.tier-buy-btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green-dark);
    border: 1px solid var(--green);
    padding: 0.3rem 0.75rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.tier-buy-btn:hover {
    background: var(--green);
    color: var(--on-accent);
}

.tier-buy-btn--gold {
    background: var(--green);
    color: var(--on-accent);
}

.tier-buy-btn--gold:hover {
    background: var(--white);
    border-color: var(--white);
    color: #ffffff;
}

.tier-table thead th:nth-child(6) {
    text-align: right;
}

.tier-table tbody td:nth-child(6) {
    text-align: right;
}

/* Currency toggle */
.currency-toggle {
    display: flex;
    gap: 0;
}

.currency-btn {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--mid-gray);
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.currency-btn:first-child {
    border-right: none;
}

.currency-btn.active {
    background: var(--green);
    color: var(--on-accent);
    border-color: var(--green);
}

/* ═══════════════════════════════════════════════
   COOKIE CONSENT BANNER
   Dark navy bar on the light theme: --white is the
   navy #1a1a2e here, so text is hardcoded #ffffff.
   ═══════════════════════════════════════════════ */

.bhc-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--white);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
}

.bhc-consent[hidden] { display: none; }
/* A11-09: while the banner shows (main.js sets the class and --consent-h, its height), the browser
   scrolls a focused control clear of it, and the foot of the page can scroll clear too. */
html.consent-open { scroll-padding-bottom: calc(var(--consent-h, 7rem) + 1rem); }
html.consent-open body { padding-bottom: var(--consent-h, 7rem); }

.bhc-consent-text {
    margin: 0;
    color: #ffffff;
}

.bhc-consent-text a {
    color: var(--green);
    text-decoration: underline;
}

.bhc-consent-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.bhc-consent-accept {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--green);
    color: var(--on-accent);
    border: none;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bhc-consent-accept:hover {
    background: #ffffff;
    color: var(--white);
}

.bhc-consent-decline {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    border: none;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.bhc-consent-decline:hover {
    color: #ffffff;
}

@media (max-width: 640px) {
    .bhc-consent {
        flex-direction: column;
        text-align: center;
        padding: 0.85rem 1.25rem;
    }
}

/* ═══════════════════════════════════════════════
   CONSUMER BOOKING STEPPER  (.bk-*)
   Phase 0 B2C journey. Append-only, light theme,
   built on the existing :root variables. Namespaced
   so it cannot collide with any existing selector.
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   CONSUMER SPLIT HERO (.chero-*) — namespaced so it
   cannot collide with the dealer .hero / .hero-zoom.
   ═══════════════════════════════════════════════ */
.chero {
    position: relative;
    background: #031059 url("../images/hero-ev-scan.webp") no-repeat right center / cover;
    color: #ffffff;
    padding: calc(var(--section-pad) + 5rem) 0 var(--section-pad);
    overflow: hidden;
}
.chero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #031059 6%, rgba(3,16,89,0.82) 40%, rgba(3,16,89,0.15) 72%, transparent 100%);
    z-index: 0;
}
.chero-inner {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto; padding: 0 2rem;
}
.chero-copy { max-width: 600px; }
.chero-eyebrow {
    font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 1rem;
}
.chero h1 {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.05rem, 4.4vw, 3.3rem); line-height: 1.08; margin: 0 0 1rem; color: #ffffff;
}
.chero h1 .accent { color: var(--green-dark); }
.chero-sub {
    font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.55; color: #c7d0e6; max-width: 46ch; margin: 0 0 1.6rem;
}
.chero-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.85rem; }
/* UK number-plate styled input */
.chero-plate {
    display: flex; align-items: stretch;
    background: #ffffff;
    border: 2px solid #0b1020;
    border-radius: 5px;
    overflow: hidden;
    height: 48px;
    flex: 1 1 240px; min-width: 0;
}
.chero-plate-flag {
    background: #04309b; color: #ffffff;
    font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0.7rem; letter-spacing: 0.04em;
    min-width: 3.2rem; /* DRV-10: GB, IRL or blank without the input jumping */
}
.chero-plate-input {
    border: 0; padding: 0 0.9rem; width: 100%; min-width: 0; height: 100%;
    font-family: var(--font-heading); font-weight: 800; font-size: 1.55rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: #0b1020; background: #ffffff;
}
.chero-plate-input::placeholder { color: #9aa3b8; letter-spacing: 0.12em; font-size: 1rem; }
.chero-cta {
    background: var(--green); color: #031059; border: 0; padding: 0 1.7rem;
    font-family: var(--font-heading); font-weight: 800; font-size: 0.98rem;
    text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; flex: 0 0 auto; transition: background 0.2s;
}
.chero-cta:hover { background: #33b4e6; }
.chero-secondary {
    display: inline-block; color: #ffffff; font-family: var(--font-body);
    font-size: 0.9rem; text-decoration: underline; margin: 0 0 1.2rem;
}
.chero-price { font-family: var(--font-body); font-size: 0.88rem; color: #aeb8d4; margin: 0; }
.chero-price strong { color: #ffffff; }
.chero-trust {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem;
    margin: 1.6rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(255,255,255,.14);
    font-family: var(--font-body); font-weight: 600; font-size: 0.84rem; color: #aeb8d4;
}
.chero-trust li::before { content: "\2713 "; color: var(--green-dark); font-weight: 800; }
.chero-card {
    background: #ffffff; color: var(--white); padding: 1.6rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.chero-card-head {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--mid-gray); padding-bottom: 1rem;
    font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
}
.chero-soh { font-family: var(--font-heading); font-weight: 800; font-size: 2.4rem; color: var(--green-dark); line-height: 1; }
.chero-heatmap { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 1.2rem 0; }
.chero-heatmap span { aspect-ratio: 1; background: var(--green); opacity: 0.85; }
.chero-heatmap span:nth-child(3n) { opacity: 0.5; }
.chero-heatmap span:nth-child(5n) { opacity: 1; }
.chero-heatmap span:nth-child(7n) { opacity: 0.65; }
.chero-rows { margin: 0; }
.chero-rows > div {
    display: flex; justify-content: space-between; padding: 0.6rem 0;
    border-top: 1px solid var(--mid-gray); font-family: var(--font-body); font-size: 0.88rem;
}
.chero-rows dt { color: var(--text-gray); margin: 0; }
.chero-rows dd { margin: 0; font-weight: 700; color: var(--white); }
.chero-card-note { font-size: 0.68rem; color: var(--text-gray); text-align: right; margin: 0.6rem 0 0; }
@media (max-width: 860px) {
    .chero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .chero-visual { order: 2; }
    .chero-form { flex-direction: column; }
    .chero-plate { flex: 0 0 auto; }
    .chero-cta { padding: 1rem; }
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.bk-section {
    padding: calc(var(--section-pad) + 5rem) 0 calc(var(--section-pad) * 0.6);
}
/* Everything in the booking box shows and hides by the [hidden] attribute. A class that sets
   display (.contact-form grid, .bk-progress flex, .bk-choices, .field-hint) would otherwise win
   over it: the form and the progress dots stayed on screen above the success panel. */
.bk-shell [hidden] { display: none !important; }

/* card shell around progress + form */
.bk-shell {
    max-width: 640px;
    margin: 2rem auto 0;
    background: var(--black);
    border: 1px solid var(--mid-gray);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.bk-form { margin: 0; }

/* progress indicator */
.bk-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.bk-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    text-align: center;
}
.bk-progress-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-gray);
    background: var(--off-black);
    border: 2px solid var(--mid-gray);
    border-radius: 50%;
    transition: all 0.2s ease;
}
.bk-progress-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-gray);
    letter-spacing: 0.02em;
}
.bk-progress-step.is-active .bk-progress-dot {
    color: var(--on-accent);
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 4px var(--green-glow);
}
.bk-progress-step.is-active .bk-progress-label { color: var(--green-dark); }
.bk-progress-step.is-done .bk-progress-dot {
    color: #ffffff;
    background: var(--green-dark);
    border-color: var(--green-dark);
}

/* step panes — visibility is driven by the [hidden] attribute (JS),
   NEVER by a class rule, so removing [hidden] reveals the step. */
.bk-step:not([hidden]) { animation: bkFade 0.25s ease; }
@keyframes bkFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bk-step-eyebrow {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-dark);
    margin: 0 0 0.35rem;
}
.bk-step-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    line-height: 1.15;
    color: var(--white);
    margin: 0 0 0.5rem;
}
.bk-step-sub {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

/* step nav row (buttons themselves reuse .btn / .btn-primary / .btn-secondary) */
.bk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
}

/* error + retry messages — hidden via the [hidden] attribute only */
.bk-error,
.bk-retry {
    padding: 0.9rem 1.15rem;
    margin-top: 1.25rem;
    background: var(--red-bg);
    border: 1px solid var(--red);
    border-left-width: 4px;
    color: var(--red);
    font-weight: 600;
    font-size: 0.92rem;
}

/* coverage result — hidden via [hidden]; state via modifier class */
.bk-coverage {
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--mid-gray);
    background: var(--off-black);
    margin: 1rem 0 0.5rem;
    font-size: 0.93rem;
}
.bk-coverage-title {
    font-family: var(--font-heading);
    font-weight: 800;
    margin: 0 0 0.25rem;
    color: var(--white);
}
.bk-coverage-text { margin: 0; color: var(--text-gray); }
.bk-coverage.is-covered {
    border-left-color: var(--green);
    background: var(--green-bg);
}
.bk-coverage.is-covered .bk-coverage-title { color: var(--green-dark); }
.bk-coverage.is-partial {
    border-left-color: #E8A33D;
    background: rgba(232, 163, 61, 0.08);
}
.bk-coverage.is-partial .bk-coverage-title { color: #B5761A; }
.bk-coverage.is-none {
    border-left-color: var(--red);
    background: var(--red-bg);
}
.bk-coverage.is-none .bk-coverage-title { color: var(--red); }

/* test-type choice cards */
.bk-choices {
    display: grid;
    gap: 0.75rem;
    border: 0;
    padding: 0;
    margin: 0 0 0.75rem;
}
.bk-choice {
    position: relative;
    display: block;
    padding: 1rem 1.15rem 1rem 2.9rem;
    background: var(--off-black);
    border: 1px solid var(--field-border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
/* The radio's own size: without it, .contact-form input (width: 100%, padding) made each radio
   as wide as its card, so the circle was drawn in the middle, over the label, and its focus ring
   went round the whole card. */
.bk-choice input {
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    accent-color: var(--green-dark);  /* R9 (1.4.11): checked state at 5.7:1 */
}
.bk-choice:hover { border-color: var(--green); }
.bk-choice.is-selected {
    border-color: var(--green);
    background: var(--green-bg);
}
.bk-choice-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--white);
    margin-bottom: 0.15rem;
}
.bk-choice-desc {
    display: block;
    font-size: 0.88rem;
    color: var(--text-gray);
}
.bk-caveat {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin: 0 0 0.5rem;
}

/* DRV-08: "Where is the car?" and "Has the seller agreed?": short answers side by side, with a
   visible legend styled like the field labels. */
.bk-legend {
    display: block;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}
.bk-choices-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}
.bk-choices-inline .bk-choice {
    flex: 1 1 9.5rem;
    margin: 0;
    padding: 0.75rem 0.9rem 0.75rem 2.5rem;
}
.bk-choices-inline .bk-choice input { left: 0.9rem; top: 0.95rem; }
.bk-choices-inline .bk-choice-title { margin: 0; font-size: 0.92rem; }
.bk-choices-after { margin: 1rem 0 0; }
.bk-choices-after + .field-hint { margin-top: 0.4rem; }

/* DRV-08: the charging line on the review, a tick the driver may give */
.bk-charge {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    background: #EAF6FC;
    border-left: 4px solid var(--green);
    color: #0b1f4d;
    font-size: 0.88rem;
}

/* preferred slots */
.bk-slots { display: grid; gap: 0.75rem; }
.bk-slot {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
}
.bk-slot-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--green-dark);
    background: var(--green-bg);
    border: 1px solid var(--green);
    border-radius: 50%;
}
.bk-slot-fields {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    min-width: 0;
}

/* review summary (dl) */
.bk-review {
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
.bk-review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mid-gray);
    font-size: 0.92rem;
}
.bk-review-row:last-child { border-bottom: none; }
.bk-review-term {
    margin: 0;
    color: var(--text-gray);
    flex: 0 0 auto;
}
.bk-review-desc {
    margin: 0;
    color: var(--white);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.bk-review-edit {
    margin-left: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--green-dark);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
}

/* consent row */
.bk-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}
.bk-consent-check {
    width: auto;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--green-dark);  /* R9 (1.4.11): checked state at 5.7:1 */
}

/* success panel — hidden via [hidden]; JS reveals it */
.bk-success {
    text-align: center;
    padding: clamp(1.5rem, 5vw, 3rem);
    background: var(--green-bg);
    border: 1px solid var(--green);
}
.bk-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: #ffffff;
    background: var(--green-dark);
    border-radius: 50%;
}
.bk-success-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--green-dark);
    margin: 0 0 0.75rem;
}
.bk-success-text {
    color: var(--white);
    max-width: 44ch;
    margin: 0 auto 1.25rem;
}
.bk-success-ref {
    color: var(--white);
    max-width: 44ch;
    margin: 0 auto 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
}
.bk-success-ref strong {
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* the distance provider's attribution, under the review when a travel figure shows */
.bk-travel-attr {
    margin: -1rem 0 1.25rem;
    font-size: 0.75rem;
    color: var(--text-gray);
}

/* DRV-09: what happens next, on the success panel */
.bk-next-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--white);
    margin: 0 0 0.5rem;
}
.bk-next-steps {
    max-width: 44ch;
    margin: 0 auto 1rem;
    padding-left: 1.25rem;
    text-align: left;
    color: var(--white);
}
.bk-next-steps li { margin-bottom: 0.4rem; }

/* Honeypot. Off-screen rather than display:none — a bot that skips
   hidden fields still fills this one, which is the whole point. Kept out
   of the tab order and out of the accessibility tree by the markup. */
.bk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 560px) {
    .bk-nav { flex-direction: column-reverse; }
    .bk-nav .btn { width: 100%; }
    .bk-slot-fields { grid-template-columns: 1fr; }
    .bk-progress-label { display: none; }
    .bk-review-row { flex-direction: column; gap: 0.15rem; }
    .bk-review-desc { text-align: left; }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY — visible focus + skip link
   Placed last so the focus ring overrides any
   earlier `outline: none` on inputs/selects.
   ═══════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #031059;   /* A11-02: 17.2:1 white, 15.1:1 #f0f0f2, 5.64:1 next to cyan fills */
    outline-offset: 2px;
    border-radius: 0;
}
.bhc-consent :focus-visible,
.soh-hero :focus-visible,
.soh-cta :focus-visible { outline-color: #ffffff; }
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }

/* Light-background sections: the AVILOO-cyan ring falls below 3:1 on the
   cream/pale hero, so use navy (~12:1 on cream) for controls inside them. */
.light-surface a:focus-visible,
.light-surface button:focus-visible,
.light-surface input:focus-visible,
.light-surface select:focus-visible,
.light-surface textarea:focus-visible,
.light-surface [tabindex]:focus-visible,
.light-surface [role="button"]:focus-visible {
    outline-color: #031059;
}

/* Fallback for browsers without :focus-visible support */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #031059;
    outline-offset: 2px;
}
.light-surface a:focus,
.light-surface button:focus,
.light-surface input:focus,
.light-surface select:focus,
.light-surface textarea:focus {
    outline-color: #031059;
}

/* Skip to main content link — visually hidden until focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--green);
    color: var(--on-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #031059;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   BLOG / LEARN audience filter tabs
   Hidden without JS (progressive enhancement); grid shows all posts.
   ═══════════════════════════════════════════════ */
.blog-filter { display: none; }
.js .blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.blog-filter-btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.15rem;
    border: 1px solid var(--mid-gray);
    background: var(--off-black);
    color: var(--white);
    cursor: pointer;
    border-radius: 999px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.blog-filter-btn:hover { border-color: var(--green); }
.blog-filter-btn.is-active { background: var(--green); border-color: var(--green); color: #031059; }
/* Topic chips: the same progressive enhancement, a quieter row under the audience tabs. */
.blog-tags { display: none; }
.js .blog-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -1rem 0 2rem; }
.blog-tag-btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--mid-gray);
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.blog-tag-btn:hover { border-color: var(--green); color: var(--white); }
.blog-tag-btn.is-active { border-color: var(--green); color: var(--white); background: var(--green-bg); }

/* ═══════════════════════════════════════════════
   SOH READOUT vs AVILOO TEST (.soh-*) — namespaced
   so it cannot collide with anything above. Used by
   templates/comparison-soh.html only.
   ═══════════════════════════════════════════════ */

.soh-wrap { max-width: 860px; }

/* ── Hero ── */
.soh-hero {
    background: linear-gradient(135deg, #00688F 0%, #031059 100%);  /* A11-16: from #009DDF, so white text passes at the light end */
    color: #ffffff;
    padding: calc(var(--section-pad) + 4rem) 0 var(--section-pad);
    position: relative;
    overflow: hidden;
}
.soh-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 90% at 82% 8%, rgba(255,255,255,0.16), transparent 60%);
    pointer-events: none;
}
.soh-hero-inner { position: relative; z-index: 1; max-width: 860px; }
.soh-eyebrow {
    font-family: var(--font-heading); font-weight: 800;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #ffffff; margin: 0 0 1rem;  /* A11-16: was 0.72 opacity */
}
.soh-h1 {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.05rem, 4.6vw, 3.35rem); line-height: 1.08;
    margin: 0 0 1.1rem; color: #ffffff; text-wrap: balance;
}
.soh-sub {
    font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
    color: #d6e6f4; max-width: 52ch; margin: 0 0 1.6rem;
}
.soh-cobrand {
    font-family: var(--font-heading); font-weight: 600;
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #ffffff; margin: 0;  /* A11-16: was 0.6 opacity */
}

/* ── Section rhythm ── */
.soh-section { padding: var(--section-pad) 0; }
.soh-section-tight { padding: calc(var(--section-pad) * 0.55) 0; }
.soh-section-alt { background: var(--off-black); }
.soh-h2 {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.15;
    margin: 0 0 1.5rem; color: var(--white); text-wrap: balance;
}
.soh-h2-flush { margin-top: 0; }
.soh-h3 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.25;
    margin: 0 0 0.7rem; color: var(--white);
}
.soh-section p { color: var(--text-gray); line-height: 1.75; margin: 0 0 1rem; }
.soh-lead { font-size: 1.1rem; }
.soh-section .soh-note { font-size: 0.95rem; margin: 1.75rem 0 0; }
.soh-note a { color: var(--green-dark); text-decoration: underline; }
.soh-note a:hover { color: var(--green-dark); }

/* ── The two approaches ── */
.soh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.soh-approach {
    background: var(--black);
    border: 1px solid var(--mid-gray);
    border-radius: 14px;
    padding: 1.75rem;
}
.soh-approach-win { border-color: var(--green); box-shadow: 0 6px 24px -18px var(--green-glow); }
.soh-approach p { margin: 0; }
.soh-tag {
    display: inline-block;
    font-family: var(--font-heading); font-weight: 800;
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.32rem 0.7rem; border-radius: 999px; margin-bottom: 1rem;
}
.soh-tag-read { background: var(--dark-gray); color: var(--text-gray); }
.soh-tag-test { background: var(--green-bg); color: var(--green-dark); }

/* ── Three reasons ── */
.soh-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.soh-reason { position: relative; padding-left: 4rem; }
.soh-rnum {
    position: absolute; left: 0; top: -0.15rem;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-bg); color: var(--green-dark);
    font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem;
}
.soh-reason p { margin: 0; }

/* ── Proof gauges ── */
.soh-proof { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: center; }
.soh-proof-copy p { margin: 0; }
.soh-gauges { display: grid; gap: 1rem; }
.soh-gauge {
    background: var(--black);
    border: 1px solid var(--mid-gray);
    border-left-width: 4px;
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    display: flex; flex-direction: column;
}
.soh-gauge-bms { border-left-color: var(--mid-gray); }
.soh-gauge-avi { border-left-color: var(--green); }
.soh-gauge-n {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; color: var(--white);
}
.soh-gauge-avi .soh-gauge-n { color: var(--green-dark); }
.soh-gauge-l {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 0.92rem; color: var(--white); margin-top: 0.45rem;
}
.soh-gauge-s { font-size: 0.82rem; color: var(--text-gray); margin-top: 0.15rem; }

/* ── Side-by-side table ── */
.soh-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.soh-table {
    width: 100%; min-width: 640px;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.soh-table th, .soh-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--mid-gray);
    text-align: left; vertical-align: top;
    color: var(--text-gray); font-weight: 400;
}
.soh-table thead th {
    font-family: var(--font-heading); font-weight: 800;
    font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--white); border-bottom: 2px solid var(--mid-gray);
}
.soh-table tbody th[scope="row"] {
    font-family: var(--font-heading); font-weight: 700;
    color: var(--white); width: 30%;
}
.soh-table .soh-col-avi { background: var(--green-bg); }
.soh-table thead .soh-col-avi { color: var(--green-dark); border-bottom-color: var(--green); }
.soh-table tbody tr:last-child th, .soh-table tbody tr:last-child td { border-bottom: none; }
.soh-ic { font-weight: 700; margin-right: 0.35rem; }
.soh-ic-no { color: var(--red); }
.soh-ic-yes { color: var(--green-dark); }

/* ── What you get / checklist ── */
.soh-gives, .soh-checklist { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.8rem; }
.soh-gives { list-style: disc; }
.soh-checklist { list-style: decimal; }
.soh-gives li, .soh-checklist li { color: var(--text-gray); line-height: 1.7; }
.soh-gives li::marker, .soh-checklist li::marker { color: var(--green-dark); }
.soh-gives strong, .soh-checklist strong { color: var(--white); }

/* ── Warranty panel ── */
.soh-warranty {
    display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center;
    background: var(--off-black);
    border: 1px solid var(--mid-gray);
    border-radius: 16px;
    padding: 2rem;
}
.soh-warranty-fig { text-align: center; }
.soh-warranty-label {
    display: block;
    font-family: var(--font-heading); font-weight: 800;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-gray); margin-bottom: 0.3rem;
}
.soh-warranty-n {
    display: block;
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; color: var(--green-dark);
}
.soh-warranty-copy p:last-child { margin-bottom: 0; }

/* ── CTA ── */
.soh-cta {
    background: linear-gradient(135deg, #031059 0%, #00688F 100%);  /* A11-16: end was #0080B8 (4.39:1) */
    color: #ffffff;
    padding: var(--section-pad) 0;
    text-align: center;
}
.soh-cta .soh-wrap { margin: 0 auto; }
.soh-section .cmp-disclaimer { max-width: 860px; }
.soh-cta-title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15;
    margin: 0 0 0.8rem; color: #ffffff;
}
.soh-cta-sub { color: #d6e6f4; margin: 0 0 1.8rem; }
.soh-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.soh-cta .btn-secondary { border-color: rgba(255,255,255,0.55); color: #ffffff; }
.soh-cta .btn-secondary:hover { border-color: #ffffff; background: rgba(255,255,255,0.12); color: #ffffff; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .soh-duo { grid-template-columns: 1fr; }
    .soh-proof { grid-template-columns: 1fr; gap: 1.5rem; }
    .soh-warranty { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
    .soh-warranty-copy { text-align: left; }
}
@media (max-width: 560px) {
    .soh-reason { padding-left: 0; padding-top: 3.4rem; }
    .soh-rnum { top: 0; }
}

/* TRD-02: below 600 px each price tier is a stacked card (DES-03, A11Y-11).
   CSS only, keyed on column position, so it works on /get-started/ and landing.html unchanged. */
.tier-table tbody th { padding: 0.55rem 0; border-bottom: 1px solid var(--mid-gray); text-align: left; font-weight: 400; }
/* At every width (R1): table text at least 14 px and buttons at least 44 px tall, so the desktop
   table meets the same checks as the phone cards. The cards below still win under 600 px. */
.tier-table, .tier-table thead th, .tier-table tbody td, .tier-table tbody td:nth-child(n) { font-size: 0.875rem; }
.tier-label { font-size: 0.95rem; }
.tier-badge { font-size: 0.875rem; }
.tier-buy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.875rem; }
@media (max-width: 600px) {
    .tier-table, .tier-table tbody { display: block; width: 100%; }
    .tier-table thead { display: none; }  /* each card labels its own values below */
    .tier-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 1rem;
        padding: 1rem;
        margin: 0 0 0.75rem;
        border: 1px solid var(--mid-gray);
        background: var(--black);
    }
    .tier-table tbody tr.tier-row-gold { border-left: 3px solid var(--green); }
    .tier-table tbody td,
    .tier-table tbody th { display: block; padding: 0; border: 0; text-align: left !important; font-size: 0.95rem !important; color: var(--white); }
    .tier-table tbody > tr > :nth-child(1) { grid-column: 1 / -1; }
    .tier-table tbody > tr > :nth-child(2)::before { content: "Annual EVs"; }
    .tier-table tbody > tr > :nth-child(3)::before { content: "Tests per order"; }
    .tier-table tbody > tr > :nth-child(4)::before { content: "Per test"; }
    .tier-table tbody > tr > :nth-child(5)::before { content: "AVILOO Box"; }
    .tier-table tbody > tr > :nth-child(n+2):not(:last-child)::before {
        display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--text-gray);
    }
    .tier-table tbody > tr > :last-child { grid-column: 1 / -1; margin-top: 0.4rem; }
    .tier-label { font-size: 1.1rem; }
    .tier-badge { font-size: 0.875rem; }
    .tier-buy-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; font-size: 0.95rem; }
}

/* TRD-07: the one tier table (templates/_tier-table.html) names each tier in a row header. Inside a
   .page-body (/for-dealers/) that header must not take the body tables' column-header look. */
.tier-table tbody th { background: none; color: var(--white); text-transform: none; letter-spacing: normal; white-space: normal; font-size: inherit; }
.section-subtitle a,
.faq-answer a { text-decoration: underline; text-underline-offset: 0.15em; }

/* ═══════════════════════════════════════════════
   LANDING: "NOT READY TO BUY YET?" DEMO BOOKING (_demo-booking.html)
   ═══════════════════════════════════════════════ */
.landing-demo { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--off-black); border-top: 1px solid var(--mid-gray); }
.landing-demo-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.landing-demo-label { color: #00688F; }
.landing-demo-title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; color: #031059; margin-bottom: 0.75rem; }
.landing-demo-sub { color: var(--text-gray); font-size: 1.1rem; line-height: 1.7; max-width: 560px; margin-bottom: 1.5rem; }
.landing-demo-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.landing-demo-option { display: block; background: #ffffff; border: 1px solid var(--mid-gray); border-top: 4px solid var(--green); padding: 1.1rem 1.25rem; color: #031059; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.landing-demo-option:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(3, 16, 89, 0.10); transform: translateY(-2px); }
.landing-demo-option:focus-visible { outline: 3px solid #031059; outline-offset: 2px; }
.landing-demo-option-tag { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #00688F; margin-bottom: 0.35rem; }
.landing-demo-option strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; }
.landing-demo-option strong::after { content: ' \2192'; color: var(--green); }
.landing-demo-option-meta { display: block; font-size: 0.875rem; color: var(--text-gray); margin-top: 0.25rem; }
.landing-demo-person { background: #ffffff; border: 1px solid var(--mid-gray); padding: 1.5rem; text-align: center; }
.landing-demo-photo { width: 96px; height: 96px; object-fit: cover; margin: 0 auto 0.9rem; border: 1px solid var(--mid-gray); }
.landing-demo-initials { display: flex; align-items: center; justify-content: center; background: #031059; color: #ffffff; font-family: var(--font-heading); font-weight: 800; font-size: 2.25rem; letter-spacing: 0.04em; }
.landing-demo-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }
.landing-demo-role { font-size: 0.875rem; color: var(--text-gray); margin-bottom: 0.9rem; }
.landing-demo-contact { list-style: none; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.landing-demo-contact a { color: #00688F; text-decoration: underline; overflow-wrap: anywhere; }
.landing-demo-contact a:focus-visible { outline: 3px solid #031059; outline-offset: 2px; }
@media (max-width: 860px) {
    .landing-demo-grid { grid-template-columns: 1fr; }
    .landing-demo-photo { width: 72px; height: 72px; margin-bottom: 0.75rem; }
    .landing-demo-initials { font-size: 1.5rem; }
}
@media (max-width: 560px) {
    .landing-demo-options { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   R3: THE TALK-FIRST ROUTE (TRD-04, TRD-08)
   ═══════════════════════════════════════════════ */
/* Talk first, buy second (D3): under the /get-started/ H1 and at the end of /for-dealers/ */
.gs-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.gs-actions .btn { min-height: 44px; }
.gs-actions .btn-ghost { color: #031059; border-color: #031059; }
/* The booking block's "What happens next" (after booking a call) */
.landing-demo-next-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; margin: 1.75rem 0 0.6rem; }
.landing-demo-next { margin: 0; padding-left: 1.25rem; color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; display: grid; gap: 0.3rem; }
/* What happens after you buy (_after-buying.html) */
.next-steps { margin: 1.5rem 0 0; text-align: left; }
.next-steps-title { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: #031059; margin: 0 0 0.6rem; }
.next-steps-list { margin: 0; padding-left: 1.25rem; color: var(--text-gray); font-size: 0.9rem; line-height: 1.6; display: grid; gap: 0.25rem; }

/* ═══════════════════════════════════════════════
   R3: ONE AUDIENCE PER PAGE (TRD-06, DRV-06)
   ═══════════════════════════════════════════════ */
/* The nav, footer and phone-bar pairs (macros/audience.html). Each pair's wrapper adds no box. A shared
   page carries both pairs: the driver pair shows, the trade pair for a visitor who came from a trade
   page this session (html.aud-trade, set in layout.html). */
.aud-for { display: contents; }
.aud-paired.aud-for-trade { display: none; }
.aud-trade .aud-paired.aud-for-trade { display: contents; }
.aud-trade .aud-paired.aud-for-consumer { display: none; }

/* DRV-06: the phone bar. At 1,180 px and below (TRD-17; it was 900 px) the audience link and the main
   button stay beside the menu button; above that they are in .nav-menu. Navy on cyan (A11-01). Measured with Playwright from
   320 to 900 px on driver, trade and shared pages: no overlap, nothing past the right edge, no
   sideways scroll, every link 42 px or more tall. To fit, the AVILOO lock-up and its divider step out
   of the bar at 600 px and below (AVILOO stays in the footer), and the logo and links get smaller in
   two steps. */
.nav-quick { display: none; }
@media (max-width: 900px) {
    .nav, .nav.scrolled { padding-left: 16px; padding-right: 16px; }
    .nav .container { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1180px) {
    .nav-quick { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; margin-right: 0.35rem; }
    .nav-quick-link { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: #031059; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; padding: 0.75rem 0.35rem; }
    .nav-quick-cta { font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; background: var(--green); color: #031059; padding: 0 0.7rem; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
    .nav-quick-cta:hover { background: #031059; color: #ffffff; }
    .nav-quick a:focus-visible { outline: 3px solid #031059; outline-offset: 2px; }
}
@media (max-width: 600px) {
    .nav-brand-divider, .nav-aviloo { display: none; }
    .nav-logo { gap: 8px; }
    .nav-logo svg { width: 30px; height: 35px; }
    .nav-logo .logo-text .primary { font-size: 16px; }
}
@media (max-width: 430px) {
    .nav, .nav.scrolled { padding-left: 12px; padding-right: 12px; }
    .nav-logo { gap: 6px; }
    .nav-logo svg { width: 26px; height: 31px; }
    .nav-logo .logo-text .primary { font-size: 14px; }
    .nav-quick { gap: 0.2rem; margin-right: 0.2rem; }
    .nav-quick-link { font-size: 0.875rem; padding-left: 0.2rem; padding-right: 0.2rem; }  /* Driver N6 (R9): 14 px, was 11.5 */
    .nav-quick-cta { font-size: 0.75rem; padding: 0 0.5rem; }
    .nav-hamburger { padding: 4px; }
}
@media (max-width: 359px) {
    .nav, .nav.scrolled { padding-left: 8px; padding-right: 8px; }
    .nav-logo { gap: 5px; }
    .nav-logo svg { width: 22px; height: 26px; }
    .nav-logo .logo-text .primary { font-size: 12.5px; }
    .nav-quick-link { font-size: 0.8125rem; padding-left: 0.1rem; padding-right: 0.15rem; }  /* 13 px fits at 320 px, 14 does not */
    .nav-quick-cta { font-size: 0.7rem; padding: 0 0.4rem; }
    .nav-hamburger span { width: 22px; }
}

/* The two exits at the end of a shared page (_audience-exits.html): driver first, trade second. */
.aud-exits { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--off-black); border-top: 1px solid var(--mid-gray); }
.aud-exits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; }
.aud-exit { display: flex; flex-direction: column; align-items: flex-start; background: #ffffff; border: 1px solid var(--mid-gray); border-top: 4px solid var(--green); padding: clamp(1.25rem, 3vw, 2rem); }
.aud-exit h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.2; color: #031059; margin: 0 0 0.5rem; }
.aud-exit p { color: var(--text-gray); line-height: 1.6; margin: 0 0 1.25rem; }
.aud-exit .btn { margin-top: auto; min-height: 44px; }
.aud-trade .aud-exit[data-aud="trade"] { order: -1; }

/* DRV-06: the booking line half-way down a model page, and the closing panel on model pages and the hub */
.book-line { margin: 2rem 0; padding: 1rem 1.25rem; background: #EAF6FC; border-left: 4px solid var(--green); }
.book-line p { margin: 0; color: #0b1f4d; line-height: 1.6; }
.book-line-link { font-weight: 700; color: #031059; text-decoration: underline; white-space: nowrap; }
.book-panel { margin-top: 2.75rem; padding: 2rem; background: var(--off-black); border: 1px solid var(--mid-gray); text-align: center; }
.book-panel h2 { margin-bottom: 0.5rem; }
.book-panel p { color: var(--text-gray); max-width: 54ch; margin: 0 auto 1.25rem; }

/* TRD-04 (A11Y-06): the two dealer fallback forms (/trade/ #homepageCta, /get-started/ #enquiryForm)
   have visible labels above their fields. */
.cta-field { display: grid; gap: 0.35rem; text-align: left; }
.cta-field label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--white); }
/* A solid panel, so the labels never sit on the /trade/ section's background photo */
.cta-form--panel { background: #ffffff; border: 1px solid var(--mid-gray); padding: clamp(1.25rem, 4vw, 2rem); }

/* TRD-08: onward links on /trade/ (the money and law sections, the coverage figure) and the next-steps tiles */
.trade-inline-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 1.25rem auto 0; text-align: center; }
.trade-inline-links a { color: #00688F; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.next-tiles-section { padding: var(--section-pad) 0; background: var(--black); border-top: 1px solid var(--mid-gray); text-align: center; }
.next-tiles-section .next-tiles { text-align: left; }
.next-tiles { list-style: none; margin: 2rem auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.next-tile { display: block; height: 100%; padding: 1.1rem 1.25rem; background: #ffffff; border: 1px solid var(--mid-gray); border-left: 4px solid var(--green); color: #031059; text-decoration: none; }
.next-tile strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; }
.next-tile strong::after { content: ' \203A'; color: #00688F; }
.next-tile span { display: block; margin-top: 0.25rem; color: var(--text-gray); font-size: 0.875rem; line-height: 1.5; }
.next-tile:hover { border-color: var(--green); }
.next-tile:focus-visible { outline: 3px solid #031059; outline-offset: 2px; }
@media (max-width: 700px) { .next-tiles { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   R4: PROOF SLOTS (TRD-09)
   Dealer quotes, the dealer-logo strip and the review badge
   (templates/macros/proof.html). None of it renders until
   databags/dealer_proof.json holds an approved entry.
   ═══════════════════════════════════════════════ */
.proof-quotes { padding: var(--section-pad) 2rem; background: var(--off-black); }
.proof-quotes--inline { padding: 2.5rem 0 0; background: none; }
.proof-quotes-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--white); text-align: center; margin-bottom: 2rem; }
.proof-quotes--inline .proof-quotes-title { text-align: left; font-size: 1.5rem; margin-bottom: 1.25rem; }
.proof-quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
.proof-quote { margin: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; background: var(--black); border: 1px solid var(--mid-gray); border-top: 3px solid var(--green); }
.proof-quote-number { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; line-height: 1.1; color: #00688F; }
.proof-quote-number span { display: block; margin-top: 0.25rem; font-size: 0.9rem; font-weight: 600; color: var(--text-gray); }
.proof-quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--white); }
.proof-quote blockquote p::before { content: '\201C'; }
.proof-quote blockquote p::after { content: '\201D'; }
.proof-quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; font-size: 0.9rem; line-height: 1.4; color: var(--text-gray); }
.proof-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.proof-quote figcaption strong { color: var(--white); }
.proof-quote-incentive { font-size: 0.85rem; color: var(--text-gray); }
.proof-logos { padding: 2.5rem 2rem; background: var(--black); border-bottom: 1px solid var(--mid-gray); }
.proof-logos--inline { padding: 2.5rem 0 0; border-bottom: 0; background: none; }
.proof-logos-title { margin-bottom: 1.25rem; text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-gray); }
.proof-logos-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.proof-logos-list img { display: block; width: auto; height: 40px; }
.proof-reviews { padding: 0 2rem 2.5rem; text-align: center; background: var(--off-black); }
.proof-reviews--inline { padding: 1.25rem 0 0; text-align: left; background: none; }
.proof-review a { font-weight: 700; color: #00688F; text-decoration: underline; }

/* ═══════════════════════════════════════════════
   R4: THE CALCULATOR (TRD-10, A11-13)
   Sums first, then the optional "Email me these numbers".
   Errors are text in role="alert" paragraphs that stay in
   the page; the red border is never the only signal.
   ═══════════════════════════════════════════════ */
.calc-field .calc-error { text-align: left; margin-top: 0.4rem; }
.calc-error:empty { margin: 0; }
.calc-results { margin-top: 2.5rem; }
.calc-results-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; color: var(--white); margin-bottom: 0.4rem; }
.calc-results-sub { color: var(--text-gray); font-size: 0.95rem; }
.calc-results .calc-card { margin-top: 1.25rem; padding: 1.75rem 2rem; }
.calc-per-car { margin-top: 0.75rem; color: var(--text-gray); }
.calc-per-car strong { color: var(--white); }
.calc-uplift p { color: var(--text-gray); line-height: 1.65; }
.calc-uplift p + p { margin-top: 0.85rem; }
.calc-uplift strong { color: var(--white); }
.calc-uplift a, .calc-note-box a, .calc-privacy a, .calc-scorecard-link a { color: #00688F; text-decoration: underline; }
.calc-results .calc-note-box { margin-top: 1.25rem; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.calc-scorecard-link { margin-top: 1.25rem; text-align: center; font-weight: 700; }
.calc-results .calc-email { margin-top: 2.5rem; }
.calc-email-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--white); margin-bottom: 0.4rem; }
.calc-email-sub { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 1.25rem; }
#calcEmailForm:not([hidden]) { display: grid; gap: 1rem; }
#calcEmailForm .calc-error { text-align: left; }
.calc-done:not(:empty) { font-weight: 700; color: var(--white); }
.calc-privacy { margin-top: 1rem; font-size: 0.8rem; color: var(--text-gray); }
@media (max-width: 600px) {
    .calc-results .calc-card { padding: 1.5rem 1.25rem; }
    .calc-line { gap: 1rem; }
    .calc-actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════
   A11-12: target size
   ═══════════════════════════════════════════════ */
/* The consent boxes on /valuation/ and /book/ were 13 px: 24 px meets WCAG 2.5.8. */
input[type="checkbox"][name="consent"] { width: 1.5rem !important; height: 1.5rem; flex: 0 0 auto; }
/* Driver N3 (R9): the /book/ charge tick took .contact-form input's width: 100% and sat above its text. */
.bk-form .bk-consent-check { width: 1.5rem; height: 1.5rem; padding: 0; margin-top: 0; flex: 0 0 auto; }
.bk-form label.bk-consent { display: flex; align-items: flex-start; gap: 0.6rem; }  /* beat .contact-form label's block */

/* FND-13: the About page (templates/about.html). No inline styles. The person card follows the
   booking block's (.landing-demo-person): a photo, or the initials on navy when there is none. */
.about-page { padding: var(--section-pad) 0; padding-top: calc(var(--section-pad) + 5rem); }
.about-page .container { max-width: 800px; }
.page-body .about-people { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.page-body .about-people li.about-person { margin: 0; }
.about-person { display: flex; align-items: center; gap: 1.25rem; background: #ffffff; border: 1px solid var(--mid-gray); border-top: 4px solid var(--green); padding: 1.25rem 1.5rem; }
.about-person-photo { width: 96px; height: 96px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--mid-gray); }
.about-person-initials { display: flex; align-items: center; justify-content: center; background: #031059; color: #ffffff; font-family: var(--font-heading); font-weight: 800; font-size: 2.25rem; letter-spacing: 0.04em; }
.about-person-text { min-width: 0; }
.page-body .about-person-text p { margin: 0; }
.about-person-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }
.page-body .about-person-role { font-size: 0.9rem; margin-bottom: 0.5rem; }
.page-body .about-person-contact { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.25rem; font-size: 0.95rem; }
.page-body .about-person-contact li { margin: 0; }
.about-person-contact a { overflow-wrap: anywhere; }
.about-facts { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.about-facts dt { font-weight: 700; color: #031059; }
.about-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .about-person { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .about-person-photo { width: 72px; height: 72px; }
    .about-person-initials { font-size: 1.5rem; }
    .about-facts { grid-template-columns: 1fr; gap: 0.15rem; }
    .about-facts dd { margin-bottom: 0.7rem; }
}

/* ═══ TRD-14 (R6): the /trade/ body after the hero (templates/_home-trade.html) ═══
   One story in nine sections, no inline styles, a short type scale: 0.875rem for citations and
   small print, 1rem for body text, 1.125rem for card and step titles, one size for figures, and
   the shared section title. The navy band is the one dark section. */
.how-it-works, .money, .tr-cert, .compliance, .next-tiles-section, .tr-write { --tr-pad: clamp(3.5rem, 6vw, 5rem); }
.tr-cite { font-size: 0.875rem; color: var(--text-gray); }
.tr-cite a { color: var(--green-dark); text-decoration: underline; }
.tr-cite-centre { display: block; text-align: center; margin: 0.75rem 0 0; }

/* (2) who stands behind it: the distributor line, AVILOO's clients and the TÜV marks */
.tr-certline { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: #ffffff; border-bottom: 1px solid var(--mid-gray); text-align: center; }
.tr-certline-title { margin: 0 0 0.4rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }
.tr-dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.6rem; vertical-align: 0.15em; border-radius: 50%; background: var(--green); }
.tr-certline-sub { margin: 0 0 1.75rem; font-size: 1rem; color: var(--text-gray); }
.tr-certline-sub a { color: var(--green-dark); text-decoration: underline; }

/* (3) the problem and the opportunity */
.split { display: grid; grid-template-columns: 1fr 1fr; background: var(--off-black); }
.split-panel { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem); }
.split-problem { border-right: 1px solid var(--mid-gray); }
@media (min-width: 901px) {
    /* The panels run edge to edge; their text lines up with the page container. */
    .split-problem { padding-left: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - var(--max-w)) / 2 + clamp(1.25rem, 4vw, 2.5rem))); }
    .split-opportunity { padding-right: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - var(--max-w)) / 2 + clamp(1.25rem, 4vw, 2.5rem))); }
}
.split-label { margin: 0 0 1.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; }
.split-problem .split-label, .split-problem .split-stat-num { color: var(--red); }
.split-opportunity .split-label, .split-opportunity .split-stat-num { color: var(--green-dark); }
.split-stat-item { margin-bottom: 1.5rem; }
.split-stat-item:last-child { margin-bottom: 0; }
.split-stat-num { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; }
.split-stat-text { max-width: 440px; margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-gray); }

/* (4) how it works, with the FLASH video */
.how-it-works { padding: var(--tr-pad) 0; background: #ffffff; text-align: center; }
.how-it-works .section-subtitle { margin: 0 auto 2.5rem; }
.steps-grid { list-style: none; max-width: 1100px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; text-align: left; }
.step-img { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--mid-gray); }
.step-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.6rem; background: #031059; color: #ffffff; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; }
.step-title { margin: 0 0 0.35rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }
.step-desc { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-gray); }
.video-card { display: flex; align-items: center; max-width: 560px; margin: 2.5rem auto 0; background: #ffffff; border: 1px solid var(--mid-gray); text-align: left; }
.video-thumb { position: relative; flex: 0 0 240px; aspect-ratio: 16 / 9; overflow: hidden; }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #031059; cursor: pointer; }
.video-play-btn svg { margin-left: 4px; }
.video-play-btn:hover { background: #00688F; }
.video-play-btn:focus-visible { outline: 3px solid #031059; outline-offset: 3px; }
.video-meta { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--text-gray); }
.video-meta-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }

/* (5) what it is worth: the navy band */
.money { padding: var(--tr-pad) 0; background: #031059; color: #ffffff; text-align: center; }
.money .section-label, .money .section-title { color: #ffffff; }
.money-calculator { max-width: 720px; margin: 2rem auto 0; border: 1px solid rgba(255, 255, 255, 0.3); text-align: left; }
.money-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; font-size: 1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.money-line:last-child { border-bottom: 0; }
.money-line .value { font-family: var(--font-heading); font-weight: 800; white-space: nowrap; }
.money-line.revenue { background: rgba(255, 255, 255, 0.08); }
.money-line.revenue .value { color: #8fdcff; }
.money-note { max-width: 720px; margin: 1.25rem auto 0; font-size: 0.875rem; line-height: 1.6; color: #ffffff; }
.money-note a, .money .trade-inline-links a { color: #ffffff; text-decoration: underline; }
.money .trade-inline-links a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* (6) the certificate and (7) the law: four cards, two by two */
.tr-cert, .compliance { padding: var(--tr-pad) 0; text-align: center; }
.tr-cert { background: #ffffff; }
.compliance { background: var(--off-black); border-top: 1px solid var(--mid-gray); }
.tr-cards { list-style: none; max-width: 960px; margin: 2rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; text-align: left; }
.tr-card { padding: 1.5rem; background: #ffffff; border: 1px solid var(--mid-gray); border-top: 4px solid var(--green); }
.tr-card-title { margin: 0 0 0.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: #031059; }
.tr-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-gray); }
.tr-card a { color: var(--green-dark); text-decoration: underline; }
.certified-banner { display: inline-flex; align-items: center; gap: 1.25rem; margin: 2rem auto 0; padding: 1rem 1.75rem; background: var(--off-black); border: 1px solid var(--mid-gray); text-align: left; }
.certified-banner img { display: block; width: auto; height: 32px; }
.certified-banner-divider { width: 1px; height: 36px; background: var(--mid-gray); }
.certified-banner-title { margin: 0; font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem; letter-spacing: 0.05em; color: #031059; }
.certified-banner-tag { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--text-gray); }

/* the write-to-us fallback */
.tr-write { padding: var(--tr-pad) 0; border-top: 1px solid var(--mid-gray); }
.tr-write .section-title { margin-bottom: 2rem; }
.cta-disclaimer { max-width: 680px; margin: 1.5rem auto 0; font-size: 0.875rem; color: var(--text-gray); text-align: center; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split-problem { border-right: 0; border-bottom: 1px solid var(--mid-gray); }
    .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .steps-grid, .tr-cards { grid-template-columns: 1fr; }
    .step { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
    .step-img { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; }
    .step-num { width: 1.9rem; height: 1.9rem; margin-bottom: 0.4rem; }
    .video-thumb { flex-basis: 136px; }
    .certified-banner { flex-direction: column; text-align: center; }
    .certified-banner-divider { width: 36px; height: 1px; }
    .money-line { flex-direction: column; gap: 0.2rem; }
}
.next-tiles-section { padding: var(--tr-pad) 0; }

/* DRV-07: "What your certificate shows", second on /, beside AVILOO's 2026 sample certificate */
.cert-summary { padding: clamp(3rem, 6vw, 4.5rem) 0; background: #ffffff; border-top: 1px solid #dfe8f1; }
.cert-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "title figure" "copy figure"; column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cert-summary-title { grid-area: title; align-self: end; }
.cert-summary-copy { grid-area: copy; align-self: start; max-width: 640px; }
.cert-summary-figure { grid-area: figure; }
.cert-summary .section-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: #031059; margin-bottom: 1.25rem; }
.cert-summary-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.cert-summary-list li { position: relative; padding-left: 1.4rem; color: #3a4257; line-height: 1.55; }
.cert-summary-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); }
.cert-summary-list strong { color: #031059; }
.cert-summary-link { margin: 0; }
.cert-summary-link a { color: #00688f; font-weight: 700; text-decoration: underline; }
.cert-summary-figure { margin: 0; text-align: center; }
.cert-summary-figure img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border: 1px solid var(--mid-gray); box-shadow: 0 20px 45px rgba(3, 16, 89, 0.14); }
.cert-summary-figure figcaption { font-size: 0.8rem; color: var(--text-gray); margin: 0.75rem auto 0; max-width: 300px; }
@media (max-width: 760px) {
    .cert-summary-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "figure" "copy"; }
    .cert-summary-figure { margin-bottom: 2rem; }
    .cert-summary-figure img { max-width: 240px; }
}
/* DRV-07: the review badge, when there is one, centred under the booking box */
.bk-section .proof-reviews--inline { text-align: center; }

/* DRV-10: the plate badge beside the booking registration (GB or IRL), as on the homepage plate. */
.bk-plate { display: flex; align-items: stretch; }
.bk-plate-flag {
    flex: 0 0 3.4rem; display: flex; align-items: center; justify-content: center;
    background: #04309b; color: #ffffff;
    font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em;
}
.bk-plate input { flex: 1 1 auto; min-width: 0; }

/* R9 (A11Y N3, N2/A11Y-03, WCAG 1.4.1): links inside running text are underlined, not told apart by
   colour alone: the /book/ consent line and the landing pages' closing note. */
.bk-consent a,
.landing-closing-note-text a { text-decoration: underline; text-underline-offset: 0.15em; }

/* R9 (A11Y N6): Windows contrast themes (forced colours). Things drawn only with a background
   vanish there, because the theme repaints backgrounds in the page colour: the menu button's three
   bars, and the chosen scorecard answer once focus has left it. They take system colours instead. */
@media (forced-colors: active) {
    .nav-hamburger span { forced-color-adjust: none; background: ButtonText; }
    .sc-opt.selected,
    .sc-q-card .sc-opt.selected { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline: 2px solid Highlight; outline-offset: 2px; }
    .bk-choice.is-selected { outline: 2px solid Highlight; outline-offset: 2px; }
    .tier-row-selected td:first-child { border-left: 3px solid Highlight; }
}