/* quant.avasis.ai — "terminal ledger"
   Dark instrument panel: hairline rules instead of cards, tabular numerals
   everywhere, green/red reserved for genuine market semantics (a number that
   is actually up or actually down), amber for the brand and for actions. */

:root {
  --bg:       #07080A;
  --bg-2:     #0C0E11;
  --bg-3:     #12151A;
  --bg-4:     #171B21;
  --line:     #1D2128;
  --line-2:   #2A3039;
  --ink:      #E9ECEF;
  --ink-2:    #A5ADB6;
  --ink-3:    #6C757F;
  --ink-4:    #4A525B;
  --up:       #33D69F;
  --down:     #FF5D5D;
  --accent:   #FFB224;
  --accent-2: #FFD37A;
  --accent-d: #7A5410;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --wide: 1200px;
  --nav-h: 56px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

code, kbd, pre, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

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

/* focus visibility — keyboard users must be able to see where they are */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 28px; }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow.accent { color: var(--accent); }

/* -------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(7,8,10,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { max-width: var(--wide); margin: 0 auto; padding: 0 28px; height: 100%;
  display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 9px; font-family: var(--disp);
  font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand svg { display: block; }

.nav-links { display: flex; align-items: center; gap: 22px; margin-left: 6px; }
.nav-links a { color: var(--ink-2); font-size: 14px; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

.nav-icon { color: var(--ink-3); display: flex; }
.nav-icon:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--accent); color: #140D00; }
.btn-primary:hover { background: var(--accent-2); color: #140D00; }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg-3); }
.btn-lg { padding: 13px 24px; font-size: 15px; }

/* ------------------------------------------------------------- the dial */
/* Two-position instrument switch: HUMAN | AGENT. It is a link, not a toggle —
   flipping it goes to the other side of the site. */
.dial {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--bg-2); overflow: hidden; height: 30px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
}
.dial span, .dial a { display: flex; align-items: center; padding: 0 11px; color: var(--ink-3); transition: background .14s, color .14s; }
.dial .on { background: var(--accent); color: #140D00; font-weight: 500; }
.dial a:hover { background: var(--bg-4); color: var(--ink); }
.dial .sep { padding: 0; width: 1px; background: var(--line-2); }

/* ---------------------------------------------------------------- ticker */
.ticker { border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.ticker-track { display: flex; gap: 0; width: max-content; animation: slide 64s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick { display: flex; align-items: baseline; gap: 9px; padding: 8px 20px;
  border-right: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.tick b { font-weight: 400; color: var(--ink-3); letter-spacing: 0.06em; }
.tick i { font-style: normal; color: var(--ink); }
.tick .up { color: var(--up); }
.tick .down { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before {
  /* faint ledger grid, fading out downward — texture, not decoration */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.34;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 60px;
  align-items: center; padding: 76px 0 84px; }
.hero h1 { font-size: 58px; letter-spacing: -0.035em; margin: 18px 0 20px; }
.hero .lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; max-width: 34em; }
.hero .sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); margin: 0 0 28px; max-width: 34em; }
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-note { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }

.num-up { color: var(--up); }
.num-down { color: var(--down); }

/* ------------------------------------------------------- connect / tabs */
.connect { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.connect-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.connect-tabs::-webkit-scrollbar { display: none; }
.connect-tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em;
  padding: 11px 16px; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s;
}
.connect-tabs button:hover { color: var(--ink-2); }
.connect-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.connect-body { position: relative; }
.connect-pane { display: none; }
.connect-pane[data-on="1"] { display: block; }
.connect-pane pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-size: 13px; line-height: 1.65; color: var(--ink); }
.connect-pane .cap { padding: 0 20px 16px; font-size: 13px; color: var(--ink-3); margin: 0; }
.copy-btn {
  position: absolute; top: 12px; right: 12px;
  background: var(--bg-4); border: 1px solid var(--line-2); color: var(--ink-3);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px; cursor: pointer; transition: color .12s, border-color .12s;
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink-4); }
.copy-btn.done { color: var(--up); border-color: var(--up); }

/* --------------------------------------------------------------- section */
.section { border-bottom: 1px solid var(--line); padding: 78px 0; }
.section-head { max-width: 42em; margin-bottom: 44px; }
.section-head h2 { font-size: 38px; margin: 14px 0 14px; }
.section-head p { font-size: 17px; color: var(--ink-2); margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------- the proof */
.proof { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: start; }
.proof-stats { display: flex; flex-direction: column; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line); gap: 20px; }
.stat-row:first-child { border-top: 1px solid var(--line); }
.stat-row .k { font-size: 14.5px; color: var(--ink-2); }
.stat-row .v { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.stat-row .v.big { font-size: 25px; }
.callout { border-left: 2px solid var(--accent); background: var(--bg-2);
  padding: 15px 18px; margin-top: 24px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.chart-panel { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); padding: 22px 24px 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.chart-legend { display: flex; gap: 18px; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.swatch { width: 9px; height: 9px; border-radius: 1px; display: block; }

/* --------------------------------------------------------------- feature */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cell { background: var(--bg); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.cell:hover { background: var(--bg-2); }
.cell .ic { color: var(--accent); margin-bottom: 2px; }
.cell h3 { font-size: 16.5px; letter-spacing: -0.01em; }
.cell p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.cell .tool { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------------ stats strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Direct children only. `.strip div` also matched .n and .l, so the number and
   the label each carried the cell's 30px/26px padding -- a 36px line inside a
   96px box, and a cell half again as tall as its content. */
.strip > div { background: var(--bg); padding: 30px 26px; }
.strip .n { font-family: var(--disp); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.strip .l { font-size: 13.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.45; }

/* ------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step .n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.12em; }
.step h3 { font-size: 17px; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }

/* ------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2);
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.plan.mark { border-color: var(--accent-d); background: var(--bg-3); }
.plan .price { font-family: var(--disp); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-left: 5px; }
.plan .blurb { font-size: 14px; color: var(--ink-3); margin: 0; min-height: 3.2em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); gap: 14px; }
.plan li span:last-child { font-family: var(--mono); color: var(--ink); }
.plan .btn { margin-top: auto; }

/* ----------------------------------------------------------------- FAQ */
.faq { max-width: 46em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--disp); font-weight: 600;
  font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); font-weight: 400; font-size: 18px; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
.faq .a p { margin: 0 0 12px; }
.faq .a p:last-child { margin: 0; }

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 52px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer a { color: var(--ink-3); font-size: 14px; }
.footer a:hover { color: var(--ink); }
.footer-bot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.disclaimer { font-size: 12.5px; color: var(--ink-4); line-height: 1.6; max-width: 62ch; margin: 14px 0 0; }

/* ----------------------------------------------------------------- docs */
.docs { display: grid; grid-template-columns: 232px minmax(0,1fr) 188px; gap: 44px;
  max-width: var(--wide); margin: 0 auto; padding: 0 28px; align-items: start; }
.sidebar { position: sticky; top: calc(var(--nav-h) + 26px); max-height: calc(100vh - var(--nav-h) - 52px);
  overflow-y: auto; padding: 32px 0 40px; }
.sidebar h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; margin: 22px 0 10px; }
.sidebar h4:first-child { margin-top: 0; }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar a { display: block; color: var(--ink-3); font-size: 13.5px; padding: 5px 10px;
  border-radius: 3px; border-left: 2px solid transparent; }
.sidebar a:hover { color: var(--ink); background: var(--bg-2); }
.sidebar a.on { color: var(--accent); border-left-color: var(--accent); background: var(--bg-2); }

.doc { padding: 34px 0 90px; min-width: 0; }
.doc-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 14px; }
.doc h1 { font-size: 38px; margin: 0 0 14px; letter-spacing: -0.03em; }
.doc .doc-lede { font-size: 17.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 34px; }
.doc h2 { font-size: 25px; margin: 46px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 18px; margin: 30px 0 10px; }
.doc h4 { font-size: 15.5px; margin: 22px 0 8px; font-family: var(--disp); }
.doc p { margin: 0 0 15px; line-height: 1.72; color: var(--ink-2); }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); line-height: 1.72; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--ink-4); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc em { color: var(--ink); }
.doc code { background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px; font-size: 0.875em; color: var(--accent-2); }
.doc pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; font-size: 13px; line-height: 1.62; }
.doc pre code { background: none; border: 0; padding: 0; color: var(--ink); font-size: 13px; }
.doc blockquote { margin: 0 0 18px; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent);
  color: var(--ink-2); }
.doc blockquote p:last-child { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; }
.doc td { color: var(--ink-2); }
.doc a { border-bottom: 1px solid var(--accent-d); }
.doc a:hover { border-bottom-color: var(--accent); }
.doc hr { margin: 34px 0; }
.doc img { max-width: 100%; }

.anchor { color: var(--ink-4); opacity: 0; margin-left: 8px; font-weight: 400; border: 0 !important; font-size: 0.8em; }
.doc h2:hover .anchor, .doc h3:hover .anchor { opacity: 1; }

.toc { position: sticky; top: calc(var(--nav-h) + 26px); padding: 36px 0; max-height: calc(100vh - var(--nav-h) - 52px); overflow-y: auto; }
.toc h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; margin: 0 0 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.toc a { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; display: block; }
.toc a:hover { color: var(--ink); }
.toc a.lvl3 { padding-left: 12px; font-size: 12px; }

.doc-nav { display: flex; justify-content: space-between; gap: 18px; margin-top: 58px;
  padding-top: 26px; border-top: 1px solid var(--line); }
.doc-nav a { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 18px; flex: 1; max-width: 48%; }
.doc-nav a:hover { border-color: var(--line-2); background: var(--bg-2); }
.doc-nav .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.doc-nav .ttl { color: var(--ink); font-size: 14.5px; font-weight: 600; font-family: var(--disp); }
.doc-nav .nx { text-align: right; margin-left: auto; }

/* ------------------------------------------------------------ tool cards */
.tool-card { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2);
  margin-bottom: 14px; overflow: hidden; }
.tool-card summary { cursor: pointer; list-style: none; padding: 13px 18px; display: flex;
  align-items: center; gap: 12px; }
.tool-card summary::-webkit-details-marker { display: none; }
.tool-card summary::after { content: "+"; font-family: var(--mono); color: var(--ink-4); margin-left: auto; }
.tool-card[open] summary::after { content: "\2212"; }
.tool-card[open] summary { border-bottom: 1px solid var(--line); }
.tool-card .nm { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.tool-card .sm { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.tool-body { padding: 16px 18px 6px; }
.tool-body p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.65; }
.tool-body pre { font-size: 12.5px; }
.params { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.params th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; text-align: left; padding: 0 14px 7px 0; border-bottom: 1px solid var(--line); }
.params td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.params td.p { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.params td.t { font-family: var(--mono); color: var(--ink-4); font-size: 12px; white-space: nowrap; }
.req { color: var(--accent); font-size: 11px; font-family: var(--mono); }

.tool-filter { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 11px 14px; color: var(--ink); font-family: var(--mono); font-size: 13px; margin-bottom: 20px; }
.tool-filter::placeholder { color: var(--ink-4); }
.tool-filter:focus { border-color: var(--accent); outline: none; }

/* ---------------------------------------------------------- agents page */
.agent-hero { border-bottom: 1px solid var(--line); padding: 62px 0 52px; position: relative; overflow: hidden; }
.agent-hero h1 { font-size: 46px; letter-spacing: -0.032em; margin: 16px 0 18px; }
.agent-hero .lede { font-size: 18px; color: var(--ink-2); max-width: 40em; line-height: 1.6; margin: 0; }

.promptbox { border: 1px solid var(--line-2); border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.promptbox-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg); }
.promptbox-head .t { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); }
.promptbox-head .actions { margin-left: auto; display: flex; gap: 8px; }
.promptbox pre { margin: 0; padding: 20px; max-height: 520px; overflow: auto; font-size: 12.5px;
  line-height: 1.68; color: var(--ink-2); white-space: pre-wrap; word-wrap: break-word; }
.promptbox pre::-webkit-scrollbar { width: 10px; }
.promptbox pre::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }

.map-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.map-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; text-align: left; padding: 0 16px 9px 0; border-bottom: 1px solid var(--line); }
.map-table td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.map-table td.u { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* ------------------------------------------------------------ utilities */
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #140D00;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 3px 0; font-weight: 600; }
.skip:focus { left: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-3); }

/* --------------------------------------------------------------- mobile */
.menu-btn { display: none; background: none; border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--ink-2); padding: 6px 9px; cursor: pointer; }

@media (max-width: 1080px) {
  .docs { grid-template-columns: 210px minmax(0,1fr); gap: 32px; }
  .toc { display: none; }
  .hero-in { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 48px; }
  .proof { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .docs { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; position: static; max-height: none; padding: 20px 0 0; }
  .sidebar.open { display: block; }
}

@media (max-width: 640px) {
  .wrap, .nav-in, .docs { padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: 37px; letter-spacing: -0.03em; }
  .hero-in { padding: 48px 0 54px; }
  .hero .lede { font-size: 17px; }
  .section { padding: 54px 0; }
  .section-head h2 { font-size: 29px; }
  .grid-3 { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .doc h1 { font-size: 30px; }
  .doc h2 { font-size: 22px; }
  .agent-hero h1 { font-size: 34px; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-right { gap: 10px; }
  .btn { padding: 8px 13px; font-size: 13px; }
  .doc-nav { flex-direction: column; }
  .doc-nav a { max-width: none; }
}

/* ---------------------------------------------------- narrow-screen nav fit
   At 390px the nav row (brand + dial + icon + CTA + menu) is about 60px wider
   than the viewport, and a flex row that cannot shrink widens the BODY --
   which is why every section below it was overflowing rather than wrapping.
   Dropping the second half of the wordmark and the GitHub icon buys back more
   than enough without losing the dial or the call to action. */
@media (max-width: 640px) {
  /* 354px of usable nav width will not hold brand + dial + icon + CTA + menu.
     The dial is the one control with no other route to it, so it stays; the
     GitHub icon and the nav CTA both repeat further down the page and go. */
  .nav-right .nav-icon { display: none; }
  .nav-right > .btn-primary { display: none; }
  .nav-in { gap: 12px; }
  .nav-right { gap: 10px; }
  .dial { height: 28px; }
  .dial span, .dial a { padding: 0 10px; letter-spacing: 0.08em; }
}
/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's min-content width. The connect block holds an
   unbreakable command line, so its column demanded ~640px and widened the BODY
   -- every section below it then laid out against that width and ran off the
   right edge of a phone. overflow-x:auto on the <pre> does not help while its
   ancestors can still grow. min-width:0 is the actual fix: it lets the column
   shrink and hands the overflow to the scroll container that was always there.
   Deliberately NOT paired with overflow-x:hidden on body -- that would hide a
   future regression of exactly this kind instead of showing it. */
.hero-in > *, .proof > *, .grid-3 > *, .strip > *, .plans > *, .steps > *,
.docs > *, .connect, .connect-body, .connect-pane, .promptbox { min-width: 0; }