/* Firekeep homepage — Signal Desk.
 * The shared palette, reset, navigation primitives, buttons, and copy controls
 * remain in styles.css. This file owns only the product-page composition. */

:root {
    --home-bg: #0B0F0C;
    --home-bg-deep: #080B09;
    --home-surface: #111713;
    --home-surface-2: #161D18;
    --home-line: rgba(230, 235, 228, .11);
    --home-line-strong: rgba(230, 235, 228, .19);
    --home-text: #F2F1EA;
    --home-muted: #A2AAA1;
    --home-dim: #8B958C;
    --paper: #EDE9DF;
    --paper-2: #E4DED1;
    --ink: #151713;
    --ink-muted: #555B53;
    --ember-dark: #A94306;
    --signal: #72D39B;
    --signal-dim: rgba(114, 211, 155, .12);
    --home-radius: 24px;
    --home-shadow: 0 35px 100px rgba(0, 0, 0, .38);
}

html { scroll-padding-top: 86px; }

body.home {
    overflow-x: hidden;
    background: var(--home-bg);
    color: var(--home-text);
}

.home ::selection { background: var(--accent); color: #111; }
.home .wrap { max-width: 1380px; }
.home main { overflow: clip; }
.home h1,
.home h2,
.home h3 { text-wrap: balance; }
.home p { text-wrap: pretty; }
.home em { color: var(--accent); font-style: normal; }

.anchor-alias {
    display: block;
    height: 0;
}

/* Navigation */
.home-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    border-bottom-color: var(--home-line);
    background: linear-gradient(180deg, rgba(8, 11, 9, .95), rgba(8, 11, 9, .74));
    backdrop-filter: blur(18px) saturate(1.15);
}

.home-nav .nav-inner { height: 74px; }
.home-nav .brand span { color: var(--home-text); }
.home-nav .brand img { filter: drop-shadow(0 0 12px rgba(255, 122, 47, .25)); }
.home-nav .nav-links { gap: 26px; }
.home-nav .nav-links a:not(.btn) { color: #AEB6AD; }
.home-nav .nav-links a:not(.btn):hover { color: #FFF; }

.studio-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding: 6px 10px;
    border: 1px solid rgba(114, 211, 155, .19);
    border-radius: 999px;
    color: #B9C3B9;
    background: rgba(114, 211, 155, .055);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.studio-preview-link i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 4px rgba(114, 211, 155, .08), 0 0 12px rgba(114, 211, 155, .45);
}

.home .btn-large { min-height: 52px; padding: 13px 23px; font-size: 15px; }

/* Hero */
.hero {
    position: relative;
    min-height: 930px;
    padding: 152px 0 34px;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 20%, rgba(255, 122, 47, .075), transparent 27%),
        radial-gradient(circle at 73% 67%, rgba(114, 211, 155, .055), transparent 25%),
        var(--home-bg);
}

.hero-atmosphere,
.hero-atmosphere > span { position: absolute; pointer-events: none; }
.hero-atmosphere { z-index: -1; inset: 0; overflow: hidden; }
.hero-glow {
    width: min(980px, 78vw);
    aspect-ratio: 1;
    top: -310px;
    right: -250px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, transparent 0 54%, rgba(255, 122, 47, .09), rgba(114, 211, 155, .045), transparent 79%);
    filter: blur(10px);
    animation: heroGlow 18s linear infinite;
}

.hero-gridlines {
    inset: 0;
    opacity: .38;
    background-image:
        linear-gradient(rgba(238, 242, 235, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(238, 242, 235, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48%, #000 100%);
}

.hero-scanline {
    top: 74px;
    right: 0;
    bottom: 0;
    left: 48%;
    opacity: .22;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .08), transparent);
    background-size: 100% 220px;
    animation: scan 9s linear infinite;
}

@keyframes heroGlow { to { transform: rotate(1turn); } }
@keyframes scan { from { background-position-y: -260px; } to { background-position-y: 960px; } }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr);
    gap: clamp(52px, 7vw, 108px);
    align-items: center;
}

/* min-width:0 keeps a wide child's min-content from raising the grid track
   above the container width, which would push siblings under the overflow clip. */
.hero-copy { position: relative; z-index: 3; min-width: 0; padding: 30px 0 52px; }
.eyebrow,
.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow i {
    width: 8px;
    height: 8px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--home-bg), 0 0 14px rgba(255, 122, 47, .45);
    background: var(--accent);
}

.hero h1 {
    max-width: 10.8ch;
    margin-top: 25px;
    font-size: clamp(58px, 5.8vw, 92px);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.062em;
}

.hero h1 span,
.hero h1 em { display: block; }
.hero h1 em { margin-top: 7px; }

.hero-lede {
    max-width: 57ch;
    margin-top: 31px;
    color: #B5BDB4;
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.65;
}

.hero-thesis {
    margin-top: 17px;
    color: #9BA49B;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .025em;
}
.hero-thesis strong { color: #D9DDD7; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.play-glyph { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--home-line-strong); border-radius: 50%; font-size: 8px; }

.hero-downloads {
    display: grid;
    grid-template-columns: auto minmax(148px, 1fr) minmax(148px, 1fr);
    gap: 8px;
    align-items: stretch;
    max-width: 640px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--home-line);
}
.hero-downloads > p { display: flex; flex-direction: column; justify-content: center; min-width: 108px; padding-right: 5px; }
.hero-downloads > p strong { color: #E8EBE7; font-size: 11px; letter-spacing: -.01em; }
.hero-downloads > p span,
.hero-download-btn small,
.hero-download-btn > b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.hero-downloads > p span { margin-top: 3px; color: var(--home-dim); }
.hero-download-btn { justify-content: space-between; min-height: 54px; padding: 8px 12px 8px 14px; text-align: left; }
.hero-download-btn > span { display: flex; flex-direction: column; gap: 1px; }
.hero-download-btn small { color: var(--home-dim); font-weight: 500; }
.hero-download-btn > b { color: var(--accent); font-weight: 600; }
.hero-download-btn:hover small { color: #B2B9B1; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 11px 22px; margin-top: 20px; color: var(--home-dim); font-size: 12px; list-style: none; }
.hero-facts span { margin-right: 6px; color: var(--signal); }

/* Shared section typography */
.section-intro,
.studio-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    gap: clamp(42px, 8vw, 130px);
    align-items: end;
}
.section-label { margin-bottom: 19px; }
.section-label::before { content: ''; width: 27px; height: 1px; background: currentColor; }
.section-label span { padding: 4px 7px; border-radius: 4px; color: #102116; background: var(--signal); letter-spacing: .08em; }
.section-label-dark { color: var(--ember-dark); }
.home section h2 { font-size: clamp(45px, 5.25vw, 76px); font-weight: 700; line-height: .98; letter-spacing: -.055em; }
.home section h2 em { color: var(--accent); }
.home .continuity h2 em,
.home .architecture h2 em { color: var(--ember-dark); }

.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--accent); font-size: 14px; font-weight: 600; }
.text-link:hover { color: var(--accent-bright); }
.text-link-dark { color: var(--ember-dark); }
.text-link-dark:hover { color: #8D3405; }

/* Continuity / paper chapter */
.continuity {
    position: relative;
    padding: clamp(100px, 9vw, 138px) 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 20%, rgba(195, 78, 11, .07), transparent 24%),
        linear-gradient(90deg, rgba(19, 21, 17, .035) 1px, transparent 1px),
        var(--paper);
    background-size: auto, 80px 100%, auto;
}
.continuity::before { content: 'KEEP THE THREAD'; position: absolute; top: 34px; right: -12px; color: rgba(21, 23, 19, .04); font-size: clamp(80px, 13vw, 190px); font-weight: 700; letter-spacing: -.07em; white-space: nowrap; }
.continuity-intro > p { max-width: 42ch; color: var(--ink-muted); font-size: 18px; line-height: 1.7; }

.truth-note { max-width: 90ch; margin: 21px auto 0; color: #696E66; font-size: 11px; text-align: center; }

/* Studio */
.studio { position: relative; padding: clamp(105px, 9vw, 142px) 0; background: #080C09; }
.studio-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 48% 40%, rgba(255, 122, 47, .075), transparent 31%), radial-gradient(circle at 80% 18%, rgba(114, 211, 155, .055), transparent 20%); }
.studio-ambient::after { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 70px 70px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); }
.studio-copy { position: relative; z-index: 2; }
.studio-lede p { color: var(--home-muted); font-size: 18px; line-height: 1.7; }
.studio-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.studio-downloads .btn { min-height: 48px; }
.studio-downloads .btn > span { font-size: 17px; line-height: 1; }
.studio-lede .studio-download-meta { margin-top: 11px; color: #9AA49B; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.studio-guide-link { display: inline-flex; margin-top: 16px; }

.studio-stage { position: relative; z-index: 2; max-width: 1180px; margin: 76px auto 0; perspective: 1800px; }
.studio-frame { position: relative; overflow: hidden; border: 1px solid rgba(230, 235, 228, .17); border-radius: 22px; background: #0A0E0B; box-shadow: 0 56px 130px rgba(0, 0, 0, .58), 0 0 85px rgba(255, 122, 47, .075); transform: rotateX(2deg); transform-origin: 50% 100%; }
.studio-frame-bar { height: 45px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--home-line); background: #131914; }
.studio-frame-bar > span { display: flex; gap: 6px; }
.studio-frame-bar i { width: 7px; height: 7px; border-radius: 50%; background: #364139; }
.studio-frame-bar i:first-child { background: var(--accent); }
.studio-frame-bar b,
.studio-frame-bar em { color: #9AA49B; font-family: var(--font-mono); font-size: 11px; font-style: normal; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.studio-frame-bar em { justify-self: end; color: var(--signal); }
.studio-frame picture,
.studio-frame img { display: block; width: 100%; }
.studio-frame img { height: auto; opacity: .92; }
.studio-glass { position: absolute; inset: 45px 0 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.025), transparent 28% 72%, rgba(114,211,155,.02)); }
.studio-stage::before { content: ''; position: absolute; right: 6%; bottom: -58px; left: 6%; height: 95px; border-radius: 50%; background: rgba(0, 0, 0, .8); filter: blur(44px); }

.studio-boundary { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 15px; padding: 20px 23px; border: 1px solid rgba(114,211,155,.15); border-radius: 13px; background: var(--signal-dim); }
.studio-boundary b { color: var(--signal); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.studio-boundary p { max-width: 90ch; color: #9AA49B; font-size: 12px; line-height: 1.62; }

/* Architecture / paper chapter */
.architecture { position: relative; padding: clamp(100px, 9vw, 138px) 0; color: var(--ink); background: var(--paper); }
.architecture::before { content: ''; position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(rgba(21,23,19,.18) .6px, transparent .6px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.architecture > .wrap { position: relative; }
.architecture-intro > div:last-child p { max-width: 42ch; color: var(--ink-muted); font-size: 18px; line-height: 1.7; }

.topology { display: grid; grid-template-columns: .9fr 74px 1.06fr 74px 1.16fr; gap: 12px; align-items: stretch; margin-top: 76px; padding: 12px; border: 1px solid rgba(21,23,19,.18); border-radius: 23px; background: rgba(249,247,240,.48); box-shadow: 0 28px 80px rgba(49,41,28,.07); }
.topology-column { padding: 20px; border: 1px solid rgba(21,23,19,.13); border-radius: 15px; background: rgba(255,253,247,.76); }
.topology-keep { color: var(--home-text); border-color: #1F2921; background: var(--home-surface); }
.topology-heading { display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.topology-heading > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(21,23,19,.16); border-radius: 50%; color: var(--ember-dark); font-family: var(--font-mono); font-size: 11px; }
.topology-heading b { font-size: 13px; }
.topology-heading small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.topology-keep .topology-heading > span { border-color: var(--home-line); color: var(--signal); }
.topology-keep .topology-heading small { color: var(--home-dim); }
.client-stack { display: grid; gap: 7px; margin-top: 22px; }
.client-stack > div { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(21,23,19,.09); border-radius: 8px; background: rgba(237,233,223,.48); }
.client-stack i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--ember-dark); background: rgba(195,78,11,.08); font-family: var(--font-mono); font-size: 11px; font-style: normal; }
.client-stack div > span { display: grid; }
.client-stack b { font-size: 12px; }
.client-stack small { color: var(--ink-muted); font-size: 11px; }
.topology-bridge { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.topology-bridge i { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(195,78,11,.18), var(--ember-dark)); }
.topology-bridge i::after { content: ''; position: absolute; top: calc(50% - 4px); right: 2px; width: 6px; height: 6px; border-top: 1px solid var(--ember-dark); border-right: 1px solid var(--ember-dark); transform: rotate(45deg); }
.topology-bridge b { color: var(--ink-muted); font-size: 11px; font-weight: 500; }
.topology-bridge-secure i { background: linear-gradient(90deg, rgba(35,133,84,.18), #238554); }
.topology-bridge-secure i::after { border-color: #238554; }
.gateway-card { margin-top: 22px; padding: 11px; border: 1px solid rgba(21,23,19,.12); border-radius: 10px; background: rgba(237,233,223,.48); }
.gateway-title { display: flex; align-items: center; gap: 10px; padding: 8px 8px 14px; }
.gateway-title > span { display: grid; }
.gateway-title b { font-family: var(--font-mono); font-size: 12px; }
.gateway-title small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.gateway-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px; border-top: 1px solid rgba(21,23,19,.09); font-size: 11px; }
.gateway-row span { font-weight: 600; }
.gateway-row b { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.gateway-studio span { color: var(--ember-dark); }
.keep-plane { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 22px; }
.keep-service { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 7px; align-items: center; min-height: 58px; padding: 9px; border: 1px solid var(--home-line); border-radius: 8px; background: rgba(255,255,255,.02); }
.keep-service > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: var(--accent); background: rgba(255,122,47,.08); font-family: var(--font-mono); font-size: 11px; }
.keep-service p { display: grid; }
.keep-service b { font-size: 12px; }
.keep-service small { color: var(--home-muted); font-size: 11px; }
.service-relay > span,
.service-sentinel > span { color: var(--signal); background: var(--signal-dim); }
.keep-foundation { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 9px; border: 1px solid var(--home-line); border-radius: 8px; background: #0B0F0C; }
.keep-foundation span { padding: 6px 4px; border-radius: 4px; color: var(--home-muted); background: rgba(255,255,255,.025); font-family: var(--font-mono); font-size: 11px; text-align: center; }

/* Final CTA */
.final-cta { position: relative; min-height: 820px; display: grid; place-items: center; overflow: hidden; padding: 130px 0 110px; border-top: 1px solid var(--home-line); text-align: center; background: radial-gradient(circle at 50% 44%, rgba(255,122,47,.105), transparent 29%), #080B09; }
.final-cta::before { content: ''; position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 68%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 68%); }
.final-beacon { position: absolute; top: 93px; left: 50%; width: 158px; height: 158px; display: grid; place-items: center; border: 1px solid rgba(255,122,47,.16); border-radius: 50%; transform: translateX(-50%); }
.final-beacon::before,
.final-beacon::after,
.final-beacon span { content: ''; position: absolute; border: 1px solid rgba(255,122,47,.07); border-radius: 50%; }
.final-beacon::before { inset: -48px; }
.final-beacon::after { inset: -105px; }
.final-beacon span { inset: -170px; }
.final-beacon img { width: 69px; height: 69px; filter: drop-shadow(0 0 20px rgba(255,122,47,.25)); }
.final-inner { position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; padding-top: 150px; }
.final-inner .section-label { justify-content: center; }
.final-cta h2 { font-size: clamp(49px, 6.5vw, 92px); }
.final-inner > p:not(.section-label):not(.license-note) { max-width: 60ch; margin-top: 28px; color: var(--home-muted); font-size: 17px; line-height: 1.7; }

.install-box { width: min(800px, 100%); margin-top: 38px; overflow: hidden; border: 1px solid var(--home-line-strong); border-radius: 16px; background: rgba(13,18,14,.88); box-shadow: 0 28px 80px rgba(0,0,0,.33); text-align: left; }
.install-tabs { display: flex; gap: 5px; padding: 7px; border-bottom: 1px solid var(--home-line); background: rgba(255,255,255,.018); }
.install-tabs button { min-height: 44px; padding: 9px 15px; border: 0; border-radius: 8px; color: var(--home-dim); background: transparent; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.install-tabs button[aria-selected="true"] { color: #121410; background: var(--accent); }
.install-command { min-height: 76px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 13px 14px 13px 20px; }
.js .install-command:not(.is-selected),
.install-command[hidden] { display: none; }
.install-static-label { display: none; }
.install-command code { overflow-x: auto; color: #D5DAD4; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.install-command code b { margin-right: 9px; color: var(--accent); font-weight: 400; }
.install-command .copy { min-height: 42px; border-color: var(--home-line-strong); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.final-cta .license-note { margin-top: 27px; color: var(--home-dim); font-size: 11px; }
.final-cta .license-note a { min-height: 24px; display: inline-flex; align-items: center; color: #C8CEC7; text-decoration: underline; text-underline-offset: 3px; }

/* Footer */
.home-footer { position: relative; z-index: 2; margin: 0; padding: 80px 0 32px; border-top: 1px solid var(--home-line); background: #070A08; }
.footer-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.footer-top > div:first-child > p { margin-top: 13px; color: var(--home-dim); font-size: 13px; }
.footer-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; }
.footer-nav > div { display: grid; align-content: start; gap: 9px; }
.footer-nav b { margin-bottom: 7px; color: #CED4CD; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer-nav a { min-height: 24px; display: inline-flex; align-items: center; color: var(--home-dim); font-size: 12px; }
.footer-nav a:hover { color: var(--home-text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 65px; padding-top: 21px; border-top: 1px solid var(--home-line); color: #A2AAA1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; }

/* Scroll-linked enhancement. The complete state remains visible in browsers
   without view timelines, and motion is fully removed below. */
@supports (animation-timeline: view()) {
    .survival-states article,
    .boundary-rail article,
    .keep-stack li,
    .proof-ledger article {
        animation: sectionRise both linear;
        animation-timeline: view();
        animation-range: entry 4% cover 24%;
    }
    @keyframes sectionRise {
        from { transform: translateY(20px); }
        to { transform: none; }
    }
    .studio-theatre .studio-frame {
        animation: studioSettle both linear;
        animation-timeline: view();
        animation-range: entry 4% cover 34%;
    }
    @keyframes studioSettle {
        from { transform: translateY(42px) scale(.975); }
        to { transform: none; }
    }
}

/* Wide and tablet */
@media (max-width: 1240px) {
    .hero-grid { grid-template-columns: minmax(0,.9fr) minmax(500px,1.1fr); gap: 45px; }
    .hero h1 { font-size: clamp(55px, 6vw, 78px); }
    .hero-downloads { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero-downloads > p { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 0 3px; }
    .hero-downloads > p span { margin-top: 0; }
    .topology { grid-template-columns: .82fr 52px 1fr 52px 1.12fr; }
}

@media (max-width: 1020px) {
    .hero { padding-top: 128px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: 780px; padding-bottom: 8px; }
    .hero h1 { max-width: 11.5ch; font-size: clamp(63px, 9.3vw, 88px); }
    .hero-gridlines { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000); mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000); }
    .section-intro,
    .studio-copy { grid-template-columns: 1fr; gap: 30px; align-items: start; }
    .studio-stage { margin-right: 0; margin-left: 0; }
    .topology { grid-template-columns: 1fr; }
    .topology-bridge { min-height: 63px; }
    .topology-bridge i { position: absolute; top: 7px; bottom: 7px; left: 50%; width: 1px; height: auto; background: linear-gradient(rgba(195,78,11,.18), var(--ember-dark)); }
    .topology-bridge i::after { top: auto; right: -3px; bottom: 0; transform: rotate(135deg); }
    .topology-bridge-secure i { background: linear-gradient(rgba(35,133,84,.18), #238554); }
    .topology-bridge span { position: relative; z-index: 1; padding: 2px 6px; background: var(--paper); }
    .topology-bridge b { position: relative; z-index: 1; padding: 2px 6px; background: var(--paper); }
}

/* Mobile nav remains usable without JavaScript. home.js adds .js and the
   enhanced collapsed menu behavior takes over. */
@media (max-width: 900px) {
    html { scroll-padding-top: 0; }
    .home-nav { position: absolute; }
    .home-nav .nav-inner { min-height: 72px; height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
    .studio-preview-link { margin-right: 0; margin-left: auto; }
    .home .nav-toggle { display: none; }
    .home .nav-links { width: 100%; display: flex; margin: 0; flex-wrap: wrap; gap: 0 18px; padding: 8px 0 4px; border-top: 1px solid var(--home-line); }
    .home .nav-links a:not(.btn) { padding: 8px 0; }
    .home .nav-links .btn { margin-left: auto; }
    .js .home .nav-toggle { display: inline-flex; }
    .js .home .nav-links { display: none; }
    .js .home .nav-links.open { top: 72px; display: flex; padding: 12px var(--gutter) 18px; background: rgba(8,11,9,.98); }
    .js .home .nav-links.open .btn { margin: 12px 0 0; }
    .hero { padding-top: 132px; }
    .studio-frame-bar { grid-template-columns: auto 1fr; }
    .studio-frame-bar b { justify-self: end; }
    .studio-frame-bar em { display: none; }
    .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .home .wrap { padding-right: 20px; padding-left: 20px; }
    .studio-preview-link { display: none; }
    .hero { min-height: 0; padding: 112px 0 24px; }
    .hero h1 { max-width: 100%; font-size: clamp(46px, 14vw, 63px); }
    .hero-lede { font-size: 17px; }
    .hero-actions { display: grid; }
    .hero-actions .btn { width: 100%; }
    .hero-downloads { grid-template-columns: 1fr 1fr; }
    .hero-downloads > p { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 0 3px; }
    .hero-downloads > p span { margin-top: 0; }
    .hero-facts { gap: 8px 14px; }
    .home section h2 { font-size: clamp(41px, 12vw, 56px); }
    .continuity,
    .studio,
    .architecture { padding: 90px 0; }
    .continuity-intro > p,
    .studio-lede p,
    .architecture-intro > div:last-child p { font-size: 16px; }
    .studio-stage { margin-top: 54px; }
    .studio-frame { border-radius: 14px; transform: none; }
    .studio-frame-bar { height: 38px; padding: 0 10px; }
    .studio-frame-bar b { font-size: 11px; }
    .studio-frame picture { aspect-ratio: 1800 / 1450; overflow: hidden; }
    .studio-frame img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .96; transform: none; }
    .studio-boundary { grid-template-columns: 1fr; gap: 8px; }
    .topology { margin-top: 50px; padding: 8px; border-radius: 18px; }
    .topology-column { padding: 17px; }
    .final-cta { min-height: 0; padding: 120px 0 100px; }
    .final-beacon { top: 70px; transform: translateX(-50%) scale(.78); }
    .final-inner { padding-top: 140px; }
    .final-cta h2 { font-size: clamp(43px, 12vw, 58px); }
    .install-command { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
    .install-command code { overflow: visible; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
    .install-command .copy { width: 100%; }
    .final-actions { display: grid; width: 100%; }
    .final-actions .btn { width: 100%; }
    .footer-nav { grid-template-columns: 1fr 1fr; row-gap: 35px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* Below ~409px the two download buttons cannot both fit: their combined
   min-content width (369px) exceeds the gutter-inset column, which floors the
   hero grid track above its container and silently clips the eyebrow and the
   thesis line under `main { overflow: clip }`. Stack them instead. */
@media (max-width: 460px) {
    .hero-downloads { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .keep-foundation { grid-template-columns: 1fr 1fr; }
    .footer-nav { grid-template-columns: 1fr; }
}

/* Without JavaScript, navigation and both install paths remain complete while
   controls that cannot work are removed from the interface. */
html:not(.js) .home .install-tabs,
html:not(.js) .home .copy { display: none; }
html:not(.js) .home .install-command,
html:not(.js) .home .install-command[hidden] { display: grid; grid-template-columns: minmax(0, 1fr); }
html:not(.js) .home .install-command + .install-command { border-top: 1px solid var(--home-line); }
html:not(.js) .home .install-static-label { display: block; color: var(--home-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 900px) {
    html:not(.js) .home-nav { position: relative; }
    html:not(.js) .home-nav .nav-inner { height: auto; min-height: 74px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
    html:not(.js) .home-nav .nav-toggle { display: none; }
    html:not(.js) .home-nav .nav-links { position: static; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 0; padding: 5px 0 0; border-top: 1px solid var(--home-line); background: transparent; }
    html:not(.js) .home-nav .nav-links a { padding: 10px 0; border-bottom: 1px solid var(--home-line); }
    html:not(.js) .home-nav .nav-links .btn { grid-column: 1 / -1; width: 100%; margin: 10px 0 0; }
    html:not(.js) .hero { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-glow,
    .hero-scanline,
    .studio-frame { animation: none !important; transform: none !important; }
}

.motion-paused .hero-glow,
.motion-paused .hero-scanline { animation-play-state: paused !important; }

@media (forced-colors: active) {
    .hero-atmosphere,
    .studio-ambient,
    .final-cta::before { display: none; }
    .studio-frame { background: Canvas; }
}

/* ─── Ember Thread editorial pass ───────────────────────────────────────
 * One continuity artifact, one real product theatre, one system cutaway,
 * and one evidence ledger replace the old catalogue of equal-weight cards.
 */

/* Signature handoff */
.hero {
    min-height: 100svh;
    padding-bottom: 86px;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 122, 47, .11), transparent 26%),
        radial-gradient(circle at 69% 71%, rgba(114, 211, 155, .06), transparent 24%),
        var(--home-bg);
}

.hero-grid {
    grid-template-columns: minmax(0, .88fr) minmax(590px, 1.12fr);
    gap: clamp(54px, 6vw, 96px);
}

.ember-thread {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.ember-thread::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 82%;
    aspect-ratio: 1;
    top: 8%;
    left: 11%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 47, .10), transparent 64%);
    filter: blur(28px);
}

.ember-thread-stage {
    position: relative;
    height: 716px;
    overflow: hidden;
    border-top: 1px solid var(--home-line-strong);
    border-bottom: 1px solid var(--home-line-strong);
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.018) 45%, transparent),
        radial-gradient(circle at 51% 48%, rgba(255, 122, 47, .07), transparent 25%);
    box-shadow: 0 50px 110px -80px rgba(255, 122, 47, .45);
}

.thread-stage-head {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    left: 0;
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 4px;
    border-bottom: 1px solid var(--home-line);
    color: #768078;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.thread-stage-head span { display: inline-flex; align-items: center; gap: 8px; color: #A1ABA2; }
.thread-stage-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(255,122,47,.65); }
.thread-stage-head b { color: var(--signal); font-weight: 400; }

.thread-path {
    position: absolute;
    z-index: 1;
    inset: 49px 0 38px;
    width: 100%;
    height: calc(100% - 87px);
    overflow: visible;
}

.thread-path-ghost,
.thread-path-live { fill: none; vector-effect: non-scaling-stroke; }
.thread-path-ghost { stroke: rgba(230,235,228,.075); stroke-width: 1; stroke-dasharray: 4 9; }
.thread-path-live {
    stroke: url(#ember-route);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: .035 .02;
    stroke-dashoffset: .5;
    animation: threadDraw 2.6s cubic-bezier(.2,.72,.2,1) .3s both;
}

@keyframes threadDraw { to { stroke-dashoffset: 0; } }

.agent-convergence { container-type: inline-size; }

.agent-lanes,
.keep-capabilities { margin: 0; padding: 0; list-style: none; }

.agent-lane,
.gateway-node,
.shared-keep { position: absolute; z-index: 4; }

.agent-lane {
    left: 0;
    width: min(215px, 33%);
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--home-line);
    border-left: 2px solid rgba(255, 122, 47, .65);
    background: rgba(10, 15, 11, .9);
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
    backdrop-filter: blur(14px);
    animation: convergenceEnter .55s cubic-bezier(.2,.76,.2,1) both;
}
.agent-lane-claude { top: 76px; animation-delay: .08s; }
.agent-lane-codex { top: 211px; animation-delay: .16s; }
.agent-lane-kiro { top: 391px; animation-delay: .24s; }
.agent-lane-mcp { top: 526px; animation-delay: .32s; }
.agent-lane p { min-width: 0; display: grid; gap: 2px; }
.agent-lane strong { overflow: hidden; color: #E4E8E2; font-size: 12px; font-size: clamp(12px, 1.7cqi, 14px); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-lane small { overflow: hidden; color: #9DA79E; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.agent-lane-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,122,47,.34);
    color: var(--accent);
    background: rgba(255,122,47,.075);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

.gateway-node {
    top: calc(50% - 58px);
    left: calc(46.4% - 64px);
    width: 128px;
    min-height: 116px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 13px 10px;
    border: 1px solid rgba(255,122,47,.35);
    background: #101511;
    box-shadow: 0 0 0 12px rgba(255,122,47,.025), 0 24px 60px rgba(0,0,0,.34), 0 0 38px rgba(255,122,47,.09);
    text-align: center;
    animation: gatewayLock .7s cubic-bezier(.2,.8,.2,1) .65s both;
}
.gateway-node::before {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px dashed rgba(114,211,155,.2);
    pointer-events: none;
}
.gateway-address {
    padding: 5px 7px;
    border: 1px solid rgba(114,211,155,.25);
    color: var(--signal);
    background: rgba(114,211,155,.06);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
}
.gateway-label { display: grid; gap: 3px; }
.gateway-label strong { color: #EDF0EA; font-size: 13px; }
.gateway-label small { color: #A1AAA2; font-family: var(--font-mono); font-size: 11px; line-height: 1.35; }

.shared-keep {
    top: calc(50% - 111px);
    right: 0;
    width: min(235px, 33%);
    overflow: hidden;
    border: 1px solid rgba(114,211,155,.32);
    border-top: 2px solid var(--signal);
    background: linear-gradient(145deg, rgba(114,211,155,.055), rgba(15,21,16,.98) 42%);
    box-shadow: 0 30px 80px rgba(0,0,0,.44), 0 0 48px rgba(114,211,155,.075);
    animation: keepArrive .7s cubic-bezier(.2,.8,.2,1) 1.05s both;
}
.shared-keep-head { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; padding: 17px 15px 15px; border-bottom: 1px solid var(--home-line); }
.shared-keep-mark { width: 44px; height: 44px; filter: drop-shadow(0 0 14px rgba(255,122,47,.25)); }
.shared-keep-head p { min-width: 0; display: grid; gap: 2px; }
.shared-keep-head strong { color: #F1F2EC; font-size: 14px; line-height: 1.15; }
.shared-keep-head code { color: var(--accent); font-family: var(--font-mono); font-size: clamp(16px, 2.45cqi, 20px); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.shared-keep-head small { color: #A5AEA6; font-family: var(--font-mono); font-size: 11px; letter-spacing: .035em; text-transform: uppercase; }
.keep-capabilities { display: grid; grid-template-columns: 1fr 1fr; }
.keep-capability { min-width: 0; display: grid; gap: 3px; padding: 13px 12px; border-top: 1px solid var(--home-line); }
.keep-capability:nth-child(odd) { border-right: 1px solid var(--home-line); }
.keep-capability:nth-child(-n+2) { border-top: 0; }
.keep-capability b { color: var(--signal); font-family: var(--font-mono); font-size: 11px; letter-spacing: .035em; text-transform: uppercase; }
.keep-capability span { color: #B0B8B0; font-size: 11px; line-height: 1.3; }

.thread-stage-note {
    position: absolute;
    right: 4%;
    bottom: 14px;
    left: 4%;
    color: #9AA49B;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .015em;
    text-align: center;
}

@keyframes convergenceEnter {
    from { transform: translateX(-12px); }
    to { transform: translateX(0); }
}
@keyframes gatewayLock {
    from { transform: scale(.9); }
    to { transform: none; }
}
@keyframes keepArrive {
    from { transform: translateX(14px); }
    to { transform: none; }
}

/* Survival ledger */
.continuity { padding: clamp(100px, 8vw, 122px) 0 clamp(88px, 7vw, 108px); }
.continuity::after { content: ''; position: absolute; top: -72px; left: 67%; width: 1px; height: 145px; background: linear-gradient(transparent, var(--ember-dark), rgba(195,78,11,.10)); }

.survival-states { margin-top: 66px; border-top: 1px solid rgba(21,23,19,.20); }
.survival-states article {
    display: grid;
    grid-template-columns: 64px minmax(175px, .55fr) minmax(260px, 1fr) auto;
    gap: clamp(18px, 4vw, 60px);
    align-items: center;
    padding: 21px 4px;
    border-bottom: 1px solid rgba(21,23,19,.20);
    transition: padding 220ms ease, background 220ms ease;
}
.survival-states article:hover { padding-right: 18px; padding-left: 18px; background: rgba(255,255,255,.28); }
.survival-states article > span { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.survival-states h3 { font-size: clamp(29px, 3vw, 43px); letter-spacing: -.045em; }
.survival-states p { max-width: 52ch; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.survival-states small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-align: right; text-transform: uppercase; }

.daily-closer {
    max-width: 44ch;
    margin: 42px auto 0;
    color: var(--ink);
    font-size: clamp(21px, 2.2vw, 31px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.035em;
    text-align: center;
}

/* Personal knowledge becoming shared organizational memory. */
.knowledge-scale-section {
    position: relative;
    padding: clamp(98px, 8vw, 124px) 0 clamp(112px, 9vw, 144px);
    overflow: hidden;
    border-top: 1px solid rgba(21,23,19,.16);
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 18%, rgba(35,133,84,.08), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 45%),
        var(--paper-2);
}
.knowledge-scale-section::before {
    content: 'KNOWLEDGE COMPOUNDS';
    position: absolute;
    right: -16px;
    bottom: 6px;
    color: rgba(21,23,19,.035);
    font-size: clamp(72px, 11vw, 158px);
    font-weight: 700;
    letter-spacing: -.07em;
    white-space: nowrap;
}
.knowledge-scale-section > .wrap { position: relative; }
.knowledge-scale-intro > p { max-width: 42ch; color: var(--ink-muted); font-size: 18px; line-height: 1.7; }
.home .knowledge-scale-section h2 em { color: var(--ember-dark); }

.knowledge-scale {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 72px;
    border-top: 1px solid rgba(21,23,19,.22);
    border-bottom: 1px solid rgba(21,23,19,.22);
    background: linear-gradient(90deg, rgba(255,122,47,.035), rgba(255,255,255,.18) 50%, rgba(114,211,155,.04));
}
.knowledge-scale::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -2px;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ember-dark), var(--accent) 46%, #238554);
    transform: scaleX(.99);
    transform-origin: left;
}
.knowledge-scale article {
    position: relative;
    min-height: 310px;
    padding: 31px clamp(25px,3.6vw,51px) 38px;
    border-left: 1px solid rgba(21,23,19,.15);
}
.knowledge-scale article:first-child { border-left: 0; }
.knowledge-scale article:last-child {
    color: var(--home-text);
    border-color: #1D271F;
    background: var(--home-surface);
    box-shadow: 0 30px 76px rgba(39,32,21,.16);
    transform: translateY(-13px);
}
.knowledge-scale article > span { color: var(--ember-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.knowledge-scale article:last-child > span { color: var(--signal); }
.knowledge-scale h3 { max-width: 14ch; margin-top: 62px; font-size: clamp(29px,3vw,43px); line-height: 1.02; letter-spacing: -.05em; }
.knowledge-scale p { max-width: 38ch; margin-top: 21px; color: var(--ink-muted); font-size: 13px; line-height: 1.66; }
.knowledge-scale article:last-child p { color: var(--home-muted); }
.knowledge-scale-notes { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,8vw,120px); margin-top: 40px; }
.knowledge-scale-notes p { color: #676C64; font-size: 12px; line-height: 1.65; }
.knowledge-scale-notes strong { color: var(--ink); font-size: 15px; font-weight: 600; }

/* Actual Studio interface as the chapter, not an illustration beside it. */
.studio { padding: clamp(104px, 8vw, 128px) 0 90px; }
.studio-copy { align-items: start; }
.studio-theatre { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(285px, .75fr); gap: clamp(42px, 5vw, 76px); align-items: start; margin-top: 76px; }
.studio-theatre .studio-stage { position: sticky; top: 104px; max-width: none; min-width: 0; margin: 0; perspective: none; }
.studio-theatre .studio-stage::before { bottom: -38px; }
.studio-theatre .studio-frame { border-radius: 17px; transform: none; }
.studio-theatre .studio-frame img { opacity: .98; }
.studio-theatre figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 12px 2px 0; color: #9DA69E; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

.studio-surface { position: relative; }
.studio-focus-target { display: none; }
html.js .studio-theatre.is-enhanced .studio-focus-target {
    position: absolute;
    z-index: 7;
    display: block;
    top: var(--focus-top, 5%);
    left: var(--focus-left, 17%);
    width: var(--focus-width, 19%);
    height: var(--focus-height, 5%);
    box-sizing: border-box;
    border: 1px solid rgba(255,122,47,.86);
    border-radius: 6px;
    background: rgba(255,122,47,.025);
    box-shadow: 0 0 0 1px rgba(5,8,6,.62), 0 0 22px rgba(255,122,47,.22);
    pointer-events: none;
    transition: top 480ms cubic-bezier(.22,.8,.22,1), left 480ms cubic-bezier(.22,.8,.22,1), width 480ms cubic-bezier(.22,.8,.22,1), height 480ms cubic-bezier(.22,.8,.22,1), border-color 240ms ease;
}
html.js .studio-theatre.is-enhanced .studio-focus-target::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(255,122,47,.22);
    border-radius: 9px;
}
html.js .studio-theatre.is-enhanced .studio-focus-target::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(255,122,47,.75);
}
.studio-theatre[data-scene="primary"] { --focus-top: 5%; --focus-left: 16.7%; --focus-width: 19%; --focus-height: 4.7%; }
.studio-theatre[data-scene="review"] { --focus-top: 5.2%; --focus-left: 36.2%; --focus-width: 8.8%; --focus-height: 4%; }
.studio-theatre[data-scene="mission"] { --focus-top: 8.9%; --focus-left: 80.8%; --focus-width: 18.6%; --focus-height: 14.3%; }
.studio-theatre[data-scene="review"] .studio-focus-target { border-color: rgba(114,211,155,.82); box-shadow: 0 0 0 1px rgba(5,8,6,.62), 0 0 22px rgba(114,211,155,.2); }

.studio-beats { margin: 0; padding: 0; list-style: none; }
.studio-beats li { min-height: 48svh; display: flex; flex-direction: column; justify-content: center; padding: 42px 0; border-top: 1px solid var(--home-line); }
.studio-beats li:last-child { border-bottom: 1px solid var(--home-line); }
.studio-beats li > span { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.studio-beats h3 { margin-top: 24px; font-size: clamp(31px, 3vw, 46px); line-height: 1.02; letter-spacing: -.05em; }
.studio-beats p { margin-top: 20px; color: var(--home-muted); font-size: 14px; line-height: 1.7; }
html.js .studio-theatre.is-enhanced .studio-beats li { opacity: 1; }
@media (min-width: 1021px) {
    html.js .studio-theatre.is-enhanced .studio-beats li { transition: transform 260ms ease; }
    html.js .studio-theatre.is-enhanced .studio-beats li.is-active { transform: translateX(6px); }
}

.studio-boundary { margin-top: 20px; border-radius: 0; border-width: 1px 0; background: transparent; }

.studio-onramp { position: relative; z-index: 2; margin-top: 84px; border: 1px solid var(--home-line-strong); border-radius: 7px; background: linear-gradient(145deg, rgba(255,122,47,.055), rgba(17,23,18,.84) 36%, rgba(114,211,155,.035)); box-shadow: 0 28px 70px rgba(0,0,0,.22); }
.studio-onramp::before { content: ''; position: absolute; top: -1px; left: -1px; width: clamp(150px, 23%, 280px); height: 2px; background: linear-gradient(90deg, var(--accent), rgba(255,122,47,0)); }
.studio-onramp-head { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: clamp(34px,7vw,100px); align-items: end; padding: clamp(28px,4vw,48px); border-bottom: 1px solid var(--home-line); }
.studio-onramp-head span,
.studio-onramp li > span,
.studio-command-ribbon > span { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.studio-onramp-head h3 { max-width: 18ch; margin-top: 16px; font-size: clamp(30px,3.4vw,46px); line-height: 1.03; letter-spacing: -.045em; }
.studio-onramp-head > p { color: var(--home-muted); font-size: 14px; line-height: 1.7; }
.studio-onramp > ol { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; }
.studio-onramp li { min-height: 230px; padding: 28px clamp(20px,2.5vw,34px); border-left: 1px solid var(--home-line); transition: background 220ms ease, transform 220ms ease; }
.studio-onramp li:first-child { border-left: 0; }
.studio-onramp li:hover { background: rgba(255,255,255,.025); transform: translateY(-2px); }
.studio-onramp li strong { display: block; margin-top: 44px; color: var(--home-text); font-size: 18px; letter-spacing: -.02em; }
.studio-onramp li p { margin-top: 12px; color: var(--home-muted); font-size: 12px; line-height: 1.65; }
.studio-onramp li code,
.studio-command-ribbon code { border: 1px solid rgba(255,122,47,.25); border-radius: 3px; color: #FFAA75; background: rgba(255,122,47,.055); font-family: var(--font-mono); }
.studio-onramp li code { padding: 2px 5px; font-size: 11px; }
.studio-command-ribbon { min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px clamp(20px,4vw,48px); border-top: 1px solid var(--home-line); }
.studio-command-ribbon > span { margin-right: 5px; color: var(--signal); }
.studio-command-ribbon code { padding: 6px 9px; font-size: 11px; }
.studio-command-ribbon a { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; color: #C6CCC6; font-size: 11px; }
.studio-command-ribbon a:hover { color: var(--accent); }

/* Technical cutaway */
.architecture { padding-bottom: clamp(112px, 9vw, 146px); }
.topology { margin-top: 90px; border-radius: 7px; box-shadow: 0 34px 90px rgba(49,41,28,.09); }
.boundary-rail { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 30px; border-top: 1px solid rgba(21,23,19,.19); border-bottom: 1px solid rgba(21,23,19,.19); }
.boundary-rail article { padding: 25px clamp(18px, 2.4vw, 31px); border-left: 1px solid rgba(21,23,19,.14); }
.boundary-rail article:first-child { border-left: 0; padding-left: 2px; }
.boundary-rail article:last-child { padding-right: 2px; }
.boundary-rail span { color: var(--ember-dark); font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.boundary-rail p { margin-top: 12px; color: var(--ink-muted); font-size: 12px; line-height: 1.62; }
.boundary-rail strong { color: var(--ink); }

.architecture-layers-head { margin-top: clamp(94px, 9vw, 142px); padding-top: clamp(70px, 7vw, 104px); border-top: 1px solid rgba(21,23,19,.19); }
.architecture-layers-head > p { max-width: 42ch; color: var(--ink-muted); font-size: 18px; line-height: 1.7; }

.keep-cutaway { margin-top: 78px; overflow: hidden; border: 1px solid #28312A; border-radius: 8px; color: var(--home-text); background: #0C110D; box-shadow: 0 42px 100px rgba(35,29,19,.18); }
.keep-cutaway-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--home-line); color: #A0A9A1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.keep-cutaway-head span { color: var(--accent); }
.keep-cutaway-head b { font-weight: 400; }
.keep-stack { margin: 0; padding: 0; list-style: none; counter-reset: layer; }
.keep-stack li { position: relative; display: grid; grid-template-columns: 42px minmax(220px,.72fr) minmax(300px,1fr) minmax(160px,.48fr); gap: clamp(18px, 3.5vw, 55px); align-items: center; min-height: 121px; padding: 21px 24px; border-top: 1px solid var(--home-line); transition: background 220ms ease, padding 220ms ease; }
.keep-stack li:first-child { border-top: 0; }
.keep-stack li:hover { padding-right: 34px; padding-left: 34px; background: rgba(255,255,255,.022); }
.keep-stack li > span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--home-line-strong); border-radius: 50%; color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.keep-stack li > div > b { color: var(--signal); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.keep-stack h3 { max-width: 23ch; margin-top: 9px; font-size: clamp(20px, 2vw, 28px); line-height: 1.08; letter-spacing: -.035em; }
.keep-stack li > p { color: var(--home-muted); font-size: 13px; line-height: 1.66; }
.keep-stack li > small { color: #A0A9A1; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.keep-stack li > small a { min-height: 36px; display: inline-flex; align-items: center; margin: -6px -7px; padding: 6px 7px; color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.keep-stack-evidence { background: linear-gradient(90deg, rgba(255,122,47,.055), transparent 65%); }
.keep-stack-evidence::after { content: 'OPEN'; position: absolute; right: 24px; top: 18px; color: rgba(255,122,47,.52); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }

/* The evidence section deliberately breaks the dark/paper cadence. */
.receipts { position: relative; overflow: hidden; padding: clamp(96px, 8vw, 122px) 0; color: #151713; background: var(--accent); }
.receipts::before { content: 'RECEIPTS'; position: absolute; top: -3vw; right: -1vw; color: rgba(21,23,19,.06); font-size: clamp(120px, 24vw, 360px); font-weight: 700; line-height: 1; letter-spacing: -.09em; }
.receipts > .wrap { position: relative; }
.section-label-ink { color: #151713; }
.receipts-head { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(280px,.72fr); gap: clamp(40px, 8vw, 130px); align-items: end; }
.receipts-head .section-label { grid-column: 1 / -1; margin-bottom: 0; }
.receipts h2 { max-width: 12ch; font-size: clamp(54px, 7.6vw, 108px); }
.home .receipts h2 em { color: #151713; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .10em; }
.receipts-head > p { max-width: 40ch; font-size: 18px; line-height: 1.65; }
.proof-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; margin-top: 78px; border-top: 2px solid #151713; border-bottom: 2px solid #151713; }
.proof-ledger article { min-width: 0; padding: 38px clamp(24px, 3vw, 45px) 42px; }
.proof-ledger article:first-child { padding-left: 0; }
.proof-ledger article:last-child { padding-right: 0; }
.proof-ledger article + article { border-left: 1px solid rgba(21,23,19,.45); }
.proof-meta { display: flex; justify-content: space-between; gap: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.proof-meta b { font-weight: 600; }
.proof-ledger article > strong { display: block; margin-top: 46px; font-size: clamp(78px, 8.8vw, 132px); line-height: .72; letter-spacing: -.085em; }
.proof-ledger h3 { margin-top: 30px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1; letter-spacing: -.05em; }
.proof-ledger article > p { max-width: 47ch; margin-top: 18px; font-size: 14px; line-height: 1.62; }
.proof-substats { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(21,23,19,.35); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.proof-substats b { font-size: 12px; }
.proof-card-link { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 7px 0; color: #151713; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.evidence-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 30px; padding-top: 24px; }
.evidence-links a { min-height: 44px; display: inline-flex; align-items: center; color: #151713; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.evidence-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.proof-transparency {
    margin: -20px 0;
    color: var(--home-text);
    background: #151713;
    box-shadow: 0 28px 65px rgba(21,23,19,.2);
}
.proof-ledger .proof-transparency { padding-top: 58px; padding-right: clamp(24px, 3vw, 45px); padding-bottom: 62px; }
.proof-transparency .proof-meta { color: #AEB7AF; }
.proof-transparency .proof-meta b,
.proof-transparency > strong,
.proof-transparency .proof-card-link { color: var(--accent); }
.proof-transparency > p { color: #C3CAC3; }
.proof-transparency .proof-substats { border-color: rgba(230,235,228,.22); }
.proof-transparency .proof-substats b { color: var(--signal); }

.final-cta .commercial-note { max-width: 82ch; margin-top: 26px; color: var(--home-dim); font-size: 11px; line-height: 1.6; }

@media (max-width: 1240px) {
    .hero-grid { grid-template-columns: minmax(0,.82fr) minmax(520px,1.18fr); gap: 42px; }
    .ember-thread-stage { height: 680px; }
    .keep-stack li { grid-template-columns: 40px minmax(190px,.7fr) minmax(260px,1fr); }
    .keep-stack li > small { grid-column: 3; text-align: left; }
}

@media (max-width: 1020px) {
    .hero-grid { grid-template-columns: 1fr; }
    .ember-thread { width: min(820px,100%); margin: 30px auto 0; }
    .ember-thread-stage { height: 700px; }
    .survival-states article { grid-template-columns: 50px minmax(155px,.55fr) 1fr; }
    .survival-states small { grid-column: 3; text-align: left; }
    .knowledge-scale { grid-template-columns: 1fr 1fr; }
    .knowledge-scale article:last-child { grid-column: 1 / -1; min-height: 260px; border-top: 1px solid rgba(21,23,19,.15); border-left: 0; transform: none; }
    .knowledge-scale article:last-child h3 { margin-top: 38px; }
    .studio-theatre { grid-template-columns: 1fr; gap: 60px; }
    .studio-theatre .studio-stage { position: relative; top: auto; }
    html.js .studio-theatre.is-enhanced .studio-focus-target { display: none; }
    .studio-beats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--home-line); }
    .studio-beats li { min-height: 330px; justify-content: flex-start; padding: 38px; border-right: 1px solid var(--home-line); }
    .studio-beats li:nth-child(even) { border-right: 0; }
    .studio-beats li:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
    html.js .studio-theatre.is-enhanced .studio-beats li { opacity: 1; }
    .studio-onramp-head { grid-template-columns: 1fr; gap: 20px; }
    .studio-onramp > ol { grid-template-columns: 1fr 1fr; }
    .studio-onramp li:nth-child(3) { border-top: 1px solid var(--home-line); border-left: 0; }
    .studio-onramp li:nth-child(4) { border-top: 1px solid var(--home-line); }
    .boundary-rail { grid-template-columns: 1fr; }
    .boundary-rail article { border-top: 1px solid rgba(21,23,19,.14); border-left: 0; padding-right: 2px; padding-left: 2px; }
    .boundary-rail article:first-child { border-top: 0; }
    .keep-stack li { grid-template-columns: 40px minmax(200px,.8fr) 1fr; }
    .keep-stack li > small { grid-column: 2 / -1; }
}

@media (max-width: 900px) {
    .hero { padding-top: 132px; }
    .receipts-head { grid-template-columns: 1fr; gap: 30px; }
    .receipts-head .section-label { grid-column: auto; }
    .proof-ledger { grid-template-columns: 1fr; }
    .proof-ledger article { padding-right: 0; }
    .proof-ledger article,
    .proof-ledger article:first-child,
    .proof-ledger article:last-child { padding-right: 0; padding-left: 0; }
    .proof-ledger article + article { border-top: 1px solid rgba(21,23,19,.45); border-left: 0; }
    .proof-ledger .proof-transparency { margin: 0; padding: 42px 24px; }
    .proof-ledger article > strong { font-size: clamp(96px,17vw,150px); }
}

@media (max-width: 640px) {
    .hero { padding-bottom: 56px; }
    .ember-thread { margin-top: 35px; }
    .ember-thread-stage { height: auto; display: grid; gap: 15px; padding: 66px 0 24px; overflow: hidden; }
    .ember-thread-stage::before { content: ''; position: absolute; top: 85px; bottom: 88px; left: 18px; width: 1px; background: linear-gradient(var(--accent), rgba(255,122,47,.28) 52%, var(--signal)); }
    .thread-stage-head { padding: 0; }
    .thread-stage-head b { display: none; }
    .thread-path { display: none; }
    .agent-lanes { position: relative; display: grid; gap: 8px; padding-left: 32px; }
    .agent-lane,
    .gateway-node,
    .shared-keep,
    .thread-stage-note { position: relative; inset: auto; width: auto; max-width: none; animation: none; transform: none; }
    .agent-lane { min-height: 54px; }
    .agent-lane::before { content: ''; position: absolute; top: 50%; left: -19px; width: 18px; height: 1px; background: rgba(255,122,47,.52); }
    .gateway-node { width: calc(100% - 32px); min-height: 92px; margin-left: 32px; grid-template-columns: auto 1fr; padding: 13px; text-align: left; }
    .gateway-node::before { inset: -5px; }
    .gateway-label { text-align: left; }
    .shared-keep { width: calc(100% - 32px); margin-left: 32px; }
    .shared-keep-head code { font-size: 20px; }
    .thread-stage-note { margin-top: 4px; padding: 0 4px; text-align: left; }
    .continuity { padding: 86px 0 78px; }
    .survival-states { margin-top: 54px; }
    .survival-states article { grid-template-columns: 36px 1fr; gap: 12px 15px; padding: 18px 0; }
    .survival-states article:hover { padding-right: 0; padding-left: 0; background: transparent; }
    .survival-states p { font-size: 13px; line-height: 1.52; }
    .survival-states p,
    .survival-states small { grid-column: 2; text-align: left; }
    .daily-closer { margin-top: 35px; text-align: left; }
    .knowledge-scale-section { padding: 82px 0 90px; }
    .knowledge-scale { grid-template-columns: 1fr; margin-top: 52px; }
    .knowledge-scale article,
    .knowledge-scale article:last-child { min-height: 0; padding: 27px 0 31px; border-top: 1px solid rgba(21,23,19,.15); border-left: 0; background: transparent; box-shadow: none; }
    .knowledge-scale article:first-child { border-top: 0; }
    .knowledge-scale article:last-child { color: var(--ink); }
    .knowledge-scale article:last-child > span { color: #176D43; }
    .knowledge-scale article:last-child p { color: var(--ink-muted); }
    .knowledge-scale h3,
    .knowledge-scale article:last-child h3 { margin-top: 25px; font-size: 31px; }
    .knowledge-scale-notes { grid-template-columns: 1fr; gap: 16px; margin-top: 31px; }
    .studio { padding: 88px 0 78px; }
    .studio-downloads { display: grid; }
    .studio-downloads .btn { width: 100%; }
    .studio-theatre { gap: 42px; margin-top: 48px; }
    .studio-theatre .studio-frame picture { aspect-ratio: 1800 / 1450; }
    .studio-beats { grid-template-columns: 1fr; }
    .studio-beats li { min-height: 0; padding: 27px 0; border-right: 0; }
    .studio-beats h3 { margin-top: 18px; font-size: 29px; }
    .studio-beats p { margin-top: 14px; font-size: 13px; line-height: 1.58; }
    .studio-onramp { margin-top: 52px; }
    .studio-onramp-head { padding: 25px 20px; }
    .studio-onramp-head h3 { font-size: 30px; }
    .studio-onramp > ol { grid-template-columns: 1fr; }
    .studio-onramp li { min-height: 0; padding: 24px 20px; border-top: 1px solid var(--home-line); border-left: 0; }
    .studio-onramp li:first-child { border-top: 0; }
    .studio-onramp li strong { margin-top: 24px; }
    .studio-onramp li:hover { transform: none; }
    .studio-command-ribbon { align-items: flex-start; }
    .studio-command-ribbon a { width: 100%; margin: 6px 0 0; }
    .studio-boundary { padding-right: 0; padding-left: 0; }
    .architecture { padding: 82px 0 58px; }
    .topology { margin-top: 40px; border-radius: 7px; }
    .topology-column { padding: 13px; }
    .client-stack { gap: 4px; margin-top: 15px; }
    .client-stack > div { padding: 5px 7px; }
    .gateway-card { margin-top: 15px; }
    .gateway-row { padding: 7px; }
    .keep-plane { margin-top: 15px; }
    .keep-service { min-height: 50px; padding: 7px; }
    .topology-bridge { min-height: 48px; }
    .architecture-layers-head { margin-top: 78px; padding-top: 62px; }
    .keep-cutaway { margin-top: 46px; }
    .keep-cutaway-head { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding-top: 13px; padding-bottom: 13px; }
    .keep-stack li { grid-template-columns: 37px 1fr; gap: 13px; padding: 19px 16px; }
    .keep-stack li:hover { padding-right: 16px; padding-left: 16px; }
    .keep-stack h3 { font-size: 21px; }
    .keep-stack li > p { font-size: 12px; line-height: 1.52; }
    .keep-stack li > p,
    .keep-stack li > small { grid-column: 2; text-align: left; }
    .receipts { padding-top: 78px; padding-bottom: 78px; }
    .receipts-head > p { font-size: 16px; }
    .proof-ledger { margin-top: 50px; }
    .proof-ledger article { padding: 28px 0 34px; }
    .proof-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
    .proof-ledger article > strong { margin-top: 32px; }
    .proof-ledger h3 { margin-top: 24px; }
    .proof-substats { margin-top: 22px; }
    .evidence-links { align-items: flex-start; flex-direction: column; }
    .final-cta { padding-top: 104px; padding-bottom: 82px; }
    .final-inner { padding-top: 118px; }
    .install-box { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .thread-path-live { stroke-dashoffset: 0; animation: none !important; }
    .agent-lane,
    .gateway-node,
    .shared-keep,
    .studio-frame,
    .survival-states article,
    .boundary-rail article,
    .keep-stack li,
    .proof-ledger article { animation: none !important; }
    html.js .studio-theatre.is-enhanced .studio-beats li { opacity: 1 !important; }
    .ember-thread-stage,
    .studio-focus-target,
    .studio-beats li,
    .survival-states article,
    .keep-stack li { transition: none !important; transform: none !important; }
    .studio-onramp li { transition: none !important; transform: none !important; }
}

.motion-paused .thread-path-live,
.motion-paused .agent-lane,
.motion-paused .gateway-node,
.motion-paused .shared-keep,
.motion-paused .studio-frame,
.motion-paused .survival-states article,
.motion-paused .boundary-rail article,
.motion-paused .keep-stack li,
.motion-paused .proof-ledger article { animation-play-state: paused !important; }

@media (forced-colors: active) {
    .thread-path,
    .ember-thread::before,
    .continuity::after,
    .receipts::before { display: none; }
    .agent-lane,
    .gateway-node,
    .shared-keep,
    .keep-cutaway { color: CanvasText; background: Canvas; }
    .receipts { color: CanvasText; background: Canvas; }
}