/* CHYNJ — shared styles (Linear-inspired: monochrome, restrained, type-driven) */

/* Brand typefaces — must load before any other rule (@import ordering).
   Inter = body/headings, JetBrains Mono = eyebrow labels. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  --bg:           #08080A;
  --surface:      #0F0F11;
  --surface-2:    #16161A;
  --surface-3:    #1C1C21;
  --border:       #1F1F25;
  --border-2:     #2A2A32;
  --border-hover: #3A3A45;

  --text:         #FAFAFA;
  --text-2:       #A1A1AA;
  --text-3:       #5C5C66;
  --text-4:       #3F3F46;

  --accent:       #5B9DAD;
  --accent-h:     #6FB0C0;
  --accent-fade:  rgba(91,157,173,0.08);

  --positive:     #4ADE80;
  --warning:      #F4B952;

  --radius:       8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  --maxw:         1120px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; }

::selection { background: var(--accent); color: #fff; }

/* ─── Grid pattern bg accent (subtle) ─────────────────────────────────── */
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}

/* ─── Container ───────────────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

/* ─── Nav ─────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 50;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(8,8,10,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-home { display: inline-flex; align-items: center; gap: 10px; }
.nav-mark {
  flex-shrink: 0;
  display: block;
  width: 38px; height: 38px;
}
.nav-logo .mark {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text);
}
.nav-logo .mark .slash { color: var(--text-3); margin: 0 4px; font-weight: 400; }
.nav-logo .mark .product { color: var(--accent); }
.nav-logo > .slash { color: var(--text-3); font-weight: 400; margin: 0 2px; }
.nav-logo > .product { color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.nav-logo > .product:hover { color: var(--accent-h); }

/* ── Brand wordmark images (exact lettering cropped from IMG_Design.png) ──
   Site is dark-only, so the white-ink variants are used everywhere. */
.mark-img { width: auto; display: inline-block; vertical-align: middle; }
.nav-word { height: 16px; }
.product-word { height: 14px; opacity: .92; }
a.product:hover .product-word { opacity: 1; }
.footer-brand .footer-mark { height: 20px; display: block; margin-bottom: 10px; }
/* In-flow flex (NOT absolute-centered). Absolute centering pinned the links to
   the viewport midpoint, so the long "CHYNJ / Kaptain / Documentation" breadcrumb
   ran straight underneath them. As a flex child the link group takes the middle
   space and centers within it — it can never overlap the logo or the chip. */
.nav-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.nav-links a,
.nav-dropdown-trigger {
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  transition: color .15s ease;
}
.nav-links a:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--text); }
.nav-dropdown {
  position: relative;
  height: 60px;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger { display: inline-flex; align-items: center; height: 100%; }
.nav-menu {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 430px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 28px 80px -28px rgba(0,0,0,.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.nav-menu-compact {
  min-width: 210px;
  grid-template-columns: 1fr;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-links:hover .nav-dropdown:not(:hover) .nav-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.nav-menu-col {
  background: rgba(15,15,17,.98);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.nav-menu-col span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  margin-bottom: 2px;
}
.nav-menu-col a {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.25;
}
.nav-menu-col a:hover { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: var(--text); color: var(--bg);
  padding: 7px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
  border: 1px solid var(--text);
  transition: opacity .15s ease;
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.88; }

/* Mobile menu toggle — hidden on desktop, shown ≤1024px (injected by site.js). */
.nav-toggle {
  display: none;
  margin-left: 12px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text); flex-shrink: 0;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .18s ease, top .18s ease, background .15s ease;
}
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
nav.nav-open .nav-toggle-bar { background: transparent; }
nav.nav-open .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
nav.nav-open .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  nav { padding: 0 20px; }
  /* The centered .nav-links bar is position:absolute (left:50%); below ~1024px
     it overlaps the breadcrumb logo + account chip. Collapse to the hamburger
     drawer here — well before the overlap — instead of waiting for phone widths.
     Group "Sign in" + hamburger as a pair on the right instead of letting
     space-between fling them to opposite ends of the bar. */
  /* "Sign in" CTA *and* the logged-in profile chip both pin right next to the
     hamburger — otherwise space-between floats them into the middle of the bar. */
  .nav-cta,
  .chynj-profile-wrap { margin-left: auto; }
  .nav-toggle { display: inline-flex; margin-left: 10px; }
  /* Collapse the centered link bar into a full-width dropdown panel. */
  .nav-links {
    position: absolute; top: 60px; left: 0; right: 0; transform: none;
    display: none; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0;
    padding: 6px 20px 18px;
    background: rgba(8,8,10,0.98);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,.7);
    max-height: calc(100vh - 60px); overflow-y: auto; z-index: 60;
  }
  nav.nav-open .nav-links { display: flex; }
  /* Each hover-dropdown becomes an inline, always-expanded section (touch-safe). */
  .nav-links .nav-dropdown {
    display: block; width: 100%; height: auto;
    border-bottom: 1px solid var(--border);
  }
  .nav-links .nav-dropdown-trigger {
    display: block; width: 100%; height: auto; padding: 13px 2px;
    font-size: 15px; font-weight: 600; color: var(--text);
  }
  /* Inside the open panel the submenu is a static, full-width block. Every
     hover state must keep it put — the desktop `.nav-dropdown:hover .nav-menu`
     rule (transform: translate(-50%)) would otherwise slide it off-screen, so
     these selectors are scoped under .nav-links to outrank it on specificity. */
  .nav-links .nav-menu,
  .nav-links .nav-dropdown:hover .nav-menu,
  .nav-links .nav-dropdown:focus-within .nav-menu,
  .nav-links:hover .nav-dropdown:not(:hover) .nav-menu {
    position: static; transform: none; display: block; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 10px 10px; overflow: visible;
  }
  .nav-links .nav-menu-col { background: transparent; padding: 2px 0 8px; }
}
/* On phones the nav is already a hamburger, so the "/ Kaptain / Documentation"
   breadcrumb tail is redundant and only overflows the bar — drop it to the bare
   CHYNJ wordmark and keep the hamburger reachable. */
@media (max-width: 640px) {
  .nav-logo > .slash,
  .nav-logo > .product {
    display: none;
  }
  .nav-cta {
    padding: 7px 11px;
  }
}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 120px 32px 100px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.hero .container { max-width: 960px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: 0;
  margin-bottom: 32px;
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--positive);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.12);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: 24px;
  max-width: 16ch;
}
.hero h1 .quiet { color: var(--text-3); font-weight: 700; }
.hero p.lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: 40px;
}
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 24px; font-size: 13px; color: var(--text-3); font-family: var(--font-mono); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 7px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  transition: all .15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 100%;
}
.btn-primary {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--text-2);
  border-color: var(--border-2);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-hover); }
.btn-accent {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn-lg { padding: 13px 24px; font-size: 15px; }

/* ─── Sections ────────────────────────────────────────────────────────── */
section { padding: 100px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow-label {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--accent); font-weight: 500;
  margin-bottom: 16px;
  display: inline-block;
}
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.section-title .quiet { color: var(--text-3); }
.section-lede {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 58ch;
}
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

/* ─── Product cards (CHYNJ landing) ────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 880px) { .product-grid { grid-template-columns: 1fr; } }
.product-card {
  background: var(--surface);
  padding: 40px 32px 36px;
  display: flex; flex-direction: column;
  position: relative;
  transition: background .18s ease, transform .16s cubic-bezier(.23,1,.32,1);
  min-height: 340px;
}
.product-card:hover { background: var(--surface-2); }
.product-card:active { transform: scale(0.992); }
.product-card .wordmark {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-3);
  margin-bottom: 28px;
  font-family: var(--font-mono);
}
.product-card .wordmark strong { color: var(--text); font-weight: 600; }
.product-card h3 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.product-card p.desc {
  font-size: 14px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 32px; flex-grow: 1;
}
.product-card .arrow {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .18s ease;
}
.product-card:hover .arrow { gap: 10px; }
.product-card .arrow .accent { color: var(--accent); }

/* ─── Feature rows (replaces dense card grid) ─────────────────────────── */
.feature-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 720px) { .feature-rows { grid-template-columns: 1fr; } }
.feature-row {
  background: var(--bg);
  padding: 36px 32px;
  transition: background .18s ease;
}
.feature-row:hover { background: var(--surface); }
.feature-row .num {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-3);
  margin-bottom: 16px;
}
.feature-row h4 {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px; color: var(--text);
}
.feature-row p {
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}

/* ─── Split layout (text + visual) ────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split.reverse .split-visual { order: -1; }
@media (max-width: 880px) { .split.reverse .split-visual { order: 0; } }
.split-text h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.split-text p {
  font-size: 15px; color: var(--text-2); line-height: 1.65;
}
.split-text ul {
  list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 10px;
}
.split-text ul li {
  display: flex; gap: 12px; font-size: 14px; color: var(--text-2);
}
.split-text ul li::before {
  content: ""; display: inline-block;
  width: 14px; height: 1px; background: var(--text-3); margin-top: 11px; flex-shrink: 0;
}

/* ─── Mock visuals (refined) ──────────────────────────────────────────── */
.mock {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
}
.mock-header {
  background: var(--surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.mock-header .dots { display: flex; gap: 5px; }
.mock-header .dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-3);
}
.mock-header .title {
  font-size: 12px; color: var(--text-3);
  font-family: var(--font-mono);
  margin-left: auto;
}
.mock-body { padding: 24px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; }

/* Editor mock */
.code-line { color: var(--text-2); }
.code-line .ln { display: inline-block; width: 24px; color: var(--text-4); user-select: none; }
.kw  { color: #C792EA; }
.fn  { color: #82AAFF; }
.str { color: #C3E88D; }
.cmt { color: var(--text-3); font-style: italic; }
.num { color: #F78C6C; }

/* Trace bars */
.trace { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.trace-row {
  display: grid; grid-template-columns: 100px 1fr 56px;
  gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 11.5px;
}
.trace-row .label { color: var(--text-2); }
.trace-row .bar {
  background: var(--surface-2); border-radius: 2px; height: 14px; position: relative; overflow: hidden;
}
.trace-row .bar > i {
  position: absolute; top: 0; bottom: 0; background: var(--accent);
  display: block;
}
.trace-row .time { color: var(--text-3); text-align: right; }

/* Graph mock */
.graph {
  background: var(--bg);
  aspect-ratio: 4/3;
  padding: 20px;
  position: relative;
}
.graph svg { width: 100%; height: 100%; }

/* ─── Pricing ─────────────────────────────────────────────────────────── */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; } }
.pricing-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 880px) { .pricing-2col { grid-template-columns: 1fr; } }
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color .18s ease;
}
.tier:hover { border-color: var(--border-hover); }
.tier.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-fade) 0%, var(--surface) 100%);
}
.tier .badge {
  position: absolute; top: -10px; left: 28px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  font-weight: 600;
}
.tier .name {
  font-size: 13px; color: var(--text-2); font-weight: 600;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tier .price {
  font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: var(--text);
  display: flex; align-items: baseline; gap: 4px;
}
.tier .price .currency { font-size: 1rem; color: var(--text-2); font-weight: 600; }
.tier .price .per { font-size: 0.9rem; color: var(--text-2); font-weight: 500; margin-left: 6px; }
.tier .price-note { font-size: 12.5px; color: var(--text-3); margin-top: 6px; margin-bottom: 24px; }
.tier .summary { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-bottom: 28px; }
.tier .features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex-grow: 1; }
.tier .features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--text-2);
}
.tier .features li::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--border-2);
  margin-top: 4px; flex-shrink: 0;
  position: relative;
}
.tier .features li.on::before { background: var(--accent); border-color: var(--accent); }
.tier .features li.bundle::before { background: var(--positive); border-color: var(--positive); }
.tier .features li small { color: var(--text-3); font-size: 12px; margin-top: 2px; display: block; }

/* ─── CTA banner ──────────────────────────────────────────────────────── */
.cta {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 64px 40px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, var(--accent-fade) 0%, transparent 70%),
    var(--surface);
}
.cta h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 16px; }
.cta p { color: var(--text-2); margin-bottom: 32px; font-size: 15px; max-width: 48ch; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 56px 32px 40px;
  background: var(--bg);
}
.footer-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-brand .mark {
  font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text); display: block; margin-bottom: 8px;
}
.footer-brand .brand-separator { color: var(--text-3); }
.footer-brand .brand-accent { color: var(--accent); }
.footer-brand p { font-size: 13px; color: var(--text-3); line-height: 1.6; max-width: 32ch; }
.footer-col h5 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--text-2); transition: color .15s ease; }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding-top: 32px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 12.5px; color: var(--text-3); }
.footer-bottom .legal-links { display: flex; gap: 20px; }
.footer-bottom .legal-links a { font-size: 12.5px; color: var(--text-3); transition: color .15s ease; }
.footer-bottom .legal-links a:hover { color: var(--text-2); }

/* ─── Tiny chips / tags ────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 8px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.tag.accent { background: var(--accent-fade); color: var(--accent); border-color: rgba(91,157,173,0.18); }
.tag.positive { background: rgba(74,222,128,0.08); color: var(--positive); border-color: rgba(74,222,128,0.18); }

/* ─── Misc ────────────────────────────────────────────────────────────── */
.compat-strip {
  padding: 24px 32px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.compat-strip .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
}

/* ─── Beta version tag ────────────────────────────────────────────────── */
.beta-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(244,185,82,0.10);
  color: #F4B952;
  border: 1px solid rgba(244,185,82,0.25);
  text-transform: uppercase;
  vertical-align: middle;
}
.beta-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: #F4B952;
}

/* ─── Store / coming-soon badges (Konnect, Konvertex) ─────────────────── */
.store-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2);
  padding: 12px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
  min-width: 200px;
}
.store-badge:hover { border-color: var(--border-hover); background: var(--surface-2); }
.store-badge .icon {
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--text);
}
.store-badge .text { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge .text .small {
  font-size: 10.5px; color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.store-badge .text .big {
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text);
}
.store-badge.disabled { opacity: 0.85; cursor: pointer; }
.store-badge .status {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--warning); letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(244,185,82,0.10);
  border: 1px solid rgba(244,185,82,0.22);
  white-space: nowrap;
}

/* ─── Coming-soon download tiles (Konvertex desktop) ──────────────────── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .dl-grid { grid-template-columns: 1fr; gap: 10px; }
}
.dl-coming {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.dl-coming:hover { border-color: var(--border-hover); background: var(--surface-2); }
.dl-coming .os-label {
  font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text); margin-bottom: 4px;
}
.dl-coming .os-sub {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-3); margin-bottom: 16px;
}
.dl-coming .coming-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--warning);
  background: rgba(244,185,82,0.10);
  border: 1px solid rgba(244,185,82,0.22);
  padding: 4px 10px; border-radius: 4px;
  letter-spacing: 0.4px; text-transform: uppercase;
}
@media (max-width: 720px) {
  .dl-coming { padding: 18px 14px; }
  .dl-coming .coming-pill {
    display: block;
    font-size: 12px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ─── Privacy notice banner (injected by /assets/site.js) ─────────────── */
.privacy-notice {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.privacy-notice.pn-visible { transform: translateY(0); opacity: 1; }
.privacy-notice.pn-dismissed { transform: translateY(140%); opacity: 0; }
.privacy-notice .pn-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 20px;
}
.privacy-notice p {
  flex: 1;
  font-size: 13px; line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.privacy-notice p strong { color: var(--text); font-weight: 600; }
.privacy-notice p a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.privacy-notice p a:hover { border-bottom-color: var(--accent); }
.privacy-notice .pn-dismiss {
  flex-shrink: 0;
  background: var(--text); color: var(--bg);
  border: 1px solid var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity .15s ease;
}
.privacy-notice .pn-dismiss:hover { opacity: 0.88; }
@media (max-width: 560px) {
  .privacy-notice { left: 12px; right: 12px; bottom: 12px; }
  .privacy-notice .pn-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .privacy-notice .pn-dismiss { width: 100%; padding: 10px; }
}

/* ─── Prose (Privacy / Terms) ─────────────────────────────────────────── */
.prose {
  max-width: 720px; margin: 0 auto;
  padding: 80px 32px 120px;
  color: var(--text-2);
  font-size: 15px; line-height: 1.7;
}
.prose h1 {
  font-size: 2.5rem; color: var(--text); font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.prose .updated { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 48px; }
.prose h2 {
  font-size: 1.25rem; color: var(--text); font-weight: 600; letter-spacing: -0.01em;
  margin: 48px 0 16px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.prose h2:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }
.prose h3 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 26px 0 10px;
}
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 20px 24px; }
.prose ul li { margin-bottom: 8px; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; color: var(--text); overflow-wrap: break-word; }
.site-backlinks {
  margin-top: 48px;
  font-size: 13px;
  color: var(--text-3);
}
.site-backlinks a { border-bottom: 0; }
.legal-page .prose,
.trust-page .prose {
  max-width: 760px;
}
/* Code blocks had no styling at all → browser-default <pre> never wraps and ran
   off the page on narrow viewports. Give them a surface + scroll long lines
   inside the block instead of overflowing the article. */
.prose pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 20px;
  padding: 14px 16px;
  max-width: 100%;
  overflow-x: auto;
  font-size: 13px; line-height: 1.6;
}
.prose pre code {
  background: none; padding: 0; border-radius: 0;
  font-size: inherit; color: var(--text-2);
  white-space: pre;
}

/* ─── Editorial ecosystem surfaces ───────────────────────────────────── */
.editorial-hero .container { max-width: 960px; }
.editorial-split {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(180px,.65fr);
  gap: 72px;
  align-items: start;
}
.manifesto {
  font-size: clamp(1.55rem,3vw,2.55rem);
  line-height: 1.17;
  letter-spacing: -.055em;
  color: var(--text);
  max-width: 27ch;
}
.fact-index {
  list-style: none;
  border-top: 1px solid var(--border);
}
.fact-index li {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.statement {
  color: var(--text);
  font-size: clamp(1.3rem,2.3vw,2rem);
  line-height: 1.28;
  letter-spacing: -.04em;
  max-width: 36ch;
}
.note-panel {
  border-left: 2px solid var(--accent);
  background: var(--accent-fade);
  margin-top: 28px;
  max-width: 760px;
  padding: 18px 22px;
}
.note-panel p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}
.editorial-list { border-bottom: 1px solid var(--border); }
.editorial-row {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  transition: border-color .18s ease, padding-left .18s ease, transform .16s cubic-bezier(.23,1,.32,1), background .16s ease;
}
.editorial-row:hover {
  border-color: var(--border-hover);
  padding-left: 8px;
}
.editorial-row:active { transform: scale(0.992); }
.editorial-row.is-disabled {
  opacity: .72;
}
.editorial-row.is-disabled:hover {
  padding-left: 0;
  border-color: var(--border);
}
.row-meta {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
}
.row-copy strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.row-copy small {
  display: block;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 64ch;
}
.row-action {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.centered-actions { justify-content: center; }
@media (max-width: 720px) {
  .editorial-split { grid-template-columns: 1fr; gap: 36px; }
  .editorial-row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .row-meta { grid-column: 1 / -1; }
  .manifesto { font-size: clamp(1.5rem,7vw,2rem); }
}

/* ─── Kaptain ecosystem page ──────────────────────────────────────────── */
.routing-layout,.communication-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(380px,1fr);
  gap: 64px;
  align-items: center;
}
.route-board,.product-surface {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .18s ease, transform .16s cubic-bezier(.23,1,.32,1);
}
.route-board:hover,.product-surface:hover { border-color: var(--border-hover); }
.route-board:active,.product-surface:active { transform: scale(0.996); }
.route-board { padding: 18px; }
.route-item {
  display: grid;
  grid-template-columns: 90px 20px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}
.route-item:last-child { border-bottom: 0; }
.route-item span { color: var(--text-3); }
.route-item i { color: var(--accent); font-style: normal; }
.route-item strong { color: var(--text-2); font-weight: 500; }
.token-note { margin-top: 0; }
.text-link {
  color: var(--accent);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 14px;
}
.product-surface-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.chat-preview { padding: 20px; }
.chat-preview-line {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
}
.accent-avatar { border-color: var(--accent); color: var(--accent); }
.chat-preview-line p { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.chat-preview-line strong { color: var(--text); font-size: 12px; }
.chat-preview-status {
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 10px;
  padding-top: 14px;
}
.proof-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.product-proof figcaption {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  padding-top: 10px;
}
.proof-note {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 18px;
}
.code-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.code-preview i { color: var(--text-4); display: inline-block; font-style: normal; width: 32px; }
.code-preview b { color: #C792EA; font-weight: 500; }
.enterprise-price { font-size: 1.5rem !important; line-height: 1.2 !important; }
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}
.install-dialog {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 520px;
  position: relative;
  width: 90%;
}
.install-dialog h3 { font-size: 1.4rem; letter-spacing: -.02em; margin: 6px 0 8px; }
.install-close {
  position: absolute;
  right: 14px;
  top: 14px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
}
.install-copy { color: var(--text-2); font-size: 13.5px; margin-bottom: 20px; }
.install-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.install-tabs .btn { flex: 1; font-size: 12.5px; padding: 8px; }
.install-label { color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; margin: 12px 0 6px; }
.install-command {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}
.install-command code { color: var(--text); font-family: var(--font-mono); font-size: 12px; }
.install-command button { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text-2); font-size: 11px; padding: 3px 9px; }
.install-footnote { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); font-size: 12.5px; line-height: 1.55; margin: 18px 0; padding: 12px 14px; }
.install-footnote strong { color: var(--text); }
.install-footnote code { color: var(--text); font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.install-footnote a { color: var(--text); }
/* Direct per-platform binary links. Two columns so macOS/Linux and their
   architectures pair visually; collapses to one column on narrow screens. */
.download-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.download-grid .btn { font-size: 12.5px; padding: 9px 10px; text-align: center; }
/* Windows has no second architecture yet, so it spans both columns rather than
   leaving a hole in the grid. */
.download-grid .download-wide { grid-column: 1 / -1; }

/* Body scroll lock while a modal is open. `position: fixed` is the only
   approach that also stops iOS Safari scrolling the page behind the overlay;
   the inline `top` set in JS preserves the scroll position so closing the
   dialog does not jump you back to the top of the page. */
body.modal-open { position: fixed; width: 100%; overflow: hidden; }

/* Two explicit choices, side by side: try it, or buy it. Equal width so
   neither reads as the "real" button, primary styling carries the emphasis. */
.install-cta-pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.install-cta-pair .btn { text-align: center; white-space: nowrap; padding: 11px 12px; }

/* Store badges reused from the Konnect page, sized for the install dialog.
   `Coming to` + brand name must stay on their own single lines: at dialog
   width the label was wrapping mid-phrase and the badge lost its shape. */
.install-dialog .store-badge-row { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.install-dialog .store-badge { padding: 10px 12px; gap: 10px; }
.install-dialog .store-badge .icon { width: 22px; height: 22px; flex: none; }
.install-dialog .store-badge .text { min-width: 0; }
.install-dialog .store-badge .text .small,
.install-dialog .store-badge .text .big { white-space: nowrap; }
.install-dialog .store-badge .text .big { font-size: 13px; }
.install-dialog .store-badge .status { font-size: 10.5px; flex: none; }

/* Vertical rhythm inside the dialog. Every block previously carried its own
   ad-hoc margin, so the gaps between the tabs, the consent line, the buttons
   and the footnotes were all slightly different and the dialog read as
   cramped in some places and loose in others. One scale, applied once. */
.install-dialog .install-label { margin: 20px 0 8px; }
.install-dialog .install-label:first-of-type { margin-top: 16px; }
/* Even rhythm: the consent sits between the platform tabs and the download
   button, and was tighter to the tabs above than to the button below. */
.install-dialog .tos-check { margin: 16px 0; }
.install-dialog .install-command { margin-bottom: 8px; }
.install-dialog .install-footnote { margin: 10px 0 0; }
.install-dialog .download-grid { margin-top: 0; }
@media (max-width: 880px) {
  .routing-layout,.communication-layout,.proof-pair { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .route-item { grid-template-columns: 72px 14px minmax(0,1fr); font-size: 10px; }
  .install-tabs { flex-direction: column; }
  .install-command { align-items: flex-start; flex-direction: column; }
  .install-command code { font-size: 10px; overflow-wrap: anywhere; }
  .download-grid { grid-template-columns: 1fr; }
  .install-dialog .store-badge-row { grid-template-columns: 1fr; }
  .install-cta-pair { grid-template-columns: 1fr; }
}

/* ─── Insights and Knowledge publishing ───────────────────────────────── */
.insights-page .editorial-hero {
  background:
    radial-gradient(ellipse 70% 65% at 18% 24%, rgba(91,157,173,.12), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 70%);
}
.insights-page .editorial-list .editorial-row:first-child {
  background: linear-gradient(90deg, rgba(91,157,173,.08), transparent 42%);
  margin-inline: -18px;
  padding-inline: 18px;
  border-radius: var(--radius-lg);
}
.insights-page .editorial-list .editorial-row:first-child:hover {
  padding-left: 26px;
}
.knowledge-page .editorial-hero {
  background:
    radial-gradient(ellipse 62% 58% at 76% 18%, rgba(74,222,128,.08), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 72%);
}
.documents-page .editorial-hero,
.kaptain-docs-page .editorial-hero {
  background:
    radial-gradient(ellipse 68% 60% at 82% 20%, rgba(91,157,173,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.014), transparent 72%);
}
.docs-index-layout > .docs-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.docs-index-layout > .docs-nav a:last-child { border-bottom: 0; }
.docs-index-layout > .docs-nav .eyebrow-label { margin-bottom: 10px; }
.content-empty {
  color: var(--text-3);
  font-size: 14px;
  padding: 18px 0;
}
.docs-index-layout {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 64px;
  align-items: start;
}
.docs-nav {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 92px;
}
.docs-nav a {
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  padding: 10px 0;
  transition: color .15s ease, padding-left .15s ease, border-color .15s ease;
}
.docs-nav a:last-child { border-bottom: 1px solid var(--border); }
.docs-nav a:hover { color: var(--text); border-color: var(--border-hover); padding-left: 6px; }
.docs-layout {
  display: grid;
  grid-template-columns: 210px minmax(0,720px) 180px;
  gap: 36px;
  margin: 0 auto;
  max-width: 1240px;
  padding: 60px 32px 120px;
}
.docs-layout--no-toc {
  grid-template-columns: 210px minmax(0,760px);
  max-width: 1040px;
}
.docs-layout .article-prose { padding: 0; }
.docs-toc { color: var(--text-3); font-size: 12px; }
.article-prose { max-width: 760px; }
.article-kicker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.article-prose .article-summary {
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.6;
  margin: 18px 0 42px;
}
.article-actions { margin: -20px 0 42px; }
.article-callout {
  background: var(--accent-fade);
  border-left: 2px solid var(--accent);
  color: var(--text-2);
  margin: 24px 0;
  padding: 16px 18px;
}
.article-source {
  color: var(--text-3);
  font-size: 13px;
}
.article-table {
  border-collapse: collapse;
  margin: 26px 0;
  width: 100%;
}
.article-table th,.article-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}
.article-table th {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}
/* ── Documentation layout: responsive collapse ──────────────────────────────
   The 3-column docs grid (nav · article · toc) needs ~1180px. Below that we
   progressively drop columns so the article never overflows the viewport —
   the un-collapsed grid was forcing a pinch-zoom-out just to read on phones. */
@media (max-width: 1080px) {
  .docs-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-toc { display: none; }            /* right rail is redundant when narrow */
}
@media (max-width: 720px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px 80px;
  }
  .docs-index-layout { grid-template-columns: 1fr; gap: 24px; }
  /* Grid items default to min-width:auto, which lets wide content (the nav's
     nowrap pill row, long code lines) stretch the 1fr track and overflow the
     viewport. min-width:0 lets the track shrink so overflow-x can scroll. */
  .docs-layout > *, .docs-index-layout > * { min-width: 0; }
  /* `.prose` carries `margin: 0 auto`; on a grid item auto side-margins cancel
     stretch, so the article sizes to its ~695px max-content and overflows the
     350px column. Zero the margins + drop the cap so it fills the track. */
  .docs-layout .article-prose { margin-inline: 0; max-width: none; }
  /* (The section-nav mobile treatment now lives in the ≤900px block below as a
     collapsed-by-default card — no more horizontal pill strip.) */
}
.reader-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 999px;
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 9px 13px;
  box-shadow: 0 14px 42px rgba(0,0,0,.3);
}
.reader-toggle:hover { opacity: .9; }
body.reader-mode .article-prose {
  background: #F7F2E8;
  border: 1px solid #E6DCCB;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  color: #27231D;
}
body.reader-mode .docs-layout .article-prose {
  padding: 42px 48px 56px;
}
body.reader-mode > .article-prose {
  margin-top: 48px;
  padding: 56px 64px 72px;
}
body.reader-mode .article-prose h1,
body.reader-mode .article-prose h2,
body.reader-mode .article-prose h3,
body.reader-mode .article-prose strong,
body.reader-mode .article-table th {
  color: #11100E;
}
body.reader-mode .article-prose .article-summary,
body.reader-mode .article-table td,
body.reader-mode .article-callout,
body.reader-mode .article-source {
  color: #484036;
}
body.reader-mode .article-prose a,
body.reader-mode .article-kicker,
body.reader-mode .eyebrow-label {
  color: #2F7F92;
}
body.reader-mode .article-prose h2,
body.reader-mode .article-table th,
body.reader-mode .article-table td {
  border-color: #DED2C0;
}
body.reader-mode .article-callout {
  background: rgba(91,157,173,.12);
  border-left-color: #2F7F92;
}
body.reader-mode .article-prose code {
  background: #EFE6D7;
  color: #11100E;
}
@media (max-width: 900px) {
  .docs-index-layout,.docs-layout { grid-template-columns: 1fr; gap: 28px; }
  .docs-toc { display: none; }

  /* Section nav → a collapsed-by-default card (Anthropic/Stripe/Linear docs
     pattern). A tall list buries the article on a phone and a pill strip looks
     cheap, so the nav is one tidy surface that taps open. site.js (initDocsNav)
     toggles `.is-open`; the `.eyebrow-label` is the tap target + chevron. */
  .docs-nav {
    position: static; top: auto; min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }
  .docs-nav .eyebrow-label {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 14px 16px;
    cursor: pointer; user-select: none;
  }
  .docs-nav .eyebrow-label::after {
    content: ""; width: 7px; height: 7px; margin-left: 10px; flex: none;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .docs-nav.is-open .eyebrow-label::after { transform: translateY(1px) rotate(-135deg); }
  .docs-nav a {
    display: none;
    border-top: 1px solid var(--border);
    padding: 13px 16px; font-size: 14px; color: var(--text-2);
  }
  .docs-nav.is-open a { display: block; }
  .docs-nav a:hover { color: var(--text); background: var(--surface-2); }
  .docs-nav a:last-child { border-bottom: 0; }

  body.reader-mode .docs-layout .article-prose,
  body.reader-mode > .article-prose {
    padding: 32px 24px 42px;
  }
  .reader-toggle {
    bottom: 14px;
    right: 14px;
  }
}
@media print {
  nav,footer,.privacy-notice,.article-actions { display: none !important; }
  body { background: #fff; color: #111; }
  .prose { color: #222; max-width: none; padding: 0; }
  .prose h1,.prose h2,.prose h3,.prose strong { color: #111; }
  .prose a { border-bottom: 1px solid #999; color: #111; }
}

/* ─── Install clickwrap (Terms acceptance gate) ───────────────────────── */
.tos-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 4px; font-size: 13px; line-height: 1.5;
  color: var(--text-2); cursor: pointer;
}
.tos-check input {
  margin-top: 2px; width: 16px; height: 16px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.tos-check a { color: var(--accent); border-bottom: 1px solid transparent; }
.tos-check a:hover { border-color: var(--accent); }
.install-dialog .is-disabled {
  opacity: 0.4; pointer-events: none; filter: grayscale(0.3);
}

/* ─── Profile chip + menu (auth-aware nav) ───────────────────────────── */
/* site.js mounts these when /me succeeds. They replace whichever of the
   nav-cta "Sign in" button or nav-links "Account" link is present. */
.chynj-profile-wrap { position: relative; display: inline-block; }
.chynj-profile-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px 5px 5px;
  border-radius: 999px; font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.chynj-profile-chip:hover { border-color: var(--accent); background: var(--surface-2); }
.chynj-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.chynj-profile-email {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-2); font-size: 12px;
}
@media (max-width: 720px) { .chynj-profile-email { display: none; } }
.chynj-profile-caret { color: var(--text-3); font-size: 10px; margin-left: 2px; }

.chynj-profile-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 8px); padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 50;
}
.chynj-profile-menu[hidden] { display: none; }
.chynj-menu-head {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.chynj-menu-email { font-size: 13px; color: var(--text); font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chynj-menu-role  { font-size: 11px; color: var(--text-3); text-transform: uppercase;
                    letter-spacing: 0.06em; margin-top: 2px;
                    font-family: var(--font-mono, ui-monospace, monospace); }
.chynj-profile-menu a,
.chynj-profile-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; color: var(--text); background: transparent;
  border: none; font: inherit; font-size: 13px;
  border-radius: calc(var(--radius, 8px) - 2px); cursor: pointer;
  text-decoration: none;
}
.chynj-profile-menu a:hover,
.chynj-profile-menu button:hover { background: var(--surface-2); color: var(--text); }
.chynj-signout { color: #F87171 !important; margin-top: 4px;
                 border-top: 1px solid var(--border) !important;
                 border-radius: 0 !important; padding-top: 12px !important; }
.chynj-signout:hover { background: rgba(248,113,113,0.08) !important; }

/* ── Install dialog: trial / subscribe step ──────────────────────────────
   Reached by picking a binary. Subscribe carries a colour bar so it reads as
   the promoted path; the trial card is plain and see-through, the same
   treatment as every other secondary control in the dialog. */
.install-back { background: none; border: 0; color: var(--text-2); cursor: pointer; font-family: inherit;
  font-size: 12.5px; margin: 0 0 14px; padding: 4px 0; }
.install-back:hover { color: var(--text); }

.choice-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  display: flex; margin-bottom: 12px; overflow: hidden; position: relative; }
.choice-card-primary { border-color: var(--accent); }
.choice-bar { background: var(--accent); flex: 0 0 4px; width: 4px; }
.choice-body { flex: 1 1 auto; min-width: 0; padding: 16px 18px; }
.choice-body h4 { color: var(--text); font-size: 15px; margin: 0 0 6px; }
.choice-body > p { color: var(--text-2); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.choice-action { display: block; text-align: center; width: 100%; }
.choice-note { color: var(--text-2); font-size: 12px; margin: 10px 0 0; }
.choice-note a { color: var(--text); }

/* Per-OS run instructions. Two-up on desktop, stacked on narrow screens. */
.run-doc-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.run-doc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  display: flex; flex-direction: column; font-size: 13px; gap: 2px; padding: 11px 13px; text-decoration: none; }
.run-doc:hover { border-color: var(--text-2); }
.run-doc span { color: var(--text-2); font-size: 11.5px; }
@media (max-width: 520px) { .run-doc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Per-OS run instruction pages ───────────────────────────────────────── */
.run-doc-page { max-width: 760px; padding-bottom: 64px; }
.run-doc-page h2 { color: var(--text); font-size: 19px; margin: 34px 0 12px; }
.run-doc-page p { color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.run-doc-page code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 2px 6px; overflow-wrap: anywhere; }
.run-steps { color: var(--text-2); font-size: 14.5px; line-height: 1.9; margin: 0 0 18px; padding-left: 22px; }
.run-steps strong { color: var(--text); }
.run-pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; margin: 14px 0;
  overflow-x: auto; padding: 14px 16px; }
.run-pre code { background: none; border: 0; font-size: 13px; padding: 0; white-space: pre; }
.run-callout { background: var(--accent-fade); border: 1px solid var(--border-2); border-left: 3px solid var(--accent);
  border-radius: 6px; color: var(--text-2); font-size: 14px; line-height: 1.65; margin: 20px 0; padding: 14px 16px; }
.run-callout strong { color: var(--text); }
.run-note { border-top: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; margin-top: 28px; padding-top: 16px; }
.run-doc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.run-doc-links a { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  font-size: 13px; padding: 9px 14px; text-decoration: none; }
.run-doc-links a:hover { border-color: var(--border-hover); }
.intent-note { border-left: 3px solid var(--accent); padding-left: 10px; }

/* Documentation tables (setup guide build/hardware matrices). */
.doc-table { border-collapse: collapse; display: block; margin: 18px 0; overflow-x: auto; width: 100%; }
.doc-table th, .doc-table td { border: 1px solid var(--border); font-size: 14px; padding: 9px 12px; text-align: left; vertical-align: top; }
.doc-table th { background: var(--surface-2); color: var(--text); font-weight: 600; white-space: nowrap; }
.doc-table td { color: var(--text-2); }
.doc-table code { white-space: nowrap; }