/* commentbox.dev. Brand: Signal #4353FF, Ink #0F1115, White; neutral tints derived from Ink. Inter, self-hosted. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
:root {
  --signal: #4353ff;
  --signal-hover: #3442e6;
  --ink: #0f1115;
  --ink-80: rgb(15 17 21 / 0.8);
  --ink-64: rgb(15 17 21 / 0.64);
  --ink-12: rgb(15 17 21 / 0.12);
  --ink-6: rgb(15 17 21 / 0.06);
  --ink-3: rgb(15 17 21 / 0.03);
  --muted: var(--ink-64); /* secondary text and small icons */
  --white: #ffffff;
  --on-ink-72: rgb(255 255 255 / 0.72);
  --on-ink-16: rgb(255 255 255 / 0.16);
  --on-ink-8: rgb(255 255 255 / 0.08);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --header: 64px; /* the sticky header, its border included: every section fits the screen below it */
  --section-pad: 32px; /* top and bottom padding of a full-screen section */
  --section-pad-bottom: var(--section-pad);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.75rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 16px; }
code, pre { font-family: var(--mono); font-size: 0.875em; }
p code, li code { background: var(--ink-6); padding: 2px 6px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: 12px; top: -48px; padding: 8px 14px; background: var(--ink); color: var(--white); border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* Solid white at every width: nothing shows through (narrower than 1024px the scroll story pins its scene line right
   under it). */
.top { position: sticky; top: 0; z-index: 5; height: var(--header); background: var(--white); border-bottom: 1px solid var(--ink-6); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.logo { display: block; flex: none; margin-left: -12px; }
.logo img { height: 40px; width: auto; }
.top nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.top nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-64); font-size: 15px; font-weight: 500; text-decoration: none; }
.top nav a:hover { color: var(--ink); background: var(--ink-3); }

.eyebrow { margin: 0 0 12px; color: var(--signal); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-top: var(--section-pad); padding-bottom: var(--section-pad-bottom); }
.lede { font-size: 1.1875rem; color: var(--ink-80); max-width: 34em; margin-bottom: 28px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.btn-primary { background: var(--signal); color: var(--white); }
.btn-primary:hover { background: var(--signal-hover); }
.btn-ghost { color: var(--ink); border: 1px solid var(--ink-12); }
.btn-ghost:hover { border-color: var(--ink-64); }

.cmd { display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 6px 6px 6px 18px; background: var(--ink); color: var(--white); border-radius: 10px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 8px 0; font-size: 15px; }
.copy { flex: none; min-width: 80px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: var(--on-ink-16); color: var(--white); font: 500 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.copy:hover { background: rgb(255 255 255 / 0.24); }

.shot { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-12); box-shadow: 0 1px 2px var(--ink-6), 0 24px 48px -24px rgb(15 17 21 / 0.25); background: var(--white); }
.ink .shot { border-color: var(--on-ink-16); box-shadow: none; }

.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad-bottom); }
/* Every homepage section fills the screen below the sticky header (vh first, for browsers without svh), its content
   in the middle, and an anchor puts its top right under the header. Its content fits that screen (fit-check in
   scripts/guide-shots.mjs); only the scroll story (#how) is longer on purpose. */
main > section { position: relative; min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); align-content: center; scroll-margin-top: var(--header); }
.section + .section { border-top: 1px solid var(--ink-6); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.split p { color: var(--ink-80); }
.steps { list-style: none; padding: 0; margin: 32px 0 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.num { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 8px; background: var(--signal); color: var(--white); font-weight: 600; font-size: 15px; }
.steps p { color: var(--ink-80); margin: 0; }
.steps-last { margin-bottom: 0; }
/* Two steps to connect your agent (#connect): stacked in the text column; step 1 has the install command. */
.setup-steps { grid-template-columns: minmax(0, 1fr); margin: 28px 0 0; }
.setup-steps .cmd { margin-top: 16px; }
.steps .setup-host,
.steps .setup-then { margin-top: 12px; color: var(--ink-64); font-size: 15px; }
/* Tell your agent how far to go (#how-far): a segmented control (three radios, so it works without JS) and one panel
   at a time. The panels share one grid cell (the tallest sets the height), so switching never moves the page. Each
   instruction is a mono block with a Copy button, like the install command without its "$" prompt. */
#how-far .sub { margin: -4px 0 24px; color: var(--ink-80); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px; border: 1px solid var(--ink-12); border-radius: 12px; background: var(--ink-3); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; color: var(--ink-64); font-size: 15px; font-weight: 600; cursor: pointer; }
.seg label:hover { color: var(--ink); }
.seg input:checked + label { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px var(--ink-12), 0 0 0 1px var(--ink-12); }
.seg input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }
.levels { display: grid; }
.level { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--white); }
.level p { margin: 0; color: var(--ink-80); }
.level .cmd { max-width: none; }
.level:not([data-level="pr"]) { visibility: hidden; }
#how-far:has(#lv-staging:checked) .level[data-level="staging"], #how-far:has(#lv-overview:checked) .level[data-level="overview"] { visibility: visible; }
#how-far:has(#lv-staging:checked, #lv-overview:checked) .level[data-level="pr"] { visibility: hidden; }
.level-default { padding: 2px 8px; border: 1px solid var(--signal); border-radius: 999px; color: var(--signal); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.cmd-text { align-items: flex-start; padding: 10px 8px 10px 16px; }
.cmd-text code { padding: 6px 0; font-size: 14px; line-height: 1.55; }
.features { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.features li { border-radius: 6px; }
.features li { padding-left: 20px; position: relative; color: var(--ink-80); }
.features li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 2px; background: var(--signal); }
.features strong { color: var(--ink); font-weight: 600; }

.ink { background: var(--ink); color: var(--white); }
.ink h2 { color: var(--white); }
.ink .eyebrow { color: var(--white); opacity: 0.72; }
.ink p, .ink .split p { color: var(--on-ink-72); }
.ink a { color: var(--white); }
.ink p code { background: var(--on-ink-8); color: var(--white); }
.sub { max-width: 46em; }
.code-block { margin: 20px 0 24px; border: 1px solid var(--ink-12); border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.ink .code-block { border-color: var(--on-ink-16); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--on-ink-8); color: var(--on-ink-72); font: 500 13px/1 var(--mono); }
.code-block pre { margin: 0; padding: 18px 16px; overflow-x: auto; color: var(--white); line-height: 1.7; }
.note { font-size: 15px; }
.small { font-size: 15px; }

.closing { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: var(--section-pad); padding-bottom: var(--section-pad-bottom); border-top: 1px solid var(--ink-6); }
.closing img { margin-bottom: 24px; }
.closing h2 { max-width: 16em; margin-bottom: 28px; }
.closing .cmd { width: 100%; }

.foot { border-top: 1px solid var(--ink-6); background: var(--ink-3); }
.foot-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 36px; font-size: 15px; color: var(--ink-64); }
.foot-inner img { margin-left: -10px; }
.foot-inner p { margin: 0; }
.foot-inner ul { display: flex; gap: 20px; list-style: none; margin: 0 0 0 auto; padding: 0; }

@media (max-width: 960px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .top nav { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .actions .btn { flex: 1; }
  .foot-inner ul { margin-left: 0; }
}
p.eyebrow { color: var(--signal); }
.ink p.eyebrow { color: var(--white); opacity: 0.72; }
.code-block pre { white-space: pre-wrap; overflow-wrap: break-word; }
.cmd { max-width: 560px; }
.cmd code { white-space: pre-wrap; overflow-wrap: break-word; }
/* What's next: under the closing command, in the same screen. */
.next { width: 100%; max-width: 640px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ink-6); }
.next h3 { margin-bottom: 8px; font-size: 1.125rem; }
.next p { margin: 0 auto; max-width: 40em; color: var(--ink-80); font-size: 16px; }
.closing .cmd { max-width: 640px; text-align: left; }
.pricing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pricing-head h2 { margin: 0; }
.placeholder-note { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border: 1px dashed var(--ink-12); border-radius: 999px; color: var(--ink-64); font-size: 13px; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 16px; }
.tier { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--white); }
.tier-highlight { border: 2px solid var(--signal); padding: 27px; }
.tier h3 { margin-bottom: 4px; font-size: 1.375rem; }
.tier-by { margin: 0 0 16px; min-height: 1.5em; color: var(--signal); font-size: 14px; font-weight: 600; }
.tier-price { margin: 0; color: var(--ink-64); }
.tier-price::first-letter { text-transform: uppercase; }
.tier-price .amount { color: var(--ink); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.tier-price-text { padding: 4px 0 3px; color: var(--ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
/* Free: "self-host, MIT" sits on its own line under $0. */
.tier[data-tier="free"] .tier-price .lead { display: block; }
.tier-desc { margin: 16px 0 12px; color: var(--ink-80); }
.tier-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; flex: 1; align-content: start; }
.tier-features li { position: relative; padding-left: 20px; color: var(--ink-80); font-size: 15px; font-weight: 500; }
.tier-features li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--signal); }
.tier-spacer { flex: 1; min-height: 12px; }
.tier .btn { align-self: flex-start; }
.tier-foot { margin: 0 0 4px; color: var(--ink-80); font-size: 15px; }
@media (max-width: 960px) { .tiers { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
/* Agents line in the hero (hero.worksWith in src/live-demo.strings.json). */
.agents { margin: 12px 0 0; color: var(--ink-64); font-size: 15px; line-height: 1.6; }
/* Agent pane in the hero's right column (lib/agents.mjs): at rest, its label and the idle line, level with the hero
   copy. With the live demo on, the demo swaps it for the live pane (src/live-demo.css). */
.hero-pane { align-self: stretch; display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.45; }
.hero-pane-box { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--ink-12); border-radius: 16px; background: var(--ink-3); }
.hero-pane-title { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--ink-12); color: var(--ink-64); font-weight: 600; }
.hero-pane-body { flex: 1; display: flex; padding: 20px; }
.hero-pane-rest { margin: auto; padding: 16px 0; text-align: center; }
.hero-pane-idle { margin: 0; font-size: 16px; font-weight: 600; }
.hero-pane-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; color: var(--muted); }
.hero-pane-cursor { flex: none; }
@media (max-width: 767.98px) { .hero-pane-title { padding: 12px 16px; } .hero-pane-body { padding: 16px; } }

/* ---- Site v2: every section in one screen ------------------------------------------------------------------------ */
/* Hero: the agent pane at most 520px tall, level with the copy. */
.hero-pane { max-height: 520px; }
/* Features: the webhook as the agent receives it (real field names, docs/webhook.md), in the .code-block style. */
.payload { margin: 0; min-width: 0; }
.payload-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.payload-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-64); font-size: 13px; font-weight: 500; }
.switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--ink-12); transition: background-color 200ms ease-out; }
.switch-knob { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgb(15 17 21 / 0.3); transition: transform 200ms ease-out; }
.switch.is-on .switch-track { background: var(--signal); }
.switch.is-on .switch-knob { transform: translateX(14px); }
.payload-code { margin: 0; }
.payload-code pre { max-height: 400px; overflow: auto; padding: 14px 0; font-size: 13px; line-height: 1.6; white-space: pre; overflow-wrap: normal; }
.payload-code .pl { display: block; padding: 0 16px; border-radius: 4px; transition: background-color 200ms ease-out; }
.payload-code .pl-gap { margin-top: 10px; }
.payload-code .pl-muted { color: var(--on-ink-72); }
/* A lit field: white at 8%, a --signal bar on the left; fields lit together read as one block. */
.payload-code .pl.is-on { background: rgb(255 255 255 / 0.08); box-shadow: inset 3px 0 var(--signal); }
.payload-code .pl.is-on + .pl.is-on { border-top-left-radius: 0; border-top-right-radius: 0; }
.payload-code .pl.is-on:has(+ .pl.is-on) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Get started: the real output of init under the command, muted, "ok" in green, 8px under the command. A line too
   long for the block wraps with a hanging indent (under the text after "ok  "). */
.term-out { margin: 0; padding: 0 16px 16px; color: var(--on-ink-72); font-size: 13px; line-height: 1.6; }
.code-block pre.term-out { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-out > span { display: block; padding-left: 4ch; text-indent: -4ch; }
.term-out .ok { color: #4ade80; }
/* 8px between the command's line and the output's first line (ids: above .code-block pre and the phones' padding). */
#get-started .code-block pre#install-cmd { padding-bottom: 0; }
#get-started .code-block pre.term-out { padding-top: 8px; }
/* Self-host: each command on its own line, a wrapped one indented under its first word. */
#docker-cmd .ln { display: block; padding-left: 3ch; text-indent: -3ch; }
.notes { margin-top: 8px; font-size: 15px; }
.notes summary { width: max-content; color: var(--on-ink-72); font-weight: 600; cursor: pointer; }
.notes[open] summary { margin-bottom: 8px; }
.notes .note { margin: 0 0 8px; }
/* Connect: step 2 as a small picture of the Settings block (aria-hidden; step 2's text says it). */
.settings { margin: 0; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 2px var(--ink-6), 0 24px 48px -24px rgb(15 17 21 / 0.25); }
.settings-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--ink-6); background: var(--ink-3); color: var(--ink-64); font-size: 14px; font-weight: 600; }
.settings-body { display: grid; gap: 10px; padding: 20px 18px; }
.settings-label { color: var(--ink); font-size: 14px; font-weight: 600; }
.settings-row { display: flex; gap: 8px; }
.settings-input { flex: 1 1 0; width: 0; min-width: 0; height: 40px; padding: 0 12px; overflow: hidden; border: 1px solid var(--ink-12); border-radius: 8px; color: var(--ink); font: 13px/38px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.settings-test { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; }
.settings-status { display: flex; align-items: center; gap: 8px; min-height: 22px; color: var(--ink-80); font-size: 14px; }
.settings-status:not(:empty)::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; }
/* Pricing: the dots under the cards (phones). */
.tier-dots { display: none; }
/* Phones get their own, shorter lede and feature lines (hero.ledeMobile, features.short.*). */
.lede-mobile, .f-short { display: none; }

@media (max-width: 960px) {
  .hero-pane { max-height: none; }
}
@media (max-width: 767.98px) {
  /* Room at the bottom for the phones' "Try it" toggle (72px), every section. */
  :root { --section-pad: 20px; --section-pad-bottom: calc(72px + env(safe-area-inset-bottom)); }
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.625rem; }
  .eyebrow { margin-bottom: 8px; }
  .hero { gap: 20px; }
  .lede { font-size: 15.5px; line-height: 1.55; margin-bottom: 18px; }
  .lede:not(.lede-mobile), .f-long { display: none; }
  .lede-mobile, .f-short { display: block; }
  /* Commands on one line. */
  .cmd:not(.cmd-text) code { font-size: 14px; white-space: nowrap; overflow: hidden; }
  .actions { margin-bottom: 14px; }
  .actions .btn { min-height: 44px; }
  .agents { margin-top: 8px; font-size: 14px; }
  /* The pane folds to 160px. */
  .hero-pane { height: 160px; }
  .hero-pane-title { padding: 8px 16px; }
  .hero-pane-body { padding: 8px 16px; }
  .hero-pane-rest { padding: 0; }
  .hero-pane-idle { font-size: 15px; }
  /* Features: bold label plus one line; the card under them, scrolling inside. */
  .features { margin-top: 16px; gap: 8px; }
  .features li { padding-left: 16px; font-size: 14.5px; line-height: 1.45; }
  .features li::before { top: 0.5em; width: 6px; height: 6px; }
  .features strong { display: block; }
  .payload-code pre { max-height: 196px; padding: 10px 0; font-size: 12px; }
  .payload-code .pl { padding: 0 12px; }
  /* The signature's example value, shorter (display only); a line too long for the card fades out at its right edge. */
  .payload-code .pl-wide { display: none; }
  .payload-code pre { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .payload-code .code-head { min-height: 32px; }
  /* Get started. */
  #get-started .sub { margin-bottom: 12px; font-size: 15px; }
  #get-started .code-block { margin: 12px 0 16px; }
  #get-started .code-block pre { padding: 12px 14px; }
  #get-started .term-out { padding: 0 14px 12px; font-size: 12px; }
  /* With the demo on, room under the agents line for the "Your turn" chip (motion only): 12px, the chip (32px), 12px, the pane. */
  html[data-gd-motion]:has(main[data-ld-page]) .hero { row-gap: 56px; }
  /* Connect: the steps short, the Settings picture under them. */
  #connect h2 { margin-bottom: 0; }
  .setup-steps { margin-top: 16px; gap: 16px; }
  .setup-steps .num { float: left; width: 26px; height: 26px; margin: 0 10px 0 0; font-size: 14px; border-radius: 7px; }
  .setup-steps h3 { margin: 0 0 6px; line-height: 26px; font-size: 1.0625rem; }
  .setup-steps p { font-size: 15px; line-height: 1.45; }
  .setup-steps .cmd { margin-top: 10px; }
  .steps .setup-host, .steps .setup-then { margin-top: 6px; font-size: 14px; }
  .settings-head { padding: 8px 14px; }
  .settings-body { gap: 8px; padding: 12px 14px; }
  /* How far. */
  .seg { display: flex; }
  .seg label { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; }
  .level { padding: 16px; }
  .cmd-text code { font-size: 13px; }
  /* Pricing: cards side by side, snapping, the next one peeking 24px; three dots under them. */
  .tiers { display: flex; gap: 12px; max-width: none; margin: 16px -20px 8px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tiers::-webkit-scrollbar { display: none; }
  /* 26px of padding: the 24px of the next card that peeks in shows its edge, never half a letter. */
  .tier { flex: 0 0 calc(100% - 16px); max-height: 560px; padding: 20px 26px; scroll-snap-align: start; }
  .tier-highlight { padding: 19px 25px; }
  .tier-by { margin-bottom: 8px; }
  .tier-by:empty { display: none; }
  .tier-desc { margin: 10px 0; font-size: 15px; }
  .tier-features { margin-bottom: 16px; }
  .tier-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
  .tier-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-12); transition: background-color 200ms ease-out; }
  .tier-dots span.is-active { background: var(--signal); }
  .tier-foot { font-size: 14px; }
  /* Closing and What's next. */
  .closing img { margin-bottom: 16px; }
  .closing h2 { margin-bottom: 20px; }
  .next { margin-top: 28px; padding-top: 20px; }
  .next p { font-size: 15px; }
}