/*
 * Тема «СберСити» для маркетинговых страниц Смарт Дома.
 *
 * Страницы: /, /service-support, /service-support/demo, /products/smart-platform, /products/iskra.
 * Образец — sbercity.ru, блок модели В10 на главной — по образцу https://sbercity.ru/#genplan.
 * Цвета и отступы — токены библиотеки «Дизайн система → Future [new]» (ds-tokens.css, без правок),
 * шрифт — SB Sans Display, кнопки — v-button (primary-main, secondary-main, secondary-alternative).
 *
 * Это слой поверх готовой сборки v37: файл подключается в конце <body>, поэтому идёт в каскаде
 * после стилей сборки и <style> из presale-polish-v23.js. Все правила привязаны к корням
 * маркетинговых страниц (.smart-dom-home, .product-marketing, .ss-page), чтобы не задеть
 * /assistant, /passport и /platform. Префикс html:root поднимает специфичность над правилами
 * presale-polish; многие свойства помечены !important, потому что presale-polish задаёт кнопкам,
 * скруглениям и шрифтам значения с !important.
 * Для постоянной поставки перенести эти стили в авторский React-проект.
 * Сервер отдаёт /assets/ с кешем на год: при правке файла менять ?v= в ссылке и в @import.
 */
@import url("./ds-tokens.css?v=15a5fe95b04d");

@font-face { font-family: "SB Sans Display"; src: url("./fonts/SBSansDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SB Sans Display"; src: url("./fonts/SBSansDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SB Sans Display"; src: url("./fonts/SBSansDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SB Sans Display"; src: url("./fonts/SBSansDisplay-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ */
/* Общие значения темы                                                 */
/* ------------------------------------------------------------------ */

html:root {
  --sbc-font: "SB Sans Display", Arial, sans-serif;
  /* Стиль заливки Future «gradient light» в форме, как у v-button primary-main на sbercity.ru */
  --sbc-gradient-light: radial-gradient(125.41% 144.07% at 71.25% 28.12%, #79c8dd 0%, #9a9ff6 49.71%, #7169f3 100%);
  --sbc-ease: 0.3s ease-in-out;
  --sbc-page-width: min(100% - 2 * var(--ds-layout-side), 1600px);
  /* Акцент для текста и для заливок с белым текстом — malachite/900: у text-accent-primary (malachite/800)
     контраст с белым 4,38:1, ниже нормы WCAG AA 4,5:1 для текста 12–16 px; у malachite/900 — 6,85:1.
     Значки, черты и плитки без текста остаются malachite/800. Вернуть цвет библиотеки — заменить обе строки. */
  --sbc-accent-text: var(--ds-malachite-900);
  --sbc-accent-fill: var(--ds-malachite-900);
  /* Title / T4 (SB Sans Display Regular 40/108 %, трекинг −2 %, заглавные) — все заголовки разделов и первых
     экранов (по просьбе Дины 2026-10-27); на планшете и телефоне — плавно меньше, от 28 px */
  --sbc-title: clamp(28px, 4vw, 40px);
}

/* Шрифт всей страницы */
html:root :is(.smart-dom-home, .product-marketing, .ss-page),
html:root :is(.smart-dom-home, .product-marketing, .ss-page) *:not(svg, svg *) {
  font-family: var(--sbc-font) !important;
}

/* Sub title / ST 1 — подпись над заголовком раздела */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) :is(.home-kicker, .product-kicker, .ss-kicker, .product-marketing__eyebrow) {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--ds-text-default-secondary);
}

/* Title / T4 — заголовок раздела, заглавными */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) h2 {
  font-size: var(--sbc-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Заглавные заголовки шире строчных: слова не рвём, ограничения ширины в ch поднимаем по месту */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) :is(h1, h2) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

/* Title / T1 — заголовок первого экрана */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) h1 {
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Headline / H3 — заголовок карточки, обычным регистром */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) h3 {
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none;
}

/* Paragraph — основной текст */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) p {
  letter-spacing: -0.02em;
}

/* Фокус клавиатуры — акцентный цвет библиотеки вместо фиолетового */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) :is(a, button, [role="button"]):focus-visible {
  outline: 2px solid var(--ds-border-accent-primary) !important;
  outline-color: var(--ds-border-accent-primary) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* v-button                                                            */
/* L — 48 px, M — 40 px; углы прямые; 14 px Medium; 0,3 с              */
/* ------------------------------------------------------------------ */

html:root .smart-dom-home :is(
  .home-story-content-link, .home-story-play, .home-nav__cta, .home-button,
  .product-gateway__actions > a, .product-path-card__links > a
) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  height: 48px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--sbc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
  text-decoration: none !important;
  translate: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color var(--sbc-ease), box-shadow var(--sbc-ease), color var(--sbc-ease) !important;
}

html:root .smart-dom-home :is(.home-story-content-link, .home-nav__cta) {
  min-height: 40px !important;
  height: 40px;
  padding: 0 16px !important;
}

html:root .smart-dom-home :is(
  .home-story-content-link, .home-story-play, .home-nav__cta, .home-button,
  .product-gateway__actions > a, .product-path-card__links > a
) svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* primary-main: градиент, белый текст; при наведении — светлая вуаль 20 % */
html:root .smart-dom-home :is(.home-story-content-link, .home-nav__cta, .home-button--primary, .product-path-card__links > a:first-child) {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0) !important;
}
html:root .smart-dom-home :is(.home-story-content-link, .home-nav__cta, .home-button--primary, .product-path-card__links > a:first-child):hover {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2) !important;
}

/* secondary-main: серый фон, тёмный текст */
html:root .smart-dom-home :is(.product-gateway__actions > a, .product-path-card__links > a:not(:first-child)) {
  background: var(--ds-bg-secondary-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .smart-dom-home :is(.product-gateway__actions > a, .product-path-card__links > a:not(:first-child)):hover {
  background: var(--ds-bg-secondary-hover) !important;
  color: var(--ds-text-default-primary) !important;
}

/* secondary-alternative: белая кнопка поверх фото и цветной плашки; на первом экране — «Смотреть / Приостановить видео»,
   чёрный текст на белом */
html:root .smart-dom-home :is(.home-story-play, .home-button--light) {
  background: var(--ds-bg-secondary-inverse-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .smart-dom-home :is(.home-story-play, .home-button--light):hover {
  background: var(--ds-bg-secondary-inverse-hover) !important;
  color: var(--ds-text-default-primary) !important;
}

/* «Посмотреть продукты ↓»: стрелка — часть текста сборки, отдельного элемента нет; надпись без стрелки
   нарисована стилями (программа чтения с экрана прочтёт исходный текст) */
html:root .smart-dom-home a.home-story-content-link.home-story-content-link {
  font-size: 0 !important;
  gap: 0 !important;
}
html:root .smart-dom-home a.home-story-content-link.home-story-content-link::before {
  content: "Посмотреть продукты";
  font-size: 14px;
}

/* overlay-dark: полупрозрачная тёмная кнопка на цветной плашке */
html:root .smart-dom-home .home-button--ghost-light {
  background: var(--ds-bg-alpha-dark-enabled) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: none !important;
}
html:root .smart-dom-home .home-button--ghost-light:hover {
  background: var(--ds-bg-alpha-dark-hover) !important;
  color: var(--ds-text-white-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Главная: цвета и поверхности                                        */
/* ------------------------------------------------------------------ */

html:root .smart-dom-home {
  --home-canvas: var(--ds-bg-layout-inverse);
  --home-paper: var(--ds-bg-layout-default);
  --home-ink: var(--ds-text-default-primary);
  --home-muted: var(--ds-text-default-secondary);
  --home-line: var(--ds-border-default-tetriary);
  --home-violet: var(--sbc-accent-text);
  --home-violet-soft: var(--ds-malachite-300);
  --home-teal: var(--sbc-accent-text);
  --home-amber: var(--sbc-accent-text);
  --home-night: var(--ds-granite-900);
  background: var(--ds-bg-layout-inverse);
  color: var(--ds-text-default-primary);
}

/* Ширина контента — с боковыми полями библиотеки (32 / 24 / 16) */
html:root .smart-dom-home > :is(.home-gateway-section, .home-service-proof, .home-product-paths, .home-final, .home-footer),
html:root .smart-dom-home > .product-path-grid {
  width: var(--sbc-page-width) !important;
}

/* Порядок блоков: сначала «Решения для вашего здания», затем «Посмотрите, как это работает».
   Разметка не меняется — порядок задаёт flex-order. Постраничное листание сборки сортирует секции
   по положению на экране (не по разметке), поэтому листает в новом порядке. Порядок перехода
   с клавиатуры (Tab) остаётся по разметке — в авторском проекте поменять местами сами секции. */
html:root main.smart-dom-home {
  display: flex;
  flex-direction: column;
}
html:root .smart-dom-home > #building-model {
  order: 1;
}
html:root .smart-dom-home > #building-model ~ :not(#approach) {
  order: 2;
}

/* Первый экран с видео: Title / T1 белым, как «Город, который строит Сбер» */
html:root .smart-dom-home .vfp-chapter {
  max-width: min(920px, 100%);
}
html:root .smart-dom-home .vfp-chapter > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-white-secondary);
}
html:root .smart-dom-home .vfp-chapter h1 {
  margin: 16px 0 24px;
  font-size: var(--sbc-title);
  color: var(--ds-text-white-primary);
}
html:root .smart-dom-home .vfp-chapter p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ds-text-white-secondary);
}
html:root .smart-dom-home .vfp-footer nav button i {
  background: var(--ds-white-opacity-300);
}
html:root .smart-dom-home .vfp-footer nav button.is-active i {
  background: var(--ds-white-opacity-900);
}

/* Шапка после первого экрана — белая, как на sbercity.ru */
html:root .smart-dom-home .home-header {
  background: var(--ds-bg-layout-default) !important;
  border-bottom: 1px solid var(--ds-border-default-tetriary);
}
/* Высота шапки — 70 px, как у sbercity.ru; логотип «Сбер Сити · Смарт Дом» — 42 px по высоте.
   Сборка сама пересчитывает --section-header-height по высоте шапки, поэтому экраны секций и
   постраничное листание подстраиваются. На телефоне шапки сборки не меняются */
@media (min-width: 768px) {
  html:root .smart-dom-home .home-header,
  html:root .product-marketing__header,
  html:root .ss-page .ss-header {
    height: 70px !important;
    min-height: 70px !important;
    padding-block: 0 !important;
  }
  html:root .smart-dom-home .home-header > a:first-child img,
  html:root .product-marketing__brand img,
  html:root .ss-page .ss-brand img {
    width: auto !important;
    height: 42px !important;
  }
  /* Логотип на первом экране главной (поверх видео) — вдвое крупнее, 84 px */
  html:root .smart-dom-home .vfp-header img {
    width: auto !important;
    height: 84px !important;
  }
}
html:root .smart-dom-home .home-nav a:not(.home-nav__cta) {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ds-text-default-primary);
  transition: color var(--sbc-ease);
}
html:root .smart-dom-home .home-nav a:not(.home-nav__cta):hover {
  color: var(--sbc-accent-text);
}

/* ------------------------------------------------------------------ */
/* Блок модели В10 — по образцу #genplan                               */
/* серый фон во всю ширину; подпись и заголовок по центру;             */
/* ряд белых карточек с квадратом-картинкой; модель во всю ширину      */
/* ------------------------------------------------------------------ */

html:root .smart-dom-home #building-model {
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  background: var(--ds-bg-layout-inverse);
}
/* Над моделью заголовка нет (2026-10-27): «Посмотрите, как это работает» — заголовок левой панели вьюера в исходном
   виде; секция начинается с вкладок, модели остаётся больше высоты */
html:root .smart-dom-home #building-model > .b10-building__heading {
  display: none !important;
}
html:root .smart-dom-home .b10-building__heading {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 24px var(--ds-layout-side) !important;
  border: 0 !important;
  text-align: center;
}
html:root .smart-dom-home .b10-building__heading > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
html:root .smart-dom-home .b10-building__heading .home-kicker,
html:root .smart-dom-home .b10-building__heading > p {
  display: none !important;
}
html:root .smart-dom-home .b10-building__heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px) !important;
  color: var(--ds-text-default-primary);
}

/* Вкладки продуктов — v-tab (меню вкладок sbercity.ru/payment/mortgage, макет Дины в Figma): 54 px,
   вкладки равной ширины, Label L4 [M] 14 px по центру; выбранная — granite/900 с белым текстом, остальные —
   granite/200 с серым текстом; между невыбранными — разделитель 1 × 15 px granite/500.
   Вкладок четыре: «Эксплуатация объекта» (4-я кнопка сборки) скрыта и включается переключателем внутри
   вьюера (sbercity-viewer-ux.js); 2-я кнопка («Сопровождение сервисов») подписана «Сервисы здания»
   и выглядит выбранной и при включённой эксплуатации */
html:root .smart-dom-home .b10-building__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--ds-granite-200);
}
html:root .smart-dom-home .b10-building__products > button:nth-child(4) {
  display: none !important;
}
html:root .smart-dom-home .b10-building__products > button {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 54px !important;
  height: 54px;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-granite-200) !important;
  box-shadow: none !important;
  color: var(--ds-text-default-secondary) !important;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--sbc-ease), color var(--sbc-ease) !important;
}
html:root .smart-dom-home .b10-building__products > button :is(.b10-building__product-number, span:last-of-type),
html:root .smart-dom-home .b10-building__products > button > svg {
  display: none !important;
}
html:root .smart-dom-home .b10-building__products > button strong {
  max-width: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  overflow-wrap: normal !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  color: inherit;
}
html:root .smart-dom-home .b10-building__products > button:nth-child(2) strong {
  font-size: 0 !important;
}
html:root .smart-dom-home .b10-building__products > button:nth-child(2) strong::before {
  content: "Сервисы здания";
  font-size: 14px;
}
html:root .smart-dom-home .b10-building__products > button:hover {
  background: var(--ds-granite-300) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .smart-dom-home .b10-building__products > button[aria-pressed="true"],
html:root .smart-dom-home .b10-building__products:has(> button:nth-child(4)[aria-pressed="true"]) > button:nth-child(2) {
  background: var(--ds-granite-900) !important;
  color: var(--ds-text-white-primary) !important;
}
/* Разделители: справа у каждой вкладки, кроме последней, выбранной и стоящей перед выбранной */
html:root .smart-dom-home .b10-building__products > button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 15px;
  transform: translateY(-50%);
  background: var(--ds-granite-500);
}
html:root .smart-dom-home .b10-building__products > button:nth-child(5)::after,
html:root .smart-dom-home .b10-building__products > button[aria-pressed="true"]::after,
html:root .smart-dom-home .b10-building__products > button:is(:nth-child(1), :nth-child(2)):has(+ button[aria-pressed="true"])::after,
html:root .smart-dom-home .b10-building__products > button:nth-child(3):has(~ button:nth-child(5)[aria-pressed="true"])::after,
html:root .smart-dom-home .b10-building__products:has(> button:nth-child(4)[aria-pressed="true"]) > button:is(:nth-child(1), :nth-child(2))::after {
  display: none;
}

/* Телефон: в полосе над открытым вьюером остаётся только «Закрыть показ» — «Следующий продукт»
   убран так же, как «Другой продукт» внутри вьюера */
html:root .smart-dom-home .b10-building__actions > button:first-child {
  display: none !important;
}

/* Модель — во всю ширину, без рамки и скруглений, как карта генплана */
html:root .smart-dom-home .b10-building__viewer {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-granite-200) !important;
}
html:root .smart-dom-home .b10-building__frame {
  background: var(--ds-granite-200) !important;
}

/* Обложка до запуска модели, ожидание и заглушка ошибки загрузки — в той же системе */
html:root .smart-dom-home :is(.b10-building__cover, .b10-building__error, .b10-building__waiting) {
  background: var(--ds-bg-layout-inverse) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .smart-dom-home .b10-building__cover-mark {
  border-color: var(--ds-border-default-secondary) !important;
  border-radius: 0 !important;
  color: var(--ds-icon-accent-primary) !important;
  transform: none !important;
}
html:root .smart-dom-home .b10-building__cover-mark svg {
  transform: none !important;
}
html:root .smart-dom-home .b10-building__cover-kicker {
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.06em !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home .b10-building__cover h3 {
  font-size: var(--sbc-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  color: var(--ds-text-default-primary) !important;
}
html:root .smart-dom-home :is(.b10-building__cover > p, .b10-building__error p, .b10-building__waiting) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home .b10-building__load-note {
  font-size: 12px !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home :is(.b10-building__open, .b10-building__error button) {
  min-height: 48px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0);
  transition: box-shadow var(--sbc-ease);
}
html:root .smart-dom-home :is(.b10-building__open, .b10-building__error button):hover {
  background: var(--sbc-gradient-light) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2);
}

/* ------------------------------------------------------------------ */
/* Главная: разделы с карточками                                       */
/* белые карточки на сером фоне, зазор 8 px, без скруглений            */
/* ------------------------------------------------------------------ */

html:root .smart-dom-home .home-section-heading p:not(.home-kicker) {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-text-default-secondary);
}
html:root .smart-dom-home .home-section-heading h2 {
  color: var(--ds-text-default-primary);
}

/* «Решения для вашего здания» — сетка 2 × 2. В карточке слева иллюстрация во всю высоту, справа номер,
   подпись, заголовок, текст и кнопки: текст и кнопки не перекрывают предмет на иллюстрации.
   Иллюстрации 9:16, предмет — в нижней половине кадра, поэтому кадр выравнивается по низу (80 %). */
html:root .smart-dom-home .home-gateway-section .home-section-heading {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr) !important;
  align-items: end !important;
  gap: 16px 48px !important;
  margin-bottom: 32px !important;
}
html:root .smart-dom-home .product-gateway {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ds-cards-to-cards) !important;
  border: 0 !important;
}
html:root .smart-dom-home .product-gateway__card,
html:root .smart-dom-home .product-gateway__card:first-child {
  --sbc-card-media: clamp(160px, 28%, 260px);
  display: grid !important;
  grid-template-columns: var(--sbc-card-media) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-content: stretch;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  box-shadow: none !important;
}
html:root .smart-dom-home .product-gateway__card::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: 220px;
  background: var(--ds-granite-900) var(--sbc-card-image) center 80% / cover no-repeat;
}
html:root .smart-dom-home .product-gateway__card--energy-modeling { --sbc-card-image: url("./sbercity-cards/card-energy-modeling.webp"); }
html:root .smart-dom-home .product-gateway__card--service-support { --sbc-card-image: url("./sbercity-cards/card-service-support.webp"); }
html:root .smart-dom-home .product-gateway__card--smart-spaces { --sbc-card-image: url("./sbercity-cards/card-smart-spaces.webp"); }
html:root .smart-dom-home .product-gateway__card--ev-charging { --sbc-card-image: url("./sbercity-cards/card-ev-charging.webp"); }
html:root .smart-dom-home .product-gateway__card > * {
  grid-column: 2;
  margin-inline: 24px !important;
}
html:root .smart-dom-home .product-gateway__heading {
  min-height: 0 !important;
  margin-top: 24px !important;
}
html:root .smart-dom-home .product-gateway__heading > span:last-child {
  max-width: none !important;
}
html:root .smart-dom-home .product-gateway__card h3 {
  min-height: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}
html:root .smart-dom-home .product-gateway__card > p {
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
html:root .smart-dom-home .product-gateway__actions {
  align-self: end;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
/* В карточках кнопки M 40: три кнопки «Сервисов здания» умещаются в две строки */
html:root .smart-dom-home .product-gateway__actions > a {
  min-height: 40px !important;
  height: 40px;
  padding: 0 16px !important;
}
html:root .smart-dom-home .product-gateway__heading > span {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home .product-gateway__heading > span:first-child {
  color: var(--sbc-accent-text) !important;
}
html:root .smart-dom-home .product-gateway__card h3 {
  font-size: 24px !important;
  color: var(--ds-text-default-primary);
}
html:root .smart-dom-home .product-gateway__card p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary);
}

/* «Проверяем сервисы до сдачи здания» — фото и белая карточка */
html:root .smart-dom-home .home-service-proof__copy {
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
  border-radius: 0 !important;
}
html:root .smart-dom-home .home-service-proof__media,
html:root .smart-dom-home .home-service-proof__media img {
  border-radius: 0 !important;
}
html:root .smart-dom-home .home-service-proof__copy h2 {
  color: var(--ds-text-default-primary) !important;
}
html:root .smart-dom-home .home-service-proof__copy > p:not(.home-kicker) {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home .home-service-proof__copy .home-kicker {
  color: var(--ds-text-default-secondary) !important;
}
html:root .smart-dom-home .home-service-proof__copy ol li {
  border-color: var(--ds-border-default-tetriary) !important;
}
html:root .smart-dom-home .home-service-proof__copy ol li span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sbc-accent-text) !important;
}
html:root .smart-dom-home .home-service-proof__copy ol li strong {
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-text-default-primary) !important;
}

/* «От сигнала датчика — к решению» — три карточки */
html:root .smart-dom-home .smart-dom-os-flow {
  gap: var(--ds-cards-to-cards) !important;
  border: 0 !important;
}
html:root .smart-dom-home .smart-dom-os-flow > li {
  padding: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-bg-layout-default) !important;
}
html:root .smart-dom-home .smart-dom-os-flow > li > span {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sbc-accent-text) !important;
}
html:root .smart-dom-home .smart-dom-os-flow > li h3 {
  font-size: 28px !important;
  color: var(--ds-text-default-primary);
}
html:root .smart-dom-home .smart-dom-os-flow > li p {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary);
}

/* Смарт Платформа и Смарт Диспетчер — белая карточка и снимок экрана */
html:root .smart-dom-home .product-path-card {
  gap: var(--ds-cards-to-cards) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html:root .smart-dom-home .product-path-card__copy {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-bg-layout-default) !important;
}
html:root .smart-dom-home .product-path-card > picture,
html:root .smart-dom-home .product-path-card > picture img {
  border: 0 !important;
  border-radius: 0 !important;
}
html:root .smart-dom-home .product-path-card__copy > span {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--sbc-accent-text) !important;
}
html:root .smart-dom-home .product-path-card__copy h3 {
  font-size: var(--sbc-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  text-transform: uppercase;
  color: var(--ds-text-default-primary);
}
html:root .smart-dom-home .product-path-card__copy p {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary);
}

/* «Что проверили и что осталось исправить» — фото, белый текст */
html:root .smart-dom-home .home-passport-scene__copy {
  width: var(--sbc-page-width) !important;
}
html:root .smart-dom-home .home-passport-scene .home-kicker {
  color: var(--ds-text-white-secondary) !important;
}
html:root .smart-dom-home .home-passport-scene h2 {
  color: var(--ds-text-white-primary) !important;
}
html:root .smart-dom-home .home-passport-scene__copy > p:not(.home-kicker) {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ds-text-white-secondary) !important;
}

/* «Выберите сервисы для вашего здания» — акцентная плашка малахитового цвета */
html:root .smart-dom-home .home-final__panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sbc-accent-fill) !important;
  box-shadow: none !important;
}
html:root .smart-dom-home .home-final__panel .home-kicker {
  color: var(--ds-text-white-primary) !important;
}
html:root .smart-dom-home .home-final__panel h2 {
  color: var(--ds-text-white-primary) !important;
}
html:root .smart-dom-home .home-final__next > p {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-text-white-primary) !important;
}

/* Подвал */
html:root .smart-dom-home .home-footer {
  border-top: 1px solid var(--ds-border-default-secondary);
  font-size: 14px;
  color: var(--ds-text-default-secondary);
}
html:root .smart-dom-home .home-footer :is(a, span) {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--ds-text-default-secondary);
  transition: color var(--sbc-ease);
}
html:root .smart-dom-home .home-footer a:hover {
  color: var(--sbc-accent-text);
}

/* ------------------------------------------------------------------ */
/* Страницы продуктов: Смарт Платформа, Смарт Диспетчер,               */
/* демо сопровождения. Тёмной темы в Future нет — светлая схема        */
/* sbercity.ru: серый фон, белые панели, акцент malachite/800          */
/* ------------------------------------------------------------------ */

html:root .product-marketing {
  --product-accent: var(--sbc-accent-text);
  --product-accent-rgb: 13 100 110;
  --product-accent-ink: var(--ds-text-white-primary);
  --product-bg: var(--ds-bg-layout-inverse);
  --product-bg-deep: var(--ds-bg-layout-inverse);
  --product-surface: var(--ds-bg-layout-default);
  --product-surface-soft: var(--ds-bg-layout-default);
  --product-text: var(--ds-text-default-primary);
  --product-muted: var(--ds-text-default-secondary);
  --product-line: var(--ds-border-default-tetriary);
  --product-line-strong: var(--ds-border-default-secondary);
  --product-paper: var(--ds-bg-layout-default);
  --product-paper-soft: var(--ds-bg-secondary-enabled);
  --product-paper-ink: var(--ds-text-default-primary);
  --product-paper-muted: var(--ds-text-default-secondary);
  background: var(--ds-bg-layout-inverse) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root body:has(.product-marketing) {
  background: var(--ds-bg-layout-inverse);
}

/* Шапка — белая; белый логотип сборки перекрашен в чёрный фильтром (файл логотипа не меняется) */
html:root .product-marketing__header {
  border-bottom: 1px solid var(--ds-border-default-tetriary) !important;
  background: var(--ds-bg-layout-default) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:root .product-marketing :is(.product-marketing__brand, .product-marketing__footer > a) img {
  filter: brightness(0);
}
html:root .product-marketing__header nav a {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ds-text-default-secondary) !important;
  transition: color var(--sbc-ease);
}
html:root .product-marketing__header nav a:is([aria-current], .active, .is-active) {
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing__header nav a:hover {
  color: var(--sbc-accent-text) !important;
}

/* Кнопки страниц продуктов */
html:root .product-marketing :is(.product-action, .product-marketing__header-action, .product-marketing__action) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  height: 48px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--sbc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
  text-decoration: none !important;
  translate: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color var(--sbc-ease), box-shadow var(--sbc-ease), color var(--sbc-ease) !important;
}
html:root .product-marketing .product-marketing__header-action {
  min-height: 40px !important;
  height: 40px;
  padding: 0 16px !important;
}
html:root .product-marketing :is(.product-action, .product-marketing__header-action, .product-marketing__action) svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
html:root .product-marketing :is(.product-action--primary, .product-marketing__header-action, .product-marketing__action--primary) {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0) !important;
}
html:root .product-marketing :is(.product-action--primary, .product-marketing__header-action, .product-marketing__action--primary):hover {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2) !important;
}
html:root .product-marketing :is(.product-action--secondary, .product-marketing__action--secondary) {
  background: var(--ds-bg-secondary-inverse-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .product-marketing :is(.product-action--secondary, .product-marketing__action--secondary):hover {
  background: var(--ds-bg-secondary-inverse-hover) !important;
  color: var(--ds-text-default-primary) !important;
}

/* Блоки страницы: прямые углы, зазор между ними 8 px */
html:root .product-marketing main {
  gap: var(--ds-cards-to-cards) !important;
}
html:root .product-marketing :is(
  .product-hero, .platform-path, .platform-device, .platform-path__steps, .platform-path__steps > li,
  .product-boundary, .product-final, .dispatcher-loop, .dispatcher-loop__steps, .dispatcher-loop__steps > li,
  .dispatcher-evidence, .mascot-scene, .product-capture, .product-capture__image
) {
  border-radius: 0 !important;
}

/* Первый экран продукта: Title / T1 тёмным на сером, белая рамка снимка */
html:root .product-marketing h1 {
  font-size: var(--sbc-title) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing :is(.product-lead, .product-marketing__lead) {
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing .product-note {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing :is(h1, .product-hero h1, .product-hero--dispatcher h1) {
  max-width: 20ch !important;
}
html:root .product-marketing .support-demo-status h1 {
  max-width: 24ch !important;
}
html:root .product-marketing h2 {
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing :is(.product-section-heading, .platform-device__copy, .dispatcher-evidence__copy, .mascot-scene__copy, .product-final) h2 {
  max-width: 28ch !important;
}
/* Заголовок над снимком во всю ширину — только в обычной раскладке. В режиме листания по разделам
   (html.page-paging) заголовок стоит в первой колонке, а снимок — во второй, в том же ряду;
   растянутый заголовок уходил под снимок (исправлено 2026-10-27) */
html:root:not(.page-paging) .product-marketing .platform-path > .product-section-heading {
  grid-column: 1 / -1;
  max-width: 960px;
}
html:root .product-marketing h3 {
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing .product-kicker,
html:root .product-marketing .product-marketing__eyebrow {
  color: var(--ds-text-default-secondary) !important;
}

/* Снимки экрана в белой рамке с подписью — как карточки sbercity.ru */
html:root .product-marketing .product-capture {
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  box-shadow: none !important;
}
html:root .product-marketing .product-capture figcaption {
  border-top: 1px solid var(--ds-border-default-tetriary) !important;
  background: var(--ds-bg-layout-default) !important;
}
html:root .product-marketing .product-capture figcaption span {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--sbc-accent-text) !important;
}
html:root .product-marketing .product-capture figcaption strong {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ds-text-default-primary) !important;
}

/* Путь «01 Отклонение → 04 Данные» — Sub title с тонкой чертой сверху */
html:root .product-marketing .product-route li {
  border-top: 1px solid var(--ds-border-default-secondary) !important;
}
html:root .product-marketing .product-route span {
  font-size: 12px !important;
  color: var(--sbc-accent-text) !important;
}
html:root .product-marketing .product-route strong {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--ds-text-default-primary) !important;
}

/* Разделы-сценарии: белая панель, шаги — серые карточки */
html:root .product-marketing :is(.platform-path, .dispatcher-loop) {
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing :is(.platform-path__steps, .dispatcher-loop__steps) {
  gap: var(--ds-cards-to-cards) !important;
  background: transparent !important;
}
html:root .product-marketing :is(.platform-path__steps, .dispatcher-loop__steps) > li {
  border: 0 !important;
  background: var(--ds-bg-secondary-enabled) !important;
}
html:root .product-marketing :is(.platform-path__steps, .dispatcher-loop__steps) span {
  font-family: var(--sbc-font) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sbc-accent-text) !important;
}
html:root .product-marketing :is(.platform-path__steps, .dispatcher-loop__steps) h3 {
  font-size: 20px !important;
}
html:root .product-marketing :is(.platform-path__steps, .dispatcher-loop__steps) p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing .platform-path__steps svg,
html:root .product-marketing .product-proof-list svg {
  color: var(--ds-icon-accent-primary) !important;
}
html:root .product-marketing .dispatcher-loop__steps::before {
  background: var(--ds-border-accent-primary) !important;
}
html:root .product-marketing .dispatcher-loop__steps > li::before {
  border-color: var(--ds-bg-secondary-enabled) !important;
  background: var(--ds-bg-layout-accent) !important;
  box-shadow: 0 0 0 1px var(--ds-border-accent-primary) !important;
}

/* Разделы со снимком и списком доводов — белая панель */
html:root .product-marketing :is(.platform-device, .dispatcher-evidence) {
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) > p:not(.product-kicker) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing .product-proof-list li {
  border-color: var(--ds-border-default-tetriary) !important;
}
html:root .product-marketing .product-proof-list span {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing .product-proof-list strong {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ds-text-default-primary) !important;
}

/* Искра — белая панель, мягкое малахитовое свечение вместо фиолетового */
html:root .product-marketing .mascot-scene {
  background: radial-gradient(circle at 24% 56%, var(--ds-malachite-100), transparent 24rem), var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing .mascot-scene__halo {
  border-color: var(--ds-malachite-300) !important;
  box-shadow: 0 0 8rem rgb(17 133 146 / 0.18), inset 0 0 5rem rgb(17 133 146 / 0.12) !important;
}
html:root .product-marketing .mascot-scene__brand-badge {
  background: var(--ds-bg-layout-accent) !important;
  box-shadow: 0 0 0 3px rgb(17 133 146 / 0.35) !important;
}
html:root .product-marketing .mascot-scene__copy > p:not(.product-kicker) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}

/* «Доступные данные» / «Работа инженера» — серая панель */
html:root .product-marketing .product-boundary {
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
}
html:root .product-marketing .product-boundary > p:not(.product-kicker) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .product-marketing .product-boundary h2 {
  max-width: none !important;
  font-size: var(--sbc-title) !important;
}

/* Финальный блок — акцентная плашка, как на главной */
html:root .product-marketing .product-final {
  background: var(--sbc-accent-fill) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-final :is(h2, .product-kicker) {
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-final .product-kicker {
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-final .product-action--primary {
  background: var(--ds-bg-secondary-inverse-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .product-marketing .product-final .product-action--primary:hover {
  background: var(--ds-bg-secondary-inverse-hover) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .product-marketing .product-final .product-action--secondary {
  background: var(--ds-bg-alpha-dark-enabled) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-final .product-action--secondary:hover {
  background: var(--ds-bg-alpha-dark-hover) !important;
  color: var(--ds-text-white-primary) !important;
}

/* Демо сопровождения: статус «готовится» */
html:root .product-marketing .support-demo-status > p:not(.product-marketing__eyebrow) {
  color: var(--ds-text-default-secondary) !important;
}

/* Подвал страниц продуктов */
html:root .product-marketing__footer {
  border-top: 1px solid var(--ds-border-default-secondary);
}
html:root .product-marketing__footer :is(a, span) {
  font-size: 14px !important;
  letter-spacing: -0.02em;
  color: var(--ds-text-default-secondary) !important;
  transition: color var(--sbc-ease);
}
html:root .product-marketing__footer a:hover {
  color: var(--sbc-accent-text) !important;
}

/* ------------------------------------------------------------------ */
/* Сопровождение сервисов (/service-support)                           */
/* переменные страницы — на токены Future; первый экран и паспорт      */
/* остаются на фото; тёмные секции без фото — серые с белыми карточками */
/* ------------------------------------------------------------------ */

html:root .ss-page {
  --ss-ink: var(--ds-text-default-primary);
  --ss-ink-soft: var(--ds-text-default-secondary);
  --ss-paper: var(--ds-bg-layout-inverse);
  --ss-paper-deep: var(--ds-bg-layout-inverse);
  --ss-white: var(--ds-bg-layout-default);
  --ss-violet: var(--sbc-accent-text);
  --ss-violet-dark: var(--ds-malachite-900);
  --ss-violet-pale: var(--ds-malachite-100);
  --ss-teal: var(--sbc-accent-text);
  --ss-amber: var(--sbc-accent-text);
  --ss-line: var(--ds-border-default-tetriary);
  --ss-radius: 0px;
  --ss-shadow: none;
  background: var(--ds-bg-layout-default);
  color: var(--ds-text-default-primary);
}
html:root .ss-progress {
  background: var(--ds-bg-layout-accent) !important;
}

/* Шапка — белая, логотип перекрашен в чёрный фильтром */
html:root .ss-page .ss-header {
  border-bottom: 1px solid var(--ds-border-default-tetriary) !important;
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:root .ss-page :is(.ss-brand, .ss-footer-brand) img {
  filter: brightness(0);
}
html:root .ss-page .ss-nav button:not(.ss-nav-cta) {
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--ds-text-default-primary) !important;
  background: transparent !important;
  transition: color var(--sbc-ease);
}
html:root .ss-page .ss-nav button:not(.ss-nav-cta):hover {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-nav .ss-nav-cta {
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0);
  transition: box-shadow var(--sbc-ease);
}
html:root .ss-page .ss-nav .ss-nav-cta:hover {
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2);
}

/* Кнопки: primary-main — градиент; secondary — серая на белом, белая на сером и на фото */
html:root .ss-page :is(a.ss-button, button.ss-button, .ss-button) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--sbc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  translate: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color var(--sbc-ease), box-shadow var(--sbc-ease), color var(--sbc-ease) !important;
}
html:root .ss-page .ss-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
html:root .ss-page :is(a.ss-button, button.ss-button, .ss-button).ss-button-primary {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0) !important;
}
html:root .ss-page :is(a.ss-button, button.ss-button, .ss-button).ss-button-primary:hover {
  background: var(--sbc-gradient-light) !important;
  color: var(--ds-text-white-primary) !important;
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2) !important;
}
html:root .ss-page :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary {
  background: var(--ds-bg-secondary-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .ss-page :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary:hover {
  background: var(--ds-bg-secondary-hover) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page :is(.ss-hero, .ss-passport, .ss-method, .ss-faq, .ss-control-points, .ss-service-sets, .ss-proof-lab) :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary {
  background: var(--ds-bg-secondary-inverse-enabled) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page :is(.ss-hero, .ss-passport, .ss-method, .ss-faq, .ss-control-points, .ss-service-sets, .ss-proof-lab) :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary:hover {
  background: var(--ds-bg-secondary-inverse-hover) !important;
}

/* Подписи над заголовками на фото и на плашке — белым */
html:root .ss-page :is(.ss-hero, .ss-passport, .ss-final) .ss-kicker {
  color: var(--ds-text-white-secondary) !important;
}
html:root .ss-page :is(.ss-hero, .ss-passport, .ss-final) :is(h1, h2) {
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page .ss-hero h1 {
  font-size: var(--sbc-title) !important;
}
html:root .ss-page .ss-hero-lead {
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-white-secondary) !important;
}
html:root .ss-page .ss-hero-facts > div {
  border-radius: 0 !important;
}
html:root .ss-page .ss-hero-facts dd {
  color: var(--ds-text-white-secondary) !important;
}

/* Описание под заголовком раздела — Paragraph P2 */
html:root .ss-page .ss-section-heading > p:last-child:not(.ss-kicker) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ds-text-default-secondary);
}

/* Скругления карточек и панелей страницы — прямые углы */
html:root .ss-page :is(
  .ss-human-scenario li, .ss-method-card, .ss-boundary-note, .ss-kt-panel, .ss-kt-selector button,
  .ss-phase-selector button, .ss-set-grid article, .ss-passport-layers > div, .ss-proof-evidence,
  .ss-service-card, .ss-archive-card, .ss-set-options label, .ss-download, .ss-kt-proof-grid > section,
  .ss-kt-mobile-controls, .ss-connectivity-verification, .ss-mobile-menu
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Этапы (если показаны) и «Десять контрольных точек» — серый фон вместо тёмного */
html:root .ss-page :is(.ss-stages, .ss-control-points, .ss-service-sets) {
  background: var(--ds-bg-layout-inverse) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page :is(.ss-stages, .ss-control-points, .ss-service-sets) :is(.ss-kicker, .ss-section-heading > p:last-child) {
  color: var(--ds-text-default-secondary) !important;
}
html:root .ss-page .ss-stage-list {
  gap: var(--ds-cards-to-cards) !important;
  padding: 0 !important;
  background: transparent !important;
}
html:root .ss-page .ss-stage-list li {
  background: var(--ds-bg-layout-default) !important;
}
html:root .ss-page .ss-stage-list li > span {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-stage-list p {
  color: var(--ds-text-default-secondary) !important;
}

/* Этапы — белые вкладки; выбранная отмечена малахитовой чертой снизу */
html:root .ss-page #control-points .ss-phase-selector button {
  --phase-color: var(--sbc-accent-text);
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-secondary) !important;
  box-shadow: none !important;
  transition: box-shadow var(--sbc-ease), color var(--sbc-ease);
}
html:root .ss-page #control-points .ss-phase-selector button:hover {
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page #control-points .ss-phase-selector button[data-active="true"] {
  color: var(--ds-text-default-primary) !important;
  box-shadow: inset 0 -2px 0 var(--ds-border-accent-primary) !important;
}
html:root .ss-page #control-points .ss-phase-selector button > :is(span, small) {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page #control-points .ss-phase-selector button > strong {
  font-weight: 500;
  color: inherit;
}

/* Контрольные точки — белые плитки; выбранная — малахитовая с белым текстом */
html:root .ss-page #control-points .ss-kt-selector button,
html:root .ss-page #control-points .ss-kt-selector button[data-active="true"] {
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-secondary) !important;
  transition: background-color var(--sbc-ease), color var(--sbc-ease);
}
html:root .ss-page #control-points .ss-kt-selector button:hover {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page #control-points .ss-kt-selector button[data-active="true"] {
  background: var(--sbc-accent-fill) !important;
  color: var(--ds-text-white-primary) !important;
}

/* Стрелки каруселей — квадратные белые кнопки 48 × 48, как v-slider */
html:root .ss-page :is(#service-catalog .ss-archive-carousel-controls, #service-catalog .ss-service-carousel, #service-sets .ss-set-carousel, #control-points .ss-kt-mobile-controls) > button {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-icon-default-primary) !important;
  transition: background-color var(--sbc-ease);
}
html:root .ss-page :is(#service-catalog .ss-archive-carousel-controls, #service-catalog .ss-service-carousel) > button {
  background: var(--ds-bg-secondary-enabled) !important;
}
html:root .ss-page :is(#service-catalog .ss-archive-carousel-controls, #service-catalog .ss-service-carousel) > button:hover:not(:disabled) {
  background: var(--ds-bg-secondary-hover) !important;
}
html:root .ss-page :is(#service-sets .ss-set-carousel, #control-points .ss-kt-mobile-controls) > button:hover:not(:disabled) {
  background: var(--ds-bg-secondary-inverse-hover) !important;
}
html:root .ss-page #control-points .ss-kt-mobile-controls {
  border: 0 !important;
  background: transparent !important;
}
html:root .ss-page #control-points .ss-kt-mobile-controls > span,
html:root .ss-page #control-points .ss-kt-mobile-controls > span strong,
html:root .ss-page #service-sets .ss-set-carousel [aria-live] {
  color: var(--ds-text-default-primary) !important;
}

/* Панель выбранной контрольной точки */
html:root .ss-page .ss-kt-panel {
  background: var(--ds-bg-layout-default) !important;
}
html:root .ss-page .ss-kt-panel .ss-kt-panel-head {
  background: var(--ds-bg-layout-default) !important;
  border-bottom: 1px solid var(--ds-border-default-tetriary);
}
html:root .ss-page :is(.ss-kt-transition, .ss-kt-proof-grid) {
  background: var(--ds-malachite-100) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page .ss-kt-proof-grid > section {
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
}

/* «Какие сервисы нужны вашему зданию» — белая карточка с фото */
html:root .ss-page .ss-set-grid article {
  border: 0 !important;
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page .ss-set-copy .ss-kicker {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-set-copy > p:not(.ss-kicker),
html:root .ss-page .ss-set-copy li {
  color: var(--ds-text-default-secondary) !important;
}
html:root .ss-page .ss-set-copy :is(h3, strong) {
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page .ss-set-copy button {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-set-copy svg {
  color: var(--ds-icon-accent-primary);
}

/* «Примеры проверок» — белая панель вместо тёмной с фиолетовым свечением */
html:root .ss-page .ss-proof-card {
  background: var(--ds-bg-layout-default) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page .ss-proof-card :is(.ss-proof-gate, ol, li) {
  border-color: var(--ds-border-default-tetriary) !important;
}
html:root .ss-page .ss-proof-gate > span {
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page :is(.ss-proof-gate, .ss-proof-card ol li, .ss-proof-evidence) small {
  font-size: 12px !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .ss-page .ss-proof-card ol li > span {
  font-size: 12px !important;
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-proof-card ol li p {
  color: var(--ds-text-default-primary) !important;
}
html:root .ss-page .ss-proof-evidence {
  background: var(--ds-malachite-100) !important;
}

/* Поля ввода и выбора — прямые углы, высота L 48 */
html:root .ss-page :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  border-radius: 0 !important;
  border-color: var(--ds-border-default-secondary) !important;
}
html:root .ss-page .ss-kt-prepares {
  border-radius: 0 !important;
}

/* Каталог сервисов: чипы групп (v-chips M 36, accent у выбранного) и вкладки карточки */
html:root .ss-page .ss-archive-groups button {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-bg-secondary-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  transition: background-color var(--sbc-ease), color var(--sbc-ease);
}
html:root .ss-page .ss-archive-groups button:hover {
  background: var(--ds-bg-secondary-hover) !important;
}
html:root .ss-page .ss-archive-groups button[aria-pressed="true"] {
  background: var(--sbc-accent-fill) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page .ss-archive-groups button[aria-pressed="true"] small {
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page :is(.ss-archive-grid, .ss-archive-card, .ss-archive-card figure, .ss-archive-card figcaption) {
  border-radius: 0 !important;
}
html:root .ss-page .ss-archive-detail-nav button {
  border-radius: 0 !important;
}
html:root .ss-page .ss-archive-detail-nav button[aria-pressed="true"] {
  background: var(--sbc-accent-fill) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page .ss-archive-connection {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-boundary-note {
  border-color: var(--ds-border-default-tetriary) !important;
  background: var(--ds-bg-layout-default) !important;
}

/* Текст не мельче 12 px (Label L5 / Sub title ST2) */
html:root .ss-page :is(
  .ss-archive-card figcaption, .ss-archive-number, .ss-archive-audience, .ss-service-level-note,
  .ss-human-scenario small, .ss-human-scenario li > span
) {
  font-size: 12px !important;
}
html:root .ss-page #control-points :is(.ss-kt-selector button > span, .ss-kt-selector button > strong, .ss-phase-selector button > span, .ss-phase-selector button > small) {
  font-size: 12px !important;
}
html:root .ss-page :is(
  .ss-kt-panel-head small, .ss-kt-media figcaption span, .ss-kt-prepares small, .ss-kt-panel article small,
  .ss-kt-transition span, .ss-archive-groups button small, .ss-archive-context span, .ss-passport-layers small
) {
  font-size: 12px !important;
}
html:root .ss-page .ss-archive-groups button span {
  font-size: 14px !important;
}

/* Тонировка фото — графит Future вместо фиолетового; файлы фото те же */
html:root .ss-page .ss-hero-shade {
  background: linear-gradient(90deg, rgb(21 27 30 / 0.92), rgb(21 27 30 / 0.72) 42%, rgb(21 27 30 / 0.12) 75%), linear-gradient(180deg, rgb(20 25 29 / 0.08) 48%, rgb(20 25 29 / 0.72)) !important;
}
html:root .ss-page .ss-passport {
  background: linear-gradient(100deg, rgb(21 27 30 / 0.96), rgb(32 40 44 / 0.88)), url(/service-support/service-support-system-bms-1600-v1.webp) center / cover !important;
}

/* Паспорт — на фото: стеклянные плитки без скругления, белые значки */
html:root .ss-page .ss-passport-layers svg {
  color: var(--ds-icon-white-primary) !important;
}
html:root .ss-page .ss-passport-layout > div:first-child > p:last-child {
  color: var(--ds-text-white-secondary) !important;
}

/* Последний экран — акцентная плашка во всю ширину */
html:root .ss-page .ss-final {
  background: var(--sbc-accent-fill) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page .ss-final p:not(.ss-kicker),
html:root .ss-page .ss-final .ss-kicker {
  color: var(--ds-text-white-primary) !important;
}

/* Крупные декоративные номера и сноски — контраст не ниже нормы WCAG */
html:root .ss-page .ss-method-index {
  color: var(--ds-granite-500) !important;
}
html:root .ss-page .ss-service-level-note {
  color: var(--ds-text-default-secondary) !important;
}
html:root .ss-page .ss-final :is(a.ss-button, button.ss-button, .ss-button).ss-button-primary {
  background: var(--ds-bg-secondary-inverse-enabled) !important;
  color: var(--ds-text-default-primary) !important;
  box-shadow: none !important;
}
html:root .ss-page .ss-final :is(a.ss-button, button.ss-button, .ss-button).ss-button-primary:hover {
  background: var(--ds-bg-secondary-inverse-hover) !important;
}
html:root .ss-page .ss-final :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary {
  background: var(--ds-bg-alpha-dark-enabled) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .ss-page .ss-final :is(a.ss-button, button.ss-button, .ss-button).ss-button-secondary:hover {
  background: var(--ds-bg-alpha-dark-hover) !important;
}

/* Подвал — светлый */
html:root .ss-page .ss-footer {
  border-top: 1px solid var(--ds-border-default-secondary);
  background: var(--ds-bg-layout-inverse) !important;
  color: var(--ds-text-default-secondary) !important;
}
html:root .ss-page .ss-footer :is(button, a) {
  font-size: 14px !important;
  color: var(--ds-text-default-secondary) !important;
  transition: color var(--sbc-ease);
}
html:root .ss-page .ss-footer :is(button, a):hover {
  color: var(--sbc-accent-text) !important;
}
html:root .ss-page .ss-footer small {
  font-size: 12px !important;
  color: var(--ds-text-default-secondary) !important;
}

/* ------------------------------------------------------------------ */
/* Узкие экраны: ширины библиотеки 768 и 375                           */
/* ------------------------------------------------------------------ */

/* Телефон: вкладки не помещаются в ширину — горизонтальная прокрутка с привязкой, Label L4 [M] */
@media (max-width: 767.98px) {
  html:root .smart-dom-home .b10-building__products {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html:root .smart-dom-home .b10-building__products::-webkit-scrollbar {
    display: none;
  }
  html:root .smart-dom-home .b10-building__products > button {
    padding: 0 20px !important;
    scroll-snap-align: start;
  }
  html:root .smart-dom-home .b10-building__products > button strong,
  html:root .smart-dom-home .b10-building__products > button:nth-child(2) strong::before {
    font-size: 14px !important;
  }
  html:root .smart-dom-home .b10-building__products > button:nth-child(2) strong {
    font-size: 0 !important;
  }
  html:root .smart-dom-home .smart-dom-os-flow > li {
    padding: 24px !important;
  }
}

/* «Решения для вашего здания» на невысоких экранах (ноутбук 1366 × 768): сетка 2 × 2 должна уместиться
   в экран секции, иначе постраничное листание сборки пропускает низ нижнего ряда карточек */
@media (min-width: 1200px) and (max-height: 860px) {
  html:root .smart-dom-home .home-gateway-section {
    padding-block: 16px !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading {
    margin-bottom: 20px !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading h2 {
    font-size: var(--sbc-title) !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading p:not(.home-kicker) {
    font-size: 14px;
  }
  html:root .smart-dom-home .product-gateway__heading {
    margin-top: 20px !important;
  }
  html:root .smart-dom-home .product-gateway__card h3 {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    font-size: 20px !important;
  }
  html:root .smart-dom-home .product-gateway__card > p {
    margin-bottom: 12px !important;
  }
  html:root .smart-dom-home .product-gateway__actions {
    margin-bottom: 20px !important;
  }
}

/* Экраны ниже 760 px (ноутбук 1280 × 720): кнопки карточек — v-button S 32, отступы меньше; текст не убираем */
@media (min-width: 1200px) and (max-height: 760px) {
  html:root .smart-dom-home .home-gateway-section {
    padding-block: 8px !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading {
    margin-bottom: 16px !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading h2 {
    font-size: 32px !important;
  }
  html:root .smart-dom-home .product-gateway__heading {
    margin-top: 16px !important;
  }
  html:root .smart-dom-home .product-gateway__card h3 {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  html:root .smart-dom-home .product-gateway__card > p {
    margin-bottom: 10px !important;
  }
  html:root .smart-dom-home .product-gateway__actions {
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  html:root .smart-dom-home .product-gateway__actions > a {
    min-height: 32px !important;
    height: 32px;
    padding: 0 12px !important;
  }
}

/* «Решения для вашего здания» на узких экранах: до 1200 px — одна колонка, иллюстрация сбоку;
   до 600 px — иллюстрация над текстом */
@media (max-width: 1199.98px) {
  html:root .smart-dom-home .product-gateway {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root .smart-dom-home .home-gateway-section .home-section-heading {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 599.98px) {
  html:root .smart-dom-home .product-gateway__card,
  html:root .smart-dom-home .product-gateway__card:first-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }
  html:root .smart-dom-home .product-gateway__card::before {
    grid-row: 1;
    min-height: 240px;
    background-position: center 78%;
  }
  html:root .smart-dom-home .product-gateway__card > * {
    grid-column: 1;
    margin-inline: 24px !important;
  }
  html:root .smart-dom-home .product-gateway__heading {
    margin-top: 24px !important;
  }
  html:root .smart-dom-home .product-gateway__actions {
    margin-bottom: 24px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Отступы у заголовков и набор текста (2026-10-27, по просьбе Дины)    */
/* ------------------------------------------------------------------ */
/* Подпись над заголовком ближе к нему, чем текст под заголовком: у заголовков разделов (Title / T4)
   подпись → заголовок 12 px, заголовок → текст 24 px; у заголовков карточек — 8 и 16 px.
   В сборке эти отступы заданы в каждом блоке по-своему (поля, сетки с gap), поэтому правила — по блокам. */
html:root :is(.smart-dom-home, .product-marketing, .ss-page) {
  --sbc-kicker-gap: 12px;
  --sbc-text-gap: 24px;
  --sbc-card-kicker-gap: 8px;
  --sbc-card-text-gap: 16px;
}

/* Главная: первый экран истории, заголовки разделов, «Проверяем сервисы до сдачи», паспорт, финал */
html:root .smart-dom-home .vfp-chapter > span:has(+ h1) {
  margin-bottom: 0 !important;
}
html:root .smart-dom-home .vfp-chapter > span + h1 {
  margin-top: var(--sbc-kicker-gap) !important;
  margin-bottom: var(--sbc-text-gap) !important;
}
html:root .smart-dom-home :is(.home-section-heading, .home-service-proof__copy, .home-passport-scene__copy, .home-final__panel) .home-kicker {
  margin-bottom: var(--sbc-kicker-gap) !important;
}
html:root .smart-dom-home :is(.home-service-proof__copy, .home-passport-scene__copy) > .home-kicker + h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html:root .smart-dom-home :is(.home-service-proof__copy, .home-passport-scene__copy) > h2 + p {
  margin-top: var(--sbc-text-gap) !important;
}
/* Пути «Смарт Платформа / Смарт Диспетчер» — заголовок T4 */
html:root .smart-dom-home .product-path-card__copy > span:has(+ h3) {
  margin-bottom: var(--sbc-kicker-gap) !important;
}
html:root .smart-dom-home .product-path-card__copy > span + h3 {
  margin-top: 0 !important;
  margin-bottom: var(--sbc-text-gap) !important;
}
/* Карточки «Решения для вашего здания» */
html:root .smart-dom-home .product-gateway__card > .product-gateway__heading + h3 {
  margin-top: var(--sbc-card-kicker-gap) !important;
  margin-bottom: 0 !important;
}
html:root .smart-dom-home .product-gateway__card > h3 + p {
  margin-top: var(--sbc-card-text-gap) !important;
}
/* Карточки «Смарт Гейт / Смарт Платформа / Смарт Диспетчер» (главная и /service-support) */
html:root :is(.smart-dom-home, .ss-page) .smart-dom-os-flow > li > span:has(+ h3) {
  margin-bottom: var(--sbc-card-kicker-gap) !important;
}
html:root :is(.smart-dom-home, .ss-page) .smart-dom-os-flow > li > span + h3 {
  margin-top: 0 !important;
  margin-bottom: var(--sbc-card-text-gap) !important;
}

/* /service-support */
html:root .ss-page .ss-hero .ss-shell > .ss-kicker + h1,
html:root .ss-page :is(.ss-section-heading, .ss-section > .ss-shell > div, .ss-final .ss-shell) > .ss-kicker + h2 {
  margin-top: var(--sbc-kicker-gap) !important;
  margin-bottom: 0 !important;
}
html:root .ss-page .ss-hero .ss-shell > h1 + .ss-hero-lead,
html:root .ss-page .ss-section:not(.ss-control-points, .ss-archive) .ss-section-heading > h2 + p,
html:root .ss-page .ss-section > .ss-shell > div:not([class]) > h2 + p {
  margin-top: var(--sbc-text-gap) !important;
}
/* «Контрольные точки» и «Каталог сервисов» от 900 px — текст справа от заголовка, отступ сверху не нужен */
@media (max-width: 767.98px) {
  html:root .ss-page :is(.ss-control-points, .ss-archive) .ss-section-heading > h2 + p {
    margin-top: var(--sbc-text-gap) !important;
  }
}
/* …а подпись там идёт над заголовком через gap сетки 10 px — поле меньше на величину gap
   (класс повторён, чтобы правило было весомее общего правила подписей /service-support выше) */
@media (min-width: 900px) {
  html:root .ss-page :is(.ss-control-points, .ss-archive) .ss-section-heading.ss-section-heading > .ss-kicker + h2 {
    margin-top: calc(var(--sbc-kicker-gap) - 10px) !important;
  }
}
html:root .ss-page .smart-dom-stage-list li > div > small:has(+ h3) {
  margin-bottom: var(--sbc-card-kicker-gap) !important;
}
html:root .ss-page :is(.ss-scope-grid > article, .ss-set-copy, .ss-live-calculator__intro) > .ss-kicker + h3,
html:root .ss-page .ss-archive-card-copy > .ss-archive-number + h3 {
  margin-top: var(--sbc-card-kicker-gap) !important;
  margin-bottom: 0 !important;
}
html:root .ss-page :is(.ss-scope-grid > article, .ss-set-copy, .ss-live-calculator__intro, .ss-archive-card-copy) > h3 + :is(p, ul) {
  margin-top: var(--sbc-card-text-gap) !important;
}

/* /service-support/demo — сетка с gap 8 px: отступы меньше на величину gap */
html:root .product-marketing .support-demo-status > .product-marketing__eyebrow + h1 {
  margin-top: calc(var(--sbc-kicker-gap) - 8px) !important;
  margin-bottom: 0 !important;
}
html:root .product-marketing .support-demo-status > h1 + .product-marketing__lead {
  margin-top: calc(var(--sbc-text-gap) - 8px) !important;
}

/* Страницы продуктов */
html:root .product-marketing :is(.product-hero__copy, .product-section-heading, .platform-device__copy, .dispatcher-evidence__copy, .mascot-scene__copy, .product-final > div) > .product-kicker + :is(h1, h2) {
  margin-top: var(--sbc-kicker-gap) !important;
  margin-bottom: 0 !important;
}
html:root .product-marketing :is(.product-hero__copy, .product-section-heading, .platform-device__copy, .dispatcher-evidence__copy, .mascot-scene__copy) > :is(h1, h2) + p {
  margin-top: var(--sbc-text-gap) !important;
}
/* «Доступные данные» / «Работа инженера»: на широком экране подпись, заголовок и текст стоят в ряд,
   на узком — друг под другом через gap сетки; gap снят, отступы заданы полями (в ряд они не видны) */
html:root .product-marketing .product-boundary {
  row-gap: 0 !important;
}
html:root .product-marketing .product-boundary > .product-kicker {
  margin-bottom: var(--sbc-kicker-gap) !important;
}
html:root .product-marketing .product-boundary > h2 {
  margin-bottom: var(--sbc-text-gap) !important;
}
/* Шаги 01 / 02 / 03 на страницах продуктов */
html:root .product-marketing :is(.platform-path__steps > li > div, .dispatcher-loop__steps > li) > span + h3 {
  margin-top: var(--sbc-card-kicker-gap) !important;
  margin-bottom: 0 !important;
}
html:root .product-marketing :is(.platform-path__steps > li > div, .dispatcher-loop__steps > li) > h3 + p {
  margin-top: var(--sbc-card-text-gap) !important;
}

/* Набор: на телефоне подпись переносится на вторую строку — интерлиньяж 130 % вместо 108 % (ST 1),
   чтобы строки не слипались; последняя строка абзаца не остаётся из одного короткого слова
   (Chrome 117+, остальные браузеры переносят как раньше). Висячие предлоги убирает sbercity-typograph.js. */
@media (max-width: 767.98px) {
  html:root :is(.smart-dom-home, .product-marketing, .ss-page) :is(.home-kicker, .product-kicker, .ss-kicker, .product-marketing__eyebrow) {
    line-height: 1.3 !important;
  }
}
html:root :is(.smart-dom-home, .product-marketing, .ss-page) :is(p, li, dd, figcaption) {
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Страница Смарт Платформы: снимки целиком и не на тексте (2026-10-27) */
/* ------------------------------------------------------------------ */
/* Снимки платформы пересняты 2026-10-27 с /platform этой же сборки в окне 1440 × 900
   (evidence/tools/platform_captures.js). Сборка показывала прежние снимки 1440 × 1100 в рамках
   другой формы с обрезкой (object-fit: cover), и строки списка тревог резались посередине;
   теперь рамка той же формы, что снимок, — он виден целиком. Снимок карточки фанкойла (platform-device-1440.jpg)
   сборка показывает и на странице Искры, в разделе «Можно проверить, на чём основана рекомендация». В режиме
   листания сборка ограничивает высоту снимка (max-height ≈ 369 px) — снято, разделы по-прежнему помещаются в экран. */
html:root .product-marketing :is(.product-hero--platform, .platform-path, .platform-device, .dispatcher-evidence) .product-capture img {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1440 / 900 !important;
  object-fit: cover !important;
  object-position: 0 0 !important;
}
/* Обёртка снимка в режиме листания ограничена по высоте (380–420 px на планшете) и срезала низ снимка; у снимков
   первого экрана и блоков «Данные нужного устройства» / «Можно проверить…» ограничение снято. У «Из списка событий…»
   оно остаётся: там высота рамки держит раздел в пределах экрана */
html:root .product-marketing :is(.product-hero--platform, .platform-device, .dispatcher-evidence) .product-capture__image {
  height: auto !important;
  max-height: none !important;
}
/* Режим листания: между текстом и снимком — 56 px вместо 21,6 px; блоки выровнены по центру ряда */
html:root.page-paging .product-marketing :is(.product-hero--platform, .platform-path, .platform-device) {
  column-gap: 56px !important;
  align-items: center !important;
}
/* Режим листания, 1000–1199 px: первый экран страниц продуктов — в две колонки, как на широких экранах.
   В сборке здесь одна колонка, и снимку остаётся ряд 195–260 px: картинка выходила из него на строку
   «01 Отклонение · 02 …» и на следующий раздел (так было и в исходной сборке, на обеих страницах продуктов) */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  html:root.page-paging .product-marketing .product-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    column-gap: 40px !important;
    align-items: center !important;
  }
  html:root.page-paging .product-marketing .product-hero > .product-route {
    grid-column: 1 / -1 !important;
  }
}

/* ------------------------------------------------------------------ */
/* «Данные нужного устройства — рядом» и «Можно проверить, на чём       */
/* основана подсказка» (2026-10-27, по замечанию Дины)                  */
/* ------------------------------------------------------------------ */
/* Тема сделала эти разделы белыми панелями, но в сборке у них нет боковых полей (раньше фон был во всю ширину):
   текст, линии списка и снимок упирались в края панели. Поля — как у соседних белых панелей:
   в обычной раскладке 7 % ширины окна (как «Из списка событий…»), на телефоне панель во всю ширину с полями 16 px,
   в режиме листания по разделам — меньше, потому что раздел должен поместиться в экран по высоте. */
html:root .product-marketing :is(.platform-device, .dispatcher-evidence) {
  padding-inline: clamp(16px, 7vw, 112px) !important;
}
@media (max-width: 767.98px) {
  html:root:not(.page-paging) .product-marketing :is(.platform-device, .dispatcher-evidence) {
    margin-inline: -16px !important;
    padding-inline: 16px !important;
  }
}
html:root.page-paging .product-marketing :is(.platform-device, .dispatcher-evidence) {
  padding-inline: clamp(24px, 3.5vw, 56px) !important;
  column-gap: 56px !important;
  align-items: center !important;
}
/* Текст одной мерой: подпись, заголовок, абзац и список — не шире 640 px (раньше абзац 672 px, а список во всю
   ширину раздела, когда колонка одна); верх подписи — вровень с верхом снимка */
html:root .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) {
  max-width: 640px !important;
}
html:root .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) > :is(p, h2) {
  max-width: none !important;
}
html:root .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) > .product-kicker:first-child {
  margin-top: 0 !important;
}
/* Колонки. В обычной раскладке (две колонки от 1200 px) снимок чуть шире текста, между ними 72 px вместо 8 % окна.
   В режиме листания (две колонки от 1024 px) шире текст: высота раздела ограничена экраном, и в узкой колонке
   заголовок в 4–5 строк вместе со списком не помещался (при 1024 × 768 и 1280 × 720). */
@media (min-width: 1200px) {
  html:root:not(.page-paging) .product-marketing .platform-device {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    column-gap: 72px !important;
  }
  html:root:not(.page-paging) .product-marketing .dispatcher-evidence {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    column-gap: 72px !important;
  }
}
@media (min-width: 1024px) {
  html:root.page-paging .product-marketing :is(.platform-device, .dispatcher-evidence) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html:root.page-paging .product-marketing :is(.platform-device, .dispatcher-evidence) {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  }
}
/* Невысокий экран в режиме листания — список доводов компактнее */
@media (min-width: 1024px) and (max-height: 799.98px) {
  html:root.page-paging .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) > .product-proof-list {
    margin-top: 24px !important;
  }
  html:root.page-paging .product-marketing :is(.platform-device__copy, .dispatcher-evidence__copy) > .product-proof-list > li {
    padding-block: 12px !important;
  }
}
/* Подпись снимка: метка («ФАНКОЙЛ 2», «КАРТА ОБЪЕКТА») и текст стоят в ряд; когда рамка снимка уже 480 px
   (две колонки на планшете), текст сжимался рядом с меткой в 3 строки — тогда метка над текстом */
html:root .product-marketing .product-capture {
  container-type: inline-size;
}
@container (max-width: 480px) {
  html:root .product-marketing .product-capture figcaption {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 4px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Иллюстрации Дины 2026-10-27 на главной                              */
/* ------------------------------------------------------------------ */
/* «Проверяем сервисы до сдачи здания»: новый кадр крыши (переделка прежнего фото) — фоном блока снимка.
   Прежняя картинка сборки остаётся в разметке прозрачной: её описание (alt) по-прежнему читается программами
   чтения с экрана. Файл сборки service-support-process-*.webp не меняется — он же используется на /service-support. */
html:root .smart-dom-home .home-service-proof__media {
  background: var(--ds-granite-900) url("./sbercity-cards/service-proof-roof.webp") center 45% / cover no-repeat !important;
}
html:root .smart-dom-home .home-service-proof__media picture {
  opacity: 0 !important;
}
/* «От сигнала датчика — к решению»: в карточках «Смарт Гейт / Смарт Платформа / Смарт Диспетчер» — иллюстрация
   сверху во всю ширину карточки, текст ниже на белом (как у карточек «Решений»). Высота — от высоты окна, чтобы
   раздел в режиме листания помещался в экран. Иллюстрации широкие (16:9, предмет в центре кадра) — Дина прислала
   их вместо квадратных в тот же день. */
html:root .smart-dom-home .smart-dom-os-flow > li::before {
  content: "";
  display: block;
  height: clamp(200px, 34vh, 340px);
  margin: -32px -32px 24px;
  background: var(--ds-granite-900) center / cover no-repeat;
}
html:root .smart-dom-home .smart-dom-os-flow > li:nth-child(1)::before {
  background-image: url("./sbercity-cards/os-smart-gate-wide.webp");
}
html:root .smart-dom-home .smart-dom-os-flow > li:nth-child(2)::before {
  background-image: url("./sbercity-cards/os-smart-platform-wide.webp");
}
html:root .smart-dom-home .smart-dom-os-flow > li:nth-child(3)::before {
  background-image: url("./sbercity-cards/os-smart-dispatcher-wide.webp");
}
/* Ряд карточек — последний в блоке: нижний отступ сборки 56 px только раздувал раздел выше экрана */
html:root .smart-dom-home .home-operations-intro > .smart-dom-os-flow:last-child {
  margin-bottom: 0 !important;
}
/* Невысокий экран (до 800 px): иллюстрации и поля карточек меньше, чтобы раздел помещался в экран */
@media (max-height: 800px) {
  html:root .smart-dom-home .smart-dom-os-flow > li {
    padding: 24px !important;
  }
  html:root .smart-dom-home .smart-dom-os-flow > li::before {
    height: clamp(150px, 29vh, 240px);
    margin: -24px -24px 20px;
  }
}

/* «Выберите сервисы для вашего здания» (финал главной), 2026-10-27: панель была фиксированной высоты 420 px,
   под ней до подвала оставалась пустая полоса. Теперь панель заполняет раздел до подвала; заголовок — сверху,
   текст и кнопки — снизу; текст занимает левую половину, правая — под фоновую иллюстрацию */
html:root .smart-dom-home .home-final {
  display: flex !important;
  flex-direction: column !important;
}
html:root .smart-dom-home .home-final > .home-final__panel {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 420px !important;
  align-content: space-between !important;
}
@media (min-width: 1024px) {
  html:root .smart-dom-home .home-final__panel > * {
    max-width: min(600px, 50%) !important;
  }
}
/* Фон панели — иллюстрация Дины «калькулятор» (16:9, предмет справа). Прижата к правому краю и обрезается по панели:
   на широких панелях — сверху и снизу (кадр смещён вниз, чтобы калькулятор не срезался), на узких — слева, где только фон.
   Уже 1024 px текст идёт на всю ширину панели — поверх картинки затемнение, чтобы белый текст читался */
html:root .smart-dom-home .home-final > .home-final__panel {
  background: var(--ds-granite-900) url("./sbercity-cards/home-final-calculator.webp") right 70% / cover no-repeat !important;
}
@media (max-width: 1023.98px) {
  html:root .smart-dom-home .home-final > .home-final__panel {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--ds-granite-900) 88%, transparent) 0%, color-mix(in srgb, var(--ds-granite-900) 62%, transparent) 100%),
      var(--ds-granite-900) url("./sbercity-cards/home-final-calculator.webp") 78% 70% / cover no-repeat !important;
  }
}

/* ------------------------------------------------------------------ */
/* «Проблема видна сразу» и «Понятно, что проверить первым» (главная)  */
/* — по макетам Дины в Figma, 2026-10-27 (файл MxbHGkI4CELIMXaxmdtmYf,  */
/* узлы 88:4624 и 11:195)                                              */
/* ------------------------------------------------------------------ */
/* Вместо снимков экрана сборки (platform-1440.webp, assistant-1440.webp; они остаются в разметке прозрачными,
   их alt читается) — иллюстрации из макета: карта квартала с уведомлением об аварии и панель «Смарт Диспетчер
   рекомендует». Карточка целиком белая, без зазора между текстом и иллюстрацией. Заголовки — T4, как во всех
   разделах (в макете T3), отступы подпись → заголовок → текст — 12 и 24 px, как во всех разделах. */
html:root .smart-dom-home .product-path-card:is(.product-path-card--platform, .product-path-card--iskra) {
  gap: 0 !important;
  background: var(--ds-bg-layout-default) !important;
}
html:root .smart-dom-home :is(.product-path-card--platform, .product-path-card--iskra) > picture {
  position: relative !important;
  overflow: hidden !important;
}
html:root .smart-dom-home :is(.product-path-card--platform, .product-path-card--iskra) > picture > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}
html:root .smart-dom-home :is(.product-path-card--platform, .product-path-card--iskra) .product-path-card__copy > * {
  max-width: 505px !important;
}
/* «Проблема видна сразу»: справа карта квартала (кусок снимка Смарт Платформы), поверх — уведомление */
html:root .smart-dom-home .product-path-card--platform > picture {
  background: var(--ds-granite-100) url("./sbercity-cards/path-platform-map.webp") 95% 50% / cover no-repeat !important;
}
html:root .smart-dom-home .product-path-card--platform > picture::after {
  content: "";
  position: absolute;
  left: 5.3%;
  top: 39.7%;
  width: 89.4%;
  aspect-ratio: 622.449 / 125;
  background: url("./sbercity-cards/path-platform-notice.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
html:root .smart-dom-home .product-path-card--platform .product-path-card__links {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
/* «Понятно, что проверить первым»: слева панель «Смарт Диспетчер рекомендует», справа текст */
html:root .smart-dom-home .product-path-card--iskra > picture {
  box-sizing: border-box !important;
  background: var(--ds-bg-layout-default) url("./sbercity-cards/path-dispatcher-panel.webp?v=a6c683898c17") left center / contain no-repeat !important;
  background-origin: content-box !important;
}
html:root .smart-dom-home .product-path-card--iskra .product-path-card__links {
  gap: 20px !important;
}
@media (min-width: 1024px) {
  html:root .smart-dom-home .product-path-card:is(.product-path-card--platform, .product-path-card--iskra) {
    grid-template-columns: minmax(0, 680fr) minmax(0, 696fr) !important;
  }
  html:root .smart-dom-home .product-path-card--iskra > picture {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 40px 60px 40px 38px !important;
  }
  html:root .smart-dom-home .product-path-card--iskra > .product-path-card__copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}
/* Уже 1024 px — одна колонка: текст, под ним иллюстрация (панель Диспетчера сборка на узких экранах скрывала) */
@media (max-width: 1023.98px) {
  html:root .smart-dom-home .product-path-card--iskra {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root .smart-dom-home .product-path-card--iskra > .product-path-card__copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html:root .smart-dom-home .product-path-card--iskra > picture {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    max-height: 640px;
    padding: 8px 24px 32px !important;
    background-position: center top !important;
  }
}

/* ------------------------------------------------------------------ */
/* Правки по макетам Дины в Figma, 2026-10-28 (файл                    */
/* MxbHGkI4CELIMXaxmdtmYf): вкладки продуктов над моделью (узлы 93:558, */
/* 99:124) и панель Смарт Диспетчера (узел 11:195)                     */
/* ------------------------------------------------------------------ */
/* Вкладки продуктов — как сегменты внутри вьюера: невыбранные — granite/100 с текстом granite/700, выбранная —
   granite/700 с белым текстом; Label / L3 [M] 16 px (от 1200 px). От 1024 px — 8 px сверху и 16 px до модели; в режиме
   листания окно модели на эти 24 px ниже, секция по-прежнему ровно в экран. По ширине полоса и окно модели — по сетке
   главной (раздел «Сетка главной» ниже). Фон раздела вокруг полосы — белый, как в макете (на прежнем сером granite/100
   полоса того же цвета сливалась бы с фоном) */
html:root .smart-dom-home #building-model {
  background: var(--ds-bg-layout-default);
}
html:root .smart-dom-home .b10-building__products,
html:root .smart-dom-home .b10-building__products > button {
  background: var(--ds-granite-100) !important;
}
html:root .smart-dom-home .b10-building__products > button {
  color: var(--ds-granite-700) !important;
}
html:root .smart-dom-home .b10-building__products > button:hover {
  background: var(--ds-granite-200) !important;
  color: var(--ds-text-default-primary) !important;
}
html:root .smart-dom-home .b10-building__products > button[aria-pressed="true"],
html:root .smart-dom-home .b10-building__products:has(> button:nth-child(4)[aria-pressed="true"]) > button:nth-child(2) {
  background: var(--ds-granite-700) !important;
  color: var(--ds-text-white-primary) !important;
}
@media (min-width: 1024px) {
  html:root .smart-dom-home .b10-building__products {
    margin-block: 8px 16px !important;
  }
}
/* 16 px — от 1200 px: уже «Электрозарядный комплекс» в четверти полосы переносится на две строки, там остаётся 14 px */
@media (min-width: 1200px) {
  html:root .smart-dom-home .b10-building__products > button strong,
  html:root .smart-dom-home .b10-building__products > button:nth-child(2) strong::before {
    font-size: 16px !important;
  }
}

/* «Понятно, что проверить первым»: панель «Смарт Диспетчер рекомендует» по правке макета 2026-10-28 — шире
   (622 × 727 вместо прежней), без значка ⓘ у «Достоверности рекомендации», тень мягче. Картинка с тенью —
   645,5 × 750 px (path-dispatcher-panel.webp, tools/encode_panel_1028.js); поле тени слева 12 px, поэтому поле
   колонки слева 26 px: край панели — в 38 px от края карточки, как в макете; справа 8,5 px — при 1440 px картинка
   в натуральную величину, между панелью и текстом 58 px (в макете 59). Имя файла прежнее, поэтому в адресе картинки
   в правиле выше — метка ?v= (начало SHA-256): сервер кеширует /assets/ на год, без неё браузер показал бы прежнюю
   панель */
@media (min-width: 1024px) {
  html:root .smart-dom-home .product-path-card--iskra > picture {
    padding: 40px 8.5px 40px 26px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Сетка главной — как на /service-support (по просьбе Дины            */
/* 2026-10-28: «сделай у всех блоков такую же сетку»). Ширина           */
/* содержимого — та же формула, что --ss-shell страницы сопровождения:  */
/* до 1320 px (поля не меньше 32 px); от 1800 px — до 1500 px (поля не  */
/* меньше 60 px); до 1100 px — до 980 px; до 820 px — поля 16 px; до    */
/* 560 px — 12 px. По этой ширине — все блоки, шапка, логотип, текст и  */
/* кнопки первого экрана, вкладки и окно модели. Фоны — видео первого   */
/* экрана, фото «Что проверили…», белая полоса раздела модели — во всю  */
/* ширину, как фоны разделов на странице сопровождения                  */
/* ------------------------------------------------------------------ */
html:root {
  --sbc-page-width: min(1320px, calc(100vw - 64px));
}
@media (min-width: 1800px) {
  html:root {
    --sbc-page-width: min(1500px, calc(100vw - 120px));
  }
}
@media (max-width: 1100px) {
  html:root {
    --sbc-page-width: min(100% - 40px, 980px);
  }
}
@media (max-width: 820px) {
  html:root {
    --sbc-page-width: calc(100% - 32px);
  }
}
@media (max-width: 560px) {
  html:root {
    --sbc-page-width: calc(100% - 24px);
  }
}
/* Шапка: логотип и меню — по краям сетки (поле = половина разницы между шириной окна и сетки) */
html:root .smart-dom-home .home-header {
  padding-inline: calc((100% - var(--sbc-page-width)) / 2) !important;
}
/* Первый экран: логотип и «К содержанию», заголовок с текстом, номера глав и «Видео» — по краям сетки */
html:root .smart-dom-home .vfp-story :is(.vfp-header, .vfp-footer) {
  left: calc((100% - var(--sbc-page-width)) / 2) !important;
  right: calc((100% - var(--sbc-page-width)) / 2) !important;
  width: auto !important;
}
html:root .smart-dom-home .vfp-story .vfp-chapter {
  left: calc((100% - var(--sbc-page-width)) / 2) !important;
}
/* Блок модели: полоса вкладок, полоса «Закрыть показ» на телефоне и окно модели — шириной сетки (раньше окно — во всю
   ширину экрана, полоса — с полями 28 px) */
html:root .smart-dom-home #building-model > :is(.b10-building__products, .b10-building__bar, .b10-building__viewer) {
  box-sizing: border-box;
  width: var(--sbc-page-width) !important;
  margin-inline: auto !important;
}

/* Убраны по просьбе Дины (2026-10-28): «Открыть цифровой паспорт» в «Что проверили и что осталось исправить» и «Выбрать
   решение» в «Выберите сервисы для вашего здания». Разметка сборки не меняется — кнопки скрыты (display: none: их нет ни
   на экране, ни в порядке Tab, ни для программ чтения с экрана). Страница /passport и ссылка «Цифровой паспорт» в шапке
   остаются */
html:root .smart-dom-home #handover .home-passport-scene__copy > a[href="/passport"],
html:root .smart-dom-home #contact .home-final__actions > a[href="#approach"] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Единое верхнее меню пяти страниц (по просьбе Дины 2026-10-28):      */
/* «Сервисы здания», «Смарт Платформа», «Смарт Диспетчер» и            */
/* градиентная «Рассчитать ↗» (form.smartdomcity.ru, новая вкладка).    */
/* Меню и кнопку добавляет sbercity-site-nav.js; пункты сборки в такой  */
/* шапке скрыты — остаётся логотип. Ссылки — как прежние ссылки шапки   */
/* главной (14 px Medium), текущая страница — с чертой malachite снизу, */
/* как было на страницах продуктов; кнопка — v-button M 40 с градиентом */
/* ------------------------------------------------------------------ */
html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav) {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 8px !important;
}
html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav) > :not(:first-child):not(.sbc-site-nav):not(.sbc-site-cta):not(.sbc-site-nav__back) {
  display: none !important;
}
/* !important у раскладки и цвета: CSS страниц продуктов задаёт любому nav в своей шапке выравнивание по центру, отступы,
   серый цвет ссылок и прячет его на телефоне */
html:root .sbc-site-nav {
  order: 2;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 0;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}
html:root .sbc-site-nav .sbc-site-nav__link {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  font-family: var(--sbc-font);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
  color: var(--ds-text-default-primary) !important;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--sbc-ease), box-shadow var(--sbc-ease);
}
html:root .sbc-site-nav .sbc-site-nav__link:hover {
  color: var(--sbc-accent-text) !important;
}
html:root .sbc-site-nav .sbc-site-nav__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--ds-malachite-800);
}
html:root .sbc-site-cta {
  order: 3;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-left: 12px;
  padding: 0 16px;
  background: var(--sbc-gradient-light);
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0);
  font-family: var(--sbc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ds-text-white-primary);
  text-decoration: none;
  transition: box-shadow var(--sbc-ease);
}
html:root .sbc-site-cta:hover {
  color: var(--ds-text-white-primary);
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / 0.2);
}
html:root .sbc-site-cta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* подсказка для программ чтения с экрана: ссылка открывается в новой вкладке */
html:root .sbc-site-cta__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* «← Назад» — первым пунктом меню, когда на страницу пришли с другой страницы сайта (sbercity-site-nav.js);
   как ссылки меню, со стрелкой; от разделов отделён тонкой чертой */
html:root .sbc-site-nav__back[hidden] {
  display: none !important;
}
html:root .sbc-site-nav__back:not([hidden]) {
  order: 2;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 6px 0 auto !important;
  padding: 0 16px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset -1px 0 0 var(--ds-border-default-tetriary);
  font-family: var(--sbc-font);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ds-text-default-primary) !important;
  cursor: pointer;
  transition: color var(--sbc-ease);
}
html:root .sbc-site-nav__back:hover {
  color: var(--sbc-accent-text) !important;
}
html:root .sbc-site-nav__back svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* при видимой кнопке ссылки встают сразу за ней (отступ слева у меню — у кнопки) */
html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav__back:not([hidden])) > .sbc-site-nav {
  margin-left: 0 !important;
}
/* до 1100 px строка шапки с «← Назад» не помещается: «Назад» — квадратная кнопка 40 × 40 со стрелкой (слово остаётся
   для программ чтения с экрана); до 900 px у ссылок поля меньше. На телефоне кнопка — в первой строке с логотипом
   и «Рассчитать» */
@media (max-width: 1099.98px) {
  html:root .sbc-site-nav__back:not([hidden]) {
    justify-content: center;
    width: 40px;
    min-height: 40px;
    margin: 0 8px 0 auto !important;
    padding: 0 !important;
    box-shadow: inset 0 0 0 1px var(--ds-border-default-tetriary);
  }
  html:root .sbc-site-nav__back:not([hidden]) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 899.98px) {
  html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav__back:not([hidden])) .sbc-site-nav .sbc-site-nav__link {
    padding: 0 6px !important;
  }
}
@media (max-width: 767.98px) {
  html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav__back:not([hidden])) > .sbc-site-cta {
    margin-left: 0;
  }
  html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav__back:not([hidden])) > .sbc-site-nav {
    margin: 4px 0 0 !important;
  }
}
html:root .sbc-site-nav__back:focus-visible,
html:root :is(.sbc-site-nav .sbc-site-nav__link, .sbc-site-cta):focus-visible {
  outline: 2px solid var(--ds-border-accent-primary);
  outline-offset: 2px;
}
/* Телефон (до 768 px): в первой строке — логотип и «Рассчитать», ссылки — второй строкой во всю ширину,
   по краям строки (листаются вбок, если не помещаются); высота шапки — по содержимому */
@media (max-width: 767.98px) {
  html:root :is(.home-header, .ss-header, .product-marketing__header):has(> .sbc-site-nav) {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 0 !important;
    padding-block: 8px 0 !important;
  }
  html:root .sbc-site-cta {
    margin-left: auto;
  }
  html:root .sbc-site-nav {
    order: 4;
    flex: 0 0 100%;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 4px 0 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:root .sbc-site-nav::-webkit-scrollbar {
    display: none;
  }
  html:root .sbc-site-nav .sbc-site-nav__link {
    min-height: 40px !important;
    padding: 0 !important;
  }
}

/* ------------------------------------------------------------------ */
/* Страницы Смарт Платформы и Смарт Диспетчера — по образцу            */
/* /service-support (по просьбе Дины 2026-10-28): та же сетка          */
/* (--sbc-page-width), разделы — полосы во всю ширину с содержимым по  */
/* сетке, фоны чередуются (белый / серый), поля разделов — как у        */
/* .ss-section; первый экран — тёмный, как .ss-hero: белый текст,       */
/* место под титульную иллюстрацию (--sbc-product-hero-art), путь       */
/* «01 … 04» — как показатели первого экрана сопровождения; финал —      */
/* малахитовая полоса во всю ширину. Демо сопровождения не меняется     */
/* ------------------------------------------------------------------ */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* Шапка — белая во всю ширину, логотип и меню по краям сетки; подвал — шириной сетки. Шапка, содержимое и подвал
   демо сопровождения — тоже по сетке, чтобы меню стояло на всех страницах на одном месте */
html:root .product-marketing :is(main, .product-marketing__footer) {
  width: var(--sbc-page-width) !important;
}
html:root .product-marketing .product-marketing__header {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  padding-inline: calc((100% - var(--sbc-page-width)) / 2) !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) .product-marketing__footer {
  width: var(--sbc-page-width) !important;
  margin-inline: auto !important;
}
/* Финал лежит в обёртке .product-final-slide — она во всю ширину, без полей */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-final-slide {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Разделы: во всю ширину, содержимое — по сетке (поле = половина разницы ширины окна и сетки), сверху и снизу —
   как у разделов страницы сопровождения */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main :is(.product-hero, .platform-path, .platform-device, .product-boundary, .product-final, .dispatcher-loop, .dispatcher-evidence, .mascot-scene):is(main > *, .product-final-slide > *) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: calc((100% - var(--sbc-page-width)) / 2) !important;
  padding-block: clamp(88px, 9vw, 150px) !important;
  border: 0 !important;
}
/* Фоны: белый и серый по очереди, как полосы страницы сопровождения */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > :is(.platform-path, .product-boundary--platform, .dispatcher-loop, .mascot-scene) {
  background-color: var(--ds-bg-layout-default) !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > :is(.platform-device, .dispatcher-evidence, .product-boundary--dispatcher) {
  background: var(--ds-bg-layout-inverse) !important;
}
/* Финал — малахитовая полоса, как последний экран сопровождения */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main .product-final-slide > .product-final {
  padding-block: clamp(90px, 11vw, 170px) !important;
}

/* Первый экран — как у сопровождения: тёмный фон во всю ширину высотой в экран, под ним место для титульной иллюстрации
   (переменная --sbc-product-hero-art; пока иллюстраций нет — графит Future), сверху тонировка как у .ss-hero-shade;
   текст белый; снимок экрана продукта остаётся справа в белой рамке */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 70px) !important;
  padding-block: clamp(80px, 10vw, 150px) 42px !important;
  background:
    linear-gradient(90deg, rgb(21 27 30 / 0.92), rgb(21 27 30 / 0.72) 42%, rgb(21 27 30 / 0.12) 75%),
    linear-gradient(180deg, rgb(20 25 29 / 0.08) 48%, rgb(20 25 29 / 0.72)),
    var(--sbc-product-hero-art, none) 60% 50% / cover no-repeat,
    var(--ds-granite-900) !important;
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-hero .product-kicker {
  color: var(--ds-text-white-secondary) !important;
}
html:root .product-marketing .product-hero h1 {
  color: var(--ds-text-white-primary) !important;
}
html:root .product-marketing .product-hero :is(.product-lead, .product-note) {
  color: var(--ds-text-white-secondary) !important;
}
/* Путь «01 Отклонение … 04» — как показатели первого экрана сопровождения: плашки в ряд с белой чертой сверху,
   разделены тонкой линией, номер — Label L5 белым 70 %, название — Label L3 [M] белым */
html:root .product-marketing .product-hero > .product-route {
  gap: 1px !important;
  margin-top: 70px !important;
}
html:root .product-marketing .product-hero > .product-route > li {
  padding: 20px 24px !important;
  border-top: 1px solid rgb(255 255 255 / 0.28) !important;
  border-right: 1px solid rgb(255 255 255 / 0.13) !important;
  background: rgb(21 27 30 / 0.2) !important;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
html:root .product-marketing .product-hero > .product-route > li:last-child {
  border-right: 0 !important;
}
html:root .product-marketing .product-hero > .product-route span {
  color: var(--ds-text-white-secondary) !important;
}
html:root .product-marketing .product-hero > .product-route strong {
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--ds-text-white-primary) !important;
}
/* Первый экран со снимком выше, чем у сопровождения (там только текст), — поле сверху меньше, чтобы путь «01 … 04»
   оставался в пределах экрана */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
  padding-block: clamp(56px, 6vw, 96px) 42px !important;
}
html:root .product-marketing .product-hero > .product-route {
  margin-top: 48px !important;
}
/* Заголовки разделов — по левому краю, как на странице сопровождения (у «От отклонения — к следующей проверке» сборка
   ставила их по центру) */
html:root .product-marketing .dispatcher-loop .product-section-heading,
html:root .product-marketing .dispatcher-loop .product-section-heading > * {
  margin-inline: 0 !important;
  text-align: left !important;
}
/* Поля разделов — как у .ss-section в тех же режимах: в режиме листания раздел высотой в экран, поля 28–48 px (от 900 px)
   и 48 px (уже); на телефоне в обычной раскладке — 74 px */
html:root.page-paging .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main :is(.platform-path, .platform-device, .product-boundary, .product-final, .dispatcher-loop, .dispatcher-evidence, .mascot-scene):is(main > *, .product-final-slide > *) {
  padding-block: clamp(28px, 4vh, 48px) !important;
}
@media (max-width: 899.98px) {
  html:root.page-paging .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main :is(.platform-path, .platform-device, .product-boundary, .product-final, .dispatcher-loop, .dispatcher-evidence, .mascot-scene):is(main > *, .product-final-slide > *) {
    padding-block: 48px !important;
  }
}
@media (max-width: 560px) {
  html:root:not(.page-paging) .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main :is(.platform-path, .platform-device, .product-boundary, .product-final, .dispatcher-loop, .dispatcher-evidence, .mascot-scene):is(main > *, .product-final-slide > *) {
    padding-block: 74px !important;
  }
}
/* «Из списка событий…» в режиме листания: сборка ограничивает высоту рамки снимка (min(48vh, 420px)); раздел стал шире,
   и снимок 1440 × 900 в широкой колонке срезался снизу — ширина снимка ограничена так, чтобы он помещался в рамку целиком */
html:root.page-paging .product-marketing .platform-path .product-capture {
  width: 100%;
  max-width: calc(min(48vh, 420px) * 1.6) !important;
  justify-self: end;
}
/* «Из списка событий…» в режиме листания при 1024–1199 px: в две колонки заголовок в 5 строк, текст, снимок и три шага
   не помещаются в экран (сборка держит высоту раздела ровно в экран и обрезает лишнее) — как сборка делает до 1023 px:
   одна колонка, высота по содержимому (раздел выше экрана, как на планшете) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html:root.page-paging .product-marketing .platform-path.page-paging-slide--screen {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html:root.page-paging .product-marketing .platform-path .product-capture {
    justify-self: start;
  }
  /* в одной колонке — по порядку разметки: заголовок, снимок, шаги (у шагов сборка задаёт второй ряд) */
  html:root.page-paging .product-marketing .platform-path > * {
    grid-row: auto !important;
    grid-column: 1 !important;
  }
  /* «От отклонения — к следующей проверке» (Искра): пять шагов в два ряда не помещаются в экран — высота по содержимому */
  html:root.page-paging .product-marketing .dispatcher-loop.page-paging-slide--screen {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* Режим листания: первый экран высотой ровно в экран — на невысоких экранах поля и отступ над путём «01 … 04» меньше,
   чтобы подпись над заголовком не уходила под шапку */
html:root.page-paging .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
  padding-block: clamp(24px, 5vh, 72px) 24px !important;
}
html:root.page-paging .product-marketing .product-hero > .product-route {
  margin-top: clamp(16px, 3vh, 48px) !important;
}
@media (max-height: 799.98px) {
  html:root.page-paging .product-marketing .product-hero > .product-route > li {
    padding: 12px 20px !important;
  }
}
/* Финал на телефоне: кнопки друг под другом во всю ширину (у Искры вторая кнопка выходила за край экрана) */
@media (max-width: 767.98px) {
  html:root .product-marketing .product-final__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  html:root .product-marketing .product-final__actions > a {
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ------------------------------------------------------------------ */
/* Титульные фоны Дины 2026-10-28 и первые экраны продуктов без        */
/* снимков интерфейса (по просьбе Дины)                                */
/* ------------------------------------------------------------------ */
/* Файлы — sbercity-hero/<страница>-<ширина>.webp: 2560 — широкие экраны, 3840 — широкие экраны с плотностью от 1,5
   (экран Дины — 2560 CSS px при масштабе 150 %), 1920 — до 900 px по ширине окна. Точка привязки на телефоне подобрана
   под сюжет: вход здания, подсвеченный этаж, монитор диспетчера. */
html:root .product-marketing .product-hero--platform {
  --sbc-product-hero-art: url("./sbercity-hero/hero-smart-platform-2560.webp");
}
html:root .product-marketing .product-hero--dispatcher {
  --sbc-product-hero-art: url("./sbercity-hero/hero-iskra-2560.webp");
}
@media (min-width: 1600px) and (min-resolution: 1.5dppx) {
  html:root .product-marketing .product-hero--platform {
    --sbc-product-hero-art: url("./sbercity-hero/hero-smart-platform-3840.webp");
  }
  html:root .product-marketing .product-hero--dispatcher {
    --sbc-product-hero-art: url("./sbercity-hero/hero-iskra-3840.webp");
  }
}
@media (max-width: 900px) {
  html:root .product-marketing .product-hero--platform {
    --sbc-product-hero-art: url("./sbercity-hero/hero-smart-platform-1920.webp");
  }
  html:root .product-marketing .product-hero--dispatcher {
    --sbc-product-hero-art: url("./sbercity-hero/hero-iskra-1920.webp");
  }
}
@media (max-width: 767.98px) {
  html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero.product-hero--platform {
    background-position: 0 0, 0 0, 70% 50%, 0 0 !important;
  }
  html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero.product-hero--dispatcher {
    background-position: 0 0, 0 0, 88% 50%, 0 0 !important;
  }
}

/* /service-support: новый фон первого экрана — фоном рамки фото. Фото сборки (service-support-hero-*-v4.webp) остаётся
   в разметке прозрачным: файл под прежним именем браузеры держат в кеше год, а его описание читают программы чтения
   с экрана. Тонировка .ss-hero-shade — прежняя */
html:root .ss-page .ss-hero .ss-hero-picture {
  background: var(--ds-granite-900) url("./sbercity-hero/hero-service-support-2560.webp") 58% 50% / cover no-repeat;
}
html:root .ss-page .ss-hero .ss-hero-picture img {
  opacity: 0 !important;
}
@media (min-width: 1600px) and (min-resolution: 1.5dppx) {
  html:root .ss-page .ss-hero .ss-hero-picture {
    background-image: url("./sbercity-hero/hero-service-support-3840.webp");
  }
}
@media (max-width: 900px) {
  html:root .ss-page .ss-hero .ss-hero-picture {
    background-image: url("./sbercity-hero/hero-service-support-1920.webp");
  }
}
@media (max-width: 560px) {
  html:root .ss-page .ss-hero .ss-hero-picture {
    background-position: 64% 50%;
  }
}

/* Первый экран продуктов — как у /service-support: без снимка интерфейса справа (снимок скрыт; файлы сборки не
   удалены), одна колонка; текст по центру высоты, путь «01 … 04» — внизу. Мера текста — как у сопровождения:
   заголовок в две строки, абзац до 780 px, кнопки на 34 px ниже абзаца */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-capture {
  display: none !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: stretch !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-hero__copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: none !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-route {
  grid-row: 2 !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-hero__copy > h1 {
  max-width: var(--sbc-hero-title-width, 780px) !important;
  text-wrap: balance;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-hero__copy > .product-lead {
  max-width: 780px !important;
}
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero > .product-hero__copy > .product-actions {
  margin-top: 34px !important;
}
/* Тонировка под текстом. На узких экранах абзац занимает почти всю ширину и заходит на светлую часть картинки
   (здание, окно): тонировка как у сопровождения давала абзацу 2,6–3,5 : 1 вместо 4,5 : 1 (замер по пикселям,
   2026-10-28). До 1440 px тонировка плотнее справа (при 1280 × 720 итоговая проверка показала 4,04 : 1 — граница
   была 1280 px), на телефоне — почти ровная */
@media (max-width: 1439.98px) {
  html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
    background-image:
      linear-gradient(90deg, rgb(21 27 30 / 0.92), rgb(21 27 30 / 0.84) 50%, rgb(21 27 30 / 0.5) 88%),
      linear-gradient(180deg, rgb(20 25 29 / 0.08) 48%, rgb(20 25 29 / 0.72)),
      var(--sbc-product-hero-art, none) !important;
  }
}
@media (max-width: 767.98px) {
  html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero {
    background-image:
      linear-gradient(90deg, rgb(21 27 30 / 0.9), rgb(21 27 30 / 0.8)),
      linear-gradient(180deg, rgb(20 25 29 / 0.08) 48%, rgb(20 25 29 / 0.72)),
      var(--sbc-product-hero-art, none) !important;
  }
}

/* /service-support, первый экран (по просьбе Дины 2026-10-28): три показателя «Требования к сервисам · 10 контрольных
   точек · 12 месяцев» — внизу первого экрана во всю ширину сетки, как путь «01 … 04» у страниц продуктов; текст —
   по центру оставшейся высоты; поля сверху и снизу — как у первого экрана продуктов */
html:root .ss-page .ss-hero .ss-hero-inner {
  padding-top: clamp(56px, 6vw, 96px) !important;
  padding-bottom: 24px !important;
}
html:root .ss-page .ss-hero .ss-hero-inner > .ss-kicker {
  margin-top: auto !important;
}
html:root .ss-page .ss-hero .ss-hero-inner > .ss-hero-facts {
  width: 100% !important;
  max-width: none !important;
  margin-top: auto !important;
  padding-top: 48px !important;
  gap: 1px !important;
}
@media (min-width: 768px) {
  html:root .ss-page .ss-hero .ss-hero-inner > .ss-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* Первый экран продуктов в обычной прокрутке: общее правило полей разделов (88–150 px) весомее правила первого экрана,
   и путь «01 … 04» стоял на 88–150 px выше низа, а при 1280 × 720 первый экран был выше окна; поля — как в режиме
   листания и у /service-support (класс повторён ради веса) */
html:root .product-marketing:has(.product-hero--platform, .product-hero--dispatcher) main > .product-hero.product-hero.product-hero {
  padding-block: clamp(56px, 6vw, 96px) 24px !important;
}