/* ============================================================================
   Страница «Частые вопросы» (/faq). Раньше это была последняя секция главной —
   оформление вопросов перенесено оттуда без изменений, отступы страницы —
   как у отзывов (bl-reviews.css).
   ========================================================================== */

/* <main> на всех страницах отступает под шапку на 96 (шапка + 16); расстояние
   до заголовка отмеряем внутри секции. Полосу тех-работ не трогаем. */
body:has(.bl-faq):not(.maint-on) .app-main {
    padding-top: var(--bl-header-h) !important;
}

.bl-faq { position: relative; padding: 60px 0 96px; }
/* То же мягкое свечение справа, что на странице отзывов. */
.bl-faq::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 75% at 100% 32%,
                                rgba(138, 92, 245, .13) 0%,
                                rgba(138, 92, 245, .05) 45%,
                                rgba(138, 92, 245, 0) 72%);
}
.bl-faq > .bl-container { position: relative; z-index: 1; }

.bl-faq__title {
    margin: 0 0 44px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Строки-вопросы в спокойной тёмной карточке, раскрытая подсвечивается
   фиолетовым. Насыщенную заливку не берём — девять строк подряд под ней
   читаются как стена. */
.bl-faq__list { display: flex; flex-direction: column; gap: 14px; }
.bl-faq__item {
    border-radius: 22px;
    border: 1px solid var(--bl-hairline);
    background: rgba(255, 255, 255, .04);
    transition: border-color .18s ease, background .18s ease;
}
.bl-faq__item:hover { border-color: rgba(190, 168, 255, .40); }
.bl-faq__item[open] {
    border-color: rgba(138, 92, 245, .55);
    background: rgba(138, 92, 245, .10);
}
/* Нативный треугольник убираем (в Safari он висит на ::-webkit-details-marker,
   в остальных — на list-style), вместо него свой «+». */
.bl-faq__q {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    cursor: pointer;
    /* Переход по якорю /faq#faq-N не должен прятать вопрос под шапку. */
    scroll-margin-top: calc(var(--bl-header-h) + 12px);
}
.bl-faq__q::-webkit-details-marker { display: none; }
/* Рамку фокуса рисуем ВНУТРЬ строки: снаружи она у раскрытого вопроса
   ложилась на первую строку ответа. */
.bl-faq__q:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: -2px; border-radius: 22px; }
.bl-faq__qtext { flex: 1 1 auto; font-size: 20px; font-weight: 500; line-height: 1.3; }
/* «+» из двух полосок: на раскрытии вертикальная уезжает и гаснет, остаётся «−».
   Символом не набрано: «+» и «−» в шрифте разной ширины, значок дёргался бы. */
.bl-faq__sign { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.bl-faq__sign::before,
.bl-faq__sign::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--bl-violet);
    transform: translate(-50%, -50%);
    transition: transform .18s ease, opacity .18s ease;
}
.bl-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.bl-faq__item[open] .bl-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
/* Ответы светлее обычного приглушённого текста (62%): это длинный текст,
   и на 62% девять абзацев подряд читаются тяжело. */
.bl-faq__a {
    margin: 0;
    padding: 0 70px 24px 28px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
    /* Пошаговые ответы (вход по QR) набраны с переносами строк — сохраняем их.
       У остальных ответов переносов нет, для них ничего не меняется. */
    white-space: pre-line;
}
.bl-faq__foot { margin-top: 30px; font-size: 17px; font-weight: 300; color: var(--bl-text-dim); }
.bl-faq__foot a { color: var(--bl-text); text-decoration: underline; }
.bl-faq__foot a:hover { color: var(--bl-violet); }

@media (max-width: 1199.98px) {
    .bl-faq { padding: 40px 0 72px; }
    .bl-faq__title { font-size: 32px; margin-bottom: 34px; }
}

/* Строки уже, поля меньше — вопрос из двух слов не должен занимать
   на телефоне четверть экрана. */
@media (max-width: 767.98px) {
    .bl-faq__title { font-size: 26px; margin-bottom: 24px; }
    .bl-faq__list { gap: 10px; }
    .bl-faq__q { gap: 14px; padding: 16px 18px; }
    .bl-faq__qtext { font-size: 16px; }
    .bl-faq__a { padding: 0 18px 18px; font-size: 15px; }
    .bl-faq__foot { margin-top: 22px; font-size: 15px; }
}