/* Controlflare marketing - tokens from docs/DESIGN.md, kept byte-identical to
   apps/dashboard/src/web/styles/tokens.css.
   --cf-rose-800 and --cf-ink-600 exist so small text has real headroom on paper
   (7.7:1 and 6.2:1) while --cf-rose-600 stays reserved for fills that carry
   white text (4.83:1). Fill shade and text shade are separate on purpose. */
:root {
  --cf-rose-50: #fff1ec;
  --cf-rose-100: #ffe3da;
  --cf-rose-500: #f39985;
  --cf-rose-600: #b65448;
  --cf-rose-700: #9e453a;
  --cf-rose-800: #823a2c;
  --cf-ink-900: #261b1b;
  --cf-ink-700: #564b4b;
  --cf-ink-600: #665c5c;
  --cf-ink-500: #797070;
  --cf-line: #f0e1dd;
  --cf-paper: #fff9f7;
  --cf-card: #ffffff;
  --cf-green-600: #007b41;
  --cf-green-50: #ddf7e6;
  --cf-crimson-600: #980046;
  --cf-crimson-700: #7e0139;
  --cf-crimson-50: #ffe9f0;
  --cf-cloudflare: #f6821f;
  --cf-radius: 10px;
  --cf-shadow: 0 1px 2px rgba(38, 27, 27, .06), 0 8px 24px rgba(182, 84, 72, .10);
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 34rem;
  --wrap: 70rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

*, *::before, *::after { 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;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cf-ink-700);
  background: var(--cf-paper);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cf-ink-900);
}
h1 { font-size: clamp(2.375rem, 6.5vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 1.1875rem; line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--cf-rose-800); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--cf-rose-700); }
strong { color: var(--cf-ink-900); font-weight: 600; }
code { font-family: var(--font-mono); font-size: .9em; }

:focus-visible {
  outline: 2px solid var(--cf-rose-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .625rem 1.25rem;
  font: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.2;
  border-radius: var(--cf-radius); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cf-rose-600); color: #fff; }
.btn--primary:hover { background: var(--cf-rose-700); color: #fff; }
.btn--secondary { background: transparent; color: var(--cf-ink-900); border-color: var(--cf-line); }
.btn--secondary:hover { border-color: var(--cf-ink-500); color: var(--cf-ink-900); }
.btn--large { min-height: 3.25rem; padding: .875rem 1.5rem; font-size: 1.0625rem; }
.btn--quiet { color: var(--cf-ink-700); padding-inline: .75rem; }
.btn--quiet:hover { color: var(--cf-ink-900); background: var(--cf-rose-50); }

/* ---- Nav ---- */
.nav { padding-block: 1.125rem; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em;
  color: var(--cf-ink-900); text-decoration: none;
}
.brand svg { width: 1.6rem; height: 1.6rem; flex: none; }
.nav__links { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav__links a:not(.btn) {
  display: inline-block; padding: .5rem .75rem; border-radius: 8px;
  color: var(--cf-ink-700); text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap;
}
.nav__links a:not(.btn):hover { color: var(--cf-ink-900); background: var(--cf-rose-50); }
/* GitHub mark. Icon-only, so unlike the nav__anchor items it is never hidden
   at narrow widths - it costs one square instead of a word. Square padding
   keeps the hover pill round rather than oblong. Declared after the shared
   a:not(.btn) rule because the two have equal specificity. */
.nav__links a.nav__icon { padding: .5rem; line-height: 0; }
.nav__links a.nav__icon svg { width: 1.2rem; height: 1.2rem; display: block; }
.nav__links .btn { margin-left: .5rem; }
@media (max-width: 47.99rem) {
  .nav__links li.nav__anchor { display: none; }
  .nav__links .btn { margin-left: 0; }
}
/* "Run it your way" only fits alongside the others from ~900px up; below that the nav would overflow. */
@media (max-width: 55.99rem) { .nav__links li.nav__anchor--wide { display: none; } }

/* ---- Sections ---- */
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.section--tint { background: var(--cf-rose-50); }
.section__head { max-width: 38rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__head p { margin-top: 1rem; font-size: 1.0625rem; }
.eyebrow {
  display: inline-block; margin-bottom: .875rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cf-rose-800);
}

/* ---- Hero ---- */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero .wrap {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero__copy { max-width: 36rem; }
.hero__lede { margin-top: 1.5rem; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); max-width: var(--measure); }
.hero__lede strong { font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__fine { margin-top: 1.25rem; font-size: .875rem; color: var(--cf-ink-600); }
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 30rem) { .hero__actions .btn { flex: 0 0 auto; } }

/* ---- Meter card (hero signature) ---- */
.card {
  background: var(--cf-card); border: 1px solid var(--cf-line);
  border-radius: calc(var(--cf-radius) + 4px); box-shadow: var(--cf-shadow);
}
.meter-card { padding: 1.5rem; }
.meter-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.meter-card__account { font-size: .875rem; font-weight: 600; color: var(--cf-ink-900); }
.meter-card__account small { display: block; font-weight: 400; color: var(--cf-ink-600); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .01em; }
.pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pill--running { background: var(--cf-green-50); color: var(--cf-green-600); }
.pill--paused { background: var(--cf-rose-50); color: var(--cf-ink-700); }
.pill--cap { background: var(--cf-crimson-50); color: var(--cf-crimson-600); }

.meter-card__spend { margin-top: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; }
.meter-card__amount {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1; color: var(--cf-ink-900);
}
.meter-card__amount small { display: block; margin-top: .5rem; font-size: .9375rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; color: var(--cf-ink-600); }
.meter-card__cap { font-size: .875rem; color: var(--cf-ink-700); }
.meter-card__cap strong { font-weight: 600; }

/* The cap: spend runs along the track and stops dead against a hard rule - the
   same gesture as the bar across the top of the mark. */
.meter { position: relative; margin-top: 1.25rem; padding-right: .875rem; }
.meter__track { height: .625rem; border-radius: 999px; background: var(--cf-rose-100); overflow: hidden; }
.meter__fill { height: 100%; width: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--cf-rose-500), var(--cf-rose-600)); }
.meter__cap {
  position: absolute; top: 50%; right: 0; width: 4px; height: 1.375rem;
  transform: translateY(-50%); border-radius: 2px; background: var(--cf-ink-900);
}
.meter__legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: .875rem; font-size: .8125rem; color: var(--cf-ink-600); }
.meter__legend strong { color: var(--cf-rose-800); font-weight: 600; }

/* The hero card's per-product breakdown, mirroring the dashboard's "Where it
   comes from" (docs/DESIGN.md). Labels and figures only - the meter's rose→
   crimson ramp means cap proximity, so giving products their own colours here
   would overload the one colour signal this card already has. */
.meter-card__breakdown { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cf-line); }
.meter-card__breakdown h2 {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  color: var(--cf-ink-700); letter-spacing: .01em; margin: 0 0 .5rem;
}
.breakdown__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .375rem 0; font-size: .875rem;
}
.breakdown__row dt { color: var(--cf-ink-900); }
/* The caveat under a label, never beside the figure: a clean number with the
   note out of reach reads as complete when it is not. */
.breakdown__row dt span {
  display: block; margin-top: .125rem; font-size: .75rem; color: var(--cf-ink-600);
}
.breakdown__row dd { margin: 0; color: var(--cf-ink-900); flex: none; }

.meter-card__foot { margin-top: 1rem; font-size: .8125rem; color: var(--cf-ink-600); }

.meter-card__list { list-style: none; margin-top: 1.5rem; border-top: 1px solid var(--cf-line); }
.meter-card__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--cf-line); font-size: .875rem;
}
.meter-card__list code { color: var(--cf-ink-900); }
.meter-card__list .pill { flex: none; }

/* ---- Problem cards ---- */
.grid-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.problem { padding: 1.5rem; }
.problem__icon {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 10px; background: var(--cf-rose-50); color: var(--cf-rose-700); margin-bottom: 1.125rem;
}
.problem__icon svg { width: 1.25rem; height: 1.25rem; }
.problem p { margin-top: .5rem; font-size: .9375rem; }

/* ---- Steps (a real sequence, so numbered) ---- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.steps li { counter-increment: step; position: relative; padding-top: 1.125rem; border-top: 2px solid var(--cf-rose-600); }
.steps li::before {
  content: counter(step);
  display: block; font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  color: var(--cf-rose-800); letter-spacing: 0; margin-bottom: .75rem;
}
.steps p { margin-top: .5rem; font-size: .9375rem; }

/* ---- Dashboard preview (table mock) ---- */
.preview { overflow: hidden; }
.preview__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .875rem 1.25rem; border-bottom: 1px solid var(--cf-line); background: var(--cf-paper);
}
.preview__toolbar h3 { font-size: .9375rem; }
.preview__toolbar h3 small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .75rem; color: var(--cf-ink-600); margin-top: .125rem; }
.preview__actions { display: flex; gap: .5rem; }
.btn--small { min-height: 2.125rem; padding: .375rem .75rem; font-size: .8125rem; }
.btn--danger { color: var(--cf-crimson-600); border-color: var(--cf-line); background: transparent; }
.btn--danger:hover { border-color: var(--cf-crimson-600); color: var(--cf-crimson-700); }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.preview table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .875rem; }
.preview th, .preview td { text-align: left; padding: .875rem 1.25rem; border-bottom: 1px solid var(--cf-line); vertical-align: middle; }
.preview th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cf-ink-600); }
.preview tr:last-child td { border-bottom: 0; }
.preview td code { color: var(--cf-ink-900); }
.preview td:last-child { text-align: right; }
.preview__note { margin-top: 1.25rem; font-size: .9375rem; max-width: 42rem; color: var(--cf-ink-700); }

/* ---- Trust block: the one dark band ---- */
.trust { background: var(--cf-ink-900); color: #e6dcda; }
.trust h2, .trust h3 { color: #fff; }
.trust .eyebrow { color: var(--cf-rose-500); }
.trust .section__head p { color: #cdc1bf; }
.trust__grid { display: grid; gap: 1.75rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust__item { padding-left: 1.125rem; border-left: 2px solid var(--cf-rose-500); }
.trust__item p { margin-top: .5rem; font-size: .9375rem; color: #cdc1bf; }
.trust__item ul { margin-top: .5rem; padding-left: 1.1rem; font-size: .9375rem; color: #cdc1bf; }
.trust__item li + li { margin-top: .2rem; }
.trust a { color: var(--cf-rose-500); }
.trust code { color: #fff; }

/* ---- Deployment modes ---- */
.mode { padding: 1.5rem; display: flex; flex-direction: column; }
.mode__tag { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-rose-800); margin-bottom: .75rem; }
.mode p { margin-top: .5rem; font-size: .9375rem; }
.mode__cmd {
  margin: 1rem 0 0; padding: .625rem .875rem; border-radius: 8px; overflow-x: auto;
  background: var(--cf-paper); border: 1px solid var(--cf-line); font-size: .8125rem; color: var(--cf-ink-900);
}
.mode__cmd code { font-size: 1em; }
.mode__link { display: inline-block; margin-top: auto; padding-top: 1.25rem; font-weight: 600; font-size: .9375rem; }
.mode__link::after { content: " \2192"; }
.modes__note { margin-top: 1.5rem; font-size: .9375rem; color: var(--cf-ink-700); }

/* ---- Pricing ---- */
.price-card { max-width: 26rem; margin-inline: auto; padding: 2rem; text-align: left; }
.price-card__row { display: flex; align-items: baseline; gap: .5rem; margin-top: .75rem; }
.price-card__amount { font-family: var(--font-display); font-weight: 700; font-size: 3rem; letter-spacing: -0.03em; line-height: 1; color: var(--cf-ink-900); }
.price-card__per { color: var(--cf-ink-600); font-size: .9375rem; }
.price-card__struck { text-decoration: line-through; color: var(--cf-ink-500); font-size: 1.125rem; font-weight: 500; }
.price-card ul { list-style: none; margin-top: 1.5rem; }
.price-card li { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem 0; font-size: .9375rem; }
.price-card li svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .15rem; color: var(--cf-rose-700); }
.price-card .btn { width: 100%; margin-top: 1.5rem; }
.price-card__fine { margin-top: 1rem; font-size: .8125rem; color: var(--cf-ink-600); }
.pricing .section__head { text-align: center; margin-inline: auto; }

/* ---- FAQ ---- */
.faq { max-width: 44rem; }
.faq details { border-top: 1px solid var(--cf-line); }
.faq details:last-child { border-bottom: 1px solid var(--cf-line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--cf-ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .75rem; height: .75rem;
  border-right: 2px solid var(--cf-rose-700); border-bottom: 2px solid var(--cf-rose-700);
  transform: rotate(45deg); margin-right: .25rem; transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 0 1.25rem; font-size: .9375rem; max-width: 40rem; }
.faq details ul { padding-left: 1.2rem; margin-top: .5rem; }
.faq details li + li { margin-top: .25rem; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--cf-line); padding-block: 2.5rem; font-size: .875rem; color: var(--cf-ink-600); }
.footer .wrap { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.footer__disclaimer { margin-top: .875rem; max-width: 34rem; }
.footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer__links a { color: var(--cf-ink-700); text-decoration: none; }
.footer__links a:hover { color: var(--cf-ink-900); text-decoration: underline; }
@media (min-width: 48rem) { .footer__links { justify-content: flex-end; } }
.footer__legal { margin-top: 1rem; font-size: .8125rem; }

/* ---- 404 ---- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.notfound p { margin-top: 1rem; max-width: 28rem; margin-inline: auto; }
.notfound .btn { margin-top: 1.75rem; }

/* Narrow phones: keep brand + Log in + Get started on one row without overflow. */
@media (max-width: 26rem) {
  .nav .wrap { gap: .5rem; }
  .brand { font-size: 1.125rem; gap: .45rem; }
  .brand svg { width: 1.4rem; height: 1.4rem; }
  .nav__links a:not(.btn) { padding-inline: .5rem; }
  .nav__links .btn { padding-inline: .875rem; font-size: .875rem; min-height: 2.5rem; }
}

/* ---- Agents page ---------------------------------------------------------
   The nav is already at its limit: "Run it your way" needs ~896px and the
   original four anchors fill the row from there. "For agents" therefore gets
   its own tier and only appears once there is room for a fifth. */
@media (max-width: 63.99rem) { .nav__links li.nav__anchor--extra { display: none; } }
.nav__links a[aria-current="page"] { color: var(--cf-ink-900); background: var(--cf-rose-50); box-shadow: inset 0 -2px 0 var(--cf-rose-600); }
.footer__links a[aria-current="page"] { color: var(--cf-ink-900); text-decoration: underline; }

/* Code blocks: always scroll inside themselves, never widen the page. */
.code {
  margin: 0; padding: .875rem 1rem; border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--cf-paper); border: 1px solid var(--cf-line);
  font-size: .8125rem; line-height: 1.6; color: var(--cf-ink-900);
}
.code code { font-size: 1em; }
.code--invert { background: var(--cf-ink-900); border-color: var(--cf-ink-900); color: #ffd6c6; }

/* Endpoint plate - the one dark object in the hero, because the endpoint is
   the whole point of the page. */
/* min-width:0 on every grid item that holds a <pre>: without it the grid
   column sizes to the code line's max-content and pushes the page wide. */
.endpoint { padding: 1.5rem; min-width: 0; }
.endpoint__label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-rose-800); }
.endpoint__url { margin-top: .875rem; font-size: .9375rem; }
.endpoint__meta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--cf-line); display: grid; gap: .625rem; font-size: .875rem; }
.endpoint__meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.endpoint__meta dt { color: var(--cf-ink-600); }
.endpoint__meta dd { margin: 0; font-weight: 600; color: var(--cf-ink-900); text-align: right; }

/* Connect cards */
.connect-list { max-width: 48rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.connect { padding: 1.5rem; min-width: 0; }
.connect h3 { font-size: 1.0625rem; }
.connect p { margin: .5rem 0 1rem; font-size: .9375rem; }
.connect__note { margin-top: 1.5rem; max-width: 44rem; font-size: .9375rem; color: var(--cf-ink-700); }

/* Four-step sequence (the sign-in flow really is ordered). */
@media (min-width: 40rem) { .steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tool table: three tiers, banded so the destructive four cannot be skimmed
   past. Built on .preview so the cell styling and scroll container are shared. */
.tools table { min-width: 44rem; }
.tools td:last-child { text-align: left; }
/* The third column carries the safety-critical text and is offscreen on a
   phone, so say the table scrolls where the table is too narrow to show it. */
.tools__hint { margin-top: 1rem; font-size: .875rem; color: var(--cf-ink-600); }
@media (min-width: 48rem) { .tools__hint { display: none; } }
.tools tbody tr > :first-child { border-left: 3px solid transparent; }
.tools__group th { padding-block: .75rem; background: var(--cf-paper); color: var(--cf-ink-700); }
.tools__group code { text-transform: none; letter-spacing: 0; margin-left: .5rem; color: var(--cf-ink-600); }
.tools__params code { color: var(--cf-ink-900); }
.tools__t--read tr > :first-child { border-left-color: var(--cf-line); }
.tools__t--write tr > :first-child { border-left-color: var(--cf-rose-500); }
.tools__t--stop tr > :first-child { border-left-color: var(--cf-crimson-600); }
.tools__t--stop td { background: var(--cf-crimson-50); }
.tools__t--stop .tools__group th { background: var(--cf-crimson-50); color: var(--cf-crimson-600); }
.tools__t--stop .tools__group code { color: var(--cf-crimson-600); }
.tools__t--stop td:first-child code { color: var(--cf-crimson-600); font-weight: 600; }

/* ---- Legal prose (the disclaimer page) ----
   The global resets zero out paragraph and list spacing, which suits the
   landing page's hand-built sections but not a page that is only prose. This
   is the one place that needs ordinary running text, so the rhythm is set
   here rather than by loosening the resets for everything. Headings are
   stepped down from the global h2 scale: at 2.5rem a legal heading reads as a
   marketing claim, which is the opposite of what this page is for. */
.legal { max-width: 44rem; }
.legal h2 { margin-top: 2.5rem; font-size: clamp(1.25rem, 2.5vw, 1.5rem); letter-spacing: -0.01em; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: 1rem; font-size: .9375rem; }
.legal ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; font-size: .9375rem; }
.legal li + li { margin-top: .5rem; }
.legal__meta { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cf-line); font-size: .8125rem; color: var(--cf-ink-600); }