/* ── m3 06 How approval works — maarch-3/sections/06-approval/brief.md ──
   Figma 1:1457 photo 1941×1091 · 1:1486 gradient (transparent 3.849% → black .51 51.032%) ·
   1:1496 h2 80/74 white @ x113, top +627 · 1:1494 body 26/30 justify white, x 116 → 1805 */

.m3-approval {
    min-height: calc(1091 * var(--u));
    overflow: hidden;
    background: #6b5a48;
    padding: calc(627 * var(--u)) 0 calc(80 * var(--u));
}
.m3-approval::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 3.849%, rgba(0, 0, 0, .51) 51.032%);
}
.m3-approval__inner {
    position: relative;
    z-index: 2;
    width: min(1689px, calc(1689 * var(--u)));   /* x 116 → 1805: wider than the 1684 box */
    margin-inline: auto;
    color: var(--skin-white);
}
.m3-approval__title { margin-left: calc(-3 * var(--u)); font-size: var(--fs-display); font-weight: 400; line-height: calc(74 / 80); }
.m3-approval__title strong { font-weight: 600; }
.m3-approval__body {
    margin-top: calc(26 * var(--u));
    font-size: var(--fs-body);
    line-height: calc(30 / 26);
    text-align: justify;
}

@media (max-width: 991.98px) {
    .m3-approval { min-height: 600px; padding: 280px 0 56px; }
    .m3-approval__inner { width: calc(100% - 2 * var(--skin-gutter)); }
    .m3-approval::after { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .68) 45%); }
    .m3-approval__title { margin-left: 0; font-size: 40px; }
    .m3-approval__body { margin-top: 24px; font-size: 16px; line-height: 1.5; text-align: left; }
}