/* ── 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-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --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-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-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: 11.5px;
  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); }

/* ── 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: 11px;
  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: 11px;
  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: 15px;
  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; }

.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: 10.5px;
  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;
}

/* ── 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: 10px;
  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: 11.5px;
  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: 11px;
  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: 10px;
  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: 10.5px;
  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__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: 11px;
  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: 11px;
  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);
}

/* ── 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: 11px;
  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: 11px;
  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: 11.5px;
  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: 11px;
  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);
}

/* 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: 11.5px;
  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;
  }
}