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

<section class="vbvdo">
  <div class="vbvdo-wrap">
    <div class="vbvdo-head">
      <h2 class="vbvdo-h2">Что спрашивают до первого заказа</h2>
      <p class="vbvdo-lead">Восемь вопросов, которые чаще всего задают операторам: границы доставки, сроки, оплата, состав блюд. Нажмите на вопрос, чтобы раскрыть ответ.</p>
    </div>

    <ul class="vbvdo-list">
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">01</span><span class="vbvdo-t">Докуда вы возите?</span></button></h3>
        <div class="vbvdo-a"><div><p>Бесплатно возим по городу в границах объездной дороги. В посёлки и коттеджные районы за объездной доставляем при заказе от 2 500 рублей, доплата 300 рублей. Точный адрес проверяет оператор при подтверждении: если попадаете в спорную зону, скажем об этом до оплаты.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">02</span><span class="vbvdo-t">Какая минимальная сумма заказа?</span></button></h3>
        <div class="vbvdo-a"><div><p>800 рублей в дневное время и 1 200 рублей после 22:00, когда на линии остаётся один курьер. Напитки и десерты в эту сумму входят. Если до минимума не хватает пары сотен, оператор подскажет, что добавить из позиций, которые готовятся быстро.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">03</span><span class="vbvdo-t">Сколько ждать курьера?</span></button></h3>
        <div class="vbvdo-a"><div><p>В будни от 40 до 60 минут, в пятницу и субботу вечером до 90 минут. Время называем при подтверждении заказа с учётом текущей загрузки кухни. Горячее собираем последним и везём в термосумке, чтобы оно доехало нужной температуры.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">04</span><span class="vbvdo-t">Как можно оплатить?</span></button></h3>
        <div class="vbvdo-a"><div><p>Картой на сайте, переводом по номеру телефона или курьеру при получении. У курьеров есть терминал, наличные принимаем с ограничением по сдаче: сумму крупнее пяти тысяч предупредите заранее. Чек приходит на почту или в мессенджер сразу после оплаты.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">05</span><span class="vbvdo-t">Где посмотреть состав и аллергены?</span></button></h3>
        <div class="vbvdo-a"><div><p>Состав, вес и калорийность указаны в карточке каждого блюда. Восемь основных аллергенов вынесены отдельной строкой: молоко, яйцо, глютен, орехи, арахис, соя, рыба, моллюски. Отдельные ингредиенты убираем по просьбе в комментарии к заказу, если технология блюда это позволяет.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">06</span><span class="vbvdo-t">Что будет, если курьер опоздает?</span></button></h3>
        <div class="vbvdo-a"><div><p>Опоздание дольше 20 минут от названного времени мы компенсируем: десерт в текущий заказ или скидка 15 процентов на следующий, выбираете вы. Если задержка случилась из-за перекрытых улиц или погоды, оператор звонит и предупреждает заранее, пока заказ ещё можно перенести.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">07</span><span class="vbvdo-t">Можно отменить или изменить заказ?</span></button></h3>
        <div class="vbvdo-a"><div><p>Пока заказ не ушёл на кухню, меняем состав и адрес по звонку без потерь. После начала готовки отменить можно, но оплаченную часть вернём за вычетом уже приготовленных позиций. Обычно на решение есть 10 минут после подтверждения, о старте готовки предупреждаем сообщением.</p></div></div>
      </li>
      <li class="vbvdo-item">
        <h3><button type="button" class="vbvdo-q" aria-expanded="false"><span class="vbvdo-num">08</span><span class="vbvdo-t">Есть ли самовывоз и скидка на него?</span></button></h3>
        <div class="vbvdo-a"><div><p>Забрать заказ можно с 10:00 до 23:00 по адресу кухни, скидка на самовывоз 10 процентов. Готовность подтверждаем сообщением, у входа есть парковочный карман на три машины. Собранный заказ держим тёплым 30 минут, дальше разогреваем повторно перед выдачей.</p></div></div>
      </li>
    </ul>

    <p class="vbvdo-foot">Своего вопроса тут нет? <a class="vbvdo-link" href="#kontakty">Напишите нам</a>, операторы на линии с 10:00 до 23:00.</p>
  </div>
</section>

<style>
.vbvdo, .vbvdo *, .vbvdo *::before, .vbvdo *::after { box-sizing: border-box; }
.vbvdo {
  --acc: #8a5a2b; --acc-dark: #6f4720; --ink: #24201b; --muted: #6d645a; --line: #e9e1d5; --soft: #faf6ef;
  --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, 82px) 20px;
}
.vbvdo-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvdo-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbvdo-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; }
.vbvdo-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbvdo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(10px, 1.2vw, 14px); align-items: start; }
.vbvdo-item { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .18s ease; }
.vbvdo-item:hover { border-color: #d8cab2; }
.vbvdo-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvdo-q { display: flex; align-items: flex-start; gap: 14px; 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;
  padding: 18px clamp(16px, 2vw, 22px); transition: color .18s ease; }
.vbvdo-q:hover { color: var(--acc) !important; }
.vbvdo-num { flex: 0 0 auto; font-family: var(--fh); font-size: 12px; font-weight: 700; color: var(--acc); letter-spacing: .06em; padding-top: 4px; }
.vbvdo-t { flex: 1; font-family: var(--fh); font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; line-height: 1.4; }
.vbvdo-q::after { content: ''; flex: 0 0 11px; width: 11px; height: 11px; margin-top: 6px;
  border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbvdo-q[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }
.vbvdo-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.22,1,.36,1); }
.vbvdo-a > div { padding: 0 clamp(16px, 2vw, 22px) 20px 48px; }
.vbvdo-a p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--muted); }

.vbvdo-foot { margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vbvdo-link, .vbvdo-link:link, .vbvdo-link:visited { color: var(--acc) !important; text-decoration: underline; }
.vbvdo-link:hover { color: var(--acc-dark) !important; }

@media (max-width: 560px) { .vbvdo-a > div { padding-left: clamp(16px, 2vw, 22px); } }
@media (prefers-reduced-motion: reduce) { .vbvdo-a, .vbvdo-q::after { transition: none !important; } }
</style>

<script>
(function () {
  var ONE_OPEN = false;   /* false: можно держать раскрытыми несколько ответов, true: только один */

  var roots = document.querySelectorAll('.vbvdo');
  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('.vbvdo-item'));

    function panel(item) { return item.querySelector('.vbvdo-a'); }
    function btn(item) { return item.querySelector('.vbvdo-q'); }
    function close(item) { btn(item).setAttribute('aria-expanded', 'false'); panel(item).style.maxHeight = '0px'; }
    function open(item) { btn(item).setAttribute('aria-expanded', 'true'); panel(item).style.maxHeight = panel(item).scrollHeight + 'px'; }

    items.forEach(function (item) {
      btn(item).addEventListener('click', function () {
        var isOpen = btn(item).getAttribute('aria-expanded') === 'true';
        if (ONE_OPEN) items.forEach(close);
        if (isOpen) { close(item); } else { open(item); }
      });
    });

    var timer;
    window.addEventListener('resize', function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        items.forEach(function (item) {
          if (btn(item).getAttribute('aria-expanded') === 'true') panel(item).style.maxHeight = panel(item).scrollHeight + 'px';
        });
      }, 120);
    });
  }
})();
</script>

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