/* ── m3 13 Stages — maarch-3/sections/13-stages/brief.md ──
   Figma 1:1385 lead 600/26 coral · 1:1431 fees 300/26/1.22 w1435 · 1:1539 hairline 1656×2 black 13% ·
   columns x 142 / 714 / 1302 (w 470 / 484 / 495): label 26 coral · title 700/42 #3a3a3a · duration 26 · body 26/30 justify
   Column 2: label + duration centred, title left · Column 3: header right-aligned, body left */

.m3-stages {
    background: var(--skin-canvas);
    padding: calc(19.5 * var(--u)) 0 calc(70 * var(--u));
}
.m3-stages__lead { font-size: var(--fs-body); font-weight: 600; line-height: 1; color: var(--skin-coral); }
.m3-stages__fees {
    max-width: calc(1435 * var(--u));
    margin-top: calc(15.3 * var(--u));
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.22;
}
.m3-stages__grid {
    display: grid;
    grid-template-columns: 470fr 484fr 495fr;
    column-gap: calc(103.5 / 1656 * 100%);
    margin: calc(47 * var(--u)) 0 0;
    padding: calc(42.5 * var(--u)) 0 0;
    border-top: 2px solid rgba(0, 0, 0, .13);
    list-style: none;
}
.m3-stage { color: var(--m3-text-stage); }
.m3-stage__label, .m3-stage__time { display: block; font-size: var(--fs-body); line-height: 1; }
.m3-stage__label { color: var(--skin-coral); }
.m3-stage__title { margin-top: calc(14.5 * var(--u)); font-size: var(--fs-sub); font-weight: 700; line-height: 1; }
.m3-stage__time { margin-top: calc(8.5 * var(--u)); }
.m3-stage p { margin-top: calc(35.5 * var(--u)); font-size: var(--fs-body); line-height: calc(30 / 26); text-align: justify; }
.m3-stage--center .m3-stage__label, .m3-stage--center .m3-stage__time { text-align: center; }
.m3-stage--right .m3-stage__label, .m3-stage--right .m3-stage__title, .m3-stage--right .m3-stage__time { text-align: right; }

@media (max-width: 991.98px) {
    .m3-stages { padding: 32px 0 56px; }
    .m3-stages__fees { font-size: 17px; }
    .m3-stages__grid { grid-template-columns: 1fr; row-gap: 40px; margin-top: 32px; padding-top: 32px; }
    .m3-stage--center .m3-stage__label, .m3-stage--center .m3-stage__time,
    .m3-stage--right .m3-stage__label, .m3-stage--right .m3-stage__title, .m3-stage--right .m3-stage__time { text-align: left; }
    .m3-stage__title { font-size: 28px; margin-top: 8px; }
    .m3-stage p { margin-top: 16px; font-size: 17px; line-height: 1.5; text-align: left; }
}