/* ============================================
   PROBLEM SECTION
   ============================================ */
.problem {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: clamp(5.5rem, 13vh, 9rem) 0;

  background: var(--bg);
  border-top: 1px solid var(--border-soft);
}

/* Cool accent-2 glow bleeding in from the top-right */
.problem__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 70% 55% at 88% 22%,
      rgba(2, 48, 71, 0.65) 0%,
      transparent 66%
    ),
    radial-gradient(
      ellipse 55% 45% at 5% 90%,
      rgba(251, 133, 0, 0.05) 0%,
      transparent 60%
    );
}

/* ---------- Two-column layout ---------- */
.problem__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* ---------- Head (left) ---------- */
.problem__head {
  position: sticky;
  top: clamp(2rem, 8vh, 5rem);
}

.problem__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent-1);
}

.problem__eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

.problem__title {
  margin-top: 1.15rem;

  font-size: clamp(1.9rem, 4.3vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}

/* The hollow word — present but not fully there */
.problem__ghost {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.45);
}

/* Fallback if text-stroke isn't supported */
@supports not (-webkit-text-stroke: 1px #fff) {
  .problem__ghost {
    color: rgba(255, 255, 255, 0.34);
  }
}

/* ---------- Body (right) ---------- */
.problem__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 2.6vw, 1.8rem);

  max-width: 62ch;
}

.problem__beat {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Problem / consequence beats — dimmer, with a faint teal rule */
.problem__beat--issue {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid rgba(33, 158, 188, 0.22);
  color: var(--text-dim);
}

/* Payoff beat — the landing */
.problem__beat--payoff {
  position: relative;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1.15rem, 2.5vw, 1.55rem) clamp(1.3rem, 3vw, 2rem);

  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  background: linear-gradient(
    90deg,
    rgba(251, 133, 0, 0.13) 0%,
    rgba(251, 133, 0, 0.02) 55%,
    transparent 100%
  );

  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: #fff;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 860px) {
  .problem__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 2.75rem);
  }

  .problem__head {
    position: static;
  }

  .problem__body {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .problem__beat--issue {
    padding-left: 1rem;
  }

  .problem__beat--payoff {
    padding: 1.15rem 1.25rem;
  }
}