/* =========================================================================
   opencode Fusion - landing page styles
   Light Apple-product-page aesthetic + GitHub dark mode. All color values
   flow from tokens. System fonts only. No network requests.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Light: near-white canvas + white surface + warm-grey elevation. */
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);

  /* Accent: restrained blue for key moments. */
  --accent: #0066cc;
  --accent-strong: #0058b0;
  --accent-hover: #0058b0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 102, 204, 0.08);
  --accent-line: rgba(0, 102, 204, 0.22);
  --selection: rgba(0, 102, 204, 0.18);

  /* Secondary semantic hue (warm amber) - "edits" role. */
  --secondary: #9a5b00;
  --secondary-soft: rgba(154, 91, 0, 0.08);
  --secondary-line: rgba(154, 91, 0, 0.22);

  /* Success green (diagram "verified" end state) + lane hatch texture. */
  --ok: #1a7f37;
  --hatch: rgba(29, 29, 31, 0.04);

  /* Logo-only orange: more vivid than --secondary, which is tuned for text
     contrast and reads brown at mark sizes. */
  --mark-orange: #d97706;

  --text-high: #1d1d1f;
  --text-mid: #4a4a4f;
  --text-low: #6e6e73;

  /* Glass header + hero blend (tied to --bg so themes stay coherent). */
  --header-bg: rgba(251, 251, 253, 0.72);
  --header-bg-scrolled: rgba(251, 251, 253, 0.82);
  --hero-veil-0: rgba(251, 251, 253, 0.55);
  --hero-veil-1: rgba(251, 251, 253, 0.28);
  --hero-veil-2: rgba(251, 251, 253, 0.5);
  --hero-veil-3: rgba(251, 251, 253, 0.92);
  --hero-veil-solid: #fbfbfd;
  --hero-blend-mid: rgba(251, 251, 253, 0.65);
  --hero-poster: url("assets/hero-poster.jpg");

  /* Type: system stacks only (SF on Apple platforms, Segoe on Windows) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Modular type scale. Restrained ratio with confident jumps at the top. */
  --step--1: 0.8125rem;   /* 13px - labels / meta / mono */
  --step-0: 1.0625rem;    /* 17px - body */
  --step-1: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);   /* 19 -> 22 lead */
  --step-2: clamp(1.4375rem, 1.3rem + 0.7vw, 1.75rem);      /* 23 -> 28 */
  --step-4: clamp(2.125rem, 1.65rem + 2.4vw, 3.25rem);      /* 34 -> 52 section titles */
  --step-5: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);            /* 40 -> 80 hero */

  /* Spacing scale (rem, consistent rhythm) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Primitives */
  --container: 1080px;
  --container-pad: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);
  --section-pad: clamp(4.5rem, 3rem + 6.5vw, 8rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 980px;

  /* Floating header island: side inset + corner radius (flush to top edge). */
  --header-offset: clamp(0.5rem, 0.35rem + 0.7vw, 1rem);
  --header-radius: 18px;
  /* Must be >= tallest rendered header height (~62px mobile: toggle + padding + border).
     Pulls hero media under the sticky header so no --bg strip shows at the top.
     Hero content position is independent of this value (neg margin and +band padding cancel). */
  --header-band: 64px;

  /* Shadows: soft, diffuse, tinted just off pure black */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 6px 24px -8px rgba(17, 24, 39, 0.12);
  --shadow-lg: 0 24px 60px -28px rgba(17, 24, 39, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
  --dur-fast: 0.22s;
  --theme-dur: 0.4s;        /* color-mode crossfade */
  --stagger-step: 0.07s;    /* per-child cascade delay for grouped reveals */

  color-scheme: light;
}

/* GitHub dark (Primer dark_default): canvas #0d1117, surfaces #161b22/#21262d,
   borders #30363d, accent blues #1f6feb/#58a6ff, attention amber #d29922. */
html[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #21262d;
  --border: rgba(240, 246, 252, 0.1);
  --border-strong: #30363d;

  --accent: #1f6feb;
  --accent-strong: #58a6ff;
  --accent-hover: #1a5fca;
  --accent-ink: #ffffff;
  --accent-soft: rgba(56, 139, 253, 0.15);
  --accent-line: rgba(56, 139, 253, 0.4);
  --selection: rgba(56, 139, 253, 0.32);

  --secondary: #d29922;
  --secondary-soft: rgba(210, 153, 34, 0.15);
  --secondary-line: rgba(210, 153, 34, 0.4);

  --ok: #3fb950;
  --hatch: rgba(240, 246, 252, 0.05);

  --mark-orange: #f0883e;

  --text-high: #e6edf3;
  --text-mid: #9198a1;
  --text-low: #6e7681;

  --header-bg: rgba(13, 17, 23, 0.72);
  --header-bg-scrolled: rgba(13, 17, 23, 0.88);
  --hero-veil-0: rgba(13, 17, 23, 0.55);
  --hero-veil-1: rgba(13, 17, 23, 0.28);
  --hero-veil-2: rgba(13, 17, 23, 0.5);
  --hero-veil-3: rgba(13, 17, 23, 0.92);
  --hero-veil-solid: #0d1117;
  --hero-blend-mid: rgba(13, 17, 23, 0.65);
  --hero-poster: url("assets/hero-poster-dark.jpg");

  --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.4);
  --shadow-md: 0 6px 24px -8px rgba(1, 4, 9, 0.55);
  --shadow-lg: 0 24px 60px -28px rgba(1, 4, 9, 0.7);

  color-scheme: dark;
}

/* Smooth theme switch: only after first paint (html.theme-ready), so load
   does not flash-animate from system default.
   .header-inner is intentionally omitted here: its own transition (min-height,
   padding-block, background, border, box-shadow) must stay intact so the
   scrolled-island compaction still eases. Theme colors on the header still
   crossfade via those shared properties in .header-inner's own list. */
/* Color properties only on surfaces that do not own micro-interaction
   motion. Interactive controls (.btn, .theme-toggle, .copy-btn, .feature-item)
   keep their own transition lists (which already include theme colors +
   transform) so hover/press feedback is not clobbered after first paint. */
html.theme-ready body,
html.theme-ready .pill,
html.theme-ready .cost-panel,
html.theme-ready .hero-diagram,
html.theme-ready .swim-panel,
html.theme-ready .swim-box,
html.theme-ready .command,
html.theme-ready .hero-command,
html.theme-ready .term,
html.theme-ready .site-footer,
html.theme-ready .feature-icon,
html.theme-ready .bar-track,
html.theme-ready .bar-fill {
  transition:
    background-color var(--theme-dur) var(--ease),
    border-color var(--theme-dur) var(--ease),
    color var(--theme-dur) var(--ease),
    box-shadow var(--theme-dur) var(--ease),
    fill var(--theme-dur) var(--ease),
    stroke var(--theme-dur) var(--ease);
}
html.theme-ready .hero-media::after,
html.theme-ready .hero::after {
  transition: background var(--theme-dur) var(--ease), opacity var(--theme-dur) var(--ease);
}

/* ---- Reset / base ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-band) + var(--space-lg)); /* sticky header height for anchor jumps */
  -webkit-text-size-adjust: 100%;
  /* Slim, theme-tinted scrollbars: the Windows default rail glares against
     the dark canvas. scrollbar-color inherits, so inner scrollers (code,
     tables, terminal) pick up the same quiet tint. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

body {
  background-color: var(--bg);
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--text-high);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

/* Faster taps, no grey flash on mobile; :active states supply press feedback. */
a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; }

strong { color: var(--text-high); font-weight: 600; }

::selection {
  background: var(--selection);
  color: var(--text-high);
}

/* ---- Focus + accessibility helpers ------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}

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

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100%;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: var(--space-md); }

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

.measure { max-width: 34rem; }

.section {
  padding-block: var(--section-pad);
}

/* A single quiet hairline separates major movements of the page.
   .problem is excluded: it blends out of the hero instead of a hard edge. */
.section + .section { border-top: 1px solid var(--border); }

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-title {
  font-size: var(--step-4);
  max-width: 26ch;
}

.section-intro {
  margin-top: var(--space-lg);
  max-width: 46ch;
  color: var(--text-mid);
  font-size: var(--step-1);
  line-height: 1.45;
}

.lead {
  font-size: var(--step-1);
  color: var(--text-mid);
  line-height: 1.5;
}
.lead + .lead { margin-top: var(--space-md); }
.section-title + .lead { margin-top: var(--space-lg); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.72rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              border-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn-sm { padding: 0.5rem 1rem; font-size: var(--step--1); }

.btn-icon { display: inline-flex; transition: transform var(--dur-fast) var(--ease); }
.btn-icon svg { width: 1.05em; height: 1.05em; }
/* Gentle icon nudge on hover - a few px, no growth or bounce. */
.btn:hover .btn-icon { transform: translateX(2px); }
.btn:active .btn-icon { transform: translateX(1px); }

.btn-primary {
  background-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: scale(0.96); box-shadow: none; }

.btn-ghost {
  background-color: var(--surface);
  color: var(--text-high);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--text-low); background-color: var(--surface-2); }
.btn-ghost:active { transform: scale(0.96); }

/* ---- Pills / badges (semantic role markers) --------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-low);
  background: var(--surface);
}
.pill-main { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.pill-side { color: var(--secondary); border-color: var(--secondary-line); background: var(--secondary-soft); }
.pill-ok { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---- Header / nav ----------------------------------------------------- */
/* Sticky full-width bar flush to the top; .header-inner is the frosted capsule
   with side inset only (no top gap). pointer-events stay on the capsule so the
   transparent side strips never eat clicks. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-inline: var(--header-offset);
  background-color: transparent;
  pointer-events: none;
}

/* Two floating capsules on a transparent rail: brand pill on the left, nav
   cluster pill on the right. .header-inner still carries .container
   (max-width + centering); the frosted glass lives on each .header-pill. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* Full-bleed rail: the pills sit near the viewport edges rather than the
     centered content column, with comfortable breathing room. */
  max-width: none;
  padding-inline: clamp(0.75rem, 0.4rem + 1.2vw, 1.75rem);
}
.header-pill {
  min-height: 46px;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-sm);
  background-color: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--header-radius);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              min-height var(--dur-fast) var(--ease),
              padding-block var(--dur-fast) var(--ease);
}
.header-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Subtle elevation + a hair of contraction once the page scrolls under the
   islands. JS toggles .is-scrolled on .site-header at scrollY > 8. */
.site-header.is-scrolled .header-pill {
  min-height: 42px;
  padding-block: var(--space-2xs);
  background-color: var(--header-bg-scrolled);
  box-shadow: var(--shadow-md);
}

/* Theme toggle (sun / moon). Icon shows the mode you switch *to*.
   Both icons stay in the DOM, stacked in one grid cell, and cross-fade
   with scale + blur instead of an abrupt display swap. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-high);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              border-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease);
}
.theme-toggle:hover {
  border-color: var(--text-low);
  background: var(--surface-2);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1),
              transform 200ms cubic-bezier(0.2, 0, 0, 1),
              filter 200ms cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle .icon-sun {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: none;
  filter: none;
}
html[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--text-high);
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-mark {
  display: inline-flex;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease);
}
.wordmark:hover .wordmark-mark { transform: scale(1.06); }
.wordmark-mark svg { width: 1.2rem; height: 1.2rem; }
.wordmark-text { font-size: var(--step-0); }
/* "Fusion" (header and hero): flat accent blue. */
.wordmark-accent,
.hero-fusion {
  color: var(--accent);
}
.wordmark-accent { margin-left: 0.15em; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}
.nav-list a {
  color: var(--text-mid);
  font-size: 0.9375rem;
  font-weight: 450;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.nav-list a:hover {
  color: var(--text-high);
  background-color: var(--surface-2);
}

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* External-page nav link ("Docs"): minimal north-east arrow that nudges
   up-right on hover. */
a.nav-ext {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  /* A touch of extra right padding so the hover arrow sits inside the pill
     with breathing room instead of touching its edge. */
  padding-right: calc(var(--space-sm) + 5px);
}
/* The arrow lives inside the link's right padding (negative margin cancels
   its width + gap), so "Docs" spaces like every other nav item. */
.nav-ext-arrow {
  margin-right: calc(-9px - 0.25em);
  width: 9px;
  height: 9px;
  color: var(--text-low);
  opacity: 0;
  transform: translate(-1px, 1px);
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-ext:hover .nav-ext-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
  color: var(--text-high);
}

/* GitHub star pill: inverted chip (dark on light, light on dark) with the
   octocat mark, live star count, and a gold star. */
.gh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--text-high);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease);
}
.gh-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gh-btn-mark { width: 16px; height: 16px; flex-shrink: 0; }
.gh-btn-count { font-variant-numeric: tabular-nums; }
.gh-btn-star { width: 12px; height: 12px; flex-shrink: 0; margin-left: 2px; color: #e3b341; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--text-high);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero ------------------------------------------------------------- */
.hero {
  position: relative;      /* anchor media + veil layers */
  isolation: isolate;      /* keep media/veil in their own stack, behind content */
  overflow: hidden;        /* clip video so it never bleeds into the next section
                              or adds horizontal scroll (diagram shadow sits well
                              inside padding-bottom, so it is safe) */
  /* Sticky .site-header sits above #hero in flow and shows body --bg through its
     transparent wrapper. Pull the hero up by the header's in-flow height so
     .hero-media fills the viewport from the top edge (behind the floating
     capsule). Compensating padding keeps content clearing the bar. */
  margin-top: calc(-1 * var(--header-band));
  /* Comfortable top pad below the sticky header — title leads. */
  padding-top: calc(var(--header-band) + clamp(2.75rem, 1.5rem + 5vw, 5.5rem));
  padding-bottom: var(--section-pad);
  text-align: center;
}

/* Full-bleed ambient video (blue/amber fusion light). Decorative only.
   Poster + soft canvas veil keep text readable if the file is slow or paused.
   Mask fades the media into the page canvas so the handoff into .problem
   reads as a soft blend, not a hard crop line. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Static fallback while the video loads (or if it never does). */
  background-color: var(--bg);
  background-image: var(--hero-poster);
  background-size: cover;
  background-position: center;
  /* Opaque through most of the hero, then dissolve over the lower third. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
}
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Stay on the themed poster until the matching video is ready. */
  opacity: 0;
  transition: opacity var(--theme-dur) var(--ease);
}
.hero-video.is-ready { opacity: 1; }
.hero-video.is-swapping { opacity: 0; }
/* Soft canvas veil: protects AA contrast on title/tagline without crushing
   the blue/amber motion. Tokens swap with the theme so light/dark both blend. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      var(--hero-veil-0) 0%,
      var(--hero-veil-1) 36%,
      var(--hero-veil-2) 68%,
      var(--hero-veil-3) 88%,
      var(--hero-veil-solid) 100%
    ),
    radial-gradient(
      120% 80% at 50% 28%,
      var(--hero-veil-1) 0%,
      transparent 70%
    );
}

/* Extra bottom blend layer above the media (under content): catches any
   remaining edge and eases into the problem section's flat canvas. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(5rem, 10vw, 9rem);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--hero-blend-mid) 45%,
    var(--hero-veil-solid) 100%
  );
}

/* Lift the hero content (text + diagram) above the media + blend.
   z-index 2 keeps the diagram above the bottom fade so it stays crisp. */
.hero > .container { position: relative; z-index: 2; }
/* Hero copy stack: tight title → lead → meta → CTAs, then diagram. */
.hero-inner {
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-title {
  font-size: var(--step-5);
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-high);
  width: 100%;
  margin: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em 0.28em;
}
/* Official opencode pixel wordmark, swapped per theme. Height is in em so
   it scales with the clamped hero type next to it. */
.hero-wordmark-stack {
  display: inline-grid;
  place-items: center;
  /* The flex baseline is the image's bottom edge, but the SVG canvas keeps a
     16.43/115 descender zone below the glyph baseline (for the "p"). Dropping
     the box by that zone (as a share of the 0.82em image) puts the wordmark's
     true baseline exactly on "Fusion"'s; the descender dips below, as text would. */
  position: relative;
  top: 0.1171em;
}
.hero-wordmark {
  grid-area: 1 / 1;
  display: block;
  height: 0.82em; /* keeps the full lockup inside .hero-inner's 40rem column */
  width: auto;
}
.hero-wordmark-dark { display: none; }
html[data-theme="dark"] .hero-wordmark-light { display: none; }
html[data-theme="dark"] .hero-wordmark-dark { display: block; }

/* Lead: primary message under the title. */
.hero-tagline {
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  margin-inline: auto;
  font-size: var(--step-2);
  color: var(--text-high);
  max-width: 34ch;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
/* Meta: supporting cost line, quieter. */
.hero-subline {
  margin-top: var(--space-sm);
  margin-inline: auto;
  font-size: var(--step-0);
  color: var(--text-mid);
  max-width: 28ch;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-subline strong { color: var(--accent-strong); font-weight: 600; }

/* Hero install command: one-line pill mirroring the Get started terminal. */
.hero-command {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.hero-command-prompt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-low);
}
.hero-command code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-high);
  /* Scrolls by wheel/drag; the Copy button is the primary interaction. */
  scrollbar-width: none;
  /* When the command overflows (narrow screens), the right edge fades as a
     scroll hint instead of hard-clipping mid-word. Trailing padding matches
     the fade width so the last flag stays fully opaque when the command fits
     (the pill is max-content on wide screens, so there is no other slack). */
  padding-right: 1.5rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.hero-command code::-webkit-scrollbar { display: none; }
/* Wide screens: let the pill size to the full command and spill past the
   40rem hero measure symmetrically (the hero column centers it), so the
   whole command reads in one piece where there is room. */
@media (min-width: 900px) {
  .hero-command { width: max-content; max-width: 46rem; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* Flow band sits under the hero so the diagram is off-screen until scroll. */
.flow-band {
  position: relative;
  z-index: 2;
  padding-block: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: calc(-1 * clamp(1rem, 0.5rem + 2vw, 2rem));
}
/* Hero diagram: the Fusion loop as a two-lane swimlane (main agent left,
   sidekick right), boxes ping-ponging between lanes via crossing arrows. */
.hero-diagram {
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* One shared grid so rows align across both lanes: col 1 = main agent,
   col 2 = arrow gutter, col 3 = sidekick. Rows: 1 titles, 2-3 explore
   round-trip, 4 down-arrow, 5-6 spec/diff round-trip, 7-8 fix round-trip. */
.swim {
  --swim-pad: clamp(0.875rem, 0.7rem + 0.9vw, 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2.75rem, 1.2rem + 6vw, 5.5rem) minmax(0, 1fr);
  grid-template-rows: repeat(8, auto);
  row-gap: var(--space-sm);
  padding: var(--swim-pad);
}
/* Lane backdrops: hatched panels behind each column. Negative margins equal
   to the grid's own padding inflate them around the boxes, and halfway into
   the gutter, so crossing arrows visibly pierce the lane borders. */
.swim-panel {
  grid-row: 1 / -1;
  margin: calc(-1 * var(--swim-pad));
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, var(--hatch) 0, var(--hatch) 1px, transparent 1px, transparent 8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.swim-panel-main { grid-column: 1; }
.swim-panel-side { grid-column: 3; }
.swim-title {
  grid-row: 1;
  text-align: center;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-high);
}
.swim-title-main { grid-column: 1; }
.swim-title-side { grid-column: 3; }
.swim-box {
  display: grid;
  place-content: center;
  gap: 0.15em;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-high);
  font-size: clamp(0.8125rem, 0.72rem + 0.5vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.swim-l { grid-column: 1; }
.swim-s { grid-column: 3; }
/* Entry and exit states, tinted like the reference: blue in, green out. */
.swim-box-start { border-color: var(--accent); }
.swim-box-done { border-color: var(--ok); }
/* Sidekick boxes span the two main-agent rows they converse with, so both
   the outgoing and returning arrow land on their edge. */
.swim-ce { grid-row: 2 / 4; }
.swim-wc { grid-row: 5 / 7; }
.swim-fb { grid-row: 7 / 9; }
.swim .r2 { grid-row: 2; }
.swim .r3 { grid-row: 3; }
.swim .r5 { grid-row: 5; }
.swim .r6 { grid-row: 6; }
.swim .r7 { grid-row: 7; }
.swim .r8 { grid-row: 8; }
/* Gutter arrows: a 1px line spanning the full gutter (touching both boxes)
   with a chevron at the pointing end; built from pseudos so they stretch. */
.swim-arrow {
  position: relative;
  grid-column: 2;
  display: flex;
  align-items: center;
  color: var(--text-low);
  min-width: 0;
}
.swim-arrow::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
}
.swim-arrow::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: -8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
/* Left-pointing variant: chevron flips to the start edge (no scaleX mirror,
   so the optional label text stays readable). */
.swim-arrow-l::after {
  order: -1;
  margin-left: 0;
  margin-right: -8px;
  border-top: 0;
  border-right: 0;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}
.swim-arrow i {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 4px);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* Small in-lane connector between "File snippets" and "Plan". */
.swim-arrow-down {
  grid-column: 1;
  grid-row: 4;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 18px;
  color: var(--text-low);
}
.swim-arrow-down::before {
  content: "";
  flex: 1 1 auto;
  width: 1px;
  background: currentColor;
}
.swim-arrow-down::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Diagram choreography: once the figure reveals, the loop plays through a
   single time in process order. Each box fades in with a small rise; each
   arrow fades in sliding a few pixels in the direction it points. --fi
   (flow index, set inline in the markup) sequences the steps. Hidden state
   is gated on .js so the diagram is fully visible without JavaScript. */
@keyframes swim-step-in {
  from { opacity: 0; transform: translate(var(--slide-x, 0), var(--slide-y, 4px)); }
  to   { opacity: 1; transform: none; }
}
.js .hero-diagram .swim-box,
.js .hero-diagram .swim-arrow,
.js .hero-diagram .swim-arrow-down { opacity: 0; }
.js .hero-diagram .swim-arrow { --slide-x: -6px; --slide-y: 0; }
.js .hero-diagram .swim-arrow-l { --slide-x: 6px; }
.js .hero-diagram .swim-arrow-down { --slide-x: 0; --slide-y: -6px; }
.js .hero-diagram.is-visible .swim-box,
.js .hero-diagram.is-visible .swim-arrow,
.js .hero-diagram.is-visible .swim-arrow-down {
  animation: swim-step-in 0.45s var(--ease) both;
  /* 0.35s lets the figure's own reveal-rise settle before the walk starts;
     16 steps at 0.11s keeps the full pass under ~2.5s. */
  animation-delay: calc(0.35s + var(--fi, 0) * 0.11s);
}

/* ---- How it works: connected flow ------------------------------------- */
.flow {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  counter-reset: step;
}
.flow-step { position: relative; }
/* Step cards: quiet neutral surfaces. Role identity comes from the legend
   dot + label and the capability pill rather than a full-card tint (soft
   tints read muddy in dark mode). A large ghost numeral in the corner
   carries the 01-04 sequence. Owns its transition list (theme colors +
   transform) like .feature-item, so the hover lift keeps easing after the
   theme-ready crossfade kicks in. */
.flow-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              border-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease);
}
.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.flow-num {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-low);
  opacity: 0.4;
}
.flow-role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
/* Legend dot: ties the card to its lane color without tinting the card. */
.flow-role::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.flow-role-neutral { color: var(--text-low); }
.flow-role-main { color: var(--accent-strong); }
.flow-role-side { color: var(--secondary); }
.flow-title { font-size: var(--step-1); margin-top: var(--space-3xs); }
.flow-desc { font-size: var(--step-0); color: var(--text-mid); line-height: 1.5; }
/* Pills keep their own soft tint; it reads cleanly on the neutral card. */
.flow-card .pill { margin-top: auto; }

/* ---- Features: asymmetric bento --------------------------------------- */
.feature-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              border-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease);
}
.feature-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-item-lead {
  background: var(--surface);
  border: 1px solid var(--accent-line);
}
.feature-icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-high);
  box-shadow: var(--shadow-sm);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon-accent { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: none; }
.feature-title { font-size: var(--step-2); letter-spacing: -0.015em; }
.feature-desc { font-size: var(--step-0); color: var(--text-mid); line-height: 1.55; max-width: 46ch; }

/* ---- Cost comparison -------------------------------------------------- */
.cost-panel {
  max-width: 720px;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.cost-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--secondary);
  background: var(--secondary-soft);
  border: 1px solid var(--secondary-line);
  padding: 0.32rem 0.72rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-xl);
}
.bars {
  display: grid;
  gap: var(--space-lg);
}
.bar-row { display: grid; gap: var(--space-xs); }
.bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
}
.bar-name { color: var(--text-high); font-weight: 500; }
/* The savings delta is the card's actual message; the chip makes it scannable. */
.bar-chip {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 0.08rem 0.5rem;
  border-radius: var(--radius-pill);
}
.bar-value {
  font-family: var(--font-mono);
  color: var(--text-low);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}
.bar-value-accent { color: var(--accent-strong); }
.bar-track {
  height: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: var(--pct);
  border-radius: var(--radius-pill);
}
.bar-baseline { background: var(--border-strong); }
.bar-fusion { background: var(--accent); }
/* The bars draw once the panel reveals: baseline first, then Fusion stops
   short - the size of the gap is the message. One-shot, scroll-gated. */
.js .cost-panel.reveal .bar-fill { width: 0; }
.js .cost-panel.reveal.is-visible .bar-fill {
  width: var(--pct);
  transition: width 850ms var(--ease) 150ms;
}
.js .cost-panel.reveal.is-visible .bar-fusion { transition-delay: 400ms; }
.cost-caption {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-low);
  line-height: 1.55;
}

/* ---- CTA / install / terminal block ----------------------------------- */
/* Session-as-steps: the three setup steps play out inside one terminal
   window as a real transcript. Prompt color encodes environment (blue $ =
   your shell, amber > = inside OpenCode - the flow diagram's role hues).
   Note + docs stay one quiet meta line below. */
.cta { overflow: hidden; } /* clips the ambient glow bleed on small screens */
.cta .section-head,
.cta-head {
  text-align: center;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.cta .section-intro { margin-inline: auto; }
.cta .section-title { max-width: none; margin-inline: auto; }

/* Centered stack: terminal → meta. Same axis as .cta-head. */
.install-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 1.25vw, 2.25rem);
  max-width: 47rem;
  margin-inline: auto;
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  text-align: center;
}
/* Ambient echo of the hero's blue + amber glow behind the terminal, so the
   page closes on the same light it opened with. Static; sits under content. */
.install-hero::before {
  content: "";
  position: absolute;
  inset: -14% -16%;
  z-index: -1;
  background:
    radial-gradient(42% 48% at 20% 12%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(38% 44% at 82% 88%, var(--secondary-soft) 0%, transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}

/* Hero command: wide, quiet surface — the only visual weight in the section. */
.command {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 30rem;
  width: 100%;
  text-align: left;
  overflow: hidden;
  box-shadow: none;
}
.command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.55rem 0.65rem 0.55rem 1.1rem;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.command-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-low);
  line-height: 1;
}
.command-pre {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Commands never wrap mid-flag: keep one line and let the block scroll
   sideways on narrow screens instead. */
.command-pre code {
  display: block;
  width: max-content;
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  color: var(--text-high);
  white-space: pre;
  line-height: 1.65;
  letter-spacing: -0.01em;
}
/* $ only on the first line of multi-line command blocks. */
.command-pre code::before {
  content: "$ ";
  color: var(--accent-strong);
  font-weight: 600;
}

/* Terminal window: fixed-dark in both themes - terminals are dark, and the
   deep surface gives the closing CTA the focal weight the section carries.
   All inner color flows from --term-* so print/theme tweaks stay one-line. */
.term {
  --term-bg: #0f141b;
  --term-bar: rgba(240, 246, 252, 0.03);
  --term-border: rgba(240, 246, 252, 0.14);
  --term-text: #e6edf3;
  --term-muted: #8b949e;
  --term-faint: rgba(240, 246, 252, 0.38);
  --term-shell: #58a6ff;
  --term-oc: #d29922;
  --term-pad-x: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* On the dark theme, lift the window off the near-black canvas instead. */
html[data-theme="dark"] .term {
  --term-bg: #161b22;
  --term-border: #30363d;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-border);
}
.term-dots {
  display: inline-flex;
  gap: 0.4rem;
}
.term-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(240, 246, 252, 0.14);
}
.term-title {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--term-muted);
  line-height: 1;
}
/* Copy control re-tinted for the fixed-dark chrome (tokens assume page bg). */
.term .copy-btn {
  color: var(--term-muted);
  border-color: rgba(240, 246, 252, 0.16);
}
.term .copy-btn:hover {
  color: var(--term-text);
  border-color: rgba(240, 246, 252, 0.32);
  background: rgba(240, 246, 252, 0.06);
}
.term .copy-btn:focus-visible { outline-color: #58a6ff; }
.term .copy-btn.is-copied {
  color: #ffffff;
  background: #1f6feb;
  border-color: #1f6feb;
}

/* The session transcript. One ordered list = the three real steps, numbered
   inside the comments where a sequence belongs. Long install line scrolls
   sideways rather than wrapping mid-flag. */
.term-body {
  list-style: none;
  margin: 0;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) var(--term-pad-x) 0.2rem;
  display: flex;
  flex-direction: column;
  gap: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.78125rem, 0.73rem + 0.26vw, 0.875rem);
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 246, 252, 0.22) transparent;
}
.term-body::-webkit-scrollbar { height: 6px; }
.term-body::-webkit-scrollbar-thumb {
  background: rgba(240, 246, 252, 0.22);
  border-radius: 3px;
}
.term-body::-webkit-scrollbar-track { background: transparent; }
.term-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.term-comment {
  color: var(--term-faint);
  white-space: pre;
}
.term-line {
  display: flex;
  align-items: baseline;
  gap: 0.65ch;
  white-space: pre;
}
.term-line code {
  font-family: inherit;
  font-size: inherit;
  color: var(--term-text);
  letter-spacing: -0.01em;
}
.term-prompt {
  font-weight: 600;
  color: var(--term-shell);
}
.term-prompt-oc { color: var(--term-oc); }
/* Page-level ::selection assumes the page background; re-tint for the
   fixed-dark surface so selected command text stays readable in light mode. */
.term ::selection {
  background: rgba(56, 139, 253, 0.35);
  color: #e6edf3;
}
.term-caret {
  align-self: center;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 0.2ch;
  background: var(--term-faint);
  animation: caret-blink 1.2s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}
/* Session payoff line: the product thesis, as terminal output. */
.term-ok {
  margin: 0;
  padding: 0.35rem var(--term-pad-x) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: clamp(0.78125rem, 0.73rem + 0.26vw, 0.875rem);
  line-height: 1.6;
  color: var(--term-muted);
}
.term-ok-mark {
  color: var(--term-shell);
  font-weight: 600;
}

/* One understated meta line: platform note + offline paths + docs link. */
.install-meta {
  margin: 0;
  max-width: 42rem;
  font-size: var(--step--1);
  color: var(--text-low);
  line-height: 1.6;
  text-wrap: pretty;
}
.install-meta code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-mid);
}
.install-docs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.35em;
  white-space: nowrap;
  font-size: inherit;
  font-weight: 500;
  color: var(--accent-strong);
  text-decoration: none;
  transition: color var(--theme-dur) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.install-docs svg {
  width: 0.8em;
  height: 0.8em;
  opacity: 0.65;
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.install-docs:hover { opacity: 0.85; }
.install-docs:hover svg {
  transform: translate(1px, -1px);
  opacity: 1;
}
.install-docs:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.copy-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 1.875rem;
  min-width: 2.5rem;
  padding: 0.3rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--theme-dur) var(--ease),
              border-color var(--theme-dur) var(--ease),
              color var(--theme-dur) var(--ease);
}
.copy-btn:hover {
  color: var(--text-high);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.copy-btn:active { transform: scale(0.96); }
/* Visible control is ~30px tall; a quiet halo extends the hit area to 42px.
   Nothing else clickable sits within 6px of it in either command bar. */
.copy-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}
.copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.copy-btn.is-copied {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
/* Subtle self-drawing checkmark that appears alongside the "Copied" label. */
.copy-btn-check {
  display: none;
  width: 0.9em;
  height: 0.9em;
}
.copy-btn.is-copied .copy-btn-check {
  display: inline-block;
}
.copy-btn.is-copied .copy-btn-check path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: check-draw var(--dur-fast) var(--ease) forwards;
}
.cta-actions { justify-content: center; margin-top: var(--space-2xl); }

@media (hover: none) {
  .flow-card:hover,
  .feature-item:hover {
    transform: none;
    box-shadow: none;
  }
  /* Tap-triggered sticky hovers should not leave things floated or nudged. */
  .btn-primary:hover {
    transform: none;
    box-shadow: none;
  }
  .btn:hover .btn-icon,
  .wordmark:hover .wordmark-mark { transform: none; }
}

/* ---- Footer ----------------------------------------------------------- */
/* Single calm band: hairline top, page canvas, no heavy grey block.
   Brand + inline nav, then a quiet meta row. */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
}
.footer-shell {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
}
.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl) var(--space-2xl);
}
.footer-brand {
  max-width: 28rem;
}
.footer-desc {
  margin-top: var(--space-sm);
  color: var(--text-low);
  max-width: 36ch;
  font-size: var(--step--1);
  line-height: 1.5;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.footer-nav a:hover {
  color: var(--text-high);
  background: var(--surface-2);
}
.footer-nav a:focus-visible {
  outline-offset: 2px;
}
.footer-nav-ext svg {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.footer-nav-ext:hover svg {
  opacity: 1;
  transform: translate(1px, -1px);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--border);
}
.footer-copyright {
  font-size: 0.75rem;
  color: var(--text-low);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.footer-disclaimer {
  font-size: 0.75rem;
  color: var(--text-low);
  max-width: 52ch;
  line-height: 1.5;
  opacity: 0.85;
}

/* ---- Docs page -------------------------------------------------------- */
/* Editorial minimal: measure-first prose, sticky TOC, hairlines only.
   Reuses tokens; no extra fonts, gradients, or heavy elevation. */
.docs-page {
  background: var(--bg);
}
.docs-main {
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--section-pad);
}
.docs-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.docs-toc {
  display: none;
}
.docs-toc-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--space-sm);
}
.docs-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-left: 1px solid var(--border);
}
.docs-toc-nav a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.85rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: var(--step--1);
  color: var(--text-low);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.docs-toc-nav a:hover {
  color: var(--text-high);
}
.docs-toc-nav a.is-active {
  color: var(--text-high);
  border-left-color: var(--accent-strong);
  font-weight: 500;
}
.docs-article {
  min-width: 0;
  max-width: 42rem;
}
.docs-hero {
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}
.docs-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--space-sm);
}
.docs-title {
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-high);
  text-wrap: balance;
}
.docs-lead {
  margin-top: var(--space-md);
  font-size: var(--step-1);
  color: var(--text-mid);
  line-height: 1.5;
  max-width: 40ch;
  text-wrap: pretty;
}
.docs-section {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-band) + var(--space-lg));
}
.docs-section:last-of-type {
  border-bottom: none;
}
.docs-section h2 {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-high);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}
.docs-section h3 {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-high);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}
.docs-section p {
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 62ch;
  text-wrap: pretty;
}
.docs-section p + p {
  margin-top: var(--space-md);
}
.docs-section a:not(.copy-btn):not(.btn) {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.docs-section a:not(.copy-btn):not(.btn):hover {
  text-decoration-thickness: 2px;
}
.docs-section code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--text-high);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.08em 0.35em;
  border-radius: 5px;
  font-variant-ligatures: none;
}
.docs-section .command {
  margin: var(--space-lg) 0;
  max-width: none;
}
.docs-section .command-pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--step--1);
}
.docs-section .command-pre code::before {
  content: "$ ";
  color: var(--accent-strong);
  font-weight: 600;
}
/* Prompt block: no shell $ prefix */
.docs-section .command-pre code#docs-cmd-verify::before {
  content: none;
}
.docs-callout {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-width: 62ch;
}
.docs-callout p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-mid);
  line-height: 1.55;
}
.docs-callout strong {
  color: var(--text-high);
}
.docs-steps {
  margin: var(--space-md) 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-xs);
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 62ch;
}
.docs-steps li::marker {
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}
.docs-list {
  margin: var(--space-md) 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-sm);
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 62ch;
}
.docs-list li::marker {
  color: var(--text-low);
}
.docs-note {
  margin-top: var(--space-sm) !important;
  font-size: var(--step--1) !important;
  color: var(--text-low) !important;
}
.docs-table-wrap {
  margin: var(--space-lg) 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.45;
}
.docs-table th,
.docs-table td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.docs-table th {
  font-weight: 600;
  color: var(--text-low);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.docs-table td {
  color: var(--text-mid);
}
.docs-table tr:last-child td {
  border-bottom: none;
}
.docs-table code {
  font-size: 0.9em;
}
.docs-faq {
  margin: 0;
  display: grid;
  gap: 0;
}
.docs-faq-item {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.docs-faq-item:first-child {
  padding-top: 0;
}
.docs-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.docs-faq dt {
  font-weight: 600;
  color: var(--text-high);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xs);
}
.docs-faq dd {
  margin: 0;
  color: var(--text-mid);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}
.docs-end {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-sm);
  font-size: var(--step--1);
  color: var(--text-low);
  line-height: 1.55;
  max-width: 52ch;
}
.docs-end a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (min-width: 900px) {
  .docs-shell {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  }
  .docs-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-band) + var(--space-md));
    align-self: start;
  }
  .docs-article {
    max-width: 42rem;
  }
}

/* ---- Scroll-reveal ---------------------------------------------------- */
/* Entrance is a keyframe (not a transition) so a per-child animation-delay
   can cascade grouped items without touching their hover transitions. */
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  animation: reveal-rise var(--dur) var(--ease) both;
  /* Release the pre-promotion hint; the running animation keeps its own
     layer, and ~20 permanently promoted layers cost memory on mobile. */
  will-change: auto;
}

/* Staggered cascade: children of a revealing group enter one after another.
   Delay is capped so a group never feels slow. Pure CSS via :nth-child. */
.js .hero-inner > .reveal.is-visible:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.js .hero-inner > .reveal.is-visible:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.js .hero-inner > .reveal.is-visible:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.js .hero-inner > .reveal.is-visible:nth-child(n+5) { animation-delay: calc(var(--stagger-step) * 4); }

.js .flow > .reveal.is-visible:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.js .flow > .reveal.is-visible:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.js .flow > .reveal.is-visible:nth-child(n+4) { animation-delay: calc(var(--stagger-step) * 3); }

.js .feature-grid > .reveal.is-visible:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.js .feature-grid > .reveal.is-visible:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.js .feature-grid > .reveal.is-visible:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.js .feature-grid > .reveal.is-visible:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
.js .feature-grid > .reveal.is-visible:nth-child(n+6) { animation-delay: calc(var(--stagger-step) * 5); }

/* =========================================================================
   Responsive: mobile-first above, wider layouts below
   ========================================================================= */

/* Tablet / small laptop */
@media (min-width: 620px) {
  /* Tablet: pair the step cards 2x2 instead of one long stack; the 4-across
     row with connectors takes over at 900px. */
  .flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-meta {
    flex-wrap: nowrap;
  }
  .footer-disclaimer {
    text-align: right;
  }
}

@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(4, 1fr);
  }
  /* connector between flow cards */
  .flow-step:not(:last-child) .flow-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-md));
    width: var(--space-md);
    height: 1px;
    background: var(--border-strong);
    transform: translateY(-50%);
  }
  /* Asymmetric bento: lead + one, then a triplet, then a full-width band */
  .feature-grid { grid-template-columns: repeat(6, 1fr); }
  .feature-item { grid-column: span 2; }
  .feature-item-lead { grid-column: span 4; }
  .feature-item-wide { grid-column: span 6; flex-direction: row; align-items: flex-start; gap: var(--space-lg); }
  .feature-item-lead .feature-desc,
  .feature-item-wide .feature-desc { max-width: 60ch; }
}

/* Mobile nav: collapse below 900px - the full desktop nav needs ~900px
   before "How it works" stops wrapping inside the cluster pill. */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    /* The cluster pill's backdrop-filter makes it the containing block, so
       the dropdown hangs right-aligned under the right pill by design. */
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: auto;
    right: 0;
    width: min(20rem, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    /* Solid surface, no blur: the cluster pill's own backdrop-filter makes
       this a nested backdrop root, so blur here cannot sample the page
       behind - a translucent panel lets the hero bleed through un-blurred. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--header-radius);
    box-shadow: var(--shadow-md);
    /* hidden by default; JS toggles .is-open */
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list li { border-bottom: 1px solid var(--border); }
  .nav-list a { display: flex; align-items: center; gap: 0.2em; padding: var(--space-sm); border-radius: 0; }
  .nav-list a:hover { background-color: transparent; }
  .nav .btn { margin-top: var(--space-sm); justify-content: center; }
  .nav .gh-btn { margin-top: var(--space-2xs); justify-content: center; }
  /* Anchor the absolute dropdown to the full header rail (both pills). */
  .header-inner { position: relative; }
}

/* Tighten the swimlane diagram on narrow screens (it stays two-lane -
   the side-by-side conversation is the point). */
@media (max-width: 619px) {
  .swim-box { min-height: 2.5rem; padding: var(--space-2xs) var(--space-xs); }
  .swim-arrow i { display: none; }
}

/* =========================================================================
   Reduced motion: disable transforms/reveal, show everything immediately
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  /* Neutralize the stagger cascade and entrance keyframe. */
  .js .reveal.is-visible { animation: none !important; }
  /* Diagram choreography off: show every box and arrow immediately. */
  .js .hero-diagram .swim-box,
  .js .hero-diagram .swim-arrow,
  .js .hero-diagram .swim-arrow-down {
    opacity: 1;
    animation: none !important;
  }
  /* Neutralize hover/state motion refinements. */
  .btn:hover .btn-icon,
  .btn:active .btn-icon,
  .btn-primary:hover,
  .btn-primary:active,
  .wordmark:hover .wordmark-mark,
  .copy-btn:active,
  .install-docs:hover svg { transform: none !important; }
  /* Check appears instantly with no self-drawing animation. */
  .copy-btn.is-copied .copy-btn-check path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  /* Prefer the static poster over a looping video when motion is reduced. */
  .hero-video {
    display: none !important;
  }
}

/* =========================================================================
   Print: reveals are scroll-gated, so force everything visible; drop the
   ambient video and interactive chrome that make no sense on paper.
   ========================================================================= */
@media print {
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .js .hero-diagram .swim-box,
  .js .hero-diagram .swim-arrow,
  .js .hero-diagram .swim-arrow-down {
    opacity: 1 !important;
    animation: none !important;
  }
  .hero-video,
  .theme-toggle,
  .nav-toggle,
  .copy-btn { display: none !important; }
  .site-header { position: static; }
  /* Ink-friendly terminal: retint via its own tokens, drop glow and caret. */
  .term {
    --term-bg: #ffffff;
    --term-bar: transparent;
    --term-border: #999999;
    --term-text: #000000;
    --term-muted: #444444;
    --term-faint: #666666;
    --term-shell: #000000;
    --term-oc: #000000;
    box-shadow: none;
  }
  .install-hero::before,
  .term-caret { display: none !important; }
}