/* ============================================================
   ECHEA, Design System
   Superintelligence Research Lab · Deterministic Algorithms
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
    /*, Type families, */
    --font-display: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /*, Type scale, */
    --text-display: clamp(2rem, 5vw, 3.5rem);
    --text-h1: clamp(1.8rem, 4vw, 2.8rem);
    --text-h2: 1.35rem;
    --text-body: 0.98rem;
    --text-small: 0.85rem;
    --text-meta: 0.78rem;
    --text-label: 0.72rem;
    --text-label-sm: 0.66rem;
    --text-caption: 0.7rem;

    /*, Weights, */
    --fw-hair: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;

    /*, Letter spacing ladder, */
    --ls-tight: -0.01em;
    --ls-base: 0.02em;
    --ls-wide: 0.08em;
    --ls-wider: 0.12em;
    --ls-widest: 0.18em;
    --ls-uppercase: 0.22em;

    /*, Line heights, */
    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.6;
    --lh-relaxed: 1.85;

    /* Color tokens live in palette blocks below, see Signature (default)
       and Naturalistic further down. Keeping the legacy variable names
       (`--violet-bright`, `--accent-blue`, etc.) means existing rules
       automatically pick up whichever palette is active. */

    /*, Spacing scale (4px base), */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;

    /*, Radii, */
    --radius-md: 14px;
    --radius-pill: 999px;

    /*, Effects, */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 200ms;
    --dur-base: 300ms;
    --dur-slow: 1100ms;
    --blur-panel: blur(24px);
    --glass-panel-solid: color-mix(in srgb, var(--ink-chalk) 4%, transparent);
    --glass-panel-fill:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 10%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 3%, transparent) 28%,
            color-mix(in srgb, var(--ink-chalk) 1%, transparent) 100%),
        radial-gradient(circle at 18% 14%,
            color-mix(in srgb, var(--ink-chalk) 18%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 5%, transparent) 18%,
            transparent 52%),
        radial-gradient(circle at 82% 118%,
            color-mix(in srgb, var(--accent-blue) 5%, transparent) 0%,
            transparent 42%),
        var(--glass-panel-solid);
    --glass-panel-hover:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 14%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 5%, transparent) 30%,
            color-mix(in srgb, var(--ink-chalk) 2%, transparent) 100%),
        radial-gradient(circle at 16% 12%,
            color-mix(in srgb, var(--ink-chalk) 22%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 7%, transparent) 20%,
            transparent 54%),
        color-mix(in srgb, var(--ink-chalk) 7%, transparent);
    --glass-panel-border: color-mix(in srgb, var(--ink-chalk) 24%, var(--violet-line));
    --glass-panel-shadow:
        0 22px 46px -32px color-mix(in srgb, var(--surface-overlay) 44%, transparent),
        0 8px 18px -14px color-mix(in srgb, var(--ink-chalk) 10%, transparent);
    --glass-panel-backdrop: blur(34px) saturate(200%) contrast(1.08);
    --glass-panel-sheen:
        linear-gradient(125deg,
            color-mix(in srgb, var(--ink-chalk) 42%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 8%, transparent) 18%,
            transparent 46%,
            transparent 100%);
    --glass-panel-rim:
        inset 0 1px 0 color-mix(in srgb, var(--ink-chalk) 58%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--ink-chalk) 12%, transparent),
        inset 0 -18px 28px -24px color-mix(in srgb, var(--surface-overlay) 18%, transparent);
    --glow-divider:
        0 0 8px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------
   1b. Palette: Signature (default), warm bone + midnight + burnt
       sienna. Rejects electric-violet AI cliché, anchors "proof over
       guess" positioning.
   ------------------------------------------------------------ */
:root,
:root[data-palette="signature"] {
    --ink-strong: #0E1018;
    --ink-base: #1B2030;
    --ink-muted: rgba(14, 16, 24, 0.88);
    --ink-soft: rgba(14, 16, 24, 0.58);
    --ink-faint: rgba(14, 16, 24, 0.32);

    --violet-deep: #14192E;                          /* midnight */
    --violet: #1D2440;
    --violet-bright: #B84A1F;                        /* signature (hero) */
    --violet-label: rgba(184, 74, 31, 0.72);
    --violet-label-strong: rgba(184, 74, 31, 0.90);
    --violet-tint: rgba(184, 74, 31, 0.12);
    --violet-line: rgba(20, 25, 46, 0.16);

    --accent-blue: #3A5FA8;                          /* precision slate */
    --accent-pink: #B84A1F;

    --surface-panel: rgba(246, 242, 232, 0.45);
    --surface-divider: rgba(251, 248, 239, 0.80);
    --surface-overlay: rgba(14, 16, 24, 0.75);
    --panel-card: rgba(246, 242, 232, 0.50);
    --panel-card-hover: rgba(246, 242, 232, 0.74);

    --ink-bone: #F6F2E8;
    --ink-chalk: #FBF8EF;
    --ink-900: #0E1018;
    --ink-600: #3F4453;
    --ink-400: #7A8093;
    --midnight: #14192E;
    --signature: #B84A1F;
    --signature-wash: #FBEBE0;
    --precision: #3A5FA8;

    /* Gradient backdrop tints, warm cream/peach/sand clouds. */
    --grad-bg-1a: #f3ead8;
    --grad-bg-1b: #ecdfc6;
    --grad-bg-1c: #e4d5b7;
    --grad-bg-2a: #fbe0cc;
    --grad-bg-2b: #f5d0b4;
    --grad-bg-2c: #efc19d;
    --grad-bg-3a: #f6f2e8;
    --grad-bg-3b: #ede5cf;
    --grad-bg-3c: #e2d5b4;
}

/* ------------------------------------------------------------
   1c. Palette: Naturalistic, navy + sky + violet + sage + gold +
       plum + dusty pink. Utopian-futurist 7-hue system (Hilma af
       Klint / Ghibli / Moebius lineage), muted saturation band to
       keep all seven hues cohesive.
   ------------------------------------------------------------ */
:root[data-palette="naturalistic"] {
    --ink-strong: #1C1E26;
    --ink-base: #2A2D3A;
    --ink-muted: rgba(28, 30, 38, 0.88);
    --ink-soft: rgba(28, 30, 38, 0.60);
    --ink-faint: rgba(28, 30, 38, 0.32);

    --violet-deep: #1A2C44;                          /* navy */
    --violet: #2C3E5C;                               /* navy soft */
    --violet-bright: #6B5B9A;                        /* violet (hero) */
    --violet-label: rgba(107, 91, 154, 0.75);
    --violet-label-strong: rgba(107, 91, 154, 0.92);
    --violet-tint: rgba(107, 91, 154, 0.12);
    --violet-line: rgba(26, 44, 68, 0.18);

    --accent-blue: #8FB4D4;                          /* sky blue */
    --accent-pink: #D4A5A5;                          /* dusty pink */

    --surface-panel: rgba(242, 236, 222, 0.45);
    --surface-divider: rgba(244, 239, 228, 0.80);
    --surface-overlay: rgba(28, 30, 38, 0.75);
    --panel-card: rgba(242, 236, 222, 0.50);
    --panel-card-hover: rgba(242, 236, 222, 0.74);

    --ink-bone: #F2ECDE;
    --ink-chalk: #F8F3E6;
    --ink-900: #1C1E26;
    --ink-600: #4A4D60;
    --ink-400: #8A8578;
    --midnight: #1A2C44;
    --signature: #6B5B9A;                            /* violet hero */
    --signature-wash: #E4DDF0;
    --precision: #8FB4D4;                            /* sky blue */

    /* Additional naturalistic tokens, surface hues for illustrations
       and scene palettes. */
    --navy: #1A2C44;
    --sky: #8FB4D4;
    --violet-hue: #6B5B9A;
    --plum: #8B4A6B;
    --pink: #D4A5A5;
    --sage: #6B8E6B;
    --gold: #C9A961;

    /* Gradient backdrop tints, cool sky/sage/gold morning. */
    --grad-bg-1a: #d7ddf0;
    --grad-bg-1b: #c8d4ea;
    --grad-bg-1c: #b8cbe2;
    --grad-bg-2a: #e8d8e4;
    --grad-bg-2b: #dcc4d0;
    --grad-bg-2c: #d0b2bf;
    --grad-bg-3a: #f2ecde;
    --grad-bg-3b: #e8e0c8;
    --grad-bg-3c: #d8cfab;
}

/* ------------------------------------------------------------
   1d. Palette: Greco, brighter, more saturated utopian futurism.
       Parthenon marble canvas, Aegean blue hero, sea-green and rose
       quartz accents, Mediterranean gold. Think: Microsoft Fluent
       clarity crossed with Mediterranean warmth.
   ------------------------------------------------------------ */
:root[data-palette="greco"] {
    --ink-strong: #1C2530;
    --ink-base: #2E3A48;
    --ink-muted: rgba(28, 37, 48, 0.88);
    --ink-soft: rgba(28, 37, 48, 0.60);
    --ink-faint: rgba(28, 37, 48, 0.32);

    --violet-deep: #1A3566;                          /* deep cobalt */
    --violet: #2D4B88;
    --violet-bright: #4A90E2;                        /* aegean blue (hero) */
    --violet-label: rgba(74, 144, 226, 0.78);
    --violet-label-strong: rgba(74, 144, 226, 0.94);
    --violet-tint: rgba(74, 144, 226, 0.14);
    --violet-line: rgba(26, 53, 102, 0.18);

    --accent-blue: #4AB5A7;                          /* sea green */
    --accent-pink: #E8A5B5;                          /* rose quartz */

    --surface-panel: rgba(246, 243, 236, 0.45);
    --surface-divider: rgba(250, 247, 240, 0.82);
    --surface-overlay: rgba(28, 37, 48, 0.72);
    --panel-card: rgba(246, 243, 236, 0.50);
    --panel-card-hover: rgba(246, 243, 236, 0.74);

    --ink-bone: #F6F3EC;                             /* Parthenon marble */
    --ink-chalk: #FAF7F0;
    --ink-900: #1C2530;
    --ink-600: #4E5A6E;
    --ink-400: #8A94A4;
    --midnight: #1A3566;
    --signature: #4A90E2;                            /* aegean hero */
    --signature-wash: #DDEBFB;
    --precision: #4AB5A7;                            /* sea green */

    /* Greco accents */
    --greco-cobalt: #1A3566;
    --greco-aegean: #4A90E2;
    --greco-sea: #4AB5A7;
    --greco-rose: #E8A5B5;
    --greco-gold: #D4A830;
    --greco-olive: #8EA653;
    --greco-terracotta: #B2503C;
    --greco-sand: #DEC387;

    /* Gradient backdrop tints, marble / aegean / gold dawn. */
    --grad-bg-1a: #dde8f5;
    --grad-bg-1b: #c8dcf0;
    --grad-bg-1c: #b0cce8;
    --grad-bg-2a: #fae1d8;
    --grad-bg-2b: #f4ccc4;
    --grad-bg-2c: #edb8ae;
    --grad-bg-3a: #f6f3ec;
    --grad-bg-3b: #f0e8cc;
    --grad-bg-3c: #e6d8a8;
}

/* ------------------------------------------------------------
   1e. Palette: Greco 2, pink / violet / sky-blue variation of the
       Greco family. Brings back the original Echea gradient
       (#60a5fa → #8b5cf6 → #ec4899) inside the Mediterranean-
       futurist structure. Pale pink marble canvas, electric violet
       hero, hot pink accents.
   ------------------------------------------------------------ */
:root[data-palette="greco2"] {
    --ink-strong: #2A1A35;
    --ink-base: #3D2A4A;
    --ink-muted: rgba(42, 26, 53, 0.88);
    --ink-soft: rgba(42, 26, 53, 0.60);
    --ink-faint: rgba(42, 26, 53, 0.32);

    --violet-deep: #3B1A5F;                          /* deep indigo */
    --violet: #5B2C8C;
    --violet-bright: #8B5CF6;                        /* electric violet hero */
    --violet-label: rgba(139, 92, 246, 0.78);
    --violet-label-strong: rgba(139, 92, 246, 0.94);
    --violet-tint: rgba(139, 92, 246, 0.14);
    --violet-line: rgba(59, 26, 95, 0.18);

    --accent-blue: #60A5FA;                          /* sky blue */
    --accent-pink: #EC4899;                          /* hot pink */

    --surface-panel: rgba(250, 244, 245, 0.45);
    --surface-divider: rgba(253, 249, 250, 0.82);
    --surface-overlay: rgba(42, 26, 53, 0.72);
    --panel-card: rgba(250, 244, 245, 0.50);
    --panel-card-hover: rgba(250, 244, 245, 0.74);

    --ink-bone: #FAF4F5;                             /* pink-marble */
    --ink-chalk: #FDF9FA;
    --ink-900: #2A1A35;
    --ink-600: #5C4C6E;
    --ink-400: #9B8EA8;
    --midnight: #3B1A5F;
    --signature: #8B5CF6;                            /* electric violet hero */
    --signature-wash: #EDE4FE;
    --precision: #60A5FA;                            /* sky blue */

    /* Greco 2 accents */
    --g2-indigo: #3B1A5F;
    --g2-violet: #8B5CF6;
    --g2-lavender: #A78BFA;
    --g2-sky: #60A5FA;
    --g2-periwinkle: #818CF8;
    --g2-hotpink: #EC4899;
    --g2-rose: #F472B6;
    --g2-magenta: #C026D3;

    /* Gradient backdrop tints, lavender / rose / cream dawn. */
    --grad-bg-1a: #e4dafa;
    --grad-bg-1b: #d1c0f0;
    --grad-bg-1c: #b9a3e4;
    --grad-bg-2a: #fbdbe8;
    --grad-bg-2b: #f5c2d8;
    --grad-bg-2c: #eda8c6;
    --grad-bg-3a: #fbf0fc;
    --grad-bg-3b: #f3dcf4;
    --grad-bg-3c: #e8c3ea;
}

/* ------------------------------------------------------------
   1f. Palette: Greco 3, "sky above, earth below".
       Ambient atmosphere keeps the Greco 2 pale sky-blue + dusk-pink
       gradient backdrop, but every 3D element shifts to earth tones:
       olive, moss, clay, loam, wheat gold, stone, umber, sage. Reads
       as standing on the ground looking up at the sky.
   ------------------------------------------------------------ */
:root[data-palette="greco3"] {
    --ink-strong: #1F1810;                           /* deep loam ink */
    --ink-base: #33281A;
    --ink-muted: rgba(31, 24, 16, 0.88);
    --ink-soft: rgba(31, 24, 16, 0.58);
    --ink-faint: rgba(31, 24, 16, 0.30);

    --violet-deep: #3A2A1C;                          /* deep loam */
    --violet: #5A4128;
    --violet-bright: #82873E;                        /* olive hero */
    --violet-label: rgba(130, 135, 62, 0.85);
    --violet-label-strong: rgba(130, 135, 62, 0.95);
    --violet-tint: rgba(130, 135, 62, 0.14);
    --violet-line: rgba(58, 42, 28, 0.18);

    --accent-blue: #A86934;                          /* clay brown */
    --accent-pink: #C9A94A;                          /* antique gold */

    --surface-panel: rgba(252, 253, 255, 0.68);
    --surface-divider: rgba(255, 255, 255, 0.90);
    --surface-overlay: rgba(31, 24, 16, 0.72);
    --panel-card: rgba(252, 253, 255, 0.66);
    --panel-card-hover: rgba(255, 255, 255, 0.84);

    --ink-bone: #FAFBFE;                             /* near-white sky canvas */
    --ink-chalk: #FFFFFF;
    --ink-900: #1F1810;
    --ink-600: #554528;
    --ink-400: #8A7A5A;
    --midnight: #3A2A1C;
    --signature: #82873E;                            /* olive hero */
    --signature-wash: #EBEEDE;
    --precision: #A86934;                            /* clay brown */

    /* Earth tokens */
    --earth-olive: #82873E;
    --earth-moss: #3C5530;
    --earth-loam: #3A2A1C;
    --earth-clay: #A86934;
    --earth-stone: #C9B99A;
    --earth-gold: #C9A94A;
    --earth-sage: #8CA074;
    --earth-umber: #462E1E;

    /* Gradient backdrop tints, SKY above: pale blue morning, dusk
       rose, cream mist. Deliberately kept cool/pink like Greco 2 so
       the atmosphere reads "sky" against the earth-tone 3D content. */
    --grad-bg-1a: #fbfdff;
    --grad-bg-1b: #f6f9fd;
    --grad-bg-1c: #edf4fb;
    --grad-bg-2a: #fff9fb;
    --grad-bg-2b: #fbf0f5;
    --grad-bg-2c: #f6e7ef;
    --grad-bg-3a: #ffffff;
    --grad-bg-3b: #fbfcff;
    --grad-bg-3c: #f4f7fb;
}

/* ------------------------------------------------------------
   1g. Palette: Axiom, the mission palette.
       Inspired by Oliver Byrne's 1847 edition of Euclid's Elements,
       which used the three classical primaries (ultramarine blue,
       vermilion red, antique gold) as pedagogical markers inside
       geometric proofs on warm vellum. Echea's "we prove, we don't
       guess" positioning IS the theorem-prover / illuminated-
       manuscript lineage, and no AI brand is currently claiming it.
   ------------------------------------------------------------ */
:root[data-palette="axiom"] {
    --ink-strong: #181410;                           /* iron-gall near-black */
    --ink-base: #2A2318;
    --ink-muted: rgba(24, 20, 16, 0.88);
    --ink-soft: rgba(24, 20, 16, 0.60);
    --ink-faint: rgba(24, 20, 16, 0.32);

    --violet-deep: #1C2E6B;                          /* ultramarine */
    --violet: #2A3F85;
    --violet-bright: #C0392E;                        /* Byrne vermilion (hero) */
    --violet-label: rgba(192, 57, 46, 0.80);
    --violet-label-strong: rgba(192, 57, 46, 0.95);
    --violet-tint: rgba(192, 57, 46, 0.12);
    --violet-line: rgba(28, 46, 107, 0.18);

    --accent-blue: #1C2E6B;                          /* ultramarine */
    --accent-pink: #C0392E;                          /* vermilion */

    --surface-panel: rgba(241, 234, 218, 0.45);
    --surface-divider: rgba(245, 240, 226, 0.82);
    --surface-overlay: rgba(24, 20, 16, 0.72);
    --panel-card: rgba(241, 234, 218, 0.50);
    --panel-card-hover: rgba(241, 234, 218, 0.74);

    --ink-bone: #F1EADA;                             /* vellum */
    --ink-chalk: #F7F1E2;
    --ink-900: #181410;
    --ink-600: #5A4F3D;
    --ink-400: #9A8C6E;
    --midnight: #1C2E6B;
    --signature: #C0392E;                            /* vermilion hero */
    --signature-wash: #F4DDD8;
    --precision: #1C2E6B;                            /* ultramarine */

    /* Axiom manuscript tokens */
    --vellum: #F1EADA;
    --iron-gall: #181410;
    --byrne-red: #C0392E;
    --byrne-blue: #1C2E6B;
    --byrne-gold: #D4A10F;
    --parchment: #E8DBB7;
    --manuscript-green: #4A623C;
    --burnt-amber: #AA5A28;

    /* Gradient backdrop tints, aged-paper bloom in cream / rose / gold. */
    --grad-bg-1a: #f2e6c8;
    --grad-bg-1b: #e8d5a6;
    --grad-bg-1c: #d9c284;
    --grad-bg-2a: #f4d5c2;
    --grad-bg-2b: #e8baa0;
    --grad-bg-2c: #d8a07e;
    --grad-bg-3a: #f1ead8;
    --grad-bg-3b: #e3d5ae;
    --grad-bg-3c: #d0bd82;
}

/* ------------------------------------------------------------
   1g. Palette: Monochrome, strict black/white/gray. Vercel Geist /
       Linear / Superhuman lineage. No color commitment, just value
       and typography doing all the work.
   ------------------------------------------------------------ */
:root[data-palette="monochrome"] {
    --ink-strong: #0A0A0A;
    --ink-base: #171717;
    --ink-muted: rgba(10, 10, 10, 0.92);
    --ink-soft: rgba(10, 10, 10, 0.62);
    --ink-faint: rgba(10, 10, 10, 0.32);

    --violet-deep: #0A0A0A;
    --violet: #171717;
    --violet-bright: #171717;                        /* hero = ink */
    --violet-label: rgba(23, 23, 23, 0.82);
    --violet-label-strong: rgba(10, 10, 10, 0.95);
    --violet-tint: rgba(23, 23, 23, 0.08);
    --violet-line: rgba(10, 10, 10, 0.14);

    --accent-blue: #6B7280;                          /* mid gray */
    --accent-pink: #404040;                          /* charcoal */

    --surface-panel: rgba(250, 250, 250, 0.45);
    --surface-divider: rgba(255, 255, 255, 0.84);
    --surface-overlay: rgba(10, 10, 10, 0.78);
    --panel-card: rgba(250, 250, 250, 0.52);
    --panel-card-hover: rgba(255, 255, 255, 0.76);

    --ink-bone: #FAFAFA;
    --ink-chalk: #FFFFFF;
    --ink-900: #0A0A0A;
    --ink-600: #404040;
    --ink-400: #8A8A8A;
    --midnight: #0A0A0A;
    --signature: #171717;
    --signature-wash: #F4F4F5;
    --precision: #6B7280;

    /* Gradient backdrop tints, gray value ladder. */
    --grad-bg-1a: #f0f0f0;
    --grad-bg-1b: #e4e4e4;
    --grad-bg-1c: #d4d4d4;
    --grad-bg-2a: #f5f5f5;
    --grad-bg-2b: #eaeaea;
    --grad-bg-2c: #dadada;
    --grad-bg-3a: #fafafa;
    --grad-bg-3b: #f0f0f0;
    --grad-bg-3c: #e0e0e0;
}

/* ------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    width: 100%;
    height: auto;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    color: var(--ink-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   3. Background, animated gradient + 3D canvas
   ------------------------------------------------------------ */
.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #fbfcff;
}

.gradient-layer {
    position: absolute;
    width: 170%;
    height: 170%;
    top: -35%;
    left: -35%;
    opacity: 0.18;
    will-change: transform, opacity;
}

.gradient-1 {
    background: radial-gradient(circle at 30% 40%,
        var(--grad-bg-1a) 0%,
        var(--grad-bg-1b) 30%,
        var(--grad-bg-1c) 50%,
        transparent 70%);
    animation: gradientDriftA 34s cubic-bezier(0.37, 0, 0.24, 1) infinite;
}

.gradient-2 {
    background: radial-gradient(circle at 70% 60%,
        var(--grad-bg-2a) 0%,
        var(--grad-bg-2b) 30%,
        var(--grad-bg-2c) 50%,
        transparent 70%);
    animation: gradientDriftB 42s cubic-bezier(0.37, 0, 0.24, 1) infinite;
}

.gradient-3 {
    background: radial-gradient(circle at 50% 50%,
        var(--grad-bg-3a) 0%,
        var(--grad-bg-3b) 25%,
        var(--grad-bg-3c) 40%,
        transparent 60%);
    animation: gradientDriftC 52s cubic-bezier(0.37, 0, 0.24, 1) infinite;
    opacity: 0.14;
}

@keyframes gradientDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

@keyframes gradientDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

@keyframes gradientDriftC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(1.5%, 1%, 0) scale(1.02); }
}

#three-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    /* The hero stays legible and only softens slightly as content
       panels scroll over it. */
    filter: blur(calc(var(--spiral-blur, 0) * 1px));
    transform:
        translate3d(var(--spiral-x, 0), var(--spiral-y, 0), 0)
        scale(var(--spiral-scale, 1));
    transform-origin: center;
    transition: none;
    will-change: transform, filter;
}

.presentation-helix-lockup,
.presentation-progress {
    display: none;
}

/* ------------------------------------------------------------
   3c. Laptop presentation mode
   ------------------------------------------------------------ */
@media (min-width: 769px) and (min-height: 521px) {
    html.presentation-mode {
        scroll-snap-type: none;
        overflow: hidden;
    }

    html.presentation-mode body {
        overflow: hidden;
        height: 100vh;
    }

    html.presentation-mode #page-scroll {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    html.presentation-mode #three-canvas {
        z-index: 3;
        opacity: 0.42;
        transition: none;
    }

    html.presentation-mode.presentation-title-active #three-canvas {
        opacity: 0.96;
    }

    html.presentation-mode:not(.presentation-title-active) .presentation-helix-lockup {
        position: fixed;
        top: calc(var(--space-5) + 5.75rem);
        right: calc(var(--space-5) + 3.35rem);
        z-index: 5;
        display: block;
        min-width: 4.4rem;
        font-family: var(--font-display);
        font-size: 0.82rem;
        font-weight: var(--fw-regular);
        line-height: 1;
        letter-spacing: 0.02em;
        color: color-mix(in srgb, var(--ink-strong) 68%, transparent);
        text-align: center;
        text-transform: none;
        pointer-events: none;
    }

    html.presentation-mode.presentation-last-active .presentation-helix-lockup {
        display: none;
    }

    html.presentation-mode .presentation-progress {
        position: fixed;
        right: var(--space-5);
        bottom: var(--space-5);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-width: 8.6rem;
        pointer-events: none;
        color: color-mix(in srgb, var(--ink-strong) 64%, transparent);
    }

    html.presentation-mode .presentation-progress-count {
        font-family: var(--font-mono);
        font-size: 0.68rem;
        font-weight: var(--fw-medium);
        line-height: 1;
        letter-spacing: 0.14em;
        white-space: nowrap;
    }

    html.presentation-mode .presentation-progress-rail {
        position: relative;
        flex: 1 1 auto;
        height: 1px;
        min-width: 4.6rem;
        background: color-mix(in srgb, var(--ink-strong) 16%, transparent);
        overflow: hidden;
    }

    html.presentation-mode .presentation-progress-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--presentation-progress, 0%);
        background: color-mix(in srgb, var(--violet-bright) 66%, var(--ink-strong));
        box-shadow: 0 0 12px color-mix(in srgb, var(--violet-bright) 32%, transparent);
        transition: width 260ms var(--ease);
    }

    html.presentation-mode:not(.presentation-title-active) #page-scroll::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--ink-chalk) 14%, transparent) 0%,
                color-mix(in srgb, var(--ink-chalk) 5%, transparent) 100%),
            color-mix(in srgb, var(--surface-panel) 34%, transparent);
        backdrop-filter: var(--blur-panel);
        -webkit-backdrop-filter: var(--blur-panel);
    }

    html.presentation-mode .sections-panel {
        position: static;
        z-index: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html.presentation-mode .split-row {
        display: contents;
    }

    html.presentation-mode .deck-slide {
        position: fixed;
        inset: 0;
        z-index: 2;
        min-height: 100vh;
        max-height: none;
        height: 100vh;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        filter: none;
        transition: none;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    html.presentation-mode .deck-slide.is-active {
        z-index: 4;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        filter: none;
        transition: none;
    }

    html.presentation-mode.presentation-refreshing .deck-slide {
        transition: none;
    }

    html.presentation-mode .deck-slide.content {
        display: flex;
    }

    html.presentation-mode .investor-sections.unlocked {
        display: contents;
    }

    html.presentation-mode .investor-sections.unlocked > .info-section:not(.deck-slide) {
        display: none;
    }

    html.presentation-mode .deck-slide.info-section {
        display: flex;
        padding: clamp(2rem, 4vh, 3.5rem) clamp(3rem, 6vw, 6rem);
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: center;
    }

    html.presentation-mode #gtm-section.deck-slide.info-section {
        align-items: flex-start;
        padding-top: clamp(5rem, 9vh, 7rem);
    }

    html.presentation-mode .deck-slide.split-panel {
        flex: none;
        padding: clamp(2rem, 4vh, 3.5rem) clamp(3rem, 6vw, 6rem);
    }

    html.presentation-mode .deck-slide.site-footer {
        display: flex;
        align-items: center;
        padding: clamp(2rem, 5vh, 4rem) clamp(3rem, 6vw, 6rem);
    }

    html.presentation-mode .deck-slide.is-active .info-inner,
    html.presentation-mode .deck-slide.is-active .sat-layout,
    html.presentation-mode .deck-slide.is-active .scaling-layout,
    html.presentation-mode .deck-slide.is-active .np-layout,
    html.presentation-mode .deck-slide.is-active .paradigm-layout,
    html.presentation-mode .deck-slide.is-active .npc-content,
    html.presentation-mode .deck-slide.is-active .publications-layout {
        opacity: 1;
        transform: none;
    }

    html.presentation-mode .deck-slide .info-inner {
        gap: clamp(0.8rem, 2.2vh, 1.35rem);
    }

    html.presentation-mode .deck-slide .info-inner,
    html.presentation-mode .deck-slide .sat-layout,
    html.presentation-mode .deck-slide .scaling-layout,
    html.presentation-mode .deck-slide .np-layout,
    html.presentation-mode .deck-slide .paradigm-layout,
    html.presentation-mode .deck-slide .npc-content,
    html.presentation-mode .deck-slide .publications-layout {
        transition: none;
    }

    html.presentation-mode .deck-slide.is-active .section-label,
    html.presentation-mode .deck-slide.is-active .section-label-sub,
    html.presentation-mode .deck-slide.is-active .section-title-text,
    html.presentation-mode .deck-slide.is-active .brand-title {
        animation: presentationTextIn 420ms var(--ease) both;
    }

    html.presentation-mode .deck-slide.is-active .section-desc,
    html.presentation-mode .deck-slide.is-active .brand-tagline,
    html.presentation-mode .deck-slide.is-active .investor-card-name,
    html.presentation-mode .deck-slide.is-active .investor-card-role,
    html.presentation-mode .deck-slide.is-active .investor-card-bio,
    html.presentation-mode .deck-slide.is-active .investor-summary-heading,
    html.presentation-mode .deck-slide.is-active .investor-summary-list,
    html.presentation-mode .deck-slide.is-active .investor-market-desc,
    html.presentation-mode .deck-slide.is-active .investor-step-body,
    html.presentation-mode .deck-slide.is-active .investor-phase-body {
        animation: presentationTextIn 420ms var(--ease) 110ms both;
    }

    html.presentation-mode .deck-slide.is-active canvas,
    html.presentation-mode .deck-slide.is-active .mode-toggle,
    html.presentation-mode .deck-slide.is-active .np-canvases,
    html.presentation-mode .deck-slide.is-active .publications-list,
    html.presentation-mode .deck-slide.is-active .investor-grid,
    html.presentation-mode .deck-slide.is-active .investor-summary,
    html.presentation-mode .deck-slide.is-active .investor-market,
    html.presentation-mode .deck-slide.is-active .investor-steps,
    html.presentation-mode .deck-slide.is-active .investor-phases,
    html.presentation-mode .deck-slide.is-active .investor-ask-breakdown,
    html.presentation-mode .deck-slide.is-active .investor-advisor-feature,
    html.presentation-mode .deck-slide.is-active .brand-enquiries,
    html.presentation-mode .deck-slide.is-active .scroll-hint {
        animation: presentationContentIn 480ms var(--ease) 220ms both;
    }

    html.presentation-mode.presentation-refreshing .deck-slide.is-active *,
    html.presentation-mode.presentation-title-active .deck-slide.content .bottom-branding * {
        animation-play-state: running;
    }

    @keyframes presentationTextIn {
        from {
            opacity: 0;
            filter: blur(10px);
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }
    }

    @keyframes presentationContentIn {
        from {
            opacity: 0;
            filter: blur(14px);
            transform: translateY(14px) scale(0.985);
        }
        to {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0) scale(1);
        }
    }

    html.presentation-mode .section-label {
        font-size: 0.78rem;
    }

    html.presentation-mode .section-title-text {
        font-size: clamp(1.85rem, 3.3vw, 2.75rem);
        line-height: 1.15;
        max-width: 860px;
        text-wrap: balance;
    }

    html.presentation-mode .section-desc {
        max-width: 660px;
        line-height: 1.58;
        letter-spacing: 0.08em;
    }

    html.presentation-mode .topo-canvas,
    html.presentation-mode .scaling-canvas,
    html.presentation-mode .np-canvas {
        height: min(34vh, 320px);
    }

    html.presentation-mode .paradigm-canvas,
    html.presentation-mode .optimizer-canvas,
    html.presentation-mode .chip-canvas,
    html.presentation-mode .npc-canvas {
        height: min(38vh, 340px);
    }

    html.presentation-mode .publications-list {
        margin-top: 0.4rem;
    }

    html.presentation-mode .publication-canvas {
        height: 100px;
    }

    html.presentation-mode .investor-grid {
        margin-top: 0.7rem;
    }

    html.presentation-mode .investor-card {
        padding: 0.9rem 0.85rem;
    }

    html.presentation-mode .investor-card-photo {
        width: 64px;
        height: 64px;
    }

    html.presentation-mode .investor-card-bio,
    html.presentation-mode .investor-step-body,
    html.presentation-mode .investor-market-desc,
    html.presentation-mode .investor-phase-body {
        line-height: 1.42;
    }

    html.presentation-mode .investor-market,
    html.presentation-mode .investor-steps,
    html.presentation-mode .investor-phases,
    html.presentation-mode .investor-ask-breakdown {
        margin-top: 0.75rem;
    }
}

/* ------------------------------------------------------------
   3b. Palette switcher, pill bar pinned top-right
   ------------------------------------------------------------ */
.palette-switcher {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--surface-panel);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--violet-line);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 28px -18px var(--surface-overlay);
    opacity: 0.01;
}

.palette-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.palette-option:hover {
    color: var(--ink-strong);
    background: rgba(20, 25, 46, 0.05);
}

.palette-option[aria-pressed="true"] {
    background: var(--violet-tint);
    color: var(--ink-strong);
}

.palette-option:focus-visible {
    outline: 2px solid var(--violet-bright);
    outline-offset: 2px;
}

.palette-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(14, 16, 24, 0.18);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* Signature: single burnt-sienna dot (one hero accent). */
.palette-swatch-signature {
    background: #B84A1F;
}

/* Naturalistic: 4-quadrant swatch, navy / violet / gold / sage. */
.palette-swatch-naturalistic {
    background:
        conic-gradient(from 45deg,
            #1A2C44 0deg 90deg,
            #6B5B9A 90deg 180deg,
            #C9A961 180deg 270deg,
            #6B8E6B 270deg 360deg);
}

/* Greco: 4-quadrant swatch, aegean / rose / sea green / gold. */
.palette-swatch-greco {
    background:
        conic-gradient(from 45deg,
            #4A90E2 0deg 90deg,
            #E8A5B5 90deg 180deg,
            #D4A830 180deg 270deg,
            #4AB5A7 270deg 360deg);
}

/* Greco 2: 4-quadrant swatch, sky / violet / hot pink / rose. */
.palette-swatch-greco2 {
    background:
        conic-gradient(from 45deg,
            #60A5FA 0deg 90deg,
            #8B5CF6 90deg 180deg,
            #EC4899 180deg 270deg,
            #F472B6 270deg 360deg);
}

/* Greco 3: sky above, earth below, sky blue / olive / gold / rose pink. */
.palette-swatch-greco3 {
    background:
        conic-gradient(from 45deg,
            #8FB4D4 0deg 90deg,
            #82873E 90deg 180deg,
            #C9A94A 180deg 270deg,
            #E8A5B5 270deg 360deg);
}

/* Axiom: Byrne-Euclid manuscript, ultramarine / vermilion / gold / vellum. */
.palette-swatch-axiom {
    background:
        conic-gradient(from 45deg,
            #1C2E6B 0deg 90deg,
            #C0392E 90deg 180deg,
            #D4A10F 180deg 270deg,
            #F1EADA 270deg 360deg);
    border-color: rgba(24, 20, 16, 0.4);
}

/* Monochrome: half black / half white split with a thin divider. */
.palette-swatch-monochrome {
    background: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 50%, #FAFAFA 50%, #FAFAFA 100%);
    border-color: rgba(10, 10, 10, 0.35);
}

@media (max-width: 600px) {
    .palette-switcher {
        display: none;
    }
}

/* ------------------------------------------------------------
   4. Page scaffold
   ------------------------------------------------------------ */
#page-scroll {
    position: relative;
    z-index: 1;
    width: 100%;
}

.content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ------------------------------------------------------------
   5. Hero / brand block
   ------------------------------------------------------------ */
.bottom-branding {
    position: relative;
    width: 100%;
    padding: var(--space-5) var(--space-8) var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    pointer-events: auto;
    opacity: 1;
}

.brand-identity {
    max-width: 70%;
}

.brand-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--fw-hair);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    color: var(--ink-base);
    margin-bottom: var(--space-2);
}

/* Legacy modifier kept in markup, now folds into base color */
.brand-title.dark-grey {
    color: var(--ink-base);
}

.brand-tagline {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-widest);
    color: var(--ink-muted);
}

.brand-enquiries {
    margin-top: var(--space-1);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--ink-muted);
    pointer-events: auto;
}

.enquiry-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.copy-email {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    letter-spacing: 0.18em;
    border-bottom: 1px solid rgba(50, 50, 50, 0.4);
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.copy-email:hover,
.copy-email:focus-visible {
    color: var(--ink-strong);
    border-bottom-color: var(--ink-strong);
    outline: none;
}

.copy-toast {
    position: absolute;
    left: 50%;
    bottom: 0.3rem;
    transform: translate(-50%, 6px);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-overlay);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--ls-wide);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

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

/* Scroll hint chevron */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    min-height: 2.3rem;
    padding: 0.65rem 1rem;
    background: color-mix(in srgb, var(--surface-panel) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--violet-line) 78%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: 0 14px 40px -28px rgba(20, 25, 46, 0.45);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    color: var(--ink-strong);
    cursor: pointer;
    outline: none;
    z-index: 10;
    animation: scrollHintDrift 7s cubic-bezier(0.37, 0, 0.24, 1) infinite;
    pointer-events: auto;
}

.scroll-hint svg {
    filter:
        drop-shadow(0 0 6px rgba(184, 74, 31, 0.12))
        drop-shadow(0 0 14px rgba(184, 74, 31, 0.08));
    transition: transform var(--dur-base) var(--ease);
}

.scroll-hint:hover,
.scroll-hint:focus-visible {
    border-color: color-mix(in srgb, var(--violet-label-strong) 54%, transparent);
    color: var(--ink-strong);
}

.scroll-hint:hover svg,
.scroll-hint:focus-visible svg {
    transform: translateY(2px);
}

@keyframes scrollHintDrift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.58; }
    50%      { transform: translateX(-50%) translateY(3px); opacity: 0.92; }
}

/* ------------------------------------------------------------
   6. Info section, shared frame for every panel
   ------------------------------------------------------------ */
/* Unified sections panel, one continuous glass surface spanning
   every section so there are no visible seams between them and the
   hero spiral shows through with a single consistent blur+tint. */
.sections-panel {
    position: relative;
    z-index: 2;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 18%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 8%, transparent) 34%,
            color-mix(in srgb, var(--grad-bg-1c) 72%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 18%, var(--surface-panel) 82%) 0%,
            color-mix(in srgb, var(--grad-bg-1c) 76%, color-mix(in srgb, var(--ink-chalk) 30%, var(--surface-panel) 70%)) 100%);
    backdrop-filter: var(--blur-panel);
    -webkit-backdrop-filter: var(--blur-panel);
}

.info-section {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-8);
    background: transparent;
}

/* Section dividers removed, panels transition via their tinted backgrounds. */

/* Inner content column, shared by every section */
.info-inner {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.info-section.in-view .info-inner {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------
   7. Section typography, labels, titles, body
   ------------------------------------------------------------ */
.section-label {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--violet-label);
}

.section-label-sub {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--violet-label-strong);
    margin-bottom: calc(var(--space-1) * -1);
}

.section-title-text {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--fw-hair);
    line-height: 1.25;
    letter-spacing: var(--ls-base);
    color: var(--ink-base);
}

.section-desc {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-wider);
    color: var(--ink-muted);
    max-width: 500px;
}

/* ------------------------------------------------------------
   8. Section layouts
   ------------------------------------------------------------ */

/* Scene canvases sit directly on the page, no extra panel or stage. */
.topo-canvas,
.scaling-canvas,
.np-canvas,
.paradigm-canvas,
.npc-canvas,
.optimizer-canvas,
.chip-canvas,
.publication-canvas,
.investor-frontier-canvas,
.investor-counting-canvas,
.investor-market-canvas,
.roadmap-canvas,
.investor-ask-anim {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* SAT, prose centered above the planar graph canvas */
.sat-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    max-width: 1400px;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.sat-section.in-view .sat-layout {
    opacity: 1;
    transform: scale(1);
}

.sat-layout .info-inner {
    flex: 0 0 auto;
    width: 100%;
    max-width: 760px;
    text-align: center;
    align-items: center;
    padding: 0 var(--space-4);
    opacity: 1;
    transform: none;
}

.topo-canvas {
    width: 100%;
    max-width: 1100px;
    height: 460px;
    border-radius: var(--radius-md);
    display: block;
}

/* SAT Scaling Laws, helix visualization of the 10,000× trend */
.scaling-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 1400px;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.scaling-section.in-view .scaling-layout {
    opacity: 1;
    transform: scale(1);
}

.scaling-canvas {
    width: 100%;
    max-width: 980px;
    height: 430px;
    border-radius: var(--radius-md);
    display: block;
}

@media (max-width: 900px) {
    .scaling-canvas { height: 320px; }
}
@media (max-width: 520px) {
    .scaling-canvas { height: 240px; }
}

/* NP, prose above a side-by-side comparison of two canvases */
.np-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 1400px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.np-section.in-view .np-layout {
    opacity: 1;
    transform: translateY(0);
}

.np-layout .info-inner {
    flex: 0 0 auto;
    width: 100%;
    max-width: 760px;
    text-align: center;
    align-items: center;
    opacity: 1;
    transform: none;
}

.np-canvases {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.np-canvas {
    flex: 0 1 760px;
    min-width: 0;
    width: 100%;
    max-width: 760px;
    height: 460px;
    border-radius: var(--radius-md);
    display: block;
}

/* Invisible hover trigger word, no visual styling, indistinguishable
   from surrounding body text. */
.np-hover-trigger {
    cursor: inherit;
}

/* Tally panels, one per ring, pinned at canvas TR / ML / BM so the
   three readouts ring the cog arrangement of the 3D scene. Explicit
   container width + centering so the TR/ML anchors actually land on
   the canvas edges instead of the wider .np-canvases flex row. */
.np-clocks {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 100%);
    pointer-events: none;
}

.np-clock {
    position: absolute;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 18%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 6%, transparent) 100%);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    padding: 0.45rem 0.72rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ink-chalk) 52%, var(--violet-line));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ink-chalk) 38%, transparent),
        0 12px 28px -26px color-mix(in srgb, var(--surface-overlay) 44%, transparent);
}

.np-clock[data-pos="tr"] {
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

.np-clock[data-pos="ml"] {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.np-clock[data-pos="bm"] {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.np-clock-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.np-clock-progress {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(
        var(--progress-color, var(--violet-bright)) calc(var(--progress, 0) * 1%),
        rgba(20, 25, 46, 0.08) 0
    );
    position: relative;
    flex-shrink: 0;
    transition: background 0.18s var(--ease);
}

.np-clock-progress::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--glass-panel-solid);
}

.np-clock[data-role="solver"]      { --progress-color: var(--violet-bright); }
.np-clock[data-role="transformer"] { --progress-color: rgba(110, 115, 132, 0.9); }
.np-clock[data-role="gradient"]    { --progress-color: #C9A961; }

.np-clock-name {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-soft) 82%, transparent);
    white-space: nowrap;
}

.np-clock-count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-strong);
    white-space: nowrap;
}

.np-clock-count [data-field] {
    font-weight: var(--fw-medium);
    color: var(--ink-strong);
}

@media (max-width: 720px) {
    .np-clock {
        padding: 0.4rem 0.6rem;
    }
    .np-clock-name {
        font-size: 0.5rem;
    }
    .np-clock-count {
        font-size: 0.62rem;
    }
    .np-clock[data-pos="tr"] { top: 0.6rem; right: 0.6rem; }
    .np-clock[data-pos="ml"] { left: 0.6rem; }
    .np-clock[data-pos="bm"] { bottom: 0.6rem; }
}


/* Paradigm, stacked (prose above canvas) */
.paradigm-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: 1320px;
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.paradigm-section.in-view .paradigm-layout {
    opacity: 1;
    transform: translateX(0);
}

.paradigm-layout .info-inner {
    flex: 0 0 auto;
    width: 100%;
    max-width: 720px;
    opacity: 1;
    transform: none;
}

.paradigm-canvas {
    width: 100%;
    height: 460px;
    min-width: 280px;
    border-radius: var(--radius-md);
    display: block;
}

/* NPC, full-width hero canvas with prose above */
.npc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.npc-section.in-view .npc-content {
    opacity: 1;
    transform: scale(1);
}

.npc-content .section-label {
    margin-bottom: var(--space-6);
}

.npc-content .section-title-text {
    margin-bottom: var(--space-6);
}

.npc-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin-top: var(--space-2);
    margin-inline: auto;
}

.npc-canvas {
    width: 100%;
    max-width: 1100px;
    height: 760px;
    border-radius: var(--radius-md);
    display: block;
}

/* Static label pinned over the central SAT orb, the orb is a solid
   anchor in the middle of the canvas, so sitting the label on top of
   it keeps the copy big and readable without any size flicker from
   orbiting planets. Fully transparent body; the whole border takes
   on the active planet's accent color. */
.npc-label {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.62rem 1.25rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 24%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 8%, transparent) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--ink-chalk) 58%, var(--npc-label-color, var(--violet-bright)));
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ink-chalk) 46%, transparent),
        0 14px 30px -26px color-mix(in srgb, var(--surface-overlay) 46%, transparent),
        0 0 0 1px color-mix(in srgb, var(--npc-label-color, var(--violet-bright)) 18%, transparent);
    pointer-events: none;
    text-align: center;
    transition: border-color 0.28s var(--ease);
    overflow: hidden;
    isolation: isolate;
}

.npc-label-sub {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--npc-label-color, var(--ink-soft));
    white-space: nowrap;
    margin-bottom: 0.28rem;
    transition: color 0.28s var(--ease);
}

.npc-label-name {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: var(--fw-medium);
    color: var(--ink-strong);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .npc-content .section-title-text {
        max-width: 14rem;
        margin-inline: auto;
    }

    .npc-label {
        padding: 0.6rem 0.95rem;
    }
    .npc-label-sub { font-size: 0.6rem; }
    .npc-label-name { font-size: 0.82rem; }
}

/* Product panel, sits between the Split row and Publications. Three
   pricing tiers render as a row of cards at the top; explanatory
   prose sits below. Flex (not grid) with flex:1 ensures three equal
   columns in one row regardless of parent's align-items. */
.product-section .info-inner {
    max-width: 1040px;
    gap: 0.7rem;
    /* Override the default .info-inner's align-items: center so the
       child tiers row stretches the full width instead of shrinking
       to its content. */
    align-items: stretch !important;
}

.product-tiers {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0.2rem;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.product-tier {
    flex: 1 1 0 !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    text-align: left;
    box-sizing: border-box;
    box-shadow: var(--glass-panel-shadow);
}

.product-tier,
.npc-label,
.publication-card,
.investor-card,
.investor-advisor-screen,
.investor-summary-block,
.investor-ask-content,
.investor-phases li,
.investor-list-item,
.investor-step,
.investor-market-tier {
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-rim), var(--glass-panel-shadow);
}

.product-tier::before,
.npc-label::before,
.publication-card::before,
.investor-card::before,
.investor-advisor-screen::before,
.investor-summary-block::before,
.investor-ask-content::before,
.investor-phases li::before,
.investor-list-item::before,
.investor-step::before,
.investor-market-tier::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--glass-panel-sheen),
        radial-gradient(circle at 78% 82%,
            color-mix(in srgb, var(--accent-blue) 5%, transparent) 0%,
            transparent 38%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 10%, transparent) 0%,
            transparent 24%,
            color-mix(in srgb, var(--ink-chalk) 2%, transparent) 100%);
    pointer-events: none;
    opacity: 0.74;
}

.product-tier > *,
.npc-label > *,
.publication-card > *,
.investor-card > *,
.investor-summary-block > *,
.investor-ask-content > *,
.investor-phases li > *,
.investor-list-item > *,
.investor-step > *,
.investor-market-tier > * {
    position: relative;
    z-index: 1;
}

.npc-label {
    position: absolute;
    z-index: 3;
}

/* Keep labels/titles centered even though their flex parent now
   uses align-items: stretch. */
.product-section .info-inner > .section-label,
.product-section .info-inner > .section-title-text,
.product-section .info-inner > .section-desc {
    align-self: center;
    text-align: center;
}

.product-tier-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-label);
}

.product-tier-desc {
    font-family: var(--font-body);
    line-height: 1.45;
    color: var(--ink-muted);
    margin: 0;
}

.section-desc-footnote {
    margin-top: 0.4rem;
    color: var(--ink-muted);
    text-align: center;
    max-width: 820px;
}

@media (max-width: 768px) {
    .product-tiers { flex-direction: column !important; gap: 0.6rem; }
}

/* 14" and smaller: shrink tier padding so the three cards + title +
   footnote reliably fit inside 100vh. */
@media (max-width: 1600px) and (min-width: 769px) {
    .product-section .info-inner { gap: 0.6rem; }
    .product-tiers { margin: 0.2rem 0 0.1rem; gap: 0.7rem; }
    .product-tier { padding: 0.7rem 0.85rem; gap: 0.3rem; }
}

/* Publications, technical memos and papers list */
.publications-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: 1100px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.publications-section.in-view .publications-layout {
    opacity: 1;
    transform: translateY(0);
}

/* Tighter spacing between NPC and Publications sections */
#publications-section {
    min-height: 0;
    padding-top: var(--space-4);
}
#npc-section {
    padding-bottom: var(--space-6);
}

.publications-layout .info-inner {
    flex: 0 0 auto;
    width: 100%;
    max-width: 720px;
    text-align: center;
    align-items: center;
    opacity: 1;
    transform: none;
}

.publications-list {
    list-style: none;
    padding: var(--space-2) var(--space-4) var(--space-4);
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar, swipe/scroll still works, just no track. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.publications-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Flexible spacers keep the row centered when it fits; they collapse to
   zero width once the list overflows, so everything stays scrollable. */
.publications-list::before,
.publications-list::after {
    content: "";
    flex: 1 0 0;
    min-width: 0;
}

.publication-card {
    flex: 0 0 320px;
    max-width: 320px;
    scroll-snap-align: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    background: var(--glass-panel-fill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-base) var(--ease),
        border-color var(--dur-base) var(--ease),
        box-shadow var(--dur-base) var(--ease),
        background var(--dur-base) var(--ease);
    box-shadow: none;
}

.publication-canvas {
    display: block;
    width: 100%;
    height: 180px;
    border-bottom: 1px solid var(--glass-panel-border);
    background: linear-gradient(180deg,
            rgba(184, 74, 31, 0.05),
            rgba(58, 95, 168, 0.04));
}

.publication-card:hover {
    transform: translateY(-2px);
    border-color: var(--violet-label);
    background: var(--glass-panel-hover);
    box-shadow: none;
}

.publication-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    text-decoration: none;
    color: inherit;
}

.publication-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

.publication-type {
    color: var(--violet-label-strong);
}

.publication-date {
    color: var(--ink-soft);
}

.publication-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-base);
    color: var(--ink-strong);
    line-height: 1.35;
    margin: 0;
}

.publication-abstract {
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-base);
    color: var(--ink-muted);
    margin: 0;
    max-width: none;
}

.publication-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--violet-bright);
    transition: gap var(--dur-base) var(--ease);
}

.publication-card:hover .publication-action {
    gap: var(--space-3);
}

/* Split row, Optimizer + Chip side-by-side */
.split-row {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
}

.split-panel {
    flex: 1;
    min-height: 0;
    min-width: 0;
    /* Anchor both panels to the top so their first label sits on the same Y line
       regardless of the extra mode-toggle the optimizer panel carries. Height is
       driven by content rather than the viewport so there's no dead space under
       the row before the next section starts. */
    align-items: flex-start;
    padding: 7rem 3rem 6rem;
}

.split-panel + .split-panel {
    border-left: 0;
    box-shadow: none;
}

.split-panel .info-inner {
    max-width: 620px;
}

.split-panel .section-desc {
    max-width: 440px;
}

.optimizer-canvas {
    width: 100%;
    height: 560px;
    margin-top: var(--space-2);
    border-radius: var(--radius-md);
    display: block;
}

.chip-canvas {
    width: 100%;
    height: 500px;
    /* Modest top offset to sit below the description. Previously matched
       the optimizer panel's mode-toggle height for horizontal canvas
       alignment, that alignment is relaxed here to let the chip visual
       sit closer to its copy. */
    margin-top: var(--space-5);
    border-radius: var(--radius-md);
    display: block;
}

/* ------------------------------------------------------------
   9. Mode toggle (used inside Optimizer panel)
   ------------------------------------------------------------ */
.mode-toggle {
    display: flex;
    padding: 3px;
    background: var(--glass-panel-fill);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-panel-shadow);
}

.mode-btn {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: rgba(20, 25, 46, 0.52);
    background: none;
    border: 0;
    padding: 0.38rem var(--space-4);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.mode-btn.active {
    background: var(--violet-tint);
    color: var(--violet-label);
}

/* ------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------ */
.site-footer {
    position: relative;
    z-index: 2;
    padding: 3.5rem var(--space-8) var(--space-6);
    background: var(--surface-panel);
    backdrop-filter: var(--blur-panel);
    -webkit-backdrop-filter: var(--blur-panel);
    color: var(--ink-muted);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
}

.footer-brand {
    flex: 1;
    min-width: 240px;
}

.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-mark {
    width: 4rem;
    height: 4rem;
    display: block;
    object-fit: contain;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    color: var(--ink-base);
}

.footer-tagline {
    margin-top: var(--space-2);
    max-width: 320px;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--ink-soft);
}

.footer-columns {
    display: flex;
    gap: var(--space-10);
}

.footer-col {
    min-width: 140px;
}

.footer-heading {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--violet-label);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.45rem;
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: var(--fw-regular);
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.footer-links a {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--violet-label-strong);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.footer-links a:hover {
    color: var(--violet-bright);
}

.footer-bottom {
    width: 100%;
    margin-top: var(--space-4);
    padding-top: var(--space-5);
}

.footer-bottom p {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    color: var(--ink-faint);
}

/* ------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .sat-layout {
        flex-direction: column;
        gap: var(--space-3);
    }

    .sat-layout .info-inner {
        width: 100%;
        max-width: 620px;
        margin: 0;
    }

    .topo-canvas {
        width: 100%;
        height: 340px;
    }

    .np-layout .info-inner {
        width: 100%;
        max-width: 620px;
    }

    .np-canvases {
        flex-direction: column;
    }

    .np-canvas {
        width: 100%;
        height: 380px;
    }

    .paradigm-layout .info-inner {
        max-width: 620px;
    }

    .paradigm-canvas {
        height: 460px;
    }

    .split-row {
        flex-direction: column;
    }

    .split-panel {
        min-height: auto;
    }

    /* Panels stack vertically below this width, so the optimizer/chip
       canvas-alignment offset isn't needed anymore. */
    .chip-canvas {
        margin-top: var(--space-2);
    }

    .split-panel + .split-panel {
        border-top: 0;
    }

    .split-panel .info-inner {
        max-width: 620px;
    }

    .split-panel .section-desc {
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .info-section {
        padding: var(--space-10) var(--space-5);
    }

    .content {
        justify-content: flex-end;
    }

    .bottom-branding {
        padding: var(--space-4) var(--space-5) 6.5rem;
        gap: 0.4rem;
    }

    .brand-identity {
        max-width: 90%;
    }

    .brand-title {
        font-size: clamp(1.6rem, 5vw, 2.5rem);
        margin-bottom: var(--space-1);
    }

    .brand-tagline {
        font-size: 0.8rem;
    }

    .brand-enquiries {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.74rem;
    }

    .scroll-hint {
        position: absolute;
        bottom: max(1.15rem, env(safe-area-inset-bottom));
        width: 3rem;
        min-width: 3rem;
        height: 2.1rem;
        min-height: 2.1rem;
        padding: 0;
        margin-top: 0;
    }

    .optimizer-canvas {
        height: 500px;
    }

    .chip-canvas {
        height: 460px;
    }

    .publication-link {
        padding: var(--space-4) var(--space-5);
    }

    .publication-title {
        font-size: 1.08rem;
    }

    .publication-meta {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .publication-card {
        flex: 0 0 280px;
        max-width: 280px;
    }

    .publication-canvas {
        height: 160px;
    }

    .site-footer {
        padding: var(--space-8) var(--space-5) var(--space-5);
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo-row {
        justify-content: center;
    }

    .footer-columns {
        flex-direction: column;
        gap: var(--space-5);
        align-items: center;
        width: 100%;
    }

    .footer-col {
        text-align: center;
        width: 100%;
    }
}

/* Phone-specific tightening, short viewports, narrow canvases */
@media (max-width: 520px) {
    .info-section {
        padding: 3rem 1rem;
    }

    .split-panel {
        padding: 4rem 1.25rem 3rem;
    }

    .np-canvases {
        gap: var(--space-4);
    }

    .np-canvas {
        height: 260px;
    }

    .paradigm-canvas {
        height: 240px;
    }

    .topo-canvas {
        height: 180px;
    }

    .npc-canvas {
        height: 320px;
    }

    .optimizer-canvas {
        height: 260px;
    }

    .chip-canvas {
        height: 230px;
    }

    .publication-canvas {
        height: 120px;
    }

    .section-title-text {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}

/* ------------------------------------------------------------
   Investor Portal, closed-source, password-gated overlay
   ------------------------------------------------------------ */
.fixed-control-panel {
    background: var(--glass-panel-fill);
    border: 1px solid var(--glass-panel-border);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-rim), var(--glass-panel-shadow);
    overflow: hidden;
    isolation: isolate;
}

.fixed-control-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        var(--glass-panel-sheen),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 8%, transparent) 0%,
            transparent 28%,
            color-mix(in srgb, var(--ink-chalk) 2%, transparent) 100%);
    opacity: 0.64;
    pointer-events: none;
}

.investor-trigger {
    position: fixed;
    top: var(--space-5);
    left: var(--space-5);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.investor-trigger > * {
    position: relative;
    z-index: 1;
}

.investor-trigger:hover {
    color: var(--violet-label);
    border-color: var(--violet-label);
}

.investor-trigger-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet-label);
    box-shadow: 0 0 8px var(--violet-label);
}

.investor-trigger.unlocked .investor-trigger-dot {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

.investor-modal {
    position: fixed;
    top: var(--visual-viewport-offset-top, 0);
    left: 0;
    right: 0;
    bottom: auto;
    min-height: var(--visual-viewport-height, 100dvh);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(14, 16, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.investor-modal.open {
    display: flex;
}

.investor-modal-inner {
    position: relative;
    width: min(420px, 90vw);
    max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem);
    overflow-y: auto;
    padding: 2.4rem 2rem 1.8rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px -24px var(--surface-overlay);
}

.investor-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    transition: color var(--dur-base) var(--ease);
}

.investor-close:hover {
    color: var(--ink-strong);
}

.investor-modal-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0 0 0.4rem;
}

.investor-modal-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin: 0 0 1.3rem;
}

.investor-form {
    display: flex;
    gap: 0.6rem;
}

.investor-input {
    flex: 1;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--ink-strong);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--violet-line);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--dur-base) var(--ease);
}

.investor-input:focus {
    border-color: var(--violet-label);
}

.investor-submit {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--violet-label);
    background: var(--violet-tint);
    border: 1px solid var(--violet-label);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease);
}

.investor-submit:hover {
    background: var(--violet-line);
}

.investor-error {
    min-height: 1.2em;
    margin: 0.7rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #c94a4a;
}

@media (max-width: 640px) {
    .investor-modal {
        align-items: flex-start;
        justify-content: center;
        padding: calc(env(safe-area-inset-top) + 4.5rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);
    }

    .investor-modal-inner {
        width: min(100%, 360px);
        max-height: calc(var(--visual-viewport-height, 100dvh) - 5.5rem);
        padding: 1.55rem 1.1rem 1.15rem;
        border-radius: 16px;
    }

    .investor-modal-title {
        font-size: 1.12rem;
    }

    .investor-modal-desc {
        margin-bottom: 1rem;
    }

    .investor-form {
        flex-direction: column;
        gap: 0.55rem;
    }

    .investor-input,
    .investor-submit {
        width: 100%;
        box-sizing: border-box;
    }

    .investor-submit {
        min-height: 2.65rem;
    }
}

/* Hidden investor content, revealed on successful unlock */
.investor-sections {
    display: none;
}

.investor-sections.unlocked {
    display: block;
}

/* Angel Investors panel, hidden unless the full-access code was used */
.investor-sections .investor-angels-section {
    display: none;
}

.investor-sections.show-angels .investor-angels-section {
    display: flex;
}

/* Valiant advisor image, swap between investor and echea variants
   based on access level (show-angels class = Level Echea). */
.investor-sections .investor-advisor-screen-echea {
    display: none;
}
.investor-sections.show-angels .investor-advisor-screen-investor {
    display: none;
}
.investor-sections.show-angels .investor-advisor-screen-echea {
    display: block;
}

.investor-advisor-screen.investor-advisor-screen-investor {
    max-width: 340px;
}

.investor-section {
    padding: var(--space-12) var(--space-8);
    border-top: 1px dashed var(--violet-line);
    opacity: 1;
    transform: none;
    transition: none;
}

.investor-sections.unlocked .investor-section {
    opacity: 1;
    transform: none;
}

.investor-section .info-inner {
    opacity: 1;
    transform: none;
    transition: none;
}

.investor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.investor-card {
    padding: 1.4rem 1.2rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    display: grid;
    /* 1fr spacers on each side push the photo+logos pair to the
       horizontal center of the card's top row. */
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: 0.4rem 0.9rem;
    box-shadow: var(--glass-panel-shadow);
}

#team-section .investor-card {
    box-shadow: none;
}

.investor-card-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    color: var(--violet-label);
    background: var(--violet-tint);
    border: 1px solid var(--violet-line);
    border-radius: 50%;
    margin-bottom: 0.9rem;
}

.investor-card-photo {
    width: 95px;
    height: 95px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--violet-line);
    background: var(--violet-tint);
    display: block;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-self: center;
}

/* Advisor feature, full-bleed photo framed like a laptop screen with
   soft rounded edges and a subtle glass border. */
.investor-advisor-feature {
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.investor-advisor-screen {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    border-radius: 18px;
    background: var(--glass-panel-fill);
    border: 1px solid var(--glass-panel-border);
    box-shadow: var(--glass-panel-shadow);
}

.investor-advisor-feature figcaption {
    max-width: 720px;
    text-align: center;
}

.investor-advisor-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0 0 0.3rem;
}

.investor-advisor-role {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin: 0 0 0.6rem;
}

.investor-advisor-note {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--violet-label);
    margin: 0;
}

.investor-frontier-canvas {
    width: 100%;
    max-width: 960px;
    height: 280px;
    display: block;
    margin: 1.5rem 0;
}

.investor-competitors-section .info-inner {
    max-width: 1040px;
}

.competitor-map {
    position: relative;
    width: min(100%, 900px);
    height: 460px;
    margin: 1.6rem auto 1rem;
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 18% 14%,
            color-mix(in srgb, var(--ink-chalk) 34%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 10%, transparent) 22%,
            transparent 56%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink-chalk) 34%, transparent) 0%,
            color-mix(in srgb, var(--ink-chalk) 16%, transparent) 100%),
        var(--glass-panel-fill);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-rim), var(--glass-panel-shadow);
    overflow: hidden;
}

.competitor-map::before,
.competitor-map::after {
    content: "";
    position: absolute;
    inset: 56px 64px;
    border-left: 1px solid var(--violet-line);
    border-bottom: 1px solid var(--violet-line);
    opacity: 0.75;
}

.competitor-map::after {
    border: 0;
    background-image:
        linear-gradient(var(--violet-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--violet-line) 1px, transparent 1px);
    background-size: 25% 25%;
    opacity: 0.28;
}

.competitor-grid-line {
    position: absolute;
    background: var(--violet-line);
    opacity: 0.7;
}

.competitor-grid-line-x {
    left: 64px;
    right: 64px;
    top: 50%;
    height: 1px;
}

.competitor-grid-line-y {
    top: 56px;
    bottom: 56px;
    left: 50%;
    width: 1px;
}

.competitor-axis-label {
    position: absolute;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-label-strong);
    pointer-events: none;
}

.competitor-axis-label-left {
    left: 74px;
    bottom: 24px;
}

.competitor-axis-label-right {
    right: 22px;
    bottom: 24px;
}

.competitor-axis-label-top {
    left: 24px;
    top: 24px;
}

.competitor-axis-label-bottom {
    left: 24px;
    bottom: 70px;
}

.competitor-marker {
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    z-index: 3;
    transform: translate(-50%, 50%);
    max-width: 128px;
    padding: 0.42rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--violet-bright) 26%, var(--glass-panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--violet-bright) 10%, white);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--surface-overlay) 8%, transparent),
        0 0 0 1px color-mix(in srgb, var(--ink-chalk) 70%, transparent) inset;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--fw-medium);
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--violet-bright) 62%, var(--ink-strong));
    white-space: normal;
}

.competitor-marker-primary {
    padding: 0.58rem 0.82rem;
    background: color-mix(in srgb, var(--violet-bright) 22%, white);
    border-color: color-mix(in srgb, var(--violet-bright) 52%, var(--glass-panel-border));
    color: color-mix(in srgb, var(--violet-bright) 74%, var(--ink-strong));
    font-size: 0.78rem;
    box-shadow:
        0 16px 36px color-mix(in srgb, var(--violet-bright) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--ink-chalk) 70%, transparent) inset;
}

.competitor-marker-formal {
    background: color-mix(in srgb, var(--violet-bright) 14%, white);
}

.competitor-marker-lab {
    background: color-mix(in srgb, var(--violet-bright) 7%, white);
}

.competitor-note {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .investor-competitors-section {
        padding-top: calc(var(--space-12) + 2.5rem);
    }

    .competitor-map {
        height: 420px;
        margin-top: 1.2rem;
    }

    .competitor-map::before,
    .competitor-map::after {
        inset: 48px 18px;
    }

    .competitor-grid-line-x {
        left: 18px;
        right: 18px;
    }

    .competitor-grid-line-y {
        top: 48px;
        bottom: 48px;
    }

    .competitor-axis-label {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    .competitor-axis-label-left {
        left: 22px;
        bottom: 18px;
    }

    .competitor-axis-label-right {
        right: 18px;
        bottom: 18px;
    }

    .competitor-axis-label-top {
        left: 18px;
        top: 18px;
    }

    .competitor-axis-label-bottom {
        left: 18px;
        bottom: 52px;
    }

    .competitor-marker {
        max-width: 86px;
        padding: 0.34rem 0.42rem;
        font-size: 0.52rem;
        letter-spacing: 0.04em;
    }

    .competitor-marker-primary {
        font-size: 0.62rem;
    }
}


.investor-counting-canvas {
    width: 100%;
    max-width: 820px;
    height: 260px;
    display: block;
    margin: 1.2rem 0;
}

/* Executive Summary, final investor appendix panel */
.investor-summary {
    margin-top: 1.8rem;
    display: grid;
    gap: 1.2rem;
    text-align: left;
    width: 100%;
    max-width: 860px;
}

.investor-summary-block {
    padding: 1.3rem 1.5rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-panel-shadow);
}

.investor-summary-heading {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-label);
    margin: 0 0 0.9rem;
}

.investor-summary-block p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-strong);
    margin: 0;
}

.investor-summary-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.investor-summary-list li {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-strong);
}

.investor-summary-list ul {
    list-style: circle;
    padding-left: 1.2rem;
    margin: 0.45rem 0 0;
    display: grid;
    gap: 0.35rem;
}

/* Common Objections, long-form paragraphs per objection */
.investor-objection {
    margin-top: 1.3rem;
    padding-top: 1.3rem;
    border-top: 1px dashed var(--violet-line);
}
.investor-objection:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.investor-objection-quote {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--violet-label);
    margin: 0 0 0.8rem;
    line-height: 1.4;
}

.investor-objection p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ink-strong);
    margin: 0 0 0.9rem;
}
.investor-objection p:last-child { margin-bottom: 0; }

.investor-objection ul {
    list-style: disc;
    padding-left: 1.3rem;
    margin: 0 0 0.9rem;
    display: grid;
    gap: 0.55rem;
}
.investor-objection ul li {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-strong);
}

/* Level-Echea-only content, hidden unless show-angels is active */
.investor-sections .investor-summary-echea-only {
    display: none;
}
.investor-sections.show-angels .investor-summary-echea-only {
    display: block;
}

/* Executive Summary is Echea-level only (due-diligence for top VCs) */
.investor-sections .investor-summary-section {
    display: none;
}
.investor-sections.show-angels .investor-summary-section {
    display: flex;
}

/* The Ask, funding breakdown */
.investor-ask-breakdown {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    width: 100%;
}

/* Requirements panel uses a 2×2 grid, so its info-inner breaks out
   of the default 620px text column and uses the full horizontal
   space of the panel. */
.info-inner:has(> .investor-ask-breakdown) {
    max-width: 1000px;
}

.investor-ask-breakdown li {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1.3rem;
    align-items: center;
    /* Canvas sits outside, no glass styling on the row itself. */
    background: transparent;
    border: 0;
    padding: 0;
}

.investor-ask-anim {
    width: 90px;
    height: 90px;
    display: block;
}

.investor-ask-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.3rem;
    align-items: center;
    padding: 1.2rem 1.4rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-panel-shadow);
}

.investor-ask-amount {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--fw-regular);
    color: var(--violet-label);
    min-width: 7.5em;
    line-height: 1.2;
}

.investor-ask-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

@media (max-width: 640px) {
    .investor-ask-breakdown {
        grid-template-columns: 1fr;
    }
    .investor-ask-breakdown li {
        grid-template-columns: 64px 1fr;
    }
    .investor-ask-anim { width: 64px; height: 64px; }
    .investor-ask-content {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 1rem 1.1rem;
    }
}

/* Roadmap, animated phase graph */
.roadmap-canvas {
    width: 100%;
    max-width: 900px;
    height: 220px;
    margin: 1.8rem 0 1.5rem;
    display: block;
    border-radius: var(--radius-md);
}

.investor-phases {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.investor-phases li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem 1.3rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-panel-shadow);
}

.investor-phase-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet-label);
}

.investor-phase-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0 0 0.3rem;
}

.investor-phase-body {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-muted);
    margin: 0;
}

.investor-card-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0.8rem 0 0;
    grid-column: 1 / -1;
    grid-row: 2;
}

.investor-card-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet-label);
    margin: 0 0 0.4rem;
    grid-column: 1 / -1;
    grid-row: 3;
}

.investor-card-bio {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--violet-line);
}

/* Logos, horizontal row sitting to the right of the profile photo so
   they don't consume a separate vertical strip. Flex-wrap lets 3 logos
   flow to a second line if the card column is narrow. */
.investor-card-logos {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    gap: 0.4rem 0.5rem;
    max-width: 140px;
}

.investor-card-logos img {
    height: 26px;
    width: auto;
    max-width: 64px;
    object-fit: contain;
    opacity: 0.85;
    filter: saturate(0.85);
    transition: opacity var(--dur-base) var(--ease);
}

.investor-card-logos img:hover {
    opacity: 1;
}

.investor-card-logos img.logo-rounded {
    border-radius: 5px;
}

.investor-card-logos img.logo-small {
    height: 20px;
    max-width: 50px;
}

.investor-card-logos img.logo-large {
    height: 30px;
    max-width: 72px;
}

.investor-list {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    gap: 0.9rem;
}

.investor-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--glass-panel-shadow);
}

.investor-list-name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-strong);
}

.investor-list-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.investor-steps {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 1.2rem;
    counter-reset: step;
}

.investor-step {
    display: flex;
    gap: 1.2rem;
    padding: 1.3rem 1.4rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-panel-shadow);
}

.investor-step-num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--violet-label);
    flex-shrink: 0;
}

.investor-step-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0 0 0.4rem;
}

/* Phase badge, pill sitting above the step title that marks whether
   the vertical is a priority beachhead or a future expansion market. */
.investor-step-phase {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    margin-bottom: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 1px solid var(--violet-line);
}

.investor-step-phase-now {
    background: var(--violet-tint);
    color: var(--violet-label);
    border-color: var(--violet-label);
}

.investor-step-phase-later {
    background: transparent;
    color: var(--ink-muted);
}

/* Visual hierarchy: priority step reads brighter; future steps sit
   back via a subtle opacity dial, still fully readable but clearly
   secondary to Chip Design. */
.investor-step-priority {
    border-color: var(--violet-label);
    box-shadow: 0 6px 22px -14px var(--surface-overlay);
}

.investor-step-future {
    opacity: 0.78;
}
.investor-step-future:hover {
    opacity: 1;
}

.investor-step-body {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 0 0 0.8rem;
}

.investor-step-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--violet-line);
}

.investor-step-logos img {
    height: 25px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 0.8;
    filter: saturate(0.85);
    transition: opacity var(--dur-base) var(--ease);
}

.investor-step-logos img:hover {
    opacity: 1;
}

.investor-step-logos img.logo-rounded {
    border-radius: 8px;
}

.investor-step-logos img.logo-large {
    height: 64px;
    max-width: 220px;
}

.investor-step-logos img.logo-amd {
    height: 22px;
    max-width: 100px;
}

.investor-step-logos-empty {
    padding: 0.5rem 0 0;
    border-top: 1px dashed var(--violet-line);
    justify-content: center;
}

.investor-step-logos-placeholder {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    opacity: 0.6;
    padding-top: 0.5rem;
    text-align: center;
    width: 100%;
}

/* Market Size, 3 columns; each column has an animation above,
   then a text panel below. Canvases sit outside the glass panels.
   Widen beyond the default info-inner so 3 panels get real room. */
.investor-section:has(.investor-market) .info-inner {
    max-width: 1400px;
    width: 100%;
}

.investor-market {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: stretch;
    width: 100%;
}

.investor-market-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.investor-market-canvas {
    width: 100%;
    height: 280px;
    display: block;
    background: transparent;
}

.investor-market-col .investor-market-tier {
    flex: 1;
}

@media (max-width: 900px) {
    .investor-market {
        grid-template-columns: 1fr;
    }
}

.investor-market-tier {
    position: relative;
    padding: 1.5rem 1.5rem 1.7rem;
    background: var(--glass-panel-fill);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--glass-panel-shadow);
}

.investor-market-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-label);
    margin: 0;
}

.investor-market-size {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.5rem;
}

.investor-market-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--fw-regular);
    color: var(--ink-strong);
    margin: 0 0 0.5rem;
}

.investor-market-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-muted);
    margin: 0;
}

/* Escalating emphasis, TAM gets the boldest treatment */
.investor-market-sam {
    padding: 1.8rem 1.9rem;
    border-color: color-mix(in srgb, var(--violet-label) 40%, var(--violet-line));
}

.investor-market-tam {
    padding: 2.1rem 2rem;
    border-color: var(--violet-label);
    background: var(--glass-panel-hover);
    box-shadow: var(--glass-panel-rim), 0 14px 36px -24px color-mix(in srgb, var(--surface-overlay) 62%, transparent);
}

.investor-market-tam .investor-market-size {
    color: var(--violet-label);
}


.investor-milestones {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink-strong);
}

.investor-milestones li {
    padding: 0.7rem 1rem;
    border-left: 2px solid var(--violet-label);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.investor-milestone-date {
    display: inline-block;
    min-width: 5em;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    color: var(--violet-label);
    margin-right: 0.8rem;
}

@media (max-width: 520px) {
    .investor-trigger-label { display: none; }
    .investor-trigger {
        top: max(0.7rem, env(safe-area-inset-top));
        left: var(--space-3);
        width: 2rem;
        height: 2rem;
        justify-content: center;
        padding: 0;
    }
}

/* Reading-mode switch (Brief / Technical). Sits to the right of the
   Log in trigger. Padding/font match .investor-trigger exactly so the
   outer heights line up; container padding is zero so the inner
   buttons span the full height. */
.reading-mode-switch {
    position: fixed;
    top: calc(var(--space-5) + 40px);
    left: var(--space-5);
    z-index: 20;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: var(--radius-md);
}

.reading-mode-option,
.slide-jump-link {
    position: relative;
    z-index: 1;
}

.reading-mode-option {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.reading-mode-option:hover {
    color: var(--ink-strong);
}

.reading-mode-option[aria-pressed="true"] {
    background: var(--violet-tint);
    color: var(--ink-strong);
}

.reading-mode-option:focus-visible {
    outline: 2px solid var(--violet-bright);
    outline-offset: -2px;
}

.slide-jump-panel {
    position: fixed;
    top: calc(var(--space-5) + 84px);
    left: var(--space-5);
    z-index: 20;
    width: auto;
    min-width: 0;
    padding: 0.5rem 0.55rem;
    border-radius: var(--radius-md);
}

.slide-jump-toggle,
.slide-jump-links,
.slide-jump-link {
    position: relative;
    z-index: 1;
}

.slide-jump-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.9rem;
    width: 100%;
    padding: 0.12rem 0.08rem;
    border: 0;
    background: transparent;
    color: var(--greco-olive);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.slide-jump-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    width: min(116px, calc(100vw - var(--space-10)));
    margin-top: 0.45rem;
}

.slide-jump-panel[data-open="true"] .slide-jump-links,
.slide-jump-panel[data-hover-open="true"] .slide-jump-links,
.slide-jump-panel:focus-within .slide-jump-links {
    display: flex;
}

.slide-jump-panel[data-open="true"],
.slide-jump-panel[data-hover-open="true"],
.slide-jump-panel:focus-within {
    width: min(132px, calc(100vw - var(--space-10)));
    padding: 0.6rem 0.65rem 0.7rem;
}

.slide-jump-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.8rem;
    padding: 0.25rem 0.55rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--glass-panel-border) 88%, transparent);
    background: color-mix(in srgb, var(--ink-chalk) 6%, transparent);
    color: var(--greco-olive);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.slide-jump-link-investor {
    display: none;
}

.slide-jump-panel[data-access-level="investor"] .slide-jump-link-investor[data-access="investor"],
.slide-jump-panel[data-access-level="full"] .slide-jump-link-investor[data-access="investor"],
.slide-jump-panel[data-access-level="full"] .slide-jump-link-investor[data-access="full"] {
    display: inline-flex;
}

.slide-jump-toggle:hover,
.slide-jump-toggle:focus-visible {
    color: color-mix(in srgb, var(--greco-olive) 72%, var(--ink-strong));
    background: transparent;
    transform: translateY(-1px);
    outline: none;
}

.slide-jump-link:hover,
.slide-jump-link:focus-visible {
    color: var(--ink-strong);
    border-color: var(--greco-olive);
    background: color-mix(in srgb, var(--violet-tint) 56%, transparent);
    transform: translateY(-1px);
    outline: none;
}

@media (min-width: 1680px) {
    .slide-jump-panel {
        width: min(132px, calc(100vw - var(--space-10)));
        padding: 0.6rem 0.65rem 0.7rem;
    }
    .slide-jump-toggle {
        display: none;
    }
    .slide-jump-links {
        display: flex;
        width: min(116px, calc(100vw - var(--space-10)));
        margin-top: 0;
    }
}

/* Variant visibility, sections tag their copy with data-mode,
   and the active mode on <html> hides the other. */
html[data-reading-mode="brief"] [data-mode="technical"] { display: none !important; }
html[data-reading-mode="technical"] [data-mode="brief"] { display: none !important; }

@media (max-width: 640px) {
    .reading-mode-switch {
        left: calc(var(--space-3) + 2.35rem);
        top: max(0.7rem, env(safe-area-inset-top));
    }
    .reading-mode-option { min-height: 2rem; padding: 0 0.68rem; font-size: 0.66rem; }
    .slide-jump-panel {
        top: max(0.7rem, env(safe-area-inset-top));
        right: var(--space-3);
        left: auto;
        padding: 0.3rem 0.55rem;
    }
    .slide-jump-panel[data-open="true"],
    .slide-jump-panel[data-hover-open="true"],
    .slide-jump-panel:focus-within {
        width: min(128px, calc(100vw - var(--space-6)));
        padding: 0.55rem 0.6rem 0.65rem;
    }
    .slide-jump-links {
        width: min(112px, calc(100vw - var(--space-6)));
    }
}

@media (max-width: 520px) {
    .reading-mode-switch {
        left: calc(var(--space-3) + 2.35rem);
        top: max(0.7rem, env(safe-area-inset-top));
    }
    .reading-mode-option { min-height: 2rem; padding: 0 0.54rem; font-size: 0.61rem; }
    .slide-jump-panel {
        top: max(0.7rem, env(safe-area-inset-top));
        right: var(--space-3);
        left: auto;
        padding: 0.26rem 0.48rem;
    }
    .slide-jump-panel[data-open="true"],
    .slide-jump-panel[data-hover-open="true"],
    .slide-jump-panel:focus-within {
        width: min(122px, calc(100vw - var(--space-6)));
    }
    .slide-jump-link {
        min-height: 1.65rem;
        padding: 0.2rem 0.48rem;
        font-size: 0.62rem;
    }
    .slide-jump-toggle {
        min-height: 1.45rem;
        padding: 0.1rem 0.04rem;
        font-size: 0.62rem;
    }
    .slide-jump-links {
        width: min(108px, calc(100vw - var(--space-6)));
    }
}

/* ------------------------------------------------------------
   Pitch-deck snap-scrolling
   ------------------------------------------------------------
   Every panel (public + investor appendix) is one viewport tall and
   snaps. Sections whose content exceeds the viewport scroll
   internally (overflow-y: auto), then the page snaps to the next
   panel once that internal scroll bottoms out. */
html {
    scroll-snap-type: y mandatory;
}

.content,
.info-section,
.split-row {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Footer is the final snap target: scroll-snap-align: end aligns
   its bottom edge to the viewport bottom, which is the natural
   rest position since the footer is shorter than 100vh. */
.site-footer {
    scroll-snap-align: end;
    scroll-snap-stop: always;
}

/* Cap every panel at exactly one viewport. overflow: hidden prevents
   scroll events from being consumed by the panel, one wheel tick
   snaps to the next panel every time. Content that exceeds 100vh is
   clipped (visible when the panel needs resizing). */
.info-section {
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    overflow: hidden;
    align-items: safe center;
    /* Tighter vertical padding so content has more room inside 100vh. */
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* Shrink Publications so it fits one viewport on typical laptops. */
#publications-section .publication-canvas {
    height: 130px;
}
#publications-section .publications-layout {
    gap: var(--space-4);
}

/* Mobile uses document-level scrolling instead of nested per-panel
   scrolling. A long slide can exceed one viewport, and the same swipe
   naturally continues into the next snap panel. */
@media (max-width: 768px) {
    html {
        scroll-snap-type: none;
    }

    .content {
        min-height: 100dvh;
        max-height: 100dvh;
        height: 100dvh;
    }

    .info-section {
        min-height: 100dvh;
        max-height: none;
        height: auto;
        padding-top: calc(var(--space-8) + env(safe-area-inset-top));
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
        overflow: visible;
    }
    .section-title-text {
        max-width: min(100%, 21rem);
        text-wrap: balance;
    }
    .section-desc {
        max-width: min(100%, 22rem);
    }
    .split-row {
        scroll-snap-align: none;
        height: auto;
        max-height: none;
    }
    .split-panel {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        min-height: 100dvh;
        max-height: none;
        height: auto;
        overflow: visible;
    }
    #publications-section .publication-canvas {
        height: 110px;
    }

    #team-section .info-inner {
        max-width: none;
        align-items: stretch;
    }

    #team-section .section-label,
    #team-section .section-title-text {
        align-self: center;
    }

    #team-section .investor-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.9rem;
        width: calc(100vw - (var(--space-5) * 2));
        max-width: none;
        margin-top: 0.8rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.1rem 0.05rem 0.9rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.05rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #team-section .investor-grid::-webkit-scrollbar {
        display: none;
    }

    #team-section .investor-card {
        flex: 0 0 min(82vw, 310px);
        scroll-snap-align: center;
        box-shadow: none;
    }
}

/* ------------------------------------------------------------
   14" laptop compression
   ------------------------------------------------------------
   16" MacBook Pro = 1728px wide. 14" = 1512px. 13" = 1440px.
   Width 1600 is the clean break between 14" and 16", anything
   ≤1600 is a 14" or smaller laptop and needs the shrunken canvases
   and tighter padding to fit content in 100vh. 16" and external
   monitors stay untouched. */
@media (max-width: 1600px) and (min-width: 769px) {
    .info-section {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    /* Tighter margin on the intro paragraph inside every investor
       section, saves ~16px of vertical space per panel. */
    .investor-section .section-desc {
        margin-top: 0.6rem;
        margin-bottom: 0.6rem;
    }

    /* Hero/SAT/Scaling/NP/Paradigm/NPC canvases */
    .topo-canvas        { height: 360px; }
    .scaling-canvas     { height: 310px; }
    .np-canvas          { height: 360px; }
    .paradigm-canvas    { height: 300px; }
    .npc-canvas         { height: 400px; }
    .optimizer-canvas   { height: 380px; }
    .chip-canvas        { height: 380px; }

    /* Investor appendix canvases */
    .investor-frontier-canvas { height: 200px; margin: 0.8rem 0; }
    .investor-counting-canvas { height: 200px; margin: 0.6rem 0; }
    .investor-market-canvas   { height: 180px; }
    .roadmap-canvas           { height: 120px; margin: 0.6rem 0 0.4rem; }
    .publication-canvas       { height: 110px; }

    /* Team grid: tighter cards + smaller photo on short viewports. */
    .investor-grid { gap: 1rem; margin-top: 1.2rem; }
    .investor-card { padding: 1rem 0.9rem; gap: 0.3rem 0.7rem; }
    .investor-card-photo { width: 72px; height: 72px; }
    .investor-card-logos { max-width: 120px; gap: 0.3rem 0.4rem; }
    .investor-card-logos img { height: 22px; max-width: 52px; }
    .investor-card-logos img.logo-small { height: 18px; max-width: 44px; }
    .investor-card-logos img.logo-large { height: 26px; max-width: 60px; }
    .investor-card-name { margin: 0.5rem 0 0; }

    /* Go-to-Market (numbered steps): tighter padding + logo size. */
    .investor-steps { gap: 0.5rem; margin-top: 0.6rem; }
    .investor-step  { padding: 0.6rem 0.9rem; gap: 0.8rem; }
    .investor-step-title { margin: 0 0 0.15rem; }
    .investor-step-body  { line-height: 1.45; margin: 0; }
    .investor-step-logos { margin-top: 0.35rem; gap: 0.6rem 0.9rem; }
    .investor-step-logos img { height: 26px; }
    .investor-step-logos img.logo-large { height: 30px; }

    /* Market size tiers */
    .investor-market-tier { padding: 0.8rem 0.9rem; }
    .competitor-map { height: 330px; margin: 1rem auto 0.7rem; }
    .competitor-marker { font-size: 0.58rem; padding: 0.34rem 0.5rem; }
    .competitor-marker-primary { font-size: 0.68rem; }
    .competitor-note { font-size: 0.82rem; line-height: 1.4; }

    /* Requirements / Ask breakdown: smaller anim + tighter spacing. */
    .investor-ask-breakdown { gap: 0.45rem; margin-top: 0.6rem; }
    .investor-ask-anim { width: 60px; height: 60px; }
    .investor-ask-breakdown li { grid-template-columns: 60px 1fr; gap: 0.9rem; padding: 0.3rem 0; }

    /* Roadmap phases list: tighter padding + gaps. */
    .investor-phases { gap: 0.5rem; margin-top: 0.3rem; }
    .investor-phases li { padding: 0.7rem 0.9rem; gap: 0.3rem; }
    .investor-phase-title { margin: 0 0 0.15rem; }
    .investor-phase-body  { line-height: 1.4; margin: 0; }

    /* Academic Mentor: shrink the Valiant laptop screenshot so the
       name + role + note caption fit inside the same snap panel. */
    .investor-advisor-screen { max-width: 560px; }
    .investor-advisor-feature { gap: 0.8rem; margin-top: 1rem; }
}

/* 13" laptops (1440px wide), another pass of compression. */
@media (max-width: 1450px) and (min-width: 769px) {
    .topo-canvas, .np-canvas,
    .paradigm-canvas { height: 240px; }
    .scaling-canvas { height: 240px; }
    .npc-canvas      { height: 320px; }
    .optimizer-canvas, .chip-canvas { height: 300px; }

    .investor-frontier-canvas { height: 160px; }
    .investor-counting-canvas { height: 160px; }
    .investor-market-canvas   { height: 140px; }
    .roadmap-canvas           { height: 130px; }
    .competitor-map           { height: 280px; }
    .competitor-note          { display: none; }

    .investor-card-photo { width: 60px; height: 60px; }
    .investor-ask-anim { width: 56px; height: 56px; }
    .investor-ask-breakdown li { grid-template-columns: 56px 1fr; }
    .investor-ask-breakdown { gap: 0.8rem 1rem; }

    /* Academic Mentor: further shrink the Valiant screenshot on 13". */
    .investor-advisor-screen { max-width: 460px; }
}

/* Phone landscape: width can exceed the portrait mobile breakpoint,
   but the short viewport cannot support clipped snap-deck slides. */
@media (max-width: 1000px) and (max-height: 520px) {
    html {
        scroll-snap-type: none;
    }

    .content,
    .info-section,
    .split-row,
    .split-panel,
    .site-footer {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .content {
        min-height: 100svh;
        max-height: none;
        height: auto;
    }

    .info-section,
    .split-panel {
        min-height: auto;
        max-height: none;
        height: auto;
        overflow: visible;
        padding-top: calc(var(--space-6) + env(safe-area-inset-top));
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    }

    .section-title-text {
        max-width: min(100%, 34rem);
        text-wrap: balance;
    }

    .section-desc {
        max-width: min(100%, 34rem);
        line-height: 1.65;
    }

    .topo-canvas,
    .np-canvas,
    .paradigm-canvas,
    .scaling-canvas {
        height: 220px;
    }

    .npc-canvas,
    .optimizer-canvas,
    .chip-canvas {
        height: 260px;
    }

    #team-section .info-inner {
        max-width: min(100%, 720px);
        align-items: center;
    }

    #team-section .investor-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 720px;
        gap: 0.9rem;
        margin-top: 0.9rem;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    #team-section .investor-grid::-webkit-scrollbar {
        display: none;
    }

    #team-section .investor-card {
        min-width: 0;
        scroll-snap-align: none;
        box-shadow: none;
    }
}

/* Accessibility: users who prefer less motion get free scroll. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-snap-type: none;
    }
    .gradient-layer,
    .scroll-hint {
        animation: none;
    }
    .info-section,
    .split-panel {
        min-height: 100vh;
        max-height: none;
        height: auto;
        overflow: visible;
    }
}