Блок тарифов юридических услуг

<section class="vbtyu">
  <div class="vbtyu-wrap">
    <div class="vbtyu-head">
      <h2 class="vbtyu-h2">Пакеты услуг</h2>
      <p class="vbtyu-lead">Цена фиксируется договором до начала работы. Обязательные расходы — госпошлина, вознаграждение управляющего, публикации — оплачиваются отдельно и указаны в каждом пакете.</p>
    </div>

    <div class="vbtyu-grid" id="vbtyu-grid"></div>

    <div class="vbtyu-toggle">
      <button type="button" class="vbtyu-tbtn" id="vbtyu-tbtn" aria-expanded="false">Сравнить пакеты построчно</button>
    </div>

    <div class="vbtyu-table" id="vbtyu-table">
      <div class="vbtyu-table__in">
        <table id="vbtyu-tbl"></table>
      </div>
    </div>
  </div>
</section>

<style>
.vbtyu, .vbtyu *, .vbtyu *::before, .vbtyu *::after { box-sizing: border-box; }
.vbtyu {
  --acc: #1d3f6e; --acc-dark: #16314f; --ink: #1b2028; --muted: #5d6672; --line: #dfe3e8; --soft: #f4f6f9; --ok: #1f9254;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbtyu-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbtyu-head { max-width: 46em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbtyu-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; }
.vbtyu-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbtyu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.vbtyu-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(24px, 2.6vw, 32px); background: #fff; }
.vbtyu-card--hot { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.vbtyu-badge { position: absolute; top: -11px; left: clamp(24px, 2.6vw, 32px); background: var(--acc); color: #fff;
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; }
.vbtyu-name { font-family: var(--fh); font-size: 19px; font-weight: 600; margin: 0 0 6px; min-height: 1.3em; }
.vbtyu-for { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; min-height: 3.2em; }
.vbtyu-price { min-height: 72px; margin-bottom: 16px; }
.vbtyu-price b { display: block; font-family: var(--fh); font-size: clamp(25px, 2.6vw, 32px); line-height: 1.1; font-weight: 600; }
.vbtyu-price span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.vbtyu-term { font-size: 13px; color: var(--muted); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.vbtyu-term b { color: var(--ink); font-weight: 600; }
.vbtyu-inc { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; display: grid; gap: 9px; align-content: start; }
.vbtyu-inc li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }
.vbtyu-inc li::before { content: ''; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.vbtyu-cta, .vbtyu-cta:link, .vbtyu-cta:visited, .vbtyu-cta:active, .vbtyu-cta:focus { display: flex; align-items: center; justify-content: center;
  margin-top: auto; min-height: 52px; border-radius: 8px; font-size: 15.5px; font-weight: 600;
  background: var(--soft); color: var(--ink) !important; text-decoration: none !important; transition: .18s ease; }
.vbtyu-cta:hover { background: #e7ecf3; color: var(--ink) !important; }
.vbtyu-card--hot .vbtyu-cta { background: var(--acc); color: #fff !important; }
.vbtyu-card--hot .vbtyu-cta:hover { background: var(--acc-dark); color: #fff !important; }

.vbtyu-toggle { text-align: center; margin-top: 22px; }
.vbtyu-tbtn { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 999px; padding: 12px 26px; font-size: 15px; transition: .18s ease; }
.vbtyu-tbtn:hover { border-color: var(--acc); }
.vbtyu-table { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); }
.vbtyu-table__in { padding-top: 24px; overflow-x: auto; }
.vbtyu-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.vbtyu-table th, .vbtyu-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; text-align: left; }
.vbtyu-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); }
.vbtyu-table thead th:first-child { border-top-left-radius: 10px; }
.vbtyu-table thead th:last-child { border-top-right-radius: 10px; }
.vbtyu-table td:not(:first-child), .vbtyu-table th:not(:first-child) { text-align: center; width: 130px; }
.vbtyu-yes { color: var(--ok); font-weight: 600; }
.vbtyu-no { color: #b9c0c8; }
.vbtyu-txt { font-size: 12.5px; color: var(--muted); }

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

<script>
(function () {
  var OPEN = false;        /* true — таблица сравнения раскрыта сразу */
  var CTA_HREF = '#zayavka';

  /* ── ПАКЕТЫ ── */
  var PACKS = [
    { name: 'Консультация', forWho: 'Разобраться, подходит ли банкротство и что будет с имуществом', price: '5 000 ₽',
      note: 'засчитывается в стоимость пакета при заключении договора', term: '1 час', popular: false,
      inc: ['Анализ долгов и доходов', 'Проверка сделок за 3 года', 'Письменное заключение с планом'] },
    { name: 'Банкротство под ключ', forWho: 'Полное ведение дела от заявления до списания долгов', price: 'от 120 000 ₽',
      note: 'фиксируется договором, рассрочка на срок процедуры', term: '8–12 месяцев', popular: true,
      inc: ['Сбор и подготовка документов', 'Подача заявления в суд', 'Аккредитованный управляющий', 'Представительство во всех заседаниях', 'Работа с кредиторами и приставами', 'Сопровождение до определения суда'] },
    { name: 'Защита в споре', forWho: 'Оспаривание сделок, субсидиарная ответственность, жалобы', price: 'от 45 000 ₽',
      note: 'за один обособленный спор', term: '3–6 месяцев', popular: false,
      inc: ['Анализ материалов дела', 'Позиция и подготовка отзыва', 'Представительство в заседаниях', 'Апелляция при необходимости'] }
  ];

  /* ── СТРОКИ СРАВНЕНИЯ: true / false / строка ── */
  var FEATURES = [
    { n: 'Первичный анализ ситуации', v: [true, true, true] },
    { n: 'Проверка сделок за 3 года', v: [true, true, true] },
    { n: 'Подготовка и подача заявления', v: [false, true, 'по спору'] },
    { n: 'Аккредитованный управляющий', v: [false, true, false] },
    { n: 'Представительство в суде', v: [false, true, true] },
    { n: 'Работа с кредиторами', v: [false, true, 'частично'] },
    { n: 'Снятие арестов и работа с приставами', v: [false, true, false] },
    { n: 'Апелляция при отказе', v: [false, 'за доплату', true] },
    { n: 'Фиксированная цена в договоре', v: [true, true, true] },
    { n: 'Рассрочка оплаты', v: [false, true, 'до 2 платежей'] }
  ];

  var roots = document.querySelectorAll('.vbtyu');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbtyu-grid');
    var btn = root.querySelector('#vbtyu-tbtn'), box = root.querySelector('#vbtyu-table'), tbl = root.querySelector('#vbtyu-tbl');

    grid.innerHTML = PACKS.map(function (p) {
      return '<article class="vbtyu-card' + (p.popular ? ' vbtyu-card--hot' : '') + '">' +
        (p.popular ? '<span class="vbtyu-badge">Чаще всего выбирают<\/span>' : '') +
        '<h3 class="vbtyu-name">' + p.name + '<\/h3>' +
        '<p class="vbtyu-for">' + p.forWho + '<\/p>' +
        '<div class="vbtyu-price"><b>' + p.price + '<\/b><span>' + p.note + '<\/span><\/div>' +
        '<p class="vbtyu-term">Срок: <b>' + p.term + '<\/b><\/p>' +
        '<ul class="vbtyu-inc">' + p.inc.map(function (x) { return '<li>' + x + '<\/li>'; }).join('') + '<\/ul>' +
        '<a class="vbtyu-cta" href="' + CTA_HREF + '">Обсудить условия<\/a><\/article>';
    }).join('');

    function cell(v) {
      if (v === true) return '<td><span class="vbtyu-yes">Да<\/span><\/td>';
      if (v === false) return '<td><span class="vbtyu-no">—<\/span><\/td>';
      return '<td><span class="vbtyu-txt">' + v + '<\/span><\/td>';
    }
    tbl.innerHTML =
      '<thead><tr><th>Что входит<\/th>' + PACKS.map(function (p) { return '<th>' + p.name + '<\/th>'; }).join('') + '<\/tr><\/thead>' +
      '<tbody>' + FEATURES.map(function (f) {
        return '<tr><td>' + f.n + '<\/td>' + f.v.map(cell).join('') + '<\/tr>';
      }).join('') + '<\/tbody>';

    function setOpen(on) {
      btn.setAttribute('aria-expanded', on ? 'true' : 'false');
      btn.textContent = on ? 'Свернуть сравнение' : 'Сравнить пакеты построчно';
      box.style.maxHeight = on ? box.scrollHeight + 'px' : '0px';
    }
    btn.addEventListener('click', function () { setOpen(btn.getAttribute('aria-expanded') !== 'true'); });
    setOpen(OPEN);

    window.addEventListener('resize', function () {
      if (btn.getAttribute('aria-expanded') === 'true') box.style.maxHeight = box.scrollHeight + 'px';
    });
  }
})();
</script>

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