/* ============================================================
   GAMESTACK.FUN — About page
   Small set of extra classes built on the shared design tokens
   in style.css. Reuses .why-block, .why-points, .audience-strip
   and .cta-banner from the homepage where the shape already fits.
   ============================================================ */

.about-hero {
  padding: 20px 0 36px;
  max-width: 62ch;
}
.about-hero .hero-eyebrow { margin-bottom: 16px; }
.about-hero h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 14px; }
.about-hero p.lede { font-size: 16.5px; color: var(--ink-soft); max-width: 58ch; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 8px 0 4px;
}
.stat-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}
.stat-card .stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card .stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.process-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.process-step .p-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--brand-gradient);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.process-step h4 { font-size: 15.5px; margin-bottom: 3px; }
.process-step p { font-size: 13.5px; color: var(--muted); }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.trust-item {
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--mint);
  color: #0e5636;
}
.trust-item:nth-child(2) { background: var(--sky); color: #123a5c; }
.trust-item:nth-child(3) { background: var(--lavender); color: #4a2496; }
.trust-item .t-icon { margin-bottom: 10px; }
.trust-item h4 { font-size: 15px; margin-bottom: 4px; }
.trust-item p { font-size: 13px; opacity: 0.85; font-weight: 600; }

@media (max-width: 840px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: 1fr; }
}