:root {
            --ink: #0A0A0A;
            --paper: #FFFFFF;
            --graphite: #A0A0A0;
            --dim: #7A7A7A;
            --fog: #3A3A3A;
            --line: #565656;
            --static: rgba(255, 255, 255, 0.072);
            --transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        html { scroll-behavior: smooth; }

        body {
            background-color: var(--ink);
            color: var(--paper);
            font-family: 'IBM Plex Mono', monospace;
            overflow-x: hidden;
            font-weight: 400;
            line-height: 1.5;
        }

        .dashed-line {
            height: 1px;
            width: 100%;
            background-image: linear-gradient(to right, var(--fog) 50%, transparent 50%);
            background-size: 8px 1px;
            margin: clamp(28px, 5vw, 40px) 0;
        }

        /* ---------- Nav ---------- */
        header {
            position: fixed;
            top: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            max-width: calc(100vw - 32px);
        }

        nav {
            position: relative;
            display: flex;
            align-items: center;
            gap: 24px;
            background: rgba(10, 10, 10, 0.88);
            backdrop-filter: blur(16px);
            border: 1px solid var(--fog);
            border-radius: 2px;
            padding: 6px 8px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            font-family: 'Array', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            margin-left: 0;
            /* nav's 24px flex gap only pads the right side (toward the divider);
               cancel it so box-edge->F equals N->divider (minus 2px trailing letter-spacing) */
            margin-right: -12px;
            line-height: 1;
            font-size: 14px;
            color: var(--paper);
            text-decoration: none;
            padding: 2px 12px;
        }

        .brand-logo {
            display: block;
            height: 44px;
            width: auto;
            /* Negative margins cancel the logo's extra height so the
               menubar keeps its previous size */
            margin: -6px 2px -6px 0;
        }

        .nav-links {
            display: flex;
            gap: 4px;
            border-left: 1px solid var(--fog);
            padding-left: 16px;
            position: relative;
        }

        /* White page selector behind the active tab */
        .nav-pill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--paper);
            pointer-events: none;
        }

        nav a {
            text-decoration: none;
            color: var(--graphite);
            font-size: 13px;
            font-weight: 500;
            padding: 8px 16px;
            position: relative;
            z-index: 1;
            transition: color var(--transition), background var(--transition);
        }

        nav a:hover { color: var(--paper); }

        /* Equal-width buttons: 136px fits the widest label ("Join Waitlist",
           13 mono chars x 7.8px + 32px padding + 2px border = 135.4px) */
        .nav-links a,
        .nav-cta {
            min-width: 136px;
            text-align: center;
        }

        nav a.active { color: var(--ink); }

        .nav-cta {
            border: 1px solid var(--line);
            color: var(--paper) !important;
        }

        .nav-cta:hover { border-color: var(--paper); }

        /* ---------- Grid frame ---------- */
        .container {
            max-width: 1200px;
            margin: clamp(120px, 16vw, 160px) auto 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-gap: 1px;
            background-color: var(--fog);
            border: 1px solid var(--fog);
        }

        section { scroll-margin-top: 110px; }

        .card {
            background: var(--ink);
            padding: clamp(40px, 6.5vw, 80px) clamp(24px, 5vw, 64px);
            position: relative;
        }

        /* White registration marks: all 4 corners of EVERY panel,
           drawn inside each box so adjacent boxes each keep their own mark */
        .card,
        .stat-card,
        .footer-panel {
            background-image:
                linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)),
                linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)),
                linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)),
                linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper));
            background-position:
                left top, left top,
                right top, right top,
                left bottom, left bottom,
                right bottom, right bottom;
            background-size:
                10px 1px, 1px 10px,
                10px 1px, 1px 10px,
                10px 1px, 1px 10px,
                10px 1px, 1px 10px;
            background-repeat: no-repeat;
        }

        h1, h2, h3 {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: var(--paper);
        }

        h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 48px; }
        h2 { font-size: clamp(26px, 3vw, 32px); }
        h3 { font-size: clamp(20px, 2.2vw, 24px); }

        p {
            font-size: 16px;
            line-height: 1.5;
            color: var(--graphite);
        }

        .label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--dim);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .label::before {
            content: '';
            width: 8px;
            height: 1px;
            background: var(--paper);
            flex-shrink: 0;
        }

        /* ---------- Hero ---------- */
        .hero-section {
            grid-column: span 8;
            border-right: 1px solid var(--fog);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
        }

        /* ---------- Buttons ---------- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            border-radius: 2px;
            cursor: pointer;
            background: transparent;
            transition: background var(--transition), border-color var(--transition), color var(--transition);
            font-family: 'IBM Plex Mono', monospace;
        }

        .btn-orange { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); }
        .btn-orange:hover { background: #E4E4E4; }

        .btn-outline { border: 1px solid var(--line); color: var(--paper); }
        .btn-outline:hover { border-color: var(--paper); background: var(--static); }

        :is(a, button, input):focus-visible {
            outline: 2px solid var(--paper);
            outline-offset: 3px;
        }

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

        /* ---------- Side stats ---------- */
        .side-stats {
            grid-column: span 4;
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 1px;
            background: var(--fog);
        }

        .stat-card {
            background-color: var(--ink);
            padding: clamp(28px, 5vw, 48px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .stat-num { font-size: clamp(36px, 4vw, 48px); }

        .stat-note {
            font-size: 12px;
            color: var(--dim);
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed var(--fog);
        }

        .meter-label {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 11px;
            letter-spacing: 0.1em;
            color: var(--dim);
            margin-top: 24px;
            text-transform: uppercase;
        }

        .meter-track {
            margin-top: 10px;
            height: 4px;
            background: var(--static);
            overflow: hidden;
        }

        .meter-fill {
            width: 100%;
            height: 100%;
            background: var(--paper);
        }

        /* ---------- Network roster ---------- */
        .bento-wide { grid-column: span 7; }
        .bento-small { grid-column: span 5; border-left: 1px solid var(--fog); }

        .roster-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 40px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--fog);
        }

        .agent-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 16px;
            padding: 18px 0;
            border-bottom: 1px solid var(--fog);
            font-size: 14px;
            transition: background var(--transition), transform var(--transition);
        }

        #network .agent-row span {
            transition: color 0.5s ease, text-shadow 0.5s ease;
        }

        #network .agent-row:hover {
            background: transparent;
            transform: none;
        }

        #network .agent-row:hover span:first-child {
            color: #D6D6D6;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        #network .agent-row:hover span:last-child {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .agent-row span:first-child { color: var(--graphite); }

        .agent-row span:last-child {
            color: var(--paper);
            font-size: 11px;
            letter-spacing: 0.1em;
        }

        .agent-more {
            display: block;
            padding: 16px 0 0;
            font-size: 11px;
            letter-spacing: 0.1em;
            color: var(--dim);
            text-transform: uppercase;
        }

        /* ---------- Entry points ---------- */
        .vector-list {
            display: flex;
            flex-direction: column;
            gap: 28px;
            margin-top: 32px;
        }

        .vector-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: opacity var(--transition);
        }

        /* Fade: brightest at top, slightly visible at bottom */
        .vector-item:nth-child(1) { opacity: 1; }
        .vector-item:nth-child(2) { opacity: 0.82; }
        .vector-item:nth-child(3) { opacity: 0.66; }
        .vector-item:nth-child(4) { opacity: 0.52; }
        .vector-item:nth-child(5) { opacity: 0.42; }
        .vector-item:nth-child(6) { opacity: 0.34; }
        .vector-item:nth-child(7) { opacity: 0.27; }
        .vector-item:nth-child(8) { opacity: 0.2; }
        .vector-item:nth-child(9) { opacity: 0.14; }

        .vector-tick {
            width: 4px;
            min-height: 40px;
            background: var(--paper);
            flex-shrink: 0;
        }

        .vector-tick.muted { background: var(--fog); }

        .vector-name { font-weight: 500; font-size: 15px; margin-bottom: 4px; }
        .vector-desc { font-size: 13px; }

        /* ---------- Pipeline ---------- */
        .full-width { grid-column: span 12; }

        .pipeline-grid {
            display: flex;
            margin-top: clamp(40px, 6vw, 64px);
            position: relative;
        }

        .pipeline-stage {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            padding-right: 32px;
        }

        .stage-node {
            position: relative;
            width: 40px;
            height: 40px;
            border: 1px solid var(--fog);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            background: var(--ink);
        }

        .stage-node.final { border-color: var(--paper); }

        .pulse {
            position: absolute;
            inset: 0;
            border: 1px solid var(--paper);
            opacity: 0;
            animation: pulse 2s ease-out infinite;
            pointer-events: none;
        }

        @keyframes pulse {
            0%   { transform: scale(1); opacity: 0.6; }
            100% { transform: scale(1.6); opacity: 0; }
        }

        .pipeline-stage:nth-child(2) .pulse { animation-delay: 0.4s; }
        .pipeline-stage:nth-child(3) .pulse { animation-delay: 0.8s; }
        .pipeline-stage:nth-child(4) .pulse { animation-delay: 1.2s; }
        .pipeline-stage:nth-child(5) .pulse { animation-delay: 1.6s; }

        .node-id { font-size: 12px; color: var(--graphite); }
        .stage-node.final .node-id { color: var(--paper); }

        .stage-title {
            font-family: 'Array', sans-serif;
            font-size: 20px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .stage-meta { font-size: 11px; color: var(--graphite); letter-spacing: 0.1em; }

        .connector {
            position: absolute;
            top: 20px;
            left: 56px;   /* 40px node + 16px gap */
            right: 16px;  /* stop just before the next node */
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 6px;
            pointer-events: none;
        }

        .connector-line { flex: 1; height: 1px; background: var(--fog); }

        .connector-arrow {
            width: 6px;
            height: 6px;
            flex-shrink: 0;
            border-top: 1px solid var(--graphite);
            border-right: 1px solid var(--graphite);
            transform: rotate(45deg);
            margin-top: -1px;
        }

        .pipeline-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid var(--fog);
        }

        .footer-label { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; }
        .footer-val { font-size: 14px; color: var(--paper); }
        .footer-divider { color: var(--fog); }
        .footer-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }

        /* ---------- Capabilities ---------- */
        .use-cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(40px, 5vw, 64px);
            margin-top: clamp(40px, 5vw, 64px);
        }

        .use-case-col { border-top: 1px solid var(--fog); padding-top: 40px; }
        .use-case-num { font-size: 12px; color: var(--dim); margin-bottom: 24px; display: block; }

        /* ---------- Shared page utilities (subpages) ---------- */
        .cols {
            display: grid;
            grid-template-columns: 1fr;
            gap: 48px;
        }

        @media (min-width: 901px) {
            .cols-2 { grid-template-columns: 1fr 1fr; }
            .cols-5-7 { grid-template-columns: 5fr 7fr; }
            .cols-3 { grid-template-columns: repeat(3, 1fr); }
        }

        .tier-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1px;
            background: var(--fog);
            border: 1px solid var(--fog);
            margin-top: 64px;
        }

        @media (min-width: 901px) {
            .tier-grid { grid-template-columns: repeat(3, 1fr); }
        }

        .tier-card {
            background-color: var(--ink);
            padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 44px);
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .tier-card.featured { background-color: var(--static); }

        .tier-name {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            font-size: 22px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .tier-desc { font-size: 13px; color: var(--graphite); min-height: 60px; }

        .tier-price {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            font-size: clamp(38px, 6vw, 52px);
            margin: 32px 0 8px;
        }

        .price-unit { font-size: 11px; letter-spacing: 0.1em; color: var(--dim); }

        .spec-list { margin: 36px 0 40px; border-top: 1px solid var(--fog); }

        .spec-row {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px solid var(--fog);
            font-size: 13px;
        }

        .spec-row span:first-child { color: var(--dim); }
        .spec-row span:last-child { color: var(--paper); }

        .metric-list { border-top: 1px solid var(--fog); margin-top: 40px; }

        .metric-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 24px;
            padding: 18px 0;
            border-bottom: 1px solid var(--fog);
            font-size: 13px;
        }

        .metric-label { color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
        .metric-values { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
        .metric-before { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--fog); }
        .metric-arrow { color: var(--fog); }
        .metric-after { color: var(--paper); font-size: 16px; }

        .check-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 0;
            border-bottom: 1px solid var(--fog);
            font-size: 15px;
        }

        .check-tick {
            width: 20px;
            height: 20px;
            border: 1px solid var(--paper);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
        }

        /* ---------- Checkout ---------- */
        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px 24px;
            margin-top: 40px;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .field.span-2 { grid-column: span 2; }

        .field-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--dim);
        }

        .checkout-input {
            background: var(--static);
            border: 1px solid var(--fog);
            padding: 14px 18px;
            color: var(--paper);
            width: 100%;
            font-size: 14px;
            border-radius: 2px;
            font-family: 'IBM Plex Mono', monospace;
            transition: border-color var(--transition), background var(--transition);
            color-scheme: dark;
        }

        .checkout-input::placeholder { color: var(--dim); }
        .checkout-input:hover { border-color: var(--line); }
        .checkout-input:focus { outline: none; border-color: var(--paper); }
        .checkout-input[aria-invalid="true"] { border-color: var(--paper); background: rgba(255,255,255,0.12); }

        select.checkout-input { cursor: pointer; }
        select.checkout-input option { background: var(--ink); color: var(--paper); }

        .field-error {
            display: none;
            font-size: 12px;
            color: var(--paper);
        }

        .field-error.show { display: block; }

        /* Payment method tabs (card demo / PayPal) */
        .pay-tabs {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .pay-tab {
            background: var(--static);
            border: 1px solid var(--fog);
            color: var(--dim);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 10px 18px;
            border-radius: 2px;
            cursor: pointer;
            transition: border-color var(--transition), color var(--transition), background var(--transition);
        }

        .pay-tab:hover { border-color: var(--line); color: var(--paper); }

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

        .pp-buttons { min-height: 55px; margin-top: 4px; }

        .order-total {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 20px 0 0;
            font-size: 13px;
        }

        .order-amount {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            font-size: 28px;
            line-height: 1;
            color: var(--paper);
        }

        .btn-busy {
            pointer-events: none;
            opacity: 0.72;
        }

        .btn-busy::after {
            content: '';
            display: inline-block;
            width: 3ch;
            text-align: left;
            animation: busy-dots 1.2s steps(1, end) infinite;
        }

        @keyframes busy-dots {
            0%   { content: ''; }
            25%  { content: '.'; }
            50%  { content: '..'; }
            75%  { content: '...'; }
        }

        .success-node.pulsing { position: relative; }

        .form-success.wide {
            max-width: none;
            margin: 0;
            align-items: flex-start;
        }

        .form-success.wide .success-node { width: 48px; height: 48px; font-size: 20px; }
        .form-success.wide .success-text strong { font-size: 17px; margin-bottom: 6px; }

        @media (max-width: 600px) {
            .field-grid { grid-template-columns: 1fr; }
            .field.span-2 { grid-column: auto; }
        }

        /* ---------- Footer / Waitlist ---------- */
        footer {
            max-width: 1200px;
            margin: 48px auto calc(96px + env(safe-area-inset-bottom, 0px));
        }

        .footer-panel {
            background-color: var(--ink);
            border: 1px solid var(--fog);
            padding: clamp(96px, 18vw, 160px) clamp(24px, 4vw, 48px) clamp(32px, 4vw, 48px);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: clamp(420px, 70vh, 560px);
            position: relative;
        }

        .waitlist-form {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 12px;
        }

        .waitlist-input {
            background: var(--static);
            border: 1px solid var(--fog);
            padding: 0 24px;
            color: var(--paper);
            width: min(320px, 100%);
            height: 54px;
            font-size: 14px;
            border-radius: 2px;
            font-family: 'IBM Plex Mono', monospace;
            transition: border-color var(--transition);
        }

        /* Field and submit share one size so the pair reads as a single control */
        .waitlist-form .btn {
            height: 54px;
            padding: 0 24px;
        }

        .waitlist-input::placeholder { color: var(--dim); }
        .waitlist-input:hover { border-color: var(--line); }
        .waitlist-input:focus { outline: none; border-color: var(--paper); }
        .waitlist-input[aria-invalid="true"] { border-color: var(--paper); background: rgba(255,255,255,0.12); }

        .form-msg {
            min-height: 22px;
            margin-top: 16px;
            font-size: 13px;
            color: var(--paper);
        }

        .reassure {
            margin-top: 8px;
            font-size: 12px;
            color: var(--dim);
        }

        .form-success {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 20px 28px;
            border: 1px solid var(--paper);
            max-width: 480px;
            margin: 0 auto;
            text-align: left;
        }

        .form-success.show { display: flex; }

        .success-node {
            width: 32px;
            height: 32px;
            border: 1px solid var(--paper);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .success-text { font-size: 13px; line-height: 1.6; }
        .success-text strong { display: block; font-size: 15px; letter-spacing: 0.05em; }
        .success-text em { font-style: normal; color: var(--graphite); }

        .footer-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
            padding: 0 clamp(0px, 3vw, 40px);
            text-align: left;
        }

        .footer-brand-cluster {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .wordmark {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            font-size: 15px;
        }

        .footer-logo {
            height: 36px;
            width: auto;
            display: block;
        }

        .status-line { font-size: 12px; color: var(--dim); }
        .version-line { font-size: 11px; color: var(--dim); letter-spacing: 1px; }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            font-size: 12px;
        }

        .footer-links a {
            color: var(--graphite);
            text-decoration: none;
            transition: color var(--transition);
        }

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

        /* ---------- Launch screen ---------- */
        .splash {
            position: fixed;
            inset: 0;
            background: var(--ink);
            z-index: 2000;
        }

        .splash-inner {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            padding: 44px 24px 56px;
            transform-origin: 50% 0%;
            will-change: transform, opacity;
        }

        .splash-brand {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            letter-spacing: 3px;
            font-size: 16px;
            color: var(--paper);
        }

        .splash-slogan-wrap {
            position: relative;
            max-width: 92vw;
        }

        /* Real Array-font slogan: fluid clamp sizing keeps both lines inside
           the wrap at every viewport width — no canvas, no squashing. The
           soft base glow reads as lit phosphor on the dark sheet. */
        .splash-slogan {
            font-family: 'Array', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.15;
            font-size: clamp(30px, 7.5vw, 76px);
            color: var(--paper);
            text-shadow: 0 0 16px rgba(255, 249, 238, 0.25);
        }

        .slogan-line { display: block; }

        /* Typewriter: chars sit hidden until JS reveals them one by one with
           a natural, slightly irregular cadence. Occasional hitches get a
           quick dim flicker, like a tube sputtering as it writes. */
        .slogan-char {
            display: inline-block;
            opacity: 0;
        }

        .slogan-char.typed {
            opacity: 1;
            text-shadow: 0 0 14px rgba(255, 249, 238, 0.35);
        }

        .slogan-char.flick { animation: slogan-char-flick 0.35s steps(2, end); }

        @keyframes slogan-char-flick {
            0%   { opacity: 1; }
            50%  { opacity: 0.35; }
            100% { opacity: 1; }
        }

        /* Glowing caret riding the typing position; keeps blinking at the
           end of the last line. The reduced-motion rule caps the blink at
           one instant iteration without a fill, so it settles visible. */
        .slogan-caret {
            display: inline-block;
            width: 0.04em;
            height: 0.7em;
            margin-left: 0.06em;
            background: var(--paper);
            box-shadow:
                0 0 12px rgba(255, 249, 238, 0.6),
                0 0 22px rgba(255, 249, 238, 0.25);
            vertical-align: 0.02em;
            animation: caret-blink 1.1s steps(1, end) infinite;
        }

        @keyframes caret-blink {
            0%, 49%  { opacity: 1; }
            50%, 100% { opacity: 0; }
        }

        /* Once everything is typed the caret blinks a beat, then fades */
        .slogan-caret.out { animation: caret-out 0.6s ease forwards; }

        @keyframes caret-out {
            from { opacity: 1; }
            to   { opacity: 0; }
        }

        .splash-cue {
            font-size: 11px;
            letter-spacing: 0.25em;
            color: var(--dim);
            text-transform: uppercase;
        }

        .splash-cue .arrow {
            display: block;
            margin-top: 12px;
            font-size: 16px;
            letter-spacing: 0;
            color: var(--graphite);
        }

        .splash.done { display: none; }

        /* While the intro is alive the underlying page must not scroll */
        html.intro-lock,
        html.intro-lock body {
            overflow: hidden;
        }

        /* ---------- Mobile menu ---------- */
        .nav-burger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            width: 46px;
            height: 46px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 2px;
            cursor: pointer;
        }

        .nav-burger .burger-bar {
            width: 16px;
            height: 2px;
            background: var(--paper);
            transition: transform var(--transition);
        }

        .nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
        .nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

        .mobile-menu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.97);
            border: 1px solid var(--fog);
            border-radius: 2px;
            z-index: 1001;
        }

        .mobile-menu.open { display: block; }

        .mobile-menu a {
            display: block;
            padding: 15px 20px;
            font-family: 'Array', sans-serif;
            font-size: 15px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--graphite);
            text-decoration: none;
            border-top: 1px solid var(--fog);
        }

        .mobile-menu a:first-child { border-top: 0; }
        .mobile-menu a:hover { color: var(--paper); }
        .mobile-menu a.active { color: var(--ink); background: var(--paper); }

        /* While the menu is open the page must not scroll */
        html.menu-open,
        html.menu-open body {
            overflow: hidden;
        }

        /* ---------- Responsive ---------- */
        @media (min-width: 901px) and (max-width: 1100px) {
            nav { gap: 16px; }
            nav a { padding: 12px 12px; }
            .nav-links a, .nav-cta { min-width: 0; }
            .nav-links { padding-left: 12px; }
        }

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

            /* Reset desktop spans: with a single explicit column any span > 1
               would create near-zero implicit tracks and crush the layout */
            .hero-section, .side-stats, .bento-wide, .bento-small, .full-width {
                grid-column: 1 / -1;
            }

            .hero-section { border-right: none; }
            .bento-small { border-left: none; }

            .side-stats { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

            .philosophy-inner {
                display: grid;
                grid-template-columns: 1fr;
                gap: 48px;
            }

            .use-cases-grid { grid-template-columns: 1fr; gap: 48px; }

            /* Vertical pipeline rail — margin keeps node + pulse ring fully
               inside the card instead of straddling its left edge.
               Rail is drawn per-stage so it starts at the first node and
               ends at the last one instead of overhanging the grid box. */
            .pipeline-grid {
                flex-direction: column;
                gap: 0;
                margin-top: 48px;
                margin-left: 24px;
            }

            .pipeline-stage::before {
                content: "";
                position: absolute;
                left: -1px;
                top: 0;
                bottom: 0;
                width: 1px;
                background: var(--fog);
            }

            .pipeline-stage:first-child::before { top: 24px; }   /* node top edge */
            .pipeline-stage:last-child::before {                 /* node bottom edge */
                bottom: auto;
                height: 64px;
            }

            .pipeline-stage {
                flex-direction: row;
                align-items: flex-start;
                gap: 24px;
                padding: 24px 0;
            }

            .pipeline-stage:last-child { padding-bottom: 0; }

            .stage-node {
                position: absolute;
                left: -21px;
                top: 24px;
                margin-bottom: 0;
                z-index: 1;
            }

            .connector { display: none; }

            /* Text starts level with the node box (same top) and keeps clear
               of it horizontally instead of hugging the box edge */
            .stage-info { padding-top: 0; padding-left: 40px; }

            /* Compact single-row footer; pairs wrap together instead of stacking full-width lines */
            .pipeline-footer { gap: 6px 10px; margin-top: 32px; padding-top: 16px; }
            .pipeline-footer .footer-divider { display: none; }
            .pipeline-footer .footer-label { font-size: 10px; }
            .pipeline-footer .footer-val { font-size: 12px; }

            /* Mobile navigation */
            header {
                top: calc(16px + env(safe-area-inset-top, 0px));
                left: 16px;
                right: 16px;
                transform: none;
                max-width: none;
            }

            nav { gap: 10px; }

            .nav-links { display: none; }

            /* Brand left; CTA and burger grouped together on the right.
               Both share the same 46px height; the burger stays square. */
            .nav-burger { display: inline-flex; order: 4; }

            .nav-cta {
                min-width: 0;
                height: 46px;
                padding: 0 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                order: 3;
                margin-left: auto;
            }
        }

        /* Below this width even the compact CTA cannot fit beside the brand;
           the menu carries the waitlist link instead */
        @media (max-width: 380px) {
            .nav-cta { display: none; }
        }

        @media (max-width: 600px) {
            .side-stats { grid-template-columns: 1fr; }

            .waitlist-form { flex-direction: column; align-items: stretch; width: 100%; }
            .waitlist-input,
            .waitlist-form .btn { width: 100%; }

            /* Waitlist footer: centered stack, no orphaned separators */
            .footer-meta { flex-direction: column; align-items: center; padding: 0; gap: 20px; }
            .footer-brand-cluster { flex-direction: column; align-items: center; gap: 10px; }
            .footer-divider { display: none; }
            .footer-links { justify-content: center; gap: 12px 24px; }
        }

        @media (max-width: 360px) {
            .card { padding-left: 16px; padding-right: 16px; }
            .footer-panel { padding-left: 16px; padding-right: 16px; }
            .btn { padding: 12px 16px; }
            .pipeline-grid { margin-left: 8px; }
        }

        @media (max-width: 600px) {
            .splash-inner { padding: 32px 20px 40px; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            /* No fill on the caret blink: after its single instant iteration
               it falls back to the static visible base style */
        }

        /* ============================================================
           RESEARCHES (researches.html + research.html)
           ============================================================ */

        /* Featured block: first on the page, larger than list rows, carries
           the research cover picture (R2 image served from /media/…). */
        .featured-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .featured-head .label { margin-bottom: 0; }

        .featured-flag {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--ink);
            background: var(--paper);
            padding: 5px 12px;
            border: 1px solid var(--paper);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .featured-grid {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: 1px;
            background-color: var(--fog);
            background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper));
            background-position: left top, right top;
            background-size: 10px 1px, 1px 10px;
            background-repeat: no-repeat;
            margin-top: 40px;
        }

        .featured-cover { display: block; position: relative; overflow: hidden; background: var(--static); min-height: 340px; }
        .featured-cover img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            filter: grayscale(100%) contrast(1.05);
            transition: filter var(--transition), transform var(--transition);
        }
        .featured-cover:hover img { filter: none; transform: scale(1.02); }

        .featured-body {
            background: var(--ink);
            padding: 48px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
        .featured-body h2 { margin-bottom: 0; }
        .featured-body p { max-width: 560px; }
        .featured-body .hero-actions { margin-top: auto; }

        /* Featured research without a cover picture: single column,
           all elements centered, no image placeholder box. */
        .research-featured.no-cover .featured-grid { grid-template-columns: 1fr; }
        .research-featured.no-cover .featured-body { align-items: center; text-align: center; }

        /* Archive list rows */
        .research-list { margin-top: 40px; }
        .research-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
            padding: 32px 0;
            border-bottom: 1px solid var(--fog);
            text-decoration: none;
            transition: padding-left var(--transition), background var(--transition);
        }
        .research-row:first-child { border-top: 0; }
        .research-row:hover { padding-left: 16px; }
        .research-row:hover .research-view { border-color: var(--paper); color: var(--paper); }
        .research-row-text { min-width: 0; }
        .research-row-text h3 { margin-bottom: 12px; color: var(--paper); }
        .research-row-text p {
            font-size: 14px;
            color: var(--graphite);
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .research-view { flex-shrink: 0; }

        .research-empty { color: var(--dim); font-size: 14px; padding: 24px 0; text-align: center; }

        @media (max-width: 900px) {
            .featured-grid { grid-template-columns: 1fr; }
            .featured-cover { min-height: 240px; }
        }
        @media (max-width: 600px) {
            .research-row { flex-direction: column; align-items: flex-start; gap: 16px; }
            .featured-body { padding: 32px 24px; }
        }

        /* Detail page (research.html) */
        .research-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 40px; }
        .research-cover { width: 100%; max-height: 480px; object-fit: cover; border: 1px solid var(--fog); margin-bottom: 48px; }

        .research-body { max-width: 760px; }
        .research-body h1, .research-body h2, .research-body h3 {
            font-family: 'Array', sans-serif;
            color: var(--paper);
            letter-spacing: -0.02em;
            line-height: 1.15;
        }
        .research-body h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 40px 0 20px; }
        .research-body h1:first-child { margin-top: 0; }
        .research-body h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 40px 0 16px; }
        .research-body h3 { font-size: clamp(20px, 2.2vw, 24px); margin: 32px 0 12px; }
        .research-body p, .research-body li { font-size: 15px; line-height: 1.7; color: var(--graphite); }
        .research-body p { margin-bottom: 20px; }
        .research-body ul, .research-body ol { margin: 0 0 20px 24px; }
        .research-body li { margin-bottom: 8px; }
        .research-body img {
            display: block;
            max-width: 100%;
            border: 1px solid var(--fog);
            margin: 28px 0;
        }
        .research-body strong { color: var(--paper); font-weight: 500; }
        .research-body a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
        .research-body code {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
            background: var(--static);
            border: 1px solid var(--fog);
            padding: 1px 6px;
            color: var(--paper);
        }
        .research-body pre {
            background: var(--static);
            border: 1px solid var(--fog);
            padding: 20px;
            overflow-x: auto;
            margin: 0 0 20px;
        }
        .research-body pre code { border: 0; padding: 0; background: none; }
        .research-body blockquote {
            border-left: 1px solid var(--fog);
            padding-left: 20px;
            color: var(--dim);
            margin: 0 0 20px;
        }
        .research-body hr { border: 0; border-top: 1px dashed var(--fog); margin: 40px 0; }
        .research-body table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
        .research-body th, .research-body td { border: 1px solid var(--fog); padding: 8px 14px; font-size: 13px; text-align: left; }
        .research-body th { color: var(--paper); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }