/* ==========================================================================
   Design system — uksponsorlist.co.uk
   Structure from the Sovereign Portal spec; colour palette from the
   Modern Slate spec (Slate Prime #2C3E50 + Teal accent #1ABC9C).
   Hand-authored static stylesheet shared by every page.
   ========================================================================== */

:root {
    /* Core palette — Modern Slate.
       Var names keep their original (Sovereign Portal) identifiers so every
       page keeps working; only the values changed:
       --deep-navy is now Slate Prime, --regal-gold the Teal accent,
       --heritage-teal the dark link teal. */
    --deep-navy: #2C3E50;
    --regal-gold: #1ABC9C;
    --heritage-teal: #006b58;
    --success-green: #00703C;
    --critical-red: #D4351C;
    --information-blue: #1D70B8;

    /* Surfaces */
    --surface: #f8f9ff;
    --surface-dim: #cbdbf5;
    --surface-lowest: #ffffff;
    --surface-low: #eff4ff;
    --surface-container: #e5eeff;
    --surface-high: #dce9ff;
    --surface-highest: #d3e4fe;
    --on-surface: #0b1c30;
    --on-surface-variant: #43474c;
    --outline: #74777d;
    --outline-variant: #c4c6cd;

    --primary: #162839;
    --on-primary: #ffffff;

    /* Type */
    --font-display: "Manrope", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-label: "IBM Plex Sans", "Segoe UI", sans-serif;

    /* Layout */
    --container-max: 1280px;
    --margin-desktop: 64px;
    --margin-mobile: 20px;
    --gutter: 24px;
    --section-gap: 80px;
    --stack-sm: 8px;
    --stack-md: 16px;
    --stack-lg: 32px;

    /* Shape */
    --r-sm: 0.125rem;
    --r: 0.25rem;
    --r-md: 0.375rem;
    --r-lg: 0.5rem;
    --r-xl: 0.75rem;

    --shadow-active: 0 4px 12px rgba(44, 62, 80, 0.08);
    --shadow-card: 0 8px 24px rgba(44, 62, 80, 0.08);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.sv {
    margin: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}
body.sv ::selection { background: var(--regal-gold); color: var(--deep-navy); }

.sv img { max-width: 100%; height: auto; }
.sv a { color: var(--heritage-teal); }
.sv a:hover { color: #008d74; }

.sv h1, .sv h2, .sv h3, .sv h4 {
    font-family: var(--font-display);
    color: var(--deep-navy);
    margin: 0 0 var(--stack-md);
    line-height: 1.25;
}
.sv h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.16; }
.sv h2 { font-size: 32px; font-weight: 700; }
.sv h3 { font-size: 24px; font-weight: 600; }
.sv h4 { font-size: 18px; font-weight: 700; }
.sv p { margin: 0 0 var(--stack-md); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* Accessibility */
.sv :focus-visible { outline: 3px solid var(--regal-gold); outline-offset: 2px; }
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--deep-navy); color: #fff; padding: 10px 18px;
    font-family: var(--font-label); font-weight: 600; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------- layout */
.sv-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
}
.sv-section { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.sv-section--tight { padding-top: 48px; padding-bottom: 48px; }

.sv-grid { display: grid; gap: var(--gutter); }
.sv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sv-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }

@media (max-width: 1023px) {
    .sv-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .sv-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .sv-container { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
    .sv-section { padding-top: 48px; padding-bottom: 48px; }
    .sv-grid--4, .sv-grid--3, .sv-grid--2 { grid-template-columns: 1fr; }
    .sv h1 { font-size: 30px; }
    .sv h2 { font-size: 24px; }
    .sv h3 { font-size: 20px; }
}

/* --------------------------------------------------------------- header */
/* Opaque, full-bleed and above AdSense auto-ad overlays: the sticky bar
   spans the full viewport width, so an opaque fill + very high z-index makes
   it paint over any side-rail/anchor ad that lands in its strip.

   AdSense auto ads insert an ad into .sv-header__inner and force it to
   `height:auto !important` AND `max-height:none !important` inline — no
   stylesheet using the height/max-height properties can win that. So we do
   NOT size the inner with height at all: the outer bar owns a fixed height,
   and the inner is absolutely stretched between top:0 and bottom:0. With both
   offsets set, the used height comes from the offsets, so Google's inline
   `height:auto`/`max-height:none` cannot grow it; overflow:hidden clips any
   injected ad, and the flex menu stays centred and intact. The mobile
   dropdown is position:fixed so overflow:hidden never clips it. */
.sv-header {
    position: sticky; top: 0; z-index: 2147483000;
    height: 73px;
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    box-shadow: 0 1px 0 rgba(44, 62, 80, 0.04);
}
.sv-header__inner {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gutter);
}
/* Our only legitimate header children are the brand, the nav and the mobile
   toggle. Anything else here is an ad AdSense auto-placed into the bar: pull
   it out of the flex row and behind the opaque header so it can never steal
   horizontal space from the menu or show through. Combined with the fixed
   bar height above, the menu layout is immune to whatever Google injects. */
.sv-header__inner > *:not(.sv-brand):not(.sv-nav):not(.sv-nav__toggle) {
    position: absolute !important;
    top: 100% !important; left: 0 !important;
    max-width: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
.sv-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 21px;
    color: var(--deep-navy) !important; text-decoration: none; letter-spacing: -0.01em;
    white-space: nowrap;
}
.sv-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r);
    background: var(--deep-navy); color: var(--regal-gold);
    font-size: 15px; font-weight: 800; letter-spacing: 0;
}
.sv-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sv-nav a {
    font-family: var(--font-label); font-size: 14px; font-weight: 500;
    color: var(--on-surface-variant); text-decoration: none;
    padding: 8px 10px; border-radius: var(--r);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.sv-nav a:hover { color: var(--heritage-teal); background: var(--surface-container); }
.sv-nav a[aria-current="page"] { color: var(--deep-navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--regal-gold); border-radius: var(--r) var(--r) 0 0; }
.sv-nav__toggle {
    display: none; background: none; border: 1px solid var(--outline-variant);
    border-radius: var(--r); padding: 7px 9px; cursor: pointer; color: var(--deep-navy);
}
@media (max-width: 1120px) {
    .sv-nav__toggle { display: inline-flex; align-items: center; }
    .sv-nav {
        display: none;
        position: fixed; left: 0; right: 0; top: 73px;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--surface-lowest);
        border-bottom: 1px solid var(--outline-variant);
        box-shadow: var(--shadow-card);
        padding: 10px var(--margin-mobile) 14px;
    }
    .sv-nav.open { display: flex; }
    .sv-nav a { padding: 12px 10px; font-size: 15px; }
    .sv-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--regal-gold); border-radius: var(--r); background: var(--surface-low); }
}

/* -------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-label); font-size: 14px; font-weight: 600;
    letter-spacing: 0.03em; text-decoration: none; cursor: pointer;
    border: none; border-radius: var(--r);
    padding: 14px 28px; transition: all 0.15s;
}
.btn--navy { background: var(--deep-navy); color: #fff !important; }
.btn--navy:hover { background: #22354a; box-shadow: var(--shadow-active); color: #fff; }
.btn--gold { background: var(--regal-gold); color: #fff !important; border-radius: var(--r-lg); box-shadow: var(--shadow-active); }
.btn--gold:hover { transform: scale(1.02); color: #fff; }
.btn--outline { background: transparent; color: #fff !important; border: 2px solid var(--regal-gold); border-radius: var(--r-lg); }
.btn--outline:hover { background: rgba(26, 188, 156, 0.15); color: #fff; }
.btn--teal { background: transparent; color: var(--heritage-teal) !important; border: 2px solid var(--heritage-teal); }
.btn--teal:hover { background: rgba(26, 188, 156, 0.10); }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- hero */
.sv-hero { background: var(--deep-navy); color: #fff; padding: var(--section-gap) 0; position: relative; overflow: hidden; }
.sv-hero::after {
    content: ""; position: absolute; right: -160px; top: -160px; width: 480px; height: 480px;
    border-radius: 50%; background: radial-gradient(circle, rgba(26, 188, 156, 0.12), transparent 70%);
    pointer-events: none;
}
.sv-hero h1 { color: #fff; font-size: 48px; max-width: 760px; }
.sv-hero p.lede { font-size: 18px; line-height: 1.55; opacity: 0.9; max-width: 640px; margin-bottom: var(--stack-lg); }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--stack-md); }
.sv-eyebrow {
    display: inline-block; background: var(--heritage-teal); color: #fff;
    font-family: var(--font-label); font-size: 12px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; margin-bottom: var(--stack-md); border-radius: var(--r-sm);
}
@media (max-width: 767px) { .sv-hero h1 { font-size: 32px; } }

/* Compact page hero for inner pages */
.sv-pagehero { background: var(--deep-navy); color: #fff; padding: 48px 0 40px; position: relative; overflow: hidden; }
.sv-pagehero::after {
    content: ""; position: absolute; right: -120px; top: -140px; width: 340px; height: 340px;
    border-radius: 50%; background: radial-gradient(circle, rgba(26, 188, 156, 0.11), transparent 70%);
    pointer-events: none;
}
.sv-pagehero h1 { color: #fff; margin-bottom: 6px; }
.sv-pagehero p.lede { opacity: 0.85; max-width: 720px; margin: 0; font-size: 17px; }
.sv-breadcrumbs {
    font-family: var(--font-label); font-size: 12px; letter-spacing: 0.04em;
    text-transform: uppercase; opacity: 0.75; margin-bottom: var(--stack-md);
}
.sv-breadcrumbs a { color: #fff; text-decoration: none; }
.sv-breadcrumbs a:hover { color: var(--regal-gold); }
.sv-breadcrumbs span { color: var(--regal-gold); }

/* ---------------------------------------------------------------- cards */
.sv-card {
    background: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg);
    padding: var(--stack-lg);
}
.sv-card--accent { border-left: 4px solid var(--heritage-teal); }
.sv-card--gold { border-left: 4px solid var(--regal-gold); }
.sv-card--blue { border-left: 4px solid var(--information-blue); }
.sv-card--navy { border-left: 4px solid var(--deep-navy); }
.sv-card--lift { box-shadow: var(--shadow-card); border: none; transition: transform 0.2s; }
.sv-card--lift:hover { transform: translateY(-4px); }
.sv-card .material-symbols-outlined.lead { font-size: 30px; margin-bottom: var(--stack-sm); }
.sv-card h3 { margin-bottom: var(--stack-sm); }
.sv-card p:last-child { margin-bottom: 0; color: var(--on-surface-variant); }

/* Quick-access cards overlapping the hero */
.sv-overlap { margin-top: -56px; position: relative; z-index: 20; }
@media (max-width: 767px) { .sv-overlap { margin-top: -32px; } }

/* ---------------------------------------------------------------- lists */
.sv-checklist { list-style: none; margin: 0 0 var(--stack-lg); padding-left: 1.35em; }
.sv-checklist li { margin-bottom: var(--stack-md); font-size: 17px; line-height: 1.55; }
.sv-checklist li::before {
    content: "\25A0"; color: var(--heritage-teal);
    display: inline-block; width: 1.35em; margin-left: -1.35em; font-size: 0.75em;
    transform: translateY(-1px);
}

/* Numbered process steps */
.sv-steps { position: relative; padding: 0; margin: 0; list-style: none; }
.sv-steps::before {
    content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px;
    width: 2px; background: var(--outline-variant);
}
.sv-steps li { position: relative; display: flex; gap: 24px; align-items: flex-start; margin-bottom: var(--stack-lg); }
.sv-steps li:last-child { margin-bottom: 0; }
.sv-steps .num {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--deep-navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
}
.sv-steps h4 { font-size: 19px; margin-bottom: 4px; }
.sv-steps p { color: var(--on-surface-variant); margin: 0; }

/* Points-based system rows */
.sv-points { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: var(--stack-lg); }
.sv-points__label {
    font-family: var(--font-label); font-size: 13px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-navy);
    opacity: 0.6; margin-bottom: var(--stack-sm);
}
.sv-point-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--surface-lowest); padding: var(--stack-md);
    border-left: 4px solid var(--success-green); margin-bottom: var(--stack-sm);
}
.sv-point-row--gold { border-left-color: var(--regal-gold); }
.sv-point-row .pts { font-weight: 700; color: var(--success-green); white-space: nowrap; font-family: var(--font-label); }
.sv-point-row--gold .pts { color: #00705c; }

/* -------------------------------------------------------------- chips */
.sv-chip {
    display: inline-block; font-family: var(--font-label); font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 9999px; white-space: nowrap;
    background: #e5eeff; color: var(--deep-navy);
}
.sv-chip--teal { background: #d9f6ee; color: var(--heritage-teal); }
.sv-chip--gold { background: #d9f6ee; color: #00705c; }
.sv-chip--green { background: #e2f1e8; color: var(--success-green); }
.sv-chip--red { background: #fbe4e0; color: var(--critical-red); }
.sv-chip--grey { background: var(--surface-highest); color: var(--on-surface-variant); }

/* --------------------------------------------------------------- band */
.sv-band { background: var(--deep-navy); color: #fff; }
.sv-band h2, .sv-band h3, .sv-band h4 { color: #fff; }
.sv-band p { opacity: 0.85; }
.sv-band__icon {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--stack-lg);
    box-shadow: var(--shadow-card);
}
.sv-band__icon .material-symbols-outlined { font-size: 36px; font-variation-settings: 'FILL' 1; }
.sv-band__icon--teal { background: var(--heritage-teal); }
.sv-band__icon--gold { background: var(--regal-gold); color: var(--deep-navy); }
.sv-band__icon--blue { background: var(--information-blue); }

/* -------------------------------------------------------------- sidebar */
.sv-sidebar { position: sticky; top: 96px; }
.sv-toollink {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface-lowest); border-radius: var(--r);
    font-family: var(--font-label); font-size: 14px; font-weight: 600;
    color: var(--deep-navy) !important; text-decoration: none;
    padding: var(--stack-md); margin-bottom: var(--stack-sm);
    border: 1px solid var(--outline-variant);
    transition: background 0.15s, color 0.15s;
}
.sv-toollink:hover { background: var(--heritage-teal); color: #fff !important; border-color: var(--heritage-teal); }
.sv-toollink .material-symbols-outlined { transition: transform 0.15s; font-size: 20px; }
.sv-toollink:hover .material-symbols-outlined { transform: translateX(3px); }
.sv-notice { background: var(--deep-navy); color: #fff; border-radius: var(--r-lg); padding: var(--stack-md); }
.sv-notice__kicker {
    font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; opacity: 0.7; margin-bottom: 8px;
}
.sv-notice p { font-weight: 600; margin-bottom: var(--stack-md); }

/* --------------------------------------------------------------- tables */
.sv-tablewrap { width: 100%; overflow-x: auto; background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); }
table.sv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.sv-table caption { text-align: left; padding: 14px 16px 4px; color: var(--on-surface-variant); font-size: 13px; }
table.sv-table th {
    font-family: var(--font-label); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-align: left; color: var(--deep-navy);
    background: var(--surface-low);
    padding: 12px 16px; border-bottom: 2px solid var(--outline-variant);
    white-space: nowrap;
}
table.sv-table td { padding: 12px 16px; border: none; vertical-align: top; }
table.sv-table tbody tr:nth-child(even) { background: #f3f7fd; }
table.sv-table tbody tr:hover { background: #EBF2F3; }
table.sv-table td ul { margin: 0; padding-left: 18px; }
table.sv-table td ul li { margin-bottom: 2px; }

/* DataTables integration (search, pagination, info) */
.sv .dataTables_wrapper .dataTables_filter input,
.sv div.dt-container .dt-search input,
.sv input.dt-input[type="search"] {
    font-family: var(--font-label); font-size: 14px;
    border: 2px solid var(--outline-variant); border-radius: var(--r);
    padding: 10px 14px; background: var(--surface-lowest); color: var(--on-surface);
    transition: border-color 0.15s;
    min-width: min(320px, 60vw);
}
.sv .dataTables_wrapper .dataTables_filter input:focus,
.sv div.dt-container .dt-search input:focus,
.sv input.dt-input[type="search"]:focus { outline: none; border-color: var(--heritage-teal); }
.sv .dataTables_wrapper .dataTables_filter label,
.sv div.dt-container .dt-search label { font-family: var(--font-label); font-weight: 600; color: var(--deep-navy); }
.sv .dataTables_wrapper .dataTables_info,
.sv div.dt-container .dt-info { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.sv .dataTables_wrapper .dataTables_paginate .paginate_button,
.sv div.dt-container .dt-paging button.dt-paging-button {
    font-family: var(--font-label) !important; font-size: 13px; font-weight: 600;
    border-radius: var(--r) !important; border: 1px solid transparent !important;
    background: none !important; color: var(--deep-navy) !important;
}
.sv .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.sv div.dt-container .dt-paging button.dt-paging-button.current {
    background: var(--deep-navy) !important; color: #fff !important;
}
.sv .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current),
.sv div.dt-container .dt-paging button.dt-paging-button:hover:not(.current):not(.disabled) {
    background: var(--surface-container) !important; color: var(--heritage-teal) !important;
}
.sv table.dataTable { border-collapse: collapse !important; }
.sv table.dataTable thead th { border-bottom: 2px solid var(--outline-variant); }

/* Generated pages: plain tables + az bar + pagination */
.sv table.gen-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); }
.sv table.gen-table th {
    font-family: var(--font-label); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; text-align: left; color: var(--deep-navy);
    background: var(--surface-low); padding: 11px 14px; border-bottom: 2px solid var(--outline-variant);
}
.sv table.gen-table td { padding: 10px 14px; }
.sv table.gen-table tbody tr:nth-child(even) { background: #f3f7fd; }

.sv .az-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--stack-md) 0 var(--stack-lg); }
.sv .az-bar a {
    font-family: var(--font-label); font-weight: 600; font-size: 13px;
    min-width: 34px; text-align: center; padding: 7px 9px;
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r); color: var(--deep-navy); text-decoration: none;
}
.sv .az-bar a:hover { border-color: var(--heritage-teal); color: var(--heritage-teal); }
.sv .az-bar a[aria-current="page"] { background: var(--deep-navy) !important; color: #fff !important; border-color: var(--deep-navy); }

.sv .pagination { font-family: var(--font-label); font-size: 14px; margin: var(--stack-lg) 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv .pagination a, .sv .pagination strong {
    min-width: 34px; text-align: center; padding: 6px 9px; border-radius: var(--r);
    text-decoration: none; border: 1px solid var(--outline-variant); background: var(--surface-lowest);
    color: var(--deep-navy); font-weight: 600;
}
.sv .pagination a:hover { border-color: var(--heritage-teal); color: var(--heritage-teal); }
.sv .pagination strong { background: var(--deep-navy); color: #fff; border-color: var(--deep-navy); }

/* ---------------------------------------------------------------- forms */
.sv-form label { display: block; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--deep-navy); margin-bottom: 8px; }
.sv-form select, .sv-form input[type="number"], .sv-form input[type="text"], .sv-form input[type="email"], .sv-form textarea {
    width: 100%; font-family: var(--font-label); font-size: 15px;
    color: var(--on-surface); background: var(--surface-lowest);
    border: 2px solid var(--outline-variant); border-radius: var(--r);
    padding: 12px 14px; transition: border-color 0.15s;
}
.sv-form select:focus, .sv-form input:focus, .sv-form textarea:focus { outline: none; border-color: var(--heritage-teal); }
.sv-form .field { margin-bottom: var(--gutter); }
.sv-form .hint { font-family: var(--font-label); font-size: 12.5px; color: var(--on-surface-variant); margin-top: 6px; }

.sv-radio-cards { display: flex; gap: var(--stack-md); flex-wrap: wrap; }
.sv-radio-cards label {
    flex: 1 1 160px; display: flex; align-items: center; gap: 10px;
    background: var(--surface-lowest); border: 2px solid var(--outline-variant);
    border-radius: var(--r); padding: 13px 16px; margin: 0; cursor: pointer;
    font-weight: 600; transition: border-color 0.15s, background 0.15s;
}
.sv-radio-cards input { accent-color: var(--heritage-teal); width: 17px; height: 17px; }
.sv-radio-cards label:has(input:checked) { border-color: var(--heritage-teal); background: #f2f9fa; }

/* Calculator results */
.sv-results { background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; }
.sv-results__head { background: var(--deep-navy); color: #fff; padding: 14px 20px; font-family: var(--font-display); font-weight: 700; }
.sv-results__row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--surface-high); }
.sv-results__row span:last-child { font-family: var(--font-label); font-weight: 600; }
.sv-results__row--total { background: #d9f6ee; border-bottom: none; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--deep-navy); }
.sv-results__row--total span:last-child { font-family: var(--font-display); }

/* ------------------------------------------------------------------ FAQ */
.sv-faq details {
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg); margin-bottom: var(--stack-sm); overflow: hidden;
}
.sv-faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px;
    align-items: center; padding: 16px 20px;
    font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--deep-navy);
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
    content: "add"; font-family: "Material Symbols Outlined"; font-size: 22px;
    color: var(--heritage-teal); flex-shrink: 0; transition: transform 0.2s;
}
.sv-faq details[open] summary::after { content: "remove"; }
.sv-faq details[open] summary { border-bottom: 1px solid var(--surface-high); }
.sv-faq details > p, .sv-faq details > div { padding: var(--stack-md) 20px; margin: 0; color: var(--on-surface-variant); }

/* --------------------------------------------------------------- footer */
.sv-footer { background: var(--primary); color: #fff; margin-top: var(--section-gap); }
.sv-footer__inner { display: flex; flex-wrap: wrap; gap: var(--stack-lg); justify-content: space-between; align-items: flex-start; padding: 40px 0; }
.sv-footer__brand { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.sv-footer__tag { font-family: var(--font-label); font-size: 13px; opacity: 0.6; margin-top: 6px; }
.sv-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 560px; }
.sv-footer nav a {
    font-family: var(--font-label); font-size: 13.5px; font-weight: 500;
    color: #fff; opacity: 0.8; text-decoration: none;
}
.sv-footer nav a:hover { color: var(--regal-gold); opacity: 1; }
.sv-footer__legal { font-family: var(--font-label); font-size: 12px; opacity: 0.45; padding-bottom: 28px; }
.sv-footer__legal a { color: #fff; }

/* --------------------------------------------------------- app promo */
.sv-promo { background: var(--surface-high); border-radius: var(--r-xl); overflow: hidden; padding: var(--stack-lg); text-align: center; }
.sv-promo img { border-radius: var(--r-lg); box-shadow: var(--shadow-card); margin: var(--stack-md) auto; display: block; }
.sv-promo__badges { display: flex; flex-wrap: wrap; gap: var(--stack-md); justify-content: center; margin-top: var(--stack-md); }

/* ---------------------------------------------------------- loader bits */
.sv .table-container { position: relative; }
.sv .loading-overlay {
    /* Hidden by default; firestore/recently bundles fadeIn/fadeOut it. */
    display: none; position: absolute; inset: 0; z-index: 30;
    background: rgba(248, 249, 255, 0.8);
}
.sv .loader-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sv .loader {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--surface-highest); border-top-color: var(--heritage-teal);
    animation: sv-spin 0.9s linear infinite; margin: 0 auto 10px;
}
.sv .loading-text { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); text-align: center; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------- generated hub pages */
.sv-pagehero--slim { padding: 18px 0; }
.sv-genpage { max-width: 1080px; }
.sv-genpage h1 { font-size: 32px; margin-bottom: var(--stack-md); }
.sv-genpage h2 { font-size: 24px; margin-top: var(--stack-lg); }
.sv-genpage > p { max-width: 820px; color: #303436; }
.sv .gen-cols { columns: 3 220px; column-gap: var(--gutter); list-style: none; padding: 0; margin: 0 0 var(--stack-lg); }
.sv .gen-cols li { margin-bottom: 8px; break-inside: avoid; }
.sv .gen-cols .cnt { font-family: var(--font-label); font-size: 12px; color: var(--on-surface-variant); }
.sv .city-group { margin-bottom: var(--stack-lg); }
.sv .city-group h2 { border-bottom: 2px solid var(--regal-gold); display: inline-block; padding-bottom: 2px; }
.sv .search-card {
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg); padding: var(--stack-md); margin-bottom: var(--stack-lg); max-width: 560px;
}
.sv .search-card label { display: block; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--deep-navy); margin-bottom: 8px; }
.sv .search-card input {
    width: 100%; font-family: var(--font-label); font-size: 15px;
    border: 2px solid var(--outline-variant); border-radius: var(--r); padding: 11px 14px;
    transition: border-color 0.15s;
}
.sv .search-card input:focus { outline: none; border-color: var(--heritage-teal); }
.sv .search-hint { font-family: var(--font-label); font-size: 12.5px; color: var(--on-surface-variant); margin: 8px 0 0; }
.sv .empty-card {
    background: var(--surface-low); border: 1px dashed var(--outline-variant); border-radius: var(--r-lg);
    padding: var(--stack-md); color: var(--on-surface-variant);
}
.sv .stat-row { display: flex; flex-wrap: wrap; gap: var(--stack-md); margin: 0 0 var(--stack-lg); }
.sv .stat-card {
    flex: 1 1 150px; background: var(--deep-navy); color: #fff;
    border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
}
.sv .stat-card .num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--regal-gold); }
.sv .stat-card .lbl { font-family: var(--font-label); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.sv .az-bar a.dim { opacity: 0.35; }
.sv .chip-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--stack-lg); }
.sv a.chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: 9999px; padding: 7px 8px 7px 14px;
    font-family: var(--font-label); font-size: 13.5px; font-weight: 600;
    color: var(--deep-navy); text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.sv a.chip:hover { border-color: var(--heritage-teal); color: var(--heritage-teal); }
.sv a.chip .cnt {
    background: var(--surface-container); border-radius: 9999px;
    font-size: 12px; font-weight: 600; color: var(--on-surface-variant);
    padding: 2px 9px;
}
.sv .data-note { margin-top: var(--stack-lg); }
.sv .route-list { list-style: none; padding: 0; }
.sv .route-list li { margin-bottom: 8px; }

/* ------------------------------------------------------------- helpers */
.sv-prose { max-width: 800px; }
.sv-prose p { font-size: 16.5px; color: #303436; }
.sv-prose > p:first-of-type { font-size: 18px; line-height: 1.6; }
.sv-prose ul:not(.sv-checklist) { padding-left: 22px; }
.sv-prose ul:not(.sv-checklist) li { margin-bottom: 8px; }
.sv-muted { color: var(--on-surface-variant); }
.sv-note { font-family: var(--font-label); font-size: 13px; color: var(--on-surface-variant); }
.sv-kicker {
    font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--heritage-teal); margin-bottom: var(--stack-sm);
}
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-lg { margin-top: var(--stack-lg) !important; }
.mb-lg { margin-bottom: var(--stack-lg) !important; }
.text-center { text-align: center; }

/* Reveal on scroll (progressive enhancement; only hidden once sovereign.js
   has tagged <html> with .sv-js, so content is never lost without JS) */
html.sv-js .sv-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; }
html.sv-js .sv-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.sv-js .sv-reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}