/* ==========================================================================
   BuyFreehold — public website
   The same design system as the authentication screens (wwwroot/css/auth.css):
   deep navy, gold accents, a faint blueprint grid. Self-contained — no
   Bootstrap, no web fonts, no external request of any kind — so the strict
   Content-Security-Policy in SecurityHeadersMiddleware needs no 'unsafe-inline'.

   Written mobile-first: every base rule is the phone layout, and the
   min-width queries add the larger ones. Nothing here relies on a hover.
   ========================================================================== */

:root {
    --brand-900: #061529;
    --brand-800: #0a2340;
    --brand-700: #103156;
    --brand-600: #17416f;
    --brand-500: #245a95;

    --accent-500: #c9a227;
    --accent-400: #dbb84a;

    /* Sampled from the logo artwork, same values as site.css. */
    --brand-gold: #d8a204;
    --brand-gold-bright: #f8ba0a;
    --brand-green: #00bf63;

    --surface: #ffffff;
    --surface-sunken: #f4f6f9;
    --surface-raised: #ffffff;
    --border: #d9dfe7;
    --border-strong: #b9c3d0;

    --text: #101a28;
    --text-muted: #5b6979;
    --text-inverse: #ffffff;

    --danger-600: #b42318;
    --danger-50: #fef3f2;
    --danger-200: #fecdc9;
    --warning-600: #b54708;
    --success-600: #067647;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --shadow-card: 0 1px 2px rgb(16 26 40 / 6%), 0 12px 32px -8px rgb(16 26 40 / 14%);
    --shadow-lift: 0 2px 4px rgb(16 26 40 / 6%), 0 24px 48px -16px rgb(16 26 40 / 22%);
    --ring: 0 0 0 3px rgb(23 65 111 / 22%);

    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    /* One measure for the whole site, so nothing has to guess its own gutter. */
    --shell: 72rem;
    --gutter: 1.25rem;
    --section-y: 3.5rem;
}

@media (min-width: 48rem) {
    :root {
        --gutter: 2rem;
        --section-y: 5rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface: #101823;
        --surface-sunken: #0a121c;
        --surface-raised: #16202d;
        --border: #253243;
        --border-strong: #35455a;

        --text: #e8edf4;
        --text-muted: #97a5b8;

        --danger-600: #f97066;
        --danger-50: #2a1512;
        --danger-200: #6b2b25;
        --warning-600: #f5a25d;
        --success-600: #4fc98a;

        --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px -12px rgb(0 0 0 / 60%);
        --shadow-lift: 0 2px 4px rgb(0 0 0 / 45%), 0 28px 56px -18px rgb(0 0 0 / 70%);
        --ring: 0 0 0 3px rgb(201 162 39 / 30%);
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body.site-page {
    margin: 0;
    /* The single most common mobile bug is a page that scrolls sideways by a few
       pixels because one child overflowed. This makes that impossible. */
    overflow-x: hidden;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--narrow {
    max-width: 48rem;
}

.section {
    padding-block: var(--section-y);
}

.section--sunken {
    background: var(--surface-sunken);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.65);
}

.section__head {
    max-width: 42rem;
    margin-bottom: 2.5rem;
}

.section__head--centred {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: block;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
    .eyebrow {
        color: var(--accent-400);
    }
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.75rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 6vw, 3.25rem);
}

h2 {
    font-size: clamp(1.6rem, 4.2vw, 2.35rem);
}

h3 {
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
}

p {
    margin: 0 0 1rem;
    text-wrap: pretty;
}

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

.lede {
    font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
    color: var(--text-muted);
}

.muted {
    color: var(--text-muted);
}

.small {
    font-size: 0.875rem;
}

code {
    padding: 0.1rem 0.3rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Set by marketing.js once the page has scrolled — a shadow is the cue that the
   bar is floating over content rather than sitting in it. */
.site-header.is-stuck {
    box-shadow: 0 1px 12px rgb(16 26 40 / 10%);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.site-brand:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* The mark is decorative: the name sits beside it as real text, so a screen
   reader announcing both would say it twice. Hence alt="" on the image. */
.site-brand__mark {
    width: auto;
    height: 2.1rem;
    flex: none;
}

/* Capitals, matching the footer and the signed-in header. Transformed rather than
   typed in the markup, so the text a screen reader and a search engine see is still
   the domain; the tracking goes slightly positive because capitals need the room. */
.site-brand__name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--brand-green);
    text-transform: uppercase;
}

.site-brand__name-accent {
    color: var(--brand-gold-bright);
}

/* Below 22rem the toggler and the brand cannot share a line; the mark alone
   still identifies the site. */
@media (max-width: 22rem) {
    .site-brand__name {
        display: none;
    }
}

/* Hidden until marketing.js sets .js-nav on <html>: a control that collapses a
   panel is worse than useless if the script that collapses it never ran. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    /* 44px — the smallest target that is comfortable with a thumb. */
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    padding: 0;
    color: var(--text);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.js-nav .nav-toggle {
    display: inline-flex;
}

.nav-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.nav-toggle__icon {
    width: 1.35rem;
    height: 1.35rem;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
    display: block;
}

/* Open by default, and only collapsible once marketing.js has set .js-nav on
   <html>. With JavaScript off the panel simply stacks under the bar and the
   navigation still works. */
.site-nav {
    display: block;
    padding-bottom: 1rem;
}

.js-nav .site-nav {
    display: none;
}

.js-nav .site-nav.is-open {
    display: block;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.5rem 0 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.site-nav__link {
    display: block;
    padding: 0.7rem 0.25rem;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.site-nav__link:hover {
    color: var(--brand-600);
}

.site-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.site-nav__link[aria-current="page"] {
    color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
    .site-nav__link:hover,
    .site-nav__link[aria-current="page"] {
        color: var(--accent-400);
    }
}

.site-nav__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

@media (min-width: 62rem) {
    /* Brand and navigation share one row once there is width for them; below this
       the navigation is a panel that opens underneath the bar instead. */
    .site-header__inner {
        display: flex;
        align-items: center;
        gap: 2.5rem;
    }

    .site-header__bar {
        flex: none;
        min-height: 4.5rem;
    }

    .site-nav,
    .js-nav .site-nav {
        flex: 1;
        justify-content: space-between;
    }

    .nav-toggle,
    .js-nav .nav-toggle {
        display: none;
    }

    .site-nav,
    .js-nav .site-nav,
    .js-nav .site-nav.is-open {
        display: flex;
        align-items: center;
        gap: 1.75rem;
        padding-bottom: 0;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        padding-top: 0;
        border-top: 0;
    }

    .site-nav__link {
        padding: 0.5rem 0.7rem;
    }

    .site-nav__link[aria-current="page"] {
        text-decoration: underline;
        text-underline-offset: 0.4em;
        text-decoration-thickness: 2px;
    }

    .site-nav__actions {
        flex-direction: row;
        align-items: center;
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    padding: 0.7rem 1.35rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.btn:disabled {
    cursor: progress;
    opacity: 0.75;
}

/* Shown while a form is posting, so a slow connection does not look like a
   button that did nothing. */
.btn.is-busy::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(255 255 255 / 35%);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

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

.btn--primary {
    color: var(--text-inverse);
    background: var(--brand-700);
    border-color: var(--brand-700);
}

.btn--primary:hover {
    background: var(--brand-600);
}

.btn--gold {
    color: var(--brand-900);
    background: var(--accent-500);
    border-color: var(--accent-500);
}

.btn--gold:hover {
    background: var(--accent-400);
}

.btn--ghost {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}

.btn--ghost:hover {
    background: var(--surface-sunken);
}

/* On the navy panels the ghost button has to sit on the dark ground instead. */
.btn--ghost-inverse {
    color: var(--text-inverse);
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 35%);
}

.btn--ghost-inverse:hover {
    background: rgb(255 255 255 / 14%);
}

.btn--block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (min-width: 30rem) {
    .btn-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .btn-row .btn {
        flex: none;
    }
}

.link {
    color: var(--brand-600);
    font-weight: 550;
    text-decoration: none;
    border-radius: 4px;
}

.link:hover {
    text-decoration: underline;
}

.link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.link--arrow::after {
    content: " \2192";
}

/* A link written inline in body copy carries no class of its own. Left alone it
   would be browser-default blue — and purple once visited, which on a navy and
   gold page looks like a mistake. */
main a:not([class]) {
    color: var(--brand-600);
    font-weight: 550;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    border-radius: 4px;
}

main a:not([class]):focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

@media (prefers-color-scheme: dark) {
    .link,
    main a:not([class]) {
        color: var(--accent-400);
    }
}

/* --------------------------------------------------------------------------
   Hero — the navy brand panel from the sign-in screen, widened
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 9vw, 6rem);
    color: var(--text-inverse);
    background:
        radial-gradient(120% 90% at 8% 4%, rgb(23 65 111 / 92%) 0%, transparent 58%),
        radial-gradient(90% 80% at 92% 96%, rgb(201 162 39 / 20%) 0%, transparent 60%),
        linear-gradient(150deg, var(--brand-800) 0%, var(--brand-900) 100%);
}

/* --------------------------------------------------------------------------
   A hero over an image

   Everything here is in service of one thing: white text over an image has to
   stay readable. The navy veil is heaviest at the left, where the headline and
   the blurb sit, and lifts towards the right so the picture is actually visible
   rather than merely implied. Below the two-column breakpoint the copy spans the
   full width, so the veil evens out and deepens.

   The veil lives in a custom property so each image is one line and the two
   gradients are written once. It cannot come from the markup — the CSP allows no
   inline styles — so each image gets its own modifier class below.

   The small screen gets the small file. A phone never downloads the 1408px
   version: only the background of a matching media rule is fetched, which is the
   difference between ~85 KB and ~265 KB on a mobile connection.
   -------------------------------------------------------------------------- */

.hero--photo {
    /* Heaviest behind the headline and the paragraph, lifting towards the
       buttons, which carry their own contrast. */
    --hero-veil:
        linear-gradient(180deg,
            rgb(6 21 41 / 90%) 0%,
            rgb(6 21 41 / 84%) 50%,
            rgb(6 21 41 / 66%) 100%),
        radial-gradient(90% 80% at 92% 96%, rgb(201 162 39 / 20%) 0%, transparent 60%);

    background-color: var(--brand-900);
    /* A landscape image in a tall narrow viewport can only show a slice of
       itself. Favouring 40% down the frame keeps the subject in it. */
    background-position: center 40%;
    background-size: cover;
    /* Never `fixed`: iOS has never handled it, and it janks badly on everything
       else that does. */
    background-attachment: scroll;
    background-repeat: no-repeat;
}

@media (min-width: 48rem) {
    .hero--photo {
        --hero-veil:
            linear-gradient(105deg,
                rgb(6 21 41 / 93%) 0%,
                rgb(6 21 41 / 84%) 42%,
                rgb(10 35 64 / 52%) 100%),
            radial-gradient(90% 80% at 92% 96%, rgb(201 162 39 / 22%) 0%, transparent 60%);

        background-position: center;
    }
}

/* The home page: a terrace with one house in the brand green. */
.hero--streetview {
    background-image: var(--hero-veil), url("../img/top_streetview-small.jpg");
}

@media (min-width: 48rem) {
    .hero--streetview {
        background-image: var(--hero-veil), url("../img/top_streetview.jpg");
    }
}

/* The questions page: an architectural cutaway on cream paper. Line art rather
   than a photograph, and light nearly everywhere, so it needs a heavier veil to
   keep white text off it — and it repays one, because at this strength the
   drawing reads as a blueprint, which is the same idea as the grid overlay.
   The drawing is centred in its frame, so no vertical bias on a phone. */
.hero--plans {
    --hero-veil:
        linear-gradient(180deg,
            rgb(6 21 41 / 94%) 0%,
            rgb(6 21 41 / 89%) 50%,
            rgb(6 21 41 / 76%) 100%);

    background-image: var(--hero-veil), url("../img/house_plans-small.jpg");
    background-position: center;
}

@media (min-width: 48rem) {
    .hero--plans {
        --hero-veil:
            linear-gradient(105deg,
                rgb(6 21 41 / 96%) 0%,
                rgb(6 21 41 / 90%) 45%,
                rgb(10 35 64 / 74%) 100%);

        background-image: var(--hero-veil), url("../img/house_plans.jpg");
    }
}

/* The blueprint grid — a nod to floor plans, faint enough to read over. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 55%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 55%) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(75% 75% at 30% 25%, #000 0%, transparent 78%);
}

/* The grid is a graphic device for a flat navy panel; over a photograph it reads
   as dirt on the lens. Kept, but barely — and after .hero::after, because the two
   selectors have the same specificity and the later one wins. */
.hero--photo::after {
    opacity: 0.05;
}

/* The small print sits where the veil is lightest, over actual brickwork. 50%
   white was plenty on a flat navy panel and is not here. */
.hero--photo .hero__foot {
    color: rgb(255 255 255 / 70%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3rem;
}

.hero__copy {
    max-width: 36rem;
}

.hero__eyebrow {
    color: var(--accent-400);
}

.hero__title {
    margin-bottom: 1.25rem;
    font-weight: 600;
    line-height: 1.08;
}

.hero__blurb {
    max-width: 32rem;
    font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
    color: rgb(255 255 255 / 76%);
}

.hero__points {
    display: grid;
    gap: 0.9rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.hero__points li {
    position: relative;
    padding-left: 1.85rem;
    font-size: 0.9375rem;
    color: rgb(255 255 255 / 82%);
}

.hero__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid var(--accent-500);
}

.hero__foot {
    margin-top: 2.5rem;
    font-size: 0.8125rem;
    color: rgb(255 255 255 / 50%);
}

/* The price card that rides alongside the hero copy. */
.hero__card {
    padding: 1.75rem;
    background: rgb(255 255 255 / 7%);
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(2px);
}

.hero__card h2 {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(255 255 255 / 70%);
    letter-spacing: 0;
}

.hero__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}

.hero__price strong {
    font-size: clamp(2.25rem, 7vw, 2.75rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--accent-400);
}

.hero__price span {
    font-size: 0.875rem;
    color: rgb(255 255 255 / 60%);
}

.hero__card ul {
    display: grid;
    gap: 0.65rem;
    margin: 1.35rem 0 0;
    padding: 1.35rem 0 0;
    list-style: none;
    border-top: 1px solid rgb(255 255 255 / 16%);
    font-size: 0.875rem;
    color: rgb(255 255 255 / 80%);
}

.hero__card li {
    display: flex;
    gap: 0.6rem;
}

.hero__tick {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    color: var(--accent-400);
}

@media (min-width: 62rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: 4rem;
    }
}

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 40rem) {
    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 52rem) {
    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 68rem) {
    .grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card h3 {
    margin-bottom: 0.5rem;
}

.card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.15rem;
    color: var(--brand-600);
    background: rgb(23 65 111 / 10%);
    border-radius: var(--radius);
}

.card__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

@media (prefers-color-scheme: dark) {
    .card__icon {
        color: var(--accent-400);
        background: rgb(201 162 39 / 14%);
    }
}

.card__foot {
    margin-top: auto;
    padding-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Steps — the numbered "how it works" sequence
   -------------------------------------------------------------------------- */

.steps {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 1.6rem 1.6rem 1.6rem 4.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    counter-increment: step;
}

.step::before {
    content: counter(step);
    position: absolute;
    left: 1.5rem;
    top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-900);
    background: var(--accent-500);
    border-radius: 50%;
}

.step h3 {
    margin-bottom: 0.4rem;
    font-size: 1.0625rem;
}

.step p {
    /* A full-width step on a large screen would run to 130 characters a line,
       which is past the point where the eye loses its place returning. */
    max-width: 72ch;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.step__meta {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
}

@media (min-width: 52rem) {
    .steps--columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Fee table
   -------------------------------------------------------------------------- */

.fee {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 58rem) {
    .fee {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
}

.fee__headline {
    padding: 2rem;
    color: var(--text-inverse);
    background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}

.fee__headline h3 {
    color: rgb(255 255 255 / 70%);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.fee__amount {
    display: block;
    font-size: clamp(2.5rem, 8vw, 3rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--accent-400);
}

.fee__amount-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 62%);
}

.checklist {
    display: grid;
    gap: 0.8rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: flex;
    gap: 0.7rem;
    font-size: 0.9375rem;
}

.checklist svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.22rem;
    color: var(--success-600);
}

.checklist--excluded svg {
    color: var(--text-muted);
}

/* A wide table must scroll inside itself rather than push the page sideways. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    /* Momentum scrolling on iOS, and a visible edge so it is clearly scrollable. */
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table caption {
    padding-bottom: 0.65rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: left;
}

.data-table th,
.data-table td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.data-table thead th {
    background: var(--surface-sunken);
    font-weight: 650;
    white-space: nowrap;
}

.data-table tbody th {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.callout {
    padding: 1.15rem 1.35rem;
    background: var(--surface-sunken);
    border-left: 4px solid var(--brand-700);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9375rem;
}

.callout--warn {
    border-left-color: var(--warning-600);
}

.callout h3 {
    margin-bottom: 0.35rem;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   FAQ — <details> so it works with no JavaScript at all
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
    gap: 0.75rem;
}

.faq__item {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.faq__item[open] {
    border-color: var(--border-strong);
}

.faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
}

/* Safari draws its own disclosure triangle unless this is removed. */
.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.faq__chevron {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */

.cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
    color: var(--text-inverse);
    background:
        radial-gradient(100% 120% at 100% 0%, rgb(201 162 39 / 22%) 0%, transparent 55%),
        linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 100%);
    border-radius: var(--radius-xl);
}

.cta h2 {
    max-width: 24rem;
    margin-bottom: 0.75rem;
}

.cta p {
    max-width: 34rem;
    color: rgb(255 255 255 / 76%);
}

.cta .btn-row {
    margin-top: 1.75rem;
}

/* On the navy panel a link has to be gold in both themes — the body-copy navy
   would all but disappear into the background. */
.cta a:not(.btn) {
    color: var(--accent-400);
    font-weight: 550;
}

.cta__foot {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 60%);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem 0;
}

.trust__item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.trust__item svg {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    color: var(--brand-600);
}

.trust__item strong {
    display: block;
    font-size: 0.9375rem;
}

.trust__item span {
    font-size: 0.875rem;
    color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    .trust__item svg {
        color: var(--accent-400);
    }
}

@media (min-width: 52rem) {
    .trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Forms — the contact page
   -------------------------------------------------------------------------- */

.form {
    display: grid;
    gap: 1.15rem;
}

.field {
    display: grid;
    gap: 0.4rem;
}

.field__label {
    font-size: 0.875rem;
    font-weight: 550;
}

.field__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.input,
.textarea,
.select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font: inherit;
    /* 16px or larger, otherwise iOS Safari zooms the page on focus. */
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

.textarea {
    min-height: 9rem;
    resize: vertical;
}

.select {
    /* Room for the chevron drawn as a background image (a data: URI, which the CSP
       allows for img-src, and which costs no extra request). */
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6979' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.15rem;
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--brand-600);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: var(--ring);
}

.input.input-validation-error,
.textarea.input-validation-error,
.select.input-validation-error {
    border-color: var(--danger-600);
}

.field__error,
.field-validation-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--danger-600);
}

/* jquery-validation leaves these spans in place with no message; collapsing them
   keeps the layout from jumping as fields are corrected. The summary is emitted
   by the tag helper whether or not there is anything in it. */
.field__error:empty,
.field-validation-valid,
.validation-summary-valid {
    display: none;
}

/* The honeypot. Taken out of the layout, out of the tab order and out of the
   accessibility tree — a person never encounters it, and a form-filler that
   reads the DOM rather than the rendering fills it in and gives itself away.
   display:none is avoided deliberately: some bots skip hidden fields. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    display: flex;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    font-size: 0.9375rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.alert svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
}

.alert--error {
    color: var(--danger-600);
    background: var(--danger-50);
    border-color: var(--danger-200);
}

.alert--success {
    color: var(--success-600);
    background: rgb(6 118 71 / 8%);
    border-color: rgb(6 118 71 / 25%);
}

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

.alert li + li {
    margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   Contact details
   -------------------------------------------------------------------------- */

.contact-details {
    display: grid;
    gap: 1.5rem;
    margin: 0;
}

.contact-details dt {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-details dd {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    padding-block: 3rem 2rem;
    color: rgb(255 255 255 / 70%);
    background: var(--brand-900);
    font-size: 0.875rem;
}

.site-footer__grid {
    display: grid;
    gap: 2.25rem;
}

@media (min-width: 46rem) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

.site-footer__logo {
    width: 9rem;
    height: auto;
    margin-bottom: 1rem;
}

.site-footer h2 {
    margin-bottom: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 45%);
}

.site-footer ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: rgb(255 255 255 / 78%);
    text-decoration: none;
    border-radius: 4px;
}

.site-footer a:hover {
    color: var(--accent-400);
    text-decoration: underline;
}

.site-footer a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(201 162 39 / 45%);
}

.site-footer__legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
    font-size: 0.8125rem;
    color: rgb(255 255 255 / 55%);
}

.site-footer__legal p {
    margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   Skip link — first thing in the tab order, invisible until focused
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    color: var(--text-inverse);
    background: var(--brand-700);
    border-radius: var(--radius);
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Reveal on scroll

   The initial hidden state is applied only when marketing.js has set
   .js-reveal on <html>, so with JavaScript disabled — or before the script
   runs — every element is simply visible. Content is never hidden by a
   stylesheet that something else has to come along and undo.
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-reveal [data-reveal="left"] {
    transform: translateX(-1.5rem);
}

.js-reveal [data-reveal="right"] {
    transform: translateX(1.5rem);
}

.js-reveal [data-reveal="scale"] {
    transform: scale(0.96);
}

/* On a narrow screen the two columns are stacked, so a sideways entrance says
   nothing — and a full-width element translated horizontally is the classic
   cause of a page that scrolls sideways. Below the two-column breakpoint they
   rise like everything else. */
@media (max-width: 52rem) {
    .js-reveal [data-reveal="left"],
    .js-reveal [data-reveal="right"] {
        transform: translateY(1.25rem);
    }
}

.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Children of a revealed group come in one after another. Set as a custom
   property rather than a style attribute, because the CSP forbids those. */
[data-reveal-stagger] > * {
    --reveal-delay: 0ms;
}

[data-reveal-stagger] > *:nth-child(2) { --reveal-delay: 90ms; }
[data-reveal-stagger] > *:nth-child(3) { --reveal-delay: 180ms; }
[data-reveal-stagger] > *:nth-child(4) { --reveal-delay: 270ms; }
[data-reveal-stagger] > *:nth-child(5) { --reveal-delay: 360ms; }
[data-reveal-stagger] > *:nth-child(6) { --reveal-delay: 450ms; }
[data-reveal-stagger] > *:nth-child(7) { --reveal-delay: 540ms; }
[data-reveal-stagger] > *:nth-child(n+8) { --reveal-delay: 630ms; }

/* Someone who has asked for less motion gets none of it: the content appears,
   it just does not travel. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Long-form legal documents — terms, privacy, cookies
   -------------------------------------------------------------------------- */

.legal {
    max-width: 46rem;
    margin: 0 auto;
    /* Legal text is read, not skimmed. A measure of roughly 70 characters and a
       looser line height do more for comprehension than any amount of styling. */
    line-height: 1.75;
}

.legal__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.legal__header h1 {
    font-size: clamp(1.9rem, 5vw, 2.5rem);
}

.legal__meta {
    margin: 0.25rem 0 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.legal__lede {
    font-size: 1.0625rem;
    color: var(--text-muted);
}

.legal h2 {
    margin-top: 2.75rem;
    margin-bottom: 0.85rem;
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    /* So a link to #complaints does not land the heading under the sticky header. */
    scroll-margin-top: 5.5rem;
}

.legal h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
}

.legal ul,
.legal ol {
    padding-left: 1.35rem;
}

.legal li {
    margin-bottom: 0.4rem;
}

.legal a {
    color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
    .legal a {
        color: var(--accent-400);
    }
}

.legal__toc {
    padding: 1.25rem 1.5rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.legal__toc h2 {
    margin: 0 0 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.legal__toc ol {
    margin: 0;
    padding-left: 1.2rem;
}

@media (min-width: 34rem) {
    .legal__toc ol {
        columns: 2;
        column-gap: 2rem;
    }
}

.legal__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 0;
    margin: 1.25rem 0;
    padding: 1.1rem 1.35rem;
    background: var(--surface-sunken);
    border-radius: var(--radius);
}

.legal__facts dt {
    font-weight: 600;
}

.legal__facts dd {
    margin: 0 0 0.75rem;
}

@media (min-width: 34rem) {
    .legal__facts {
        grid-template-columns: minmax(9rem, auto) 1fr;
        gap: 0.4rem 1.5rem;
    }

    .legal__facts dd {
        margin-bottom: 0;
    }
}

.legal__callout {
    padding: 1rem 1.25rem;
    background: var(--surface-sunken);
    border-left: 4px solid var(--brand-700);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal__callout--warn {
    border-left-color: var(--warning-600);
}

/* A wide table must scroll inside itself rather than push the page sideways. */
.legal__table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 1.25rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal__table caption {
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: left;
}

.legal__table th,
.legal__table td {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.legal__table thead th {
    background: var(--surface-sunken);
    font-weight: 650;
    white-space: nowrap;
}

.legal__table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.legal code {
    padding: 0.1rem 0.3rem;
    background: var(--surface-sunken);
    border-radius: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--danger-600);
}

/* A firm particular that has not been configured. Loud on purpose: outside
   Development the application refuses to start rather than publish one. */
.legal-missing {
    padding: 0.05rem 0.35rem;
    background: #fee4e2;
    border-radius: 0.2rem;
    color: #912018;
    font-weight: 600;
}

.is-hidden {
    display: none !important;
}

/* Visible only to a screen reader. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Forced colours — Windows high-contrast strips the palette; restore the
   affordances that carry meaning.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .card,
    .step,
    .faq__item,
    .input,
    .textarea,
    .select,
    .hero__card {
        border: 1px solid CanvasText;
    }

    .btn {
        border: 1px solid ButtonText;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Print — a fee page or a policy is the thing people print
   -------------------------------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .cta,
    .skip-link {
        display: none !important;
    }

    body.site-page {
        background: #fff;
        color: #000;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   The header band

   Navy rather than white. The page below it is light and image-led, so a white
   bar dissolved into the hero and the navigation had to be hunted for; a dark
   band separates the two and gives the links a proper contrast ratio against
   their background instead of grey-on-white.

   Scoped to .site-header throughout: these are overrides of tokens that mean
   "light surface" everywhere else on the page, and letting them leak would
   invert the whole site.
   -------------------------------------------------------------------------- */

.site-header {
    --header-navy: #103156;
    --header-navy-raised: #17416f;

    background: var(--header-navy);
    border-bottom-color: rgb(255 255 255 / 12%);
}

/* The shadow reads as light-on-light in the original; over a dark bar it needs
   to be deeper to be visible at all. */
.site-header.is-stuck {
    box-shadow: 0 2px 16px rgb(4 10 20 / 45%);
}

.site-header .site-nav__link {
    color: rgb(255 255 255 / 88%);
}

.site-header .site-nav__link:hover,
.site-header .site-nav__link[aria-current="page"] {
    color: var(--accent-400);
}

/* The hamburger: its border and glyph both inherited the light-surface colours. */
.site-header .nav-toggle {
    color: rgb(255 255 255 / 88%);
    border-color: rgb(255 255 255 / 28%);
}

.site-header .nav-toggle:hover {
    color: #fff;
    border-color: rgb(255 255 255 / 55%);
}

/* Below the breakpoint the navigation is a panel that drops out of the bar, so
   it is part of the band and has to be the same colour as it. */
@media (max-width: 61.999rem) {
    .site-header .site-nav {
        border-top: 1px solid rgb(255 255 255 / 12%);
        margin-top: 0.25rem;
        padding-top: 0.5rem;
    }
}

/* "Your dashboard" / "Sign in": a white-backed outline button on navy looks like
   a hole punched in the bar. Outline it in the band's own colours instead. */
.site-header .btn--ghost {
    color: #fff;
    background: transparent;
    border-color: rgb(255 255 255 / 45%);
}

.site-header .btn--ghost:hover {
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 75%);
}

/* The primary button is navy on navy, which is a rectangle of nothing. Gold is
   already the brand's accent and is the one colour on the palette that carries
   against this background. */
.site-header .btn--primary {
    color: var(--brand-900);
    background: var(--accent-500);
    border-color: var(--accent-500);
}

.site-header .btn--primary:hover {
    background: var(--accent-400);
    border-color: var(--accent-400);
}

/* In dark mode the surrounding page is already dark, so the band needs to lift
   away from it rather than sit flush. */
@media (prefers-color-scheme: dark) {
    .site-header {
        background: var(--header-navy-raised);
    }
}