/* landing-badges.css — scannable benefit chips for the hero + the refined band.
   One shared .qf-chip component drives both rows so they stay visually identical.

   Dark page only (body.qf-wft): light, high-contrast text on a hairline surface,
   and a periwinkle (#6E8BFF) check. This page forces --accent to cobalt
   (#0d3cfc), which fails contrast on the dark bg — so the accent here is the
   readable on-dark periwinkle, never var(--accent). Loaded LAST. */

/* ── Shared chip ──────────────────────────────────────────────────────────── */
body.qf-wft .qf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(245, 252, 255, 0.14);
  background: rgba(245, 252, 255, 0.04);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(245, 252, 255, 0.92);
  white-space: nowrap;
}

body.qf-wft .qf-chip-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #6E8BFF; /* periwinkle check — readable accent, not the forced cobalt */
}

/* ── No-orphan pill/badge/chip row utility (GLOBAL, reusable) ────────────────
   Alex's global rule: a group of similar small elements (pills / badges / chips
   / buttons) must NEVER wrap so a single item sits alone on a line. Keep >=2 per
   line — shrink the inter-item gap (and, at narrow widths, the pill padding/font)
   to stay inline; when they must wrap, wrap into EVEN rows via a fixed column
   grid (4 -> 2x2), never 3+1. Odd counts stay all-on-one-line via an N-column
   grid so the single row can't drop to a lone item. Reuse anywhere by adding
   .qf-pill-row plus a count modifier to the group container.
   Guard-safe: no #fff/#000 literals; spacing on the 8px ramp — the narrow-width
   gap/padding step down to on-ramp 4/8 values to tighten before wrapping. */
.qf-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (max-width: 400px) {
  .qf-pill-row { gap: 4px; } /* ramp step down (8 -> 4): tighten the gap before wrapping */
}

/* Balanced-wrap variants — force N content-sized columns so a group of similar
   items never leaves a lone item on a line (4 -> cols2 = 2x2; a triple -> cols3
   stays 3-across). minmax(0,max-content) keeps columns content-sized when there
   is room and lets them shrink (chip text wrapping) at narrow widths, so the
   N-across layout holds down to 320px without overflow or an orphan row. */
.qf-pill-row--cols2,
.qf-pill-row--cols3 {
  display: grid;
  align-items: stretch;
}
.qf-pill-row--cols2 { grid-template-columns: repeat(2, minmax(0, max-content)); }
.qf-pill-row--cols3 { grid-template-columns: repeat(3, minmax(0, max-content)); }
.qf-pill-row--start  { justify-content: start; }
.qf-pill-row--center { justify-content: center; }

/* Items in a balanced grid must be able to wrap their label so a column can
   shrink instead of overflowing — this is what preserves >=2 per line at 320px. */
.qf-pill-row--cols2 > *,
.qf-pill-row--cols3 > * { min-width: 0; white-space: normal; }
/* .qf-chip forces white-space:nowrap under body.qf-wft (higher specificity), so
   re-allow wrapping for chips that live inside a balanced grid. */
body.qf-wft .qf-pill-row--cols2 > .qf-chip,
body.qf-wft .qf-pill-row--cols3 > .qf-chip { white-space: normal; }

/* ── Hero benefit pills (4, left-aligned under the CTA/trial line) ───────────
   Uses .qf-pill-row--cols2 in the HTML → always a balanced 2x2, never 3+1 or a
   lone pill, from 1440px down to 320px. */
body.qf-wft .qf-hero-pills {
  margin-top: 24px;
  max-width: 520px;
}

/* ── Refined-band badges (3, centered under the short line) ──────────────────
   Uses .qf-pill-row--cols3 in the HTML → held 3-across so they never drop to a
   2+1 orphan; columns shrink and labels wrap at the smallest widths. */
body.qf-wft .qf-refined-badges {
  margin-top: 24px;
}

@media (max-width: 640px) {
  /* On mobile, .hero-copy is display:contents and every hero child gets an
     explicit order (eyebrow 1 … demo-link 8). Without an order the pills
     default to 0 and float above the H1. Place them last, under the CTA
     cluster, so they read as a supporting scannable row — never above the H1. */
  body.qf-wft .qf-hero-pills {
    order: 9;
    margin-top: 16px;
  }
  body.qf-wft .qf-refined-badges { margin-top: 16px; }
}

/* At the smallest widths, trim chip padding/font a touch so the 2–3 columns stay
   comfortable and wrap as little as possible (shrink-before-wrap; ramp step down
   from 8/12 to 4/8). */
@media (max-width: 380px) {
  body.qf-wft .qf-hero-pills .qf-chip,
  body.qf-wft .qf-refined-badges .qf-chip {
    padding: 4px 8px;
    font-size: 12px;
    gap: 4px;
  }
}