/* ─────────────────────────────────────────────────────
           Neural design system — applied
           ───────────────────────────────────────────────────── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            /* Color tokens — Neural palette */
            /* Agentdeck app palette — warm charcoal */
            --bg-primary: #141110;      /* surface-deep */
            --bg-elevated: #1a1614;     /* surface-panel */
            --bg-card: #211e1c;         /* surface-row */
            --bg-hover: #2a2624;
            --bg-active: #332e2b;
            --bg-code: #0e0b0a;
            --bg-code-header: #1a1614;
            --bg-chat-user: #241916;

            --border-subtle: #2c2826;
            --border: #2c2826;
            --border-strong: #3a3533;

            --text-primary: #f3f2f1;    /* app fg */
            --text-secondary: #a5a09c;  /* app body */
            --text-tertiary: #795f5d;   /* app muted */
            --text-accent: #a4847f;     /* warm tan */

            /* Joint Chiefs brand blue — slotted into system's `info` role */
            --accent: #66b5ff;
            --accent-strong: #0285ff;

            /* Status */
            --success: #00c758;
            --critical: #fb2c36;
            --warning: #e0a060;
            --info: #0285ff;

            /* Type — all monospace, per "monospace as identity" */
            --font-sans: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
            --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
            --font-pixel: 'Press Start 2P', ui-monospace, Menlo, monospace;

            /* Type scale (Agentdeck) */
            --text-xs: 11px;     --lh-xs: 14px;
            --text-2xs: 12px;    --lh-2xs: 16px;
            --text-sm: 13px;     --lh-sm: 18px;
            --text-body: 14px;   --lh-body: 20px;
            --text-lg: 16px;     --lh-lg: 24px;
            --text-h1: 20px;     --lh-h1: 28px;

            /* Spacing — 4px grid */
            --s-xs: 4px;   --s-sm: 8px;   --s-md: 12px;
            --s-lg: 16px;  --s-xl: 20px;  --s-2xl: 24px;
            --s-3xl: 32px; --s-4xl: 48px; --s-5xl: 64px;
            --s-6xl: 96px;

            /* Radii */
            --r-xs: 2px;
            --r-sm: 4px;
            --r-md: 6px;        /* default buttons */
            --r-lg: 8px;        /* default cards */
            --r-xl: 10px;       /* window shell */
            --r-2xl: 12px;
            --r-pill: 9999px;

            /* Shadows (tuned for dark surfaces) */
            --sh-card: 0 1px 2px rgba(0, 0, 0, 0.40);
            --sh-popover: 0 8px 24px rgba(0, 0, 0, 0.55);
            --sh-window: 0 24px 48px rgba(0, 0, 0, 0.45);
            --sh-focus: 0 0 0 2px rgba(2, 133, 255, 0.40);

            /* Transitions */
            --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        html { scroll-behavior: smooth; background: var(--bg-primary); }

        body {
            font-family: var(--font-sans);
            color: var(--text-primary);
            background: var(--bg-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 400;
            letter-spacing: 0;
        }

        code, pre, .mono {
            font-family: var(--font-mono);
            font-size: var(--text-body);
            letter-spacing: 0;
        }
        p code {
            background: var(--bg-elevated);
            padding: 2px 6px;
            border-radius: var(--r-sm);
            font-size: var(--text-2xs);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
        a:hover { color: var(--accent-strong); }

        *:focus-visible {
            outline: none;
            box-shadow: var(--sh-focus);
            border-radius: var(--r-md);
        }

        ::selection { background: rgba(2, 133, 255, 0.35); color: var(--text-primary); }

        /* ── Type ── */
        .eyebrow {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: var(--text-2xs);
            line-height: var(--lh-2xs);
            font-weight: 500;
            color: var(--text-tertiary);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: var(--s-md);
        }
        .eyebrow-accent { color: var(--accent); }

        h1, h2, h3, h4 {
            color: var(--text-primary);
            font-weight: 700;
        }
        h1 {
            font-size: var(--text-h1);
            line-height: var(--lh-h1);
            letter-spacing: -0.025em;
        }
        h2 {
            font-size: var(--text-h1);
            line-height: var(--lh-h1);
            letter-spacing: -0.025em;
            font-weight: 700;
        }
        h3 {
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 600;
            letter-spacing: 0;
        }

        .lead {
            font-size: var(--text-lg);
            line-height: var(--lh-lg);
            color: var(--text-secondary);
            letter-spacing: 0;
        }

        /* ── Layout ── */
        main { padding-top: 101px; }
        section { padding: var(--s-5xl) var(--s-2xl); }
        @media (max-width: 720px) { section { padding: var(--s-3xl) var(--s-xl); } }
        .container { max-width: 64rem; margin: 0 auto; }
        .narrow { max-width: 44rem; margin: 0 auto; }

        .section-head { text-align: center; margin-bottom: var(--s-3xl); }
        .section-head .lead { max-width: 40rem; margin: var(--s-lg) auto 0; }

        /* ── Announcement bar (at viewport top) ── */
        .announce-bar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 36px;
            background: #0a0706;
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--s-sm);
            z-index: 101;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            transition: background var(--t-fast);
        }
        .announce-bar:hover { background: #000000; color: var(--text-primary); }
        .announce-badge {
            padding: 2px 8px;
            background: var(--accent-strong);
            color: #ffffff;
            border-radius: var(--r-sm);
            font-size: var(--text-xs);
            line-height: var(--lh-xs);
            font-weight: 700;
            letter-spacing: 0.06em;
        }
        .announce-arrow {
            color: var(--text-tertiary);
            transition: transform var(--t-fast);
        }
        .announce-bar:hover .announce-arrow {
            color: var(--accent);
            transform: translateX(2px);
        }
        @media (max-width: 720px) {
            .announce-bar { font-size: var(--text-2xs); gap: var(--s-xs); padding: 0 var(--s-md); }
            .announce-badge { padding: 1px 6px; font-size: 10px; }
        }

        /* ── Nav ── */
        .nav {
            position: fixed;
            top: 36px; left: 0; right: 0;
            height: 65px;
            background: rgba(20, 17, 16, 0.85);
            backdrop-filter: saturate(1.4) blur(14px);
            -webkit-backdrop-filter: saturate(1.4) blur(14px);
            border-bottom: 1px solid var(--border);
            z-index: 100;
        }
        .nav-inner {
            max-width: 64rem;
            margin: 0 auto;
            padding: 0 var(--s-2xl);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .nav-logo {
            display: inline-flex;
            align-items: center;
            gap: var(--s-sm);
            font-family: var(--font-mono);
            font-size: var(--text-body);
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0;
        }
        .nav-logo-mark {
            width: 28px; height: 28px;
            border-radius: var(--r-md);
            background-image: url('apple-touch-icon.png');
            background-size: cover;
            background-position: center;
            image-rendering: pixelated;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0;
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: var(--s-2xl);
        }
        .nav-links a {
            font-family: var(--font-mono);
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0;
            transition: color var(--t-fast);
        }
        .nav-links a:hover { color: var(--text-primary); }

        /* ── Buttons ── Agentdeck recipes */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--s-sm);
            padding: var(--s-md) var(--s-lg);
            border-radius: var(--r-md);
            font-family: var(--font-mono);
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 500;
            text-decoration: none;
            border: 1px solid transparent;
            transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
            white-space: nowrap;
            letter-spacing: 0;
            cursor: pointer;
        }
        .btn-sm {
            padding: var(--s-sm) var(--s-md);
            font-size: var(--text-2xs);
            line-height: var(--lh-2xs);
        }
        .btn-primary {
            background: var(--accent-strong);
            color: #ffffff;
            border-color: var(--accent-strong);
        }
        .btn-primary:hover {
            background: #0a74dd;
            border-color: #0a74dd;
            color: #ffffff;
        }
        .nav-links a.nav-cta {
            color: #ffffff;
        }
        .nav-links a.nav-cta:hover {
            color: #ffffff;
        }
        .btn-accent {
            background: var(--accent-strong);
            color: #ffffff;
        }
        .btn-accent:hover {
            background: #0a74dd;
            color: #ffffff;
        }
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border-color: var(--border-strong);
        }
        .btn-secondary:hover {
            background: var(--bg-hover);
            border-color: var(--border-strong);
            color: var(--text-primary);
        }
        .btn-ghost {
            background: transparent;
            color: var(--text-primary);
            border-color: transparent;
        }
        .btn-ghost:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .btn-arrow {
            display: inline-flex;
            align-items: center;
            gap: var(--s-xs);
            font-family: var(--font-mono);
            font-size: var(--text-body);
            line-height: var(--lh-body);
            font-weight: 500;
            color: var(--accent);
            letter-spacing: 0;
        }
        .btn-arrow:hover { color: var(--accent-strong); }
        .btn-arrow::after {
            content: '→';
            transition: transform var(--t-fast);
        }
        .btn-arrow:hover::after { transform: translateX(2px); }

        /* ── Hero ── */
        .hero {
            padding: var(--s-4xl) var(--s-2xl) var(--s-3xl);
            position: relative;
            overflow: hidden;
            text-align: center;
            background:
                radial-gradient(ellipse 1000px 420px at 50% -10%, rgba(2, 133, 255, 0.08), transparent 70%);
        }
        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: var(--s-sm);
            padding: 4px var(--s-md);
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: var(--text-2xs);
            line-height: var(--lh-2xs);
            margin-bottom: var(--s-xl);
            letter-spacing: 0;
        }
        .hero-announce {
            display: inline-flex;
            align-items: center;
            gap: var(--s-sm);
            padding: 4px 4px 4px var(--s-sm);
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: var(--text-2xs);
            line-height: var(--lh-2xs);
            letter-spacing: 0;
            text-decoration: none;
            margin-bottom: var(--s-lg);
            transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
        }
        .hero-announce:hover {
            color: var(--text-primary);
            border-color: var(--border-strong);
            background: var(--bg-card);
        }
        .hero-announce-badge {
            padding: 2px 8px;
            background: var(--accent-strong);
            color: #ffffff;
            border-radius: var(--r-pill);
            font-size: var(--text-xs);
            line-height: var(--lh-xs);
            font-weight: 600;
            letter-spacing: 0.06em;
        }
        .hero-announce-arrow {
            color: var(--text-tertiary);
            transition: transform var(--t-fast);
            padding-right: var(--s-sm);
        }
        .hero-announce:hover .hero-announce-arrow {
            color: var(--accent);
            transform: translateX(2px);
        }
        .hero-pill-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 8px rgba(102, 181, 255, 0.6);
        }
        .pixel-wordmark {
            font-family: var(--font-pixel);
            font-weight: 400;
            font-size: clamp(1.75rem, 5.5vw, 3.75rem);
            line-height: 1.15;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-primary);
            margin: 0 0 var(--s-3xl);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25em;
            -webkit-font-smoothing: none;
            font-smooth: never;
        }
        .pixel-wordmark span {
            padding-left: 0.12em;
        }
        .hero h1 {
            font-size: clamp(2.25rem, 5.2vw, 3.5rem);
            font-weight: 500;
            max-width: 900px;
            margin: 0 auto 24px;
            letter-spacing: -0.03em;
            line-height: 1.1;
        }
        .hero-accent { color: var(--accent); }
        .hero-sub {
            font-size: clamp(1rem, 1.4vw, 1.125rem);
            color: var(--text-secondary);
            max-width: 640px;
            margin: 0 auto 40px;
            line-height: 1.6;
            letter-spacing: -0.019em;
        }
        .hero-ctas {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ── Terminal ── */
        .terminal {
            max-width: 832px;
            margin: 72px auto 0;
            background: var(--bg-code);
            border: 1px solid var(--border-subtle);
            border-radius: var(--r-lg);
            overflow: hidden;
            text-align: left;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 24px 64px rgba(0, 0, 0, 0.55);
        }
        .terminal-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 16px;
            background: var(--bg-code-header);
            border-bottom: 1px solid var(--border-subtle);
        }
        .terminal-dot {
            width: 11px; height: 11px;
            border-radius: 50%;
        }
        .terminal-dot.red { background: #ff5f57; }
        .terminal-dot.yellow { background: #febc2e; }
        .terminal-dot.green { background: #28c840; }
        .terminal-title {
            margin-left: 12px;
            font-size: 0.75rem;
            font-family: var(--font-mono);
            color: var(--text-tertiary);
            letter-spacing: 0;
        }
        .terminal-body {
            padding: 20px 22px;
            font-family: var(--font-mono);
            font-size: 0.8125rem;
            line-height: 1.7;
            color: #e8e8e8;
            white-space: pre;
            overflow-x: auto;
            letter-spacing: -0.025em;
        }
        .term-prompt { color: var(--accent); }
        .term-comment { color: #5c6370; }
        .term-key { color: #c678dd; }
        .term-string { color: #98c379; }
        .term-fn { color: #61afef; }
        .term-ok { color: var(--success); }
        .term-critical { color: var(--critical); }
        .term-muted { color: var(--text-tertiary); }

        /* ── Three surfaces ── */
        .surfaces {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }
        .surface-card {
            padding: 28px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--r-xl);
            transition: border-color var(--t-fast), background var(--t-fast);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .surface-card:hover {
            border-color: var(--border-strong);
            background: var(--bg-card);
        }
        .surface-tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: rgba(102, 181, 255, 0.12);
            color: var(--accent);
            font-size: 0.6875rem;
            font-family: var(--font-mono);
            font-weight: 500;
            border-radius: var(--r-pill);
            letter-spacing: 0.04em;
            align-self: flex-start;
        }
        .surface-card h3 {
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
        }
        .surface-card h3 code {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            background: transparent;
            border: none;
            padding: 0;
        }
        .surface-card p {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            flex: 1;
            letter-spacing: -0.019em;
            line-height: 1.55;
        }

        /* ── Steps ── */
        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            counter-reset: step;
        }
        .step {
            position: relative;
            padding: 28px 24px 24px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--r-xl);
            counter-increment: step;
        }
        .step::before {
            content: counter(step, decimal-leading-zero);
            display: block;
            font-family: var(--font-mono);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 20px;
            letter-spacing: 0;
        }
        .step h3 {
            font-size: 1rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .step p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.6;
            letter-spacing: -0.019em;
        }

        /* ── Provider pills ── */
        .providers {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 48px;
        }
        .provider-pill {
            padding: 10px 18px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            font-size: 0.875rem;
            font-family: var(--font-mono);
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            letter-spacing: 0;
            transition: border-color var(--t-fast), color var(--t-fast);
        }
        .provider-pill:hover {
            border-color: var(--border-strong);
            color: var(--text-primary);
        }
        .provider-pill::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--accent);
        }

        /* ── Features grid ── */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1px;
            background: var(--border-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--r-xl);
            overflow: hidden;
        }
        .feature {
            padding: 28px;
            background: var(--bg-primary);
        }
        .feature-title {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            letter-spacing: -0.019em;
        }
        .feature p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.6;
            letter-spacing: -0.019em;
        }

        /* ── Research panel ── */
        .research {
            padding: 40px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--r-xl);
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 32px;
            align-items: start;
        }
        .research-badge {
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            font-family: var(--font-mono);
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-align: center;
            min-width: 100px;
            letter-spacing: 0;
            line-height: 1.5;
        }
        .research-badge strong {
            display: block;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 2px;
        }
        .research h3 { margin-bottom: 12px; line-height: 1.3; }
        .research p {
            color: var(--text-secondary);
            margin-bottom: 12px;
            font-size: 0.9375rem;
            line-height: 1.6;
            letter-spacing: -0.019em;
        }
        .research cite {
            display: block;
            font-size: 0.8125rem;
            color: var(--text-tertiary);
            font-style: normal;
            font-family: var(--font-mono);
            letter-spacing: 0;
            margin-bottom: 14px;
        }
        @media (max-width: 600px) {
            .research { grid-template-columns: 1fr; padding: 28px; }
            .research-badge { justify-self: start; }
        }

        /* ── Quickstart ── */
        .quickstart-step {
            margin-top: 40px;
            padding-top: 28px;
            border-top: 1px solid var(--border-subtle);
        }
        .quickstart-step:first-of-type {
            border-top: none;
            padding-top: 0;
            margin-top: 32px;
        }
        .quickstart-step h3 {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 10px;
        }
        .quickstart-step h3::before {
            content: counter(qstep, decimal-leading-zero);
            font-family: var(--font-mono);
            font-size: 0.8125rem;
            color: var(--accent);
            font-weight: 500;
            letter-spacing: 0;
        }
        .quickstart { counter-reset: qstep; }
        .quickstart-step { counter-increment: qstep; }
        .quickstart-step p {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.65;
            letter-spacing: -0.019em;
        }
        .code-block {
            background: var(--bg-code);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: var(--s-md) var(--s-lg);
            font-family: var(--font-mono);
            font-size: var(--text-2xs);
            line-height: 18px;
            color: var(--text-primary);
            overflow-x: auto;
            margin: var(--s-lg) 0;
            letter-spacing: 0;
        }
        .code-block-wrap {
            position: relative;
            margin: var(--s-lg) 0;
        }
        .code-block-wrap .code-block {
            margin: 0;
            padding-right: 72px;
        }
        .code-copy-btn {
            position: absolute;
            top: var(--s-sm);
            right: var(--s-sm);
            padding: var(--s-xs) var(--s-sm);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            border: 1px solid var(--border-strong);
            border-radius: var(--r-sm);
            font-family: var(--font-mono);
            font-size: var(--text-xs);
            line-height: var(--lh-xs);
            font-weight: 500;
            letter-spacing: 0;
            cursor: pointer;
            transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
        }
        .code-copy-btn:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .code-copy-btn.copied {
            color: var(--success);
            border-color: var(--success);
        }

        /* ── Final CTA ── */
        .cta-final {
            text-align: center;
            padding: var(--s-5xl) var(--s-2xl);
            border-top: 1px solid var(--border);
        }
        .cta-final h2 { margin-bottom: 16px; }
        .cta-final .lead { margin: 0 auto 32px; max-width: 520px; }

        /* ── Footer ── */
        footer {
            padding: 48px 24px 56px;
            border-top: 1px solid var(--border-subtle);
            color: var(--text-tertiary);
            font-size: 0.8125rem;
        }
        .footer-inner {
            max-width: 1040px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 28px;
        }
        .footer-links a {
            color: var(--text-secondary);
            font-size: 0.875rem;
            letter-spacing: -0.019em;
        }
        .footer-links a:hover { color: var(--text-primary); }
        .footer-meta {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            color: var(--text-tertiary);
            letter-spacing: 0;
        }

        /* ── Responsive ── */
        @media (max-width: 720px) {
            .nav-links a:not(.nav-cta) { display: none; }
            .nav-inner { padding: 0 var(--s-lg); }
            section { padding: 80px 20px; }
            .hero { padding: 104px 20px 56px; }
            .terminal { margin-top: 48px; }
            .terminal-body { font-size: 0.75rem; padding: 16px; }
            .research { grid-template-columns: 1fr; }
            .section-head { margin-bottom: 40px; }
            .code-block-wrap .code-block { padding-right: 56px; }
            .page-hero { padding: var(--s-3xl) var(--s-xl) var(--s-lg); }
            .footer-links { gap: var(--s-lg); }
        }

        /* Narrow phones: stack req-table rows, shrink announce bar spacing. */
        @media (max-width: 540px) {
            .req-table,
            .req-table tbody,
            .req-table tr,
            .req-table th,
            .req-table td {
                display: block;
                width: 100%;
            }
            .req-table thead { display: none; }
            .req-table tr {
                border-bottom: 1px solid var(--border);
                padding: var(--s-sm) 0;
            }
            .req-table tr:last-child { border-bottom: none; }
            .req-table th {
                white-space: normal;
                padding: var(--s-xs) var(--s-md) 0;
                border-bottom: none;
                font-size: var(--text-2xs);
                line-height: var(--lh-2xs);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--text-tertiary);
                background: transparent;
                font-weight: 600;
            }
            .req-table td {
                padding: var(--s-xs) var(--s-md) var(--s-sm);
                border-bottom: none;
                font-size: var(--text-sm);
                line-height: var(--lh-sm);
            }
            .announce-bar { padding: 0 var(--s-sm); }
            .footer-links { gap: var(--s-md) var(--s-lg); }
            .footer-inner { padding: 0 var(--s-md); }
            .code-copy-btn { padding: var(--s-xs) var(--s-sm); }
            .hero-ctas .btn { flex: 1 1 auto; min-width: 0; }
        }

/* ── Guide / install page primitives ── */
.page-hero {
    padding: var(--s-4xl) var(--s-2xl) var(--s-2xl);
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.page-hero h1 {
    margin-top: var(--s-sm);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}
.req-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    border-top: 1px solid var(--border);
}
.req-table th,
.req-table td {
    text-align: left;
    padding: var(--s-md) var(--s-lg);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-weight: 400;
    letter-spacing: 0;
}
.req-table th {
    color: var(--text-primary);
    width: 36%;
    white-space: nowrap;
    background: var(--bg-elevated);
}
.req-table td {
    color: var(--text-secondary);
}
.req-table thead th {
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    font-weight: 600;
}
.req-table code {
    background: var(--bg-code);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: var(--text-2xs);
    border: 1px solid var(--border);
}
.req-table a {
    color: var(--accent);
}
.step-num {
    display: inline-block;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-weight: 500;
    margin-right: var(--s-sm);
    letter-spacing: 0.04em;
}
.quickstart-step h3 {
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* ── Articles listing + article page primitives ── */
.articles-hero {
    padding: var(--s-4xl) var(--s-2xl) var(--s-2xl);
    text-align: center;
    max-width: 44rem;
    margin: 0 auto;
}
.articles-hero h1 {
    margin-top: var(--s-sm);
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.articles-hero p {
    color: var(--text-secondary);
    margin-top: var(--s-md);
    font-size: var(--text-lg);
    line-height: var(--lh-lg);
}

.articles-container {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 var(--s-2xl) var(--s-5xl);
}

.articles-section-heading {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: var(--s-2xl) 0 var(--s-md);
}
.articles-section-heading:first-child {
    margin-top: 0;
}

.article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--s-xl) var(--s-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    transition: border-color var(--t-fast), background var(--t-fast);
    margin-bottom: var(--s-md);
}
.article-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card);
}

.article-meta {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: var(--lh-2xs);
    color: var(--text-tertiary);
    margin-bottom: var(--s-sm);
    display: flex;
    align-items: center;
    gap: var(--s-xs);
    letter-spacing: 0;
}
.article-meta::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(102, 181, 255, 0.5);
}

.article-card h2 {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 var(--s-sm);
    color: var(--text-primary);
}

.article-card p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    letter-spacing: -0.019em;
}

/* ── Single article page ── */
.article-header {
    padding: var(--s-4xl) var(--s-2xl) var(--s-xl);
    max-width: 44rem;
    margin: 0 auto;
}
.article-header .breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-bottom: var(--s-md);
    letter-spacing: 0;
}
.article-header .breadcrumb a {
    color: var(--text-tertiary);
}
.article-header .breadcrumb a:hover {
    color: var(--text-secondary);
}
.article-header h1 {
    font-size: clamp(1.75rem, 3.8vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-md);
}
.article-header .subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: var(--s-md);
}
.article-header .article-meta-line {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    letter-spacing: 0;
}

.article-body {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 var(--s-2xl) var(--s-5xl);
    color: var(--text-secondary);
}

.article-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: var(--s-3xl) 0 var(--s-md);
    color: var(--text-primary);
}
.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--s-xl) 0 var(--s-sm);
    color: var(--text-primary);
}

.article-body p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--s-lg);
    letter-spacing: -0.01em;
}

.article-body ul,
.article-body ol {
    margin: 0 0 var(--s-lg) var(--s-xl);
    padding-left: var(--s-sm);
}
.article-body li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--s-sm);
}
.article-body li strong,
.article-body p strong {
    color: var(--text-primary);
    font-weight: 600;
}

.article-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(102, 181, 255, 0.35);
    text-underline-offset: 2px;
}
.article-body a:hover {
    color: var(--accent-strong);
    text-decoration-color: var(--accent-strong);
}

.article-body blockquote {
    border-left: 3px solid var(--accent-strong);
    padding: var(--s-md) var(--s-xl);
    margin: var(--s-xl) 0;
    background: rgba(2, 133, 255, 0.05);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--text-primary);
}
.article-body blockquote p {
    margin-bottom: 0;
    font-size: 1rem;
    font-style: italic;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    margin: var(--s-xl) 0;
}
.article-body th,
.article-body td {
    text-align: left;
    padding: var(--s-sm) var(--s-md);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-weight: 400;
    letter-spacing: 0;
}
.article-body th {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: var(--bg-elevated);
}
.article-body td strong {
    color: var(--text-primary);
}
.article-body code {
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: 0.875em;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.article-body pre {
    margin: var(--s-lg) 0;
}
.article-body pre code {
    display: block;
    background: var(--bg-code);
    padding: var(--s-md) var(--s-lg);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    font-size: var(--text-2xs);
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}
.article-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--s-2xl) 0;
}

/* Table of contents */
.toc {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-xl);
    margin: var(--s-lg) 0 var(--s-2xl);
}
.toc h2 {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: 0 0 var(--s-md) !important;
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li {
    margin-bottom: var(--s-xs);
    font-size: var(--text-sm);
}
.toc a {
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    padding: 2px 0;
}
.toc a:hover {
    color: var(--accent);
}

/* Takeaways box */
.takeaways {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-xl);
    margin: var(--s-xl) 0;
}
.takeaways h2 {
    margin-top: 0 !important;
    margin-bottom: var(--s-md) !important;
    font-size: 1.125rem !important;
}
.takeaways ul {
    margin-bottom: 0;
}
.takeaways li {
    color: var(--text-primary);
}

/* FAQ section */
.faq-section {
    margin-top: var(--s-3xl);
    padding-top: var(--s-xl);
    border-top: 1px solid var(--border);
}
.faq-item {
    margin-bottom: var(--s-lg);
}
.faq-item h3 {
    margin: 0 0 var(--s-sm);
    font-size: 1.0625rem;
}
.faq-item p {
    font-size: 1rem;
    margin-bottom: 0;
}

/* Inter-article navigation */
.related-articles {
    margin-top: var(--s-3xl);
    padding-top: var(--s-xl);
    border-top: 1px solid var(--border);
}
.related-articles h2 {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: 0 0 var(--s-md) !important;
}

@media (max-width: 720px) {
    .article-header { padding: 120px 20px var(--s-lg); }
    .article-body { padding: 0 20px var(--s-3xl); }
    .article-body h2 { font-size: 1.25rem; }
    .article-body table { font-size: var(--text-xs); }
    .article-body th,
    .article-body td { padding: 6px 8px; }
    .toc { padding: var(--s-lg); }
    .articles-container { padding: 0 20px var(--s-3xl); }
    .articles-hero { padding: 120px 20px var(--s-lg); }
}