@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%);
  /* Buttons take a darker pair of stops than the wordmark does. White on the
     bright end of --magma is about 2.1:1, which is what made the labels look
     washed out; this runs 5.6:1 down to 3.9:1 and stays the same orange. */
  --magma-btn: linear-gradient(96deg, #c81f02 0%, #e24a0c 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 ------------------------------------------------------------------ */

/* One header for every page.
   The homepage used to keep its own copy of this block, which is exactly how it
   drifted: the copy still carried a 700 wordmark and a guessed mark nudge long
   after both were fixed here, so the bar was a different height and a different
   weight depending on which page you were on. There is one definition now. */
header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
/* Edge to edge rather than inside the content column, so it reads as product
   chrome rather than as the first row of the page. */
body > 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: 57px;
}
body > header .nav { margin-left: auto; }
.logo { font-family: var(--sans); font-weight: 400; 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: 400;
  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-btn, linear-gradient(96deg, #c81f02 0%, #e24a0c 100%));
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 18px;
  margin-left: 10px;
}
.nav a.cta:hover { color: #fff; filter: brightness(1.08); }

/* Real search: /models searches server side, so this submits there rather than
   pretending to filter the page it sits on. */
.hsearch { flex: 0 1 320px; min-width: 0; }
.hsearch input {
  width: 100%; padding: 7px 13px;
  background: var(--slab, #141317); border: 1px solid var(--line);
  color: var(--ink); font: 400 13.5px var(--sans); border-radius: 999px;
  outline: none;
}
.hsearch input::placeholder { color: var(--muted); }
.hsearch input:focus { border-color: var(--mid, var(--muted)); }

/* The burger is only the phone presentation of the same nav. Above 900px the
   links are in the bar, so it would be a second route to the same places. */
body > header .burger { display: none; position: static; margin-left: auto; }
@media (max-width: 900px) {
  .hsearch, body > header .nav { display: none; }
  body > header .burger {
    display: grid; width: 30px; height: 20px;
    align-content: space-between; padding: 3px 0; position: static;
  }
}

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

.btn {
  display: inline-block;
  /* The button gradient, not the wordmark one: white on the bright end of
     --magma is about 2.1:1 and the label looked washed out. Same orange, dark
     enough to read. */
  background: var(--magma-btn);
  color: var(--accent-ink);
  border: 0;
  padding: 10px 18px;
  border-radius: var(--pill);
  font: 400 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: 400; 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: 400; 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: 400 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. */


/* The docs use the window ------------------------------------------------
   A documentation page is three columns: contents, the page, and where you are
   in it. Squeezing that into the 1240px measure the marketing pages use leaves
   a sidebar, a narrow middle and a rail crammed together with a third of the
   screen empty on either side. The reading column keeps a measure of its own;
   what changes is that the frame stops pretending the window is smaller than
   it is. */
.wrap-docs { max-width: none; padding-inline: clamp(20px, 3vw, 44px); }
.wrap-docs .doc-shell { max-width: 1600px; margin-inline: auto; }

/* Docs chrome ------------------------------------------------------------
   The docs are on their own host and wear a reduced version of the bar: the
   mark, the word Docs so a tab is identifiable, and three ways back. The
   marketing header sells, which is the wrong job on a page somebody is reading
   to get something working. */
.doc-bar { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.doc-bar .wrap { display: flex; align-items: center; gap: 18px; min-height: 56px; }
.doc-bar .logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; color: var(--ink); }
.doc-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 2px 6px; margin-left: 2px;
}
.doc-bar-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.doc-bar-nav a { color: var(--muted); font-size: 13.5px; padding: 7px 10px; }
.doc-bar-nav a:hover { color: var(--ink); text-decoration: none; }
.doc-bar-nav a.cta { background: var(--magma-btn); color: var(--accent-ink); font-weight: 500; }
.doc-bar-nav a.cta:hover { color: var(--accent-ink); filter: brightness(1.08); }
@media (max-width: 640px) {
  .doc-bar-nav a:not(.cta) { display: none; }
}

/* One row. A reference page ends when the reading does, and nobody finishes one
   wanting a site map. */
.doc-foot { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 88px); }
.doc-foot .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 22px; }
.doc-foot span { color: var(--faint); font-size: 13px; }
.doc-foot nav { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.doc-foot nav a { color: var(--muted); font-size: 13px; }
.doc-foot nav a:hover { color: var(--ink); text-decoration: none; }

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

/* A page that is mostly table and answers rather than running text. The reading
   measure is the right default and the wrong one here: it left the spec table
   and the FAQ occupying half the window with the other half empty, which reads
   as a broken layout rather than a considered one.

   So the article takes the full width of its wrap and the measure moves inward,
   onto the elements that actually carry sentences. The FAQ splits into two
   columns once there is room for them, because stretching one answer across
   1240px is using the width rather than earning it. */
.prose.full { max-width: none; }
/* No measure on the running text either. A reading measure is the right default
   and it is not what this page wants: the table and the FAQ beside it run the
   full width, and a paragraph stopping two thirds of the way across reads as a
   column that gave up rather than as a considered line length. The FAQ keeps
   its comfortable lines a different way, by splitting into two columns below,
   which is the answer that uses the width instead of leaving it empty. */
.prose.full > p,
.prose.full > ul,
.prose.full > ol,
.prose.full .callout { max-width: none; }
@media (min-width: 900px) {
  .prose.full .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 4vw, 64px);
  }
  /* Every item keeps its rule in a grid: :last-child is the last in the source,
     not the last in a column, so dropping that one border leaves a gap in the
     middle of the left column instead of tidying the bottom. */
  .prose.full .faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
}

/* 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: 400; }

/* 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: 400; 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: 700; }
table.cmp th:first-child { width: 22%; color: var(--muted); font-weight: 400; }
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(--sans); font-weight: 400;
  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: 700; margin-left: 8px; padding: 7px 15px;
}
header .nav a.cta:hover { background: color-mix(in srgb, var(--accent) 82%, #000); }

/* The burger is the last resort, not the first thing to give. The bar sheds
   width in order: the search box goes, then the nav tightens, then the least
   important links drop, and only when there is genuinely no room left does the
   whole thing collapse behind a button. A burger on a 1000px window hides a nav
   that would have fitted. */
header .burger { display: none; position: static; margin-left: auto; }

/* 1. The search box is the widest thing in the bar and /models has its own. */
@media (max-width: 1180px) {
  .hsearch { display: none; }
}

/* 2. Tighten the links before dropping any. */
@media (max-width: 1000px) {
  body > header .nav { gap: 0; }
  .nav a { padding: 7px 9px; font-size: 13.5px; }
  .nav a.cta { padding: 8px 14px; }
}

/* 3. Shed the two links that have a home elsewhere: Models sits in the footer
   and in the use-cases sheet, Chat is one tap from the CTA. */
@media (max-width: 860px) {
  .nav a[href="/models"], .nav a[href="/app"]:not(.cta) { display: none; }
}

/* 4. Only now the burger. */
@media (max-width: 720px) {
  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; }

/* The burger belongs to the header and is positioned by it.
   This rule used to pin it `position: fixed` at the top right on its own, which
   meant any page still carrying the old standalone markup painted a floating X
   over the content with no wordmark next to it. On /app that read as the close
   button of the sign-in dialog, and clicking it threw the full-screen nav over
   the card. Static by default, so stray markup degrades to something harmless
   instead of to a trap. */
.burger {
  position: static;
  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(--sans);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  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(--sans); font-weight: 400;
  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: 400; 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: 400 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); right: -8px; left: auto;
  max-width: calc(100vw - 28px);
  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; }
/* The gap above the panel is a dead zone, and it made the menu unusable: the
   pointer leaves .navdrop on the way down, :hover goes false, and the thing
   closes before the cursor arrives. This bridges it with a transparent strip
   that belongs to the menu, so the pointer never leaves the element it is
   travelling into. The 10px of air stays; it just is not a trap any more. */
.navdrop-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 11px;
}
.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);
}
/* The brand block stacks: wordmark first, the line on its own row under it.
   The base .foot-brand rule higher up lays this out as a flex row, which put
   the tagline beside the wordmark and wrapped it into the column gutter. */
.foot-brand { flex-direction: column; align-items: flex-start; gap: 0; }
.foot-brand .logo { font-size: 22px; }
.foot-brand p { margin: 12px 0 0; max-width: 34ch; 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; }
/* The mark is centred against the wordmark's CAP HEIGHT, not its line box.
   align-items: center lines up the two BOXES, and a text box carries descender
   space below the baseline, so the visible letterforms sit above the box centre
   and the mark reads low beside them.
   Measured on the rendered header rather than guessed: in Figtree, the font the
   wordmark actually renders in, the cap-height centre sits 0.0263em above the
   line-box centre, so the correction is in em and holds at every size the mark
   is used at, 24px in the mobile bar through 30px in the footer.
   Measure it against the font that ships. The same figure for Calibre is
   0.184em, seven times larger, and using that would have thrown the mark 3px
   high for everyone who does not happen to own Calibre.
   A transform, not a margin: margin on a centred flex item shifts it by half
   the number, which is why an earlier -2.5px only moved it 1.25px.
   This is an optical correction, not a layout fix. */
.logo .mark-svg { transform: translateY(-0.0263em); }
.foot-brand .mark-svg { width: 30px; height: 30px; }

/* Coding plan ------------------------------------------------------------- */
.plan-periods {
  display: inline-flex; gap: 4px; margin: 0 auto clamp(26px, 3vw, 40px);
  padding: 5px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.plans + .plan-notes { margin-top: clamp(40px, 5vw, 72px); }

/* The notes under the plan cards sit below three full-width columns, so a single
   reading column there leaves two thirds of the page empty and reads as a
   layout that gave up. Two text columns use the width without stretching any
   line: column flow keeps the sections in order, top of the first to the bottom
   and on to the second, so nothing has to be read out of sequence. Headings
   stay with what follows them and nothing splits across the gutter. */
@media (min-width: 1000px) {
  .plan-notes.full { columns: 2; column-gap: clamp(32px, 4vw, 72px); }
  .plan-notes.full > h2 { break-after: avoid; margin-top: 0; }
  .plan-notes.full > h2:not(:first-child) { margin-top: 26px; }
  .plan-notes.full > p,
  .plan-notes.full > ul,
  .plan-notes.full > ol,
  .plan-notes.full .callout { break-inside: avoid; max-width: none; }
}
.plan-periods { display: flex; width: max-content; }
.plan-periods button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--muted);
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
}
.plan-periods button span { color: #ff7a2f; font-weight: 400; }
.plan-periods button[aria-pressed="true"] { background: rgba(255, 255, 255, .08); color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan {
  display: flex; flex-direction: column;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.plan-pop { border-color: rgba(255, 122, 47, .55); }
.plan-name {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; color: var(--ink);
}
.plan-tag {
  padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 122, 47, .5);
  font: 400 11px/1.4 var(--sans); color: #ff7a2f; letter-spacing: 0;
}
.plan-for { margin-top: 4px; font-size: 13.5px; color: var(--faint); }
.plan-price { margin: 26px 0 18px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan-cur { font-size: 16px; color: var(--muted); }
.plan-num { font-family: var(--sans); font-weight: 400; font-size: 40px; letter-spacing: -0.03em; color: var(--ink); }
.plan-per { font-size: 14px; color: var(--muted); }
.plan-was { font-size: 13px; color: var(--faint); text-decoration: line-through; margin-left: 6px; }
.plan-cta {
  display: block; text-align: center; padding: 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #0b0a0c;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.plan-cta:hover { text-decoration: none; background: #fff; }
.plan-cta-pop { background: var(--magma); color: #fff; }
.plan-cta-pop:hover { background: var(--magma); filter: brightness(1.08); color: #fff; }
.plan-allow { margin: 22px 0 6px; font-size: 14px; color: var(--muted); }
.plan-allow b { color: var(--ink); font-weight: 700; }
.plan-blurb { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--faint); }
.plan-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan-points li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.plan-points li::before { content: '✓'; position: absolute; left: 0; color: #ff7a2f; font-size: 12px; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Bold is Calibre everywhere ---------------------------------------------
   Headings already used the display face, but every <b> and <strong> in prose,
   in the plan cards and in the docs fell back to Figtree's bold, so two
   different bolds sat next to each other on the same line. Monospace keeps its
   own weight: a bold inside a terminal block has to stay in the terminal face
   or the columns stop lining up. */
/* Headings carry Calibre, which only ships at 700. In a paragraph at 14px that
   same face reads as a slab, so inline bold stays on Figtree at 600: heavy
   enough to mark a phrase, light enough not to shout. */
b, strong, .plan-allow b, .doc-card-t {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0;
}
pre b, pre strong, code b, code strong, .mono b, .mono strong,
.slab-body b, .slab-body strong, table.spec td.mono b {
  font-family: var(--mono);
  letter-spacing: 0;
}

/* Plan card art ------------------------------------------------------------
   Drawn in CSS rather than shipped as three images: gradients scale to any
   screen, weigh nothing, and can be recoloured with the brand in one place.
   The heat rises with the tier, which is the only ranking signal the cards
   need beyond the price. */
.plan { padding-top: 0; overflow: hidden; }
.plan-art {
  height: 108px;
  margin: 0 -24px 22px;
  background:
    radial-gradient(120% 140% at 18% 120%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #1b1a1f 0%, #121116 70%);
  border-bottom: 1px solid var(--line);
}
.plan-art-lite {
  background:
    radial-gradient(130% 150% at 10% 130%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(160deg, #24232a 0%, #121116 72%);
}
.plan-art-pro {
  background:
    radial-gradient(120% 160% at 78% -20%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(130% 150% at 8% 130%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #2b2a31 0%, #141319 74%);
}
.plan-art-max {
  background:
    radial-gradient(120% 170% at 74% -25%, rgba(255, 154, 31, .55) 0%, rgba(255, 77, 10, .22) 34%, rgba(20, 19, 25, 0) 66%),
    radial-gradient(130% 150% at 6% 130%, rgba(225, 6, 0, .22) 0%, rgba(20, 19, 25, 0) 58%),
    linear-gradient(160deg, #2a1c1c 0%, #141319 76%);
}
.plan-top { padding-top: 2px; }

/* Weight cap ---------------------------------------------------------------
   Two weights exist on this site, 400 and 700, and nothing above them. Three
   things enforce that rather than relying on discipline:

   1. font-synthesis-weight: none. Without it a browser asked for 700 when only
      400 is loaded will smear the outline and invent a fake bold, which is
      where "ultra bold" comes from even when no stylesheet asks for it.
   2. Display-size headings are pinned to 400 in the sans face. Calibre only
      ships at 700 here, so anything large set in it is heavy by definition.
   3. The build throws on any font-weight above 700, so a stray 800 or 900
      cannot reach production.
*/
* { font-synthesis-weight: none; font-synthesis: none; }
h1, h2,
.land-h, .land-h em,
.statement > h1, .statement p,
.feats-h, .doc-head h1,
.plan-name, .plan-num {
  font-family: var(--sans);
  font-weight: 400;
}

/* Get started ------------------------------------------------------------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; margin: 0 0 18px; }
.tabs button {
  padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--muted);
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
}
.tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, .08); color: var(--ink); }

.cmd { position: relative; margin: 0 0 18px; }
.cmd-t {
  margin: 0; padding: 16px 92px 16px 16px;
  background: var(--code-bg); border: 1px solid var(--line);
  font: 400 13px/1.7 var(--mono); color: #d4d7dd;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cmd-c {
  position: absolute; top: 10px; right: 10px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 12.5px;
}
.cmd-c:hover { background: rgba(255, 255, 255, .14); }
.cmd-c.on { background: var(--magma); border-color: transparent; color: #fff; }
.start-note { font-size: 14px; color: var(--muted); margin: 0 0 10px; }

/* Four harnesses in a row need a heading small enough not to read as a section
   of its own, but heavy enough to break the list of commands into blocks. */
.harness-h {
  font: 700 15px/1.3 var(--display);
  color: var(--ink);
  margin: 26px 0 6px;
}
.harness-h:first-of-type { margin-top: 14px; }

/* The narrow bar ----------------------------------------------------------
   Below the nav breakpoint the header is a wordmark and a button, and it looked
   like a placeholder: no depth, a burger drawn as three bare lines, and no
   separation from the page. These are the details that make a bar read as
   finished rather than unstyled. */
@media (max-width: 720px) {
  body > header .wrap { min-height: 62px; padding-inline: 18px; }
  body > header .logo { font-size: 17px; }
  body > header .logo .mark-svg { width: 24px; height: 24px; }

  /* The burger gets a target of its own rather than floating in space. */
  header .burger {
    width: 40px; height: 34px; padding: 9px 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
  }
  header .burger span { height: 1.5px; background: var(--ink); border-radius: 2px; }
  header .burger:hover { border-color: rgba(255, 255, 255, .3); }
  html.scrolled body > header { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
}

/* The full-screen sheet the burger opens, given the same treatment as the bar:
   the wordmark at the top, generous spacing, and the action last. */
.menu .menu-mark { display: inline-flex; align-items: center; gap: 9px; }

/* Transparent at the top ---------------------------------------------------
   The bar floats over whatever the page opens with, and takes its background
   the moment content starts passing underneath. Sticky means nothing is behind
   it at scroll zero, so there is nothing to obscure. */
header { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
html:not(.scrolled) header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.key-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: rgba(255, 255, 255, .4); }
.key-msg { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

/* The one command ----------------------------------------------------------
   Standing on its own above everything else on the page, because it is the
   whole point of the page and the rest is explanation. */
.one { margin: clamp(10px, 2vw, 22px) 0 clamp(40px, 5vw, 66px); }
.one-cmd {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 18px 22px;
  background: #100e13;
  border: 1px solid rgba(255, 122, 47, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.one-cmd code {
  flex: 1 1 auto; min-width: 0;
  font: 400 clamp(13px, 1.15vw, 15.5px)/1.6 var(--mono); color: #f0f1f3;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.one-copy {
  flex: none; padding: 11px 22px; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--magma); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
.one-copy:hover { filter: brightness(1.08); }
.one-copy.on { background: #1c7a4c; }
.one-note { margin: 12px 2px 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 620px) {
  .one-cmd { flex-direction: column; align-items: stretch; }
  .one-copy { width: 100%; }
}