/* =========================================================
   03 The problem (Figma 292:236) — black section
   All selectors prefixed .problem
   The founder video band (02-pov) overlaps the top of this section by
   --pov-overlap (≈260px at 1512). Figma puts the label 380px below the
   section top = overlap + 120, so the top padding tracks that variable.
   ========================================================= */

.problem {
  padding-top: var(--section-pad); /* band sits in flow above; Figma: label 120px below band */
  padding-bottom: calc(var(--section-pad) + 16px);
}

.problem .eyebrow__num { color: var(--faint); }

.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 643px) minmax(0, 666px);
  justify-content: space-between;
  align-items: start;
  column-gap: 60px;
}

/* ---------- left ---------- */
.problem__title { max-width: 604px; }
.problem__body  { max-width: 643px; margin-top: 24px; letter-spacing: -0.02em; }
.problem__btn   { margin-top: 32px; }
.problem__btn img { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.problem__btn:hover img { transform: translateX(3px); }

/* ---------- right: numbered list ---------- */
.problem__item {
  display: grid;
  grid-template-columns: 63px minmax(0, 1fr);
  padding-block: 32px 30px;
  border-top: 1px solid var(--rule);
}
.problem__item:first-child { padding-top: 0; border-top: 0; }
.problem__item:last-child  { padding-bottom: 0; }

.problem__num { padding-top: 3px; letter-spacing: -0.02em; }
.problem__text { max-width: 579px; }
.problem__item-title { max-width: 560px; color: var(--white); }
.problem__item-body  { margin-top: 10px; letter-spacing: -0.02em; }

/* ---------- tablet / mobile ---------- */
@media (max-width: 1100px) {
  .problem__grid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .problem__title { max-width: 640px; }
}
@media (max-width: 720px) {
  .problem__grid { row-gap: 48px; }
  .problem__body { margin-top: 20px; font-size: 16px; }
  .problem__btn  { margin-top: 28px; }
  .problem__item { grid-template-columns: 40px minmax(0, 1fr); padding-block: 24px 22px; }
  .problem__item-title { font-size: 20px; }
}