/* ---- /features: "Pass rate, graded. Wall time, median." ------------------------
   The one benchmark section under the hero card's "Install now", on the page's own
   starfield (site/features.html carries one marker where it stands; edge/src/site-
   experiments-compare.ts renders every figure, bar and dot). The owner's pick
   (2026-10-21): four row cards under a lede, the Superbot mascot beside each Superbot
   figure (.tmp/mockups/benchmark-wins-promo-card-20261020-1801/v14.png). The section
   sits inside main.features, so the page's own container and gutters give it the hero
   card's width; the hairline above it is the page's chapter rule (.fx-tour has the same).

   Look plan:
   - Palette: site.css tokens only (--bg, --card, --line, --fg, --secondary, --muted,
     --ghost-8), on the starfield. One accent: the page's --accent (blue in dark, the ink
     in light) for Superbot's bar, dots and figure. The other three hues name the vendor
     they belong to (Cursor violet, Perplexity teal, Claude orange, all derived from the
     --storm-* ramp and --warn): data colour for a bar or a dot, never decoration.
   - Type: --font-ui throughout, every figure in tabular numerals. One display step
     declared below (the figure); the rest is the site's --fs-* ladder, the heading on its
     --fs-h2 section step. Copy is lower case, the register of `/` and /features: "superbot"
     as the site spells it, a vendor's product name in its own spelling.
   - Radius: --r-surface (16px) on the four cards and --r-control (8px) on the brand tiles,
     plus --r-pill on the bars. Nothing else is rounded.
   - The one bold thing: the figures, set large beside the mascot tile, with Superbot's bar
     the only accent-coloured fill on the card. -------

   Second section, "included tokens a month, at the same price." (edge/src/site-experiments-
   compare.ts computeSectionHtml, the pick of .tmp/mockups/compute-per-month-comparison-
   section-20261020-1949: v1 Ranked Bars without its not-published rows). It sits under the
   first section's footnote on the same sheet, on `/`, /pricing and /features alike, under its own
   heading in the first section's step (.versus-title), and wears the same look plan:
   - Palette: the same site.css tokens. One accent, the page's --accent, for Superbot's bar,
     the first row of every block. The other bars are neutral grey mixed from --fg and
     --card, never a vendor hue: a block is one ranking, and only Superbot is coloured. A
     bar is drawn to what its source supports and the estimate beyond it in a second tone: a
     point is one solid fill, a range ("400–700M est.") is solid to its sourced low end and
     lighter from there to its estimated high end (--versus-reach: brighter than the grey on the
     dark ground, paler on paper, so on both the range's estimated end is the lighter tone).
   - Type: --font-ui, the plan names at --fs-base, the figures --fs-base 500 in tabular
     numerals, "est." beside a figure and the caption under Superbot's plan name at the
     --fs-xs caption step in the muted tone, the block title the same --fs-lg 600 step as
     the first section's row titles.
   - Radius: --r-surface on the three block cards, --r-control on the marks, --r-pill on the
     bars. Nothing else is rounded.
   - The one bold thing: Superbot's accent bar at the head of every block, the longest bar of
     the card, with every other plan's grey bar to scale beneath it. -------

   Third use, "more done per dollar." on the home page's pillars (site/pillars.html #prices; edge/src/site-experiments-
   compare.ts computeTabsHtml; owner, 2026-10-21: "just take the $20 a month one and then we add tabs for them to see the
   $100 and $200 a month ones"). The same three blocks, wrapped in .versus-tabs instead of the section: the heading and the
   lede are the pillars section's own, and its own hairline and padding stand, so the wrapper draws neither. The look plan is
   the section's, unchanged and with no new token: the same palette (one accent, --accent, on Superbot's bar and on the
   focus ring, grey for every rival), --font-ui with tabular figures, --r-surface on the card, --r-control on the marks and
   --r-pill on the bars and the tab control. The one addition is the control at EVERY width: the price radio group the
   phone tier already shows, as a pill row of three segments (the checked one on --ghost-14 with a --fg outline, so the
   selection never rests on colour alone), and the blocks stacked in ONE grid cell with the two unchecked held
   visibility:hidden, so the copy is always as tall as its tallest block and a switch moves nothing under it. -------- */

.versus, .versus-tabs {
  /* Superbot's own: its bar, dots and figure take the page's accent */
  --versus-own: var(--accent);
  /* vendor hues, derived from the site's storm ramp: darkened toward the tile ground so a
     bar is a quiet fill on the dark cards, not a neon one; Claude's orange sits between the
     ramp's pink and --warn, which has no orange of its own */
  --versus-cursor: color-mix(in srgb, var(--storm-2) 72%, var(--face));
  --versus-perplexity: color-mix(in srgb, var(--storm-0) 66%, var(--tile-bg));
  --versus-claude: color-mix(in oklch, var(--storm-4) 50%, var(--warn));
  /* the figure's own step: the site's --fs-h2 stops at 24px and the cards' figures are the
     one big thing, so it runs 24px to 28px (the page's wide-screen zoom takes it past 32) */
  --versus-fig: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --versus-tile: var(--sp-8);                     /* the mark's tile: 32px, the height of a figure's line */
  /* the ranked bars: a plan's bar is a neutral grey; the name column holds the longest plan name on one line (224px); the room at the end of a line is what the longest bar leaves for its figure (72px) */
  --versus-grey: color-mix(in srgb, var(--fg) 40%, var(--card));
  --versus-reach: color-mix(in srgb, var(--fg) 66%, var(--card));
  --versus-name: calc(var(--sp-12) * 4 + var(--sp-8));
  /* the room at the end of a line for a figure: the widest is a range ("1.0–3.0B est.", about 105px at the base size) whose bar ends at three
     quarters of the block, so the figure still fits the line where a phone's column is narrowest */
  --versus-room: calc(var(--sp-16) + var(--sp-8) + var(--sp-2));
}
/* light: the same hues on paper. Darker, so a bar and a dot keep their contrast against a white card */
html[data-theme="light"] .versus, html[data-theme="light"] .versus-tabs {
  --versus-cursor: color-mix(in srgb, var(--storm-2) 82%, var(--face));
  --versus-perplexity: color-mix(in srgb, var(--storm-0) 52%, var(--tile-bg));
  --versus-claude: color-mix(in oklch, var(--storm-4) 50%, var(--warn));
  --versus-grey: color-mix(in srgb, var(--fg) 46%, var(--card));
  --versus-reach: color-mix(in srgb, var(--fg) 22%, var(--card));
}

/* ================================ the section ================================ */

.versus { position: relative; padding: var(--sp-16) 0 var(--sp-section); border-top: var(--hairline) solid var(--line); }
/* the benchmark section's heading, drawn (2026-10-21, #89): "how superbot compares." in the site's section-heading step,
   the one `/`'s route row sets "how do you want to use superbot?" in (lander-agent.html .route-pick-h: --fs-h2 on
   --lh-h2, tracking tight; weight is site.css's h2 650), so on `/` the two headings read as one ladder and neither
   competes with "get superbot" (--fs-h1). Two selectors deep so a page's own `<scope> h2` rule (features.css
   .feature-view h2) never restyles it. The lede is its quiet second line. */
.versus .versus-title {
  margin: 0 0 var(--sp-3);
  color: var(--fg); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.versus-lede {
  margin: 0 0 var(--sp-6);
  color: var(--secondary); font-size: var(--fs-base); line-height: var(--lh-base);
  text-wrap: balance;
}
/* each sentence is its own unit: the lede breaks between them, never inside one */
.versus-lede span, .versus-sample span { white-space: nowrap; }
.versus-rows, .versus-tiers { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }

/* ---- a row card: what it measures on the left, the two sides to its right ---- */
.versus-row, .versus-tier {
  display: grid; align-items: center; gap: var(--sp-6) var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  background: var(--card); border: var(--hairline) solid var(--line); border-radius: var(--r-surface);
}
.versus-row { grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 1.3fr)); }
.versus-q, .versus-tier-q { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.versus-sample { margin: var(--sp-1) 0 0; color: var(--secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.versus-sample span { display: block; }

/* ---- a side: the tile, the name, the figure; then its bar or its strip ---- */
.versus-side { display: grid; align-content: center; gap: var(--sp-3); min-width: 0; --versus-hue: var(--versus-own); }
.versus-tone-cursor { --versus-hue: var(--versus-cursor); }
.versus-tone-perplexity { --versus-hue: var(--versus-perplexity); }
.versus-tone-claude { --versus-hue: var(--versus-claude); }
.versus-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; min-height: var(--versus-tile); }
.versus-tile { flex: none; display: block; width: var(--versus-tile); height: var(--versus-tile); border-radius: var(--r-control); }
.versus-name { min-width: 0; color: var(--fg); font-size: var(--fs-base); line-height: var(--lh-base); }
.versus-fig {
  flex: none; margin-left: var(--sp-1);
  color: var(--fg); font-size: var(--versus-fig); line-height: 1; font-weight: 600; letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* the bar: a pill track, its fill the side's hue, the width the printed percent */
.versus-bar { height: var(--sp-2); border-radius: var(--r-pill); background: var(--ghost-8); overflow: hidden; }
.versus-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--versus-hue); }

/* the strip: one dot per task on the axis both strips of the card share, a tick at the median */
.versus-strip { display: block; width: 100%; overflow: visible; }
.versus-strip circle { fill: var(--versus-hue); }
.versus-median { stroke: var(--fg); stroke-linecap: round; }

/* a row's own footnote (the code-chat row's three short sentences): under both sides across the card, a sentence kept whole; on a phone each takes its own line */
.versus-rownote { grid-column: 1 / -1; margin: calc(var(--sp-2) * -1) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.versus-rownote span { white-space: nowrap; }

/* ---- the footnote ---- */
.versus-note { margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.versus-month .versus-note, .versus-tabs .versus-note { text-wrap: pretty; }
/* a sentence of the footnote breaks only between its clauses */
.versus-sentence span { white-space: nowrap; }

/* ================== included tokens a month: three blocks of ranked bars ================== */

/* the price control: hidden here (all three blocks stand), shown under 720px on the section (the phone tier below) and at every width on the tabbed copy
   (.versus-tabs, the last block of this sheet) */
.versus-pick { display: none; }

/* a block: its title and the bar scale on the left, the ranked list to its right */
.versus-tier { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.6fr); align-items: start; }
.versus-tier > .versus-what { padding-top: var(--sp-1); }
.versus-ranks { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }

/* a rank: the mark, the plan, then its bar and its figure on one line */
.versus-rank {
  --versus-hue: var(--versus-grey);
  display: grid; grid-template-columns: var(--versus-tile) minmax(0, var(--versus-name)) minmax(0, 1fr);
  align-items: center; gap: var(--sp-3); min-height: var(--versus-tile);
}
.versus-rank-own { --versus-hue: var(--versus-own); }
.versus-mark {
  display: block; width: var(--versus-tile); height: var(--versus-tile); border-radius: var(--r-control);
  outline: var(--hairline) solid var(--line); outline-offset: calc(var(--hairline) * -1);
}
/* a white glyph drawn for a dark ground sits on its own dark tile, in both themes */
.versus-mark-glyph { display: grid; place-items: center; background: var(--tile-bg); }
.versus-mark-glyph img { display: block; width: var(--sp-5); height: var(--sp-5); }
.versus-plan { min-width: 0; color: var(--secondary); font-size: var(--fs-base); line-height: var(--lh-base); white-space: nowrap; }
.versus-rank-own .versus-plan { color: var(--fg); }
/* Superbot's caption: what its allowance is worth at its own API rate, quiet under the plan name */
.versus-sub { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-xs); font-variant-numeric: tabular-nums; }

/* the line: the bar, then its figure right after it. The meter is --share percent of what
   the line leaves once the figure's room is set aside, so every bar of a block is to the
   same scale and the longest one (Superbot's) ends where its figure begins. A bar never draws narrower than a dot (--sp-2, the
   pill's own end caps): a figure under 3% of its block reads as a round mark beside its number, never as a tick */
.versus-line { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.versus-meter {
  flex: none; display: flex; height: var(--sp-3);
  width: calc((100% - var(--versus-room)) * var(--share) / 100); min-width: var(--sp-2);
  border-radius: var(--r-pill); overflow: hidden;
}
/* a point is one solid fill; a range's fill is --solid percent of the meter (its low end) and its second, lighter segment
   (.versus-reach) takes the rest, to the high end: the pill's own clip rounds both ends */
.versus-fill { display: block; flex: none; width: calc(var(--solid, 100) * 1%); height: 100%; background: var(--versus-hue); }
.versus-reach { display: block; flex: 1 1 0; min-width: 0; height: 100%; background: var(--versus-reach); }
.versus-amount {
  flex: none; color: var(--fg); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* "est." after a figure the vendor does not state itself: the same size, lighter and quieter than the number */
.versus-est { color: var(--secondary); font-weight: 400; }

/* Superbot's caption is running copy on every phone and tablet, upright or on its side (the mobile matrix holds it to 14px): keyed on the
   pointer as well as the width, because an iPad on its side is 1024px wide, past the tier below. The 12px caption step is a mouse's alone. */
@media (max-width: 1000px), (pointer: coarse) {
  .versus-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); }
}

/* ---- narrower desktops and tablets (<=1000px): the card's title takes a row of its own,
   the two sides sit side by side under it ---- */
@media (max-width: 1000px) {
  .versus-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-8); }
  .versus-what { grid-column: 1 / -1; }
  .versus-tier { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .versus-tier > .versus-what { padding-top: 0; }
}

/* ---- phone (<=720px, the site's own tier): the sides stack, each full width ---- */
@media (max-width: 720px) {
  .versus { padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
  .versus-row { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .versus-tier { padding: var(--sp-5) var(--sp-4); }
  .versus-side { gap: var(--sp-2); }
  /* a rank takes two lines: the mark beside the plan, the bar and its figure under the plan */
  .versus-rank { grid-template-columns: var(--versus-tile) minmax(0, 1fr); gap: 0 var(--sp-3); padding: var(--sp-2) 0; }
  .versus-mark { grid-row: 1 / span 2; }
  .versus-line { grid-column: 2; }
  /* each sentence of a footnote takes its own line, and both keep --fs-sm: running copy, and the phone floor is 14px. A sentence breaks only between its clauses, each short enough to keep one line at 320 */
  .versus-sentence, .versus-rownote span { display: block; }

  /* One block at a time on a phone, picked with a native radio group (no script, so nothing for the page's CSP to refuse): $20 is checked, the segment
     is the whole label, and the other two blocks are display:none, so a screen reader follows the one on screen. A browser without :has() shows all
     three blocks and no control. */
  @supports selector(:has(a)) {
    .versus-pick { display: grid; }
    .versus-month:has(.versus-radio[value="20"]:checked) .versus-tier:not([data-price="20"]),
    .versus-month:has(.versus-radio[value="100"]:checked) .versus-tier:not([data-price="100"]),
    .versus-month:has(.versus-radio[value="200"]:checked) .versus-tier:not([data-price="200"]) { display: none; }
  }
}
/* ---- the price control's look, once: the phone tier above shows it on the section, the tabbed copy below at every width. Native radios, no script (nothing for
   the page's CSP to refuse): $20 is checked, the segment is the whole label, so a screen reader reads a radio group named Price and the arrow keys move it.
   A browser without :has() shows no control and all the blocks. ---- */
@supports selector(:has(a)) {
  .versus-pick {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1);
    min-width: 0; margin: 0 0 var(--sp-3); padding: var(--sp-1); border: 0; border-radius: var(--r-pill); background: var(--ghost-8);
  }
  .versus-opt {
    position: relative; display: grid; place-items: center; min-height: var(--target-touch);
    border: var(--hairline) solid transparent; border-radius: var(--r-pill);
    color: var(--secondary); font-size: var(--fs-base); line-height: var(--lh-base); font-variant-numeric: tabular-nums; cursor: pointer;
  }
  .versus-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .versus-opt:has(.versus-radio:checked) { background: var(--ghost-14); border-color: var(--fg); color: var(--fg); }
  .versus-opt:has(.versus-radio:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-w); }
}

/* ============ the same blocks, tabbed (the pillars' #prices): the price control at every width ============
   One block at a time at every width, picked with the radio group. The three blocks sit in ONE grid cell (grid-area 1 / 1) and the two that are not
   checked are visibility:hidden (out of the accessibility tree and the pointer's reach, like display:none, but still sized), so the copy is as tall as its
   tallest block at every width and a switch moves nothing outside it. A shorter block keeps its own height at the top of the cell (align-self:
   start): stretched to the tallest it would be a half-empty card, where unstretched the reserve is plain air under it. The $20 block, the tallest
   (seven rows to the $200's three), is the one that shows first. The section above it is the page's: this wrapper adds no hairline, no padding. */
.versus-tabs { width: 100%; min-width: 0; }
@supports selector(:has(a)) {
  .versus-tabs .versus-pick { display: grid; margin-bottom: var(--sp-4); }
  .versus-tabs .versus-tiers { grid-template-columns: minmax(0, 1fr); }
  .versus-tabs .versus-tier { grid-area: 1 / 1; align-self: start; }
  .versus-tabs:has(.versus-radio[value="20"]:checked) .versus-tier:not([data-price="20"]),
  .versus-tabs:has(.versus-radio[value="100"]:checked) .versus-tier:not([data-price="100"]),
  .versus-tabs:has(.versus-radio[value="200"]:checked) .versus-tier:not([data-price="200"]) { visibility: hidden; }
}
/* above the phone tier a full-width segmented control would stretch its three labels across the container: it stays one compact row at the left (a phone's stays full width) */
@media (min-width: 721px) {
  @supports selector(:has(a)) {
    .versus-tabs .versus-pick { width: min(100%, calc(var(--sp-16) * 5)); }
  }
}
/* the narrowest phones (320): a head's tile, name and figure tighten so "superbot code median" and its figure keep one line.
   The band's source line keeps --fs-sm: it is running copy, and a phone's copy floor is 14px (mobile-matrix running copy) */
@media (max-width: 360px) {
  .versus-head { gap: var(--sp-2); }
  .versus-name { font-size: var(--fs-sm); line-height: var(--lh-sm); }
  .versus-plan, .versus-amount { font-size: var(--fs-sm); line-height: var(--lh-sm); }
}