/* ============================================================================
   flock · marketing site
   ----------------------------------------------------------------------------
   The page stylesheet. brand.css is the foundation and must load first:

     <link rel="stylesheet" href="/brand.css" />
     <link rel="stylesheet" href="/style.css" />

   brand.css owns the three self-hosted faces (Outfit, Fraunces, IBM Plex
   Mono), the Daybreak and Nightfall colour tokens, and the logotype
   component (.wordmark / .wordmark-mark). Nothing of the sort lives here.

   The legacy token names this file has always shipped (--bg, --text-hi,
   --mint and friends) are kept so existing pages carry over. They now
   resolve to brand tokens, so both themes follow brand.css and there is no
   second palette to keep in step.
   ============================================================================ */

:root {
  /* Legacy names, brand values. Daybreak is the default. Nightfall arrives
     through brand.css on :root[data-theme="dark"], which reassigns the
     tokens below by reference, so nothing here has to restate it. */
  --bg:           var(--paper);
  --bg-card:      var(--elev);
  --bg-chrome:    var(--paper-2);
  --mint:         var(--action);
  --yellow:       var(--warn);
  --blue:         var(--action-deep);
  --orange:       var(--bad);
  --text-hi:      var(--ink);
  --text-mid:     var(--slate);
  --text-low:     var(--slate-soft);
  --text-ghost:   color-mix(in srgb, var(--slate-soft) 62%, transparent);
  --border:       var(--hair);
  --border-hover: color-mix(in srgb, var(--ink) 20%, transparent);
  /* --nav-bg is defined by brand.css in both themes. */

  /* Type roles. Outfit for UI and body, Fraunces for display headings only,
     IBM Plex Mono for code, paths and tracked metadata labels. The old
     system stacks are gone; SF is not used anywhere. The fallbacks repeat
     brand.css so a page that forgets the brand.css link still lands on the
     right shape of face instead of on nothing at all. */
  --font-sans:  var(--ui, "Outfit", "Helvetica Neue", Arial, sans-serif);
  --font-serif: var(--serif, "Fraunces", "Iowan Old Style", Georgia, serif);
  --font-mono:  var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace);
}

/* The app "screenshots" (hero, multiplayer, knowledge-graph mockups) carry
   the product's own palette, not the site's. Re-pinning it locally means
   every mockup child that reads these vars follows, with no per-element
   overrides. This is the dark base; the rule below swaps it for the light
   one whenever the page is not in Nightfall. */
.mockup-window,
.mini-window,
.kg-graph-mock {
  --bg:          #06080c;
  --bg-card:     #0b0e15;
  --bg-chrome:   #0d1119;
  --surface:     #08090e;
  --mint:        #4fffb0;
  --yellow:      #e8ff3a;
  --blue:        #4daffe;
  --orange:      #ff7030;
  /* Workspace colour-coding — theme-aware so the accents stay readable when
     the mockup follows the site into light mode. */
  --acc-green:   #4fffb0;
  --acc-yellow:  #e8ff3a;
  --acc-blue:    #4daffe;
  --text-hi:     #f0f4f8;
  --text-mid:    #6b7588;
  --text-low:    #4a5266;
  --text-ghost:  #2e3447;
  --border:      rgba(255, 255, 255, 0.05);
  --border-hover:rgba(255, 255, 255, 0.09);
  color: var(--text-hi);
}

/* Daybreak is the default theme now, so the app "screenshots" follow the page
   into the product's real light theme (blue accent, near-white chrome) unless
   the site is in Nightfall, or unless a mockup has an explicit override from
   its own in-window theme switcher (data-mocktheme). */
:root:not([data-theme="dark"]) .mockup-window:not([data-mocktheme]),
:root:not([data-theme="dark"]) .mini-window,
:root:not([data-theme="dark"]) .kg-graph-mock,
.mockup-window[data-mocktheme="light"] {
  --bg:          #ffffff;
  --bg-card:     #f4f6f9;
  --bg-chrome:   #eef1f5;
  --surface:     #f5f7fa;
  --mint:        #2f6bd6;
  --yellow:      #b07a00;
  --blue:        #2f6bd6;
  --orange:      #c2410c;
  --acc-green:   #0e9e63;
  --acc-yellow:  #a06d00;
  --acc-blue:    #1c64d1;
  --text-hi:     #1a2230;
  --text-mid:    #545f6e;
  --text-low:    #6c7686;
  --text-ghost:  #8a94a3;
  --border:      rgba(0, 0, 0, 0.08);
  --border-hover:rgba(0, 0, 0, 0.14);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}

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

/* ─── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 56px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* The nav logotype is the .wordmark component from brand.css. Size it with
   font-size on the element: 19px is the shipping size for nav and footer. */

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  color: var(--text-mid);
}

.nav-links a:hover { color: var(--text-hi); }

.nav-download {
  background: var(--mint);
  color: var(--bg) !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
  transition: opacity 0.12s ease-out;
}
.nav-download:hover { opacity: 0.88; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.12s ease-out, border-color 0.12s ease-out, background 0.12s ease-out;
}
.theme-toggle:hover { color: var(--text-hi); border-color: var(--text-mid); }
.theme-toggle svg { width: 15px; height: 15px; }
/* Daybreak is the default, so the button offers the moon first. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }

/* Themes showcase (under the hero mockup) */

/* BETA badge */
.beta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
  vertical-align: middle;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 88px 40px 56px;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-mid);
  margin-bottom: 24px;
}

.hero-eyebrow-beta { color: var(--mint); }

.hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--text-hi);
  margin-bottom: 24px;
}

.hero-title em {
  font-style: italic;
  color: var(--mint);
}





.hero-sub {
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.6;
  /* Wider measure so the pitch lands in ~3 lines, not a narrow 5-line column. */
  max-width: 640px;
  margin: 0 auto 30px;
  text-wrap: balance;
}

/* Capability chips — each feature is its own crafted pill with a mint tick,
   rather than a cryptic mono run-on. Reads as a considered product, not a
   dumped feature list. */
.hero-caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
}
.hero-caps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--text-mid);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.hero-caps li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mint) 55%, transparent);
}
.hero-caps li:hover {
  border-color: var(--border-hover);
  color: var(--text-hi);
  background: var(--bg-chrome);
}

@media (max-width: 560px) {
  .hero-caps { gap: 6px; }
  .hero-caps li { font-size: 11px; padding: 5px 11px; }
}

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

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn-download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--mint);
  color: var(--bg);
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  transition: opacity 0.12s ease-out, transform 0.1s ease-out;
}

.btn-download-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.btn-download:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-download svg.apple-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.btn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: color-mix(in srgb, var(--bg), transparent 42%);
  letter-spacing: 0.2px;
}

.btn-download-large {
  padding: 14px 28px;
  font-size: 16px;
}

.btn-ghost {
  font-size: 14px;
  color: var(--text-mid);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-hover);
  transition: color 0.12s ease-out, border-color 0.12s ease-out;
}
.btn-ghost:hover {
  color: var(--text-hi);
  border-color: var(--text-mid);
}


/* ─── Mockup ─────────────────────────────────────────────────────────────── */

.mockup-section {
  padding: 0 40px 80px;
}

.mockup-window {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-hover);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 60px color-mix(in srgb, var(--mint) 4%, transparent);
}

.mockup-titlebar {
  background: var(--surface);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.mockup-ws-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
  margin-left: 8px;
}

.mockup-body {
  display: flex;
  height: 320px;
  background: var(--bg);
}

.mockup-sidebar {
  width: 188px;
  min-width: 188px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mock-brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--mint);
  padding: 12px 16px 0;
  line-height: 1;
}

.mock-tagline {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--text-ghost);
  padding: 2px 16px 8px;
}

.mock-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mock-tab {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-low);
  padding: 6px 0 5px;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.mock-tab.active {
  color: var(--text-hi);
  border-bottom-color: var(--mint);
}

.mock-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--bg);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
}

.mock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-low);
}

.mock-count {
  color: var(--text-ghost);
  letter-spacing: 1px;
}

.mock-add {
  color: var(--text-low);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Workspace cards — exact match to .workspace-card */
.mock-ws-card {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid transparent;
  position: relative;
}

.mock-ws-card.focused {
  background: var(--bg-chrome);
  border-left-color: var(--accent, var(--mint));
}

.mock-ws-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-ws-name-text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, var(--mint));
  letter-spacing: -0.1px;
}

.mock-ws-meta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-low);
}

.mock-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0 0;
  flex-shrink: 0;
}

/* Agent group — exact match */
.mock-agent-group { padding-bottom: 4px; }

.mock-group-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 3px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent, var(--text-mid));
}

.mock-group-bar {
  display: inline-block;
  width: 3px;
  height: 10px;
  background: var(--accent, var(--mint));
  border-radius: 2px;
  flex-shrink: 0;
}

.mock-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 14px 2px 24px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-mid);
}

.mock-agent-kind { color: var(--text-mid); }

.mock-status {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.3px;
}
.mock-status.working { color: var(--mint); }
.mock-status.idle    { color: var(--text-ghost); }

/* PR rows — exact match */
.mock-pr-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 14px;
}

.mock-pr-num {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-ghost);
  flex-shrink: 0;
  padding-top: 1px;
}

.mock-pr-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mock-pr-title {
  font-size: 9.5px;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-pr-repo {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--text-low);
}

.mockup-panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.mockup-pane {
  background: var(--bg);
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}

.mockup-pane.focused {
  border-color: var(--accent, var(--mint));
  box-shadow: inset 0 0 0 1px var(--accent, var(--mint));
}

.pane-term {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-mid);
}

.pane-term .prompt { color: var(--mint); }
.pane-term .mint   { color: var(--mint); }
.pane-term .yellow { color: var(--yellow); }
.pane-term .dim    { color: var(--text-ghost); }
.pane-term .cursor {
  color: var(--text-hi);
  animation: blink 1s step-end infinite;
}

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

/* ─── Interactive app preview ─────────────────────────────────────────────── */

.mockup-body { height: 440px; }

/* Titlebar "session started" pill (mirrors the app's toast). */
.mockup-pill {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-low);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
}
.mockup-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 6px var(--mint);
}

.mock-brand-dot { color: var(--yellow); }

/* Main column: top bar + panes. */
.mockup-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
}
.mock-branch { color: var(--mint); }
.mock-path { color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-topbar-spacer { flex: 1; }
.mock-toptab {
  color: var(--text-low);
  padding: 2px 8px;
  border-radius: 5px;
}
.mock-toptab.active { color: var(--text-hi); background: rgba(255, 255, 255, 0.06); }
.mock-toptab-add { color: var(--text-ghost); padding: 0 4px; }

/* Two panes side by side. */
.mockup-panes.mock-panes-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.mock-panes-2 .pane-term {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Claude Code welcome banner inside a pane. */
.cc-welcome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cc-logo {
  font-size: 20px;
  color: #d98c7a; /* Claude Code's warm mascot tint */
  line-height: 1;
  flex-shrink: 0;
}
.cc-welcome-text { line-height: 1.5; }
.cc-welcome-text strong { color: var(--text-hi); font-weight: 700; }

.cc-line { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.cc-line.dim { color: var(--text-ghost); }
.cc-hi { color: var(--text-hi); }
.cc-hint { color: color-mix(in srgb, var(--orange) 80%, transparent); margin-top: 8px; opacity: 0.85; }

.cc-user { color: var(--text-hi); margin-top: 8px; }
.cc-think { color: var(--text-mid); margin-top: 4px; }
.cc-resp { color: var(--text-mid); margin-top: 4px; }
.cc-link {
  color: var(--mint);
  border-bottom: 1px solid color-mix(in srgb, var(--mint) 40%, transparent);
  font-weight: 600;
}
.cc-link:hover { border-bottom-color: var(--mint); }

/* Interactive prompt line. */
.cc-input-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease-out;
}
.cc-input-line:focus-within { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.cc-caret { flex-shrink: 0; }
.cc-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 0;
}
.cc-input::placeholder { color: var(--text-ghost); }
.cc-send {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--mint);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease-out;
}
.cc-send:hover { opacity: 0.85; }

/* Sidebar extras to match the app. */
.mock-agent-row.active { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.mock-graph-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 16px 6px; }
.mock-graph-chip {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-low);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.mock-graph-latest {
  margin: 2px 12px 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--mint);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.015);
}
.mock-graph-kind { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: var(--mint); }
.mock-graph-label { font-size: 11px; color: var(--text-hi); margin: 2px 0; }
.mock-graph-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); }

/* Taller window + scrollable tab body with pinned profile footer. */
.mockup-window [hidden] { display: none !important; }
.mockup-body { height: 560px; }
.mock-tab-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mock-panel { padding-bottom: 8px; }

/* PR rows in the sidebar. */
.mock-pr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.1s ease-out;
}
.mock-pr-row:hover { background: rgba(255, 255, 255, 0.03); }
.mock-pr-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); flex-shrink: 0; }
.mock-pr-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mock-pr-title { font-size: 11px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-pr-author { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); }
.mock-pr-review { font-family: var(--font-mono); font-size: 9px; color: var(--mint); flex-shrink: 0; opacity: 0.85; }

.mock-live-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 15%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}
.mock-observe-card .mock-ws-card-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }

/* Friends panel. */
.mock-friend-add { display: flex; gap: 6px; padding: 8px 14px 4px; }
.mock-friend-input {
  flex: 1; min-width: 0;
  background: var(--bg-chrome);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mid);
}
.mock-friend-input::placeholder { color: var(--text-ghost); }
.mock-friend-addbtn {
  width: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-mid); font-size: 14px;
}
.mock-friend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.1s ease-out;
}
.mock-friend-row:hover { background: rgba(255, 255, 255, 0.03); }
.mock-friend-av { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.mock-friend-av.offline { background: var(--text-ghost); opacity: 0.5; }
.mock-friend-handle { font-size: 12px; color: var(--text-hi); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-friend-handle.offline { color: var(--text-low); font-weight: 400; }
.mock-friend-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); flex-shrink: 0; }
/* Online rows carry three action buttons; drop the meta text to make room. */
.mock-friend-row:has(.mock-friend-actions) .mock-friend-meta { display: none; }
.mock-friend-actions { display: flex; gap: 3px; margin-left: 4px; flex-shrink: 0; }
.mock-friend-row:not(:hover) .mock-friend-actions { opacity: 0.6; }
.mock-friend-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-mid); cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.mock-friend-btn svg { width: 11px; height: 11px; }
.mock-friend-btn:hover { color: var(--mint); border-color: var(--mint); }
.mock-friend-hint { font-size: 10px; color: var(--text-ghost); padding: 10px 14px 4px; line-height: 1.4; }
.mock-friend-hint strong { color: var(--mint); }

/* Profile footer. */
.mock-footer {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.mock-footer-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 20%, var(--bg));
  color: var(--mint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.mock-footer-info { flex: 1; min-width: 0; }
.mock-footer-handle { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-hi); line-height: 1.1; }
.mock-footer-handle .mock-at { color: var(--text-low); }
.mock-footer-tier { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: var(--mint); text-transform: uppercase; margin-top: 1px; }
.mock-footer-gear { color: var(--text-ghost); display: flex; }

/* Main-area views. */
.mock-views { flex: 1; min-height: 0; display: flex; }
.mock-view { flex: 1; min-width: 0; display: none; }
.mock-view.active { display: flex; }

/* PR review view. */
.mock-pr-view { flex: 1; padding: 18px 22px; overflow-y: auto; font-family: var(--font-sans); }
.mock-pr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mock-back {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 9px; cursor: pointer;
}
.mock-back:hover { color: var(--text-hi); border-color: var(--text-mid); }
.mock-pr-state {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent);
  padding: 2px 8px; border-radius: 999px;
}
.mock-pr-view-title { font-family: var(--font-serif); font-size: 20px; color: var(--text-hi); flex-basis: 100%; }
.mock-pr-view-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); }
.mock-pr-checks {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-chrome); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 14px;
}
.mock-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mid); }
.mock-check-dot { width: 14px; text-align: center; }
.mock-check-dot.ok { color: var(--mint); }
.mock-check-dot.run { color: var(--yellow); }
.mock-check-time { margin-left: auto; color: var(--text-ghost); }
.mock-diff { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.mock-diff-file {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mid);
  padding: 8px 12px; background: var(--bg-chrome); border-bottom: 1px solid var(--border);
}
.mock-diff-stat { color: var(--mint); margin-left: 6px; }
.mock-diff-body { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; padding: 10px 12px; color: var(--text-mid); overflow-x: auto; }
.d-add { color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent); display: block; white-space: pre; }
.d-ctx { color: var(--text-low); display: block; white-space: pre; }
.mock-pr-review-cta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--bg); background: var(--mint); border: none; border-radius: 6px;
  padding: 9px 16px; cursor: pointer;
}
.mock-pr-review-cta:hover { opacity: 0.9; }

/* Observe / shared session view. */
.mock-observe-view { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mock-observe-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.mock-observe-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-hi); }
.mock-observe-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); margin-left: auto; }
.mock-observe-term { flex: 1; padding: 14px 18px; overflow-y: auto; }
.mock-observe-foot {
  font-size: 11px; color: var(--text-low);
  padding: 10px 18px; border-top: 1px solid var(--border);
}

/* ─── Boutique mockup polish: wider window, theme switch, goose brand ─────── */

/* Wider + taller so the whole product reads at a glance. */
.mockup-window { max-width: 1180px; }
.mockup-body { height: 620px; }
.mockup-sidebar { width: 216px; min-width: 216px; }

/* Titlebar theme switcher — four palette swatches. */
.mock-theme-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.mock-theme {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--sw, #0b0e15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.mock-theme:hover { transform: scale(1.15); }
.mock-theme.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--mint);
}

/* Per-theme palettes for the mockup window (data-mocktheme on .mockup-window).
   Each re-pins the same tokens .mockup-window sets so every child follows. */
.mockup-window[data-mocktheme="midnight"] {
  --bg:          #070b16;
  --bg-card:     #0c1426;
  --bg-chrome:   #0e1830;
  --surface:     #060a14;
  --mint:        #5cf0ff;
  --yellow:      #ffd45c;
  --blue:        #6aa8ff;
  --text-hi:     #eaf1ff;
  --text-mid:    #7986a8;
  --text-low:    #515d80;
  --text-ghost:  #313a58;
  --border:      rgba(120, 150, 255, 0.09);
  --border-hover:rgba(120, 150, 255, 0.16);
}
.mockup-window[data-mocktheme="contrast"] {
  --bg:          #000000;
  --bg-card:     #0a0a0a;
  --bg-chrome:   #111111;
  --surface:     #050505;
  --mint:        #00ffa3;
  --yellow:      #ffe600;
  --blue:        #4db6ff;
  --text-hi:     #ffffff;
  --text-mid:    #b8b8b8;
  --text-low:    #808080;
  --text-ghost:  #4a4a4a;
  --border:      rgba(255, 255, 255, 0.14);
  --border-hover:rgba(255, 255, 255, 0.24);
}
.mockup-titlebar,
.mockup-sidebar,
.mock-topbar,
.mock-footer,
.mockup-pane,
.pane-term,
.mock-ws-name-text,
.mock-group-name,
.mock-status,
.mock-branch,
.mock-brand { transition: background 0.2s ease-out, color 0.2s ease-out; }

/* Goose + wordmark lockup in the sidebar brand. */
.mock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-goose { flex-shrink: 0; }
.mock-brand-text { line-height: 1; }

/* Colored workspace dot per --accent. */
.mock-ws-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--mint));
  box-shadow: 0 0 6px var(--accent, var(--mint));
  flex-shrink: 0;
}
.mock-ws-card-name { display: flex; align-items: center; gap: 6px; }

/* Awaiting-input status (mirrors the app's yellow "awaiting" state). */
.mock-status.awaiting { color: var(--yellow); }

/* Footer goose avatar (the goose himself). */
.mock-footer-av--goose {
  background: transparent;
  box-shadow: none;
}

/* Main area must position the toast relative to itself. */
.mockup-main { position: relative; }

/* New-PR toast — slides down from under the topbar. */
.mock-toast {
  position: absolute;
  top: 10px; right: 14px; z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 9px 10px 9px 12px;
  background: color-mix(in srgb, var(--bg-chrome) 92%, var(--mint));
  border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--border));
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.02);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mock-toast.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mock-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 8px var(--mint);
  flex-shrink: 0;
  animation: toastPulse 1.6s ease-in-out infinite;
}
@keyframes toastPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.72); }
}
.mock-toast-body { min-width: 0; }
.mock-toast-title { font-family: var(--font-mono); font-size: 11px; color: var(--text-hi); }
.mock-toast-num { color: var(--mint); }
.mock-toast-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-low); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-toast-btn {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--bg); background: var(--mint);
  border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer;
  transition: opacity 0.12s;
}
.mock-toast-btn:hover { opacity: 0.9; }
.mock-toast-x {
  flex-shrink: 0;
  background: none; border: none; color: var(--text-low);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.mock-toast-x:hover { color: var(--text-hi); }

/* Newly-arrived PR row flashes in. */
.mock-pr-new { animation: prFlash 1.4s ease-out; }
@keyframes prFlash {
  0%   { background: color-mix(in srgb, var(--mint) 22%, transparent); }
  100% { background: transparent; }
}

/* CTA turns into a live "agent reviewing" indicator. */
.mock-pr-review-cta.reviewing {
  background: var(--bg-chrome);
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--border));
  display: inline-flex; align-items: center; gap: 8px;
}
.mock-pr-review-cta.done {
  background: color-mix(in srgb, var(--mint) 14%, transparent);
  color: var(--mint);
  border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--border));
}
.mock-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  border-top-color: var(--yellow);
  display: inline-block;
  animation: mockSpin 0.7s linear infinite;
}
@keyframes mockSpin { to { transform: rotate(360deg); } }

/* ─── Interactive Graph Explorer ─────────────────────────────────────────── */

.ge-section { padding: 40px 40px 100px; }

.ge-window {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-hover);
  background: var(--bg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03);
}

.ge-head { padding: 22px 26px 14px; }
.ge-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--text-low); margin-bottom: 8px;
}
.ge-title {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 34px; color: var(--mint); letter-spacing: -0.5px; line-height: 1;
}
.ge-sub { font-size: 13px; color: var(--text-mid); margin-top: 8px; }

.ge-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 26px 16px;
}
.ge-scope { display: inline-flex; gap: 2px; background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
.ge-scope-right { margin-left: auto; }
.ge-scope-btn {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
  background: none; border: none; border-radius: 4px; padding: 5px 11px; cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.ge-scope-btn.active { color: var(--bg); background: var(--mint); }
.ge-scope-btn:not(.active):hover { color: var(--text-hi); }

.ge-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.ge-legend-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mid);
  background: var(--bg-chrome); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 9px 3px 7px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, opacity 0.12s;
}
.ge-legend-chip .ge-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ge-legend-chip.active { border-color: var(--c); color: var(--text-hi); }
.ge-legend-chip.dim { opacity: 0.4; }

.ge-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  border-top: 1px solid var(--border);
  height: 520px;
}
.ge-canvas-wrap {
  position: relative;
  background:
    radial-gradient(circle at 42% 46%, color-mix(in srgb, var(--mint) 6%, transparent), transparent 60%),
    var(--bg);
  overflow: hidden;
  cursor: grab;
}
.ge-canvas-wrap:active { cursor: grabbing; }
.ge-canvas { width: 100%; height: 100%; display: block; }
.ge-hint {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-ghost);
  pointer-events: none;
}

/* SVG node/edge primitives. */
.ge-edge { stroke: var(--text-low); stroke-opacity: 0.32; stroke-width: 1; transition: stroke 0.15s, stroke-opacity 0.15s, stroke-width 0.15s; }
.ge-edge.hot { stroke: var(--mint); stroke-opacity: 0.7; stroke-width: 1.6; }
.ge-edge.faded { stroke-opacity: 0.08; }
.ge-node { cursor: pointer; }
.ge-node circle { stroke: var(--bg); stroke-width: 2; transition: r 0.15s ease-out; }
.ge-node text {
  font-family: var(--font-mono); font-size: 10px; fill: var(--text-mid);
  pointer-events: none; transition: fill 0.15s;
}
.ge-node.hot text { fill: var(--text-hi); }
.ge-node.sel circle { stroke: var(--text-hi); stroke-width: 2.5; }
.ge-node.faded { opacity: 0.28; }

/* Detail panel. */
.ge-detail {
  border-left: 1px solid var(--border);
  padding: 22px;
  overflow-y: auto;
  background: var(--surface);
}
.ge-detail-empty { font-family: var(--font-mono); font-size: 11px; color: var(--text-ghost); line-height: 1.7; }
.ge-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c, var(--mint));
  border: 1px solid color-mix(in srgb, var(--c, var(--mint)) 45%, transparent);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 10px;
}
.ge-detail-name { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--text-hi); line-height: 1.15; margin-bottom: 4px; }
.ge-detail-body { font-family: var(--font-mono); font-size: 12px; color: var(--text-mid); line-height: 1.6; margin: 10px 0 16px; }
.ge-meta-grid { display: flex; gap: 22px; margin-bottom: 18px; flex-wrap: wrap; }
.ge-meta-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1px; color: var(--text-low); text-transform: uppercase; }
.ge-meta-v { font-family: var(--font-mono); font-size: 12px; color: var(--text-mid); margin-top: 3px; }
.ge-conn-head { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.5px; color: var(--text-low); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ge-conn-count { color: var(--text-ghost); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.ge-conn-group { margin-bottom: 12px; }
.ge-conn-rel { font-family: var(--font-mono); font-size: 9.5px; color: var(--mint); margin-bottom: 6px; }
.ge-conn-rel.in { color: var(--blue); }
.ge-conn-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ge-conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mid);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.ge-conn-pill:hover { border-color: var(--text-mid); color: var(--text-hi); }
.ge-conn-pill .ge-swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

@media (max-width: 820px) {
  .ge-main { grid-template-columns: 1fr; height: auto; }
  .ge-canvas-wrap { height: 380px; }
  .ge-detail { border-left: none; border-top: 1px solid var(--border); max-height: 260px; }
}

/* ─── Multiplayer section ────────────────────────────────────────────────── */

.multi-section {
  padding: 76px 40px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.multi-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 80px;
}

.multi-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-ghost);
  margin-bottom: 20px;
}

.multi-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--text-hi);
  margin-bottom: 20px;
}

.multi-title em {
  font-style: italic;
  color: var(--mint);
}

.multi-sub {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ─── Each mode (Observe / Handoff / Co-pilot) ───────────────────────────── */

.multi-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.multi-mode-flip {
  direction: rtl;
}
.multi-mode-flip > * {
  direction: ltr;
}

.multi-mode-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}

.multi-mode-copy h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.7px;
  color: var(--text-hi);
  margin-bottom: 16px;
}

.multi-mode-copy p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 24px;
}

.multi-mode-copy p em {
  font-style: italic;
  color: var(--text-hi);
}

.multi-mode-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multi-mode-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.2px;
}

.bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Mini windows (mockups inside multi-mode) ───────────────────────────── */

.mini-window {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-hover);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 40px color-mix(in srgb, var(--mint) 3%, transparent);
  background: var(--bg);
}

.mini-window-wide { width: 100%; }

.mini-titlebar {
  background: var(--surface);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
}

.mini-ws {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-low);
  margin-left: 8px;
}

/* ─── Observe mockup ─────────────────────────────────────────────────────── */

.observe-mock {
  padding: 0;
}

.observe-mock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--mint) 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mint) 10%, transparent);
}

.live-badge {
  background: color-mix(in srgb, var(--mint) 15%, transparent);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--mint) 25%, transparent);
}

.live-badge-sm {
  font-size: 8px;
  padding: 1px 4px;
}

/* Secure mode: chip matching the in-app "jailed" pane badge */
.jail-chip {
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
}

.observe-mock-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mid);
}

.observe-mock-term {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-mid);
  padding: 12px 14px;
}

.toast-mock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-chrome);
  border: 1px solid var(--border-hover);
  border-top: 1px solid color-mix(in srgb, var(--mint) 20%, transparent);
  border-radius: 0 0 10px 10px;
  padding: 10px 14px;
  margin-top: -1px;
}

.toast-avatar-mock {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.toast-mock-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.3;
}

.toast-mock-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-ghost);
  margin-top: 2px;
}

.toast-mock-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.toast-accept {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--mint);
  color: #040608;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  cursor: default;
}

.toast-decline {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-low);
  padding: 4px 8px;
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  cursor: default;
}

/* ─── Handoff / Task mockup ──────────────────────────────────────────────── */

.task-mock {
  display: flex;
  flex-direction: column;
}

.task-mock-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}

.task-mock-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-ghost);
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}

.task-mock-to {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
}

.task-mock-body {
  padding: 12px 16px;
}

.task-mock-textarea {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mid);
  line-height: 1.7;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

.task-mock-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-ghost);
}

.task-mock-footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}

.task-mock-cancel {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
  padding: 5px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  cursor: default;
}

.task-mock-send {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--mint);
  color: #040608;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: 700;
  cursor: default;
}

/* ─── Co-pilot mockup ────────────────────────────────────────────────────── */

.copilot-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.copilot-mock-tile {
  background: var(--bg);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
}

.copilot-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-low);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}

/* ─── Voice mockups ──────────────────────────────────────────────────────── */

/* Push-to-talk: a status bar with a live waveform under the terminal. */
.voice-bar-mock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
}
.voice-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent);
  flex-shrink: 0;
  animation: voice-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes voice-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  flex: 1;
}
.voice-wave i {
  width: 3px;
  height: 25%;
  border-radius: 2px;
  background: var(--mint);
  animation: voice-wave 1s ease-in-out infinite;
}
.voice-wave i:nth-child(even) { background: color-mix(in srgb, var(--mint) 60%, transparent); }
.voice-wave i:nth-child(2n)  { animation-delay: 0.12s; }
.voice-wave i:nth-child(3n)  { animation-delay: 0.28s; }
.voice-wave i:nth-child(4n)  { animation-delay: 0.42s; }
.voice-wave i:nth-child(5n)  { animation-delay: 0.08s; }
@keyframes voice-wave { 0%, 100% { height: 18%; } 50% { height: 92%; } }

.voice-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-low);
  white-space: nowrap;
  flex-shrink: 0;
}

/* On-device: the model card. */
.voice-model-mock {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 92px;
}
.voice-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voice-model-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-hi);
}
.voice-model-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
}
.voice-model-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.voice-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--text-mid);
  border: 1px solid var(--border-hover);
  white-space: nowrap;
}
.voice-badge-ok {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 35%, transparent);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}

/* In flow: dictation stats. */
.voice-stats-mock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  padding: 1px;
  min-height: 92px;
}
.voice-stat {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 8px;
}
.voice-stat-num {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--mint);
}
/* The unit rides with the number, so the figure reads at a glance. */
.voice-stat-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-mid);
  margin-left: 5px;
}
.voice-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-low);
  text-align: center;
}

/* ─── Open source ────────────────────────────────────────────────────────── */

.oss-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 40px;
  text-align: center;
}

.oss-inner {
  max-width: 560px;
  margin: 0 auto;
}

.oss-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-ghost);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.oss-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}

.oss-section p {
  color: var(--text-mid);
  font-size: 15px;
  margin-bottom: 28px;
  line-height: 1.65;
}

/* ─── CTA ────────────────────────────────────────────────────────────────── */

.cta-section {
  padding: 100px 40px;
  text-align: center;
}

.cta-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.8px;
  margin-bottom: 36px;
}

/* ─── Knowledge graph section ────────────────────────────────────────────── */

.kg-section {
  border-top: 1px solid var(--border);
  padding: 72px 40px;
  background: linear-gradient(180deg, rgba(77,175,254,0.03) 0%, transparent 100%);
}

.kg-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.kg-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 16px;
  opacity: 0.8;
}

.kg-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-hi);
  margin-bottom: 18px;
}

.kg-title em {
  font-style: italic;
  color: var(--blue);
}

.kg-body {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 28px;
}

.kg-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One flowing line per bullet: icon + bold label + description, hanging
   indent. (The old flex layout split the label into its own narrow column,
   wrapping "Ground before you start." across three lines.) */
.kg-bullets li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}

.kg-bullets strong { color: var(--text-hi); font-weight: 600; margin-right: 4px; }

.kg-bullet-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
}

/* ─── KG graph mockup ────────────────────────────────────────────────────── */

.kg-graph-mock {
  border: 1px solid rgba(77,175,254,0.2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 0 40px rgba(77,175,254,0.05), 0 20px 60px rgba(0,0,0,0.4);
}

.kg-graph-header {
  background: rgba(77,175,254,0.06);
  border-bottom: 1px solid rgba(77,175,254,0.12);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kg-graph-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 600;
}

.kg-graph-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-ghost);
}

.kg-graph-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kg-node {
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kg-node-decision { border-color: rgba(79,255,176,0.2); background: rgba(79,255,176,0.03); }
.kg-node-attempt  { border-color: rgba(255,112,48,0.2); background: rgba(255,112,48,0.03); }
.kg-node-file     { border-color: rgba(77,175,254,0.2); background: rgba(77,175,254,0.03); }

.kg-node-kind {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.kg-node-decision .kg-node-kind { color: var(--mint); }
.kg-node-attempt  .kg-node-kind { color: var(--orange); }
.kg-node-file     .kg-node-kind { color: var(--blue); }

.kg-node-label {
  font-size: 12px;
  color: var(--text-hi);
  font-weight: 500;
}

.kg-node-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-ghost);
}

.kg-edge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-ghost);
  padding: 2px 12px;
  letter-spacing: 0.5px;
}

.kg-conflict {
  margin-top: 4px;
  background: rgba(232,255,58,0.06);
  border: 1px solid rgba(232,255,58,0.2);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--yellow);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}

.kg-conflict-icon { flex-shrink: 0; }

/* ─── Bottom CTA ─────────────────────────────────────────────────────────── */

.bottom-section {
  border-top: 1px solid var(--border);
  padding: 80px 40px;
  text-align: center;
}

.bottom-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.bottom-inner h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -0.7px;
  line-height: 1.2;
}

.bottom-inner h2 em {
  font-style: italic;
  color: var(--mint);
}

.bottom-inner p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* The footer logotype is the .wordmark component from brand.css, same as the
   nav. It carries its own colour, so nothing here tints it. */

.footer-links {
  display: flex;
  gap: 20px;
  flex: 1;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-low);
  transition: color 0.12s ease-out;
}
.footer-links a:hover { color: var(--text-mid); }

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-ghost);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .kg-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 700px) {
  .nav { padding: 0 20px; }
  .nav-links a:not(.nav-download) { display: none; }

  .hero { padding: 60px 20px 48px; }

  .mockup-section { padding: 0 20px 60px; }
  .mockup-sidebar { display: none; }
  .mockup-panes { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .mockup-panes.mock-panes-2 { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .mock-panes-2 .pane-term { height: auto; min-height: 150px; }
  .mockup-body { height: auto; }
  .mock-path { display: none; }

  .multi-hero { padding: 60px 20px 0; }
  .multi-mode { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .multi-mode-flip { direction: ltr; }

  .oss-section { padding: 60px 20px; }
  .cta-section { padding: 60px 20px; }

  .footer { padding: 24px 20px; flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 900px) and (min-width: 701px) {
  .multi-mode { grid-template-columns: 1fr; gap: 36px; }
  .multi-mode-flip { direction: ltr; }
}

/* ─── Mockup: agent names (matches the product's random agent names) ─────── */

.mock-agent-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
}

/* ─── Docs page ──────────────────────────────────────────────────────────── */

.docs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 120px 40px 80px;
}

.docs-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-toc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-ghost);
  margin-bottom: 12px;
}
.docs-font-toggle {
  display: flex;
  width: fit-content;
  margin-bottom: 18px;
  border: 1px solid var(--border-hover);
  border-radius: 7px;
  overflow: hidden;
}
.docs-font-btn {
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--text-mid);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.12s ease-out, background 0.12s ease-out;
}
.docs-font-btn:first-child { font-family: var(--font-sans); border-right: 1px solid var(--border-hover); }
.docs-font-btn:last-child { font-family: var(--font-serif); }
.docs-font-btn:hover { color: var(--text-hi); }
.docs-font-btn.active { color: var(--mint); background: rgba(79, 255, 176, 0.08); }
.docs-toc a {
  font-size: 13.5px;
  color: var(--text-mid);
  text-decoration: none;
  padding: 5px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.12s ease-out, border-color 0.12s ease-out, background 0.12s ease-out;
}
.docs-toc a:hover {
  color: var(--text-hi);
  border-left-color: var(--mint);
  background: rgba(255, 255, 255, 0.02);
}
/* Docs are one page per section now, so the menu has to say where you are. */
.docs-toc a.active {
  color: var(--text-hi);
  font-weight: 600;
  border-left-color: var(--mint);
  background: rgba(255, 255, 255, 0.03);
}

/* ── Docs hub: one card per page ── */
.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  text-decoration: none;
  scroll-margin-top: 96px;
  transition: border-color 0.14s ease-out, transform 0.14s ease-out;
}
.docs-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.docs-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text-hi);
}
.docs-card-desc { font-size: 13px; line-height: 1.6; color: var(--text-low); }
.docs-main .docs-card:hover { text-decoration: none; }

/* ── Prev / next between docs pages ── */
.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 46%;
  font-size: 14.5px;
  color: var(--text-hi);
  text-decoration: none;
}
.docs-pager a:hover { text-decoration: underline; }
.docs-pager-next { text-align: right; margin-left: auto; }
.docs-pager span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-ghost);
}

.docs-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 44px;
  letter-spacing: -1px;
  color: var(--text-hi);
  margin-bottom: 14px;
}
.docs-intro {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 48px;
}
.docs-intro strong { color: var(--mint); font-weight: 600; }

.docs-main {
  --docs-body-font: var(--font-sans);
  font-family: var(--docs-body-font);
  /* Grid items default to min-width:auto, so a wide child (a figure that
     scrolls inside itself) would otherwise stretch the whole page sideways. */
  min-width: 0;
}
html[data-docs-font="serif"] .docs-main { --docs-body-font: var(--font-serif); }
/* The serif switch also carries the table-of-contents menu items, so the whole
   reading surface changes voice together, not just the body. */
html[data-docs-font="serif"] .docs-toc a { font-family: var(--font-serif); }

.docs-main section {
  margin-bottom: 56px;
  scroll-margin-top: 96px;
}
.docs-main h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.4px;
  color: var(--text-hi);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.docs-main h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mint);
  margin: 24px 0 10px;
}
.docs-main p, .docs-main li {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.75;
}
.docs-main p { margin-bottom: 12px; }
.docs-main strong { color: var(--text-hi); font-weight: 600; }
.docs-main em { color: var(--text-hi); }
.docs-main a { color: var(--mint); text-decoration: none; }
.docs-main a:hover { text-decoration: underline; }
.docs-main ul { padding-left: 20px; margin-bottom: 12px; }
.docs-main ul li { margin-bottom: 8px; }

.docs-steps {
  padding-left: 22px;
  margin-bottom: 12px;
  counter-reset: step;
}
.docs-steps li { margin-bottom: 10px; }

.docs-code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-hi);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--mint);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0 16px;
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.docs-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-mid);
}
.docs-table td:first-child { width: 120px; }

.docs-kbd, .docs-kbd-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-hi);
  background: var(--bg-chrome);
  border: 1px solid var(--border-hover);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.docs-kbd-inline { font-size: 12.5px; }

.docs-faq li { margin-bottom: 14px; }

.changelog-entry {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.changelog-entry:first-child { padding-top: 0; }
.changelog-entry:last-child { border-bottom: none; padding-bottom: 0; }
.changelog-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.changelog-version {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--mint);
}
.changelog-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-ghost);
}
.changelog-body ul { margin-bottom: 0; }
.changelog-body p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 100px 24px 60px;
  }
  .docs-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .docs-toc-tag { display: none; }
  .docs-toc a { border-left: none; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
  .docs-toc-sub { display: none; }
}

/* The manifesto is long enough to need a map, so its menu lists sections
   under the page link. Sub-links are hidden on mobile, where the menu
   collapses to a pill row and eight pills would swallow the screen. */
.docs-toc-sub {
  font-size: 12.5px;
  padding-left: 20px;
  color: var(--text-low);
}

/* ─── Whitepaper figures ─────────────────────────────────────────────────── */

/* The manifesto's numbered plates (.wp-fig / .wp-table) are styled inline in
   aidlc.html, not here. They are inline SVG whose fills come from CSS classes,
   so a browser holding a stale copy of this file would paint every plate as a
   black box with invisible text. Keeping the rules in the page guarantees the
   drawing and its colours always arrive together. */

/* ─── Mockup: pane labels (mirror the product's pane topbar) ─────────────── */

.mock-pane-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
  letter-spacing: 0.2px;
}
.mock-pane-accent {
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--mint);
  flex-shrink: 0;
}
.mock-pane-kind {
  font-weight: 400;
  color: var(--text-low);
  text-transform: lowercase;
}

/* Live task label — the pane topbar's distilled "what is this agent on right
   now", mirroring the product (v0.4.16). */
.mock-pane-task {
  font-weight: 400;
  color: var(--text-low);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ─── Statement ──────────────────────────────────────────────────────────── */

.statement-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 84px 40px;
  text-align: center;
}

.statement-inner {
  max-width: 600px;
  margin: 0 auto;
}

/* Small brand goose as an editorial ornament — signals a manifesto beat,
   not a second section headline. */
.statement-mark {
  width: 90px;
  height: auto;
  margin-bottom: 20px;
}

.statement-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.28;
  letter-spacing: -0.6px;
  margin-bottom: 22px;
}
.statement-line-1 {
  display: block;
  color: var(--text-hi);
}
.statement-line-2 {
  display: block;
  font-style: italic;
  color: var(--mint);
}

.statement-sub {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .statement-section { padding: 60px 24px; }
  .statement-title { font-size: 26px; }
}

/* ─── Hero: closing punch line ───────────────────────────────────────────── */

.hero-sub-punch {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--text-hi);
  letter-spacing: -0.2px;
}

/* ─── Graph: teams callout ───────────────────────────────────────────────── */

.kg-teams {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--mint);
  border-radius: 8px;
}
.kg-teams-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mint);
  margin-bottom: 8px;
}
.kg-teams p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid);
}
.kg-teams p + p { margin-top: 12px; }
.kg-teams strong { color: var(--text-hi); }
.kg-teams p.kg-teams-roadmap {
  font-size: 13px;
  color: var(--text-ghost);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}


/* ─── Invite referral banner ─────────────────────────────────────────────── */

.ref-banner {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-mid);
  background: color-mix(in srgb, var(--mint) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
  border-radius: 8px;
}
.ref-banner-at, .ref-banner #ref-handle { color: var(--mint); }

.install-hint {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
}
.install-hint a { color: var(--mint); text-decoration: none; }
.install-hint a:hover { text-decoration: underline; }

/* ─── The goose ──────────────────────────────────────────────────────────── */

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-goose {
  width: 44px;
  height: auto;
  image-rendering: pixelated;
}

/* ─── The goose: theme swap, wingbeat, lore ──────────────────────────────── */

:root:not([data-theme="dark"]) .goose-dark-only { display: none; }
:root[data-theme="dark"] .goose-light-only { display: none; }

/* Two-frame sprite wingbeat: frame B blinks over frame A on a hard step. */
.goose-anim { position: relative; display: inline-block; }
.goose-anim img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.goose-anim .frame-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: goose-frames 0.52s steps(1) infinite;
}
@keyframes goose-frames {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

.hero-flock {
  width: 190px;
  margin: 30px auto 4px;
  animation: goose-drift 5.5s ease-in-out infinite;
}
@keyframes goose-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.hero { position: relative; }

.goose-section {
  padding: 90px 24px;
  text-align: center;
}
.goose-inner { max-width: 620px; margin: 0 auto; }
.goose-lore-mark { width: 200px; margin: 0 auto 30px; animation: goose-drift 5.5s ease-in-out infinite; }
.goose-title {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-hi);
  margin: 0 0 16px;
}
.goose-title em { color: var(--mint); }
.goose-copy {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-mid);
  margin: 0 0 14px;
}
.goose-fineprint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-ghost);
  margin: 0;
}

.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-goose { width: 30px; image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .goose-anim .frame-b, .hero-flock, .goose-lore-mark, .goose-bob,
  .pane-term .cursor, .voice-wave i, .mockup-pill-dot, .voice-rec-dot,
  .mock-toast-dot, .mock-spin { animation: none; }
  .mock-toast { transition: none; }
}


/* ─── Accessibility & finish ─────────────────────────────────────────────────
   Skip link, visible keyboard focus, brand text selection, balanced titles. */

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--mint);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  transition: top 0.15s ease-out;
}
.skip-link:focus-visible { top: 0; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Inside the pinned-dark mockups, --mint stays high-contrast in both themes. */

::selection {
  background: color-mix(in srgb, var(--mint) 30%, transparent);
  color: var(--text-hi);
}

.hero-title, .multi-title, .kg-title, .goose-title, .statement-title, .bottom-inner h2 {
  text-wrap: balance;
}
/* The hero sub is short enough to balance into even lines; the longer body
   copy elsewhere just wants orphan control. */
.hero-sub { text-wrap: balance; }
.multi-sub, .kg-body, .statement-sub, .goose-copy {
  text-wrap: pretty;
}

/* ─── Graph Explorer: list view ──────────────────────────────────────────────
   The keyboard-friendly twin of the canvas. Same data, newest first. */

.ge-scope-static {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
  padding: 5px 11px;
}

.ge-list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
}
.ge-list[hidden] { display: none; }

.ge-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ge-list-row:hover { color: var(--text-hi); background: var(--bg-chrome); }
.ge-list-row.sel { border-color: var(--mint); color: var(--text-hi); }
.ge-list-row .ge-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ge-list-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ge-list-kind {
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-low);
  flex-shrink: 0;
}
.ge-list-time { font-size: 10px; color: var(--text-ghost); flex-shrink: 0; }