/* AgentFGA site: index.html, benchmarks.html and docs.html.
   AgentFGA is OHQ's first product, so it uses OHQ's design system (ohq/styles.css, documented on
   the brand page): black, grey and white in warm neutrals, with no accent color. Emphasis comes from
   weight, fill and inversion. Ink sections (.ink) redefine the tokens, so every component works on
   both. The docs page's three-column layout is at the end. */
:root {
  --paper: #f6f4f3;
  --surface: #ffffff;
  --sunk: #ece9e7;
  --ink: #1c1a1a;
  --ink-2: #4b4646;
  --ink-3: #6e6969;
  --rule: #e3dfdd;
  --rule-strong: #cbc6c4;
  --grey: #8f8989;
  --on-ink: #f6f4f3;
  --ink-hover: #3a3535;
  --shadow: rgba(28, 26, 26, 0.16);

  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --section: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

.ink {
  --paper: #161414;
  --surface: #1f1c1c;
  --sunk: #2a2626;
  --ink: #f1ecec;
  --ink-2: #b7b1b1;
  --ink-3: #8f8989;
  --rule: #2e2a2a;
  --rule-strong: #403b3b;
  --grey: #6b6565;
  --on-ink: #161414;
  --ink-hover: #d9d3d3;
  --shadow: rgba(0, 0, 0, 0.5);
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, figure, dl, dd, blockquote { margin: 0; }
img, svg { max-width: 100%; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

strong { font-weight: 650; color: var(--ink); }

h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 820; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); font-weight: 780; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: 1.1875rem; font-weight: 760; font-stretch: 108%; line-height: 1.2; letter-spacing: -0.01em; }

code, pre { font-family: var(--f-mono); font-stretch: 87.5%; }
:not(pre) > code {
  font-size: 0.82em;
  background: var(--sunk);
  padding: 0.1em 0.35em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap.wide { max-width: 1440px; }

.nowrap { white-space: nowrap; }

/* mono labels: the eyebrow over a section, and the small caps on cards */
.eyebrow, .label, .card-num {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label, .card-num { font-size: 0.6875rem; font-weight: 600; }

/* a grey lead that hands over to the point in ink */
.q { color: var(--ink-3); }
.q .hl { color: var(--ink); }

/* ---------- OHQ / AgentFGA ---------- */

/* The OHQ wordmark: OHQ drawn as walls on a 48-unit grid, the O for Open in grey. */
.wordmark { flex: none; display: block; width: 2.792em; height: 1em; overflow: visible; }
.wordmark path { fill: none; stroke: var(--ink); stroke-width: 6; }
.wordmark .wm-o { stroke: var(--grey); }

/* The AgentFGA wordmark: AGENTFGA drawn as the same walls, AGENT in grey and FGA in ink, the way
   OpenHQ sets OPEN in grey. Its last A is the AgentFGA mark: the legs turn in at the foot and the
   crossbar is a grey gate. 360 units wide. */
.wordmark--fga { width: 7.5em; }

/* The lockups: the AgentFGA wordmark alone in the header. In the footer, OHQ's wordmark, a grey
   slash, then AgentFGA's, each linking to its own home. */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.42em; font-size: 1.25rem; line-height: 1; }
.brand-lockup a { color: var(--ink); text-decoration: none; }
.brand-lockup .brand { display: block; }
.lockup-sep { font-family: var(--f-display); font-weight: 400; font-size: 1.25em; color: var(--grey); }
.brand-tag {
  margin-left: 0.2em;
  padding: 4px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- header and footer ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 32px;
  padding-block: 20px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 26px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Pinned to the bottom: body is a column at least as tall as the window, so on a short page the
   footer sits at the foot of the window instead of straight after the content. */
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); }
.foot {
  display: grid;
  gap: 20px;
  padding-block: 30px 20px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .foot { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .foot .nav { justify-content: center; }
}
.foot .brand-lockup { text-transform: none; letter-spacing: 0; }
.foot-note { padding-block: 0 40px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.foot-note p { max-width: 72ch; }

/* ---------- buttons ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ruled in ink like the deck's product boxes; the primary one is filled */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 13px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--sunk); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-primary::after { content: "→"; transition: transform 0.15s; }
.btn-primary:hover::after { transform: translateX(3px); }

/* ---------- sections ---------- */

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section.ink, .ink + .section, .alt + .section, .section + .alt { border-top: 0; }
.section > .wrap { display: grid; gap: 32px; }
.alt { background: var(--surface); }

.section-head { display: grid; gap: 18px; max-width: 54rem; align-content: start; margin-bottom: clamp(0px, 1.2vw, 16px); }
.section-head > p:not(.eyebrow):not(.label) {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.sub-head { display: grid; gap: 8px; max-width: 44rem; margin-top: clamp(16px, 3vw, 40px); }
.sub-head h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 780; font-stretch: 110%; }
.sub-head p { color: var(--ink-2); font-size: 1.0625rem; }

.lede { max-width: 36rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

.prose { max-width: 46rem; font-size: 1.0625rem; color: var(--ink-2); }

.note {
  max-width: 54rem;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--sunk);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink-2); max-width: 46rem; }
.bullets li::marker { color: var(--ink-3); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 112px); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 3.875rem); }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 64px; }
}

.hero-code { display: grid; gap: 12px; min-width: 0; }
.hero-code .code { box-shadow: 0 48px 80px -48px rgba(28, 26, 26, 0.5); }
.hero-code > p { font-size: 0.875rem; color: var(--ink-3); }

/* the hand-off to a coding agent, dashed like an unbuilt wall */
.llms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  max-width: 38rem;
  padding: 16px 16px 16px 20px;
  border: 2px dashed var(--rule-strong);
  border-radius: 16px;
}
.llms p { flex: 1 1 18rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.llms-copy { flex: none; padding: 9px 14px 10px; font-size: 0.9375rem; }
.llms-copy svg { width: 16px; height: 16px; flex: none; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-meta strong { font-weight: 600; }

/* ---------- why agents ---------- */

.product-top { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 80px; }
}

/* what the user may do, overlapping what the agent was granted: only the overlap is allowed */
.venn { display: grid; gap: 14px; width: 100%; max-width: 520px; justify-self: center; }
.venn svg { display: block; width: 100%; height: auto; }
.venn-set { fill: rgba(255, 255, 255, 0.04); stroke: var(--ink-3); stroke-width: 2.5; }
.venn-both { fill: var(--ink); }
.venn text { font-family: var(--f-body); fill: var(--ink-2); font-size: 24px; }
.venn text.venn-yes { fill: var(--on-ink); font-family: var(--f-display); font-stretch: 112%; font-weight: 780; font-size: 30px; }
.venn figcaption { text-align: center; font-size: 0.9375rem; color: var(--ink-3); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 28px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.cards h3 { margin-top: clamp(8px, 1.5vw, 20px); font-size: 1.25rem; }
.cards p:not(.card-num):not(.uses) { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.cards .uses {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ---------- how it works: three steps, ruled in ink, the check filled ---------- */

.basics { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; counter-reset: basic; }
.basics > li {
  counter-increment: basic;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2vw, 26px);
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
}
.basics > li.ink { border-color: var(--paper); }
.basics > li::before {
  content: counter(basic, decimal-leading-zero);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.basics > li + li::after {
  content: "↓";
  position: absolute;
  left: 24px;
  top: -29px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .basics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .basics > li + li::after { content: "→"; left: -27px; top: 50%; transform: translateY(-50%); }
}
.basics h3 { font-size: 1.25rem; }
.basics p { color: var(--ink-2); font-size: 0.9375rem; }
.snippet {
  align-self: end;
  margin: 6px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--sunk);
  font-size: 0.6875rem;
  line-height: 1.75;
  color: var(--ink);
  overflow-x: auto;
}
.snippet .k { color: var(--ink-3); }
.snippet .v { color: var(--ink); font-weight: 600; }
.answer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}
.answer svg { width: 13px; height: 13px; flex: none; }

/* where AgentFGA sits: your app, then AgentFGA, then a stack of stores */
.flow { margin: 0; display: grid; gap: 0; align-items: stretch; }
.flow-node {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
}
.flow-node strong { font-family: var(--f-display); font-weight: 720; font-stretch: 108%; font-size: 1.125rem; color: var(--ink); }
.flow-node span { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.flow-store {
  margin: 0 12px 12px 0;
  border: 2px solid var(--ink);
  box-shadow:
    6px 6px 0 -2px var(--surface), 6px 6px 0 0 var(--ink),
    12px 12px 0 -2px var(--surface), 12px 12px 0 0 var(--ink);
}
.flow-arrow { display: grid; place-items: center start; height: 40px; padding-left: 20px; color: var(--ink-3); }
.flow-arrow::before { content: "↓"; font-size: 1.125rem; line-height: 1; }
@media (min-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1.15fr); }
  .flow-arrow { height: auto; padding: 0 0 12px; place-items: center; }
  .flow-arrow::before { content: "→"; font-size: 1.25rem; }
}
.flow-caption { max-width: 46rem; color: var(--ink-2); }

/* ---------- evidence ---------- */

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats > div { display: grid; align-content: start; gap: 14px; padding: 24px 24px 26px; background: var(--surface); }
.stats dt { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stats dd, .stats p { display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.stat, .stat-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* a long unit such as RELATIONSHIPS drops under its number rather than overflowing the cell */
.stat-num { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; }
.unit, .stat-unit {
  margin-left: 0.18em;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- lists side by side ---------- */

.cols { display: grid; gap: 36px; }
.cols > * { min-width: 0; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.col-head { margin-bottom: 14px; }
.col-head h3 { font-size: 1.375rem; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.plain-list li { padding-block: 14px; border-bottom: 1px solid var(--rule); font-size: 1rem; color: var(--ink-2); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.wide { min-width: 640px; }
table.wide tbody th { min-width: 12rem; }
th, td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
thead th {
  background: var(--paper);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: bottom;
}
thead tr.group th { border-bottom: 0; padding-bottom: 0; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--ink); }
td { color: var(--ink-2); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zero, .best { color: var(--ink); font-weight: 750; }
.sub { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.table-note { margin-top: -18px; font-size: 0.8125rem; color: var(--ink-3); max-width: 72ch; }

/* ---------- get started ---------- */

.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; counter-reset: qs; }
.steps-list > li { counter-increment: qs; display: grid; gap: 18px; min-width: 0; padding-top: 22px; border-top: 2px solid var(--ink); }
@media (min-width: 900px) {
  .steps-list > li { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 48px; }
}
.qs-text { display: grid; gap: 10px; align-content: start; }
.qs-text::before {
  content: counter(qs, decimal-leading-zero);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.qs-text h3 { font-size: 1.375rem; }
.qs-text p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- code ---------- */

/* in the page's own tones: keywords and keys in ink, the rest a step back */
.code { min-width: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); overflow: hidden; }
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.copy {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy:hover { border-color: var(--ink-3); }
.code pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.75; color: var(--ink-2); }
.code .k { color: var(--ink); font-weight: 600; }
.code .s { color: var(--ink); }
.code .n { color: var(--ink); font-style: italic; }
.code .c { color: var(--ink-3); }

.code-tabs { display: flex; gap: 2px; min-width: 0; margin-left: -10px; overflow-x: auto; scrollbar-width: none; }
.code-tabs button {
  flex: none;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
}
.code-tabs button:hover { color: var(--ink); }
.code-tabs button[aria-selected="true"] { background: var(--sunk); color: var(--ink); font-weight: 600; }
.code pre[hidden] { display: none; }
.code-status { color: var(--ink); font-weight: 600; }

/* ---------- drop-downs ---------- */

.more { display: grid; border-top: 1px solid var(--rule-strong); }
.more details { border-bottom: 1px solid var(--rule); }
.more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 720;
  font-stretch: 108%;
  font-size: 1.1875rem;
  color: var(--ink);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s;
}
.more details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.more summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more-body { display: grid; gap: 20px; padding-bottom: 32px; min-width: 0; }
.more-body .table-note { margin-top: -10px; }

/* ---------- closing ---------- */

.close { padding-block: clamp(80px, 10vw, 144px) clamp(64px, 8vw, 104px); }
.close .wrap { display: grid; gap: 28px; justify-items: start; }
.close .wordmark { width: clamp(180px, 28vw, 340px); height: auto; margin-bottom: clamp(8px, 2vw, 24px); }
.close h2 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; }
.close .lede { max-width: 40rem; }

/* ---------- benchmarks page ---------- */

.page-head { padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.page-head .hero-copy { max-width: 54rem; }
.page-head .lede { max-width: 46rem; }

.chart-card {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.chart-title { display: grid; gap: 4px; }
.chart-title h3 { font-size: 1.25rem; }
.chart-title p { font-size: 0.9375rem; color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.875rem; color: var(--ink-2); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 3px 3px 0 0; background: var(--ink); }
.sw.alt { background: var(--grey); }

/* SVG charts: the series in ink, a second series in grey */
.svg-chart { position: relative; min-width: 0; }
.svg-chart svg { display: block; width: 100%; overflow: visible; }
.svg-chart text { fill: var(--ink-3); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.svg-chart text.val { fill: var(--ink); font-weight: 600; }
.svg-chart .gl { stroke: var(--rule); stroke-width: 1; }
.svg-chart .base { stroke: var(--ink); stroke-width: 1.5; }
.svg-chart .ln { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.svg-chart .ar { fill: var(--ink); fill-opacity: 0.06; stroke: none; }
.svg-chart .mk { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.svg-chart .bar { fill: var(--ink); }
.svg-chart .bar.alt { fill: var(--grey); }
.svg-chart .bar.is-active { fill-opacity: 0.8; }
.svg-chart .xh { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.svg-chart .hit { fill: transparent; }

/* tooltips sit on <body>, outside any ink section, so they name their colors */
.tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  min-width: 160px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1c1a1a;
  color: #f6f4f3;
  font-size: 0.8125rem;
  line-height: 1.45;
  box-shadow: 0 12px 32px var(--shadow);
}
.tip-title { font-weight: 600; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-row .tip-name { flex: 1; color: #b7b1b1; }
.tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- docs page ---------- */
/* A sidebar of pages, the current page, and an "On this page" list. docs.js shows one
   page at a time; without it every page is shown in order and the sidebar sits on top. */

.docs { --header-h: 60px; scroll-padding-top: 76px; }
@media (min-width: 1024px) { .docs { scroll-padding-top: calc(var(--header-h) + 28px); } }

.docs .bar { padding-block: 14px; }
@media (min-width: 1024px) {
  .docs .site-header { position: sticky; top: 0; z-index: 30; }
}

.bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }

.search-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
@media (min-width: 720px) { .search-open { min-width: 230px; } }
.search-open:hover { border-color: var(--ink-3); color: var(--ink-2); }
.search-open svg { width: 15px; height: 15px; flex: none; }
.search-open kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--sunk);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  color: var(--ink-3);
}
@media (max-width: 719.98px) { .search-open kbd { display: none; } }
.docs:not(.js) .search-open { display: none; }

/* layout */

/* width: body is a flex column, where auto side margins would otherwise shrink the layout to
   its content. */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 1440px; margin-inline: auto; }
@media (min-width: 1024px) { .docs-layout { grid-template-columns: 268px minmax(0, 1fr); } }
@media (min-width: 1280px) {
  .docs-layout { grid-template-columns: 276px minmax(0, 1fr) 228px; }
  .docs-layout[data-kind="api"] { grid-template-columns: 276px minmax(0, 1fr); }
}

.docs-mobilebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
@media (min-width: 1024px) { .docs-mobilebar { display: none; } }
.docs:not(.js) .docs-mobilebar { display: none; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 6px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn svg { width: 15px; height: 15px; }
.mobile-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--ink-3); }
.mobile-crumb strong { color: var(--ink); font-weight: 600; }

/* sidebar */

.docs-sidebar { padding: 24px 16px 32px; font-size: 0.9rem; }
.docs:not(.js) .docs-sidebar { border-bottom: 1px solid var(--rule); }
@media (min-width: 1024px) {
  .docs-sidebar,
  .docs:not(.js) .docs-sidebar {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 18px 56px max(20px, env(safe-area-inset-left, 0px));
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
}
@media (max-width: 1023.98px) {
  .js .docs-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(320px, 86vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    border-right: 1px solid var(--rule);
    background: var(--paper);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }
  .js .docs-sidebar.is-open { transform: none; visibility: visible; box-shadow: 0 0 60px var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .js .docs-sidebar { transition: none; } }
.docs-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(22, 20, 20, 0.45); }
.docs-scrim[hidden] { display: none; }

.side-close { display: none; }
@media (max-width: 1023.98px) {
  .js .side-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px 4px;
    padding: 5px 9px;
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
  }
}

.side-group + .side-group { margin-top: 28px; }
.side-title {
  margin-bottom: 8px;
  padding: 0 10px 8px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.side-sub { margin: 14px 0 3px; padding-left: 10px; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  line-height: 1.4;
  text-decoration: none;
}
.side-list a:hover { color: var(--ink); background: var(--sunk); }
.side-list a[aria-current="page"] { color: var(--ink); background: var(--sunk); font-weight: 650; box-shadow: inset 3px 0 0 var(--ink); }

/* HTTP methods: told apart by fill, in the brand's tones */
.method {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 3.6em;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.method.get { border-color: var(--rule-strong); color: var(--ink-2); }
.method.post { background: var(--ink); color: var(--on-ink); }
.method.put { background: var(--sunk); border-color: var(--rule-strong); color: var(--ink); }
.method.delete { border-color: var(--ink); border-style: dashed; color: var(--ink); }

/* the page */

.docs-main { min-width: 0; padding: 36px 16px 80px; }
@media (min-width: 720px) { .docs-main { padding: 48px 40px 96px; } }
@media (min-width: 1280px) { .docs-main { padding: 56px 56px 112px; } }

.doc-page { display: grid; gap: 30px; max-width: 46rem; margin-inline: auto; min-width: 0; }
.doc-page[data-kind="api"] { max-width: 74rem; }
.js .doc-page:not(.is-current) { display: none; }
.docs:not(.js) .doc-page + .doc-page { margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--rule); }

.doc-head { display: grid; gap: 14px; }
.doc-group {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-head h1 { font-size: clamp(2.125rem, 1.6rem + 1.6vw, 2.875rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.doc-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); }

.doc-body { display: grid; gap: 18px; min-width: 0; }
.doc-body > h2 { margin-top: 26px; font-size: 1.625rem; font-weight: 780; font-stretch: 110%; line-height: 1.15; letter-spacing: -0.02em; }
.doc-body > h3 { margin-top: 10px; font-size: 1.1875rem; }
.doc-body > h2:first-child, .doc-body > h3:first-child { margin-top: 0; }
.doc-body p, .doc-body li { color: var(--ink-2); }
.doc-body > ul, .doc-body > ol:not(.doc-steps) { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; }
.doc-body li::marker { color: var(--ink-3); }
.doc-body .table-wrap table { font-size: 0.875rem; }

.anchor {
  margin-left: 8px;
  color: var(--ink-3);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
h2:hover > .anchor, h3:hover > .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--ink); }

/* callouts: told apart by their icon and their rule, not by color */

.callout {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.callout > svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.callout > div { display: grid; gap: 8px; min-width: 0; }
.doc-body .callout p { color: var(--ink); }
.callout.info { background: var(--sunk); border-color: transparent; }
.callout.hint { background: var(--surface); }
.callout.warn { background: var(--surface); border: 2px solid var(--ink); }

/* cards */

.card-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-link {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}
.card-link:hover { border-color: var(--ink); }
.card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--sunk);
  color: var(--ink);
}
.card-icon svg { width: 18px; height: 18px; }
.card-link strong { font-family: var(--f-display); font-weight: 720; font-stretch: 108%; font-size: 1.0625rem; color: var(--ink); }
.doc-body .card-link span { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }

/* steps */

.doc-steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.doc-steps > li { counter-increment: step; position: relative; display: grid; gap: 12px; min-width: 0; padding: 0 0 34px 48px; }
.doc-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
}
.doc-steps > li::after { content: ""; position: absolute; top: 38px; bottom: 8px; left: 14px; width: 2px; background: var(--rule); }
.doc-steps > li:last-child { padding-bottom: 0; }
.doc-steps > li:last-child::after { display: none; }
.doc-steps h3 { font-size: 1.125rem; line-height: 30px; }

/* API reference */

.endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.endpoint .method { font-size: 0.6875rem; padding: 3px 7px; }
.endpoint code { padding: 0; background: none; font-size: 0.8125rem; color: var(--ink); }

.api-grid { display: grid; gap: 32px; min-width: 0; }
.api-aside { display: grid; align-content: start; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .api-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px; align-items: start; }
  .api-aside { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; }
}
.api-aside .code pre { font-size: 0.74rem; }
.api-grid .doc-body > h2 { margin-top: 14px; font-size: 1.25rem; }
.api-grid .doc-body > h2:first-child { margin-top: 0; }

.params { display: grid; border-top: 2px solid var(--ink); }
.param { display: grid; gap: 6px; min-width: 0; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.param-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.param-name { padding: 0; background: none; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.param-type { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.75rem; color: var(--ink-3); }
.param-req, .param-default { padding: 1px 7px; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; }
.param-req { border: 1px solid var(--ink); color: var(--ink); }
.param-default { background: var(--sunk); color: var(--ink-3); font-weight: 500; }
.doc-body .param p { font-size: 0.9375rem; }
.param-children { margin-top: 4px; border: 1px solid var(--rule); border-radius: 10px; }
.param-children > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.param-children > summary::-webkit-details-marker { display: none; }
.param-children > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.param-children[open] > summary { border-bottom: 1px solid var(--rule); }
.param-children[open] > summary::before { transform: rotate(45deg); }
.param-children > .params { padding-inline: 14px; border-top: 0; }
.param-children .param:last-child { border-bottom: 0; }

/* on this page */

.docs-toc { display: none; }
@media (min-width: 1280px) {
  .docs-toc {
    display: block;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 60px 24px 40px 4px;
  }
  .docs-layout[data-kind="api"] .docs-toc { display: none; }
}
.docs-toc[hidden] { display: none; }
.toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.toc-title svg { width: 14px; height: 14px; color: var(--ink-3); }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--rule); }
.toc-list a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  color: var(--ink-3);
  font-size: 0.84rem;
  line-height: 1.45;
  text-decoration: none;
}
.toc-list a:hover { color: var(--ink); }
.toc-list a.is-active { border-left-color: var(--ink); color: var(--ink); font-weight: 600; }

/* previous and next */

.pager { display: grid; gap: 14px; max-width: 46rem; margin: 64px auto 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.docs-layout[data-kind="api"] .pager { max-width: 74rem; }
.pager:empty { display: none; }
@media (min-width: 640px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager a {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 14px 18px;
  border: 2px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s;
}
.pager a:hover { border-color: var(--ink); }
.pager .next { grid-column: -2; text-align: right; }
.pager small { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pager strong { font-family: var(--f-display); font-stretch: 108%; font-weight: 720; font-size: 1.0625rem; color: var(--ink); }

/* search */

.search-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  margin: 72px auto auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px var(--shadow);
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgba(22, 20, 20, 0.45); }
.search-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--rule); }
.search-field svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.search-field kbd, .search-foot kbd {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--sunk);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.search-results { flex: 1; list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-results a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.search-results a[aria-selected="true"] { background: var(--sunk); box-shadow: inset 3px 0 0 var(--ink); }
.search-results small { font-size: 0.75rem; color: var(--ink-3); }
.search-results .hit-title { font-weight: 600; }
.search-results .hit-snip { font-size: 0.8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results mark { background: none; color: var(--ink); font-weight: 750; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.search-empty { padding: 28px 16px; text-align: center; color: var(--ink-3); }
.search-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--ink-3); }