Блок преимуществ для сайта доставки еды

<section class="vbpde">
  <div class="vbpde-wrap">
    <h2 class="vbpde-h2">Как проходит заказ</h2>
    <p class="vbpde-lead">От нажатия кнопки до звонка в дверь — 55 минут по городу. Каждый этап видно в статусе заказа.</p>

    <ol class="vbpde-line" id="vbpde-line">
      <li class="vbpde-step">
        <span class="vbpde-dot"></span>
        <svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="26" height="30" rx="4"/><path d="M14 14h12M14 21h12M14 28h7"/></g></svg>
        <b>Заказ принят</b>
        <i>до 2 минут</i>
        <p>Состав и адрес подтверждаем в мессенджере. Если позиции нет, звоним и предлагаем замену, а не молча убираем.</p>
      </li>
      <li class="vbpde-step">
        <span class="vbpde-dot"></span>
        <svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 20h28M9 20v11a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V20"/><path d="M14 13c0-3 2-4 2-6M20 13c0-3 2-4 2-6M26 13c0-3 2-4 2-6"/></g></svg>
        <b>Готовим</b>
        <i>25–30 минут</i>
        <p>Начинаем готовить только после подтверждения. Ничего не разогреваем из заготовок — поэтому и не отдаём заказ за 15 минут.</p>
      </li>
      <li class="vbpde-step">
        <span class="vbpde-dot"></span>
        <svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h16v14H6z"/><path d="M22 17h6l6 6v3h-12z"/><circle cx="12" cy="30" r="3.5"/><circle cx="28" cy="30" r="3.5"/></g></svg>
        <b>Курьер в пути</b>
        <i>15–20 минут</i>
        <p>Термосумка с разделением горячего и холодного. Ссылка на карту с курьером приходит автоматически.</p>
      </li>
      <li class="vbpde-step">
        <span class="vbpde-dot"></span>
        <svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 34V15l12-9 12 9v19z"/><path d="M16 34v-9h8v9"/></g></svg>
        <b>У вас дома</b>
        <i>всего 55 минут</i>
        <p>Опоздали больше чем на 20 минут — десерт за наш счёт. Не «извините», а конкретная компенсация.</p>
      </li>
    </ol>
  </div>
</section>

<style>
.vbpde, .vbpde *, .vbpde *::before, .vbpde *::after { box-sizing: border-box; }
.vbpde {
  --acc: #8a5a2b; --ink: #24201b; --muted: #6d645a; --line: #e5ddd1; --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, 84px) 20px;
}
.vbpde-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpde-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; }
.vbpde-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 clamp(36px, 4vw, 56px); max-width: 42em; }

.vbpde-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px); position: relative; }
.vbpde-line::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); }
.vbpde-line::after { content: ''; position: absolute; left: 0; top: 9px; height: 2px; width: 0; background: var(--acc);
  transition: width 1.4s cubic-bezier(.22,1,.36,1); }
.vbpde-line.is-in::after { width: 100%; }
.vbpde-step { position: relative; padding-top: 34px; }
.vbpde-dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .3s ease; }
.vbpde-line.is-in .vbpde-dot { box-shadow: inset 0 0 0 5px var(--acc); }
.vbpde-step svg { width: 32px; height: 32px; color: var(--acc); display: block; margin-bottom: 14px; }
.vbpde-step b { display: block; font-family: var(--fh); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.vbpde-step i { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--acc); margin-bottom: 10px; }
.vbpde-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 820px) {
  .vbpde-line { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 34px; }
  .vbpde-line::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .vbpde-line::after { left: 7px; top: 0; width: 2px; height: 0; transition: height 1.4s cubic-bezier(.22,1,.36,1); }
  .vbpde-line.is-in::after { width: 2px; height: 100%; }
  .vbpde-step { padding: 0 0 30px; }
  .vbpde-dot { left: -34px; top: 4px; }
  .vbpde-step svg { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vbpde-line::after, .vbpde-dot { transition: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var line = root.querySelector('#vbpde-line');
    if (!line) return;
    if (!('IntersectionObserver' in window)) { line.classList.add('is-in'); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { if (e.isIntersecting) { line.classList.add('is-in'); io.disconnect(); } });
    }, { rootMargin: '0px 0px -15% 0px' });
    io.observe(line);
    setTimeout(function () { line.classList.add('is-in'); }, 2500);
  }
})();
</script>

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