:root {
    /* ---- Theme-independent design tokens ------------------------- */
    /* Type system evokes unseen.co: a neutral grotesque for UI/body
       (they use Neue Montreal; nearest system faces are Helvetica
       Neue / Arial) and a high-contrast serif DISPLAY for the big
       editorial moments (they use Saol Display; the nearest widely
       installed serif with real display character is Hoefler Text /
       Iowan, Georgia as the universal fallback). Both are commercial
       fonts we can't embed in a self-contained no-build page, so this
       is a faithful evocation, not the exact faces. */
    --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
    --font-display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
    --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --maxw: 1180px;

    /* ---- Code / terminal surface: deliberately dark in every theme,
            like a syntax-highlighted code block. Kept a separate token
            set so light theme still has a legible terminal. ---------- */
    --color-code-bg: #0b0d12;
    --color-code-surface: rgba(255, 255, 255, 0.035);
    --color-code-border: rgba(255, 255, 255, 0.09);
    --color-code-text: #e6eaf2;
    --color-code-muted: #8b93a6;

    /* ============================================================== */
    /*  LIGHT THEME (default). Foreground/background pairings target   */
    /*  WCAG AA: body text >= 4.5:1, large text / UI >= 3:1.           */
    /* ============================================================== */
    /* unseen.co-inspired light theme: a warm greige/blush canvas with
       near-black warm ink, and a single coral accent. The brand action
       colour is INK (black pill buttons with cream labels), like the
       reference; coral is reserved for links, section labels, and
       decorative moments. Data up/down stay green/red for meaning, but
       are deepened so they sit inside the warm palette instead of
       glowing out of it. Contrast targets: body >= 4.5:1, UI >= 3:1. */
    --color-bg: #e8e0d9;            /* warm greige */
    --color-bg-elevated: #efe9e2;
    --color-surface: #f6f2ec;       /* soft warm white for cards */
    --color-surface-2: #efe8df;
    --color-border: #d8cec2;
    --color-border-strong: #c4b8a9;
    --color-text: #17130f;          /* warm near-black, ~15:1 on canvas */
    --color-text-muted: #574f47;    /* ~7:1 */
    --color-text-faint: #786f65;    /* ~4.6:1 */
    --color-accent: #b83a1f;        /* deep coral, ~4.7:1 on canvas (links) */
    --color-accent-strong: #98301a;
    --color-accent-2: #e0533a;      /* bright coral, decorative only */
    --color-on-accent: #f6f2ec;
    --color-cta: #17130f;           /* ink pill buttons */
    --color-on-cta: #f3ede4;
    --color-positive: #2f6b3a;      /* deep forest, ~5:1 on canvas */
    --color-negative: #b23a22;      /* brick red, ~4.8:1 */
    --color-warning: #8a5a00;
    --color-info: #b83a1f;

    --hero-glow-1: rgba(224, 83, 58, 0.12);
    --hero-glow-2: rgba(224, 83, 58, 0.07);
    --hero-glow-3: rgba(23, 19, 15, 0.04);
    --hero-grid: rgba(23, 19, 15, 0.05);
    --gradient-headline: linear-gradient(180deg, #17130f 30%, #5a5148 130%);
    --shadow-card: 0 10px 30px rgba(23, 19, 15, 0.07);
    --scrim: rgba(232, 224, 217, 0.62);

    --chart-portfolio: #b83a1f;     /* coral line, on-brand */
    --chart-portfolio-fill-top: rgba(224, 83, 58, 0.18);
    --chart-portfolio-fill-bot: rgba(224, 83, 58, 0);
    --chart-benchmark: #9a8f80;
    --chart-grid: rgba(23, 19, 15, 0.08);
    --chart-axis: #786f65;

    color-scheme: light;
}

/* Dark theme via system preference (no JS needed). Mirrors .theme-dark.
   Editorial "night": a deep warm espresso canvas (not black) keeps the
   warm-neutral character after dark; cream ink, coral accent, and
   cream pill buttons with ink labels invert the light theme. */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        --color-bg: #17130f;            /* warm espresso */
        --color-bg-elevated: #1f1a15;
        --color-surface: rgba(246, 242, 236, 0.05);
        --color-surface-2: rgba(246, 242, 236, 0.08);
        --color-border: rgba(246, 242, 236, 0.12);
        --color-border-strong: rgba(246, 242, 236, 0.18);
        --color-text: #f3ede4;
        --color-text-muted: #b3a99c;
        --color-text-faint: #8a8073;
        --color-accent: #f07a54;        /* warm coral, ~6:1 on espresso */
        --color-accent-strong: #f5946f;
        --color-accent-2: #f07a54;
        --color-on-accent: #17130f;
        --color-cta: #f3ede4;           /* cream pill buttons */
        --color-on-cta: #17130f;
        --color-positive: #5cc47a;
        --color-negative: #f07a54;
        --color-warning: #e0a94a;
        --color-info: #f07a54;
        --hero-glow-1: rgba(240, 122, 84, 0.14);
        --hero-glow-2: rgba(240, 122, 84, 0.07);
        --hero-glow-3: rgba(246, 242, 236, 0.03);
        --hero-grid: rgba(246, 242, 236, 0.04);
        --gradient-headline: linear-gradient(180deg, #f6f2ec 25%, #b3a99c 130%);
        --shadow-card: 0 24px 56px rgba(0, 0, 0, 0.45);
        --scrim: rgba(23, 19, 15, 0.62);
        --chart-portfolio: #f07a54;
        --chart-portfolio-fill-top: rgba(240, 122, 84, 0.24);
        --chart-portfolio-fill-bot: rgba(240, 122, 84, 0);
        --chart-benchmark: #8a8073;
        --chart-grid: rgba(246, 242, 236, 0.06);
        --chart-axis: #8a8073;
        color-scheme: dark;
    }
}

/* Explicit dark override (toggle button). Same values as the media block.
   To add another theme later, add a `:root.theme-<name> { ... }` block
   that redefines these semantic tokens; no component CSS changes needed. */
:root.theme-dark {
    --color-bg: #17130f;
    --color-bg-elevated: #1f1a15;
    --color-surface: rgba(246, 242, 236, 0.05);
    --color-surface-2: rgba(246, 242, 236, 0.08);
    --color-border: rgba(246, 242, 236, 0.12);
    --color-border-strong: rgba(246, 242, 236, 0.18);
    --color-text: #f3ede4;
    --color-text-muted: #b3a99c;
    --color-text-faint: #8a8073;
    --color-accent: #f07a54;
    --color-accent-strong: #f5946f;
    --color-accent-2: #f07a54;
    --color-on-accent: #17130f;
    --color-cta: #f3ede4;
    --color-on-cta: #17130f;
    --color-positive: #5cc47a;
    --color-negative: #f07a54;
    --color-warning: #e0a94a;
    --color-info: #f07a54;
    --hero-glow-1: rgba(240, 122, 84, 0.14);
    --hero-glow-2: rgba(240, 122, 84, 0.07);
    --hero-glow-3: rgba(246, 242, 236, 0.03);
    --hero-grid: rgba(246, 242, 236, 0.04);
    --gradient-headline: linear-gradient(180deg, #f6f2ec 25%, #b3a99c 130%);
    --shadow-card: 0 24px 56px rgba(0, 0, 0, 0.45);
    --scrim: rgba(23, 19, 15, 0.62);
    --chart-portfolio: #f07a54;
    --chart-portfolio-fill-top: rgba(240, 122, 84, 0.24);
    --chart-portfolio-fill-bot: rgba(240, 122, 84, 0);
    --chart-benchmark: #8a8073;
    --chart-grid: rgba(246, 242, 236, 0.06);
    --chart-axis: #8a8073;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text) 24%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    border: 3px solid transparent; border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 24%, transparent); background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-text) 42%, transparent); }
/* Any display rule on a class (e.g. .field { display: grid }) beats
   the UA's [hidden] style, silently un-hiding elements. Restore the
   attribute's authority globally. */
[hidden] { display: none !important; }
/* Paginated feel: sections snap into place as you scroll (proximity,
   not mandatory, so tall sections like the terminal stay scrollable).
   scroll-padding keeps snapped sections clear of the fixed nav. */
html { scroll-behavior: smooth; scroll-snap-type: y proximity; scroll-padding-top: 56px; }
.snap { scroll-snap-align: start; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- NAV */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(16px, 4vw, 40px); height: 56px;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}
nav.scrolled { border-bottom-color: var(--color-border); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 640; font-size: 15px; letter-spacing: 0.02em; }
.brand .glyph {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 800;
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.brand small { color: var(--color-text-faint); font-weight: 500; letter-spacing: 0.14em; font-size: 10px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-size: 13px; color: var(--color-text-muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--color-text); }
.nav-cta {
    padding: 7px 16px; border-radius: 980px;
    background: var(--color-text); color: var(--color-bg) !important;
    font-size: 13px; font-weight: 600; transition: transform 0.2s, opacity 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); opacity: 0.9; }
.theme-toggle {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-surface-2);
    color: var(--color-text); display: grid; place-items: center; font-size: 15px;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--color-border-strong); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
:root.theme-dark .theme-toggle .sun { display: inline; }
:root.theme-dark .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) .theme-toggle .sun { display: inline; }
    :root:not(.theme-light) .theme-toggle .moon { display: none; }
}
/* Mobile nav: hide only the secondary links. Learn and Releases stay
   reachable; an earlier version collapsed to just "Launch", hiding
   half the site on phones. */
@media (max-width: 780px) {
    .nav-links { gap: 14px; }
    .nav-links a[data-nav="how_it_works"], .nav-links a[data-nav="api_docs"], .nav-links a[data-nav="terminal"] { display: none; }
}

/* ------------------------------------------------------------ HERO */
.hero {
    position: relative; min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 120px 20px 60px; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(1100px 620px at 50% -8%, var(--hero-glow-1), transparent 60%),
        radial-gradient(760px 520px at 12% 12%, var(--hero-glow-2), transparent 55%),
        radial-gradient(820px 620px at 88% 30%, var(--hero-glow-3), transparent 55%);
    animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-16px,0) scale(1.05); } }
.hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(var(--hero-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}
/* Animated background canvas: generative "market wave" lines and
   rising motes drawn in the brand green. Sits above the static
   gradient/grid but below the content. Purely decorative (no numbers,
   axes, or symbols) so it cannot be mistaken for market data. Faded
   toward the center by a radial mask so the headline stays crisp. */
.hero-canvas {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
    mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, transparent 34%, #000 82%);
    -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, transparent 34%, #000 82%);
}
.hero-canvas.on { opacity: 1; }
.hero-inner { position: relative; z-index: 2; max-width: 860px; }
/* Editorial micro-label: uppercase, tracked out, no pill. */
.eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px;
    font-size: 12px; color: var(--color-text-muted);
    letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-2); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Editorial display type: high-contrast serif, near-normal tracking,
   set large with generous air, in the spirit of the reference. */
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 9vw, 108px); line-height: 0.98; font-weight: 400; letter-spacing: -0.01em;
    background: var(--gradient-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero h1 .accent { font-style: italic; color: var(--color-accent); -webkit-text-fill-color: var(--color-accent); }
.hero p.sub { margin: 30px auto 0; max-width: 560px; font-size: clamp(16px, 1.9vw, 19px); color: var(--color-text-muted); line-height: 1.55; letter-spacing: 0; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 980px;
    font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
/* Editorial CTA: solid ink pill, cream label, springy hover. */
.btn-primary { background: var(--color-cta); color: var(--color-on-cta); box-shadow: 0 10px 30px color-mix(in srgb, var(--color-cta) 22%, transparent); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 40px color-mix(in srgb, var(--color-cta) 45%, transparent); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-ghost:hover { transform: translateY(-2px) scale(1.02); background: var(--color-surface-2); }
.btn-ghost:active { transform: scale(0.98); }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--color-text-faint); font-size: 11px; letter-spacing: 0.2em; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* Intro: hero elements rise in sequence on first paint, Apple-style.
   `both` + per-element delays gives the stagger; the reduced-motion
   block zeroes both duration AND delay so nothing stays hidden. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.hero .eyebrow { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) 0.08s both; }
.hero h1 { animation: rise 0.85s cubic-bezier(.2,.7,.2,1) 0.2s both; }
.hero p.sub { animation: rise 0.85s cubic-bezier(.2,.7,.2,1) 0.34s both; }
.hero .hero-cta { animation: rise 0.85s cubic-bezier(.2,.7,.2,1) 0.46s both; }
.hero .demo-card { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) 0.4s both; }
.hero .scroll-cue { opacity: 0; animation: bob 2.4s ease-in-out infinite, fadeIn 0.8s ease 1.4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* ------------------------------------------------ HERO LIVE DEMO
   The hero leads with the actual product, not marketing: a real
   backtest (AAPL/MSFT/NVDA vs SPY) is precomputed from the same engine
   and embedded as a dated seed, so a chart with real numbers is on
   screen the instant the page paints, with no fetch wait. It is real
   historical yfinance data for a stated window, clearly labelled as a
   sample; the "Open the terminal" CTA runs the identical engine live. */
.hero-inner.hero-split {
    max-width: 1200px; width: 100%; text-align: left;
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-split .eyebrow { margin-bottom: 22px; }
.hero-split h1 { font-size: clamp(40px, 5.4vw, 76px); }
.hero-split p.sub { margin-left: 0; margin-right: 0; }
.hero-split .hero-cta { justify-content: center; }
@media (max-width: 940px) {
    /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the content's
       min-content width, which let the chart/metrics blow the card out
       past the viewport. minmax(0,...) lets the column shrink. */
    .hero-inner.hero-split { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 40px; }
    .hero-split .hero-cta { justify-content: center; }
    .hero-split p.sub { margin-left: auto; margin-right: auto; }
}
/* Grid/flex children must be allowed to shrink below their content. */
.hero-copy, .hero-demo, .demo-card, .demo-chart { min-width: 0; }

.demo-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    background: var(--color-surface); box-shadow: var(--shadow-card);
    padding: 20px; text-align: left; overflow: hidden;
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.demo-head .who { display: flex; align-items: center; gap: 9px; font-weight: 640; font-size: 14px; }
.demo-head .who .mix { color: var(--color-text-faint); font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; }
.demo-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); border-radius: 980px; padding: 3px 9px; }
.demo-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.demo-metrics .m { background: var(--color-surface); padding: 12px 12px; }
.demo-metrics .k { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.demo-metrics .v { font-family: var(--font-mono); font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.01em; }
.demo-metrics .v.pos { color: var(--color-positive); }
.demo-metrics .v.neg { color: var(--color-negative); }
@media (max-width: 460px) { .demo-metrics { grid-template-columns: repeat(2, 1fr); } }
.demo-chart { position: relative; height: clamp(150px, 20vw, 190px); }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.demo-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--color-text-muted); }
.demo-legend .it { display: inline-flex; align-items: center; gap: 6px; }
.demo-legend .sw { width: 14px; height: 3px; border-radius: 3px; display: inline-block; }
.demo-legend .sw.p { background: var(--chart-portfolio); }
.demo-legend .sw.b { background: var(--chart-benchmark); }
.demo-note { font-size: 11px; color: var(--color-text-faint); font-family: var(--font-mono); }

/* Section pagination dots (desktop): current position at a glance,
   one click to jump. Mirrors the snap targets. */
/* NOTE: the generic `nav {}` rule above also matches this <nav>, leaking
   left:0 / align-items:center / justify-content:space-between into it,
   which stretched the container full-width and dropped the dots in the
   middle of the screen. The resets below pin it back to the right edge
   and let it shrink-wrap to the dots' width. */
.page-dots {
    position: fixed; right: 22px; left: auto; top: 50%; transform: translateY(-50%); z-index: 90;
    width: max-content; height: auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 13px; padding: 8px; border: 0; background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.page-dots a { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transition: background 0.25s, transform 0.25s; }
.page-dots a:hover { background: var(--color-text-muted); transform: scale(1.3); }
.page-dots a.active { background: var(--color-accent); transform: scale(1.45); }
@media (max-width: 900px) { .page-dots { display: none; } }

/* ---------------------------------------------------------- TICKER */
.tape { position: relative; z-index: 2; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 50%, transparent); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tape-track { display: inline-flex; gap: 40px; padding: 11px 0; animation: marquee 38s linear infinite; }
.tape-track span { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-muted); letter-spacing: 0.05em; }
.tape-track span b { color: var(--color-text); font-weight: 600; margin-right: 8px; }
.tape-track span i { color: var(--color-text-muted); font-style: normal; font-size: 11.5px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------- SECTION */
section.block { position: relative; padding: clamp(70px, 11vw, 140px) clamp(16px, 5vw, 40px); }
/* Pagination: every snap section fills at least one screen so scrolling
   moves you page by page. Sections whose content exceeds the viewport
   (the terminal app, the nine-card Learn grid) simply grow taller and
   scroll freely; proximity snap only engages near their top/bottom, so
   it never traps you mid-section. Short sections (hero, how-it-works)
   centre their content to read as full "pages". */
.hero, section.block { min-height: 100vh; }
#how, #top { display: flex; flex-direction: column; justify-content: center; }
section.block > .wrap { width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 20px; }
.section-title { font-family: var(--font-display); font-size: clamp(34px, 5.6vw, 66px); font-weight: 400; letter-spacing: -0.008em; max-width: 840px; line-height: 1.02; }
.section-lede { margin-top: 22px; max-width: 620px; color: var(--color-text-muted); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; letter-spacing: 0; }

#how { background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.step { padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.35s; }
.step:hover { transform: translateY(-6px); border-color: var(--color-border-strong); }
.step .idx { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-2); border: 1px solid var(--color-border-strong); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 18px; }
.step h3 { font-size: 19px; font-weight: 620; letter-spacing: -0.01em; }
.step p { margin-top: 10px; color: var(--color-text-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- TERMINAL APP */
#terminal { background: radial-gradient(900px 500px at 80% 0%, var(--hero-glow-2), transparent 60%), var(--color-bg); border-top: 1px solid var(--color-border); }
.terminal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.app-grid { display: grid; grid-template-columns: 380px 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .app-grid { grid-template-columns: minmax(0, 1fr); } }
.app-grid > * { min-width: 0; }
.app-grid > div { grid-template-columns: minmax(0, 1fr); }
.card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.card-head h3 { font-size: 14px; font-weight: 620; display: flex; align-items: center; gap: 9px; }
.card-head .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--color-text-faint); text-transform: uppercase; }
.card-body { padding: 20px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2); box-shadow: 0 0 9px var(--color-accent-2); }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--color-text-muted); font-weight: 560; letter-spacing: 0.02em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select {
    width: 100%; height: 44px; padding: 0 12px;
    background: var(--color-surface-2); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; font-size: 14.5px;
    transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; cursor: pointer;
}
input.mono, input[type="number"], input[type="date"] { font-family: var(--font-mono); }
input::placeholder { color: var(--color-text-faint); }
input:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.hint { font-size: 11.5px; color: var(--color-text-faint); margin-top: -6px; margin-bottom: 12px; line-height: 1.5; }

.btn-block { width: 100%; height: 48px; border: 0; border-radius: 980px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 660; color: var(--color-on-cta); background: var(--color-cta); transition: transform 0.18s cubic-bezier(.2,.7,.2,1), opacity 0.2s, box-shadow 0.25s; box-shadow: 0 8px 24px color-mix(in srgb, var(--color-cta) 28%, transparent); }
.btn-block:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 12px 32px color-mix(in srgb, var(--color-cta) 38%, transparent); }
.btn-block:active { transform: scale(0.99); }
.btn-block:disabled { opacity: 0.55; cursor: progress; transform: none; }
.link-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 16px; }
.link-btn { background: none; border: 0; color: var(--color-accent); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.preset-picker { margin: 0; padding: 0; border: 0; }
.preset-picker label { display: block; margin-bottom: 7px; color: var(--color-text-muted); font-size: 12px; font-weight: 560; }
.preset-picker .hint { margin: 5px 0 0; }
.template-control { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; align-items: stretch; }
.builder-step-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.builder-step-title span { color: var(--color-accent); font-family: var(--font-mono); font-size: 10.5px; }
.builder-step-title strong { color: var(--color-text); font-size: 13px; font-weight: 650; }
.builder-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 18px; color: var(--color-text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.builder-divider::before, .builder-divider::after { content: ""; height: 1px; flex: 1; background: var(--color-border); }
.preset-load {
    width: 100%; min-height: 46px; border: 1px solid var(--color-border-strong); border-radius: 4px;
    background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 12.5px;
    font-weight: 620; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.preset-load:hover { border-color: var(--color-accent); color: var(--color-accent); }
.preset-load.armed { border-color: var(--color-negative); color: var(--color-negative); }
.preset-load:disabled { opacity: 0.55; cursor: progress; }
.preset-summary { display: block; margin-top: 7px; color: var(--color-text-muted); font-size: 11px; line-height: 1.4; }
.portfolio-edit-note { color: var(--color-text-faint); font-size: 10.5px; line-height: 1.4; }

.holdings { margin-top: 22px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.holdings-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.holdings-head h4 { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.holdings-head .total { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-faint); }
.holding { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-border); animation: rowIn 0.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.holding:last-child { border-bottom: 0; }
.holding .sym { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.holding .nm { color: var(--color-text-faint); font-size: 11.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holding .wt { font-family: var(--font-mono); font-size: 13.5px; color: var(--color-accent-2); text-align: right; }
.holding .bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.holding .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); border-radius: 3px; transition: width 0.6s cubic-bezier(.2,.7,.2,1); }
.remove { background: none; border: 1px solid transparent; color: var(--color-text-faint); cursor: pointer; width: 26px; height: 26px; border-radius: 8px; font-size: 15px; line-height: 1; transition: all 0.18s; }
.remove:hover { color: var(--color-negative); border-color: color-mix(in srgb, var(--color-negative) 40%, transparent); background: color-mix(in srgb, var(--color-negative) 10%, transparent); }
.empty { color: var(--color-text-faint); font-size: 13px; text-align: center; padding: 22px 0; font-family: var(--font-mono); }

.segmented { display: inline-flex; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 3px; gap: 2px; }
.segmented button { background: none; border: 0; color: var(--color-text-muted); font: inherit; font-family: var(--font-mono); font-size: 12px; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: all 0.18s; }
.segmented button.active { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.segmented button:hover:not(.active) { color: var(--color-text); }
.bt-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 760px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.metric::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent-2), transparent); opacity: 0; transition: opacity 0.4s; }
.metric.live::after { opacity: 0.8; }
.metric .k { font-size: 11.5px; color: var(--color-text-muted); font-weight: 560; letter-spacing: 0.04em; text-transform: uppercase; }
.metric .v { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.metric .s { display: block; margin-top: 6px; font-size: 11.5px; color: var(--color-text-faint); }
.pos { color: var(--color-positive); }
.neg { color: var(--color-negative); }
.amber { color: var(--color-warning); }

.analytics-disclosure { margin-bottom: 24px; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.analytics-disclosure[hidden] { display: none; }
.analytics-disclosure > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 17px 0; list-style: none; cursor: pointer;
}
.analytics-disclosure > summary::-webkit-details-marker, .attribution-disclosure > summary::-webkit-details-marker { display: none; }
.analytics-disclosure > summary > span:first-child { display: grid; gap: 3px; }
.analytics-disclosure > summary strong { color: var(--color-text); font-size: 13px; font-weight: 650; }
.analytics-disclosure > summary small { color: var(--color-text-faint); font-size: 10.5px; }
.disclosure-icon { display: inline-block; color: var(--color-text-faint); font-size: 17px; transition: transform 0.2s ease; }
.analytics-disclosure[open] > summary .disclosure-icon, .attribution-disclosure[open] > summary .disclosure-icon { transform: rotate(180deg); }
.analytics-disclosure-body { padding-top: 24px; border-top: 1px solid var(--color-border); }
.analytics-disclosure-body > .metrics:last-child { margin-bottom: 24px; }
.attribution-disclosure > summary { cursor: pointer; list-style: none; }
.attribution-disclosure .tag { display: inline-flex; align-items: center; gap: 8px; }

.comparison-summary {
    display: grid; grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(130px, 1fr));
    align-items: stretch; margin-bottom: 24px; border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
}
.comparison-summary[hidden] { display: none; }
.comparison-outcome, .comparison-stat { min-width: 0; padding: 20px 18px; }
.comparison-outcome { padding-left: 0; }
.comparison-outcome .section-label { display: block; margin: 0 0 8px; font-size: 10.5px; }
.comparison-outcome strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.05; }
.comparison-outcome p { max-width: 360px; margin-top: 8px; color: var(--color-text-muted); font-size: 11.5px; line-height: 1.5; }
.comparison-stat { display: grid; align-content: center; gap: 6px; border-left: 1px solid var(--color-border); }
.comparison-stat span { color: var(--color-text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.comparison-stat strong { color: var(--color-text); font-family: var(--font-mono); font-size: 22px; font-weight: 620; }
.comparison-stat strong.pos { color: var(--color-positive); }
.comparison-stat strong.neg { color: var(--color-negative); }
.comparison-stat small { color: var(--color-text-faint); font-size: 10.5px; }
@media (max-width: 760px) {
    .comparison-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comparison-outcome { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--color-border); }
    .comparison-stat { border-left: 0; border-right: 1px solid var(--color-border); }
    .comparison-stat:nth-child(3) { border-right: 0; }
    .comparison-stat:last-child { grid-column: 1 / -1; border-top: 1px solid var(--color-border); border-right: 0; }
}

.confidence-panel {
    display: grid; grid-template-columns: minmax(190px, 1.2fr) repeat(3, minmax(135px, 1fr));
    align-items: stretch; margin: 0 0 24px; border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong); background: transparent;
}
.confidence-panel[hidden] { display: none; }
.confidence-copy, .confidence-stat { min-width: 0; padding: 18px; }
.confidence-copy { padding-left: 0; }
.confidence-copy .section-label { display: block; margin: 0 0 8px; font-size: 10.5px; }
.confidence-copy p { color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.confidence-stat { display: grid; align-content: center; gap: 6px; border-left: 1px solid var(--color-border); }
.confidence-stat span { color: var(--color-text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.confidence-stat strong { overflow-wrap: anywhere; color: var(--color-text); font-family: var(--font-mono); font-size: 16px; font-weight: 620; }
.confidence-stat small { color: var(--color-text-faint); font-size: 10.5px; line-height: 1.35; }
@media (max-width: 760px) {
    .confidence-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .confidence-copy { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--color-border); }
    .confidence-stat { border-left: 0; border-right: 1px solid var(--color-border); }
    .confidence-stat:nth-child(3) { border-right: 0; }
    .confidence-stat:last-child { grid-column: 1 / -1; border-top: 1px solid var(--color-border); border-right: 0; }
}

.chart-card .card-body { padding: 10px 14px 18px; }

/* ------------------------------------------- ATTRIBUTION & RISK */
.attr-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.attr-table th { text-align: right; font-weight: 560; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); padding: 6px 10px; border-bottom: 1px solid var(--color-border); }
.attr-table th:first-child, .attr-table td:first-child { text-align: left; }
.attr-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
.attr-table tr:last-child td { border-bottom: none; }
.attr-table td.sym { color: var(--color-text); font-weight: 600; }
.attr-table td.pos { color: var(--color-positive); }
.attr-table td.neg { color: var(--color-negative); }
.corr-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; margin: 0 auto; }
.corr-table th { font-weight: 560; font-size: 10.5px; color: var(--color-text-faint); padding: 6px 8px; }
.corr-table td { min-width: 58px; text-align: center; padding: 8px; border: 1px solid var(--color-border); color: var(--color-text); }
.attr-note { margin-top: 12px; font-size: 11.5px; color: var(--color-text-faint); line-height: 1.55; }
.attr-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .attr-grid { grid-template-columns: 1fr; } }
.attr-scroll { overflow-x: auto; }
.chart-legend { display: flex; gap: 18px; padding: 4px 8px 12px; flex-wrap: wrap; }
.chart-legend .item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.chart-legend .swatch { width: 22px; height: 3px; border-radius: 3px; }
.chart-shell { position: relative; height: 400px; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-faint); font-family: var(--font-mono); font-size: 13px; text-align: center; gap: 6px; }

/* console: always-dark code surface */
.console { margin-top: 22px; border: 1px solid var(--color-code-border); border-radius: var(--radius-lg); background: var(--color-code-bg); overflow: hidden; }
.console-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--color-code-border); }
.console-head .lights { display: flex; gap: 6px; }
.console-head .lights i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.console-head .lights i:nth-child(1) { background: #ff5f57; }
.console-head .lights i:nth-child(2) { background: #febc2e; }
.console-head .lights i:nth-child(3) { background: #28c840; }
.console-head span { font-family: var(--font-mono); font-size: 11px; color: var(--color-code-muted); letter-spacing: 0.1em; }
/* The log stays scrollable and auto-scrolls to the newest line, but the
   nested scrollbar is hidden: a second vertical scrollbar sitting in
   the middle of the page while you scroll the page itself was jarring. */
.console-body { max-height: 168px; overflow-y: auto; padding: 12px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; scrollbar-width: none; -ms-overflow-style: none; }
.console-body::-webkit-scrollbar { width: 0; height: 0; }
/* Inner horizontal scrollers (wide tables, code sample) get a thin,
   on-theme bar instead of the chunky default, for the same reason. */
.attr-scroll, .code-sample pre { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.attr-scroll::-webkit-scrollbar, .code-sample pre::-webkit-scrollbar { height: 6px; }
.attr-scroll::-webkit-scrollbar-thumb, .code-sample pre::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 6px; }
.console-body .line { display: flex; gap: 12px; animation: rowIn 0.25s ease both; }
.console-body .ts { color: var(--color-code-muted); flex-shrink: 0; }
.console-body .msg { color: var(--color-code-text); }
.console-body .msg.ok { color: #30d158; }
.console-body .msg.err { color: #ff6a5f; }
.console-body .msg.info { color: #64d2ff; }
.console-body::-webkit-scrollbar { width: 8px; }
.console-body::-webkit-scrollbar-thumb { background: var(--color-code-border); border-radius: 8px; }

/* --------------------------------------------------- LEARN / METRICS */
#learn { background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); }
.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 820px) { .learn-grid { grid-template-columns: 1fr; } }
.learn-card { padding: 26px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.learn-card h3 { font-size: 18px; font-weight: 640; display: flex; align-items: center; gap: 10px; }
.learn-card .formula { display: inline-block; margin-top: 14px; padding: 8px 12px; border-radius: 8px; background: var(--color-code-bg); color: var(--color-code-text); font-family: var(--font-mono); font-size: 12.5px; }
.learn-card p { margin-top: 14px; color: var(--color-text-muted); font-size: 14.5px; line-height: 1.65; }
.learn-card .rule { margin-top: 14px; font-size: 12.5px; color: var(--color-text-faint); }
.learn-card a.ref { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--color-accent); font-size: 13px; font-weight: 560; }
.learn-card a.ref:hover { text-decoration: underline; }

.code-sample { margin-top: 48px; border: 1px solid var(--color-code-border); border-radius: var(--radius-lg); background: var(--color-code-bg); overflow: hidden; }
.code-sample .code-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-code-border); }
.code-sample .code-head span { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-code-muted); letter-spacing: 0.08em; }
.copy-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--color-code-surface); border: 1px solid var(--color-code-border); color: var(--color-code-text); font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.18s; }
.copy-btn:hover { background: rgba(255,255,255,0.09); }
.copy-btn.copied { color: #30d158; border-color: color-mix(in srgb, #30d158 45%, transparent); }
.code-sample pre { margin: 0; padding: 18px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--color-code-text); }

/* ------------------------------------------------------------ misc */
footer { border-top: 1px solid var(--color-border); padding: 56px clamp(16px,5vw,40px) 44px; background: var(--color-bg); }
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer .note { max-width: 460px; color: var(--color-text-faint); font-size: 12.5px; line-height: 1.7; }
footer .col { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
footer .col a { color: var(--color-text-muted); display: block; margin-bottom: 8px; }
footer .col a:hover { color: var(--color-text); }
footer .disclaimer { color: var(--color-text-faint); margin-top: 12px; max-width: 260px; }

#toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 13px 18px; border-radius: var(--radius); font-size: 13.5px; font-weight: 500; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 10px; max-width: 340px; animation: toastIn 0.35s cubic-bezier(.2,.8,.2,1) both; }
.toast.out { animation: toastOut 0.3s ease forwards; }
.toast .ic { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; }
.toast.ok .ic { background: color-mix(in srgb, var(--color-positive) 20%, transparent); color: var(--color-positive); }
.toast.err .ic { background: color-mix(in srgb, var(--color-negative) 20%, transparent); color: var(--color-negative); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* Keyboard focus: one consistent, clearly visible ring everywhere.
   :focus-visible (not :focus) so mouse clicks don't flash outlines. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Metric tiles deep-link to their Learn card. */
.metric a.k { color: var(--color-text-muted); text-decoration: none; }
.metric a.k:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Inline spinner shown on the Run button while a backtest is in flight. */
.btn-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; vertical-align: -2px; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.reveal { opacity: 0; transform: translateY(28px) scale(0.995); filter: blur(5px); transition: opacity 0.85s cubic-bezier(.2,.7,.2,1), transform 0.85s cubic-bezier(.2,.7,.2,1), filter 0.85s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* Stagger siblings inside grids so rows cascade instead of popping
   at once. Delays cap around half a second; content never waits. */
.steps .step:nth-child(2), .learn-grid .learn-card:nth-child(2) { transition-delay: 0.09s; }
.steps .step:nth-child(3), .learn-grid .learn-card:nth-child(3) { transition-delay: 0.18s; }
.learn-grid .learn-card:nth-child(4) { transition-delay: 0.27s; }
.learn-grid .learn-card:nth-child(5) { transition-delay: 0.09s; }
.learn-grid .learn-card:nth-child(6) { transition-delay: 0.18s; }
.learn-grid .learn-card:nth-child(7) { transition-delay: 0.27s; }
.learn-grid .learn-card:nth-child(8) { transition-delay: 0.36s; }
.learn-grid .learn-card:nth-child(9) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
    html { scroll-behavior: auto; scroll-snap-type: none; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .hero-spark .line { stroke-dashoffset: 0; }
    .hero-spark .fill, .hero-spark .tip, .hero .scroll-cue { opacity: 1; }
}

/* ------------------------------------------------ EDITORIAL REVAMP
   A cinematic first viewport and a flatter, quieter analytical shell.
   The image carries the atmosphere; rules, spacing, and type carry the
   application below it. */
:root {
    --color-bg: #ece9e3;
    --color-bg-elevated: #dfe5e3;
    --color-surface: #f6f4ef;
    --color-surface-2: #e9ece9;
    --color-border: #c8cbc7;
    --color-border-strong: #9da29e;
    --color-text: #141412;
    --color-text-muted: #4d504d;
    --color-text-faint: #70746f;
    --color-accent: #b82f1b;
    --color-accent-strong: #8f2415;
    --color-accent-2: #d6452d;
    --color-cta: #151513;
    --color-on-cta: #f7f4ed;
    --color-positive: #176a50;
    --color-negative: #b82f1b;
    --chart-portfolio: #b82f1b;
    --chart-portfolio-fill-top: rgba(184, 47, 27, 0.12);
    --chart-portfolio-fill-bot: rgba(184, 47, 27, 0);
    --chart-benchmark: #676c68;
    --chart-grid: rgba(20, 20, 18, 0.1);
    --chart-axis: #70746f;
    --shadow-card: none;
    --radius-sm: 4px;
    --radius: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --maxw: 1280px;
}
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        --color-bg: #171816;
        --color-bg-elevated: #202522;
        --color-surface: #222320;
        --color-surface-2: #2b2d29;
        --color-border: #3a3d39;
        --color-border-strong: #5b5f59;
        --color-text: #f0eee8;
        --color-text-muted: #b5b7b1;
        --color-text-faint: #858a83;
        --color-accent: #ef6a4e;
        --color-accent-strong: #ff896f;
        --color-accent-2: #ef6a4e;
        --color-cta: #f0eee8;
        --color-on-cta: #171816;
        --chart-portfolio: #ef6a4e;
        --chart-benchmark: #929991;
        --chart-grid: rgba(240, 238, 232, 0.1);
        --chart-axis: #929991;
    }
}
:root.theme-dark {
    --color-bg: #171816;
    --color-bg-elevated: #202522;
    --color-surface: #222320;
    --color-surface-2: #2b2d29;
    --color-border: #3a3d39;
    --color-border-strong: #5b5f59;
    --color-text: #f0eee8;
    --color-text-muted: #b5b7b1;
    --color-text-faint: #858a83;
    --color-accent: #ef6a4e;
    --color-accent-strong: #ff896f;
    --color-accent-2: #ef6a4e;
    --color-cta: #f0eee8;
    --color-on-cta: #171816;
    --chart-portfolio: #ef6a4e;
    --chart-benchmark: #929991;
    --chart-grid: rgba(240, 238, 232, 0.1);
    --chart-axis: #929991;
}
body * { letter-spacing: 0 !important; }
body { background: var(--color-bg); }

nav#nav {
    height: 68px;
    padding: 0 28px;
    color: #151513;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
nav#nav.scrolled {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.brand {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 500;
    color: inherit;
}
.brand em { font-family: var(--font-display); font-size: 27px; font-weight: 400; }
.nav-links { gap: 24px; }
.nav-links a { color: inherit; font-size: 14px; }
.nav-cta {
    padding: 9px 16px;
    color: #f7f4ed !important;
    background: #151513;
    border: 1px solid #151513;
}
nav#nav.scrolled .nav-cta { color: var(--color-on-cta) !important; background: var(--color-cta); border-color: var(--color-cta); }
.theme-toggle { width: 38px; height: 38px; color: inherit; background: rgba(255,255,255,0.52); border-color: rgba(20,20,18,0.18); }
nav#nav.scrolled .theme-toggle { color: var(--color-text); background: var(--color-surface-2); border-color: var(--color-border); }

.hero {
    min-height: calc(100svh - 42px);
    padding: 92px 28px 170px;
    color: #151513;
    justify-content: center;
    text-align: center;
    isolation: isolate;
}
.hero-media, .hero-scrim { position: absolute; inset: 0; }
.hero-media { z-index: -2; overflow: hidden; background: #d8d2c9; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.015); animation: heroDrift 14s ease-out both; }
.hero-scrim { z-index: -1; background: rgba(241, 235, 228, 0.18); }
@keyframes heroDrift { from { transform: scale(1.08); } to { transform: scale(1.015); } }
.hero-inner.hero-split {
    display: block;
    position: static;
    width: min(960px, 100%);
    max-width: 960px;
    text-align: center;
}
.hero-copy { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; }
.hero .eyebrow {
    margin-bottom: 18px;
    color: #34332f;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.hero h1,
.hero-split h1 {
    color: #151513;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: 88px;
    line-height: 0.92;
    font-weight: 400;
    text-wrap: balance;
}
.hero h1 .accent { color: #151513; -webkit-text-fill-color: currentColor; }
.hero p.sub {
    max-width: 630px;
    margin: 24px auto 0;
    color: #2f302d;
    font-size: 17px;
    line-height: 1.48;
}
.hero-cta { margin-top: 28px; justify-content: center; }
.btn { min-height: 46px; padding: 11px 20px; font-size: 14px; }
.btn-primary { background: #151513; color: #f7f4ed; box-shadow: none; }
.btn-primary:hover { box-shadow: none; }
.btn-ghost { color: #151513; background: rgba(255,255,255,0.62); border-color: rgba(20,20,18,0.22); backdrop-filter: blur(12px); }
.hero-demo {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 20px;
    max-width: 1280px;
    margin: 0 auto;
}
.demo-card.market-rail {
    display: grid;
    grid-template-columns: 250px minmax(300px, 1fr) 460px;
    grid-template-areas:
        "head chart metrics"
        "head foot metrics";
    grid-template-rows: minmax(82px, 1fr) auto;
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(20,20,18,0.2);
    border-radius: 6px;
    background: rgba(246,244,239,0.64);
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.market-rail .demo-head { grid-area: head; margin: 0; padding: 14px 18px; border-right: 1px solid rgba(20,20,18,0.16); }
.market-rail .demo-metrics { grid-area: metrics; margin: 0; border: 0; border-radius: 0; background: rgba(20,20,18,0.14); }
.market-rail .demo-metrics .m { background: rgba(246,244,239,0.76); padding: 12px 16px; }
.market-rail .demo-chart { grid-area: chart; height: 92px; padding: 10px 16px 0; border-right: 1px solid rgba(20,20,18,0.16); }
.market-rail .demo-foot { grid-area: foot; margin: 0; padding: 0 16px 9px; border-right: 1px solid rgba(20,20,18,0.16); }
.market-rail .demo-legend { color: #42433f; }
.market-rail .demo-note { color: #565853; font-size: 9.5px; }
.market-rail .demo-tag { color: #8f2415; border-color: rgba(143,36,21,0.35); }
.scroll-cue { display: none; }

.tape { background: #151513; border: 0; color: #f0eee8; }
.tape-track { padding: 12px 0; }
.tape-track span, .tape-track span i { color: #9ea29c; }
.tape-track span b { color: #f0eee8; }
.page-dots a { border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: transparent; }
.page-dots a.active { background: var(--color-accent); border-color: var(--color-accent); }

section.block { padding: 118px 32px; }
.section-label { margin-bottom: 28px; color: var(--color-accent); font-size: 12px; font-weight: 650; }
.section-title { max-width: 940px; font-size: 62px; line-height: 0.98; }
.section-lede { max-width: 660px; margin-top: 26px; font-size: 17px; }
#how {
    min-height: 0;
    padding-top: 84px;
    padding-bottom: 84px;
    background: var(--color-bg-elevated);
}
.steps { gap: 0; margin-top: 48px; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.step {
    min-height: 224px;
    padding: 24px 32px 28px 0;
    border: 0;
    border-right: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.step + .step { padding-left: 32px; }
.step:last-child { border-right: 0; }
.step:hover { transform: none; }
.step .idx { width: auto; height: auto; display: block; margin-bottom: 38px; border: 0; color: var(--color-accent); }
.step h3 { font-size: 22px; font-weight: 560; }
.step p { max-width: 330px; font-size: 14px; }

#terminal { background: var(--color-bg); border-top: 0; }
.terminal-head { margin-bottom: 58px; padding-bottom: 30px; border-bottom: 1px solid var(--color-border-strong); }
.app-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; }
.card { border-color: var(--color-border); border-radius: 6px; background: var(--color-surface); box-shadow: none; }
.card-head { min-height: 58px; padding: 14px 16px; }
.card-body { padding: 16px; }
.led { box-shadow: none; }
input, select { height: 46px; border-radius: 4px; }
.btn-block { height: 48px; border-radius: 4px; box-shadow: none; }
.btn-block:hover { box-shadow: none; }
.segmented { border-radius: 4px; }
.segmented button, .segmented button.active { border-radius: 2px; }
.metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    margin-bottom: 24px;
    background: var(--color-border);
}
.metric { min-height: 138px; padding: 18px; border: 0; border-radius: 0; background: var(--color-surface); box-shadow: none; }
.metric::after { display: none; }
.metric .v { font-size: 26px; }
.chart-shell { height: 430px; }
.console { border-radius: 6px; }

#learn { background: #171816; color: #f0eee8; border: 0; }
#learn .section-title, #learn strong { color: #f0eee8 !important; }
#learn .section-lede, #learn > .wrap > div[style] { color: #aeb3ad !important; }
#learn .learn-grid { gap: 0; margin-top: 64px; border-top: 1px solid #474b46; }
#learn .learn-card {
    min-height: 350px;
    padding: 30px 30px 34px 0;
    border: 0;
    border-bottom: 1px solid #474b46;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#learn .learn-card:nth-child(odd) { border-right: 1px solid #474b46; }
#learn .learn-card:nth-child(even) { padding-left: 30px; }
#learn .learn-card h3 { color: #f0eee8; font-family: var(--font-display); font-size: 28px; font-weight: 400; }
#learn .learn-card p { color: #aeb3ad; }
#learn .learn-card .rule { color: #d0d3ce; }
#learn .learn-card .formula { border-radius: 3px; background: #2b2d29; }
#learn .learn-card a.ref { color: #ef6a4e; }
.code-sample { border-radius: 6px; }
footer { padding: 64px 32px 54px; }
.footer-brand { color: var(--color-text); }

@media (max-width: 1000px) {
    .hero h1, .hero-split h1 { font-size: 72px; }
    .hero-demo { left: 20px; right: 20px; }
    .demo-card.market-rail { grid-template-columns: 190px minmax(230px, 1fr) 340px; }
    .market-rail .demo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-rail .demo-metrics .m { padding: 8px 12px; }
    .market-rail .demo-head .mix { display: none; }
    .app-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
    nav#nav { height: 58px; padding: 0 16px; }
    .brand { font-size: 20px; }
    .brand em { font-size: 23px; }
    .nav-links a[data-nav="learn_metrics"], .nav-links a[data-nav="releases"] { display: none; }
    .nav-links { gap: 9px; }
    .nav-cta { padding: 8px 12px; }
    .theme-toggle { width: 34px; height: 34px; }
    .hero { min-height: 790px; padding: 82px 18px 260px; }
    .hero h1, .hero-split h1 { font-size: 56px; line-height: 0.95; }
    .hero p.sub { font-size: 16px; }
    .hero-demo { display: block; left: 14px; right: 14px; bottom: 14px; }
    .demo-card.market-rail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "chart" "foot" "metrics";
        grid-template-rows: 88px auto auto;
    }
    .market-rail .demo-head { display: none; }
    .market-rail .demo-chart { height: 88px; border-right: 0; padding: 8px 10px 0; }
    .market-rail .demo-foot { padding: 0 10px 7px; border-right: 0; }
    .market-rail .demo-note { display: none; }
    .market-rail .demo-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .market-rail .demo-metrics .m { min-width: 0; padding: 8px; }
    .market-rail .demo-metrics .k { min-height: 24px; font-size: 8px; }
    .market-rail .demo-metrics .v { font-size: 14px; }
    .hero-media img { object-position: 47% 50%; }
    section.block { padding: 86px 18px; }
    #how { padding: 72px 18px; }
    #how .steps { margin-top: 42px; }
    .section-title { font-size: 44px; }
    .steps { grid-template-columns: 1fr; }
    .step, .step + .step { min-height: 0; padding: 24px 0 28px; border-right: 0; border-bottom: 1px solid var(--color-border-strong); }
    .step:last-child { border-bottom: 0; }
    .step .idx { margin-bottom: 28px; }
    .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .chart-shell { height: 330px; }
    #learn .learn-grid { grid-template-columns: 1fr; }
    #learn .learn-card, #learn .learn-card:nth-child(even) { min-height: 0; padding: 28px 0 32px; border-right: 0; }
    .footer-grid { display: grid; }
}
@media (max-width: 480px) {
    .hero { min-height: 780px; padding-left: 14px; padding-right: 14px; }
    .hero h1, .hero-split h1 { font-size: 44px; }
    .hero-cta { display: grid; grid-template-columns: 1fr; }
    .btn { justify-content: center; }
    .section-title { font-size: 38px; }
    .bt-form { grid-template-columns: 1fr; }
    .bt-form .field, .bt-form .btn-block { grid-column: 1 !important; }
    .metric { min-height: 126px; padding: 14px; }
    .metric .v { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-media img { animation: none; transform: none; }
}