@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* Calibre (Klim), licensed, 700 only. Reached through --display so nothing
   lighter is rendered out of the bold file. */
@font-face {
  font-family: Calibre;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Calibre-700.woff') format('woff');
}

/* MagmaRouter shared styles.
   Structure borrowed from YouTube: surfaces are stepped by lightness rather than
   separated by borders, secondary text sits well below primary, one brand accent
   and blue reserved for links. Roboto throughout, YouTube red as the accent.
   Success keeps its own green: an "ok" pill inheriting the accent would read as
   an error. */

:root {
  --bg: #0b0a0c;
  --surface: #131216;
  --chip: #17161b;
  --chip-hover: #211f26;
  --ink: #f3f3f5;
  --muted: #9096a0;
  --faint: #6e737b;
  --line: #1e1d22;
  --line-soft: #17161b;
  --accent: #e10600;
  --magma: linear-gradient(96deg, #e10600 0%, #ff4d0a 46%, #ff9a1f 100%);
  --accent-ink: #ffffff;
  --accent-soft: #2a0d0c;
  /* Links carry ink and an underline rather than a colour of their own, which
     is what keeps a page of prose reading as one piece of type. */
  --link: #f3f3f5;
  --good: #3fbb82;
  --good-soft: #11241b;
  --bad: #ff6b63;
  --code-bg: #141317;

  /* Square throughout. The slabs, the cards and the buttons all sit on the
     same grid as the type, and a corner radius breaks it. */
  --radius: 0px;
  --pill: 0px;
  --header-h: 57px;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: Calibre, Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 900px; }

/* Header ------------------------------------------------------------------ */

header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
body > header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo span { color: inherit; }
.nav { display: flex; gap: 8px; align-items: center; }
.nav a { white-space: nowrap; }

/* Nav items are YouTube chips: no borders, a filled pill on hover. */
.nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius);
}
/* Colour only on hover, never a move and never a fill. */
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current] { color: var(--ink); }

/* One filled action per header, so the bar reads as a product rather than three
   floating words. */
.nav a.cta {
  background: var(--magma, linear-gradient(96deg, #e10600 0%, #ff4d0a 46%, #ff9a1f 100%));
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 18px;
  margin-left: 10px;
}
.nav a.cta:hover { color: #fff; filter: brightness(1.08); }

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-block;
  /* The one filled action on a page carries the magma gradient rather than a
     flat red, so the button and the wordmark come from the same palette. */
  background: var(--magma);
  color: var(--accent-ink);
  border: 0;
  padding: 10px 18px;
  border-radius: var(--pill);
  font: 500 14px/1.2 var(--sans);
  cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 82%, #000); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.ghost:hover { background: var(--chip-hover); }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.btn.danger { background: var(--chip); color: var(--bad); }
.btn.danger:hover { background: var(--chip-hover); }

/* Forms ------------------------------------------------------------------- */

input, select {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px var(--sans);
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: 0; border-color: var(--link); background: var(--bg); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* Type -------------------------------------------------------------------- */

h1 { font-family: var(--display); font-size: clamp(30px, 5.5vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; margin: 0 0 16px; }
h2 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
h3 { font-size: 15px; font-weight: 500; margin: 0 0 7px; }
.lede { font-size: clamp(15px, 2vw, 18px); color: var(--muted); max-width: 58ch; margin: 0 0 28px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; max-width: 68ch; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

section { padding-block: 44px; border-top: 1px solid var(--line-soft); }

/* Cards ------------------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--surface); border-radius: var(--radius); padding: 20px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; margin-bottom: 12px;
}

/* Tables ------------------------------------------------------------------ */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 560px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
tbody tr:hover { background: var(--surface); }
.pill { display: inline-block; padding: 3px 9px; border-radius: var(--pill); font-size: 12px; background: var(--chip); color: var(--muted); }
.pill.ok { color: var(--good); background: var(--good-soft); }
.pill.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.empty { color: var(--muted); font-size: 14px; padding: 26px 0; }

/* Code -------------------------------------------------------------------- */

pre {
  background: var(--code-bg);
  color: #f1f1f1;
  padding: 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  font: 400 13px/1.7 var(--mono);
  margin: 0;
}
pre .c { color: #717171; }
pre .s { color: #8ed4a6; }

.keyout {
  font: 400 12.5px/1.6 var(--mono);
  word-break: break-all;
  background: var(--code-bg);
  color: #f1f1f1;
  padding: 12px;
  border-radius: var(--radius);
  margin: 11px 0 0;
}

/* Notices ----------------------------------------------------------------- */

/* Notices in MagmaRouter are confirmations, so they take the success green. The accent
   is the brand red and would read as a failure here. */
.notice {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--good-soft);
  color: var(--ink);
  margin-bottom: 20px;
  font-size: 14px;
}
.notice.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.hide { display: none !important; }

/* Page sheet and reveal footer, shared across every page ----------------------
   The page is a sheet with rounded bottom corners laid over a red footer. When
   the footer fits the viewport, magmarouter.js pins it to the bottom behind the
   sheet and a spacer of the same height lets the sheet scroll up off it. When
   it does not fit, it stays in normal flow so nothing is ever cut off. */

:root { --foot-bg: #121114; --foot-ink: #f3f3f5; --sheet-radius: 0px; }

html { background: var(--bg); }
body { background: var(--foot-bg); }

.sheet {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 64px;
  background: var(--bg);
  border-radius: 0 0 var(--sheet-radius) var(--sheet-radius);
}

.foot-spacer { height: 0; pointer-events: none; }
html.reveal .foot-spacer { height: var(--foot-h, 0px); }
html.reveal footer.site-foot { position: fixed; inset-inline: 0; bottom: 0; z-index: 0; }

footer.site-foot { background: var(--foot-bg); color: var(--foot-ink); }
.foot-cta { padding-block: 92px 64px; }
.foot-title {
  font-family: var(--display);
  font-size: clamp(38px, 6.6vw, 80px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 0 0 30px;
  max-width: 14ch;
}
/* The band is pale now, so the actions on it are ink rather than reversed. */
.btn.on-red { background: var(--ink); color: var(--bg); }
.btn.on-red:hover { background: #2b2e34; }
.btn.on-red-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.on-red-ghost:hover { background: var(--ink); color: var(--bg); }

.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px 40px;
  padding-block: 26px 30px;
  border-top: 1px solid var(--line);
}
.foot-brand { display: flex; gap: 10px; align-items: baseline; max-width: 46ch; color: var(--muted); font-size: 13px; }
.foot-brand .logo { font-size: 16px; color: var(--ink); }
.foot-brand .logo span { color: inherit; }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); font-size: 13px; }
.foot-nav a:hover { color: var(--accent); text-decoration: none; }
.foot-legal { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .sheet { padding-bottom: 40px; }
  .foot-cta { padding-block: 60px 44px; }
  .foot { grid-template-columns: 1fr; gap: 14px; }
}

/* Long-form pages (privacy, use cases) ------------------------------------ */
.prose { max-width: 70ch; padding-block: 40px 8px; }
/* No eyebrows. Held here as a backstop because the markup reaches generated pages. */
.prose .kicker, .prose .eyebrow, .kicker, .eyebrow { display: none !important; }
.prose h1 { font-size: clamp(28px, 4.4vw, 42px); margin-bottom: 14px; }
.prose .lede { color: var(--ink); font-size: 18px; margin-bottom: 22px; }
.prose p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; }
.prose h2 { font-size: 20px; margin: 32px 0 10px; }
.prose ul, .prose ol { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-block: 8px 28px; }
.cases a {
  display: block; background: var(--surface); border-radius: var(--radius); padding: 16px 18px;
  color: var(--ink); text-decoration: none;
}
.cases a:hover { background: var(--chip); text-decoration: none; }
.cases a strong { display: block; font-size: 15px; margin-bottom: 4px; }
.cases a span { color: var(--muted); font-size: 13.5px; }
@media (max-width: 720px) { .cases { grid-template-columns: 1fr; } }

/* Sign-in gate, used by the dashboard and the Playground ------------------ */
.gate { max-width: 430px; margin: 96px auto; padding: 0 24px; }
.gate h1 { font-size: 26px; margin-bottom: 8px; }
.gate p { color: var(--muted); margin: 0 0 22px; }
.gate input { width: 100%; margin-bottom: 12px; }
.gate .alt { margin-top: 18px; font-size: 13px; }
#gateCode {
  font: 500 26px/1 var(--mono);
  letter-spacing: 0.28em;
  text-align: center;
  padding: 16px 12px;
}
@media (max-width: 640px) { .gate { margin: 56px auto; } }

/* Dashboard account bar, so the site header stays identical to the other pages */
.acctbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted);
}
.acctbar #signout { color: var(--muted); }
.acctbar #signout:hover { color: var(--ink); }


/* Mobile ------------------------------------------------------------------ */

@media (max-width: 640px) {
  :root { --header-h: 53px; }

  .wrap { padding: 0 16px; }

  /* The logo shrinks a touch and the text links tighten, so the bar keeps real
     breathing room around the one filled action instead of crowding the edge. */
  header .wrap { gap: 12px; padding-block: 9px; }
  .logo { font-size: 18px; }
  .nav { gap: 4px; }
  .nav a { padding: 7px 11px; font-size: 13px; }
  .nav a.cta { padding: 7px 13px; }
  /* Anchors to sections you scroll past anyway; the real destinations stay. */
  .nav a.secondary { display: none; }

  /* Below 380px the three items would touch, so the text links drop their chip
     padding and only the filled action keeps its own. */
  @media (max-width: 380px) {
    .nav a { padding: 7px 6px; }
    .nav a.cta { padding: 7px 12px; }
  }

  /* Under 16px, iOS zooms the whole page when a field takes focus. */
  input, select, textarea { font-size: 16px; padding: 11px 13px; }

  /* Thumbs need more than a mouse pointer does. */
  .btn { padding: 12px 18px; }
  .btn.sm { padding: 8px 13px; }

  h1 { letter-spacing: -0.03em; }
  section { padding-block: 34px; }
  .grid { gap: 12px; }
  .card { padding: 17px; }

  pre { padding: 15px; font-size: 12px; }
}

/* SEO layer: guides, models, comparisons, learn ---------------------------
   Added for the generated pages. Reuses .prose, .cases, .card, pre, table.
   No left accent stripes, no hover lift: hover changes colour only. */

.prose.wide { max-width: 82ch; }

/* Breadcrumb trail. Muted, with a faint separator; current page not a link. */
.crumbs { font-size: 13px; color: var(--muted); padding-block: 24px 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: none; }
.crumbs .sep { margin: 0 8px; color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); }

/* Labelled snippet group. */
.snip { margin: 0 0 16px; }
.snip-label { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }

/* Honest-caveat callout. A tinted surface, no stripe. */
.callout {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
}
.callout strong { color: var(--ink); }

/* Spec and comparison tables reuse the base table look. */
table.spec th, table.cmp th { color: var(--muted); font-weight: 500; vertical-align: top; }
table.spec th { width: 34%; white-space: nowrap; }
table.spec td, table.cmp td { color: var(--ink); vertical-align: top; }
table.cmp thead th { color: var(--ink); font-weight: 600; }
table.cmp th:first-child { width: 22%; color: var(--muted); font-weight: 500; }
table.cmp td { width: 39%; }
table.spec .mono, table.cmp .mono { font-size: 12.5px; }

/* FAQ block. */
.faq { margin: 0 0 16px; }
.faq-item { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.faq-item p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }

/* Backlink row under an article. */
.backlink { color: var(--muted); font-size: 14px; padding-block: 8px 28px; }
.backlink a { color: var(--link); }

/* "Facts checked ..." line on comparison pages. */
.checked { color: var(--faint); font-size: 13px; margin: -8px 0 20px; }

/* The .cases grid is reused as a link grid throughout; keep it single-column
   friendly on the wider prose pages. */
.prose + .cases, article + .cases { margin-top: 4px; }

/* Editorial chrome =========================================================
   The homepage is a standalone file with its own copy of this system. These
   are the same rules expressed for the 104 pages that share this stylesheet,
   so every page in the site carries one header and one footer. The reference
   is isthmus.co.nz: a fixed wordmark in a left rail, no nav bar, a full-screen
   menu behind a burger, and a pale footer revealed by scrolling past the page.
   ------------------------------------------------------------------------ */

:root {
  --paper: var(--bg);
  --band: var(--foot-bg);
  --red: var(--accent);
  --mid: var(--muted);
  /* The second clause of a statement. Light on purpose: it is only ever set at
     display sizes, and it is never used for body copy, where it would fail to
     be readable. */
  --grey: #b4b8bf;
  --rail: clamp(24px, 17vw, 206px);
}

/* The header is a full-bleed sticky bar, not a rail.
   ------------------------------------------------------------------------
   What this replaced: a fixed wordmark pinned in a left rail with the whole
   nav hidden behind a burger. Two costs. The rail reserved up to 206px down
   the left of every page and pushed all the content right, so tables ran off
   the right edge while a sixth of the screen stayed empty. And with the nav
   behind a click, no page said what the product was without one.

   The bar spans the viewport rather than sitting inside the content column,
   because chrome that stops at the text measure reads as the first row of the
   page instead of as the frame around it. */
body > header {
  display: block;
  position: sticky; top: 0; z-index: 30;
  /* Magma seen from above: heat at the edges, cooled crust through the middle,
     so the bar carries the brand without shouting behind the type. */
  background:
    radial-gradient(120% 340% at 0% 50%, rgba(255, 92, 20, .30) 0%, rgba(193, 39, 6, .12) 34%, rgba(11, 10, 12, 0) 62%),
    radial-gradient(120% 300% at 100% 50%, rgba(193, 39, 6, .22) 0%, rgba(11, 10, 12, 0) 58%),
    #0b0a0c;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: saturate(140%) blur(6px);
}
header .wrap { display: flex; align-items: center; gap: 18px; min-height: 58px; padding-left: clamp(20px, 4vw, 40px); }
/* The nav sits in the middle of the bar, the way product chrome usually does,
   with the wordmark and the action holding the two ends. */
body > header .nav { margin-inline: auto; gap: 2px; }
/* Full bleed: the wordmark sits at the viewport's left edge and the action at
   its right, so this one overrides the measure that every other .wrap keeps. */
header .wrap {
  max-width: none;
  margin-inline: 0;
  padding: 0 clamp(16px, 2.2vw, 28px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
  height: var(--header-h);
}
header .logo {
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.03em; color: var(--ink);
  white-space: nowrap; flex: none;
}
header .logo:hover { text-decoration: none; }

/* The search is real: /models runs a server-side search, so this submits there
   rather than pretending to filter the page it sits on. */
.hsearch { flex: 0 1 340px; min-width: 0; }
.hsearch input {
  width: 100%;
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 13.5px var(--sans);
}
.hsearch input::placeholder { color: var(--faint); }
.hsearch input:focus { outline: 0; border-color: var(--muted); background: var(--bg); }

/* Nav pushes to the right edge. */
header .nav { margin-left: auto; gap: 2px; }
header .nav a { font-size: 13.5px; padding: 7px 10px; }
header .nav a.cta {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; margin-left: 8px; padding: 7px 15px;
}
header .nav a.cta:hover { background: color-mix(in srgb, var(--accent) 82%, #000); }

/* The burger is the phone presentation of the same nav, and only that. Above
   900px the links are in the bar, so it would be a second way to reach them. */
header .burger { display: none; position: static; margin-left: auto; }

@media (max-width: 900px) {
  .hsearch, header .nav { display: none; }
  header .burger {
    display: grid; width: 30px; height: 20px;
    align-content: space-between; padding: 3px 0;
    background: none; border: 0; cursor: pointer;
  }
}

/* The old fixed rail. Kept only so a hand-written page that still ships the
   markup does not paint a second wordmark over the bar. */
.rail { display: none; }

.rail-legacy {
  font-family: var(--display);
  position: fixed;
  top: 34px;
  left: 24px;
  /* Matched to the homepage rail deliberately. These were 152px/17px while the
     homepage ran to 34px, so the wordmark visibly changed size the moment you
     left the front page. One clamp in both places, one mark. */
  width: clamp(150px, 15vw, 300px);
  z-index: 30;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 43px);
  line-height: 1.24;
  letter-spacing: -0.016em;
}
.rail a { color: inherit; }
.rail a:hover { text-decoration: none; }
.rail .mark { color: var(--ink); display: block; }
.rail .mark i { color: inherit; font-style: normal; }

.burger {
  position: fixed;
  top: 32px;
  right: 30px;
  z-index: 40;
  width: 34px;
  height: 22px;
  display: grid;
  align-content: space-between;
  padding: 3px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .15s ease; }
.open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.open .burger span:nth-child(2) { opacity: 0; }
.open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--paper);
  padding: 110px clamp(24px, 8vw, 96px) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.open .menu { opacity: 1; visibility: visible; }
.menu a {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.16;
  letter-spacing: -0.04em;
  color: var(--grey);
  width: max-content;
  max-width: 100%;
  transition: color .15s ease;
}
.menu a:hover, .menu a[aria-current] { color: var(--ink); text-decoration: none; }

/* The content column is centred now that the rail is gone. It used to carry a
   16.667% left padding to clear the fixed wordmark, which meant a sixth of every
   wide screen was empty and the tables were squeezed against the right edge. */
.wrap { max-width: 1240px; margin-inline: auto; padding: 0 clamp(20px, 4vw, 48px); }
.wrap.narrow { max-width: 1000px; }

/* The statement -----------------------------------------------------------
   The lead clause carries the ink and the rest of the sentence drops to grey,
   sharing one line box so the colour changes mid-line. That is the whole
   effect. Set smaller than the homepage's because these ledes are sentences
   rather than slogans, and held to a measure so a long one still reads as a
   statement instead of a wall. */
.statement {
  padding-block: clamp(34px, 5vw, 76px) clamp(28px, 4vw, 54px);
}
/* The heading keeps the display treatment. The lede does not: a whole
   paragraph set at 50px is a wall, which is exactly how it read on the pages
   whose ledes run to three sentences. Heading large, sentence readable. */
.statement > h1 {
  display: block;
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 18em;
  color: var(--ink);
}
.statement > .lede {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 70ch;
  color: var(--grey);
}
/* A heading with no lede behind it is still a heading. */
.prose > h1 { margin: 0 0 clamp(26px, 3.5vw, 44px); }

/* Every label and heading takes a full stop, which is the reference's single
   most recognisable habit. Only where the text does not punctuate itself. */
.menu a::after, .crumbs span[aria-current]::after { content: '.'; }

/* Footer ------------------------------------------------------------------
   Pinned behind the page and revealed by scrolling past the end of it, rather
   than arriving in flow. The spacer opens the gap it shows through, and only
   while the footer fits on screen: a taller one would have its top unreachable,
   so it stays in flow. */
.foot-spacer { height: 0; pointer-events: none; }
html.reveal .foot-spacer { height: var(--foot-h, 0px); }
/* The footer sits in flow. It used to be pinned behind the page and revealed
   by scrolling past it, which reads as a trick once the site has a normal
   header bar. */

.ed-foot { background: var(--band); padding: 40px 30px 46px; }
/* Full bleed rather than held to the page column: three columns of real size
   read better across the whole width than five small ones in the middle. */
.ed-foot .cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
  max-width: none;
  margin: 0;
  padding-left: var(--rail);
  font-size: 14px;
  line-height: 1.7;
}
.ed-foot .legal { color: var(--mid); }
.ed-foot h3 { margin: 0 0 6px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ed-foot .foot-nav { display: flex; flex-direction: column; align-items: flex-start; }
.ed-foot a { transition: color .15s ease; }
.ed-foot a:hover { color: var(--red); text-decoration: none; }
.ed-foot .end { color: var(--mid); word-break: break-all; }
.ed-foot .social { display: flex; flex-direction: column; align-items: flex-start; }

.menu-word {
  display: block;
  margin-left: auto;
  width: max-content;
  padding-block: clamp(40px, 7vw, 92px) clamp(40px, 6vw, 76px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.035em;
}

@media (max-width: 900px) {
  :root { --rail: 0px; }
  /* The burger now lives in the bar, which is already sticky, so it needs no
     positioning of its own. It only has to stay put while the overlay is up. */
  .open header .burger { position: fixed; top: 18px; right: 20px; z-index: 40; }
  .wrap { padding-inline: 20px; }
  .ed-foot .cols { grid-template-columns: 1fr 1fr; gap: 22px 26px; padding-left: 0; }
  .menu-word { margin-left: 0; }
}
@media (max-width: 460px) {
  .ed-foot .cols { grid-template-columns: 1fr; }
}

/* Docs --------------------------------------------------------------------
   Three columns: the grouped rail, the page, and an "On this page" list built
   from the headings. Collapses to one column before the middle gets squeezed. */
.doc-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 210px;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(20px, 3vw, 44px) clamp(60px, 8vw, 110px);
}
.doc-side { position: sticky; top: 92px; }
.doc-side-group { margin-bottom: 26px; }
.doc-side-group h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em; color: var(--ink);
}
.doc-side a {
  display: block; padding: 5px 0 5px 12px;
  border-left: 1px solid var(--line);
  font-size: 14px; line-height: 1.45; color: var(--muted); text-decoration: none;
}
.doc-side a:hover { color: var(--ink); }
.doc-side a.on { color: var(--ink); border-left-color: var(--accent); }

.doc-main { min-width: 0; }
.doc-head { padding-block: 6px clamp(24px, 3vw, 40px); }
.doc-head h1 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -0.022em;
  color: var(--ink);
}
.doc-head p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--muted); }

.doc-toc { position: sticky; top: 92px; }
.doc-toc h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 500; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.doc-toc a { display: block; padding: 4px 0; font-size: 13px; color: var(--muted); text-decoration: none; }
.doc-toc a:hover { color: var(--ink); }

/* Numbered quickstart steps. */
.doc-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; margin: 0 0 26px; }
.doc-step-n {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  font: 500 13px/1 var(--mono); color: var(--ink);
}
.doc-step-b h3 { margin: 4px 0 8px; font-size: 16px; }

.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-card {
  display: block; padding: 18px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none;
}
.doc-card:hover { border-color: var(--accent); }
.doc-card-t { display: block; margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.doc-card-d { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.doc-next { margin-top: clamp(34px, 5vw, 60px); border-top: 1px solid var(--line); padding-top: 18px; }
.doc-next-link { display: block; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.doc-next-link span { display: block; font: 400 11.5px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

@media (max-width: 1080px) {
  .doc-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 760px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-side { position: static; }
  .doc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Nav dropdown ------------------------------------------------------------
   Use cases is the one item worth opening: the 31 pages under it are the whole
   "LLMs for high-risk industries" pitch, and burying them behind a hub page
   means nobody ever learns the product is aimed at them. Opens on hover and on
   keyboard focus, so it is not mouse-only. */
.navdrop { position: relative; display: inline-flex; }
.navdrop > a i { font-style: normal; font-size: 9px; margin-left: 5px; vertical-align: middle; opacity: .7; }
.navdrop-menu {
  position: absolute; top: calc(100% + 10px); left: -8px;
  display: none;
  min-width: 268px;
  padding: 12px 0 6px;
  background: #121013;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  z-index: 40;
}
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu { display: block; }
.navdrop-head {
  display: block; padding: 0 16px 10px;
  font: 400 11.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
}
.navdrop-menu { min-width: 320px; }
.navdrop-menu a {
  display: block; padding: 10px 16px;
  font-size: 14px; color: var(--muted); border-radius: 0;
}
.navdrop-menu a b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 3px;
}
.navdrop-menu a em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.navdrop-menu a:hover b { color: #ff7a2f; }
.navdrop-menu a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); text-decoration: none; }
.navdrop-all {
  margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 10px !important; color: #ff7a2f !important;
}
@media (max-width: 900px) { .navdrop-menu { display: none !important; } }

/* Docs sections sit closer together than article prose: a reference page with
   40px between every heading reads as a list of unrelated pages. */
.doc-main .prose section + section { margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(22px, 2.5vw, 32px); border-top: 1px solid var(--line); }
.doc-main .prose h2 { margin-top: 0; }

/* Code blocks wrap instead of scrolling. A curl line with a long URL was
   producing a permanent light scrollbar across a dark block, which looked
   broken; wrapping keeps the whole command visible and still copies cleanly. */
pre.code, .prose pre, .doc-main pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
}
/* Where something genuinely must scroll (wide tables), the bar matches the
   page rather than the operating system. */
.tablewrap, pre.code, .prose pre, .doc-main pre { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.tablewrap::-webkit-scrollbar, pre::-webkit-scrollbar { height: 8px; width: 8px; }
.tablewrap::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { background: transparent; }
.tablewrap::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.tablewrap::-webkit-scrollbar-thumb:hover, pre::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* Footer ------------------------------------------------------------------ */
.ed-foot {
  background: #0d0c0f;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: clamp(44px, 6vw, 72px) 0 clamp(26px, 3vw, 38px);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.foot-brand .logo { font-size: 22px; }
.foot-brand p { margin: 12px 0 0; max-width: 24ch; font-size: 14px; line-height: 1.6; color: var(--faint); }
.foot-col h3 {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: var(--ink);
}
.foot-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--muted); }
.foot-col a:hover { color: var(--ink); text-decoration: none; }
.foot-legal {
  margin-top: clamp(34px, 5vw, 60px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13px; color: var(--faint);
}
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The mark sits beside the wordmark in both the bar and the footer. */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.mark-svg { flex: none; display: block; }
.foot-brand .mark-svg { width: 30px; height: 30px; }