/* ═══════════════════════════════════════════════════════════════════
   BuildX -- /recognition/
   Independent coverage, verified credentials, external footprint.

   WIDTH RULE (2026-08-25 incident): never a fixed pixel cap on a centered
   layout. A fixed 1280px cap filled 40% of Aaron's 2560x1440 display with
   ~763px of dead space per side. Everything here uses clamp(), so the page
   scales at 2560, 1440 and 390 instead of being correct at exactly one width.

   THE CEILING IS 2304px, NOT A ROUND NUMBER I LIKED (2026-09-03).
   My first pass used clamp(320px, 88vw, 1720px). It satisfied the "no fixed px"
   rule and STILL filled only 67% of Aaron's 2560 display, because a clamp whose
   ceiling is too low behaves exactly like a fixed cap once the viewport passes
   it. Measured /about-us/, /our-team/ and /press/ at 2560: every one renders its
   container at 2304px = 90.0vw. So 2304 is not a preference, it is what the rest
   of the site already does, and this page now matches its neighbors instead of
   being a lone narrow column. Caught by _shot_recognition.js, which fails under
   70% fill -- the gate caught its own author.

   Brand tokens live in global.css: --bx-black, --bx-gold, --bx-gold-deep,
   --bx-white, --bx-text-dark, --bx-text-gray.
   ═══════════════════════════════════════════════════════════════════ */

.page-recognition {
  --rec-max: clamp(320px, 90vw, 2304px);
  --rec-line: #E4E4E4;
  --rec-ink-soft: #5A5A5A;
}

.page-recognition .container {
  width: 100%;
  max-width: var(--rec-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 48px);
}

.page-recognition .section {
  padding-block: clamp(44px, 5vw, 88px);
}

/* ── 1. HERO ─────────────────────────────────────────────────────── */
.rec-hero {
  background:
    radial-gradient(90rem 42rem at 78% -18%, rgba(245, 166, 35, .16), transparent 62%),
    linear-gradient(180deg, #0B0B0B 0%, var(--bx-black) 100%);
  border-bottom: 1px solid rgba(245, 166, 35, .28);
}

.rec-hero__label {
  color: var(--bx-gold);
  letter-spacing: .14em;
}

.rec-hero__title {
  font-size: clamp(2.1rem, 4.4vw, 4.25rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.022em;
  margin: 10px 0 0;
  color: var(--bx-white);
}

.rec-hero__lede {
  max-width: 68ch;
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  font-size: clamp(1rem, 1.16vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .82);
}

.rec-hero__lede em {
  color: var(--bx-gold);
  font-style: normal;
  font-weight: 600;
}

.rec-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(12px, 1.3vw, 22px);
  margin-top: clamp(28px, 3vw, 52px);
}

.rec-stat {
  padding: clamp(16px, 1.5vw, 24px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  transition: border-color .18s ease, transform .18s ease;
}

.rec-stat:hover {
  border-color: rgba(245, 166, 35, .5);
  transform: translateY(-2px);
}

.rec-stat__num {
  display: block;
  font-size: clamp(2rem, 2.9vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--bx-gold);
  letter-spacing: -.02em;
}

.rec-stat__label {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .68);
}

/* ── 2. FEATURE CARDS ────────────────────────────────────────────── */
.rec-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(18px, 1.8vw, 30px);
  margin-top: clamp(26px, 2.6vw, 42px);
}

.rec-feature {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.9vw, 34px);
  border: 1px solid var(--rec-line);
  border-radius: 16px;
  background: var(--bx-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.rec-feature:hover {
  border-color: rgba(245, 166, 35, .55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.rec-feature__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rec-line);
}

.rec-feature__pub {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rec-feature__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  background: rgba(245, 166, 35, .12);
  color: var(--bx-gold-deep);
}

.rec-feature__icon svg { width: 22px; height: 22px; }

.rec-feature__publisher {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.2;
}

.rec-feature__host {
  font-size: .75rem;
  color: var(--bx-text-gray);
  letter-spacing: .01em;
}

.rec-feature__position {
  align-self: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--bx-black);
  color: var(--bx-white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}

.rec-feature__title {
  margin: 16px 0 6px;
  font-size: clamp(1.06rem, 1.2vw, 1.32rem);
  font-weight: 700;
  line-height: 1.32;
  color: #1A1A1A;
}

.rec-feature__meta {
  margin: 0;
  font-size: .78rem;
  color: var(--bx-text-gray);
}

.rec-feature__quote {
  position: relative;
  margin: 18px 0 0;
  padding: 16px 18px 16px 46px;
  border-left: 3px solid var(--bx-gold);
  border-radius: 0 10px 10px 0;
  background: #FAFAFA;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--bx-text-dark);
  font-style: italic;
}

.rec-feature__quotemark {
  position: absolute;
  left: 15px;
  top: 15px;
  color: rgba(245, 166, 35, .55);
}

.rec-feature__quotemark svg { width: 20px; height: 20px; display: block; }

.rec-feature__subhead {
  margin: 22px 0 10px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bx-text-gray);
}

.rec-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.rec-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--bx-text-dark);
}

.rec-checklist__icon {
  flex: 0 0 19px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(245, 166, 35, .16);
  color: var(--bx-gold-deep);
}

.rec-checklist__icon svg { width: 12px; height: 12px; }

/* The honest footnote. Styled as a considered note, not an apology. */
.rec-feature__disclaimer {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px dashed #D8D8D8;
  border-radius: 10px;
  background: #FCFCFC;
  font-size: .82rem;
  line-height: 1.58;
  color: var(--rec-ink-soft);
}

.rec-feature__disclaimer strong { color: var(--bx-text-dark); }

.rec-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--bx-gold-deep);
  text-decoration: none;
}

.rec-feature__link svg { width: 16px; height: 16px; }
.rec-feature__link:hover { text-decoration: underline; }

/* ── 3. CREDENTIALS ──────────────────────────────────────────────── */
.rec-creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 1.4vw, 24px);
  margin-top: clamp(24px, 2.4vw, 40px);
}

.rec-cred {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.6vw, 26px);
  border: 1px solid var(--rec-line);
  border-top: 3px solid var(--bx-gold);
  border-radius: 12px;
  background: var(--bx-white);
}

.rec-cred__issuer {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bx-text-gray);
}

.rec-cred__value {
  margin-top: 8px;
  font-size: clamp(1.15rem, 1.35vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1A1A1A;
  font-variant-numeric: tabular-nums;
}

.rec-cred__label {
  margin-top: 3px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--bx-text-dark);
}

.rec-cred__note {
  margin: 10px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--rec-ink-soft);
}

.rec-cred__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bx-gold-deep);
  text-decoration: none;
}

.rec-cred__link svg { width: 14px; height: 14px; }
.rec-cred__link:hover { text-decoration: underline; }

/* ── 4. EXTERNAL FOOTPRINT ───────────────────────────────────────── */
/* THE WIDOW ROW (2026-09-03, caught in the proof shot, not by a test).
   auto-fit produced SEVEN cards on row one and a stranded pair on row two at
   2560 -- arithmetically fine, reads as a broken grid. There are nine listings,
   so an explicit 3-column desktop grid lands a clean 3x3 and 3 columns divide
   9 exactly. The grid is then capped and centered so the cards stay card-sized
   on a 2304px container instead of stretching to 760px each.
   If a tenth listing is ever added, re-shoot: 3x3 is only tidy for multiples
   of three. The numbers on this page are data-driven; this layout is not. */
.rec-listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.2vw, 20px);
  margin-top: clamp(24px, 2.4vw, 40px);
  width: 100%;
  max-width: clamp(320px, 82vw, 1680px);
  margin-inline: auto;
}

@media (min-width: 700px) {
  .rec-listings { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .rec-listings { grid-template-columns: repeat(3, 1fr); }
}

.rec-listing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 1.5vw, 24px);
  border: 1px solid var(--rec-line);
  border-radius: 12px;
  background: var(--bx-white);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.rec-listing:hover {
  border-color: rgba(245, 166, 35, .6);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
}

.rec-listing__cat {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--bx-gold-deep);
}

.rec-listing__name {
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
}

.rec-listing__summary {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--rec-ink-soft);
}

.rec-listing__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--bx-text-gray);
}

.rec-listing__go svg { width: 13px; height: 13px; }

/* ── 5. CTA ──────────────────────────────────────────────────────── */
.rec-cta {
  background:
    radial-gradient(70rem 34rem at 22% 118%, rgba(245, 166, 35, .17), transparent 60%),
    var(--bx-black);
  text-align: center;
}

.rec-cta__title {
  font-size: clamp(1.7rem, 2.7vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--bx-white);
}

.rec-cta__text {
  max-width: 60ch;
  margin: 14px auto 0;
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .78);
}

.rec-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(22px, 2.2vw, 34px);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
/* ==========================================================================
   PRESS CITATIONS (2026-09-04) -- Buz quoted as an industry source.

   Visually distinct from .rec-feature on purpose: a citation's payload is the
   QUOTE, not a checklist of verified attributes, so the quote is the largest
   element in the card. Three cards, so the grid floor is smaller than the
   features grid (which is 430px for two) -- 320px lets three sit in a row on a
   2560 display and reflow to two, then one, without a media query.

   Same width discipline as the rest of the file: no fixed pixel caps, and
   overflow-wrap on the quote so a long unbroken URL or name cannot force a
   horizontal scrollbar at 390px.
   ========================================================================== */

.rec-cites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(26px, 2.6vw, 42px);
}

.rec-cite {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.8vw, 30px);
  border: 1px solid var(--rec-line);
  border-radius: 16px;
  background: var(--bx-white);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.rec-cite:hover {
  border-color: rgba(245, 166, 35, .55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .07);
}

.rec-cite__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rec-cite__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: rgba(245, 166, 35, .12);
  color: var(--bx-gold-deep);
}

.rec-cite__icon svg { width: 19px; height: 19px; display: block; }

.rec-cite__meta { min-width: 0; }

.rec-cite__publisher {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1A1A1A;
}

.rec-cite__host {
  display: block;
  font-size: .74rem;
  color: var(--bx-text-gray);
  letter-spacing: .01em;
}

.rec-cite__title {
  margin: 15px 0 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rec-ink-soft);
}

.rec-cite__quote {
  margin: 15px 0 0;
  padding: 15px 17px;
  border-left: 3px solid var(--bx-gold);
  border-radius: 0 10px 10px 0;
  background: #FAFAFA;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--bx-text-dark);
  font-style: italic;
}

.rec-cite__attrib {
  margin-top: 10px;
  font-size: .8rem;
  font-style: normal;
  font-weight: 700;
  color: var(--bx-text-gray);
}

.rec-cite__subject {
  margin: 15px 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--bx-text-dark);
}

/* The verification line. Two of these sources are paywalled and cannot be
   machine-checked, so the page says who confirmed them rather than pretending
   a link the reader cannot open speaks for itself. */
.rec-cite__verify {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--bx-text-gray);
}

.rec-cite__verify svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  color: #1B7A43;
}

.rec-cite__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--bx-gold-deep);
  text-decoration: none;
}

.rec-cite__link:hover { text-decoration: underline; }
.rec-cite__link svg { width: 16px; height: 16px; flex: 0 0 16px; }

@media (max-width: 640px) {
  .page-recognition { --rec-max: 100%; }

  .rec-feature__head { flex-direction: column; align-items: flex-start; }
  .rec-feature__position { align-self: flex-start; white-space: normal; }

  /* A long license string must never force a horizontal scrollbar.
     (2026-09-02: a 326px unbreakable filename overflowed 390px by 38px.) */
  .rec-cred__value,
  .rec-listing__summary,
  .rec-feature__quote,
  .rec-cite__quote,
  .rec-cite__title { overflow-wrap: anywhere; }

  .rec-cta__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-stat, .rec-listing, .rec-feature, .rec-cite { transition: none; }
  .rec-stat:hover, .rec-listing:hover { transform: none; }
}