/* ---- TOKENS -------------------------------------------------------------------------------------------
   Every colour comes from /brand/theme.css (--cd-* brand, --a-* terminal names), keyed on
   <html data-theme="light|dark"> (set pre-paint by /brand/theme.js). The aliases resolve on :root, so
   a theme switch re-resolves them. The wallet dialog's styles (wallet-dialog.css) read these same
   names (--panel --text --line --dim --ink --accent --gain --loss --radius). Tints theme.css has no
   token for live in the per-theme blocks below. */
:root {
  --ink: var(--cd-bg);            /* page ground */
  --panel: var(--cd-surface);     /* cards */
  --panel-2: var(--cd-raised);
  --glass: var(--cd-glass);
  --ghost-hover: var(--cd-glass-2);
  --text: var(--cd-text);         /* dark 16.9:1 on panel; light 18.5:1 on white */
  --dim: var(--cd-muted);         /* dark 6.2:1; light 5.9:1 */
  --line: var(--cd-line);
  --line-2: var(--a-line-2);
  --primary: var(--cd-lilac);     /* links: dark 9.7:1; light 5.6:1 */
  --primary-hover: var(--a-accent-hover);
  --holo: var(--cd-holo);         /* fills (primary CTA, badge): pastel stops + DARK text on both themes */
  --holo-h: var(--cd-holo-h);
  --holo-text: var(--a-holo-h);   /* holo as TEXT (wordmark): the light theme deepens the stops */
  --on-holo: var(--cd-on-holo);   /* >= 9.7:1 on every holo stop */
  --btn: var(--cd-lilac);         /* solid lilac fills (billing toggle, skip link) */
  --btn-hover: var(--a-accent-hover);
  --on-btn: var(--a-on-accent);   /* dark #07090D on #A9B8FF 10.4:1; light #FFFFFF on #4C5BD4 5.6:1 */
  --accent: var(--a-focus);       /* focus rings, dialog status edge (non-text, >= 3:1) */
  --gain: var(--cd-gain);
  --loss: var(--cd-loss);
  --warn: var(--cd-warn);         /* also the Bitcoin hover text: dark 12.8:1, light #9A6508 5.0:1 */
  --radius: 14px;
}

/* Page-local tints, DARK (default). Values unchanged from the pre-theme dark look. */
:root, :root[data-theme="dark"] {
  --aqua-ink: var(--cd-aqua);                 /* aqua as TEXT (ticks, savings, current plan): 15.5:1 */
  --aqua-soft: rgba(127, 255, 212, .14);      /* tick / savings chip fill */
  --featured-glow: 0 18px 50px -24px rgba(169, 184, 255, .45);
  --on-btn-soft: rgba(7, 9, 13, .14);         /* savings chip inside the active toggle */
  --edge-hover: var(--cd-muted);
  --tick-off: var(--cd-raised);               /* 'not included' chip */
  --plan-shadow: none;
  --holo-edge: var(--cd-holo);                /* featured plan's 1px edge */
}
/* LIGHT. The media block is the no-JS case (theme.js always writes data-theme). */
:root[data-theme="light"] {
  --aqua-ink: #07765A;                        /* 5.6:1 on white, 4.9:1 on --aqua-soft (theme.css #0B9A76 is 3.6: non-text only) */
  --aqua-soft: rgba(7, 118, 90, .10);
  --featured-glow: 0 18px 50px -24px rgba(76, 91, 212, .35), 0 2px 8px rgba(14, 19, 32, .05);
  --on-btn-soft: rgba(14, 19, 32, .22);
  --edge-hover: #AEB6C6;
  --tick-off: var(--a-sunken);
  --plan-shadow: 0 1px 3px rgba(14, 19, 32, .05), 0 8px 24px -12px rgba(14, 19, 32, .10);
  --holo-edge: var(--a-holo-h);               /* deeper stops: the pastel edge vanishes on white */
  --holo-text: linear-gradient(90deg, #07765A 0%, #4C5BD4 35%, #C8467F 65%, #9A6508 88%, #0A7FA8 100%);   /* deep holo stops for the wordmark on white (each stop >= 4.5:1) */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --aqua-ink: #07765A; --aqua-soft: rgba(7, 118, 90, .10);
    --featured-glow: 0 18px 50px -24px rgba(76, 91, 212, .35), 0 2px 8px rgba(14, 19, 32, .05);
    --on-btn-soft: rgba(14, 19, 32, .22); --edge-hover: #AEB6C6;
    --tick-off: var(--a-sunken); --plan-shadow: 0 1px 3px rgba(14, 19, 32, .05), 0 8px 24px -12px rgba(14, 19, 32, .10);
    --holo-edge: var(--a-holo-h);
    --holo-text: linear-gradient(90deg, #07765A 0%, #4C5BD4 35%, #C8467F 65%, #9A6508 88%, #0A7FA8 100%);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .btn sets display, which would otherwise un-hide "Manage card subscription" */
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font: var(--a-fs-lg)/var(--a-lh-body) 'Sora', var(--a-script, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
/* Parked above the page, never far to one side: a right-to-left page would scroll there (regression 2026-10-04, S4). */
.skip { position: absolute; inset-inline-start: 16px; top: -200px; }
.skip:focus { top: 8px; z-index: 10; background: var(--btn); color: var(--on-btn); padding: var(--a-sp-4) var(--a-sp-5); border-radius: var(--a-r-md); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-6);
  max-width: var(--pub-col); margin: 0 auto; padding: var(--a-sp-6) var(--pub-gut);
  border-bottom: 1px solid var(--line);
}
/* ONE column per page, shared by the header and the content (operator 2026-10-21, K24): the home page's 1240 px with its gutter
   (sp-6, sp-8 from 720 px), so the logo and the header's right end sit on the content's edges and do not move between home,
   /pricing and /checkout. Review round 3: the header alone had moved to 1240 while main kept 1320 / sp-7 (48 px out at 1440). */
:root { --pub-col: 1240px; --pub-gut: var(--a-sp-6); }
@media (min-width: 720px) { :root { --pub-gut: var(--a-sp-8); } }
.brand { display: inline-flex; align-items: center; gap: var(--a-sp-5); color: var(--text); text-decoration: none; font-weight: var(--a-fw-semibold); font-size: var(--a-fs-lg); letter-spacing: -.01em; }
.brand > span { background: var(--holo-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mark { width: 32px; height: 32px; display: block; flex: none; }
.nav { display: flex; align-items: center; gap: var(--a-sp-6); flex-wrap: wrap; justify-content: flex-end; }
.nav-link { color: var(--dim); text-decoration: none; font-size: var(--a-fs-md); }
a.nav-link:hover { color: var(--text); }

/* Four plan cards since 2026-10-07 (Plus): the page runs in the header's column (above); the hero copy, notices and FAQ keep a reading measure. */
main { max-width: var(--pub-col); margin: 0 auto; padding: 0 var(--pub-gut) 64px; }
.hero { text-align: center; padding: 56px 0 var(--a-sp-7); }
.hero h1 { font-size: var(--a-fs-display); line-height: var(--a-lh-tight); margin: 0 0 var(--a-sp-5); letter-spacing: -.5px; }
.hero h1 { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.hero p { color: var(--dim); max-width: 66ch; margin: 0 auto; text-wrap: pretty; }

.notice {
  max-width: 720px; margin: 0 auto var(--a-sp-7); padding: var(--a-sp-5) var(--a-sp-6);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--primary);
  background: var(--panel); border-radius: var(--a-r-md); font-size: var(--a-fs-lg);
}
.notice.is-error { border-inline-start-color: var(--loss); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-sp-6); align-items: stretch; }
/* four plans since 2026-10-07 (Plus): four in a row from 1200 px, two by two on laptops and tablets, one column on phones (below) */
@media (min-width: 701px) and (max-width: 1199px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; }
}
.plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--a-sp-7) var(--a-sp-7) var(--a-sp-7);
  box-shadow: var(--plan-shadow);
}
/* One set of rows for every card in a grid row (subgrid): the names, blurbs, prices, the "Everything in X, plus" lines and the
   pay buttons line up across the cards. Rows: name / blurb / price lines / features / actions / "Your current plan". The cards
   own the vertical gaps (the grid's row gap is 0, else it would open between every row inside a card). Without subgrid the
   cards stay flex columns (above) and only their bottoms line up. */
@supports (grid-template-rows: subgrid) {
  .plans { row-gap: 0; }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .plan > .actions { align-self: start; }
  @media (min-width: 701px) and (max-width: 1199px) { .plans > .plan:nth-child(n + 3) { margin-top: var(--a-sp-7); } }
  @media (max-width: 700px) { .plans > .plan + .plan { margin-top: var(--a-sp-8); } }
}
.price-box { min-width: 0; margin: 0 0 var(--a-sp-6); }
.price-box > :last-child { margin-bottom: 0; }
/* The featured plan wears the holo edge: a 1px gradient border (padding-box / border-box trick) and a soft lilac glow. */
.plan--featured { border: 1px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--holo-edge) border-box;
  box-shadow: var(--featured-glow); }
.plan.is-current { border-color: var(--dim); }
.badge {
  position: absolute; top: -12px; inset-inline-start: 24px; margin: 0; max-width: calc(100% - 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--holo); color: var(--on-holo); font-size: var(--a-fs-sm); font-weight: var(--a-fw-semibold);
  padding: var(--a-sp-2) var(--a-sp-5); border-radius: var(--a-r-pill); letter-spacing: .3px; text-transform: uppercase;
}
.plan h2 { margin: 0 0 var(--a-sp-2); font-size: var(--a-fs-xl); }
.blurb { color: var(--dim); margin: 0 0 var(--a-sp-6); font-size: var(--a-fs-lg); }
.price { margin: 0 0 var(--a-sp-6); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--a-sp-4); }
.amount { font-size: var(--a-fs-4xl); font-weight: var(--a-fw-semibold); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.amount--tbd { font-size: var(--a-fs-2xl); color: var(--dim); font-weight: var(--a-fw-semibold); letter-spacing: 0; }
.per { color: var(--dim); font-size: var(--a-fs-lg); }
.features { list-style: none; margin: 0 0 var(--a-sp-7); padding: 0; display: grid; gap: var(--a-sp-4); flex: 1; align-content: start; }
.features li { display: flex; gap: var(--a-sp-5); align-items: flex-start; font-size: var(--a-fs-lg); }
.features li.no { color: var(--dim); }
.tick { flex: none; width: 20px; height: 20px; border-radius: var(--a-r-md); display: inline-grid; place-items: center; font-size: var(--a-fs-sm); font-weight: var(--a-fw-semibold); }
.yes .tick { background: var(--aqua-soft); color: var(--aqua-ink); }
.no .tick { background: var(--tick-off); color: var(--dim); }
.actions { display: grid; gap: var(--a-sp-4); }
.fine { color: var(--dim); font-size: var(--a-fs-md); margin: var(--a-sp-1) 0 0; }
.current { margin: var(--a-sp-5) 0 0; text-align: center; color: var(--aqua-ink); font-size: var(--a-fs-md); font-weight: var(--a-fw-semibold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-4);
  min-height: 46px; padding: var(--a-sp-2) var(--a-sp-6); border-radius: var(--a-r-md); border: 1px solid transparent; text-align: center;   /* long languages wrap to two lines inside the button */
  font: inherit; font-weight: var(--a-fw-semibold); font-size: var(--a-fs-lg); cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn--small { min-height: 36px; padding: 0 var(--a-sp-6); font-size: var(--a-fs-md); }
.btn--primary { background: var(--holo); color: var(--on-holo); border: 0; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.07) saturate(1.05); }
/* "Pay with crypto" (review 0.9.60 #190: grey on grey read as disabled): an outlined secondary button, full-contrast label, a
   Bitcoin-amber edge and a coin mark in front, so it reads as the second way to pay. A disabled one (no crypto set up) stays faded. */
.btn--btc { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.btn--btc[data-pay="crypto"]::before { content: '\20BF'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font-size: var(--a-fs-md); line-height: 1; }
.btn--btc:hover:not(:disabled) { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
.btn--ghost { background: var(--glass); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--edge-hover); background: var(--ghost-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* a disabled primary drops the holo fill (a faded gradient reads as broken), keeps its shape */
.btn--primary:disabled { background: var(--glass); color: var(--dim); border: 1px solid var(--line); opacity: .8; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.btn:focus-visible, a:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }

/* Trust row (review 0.9.60 #192): facts only, each one checked against the terms, the refund policy and the payment code. No
   member counts, quotes or logos of people: those need the operator (results P_public.md). The home page has the same row. */
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-sp-4) var(--a-sp-7); margin: var(--a-sp-7) auto 0; padding: 0; max-width: 980px; }
.trust li { display: inline-flex; align-items: center; gap: var(--a-sp-4); font-size: var(--a-fs-md); color: var(--dim); }
.trust li svg { flex: none; color: var(--aqua-ink); }
.trust a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.trust a:hover { color: var(--text); }
/* the maker line under the trust row (operator 2026-10-21): the company, then the live founding-seat count while the offer runs */
.built-by { margin: var(--a-sp-5) auto 0; text-align: center; font-size: var(--a-fs-sm); color: var(--dim); }
.built-by .built-sep { margin: 0 var(--a-sp-2); }
/* the header's way into the app, the home page's "Open the terminal" button (review 0.9.60 #56/#71: one CTA on every public page) */
.btn--open { min-height: 36px; padding: 0 var(--a-sp-6); font-size: var(--a-fs-md); }
.top-links { display: flex; align-items: center; gap: var(--a-sp-2); }
.top-links a { padding: var(--a-sp-2) var(--a-sp-4); border-radius: var(--a-r-pill); color: var(--dim); text-decoration: none; font-size: var(--a-fs-md); font-weight: var(--a-fw-medium); }
.top-links a:hover, .top-links a[aria-current="page"] { color: var(--text); background: var(--glass); }
@media (max-width: 1079px) { .top-links { display: none; } }

.faq { max-width: 760px; margin: 64px auto 0; }
.faq h2 { font-size: var(--a-fs-xl); margin: 0 0 var(--a-sp-6); }
.faq dl { margin: 0; display: grid; gap: var(--a-sp-2); }
.faq dt { font-weight: var(--a-fw-semibold); margin-top: var(--a-sp-5); }
.faq dd { margin: 0; color: var(--dim); }

/* The footer is the site footer (/brand/site-footer.css, src/web/site-footer.ts). */

@media (max-width: 700px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }   /* card spacing: the subgrid block above */
}
@media (max-width: 480px) {
  .top { padding-block: var(--a-sp-5); }
  main { padding: 0 var(--a-sp-6) 48px; }
  .hero { padding: 36px 0 var(--a-sp-6); }
  .nav-link:not(#co-back) { display: none; }   /* checkout keeps its way back on a phone (review 0.9.52 A7c) */
  .btn--open { display: none; }   /* a phone keeps logo + account on one row; the Beginner card has "Open the terminal" (review 0.9.60) */
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Monthly / yearly switch (operator 2026-09-29: crypto is yearly only) */
.billing-toggle { display: flex; justify-content: center; gap: var(--a-sp-2); width: max-content; max-width: 100%; margin: 0 auto var(--a-sp-7);
  padding: var(--a-sp-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--a-r-pill); }
.billing-toggle button { font: inherit; font-size: var(--a-fs-lg); font-weight: var(--a-fw-semibold); color: var(--dim); background: transparent; border: 0;
  border-radius: var(--a-r-pill); padding: var(--a-sp-4) var(--a-sp-6); cursor: pointer; display: inline-flex; align-items: center; gap: var(--a-sp-4); }
.billing-toggle button[aria-checked="true"] { background: var(--btn); color: var(--on-btn); }
.billing-toggle button:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.toggle-save { font-size: var(--a-fs-sm); font-weight: var(--a-fw-semibold); padding: var(--a-sp-1) var(--a-sp-4); border-radius: var(--a-r-pill); background: var(--aqua-soft); color: var(--aqua-ink); }
.billing-toggle button[aria-checked="true"] .toggle-save { background: var(--on-btn-soft); color: var(--on-btn); }
.plans[data-interval="month"] [data-show="year"], .plans[data-interval="year"] [data-show="month"] { display: none !important; }
.tax-note { margin: -10px 0 var(--a-sp-6); font-size: var(--a-fs-sm); color: var(--dim); }
.save { margin: -14px 0 var(--a-sp-6); font-size: var(--a-fs-md); color: var(--aqua-ink); min-height: 1.4em; }
.save--plain { color: var(--dim); }   /* "$384 billed yearly", Beginner's "No card needed" (screenshot review 2026-10-19) */
/* the line under "Start free month": what happens after it (screenshot review 2026-10-19 #2) */
.cta-sub { margin: calc(-1 * var(--a-sp-2)) 0 var(--a-sp-2); font-size: var(--a-fs-sm); color: var(--dim); text-align: center; }
/* sales tax / VAT, once under the cards */
.tax-once { grid-column: 1 / -1; margin: var(--a-sp-6) 0 0; text-align: center; font-size: var(--a-fs-sm); color: var(--dim); }
/* the crypto chooser (pricing.html #crypto-dialog) */
.cx-list { display: grid; gap: var(--a-sp-4); margin: var(--a-sp-5) 0; }
/* 0.9.74 (review, B7): a wallet button names its coins and networks on a second line ("USDC / USDT on Ethereum, Base") */
.cx-list .btn:has(.cx-net) { flex-direction: column; gap: 2px; padding-block: var(--a-sp-2); height: auto; }
.cx-list .cx-net { display: block; font-size: var(--a-fs-sm); font-weight: var(--a-fw-regular, 400); color: var(--dim); line-height: 1.35; text-align: center; }

/* Features listed but not built yet. */
em.soon { font-style: normal; font-size: 0.72em; font-weight: var(--a-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cd-muted); border: 1px solid var(--cd-line); border-radius: var(--a-r-pill); padding: 1px var(--a-sp-4); margin-inline-start: var(--a-sp-4); vertical-align: 1px; white-space: nowrap; }

/* ---- Plan limits on the cards + the full comparison (tiers agent 2026-09-30; table redesign 2026-10-02) ----
   Tokens only (no literal colours; tints are color-mix() of theme tokens, so they follow light / dark).
   Cards: a short list of highlights (src/billing/pricing.ts planHighlights). Table: every PLAN_ROW of src/plans.ts. */
.features-wrap { flex: 1; display: flex; flex-direction: column; margin: 0 0 var(--a-sp-7); }
.features-wrap .features { margin: 0; flex: 0 1 auto; }
.features li .lbl { flex: 1; min-width: 0; }
.plus { margin: 0 0 var(--a-sp-5); font-size: var(--a-fs-md); font-weight: var(--a-fw-semibold); color: var(--dim); }
.see-all { margin: var(--a-sp-6) 0 0; font-size: var(--a-fs-md); }
.see-all a { font-weight: var(--a-fw-semibold); text-decoration: none; }
.see-all a:hover { text-decoration: underline; }

/* The comparison sits inside the plans grid (server-rendered after the cards) and spans every column. */
.compare { grid-column: 1 / -1; margin-top: 56px; min-width: 0;
  --cmp-head: var(--panel-2);                                               /* the sticky header: opaque */
  --cmp-feat: color-mix(in srgb, var(--btn) 7%, transparent);               /* the recommended column's band */
  --cmp-feat-head: color-mix(in srgb, var(--btn) 12%, var(--panel-2));
  --cmp-you: color-mix(in srgb, var(--aqua-ink) 50%, transparent);          /* the member's column: two hairlines */
  --cmp-hover: color-mix(in srgb, var(--text) 4%, transparent);
}
.compare-h { font-size: var(--a-fs-2xl); margin: 0 0 var(--a-sp-6); text-align: center; letter-spacing: -.01em; }
/* Desktop: no scroller (overflow: clip is not a scroll container), so the header sticks to the window.
   Phones (below): the wrapper scrolls both ways, the header and the first column stick inside it. */
.compare-scroll { position: relative; /* the containing block of the cells' .sr labels, so the wrapper clips them (no page-wide sideways scroll) */
  overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--plan-shadow); }
.compare-scroll:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }

.cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--a-fs-lg); }
.cmp-col-label { width: 32%; }
.cmp-col { width: 17%; }                 /* four equal plan columns (32 + 4 x 17 = 100), whatever their content: no shift when the prices switch */
.cmp th, .cmp td { padding: var(--a-sp-5) var(--a-sp-6); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.cmp tbody tr:last-child > * { border-bottom: 0; }

/* header: tag slot, plan name, price, one small button */
.cmp thead th, .cmp thead td { position: sticky; top: 0; z-index: 3; background: var(--cmp-head); vertical-align: top;
  padding: var(--a-sp-6) var(--a-sp-5); border-bottom: 1px solid var(--line-2); }
.cmp-plan { font-weight: var(--a-fw-semibold); }
.cmp-tag { display: block; width: max-content; max-width: 100%; min-height: 20px; margin: 0 auto var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-4); border-radius: var(--a-r-pill);
  font-size: var(--a-fs-xs); line-height: 14px; font-weight: var(--a-fw-semibold); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-tag:empty { visibility: hidden; }   /* keeps its height: every header cell is equally tall */
.cmp-tag--popular { background: var(--holo); color: var(--on-holo); }
.cmp-tag--you { background: var(--aqua-soft); color: var(--aqua-ink); box-shadow: inset 0 0 0 1px var(--cmp-you); }
.cmp-name { display: block; font-size: var(--a-fs-lg); line-height: var(--a-lh-tight); }
.cmp-price { display: block; min-height: 21px; margin-top: var(--a-sp-1); font-size: var(--a-fs-md); line-height: 21px; font-weight: var(--a-fw-semibold); color: var(--dim); font-variant-numeric: tabular-nums; }
.cmp-price small { font-size: var(--a-fs-sm); font-weight: var(--a-fw-medium); }
.cmp-cta { width: 100%; max-width: 172px; min-height: 34px; margin-top: var(--a-sp-5); padding: var(--a-sp-2) var(--a-sp-5); font-size: var(--a-fs-md); line-height: var(--a-lh-tight); text-align: center; }
/* 0.9.74 (review: vi "Bat dau thang mien / phi" left one word alone on the second line): a two-line button label is balanced */
.cmp-cta { text-wrap: balance; }
.cmp-cta.is-yours { cursor: default; pointer-events: none; background: none; border-color: color-mix(in srgb, var(--dim) 45%, transparent); color: var(--dim); }
.cmp-cta.is-none { visibility: hidden; }

/* first column */
.cmp th[scope="row"] { text-align: start; font-weight: var(--a-fw-semibold); }
.cmp-label { display: block; line-height: var(--a-lh-snug); }
.cmp-hint { display: block; margin-top: var(--a-sp-2); font-size: var(--a-fs-sm); line-height: var(--a-lh-snug); font-weight: var(--a-fw-regular); color: var(--dim); }

/* section labels: one label cell and an empty cell per plan, so the column bands run through */
.cmp-group th, .cmp-group td { padding: var(--a-sp-7) var(--a-sp-6) var(--a-sp-4); border-bottom: 1px solid var(--line-2); }
.cmp-group th { text-align: start; font-size: var(--a-fs-xs); line-height: var(--a-lh-snug); font-weight: var(--a-fw-semibold); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
/* the ChartScript section's link to the documentation site (2026-10-08) */
.cmp-docs { margin-inline-start: var(--a-sp-4); font-weight: var(--a-fw-medium); letter-spacing: normal; text-transform: none; color: var(--primary); white-space: nowrap; }
.cmp-docs::after { content: ' \2197'; }

/* values: numbers, words, "Unlimited", ticks and dashes share one centre line */
.cmp td .val { font-variant-numeric: tabular-nums; }
.cmp .val--num { font-size: var(--a-fs-lg); font-weight: var(--a-fw-semibold); }
.cmp .val--txt { display: inline-block; font-size: var(--a-fs-md); line-height: var(--a-lh-snug); font-weight: var(--a-fw-semibold); }
.cmp .val--unl { font-size: var(--a-fs-md); font-weight: var(--a-fw-semibold); color: var(--aqua-ink); }
.cmp td .tick, .cmp td .dash { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; font-size: var(--a-fs-sm); font-weight: var(--a-fw-semibold); }
.cmp td .tick { background: var(--aqua-soft); color: var(--aqua-ink); }
.cmp td .dash { color: var(--dim); font-weight: var(--a-fw-medium); font-size: var(--a-fs-lg); }

/* the recommended plan: one soft band down the column, a holo bar on top, the "Most popular" tag */
.cmp tbody .cmp-featured { background-color: var(--cmp-feat); }
.cmp thead .cmp-featured { background: var(--holo-edge) top / 100% 3px no-repeat, var(--cmp-feat-head); }
/* the member's plan: two hairlines down the whole column and the "Your plan" tag (pricing.js) - never a box per cell */
.cmp .is-current { box-shadow: inset 1px 0 0 var(--cmp-you), inset -1px 0 0 var(--cmp-you); }

.cmp tbody tr:not(.cmp-group):hover > * { background-image: linear-gradient(var(--cmp-hover), var(--cmp-hover)); }

.compare-fine { text-align: center; margin: var(--a-sp-5) auto 0; max-width: 760px; }
.plans[data-interval="month"] .cmp [data-show="year"], .plans[data-interval="year"] .cmp [data-show="month"] { display: none !important; }

@media (max-width: 700px) {
  /* the cards stay one narrow column; the comparison uses the full width */
  .plans { max-width: none; }
  .plans > .plan { width: 100%; max-width: 480px; justify-self: center; }
  .compare { margin-top: var(--a-sp-7); }
}
@media (max-width: 760px) {
  /* sideways scroll stays inside the table; the header and the first column stay in view */
  .compare-scroll { overflow: auto; max-height: min(80vh, 720px); overscroll-behavior-x: contain; }
  .cmp { min-width: 720px; font-size: var(--a-fs-md); }
  .cmp-col-label { width: 28%; }
  .cmp-col { width: 18%; }
  .cmp th, .cmp td { padding: var(--a-sp-5) var(--a-sp-5); }
  .cmp thead th, .cmp thead td { padding: var(--a-sp-5) var(--a-sp-4); }
  .cmp-group th, .cmp-group td { padding: var(--a-sp-6) var(--a-sp-5) var(--a-sp-4); }
  /* the pinned cells draw their own right and bottom lines: a pinned cell paints over its neighbour's border at fractional pixel ratios */
  .cmp th[scope="row"], .cmp-group th, .cmp-corner { position: sticky; left: 0; z-index: 2; background-color: var(--panel); box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .cmp-group th { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line-2); }
  .cmp tbody tr:last-child th[scope="row"] { box-shadow: inset -1px 0 0 var(--line); }
  .cmp tbody th[scope="row"], .cmp-group th { border-bottom-color: transparent; }   /* the inset line above replaces it (no double line) */
  .cmp thead .cmp-corner { z-index: 4; background-color: var(--cmp-head); }
  /* right to left: the pinned first column sits on the right, its divider on its left edge */
  [dir="rtl"] .cmp th[scope="row"], [dir="rtl"] .cmp-group th, [dir="rtl"] .cmp-corner { left: auto; right: 0; }
  [dir="rtl"] .cmp th[scope="row"], [dir="rtl"] .cmp-corner { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  [dir="rtl"] .cmp-group th { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line-2); }
  [dir="rtl"] .cmp tbody tr:last-child th[scope="row"] { box-shadow: inset 1px 0 0 var(--line); }
  .cmp-hint { font-size: var(--a-fs-sm); }
  .cmp .val--txt, .cmp .val--unl { font-size: var(--a-fs-md); }
}
/* Phones (review 2026-10-13): the 720 px table showed ONE plan at a time beside the pinned labels, and nothing said it
   scrolled. Here each feature's name takes a line of its own and the four plans sit under it side by side: every plan
   is on screen at once and nothing scrolls sideways. The plan names stay pinned to the top of the window; the buttons
   live on the cards above. */
@media (max-width: 560px) {
  .compare-scroll { overflow: visible; max-height: none; }
  .cmp, .cmp thead, .cmp tbody { display: block; min-width: 0; }
  .cmp colgroup, .cmp-corner, .cmp-group td, .cmp-cta, .cmp-tag { display: none; }
  .cmp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the plan names stay pinned to the top of the window while the table scrolls by (review 0.9.72: a deep row showed bare numbers);
     a shadow marks the pinned row. The section headings no longer repeat the names (picture review 0.9.72: under the pinned
     header they read as a second header row - the pinned one already names every column wherever the table is) */
  .cmp thead { position: sticky; top: 0; z-index: 3; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
    box-shadow: 0 6px 12px -8px color-mix(in srgb, var(--ink) 70%, transparent); }
  .cmp thead th { position: static; padding: var(--a-sp-5) var(--a-sp-2); }
  .cmp-name { font-size: var(--a-fs-md); }
  .cmp-price { margin-top: 0; font-size: var(--a-fs-sm); }
  .cmp th[scope="row"], .cmp-group th { grid-column: 1 / -1; position: static; background: none; box-shadow: none; }
  .cmp tbody th[scope="row"] { padding: var(--a-sp-5) var(--a-sp-5) 0; border-bottom: 0; text-align: center; }
  .cmp-group th { padding: var(--a-sp-6) var(--a-sp-5) var(--a-sp-4); text-align: center; border-bottom-color: var(--line-2); background-color: var(--cmp-hover); }
  .cmp td { padding: var(--a-sp-4) var(--a-sp-2) var(--a-sp-5); }
  .cmp tbody tr:last-child > td { border-bottom: 0; }
  .cmp .val--num { font-size: var(--a-fs-md); }
  .cmp .val--txt, .cmp .val--unl { font-size: var(--a-fs-sm); }
  .cmp .is-current { box-shadow: none; }
  [dir="rtl"] .cmp th[scope="row"], [dir="rtl"] .cmp-group th { box-shadow: none; }
  /* the recommended column (screenshot review 2026-10-19): the full-width feature names cut its band into stripes, so on a
     phone it is marked in the header only, and its "Recommended" tag stays (the other tags and the buttons live on the cards) */
  .cmp tbody .cmp-featured { background-color: transparent; }
  .cmp thead .cmp-tag { display: block; min-height: 16px; margin-bottom: var(--a-sp-2); padding: 1px var(--a-sp-2); font-size: 9px; line-height: 14px; letter-spacing: 0; text-transform: none; }   /* every column keeps the slot: the names stay level */
}
@media (prefers-reduced-motion: no-preference) {
  .cmp tbody tr > * { transition: background-color .12s; }
}

/* ONE offer banner under the hero (screenshot review 2026-10-19: two banners merged): the free month and the founding offer,
   rendered by the server (pricing.ts offerBannerHtml). */
.offer-line, .hero .offer-line { margin: var(--a-sp-5) auto 0; display: inline-block; max-width: 760px; padding: var(--a-sp-4) var(--a-sp-6); border-radius: var(--a-r-pill);
  font-size: var(--a-fs-md); color: var(--text, var(--cd-text)); background: var(--cd-glass); border: 1px solid var(--cd-line); text-wrap: balance; }
.offer-line strong { color: var(--cd-lilac); font-weight: var(--a-fw-semibold); }
.offer-line .offer-left { color: var(--aqua-ink); font-weight: var(--a-fw-semibold); }
.offer-line a { color: var(--cd-lilac); font-weight: var(--a-fw-semibold); white-space: nowrap; }
/* Sign-up free month line under the hero (signed-out visitors only; rendered by the server). The .hero-scoped selectors outrank
   `.hero p { margin: 0 auto }` so the top gap applies (sweep 2026-10-19 S4). */
.trial-line, .hero .trial-line { margin: var(--a-sp-5) auto 0; display: inline-block; padding: var(--a-sp-4) var(--a-sp-6); border-radius: var(--a-r-pill); font-size: var(--a-fs-md);
  color: var(--text, var(--cd-text)); background: var(--cd-glass); border: 1px solid var(--cd-line); }
.trial-line a { color: var(--cd-lilac); font-weight: var(--a-fw-semibold); }
/* Founding-member offer (src/billing/founding.ts): under the hero while seats remain, for everyone; server-rendered. */
.founding-line, .hero .founding-line { margin: var(--a-sp-4) auto 0; max-width: 720px; padding: var(--a-sp-4) var(--a-sp-6); border-radius: var(--a-r-md); font-size: var(--a-fs-md);
  color: var(--text, var(--cd-text)); background: var(--cd-glass); border: 1px solid var(--cd-line); }
.founding-line strong { color: var(--cd-lilac); font-weight: var(--a-fw-semibold); }

/* Large screens (operator 2026-10-07: 2000-2560 px monitors left 340-620 px empty each side). From 1760 px the page runs up to
   1640 px (cards ~386 px); the comparison follows the container. 1759 px and below are unchanged. */
@media (min-width: 1760px) {
  body[data-page="pricing"] { --pub-col: 1640px; }   /* the header widens with the cards (one column); /checkout keeps 1240 */
  .plan { padding: var(--a-sp-8); }
  .plan h2 { font-size: var(--a-fs-2xl); }
  .badge { inset-inline-start: var(--a-sp-8); }
}