:root{--ink:#1A1B20;--ink-strong:#0D0E12;--paper:#F2F4FA;--paper-2:#E6EAF3;--lime-50:#E7F0FF;--lime-100:#CFE2FF;--lime-300:#6EA8FE;--lime-500:#0D6EFD;--lime-600:#0B5ED7;--lime-700:#0A4DAE;--lime-ink:#08316E;--lime-soft:#DCEAFF;--coral-500:#FF6B3D;--amber-500:#F5B400;--text:#1A1B20;--text-muted:#5E626E;--text-faint:#888D99;--text-on-lime:#FFFFFF;--text-on-ink:#EEF1F8;--app-canvas:#1F1F1D;--app-sunken:#18181A;--app-card:#232325;--app-raised:#2E2E31;--app-border:#2E2E31;--focus-ring:0 0 0 3px rgba(13, 110, 253, 0.45);--shadow-sm:0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);--shadow-md:0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.12);--ease-out:cubic-bezier(0.22, 1, 0.36, 1);--dur-fast:120ms;--dur-base:180ms;--fs-display-xl:clamp(44px, 6.4vw, 88px);--fs-display-lg:clamp(38px, 5.2vw, 68px);--fs-display-md:clamp(32px, 4.2vw, 52px);--fs-display-sm:clamp(27px, 3.2vw, 39px);--fs-h1:clamp(27px, 3vw, 39px);--fs-h2:clamp(22px, 2.3vw, 29px);--fs-h3:21px;--fs-body-lg:18px;--fs-body:16px;--fs-body-sm:14px;--fs-caption:12.5px;--fs-eyebrow:11.5px}

:root{
  --ff-display:"Archivo","Inter Tight",sans-serif;
  --ff-body:"Inter Tight",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rule:rgba(26,27,32,.14);
  --rule-soft:rgba(26,27,32,.08);
  --rule-strong:rgba(26,27,32,.28);
  --rule-ink:rgba(238,241,248,.18);
  --on-ink-dim:rgba(238,241,248,.66);
  --gutter:20px;
  --measure:68ch;
  --display-wdth:100%;
  --label:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:#FFFFFF;
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
}

/* Browser surfaces: selection, caret, scrollbars and rings are part of the
   design, not the user agent's to decide. */
::selection{background:var(--lime-100);color:var(--lime-ink)}
body{caret-color:var(--lime-600);scrollbar-color:var(--rule-strong) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid #FFFFFF}
::-webkit-scrollbar-thumb:hover{background:rgba(26,27,32,.45)}
:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:0}
:where(h1,h2,h3){margin:0}
:where(p,ul,ol,dl,dd,figure){margin:0}
:where(ul,ol){padding:0;list-style:none}

/* Links are ink with a quiet rule, not blue. The accent is a scarce signal on
   this site — one element per screen — and a page with five blue "Detail" links
   in one table spends it five times over and points at none of them. */
a{color:var(--ink);text-decoration-thickness:1px;text-decoration-color:var(--rule-strong);text-underline-offset:0.18em;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--lime-ink);text-decoration-color:currentColor}
/* :not(.btn) matters — a button carries its own ground, and without the guard
   this rule is more specific than .btn--on-ink and paints a near-white label
   onto a near-white button. */
.section--ink a:not(.btn),.close a:not(.btn){color:var(--text-on-ink);text-decoration-color:var(--rule-ink)}
.section--ink a:not(.btn):hover,.close a:not(.btn):hover{color:var(--lime-300);text-decoration-color:currentColor}
code,pre,.tnum,.mono{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;max-width:calc(1180px + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font-family:var(--ff-mono);font-size:13px;text-decoration:none;
}
.skip:hover,.skip:focus{color:var(--paper)}
.skip:focus{left:0}

/* ── Type ─────────────────────────────────────────────────────────────── */
.hero__title,.page__title,.section__title,.close__title,.nav__mark,.foot__mark,.ledger__title,.platform__name,.faq__q{
  font-family:var(--ff-display);
  font-stretch:var(--display-wdth);
  text-wrap:balance;
}
.hero__title{font-size:var(--fs-display-lg);font-weight:600;line-height:1.0;letter-spacing:-0.032em;color:var(--ink)}
.page__title{font-size:var(--fs-display-md);font-weight:600;line-height:1.03;letter-spacing:-0.030em;color:var(--ink)}
.section__title{font-size:var(--fs-display-sm);font-weight:600;line-height:1.06;letter-spacing:-0.026em;color:var(--ink)}
.lead{font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-muted);max-width:52ch;text-wrap:pretty}
p{text-wrap:pretty}

/* Mono label: every eyebrow, column head, index and unit on the site. */
.section-register,.hero__reach-label,.code__lang,.code__status,.code__copy,.foot__label,
.spec thead th,.ledger__num,.counts__num,.price__unit,.price__billed,.nav__links a,.foot__col a{
  font-family:var(--ff-mono);
  letter-spacing:.08em;
}
.section-register{
  display:block;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ink);
  font-size:var(--label);text-transform:uppercase;font-weight:500;line-height:1;color:var(--text-muted);
}
.section--ink .section-register{color:var(--on-ink-dim);border-bottom-color:var(--rule-ink)}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section{padding-block:56px}
.section--white{background:#FFFFFF}
.section--paper{background:var(--paper);border-block:1px solid var(--rule)}
.section--ink{background:var(--ink);color:var(--text-on-ink)}
.section--ink .section__title{color:var(--text-on-ink)}
.section__head{margin-bottom:28px}
.section__lead{margin-top:12px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-muted);max-width:58ch}
.section--ink .section__lead{color:var(--on-ink-dim)}

/* ── Controls: square, never pills ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:13px 22px;border:1px solid transparent;border-radius:0;
  font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
/* The accent fill belongs to exactly one control on the whole site: the key in
   the header bar, which is the only action that persists on every screen. Every
   other primary is ink, so blue never has to compete with itself. */
.btn--accent{background:var(--lime-500);color:var(--text-on-lime);border-color:var(--lime-500)}
.btn--accent:hover{background:var(--lime-600);border-color:var(--lime-600);color:var(--text-on-lime)}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ink:hover{background:var(--ink-strong);border-color:var(--ink-strong);color:#FFFFFF}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--on-ink{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--on-ink:hover{background:#FFFFFF;color:var(--ink)}
.btn--line-ink{background:transparent;color:var(--text-on-ink);border-color:rgba(238,241,248,.42)}
.btn--line-ink:hover{border-color:var(--paper);color:var(--text-on-ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Not sticky on a phone: a bar plus an open menu costs the whole viewport, and
   the primary action repeats in the hero, the pricing panel and the close.
   Sticky returns at desktop, where the bar is 60px (7% of the viewport). */
.nav{position:relative;background:#FFFFFF;border-bottom:1px solid var(--ink)}
.nav__inner{display:flex;align-items:center;gap:12px;min-height:58px}
.nav__mark{flex:1 1 auto;font-size:19px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);text-decoration:none}
.nav__mark:hover{color:var(--ink)}
.nav__mark[aria-current="page"]::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;background:var(--ink);vertical-align:0.12em}
.nav__burger{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 15px;border:1px solid var(--ink);border-radius:0;background:transparent;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);cursor:pointer;
}
.nav__burger:hover{background:var(--ink);color:var(--paper)}
.nav__menu{
  display:none;position:fixed;inset:58px 0 0 0;z-index:12;
  background:#FFFFFF;border-top:1px solid var(--ink);
  padding:0 var(--gutter) 40px;overflow-y:auto;overscroll-behavior:contain;
}
[data-burger][aria-expanded="true"] ~ .nav__menu{display:block}
.nav__item{border-bottom:1px solid var(--rule)}
.nav__top{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;font-weight:500;
  color:var(--text-muted);text-decoration:none;
}
.nav__top:hover{color:var(--ink)}
.nav__top[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.chev{width:9px;height:6px;flex:0 0 9px;transition:transform var(--dur-fast) var(--ease-out)}
[aria-expanded="true"] > .chev{transform:rotate(180deg)}
.nav__actions{display:flex;align-items:center;gap:12px;padding-top:20px}
.nav__sign{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);text-decoration:none;
}
.nav__sign:hover{color:var(--ink)}
.nav__cta{flex:1 1 auto;min-height:44px;padding:11px 18px;font-size:14px}

/* ── Mega panels ──────────────────────────────────────────────────────── */
.panel{display:none;position:static}
[data-panel][aria-expanded="true"] + .panel{display:block}
.panel__inner{padding:2px 0 18px}
.panel__grid{display:grid;gap:18px}
.panel__label{
  display:block;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--ink);
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:500;color:var(--ink);
}
.panel__lead{margin:8px 0 10px;font-size:13px;line-height:1.5;color:var(--text-muted)}
/* One column, because "VS Code (Copilot agent mode)" and "JetBrains AI
   Assistant" need the whole of it — a two-column split truncated the names
   that most needed reading. The soon list pairs up: those names are short and
   there are twenty of them. */
.panel__list--agents{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
.panel__list--agents[data-agents="soon"]{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Sentence case, unlike every other mono label on the site: this one is a
   whole sentence, and uppercase at 57 characters stops being a label and
   starts being body text set the hard way to read. */
.panel__all{
  display:flex;align-items:center;min-height:44px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
}
.panel__all:hover{color:var(--lime-ink);text-decoration:underline}
.panel .entry__row{gap:8px;font-size:12.5px;min-height:30px}
.panel .entry__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .flag{padding:1px 4px;font-size:11px;letter-spacing:0}

/* ── Code / terminal panels ───────────────────────────────────────────── */
.code{margin:0;border:1px solid var(--ink);border-radius:0;background:var(--ink-strong);color:var(--text-on-ink)}
.code + .code{margin-top:-1px}
.code__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--rule-ink);background:var(--app-sunken);
}
.code__lang{font-size:var(--label);text-transform:uppercase;color:var(--on-ink-dim)}
/* A tool name is a lowercase identifier. Shouting it as LIST_ACCOUNTS prints a
   string that does not exist in the API. */
.code--response .code__lang{text-transform:none;letter-spacing:.04em;font-size:12px}
.code__status{font-size:var(--label);color:var(--on-ink-dim)}
/* rgba(238,241,248,.42) measures 3.7:1 against --ink-strong; the --rule-ink
   this used was 1.69:1, which is fine for a divider and fails WCAG 1.4.11 for
   the visible boundary of a control. */
.code__copy{
  appearance:none;min-height:34px;padding:8px 13px;border-radius:0;cursor:pointer;
  background:transparent;border:1px solid rgba(238,241,248,.42);color:var(--text-on-ink);
  font-size:var(--label);text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.code__copy:hover{border-color:var(--paper);color:var(--paper)}
.code__body{
  margin:0;padding:15px 14px;overflow-x:auto;overscroll-behavior-x:contain;
  font-family:var(--ff-mono);font-size:12.5px;line-height:1.7;tab-size:2;
}
.code__body code{white-space:pre;color:var(--text-on-ink)}
.code__body::-webkit-scrollbar-thumb{background:var(--rule-ink);border-color:var(--ink-strong)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding-block:44px 52px;background:#FFFFFF}
/* An explicit minmax(0,1fr), never the implicit auto column: an auto column is
   sized by its widest content, so the terminal panel's <pre> would drag the
   whole page past the viewport instead of scrolling inside its own box. */
/* Phone order is the thesis, not a preference: DESIGN.md says the mechanism is
   demonstrated in the FIRST screen, and with the proof strip and the platform
   list ahead of it the terminal started at y=727 in an 812px viewport. The
   panel now follows the actions directly and the strip closes the hero. */
.hero__grid{display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
.hero__body,.hero__panel,.hero__proof{min-width:0}
.hero__rel{margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--text-muted);max-width:44ch}
.hero__title{max-width:18ch}
.hero__lead{margin-top:18px;padding-top:18px;border-top:1px solid var(--ink);font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink);font-weight:500;max-width:34ch}
/* The price is the third thing this reader checks and it was the quietest text
   in the hero — 16px muted under an 18px ink lead, so the pricing RULE read as
   louder than the price it describes. */
.hero__price{margin-top:14px;font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--text-muted)}
.hero__price .money{font-weight:600;color:var(--ink)}
.hero .actions{margin-top:24px}
.hero__reach{margin-top:32px;padding-top:12px;border-top:1px solid var(--rule)}
.hero__reach-label{display:block;font-size:var(--label);text-transform:uppercase;color:var(--text-muted)}
.hero__reach-list{display:flex;flex-wrap:wrap;margin-top:8px;gap:4px 18px}
.hero__reach-list li{font-size:14px;font-weight:500;color:var(--text-muted)}

/* ── Quickstart ───────────────────────────────────────────────────────── */
.quickstart__caption{margin-bottom:14px;font-size:15px;color:var(--text-muted);max-width:62ch}

/* ── Platforms spec table ─────────────────────────────────────────────── */
/* position:relative is load-bearing, not tidiness: every mark in this table
   carries an absolutely positioned .vh twin, and with no positioned ancestor
   those resolve against the document. At 375px the rightmost one landed at
   608px and dragged the whole page into a horizontal scroll that no visible
   element explained. */
.spec__scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--ink);background:#FFFFFF}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec thead th{
  padding:12px 10px;text-align:center;vertical-align:bottom;
  font-size:var(--label);text-transform:uppercase;font-weight:500;color:var(--text-muted);
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
/* 208px, not 184: "Google Business Profile" is the longest live label and at
   184 its last word broke onto a line of its own mid-name on a phone. */
.spec__rowhead{
  position:sticky;left:0;z-index:1;text-align:left;
  min-width:208px;padding:12px 14px;background:#FFFFFF;border-right:1px solid var(--rule);
}
.spec tbody tr{border-bottom:1px solid var(--rule-soft)}
.spec tbody tr:last-child{border-bottom:0}
.spec tbody td{padding:12px 10px;text-align:center;color:var(--ink)}
.platform__name{display:block;font-size:16px;font-weight:600;letter-spacing:-0.012em;color:var(--ink);overflow-wrap:normal;hyphens:none;text-wrap:balance}
.platform__note{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--text-muted);max-width:30ch}
.platform__note + .platform__note{margin-top:3px}
.spec__yes{font-size:15px;color:var(--ink)}
.spec__no{color:var(--text-muted)}
.spec__link-col{text-align:right;padding-right:14px;white-space:nowrap}
.spec__link-col a{
  display:inline-flex;align-items:center;justify-content:flex-end;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);text-decoration-color:var(--rule-strong);
}
.spec__link-col a:hover{color:var(--lime-ink);text-decoration-color:currentColor}

/* ── Ledger (how it works) ────────────────────────────────────────────── */
.ledger{border-top:1px solid var(--ink)}
.ledger__row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.ledger__num{grid-row:1 / span 2;font-size:var(--label);font-weight:500;color:var(--text-muted);padding-top:4px}
.ledger__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.014em;color:var(--ink)}
.ledger__body{font-size:15px;line-height:1.6;color:var(--text-muted);max-width:60ch}

/* ── Ink pricing panel ────────────────────────────────────────────────── */
.ink__rule{font-size:var(--fs-h2);font-weight:600;line-height:1.22;letter-spacing:-0.02em;color:var(--text-on-ink);max-width:22ch;font-family:var(--ff-display);font-stretch:var(--display-wdth)}
/* Ink, not accent. The nav CTA is sticky from 768px up, so a blue price figure
   guaranteed two blues on screen at once and broke the one-per-screen law the
   whole palette is built on. At this size the figure does not need colour. */
.price__lead{margin-top:26px;font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-display-sm);font-weight:600;line-height:1;letter-spacing:-0.028em;color:var(--text-on-ink)}
/* Label tracking belongs on the uppercase labels, not on these two: both are
   lowercase running text at body size, where 0.08em reads as loose, not precise. */
.price__lead .price__unit{font-family:var(--ff-mono);font-size:var(--fs-body-sm);font-weight:400;letter-spacing:.01em;color:var(--on-ink-dim)}
.price__billed{margin-top:10px;font-size:var(--fs-body-sm);letter-spacing:.01em;color:var(--on-ink-dim)}
.ink__free{margin-top:22px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--text-on-ink);max-width:42ch}
.ink__actions{margin-top:28px}
/* The panel used to be one 46ch column against the left edge of a 1180px
   container, so two thirds of the darkest surface on the site sat empty. The
   second column carries the five things it does not charge for and the worked
   example, which is what a reader reaches for next anyway. */
.ink__grid{display:grid;gap:34px}
.nothing{border-top:1px solid var(--rule-ink)}
.nothing li{
  display:flex;align-items:baseline;gap:11px;padding:11px 0;border-bottom:1px solid var(--rule-ink);
  font-size:15px;line-height:1.4;color:var(--on-ink-dim);
}
.nothing li::before{content:"";flex:0 0 7px;height:1px;background:var(--rule-ink);transform:translateY(-0.4em)}
.ink__example{margin-top:22px;font-size:14.5px;line-height:1.62;color:var(--text-on-ink);max-width:46ch}
.ink__example .money{font-weight:600}

/* ── About ────────────────────────────────────────────────────────────── */
.prose p{max-width:var(--measure);font-size:var(--fs-body-lg);line-height:1.62;color:var(--text-muted)}
.prose p + p{margin-top:14px}
.about__rel{font-weight:600;color:var(--ink)}

/* ── Pricing page ─────────────────────────────────────────────────────── */
.page-head{padding-block:44px 48px;background:#FFFFFF;border-bottom:1px solid var(--ink)}
.page-head__grid{display:grid;gap:30px}
.page-head .lead{margin-top:16px}
.page-head__note{margin-top:12px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:56ch}
.price-block{padding:22px;border:1px solid var(--ink);background:var(--paper)}
.price-block .price__lead{margin-top:0;color:var(--ink)}
.price-block .price__lead .price__unit{color:var(--text-muted)}
.price-block .price__billed{color:var(--text-muted)}
.price__free{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-body-lg);font-weight:600;color:var(--ink)}
.price__note{margin-top:6px;font-size:14px;line-height:1.55;color:var(--text-muted)}

.counts{border-top:1px solid var(--ink)}
.counts li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.counts__num{font-family:var(--ff-mono);font-size:var(--label);letter-spacing:.08em;color:var(--text-muted);padding-top:4px}
.counts__body{font-size:var(--fs-body);line-height:1.6;color:var(--text-muted);max-width:var(--measure)}

.faq{border-top:1px solid var(--ink)}
.faq__row{padding:18px 0;border-bottom:1px solid var(--rule)}
.faq__q{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.014em;color:var(--ink)}
.faq__a{margin:8px 0 0;font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);max-width:var(--measure)}

.close{padding-block:52px;background:var(--ink);color:var(--text-on-ink)}
.close__title{font-size:var(--fs-display-sm);font-weight:600;line-height:1.06;letter-spacing:-0.026em;color:var(--text-on-ink);max-width:18ch}
.close__lead{margin-top:14px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--on-ink-dim);max-width:44ch}
.close .actions{margin-top:24px}
/* The last thing a developer wants before leaving is the line to paste, so the
   band that used to be one column against 700px of empty ink now ends the page
   the way it opened it. */
.close__grid{display:grid;gap:34px}
.close .code{border-color:var(--rule-ink)}
.close__note{margin-top:14px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--on-ink-dim)}
.close__note code{color:var(--text-on-ink);overflow-wrap:anywhere}

/* ── Footer: a dense mono index ───────────────────────────────────────── */
.foot{background:#FFFFFF;border-top:1px solid var(--ink);padding-block:36px}
.foot__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.foot__mark{font-size:17px;font-weight:600;letter-spacing:-0.03em;color:var(--ink)}
.foot__rel{font-size:14px;color:var(--text-muted)}
.foot__index{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;padding-block:22px}
.foot__col{display:flex;flex-direction:column;gap:7px;min-width:0}
.foot__label{font-size:var(--label);text-transform:uppercase;color:var(--text-muted)}
.foot__col a{font-size:12.5px;color:var(--ink);text-decoration:none}
.foot__col a:hover{color:var(--lime-ink);text-decoration:underline}
.foot__col code{font-family:var(--ff-mono);font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.foot__wink{padding-top:18px;border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.04em;color:var(--text-muted)}

/* ── One authored moment: the spec rows resolve as they enter ─────────── */
@keyframes row-settle{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .spec tbody tr{animation:row-settle linear both;animation-timeline:view();animation-range:entry 4% entry 38%}
  }
}

/* Phone headlines narrow rather than shrink (Archivo wdth axis). */
@media (max-width:479px){:root{--display-wdth:92%}}

/* The wrapped quickstart is only worth wrapping if the widest line then fits:
   at 12.5px its 44 characters measure 335px inside a 324px box, so the phone
   sets the code face one step down and the command reads without scrolling. */
@media (max-width:519px){
.code__body{padding:14px 12px;font-size:11.5px}
}

@media (min-width:768px){
  :root{--gutter:32px}
  .nav{position:sticky;top:0;z-index:10}
  .nav__inner{gap:28px;min-height:60px}
  .nav__mark{flex:0 0 auto}
  .nav__burger{display:none}
  .nav__menu{display:flex;position:static;inset:auto;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:26px;padding:0;border-top:0;overflow:visible;background:transparent}
  .nav__list{display:flex;align-items:center;gap:0 22px}
  .nav__item{border-bottom:0}
  .nav__top{width:auto;min-height:0;padding-block:5px;gap:6px}
  .nav__actions{padding-top:0;gap:18px}
  .nav__menu{order:2}
  .nav__cta{order:3;flex:0 0 auto;min-height:38px;padding:10px 16px;font-size:13px}
  .panel{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;border-top:1px solid var(--rule);border-bottom:1px solid var(--ink);z-index:11}
  .nav__item--panel:hover > .panel,.nav__item--panel:focus-within > .panel{display:block}
  .panel__inner{max-width:calc(1180px + var(--gutter) * 2);margin-inline:auto;padding:26px var(--gutter) 22px}
  .panel__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 0}
  .panel__grid--agents{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .panel__col{padding-inline:20px;border-left:1px solid var(--rule)}
  .panel__grid > .panel__col:nth-child(4n+1){padding-left:0;border-left:0}
  .panel__grid--agents > .panel__col:nth-child(4n+1){padding-left:20px;border-left:1px solid var(--rule)}
  .panel__grid--agents > .panel__col:first-child{padding-left:0;border-left:0}
  .panel__col:last-child{padding-right:0}
  .section{padding-block:104px}
  .hero{padding-block:84px 96px}
  .page-head{padding-block:84px 72px}
  .close{padding-block:96px}
  .section__head{margin-bottom:40px}
  /* Every placement is explicit. The panel spans both rows, and naming only its
     row let auto-placement drop it into column 1 and push the headline out of
     the grid entirely. */
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr);gap:0}
  .hero__body{grid-column:1;grid-row:1;padding-right:48px}
  .hero__proof{grid-column:1;grid-row:2;padding-right:48px}
  .hero__panel{grid-column:2;grid-row:1 / span 2;padding-left:48px;border-left:1px solid var(--ink)}
  .hero__proof .proof{margin-top:28px}
  .page-head__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;align-items:start}
  .ledger__row{grid-template-columns:3.5rem 15rem 1fr;gap:0 24px;padding:22px 0}
  .ledger__num{grid-row:auto;padding-top:6px}
  .ledger__body{grid-column:3}
  .counts li{grid-template-columns:3.5rem 1fr;gap:24px}
  .faq__row{display:grid;grid-template-columns:18rem 1fr;gap:24px;padding:22px 0}
  .faq__a{margin:0}
  .ink__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);gap:0}
  .ink__left{padding-right:52px}
  .ink__right{padding-left:52px;border-left:1px solid var(--rule-ink)}
  .close__grid{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:0;align-items:center}
  .close__body{padding-right:52px}
  .close__panel{padding-left:52px;border-left:1px solid var(--rule-ink)}
  .foot{padding-block:52px}
  .foot__index{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
  .foot__col--wide{grid-column:span 1}
}

@media (min-width:1080px){
  .hero__title{max-width:16ch}
}


.sprite{display:none}
.mark{
  flex:0 0 var(--mark,16px);width:var(--mark,16px);height:var(--mark,16px);
  fill:currentColor;color:var(--ink);opacity:.74;
}
.mark--mono{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-strong);opacity:1;
  font-family:var(--ff-mono);font-size:calc(var(--mark,16px) * 0.5);line-height:1;letter-spacing:0;
  color:var(--text-muted);
}
.entry__row:hover .mark,.entry__row--link:hover .mark{opacity:1}

/* One row shape for every name on the site: mark, name, status. */
.entry__row{
  display:flex;align-items:center;gap:9px;min-height:32px;padding-block:3px;
  font-size:13.5px;line-height:1.35;color:var(--text-muted);text-decoration:none;
}
.entry__row--link{color:var(--ink)}
.entry__row--link:hover{color:var(--lime-ink)}
.entry__row--link:hover .entry__name{text-decoration:underline;text-underline-offset:0.18em}
.entry__name{flex:1 1 auto;min-width:0}

/* 11px, not 9.5: this is the single most information-dense distinction on the
   site and it repeats across a hundred rows. Tracking comes down to pay for
   the extra size so the column width is unchanged. */
.flag{
  flex:0 0 auto;padding:2px 5px;border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:11px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-muted);
}
.flag--live,.flag--guide{border-color:var(--ink);color:var(--ink)}
.flag--mcp{border-color:var(--rule-strong);color:var(--ink)}
.section--ink .flag{border-color:var(--rule-ink);color:var(--on-ink-dim)}

/* ── Hero proof strip ─────────────────────────────────────────────────── */
.proof{display:flex;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof li{
  display:flex;align-items:baseline;gap:7px;padding:11px 16px 11px 0;margin-right:16px;
  border-right:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted);
}
.proof li:last-child{border-right:0;margin-right:0;padding-right:0}
.proof .tnum{font-size:15px;font-weight:500;color:var(--ink)}
.hero__reach-list li{display:flex;align-items:center;gap:7px;--mark:14px}

/* ── Agent band ───────────────────────────────────────────────────────── */
.agents{display:grid;gap:0;border-top:1px solid var(--ink)}
.agents__col{padding-block:20px;border-bottom:1px solid var(--rule)}
.agents__col:last-child{border-bottom:0}
.agents__head{margin-bottom:12px}
.agents__lead{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--text-muted);max-width:40ch}
.agents__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}

/* ── Platform index ───────────────────────────────────────────────────── */
.cat{margin-top:38px;padding-top:24px;border-top:1px solid var(--ink)}
.cat__register{
  display:block;margin-bottom:18px;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);
}
/* No column-rule: with eight groups the columns end at different heights and a
   full-height rule draws a hairline down empty space. Each group's own label
   rule carries the structure instead. */
.cat__groups{columns:1;column-gap:30px}
.cat__group{break-inside:avoid;margin-bottom:26px}
.cat__label{
  padding-bottom:8px;margin-bottom:5px;border-bottom:1px solid var(--ink);
  font-family:var(--ff-mono);font-size:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);
}
.cat__grid .entry__row{--mark:17px;font-size:14px;min-height:34px}

/* ── Tool ledger ──────────────────────────────────────────────────────── */
.tools{border-top:1px solid var(--ink)}
.tool{display:grid;gap:9px;padding:18px 0;border-bottom:1px solid var(--rule)}
.tool__name{font-family:var(--ff-mono);font-size:13px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.tool__title{font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:17px;font-weight:600;letter-spacing:-0.014em;color:var(--ink)}
.tool__body{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--text-muted);max-width:46ch}
.tool__call{
  display:block;position:relative;padding:10px 12px;background:#FFFFFF;border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:12px;line-height:1.65;color:var(--text-muted);overflow-wrap:anywhere;
}

/* ── Built for ────────────────────────────────────────────────────────── */
.pair{display:grid;gap:28px;border-top:1px solid var(--ink);padding-top:24px}
.pair__title{font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.pair__body{margin-top:12px;font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);max-width:48ch}
.about__more{font-weight:600;color:var(--ink)}
.foot__col--wide code{display:block;padding-top:2px}

/* ── Agents you can deploy ────────────────────────────────────────────── */
.agents__list{border-top:1px solid var(--ink)}
.agent{padding-block:26px;border-bottom:1px solid var(--rule)}
.agent__head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.agent__name{
  font-family:var(--ff-display);font-stretch:var(--display-wdth);
  font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;color:var(--ink);
}
.agent__grid{display:grid;gap:22px}
.agent__body{font-size:var(--fs-body);line-height:1.6;color:var(--text-muted);max-width:56ch}
.agent__body + .agent__body{margin-top:10px}
.agent__label{
  display:block;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);
}
.agent__plugs,.agent__tools{margin-top:20px}
.plug{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.plug:last-child{border-bottom:0}
.plug__name{flex:0 0 auto;font-size:14px;color:var(--ink)}
.plug__note{flex:1 1 auto;font-size:12.5px;line-height:1.4;color:var(--text-muted)}
.plug .flag{margin-left:auto}
.agent__toollist{display:flex;flex-wrap:wrap;gap:6px 10px}
.agent__toollist code{
  display:inline-block;padding:4px 8px;border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:12.5px;color:var(--ink);
}
.agent__none{font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.agent__none--build{padding:14px;border:1px solid var(--rule);background:var(--paper)}
.agent__call{
  display:block;position:relative;margin-top:12px;padding:10px 12px;border:1px solid var(--rule);background:var(--paper);
  font-family:var(--ff-mono);font-size:12px;line-height:1.6;color:var(--text-muted);overflow-wrap:anywhere;
}

/* The cost sheet shows its working: a count, a price read from the meta
   document, and a total the runtime recomputes from the same field. Nothing
   without a price carries a number at all. */
.cost{margin-top:18px;padding-top:14px;border-top:1px solid var(--ink)}
.cost__label{
  display:block;margin-bottom:9px;
  font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);
}
.cost__line{font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.cost__line .money,.cost__line .tnum{font-weight:600}
.cost__line--none{color:var(--text-muted)}
.cost__free{margin-top:5px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.cost__soon{margin-top:12px}
.cost__soon li{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-top:1px solid var(--rule-soft)}
.cost__part{flex:1 1 auto;font-size:13.5px;color:var(--text-muted)}
.cost__total{
  margin-top:13px;padding-top:11px;border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:14px;letter-spacing:.01em;color:var(--ink);
}
.cost__total .tnum{font-weight:500}

/* ── Ways in ──────────────────────────────────────────────────────────── */
.ways{border-top:1px solid var(--ink)}
.way{display:grid;gap:5px;padding:15px 0;border-bottom:1px solid var(--rule)}
.way__name{font-size:16px;font-weight:600;letter-spacing:-0.012em;color:var(--ink)}
.way__name a{color:var(--ink)}
.way__body{font-size:14px;line-height:1.55;color:var(--text-muted);max-width:56ch}
.way .flag{justify-self:start}

/* ── Agents teaser (home) ─────────────────────────────────────────────── */
.teaser{border-top:1px solid var(--ink)}
.teaser__row{display:grid;gap:5px;padding:15px 0;border-bottom:1px solid var(--rule)}
.teaser__name{font-size:17px;font-weight:600;letter-spacing:-0.014em;color:var(--ink);justify-self:start}
.teaser__body{font-size:14.5px;line-height:1.55;color:var(--text-muted);max-width:60ch}
.teaser__row .flag{justify-self:start}
.teaser__all{max-width:32rem}

/* The strip is one rule per fact on a phone: wrapped into two flex rows its
   vertical separators land mid-row and read as a broken table. */
@media (max-width:519px){
  .proof{display:block}
  .proof li{margin-right:0;padding:10px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .proof li:last-child{border-bottom:0}
}

@media (min-width:768px){
  .agents{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
  .agents__col{padding:22px 24px;border-bottom:0;border-left:1px solid var(--rule)}
  .agents__col:first-child{padding-left:0;border-left:0}
  .agents__col:last-child{padding-right:0}
  .cat__groups{columns:2}
  .agent__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);gap:0 40px;align-items:start}
  .agent{padding-block:32px}
  .way{grid-template-columns:14rem minmax(0,1fr) 7rem;gap:0 24px;align-items:baseline}
  .way .flag{justify-self:end}
  .teaser__row{grid-template-columns:14rem minmax(0,1fr) 7rem;gap:0 24px;align-items:baseline}
  .teaser__row .flag{justify-self:end}
  .tool{grid-template-columns:12rem minmax(0,1.05fr) minmax(0,1fr);gap:0 28px;align-items:start;padding:20px 0}
  .tool__name{padding-top:3px}
  .pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .pair__col{padding-right:48px}
  .pair__col + .pair__col{padding:0 0 0 48px;border-left:1px solid var(--rule)}
}

@media (min-width:1080px){
  .cat__groups{columns:3}
}


.way__body,.tool__body,.teaser__body,.ledger__body,.agents__lead,.hero__rel,
.quickstart__caption,.ink__example,.agent__body,.agent__none,.cost__line{
  font-size:var(--fs-body);
}
.panel__lead{font-size:14px}
.plug__name,.plug__note,.cost__part,.cost__free{font-size:14.5px}


@media (pointer:coarse){
.nav__top,.nav__sign,.panel__all{min-height:44px}
.nav__cta,.nav__burger{min-height:44px}
.code__copy{min-height:44px;padding-inline:16px}
.foot__col a{min-height:44px;display:flex;align-items:center}
.foot__col{gap:0}
.spec__link-col a{min-height:44px}
.entry__row{min-height:44px}
.btn{min-height:48px}
}


/* === page blocks appended below === */

/* === platforms · compare · changelog · legal === */

/* ── Platform pages: tool reference + standalone capability notes ──────── */
.tool-ledger{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tool-ledger li{border:1px solid var(--ink);padding:7px 11px}
.tool-ledger code{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink)}
.platform__note--block{margin-top:14px;max-width:var(--measure);font-size:14px;line-height:1.55;color:var(--text-muted)}

/* ── Compare: two ledgers side by side, divided by a hairline, not cards ─ */
.compare-grid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
.compare-col{min-width:0}
.compare-col__head{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.compare-col__name{font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.compare-col__note{font-size:12.5px;color:var(--text-muted)}
.compare-list{border-top:1px solid var(--rule)}
.compare-list li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-body);line-height:1.55;color:var(--ink)}
.compare-claim__source{display:block;margin-top:5px;font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.02em;color:var(--text-muted)}
.compare-claim__source a{color:var(--text-muted);text-decoration-thickness:1px}
.compare-asof{margin-top:16px;font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.04em;color:var(--text-muted)}

@media (min-width:768px){
  .compare-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  .compare-col:first-child{padding-right:44px}
  .compare-col + .compare-col{padding-left:44px;border-left:1px solid var(--ink)}
}

/* ── Changelog: dated entries in a ledger ───────────────────────────────── */
.changelog{border-top:1px solid var(--ink)}
.changelog__entry{padding:26px 0;border-bottom:1px solid var(--rule)}
.changelog__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.changelog__title{font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.changelog__date{font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.06em;color:var(--text-muted)}
.changelog__bullets{margin-top:14px;border-top:1px solid var(--rule-soft)}
.changelog__bullets li{padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-body);line-height:1.6;color:var(--text-muted)}

/* ── Legal: a readable article, not a design showcase ───────────────────── */
.legal-meta{margin-top:14px;font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.04em;color:var(--text-muted)}
.legal-section{margin-top:36px}
.legal-section:first-of-type{margin-top:0}
.legal h2{font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.014em;color:var(--ink);margin-bottom:4px}
.legal.prose p{margin-top:12px}

/* === docs === */
code{font-family:var(--ff-mono)}

.docs-note{margin-top:14px;font-size:14px;line-height:1.55;color:var(--text-muted)}

.doc-toc{border-block:1px solid var(--ink);padding-block:14px;margin-top:22px}
.doc-toc__list{display:flex;flex-wrap:wrap;gap:8px 20px}
.doc-toc__list a{font-family:var(--ff-mono);font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-decoration:none}
.doc-toc__list a:hover{color:var(--ink)}

.tools{border-top:1px solid var(--ink)}
.tool{padding:26px 0;border-bottom:1px solid var(--rule)}
.tool__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tool__name{font-family:var(--ff-mono);font-size:15px;font-weight:500;color:var(--ink)}
.tool__route{font-family:var(--ff-mono);font-size:var(--label);letter-spacing:.04em;color:var(--text-muted)}
.tool__summary{margin-top:8px;font-size:var(--fs-body-lg);font-weight:600;color:var(--ink)}
.tool__desc{margin-top:4px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:var(--measure)}
.tool__code{margin-top:16px;display:grid;gap:10px}

.errors{border-top:1px solid var(--ink)}
.errors__row{padding:16px 0;border-bottom:1px solid var(--rule)}
.errors__code{display:block;font-family:var(--ff-mono);font-size:13.5px;letter-spacing:.01em;color:var(--ink)}
.errors__meaning{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--text-muted);max-width:var(--measure)}

.rate p,.oa p{font-size:15px;line-height:1.6;color:var(--text-muted);max-width:var(--measure)}
.rate p + p,.oa p + p{margin-top:10px}
.rate code,.oa code{font-size:.92em;color:var(--ink);overflow-wrap:anywhere}

@media (min-width:768px){
  .errors__row{display:grid;grid-template-columns:15rem 1fr;gap:24px;align-items:baseline}
  .errors__meaning{margin-top:0}
}

/* docs review: long route strings and codes wrap instead of pushing the layout */
.tool__route,.errors__code{overflow-wrap:anywhere}