/* ── m3 09 Why maarch³ — maarch-3/sections/09-why/brief.md ──
   Figma 1:1461 band #ddd @ 53% (727h) · 1:1468 "why" 80/.87 @ x93 + 1:1545 dark logo 377×103 @ (73,+298) ·
   right column @ x551: 1:1462 lead 42/1.22 · 1:1464 · 1:1466 · 1:1465 · 1:1463 coral equation · 1:1467 */

.m3-why {
    background: linear-gradient(rgba(221, 221, 221, .53), rgba(221, 221, 221, .53)), var(--skin-canvas);
    padding: calc(91 * var(--u)) 0 calc(78 * var(--u));
}
.m3-why__inner {
    display: grid;
    grid-template-columns: 478fr 1296fr;
    width: min(1774px, calc(100% - 2 * var(--skin-gutter)));
    margin-inline: auto;
}
.m3-why__title {
    margin-top: calc(155 * var(--u));
    padding-left: calc(20 * var(--u));
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: .87;
}
.m3-why__title img {
    display: block;
    width: calc(377 * var(--u));
    height: calc(103 * var(--u));   /* Figma stretches the 1024×343 logo to fill 377×103 (no cover/contain) */
    object-fit: fill;
    margin: calc(-17.6 * var(--u)) 0 0 calc(-20 * var(--u));
}
.m3-why__body p { font-size: var(--fs-body); line-height: 1.22; }
.m3-why__body .m3-why__lead { max-width: calc(1165 * var(--u)); font-size: var(--fs-sub); }
.m3-why__p1 { margin: calc(65.5 * var(--u)) 0 0 calc(4 * var(--u)); max-width: calc(1102 * var(--u)); }
.m3-why__p2 { margin-top: calc(25.2 * var(--u)); }
.m3-why__p3 { margin: calc(13.7 * var(--u)) 0 0 calc(4 * var(--u)); max-width: calc(1092 * var(--u)); }
.m3-why__body .m3-why__eq { margin-top: calc(93.6 * var(--u)); font-weight: 700; color: var(--skin-coral); }
.m3-why__eq i { font-style: normal; font-weight: 400; }
.m3-why__p4 { margin-top: calc(35.9 * var(--u)); }

@media (max-width: 991.98px) {
    .m3-why { padding: 56px 0; }
    .m3-why__inner { grid-template-columns: 1fr; }
    .m3-why__title { margin: 0 0 32px; padding-left: 0; font-size: 44px; }
    .m3-why__title img { width: 240px; height: 66px; margin: -6px 0 0 -12px; }
    .m3-why__body .m3-why__lead { font-size: 24px; }
    .m3-why__body p { font-size: 17px; line-height: 1.4; }
    .m3-why__p1, .m3-why__p3 { margin-left: 0; }
    .m3-why__p1 { margin-top: 24px; }
    .m3-why__p2, .m3-why__p3, .m3-why__p4 { margin-top: 14px; }
    .m3-why__body .m3-why__eq { margin-top: 28px; }
}