/* =============================================================
   why.css
   "Why we built this" section. Centered, narrow, emotional.
   ============================================================= */

.why {
  background: var(--color-bg-alt);
  text-align: center;
}

.why__inner {
  max-width: var(--content-narrow-width);
  margin: 0 auto;
}

.why__headline {
  font-size: clamp(32px, 4.4vw, 46px);
  margin-bottom: 36px;
  letter-spacing: 0.005em;
}

/* Punchy pain points appear before the explanation in flowing text */
.why__pains {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-bottom: 24px;
  letter-spacing: 0.005em;
}

.why__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .why__headline {
    margin-bottom: 28px;
  }

  .why__pains {
    margin-bottom: 20px;
  }
}