Блок «Вопрос-ответ» для сайта юриста

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

    <ul class="vbvoy-list">
      <li class="vbvoy-item" id="q-usloviya"><h3><button type="button" class="vbvoy-q" aria-expanded="false">При каком долге можно банкротиться?</button></h3><div class="vbvoy-a"><div><p>Через суд — при любой сумме, если вы не можете платить. Обязанность подать заявление возникает при долге от 500 000 ₽ и просрочке свыше трёх месяцев. Внесудебное банкротство через МФЦ доступно при долге от 25 000 до 1 000 000 ₽ и оконченном исполнительном производстве.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-sroki"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Сколько длится процедура?</button></h3><div class="vbvoy-a"><div><p>Судебное банкротство — от 8 до 12 месяцев при типичном деле без имущества и оспоримых сделок. Реализация имущества добавляет 3–6 месяцев. Внесудебное через МФЦ длится ровно 6 месяцев и не требует суда.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-imuschestvo"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Заберут ли единственное жильё?</button></h3><div class="vbvoy-a"><div><p>Единственное жильё защищено исполнительским иммунитетом и в конкурсную массу не входит. Исключение — ипотечная квартира: она в залоге у банка и реализуется, даже если единственная. Практика по «роскошному жилью» существует, но применяется редко и только через суд.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-sdelki"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Могут ли оспорить продажу имущества родственникам?</button></h3><div class="vbvoy-a"><div><p>Да, финансовый управляющий проверяет сделки за три года до подачи заявления. Дарение и продажа по заниженной цене близким родственникам оспариваются чаще всего. Имущество вернут в конкурсную массу, а покупатель останется без денег и без вещи.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-dohod"><h3><button type="button" class="vbvoy-q" aria-expanded="false">На что жить во время процедуры?</button></h3><div class="vbvoy-a"><div><p>Вам оставляют прожиточный минимум на себя и на каждого иждивенца ежемесячно. При наличии детей или нетрудоспособных родственников сумму можно увеличить через ходатайство в суд — на практике оно удовлетворяется в большинстве дел.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-nelzya"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Какие долги не списываются?</button></h3><div class="vbvoy-a"><div><p>Алименты, возмещение вреда жизни и здоровью, зарплата работникам, субсидиарная ответственность и долги, возникшие из-за мошенничества. Кредиты, микрозаймы, налоги, штрафы и долги по коммунальным платежам списываются.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-posledstviya"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Какие последствия после банкротства?</button></h3><div class="vbvoy-a"><div><p>Пять лет при получении кредита нужно сообщать о факте банкротства. Три года нельзя занимать руководящие должности в организациях, десять лет — в банках. Повторно банкротиться можно через пять лет. Выезд за границу после завершения дела не ограничивается.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-stoimost"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Сколько стоит процедура целиком?</button></h3><div class="vbvoy-a"><div><p>Обязательные расходы: госпошлина 300 ₽, вознаграждение управляющего 25 000 ₽ за процедуру, публикации в ЕФРСБ и «Коммерсанте» около 15 000 ₽. Услуги юриста — отдельно. Через МФЦ процедура бесплатна, но подходит не всем.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-rabota"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Узнает ли работодатель?</button></h3><div class="vbvoy-a"><div><p>Уведомлять работодателя закон не обязывает. Но сведения публикуются в открытом реестре ЕФРСБ, и найти их может любой желающий. Управляющий также запрашивает справки о доходах — запрос идёт в налоговую, а не по месту работы.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
      <li class="vbvoy-item" id="q-suprug"><h3><button type="button" class="vbvoy-q" aria-expanded="false">Как банкротство влияет на супруга?</button></h3><div class="vbvoy-a"><div><p>Совместно нажитое имущество реализуется целиком, а супругу выплачивается его доля деньгами. Личные долги супруга при этом не списываются — ему нужна отдельная процедура. Брачный договор, заключённый незадолго до банкротства, может быть оспорен.</p><button type="button" class="vbvoy-link">Скопировать ссылку на ответ</button></div></div></li>
    </ul>
  </div>
</section>

<style>
.vbvoy, .vbvoy *, .vbvoy *::before, .vbvoy *::after { box-sizing: border-box; }
.vbvoy {
  --acc: #1d3f6e; --ink: #1b2028; --muted: #5d6672; --line: #dfe3e8; --soft: #f4f6f9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbvoy-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvoy-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvoy-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 44em; }

.vbvoy-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vbvoy-item { border-bottom: 1px solid var(--line); scroll-margin-top: 90px; transition: background .3s ease; }
.vbvoy-item:last-child { border-bottom: 0; }
.vbvoy-item.is-target { background: #eef3f9; }
.vbvoy-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvoy-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: 17px; font-weight: 600; line-height: 1.4; text-align: left; padding: 20px 24px; transition: color .18s ease; }
.vbvoy-q:hover { color: var(--acc) !important; }
.vbvoy-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); }
.vbvoy-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvoy-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.vbvoy-a > div { padding: 0 24px 22px; }
.vbvoy-a p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 46em; }
.vbvoy-link { border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--acc) !important; text-decoration: underline; }
.vbvoy-link.is-done { color: #1f9254 !important; text-decoration: none; }

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

<script>
(function () {
  var roots = document.querySelectorAll('.vbvoy');
  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('.vbvoy-item'));

    function closeAll() {
      items.forEach(function (o) {
        o.querySelector('.vbvoy-q').setAttribute('aria-expanded', 'false');
        o.querySelector('.vbvoy-a').style.maxHeight = '0px';
        o.classList.remove('is-target');
      });
    }
    function open(item, scroll) {
      closeAll();
      var btn = item.querySelector('.vbvoy-q'), pane = item.querySelector('.vbvoy-a');
      btn.setAttribute('aria-expanded', 'true');
      pane.style.maxHeight = pane.scrollHeight + 'px';
      item.classList.add('is-target');
      if (scroll) item.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    items.forEach(function (item) {
      var btn = item.querySelector('.vbvoy-q');
      btn.addEventListener('click', function () {
        if (btn.getAttribute('aria-expanded') === 'true') { closeAll(); return; }
        open(item, false);
      });

      var link = item.querySelector('.vbvoy-link');
      if (link) {
        link.addEventListener('click', function () {
          var url = location.origin + location.pathname + '#' + item.id;
          var done = function () {
            link.textContent = 'Ссылка скопирована';
            link.classList.add('is-done');
            setTimeout(function () { link.textContent = 'Скопировать ссылку на ответ'; link.classList.remove('is-done'); }, 2000);
          };
          if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(url).then(done, fallback);
          } else fallback();
          function fallback() {
            var ta = document.createElement('textarea');
            ta.value = url; ta.style.position = 'fixed'; ta.style.left = '-9999px';
            document.body.appendChild(ta); ta.select();
            try { document.execCommand('copy'); done(); } catch (e) {}
            document.body.removeChild(ta);
          }
        });
      }
    });

    /* Открываем вопрос, если на него пришли по прямой ссылке */
    function fromHash() {
      var id = location.hash.replace(/^#/, '');
      if (!id) return;
      var item = items.filter(function (x) { return x.id === id; })[0];
      if (item) open(item, true);
    }
    fromHash();
    window.addEventListener('hashchange', fromHash);
    window.addEventListener('resize', function () {
      items.forEach(function (o) {
        var b = o.querySelector('.vbvoy-q'), p = o.querySelector('.vbvoy-a');
        if (b.getAttribute('aria-expanded') === 'true') p.style.maxHeight = p.scrollHeight + 'px';
      });
    });
  }
})();
</script>

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