Блок «Вопрос-ответ» про абонемент фитнес-клуба

<section class="vbvpa">
  <div class="vbvpa-wrap">
    <h2 class="vbvpa-h2">Всё про абонемент</h2>
    <p class="vbvpa-lead">Условия, из-за которых обычно звонят администратору. Выберите категорию или смотрите весь список.</p>

    <div class="vbvpa-cats" id="vbvpa-cats" role="group" aria-label="Категории вопросов"></div>

    <ul class="vbvpa-list" id="vbvpa-list">
      <li class="vbvpa-item" data-cat="Оплата"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Можно оплатить абонемент частями?</button></h3><div class="vbvpa-a"><div><p>Да, доступна рассрочка на 6 или 12 месяцев без переплаты — оформляется в клубе за 15 минут по паспорту. Также можно разбить оплату на два платежа с интервалом в месяц, но тогда цена считается по тарифу на полгода.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Оплата"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Есть ли скидки для студентов и семей?</button></h3><div class="vbvpa-a"><div><p>Студентам очной формы — 20% при предъявлении справки из вуза. Семейный абонемент на двоих даёт 15% каждому, на троих и больше — 25%. Скидки не суммируются между собой, но действуют вместе с акциями на годовой тариф.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Оплата"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Положен ли налоговый вычет за фитнес?</button></h3><div class="vbvpa-a"><div><p>Да, с 2022 года действует вычет за физкультурно-оздоровительные услуги: 13% с суммы до 150 000 ₽ в год. Клуб входит в реестр Минспорта, справку об оплате для налоговой готовим по заявлению за три рабочих дня.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Заморозка"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Сколько дней можно заморозить абонемент?</button></h3><div class="vbvpa-a"><div><p>Годовой абонемент — до 60 дней в год, полугодовой — до 30. Заморозка бесплатная, оформляется в приложении или на ресепшене. Минимальный период — 7 дней, дробить на два-три дня нельзя.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Заморозка"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Заморозка задним числом возможна?</button></h3><div class="vbvpa-a"><div><p>По болезни — да, в течение 14 дней после выздоровления при наличии больничного или справки. В остальных случаях заморозка начинается со дня подачи заявления: отмотать назад «я не ходил весь месяц» не получится.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Заморозка"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Что будет с заморозкой при переезде?</button></h3><div class="vbvpa-a"><div><p>Если переезжаете в город, где есть наш клуб, абонемент переносится без доплаты. Если нет — расторгаем договор и возвращаем деньги за неиспользованный период по формуле из договора, за вычетом фактически посещённых дней.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Посещения"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Можно приходить в любое время?</button></h3><div class="vbvpa-a"><div><p>По полному абонементу — в любые часы работы клуба. Дневной тариф действует с 7:00 до 16:00 в будни и стоит на 35% дешевле. Переход с дневного на полный доступен в любой момент с доплатой разницы.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Посещения"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Можно ли привести друга?</button></h3><div class="vbvpa-a"><div><p>Да, в годовом абонементе шесть гостевых визитов в год, в полугодовом — три. Гость проходит по паспорту и подписывает согласие на посещение. Гостевые визиты не переносятся на следующий год.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Посещения"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Групповые занятия входят в абонемент?</button></h3><div class="vbvpa-a"><div><p>Базовое расписание — да, без ограничений по количеству. Запись открывается за 48 часов в приложении. Специальные форматы вроде сайкла и малых групп по 6 человек оплачиваются отдельно или по пакету занятий.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Посещения"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Нужна ли справка от врача?</button></h3><div class="vbvpa-a"><div><p>Для самостоятельных занятий в тренажёрном зале — нет, достаточно подписать анкету о состоянии здоровья. Для бассейна справка обязательна по санитарным нормам, действует 6 месяцев.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Расторжение"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Можно вернуть деньги, если передумал?</button></h3><div class="vbvpa-a"><div><p>В первые 14 дней после покупки — да, полностью, если вы ещё не посещали клуб. Если посещения были, возвращаем сумму за вычетом стоимости фактических визитов по разовому тарифу. Дальше — по формуле пропорционально оставшемуся сроку.</p></div></div></li>
      <li class="vbvpa-item" data-cat="Расторжение"><h3><button type="button" class="vbvpa-q" aria-expanded="false">Абонемент можно переоформить на другого человека?</button></h3><div class="vbvpa-a"><div><p>Да, один раз за срок действия. Оба человека приходят с паспортами, подписывается допсоглашение. Услуга стоит 2 000 ₽, для годовых абонементов — бесплатно.</p></div></div></li>
    </ul>
  </div>
</section>

<style>
.vbvpa, .vbvpa *, .vbvpa *::before, .vbvpa *::after { box-sizing: border-box; }
.vbvpa {
  --acc: #d6f24b; --bg: #131518; --panel: #1c1f24; --ink: #f2f4f6; --muted: #939ba5; --line: #2a2e35;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbvpa-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvpa-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
  text-transform: uppercase; margin: 0 0 12px; }
.vbvpa-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }

.vbvpa-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.vbvpa-cat { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: transparent !important; color: var(--muted) !important; border-radius: 999px; padding: 9px 18px; font-size: 14px; transition: .18s ease; }
.vbvpa-cat:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbvpa-cat[aria-pressed="true"] { background: var(--acc) !important; border-color: var(--acc); color: #131518 !important; font-weight: 600; }

.vbvpa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vbvpa-item { border-bottom: 1px solid var(--line); }
.vbvpa-item[hidden] { display: none; }
.vbvpa-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvpa-q { display: flex; align-items: flex-start; gap: 16px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
  background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; font-family: var(--fh);
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.4; text-align: left; padding: 19px 0; transition: color .18s ease; }
.vbvpa-q:hover { color: var(--acc) !important; }
.vbvpa-q::after { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; margin-left: auto;
  background: linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat, linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbvpa-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvpa-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.vbvpa-a > div { padding: 0 34px 20px 0; }
.vbvpa-a p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .vbvpa * { transition: none !important; } }
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbvpa');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var items = Array.prototype.slice.call(root.querySelectorAll('.vbvpa-item'));
    var catsBox = root.querySelector('#vbvpa-cats');
    var cats = ['Все'].concat(items.map(function (i) { return i.dataset.cat; }).filter(function (v, i, a) { return a.indexOf(v) === i; }));
    var active = 'Все';

    catsBox.innerHTML = cats.map(function (c) {
      return '<button type="button" class="vbvpa-cat" data-c="' + c + '" aria-pressed="' + (c === active) + '">' + c + '<\/button>';
    }).join('');

    function closeAll() {
      items.forEach(function (o) {
        o.querySelector('.vbvpa-q').setAttribute('aria-expanded', 'false');
        o.querySelector('.vbvpa-a').style.maxHeight = '0px';
      });
    }

    catsBox.querySelectorAll('.vbvpa-cat').forEach(function (b) {
      b.addEventListener('click', function () {
        active = b.dataset.c;
        catsBox.querySelectorAll('.vbvpa-cat').forEach(function (x) { x.setAttribute('aria-pressed', 'false'); });
        b.setAttribute('aria-pressed', 'true');
        /* фильтр только скрывает вопросы — весь текст остаётся в разметке для поиска */
        items.forEach(function (it) { it.hidden = active !== 'Все' && it.dataset.cat !== active; });
        closeAll();
      });
    });

    items.forEach(function (item) {
      var btn = item.querySelector('.vbvpa-q'), pane = item.querySelector('.vbvpa-a');
      btn.addEventListener('click', function () {
        var open = btn.getAttribute('aria-expanded') === 'true';
        closeAll();
        if (!open) { btn.setAttribute('aria-expanded', 'true'); pane.style.maxHeight = pane.scrollHeight + 'px'; }
      });
    });
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.