/* ============================================
   v8 — Problem refinements
   - Softer red on neutral cards (01-03)
   - Stronger focus card (04)
   - Cleaner flow line, slight bolder end
   - Looser spacing
   ============================================ */

:root {
  --soft-red: #f87171;       /* softer for 01-03 */
  --focus-red: #dc2626;      /* full red for card 04 */
  --focus-red-soft: #fecaca; /* visible-but-quiet border */
  --focus-red-bg-1: #fffafa;
  --focus-red-bg-2: #fef2f2;
}

/* === Flow line — last phrase darker/bolder === */
.problem-flow-min .pfm-end {
  color: var(--ink);          /* darker, not red */
  font-weight: 700;
  letter-spacing: -0.005em;
}
.problem-flow-min {
  margin-bottom: 64px;        /* more breathing room */
  gap: 20px;
}
.problem-flow-min .pfm-arrow {
  color: #d4dae0;             /* lighter divider */
}

/* === Neutral cards 01-03 — softer red numbers === */
.pcard-min:not(.focus) .pcm-num-big {
  color: var(--soft-red);
  opacity: 0.92;
}
.pcard-min:not(.focus) .pcm-stat {
  border-top-color: #f4f6f9;  /* lighter divider */
}
.pcard-min:not(.focus) {
  padding: 36px 36px 30px;
}

/* slightly looser body spacing */
.pcard-min p {
  margin-bottom: 30px;
}
.pcm-stat {
  padding-top: 24px;
}

/* === Focus card 04 — stronger emphasis === */
.pcard-min.focus {
  background: linear-gradient(180deg, var(--focus-red-bg-1) 0%, var(--focus-red-bg-2) 100%);
  border: 1px solid var(--focus-red-soft);
  box-shadow:
    0 24px 56px -28px rgba(220,38,38,.28),
    0 8px 18px -10px rgba(15,23,42,.08),
    0 1px 2px rgba(15,23,42,.03);
  padding: 38px 38px 34px;
}
.pcard-min.focus::before {
  width: 9px;
  height: 9px;
  top: 24px;
  right: 24px;
  box-shadow: 0 0 0 5px rgba(220,38,38,.13);
}
.pcard-min.focus .pcm-num-big {
  font-size: 48px;             /* up from 40px (~+20%) */
  color: var(--focus-red);
  font-weight: 800;
}
.pcard-min.focus .pcm-stat {
  border-top: 1px solid var(--focus-red-soft);
  padding-top: 26px;
}
.pcard-min.focus h3 b {
  color: var(--focus-red);
}
.pcard-min.focus .pcm-cap {
  color: var(--ink-2);
  font-weight: 600;
}
.pcard-min.focus:hover {
  transform: translateY(-5px);
  box-shadow:
    0 28px 64px -28px rgba(220,38,38,.34),
    0 10px 22px -10px rgba(15,23,42,.10);
}

/* === More space between cards === */
.problem-grid.min {
  gap: 32px;
}
@media (max-width: 760px) {
  .problem-grid.min { gap: 22px; }
}