/* Базовые стили витрины.

   Здесь всё, что нужно любой странице: токены, шапка, футер, кнопки, шрифты,
   секции главной и поиск. Стили отдельных страниц лежат рядом:
   cookie.css (баннер согласия), integrators-kit.css, quickstart.css.

   ⚠️ Исходники раздельные, но в браузер уходит ОДИН файл: генератор склеивает
   части в порядке имён (см. buildStyles в site/generator/main.go). Поэтому имя
   файла определяет место в каскаде: base.css идёт первым, страницы — после него.
   Добавляя новую часть, следи за алфавитным порядком имён. */

/* Стили витрины.
   Токены (цвета, шрифты, радиусы) — общие для трёх зон сайта:
   их значения должны совпадать с порталом (client/src/styles.scss) и документацией.
   Значения синхронизированы с прототипом (new-portal/css/styles.css). */
:root {
  /* Палитра */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-light: #eff6ff;
  --color-cta: #ff4137;
  --color-cta-hover: #dc2626;
  --color-cta-light: #fef2f2;

  /* Семантический «успех»: подтверждённый результат. Два места —
     блок результата шага (.site-qs__result) и пройденный шаг в степпере
     (.site-qs__stepper-btn--done): у них одно значение («готово»),
     поэтому и цвет один.
     Отдельный цвет, а не синий акцент: синие плашки в «Быстром старте»
     означают подсказку и активный шаг. Значения — из макета. */
  --color-success-light: #ecfdf5; /* фон блока и кружка */
  --color-success-border: #a7f3d0; /* граница блока и заливка кода в нём */
  --color-success-text: #065f46; /* текст на светлом фоне */
  --color-success-deep: #064e3b; /* тёмная подложка вывода */

  /* Нейтральные */
  --color-bg: #f8f9fb;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  /* Граница белых карточек на БЕЛОЙ секции (.site-card, .site-usecase): на шаг
     темнее общей, иначе на белом карточка почти не читается. Общая для обеих —
     чтобы вид не разъезжался.
     ⚠️ .site-support__card оставлена на --color-border: она лежит на серой
     секции, где карточку выделяет фон, и затемнять ей рамку не нужно.
     ⚠️ Сам --color-border не трогать: он в ~30 местах (шапка, поля, таблицы,
     разделители) — затемнится вся страница, а не только карточки. */
  --color-border-card: #d1d5db;
  --color-text: #1a1b1f;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.1);

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Анимации */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Раскладка */
  --header-height: 64px;
  --container-max: 1320px;
  --container-padding: 24px;
  --section-gap: 96px;

  /* Типографика */
  --font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Атрибут hidden должен скрывать элемент всегда. Без этого правила стиль
   с display (например .site-card { display: flex }) перебивает браузерное
   [hidden] { display: none }, и элемент остаётся видимым. */
[hidden] {
  display: none !important;
}

body.site {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  /* Фон страницы серый, секции кладут белый поверх — как в макете. */
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.site-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ── Шапка ───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__logo-text sup.beta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-cta);
  background: #fff2f2;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 4px;
  vertical-align: super;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header__link {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.site-header__link:hover,
.site-header__link--active {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-header__search kbd {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
}

.site-locale {
  position: relative;
}

.site-locale__current {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.site-locale__current::-webkit-details-marker {
  display: none;
}

.site-locale__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.site-locale__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-locale__item:hover,
.site-locale__item--active {
  background: var(--color-bg);
}

.site-header__auth {
  display: inline-flex;
}

/* Залогиненный пользователь: имя со ссылкой на кабинет (см. план §2.4).
   Значение подставляет site.js после проверки cookie сессии. */
.site-header__user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-fast);
}

.site-header__user:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

.site-header__burger {
  display: none;
  padding: 8px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Кнопки ──────────────────────────────────────────────── */

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.site-btn--primary {
  color: var(--color-surface);
  background: var(--color-primary);
}

.site-btn--primary:hover {
  background: var(--color-primary-hover);
}

.site-btn--secondary {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Отключённая кнопка должна выглядеть отключённой: иначе её нажимают и не
   понимают, почему ничего не происходит (например «Назад» на первом шаге). */
.site-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Шрифты и иконки ─────────────────────────────────────── */

/* Roboto и Material Icons — брендовые шрифты, общие с порталом: файлы лежат
   в сборке портала и раздаются Go по /fonts/. Сюда не копируем, чтобы
   не дублировать одни и те же файлы в бинарнике. */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto/roboto-v50-cyrillic_latin-regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/roboto/roboto-v50-cyrillic_latin-500.woff2") format("woff2");
}

/* ⚠️ Иконочный шрифт — block, а НЕ swap, в отличие от Roboto выше.
   При swap браузер до загрузки шрифта рисует запасным шрифтом не иконку, а
   текст латигатуры: «rocket_launch» вместо ракеты. Разница огромная — замерено
   на /integrators-kit: 28px с иконочным шрифтом против 173px с запасным, то есть
   текст в 6 раз шире и вёрстка прыгает на пол-строки. block прячет элемент, пока
   шрифт не загружен (не дольше 3 с), и прыжка не видно.
   Для Roboto block был бы вреден: обычный текст обязан быть читаемым сразу. */
@font-face {
  font-display: block;
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/material-icons/material-icons-outlined-v110-latin-regular.woff2")
    format("woff2");
}

/* Свойства скопированы с портала (client/src/app/styles/_fonts.scss),
   чтобы иконки выглядели одинаково в обеих зонах. */
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ────────────────────────────────────────────────── */

.site-hero {
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}

.site-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 520px;
}

.site-hero__content {
  max-width: 560px;
}

.site-hero__title {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--color-text);
}

/* Акцентная строка заголовка — градиент вместо однотонного цвета. */
.site-hero__title-accent {
  background: linear-gradient(135deg, var(--color-cta), #e53935);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-hero__subtitle {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.site-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-surface);
  background: var(--color-cta);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 65, 55, 0.3);
  transition: all var(--transition-base);
}

.site-hero__cta:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 65, 55, 0.4);
  color: var(--color-surface);
}

.site-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-base);
}

.site-hero__cta-secondary:hover {
  border-color: var(--color-text);
}

/* Терминал — визуальный образ «первого запроса», справа от заголовка. */
.site-terminal {
  background: #1e1e2e;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
}

.site-terminal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #181825;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-terminal__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.site-terminal__dot--red {
  background: #ff5f57;
}

.site-terminal__dot--yellow {
  background: #febe2e;
}

.site-terminal__dot--green {
  background: #27c93f;
}

.site-terminal__title {
  margin-left: 12px;
  font-family: var(--font-family);
  font-size: 12px;
  color: #6c7086;
}

.site-terminal__body {
  padding: 20px;
  min-height: 280px;
  line-height: 1.8;
  color: #cdd6f4;
  overflow-wrap: anywhere;
}

.site-terminal__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.site-terminal__prompt {
  color: #a6e3a1;
  flex-shrink: 0;
}

.site-terminal__command {
  color: #89b4fa;
}

.site-terminal__flag {
  color: #fab387;
}

.site-terminal__string {
  color: #a6e3a1;
}

.site-terminal__key {
  color: #f9e2af;
}

.site-terminal__bracket {
  color: #cba6f7;
}

.site-terminal__response {
  margin-top: 12px;
  color: #6c7086;
}

/* Курсор в конце терминала — мигает, как в настоящей консоли. */
.site-terminal__cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #f5e0dc;
  animation: site-blink 1s step-end infinite;
}

@keyframes site-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ── Секции ──────────────────────────────────────────────── */

.site-section {
  padding: var(--section-gap) 0;
}

/* Фон секций главной чередуется через одну: герой (серый фон страницы) →
   белая секция → снова серая → снова белая. Белые секции перечислены одной
   группой, чтобы чередование читалось целиком, а не собиралось по файлу.
   Линия сверху — только у белой: её край на почти белом фоне страницы
   (#f8f9fb против #ffffff) сам по себе не виден, а у серой секции границей
   служит сам цвет.
   ⚠️ Порядок задан в pages/index.html. Добавляя секцию, смотри, чтобы её
   цвет не совпал с соседями: две белые или две серые подряд ломают ритм. */
.site-products,
.site-usecases {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* Заголовок секции — по центру, как в макете. */
.site-section__head {
  margin: 0 auto 48px;
  text-align: center;
}

.site-section__title {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.site-section__subtitle {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ── Фильтр (табы продуктов) ─────────────────────────────── */

.site-filter {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 480px;
  margin: 0 auto 40px;
  padding: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
}

.site-filter__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.site-filter__tab:hover {
  color: var(--color-text);
}

.site-filter__tab--active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.site-filter__count {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ── Карточки ────────────────────────────────────────────── */

.site-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.site-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

/* Синяя обводка при наведении — как в макете. Красный оставлен только
   для главной кнопки в hero, чтобы акцент был один. */
.site-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  color: inherit;
}

/* flex: none — иначе иконка растягивается: она flex-элемент,
   а у шрифта иконок широкий глиф. */
.site-card__icon {
  flex: none;
  align-self: flex-start;
  font-size: 40px;
}

.site-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.site-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.site-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.site-card__badge {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-full);
}

.site-card__arrow {
  font-size: 16px;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.site-card:hover .site-card__arrow {
  transform: translateX(3px);
}

/* Внешняя ссылка (iikoFront) — помечаем стрелкой «наружу». */
.site-card--external::after {
  content: "↗";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ── Сценарии («Что можно построить») ────────────────────── */

/* Фон сценариев — белый, общий с продуктами: см. .site-products,
   .site-usecases в начале файла. */
.site-usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Карточка плоская: тень только при наведении — как у .site-card в
   «API-продуктах». */
.site-usecase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.site-usecase:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  color: inherit;
}

.site-usecase__icon {
  flex: none;
  align-self: flex-start;
  font-size: 40px;
}

.site-usecase__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.site-usecase__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Теги-разделы API прижимаются к низу карточки: у описаний разная высота,
   а линия «Перейти к руководству» должна стоять на одном уровне во всём ряду. */
.site-usecase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.site-usecase__tag {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}

.site-usecase__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.site-usecase:hover .site-usecase__link {
  gap: 10px;
}

/* ── Тизер «Поддержка интеграторов» ──────────────────────── */

/* Серая секция — фон страницы, без своей заливки. Карточки внутри белые,
   поэтому на сером они читаются. */
.site-support {
  background: none;
}

.site-support__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.site-support__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Иконка слева, название и пояснение — справа от неё. */
.site-support__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.site-support__icon {
  flex: none;
  font-size: 28px;
  color: var(--color-primary);
}

.site-support__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.site-support__desc {
  font-size: 15px;
  color: var(--color-text-secondary);
}

/* Перечисление возможностей: галочка слева, текст с отступом под неё. */
.site-support__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.site-support__list li {
  position: relative;
  padding-left: 24px;
  color: var(--color-text);
}

.site-support__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #10b981;
}

.site-support__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  text-align: center;
}

.site-support__note {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Подпись «Включено:» перед перечислением — только на странице программы,
   в тизере списки идут без неё. */
.site-support__card-label {
  font-weight: 600;
  color: var(--color-text);
}

/* Пояснение в карточке (у Coworking — кому подходит). Идёт после списка,
   поэтому занимает остаток высоты и прижимает стоимость к низу. */
.site-support__card-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Стоимость: прижата к низу карточки, сверху — пунктир. */
.site-support__card-price {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-top: 1px dashed var(--color-border);
}

.site-support__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* ── Превью «Быстрого старта» ────────────────────────────── */

/* Серая секция — фон страницы. Белой она была до выстраивания чередования:
   продукты и быстрый старт шли двумя белыми секциями подряд и читались как
   одно полотно, разделённое тонкой линией. */
.site-quickstart {
  background: none;
}

.site-quickstart__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.site-quickstart__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-quickstart__step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Номер шага: активный — синий, остальные — светло-синие. */
.site-quickstart__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}

.site-quickstart__step--active .site-quickstart__num {
  color: var(--color-surface);
  background: var(--color-primary);
}

/* Линия между шагами: смещена под центр кружка. */
.site-quickstart__connector {
  width: 2px;
  height: 20px;
  margin-left: 19px;
  background: var(--color-border);
}

.site-quickstart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-quickstart__step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.site-quickstart__step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.site-quickstart__time {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Блок кода с переключением языков ────────────────────── */

.site-code {
  overflow: hidden;
  background: #1e1e2e;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.site-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #181825;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-code__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.site-code__tab {
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6c7086;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.site-code__tab:hover {
  color: #cdd6f4;
}

.site-code__tab--active {
  color: #cdd6f4;
  background: rgba(255, 255, 255, 0.08);
}

.site-code__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6c7086;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.site-code__copy:hover {
  color: #cdd6f4;
  background: rgba(255, 255, 255, 0.1);
}

.site-code__copy .material-icons-outlined {
  font-size: 14px;
}

.site-code__body {
  min-height: 200px;
}

.site-code__pre {
  margin: 0;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: #cdd6f4;
  overflow-x: auto;
}

.site-code__pre code {
  font-family: inherit;
}

.site-code__pre--hidden {
  display: none;
}

/* Подсветка синтаксиса: цвета как в редакторе прототипа. */
.site-code__comment {
  color: #6c7086;
  font-style: italic;
}

.site-code__keyword {
  color: #cba6f7;
}

.site-code__string {
  color: #a6e3a1;
}

.site-code__function {
  color: #89b4fa;
}

.site-code__flag {
  color: #fab387;
}

.site-code__placeholder {
  padding: 1px 6px;
  color: #f9e2af;
  background: rgba(249, 226, 175, 0.1);
  border: 1px dashed rgba(249, 226, 175, 0.3);
  border-radius: 3px;
}

.site-quickstart__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.site-quickstart__avg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.site-quickstart__avg-icon {
  font-size: 20px;
}

.site-quickstart__avg strong {
  font-size: 18px;
  color: var(--color-text);
}

/* ── Окно поиска ─────────────────────────────────────────── */

.site-search {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 120px 16px 16px;
}

/* Подложка закрывает окно по клику. Отдельный элемент, а не фон контейнера:
   иначе клик по самому окну тоже считался бы кликом «мимо». */
.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.site-search__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.site-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.site-search__input {
  flex: 1;
  padding: 18px 0;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  background: none;
  border: none;
  outline: none;
}

.site-search__input::placeholder {
  color: var(--color-text-muted);
}

/* Убираем встроенный крестик очистки: рядом есть своя кнопка закрытия,
   и два крестика подряд выглядят как ошибка. */
.site-search__input::-webkit-search-cancel-button {
  display: none;
}

.site-search__close {
  display: inline-flex;
  padding: 4px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.site-search__close:hover {
  color: var(--color-text);
}

.site-search__results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}

.site-search__hint {
  margin: 0;
  padding: 24px;
  font-size: 14px;
  text-align: center;
  color: var(--color-text-secondary);
}

.site-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.site-search__item:hover,
.site-search__item--active {
  background: var(--color-bg);
}

.site-search__item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.site-search__item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.site-search__item-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Подпись типа результата — «Раздел API» / «Метод API» — держится справа,
   чтобы не мешать чтению названия. */
.site-search__item-kind {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Пока окно открыто, страница под ним не прокручивается. */
body.site-search-open {
  overflow: hidden;
}

/* ── Футер ───────────────────────────────────────────────── */

/* Тёмный футер. Цвет — середина градиента портала (#2c3e50 → #34495e):
   сам градиент здесь не нужен, на большой площади он даёт полосы,
   а смысла (объёма) в футере не несёт. */
.site-footer {
  padding: 24px 0 20px;
  color: #bdbdbd;
  background: #304457;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Логотип бренда (из конфига). Красный знак iiko читается на тёмном фоне,
   поэтому фильтры не нужны — как в шапке. */
.site-footer__logo img {
  display: block;
  height: 30px;
  width: auto;
}

.site-footer__support,
.site-footer__copyright {
  margin: 0;
  font-size: 13px;
}

.site-footer__copyright {
  margin-top: 2px;
  color: #8f9aa6;
}

/* На тёмном фоне синий нечитаем: контраст #3b82f6 к #304457 — 2.7:1 при норме
   4.5:1. Красный акцент тоже не годится (2.9:1). Поэтому ссылки белые, а
   отклик на наведение — подчёркивание: оно заметно и не жертвует контрастом. */
.site-footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

.site-footer__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8f9aa6;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

/* ── Адаптивность ────────────────────────────────────────── */

/* Замеры шапки витрины: лого с подписью 322 + меню 596 + правая группа 286
   + два зазора по 24 = 1252px контента. Контейнер даёт максимум 1272px
   (--container-max 1320 минус отступы 24×2), то есть с подписью логотипа шапка
   влезает лишь впритык — запас 0. Поэтому подпись скрывается первой (≤1399px):
   знак бренда и beta остаются, всё остальное видно целиком.
   Пороги совпадают с порталом — у обеих шапок одни и те же причины (§10 плана). */
@media (max-width: 1399px) {
  .site-header__logo-text {
    display: none;
  }

  .site-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-usecases__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-quickstart__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Окно поиска на телефоне: отступ сверху меньше, иначе оно уезжает вниз
     и результатов не видно. */
  .site-search {
    padding: 64px 12px 12px;
  }

  .site-search__results {
    max-height: 60vh;
  }
}

/* Без подписи нужно ~1010px контента. С запасом на скроллбар, отступы и
   отличие шрифтов меню уходит в бургер ниже 1160px — иначе пункты начали бы
   сжиматься и налезать друг на друга. */
@media (max-width: 1159px) {
  .site-header__nav {
    display: none;
  }

  .site-header__nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__burger {
    display: block;
  }
}

@media (max-width: 1024px) {
  .site-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }

  .site-hero__content {
    max-width: 100%;
  }

  .site-terminal {
    max-width: 100%;
  }

  .site-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-usecases__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer {
    padding: 28px 0 20px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .site-hero {
    padding: 40px 0 24px;
  }

  .site-hero__title {
    font-size: 34px;
  }

  /* Кнопки на всю ширину — так удобнее нажимать с телефона. */
  .site-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-hero__cta,
  .site-hero__cta-secondary {
    justify-content: center;
  }

  .site-terminal {
    font-size: 12px;
  }

  .site-header__inner {
    gap: 12px;
    padding: 0 16px;
  }

  /* Подпись «Поиск» и подсказка ⌘K на телефоне не нужны: остаётся иконка.
     На тач-устройствах горячая клавиша всё равно недоступна. */
  .site-header__search-label,
  .site-header__search kbd {
    display: none;
  }

  .site-header__search {
    padding: 8px 12px;
  }

  .site-cards {
    grid-template-columns: 1fr;
  }

  .site-usecases__grid {
    grid-template-columns: 1fr;
  }

  .site-support__grid {
    grid-template-columns: 1fr;
  }

  .site-support__card {
    padding: 20px;
  }

  .site-section__title {
    font-size: 26px;
  }

  /* Фильтр переносится в несколько строк: в одну строку на телефоне не влезает. */
  .site-filter {
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .site-filter__tab {
    flex: 1 1 auto;
    justify-content: center;
    border-radius: var(--radius-md);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* Баннер согласия на cookie.

   Показывается на всех страницах, поэтому лежит отдельно от base.css:
   это самостоятельный блок, а не часть базы. Разметка — в
   partials/cookie-banner.html, поведение — initCookieBanner в assets/js/site.js.
   Значения синхронизированы с порталом (client/.../cookie-banner.scss)
   и документацией (documentation/src/css/custom.css). */

/* ── Баннер согласия на cookie ───────────────────────────── */

/* Копия баннера портала (client/src/app/components/cookie-banner/cookie-banner.scss)
   и документации (documentation/src/css/custom.css): три зоны выглядят как один
   продукт. Общих стилей у них нет, поэтому значения держим синхронно руками.
   Действия красные — как в портале; на витрине красный уже означает главное
   действие (кнопка в шапке героя), так что конфликта нет. Ссылка тоже красная:
   так она не спорит с кнопками рядом. */
.site-cookie {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  font-size: 14px;
  color: #4b5563;
  background: #f3f4f6;
  box-shadow:
    0 -4px 6px rgb(158 158 158 / 14%),
    0 -2px 4px rgb(158 158 158 / 20%);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Решение принято — баннера нет. Атрибут на <html> ставит скрипт из head.html
   (до первой отрисовки) либо обработчик кнопки «Понятно» (после анимации). */
html[data-cookie-consent] .site-cookie {
  display: none;
}

.site-cookie--hiding {
  opacity: 0;
  transform: translateY(100%);
}

.site-cookie__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px 24px;
}

.site-cookie p {
  margin: 0;
}

.site-cookie p:not(:last-child) {
  margin-bottom: 8px;
}

.site-cookie a {
  color: var(--color-cta);
  text-decoration: underline;
}

.site-cookie a:hover {
  color: var(--color-cta-hover);
}

.site-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 16px;
}

.site-cookie__btn {
  padding: 8px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-cta);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-cta);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.site-cookie__btn:hover {
  color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.site-cookie__btn--filled {
  color: var(--color-surface);
  background: var(--color-cta);
  border-color: var(--color-cta);
}

.site-cookie__btn--filled:hover {
  color: var(--color-surface);
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

/* Баннер висит поверх страницы и закрывал бы футер. Отступ снимается вместе
   с показом (тот же атрибут), поэтому лишней пустоты после согласия не остаётся. */
html:not([data-cookie-consent]) .site-footer {
  padding-bottom: 160px;
}

@media (max-width: 768px) {
  /* На телефоне полное описание занимает почти весь экран, поэтому кнопки
     растягиваем — так по ним проще попасть. */
  .site-cookie__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-cookie__btn {
    text-align: center;
  }
}
/* Страница «Поддержка интеграторов» (/integrators-kit).

   Общие стили карточек программы (.site-support__*) живут в base.css: те же
   классы используются в тизере на главной, поэтому это один компонент, а не
   часть страницы. Здесь — только то, что есть лишь на этой странице. */

/* ── Страница «Поддержка интеграторов» ───────────────────── */

/* Свой фон не нужен: страница на сером фоне, карточки и таблица белые —
   так же устроены секции сценариев и тизера поддержки. */
.site-kit {
  background: none;
}

.site-kit__intro {
  max-width: 820px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: var(--color-text-secondary);
}

/* Карточки одной высоты: у пакетов разное число пунктов, а стоимость и кнопки
   должны стоять на одном уровне. В тизере это неважно, поэтому выравнивание
   задаётся здесь, а не в .site-support__grid. */
.site-kit__cards {
  align-items: stretch;
}

/* Пакет Consulting — основной, поэтому выделен рамкой и тенью (как в макете). */
.site-kit__card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.site-kit__heading {
  margin: 64px 0 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text);
}

.site-kit__subheading {
  margin: 0 0 32px;
  font-size: 16px;
  text-align: center;
  color: var(--color-text-secondary);
}

.site-kit__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.site-kit__benefit {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.site-kit__benefit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.site-kit__benefit-title .material-icons-outlined {
  flex: none;
  font-size: 20px;
  color: var(--color-primary);
}

/* Маркер списка — точка: это перечисление, а не чек-лист, как в карточках. */
.site-kit__benefit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  list-style: none;
}

.site-kit__benefit-list li {
  position: relative;
  padding-left: 16px;
}

.site-kit__benefit-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* Таблица шире телефона — прокручивается, а не ломает вёрстку. */
.site-kit__table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.site-kit__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.site-kit__table th,
.site-kit__table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.site-kit__table th {
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  white-space: nowrap;
}

.site-kit__table td {
  color: var(--color-text-secondary);
}

/* Название услуги — то, по чему строку ищут. */
.site-kit__table td:first-child {
  font-weight: 500;
  color: var(--color-text);
}

.site-kit__table tr:last-child td {
  border-bottom: none;
}

/* Порядок подключения — нумерованный список: шаги идут друг за другом, и номер
   здесь несёт смысл. В две колонки, чтобы шесть пунктов не растягивали страницу
   в длинную ленту; на узких экранах — в одну (см. медиазапросы ниже).
   ⚠️ Именно columns, а НЕ grid с двумя колонками. Grid по умолчанию заполняет
   по СТРОКАМ — вышло бы «1 2 / 3 4 / 5 6», то есть чтение зигзагом вправо-влево,
   а у нас последовательность. Multicol нарезает контент по столбцам: 1-2-3 вниз
   по левому, 4-5-6 по правому. Так предписано и для многоколоночного текста
   (WCAG 2.2, SC 1.3.2 «Meaningful Sequence», пример 1), и так же ведёт себя
   CSS columns — «как в газете» (MDN). Для НЕзависимых элементов (карточки,
   галерея) правило обратное: там grid со строками. */
.site-kit__steps {
  columns: 2;
  column-gap: 32px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: kit-step;
}

/* break-inside: avoid — шаг не разрывается между колонками: номер остался бы
   в одной колонке, а текст в другой.
   display: flex + gap вместо padding-left: 44px — отступ под круг задаёт сам
   flex, а не магическое число (круг 28px + зазор 16px = прежние 44px).
   align-items: flex-start — при переносе текста круг остаётся на первой строке. */
.site-kit__steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  break-inside: avoid;
}

/* Отступ задан снизу, а не сверху: последний шаг не должен добавлять зазор
   под списком. Отбивку сверху у первого дал бы margin-top, но тогда его
   пришлось бы снимать у первого шага ВТОРОГО столбца — а он не «:first-child». */
.site-kit__steps li:last-child {
  margin-bottom: 0;
}

/* Номер шага — круг с цифрой. Счётчик, а не <ol>: свой маркер у списка не
   стилизуется одинаково в браузерах, а круг нужен по макету.
   ⚠️ Номер — обычный flex-элемент, а НЕ position: absolute (так было раньше).
   В multicol Chrome НЕ рисует текст абсолютно позиционированного ::before
   у шага на границе колонок (у последнего в левой): кружок есть, цифры нет.
   Баг стабильный — не лечится ни break-inside, ни сменой содержимого
   счётчика на литерал, ни перезагрузкой; видно только глазами, в
   getComputedStyle всё в порядке (потому и не ловится тестами).
   В grid-раскладке, которая была до перехода на columns, его не было.
   ⚠️ Не возвращать absolute: тогда у одного из шагов пропадёт номер. */
.site-kit__steps li::before {
  counter-increment: kit-step;
  content: counter(kit-step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}

/* Примечание про партнёра — под списком, по центру: оно относится к списку
   целиком, а не к отдельному шагу. */
.site-kit__note {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
}

.site-kit__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ── Адаптивность ────────────────────────────────────────── */

/* Свои медиазапросы, а не блоки из base.css: правила страницы живут вместе
   с ней, иначе при правке легко забыть про адаптив (так и было раньше —
   эти два правила стояли внутри общих медиазапросов). */
@media (max-width: 1024px) {
  .site-kit__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .site-kit__benefits {
    grid-template-columns: 1fr;
  }

  .site-kit__steps {
    columns: 1;
  }

  .site-kit__heading {
    margin-top: 40px;
    font-size: 22px;
  }
}
/* Страница «Быстрый старт» (/quickstart).

   Медиазапросы страницы тоже здесь, а не в общих в base.css: правила этой
   страницы должны лежать одним куском, иначе при правке легко забыть про
   адаптив. */

/* ── Страница «Быстрый старт» ────────────────────────────── */

/* Все шаги присутствуют в разметке сразу и идут подряд: без JS это
   единственный способ показать их содержимое (см. pages/quickstart.html).
   Отступы секции здесь не нужны: страница начинается с «шапки» со своим фоном,
   а --section-gap оставил бы серую полосу над градиентом. */
.site-qs {
  padding: 0 0 var(--section-gap);
}

/* Шапка страницы: свой градиентный фон и граница снизу — как в макете. */
.site-qs__hero {
  padding: 48px 0 40px;
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    #eef2ff 100%
  );
  border-bottom: 1px solid var(--color-border);
}

.site-qs__back {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-qs__back:hover {
  color: var(--color-primary);
}

.site-qs__back .material-icons-outlined {
  font-size: 18px;
}

.site-qs__title {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.site-qs__subtitle {
  margin: 0 0 28px;
  font-size: 18px;
  color: var(--color-text-secondary);
}

.site-qs__avg {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.site-qs__avg .material-icons-outlined {
  font-size: 18px;
}

/* Прогресс и кнопки «Назад / Далее» показывает скрипт: без него переключать
   шаги нечем, и они только занимали бы место. */
.site-qs__progress {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 12px;
}

.site-qs__bar {
  flex: 1;
  max-width: 400px;
  height: 6px;
  overflow: hidden;
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.site-qs__fill {
  width: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.site-qs__progress-label {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.site-qs__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
  padding-top: 40px;
}

/* ── Степпер ─────────────────────────────────────────────── */

.site-qs__stepper {
  position: sticky;
  top: calc(var(--header-height) + 16px);
}

.site-qs__stepper-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-qs__stepper-item {
  position: relative;
}

/* Линия между кружками. Она отсчитывается от НИЗА пункта (top: 100%), а не от
   верха: подпись шага переносится на две строки, и жёсткий `top: 40px` уезжал
   внутрь пункта — линии налезали друг на друга. Отсчёт от низа корректен при
   любой высоте подписи, потому что кружок центрируется по вертикали.
   left: 20px — центр кружка (отступ кнопки 6px + половина кружка 15px −
   половина линии 1px), height совпадает с gap списка. */
.site-qs__stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 2px;
  height: 12px;
  background: var(--color-border);
}

.site-qs__stepper-btn {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Кружок шага. Три состояния — по ним видно, где человек сейчас:
   непройденный приглушён, активный залит, пройденный отмечен зелёным.
   Фон непройденного — --color-border (#e5e7eb), а не --color-bg: страница
   серая (#f8f9fb), и кружок слился бы с ней. */
.site-qs__num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

/* Активный — самый заметный: здесь сейчас работают. Свечение (тень без сдвига)
   даёт тот же вид, что в макете, и не влияет на размеры кружка. */
.site-qs__stepper-btn--active .site-qs__num {
  color: var(--color-surface);
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* Пройденный — зелёный, как блоки «Успешный ответ» на этой же странице:
   один цвет на одно значение («готово»). Приглушённее активного — он
   подтверждает сделанное, а не требует действия. */
.site-qs__stepper-btn--done .site-qs__num {
  color: var(--color-success-text);
  background: var(--color-success-light);
}

.site-qs__stepper-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-qs__stepper-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}

/* Активная строка подсвечена целиком, а не только кружком: так видно,
   какой раздел сейчас открыт справа (как в макете). Черта пересечения
   с кнопкой-соседом не страшна — активна всегда ровно одна строка. */
.site-qs__stepper-btn--active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.site-qs__stepper-btn--active .site-qs__stepper-name {
  font-weight: 600;
  color: var(--color-primary);
}

/* Примерное время шага в левой колонке скрыто — как в макете. Оно дублирует
   заголовок шага и мешает читать список: сами тайминги видны в шапке шага.
   На узких экранах время возвращается (там степпер становится компактнее
   и подписи короче). */
.site-qs__stepper-time {
  display: none;
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ── Панель шага ─────────────────────────────────────────── */

.site-qs__content {
  min-width: 0;
}

.site-qs__panel {
  margin-bottom: 24px;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.site-qs__panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.site-qs__panel-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.site-qs__badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-hover);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.site-qs__panel-time {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.site-qs__panel-time .material-icons-outlined {
  font-size: 16px;
}

.site-qs__substep {
  margin-bottom: 24px;
}

.site-qs__substep-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.site-qs__panel-head + .site-qs__substep .site-qs__substep-title {
  margin-top: 0;
}

.site-qs__substep-num {
  font-weight: 700;
  color: var(--color-primary);
}

.site-qs__substep-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.site-qs__endpoint,
.site-qs__path {
  display: inline-block;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.site-qs__note {
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 14px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.site-qs__note ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.site-qs__note li + li {
  margin-top: 4px;
}

.site-qs__note-optional {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Ссылка на статью базы знаний — вторая строка в блоке с путём. Набрана легче
   самого пути: путь — главное, инструкция идёт как подстраховка «если не нашёл». */
.site-qs__path-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.site-qs__path-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
}

.site-qs__path-link .material-icons-outlined {
  font-size: 14px;
}

.site-qs__warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-md);
}

.site-qs__warning .material-icons-outlined {
  flex: none;
  font-size: 18px;
  color: #f59e0b;
}

/* Предупреждение про Client Secret — его нельзя пропустить, поэтому красное. */
.site-qs__warning--critical {
  background: var(--color-cta-light);
  border-left-color: var(--color-cta-hover);
}

.site-qs__warning--critical .material-icons-outlined {
  color: var(--color-cta-hover);
}

.site-qs__warning strong {
  display: block;
  margin-bottom: 4px;
}

/* Результат шага — «что у вас должно получиться». Зелёный, а не синий (как
   плашки-подсказки): цвет сообщает, что это не совет, а подтверждение успеха. */
.site-qs__result {
  margin-top: 20px;
  padding: 16px;
  font-size: 14px;
  color: var(--color-success-text);
  background: var(--color-success-light);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
}

.site-qs__result ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.site-qs__result li + li {
  margin-top: 6px;
}

.site-qs__result p {
  margin: 12px 0 0;
}

.site-qs__result code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-success-border);
  border-radius: var(--radius-sm);
}

.site-qs__table code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
}

/* Ответ API: тёмная подложка, как у примеров кода, но зелёная — так видно,
   что это ВЫВОД («что вернул сервер»), а не пример запроса. */
.site-qs__response {
  margin: 10px 0 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  /* Тот же светло-зелёный, что и граница: на тёмном фоне читается. */
  color: var(--color-success-border);
  background: var(--color-success-deep);
  border-radius: var(--radius-md);
}

/* Внутри ответа чип не нужен: это уже подложка. Без сброса фона ``code``
   получал заливку от .site-qs__result (светло-зелёный) и наследовал такой же
   цвет текста — текст сливался с собственным фоном и был не виден. */
.site-qs__response code {
  padding: 0;
  background: none;
  font-family: inherit;
}

/* ── Таблица ошибок ──────────────────────────────────────── */

.site-qs__errors {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.site-qs__errors-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}

/* Свой маркер у summary убираем: на его месте — стрелка раскрытия. */
.site-qs__errors-summary::-webkit-details-marker {
  display: none;
}

.site-qs__errors-summary .material-icons-outlined {
  font-size: 18px;
}

/* Стрелка раскрытия нарисована рамкой, а не значком шрифта: у иконки-лигатуры
   есть текстовое содержимое, и оно попадало бы в озвучку заголовка
   («Если что-то пошло не так expand_more»). */
.site-qs__errors-summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.site-qs__errors[open] .site-qs__errors-summary::after {
  transform: rotate(-135deg);
}

.site-qs__errors-body {
  padding: 0 16px 16px;
  overflow-x: auto;
}

.site-qs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.site-qs__table th,
.site-qs__table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

/* Шапка таблицы отделяется фоном и двойной линией, а не только жирностью:
   так границы колонок читаются без усиления шрифта. */
.site-qs__table th {
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

/* Первый столбец — название проблемы. Выделяем его, чтобы строку читали как
   «проблема → причина → решение», а не как четыре равнозначных столбца:
   пользователь ищет свою ошибку именно по первому столбцу. */
.site-qs__table td:first-child {
  font-weight: 500;
}

.site-qs__table tr:last-child td {
  border-bottom: none;
}

/* ── Финишный экран ──────────────────────────────────────── */

.site-qs__finish {
  text-align: center;
}

.site-qs__finish-icon {
  margin: 0 0 8px;
  font-size: 44px;
  line-height: 1;
}

.site-qs__finish-time {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 12px 0 0;
  padding: 8px 16px;
  font-size: 15px;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}

.site-qs__finish-time .material-icons-outlined {
  font-size: 18px;
  color: var(--color-primary);
}

.site-qs__next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
  text-align: left;
}

.site-qs__next-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.site-qs__next-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.site-qs__next-icon {
  font-size: 24px;
}

.site-qs__next-title {
  font-size: 15px;
  font-weight: 600;
}

.site-qs__next-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ── Кнопки «Назад / Далее» ──────────────────────────────── */

.site-qs__nav {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.site-qs__nav .site-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.site-qs__nav .material-icons-outlined {
  font-size: 18px;
}

/* ── Сайдбар ─────────────────────────────────────────────── */

.site-qs__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}

.site-qs__side-block {
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.site-qs__side-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-qs__side-progress,
.site-qs__side-list {
  margin: 0;
  padding: 0;
  font-size: 14px;
  list-style: none;
}

.site-qs__side-step {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  color: var(--color-text-secondary);
}

.site-qs__side-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.site-qs__side-step--active {
  font-weight: 500;
  color: var(--color-text);
}

.site-qs__side-step--active .site-qs__side-dot,
.site-qs__side-step--done .site-qs__side-dot {
  background: var(--color-primary);
}

.site-qs__side-list li {
  padding: 3px 0;
  color: var(--color-text-secondary);
}

.site-qs__glossary {
  margin: 0;
  font-size: 13px;
}

.site-qs__glossary dt {
  margin-top: 10px;
}

.site-qs__glossary dt:first-child {
  margin-top: 0;
}

.site-qs__glossary dt code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.site-qs__glossary dd {
  margin: 4px 0 0;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Иконка слева, две строки текста справа — как в макете. В колонку не годится:
   иконка уезжает на отдельную строку и блок становится вдвое выше. */
.site-qs__side-support {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.site-qs__side-support .material-icons-outlined {
  flex: none;
  font-size: 20px;
  color: var(--color-primary);
}

/* ── Страница «Быстрый старт»: адаптивность ──────────────── */

@media (max-width: 1399px) {
  .site-qs__layout {
    grid-template-columns: 200px minmax(0, 1fr) 250px;
    gap: 24px;
  }
}

/* Три колонки перестают помещаться: сайдбар уезжает под шаг, а шаги
   выстраиваются в строку — так они занимают меньше вертикали. */
@media (max-width: 1159px) {
  .site-qs__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-qs__stepper,
  .site-qs__sidebar {
    position: static;
  }

  .site-qs__stepper-list {
    flex-direction: row;
    gap: 8px;
  }

  .site-qs__stepper-item:not(:last-child)::after {
    display: none;
  }

  .site-qs__stepper-btn {
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }

  /* На узких экранах строка активного шага тоже белая (как и все остальные),
     иначе подсветка вылезала бы за границы своей рамки. Активный отличаем
     рамкой и цветом названия. */
  .site-qs__stepper-btn--active {
    background: var(--color-surface);
    border-color: var(--color-primary);
  }

  .site-qs__sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .site-qs__hero {
    padding: 32px 0 28px;
  }

  .site-qs__title {
    font-size: 26px;
  }

  .site-qs__panel {
    padding: 20px;
  }

  .site-qs__panel-title {
    font-size: 19px;
  }

  /* Степпер снова вертикальный — и снова с линиями. gap возвращаем к 12px:
     линия занимает весь промежуток между пунктами, и при 8px она налезала
     на следующий кружок. */
  .site-qs__stepper-list {
    flex-direction: column;
    gap: 12px;
  }

  .site-qs__stepper-item:not(:last-child)::after {
    display: block;
  }

  /* На мобильных время шага снова видно: в одну колонку места хватает,
     а ориентир по времени здесь полезнее, чем на широком экране. */
  .site-qs__stepper-time {
    display: block;
  }

  /* Таблицы ошибок шире экрана: прокручиваем их, а не ломаем вёрстку. */
  .site-qs__table {
    min-width: 520px;
  }
}