/* ============================================
   Customer success — key results stat blocks.
   Muted bg, 3-up stat columns. No section title — the bg shift
   alone separates this band from the hero above + article below.

   Section bg rhythm: dark hero → muted key results → white article
   → muted related → dark CTA.
   ============================================ */

.gs-cs-results {
  background: var(--color-bg-muted);
  color: var(--color-fg);
  padding: 5rem 1.5rem;
}

.gs-cs-results__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
}

.gs-cs-results__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.gs-cs-results__stat {
  /* Left-aligned — case-study data points in a row, not trophy
     stats. Centered would force narrower text blocks. */
  text-align: left;
}

.gs-cs-results__stat-value {
  /* 3rem — one notch smaller than homepage Customer Outcomes
     stats (4rem). Customer-story results section is text-dense
     (next to article body), so values don't need to compete as
     hard for attention. */
  font-size: 3rem;
  font-weight: var(--weight-bold);
  color: var(--color-brand-accent);
  line-height: 1;
  margin-bottom: 1rem;
}

/* Optional unit suffix span — drops the unit to --text-h2 so the
   number stays dominant. Use only when the unit needs visual
   hierarchy inside the value. */
.gs-cs-results__stat-value-unit {
  font-size: var(--text-h2);
}

.gs-cs-results__stat-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.5rem;
}

.gs-cs-results__stat-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  max-width: 36ch;
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* Tablet: 2-column stats grid (2 in row 1, 1 wrapping below).
     Stops the 3-up from getting too cramped at tablet widths. */
  .gs-cs-results__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  .gs-cs-results { padding: 3rem 1.5rem; }
}

@media (max-width: 640px) {
  /* Mobile: 1-column stats stack, centered. Left-alignment leaves
     dangling whitespace on the right of each block and reads as a
     bullet list. Centering gives each stat its own column of
     attention so the big coral numbers feel like monuments. */
  .gs-cs-results__stats {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: none;
  }
  .gs-cs-results__stat { text-align: center; }
  .gs-cs-results__stat-desc {
    margin: 0 auto;
    text-wrap: balance;
  }
}