/* ═══════════════════════════════════════
   DESIGN TOKENS
   Single source of truth for all visual values.
   Every hardcoded number in the codebase should
   trace back to a token defined here.
   ═══════════════════════════════════════ */

:root {
    /* ── Typography ── */
    --font-text:    'garamond-premier-pro', 'EB Garamond', 'Hoefler Text', Garamond, 'Times New Roman', serif;
    --font-display: 'garamond-premier-pro-display', var(--font-text);
    --font-caption: 'garamond-premier-pro-caption', var(--font-text);
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Monaco', 'Inconsolata', monospace;

    /* Type scale — fluid, no breakpoint jumps */
    --text-xs:   clamp(11px, 0.6875rem + 0.1vw, 13px);
    --text-sm:   clamp(13px, 0.8125rem + 0.15vw, 15px);
    --text-base: clamp(17px, 1rem + 0.25vw, 20px);
    --text-lg:   clamp(20px, 1.25rem + 0.3vw, 24px);
    --text-xl:   clamp(24px, 1.5rem + 0.5vw, 32px);
    --text-2xl:  clamp(32px, 2rem + 1vw, 48px);
    --text-3xl:  clamp(40px, 2.5rem + 1.5vw, 64px);
    --text-stat: clamp(48px, 3rem + 2vw, 80px);

    /* Line heights */
    --leading-body:    1.65;
    --leading-heading: 1.2;
    --leading-tight:   1.0;

    /* Letter spacing */
    --tracking-display: -0.012em;
    --tracking-body:    0;
    --tracking-caps:    0.1em;
    --tracking-logo:    0.1em;

    /* ── Spacing scale ── */
    --space-0-5: 4px;
    --space-1:   8px;
    --space-1-5: 12px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-5:  40px;
    --space-6:  48px;
    --space-8:  64px;
    --space-10: 80px;
    --space-12: 96px;
    --space-16: 128px;
    --space-20: 160px;

    /* Layout */
    --measure:   72ch;
    --gutter:    clamp(24px, 5vw, 48px);
    --max-width: 1120px;

    /* ── Colors — ink hierarchy (dark → light) ── */
    --ink:         #1a1917;
    --ink-muted:   #4a4744;
    --ink-subtle:  #5a5652;
    --ink-faint:   #7a7672;
    --ink-ghost:   #79756f;     /* AA-compliant: 4.5:1 on --paper */
    --ink-whisper: #ccc8c4;
    --ink-hint:    #e5e2df;

    /* Colors — paper hierarchy (light → dark) */
    --paper:       #fefdfb;
    --paper-dim:   #f8f6f3;
    --paper-hover: #f3f0ec;

    /* Accent colors */
    --gold:        #C5A572;     /* Genesis counter, hub advantage, corridor gold */
    --color-live:  #2d7d46;
    --color-testnet: #5B8A72;  /* Testnet: validation active, approaching live */

    /* Selection */
    --selection-bg: rgba(139, 76, 58, 0.12);
    --selection-bg-dark: rgba(197, 165, 114, 0.35);
    --selection-color-dark: #fefdfb;

    /* ── Transitions ── */
    --transition-micro: 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-base: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-smooth: 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 400ms var(--ease-out-expo);
    --transition-reveal: 600ms var(--ease-out-expo);

    /* Easing curves */
    --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
    --ease-smooth:      cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Network visualization ── */
    --corridor-cross:   #8b4c3a;
    --corridor-federal: #3a5f7a;
    --corridor-fz-host: #4a6b4a;
    --corridor-fz-fz:   #7a6b4a;
    --node-natural:     #1a1917;
    --node-synthetic:   #5a5652;
    --particle:         #8b4c3a;
    --particle-glow:    rgba(139, 76, 58, 0.15);

    /* ── Terminal palette ──
       Layered dark surfaces for depth:
       bg (section) → surface (panel body) → chrome (panel header) */
    --terminal-bg:       #1a1917;
    --terminal-surface:  #111010;
    --terminal-chrome:   #0e0d0c;
    --terminal-deep:     #0c0b0a;
    --terminal-text:     #e5e2df;
    --terminal-accent:   #b89f82;
    --terminal-dim:      #9a9693;
    --terminal-accent-30: rgba(184, 159, 130, 0.3);
    --terminal-text-65:   rgba(229, 226, 223, 0.65);
    --terminal-border:    rgba(255, 255, 255, 0.06);
    --terminal-border-dim: rgba(255, 255, 255, 0.04);
    --terminal-scrollbar: rgba(255, 255, 255, 0.1);

    /* Terminal chrome dots */
    --dot-red:    #ff5f57;
    --dot-yellow: #febc2e;
    --dot-green:  #28c840;

    /* Syntax coloring */
    --syntax-key:    #d4cfc9;
    --syntax-string: #c4a882;

    /* ── Shadows ── */
    --shadow-border:     0 1px 0 rgba(26, 25, 23, 0.06);
    --shadow-xs:         0 2px 8px rgba(26, 25, 23, 0.06);
    --shadow-sm:         0 2px 8px rgba(26, 25, 23, 0.12);
    --shadow-md:         0 3px 12px rgba(26, 25, 23, 0.04);
    --shadow-lg:         0 3px 12px rgba(26, 25, 23, 0.05);
    --shadow-xl:         0 4px 20px rgba(26, 25, 23, 0.06), 0 1px 3px rgba(26, 25, 23, 0.04);
    --shadow-dark-md:    0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-dark-lg:    0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-focus:      0 0 0 6px rgba(26, 25, 23, 0.06);
    --shadow-focus-accent: 0 0 0 6px rgba(139, 76, 58, 0.08);
    --shadow-terminal:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 32px 80px rgba(0, 0, 0, 0.25);
    --shadow-terminal-deep:
        0 24px 80px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 60px rgba(139, 76, 58, 0.03);

    /* ── Z-index stack ── */
    --z-below:     -1;
    --z-base:       1;
    --z-raised:     4;
    --z-floating:   6;
    --z-overlay:    8;
    --z-popup:      10;
    --z-header:     100;
    --z-skip-link:  1000;
    --z-texture:    9999;

    /* Animation tokens */
    --duration-particle: 8s;
    --duration-pulse:    3s;
    --duration-reveal:   1s;
    --duration-type:     2.5s;
}

@media (max-width: 375px) {
    :root {
        --gutter: 24px;
    }
}
/* ═══════════════════════════════════════
   RESET & BASE TYPOGRAPHY
   Box-model, html/body, headings, links,
   scrollbars, selection, utilities
   ═══════════════════════════════════════ */

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

html {
    font-size: 100%;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-whisper) transparent;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--ink);
    background: var(--paper);
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1, "onum" 1, "pnum" 1;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-kerning: normal;
    hanging-punctuation: first allow-end last;
}

/* Paper grain — subtle texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-texture);
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Headings — display ligatures + swashes beyond body defaults */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: var(--leading-heading);
    text-wrap: balance;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-kerning: normal;
}

p {
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* Dark-section selection — use high-contrast tokens on dark backgrounds */
.code-immersive ::selection,
.corridor-trace-section ::selection,
.cta-section--dark ::selection,
.explore-terminal ::selection,
.docs-code-col ::selection,
.code-panel ::selection,
.configure-main ::selection {
    background: var(--selection-bg-dark);
    color: var(--selection-color-dark);
}

blockquote {
    hanging-punctuation: first allow-end last;
}

/* Statistics — lining tabular numerals with titling alternates */
.stat-number,
[data-numeric="lining"] {
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1, "titl" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

/* ── Scrollbars (webkit) ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-whisper); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }

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

.text-center {
    text-align: center;
}
/* ═══════════════════════════════════════
   LAYOUT
   Container, header, footer, nav,
   skip-link, focus styles
   ═══════════════════════════════════════ */

/* --- Site Container --- */
.site-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

.container--narrow {
    max-width: calc(var(--measure) + var(--gutter) * 2);
}

@media (min-width: 1400px) {
    .container--narrow { max-width: calc(var(--measure) + var(--gutter) * 2); }
}

/* --- Site Header --- */
.site-header {
    padding: var(--space-4) 0;
    padding-top: max(var(--space-4), env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(254, 253, 251, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-bottom-color var(--transition-base), box-shadow var(--transition-base);
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    background: rgba(254, 253, 251, 0.96);
    border-bottom-color: var(--ink-hint);
    box-shadow: var(--shadow-border);
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(254, 253, 251, 0.97);
    }
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.logo {
    font-family: var(--font-text);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-logo);
    font-variant-caps: all-small-caps;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.logo:hover {
    color: var(--ink-muted);
}

.nav-toggle {
    display: none;
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-1);
}

.nav-toggle:hover {
    color: var(--ink);
}

.nav-primary {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
}

.nav-primary a {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    text-decoration: none;
    letter-spacing: 0.02em;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--ink-whisper), var(--ink-whisper));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.nav-primary a:hover {
    color: var(--ink);
    background-size: 100% 1px;
}

.nav-primary a[aria-current="page"] {
    color: var(--ink);
    background-size: 100% 1px;
}

/* --- Site Footer --- */
.site-footer {
    padding: var(--space-8) 0 var(--space-6);
    margin-top: auto;
    background: var(--paper-dim);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.footer-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    margin-bottom: var(--space-1);
}

.footer-contact > a {
    font-size: var(--text-lg);
    color: var(--ink);
    text-decoration: none;
    align-self: flex-start;
    background-image: linear-gradient(var(--ink-whisper), var(--ink-whisper));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-image var(--transition-fast), background-size var(--transition-base);
}

.footer-contact > a:hover {
    color: var(--ink-muted);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 2px;
}

.footer-secondary {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    margin-top: var(--space-1);
}

.footer-secondary a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.footer-secondary a:hover {
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

.footer-nav {
    display: flex;
    gap: var(--space-4);
}

.footer-nav a {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.footer-nav a:hover {
    color: var(--ink);
    background-size: 100% 1px;
}

.footer-legal {
    width: 100%;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-hint);
}

.footer-legal p {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    line-height: 1.6;
    max-width: 80ch;
}

.footer-contact-ghost {
    margin-top: var(--space-3);
}

.footer-contact-ghost a {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
}

.footer-contact-ghost a:hover {
    color: var(--ink-subtle);
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--gutter);
    padding: var(--space-1) var(--space-2);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    z-index: var(--z-skip-link);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-1);
}

/* --- Focus Styles --- */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    box-shadow: var(--shadow-focus);
}

a:focus-visible {
    outline: 2px solid var(--corridor-cross);
    outline-offset: 4px;
    box-shadow: var(--shadow-focus-accent);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }

    .nav-primary {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
        padding-top: var(--space-2);
    }

    .nav-primary[data-open="true"],
    .nav-primary.is-open {
        display: flex;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }

    .footer-nav a {
        padding: var(--space-1) 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .footer-contact > a {
        font-size: var(--text-lg);
    }

    .nav-primary a {
        padding: var(--space-1) 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-primary a[href="/explore.html"] {
        display: none;
    }
}
/* ═══════════════════════════════════════
   SHARED COMPONENTS
   Eyebrow pattern, display headings,
   stats, callouts, tables, zone board
   ═══════════════════════════════════════ */

/* --- Eyebrow Pattern ---
   All eyebrow-like elements share these base properties.
   Individual selectors add only unique overrides. */
.section-eyebrow,
.article-eyebrow,
.hero-eyebrow,
.page-eyebrow,
.callout-title,
.pillar-allocation,
.path-audience,
.deployment-status,
.paper-type,
.stack-layer,
.toc-title,
.layers-title,
.primitives-title,
.zone-board-group-label {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    font-variant-ligatures: common-ligatures contextual;
}

/* --- Section Eyebrow --- */
.section-eyebrow {
    color: var(--ink-subtle);
    display: block;
    margin-bottom: var(--space-3);
}

/* --- Section Titles --- */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
    line-height: 1.12;
    /* font-feature-settings + ligatures inherited from h-element reset */
}

.section-subtitle {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    color: var(--ink-muted);
    max-width: 55ch;
    line-height: 1.5;
    letter-spacing: 0.003em;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.section-header {
    margin-bottom: var(--space-8);
}

.section-header .section-title {
    margin-bottom: var(--space-3);
}

.section-header .section-subtitle {
    line-height: 1.6;
    max-width: 50ch;
}

.section-lead {
    max-width: var(--measure);
    margin-bottom: var(--space-6);
}

/* --- Section Divider --- */
.section-divider {
    width: min(80px, 10%);
    height: 1px;
    background: var(--ink-whisper);
    margin: 0 auto;
}

/* --- Stats --- */
.stats-section {
    padding: var(--space-8) 0;
    background: var(--paper-dim);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8) var(--space-6);
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: calc(var(--space-8) / -2);
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--ink-hint);
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(48px, 3rem + 2.5vw, 88px);
    font-weight: 400;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.035em;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    font-variant-caps: all-small-caps;
    line-height: 1.5;
    margin-top: var(--space-1);
}

.stats-asof {
    text-align: center;
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    margin-top: var(--space-6);
    letter-spacing: 0.02em;
}

/* --- Callout Boxes --- */
.callout,
.construction-callout {
    padding: var(--space-4) var(--space-5);
}

.callout {
    background: var(--paper-dim);
    border-left: 3px solid var(--ink-whisper);
    margin: var(--space-6) 0;
}

.callout-title {
    color: var(--ink-subtle);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.callout p {
    margin-bottom: var(--space-2);
    color: var(--ink-muted);
}

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

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

/* Section connectors — single-sentence bridges between major sections */
.section-connector {
    color: var(--ink-subtle);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    text-align: center;
    max-width: 45ch;
    margin: var(--space-5) auto var(--space-3);
}

/* --- Zone Status Board --- */
.zone-board {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-text);
    font-size: var(--text-sm);
    margin-bottom: var(--space-8);
}

.zone-board th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--ink);
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: var(--ink-muted);
    font-weight: 600;
}

.zone-board td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ink-hint);
    vertical-align: top;
    line-height: 1.5;
    transition: background var(--transition-micro);
}

.zone-board td:last-child {
    color: var(--ink-subtle);
    font-size: var(--text-xs);
}

.zone-board tr:last-child td {
    border-bottom: none;
}

.zone-board tbody tr:hover td {
    background: var(--paper-hover);
}

.zone-board tbody tr:hover .zone-board-group-label {
    background: transparent;
}

/* Zone status indicators — dot + typography for accessibility */
.zone-status-live {
    color: var(--ink);
    font-weight: 600;
}

.zone-status-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-live);
    margin-right: 0.5em;
    vertical-align: 0.15em;
}

.zone-status-testnet {
    color: var(--ink-muted);
}

.zone-status-testnet {
    position: relative;
}

.zone-status-testnet::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-testnet);
    border-radius: 50%;
    margin-right: 0.5em;
    vertical-align: 0.15em;
    animation: testnet-breathe 2.5s var(--ease-in-out-sine) infinite;
}

.zone-status-pipe {
    color: var(--ink-faint);
}

.zone-status-pipe::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--ink-whisper);
    margin-right: 0.5em;
    vertical-align: 0.15em;
}

.zone-board-group-label {
    color: var(--ink-subtle);
    padding-top: var(--space-5);
    font-weight: 600;
}

.zone-board-detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    font-weight: 400;
    margin-top: 0.15em;
}

/* Testnet callout */
.construction-callout {
    margin-top: var(--space-8);
    border-left: 4px solid var(--color-testnet);
    background: var(--paper-dim);
    padding: var(--space-5) var(--space-6);
}

.construction-callout p {
    max-width: var(--measure);
    color: var(--ink-muted);
    font-size: var(--text-base);
    line-height: 1.65;
}

.construction-callout strong {
    color: var(--ink);
}

/* --- Buttons --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-4);
    min-height: 44px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border: 1px solid var(--ink);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--ink-muted);
    border-color: var(--ink-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-4);
    min-height: 44px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--ink-hint);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    cursor: pointer;
}
.btn-secondary:hover {
    border-color: var(--ink-whisper);
    background: var(--paper-dim);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Inverse variants for dark backgrounds */
.btn-primary--inverse {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.btn-primary--inverse:hover {
    background: var(--paper-dim);
    border-color: var(--paper-dim);
    transform: translateY(-1px);
    box-shadow: var(--shadow-dark-lg);
}

.btn-secondary--inverse {
    background: transparent;
    color: var(--terminal-text);
    border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary--inverse:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-dark-md);
}

.btn-arrow {
    display: inline-block;
    margin-left: 0.25em;
    transition: transform var(--transition-fast);
}
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow { transform: translateX(4px); }

/* Network proof points */
.network-proofs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.network-proofs p {
    padding-left: var(--space-3);
    border-left: 2px solid var(--ink-hint);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ink-muted);
}

/* --- Border Collapse ---
   Prevent doubled borders when adjacent sections
   each declare their own border */
.stats-section + .stack-section,
.stats-section + .deployments-section,
.product-hero + .stats-section,
.pillars-section + .paths-section,
.magnitude-section + .deployments-section,
.stack-section + .deployments-section,
.deployments-section + .deployments-section {
    border-top: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .stat-item + .stat-item:nth-child(odd)::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .stats-section {
        padding: var(--space-8) 0 var(--space-10);
    }

    .stat-number {
        font-size: clamp(36px, 2.2rem + 1.5vw, 56px);
    }

    .stat-item + .stat-item::before {
        display: none;
    }

    .network-proofs {
        grid-template-columns: 1fr;
    }

    /* Team icon links — meet 44px touch target */
    .team-icon-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .zone-board {
        font-size: var(--text-xs);
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .zone-board th,
    .zone-board td {
        padding: var(--space-1) var(--space-1-5);
    }

    /* Hide redundant Status column on mobile — dot indicators suffice */
    .zone-board th:nth-child(2),
    .zone-board td:nth-child(2) {
        display: none;
    }

    .construction-callout {
        padding: var(--space-4) var(--space-4);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--space-3);
    }

    .stat-number {
        font-size: clamp(32px, 2rem + 1vw, 44px);
        letter-spacing: -0.02em;
    }

    .stats-section {
        padding: var(--space-6) 0 var(--space-8);
    }
}

@media (min-width: 1400px) {
    .stats-section {
        padding: var(--space-10) 0;
    }

    .stat-number {
        font-size: clamp(64px, 4rem + 2vw, 96px);
    }
}
/* ═══════════════════════════════════════
   HOMEPAGE
   Hero, mesh, bridge/thesis, network,
   code immersive, distribution, founder,
   pillars, paths, credibility
   ═══════════════════════════════════════ */

/* --- Hero --- */
.hero {
    padding: var(--space-10) 0 var(--space-8);
}

.hero-content {
    max-width: 52ch;
}

.hero-eyebrow {
    color: var(--ink-subtle);
    margin-bottom: var(--space-2);
    display: block;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 2.5rem + 2vw, 72px);
    line-height: 1.04;
    color: var(--ink);
    margin-bottom: var(--space-3);
    letter-spacing: -0.018em;
    word-spacing: 0.02em;
    max-width: 18ch;
    text-wrap: balance;
    /* font-feature-settings inherited from h1 reset */
}

.hero-subtitle {
    font-size: clamp(17px, 1rem + 0.2vw, 20px);
    line-height: 1.72;
    color: var(--ink-muted);
    max-width: 50ch;
    letter-spacing: 0.003em;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

/* --- Mesh Visualization --- */
.mesh-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(560px, 90vh, 1080px);
    overflow: hidden;
    background: var(--paper);
}

#mesh-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mesh-hero svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
}

.mesh-hero .mesh-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 11%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) var(--space-2);
    background: linear-gradient(
        to top,
        var(--paper) 0%,
        rgba(254, 253, 251, 0.97) 30%,
        rgba(254, 253, 251, 0.80) 60%,
        rgba(254, 253, 251, 0.30) 85%,
        transparent 100%
    );
    pointer-events: none;
}

.mesh-hero .mesh-overlay > * {
    pointer-events: none;
    max-width: var(--max-width);
    margin-inline: auto;
    width: 100%;
}

.mesh-node {
    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.mesh-node:focus,
.mesh-node:focus-visible {
    outline: none !important;
}

.mesh-node-circle {
    transition: r var(--transition-fast), opacity var(--transition-fast);
    transform-box: fill-box;
    transform-origin: center;
}

.mesh-node:hover .mesh-node-circle {
    transform: scale(1.1);
}

.mesh-node-diamond {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    transform-box: fill-box;
    transform-origin: center;
}

.mesh-node:hover .mesh-node-diamond {
    transform: scale(1.1);
}

.mesh-node:hover .mesh-node-glow {
    opacity: 1;
}

.mesh-node-glow {
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Edge strokes scaled for 1920x1080 viewBox */
.mesh-edge {
    fill: none;
    stroke-width: 1.5;
    opacity: 0.4;
    stroke-linecap: round;
    transition: opacity var(--transition-base), stroke-width var(--transition-base);
}

.mesh-edge.highlight {
    opacity: 0.85;
    stroke-width: 2.5;
}

/* Labels scaled for 1920x1080 viewBox */
.mesh-label {
    font-family: var(--font-caption);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    fill: var(--ink);
    text-anchor: middle;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mesh-label.visible {
    opacity: 1;
}

/* Mesh legend */
.mesh-legend {
    position: absolute;
    top: var(--space-3);
    right: calc(var(--space-4) + 340px + var(--space-2));
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    background: rgba(254, 253, 251, 0.92);
    border: 1px solid var(--ink-hint);
    font-family: var(--font-caption);
    font-size: 11px;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    z-index: var(--z-floating);
    pointer-events: auto;
}

.mesh-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.mesh-legend-swatch {
    width: 20px;
    height: 2.5px;
    display: inline-block;
    flex-shrink: 0;
}

.mesh-legend-swatch--fz-fz {
    background: repeating-linear-gradient(
        90deg,
        var(--corridor-fz-fz) 0px,
        var(--corridor-fz-fz) 5px,
        transparent 5px,
        transparent 8px
    );
}

.mesh-legend-swatch--fz-host {
    background: repeating-linear-gradient(
        90deg,
        var(--corridor-fz-host) 0px,
        var(--corridor-fz-host) 7px,
        transparent 7px,
        transparent 10px
    );
}

.mesh-legend-swatch--cross   { background: var(--corridor-cross); }
.mesh-legend-swatch--federal { background: var(--corridor-federal); }

/* Zone composition popup card */
.zone-card {
    position: absolute;
    background: rgba(254, 253, 251, 0.98);
    border: 1px solid var(--ink-hint);
    padding: var(--space-3) var(--space-3) var(--space-2);
    z-index: var(--z-popup);
    min-width: 260px;
    max-width: 320px;
    width: max-content;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.zone-card.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.zone-card-type {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-ghost);
    margin-bottom: var(--space-1);
}

.zone-card-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    line-height: 1.2;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1-5);
    border-bottom: 1px solid var(--ink-hint);
}

.zone-card-layers {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zone-card-layer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-1);
    padding: var(--space-1) 0;
    border-bottom: 1px solid rgba(229, 226, 223, 0.5);
}

.zone-card-layer:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.zone-card-domain {
    font-family: var(--font-caption);
    font-variant-caps: all-small-caps;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.zone-card-statute {
    font-family: var(--font-caption);
    font-size: clamp(11px, 0.7rem + 0.05vw, 13px);
    color: var(--ink-subtle);
    margin-left: auto;
}

.zone-card-source {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--ink-ghost);
    width: 100%;
    margin-top: 1px;
}

/* --- Bridge / Thesis Section --- */
.bridge-section {
    padding: var(--space-10) 0 var(--space-10);
    background: var(--paper);
}

.bridge-section .section-eyebrow {
    margin-bottom: var(--space-3);
}

.bridge-section .section-title {
    margin-bottom: var(--space-4);
    margin-left: -0.03em;
    max-width: 18ch;
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.bridge-evidence {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: var(--space-6) 0;
    border-top: 1px solid var(--ink-hint);
    border-bottom: 1px solid var(--ink-hint);
}
.bridge-evidence-item {
    padding: var(--space-5) var(--space-5);
    border-right: 1px solid var(--ink-hint);
}
.bridge-evidence-item:last-child { border-right: none; }
.bridge-evidence-number {
    font-family: var(--font-display);
    font-size: clamp(48px, 3rem + 2vw, 80px);
    font-weight: 400;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.03em;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: var(--space-2);
}
.bridge-evidence-label {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 24ch;
}
.bridge-section .btn-secondary { margin-top: var(--space-4); }

/* Shared prose styling for narrative sections */
.bridge-section p,
.os-section p,
.distribution-section p {
    max-width: var(--measure);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.72;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 3 4;
    hyphenate-limit-lines: 2;
    orphans: 3;
    widows: 3;
}

.bridge-section p:first-of-type,
.os-section p:first-of-type,
.distribution-section p:first-of-type {
    font-size: clamp(18px, 1.06rem + 0.2vw, 21px);
    line-height: 1.72;
    color: var(--ink);
}

.bridge-section p:not(:first-of-type),
.os-section p:not(:first-of-type),
.distribution-section p:not(:first-of-type) {
    color: var(--ink-muted);
}

.bridge-section p:last-child,
.os-section p:last-child,
.distribution-section p:last-child {
    margin-bottom: 0;
}

.bridge-section p {
    color: var(--ink);
}

.bridge-section a,
.distribution-section a {
    color: var(--ink-subtle);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-whisper);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.bridge-section a:hover,
.distribution-section a:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}

/* --- Operating System Section --- */
.os-section {
    padding: var(--space-10) 0 var(--space-10);
    background: var(--paper-dim);
}

/* ::before divider consolidated above with bridge, network */

.os-section .section-eyebrow {
    margin-bottom: var(--space-3);
}

.os-section .section-title {
    line-height: 1.14;
    margin-bottom: var(--space-4);
    max-width: 22ch;
    margin-left: -0.03em;
    letter-spacing: -0.012em;
}

/* Prose styling consolidated above with bridge, distribution */

/* --- Network Section --- */
.network-section {
    padding: var(--space-10) 0 var(--space-10);
    background: var(--paper-dim);
}

/* ::before divider consolidated above with bridge, os */

.network-section .section-eyebrow {
    display: block;
    margin-bottom: var(--space-3);
}

.network-section .section-title {
    font-family: var(--font-display);
    line-height: 1.14;
    margin-bottom: var(--space-4);
    max-width: 30ch;
    margin-left: -0.03em;
    letter-spacing: -0.012em;
}

.network-section .section-intro {
    max-width: var(--measure);
    margin-bottom: var(--space-6);
    color: var(--ink-muted);
    font-size: var(--text-base);
    line-height: 1.72;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 3 4;
    hyphenate-limit-lines: 2;
    orphans: 3;
    widows: 3;
}

/* --- Code Immersive Section --- */
.code-immersive {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--terminal-bg);
    padding: var(--space-10) 0 var(--space-10);
    overflow: visible;
}

.code-immersive .container {
    position: relative;
    z-index: var(--z-base);
}

.code-immersive-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-12);
    align-items: center;
}

.code-immersive-text {
    color: var(--terminal-text);
}

.code-immersive-text .section-eyebrow {
    color: var(--terminal-accent);
    border-bottom-color: var(--terminal-accent-30);
    letter-spacing: var(--tracking-caps);
}

.code-immersive-text .section-title {
    color: var(--terminal-text);
    line-height: 1.14;
    margin-bottom: var(--space-4);
    max-width: 14ch;
    margin-left: -0.03em;
}

.code-immersive-text p {
    color: var(--terminal-text-65);
    font-size: var(--text-base);
    line-height: 1.72;
    margin-bottom: var(--space-4);
}

.code-immersive-text .code-section-link {
    margin-top: var(--space-4);
}

.code-immersive-text .code-section-link a {
    color: var(--terminal-accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--terminal-accent-30);
    transition: border-color var(--transition-fast);
}

.code-immersive-text .code-section-link a:hover {
    border-color: var(--terminal-accent);
}

/* --- Distribution Section --- */
.distribution-section {
    padding: var(--space-10) 0 var(--space-10);
    background: var(--paper);
}

.corridor-math {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: var(--space-6) 0 var(--space-5);
    border-top: 1px solid var(--ink-hint);
    border-bottom: 1px solid var(--ink-hint);
}
.corridor-math-step {
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--ink-hint);
    text-align: center;
    transition: background var(--transition-base);
}
.corridor-math-step:hover {
    background: var(--paper-dim);
}
.corridor-math-step:last-child { border-right: none; }
.corridor-math-zones {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    margin-bottom: var(--space-2);
}
.corridor-math-corridors {
    font-family: var(--font-display);
    font-size: clamp(36px, 2.25rem + 1.5vw, 56px);
    font-weight: 400;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: var(--space-1);
}
.corridor-math-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}

.distribution-section .section-eyebrow {
    display: block;
    margin-bottom: var(--space-3);
}

.distribution-section .section-title {
    font-size: var(--text-2xl);
    line-height: 1.14;
    margin-bottom: var(--space-4);
    max-width: 22ch;
    letter-spacing: -0.012em;
    margin-left: -0.03em;
}

/* Prose styling consolidated above with bridge, os */

/* --- Founder Section --- */
.founder-section {
    position: relative;
    padding: var(--space-10) 0 var(--space-10);
    text-align: center;
    border-top: none;
}

/* Decorative rule removed — background shift delineates sections */

.founder-statement {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--ink-muted);
    line-height: 1.58;
    max-width: 50ch;
    margin: 0 auto;
    text-indent: -0.05em;
    hanging-punctuation: first allow-end last;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.founder-link {
    margin-top: var(--space-5);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.founder-link a {
    color: var(--ink-subtle);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-hint);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.founder-link a:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}

/* --- Pillar Cards --- */
.pillars-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--ink-hint);
}

.pillar {
    padding: var(--space-6) var(--space-5);
    border-right: 1px solid var(--ink-hint);
    transition: background var(--transition-base);
}

.pillar:last-child {
    border-right: none;
}

.pillar:hover {
    background: var(--paper-dim);
}

.pillar-allocation {
    color: var(--ink-ghost);
    margin-bottom: var(--space-4);
    font-weight: 600;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "lnum" 1, "tnum" 1;
    letter-spacing: var(--tracking-caps);
}

.pillar-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-4);
    line-height: 1.22;
    letter-spacing: var(--tracking-display);
}

.pillar-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.72;
    margin-bottom: var(--space-4);
}

.pillar-companies {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    line-height: 2;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.pillar-companies a {
    color: var(--ink-subtle);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.pillar-companies a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

.flywheel-note {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    font-style: italic;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-hint);
    max-width: var(--measure);
    line-height: 1.7;
}

/* --- Path Cards --- */
.paths-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
}

.paths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4) var(--space-3);
}

.path-card {
    padding: var(--space-5) var(--space-4);
    background: var(--paper);
    border: 1px solid var(--ink-hint);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base),
                background-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.path-card:hover {
    border-color: var(--ink-whisper);
    background: var(--paper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.path-card:active {
    transform: translateY(0);
    box-shadow: none;
}

.path-audience {
    color: var(--ink-ghost);
    margin-bottom: var(--space-2);
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.path-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink);
    margin-bottom: var(--space-3);
    line-height: 1.28;
    letter-spacing: var(--tracking-display);
}

.path-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    flex-grow: 1;
}

.path-arrow {
    display: inline-block;
    margin-left: 0.25em;
    transition: transform var(--transition-fast);
}

.path-card:hover .path-arrow {
    transform: translateX(4px);
}

/* --- Corridor Trace --- */
.corridor-trace-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
}

.corridor-trace-section .section-title {
    margin-bottom: var(--space-3);
}

.corridor-trace-section p {
    margin-bottom: var(--space-5);
}

.corridor-trace-terminal {
    max-width: 740px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--terminal-deep);
    border: 1px solid var(--terminal-border);
    box-shadow: var(--shadow-terminal);
}

.corridor-trace-terminal .code-block-header .dot:nth-child(1) { background: var(--dot-red); }
.corridor-trace-terminal .code-block-header .dot:nth-child(2) { background: var(--dot-yellow); }
.corridor-trace-terminal .code-block-header .dot:nth-child(3) { background: var(--dot-green); }

.corridor-trace-pre {
    background: var(--terminal-deep);
    padding: var(--space-4) var(--space-4);
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.75rem + 0.1vw, 13.5px);
    line-height: 1.85;
    color: var(--terminal-text);
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre;
    margin: 0;
    height: 420px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
}

.corridor-trace-pre::-webkit-scrollbar { width: 6px; }
.corridor-trace-pre::-webkit-scrollbar-track { background: transparent; }
.corridor-trace-pre::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 3px; }

.corridor-trace-comparison {
    max-width: 740px;
    margin: var(--space-6) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--ink-hint);
}

.comparison-col {
    padding: var(--space-5) var(--space-5);
}

.comparison-col:first-child {
    border-right: 1px solid var(--ink-hint);
}

.comparison-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1;
    margin-bottom: var(--space-3);
}

.comparison-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: var(--tracking-display);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    margin-bottom: var(--space-1);
}

.comparison-value--cost {
    margin-top: var(--space-4);
}

.comparison-detail {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    line-height: 1.55;
    max-width: 36ch;
}

/* --- Credibility Strip --- */
.credibility-section {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--ink-hint);
    background: var(--paper-dim);
}

.credibility-content {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    text-align: center;
    line-height: 2.4;
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.credibility-sep {
    color: var(--ink-whisper);
    margin: 0 0.5em;
}

/* --- Activity Terminal --- */
.mesh-activity-terminal {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    width: 340px;
    z-index: var(--z-raised);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        var(--shadow-md);
    pointer-events: none;
}

.mesh-activity-terminal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(254, 253, 251, 0.72);
    z-index: var(--z-below);
}

.activity-terminal-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.activity-terminal-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.activity-terminal-header .dot:nth-child(1) { background: var(--dot-red); }
.activity-terminal-header .dot:nth-child(2) { background: var(--dot-yellow); }
.activity-terminal-header .dot:nth-child(3) { background: var(--dot-green); }

.activity-terminal-header .title {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(26, 25, 23, 0.45);
    letter-spacing: 0.03em;
}

.activity-terminal-body {
    position: relative;
    height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: rgba(26, 25, 23, 0.7);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
    scrollbar-width: none;
    -webkit-font-smoothing: antialiased;
}

.activity-terminal-body::-webkit-scrollbar { display: none; }

.activity-line {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
    margin-bottom: 2px;
}

.activity-line.visible {
    opacity: 1;
    transform: none;
}

.activity-prompt {
    color: rgba(26, 25, 23, 0.4);
}

.activity-zone {
    color: var(--ink);
    font-weight: 600;
}

.activity-amount {
    color: var(--ink);
    font-weight: 600;
}

/* --- Mesh Revenue Counter --- */
.mesh-revenue-counter {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-ghost);
    letter-spacing: 0.03em;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--ink-hint);
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.mesh-revenue-counter .revenue-value {
    color: var(--ink-subtle);
    font-weight: 600;
}

/* --- Zone Composer --- */
.zc-form {
    background: var(--terminal-bg, #1a1917);
    padding: var(--space-5) var(--space-5) var(--space-4);
    color: var(--terminal-text, #e5e2df);
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.75rem + 0.1vw, 14px);
    line-height: 1.6;
    min-height: 100%;
}

.zc-header {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--terminal-dim, #7a7672);
}

.zc-header .zc-prompt {
    color: var(--terminal-accent, #b89f82);
}

.zc-header .zc-flag {
    color: var(--terminal-dim, #7a7672);
}

.zc-domain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1-5) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.zc-domain-row:last-of-type {
    border-bottom: none;
}

.zc-domain-label {
    color: var(--terminal-dim, #7a7672);
    font-size: clamp(10px, 0.625rem + 0.08vw, 12px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 0;
}

.zc-select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--terminal-text, #e5e2df);
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.69rem + 0.08vw, 13px);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7672'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
    min-width: 120px;
    max-width: 180px;
}

.zc-select:focus-visible {
    border-color: var(--terminal-accent, #b89f82);
    outline: none;
}

.zc-select option {
    background: var(--terminal-bg);
    color: var(--terminal-text);
}

.zc-actions {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.zc-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--terminal-accent, #b89f82);
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.69rem + 0.08vw, 13px);
    padding: var(--space-1-5) var(--space-2);
    cursor: pointer;
    border-radius: 0;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
}

.zc-action-btn:hover:not(:disabled) {
    border-color: var(--terminal-accent, #b89f82);
    background: rgba(184, 159, 130, 0.06);
}

.zc-action-btn:focus-visible {
    border-color: var(--terminal-accent, #b89f82);
    outline: none;
}

.zc-action-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.zc-action-btn.completed {
    border-color: var(--color-live, #2d7d46);
    color: var(--color-live, #2d7d46);
}

.zc-btn-icon {
    font-size: 10px;
    opacity: 0.6;
}

.zc-btn-check {
    font-size: 12px;
}

.zc-hint {
    margin-top: var(--space-3);
    color: var(--terminal-dim, #7a7672);
    font-size: clamp(10px, 0.625rem + 0.06vw, 11px);
    font-style: italic;
    opacity: 0.6;
}

/* Zone composer output fills scene area */
#zc-output .code-block {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* --- Mesh Multi-Select & Economics --- */

.mesh-node.selected .mesh-node-glow {
    opacity: 0.8;
    fill: rgba(197, 165, 114, 0.15);
}

.mesh-node.selected .mesh-node-circle {
    fill: var(--gold);
}

.mesh-selection-edge {
    pointer-events: none;
    transition: stroke-dashoffset 0.8s var(--ease-out-expo);
}

.mesh-economics {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    z-index: var(--z-floating);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 20px;
    background: rgba(254, 253, 251, 0.95);
    border: 1px solid var(--ink-hint);
    font-family: var(--font-caption);
    font-size: 12px;
    color: var(--ink-subtle);
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    opacity: 0.85;
}

.mesh-economics.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mesh-economics-sep {
    color: var(--ink-whisper);
    margin: 0 8px;
}

.mesh-economics-revenue {
    color: var(--ink);
    font-weight: 600;
}

.mesh-economics-prompt {
    color: var(--ink-ghost);
    font-style: italic;
}

.mesh-economics-zone {
    color: var(--ink);
    font-weight: 600;
}

.mesh-economics-hint {
    color: var(--ink-ghost);
}

.mesh-economics-clear {
    background: none;
    border: none;
    color: var(--ink-ghost);
    font-size: 16px;
    cursor: pointer;
    padding: 0 0 0 12px;
    line-height: 1;
    transition: color var(--transition-fast);
}

.mesh-economics-clear:hover {
    color: var(--ink);
}

.mesh-economics-activate {
    background: none;
    border: none;
    width: 12px;
    height: 12px;
    padding: 0;
    margin-left: 8px;
    cursor: default;
    opacity: 0;
    pointer-events: auto;
}

/* --- Economics Breakdown Panel --- */
.mesh-economics-breakdown {
    position: absolute;
    top: calc(var(--space-3) + 48px);
    left: var(--space-4);
    z-index: var(--z-floating);
    max-width: 420px;
    background: rgba(254, 253, 251, 0.97);
    border: 1px solid var(--ink-hint);
    font-family: var(--font-caption);
    font-size: 12px;
    color: var(--ink-subtle);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.mesh-economics-breakdown.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mesh-breakdown-inner {
    padding: var(--space-3) var(--space-4);
}

.mesh-breakdown-insight {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.55;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ink-hint);
    font-style: italic;
}

.mesh-breakdown-section {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ink-hint);
}

.mesh-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-1);
}

.mesh-breakdown-label {
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.mesh-breakdown-total {
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.mesh-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    padding-left: var(--space-2);
}

.mesh-breakdown-name {
    color: var(--ink-ghost);
    font-size: 11px;
}

.mesh-breakdown-amount {
    color: var(--ink-subtle);
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-size: 11px;
}

.mesh-breakdown-row--note {
    padding-top: 2px;
}
.mesh-breakdown-row--note .mesh-breakdown-name {
    font-style: italic;
    color: var(--ink-whisper);
    font-size: 10px;
}

.mesh-breakdown-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-1);
    margin-bottom: var(--space-1);
}

.mesh-breakdown-grand {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.mesh-breakdown-note {
    font-size: 10px;
    color: var(--ink-ghost);
    font-style: italic;
    line-height: 1.4;
}

/* --- Hub Advantage Section --- */
.mesh-hub-section {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--ink-hint);
}

.mesh-hub-compare {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.mesh-hub-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesh-hub-col--late {
    text-align: right;
    opacity: 0.5;
}

.mesh-hub-col-label {
    font-size: 10px;
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-ghost);
}

.mesh-hub-metric {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    font-feature-settings: "lnum" 1, "tnum" 1;
    color: var(--ink-subtle);
}

.mesh-hub-unit {
    font-size: 10px;
    color: var(--ink-ghost);
}

.mesh-hub-ratio {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--gold);
    flex-shrink: 0;
}

.mesh-hub-projection {
    font-size: 10px;
    font-style: italic;
    color: var(--ink-ghost);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--ink-hint);
}

/* --- Corridor Revenue Labels --- */
.mesh-corridor-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-muted);
    font-feature-settings: "lnum" 1, "tnum" 1;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-expo) 0.4s;
}

.mesh-corridor-label.visible {
    opacity: 1;
}

.mesh-corridor-label-bg {
    fill: rgba(254, 253, 251, 0.88);
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-expo) 0.4s;
}

.mesh-corridor-label-bg.visible {
    opacity: 1;
}

/* --- Temporarily hidden --- */
.mesh-economics-growth { display: none; }
.nav-primary a[href="/portfolio.html"],
.footer-nav a[href="/portfolio.html"] { display: none; }

/* --- Mesh Action Buttons (Genesis, Growth, Explore) --- */
.mesh-economics-genesis,
.mesh-economics-growth,
.mesh-economics-explore {
    background: rgba(26, 25, 23, 0.03);
    border: 1px solid var(--ink-faint);
    color: var(--ink-subtle);
    font-family: var(--font-caption);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 6px 14px;
    margin-left: 8px;
    pointer-events: auto;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.mesh-economics-genesis:hover,
.mesh-economics-growth:hover,
.mesh-economics-explore:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: rgba(26, 25, 23, 0.07);
}

.mesh-economics-genesis:focus-visible,
.mesh-economics-growth:focus-visible,
.mesh-economics-explore:focus-visible {
    outline: 2px solid var(--ink-muted);
    outline-offset: 2px;
}

/* --- Factory hint in economics bar --- */
.mesh-economics-factory-hint {
    color: var(--gold);
    font-weight: 500;
}

/* --- Gold Hub Advantage Text --- */
.mesh-economics-hub {
    color: var(--gold);
    font-weight: 600;
}

/* --- Zone Hover Card --- */
.mesh-hover-card {
    position: absolute;
    background: rgba(254, 253, 251, 0.97);
    border: 1px solid var(--ink-hint);
    padding: var(--space-2) var(--space-3);
    z-index: var(--z-popup);
    min-width: 160px;
    max-width: 240px;
    width: max-content;
    opacity: 0;
    transition: opacity 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
    pointer-events: none;
}

.mesh-hover-card.visible {
    opacity: 1;
}

.mesh-hover-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: var(--tracking-display);
}

.mesh-hover-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-subtle);
    margin-top: 4px;
    margin-bottom: 6px;
}

.mesh-hover-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
}

.mesh-hover-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding-top: 6px;
    border-top: 1px solid var(--ink-hint);
}

.mesh-hover-corridors {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.mesh-hover-rev {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.mesh-hover-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.mesh-hover-domains span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-ghost);
    letter-spacing: 0.02em;
}

.mesh-hover-domains span:not(:last-child)::after {
    content: ' \00b7';
    color: var(--ink-whisper);
}

.mesh-hover-source {
    font-size: 9px;
    color: var(--ink-whisper);
    line-height: 1.3;
    margin-top: 4px;
    font-style: italic;
}

/* Zone node selection pulse */
@keyframes selectPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.mesh-node.selected .mesh-node-circle,
.mesh-node.selected .mesh-node-diamond {
    animation: selectPulse 300ms var(--ease-out-expo);
}

/* --- Genesis Animation --- */
.genesis-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
    background: rgba(254, 253, 251, 0.15);
}

.genesis-overlay.active {
    opacity: 1;
}

.genesis-overlay.exiting {
    opacity: 0;
    transition: opacity 1.2s var(--ease-out-expo);
}

.genesis-hud {
    position: absolute;
    top: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.genesis-counters {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    padding: var(--space-3) var(--space-6);
    background: rgba(254, 253, 251, 0.94);
    border: 1px solid var(--ink-hint);
}

.genesis-counter-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.genesis-rev {
    font-family: var(--font-display);
    font-size: clamp(32px, 2rem + 1.5vw, 56px);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.genesis-zones,
.genesis-corridors {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.25rem + 0.5vw, 32px);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    color: var(--ink);
    line-height: 1;
}

.genesis-counter-label {
    font-family: var(--font-caption);
    font-size: 10px;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1;
}

.genesis-wave-label {
    font-family: var(--font-caption);
    font-size: 13px;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.genesis-wave-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.genesis-skip {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: none;
    border: 1px solid var(--ink-hint);
    color: var(--ink-subtle);
    font-family: var(--font-caption);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    z-index: var(--z-overlay);
}

.genesis-skip:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.genesis-skip:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.genesis-punchline {
    position: absolute;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(16px, 1rem + 0.5vw, 22px);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 48ch;
    opacity: 0;
    transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
    pointer-events: none;
}

.genesis-punchline.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.genesis-punchline-main {
    display: block;
    margin-bottom: 0.6em;
}

.genesis-punchline em {
    display: block;
    color: var(--gold);
    font-style: italic;
    font-size: 1.15em;
    margin-top: 0.3em;
}

.genesis-edge {
    transition: stroke-dashoffset 0.8s var(--ease-out-expo);
}

/* --- Growth Simulator Overlay --- */
.growth-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
    background: rgba(254, 253, 251, 0.15);
}

.growth-overlay.active {
    opacity: 1;
}

.growth-overlay.exiting {
    opacity: 0;
    transition: opacity 1.2s var(--ease-out-expo);
}

.growth-hud {
    position: absolute;
    bottom: 365px;
    left: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: rgba(254, 253, 251, 0.94);
    border: 1px solid var(--ink-hint);
    transform: scale(0.8);
    transform-origin: bottom left;
}

.growth-phase-label {
    font-family: var(--font-caption);
    font-size: 13px;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
    min-height: 1.2em;
}

.growth-phase-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.growth-hero-ratio {
    font-family: var(--font-display);
    font-size: clamp(56px, 3.5rem + 3vw, 100px);
    color: var(--gold);
    line-height: 1;
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    letter-spacing: -0.03em;
}

.growth-hero-label {
    font-family: var(--font-caption);
    font-size: 11px;
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1;
    margin-bottom: var(--space-4);
}

.growth-counters {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
}

.growth-counter-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.growth-zones,
.growth-corridors,
.growth-rev {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.25rem + 0.5vw, 32px);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    color: var(--ink);
    line-height: 1;
}

.growth-counter-label {
    font-family: var(--font-caption);
    font-size: 10px;
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1;
}

.growth-skip {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: none;
    border: 1px solid var(--ink-hint);
    color: var(--ink-subtle);
    font-family: var(--font-caption);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    z-index: var(--z-overlay);
}

.growth-skip:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.growth-skip:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.growth-punchline {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(16px, 1rem + 0.5vw, 22px);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 48ch;
    opacity: 0;
    transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
    pointer-events: none;
}

.growth-punchline.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.growth-punchline-main {
    display: block;
    margin-bottom: 0.6em;
}

.growth-edge {
    transition: stroke-dashoffset 0.6s var(--ease-out-expo);
}

/* Genesis & Growth button styles consolidated above with .mesh-economics-explore */

/* --- Responsive --- */
@media (max-width: 1024px) {
    .paths-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        border: none;
    }

    .pillar {
        border-right: none;
        border: 1px solid var(--ink-hint);
        margin-bottom: -1px;
    }

    .pillar:last-child {
        border-right: 1px solid var(--ink-hint);
    }
}

@media (max-width: 768px) {
    /* Hide mesh on mobile — zone labels overlap hero text at small widths */
    #mesh-container,
    .mesh-legend,
    .mesh-activity-terminal,
    .mesh-economics,
    .mesh-economics-breakdown,
    .mesh-hover-card,
    .genesis-overlay,
    .mesh-economics-genesis,
    .mesh-economics-explore,
    .mesh-economics-growth,
    .mesh-corridor-label,
    .mesh-corridor-label-bg,
    .mesh-revenue-counter {
        display: none;
    }

    .mesh-hero {
        height: auto;
    }

    .mesh-hero .mesh-overlay {
        position: static;
        height: auto;
        background: none;
        padding: var(--space-10) var(--gutter) var(--space-8);
        pointer-events: auto;
    }

    .mesh-hero .mesh-overlay > * {
        pointer-events: auto;
    }

    .hero-title {
        font-size: clamp(32px, 2rem + 2vw, 48px);
        max-width: 15ch;
        line-height: 1.06;
    }

    .hero-subtitle {
        max-width: 36ch;
    }

    .hero {
        padding: var(--space-6) 0 var(--space-6);
    }

    .bridge-section,
    .os-section,
    .distribution-section {
        padding: var(--space-8) 0 var(--space-6);
    }

    .network-section {
        padding: var(--space-6) 0 var(--space-6);
    }

    .bridge-section .section-title {
        font-size: var(--text-xl);
        max-width: none;
    }

    .os-section .section-title,
    .distribution-section .section-title {
        font-size: var(--text-xl);
        max-width: none;
    }

    .bridge-evidence { grid-template-columns: 1fr; }
    .bridge-evidence-item { border-right: none; border-bottom: 1px solid var(--ink-hint); padding: var(--space-5) 0; }
    .bridge-evidence-item:last-child { border-bottom: none; }

    .corridor-math { grid-template-columns: repeat(2, 1fr); }
    .corridor-math-step:nth-child(2) { border-right: none; }
    .corridor-math-step:nth-child(-n+2) { border-bottom: 1px solid var(--ink-hint); }

    .corridor-trace-section { padding: var(--space-8) 0 var(--space-6); }
    .corridor-trace-terminal { /* sharp corners at all breakpoints */ }
    .corridor-trace-pre {
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
        font-size: 11.5px;
    }
    .corridor-trace-comparison { grid-template-columns: 1fr; }
    .comparison-col:first-child { border-right: none; border-bottom: 1px solid var(--ink-hint); }

    .cta-section--dark .cta-actions { flex-direction: column; }
    .cta-section--dark .cta-actions a { text-align: center; justify-content: center; }

    .stat-number {
        font-size: clamp(36px, 2.2rem + 1.5vw, 56px);
    }

    .paths-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

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

    .path-card {
        padding: var(--space-4) var(--space-4);
    }

    .code-immersive {
        padding: var(--space-10) 0;
    }

    .code-immersive-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .code-immersive-text {
        order: 1;
    }

    .code-immersive-text .section-title {
        font-size: var(--text-xl);
        max-width: none;
    }

    .code-panel {
        order: 0;
    }

    .founder-section {
        padding: var(--space-10) 0 var(--space-12);
    }

    .os-section,
    .network-section,
    .distribution-section {
        padding: var(--space-8) 0;
    }

    /* Zone composer mobile */
    .zc-form {
        padding: var(--space-3) var(--space-3) var(--space-2);
    }

    .zc-domain-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .zc-select {
        width: 100%;
        max-width: none;
    }

}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(28px, 1.75rem + 1.5vw, 40px);
        max-width: 12ch;
        line-height: 1.1;
    }

    .hero-subtitle {
        max-width: 30ch;
    }

    .bridge-section .section-title,
    .os-section .section-title,
    .distribution-section .section-title {
        font-size: var(--text-lg);
    }

    .bridge-evidence-number { font-size: clamp(36px, 2.25rem + 1.5vw, 48px); }
    .corridor-math-corridors { font-size: clamp(28px, 1.75rem + 1vw, 36px); }

    .corridor-trace-pre {
        font-size: 11px;
        padding: var(--space-3);
        height: auto;
        max-height: 50vh;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
    }
    .comparison-value { font-size: var(--text-lg); }

    .credibility-content {
        text-align: left;
    }

    .credibility-sep {
        display: none;
    }

    .credibility-content span {
        display: block;
        margin-bottom: var(--space-1);
    }

    .pillar {
        padding: var(--space-4);
    }

    .path-card {
        padding: var(--space-4);
    }
}

@media (min-width: 1400px) {
    .hero-title {
        font-size: clamp(56px, 3.5rem + 2vw, 80px);
    }

    .bridge-section,
    .os-section,
    .network-section,
    .distribution-section {
        padding: var(--space-12) 0;
    }

    .pillars-section {
        padding: var(--space-12) 0;
    }

    .code-immersive {
        padding: var(--space-12) 0;
    }

    .founder-section {
        padding: var(--space-12) 0;
    }
}

/* ── Scroll-synced code panel layout ── */
.code-scroll-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
    align-items: start;
}

.code-chapters {
    display: flex;
    flex-direction: column;
}

.code-chapter {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-10) 0;
    padding-top: calc(72px + var(--space-8));
    opacity: 0.15;
}

.code-chapter:first-child {
    padding-top: calc(72px + var(--space-8));
    min-height: 100vh;
}

.code-chapter:last-child {
    min-height: 80vh;
    padding-bottom: var(--space-10);
}

.code-chapter .section-title {
    color: var(--terminal-text);
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin-bottom: var(--space-5);
}

.code-chapter .section-eyebrow {
    color: var(--terminal-accent);
    border-bottom-color: var(--terminal-accent-30);
}

.code-chapter p,
.article-content .code-chapter p {
    color: var(--terminal-text);
    font-size: var(--text-base);
    line-height: 1.65;
    margin-bottom: var(--space-3);
    max-width: 42ch;
}

.code-chapter .code-section-link {
    margin-top: var(--space-4);
}

.code-chapter .code-section-link a {
    color: var(--terminal-accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--terminal-accent-30);
    transition: border-color var(--transition-fast);
}

.code-chapter .code-section-link a:hover {
    border-color: var(--terminal-accent);
}

/* Sticky panel — fills viewport below header, stays visible during scroll */
.code-panel-sticky {
    position: sticky;
    top: calc(72px + var(--space-6));
    align-self: start;
    height: calc(100vh - 72px - var(--space-6) - var(--space-6));
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Scene cross-fade — scenes fill the viewport-height panel */
.code-scene-area {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    background: var(--terminal-deep);
}

.code-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease-smooth), visibility 0.6s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    background: var(--terminal-deep);
}

.code-scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Scroll-synced responsive */
@media (max-width: 768px) {
    .code-scroll-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .code-panel-sticky {
        position: relative;
        top: 0;
        height: auto;
    }

    .code-scene-area {
        height: auto;
        flex: none;
        overflow-x: hidden;
    }

    #zc-output .code-block {
        font-size: 11px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
    }

    .code-chapter {
        min-height: auto;
        opacity: 1;
        padding: var(--space-3) 0;
    }

    .code-chapter .section-title {
        font-size: var(--text-lg);
    }

    .code-chapter p {
        font-size: var(--text-sm);
    }

    .code-scene {
        position: relative;
        pointer-events: auto;
    }

    .code-scene:not(.active) {
        display: none;
    }
}

/* Scroll-synced reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mesh-selection-edge {
        transition: none;
    }

    .mesh-corridor-label,
    .mesh-corridor-label-bg {
        transition: none;
    }

    .mesh-economics-breakdown {
        transition: none;
    }

    .mesh-hover-card {
        transition: none;
    }

    .activity-line {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .code-chapter {
        opacity: 1;
    }

    .code-scene {
        position: relative;
        opacity: 1;
        visibility: visible;
        transition: none;
        pointer-events: auto;
    }
}

/* Scroll-synced print */
@media print {
    .code-scene {
        position: relative;
        opacity: 1;
        visibility: visible;
        page-break-inside: avoid;
    }

    .code-chapter {
        opacity: 1;
        min-height: auto;
    }
}
/* ═══════════════════════════════════════
   PAGE STYLES
   Article, catalog, product, persona,
   reference pages
   ═══════════════════════════════════════ */

/* ═══════ EZ PAGE ═══════ */

.mesh-hero-ez {
    min-height: 400px;
    max-height: 60vh;
}

.page-ez .mesh-economics,
.page-ez .mesh-economics-breakdown {
    display: none !important;
}

.code-inline-accent {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--terminal-accent);
}

/* ═══════ EZ: Integration Diagram ═══════ */

.integration-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
    align-items: start;
}

.integration-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.integration-col-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.integration-item {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ink-hint);
    background: var(--paper);
}

.integration-item--mass {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
}

.integration-col--mass {
    position: relative;
}

.integration-col--mass::before,
.integration-col--mass::after {
    content: '';
    position: absolute;
    top: 50%;
    width: var(--space-4);
    border-top: 1px solid var(--ink-hint);
}

.integration-col--mass::before { left: calc(-1 * var(--space-4)); }
.integration-col--mass::after { right: calc(-1 * var(--space-4)); }

@media (max-width: 768px) {
    /* Hide EZ mesh on mobile */
    .mesh-hero-ez {
        display: none;
    }

    .integration-diagram {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .integration-col--mass::before,
    .integration-col--mass::after {
        display: none;
    }
}

.integration-table {
    margin-top: var(--space-8);
}

.commercial-evidence {
    margin-top: var(--space-8);
}

.commercial-detail {
    margin-top: var(--space-6);
}

.case-study-evidence {
    margin-top: var(--space-6);
}

.case-study-closing {
    margin-top: var(--space-6);
}

/* ═══════ EZ: Commercial Model ═══════ */

.ez-commercial-section {
    background: var(--paper-dim);
    padding: var(--space-10) 0;
}

.commercial-headline {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink-muted);
    line-height: var(--leading-body);
    margin-bottom: var(--space-3);
    font-weight: 400;
    max-width: var(--measure);
}

.commercial-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.commercial-flow-step {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    border: 1px solid var(--ink-hint);
    padding: var(--space-4);
    background: var(--paper);
}

.commercial-flow-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.commercial-flow-detail {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.5;
}

.commercial-flow-arrow,
.commercial-flow-plus {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    color: var(--ink-subtle);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .commercial-flow {
        flex-direction: column;
    }
    .commercial-flow-step {
        max-width: none;
    }
    .commercial-flow-arrow {
        transform: rotate(90deg);
    }
}

/* ═══════ ARTICLE PAGES ═══════
   thesis.html, smart-assets.html */

.article-header {
    padding: var(--space-10) 0 var(--space-4);
    margin-bottom: 0;
}

.article-eyebrow {
    color: var(--ink-subtle);
    display: block;
    margin-bottom: var(--space-3);
}

.article-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-3);
}

.article-subtitle {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    color: var(--ink-muted);
    max-width: 55ch;
    line-height: 1.5;
    letter-spacing: 0.003em;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.article-meta {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: 0.03em;
    margin-top: var(--space-4);
}

/* Article content — prose styling */
.article-content {
    padding-top: var(--space-4);
    padding-bottom: var(--space-10);
}

/* Editorial drop cap */
.article-content > .container > p:first-of-type::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    padding-right: 0.08em;
    padding-top: 0.06em;
    color: var(--ink);
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "titl" 1;
}

.article-content p {
    margin-bottom: var(--space-4);
    max-width: var(--measure);
    color: var(--ink-muted);
    hyphens: auto;
    hyphenate-limit-chars: 7 3 4;
    -webkit-hyphens: auto;
}

/* Methodology disclosure notes */
.methodology-note {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    border-left: 2px solid var(--ink-hint);
    padding-left: var(--space-4);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
    max-width: var(--measure);
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding-top: var(--space-8);
    border-top: 1px solid var(--ink-hint);
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
}

.article-content h2:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.article-content h3 {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.article-content h4 {
    font-family: var(--font-text);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.article-content strong {
    font-weight: 500;
    color: var(--ink);
}

.article-content em {
    font-style: italic;
}

.article-content a:not(.spec-card-link):not(.download-btn) {
    color: var(--ink-subtle);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.article-content a:not(.spec-card-link):not(.download-btn):hover {
    color: var(--ink);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    max-width: var(--measure);
    color: var(--ink-muted);
}

.article-content li {
    margin-bottom: var(--space-2);
}

.article-content blockquote {
    border-left: 3px solid var(--ink-hint);
    padding-left: var(--space-4);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--ink-muted);
}

.article-content hr {
    border: none;
    border-top: 1px solid var(--ink-hint);
    margin: var(--space-8) 0;
}

/* Code in article/product content */
.article-content pre,
.product-content pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    overflow-x: auto;
    line-height: 1.5;
}

/* Terminal panels inside articles keep dark theme */
.article-content .code-block,
.article-content .corridor-trace-pre {
    background: var(--terminal-deep);
    border: none;
    color: var(--terminal-text);
}

.article-content .code-panel,
.article-content .corridor-trace-terminal {
    background: var(--terminal-deep);
    border: 1px solid var(--terminal-border);
}

.article-content code,
.product-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--paper-dim);
    padding: 0.1em 0.3em;
}

/* Code inside terminal panels stays terminal-themed */
.article-content .code-block code,
.article-content .corridor-trace-pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* --- Corridor Math Grid (thesis.html) --- */
.corridor-math-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 0;
    margin: var(--space-5) 0;
    border-top: 1px solid var(--ink-hint);
    border-bottom: 1px solid var(--ink-hint);
}

.corridor-math-cell {
    padding: var(--space-5) var(--space-4);
    border-right: 1px solid var(--ink-hint);
    text-align: center;
}

.corridor-math-cell:last-child {
    border-right: none;
}

.corridor-math-value {
    font-family: var(--font-display);
    font-size: clamp(28px, 1.75rem + 1vw, 44px);
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
    display: block;
    margin-bottom: var(--space-1);
}

.corridor-math-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    display: block;
    margin-bottom: 2px;
}

.corridor-math-note {
    font-family: var(--font-text);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    display: block;
}

@media (max-width: 768px) {
    .corridor-math-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .corridor-math-cell:nth-child(2) { border-right: none; }
    .corridor-math-cell:nth-child(-n+2) { border-bottom: 1px solid var(--ink-hint); }
}

@media (max-width: 480px) {
    .corridor-math-grid {
        grid-template-columns: 1fr;
    }
    .corridor-math-cell { border-right: none; border-bottom: 1px solid var(--ink-hint); }
    .corridor-math-cell:last-child { border-bottom: none; }
}

/* Competitive comparison table (thesis.html) */
.competitive-table-container {
    margin-top: var(--space-6);
}

/* Article footer */
.article-footer {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--ink-hint);
}

.author-info {
    margin-bottom: var(--space-4);
}

.author-name {
    font-weight: 500;
    color: var(--ink);
}

.author-title {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

.further-reading {
    margin-top: var(--space-6);
}

.further-reading h4 {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-3);
}

.further-reading ul {
    list-style: none;
    padding: 0;
}

.further-reading li {
    margin-bottom: var(--space-2);
}

.further-reading a {
    color: var(--ink-subtle);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.further-reading a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

/* ═══════ CATALOG PAGES ═══════
   portfolio.html, research.html */

.page-header {
    padding: var(--space-8) 0 var(--space-6);
    border-bottom: 1px solid var(--ink-hint);
}

.page-eyebrow {
    color: var(--ink-subtle);
    display: block;
    margin-bottom: var(--space-3);
}

.page-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-3);
}

.page-subtitle {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    color: var(--ink-muted);
    max-width: 55ch;
    line-height: 1.5;
    letter-spacing: 0.003em;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

/* Portfolio sections */
.portfolio-section {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.portfolio-section:last-of-type {
    border-bottom: none;
}

.portfolio-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.portfolio-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
}

.portfolio-section-allocation {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-faint);
    letter-spacing: -0.01em;
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Company cards */
.company-flagship {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
    max-width: var(--measure);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.company-flagship:hover {
    border-color: var(--ink-whisper);
    box-shadow: var(--shadow-md);
}

.company-flagship .company-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-display);
}

.company-flagship .company-name a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size var(--transition-base);
}

.company-flagship .company-name a:hover {
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

.company-type {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.company-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    margin-bottom: var(--space-2);
    max-width: var(--measure);
}

.company-metric {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

.company-metric strong {
    color: var(--ink);
    font-weight: 500;
}

.company-supporting {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.company-entry {
    padding-left: var(--space-4);
    border-left: 1px solid var(--ink-hint);
    max-width: var(--measure);
}

.company-entry .company-name {
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.company-entry .company-name a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size var(--transition-base);
}

.company-entry .company-name a:hover {
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

/* Government partnerships */
.gov-deployments {
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: var(--measure);
}

.gov-deployments strong {
    color: var(--ink);
    font-weight: 500;
}

.gov-pipeline {
    margin-top: 16px;
}

/* Research papers */
.research-section {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.research-section:last-of-type {
    border-bottom: none;
}

.paper-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.paper-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--ink-hint);
    align-items: start;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.paper-item:hover {
    border-color: var(--ink-whisper);
    background: var(--paper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.paper-content {
    min-width: 0;
}

.paper-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
    line-height: 1.3;
    letter-spacing: var(--tracking-display);
}

.paper-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size var(--transition-base);
}

.paper-title a:hover {
    background-size: 100% 1px;
}

.paper-meta {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-2);
}

.paper-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 55ch;
}

.paper-type {
    color: var(--ink-ghost);
    white-space: nowrap;
    padding: var(--space-1) var(--space-2);
    background: var(--paper-dim);
}

.paper-item--forthcoming {
    opacity: 0.55;
}
.paper-item--forthcoming:hover {
    opacity: 0.75;
}

/* Research paper cards (citation style) */
.paper-entry {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.paper-entry:last-child {
    border-bottom: none;
}

.paper-citation {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--ink-muted);
}

.paper-author {
    color: var(--ink);
    font-weight: 500;
}

.paper-links {
    margin-top: var(--space-1);
    display: flex;
    gap: var(--space-2);
}

.paper-links a {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: var(--ink-subtle);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.paper-links a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

/* Contact section */
.contact-section {
    padding: var(--space-8) 0;
    background: var(--paper-dim);
    border-top: 1px solid var(--ink-hint);
}

.contact-content {
    max-width: 50ch;
}

.contact-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
}

.contact-content p {
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.contact-content a.email {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.contact-content a.email:hover {
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

/* ═══════ PRODUCT PAGES ═══════
   mass.html, ez.html, archai.html */

.product-hero {
    padding: var(--space-10) 0 var(--space-8);
    border-bottom: 1px solid var(--ink-hint);
}

.product-hero .hero-eyebrow {
    margin-bottom: var(--space-3);
    display: block;
}

.product-hero .hero-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-4);
    max-width: 20ch;
}

.product-hero .hero-subtitle {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    color: var(--ink-muted);
    max-width: 50ch;
    line-height: 1.5;
    letter-spacing: 0.003em;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

/* Value proposition grid */
.value-section {
    padding: var(--space-10) 0;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.value-card {
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
    transition: border-color var(--transition-base),
                background-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.value-card:hover {
    border-color: var(--ink-whisper);
    background: var(--paper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.value-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: var(--leading-tight);
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1, "titl" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.value-title {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-3);
}

.value-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Stack component grid */
.stack-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
    border-top: 1px solid var(--ink-hint);
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.stack-card {
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--ink-hint);
    transition: border-color var(--transition-base),
                background-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.stack-card:hover {
    border-color: var(--ink-whisper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.stack-layer {
    color: var(--ink-ghost);
    margin-bottom: var(--space-2);
}

.stack-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
}

.stack-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.55;
}

/* Deployment list */
.deployments-section {
    padding: var(--space-10) 0;
    border-top: 1px solid var(--ink-hint);
}

.deployment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.deployment-item {
    padding: var(--space-4);
    border-left: 3px solid var(--ink-hint);
}

.deployment-status {
    color: var(--ink-ghost);
    margin-bottom: var(--space-1);
}

.deployment-status.live {
    color: var(--color-live);
}

.deployment-item.live {
    border-left-color: var(--color-live);
}

.deployment-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-display);
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.deployment-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* CTA section */
.cta-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
}

.cta-content {
    max-width: 50ch;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
}

.cta-content p {
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.cta-content a.email {
    font-size: var(--text-xl);
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-faint), var(--ink-faint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.cta-content a.email:hover {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-size: 100% 1px;
}

.cta-nav-hint {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    color: var(--ink-ghost);
    margin-top: var(--space-3);
}

.cta-nav-hint a {
    color: var(--ink-ghost);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-hint);
}

.cta-nav-hint a:hover {
    color: var(--ink-muted);
    border-bottom-color: var(--ink-muted);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.cta-note {
    font-size: var(--text-sm);
    color: var(--ink-ghost);
}

/* CTA — dark variant (homepage) */
.cta-section--dark {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: var(--space-10) 0;
    background: var(--terminal-bg);
}
.cta-section--dark .container { position: relative; z-index: var(--z-base); }
.cta-section--dark .cta-content { max-width: 50ch; }
.cta-section--dark .section-eyebrow { color: var(--terminal-accent); }
.cta-section--dark h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--terminal-text);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
    line-height: 1.14;
}
.cta-section--dark p {
    color: var(--terminal-text-65);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.72;
    max-width: var(--measure);
}
.cta-section--dark .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.cta-section--dark .cta-note { font-size: var(--text-sm); color: var(--terminal-dim); }

/* Data room CTA — inline variant for article pages */
.data-room-cta {
    margin-top: var(--space-8);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--ink-hint);
    background: var(--paper-dim);
}

.data-room-cta p {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin: 0;
}

.data-room-cta a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-whisper);
    transition: border-color var(--transition-fast);
}

.data-room-cta a:hover {
    border-color: var(--ink-muted);
}

/* Mass product content */
.product-content {
    padding: var(--space-8) 0;
    max-width: var(--measure);
}

.product-content p {
    margin-bottom: var(--space-3);
    color: var(--ink-muted);
    line-height: 1.7;
}

.product-content a:not(.spec-card-link):not(.download-btn) {
    color: var(--ink-subtle);
    text-decoration: none;
    background-image: linear-gradient(var(--ink-hint), var(--ink-hint));
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: color var(--transition-fast), background-size var(--transition-base);
}

.product-content a:not(.spec-card-link):not(.download-btn):hover {
    color: var(--ink);
    background-image: linear-gradient(var(--ink-muted), var(--ink-muted));
    background-size: 100% 1px;
}

.product-content .section-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-subtle);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.product-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--ink-hint);
    border-bottom: 1px solid var(--ink-hint);
}

.product-stat {
    text-align: center;
}

.product-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1, "titl" 1;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.02em;
}

.product-stat-label {
    display: block;
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-1);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}

.highlight-box {
    margin: var(--space-5) 0;
    padding: var(--space-3) var(--space-5);
    background: var(--paper-dim);
    border-left: 3px solid var(--ink-whisper);
}

.highlight-box p {
    margin-bottom: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}

.spec-card {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.spec-card:hover {
    border-color: var(--ink-whisper);
    box-shadow: var(--shadow-md);
}

.spec-card-title {
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.spec-card-subtitle {
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

.spec-card-meta {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-bottom: var(--space-3);
}

.spec-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--paper);
    text-decoration: none;
    border-bottom: none;
    padding: var(--space-1) var(--space-3);
    background: var(--ink);
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.spec-card-link:hover {
    background: var(--ink-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.spec-card-link:active {
    transform: translateY(0);
    box-shadow: none;
}

.spec-card-link svg {
    width: 14px;
    height: 14px;
}

/* ═══════ LONG-FORM REFERENCE ═══════
   mass-spec.html, ez-stack.html, ez-in-a-box.html */

/* Primitives grid */
.primitives-section {
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.primitives-title {
    color: var(--ink-subtle);
    margin-bottom: var(--space-4);
}

.primitives-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}

.primitives-grid--two-col {
    grid-template-columns: 1fr 1fr;
}

.primitive-item {
    text-align: center;
    padding: var(--space-2);
    background: var(--paper);
    border: 1px solid var(--ink-hint);
}

.primitive-number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.primitive-name {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Layers grid */
.layers-section {
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.layers-title {
    color: var(--ink-subtle);
    margin-bottom: var(--space-4);
}

.layers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.layer-item {
    padding: var(--space-3);
    background: var(--paper);
    border: 1px solid var(--ink-hint);
}

.layer-number {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.layer-name {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-2);
}

.layer-description {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    line-height: 1.5;
}

/* TOC */
.toc {
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.toc-title {
    color: var(--ink-subtle);
    margin-bottom: var(--space-4);
}

.toc-list {
    list-style: none;
    padding: 0;
    columns: 2;
    column-gap: var(--space-6);
}

.toc-list li {
    margin-bottom: var(--space-2);
    break-inside: avoid;
}

.toc-list a {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.toc-list a:hover {
    color: var(--ink);
    border-color: var(--ink-whisper);
}

/* Disclaimer box */
.disclaimer {
    background: var(--paper-dim);
    border-left: 3px solid var(--ink-whisper);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

/* Reference container */
.reference-container {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin-inline: auto;
    padding: var(--space-10) var(--gutter) var(--space-8);
}

/* Document header */
.doc-header {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--ink-hint);
}

.doc-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-heading);
    color: var(--ink);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-display);
}

.doc-subtitle {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.doc-meta {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    letter-spacing: 0.04em;
}

.doc-meta a {
    color: var(--ink-subtle);
    text-decoration: underline;
    text-decoration-color: var(--ink-whisper);
    text-underline-offset: 0.12em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.doc-meta a:hover {
    color: var(--ink-muted);
    text-decoration-color: var(--ink-muted);
}

.release-badge {
    display: inline-block;
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-muted);
    background: var(--paper-dim);
    padding: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border-bottom: none;
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    transition: background var(--transition-fast);
}

.download-btn:hover {
    background: var(--ink-muted);
}

.download-btn svg {
    width: 16px;
    height: 16px;
}

/* Abstract */
.abstract {
    margin-bottom: var(--space-8);
}

.abstract-title {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    color: var(--ink-subtle);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-3);
}

.abstract p {
    color: var(--ink-muted);
    max-width: var(--measure);
}

/* Spec sections */
.spec-section {
    margin-bottom: var(--space-6);
}

.spec-section .section-title {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    color: var(--ink-subtle);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ink-hint);
}

.spec-section p {
    max-width: var(--measure);
    margin-bottom: var(--space-3);
}

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

/* Feature list */
.feature-list {
    list-style: none;
    margin-bottom: var(--space-4);
    padding: 0;
}

.feature-list li {
    position: relative;
    padding-left: var(--space-3);
    margin-bottom: var(--space-2);
    max-width: var(--measure);
}

.feature-list li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--ink-ghost);
}

.feature-list strong {
    font-weight: 500;
}

/* Tech grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.tech-item {
    padding: var(--space-4);
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
}

.tech-item-title {
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.tech-item-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* TOC grid layout */
.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-5);
}

.toc-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.toc-part {
    border-left: 2px solid var(--ink-hint);
    padding-left: var(--space-3);
}

.toc-part-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.toc-part-number {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-subtle);
}

.toc-part-title {
    font-family: var(--font-text);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ink);
}

.toc-items {
    list-style: none;
    padding: 0;
    margin-left: var(--space-4);
}

.toc-item {
    position: relative;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-body);
}

.toc-item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-4) * -1);
    top: 50%;
    width: var(--space-2);
    height: 1px;
    background: var(--ink-hint);
}

/* Keywords */
.keywords {
    margin-top: var(--space-4);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

.keywords strong {
    font-weight: 500;
    color: var(--ink-muted);
}

/* ═══════ PERSONA PAGES ═══════
   institutions.html, builders.html, trust.html */

/* Architecture stack diagram */
.arch-stack {
    border: 1px solid var(--ink-hint);
    border-left: 3px solid var(--ink-whisper);
    max-width: var(--max-width);
    background: var(--paper);
}

.arch-layer {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    border-bottom: 1px solid var(--ink-hint);
    align-items: stretch;
}

.arch-layer:last-child {
    border-bottom: none;
}

.arch-layer-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    padding: var(--space-3);
    border-right: 1px solid var(--ink-hint);
    display: flex;
    align-items: center;
    background: var(--paper-dim);
}

.arch-layer-items {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: var(--space-2) var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.arch-layer-items span {
    white-space: nowrap;
    padding: 0.2em 0.6em;
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    font-size: var(--text-xs);
    line-height: 1.6;
}

.arch-layer-items span:not(:last-child)::after {
    content: none;
}

.arch-layer-items span:has(a) {
    border-color: var(--ink-whisper);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.arch-layer-items span:has(a):hover {
    border-color: var(--ink-muted);
    background: var(--paper);
}

.arch-layer-items a {
    color: var(--ink-subtle);
    text-decoration: none;
}

.arch-layer-items a:hover {
    color: var(--ink);
}

/* Engagement models grid */
.engage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.engage-card {
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
    transition: border-color var(--transition-base),
                background-color var(--transition-base);
}

.engage-card:hover {
    border-color: var(--ink-whisper);
    background: var(--paper-dim);
}

.engage-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-3);
}

.engage-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
}

.engage-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Compliance jurisdiction grid */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.compliance-card {
    padding: var(--space-4);
    border: 1px solid var(--ink-hint);
    border-left: 3px solid var(--color-live);
}

.compliance-status {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--color-live);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-1);
}

.compliance-jurisdiction {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-display);
}

.compliance-detail {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.5;
}

/* Resource list */
.resource-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--ink-hint);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.resource-item:hover {
    border-color: var(--ink-whisper);
    background: var(--paper-dim);
}

.resource-item--disabled {
    cursor: default;
    opacity: 0.55;
}

.resource-item--disabled:hover {
    border-color: var(--ink-hint);
    background: transparent;
}

.resource-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.resource-meta {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
}

/* Primitives list (builders page) */
.primitive-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.primitive-entry {
    display: grid;
    grid-template-columns: 10ch 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    padding-left: var(--space-4);
    border-bottom: 1px solid var(--ink-hint);
    border-left: 2px solid var(--ink-hint);
}

.primitive-entry:last-child {
    border-bottom: none;
}

.primitive-entry-name {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    padding-top: 0.15em;
}

.primitive-entry-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 55ch;
}

/* Principle blocks (trust page) */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.principle-card {
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
}

.principle-number {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-2);
}

.principle-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
}

.principle-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Case study / deployment cards */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-5);
}

.case-study {
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
    transition: border-color var(--transition-base),
                background-color var(--transition-base);
}

.case-study:hover {
    border-color: var(--ink-whisper);
    background: var(--paper-dim);
}

.case-study-status {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 2px solid currentColor;
    margin-bottom: var(--space-2);
}

.case-study-status.sandbox,
.case-study-status.testnet {
    color: var(--color-testnet);
}

.case-study-status.operating {
    color: var(--ink-subtle);
}

.case-study.sandbox,
.case-study.testnet {
    border-left: 3px solid var(--color-testnet);
}

.case-study.operating {
    border-left: 3px solid var(--ink-whisper);
}

.case-study-jurisdiction {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-1);
    line-height: 1.3;
    letter-spacing: var(--tracking-display);
}

.case-study-regulator {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-3);
}

.case-study-description {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.case-study-capabilities {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    line-height: 1.8;
}

.case-study-capabilities strong {
    color: var(--ink-subtle);
    font-weight: 500;
}

/* Magnitude comparison table */
.magnitude-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
    border-top: 1px solid var(--ink-hint);
    border-bottom: 1px solid var(--ink-hint);
}

.magnitude-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-5);
}

.magnitude-table thead th {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--ink-hint);
    background: var(--paper-dim);
}

.magnitude-table thead th:last-child {
    text-align: right;
}

.magnitude-table tbody td {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ink-hint);
    vertical-align: top;
}

.magnitude-table tbody td:first-child {
    color: var(--ink-subtle);
    width: 30%;
}

.magnitude-table tbody td:nth-child(2) {
    color: var(--ink-ghost);
    text-decoration: line-through;
    text-decoration-color: var(--ink-whisper);
}

.magnitude-table tbody td:last-child {
    color: var(--ink);
    text-align: right;
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.magnitude-table tbody tr:last-child td {
    border-bottom: none;
}

/* Positioning comparison table (builders.html) */
.positioning-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-5);
}

.positioning-table thead th {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--ink-hint);
    background: var(--paper-dim);
}

.positioning-table thead th:last-child {
    color: var(--ink-subtle);
}

.positioning-table tbody td {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ink-hint);
    vertical-align: top;
}

.positioning-table tbody td:first-child {
    color: var(--ink-subtle);
    width: 18%;
}

.positioning-table tbody td:nth-child(2),
.positioning-table tbody td:nth-child(3) {
    color: var(--ink-ghost);
}

.positioning-table tbody td:last-child {
    color: var(--ink);
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1;
}

.positioning-table tbody tr:last-child td {
    border-bottom: none;
}

/* Partner engagement roles */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

.partner-card {
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
}

.partner-role {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    margin-bottom: var(--space-2);
}

.partner-who {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1, "swsh" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
}

.partner-voice {
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    margin-bottom: var(--space-3);
}

.partner-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
}

/* ═══════ TEAM PAGE ═══════ */

/* Team grid — gallery wall */
.team-grid-section {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-6);
}

.team-card {
    display: flex;
    flex-direction: column;
}

/* Portrait — monogram watermark on warm paper */
.team-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--paper-dim);
    border: 1px solid var(--ink-hint);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.team-portrait::after {
    content: attr(data-initials);
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 80px);
    color: var(--ink-hint);
    letter-spacing: 0.05em;
    font-feature-settings: "kern" 1, "liga" 1, "swsh" 1;
    user-select: none;
}

.team-portrait:has(img)::after {
    display: none;
}

.team-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-display);
}

.team-card-role {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    font-variant-ligatures: common-ligatures contextual;
    line-height: 1.4;
}

/* Short bios */
.team-card-bio {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    line-height: 1.55;
    margin-top: var(--space-2);
    max-width: 38ch;
}

/* Icon links — debossed, barely there */
.team-icon-row {
    display: flex;
    gap: var(--space-1-5);
    margin-top: var(--space-2);
}

.team-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-ghost);
    text-decoration: none;
    transition: color var(--transition-base);
}

.team-icon-link:hover {
    color: var(--ink-muted);
}

.team-icon-link svg {
    width: 14px;
    height: 14px;
}

/* Institutional context */
.team-context-section {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.team-context-section p {
    color: var(--ink-muted);
    line-height: var(--leading-body);
    margin-bottom: var(--space-4);
    max-width: var(--measure);
}

.team-context-section p:first-of-type {
    font-size: clamp(18px, 1.06rem + 0.2vw, 21px);
    line-height: 1.72;
    color: var(--ink);
}

.team-context-section p:last-child {
    margin-bottom: 0;
}

/* Economics grid */
.economics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--ink-hint);
}

.economics-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--ink-hint);
}

.economics-line:last-child {
    border-bottom: none;
}

.economics-assumption {
    grid-column: 1 / -1;
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    padding-bottom: var(--space-1);
    line-height: 1.4;
}

.economics-margin-note {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ink-hint);
}

.economics-label {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.economics-value {
    font-size: var(--text-sm);
    color: var(--ink);
    font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.economics-total {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-3);
    border-top: 2px solid var(--ink-hint);
}

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

.economics-total .economics-value {
    font-size: var(--text-lg);
}

/* Vision callout */
.vision-callout {
    padding: var(--space-8) 0;
    text-align: center;
}

.vision-text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ink-muted);
    max-width: 52ch;
    margin: 0 auto var(--space-3);
    line-height: var(--leading-body);
}

.vision-text--secondary {
    font-size: var(--text-base);
    margin-top: var(--space-3);
}

.vision-frame {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
}

/* Split sections */
.split-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    align-items: start;
}

/* EZ page sections */
.ez-zone-board-section {
    padding: var(--space-10) 0;
}

.ez-gov-section {
    padding: var(--space-10) 0;
    background: var(--paper-dim);
}

.ez-gov-section .section-header {
    margin-bottom: var(--space-4);
}

.ez-gov-section .section-title {
    margin-bottom: var(--space-3);
}

.ez-gov-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.ez-gov-point {
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--ink-hint);
}

.ez-gov-point strong {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink);
}

.ez-gov-point p {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .value-grid {
        grid-template-columns: 1fr;
    }

    .stack-grid {
        grid-template-columns: 1fr;
    }

    .deployment-list {
        grid-template-columns: 1fr 1fr;
    }

    .layers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        gap: var(--space-6) var(--space-5);
    }
}

@media (max-width: 768px) {
    .article-header {
        padding: var(--space-6) 0 var(--space-4);
    }

    .article-content h2 {
        margin-top: var(--space-5);
        padding-top: var(--space-5);
    }

    .page-header {
        padding: var(--space-6) 0 var(--space-4);
    }

    .paper-item {
        grid-template-columns: 1fr;
    }

    .paper-type {
        justify-self: start;
    }

    .primitives-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .layers-grid {
        grid-template-columns: 1fr;
    }

    .toc-list {
        columns: 1;
    }

    .deployment-list {
        grid-template-columns: 1fr;
    }

    .product-stats {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .portfolio-section-header {
        flex-direction: column;
        gap: var(--space-1);
    }

    .engage-grid {
        grid-template-columns: 1fr;
    }

    .engage-card {
        padding: var(--space-4);
    }

    .partner-card {
        padding: var(--space-4);
    }

    .case-study {
        padding: var(--space-4);
    }

    .arch-layer {
        grid-template-columns: 1fr;
    }

    .arch-layer-label {
        border-right: none;
        border-bottom: 1px solid var(--ink-hint);
        padding: var(--space-2) var(--space-3);
    }

    .arch-layer-items {
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .compliance-grid {
        grid-template-columns: 1fr;
    }

    .primitive-entry {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .principle-grid {
        grid-template-columns: 1fr;
    }

    .resource-item {
        flex-direction: column;
        gap: var(--space-1);
    }

    .case-study-grid {
        grid-template-columns: 1fr;
    }

    .partner-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-4);
    }

    .economics-grid {
        grid-template-columns: 1fr;
    }

    .magnitude-table thead th:nth-child(2),
    .magnitude-table tbody td:nth-child(2) {
        display: none;
    }

    .magnitude-table tbody td:last-child {
        text-align: left;
    }

    .magnitude-table thead th:last-child {
        text-align: left;
    }

    .positioning-table thead th:nth-child(2),
    .positioning-table tbody td:nth-child(2),
    .positioning-table thead th:nth-child(3),
    .positioning-table tbody td:nth-child(3) {
        display: none;
    }

    /* Hide "Jurisdiction" (col 2) and "Engagement" (col 4) on 5-col ez.html zone-board */
    .ez-zone-board-section .zone-board th:nth-child(2),
    .ez-zone-board-section .zone-board td:nth-child(2),
    .ez-zone-board-section .zone-board th:nth-child(4),
    .ez-zone-board-section .zone-board td:nth-child(4) {
        display: none;
    }

    .doc-title {
        font-size: var(--text-lg);
    }

    .doc-header {
        margin-top: var(--space-4);
    }

    .toc-grid {
        grid-template-columns: 1fr;
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .split-section {
        grid-template-columns: 1fr;
    }

    .split-section > .code-wrapper {
        order: -1;
    }
}

@media (max-width: 480px) {
    .primitives-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .team-card-bio {
        font-size: var(--text-sm);
    }
}

/* ═══════ NETWORK ECONOMICS VISUALIZER ═══════ */

.ne-section {
    padding: var(--space-10) 0 var(--space-10);
    background: var(--paper);
}

.ne-section::before {
    content: '';
    display: block;
    width: min(120px, 20%);
    height: 1px;
    margin: 0 auto var(--space-16);
    background: var(--ink-whisper);
}

.ne-section .section-header {
    max-width: var(--measure);
}

.ne-section .section-title {
    font-size: clamp(32px, 2rem + 1.2vw, 52px);
    margin-bottom: var(--space-3);
    margin-left: -0.03em;
    max-width: 22ch;
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.ne-visualizer {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-6);
}

.ne-mesh {
    aspect-ratio: 1920 / 880;
    overflow: hidden;
}

.ne-mesh svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Panel */
.ne-panel {
    padding-top: var(--space-2);
}

.ne-year-display {
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--ink-hint);
    padding-bottom: var(--space-4);
}

.ne-year-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    display: block;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.ne-wave-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    display: block;
    margin-top: var(--space-1);
}

.ne-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ne-metric-number {
    font-family: var(--font-display);
    font-size: clamp(40px, 2.5rem + 1.5vw, 64px);
    color: var(--ink);
    line-height: 0.95;
    letter-spacing: -0.03em;
    display: block;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.ne-metric-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    display: block;
    margin-top: 4px;
}

.ne-description {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    font-style: italic;
    margin-top: var(--space-6);
    line-height: 1.6;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1, "onum" 1, "pnum" 1;
}

/* Timeline */
.ne-timeline {
    margin-bottom: var(--space-4);
}

.ne-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1px;
    background: var(--ink-hint);
    outline: none;
    margin: 0 0 var(--space-2) 0;
    padding: 8px 0;
    cursor: pointer;
    background-clip: content-box;
}

.ne-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--ink);
    border: none;
    cursor: pointer;
    transform: rotate(45deg);
}

.ne-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--ink);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transform: rotate(45deg);
}

.ne-slider:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.ne-year-labels {
    display: flex;
    justify-content: space-between;
}

.ne-year-btn {
    font-family: var(--font-caption);
    font-size: var(--text-sm);
    color: var(--ink-ghost);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: var(--space-1) var(--space-1-5) calc(var(--space-1) - 2px);
    letter-spacing: 0.02em;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.ne-year-btn:hover {
    color: var(--ink-muted);
}

.ne-year-btn.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink);
}

.ne-year-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.ne-footnote {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: var(--measure);
}

/* Responsive */
@media (max-width: 900px) {
    .ne-visualizer {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .ne-year-display {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }

    .ne-year-number {
        font-size: var(--text-xl);
    }

    .ne-wave-label {
        margin-top: 0;
    }

    .ne-metrics {
        flex-direction: row;
        gap: var(--space-4);
    }

    .ne-metric-number {
        font-size: clamp(28px, 1.75rem + 1vw, 44px);
    }

    .ne-description {
        margin-top: var(--space-3);
    }
}

@media (max-width: 768px) {
    .ne-section {
        padding: var(--space-10) 0 var(--space-8);
    }

    .ne-section .section-title {
        font-size: var(--text-xl);
        max-width: none;
    }

    .ne-year-btn {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .ne-section {
        padding: var(--space-8) 0;
    }

    .ne-metrics {
        flex-wrap: wrap;
    }

    .ne-metric-number {
        font-size: clamp(24px, 1.5rem + 0.5vw, 32px);
    }
}

@media (min-width: 1400px) {
    .ne-section {
        padding: var(--space-10) 0;
    }

    .ne-metric-number {
        font-size: clamp(48px, 3rem + 1.5vw, 72px);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ne-year-btn {
        transition: none;
    }
}


/* CTA links */
.cta-links {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.cta-link {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink-muted);
    border-bottom: 1px solid var(--ink-whisper);
    padding-bottom: 3px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cta-link:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.cta-arrow { margin-left: 0.25em; }

/* Mobile */
@media (max-width: 640px) {
    .cta-links {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ═══════ DEVELOPER DOCS PAGE ═══════ */

/* --- Reference Layout (Stripe-inspired split panel) --- */
/* --- Docs Hero — tighter than narrative pages --- */
.docs-hero {
    padding: var(--space-8) 0 var(--space-5);
}
.docs-hero .hero-subtitle {
    max-width: 56ch;
}

/* --- Quick Start — compact, utility rhythm --- */
.docs-quickstart-section {
    padding: var(--space-6) 0 var(--space-8);
    background: var(--paper);
}

.docs-quickstart-section .section-eyebrow {
    margin-bottom: var(--space-2);
}

.docs-quickstart-section .section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
}

.docs-ref {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--terminal-bg);
    overflow: visible;
}

.docs-ref-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 80vh;
}

/* --- Sidebar --- */
.docs-sidebar {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: var(--space-5) var(--space-2) var(--space-6) var(--space-3);
    border-right: 1px solid var(--terminal-border);
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
}

.docs-sidebar::-webkit-scrollbar { width: 4px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 2px; }

/* --- Sidebar Search --- */
.docs-sidebar-search {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--terminal-border);
}
.docs-search-input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--terminal-border);
    padding: 6px 8px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.docs-search-input::placeholder {
    color: var(--terminal-dim);
}
.docs-search-input:focus {
    border-color: var(--terminal-accent);
}
.docs-sidebar-link.search-hidden {
    opacity: 0.15;
    pointer-events: none;
}
.docs-sidebar-link.search-match {
    color: var(--terminal-accent);
}
.docs-sidebar-group.search-group-hidden {
    display: none;
}

/* --- Code Block Copy Button --- */
.code-panel {
    position: relative;
}
.code-copy-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--terminal-dim);
    background: transparent;
    border: 1px solid transparent;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    z-index: 1;
    letter-spacing: 0.02em;
}
.code-panel:hover .code-copy-btn {
    opacity: 1;
}
.code-copy-btn:hover {
    color: var(--terminal-text);
    border-color: var(--terminal-border);
}
.code-copy-btn.copied {
    color: var(--terminal-accent);
    opacity: 1;
}

.docs-sidebar-group {
    margin-bottom: var(--space-3);
}

.docs-sidebar-label {
    font-family: var(--font-caption);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: rgba(229, 226, 223, 0.35);
    margin-bottom: 2px;
    padding-left: var(--space-2);
    display: block;
}

.docs-sidebar-link {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: rgba(229, 226, 223, 0.45);
    text-decoration: none;
    padding: 3px 0 3px var(--space-2);
    border-left: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    line-height: 1.55;
}

.docs-sidebar-link:hover {
    color: rgba(229, 226, 223, 0.85);
}

.docs-sidebar-link.active {
    color: var(--terminal-text);
    border-left-color: var(--terminal-accent);
}

/* --- Content Area --- */
.docs-ref-content {
    min-width: 0;
}

/* --- Split Panel (description | code) --- */
.docs-section {
    scroll-margin-top: 72px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Full-width docs section heading/description --- */
.docs-section--full h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--terminal-text);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-display);
}
.docs-section--full h4 {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: var(--terminal-dim);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

/* --- DAG Controls --- */
.dag-controls {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-4) 0;
    flex-wrap: wrap;
}
.dag-control-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.dag-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--terminal-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.dag-select {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--terminal-border);
    padding: 5px 8px;
    min-width: 220px;
    outline: none;
}
.dag-select:focus {
    border-color: var(--terminal-accent);
}
.dag-select option {
    background: #1a1917;
    color: var(--terminal-text);
}
.dag-info {
    margin-bottom: var(--space-3);
}
.dag-legal-basis {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    font-style: italic;
}

/* --- DAG SVG --- */
.dag-container {
    overflow-x: auto;
    margin: var(--space-3) 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--terminal-border);
    padding: var(--space-3);
}
.dag-svg {
    display: block;
    min-height: 120px;
}
.dag-svg text {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--terminal-text);
}
.dag-svg .dag-node rect {
    stroke-width: 1;
}
.dag-svg .dag-edge {
    fill: none;
    stroke-width: 1;
}
.dag-svg .dag-edge-async {
    stroke-dasharray: 4 3;
}
.dag-svg .dag-arrow {
    fill: var(--terminal-dim);
}

/* --- DAG Legend --- */
.dag-legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}
.dag-legend-item {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--terminal-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}
.dag-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
}
.dag-legend-async {
    letter-spacing: 0.15em;
}

/* --- Comparison Table --- */
.cmp-table-wrap {
    overflow-x: auto;
    margin: var(--space-3) 0;
}
.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 11px;
}
.cmp-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--terminal-accent);
    border-bottom: 1px solid var(--terminal-border);
    font-weight: 500;
    white-space: nowrap;
}
.cmp-table td {
    padding: 6px 10px;
    color: rgba(229, 226, 223, 0.7);
    border-bottom: 1px solid rgba(229, 226, 223, 0.06);
    vertical-align: top;
    line-height: 1.5;
}
.cmp-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.cmp-table .cmp-row-label {
    color: var(--terminal-dim);
    white-space: nowrap;
    font-weight: 500;
}

/* --- Schema Browser --- */
.schema-detail {
    margin-top: var(--space-3);
}
.schema-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    margin-bottom: var(--space-2);
    line-height: 1.6;
}
.schema-meta .schema-id {
    color: var(--terminal-accent);
    word-break: break-all;
}
.schema-meta .schema-req {
    color: #c96b6b;
}

/* --- Corridor State Machine --- */
.corridor-sm-container {
    margin-top: var(--space-2);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--terminal-border);
    padding: var(--space-3);
}
.corridor-sm-svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}
.corridor-sm-svg text {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--terminal-text);
    pointer-events: none;
}
.corridor-sm-svg .sm-state {
    cursor: pointer;
}
.corridor-sm-svg .sm-state rect {
    stroke-width: 1;
    transition: stroke 0.15s;
}
.corridor-sm-svg .sm-state:hover rect {
    stroke: var(--terminal-accent);
}
.corridor-sm-svg .sm-state.sm-active rect {
    stroke: var(--terminal-accent);
    stroke-width: 2;
}
.corridor-sm-svg .sm-edge {
    stroke: rgba(229, 226, 223, 0.25);
    fill: none;
    stroke-width: 1;
}
.corridor-sm-svg .sm-edge-label {
    font-size: 8px;
    fill: var(--terminal-dim);
}
.corridor-sm-info {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    line-height: 1.6;
    min-height: 48px;
    margin-top: var(--space-2);
}
.corridor-sm-info strong {
    color: var(--terminal-text);
    font-weight: 500;
}

/* --- Sandbox Timing --- */
.sb-timing {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--terminal-accent);
    margin-left: auto;
    letter-spacing: 0.02em;
}

.docs-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
}

.docs-desc {
    padding: var(--space-6) var(--space-5);
    max-width: none;
    min-width: 0;
}

.docs-desc h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--terminal-text);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-display);
}

.docs-desc h4 {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: var(--terminal-dim);
    margin-top: var(--space-4);
    margin-bottom: var(--space-1-5);
}

.docs-desc > p {
    color: rgba(229, 226, 223, 0.6);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-2);
    max-width: 52ch;
}

.docs-desc > p:last-child {
    margin-bottom: 0;
}

/* Code column — continuous dark band (Stripe pattern) */
.docs-code-col {
    padding: var(--space-6) var(--space-5);
    background: var(--terminal-deep);
    border-left: 1px solid var(--terminal-border);
    min-width: 0;
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
}
.docs-code-col::-webkit-scrollbar { width: 4px; }
.docs-code-col::-webkit-scrollbar-track { background: transparent; }
.docs-code-col::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 2px; }

/* Hide macOS chrome dots in API reference — labels are sufficient */
.docs-code-col .code-block-header {
    display: none;
}

/* Code panels: full-width flush blocks on the dark surface */
.docs-code-col .code-panel {
    margin-bottom: var(--space-3);
    border: 1px solid var(--terminal-border-dim);
    box-shadow: none;
    background: var(--terminal-deep);
    width: 100%;
    display: grid;
}

.docs-code-col .code-panel:last-child {
    margin-bottom: 0;
}

/* Code blocks: uniform width, horizontal scroll for overflow */
.docs-code-col .code-block {
    font-size: clamp(12px, 0.72rem + 0.1vw, 13px);
    line-height: 1.65;
    padding: var(--space-3);
    overflow-x: auto;
    min-width: 0;
}

/* Full-width sections inside docs-ref (Sandbox, CLI) */
.docs-section--full {
    border-bottom: 1px solid var(--terminal-border);
}

.docs-section-full-inner {
    padding: var(--space-8) var(--space-6);
}

.docs-section-full-inner h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--terminal-text);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-display);
}

.docs-section-full-inner .docs-section-desc {
    color: rgba(229, 226, 223, 0.65);
    font-size: var(--text-sm);
    line-height: 1.65;
    max-width: 52ch;
    margin-bottom: var(--space-5);
}

.docs-section-full-inner .docs-section-desc code {
    color: var(--terminal-accent);
}

.docs-section-eyebrow {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    color: var(--terminal-dim);
    display: block;
    margin-bottom: var(--space-2);
}

.docs-desc > .code-panel {
    margin-top: var(--space-5);
}

/* CLI terminal in docs context — generous width */
.docs-section--full .code-panel {
    max-width: 800px;
    box-sizing: border-box;
}

.docs-section--full .code-block {
    font-size: clamp(12.5px, 0.76rem + 0.12vw, 14px);
}

/* --- Endpoint Header --- */
.docs-endpoint-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.docs-method {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    display: inline-block;
    flex-shrink: 0;
    text-transform: uppercase;
}

.docs-method--post {
    color: var(--terminal-accent);
    border: 1px solid var(--terminal-accent-30);
}

.docs-method--get {
    color: var(--color-live);
    border: 1px solid rgba(45, 125, 70, 0.3);
}

.docs-method--put {
    color: #7a9ec4;
    border: 1px solid rgba(122, 158, 196, 0.3);
}

.docs-method--delete {
    color: #c47a7a;
    border: 1px solid rgba(196, 122, 122, 0.3);
}

.docs-path {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(229, 226, 223, 0.8);
    letter-spacing: 0.01em;
    word-break: break-all;
}

/* --- Parameters --- */
.docs-params {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-2);
}

.docs-param {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.docs-param:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.docs-param:last-child {
    border-bottom: none;
}

.docs-param-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-1-5);
    margin-bottom: 3px;
}

.docs-param-name {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--terminal-text);
    font-weight: 500;
}

.docs-param-type {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(229, 226, 223, 0.35);
}

.docs-param-required {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--terminal-accent);
    text-transform: uppercase;
}

.docs-param-optional {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(229, 226, 223, 0.25);
    letter-spacing: 0.04em;
}

.docs-param-desc {
    font-size: 12.5px;
    color: rgba(229, 226, 223, 0.45);
    line-height: 1.55;
    max-width: 48ch;
}

/* --- Example Labels --- */
.docs-example-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(229, 226, 223, 0.3);
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* --- Status Codes --- */
.docs-status-code {
    color: var(--color-live);
    margin-left: var(--space-1);
}

/* --- Quick Start Steps --- */
.docs-quickstart {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.docs-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.docs-step-number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink-whisper);
    line-height: 1;
    width: 32px;
    text-align: center;
    padding-top: 2px;
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.docs-step-content {
    min-width: 0;
}

.docs-step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-display);
}

.docs-terminal-inline {
    max-width: 100%;
}

.docs-terminal-inline .code-block {
    max-height: 320px;
    overflow-y: auto;
}

/* --- Sandbox --- */
.docs-sandbox-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-6);
    align-items: stretch;
    margin-top: var(--space-6);
}

.docs-sandbox-controls {
    display: flex;
    flex-direction: column;
}

.docs-sandbox-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.docs-sandbox-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.docs-sandbox-row--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.docs-sandbox-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    letter-spacing: var(--tracking-caps);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
}

.docs-sandbox-textarea {
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.75rem + 0.1vw, 13.5px);
    line-height: 1.75;
    color: var(--terminal-text);
    background: var(--terminal-deep);
    border: 1px solid var(--terminal-border);
    padding: var(--space-3);
    resize: vertical;
    min-height: 300px;
    width: 100%;
    white-space: pre;
    overflow-x: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.docs-sandbox-textarea:focus {
    outline: none;
    border-color: var(--terminal-accent-30);
}

.docs-sandbox-send {
    align-self: flex-start;
    margin-top: var(--space-1);
}

.docs-sandbox-response {
    display: flex;
    flex-direction: column;
}

.docs-sandbox-response .code-panel {
    display: flex;
    flex-direction: column;
    height: 480px;
}

.docs-sandbox-response .code-block {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.docs-sandbox-method {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    color: var(--terminal-accent);
    border: 1px solid var(--terminal-accent-30);
}

.docs-sandbox-path {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--terminal-text);
}

/* --- Auth Scopes --- */
.docs-auth-scopes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.docs-auth-scope {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    padding: var(--space-1) var(--space-2);
    border-left: 2px solid var(--ink-hint);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .docs-ref-layout {
        grid-template-columns: 180px 1fr;
    }

    .docs-desc {
        padding: var(--space-6) var(--space-4);
    }

    .docs-code-col {
        padding: var(--space-6) var(--space-4);
    }
}

@media (max-width: 900px) {
    .docs-ref-layout {
        grid-template-columns: 1fr;
    }

    .docs-sidebar {
        position: static;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-4) var(--gutter);
        border-right: none;
        border-bottom: 1px solid var(--terminal-border);
        overflow: visible;
    }

    .docs-sidebar-search {
        width: 100%;
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .docs-sidebar-group {
        display: contents;
    }

    .docs-sidebar-label {
        display: none;
    }

    .docs-sidebar-link {
        border-left: none;
        padding-left: 0;
        padding: var(--space-1) var(--space-1-5);
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    .docs-split {
        grid-template-columns: 1fr;
    }

    .docs-code-col {
        border-left: none;
        border-top: 1px solid var(--terminal-border);
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .docs-step {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .docs-step-number {
        font-size: var(--text-lg);
    }

    .docs-sandbox-layout {
        grid-template-columns: 1fr;
    }

    .docs-quickstart {
        gap: var(--space-6);
    }

    .docs-desc {
        padding: var(--space-4) var(--gutter);
    }

    .docs-code-col {
        padding: var(--space-4) var(--gutter);
    }

    .docs-code-col .code-block {
        font-size: 11px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
        line-height: 1.6;
    }

    .docs-section--full .code-panel {
        max-width: 100%;
    }

    .docs-section--full .code-block {
        font-size: 11px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
    }

    .docs-section-full-inner {
        padding: var(--space-5) var(--gutter);
    }

    .docs-quickstart-section .code-block {
        font-size: 11px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
    }
}

/* ═══════ PARTNER BAR ═══════ */

.partners-section { padding: var(--space-5) 0; }
.partners-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "cpsp" 1, "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-ghost);
    text-align: center;
    margin-bottom: var(--space-5);
}
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0;
}
.partner-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.125rem + 0.3vw, 22px);
    color: var(--ink-subtle);
    white-space: nowrap;
    letter-spacing: var(--tracking-display);
    line-height: 1.3;
    padding: 0 var(--space-4);
    border-right: 1px solid var(--ink-hint);
}
.partner-name:last-child { border-right: none; }
.partner-name small { font-size: 0.75em; color: var(--ink-ghost); font-family: var(--font-caption); }

@media (max-width: 768px) {
    .partners-grid { gap: var(--space-3) 0; }
    .partner-name { font-size: clamp(16px, 1rem + 0.2vw, 18px); padding: 0 var(--space-3); }
}
@media (max-width: 480px) {
    .partners-grid { flex-direction: column; align-items: center; gap: var(--space-2); }
    .partner-name { border-right: none; padding: 0; }
}

/* ═══════ EXPLORE TERMINAL ═══════ */

/* Full-viewport terminal experience.
   height (not just min-height) locks the flex chain to the viewport
   so .explore-output overflows internally instead of growing the page. */
.page-explore {
    background: var(--terminal-deep);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-explore .site-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.page-explore main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Dark header override */
.page-explore .site-header {
    background: rgba(12, 11, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.page-explore .site-header .logo {
    color: var(--terminal-text);
}

.page-explore .site-header .nav-primary a {
    color: var(--terminal-dim);
}

.page-explore .site-header .nav-primary a:hover,
.page-explore .site-header .nav-primary a[aria-current="page"] {
    color: var(--terminal-text);
}

.page-explore .site-header .nav-toggle {
    color: var(--terminal-text);
}

/* Hide footer — terminal IS the experience (stays in DOM for crawlers) */
.page-explore .site-footer {
    display: none;
}

/* Terminal container */
.explore-terminal {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--terminal-deep);
    min-height: 0;
}

/* macOS chrome bar */
.explore-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    background: #080807;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.explore-chrome .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.explore-chrome .dot:nth-child(1) { background: var(--dot-red); }
.explore-chrome .dot:nth-child(2) { background: var(--dot-yellow); }
.explore-chrome .dot:nth-child(3) { background: var(--dot-green); }

.explore-chrome .title {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-dim);
    letter-spacing: 0.03em;
}

.explore-chrome .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    margin-left: auto;
    animation: explore-pulse 3s var(--ease-in-out-sine) infinite;
}

@keyframes explore-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .explore-chrome .status-dot { animation: none; opacity: 1; }
}

/* Scrollable output area */
.explore-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: clamp(12.5px, 0.76rem + 0.12vw, 14px);
    line-height: 1.85;
    color: var(--terminal-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
    min-height: 0;
}

.explore-output::-webkit-scrollbar { width: 4px; }
.explore-output::-webkit-scrollbar-track { background: transparent; }
.explore-output::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 2px; }
.explore-output::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* Output line styling */
.explore-output .line {
    white-space: pre-wrap;
    word-break: break-word;
}

.explore-output .line-echo {
    color: var(--terminal-dim);
}

.explore-output .line-error {
    color: #c97a5a;
}

/* Input bar */
.explore-input-bar {
    display: flex;
    align-items: center;
    padding: var(--space-1-5) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.explore-input-bar .prompt {
    font-family: var(--font-mono);
    font-size: clamp(12.5px, 0.76rem + 0.12vw, 14px);
    color: var(--terminal-accent);
    margin-right: var(--space-1);
    flex-shrink: 0;
    line-height: 44px;
}

.explore-input-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: clamp(12.5px, 0.76rem + 0.12vw, 14px);
    color: var(--terminal-text);
    caret-color: var(--terminal-accent);
    min-height: 44px;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.explore-input-bar input::placeholder {
    color: rgba(122, 118, 114, 0.5);
}

/* Mobile quick-command buttons */
.explore-mobile-cmds {
    display: none;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.explore-mobile-cmds::-webkit-scrollbar { display: none; }

.explore-mobile-cmds button {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    min-height: 32px;
}

.explore-mobile-cmds button:hover,
.explore-mobile-cmds button:active {
    color: var(--terminal-text);
    background: rgba(255, 255, 255, 0.08);
}

/* Focus styles on dark background */
.page-explore :focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

.explore-input-bar input:focus-visible {
    outline: none;
}

/* --- CTA Bar --- */
.explore-cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.6rem + 0.1vw, 12px);
}

.explore-cta-bar a {
    color: var(--terminal-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.explore-cta-bar a:hover {
    color: var(--terminal-accent);
    border-bottom-color: var(--terminal-accent);
}

.explore-cta-sep {
    color: rgba(122, 118, 114, 0.4);
}

/* Syntax classes reused from terminal.css */
.explore-output .t-accent  { color: var(--terminal-accent); }
.explore-output .t-dim     { color: var(--terminal-dim); }
.explore-output .t-success { color: var(--color-live); }
.explore-output .t-string  { color: #c4a882; }
.explore-output .t-value   { color: var(--terminal-accent); }
.explore-output .t-tree    { color: rgba(255, 255, 255, 0.15); }
.explore-output .t-error   { color: #c97a5a; }
.explore-output .t-gold    { color: var(--gold); }
.explore-output .t-testnet { color: var(--color-testnet); }
.explore-output .t-domain  { color: var(--terminal-accent); }
.explore-output .t-label   { color: var(--terminal-dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.explore-output .t-hash    { color: #8a8480; font-size: 11px; }
.explore-output .t-link    { color: var(--terminal-dim); border-bottom: 1px solid rgba(255,255,255,0.15); text-decoration: none; }
.explore-output .t-link:hover { color: var(--terminal-accent); border-bottom-color: var(--terminal-accent); }
.explore-output .t-th      { color: #9a9692; font-size: 11px; letter-spacing: 0.04em; }

/* --- Responsive --- */
@media (max-width: 768px) {

    .explore-cta-bar {
        display: none;
    }

    .explore-mobile-cmds {
        display: flex;
    }

    .explore-input-bar input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .explore-output {
        padding: var(--space-2) var(--space-3);
    }

    .page-explore .nav-primary {
        background: rgba(12, 11, 10, 0.98);
    }

    .page-explore .nav-primary a {
        color: var(--terminal-dim);
    }

    .page-explore .nav-primary a:hover,
    .page-explore .nav-primary a[aria-current="page"] {
        color: var(--terminal-text);
    }
}

@media (max-width: 480px) {
    .explore-output {
        font-size: 11px;
        padding: var(--space-1-5) var(--space-2);
    }

    .explore-chrome .title {
        font-size: 11px;
    }
}

/* ═══════ ZONE CONFIGURATOR ═══════ */

/* Two-column layout: paper controls + terminal YAML */
.configure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* --- Controls panel (paper register) --- */
.configure-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.configure-section-label {
    font-family: var(--font-caption);
    font-size: var(--text-xs);
    color: var(--ink-ghost);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

/* Jurisdiction preset cards */
.configure-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
}

.configure-preset {
    padding: var(--space-2) var(--space-2);
    border: 1px solid var(--ink-hint);
    background: var(--paper);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    text-align: center;
}

.configure-preset:hover {
    border-color: var(--ink-whisper);
    background: var(--paper-dim);
}

.configure-preset.active {
    border-color: var(--corridor-cross);
    background: rgba(139, 76, 58, 0.04);
}

.configure-preset-name {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink);
    display: block;
    font-weight: 500;
    margin-bottom: 2px;
}

.configure-preset-detail {
    font-family: var(--font-caption);
    font-size: 11px;
    color: var(--ink-ghost);
    display: block;
}

/* Primitive toggles */
.configure-primitives {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.configure-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1-5) var(--space-2);
    border: 1px solid var(--ink-hint);
    background: var(--paper);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.configure-toggle:hover {
    background: var(--paper-dim);
}

.configure-toggle.active {
    border-color: var(--color-live);
    background: rgba(45, 125, 70, 0.03);
}

.configure-toggle-info {
    display: flex;
    flex-direction: column;
}

.configure-toggle-name {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink);
    font-weight: 500;
}

.configure-toggle-syscall {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-ghost);
}

.configure-toggle-indicator {
    width: 32px;
    height: 18px;
    border: 1px solid var(--ink-hint);
    background: var(--paper-dim);
    position: relative;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.configure-toggle-indicator::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--ink-whisper);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.configure-toggle.active .configure-toggle-indicator {
    background: rgba(45, 125, 70, 0.08);
    border-color: var(--color-live);
}

.configure-toggle.active .configure-toggle-indicator::after {
    transform: translateX(14px);
    background: var(--color-live);
}

/* Module groups */
.configure-modules {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.configure-group {
    border: 1px solid var(--ink-hint);
    background: var(--paper);
    overflow: hidden;
}

.configure-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1-5) var(--space-2);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.configure-group-header:hover {
    background: var(--paper-dim);
}

.configure-group-name {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink);
    font-weight: 500;
}

.configure-group-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-ghost);
}

.configure-group-modules {
    display: none;
    padding: 0 var(--space-2) var(--space-1-5);
    flex-direction: column;
    gap: 4px;
}

.configure-group.open .configure-group-modules {
    display: flex;
}

.configure-module {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-1);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.configure-module:hover {
    background: var(--paper-dim);
}

.configure-module-check {
    width: 14px;
    height: 14px;
    border: 1px solid var(--ink-hint);
    background: var(--paper);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    font-size: 10px;
    color: transparent;
}

.configure-module.active .configure-module-check {
    background: var(--color-live);
    border-color: var(--color-live);
    color: white;
}

.configure-module-name {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
}

/* Compliance tier radio cards */
.configure-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
}

.configure-tier {
    padding: var(--space-2);
    border: 1px solid var(--ink-hint);
    background: var(--paper);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.configure-tier:hover {
    background: var(--paper-dim);
}

.configure-tier.active {
    border-color: var(--corridor-cross);
    background: rgba(139, 76, 58, 0.04);
}

.configure-tier-name {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

.configure-tier-domains {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-ghost);
    display: block;
}

/* --- Terminal panel --- */
.configure-terminal {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    border: 1px solid var(--terminal-border);
    background: var(--terminal-deep);
    overflow: hidden;
    box-shadow: var(--shadow-terminal);
}

.configure-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    background: #080807;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.configure-chrome .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.configure-chrome .dot:nth-child(1) { background: var(--dot-red); }
.configure-chrome .dot:nth-child(2) { background: var(--dot-yellow); }
.configure-chrome .dot:nth-child(3) { background: var(--dot-green); }

.configure-chrome .title {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-dim);
    letter-spacing: 0.03em;
}

.configure-yaml {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: clamp(11.5px, 0.72rem + 0.1vw, 13px);
    line-height: 1.75;
    color: var(--terminal-text);
    white-space: pre;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
    min-height: 400px;
}

.configure-yaml::-webkit-scrollbar { width: 4px; }
.configure-yaml::-webkit-scrollbar-track { background: transparent; }
.configure-yaml::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 2px; }

/* YAML syntax colors */
.configure-yaml .y-comment { color: rgba(122, 118, 114, 0.7); font-style: italic; }
.configure-yaml .y-key     { color: #d4cfc9; }
.configure-yaml .y-value   { color: var(--terminal-accent); }
.configure-yaml .y-string  { color: #c4a882; }
.configure-yaml .y-bool    { color: var(--color-live); }
.configure-yaml .y-bool-off { color: #c97a5a; }
.configure-yaml .y-section { color: var(--terminal-accent); font-weight: 500; }
.configure-yaml .y-dim     { color: var(--terminal-dim); }

/* Summary bar */
.configure-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.configure-metric {
    padding: var(--space-1-5) var(--space-2);
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.configure-metric:last-child { border-right: none; }

.configure-metric-value {
    font-family: var(--font-mono);
    font-size: clamp(14px, 0.88rem + 0.1vw, 16px);
    color: var(--terminal-accent);
    display: block;
    font-weight: 500;
}

.configure-metric-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--terminal-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

/* Share actions */
.configure-actions {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.configure-actions button {
    flex: 1;
    padding: var(--space-1-5) var(--space-2);
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    min-height: 44px;
}

.configure-actions button:last-child { border-right: none; }

.configure-actions button:hover {
    color: var(--terminal-text);
    background: rgba(255, 255, 255, 0.04);
}

.configure-actions button.copied {
    color: var(--color-live);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .configure-grid {
        grid-template-columns: 1fr;
    }

    .configure-terminal {
        position: static;
        max-height: none;
    }

    .configure-yaml {
        min-height: 300px;
        max-height: 50vh;
    }

    .configure-presets {
        grid-template-columns: repeat(2, 1fr);
    }

    .configure-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .configure-metric {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
}

@media (max-width: 480px) {
    .configure-presets {
        grid-template-columns: 1fr;
    }

    .configure-tiers {
        grid-template-columns: 1fr;
    }

    .configure-yaml {
        font-size: 11px;
        padding: var(--space-2) var(--space-3);
    }
}

/* ═══════ ANATOMY PAGE ═══════ */

.anatomy-section {
    background: var(--terminal-bg);
    padding: var(--space-8) 0;
    color: var(--terminal-text);
}

.anatomy-panel {
    background: var(--terminal-surface);
    border: 1px solid var(--terminal-border);
}

/* API call body — inherits code-block but tighten line-height */
.anatomy-api-body {
    border-bottom: 1px solid var(--terminal-border);
    line-height: 1.6;
}

/* ── Jurisdiction tabs ── */

.anatomy-tabs-row {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--terminal-border);
}

.anatomy-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.anatomy-tab {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--terminal-border);
    color: var(--terminal-dim);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.anatomy-tab:hover {
    color: var(--terminal-text);
    border-color: var(--terminal-accent-30);
}

.anatomy-tab:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

.anatomy-tab.active {
    color: var(--terminal-accent);
    border-color: var(--terminal-accent);
    background: rgba(184, 159, 130, 0.08);
}

.anatomy-legal-basis {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    font-style: italic;
}

/* ── Two-column layout ── */

.anatomy-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    border-bottom: 1px solid var(--terminal-border);
    min-height: 300px;
}

.anatomy-dag-col {
    border-right: 1px solid var(--terminal-border);
    padding: var(--space-3);
}

.anatomy-details-col {
    padding: var(--space-3);
}

.anatomy-col-header {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

/* ── Step DAG: waves ── */

.anatomy-wave {
    margin-bottom: var(--space-2);
}

.anatomy-wave:last-child {
    margin-bottom: 0;
}

.anatomy-wave-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-0-5);
    padding-left: 2px;
}

.anatomy-wave-parallel {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
}

.anatomy-wave-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ── Step cards ── */

.anatomy-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-1) var(--space-1-5);
    background: var(--terminal-chrome);
    border: 1px solid var(--terminal-border);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    text-align: left;
    min-width: 140px;
}

.anatomy-step:hover {
    border-color: var(--terminal-accent-30);
}

.anatomy-step:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

.anatomy-step.active {
    border-color: var(--terminal-accent);
    background: rgba(184, 159, 130, 0.06);
}

.anatomy-step-name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--terminal-text);
}

.anatomy-step-type {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    margin-top: 2px;
}

.anatomy-step-svc {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-accent);
    opacity: 0.7;
    margin-top: 1px;
}

/* ── Wave connector ── */

.anatomy-connector {
    width: 1px;
    height: 12px;
    background: var(--terminal-accent-30);
    margin: 0 0 var(--space-1) 20px;
}

/* ── Details panel ── */

.anatomy-details-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.anatomy-details-hint {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--terminal-dim);
    font-style: italic;
}

.anatomy-detail-header {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--terminal-accent);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--terminal-border);
}

.anatomy-detail-row {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-1-5);
}

.anatomy-detail-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--terminal-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

.anatomy-detail-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--terminal-text);
    word-break: break-word;
}

.anatomy-detail-svc-label {
    color: var(--terminal-accent);
    opacity: 0.7;
}

.anatomy-detail-none {
    color: var(--terminal-dim);
    font-style: italic;
}

.anatomy-detail-domain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.anatomy-domain-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(184, 159, 130, 0.12);
    color: var(--terminal-accent);
    border: 1px solid rgba(184, 159, 130, 0.15);
}

.anatomy-dep-link {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--terminal-accent);
    background: none;
    border: none;
    border-bottom: 1px solid var(--terminal-accent-30);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition-fast);
}

.anatomy-dep-link:hover {
    border-color: var(--terminal-accent);
}

.anatomy-dep-link:focus-visible {
    outline: 2px solid var(--terminal-accent);
    outline-offset: 2px;
}

.anatomy-detail-desc {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--terminal-border);
}

.anatomy-detail-desc-text {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-text-65);
    line-height: 1.6;
}

/* ── Compliance tensor ── */

.anatomy-compliance {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--terminal-border);
}

.anatomy-compliance-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}

.anatomy-compliance-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.anatomy-compliance-domain {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    background: transparent;
    color: var(--terminal-dim);
    border: 1px solid var(--terminal-border);
    opacity: 0.4;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.anatomy-compliance-domain.active {
    opacity: 1;
    color: var(--terminal-accent);
    background: rgba(184, 159, 130, 0.08);
    border-color: rgba(184, 159, 130, 0.2);
}

/* ── Fees ── */

.anatomy-fees {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--terminal-border);
}

.anatomy-fees-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}

.anatomy-fee-row {
    display: flex;
    gap: var(--space-2);
    padding: 3px 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.anatomy-fee-amount {
    color: var(--terminal-accent);
    font-weight: 500;
    min-width: 100px;
}

.anatomy-fee-detail {
    color: var(--terminal-text-65);
}

.anatomy-fee-authority {
    color: var(--terminal-text);
}

/* ── Summary bar ── */

.anatomy-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--terminal-dim);
    background: var(--terminal-chrome);
}

.anatomy-stat {
    color: var(--terminal-text-65);
}

.anatomy-stat-sep {
    color: var(--terminal-dim);
    opacity: 0.5;
}

/* ── CTA links ── */

.anatomy-cta-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink);
    border-bottom: 1px solid var(--ink-whisper);
    padding: var(--space-1) var(--space-2);
    transition: border-color var(--transition-fast);
}

.anatomy-cta-link:hover {
    border-color: var(--ink);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .anatomy-main {
        grid-template-columns: 1fr;
    }

    .anatomy-dag-col {
        border-right: none;
        border-bottom: 1px solid var(--terminal-border);
    }

    .anatomy-step {
        min-width: 120px;
    }

    .anatomy-fee-row {
        flex-direction: column;
        gap: 2px;
    }

    .anatomy-fee-amount {
        min-width: auto;
    }

    .anatomy-summary {
        flex-wrap: wrap;
    }
}
/* ═══════════════════════════════════════
   TERMINAL & CODE
   Code blocks, deploy terminal,
   syntax colors, code panel
   ═══════════════════════════════════════ */

/* --- Code Panel (macOS window chrome) --- */
.code-panel {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-terminal);
    background: var(--terminal-deep);
    border: 1px solid var(--terminal-border);
}

.code-panel .section-eyebrow {
    color: var(--terminal-dim);
}

.code-panel .section-title {
    color: var(--terminal-text);
}

.code-panel .section-subtitle {
    color: var(--terminal-dim);
}

.code-block-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--terminal-chrome);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.code-block-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.code-block-header .title {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-dim);
    letter-spacing: 0.03em;
}

/* In scroll-synced layout: panel fills the sticky container */
.code-panel-sticky .code-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Sharp corners — no border-radius per designconstraints.md */
}

/* --- Code Block --- */
.code-block {
    background: var(--terminal-deep);
    padding: var(--space-4) var(--space-3);
    font-family: var(--font-mono);
    font-size: clamp(12.5px, 0.76rem + 0.12vw, 14px);
    line-height: 1.85;
    color: var(--terminal-text);
    overflow-x: auto;
    overflow-y: visible;
    white-space: pre;
    word-break: normal;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    tab-size: 2;
}

/* In scroll-synced layout: code block fills the scene and scrolls */
.code-scroll-layout .code-block {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
}

.code-scroll-layout .code-block::-webkit-scrollbar { width: 6px; }
.code-scroll-layout .code-block::-webkit-scrollbar-track { background: transparent; }
.code-scroll-layout .code-block::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 3px; }
.code-scroll-layout .code-block::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* Syntax coloring */
.code-prompt  { color: var(--terminal-accent); }
.code-comment { color: rgba(122, 118, 114, 0.7); font-style: italic; }
.code-key     { color: var(--syntax-key); }
.code-value   { color: var(--terminal-accent); }
.code-string  { color: var(--syntax-string); }
.code-success { color: var(--color-live); }
.code-dim     { color: var(--terminal-dim); }
.code-tree    { color: rgba(255, 255, 255, 0.15); }
.code-corridor-cross { color: var(--corridor-cross); }
.code-corridor-fz    { color: var(--corridor-fz-fz); }
.code-domain         { color: var(--terminal-accent); }

/* Dark scrollbar for code blocks (horizontal) */
.code-block::-webkit-scrollbar { height: 6px; }
.code-block::-webkit-scrollbar-track { background: transparent; }
.code-block::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 3px; }
.code-block::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* --- CLI Output Block --- */
.code-cli {
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono);
    font-size: clamp(12.5px, 0.78rem + 0.1vw, 14px);
    color: rgba(229, 226, 223, 0.8);
    line-height: 1.7;
}

.code-cli .code-success {
    color: var(--color-live);
}

/* --- Deploy Terminal --- */
.deploy-terminal {
    margin-top: var(--space-8);
    position: relative;
}

.deploy-terminal-panel {
    position: relative;
    overflow: hidden;
    background: var(--terminal-deep);
    border: 1px solid var(--terminal-border);
    box-shadow: var(--shadow-terminal-deep);
}

.deploy-terminal-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    background: var(--terminal-deep);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.deploy-terminal-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.deploy-terminal-header .dot:nth-child(1) { background: var(--dot-red); }
.deploy-terminal-header .dot:nth-child(2) { background: var(--dot-yellow); }
.deploy-terminal-header .dot:nth-child(3) { background: var(--dot-green); }

.deploy-terminal-header .title {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--terminal-dim);
    letter-spacing: 0.03em;
}

.deploy-terminal-header .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.deploy-terminal-header .status-dot.active {
    opacity: 1;
}

.deploy-terminal-body {
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.75rem + 0.1vw, 13.5px);
    line-height: 1.85;
    color: var(--terminal-text);
    height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar) transparent;
}

.deploy-terminal-body::-webkit-scrollbar { width: 4px; }
.deploy-terminal-body::-webkit-scrollbar-track { background: transparent; }
.deploy-terminal-body::-webkit-scrollbar-thumb { background: var(--terminal-scrollbar); border-radius: 2px; }
.deploy-terminal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* Command groups */
.deploy-cmd-group {
    margin-bottom: var(--space-3);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
}

.deploy-cmd-group.visible {
    opacity: 1;
    transform: none;
}

.deploy-cmd {
    white-space: pre-wrap;
    word-break: break-all;
}

.deploy-cmd .prompt {
    color: var(--terminal-accent);
}

.deploy-cmd .cmd-text {
    color: var(--terminal-text);
}

.deploy-cmd .cmd-flag {
    color: var(--terminal-dim);
}

.deploy-cmd .cmd-arg {
    color: #c4a882;
}

/* Output lines */
.deploy-output {
    white-space: pre-wrap;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.deploy-output.visible {
    opacity: 1;
}

.deploy-output .success {
    color: var(--color-live);
}

.deploy-output .info {
    color: var(--terminal-dim);
}

.deploy-output .corridor-type {
    color: var(--corridor-cross);
    font-size: 0.9em;
    letter-spacing: 0.02em;
}

.deploy-output .corridor-type--fz {
    color: var(--corridor-fz-fz);
}

.deploy-output .status-active {
    color: var(--color-live);
}

.deploy-output .value {
    color: var(--terminal-accent);
}

.deploy-output .dim {
    color: var(--terminal-dim);
}

.deploy-output .hash {
    color: rgba(184, 159, 130, 0.5);
    font-size: 0.9em;
}

.deploy-output .tree {
    color: rgba(255, 255, 255, 0.15);
}

.deploy-output .tree-last {
    color: rgba(255, 255, 255, 0.15);
}

/* Block cursor */
.deploy-cursor {
    color: var(--terminal-accent);
    margin-left: 1px;
}

/* Divider between command groups */
.deploy-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    margin: var(--space-2) 0;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.deploy-divider.visible {
    opacity: 1;
}

/* Summary line */
.deploy-summary {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.deploy-summary.visible {
    opacity: 1;
    transform: none;
}

.deploy-summary .label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--terminal-dim);
    margin-bottom: 4px;
}

.deploy-summary .value {
    color: var(--terminal-accent);
    font-size: clamp(13px, 0.82rem + 0.1vw, 15px);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .code-block {
        font-size: 11.5px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-x: hidden;
    }

    .deploy-terminal-body {
        padding: var(--space-3) var(--space-4);
        font-size: 11.5px;
        height: 280px;
    }

    .deploy-terminal-panel {
        /* Sharp corners maintained at all breakpoints */
    }
}

@media (max-width: 480px) {
    .deploy-terminal-body {
        height: 220px;
        padding: var(--space-2) var(--space-3);
        font-size: 11px;
    }

    .code-block {
        font-size: 11px;
        padding: var(--space-3) var(--space-2);
    }
}
/* ═══════════════════════════════════════
   ANIMATIONS
   Scroll reveals, hero entrance, particles,
   reduced-motion, print styles
   ═══════════════════════════════════════ */

/* --- No-Preference: Full Animations --- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Page-load hero entrance — eyebrow first, then per-word title, then subtitle */
    .hero-eyebrow {
        animation: fadeUp 700ms var(--ease-out-expo) both;
    }

    .hero-title {
        /* Title animation handled per-word by JS; fallback for no-JS */
        animation: fadeUp 700ms var(--ease-out-expo) both;
        animation-delay: 120ms;
    }

    /* When JS splits into words, disable the title-level animation */
    .hero-title.word-split {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-title .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 600ms var(--ease-out-expo) both;
    }

    .hero-subtitle { animation: fadeUp 700ms var(--ease-out-expo) both; animation-delay: 600ms; }

    .stat-item {
        animation: fadeUp 600ms var(--ease-out-expo) both;
    }

    .stat-item:nth-child(1) { animation-delay: 300ms; }
    .stat-item:nth-child(2) { animation-delay: 400ms; }
    .stat-item:nth-child(3) { animation-delay: 500ms; }
    .stat-item:nth-child(4) { animation-delay: 600ms; }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Scroll-triggered reveals — unified system.
       Legacy .reveal-on-scroll is mapped to .reveal/.visible by JS. */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s var(--ease-out-expo),
                    transform 0.5s var(--ease-out-expo);
    }

    .reveal-on-scroll.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger children within grid-like containers */
    .stagger-children.revealed > * {
        opacity: 0;
        animation: staggerIn 700ms var(--ease-out-expo) forwards;
    }

    .stagger-children.revealed > *:nth-child(1) { animation-delay: 0ms; }
    .stagger-children.revealed > *:nth-child(2) { animation-delay: 60ms; }
    .stagger-children.revealed > *:nth-child(3) { animation-delay: 120ms; }
    .stagger-children.revealed > *:nth-child(4) { animation-delay: 180ms; }
    .stagger-children.revealed > *:nth-child(5) { animation-delay: 240ms; }
    .stagger-children.revealed > *:nth-child(6) { animation-delay: 300ms; }
    .stagger-children.revealed > *:nth-child(7) { animation-delay: 360ms; }
    .stagger-children.revealed > *:nth-child(8) { animation-delay: 420ms; }

    @keyframes staggerIn {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Scroll reveal (current naming) */
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s var(--ease-out-expo),
                    transform 0.5s var(--ease-out-expo);
    }

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

    .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
    .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
    .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
    .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }

    /* Path arrow interaction */
    .path-arrow {
        transition: transform 350ms var(--ease-out-expo);
    }

    .path-card:hover .path-arrow {
        transform: translateX(6px);
    }

    /* Button press feedback */
    .btn-primary:active,
    .btn-secondary:active {
        transition-duration: 50ms;
    }

    /* Zone pulse ring — uses transform for cross-browser SVG compat */
    @keyframes zone-pulse-ring {
        0%   { transform: scale(1); opacity: 0.5; }
        100% { transform: scale(4); opacity: 0; }
    }

    /* Testnet breathing dot — scale pulse (compositor-only, no repaint) */
    @keyframes testnet-breathe {
        0%   { transform: scale(1);   opacity: 1; }
        50%  { transform: scale(2.2); opacity: 0.3; }
        100% { transform: scale(1);   opacity: 1; }
    }

    /* Particles */
    .mesh-particle {
        fill: var(--particle);
        opacity: 0;
    }

    .mesh-particle.active {
        animation: particle-traverse var(--duration-particle) var(--ease-in-out-sine) forwards;
    }

    @keyframes particle-traverse {
        0%  { opacity: 0; offset-distance: 0%; }
        5%  { opacity: 0.8; }
        90% { opacity: 0.8; }
        100% { opacity: 0; offset-distance: 100%; }
    }

    /* Typing animation for code lines */
    .code-typed .code-line {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
    }

    .code-typed .code-line.visible {
        opacity: 1;
        transform: none;
    }

    /* Deploy terminal cursor blink */
    .deploy-cursor {
        animation: cursor-blink 1s step-end infinite;
    }

    @keyframes cursor-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    .deploy-cursor.typing {
        animation: none;
        opacity: 1;
    }

    .deploy-cursor.done {
        animation: cursor-blink 1.2s step-end infinite;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero-title .word {
        opacity: 1;
        transform: none;
    }

    .code-typed .code-line {
        opacity: 1;
        transform: none;
    }

    .deploy-cursor {
        opacity: 0.5;
    }

    .deploy-cmd-group,
    .deploy-output,
    .deploy-divider,
    .deploy-summary {
        opacity: 1;
        transform: none;
    }

    .corridor-trace-comparison {
        opacity: 1;
        transform: none;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-primary--inverse:hover,
    .btn-secondary--inverse:hover,
    .path-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* --- Print + Reduced Motion --- */
@media print, (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Print --- */
@media print {
    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    .site-header,
    .paths-section,
    .nav-toggle {
        display: none;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .mesh-hero,
    .mesh-legend,
    .mesh-particle {
        display: none;
    }

    .ne-mesh,
    .ne-timeline {
        display: none;
    }

    .ne-section {
        break-inside: avoid;
    }

    .code-block {
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .bridge-section,
    .pillars-section,
    .stack-section {
        break-inside: avoid;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .corridor-trace-terminal,
    .code-panel-sticky,
    .code-immersive {
        break-inside: avoid;
    }

    .corridor-trace-pre {
        height: auto;
        overflow: visible;
        white-space: pre-wrap;
    }

    .cta-section--dark,
    .ne-visualizer,
    #corridor-calc,
    .ne-timeline {
        display: none;
    }
}