/* ── m3 15 Insight — maarch-3/sections/15-insight/brief.md ──
   Figma 1:1479 title 700/80 coral · articles: title 42 (1:1481–1:1483) · question 500/26/34 + blank line +
   body 26/34 (1:1408–1:1410) · icons 1:1513 (1378,+58) 372w · 1:1573 (1442,+89) 308w · 1:1572 (1452,+93) 287w
   (body copy is the same placeholder in all three — to be replaced in the CMS) */

.m3-insight {
    background: var(--skin-canvas);
    padding: calc(111 * var(--u)) 0 calc(115 * var(--u));
}
.m3-insight__title { font-size: var(--fs-display); font-weight: 700; line-height: normal; color: var(--skin-coral); }

.m3-article { position: relative; margin-top: calc(69 * var(--u)); }
.m3-article--1 { margin-top: calc(68.5 * var(--u)); }
.m3-article h3 { font-size: var(--fs-sub); font-weight: 400; line-height: normal; }
.m3-article h3 a { transition: color .2s ease; }
.m3-article h3 a:hover { color: var(--skin-coral); }
.m3-article--2 h3 { max-width: calc(1089 * var(--u)); }
.m3-article--3 h3 { max-width: calc(1012 * var(--u)); }
.m3-article p { max-width: calc(873 * var(--u)); font-size: var(--fs-body); line-height: calc(34 / 26); }
.m3-article--1 p { max-width: calc(853 * var(--u)); }
.m3-article .m3-article__q { margin-top: calc(35 * var(--u)); font-weight: 500; }
.m3-article__q + p { margin-top: calc(34 * var(--u)); }
.m3-article__icon { position: absolute; height: auto; }
.m3-article--1 .m3-article__icon { left: calc(1236 / 1656 * 100%); top: calc(58 * var(--u)); width: calc(372 * var(--u)); }
.m3-article--2 .m3-article__icon { left: calc(1300 / 1656 * 100%); top: calc(89 * var(--u)); width: calc(308 * var(--u)); }
.m3-article--3 .m3-article__icon { left: calc(1310 / 1656 * 100%); top: calc(93 * var(--u)); width: calc(287 * var(--u)); }

@media (max-width: 991.98px) {
    .m3-insight { padding: 56px 0 64px; }
    .m3-insight__title { font-size: 44px; }
    .m3-article, .m3-article--1 { margin-top: 44px; padding-right: 140px; }
    .m3-article h3 { font-size: 24px; }
    .m3-article p { font-size: 16px; line-height: 1.5; }
    .m3-article .m3-article__q { margin-top: 14px; }
    .m3-article__q + p { margin-top: 10px; }
    .m3-article__icon,
    .m3-article--1 .m3-article__icon, .m3-article--2 .m3-article__icon, .m3-article--3 .m3-article__icon {
        left: auto; right: 0; top: 0; width: 110px;
    }
}
@media (max-width: 575.98px) {
    .m3-article, .m3-article--1 { padding-right: 0; padding-top: 90px; }
    .m3-article__icon,
    .m3-article--1 .m3-article__icon, .m3-article--2 .m3-article__icon, .m3-article--3 .m3-article__icon { left: 0; right: auto; width: 80px; }
}