/* ── RUO Radar — the instrument, and the band that points at it ──────
 *
 * Operator, 2026-09-16: "i want sexier for the radar site and i want
 * our main page highlighting it."
 *
 * TWO BLOCKS, ONE FILE, ON PURPOSE. `.radar-site` dresses
 * ruoradar.com; `.radar-band` is the section a brand storefront puts on
 * its homepage. They share a visual language deliberately — the band's
 * whole job is to make a stranger click through to the site, and a
 * hand-off between two surfaces that look unrelated reads as a
 * redirect to somebody else's page. Keeping them in one file is also
 * the only way a change to one is made in sight of the other.
 *
 * ── The register: an instrument, not a magazine ─────────────────────
 *
 * Figures are the product here, so figures get the strongest treatment
 * in the file: monospace, `tabular-nums`, and enough size that a reader
 * scanning a column never has to align digits by eye. Prose is the
 * caption. That is the opposite weighting to a storefront and it is
 * why this does not simply reuse a brand sheet.
 *
 * ── No webfont, anywhere ────────────────────────────────────────────
 *
 * Every face is a system stack. Our own CSP is `default-src 'self'`,
 * and this repo has already lost every Google Ads conversion for days
 * to a subresource that was provably present in the HTML and silently
 * blocked in the browser. A font that fails that way on a page whose
 * entire job is to be trusted by a stranger fails invisibly, in
 * production, where it costs most. There is nothing to self-host, no
 * CDN request and no licence tier.
 *
 * ── The cascade rules that have already cost this business money ────
 *
 * `.radar-band` is layered over a brand sheet, and every brand sheet
 * carries generic element rules inside its own scope:
 *
 *   .peprally a  { color: var(--color-accent) }     (0,1,1)
 *   .peprally p  { color: …; font-size: 16px }      (0,1,1)
 *
 * A single class is (0,1,0) and LOSES to both — which shipped 1:1
 * contrast on four brands' checkout buttons, and rendered an auth
 * headline at 16px against a declared 1.9rem. So, without exception:
 *
 *   · every selector names the block root  (.radar-band .radar-band__x)
 *   · every anchor rule carries the `a`    (.radar-band a.radar-band__x)
 *   · no bare element is ever styled
 *
 * `.radar-site` has no brand sheet beneath it and needs none of this,
 * but it follows the same shape so that a rule moved between the two
 * blocks cannot arrive broken.
 *
 * ── Brand tokens only, in the band ──────────────────────────────────
 *
 * `.radar-band` hardcodes NO colour of its own. Every value is a
 * `--checkout-*` token, which is the one family all five brands
 * declare — the same reason `shared/auth.css` chose it. The CTA fill is
 * `--cta-accent`, never `--color-accent`: PepRally's #E8550F carries
 * white at 3.66:1 and #C1470C at 5.01:1, and that distinction is the
 * entire reason `--cta-accent` exists.
 *
 * ── Breakpoints are min-width only ──────────────────────────────────
 *
 * Mobile is the base declaration and desktop is the enhancement, so a
 * query that never matches leaves a page that works rather than a page
 * whose layout was only ever declared inside a query. That failure
 * mode — a `grid-area` referenced at the base width and declared only
 * inside a media query — stacked an entire auth form into row 1 at
 * 390px. There are no named grid areas in this file at all.
 */

/* ════════════════════════════════════════════════════════════════════
   1 · ruoradar.com — the instrument
   ════════════════════════════════════════════════════════════════════ */

/* ── Dark is the BASE, not a preference ─────────────────────────────
 *
 * Operator, 2026-09-16: *"get rid of the fucking white background on
 * shit... make it fucking readable. highlight with a good color. also
 * do not make everything so transparent."*
 *
 * The first cut of this file was light-by-default with `#ffffff`
 * panels, flipping dark only on `prefers-color-scheme: dark`. Most
 * operating systems report `light`, so in practice almost every
 * visitor would have got the white page he is objecting to — a default
 * nobody chose is how a decision ships by accident, which is the same
 * mistake `MarketScope::DEFAULT` made when it shipped `us_and_unknown`
 * before the numbers existed.
 *
 * So dark is declared on the block itself and there is NO automatic
 * switch. The light theme still exists and still works, reachable by
 * stamping `data-theme="light"` on the ELEMENT CARRYING `.radar-site`
 * — which is the `<body>`, not the root. The selector below is
 * `.radar-site[data-theme="light"]`, so `<html data-theme="light">`
 * matches nothing and changes nothing, silently: a `grid-area`
 * reference to an area nobody declared, in attribute form. A note in
 * CLAUDE.md said "the root" and a browser harness written to it
 * measured the DARK palette and reported it as light. A data site
 * somebody wants to print or read in sunlight should be able to; it is
 * simply not chosen on the visitor's behalf.
 * `radar_contrast_guard_test` reads the themed class out of this sheet
 * and asserts the layout puts it on `<body>`.
 *
 * This is a deliberate departure from the house rule that both themes
 * follow the OS. An explicit operator instruction outranks a house
 * default, and the cost is bounded: nothing is removed, one thing stops
 * being automatic.
 *
 * ── And nothing load-bearing is painted with alpha ─────────────────
 *
 * "do not make everything so transparent" is the other half. Every
 * colour below is a solid value. Where a surface needs to sit above
 * another it gets its own opaque token, not an rgba() over whatever
 * happens to be behind it — which is how a panel's contrast becomes a
 * function of its parent and stops being measurable at all. */
.radar-site {
  --radar-paper:  #0b0f0e;
  --radar-panel:  #141c1a;
  --radar-ink:    #eef4f1;
  --radar-ink-2:  #c2cfca;
  --radar-muted:  #93a29c;
  --radar-rule:   #25322e;
  --radar-rule-2: #1b2422;
  --radar-accent: #2dd4bf;
  --radar-good:   #4ade80;
  --radar-warn:   #fbbf24;
  --radar-alarm:  #ff8d82;
  --radar-cta:    #2dd4bf;
  --radar-cta-ink:#06100e;
  --radar-highlight: #12302b;
  /* The brand dashboard's sample storefront (2026-10-21): a WHITE shop
   * page, in every theme, because that is what the seller's product page
   * looks like under the badge. Solid, measured by the guard. */
  --radar-bp-shop:       #ffffff;
  --radar-bp-shop-ink:   #18181b;
  --radar-bp-shop-muted: #52525b;
  --radar-bp-shop-rule:  #d4d4d8;
  /* The sample brand report's chart marks (2026-10-15) — every mark on
   * /brand-report/sample is painted from these, never from the markup. */
  --radar-sr-cover:     #0f1715;
  --radar-sr-band:      #26332f;
  --radar-sr-band-mid:  #3e5a53;
  --radar-sr-line:      #eef4f1;
  --radar-sr-tick:      #93a29c;
  --radar-sr-you:       #fbbf24;
  --radar-sr-target:    #2dd4bf;
  --radar-sr-up:        #4ade80;
  --radar-sr-down:      #ff8d82;
  --radar-sr-dot:       #7d8f88;
  --radar-sr-track:     #25322e;
  --radar-sr-empty:     #1b2422;
  --radar-sr-stamp-ink: #06100e;
  --radar-sr-top1:      #99f6e4;
  --radar-sr-top5:      #2dd4bf;
  --radar-sr-top10:     #14b8a6;
  --radar-sr-top25:     #0d9488;
  --radar-sr-half:      #4b5c57;
  --radar-sr-below:     #33423e;
  --radar-sr-ink-top1:  #06100e;
  --radar-sr-ink-top5:  #06100e;
  --radar-sr-ink-top10: #06100e;
  --radar-sr-ink-top25: #06100e;
  --radar-sr-ink-half:  #eef4f1;
  --radar-sr-ink-below: #eef4f1;

  --radar-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radar-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter",
                 "Noto Serif Display", "Noto Serif", Georgia, "DejaVu Serif", serif;
  --radar-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  /* Operator, 2026-09-16: "AND THE SMALL TEXT AT THE BOTTOM INCREASE
   * THE WIDTH OF THE FUCKING COLUM TO MAKE SENSE". The colophon is
   * three dense paragraphs of disclosure at 66ch, which on a desktop
   * left two thirds of the line empty and made a short explanation read
   * as a long one. */
  --radar-measure: 86ch;
  --radar-wrap: 1240px;
  --radar-rail: 300px;

  margin: 0;
  background: var(--radar-paper);
  color: var(--radar-ink);
  font-family: var(--radar-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Explicit, both directions, so a toggle can always get back to where
   it came from. `[data-theme="dark"]` restates the base rather than
   relying on it — a theme that works only by absence breaks the moment
   the base changes. */
.radar-site[data-theme="dark"] {
  --radar-paper:  #0b0f0e;
  --radar-panel:  #141c1a;
  --radar-ink:    #eef4f1;
  --radar-ink-2:  #c2cfca;
  --radar-muted:  #93a29c;
  --radar-rule:   #25322e;
  --radar-rule-2: #1b2422;
  --radar-accent: #2dd4bf;
  --radar-good:   #4ade80;
  --radar-warn:   #fbbf24;
  --radar-alarm:  #ff8d82;
  --radar-cta:    #2dd4bf;
  --radar-cta-ink:#06100e;
  --radar-highlight: #12302b;
  /* The brand dashboard's sample storefront (2026-10-21): a WHITE shop
   * page, in every theme, because that is what the seller's product page
   * looks like under the badge. Solid, measured by the guard. */
  --radar-bp-shop:       #ffffff;
  --radar-bp-shop-ink:   #18181b;
  --radar-bp-shop-muted: #52525b;
  --radar-bp-shop-rule:  #d4d4d8;
  /* The sample brand report's chart marks (2026-10-15) — every mark on
   * /brand-report/sample is painted from these, never from the markup. */
  --radar-sr-cover:     #0f1715;
  --radar-sr-band:      #26332f;
  --radar-sr-band-mid:  #3e5a53;
  --radar-sr-line:      #eef4f1;
  --radar-sr-tick:      #93a29c;
  --radar-sr-you:       #fbbf24;
  --radar-sr-target:    #2dd4bf;
  --radar-sr-up:        #4ade80;
  --radar-sr-down:      #ff8d82;
  --radar-sr-dot:       #7d8f88;
  --radar-sr-track:     #25322e;
  --radar-sr-empty:     #1b2422;
  --radar-sr-stamp-ink: #06100e;
  --radar-sr-top1:      #99f6e4;
  --radar-sr-top5:      #2dd4bf;
  --radar-sr-top10:     #14b8a6;
  --radar-sr-top25:     #0d9488;
  --radar-sr-half:      #4b5c57;
  --radar-sr-below:     #33423e;
  --radar-sr-ink-top1:  #06100e;
  --radar-sr-ink-top5:  #06100e;
  --radar-sr-ink-top10: #06100e;
  --radar-sr-ink-top25: #06100e;
  --radar-sr-ink-half:  #eef4f1;
  --radar-sr-ink-below: #eef4f1;
}

.radar-site[data-theme="light"] {
  --radar-paper:  #eef1ef;
  --radar-panel:  #f8faf9;
  --radar-ink:    #0e1311;
  --radar-ink-2:  #3b4542;
  --radar-muted:  #5c6a65;
  --radar-rule:   #ccd4d0;
  --radar-rule-2: #dfe5e2;
  --radar-accent: #0b6259;
  --radar-good:   #136c34;
  --radar-warn:   #94450a;
  --radar-alarm:  #a81f17;
  --radar-cta:    #0b6259;
  --radar-cta-ink:#ffffff;
  --radar-highlight: #d6ece7;
  /* The brand dashboard's sample storefront (2026-10-21): a WHITE shop
   * page, in every theme, because that is what the seller's product page
   * looks like under the badge. Solid, measured by the guard. */
  --radar-bp-shop:       #ffffff;
  --radar-bp-shop-ink:   #18181b;
  --radar-bp-shop-muted: #52525b;
  --radar-bp-shop-rule:  #d4d4d8;
  --radar-sr-cover:     #ffffff;
  --radar-sr-band:      #dfe5e2;
  --radar-sr-band-mid:  #b5c4bf;
  --radar-sr-line:      #0e1311;
  --radar-sr-tick:      #5c6a65;
  --radar-sr-you:       #94450a;
  --radar-sr-target:    #0b6259;
  --radar-sr-up:        #136c34;
  --radar-sr-down:      #a81f17;
  --radar-sr-dot:       #74827d;
  --radar-sr-track:     #ccd4d0;
  --radar-sr-empty:     #eef1ef;
  --radar-sr-stamp-ink: #ffffff;
  --radar-sr-top1:      #0b6259;
  --radar-sr-top5:      #0f766e;
  --radar-sr-top10:     #14b8a6;
  --radar-sr-top25:     #99f6e4;
  --radar-sr-half:      #d5dedb;
  --radar-sr-below:     #eef1ef;
  --radar-sr-ink-top1:  #ffffff;
  --radar-sr-ink-top5:  #ffffff;
  --radar-sr-ink-top10: #06100e;
  --radar-sr-ink-top25: #06100e;
  --radar-sr-ink-half:  #0e1311;
  --radar-sr-ink-below: #0e1311;
}

.radar-site .radar-wrap {
  max-width: var(--radar-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.radar-site .radar-measure { max-width: var(--radar-measure); }

/* ── Masthead ─────────────────────────────────────────────────────── */

.radar-site .radar-site__masthead {
  border-bottom: 1px solid var(--radar-rule);
  background: var(--radar-panel);
}

/* ── Vertical padding as LONGHANDS, and that is load-bearing ────────
 *
 * This element is also a `.radar-wrap`, which sets `padding: 0 20px`.
 * A `padding` SHORTHAND here has the same specificity and comes later,
 * so it silently resets the horizontal padding to zero — and the whole
 * masthead runs to both edges of a phone.
 *
 * Nothing warns. The rule is present, correct and applied; it is the
 * one before it that was destroyed. Found by pointing Chrome at 390px
 * after every static check in `radar_contrast_guard_test` was green,
 * which is the same way the auth surface's collapsed grid was found. */
.radar-site .radar-site__mast-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.radar-site .radar-site__mark {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--radar-accent);
}

.radar-site a.radar-site__wordmark {
  font-family: var(--radar-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--radar-ink);
  white-space: nowrap;
}

.radar-site a.radar-site__wordmark .radar-site__wordmark-2 { color: var(--radar-accent); }

/* The eyebrow carries live coverage or it does not render. A label
   that says only "prices" is decoration; one that says how many
   listings from how many sellers is the reason to keep reading. */
.radar-site .radar-site__eyebrow {
  margin-left: auto;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--radar-muted);
  font-variant-numeric: tabular-nums;
}

.radar-site .radar-site__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--radar-accent);
  vertical-align: baseline;
}

/* ── Page head ────────────────────────────────────────────────────── */

/* Longhands, for the reason given on `.radar-site__mast-inner`: this is
 * also a `.radar-wrap`, and a shorthand wipes its horizontal padding,
 * which runs every headline and paragraph off the left edge of a phone. */
.radar-site .radar-site__main { padding-top: 34px; padding-bottom: 10px; }

.radar-site .radar-site__h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--radar-ink);
  /* Compound labels are SCRAPED. `bpc-157-tb-500-ghk-cu-kpv` is a real
     one, and an unbreakable 26-character word at 30px is wider than a
     phone — which pushes the whole page sideways rather than wrapping. */
  overflow-wrap: anywhere;
}

.radar-site .radar-site__standfirst {
  margin: 0 0 6px;
  max-width: var(--radar-measure);
  font-size: 17px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__note {
  margin: 10px 0 0;
  max-width: var(--radar-measure);
  font-size: 13.5px;
  color: var(--radar-muted);
}

.radar-site .radar-site__back {
  margin: 0 0 14px;
  font-family: var(--radar-mono);
  font-size: 12.5px;
}

.radar-site a.radar-site__link { color: var(--radar-accent); }

/* ── What a member is watching (alerts are a Rally Pass perk) ────────
   A <button> wears the browser's white face unless painted; `__stop` is
   a button and carries its element, never `__link` (that is an anchor
   rule). Tokens only, block root on every rule. */
.radar-site .radar-site__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-width: var(--radar-measure);
}
.radar-site .radar-site__list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--radar-rule);
  color: var(--radar-text);
  font-size: 14px;
}
.radar-site .radar-site__list-item:last-child { border-bottom: 1px solid var(--radar-rule); }
.radar-site .radar-site__inline { display: inline; margin: 0; }
/* A standalone CTA under prose: its own row, clear of the paragraph above. */
.radar-site .radar-site__cta-row { margin-top: 22px; margin-bottom: 6px; }

/* ── Watch and Pro, offered as cards (2026-10-03) ─────────────────── */
.radar-site .radar-site__tiers { margin-top: 26px; max-width: var(--radar-measure); }
.radar-site .radar-site__tier {
  margin: 12px 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--radar-rule);
  border-left: 3px solid var(--radar-accent);
  background: var(--radar-panel);
  color: var(--radar-text);
}
.radar-site .radar-site__tier .radar-site__h3 { margin: 0 0 6px; font-size: 17px; color: var(--radar-text); }
.radar-site .radar-site__tier .radar-site__note { margin-top: 6px; }
.radar-site .radar-site__tier .radar-site__inline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.radar-site button.radar-site__stop {
  font: inherit;
  font-size: 12.5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--radar-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.radar-site button.radar-site__stop:hover,
.radar-site button.radar-site__stop:focus-visible { color: var(--radar-text); background: transparent; }

/* ── The stat band ────────────────────────────────────────────────── */

.radar-site .radar-site__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 1px;
  margin: 26px 0 8px;
  background: var(--radar-rule);
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  overflow: hidden;
}

.radar-site .radar-site__stat {
  background: var(--radar-panel);
  padding: 16px 18px;
}

.radar-site .radar-site__stat-n {
  display: block;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--radar-ink);
}

.radar-site .radar-site__stat-l {
  display: block;
  margin-top: 4px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* ── Section headings ─────────────────────────────────────────────── */

.radar-site .radar-site__h2 {
  margin: 34px 0 10px;
  font-size: 13px;
  font-family: var(--radar-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
  font-weight: 600;
}

/* ── Picker ───────────────────────────────────────────────────────── */

.radar-site .radar-site__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 4px;
}

.radar-site .radar-site__picker-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* The find field shares the select's shell so the two controls read as
 * one unit. Block-root selector and brand tokens only — no literal
 * colour, and no `opacity`, so its contrast is a property of the rule
 * rather than of whatever sits behind it. */
.radar-site .radar-site__input,
.radar-site .radar-site__select,
.radar-site .radar-site__button {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  background: var(--radar-panel);
  color: var(--radar-ink);
}

.radar-site .radar-site__select { min-width: 250px; }

/* A readable name is longer than a grouping key ("GLOW (BPC-157 + GHK-Cu +
 * TB-500) — 3 sellers"), and a select sizes itself to its longest option:
 * on a 390px phone that took the whole page sideways. The picker's columns
 * may shrink, and the select never grows past them. */
.radar-site .radar-site__picker > div { min-width: 0; max-width: 100%; }
.radar-site .radar-site__select { max-width: 100%; }

.radar-site .radar-site__input {
  min-width: 220px;
  /* A search input on iOS renders a native clear affordance; the
   * appearance reset keeps it consistent with the select beside it. */
  -webkit-appearance: none;
  appearance: none;
}

.radar-site .radar-site__input::placeholder {
  /* A token, not a faded ink colour: a placeholder painted with alpha
   * takes its value from the panel behind it and its contrast stops
   * being measurable. */
  color: var(--radar-muted);
}

.radar-site .radar-site__button {
  background: var(--radar-accent);
  border-color: var(--radar-accent);
  color: var(--radar-panel);
  font-weight: 600;
  cursor: pointer;
}

/* ── Tables ───────────────────────────────────────────────────────── */

/* Every table lives in one of these. A table that overflows the body
   makes the whole PAGE scroll sideways on a phone, which reads as
   broken rather than as wide. */
.radar-site .radar-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
  -webkit-overflow-scrolling: touch;
}

.radar-site .radar-site__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.radar-site .radar-site__th {
  text-align: left;
  padding: 11px 14px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
  border-bottom: 1px solid var(--radar-rule);
  white-space: nowrap;
}

.radar-site .radar-site__td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--radar-rule-2);
  color: var(--radar-ink);
}

.radar-site .radar-site__row:last-child .radar-site__td { border-bottom: 0; }

.radar-site .radar-site__num {
  text-align: right;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.radar-site .radar-site__quiet { color: var(--radar-muted); }

/* ── Where else the same sellers can be compared ──────────────────────
 *
 * Operator, 2026-09-17: "Seo the fuck out of it so we get traffic."
 *
 * Every compound page linked one internal destination, so the long tail
 * was 150 leaves off one hub. This is the mesh. Every selector names
 * the block root and the anchor rule carries `a.`, the two rules this
 * sheet already lives by — a lone class is (0,1,0) and loses the
 * typography as well as the colour, and an unqualified anchor loses to
 * the link colour, which is how four brands shipped invisible checkout
 * text. Every value is a token this sheet already declares, so the
 * block follows the theme rather than forking it. */

.radar-site .radar-site__related {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--radar-rule);
  border: 1px solid var(--radar-rule);
}

.radar-site .radar-site__related-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--radar-panel);
  font-size: 14px;
  /* A scraped compound label is an unbreakable word:
   * `bpc-157-tb-500-ghk-cu-kpv` is wider than a phone and would push
   * the page sideways rather than wrap. Same defect the masthead had. */
  overflow-wrap: anywhere;
}

.radar-site .radar-site__related-item .radar-site__quiet {
  font-family: var(--radar-mono);
  font-size: 12px;
  white-space: nowrap;
}

/* ── Research: a bibliography, never a feature ────────────────────────
 *
 * Other people's words about a molecule, listed plainly: a title, a
 * journal, a year. One column, because a title is a sentence and a grid
 * of sentences is unreadable on a phone. The framing line is body ink,
 * not a muted caption — it is the part of this block that has to be
 * read. Block root on every selector; tokens only. */

.radar-site .radar-site__research-frame {
  margin: 6px 0 10px;
  color: var(--radar-ink);
  font-size: 14px;
  line-height: 1.5;
}

.radar-site .radar-site__research-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--radar-rule);
}

.radar-site .radar-site__research-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--radar-panel);
  border-top: 1px solid var(--radar-rule);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.radar-site .radar-site__research-item:first-child { border-top: 0; }

.radar-site .radar-site__research-item .radar-site__quiet {
  font-family: var(--radar-mono);
  font-size: 12px;
}

/* ── A link must announce itself ─────────────────────────────────────
 *
 * Operator, 2026-09-17: "i should know something is clickable not
 * guess. highlight the row as well."
 *
 * This was `color: var(--radar-ink)` — the SAME colour as body text —
 * with `text-decoration: none` and a hairline in `--radar-rule`, which
 * is the table's own divider colour. And there was no `:hover` rule on
 * the table at all, so nothing happened when you pointed at anything.
 * On the one surface whose job is to be navigated.
 *
 * Tokens only, and no `opacity`: a colour painted with alpha takes its
 * value from whatever is behind it, and its contrast stops being a
 * property of the rule. */
.radar-site a.radar-site__compound {
  color: var(--radar-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--radar-accent);
  cursor: pointer;
}

.radar-site a.radar-site__compound:hover {
  color: var(--radar-ink);
  border-bottom-color: var(--radar-ink);
}

/* Keyboard users get the same cue. A hover-only affordance is invisible
 * to anyone tabbing, and this page is a reference people navigate. */
.radar-site a.radar-site__compound:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* "highlight the row as well" — forty rows of near-identical numbers
 * need the eye anchored to one line. The whole row is a pointer, so the
 * affordance is the row rather than eight characters of compound name. */
.radar-site .radar-site__row { cursor: pointer; }

.radar-site .radar-site__row:hover .radar-site__td {
  background: var(--radar-panel);
}

.radar-site .radar-site__row:hover .radar-site__compound {
  color: var(--radar-ink);
  border-bottom-color: var(--radar-ink);
}

.radar-site .radar-site__ours {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid var(--radar-warn);
  border-radius: 4px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-warn);
}

/* ── The certificate cell — the column nobody else publishes ──────── */

.radar-cert {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--radar-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Zero of N is a MEASURED finding, not an absence, so it is the loudest
   thing in the table. Never rendered unless the field cleared the
   assessed quorum — an unasked question rendered as a zero is the most
   flattering wrong number available to us. */
.radar-cert--none { color: var(--radar-alarm, #b3261e); }
.radar-cert--some { color: var(--radar-good, #15803d); }
.radar-cert--ours { color: var(--radar-accent, #0f766e); }

/* ── The win callout ──────────────────────────────────────────────── */

.radar-site .radar-site__win {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--radar-good);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--radar-panel);
}

.radar-site .radar-site__win-h {
  margin: 0 0 8px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-good);
}

.radar-site .radar-site__win-body { margin: 0 0 6px; }
.radar-site .radar-site__win-foot { margin: 0; font-size: 13.5px; color: var(--radar-muted); }
.radar-site .radar-site__save { color: var(--radar-good); }

/* ── The one advertisement, and the colophon ──────────────────────── */

/* ── The one advertisement, and all of it is the target ──────────────
 *
 * Operator, 2026-09-17: "for our ad on ruo radar make the whole thing
 * clickable to bacwater" — "and have it stand out".
 *
 * It used to be a block of text with one small link at the bottom, in
 * the rail beside a long price table. The single thing this site sells
 * was the least clickable element on the page.
 *
 * Now the whole card is the anchor: `display: block`, so the padding is
 * inside the target and there is no dead margin a click can land in.
 * It lifts on hover so it reads as a control rather than a notice. */
.radar-site a.radar-site__ad,
.radar-site .radar-site__ad {
  margin: 38px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
}

.radar-site .radar-site__ad-body {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__colophon {
  margin-top: 34px;
  padding: 22px 0 46px;
  border-top: 1px solid var(--radar-rule);
  font-size: 13.5px;
  color: var(--radar-muted);
}

.radar-site .radar-site__colophon-p { max-width: var(--radar-measure); }

/* ── The report form, and what the page says back ──────────────────
 *
 * Operator, 2026-09-16: *"allow people to report prices that we can
 * verify later."*
 *
 * Every value here is a `--radar-*` token already declared on this
 * sheet. No literal, and no `grid-area` name — a reference to an area
 * declared only inside a media query auto-places every child into row
 * one, which is how an entire auth form once rendered on top of
 * itself at 390px. The grid is `auto-fit`, so it needs no breakpoint
 * at all and there is no query to get wrong.
 */

.radar-site .radar-site__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 20px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
}

.radar-site .radar-site__field { min-width: 0; }

/* Spans the grid regardless of how many columns `auto-fit` resolved
   to, so the submit row never ends up sharing a line with a text
   input on a wide screen. */
.radar-site .radar-site__field--wide { grid-column: 1 / -1; }

.radar-site .radar-site__input {
  font: inherit;
  font-size: 15px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  background: var(--radar-paper);
  color: var(--radar-ink);
}

.radar-site .radar-site__hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--radar-muted);
}

/* A textarea is an input that happens to be tall. It carries
   `radar-site__input` as well, so every border, background and colour
   comes from the one rule — a second copy would be a second place for
   the field to stop matching the form around it. */
.radar-site .radar-site__textarea {
  min-height: 92px;
  resize: vertical;
}

/* ── The checkbox group ────────────────────────────────────────────
 *
 * A `<fieldset>` draws a border and a legend gap of its own in every
 * browser, and neither is wanted inside a panel that already has one.
 * Reset rather than overridden, because a partial reset leaves the
 * legend's inline-start offset behind and the label sits a few pixels
 * off the fields above it.
 */
.radar-site .radar-site__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.radar-site .radar-site__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  cursor: pointer;
}

/* `accent-color` is the one property that recolours a native control
   without replacing it — a hand-drawn checkbox loses the keyboard
   behaviour and the screen-reader role that come free with the real
   one, which is a worse trade than a browser-default tick. */
.radar-site .radar-site__checkbox {
  flex: none;
  margin-top: 3px;
  accent-color: var(--radar-accent);
}

.radar-site .radar-site__check-text {
  font-size: 14.5px;
  color: var(--radar-ink);
}

/* Where the slot actually appears, under its own name. Supporting
   copy takes `--radar-muted`, the same token `__hint` takes and the
   one this sheet's contrast is already measured against. */
.radar-site .radar-site__check-where {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--radar-muted);
}

/* ── The two doors ────────────────────────────────────────────────
 *
 * Operator, 2026-09-17: *"put an inquiry on radar in case peptide
 * brand want to buy a report or notifications. Also maybe people or
 * customers want notifications."*
 *
 * Two audiences, two cards, and no grid-area names anywhere: a
 * `grid-area` is a REFERENCE, and a reference to an area declared only
 * inside a media query auto-places every child into row one — which is
 * how an entire auth form once rendered on top of itself at 390px.
 * `auto-fit` needs no breakpoint at all, so there is no query to get
 * wrong: one column on a phone, two the moment there is room.
 *
 * Every value is an existing `--radar-*` token and nothing is painted
 * with alpha. The CTA carries NO colour of its own — it also wears
 * `.radar-site__link`, whose rule already paints the accent and
 * already carries the `a.` qualifier, so there is one rule deciding
 * the colour of a link on this site rather than two that can drift. */
.radar-site .radar-site__doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 18px 0 6px;
}

.radar-site .radar-site__door {
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.radar-site .radar-site__door-eyebrow {
  margin: 0 0 6px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--radar-accent);
}

.radar-site .radar-site__door-h {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--radar-ink);
}

.radar-site .radar-site__door-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--radar-ink-2);
}

.radar-site a.radar-site__door-cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
}

/* A flash is the only thing on this page that reports an outcome, so
   it is drawn as a panel rather than as a line of body text — the
   tone carries the verdict for anyone skimming. */
.radar-site .radar-site__flash {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--radar-rule);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--radar-panel);
  font-size: 15px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__flash--ok { border-left-color: var(--radar-good); }
.radar-site .radar-site__flash--bad { border-left-color: var(--radar-alarm); }

.radar-site .radar-site__errors {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--radar-alarm);
}

.radar-site :focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .radar-site .radar-site__main { padding-top: 46px; padding-bottom: 10px; }
  .radar-site .radar-site__stats { margin: 32px 0 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   2 · The storefront band — a brand pointing at the instrument
   ════════════════════════════════════════════════════════════════════

   Not one colour below is this block's own. Every value resolves to a
   `--checkout-*` token the brand declares, so the same markup is Ember
   on PepRally and champagne on Glam without a brand-specific rule.
   ════════════════════════════════════════════════════════════════════ */

.radar-band {
  --rb-bg:     var(--checkout-summary-bg, var(--checkout-bg, #14141c));
  --rb-panel:  var(--checkout-card-bg, var(--checkout-bg, #1c1c26));
  --rb-text:   var(--checkout-text, #ffffff);
  --rb-muted:  var(--checkout-muted, #94a3b8);
  --rb-rule:   var(--checkout-border, #2a2a35);
  --rb-accent: var(--checkout-accent, #c1470c);
  /* The FILL, which is a different question from the accent. A brand's
     accent is chosen to be seen; a fill has to carry text on top of it.
     PepRally's #E8550F carries white at 3.66:1 and fails AA; its
     --cta-accent #C1470C carries it at 5.01:1. */
  --rb-cta:    var(--cta-accent, var(--checkout-accent, #c1470c));
  /* The ON-FILL colour, and the one literal in this block.
   *
   * `--checkout-text` is the PAGE's text colour, and on the four light
   * brands it is a dark ink — #111111 on MyPeptides, #2C2018 on Glam.
   * Painting that on a saturated fill measures 1.97:1 and 2.86:1: the
   * invisible-text defect, reintroduced by reaching for the nearest
   * plausible token. The first draft of this file did exactly that and
   * the guard beside it caught it.
   *
   * White is not a brand decision here, it is the contrast pair
   * `--cta-accent` was chosen for. Measured against every brand's fill:
   * PepRally 5.01, Glam 5.54, MyPeptides 9.60, SurfPeptides 4.90,
   * BacWater 9.44. All AA. A test reads this value out of this file and
   * re-measures it per brand, so a brand changing its accent fails in
   * CI rather than in front of a customer. */
  --rb-cta-text: #ffffff;
  --rb-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  display: block;
  padding: 40px 20px;
  background: var(--rb-bg);
  border-top: 1px solid var(--rb-rule);
  border-bottom: 1px solid var(--rb-rule);
}

.radar-band .radar-band__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.radar-band .radar-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--rb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-accent);
}

.radar-band .radar-band__mark {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--rb-accent);
}

/* Coverage LEADS. It is a count of our own database — always true,
   always renderable, and the number that makes this look like an
   operation rather than a spreadsheet. The per-dose field beneath it is
   a narrower fact and reads as the whole thing when it goes first. */
.radar-band .radar-band__lede {
  margin: 0;
  font-size: clamp(21px, 2.9vw, 30px);
  line-height: 1.26;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--rb-text);
}

.radar-band .radar-band__sub {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rb-muted);
}

.radar-band .radar-band__item {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.radar-band .radar-band__compound {
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-text);
}

/* The generic name the market prints, beside our own word for it.
   Without this the heading is a page about a product the reader cannot
   look up anywhere else. */
.radar-band .radar-band__generic {
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rb-muted);
}

.radar-band .radar-band__panel {
  padding: 22px 24px;
  background: var(--rb-panel);
  border: 1px solid var(--rb-rule);
  border-radius: 12px;
}

.radar-band .radar-band__verdict {
  margin: 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.45;
  color: var(--rb-text);
}

.radar-band .radar-band__position {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rb-muted);
  font-variant-numeric: tabular-nums;
}

.radar-band .radar-band__asof {
  margin: 16px 0 0;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

.radar-band .radar-band__actions {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radar-band a.radar-band__cta {
  display: inline-block;
  padding: 14px 26px;
  background: var(--rb-cta);
  border: 1px solid var(--rb-cta);
  border-radius: 4px;
  color: var(--rb-cta-text);
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.radar-band a.radar-band__cta--ghost {
  background: transparent;
  border-color: var(--rb-rule);
  color: var(--rb-text);
}

.radar-band :focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .radar-band { padding: 58px 24px; }

  /* Two explicit columns, declared here and nowhere else. No named
     grid areas anywhere in this file — a `grid-area` is a REFERENCE,
     and a reference to something declared only inside a media query
     resolves to nothing at the base width rather than complaining,
     which stacked an entire auth form into row 1 at 390px. */
  .radar-band .radar-band__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-site *,
  .radar-site *::before,
  .radar-site *::after,
  .radar-band *,
  .radar-band *::before,
  .radar-band *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── The reading column, and the rail beside it ─────────────────────
 *
 * Operator, 2026-09-16: "PUT OUR FUCKING ADD ON THE SIDE OR SOMETHING
 * NOT AT THE FUCKING BOTTOM" — "ALWAYS PRESENT EVEN WHEN YOU SCROLL".
 *
 * Single column by default and two columns only from 1080px up. The
 * base width declares the single-column layout explicitly rather than
 * relying on a media query to undo a desktop grid: a `grid-area`
 * reference with no `grid-template-areas` at the base width
 * auto-places every child into row 1, which is how an auth page once
 * rendered its headline, form and benefit list stacked on top of one
 * another at 390px.
 *
 * `.radar-site__shell` is ALSO a `.radar-wrap`, which owns the page's
 * only gutter via `padding: 0 20px`. No padding shorthand here — a
 * shorthand at equal specificity and later source order silently
 * resets that gutter and runs the whole page to both edges of a phone.
 * Longhands only. */
.radar-site .radar-site__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.radar-site .radar-site__rail { min-width: 0; }

@media (min-width: 1080px) {
  .radar-site .radar-site__shell {
    grid-template-columns: minmax(0, 1fr) var(--radar-rail);
    gap: 34px;
    align-items: start;
  }

  /* Sticky so it stays with the reader down a long price table. `top`
   * clears the masthead; `align-items: start` on the grid is what lets
   * a sticky child work at all — a stretched grid item is already as
   * tall as its track and has nothing to stick within. */
  .radar-site .radar-site__rail {
    position: sticky;
    top: 22px;
  }
}

/* ── The sweep ──────────────────────────────────────────────────────
 *
 * Operator, 2026-09-16: "can you make some kind of radar sweeping
 * effect?"
 *
 * A conic gradient rotating behind the mark, masked to a circle. It is
 * decoration on an element that already carries `aria-label`, so it is
 * `aria-hidden` and carries no information a reader needs.
 *
 * No `opacity` on any TEXT token — the sweep is its own layer, so its
 * translucency is a property of the sweep and never of a colour whose
 * contrast has been measured. Contrast arithmetic elsewhere is
 * unaffected.
 *
 * Honoured `prefers-reduced-motion`: a permanently rotating element is
 * a vestibular trigger, and a radar that makes somebody ill is not a
 * radar anybody reads. */
.radar-site .radar-site__mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radar-site .radar-site__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(11, 98, 89, 0.55) 0deg,
    rgba(11, 98, 89, 0.12) 42deg,
    rgba(11, 98, 89, 0) 96deg,
    rgba(11, 98, 89, 0) 360deg
  );
  animation: radar-sweep 3.6s linear infinite;
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .radar-site .radar-site__sweep { animation: none; }
}

.radar-site a.radar-site__ad {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-color: var(--radar-accent);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.radar-site a.radar-site__ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--radar-rule-2);
}

.radar-site a.radar-site__ad:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   3 · The two advertisements — and both of them are ours
   ════════════════════════════════════════════════════════════════════

 * Operator, 2026-09-17: *"I want our bacwater and our current rally
 * advertised. Especially on the compound page."* — *"And I want the ad
 * for both backwater and peprally to look sexy."*
 *
 * The BacWater ad was a paragraph of text in a hairline box. The Rally
 * was not on the radar at all. On a page that publishes 49,619 prices,
 * the two things the site actually sells were its least designed
 * elements — which is the same complaint that moved the ad out of the
 * footer, arriving one level up.
 *
 * ── One visual family, two roles ───────────────────────────────────
 *
 * Both cards share the same construction: an accent rule along the top
 * edge, a monospace eyebrow carrying the disclosure, figures or points
 * in the instrument register, and a filled CTA. Two designs for one
 * idea is how a fix lands on one surface and the other keeps the bug —
 * the cart-drawer CTA lesson, and the reason the homepage Rally
 * section reuses the Rally page's own shape.
 *
 * They differ where their JOB differs. The Rally card leads with
 * MONEY, because a deal with no dollar figure on it is a percentage of
 * a number the reader has not been shown. The BacWater card leads with
 * a REASON, because nobody arrives at a price table wanting diluent.
 *
 * ── Placement is not a style question ──────────────────────────────
 *
 * The Rally card is in the READING COLUMN, not the rail. The rail is
 * sticky from 1080px and collapses BELOW `<main>` under it — which is
 * exactly the "at the fucking bottom" failure the ad was moved out of.
 * In the flow it is the first thing after the heading at 390px and at
 * 1280px alike, and it only ever renders on the one compound page the
 * rally is genuinely for.
 *
 * ── Every rule follows the site block's shape ──────────────────────
 *
 * `.radar-site` has no brand sheet beneath it, so it is not exposed to
 * the (0,1,1) trap the band is. It follows the same discipline anyway,
 * because a rule moved between the two blocks must not arrive broken:
 * every selector names the block root, every anchor rule carries the
 * `a`, no `opacity` on text, and every colour is a `--radar-*` token
 * that this sheet defines.
 *
 * ── The CTA fill is its own token pair, per theme ──────────────────
 *
 * `--radar-accent` is #2dd4bf in dark and #0b6259 in light, so a single
 * ink colour painted on it fails AA in one direction or the other —
 * which is precisely how the band's CTA shipped at 1.97:1 by reaching
 * for the nearest plausible token. `--radar-cta` / `--radar-cta-ink`
 * are declared as a PAIR in all three token blocks and measured
 * together: 10.37:1 dark, 7.23:1 light. */

/* ── The Rally card ────────────────────────────────────────────────── */

.radar-site .radar-rally {
  margin: 22px 0 30px;
}

.radar-site a.radar-rally__card {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 20px 22px 18px;
  border: 1px solid var(--radar-accent);
  border-radius: 14px;
  background: var(--radar-panel);
  color: var(--radar-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

/* The accent rule along the top edge. A pseudo-element rather than a
 * border, so it can carry the two-token gradient without the border
 * radius clipping a colour stop into a corner. */
.radar-site a.radar-rally__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--radar-accent), var(--radar-warn));
}

.radar-site a.radar-rally__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px var(--radar-rule-2);
}

.radar-site a.radar-rally__card:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 3px;
}

.radar-site .radar-rally__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.radar-site .radar-rally__eyebrow-t { color: var(--radar-warn); }

/* A painted element with no text inside it, so `display` is
 * load-bearing: a `div:empty { display: none }` reset elsewhere on the
 * platform takes an empty block out of the flow entirely, and a dot
 * that is not drawn is indistinguishable from a rule nobody wrote. */
.radar-site .radar-rally__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--radar-warn);
}

/* The disclosure. Quiet, and never faded: `--radar-muted` measures
 * 6.51:1 on the panel in dark and 6.44:1 in light, so it is legible
 * rather than merely present — an `opacity` here would make the one
 * line 16 CFR §255 requires the first thing to disappear on a dim
 * phone. */
.radar-site .radar-rally__tag,
.radar-site .radar-site__ad-label {
  margin-left: auto;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

.radar-site .radar-rally__h {
  margin: 12px 0 6px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--radar-ink);
  /* A scraped compound label is an unbreakable word:
   * `bpc-157-tb-500-ghk-cu-kpv` at this size is wider than a phone and
   * pushes the whole page sideways rather than wrapping. */
  overflow-wrap: anywhere;
}

.radar-site .radar-rally__lede {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 14.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-rally__urgent { color: var(--radar-warn); }

/* `auto-fit` with a floor, so there is no breakpoint to get wrong: four
 * figures at 1280px, two and two at 390px, and nothing declared only
 * inside a query. */
.radar-site .radar-rally__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px 18px;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-rally__fig { min-width: 0; }

.radar-site .radar-rally__fig-k {
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* Figures are the product on this site, so they get the instrument
 * register: monospace and `tabular-nums`, so a reader comparing two
 * numbers never has to align digits by eye. */
.radar-site .radar-rally__was,
.radar-site .radar-rally__now,
.radar-site .radar-rally__saving,
.radar-site .radar-rally__breakdown {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--radar-ink);
}

.radar-site .radar-rally__clock {
  margin: 3px 0 0;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.radar-site .radar-rally__was {
  font-size: 18px;
  color: var(--radar-muted);
  text-decoration: line-through;
}

.radar-site .radar-rally__now {
  font-size: 30px;
  font-weight: 600;
  color: var(--radar-warn);
}

.radar-site .radar-rally__saving {
  font-size: 18px;
  color: var(--radar-good);
}

.radar-site .radar-rally__pct {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--radar-good);
}

.radar-site .radar-rally__clock {
  font-size: 18px;
  color: var(--radar-ink);
}

.radar-site .radar-rally__deadline {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* ── Both CTAs, one rule set ───────────────────────────────────────── */

.radar-site .radar-rally__cta,
.radar-site .radar-site__ad-cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.radar-site .radar-rally__foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--radar-muted);
}

/* The offer's own terms, on their own line. It declares NO colour: it
 * sits inside __foot and inherits that tone, which is already measured.
 * A second colour here would be a second thing to keep passing AA. */
.radar-site .radar-rally__terms {
  display: block;
  margin-top: 4px;
}

/* ── Our offer, pinned above the table — 2026-10-23 ─────────────────
 *
 * Operator: "THE TOOL SHOULD HELP ME TO POSITION MYSELF AND SELL OUR
 * LEGEND NOT INFLUENCE PEOPLE TO FUCK OFF TO OTHER SELLERS".
 *
 * Not an anchor: it carries two doors (buy, certificate), and an anchor
 * inside an anchor is invalid markup. Every selector names the block
 * root, every anchor rule carries `a.`, and every colour is a token the
 * rally card already measures. */

.radar-site .radar-ours {
  margin: 22px 0 30px;
}

.radar-site .radar-ours__card {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 18px;
  border: 1px solid var(--radar-accent);
  border-radius: 14px;
  background: var(--radar-panel);
  color: var(--radar-ink);
}

.radar-site .radar-ours__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--radar-accent), var(--radar-good));
}

.radar-site .radar-ours__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.radar-site .radar-ours__eyebrow-t { color: var(--radar-accent); }

.radar-site .radar-ours__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--radar-accent);
}

.radar-site .radar-ours__tag {
  margin-left: auto;
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

.radar-site .radar-ours__h {
  margin: 12px 0 6px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

.radar-site .radar-ours__claim {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--radar-ink);
}

.radar-site .radar-ours__cert {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 14.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-ours__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px 18px;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-ours__fig { min-width: 0; }

.radar-site .radar-ours__fig-k {
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

.radar-site .radar-ours__now,
.radar-site .radar-ours__was,
.radar-site .radar-ours__mid {
  display: block;
  margin: 2px 0 0;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--radar-ink);
}

.radar-site .radar-ours__now {
  font-size: 30px;
  font-weight: 600;
  color: var(--radar-good);
}

.radar-site .radar-ours__was {
  font-size: 18px;
  color: var(--radar-muted);
  text-decoration: line-through;
}

.radar-site .radar-ours__mid { font-size: 18px; }

.radar-site .radar-ours__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.radar-site a.radar-ours__cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.radar-site a.radar-ours__cta:focus-visible,
.radar-site a.radar-ours__certlink:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 3px;
}

.radar-site a.radar-ours__certlink {
  color: var(--radar-ink);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.radar-site .radar-ours__foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--radar-muted);
}

/* ── Against what: the standing line under the Rally card ──────────
 *
 * Operator, 2026-09-17: "Ensuring we are the best bang for buck" —
 * "Open Reta on radar to 10mg and show us sitting in the best fucking
 * spot for bang for the buck."
 *
 * One sentence, not a second card. The card above it already carries
 * the offer; saying the same thing twice a few centimetres apart reads
 * as padding and undermines the exact seriousness the number exists to
 * create — the reason `price_proof_sentence` takes `scale: false`.
 *
 * It is NOT an anchor and deliberately paints no accent fill, so the
 * `a.` trap does not apply; every selector still names the block root,
 * because this sheet is layered over a brand sheet wherever the
 * storefront band renders and `.peprally p` at (0,1,1) takes the
 * TYPOGRAPHY as well as the colour from a lone class.
 *
 * Measured on both token blocks. Dark: ink-2 on paper 12.00:1, the
 * eyebrow's warn 11.55:1, the as-of muted 7.24:1. Light: 8.73:1,
 * 5.93:1, 4.98:1. No value is translucent — a colour painted with
 * alpha takes its value from whatever is behind it, and every ratio
 * here would become a guess. */

.radar-site .radar-site__standing {
  margin: -6px 0 0;
  padding-top: 12px;
  padding-bottom: 2px;
  max-width: var(--radar-measure);
  font-size: 15.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__standing strong { color: var(--radar-ink); }

.radar-site .radar-site__standing-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--radar-warn);
}

.radar-site .radar-site__standing-asof {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--radar-muted);
}

/* ── The BacWater card ─────────────────────────────────────────────── */

.radar-site .radar-site__ad-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.radar-site .radar-site__ad-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--radar-accent);
  border-radius: 8px;
  font-family: var(--radar-mono);
  font-size: 12px;
  color: var(--radar-accent);
}

.radar-site .radar-site__ad-h {
  margin: 13px 0 7px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--radar-ink);
}

.radar-site .radar-site__ad-points {
  margin: 0 0 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--radar-rule);
  list-style: none;
}

.radar-site .radar-site__ad-point {
  position: relative;
  padding-left: 16px;
  font-family: var(--radar-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__ad-point::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--radar-accent);
}

/* ── Four groups, sorted by what the seller actually publishes ───────
 *
 * Operator, 2026-09-18: "Make it easy for people to see that we are the
 * best choice even against the cheaper." — "If they want to go cheaper
 * fine but we are a strong choice and I want it immediately
 * understandable by anyone." — "Bucket them into segments. Top being
 * the premium in quality of test / lab / batch."
 *
 * The information was already on the page, in a column headed COA, on a
 * table sorted by price — so a reader saw three cheap sellers who
 * publish nothing and never scrolled to row 23. Present and unreadable
 * is the same as absent on a comparison site.
 *
 * ── Every selector names the block root ───────────────────────────
 *
 * `.radar-site h3` and `.radar-site p` are (0,1,1) and a lone class is
 * (0,1,0), so a bare `.radar-site__seg-h` loses — and it loses the
 * TYPOGRAPHY, not only the colour, which is how a 1.9rem headline
 * rendered at 16px on the auth page. No new anchor rule is declared
 * here: the links are `.radar-site__link`, which already carries its
 * own `a.` qualifier.
 *
 * ── The columns had to come DOWN, not the font ────────────────────
 *
 * "Immediately understandable by anyone" includes a phone, and at 390px
 * a six-column table is not immediately anything. The certificate fact
 * is now stated ONCE on a group heading instead of in ninety-eight
 * cells, and the observation date moved into the vendor cell — four
 * columns, which fit. `.radar-tablewrap` still scrolls, because a wide
 * table must scroll inside its own box rather than taking the page
 * sideways with it.
 *
 * ── Measured in Chrome on the real rendered response ──────────────
 *
 * See `scripts/screenshot-radar.mjs`. No value here is translucent and
 * no text carries `opacity`: a colour painted with alpha takes its
 * value from whatever is behind it, and every measured ratio would
 * become a guess. */

.radar-site .radar-site__segs {
  margin-top: 18px;
}

/* The ordering rule, stated rather than implied. A list quietly
   reordered around our own interests is a deceptive practice under
   16 CFR §255 — and an index a stranger cannot check is worth nothing
   to them and nothing to the operator, who prices off the same
   computation. */
.radar-site .radar-site__segs-rule {
  margin-top: 0;
  margin-bottom: 18px;
  max-width: var(--radar-measure);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__segs-rule strong { color: var(--radar-ink); }

.radar-site .radar-site__segs-rule-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* What the paperwork costs, against somebody comparable. Signed both
   ways — a line that appeared only when we were dearer would be a
   confession, one that appeared only when we were cheaper would be a
   boast, and only the signed version is a thing a stranger can
   believe. */
.radar-site .radar-site__segs-gap {
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  max-width: var(--radar-measure);
  border: 1px solid var(--radar-rule);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--radar-panel);
  font-size: 15px;
  line-height: 1.6;
  color: var(--radar-ink);
}

.radar-site .radar-site__seg {
  margin-bottom: 26px;
}

.radar-site .radar-site__seg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--radar-ink);
}

/* Plain English, no acronym. A reader who has never heard of a
   certificate of analysis has to be able to place themselves in one
   pass; the precise grade travels beside it in the chip, whose `title`
   carries `Market::CoaSignal`'s own definition. */
.radar-site .radar-site__seg-name {
  color: var(--radar-ink);
}

/* The count IS the argument. "3 of 87 sellers we read" needs no
   vocabulary and is checkable in the rows directly beneath it. */
.radar-site .radar-site__seg-n {
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--radar-ink-2);
}

/* The honesty rider. The bottom group's is load-bearing: `none` means
   we did not find one IN THIS LISTING, never that the vendor has no
   certificates, and a reader will otherwise take it as an accusation we
   cannot support. This site is read by the people it names. */
.radar-site .radar-site__seg-note {
  margin-top: 0;
  margin-bottom: 10px;
  max-width: var(--radar-measure);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--radar-ink-2);
}

/* ── A folded group — 2026-10-15 ────────────────────────────────────
   On a compound a Rally is running on, the "nothing about testing" group
   sits behind one click. The summary states the COUNT, so the fold hides
   rows and never the fact that they exist; it reads as a control, not a
   caption. Tokens only, no alpha. */
.radar-site .radar-site__fold {
  margin-top: 18px;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-site__fold-sum {
  cursor: pointer;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--radar-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.radar-site .radar-site__fold[open] .radar-site__fold-sum {
  text-decoration: none;
}

/* The observation date, moved out of its own column. It is what makes
   the comparison checkable and a reader will otherwise assume it is
   today's. */
.radar-site .radar-site__seen {
  display: block;
  margin-top: 2px;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--radar-muted);
}

/* The one line on this page a competitor cannot copy — rendered only on
   the row `Market::HouseCertificateProof` could answer a question
   about, and only when it answered one. */
.radar-site .radar-site__vouch {
  display: block;
  margin-top: 5px;
  max-width: 44ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--radar-good);
}

/* A scraped vendor name is an unbreakable word — `bpc-157-tb-500-ghk-cu`
   is wider than a phone and pushes the page sideways rather than
   wrapping. The rule that fixed the radar masthead, arriving in a
   table cell. */
.radar-site .radar-site__table .radar-site__td {
  overflow-wrap: anywhere;
}

.radar-site .radar-site__table .radar-site__num {
  overflow-wrap: normal;
}

@media (min-width: 720px) {
  .radar-site .radar-site__seg-h {
    font-size: 18.5px;
  }

  .radar-site .radar-site__seg {
    margin-bottom: 32px;
  }
}

/* ── Which price our row is publishing ──────────────────────────────

   Operator, 2026-09-27: "You have no qulifiers. Is that our everyday
   price or the rally."

   The tag and the struck-through everyday price sit on the row carrying
   the number, so the figure cannot be read without its qualifier. Both
   are tokens, never literals, and no text carries opacity — a colour
   painted with alpha takes its value from whatever is behind it, so its
   contrast stops being a property of the rule. */
.radar-site .radar-site__was {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  text-decoration: line-through;
  color: var(--radar-muted);
}

.radar-site .radar-site__rallytag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
}

/* ── The pass, in the masthead — 2026-09-28 ──────────────────────────
 * Sign in / Join free for a stranger; the member's name, the pass chip
 * and a real Sign out control for a member. Sits at the right end of
 * the mast row. Every selector names the block root; every value is a
 * radar token, so it is right in both themes. `a.`-qualified. */
.radar-site .radar-site__pass {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-left: auto;
  font-size: 13px;
}

/* Sign in is an action, not a page: no underline, or it reads as the
 * page you are on (2026-10-14). */
.radar-site a.radar-site__pass-in,
.radar-site a.radar-site__pass-member {
  color: var(--radar-ink);
  font-weight: 700;
  text-decoration: none;
}

.radar-site a.radar-site__pass-in:hover,
.radar-site a.radar-site__pass-member:hover {
  color: var(--radar-ink-2);
}

.radar-site a.radar-site__pass-join {
  padding: 7px 12px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
}

.radar-site .radar-site__pass-note {
  color: var(--radar-muted);
  font-size: 12px;
}

.radar-site .radar-site__pass-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--radar-accent);
  color: var(--radar-cta-ink);
  border-radius: 999px;
}

.radar-site .radar-site__pass-form { margin: 0; }

.radar-site button.radar-site__pass-out {
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--radar-panel);
  color: var(--radar-ink);
  border: 1px solid var(--radar-muted);
  border-radius: 999px;
}

/* ── The legal pages — 2026-10-14 ───────────────────────────────────
 * Terms, privacy, cancellation and contact: long reading text, so it is
 * ink-2 on the page at a reading size rather than the muted 13.5px of a
 * note. Tokens only, the block root on every rule, vertical spacing as
 * longhands, nothing faded. Links are `.radar-site__link`, whose rule
 * already carries the `a.` qualifier. Guarded by the legal section of
 * `radar_contrast_guard_test`. */
.radar-site .radar-site__legal {
  max-width: var(--radar-measure);
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__legal strong { color: var(--radar-ink); }

.radar-site .radar-site__legal-h {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 650;
  color: var(--radar-ink);
}

.radar-site .radar-site__legal-p {
  margin: 0 0 12px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__legal-list {
  margin: 0 0 12px;
  padding-left: 20px;
}

.radar-site .radar-site__legal-item {
  margin-bottom: 8px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__legal-seller {
  margin-top: 8px;
  padding-top: 14px;
  padding-bottom: 2px;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-site__legal-address {
  margin: 0 0 12px;
  font-style: normal;
  color: var(--radar-ink);
}

/* ── The badge check and the feedback door — 2026-10-14 ─────────────
 * /verify/…, /badges and /report-a-seller. Operator: a badge that
 * cannot take feedback is not official. The verification card sits on
 * the panel; its state line is the loudest thing on the page because it
 * is the answer the reader came for. Tokens only, the block root on
 * every rule, vertical spacing as longhands, nothing faded. Links are
 * `.radar-site__link`, whose rule already carries the `a.` qualifier.
 * Guarded by the verification section of `radar_contrast_guard_test`. */
.radar-site .radar-site__verify-eyebrow {
  margin: 0 0 6px;
  font-family: var(--radar-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify {
  max-width: var(--radar-measure);
  margin-top: 18px;
  margin-bottom: 18px;
  padding-top: 18px;
  padding-right: 20px;
  padding-bottom: 18px;
  padding-left: 20px;
  border: 1px solid var(--radar-rule);
  border-radius: 12px;
  background: var(--radar-panel);
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-state {
  margin: 0 0 6px;
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radar-site .radar-site__verify-state--current { color: var(--radar-good); }
.radar-site .radar-site__verify-state--stale { color: var(--radar-warn); }

.radar-site .radar-site__verify-tier {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--radar-ink);
}

.radar-site .radar-site__verify-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.radar-site .radar-site__verify-fact { margin: 0; }

.radar-site .radar-site__verify-dt {
  font-size: 13px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-dd {
  margin: 2px 0 0;
  font-family: var(--radar-mono);
  font-size: 18px;
  color: var(--radar-ink);
}

.radar-site .radar-site__verify-why {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-list {
  margin: 0 0 12px;
  padding-left: 20px;
}

.radar-site .radar-site__verify-item {
  margin-bottom: 8px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-links {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-rule {
  max-width: var(--radar-measure);
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 14px;
  border-left: 3px solid var(--radar-accent);
}

.radar-site .radar-site__verify-rule-p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__verify-rule-p strong { color: var(--radar-ink); }

.radar-site .radar-site__feedback {
  max-width: var(--radar-measure);
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-site__feedback-h {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__feedback-p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__feedback-about {
  margin: 0;
  font-size: 15px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__feedback-about strong { color: var(--radar-ink); }

.radar-site .radar-site__textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* ── The compound index, A–Z and readable — 2026-10-14 ───────────────
 *
 * Operator: "make them fucking readable" — "make clearer whats there" —
 * "the tables look like shit. make it all sexy."
 *
 * The base styles are a CARD per compound, and `min-width` turns them
 * into a table: a phone gets a list it can read with a thumb and never a
 * page that scrolls sideways; a desktop gets aligned columns. The jump
 * bar sticks to the top of the reading column and the table header
 * sticks under it, so a reader 200 rows down still knows which column
 * is which and can jump to another letter.
 *
 * The rules this sheet lives by, all held here: every selector names the
 * block root, every anchor rule carries `a.`, every value is a `--radar-*`
 * token, nothing is translucent, padding is written longhand, and every
 * breakpoint is `min-width`. `radar_contrast_guard_test` asserts each. */

.radar-site .radar-site__ix-jump {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  margin-top: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--radar-paper);
  border-bottom: 1px solid var(--radar-rule);
  -webkit-overflow-scrolling: touch;
}

.radar-site a.radar-site__ix-letter {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  border: 1px solid var(--radar-rule);
  border-radius: 6px;
  background: var(--radar-panel);
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.radar-site a.radar-site__ix-letter:hover,
.radar-site a.radar-site__ix-letter:focus-visible {
  color: var(--radar-ink);
  border-color: var(--radar-accent);
  outline: none;
}

.radar-site .radar-site__ix {
  margin-top: 12px;
}

.radar-site .radar-site__ix-table {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.radar-site .radar-site__ix-thead { display: none; }

.radar-site .radar-site__ix-table tbody { display: block; }

.radar-site .radar-site__ix-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  margin-bottom: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-radius: 12px;
  /* Clears the sticky jump bar when a letter link lands on this row. */
  scroll-margin-top: 64px;
}

.radar-site .radar-site__ix-td {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

/* A card reads name and seller count on one line, sizes under them, and
 * the certificate reading last — placed by line number, never by a named
 * area (a name referencing nothing places everything in row 1). */
.radar-site .radar-site__ix-name { grid-column: 1; grid-row: 1; }
.radar-site .radar-site__ix-sellers { grid-column: 2; grid-row: 1; text-align: right; }
.radar-site .radar-site__ix-sizes { grid-column: 1 / -1; grid-row: 2; }
.radar-site .radar-site__ix-coa { grid-column: 1 / -1; grid-row: 3; }

.radar-site a.radar-site__ix-link {
  font-size: 17px;
  line-height: 1.35;
}

.radar-site .radar-site__ix-tag {
  display: inline-block;
  margin-left: 8px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 7px;
  padding-right: 7px;
  border: 1px solid var(--radar-accent);
  border-radius: 999px;
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.radar-site .radar-site__ix-parts {
  display: block;
  margin-top: 4px;
  color: var(--radar-ink-2);
  font-size: 13.5px;
}

.radar-site .radar-site__ix-ad {
  display: block;
  margin-bottom: 6px;
  color: var(--radar-warn);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.radar-site .radar-site__ix-row--pinned {
  border-color: var(--radar-warn);
}

.radar-site .radar-site__ix-dose {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid var(--radar-rule);
  border-radius: 6px;
  background: var(--radar-paper);
  color: var(--radar-ink-2);
  font-family: var(--radar-mono);
  font-size: 12px;
  white-space: nowrap;
}

.radar-site .radar-site__ix-more {
  display: inline-block;
  color: var(--radar-ink-2);
  font-family: var(--radar-mono);
  font-size: 12px;
  white-space: nowrap;
}

.radar-site .radar-site__ix-num {
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* On a card the number needs the word the header would have given it. */
.radar-site .radar-site__ix-num::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 3px;
  color: var(--radar-ink-2);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* An unasked certificate question renders nothing, so on a card it takes
 * no line at all. */
.radar-site .radar-site__ix-coa--unasked { display: none; }

@media (min-width: 760px) {
  .radar-site .radar-site__ix-jump {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .radar-site .radar-site__ix {
    border: 1px solid var(--radar-rule);
    border-radius: 12px;
    background: var(--radar-panel);
  }

  .radar-site .radar-site__ix-table { display: table; }
  .radar-site .radar-site__ix-thead { display: table-header-group; }
  .radar-site .radar-site__ix-table tbody { display: table-row-group; }

  .radar-site .radar-site__ix-row {
    display: table-row;
    background: var(--radar-panel);
    border: 0;
    border-radius: 0;
    scroll-margin-top: 104px;
  }

  .radar-site .radar-site__ix-th {
    position: sticky;
    top: 50px;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 18px;
    padding-right: 18px;
    background: var(--radar-panel);
    border-bottom: 1px solid var(--radar-rule);
    color: var(--radar-ink-2);
    font-family: var(--radar-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .radar-site .radar-site__ix-th--num { text-align: right; }

  .radar-site .radar-site__ix-td {
    display: table-cell;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 18px;
    padding-right: 18px;
    border-bottom: 1px solid var(--radar-rule-2);
    vertical-align: middle;
  }

  .radar-site .radar-site__ix-name { width: 44%; }

  .radar-site .radar-site__ix-num {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .radar-site .radar-site__ix-num::before { content: none; }

  .radar-site .radar-site__ix-coa--unasked { display: table-cell; }

  .radar-site .radar-site__ix-row:last-child .radar-site__ix-td { border-bottom: 0; }

  .radar-site .radar-site__ix-row:hover .radar-site__ix-td,
  .radar-site .radar-site__ix-row--pinned .radar-site__ix-td {
    background: var(--radar-rule-2);
  }

  .radar-site .radar-site__ix-row--pinned .radar-site__ix-name {
    box-shadow: inset 3px 0 0 var(--radar-warn);
  }
}

/* ── Sellers: the masthead's two doors, and a seller's page — 2026-10-14
 *
 * Compounds and Sellers are the two ways into the data, so they sit in
 * the masthead beside the wordmark. The seller page's facts and flags
 * are ink on the page's own surfaces. Every selector names the block
 * root, every anchor rule carries `a.`, every value is a radar token,
 * and nothing carries opacity — the radar contrast guard's rules, held
 * by its "sellers" section. */
.radar-site .radar-site__sections {
  display: flex;
  gap: 14px;
  font-size: 13.5px;
}

/* At rest a menu item draws no mark: only the page you are on carries
 * the accent underline (2026-10-14 — every item was underlined, so three
 * read as current at once). The transparent border keeps the line box
 * the same height either way, so marking a page moves nothing. */
.radar-site a.radar-site__section {
  color: var(--radar-ink-2);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}

.radar-site a.radar-site__section:hover {
  color: var(--radar-ink);
}

.radar-site a.radar-site__section[aria-current="page"] {
  color: var(--radar-ink);
  border-bottom-color: var(--radar-accent);
}

.radar-site a.radar-site__section:focus-visible,
.radar-site a.radar-site__vendor-link:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.radar-site a.radar-site__vendor-link {
  color: var(--radar-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--radar-accent);
}

.radar-site a.radar-site__vendor-link:hover {
  color: var(--radar-accent);
}

.radar-site .radar-site__facts {
  margin: 0 0 20px;
  padding-left: 18px;
  color: var(--radar-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.radar-site .radar-site__fact {
  margin-bottom: 6px;
}

/* Stacked under the price, never beside it: three flags in a row made
   the price column the widest thing in the table at 390px. */
.radar-site .radar-site__flag {
  display: block;
  width: fit-content;
  margin-top: 4px;
  margin-left: auto;
  white-space: nowrap;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 6px;
  border: 1px solid var(--radar-rule);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--radar-ink-2);
}

/* ══════════════════════════════════════════════════════════════════════
 * Pro for brands — the Radar Readout and the list highlight (2026-10-14)
 * ══════════════════════════════════════════════════════════════════════
 *
 * The Readout is a page a brand sends its own customers, so it is the
 * most designed page on this site: one big number, a chip per tier, a
 * card per badge with a bullet chart. Same rules as every other block —
 * the root on every selector, tokens only, longhand padding, nothing
 * faded, anchors carry `a.` — and `radar_contrast_guard_test` §11
 * measures every ink against both grounds in every theme.
 *
 * The highlight is a TINT and a LABEL on a row already in price order.
 * `--radar-highlight` is a solid token, never an alpha, so its contrast
 * is a property of the rule. */

.radar-site .radar-site__shell.radar-site__shell--solo { grid-template-columns: minmax(0, 1fr); }

.radar-site .radar-site__readout { max-width: 1040px; }

.radar-site .radar-site__readout-eyebrow {
  margin: 0 0 6px;
  font-family: var(--radar-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--radar-accent);
}

.radar-site .radar-site__readout-name {
  margin: 0;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.radar-site .radar-site__readout-read {
  margin: 10px 0 0;
  font-size: 15.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-read strong { color: var(--radar-ink); }

.radar-site .radar-site__readout-hero {
  margin-top: 26px;
  margin-bottom: 26px;
  padding-top: 22px;
  padding-right: 24px;
  padding-bottom: 22px;
  padding-left: 24px;
  border: 1px solid var(--radar-rule);
  border-left: 5px solid var(--radar-accent);
  border-radius: 14px;
  background: var(--radar-panel);
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 14px;
}

.radar-site .radar-site__readout-num {
  font-family: var(--radar-mono);
  font-size: clamp(64px, 14vw, 104px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--radar-accent);
}

.radar-site .radar-site__readout-unit {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.radar-site .radar-site__readout-tier,
.radar-site .radar-site__readout-chip {
  display: inline-block;
  padding-top: 5px;
  padding-right: 11px;
  padding-bottom: 5px;
  padding-left: 11px;
  border: 1px solid var(--radar-accent);
  border-radius: 999px;
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--radar-paper);
  color: var(--radar-ink);
}

/* The two strongest tiers are FILLED: the pair `--radar-cta` /
   `--radar-cta-ink` is the one measured for ink on accent. */
.radar-site .radar-site__readout-tier--top1,
.radar-site .radar-site__readout-tier--top5,
.radar-site .radar-site__readout-chip--top1,
.radar-site .radar-site__readout-chip--top5 {
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
}

.radar-site .radar-site__readout-times { font-weight: 600; }

.radar-site .radar-site__readout-best {
  margin: 0;
  font-size: 16px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-best strong { color: var(--radar-ink); }

.radar-site .radar-site__readout-empty {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 750;
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-why {
  margin: 0;
  font-size: 15.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .radar-site .radar-site__readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .radar-site .radar-site__readout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.radar-site .radar-site__readout-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 16px;
  padding-right: 18px;
  padding-bottom: 16px;
  padding-left: 18px;
  border: 1px solid var(--radar-rule);
  border-radius: 12px;
  background: var(--radar-panel);
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.radar-site .radar-site__readout-of {
  font-family: var(--radar-mono);
  font-size: 12.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-compound {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.2;
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

.radar-site .radar-site__readout-dose {
  font-family: var(--radar-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-stat {
  margin: 0 0 12px;
  font-size: 14.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-bullet { margin: 0 0 12px; }

.radar-site .radar-site__readout-svg {
  display: block;
  width: 100%;
  height: 26px;
}

.radar-site .radar-site__readout-track { fill: var(--radar-rule-2); }
.radar-site .radar-site__readout-band { fill: var(--radar-highlight); }
.radar-site .radar-site__readout-marker { fill: var(--radar-accent); }

.radar-site .radar-site__readout-axis {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  font-family: var(--radar-mono);
  font-size: 12px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-cert {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-k {
  display: block;
  margin: 0 0 3px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-links {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-asof {
  margin: auto 0 0;
  font-family: var(--radar-mono);
  font-size: 12px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-promise {
  max-width: var(--radar-measure);
  margin: 0 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--radar-rule);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-share {
  margin-top: 26px;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-right: 22px;
  padding-bottom: 20px;
  padding-left: 22px;
  border: 1px solid var(--radar-rule);
  border-radius: 14px;
  background: var(--radar-panel);
  color: var(--radar-ink-2);
}

.radar-site .radar-site__readout-share-h {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 750;
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 720px) {
  .radar-site .radar-site__readout-share-grid { grid-template-columns: 160px minmax(0, 1fr); }
}

.radar-site .radar-site__readout-qr {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 10px;
  background: var(--radar-ink);
}

.radar-site .radar-site__readout-field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 12px;
  padding-top: 9px;
  padding-right: 11px;
  padding-bottom: 9px;
  padding-left: 11px;
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  font-family: var(--radar-mono);
  font-size: 13.5px;
  background: var(--radar-paper);
  color: var(--radar-ink);
}

.radar-site .radar-site__readout-snippet {
  font-family: var(--radar-text);
  line-height: 1.5;
  resize: vertical;
}

.radar-site .radar-site__readout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.radar-site a.radar-site__readout-btn,
.radar-site button.radar-site__readout-btn {
  display: inline-block;
  padding-top: 9px;
  padding-right: 14px;
  padding-bottom: 9px;
  padding-left: 14px;
  border: 1px solid var(--radar-cta);
  border-radius: 8px;
  font-family: var(--radar-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
}

.radar-site a.radar-site__readout-btn:hover,
.radar-site button.radar-site__readout-btn:hover {
  border-color: var(--radar-ink);
  background: var(--radar-ink);
  color: var(--radar-paper);
}

.radar-site button.radar-site__readout-btn[hidden] { display: none; }

/* From a badge check to the brand's Readout. */
.radar-site .radar-site__verify-readout {
  margin: 4px 0 12px;
  padding-top: 12px;
  padding-right: 14px;
  padding-bottom: 12px;
  padding-left: 14px;
  border: 1px solid var(--radar-accent);
  border-radius: 10px;
  background: var(--radar-paper);
  color: var(--radar-ink-2);
}

.radar-site a.radar-site__readout-door {
  font-size: 17px;
  font-weight: 750;
}

.radar-site .radar-site__verify-readout-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--radar-ink-2);
}

/* ── The Pro member row: a tint and a label, never a move ─────────── */

.radar-site .radar-site__row--pro .radar-site__td,
.radar-site .radar-site__row--pro:hover .radar-site__td {
  background: var(--radar-highlight);
}

.radar-site .radar-site__row--pro .radar-site__td:first-child {
  box-shadow: inset 4px 0 0 var(--radar-accent);
}

.radar-site .radar-site__pro-label {
  display: inline-block;
  margin-left: 8px;
  padding-top: 1px;
  padding-right: 7px;
  padding-bottom: 1px;
  padding-left: 7px;
  border: 1px solid var(--radar-accent);
  border-radius: 999px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  white-space: nowrap;
  cursor: help;
  background: var(--radar-paper);
  color: var(--radar-ink);
}

.radar-site .radar-site__pro-key {
  max-width: var(--radar-measure);
  margin: 8px 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--radar-ink-2);
}

/* ── /plans — what each plan gives — 2026-10-14 ─────────────────────
 * Operator: "There is no radar product copy." Cards, never a table: a
 * four-column comparison is illegible at 390px, and a card stack reads
 * top to bottom on a phone and side by side on a desk. Every selector
 * names the block root; every colour is a radar token; vertical spacing
 * and padding are longhands; nothing is faded. The CTA is a filled
 * `--radar-cta` / `--radar-cta-ink` pair, `a.`-qualified. Guarded by the
 * plans section of `radar_contrast_guard_test`. */
.radar-site a.radar-site__door-cta + a.radar-site__door-cta { margin-left: 18px; }

.radar-site .radar-site__plans-rule {
  max-width: var(--radar-measure);
  margin-top: 18px;
  margin-bottom: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-left: 3px solid var(--radar-accent);
  background: var(--radar-panel);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__plans-rule strong { color: var(--radar-ink); }

.radar-site .radar-site__plans-intro {
  max-width: var(--radar-measure);
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__plans-intro strong { color: var(--radar-ink); }

.radar-site .radar-site__plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 14px;
}

@media (min-width: 720px) {
  .radar-site .radar-site__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radar-site .radar-site__plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.radar-site .radar-site__plan {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 18px;
  padding-right: 18px;
  border: 1px solid var(--radar-rule);
  border-top: 3px solid var(--radar-accent);
  border-radius: 10px;
  background: var(--radar-panel);
  color: var(--radar-ink-2);
}

.radar-site .radar-site__plan-h {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__plan-price {
  margin: 0 0 12px;
  font-family: var(--radar-mono);
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
  color: var(--radar-ink);
}

/* FREE / PAID on every plan card — operator: "no idea whats free and
 * whats not". Ink only (good / warn, both measured on the panel), with
 * a border in the same ink, so the badge carries no fill to measure. */
.radar-site .radar-site__plan-badge {
  align-self: flex-start;
  margin: 0 0 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--radar-mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.radar-site .radar-site__plan-badge--free { color: var(--radar-good); }
.radar-site .radar-site__plan-badge--paid { color: var(--radar-warn); }

/* "from sign-up" — a line on a card that is not built yet. Ink-2 with a
 * border in the same ink, no fill, so it reads as a qualifier. */
.radar-site .radar-site__plan-soon {
  display: inline-block;
  margin-left: 6px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 7px;
  padding-right: 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__plan-per {
  display: block;
  margin-top: 2px;
  font-family: var(--radar-text);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__plan-list {
  flex: 1 1 auto;
  margin: 0 0 14px;
  padding-left: 18px;
}

.radar-site .radar-site__plan-item {
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--radar-ink-2);
}

.radar-site a.radar-site__plan-cta {
  align-self: flex-start;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 999px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-weight: 700;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
   11 · The sample brand report — /brand-report/sample (2026-10-15)
   ════════════════════════════════════════════════════════════════════
 *
 * Operator: "Make beautiful sample reports and I mean beautiful. Sexy.
 * Fancy printed and online."
 *
 * An editorial register on top of the instrument: a serif display face
 * for the cover and section openers (system serifs only — no webfont,
 * see the top of this file), figures in the radar's mono, generous
 * measure. Every rule names the block root, every anchor rule carries
 * `a.`, no literal colour (every mark is a `--radar-sr-*` token declared
 * in all three token blocks), longhand padding, nothing faded. Mobile is
 * the base; `min-width` enhances. `@media print` repaints the article
 * from the light tokens so the browser's own print is a clean sheet. */

.radar-site .radar-site__sr {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px;
}

.radar-site .radar-site__sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── The sample banner ─────────────────────────────────────────────── */
.radar-site .radar-site__sr-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  border: 1px solid var(--radar-warn);
  border-radius: 6px;
  background: var(--radar-panel);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom: 26px;
}
.radar-site .radar-site__sr-banner-p {
  margin: 0;
  flex: 1 1 320px;
  color: var(--radar-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.radar-site .radar-site__sr-stamp {
  display: inline-block;
  margin-right: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 3px;
  background: var(--radar-warn);
  color: var(--radar-sr-stamp-ink);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.radar-site .radar-site__sr-banner-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
}
.radar-site a.radar-site__sr-action {
  color: var(--radar-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── The cover ─────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-cover {
  position: relative;
  overflow: hidden;
  background: var(--radar-sr-cover);
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  padding-top: 34px;
  padding-bottom: 30px;
  padding-left: 22px;
  padding-right: 22px;
}
/* The rings are cropped by their OWN viewBox, never by sitting past the
 * cover's edge — an absolutely placed child hanging off a phone's
 * right edge widened the page to 463px at 390. */
.radar-site .radar-site__sr-rings {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  color: var(--radar-rule);
  pointer-events: none;
}
.radar-site .radar-site__sr-rings-blip { color: var(--radar-accent); }
.radar-site .radar-site__sr-kicker {
  position: relative;
  margin: 0;
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-title {
  position: relative;
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: clamp(2.9rem, 12vw, 6.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.radar-site .radar-site__sr-dek {
  position: relative;
  max-width: 34em;
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--radar-ink-2);
  font-family: var(--radar-serif);
  font-size: 1.2rem;
  line-height: 1.5;
}
.radar-site .radar-site__sr-figures {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  margin-bottom: 0;
  border-top: 1px solid var(--radar-rule);
}
.radar-site .radar-site__sr-fig {
  border-bottom: 1px solid var(--radar-rule);
  padding-top: 14px;
  padding-bottom: 14px;
  padding-right: 12px;
}
.radar-site .radar-site__sr-fig-k {
  color: var(--radar-muted);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-fig-v {
  margin-top: 4px;
  margin-left: 0;
  margin-bottom: 0;
  color: var(--radar-ink);
  font-family: var(--radar-mono);
  font-size: 2.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.radar-site .radar-site__sr-fig-v--accent { color: var(--radar-accent); }
.radar-site .radar-site__sr-fig-v--up { color: var(--radar-sr-up); }
.radar-site .radar-site__sr-fig-v--down { color: var(--radar-sr-down); }
.radar-site .radar-site__sr-edition {
  position: relative;
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--radar-muted);
  font-size: 13px;
}

/* ── Contents ──────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--radar-rule);
}
.radar-site a.radar-site__sr-toc-a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--radar-rule);
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 1.05rem;
  text-decoration: none;
}
.radar-site a.radar-site__sr-toc-a:hover,
.radar-site a.radar-site__sr-toc-a:focus-visible { color: var(--radar-accent); }
.radar-site .radar-site__sr-toc-n {
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
}

/* ── Sections and their openers ────────────────────────────────────── */
.radar-site .radar-site__sr-section {
  margin-top: 56px;
  scroll-margin-top: 20px;
}
.radar-site .radar-site__sr-opener {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  border-top: 2px solid var(--radar-ink);
  padding-top: 14px;
  margin-bottom: 22px;
}
.radar-site .radar-site__sr-num {
  color: var(--radar-accent);
  font-family: var(--radar-serif);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
}
.radar-site .radar-site__sr-h {
  margin: 0;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.radar-site .radar-site__sr-lede {
  max-width: 44em;
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--radar-ink-2);
  font-size: 1.02rem;
}

/* ── At a glance ───────────────────────────────────────────────────── */
.radar-site .radar-site__sr-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.radar-site .radar-site__sr-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-top-width: 6px;
  border-radius: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 16px;
  padding-right: 16px;
}
.radar-site .radar-site__sr-tile--top1 { border-top-color: var(--radar-sr-top1); }
.radar-site .radar-site__sr-tile--top5 { border-top-color: var(--radar-sr-top5); }
.radar-site .radar-site__sr-tile--top10 { border-top-color: var(--radar-sr-top10); }
.radar-site .radar-site__sr-tile--top25 { border-top-color: var(--radar-sr-top25); }
.radar-site .radar-site__sr-tile-n {
  color: var(--radar-ink);
  font-family: var(--radar-mono);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.05;
}
.radar-site .radar-site__sr-tile-k {
  color: var(--radar-ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-best {
  margin-top: 16px;
  margin-bottom: 18px;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 1.2rem;
}
.radar-site .radar-site__sr-best-k {
  display: block;
  color: var(--radar-muted);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Insights ──────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-insights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.radar-site .radar-site__sr-insight {
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-left: 4px solid var(--radar-accent);
  border-radius: 6px;
  padding-top: 16px;
  padding-bottom: 14px;
  padding-left: 18px;
  padding-right: 18px;
}
.radar-site .radar-site__sr-insight--losing,
.radar-site .radar-site__sr-insight--priced_out { border-left-color: var(--radar-sr-down); }
.radar-site .radar-site__sr-insight--pressure { border-left-color: var(--radar-warn); }
.radar-site .radar-site__sr-insight-h {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.radar-site .radar-site__sr-insight-ul {
  margin: 0;
  padding-left: 18px;
}
.radar-site .radar-site__sr-insight-li {
  margin-bottom: 6px;
  color: var(--radar-ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Figures ───────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-figure {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 16px;
  min-width: 0;
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  padding-top: 18px;
  padding-bottom: 14px;
  padding-left: 14px;
  padding-right: 14px;
}
.radar-site .radar-site__sr-figcap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.radar-site .radar-site__sr-fignum {
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-figq {
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}
.radar-site .radar-site__sr-howto {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--radar-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.radar-site .radar-site__sr-numbers {
  margin-top: 12px;
  border-top: 1px solid var(--radar-rule);
  padding-top: 8px;
}
.radar-site .radar-site__sr-numbers-h {
  color: var(--radar-muted);
  font-size: 13px;
  cursor: pointer;
}
.radar-site .radar-site__sr-numbers-ul {
  margin-top: 6px;
  margin-bottom: 0;
  padding-left: 18px;
}
.radar-site .radar-site__sr-numbers-li {
  color: var(--radar-ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.radar-site .radar-site__sr-grid,
.radar-site .radar-site__sr-bullets,
.radar-site .radar-site__sr-strips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
}
.radar-site .radar-site__sr-bullets { gap: 22px 32px; }
.radar-site .radar-site__sr-strips { gap: 12px 32px; }
.radar-site .radar-site__sr-sparks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.radar-site .radar-site__sr-bullet,
.radar-site .radar-site__sr-strip,
.radar-site .radar-site__sr-spark { min-width: 0; }

/* How to read a bullet chart: one sentence and its swatches. */
.radar-site .radar-site__sr-howread {
  background: var(--radar-sr-cover);
  border: 1px dashed var(--radar-rule);
  border-radius: 8px;
  padding-top: 16px;
  padding-bottom: 14px;
  padding-left: 18px;
  padding-right: 18px;
  margin-bottom: 16px;
}
.radar-site .radar-site__sr-howread-h {
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-howread-p {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--radar-ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.radar-site .radar-site__sr-keys,
.radar-site .radar-site__sr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.radar-site .radar-site__sr-legend { margin-top: 10px; }
.radar-site .radar-site__sr-key,
.radar-site .radar-site__sr-legend-li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--radar-ink-2);
  font-size: 13px;
}
.radar-site .radar-site__sr-sw {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: var(--radar-sr-band);
}
.radar-site .radar-site__sr-sw--mid { background: var(--radar-sr-band-mid); }
.radar-site .radar-site__sr-sw--line { width: 3px; height: 16px; background: var(--radar-sr-line); }
.radar-site .radar-site__sr-sw--tick { width: 2px; height: 16px; background: var(--radar-sr-tick); }
.radar-site .radar-site__sr-sw--you { width: 5px; height: 16px; background: var(--radar-sr-you); }
.radar-site .radar-site__sr-sw--target {
  width: 0;
  height: 16px;
  border-left: 3px dashed var(--radar-sr-target);
  border-radius: 0;
  background: var(--radar-sr-cover);
}
.radar-site .radar-site__sr-sw--top1 { background: var(--radar-sr-top1); }
.radar-site .radar-site__sr-sw--top5 { background: var(--radar-sr-top5); }
.radar-site .radar-site__sr-sw--top10 { background: var(--radar-sr-top10); }
.radar-site .radar-site__sr-sw--top25 { background: var(--radar-sr-top25); }
.radar-site .radar-site__sr-sw--half { background: var(--radar-sr-half); }
.radar-site .radar-site__sr-sw--below { background: var(--radar-sr-below); border: 1px solid var(--radar-sr-tick); }

/* ── The drawings: classes painted from tokens ─────────────────────── */
.radar-site .radar-site__sr-svg {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  overflow: visible;
}
.radar-site .radar-site__sr-t {
  font-family: var(--radar-text);
  font-size: 15px;
  fill: var(--radar-ink-2);
}
.radar-site .radar-site__sr-t--label { font-size: 19px; font-weight: 700; fill: var(--radar-ink); }
.radar-site .radar-site__sr-t--rank { font-family: var(--radar-mono); font-size: 15px; fill: var(--radar-ink-2); }
.radar-site .radar-site__sr-t--tick { font-family: var(--radar-mono); font-size: 14px; fill: var(--radar-muted); }
.radar-site .radar-site__sr-t--you { font-size: 16px; font-weight: 700; fill: var(--radar-sr-you); }
.radar-site .radar-site__sr-t--target { font-size: 15px; font-weight: 700; fill: var(--radar-sr-target); }
.radar-site .radar-site__sr-t--rowlabel { font-size: 16px; font-weight: 600; fill: var(--radar-ink); }
.radar-site .radar-site__sr-t--note { font-family: var(--radar-mono); font-size: 13px; fill: var(--radar-ink-2); }
.radar-site .radar-site__sr-t--axis { font-family: var(--radar-mono); font-size: 12px; fill: var(--radar-muted); }
.radar-site .radar-site__sr-t--move-up { font-family: var(--radar-mono); font-size: 14px; font-weight: 700; fill: var(--radar-sr-up); }
.radar-site .radar-site__sr-t--move-down { font-family: var(--radar-mono); font-size: 14px; font-weight: 700; fill: var(--radar-sr-down); }
.radar-site .radar-site__sr-t--seg { font-family: var(--radar-mono); font-size: 15px; font-weight: 700; }
.radar-site .radar-site__sr-t--ink-top1 { fill: var(--radar-sr-ink-top1); }
.radar-site .radar-site__sr-t--ink-top5 { fill: var(--radar-sr-ink-top5); }
.radar-site .radar-site__sr-t--ink-top10 { fill: var(--radar-sr-ink-top10); }
.radar-site .radar-site__sr-t--ink-top25 { fill: var(--radar-sr-ink-top25); }
.radar-site .radar-site__sr-t--ink-half { fill: var(--radar-sr-ink-half); }
.radar-site .radar-site__sr-t--ink-below { fill: var(--radar-sr-ink-below); }

.radar-site .radar-site__sr-band { fill: var(--radar-sr-band); }
.radar-site .radar-site__sr-band-mid { fill: var(--radar-sr-band-mid); }
.radar-site .radar-site__sr-median { fill: var(--radar-sr-line); }
.radar-site .radar-site__sr-tick { fill: var(--radar-sr-tick); }
.radar-site .radar-site__sr-you { fill: var(--radar-sr-you); }
.radar-site .radar-site__sr-target {
  stroke: var(--radar-sr-target);
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}
.radar-site .radar-site__sr-seg--top1 { fill: var(--radar-sr-top1); }
.radar-site .radar-site__sr-seg--top5 { fill: var(--radar-sr-top5); }
.radar-site .radar-site__sr-seg--top10 { fill: var(--radar-sr-top10); }
.radar-site .radar-site__sr-seg--top25 { fill: var(--radar-sr-top25); }
.radar-site .radar-site__sr-seg--half { fill: var(--radar-sr-half); }
.radar-site .radar-site__sr-seg--below { fill: var(--radar-sr-below); stroke: var(--radar-sr-tick); stroke-width: 1; }
.radar-site .radar-site__sr-track { stroke: var(--radar-sr-track); stroke-width: 2; fill: var(--radar-sr-track); }
.radar-site .radar-site__sr-move { stroke-width: 5; stroke-linecap: round; }
.radar-site .radar-site__sr-move--up { stroke: var(--radar-sr-up); }
.radar-site .radar-site__sr-move--down { stroke: var(--radar-sr-down); }
.radar-site .radar-site__sr-was { fill: var(--radar-sr-tick); }
.radar-site .radar-site__sr-now { stroke: var(--radar-panel); stroke-width: 2.5; }
.radar-site .radar-site__sr-now--up { fill: var(--radar-sr-up); }
.radar-site .radar-site__sr-now--down { fill: var(--radar-sr-down); }
.radar-site .radar-site__sr-bar { fill: var(--radar-accent); }
.radar-site .radar-site__sr-dot { fill: var(--radar-sr-dot); }
.radar-site .radar-site__sr-dot-you { fill: var(--radar-sr-you); stroke: var(--radar-panel); stroke-width: 3; }
.radar-site .radar-site__sr-spark-median {
  fill: none;
  stroke: var(--radar-sr-tick);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.radar-site .radar-site__sr-spark-you {
  fill: none;
  stroke: var(--radar-sr-you);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ── What changed: the log ─────────────────────────────────────────── */
.radar-site .radar-site__sr-log {
  margin-top: 0;
  margin-bottom: 18px;
  padding-left: 0;
  list-style: none;
  border-top: 1px solid var(--radar-rule);
}
.radar-site .radar-site__sr-log-li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--radar-rule);
}
.radar-site .radar-site__sr-log-kind {
  color: var(--radar-muted);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-log-li--tier-gained .radar-site__sr-log-kind { color: var(--radar-sr-up); }
.radar-site .radar-site__sr-log-li--tier-lost .radar-site__sr-log-kind { color: var(--radar-sr-down); }
.radar-site .radar-site__sr-log-li--new-item .radar-site__sr-log-kind { color: var(--radar-accent); }
.radar-site .radar-site__sr-log-what {
  color: var(--radar-ink-2);
  font-size: 15px;
}
.radar-site .radar-site__sr-log-name { color: var(--radar-ink); }

/* ── The catalogue ─────────────────────────────────────────────────── */
.radar-site .radar-site__sr-heat { position: relative; overflow-x: auto; }
.radar-site .radar-site__sr-heat-table {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 13px;
}
.radar-site .radar-site__sr-heat-corner { min-width: 70px; }
.radar-site .radar-site__sr-heat-col {
  color: var(--radar-muted);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.radar-site .radar-site__sr-heat-row {
  padding-right: 10px;
  color: var(--radar-ink);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.radar-site .radar-site__sr-heat-cell {
  min-width: 58px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.radar-site .radar-site__sr-heat-cell--top1 { background: var(--radar-sr-top1); color: var(--radar-sr-ink-top1); }
.radar-site .radar-site__sr-heat-cell--top5 { background: var(--radar-sr-top5); color: var(--radar-sr-ink-top5); }
.radar-site .radar-site__sr-heat-cell--top10 { background: var(--radar-sr-top10); color: var(--radar-sr-ink-top10); }
.radar-site .radar-site__sr-heat-cell--top25 { background: var(--radar-sr-top25); color: var(--radar-sr-ink-top25); }
.radar-site .radar-site__sr-heat-cell--half { background: var(--radar-sr-half); color: var(--radar-sr-ink-half); }
.radar-site .radar-site__sr-heat-cell--below { background: var(--radar-sr-below); color: var(--radar-sr-ink-below); }
.radar-site .radar-site__sr-heat-cell--none { background: var(--radar-sr-empty); }

.radar-site .radar-site__sr-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.radar-site .radar-site__sr-entry {
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  padding-top: 14px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}
.radar-site .radar-site__sr-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.radar-site .radar-site__sr-entry-name {
  margin: 0;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 1.3rem;
  font-weight: 600;
}
.radar-site .radar-site__sr-entry-dose {
  color: var(--radar-ink-2);
  font-family: var(--radar-mono);
  font-size: 13px;
  font-weight: 600;
}
.radar-site .radar-site__sr-entry-price {
  margin: 0;
  color: var(--radar-ink);
  font-family: var(--radar-mono);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.radar-site .radar-site__sr-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--radar-ink-2);
  font-size: 13px;
}
.radar-site .radar-site__sr-entry-rank { font-family: var(--radar-mono); color: var(--radar-ink); }
.radar-site .radar-site__sr-entry-read { color: var(--radar-muted); }
.radar-site .radar-site__sr-chip {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.radar-site .radar-site__sr-chip--top1 { background: var(--radar-sr-top1); color: var(--radar-sr-ink-top1); }
.radar-site .radar-site__sr-chip--top5 { background: var(--radar-sr-top5); color: var(--radar-sr-ink-top5); }
.radar-site .radar-site__sr-chip--top10 { background: var(--radar-sr-top10); color: var(--radar-sr-ink-top10); }
.radar-site .radar-site__sr-chip--top25 { background: var(--radar-sr-top25); color: var(--radar-sr-ink-top25); }
.radar-site .radar-site__sr-chip--half { background: var(--radar-sr-half); color: var(--radar-sr-ink-half); }
.radar-site .radar-site__sr-chip--below { background: var(--radar-sr-below); color: var(--radar-sr-ink-below); border: 1px solid var(--radar-sr-tick); }
.radar-site .radar-site__sr-entry-stat,
.radar-site .radar-site__sr-entry-rec,
.radar-site .radar-site__sr-entry-deal {
  margin-top: 4px;
  margin-bottom: 0;
  color: var(--radar-ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.radar-site .radar-site__sr-entry-stat { color: var(--radar-ink); font-weight: 600; }
.radar-site .radar-site__sr-entry-k {
  display: block;
  color: var(--radar-muted);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-entry-deal { color: var(--radar-warn); }

/* ── Method ────────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-notes {
  max-width: 52em;
  margin: 0;
  padding-left: 22px;
}
.radar-site .radar-site__sr-note {
  margin-bottom: 8px;
  color: var(--radar-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ── The door ──────────────────────────────────────────────────────── */
.radar-site .radar-site__sr-cta {
  margin-top: 56px;
  background: var(--radar-sr-cover);
  border: 1px solid var(--radar-accent);
  border-radius: 10px;
  padding-top: 28px;
  padding-bottom: 26px;
  padding-left: 22px;
  padding-right: 22px;
}
.radar-site .radar-site__sr-cta-kicker {
  margin: 0;
  color: var(--radar-accent);
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radar-site .radar-site__sr-cta-h {
  margin-top: 10px;
  margin-bottom: 8px;
  color: var(--radar-ink);
  font-family: var(--radar-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
}
.radar-site .radar-site__sr-cta-p {
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--radar-ink-2);
}
.radar-site .radar-site__sr-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin: 0;
}
.radar-site a.radar-site__sr-cta-a {
  color: var(--radar-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.radar-site a.radar-site__sr-cta-a--primary {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 6px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  text-decoration: none;
}

@media (min-width: 600px) {
  .radar-site .radar-site__sr-cover {
    padding-top: 48px;
    padding-bottom: 40px;
    padding-left: 44px;
    padding-right: 44px;
  }
  .radar-site .radar-site__sr-rings { width: 340px; height: 340px; }
  .radar-site .radar-site__sr-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .radar-site .radar-site__sr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .radar-site .radar-site__sr-sparks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .radar-site .radar-site__sr-figures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .radar-site .radar-site__sr-fig { border-bottom: 0; padding-top: 18px; padding-bottom: 6px; }
  .radar-site .radar-site__sr-fig-v { font-size: 2.6rem; }
  .radar-site .radar-site__sr-dek { font-size: 1.4rem; }
  .radar-site .radar-site__sr-opener { grid-template-columns: 110px minmax(0, 1fr); column-gap: 18px; }
  .radar-site .radar-site__sr-num { grid-row: 1 / span 2; font-size: 4.4rem; }
  .radar-site .radar-site__sr-h { font-size: 2.4rem; }
  .radar-site .radar-site__sr-log-li { grid-template-columns: 130px minmax(0, 1fr); column-gap: 16px; }
  .radar-site .radar-site__sr-figure { padding-left: 22px; padding-right: 22px; padding-top: 22px; }
  .radar-site .radar-site__sr-t--label { font-size: 16px; }
  .radar-site .radar-site__sr-t--rank { font-size: 12px; }
  .radar-site .radar-site__sr-t--tick { font-size: 10px; }
  .radar-site .radar-site__sr-t--you { font-size: 13px; }
  .radar-site .radar-site__sr-t--target { font-size: 12px; }
  .radar-site .radar-site__sr-t--rowlabel { font-size: 13px; }
  .radar-site .radar-site__sr-t--note { font-size: 11px; }
  .radar-site .radar-site__sr-t--axis { font-size: 10px; }
  .radar-site .radar-site__sr-t--move-up,
  .radar-site .radar-site__sr-t--move-down { font-size: 12px; }
  .radar-site .radar-site__sr-t--seg { font-size: 13px; }
  .radar-site .radar-site__sr-cta { padding-left: 40px; padding-right: 40px; }
  .radar-site .radar-site__sr-cta-h { font-size: 2.6rem; }
}

@media (min-width: 980px) {
  .radar-site .radar-site__sr-grid,
  .radar-site .radar-site__sr-bullets,
  .radar-site .radar-site__sr-strips,
  .radar-site .radar-site__sr-insights,
  .radar-site .radar-site__sr-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-site .radar-site__sr-sparks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .radar-site .radar-site__sr-heat-cell { min-width: 84px; }
  .radar-site .radar-site__sr-toc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Printed from the browser: the article on paper, in the light
 * tokens, without the site's chrome. The designed printed edition is
 * the PDF; this is the courtesy for "print this page". */
@media print {
  .radar-site .radar-site__sr {
    --radar-paper:  #ffffff;
    --radar-panel:  #ffffff;
    --radar-ink:    #0e1311;
    --radar-ink-2:  #3b4542;
    --radar-muted:  #5c6a65;
    --radar-rule:   #ccd4d0;
    --radar-accent: #0b6259;
    --radar-warn:   #94450a;
    --radar-cta:    #0b6259;
    --radar-cta-ink:#ffffff;
    --radar-sr-cover:     #ffffff;
    --radar-sr-band:      #dfe5e2;
    --radar-sr-band-mid:  #b5c4bf;
    --radar-sr-line:      #0e1311;
    --radar-sr-tick:      #5c6a65;
    --radar-sr-you:       #94450a;
    --radar-sr-target:    #0b6259;
    --radar-sr-up:        #136c34;
    --radar-sr-down:      #a81f17;
    --radar-sr-dot:       #74827d;
    --radar-sr-track:     #ccd4d0;
    --radar-sr-empty:     #eef1ef;
    --radar-sr-stamp-ink: #ffffff;
    --radar-sr-top1:      #0b6259;
    --radar-sr-top5:      #0f766e;
    --radar-sr-top10:     #14b8a6;
    --radar-sr-top25:     #99f6e4;
    --radar-sr-half:      #d5dedb;
    --radar-sr-below:     #eef1ef;
    --radar-sr-ink-top1:  #ffffff;
    --radar-sr-ink-top5:  #ffffff;
    --radar-sr-ink-top10: #06100e;
    --radar-sr-ink-top25: #06100e;
    --radar-sr-ink-half:  #0e1311;
    --radar-sr-ink-below: #0e1311;
    color: var(--radar-ink);
  }
  .radar-site .radar-site__sr-banner-actions,
  .radar-site .radar-site__sr-toc,
  .radar-site .radar-site__sr-cta-actions,
  .radar-site .radar-site__sr-numbers { display: none; }
  .radar-site .radar-site__sr-section { break-before: page; }
  .radar-site .radar-site__sr-figure,
  .radar-site .radar-site__sr-entry,
  .radar-site .radar-site__sr-insight { break-inside: avoid; }
}

/* ── Phone first — 2026-10-20 ──────────────────────────────────────────
 *
 * Operator: "all sites need to be sexy and sleek and work super well on
 * mobile" — 83% of the radar's traffic is a phone. Measured on the live
 * site at 390×844 that morning: a masthead three rows tall, 302 tap
 * targets under 32px on the index and 357 on a compound page, text at
 * 10–11.5px, inputs at 15px (iOS zooms the page on focus below 16px),
 * an index 54,098px long and seller names broken mid-word.
 *
 * Declared at the BASE width, after every rule it adjusts, so source
 * order decides at equal specificity; `min-width: 760px` gives the
 * desktop back what it had. Every rule names the block root, anchors
 * carry `a.`, values are tokens, padding is longhand, nothing fades —
 * the sheet's own rules. Measured, not asserted:
 * `test/system/radar_and_ruo_supply_fit_a_phone_test.rb`. */

/* One row: the mark, the wordmark, Join free and Menu. */
.radar-site .radar-site__mast-inner {
  gap: 6px 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.radar-site a.radar-site__wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.radar-site a.radar-site__quick-join {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 999px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.radar-site button.radar-site__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-paper);
  color: var(--radar-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Signed in, there is no Join free to push the button right. */
.radar-site .radar-site__wordmark + .radar-site__menu-btn { margin-left: auto; }

.radar-site button.radar-site__menu-btn[hidden] { display: none; }

.radar-site button.radar-site__menu-btn:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
}

/* On a phone the button is the three bars alone — the word would push it
 * onto a second row at 360px. It stays in the accessible name. */
.radar-site .radar-site__menu-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Three bars, drawn from the button's own ink. */
.radar-site .radar-site__menu-bars {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.radar-site .radar-site__menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  border-top: 2px solid currentColor;
}

/* The panel. Open with scripting off; the script closes it and the
 * button opens it again. */
.radar-site .radar-site__menu {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

.radar-site .radar-site__masthead--menu .radar-site__menu { display: none; }
.radar-site .radar-site__masthead--open .radar-site__menu { display: flex; }

.radar-site .radar-site__menu .radar-site__sections {
  flex-direction: column;
  gap: 0;
  font-size: 16px;
}

.radar-site .radar-site__menu a.radar-site__section {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: 12px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--radar-rule);
}

.radar-site .radar-site__menu a.radar-site__section[aria-current="page"] {
  border-bottom-color: var(--radar-rule);
  box-shadow: inset 3px 0 0 var(--radar-accent);
}

.radar-site .radar-site__menu .radar-site__pass {
  margin-left: 0;
  padding-top: 6px;
  padding-left: 12px;
  font-size: 15px;
}

.radar-site .radar-site__menu a.radar-site__pass-in,
.radar-site .radar-site__menu a.radar-site__pass-member,
.radar-site .radar-site__menu a.radar-site__pass-join {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The quick Join free is already on the row above. */
.radar-site .radar-site__masthead--menu .radar-site__menu a.radar-site__pass-join { display: none; }

.radar-site .radar-site__menu button.radar-site__pass-out {
  min-height: 44px;
  font-size: 14px;
}

/* Coverage, one quiet line under the row. */
.radar-site .radar-site__eyebrow {
  flex: 1 1 100%;
  margin-left: 0;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* Fields at 16px or iOS zooms the page when one is tapped. */
.radar-site .radar-site__input,
.radar-site .radar-site__select,
.radar-site .radar-site__button {
  min-height: 44px;
  font-size: 16px;
}

.radar-site .radar-site__input,
.radar-site .radar-site__select { min-width: 0; width: 100%; }

.radar-site .radar-site__picker > div { flex: 1 1 220px; }

/* Standalone links are controls, and a control is 44px tall. */
.radar-site .radar-site__back a.radar-site__link,
.radar-site a.radar-site__door-cta,
.radar-site a.radar-site__plan-cta,
.radar-site .radar-site__related-item a.radar-site__link,
.radar-site .radar-site__colophon-links a.radar-site__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.radar-site .radar-site__fold-sum {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* ── The index: a compact card per compound ── */
.radar-site a.radar-site__ix-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
}

.radar-site .radar-site__ix-row {
  gap: 2px 12px;
  margin-bottom: 6px;
  padding-top: 8px;
  padding-bottom: 10px;
  padding-left: 14px;
  padding-right: 14px;
  align-items: center;
}

.radar-site .radar-site__ix-sizes { grid-column: 1; grid-row: 2; }
.radar-site .radar-site__ix-coa { grid-column: 2; grid-row: 2; text-align: right; }

.radar-site a.radar-site__ix-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

/* The label rides beside its number on a card, not above it. */
.radar-site .radar-site__ix-num::before {
  display: inline;
  margin-right: 6px;
  margin-bottom: 0;
}

.radar-site .radar-site__ix-dose { margin-bottom: 0; }

/* ── Tables that become cards on a phone ──────────────────────────────
 * A seller's row is a card: the name on the first line, its numbers
 * under it, each with the word the header row would have given it. On a
 * compound page the price and the visit button share the name's line. */
.radar-site .radar-site__table--cards,
.radar-site .radar-site__table--cards tbody { display: block; }

.radar-site .radar-site__table--cards thead { display: none; }

.radar-site .radar-site__table--cards .radar-site__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  padding-top: 8px;
  padding-bottom: 10px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 1px solid var(--radar-rule-2);
}

.radar-site .radar-site__table--cards .radar-site__row:last-child { border-bottom: 0; }

.radar-site .radar-site__table--cards .radar-site__td {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0;
  /* A name breaks between words, never inside one. */
  overflow-wrap: break-word;
}

.radar-site .radar-site__table--cards .radar-site__td:first-child {
  flex: 1 1 100%;
  min-width: 0;
}

.radar-site .radar-site__table--cards .radar-site__num { text-align: left; }

.radar-site .radar-site__table--cards .radar-site__td[data-label]::before {
  content: attr(data-label);
  margin-right: 6px;
  color: var(--radar-ink-2);
  font-family: var(--radar-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radar-site .radar-site__table--cards a.radar-site__compound,
.radar-site .radar-site__table--cards a.radar-site__vendor-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

/* A 44px box would push a border underline far below the word. */
.radar-site .radar-site__table--cards a.radar-site__compound,
.radar-site .radar-site__table--cards a.radar-site__vendor-link,
.radar-site a.radar-site__ix-link {
  border-bottom-width: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.radar-site .radar-site__table--cards .radar-site__seen {
  display: inline;
  margin-left: 8px;
  white-space: nowrap;
}

.radar-site .radar-site__table--cards .radar-site__row--pro {
  background: var(--radar-highlight);
  box-shadow: inset 4px 0 0 var(--radar-accent);
}

.radar-site .radar-site__table--cards .radar-site__row--pro .radar-site__td:first-child { box-shadow: none; }

/* Line one: who, what it costs, and the way there. Line two: per unit and
 * the certificate. The name's basis is wide enough that per-unit cannot
 * squeeze onto the first line. */
.radar-site .radar-site__table--offers .radar-site__td:first-child {
  flex: 1 1 calc(100% - 180px);
}

.radar-site .radar-site__table--offers .radar-site__td:nth-child(2) {
  font-size: 17px;
  font-weight: 700;
  text-align: right;
  white-space: normal;
}

.radar-site .radar-site__table--offers .radar-site__visit { order: 1; }

.radar-site .radar-site__table--offers .radar-site__td[data-label] { order: 2; }

.radar-site .radar-site__visit a.radar-site__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 64px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid var(--radar-accent);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 760px) {
  .radar-site a.radar-site__quick-join,
  .radar-site button.radar-site__menu-btn,
  .radar-site button.radar-site__menu-btn[hidden] { display: none; }

  .radar-site .radar-site__menu,
  .radar-site .radar-site__masthead--menu .radar-site__menu { display: contents; }

  .radar-site .radar-site__menu .radar-site__sections {
    flex-direction: row;
    gap: 14px;
    font-size: 13.5px;
  }

  .radar-site .radar-site__menu a.radar-site__section {
    display: inline;
    min-height: 0;
    padding-left: 0;
    border-bottom: 2px solid transparent;
  }

  .radar-site .radar-site__menu a.radar-site__section[aria-current="page"] {
    border-bottom-color: var(--radar-accent);
    box-shadow: none;
  }

  .radar-site .radar-site__menu .radar-site__pass {
    margin-left: auto;
    padding-top: 0;
    padding-left: 0;
    font-size: 13px;
  }

  .radar-site .radar-site__masthead--menu .radar-site__menu a.radar-site__pass-join,
  .radar-site .radar-site__menu a.radar-site__pass-join {
    display: inline-flex;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  .radar-site .radar-site__menu-word {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .radar-site .radar-site__eyebrow {
    flex: 0 1 auto;
    margin-left: auto;
    font-family: var(--radar-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .radar-site .radar-site__input { min-width: 220px; width: auto; }
  .radar-site .radar-site__select { min-width: 250px; width: auto; }
  .radar-site .radar-site__picker > div { flex: 0 1 auto; }

  .radar-site .radar-site__ix-row {
    gap: 0;
    margin-bottom: 0;
  }

  .radar-site .radar-site__table--cards { display: table; }
  .radar-site .radar-site__table--cards thead { display: table-header-group; }
  .radar-site .radar-site__table--cards tbody { display: table-row-group; }

  .radar-site .radar-site__table--cards .radar-site__row {
    display: table-row;
    border-bottom: 0;
  }

  .radar-site .radar-site__table--cards .radar-site__td {
    display: table-cell;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 14px;
    padding-right: 14px;
    border-bottom: 1px solid var(--radar-rule-2);
  }

  .radar-site .radar-site__table--cards .radar-site__row:last-child .radar-site__td { border-bottom: 0; }

  .radar-site .radar-site__table--cards .radar-site__num { text-align: right; }

  .radar-site .radar-site__table--cards .radar-site__td[data-label]::before { content: none; }

  .radar-site .radar-site__table--cards a.radar-site__compound,
  .radar-site .radar-site__table--cards a.radar-site__vendor-link {
    display: inline;
    min-height: 0;
  }

  .radar-site .radar-site__table--cards .radar-site__seen {
    display: block;
    margin-left: 0;
  }

  .radar-site .radar-site__table--cards .radar-site__row--pro {
    background: var(--radar-panel);
    box-shadow: none;
  }

  .radar-site .radar-site__table--cards .radar-site__row--pro .radar-site__td:first-child {
    box-shadow: inset 4px 0 0 var(--radar-accent);
  }

  .radar-site .radar-site__table--offers .radar-site__td:nth-child(2) {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
  }
}

/* ── The testing labs — 2026-10-21 ─────────────────────────────────
 * ruoradar.com/labs (ships OFF). One card per laboratory on the panel,
 * in alphabetical order — nothing about a lab, least of all what it pays
 * us, moves it up the page. The disclosure sits above the list on the
 * page, not in small print. Tokens only, the block root on every rule,
 * vertical spacing as longhands, nothing faded. Links are
 * `.radar-site__link`, whose rule already carries the `a.` qualifier.
 * Guarded by the labs section of `radar_contrast_guard_test`. */
.radar-site .radar-site__labs {
  list-style: none;
  margin: 18px 0 0;
  padding-left: 0;
  max-width: var(--radar-measure);
}

.radar-site .radar-site__lab {
  margin-bottom: 14px;
  padding-top: 16px;
  padding-bottom: 14px;
  padding-left: 18px;
  padding-right: 18px;
  background: var(--radar-panel);
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__lab-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 650;
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

.radar-site .radar-site__lab-meta {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--radar-ink-2);
  overflow-wrap: anywhere;
}

.radar-site .radar-site__lab-services {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 0;
}

.radar-site .radar-site__lab-service {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 9px;
  padding-right: 9px;
  border: 1px solid var(--radar-rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--radar-ink);
}

.radar-site .radar-site__lab-note {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__lab-disclosure {
  max-width: var(--radar-measure);
  margin: 14px 0 0;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--radar-ink);
}

/* ════════════════════════════════════════════════════════════════════
   14 · Brands on the radar — ruoradar.com/brand (2026-10-21)
   ════════════════════════════════════════════════════════════════════
 *
 * Operator: "it needs to be fucking sexy". The claim door, the sign-in
 * confirmation and a seller's own dashboard: badges held today, the
 * badge kit drawn live, reports, Pro for brands, people with access.
 *
 * Same rules as every block here, held by section 14 of
 * radar_contrast_guard_test: the root on every selector, the a. /
 * button. qualifier on every control, tokens only (the sample
 * storefront paints from --radar-bp-shop*, solid in every theme),
 * padding in longhands, nothing faded, min-width breakpoints only. */
.radar-site .radar-site__bp {
  display: grid;
  gap: 34px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.radar-site .radar-site__bp-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--radar-rule);
  border-radius: 16px;
  background: var(--radar-panel);
  padding-top: 28px;
  padding-bottom: 24px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: inset 0 3px 0 var(--radar-accent);
}

.radar-site .radar-site__bp-rings {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 260px;
  height: 260px;
  color: var(--radar-rule);
  pointer-events: none;
}

.radar-site .radar-site__bp-kicker,
.radar-site .radar-site__bp-num,
.radar-site .radar-site__bp-step-k {
  position: relative;
  margin-top: 0;
  margin-bottom: 6px;
  font-family: var(--radar-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--radar-accent);
}

.radar-site .radar-site__bp-title {
  position: relative;
  margin: 0;
  font-family: var(--radar-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

.radar-site .radar-site__bp-meta {
  position: relative;
  margin-top: 12px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-host { font-family: var(--radar-mono); color: var(--radar-ink); }
.radar-site .radar-site__bp-who { color: var(--radar-ink-2); overflow-wrap: anywhere; }

.radar-site .radar-site__bp-chip {
  display: inline-flex;
  align-items: center;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid var(--radar-rule);
  border-radius: 999px;
  background: var(--radar-paper);
  color: var(--radar-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.radar-site .radar-site__bp-chip--pro {
  border-color: var(--radar-cta);
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
}

.radar-site .radar-site__bp-figs {
  position: relative;
  margin-top: 22px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radar-site .radar-site__bp-fig {
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  border: 1px solid var(--radar-rule);
  border-radius: 12px;
  background: var(--radar-paper);
}

.radar-site .radar-site__bp-fig-k {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
  background: var(--radar-paper);
}

.radar-site .radar-site__bp-fig-v {
  margin-top: 2px;
  margin-bottom: 0;
  margin-left: 0;
  font-family: var(--radar-mono);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--radar-ink);
  background: var(--radar-paper);
}

.radar-site .radar-site__bp-fig-v--accent { color: var(--radar-accent); background: var(--radar-paper); }

.radar-site .radar-site__bp-tabs {
  position: relative;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.radar-site a.radar-site__bp-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 14px;
  padding-right: 14px;
  border: 1px solid var(--radar-rule);
  border-radius: 999px;
  background: var(--radar-paper);
  color: var(--radar-ink-2);
  font-size: 14px;
  text-decoration: none;
}

.radar-site a.radar-site__bp-tab:hover,
.radar-site a.radar-site__bp-tab:focus-visible {
  border-color: var(--radar-accent);
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-section { scroll-margin-top: 16px; }

.radar-site .radar-site__bp-h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-family: var(--radar-serif);
  font-size: 26px;
  line-height: 1.15;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-lede {
  margin-top: 0;
  margin-bottom: 18px;
  max-width: 70ch;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-lede--hero {
  position: relative;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 17px;
}

.radar-site .radar-site__bp-p {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-strong { color: var(--radar-ink); font-weight: 700; }
.radar-site .radar-site__bp-ok { color: var(--radar-good); }

.radar-site .radar-site__bp-fine {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--radar-muted);
}

.radar-site .radar-site__bp-neutral {
  margin-top: 16px;
  margin-bottom: 0;
  padding-left: 12px;
  border-left: 3px solid var(--radar-accent);
  font-size: 14px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.radar-site .radar-site__bp-badge,
.radar-site .radar-site__bp-card,
.radar-site .radar-site__bp-step,
.radar-site .radar-site__bp-pro,
.radar-site .radar-site__bp-empty,
.radar-site .radar-site__bp-door {
  min-width: 0;
  border: 1px solid var(--radar-rule);
  border-radius: 14px;
  background: var(--radar-panel);
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 18px;
  padding-right: 18px;
}

.radar-site .radar-site__bp-step + .radar-site__bp-step { margin-top: 12px; }

.radar-site .radar-site__bp-badge {
  display: grid;
  gap: 6px;
  box-shadow: inset 4px 0 0 var(--radar-accent);
}

.radar-site .radar-site__bp-badge-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-badge-dose {
  font-family: var(--radar-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-badge-tier {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.radar-site .radar-site__bp-badge-rank { font-size: 14px; color: var(--radar-ink); }

.radar-site .radar-site__bp-badge-meta {
  margin: 0;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--radar-ink-2);
}

.radar-site a.radar-site__bp-badge-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--radar-accent);
  font-size: 14px;
  text-decoration: none;
}

.radar-site a.radar-site__bp-badge-link:hover { text-decoration: underline; }

.radar-site .radar-site__bp-empty-p,
.radar-site .radar-site__bp-door-p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-door {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  box-shadow: inset 4px 0 0 var(--radar-accent);
}

/* ── Controls ────────────────────────────────────────────────────── */
.radar-site a.radar-site__bp-btn,
.radar-site button.radar-site__bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
  border: 1px solid var(--radar-cta);
  border-radius: 999px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.radar-site a.radar-site__bp-btn:hover,
.radar-site button.radar-site__bp-btn:hover,
.radar-site a.radar-site__bp-btn:focus-visible,
.radar-site button.radar-site__bp-btn:focus-visible {
  outline: 2px solid var(--radar-ink);
  outline-offset: 2px;
}

.radar-site a.radar-site__bp-btn--ghost,
.radar-site button.radar-site__bp-btn--ghost {
  border-color: var(--radar-accent);
  background: var(--radar-paper);
  color: var(--radar-accent);
}

.radar-site a.radar-site__bp-btn--big,
.radar-site button.radar-site__bp-btn--big {
  min-height: 52px;
  padding-left: 26px;
  padding-right: 26px;
  font-size: 17px;
}

.radar-site button.radar-site__bp-btn--copy {
  flex: none;
  min-width: 84px;
}

.radar-site .radar-site__bp-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radar-site .radar-site__bp-inline { margin-top: 12px; margin-bottom: 0; }

.radar-site .radar-site__bp-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.radar-site .radar-site__bp-pre {
  margin: 0;
  min-width: 0;
  max-height: 180px;
  overflow: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-paper);
  white-space: pre-wrap;
  word-break: break-all;
}

.radar-site .radar-site__bp-code-block,
.radar-site .radar-site__bp-code {
  font-family: var(--radar-mono);
  font-size: 13px;
  color: var(--radar-ink);
  background: var(--radar-paper);
}

.radar-site .radar-site__bp-ol,
.radar-site .radar-site__bp-ul {
  margin-top: 0;
  margin-bottom: 12px;
  padding-left: 20px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-li { margin-bottom: 8px; }

/* ── The sample storefront the live badge is drawn on ───────────────── */
.radar-site .radar-site__bp-preview { margin-top: 6px; }

.radar-site .radar-site__bp-shop {
  max-width: 460px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid var(--radar-bp-shop-rule);
  border-radius: 12px;
  background: var(--radar-bp-shop);
  color: var(--radar-bp-shop-ink);
}

.radar-site .radar-site__bp-shop--inline {
  display: inline-block;
  margin-bottom: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  padding-right: 14px;
  background: var(--radar-bp-shop);
}

.radar-site .radar-site__bp-shop-url {
  margin-top: 0;
  margin-bottom: 6px;
  font-family: var(--radar-mono);
  font-size: 12px;
  color: var(--radar-bp-shop-muted);
  background: var(--radar-bp-shop);
  overflow-wrap: anywhere;
}

.radar-site .radar-site__bp-shop-name {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--radar-bp-shop-ink);
  background: var(--radar-bp-shop);
}

.radar-site .radar-site__bp-shop-price {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--radar-bp-shop-ink);
  background: var(--radar-bp-shop);
}

.radar-site .radar-site__bp-shop-slot { min-height: 24px; }

.radar-site .radar-site__bp-shop-cart {
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 6px;
  background: var(--radar-bp-shop-ink);
  color: var(--radar-bp-shop);
  font-size: 14px;
  font-weight: 700;
}

/* ── Per-product tags ────────────────────────────────────────────── */
.radar-site .radar-site__bp-item {
  border-top: 1px solid var(--radar-rule);
  padding-top: 4px;
  padding-bottom: 4px;
}

.radar-site .radar-site__bp-item-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-item-body {
  padding-top: 6px;
  padding-bottom: 10px;
}

/* ── Reports, Pro, people ────────────────────────────────────────── */
.radar-site .radar-site__bp-card--locked { border-style: dashed; }

.radar-site .radar-site__bp-pro--on { box-shadow: inset 4px 0 0 var(--radar-cta); }

.radar-site .radar-site__bp-price {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: var(--radar-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-per {
  font-family: var(--radar-text);
  font-size: 15px;
  font-weight: 400;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__bp-options,
.radar-site .radar-site__bp-terms,
.radar-site .radar-site__bp-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.radar-site .radar-site__bp-options button.radar-site__bp-btn,
.radar-site .radar-site__bp-terms button.radar-site__bp-btn,
.radar-site .radar-site__bp-form button.radar-site__bp-btn { justify-self: start; }

.radar-site .radar-site__bp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  color: var(--radar-ink-2);
  cursor: pointer;
}

.radar-site .radar-site__bp-beta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--radar-rule);
}

.radar-site .radar-site__bp-people {
  margin-top: 0;
  margin-bottom: 8px;
  padding-left: 0;
  list-style: none;
}

.radar-site .radar-site__bp-person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--radar-rule);
}

.radar-site .radar-site__bp-person-email {
  font-family: var(--radar-mono);
  color: var(--radar-ink);
  overflow-wrap: anywhere;
}

/* ── The claim door ──────────────────────────────────────────────── */
.radar-site .radar-site__bp-steps {
  position: relative;
  margin-top: 18px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.radar-site .radar-site__bp-steps-li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--radar-ink);
}

.radar-site .radar-site__bp-steps-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--radar-cta);
  color: var(--radar-cta-ink);
  font-family: var(--radar-mono);
  font-weight: 700;
}

.radar-site .radar-site__bp-search { display: grid; gap: 8px; }

.radar-site .radar-site__bp-search-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radar-site .radar-site__bp-results {
  margin-top: 18px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.radar-site .radar-site__bp-result {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid var(--radar-rule);
  border-radius: 12px;
  background: var(--radar-panel);
}

.radar-site .radar-site__bp-result-name { font-weight: 700; color: var(--radar-ink); }

.radar-site a.radar-site__bp-pick {
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 18px;
  padding-right: 18px;
  border: 1px solid var(--radar-rule);
  border-radius: 14px;
  background: var(--radar-panel);
  color: var(--radar-ink);
  text-decoration: none;
}

.radar-site a.radar-site__bp-pick:hover,
.radar-site a.radar-site__bp-pick:focus-visible { border-color: var(--radar-accent); }

.radar-site .radar-site__bp-pick-name { font-size: 18px; font-weight: 700; color: var(--radar-ink); }

@media (min-width: 720px) {
  .radar-site .radar-site__bp-hero {
    padding-top: 40px;
    padding-bottom: 32px;
    padding-left: 36px;
    padding-right: 36px;
  }

  .radar-site .radar-site__bp-title { font-size: 52px; }
  .radar-site .radar-site__bp-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .radar-site .radar-site__bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-site .radar-site__bp-step { padding-left: 24px; padding-right: 24px; }

  .radar-site .radar-site__bp-copy {
    flex-direction: row;
    align-items: flex-start;
  }

  .radar-site .radar-site__bp-pre { flex: 1 1 auto; }
  .radar-site .radar-site__bp-search-row { flex-direction: row; }
  .radar-site .radar-site__bp-search-row .radar-site__input { flex: 1 1 auto; }

  .radar-site .radar-site__bp-result {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .radar-site .radar-site__bp-door {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}