/* ═══════════════════════════════════════════════════
   SECTION: problem — source #problem (SALES-01-WHEN-NEED)
═══════════════════════════════════════════════════ */

#problem {
  /* Source is a flat 120px with an 80px override at 640px. --sp-section
     resolves to exactly those values at both widths, so it replaces both. */
  padding: var(--sp-section) 0;
  background: var(--c-bg-2);
  position: relative;
  overflow: hidden;
}
#problem::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(var(--c-accent-rgb), .05), transparent);
}

/* Grid rule, borrowed from the editorial section so the two read as the same
   surface. Strength there is the product of two opacities — .35 on the
   .ed-bg-ph layer and .6 on its ::before — so .2 here lands in the same place;
   .6 alone would be three times heavier than the section it is copying.

   The mask is not decoration. Without it the rule stops dead at the section
   boundary and draws a line across the page where the background changes. */
#problem::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.problem-inner {
  /* An absolutely positioned pseudo-element paints above in-flow content, so
     without this the rule would sit on top of the cards rather than behind
     them. .problem-left is already sticky and was never at risk; the right
     column was. */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.problem-left { position: sticky; top: var(--sp-20) }

.problem-h2 {
  margin: 0 0 var(--sp-5);
}
.problem-body {
  font-size: var(--fs-300);
  color: var(--c-text-3);
  line-height: 1.75;
  margin-bottom: 32px;
}
.problem-cta-note {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  line-height: 1.7;
  margin-top: var(--sp-3);
}

.problem-right { display: flex; flex-direction: column; gap: 2px }

.prob-item {
  padding: 22px var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  transition: background var(--dur-base), border-color var(--dur-base);
}
.prob-item:hover { background: var(--c-bg-3); border-color: var(--c-border) }

.prob-num {
  font-family: var(--f-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-extrabold);
  color: var(--c-text-4);
  flex-shrink: 0;
  width: 24px;
  padding-top: 4px;
  letter-spacing: .04em;
}
.prob-text {
  font-size: var(--fs-300);
  color: var(--c-text-3);
  line-height: 1.75;
}
.prob-text strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: 3px;
}

@media (max-width: 1024px) {
  .problem-inner { grid-template-columns: 1fr; gap: 56px }
  .problem-left { position: static }
}

@media (max-width: 640px) {
  .problem-inner { padding: 0 var(--sp-6); gap: var(--sp-10) }
}