/* Fonts: SIL Open Font License 1.1, see /fonts/OFL-*.txt */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-ext-wght-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: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-wght-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: 400;
  font-display: swap;
  src: url("/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("/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("/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("/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("/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("/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("/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("/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("/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("/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;
}

/* Shipglot site styles. Tokens and rules: DESIGN.md at the repo root. */

:root {
  /* Colour: paper, ink and two accents */
  --paper: #F5F2EA;
  --paper-raised: #FFFDF8;
  --paper-sunk: #EDE8DC;
  --rule: #D9D3C4;
  --rule-soft: #EDE8DC;
  --ink: #17191E;
  --ink-2: #3A3E46;
  --muted: #5E626A;
  --teal: #0E5E5A;
  --teal-tint: #E3EFEC;
  --teal-ink: #0A4441;
  --vermilion: #B4411F;
  --vermilion-ink: #8E2F14;
  --vermilion-tint: #F6DCD2;
  --ochre: #8A5A0B;
  --ochre-tint: #F1E3C2;
  --ochre-ink: #6B4508;
  --faint: #9A9C9F;

  /* Dark surfaces: hero figures and feature panels */
  --d-ground: #17191E;
  --d-raised: #23262C;
  --d-rule: #2B2E35;
  --d-control: #3A3E46;
  --d-text: #E9E5DA;
  --d-text-2: #C9C5BA;
  --d-meta: #9CA0A8;
  --d-white: #FFFDF8;
  --d-teal: #7FC8B8;
  --d-teal-tint: #1F3B38;
  --d-teal-ink: #A9DDD0;
  --d-vermilion: #E26A47;
  --d-ochre: #D9A54C;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-d1: 76px;
  --fs-d2: 60px;
  --fs-d3: 48px;
  --fs-d4: 36px;
  --fs-d5: 28px;
  --fs-lead: 20px;
  --fs-card: 18px;
  --fs-body-l: 17px;
  --fs-body: 16px;
  --fs-ui: 15px;
  --fs-ui-s: 14px;
  --fs-meta: 13px;
  --fs-label: 12px;

  /* Space: 4 px grid, 8 px steps between components */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius */
  --r-chip: 4px;
  --r-seg: 6px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 999px;

  --shadow-hero: 0 24px 48px -24px rgba(23, 25, 30, 0.45);
  --ease: 150ms ease-out;
  --gutter: 80px;
}

@media (max-width: 1199px) {
  :root { --gutter: 40px; }
}
@media (max-width: 719px) {
  :root {
    --gutter: 16px;
    --fs-d1: 44px;
    --fs-d2: 36px;
    --fs-d3: 36px;
    --fs-d4: 28px;
    --fs-d5: 24px;
    --fs-lead: 17px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-wrap: break-word;
}
img, svg { vertical-align: middle; }
a { color: var(--teal); text-underline-offset: 2px; transition: color var(--ease); }
a:hover { color: var(--teal-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dark-panel :focus-visible, .terminal :focus-visible { outline-color: var(--d-text); }
::selection { background: var(--teal-tint); color: var(--teal-ink); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.3em; }
li { margin: var(--s-1) 0; }
strong { font-weight: 600; }
.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;
}
.skip {
  position: absolute; left: var(--s-4); top: -80px; z-index: 10;
  padding: var(--s-2) var(--s-4); background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-btn);
}
.skip:focus { top: var(--s-2); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-ui-s); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.faint { color: var(--faint); }
.label { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* Frame: 1440 wide, 80 px margins, 16 px on a phone */
.frame { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Display type */
.display-xl, .display-l, .display-m, .doc h2, .section-head h2, .dark-panel h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; font-optical-sizing: auto;
}
.display-xl { font-size: var(--fs-d1); line-height: 1.02; letter-spacing: -0.02em; }
.display-l { font-size: var(--fs-d2); line-height: 1.05; }
.display-m { font-size: var(--fs-d3); line-height: 1.08; }
.eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--teal); }
.crumbs a { color: var(--teal); }
.lead { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.title-code { font-family: var(--font-mono); font-weight: 500; font-size: 0.8em; letter-spacing: -0.02em; background: none; padding: 0; overflow-wrap: anywhere; }

/* Code */
code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.9em; background: var(--paper-sunk); padding: 1px 5px; border-radius: var(--r-chip); overflow-wrap: anywhere; }
pre {
  margin: var(--s-3) 0 var(--s-6); padding: var(--s-4) var(--s-6); overflow-x: auto;
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card);
  font-size: var(--fs-ui-s); line-height: 1.6; tab-size: 2;
}
pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; border-radius: 0; }
kbd { font-size: var(--fs-meta); padding: 1px 6px; border: 1px solid var(--rule); border-radius: var(--r-chip); background: var(--paper-raised); }
.chip { font-family: var(--font-mono); font-size: 0.9em; background: var(--teal-tint); color: var(--teal-ink); padding: 1px 5px; border-radius: var(--r-chip); }
/* Code block with a copy button: the button has its own column, so it never covers the code, and the pre scrolls sideways on its own. */
.code-block {
  display: flex; align-items: flex-start; min-width: 0; margin: var(--s-3) 0 var(--s-6);
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.code-block > pre { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; background: transparent; }
.js .code-block > pre { padding-right: var(--s-2); }
/* Size, fill and the Copied state come from .copy (Command block). */
.code-copy { margin: var(--s-1) var(--s-1) 0 0; }
.dark-panel .code-block { margin: 0; border: 0; background: var(--d-raised); }
.dark-panel .code-copy, .dark-panel .code-copy:hover { background: var(--d-control); color: var(--d-text); }
.dark-panel .code-copy:hover { color: var(--d-white); }
.dark-panel .code-copy.copied { background: var(--d-teal-tint); color: var(--d-teal-ink); }
pre mark.proof { padding: 0 2px; }

/* Proof mark: only where something is wrong */
mark.proof {
  background: var(--vermilion-tint); color: var(--vermilion-ink);
  padding: 1px 4px; border-radius: var(--r-chip) var(--r-chip) 0 0; border-bottom: 2px solid var(--vermilion);
  animation: proof-in 180ms ease-out;
}
mark.proof code { background: none; padding: 0; color: inherit; font-size: inherit; }
.caret { stroke: var(--vermilion); margin-left: 3px; vertical-align: -1px; flex: none; }
@keyframes proof-in { from { background-color: transparent; } }

/* Buttons */
button { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 18px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn-primary { background: var(--teal); color: var(--paper-raised); }
.btn-primary:hover { background: var(--teal-ink); color: var(--paper-raised); }
.btn-secondary { background: var(--paper-raised); border-color: var(--rule); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-2); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--teal); padding: 0 var(--s-3); }
.btn-quiet:hover { color: var(--teal-ink); text-decoration: underline; }
.btn-lg { min-height: 52px; padding: 0 22px; font-size: var(--fs-body); }
.btn-block { display: flex; width: 100%; }
.btn-primary-dark { background: var(--d-teal); color: var(--ink); font-weight: 600; }
.btn-primary-dark:hover { background: var(--d-teal-ink); color: var(--ink); }
.btn-secondary-dark { background: transparent; border-color: var(--d-control); color: var(--d-text); }
.btn-secondary-dark:hover { border-color: var(--d-text-2); color: var(--d-white); }
.dark-panel a.btn-secondary-dark { color: var(--d-text); }
.dark-panel a.btn-secondary-dark:hover { color: var(--d-white); }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--paper-raised); color: var(--ink); cursor: pointer;
}

/* Command block */
.cmd {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; max-width: 100%;
  padding: 0 var(--s-1) 0 var(--s-4); margin: var(--s-2) 0 var(--s-4);
  border: 1px solid var(--ink); border-radius: var(--r-btn); background: var(--paper-raised);
  font-family: var(--font-mono); font-size: var(--fs-ui);
}
.cmd code { background: none; padding: 0; font-size: inherit; white-space: nowrap; overflow-x: auto; }
.cmd-prompt { color: var(--muted); }
.cmd-lg { min-height: 52px; padding: 0 var(--s-2) 0 20px; gap: var(--s-4); font-size: var(--fs-body-l); margin: 0; }
.copy {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: var(--r-btn); background: var(--paper-sunk); color: var(--ink); cursor: pointer;
  transition: background-color var(--ease);
}
.js .copy { display: inline-flex; }
.copy:hover { background: var(--rule); }
.copy.copied { background: var(--teal-tint); color: var(--teal-ink); }
/* Visible confirmation after a copy: the icon becomes a check and "Copied" shows for two seconds. */
.copy .ico-done, .copy .copy-label { display: none; }
.copy.copied .ico-copy { display: none; }
.copy.copied .ico-done { display: inline; }
.copy.copied .copy-label { display: inline; font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 500; }
.js .copy.copied { width: auto; gap: 6px; padding: 0 10px; }

/* Forms */
input, select, textarea {
  font-family: var(--font-sans); font-size: var(--fs-ui); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-btn);
  min-height: 44px; padding: 0 var(--s-3); max-width: 100%;
}
textarea { padding: var(--s-2) var(--s-3); width: 100%; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--teal); }
input[type="file"].sr-only { position: absolute; }
label { font-size: var(--fs-ui); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); position: relative; }
.head-row { display: flex; align-items: center; gap: var(--s-8); padding-top: var(--s-6); padding-bottom: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--ink); }
.mark-base { stroke: var(--teal); }
.mark-caret { stroke: var(--vermilion); }
.wordmark { font-family: var(--font-mono); font-weight: 500; font-size: 20px; letter-spacing: 0; }
.nav-main { display: flex; gap: var(--s-8); margin-left: auto; font-size: var(--fs-ui); }
.nav-main a, .menu-panel a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none;
}
.nav-main a:hover, .menu-panel a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.nav-main a[aria-current="page"], .menu-panel a[aria-current="page"] {
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--ink-2); }
.menu-panel {
  position: absolute; right: var(--gutter); top: calc(100% - 4px); z-index: 5;
  display: flex; flex-direction: column; width: min(300px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-2) var(--s-4) var(--s-4); background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--r-card);
}
.menu-panel a:not(.btn) { border-bottom: 1px solid var(--rule-soft); font-size: var(--fs-body); }
/* The six links and the brand need 616 px at phone gutters (measured); the menu button takes over below 640, leaving room for fallback fonts. */
@media (max-width: 639px) {
  .nav-main { display: none; }
  .menu { display: block; }
}

/* Footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: var(--s-16); color: var(--muted); font-size: var(--fs-ui-s); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6) var(--s-12); flex-wrap: wrap; padding-top: var(--s-10); padding-bottom: var(--s-10); }
.foot-text { display: flex; flex-direction: column; gap: var(--s-2); max-width: 60ch; }
.foot-text p { margin: 0; }
.brand-sm { gap: var(--s-2); min-height: 0; align-self: flex-start; }
.brand-sm .wordmark { font-size: 16px; }
.foot-text a { color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--s-6) var(--s-12); }
.foot-title { margin: 0 0 var(--s-1); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.foot-col a:hover { color: var(--ink); }
@media (max-width: 719px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); width: 100%; }
}

/* Page title block */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-12); padding: var(--s-14) 0 var(--s-10); }
.page-head-text { display: flex; flex-direction: column; gap: var(--s-4); max-width: 880px; min-width: 0; }
.page-head-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; flex: none; }

/* Doc pages: guides, checks, compare, signup, 404 */
.doc > p, .doc > ul, .doc > ol, .doc > .note { max-width: 72ch; }
.doc > p, .doc > ul, .doc > ol { font-size: var(--fs-body-l); line-height: 1.6; }
.doc h2 {
  font-size: var(--fs-d5); line-height: 1.15;
  border-top: 1px solid var(--ink); padding-top: 20px; margin: var(--s-14) 0 var(--s-4);
}
.doc h3 { font-size: var(--fs-card); font-weight: 600; margin: var(--s-8) 0 var(--s-2); }
.note {
  margin: var(--s-4) 0 var(--s-6); padding: var(--s-3) var(--s-4);
  background: var(--paper-raised); border: 1px solid var(--rule); border-left: 3px solid var(--teal); border-radius: var(--r-btn);
  font-size: var(--fs-ui); color: var(--ink-2);
}
.ok { color: var(--teal); font-weight: 600; }

/* Legal, FAQ, changelog and docs pages */
.placeholder { padding: 0 4px; border-radius: var(--r-chip); background: var(--ochre-tint); color: var(--ochre-ink); font-weight: 600; }
.legal-meta { margin: calc(-1 * var(--s-6)) 0 var(--s-4); font-size: var(--fs-ui-s); color: var(--muted); }
.note-draft { border-left-color: var(--ochre); }
.legal { max-width: 72ch; }
.legal > p, .legal > ul { font-size: var(--fs-body); line-height: 1.6; }
.legal .table-wrap { max-width: none; }
.doc .legal h2 { font-size: var(--fs-d5); }
.toc ul { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); font-size: var(--fs-ui); }
.toc li { margin: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; }
.faq { max-width: 72ch; margin: 0; }
.faq dt { font-size: var(--fs-card); font-weight: 600; margin: var(--s-6) 0 var(--s-2); }
.faq dd { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.log-entry ul { max-width: 72ch; font-size: var(--fs-body); line-height: 1.6; }
.log-entry h2 time { font-family: var(--font-mono); font-size: var(--fs-body-l); color: var(--muted); letter-spacing: 0; margin-right: var(--s-3); }
.contact-mail { font-family: var(--font-mono); font-size: var(--fs-lead); }
.doc table th[scope="row"] { white-space: nowrap; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule-soft); }
.status { min-height: 1.5em; margin: var(--s-2) 0; color: var(--muted); font-size: var(--fs-ui-s); }
.status.err { color: var(--vermilion-ink); }

/* Cards */
.card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s-6); }
.card h3 { font-size: var(--fs-card); font-weight: 600; margin: 0 0 var(--s-3); }
.card p { font-size: var(--fs-ui); color: var(--ink-2); }
.link-cards { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
/* Card grids use the frame width, not the 72ch text column. */
.doc > .link-cards { max-width: none; }
@media (max-width: 1199px) { .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .link-cards { grid-template-columns: minmax(0, 1fr); } }
.link-cards li { margin: 0; display: flex; }
.link-card { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; text-decoration: none; color: var(--ink); transition: border-color var(--ease); }
.link-card:hover { border-color: var(--ink-2); color: var(--ink); }
.link-card-title { font-size: var(--fs-card); font-weight: 600; color: var(--teal); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--ease); }
.link-card:hover .link-card-title { text-decoration-color: currentColor; }
.link-card-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.link-card-text { font-size: var(--fs-ui); color: var(--ink-2); }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-10) 0 var(--s-4); }
.plain-list { margin: 0; padding-left: 18px; font-size: var(--fs-ui); line-height: 1.8; color: var(--ink-2); }
.plain-list li { margin: 0; }

/* Tables */
/* Scrolling boxes are positioned so absolutely placed children (the proof mark's screen-reader label) scroll with them instead of widening the page. */
pre, .scroll, .table-wrap { position: relative; }
.scroll, .table-wrap {
  overflow-x: auto; margin: var(--s-3) 0 var(--s-6);
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card);
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); }
th, td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); }
th { font-size: var(--fs-ui-s); font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { border-bottom: 1px solid var(--rule-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:last-child th { border-bottom: 0; }
th.wrap, th.n.wrap { white-space: normal; }
/* Shown where a wide table is known to overflow; the table scrolls inside its own box. */
.doc > p.scroll-hint { display: none; margin: var(--s-3) 0 0; font-size: var(--fs-ui-s); color: var(--muted); }
@media (max-width: 899px) { .doc > p.scroll-hint { display: block; } }
@media (max-width: 719px) { th, td { padding: var(--s-3) 10px; } }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td code { font-size: var(--fs-meta); overflow-wrap: normal; }
caption { text-align: left; }
table.mini td { padding: var(--s-2) 0; }
table.mini tr:last-child td { border-bottom: 0; }

/* Severity badges: a word, never colour alone */
.sev { display: inline-block; font-size: var(--fs-label); font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: var(--r-chip); white-space: nowrap; }
.sev-error { background: var(--vermilion); color: var(--paper-raised); }
.sev-warning { background: var(--ochre-tint); color: var(--ochre-ink); }
.sev-info { background: var(--paper-sunk); color: var(--ink-2); }
.tag { font-size: var(--fs-label); font-weight: 600; padding: 1px 8px; border-radius: var(--r-chip); background: var(--teal-tint); color: var(--teal-ink); }

/* Examples on guide and check pages */
.pass-fail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.example { min-width: 0; margin: var(--s-4) 0; padding: var(--s-2) var(--s-6) var(--s-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card); }
.example h3 { margin-top: var(--s-4); }
.example .code-block, .example .scroll, .example .table-wrap, .example .finding { background: var(--paper); }
.example p { max-width: 72ch; }
.file { margin: var(--s-4) 0 var(--s-1); font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }
.example .file + .code-block { margin-top: 0; }
.example .finding-list { margin-bottom: var(--s-4); }
/* Fails above Passes at every width: side by side, the findings had no room. */

/* Dark panels */
.dark-panel { background: var(--d-ground); color: var(--d-text); border-radius: var(--r-panel); }
.dark-panel h2 { color: var(--d-white); }
.doc .dark-panel h2 { border-top: 0; padding-top: 0; margin: 0; }
.dark-panel p { color: var(--d-text-2); }
.dark-panel a { color: var(--d-teal); }
.dark-panel a:hover { color: var(--d-white); }
.dark-panel a.btn-primary-dark { color: var(--ink); }
.dark-panel .eyebrow { color: var(--d-teal); }
.dark-panel pre { background: var(--d-raised); border: 0; color: var(--d-text); margin: 0; }
.dark-panel code { background: var(--d-raised); color: var(--d-white); }
.dark-panel pre code { background: none; color: inherit; }

/* Home: hero */
/* Title left, lead and actions right, then the terminal across the frame so no report line wraps. */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-12) var(--s-8); align-items: end; padding-top: var(--s-20); padding-bottom: 88px; }
.hero-head { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.hero-head > * { margin: 0; }
.hero-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.hero-text .lead { max-width: 540px; }
.hero-text > p { margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.terminal-fig { grid-column: 1 / -1; margin: 0; min-width: 0; }
.terminal { background: var(--d-ground); color: var(--d-text); border-radius: var(--r-panel); box-shadow: 0 1px 0 var(--rule), var(--shadow-hero); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: var(--s-2); padding: 14px 18px; border-bottom: 1px solid var(--d-rule); }
.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--d-control); }
.terminal-bar code { margin-left: 10px; background: none; padding: 0; color: var(--d-meta); font-size: var(--fs-meta); }
/* Report lines never wrap: where the frame is too narrow, the output scrolls sideways inside the figure. */
.terminal-scroll { overflow-x: auto; }
.terminal-scroll:focus-visible { outline-offset: -4px; }
.terminal-out { width: max-content; min-width: 100%; margin: 0; padding: 22px var(--s-6) 26px; border: 0; border-radius: 0; background: none; color: var(--d-text); font-size: var(--fs-ui-s); line-height: 1.7; white-space: pre; overflow: visible; }
.terminal-out .ln { display: block; }
.t-file { color: var(--d-white); font-weight: 500; }
.t-error { color: var(--d-vermilion); }
.t-warning { color: var(--d-ochre); }
.t-meta { color: var(--d-meta); }
.t-summary { color: var(--d-teal); }
.terminal-fig figcaption { margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--muted); }
.terminal-fig figcaption code { font-size: 0.95em; }

/* Home: sections opened by an ink rule */
.section { padding-bottom: var(--s-24); }
/* The footer's own top margin is the space after the last section. */
.section-last { padding-bottom: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-8); flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 20px; margin-bottom: var(--s-8); }
.section-head h2 { font-size: var(--fs-d4); line-height: 1.1; }
.section-head > a, .section-links a { font-size: var(--fs-ui); display: inline-flex; align-items: center; min-height: 44px; }
.section-links { display: flex; gap: var(--s-6); }
.format-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.format-grid li { margin: 0; display: flex; }
.format-card {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: var(--s-4) 18px;
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none; transition: border-color var(--ease);
}
.format-card:hover { border-color: var(--ink-2); color: var(--ink); }
.format-name { font-weight: 500; }
.format-ext { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); }
.format-card-alt { border-style: dashed; background: transparent; }
.format-card-alt .format-name { color: var(--teal); }
.catch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.catch-card { display: flex; flex-direction: column; gap: 14px; }
.catch-card h3, .catch-card p { margin: 0; }
.catch-card p { line-height: 1.5; }
.ex { font-family: var(--font-mono); font-size: var(--fs-ui-s); line-height: 1.8; }
.ex-src { color: var(--muted); }
.ex-loc { display: inline-block; width: 4ch; color: var(--muted); }
.catch-checks { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta); }
.hosted { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-14); align-items: center; padding: var(--s-14); }
.hosted-text { display: flex; flex-direction: column; gap: 20px; }
.hosted-text > p { margin: 0; }
.hosted h2 { font-size: var(--fs-d3); line-height: 1.1; }
.hosted-text > p:not(.eyebrow):not(.dark-cmd) { font-size: var(--fs-body-l); line-height: 1.6; }
.dark-cmd code { background: none; padding: 0; font-size: var(--fs-ui); color: var(--d-white); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.steps li { display: flex; gap: var(--s-4); align-items: center; margin: 0; padding: var(--s-4) 20px; border: 1px solid var(--d-rule); border-radius: var(--r-card); }
.step-n { font-family: var(--font-mono); color: var(--d-teal); }
.band-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.band-strip li { margin: 0; padding: 22px 20px; background: var(--paper-raised); display: flex; flex-direction: column; gap: 6px; }
.band-keys { font-size: var(--fs-ui-s); color: var(--muted); }
.band-price { font-family: var(--font-display); font-size: var(--fs-d4); line-height: 1.1; }
.band-per { display: block; margin-top: var(--s-1); font-family: var(--font-sans); font-size: var(--fs-ui-s); line-height: 1.4; color: var(--muted); }
.band-note { margin-top: var(--s-4); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8); margin: var(--s-6) 0 var(--s-8); align-items: start; }
/* The calculator comes first in the page (and first on narrow screens); on wide screens it sits right of the table. */
.price-table { grid-column: 1 / span 7; grid-row: 1; margin: 0; border-radius: var(--r-panel); }
.price-table table { font-size: var(--fs-body); }
.price-table caption { padding: 20px var(--s-6) var(--s-2); font-weight: 600; font-size: var(--fs-body-l); }
.price-table th { padding: var(--s-3) var(--s-6); }
.price-table td { padding: var(--s-4) var(--s-6); }
.price-table td.n:last-child { color: var(--muted); }
.price-table td:first-child { white-space: nowrap; }
.price-table td.n-wrap { white-space: normal; }
.price-table td.n-metered { white-space: nowrap; }
.price-table .nw { white-space: nowrap; }
.caption-note { display: none; }
.price-table tr.current td { background: var(--teal-tint); }
.price-table tr.current td:first-child, .price-table tr.current td:nth-child(2) { font-weight: 600; }
.price-table tr.current td.n:last-child { color: var(--ink); }
.band-tag { font-size: var(--fs-meta); font-weight: 500; color: var(--teal); margin-left: var(--s-2); white-space: nowrap; }
.calc { grid-column: 8 / span 5; grid-row: 1; padding: var(--s-8); display: flex; flex-direction: column; gap: 22px; }
.calc h2 { font-size: var(--fs-d5); line-height: 1.15; }
.calc form { display: flex; flex-direction: column; gap: 22px; }
.calc-keys { display: flex; flex-direction: column; gap: 10px; }
.calc-keys label { color: var(--d-text-2); }
.calc input[type="number"] { min-height: 52px; padding: 0 var(--s-4); background: var(--d-raised); color: var(--d-white); border-color: var(--d-control); font-family: var(--font-mono); font-size: var(--fs-lead); }
.calc input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--d-teal); }
.calc-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: -6px 0 0; padding: 0 8px; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--d-meta); text-align: right; }
/* Each band label is centred under the slider position of that band's upper edge; the last one stays inside the panel. */
.calc-scale span { display: block; transform: translateX(50%); }
.calc-scale span:last-child { transform: translateX(8px); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.seg label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-btn); cursor: pointer; transition: background-color var(--ease), border-color var(--ease); }
.seg-dark label { border: 1px solid var(--d-control); color: var(--d-text); }
.seg-dark label:has(input:checked) { border-color: var(--d-teal); background: var(--d-teal-tint); }
.seg-dark input { accent-color: var(--d-teal); }
.calc-out { margin: 0; border-top: 1px solid var(--d-rule); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.calc-band { color: var(--d-text-2); }
.calc-price { font-family: var(--font-display); font-size: var(--fs-d3); line-height: 1; color: var(--d-white); }
.calc-per { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--d-text-2); }
.calc-sub { flex-basis: 100%; text-align: right; font-size: var(--fs-ui-s); color: var(--d-text-2); }
.calc-words { flex-basis: 100%; font-size: var(--fs-ui-s); line-height: 1.55; color: var(--d-text-2); }
.calc-quote { flex-basis: 100%; font-size: var(--fs-body-l); line-height: 1.5; color: var(--d-text); }
.dark-panel .calc-note { margin: 0; font-size: var(--fs-ui-s); line-height: 1.55; }
.readme-badge { display: inline-flex; margin-top: var(--s-2); border-radius: var(--r-chip); overflow: hidden; font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.5; }
.readme-badge span { padding: 3px 8px; color: var(--paper-raised); }
.readme-badge span:first-child { background: var(--ink-2); }
.readme-badge span:last-child { background: var(--teal); }

/* Tool pages */
.tool-page .page-head { padding-top: var(--s-14); padding-bottom: var(--s-8); }
.drop {
  display: flex; gap: var(--s-4); align-items: flex-start; padding: 20px var(--s-6);
  background: var(--paper-raised); border: 1px dashed var(--ink-2); border-radius: var(--r-card);
  transition: border-color var(--ease), background-color var(--ease);
}
.drop > svg { color: var(--teal); flex: none; margin-top: 2px; }
.drop.over { border-color: var(--teal); background: var(--teal-tint); }
.drop-text { min-width: 0; flex: 1; }
.drop-text p { margin: 0 0 var(--s-2); max-width: 80ch; }
.drop-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: flex-start; margin-top: var(--s-3); }
.inline-field { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui-s); color: var(--muted); }
.inline-field input, .inline-field select { color: var(--ink); }
.paste summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); cursor: pointer; }
.paste-body { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); width: min(640px, 100%); }
.paste[open] { flex-basis: 100%; }
.stack-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-ui-s); color: var(--muted); }
.stack-field textarea { font-family: var(--font-mono); font-size: var(--fs-ui-s); }
.file-list { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.file-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card); }
.file-icon { color: var(--teal); }
.file-name { background: none; padding: 0; font-size: var(--fs-ui); }
.file-actions { display: flex; gap: var(--s-2); margin-left: auto; }
.pills { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill { margin: 0; padding: 6px var(--s-3); border-radius: var(--r-pill); background: var(--paper-sunk); font-size: var(--fs-ui-s); }
.pill strong { font-weight: 600; }
.pill .sev { margin-left: var(--s-1); }
.tool-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: start; margin-bottom: var(--s-10); }
.tool-findings { grid-column: span 5; min-width: 0; }
.tool-editor { grid-column: span 7; min-width: 0; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.tool-findings h2, .tool-editor h2 { font-size: var(--fs-card); font-weight: 600; margin: 0 0 var(--s-3); }
.tool-findings h2 .muted { font-weight: 400; margin-left: var(--s-2); }
.finding-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.finding { margin: 0; padding: var(--s-4) 18px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-card); }
.finding-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) 10px; align-items: center; font-size: var(--fs-meta); }
.finding-key { margin-top: var(--s-2); }
.finding-key code { background: none; padding: 0; font-size: var(--fs-ui-s); }
.finding-msg { margin-top: var(--s-1); font-size: var(--fs-ui-s); color: var(--ink-2); }
.finding-where { margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); overflow-wrap: anywhere; }
.finding-actions { margin-top: var(--s-3); }
.tool-editor-head { padding: var(--s-4) 20px 0; }
.tool-editor-head p { margin: 0 0 var(--s-3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.toolbar select, .toolbar input:not([type="checkbox"]) { background: var(--paper); min-height: 40px; }
.toolbar .grow { flex: 1 1 180px; display: flex; }
.toolbar .grow input { width: 100%; }
.check-field { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-ui-s); color: var(--ink-2); }
.table-flat { margin: 0; border: 0; border-radius: 0; }
table.editor th { font-size: var(--fs-meta); padding: 10px 20px; }
table.editor td { padding: var(--s-3) 20px; border-bottom: 0; border-top: 1px solid var(--rule-soft); }
table.editor td.key { width: 30%; min-width: 140px; }
table.editor td.key code { background: none; padding: 0; font-size: var(--fs-meta); }
table.editor td { min-width: 180px; }
table.editor textarea { field-sizing: content; min-height: 40px; resize: vertical; font-size: var(--fs-ui); padding: var(--s-2) 10px; }
table.editor td.missing { color: var(--muted); }
.cell-flag { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-label); }
.cell-flag .caret { margin-left: 0; }
.cell-flag-error { color: var(--vermilion-ink); }
.cell-flag-warning { color: var(--ochre-ink); }
.editor .form { display: flex; gap: var(--s-2); align-items: flex-start; margin: 2px 0; }
.editor .form > span { font-size: var(--fs-label); color: var(--muted); min-width: 3.5em; padding-top: 10px; }
.editor .form > div { padding-top: 0; }
.pad { padding: var(--s-4) 20px; margin: 0; }
.ci-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); align-items: center; padding: var(--s-8) 36px; margin: var(--s-10) 0 var(--s-4); }
.ci-panel h2 { font-size: var(--fs-d5); line-height: 1.15; margin-bottom: 10px; }
.ci-panel p { margin: 0; }
.ci-panel pre { line-height: 1.7; padding: 20px; }

/* Medium widths */
@media (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-top: var(--s-16); padding-bottom: var(--s-16); }
  .hero-head, .hero-text, .terminal-fig { grid-column: auto; }
  .terminal-fig { margin-top: var(--s-6); }
  .terminal-out { font-size: var(--fs-meta); }
  .format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hosted { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding: var(--s-10); }
  .band-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .band-strip li:last-child { grid-column: span 2; }
  .pricing-grid, .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .price-table, .calc, .tool-findings, .tool-editor { grid-column: auto; }
  .price-table, .calc { grid-row: auto; }
  .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ci-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 899px) {
  .head-row { padding-top: 14px; padding-bottom: 14px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
}

/* Phone: 16 px gutters, one column */
@media (max-width: 719px) {
  body { font-size: var(--fs-body); }
  .brand .mark { width: 22px; height: 22px; }
  .hide-phone { display: none; }
  .brand { gap: var(--s-2); }
  .wordmark { font-size: 18px; }
  .hero { padding-top: 36px; padding-bottom: 36px; gap: 18px; }
  .hero-head, .hero-text { gap: 18px; }
  .terminal-fig { margin-top: 14px; }
  .display-xl { letter-spacing: -0.015em; line-height: 1.05; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .cmd-lg { justify-content: space-between; font-size: var(--fs-ui); padding: 0 6px 0 var(--s-4); }
  .hero-actions .btn-lg { width: 100%; }
  .terminal { border-radius: var(--r-card); }
  .terminal-out { font-size: var(--fs-label); padding: 18px var(--s-4); }
  .section { padding-bottom: var(--s-8); }
  .section-head { padding-top: var(--s-4); margin-bottom: var(--s-4); }
  .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catch-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card { padding: var(--s-4); }
  .hosted { padding: var(--s-6) 20px; border-radius: var(--r-card); }
  .hosted h2 { font-size: var(--fs-d4); }
  .steps li { padding: var(--s-3) var(--s-4); align-items: flex-start; }
  .band-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-strip li { padding: var(--s-4); }
  .band-price { font-size: var(--fs-d5); }
  .page-head { padding: var(--s-8) 0 var(--s-6); }
  .tool-page .page-head { padding-top: var(--s-8); padding-bottom: var(--s-6); }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1 1 auto; }
  .doc > p, .doc > ul, .doc > ol { font-size: var(--fs-body); }
  .doc h2 { margin-top: var(--s-10); padding-top: var(--s-4); }
  .example { padding: var(--s-1) var(--s-4) var(--s-3); }
  pre { padding: var(--s-3) var(--s-4); font-size: var(--fs-meta); }
  .calc { padding: var(--s-6) 20px; border-radius: var(--r-card); }
  .price-table caption, .price-table th, .price-table td { padding-left: var(--s-4); padding-right: var(--s-4); }
  /* Phone: keys and monthly price only; annual prices come from the calculator's Annual switch. */
  .price-table th:nth-child(n+3), .price-table td:nth-child(n+3) { display: none; }
  .price-table td.n-metered { white-space: normal; }
  .price-table .band-tag { display: block; margin-left: 0; }
  .caption-note { display: block; margin-top: var(--s-1); font-size: var(--fs-ui-s); font-weight: 400; color: var(--muted); }
  .drop { padding: var(--s-4); flex-direction: column; gap: var(--s-2); }
  .file-actions { margin-left: 0; }
  .ci-panel { padding: var(--s-6) 20px; border-radius: var(--r-card); }
  table.editor, table.editor tbody, table.editor tr, table.editor td { display: block; width: auto; min-width: 0; }
  table.editor thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.editor tr { padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
  table.editor td { border-top: 0; padding: var(--s-1) var(--s-4); }
  table.editor td.key { width: auto; }
  table.editor td::before { content: attr(data-label); display: block; font-size: var(--fs-label); color: var(--muted); margin-bottom: 2px; }
  .foot-row { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .site-foot { margin-top: var(--s-10); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: opacity !important; scroll-behavior: auto !important; }
}
td a code, .foot-text code { white-space: nowrap; }