/* ==========================================================================
   Cracker — shared stylesheet

   One file for every page, so a change to the look lands everywhere at once.

   The structure of the design — the floating nav dock, the hero, the stat
   tiles, the card grids, the banded sections, the document pages with their
   contents list and callouts — follows the reference site. The palette and
   the type stay Cracker's own: the colours are the app's design tokens
   (lib/core/theme/tokens.dart), and the words are set in Geist and Geist
   Mono, bundled beside this file under fonts/ and used under SIL OFL 1.1
   (fonts/Geist-OFL.txt travels with them).
   ========================================================================== */

/* --- Type ---------------------------------------------------------------- */
@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GeistMono';
    src: url('fonts/GeistMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    /* Accent — the app's spend blue. */
    --accent: #1E4DD8;
    --accent-strong: #1A41B4;
    --accent-soft: rgba(30, 77, 216, 0.10);
    --accent-ring: rgba(30, 77, 216, 0.34);

    /* Surfaces */
    --bg: #EFF1F6;
    --surface: #FFFFFF;
    --surface-2: #F6F7FA;
    --line: #DFE2EA;
    --hairline: rgba(10, 26, 61, 0.05);

    /* Ink */
    --ink: #0A1A3D;
    --ink-2: #3B4870;
    --muted: #6B7280;

    /* Meaning — earn, burn and critical, as the app paints them. */
    --good: #007944;
    --good-soft: rgba(0, 121, 68, 0.10);
    --good-line: rgba(0, 121, 68, 0.28);
    --warn: #B57500;
    --warn-soft: rgba(181, 117, 0, 0.10);
    --warn-line: rgba(181, 117, 0, 0.28);
    --crit: #C13C3C;
    --crit-soft: rgba(193, 60, 60, 0.09);
    --crit-line: rgba(193, 60, 60, 0.30);

    /* Radii — R.well … R.sheet */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-xxl: 28px;
    --r-pill: 999px;

    /* Depth. A card carries a border as well, so the lift only has to
       separate it from the ground. */
    --lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px -14px rgba(15, 23, 42, 0.10);
    --lift-lg: 0 2px 4px rgba(15, 23, 42, 0.05), 0 24px 48px -20px rgba(15, 23, 42, 0.16);

    /* Type */
    --font-ui: 'Geist', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Geist', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'GeistMono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --nav-h: 64px;
    --maxw: 1120px;
    --maxw-prose: 780px;
}

/* Dark for anyone whose system asks for it, with the toggle able to override
   in either direction. Both selectors are needed: the media query alone
   cannot be turned off, and the attribute alone ignores the system setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent: #5B8FFF;
        --accent-strong: #8FB4FF;
        --accent-soft: rgba(91, 143, 255, 0.14);
        --accent-ring: rgba(91, 143, 255, 0.42);

        --bg: #080A0F;
        --surface: #12161E;
        --surface-2: #1A1F29;
        --line: #232936;
        --hairline: rgba(255, 255, 255, 0.05);

        --ink: #F4F5F7;
        --ink-2: #A9B2C0;
        --muted: #7C8698;

        --good: #00C46A;
        --good-soft: rgba(0, 196, 106, 0.14);
        --good-line: rgba(0, 196, 106, 0.30);
        --warn: #E9A63B;
        --warn-soft: rgba(233, 166, 59, 0.14);
        --warn-line: rgba(233, 166, 59, 0.30);
        --crit: #FF7A7A;
        --crit-soft: rgba(255, 122, 122, 0.13);
        --crit-line: rgba(255, 122, 122, 0.30);

        --lift: 0 12px 32px -14px rgba(0, 0, 0, 0.80);
        --lift-lg: 0 20px 48px -18px rgba(0, 0, 0, 0.85);
    }
}

:root[data-theme="dark"] {
    --accent: #5B8FFF;
    --accent-strong: #8FB4FF;
    --accent-soft: rgba(91, 143, 255, 0.14);
    --accent-ring: rgba(91, 143, 255, 0.42);

    --bg: #080A0F;
    --surface: #12161E;
    --surface-2: #1A1F29;
    --line: #232936;
    --hairline: rgba(255, 255, 255, 0.05);

    --ink: #F4F5F7;
    --ink-2: #A9B2C0;
    --muted: #7C8698;

    --good: #00C46A;
    --good-soft: rgba(0, 196, 106, 0.14);
    --good-line: rgba(0, 196, 106, 0.30);
    --warn: #E9A63B;
    --warn-soft: rgba(233, 166, 59, 0.14);
    --warn-line: rgba(233, 166, 59, 0.30);
    --crit: #FF7A7A;
    --crit-soft: rgba(255, 122, 122, 0.13);
    --crit-line: rgba(255, 122, 122, 0.30);

    --lift: 0 12px 32px -14px rgba(0, 0, 0, 0.80);
    --lift-lg: 0 20px 48px -18px rgba(0, 0, 0, 0.85);
}

/* --- Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* So an anchor jump does not park the heading underneath the sticky nav. */
    scroll-padding-top: calc(var(--nav-h) + 24px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 16px;
    letter-spacing: -0.07px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* The app's micro-caps section label — small, wide tracking, upper case. It
   is the most recognisable piece of the app's type, so every section on the
   site is introduced by one. */
.eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

/* Anything the eye compares down a column is set in the mono face with
   tabular figures. */
.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code,
.mono {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 1px 6px;
}

em {
    font-style: italic;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--r-md) 0;
    font-family: var(--font-ui);
    font-weight: 600;
    z-index: 200;
}

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

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

.prose-wrap {
    max-width: var(--maxw-prose);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Navigation ----------------------------------------------------------
   A floating dock rather than a full-width bar, because that is what the app
   does: its navigation rides above the content at the sheet radius. */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    height: calc(var(--nav-h) - 16px);
    padding: 0 8px 0 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xxl);
    box-shadow: var(--lift);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.4px;
    color: var(--ink);
    margin-right: auto;
    white-space: nowrap;
}

.nav-brand:hover {
    text-decoration: none;
}

.nav-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links a {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: var(--ink-2);
    padding: 8px 12px;
    border-radius: var(--r-pill);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links a:hover {
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}

.nav-links a.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 3;
}

.icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.nav-toggle {
    display: none;
}

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

    .nav-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 10px 10px 14px;
        border-radius: var(--r-xl);
    }

    .nav-links {
        display: none;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid var(--line);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 11px 12px;
        border-radius: var(--r-md);
        font-size: 15px;
    }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px -10px var(--accent-ring);
}

.btn-primary:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

/* On dark, the accent is the light half of the pair, so the label has to be
   the dark one — white on #5B8FFF is unreadable. */
:root[data-theme="dark"] .btn-primary {
    color: #06122E;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary {
        color: #06122E;
    }
}

.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--lift);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
    transform: translateY(-1px);
}

.btn-sm {
    font-size: 13.5px;
    padding: 10px 16px;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 72px 20px 56px;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 16px;
    box-shadow: var(--lift);
    margin-bottom: 26px;
}

.hero-badge .num {
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 600;
}

.hero h1 {
    font-family: var(--font-ui);
    font-size: clamp(2.15rem, 5.6vw, 3.75rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -1.6px;
    margin-bottom: 22px;
}

/* The break in the headline is a desktop decision. On a phone it strands the
   last word on a line of its own; let the text find its own breaks there. */
@media (max-width: 620px) {
    .hero h1 br {
        display: none;
    }
}

.hero .lede {
    max-width: 660px;
    margin: 0 auto 32px;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--ink-2);
}

.hero .lede em {
    color: var(--ink);
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-note {
    margin-top: 22px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--muted);
}

/* --- Sections ------------------------------------------------------------ */
.section {
    padding: 72px 0;
}

.section-tight {
    padding: 8px 0 24px;
}

/* A banded section, kept between the ground and the card fill rather than
   equal to either, so the cards standing on it keep their edge. */
.section-alt {
    background: var(--surface-2);
    background: color-mix(in srgb, var(--surface) 55%, var(--bg));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-title {
    font-family: var(--font-ui);
    font-size: clamp(1.65rem, 3.4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.9px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.section-subtitle {
    font-size: 16.5px;
    color: var(--ink-2);
    max-width: 660px;
    margin-bottom: 36px;
}

.section-prose {
    max-width: 660px;
    margin-bottom: 30px;
}

.section-prose p {
    font-size: 16.5px;
    color: var(--ink-2);
    margin-bottom: 14px;
}

.section-prose p:last-child {
    margin-bottom: 0;
}

.section-prose strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Stat tiles ----------------------------------------------------------
   The app's metric tile: a micro-caps label under a mono figure. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    box-shadow: var(--lift);
}

.stat-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    color: var(--accent-strong);
    margin-bottom: 10px;
}

.stat-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.35;
}

/* --- Chips --------------------------------------------------------------- */
.chip {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* --- Feature cards ------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--lift);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-ring);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.feature-card[hidden] {
    display: none;
}

/* The recessed icon well the app uses inside its cards. */
.feature-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}

.feature-card h3 {
    font-family: var(--font-ui);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin-bottom: 9px;
}

.feature-card p {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--ink-2);
    margin-bottom: 12px;
}

.feature-card p:last-child {
    margin-bottom: 0;
}

.feature-card strong {
    color: var(--ink);
    font-weight: 600;
}

/* A card whose whole point is one figure and one sentence. */
.feature-card .lens-answer {
    font-size: 14.5px;
}

/* --- Link cards ---------------------------------------------------------- */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.link-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--lift);
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.link-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    text-decoration: none;
}

.link-card h3 {
    font-family: var(--font-ui);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    color: var(--ink);
}

.link-card p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
}

/* --- Document pages ------------------------------------------------------ */
.page-head {
    padding: 64px 0 34px;
}

.page-head h1 {
    font-family: var(--font-ui);
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.page-head .subtitle {
    font-size: 17px;
    color: var(--ink-2);
    margin-bottom: 12px;
}

.page-head .subtitle:last-child {
    margin-bottom: 0;
}

.last-updated {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: -0.2px;
}

.doc {
    padding-bottom: 72px;
}

.doc .section-block {
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.doc h2 {
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
    scroll-margin-top: calc(var(--nav-h) + 24px);
}

.doc h3 {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
    margin: 22px 0 10px;
}

.doc h4 {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
    margin: 20px 0 8px;
}

.doc h3:first-child,
.doc h4:first-child {
    margin-top: 0;
}

.doc p {
    color: var(--ink-2);
    margin-bottom: 14px;
    font-size: 15.5px;
}

.doc ul,
.doc ol {
    color: var(--ink-2);
    margin: 0 0 14px 22px;
    font-size: 15.5px;
}

.doc li {
    margin-bottom: 8px;
}

.doc li > ul {
    margin-top: 8px;
}

.doc strong {
    color: var(--ink);
    font-weight: 600;
}

.doc .link-grid,
.doc .table-card {
    margin-top: 20px;
}

/* --- Numbered steps ------------------------------------------------------ */
ol.steps {
    list-style: none;
    counter-reset: step;
    margin: 20px 0 14px;
    padding: 0;
}

ol.steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 46px;
    margin-bottom: 24px;
}

ol.steps > li:last-child {
    margin-bottom: 0;
}

ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    color: var(--accent-strong);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

/* The step's own title only — a direct child. As a descendant selector this
   also caught every emphasised phrase inside the step's prose and threw each
   one onto a line of its own. */
ol.steps > li > strong {
    display: block;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin-bottom: 4px;
    padding-top: 2px;
}

ol.steps > li > p:last-child {
    margin-bottom: 0;
}

/* --- Table of contents --------------------------------------------------- */
.toc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 12px;
    box-shadow: var(--lift);
}

.toc h2 {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 28px;
}

.toc li {
    margin-bottom: 7px;
    font-size: 14.5px;
    color: var(--muted);
    break-inside: avoid;
}

.toc a {
    color: var(--ink-2);
}

.toc a:hover {
    color: var(--accent-strong);
}

@media (max-width: 620px) {
    .toc ol {
        columns: 1;
    }
}

/* --- Callouts ------------------------------------------------------------ */
.callout {
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin: 20px 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

.callout p {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--ink-2);
}

.callout p:last-child,
.callout ul:last-child {
    margin-bottom: 0;
}

.callout ul {
    margin: 0 0 12px 20px;
    font-size: 15px;
}

.callout li {
    margin-bottom: 7px;
}

.callout strong {
    color: var(--ink);
    font-weight: 600;
}

.callout-info {
    background: var(--accent-soft);
    border-color: var(--accent-ring);
    border-left-color: var(--accent);
}

.callout-good {
    background: var(--good-soft);
    border-color: var(--good-line);
    border-left-color: var(--good);
}

.callout-crit {
    background: var(--crit-soft);
    border-color: var(--crit-line);
    border-left-color: var(--crit);
}

/* A callout standing on the wide grid rather than inside prose. */
.callout-wide {
    max-width: var(--maxw-prose);
    margin-left: auto;
    margin-right: auto;
}

/* --- Tables --------------------------------------------------------------
   Anything read down a column gets a surface of its own, so the rows do not
   float on the page ground. */
.table-card {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--lift);
    margin: 0 0 16px;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 440px;
    font-size: 14.5px;
}

th {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 13px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
    line-height: 1.6;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td:first-child {
    color: var(--ink);
    font-weight: 500;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.search-field {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
}

.search-field svg {
    position: absolute;
    left: 15px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

.search-field input {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 14.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 12px 16px 12px 42px;
    box-shadow: var(--lift);
}

.search-field input::placeholder {
    color: var(--muted);
}

.search-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.faq-count {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}

.faq-category {
    margin-bottom: 34px;
}

.faq-category[hidden] {
    display: none;
}

.faq-category-title {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 24px);
}

details.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    box-shadow: var(--lift);
    scroll-margin-top: calc(var(--nav-h) + 24px);
}

details.faq-item[hidden] {
    display: none;
}

details.faq-item[open] {
    border-color: var(--accent-ring);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

details.faq-item > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    font-family: var(--font-ui);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.45;
    color: var(--ink);
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

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

details.faq-item > summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform 0.18s ease, color 0.18s ease;
}

details.faq-item[open] > summary::after {
    content: "−";
    color: var(--accent-strong);
}

details.faq-item > summary:hover {
    color: var(--accent-strong);
}

.faq-answer {
    padding: 16px 20px 18px;
    border-top: 1px solid var(--line);
}

.faq-answer p {
    font-size: 15px;
    color: var(--ink-2);
    margin-bottom: 12px;
    line-height: 1.62;
}

.faq-answer p:last-child,
.faq-answer ul:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    margin: 0 0 12px 20px;
    color: var(--ink-2);
    font-size: 15px;
}

.faq-answer li {
    margin-bottom: 7px;
    line-height: 1.6;
}

.faq-answer strong {
    color: var(--ink);
    font-weight: 600;
}

.no-results {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 34px 24px;
    text-align: center;
    box-shadow: var(--lift);
}

.no-results strong {
    display: block;
    font-family: var(--font-ui);
    font-size: 17px;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.no-results p {
    color: var(--ink-2);
    font-size: 15px;
}

/* --- Closing band -------------------------------------------------------- */
.cta-band {
    max-width: var(--maxw);
    margin: 0 auto 72px;
    padding: 56px 32px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xxl);
    box-shadow: var(--lift-lg);
}

.cta-band h2 {
    font-family: var(--font-ui);
    font-size: clamp(1.55rem, 3.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.9px;
    margin-bottom: 12px;
}

.cta-band p {
    color: var(--ink-2);
    font-size: 16.5px;
    max-width: 580px;
    margin: 0 auto 28px;
}

.cta-band p:last-child {
    margin-bottom: 0;
}

@media (max-width: 620px) {
    .cta-band {
        margin: 0 16px 56px;
        padding: 44px 22px;
        border-radius: var(--r-xl);
    }
}

/* --- Footer -------------------------------------------------------------- */
.footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 56px 20px 28px;
}

.footer-grid {
    max-width: var(--maxw);
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

@media (max-width: 760px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.footer h4 {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.footer ul {
    list-style: none;
}

.footer li {
    margin-bottom: 9px;
}

.footer a {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: var(--ink-2);
}

.footer a:hover {
    color: var(--accent-strong);
}

.footer-brand p {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 14px 0 0;
    max-width: 400px;
}

.footer-bottom {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--muted);
}

.footer-bottom .last-updated {
    font-size: 12px;
}

/* --- Back to top --------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--lift);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 90;
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

mark {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: var(--r-xs);
    padding: 0 3px;
}


/* ==========================================================================
   How to use — the figures

   Eight small stages, one per step, drawn as inline SVG so they take the
   page's own colours in both themes and cost no image file. Each is driven
   by a single clock: a registered custom property, --k, that one keyframe
   runs from 0 to 1 over the figure's --dur, on a loop. Every element on the
   stage places itself on that clock with --s and --e (start and end, as
   fractions of the loop) and gets back --a, its own 0→1 progress — the same
   `seg(start, end)` the app's Flutter figures use, so the two stay in step.

   --k's initial value is 1: with no animation running — reduced motion, an
   old browser, no JS — every figure rests on its finished frame. Motion is
   added on top of a readable picture, never required for one.
   ========================================================================== */

@property --k {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@keyframes fig-clock {
    from { --k: 0; }
    to { --k: 1; }
}

.guide .step h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guide .step-n {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    color: var(--accent-strong);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

.fig {
    margin: 18px 0 24px;
}

.fig svg {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--lift);
    --k: 1;
}

.fig.is-on svg {
    animation: fig-clock var(--dur, 7s) linear infinite;
}

.no-fig-clock .fig svg {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .fig svg {
        animation: none !important;
    }
}

.fig figcaption {
    max-width: 560px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.fig figcaption strong {
    color: var(--ink-2);
    font-weight: 600;
}

/* --- The clock, per element ---------------------------------------------
   --a  : linear progress through [--s, --e]
   --ea : the same, eased out (cubic)
   --eb : eased with a small overshoot, for things that land
   --p  : a pulse, 0 → 1 → 0 across the segment
   --b  : progress through an optional second segment [--s2, --e2] — the
          exit, for something lit for a beat and then handed on. */
.fig [style*="--s:"] {
    --a: clamp(0, calc((var(--k) - var(--s)) / (var(--e) - var(--s))), 1);
    --ea: calc(1 - (1 - var(--a)) * (1 - var(--a)) * (1 - var(--a)));
    --eb: calc(1 + 2.70158 * (var(--a) - 1) * (var(--a) - 1) * (var(--a) - 1) + 1.70158 * (var(--a) - 1) * (var(--a) - 1));
    --p: calc(min(var(--a), 1 - var(--a)) * 2);
    --b: clamp(0, calc((var(--k) - var(--s2, 2)) / (var(--e2, 3) - var(--s2, 2))), 1);
}

/* --- Movements ----------------------------------------------------------- */
.fig .rise {
    opacity: var(--ea);
    transform: translateY(calc((1 - var(--ea)) * 10px));
}

.fig .fade {
    opacity: var(--ea);
}

.fig .land {
    opacity: var(--a);
    transform: translateY(calc((1 - var(--eb)) * 46px));
}

.fig .slide {
    opacity: var(--ea);
    transform: translateX(calc((var(--ea) - 1) * 8px));
}

.fig .grow-x {
    transform: scaleX(var(--ea));
    transform-origin: left center;
    transform-box: fill-box;
}

.fig .grow-y {
    transform: scaleY(var(--ea));
    transform-origin: center bottom;
    transform-box: fill-box;
}

/* Typing: the masked value is uncovered left to right. */
.fig .reveal {
    clip-path: inset(0 calc((1 - var(--a)) * 100%) 0 0);
}

.fig .ph {
    opacity: clamp(0, calc(1 - var(--a) * 20), 1);
}

.fig .ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    opacity: clamp(0, min(var(--a) * 20, (1 - var(--a)) * 20), 1);
}

.fig .press,
.fig .skip {
    transform: scale(calc(1 - 0.12 * var(--p)));
    transform-origin: center;
    transform-box: fill-box;
}

.fig .skip .pill-rect {
    fill: var(--surface);
    stroke: var(--line);
}

.fig .skip text {
    fill: color-mix(in srgb, var(--accent) calc(var(--p) * 100%), var(--muted));
}

/* Lit for a beat: on with --ea, off with --b. */
.fig .beat {
    --act: min(var(--ea), 1 - var(--b));
}

.fig .tile-hi {
    fill: var(--surface);
    stroke: var(--accent-ring);
    opacity: var(--act);
}

.fig .dot {
    width: calc(6px + 10px * var(--act));
    fill: color-mix(in srgb, var(--accent) calc(var(--act) * 100%), var(--line));
}

/* A switch: the track tints, the thumb slides. */
.fig .track {
    fill: color-mix(in srgb, var(--accent) calc(var(--ea) * 100%), var(--surface-2));
    stroke: color-mix(in srgb, var(--accent) calc(var(--ea) * 100%), var(--line));
}

.fig .thumb {
    fill: color-mix(in srgb, #fff calc(var(--ea) * 100%), var(--muted));
    transform: translateX(calc(var(--ea) * 14px));
}

.fig .tint,
.fig .tint2 {
    stroke: color-mix(in srgb, var(--accent) calc(var(--ea) * 100%), var(--muted));
}

/* The bell rings on its own beat while taking its colour from the switch. */
.fig .bell {
    --sw: clamp(0, calc((var(--k) - 0.30) / 0.16), 1);
    --psw: calc(min(var(--sw), 1 - var(--sw)) * 2);
    transform: rotate(calc(var(--psw) * 14deg));
    transform-origin: 50% 12%;
    transform-box: fill-box;
}

.fig .badge {
    fill: color-mix(in srgb, var(--good) calc(var(--ea) * 100%), var(--warn));
    stroke: var(--bg);
    stroke-width: 1.5;
}

.fig .swap-a { opacity: calc(1 - var(--ea)); }
.fig .swap-b { opacity: var(--ea); }

.fig .progress {
    --dn: clamp(0, calc((var(--k) - 0.84) / 0.10), 1);
    fill: color-mix(in srgb, var(--good) calc(var(--dn) * 100%), var(--accent));
}

/* --- Surfaces and type ---------------------------------------------------- */
.fig .t {
    font-family: var(--font-ui);
    fill: var(--ink);
    letter-spacing: -0.1px;
}

.fig .t.m { font-family: var(--font-mono); letter-spacing: 0; }
.fig .t.b { font-weight: 700; }
.fig .t.d { fill: var(--ink-2); }
.fig .t.w { fill: #fff; }
.fig .t.good { fill: var(--good); }
.fig .t.warn { fill: var(--warn); }
.fig .t.crit { fill: var(--crit); }
.fig .t.accent { fill: var(--accent); }

.fig .eb {
    font-family: var(--font-ui);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    fill: var(--muted);
}

.fig .eb.warn { fill: var(--warn); }

.fig .tile { fill: var(--surface); stroke: var(--line); }
.fig .tile-2 { fill: var(--surface-2); stroke: var(--line); }
.fig .tile.warn-edge { stroke: var(--warn-line); }
.fig .well { fill: var(--surface-2); stroke: var(--line); }
.fig .face { fill: var(--accent); }
.fig .fab { fill: var(--accent); }
.fig .glyph { fill: var(--accent-soft); stroke: var(--accent-ring); }

.fig .pill.good { fill: var(--good-soft); stroke: var(--good-line); }
.fig .pill.warn { fill: var(--warn-soft); stroke: var(--warn-line); }
.fig .pill.accent { fill: var(--accent-soft); stroke: var(--accent-ring); }
.fig .box.warn { fill: var(--warn-soft); stroke: var(--warn-line); }

.fig .ic.good { stroke: var(--good); }
.fig .ic.warn { stroke: var(--warn); }
.fig .ic.accent { stroke: var(--accent); }
.fig .ic.muted { stroke: var(--muted); }

.fig .grow-x.muted { fill: var(--muted); }
.fig .grow-x.accent { fill: var(--accent); }
.fig .grow-x.good { fill: var(--good); }

.fig .bar { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.fig .bar.now { fill: var(--accent); }