/* retasc.com: shared styles. Tokens mirror dash/src/styles/tokens.css +
   queue.css (runtime + resume accents) so landing illustrations are the
   real product UI. Protocol Dark default / Structural Light. */

:root {
  --bg: #0a0a0a;
  --card: #111; --card-border: #1a1a1a;
  --surface: #191919; --surface-border: #252525;
  --fg: #f0f0f0; --fg-strong: #fff;
  --ink: #cfcfcf; --secondary: #a1a1a1; --muted: #8a8a8a; --dim: #444;
  --success: #4ade80; --success-bg: rgba(74,222,128,0.08); --success-border: rgba(74,222,128,0.15);
  --warning: #facc15; --warning-bg: rgba(250,204,21,0.08); --warning-border: rgba(250,204,21,0.18);
  --error: #f87171; --error-bg: rgba(248,113,113,0.08); --error-border: rgba(248,113,113,0.18);
  --resume: #5a9fd4; --resume-bg: rgba(90,159,212,0.10); --resume-border: rgba(90,159,212,0.22);
  --review: #b58bef; --review-bg: rgba(181,139,239,0.10); --review-border: rgba(181,139,239,0.22);
  --rt-claude: #d98a5b; --rt-codex: #4bb3a5; --rt-ci: #8b7fd4;
  --link-blue: #5a9fd4;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-card: 10px; --radius-pill: 100px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #E8E4DF; --card: #f5f2ee; --card-border: #d5d0ca;
    --surface: #ece8e3; --surface-border: #d0ccc7;
    --fg: #1a1a1a; --fg-strong: #000;
    --ink: #333; --secondary: #555; --muted: #666; --dim: #bbb;
    --success: #0c6e32; --success-bg: rgba(12,110,50,0.10); --success-border: rgba(12,110,50,0.20);
    --warning: #854d0e; --warning-bg: rgba(202,138,4,0.10); --warning-border: rgba(202,138,4,0.20);
    --error: #b91c1c; --error-bg: rgba(220,38,38,0.08); --error-border: rgba(220,38,38,0.18);
    --resume: #1d4ed8; --resume-bg: rgba(37,99,235,0.09); --resume-border: rgba(37,99,235,0.22);
    --review: #7c3aed; --review-bg: rgba(124,58,237,0.09); --review-border: rgba(124,58,237,0.22);
    --rt-claude: #b5652f; --rt-codex: #0f8579; --rt-ci: #6152b8;
    --link-blue: #1d4ed8;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
code, .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; }
em, i { font-style: normal; }
::selection { background: var(--fg); color: var(--bg); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--link-blue); outline-offset: 2px; border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
.tlink { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 2px; }
.hi { color: var(--fg); font-weight: 500; }

.page { max-width: 1040px; margin: 0 auto; padding: 0 28px 64px; }

/* ---------- Header / nav ---------- */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; position: relative; }
.logo { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; color: var(--fg); display: inline-flex; align-items: center; gap: 9px; }
.logo .glyph { width: 18px; height: 18px; display: block; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--secondary); transition: color .15s; letter-spacing: .02em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a.nav-cta { color: var(--fg); border: 1px solid var(--dim); border-radius: var(--radius-md); padding: 7px 14px; margin-left: 6px; transition: color .15s, border-color .15s, background .15s; }
.nav a.nav-cta:hover { color: var(--fg); border-color: var(--secondary); background: var(--surface); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--dim); color: var(--fg);
  font-family: 'JetBrains Mono', monospace; font-size: 18px; line-height: 1; border-radius: var(--radius-md);
  cursor: pointer; width: 34px; height: 32px; align-items: center; justify-content: center; padding: 0; }
.nav-toggle:hover { border-color: var(--secondary); }

/* ---------- Type ---------- */
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: flex-start; gap: 9px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); flex: none; margin-top: 5px; }
h2.eyebrow { margin: 0; }
/* Section title (RTSC-311). The scannable layer: the eyebrow is a kicker, the
 * white Space Grotesk title is what a scanning eye lands on (NN/g layer-cake).
 * Same scale slot the .mf manifesto used to occupy at gray. */
.stitle { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg); margin: 0 0 12px; max-width: 720px; text-wrap: balance; }
/* Lede, not manifesto: one ink, body face, ~70ch measure. The scan anchor is
 * the .stitle above it; this only has to be readable once the eye commits. */
.mf { font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 16px; line-height: 1.6; letter-spacing: 0;
  color: var(--ink); max-width: 34em; }
.mf-hi { color: var(--fg); }
/* Sized like the hero h1: ~94% fill of the widest common title line
 * ("Pay for work done,", 8.7em) at phone widths, capped at the desktop max. */
.ptitle { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(24px, 10.8vw - 4px, 38px);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); max-width: 720px; text-wrap: balance; }
.plede { font-size: 15px; color: var(--ink); margin-top: 16px; max-width: 510px; line-height: 1.6; }
.phead { padding: 56px 0 0; }
.phead .eyebrow { margin-bottom: 18px; }

/* ---------- Buttons ---------- */
.btn { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; padding: 8px 16px;
  border-radius: var(--radius-md); border: 1px solid; cursor: pointer; line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; user-select: none;
  transition: background .15s, border-color .15s, color .15s; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); padding: 9px 18px; }
.btn.primary:hover { background: var(--fg-strong); border-color: var(--fg-strong); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--secondary); }
.btn.ghost:hover { color: var(--fg); background: var(--surface); }

/* ---------- Badges & pills ---------- */
.badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--secondary);
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 4px 8px; display: inline-block; align-self: flex-start; letter-spacing: .02em; }
.st { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; white-space: nowrap; }
.st .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st.claimed { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.st.resumed { color: var(--resume); background: var(--resume-bg); border-color: var(--resume-border); }
.st.blocked { color: var(--error); background: var(--error-bg); border-color: var(--error-border); }
.st.todo { color: var(--secondary); background: var(--surface); border-color: var(--surface-border); }
.st.done { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.st.review { color: var(--review); background: var(--review-bg); border-color: var(--review-border); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; padding: 64px 0 0; }
.hero-copy { min-width: 0; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.9vw, 42px); line-height: 1.07; letter-spacing: -0.025em; color: var(--fg); }
.hero h1 .caret { display: inline-block; width: 3px; height: 0.8em; background: var(--fg);
  margin-left: 8px; vertical-align: -2px; animation: blink 1.15s steps(1) infinite; }
.hero .sub { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin-top: 20px; max-width: 460px; text-wrap: pretty; }
.hero .actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.hero .statusline { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  margin-top: 24px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hero .statusline .livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
.hero .statusline .sep { color: var(--dim); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Queue card (real dash UI: dash/src/styles/queue.css, compact) ---------- */
.q-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; }
.q-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--card-border); }
.q-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); display: inline-flex; align-items: center; gap: 9px; }
.q-eyebrow .live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.q-head .spacer { flex: 1; }
.fleet { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; }
.fleet .dots { display: inline-flex; gap: 3px; }
.fleet .dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.segs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--card-border); }
.seg { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--secondary); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; }
.seg.active { background: var(--surface); color: var(--fg); border-color: var(--surface-border); }
.seg .n { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: 1px 7px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.seg.active .n { color: var(--fg); border-color: var(--dim); }
.q-row { display: grid; grid-template-columns: 12px minmax(0,1fr) auto auto; gap: 3px 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--card-border); }
.q-row .st { grid-column: -2; justify-self: end; }
.q-row:last-child { border-bottom: 0; }
.prio { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }
.prio.urgent { background: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.prio.high { background: var(--warning); }
.prio.medium { background: var(--secondary); }
.prio.low { background: var(--dim); }
.q-row .issue { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.q-row .issue .id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg); font-weight: 500; flex: none; }
.q-row .issue .ttl { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row .sub { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.agent { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--fg); white-space: nowrap; }
.agent .rt { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--rt-ci); }
.agent.claude .rt { background: var(--rt-claude); }
.agent.codex .rt { background: var(--rt-codex); }
.agent.ci .rt { background: var(--rt-ci); }
.principal { font-size: 11px; color: var(--muted); }
.lease { display: inline-flex; align-items: center; gap: 8px; }
.lease .meter { width: 56px; height: 3px; border-radius: 2px; background: var(--surface-border); overflow: hidden; }
.lease .meter i { display: block; height: 100%; border-radius: 2px; background: var(--success); }
.lease.share .meter i { background: var(--secondary); }
.lease.warn .meter i { background: var(--warning); }
.lease .t { color: var(--secondary); font-variant-numeric: tabular-nums; }
.lease.warn .t { color: var(--warning); }
.note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.note.state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.note.resume { color: var(--resume); }
.note.warn { color: var(--warning); }

/* ---------- Mini illustrations ---------- */
/* One rhythm for every illustration: 14/16 padding, every row on the same
   9px cadence, hairline separators between rows (the lead-in .call line
   included). Anything with a full title gets its own line (.im-*) instead
   of truncating mid-word inside a shared row. */
.ill { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  display: flex; flex-direction: column; justify-content: center; overflow-x: auto; }
.cards3 .card .ill { min-height: 130px; }
.cards2 .card .ill { min-height: 152px; }
.ill .call { color: var(--muted); padding-bottom: 9px; border-bottom: 1px solid var(--surface-border); }
.ill .call b { color: var(--fg); font-weight: 500; }
/* key/value rows (the dash fact rail, flattened). In the narrow 3-up cards
   the key stacks above the value so values never truncate. */
.ill .kv { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; align-items: baseline; padding: 8px 0; }
.ill .kv + .kv { border-top: 1px solid var(--surface-border); }
.cards3 .ill .kv { grid-template-columns: minmax(0,1fr); gap: 3px; }
.fk { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
/* Values wrap — an infographic value is content; truncating it deletes the fact it carries. */
.fv { font-size: 11.5px; color: var(--fg); line-height: 1.4; min-width: 0; overflow-wrap: break-word; }
.fv.tint-ok { color: var(--success); }
.fv.tint-warn { color: var(--warning); }
.fv.tint-err { color: var(--error); }
.fv.tint-resume { color: var(--resume); }
/* generic list rows */
/* Mock rows stay single-line like the UI they depict; a row wider than the card
   scrolls the .ill sideways (min-width: max-content grows the row past the clip). */
.ill .mrow { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; min-width: max-content; }
.ill .mrow + .mrow { border-top: 1px solid var(--surface-border); }
.ill .mrow .id { color: var(--fg); font-weight: 500; flex: none; }
.ill .mrow .tt { color: var(--secondary); white-space: nowrap; flex: 1; }
.ill .mrow .prio { flex: none; }
.ill .mrow .lease, .ill .mrow .principal { margin-left: auto; }
/* mini issue card: header row / full-width title / relations row */
.ill .im-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; border-bottom: 1px solid var(--surface-border); }
.ill .im-title { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--fg);
  line-height: 1.45; padding: 9px 0; }
.ill .im-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--surface-border); }
.rel-chip { font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--surface-border); background: var(--card); color: var(--fg); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.rel-chip .rk { color: var(--muted); }
.rel-chip.err { color: var(--error); border-color: var(--error-border); }
.rel-chip.done { color: var(--success); border-color: var(--success-border); }
/* timeline (issue page activity log) */
.tl { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 12px 1fr; gap: 11px; padding-bottom: 13px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 13px; bottom: 0; width: 1px; background: var(--surface-border); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 2px; background: var(--dim); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.tl-dot.ok { background: var(--success); }
.tl-dot.warn { background: var(--warning); }
.tl-dot.resume { background: var(--resume); }
.tl-body { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink); line-height: 1.45; }
.tl-body b { color: var(--fg); font-weight: 500; }
.tl-body .tl-when { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); margin-left: 7px; }
/* formula */
.s-formula { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--secondary);
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-top: 16px; line-height: 1.55; white-space: normal; word-break: break-word; }
.s-formula b { color: var(--fg); font-weight: 500; }

/* ---------- Sections / cards ---------- */
/* Sections are rooms (RTSC-311): a hairline rule marks every section boundary
 * so consecutive blocks stop fusing into one continuous card texture. Same 1px
 * vocabulary as the FAQ rows and the footer rule. */
.block { margin-top: 48px; border-top: 1px solid var(--card-border); padding-top: 40px; }
.block > .eyebrow { margin-bottom: 14px; }
.block > .mf { margin-bottom: 32px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: 22px 22px 20px; display: flex; flex-direction: column; }
.card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.card .badge + h3, .card .badge ~ h3 { margin-top: 12px; }
.card p { font-size: 13px; color: var(--ink); line-height: 1.55; margin-top: 8px; }
.card .ill { margin-top: auto; }
.card p + .ill { margin-top: 14px; }
/* One-line command fields inside cards: explicit gap from the copy above,
   compact field height (the default codeblock padding is sized for
   multi-line blocks outside cards). */
.card .codeblock { margin-top: 14px; padding: 10px 58px 10px 14px; }
/* Scan-anchor glyph on TEXT-ONLY cards (the Xenarch lander's .ci pattern:
 * 24-grid, 1.75 stroke, currentColor). Cards that carry an .ill infographic
 * keep it as their anchor and never get an icon on top. */
.card .cico { display: block; width: 18px; height: 18px; color: var(--secondary); margin-bottom: 10px; }

/* ---------- CTA band ---------- */
.cta { margin-top: 64px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: 34px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta .t { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.cta .s { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.cta .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Matrix ---------- */
/* contain: paint stops the sticky first column's offset range from leaking
 * into the document's scrollable overflow (which let iOS pan the whole page
 * sideways); the wrap itself stays the scroll surface. */
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; background: var(--card);
  border: 1px solid var(--card-border); border-radius: var(--radius-card); }
.matrix { width: 100%; border-collapse: collapse; min-width: 600px; }
.matrix th, .matrix td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--card-border); vertical-align: top; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: none; }
.matrix thead th { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--fg); vertical-align: top; }
.matrix tbody th { font-weight: 500; color: var(--fg); font-size: 13px; white-space: nowrap; }
.matrix .note2 { display: block; white-space: normal; color: var(--muted); font-size: 11px; font-weight: 400; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.matrix td { font-size: 12.5px; }
.matrix .mk { display: inline-flex; margin-right: 7px; vertical-align: -1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.matrix .yes .mk { color: var(--success); }
.matrix .no .mk { color: var(--error); }
.matrix .part .mk { color: var(--warning); }
.matrix tr.is-retasc th, .matrix tr.is-retasc td { background: var(--surface); }
.matrix tr.is-retasc th { color: var(--fg-strong); }

/* ---------- FAQ (design system §Disclosure: native details rows) ---------- */
.faq { margin-top: 28px; border-top: 1px solid var(--card-border); }
.faq-item { border-bottom: 1px solid var(--card-border); }
/* Rules separate rows; the section that follows draws its own opener (matrix and q-row do the same). */
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 18px; padding: 17px 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--fg);
  transition: color .15s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; font-size: 15px;
  color: var(--muted); flex: none; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--fg-strong); }
.faq-a { font-size: 13.5px; color: var(--ink); line-height: 1.6; padding: 0 28px 18px 2px; max-width: 560px; }
.faq-a code { font-size: 12px; color: var(--fg); }

/* ---------- Code blocks / connect ---------- */
.codeblock { position: relative; cursor: copy; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  color: var(--fg); padding: 14px 68px 14px 16px; overflow-x: auto; }
.codeblock .code { margin: 0; white-space: pre; font: inherit; color: inherit; line-height: 1.55; }
.codeblock .pr { color: var(--muted); }
/* Prose variant: content is sentences, not a command. The base block is `pre`
   + overflow-x so a long `claude mcp add …` scrolls rather than folding mid-flag;
   paragraphs want the opposite. Wrapping only at the phone breakpoint left the
   tablet range scrolling horizontally, so wrap at every width and open the
   leading to prose measure. */
.codeblock.prose .code { white-space: pre-wrap; word-break: break-word; line-height: 1.65; }
/* Reference text, not reading text (RTSC-311): the prompt is pasted, not read.
 * Width hugs the text column instead of leaving a dead right half, and the
 * fine-print paragraphs drop one brightness tier so the single bright line is
 * the one a scanner actually needs. Gray tiers only, per the codeblock rule. */
.codeblock.prose { max-width: 720px; }
.codeblock .code .dim { color: var(--secondary); }
.copy-btn { position: absolute; top: 9px; right: 9px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--secondary); background: transparent; border: none;
  border-radius: var(--radius-sm); padding: 4px 9px; cursor: pointer; transition: color .15s, background .15s; }
.copy-btn:hover { color: var(--fg); background: var(--surface); }
.copy-btn[data-ok] { color: var(--success); }
.codeblock[data-ok] { border-color: var(--success-border); }
.codeblock[data-ok]::after { content: "copied"; position: absolute; right: 12px; bottom: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--success); }
/* Hints are sentences: prose voice (mono is for the data inside them). */
.connect-hint { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.connect-hint code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--secondary); }
.connect-lead { font-size: 13.5px; color: var(--ink); margin: 26px 0 12px; max-width: 640px; }
.connect-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 14px;
  scrollbar-width: none; }
.connect-tabs::-webkit-scrollbar { display: none; }
.connect-tab { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--secondary);
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  padding: 6px 12px; cursor: pointer; user-select: none; transition: color .15s, border-color .15s, background .15s; }
.connect-tab:hover { color: var(--fg); border-color: var(--dim); }
.connect-tab[aria-selected="true"] { color: var(--bg); border-color: var(--fg); background: var(--fg); }
.connect-panel { display: none; }
.connect-panel[data-active] { display: block; }
/* A card grid summarising the panels above it. Inactive panels are display:none,
   so space the grid itself rather than leaning on a margin from whichever panel
   happens to be showing. */
.connect-panel + .cards2 { margin-top: 28px; }

/* ---------- Pricing tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.tier { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px; }
.tier .price { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; color: var(--fg); margin-top: 12px; font-variant-numeric: tabular-nums; }
.tier .per { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.tier p { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-top: 10px; }
.tier .ops { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* ---------- Footer ---------- */
.ftr { margin-top: 64px; padding: 22px 0; border-top: 1px solid var(--card-border); }
.ftr-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.ftr-l { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.ftr-r { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ftr a { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); transition: color .15s; }
.ftr a:hover { color: var(--fg); }
.ftr .sep { color: var(--dim); font-size: 12px; }
.ftr-legal { margin-top: 14px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); }
.ftr-legal a { font-size: 11.5px; }

/* ---------- Proof strip ---------- */
.proofline { margin-top: 20px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.proofline b { color: var(--fg); font-weight: 500; font-size: 15px; }
.proofline .sep { color: var(--dim); }

/* ---------- Legal prose ---------- */
.legal { max-width: 720px; }
.legal .updated { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 14px; }
.legal h2 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--fg); margin: 34px 0 10px; }
.legal p, .legal li { font-size: 13.5px; color: var(--ink); line-height: 1.65; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Guides ---------- */
/* Article pages read in a centered column: ~70ch measure, 16px/1.7 body. */
.phead-guide, .guide { max-width: 680px; margin-inline: auto; }
.phead-guide .plede { font-size: 16.5px; max-width: none; }
.guide h2 { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg); margin-bottom: 14px; scroll-margin-top: 24px; }
.guide .block { margin-top: 56px; }
.guide p { font-size: 16px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.guide p + p { margin-top: 14px; }
.guide code { font-size: 14px; }
.guide .cards3 { grid-template-columns: minmax(0,1fr); gap: 10px; margin: 20px 0; }
.guide .card h3 { font-size: 15px; }
.guide .card p { font-size: 14px; line-height: 1.6; }
.guide .cards3 + p, .guide .ill + p, .guide .codeblock + p { margin-top: 14px; }
.guide .ill { margin: 20px 0; }
/* Guide kv labels run longer than the product page's (e.g. "3 · dispatch");
 * the sitewide 64px column wraps them. */
.guide .ill .kv { grid-template-columns: 100px minmax(0,1fr); }
.guide .codeblock { margin: 14px 0; }
.guide .faq-a { font-size: 14.5px; line-height: 1.65; }
.guide .actions { margin-top: 24px; }
.guide-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 16px; }
.guide-toc { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 2;
  color: var(--muted); margin: 28px 0 0; max-width: 680px; margin-inline: auto; }
.guide-toc .sep { color: var(--dim); padding: 0 7px; }
.guide-toc a { color: var(--secondary); }
.guide-toc a:hover { color: var(--fg-strong); }

/* Guides index: full-width list rows; the pipeline shows as muted rows. */
.guide-list { border-top: 1px solid var(--card-border); margin-top: 8px; }
/* A list-only block (guides.html) would stack the list's rule under the block's own — keep one. */
.block > .guide-list:first-child { border-top: 0; margin-top: 0; }
.guide-row { display: flex; align-items: baseline; gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--card-border); }
.guide-row:last-child { border-bottom: 0; }
.guide-row-main { min-width: 0; }
.guide-row h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--fg); }
a.guide-row:hover h3 { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 3px; }
.guide-row p { font-size: 14px; line-height: 1.6; color: var(--ink); margin-top: 6px; max-width: 560px; text-wrap: pretty; }
.guide-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted);
  margin-left: auto; flex: none; white-space: nowrap; }
.guide-row.soon h3 { color: var(--secondary); }
.guide-row.soon p { color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { display: block; padding: 44px 0 0; }
  /* Stacked hero: the headline owns the full column, so size it to fill
   * (~94% of the longest line at phone widths), capped at the desktop max. */
  .hero h1 { font-size: clamp(30px, 11.9vw - 4px, 42px); }
  .hero-vis { margin-top: 28px; max-width: 560px; }
  .cards3, .cards2 { grid-template-columns: minmax(0,1fr); }
  .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .qa-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .page { padding: 0 18px 44px; }
  .nav-toggle { display: inline-flex; }
  .nav-toggle[aria-expanded="true"] { position: fixed; top: 14px; right: 18px; z-index: 201; font-size: 0; }
  .nav-toggle[aria-expanded="true"]::before { content: "\00d7"; font-size: 26px; line-height: 1; }
  .nav { display: none; }
  .nav.open { display: flex; position: fixed; inset: 0; z-index: 200; background: var(--bg);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 76px 34px 44px; }
  .nav.open a { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 600;
    color: var(--ink); padding: 14px 2px; letter-spacing: -0.01em; }
  .nav.open a:hover, .nav.open a[aria-current="page"] { color: var(--fg-strong); }
  .nav.open a.nav-cta { margin-top: 22px; align-self: flex-start; font-family: 'JetBrains Mono', monospace;
    font-size: 15px; font-weight: 500; color: var(--fg); border: 1px solid var(--dim); border-radius: 8px; padding: 14px 22px; }
  /* Harness tabs: one swipeable row instead of a ragged wrap. */
  .connect-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .connect-tab { flex: none; }
  /* Code blocks are tap-to-copy; the explicit Copy control is desktop-only
   * (it overlapped code at phone widths). Feedback = success border +
   * transient "copied" on the block. */
  .codeblock { padding: 12px 14px; font-size: 12px; }
  .codeblock .code { white-space: pre-wrap; word-break: break-word; }
  .copy-btn { display: none; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; }
  /* Ledes are 16px Inter at every width now (RTSC-311); phones only tighten
   * the section title. */
  .stitle { font-size: 20px; }
  /* Footer on phones: a wrapped slash-row is ragged at SOME width no matter
   * what (dangling separators, orphan links). Structure instead: tagline, then
   * links in fixed 3-up columns (aligned at every width, no wrap accidents),
   * then a hairline-divided legal band with the copyright line last. */
  .ftr .sep { display: none; }
  .ftr-row, .ftr-legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr-r { display: grid; grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start; column-gap: 32px; row-gap: 12px; }
  .ftr-legal { border-top: 1px solid var(--card-border); margin-top: 18px; padding-top: 16px; }
  .ftr-legal > span { order: 2; }
  /* The email is column-width poison (it would size a whole column); it gets
   * its own full row so Terms / Privacy / GitHub align tight. */
  .ftr-legal .ftr-r a[href^="mailto:"] { grid-column: 1 / -1; }
  /* Authored title breaks assume desktop line lengths ("Everyone owns one
   * column." is 12.9em — unholdable at phone widths), so collapse them and
   * let text-wrap: balance set the breaks. */
  .ptitle br { display: none; }
  .plede { font-size: 14px; }
  .guide h2 { font-size: 20px; }
  .guide-row { flex-wrap: wrap; gap: 6px 24px; }
  .guide-row-meta { margin-left: 0; width: 100%; }
  .block { margin-top: 30px; padding-top: 26px; }
  .block > .mf { margin-bottom: 22px; }
  .card { padding: 18px 16px 16px; }
  .ref, .connect { margin-top: 44px; padding-top: 28px; }
  /* Hero queue card: agent drops to a second line so the row's minimum
   * width never exceeds the viewport (it was widening the whole page). */
  .q-row { grid-template-columns: 12px minmax(0,1fr) auto; }
  .q-row .agent { grid-column: 2 / -1; grid-row: 2; }
  .q-head .fleet { display: none; }
  .tiers { grid-template-columns: minmax(0,1fr); }
  .cta { padding: 26px 22px; }
  .matrix th[scope="row"], .matrix thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--card);
    box-shadow: 1px 0 0 var(--card-border); }
  .matrix tr.is-retasc th[scope="row"] { background: var(--surface); box-shadow: 1px 0 0 var(--card-border); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}