/* ============================================================================
   Community band 5 — the four-up numbers strip.
   Figma 774:121781 "Frame 2147259240" (1512 x 365). Markup:
   fragments/comm-stats.html.

   The second light band on the page: the frame paints #FFFFFF -> #EBEDF2 and
   every value is dark, not white. It reads as one continuous surface with the
   voices band above it, which is why that band ends on #FFFFFF and this one
   starts there.

   Four columns of 334 at x 40 / 406 / 772 / 1138 — a 366 pitch, so 32 of gap.
   Each is a 1px rule, then a 32 gap, then label + value.
   ========================================================================= */

.afxq {
  position: relative; box-sizing: border-box; min-height: 365px;
  padding: 100px var(--gutter) 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEDF2 100%);
  font-family: var(--font-sans);
}

.afxq__inner {
  width: 100%; max-width: var(--page); margin: 0 auto;
  display: flex; flex-direction: row; gap: 32px; align-items: flex-start;
}

/* 774:121782 etc — 334x145, column, gap 32 */
.afxq__stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
/* 774:121783 — 1px CENTER stroke at rgba(0,0,0,.25): the light-band mirror of
   the hero strip's rgba(255,255,255,.25). */
.afxq__rule { width: 100%; height: 1px; margin-bottom: -1px; background: rgba(0,0,0,.25); }
/* 774:121784 — column, gap 12 */
.afxq__body { display: flex; flex-direction: column; gap: 12px; }

/* 774:121785 — Saans 400 / 14 / 21px, #000000 at node opacity .8 */
.afxq__label {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-black); opacity: .8;
}

/* 774:121786 etc — SF Pro 510 / 80 / 80px / ls -2.4px. Two stacked ramps; the
   upper (#263F42 -> #738C89) is the one that renders. Each value has its own
   box width, so each gets its own re-derived angle and stops — a single shared
   gradient would land the fade in a different place on every number. */
.afxq__value {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}
/* 774:121786 — 302x80 */
.afxq__stat:nth-child(1) .afxq__value { background-image: linear-gradient(134deg, #263F42 43.13%, #738C89 78.57%); }
/* 774:121791 — 286x80 */
.afxq__stat:nth-child(2) .afxq__value { background-image: linear-gradient(135.6deg, #263F42 41.8%, #738C89 78.36%); }
/* 774:121796 — 168x80 */
.afxq__stat:nth-child(3) .afxq__value { background-image: linear-gradient(150.1deg, #263F42 25%, #738C89 75.62%); }
/* 774:121801 — 288x80 */
.afxq__stat:nth-child(4) .afxq__value { background-image: linear-gradient(135.4deg, #263F42 41.98%, #738C89 78.38%); }

@media (max-width: 1180px) {
  .afxq { min-height: 0; padding-bottom: 40px; }
  .afxq__inner { flex-wrap: wrap; }
  .afxq__stat { flex: 1 1 40%; }
  .afxq__value { font-size: 56px; line-height: 60px; letter-spacing: -1.68px; }
}
@media (max-width: 720px) {
  /* 774:142711 — 345-wide rows, 139 pitch, in one column */
  .afxq { padding: 80px var(--gutter) 40px; }
  .afxq__inner { flex-direction: column; gap: 32px; }
  .afxq__stat { flex: none; }
  .afxq__value { font-size: 48px; line-height: 52px; letter-spacing: -1.44px; }
}