/* ==========================================================================
   upfit.plus, styles. One file, hand written, served directly.

   Tokens first, then base, then components. Colour, weight, spacing, radius and
   shadow values come from the UPfit.cloud brand kit and are authoritative. The
   type scale is derived: the brand scale is fixed px calibrated for 1920x1080
   slides, so the roles and proportions are kept and the sizes become fluid.

   Section headers follow the convention css-index.py parses, so the question
   "do we already have this component?" can be answered without reading.
   ========================================================================== */

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
:root {
    /* Navy, the foundation */
    --navy-primary: #001247;
    --navy-secondary: #2a3174;

    /* The three brand accents */
    --blue-brand: #166397;
    --orange-brand: #FBAD50;
    --turquoise: #00BFC5;

    /* The wave: the brand's visual signature. */
    --wave-turquoise: #00BFC5;
    --wave-orange: #FBAD50;
    --wave-coral: #F15A24;
    --wave-magenta: #DD003B;
    --wave-magenta-dark: #A8003D;
    --wave-height: 8px;

    /* Neutrals */
    --white: #ffffff;
    --ink: #333333;
    --ink-muted: #5b6572;
    --gray-caption: #9AA5B1;
    --gray-200: #e5e9ef;
    --gray-100: #f2f4f7;
    --gray-50: #f8f9fb;

    /* Pastel tints, card fills only */
    --pastel-blue: #eaf1f8;
    --pastel-cream: #fdf5e6;
    --pastel-green: #e8f4ec;
    --pastel-orange: #fdecd8;
    --pastel-red: #fae1e6;
    --pastel-gray: #eef0f3;

    /* Status text, paired with the pastel fills above */
    --status-green: #1f7a3d;
    --status-orange: #b8651c;
    --status-red: #a8003d;

    /* Families */
    --font-display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Web type scale, derived from the brand scale. */
    --fs-h1: clamp(1.9rem, 1.7rem + 1.8vw, 3rem);
    --fs-h2: clamp(1.35rem, 1.25rem + 0.7vw, 1.75rem);
    --fs-h3: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
    --fs-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
    --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    --fs-key-number: clamp(2.5rem, 1.9rem + 3.2vw, 4.5rem);
    --fs-eyebrow: 0.75rem;
    --fs-caption: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Line heights */
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* Letter spacing */
    --tracking-eyebrow: 0.14em;
    --tracking-tight: -0.01em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Shadows, sober, navy at low alpha */
    --shadow-sm: 0 1px 2px rgba(0, 18, 71, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 18, 71, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 18, 71, 0.10);

    /* Layout */
    --page-max: 1200px;
    --page-pad: clamp(var(--space-4), 2vw, var(--space-7));

    /* Motion. */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur: 180ms;
}

/* ── 2. Reset and base ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--navy-primary);
    margin: 0;
    text-wrap: balance;
}

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

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

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

a {
    color: var(--blue-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

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

/* One visible focus style for everything, and it survives on any background. */
:focus-visible {
    outline: 3px solid var(--blue-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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

/* ── 3. Layout helpers ────────────────────────────────────────────────────── */
.nav-inner,
.hero-inner,
.tools-inner,
.faq-inner,
.notfound-inner,
.foot-inner,
.foot-legal,
.eco-inner,
.tool {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(-1 * var(--space-9));
    z-index: 20;
    padding: var(--space-3) var(--space-4);
    background: var(--navy-primary);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

.skip-link:focus {
    top: var(--space-4);
    color: var(--white);
}

/* ── 4. Wave and eyebrow ──────────────────────────────────────────────────── */
/* The wave, as five equal segments. */
.wave {
    display: flex;
    height: var(--wave-height);
}

.wave span {
    flex: 1 1 0;
    min-width: 0;
}

.wave-1 { background: var(--wave-turquoise); }
.wave-2 { background: var(--wave-orange); }
.wave-3 { background: var(--wave-coral); }
.wave-4 { background: var(--wave-magenta); }
.wave-5 { background: var(--wave-magenta-dark); }

/* The gradient hairline, the other form from the brand kit. */
.rule-wave {
    height: 4px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg,
        var(--wave-magenta-dark) 0%,
        var(--wave-magenta) 22%,
        var(--wave-coral) 45%,
        var(--wave-orange) 65%,
        var(--wave-turquoise) 100%);
}

/* Small uppercase label above a title, orange. */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--orange-brand);
}

/* On white the brand orange is 1.9:1, far below any threshold, so an eyebrow on a light
   background uses the blue instead. */
.eyebrow-blue {
    color: var(--blue-brand);
}

/* ── 5. Buttons ───────────────────────────────────────────────────────────── */
/* min-height 44px on every variant. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.btn-primary {
    background: var(--blue-brand);
    color: var(--white);
}

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

/* Orange fill with navy text, for a call to action sitting on navy. */
.btn-accent {
    background: var(--orange-brand);
    color: var(--navy-primary);
}

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

/* The secondary action on a dark background: an outline, no fill, so the two buttons are not
   competing. */
.btn-ghost {
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--white);
}

.btn-ghost:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.btn-outline {
    border-color: var(--gray-200);
    background: var(--white);
    color: var(--navy-primary);
}

.btn-outline:hover {
    border-color: var(--blue-brand);
    color: var(--blue-brand);
}

/* ── 6. Navigation ────────────────────────────────────────────────────────── */
.nav {
    border-bottom: 1px solid var(--gray-200);
    background: var(--white);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 72px;
    padding-block: var(--space-3);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: 44px;
    color: var(--navy-primary);
    text-decoration: none;
}

.nav-logo {
    width: auto;
    height: 34px;
}

.nav-brand-name {
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-left: var(--space-3);
    border-left: 1px solid var(--gray-200);
}

@media (max-width: 639px) {
    /* The descriptor goes before the logo does. */
    .nav-brand-name {
        display: none;
    }
}

/* ── 7. Hero ──────────────────────────────────────────────────────────────── */
/* Navy, like the brochure cover, and that is the whole reason it lands. */
.hero {
    position: relative;
    isolation: isolate;
    background: var(--navy-primary);
    color: var(--gray-200);
}

/* The photograph and the scrim are both absolutely positioned behind the content, with the
   content lifted by z-index rather than by document order. */
.hero-photo,
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-photo picture,
.hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* A GRADIENT scrim, not a flat one, and that is what finally lets the photograph be seen. */
.hero-scrim {
    background: rgba(0, 18, 71, 0.88);
}

@media (min-width: 900px) {
    .hero-scrim {
        background: linear-gradient(100deg,
            rgba(0, 18, 71, 0.94) 0%,
            rgba(0, 18, 71, 0.94) 44%,
            rgba(0, 18, 71, 0.55) 100%);
    }
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}

/* Facts, not badges. */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.hero-chips li {
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--white);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (min-width: 900px) {
    /* minmax(0, ...) on both tracks. */
    .hero-inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
    }
}

.hero-copy {
    min-width: 0;
}

.hero-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    color: var(--white);
}

/* The second line was a gradient clipped to the text in the React version, which the design
   system rules out. */
.hero-title-accent {
    display: block;
    color: var(--turquoise);
}

/* An OPAQUE token rather than white at an alpha. */
.hero-deck {
    margin-top: var(--space-5);
    max-width: 54ch;
    font-size: var(--fs-body-lg);
    color: var(--gray-200);
}

/* The stack: one prominent card, three small ones cascading behind it. */
.hero-stack {
    position: relative;
    min-width: 0;
}

/* The figure block. */
.hero-total {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    background: var(--navy-primary);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.hero-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Slightly lighter than the total card, so the hierarchy is fill and not only size. */
.hero-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #0a1e57;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* The icon in a tinted tile rather than loose on the fill. */
.hero-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: rgba(0, 191, 197, 0.14);
    color: var(--turquoise);
}

.hero-card-icon .fa-light {
    font-size: 0.95rem;
}

.hero-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.hero-card-name {
    min-width: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    color: var(--gray-200);
}

/* The share of the total, as a bar. */
.hero-card-bar {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.hero-card-bar-track {
    fill: rgba(255, 255, 255, 0.16);
}

.hero-card-bar-fill {
    fill: var(--turquoise);
}

.hero-card-value {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hero-card-unit {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-caption);
}

@media (min-width: 900px) {
    /* The cascade. */
    .hero-cards {
        margin-top: var(--space-3);
        gap: 0;
        padding-left: var(--space-5);
    }

    .hero-card {
        position: relative;
    }

    .hero-card-1 {
        margin-left: 0;
        z-index: 1;
    }

    .hero-card-2 {
        margin-top: calc(-1 * var(--space-2));
        margin-left: var(--space-5);
        z-index: 2;
    }

    .hero-card-3 {
        margin-top: calc(-1 * var(--space-2));
        margin-left: calc(2 * var(--space-5));
        z-index: 3;
    }
}

/* Bigger than a tool's figure, because it is the sum of nine of them, and tabular so the digits
   sit in a stable grid. */
.hero-total-number {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 2rem + 4.2vw, 5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.hero-total-unit {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--orange-brand);
}

.hero-total-label {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--white);
}

.hero-total-note {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--gray-caption);
}

/* ── 8. Tool groups and cards ─────────────────────────────────────────────── */
.tools {
    padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

/* The second group gets the tint. */
.tools + .tools {
    background: var(--gray-50);
}

/* The group heading carries a large ordinal on the right, the way the brochure numbers its
   chapters. */
.tools-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
}

.tools-title {
    font-size: var(--fs-h2);
    min-width: 0;
}

/* Orange, as in the brochure, and that needs saying out loud: brand orange on white is 1.9:1,
   which no text may use. */
.tools-num {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--orange-brand);
}

/* The dot is turquoise in the brochure. Same reasoning, and it is four pixels wide. */
.tools-num::after {
    content: ".";
    color: var(--turquoise);
}

.tools-deck {
    margin-top: var(--space-3);
    max-width: 60ch;
    color: var(--ink-muted);
}

/* Three per row at the top, two on a tablet, one on a phone. */
.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

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

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

.tool-card {
    display: flex;
    min-width: 0;
}

.tool-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

a.tool-card-link:hover {
    border-color: var(--blue-brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--ink);
}

/* The icon in an orange disc. */
.tool-card-icon {
    display: grid;
    place-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    background: var(--orange-brand);
    border-radius: 50%;
    transition: background-color var(--dur) var(--ease);
}

.tool-card-link .fa-light {
    font-size: 1.35rem;
    color: var(--navy-primary);
}

/* On hover the disc goes to the deeper orange, so the whole card has one hover state rather than
   a pill that reacts and an icon that does not. */
.tool-card-link:hover .tool-card-icon {
    background: var(--wave-coral);
}

.tool-card-title {
    font-size: var(--fs-h3);
}

.tool-card-desc {
    flex: 1 1 auto;
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
    color: var(--ink-muted);
}

/* The card's action, as a pill. */
.tool-card-action {
    align-self: flex-start;
    margin-top: auto;
    color: var(--blue-brand);
}

.tool-card-link:hover .tool-card-action {
    background: var(--blue-brand);
    border-color: var(--blue-brand);
    color: var(--white);
}

/* A planned tool is not a link, because its address answers a real 404. */
.tool-card-planned .tool-card-link {
    background: var(--gray-50);
    box-shadow: none;
}

.tool-card-planned .tool-card-title,
.tool-card-planned .tool-card-link .fa-light {
    color: var(--ink-muted);
}

.tool-card-chip {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    background: var(--pastel-gray);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--ink-muted);
}

/* ── 9. FAQ ───────────────────────────────────────────────────────────────── */
/* <details> and <summary>, so it opens with no JavaScript, and the question inside the summary
   is a real heading, which the spec allows as its first child. */
/* The zebra is at BAND level, not at row level: each full width section alternates, so the page
   reads as white, tint, white as you scroll. */
.faq {
    padding-block: clamp(var(--space-7), 5vw, var(--space-9));
    background: var(--white);
}

/* Same head as a tool group, so the editorial numbering runs 01, 02, 03 down the page rather
   than stopping where the cards stop. */
.faq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
}

.faq-title {
    font-size: var(--fs-h2);
    min-width: 0;
}

/* One block with hairlines between the rows, not ten separate cards. */
.faq-list {
    margin-top: var(--space-6);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-item + .faq-item {
    border-top: 1px solid var(--gray-200);
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--dur) var(--ease);
}

.faq-item summary:hover {
    background: var(--pastel-blue);
}

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

/* The marker is a ::after on the summary, so the sign is presentational and never lands in the
   text a crawler or a screen reader reads out of the heading. */
.faq-item summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    background: var(--white);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--blue-brand);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq-item[open] summary::after {
    content: "\2013";
    background: var(--blue-brand);
    border-color: var(--blue-brand);
    color: var(--white);
}

/* An open row carries a blue bar on its left edge, which is the callout marker used everywhere
   else in this system. */
.faq-item[open] {
    box-shadow: inset 4px 0 0 var(--blue-brand);
}

.faq-question {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.35;
}

/* No max-width. */
.faq-answer {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--ink);
}

.faq-answer p + p {
    margin-top: var(--space-3);
}

/* ── 10. Tool page layout ─────────────────────────────────────────────────── */
.tool {
    padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Breadcrumbs. */
.crumbs {
    margin-bottom: var(--space-5);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--gray-caption);
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

.crumbs [aria-current] {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* The rule under the head is the gradient hairline rather than a grey border. */
.tool-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-6);
}

/* The title is a flex row so the icon keeps its own column and the heading text wraps against
   itself rather than around the mark. */
.tool-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
}

.tool-title > span {
    min-width: 0;
}

/* Sized in em so it tracks the heading through the whole clamp range rather than being right at
   one width and wrong at the others. */
.tool-icon {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--blue-brand);
}

.tool-subtitle {
    max-width: 60ch;
    font-size: var(--fs-body-lg);
    color: var(--ink-muted);
}

/* Source order is result first, then the explanation, so a phone shows the figure without
   scrolling. */
.tool-body {
    display: grid;
    gap: var(--space-6);
    padding-top: var(--space-6);
}

@media (min-width: 900px) {
    /* Two columns, four blocks. */
    .tool-body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .tool-inputs-block {
        grid-column: 1;
        grid-row: 1;
    }

    .tool-content-block {
        grid-column: 1;
        grid-row: 2;
    }

    .tool-result-block {
        grid-column: 2;
        grid-row: 1;
    }

    .tool-extras-block {
        grid-column: 2;
        grid-row: 2;
    }

    /* The offer and the two explanation boxes span the whole width, below the four blocks above. */
    .tool-offer-block {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .tool-explain-block {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

.tool-result-block,
.tool-inputs-block,
.tool-extras-block,
.tool-content-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* "Cum am calculat?" beside "De ce contează?". */
.tool-explain-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    min-width: 0;
}

@media (min-width: 900px) {
    .tool-explain-block {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.tool-description {
    max-width: 65ch;
    font-size: var(--fs-body-lg);
}

.tool-intro {
    padding: var(--space-4);
    background: var(--pastel-blue);
    border-radius: var(--radius-md);
    color: var(--navy-primary);
}

.tool-section-title {
    font-size: var(--fs-h3);
}

/* ── 11. Input controls ───────────────────────────────────────────────────── */
.inputs {
    padding: var(--space-5);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.inputs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.inputs-reset {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.inputs-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.inputs-intro {
    padding: var(--space-4);
    background: var(--pastel-blue);
    border-radius: var(--radius-md);
    font-size: var(--fs-caption);
    color: var(--navy-primary);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.field-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--navy-primary);
}

/* The explanation is a <details>, not a hover popup: a hover tooltip does not exist on a touch
   screen and cannot be reached from a keyboard. */
/* 24px, which is the WCAG 2.5.8 AA floor for a pointer target. */
.field-help summary {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    color: var(--ink-muted);
    cursor: help;
    list-style: none;
}

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

.field-help[open] summary {
    border-color: var(--blue-brand);
    color: var(--blue-brand);
}

.field-help p {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
    color: var(--ink);
}

.field-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

/* tabular-nums on both, so a value that changes while a slider moves does not shift the row. */
.field-output,
/* Was two rule blocks on the same selector, merged. */
.field-number {
    width: 8.5ch;
    min-height: 44px;
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--navy-primary);
    font-variant-numeric: tabular-nums;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.field-number:focus {
    border-color: var(--blue-brand);
}

.field-unit,
.field-suffix {
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.field-hint {
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

/* The slider. */
.field-range {
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.field-range::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-pill);
}

.field-range::-moz-range-track {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-pill);
}

.field-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -13px;
    background: var(--blue-brand);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.field-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--blue-brand);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

/* The period switch. */
.view-switch,
.toggle-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.view-switch legend,
.toggle-group legend {
    padding: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--navy-primary);
}

.view-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.view-switch legend {
    width: 100%;
    margin-bottom: var(--space-2);
}

.view-switch label {
    position: relative;
    display: inline-flex;
}

/* The input covers its whole label rather than being shrunk to a pixel somewhere. */
.view-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.view-switch span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-5);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--ink-muted);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.view-switch input:checked + span {
    background: var(--navy-primary);
    border-color: var(--navy-primary);
    color: var(--white);
}

.view-switch input:focus-visible + span {
    outline: 3px solid var(--blue-brand);
    outline-offset: 2px;
}

/* The audit toggles. */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toggle-group-help {
    margin-bottom: var(--space-2);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.toggle {
    position: relative;
    display: grid;
    grid-template-columns: 40px 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toggle:hover {
    background: var(--gray-100);
}

/* Same as the radios: the checkbox covers the whole row, so the hit area is the row. */
.toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.toggle-mark {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--gray-200);
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease);
}

.toggle-mark::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 50%;
    transition: transform var(--dur) var(--ease);
}

.toggle input:checked + .toggle-mark {
    background: var(--blue-brand);
}

.toggle input:checked + .toggle-mark::after {
    transform: translateX(18px);
}

.toggle input:focus-visible + .toggle-mark {
    outline: 3px solid var(--blue-brand);
    outline-offset: 2px;
}

.toggle-icon {
    color: var(--ink-muted);
}

.toggle input:checked ~ .toggle-icon {
    color: var(--blue-brand);
}

.toggle-label {
    font-size: var(--fs-caption);
    line-height: 1.3;
}

.toggle-score {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.toggle input:checked ~ .toggle-score {
    color: var(--blue-brand);
}

/* A calculator's switch has no score chip, so the row is three columns instead of four. */
.toggle-plain {
    grid-template-columns: 40px 28px minmax(0, 1fr);
}

/* A choice: one answer out of a set, so the cards sit side by side and read as alternatives
   rather than as three switches whose points add up. */
.choice-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-height: 88px;
    padding: var(--space-3) var(--space-2);
    text-align: center;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.choice:hover {
    background: var(--gray-100);
}

.choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--ink-muted);
}

.choice-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1.25;
}

.choice-score {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.choice input:checked ~ .choice-icon,
.choice input:checked ~ .choice-score {
    color: var(--blue-brand);
}

/* The selected card carries the whole signal, because a radio dot is hidden here. */
.choice:has(input:checked) {
    background: var(--white);
    border-color: var(--blue-brand);
    box-shadow: inset 0 0 0 1px var(--blue-brand);
}

/* Keyboard focus has to be visible on the card, not on the covering input. */
.choice:has(input:focus-visible) {
    outline: 2px solid var(--blue-brand);
    outline-offset: 2px;
}

/* ── 12. Charts ───────────────────────────────────────────────────────────── */
.chart,
.gauge {
    padding: var(--space-5);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Explicit rows and columns rather than auto placement. */
.chart-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.chart-bar-label {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.chart-bar-value {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--navy-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.chart-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.chart-bar-bg {
    fill: var(--gray-100);
}

/* The two tones say which bar is the loss and which is the recovery. */
.chart-bar-loss .chart-bar-fill {
    fill: var(--status-red);
}

.chart-bar-gain .chart-bar-fill {
    fill: var(--status-green);
}

.chart-unit {
    margin-top: var(--space-4);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.gauge-figure {
    position: relative;
    margin-top: var(--space-4);
}

.gauge-svg {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

.gauge-track {
    stroke: var(--gray-100);
}

/* One set of thresholds decides this colour and the label in the panel above. */
.gauge-fill {
    transition: stroke-dasharray var(--dur) var(--ease);
}

.gauge-fill-good {
    stroke: var(--status-green);
}

.gauge-fill-mid {
    stroke: var(--status-orange);
}

.gauge-fill-critical {
    stroke: var(--status-red);
}

.gauge-number {
    margin-top: calc(-1 * var(--space-6));
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--navy-primary);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.gauge-max {
    font-size: var(--fs-h3);
    color: var(--ink-muted);
}

/* ── 13. Transparency box ─────────────────────────────────────────────────── */
/* The bar on the left is the brand callout: four pixels of blue, no fill beyond the neutral tint. */
.tool-transparency {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--gray-50);
    border-left: 4px solid var(--blue-brand);
    border-radius: var(--radius-md);
}

.tool-formula {
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
    overflow-wrap: anywhere;
}

.tool-disclaimer {
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

/* ── 14. Result panel ─────────────────────────────────────────────────────── */
.result {
    padding: var(--space-6);
    background: var(--navy-primary);
    border-radius: var(--radius-lg);
    color: var(--white);
}

/* The eyebrow above the figure is orange, and the figure itself is white. */
.result .tool-section-title {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--orange-brand);
}

/* tabular-nums is the load-bearing declaration here. */
.result-number {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-key-number);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.result-unit {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--gray-caption);
}

/* One set of thresholds decides both this label and the gauge colour, so a score cannot read
   amber here and red there. */
.result-band {
    display: inline-block;
    margin-top: var(--space-4);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.result-band-good {
    background: var(--pastel-green);
    color: var(--status-green);
}

.result-band-mid {
    background: var(--pastel-orange);
    color: var(--status-orange);
}

.result-band-critical {
    background: var(--pastel-red);
    color: var(--status-red);
}

/* The takeaway block, on the brochure's "ce înseamnă pentru tine" pattern: an orange hairline,
   then a small orange label, then the sentence. */
.result-takeaway {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 2px solid var(--orange-brand);
}

.result-context {
    margin-top: var(--space-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--gray-200);
}

/* ── 15. Why it matters, and the related rail ─────────────────────────────── */
/* A tinted panel, so the section reads as an aside to the calculation rather than as more of the
   same body copy. */
.tool-why {
    padding: var(--space-5);
    background: var(--pastel-cream);
    border-radius: var(--radius-md);
}

.tool-why p {
    margin-top: var(--space-3);
    max-width: 65ch;
}

.related {
    margin-top: clamp(var(--space-7), 5vw, var(--space-8));
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.related-hint {
    flex: 1 1 auto;
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

.related-nav {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
}

/* 40px, so the pair clears the pointer target minimum with room. */
.related-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    color: var(--blue-brand);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.related-arrow:hover:not(:disabled) {
    background: var(--blue-brand);
    border-color: var(--blue-brand);
    color: var(--white);
}

.related-arrow:disabled {
    color: var(--gray-caption);
    cursor: default;
}

/* A scrolling rail, not a carousel with arrows. */
.related-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 260px);
    gap: var(--space-4);
    /* Headroom for the hover lift. */
    margin-top: calc(var(--space-5) - var(--space-3));
    padding-top: var(--space-3);
    padding-bottom: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
}

.related-item {
    scroll-snap-align: start;
}

.related-item > a,
.related-item > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.related-item > a:hover {
    border-color: var(--blue-brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--ink);
}

/* The same tinted tile as the hero cards, so a card in the rail is recognisably the same object
   as a card in the hero. */
.related-icon {
    display: grid;
    place-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--pastel-blue);
    color: var(--blue-brand);
}

.related-icon .fa-light {
    font-size: 0.95rem;
}

.related-name {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--navy-primary);
}

/* The payoff. */
.related-figure {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--blue-brand);
    font-variant-numeric: tabular-nums;
}

.related-figure-unit {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The footer row exists on every card, live or not, so the figures above it line up across the
   whole rail. */
.related-foot {
    display: flex;
    align-items: center;
    min-height: calc(27px + var(--space-3) + 1px);
    padding-top: var(--space-3);
    border-top: 1px solid var(--gray-200);
}

/* The same pill in the rail. */
.related-action {
    align-self: flex-start;
    padding-inline: var(--space-4);
    color: var(--blue-brand);
}

.related-item > a:hover .related-action {
    background: var(--blue-brand);
    border-color: var(--blue-brand);
    color: var(--white);
}

/* A planned tool is quieter, not dead: the figure it would produce is still the interesting
   part, so it keeps its colour while the frame recedes. */
.related-item-planned > div {
    background: var(--gray-50);
}

.related-item-planned .related-icon {
    background: var(--pastel-gray);
    color: var(--ink-muted);
}

.related-item-planned .related-figure {
    color: var(--navy-secondary);
}

.related-chip {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    background: var(--pastel-gray);
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The offer block in the page. */
.offer {
    padding: var(--space-5);
    background: var(--pastel-blue);
    border-radius: var(--radius-lg);
}

.offer-note {
    margin-block: var(--space-3) var(--space-5);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--ink);
}

/* The same offer, across the full width instead of down a card: copy on the left, one button on
   the right. */
.offer-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: var(--pastel-blue);
    border-radius: var(--radius-lg);
}

.offer-strip-copy {
    flex: 1 1 22rem;
    min-width: 0;
}

/* No bottom margin here: the strip's own gap already separates the copy from the button, and the
   card version's margin would double it. */
.offer-strip .offer-note {
    margin-block: var(--space-2) 0;
    max-width: 62ch;
}

.offer-strip-cta {
    flex: 0 0 auto;
}

@media (max-width: 599px) {
    /* On a narrow screen the button takes the width, because a pill floating under a paragraph reads
       as an afterthought rather than as the next step. */
    .offer-strip-cta {
        width: 100%;
    }
}

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

/* ── 16. Ecosystem cards ──────────────────────────────────────────────────── */
/* A tinted band across the full width, so the three white cards have something to sit against. */
.eco {
    padding-block: clamp(var(--space-7), 5vw, var(--space-9));
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.eco-title {
    margin-top: var(--space-3);
    font-size: var(--fs-h2);
}

.eco-deck {
    margin-top: var(--space-3);
    max-width: 62ch;
    color: var(--ink-muted);
}

.eco-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

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

/* A column, so the link sits on the bottom edge of all three cards whatever the paragraph does. */
.eco-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.eco-card-rule {
    flex: 0 0 auto;
}

/* No uniform gap. */
.eco-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0;
    padding: var(--space-6);
}

.eco-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

/* --ink-muted, not --gray-caption. The reference sets this ordinal in a light grey, but on white at
   12px that measures 2.50:1 against a 4.5 threshold, and the contrast sweep caught all three of them.
   --gray-caption is only safe on navy, where the footer uses it. */
/* The rule in front of the ordinal, as presentation rather than as a character in the copy. */
.eco-card-num::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    margin-right: var(--space-2);
    vertical-align: middle;
    background: currentColor;
}

.eco-card-num {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.eco-card-name {
    color: var(--blue-brand);
}

.eco-card-title {
    margin-top: var(--space-4);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
}

.eco-card-text {
    flex: 1 1 auto;
    margin-top: var(--space-4);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--ink);
}

/* Underlined with an arrow, which is the affordance the reference uses. */
.eco-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    min-height: 32px;
    margin-top: var(--space-6);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.eco-card-cta span {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}

.eco-card-cta .fa-light {
    font-size: 0.85em;
    transition: transform var(--dur) var(--ease);
}

.eco-card-cta:hover .fa-light {
    transform: translateX(3px);
}

/* ── 17. Sticky offer ─────────────────────────────────────────────────────── */
/* Below 900 only. */
.sticky-offer {
    display: none;
}

@media (max-width: 899px) {
    .sticky-offer {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) var(--page-pad);
        background: var(--navy-primary);
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    }

    .sticky-offer-label {
        min-width: 0;
        font-size: var(--fs-caption);
        line-height: 1.3;
        color: var(--gray-200);
    }

    .sticky-offer .btn {
        flex: 0 0 auto;
    }

    /* The footer must not end underneath the bar, so the space is reserved rather than hoped for. */
    body {
        padding-bottom: calc(44px + 2 * var(--space-3) + 1px + var(--space-2));
    }
}

@media (max-width: 479px) {
    /* Under 480 the label and the button cannot share a row without one of them wrapping badly, so
       the label goes and the button takes the width. */
    .sticky-offer-label {
        display: none;
    }

    .sticky-offer .btn {
        flex: 1 1 auto;
    }
}

/* ── 18. Benefits ─────────────────────────────────────────────────────────── */
.benefits {
    padding: var(--space-5);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.benefits-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
}

.benefits-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--turquoise);
}

/* ── 19. Booking page and the lead form ───────────────────────────────────── */
.booking-body,
.thanks-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-6);
}

@media (min-width: 900px) {
    /* The form first and wider, the reassurance beside it. */
    .booking-body {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: start;
    }
}

.booking-form-block,
.booking-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.booking-from {
    padding: var(--space-4);
    background: var(--pastel-blue);
    border-radius: var(--radius-md);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
}

/* The same object as an ecosystem card: brand hairline on the top edge, then a label, then the
   content. */
.booking-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.booking-card-rule {
    margin: 0;
    border: 0;
}

.booking-card-body {
    padding: var(--space-5);
}

.booking-card-title {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--navy-primary);
}

/* The steps. */
.steps {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}

/* The connector, drawn between the numbers rather than beside them. */
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 16px;
    bottom: 6px;
    width: 1px;
    background: var(--gray-200);
}

.step:last-child {
    padding-bottom: 0;
}

.step-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    color: var(--blue-brand);
    background: var(--pastel-blue);
    border-radius: 50%;
}

.step-text {
    padding-top: 6px;
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
}

/* The negations. */
.booking-card-nots {
    background: var(--gray-50);
}

.nots {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.not {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
}

.not-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
    color: var(--status-red);
    background: var(--pastel-red);
    border-radius: 50%;
}

/* ---- the thank-you page ---------------------------------------------------------------------- */

.thanks-head {
    max-width: 62ch;
}

.thanks-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    font-size: 1.75rem;
    color: var(--status-green);
    background: var(--pastel-green);
    border-radius: 50%;
}

@media (min-width: 900px) {
    .thanks-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: start;
    }
}

.thanks-note {
    margin-top: var(--space-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
}

.thanks-next {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.thanks-next-link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.thanks-next-link:hover {
    background: var(--pastel-blue);
    border-color: var(--blue-brand);
    color: var(--ink);
}

.thanks-next-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--blue-brand);
    background: var(--pastel-blue);
    border-radius: var(--radius-sm);
}

.thanks-next-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.thanks-next-name {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--navy-primary);
}

.thanks-next-figure {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    color: var(--blue-brand);
}

.thanks-next-unit {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.thanks-next-arrow {
    color: var(--blue-brand);
}

.thanks-hint {
    margin-top: var(--space-3);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

/* The error summary. */
.form-alert {
    padding: var(--space-4) var(--space-5);
    background: var(--pastel-red);
    border: 1px solid var(--status-red);
    border-radius: var(--radius-md);
}

.form-alert-title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--status-red);
}

.form-alert-list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
}

.form-alert-list li + li {
    margin-top: var(--space-1);
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 600px) {
    .lead-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .field-row-wide {
        grid-column: 1 / -1;
    }
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.field-row label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.field-row input,
.field-row select,
.field-row textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.field-row textarea {
    min-height: 7rem;
    line-height: var(--lh-relaxed);
    resize: vertical;
}

.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
    border-color: var(--blue-brand);
    outline: 2px solid var(--blue-brand);
    outline-offset: 1px;
}

/* Set on render, not with :invalid, which paints a field red while it is still being typed in. */
.field-row [aria-invalid="true"] {
    border-color: var(--status-red);
}

.lead-boxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.check {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    cursor: pointer;
}

.check input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--blue-brand);
    cursor: pointer;
}

/* The error state on a checkbox. */
.check-invalid {
    color: var(--status-red);
}

.check-invalid input {
    outline: 2px solid var(--status-red);
    outline-offset: 2px;
}

/* A link inside a label: clicking the label toggles the box, so the anchor has to stop the click
   from reaching it, or reading the policy would also tick the consent. */
.check a {
    position: relative;
    color: var(--blue-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.check-invalid a {
    color: var(--status-red);
}

/* Conditional reveal with :has(), no JavaScript. */
.field-reveal {
    display: none;
    padding-left: calc(24px + var(--space-3));
}

.lead-boxes:has(#lead-callback:checked) .field-reveal {
    display: flex;
}

/* Off screen rather than display:none. */
.form-aux {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-submit {
    align-self: flex-start;
}

.lead-note {
    font-size: var(--fs-caption);
    color: var(--ink-muted);
}

@media (max-width: 599px) {
    .lead-submit {
        width: 100%;
    }
}

/* ── 20. Consent bar ──────────────────────────────────────────────────────── */
/* A bar along the bottom edge, not a layer over the page: a visitor can read and use the site while it
   is up, and the call to action in the hero stays the first thing worth pressing. */
.cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--space-4) 0;
    background: var(--navy-primary);
    color: var(--white);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* The attribute alone is not enough here: `display: fixed` in the rule above would keep winning over
   the browser's default for [hidden], which is display: none at a lower specificity. */
.cookie[hidden] {
    display: none;
}

.cookie-inner {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.cookie-text {
    flex: 1 1 30rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, 0.86);
}

.cookie-title {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--white);
}

.cookie-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* The two buttons read as a pair with one preferred, not as one button and one dismissal: the outline
   sits on navy, so it borrows the light variant rather than the page one. */
.cookie-btn {
    min-height: 40px;
    padding-inline: var(--space-4);
}

.cookie .btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white);
}

.cookie .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
}

@media (max-width: 599px) {
    /* Full width on a phone, where two pills side by side leave neither wide enough to read. */
    .cookie-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1 1 auto;
    }
}

/* ── 21. Not found ────────────────────────────────────────────────────────── */
.notfound-inner {
    max-width: 700px;
    padding-block: clamp(var(--space-8), 8vw, var(--space-9));
}

.notfound-title {
    font-size: var(--fs-h1);
}

.notfound-deck {
    margin-top: var(--space-4);
    font-size: var(--fs-body-lg);
    color: var(--ink-muted);
}

.notfound-subtitle {
    margin-top: var(--space-7);
    font-size: var(--fs-h3);
}

.notfound-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.notfound-list a,
.notfound-back a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.notfound-back {
    margin-top: var(--space-6);
}

/* ── 22. Footer ───────────────────────────────────────────────────────────── */
/* No margin-top. */
.foot {
    background: var(--navy-primary);
    color: var(--gray-200);
}

/* The wave spans the full width, edge to edge, so it reads as the edge of the block rather than
   as a decoration inside it. */
.foot-wave {
    width: 100%;
}

.foot-logo {
    width: auto;
    height: 36px;
}

/* 140px rather than 190px as the minimum track, measured rather than guessed. */
.foot-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--space-6);
    padding-block: var(--space-8);
}

.foot-brand {
    grid-column: 1 / -1;
    min-width: 0;
}

@media (min-width: 900px) {
    .foot-brand {
        grid-column: span 2;
    }
}

.foot-brand-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--white);
}

.foot-brand-desc {
    margin-top: var(--space-3);
    max-width: 46ch;
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    color: var(--gray-caption);
}

.foot-col {
    min-width: 0;
}

.foot-col-title {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--orange-brand);
}

.foot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--fs-caption);
}

/* 36px per row plus the 8px gap, so a column of links is tappable rather than a stack of
   adjacent hairlines. */
.foot-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    color: var(--gray-200);
    text-decoration: none;
}

/* The icon column is fixed, so the addresses line up with each other rather than each starting
   wherever its own glyph happens to end. */
.foot-contact .fa-light,
.foot-social .fa-brands {
    flex: 0 0 auto;
    width: 1.1em;
    font-size: 0.95rem;
    color: var(--turquoise);
}

.foot-list a:hover {
    color: var(--white);
    text-decoration: underline;
}

.foot-social {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.foot-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--fs-caption);
    color: var(--gray-caption);
}

.foot-legal-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: 0;
}