/* Self-hosted fonts, Google Fonts' latin and latin-ext subsets. Licences beside the files; see DEPENDENCIES.md. */

/* JetBrains Mono's file goes to 800, but it is declared to 600 on purpose: the approved mockups loaded weights up to 600,
   so their 650 and 700 headings rendered at 600. This keeps the headings as approved. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin.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: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The two box-drawing characters of the footer's terminal dialog: not in the latin subsets. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-box.woff2) format("woff2"); unicode-range: U+251C, U+2524; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/schibsted-grotesk-latin.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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* PagePeeker: generated from tokens.json */
:root, [data-theme="light"] {
  --brand-magenta: #e4097f; --brand-grey: #5b5b5b;
  --bg: #fbfafb; --surface: #ffffff; --surface-sunken: #f4f2f4; --line: #e5e1e5; --line-strong: #8f888f;
  --ink: #1d191d; --ink-2: #5b565b; --ink-3: #6f696f;
  --accent: #e4097f; --accent-hover: #c40069; --on-accent: #ffffff; --accent-text: #b8005f; --accent-wash: #fdeaf4; --focus: #b8005f;
  --code-bg: #1d191d; --code-line: #3e373e; --code-fg: #f0ecf0; --code-muted: #aaa2aa; --code-key: #ff8cc6; --code-string: #8fd8c6; --code-number: #f2c879;
  --status-ready: #0a6b52; --status-ready-wash: #e4f4ef; --status-queued: #1f5fb8; --status-queued-wash: #e8f0fb;
  --status-stale: #8a5300; --status-stale-wash: #faf0dd; --status-error: #b93400; --status-error-wash: #fcebe2;
  --shadow-pop: 0 8px 24px rgba(29, 25, 29, 0.14);
}
[data-theme="dark"] {
  --brand-magenta: #e4097f; --brand-grey: #c9c5c9;
  --bg: #141114; --surface: #1c181c; --surface-sunken: #0f0d0f; --line: #332d33; --line-strong: #7d757d;
  --ink: #f4f0f4; --ink-2: #b8b0b8; --ink-3: #9c949c;
  --accent: #e4097f; --accent-hover: #c40069; --on-accent: #ffffff; --accent-text: #ff6eb4; --accent-wash: #3a1228; --focus: #ff6eb4;
  --code-bg: #0f0d0f; --code-line: #332d33; --code-fg: #f0ecf0; --code-muted: #aaa2aa; --code-key: #ff8cc6; --code-string: #8fd8c6; --code-number: #f2c879;
  --status-ready: #4fd1ac; --status-ready-wash: #0f2a23; --status-queued: #7db4ff; --status-queued-wash: #12233d;
  --status-stale: #efb45c; --status-stale-wash: #2f2210; --status-error: #ff8a5c; --status-error-wash: #33170c;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px;
  --chamfer-sm: 10px; --chamfer-lg: 26px;
  --width-page: 1200px; --width-prose: 700px; --width-docs-nav: 248px;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* PagePeeker components. Plain CSS classes, framework neutral. Every value comes from a token. */

html, body { background: var(--bg); color: var(--ink); }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--accent-text); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Theme-paired images */
.pp-on-dark { display: none; }
[data-theme="dark"] .pp-on-light { display: none; }
[data-theme="dark"] .pp-on-dark { display: inline-block; }

/* Label: the uppercase mono name above a value */
.pp-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* Logo */
.pp-logo { display: block; height: 32px; width: auto; }
.pp-logo--mark { height: 28px; }

/* Button */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; background: none; color: var(--ink); }
.pp-btn--primary { background: var(--accent); color: var(--on-accent); }
.pp-btn--primary:hover { background: var(--accent-hover); }
.pp-btn--secondary { background: var(--surface); border-color: var(--line-strong); }
.pp-btn--secondary:hover { background: var(--surface-sunken); }
.pp-btn--ghost:hover { background: var(--surface-sunken); }
.pp-btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: 14px; }
.pp-btn[disabled] { background: var(--surface-sunken); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }

/* Field and input */
.pp-field { display: grid; gap: 6px; }
.pp-field__name { font-size: 14px; line-height: 20px; font-weight: 600; }
.pp-field__help { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pp-field__error { display: flex; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--status-error); }
.pp-field__error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--status-error); color: var(--surface); font: 700 13px/18px var(--font-sans); text-align: center; }
.pp-input { width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 15px/20px var(--font-sans); }
.pp-input--mono { font: 400 13.5px/20px var(--font-mono); }
.pp-input[aria-invalid="true"] { border-color: var(--status-error); box-shadow: 0 0 0 1px var(--status-error); background: var(--status-error-wash); }
.pp-input::placeholder { color: var(--ink-3); }

/* URL bar: the address field and its action as one control */
.pp-urlbar { display: flex; align-items: stretch; min-height: 48px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.pp-urlbar:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-urlbar__scheme { display: flex; align-items: center; padding-left: var(--space-3); font: 400 13.5px/20px var(--font-mono); color: var(--ink-3); }
.pp-urlbar__input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 var(--space-2) 0 1px; background: none; color: var(--ink); font: 400 13.5px/20px var(--font-mono); }
.pp-urlbar .pp-btn { margin: 3px; min-height: 40px; }

/* Tabs */
.pp-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.pp-tab { padding: var(--space-2) var(--space-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-2); font: 500 14px/22px var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.pp-tab:hover { color: var(--ink); }
.pp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Status: a capture's state, always shape plus word */
.pp-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: var(--radius-sm); font: 500 12px/18px var(--font-mono); white-space: nowrap; }
.pp-status::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor; }
.pp-status--ready { color: var(--status-ready); background: var(--status-ready-wash); }
.pp-status--ready::before { border-radius: 50%; }
.pp-status--queued { color: var(--status-queued); background: var(--status-queued-wash); }
.pp-status--queued::before { background: none; border: 2px solid currentColor; border-radius: 50%; }
.pp-status--stale { color: var(--status-stale); background: var(--status-stale-wash); }
.pp-status--stale::before { clip-path: polygon(0 0, 100% 0, 100% 100%); background: currentColor; }
.pp-status--error { color: var(--status-error); background: var(--status-error-wash); }
.pp-status--error::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Tag: a neutral fact about a row */
.pp-tag { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-2); font: 500 11px/18px var(--font-mono); white-space: nowrap; }
.pp-tag--plan { background: var(--accent-wash); border-color: transparent; color: var(--accent-text); }

/* Inline code */
.pp-code-inline, code.pp-code-inline { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); font: 400 .86em/1 var(--font-mono); color: var(--ink); white-space: nowrap; }

/* Code panel: dark in both themes */
.pp-code { border-radius: var(--radius-lg); background: var(--code-bg); color: var(--code-fg); overflow: hidden; }
[data-theme="dark"] .pp-code { box-shadow: inset 0 0 0 1px var(--code-line); }
.pp-code__bar { display: flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--code-line); }
.pp-code__tab { padding: 3px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--code-muted); font: 500 12px/18px var(--font-mono); cursor: pointer; }
.pp-code__tab:hover { color: var(--code-fg); }
.pp-code__tab[aria-selected="true"] { color: var(--code-fg); background: var(--code-line); }
.pp-code__file { color: var(--code-muted); font: 500 12px/18px var(--font-mono); }
.pp-code__copy { margin-left: auto; padding: 3px 8px; border: 1px solid var(--code-line); border-radius: var(--radius-sm); background: none; color: var(--code-fg); font: 500 12px/18px var(--font-mono); cursor: pointer; }
.pp-code__copy:hover { background: var(--code-line); }
.pp-code :focus-visible { outline-color: var(--code-key); }
.pp-code pre { margin: 0; padding: var(--space-4); overflow-x: auto; font: 400 13.5px/22px var(--font-mono); tab-size: 2; }
.pp-code .c { color: var(--code-muted); }
.pp-code .k { color: var(--code-key); }
.pp-code .s { color: var(--code-string); }
.pp-code .n { color: var(--code-number); }

/* Endpoint: method and path with its parameters */
.pp-endpoint { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); font: 400 13.5px/22px var(--font-mono); overflow-x: auto; }
.pp-endpoint__method { flex: none; font-weight: 600; color: var(--status-ready); }
.pp-endpoint__path { white-space: nowrap; color: var(--ink); }
.pp-endpoint__path i { font-style: normal; color: var(--accent-text); }
.pp-endpoint__path span { color: var(--ink-3); }

/* Table */
.pp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.pp-table th { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); text-align: left; font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pp-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-table td.pp-num, .pp-table th.pp-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pp-table td strong { color: var(--ink); font-weight: 600; }
.pp-table tr[aria-selected="true"] td { background: var(--accent-wash); }

/* Parameter table: a Table whose first column is a parameter */
.pp-param { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pp-param__name { font: 500 13.5px/22px var(--font-mono); color: var(--ink); }
.pp-params td:first-child { width: 190px; }
.pp-params td p { margin: 0 0 var(--space-2); }
.pp-params td p:last-child { margin: 0; }

/* Callout: filled ground and a mono label, never a side stripe */
.pp-callout { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 14px; line-height: 22px; color: var(--ink); }
.pp-callout__label { display: block; margin-bottom: 2px; font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.pp-callout--note { background: var(--status-queued-wash); }
.pp-callout--note .pp-callout__label { color: var(--status-queued); }
.pp-callout--warn { background: var(--status-stale-wash); }
.pp-callout--warn .pp-callout__label { color: var(--status-stale); }
.pp-callout--error { border: 1px solid var(--status-error); background: var(--status-error-wash); font-weight: 600; }
.pp-callout--error .pp-callout__label { color: var(--status-error); }

/* Capture: the system's signature. Front page, back page, 45 degree cut, all taken from the logo. */
.pp-capture { margin: 0; padding: 9px 0 0 9px; --pp-cut: var(--chamfer-lg); --pp-frame: var(--line-strong); }
.pp-capture--sm { --pp-cut: var(--chamfer-sm); padding: 5px 0 0 5px; }
.pp-capture--current { --pp-frame: var(--brand-magenta); }
.pp-capture__stack { position: relative; isolation: isolate; }
.pp-capture__stack::before, .pp-capture__stack::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%); }
.pp-capture__stack::before { inset: -9px 9px 9px -9px; background: var(--brand-grey); z-index: -2; }
.pp-capture__stack::after { inset: -3px -3px -3px -3px; background: var(--bg); z-index: -1; }
.pp-capture--sm .pp-capture__stack::before { inset: -5px 5px 5px -5px; }
.pp-capture--sm .pp-capture__stack::after { inset: -2px; }
.pp-capture__page { padding: 2px; background: var(--pp-frame); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%); }
.pp-capture--sm .pp-capture__page { padding: 1px; }
.pp-capture__image { display: block; width: 100%; height: auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut) + 1px), calc(100% - var(--pp-cut) + 1px) 100%, 0 100%); background: var(--surface); }
.pp-capture .pp-readout { margin-top: var(--space-3); }

/* Readout: measurements, in the units the API speaks */
.pp-readout { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.pp-readout > div { min-width: 0; }
.pp-readout dt { font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pp-readout dd { margin: 0; font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* Size scale: the API's five sizes, drawn at true size */
.pp-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.pp-size { display: grid; gap: var(--space-2); }
.pp-size__box { display: flex; align-items: center; justify-content: center; max-width: 100%; border: 1px solid var(--line-strong); background: var(--surface); font: 600 15px/1 var(--font-mono); color: var(--ink); }
.pp-size__name { font: 500 12px/18px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-sizes-nested { position: relative; width: 480px; height: 360px; flex: none; }
.pp-sizes-nested > div { position: absolute; left: 0; bottom: 0; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); font: 600 13px/1 var(--font-mono); color: var(--ink); padding: 7px 8px; text-align: right; }
.pp-sizes-nested > div:last-child { border-color: var(--brand-magenta); }

/* Site header */
.pp-header { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; padding-inline: var(--space-4); background: var(--bg); border-bottom: 1px solid var(--line); }
.pp-header__nav { display: flex; align-items: center; gap: var(--space-1); }
.pp-header__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.pp-navlink { padding: 6px 10px; border-radius: var(--radius-md); font: 500 14px/20px var(--font-sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.pp-navlink:hover { background: var(--surface-sunken); color: var(--ink); }
.pp-navlink[aria-current="page"] { color: var(--accent-text); }

/* Version switch */
.pp-version { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pp-version__item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2); font: 500 12px/18px var(--font-mono); cursor: pointer; text-decoration: none; white-space: nowrap; }
.pp-version__item:hover { color: var(--ink); }
.pp-version__item[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* Docs navigation */
.pp-docsnav { display: grid; gap: var(--space-6); width: 100%; max-width: var(--width-docs-nav); align-content: start; font-size: 14px; line-height: 20px; }
.pp-docsnav__group { display: grid; gap: 2px; }
.pp-docsnav__title { margin: 0 0 var(--space-1); padding-inline: 10px; font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pp-docsnav a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 5px 10px; border-radius: var(--radius-md); color: var(--ink-2); text-decoration: none; }
.pp-docsnav a:hover { background: var(--surface-sunken); color: var(--ink); }
.pp-docsnav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); font-weight: 600; }

/* Plan table */
.pp-plans { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.pp-plans th, .pp-plans td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); font-weight: 400; }
.pp-plans thead th { padding-block: var(--space-4); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.pp-plans tbody th { color: var(--ink); font-weight: 500; }
.pp-plans .pp-plans__name { display: block; font: 600 20px/28px var(--font-sans); color: var(--ink); letter-spacing: -.008em; }
.pp-plans .pp-plans__price { display: block; margin-block: var(--space-1) var(--space-3); font: 500 13px/20px var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-plans .pp-plans__price b { font: 700 28px/34px var(--font-sans); color: var(--ink); letter-spacing: -.016em; }
.pp-plans .pp-plans__pick { background: var(--accent-wash); }
.pp-plans td.pp-plans__pick { color: var(--ink); }
.pp-plans td.pp-mono { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.pp-plans tfoot td { border-bottom: 0; }
.pp-yes { color: var(--ink); font-weight: 600; }
.pp-no { color: var(--ink-3); }

/* Meter: quota used, for the customer panel */
.pp-meter { display: grid; gap: 6px; }
.pp-meter__row { display: flex; justify-content: space-between; gap: var(--space-3); font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pp-meter__row span:last-child { color: var(--ink-3); }
.pp-meter__track { height: 6px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); border-radius: 1px; overflow: hidden; }
.pp-meter__fill { display: block; height: 100%; background: var(--ink); }
.pp-meter--over .pp-meter__fill { background: var(--status-error); }

/* Page layouts, from the mockups' site.css. Components and tokens come from the design system. */
.pg { min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg a { color: var(--accent-text); text-underline-offset: 2px; }
.pg a.pp-btn { text-decoration: none; }
.pg a.pp-btn--primary { color: var(--on-accent); }
.pg a.pp-btn--secondary, .pg a.pp-btn--ghost { color: var(--ink); }
.pg a.pp-navlink { color: var(--ink-2); }
.pg a.pp-navlink[aria-current="page"] { color: var(--accent-text); }
.pg a.pp-version__item { color: var(--ink-2); }
.pg a.pp-version__item[aria-current="true"] { color: var(--ink); }
.pg a.pp-tab { color: var(--ink-2); }
.pg .pp-docsnav a { color: var(--ink-2); }
.pg .pp-docsnav a[aria-current="page"] { color: var(--accent-text); }
.wrap { width: 100%; max-width: calc(var(--width-page) + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }

/* Headings are mono, per the design system's Headings group */
.t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-mono); }
.t-display { margin: 0; font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.t-h1 { margin: 0; font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.t-h2 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -.02em; text-wrap: balance; }
.t-h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.pg .pp-plans .pp-plans__name { font-family: var(--font-mono); letter-spacing: -.01em; }
.t-lead { margin: 0; font-size: 19px; line-height: 30px; color: var(--ink-2); max-width: 60ch; }
.t-body { margin: 0; color: var(--ink-2); max-width: 68ch; }
.t-small { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.t-data { font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; }

/* Header */
.pg .pp-header { position: relative; padding-inline: 0; border: 0; background: none; }
/* Sticky header: transparent with the full logo at the top, solid with the mark once the page scrolls past 50px */
.site-head { position: sticky; top: 0; z-index: 20; background: transparent; border-bottom: 1px solid transparent; transition: background-color 160ms, border-color 160ms, padding 160ms; }
.site-head.is-scrolled { background: var(--surface); border-bottom-color: var(--line); padding-block: var(--space-2); }
.site-head.is-scrolled .head-full { display: none; }
.site-head.is-scrolled .head-mark { display: block; }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } }
.head-mark { display: none; }
.pp-logo { height: 30px; }
/* Theme-paired images: .pp-logo sets display:block after the system's pairing rule, so restate it here with more weight */
.pg .pp-on-dark { display: none; }
[data-theme="dark"] .pp-on-light { display: none; }
[data-theme="dark"] .pp-on-dark { display: inline-block; }
[data-theme="dark"] .pp-logo.pp-on-dark { display: block; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-16) var(--space-8); align-items: stretch; }
.hero__text { display: grid; gap: var(--space-6); align-content: center; min-width: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero__code { display: flex; flex-direction: column; min-width: 0; }
.hero__code .pp-code { flex: 1; display: flex; flex-direction: column; }
.hero__code pre { min-height: 272px; padding: var(--space-6) var(--space-6) var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.hero__resp { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--code-line); font: 500 12px/18px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--code-muted); }
.hero__resp-label { font-size: 11px; line-height: 16px; letter-spacing: .07em; text-transform: uppercase; }
.hero__resp .pp-status { color: var(--code-string); background: rgba(143, 216, 198, .12); }

.demo-band { padding-top: var(--space-16); }
.demo { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: var(--space-16); align-items: stretch; }
.demo__text { display: grid; gap: var(--space-4); align-content: center; min-width: 0; }
.try { display: grid; gap: var(--space-3); padding-top: var(--space-4); }
.try__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.demo__facts { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.demo__stage { order: -1; display: flex; flex-direction: column; align-items: flex-start; min-height: 412px; min-width: 0; }
.demo__status { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); min-height: 22px; }
/* While a capture is on its way the old image fades and a spinner sits on it, as the old demo's loader did */
.demo__spinner { display: none; }
.demo__capture.is-busy .pp-capture__image { opacity: 0.3; transition: opacity 0.2s; }
.demo__capture.is-busy .demo__spinner { display: block; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--line); border-top-color: var(--brand-magenta); border-radius: 50%; animation: demo-spin 0.8s linear infinite; }
.demo__capture.pp-capture--sm.is-busy .demo__spinner { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-width: 2px; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo__capture.is-busy .demo__spinner { animation-duration: 2.4s; } }
.shot-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; aspect-ratio: 4 / 3; background: var(--surface-sunken); color: var(--ink-3); font: 500 12px/18px var(--font-mono); }
.shot-placeholder img { height: 22%; max-height: 48px; width: auto; }

.band { padding-block: var(--space-24) 0; }
.band__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 680px; }
.band__head--wide, .band__head--wide .t-body { max-width: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.step { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); min-width: 0; }
.step__num { font: 500 13px/20px var(--font-mono); color: var(--ink-3); }
.step__out { margin-top: var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.sizes-band { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.sizes-scroll { overflow-x: auto; padding-bottom: 2px; }
.size-list { display: grid; gap: 0; margin: var(--space-6) 0 0; padding: 0; list-style: none; max-width: 420px; }
.size-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--line); font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.size-list li b { color: var(--ink); font-weight: 600; }

.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.use { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }


/* Footer: a dark band in both themes, on the code-panel tokens */
.foot { margin-top: var(--space-24); padding-block: var(--space-16) var(--space-6); background: var(--code-bg); color: var(--code-fg); }
[data-theme="dark"] .foot { box-shadow: inset 0 1px 0 var(--code-line); }
.pg .foot a { color: var(--code-fg); text-decoration: none; transition: color 120ms; }
.pg .foot a:hover { color: var(--code-muted); }
.foot :focus-visible { outline-color: var(--code-key); }
.foot__inner { container-type: inline-size; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: stretch; }
.foot__side { display: grid; align-content: space-between; gap: var(--space-8); min-width: 0; }
.foot__intro { display: flex; align-items: center; gap: var(--space-6); }
.foot__intro > a { flex: none; }
.foot .foot__logo { height: 56px; }
.foot__pitch { margin: 0; padding-left: var(--space-6); border-left: 1px solid var(--code-line); color: var(--code-muted); max-width: 40ch; }
.foot__form { min-width: 0; }
.foot__label { font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--code-muted); }

/* Terminal dialog: the footer form drawn like an ncurses box. Still a plain form underneath. */
.tui { position: relative; display: grid; gap: 10px; margin-top: 10px; padding: var(--space-5, 20px) var(--space-5, 20px) 0; border: 1px solid var(--code-muted); font: 400 14px/22px var(--font-mono); color: var(--code-fg); }
.tui__title { position: absolute; top: -11px; left: var(--space-4); margin: 0; padding: 0 var(--space-1); background: var(--code-bg); font: 500 13px/20px var(--font-mono); color: var(--code-fg); white-space: nowrap; }
.tui__row { display: grid; grid-template-columns: 9ch minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.tui__label { color: var(--code-muted); }
.tui__field { display: flex; align-items: center; gap: 2px; min-width: 0; color: var(--code-muted); }
.tui__input { flex: 1; min-width: 0; min-height: 30px; padding: 0 var(--space-2); border: 0; border-radius: 0; background: var(--code-line); color: var(--code-fg); font: inherit; caret-color: var(--code-key); caret-shape: block; }
.tui__input:focus { outline: none; background: var(--code-fg); color: var(--code-bg); caret-color: var(--code-bg); }
.tui__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--code-muted); }
.pg .tui__note a { text-decoration: underline; text-underline-offset: 2px; }
.tui__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.tui__btn { min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: 0; background: none; color: var(--code-fg); font: 600 14px/22px var(--font-mono); white-space: pre; cursor: pointer; }
.tui__btn:hover, .tui__btn:focus-visible { outline: none; background: var(--code-fg); color: var(--code-bg); }
.tui__ok { color: var(--code-string); }
.tui__sent { color: var(--code-fg); }
.tui__status { margin: 2px calc(-1 * var(--space-5, 20px)) 0; padding: var(--space-1) var(--space-5, 20px); background: var(--code-line); font-size: 12px; line-height: 18px; color: var(--code-muted); }
.foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.foot__col { display: grid; gap: var(--space-2); align-content: start; font: 400 14px/22px var(--font-mono); }
.foot__pair { white-space: nowrap; }
.foot__col .foot__label { margin-bottom: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .06em; color: var(--code-fg); }
.foot__bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--code-line); font-size: 14px; line-height: 22px; color: var(--code-muted); }

/* Pricing */
.page-head { display: grid; gap: var(--space-3); padding-block: var(--space-16) var(--space-8); max-width: 760px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-12); margin: 0; }
.faq dt { font-weight: 600; margin-bottom: var(--space-1); }
.faq dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 24px; }

/* Docs */
.docs { display: grid; grid-template-columns: var(--width-docs-nav) minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-8) 0; align-items: start; }
.docs__side { display: grid; gap: var(--space-6); min-width: 0; }
.docs__main { display: grid; gap: var(--space-12); min-width: 0; padding-top: var(--space-2); }
.docs__sec { display: grid; gap: var(--space-4); min-width: 0; }
.docs__sec > p, .docs__sec > ol { margin: 0; color: var(--ink-2); max-width: var(--width-prose); }
.docs__head { display: grid; gap: var(--space-3); max-width: var(--width-prose); }
/* Parameter tables: the name on its own line, its tags (required, optional, premium) on the line below */
.pg .pp-param { gap: var(--space-1) 6px; }
.pg .pp-param__name { flex-basis: 100%; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--space-8); align-items: start; }
.split > * { min-width: 0; }
.split__text { display: grid; gap: var(--space-4); }
.split__text > p { margin: 0; color: var(--ink-2); }
.next-page { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 14px; }
.steps-v { display: grid; gap: var(--space-12); }
.step-v { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
.step-v__num { font: 500 13px/28px var(--font-mono); color: var(--ink-3); }
.step-v__body { display: grid; gap: var(--space-3); min-width: 0; }
.step-v__body > p { margin: 0; color: var(--ink-2); max-width: var(--width-prose); }

/* Inline styles of the mockups, as classes: the CSP allows none */
.try__dims { color: var(--ink-3); }
.demo__capture { width: 493px; max-width: 100%; }
.sizes-band__lead { margin-top: var(--space-3); }
.size-box--x { width: 480px; height: 360px; }
.size-box--l { width: 400px; height: 300px; }
.size-box--m { width: 200px; height: 150px; }
.size-box--s { width: 120px; height: 90px; }
.size-box--t { width: 90px; height: 68px; }
.pp-plans__name .pp-tag { vertical-align: 3px; }
.band--tight { padding-top: var(--space-16); }
.band__title { margin-bottom: var(--space-8); }
.step-v__body .pp-code, .step-v__body .pp-callout { max-width: 760px; }

/* Not drawn in the mockups */
html { scroll-padding-top: 80px; }
.pg a.pp-btn:hover { text-decoration: none; }
.head-desktop { display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle { min-width: 56px; }

/* The header's links on a phone, and the docs nav under 900px */
.head-menu, .docs-menu { display: none; position: relative; }
.head-menu summary, .docs-menu summary { list-style: none; }
.head-menu summary::-webkit-details-marker, .docs-menu summary::-webkit-details-marker { display: none; }
.head-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); display: grid; gap: var(--space-2); min-width: 200px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.head-menu__panel nav { display: grid; gap: 2px; }
.head-menu__panel .theme-toggle { justify-self: start; min-width: 0; padding-inline: 10px; }
.docs-menu .pp-docsnav { margin-top: var(--space-4); max-width: none; }

/* Text pages: about, FAQ, the robot page, terms, privacy */
.prose { display: grid; gap: var(--space-4); max-width: var(--width-prose); }
.prose h2 { margin: var(--space-6) 0 0; font: 600 20px/28px var(--font-mono); letter-spacing: -.01em; }
.prose p, .prose ul { margin: 0; color: var(--ink-2); }
.prose h3 { margin: var(--space-2) 0 0; font: 600 16px/24px var(--font-mono); color: var(--ink); }
.prose ul { display: grid; gap: var(--space-2); padding-left: var(--space-6); }
.prose strong { color: var(--ink); font-weight: 600; }
.company { display: grid; gap: var(--space-3); margin: 0; }
.company dt { font: 500 11px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.company dd { margin: 0; color: var(--ink); }
.qa { display: grid; gap: var(--space-6); margin: 0; }
.qa dt { font-weight: 600; margin-bottom: var(--space-1); }
.qa dd { margin: 0; color: var(--ink-2); }
.qa ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); }

/* Form pages: signup and contact */
.form-layout { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 320px); gap: var(--space-16); align-items: start; }
.form-stack { display: grid; gap: var(--space-4); }
.form-stack--single { max-width: 560px; }
.form-side { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); background: var(--surface-sunken); border-radius: var(--radius-lg); }
.pp-input--area { min-height: 160px; padding-block: var(--space-2); line-height: 22px; resize: vertical; }
.pp-input:focus-visible { outline-offset: 0; }
.pg .pp-callout a { color: inherit; }
.tui__btn[disabled] { color: var(--code-muted); cursor: not-allowed; background: none; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-12); }
  .hero__code pre { min-height: 0; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo { gap: var(--space-8); }
  .demo__stage { order: 0; min-height: 0; }
  .sizes-band { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__side { display: none; }
  .docs-menu { display: block; }
  .steps, .uses { grid-template-columns: minmax(0, 1fr); }
  .faq,   .band { padding-top: var(--space-16); }
    .foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .foot__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .t-display { font-size: 36px; line-height: 40px; }
  .t-h1 { font-size: 32px; line-height: 38px; }
  .head-full, .pg .pp-header__nav, .head-desktop { display: none; }
  .head-mark { display: block; }
  .head-menu { display: block; }
  .foot { padding-top: var(--space-12); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .tui__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .foot .foot__logo { height: 44px; }
  .foot__intro { gap: var(--space-4); }
  .foot__pitch { padding-left: var(--space-4); }
  .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}