/* Corund -- site tokens and chrome. ONE source, linked from every page under web/site; the tiny
   per-page overrides stay inline in each page. brand/BRAND.md is authoritative for palette and type.
   Monochrome base, one accent: --verified is the proven green, and it means exactly one thing on every
   surface -- verified. It colours a PROVEN verdict and, sparingly, interaction chrome (focus, hover).
   Fail red (--fail) appears ONLY inside .receipt -- never as chrome (scripts/check_brand_guard.py
   enforces the selector rule). Spacing is an 8px scale; section padding 96 / 64 / 48 (desktop /
   tablet / phone); body 18px at line-height 1.6 (17px at 390); text columns cap at 65ch; headings
   balance. Whitespace is the feature. */

:root {
  /* palette */
  --verified: #0B5B3E;      /* the one accent: proven green. On black surfaces use --verified-br */
  --verified-br: #3FA57B;
  --fail: #D0261C;          /* receipts and verdicts only, never chrome */
  --ink: #000000;
  --white: #FFFFFF;
  --paper: #F7F8FA;
  --slate: #5B6470;
  --hairline: #E3E6EC;
  --wash: #EEF0F4;

  /* spacing scale, 8px base */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --section: var(--s6);
  --band: var(--s5);        /* content sections on document pages (docs, dossier, compare): 64 / 48 / 40 */

  /* type */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 18px;
  --lh-body: 1.6;
  --fs-small: 15px;
  --fs-micro: 13px;
  --measure: 65ch;

  /* layout */
  --wrap: 1120px;
  --wrap-text: 840px;
  --gutter: var(--s3);
  --rule: 2px solid var(--ink);
}
@media (max-width: 1023px) { :root { --section: var(--s5); --band: 48px; } }
@media (max-width: 599px)  { :root { --section: 48px; --band: 40px; --fs-body: 17px; --gutter: var(--s2); } }

/* ---------------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}
h1, h2, h3, h4, p, ul, ol, figure, pre, table, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--verified); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--verified); outline-offset: 2px; }
::selection { background: var(--verified); color: var(--white); }
.mono, code, pre, kbd { font-family: var(--font-mono); }
code { font-size: .9em; background: var(--wash); padding: .1em .35em; }
pre code { background: none; padding: 0; font-size: inherit; }
main p, main li, .measure { max-width: var(--measure); }

/* ---------------------------------------------------------------- type scale */
h1 { font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); color: var(--slate); }
.muted { color: var(--slate); }
.kicker { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
/* ONE left edge: vertical rhythm is padding-block only, never the horizontal gutter; the text column of a
   document page is left-aligned inside the same wrap as the header and its blocks stop at the text measure */
.wrap.narrow > * { max-width: calc(var(--wrap-text) - 2 * var(--gutter)); }
main > section, main > .hero, main > .page-head { padding-block: var(--section); }
main.doc > section, main.doc > .entry { padding-block: var(--band); }
main > .page-head { padding-block-end: var(--s5); }
main.doc > .page-head { padding-block-end: var(--s4); }
main > .page-head + section { padding-block-start: 0; border-top: 0; }
main > section + section, main > .hero + section { border-top: var(--rule); }
.stack > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s3); }
.stack-xl > * + * { margin-top: var(--s4); }
.rule { border: 0; border-top: var(--rule); margin: 0; }

/* ---------------------------------------------------------------- header */
.site-header { border-bottom: var(--rule); background: var(--paper); }
.nav { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s3); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.nav nav { margin-left: auto; display: flex; gap: var(--s3); font-size: 16px; }
.nav nav a { text-decoration: none; }
.nav nav a:hover { text-decoration: underline; }
.cta {
  display: inline-block; background: var(--ink); color: var(--paper);
  padding: 14px 22px; border: 2px solid var(--ink);
  font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap;
}
.cta:hover { background: var(--white); color: var(--ink); }
.ghost { display: inline-block; border: 2px solid var(--ink); padding: 12px 20px; font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; }
.ghost:hover { background: var(--ink); color: var(--paper); }
.nav > .cta { padding: 10px 16px; font-size: 15px; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: var(--rule); padding-block: var(--s4) var(--s5); font-size: var(--fs-small); color: var(--slate); }
.fline { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.fline a { color: var(--slate); }
.crystal-foot { margin-left: auto; }

/* ---------------------------------------------------------------- receipt (the one place red/green live) */
.receipt { border: var(--rule); background: var(--white); }
.receipt-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); border-bottom: var(--rule); padding: 12px var(--s2); font-size: 13px; }
.receipt-head .tag { background: var(--ink); color: var(--white); font-weight: 700; padding: 3px 8px; font-size: 12px; letter-spacing: .06em; }
.receipt pre { padding: var(--s3) var(--s2); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.receipt .rr { color: var(--fail); font-weight: 700; }
.receipt .gg { color: var(--verified); font-weight: 700; }
.receipt .dim { color: var(--slate); }

/* ---------------------------------------------------------------- tables */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; border: var(--rule); background: var(--white); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--ink); font-size: 16px; line-height: 1.5; }
.tbl thead th { border-bottom: var(--rule); font-size: 15px; }
.tbl tbody th { font-weight: 700; color: var(--slate); width: 26%; }
.tbl td { width: 37%; }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0; }
.tbl td + td { border-left: 1px solid var(--hairline); }

/* On phones a three-column comparison stacks: each row becomes a labelled block and every cell
   names its column (from data-col), so nothing is cramped and nothing scrolls sideways. */
@media (max-width: 599px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: auto; }
  .tbl tr { padding: var(--s2) 0 var(--s3); border-bottom: 1px solid var(--ink); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl tbody th { border: 0; width: auto; padding: 0 var(--s2) var(--s1); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
  .tbl td { border: 0; padding: var(--s1) var(--s2); }
  .tbl td + td { border-left: 0; }
  .tbl td::before { content: attr(data-col); display: block; font-size: 13px; font-weight: 700; color: var(--slate); margin-bottom: 2px; }
}
.back { font-size: var(--fs-small); }
.back a { color: var(--slate); text-decoration: none; }
.back a:hover { color: var(--verified); text-decoration: underline; }

/* ---------------------------------------------------------------- plans (pricing) */
/* No walls: three columns on the page's own ground, separated by whitespace (a 64px gutter), each
   opened by one 2px rule. The rule is the only line; nothing is boxed. Stacked below 860px, the same
   rule opens each plan and the page keeps its one left edge. */
/* Count-agnostic: the tier count is a product decision and has changed twice already (Business
   folded into Team, then the launch ladder Free / Pro / Team / Business-staged, 2026-09-07).
   auto-fit keeps the columns even at 2, 3 or 4 without a second edit here. The track minimum and
   the gutter are sized so FOUR columns fit the 1072px content width (4 x 220 + 3 x 40 = 1000);
   at 240/64 the fourth column wrapped to a row of its own. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.plan { border-top: var(--rule); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.plan h2 { font-size: 22px; letter-spacing: -.01em; }
/* A STAGED tier is listed with its prices and no features (Business, owner 2026-09-07). Its marker
   is the page's existing mono kicker vocabulary at plan-title scale -- slate on the page's own
   ground, no new colour, no chip or border, nothing that reads as the Early-pricing tag the owner
   removed. It sits inside the h2 so a staged card's price stays on the same baseline as its
   neighbours' instead of being pushed down by a line of its own. */
.plan h2 .soon { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
                 margin-left: 10px; white-space: nowrap; }
.plan .amt { font-size: clamp(36px, 3.4vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-top: var(--s1); }
.plan .terms { font-size: 15px; color: var(--slate); margin-top: calc(-1 * var(--s1)); }
.plan .who { font-size: 16px; }
.plan p { font-size: 16px; }
.plan .cta, .plan .ghost { margin-top: auto; align-self: flex-start; }
.plan p:last-of-type { margin-bottom: var(--s2); }
.strip { border-top: var(--rule); padding-block: var(--s4) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); align-items: start; }
.strip p { max-width: var(--measure); font-size: 18px; }
/* Four tiers stacked one per screen is a very long tablet page, so 600-860 pairs them 2x2 and only
   the phone gets the single column. */
@media (max-width: 860px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .strip { grid-template-columns: 1fr; }
}
@media (max-width: 599px) { .plans { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- how it works */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.steps li { display: flex; flex-direction: column; gap: var(--s2); max-width: none; }
.steps li + li { margin-top: 0; }
.steps .n { font-family: var(--font-mono); font-weight: 700; color: var(--slate); font-size: 14px; letter-spacing: .08em; }
.steps h3 { font-size: 22px; }
.steps p { font-size: 17px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------------------------------------------------------------- compare index rows */
.links { list-style: none; padding: 0; margin-top: var(--s4); border-top: var(--rule); }
.links li { max-width: none; margin: 0; border-bottom: 1px solid var(--ink); }
.links li + li { margin-top: 0; }
.links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); align-items: center; padding-block: var(--s3); text-decoration: none; }
.links a strong { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.01em; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.links a span { color: var(--slate); font-size: var(--fs-body); }
.links a .arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--slate); font-weight: 700; font-size: 24px; }
.links a:hover strong { color: var(--verified); }

/* ---------------------------------------------------------------- landing hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s5); align-items: center; }
/* The product line is 45 words and needs two wrap strategies. On a phone the block runs to five
   lines and must pack as tightly as possible (`pretty`; `balance` re-flows it to six). From 600px up
   the block is short enough for `balance` to even the rag and remove the two-word orphan at 768
   (16-14-13-2 -> 12-12-11-10). Measured at 390 / 768 / 900 / 1023 / 1280. */
.hero .sub { text-wrap: pretty; }
@media (min-width: 600px) { .hero .sub { text-wrap: balance; } }
@media (max-width: 1023px) { .hero { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------------------------------------------------------------- table of contents (docs) */
.toc { border: var(--rule); background: var(--white); padding: var(--s3); }
.toc ol { margin: var(--s1) 0 0; padding-left: 1.25em; columns: 2; column-gap: var(--s4); font-size: 16px; }
.toc li { margin: 6px 0; break-inside: avoid; max-width: none; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 599px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------------- prose lists */
main ul, main ol { padding-left: 1.25em; }
main li + li { margin-top: var(--s1); }

/* mobile-chrome-390: shared header/nav/footer rules below 600px. Logo left + CTA right on row one;
   nav centred and wrapping on row two; footer centred; no grid child may force horizontal scroll.
   This is the one source of the shared mobile chrome; the two legal pages ship on another origin and
   carry a verbatim inline copy of this block, which must stay byte-identical to it. */
@media (max-width: 599px) {
  /* padding-BLOCK only: the `padding` shorthand here used to cancel .wrap's padding-inline, which
     put the logo on x=0 and ran the header CTA off the right edge (measured at 320/360/390/480). */
  .nav { flex-wrap: wrap; gap: var(--s1) var(--s2); padding-block: var(--s2) 0; }
  .nav .logo { font-size: 20px; gap: 8px; }
  .nav > .cta { margin-left: auto; padding: 0; background: none; border: 0; color: var(--ink); font-size: 15px;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .nav > .cta:hover { color: var(--verified); background: none; }
  .nav nav {
    order: 3; flex-basis: 100%; margin-left: 0; margin-top: var(--s1);
    justify-content: center; flex-wrap: wrap; gap: var(--s1) var(--s2);
    font-size: 15px; padding: var(--s2) 0; border-top: 1px solid var(--ink);
  }
  .fline { justify-content: center; text-align: center; gap: var(--s1) var(--s2); }
  .fline > span:first-child { flex-basis: 100%; }
  /* `flex-basis: 100%` makes this item span the row, so its `margin: auto` has no free space to
     distribute and the mark landed hard left under two CENTRED lines of footer text. Centre the
     glyph inside the full-width item instead of trying to centre the item. */
  .fline .crystal-foot { margin-left: 0; flex-basis: 100%; display: block; margin: var(--s1) 0 0; }
  .fline .crystal-foot svg { margin-inline: auto; }
  main, .hero, .hero > *, .plans, .plan, .steps, .steps li { min-width: 0; }
  h1 { overflow-wrap: anywhere; }
  .tbl-wrap, pre { overflow-x: auto; }
  .receipt { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
  /* `pre` clips what does not fit (the box scrolls, the reader sees a cut line); `pre-wrap` cannot
     clip: a line too long for the phone wraps. The receipt degrades to wrapped, never to cut. */
  .receipt pre { font-size: 12px; padding: var(--s2) var(--gutter); white-space: pre-wrap; overflow-wrap: break-word; }
  .receipt-head { padding-inline: var(--gutter); }
  /* The product line: 45 words, 239 characters. At 390 (column 358px) the largest size that sets it in
     five lines with no orphan is 15.5px with -.02em tracking and word-spacing (rag 10-9-10-9-7);
     17px and 16px both run to six lines. Hyphenation is not used. */
  .hero .sub { font-size: 15.5px; line-height: 1.45; letter-spacing: -.02em; word-spacing: -.02em; }
}

/* ---------------------------------------------------------------- billing switch (CSS only)
   Two radios sit immediately before .plans so `:checked ~` reaches both the labels and the price
   spans. No script: the pricing page is asserted script-free. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.switch { display: flex; gap: 0; margin-bottom: var(--s4); border: 2px solid var(--ink);
          width: max-content; max-width: 100%; }
.switch label { padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
                display: flex; align-items: center; gap: 8px; line-height: 1; }
.switch label + label { border-left: 2px solid var(--ink); }
.switch .save { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
                letter-spacing: .06em; text-transform: uppercase; color: var(--verified); }
#bill-annual:checked ~ .switch label[for="bill-annual"],
#bill-monthly:checked ~ .switch label[for="bill-monthly"] { background: var(--ink); color: var(--paper); }
#bill-annual:checked ~ .switch label[for="bill-annual"] .save { color: var(--verified-br); }
#bill-annual:focus-visible ~ .switch label[for="bill-annual"],
#bill-monthly:focus-visible ~ .switch label[for="bill-monthly"] { outline: 2px solid var(--verified); outline-offset: 2px; }
#bill-annual:checked ~ .plans .on-monthly,
#bill-monthly:checked ~ .plans .on-annual { display: none; }