/* ── m3 16 FAQ — maarch-3/sections/16-faq/brief.md ──
   Figma 1:1472 band #e6e6e6 (1599h) · 1:1480 title 700/80 · 1:1484 Q 700/42, A 400/26 justify, x 143 w1649
   Built as native <details open> (expandable, open by default — agreed at sign-off). The small +/− marker is
   an addition to signal the interaction; the design itself shows no marker. */

.m3-faq {
    background: #e6e6e6;
    padding: calc(79 * var(--u)) 0 calc(114 * var(--u));
}
.m3-faq__title { font-size: var(--fs-display); font-weight: 700; line-height: normal; text-align: center; }
.m3-faq__list { margin-top: calc(72.5 * var(--u)); }
.m3-faq details + details { margin-top: calc(74 * var(--u)); }
.m3-faq summary {
    position: relative;
    padding-right: 48px;
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: normal;
    list-style: none;
    cursor: pointer;
}
.m3-faq summary::-webkit-details-marker { display: none; }
.m3-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    font-weight: 400;
    color: var(--skin-coral);
}
.m3-faq details[open] summary::after { content: "\2212"; }
.m3-faq summary:hover { color: var(--m3-text-dark); }
.m3-faq .mk-sup--q { bottom: .55em; margin-left: .1em; }
.m3-faq details p {
    margin-top: calc(35 * var(--u));
    font-size: var(--fs-body);
    line-height: normal;
    text-align: justify;
}

@media (max-width: 991.98px) {
    .m3-faq { padding: 56px 0 64px; }
    .m3-faq__title { font-size: 44px; }
    .m3-faq__list { margin-top: 32px; }
    .m3-faq details + details { margin-top: 0; }
    .m3-faq details { padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
    .m3-faq summary { font-size: 22px; }
    .m3-faq details p { margin-top: 12px; font-size: 16px; line-height: 1.5; text-align: left; }
}