/* ========================================================================== CREOSON - modern design system Standalone stylesheet. Does not require Bootstrap or jQuery. Theming is driven by [data-theme="light"] / [data-theme="dark"] on . ========================================================================== */ /* ---------- Design tokens ---------- */ :root { /* Brand */ --brand: #e11d26; --brand-hover: #c1141c; --brand-contrast: #ffffff; --accent: #0d9c9a; /* Request / response accents. Theme independent - these always sit on the dark code surface, and functions-enhance.css aliases them so the landing page and the function reference stay in step. */ --req: #ea7317; --req-dark: #c85d0c; --res: #15a34a; --res-dark: #10803a; /* Typography */ --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Spacing / shape */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --container: 1180px; --nav-h: 68px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed: 180ms; } /* Light theme (default) */ :root, [data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-alt: #f5f7fa; --bg-inset: #eef2f6; --surface: #ffffff; --surface-hover: #f8fafc; --border: #dfe5ec; --border-strong: #c6d0db; --text: #0d141c; --text-muted: #5b6875; --text-faint: #8794a1; --shadow-sm: 0 1px 2px rgba(13, 20, 28, 0.06), 0 1px 3px rgba(13, 20, 28, 0.05); --shadow: 0 4px 6px -2px rgba(13, 20, 28, 0.06), 0 12px 24px -6px rgba(13, 20, 28, 0.1); --shadow-lg: 0 8px 12px -4px rgba(13, 20, 28, 0.08), 0 24px 48px -12px rgba(13, 20, 28, 0.16); --nav-bg: rgba(255, 255, 255, 0.82); --hero-glow-1: rgba(225, 29, 38, 0.14); --hero-glow-2: rgba(13, 156, 154, 0.13); --grid-line: rgba(13, 20, 28, 0.05); /* Code surfaces stay a mid slate in both themes - same literal values in the dark block below, so the terminal card is always a step lighter than --bg rather than reading as a flat black block. (An earlier pass kept this near-black, which was too dark against a white page and had almost no separation from a dark page - this is a genuinely lighter slate, not just "less black".) --code-ring is the OUTER edge only (.code-window, .prose pre) and is separate from --code-border, which stays on the --code-bg-relative side for the internal bar/body seam. In dark mode --code-ring becomes a soft translucent white so the window/example panels read as distinct cards against the dark page, per the "light white border" request; in light mode a bright ring is not needed, so it matches --code-border there. */ --code-bg: #1e2a3d; --code-header-bg: #2b3b52; --code-border: #3d4f68; --code-ring: #3d4f68; --code-text: #dbe4ee; /* Inline tokens */ --code-inline-bg: #eef2f6; --code-inline-border: #dbe2ea; --code-inline-text: #14212e; /* Filename variant: */ --file-bg: rgba(13, 156, 154, 0.1); --file-border: rgba(13, 156, 154, 0.32); --file-text: #0a7472; /* Warning accent (callout--warn) */ --warn: #b45309; } /* Dark theme */ [data-theme="dark"] { color-scheme: dark; --brand: #ff4d56; --brand-hover: #ff6b72; --brand-contrast: #1a0507; --accent: #2dd4bf; --bg: #0a0e13; --bg-alt: #0f151d; --bg-inset: #141c25; --surface: #131a23; --surface-hover: #18212c; --border: #232d39; --border-strong: #33404f; --text: #e6edf3; --text-muted: #97a4b4; --text-faint: #6f7d8d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 16px 32px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.65); --nav-bg: rgba(10, 14, 19, 0.8); --hero-glow-1: rgba(255, 77, 86, 0.18); --hero-glow-2: rgba(45, 212, 191, 0.14); --grid-line: rgba(230, 237, 243, 0.045); /* Same literal --code-bg/--code-header-bg/--code-border as the light theme's terminal chrome above - see the comment there. Reusing those values (rather than a separate, darker palette) keeps the "terminal" card a step lighter than --bg, and keeps the hardcoded chat-bubble / check-item fills (tuned against these exact numbers) in their intended lighter-than-body position. --code-ring DOES differ from --code-border here: a soft translucent white rather than a solid slate, so the window and each contained request/response example gets a visible light outline against the dark page rather than just a slightly-lighter edge. */ --code-bg: #1e2a3d; --code-header-bg: #2b3b52; --code-border: #3d4f68; --code-ring: rgba(255, 255, 255, 0.18); --code-text: #dbe4ee; --code-inline-bg: #18212c; --code-inline-border: #2a3543; --code-inline-text: #e6edf3; --file-bg: rgba(45, 212, 191, 0.14); --file-border: rgba(45, 212, 191, 0.34); --file-text: #5eead4; --warn: #fbbf24; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--text); } p { margin: 0 0 1rem; } a { color: var(--brand); text-decoration: none; transition: color var(--speed) var(--ease); } a:hover { color: var(--brand-hover); } img { max-width: 100%; height: auto; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; } /* ---------- Inline code ---------- Scoped with :not(pre) > so the decoration only ever applies to inline code. Code inside a 
 (the JSON examples) is left completely alone, which is
   why this needs no separate reset for the code windows. */
:not(pre) > code {
    padding: 0.15em 0.4em;
    background: var(--code-inline-bg);
    border: 1px solid var(--code-inline-border);
    border-radius: 5px;
    color: var(--code-inline-text);
    font-size: 0.875em;
    /* Keep long identifiers from blowing out a narrow column */
    overflow-wrap: break-word;
}

/* Filename / path variant: Speaker.asm */
:not(pre) > code.file {
    background: var(--file-bg);
    border-color: var(--file-border);
    color: var(--file-text);
    font-weight: 500;
    white-space: nowrap;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2.5rem 0;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--brand);
    color: var(--brand-contrast);
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--brand);
    color: var(--brand-contrast);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    color: var(--brand-contrast);
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.container-narrow {
    max-width: 780px;
}

.section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.section--alt {
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
}

.section-head {
    max-width: 680px;
    margin: 0 auto clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.85rem;
}

.section-title {
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    margin-bottom: 0.65rem;
}

.section-sub {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    color: var(--text-muted);
    margin: 0;
}

/* Vertical rhythm helpers: pair a padded section with a tighter one below it */
.section--pad-bottom {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section--tight-top {
    padding-top: clamp(1.75rem, 3.5vw, 3rem);
}

/* Centered diagram / figure that spans the section */
.section-figure {
    margin: 0;
    text-align: center;
}

.section-figure img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin-inline: auto;
}

/* ---------- Theme-aware figure swap ----------
   Same idea as the logo swap: only one variant is ever in flow. The two PNGs
   differ slightly in height (1329 vs 1347), so both share the taller box and
   are letterboxed with object-fit. That keeps the artwork undistorted and the
   section height identical in either theme, so nothing shifts on toggle.

   These selectors are scoped to .section-figure on purpose: they have to
   out-specify `.section-figure img { display: block }` above, or the hidden
   variant stays visible. */
.section-figure .section-figure__img--light,
.section-figure .section-figure__img--dark {
    aspect-ratio: 3630 / 1347;
    object-fit: contain;
}

.section-figure .section-figure__img--dark {
    display: none;
}

[data-theme="dark"] .section-figure .section-figure__img--light {
    display: none;
}

[data-theme="dark"] .section-figure .section-figure__img--dark {
    display: block;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--speed) var(--ease),
        border-color var(--speed) var(--ease), color var(--speed) var(--ease),
        transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

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

.btn svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--brand-contrast);
    box-shadow: var(--shadow);
}

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

.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--text-faint);
    color: var(--text);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--bg-inset);
    color: var(--text);
}

.btn-lg {
    padding: 0.9rem 1.75rem;
    font-size: 1rem;
}

/* ---------- Navbar ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--nav-h);
}

.site-nav__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-right: auto;
    padding-block: 8px;
}

.site-nav__brand img {
    width: auto;
    height: 26px;
}

/* ---------- Theme-aware logo swap ----------
   Both variants are declared block-level and carry the artwork's intrinsic
   aspect ratio, so the visible box is byte-identical in either theme. This is
   what keeps the logo (and everything after it) from shifting on toggle. */
.brand-logo--light,
.brand-logo--dark {
    display: block;
    aspect-ratio: 1554 / 313;
}

.brand-logo--dark {
    display: none;
}

[data-theme="dark"] .brand-logo--light {
    display: none;
}

[data-theme="dark"] .brand-logo--dark {
    display: block;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__links a {
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--speed) var(--ease),
        color var(--speed) var(--ease);
}

.site-nav__links a:hover {
    background: var(--bg-inset);
    color: var(--text);
}

.site-nav__links a[aria-current="page"] {
    color: var(--text);
    background: var(--bg-inset);
}

/* ---------- Nav sub-menus ----------
   Hover plus :focus-within, and no JavaScript. The parent stays an ordinary
   link to its page, so nothing is lost if a pointer never hovers: a keyboard
   user tabs into the parent and the panel opens, and a touch user gets the
   page itself, whose own table of contents lists the same anchors.

   visibility (not just opacity) is what keeps the hidden links out of the tab
   order - opacity:0 alone leaves them focusable and invisible. */
.site-nav__links li {
    position: relative;
}

.has-submenu > a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    vertical-align: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.65;
}

.submenu {
    position: absolute;
    /* Overlaps the parent by 2px so crossing the gap does not drop the hover. */
    top: calc(100% - 2px);
    left: 0;
    z-index: 10;
    min-width: 15rem;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--speed) var(--ease),
        transform var(--speed) var(--ease),
        visibility var(--speed) var(--ease);
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Scoped to .site-nav__links so it out-specifies the nav link rules above,
   including the larger ones inside the mobile media query. */
.site-nav__links .submenu a {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* Icon buttons (theme toggle + hamburger) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--speed) var(--ease),
        color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.icon-btn:hover {
    background: var(--bg-inset);
    color: var(--text);
    border-color: var(--border-strong);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Theme toggle shows one icon at a time */
.theme-toggle__moon {
    display: none;
}

[data-theme="dark"] .theme-toggle__sun {
    display: none;
}

[data-theme="dark"] .theme-toggle__moon {
    display: block;
}

.nav-toggle {
    display: none;
}

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

    .site-nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px 16px 18px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        display: none;
    }

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

    .site-nav__links a {
        padding: 0.7rem 0.85rem;
        font-size: 1rem;
    }

    /* In the collapsed menu the panels are laid out inline and always open.
       A hover dropdown has no meaning on touch, and hiding them behind a
       second toggle would need JavaScript to do one thing the open list
       already does. */
    .has-submenu > a::after {
        display: none;
    }

    .submenu {
        position: static;
        min-width: 0;
        margin: 2px 0 6px 0.85rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-left: 2px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-nav__links .submenu a {
        padding: 0.5rem 0.85rem;
        font-size: 0.9375rem;
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--bg);
}

/* Layered glow + grid backdrop */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    background: radial-gradient(
            ellipse 60% 55% at 18% 0%,
            var(--hero-glow-1),
            transparent 70%
        ),
        radial-gradient(
            ellipse 55% 50% at 85% 15%,
            var(--hero-glow-2),
            transparent 70%
        );
}

.hero::after {
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000, transparent);
    -webkit-mask-image: radial-gradient(
        ellipse 75% 65% at 50% 25%,
        #000,
        transparent
    );
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (max-width: 940px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

.hero__logo {
    height: clamp(38px, 6vw, 54px);
    width: auto;
    margin-bottom: 1.5rem;
}

.hero__title {
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    margin-bottom: 1rem;
}

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

.hero__lead {
    font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 46ch;
    margin-bottom: 1.75rem;
}

/* Emphasis inside a lead should read as emphasis, not as body text */
.hero__lead strong {
    color: var(--text);
    font-weight: 600;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-faint);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.hero__meta svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex: none;
}

/* Small pill used above the hero title */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35rem 0.8rem;
    margin-bottom: 1.25rem;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

/* ---------- Hero carousel ----------
   Slides are stacked in a single grid cell so the crossfade happens in place
   and the container reserves the height of the tallest slide (no jumping). */
.slide-stack {
    display: grid;
    grid-template-areas: "slide";
}

.slide-stack > .hero-slide {
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}

.slide-stack > .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Slides are grid items, so pin them to the top of the shared cell. Without
   this, a short slide would vertically center inside the tallest slide's
   height and appear to jump between groups. */
.slide-stack > .hero-slide {
    align-self: start;
}

.hero__copy {
    margin-bottom: 1.75rem;
}

.hero__copy .hero__title {
    margin-bottom: 1.15rem;
}

/* A slide's last lead sits flush so the gap down to the CTA buttons is
   identical on every slide regardless of how many paragraphs it has. */
.hero__copy .hero__lead {
    margin-bottom: 0;
}

/* ...but stacked leads still need breathing room between them. Sized in em so
   the rhythm tracks the lead's own clamped font-size at every breakpoint. */
.hero__copy .hero__lead + .hero__lead {
    margin-top: 0.85em;
}

/* ---------- Sequenced reveals ---------- */
[data-reveal-at] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

[data-reveal-at].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- Carousel dots ---------- */
.hero__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.hero__dot {
    position: relative;
    width: 34px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--speed) var(--ease);
}

.hero__dot:hover {
    background: var(--text-faint);
}

.hero__dot[aria-current="true"] {
    background: var(--bg-inset);
}

/* Progress fill that runs for the slide's dwell time */
.hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
}

.hero__dot[aria-current="true"]::after {
    transform: scaleX(1);
    transition: transform linear var(--dot-duration, 6s);
}

/* When autoplay is paused or motion is reduced, just show a solid dot */
.hero.is-paused .hero__dot[aria-current="true"]::after,
.no-autoplay .hero__dot[aria-current="true"]::after {
    transition: none;
}

/* ---------- Chat panel (AI agent slide) ---------- */
.chat-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.15rem;
    min-height: 320px;
}

.chat-bubble {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    max-width: 92%;
}

.chat-bubble__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: #1e2a38;
    color: #7dd3fc;
}

.chat-bubble__avatar svg {
    width: 14px;
    height: 14px;
}

.chat-bubble__text {
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: #172231;
    color: var(--code-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* The chat panel is always on a dark surface, so these are hard-coded rather
   than themed - otherwise the light-theme border would show up on dark. */
.chat-bubble__text code {
    padding: 1px 5px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 4px;
    background: rgba(125, 211, 252, 0.14);
    color: #7dd3fc;
    font-size: 0.9em;
}

.chat-bubble__text code.file {
    border-color: rgba(94, 234, 212, 0.34);
    background: rgba(45, 212, 191, 0.16);
    color: #5eead4;
    font-weight: 500;
    white-space: nowrap;
}

/* User turn sits on the right with the brand tint */
.chat-bubble--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-bubble--user .chat-bubble__avatar {
    background: rgba(225, 29, 38, 0.18);
    color: #ff8f95;
}

.chat-bubble--user .chat-bubble__text {
    background: #3a7797;
    border: 1px solid rgba(37, 197, 246, 0.894);
}

/* "thinking" line gets a subtle animated ellipsis */
.chat-bubble--thinking .chat-bubble__text {
    color: #c0c7d0;
    font-style: italic;
}

/* ---------- Checklist panel (setup slide) ---------- */
.check-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.25rem;
    min-height: 320px;
    justify-content: center;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: #131d29;
    color: var(--code-text);
    font-size: 0.9375rem;
}

.check-item__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.16);
    color: #4ade80;
}

.check-item__mark svg {
    width: 14px;
    height: 14px;
}

.check-item--finale {
    background: linear-gradient(
        90deg,
        rgba(229, 245, 13, 0.22),
        rgba(40, 214, 249, 0.18)
    );
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.check-item--finale .check-item__mark {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Short code samples living under the checklist: the checklist says what you
   can do, these two say how little code it takes. Sized down from the hero
   window so they stay a supporting detail. */
.check-panel__snips {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--code-border);
}

.check-panel__snips-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #93a5bb;
}

.check-panel .code-block__label {
    padding: 0.5rem 0.8rem;
    font-size: 0.65rem;
}

/* Two classes deep on purpose: .code-window pre / code appear later in this
   file at the same specificity and would otherwise win. */
.check-panel .code-block pre {
    margin: 0;
    padding: 0.7rem 0.9rem 0.8rem;
    overflow-x: auto;
    color: var(--code-text);
    font-size: 0.75rem;
    line-height: 1.55;
    tab-size: 4;
}

.check-panel .code-block pre code {
    font-size: inherit;
    background: none;
    padding: 0;
    color: inherit;
}

/* ---------- Code window ---------- */
.code-window {
    background: var(--code-bg);
    /* --code-ring, not --code-border: this is the outer edge the window
       needs to visibly separate from the page (a soft white ring in dark
       mode); --code-border is reserved for the darker internal seams below. */
    border: 1px solid var(--code-ring);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.code-window__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
}

.code-window__dots {
    display: flex;
    gap: 6px;
    flex: none;
}

.code-window__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Tuned to stay visible against the lighter --code-header-bg above */
    background: #55698c;
}

.code-window__title {
    font-family: var(--font-mono);
    font-size: 1.0rem;
    color: #cedef1;
    margin-left: 0.35rem;
}

.code-window__body {
    display: grid;
    gap: 1px;
    background: var(--code-border);
}

.code-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--code-bg);
    /* Padding moved to the 
 so the label can bleed to the full width */
    padding: 0;
    /* The 1px gap in .code-window__body (--code-border) already separates
       request from response, but a light ring around each individual block
       is what makes it read as its own contained card rather than one of
       two halves of a single panel - matters most in dark mode. */
    border: 1px solid var(--code-ring);
    border-radius: calc(var(--radius) - 4px);
}

/* Coloured header bar, matching the request/response panels on the
   function reference page. */
.code-block__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    /* Neutral fallback if no modifier is applied */
    background: var(--code-header-bg);
}

.code-block__label svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.code-block--request .code-block__label {
    background: linear-gradient(90deg, var(--req), var(--req-dark));
}

.code-block--response .code-block__label {
    background: linear-gradient(90deg, var(--res), var(--res-dark));
}

/* Code samples that are neither a request nor a response - a teal bar keeps
   them clearly separate from the orange/green request/response pairing.
   Hard-coded like --req/--res: these always sit on the dark code surface. */
.code-block--snippet .code-block__label {
    background: linear-gradient(90deg, #0f9c9a, #0b6f76);
}

.code-window pre {
    margin: 0;
    padding: 0.85rem 1.1rem 1rem;
    overflow-x: auto;
    color: var(--code-text);
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 2;
}

.code-window code {
    font-size: inherit;
    background: none;
    padding: 0;
    color: inherit;
}

/* Minimal JSON token colors, theme independent */
.tok-key {
    color: #7dd3fc;
}

.tok-str {
    color: #a5e8a0;
}

.tok-num {
    color: #fbbf8c;
}

.tok-bool {
    color: #d8b4fe;
}

.tok-punc {
    color: #7e8ea3;
}

/* Used by the short language samples, not by the JSON windows */
.tok-com {
    color: #8497ad;
    font-style: italic;
}

.tok-kw {
    color: #d8b4fe;
}

/* ---------- Card grid ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.card-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Linked navigation card */
.nav-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--speed) var(--ease),
        border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

/* Accent bar that fills in on hover */
.nav-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease);
}

.nav-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    color: var(--text);
}

.nav-card:hover::after {
    transform: scaleX(1);
}

.nav-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    border-radius: 11px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    color: var(--brand);
    flex: none;
}

.nav-card__icon svg {
    width: 21px;
    height: 21px;
}

.nav-card__title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1.125rem;
    margin-bottom: 0.4rem;
}

.nav-card__arrow {
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}

.nav-card:hover .nav-card__arrow {
    transform: translateX(4px);
    color: var(--brand);
}

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

/* ---------- Step / flow list ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.steps li {
    counter-increment: step;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.steps li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-contrast);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
}

.steps h3 {
    font-size: 1.0625rem;
    margin-bottom: 0.35rem;
}

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

/* ---------- Promo cards (commercial tools) ---------- */
.promo-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

.promo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Logo sits above the heading; the column keeps both centered and evenly
   spaced regardless of how long the product name wraps. */
.promo-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-inset);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.promo-card__head h3 {
    font-size: 1rem;
    margin: 0;
}

.promo-card__logo-link {
    display: inline-flex;
    justify-content: center;
}

/* The lockups carry ~20% empty space below the artwork, so the box is taller
   than the old wordmark-only logos to land on the same optical size. */
.promo-card__logo {
    height: 34px;
    width: auto;
}

/* Theme-aware logo swap. Each pair shares one set of intrinsic dimensions, so
   no aspect-ratio pinning is needed here; only one variant is ever in flow. */
.promo-card__logo--light,
.promo-card__logo--dark {
    display: block;
}

.promo-card__logo--dark {
    display: none;
}

[data-theme="dark"] .promo-card__logo--light {
    display: none;
}

[data-theme="dark"] .promo-card__logo--dark {
    display: block;
}

.promo-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    flex: 1;
}

.promo-card__shot {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: block;
}

.promo-card__body .btn {
    margin-top: auto;
}

/* ---------- Callout ---------- */
.callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
}

.callout svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
    flex: none;
    margin-top: 3px;
}

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

/* ==========================================================================
   Documentation pages
   Shared shell for start / functions / playground / support / license /
   mcp / ai-agent so they match index.html.
   ========================================================================== */

/* ---------- Page header ----------
   Kept deliberately short: this sits directly under the sticky nav on every
   sub page, so its padding is the first thing pushing real content down the
   screen. The icon sits inline with the title (.page-header__heading) rather
   than stacked above it, which is what actually buys back most of the
   vertical space - the icon no longer needs its own line + bottom margin.

   No radial-gradient glow here (unlike .hero below): that effect is tuned
   for the tall, wide hero band on index.html. At this section's much
   shorter height, the same two ellipses had nowhere to fade out before
   hitting the edges and read as a squashed, muddy smear instead of a
   glow. Flat background here reads cleaner at this height. */
.page-header {
    padding: clamp(1.1rem, 2.4vw, 1.65rem) 0;
    border-bottom: 1px solid var(--border);
}

.page-header__inner {
    text-align: center;
}

/* Icon + title on one line. Wraps both in .page-header__heading so the pair
   centers as a unit above the lead paragraph, instead of the icon sitting on
   its own row above the heading. */
.page-header__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    color: var(--brand);
}

.page-header__icon svg {
    width: 18px;
    height: 18px;
}

.page-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin-bottom: 0;
}

.page-lead {
    max-width: 62ch;
    margin: 0 auto;
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    color: var(--text-muted);
}

/* ---------- Two column docs layout ---------- */
.doc-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    align-items: start;
}

@media (max-width: 900px) {
    .doc-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The in-page TOC duplicates the content order on narrow screens */
    .doc-toc {
        display: none;
    }
}

/* ---------- Sticky in-page table of contents ---------- */
.doc-toc {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--nav-h) - 48px);
    overflow-y: auto;
}

.doc-toc__title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.75rem;
}

.doc-toc nav {
    display: grid;
    gap: 2px;
}

.doc-toc a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-left: 2px solid var(--border);
    border-radius: 0 5px 5px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: background var(--speed) var(--ease),
        color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.doc-toc a:hover {
    background: var(--bg-inset);
    color: var(--text);
}

.doc-toc a.is-current {
    border-left-color: var(--brand);
    background: var(--bg-inset);
    color: var(--text);
    font-weight: 500;
}

/* The group a current sub-entry belongs to. Marked more quietly than the
   current entry itself, so the sidebar shows both where you are and which
   area it sits in without two things competing to look selected. */
.doc-toc a.is-current-parent {
    border-left-color: var(--border-strong);
    color: var(--text);
}

/* Nested entries */
.doc-toc__sub {
    display: grid;
    gap: 2px;
}

.doc-toc__sub a {
    padding-left: 1.5rem;
    font-size: 0.85rem;
}

/* ---------- Long form content ---------- */
.prose {
    max-width: 78ch;
}

.prose > section + section {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.prose h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.prose h3 {
    font-size: 1.175rem;
    margin-top: 1.85rem;
    margin-bottom: 0.5rem;
}

.prose h4 {
    font-size: 1.0625rem;
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
}

.prose p,
.prose li {
    color: var(--text-muted);
}

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

.prose ul,
.prose ol {
    padding-left: 1.3rem;
    margin: 0 0 1rem;
}

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

.prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose img {
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

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

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

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

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

/* Identifiers in table cells should not break mid-word */
.prose th code,
.prose td code {
    white-space: nowrap;
}

/* ...which means a wide table needs to scroll rather than overflow on narrow
   screens. Applied only at small widths so the desktop table is untouched. */
@media (max-width: 760px) {
    .prose table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Scroll targets clear the sticky navbar via ONE mechanism only:
   html { scroll-padding-top } near the top of this file.

   There used to be a scroll-margin-top here as well, on the theory that two
   safety nets beat one. They do not add up, they add TOGETHER: for fragment
   navigation the target's scroll-margin box is aligned with the scrollport's
   scroll-padding edge, so the offsets sum. 84px + 88px parked every heading
   172px down the viewport, which put it below the line the sidebar uses to
   decide what you are reading - so clicking "Access keys" highlighted "Who can
   reach it", one entry above, on every anchor on the page.

   scroll-padding-top is the one to keep: it lives on the scrollport, so it
   covers every anchor including #commercial and #main, which sit outside
   .prose and were never matched by the rule that used to be here. */

/* ---------- Link list (credits, resources) ---------- */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.link-list a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background var(--speed) var(--ease),
        border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.link-list a:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--brand);
}

.link-list svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--text-faint);
}

.link-list a:hover svg {
    color: var(--brand);
}

/* ---------- Code blocks inside prose ----------
   The dark surface is intentional in both themes, matching the code windows on
   the landing page. Note there is no syntax highlighter here; these pages no
   longer load Prism. */
.prose pre {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--code-bg);
    /* --code-ring for the same reason as .code-window: the outer edge needs
       to separate the block from the page, which --code-border alone (tuned
       for internal seams) does not do strongly enough in dark mode. */
    border: 1px solid var(--code-ring);
    border-radius: var(--radius-sm);
    color: var(--code-text);
    font-size: 0.8125rem;
    line-height: 1.65;
    overflow-x: auto;
    tab-size: 2;
}

.prose pre code {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: inherit;
}

/* ---------- Blockquote ---------- */
.prose blockquote {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.2rem;
    background: var(--bg-inset);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
}

.prose blockquote > :last-child {
    margin-bottom: 0;
}

/* Figures / diagrams sit centered with a little air */
.prose figure {
    margin: 0 0 1.5rem;
    text-align: center;
}

.prose figcaption {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: var(--text-faint);
}

/* ---------- Callout variants ---------- */
.callout__content > :last-child {
    margin-bottom: 0;
}

.callout__title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
    color: var(--text);
}

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

.callout--info > svg {
    color: var(--accent);
}

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

.callout--warn > svg {
    color: var(--warn);
}

/* ---------- Question / answer block ---------- */
.qa {
    padding: 1.3rem 1.45rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.qa__q {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    color: var(--text);
}

.qa__q svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 4px;
    color: var(--brand);
}

.qa__a > :last-child {
    margin-bottom: 0;
}

/* ---------- License block ---------- */
.license-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.license-card__badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-contrast);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.license-card__meta {
    font-size: 0.9375rem;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.license-card__terms {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.7;
}

.license-card__terms p:last-child {
    margin-bottom: 0;
}

/* ---------- Footer ---------- */
.site-footer {
    padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    font-size: 0.9375rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.site-footer__brand img {
    height: 24px;
    width: auto;
    margin-bottom: 1rem;
}

.site-footer__brand p {
    color: var(--text-muted);
    max-width: 34ch;
    margin: 0;
}

.site-footer h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.9rem;
}

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

.site-footer ul a {
    color: var(--text-muted);
}

.site-footer ul a:hover {
    color: var(--brand);
}

.site-footer__legal {
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-faint);
}

.site-footer__legal p {
    margin: 0 0 0.4rem;
}

.site-footer__legal a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__legal a:hover {
    color: var(--brand);
}

.site-footer__disclaimer {
    color: var(--text-muted);
    font-weight: 500;
}

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

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