/* ============================================================================
   Vellum Code — landing page
   ----------------------------------------------------------------------------
   The visual language is lifted straight out of the app's own theme layer
   (src/renderer/src/styles/globals.css + tailwind.config.mjs):

     · Monochrome ink on warm graphite. There is no brand hue — the accent for
       every theme is that theme's strongest ink (near-white on graphite, near-
       black on paper, pure white on ink). Colour is reserved for status only.
     · Three themes, exactly as the app ships them: graphite / paper / ink.
     · Geist for UI, Geist Mono for code, Newsreader italic for the editorial
       "reasoning" register.
     · Soft corners, and the app's own easing: cubic-bezier(.22, 1, .36, 1).
   ========================================================================== */

/* ----------------------------------------------------------------- tokens -- */

:root {
  /* graphite — the app default */
  --bg-base: 21 21 21;
  --bg-surface: 26 26 26;
  --bg-elevated: 33 33 33;
  --bg-overlay: 42 42 42;
  --border-faint: 34 34 34;
  --border-default: 44 44 44;
  --border-strong: 68 68 68;
  --text-primary: 233 231 227;
  --text-secondary: 171 171 168;
  --text-tertiary: 138 138 136;
  --text-muted: 95 95 93;
  --success: 134 173 149;
  --warning: 205 173 114;
  --danger: 207 112 105;
  --accent: 240 238 234;
  --accent-ink: 21 21 21;

  --wash: 255 255 255;
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.03), 0 18px 50px -24px rgb(0 0 0 / 0.8);
  --glow: 0.5;

  /* type */
  --font-sans: "Geist", "Geist Variable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  --font-editorial: "Newsreader", "Newsreader Variable", Georgia, "Times New Roman", serif;

  /* scale */
  --r-sm: 5px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-3xl: 32px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1200px;
  --gutter: 24px;
  --nav-h: 64px;
}

[data-theme="paper"] {
  --bg-base: 236 234 227;
  --bg-surface: 242 240 234;
  --bg-elevated: 247 245 240;
  --bg-overlay: 252 251 247;
  --border-faint: 222 219 210;
  --border-default: 205 201 190;
  --border-strong: 173 168 153;
  --text-primary: 26 25 22;
  --text-secondary: 87 84 76;
  --text-tertiary: 128 124 114;
  --text-muted: 168 164 152;
  --success: 31 158 134;
  --warning: 154 106 14;
  --danger: 196 0 0;
  --accent: 26 25 22;
  --accent-ink: 242 240 234;
  --wash: 255 255 255;
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.6), 0 20px 44px -26px rgb(60 54 40 / 0.42);
  --glow: 0.16;
}

[data-theme="ink"] {
  --bg-base: 0 0 0;
  --bg-surface: 10 10 10;
  --bg-elevated: 20 20 20;
  --bg-overlay: 31 31 31;
  --border-faint: 58 58 58;
  --border-default: 94 94 94;
  --border-strong: 143 143 143;
  --text-primary: 255 255 255;
  --text-secondary: 230 230 230;
  --text-tertiary: 196 196 196;
  --text-muted: 154 154 154;
  --success: 108 255 216;
  --warning: 255 192 77;
  --danger: 255 96 96;
  --accent: 255 255 255;
  --accent-ink: 0 0 0;
  --wash: 255 255 255;
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 50px -24px rgb(0 0 0 / 0.9);
  --glow: 0.26;
}

/* ------------------------------------------------------------------- base -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: rgb(var(--bg-base));
  color: rgb(var(--text-primary));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A whisper of paper grain — vellum, not flat paint. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Every icon in this page is a stroked lucide-register glyph, matching the
   app's lucide-react icon set. Filled marks (the brand chevron) opt out. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Floor for icon glyphs: `:where()` carries zero specificity, so every
   context rule below still wins — this only stops an icon that never got a
   size rule from rendering at its intrinsic 300×150 default. */
:where(svg:not([class])) {
  width: 16px;
  height: 16px;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: rgb(var(--text-primary) / 0.9);
  color: rgb(var(--bg-base));
}

:focus-visible {
  outline: 2px solid rgb(var(--text-primary) / 0.7);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- typography */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 560;
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.display {
  font-size: clamp(2.7rem, 6.4vw, 5rem);
  font-weight: 560;
  letter-spacing: -0.043em;
  line-height: 1.05;
}

.h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  letter-spacing: -0.034em;
}

.h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  letter-spacing: -0.02em;
  font-weight: 560;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgb(var(--text-secondary));
  line-height: 1.62;
}

.muted {
  color: rgb(var(--text-tertiary));
}

.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-head .h2 {
  margin-bottom: 16px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: rgb(var(--border-strong));
}

.rule {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(var(--border-default)),
    transparent
  );
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- surfaces */

.card {
  background: rgb(var(--bg-surface));
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
}

.panel {
  background: rgb(var(--bg-elevated) / 0.6);
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding-inline: 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 520;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: transform 140ms var(--ease), background 160ms var(--ease),
    border-color 160ms var(--ease), box-shadow 160ms var(--ease), opacity 160ms;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Primary = the theme's strongest ink. Monochrome, always. */
.btn-primary {
  background: rgb(var(--accent));
  color: rgb(var(--accent-ink));
  box-shadow: var(--shadow-lift);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgb(var(--text-primary) / 0.16);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  border-color: rgb(var(--border-default));
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-surface) / 0.5);
}

.btn-ghost:hover {
  border-color: rgb(var(--border-strong));
  background: rgb(var(--bg-elevated));
}

.btn-sm {
  height: 34px;
  padding-inline: 13px;
  font-size: 0.8125rem;
  border-radius: var(--r);
}

.btn-lg {
  height: 48px;
  padding-inline: 24px;
  font-size: 0.9375rem;
  border-radius: var(--r-lg);
}

/* ------------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding-inline: 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--border-default));
  background: rgb(var(--bg-surface) / 0.7);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-tertiary));
  white-space: nowrap;
}

.pill svg {
  width: 12px;
  height: 12px;
}

.pill-accent {
  border-color: rgb(var(--border-strong));
  color: rgb(var(--text-secondary));
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--text-muted));
  flex: none;
}

.dot-live {
  background: rgb(var(--warning));
  box-shadow: 0 0 0 0 rgb(var(--warning) / 0.45);
  animation: ping 2.4s var(--ease) infinite;
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--warning) / 0.5);
  }
  60% {
    box-shadow: 0 0 0 6px rgb(var(--warning) / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(var(--warning) / 0);
  }
}

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border: 1px solid transparent;
}

.verdict-ok {
  color: rgb(var(--success));
  background: rgb(var(--success) / 0.08);
  border-color: rgb(var(--success) / 0.22);
}

.verdict-warn {
  color: rgb(var(--warning));
  background: rgb(var(--warning) / 0.08);
  border-color: rgb(var(--warning) / 0.22);
}

.verdict-bad {
  color: rgb(var(--danger));
  background: rgb(var(--danger) / 0.08);
  border-color: rgb(var(--danger) / 0.22);
}

/* ---------------------------------------------------------------- progress */

.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 200;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: rgb(var(--text-primary) / 0.85);
  pointer-events: none;
}

/* --------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 220ms var(--ease), border-color 220ms var(--ease),
    backdrop-filter 220ms;
}

.nav.is-stuck {
  background: rgb(var(--bg-base) / 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgb(var(--border-faint));
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.brand-mark {
  width: 26px;
  height: 26px;
  color: rgb(var(--text-primary));
  /* the app's media/sidebar-icon.svg chevron is a solid mark, not a stroke */
  fill: currentColor;
  stroke: none;
}

/* same treatment for the brand glyph where it appears small (window chrome) */
.mark-fill {
  fill: currentColor;
  stroke: none;
}

.brand-word {
  font-size: 0.9375rem;
  font-weight: 560;
  letter-spacing: -0.024em;
}

.brand-word span {
  color: rgb(var(--text-tertiary));
  font-weight: 420;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 6px;
}

.nav-links a {
  padding: 8px 9px;
  border-radius: var(--r);
  font-size: 0.8125rem;
  color: rgb(var(--text-tertiary));
  transition: color 150ms, background 150ms;
}

.nav-links a:hover {
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-elevated) / 0.75);
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

/* segmented switches (theme + language) */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-surface) / 0.7);
  border-radius: var(--r-md);
}

.seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  min-width: 30px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgb(var(--text-muted));
  transition: color 150ms, background 150ms var(--ease);
}

.seg button:hover {
  color: rgb(var(--text-secondary));
}

.seg button[aria-pressed="true"] {
  background: rgb(var(--bg-overlay));
  color: rgb(var(--text-primary));
  box-shadow: 0 1px 0 rgb(var(--wash) / 0.04);
}

.seg svg {
  width: 13px;
  height: 13px;
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-md);
  color: rgb(var(--text-secondary));
}

.nav-toggle svg {
  width: 17px;
  height: 17px;
}

/* mobile drawer */
.drawer {
  display: none;
  border-bottom: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-base) / 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.drawer.is-open {
  display: block;
}

.drawer nav {
  display: grid;
  gap: 2px;
  padding-block: 12px 20px;
}

.drawer nav a {
  padding: 11px 12px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: rgb(var(--text-secondary));
}

.drawer nav a:hover {
  background: rgb(var(--bg-elevated));
  color: rgb(var(--text-primary));
}

.drawer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  /* the generic `section` rule pads 120px at the top; the intro's own band
     handles that, so the full-height stage starts flush under the nav */
  padding-top: 0;
  padding-bottom: clamp(40px, 5vw, 64px);
  overflow: hidden;
}

/* Monochrome light wash — the "ink" bleeding into the paper. It is pinned to
   the intro (not the whole hero) so the halo sits behind the headline rather
   than above it once the window mockup made the section three screens tall. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1150px, 132vw);
  height: 100vh;
  height: 100svh;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 46% 46% at 50% 50%,
    rgb(var(--wash) / var(--glow)) 0%,
    rgb(var(--wash) / calc(var(--glow) * 0.35)) 44%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(
      to right,
      rgb(var(--border-faint) / 0.55) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgb(var(--border-faint) / 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 74% 62% at 50% 50%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(
    ellipse 74% 62% at 50% 50%,
    #000 0%,
    transparent 78%
  );
}

/* The intro is the first screen: one viewport minus the nav, with the headline
   block dead centre. The Agents Window starts below the fold. */
.hero-intro {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-top: clamp(48px, 7vh, 84px);
  /* The nav is a translucent bar floating over this screen, not a band carved
     out of it — so the block is centred on the *viewport*, and the nav's own
     height comes back out of the bottom padding. */
  padding-bottom: calc(clamp(48px, 7vh, 84px) + var(--nav-h));
}

.hero-inner {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}

.hero h1 {
  margin-bottom: 26px;
}

/* --- the headline types itself out ------------------------------------------
   Every glyph is its own span, hidden by opacity rather than removed from the
   flow: the line's final width is reserved from the first frame, so nothing
   reflows as the text arrives and the two lines never shuffle sideways. The
   spans are only hidden while `html.js` is up, so a script that fails to boot
   hands the finished headline back instead of an empty one. */

.hero h1 .tw-line {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
}

.hero h1 .tw-chars {
  white-space: pre;
}

html.js .hero h1 .tw-ch {
  opacity: 0;
}

.hero h1 .tw-ch {
  transition: opacity 90ms linear;
}

html.js .hero h1 .tw-ch.is-in {
  opacity: 1;
}

.hero h1 .tw-caret {
  position: absolute;
  left: 0;
  top: 0.09em;
  width: 0.052em;
  min-width: 2px;
  height: 0.84em;
  border-radius: 1px;
  background: rgb(var(--text-primary));
  opacity: 0;
  transition: transform 55ms linear, opacity 200ms linear;
  pointer-events: none;
}

.hero h1 .tw-line.is-typing .tw-caret,
.hero h1 .tw-line.is-hinting .tw-caret {
  opacity: 1;
}

.hero h1 .tw-line.is-hinting .tw-caret {
  animation: caret-pulse 1.15s var(--ease) infinite;
}

.hero h1 .ink-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.07em;
  height: 0.085em;
  background: rgb(var(--text-primary) / 0.22);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease);
}

.hero h1 .ink-underline.is-done::after {
  transform: scaleX(1);
}

/* no script (or one that never booted): the underline is simply there */
html:not(.js) .hero h1 .ink-underline::after {
  transform: scaleX(1);
}

/* the scroll cue at the foot of the first screen — the window mockup is now
   entirely below the fold, so something has to say so */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4.5vh, 46px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgb(var(--text-muted));
  transition: color 180ms var(--ease);
}

.hero-cue:hover {
  color: rgb(var(--text-secondary));
}

.hero-cue-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-cue-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgb(var(--text-muted) / 0.8));
}

.hero-cue svg {
  width: 14px;
  height: 14px;
  animation: cue-drift 2.6s var(--ease) infinite;
}

@keyframes cue-drift {
  0%,
  100% {
    transform: translateY(-2px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}

.hero .lede {
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-muted));
}

.hero-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-note svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------- app window
   A faithful, animated rebuild of the Agents Window: sidebar / chat / rail. */

.stage {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
}

.stage-glow {
  position: absolute;
  inset: 6% 4% 12%;
  background: radial-gradient(
    ellipse at center,
    rgb(var(--wash) / calc(var(--glow) * 0.8)),
    transparent 68%
  );
  filter: blur(30px);
  pointer-events: none;
}

.app {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 52px;
  height: 660px;
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-2xl);
  background: rgb(var(--bg-base));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* --- window chrome --- */
.app-chrome {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding-inline: 14px;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-surface));
}

.traffic {
  display: flex;
  gap: 6px;
}

.traffic i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--border-strong));
}

.chrome-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-muted));
}

.chrome-title svg {
  width: 13px;
  height: 13px;
}

.chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

/* --- sidebar --- */
.side {
  border-right: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-surface));
  padding: 12px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}

.side-head .count {
  margin-inline-start: auto;
  text-transform: none;
  letter-spacing: 0;
}

.side-head svg {
  width: 12px;
  height: 12px;
  color: rgb(var(--text-muted));
}

.side-group {
  padding: 12px 6px 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}

.side-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 0.8125rem;
  color: rgb(var(--text-secondary));
}

.side-row svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: rgb(var(--text-muted));
}

.side-row .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-row .tail {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
}

.side-row.is-active {
  background: rgb(var(--bg-elevated));
  border-color: rgb(var(--border-default));
  color: rgb(var(--text-primary));
}

.side-row.is-active svg {
  color: rgb(var(--text-secondary));
}

.side-branch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 8px 30px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
}

.side-branch svg {
  width: 11px;
  height: 11px;
}

.side-foot {
  margin-top: auto;
  border-top: 1px solid rgb(var(--border-faint));
  padding-top: 10px;
  display: grid;
  gap: 2px;
}

/* --- chat column --- */
.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgb(var(--bg-base));
}

.chat-scroll {
  flex: 1;
  padding: 20px 26px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.msg-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 11px 15px;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--border-default));
  font-size: 0.875rem;
  line-height: 1.5;
}

.reason {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(var(--text-tertiary));
  padding-inline: 2px;
}

.reason::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgb(var(--border-strong));
  vertical-align: middle;
  margin-inline-end: 9px;
}

/* tool cards */
.tool {
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-surface));
  overflow: hidden;
}

.tool-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-secondary));
}

.tool-head svg {
  width: 13px;
  height: 13px;
  color: rgb(var(--text-muted));
  flex: none;
}

.tool-name {
  color: rgb(var(--text-primary));
}

.tool-arg {
  color: rgb(var(--text-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tool-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: rgb(var(--text-muted));
}

/* diff / live-writing body */
.tool-body {
  border-top: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-base));
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
}

.dline {
  display: flex;
  gap: 10px;
  padding-inline: 12px;
  white-space: pre;
}

/* Held back so the hero turn can write them in — but only inside the mockup,
   and only when script is running. The same classes are reused as static
   markup in the review frames, which never play. */
.js .app .dline {
  opacity: 0;
}

.dline .ln {
  width: 20px;
  text-align: right;
  color: rgb(var(--text-muted) / 0.65);
  flex: none;
  user-select: none;
}

.dline .code {
  min-width: 0;
  padding-inline-start: 4px;
}

.js .app.is-playing .dline {
  animation: write-in 340ms var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes write-in {
  from {
    opacity: 0;
    transform: translateY(3px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

.dline.add {
  background: rgb(var(--success) / 0.07);
  color: rgb(var(--success));
}

.dline.del {
  background: rgb(var(--danger) / 0.06);
  color: rgb(var(--danger));
  text-decoration: line-through;
  text-decoration-color: rgb(var(--danger) / 0.35);
}

.dline.ctx {
  color: rgb(var(--text-tertiary));
}

.dline.add .code::before {
  content: "+ ";
  color: rgb(var(--success) / 0.85);
}

.dline.del .code::before {
  content: "- ";
  color: rgb(var(--danger) / 0.85);
}

.caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  vertical-align: -1px;
  background: rgb(var(--text-primary));
  animation: caret-pulse 1.2s var(--ease) infinite;
}

@keyframes caret-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* turn footer: proof chips + changed-files chip */
.turn-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

/* --- composer --- */
.composer {
  margin: 6px 20px 16px;
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-xl);
  background: rgb(var(--bg-surface));
  position: relative;
  overflow: hidden;
}

/* the thinking line — a shimmer along the composer's top edge while a turn runs */
.composer.is-running::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--text-primary) / 0.85),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.composer-input {
  padding: 13px 15px 4px;
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px 13px;
}

.ctx-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-tertiary));
  padding: 3px 7px;
  border-radius: var(--r-sm);
  border: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-elevated) / 0.6);
  white-space: nowrap;
}

.ctx-item svg {
  width: 11px;
  height: 11px;
  color: rgb(var(--text-muted));
}

.composer-send {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ring {
  width: 22px;
  height: 22px;
  flex: none;
}

.ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.ring .track {
  stroke: rgb(var(--border-default));
}

.ring .value {
  stroke: rgb(var(--text-secondary));
  transform: rotate(-90deg);
  transform-origin: center;
}

.ring-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
}

.send-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--r);
  background: rgb(var(--accent));
  color: rgb(var(--accent-ink));
  display: grid;
  place-items: center;
}

.send-btn svg {
  width: 14px;
  height: 14px;
}

/* --- right tool rail --- */
.rail {
  border-left: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}

.rail-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  color: rgb(var(--text-muted));
  transition: color 150ms, background 150ms;
}

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

.rail-btn:hover {
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-elevated));
}

.rail-btn.is-active {
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-elevated));
}

.rail-btn.is-active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgb(var(--text-primary));
}

/* hover label pill — the app's "label pill" behaviour */
.rail-btn::after {
  content: attr(data-label);
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 4px 9px;
  border-radius: var(--r);
  border: 1px solid rgb(var(--border-default));
  background: rgb(var(--bg-overlay));
  color: rgb(var(--text-secondary));
  font-family: var(--font-mono);
  font-size: 0.625rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
  box-shadow: var(--shadow-lift);
  z-index: 5;
}

.rail-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 13px;
  height: 13px;
  padding-inline: 3px;
  border-radius: 999px;
  background: rgb(var(--warning) / 0.18);
  border: 1px solid rgb(var(--warning) / 0.45);
  color: rgb(var(--warning));
  font-family: var(--font-mono);
  font-size: 0.5rem;
  line-height: 11px;
  text-align: center;
}

/* staged reveal of every chat beat (mockup only — see .app .dline) */
.js .app .beat {
  opacity: 0;
}

.js .app.is-playing .beat {
  animation: rise 380ms var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stage-hint {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* --------------------------------------------------------------- stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
  background: rgb(var(--border-faint));
  overflow: hidden;
}

.stat {
  background: rgb(var(--bg-surface));
  padding: 22px 20px;
}

.stat dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  margin-bottom: 8px;
}

.stat dd {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 560;
  letter-spacing: -0.03em;
}

.stat dd small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgb(var(--text-tertiary));
  margin-top: 3px;
}

/* ------------------------------------------------------------------- bento */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.tile {
  grid-column: span 2;
  position: relative;
  padding: 22px;
  background: rgb(var(--bg-surface));
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color 200ms var(--ease), transform 220ms var(--ease);
}

.tile:hover {
  border-color: rgb(var(--border-default));
  transform: translateY(-2px);
}

.tile::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--wash) / 0.14),
    transparent
  );
  opacity: 0;
  transition: opacity 220ms;
}

.tile:hover::after {
  opacity: 1;
}

.tile-wide {
  grid-column: span 3;
}

.tile-full {
  grid-column: span 6;
}

.tile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--border-default));
  background: rgb(var(--bg-elevated));
  color: rgb(var(--text-secondary));
  margin-bottom: 15px;
}

.tile-icon svg {
  width: 16px;
  height: 16px;
}

.tile h3 {
  margin-bottom: 8px;
}

.tile p {
  font-size: 0.875rem;
  color: rgb(var(--text-tertiary));
  line-height: 1.62;
}

.tile .pill {
  margin-top: 16px;
  margin-inline-end: 6px;
}

/* --------------------------------------------------------------- showcase */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.showcase.flip .showcase-copy {
  order: 2;
}

.showcase-copy h2 {
  margin-bottom: 16px;
}

.showcase-copy > p {
  margin-bottom: 20px;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.checklist li {
  display: flex;
  gap: 11px;
  font-size: 0.875rem;
  color: rgb(var(--text-secondary));
  line-height: 1.55;
}

.checklist svg {
  width: 15px;
  height: 15px;
  margin-top: 4px;
  flex: none;
  color: rgb(var(--text-muted));
}

.checklist strong {
  color: rgb(var(--text-primary));
  font-weight: 520;
}

/* the framed visual that pairs with showcase copy */
.frame {
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-xl);
  background: rgb(var(--bg-surface));
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-elevated) / 0.5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-muted));
}

.frame-bar svg {
  width: 13px;
  height: 13px;
}

.frame-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

/* intent-diff */
.intent-view {
  display: grid;
  gap: 10px;
}

.seg-view {
  margin-inline-start: auto;
}

.thesis {
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-elevated) / 0.45);
  overflow: hidden;
}

.thesis > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
  font-size: 0.8438rem;
}

.thesis > summary::-webkit-details-marker {
  display: none;
}

.thesis > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid rgb(var(--text-muted));
  border-bottom: 1.5px solid rgb(var(--text-muted));
  transform: rotate(-45deg);
  transition: transform 200ms var(--ease);
  flex: none;
  margin-inline-start: 2px;
}

.thesis[open] > summary::before {
  transform: rotate(45deg);
}

.thesis .t-title {
  color: rgb(var(--text-primary));
}

.thesis .t-count {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
  flex: none;
}

.thesis-body {
  border-top: 1px solid rgb(var(--border-faint));
  padding: 9px 13px 11px;
  display: grid;
  gap: 5px;
}

.filechip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-tertiary));
}

.filechip svg {
  width: 12px;
  height: 12px;
  color: rgb(var(--text-muted));
  flex: none;
}

.filechip .add {
  color: rgb(var(--success));
}

.filechip .del {
  color: rgb(var(--danger));
}

.filechip .delta {
  margin-inline-start: auto;
  padding: 0;
  background: none;
  font-size: 0.625rem;
  display: flex;
  gap: 7px;
}

.rawdiff {
  display: none;
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-base));
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  overflow-x: auto;
}

.frame[data-view="raw"] .intent-view {
  display: none;
}

.frame[data-view="raw"] .rawdiff {
  display: block;
}

/* before / after receipt */
.receipt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shot {
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgb(var(--bg-base));
}

.shot-cap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-bottom: 1px solid rgb(var(--border-faint));
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
}

.shot-cap svg {
  width: 11px;
  height: 11px;
}

.shot-canvas {
  padding: 12px;
  display: grid;
  gap: 8px;
  min-height: 136px;
  align-content: start;
}

/* the mock UI inside a "screenshot" */
.ui-row {
  height: 9px;
  border-radius: 999px;
  background: rgb(var(--text-primary) / 0.14);
}

.ui-card {
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r);
  padding: 10px;
  display: grid;
  gap: 7px;
}

.ui-card.is-bad {
  border-color: rgb(var(--danger) / 0.45);
  background: rgb(var(--danger) / 0.05);
}

.ui-card.is-good {
  border-color: rgb(var(--success) / 0.4);
  background: rgb(var(--success) / 0.05);
}

.annotation {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: rgb(var(--danger));
}

.annotation-ok {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: rgb(var(--success));
}

/* ------------------------------------------------------------------- fleet */

.fleet-list {
  display: grid;
  gap: 8px;
}

.fleet-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-elevated) / 0.4);
  font-size: 0.8125rem;
}

.fleet-row svg {
  width: 14px;
  height: 14px;
  color: rgb(var(--text-muted));
  flex: none;
}

.fleet-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

/* ----------------------------------------------------------------- context */

.ctx-diagram {
  display: grid;
  gap: 9px;
  padding: 16px;
}

.ctx-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mention {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid rgb(var(--border-default));
  background: rgb(var(--bg-elevated));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-secondary));
}

.mention svg {
  width: 11px;
  height: 11px;
  color: rgb(var(--text-muted));
}

.ctx-arrow {
  display: grid;
  place-items: center;
  color: rgb(var(--border-strong));
}

.ctx-arrow svg {
  width: 16px;
  height: 16px;
}

.ctx-prompt {
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-base));
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.9;
  color: rgb(var(--text-tertiary));
  overflow-x: auto;
}

.ctx-prompt .k {
  color: rgb(var(--text-primary));
}

.ctx-prompt .c {
  color: rgb(var(--text-muted));
}

/* ------------------------------------------------------------------ safety */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.safety-item {
  padding: 18px;
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-lg);
  background: rgb(var(--bg-surface));
}

.safety-item .tile-icon {
  margin-bottom: 13px;
  width: 28px;
  height: 28px;
}

.safety-item .tile-icon svg {
  width: 14px;
  height: 14px;
}

.safety-item h3 {
  font-size: 0.9375rem;
  margin-bottom: 6px;
}

.safety-item p {
  font-size: 0.8125rem;
  color: rgb(var(--text-tertiary));
  line-height: 1.6;
}

.cmd-gate {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgb(var(--warning) / 0.28);
  border-radius: var(--r-lg);
  background: rgb(var(--warning) / 0.05);
}

.cmd-gate code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgb(var(--danger));
  background: rgb(var(--danger) / 0.08);
  border: 1px solid rgb(var(--danger) / 0.2);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}

.cmd-gate .msg {
  font-size: 0.8125rem;
  color: rgb(var(--warning));
}

/* ---------------------------------------------------------------- terminal */

.term {
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-xl);
  background: rgb(var(--bg-base));
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid rgb(var(--border-faint));
  background: rgb(var(--bg-surface));
}

.term-bar .traffic i {
  width: 9px;
  height: 9px;
}

.term-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-muted));
}

.term-body {
  padding: 16px 18px;
  display: grid;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.term-line {
  display: grid;
  gap: 5px;
}

.term-cmd {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgb(var(--text-primary));
}

.copy-btn {
  margin-inline-start: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid rgb(var(--border-faint));
  color: rgb(var(--text-muted));
  opacity: 0;
  transition: opacity 150ms, color 150ms, border-color 150ms;
}

.term-line:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
}

.copy-btn:hover {
  color: rgb(var(--text-primary));
  border-color: rgb(var(--border-strong));
}

.copy-btn svg {
  width: 12px;
  height: 12px;
}

.copy-btn.is-done {
  color: rgb(var(--success));
  border-color: rgb(var(--success) / 0.4);
  opacity: 1;
}

.term-cmd .prompt {
  color: rgb(var(--text-muted));
}

.term-desc {
  color: rgb(var(--text-tertiary));
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  padding-inline-start: 24px;
}

/* --------------------------------------------------------------- providers */

.providers {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.provider {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-md);
  background: rgb(var(--bg-surface));
  font-size: 0.8438rem;
  color: rgb(var(--text-secondary));
  transition: border-color 180ms, color 180ms;
}

.provider:hover {
  border-color: rgb(var(--border-default));
  color: rgb(var(--text-primary));
}

.provider i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--text-muted));
  flex: none;
}

/* ------------------------------------------------------------------- table */

.table-wrap {
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgb(var(--bg-surface));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th,
td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid rgb(var(--border-faint));
}

th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  font-weight: 500;
  background: rgb(var(--bg-elevated) / 0.4);
}

tbody tr:last-child td {
  border-bottom: 0;
}

td:first-child code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-sm);
  padding: 3px 7px;
  white-space: nowrap;
}

td {
  color: rgb(var(--text-tertiary));
}

/* -------------------------------------------------------------- principles */

/* 1px seams over a border-coloured backing — so the track count has to divide
   the item count evenly (6 items → 3 columns), or the empty cells show. That's
   why this is a fixed count with explicit breakpoints rather than auto-fit. */
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgb(var(--border-faint));
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
  overflow: hidden;
}

.principle {
  background: rgb(var(--bg-surface));
  padding: 24px 20px;
}

.principle .idx {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgb(var(--text-muted));
  display: block;
  margin-bottom: 12px;
}

.principle h3 {
  font-size: 0.9375rem;
  margin-bottom: 7px;
}

.principle p {
  font-size: 0.8125rem;
  color: rgb(var(--text-tertiary));
  line-height: 1.6;
}

/* -------------------------------------------------------------------- cta */

.cta {
  position: relative;
  border: 1px solid rgb(var(--border-default));
  border-radius: var(--r-3xl);
  background: rgb(var(--bg-surface));
  padding: clamp(36px, 6vw, 68px);
  text-align: center;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 420px;
  background: radial-gradient(
    ellipse at center,
    rgb(var(--wash) / calc(var(--glow) * 0.85)),
    transparent 68%
  );
  pointer-events: none;
}

.cta > * {
  position: relative;
}

.cta h2 {
  margin-bottom: 16px;
}

.cta .lede {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 30px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: grid;
  gap: 1px;
  background: rgb(var(--border-faint));
  border: 1px solid rgb(var(--border-faint));
  border-radius: var(--r-xl);
  overflow: hidden;
}

.qa {
  background: rgb(var(--bg-surface));
}

.qa > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(var(--text-primary));
}

.qa > summary::-webkit-details-marker {
  display: none;
}

.qa > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-start: auto;
  border-right: 1.5px solid rgb(var(--text-muted));
  border-bottom: 1.5px solid rgb(var(--text-muted));
  transform: rotate(45deg);
  transition: transform 220ms var(--ease);
  flex: none;
}

.qa[open] > summary::after {
  transform: rotate(-135deg);
}

.qa > summary:hover {
  color: rgb(var(--text-primary));
  background: rgb(var(--bg-elevated) / 0.4);
}

.qa-body {
  padding: 0 20px 19px;
  font-size: 0.875rem;
  color: rgb(var(--text-tertiary));
  line-height: 1.65;
  max-width: 78ch;
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid rgb(var(--border-faint));
  padding-block: 44px 36px;
  background: rgb(var(--bg-surface) / 0.4);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}

.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  font-weight: 500;
  margin-bottom: 14px;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer ul a {
  font-size: 0.8438rem;
  color: rgb(var(--text-tertiary));
  transition: color 150ms;
}

.footer ul a:hover {
  color: rgb(var(--text-primary));
}

.footer-about p {
  font-size: 0.8438rem;
  color: rgb(var(--text-tertiary));
  max-width: 34ch;
  margin-top: 14px;
  line-height: 1.6;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--border-faint));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgb(var(--text-muted));
}

.footer-base .spacer {
  margin-inline-start: auto;
}

.footer-base .mark {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------- scroll reveal */

.reveal {
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* Hidden states are gated on `html.js`, which is set by an inline head script.
   Without JavaScript the page is authored fully visible — nothing below the
   fold depends on script to be readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] {
  transition-delay: 70ms;
}
.reveal[data-delay="2"] {
  transition-delay: 140ms;
}
.reveal[data-delay="3"] {
  transition-delay: 210ms;
}
.reveal[data-delay="4"] {
  transition-delay: 280ms;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1120px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-end .seg,
  .nav-end .btn-primary {
    display: none;
  }

  .showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .showcase.flip .showcase-copy {
    order: 0;
  }

  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tile,
  .tile-wide {
    grid-column: span 2;
  }

  .tile-full {
    grid-column: span 4;
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    height: 520px;
  }

  .side,
  .rail {
    display: none;
  }

  .chat-scroll {
    padding-inline: 16px;
  }

  /* the mockup is narrower here — trim the turn to its load-bearing beats */
  .chat-scroll > :nth-child(2),
  .chat-scroll > :nth-child(3) {
    display: none;
  }

  .tool-body .dline:nth-child(n + 5) {
    display: none;
  }

  /* diff lines are `white-space: pre`; let the overflow read as a fade
     instead of a hard mid-character clip */
  .tool-body {
    mask-image: linear-gradient(to right, #000 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
  }

  /* the chrome bar is 40px — drop the parts that don't fit rather than wrap */
  .chrome-title .dim,
  .chrome-right .pill:not(.pill-accent) {
    display: none;
  }

  .composer {
    margin-inline: 12px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile,
  .tile-wide,
  .tile-full {
    grid-column: span 1;
  }

  .receipt {
    grid-template-columns: 1fr;
  }

  /* the headline is two deliberate, nowrap lines: the type has to come down
     before the viewport does, or the second line runs past the gutter */
  .hero .display {
    font-size: clamp(2.1rem, 7.4vw, 3.2rem);
  }
}

@media (max-height: 720px) {
  .hero-cue {
    display: none;
  }

  .hero-intro {
    padding-top: 40px;
    padding-bottom: calc(40px + var(--nav-h));
  }
}

@media (max-width: 640px) {
  .hero-cta .btn,
  .cta-actions .btn {
    flex: 1 1 100%;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .msg-user {
    max-width: 92%;
  }

  /* keep the composer bar on one line — the branch chip is the one to lose */
  .composer-bar .ctx-item:nth-child(2) {
    display: none;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .app {
    height: 500px;
  }
}

/* --------------------------------------------------------------- utilities */

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

/* status-only colour, on top of the monochrome ink */
.ok {
  color: rgb(var(--success));
}

.dim {
  color: rgb(var(--text-muted));
}

.hi {
  color: rgb(var(--text-primary));
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .beat,
  .dline,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}