/* ==========================================================================
   State of My Money - marketing site
   Plain CSS, no build step. One file, loaded by every page.

   The palette is umarkett's "Ledger" set: pine for brand and buttons, amber as
   the single accent, bone for alternating sections, and warm borders. It is
   deliberately not the app's blue/slate scale - the product and the marketing
   site share a family palette (warm, editorial, bookkeeping), not their exact
   widget colours.
   ========================================================================== */

/* ===== Reset & base ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brand */
    --primary: #0E3A34;         /* pine  - brand, buttons, links */
    --primary-dark: #092824;    /* hover state for pine */
    --primary-mid: #17564A;     /* light end of the pine gradient */

    /* Accent - used sparingly, as the "attention" colour */
    --accent: #D98A1F;          /* amber */
    --accent-bright: #F0B24A;   /* amber that survives on a pine surface */
    /* Amber as *text* on a light surface needs the opposite treatment: #D98A1F
       on white is only 2.76:1. This is the same hue darkened until small caps
       and glyphs clear 4.5:1. */
    --accent-ink: #9A5B0A;

    /* Neutrals */
    --secondary: #5F6B67;       /* muted pine-grey */
    --on-dark-muted: rgba(245, 242, 236, 0.80);
    --text-dark: #1F2937;       /* headings and body copy */
    --text-light: #4B5A55;      /* secondary copy */
    --bg-gray: #F5F2EC;         /* bone - alternating sections */
    --border: #E2DCD0;          /* warm border */
    --white: #ffffff;

    /* Semantics that are not in the brand ramp but still have to be readable */
    --error: #B42318;
    --error-on-dark: #FCA5A5;

    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;

    --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.05);
    --shadow: 0 4px 12px rgba(31, 41, 55, 0.07);
    --shadow-lg: 0 18px 40px rgba(9, 40, 36, 0.28);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.65;
    color: var(--text-light);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    color: var(--text-dark);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

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

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary);
    color: var(--white);
    padding: 0.75rem 1rem;
    z-index: 1200;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== Navigation ======================================================= */
.nav {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
}

.logo-mark {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 8px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* :not(.btn-primary) matters: a bare `.nav-links a` rule outranks
   `.btn-primary` (0,1,1 vs 0,1,0) and would repaint the CTA's white text with
   the dark body colour, making it unreadable on the pine button. */
.nav-links a:not(.btn-primary) {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color 0.2s;
}

.nav-links a:not(.btn-primary):hover {
    color: var(--primary);
}

/* ===== Buttons ========================================================== */
.btn-primary,
.btn-secondary {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.cookie-banner .btn-primary:focus-visible,
.cookie-banner .btn-secondary:focus-visible {
    outline-color: var(--accent-bright);
}

/* ===== Hero ============================================================= */
/* A dark pine banner. Every button and piece of text that sits here is
   inverted below, because pine on pine disappears and white on amber fails
   contrast - which is why amber is kept off buttons entirely. */
.hero {
    position: relative;
    padding: 5.5rem 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
    color: var(--white);
    overflow: hidden;
}

/* A soft amber glow, so the banner is not a flat rectangle. Kept at very low
   opacity so it never competes with the copy. */
.hero::after {
    content: "";
    position: absolute;
    top: -18rem;
    right: -12rem;
    width: 44rem;
    height: 44rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 138, 31, 0.22) 0%, transparent 62%);
    pointer-events: none;
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
    align-items: center;
}

/* White text, amber border. Amber as the *text* colour only reaches 4.48:1 on
   the light end of the pine gradient, and the pill's translucent fill lightens
   the background further, so the accent lives in the border and the text stays
   white (10.7:1 worst case). */
.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(9, 40, 36, 0.35);
    border: 1px solid rgba(240, 178, 74, 0.55);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: clamp(2.125rem, 4.5vw, 3.125rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1.5rem;
}

/* The amber rule is the site's signature divider: it appears under the hero
   title, the page titles and the closing CTA title, and nowhere else. */
.hero-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 1.5rem 0 0;
    background: var(--accent);
    border-radius: 2px;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--on-dark-muted);
    margin-bottom: 2.25rem;
    max-width: 34rem;
}

.hero-ctas {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* Buttons invert on a dark pine surface and stay normal everywhere else. This
   is keyed off the surface (.hero, .section--cta) rather than off .hero-ctas,
   because .hero-ctas is also used on light sections - subscribed.html and the
   404 page - where a white button would be invisible on white. */
.hero .hero-ctas .btn-primary,
.section--cta .hero-ctas .btn-primary {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.hero .hero-ctas .btn-primary:hover,
.section--cta .hero-ctas .btn-primary:hover {
    background: var(--bg-gray);
    border-color: var(--bg-gray);
}

.hero .hero-ctas .btn-secondary,
.section--cta .hero-ctas .btn-secondary {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.55);
}

.hero .hero-ctas .btn-secondary:hover,
.section--cta .hero-ctas .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
    color: var(--white);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.hero-trust li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-trust svg {
    flex: none;
    color: var(--accent-bright);
}

/* On the Mint page the hero holds a centred block instead of a two-column
   grid, so it reads like a page banner rather than a landing hero. */
.hero .section-head {
    margin-bottom: 0;
}

.hero .section-head .hero-ctas {
    justify-content: center;
}

.hero .section-head .hero-title::after {
    margin: 1.5rem auto 0;
}

/* ===== Report card (hero illustration) ================================== */
/* An illustration of the reports screen, not a screenshot. The white card
   against pine is the strongest contrast on the page, which is why it carries
   the hero. */
.report-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
    max-width: 26rem;
    margin-left: auto;
}

.report-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.report-card__title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9375rem;
}

.report-card__badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary);
    background: var(--bg-gray);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.report-card__stat {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.report-card__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--secondary);
    margin-bottom: 0.25rem;
}

.report-card__value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

/* Money that went up. Pine rather than a traffic-light green keeps the card
   inside the palette; the sign carries the meaning. */
.report-card__value--pos {
    color: var(--primary);
}

.report-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
    color: var(--secondary);
    margin-bottom: 0.75rem;
}

.report-card__row strong {
    color: var(--text-dark);
    font-weight: 600;
}

.bars {
    display: grid;
    gap: 0.875rem;
    margin: 1.25rem 0;
}

.bar {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--secondary);
}

.bar__track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-gray);
    overflow: hidden;
}

.bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
}

/* A ramp rather than a rainbow: two pine tints, a stone, and amber as the one
   bright note. Keeps the card reading as a single designed object. */
.bar__fill--2 { background: var(--primary-mid); }
.bar__fill--3 { background: var(--secondary); }
.bar__fill--4 { background: var(--accent); }

.report-card__footnote {
    font-size: 0.75rem;
    color: var(--secondary);
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

/* ===== Sections ========================================================= */
.section {
    padding: 5rem 0;
}

.section--tint {
    background: var(--bg-gray);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section--cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
    color: var(--white);
    border: 0;
}

.section-head {
    max-width: 46rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.0625rem;
    color: var(--text-light);
}

.section--cta .section-title,
.section--cta .section-intro {
    color: var(--white);
}

.section--cta .section-intro {
    color: var(--on-dark-muted);
}

/* ===== Cards & grids ==================================================== */
.grid {
    display: grid;
    gap: 1.75rem;
}

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

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(31, 41, 55, 0.06);
    border-color: var(--primary);
}

.card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}

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

/* Amber disc, pine glyph - the same chip as umarkett's feature icons. */
.card__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
}

.card__kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 0.75rem;
}

/* ===== Steps ============================================================ */
.steps {
    counter-reset: step;
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(3, 1fr);
}

.step {
    position: relative;
    padding: 2.25rem 1.75rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -1.125rem;
    left: 1.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(9, 40, 36, 0.22);
}

.step h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}

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

/* ===== Candid panel ===================================================== */
.candid {
    max-width: 52rem;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.5rem;
}

.candid h3 {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.875rem;
}

.candid p + p {
    margin-top: 0.875rem;
}

.candid ul {
    margin: 1rem 0 0 1.125rem;
    font-size: 0.9375rem;
}

.candid li {
    margin-bottom: 0.5rem;
}

.candid strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* ===== Prose (legal pages) ============================================= */
.prose {
    max-width: 46rem;
    margin: 0 auto;
}

.prose .section-title {
    text-align: left;
    margin-bottom: 0.5rem;
}

.prose h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 2.75rem 0 0.875rem;
    scroll-margin-top: 5.5rem;
}

.prose h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text-light);
}

.prose ul,
.prose ol {
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose li::marker {
    color: var(--secondary);
}

.prose strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* Pine against the muted body copy is only ~1.7:1, so colour alone cannot mark
   a link. The weight step carries it and the underline is saved for hover. */
.prose a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.prose a:hover,
.prose a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.prose th,
.prose td {
    text-align: left;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-light);
}

.prose th {
    color: var(--text-dark);
    font-weight: 600;
    background: var(--bg-gray);
}

.prose .updated {
    font-size: 0.875rem;
    color: var(--secondary);
    margin-bottom: 2.5rem;
}

/* ===== Comparison table ================================================ */
.compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.9375rem;
    box-shadow: var(--shadow-sm);
}

.compare th,
.compare td {
    padding: 1.125rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-light);
}

.compare tr:last-child th,
.compare tr:last-child td {
    border-bottom: 0;
}

.compare thead th {
    background: var(--bg-gray);
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.compare tbody th {
    font-weight: 500;
    color: var(--text-dark);
}

/* Pine wash and a dark header, so the favoured column reads as chosen without
   resorting to a checkmark column. */
.compare .col-us {
    background: rgba(14, 58, 52, 0.045);
    color: var(--text-dark);
    font-weight: 500;
}

.compare thead .col-us {
    background: var(--primary);
    color: var(--white);
}

/* ===== FAQ ============================================================== */
.faq {
    max-width: 46rem;
    margin: 0 auto;
}

.faq details {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.0625rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1;
    flex: none;
}

.faq details[open] summary::after {
    content: '\2013';
}

.faq p {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    color: var(--text-light);
}

/* ===== Subscribe ======================================================= */
/* One component, two surfaces: a centred block on the page body and a dark
   strip in the footer. Both share .subscribe-form so js/subscribe.js can drive
   every form with a single handler. */
.subscribe-block {
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.subscribe-block .section-title {
    margin-bottom: 0.75rem;
}

.subscribe-block .section-intro {
    margin-bottom: 1.75rem;
}

.subscribe-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* `hidden` loses to display:grid above, so state the intent explicitly. */
.subscribe-form[hidden] {
    display: none;
}

.subscribe-input {
    width: 100%;
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.subscribe-input::placeholder {
    color: var(--secondary);
}

.subscribe-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 58, 52, 0.15);
}

/* Off-screen rather than display:none, because some bots skip hidden fields. */
.subscribe-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.subscribe-status {
    margin: 1rem 0 0;
    min-height: 1.25rem;
    font-size: 0.9375rem;
}

.subscribe-status--success {
    color: var(--primary);
    font-weight: 600;
}

.subscribe-status--error {
    color: var(--error);
    font-weight: 600;
}

.subscribe-note {
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    color: var(--secondary);
}

.subscribe-note a {
    color: inherit;
    text-decoration: underline;
}

/* Footer variant: a strip above the link columns, on the dark slate footer. */
.footer-subscribe {
    max-width: 34rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(245, 242, 236, 0.18);
}

.footer-subscribe .footer-title {
    margin: 0 0 0.5rem;
}

.footer-subscribe .subscribe-text {
    margin: 0 0 1.25rem;
    color: var(--on-dark-muted);
}

.footer-subscribe .subscribe-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 242, 236, 0.30);
    color: var(--white);
}

.footer-subscribe .subscribe-input::placeholder {
    color: var(--on-dark-muted);
}

.footer-subscribe .subscribe-input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px rgba(240, 178, 74, 0.25);
}

/* Pine on the slate footer measures about 1.2:1, so the button inverts the
   same way it does in the hero and the CTA band. */
.footer-subscribe .btn-primary {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.footer-subscribe .btn-primary:hover {
    background: var(--bg-gray);
    border-color: var(--bg-gray);
}

.footer-subscribe .subscribe-status--success {
    color: var(--accent-bright);
}

.footer-subscribe .subscribe-status--error {
    color: var(--error-on-dark);
}

.footer-subscribe .subscribe-note {
    margin-top: 0.875rem;
    color: var(--on-dark-muted);
}

/* ===== Footer ========================================================== */
.footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 3.5rem 0 2rem;
}

.footer-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(245, 242, 236, 0.18);
}

.footer-text {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--on-dark-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    padding-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===== Cookie banner =================================================== */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    /* --text-dark at 92%: enough to read as a layer over the page rather than a
       band across it. The blur keeps scrolling text from showing through. */
    background: rgba(31, 41, 55, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    padding: 1.5rem 0;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(120%);
    visibility: hidden;
    transition: transform 0.3s ease-out, visibility 0.3s;
}

.cookie-banner.show {
    transform: translateY(0);
    visibility: visible;
}

.cookie-inner {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cookie-text {
    flex: 1;
    min-width: 260px;
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

/* These links sit inline in muted copy, so unlike the article body there is no
   colour difference to lean on. The body goes muted and the links stay white
   and semibold. */
.cookie-text a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.cookie-text a:hover,
.cookie-text a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Both buttons invert on the dark bar. A pine button measured 1.17:1 against
   it - no perceptible edge - so Accept is a solid bone fill and Decline a bone
   outline. Refusing has to be as easy as accepting, so Decline is a full-size
   button beside Accept rather than a link or a dimmed-out afterthought. */
.cookie-banner .btn-primary {
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--white);
    padding: 0.75rem 2rem;
    white-space: nowrap;
}

.cookie-banner .btn-primary:hover {
    background: var(--bg-gray);
    border-color: var(--bg-gray);
}

.cookie-banner .btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--on-dark-muted);
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

.cookie-banner .btn-secondary:hover {
    background: rgba(245, 242, 236, 0.12);
    border-color: var(--white);
    color: var(--white);
}

/* The bar is fixed, so on short viewports it sits on top of whatever is at the
   bottom of the page. main.js sets --cookie-banner-h to the measured height. */
body.cookie-visible {
    padding-bottom: var(--cookie-banner-h, 7rem);
}

/* ===== Closing CTA band ================================================= */
.cta-band {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto;
}

.cta-band .section-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 1.5rem auto 0;
    background: var(--accent);
    border-radius: 2px;
}

.cta-band .section-intro {
    margin-bottom: 2rem;
}

.cta-band .hero-ctas {
    justify-content: center;
    margin-bottom: 0;
}

/* ===== Not found ======================================================== */
.notfound {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
    padding: 3rem 0;
}

.notfound h1 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.notfound p {
    color: var(--text-light);
}

.notfound .hero-ctas {
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 0;
}

/* ===== Responsive ====================================================== */
@media (max-width: 900px) {
    .hero {
        padding: 3.5rem 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .report-card {
        margin-left: 0;
        max-width: 100%;
    }

    .grid--3,
    .grid--2,
    .steps {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .section {
        padding: 3.5rem 0;
    }

    .nav-links {
        gap: 1.25rem;
    }

    /* Keep the header to the mark and the CTA on small screens. */
    .nav-links a:not(.btn-primary) {
        display: none;
    }

    .nav-links a.keep {
        display: inline;
    }

    .card,
    .candid {
        padding: 1.5rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        justify-content: flex-start;
    }

    /* The comparison table would otherwise crush three columns of copy into an
       unreadable width; let it scroll instead. */
    .compare {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .cookie-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .cookie-actions,
    .cookie-banner .btn-primary,
    .cookie-banner .btn-secondary {
        width: 100%;
    }

    .cookie-banner .btn-primary,
    .cookie-banner .btn-secondary {
        padding: 0.75rem 1.5rem;
    }

    .hero-ctas .btn-lg,
    .section--cta .btn-lg {
        width: 100%;
        text-align: center;
    }
}