/* ── m3 07 The problem — maarch-3/sections/07-problem/brief.md ──
   Figma 1:1394 eyebrow · 1:1401 h2 80/75 tracking −0.8 · 1:1400 body 26/30 justify w1130 ·
   quote card 1:1427 #f8f5ef 412×410 @ (1390,4484) with 12px #666 left rule (1:1426) · 1:1429 quote · 1:1430 byline */

.m3-problem {
    background: var(--skin-canvas);
    padding: calc(101 * var(--u)) 0 calc(61 * var(--u));
}
.m3-problem__inner { display: flex; justify-content: space-between; align-items: flex-start; }
.m3-problem__text { width: calc(1130 / 1684 * 100%); margin-left: calc(-5 * var(--u)); }
.m3-problem__eyebrow { font-size: var(--fs-sub); font-weight: 600; line-height: 1; color: var(--skin-coral); }
.m3-problem__title {
    margin-top: calc(27 * var(--u));
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: calc(75 / 80);
    letter-spacing: -0.01em;
}
.m3-problem__title strong { font-weight: 600; }
.m3-problem__body { margin-top: calc(71 * var(--u)); }
.m3-problem__body p { font-size: var(--fs-body); line-height: calc(30 / 26); text-align: justify; }
.m3-problem__body p + p { margin-top: calc(30 * var(--u)); }

.m3-problem__quote {
    flex: none;
    width: calc(424 * var(--u));
    min-height: calc(410 * var(--u));
    margin: calc(190 * var(--u)) 0 0;
    padding: calc(28 * var(--u)) calc(33 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
    background: #f8f5ef;
    border-left: max(6px, calc(12 * var(--u))) solid #666;
}
.m3-problem__quote p { font-size: var(--fs-body); font-weight: 600; line-height: calc(31 / 26); }
.m3-problem__quote footer { margin-top: calc(169 * var(--u)); font-size: var(--fs-body); line-height: calc(29 / 26); }
.m3-problem__quote strong { font-weight: 600; }

@media (max-width: 991.98px) {
    .m3-problem { padding: 64px 0 56px; }
    .m3-problem__inner { flex-direction: column; }
    .m3-problem__text { width: 100%; margin-left: 0; }
    .m3-problem__title { margin-top: 16px; font-size: 40px; line-height: 1.05; }
    .m3-problem__body { margin-top: 32px; }
    .m3-problem__body p + p { margin-top: 20px; }
    .m3-problem__quote { width: 100%; max-width: 520px; min-height: 0; margin-top: 40px; padding: 24px 28px; }
    .m3-problem__quote footer { margin-top: 32px; }
}
@media (max-width: 767.98px) {
    .m3-problem__body p { text-align: left; line-height: 1.5; }
}