Блок вопрос-ответ про разработку сайта

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

    <ul class="vbvrz-list">
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Сколько времени занимает разработка</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Одностраничный сайт занимает 2-3 недели, многостраничный 4-6 недель, каталог от двух месяцев. Точный срок ставим после разбора задачи и делим на этапы с датами приёмки. Дольше всего обычно собираются материалы, поэтому тексты и фотографии просим готовить в первую неделю.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Сколько правок входит в работу</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Внутри каждого этапа два круга правок по существу: структура, смысл, композиция. Мелкие уточнения вроде отступа или переноса строки делаем по ходу и в круги не записываем. Третий круг и дальше считаются по часовой ставке, о переходе к нему предупреждаем до начала работы.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Кому принадлежит сайт после сдачи</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Вам. Проект переносим на ваш аккаунт Tilda и отдаём все доступы, макеты и файлы. Договор передаёт права на дизайн и тексты после оплаты последнего этапа. Отдельно просим разрешение показать работу в портфолио, этот пункт можно вычеркнуть.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Что делать, если результат не понравится</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Дизайн главной показываем на второй неделе, до вёрстки, поэтому расхождение видно рано и стоит дёшево. Если направление выбрано мимо, готовим вторую концепцию внутри того же этапа. Работу можно остановить на границе любого этапа, оплачиваются только закрытые.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Что с поддержкой после запуска</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Месяц после сдачи правим ошибки вёрстки и настроек за свой счёт. Дальше поддержка идёт двумя способами: разовые задачи по часовой ставке или пакет из 8 часов в месяц с ответом в течение рабочего дня. Мелкие правки текста вы сможете делать сами, показываем это на получасовом обучении.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Кто пишет тексты и где брать фотографии</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Тексты пишем сами по итогам двух созвонов и ваших материалов, вы утверждаете каждый экран. Съёмку организуем через фотографа, смету выносим отдельной строкой и согласуем до начала. Пока съёмки нет, ставим временные изображения с лицензией, их видно в макете и они заменяются за час.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Можно ли платить по этапам</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Работа разбита на четыре этапа: прототип, дизайн, сборка, запуск. Каждый оплачивается перед стартом, первый платёж составляет 30% сметы. Такой порядок даёт вам точку выхода на каждой границе и держит нас в графике, потому что следующий платёж приходит после приёмки предыдущего этапа.</p></div></div>
      </li>
      <li class="vbvrz-item">
        <h3><button type="button" class="vbvrz-q" aria-expanded="false"><span>Кто оформляет домен и оплату площадки</span><svg class="vbvrz-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9.5l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
        <div class="vbvrz-a"><div><p>Домен регистрируем на ваши данные, аккаунт остаётся у вас, оплату можно провести самим или перевести нам вместе с этапом. Тариф Tilda тоже оформляется на ваш аккаунт, доступ мы получаем как участники проекта. Почту на домене подключаем при запуске, за один рабочий день.</p></div></div>
      </li>
    </ul>

    <p class="vbvrz-foot">Вопроса нет в списке? <a href="#obsudit-proekt">Напишите нам</a>, ответим в течение рабочего дня.</p>
  </div>
</section>

<style>
.vbvrz, .vbvrz *, .vbvrz *::before, .vbvrz *::after { box-sizing: border-box; }
.vbvrz {
  --acc: #6ee787; --bg: #0f1116; --panel: #171a21; --ink: #e9edf2; --muted: #8b95a5; --line: #262b34;
  --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, 84px) 20px;
}
.vbvrz-wrap { max-width: 940px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvrz-head { max-width: 40em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbvrz-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvrz-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbvrz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vbvrz-item { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s ease; }
.vbvrz-item:hover { border-color: #333a45; }
.vbvrz-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvrz-q { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
  background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; text-align: left;
  font-family: var(--fh); font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 600; line-height: 1.4;
  padding: clamp(17px, 2vw, 22px) clamp(18px, 2.2vw, 26px); transition: color .18s ease; }
.vbvrz-q:hover { color: var(--acc) !important; }
.vbvrz-ico { flex: 0 0 22px; width: 22px; height: 22px; margin-left: auto; color: var(--muted);
  transition: transform .32s cubic-bezier(.22,1,.36,1), color .2s ease; }
.vbvrz-q[aria-expanded="true"] { color: var(--acc) !important; }
.vbvrz-q[aria-expanded="true"] .vbvrz-ico { transform: rotate(180deg); color: var(--acc); }
.vbvrz-a { max-height: 0; overflow: hidden; transition: max-height .34s cubic-bezier(.22,1,.36,1); }
.vbvrz-a > div { padding: 0 clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 24px); }
.vbvrz-a p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 60em; }

.vbvrz-foot { margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vbvrz-foot a, .vbvrz-foot a:link, .vbvrz-foot a:visited { color: var(--acc) !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(110, 231, 135, .4); }
.vbvrz-foot a:hover { border-bottom-color: var(--acc); color: var(--acc) !important; }

@media (prefers-reduced-motion: reduce) { .vbvrz-a, .vbvrz-ico { transition: none !important; } }
</style>

<script>
(function () {
  var SINGLE = true;     /* true: открыт один ответ; false: можно открыть несколько */
  var FIRST_OPEN = false; /* true: первый вопрос раскрыт при загрузке */

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var items = root.querySelectorAll('.vbvrz-item');

    function panel(item) { return item.querySelector('.vbvrz-a'); }
    function btn(item) { return item.querySelector('.vbvrz-q'); }

    function shut(item) {
      btn(item).setAttribute('aria-expanded', 'false');
      panel(item).style.maxHeight = '0px';
    }
    function show(item) {
      btn(item).setAttribute('aria-expanded', 'true');
      panel(item).style.maxHeight = panel(item).scrollHeight + 'px';
    }

    for (var i = 0; i < items.length; i++) {
      (function (item) {
        btn(item).addEventListener('click', function () {
          var open = btn(item).getAttribute('aria-expanded') === 'true';
          if (SINGLE) { for (var k = 0; k < items.length; k++) shut(items[k]); }
          if (open) shut(item); else show(item);
        });
      })(items[i]);
    }

    if (FIRST_OPEN && items.length) show(items[0]);

    window.addEventListener('resize', function () {
      for (var k = 0; k < items.length; k++) {
        if (btn(items[k]).getAttribute('aria-expanded') === 'true') {
          panel(items[k]).style.maxHeight = panel(items[k]).scrollHeight + 'px';
        }
      }
    });
  }
})();
</script>

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