/* a1 site design system
   Electric-blue identity, editorial display type, and quiet dark work surfaces.
   Mono labels stay reserved for the product UI and small supporting details. */
:root {
  color-scheme: dark;
  --bg: #0a0a0b;
  --surface: #0f0f11;
  --surface-2: #141416;
  --surface-3: #1b1b1f;
  --line: #222226;
  --line-2: #2d2d33;
  --ink: #ededf0;
  --ink-2: #b9b9c1;
  --muted: #80808a;
  --accent: #4a60ff;
  --accent-text: #5a6dff;
  --accent-dim: #4a60ff1f;
  --accent-line: #4a60ff66;
  --blue: #121f9e;
  --display: 'Barlow Condensed', 'Arial Narrow', var(--sans);
  --green: #7ee787;
  --red: #ff7b72;
  --amber: #e3b341;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 0 #ffffff08 inset, 0 24px 60px -24px #000c;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; padding-top: 73px; /* fixed header: 72px bar + 1px border */ color: var(--ink); background: var(--bg); font: 15px/1.6 var(--sans); font-feature-settings: 'cv11', 'ss01', 'calt'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, pre, kbd { font-family: var(--mono); }
code { font-size: .88em; overflow-wrap: anywhere; }
p > code, li > code, dd > code, td > code, .faq-answer code, .start-steps code, .capability-grid code, .why-item code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line); color: var(--ink); font-size: .84em; }
[hidden] { display: none !important; }
::selection { background: #4a60ff66; color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: var(--radius-sm); font-weight: 500; }
.skip-link:focus { top: 12px; }
.desktop-break { display: none; }

/* ---------- Primitives ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #7ee78722; }
.stack-tag { display: inline-flex; align-items: center; height: 22px; padding: 3px 8px 0; border-radius: 4px; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent-text); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stack-tag-neutral { border-color: var(--line-2); background: var(--surface-3); color: var(--ink-2); }
.status { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-right: 10px; border-radius: 4px; font: 500 11px/1 var(--mono); letter-spacing: .04em; vertical-align: 1px; }
.status-yes { color: var(--green); background: #7ee78718; }
kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); font-size: 10px; line-height: 1.4; text-align: center; }
.prompt-glyph { color: var(--accent); font-weight: 500; }
.check { color: var(--green); }
.warn { color: var(--amber); }
.diff-removed { color: var(--red); }
.diff-added { color: var(--green); }

h1 { font-family: var(--display); font-size: clamp(62px, 7.4vw, 106px); font-weight: 400; letter-spacing: -.025em; line-height: .94; text-transform: uppercase; }
h2 { font-family: var(--display); font-size: clamp(40px, 4.5vw, 62px); font-weight: 500; letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lead { color: var(--ink-2); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.body-copy { color: var(--muted); font-size: 15px; line-height: 1.7; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.button:hover { transform: translateY(-2px); }
.button:hover { background: #fff; border-color: #fff; }
.button-secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.button-secondary:hover { background: var(--surface-3); border-color: var(--line-2); }
.button-small { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- Header ---------- */
/* Fixed rather than sticky: iOS Safari garbles a sticky, backdrop-blurred
   header while the page rubber-bands past its end. body reserves its height. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; border-bottom: 1px solid var(--line); background: #0a0a0bcc; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-inner { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: baseline; justify-self: start; }
.brand-mark { font: 600 26px/1 var(--mono); letter-spacing: -.08em; color: var(--ink); }
.site-nav { position: relative; display: flex; align-items: center; align-self: stretch; justify-self: center; gap: 24px; }
.site-nav a { font-size: 14px; color: var(--ink-2); transition: color .15s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.nav-indicator { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); opacity: 0; transform: translateX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1), opacity .2s; pointer-events: none; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.header-link { font-size: 14px; color: var(--ink-2); transition: color .15s; }
.header-link:hover, .header-link[aria-current="page"] { color: var(--ink); }
/* Mobile section menu: the same pinned toggle and overlay list as the docs sidebar (docs/docs.css). */
.section-menu { display: none; }
.section-menu-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font: 14px var(--sans); cursor: pointer; }
.section-menu-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.section-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.section-menu-panel { position: fixed; z-index: 18; top: var(--section-panel-top, 125px); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px var(--section-panel-x, 16px) 40px; border-top: 1px solid var(--line); background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.section-menu-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.section-menu-title { margin-bottom: 8px; font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.section-menu-list { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.section-menu-list a { display: block; margin-left: -1px; padding: 6px 12px; border-left: 1px solid transparent; font-size: 14px; color: var(--ink-2); transition: color .15s, border-color .15s; }
.section-menu-list a:hover { color: var(--ink); }
.section-menu-list a.is-active { border-left-color: var(--accent); color: var(--ink); font-weight: 500; }
.section-menu-external { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.section-menu-external a { display: block; padding: 6px 0; font-size: 14px; color: var(--muted); transition: color .15s; }
.section-menu-external a:hover { color: var(--ink); }
.section-menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 62%, var(--bg) 62%); }
.hero-grid { position: absolute; inset: 0 0 38%; z-index: -1; pointer-events: none; opacity: .22; background-size: 96px 96px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.22' filter='url(%23n)' d='M0 0h96v96H0z'/%3E%3C/svg%3E"); animation: film-grain .7s steps(1) infinite; }
@keyframes film-grain { 0% { background-position: 0 0; } 12% { background-position: -31px 17px; } 25% { background-position: 43px -29px; } 37% { background-position: -17px -41px; } 50% { background-position: 29px 37px; } 62% { background-position: -47px 5px; } 75% { background-position: 11px -23px; } 87% { background-position: -37px 31px; } 100% { background-position: 0 0; } }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 16px 16px calc(38% + 16px); border: 1px solid #ffffff26; pointer-events: none; }
/* At minimum, the gap inside the outline matches the 16px outside it (16 + 1px border + 16); wide screens keep the centered 1120px width. */
@media (min-width: 601px) { .hero .container { width: min(1120px, calc(100% - 66px)); } }
.hero-intro { display: grid; grid-template-columns: 1.12fr 1fr; gap: 36px; align-items: center; padding-block: 96px 40px; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.hero-copy h1 { margin-top: 0; font-size: clamp(52px, 5.4vw, 80px); }
.hero-copy h1 > span { display: block; }
.hero-copy, .product-stage { transition: opacity .3s ease; }
.fonts-pending .hero-copy, .fonts-pending .product-stage { opacity: 0; animation-play-state: paused; }
.hero-title-accent { color: #c3ccff; }
.hero-description { max-width: 490px; margin-top: 22px; color: #e0e5ff; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: max-content; margin-top: 26px; }
.hero-actions .button { background: #fff; border-color: #fff; color: var(--blue); }
.hero-actions .button:hover { background: #e0e5ff; border-color: #e0e5ff; }
.hero-actions .button-secondary { background: #ffffff0d; border-color: #ffffff66; color: #fff; }
.hero-actions .button-secondary:hover { background: #ffffff26; }
.hero-art { min-width: 0; }
.ascii-field { position: relative; width: 100%; aspect-ratio: 5 / 4; max-height: 440px; margin-inline: auto; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 58%, transparent 84%); mask-image: radial-gradient(ellipse at 50% 50%, #000 58%, transparent 84%); }
.ascii-field canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ascii-field-section { --ascii-rgb: 166, 181, 255; aspect-ratio: auto; max-height: none; }
.ascii-field-section { position: absolute; left: 50%; top: 215px; width: 125%; height: 470px; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.start-side, .stack-side { position: relative; min-width: 0; min-height: 600px; }
.start-side .install-panel, .stack-side .stack-diagram { position: relative; z-index: 1; }
.stack-side { min-height: 690px; }
.stack-side .ascii-field-section { top: 300px; }
.product-stage { position: relative; padding-bottom: 80px; }
.hero :focus-visible { outline-color: #fff; }
.hero .terminal :focus-visible { outline-color: var(--accent); }

/* ---------- Terminal ---------- */
.terminal { position: relative; max-width: 928px; margin-inline: auto; border: 1px solid #4a60ff66; border-radius: var(--radius); background: #0c0c0e; color: var(--ink-2); overflow: hidden; box-shadow: var(--shadow); font: 13px/1.45 var(--mono); text-align: left; }
.terminal-titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 34px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.terminal-title { color: var(--ink-2); }
.window-dots { display: flex; gap: 6px; }
.window-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
#replay-demo { justify-self: end; margin-right: -11px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; transition: color .15s, border-color .15s, background .15s; }
#replay-demo:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-3); }
.terminal-body { --term-pad: 16px; padding: 12px var(--term-pad) 8px; }
.terminal-note { max-width: 860px; margin: 20px auto 0; text-align: center; font-size: 13px; line-height: 1.7; color: var(--muted); }
/* A fixed window onto the session that fills from the top, then keeps to its
   latest lines (script.js scrolls it). As in a1, each turn's prompt pins to the
   top while its turn scrolls under it, until the next turn pushes it away. */
.demo-panel { position: relative; height: 322px; margin-inline: calc(-1 * var(--term-pad)); padding-inline: var(--term-pad); overflow: hidden; }
.demo-line { margin-bottom: 8px; }
/* Full-width prompt rows tinted with the accent; once pinned (script.js) a solid gap keeps scrolling text off them. */
.tui-prompt { position: sticky; top: 0; z-index: 1; display: flex; gap: 10px; margin-inline: calc(-1 * var(--term-pad)); padding: 3px var(--term-pad); background: #14162b; color: var(--ink); }
.tui-prompt .prompt-glyph { color: var(--accent-text); }
.tui-prompt .tui-time { color: var(--muted); }
.tui-prompt.is-pinned { box-shadow: 0 8px 0 #0c0c0e; }
.tui-prompt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tui-time { flex-shrink: 0; }
.tui-thought { color: var(--ink-2); font-style: italic; }
.tui-tool { padding: 6px 12px; border-radius: var(--radius-sm); background: #7ee7870f; }
.tui-cmd { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.tui-meta { color: var(--muted); font-weight: 400; }
.tui-out { margin: 4px 0 0; font: inherit; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tui-took { margin-top: 4px; color: var(--muted); }
.tui-response { color: var(--ink); max-width: 72ch; overflow-wrap: anywhere; }
.tui-nowrap { white-space: nowrap; }
.terminal-editor { display: flex; align-items: center; gap: 10px; margin-top: 0; padding: 6px 0; border-block: 2px solid var(--line-2); color: var(--ink-2); }
.tui-input { display: flex; align-items: center; min-width: 0; }
.tui-editor-text { color: var(--ink); overflow-wrap: anywhere; }
/* The working row is always reserved so the terminal keeps its height. */
.terminal-working { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--muted); visibility: hidden; }
.terminal-working.is-on { visibility: visible; }
.tui-spinner { color: var(--accent); }
.tui-shimmer { color: var(--ink); }
.tui-cursor { display: inline-block; width: .55em; height: 1.2em; background: var(--ink); animation: tui-blink 1.1s steps(2, start) infinite; }
@keyframes tui-blink { to { visibility: hidden; } }
.terminal-status { display: flex; flex-direction: column; gap: 0; padding-top: 4px; color: var(--muted); }
.status-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.status-divider { color: var(--line-2); }
.status-level { color: var(--accent-text); }
/* Replay reveals pending pieces one by one at the bottom of the window. */
.demo-panel.is-replaying .is-pending { display: none; }
.demo-panel.is-replaying .demo-line { animation: demo-line-in .4s both; }
@keyframes demo-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Sections ---------- */
/* Nav jumps land every section with the same 48px gap below the header as
   Vision, whatever its own top padding */
.section { --section-pad: 112px; position: relative; overflow-x: clip; padding-block: var(--section-pad); scroll-margin-top: calc(48px - var(--section-pad)); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
#vision { padding-top: 48px; scroll-margin-top: 0; }
#architecture { background: radial-gradient(ellipse at 85% 50%, #121f9e1a, transparent 65%), var(--surface); }
#installation { border-top: 1px solid var(--line); }
.section-alt + .section-alt { border-top: 0; }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 720px; margin-bottom: 56px; }
.section-head-center { align-items: center; text-align: center; margin-inline: auto; }
.section-head .lead { max-width: 640px; }

/* Vision */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.feature-card:hover { border-color: var(--accent-line); transform: translateY(-4px); box-shadow: 0 16px 40px #0003; }
.feature-visual { height: 232px; padding: 22px 22px 0; background: radial-gradient(ellipse at 50% 0%, #4a60ff24, transparent 80%), var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }
.mini-ui { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: #0c0c0e; font: 11.5px/1.5 var(--mono); color: var(--ink-2); overflow: hidden; }
.mini-ui-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.mini-ui-keys { display: flex; gap: 4px; }
.mini-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-left: 2px solid transparent; border-bottom: 1px solid #ffffff06; }
.mini-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-tag { margin-left: auto; flex-shrink: 0; color: var(--muted); font-size: 10.5px; }
.mini-row.is-active { background: var(--accent-dim); border-left-color: var(--accent); color: var(--ink); }
/* Fixed-width age column so the separators line up */
.mini-when { display: inline-block; width: 3ch; }
.mini-row.is-active .mini-tag { color: var(--accent-text); }
.mini-ui-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.mini-ui-input.is-pinned { margin-top: auto; background: var(--surface-2); color: var(--ink); }
.mini-caret { display: inline-block; width: 1px; height: 12px; margin-left: 1px; background: var(--accent); vertical-align: -2px; }
/* The illustrations come alive only while their card is live: hovered with a
   mouse, or scrolled into view on touch screens (script.js sets .is-live) */
.feature-card.is-live .mini-caret { animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.mini-ui-stream { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 22px 14px 12px; }
.mini-skel { height: 7px; width: var(--w); border-radius: 3px; background: var(--line-2); }
.mini-skel-code { background: #4a60ff2e; }
/* Placeholder text inside a row: the bar takes its width from the row */
.mini-row .mini-skel, .mini-ui-input .mini-skel { flex: 0 1 auto; min-width: 0; }
.mini-row.is-active .mini-skel { background: var(--muted); }
/* Prompt history: older entries fade toward the top; the highlighted one is
   recalled into the editor below (script.js walks it up and back down while live,
   flashing the arrow key for each step) */
.mini-history .mini-row { padding-block: 6px; }
.mini-history .mini-row:nth-child(1) { opacity: 0.45; }
.mini-history .mini-row:nth-child(2) { opacity: 0.7; }
.mini-skel-recalled { background: var(--ink-2); }
/* A suggestion waits as grey ghost text after the caret. While live script.js
   runs the loop: Tab accepts it (white, caret to its end), Enter sends it into
   the transcript, the agent streams a reply, and a new suggestion appears. */
.mini-chat { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; }
.mini-chat > * { flex-shrink: 0; animation: chat-in 0.25s both; }
@keyframes chat-in { from { opacity: 0; transform: translateY(3px); } }
.mini-chat-prompt { display: flex; align-items: center; gap: 8px; margin-block: 2px; }
.mini-chat-prompt .mini-skel { flex: 0 1 auto; background: #b9b9c18c; }
.mini-skel-suggested { background: #80808a59; transition: background 0.2s; }
.mini-suggest.is-accepted .mini-skel-suggested { background: var(--ink-2); }
.mini-suggest.is-empty .mini-skel-suggested { visibility: hidden; }
.mini-sg-caret { display: inline-flex; width: 1px; margin-inline: -4px; }
.mini-sg-caret .mini-caret { flex-shrink: 0; margin-left: 0; }
.mini-sg-caret.is-before { margin-inline: -2px -6px; }
.mini-sg-caret.is-after, .mini-suggest.is-accepted .is-before { opacity: 0; }
.mini-suggest.is-accepted .is-after { opacity: 1; }
.mini-suggest .mini-tag { display: flex; gap: 4px; }
.mini-ui kbd { transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.mini-ui kbd.is-pressed { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); transform: translateY(1px); }
.mini-scrollbar { position: absolute; right: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--line); }
.mini-scrollbar i { position: absolute; left: 0; right: 0; top: 38%; height: 32%; border-radius: 2px; background: var(--muted); }
/* Long response: the window clips a taller body (four lines sit above it).
   While live it scrolls in quick flicks with pauses, up and back, then down and
   back, like someone scrolling, while the thumb tracks it */
.mini-ui-scroll .mini-ui-stream { flex: 1; min-height: 0; padding-top: 0; overflow: hidden; }
.mini-scroll-content { display: flex; flex-direction: column; gap: 8px; margin-top: -52px; }
@media (prefers-reduced-motion: no-preference) {
  .feature-card.is-live .mini-scroll-content { animation: scroll-body 5.6s infinite; }
  .feature-card.is-live .mini-scrollbar i { animation: scroll-thumb 5.6s infinite; }
}
@keyframes scroll-body {
  0%, 6% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  11%, 24% { transform: translateY(45px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  29%, 40% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  45%, 58% { transform: translateY(-30px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  63%, 76% { transform: translateY(-60px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  82%, 100% { transform: none; }
}
@keyframes scroll-thumb {
  0%, 6% { top: 38%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  11%, 24% { top: 14%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  29%, 40% { top: 38%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  45%, 58% { top: 53%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  63%, 76% { top: 68%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  82%, 100% { top: 38%; }
}
.card-copy { padding: 22px 24px 26px; }
.card-copy h3 { margin-bottom: 8px; }
.card-copy p { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.capability-grid li { display: flex; gap: 14px; padding: 22px 24px; background: var(--bg); }
.capability-grid svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.capability-grid h3 { font-size: 14px; margin-bottom: 5px; }
.capability-grid p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Architecture */
.foundation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; align-items: start; }
.foundation-copy h2 { margin-top: 18px; }
.foundation-copy .lead { margin-top: 18px; }
.foundation-copy .body-copy { margin-top: 14px; }
.foundation-details { margin-top: 32px; border-top: 1px solid var(--line); }
.foundation-details > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.foundation-details dt { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); padding-top: 2px; }
.foundation-details dd { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.stack-diagram { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #0a0a0ba8; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.stack-layer { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow); }
.stack-pi { background: var(--surface-3); }
.stack-pi .stack-tag { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); }
.stack-body h3 { font-size: 16px; }
.stack-body p { margin-top: 4px; font: 12px/1.5 var(--mono); color: var(--muted); }
.stack-bus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-items: center; height: 34px; }
.stack-bus span { position: relative; width: 1px; background: var(--line-2); overflow: hidden; }
.stack-bus span::after { content: ''; position: absolute; left: 0; top: -12px; width: 1px; height: 12px; background: linear-gradient(transparent, var(--accent)); animation: bus-pulse 2.4s linear infinite; }
.stack-bus span:nth-child(2)::after { animation-delay: .8s; }
.stack-bus span:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes bus-pulse { to { top: 100%; } }
.stack-ecosystem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stack-ecosystem li { padding: 10px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; font: 12px var(--mono); color: var(--ink-2); }
.stack-diagram figcaption { margin-top: 20px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* For pi users + comparison */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.why-item { padding: 24px 24px 24px 0; border-top: 1px solid var(--line); background: transparent; }
.why-item h3 { margin: 16px 0 8px; }
.why-item p { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.comparison-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: auto; scrollbar-width: thin; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; text-align: left; }
.comparison-table th, .comparison-table td { padding: 14px 22px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.comparison-table thead th { padding-block: 22px; font-weight: 400; vertical-align: bottom; }
.comparison-table thead th:first-child { width: 28%; }
.comparison-table tr > :first-child { background: #4a60ff08; border-right: 1px solid var(--line); }
.column-title { display: block; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.column-description { display: block; margin-top: 4px; font: 12px var(--mono); color: var(--muted); }
.comparison-table tbody th { font-weight: 400; color: var(--ink-2); }
.comparison-table tbody td { color: var(--ink-2); }
.comparison-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.comparison-footnote { max-width: 860px; margin: 20px auto 0; text-align: center; font-size: 13px; line-height: 1.7; color: var(--muted); }
.comparison-footnote a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Roadmap */
.roadmap { position: relative; max-width: 640px; margin: 0 auto; }
.roadmap::before { content: ''; position: absolute; left: 39px; top: 24px; bottom: 24px; width: 1px; background: var(--line-2); }
.roadmap-item { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 14px 0; }
.roadmap-version { position: relative; z-index: 1; justify-self: center; width: 72px; padding: 3px 0; text-align: center; border: 1px solid var(--accent-line); border-radius: 4px; background: var(--surface-2); color: var(--accent-text); font: 500 12px/1.4 var(--mono); letter-spacing: .04em; }
.roadmap-current { display: none; align-items: center; justify-content: center; width: 72px; height: 22px; margin-left: 10px; padding: 3px 0 0; border: 1px solid #7ee78766; border-radius: 4px; background: #7ee7871f; color: var(--green); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.roadmap-item.is-current .roadmap-current { display: inline-flex; }
.roadmap-item h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.roadmap-item p { margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.roadmap-controls { display: none; }
@media (min-width: 1025px) {
  .roadmap-controls:not([hidden]) { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 20px; }
  .roadmap-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); transition: background .15s, color .15s, opacity .15s; }
  .roadmap-arrow:hover:not(:disabled) { background: var(--line-2); color: var(--ink); }
  .roadmap-arrow:disabled { opacity: .35; cursor: default; }
  .roadmap { display: flex; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
  .roadmap::-webkit-scrollbar { display: none; }
  .roadmap { cursor: grab; }
  .roadmap.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent); }
  .roadmap.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 120px); mask-image: linear-gradient(to right, transparent, #000 120px); }
  .roadmap.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent); }
  .roadmap.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .roadmap::before { display: none; }
  .roadmap-item { display: block; flex: 0 0 272px; padding: 30px 40px 0 0; scroll-snap-align: start; }
  .roadmap-item::before { content: ''; position: absolute; left: 0; right: 0; top: 43px; height: 1px; background: var(--line-2); }
  .roadmap-item:last-child::before { right: auto; width: 0; }
  .roadmap-version { display: inline-block; }
  .roadmap-item > div { margin-top: 20px; }
  .roadmap-item h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .roadmap-item.is-current .roadmap-current { position: absolute; top: 0; left: 0; margin: 0; }
}
.roadmap-animate .roadmap-item { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.roadmap-animate.is-revealed .roadmap-item { opacity: 1; transform: none; }
.roadmap-animate::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.roadmap-animate.is-revealed::before { transform: none; }
@media (min-width: 1025px) {
  .roadmap-animate .roadmap-item::before { transform: scaleX(0); transform-origin: left; transition: transform .5s ease; transition-delay: calc(var(--i) * 70ms + 150ms); }
  .roadmap-animate.is-revealed .roadmap-item::before { transform: none; }
}
.roadmap-note { margin-top: 40px; text-align: center; font-size: 13px; color: var(--muted); }
.roadmap-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Install */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.start-copy h2 { margin-top: 18px; }
.start-copy .lead { margin-top: 18px; }
.start-steps { margin-top: 28px; border-top: 1px solid var(--line); }
.start-steps li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.step-index { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 8px; border: 1px solid var(--accent-line); border-radius: 4px; background: var(--accent-dim); color: var(--accent-text); font: 500 11px/1 var(--mono); letter-spacing: .08em; }
.start-steps strong { display: block; font-size: 15px; font-weight: 600; }
.start-steps p { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.install-panel { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: #0c0c0ea8; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; box-shadow: var(--shadow); }
.install-titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; padding: 0 16px; background: #141416b3; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--ink-2); }
.install-source { justify-self: end; color: var(--muted); }
.install-body { padding: 20px; }
.copy-command { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font: 14px var(--mono); }
.copy-command code { color: var(--ink); font-size: inherit; }
.copy-command button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); transition: background .15s, color .15s; }
.copy-command button:hover { background: var(--line-2); color: var(--ink); }
.copy-command::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, #4a60ff33, transparent); opacity: 0; transform: translateX(-100%); }
.copy-command.is-copied::before { animation: copy-flash .9s ease-out; }
@keyframes copy-flash { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 1; } }
.copy-status { min-height: 20px; margin-top: 8px; font: 12px var(--mono); color: var(--accent-text); }
.install-after { margin-top: 12px; font: 13px/1.8 var(--mono); color: var(--muted); }
.install-after p { display: flex; gap: 12px; padding-left: 14px; }
.install-after code { padding: 0; border: 0; background: none; color: var(--ink-2); font-size: inherit; }
.install-comment { color: var(--muted); }
.install-meta { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.install-meta > div { display: flex; gap: 12px; align-items: baseline; }
.install-meta dt { flex-shrink: 0; width: 92px; font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.install-meta dd { font: 12.5px/1.6 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.install-meta dd code { font-size: inherit; }
.install-meta a { text-decoration: underline; text-underline-offset: 3px; }
.install-meta a:hover { color: var(--ink); }

/* FAQ */
.faq-inner { max-width: 860px; }
.faq-inner .section-head { margin-bottom: 8px; }
.faq-tools { position: sticky; top: 72px; z-index: 2; display: flex; justify-content: flex-end; background: var(--surface); }
#faq-toggle-all { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 2px; border: 0; background: transparent; font: 12px var(--mono); color: var(--muted); }
#faq-toggle-all:hover { color: var(--ink); }
#faq-toggle-all > span:last-child { font-size: 18px; line-height: 1; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent-text); }
.faq-list summary > span { flex-shrink: 0; font-size: 20px; font-weight: 300; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-answer { max-width: 760px; padding: 0 40px 22px 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.faq-answer p + p, .faq-answer pre + p { margin-top: 12px; }
.faq-answer a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.faq-answer pre { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-size: 12.5px; overflow-x: auto; }

/* Footer */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid #ffffff26; background: var(--blue); padding-bottom: 96px; }
.footer-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; aspect-ratio: auto; max-height: none; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.site-footer nav { color: #e0e5ff; }
.footer-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 36px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Sponsor pin ---------- */
.sponsor-pin { position: fixed; right: 33px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 16px; border: 1px solid #ffffff1f; border-radius: 999px; background: #0c0c0ecc; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 32px -12px #000c; color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: border-color .15s, background .15s, transform .15s; }
.sponsor-pin-icon { display: inline-flex; }
.sponsor-pin > span { transform: translateY(1px); }
.sponsor-pin-icon svg { width: 15px; height: 15px; fill: none; stroke: #db61a2; stroke-width: 1.5; stroke-linejoin: round; transition: fill .15s; }
.sponsor-pin:hover { transform: translateY(-2px); border-color: #db61a266; background: #141416e6; }
.sponsor-pin:hover .sponsor-pin-icon svg { fill: #db61a2; }
@property --sponsor-glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sponsor-pin::before { content: ''; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--sponsor-glow-angle), transparent 0 45%, #db61a233 62%, #db61a2 88%, #f5a3cf 100%); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; animation: sponsor-glow 7s linear 2.4s infinite; }
@keyframes sponsor-glow { 0% { --sponsor-glow-angle: 0deg; opacity: 0; } 4%, 26% { opacity: 1; } 32%, 100% { --sponsor-glow-angle: 400deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sponsor-pin::before { animation: none; } }
@media (max-width: 600px) { .sponsor-pin { right: 16px; bottom: 16px; } }
@media (forced-colors: active) { .sponsor-pin { border-color: ButtonText; } .sponsor-pin-icon svg { stroke: ButtonText; } }

/* ---------- Motion ---------- */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .product-stage { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}

/* ---------- Responsive ---------- */
@media (min-width: 801px) { .desktop-break { display: inline; } }
@media (max-width: 1024px) {
  .section { --section-pad: 88px; }
  .foundation-grid { grid-template-columns: 1fr; gap: 48px; }
  .stack-side { max-width: 640px; }
  .start-grid { grid-template-columns: 1fr; gap: 40px; }
  .start-side { max-width: 640px; }
  .start-side .ascii-field-section, .stack-side .ascii-field-section { left: 85%; }
  .feature-grid, .why-grid { gap: 16px; }
}
@media (max-width: 800px) {
  .header-actions { gap: 18px; }
  /* Section links move into a toggle pinned under the header, as on the docs: 12px + 44px + 12px. */
  .header-inner { grid-template-columns: auto 1fr; }
  .site-nav { display: none; }
  html.js { scroll-padding-top: 140px; }
  .js body { padding-top: 141px; }
  .js .faq-tools { top: 140px; }
  .js .section-menu { display: block; position: fixed; z-index: 19; top: 73px; left: 0; right: 0; padding: 12px 24px; background: var(--bg); }
  .hero-intro { grid-template-columns: 1.25fr .75fr; gap: 20px; padding-block: 56px 48px; }
  .hero-copy h1 { font-size: clamp(54px, 8vw, 66px); }
  .hero-art { transform: none; }
  .hero-description { font-size: 16px; }
  .product-stage { padding-bottom: 72px; }
  .terminal { font-size: 12px; }
  .terminal-titlebar { padding-inline: 20px; }
  .terminal-body { --term-pad: 20px; padding: 20px var(--term-pad) 12px; }
  .section { --section-pad: 72px; }
  .section-head { margin-bottom: 40px; }
  .lead { font-size: 17px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-visual { height: 100%; min-height: 232px; border-bottom: 0; border-right: 1px solid var(--line); }
  .capability-grid, .why-grid, .stack-ecosystem, .stack-bus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-bus span:nth-child(3) { display: none; }
  .comparison-table th, .comparison-table td { padding-inline: 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 56px; }
  html.js { scroll-padding-top: 124px; }
  .faq-tools { top: 56px; }
  .js .faq-tools { top: 124px; }
  .start-side .ascii-field-section, .stack-side .ascii-field-section { left: 50%; }
  /* Install panel sits right under the intro, so it is in view as soon as the section is. */
  .start-grid { gap: 0; }
  .start-copy { display: contents; }
  .start-side { order: 1; min-height: 660px; margin-top: 28px; }
  .start-steps { order: 2; border-top: 0; }
  .start-steps li:last-child { border-bottom: 0; }
  .container { width: calc(100% - 32px); }
  .header-inner { height: 56px; gap: 12px; }
  body { padding-top: 57px; }
  .js body { padding-top: 125px; }
  .js .section-menu { top: 57px; padding-inline: 16px; }
  .hero-intro { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 32px; }
  .hero::before { inset: 16px 16px calc(38% + 16px); }
  .hero-intro.container { width: calc(100% - 66px); }
  .hero-copy h1 { font-size: clamp(48px, 12vw, 64px); }
  .hero-art { width: min(76%, 320px); margin-inline: auto; }
  .hero-description { font-size: 16px; margin-top: 18px; }
  .hero-actions { flex-wrap: wrap; width: 100%; margin-top: 26px; }
  .hero-actions .button { flex: 1; padding-inline: 16px; }
  .product-stage { padding-bottom: 56px; }
  .terminal { border-radius: var(--radius); font-size: 11px; }
  .terminal-titlebar { padding-inline: 14px; }
  .terminal-body { --term-pad: 14px; padding: 16px var(--term-pad) 10px; }
  .demo-panel { height: 276px; }
  .section { --section-pad: 64px; }
  .section-head { gap: 14px; margin-bottom: 32px; }
  .lead { font-size: 16px; }
  .feature-card { display: flex; }
  .feature-visual { height: 220px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .card-copy { padding: 20px 20px 22px; }
  .capability-grid, .why-grid { grid-template-columns: 1fr; }
  .capability-grid li { padding: 18px 20px; }
  .foundation-details > div { grid-template-columns: 1fr; gap: 6px; }
  .stack-diagram { padding: 20px 16px; }
  .stack-layer { gap: 12px; padding: 14px 14px; flex-wrap: wrap; }
  .stack-ecosystem, .stack-bus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-table { font-size: 13px; }
  .comparison-table th, .comparison-table td { padding: 11px 12px; }
  .comparison-table thead th { padding-block: 18px; }
  .comparison-table thead th:first-child { width: 30%; }
  .column-title { font-size: 19px; }
  .column-description { font-size: 11px; }
  .status { margin-right: 6px; }
  .comparison-footnote, .terminal-note { text-align: left; }
  .install-body { padding: 16px; }
  .copy-command { padding-left: 12px; font-size: 13px; }
  .install-meta dt { width: 80px; }
  .faq-list summary { padding: 18px 0; font-size: 15px; }
  .faq-answer { padding-right: 16px; font-size: 14px; }
  .footer-inner { padding-block: 28px; }
  .footer-inner nav { gap: 16px; font-size: 13px; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 24px); }
  .header-inner { gap: 8px; }
  .header-actions { gap: 14px; }
  .js .section-menu { padding-inline: 12px; }
  .copy-command { font-size: 12px; gap: 8px; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .hero-grid, .hero::before, .hero-art, .copy-command::before, .stack-bus span::after { display: none; }
  .hero-intro { grid-template-columns: 1fr; }
  .button, .copy-command button, #replay-demo { border: 1px solid ButtonText; }
  .terminal, .feature-card, .capability-grid li, .stack-layer, .stack-ecosystem li, .why-item, .roadmap-version, .install-panel, .mini-ui, .comparison-wrap { border-color: CanvasText; }
  .stack-bus span, .mini-skel, .mini-scrollbar i { background: CanvasText; }
  .status, .stack-tag, .roadmap-current { border: 1px solid CanvasText; }
}