/* Страницы «Возможностей» по брендбуку (tools/vozmozhnosti.py). Основа: блоки главной (v5.css, glavnaya-new.css),
   первый экран и галочки страниц услуг (usluga.css). Здесь только своё: скриншот на первом экране, карточки
   со скриншотом, шаги, экскурсия, отзыв, преимущества на тёмной полосе, пример из практики.
   Скругления по брендбуку: 12 картинки в карточках, 16 карточки, 24 панели. Теней нет. */

/* первый экран: скриншот по центру справа, без привязки к нижнему краю, как у фото на услугах */
.vz-hero { padding-bottom: 72px; }
.vz-hero .in { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.vz-hero .us-hero__txt { padding-bottom: 0; }
.vz-trial { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.vz-shot { margin: 0; min-width: 0; }
.vz-shot img { display: block; width: 100%; height: auto; }
.vz-shot--soft { padding: 24px; border-radius: 24px; background: var(--soft); }

/* «Что вы получите?»: карточки главной, внизу кусок экрана */
.vz-cards .vz-card { min-height: 0; gap: 12px; }
.vz-card__img { display: block; margin-top: auto; padding-top: 12px; }
.vz-card__img img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* карточки не ссылки: цвет при наведении не меняется */
.vz-cards .bc.t-blue:hover { background: #E8EEFC; }
.vz-cards .bc.t-green:hover { background: #E3F3E8; }
.vz-cards .bc.t-amber:hover { background: #ECF3FB; }

/* экскурсия: светлая панель, фото специалиста стоит на нижнем краю */
.vz-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: end; padding: 48px 48px 0; border-radius: 24px; background: var(--soft); overflow: hidden; }
.vz-tour__txt { padding-bottom: 48px; }
.vz-tour__h { margin: 0; max-width: 18ch; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 650; letter-spacing: -.04em; color: var(--deep, var(--ink)); text-wrap: balance; }
.vz-tour__p { margin: 16px 0 0; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.vz-tour .ctas { justify-content: flex-start; margin-top: 28px; }
.vz-tour__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.vz-tour__face { position: relative; margin: 0; align-self: end; }
.vz-tour__face img { display: block; width: 100%; height: auto; }
.vz-tour__face .us-face__who { left: auto; right: 0; bottom: 24px; }

/* шаги и картинка рядом */
.vz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.vz-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vz-steps li { padding: 24px 0; border-top: 1px solid var(--line); }
.vz-steps li:first-child { border-top: 0; padding-top: 0; }
.vz-step__k { display: block; margin-bottom: 8px; font: 500 12px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.vz-steps p { margin: 0; font-size: 20px; line-height: 30px; color: var(--ink); }

/* отзыв: крупная цитата, фото клиента */
.vz-quote { margin: 0; padding: 40px 48px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.vz-quote blockquote { margin: 0; max-width: 34em; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.vz-who { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.vz-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.vz-who p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.vz-who b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }

/* преимущества на тёмной полосе: скриншот слева, три пункта справа */
.vz-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.vz-band .vz-shot { padding: 24px; border-radius: 24px; background: #fff; }
.vz-plus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.vz-plus li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; row-gap: 4px; }
.vz-plus .us-inc__ic { grid-row: span 2; background: rgba(255, 255, 255, .1); color: var(--sky-dark, #86B1E8); }
.vz-plus h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 650; color: #fff; }
.vz-plus p { margin: 0; font-size: 16px; line-height: 24px; color: #C3CCEB; }

/* пример из практики: четыре шага картинками и итог */
.vz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vz-itog { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin: 32px auto 0; padding: 20px 32px; width: fit-content; border-radius: 16px; background: var(--soft); }
.vz-itog b { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; font-weight: 650; letter-spacing: -.04em; color: var(--blue); }
.vz-itog span { font-size: 18px; color: var(--ink-2); }

/* страницы по разбору Zero Block: раздел «текст и скриншот», через один скриншот слева */
.vz-text { min-width: 0; }
.vz-text > * { margin: 0; }
.vz-text > * + * { margin-top: 16px; }
.vz-h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.04em; max-width: 20ch; text-wrap: balance; }
.vz-text p { font-size: 18px; line-height: 28px; color: var(--ink-2); }
.vz-text--wide { max-width: 760px; }
.vz-split--alt > .vz-shot { order: -1; }
.vz-shot--wide { max-width: 1100px; margin-inline: auto; }
/* колонки: карточки с заголовком и текстом */
.vz-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.vz-item { padding: 24px; border-radius: 16px; background: var(--soft); }
.vz-item h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.vz-item p { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
/* история клиента: светлая карточка со ссылкой на кейс */
.vz-case { display: flex; flex-direction: column; gap: 12px; padding: 40px 48px; border-radius: 24px; background: #E5F4EA; color: var(--ink); transition: background-color .3s var(--ease, ease); }
.vz-case:hover { background: #DCEFE2; }
.vz-case .k { font: 500 12px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--pos); }
.vz-case__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vz-case__t { margin: 0; max-width: 28ch; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 650; letter-spacing: -.03em; text-wrap: balance; }
.vz-case p { margin: 0; max-width: 46em; font-size: 17px; line-height: 26px; color: var(--ink-2); }
.vz-case__more { margin-top: 8px; font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(41, 81, 202, .3); text-underline-offset: 4px; }
.vz-case:hover .arrow { transform: translateX(3px); }
/* другие возможности: карточки услуг из usluga.css, текст пояснения */
.vz-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-more__p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }

/* страницы, описанные вручную (1С, ИИ-аналитик) */
.us-inc--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.us-inc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vz-inc__p { margin: -8px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.vz-marks { margin-top: 20px !important; }
.vz-marks b { color: var(--ink); font-weight: 600; }
.vz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px !important; }
.vz-ctas { justify-content: flex-start; margin-top: 32px !important; }
/* что передаётся и что нет: два списка на тёмной полосе */
.vz-band .vz-h2 { color: #fff; }
.vz-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px !important; }
.vz-list__k { margin-bottom: 16px; }
.vz-band .us-marks--no li { color: #C3CCEB; }
.vz-band .us-marks--no li::before { background-color: rgba(255, 255, 255, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3CCEB' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E"); }
/* три карточки с куском экрана внизу */
.vz-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vz-card3 { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: var(--soft); }
.vz-card3 h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vz-card3 p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.vz-card3__img { display: block; margin-top: auto; padding-top: 16px; }
.vz-card3__img img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* варианты внедрения */
.vz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vz-opt { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.vz-opt h3 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vz-opt .vz-ctas { margin-top: auto !important; padding-top: 8px; }
/* этапы в ряд */
.vz-steps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vz-steps--row li { padding: 24px; border: 0; border-radius: 16px; background: var(--soft); }
.vz-steps--row li:first-child { padding-top: 24px; }
.vz-steps--row p { font-size: 17px; line-height: 26px; }
/* почему доверять: карточки главной .sf */
.vz-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vz-trust .sf { grid-template-columns: 40px 1fr; align-items: center; }
.vz-trust .sf svg { grid-row: auto; color: var(--blue); }
.vz-trust .sf p { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.vz-trust b { color: var(--ink); }
/* отзывы карточками */
.vz-revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vz-rev { display: flex; flex-direction: column; margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.vz-rev blockquote { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink); }
.vz-rev .vz-who { margin-top: auto; padding-top: 20px; }
/* слово Ивана: текст и фото */
.vz-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 48px; align-items: center; padding: 40px 48px; border-radius: 24px; background: var(--ai-tint, #F5F0FA); }
.vz-note blockquote { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; font-weight: 500; color: var(--ink); }
.vz-note__who { margin: 20px 0 0; font-size: 14px; color: var(--ink-3); }
.vz-note__who b { display: block; font-size: 17px; color: var(--ink); }
.vz-note__ph { margin: 0; }
.vz-note__ph img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* каталог «Возможностей»: первый экран по центру, три преимущества, сетка всех возможностей */
.vz-hero--center .in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.vz-hero--center .us-crumbs, .vz-hero--center .ctas { justify-content: center; }
.vz-hero--center .us-title { max-width: 18ch; margin-inline: auto; }
.vz-plus3 { padding-top: 56px; }
.vz-card3__img--top { order: -1; margin: 0 0 8px; padding: 0; }
.vz-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vz-feat { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: var(--soft); color: var(--ink); transition: background-color .3s var(--ease, ease); }
a.vz-feat:hover { background: var(--soft-2); }
a.vz-feat:hover .arrow { transform: translateX(3px); }
.vz-feat__img { display: block; margin-bottom: 6px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.vz-feat__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.vz-feat__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vz-feat h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; }
.vz-feat p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }

/* решения по отраслям: логотипы, задачи со ссылками на разделы, разделы «задача: главный пункт и два малых» */
.vz-logos { padding-top: 56px; }
.vz-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vz-task { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 16px; background: var(--soft); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); transition: background-color .3s var(--ease, ease); }
.vz-task:hover { background: var(--soft-2); }
.vz-task__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; font-size: 18px; color: var(--blue); }
.vz-task .arrow { transform: none; }
.vz-split--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.vz-h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.vz-cards3--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.vz-razdel .sec-h .us-k { margin: 0; }

/* проблемы и решения карточками (торговля) */
.vz-probs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vz-prob { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 16px; background: var(--soft); }
.vz-prob h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vz-prob > p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.vz-prob__k { margin: 8px 0 0 !important; color: var(--blue) !important; }
.vz-prob__ex { margin: auto 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.vz-prob__ex figcaption { font: 500 12px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vz-prob__ex blockquote { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--ink); }
.vz-prob__ex p { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.vz-prob__ex b { color: var(--ink); }
.vz-revs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-ava { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--tint); font-weight: 600; color: var(--blue); }

/* финансистам: задачи «решение и результат», почему выбирают, заметка, карточка партнёрской программы */
.vz-zad + .vz-zad { margin-top: 56px; }
.vz-zad .vz-text > .vz-prob__k { margin-top: 20px !important; }
.vz-split--top { align-items: start; }
.vz-zametka { padding: 16px 20px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--soft); color: var(--ink) !important; font-weight: 500; }
.vz-note--plain { grid-template-columns: minmax(0, 1fr); background: var(--soft); }
.vz-note__p { margin: 12px 0 0; max-width: 48em; font-size: 18px; line-height: 28px; color: var(--ink-2); }

.vz-hero__marks { margin-top: 20px; font-size: 17px; line-height: 26px; }
.vz-ist .vz-ist__res { color: var(--ink); font-weight: 600; }
.vz-ist { color: var(--ink); transition: background-color .3s var(--ease, ease); }
.vz-ist:hover { background: var(--soft-2); }

.vz #cases { padding-bottom: clamp(72px, 8vw, 120px); }
.vz #cases .gn-cta { margin-top: 32px; justify-content: center; }

@media (max-width: 1020px) {
  .vz-hero .in { grid-template-columns: minmax(0, 1fr); }
  .vz-split, .vz-split--rev, .vz-split--wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vz-tour { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); padding: 40px 32px 0; }
}
@media (max-width: 1020px) {
  .vz-cards3, .vz-revs, .vz-trust, .vz-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-note { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); padding: 32px; }
}
@media (max-width: 760px) {
  .vz-grid, .vz-more, .vz-cards3, .vz-revs, .vz-trust, .vz-opts, .vz-steps--row, .vz-lists, .us-inc--2, .us-inc--3, .vz-feats, .vz-tasks, .vz-cards3--2, .vz-probs, .vz-revs--2 { grid-template-columns: minmax(0, 1fr); }
  .vz-note { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .vz-note__ph { max-width: 200px; }
  .vz-case { padding: 28px 24px; }
  .vz-split--alt > .vz-shot { order: 0; }
  .vz-tour { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 0; }
  .vz-tour__txt { padding-bottom: 0; }
  .vz-tour__face { max-width: 300px; margin-inline: auto; }
  .vz-quote { padding: 28px 24px; }
  .vz-steps p { font-size: 18px; line-height: 28px; }
  .vz-itog { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
}

/* «Партнёрам»: цифры программы, форматы участия, подарок у кнопки. Крупные цифры шрифтом заголовков,
   как цифры в историях клиентов на главной; подписи #404C72 */
.us-inc--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vz-cifry { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.vz-cifry li { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 16px; background: var(--soft); }
.vz-cifry .num { font-family: var(--font); font-size: clamp(36px, 4.4vw, 64px); font-weight: 650; line-height: 1; letter-spacing: -.04em; color: var(--blue); white-space: nowrap; }
.vz-cifry span { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.vz-cifry--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-cifry--2 .num { font-size: clamp(56px, 7vw, 112px); }
/* в первом экране цифры белой карточкой справа, строками */
.vz-cifry--hero { gap: 0; padding: 8px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.vz-cifry--hero li { padding: 20px 0; border-radius: 0; background: none; }
.vz-cifry--hero li + li { border-top: 1px solid var(--line); }
.vz-cifry--hero .num { font-size: clamp(30px, 3.2vw, 44px); }
.vz-cifry--hero span { font-size: 16px; }

.vz-fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.vz-fmt { display: flex; flex-direction: column; gap: 8px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.vz-fmt h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vz-fmt__pct { margin: 0; font-family: var(--font); font-size: clamp(56px, 6vw, 88px); font-weight: 650; line-height: 1; letter-spacing: -.04em; color: var(--blue); }
.vz-fmt__p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.vz-fmt__p b { color: var(--ink); font-weight: 650; }
.vz-fmt__usl { margin-top: auto; padding-top: 24px; }
.vz-fmt__usl .us-panel__k { margin: 0 0 6px; color: var(--ink-3); }
.vz-fmt__usl p:last-child { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.vz-fmt--on { border: 2px solid var(--blue); box-shadow: 0 24px 60px -36px rgba(41, 81, 202, .55); }
.vz-gift { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 1020px) {
  .us-inc--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-fmts { grid-template-columns: minmax(0, 1fr); }
  .vz-cifry--hero { max-width: 560px; }
}
@media (max-width: 760px) {
  .us-inc--6, .vz-cifry--2 { grid-template-columns: minmax(0, 1fr); }
  .vz-cifry li { padding: 22px; }
  .vz-cifry--hero { padding: 4px 22px; }
  .vz-cifry--hero li { padding: 18px 0; }
  .vz-fmt { padding: 24px; }
}
/* пять отзывов: три в первом ряду, два во втором на всю ширину */
@media (min-width: 1021px) {
  .vz-revs--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vz-revs--5 > :nth-child(-n+3) { grid-column: span 2; }
  .vz-revs--5 > :nth-child(n+4) { grid-column: span 3; }
}

/* ролик Kinescope: 16:9 со скруглением, как скриншоты; подпись под ним */
.vz-video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0E1838; }
.vz-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vz-video__cap { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-align: center; }
/* итоги списком с галочками в две колонки (/integration) */
.vz-galochki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; font-size: 18px; line-height: 1.5; }
@media (max-width: 760px) { .vz-galochki { grid-template-columns: minmax(0, 1fr); font-size: 17px; } }