/* hero10 · Вопросы на дизайн-системе site/ds (эскиз sketches/act-11/a.html — номерной аккордеон; утверждён 2026-10-22). */
.q11 > .fa { margin-inline: max(var(--pad), (100% - var(--max)) / 2); }

.q11 .f-h2 { font: 500 var(--ds-fs-h2)/1.1 var(--ds-font-display); letter-spacing: var(--ds-ls-display); text-wrap: balance; margin-top: var(--ds-s-5); }
.q11 .f-ans { font-size: var(--ds-fs-body); line-height: 1.55; color: var(--ds-ink-2); max-width: 62ch; }
.q11 .f-ans a { color: inherit; }
.fa { margin-inline: var(--ds-pad); display: grid; grid-template-columns: 1fr 2fr; gap: var(--ds-s-7); align-items: start; }
.fa-head { position: sticky; top: var(--ds-s-8); }
.fa-list { border-top: 1px solid var(--ds-ink); counter-reset: q; }
.fa-list details { border-bottom: 1px dotted var(--ds-rule); counter-increment: q; }
.fa-list summary { display: grid; grid-template-columns: 56px 1fr 32px; align-items: baseline; gap: var(--ds-s-3); padding-block: var(--ds-s-5); cursor: pointer; list-style: none; font: 500 clamp(17px, 1.5vw, 22px)/1.3 var(--ds-font-display); transition: color var(--ds-dur-fast); }
.fa-list summary::-webkit-details-marker { display: none; }
.fa-list summary::before { content: counter(q, decimal-leading-zero); font-size: var(--ds-fs-small); color: var(--ds-ink-3); }
.fa-list summary::after { content: '+'; justify-self: end; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ds-rule-strong); font: 300 20px/1 var(--ds-font-text); transition: transform .3s var(--ds-ease), background-color .3s, color .3s; align-self: center; }
.fa-list summary:hover { color: var(--ds-accent-ink); }
.fa-list details[open] summary::before { color: var(--ds-accent-ink); }
.fa-list details[open] summary::after { transform: rotate(45deg); background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.fa-list .f-ans { padding: 0 48px var(--ds-s-5) calc(56px + var(--ds-s-3)); }
@media (max-width: 1023px) { .fa { grid-template-columns: 1fr; } .fa-head { position: static; } }
@media (max-width: 767px) { .fa-list summary { grid-template-columns: 36px 1fr 32px; } .fa-list .f-ans { padding-inline: 0; } }