/*
  Стили страницы «Возможности» (/vozmozhnosti/).

  Отдельный файл, чтобы не трогать общий site.css: над остальными страницами
  идёт параллельная работа. Все классы с приставкой vz- — столкнуться с чужими
  именами они не могут.

  Визуальный язык тот же, что у всего сайта: белый фон, чёрный текст, красный
  акцент, рамки. Переменные берутся из site.css. Внешних ресурсов нет.
*/

/*
  Смысловые якоря разделов. Кроме нумерованных #s1…#s11 у заголовков подсистем есть
  якоря по названию (#booking, #data, #analytics, #knizhka, #rekomendacii, #panel):
  порядок разделов на продающей странице может меняться, а ссылка с другой страницы —
  нет. Отступ нужен, чтобы заголовок не прилипал к верхнему краю окна при переходе.
*/
.block-head h2[id] { scroll-margin-top: 24px; }

/* ---------- Схема движения данных ---------- */

.vz-map { margin: 26px 0 0; }

.vz-band { border: 1px solid var(--line-strong); padding: 14px 16px; }
.vz-band-core { border-left: 4px solid var(--accent); background: var(--panel); }

.vz-band-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.vz-band-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.vz-band-items li {
  border-top: 2px solid var(--accent);
  padding: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.vz-arrow {
  margin: 6px 0;
  text-align: center;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

/* Кому нужна подсистема — приписка в таблице «термин — значение». */
.vz-who {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Мелкие служебные отступы ---------- */

.vz-note { margin: 16px 0 0; font-size: 15px; }
.vz-block-top { margin-top: 18px; }

/* Дата актуальности рядом с публикуемой цифрой — как на главной. */
.vz-cifry-date { font-size: 14px; color: var(--muted); }

/* ---------- Колонки выгод ---------- */

/*
  Выгод три набора — площадке, автосервису и разработчику учётной системы.
  .vz-two оставлен: им пользуются старые блоки на две колонки.
*/
.vz-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.vz-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.vz-three h3 { font-size: 16px; }

.vz-col { border-top: 2px solid var(--line-strong); padding-top: 4px; }
.vz-col h3 { margin: 12px 0 10px; }

ul.vz-list { list-style: none; margin: 0; padding: 0; }
ul.vz-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 16px;
  border-top: 1px solid var(--line);
}
ul.vz-list li:first-child { border-top: none; }
ul.vz-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 9px;
  height: 2px;
  background: var(--accent);
}

/* ---------- Блок «оставить заявку» ---------- */

.vz-cta {
  margin: 26px 0 0;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  background: var(--panel);
  padding: 20px;
}
.vz-cta p { margin: 0 0 12px; max-width: 68ch; }
.vz-cta p:last-child { margin-bottom: 0; }

.vz-cta-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }

.vz-cta-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }

.vz-cta-main {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  font-weight: 700;
  border: 1px solid var(--accent);
}
.vz-cta-main:hover { background: #d31414; border-color: #d31414; color: #fff; }

.vz-cta-note { font-size: 13px; color: var(--muted); }

/* ---------- Узкие экраны ---------- */

@media (max-width: 1000px) {
  .vz-three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .vz-two { grid-template-columns: 1fr; gap: 6px; }
  .vz-three { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 620px) {
  .vz-band-items { grid-template-columns: 1fr; }
  .vz-cta { padding: 16px; }
  .vz-cta-links { flex-direction: column; align-items: flex-start; }
}

/* ---------- Печать ---------- */

@media print {
  .vz-three { grid-template-columns: 1fr; }
  .vz-band, .vz-cta, .vz-col, ul.vz-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .vz-band-core, .vz-cta { background: transparent; }
  .vz-cta-main { background: transparent; color: #000; border-color: #000; }
  .vz-cta p { max-width: none; }
}