/*
 * Problem showcase
 * One shared canvas for the headline, three pain-point scenes and the CTA.
 * The frame intentionally removes the visual break between the story and its
 * action while retaining the existing responsive content order.
 */
.problem-showcase__frame {
  background:
    radial-gradient(circle at 7% 12%, rgba(185, 229, 217, .48) 0 1px, transparent 1.5px),
    linear-gradient(124deg, rgba(185, 229, 217, .58) 0%, rgba(255, 249, 235, .96) 42%, rgba(255, 249, 235, .98) 100%);
  border: 1px solid rgba(39, 52, 71, .16);
  border-radius: clamp(28px, 3vw, 44px);
  box-shadow: 0 20px 44px rgba(39, 52, 71, .06);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 3.5vw, 64px) clamp(24px, 3vw, 54px) 0;
  position: relative;
}

.problem-showcase__frame::before {
  background: radial-gradient(circle, rgba(155, 203, 138, .28) 0 3px, transparent 3.5px) 0 0 / 32px 32px;
  content: "";
  height: 180px;
  opacity: .38;
  pointer-events: none;
  position: absolute;
  right: -22px;
  top: 14px;
  width: 260px;
  z-index: -1;
}

.problem-showcase__heading {
  min-height: clamp(142px, 10vw, 176px);
  padding: 0 clamp(2px, .45vw, 8px);
}

.problem-showcase__mascot { right: clamp(18px, 3vw, 58px); top: -8px; }

.problem-showcase__cards {
  background: rgba(255, 249, 235, .35);
  border: 1px solid rgba(39, 52, 71, .1);
  border-radius: 28px;
  gap: 0;
  margin-top: clamp(10px, 1.2vw, 22px);
  overflow: hidden;
}

.problem-showcase__cards::before {
  background: repeating-linear-gradient(90deg, rgba(57, 116, 74, .33) 0 8px, transparent 8px 18px);
  content: "";
  height: 2px;
  left: 12%;
  pointer-events: none;
  position: absolute;
  right: 12%;
  top: clamp(132px, 11.6vw, 184px);
  z-index: -1;
}

.problem-showcase .pain-card {
  padding: 0 clamp(18px, 2vw, 34px) clamp(22px, 2.2vw, 34px);
  position: relative;
}

.problem-showcase .pain-card + .pain-card::before {
  background: linear-gradient(180deg, transparent, rgba(39, 52, 71, .14) 10%, rgba(39, 52, 71, .14) 88%, transparent);
  content: "";
  left: 0;
  position: absolute;
  top: clamp(34px, 2.6vw, 48px);
  bottom: clamp(28px, 2.8vw, 46px);
  width: 1px;
}

.problem-showcase__scene { position: relative; z-index: 1; }
.problem-showcase__scene img { position: relative; z-index: 1; }

.problem-showcase__cta {
  background: transparent;
  border: 0;
  grid-column: 1 / -1;
  /* One shared next step after the three pain points: resume from the reading edge. */
  justify-content: flex-start;
  margin: 0;
  padding: clamp(14px, 1.35vw, 20px) clamp(22px, 2.7vw, 44px) clamp(24px, 2.2vw, 34px);
  position: relative;
}

.problem-showcase__cta::before { display: none; }

@media (max-width: 850px) {
  .problem-showcase__frame { padding: 34px 28px 0; }
  .problem-showcase__heading { padding: 0; }
  .problem-showcase__cards { border-radius: 22px; }
  .problem-showcase__cards::before { display: none; }
  .problem-showcase .pain-card + .pain-card::before {
    background: linear-gradient(90deg, transparent, rgba(39, 52, 71, .14) 15%, rgba(39, 52, 71, .14) 85%, transparent);
    bottom: auto;
    height: 1px;
    left: 28px;
    right: 28px;
    top: 0;
    width: auto;
  }
  .problem-showcase__cta {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 560px) {
  .problem-showcase__frame { border-radius: 24px; padding: 28px 18px 0; }
  .problem-showcase__cards { border-radius: 18px; }
  .problem-showcase .pain-card { padding: 0 18px 30px; }
  .problem-showcase .pain-card + .pain-card::before { left: 18px; right: 18px; }
  .problem-showcase__cta { padding: 20px 18px 24px; }
}