/*
    Design styles go here. Intentionally close to empty: the shell is unstyled.
    The only rules below exist so the unstyled shell is usable.
*/

/* =========================================================================
   Fonts — Montserrat, self-hosted (Latin subset, variable weight) so the
   page makes no third-party requests. Preloaded in _Layout.cshtml.
   ========================================================================= */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 700 900;
    font-display: swap;
    src: url("../fonts/montserrat-italic-latin.woff2") format("woff2");
}

/* =========================================================================
   Design tokens
   Every colour, font, size and radius used below comes from here.
   ========================================================================= */
:root {
    /* Fonts */
    --font-sans: "Montserrat", Helvetica, Arial, sans-serif;

    /* Brand */
    --color-primary: #1eb4f0;
    --color-primary-hover: #3cc4f7;
    --color-primary-shadow: rgba(30, 180, 240, 0.35);
    --color-primary-shadow-hover: rgba(30, 180, 240, 0.45);
    --color-link-hover: #6fd3ff;
    --color-on-primary: #ffffff;

    /* Blue buttons (Next, Submit, the landing link, chosen Yes/No, Elite's "Choose this option") */
    --color-button: #6fd3ff;
    --color-button-hover: #9be1ff;
    --color-button-shadow: rgba(111, 211, 255, 0.35);
    --color-button-shadow-hover: rgba(111, 211, 255, 0.45);
    --color-on-button: #000000;
    --color-button-pending: rgba(111, 211, 255, 0.4); /* Next/Submit while the step still needs an answer */

    /* Package tiers (the three header bars) */
    --color-elite: #1eb4f0;
    --color-elite-hover: #3cc4f7;
    --color-superior: #5cc81e;
    --color-superior-hover: #6fd62f;
    --color-basic: #ff8725;       /* lighter orange for contrast on the dark background */
    --color-basic-hover: #ff9c4a;

    /* Neutrals */
    --color-bg: #1b1c1e;
    --color-text: #ffffff;
    --color-text-soft: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.88);
    --color-text-faint: rgba(255, 255, 255, 0.72);
    --color-bg-dim: rgba(0, 0, 0, 0.35);              /* Darkens the background photos for contrast */
    --color-divider: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.12);
    --color-border-soft: rgba(255, 255, 255, 0.4);   /* Unselected Yes/No */
    --color-border-strong: rgba(255, 255, 255, 0.55); /* Landing card */
    --color-surface: rgba(20, 21, 23, 0.6);           /* Landing card */
    --color-surface-strong: rgba(20, 21, 23, 0.7);    /* Cards, question boxes */
    --color-inactive: rgba(255, 255, 255, 0.18);
    --color-modal: #232427;                           /* "Please note" box */
    --color-overlay: rgba(0, 0, 0, 0.65);             /* Dark layer behind the box */
    --color-error: #ff8a80;
    --color-error-bg: rgba(255, 138, 128, 0.12);
    --color-logo-plate: #ffffff;                      /* Behind the VA Insurance Services logo on Welcome */

    /* Images */
    --image-background: url("../images/background.jpg");
    --image-vehicle: url("../images/vehicle.jpg");
    --image-wheel: url("../images/wheel.jpg");
    --color-wheel-dim: rgba(27, 28, 30, 0.72);        /* Darkens the wheel photo on Signature */
    --image-car-mountains: url("../images/car-mountains.jpg");
    --color-car-dim: rgba(14, 15, 16, 0.78);          /* Darkens the car photo on Welcome */
    --image-showroom: url("../images/showroom.jpg");
    --color-showroom-dim: rgba(14, 15, 16, 0.86);     /* Darkens the showroom photo on Questions */
    --image-honeycomb-top-right: url("../images/honeycomb-top-right.svg");
    --image-honeycomb-bottom-left: url("../images/honeycomb-bottom-left.svg");
    --image-honeycomb-band: url("../images/honeycomb-band.svg");
    --image-honeycomb-cascade: url("../images/honeycomb-cascade.svg");
    --image-honeycomb-cascade-bottom-left: url("../images/honeycomb-cascade-bottom-left.svg");
    --image-honeycomb-right: url("../images/honeycomb-right.svg");
    --image-honeycomb-left: url("../images/honeycomb-left.svg");
    --image-honeycomb-diagonal: url("../images/honeycomb-diagonal.svg");
    --image-honeycomb-pricing-top-right: url("../images/honeycomb-pricing-top-right.svg");
    --image-honeycomb-pricing-bottom-left: url("../images/honeycomb-pricing-bottom-left.svg");
    --image-honeycomb-terms-top-right: url("../images/honeycomb-terms-top-right.svg");
    --image-honeycomb-terms-bottom-left: url("../images/honeycomb-terms-bottom-left.svg");

    /* Brochure motifs */
    --color-bar-border: rgba(255, 255, 255, 0.85);    /* Outline on every slanted bar */
    /* Every honeycomb is drawn at its SVG's own width times one shared scale, so a hex is the
       same size on every page. */
    --honeycomb-scale: 1;
    --size-honeycomb: calc(640px * var(--honeycomb-scale));          /* Page-corner hex clusters */
    --size-honeycomb-band: calc(1600px * var(--honeycomb-scale));    /* Bottom-edge strip, one repeat */
    --size-honeycomb-cascade: calc(720px * var(--honeycomb-scale));  /* Top-right falling hexes */
    --size-honeycomb-right: calc(1400px * var(--honeycomb-scale));   /* Packages: one set entering from the right */
    --size-honeycomb-left: calc(1000px * var(--honeycomb-scale));    /* Welcome: one set entering from the left */
    --size-honeycomb-diagonal: calc(1700px * var(--honeycomb-scale)); /* Packages: top-right down to bottom, centre-left */
    --size-honeycomb-pricing: calc(820px * var(--honeycomb-scale));   /* Pricing: the two corner sets */
    --color-rule: #9a9a9a;                            /* Grey rule under the header */

    /* Font sizes */
    --fs-display: clamp(40px, 7vw, 88px);        /* Landing "Vehicle Armour" */
    --fs-display-sub: clamp(28px, 4.6vw, 58px);  /* Landing "Appearance Protection" */
    --fs-display-alt: clamp(34px, 5.6vw, 72px);  /* Welcome headline */
    --fs-h1: clamp(30px, 4.6vw, 56px);           /* Wizard page titles */
    --fs-h3: 26px;                               /* "Please note" box title */
    --fs-card-title: 22px;                       /* Tier card headers */
    --fs-lead: 18px;                             /* Landing card text */
    --fs-question: 17px;                         /* Question labels */
    --fs-body: 16px;                             /* "Please note" box text */
    --fs-list: 15px;                             /* Coverage lists, Yes/No, buttons */
    --fs-eyebrow: 14px;                          /* "Get started" */
    --fs-caption: 13px;                          /* Video caption, "Selected" tag */
    --fs-footer: 12px;

    /* Radius */
    --radius-bar: 3px;       /* Header brand bars */
    --radius-btn-sm: 10px;   /* Yes/No buttons */
    --radius-btn: 12px;      /* Buttons */
    --radius-lg: 14px;       /* Landing card */
    --radius-xl: 16px;       /* Cards, "Please note" box */
    --radius-pill: 999px;    /* "Selected" tag */

    /* Spacing */
    --gutter: clamp(20px, 5vw, 64px);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --content-width: 1100px;
    --logo-height: clamp(32px, 6vw, 44px);

    /* Opacity */
    --opacity-label: 0.7;    /* "Selected:" */

    --transition: 150ms ease;

    color-scheme: dark;
}

/* =========================================================================
   Base
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* The background photo sits on a fixed layer: cheaper than background-attachment: fixed and works on iOS. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(var(--color-bg-dim), var(--color-bg-dim)),
        var(--color-bg) var(--image-background) center / cover no-repeat;
}

/* Signature: the wheel close-up from the brochure, darkened, fading to solid on the left so the
   form stays readable. */
body:has(.step-signature)::before {
    background:
        linear-gradient(90deg, var(--color-bg) 10%, var(--color-wheel-dim) 55%),
        var(--color-bg) var(--image-wheel) right center / cover no-repeat;
}

/* Questions: the dealership showroom photo, heavily darkened and partly desaturated so the bright
   white showroom sits back in the dark theme. */
body:has(.step-questions)::before {
    background:
        linear-gradient(var(--color-showroom-dim), var(--color-showroom-dim)),
        var(--color-bg) var(--image-showroom) 60% center / cover no-repeat;
    filter: grayscale(0.5);
}

/* Welcome: the black coupe in the mountains from the brochure, well darkened. */
body:has(.step-welcome)::before {
    background:
        linear-gradient(var(--color-car-dim), var(--color-car-dim)),
        var(--color-bg) var(--image-car-mountains) center 65% / cover no-repeat;
}

@media (max-width: 700px) {
    body:has(.step-welcome)::before {
        background-position: 0 0, 55% center;
    }

    body:has(.step-signature)::before {
        background:
            linear-gradient(rgba(27, 28, 30, 0.82), rgba(27, 28, 30, 0.82)),
            var(--color-bg) var(--image-wheel) 70% center / cover no-repeat;
    }
}

/* A touch of the brochure's honeycomb, in one of three styles depending on the page:
   corners (clusters from the top-right and bottom-left), band (small hexes along the bottom edge)
   or cascade (larger outlined hexes falling from the top-right). */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body:has(.step-welcome)::after {
    background: var(--image-honeycomb-left) left bottom calc(-260px * var(--honeycomb-scale)) / var(--size-honeycomb-left) auto no-repeat;
}

body:has(.step-complete)::after {
    background:
        var(--image-honeycomb-top-right) right top / var(--size-honeycomb) auto no-repeat,
        var(--image-honeycomb-bottom-left) left bottom / var(--size-honeycomb) auto no-repeat;
}

body:has(.step-packages)::after {
    background: var(--image-honeycomb-diagonal) right top / var(--size-honeycomb-diagonal) auto no-repeat;
}

/* Pricing: clustered sets in the top-right and bottom-left corners, densest at each corner. */
body:has(.step-pricing)::after {
    background:
        var(--image-honeycomb-pricing-top-right) right top / var(--size-honeycomb-pricing) auto no-repeat,
        var(--image-honeycomb-pricing-bottom-left) left bottom / var(--size-honeycomb-pricing) auto no-repeat;
}

/* Terms: the same two-corner treatment as Pricing, in a different arrangement. */
body:has(.step-terms)::after {
    background:
        var(--image-honeycomb-terms-top-right) right top / var(--size-honeycomb-pricing) auto no-repeat,
        var(--image-honeycomb-terms-bottom-left) left bottom / var(--size-honeycomb-pricing) auto no-repeat;
}

body:has(.step-landing)::after {
    background: var(--image-honeycomb-band) left bottom / var(--size-honeycomb-band) auto repeat-x;
}

body:has(.step-video)::after,
body:has(.step-questions)::after {
    background: var(--image-honeycomb-cascade) right top / var(--size-honeycomb-cascade) auto no-repeat;
}

/* Signature: the same cascade turned around, rising from the bottom-left corner. */
body:has(.step-signature)::after {
    background: var(--image-honeycomb-cascade-bottom-left) left bottom / var(--size-honeycomb-cascade) auto no-repeat;
}

@media (max-width: 700px) {
    :root {
        --honeycomb-scale: 0.6;
    }

    body::after {
        opacity: 0.6;
    }
}

h1,
h2,
h3 {
    margin: 0 0 var(--space-4);
    line-height: 1.1;
}

h1 {
    font-size: var(--fs-h1);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.98;
}

h2 {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h3 {
    font-size: var(--fs-question);
    font-weight: 700;
    margin-top: var(--space-5);
}

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-primary);
}

.text-brand {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-link-hover);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================================================
   Layout
   ========================================================================= */
.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--gutter);
}

/* The brochure's grey rule, fading out at both ends. */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-rule);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    opacity: 0.7;
}

.site-logo {
    display: block;
    height: var(--logo-height);
    width: auto;
}

.brand-bars {
    display: flex;
    gap: 6px;
}

.brand-bars > span {
    width: 28px;
    height: 6px;
    border-radius: var(--radius-bar);
    background: var(--color-elite);
}

.brand-bars > span:nth-child(2) {
    background: var(--color-superior);
}

.brand-bars > span:nth-child(3) {
    background: var(--color-basic);
}

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--space-7) var(--gutter) var(--space-7);
}

.site-footer {
    padding: 20px var(--gutter);
    border-top: 1px solid var(--color-divider);
    font-size: var(--fs-footer);
    color: var(--color-text-faint);
}

/* =========================================================================
   Landing page (Pages/Index.cshtml)
   ========================================================================= */
.site-main:has(.step-landing) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(48px, 10vh, 120px);
}

.step-landing {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.step-landing > p {
    margin: 0;
}

.landing-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.landing-title-brand {
    font-size: var(--fs-display);
    font-weight: 900;
    color: var(--color-primary);
}

.landing-title-product {
    font-size: var(--fs-display-sub);
    font-weight: 700;
}

.landing-card {
    max-width: 620px;
    padding: 22px 26px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.landing-card p {
    margin: 0;
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    text-wrap: pretty;
}

.landing-card .eyebrow {
    margin-bottom: 10px;
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Decorations: behind the content, positioned against <body>. */
.landing-photo,
.landing-bars {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.landing-photo {
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    background:
        linear-gradient(var(--color-bg-dim), var(--color-bg-dim)),
        var(--image-vehicle) 70% 55% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.landing-bars {
    bottom: 72px;
    right: clamp(-200px, calc(50vw - 760px), 0px);
    display: flex;
    gap: 7px;
    opacity: 0.9;
}

.landing-bars > span {
    width: 28px;
    height: 80px;
    transform: skewX(-18deg);
    border: 2px solid var(--color-bar-border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-primary) var(--fill, 100%), transparent);
}

.landing-bars > span:nth-child(2) { --fill: 82%; }
.landing-bars > span:nth-child(3) { --fill: 64%; }
.landing-bars > span:nth-child(4) { --fill: 46%; }
.landing-bars > span:nth-child(5) { --fill: 30%; }
.landing-bars > span:nth-child(6) { --fill: 16%; }

@media (max-width: 700px) {
    .landing-photo {
        width: 100%;
        opacity: 0.45;
    }

    .landing-bars {
        display: none;
    }
}

/* =========================================================================
   Welcome step
   ========================================================================= */
.step-welcome {
    padding-top: var(--space-7);
}

.step-welcome h1 {
    font-size: var(--fs-display-alt);
}

/* The slanted bar strip from the brochure's "Elite Protection" mark, dark to bright blue. */
.bar-strip {
    display: flex;
    gap: 3px;
    width: min(276px, 100%);
    height: 44px;
    margin: 0 0 var(--space-6) 8px;
}

.bar-strip > span {
    flex: 1;
    transform: skewX(-18deg);
    border: 2px solid var(--color-bar-border);
    border-radius: var(--radius-bar);
    background: color-mix(in srgb, var(--color-primary) calc(10% + var(--i) * 75% / 11), transparent);
}

/* Wizard page titles get the brochure's short blue rule underneath. */
.step:not(.step-landing) h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    margin-top: var(--space-4);
    border-radius: var(--radius-bar);
    background: linear-gradient(90deg, var(--color-primary), var(--color-button));
}

/* =========================================================================
   Buttons
   ========================================================================= */
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 48px;
    padding: 16px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: var(--fs-list);
    font-style: italic;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-on-button);
    background: var(--color-button);
    box-shadow: 0 6px 20px var(--color-button-shadow);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

button:hover,
.button:hover {
    color: var(--color-on-button);
    background: var(--color-button-hover);
    box-shadow: 0 10px 26px var(--color-button-shadow-hover);
    transform: translateY(-1px);
}

/* Forward actions get the design's arrow: the landing link and every Next/Submit in a step's nav. */
.step-landing .button::after,
.step-nav > .button:not(.button-secondary)::after,
.step-nav > button::after,
.step-nav > form > button::after {
    content: "→";
    content: "→" / ""; /* decorative: not read out by screen readers where supported */
    font-style: normal;
    font-size: var(--fs-lead);
    line-height: 1;
}

/* Back links point the other way, arrow first. */
.step-nav > .button-secondary::before {
    content: "←";
    content: "←" / "";
    font-style: normal;
    font-size: var(--fs-lead);
    line-height: 1;
}

.button-secondary,
.signature-clear {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border-soft);
    box-shadow: none;
}

.button-secondary:hover,
.signature-clear:hover {
    color: var(--color-text);
    background: var(--color-inactive);
    box-shadow: none;
}

.step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* A lone forward action (e.g. Welcome's button) sits on the right; a lone Back stays left. */
.step-nav > :only-child:not(.button-secondary) {
    margin-left: auto;
}

.step-welcome .step-nav > :only-child {
    margin-left: 0;
}

/* Welcome: the button sits beside the "Available exclusively through VAISI" line and logo,
   split by a thin vertical rule. Both stay on one line, so this row alone may run past the
   content width into the right-hand space, up to the page gutter. When it can't fit, the badge
   wraps under the button. The nav clips its padding edge, which hides the rule once the badge
   starts a line; the padding (bled back out with negative margins) keeps the button's shadow. */
.step-welcome .step-nav {
    --nav-bleed-x: 20px;
    --nav-bleed-y: 40px;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-5) calc(var(--space-5) * 2);
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter) - max(0px, (100vw - var(--content-width)) / 2) + 2 * var(--nav-bleed-x));
    margin: calc(var(--space-6) - var(--nav-bleed-y)) calc(-1 * var(--nav-bleed-x)) calc(-1 * var(--nav-bleed-y));
    padding: var(--nav-bleed-y) var(--nav-bleed-x);
    overflow: hidden;
}

/* Each item keeps its natural one-line width and only wraps its text when that alone can't fit
   (zoom, larger text spacing), so nothing is ever clipped by the nav. */
.step-welcome .step-nav > .button {
    flex: 0 1 auto;
    min-width: 0;
}

.vaisi-badge {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-left: calc(-1 * (var(--space-5) + 1px));
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border-soft);
}

.vaisi-badge p {
    margin: 0;
    font-size: var(--fs-list);
    font-weight: 700;
    color: var(--color-text);
}

/* The logo is drawn for a white background, so it gets its own white plate. */
.vaisi-badge img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-bar);
    background: var(--color-logo-plate);
}

/* Phones: the button's text is too long for one line here, so it wraps; the badge takes the
   full width under it and its line shrinks to fit. */
@media (max-width: 700px) {
    .step-welcome .step-nav {
        width: auto;
    }

    .vaisi-badge {
        flex: 1 1 100%;
        container-type: inline-size;
    }

    /* The 13px floor is in px so browser zoom still enlarges it; below that the line wraps. */
    .vaisi-badge p {
        font-size: max(13px, min(var(--fs-list), 3.1cqi));
    }
}

/* Next/Submit fades while the step still needs an answer. Visual only: the button still submits
   and the server's validation messages still appear. The signature drawing can't be seen from CSS,
   so the Signature step tracks the name and both checkboxes. */
.questions-form:not(:has([name="HasRunFlatTires"]:checked)) .step-nav button[type="submit"],
.questions-form:not(:has([name="HasCarbonFibreRims"]:checked)) .step-nav button[type="submit"],
.questions-form:has(#carbon-fibre-yes:checked):not(:has(#carbon-fibre-ack:checked)) .step-nav button[type="submit"],
.step-packages:not(:has(.package.selected)) .step-nav button[type="submit"],
.step-pricing form:not(:has([name="FactorTableId"]:checked)) .step-nav button[type="submit"],
.step-terms form:not(:has([name="Accepted"]:checked)) .step-nav button[type="submit"],
.step-signature form:has([name="SignedName"]:placeholder-shown) .step-nav button[type="submit"],
.step-signature form:not(:has([name="ReleaseToDealerAuthorized"]:checked)) .step-nav button[type="submit"],
.step-signature form:not(:has([name="StatementsConfirmed"]:checked)) .step-nav button[type="submit"] {
    /* Only the fill fades; the text stays white so it still passes contrast (WCAG 1.4.3). */
    color: var(--color-text);
    background: var(--color-button-pending);
    box-shadow: none;
    transform: none;
}

/* =========================================================================
   Validation messages
   ========================================================================= */
.step-errors.validation-summary-errors {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-btn-sm);
    color: var(--color-error);
    background: var(--color-error-bg);
}

.step-errors ul {
    margin: 0;
    padding-left: var(--space-5);
}

/* site.js focuses the box after a failed submit; its own red border is the only highlight it needs.
   It isn't in the Tab order, so this hides no keyboard focus. */
.step-errors:focus,
.step-errors:focus-visible {
    outline: none;
}

.step-errors-title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-question);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.step-errors a {
    color: inherit;
    text-decoration: underline;
}

.step-errors a:hover {
    color: var(--color-text);
}

/* A field with an error gets the error colour on its box. */
.step fieldset:has([aria-invalid="true"]),
.step form > label:has(> [aria-invalid="true"]),
.step input[type="text"][aria-invalid="true"] {
    border-color: var(--color-error);
}

/* =========================================================================
   Video
   ========================================================================= */
.coverage-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    background: #000;
}

/* =========================================================================
   Packages
   ========================================================================= */
.package-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}

.package {
    --tier: var(--color-primary);
    --tier-hover: var(--color-primary-hover);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-top: 4px solid var(--tier);
    border-radius: var(--radius-xl);
    background: var(--color-surface-strong);
}

.package-elite {
    --tier: var(--color-elite);
    --tier-hover: var(--color-elite-hover);
}

.package-superior {
    --tier: var(--color-superior);
    --tier-hover: var(--color-superior-hover);
}

.package-tire-and-rim {
    --tier: var(--color-basic);
    --tier-hover: var(--color-basic-hover);
}

.package h2 {
    font-size: var(--fs-card-title);
    color: var(--tier);
}

.package.selected h2 {
    padding-right: 90px; /* room for the "Selected" tag */
}

.package ul {
    flex: 1;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    font-size: var(--fs-list);
    color: var(--color-text-soft);
}

.package li {
    position: relative;
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
}

.package li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 800;
    color: var(--tier);
}

/* Black text on every tier colour: white fails contrast on the green and orange. */
.package button {
    width: 100%;
    color: var(--color-on-button);
    background: var(--tier);
    box-shadow: none;
}

.package button:hover {
    color: var(--color-on-button);
    background: var(--tier-hover);
    box-shadow: none;
}

.package-elite button {
    background: var(--color-button);
}

.package-elite button:hover {
    background: var(--color-button-hover);
}

.package.selected {
    border-color: var(--tier);
    box-shadow: 0 0 0 1px var(--tier);
}

.package.selected::after {
    content: "Selected";
    content: "Selected" / ""; /* screen readers get "(currently selected)" from the heading instead */
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: 0 calc(var(--space-3) - 2px); /* same outer size as before, less the border */
    border: 2px solid var(--tier);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: 800;
    color: var(--color-text);
}

/* =========================================================================
   Selected package (steps after Packages, Pages/Wizard/_SelectedPackage.cshtml)
   Only the badge carries the tier colour; the rest of the page keeps the brand colours.
   ========================================================================= */
.selected-package {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-lead);
    font-style: italic;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.selected-label {
    opacity: var(--opacity-label);
}

.selected-pill {
    --tier: var(--color-primary);
    padding: calc(var(--space-2) - 2px) calc(20px - 2px); /* same outer size as before, less the border */
    border: 2px solid var(--tier);
    border-radius: var(--radius-pill);
    color: var(--color-text);
}

.selected-pill.tier-elite {
    --tier: var(--color-elite);
}

.selected-pill.tier-superior {
    --tier: var(--color-superior);
}

.selected-pill.tier-tire-and-rim {
    --tier: var(--color-basic);
}

/* =========================================================================
   Forms: questions, pricing, terms, signature
   ========================================================================= */
fieldset {
    margin: 0 0 var(--space-4);
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-strong);
}

legend {
    float: left; /* keeps the legend inside the box rather than on its border */
    width: 100%;
    margin-bottom: var(--space-4);
    padding: 0;
    font-size: var(--fs-question);
    font-weight: 700;
}

legend + * {
    clear: both;
}

label {
    display: block;
    margin-bottom: var(--space-3);
    cursor: pointer;
}

input[type="text"] {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-btn-sm);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface-strong);
}

input[type="text"]:focus-visible {
    border-color: var(--color-primary);
}

/* Checkbox statements (Terms, Signature): a large box beside the text, the whole row clickable. */
form > label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-btn-sm);
    color: var(--color-text);
    background: var(--color-surface-strong);
}

form > label:has(> input[type="checkbox"]:checked) {
    border-color: var(--color-primary);
}

form > label > input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 var(--space-2) 0 0;
    vertical-align: -3px;
    accent-color: var(--color-primary);
}

/* Question boxes carry the design's white border. */
.questions-form fieldset {
    border-color: var(--color-border-strong);
}

/* Yes/No answers render as buttons. The radio stays in the form, just out of sight. */
.questions-form fieldset label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 48px;
    margin: 0 var(--space-3) 0 0;
    padding: var(--space-2) var(--space-5);
    border: 1.5px solid var(--color-border-soft);
    border-radius: var(--radius-btn-sm);
    font-size: var(--fs-list);
    font-weight: 700;
    transition: background-color var(--transition), border-color var(--transition);
}

.questions-form fieldset label:hover {
    background: var(--color-inactive);
}

.questions-form fieldset label:has(:checked) {
    border-color: var(--color-button);
    color: var(--color-on-button);
    background: var(--color-button);
}

.questions-form fieldset label:has(:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.questions-form fieldset input[type="radio"],
.dialog label.button input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Pricing choices */
.price-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1.5px solid var(--color-border-soft);
    border-radius: var(--radius-btn-sm);
    font-size: var(--fs-list);
    transition: border-color var(--transition), background-color var(--transition);
}

.price-option:hover {
    background: var(--color-inactive);
}

.price-option:has(:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.price-option .price {
    margin-left: auto;
    font-size: var(--fs-card-title);
    font-weight: 800;
    color: var(--color-primary);
}

/* Terms */
.terms-heading {
    font-size: var(--fs-question);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* The scrolling box around the terms; focusable so it can be scrolled from the keyboard. */
.terms-scroll {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-strong);
}

.terms-scroll:focus-visible {
    border-color: var(--color-primary);
}

.terms-body {
    font-size: var(--fs-list);
    color: var(--color-text-muted);
}

.terms-body h3 {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.terms-body strong {
    color: var(--color-text);
}

/* Signature */
.purchase-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-strong);
}

.purchase-summary dt {
    color: var(--color-text-soft);
}

.purchase-summary dd {
    margin: 0;
    font-weight: 700;
}

/* On a solid card so the long legal text never sits directly on the background photo. */
.declaration {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    font-size: var(--fs-list);
    line-height: 1.6;
    color: var(--color-text-soft);
    background: var(--color-surface-strong);
}

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

.signature {
    margin-bottom: var(--space-5);
}

.signature-label {
    margin-bottom: var(--space-1);
    font-size: var(--fs-question);
    font-weight: 700;
}

.signature-hint {
    margin-bottom: var(--space-3);
    font-size: var(--fs-list);
    color: var(--color-text-soft);
}

[data-signature] canvas {
    margin-bottom: var(--space-3);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-btn-sm);
}

.signature-date {
    color: var(--color-text-soft);
}

/* =========================================================================
   Dialogs (visibility is controlled by behaviour.css and Datastar)
   ========================================================================= */
.dialog-backdrop {
    background: var(--color-overlay);
}

.dialog {
    max-width: 32rem;
    width: calc(100% - 2rem);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    font-size: var(--fs-body);
    text-align: center;
    color: var(--color-text);
    background: var(--color-modal);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dialog-title {
    font-size: var(--fs-h3);
    color: var(--color-primary);
}

.dialog .button {
    min-width: 140px;
    margin: var(--space-2) 0 0;
}

/* The carbon fibre "OK" is a hidden checkbox inside the label, so the label shows the focus ring. */
.dialog label.button:has(:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Text for screen readers only. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }

    button:hover,
    .button:hover {
        transform: none;
    }
}