/* ============================================================
   AGIS · Jarvis Static Site Theme
   Light editorial + sky. Unified design language across:
   Landing, Commands, Documentation, Legal, Portal, and 404.
   ============================================================ */

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

:root {
    /* Slate & Cloud Twilight Palette - Eye comfort across all pages & subdomains */
    --paper: #16181f;
    --paper-soft: #1c202a;
    --paper2: #12141a;
    --card: #1e222d;
    --card-hover: #262c3b;

    --ink: #e8e5dc;
    --ink2: #b8b3a5;
    --mut: #828a99;
    --faint: #565e6d;

    --line: #2d3444;
    --hair: rgba(255, 255, 255, 0.08);
    --hair2: rgba(255, 255, 255, 0.16);

    /* Sky & Accent Palette */
    --accent: #246de0;
    --accent-ink: #7cb2fd;
    --accent-soft: #1a3a68;
    --accent-wash: rgba(46, 120, 230, 0.14);
    --accent-glow: rgba(46, 120, 230, 0.28);

    /* Status Signals */
    --ok: #22c55e;
    --ok-bg: rgba(34, 197, 94, 0.14);
    --warn: #eab308;
    --warn-bg: rgba(234, 179, 8, 0.14);
    --err: #ef4444;
    --err-bg: rgba(239, 68, 68, 0.14);

    /* Typography Stacks */
    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas, monospace;

    /* Layout & Elevation */
    --max: 1200px;
    --pad: clamp(20px, 4.5vw, 40px);
    --radius-sm: 4px;
    --radius-md: 8px;

    /* Hard Neo-brutalist Shadows */
    --sh-sm: 3px 3px 0 #0c0e12;
    --sh: 5px 5px 0 #0c0e12;
    --sh-lg: 8px 8px 0 #0c0e12;
    --sh-accent: 5px 5px 0 var(--accent);
    --sh-accent-soft: 5px 5px 0 var(--accent-soft);

    /* Micro-interactions */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.14s;

    /* Legacy Aliases for carried content */
    --bg: var(--paper);
    --bg-elev: var(--card);
    --bg-elev-2: var(--paper2);
    --bg-elev-3: var(--paper2);
    --hl: var(--hair);
    --hl-2: var(--hair2);
    --hl-3: var(--hair2);
    --text-1: var(--ink);
    --text-2: var(--ink2);
    --text-3: var(--mut);
    --text-4: var(--faint);
    --accent-dim: var(--accent-wash);
    --accent-mute: var(--accent-soft);
    --accent-deep: var(--accent-ink);
    --signal-ok: var(--ok);
    --signal-warn: var(--warn);
    --signal-err: var(--err);
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

::-moz-selection {
    background: var(--ink);
    color: var(--paper);
}

.codeblock ::selection,
footer.site-footer ::selection {
    background: var(--paper2);
    color: var(--ink);
}

.codeblock ::-moz-selection,
footer.site-footer ::-moz-selection {
    background: var(--paper2);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration-skip-ink: auto;
}

button {
    font: inherit;
    color: inherit;
}

img,
svg {
    max-width: 100%;
    vertical-align: middle;
}

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

.serif {
    font-family: var(--serif);
}
.mono,
.stat-label,
.stat .l,
footer,
.topbar {
    font-family: var(--mono);
}

/* ---------- Structural Layout ---------- */
.shell {
    width: min(100% - 2.5rem, var(--max));
    margin-inline: auto;
}

::view-transition-old(root) {
    animation: 0.2s cubic-bezier(0.4, 0, 1, 1) both vtFadeOut;
}

::view-transition-new(root) {
    animation: 0.32s cubic-bezier(0.22, 1, 0.36, 1) both vtFadeIn;
}

@keyframes vtFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes vtFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pageContentFade {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    40% {
        opacity: 0.45;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stickyAsideFade {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    40% {
        opacity: 0.45;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTextReveal {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    40% {
        opacity: 0.45;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    flex: 1;
    display: block;
    animation: pageFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Top Status Bar ---------- */
.topbar {
    background: #0f1116;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.topbar .shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: rgba(247, 244, 236, 0.75);
}

.topbar .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62eb91;
    box-shadow: 0 0 0 3px rgba(98, 235, 145, 0.25);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.9);
    }
}

/* ---------- Masthead Navigation ---------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 90;
    /* No bottom rule. The hero is pulled up behind this bar (margin-top:-62px),
     so a hard border here was drawing a line straight through the sky. The tint
     now fades out toward the bottom edge and the backdrop blur does the rest,
     which reads as one continuous atmosphere instead of a bar sitting on top of
     a picture. */
    background: linear-gradient(
        180deg,
        rgba(22, 24, 31, 0.78) 0%,
        rgba(22, 24, 31, 0.46) 58%,
        rgba(22, 24, 31, 0) 100%
    );
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    transition: background 0.25s ease;
    view-transition-name: site-masthead;
}

/* A backdrop-filter has to re-run every time the content behind it moves, so on
 * a scroll that is one full-width blur per frame for as long as the bar is
 * stuck. Once scrolled there is nothing to see it through: ::after has faded to
 * rgba(22,24,31,0.97), so the blurred backdrop contributes about 3% of the
 * final colour. The blur is kept at the top of the page, where it does the work
 * of blending the bar into the sky, and switched off for the entire scroll where
 * it is pure cost. */
html.is-scrolled .masthead {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.masthead::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(22, 24, 31, 0.97);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
    opacity: var(--scroll-p, 0);
    pointer-events: none;
    z-index: 0;
}

.masthead.is-ready::after {
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead.is-scrolled::after,
html.is-scrolled .masthead::after {
    opacity: var(--scroll-p, 1);
}

.masthead .shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-right: auto;
    transition: transform 0.12s ease;
    /* The brand is a link home, not content. Selecting "AGIS Jarvis v6 alpha" out
     of the header and pasting it somewhere is never what anyone means, and the
     double-click word selection that comes with it looks broken. Matches how
     Anthropic treats its own nav logo and controls. */
    -webkit-user-select: none;
    user-select: none;
}

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

/* The wordmark is a transparent-background SVG, so it needs no frame. The old
   rule put a background, a 2px border, a hard drop shadow and 3px of padding
   around it, which boxed the letters inside a box that the SVG itself also
   drew - a thumbnail in the nav rather than a wordmark. */
.brand-logo {
    height: 26px;
    width: auto;
    flex: 0 0 auto;
    display: block;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    /* No drag-ghost either - dragging the logo out of the header is never
     intentional and produces a broken half-transparent image. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.brand:hover .brand-logo {
    opacity: 0.82;
    transform: translateY(-1px);
}

.brand-name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.brand-name small {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--mut);
    margin-top: 3px;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
}

.nav-links a {
    text-decoration: none;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    border-bottom: 2px solid transparent;
    color: var(--ink2);
    transition:
        color 0.14s ease,
        border-color 0.14s ease,
        background-color 0.14s ease;
}

.nav-links a:hover {
    color: var(--ink);
    background: var(--paper2);
}

.nav-links a.is-active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
    background: var(--accent-wash);
    font-weight: 600;
}

.menu-toggle {
    display: none;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--line);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.menu-toggle:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--line);
}

.menu-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--accent);
    color: #ffffff;
    border: 2px solid var(--line);
    padding: 9px 16px;
    box-shadow: var(--sh-sm);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background var(--dur-fast) ease;
    white-space: nowrap;
}

.nav-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--accent);
    background: #3b86f7;
}

.nav-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}

.cta-short {
    display: none;
}

.nav-mobile-action {
    display: none;
}

/* ---------- Buttons & Action Elements ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0.72rem 1.4rem;
    border: 2px solid var(--line);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--sh-sm);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background-color var(--dur-fast) ease;
    cursor: pointer;
    user-select: none;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--accent-soft);
    background: var(--card-hover);
}

.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
}

.btn-primary:hover::before {
    left: 150%;
    transition: left 0.7s ease-in-out;
}

.btn-primary:hover {
    background: #0d0c0a;
    color: #ffffff;
    box-shadow: 6px 6px 0 var(--accent);
}

.btn .arrow {
    font-size: 1.05em;
    transition: transform 0.15s ease;
}

.btn:hover .arrow {
    transform: translateX(3px);
}

.btn-sm {
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    font-size: 11px;
}

/* ---------- Typography & Editorial Badges ---------- */
.label {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mut);
    white-space: nowrap;
}

.label--accent {
    color: var(--accent-ink);
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    min-height: min(84vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -62px;
    padding-top: calc(clamp(64px, 9vw, 112px) + 62px);
    padding-bottom: clamp(64px, 9vw, 112px);
    background: linear-gradient(180deg, #131722 0%, #151923 45%, var(--paper) 100%);
}

/* No horizontal scrollbar, ever. Decorative layers are contained at source, and
   this catches anything that regresses later. `clip` does not create a
   scrollport, so `position: sticky` on the masthead keeps working - `hidden`
   would silently break it. */
body {
    overflow-x: clip;
}

.hero-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-sky canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Same reason as the horizon band: a full-bleed canvas with square corners
     draws its own edges across the sky. Only the top needs fading - the bottom
     runs off the viewport. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
    /* Hidden until site.js confirms a frame was drawn. The ::before/::after
     gradients underneath are the base layer, so the reveal is a cross-fade
     rather than a sudden appearance, and a slow first compile can never leave a
     blank rectangle sitting in the hero. */
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sky-ready .hero-sky canvas,
.sky-ready .final-sky canvas {
    opacity: 1;
}

/* Pure-CSS atmosphere, always present underneath the WebGL layers.
   The hero previously had atmosphere only when WebGL succeeded: getContext
   returned null, the canvas was display:none, and the hero fell back to a flat
   gradient with no error anywhere. This renders the drifting cloud bands with
   nothing but gradients, so the effect cannot disappear - a browser that
   cannot run the shaders still gets the look, and the canvases layer on top. */
.hero-sky::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 60% at 22% 8%, rgba(124, 178, 253, 0.16), transparent 60%),
        radial-gradient(90% 50% at 78% 18%, rgba(46, 120, 230, 0.12), transparent 62%),
        radial-gradient(140% 70% at 50% 96%, rgba(232, 229, 220, 0.07), transparent 65%);
    animation: atmos-drift 34s ease-in-out infinite alternate;
    will-change: transform;
}

/* Second, slower band for parallax depth. */
.hero-sky::after {
    content: '';
    position: absolute;
    inset: -10% -5%;
    background:
        radial-gradient(80% 34% at 34% 74%, rgba(232, 229, 220, 0.055), transparent 70%),
        radial-gradient(70% 30% at 68% 62%, rgba(124, 178, 253, 0.05), transparent 72%);
    animation: atmos-drift 52s ease-in-out infinite alternate-reverse;
    will-change: transform;
}

@keyframes atmos-drift {
    from {
        transform: translate3d(-2.5%, 1.5%, 0) scale(1.02);
    }
    to {
        transform: translate3d(2.5%, -1.5%, 0) scale(1.06);
    }
}

/* When no WebGL context exists at all, drop the (invisible) canvases out of
   the paint path entirely and lean on the CSS bands. */
.no-webgl .hero-sky canvas,
.no-webgl .final-sky canvas,
.no-webgl .hero-cloud-horizon canvas {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-sky::before,
    .hero-sky::after {
        animation: none;
    }
}

#skyCanvas {
    opacity: 0.96;
    z-index: 1;
}

#mistCanvas {
    opacity: 0.35;
    z-index: 2;
    mix-blend-mode: screen;
}

.hero-cloud-horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(100px, 16vw, 190px);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.hero-cloud-horizon canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* The horizon band is a rectangle, and a rectangle laid over the sky shows
     its own top edge as a horizontal cut straight across the hero. Fading the
     alpha at both ends makes the band dissolve into the sky above and the mist
     below instead of butting against them. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 72%, transparent 100%);
}

.cloud-drifter {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(58, 130, 238, 0.12) 0%,
        rgba(58, 130, 238, 0.03) 45%,
        transparent 72%
    );
    filter: blur(28px);
    /* `opacity` as well as `transform`, and that is the whole point. These three
     * animate both (see driftCloud1-3), and a blur(28px) surface that is only
     * promoted for transform still has to be re-composited whenever its opacity
     * changes, every frame, for the whole 40-64s cycle. With both properties
     * promoted the blur is rasterised once and only the layer transform and
     * alpha are touched afterwards. */
    will-change: transform, opacity;
    z-index: 1;
}

.cloud-drifter-1 {
    width: min(520px, 80vw);
    height: 240px;
    top: 10%;
    left: -15%;
    animation: driftCloud1 46s linear infinite;
}

.cloud-drifter-2 {
    width: min(640px, 90vw);
    height: 280px;
    top: 45%;
    right: -20%;
    animation: driftCloud2 64s linear infinite reverse;
}

.cloud-drifter-3 {
    width: min(400px, 70vw);
    height: 200px;
    top: 68%;
    left: -10%;
    animation: driftCloud3 40s linear infinite;
}

@keyframes driftCloud1 {
    0% {
        transform: translate3d(-10vw, 0, 0) scale(1);
        opacity: 0.35;
    }
    50% {
        transform: translate3d(55vw, -18px, 0) scale(1.1);
        opacity: 0.75;
    }
    100% {
        transform: translate3d(120vw, 0, 0) scale(0.95);
        opacity: 0.35;
    }
}

@keyframes driftCloud2 {
    0% {
        transform: translate3d(10vw, 0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(-50vw, 22px, 0) scale(1.14);
        opacity: 0.68;
    }
    100% {
        transform: translate3d(-110vw, 0, 0) scale(1);
        opacity: 0.3;
    }
}

@keyframes driftCloud3 {
    0% {
        transform: translate3d(-15vw, 12px, 0) scale(0.9);
        opacity: 0.45;
    }
    50% {
        transform: translate3d(50vw, -12px, 0) scale(1.08);
        opacity: 0.8;
    }
    100% {
        transform: translate3d(115vw, 12px, 0) scale(0.9);
        opacity: 0.45;
    }
}

.hero-grid {
    position: relative;
    z-index: 2;
    width: min(100% - 2.5rem, 940px);
    margin-inline: auto;
    text-align: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--card);
    /* No backdrop-filter here, deliberately. --card is #1e222d, fully opaque, so
     * the blur was behind an opaque background and could not contribute a single
     * pixel - while this element floats over the animating sky canvas, so the
     * 8px blur was being recomputed every frame for the whole 6s kickFloat cycle
     * to produce nothing. */
    border: 2px solid var(--line);
    padding: 8px 16px;
    box-shadow: 3px 3px 0 var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    animation:
        heroTextReveal 0.5s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both,
        kickFloat 6s ease-in-out 0.55s infinite;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.15s ease;
}

.kick:hover {
    transform: translate(-1px, -2px);
    box-shadow: 4px 4px 0 var(--accent);
    background: var(--card-hover);
}

@keyframes kickFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.kick i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 95, 208, 0.25);
    animation: pulse 2.4s infinite;
}

.hero h1 {
    font-family: var(--serif);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.92;
    margin: 18px 0 8px;
    font-size: clamp(4.2rem, 11.5vw, 8.8rem);
    animation: heroTextReveal 0.55s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cloud-text {
    display: inline-block;
    padding: 0.04em 0.08em;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.014' numOctaves='6' seed='27'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.2 1.2 1.2 0 -0.42'/%3E%3C/filter%3E%3Crect width='900' height='320' filter='url(%23c)'/%3E%3C/svg%3E"),
        linear-gradient(
            180deg,
            #d6e6f5 0%,
            #e2eefa 14%,
            #b4d2f2 34%,
            #3b6b9e 48%,
            #14335a 56%,
            #79a6d9 68%,
            #d8e7f7 86%,
            #d6e6f5 100%
        );
    background-size:
        900px 320px,
        100% 240%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 #0c0e12) drop-shadow(0 16px 32px rgba(46, 120, 230, 0.25));
    /* Only the float. The `cloudrift` keyframes that used to run here are gone,
     * and this is the most expensive animation the site ever had.
     *
     * cloudrift animated `background-position`, which is not a compositable
     * property. Every frame Chrome had to re-rasterise the feTurbulence SVG
     * (900x320, 6 octaves) at its new offset, re-clip it to the glyphs of the
     * wordmark, and then re-run two drop-shadow filters over the whole thing -
     * on the largest, most visible element on the page. `will-change:
     * background-position` was on it, which does nothing for a non-compositable
     * property and only pinned a large layer in memory.
     *
     * Measured at 6x CPU throttle over one page scroll, Paint was 400ms across
     * 173 paints with the CSS animations running and 23ms across 23 without
     * them. Most of that delta was this one element.
     *
     * There is no cheap way to keep the drift: scrolling a background clipped to
     * text is inherently a repaint, and the same is true of animating a mask
     * position. cloudFloat is a plain transform, so it composites for free and
     * carries the motion on its own. Reinstating the drift means changing the
     * technique, not tuning this one. */
    animation: cloudFloat 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes cloudrift {
    0% {
        background-position:
            0 0,
            0 0;
    }
    50% {
        background-position:
            450px 0,
            0 100%;
    }
    100% {
        background-position:
            900px 0,
            0 0;
    }
}

@keyframes cloudFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.01);
    }
}

.hero-sub {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin-bottom: 18px;
    color: var(--ink);
    animation: heroTextReveal 0.55s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-sub em {
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.lede {
    font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    color: var(--ink2);
    max-width: 52ch;
    line-height: 1.65;
    margin-inline: auto;
}

.hero-copy .lede {
    animation: heroTextReveal 0.55s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.hero-copy .actions {
    animation: heroTextReveal 0.55s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut);
    animation: heroTextReveal 0.55s 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-meta b {
    color: var(--ink);
    font-weight: 600;
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--mut);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: bob 2.6s ease-in-out infinite;
    text-decoration: none;
}

.hero-scroll::after {
    content: '↓';
    font-size: 12px;
}

@keyframes bob {
    0%,
    100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 6px);
    }
}

/* ---------- Stats Band ---------- */
.stats {
    position: relative;
    background: var(--card);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0) 60%);
}

.stats-grid {
    display: grid;
    /* Five tiles in one row. minmax(0, 1fr) rather than plain 1fr so a wide
     value ("126.6K+") cannot push its column wider than its share and shove
     the last tile onto a second row - which is exactly what happened the
     first time Reliability was added. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat {
    padding: 28px 18px;
    border: 0;
    background: transparent;
    /* The hover wash is a pseudo-element fading its opacity, not a
     * background-color transition on the tile. Each tile holds a clamp(1.75rem,
     * 2.45rem) mono figure, so animating background-color repaints the glyphs at
     * every step of the fade - which is what made the highlight visibly chase the
     * cursor instead of tracking it. An opacity change on its own layer never
     * touches the text. z-index:0 here is load-bearing: it makes .stat a stacking
     * context so the ::before at z-index:-1 sits between the tile's own background
     * and its content, instead of escaping behind the section. */
    position: relative;
    z-index: 0;
    transition: background-color 0.16s ease;
    /* Centre each tile's content so the row reads as one evenly spread band
     * instead of five left-aligned blocks of differing text length. */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Absolute, so it is not a flex item and does not shift the tile's contents. */
.stat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--paper);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}

.stat-value {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.stat:hover::before {
    opacity: 1;
}

.stat:last-child {
    border-right: 0;
}

.stat-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mut);
}

.stat-value {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--accent-ink);
}

.stat-sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mut);
    line-height: 1.4;
}

/* ---------- Content Sections ---------- */
.section {
    padding: clamp(64px, 9vw, 112px) 0;
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 72%,
        rgba(255, 255, 255, 0.026) 100%
    );
}
/* Atmosphere for the middle of the page, which has no WebGL layer of its own.
   A fifth GL context for a decorative gradient is not worth the frame budget,
   so this is the same cloud vocabulary as the shader, rendered in CSS. The
   animation is transform-only so it composites on the GPU without repainting
   the section.

   `:not(.section-final)` is load-bearing, not tidiness. The closing section is
   `<section class="section section-final">`, so a bare `.section::after` also
   matches it - and both rules carry identical specificity, so source order
   decided which won. This rule came later, its `inset: -12% -6%` overrode the
   sunset scrim's `bottom: 0`, and the scrim that was supposed to dissolve the
   bottom of the sky into the footer was painted across the top of the section
   instead. That was the hard line across the sunset. */
.section:not(.section-final)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 34% at 18% 22%, rgba(124, 178, 253, 0.05), transparent 68%),
        radial-gradient(46% 30% at 82% 68%, rgba(46, 120, 230, 0.045), transparent 70%),
        radial-gradient(70% 40% at 50% 108%, rgba(232, 229, 220, 0.028), transparent 72%);
    /* Painted larger than the box so the drift has somewhere to go without the
     element ever being wider than its section. */
    background-size: 130% 130%;
    background-position: center;
    animation: section-drift 140s ease-in-out infinite alternate;
    /* Full-section width, one per section, scaled every frame. Unpromoted, the
     * scale() repaints the whole 130%-sized background instead of reusing a
     * rasterised layer. */
    will-change: transform;
}
@keyframes section-drift {
    from {
        transform: translate3d(-1.5%, -1%, 0) scale(1.02);
    }
    to {
        transform: translate3d(1.5%, 1.5%, 0) scale(1.06);
    }
}

.section:last-child {
    border-bottom: 0;
}

.section-head {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2.8rem;
}

.section-head h2 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4.6vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
}

.section-copy {
    color: var(--ink2);
    font-size: 1.05rem;
    max-width: 54ch;
    justify-self: end;
}

/* ---------- Features Grid ---------- */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* No frame. The grid used to be a 2px-bordered panel on an opaque fill with
     internal rules on every cell, so the middle of the page read as a bordered
     spreadsheet sitting on top of the background. Removing the outer border, the
     fill and the cell rules leaves the same six blocks of content, separated by
     space instead of lines, sitting in the page rather than on it. */
    border: 0;
    background: transparent;
    box-shadow: none;
}

.feature {
    padding: 32px 30px 34px;
    border: 0;
    background: transparent;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.feature:nth-child(3n) {
    border-right: 0;
}

.feature:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.feature:hover {
    background: var(--accent-wash);
}

.feature .f-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.feature .f-num {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-ink);
}

.feature .f-ico {
    width: 44px;
    height: 44px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--accent-ink);
    background: var(--card);
    box-shadow: 3px 3px 0 var(--line);
    transition: all 0.16s ease;
}

.feature:hover .f-ico {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--accent);
}

.feature h3 {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0.4rem 0 0.6rem;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.feature p {
    color: var(--ink2);
    font-size: 0.96rem;
    line-height: 1.68;
    flex: 1;
}

.feature .f-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1.1rem;
}

.f-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    background: var(--paper);
    border: 1px solid var(--hair2);
    border-radius: 3px;
    color: var(--mut);
}

/* ---------- Setup Steps ---------- */
.setup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--sh-lg);
}

.step {
    padding: 36px 32px;
    border-right: 2px solid var(--line);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    transition: background 0.16s ease;
}

.step:hover {
    background: var(--accent-wash);
}

.step:last-child {
    border-right: 0;
}

@media (min-width: 881px) {
    .step + .step::before {
        content: '→';
        position: absolute;
        left: -14px;
        top: 40px;
        width: 28px;
        height: 28px;
        background: var(--card);
        color: var(--accent-ink);
        border: 2px solid var(--line);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 14px;
        font-family: var(--mono);
        font-weight: 700;
        box-shadow: 2px 2px 0 var(--line);
        z-index: 2;
    }
}

.step strong {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent-ink);
}

.step h3 {
    font-family: var(--serif);
    font-size: 1.6rem;
    margin: 0.8rem 0 0.5rem;
    font-weight: 800;
    color: var(--ink);
}

.step p {
    color: var(--ink2);
    font-size: 0.95rem;
    line-height: 1.65;
    flex: 1;
}

.step code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--paper2);
    border: 1px solid var(--hair2);
    box-shadow: 1.5px 1.5px 0 var(--line);
    padding: 0.15em 0.5em;
    border-radius: 4px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.14s ease;
}

.step code:hover {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* ---------- Final Call-To-Action ---------- */
.section-final {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, #181d28 35%, #151320 65%, #0e0d16 100%);
}
/* And the same at the top, in the other direction: the dusk canvas opens on a
   dark blue that is lighter than the section above it, so without this the
   sunset starts with a visible step down into the page. */
.section-final::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--paper) 0%, rgba(19, 23, 34, 0.55) 45%, rgba(19, 23, 34, 0) 100%);
}
/* Dissolves the bottom of the sunset into the footer's colour. Without it the
   canvas ends on warm brown while the footer starts on cool near-black, and
   that luminance step is a visible line no amount of border tweaking hides. */
.section-final::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 17, 22, 0) 0%, rgba(15, 17, 22, 0.45) 52%, #0f1116 100%);
}

.final-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.final-sky canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.88;
}

.final {
    padding: clamp(72px, 10vw, 120px) 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.final h2 {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.final p {
    color: var(--ink2);
    margin: 18px auto 32px;
    max-width: 52ch;
    font-size: 1.05rem;
}

.final .actions {
    justify-content: center;
}

/* ============================================================
   SHARED PAGE CHROME (Commands / Docs / Legal / Portal / 404)
   ============================================================ */

.page-head {
    padding: 76px 0 48px;
    border-bottom: 2px solid var(--line);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #182030 0%, #161a23 72%, var(--paper) 100%);
}

.page-head::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -5%;
    width: min(520px, 75vw);
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(58, 130, 238, 0.1) 0%,
        rgba(58, 130, 238, 0.02) 50%,
        transparent 72%
    );
    filter: blur(36px);
    pointer-events: none;
    animation: headCloudDrift1 26s ease-in-out infinite alternate;
    /* These two sit on every .page-head, which is docs, commands, portal, terms
     * and privacy - the "whole site" half of the complaint. They animate
     * transform AND opacity with no promotion hint at all, so Blink promoted and
     * demoted the blurred surface as the animation ran. Same fix as
     * .cloud-drifter: name both properties so the blur is rasterised once. */
    will-change: transform, opacity;
    z-index: 0;
}

.page-head::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -5%;
    width: min(420px, 60vw);
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(58, 130, 238, 0.1) 0%,
        rgba(58, 130, 238, 0.02) 45%,
        transparent 70%
    );
    filter: blur(30px);
    pointer-events: none;
    animation: headCloudDrift2 34s ease-in-out infinite alternate;
    will-change: transform, opacity;
    z-index: 0;
}

@keyframes headCloudDrift1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }
    100% {
        transform: translate3d(-10vw, 14px, 0) scale(1.1);
        opacity: 0.85;
    }
}

@keyframes headCloudDrift2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.95);
        opacity: 0.4;
    }
    100% {
        transform: translate3d(12vw, -10px, 0) scale(1.08);
        opacity: 0.75;
    }
}

.page-head .inner {
    position: relative;
    max-width: 900px;
    z-index: 1;
}

.crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    font-weight: 600;
    animation: heroTextReveal 0.5s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crumbs::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--accent);
}

.crumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--hair2);
    transition: border-color 0.15s ease;
}

.crumbs a:hover {
    border-color: var(--ink);
}

.page-head h1 {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5.8vw, 4.1rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: 1.1rem;
    animation: heroTextReveal 0.55s 0.09s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-head h1 em {
    font-style: italic;
    font-weight: 400;
}

.page-head .lede {
    max-width: 50em;
    margin-inline: 0;
    animation: heroTextReveal 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.meta-row {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.6rem;
    animation: heroTextReveal 0.55s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mut);
    text-transform: uppercase;
}

.meta-item .dot {
    width: 6px;
    height: 6px;
    background: var(--mut);
    border-radius: 50%;
}

.meta-item a {
    color: inherit;
    transition: color 0.12s ease;
}

.meta-item a:hover {
    color: var(--accent-ink);
}

.grid-bg {
    display: none;
}

/* Stat Strip under Page Head */
.head-stats {
    display: flex;
    border: 2px solid var(--line);
    margin-top: 2.2rem;
    background: var(--card);
    box-shadow: var(--sh-sm);
    max-width: 840px;
    animation: heroTextReveal 0.55s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.head-stats .s {
    padding: 1.1rem 1.4rem;
    border-right: 2px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.head-stats .s:last-child {
    border-right: 0;
}

.head-stats .v {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.head-stats .v b {
    color: var(--accent-ink);
    font-weight: 700;
}

.head-stats .l {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mut);
}

/* ---------- Docs Shell & Layout ---------- */
.doc-shell {
    padding: 60px 0 96px;
}

.doc-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 230px;
    gap: 3.2rem;
    align-items: start;
}

.doc-aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-self: start;
    animation: stickyAsideFade 0.6s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.doc-aside .label {
    margin-bottom: 0.6rem;
}

.doc-aside a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-left: 2px solid var(--hair);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.doc-aside a:hover {
    background: var(--card);
    border-left-color: var(--accent);
    color: var(--ink);
    transform: translateX(3px);
}

.doc-aside a.is-active {
    color: var(--accent-ink);
    border-left-color: var(--accent);
    background: var(--accent-wash);
    font-weight: 600;
    transform: translateX(4px);
    box-shadow: 2px 2px 0 var(--line);
}

.doc-aside a .ct,
.doc-aside a .num {
    color: #8a93a0;
    font-family: var(--mono);
    font-size: 11px;
}

.doc-aside a.is-active .ct {
    color: var(--accent-ink);
    font-weight: 600;
}

.doc-aside .group-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a93a0;
    margin: 1.2rem 0 0.35rem;
    padding-left: 0.75rem;
}

.doc-aside .docs-home-link {
    border-left: 0;
    padding-left: 0;
}

.doc-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    animation: stickyAsideFade 0.6s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.doc-toc .label {
    margin-bottom: 0.6rem;
}

.doc-toc a {
    display: block;
    padding: 0.36rem 0.75rem;
    color: var(--mut);
    font-size: 12.5px;
    text-decoration: none;
    border-left: 2px solid var(--hair);
    line-height: 1.45;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.doc-toc a:hover {
    color: var(--ink);
    border-left-color: var(--hair2);
}

.doc-toc a.is-active {
    color: var(--accent-ink);
    border-left-color: var(--accent);
    font-weight: 600;
}

.doc-toc .toc-extra {
    padding-top: 0.9rem;
    margin-top: 0.7rem;
    border-top: 1px dashed var(--hair2);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.doc-toc .toc-extra a {
    border-left: 0;
    padding: 0.2rem 0;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Prose & Typography in Docs ---------- */
.doc-body {
    min-width: 0;
    animation: pageContentFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.doc-section {
    margin-bottom: 3.4rem;
    scroll-margin-top: 96px;
}

.doc-section:last-of-type {
    margin-bottom: 1.5rem;
}

.doc-section h2 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.7vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 1.1rem;
    /* Deliberately not a grid. In a grid container every inline child becomes
       its own grid item, so a heading carrying a command - "Music:
       <code>/play</code> doesn't start anything" - gave the code chip a cell of
       its own and pushed the rest of the title onto the next row, out of line
       with the number. The number is an inline-block prefix instead, so a title
       with a command in it wraps like ordinary text and still lines up. */
    display: block;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--line);
}

.doc-section h2::before {
    content: attr(data-num);
    display: inline-block;
    width: 2.6em;
    margin-right: 0.9rem;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent-ink);
    font-weight: 700;
    vertical-align: baseline;
}

.doc-section h2 em {
    font-style: italic;
    font-weight: 400;
}

.doc-section h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 1.8rem 0 0.65rem;
    letter-spacing: -0.01em;
}

.doc-section p {
    color: var(--ink2);
    font-size: 0.98rem;
    line-height: 1.74;
    margin-bottom: 1rem;
}

.doc-section p strong,
.doc-section li strong {
    color: var(--ink);
}

.doc-section p a,
.doc-section li a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: text-decoration-color 0.15s ease;
}

.doc-section p a:hover {
    text-decoration-color: var(--accent);
}

.doc-section .section-lede {
    font-size: 1.05rem;
}

.doc-section code {
    font-family: var(--mono);
    font-size: 0.87em;
    background: var(--card);
    padding: 0.14em 0.48em;
    border-radius: 4px;
    color: var(--ink);
    border: 1px solid var(--hair2);
}

.doc-section ul,
.doc-section ol {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.9rem 0 1.3rem;
}

.doc-section ul li,
.doc-section ol li {
    color: var(--ink2);
    font-size: 0.97rem;
    line-height: 1.68;
    padding-left: 1.7rem;
    position: relative;
}

.doc-section ul li::before {
    content: '›';
    position: absolute;
    left: 0.4rem;
    top: -0.05em;
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 800;
    font-size: 1.15em;
}

.doc-section ol {
    counter-reset: dl;
}

.doc-section ol li {
    counter-increment: dl;
}

.doc-section ol li::before {
    content: counter(dl, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.25em;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Callouts */
.callout {
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent);
    background: var(--card);
    padding: 1.15rem 1.4rem;
    margin: 1.6rem 0;
    box-shadow: var(--sh-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.callout .label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    color: var(--accent-ink);
    font-weight: 700;
}

.callout .label::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.callout p {
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.65;
}

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

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

.callout.warn .label::before {
    background: var(--warn);
}

/* Code Blocks */
.codeblock {
    margin: 1.4rem 0;
    border: 2px solid var(--line);
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.codeblock-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 244, 236, 0.7);
}

.copy-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: rgba(247, 244, 236, 0.85);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.copy-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.copy-btn.copied {
    color: #7dffa8;
    border-color: #7dffa8;
    background: rgba(125, 255, 168, 0.12);
}

.codeblock pre {
    padding: 1.1rem 1.2rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.62;
    white-space: pre;
}

.codeblock pre .c {
    color: rgba(247, 244, 236, 0.48);
}
.codeblock pre .k {
    color: var(--accent-soft);
    font-weight: 600;
}
.codeblock pre .s {
    color: #7dffa8;
}
.codeblock pre .p {
    color: rgba(247, 244, 236, 0.6);
}

.kbd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0 1.3rem;
}

.kbd-row code {
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--line);
    box-shadow: 3px 3px 0 var(--accent-soft);
    padding: 0.4em 0.7em;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.kbd-row code:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--accent);
}

.kbd-row code:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}

/* FAQ Accordions */
.faq-list {
    margin: 0 0 2.2rem;
    border: 2px solid var(--line);
    background: var(--card);
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
}

.faq-item {
    border-bottom: 2px solid var(--line);
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    transition: background 0.15s ease;
}

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

.faq-item summary::after {
    content: '+';
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    color: var(--accent-ink);
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 2px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
    transition:
        transform 0.2s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.faq-item summary:hover {
    background: var(--accent-wash);
}

.faq-answer {
    padding: 0 1.35rem 1.35rem;
}

.faq-answer p {
    color: var(--ink2);
    font-size: 0.96rem;
    line-height: 1.72;
    margin: 0;
}

.faq-answer a {
    color: var(--accent-ink);
}

/* Pager & Doc CTA */
.doc-pager {
    margin: 3.2rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.15rem 1.35rem;
    border: 2px solid var(--line);
    background: var(--card);
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
}

.pager-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--accent-soft);
}

.pager-dir {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.pager-next {
    text-align: right;
}

.pager-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
}

.doc-cta {
    margin-top: 2.8rem;
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent);
    background: var(--card);
    padding: 1.3rem 1.5rem;
    box-shadow: var(--sh-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.doc-cta .label {
    display: block;
    margin-bottom: 0.45rem;
}

.doc-cta p {
    color: var(--ink2);
    font-size: 0.95rem;
    margin: 0;
}

.doc-cta p a {
    color: var(--accent-ink);
    font-weight: 600;
}

/* Docs Hub Cards */
.docs-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.4rem;
    margin: 2.2rem 0 3.2rem;
    animation: pageContentFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 2px solid var(--line);
    background: var(--card);
    padding: 1.75rem;
    text-decoration: none;
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.15s ease;
    will-change: transform;
}

.hub-card:hover {
    transform: translate(-3px, -4px);
    box-shadow: 7px 8px 0 var(--accent);
    background: var(--card-hover);
}

.hub-card .icon-wrap {
    width: 46px;
    height: 46px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--accent-ink);
    background: var(--accent-wash);
    margin-bottom: 0.5rem;
    box-shadow: 2px 2px 0 var(--line);
    transition: all 0.14s ease;
}

.hub-card:hover .icon-wrap {
    background: var(--ink);
    color: var(--paper);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--accent);
}

.hub-card h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.hub-card p {
    color: var(--ink2);
    font-size: 0.94rem;
    line-height: 1.62;
    flex: 1;
}

.hub-card .foot {
    margin-top: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hub-card .more {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.hub-card .more::after {
    content: ' →';
}

/* ============================================================
   COMMANDS DIRECTORY
   ============================================================ */

.search-strip {
    position: sticky;
    top: 71px;
    z-index: 40;
    background: rgba(22, 24, 31, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--line);
    padding: 0.85rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    animation: stickyAsideFade 0.6s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Same reasoning as the masthead: sticky means the blur re-runs on every scroll
 * frame, and at 0.96 alpha it is only ever showing 4% of what is behind it. Kept
 * for the first 71px while this actually overlays the page head, dropped for the
 * rest of the page where it is pure cost on the tallest page on the site. */
html.is-scrolled .search-strip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.search-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.85rem;
    align-items: center;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--card);
    border: 2px solid var(--line);
    padding: 0.6rem 0.9rem;
    box-shadow: 3px 3px 0 var(--line);
    border-radius: var(--radius-sm);
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.search-box:focus-within {
    box-shadow: 4px 4px 0 var(--accent);
    border-color: var(--line);
}

.search-box svg {
    color: var(--mut);
    flex-shrink: 0;
}

.search-box input {
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

.search-box input::placeholder {
    color: var(--faint);
}

.search-box kbd {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--hair2);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    color: var(--mut);
    background: var(--paper);
}

.pill-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}

.pill {
    background: var(--card);
    border: 2px solid var(--line);
    color: var(--ink2);
    padding: 0.45rem 0.8rem;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--line);
    transition: all 0.12s ease;
}

.pill:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--accent-soft);
}

.pill:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--line);
}

.pill.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.pill .ct {
    opacity: 0.8;
    font-size: 10px;
}

.seg-row {
    display: inline-flex;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--line);
    overflow: hidden;
}

.seg {
    background: transparent;
    border: 0;
    border-right: 2px solid var(--line);
    padding: 0.45rem 0.8rem;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.seg:last-child {
    border-right: 0;
}

.seg.active {
    background: var(--accent-wash);
    color: var(--accent-ink);
}

.cmd-section {
    margin-bottom: 3.8rem;
    scroll-margin-top: 156px;
}

.cmd-section .sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0.85rem;
    margin-bottom: 0.75rem;
}

.cmd-section .sec-head h2 {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.9vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.025em;
}

.cmd-section .sec-head .ct {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut);
    white-space: nowrap;
}

.cmd-section .sec-head .ct b {
    color: var(--accent-ink);
}

.sec-lede {
    color: var(--ink2);
    margin-bottom: 1.5rem;
    max-width: 62ch;
    font-size: 0.98rem;
}

.cmd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.15rem;
}

.cmd {
    background: var(--card);
    border: 2px solid var(--line);
    padding: 1.2rem 1.25rem;
    box-shadow: 4px 4px 0 rgba(26, 23, 18, 0.9);
    border-radius: var(--radius-sm);
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.15s ease;
    position: relative;
    cursor: pointer;
    will-change: transform;
}

.cmd:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--accent);
    background: var(--card-hover);
}

.cmd:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--line);
}

.cmd-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.cmd-name {
    font-family: var(--mono);
    font-size: 0.98rem;
    font-weight: 700;
}

.cmd-name .slash {
    color: var(--accent);
}

.cmd-badge {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border: 1.5px solid var(--line);
    border-radius: 100px;
}

.cmd-badge.admin {
    background: #fbe3e3;
    border-color: #a33;
    color: #a33;
}

.cmd-badge.mod {
    background: #fdf0d5;
    border-color: #d97706;
    color: #7c4a03;
}

.cmd-badge.context {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.cmd-desc {
    font-size: 0.88rem;
    color: var(--ink2);
    line-height: 1.62;
}

.cmd-args {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.cmd-arg {
    font-family: var(--mono);
    font-size: 11px;
    border: 1px solid var(--hair2);
    padding: 0.12rem 0.55rem;
    border-radius: 100px;
    color: var(--mut);
    background: var(--paper);
}

.cmd-arg.req {
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.cmd-subs {
    margin-top: 0.7rem;
    border-top: 1px dashed var(--hair2);
    padding-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cmd-sub {
    display: flex;
    gap: 0.65rem;
    font-size: 0.83rem;
    line-height: 1.5;
}

.sub-name {
    font-family: var(--mono);
    color: var(--accent-ink);
    font-weight: 600;
    white-space: nowrap;
}

.sub-desc {
    color: var(--mut);
}

/* Compact Density */
body[data-density='compact'] .cmd {
    padding: 0.75rem 0.95rem;
}

body[data-density='compact'] .cmd-desc,
body[data-density='compact'] .cmd-subs,
body[data-density='compact'] .cmd-args {
    display: none;
}

.empty-state {
    padding: 3rem 2rem;
    border: 2px dashed var(--hair2);
    text-align: center;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 13.5px;
    background: var(--card);
}

.empty-state h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal {
    padding: 60px 0 96px;
}

.legal-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 3.2rem;
    align-items: start;
}

.legal-aside {
    position: sticky;
    top: 96px;
    border-left: 2px solid var(--hair);
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    animation: stickyAsideFade 0.6s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.legal-aside .label {
    margin-bottom: 0.5rem;
}

.legal-aside a {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--mut);
    text-decoration: none;
    padding: 0.25rem 0 0.25rem 1.2rem;
    margin-left: -1.2rem;
    border-left: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-aside a:hover {
    color: var(--ink);
    border-left-color: var(--accent);
    transform: translateX(3px);
}

.legal-aside a.is-active {
    color: var(--accent-ink);
    border-left-color: var(--accent);
    font-weight: 700;
    transform: translateX(4px);
}

.legal-body {
    border: 2px solid var(--line);
    background: var(--card);
    padding: clamp(1.85rem, 3.2vw, 3rem);
    box-shadow: var(--sh);
    min-width: 0;
    position: relative;
    border-radius: var(--radius-sm);
    animation: pageContentFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.legal-body h2 {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 2.6rem 0 1.1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--hair2);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    scroll-margin-top: 96px;
}

.legal-body h2:first-of-type {
    margin-top: 0;
}

.legal-body h2::before {
    content: attr(data-num);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-ink);
}

.legal-body p,
.legal-body li {
    color: var(--ink2);
    font-size: 0.96rem;
    line-height: 1.78;
    margin-bottom: 0.95rem;
}

.legal-body strong {
    color: var(--ink);
}

.legal-body ul {
    list-style: none;
    margin-bottom: 1.1rem;
}

.legal-body ul li {
    padding-left: 1.3rem;
    position: relative;
}

.legal-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.76em;
    width: 8px;
    height: 2px;
    background: var(--accent);
}

.legal-body a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-body code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--paper2);
    padding: 0.12em 0.48em;
    border-radius: 4px;
    border: 1px solid var(--hair);
}

.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.4rem 0 1.4rem;
    font-size: 0.92rem;
}

.legal-body th,
.legal-body td {
    text-align: left;
    vertical-align: top;
    padding: 0.62rem 0.8rem;
    border-bottom: 1px solid var(--hair);
    color: var(--ink2);
    line-height: 1.55;
}

.legal-body th {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
    border-bottom: 2px solid var(--line);
}

.legal-body td:first-child {
    color: var(--ink);
    font-weight: 600;
}

.legal-effective {
    margin-top: 2.8rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
}

/* ============================================================
   PORTAL & 404
   ============================================================ */

.portal-hero {
    text-align: center;
    padding: 76px 0 24px;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin: 2.8rem 0 4.2rem;
    animation: pageContentFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.portal-card {
    border: 2px solid var(--line);
    background: var(--card);
    padding: 1.75rem;
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.15s ease;
    will-change: transform;
}

.portal-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--accent);
    background: var(--card-hover);
}

.portal-card:hover .portal-card-ico {
    transform: scale(1.1) rotate(-4deg);
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transition: all 0.2s ease;
}

.portal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.portal-card-ico {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--accent-ink);
    background: var(--accent-wash);
}

.portal-card-tag {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut);
}

.portal-card h3 {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.portal-card p {
    color: var(--ink2);
    font-size: 0.92rem;
    line-height: 1.62;
    flex: 1;
}

.portal-signin {
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink);
    box-shadow: 8px 8px 0 var(--accent);
    padding: 3rem 2.5rem;
    text-align: center;
    margin-bottom: 5.5rem;
    border-radius: var(--radius-sm);
    animation: portalLevitate 8s ease-in-out infinite;
}

@keyframes portalLevitate {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: 8px 8px 0 var(--accent);
    }
    50% {
        transform: translateY(-6px);
        box-shadow:
            8px 14px 0 var(--accent),
            0 20px 36px rgba(15, 95, 208, 0.18);
    }
}

.portal-signin h2 {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.8vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.portal-signin p {
    color: var(--ink2);
    font-size: 1.02rem;
    max-width: 56ch;
    margin: 0 auto 1.8rem;
}

.portal-signin .btn {
    background: var(--accent);
    color: #ffffff;
    border: 2px solid var(--line);
}

.portal-signin .btn:hover {
    background: #3b86f7;
    box-shadow: 6px 6px 0 #0c0e12;
}

.portal-features-list {
    display: flex;
    justify-content: center;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin-top: 1.8rem;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(247, 244, 236, 0.7);
}

.portal-features-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 404 Page */
.nf {
    padding: clamp(90px, 14vw, 150px) 0;
    text-align: center;
}

.nf-illu {
    margin: 0 auto 1.5rem;
    width: 96px;
    height: 96px;
    color: var(--accent);
    display: grid;
    place-items: center;
    background: var(--accent-wash);
    border: 2px solid var(--line);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--line);
    animation: nfFloat 6s ease-in-out infinite;
}

@keyframes nfFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

.nf .label {
    animation: heroTextReveal 0.5s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nf h1 {
    font-family: var(--serif);
    font-size: clamp(3.5rem, 10vw, 7.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    animation: heroTextReveal 0.55s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nf p {
    color: var(--ink2);
    margin: 1.2rem auto 2.2rem;
    max-width: 48ch;
    font-size: 1.1rem;
    animation: heroTextReveal 0.55s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nf .actions {
    animation: heroTextReveal 0.55s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Site Footer ---------- */
footer.site-footer {
    margin-top: auto;
    position: relative;
    background: linear-gradient(180deg, rgba(14, 13, 22, 0) 0%, #0e0d16 22%, #0f1116 100%);
    color: var(--mut);
    font-size: 11.5px;
    font-family: var(--mono);
}

footer.site-footer .shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.footer-links a {
    color: rgba(247, 244, 236, 0.75);
    text-decoration: none;
    font-size: 11.5px;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ---------- Toast Notification & Scroll Reveal ---------- */
.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 14px);
    background: var(--ink);
    border: 2px solid var(--line);
    color: var(--paper);
    padding: 0.7rem 1.2rem;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    z-index: 400;
    box-shadow: 4px 4px 0 var(--accent);
    border-radius: var(--radius-sm);
}

.copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Anti-Flicker for Page Reloads & Restored Scroll ---------- */
html.no-flicker *,
html.no-flicker *::before,
html.no-flicker *::after {
    animation: none !important;
    transition: none !important;
}

/* While the page is settling after a reload, smooth scrolling must be off.
   `html { scroll-behavior: smooth }` makes every programmatic scroll animate,
   including the browser's own reload restoration, so a refresh from the middle
   of the page would animate upward and settle at the top instead of returning
   to where the reader was. site.js restores the position explicitly and drops
   this class once it has done so. */
html.no-flicker {
    scroll-behavior: auto !important;
}

html.no-flicker .rv,
html.no-flicker .scroll-reveal,
html.no-flicker .rv-item,
html.no-flicker main,
html.no-flicker .page-head .crumbs,
html.no-flicker .page-head h1,
html.no-flicker .page-head .lede,
html.no-flicker .page-head .meta-row,
html.no-flicker .page-head .head-stats,
html.no-flicker .search-strip,
html.no-flicker .doc-aside,
html.no-flicker .doc-body,
html.no-flicker .doc-toc,
html.no-flicker .legal-aside,
html.no-flicker .hero-copy > .kick,
html.no-flicker .hero h1,
html.no-flicker .hero-sub,
html.no-flicker .hero-copy .lede,
html.no-flicker .hero-copy .actions,
html.no-flicker .hero-meta,
html.no-flicker .cmd,
html.no-flicker .feature,
html.no-flicker .step,
html.no-flicker .stat,
html.no-flicker .docs-hub-grid,
html.no-flicker .hub-card,
html.no-flicker .portal-grid,
html.no-flicker .portal-card,
html.no-flicker .portal-signin,
html.no-flicker .doc-section,
html.no-flicker .callout,
html.no-flicker .legal-body,
html.no-flicker .nf .label,
html.no-flicker .nf h1,
html.no-flicker .nf p,
html.no-flicker .nf .actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ---------- Scroll Reveal & Staggered Cascades ---------- */
/* No `will-change` here, deliberately. It was on this block and on every
 * per-variant override below, which meant every reveal target was promoted from
 * page load and stayed promoted for the life of the document: /commands has 62 of
 * them, and the landing page 14, all holding compositor textures that could never
 * be reclaimed while the four WebGL canvases compete for the same memory.
 *
 * These are opacity/transform transitions, which Blink promotes on its own for
 * the duration of the transition anyway. The permanent hints cost the measured
 * long tasks instead of removing them - see the comments on the drifters below
 * for what `will-change` is actually for. */
.rv,
.scroll-reveal,
.rv-item {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rv.in,
.scroll-reveal.scroll-visible,
.scroll-reveal.in,
.rv-item.in {
    opacity: 1;
    transform: none;
}

/* `background-color` is in this list, and its presence is the whole point.
 * This rule uses the `transition` shorthand, which REPLACES the element's own
 * transition list rather than adding to it - so anything left out here is
 * silently deleted once the reveal classes land. `.feature`, `.step` and `.stat`
 * each declare a hover background transition in their own rule, and all three
 * were losing it: the hover snapped to full colour instantly instead of fading,
 * which reads as an unsynchronised jump rather than a wash. The three card types
 * below already list their hover properties for exactly this reason. If you add
 * a hover transition to one of these elements, add it here too. */
.feature.rv-item,
.step.rv-item,
.stat.rv-item,
.doc-section.rv-item,
.callout.rv-item {
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.16s ease;
}

.cmd.rv-item {
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.15s ease;
}

.hub-card.rv-item {
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.portal-card.rv-item {
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.15s ease;
}

/* Staggered Entrance Delays for Below-The-Fold Elements */
.cmd-grid > .cmd.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.cmd-grid > .cmd.rv-item:nth-child(2) {
    transition-delay: 0.08s;
}
.cmd-grid > .cmd.rv-item:nth-child(3) {
    transition-delay: 0.12s;
}
.cmd-grid > .cmd.rv-item:nth-child(4) {
    transition-delay: 0.16s;
}
.cmd-grid > .cmd.rv-item:nth-child(5) {
    transition-delay: 0.2s;
}
.cmd-grid > .cmd.rv-item:nth-child(6) {
    transition-delay: 0.24s;
}
.cmd-grid > .cmd.rv-item:nth-child(7) {
    transition-delay: 0.28s;
}
.cmd-grid > .cmd.rv-item:nth-child(8) {
    transition-delay: 0.32s;
}

.docs-hub-grid > .hub-card.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.docs-hub-grid > .hub-card.rv-item:nth-child(2) {
    transition-delay: 0.09s;
}
.docs-hub-grid > .hub-card.rv-item:nth-child(3) {
    transition-delay: 0.14s;
}
.docs-hub-grid > .hub-card.rv-item:nth-child(4) {
    transition-delay: 0.19s;
}
.docs-hub-grid > .hub-card.rv-item:nth-child(5) {
    transition-delay: 0.24s;
}

.portal-grid > .portal-card.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.portal-grid > .portal-card.rv-item:nth-child(2) {
    transition-delay: 0.08s;
}
.portal-grid > .portal-card.rv-item:nth-child(3) {
    transition-delay: 0.12s;
}
.portal-grid > .portal-card.rv-item:nth-child(4) {
    transition-delay: 0.16s;
}
.portal-grid > .portal-card.rv-item:nth-child(5) {
    transition-delay: 0.2s;
}
.portal-grid > .portal-card.rv-item:nth-child(6) {
    transition-delay: 0.24s;
}

.features > .feature.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.features > .feature.rv-item:nth-child(2) {
    transition-delay: 0.09s;
}
.features > .feature.rv-item:nth-child(3) {
    transition-delay: 0.14s;
}
.features > .feature.rv-item:nth-child(4) {
    transition-delay: 0.19s;
}
.features > .feature.rv-item:nth-child(5) {
    transition-delay: 0.24s;
}
.features > .feature.rv-item:nth-child(6) {
    transition-delay: 0.29s;
}

.stats-grid > .stat.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.stats-grid > .stat.rv-item:nth-child(2) {
    transition-delay: 0.09s;
}
.stats-grid > .stat.rv-item:nth-child(3) {
    transition-delay: 0.14s;
}
.stats-grid > .stat.rv-item:nth-child(4) {
    transition-delay: 0.19s;
}
.stats-grid > .stat.rv-item:nth-child(5) {
    transition-delay: 0.24s;
}

.setup > .step.rv-item:nth-child(1) {
    transition-delay: 0.04s;
}
.setup > .step.rv-item:nth-child(2) {
    transition-delay: 0.1s;
}
.setup > .step.rv-item:nth-child(3) {
    transition-delay: 0.16s;
}

/* Clear the stagger the moment the reveal lands.
 *
 * `transition-delay` has no notion of which transition it belongs to - it delays
 * EVERY property on the element, hover included. So every revealed card above
 * kept up to 0.29s of delay on its own hover, which is precisely the
 * "laggy and unsynced" report: the wash sat still for a fifth of a second and
 * then caught up to a cursor that had already moved on.
 *
 * .feature only escaped the complaint by accident. Its hover transition was being
 * deleted outright by the `transition` shorthand in the .rv-item rule above, so
 * its hover duration was 0s - and a delay on a 0s transition does nothing. Fast
 * and smooth by accident, next to a neighbour doing the right thing badly.
 *
 * Equal specificity to the :nth-child rules, so source order is what makes this
 * win. Keep it below them. */
.features > .feature.rv-item.in,
.stats-grid > .stat.rv-item.in,
.setup > .step.rv-item.in,
.cmd-grid > .cmd.rv-item.in,
.docs-hub-grid > .hub-card.rv-item.in,
.portal-grid > .portal-card.rv-item.in {
    transition-delay: 0s;
}

/* Kofi & User Slot */
.kofi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--line);
    padding: 9px 14px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--sh-sm);
    border-radius: var(--radius-sm);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background var(--dur-fast) ease;
    white-space: nowrap;
}

.kofi-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--accent-soft);
    background: var(--card-hover);
}

.kofi-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--line);
}

#nav-user-slot {
    list-style: none;
}

/* ============================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ============================================================ */

@media (max-width: 1020px) {
    .doc-grid {
        grid-template-columns: 200px minmax(0, 1fr);
    }
    .doc-toc {
        display: none;
    }
}

@media (max-width: 880px) {
    .masthead .shell {
        position: relative;
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
        justify-content: space-between;
    }
    .brand {
        gap: 10px;
    }
    .brand-logo {
        height: 23px;
    }
    .brand-name {
        font-size: 18px;
    }
    .brand-name small {
        font-size: 9px;
    }
    .kofi-btn {
        display: none;
    }
    .nav-cta {
        margin-left: auto;
        padding: 7px 13px;
        font-size: 11px;
        box-shadow: 2px 2px 0 var(--line);
    }
    .menu-toggle {
        display: inline-flex;
        padding: 7px 9px;
        box-shadow: 2px 2px 0 var(--line);
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-top: 2px solid var(--line);
        border-bottom: 2px solid var(--line);
        box-shadow: 0 16px 36px rgba(28, 25, 20, 0.16);
        padding: 0.6rem var(--pad) 1.2rem;
        z-index: 999;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links li {
        padding: 0;
        border-bottom: 1px solid var(--hair);
    }
    .nav-links a {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0.4rem 0.2rem;
        font-size: 14.5px;
        border-bottom: none;
    }
    .nav-links a:hover,
    .nav-links a.is-active {
        color: var(--accent);
        background: transparent;
    }
    .nav-mobile-action {
        display: block;
    }
    .nav-mobile-cta {
        margin-top: 8px;
        display: flex !important;
        justify-content: center;
        background: var(--accent) !important;
        color: #ffffff !important;
        border: 2px solid var(--line) !important;
        box-shadow: 2px 2px 0 var(--line);
        font-family: var(--mono);
        font-size: 12px !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-weight: 700 !important;
    }
    .section-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .section-copy {
        justify-self: start;
    }
    .features {
        grid-template-columns: 1fr 1fr;
    }
    .feature:nth-child(3n) {
        border-right: 2px solid var(--line);
    }
    .feature:nth-child(2n) {
        border-right: 0;
    }
    .feature:nth-last-child(-n + 3) {
        border-bottom: 2px solid var(--line);
    }
    .feature:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
    .setup {
        grid-template-columns: 1fr;
    }
    .step {
        border-right: 0;
        border-bottom: 2px solid var(--line);
    }
    .step:last-child {
        border-bottom: 0;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stat:nth-child(2n) {
        border-right: 0;
    }
    .stat:nth-child(-n + 2) {
        border-bottom: 2px solid var(--line);
    }
    .search-inner {
        grid-template-columns: 1fr;
    }
    .doc-grid,
    .legal-grid {
        grid-template-columns: 1fr;
    }
    .doc-aside,
    .legal-aside {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.2rem;
        border-left: 0;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }
    .doc-aside .label,
    .legal-aside .label {
        width: 100%;
    }
    .portal-grid {
        grid-template-columns: 1fr;
    }
    .head-stats {
        flex-wrap: wrap;
    }
    .head-stats .s {
        min-width: 45%;
        border-bottom: 2px solid var(--line);
    }
    .doc-pager {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .masthead .shell {
        gap: 8px;
    }
    .brand {
        gap: 8px;
    }
    .brand-logo {
        height: 21px;
    }
    .brand-name {
        font-size: 16.5px;
    }
    .brand-name small {
        display: inline-block;
        font-size: 7.5px;
        padding: 1px 4px;
        letter-spacing: 0.12em;
    }
    .cta-full {
        display: none;
    }
    .cta-short {
        display: inline;
    }
    .nav-cta {
        padding: 6px 10px;
        font-size: 11px;
    }
    .features {
        grid-template-columns: 1fr;
    }
    .feature {
        border-right: 0 !important;
        border-bottom: 2px solid var(--line) !important;
    }
    .feature:last-child {
        border-bottom: 0 !important;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat {
        border: 0;
    }
    .stat:last-child {
        border-bottom: 0;
    }
    .cmd-grid {
        grid-template-columns: 1fr;
    }
    .hero-meta {
        gap: 8px 18px;
    }
    .topbar .shell {
        justify-content: center;
    }
    .topbar-meta {
        display: none;
    }
}

/* ---------- Accessibility & Print ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    .rv,
    .scroll-reveal,
    .rv-item,
    main,
    .doc-body,
    .docs-hub-grid,
    .portal-grid,
    .legal-body,
    .page-head h1,
    .page-head .lede,
    .head-stats,
    .search-strip,
    .doc-aside,
    .doc-toc,
    .legal-aside {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    /* Reduced motion means "stop moving", not "remove the picture". site.js draws
     exactly one static frame per canvas when this query matches (see the
     `if (reduce)` branch), so the sky must stay visible or that frame is thrown
     away. Hiding it here also meant anyone with the OS accessibility toggle on
     got a bare gradient with no atmosphere at all. */
    .hero-sky,
    .hero-cloud-horizon,
    .final-sky,
    .cloud-drifter {
        animation: none !important;
    }
    .hero-sky::before,
    .hero-sky::after {
        animation: none !important;
    }
    .cloud-text,
    .kick,
    .btn-primary::before {
        animation: none !important;
        transform: none !important;
    }
}

.features,
.ops,
.cmd-section,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

@media print {
    .topbar,
    .masthead,
    .nav-cta,
    .hero-sky,
    .hero-cloud-horizon,
    .final-sky,
    footer,
    .search-strip,
    .menu-toggle {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .doc-grid,
    .legal-grid {
        display: block !important;
    }
}