/* «Вопросы» A–E. A — аккордеон (стили .qa в sections.css). B «Две колонки» · C «Вкладки-вопросы» · D «Поиск» · E «Чат».
   Во всех вариантах одни и те же 5 вопросов — те же, что в FAQPage JSON-LD. */
.faq .vv { margin-top: var(--gap-h); }
.faq .vv .faq__list { max-width: 880px; }
.faq > .wrap > .more { margin-top: var(--s5); }

/* C — список вопросов слева, ответ справа; на телефоне — как аккордеон */
.fc { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-d); }
.fc__q { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: var(--s3); align-items: baseline; width: 100%; padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line-d); text-align: left; color: var(--t-d2); font: var(--w-h) calc(1.1875rem * var(--k-h))/1.3 var(--f-serif); transition: color 250ms ease; }
.fc__q::before { content: ""; position: absolute; left: -12px; right: 0; top: 0; bottom: 0; z-index: -1; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 14%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease-out); }
.fc__q[aria-selected="true"] { color: var(--t-d); }
.fc__q[aria-selected="true"]::before { transform: scaleX(1); }
.fc__n { font: 500 .875rem/1 var(--f-num); color: var(--gold-hi); }
@media (hover: hover) and (pointer: fine) { .fc__q:hover { color: var(--t-d); } }
.fc { isolation: isolate; }
.fc__a { padding: var(--s4) 0 var(--s5); color: var(--t-d2); font-size: var(--fs-lead); line-height: 1.6; }
.fc__qq { display: none; }
@media (min-width: 900px) {
  .fc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8); border-top: 0; }
  .fc__q { grid-column: 1; }
  .fc__q:first-of-type { border-top: 1px solid var(--line-d); }
  .fc__a { grid-column: 2; grid-row: 1 / span 5; align-self: start; padding: var(--s6); border-radius: var(--r-card); background: color-mix(in srgb, var(--t-d) 4%, transparent); border: 1px solid var(--line-d); }
  .fc__qq { display: block; margin-bottom: var(--s4); font: var(--w-h) calc(clamp(1.375rem, 1rem + 1vw, 1.875rem) * var(--k-h))/1.2 var(--f-serif); color: var(--t-d); }
}
