/* Tokens */
:root {
    /* Both palettes exist, so form controls, scrollbars, spellcheck underlines
     * and the pre-paint canvas follow the user's OS setting instead of being
     * pinned to light. The dark values live in the prefers-color-scheme block
     * below the semantic aliases. */
    color-scheme: light dark;

    /* Surface colors */
    --surface-1: hsl(0 0% 100%);
    --surface-2: hsl(216 43% 97%);
    --surface-3: hsl(214 100% 99%);

    /* Surface overlays */
    --surface-overlay-1: hsl(0 0% 100% / 0.82);
    --surface-overlay-2: hsl(0 0% 100% / 0.9);
    --surface-overlay-3: hsl(0 0% 100% / 0.96);

    /* Text colors */
    --text-1: hsl(218 43% 11%);
    --text-2: hsl(213 15% 43%);
    --text-3: hsl(213 17% 57%);

    /* Border colors */
    --border-1: hsl(213 35% 89%);
    --border-2: hsl(213 36% 84%);
    --border-3: hsl(213 28% 77%);

    /* Border overlays */
    --border-overlay-1: hsl(213 35% 89% / 0.8);
    --border-overlay-2: hsl(213 35% 89% / 0.9);
    --border-overlay-3: hsl(213 35% 89% / 0.95);

    /* Blue accents */
    --blue-1: hsl(217 100% 55%);
    --blue-2: hsl(219 87% 44%);
    --blue-3: hsl(215 100% 96%);
    --blue-tint-1: hsl(217 100% 55% / 0.08);
    --blue-tint-2: hsl(217 100% 55% / 0.12);
    --blue-tint-3: hsl(217 100% 55% / 0.24);

    /* Green accents */
    --green-1: hsl(152 56% 34%);
    --green-2: hsl(152 49% 42%);
    --green-3: hsl(149 44% 92%);
    --green-tint-1: hsl(152 56% 34% / 0.08);
    --green-tint-2: hsl(152 56% 34% / 0.12);
    --green-tint-3: hsl(152 56% 34% / 0.22);

    /* Warm status accents */
    --warm-1: hsl(14 63% 41%);
    --warm-2: hsl(19 74% 50%);
    --warm-3: hsl(24 82% 94%);
    --warm-tint-1: hsl(14 63% 41% / 0.08);
    --warm-tint-2: hsl(14 63% 41% / 0.12);
    --warm-tint-3: hsl(14 63% 41% / 0.22);

    /* Neutral shadows */
    --shadow-1: 0 12px 32px hsl(218 43% 11% / 0.06);
    --shadow-2: 0 24px 60px hsl(218 43% 11% / 0.08);
    --shadow-3: 0 16px 36px hsl(218 43% 11% / 0.08);

    /* Accent shadows */
    --shadow-accent-1: 0 16px 30px hsl(217 100% 55% / 0.22);
    --shadow-accent-2: 0 18px 32px hsl(217 100% 55% / 0.26);

    /* Space scale */
    --size-1: 0.75rem;
    --size-2: 1rem;
    --size-3: 1.5rem;

    /* Control sizes */
    --control-1: 2.875rem;
    --control-2: 3.25rem;
    --control-3: 4.875rem;

    /* Icon sizes */
    --icon-1: 1.125rem;
    --icon-2: 1.5rem;
    --icon-3: 3.375rem;

    /* Container widths */
    --container-1: 64rem;
    --container-2: 72.5rem;
    --container-3: 80rem;

    /* Gutter widths */
    --gutter-1: 1.25rem;
    --gutter-2: 2rem;
    --gutter-3: 3rem;

    /* Section spacing */
    --section-1: 4.75rem;
    --section-2: 6.25rem;
    --section-3: 7.5rem;

    /* Border sizes */
    --stroke-1: 1px;
    --stroke-2: 2px;
    --stroke-3: 3px;

    /* Radius scale */
    --radius-1: 0.875rem;
    --radius-2: 1.375rem;
    --radius-3: 1.75rem;

    /* Blur scale */
    --blur-1: 0.875rem;
    --blur-2: 1.25rem;
    --blur-3: 2.375rem;

    /* Duration scale */
    --duration-1: 0.2s;
    --duration-2: 0.3s;
    --duration-3: 0.4s;

    /* Font sizes */
    --font-1: 0.875rem;
    --font-2: 0.95rem;
    --font-3: 1.05rem;

    /* Display sizes */
    --display-1: 2.1rem;
    --display-2: 3.15rem;
    --display-3: 4.85rem;

    /* Semantic aliases */
    --bg: var(--surface-2);
    --page-top: hsl(220 33% 99%);
    --surface: var(--surface-1);
    --surface-soft: var(--surface-3);
    --surface-clear: hsl(0 0% 100% / 0);
    --surface-overlay-soft: var(--surface-overlay-1);
    --surface-overlay: var(--surface-overlay-2);
    --surface-overlay-strong: var(--surface-overlay-3);

    --text: var(--text-1);
    --muted: var(--text-2);
    --text-soft: var(--text-3);

    --border: var(--border-1);
    --border-strong: var(--border-2);
    --border-contrast: var(--border-3);
    --border-soft-overlay: var(--border-overlay-1);
    --border-regular-overlay: var(--border-overlay-2);
    --border-strong-overlay: var(--border-overlay-3);

    --accent: var(--blue-1);
    --accent-strong: var(--blue-2);
    --accent-soft: var(--blue-3);
    --accent-tint-soft: var(--blue-tint-1);
    --accent-tint-medium: var(--blue-tint-2);
    --accent-tint-strong: var(--blue-tint-3);
    --accent-clear: hsl(217 100% 55% / 0);

    /* Foreground for anything painted on top of an accent fill (the primary
     * button). This used to read `var(--surface)`, which silently means "white"
     * only for as long as --surface is white. In dark mode --surface is near
     * black, which would have put black text on a blue button. Splitting it out
     * keeps the light rendering byte-identical while letting dark choose. */
    --on-accent: hsl(0 0% 100%);

    --accent-green: var(--green-1);
    --accent-green-highlight: var(--green-2);
    --accent-green-soft: var(--green-3);
    --accent-green-tint-soft: var(--green-tint-1);
    --accent-green-tint-medium: var(--green-tint-2);
    --accent-green-tint-strong: var(--green-tint-3);
    --accent-green-clear: hsl(152 56% 34% / 0);

    --accent-warm: var(--warm-1);
    --accent-warm-highlight: var(--warm-2);
    --accent-warm-soft: var(--warm-3);
    --accent-warm-tint-soft: var(--warm-tint-1);
    --accent-warm-tint-medium: var(--warm-tint-2);
    --accent-warm-tint-strong: var(--warm-tint-3);
    --accent-warm-clear: hsl(14 63% 41% / 0);

    --shadow-soft: var(--shadow-1);
    --shadow: var(--shadow-2);
    --shadow-hover: var(--shadow-3);
    --shadow-accent: var(--shadow-accent-1);
    --shadow-accent-hover: var(--shadow-accent-2);

    --container: var(--container-2);
    --container-gutter: var(--gutter-2);
    --container-gutter-mobile: var(--gutter-1);
    --section-space: var(--section-2);
    --section-space-mobile: var(--section-1);

    --space-small: var(--size-1);
    --space-medium: var(--size-2);
    --space-large: var(--size-3);

    --border-size-small: var(--stroke-1);
    --border-size-medium: var(--stroke-2);
    --border-size-large: var(--stroke-3);

    --radius-small: var(--radius-1);
    --radius-medium: var(--radius-2);
    --radius-large: var(--radius-3);
    --radius-control: var(--radius-small);
    --radius-icon: calc(var(--radius-small) + 0.25rem);
    --radius-card-sm: calc(var(--radius-medium) - 0.125rem);
    --radius-popover: var(--radius-medium);
    --radius-card: calc(var(--radius-medium) + 0.125rem);
    --radius-panel: var(--radius-large);
    --radius-pill: 999rem;

    --control-size-small: var(--control-1);
    --control-size-medium: var(--control-2);
    --control-size-large: var(--control-3);

    --icon-size-small: var(--icon-1);
    --icon-size-medium: var(--icon-2);
    --icon-size-large: var(--icon-3);
    --icon-line-gap: calc(var(--space-small) / 2);

    --font-size-small: var(--font-1);
    --font-size-medium: var(--font-2);
    --font-size-large: var(--font-3);
    --display-size-small: var(--display-1);
    --display-size-medium: var(--display-2);
    --display-size-large: var(--display-3);

    --backdrop-blur: var(--blur-1);
    --panel-blur: var(--blur-2);
    --glow-blur: var(--blur-3);

    --duration-fast: var(--duration-1);
    --duration-base: var(--duration-2);
    --duration-slow: var(--duration-3);

    --focus-ring: 0 0 0 4px var(--accent-tint-medium);
    --score-ring-track: hsl(214 40% 92%);
    --page-glow: hsl(217 100% 55% / 0.08);
    --panel-glow: hsl(217 100% 55% / 0.12);
    --section-gradient-start: hsl(0 0% 100% / 0.55);
    --section-gradient-end: hsl(214 50% 95% / 0.8);
    --panel-gradient-start: hsl(0 0% 100% / 0.96);
    --panel-gradient-end: hsl(214 100% 98% / 0.95);
}

/* =============================================================================
 * Dark palette
 * -----------------------------------------------------------------------------
 * The brand brief always called for light and dark, but only light was ever
 * built. This block adds dark by redefining the *primitive* tokens only. Every
 * semantic alias above (--text, --muted, --accent, --surface, --focus-ring, ...)
 * is declared as `var(--primitive)`, and custom-property substitution is lazy,
 * so those aliases re-resolve to these values automatically. No page, no
 * component rule and no inline style needs to change: the seven public pages
 * between them use var(--...) 90-137 times each and contain no hardcoded colour
 * literals, so the whole site follows from here.
 *
 * Only two kinds of token are repeated below: the primitives, and the handful
 * of semantic tokens that were given literal colours rather than a var()
 * (--page-top, the *-clear transparents, --score-ring-track, the glows and the
 * gradient stops). Anything defined as var(--something) is deliberately absent.
 *
 * Measured contrast on this palette (sRGB, WCAG 2.x):
 *   --text  on --surface        14.67:1     --text  on --bg         16.59:1
 *   --muted on --surface         8.32:1     --muted on --bg          9.40:1
 *   --text-soft on --surface     5.97:1     --text-soft on --bg      6.75:1
 * All three clear AA for body text (4.5:1) and the first two clear AAA (7:1).
 * For comparison the existing light palette measures 17.64 / 5.36 / 3.29, so
 * dark is a strict improvement on muted and soft text.
 * ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Surface colors -- surface-2 is the page floor, surface-1 lifts cards
         * off it, surface-3 is the tinted "soft" step used for inputs and hover.
         * Deep desaturated navy rather than black: it keeps the brand hue and
         * avoids the smearing that pure black causes on OLED scroll. */
        --surface-1: hsl(217 25% 13%);
        --surface-2: hsl(219 30% 8%);
        --surface-3: hsl(216 24% 17%);

        /* Surface overlays -- translucent card colour, not translucent white. */
        --surface-overlay-1: hsl(217 25% 13% / 0.82);
        --surface-overlay-2: hsl(217 25% 13% / 0.9);
        --surface-overlay-3: hsl(217 25% 13% / 0.96);

        /* Text colors */
        --text-1: hsl(213 32% 95%);
        --text-2: hsl(213 16% 73%);
        --text-3: hsl(213 14% 62%);

        /* Border colors -- light mode keeps borders very quiet (1.31:1 against
         * the card). These sit at 1.85:1, so the hairlines stay in the same
         * visual register while reading more clearly on a dark ground. */
        --border-1: hsl(215 16% 30%);
        --border-2: hsl(214 16% 38%);
        --border-3: hsl(213 15% 48%);

        /* Border overlays */
        --border-overlay-1: hsl(215 16% 30% / 0.8);
        --border-overlay-2: hsl(215 16% 30% / 0.9);
        --border-overlay-3: hsl(215 16% 30% / 0.95);

        /* Blue accents -- inverted relative to light. In light, blue-2 is the
         * darker of the pair because it has to read as text on near-white; here
         * it is the lighter one for the same reason against near-black.
         * blue-3 flips from a pale chip background to a deep one. */
        --blue-1: hsl(214 92% 64%);
        --blue-2: hsl(212 96% 74%);
        --blue-3: hsl(216 52% 17%);
        --blue-tint-1: hsl(214 92% 64% / 0.12);
        --blue-tint-2: hsl(214 92% 64% / 0.3);
        /* tint-3 is the global :focus-visible outline. At light mode's 0.24 it
         * would composite to 1.48:1 here and be effectively invisible; 0.66
         * lands it at 3.15:1, which clears the 3:1 that WCAG 1.4.11 asks of a
         * focus indicator. */
        --blue-tint-3: hsl(214 92% 64% / 0.66);

        /* Green accents */
        --green-1: hsl(150 60% 55%);
        --green-2: hsl(150 65% 65%);
        --green-3: hsl(152 40% 14%);
        --green-tint-1: hsl(150 60% 55% / 0.12);
        --green-tint-2: hsl(150 60% 55% / 0.28);
        --green-tint-3: hsl(150 60% 55% / 0.45);

        /* Warm status accents */
        --warm-1: hsl(14 90% 66%);
        --warm-2: hsl(28 95% 68%);
        --warm-3: hsl(16 45% 15%);
        --warm-tint-1: hsl(14 90% 66% / 0.12);
        --warm-tint-2: hsl(14 90% 66% / 0.28);
        --warm-tint-3: hsl(14 90% 66% / 0.45);

        /* Neutral shadows -- a shadow tinted like the light-mode one is invisible
         * on a dark ground, so these go near-black and much more opaque. */
        --shadow-1: 0 12px 32px hsl(220 60% 2% / 0.5);
        --shadow-2: 0 24px 60px hsl(220 60% 2% / 0.62);
        --shadow-3: 0 16px 36px hsl(220 60% 2% / 0.55);

        /* Accent shadows */
        --shadow-accent-1: 0 16px 30px hsl(214 92% 30% / 0.42);
        --shadow-accent-2: 0 18px 32px hsl(214 92% 30% / 0.55);

        /* --- Semantic tokens that hold literal colours rather than a var() --- */

        /* Dark ink on the bright accent fill: 6.43:1 at the top of the primary
         * button gradient, 9.13:1 at the bottom. White on that same gradient
         * would only manage 1.9:1. */
        --on-accent: hsl(220 45% 8%);

        --page-top: hsl(219 32% 10%);

        /* Transparent stops must match their own family's dark hue, otherwise
         * gradients fade through a grey or a light-blue ghost. */
        --surface-clear: hsl(217 25% 13% / 0);
        --accent-clear: hsl(214 92% 64% / 0);
        --accent-green-clear: hsl(150 60% 55% / 0);
        --accent-warm-clear: hsl(14 90% 66% / 0);

        --score-ring-track: hsl(216 18% 30%);
        --page-glow: hsl(214 92% 64% / 0.1);
        --panel-glow: hsl(214 92% 64% / 0.16);
        --section-gradient-start: hsl(217 25% 13% / 0.5);
        --section-gradient-end: hsl(219 30% 8% / 0.85);
        --panel-gradient-start: hsl(217 25% 14% / 0.96);
        --panel-gradient-end: hsl(216 28% 11% / 0.95);
    }
}

/* Source: base.css */
body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, var(--page-glow), var(--accent-clear) 25%),
        linear-gradient(180deg, var(--page-top) 0%, var(--bg) 100%);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

svg {
    display: block;
}

:focus-visible {
    outline: var(--border-size-large) solid var(--accent-tint-strong);
    outline-offset: 3px;
}

.brand {
    font-size: calc(var(--space-large) - 0.1rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.brand span {
    color: var(--accent);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--space-small) - 0.3rem) calc(var(--space-small) + 0.05rem);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.section-lead {
    color: var(--muted);
    font-size: var(--font-size-large);
}

.noscript-banner,
.include-error {
    width: min(calc(100% - var(--container-gutter)), var(--container));
    margin: var(--space-medium) auto;
    padding: calc(var(--space-medium) - 0.1rem) var(--space-medium);
    border: var(--border-size-small) solid var(--accent-tint-medium);
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--font-size-medium);
    font-weight: 600;
}

/* Source: layout.css */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

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

.container {
    width: min(calc(100% - var(--container-gutter)), var(--container));
    margin: 0 auto;
}

.section {
    padding: var(--section-space) 0;
}

@media (max-width: 720px) {
    .section {
        padding: var(--section-space-mobile) 0;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(calc(100% - var(--container-gutter-mobile)), var(--container));
    }
}

/* Source: components/button.css */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-size-medium);
    padding: calc(var(--space-medium) - 0.1rem) calc(var(--space-large) - 0.1rem);
    border-radius: var(--radius-pill);
    border: var(--border-size-small) solid var(--surface-clear);
    font-weight: 700;
    transition:
        transform var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: var(--on-accent);
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    box-shadow: var(--shadow-accent);
}

.button-primary:hover,
.button-primary:focus-visible {
    box-shadow: var(--shadow-accent-hover);
}

.button-secondary {
    color: var(--text);
    background: var(--surface-overlay);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.button-small {
    min-height: var(--control-size-small);
    padding: var(--space-small) calc(var(--space-large) - 0.35rem);
}

.button-full {
    width: 100%;
}

/* Source: components/card.css */
.dashboard-card {
    border: var(--border-size-small) solid var(--border-strong-overlay);
    box-shadow: var(--shadow);
}

.score-card,
.feature-card,
.beta-form {
    border: var(--border-size-small) solid var(--border-strong-overlay);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-soft);
}

.metric-card,
.distribution-card {
    border: var(--border-size-small) solid var(--border-regular-overlay);
    background: var(--surface-overlay-strong);
}

/* Source: components/form.css */
.field-group + .field-group {
    margin-top: var(--space-medium);
}

.field-group label {
    display: block;
    margin-bottom: calc(var(--space-small) - 0.3rem);
    font-size: var(--font-size-medium);
    font-weight: 700;
}

.field-group input,
.field-group textarea {
    width: 100%;
    min-height: var(--control-size-medium);
    padding: calc(var(--space-medium) - 0.05rem) var(--space-medium);
    border: var(--border-size-small) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-soft);
    color: var(--text);
    transition:
        border-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        background-color var(--duration-fast) ease;
}

.field-group textarea {
    min-height: calc(var(--control-size-medium) * 2.2);
    resize: vertical;
}

.field-group input::placeholder,
.field-group textarea::placeholder {
    color: var(--text-soft);
}

.field-group input:focus,
.field-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: var(--focus-ring);
}

.field-help {
    margin: 0 0 calc(var(--space-small) + 0.05rem);
    color: var(--text-soft);
    font-size: var(--font-size-small);
}

/* Source: components/chip.css */
.status-chip,
.foot-tag {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--space-small) - 0.25rem) calc(var(--space-small) + 0.05rem);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.status-chip {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: var(--border-size-small) solid var(--accent-tint-medium);
}

.status-chip--stable {
    color: var(--accent-green);
    background: var(--accent-green-soft);
    border: var(--border-size-small) solid var(--accent-green-tint-medium);
}

.status-chip--deteriorating {
    color: var(--accent-warm);
    background: var(--accent-warm-soft);
    border: var(--border-size-small) solid var(--accent-warm-tint-medium);
}

.foot-tag {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: var(--border-size-small) solid var(--accent-tint-medium);
}

/* Source: components/notification.css */
.site-notification-layer {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-medium));
    right: var(--space-medium);
    left: var(--space-medium);
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2000;
}

.site-notification {
    display: flex;
    align-items: flex-start;
    gap: var(--space-medium);
    width: min(100%, 36rem);
    padding: calc(var(--space-medium) - 0.05rem) var(--space-medium);
    border: var(--border-size-small) solid var(--border-strong-overlay);
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--surface) 100%);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--panel-blur));
    pointer-events: auto;
    opacity: 0;
    transform: translateY(calc(var(--space-small) * -1));
    transition:
        opacity var(--duration-base) ease,
        transform var(--duration-base) ease;
}

.site-notification.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-notification[data-state="pending"],
.site-notification[data-state="info"] {
    border-color: var(--accent-tint-medium);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-soft) 180%);
}

.site-notification[data-state="success"] {
    border-color: var(--accent-green-tint-medium);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-green-soft) 180%);
}

.site-notification[data-state="warn"],
.site-notification[data-state="error"] {
    border-color: var(--accent-warm-tint-medium);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-warm-soft) 180%);
}

.site-notification__content {
    display: grid;
    gap: calc(var(--space-small) - 0.2rem);
    min-width: 0;
    flex: 1;
}

.site-notification__message {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-medium);
    font-weight: 600;
    line-height: 1.55;
}

.site-notification__dismiss.button {
    flex: none;
}

@media (max-width: 560px) {
    .site-notification-layer {
        top: calc(env(safe-area-inset-top, 0px) + var(--space-small));
        right: var(--space-small);
        left: var(--space-small);
    }

    .site-notification {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: var(--space-medium);
    }

    .site-notification__dismiss.button {
        width: 100%;
    }
}

/* Source: components/list.css */
.feature-card ul,
.beta-points {
    margin: calc(var(--space-medium) + 0.25rem) 0 0;
    padding: 0;
    list-style: none;
}

.feature-card li,
.beta-points li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--muted);
}

.feature-card li + li,
.beta-points li + li {
    margin-top: var(--space-small);
}

.feature-card li::before,
.beta-points li::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint-medium);
}

/* Source: header.css */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface-overlay);
    backdrop-filter: blur(var(--backdrop-blur));
    border-bottom: var(--border-size-small) solid var(--border-soft-overlay);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-large);
    min-height: var(--control-size-large);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-large);
}

.site-nav a:not(.button) {
    color: var(--muted);
    font-weight: 600;
    transition: color var(--duration-fast) ease;
}

.site-nav a:not(.button):hover,
.site-nav a:not(.button):focus-visible {
    color: var(--text);
}

.nav-toggle {
    display: none;
    width: var(--control-size-small);
    height: var(--control-size-small);
    padding: 0;
    align-items: center;
    justify-content: center;
    border: var(--border-size-small) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    color: var(--text);
    cursor: pointer;
}

.nav-toggle span {
    position: relative;
    display: block;
    width: var(--icon-size-small);
    height: var(--border-size-medium);
    background: currentColor;
    border-radius: var(--radius-pill);
}

.nav-toggle span::before,
.nav-toggle span::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    border-radius: inherit;
    transition:
        transform var(--duration-fast) ease,
        opacity var(--duration-fast) ease;
    content: "";
}

.nav-toggle span::before {
    transform: translateY(calc(var(--icon-line-gap) * -1));
}

.nav-toggle span::after {
    transform: translateY(var(--icon-line-gap));
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + var(--space-small));
        right: var(--space-medium);
        left: var(--space-medium);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: var(--space-medium);
        border: var(--border-size-small) solid var(--border-strong-overlay);
        border-radius: var(--radius-popover);
        background: var(--surface-overlay-strong);
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a:not(.button) {
        padding: 0.6rem 0.25rem;
    }

    .nav-cta {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .header-inner {
        min-height: calc(var(--control-size-large) - var(--icon-line-gap));
    }
}

/* Source: hero.css */
.hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--section-space) - var(--space-large));
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    width: 38rem;
    height: 38rem;
    transform: translateX(-5%);
    background: radial-gradient(circle, var(--page-glow), var(--accent-clear) 65%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--gutter-3);
    align-items: center;
}

.hero-copy h1 {
    max-width: 11ch;
    margin: var(--space-medium) 0 calc(var(--space-medium) + 0.25rem);
    font-size: clamp(var(--display-size-small), 5.5vw, var(--display-size-large));
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.hero-lead {
    color: var(--muted);
}

.hero-lead {
    max-width: 60ch;
    font-size: var(--font-size-large);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
    margin: calc(var(--space-large) + 0.5rem) 0 calc(var(--space-medium) + 0.25rem);
}

.dashboard-stack {
    position: relative;
    min-height: 44rem;
    padding-bottom: calc(var(--section-space) + var(--space-medium));
}

.dashboard-card {
    position: relative;
    width: min(calc(100% - var(--space-large)), 31.5rem);
    padding: var(--space-large);
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, var(--panel-gradient-start) 0%, var(--panel-gradient-end) 100%);
    transition:
        transform var(--duration-base) ease,
        box-shadow var(--duration-base) ease,
        border-color var(--duration-base) ease,
        z-index var(--duration-fast) linear;
}

.dashboard-card--stable {
    z-index: 2;
    border-color: var(--accent-green-tint-medium);
    background: linear-gradient(180deg, var(--panel-gradient-start) 0%, var(--accent-green-soft) 190%);
    transform: translate3d(0, 0, 0);
}

.dashboard-card--deteriorating {
    position: absolute;
    top: calc(var(--section-space) + var(--space-small));
    right: 0;
    z-index: 1;
    border-color: var(--accent-warm-tint-medium);
    background: linear-gradient(180deg, var(--panel-gradient-start) 0%, var(--accent-warm-soft) 190%);
    transform: translate3d(0, 0, 0);
}

.dashboard-card--deteriorating:hover {
    z-index: 3;
    transform: translate3d(calc(var(--space-small) * -1), calc(var(--space-small) * -1), 0);
    box-shadow: var(--shadow-hover);
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.dashboard-card--stable::before {
    background: radial-gradient(circle, var(--accent-green-tint-medium), var(--accent-green-clear) 70%);
}

.dashboard-card--deteriorating::before {
    background: radial-gradient(circle, var(--accent-warm-tint-medium), var(--accent-warm-clear) 70%);
}

.dashboard-head,
.distribution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-medium);
}

.dashboard-head {
    margin-bottom: calc(var(--space-medium) + 0.2rem);
}

.dashboard-label,
.score-label,
.metric-label,
.metric-note,
.distribution-title,
.distribution-period {
    font-size: var(--font-size-medium);
}

.dashboard-label,
.metric-note,
.distribution-period,
.score-label {
    margin: 0;
    color: var(--muted);
}

.dashboard-head h2 {
    margin: 0.2rem 0 0;
    font-size: var(--space-large);
    letter-spacing: -0.04em;
}

.score-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-medium);
    align-items: center;
    padding: 1.2rem;
    margin-bottom: var(--space-medium);
    border-radius: var(--radius-popover);
}

.dashboard-card--stable .score-card {
    border-color: var(--accent-green-tint-medium);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-green-soft) 160%);
}

.dashboard-card--deteriorating .score-card {
    border-color: var(--accent-warm-tint-medium);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-warm-soft) 160%);
}

.score-ring {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-green) 0 82%, var(--score-ring-track) 82% 100%);
}

.dashboard-card--stable .score-ring {
    background: conic-gradient(var(--accent-green) 0 84%, var(--score-ring-track) 84% 100%);
}

.dashboard-card--deteriorating .score-ring {
    background: conic-gradient(var(--accent-warm) 0 43%, var(--score-ring-track) 43% 100%);
}

.score-ring strong {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--surface);
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 var(--border-size-small) var(--border-regular-overlay);
}

.score-text {
    margin: 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--space-medium) - 0.1rem);
    margin-bottom: var(--space-medium);
}

.metric-card {
    padding: var(--space-medium);
    border-radius: var(--radius-card-sm);
}

.metric-value {
    margin: 0.35rem 0 0.25rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.08rem;
    font-weight: 600;
}

.distribution-card {
    padding: var(--space-medium);
    border-radius: var(--radius-card-sm);
}

.distribution-header {
    margin-bottom: var(--space-medium);
}

.distribution-title {
    margin: 0;
    color: var(--text);
    font-weight: 700;
}

.distribution-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.distribution-row + .distribution-row {
    margin-top: calc(var(--space-small) + 0.05rem);
}

.distribution-row span,
.distribution-row strong {
    margin: 0;
}

.distribution-track {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--score-ring-track);
    overflow: hidden;
}

.distribution-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-green-highlight) 100%);
}

.dashboard-card--deteriorating .distribution-track span {
    background: linear-gradient(90deg, var(--accent-warm) 0%, var(--accent-warm-highlight) 100%);
}

@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        max-width: none;
    }

    .dashboard-stack {
        min-height: auto;
        padding-bottom: 0;
        display: grid;
        gap: var(--space-large);
    }

    .dashboard-card,
    .dashboard-card--deteriorating {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        transform: none;
    }

    .dashboard-card--deteriorating:hover {
        transform: none;
    }
}

@media (max-width: 720px) {
    .hero {
        padding-top: calc(var(--section-space-mobile) - var(--space-medium) - 0.25rem);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .score-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .distribution-row {
        grid-template-columns: 64px 1fr auto;
    }
}

@media (max-width: 560px) {
    .dashboard-card {
        padding: calc(var(--space-large) - 0.15rem);
    }
}

/* Source: features.css */
.section-alt {
    background: linear-gradient(180deg, var(--section-gradient-start) 0%, var(--section-gradient-end) 100%);
    border-top: var(--border-size-small) solid var(--border-regular-overlay);
    border-bottom: var(--border-size-small) solid var(--border-regular-overlay);
}

.section-heading {
    max-width: 760px;
    margin: 0 auto var(--gutter-3);
    text-align: center;
}

.section-heading h2 {
    margin: var(--space-medium) 0 calc(var(--space-medium) + 0.25rem);
    font-size: clamp(var(--display-size-small), 3vw, var(--display-size-medium));
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-large);
}

.feature-card {
    height: 100%;
    padding: calc(var(--space-large) + 0.5rem);
    border-radius: var(--radius-card);
    transition:
        transform var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        border-color var(--duration-fast) ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}

.feature-icon {
    display: inline-grid;
    place-items: center;
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    margin-bottom: calc(var(--space-medium) + 0.25rem);
    border-radius: var(--radius-icon);
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 var(--border-size-small) var(--accent-tint-medium);
}

.feature-icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-card h3 {
    margin: 0 0 var(--space-small);
    font-size: calc(var(--space-large) - 0.15rem);
    letter-spacing: -0.04em;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 980px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .feature-card {
        padding: calc(var(--space-large) - 0.15rem);
    }
}

/* Source: transparency.css */
.transparency-section {
    padding-top: auto;
}

.transparency-card {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--space-large) + 0.75rem);
    border: var(--border-size-small) solid var(--border-strong-overlay);
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, var(--surface-overlay-strong) 0%, var(--accent-soft) 180%);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.transparency-card h2 {
    margin: var(--space-medium) 0 calc(var(--space-medium) + 0.25rem);
    font-size: clamp(var(--display-size-small), 3vw, var(--display-size-medium));
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.transparency-text {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--muted);
    font-size: var(--font-size-large);
}

@media (max-width: 560px) {
    .transparency-card {
        padding: calc(var(--space-large) - 0.15rem);
    }
}

/* Source: beta.css */
.beta-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
}

.beta-copy h2 {
    margin: var(--space-medium) 0 calc(var(--space-medium) + 0.25rem);
    font-size: clamp(var(--display-size-small), 3vw, var(--display-size-medium));
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.beta-note,
.form-caption {
    color: var(--muted);
}

.beta-note {
    margin: 1.25rem 0 0;
    font-weight: 600;
}

.beta-form {
    padding: 2rem;
    border-radius: var(--radius-card);
}

#beta-signup {
    scroll-margin-top: calc(var(--control-size-large) + var(--space-medium));
}

.beta-form .button {
    margin-top: 1.25rem;
}

.beta-form .button:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.form-status {
    min-height: 1.5rem;
    margin: 0.75rem 0 0;
    font-weight: 700;
}

.form-status:empty {
    display: none;
}

.form-status.is-pending {
    color: var(--text-soft);
}

.form-status.is-success {
    color: var(--accent-green);
}

.form-status.is-warn {
    color: var(--accent-warm-highlight);
}

.form-status.is-error {
    color: var(--accent-warm);
}

.form-caption {
    margin: 0.85rem 0 0;
}

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.hp-field[hidden] {
    display: none !important;
}

@media (max-width: 980px) {
    #beta-signup {
        scroll-margin-top: calc(var(--control-size-large) + var(--space-large));
    }

    .beta-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .beta-form {
        padding: 1.35rem;
    }
}

/* Source: footer.css */
.site-footer {
    padding: calc(var(--space-large) + 0.5rem) 0 calc(var(--space-large) + 1rem);
    background: var(--surface-overlay-soft);
}

.footer-inner,
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-large);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-medium) + 0.25rem);
}

.footer-nav a {
    color: var(--muted);
    font-weight: 600;
    transition: color var(--duration-fast) ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--text);
}

.footer-summary,
.footer-bottom p {
    margin: 0;
    color: var(--muted);
}

.footer-summary {
    margin-top: calc(var(--space-small) - 0.1rem);
    max-width: 33ch;
}

.footer-bottom {
    margin-top: var(--space-large);
    padding-top: calc(var(--space-medium) + 0.25rem);
    border-top: var(--border-size-small) solid var(--border-regular-overlay);
}

@media (max-width: 720px) {
    .footer-inner,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Source: footer.css - sitewide content links
 *
 * Added 2026-08-20. Before this, the six content pages cross-linked to each
 * other but NOTHING on the homepage linked into them, so crawling from the
 * root they were unreachable and only the sitemap declared them. These
 * columns put every page one click from every other page. */
.footer-inner--columns {
    align-items: flex-start;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-large) calc(var(--space-large) + 1rem);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-small) + 0.15rem);
}

.footer-col a {
    color: var(--muted);
    font-weight: 600;
    transition: color var(--duration-fast) ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--text);
}

.footer-heading {
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .footer-links {
        gap: var(--space-medium) var(--space-large);
    }
}