/* Car History - carhistory.co.uk
   Photo-led, clean layout. Teal + cobalt on mist, night navy for overlays. Archivo at two widths. */

/* Archivo (SIL OFL), self-hosted variable font: widths 100-125%, weights 300-900. Latin is preloaded in Site.master. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 300 900;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 300 900;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Charles Wright";
    /* _v2: vertical metrics corrected so phones match Windows (the original's Apple/Android metrics were 800/-200 vs
       Windows 1100/300, which drew plate text high on phones). No WOFF2 of the corrected font (needs Brotli tooling). */
    src: url("../fonts/charles_bold_v2.woff") format("woff"),
         url("../fonts/charles_bold_v2.otf") format("opentype");
    font-weight: 200;
    font-display: swap;
}

:root {
    --teal: #0E8C8A;
    --teal-deep: #0A6467;
    --teal-soft: #E2F3F2;
    --teal-bright: #4FC9C5;
    --blue: #2F5BD8;
    --blue-deep: #1F3F9E;
    --blue-soft: #E8EEFC;
    --night: #0D1B2A;
    --night-2: #15293C;
    --bg: #F5F8F9;
    --surface: #FFFFFF;
    --ink: #102030;
    --ink-soft: #34495A;
    --muted: #5B6B78;
    --line: #DCE4E8;
    --line-soft: #EBF0F2;
    --plate-band: #1E4BA0;
    --plate-yellow: #FFCC00;

    --pass: #13795B;
    --pass-bg: #E3F4EE;
    --warn: #A15C07;
    --warn-bg: #FDF1E0;
    --warn-solid: #D97706;
    --lh-sub: 1.4;
    --fail: #C02D2D;
    --fail-bg: #FCE9E9;
    --unknown: #5B6B78;
    --unknown-bg: #EDF1F3;

    --font: "Archivo", "Segoe UI", system-ui, sans-serif;
    --font-plate: "Charles Wright", "Archivo", "Arial Narrow", sans-serif;
    --wide: 118%;

    --wrap: 1200px;
    --r-lg: 22px;
    --r-md: 14px;
    --r-sm: 8px;
    --shadow-lift: 0 24px 48px -28px rgba(13, 27, 42, .45);
    --focus: 0 0 0 3px #fff, 0 0 0 6px var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

h1, h2, h3 { font-stretch: var(--wide); font-weight: 750; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }
/* Large screens: 88% of the browser width, never narrower than the standard 1200px */
@media (min-width: 1280px) { .wrap { max-width: max(var(--wrap), 88vw); } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: #fff; color: var(--ink); padding: 10px 14px; z-index: 20; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
.lede { color: var(--muted); font-size: 1.1rem; }

/* ---------- Header ---------- */
.masthead { background: var(--night); border-bottom: 1px solid rgba(255, 255, 255, .14); position: relative; z-index: 10; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 76px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
/* Over a photo hero (home and check pages set by Site.master.vb, any other page opening with one): translucent navy */
.masthead--overlay,
.masthead:has(+ main > .photo-hero:first-child) { position: absolute; top: 0; left: 0; right: 0; background: rgba(13, 27, 42, .6); }

/* Logo: teal icon image (/images/brand/icon-teal.svg) plus live text, on the navy header and footer. */
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: 46px; height: 46px; flex: none; display: block; }
.brand-name { font-stretch: var(--wide); font-size: 1.7rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand-name b { font-weight: 900; letter-spacing: -.025em; }
.brand-name span { font-weight: 300; margin-left: .1em; }
.masthead .brand, .masthead .brand:hover { color: #fff; }

.topnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topnav a { color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; font-size: .97rem; padding: 8px 12px; border-radius: var(--r-sm); }
.topnav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.topnav .btn { margin-left: 6px; }
.nav-toggle { display: none; }
/* Phones and small tablets: the menu folds behind a burger button beside the logo (js/site.js); without JS it stays open */
@media (max-width: 859px) {
    .masthead-inner { flex-wrap: wrap; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.2rem; cursor: pointer; }
    .nav-toggle:hover { background: rgba(255, 255, 255, .16); }
    .topnav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; padding: 6px 0 4px; border-top: 1px solid rgba(255, 255, 255, .14); }
    .topnav a, .topnav .btn { padding: 12px; font-size: 1rem; margin-left: 0; }
    .topnav .btn { margin-top: 6px; justify-content: center; }
    .topnav .nav-signin, .topnav .btn { padding: 14px 12px; line-height: 1; font-weight: 650; }
    .topnav .nav-signin { margin-top: 6px; text-align: center; background: rgba(255, 255, 255, .12); }
    .topnav .nav-signin + .btn { margin-top: 8px; }
    .js .topnav { display: none; }
    .js .masthead.nav-open .topnav { display: flex; }
    .masthead.nav-open { background: var(--night); }
    /* Open over a photo hero: dark translucent, with the photo blurred behind */
    .masthead--overlay.nav-open,
    .masthead.nav-open:has(+ main > .photo-hero:first-child) { background: rgba(13, 27, 42, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: 650 1rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
    padding: 15px 22px; border-radius: var(--r-sm); border: 0;
    transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); color: #fff; }
.btn-quiet { background: rgba(14, 140, 138, .1); color: var(--teal-deep); }
.btn-quiet:hover { background: rgba(14, 140, 138, .18); color: var(--teal-deep); }
.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn-small { padding: 10px 14px; font-size: .92rem; }
.btn-block { width: 100%; }

/* ---------- Number plate (UK rear plate) ---------- */
.plate {
    display: inline-flex; align-items: stretch;
    background: var(--plate-yellow); color: #0A0A0A;
    border: 0; border-radius: 6px; overflow: hidden;
    vertical-align: middle;
}
/* Identifier band: Union Jack (2:1) at the top, "GB" at the bottom. Sizes are in band-ems so they scale with every plate size. */
.plate-band {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4em;
    background: var(--plate-band); color: #fff;
    font: 700 .42em/1 var(--font); font-stretch: 100%; letter-spacing: .04em;
    width: 3.1em; flex: 0 0 auto; padding: .68em 0 .45em;
}
.plate-band::before {
    content: ""; width: 1.9em; height: .95em; flex: 0 0 auto; border-radius: .1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0v30h60v-30z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.plate-text { font-family: var(--font-plate); font-weight: 700; letter-spacing: .04em; padding: .2em .5em; line-height: 1.25; white-space: nowrap; }
.plate--sm { font-size: 1rem; border-radius: 5px; }
.plate--md { font-size: 1.5rem; }
.plate--lg { font-size: clamp(2rem, 4vw, 2.6rem); border-radius: 9px; }

.plate--input { font-size: clamp(1.7rem, 4vw, 2.2rem); flex: 1 1 260px; min-width: 0; border: 0; border-radius: 10px; }
.plate--input:focus-within { box-shadow: 0 0 0 3px var(--teal); }
.plate-field {
    flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: #0A0A0A;
    font-family: var(--font-plate); font-weight: 700; font-size: 1em; letter-spacing: .06em; text-transform: uppercase;
    text-align: center; padding: .2em .4em; outline: none;
}
.plate-field::placeholder { color: rgba(16, 32, 48, .28); }

/* Plate styles by place, so each can be tweaked on its own. They start with the values the shared rules above give them. */
/* Lookups over photo heroes: home hero and "Viewing a car this week?" band, check landing pages, guides band */
.plate--hero { font-size: clamp(1.7rem, 4vw, 2.2rem); border-radius: 10px; }
/* Right padding = the band's width (1.3em), so the text is centred on the whole plate */
.plate--hero .plate-field { letter-spacing: .06em; padding: .2em 1.3em .2em 0; }
.plate--hero .plate-band { padding-top: .68em; padding-bottom: .68em; }
.plate--hero:focus-within { box-shadow: 0 0 0 3px var(--teal); }
/* Lookups in the sidebar cards: guides and information pages */
.plate--aside { font-size: 1.7rem; border-radius: 10px; }
/* Right padding = the band's width (3.1em x .42 = 1.3em), so the text is centred on the whole plate, in line with the button below */
.plate--aside .plate-field { letter-spacing: .06em; padding: .2em 1.3em .2em 0; }
/* The band's contents sit at the bottom, so extra bottom padding lifts the flag and GB together (.4em is about 4.5px here) */
.plate--aside .plate-band { padding-bottom: .85em; }
.plate--aside:focus-within { box-shadow: 0 0 0 3px var(--teal); }
/* Smaller lookups on the check page ("Not the car you meant?", "No vehicle found"). The same band and centring changes
   as the sidebar plate; they're in ems, so they scale with this smaller plate. */
.plate--check .plate-band { padding-top: .5em; padding-bottom: 1.05em; }
.plate--check .plate-field { letter-spacing: .06em; padding: .2em 1.3em .2em 0; }
/* Large display plates (check page vehicle panel, report header without a photo): the flag and GB lifted a little */
.plate--lg .plate-band { padding-top: .68em; padding-bottom: .68em; }
/* Display plate at the top of a report: large without a car photo (.plate--lg), smaller under the photo (.plate--md) */
.plate--report.plate--lg { font-size: clamp(2rem, 4vw, 2.6rem); border-radius: 9px; }
.plate--report.plate--md { font-size: 1.5rem; border-radius: 6px; }
.plate--report .plate-text { letter-spacing: .04em; padding: .2em .5em; }
/* Under the car photo: the flag and GB lifted about 1.5px (.15em of the band) */
.plate--report.plate--md .plate-band { padding-bottom: .6em; }

/* The frosted lookup bar used over photos */
.lookup {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; max-width: 600px;
    padding: 10px; border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lookup .btn { padding-left: 24px; padding-right: 24px; font-size: 1.05rem; flex: 0 0 auto; }

/* ---------- Photo heroes ---------- */
.photo-hero {
    position: relative; isolation: isolate; color: #fff;
    background-color: var(--night); background-size: cover; background-position: right center;
}
.photo-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(13, 27, 42, .9) 0%, rgba(13, 27, 42, .55) 45%, rgba(13, 27, 42, 0) 100%);
}
.photo-hero h1, .photo-hero h2 { color: #fff; }
.photo-hero p { color: rgba(255, 255, 255, .82); max-width: 66ch; }
.photo-hero .field-error { color: #FFD3D3; }

.hero-home {
    background-image: url("../images/hero-road-night.jpg");
    background-position: right center;
    min-height: min(92vh, 820px);
    display: flex; align-items: center;
    padding-top: 140px; padding-bottom: 72px;
}
.hero-home::before { background: linear-gradient(100deg, var(--night) 0%, rgba(13, 27, 42, .9) 45%, rgba(10, 100, 103, .72) 100%); }
.hero-home h1 { max-width: 13ch; font-size: clamp(2.6rem, 6vw, 4.6rem); }
/* Search keyword inside the H1, styled as a small label above the headline */
.hero-kicker { display: block; margin-bottom: .55em; font-size: max(.95rem, .26em); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-bright); }
.hero-home .lede { color: rgba(255, 255, 255, .84); font-size: 1.2rem; max-width: 46ch; margin-bottom: 30px; }
.hero-includes { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: rgba(255, 255, 255, .86); font-size: .98rem; }
.hero-includes li { display: inline-flex; align-items: center; gap: 9px; }
.hero-includes i { color: var(--teal); }

.page-hero { background-image: url("../images/road-dusk.jpg"); background-position: right center; padding-top: 132px; padding-bottom: 96px; }
.page-hero::before { background: linear-gradient(100deg, rgba(13, 27, 42, .92) 0%, rgba(13, 27, 42, .7) 50%, rgba(13, 27, 42, .45) 100%); }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .3em; }
.page-hero p { margin: 0; }

/* ---------- Sections ---------- */
.section { padding-top: 72px; padding-bottom: 72px; }
.section--white { background: var(--surface); }
.section-head { margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }

.covers { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 600px) { .covers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .covers { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.covers li { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 26px 26px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.covers li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); background: var(--surface); }
/* White icons on tiles with a gentle gradient: teal for every check, blue for full check only */
.covers i { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 18px; color: #fff; background: linear-gradient(135deg, #16A09D, var(--teal)); }
.covers li.is-full i { background: linear-gradient(135deg, #4470E2, var(--blue)); }
.covers strong { display: block; font-size: 1.18rem; font-stretch: var(--wide); margin-bottom: 6px; }
.covers span { color: var(--muted); font-size: 1rem; display: block; line-height: var(--lh-sub); }
.covers .tier { align-self: flex-start; margin-top: auto; padding: 4px 11px; border-radius: 999px; background: var(--blue-soft); font-size: .82rem; font-weight: 650; color: var(--blue); }
.covers li.is-full > span:not(.tier) { margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .covers li { transition: none; } .covers li:hover { transform: none; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; counter-reset: step; position: relative; }
@media (min-width: 860px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .steps::before { content: ""; position: absolute; top: 23px; left: 48px; right: 33%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--blue)); opacity: .35; }
}
.steps li { counter-increment: step; position: relative; padding-top: 66px; }
.steps li::before {
    content: counter(step); position: absolute; top: 0; left: 0;
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); color: var(--teal-deep); box-shadow: inset 0 0 0 2px var(--teal);
    font-weight: 750; font-stretch: var(--wide); font-size: 1.15rem;
}
.steps h3 { margin-bottom: .35em; }
.steps p { color: var(--muted); margin: 0; }

.prices { display: grid; gap: 24px; }
@media (min-width: 860px) { .prices { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Colour code shared with "What's in a report": teal for every check, blue for what only the full check adds */
.price { background: var(--teal-soft); border: 1px solid rgba(14, 140, 138, .22); border-radius: var(--r-lg); padding: 36px 32px; display: flex; flex-direction: column; }
.price--featured { background: var(--night); color: #fff; border-color: var(--night); }
.price--featured .price-name { color: #fff; }
.price--featured .btn-primary { background: var(--blue); color: #fff; }
.price--featured .btn-primary:hover { background: var(--blue-deep); color: #fff; }
.price-name { font-size: 1.35rem; margin: 0; }
.price-amount { font-stretch: var(--wide); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; margin: 18px 0 10px; }
.price-summary { color: var(--muted); }
.price--featured .price-summary { color: rgba(255, 255, 255, .8); }
.price ul { list-style: none; padding: 0; margin: 12px 0 30px; display: grid; gap: 10px; flex: 1; align-content: start; }
.price li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.price li i { color: var(--teal); margin-top: 5px; }
.price li.is-extra { font-weight: 700; }
.price--featured li.is-extra i { color: #6F93F2; }
.price li.is-off { color: var(--muted); }
.price li.is-off i { color: var(--line); }
.price .btn { align-self: flex-start; }
.price-sample { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 14px; font-weight: 600; color: var(--teal-deep); }
.price--featured .price-sample { color: #fff; }
.price--featured .price-sample:hover { color: var(--teal-bright); }
.check-card-sample { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-weight: 600; color: inherit; }

.sources { display: grid; gap: 28px; }
@media (min-width: 640px) { .sources { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; } }
@media (min-width: 1100px) { .sources { grid-template-columns: repeat(4, 1fr); } }
.source h3 { display: flex; align-items: flex-start; gap: 10px; }
.source h3 i { color: var(--teal); font-size: 1.15rem; flex: 0 0 auto; margin-top: -1px; }
.source p { color: var(--muted); margin: 0; }

.cta-band { background-image: url("../images/road-dusk.jpg"); background-position: right center; padding-top: 110px; padding-bottom: 110px; }
.cta-band::before { background: linear-gradient(90deg, rgba(13, 27, 42, .94) 0%, rgba(13, 27, 42, .82) 55%, rgba(10, 100, 103, .6) 100%); }
.cta-band p { margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer {
    position: relative; color: rgba(255, 255, 255, .7);
    background: radial-gradient(90% 70% at 100% 0%, rgba(14, 140, 138, .22), transparent 65%), var(--night);
}
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.site-footer h2 { font-size: 1rem; color: #fff; margin-bottom: .9em; letter-spacing: 0; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer p { font-size: .95rem; }

.footer-top { display: grid; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
@media (min-width: 960px) { .footer-top { grid-template-columns: minmax(260px, 1fr) 2fr; gap: 64px; } }
.footer-intro .brand, .footer-intro .brand:hover { color: #fff; margin-bottom: 20px; text-decoration: none; gap: 10px; }
.footer-intro .brand-mark { width: 64px; height: 64px; }
.footer-intro .brand-name { font-size: 2.35rem; }
.footer-intro p { max-width: 34ch; margin-bottom: 22px; }
.footer-intro .btn, .footer-intro .btn:hover { color: #fff; text-decoration: none; }
.footer-mail { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .95rem; }
/* Phones: the intro text and "Check a car" use the full width */
@media (max-width: 640px) {
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .footer-intro p { max-width: none; }
    .footer-intro .btn { width: 100%; }
}

.footer-guides-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.footer-guides-head a { font-size: .9rem; font-weight: 600; }
.footer-guides-head a i { font-size: .8em; margin-left: 4px; }
.site-footer .footer-guide-list { gap: 12px; }
@media (min-width: 640px) { .site-footer .footer-guide-list { grid-template-columns: 1fr 1fr; } }
.footer-guide {
    position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
    padding: 18px 48px 18px 20px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
    transition: background-color .2s, border-color .2s;
}
.site-footer a.footer-guide:hover { text-decoration: none; background: rgba(255, 255, 255, .08); border-color: rgba(14, 140, 138, .7); }
.footer-guide-topic { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-bright); }
.footer-guide-title { color: #fff; font-weight: 600; line-height: 1.35; }
.footer-guide i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .4); transition: transform .2s, color .2s; }
.footer-guide:hover i { color: var(--teal-bright); transform: translate(4px, -50%); }

.footer-links { display: grid; gap: 32px; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 720px) { .footer-links { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-links { grid-template-columns: 1fr 1fr 1fr 1.6fr; } }
.site-footer .source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chips li { padding: 5px 12px; border-radius: 999px; font-size: .85rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }

.footer-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; padding-bottom: 32px; font-size: .82rem; line-height: 1.7; color: rgba(255, 255, 255, .5); }
.site-footer .footer-legal p { font-size: inherit; margin: 0 0 .6em; }
.footer-smallprint:empty { display: none; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 650; margin-bottom: 6px; }
.field .hint { display: block; color: var(--muted); font-size: .9rem; margin: -2px 0 6px; line-height: var(--lh-sub); }
.input {
    width: 100%; font: inherit; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 4px rgba(14, 140, 138, .16); }
.check-row { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.check-row--top { align-items: flex-start; }
.check-row--top input { flex: 0 0 auto; margin-top: 3px; }
/* On/off switch: a checkbox drawn as a sliding toggle */
.toggle-row { display: flex; gap: 12px; align-items: center; }
.toggle-row label { font-weight: 600; cursor: pointer; }
.toggle-row input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background-color .2s ease; }
.toggle-row input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13, 27, 42, .25); transition: transform .2s ease; }
.toggle-row input[type="checkbox"]:checked { background: var(--teal); }
.toggle-row input[type="checkbox"]:checked::before { transform: translateX(20px); }
.toggle-row input[type="checkbox"]:focus-visible { outline: 3px solid rgba(14, 140, 138, .35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toggle-row input[type="checkbox"], .toggle-row input[type="checkbox"]::before { transition: none; } }
.check-row--top .hint { display: block; color: var(--muted); font-size: .9rem; font-weight: 400; line-height: var(--lh-sub); margin-top: 2px; }
.form-foot { margin-top: 22px; color: var(--muted); }
.field-link { display: inline-block; margin-top: 8px; font-size: .92rem; }
.field-error { display: block; color: var(--fail); font-size: .92rem; margin-top: 8px; font-weight: 600; }

.form-page { padding-top: 56px; padding-bottom: 56px; }
.form-panel { max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 36px 32px; }
.form-panel h1 { font-size: 2.2rem; }

.auth { display: grid; min-height: calc(100vh - 77px); background: var(--surface); }
@media (min-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-media { display: none; position: relative; background: #DCE3E6 url("../images/key-handover.jpg") center center / cover; }
@media (min-width: 960px) { .auth-media { display: block; } }
.auth-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--night) 0%, rgba(13, 27, 42, .9) 45%, rgba(10, 100, 103, .72) 100%); }
.auth-media p { position: absolute; left: 48px; right: 48px; bottom: 44px; margin: 0; z-index: 1; color: #fff; font-stretch: var(--wide); font-weight: 700; font-size: 1.6rem; line-height: 1.25; max-width: 22ch; letter-spacing: -.01em; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 56px 16px; }
.auth-form-inner { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: 2.3rem; }
/* Sign in and register (desktop): the header lies over the page, translucent over the photo half, solid over the form half */
@media (min-width: 960px) {
    .masthead:has(+ main > .auth:first-child) { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(90deg, rgba(13, 27, 42, .6) 50%, var(--night) 50%); }
    .masthead:has(+ main > .auth:first-child) + main > .auth { min-height: 100vh; }
    .masthead:has(+ main > .auth:first-child) + main .auth-form { padding-top: calc(77px + 56px); }
}

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 20px; font-size: .98rem; scroll-margin-top: 24px; }
.notice i { margin-top: 4px; }
.notice p { margin: 0; }
.notice--error { background: var(--fail-bg); color: #8A1F1F; }
.notice--ok { background: var(--pass-bg); color: #0E5A43; }
.notice--info { background: var(--blue-soft); color: var(--blue-deep); }
.notice--warn { background: var(--warn-bg); color: #774404; }

/* ---------- Check (free confirmation) page ---------- */
.confirm { margin-top: -56px; position: relative; z-index: 2; padding-bottom: 32px; }
.confirm-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .confirm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; } }
.vehicle-id, .buy, .confirm .form-panel { background: var(--surface); border-radius: var(--r-md); padding: 32px; box-shadow: var(--shadow-lift); border: 0; }
.confirm .form-panel h2 { font-size: 1.7rem; }
.vehicle-id h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 22px 0 4px; }
.vehicle-id .sub { color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; }
.facts div { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.facts dt { color: var(--muted); font-size: .88rem; }
.facts dd { margin: 0; font-weight: 650; }
.not-this { margin: 24px 0 8px; font-size: .95rem; color: var(--muted); }
.research { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.research .plate--input { font-size: 1.45rem; flex: 1 1 200px; max-width: 280px; }
.research .plate--input:focus-within { box-shadow: 0 0 0 3px var(--teal); }

.buy h2 { font-size: 1.8rem; }
.options { border: 0; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.option {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: start; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px;
    transition: border-color .15s ease, background-color .15s ease;
}
.option:hover { border-color: #B5C4CC; }
.option:has(input:checked) { border-color: var(--teal); background: #F3FAFA; }
.option input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--teal); }
.option-body strong { display: block; font-size: 1.05rem; }
.option-body span { display: block; color: var(--muted); font-size: .94rem; line-height: var(--lh-sub); margin-top: 2px; }
.option-price { font-stretch: var(--wide); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
/* An option with more below it (the full check's mileage box): the card border moves to the wrapper */
.option-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .15s ease, background-color .15s ease; }
.option-card:hover { border-color: #B5C4CC; }
.option-card:has(input[type="radio"]:checked) { border-color: var(--teal); background: #F3FAFA; }
.option-card .option, .option-card .option:has(input:checked) { border: 0; background: transparent; }
.option-extra { display: block; padding: 14px 18px 18px 54px; border-top: 1px dashed var(--line); }
.option-extra label { display: block; font-weight: 650; }
.option-extra .hint { display: block; color: var(--muted); font-size: .9rem; line-height: var(--lh-sub); margin: 2px 0 10px; }
/* The full check is highlighted in blue (the MOT and tax check keeps the teal above), as on the home page price cards */
.option--full input { accent-color: var(--blue); }
.option--full:has(input:checked), .option-card--full:has(input[type="radio"]:checked) { border-color: var(--blue); background: #F4F7FE; }
.option-card--full .option--full:has(input:checked) { background: transparent; }
.option-card--full .input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 91, 216, .16); }
.mileage-input { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.mileage-input .input { max-width: 170px; }

.voucher { margin-bottom: 18px; }
.voucher-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: stretch; }
.voucher-row label { grid-column: 1 / -1; font-weight: 650; font-size: .95rem; }
.voucher-row .input { text-transform: uppercase; }
.voucher-applied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--pass); margin: 0; }
.link-button { color: var(--blue); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
button.link-button, input.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; cursor: pointer; }

.totals { margin: 0 0 22px; }
.totals div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; font-weight: 650; }
.totals .grand { border-bottom: 0; padding-top: 14px; }
.totals .grand dt { color: var(--ink); font-weight: 700; }
.totals .grand dd { font-stretch: var(--wide); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.btn-pay { font-size: 1.08rem; padding: 18px 22px; }
.btn.is-busy { cursor: progress; opacity: .85; pointer-events: none; }
.buy.is-updating .options, .buy.is-updating .voucher, .buy.is-updating .totals { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.not-car-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--warn-bg); color: var(--warn); font-size: 1.5rem; margin-bottom: 18px; }
.not-car p { color: var(--ink-soft); }
.not-car .not-car-help { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.secure-note, .report-retention { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; margin-top: 12px; }
/* The required "start straight away" tick box above the Pay button */
.start-consent { margin: 4px 0 14px; font-size: .95rem; line-height: var(--lh-sub); }
.start-consent label { cursor: pointer; }
.notice[hidden] { display: none; }
/* Notes under the Pay button: the icon lines up with the first line when the text wraps */
.secure-note { align-items: flex-start; line-height: var(--lh-sub); }
.secure-note > i { flex: 0 0 auto; margin-top: .2em; }
.secure-note strong { color: var(--ink-soft); }
.pay-consent { display: block; margin: 0 0 12px; color: var(--muted); font-size: .88rem; line-height: var(--lh-sub); }
.report-retention { margin-top: 40px; }
.report-retention.report-problem { margin-top: 8px; }
.report-problem a { color: var(--muted); }
.report-problem a:hover { color: var(--teal); }

/* ---------- Dashboard ---------- */
.dash-band { background: linear-gradient(110deg, var(--night) 0%, var(--night-2) 50%, var(--teal-deep) 130%); color: #fff; padding-top: 36px; padding-bottom: 36px; }
.dash-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.dash-hello { font-stretch: var(--wide); font-weight: 750; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; letter-spacing: -.02em; color: #fff; }
/* Public sample reports (SampleReport.master): a photo hero, then the real report layout */
.sample-hero .lede { max-width: 62ch; }
.sample-hero .lookup { max-width: 600px; margin-top: 26px; }
.sample-wrap { padding-top: 36px; padding-bottom: 64px; }
.sample-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.sample-tabs a { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 650; text-decoration: none; }
.sample-tabs a span { color: var(--muted); font-weight: 500; }
.sample-tabs a:hover { background: var(--bg); color: var(--ink); }
.sample-tabs a.is-active { background: var(--teal-soft); color: var(--teal-deep); }
/* Phones: "Check another car" goes full width under the greeting */
@media (max-width: 640px) {
    .dash-band { padding-top: 28px; padding-bottom: 28px; }
    .dash-band-inner { flex-direction: column; align-items: stretch; }
    .dash-band-inner .btn { width: 100%; }
}
/* minmax(0, 1fr): on phones the single column must fit the screen, not grow to its widest content */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; padding-bottom: 64px; }
@media (min-width: 960px) { .dash { grid-template-columns: 250px minmax(0, 1fr); gap: 44px; } }
.dash-nav { align-self: start; }
@media (min-width: 960px) { .dash-nav { position: sticky; top: 24px; } }
.dash-nav ul { list-style: none; margin: 0; padding: 6px; display: flex; flex-wrap: wrap; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
@media (min-width: 960px) { .dash-nav ul { display: grid; } }
.dash-nav a.navlink { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.dash-nav a.navlink i { width: 18px; text-align: center; color: var(--muted); }
.dash-nav a.navlink:hover { background: var(--bg); color: var(--ink); }
.dash-nav a.navlink.is-active { background: var(--teal-soft); color: var(--teal-deep); }
.dash-nav a.navlink.is-active i { color: var(--teal); }
/* Phones and tablets: the account menu is a full-width dropdown behind a button showing the current page (js/site.js) */
.dash-nav-toggle { display: none; }
@media (max-width: 959px) {
    .dash-nav { position: relative; z-index: 5; }
    .dash-nav-toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font: 650 1rem/1.2 var(--font); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(13, 27, 42, .04); }
    .dash-nav-toggle:hover { border-color: var(--teal); }
    .dash-nav-current { flex: 1; display: flex; align-items: center; gap: 11px; }
    .dash-nav-current i { width: 18px; text-align: center; color: var(--teal); }
    .dash-nav-toggle .nav-badge { margin-left: 0; }
    .dash-nav-chevron { color: var(--muted); font-size: .85rem; transition: transform .15s ease; }
    .dash-nav.is-open .dash-nav-chevron { transform: rotate(180deg); }
    .dash-nav.is-open .dash-nav-toggle { border-color: var(--teal); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .dash-nav ul { display: grid; }
    .js .dash-nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: -1px; border-color: var(--teal); border-top-color: var(--line); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 18px 40px rgba(13, 27, 42, .16); }
    .js .dash-nav.is-open ul { display: grid; }
    .dash-nav a.navlink { padding: 13px 12px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { .dash-nav-chevron { transition: none; } }
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--teal); color: #fff; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; }
.dash-main h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
.dash-main > .lede { margin-bottom: 28px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 40px; }
.stat-row div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.stat-row strong { display: block; font-stretch: var(--wide); font-weight: 800; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; }
.stat-row span { color: var(--muted); font-size: .94rem; }

/* position: relative keeps absolutely positioned bits (the hidden "Open" column label) inside the scroll box, or they widen the page on phones */
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.table th { text-align: left; font-weight: 650; color: var(--muted); font-size: .88rem; padding: 13px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FAFCFC; }
.table td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table .vehicle-cell strong { display: block; }
.table .vehicle-cell span { color: var(--muted); font-size: .9rem; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 650; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pill--complete, .pill--paid, .pill--pass { background: var(--pass-bg); color: var(--pass); }
.pill--processing, .pill--pending { background: var(--warn-bg); color: var(--warn); }
.pill--failed, .pill--fail { background: var(--fail-bg); color: var(--fail); }
.pill--refunded, .pill--closed { background: var(--unknown-bg); color: var(--unknown); }
.pill--open { background: var(--teal-soft); color: var(--teal-deep); }
.pill--waiting { background: var(--pass-bg); color: var(--pass); }

.empty { background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 40px 32px; }
.empty h2 { font-size: 1.5rem; }
.empty p { color: var(--muted); }

.subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.subhead h2 { font-size: 1.5rem; margin: 0; }

.settings-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1100px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.settings-grid .form-panel { max-width: none; }
.settings-grid h2 { font-size: 1.4rem; }

/* ---------- Report ---------- */
.report-head { display: grid; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
@media (min-width: 860px) { .report-head { grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 28px; } }
.report-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.report-head .plate--lg { justify-self: start; }
.report-head .sub { color: var(--muted); margin: 4px 0 0; }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invoice-actions { margin-bottom: 16px; }

.verdict { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-md); margin-bottom: 20px; }
.verdict i { font-size: 1.7rem; }
.verdict strong { display: block; font-stretch: var(--wide); font-weight: 750; font-size: 1.3rem; line-height: 1.25; }
.verdict span { font-size: .98rem; }
.verdict--pass { background: var(--pass-bg); color: #0E5A43; }
.verdict--warn { background: var(--warn-bg); color: #774404; }
.verdict--fail { background: var(--fail-bg); color: #8A1F1F; }

.checks { list-style: none; margin: 0 0 52px; padding: 4px 22px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
@media (min-width: 860px) { .checks { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.checks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.checks li > i { font-size: 1.15rem; margin-top: 3px; }
.checks strong { display: block; }
.checks .detail { display: block; color: var(--ink-soft); font-size: .95rem; line-height: var(--lh-sub); margin-top: 2px; }
.checks .state { font-size: .84rem; font-weight: 650; white-space: nowrap; margin-top: 3px; }
.checks .pass > i, .checks .pass .state { color: var(--pass); }
.checks .warn > i, .checks .warn .state { color: var(--warn); }
.checks .fail > i, .checks .fail .state { color: var(--fail); }
.checks .unknown > i, .checks .unknown .state { color: var(--unknown); }
.checks .notincluded { color: var(--muted); }
.checks .notincluded > i, .checks .notincluded .state { color: #A3B1BA; }
.checks .notincluded .detail { color: var(--muted); }

.report-section { margin-bottom: 52px; }
.report-section > h2 { font-size: 1.7rem; }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 22px; }
.spec div { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line-soft); }
.spec dt { color: var(--muted); font-size: .88rem; }
.spec dd { margin: 0; font-weight: 650; }

.chart-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 18px 12px; position: relative; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 12px var(--font); }
.chart .line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--teal); stroke: var(--surface); stroke-width: 2; }
.chart .dot.dropped { fill: var(--fail); r: 6; }
.chart .line.assumed { stroke-dasharray: 5 5; stroke-opacity: .7; }
.chart .dot.origin { fill: var(--surface); stroke: var(--teal); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .quiet { fill: var(--warn); fill-opacity: .1; cursor: pointer; }
.chart .quiet:hover, .chart .quiet:focus { fill-opacity: .18; outline: none; }
.chart .hit:focus { outline: none; fill: rgba(47, 91, 216, .15); }
.chart .value { fill: var(--ink); font: 700 13px var(--font); }
.chart-tip {
    position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
    background: var(--night); color: #fff; font-size: .86rem; padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap;
    opacity: 0; transition: opacity .12s ease;
}
.chart-tip.is-on { opacity: 1; }
.mileage-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; color: var(--ink-soft); font-size: .95rem; }
.mileage-meta strong { color: var(--ink); }
details.table-toggle { margin-top: 14px; }
details.table-toggle summary { cursor: pointer; color: var(--blue); font-weight: 650; padding: 6px 0; }
details.table-toggle .when-open, details.table-toggle[open] .when-closed { display: none; }
details.table-toggle[open] .when-open { display: inline; }

.mot-list { list-style: none; padding: 0; border-left: 2px solid var(--line); margin: 0 0 0 9px; }
.mot { position: relative; padding: 0 0 24px 28px; }
.mot::before { content: ""; position: absolute; left: -10px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 3px solid var(--pass); }
.mot.is-fail::before { border-color: var(--fail); }
.mot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mot-head h3 { margin: 0; font-size: 1.15rem; }
.mot-meta { color: var(--muted); font-size: .94rem; }
.defects { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.defects li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: .95rem; padding: 9px 14px; background: var(--surface); border-radius: var(--r-sm); border: 1px solid var(--line-soft); }
.defect-type { font-weight: 650; font-size: .86rem; }
.defect-0 .defect-type, .defect-1 .defect-type { color: var(--fail); }
.defect-2 .defect-type, .defect-3 .defect-type { color: var(--warn); }
.defect-4 .defect-type { color: var(--muted); }
@media (max-width: 560px) { .defects li { grid-template-columns: 1fr; gap: 2px; } }

.records { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.records li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 16px; }
.records li span { display: block; color: var(--muted); font-size: .94rem; line-height: var(--lh-sub); }
/* Finance and insurance records: cards with a coloured top bar, like the tax and MOT cards */
.record-card { --state: var(--fail); position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px 20px; }
.record-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--state); }
.record-card--warn { --state: var(--warn); }
.record-heading--fail { color: var(--fail); }
.record-heading--warn { color: var(--warn); }
.record-card p { margin: 0; color: var(--ink-soft); }
.record-card p:first-child { color: var(--ink); font-weight: 650; }
.record-card p + p { margin-top: 8px; }
.record-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 18px; align-items: start; }
.record-icon { --icon: var(--fail); flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--icon); color: #fff; font-size: 1.2rem; }
.record-icon--warn { --icon: var(--warn-solid); }
/* The damage diagram stands on the right of the record's text (under it on phones) */
.record-card.has-figure { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; }
.record-card.has-figure .damage-diagram { margin-left: 14px; }

.damage-diagram { margin: 0; width: 280px; max-width: 100%; text-align: center; }
.damage-diagram--upright { width: 180px; }
.damage-diagram svg { display: block; width: 100%; height: auto; }
.damage-diagram figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.dd-body { fill: var(--line-soft); }
.dd-wheel { fill: var(--ink-soft); }
.dd-zone rect { fill: transparent; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.dd-zone.is-hit rect { fill: var(--state); fill-opacity: .72; stroke: none; }
.dd-glass { fill: #DCE9EF; fill-opacity: .85; stroke: var(--muted); stroke-width: 1; }
.dd-side { stroke-width: .8; }
.dd-cabin { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.dd-mirror { fill: var(--line-soft); stroke: var(--ink-soft); stroke-width: 1.5; }
.dd-light { fill: #fff; stroke: var(--muted); stroke-width: 1; }
.dd-tail { fill: #E9A3A3; stroke: var(--muted); stroke-width: 1; }
.dd-line { fill: none; stroke: var(--muted); stroke-width: 1; stroke-opacity: .6; }
.dd-outline { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.dd-label { font-size: 11px; font-weight: 650; letter-spacing: .08em; fill: var(--muted); }
.dd-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--fail-bg); color: var(--fail); font-size: .8rem; font-weight: 650; }
@media (max-width: 900px) {
    .record-card.has-figure { grid-template-columns: auto minmax(0, 1fr); }
    .record-card.has-figure .damage-diagram { grid-column: 1 / -1; justify-self: center; margin-left: 0; }
}

.processing { padding: 48px 0; }
.processing .fa-spin { color: var(--teal); font-size: 2rem; margin-bottom: 16px; }

/* ---------- Invoice ---------- */
.invoice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 40px 36px; }
.invoice-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.invoice-top h1 { font-size: 2.2rem; margin: 0 0 6px; }
.invoice-brand { display: flex; margin-bottom: 22px; gap: 8px; }
.invoice-brand .brand-mark { width: 53px; height: 53px; }
.invoice-brand .brand-name { font-size: 1.95rem; }
.invoice address { font-style: normal; color: var(--ink-soft); }
.invoice .table-wrap { border: 0; }
.invoice-totals { margin-left: auto; max-width: 300px; margin-top: 18px; }
/* Right padding matches .table td so the totals line up with the amounts column */
.invoice-totals div { display: flex; justify-content: space-between; padding: 6px 18px 6px 0; }
.invoice-totals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.15rem; padding-top: 10px; }
.invoice-paid { margin-top: 24px; color: var(--pass); font-weight: 650; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
    .masthead-inner { min-height: 64px; }
    .hero-home { padding-top: 112px; min-height: 0; }
    .lookup .btn { width: 100%; }
    .section { padding-top: 48px; padding-bottom: 48px; }
    .vehicle-id, .buy, .confirm .form-panel { padding: 24px 20px; }
    .page-hero { padding-top: 112px; }
}

@media print {
    .masthead, .site-footer, .dash-nav, .dash-band, .no-print, .report-actions { display: none !important; }
    body { background: #fff; }
    .dash { display: block; padding: 0; }
    .invoice, .chart-panel, .table-wrap, .checks, .spec { border: 0; padding-left: 0; padding-right: 0; }
}

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

/* ---------- Report PDF (Dashboard/ReportPdf.master, printed by headless Edge: ReportPdf) ---------- */
@page { size: A4; margin: 14mm 13mm 16mm; }
@page { @bottom-left { font: 400 7.5pt/1.2 var(--font); color: #5B6B78; } @bottom-right { font: 400 7.5pt/1.2 var(--font); color: #5B6B78; } }
/* Everything is sized in rem, so a smaller root scales the whole report down to suit A4 */
html:has(> body.pdf) { font-size: 12px; }
body.pdf { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Running costs in the PDF: "7,300 miles a year" in place of the box, with the yearly cost under it on the left */
.pdf .fuel-calc { display: block; }
.pdf .fuel-miles { margin: 0 0 4px; font-weight: 700; }
.pdf .fuel-result { margin: 0; text-align: left; }
.pdf * { animation: none !important; transition: none !important; }
.pdf-cover { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, var(--night) 0%, #123044 70%, var(--teal-deep) 100%); color: #fff; border-radius: 14px; padding: 22px 26px; margin-bottom: 26px; }
.pdf-logo { display: block; height: 40px; width: auto; }
.pdf-cover-meta { text-align: right; }
.pdf-cover-meta strong { display: block; font-size: 1.25rem; font-stretch: var(--wide); font-weight: 800; }
.pdf-cover-meta span { display: block; color: rgba(255, 255, 255, .75); font-size: .9rem; margin-top: 4px; }
.pdf-downloaded { margin: -12px 0 22px; color: var(--muted); font-size: .88rem; }
.pdf-main { padding: 0; max-width: none; }
.pdf .report-head { padding-bottom: 20px; margin-bottom: 20px; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 24px; }
/* The car image to the left of the plate and car details (A4 is narrower than the screen layout's breakpoint) */
.pdf .report-head .vehicle-photo { width: 204px; max-width: none; }
.pdf .report-problem, .pdf details > summary { display: none; }
/* A heading near the foot of a page moves to the next page with what follows it */
.pdf h2, .pdf h3 { break-after: avoid-page; }
.pdf h2 + *, .pdf h3 + * { break-before: avoid-page; }
.pdf-keep { break-inside: avoid; }
/* Equipment and options: long groups continue into the next column or page (border carried on) instead of moving
   whole and leaving a column empty; each line stays whole */
.pdf .equipment-group { break-inside: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pdf .equipment-group h3 { break-after: avoid; }
/* Card backgrounds in the brand colours: mist grey for data, light teal for the money figures. Status and record
   cards stay white so their red, amber and green state colours stand out. */
.pdf .spec, .pdf .equipment-group, .pdf .chart-panel, .pdf .ncap, .pdf .table-wrap, .pdf .plate-history li { background: var(--bg); border-color: var(--line); }
/* The print rules above drop these cards' border and side padding; tinted, they need them back */
.pdf .spec { border: 1px solid var(--line); padding: 6px 22px; }
.pdf .chart-panel { border: 1px solid var(--line); padding: 22px 18px 12px; }
.pdf .table-wrap { border: 1px solid var(--line); }
.pdf .valuation, .pdf .cost-panel { background: #EEF8F7; border-color: rgba(14, 140, 138, .22); }
.pdf .valuation .rates div, .pdf .cost-panel .rates div { border-color: rgba(14, 140, 138, .16); }
/* Tax and MOT cards and the record cards (recalls, finance, write-offs, taxi...) take their state's light tint:
   light teal when clear, light orange to check, light pink for a problem, mist grey when unknown */
.pdf .status-card { background: var(--bg); }
.pdf .status-card--pass { background: #EEF8F7; border-color: rgba(14, 140, 138, .22); }
.pdf .status-card--warn, .pdf .record-card--warn { background: var(--warn-bg); border-color: #F1D7B0; }
.pdf .status-card--fail, .pdf .record-card:not(.record-card--warn) { background: var(--fail-bg); border-color: #F0C8C8; }
.pdf .status-card-state { background: #fff; }
.pdf .report-section { break-inside: auto; }
.pdf .record-card, .pdf .status-card, .pdf .chart-panel, .pdf .valuation, .pdf .cost-panel, .pdf .ncap, .pdf tr, .pdf li, .pdf .notice { break-inside: avoid; }
.pdf-about { margin-top: 32px; padding-top: 18px; border-top: 2px solid var(--teal); color: var(--muted); font-size: .88rem; line-height: 1.5; break-inside: avoid; }
.pdf-about h2 { font-size: 1.1rem; color: var(--ink); margin: 0 0 8px; }
.pdf-about p { margin: 0 0 8px; }
.pdf-legal { font-size: .8rem; }

/* ---------- Vehicle studio image ---------- */
/* Hidden until the image has loaded, so nothing shows while it is being generated */
.vehicle-photo { overflow: hidden; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); }
.vehicle-photo:not(.is-loaded) { display: none; }
.vehicle-photo img { display: block; width: 100%; height: auto; animation: photo-in .4s ease-out; }
@keyframes photo-in { from { opacity: 0; } to { opacity: 1; } }
.vehicle-id .vehicle-photo { margin: -8px -8px 22px; }
.vehicle-id .vehicle-photo.is-loaded img { width: 70%; margin: 0 auto; }
.report-head .vehicle-photo { width: 204px; aspect-ratio: 2 / 1; align-self: start; }
/* Phones and tablets: full-width car image, with the Download PDF button above it */
@media (max-width: 859px) {
    .report-head { grid-template-columns: minmax(0, 1fr); }
    .report-head .vehicle-photo { width: 100%; }
    .report-head .report-actions { order: -1; }
}
@media (max-width: 640px) { .vehicle-id .vehicle-photo.is-loaded img { width: 100%; } }
.report-plate { margin: 0 0 10px; }

/* ---------- Report: tax and MOT ---------- */
.status-cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .status-cards { grid-template-columns: 1fr 1fr; } }
.status-card { --state: var(--unknown); --state-bg: var(--unknown-bg); position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 24px 22px; }
.status-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--state); }
.status-card--pass { --state: var(--pass); --state-bg: var(--pass-bg); }
.status-card--warn { --state: var(--warn); --state-bg: var(--warn-bg); --state-solid: var(--warn-solid); }
.status-card--fail { --state: var(--fail); --state-bg: var(--fail-bg); }
.status-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.status-card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--state-solid, var(--state)); color: #fff; flex: none; }
.status-card h3 { font-size: 1.05rem; margin: 0; }
.status-card-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--state-bg); color: var(--state); font-size: .82rem; font-weight: 650; white-space: nowrap; }
.status-card-value { font-stretch: var(--wide); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; color: var(--state); margin: 0 0 6px; }
.status-card-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--ink); font-weight: 600; }
.status-card-date span { color: var(--muted); font-weight: 400; font-size: .94rem; }
.status-card-note { color: var(--muted); font-size: .93rem; margin: 8px 0 0; line-height: var(--lh-sub); }

/* ---------- Report: running costs and safety ---------- */
.cost-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .cost-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.cost-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; }
.cost-panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: .6em; }
.cost-panel h3 i { color: var(--teal); font-size: 1rem; }
.cost-basis { color: var(--ink-soft); margin-bottom: 10px; }
.cost-note { color: var(--muted); font-size: .93rem; margin: 10px 0 0; line-height: var(--lh-sub); }
.rates { margin: 0; }
.rates div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.rates div:last-child { border-bottom: 0; }
.rates dt { color: var(--ink-soft); }
.rates dd { margin: 0; font-weight: 650; }
.rates--premium dd { color: var(--ink-soft); }
.ulez { font-stretch: var(--wide); font-weight: 750; font-size: 1.2rem; margin: 0; }
.ulez--compliant, .ulez--likelycompliant { color: var(--pass); }
.ulez--uncertain, .ulez--notcompliant { color: var(--warn); }
.ulez--unknown { color: var(--unknown); }

.ncap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; display: grid; gap: 18px; }
@media (min-width: 860px) { .ncap { grid-template-columns: max-content 1fr; align-items: center; gap: 40px; } }
.ncap-stars { margin: 0; display: grid; gap: 6px; }
.ncap-stars .stars { display: flex; gap: 4px; color: var(--teal); font-size: 1.6rem; }
.ncap-stars span { color: var(--ink); font-size: .98rem; font-weight: 650; letter-spacing: 0; }
.ncap-scores { margin: 0; display: grid; gap: 10px; }
.ncap-scores div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; }
.ncap-scores dt { color: var(--ink-soft); font-size: .94rem; }
.ncap-scores dd { margin: 0; display: grid; grid-template-columns: 1fr 44px; gap: 10px; align-items: center; font-weight: 650; text-align: right; }
.meter { display: block; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--teal); }

/* ---------- Report: valuation and specification ---------- */
.valuation { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; display: grid; gap: 22px; }
@media (min-width: 860px) { .valuation { grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; } }
.valuation-main span { color: var(--muted); font-size: .94rem; }
.valuation-main strong { display: block; font-stretch: var(--wide); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; color: var(--teal-deep); margin: 4px 0 8px; }
.valuation-main p { color: var(--muted); font-size: .94rem; margin: 0; }
.spec-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.spec-group h3 { font-size: 1.05rem; margin: 0 0 .5em; }
.spec-group > .cost-note:first-of-type { margin: 0 0 12px; }
.tyre-table td { font-weight: 600; vertical-align: top; }
.tyre-table .axle { display: block; }
.tyre-table .axle + .axle { margin-top: 6px; }
.tyre-table .axle small { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.tyre-table .muted { color: var(--muted); font-weight: 400; }
/* Phones: each wheel size becomes a card, values stacked under their column headings, so nothing scrolls sideways */
@media (max-width: 640px) {
    .tyre-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tyre-table, .tyre-table tbody { display: block; width: 100%; }
    .tyre-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tyre-table tr + tr { border-top: 12px solid var(--bg); }
    .tyre-table td { display: block; padding: 12px 16px; }
    /* Tyre size across the card, with the "Standard" pill beside the size (front and rear side by side when they differ) */
    .tyre-table td:first-child { grid-column: 1 / -1; background: #FAFCFC; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 24px; }
    .tyre-table td:first-child::before { flex-basis: 100%; }
    .tyre-table td:first-child .axle + .axle { margin-top: 0; }
    .tyre-table td:first-child .tag { margin: 0 0 2px -12px; }
    .tyre-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: .8rem; font-weight: 650; }
}
.tyre-table .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-size: .78rem; font-weight: 650; vertical-align: 1px; }

/* ---------- Report: equipment and plate history ---------- */
.equipment { columns: 280px auto; column-gap: 14px; margin-top: 4px; }
.equipment-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; break-inside: avoid; margin-bottom: 14px; }
.equipment-group h3 { font-size: 1rem; margin: 0 0 .5em; }
.equipment-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.equipment-group li { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.equipment-name small { display: block; color: var(--muted); font-size: .85rem; }
.equipment-price { color: var(--ink-soft); font-weight: 650; white-space: nowrap; }

.plate-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plate-history li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; }
.plate-date { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .94rem; }
.plate-date i { color: var(--teal); }
.plate--plain .plate-text { padding-left: .55em; padding-right: .55em; }

/* ---------- Report: battery and charging ---------- */
.report-section .stat-row { margin-bottom: 16px; }
.motor-type { display: block; color: var(--muted); font-size: .84rem; }
.ev-sub { font-size: 1.15rem; margin: 28px 0 .3em; }

/* ---------- Report: fuel cost ---------- */
.cost-panel--wide { grid-column: 1 / -1; }
.fuel-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.fuel-calc .field { margin: 0; }
.fuel-calc .input { width: 150px; }
.fuel-result { margin: 0 0 6px; color: var(--ink-soft); }
.fuel-result strong { font-stretch: var(--wide); font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; color: var(--teal-deep); }

/* Colour swatch beside the colour name */
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: -.08em; margin-right: .45em; box-shadow: inset 0 0 0 1px rgba(16, 32, 48, .22); }
.plate-change { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plate-change > i { color: var(--muted); }
.report-head .report-actions { justify-self: end; align-self: start; }

/* ---------- Blog ---------- */
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.section-head--split p { margin-bottom: 0; }
.blog { padding-top: 48px; padding-bottom: 96px; }
.blog-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.blog-topics:empty { display: none; }
.blog-topics a { padding: 8px 16px; border-radius: 999px; background: rgba(14, 140, 138, .08); color: var(--teal-deep); font-weight: 600; font-size: .95rem; text-decoration: none; }
.blog-topics a:hover { background: rgba(14, 140, 138, .16); }
.blog-topics a[aria-current] { background: var(--teal); color: #fff; }

.post-featured { display: grid; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
@media (min-width: 860px) { .post-featured { grid-template-columns: 1.1fr 1fr; } }
.post-featured:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); color: inherit; }
.post-featured-media { min-height: 260px; background-size: cover; background-position: center; }
.post-featured-body { display: flex; flex-direction: column; gap: 12px; padding: 36px 36px 32px; }
.post-featured-body strong { font-stretch: var(--wide); font-weight: 750; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.post-featured-body > span:not(.post-meta):not(.post-more) { color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.post-more { margin-top: auto; padding-top: 8px; color: var(--teal-deep); font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }

.post-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 600px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.post-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.section--white .post-card a { background: var(--bg); }
.post-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); background: var(--surface); color: inherit; }
.post-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night); }
.post-card-body { display: flex; flex-direction: column; padding: 22px 24px 24px; }
.post-meta { display: block; color: var(--muted); font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
.post-card strong { display: block; font-stretch: var(--wide); font-size: 1.18rem; line-height: 1.2; margin-bottom: 8px; }
.post-summary { color: var(--muted); line-height: var(--lh-sub); }
@media (prefers-reduced-motion: reduce) { .post-card a, .post-featured { transition: none; } .post-card a:hover, .post-featured:hover { transform: none; } }

.post-hero { background-position: center; }
.post-hero h1 { max-width: 24ch; }
.post-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px !important; font-size: .95rem; }
.post-crumbs a { color: #fff; text-decoration: none; font-weight: 600; }
.post-crumbs a:hover { text-decoration: underline; }
.post-crumbs i { font-size: .7rem; opacity: .6; }
.post-hero-meta { font-size: .98rem; }

.post-layout { display: grid; gap: 48px; padding-top: 56px; padding-bottom: 88px; }
/* The text fills the space up to the sidebar, 40px from it */
@media (min-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } }
.post-layout .post-body { max-width: none; }
.post-layout .post-body > :first-child { margin-top: 0; }
.post-body { max-width: 780px; font-size: 1.07rem; line-height: 1.7; color: var(--ink-soft); }
.post-body .post-intro { font-size: 1.25rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.4em; }
.post-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--ink); margin: 1.8em 0 .55em; }
.post-body h3 { font-size: 1.18rem; color: var(--ink); margin: 1.5em 0 .45em; }
.post-body p { margin: 0 0 1.1em; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body li { margin-bottom: .45em; }
.post-body li::marker { color: var(--teal); font-weight: 700; }
.post-body strong { color: var(--ink); }
.post-body .callout { display: flex; gap: 14px; align-items: flex-start; margin: 1.6em 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--teal-soft); color: var(--ink); }
.post-body .callout::before { content: "\f0eb"; font: var(--fa-font-solid); color: var(--teal-deep); margin-top: .3em; }
.post-body .callout--warn { background: var(--warn-bg); }
.post-body .callout--warn::before { content: "\f071"; color: var(--warn); }
.post-body .callout p:last-child { margin-bottom: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .98rem; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.post-body th { color: var(--ink); background: var(--bg); font-weight: 700; }

.post-aside { position: sticky; top: 24px; }
.post-cta { background: var(--night); color: rgba(255, 255, 255, .8); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-lift); }
.post-cta h2 { color: #fff; font-size: 1.4rem; margin-bottom: .4em; }
.post-cta p { font-size: .98rem; line-height: 1.5; }
.post-cta-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: var(--teal); color: #fff; }
.post-lookup { display: grid; gap: 10px; margin-top: 18px; }
.post-cta .field-error { color: #FFD3D3; }
@media (max-width: 999px) { .post-aside { position: static; } }

/* ---------- Check landing pages (CheckPage.aspx) and information pages (InfoPage.aspx) ---------- */
.check-hero { background-position: center; padding-bottom: 84px; }
.check-hero h1 { max-width: 20ch; }
.check-hero .lede { font-size: 1.15rem; max-width: 52ch; margin-bottom: 26px; }
.check-hero-note { display: flex; align-items: center; gap: 9px; margin-top: 18px !important; font-size: .98rem; }
.check-hero-note i { color: var(--teal); }
.post-cta .check-card-label { margin: 0 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-bright); }
.post-cta .check-card-price { margin: 0 0 .5em; font-size: 1.9rem; font-weight: 800; font-stretch: var(--wide); color: #fff; }
.check-card-price span { font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.post-cta .btn { margin-top: 8px; }
.check-card--full .post-cta-icon, .check-card--full .btn-primary { background: var(--blue); }
.check-card--full .btn-primary:hover { background: var(--blue-deep); }
.check-card--full .check-card-label { color: #6F93F2; }
.check-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .check-links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .check-links { grid-template-columns: repeat(4, 1fr); } }
.check-links a { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 48px 22px 22px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.check-links a:hover { border-color: var(--teal); box-shadow: var(--shadow-lift); color: var(--ink); }
.check-links strong { font-stretch: var(--wide); font-size: 1.1rem; }
.check-links span { color: var(--muted); font-size: .95rem; line-height: var(--lh-sub); }
.check-links i { position: absolute; right: 20px; top: 24px; color: var(--teal); }
.info-hero .post-hero-meta { margin-top: 14px; color: rgba(255, 255, 255, .7); }
.info-layout { padding-top: 56px; padding-bottom: 88px; }
.info-layout .post-body table { background: var(--surface); }
.toc-layout .post-body h2[id] { scroll-margin-top: 24px; }
/* Sections focused after a smooth scroll to them (site.js) aren't controls, so no focus ring */
[tabindex="-1"]:focus { outline: none; }
/* Pages with a "What's on this page" card (info and check pages): the card scrolls away, the card below it stays in view */
@media (min-width: 1000px) {
    .toc-layout .post-aside { position: static; align-self: stretch; }
    .toc-layout .post-cta { position: sticky; top: 24px; }
}
.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; margin: 1.2em 0 2.4em; font-size: 1rem; line-height: 1.5; }
.contact-form-row { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .contact-form-row { grid-template-columns: 1fr 1fr; } }
.contact-form textarea.input { min-height: 160px; resize: vertical; font: inherit; }
.contact-form .input--reg { max-width: 220px; text-transform: uppercase; }
.contact-form .field--human .input { max-width: 220px; }

/* ---------- Support tickets (account) ---------- */
.input--reg { max-width: 220px; text-transform: uppercase; }
.input--file { padding: 10px; }
.support-new, .support-reply { max-width: none; margin-top: 28px; }
.back-link { margin: 0 0 16px; }
/* The car the ticket is about: image beside make, model, colour and year, on a white card */
.ticket-car { display: grid; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 20px; }
@media (min-width: 640px) { .ticket-car.has-photo { grid-template-columns: 200px minmax(0, 1fr); } }
.ticket-car .vehicle-photo { box-shadow: none; }
.ticket-car .vehicle-photo img { width: 100%; }
.ticket-car .facts { margin: 0; }
.ticket-car .facts div:nth-child(-n+2) { border-top: 0; }
.ticket-title { margin-bottom: 8px; }
.ticket-title + .lede { margin-top: 0; }
.ticket-plate { display: block; margin: 0 0 10px; }
.ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.thread { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
/* Messages use most of the width, offset left (ours) or right (the customer's) so the conversation reads as a thread */
.thread-msg { border-radius: var(--r-md); padding: 16px 20px; border: 1px solid var(--line); background: var(--surface); width: 85%; }
.thread-msg { scroll-margin-top: 24px; }
/* The message just sent (the page opens at #m{id}) */
.thread-msg:target { box-shadow: 0 0 0 3px rgba(14, 140, 138, .25); }
.thread-msg--customer { justify-self: end; background: #EEF8F7; border-color: rgba(14, 140, 138, .22); }
.thread-meta { margin: 0 0 6px; color: var(--muted); font-size: .88rem; }
.thread-meta strong { color: var(--ink); }
.thread-body { line-height: 1.55; overflow-wrap: anywhere; }
.thread-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.thread-files a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; text-decoration: none; }
.thread-files span { color: var(--muted); }
.contact-form .pay-consent { margin: 4px 0 16px; }
.toc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 24px; }
.toc-card h2 { font-size: 1.05rem; margin: 0 0 12px; }
.toc-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-card a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: .95rem; line-height: var(--lh-sub); }
.toc-card a:hover { color: var(--teal); border-left-color: var(--teal); }
/* Help page: questions fold open (HelpService), and a message prompt at the end */
.faq { display: grid; gap: 10px; margin: 0 0 36px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 650; color: var(--ink); cursor: pointer; list-style: none; line-height: var(--lh-sub); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\f078"; font: var(--fa-font-solid); font-size: .8rem; color: var(--teal); transition: transform .15s ease; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--teal-deep); }
.faq-answer { padding: 0 20px 4px; }
.faq-answer > :first-child { margin-top: 0; }
.help-more { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; padding: 28px; background: var(--teal-soft); border-radius: var(--r-lg); }
.help-more h2 { margin-top: 0; }
.help-more-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--teal); color: #fff; font-size: 1.4rem; }
@media (max-width: 560px) { .help-more { flex-direction: column; padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
/* Below 1000px the sidebar falls under the content, where a contents list is no use */
@media (max-width: 999px) { .toc-card { display: none; } }