/* IBM Plex Sans and Mono, served from our own domain. Licence: assets/fonts/LICENSE-IBM-Plex.txt (SIL OFL 1.1).
   Latin covers English and most European names; latin-ext adds the macrons used in te reo Maori and other
   Latin Extended letters, and is only fetched when a page actually contains one. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Linekeeper: shared stylesheet for the marketing pages.
   White paper, evergreen accent, ledger boxes kept boxy at rest.
   One committed color carries the pill CTAs, the progress rail, and the
   stat band; the verdict colors (ok/review/exception) stay a separate,
   functional vocabulary and are never used as decoration. */

:root {
  --paper:#ffffff; --card:#fdfdfb; --sunk:#f5f4ee;
  --ink:#181c18; --muted:#5c6058; --faint:#6b6f64;
  --rule:#e6e4d9; --rule-strong:#d3d0c1;
  --ok:#1f6f3f; --review:#8a5d0e; --exception:#b3261e;
  --accent:#0b6b46; --accent-2:#12915f; --accent-ink:#f6fbf7;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --measure:64ch;
  --radius:4px; --radius-lg:10px; --radius-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(15,20,15,.05), 0 2px 6px rgba(15,20,15,.04);
  --shadow-md:0 4px 14px rgba(15,20,15,.07), 0 14px 30px rgba(15,20,15,.06);
  --shadow-lg:0 14px 34px rgba(15,20,15,.11), 0 34px 70px rgba(15,20,15,.10);
}
/* White is the default unconditionally: no `@media (prefers-color-scheme: dark)`
   block. The brief was explicit ("never dark by default", "white clean and
   welcoming"), so a visitor's OS preference no longer silently overrides that; dark
   stays reachable only by deliberate choice, through the `data-theme="dark"` attribute
   below, for the day a visible toggle is built. */
:root[data-theme="dark"] {
  --paper:#12140f; --card:#191c15; --sunk:#0f110c;
  --ink:#eceee4; --muted:#a7ab9c; --faint:#9a9f8c;
  --rule:#2c2f26; --rule-strong:#3c4033;
  --ok:#5fbd85; --review:#d9a441; --exception:#e8776b;
  --accent:#3fbf85; --accent-2:#57d99a; --accent-ink:#0b1a11;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.22);
  --shadow-md:0 4px 14px rgba(0,0,0,.34), 0 14px 30px rgba(0,0,0,.26);
  --shadow-lg:0 14px 34px rgba(0,0,0,.4), 0 34px 70px rgba(0,0,0,.32);
}

/* Increase Contrast (macOS and iOS) and the equivalent Windows/browser setting: muted
   text and hairlines step darker, and the lighter accent gives way to the deep one. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --muted:#3f433c; --faint:#474b42; --rule:#b9b6a6; --rule-strong:#8c8978; --accent-2:#0b6b46;
  }
}

*, *::before, *::after { box-sizing:border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
input[type="checkbox"], input[type="radio"] { width:18px; height:18px; accent-color:var(--accent); }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:0.9375rem/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Browser surfaces belong to the design too: selection, caret, scrollbar. */
::selection { background:var(--accent); color:var(--accent-ink); }
html { caret-color:var(--accent); scrollbar-color:var(--rule-strong) transparent; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--rule-strong); border-radius:99px; border:3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background:var(--faint); }

a { color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
code {
  font-family:var(--mono); background:var(--sunk); padding:1px 5px;
  border-radius:2px; font-size:.88em; word-break:break-word;
}
.skip {
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:20; text-decoration:none;
}
.skip:focus { left:8px; top:8px; }

.wrap { max-width:840px; margin:0 auto; padding:0 24px; }
.wrap-wide { max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---- header / footer ---- */
.site-head {
  border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.site-head .wrap-wide { display:flex; align-items:center; gap:14px; padding-top:13px; padding-bottom:13px; }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); padding:8px 0; margin:-8px 0; }
.brand svg { display:block; flex:none; }
.brand b { font-weight:600; font-size:1rem; letter-spacing:-0.012em; }
.site-head nav { margin-left:auto; display:flex; align-items:center; gap:22px; }
.site-head nav a { color:var(--muted); font-size:0.8438rem; text-decoration:none; transition:color .15s var(--ease); }
.site-head nav a:hover { color:var(--ink); }
/* 18px-tall links were under the 24px (WCAG) and 28pt (HIG) target minimums; this grows
   the hit area to 38px while the visible layout stays where it was. */
.site-head nav a:not(.cta) { padding:10px 6px; margin:-10px -6px; }
.site-head nav a[aria-current="page"] { color:var(--accent); }
/* Specificity guard: `.site-head nav a` above otherwise beats `.cta`'s single
   class, so the header's own CTA rendered muted-on-accent text at ~1:1 contrast. */
.site-head .cta { color:var(--accent-ink); }
.site-head .cta.ghost { color:var(--ink); }
.site-head .cta:hover { color:var(--accent-ink); }
.site-head .cta.ghost:hover { color:var(--ink); }

.cta {
  display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--accent-ink);
  text-decoration:none; font:500 0.8438rem/1.25 var(--sans); padding:11px 21px;
  border:1px solid var(--accent); border-radius:var(--radius-pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease;
  white-space:nowrap; cursor:pointer; box-shadow:var(--shadow-sm);
}
.cta:hover { background:var(--accent-2); border-color:var(--accent-2); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.cta:active { transform:translateY(0); box-shadow:var(--shadow-sm); }
.cta.ghost { background:transparent; color:var(--ink); border-color:var(--rule-strong); box-shadow:none; }
.cta.ghost:hover { border-color:var(--ink); background:var(--sunk); box-shadow:none; transform:none; }

.site-foot { background:var(--card); border-top:1px solid var(--rule); }
.site-foot .wrap-wide { padding-top:44px; padding-bottom:44px; }
.foot-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; }
.foot-cols h2 {
  font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint); margin:0 0 12px;
}
.foot-cols ul { list-style:none; margin:0; padding:0; }
.foot-cols li { margin:0 0 10px; }
.foot-cols a { color:var(--muted); font-size:0.8438rem; text-decoration:none; }
.foot-cols li a { display:inline-block; padding:5px 0; margin:-5px 0; }
.foot-cols a:hover { color:var(--ink); }
.foot-note { margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); color:var(--faint); font-size:0.7812rem; }

/* ---- sections + type ---- */
section { border-bottom:1px solid var(--rule); }
section:last-of-type { border-bottom:0; }
section .wrap, section .wrap-wide { padding-top:64px; padding-bottom:64px; }

h1 { font-size:clamp(2.125rem, 5.4vw, 4.25rem); line-height:1.05; letter-spacing:-0.036em; margin:0 0 22px; font-weight:600; }
h2 { font-size:clamp(1.5rem, 2.9vw, 2rem); line-height:1.16; letter-spacing:-0.02em; margin:0 0 14px; font-weight:600; }
h3 { font-size:0.9375rem; margin:0 0 5px; font-weight:600; }
/* An inline ordinal beside a heading, used only where the sequence itself is
   information the reader needs (a numbered pipeline step), never as a floating
   label above the heading: that device is retired everywhere on the site. */
.step-n { font-family:var(--mono); font-weight:400; color:var(--faint); margin-right:12px; font-size:0.6875rem; vertical-align:middle; }
p { max-width:var(--measure); }
p + p { margin-top:14px; }
.lede { font-size:1.1875rem; line-height:1.5; color:var(--muted); margin:0 0 30px; max-width:56ch; }
.muted { color:var(--muted); }
.small { font-size:0.8438rem; }
.hero { border-bottom:0; }
.hero .wrap-wide { padding-top:min(9vw,92px); padding-bottom:64px; }
.actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.actions .note { color:var(--faint); font-size:0.8125rem; }

/* ---- hero: headline column beside the worked ledger, entering the frame
   rather than waiting below the fold ---- */
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:56px; align-items:start; }
.hero-grid .ledger { margin-top:6px; }
@media (max-width:980px) { .hero-grid { grid-template-columns:1fr; gap:40px; } }

/* ---- reveal-on-scroll: visible by default, JS hides then reveals ----
   `.reveal` alone (0,1,0 specificity) starts hidden. `.reveal.is-in` (0,2,0)
   is more specific and wins once JS adds it, regardless of source order.
   `html:not(.js) .reveal` only ever matches when the js class is absent, so
   a no-JS page (or this file failing to load) shows everything, full stop. */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
html:not(.js) .reveal { opacity:1; transform:none; }
.reveal-1 { transition-delay:.08s; } .reveal-2 { transition-delay:.16s; } .reveal-3 { transition-delay:.24s; }

/* The one place the page departs from the shared reveal: the headline is the single
   highest-value element on the surface, so it gets its own weight (a longer settle,
   a larger starting offset) and a second, later moment, an accent rule drawing in
   under the closing word once the text itself has landed. Same mechanism, more of it,
   not a different one, so the page still reads as one motion language. */
.hero-h1.reveal { transform:translateY(26px); transition-duration:.9s; }
/* margin-bottom is raised here specifically: a 0.065em-tall accent rule needs real
   clearance below a 60-70px display line, and the shared h1 margin (22px) was reading
   as an overlap with the lede at that size. inline-block gives the underline a real
   containing box instead of leaning on an inline element's fuzzier one. */
.hero-h1 { margin-bottom:34px; }
.ink-line { position:relative; display:inline-block; white-space:nowrap; padding-bottom:0.12em; }
.ink-line::after {
  content:""; position:absolute; left:1px; right:1px; bottom:0; height:0.065em;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease) .55s;
}
.hero-h1.is-in .ink-line::after { transform:scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ink-line::after { transition-delay:0s; } }

/* ---- ledger: the worked-example table ---- */
.ledger {
  border:1px solid var(--rule-strong); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); margin-top:8px; box-shadow:var(--shadow-md);
}
.ledger .cap {
  display:flex; justify-content:space-between; gap:12px; padding:11px 15px;
  border-bottom:1px solid var(--rule);
  /* Not uppercase: this caption is a full description on one of its two call sites
     ("Order confirmation KC-88213: PO-10432"), and forcing that run of words into
     caps read as an accident rather than a label, the same fix already made for
     .diff-head .verdict. */
  font:500 0.7812rem/1.4 var(--sans); letter-spacing:.01em; color:var(--faint); font-weight:600;
}
.ledger .scroll { overflow-x:auto; }
.ledger table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.8125rem; }
.ledger th {
  text-align:left; font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:10px 15px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.ledger td {
  padding:11px 15px; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ledger tbody tr:last-child td { border-bottom:0; }
.ledger .from { color:var(--muted); font-family:var(--sans); font-size:0.8125rem; }
.ledger .hit { color:var(--review); font-weight:500; }

.tag {
  display:inline-block; font:500 0.6875rem/1.5 var(--mono); text-transform:uppercase;
  letter-spacing:.03em; padding:2px 8px; border:1px solid currentColor;
  border-radius:var(--radius-pill); white-space:nowrap;
}
.t-ok{color:var(--ok)} .t-review{color:var(--review)} .t-exc{color:var(--exception)}
.flags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }

/* ---- stat band: true, countable product facts, counted up once on view ----
   No customer counts, no usage claims: everything here is verifiable from
   the product itself (pricing math, demo count, tolerance defaults). */
.stat-band {
  background:linear-gradient(155deg, #0c2417 0%, #0b3524 46%, #0b6b46 100%);
  color:#eef7f0; border-bottom:0;
}
.stat-band .wrap-wide { padding-top:52px; padding-bottom:52px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.stat { min-width:0; }
.stat .num {
  font-family:var(--mono); font-weight:500; font-size:clamp(1.875rem,3.6vw,2.75rem);
  line-height:1; letter-spacing:-0.01em; color:#fff;
}
.stat .lbl { margin-top:8px; font-size:0.8125rem; color:#bfe4cf; line-height:1.4; }
@media (max-width:820px) { .stat-grid { grid-template-columns:1fr 1fr; row-gap:32px; } }

/* ---- sticky numbered story: pinned visual, scroll-linked progress rail ---- */
.story { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:64px; align-items:start; }
.story-list { border-left:2px solid var(--rule); }
.story-step {
  position:relative; padding:22px 0 22px 26px; cursor:default;
  color:var(--faint); transition:color .3s var(--ease);
}
.story-step::before {
  content:""; position:absolute; left:-2px; top:22px; width:2px; height:calc(100% - 22px); background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.story-step .story-n { font-family:var(--mono); font-size:0.7812rem; display:block; margin-bottom:6px; }
.story-step h3 { font-size:1.125rem; margin:0 0 6px; color:var(--faint); transition:color .3s var(--ease); }
.story-step p { font-size:0.875rem; margin:0; max-width:42ch; color:var(--faint); transition:color .3s var(--ease); }
.story-step.is-active { color:var(--muted); }
.story-step.is-active::before { transform:scaleY(1); }
.story-step.is-active h3 { color:var(--ink); }
.story-step.is-active p { color:var(--muted); }
.story-panel {
  position:sticky; top:96px; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--sunk); border:1px solid var(--rule-strong); box-shadow:var(--shadow-lg);
}
.story-frame {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:28px; opacity:0; transition:opacity .5s var(--ease);
}
.story-frame.is-active { opacity:1; }
@media (max-width:900px) {
  .story { grid-template-columns:1fr; gap:24px; }
  /* relative, not static: .story-frame is absolutely positioned against this box,
     and losing the positioning context here sent every frame to the viewport. */
  .story-panel { position:relative; top:auto; aspect-ratio:16/10; }
}

/* ---- horizontal carousel: connections ---- */
.carousel-wrap { position:relative; margin-top:20px; }
.carousel {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:2px 2px 14px; scrollbar-width:none;
}
.carousel::-webkit-scrollbar { display:none; }
.carousel-card {
  scroll-snap-align:start; flex:0 0 auto; width:188px; padding:18px 16px;
  border:1px solid var(--rule-strong); border-radius:var(--radius-lg); background:var(--card);
  box-shadow:var(--shadow-sm); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.carousel-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.carousel-card b { display:block; font-size:0.875rem; margin-bottom:4px; }
.carousel-card span { font-size:0.7812rem; color:var(--muted); }
.carousel-nav { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.carousel-nav button {
  width:34px; height:34px; border-radius:var(--radius-pill); border:1px solid var(--rule-strong);
  background:var(--card); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.carousel-nav button:hover { border-color:var(--ink); background:var(--sunk); }
.carousel-nav button:disabled { opacity:.35; cursor:default; }

/* ---- product specimen -------------------------------------------------
   The review screen as the app actually draws it: same tokens, same type,
   same status colours. Not a screenshot: it re-renders with the theme, stays
   legible at any width, and cannot drift out of date the way a PNG would. */
.shot {
  border:1px solid var(--rule-strong); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); margin-top:24px; box-shadow:var(--shadow-md);
}
.shot-bar {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--sunk);
}
.shot-bar .dot { width:8px; height:8px; border-radius:50%; background:var(--rule-strong); flex:none; }
.shot-bar span { font:500 0.6875rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.shot-bar .file { margin-left:auto; font-family:var(--mono); text-transform:none; letter-spacing:0; font-size:0.7188rem; }
.shot-body { padding:16px 14px; }
.shot-fields {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:13px;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--rule);
}
.shot-fields div { min-width:0; }
.shot-fields label {
  display:block; font:500 0.6875rem/1 var(--sans); text-transform:uppercase;
  letter-spacing:.07em; color:var(--faint); margin-bottom:4px;
}
.shot-fields b { font:400 0.8125rem/1.3 var(--mono); overflow-wrap:anywhere; }
.shot .scroll { overflow-x:auto; }
.shot table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.7812rem; }
.shot th {
  text-align:left; font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:10px 8px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.shot td {
  padding:9px 8px; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums; white-space:nowrap; vertical-align:top;
}
.shot td.txt { font-family:var(--sans); font-size:0.8125rem; white-space:normal; }
.shot tbody tr:last-child td { border-bottom:0; }
.shot .exp { display:block; color:var(--faint); font-size:0.6875rem; margin-top:2px; }
.shot-foot {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-top:1px solid var(--rule); background:var(--sunk);
}
.shot-btn {
  font:500 0.75rem/1 var(--sans); padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
}
.shot-btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.shot-foot .note { margin-left:auto; color:var(--faint); font-size:0.7188rem; }
.shot-caption { margin-top:12px; color:var(--muted); font-size:0.8125rem; max-width:66ch; }

@media (max-width:620px) {
  .shot-bar .file { display:none; }
  .shot-foot .note { margin-left:0; flex-basis:100%; }
}

/* ---- numbered steps (used where the sequence itself is information, e.g.
   API/setup order in docs) ---- */
.steps { border-top:1px solid var(--rule); margin-top:24px; }
.steps .s {
  display:grid; grid-template-columns:38px 1fr; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--rule);
}
.steps .s .n { font-family:var(--mono); color:var(--accent); font-size:0.8125rem; padding-top:2px; }
.steps .s p { margin:0; color:var(--muted); font-size:0.875rem; max-width:60ch; }

/* ---- definition rows (limits, faq, spec tables) ---- */
.defs { list-style:none; padding:0; margin:20px 0 0; }
.defs li {
  display:grid; grid-template-columns:210px 1fr; gap:22px;
  padding:15px 0; border-bottom:1px solid var(--rule);
}
.defs li:first-child { border-top:1px solid var(--rule); }
.defs b { font-weight:600; font-size:0.875rem; }
.defs span { color:var(--muted); font-size:0.875rem; }

pre {
  background:var(--sunk); border:1px solid var(--rule); border-radius:var(--radius); border-radius:8px;
  padding:16px; overflow-x:auto; font:0.7812rem/1.55 var(--mono); margin:22px 0 0;
}
pre code { background:none; padding:0; font-size:inherit; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.two p { font-size:0.875rem; color:var(--muted); margin:0; max-width:none; }

/* ---- pricing ---- */
.price { display:flex; align-items:baseline; gap:12px; margin:4px 0 12px; flex-wrap:wrap; }
.price b { font-family:var(--mono); font-size:1.6875rem; font-weight:500; }
.price span { color:var(--faint); font-size:0.8125rem; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.plan {
  padding:24px; border:1px solid var(--rule-strong); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow-sm); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.plan:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.plan h3 { font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:0 0 12px; }
.plan .amt { font-family:var(--mono); font-size:1.625rem; font-weight:500; }
.plan .per { color:var(--faint); font-size:0.7812rem; margin-left:4px; }
.plan-meter { display:block; width:48px; height:24px; margin-top:12px; }
.plan ul { list-style:none; padding:0; margin:16px 0 0; }
.plan li { font-size:0.8438rem; color:var(--muted); padding:6px 0; border-top:1px solid var(--rule); }
.plans-5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:980px) { .plans-5 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .plans-5 { grid-template-columns:1fr; } }
.plan-enterprise { background:var(--accent-ink); border-color:var(--accent); }
.plan-enterprise h3 { color:var(--accent); }
.plan-enterprise .amt { color:var(--accent-2); }

.slider-card {
  padding:20px 24px; border:1px solid var(--rule-strong); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow-sm);
}
.slider-card input[type="range"] { width:100%; height:28px; accent-color:var(--accent); }
.slider-readout { display:flex; align-items:baseline; gap:6px; margin-top:10px; font-size:0.875rem; }
.slider-readout .mono { font-family:var(--mono); }

/* ---- docs / long-form ---- */
.doc-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:start; }
/* grid and flex items default to min-width:auto, which lets a wide <pre> or table
   push the whole track past the viewport. Every item here may shrink instead. */
.doc-layout > *, .steps .s > *, .defs li > *, .two > *, .foot-cols > *,
.hero-grid > *, .story-list, .stat-grid > *, .carousel-wrap { min-width:0; }
.prose pre, .prose .table-scroll, .prose table { max-width:100%; }
.toc { position:sticky; top:88px; }
.toc .toc-title { font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 12px; }
.toc ul { list-style:none; padding:0; margin:0; }
.toc li { margin:0 0 10px; }
.toc a { color:var(--muted); font-size:0.8438rem; text-decoration:none; display:inline-block; padding:5px 0; margin:-5px 0; }
.toc a:hover { color:var(--ink); }
.prose h2 { margin-top:40px; padding-top:24px; border-top:1px solid var(--rule); scroll-margin-top:88px; }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose h3 { margin-top:26px; font-size:0.9375rem; }
.prose p, .prose li { color:var(--muted); }
.prose strong { color:var(--ink); }
.prose ul, .prose ol { max-width:var(--measure); padding-left:20px; }
.prose li { margin:5px 0; }
.prose table { width:100%; border-collapse:collapse; margin-top:18px; font-size:0.8438rem; }
.prose th {
  text-align:left; font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:9px 10px; border-bottom:1px solid var(--rule-strong);
}
.prose td { padding:9px 10px; border-bottom:1px solid var(--rule); color:var(--muted); vertical-align:top; }
.prose td code { white-space:nowrap; }
.table-scroll { overflow-x:auto; }

/* ---- changelog ---- */
.release { display:grid; grid-template-columns:130px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--rule); }
.release:first-of-type { border-top:1px solid var(--rule); }
.release .when { font-family:var(--mono); font-size:0.8125rem; color:var(--faint); padding-top:2px; }
.release h3 { margin:0 0 8px; }
.release ul { margin:0; padding-left:18px; }
.release li { color:var(--muted); font-size:0.875rem; margin:4px 0; }

/* ---- 404 ---- */
.center-page { min-height:60vh; display:flex; align-items:center; }

/* ---- single sign-on buttons ---- */
.sso { display:flex; flex-direction:column; gap:9px; margin:0 0 22px; }
.sso button {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font:500 0.875rem/1.2 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-strong); border-radius:var(--radius-pill); padding:11px 14px; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.sso button:hover:not(:disabled) { border-color:var(--ink); box-shadow:var(--shadow-sm); }
.sso button:disabled { opacity:.6; cursor:default; }
.sso svg { flex:none; }
.or {
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  color:var(--faint); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.09em;
}
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--rule); }
.sso-wrap[hidden] { display:none !important; }

/* ---- auth pages ---- */
.auth-page { min-height:calc(100vh - 56px); display:flex; align-items:flex-start; justify-content:center; padding:64px 24px 80px; }
.auth-card { width:100%; max-width:400px; }
.auth-card h1 { font-size:1.625rem; margin-bottom:8px; }
.auth-card > p.muted { font-size:0.875rem; margin:0 0 26px; }
.field { margin:0 0 16px; }
.field label { display:block; font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:7px; }
.field input {
  width:100%; font:0.875rem/1.5 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-strong); border-radius:var(--radius); padding:10px 12px;
}
.field input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.field .hint { font-size:0.7812rem; color:var(--faint); margin-top:6px; }
.auth-card button[type="submit"] { width:100%; margin-top:4px; border-radius:var(--radius-pill); }
.auth-alt { margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); font-size:0.8438rem; color:var(--muted); }
.auth-alt a { color:var(--accent); }
.notice {
  border:1px solid currentColor; border-radius:var(--radius); padding:10px 12px;
  font-size:0.8438rem; margin:0 0 18px;
}
.notice.err { color:var(--exception); }
.notice.ok { color:var(--ok); }
.notice[hidden] { display:none !important; }

@media (max-width:820px) {
  .doc-layout { grid-template-columns:1fr; gap:28px; }
  .toc { position:static; border-bottom:1px solid var(--rule); padding-bottom:18px; }
  .toc ul { display:flex; flex-wrap:wrap; gap:14px; }
  .toc li { margin:0; }
  .plans { grid-template-columns:1fr; }
  .foot-cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .lede { font-size:1.0312rem; }
  section .wrap, section .wrap-wide { padding-top:46px; padding-bottom:46px; }
  .hero .wrap-wide { padding-top:44px; padding-bottom:40px; }
  .two { grid-template-columns:1fr; gap:20px; }
  .defs li { grid-template-columns:1fr; gap:4px; }
  .release { grid-template-columns:1fr; gap:8px; }
  .foot-cols { grid-template-columns:1fr; gap:24px; }
  .site-head nav { gap:14px; }
  .site-head nav a.hide-sm { display:none; }
}

/* ---- document diff -----------------------------------------------------
   Two columns, what was ordered against what arrived, aligned row by row so
   the eye lands on the difference without being told where to look. Status
   colour marks the cell that changed; a margin note says why it matters. */
.diff {
  border:1px solid var(--rule-strong); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); margin-top:24px; box-shadow:var(--shadow-md);
}
.diff-head {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--sunk);
}
.diff-head .po { font-family:var(--mono); font-size:0.8125rem; font-weight:500; }
.diff-head .who { color:var(--muted); font-size:0.8125rem; }
.diff-head .verdict { margin-left:auto; font:500 0.7812rem/1.3 var(--sans); font-weight:600; }
.diff-cols {
  display:grid; grid-template-columns:1fr 1fr;
  font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
}
.diff-cols span { padding:10px 16px; border-bottom:1px solid var(--rule); }
.diff-cols span:first-child { border-right:1px solid var(--rule); }

.diff-row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--rule); }
.diff-row:last-of-type { border-bottom:0; }
.diff-side { padding:11px 16px; min-width:0; border-right:1px solid var(--rule); }
.diff-side:last-child { border-right:0; }
.diff-sku { font-family:var(--mono); font-size:0.7812rem; }
.diff-desc { color:var(--muted); font-size:0.7812rem; margin-top:2px; }
.diff-qty { font-family:var(--mono); font-size:0.7812rem; font-variant-numeric:tabular-nums; margin-top:4px; }
.diff-absent { color:var(--faint); font-size:0.7812rem; font-style:italic; }

/* the one value that differs, marked where it sits rather than in a legend */
.diff-hit {
  background:color-mix(in srgb, currentColor 13%, transparent);
  border-bottom:2px solid currentColor; padding:0 3px; border-radius:2px;
  font-weight:500;
}
.diff-row.is-review .diff-hit { color:var(--review); }
.diff-row.is-exception .diff-hit { color:var(--exception); }
.diff-row.is-review .diff-side:last-child,
.diff-row.is-exception .diff-side:last-child { background:color-mix(in srgb, currentColor 4%, transparent); }
.diff-row.is-review { color:var(--review); }
.diff-row.is-exception { color:var(--exception); }
.diff-row.is-ok { color:var(--ok); }
.diff-row .diff-sku, .diff-row .diff-desc, .diff-row .diff-qty { color:var(--ink); }
.diff-row .diff-desc { color:var(--muted); }

.diff-note {
  grid-column:1 / -1; display:flex; gap:9px; align-items:flex-start;
  padding:0 16px 12px; font-size:0.7812rem;
}
.diff-note .pin { flex:none; margin-top:2px; }
.diff-note b { font-weight:500; }
.diff-note span { color:var(--muted); }
.diff-foot {
  padding:11px 16px; border-top:1px solid var(--rule); background:var(--sunk);
  color:var(--muted); font-size:0.7812rem;
}

@media (max-width:620px) {
  .diff-row, .diff-cols { grid-template-columns:1fr; }
  .diff-side { border-right:0; border-bottom:1px solid var(--rule); }
  .diff-side:last-child { border-bottom:0; }
  .diff-cols span:first-child { border-right:0; }
}

/* ── document packs: popcorn sizing (marketing) ──────────────────────────
   Mirrors .plans/.plan but scaled up and centered, since these three sit in a
   section of their own rather than beside a table of monthly plans. */
.packs-wide { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.pack-wide {
  position:relative; text-align:center; padding:28px 16px 24px; border:1px solid var(--rule-strong);
  border-radius:var(--radius-lg); background:var(--card); box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s ease;
}
.pack-wide:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pack-wide.is-best { border-color:var(--accent); border-width:2px; box-shadow:var(--shadow-md); }
.pack-wide h3 { font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:0; }
.pack-wide .pn { font-family:var(--mono); font-size:2.25rem; font-weight:500; margin-top:10px; line-height:1; }
.pack-wide .pn span { display:block; font-family:var(--sans); font-size:0.75rem; font-weight:400; color:var(--faint); margin-top:4px; }
.pack-wide .pa { font-family:var(--mono); font-size:1.4375rem; margin-top:16px; }
.pack-wide .pp { font-size:0.7812rem; color:var(--faint); margin:2px 0 0; }
.pack-wide .pack-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font:500 0.6875rem/1 var(--sans); text-transform:uppercase; letter-spacing:.07em;
  background:var(--accent); color:var(--accent-ink); padding:5px 11px; border-radius:var(--radius-pill); white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
@media (max-width:640px) { .packs-wide { grid-template-columns:1fr; } }

/* ── integration logo grid ────────────────────────────────────────────────
   Wraps to fit every logo in the viewport at once, no scroll needed: the whole
   point is a visitor can tell in one look what this connects to. Real brand
   marks, not text cards, because a logo is recognised faster than a word is read. */
.logo-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.logo-tile {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border:1px solid var(--rule-strong); border-radius:var(--radius-lg); background:var(--card);
  box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.logo-tile:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.logo-tile img { height:20px; width:auto; max-width:96px; object-fit:contain; display:block; flex:none; }
.logo-tile span { font-size:0.7812rem; color:var(--muted); white-space:nowrap; }
.logo-grid-soon { margin-top:14px; }
.logo-tile.is-soon { opacity:.55; box-shadow:none; border-style:dashed; }
.logo-tile.is-soon:hover { transform:none; box-shadow:none; }
@media (max-width:640px) {
  .logo-tile { padding:10px 12px; }
  .logo-tile img { height:17px; }
}