Блок «Вопрос-ответ» про сделку с недвижимостью

<section class="vbvps">
  <div class="vbvps-wrap">
    <h2 class="vbvps-h2">Вопросы про сделку</h2>
    <p class="vbvps-lead">Двенадцать вопросов, которые задают перед подписанием. Раскрытие в одной колонке не двигает соседнюю.</p>

    <div class="vbvps-cols">
      <div class="vbvps-col">
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Какие документы нужны от покупателя?</button></h3><div class="vbvps-a"><div><p>Паспорт, а при ипотеке — справка о доходах и копия трудовой. Для состоящих в браке нужно нотариальное согласие супруга. Всё остальное готовим мы: договор, акт, документы для регистрации.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Что такое эскроу-счёт и зачем он?</button></h3><div class="vbvps-a"><div><p>Это счёт в банке, куда попадают ваши деньги при покупке новостройки. Застройщик получает их только после сдачи дома. Если стройка встанет, банк вернёт сумму вам. С 2019 года такая схема обязательна для долевого строительства.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Сколько занимает регистрация права?</button></h3><div class="vbvps-a"><div><p>Через МФЦ — 7–9 рабочих дней, электронная регистрация через банк — 1–3 дня. Электронная быстрее и не требует личного визита, но у некоторых банков стоит отдельных денег.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Можно ли использовать материнский капитал?</button></h3><div class="vbvps-a"><div><p>Да, и как первоначальный взнос, и на погашение ипотеки. Понадобится справка из Социального фонда об остатке и обязательство выделить доли детям. Срок перечисления — до 10 рабочих дней после одобрения.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Кто платит комиссию агентству?</button></h3><div class="vbvps-a"><div><p>При покупке новостройки — застройщик, для вас услуга бесплатна. На вторичном рынке комиссию платит та сторона, которая заказала услугу; размер фиксируется в договоре до начала работы, а не по факту сделки.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Что проверяете перед покупкой вторички?</button></h3><div class="vbvps-a"><div><p>Историю переходов права, наличие обременений и арестов, дееспособность продавца, зарегистрированных жильцов, задолженности по коммунальным платежам и законность перепланировок. Отчёт отдаём вам до внесения аванса.</p></div></div></div>
      </div>

      <div class="vbvps-col">
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Чем задаток отличается от аванса?</button></h3><div class="vbvps-a"><div><p>Аванс возвращается при отказе любой стороны. Задаток — нет: если отказался покупатель, деньги остаются у продавца, если продавец — он возвращает двойную сумму. Что именно вы вносите, должно быть прямо написано в соглашении.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Нужен ли нотариус?</button></h3><div class="vbvps-a"><div><p>Обязателен при продаже долей, сделках с несовершеннолетними собственниками и по доверенности. В остальных случаях — по желанию сторон. Тариф зависит от суммы сделки, обычно 0,5% плюс техническая работа.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Как безопасно передать деньги?</button></h3><div class="vbvps-a"><div><p>Через аккредитив или сервис безопасных расчётов банка. Деньги блокируются и уходят продавцу только после регистрации перехода права. Наличные и банковские ячейки используем всё реже — аккредитив дешевле и оставляет след в банке.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Что делать, если ипотеку не одобрили?</button></h3><div class="vbvps-a"><div><p>Подаём заявки в несколько банков параллельно — критерии у них разные. Если отказ везде, соглашение о задатке расторгается по основанию «неодобрение кредита», и деньги возвращаются. Это условие мы всегда прописываем заранее.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Когда можно делать ремонт в новостройке?</button></h3><div class="vbvps-a"><div><p>После подписания акта приёма-передачи и получения ключей. До регистрации права собственности ремонт делать можно, но продать или подарить квартиру — нет. Шумные работы ограничены региональным законом о тишине.</p></div></div></div>
        <div class="vbvps-item"><h3><button type="button" class="vbvps-q" aria-expanded="false">Положен ли налоговый вычет при покупке?</button></h3><div class="vbvps-a"><div><p>Да: до 260 000 ₽ со стоимости жилья и до 390 000 ₽ с уплаченных процентов по ипотеке. Вычет даётся один раз в жизни, но остаток переносится на следующие годы. Супруги получают его каждый со своей части.</p></div></div></div>
      </div>
    </div>
  </div>
</section>

<style>
.vbvps, .vbvps *, .vbvps *::before, .vbvps *::after { box-sizing: border-box; }
.vbvps {
  --acc: #1f6f5c; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --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;
}
.vbvps-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvps-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvps-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 clamp(22px, 3vw, 34px); max-width: 44em; }

.vbvps-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.vbvps-col { border-top: 1px solid var(--line); }
.vbvps-item { border-bottom: 1px solid var(--line); }
.vbvps-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvps-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; font-family: var(--fh);
  font-size: 16.5px; font-weight: 600; line-height: 1.4; text-align: left; padding: 18px 0; transition: color .18s ease; }
.vbvps-q:hover { color: var(--acc) !important; }
.vbvps-q::after { content: ''; flex: 0 0 15px; width: 15px; height: 15px; 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); }
.vbvps-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvps-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.vbvps-a > div { padding: 0 30px 18px 0; }
.vbvps-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

@media (max-width: 800px) {
  .vbvps-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vbvps-col + .vbvps-col { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .vbvps * { transition: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    /* Колонки независимы: раскрытие слева не двигает правую */
    root.querySelectorAll('.vbvps-col').forEach(function (col) {
      var items = Array.prototype.slice.call(col.querySelectorAll('.vbvps-item'));
      items.forEach(function (item) {
        var btn = item.querySelector('.vbvps-q'), pane = item.querySelector('.vbvps-a');
        btn.addEventListener('click', function () {
          var open = btn.getAttribute('aria-expanded') === 'true';
          items.forEach(function (o) {
            o.querySelector('.vbvps-q').setAttribute('aria-expanded', 'false');
            o.querySelector('.vbvps-a').style.maxHeight = '0px';
          });
          if (!open) { btn.setAttribute('aria-expanded', 'true'); pane.style.maxHeight = pane.scrollHeight + 'px'; }
        });
      });
    });

    window.addEventListener('resize', function () {
      root.querySelectorAll('.vbvps-item').forEach(function (o) {
        var b = o.querySelector('.vbvps-q'), p = o.querySelector('.vbvps-a');
        if (b.getAttribute('aria-expanded') === 'true') p.style.maxHeight = p.scrollHeight + 'px';
      });
    });
  }
})();
</script>

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