/* NextGen Robot — маркетплейс: каталог, карточка модели, решения, кейсы.
   Наследует токены и компоненты site.css; здесь только то, чего там нет. */

/* ---------- служебное ---------- */
.breadcrumbs { font: 400 13px/1.4 var(--font-body); color: var(--text-3); margin: 0 0 var(--space-4); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span[aria-hidden] { color: var(--border); }

.page-head { padding: var(--space-6) 0 var(--space-5); }
.page-head__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; }
.page-head h1 { max-width: 18ch; }
.page-head__lead { color: var(--text-2); max-width: 56ch; margin: 0 0 var(--space-4); }
.page-head__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.page-head__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* строка статистики (паттерн NextGen) */
.statrow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  background: var(--white); border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card); margin-top: var(--space-5);
}
.statrow__v { font: 700 28px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0; white-space: nowrap; }
.statrow__k { font-size: 13px; color: var(--text-2); margin: 4px 0 0; line-height: 1.4; }

/* ---------- умный поиск в первом экране ---------- */
.ssearch-host { background: var(--white); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card);
  margin-top: var(--space-5); }
.ssearch { display: flex; gap: var(--space-3); align-items: stretch; }
/* поле прямоугольное с лёгким скруглением - правка заказчика (замечание №82) */
.ssearch__field { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 16px; }
.ssearch__ico { display: grid; place-items: center; color: var(--text-3); flex: none; }
.ssearch__ico svg { width: 20px; height: 20px; }
.ssearch__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 15px 0; font: 400 16px/1.3 var(--font-body); color: var(--text); }
.ssearch__field input::-webkit-search-cancel-button { cursor: pointer; }
.ssearch .btn { flex: none; padding: 14px 26px; border-radius: 10px; }
.ssearch__hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ssearch__note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ssearch__rows { display: grid; gap: 6px; margin-top: var(--space-3); }
/* выдача остаётся на этой же странице, под строкой поиска (замечание №84) */
.ssearch__res { margin-top: var(--space-4); border-top: 1px solid var(--border);
  padding-top: var(--space-4); }
.ssearch__cap { margin: 0; font: 600 12.5px/1 var(--font-body); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; }
.ssearch__more { margin: 10px 0 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ssearch__more a { font: 600 13.5px/1.4 var(--font-body); color: var(--accent);
  text-decoration: none; }
.ssearch__more a:hover { text-decoration: underline; }
.sscase { display: grid; gap: 4px; padding: var(--space-4); border-radius: 10px;
  background: var(--accent-soft); text-decoration: none; color: inherit;
  margin-bottom: var(--space-3); }
.sscase__k { font: 700 10.5px/1 var(--font-body); text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent); }
.sscase b { font: 600 17px/1.25 var(--font-display); }
.sscase > span:not([class]) { font-size: 13.5px; color: var(--text-2); }
.sscase__go { font: 600 13.5px/1 var(--font-body); color: var(--accent); margin-top: 4px; }
.sscase:hover .sscase__go { text-decoration: underline; }
.ssrow { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center;
  text-decoration: none; color: inherit; padding: 6px; border-radius: var(--radius-s); }
.ssrow:hover { background: var(--bg); }
.ssrow img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.ssrow__b { min-width: 0; }
.ssrow__b b { display: block; font: 600 14px/1.3 var(--font-body); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ssrow__b span { font-size: 12.5px; color: var(--text-3); }
.ssrow__k { font: 600 11px/1 var(--font-body); color: var(--accent);
  background: var(--accent-soft); padding: 5px 9px; border-radius: var(--pill); white-space: nowrap; }

@media (max-width: 640px) {
  .ssearch { flex-direction: column; }
  .ssearch .btn { width: 100%; }
}

/* ---------- селектор типов роботов ---------- */
.typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.typecard {
  display: block; text-align: left; text-decoration: none; background: var(--white); border: 1px solid transparent;
  border-radius: var(--radius); padding: 0; overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; box-shadow: var(--shadow-card); transition: transform .15s ease, border-color .15s ease;
}
.typecard:hover { transform: translateY(-2px); }
.typecard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 4px 16px rgba(43, 92, 230, .18); }
/* Пэкшот в плитке: объект одного визуального масштаба и строго по центру
   (правка заказчика 08-11). Раньше стоял object-fit: cover - рендеры с разной
   компоновкой кадра обрезались по-разному, и техника «прыгала» по размеру. */
.typecard__ph { display: block; width: 100%; aspect-ratio: 16/10; background: #fff; }
.typecard__ph--illus { color: var(--text-3); }
.typecard__ph--illus svg { width: 64%; height: auto; }
.typecard__ph--photo img { display: block; width: 100%; height: 100%;
  object-fit: contain; }
.typecard__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.typecard__t { display: block; font: 600 15px/1.3 var(--font-display); }
.typecard__h { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; }
.typecard__n { display: block; font: 600 11.5px/1 var(--font-body); color: var(--accent); margin-top: 8px; }

/* ---------- панель фильтров ---------- */
.market { display: grid; grid-template-columns: 264px 1fr; gap: var(--space-5); align-items: start; }
.market > * { min-width: 0; }
.filters { position: sticky; top: 92px; background: var(--white); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-card); }
.filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.filters__title { font: 600 15px/1 var(--font-display); margin: 0; }
.filters__reset { background: none; border: 0; padding: 0; cursor: pointer; font: 500 13px/1 var(--font-body); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.fgroup { border-top: 1px solid var(--border); padding: var(--space-3) 0 var(--space-2); }
.fgroup:first-of-type { border-top: 0; padding-top: 0; }
.fgroup__t { font: 600 11.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 14px; color: var(--text-2); }
.fopt input { accent-color: var(--accent); width: 15px; height: 15px; }
.fopt:hover { color: var(--text); }
.fopt__n { margin-left: auto; font: 400 12px/1 var(--font-mono); color: var(--text-3); }
.frange { display: flex; gap: 8px; align-items: center; }
.frange input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 8px 10px; font: 400 13px/1.2 var(--font-mono); color: var(--text); }

.market__bar { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.market__count { font: 500 14.5px/1 var(--font-body); color: var(--text-2); }
.market__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.market__sort select { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 7px 10px; font: 400 13px var(--font-body); color: var(--text); }

/* ---------- карточка модели ---------- */
.prodgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: start; }
.prod {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.prod__media { position: relative; display: block; aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.prod__media { background: #fff; }
.prod__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: var(--space-3); }
.prod__media--illus { display: grid; place-items: center; color: var(--text-3); padding: var(--space-3); }
.prod__media--illus svg { width: 82%; height: auto; }
.prod__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font: 600 11px/1 var(--font-body); background: var(--ink); color: #F2F2F1;
  padding: 6px 10px; border-radius: var(--pill);
}
.prod__rating { position: absolute; top: 12px; right: 12px; z-index: 1; font: 700 12px/1 var(--font-body); background: rgba(255,255,255,.92); color: var(--text); padding: 6px 9px; border-radius: var(--pill); }
.prod__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.prod__brand { font: 600 11px/1 var(--font-body); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
/* Фиксированные высоты текстовых блоков: иначе цена, бейдж окупаемости и кнопки
   в соседних карточках ряда съезжают на высоту одной строки (баг ревью 08-07). */
.prod__name { font: 600 18px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0;
  min-height: calc(2 * 1.3em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod__tag { font-size: 13.5px; color: var(--text-2); line-height: 1.45; margin: 0;
  min-height: calc(2 * 1.45em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Происхождение данных карточки. Высота фиксирована (две строки), иначе карточки
   поставщиков и наши собственные разъезжаются по сетке. */
.prod__src { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--text-3); min-height: calc(2 * 1.35em); }
.prod__src b { color: var(--text-2); font-weight: 600; }
.prod__src small { display: block; font-size: 11px; color: var(--text-3); }
.prod__src--partner b { color: var(--text); }
.prod__specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 30px; gap: 6px var(--space-3); min-height: 66px; align-content: start; }
.prod__specs li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline;
  gap: 8px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--border);
  padding-bottom: 5px; min-height: 24px; }
/* Название характеристики сжимается первым, значение не налезает на него:
   длинное значение обрезается многоточием, полный текст - в подсказке (08-11). */
.prod__specs li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* justify-self:end давал элементу ширину по содержимому, и длинное значение
   вылезало из своей колонки поверх названия. Ширина строго по колонке. */
.prod__specs li b { min-width: 0; width: 100%; justify-self: stretch; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__specs b { font: 600 12.5px/1.4 var(--font-body); color: var(--text); }
.prod__price { margin: auto 0 0; padding-top: var(--space-2); font: 700 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.prod__price small { display: block; font: 400 12.5px/1.4 var(--font-body); color: var(--text-2); margin-top: 3px; }
.prod__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.prod__actions .btn { padding: 10px 16px; font-size: 13.5px; }

/* раскрытие калькулятора внутри карточки */
.prod__calc { border-top: 1px solid var(--border); background: var(--surface); padding: 0; }
.prod__calc[hidden] { display: none; }
.prod__calc-in { padding: var(--space-3) var(--space-4) var(--space-4); }
.prod__calc-t { font: 600 11px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--space-3); }

/* ---------- мини-калькулятор ---------- */
.minicalc { display: block; }
.mc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.mc-field { display: flex; flex-direction: column; gap: 5px; }
.mc-field span { font-size: 11.5px; color: var(--text-2); line-height: 1.3; }
.mc-field input {
  width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 8px 10px; font: 600 14px/1.2 var(--font-mono); color: var(--text); margin-top: auto;
}
.mc-field input:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.mc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-3) 0 var(--space-2); border-top: 1px solid var(--border); }
.mc-out__label { font-size: 12px; color: var(--text-2); margin: 0 0 4px; line-height: 1.3; }
.mc-out__val { font: 700 18px/1.15 var(--font-mono); margin: 0; color: var(--good); font-variant-numeric: tabular-nums; }
.mc-out__val--warn { color: var(--warn); }
.mc-assum summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); padding: 8px 0 0; }
.mc-assum ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.mc-assum li { margin-bottom: 5px; }

/* ---------- детальная карточка модели ---------- */
/* колонка с названием и ценой короче фото: центрируем её по высоте кадра,
   иначе под кнопками остаётся пустое поле в полторы сотни пикселей */
.detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: center; }
.detail > * { min-width: 0; }
.detail__media { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-card); }
.detail__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; padding: var(--space-4); }
.detail__media--illus { display: grid; place-items: center; padding: var(--space-5); color: var(--text-3); aspect-ratio: 4/3; }
.detail__media--illus svg { width: 78%; height: auto; }
.detail__note { font: 400 12.5px/1.5 var(--font-body); color: var(--text-3); margin: var(--space-2) 0 0; }
.detail__title { margin: 0 0 var(--space-2); }
.detail__brand { font: 600 12px/1 var(--font-body); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.detail__lead { color: var(--text-2); margin: 0 0 var(--space-4); }
.detail__origin { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.detail__origin b { color: var(--text); }
.detail__price { font: 700 32px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-1); }
.detail__price small { display: block; font: 400 14px/1.5 var(--font-body); color: var(--text-2); margin-top: 6px; }
.detail__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0 0; }

.speclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); }
.speclist li { display: flex; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 14px; color: var(--text-2); }
.speclist b { font: 600 14px/1.4 var(--font-body); color: var(--text); text-align: right; }

/* min-width:0 у панели и её строк: по умолчанию grid/flex-элемент не уже своего
   содержимого, и длинная строка спецификации распирала документ (MOBILE-001) */
.panel { background: var(--white); border-radius: var(--radius); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); min-width: 0; }
.cardgrid > *, .newsgrid > * { min-width: 0; }
.speclist li { min-width: 0; overflow-wrap: anywhere; }
.speclist li b { min-width: 0; }
.panel + .panel { margin-top: var(--space-3); }
/* max-width:24ch с глобального h2 при кегле 17px обрезает строку на 269 px:
   заголовок панели ломался пополам при свободном месте справа */
.panel__t { font: 600 17px/1.3 var(--font-display); letter-spacing: -0.01em;
  margin: 0 0 var(--space-3); max-width: none; }
.panel--dark { background: var(--ink); color: var(--text); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.chip { font: 500 13px/1 var(--font-body); background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill); padding: 8px 13px; color: var(--text-2); }
.chip--on { background: var(--ink); color: #F2F2F1; border-color: var(--ink); }

/* ---------- сетка кейсов и решений ---------- */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
/* Модификаторы вместо инлайновых grid-template-columns: инлайн-стиль сильнее
   медиа-запросов и на мобильных давал горизонтальный скролл. */
.cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.prodgrid--3 { grid-template-columns: repeat(3, 1fr); }
.mcard { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mcard__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__tag { position: absolute; top: 12px; left: 12px; font: 600 11px/1 var(--font-body); background: rgba(32,32,32,.9); color: #F2F2F1; padding: 6px 10px; border-radius: var(--pill); }
.mcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.mcard__t { font: 600 17px/1.35 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.mcard__d { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 0; }
/* Фиксированная высота нужна ТОЛЬКО внутри карточки-ссылки: там метрики и эффект
   соседних карточек ряда встают на одну линию (баг ревью 08-07). Те же классы
   переиспользованы как обычные абзацы в панелях консалтинга и сервисов - там
   клэмп срезал содержательный текст даже на десктопе (MOBILE-001). */
.mcard .mcard__t {
  min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .mcard__d {
  min-height: calc(3 * 1.5em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__metrics { display: flex; gap: var(--space-4); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.mcard__mv { font: 700 18px/1.1 var(--font-mono); color: var(--good); display: block; }
.mcard__mk { font-size: 11.5px; color: var(--text-2); line-height: 1.3; display: block; margin-top: 3px; }
.mcard__link { font: 400 13px/1 var(--font-mono); color: var(--accent); }

/* ---------- путь пользователя (паттерн NextGen) ---------- */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); align-items: start; }
.jstep { text-align: center; position: relative; padding: 0 var(--space-2); }
.jstep__i { width: 46px; height: 46px; margin: 0 auto var(--space-2); border-radius: var(--radius-s); background: var(--white); display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-card); }
.jstep__i svg { width: 24px; height: 24px; }
.jstep__t { font: 600 13.5px/1.35 var(--font-display); margin: 0; }
.jstep__d { font-size: 12px; color: var(--text-2); margin: 5px 0 0; line-height: 1.4; }
.jstep:not(:last-child)::after {
  content: ''; position: absolute; top: 22px; right: -6px; width: 12px; height: 2px; background: var(--accent); opacity: .5;
}

/* ---------- совместимость и доверие ---------- */
.stackrow { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.stackrow span { font: 500 13.5px/1 var(--font-body); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 14px; color: var(--text-2); }

/* ---------- CTA-полоса с фото ---------- */
.ctabar { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-5); align-items: center; background: var(--ink); color: var(--text); border-radius: var(--radius); overflow: hidden; padding: var(--space-5); }
.ctabar h2 { color: #F2F2F1; margin-bottom: var(--space-2); max-width: 22ch; }
.ctabar p { color: #B9BDB9; margin: 0 0 var(--space-4); max-width: 52ch; }
.ctabar__media { align-self: center; }
.ctabar__media { background: #fff; border-radius: var(--radius-s); overflow: hidden; }
.ctabar__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .typegrid { grid-template-columns: repeat(3, 1fr); }
  .cardgrid, .cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
  .prodgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .market { grid-template-columns: 1fr; }
  .filters { position: static; }
  .page-head__grid { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .jstep:not(:last-child)::after { display: none; }
  .statrow { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 780px) {
  .prodgrid { grid-template-columns: repeat(2, 1fr); }
  .typegrid { grid-template-columns: repeat(2, 1fr); }
  .cardgrid, .cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
  .prodgrid--3 { grid-template-columns: repeat(2, 1fr); }
  .ctabar { grid-template-columns: 1fr; padding: var(--space-4); }
  .ctabar__media { display: none; }
}
@media (max-width: 640px) {
  .mc-fields { grid-template-columns: repeat(2, 1fr); }
  .mc-out { grid-template-columns: 1fr; gap: var(--space-2); }
  .speclist, .prod__specs { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .detail__price { font-size: 25px; }
}

/* ---------- лендинг: заголовки секций и вспомогательное ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.sec-head h2 { margin-bottom: 0; }
.sec-head__link { font: 600 14.5px/1 var(--font-body); color: var(--accent); text-decoration: none; white-space: nowrap; padding: 8px 0; }
.sec-head__link:hover { text-decoration: underline; }

.hero__photo { align-self: center; }
.chip--link { text-decoration: none; display: inline-block; transition: background .15s ease, color .15s ease; }
.chip--link:hover { background: var(--ink); color: #F2F2F1; border-color: var(--ink); }

.prod__media-link { display: block; position: relative; text-decoration: none; }
.prod__name a { text-decoration: none; color: inherit; }
.prod__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.market__empty { color: var(--text-2); font-size: 15px; padding: var(--space-5) 0; }
.footer__credits { font: 400 12px/1.6 var(--font-body); color: var(--text-3); margin: var(--space-3) 0 0; max-width: 90ch; }

/* ---------- предметные рендеры на белом (пэкшоты каталога) ---------- */
.prod__media--art, .typecard__ph--art, .detail__media--art {
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
.prod__media--art { aspect-ratio: 4/3; padding: var(--space-2); }
.prod__media--art svg, .typecard__ph--art svg, .detail__media--art svg { display: block; width: 100%; height: auto; }
.typecard__ph--art { aspect-ratio: 16/10; padding: var(--space-2); }
.detail__media--art { aspect-ratio: 4/3; padding: var(--space-4); }
.detail__media--art img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: contain; padding: 0; }
.detail__photo { margin: var(--space-3) 0 0; }
.detail__photo img { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; }
.detail__photo figcaption { font-size: 12.5px; color: var(--text-3); margin-top: 8px; }

/* ---------- подвал маркетплейса ---------- */
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-5); padding-bottom: var(--space-5); }
.foot__brand .logo { margin-bottom: var(--space-3); display: inline-flex; }
.foot__note { color: var(--text-2); font-size: 14px; max-width: 34ch; margin: 0 0 var(--space-3); }
.foot__phone { display: block; font-weight: 700; font-size: 18px; text-decoration: none; color: var(--text); }
.foot__mail { display: inline-block; margin-top: 6px; color: var(--accent); text-decoration: none; font-size: 14.5px; }
.foot__mail:hover { text-decoration: underline; }
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__t { font: 600 12px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }
.foot__col a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.foot__col a:hover { color: var(--accent); }
.foot__bottom { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.foot__bottom .footer__note--right { max-width: 60ch; text-align: right; font-size: 12px; }
@media (max-width: 980px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .foot__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .foot__bottom .footer__note--right { text-align: left; margin-left: 0; } }

/* Планшет: карточки стоят в два столбца, выравнивание по строке нужно, но
   текста в узкой колонке помещается меньше - даём клэмпу больше строк,
   иначе описание кейса и решения обрывается (MOBILE-001). */
@media (min-width: 641px) and (max-width: 980px) {
  .mcard .mcard__t { min-height: calc(3 * 1.35em); -webkit-line-clamp: 3; }
  .mcard .mcard__d { min-height: calc(5 * 1.5em); -webkit-line-clamp: 5; }
  .prod__tag { min-height: calc(3 * 1.45em); -webkit-line-clamp: 3; }
  .prod__name { min-height: calc(3 * 1.3em); -webkit-line-clamp: 3; }
}

/* одна колонка — только на телефонах */
@media (max-width: 640px) {
  .prodgrid, .prodgrid--3, .cardgrid, .cardgrid--2 { grid-template-columns: 1fr; }
  .typegrid { grid-template-columns: repeat(2, 1fr); }
  /* Клэмп существует, чтобы карточки в РЯДУ вставали на одну линию. В одной
     колонке выравнивать нечего, а текст решения и кейса терялся (MOBILE-001):
     на телефоне показываем его целиком. */
  .mcard .mcard__t, .mcard .mcard__d, .prod__name, .prod__tag, .prod__src {
    display: block; -webkit-line-clamp: none; overflow: visible; min-height: 0;
  }
  /* новость: картинка 220 px в ряд с текстом не оставляла места под заголовок */
  .nrow { flex-direction: column; gap: var(--space-2); }
  .nrow > img { width: 100%; height: auto; aspect-ratio: 16/10; }
  /* сортировка каталога: на своей строке, селект по ширине контейнера */
  .market__sort { margin-left: 0; width: 100%; min-width: 0; }
  .market__sort select { flex: 1; min-width: 0; }
}

/* Плотная вёрстка узких телефонов: паддинги и иконки, из-за которых
   документ уезжал вправо (MOBILE-001). */
@media (max-width: 400px) {
  .statrow { padding: var(--space-3); gap: var(--space-2); }
  .statrow__i { width: 36px; height: 36px; }
  .statrow__i svg { width: 20px; height: 20px; }
  .statrow__v { font-size: 22px; }
  /* подписи-метки на hero позиционируются в процентах и вылезали за экран */
  .hero-mark { display: none; }
}

/* Заголовки секций по левому краю (правка заказчика 08-09, пины 60-62).
   Оверрайд живёт здесь: market.css грузится после site.css, и прежнее
   центрирование отсюда перебивало левое выравнивание из site.css.
   Ссылка «весь каталог →» остаётся справа, поэтому шапка секции - строка. */
.sec-head { flex-direction: row; align-items: baseline; justify-content: space-between;
  text-align: left; gap: var(--space-3); flex-wrap: wrap; }
.sec-head > div { text-align: left; }
.sec-head h2 { margin-left: 0; margin-right: 0; }
/* CTA-плашка опроса тоже по левому краю: единый вертикальный ритм страницы */
.ctabar > div:first-child { text-align: left; }
.ctabar h2, .ctabar p { margin-left: 0; margin-right: 0; }

/* ---------- сравнение с аналогами (деталь модели) ---------- */
.cmpwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th { font: 600 13px/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.cmp thead th a { color: var(--text); text-decoration: none; display: block; text-transform: none; letter-spacing: 0; font-size: 15px; }
.cmp thead th a:hover { color: var(--accent); }
.cmp tbody th { font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .cmp__cur { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cmp thead .cmp__cur { box-shadow: inset 0 3px 0 var(--accent); }
.cmp__badge { display: inline-block; margin-top: 6px; font: 600 11px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }

/* строка эффекта в карточке кейса */
.mcard__eff { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--border); font-size: 14px; color: var(--text-2); }
.mcard__eff b { color: var(--text); font-size: 15px; }
.mcard__eff small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }

/* табы-фильтры кейсов */
.chip--tab { cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.chip--tab:hover:not(.chip--on) { border-color: var(--ink); color: var(--text); }

/* сердечко и корзина на карточке */
.prod__fav { position: absolute; right: 10px; top: 44px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--border); background: rgba(255,255,255,.92); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; transition: color .15s ease, transform .15s ease; }
.prod__fav svg { width: 18px; height: 18px; }
.prod__fav:hover { color: #E0245E; transform: scale(1.08); }
.prod__fav--on { color: #E0245E; border-color: #F5C0D0; background: #FDF0F5; }
.prod__fav--on svg { fill: currentColor; }
.prod { position: relative; }
.prod__cart--added { border-color: #1F9D55 !important; color: #1F9D55 !important; }

/* ---------- страница новостей: лента + сайдбар ---------- */
.newsgrid { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--space-4); align-items: start; }
.newsfeed { display: flex; flex-direction: column; }
.nrow { position: relative; display: flex; gap: var(--space-4); padding: var(--space-3); border-radius: 12px; min-width: 0; }
.nrow > div { min-width: 0; }
.nrow + .nrow { border-top: 1px solid var(--border); }
.nrow:hover { background: var(--bg); }
.nrow__link { position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.nrow > img { flex: none; width: 220px; height: 140px; object-fit: cover; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.nrow__b { min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.nrow__meta { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; color: var(--text-3); }
.nrow__tag { color: var(--accent); background: var(--accent-soft); border-radius: var(--pill); padding: 4px 10px; font-weight: 600; font-size: 12px; }
.nrow__b h2 { font-size: 18px; margin: 0; line-height: 1.3; }
.nrow__b p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.newsside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 90px; }
.nchan { display: flex; align-items: center; gap: 12px; margin-top: var(--space-3); padding: 12px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color .15s ease; }
.nchan:hover { border-color: var(--accent); }
.nchan__i { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #2AABEE; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.nchan__i svg { width: 22px; height: 22px; }
.nchan__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nchan__b b { color: var(--text); font-size: 14.5px; }
.nchan__b span { color: var(--text-2); font-size: 12.5px; }
.nchan__go { color: var(--accent); font-weight: 700; }
#news-sub { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
#news-sub input { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font: 400 15px/1.3 var(--font-body); background: var(--bg); }
#news-sub input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.newsside__bot { width: 62%; aspect-ratio: 3/2; object-fit: cover; height: auto; margin: var(--space-3) auto 0; border-radius: 12px; display: block; }
@media (max-width: 980px) {
  .newsgrid { grid-template-columns: 1fr; }
  .newsside { position: static; }
}
@media (max-width: 640px) {
  .nrow { flex-direction: column; }
  .nrow > img { width: 100%; height: 170px; }
}

/* авторизация */
.auth-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 11px; padding: 4px; margin-bottom: var(--space-4); }
.auth-tab { flex: 1; border: 0; background: none; border-radius: 8px; padding: 10px; font: 600 14px/1 var(--font-body); color: var(--text-2); cursor: pointer; }
.auth-tab--on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font: 500 13px/1.2 var(--font-body); color: var(--text-2); }
.auth-form input { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font: 400 15px/1.4 var(--font-body); background: var(--bg); }
.auth-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.iconbtn--auth::after { content: ""; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; border: 2px solid var(--surface); }

/* ================= WOW-пакет (ресерч 2026-08-07, 15 эффектов) ================= */

/* --- пружинный easing: физика вместо стандартной кривой (Baseline linear()) --- */
:root { --spring: ease-out; }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
    0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001); }
}

/* --- bump + расходящееся кольцо бейджа корзины/избранного --- */
.iconbtn__badge.bump { animation: badge-bump .45s var(--spring); }
@keyframes badge-bump { 50% { transform: scale(1.28); } }
.iconbtn__badge::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--accent);
  border-radius: 50%; opacity: 0; pointer-events: none; }
.iconbtn__badge.bump::after { animation: badge-ring .5s ease-out; }
@keyframes badge-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }


/* --- одометр-барабан денежных сумм --- */
.od { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
/* шаг барабана СТРОГО 1em - transform в JS двигает на кратные 1em (пин 48) */
.od__d { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.od__reel { display: flex; flex-direction: column; line-height: 1;
  transform: translateY(0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.od__reel span { height: 1em; display: block; }
.od__s { white-space: pre; line-height: 1; }

/* --- дельта-чип «+N ₽/год» --- */
.mc-chip { position: absolute; right: 0; top: -4px; font: 600 12px/1 var(--font-body);
  color: var(--text-3); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 4px 8px; pointer-events: none; white-space: nowrap;
  box-shadow: var(--shadow-card); }
.mc-chip--up { color: var(--good); border-color: #BFE3CF; }

/* --- кольцо окупаемости --- */
.mc-out__val--ring { display: inline-flex; align-items: center; gap: 8px; }
.mc-ring { flex: none; }
.mc-ring__arc { transition: stroke-dashoffset 1s ease-in-out; }

/* --- флеш изменившихся ячеек сметы --- */
.case-table td.flash { animation: cell-flash .8s ease-out; }
@keyframes cell-flash { from { background: #DBE6FF; } to { background: transparent; } }

/* --- луч-сканер по выгодной колонке --- */
.case-beam { position: absolute; top: 0; height: 140px; pointer-events: none; will-change: transform;
  background: linear-gradient(180deg, transparent, rgba(43, 92, 230, .16), transparent);
  animation: beam-down 1.1s ease-in-out both; }
@keyframes beam-down { from { transform: translateY(-140px); } to { transform: translateY(var(--h, 400px)); } }

/* --- кнопка-стейт-машина «Подобрать конфигурацию» --- */
.case-run { position: relative; }
.case-run__spinner, .case-run__check { position: absolute; inset: 0; margin: auto; opacity: 0; }
.case-run__spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%; }
.case-run__check { width: 22px; height: 22px; }
.case-run__check path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.case-run__label { transition: opacity .18s ease; }
.case-run[data-state="loading"] .case-run__label,
.case-run[data-state="success"] .case-run__label { opacity: 0; }
.case-run[data-state="loading"] .case-run__spinner { opacity: 1; animation: spin .6s linear infinite; }
.case-run[data-state="success"] .case-run__check { opacity: 1; }
.case-run[data-state="success"] .case-run__check path { stroke-dashoffset: 0;
  transition: stroke-dashoffset .35s ease .1s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 3D-tilt пэкшота с бликом (только hover-указатели, вешает tilt.js) --- */
.prod__media, .detail__media { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--spring); }
.prod__media.is-tilt, .detail__media.is-tilt { transition: transform .12s ease-out; }
.prod__media::after, .detail__media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s ease; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .38), transparent 62%); }
.prod__media.is-tilt::after, .detail__media.is-tilt::after { opacity: 1; }
.prod__media, .detail__media { position: relative; }

/* --- морф пэкшота карточка -> hero детальной (View Transitions) --- */
.detail__media--art img { view-transition-name: robot-hero; }
::view-transition-group(robot-hero) { animation-duration: .35s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1); }

/* --- @starting-style: панели шапки и пузыри консультанта въезжают сами --- */
@supports (transition-behavior: allow-discrete) {
  .hpanel { transition: opacity .22s ease, transform .22s ease; }
  @starting-style { .hpanel { opacity: 0; transform: translateY(6px); } }
  .adv-menu { transition: opacity .2s ease, transform .2s ease; }
  @starting-style { .adv-menu { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* --- LiDAR-скан hero --- */
.hero__float { position: relative; animation: hero-float 7s ease-in-out infinite; }
.hero__photo--render img { animation: none; }
.hero-scan__beam { position: absolute; left: -4%; right: -4%; top: 0; height: 3px; opacity: 0;
  pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(43, 92, 230, .65), transparent); }
.scanning .hero-scan__beam { opacity: 1; animation: scan-down 2.2s linear both; }
@keyframes scan-down { from { transform: translateY(0); opacity: 1; } 88% { opacity: 1; } to { transform: translateY(330px); opacity: 0; } }
.hero-mark { position: absolute; pointer-events: none; opacity: 0; transform: scale(.92);
  transition: opacity .25s ease, transform .25s var(--spring);
  font: 600 11.5px/1 var(--font-mono); color: var(--accent); white-space: nowrap;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--accent-soft);
  border-radius: 7px; padding: 5px 8px; box-shadow: var(--shadow-card); }
.hero-mark::before { content: '+'; margin-right: 5px; font-weight: 700; }
.hero-mark.lit { opacity: 1; transform: none; }

/* --- спарклайн безубыточности (деталь модели) --- */
.spark { margin-top: var(--space-3); border-top: 1px dashed var(--border); padding-top: var(--space-3); }
.spark svg { display: block; width: 100%; height: 84px; }
.spark__t { margin: 0 0 6px; font: 600 12.5px/1.3 var(--font-body); color: var(--text-2); }
.spark__legend { display: flex; gap: 14px; margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); }
.spark__pulse { animation: spark-pulse 2.2s ease-out 2s 3; opacity: 0; }
@keyframes spark-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.spark__pulse { transform-origin: center; transform-box: fill-box; }

/* --- reduced-motion: весь пакет выключается --- */
@media (prefers-reduced-motion: reduce) {
  .iconbtn__badge.bump, .iconbtn__badge.bump::after, .case-beam,
  .case-table td.flash, .case-run__spinner, .spark__pulse, .scanning .hero-scan__beam { animation: none; }
  .od__reel, .mc-ring__arc, .case-run__check path, .prod__media, .detail__media,
  .hero-mark, .spark__line { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .hero__float { animation: none; }
}

/* ---------- живой каталог окупаемости: панель вводных + бейдж на карточке ---------- */
.econbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: var(--space-4); margin-bottom: var(--space-4); }
.econbar__in { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr 1.2fr; gap: var(--space-4); align-items: center; }
.econbar__t b { display: block; font-size: 16px; }
.econbar__t span { color: var(--text-2); font-size: 13px; }
.econbar__f { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.2 var(--font-body); color: var(--text-2); }
.econbar__f input[type="range"] { width: 100%; accent-color: var(--accent); }
.econbar__f output { font-size: 14px; color: var(--text-2); }
.econbar__f output b { font: 700 17px/1 var(--font-mono); color: var(--text); }
.econbar__res { margin: 0; font-size: 14px; color: var(--text-2); text-align: right; }
.econbar__res b { font: 700 22px/1 var(--font-mono); color: var(--good); display: block; }
@media (max-width: 980px) {
  .econbar__in { grid-template-columns: 1fr 1fr; }
  .econbar__res { text-align: left; }
}
@media (max-width: 560px) { .econbar__in { grid-template-columns: 1fr; } }

/* Высота блока фиксирована, содержимое по центру: на узкой карточке заголовок
   переносится на две строки, и без этого цена с кнопками в соседних карточках
   ряда съезжали (08-11). */
.prod__payback { display: flex; flex-direction: column; justify-content: center;
  margin: var(--space-3) 0 0; min-height: 106px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); }
.prod__payback b { display: block; font-size: 14.5px; color: var(--text); }
.prod__payback small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.prod__payback--fast { background: #EAF7F0; border-color: #BFE3CF; }
.prod__payback--fast b { color: var(--good); }

/* мобилка: плавающая кнопка консультанта - компактный круг, не перекрывает контент */
@media (max-width: 560px) {
  .adv-fab { padding: 0; width: 56px; height: 56px; border-radius: 50%; justify-content: center; }
  .adv-fab__t { display: none; }
  .adv-fab .adv-face { width: 34px; height: 34px; }
  .adv-menu { right: 14px; bottom: 78px; }
}

/* консалтинг: большие блоки одной высоты (правило живёт здесь - market.css
   грузится после site.css и перебивает .journey{align-items:start}) */
.journey--big { align-items: stretch; }
.journey--big .jstep--big { display: flex; flex-direction: column; height: 100%; }
.journey--big .jstep__d { margin-bottom: 0; }

/* ---------- режим инвесткомитета ---------- */
.fin-schemes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.fin-scheme { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 12px 14px; cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease; }
.fin-scheme b { display: block; font-size: 15px; }
.fin-scheme span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.fin-scheme:hover { border-color: var(--text-3); }
.fin-scheme.is-on { background: var(--accent-soft); border-color: var(--accent); }
.fin-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-2); }
.fin-pay__v { margin: 2px 0 0; font: 700 22px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.fin-pay__v small { display: block; font: 400 12.5px/1.4 var(--font-body); color: var(--text-2); margin-top: 3px; }
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
.fin-kpi { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.fin-kpi__v { margin: 2px 0 0; font: 700 20px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.fin-kpi__v--good { color: var(--good); }
.fin-kpi__v--bad { color: var(--warn); }
.fin-verdict { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px;
  border-left: 4px solid var(--text-3); background: var(--surface-2); margin-bottom: var(--space-4); }
.fin-verdict b { font-size: 15.5px; }
.fin-verdict span { font-size: 14px; color: var(--text-2); }
.fin-verdict--good { border-left-color: var(--good); background: #EAF7F0; }
.fin-verdict--ok { border-left-color: var(--accent); background: var(--accent-soft); }
.fin-verdict--warn, .fin-verdict--stop { border-left-color: var(--warn); background: #FDF1E7; }
.fin-flow th[scope="row"] { white-space: nowrap; }
.fin-flow td { font-variant-numeric: tabular-nums; text-align: right; }
.fin-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-3) 0; }
@media (max-width: 980px) {
  .fin-schemes, .fin-kpis { grid-template-columns: repeat(2, 1fr); }
  .fin-pay, .fin-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fin-schemes, .fin-kpis, .fin-pay, .fin-fields { grid-template-columns: 1fr; }
}

/* обратная задача: потолок цены при цели окупаемости */
.fin-target { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-2); border-radius: 12px; padding: 12px 16px; margin-bottom: var(--space-4); }
.fin-target__f { display: flex; flex-direction: column; gap: 5px; font: 500 13px/1.2 var(--font-body); color: var(--text-2); }
.fin-target__f input { width: 120px; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font: 600 15px/1.2 var(--font-mono); background: var(--surface); }
/* min-width: 260px не влезал в 305 px рабочей ширины и растягивал документ
   (MOBILE-001): на узком экране строка занимает ряд целиком */
.fin-target__out { margin: 0; font-size: 14.5px; color: var(--text-2); flex: 1 1 260px; min-width: 0; }
.fin-target__out b { font-family: var(--font-mono); color: var(--text); }
.fin-ok { color: var(--good); font-weight: 600; }
.fin-bad { color: var(--warn); font-weight: 600; }

/* ---------- запас прочности: шкала порогов и торнадо чувствительности ---------- */
.sens { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.sens:empty { display: none; }
.sens__t { margin: 0 0 var(--space-3); font: 600 14px/1.3 var(--font-body); }
.sens__note { margin: var(--space-3) 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.sens__note b { color: var(--text); }

/* Маркер «вы» стоит НАД полосой и подписан значением: раньше он висел отдельной
   меткой под шкалой и на широкой панели читался как оторванный элемент (08-11). */
.sens-scale { position: relative; height: 46px; margin-top: var(--space-5); }
.sens-scale__track { position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #FDE7DA 0%, #FDE7DA var(--sub), #EAF0FE var(--sub), #EAF0FE var(--pay), #E4F5EC var(--pay), #E4F5EC 100%); }
.sens-scale__mark { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.sens-scale__you { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.sens-scale__mark i, .sens-scale__you i { display: block; width: 2px; height: 14px; margin: 0 auto 4px; background: var(--text-3); }
.sens-legend { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; }
.sens-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.sens-legend b { font-family: var(--font-mono); color: var(--text); }
.sens-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sens-dot--sub { background: var(--warn); }
.sens-dot--pay { background: var(--accent); }
.sens-dot--you { background: var(--good); }
.sens-scale__mark--sub i { background: var(--warn); }
.sens-scale__mark--pay i { background: var(--accent); }
.sens-scale__you { top: -26px; }
.sens-scale__you i { background: var(--good); height: 16px; width: 3px; border-radius: 2px; margin-top: 2px; }
.sens-scale__you b { display: block; font: 700 12.5px/1.2 var(--font-mono); color: var(--good);
  background: #E4F5EC; border-radius: var(--pill); padding: 3px 8px; }

.torn { display: grid; gap: 8px; }
.torn__row { display: grid; grid-template-columns: minmax(120px, 26%) 1fr 44px; align-items: center; gap: var(--space-3); }
.torn__label { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torn__bar { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.torn__bar i { display: block; height: 100%; width: var(--w); border-radius: 7px;
  background: linear-gradient(90deg, var(--accent), #6C93FF); transform-origin: left center; }
.torn__val { font: 600 12.5px/1 var(--font-mono); color: var(--text-2); text-align: right; }
@media (max-width: 560px) { .torn__row { grid-template-columns: 1fr 40px; }
  .torn__label { grid-column: 1 / -1; } }

/* честный статус кейса: расчётная модель против реального внедрения (P0-02) */
.case-status-badge { display: inline-block; margin-bottom: 10px; font: 600 11.5px/1 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); padding: 6px 11px; }
.case-status-badge--pilot { color: var(--warn); background: #FDF1E7; border-color: #F5D5BC; }

/* P0-10: сетки детальной страницы решения - классами, не инлайном
   (инлайновый grid-template-columns перебивал медиа-запросы и давал
   горизонтальный скролл документа 502px при вьюпорте 390px) */
.journey--4 { grid-template-columns: repeat(4, 1fr); }
.svcrow--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .journey--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .journey--4, .svcrow--2 { grid-template-columns: 1fr; }
}

/* P0-10: метрики кейса переносятся, а не уезжают за край (на 390px из четырёх
   были видны две). Инлайновый gap убран - иначе медиа-запрос его не перебивает. */
.mcard__metrics { flex-wrap: wrap; }
.mcard__metrics--wide { border-top: 0; padding-top: var(--space-4); gap: var(--space-6); }
@media (max-width: 640px) {
  /* суммы вида «14 016 000 ₽» не влезают в две колонки на 390px - одна колонка */
  .mcard__metrics--wide { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .mcard__metrics--wide > * { min-width: 0; }
  .mcard__metrics--wide .mcard__mv { font-size: 22px !important; }
}

/* P0-10: до 1120px разделы живут в панели-меню, а не в сжатой строке */
.iconbtn--burger { display: none; }
@media (max-width: 1120px) {
  .topnav { display: none; }
  .iconbtn--burger { display: inline-flex; }
}
.navdrawer { display: grid; gap: 2px; }
.navdrawer a { display: block; padding: 12px 10px; border-radius: 10px; text-decoration: none;
  color: var(--text); font: 500 16px/1.2 var(--font-body); }
.navdrawer a:hover { background: var(--bg); }
.navdrawer a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* ---------- вход: смысл до формы, скелет вместо вспышки гостя ---------- */
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-6); align-items: start; max-width: 1040px; }
.auth-intro h1 { font-size: clamp(26px, 3vw, 34px); }
.auth-benefits { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 12px; }
.auth-benefits li { display: grid; gap: 2px; font-size: 14px; color: var(--text-2);
  padding-left: 26px; position: relative; }
.auth-benefits li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent); }
.auth-benefits b { color: var(--text); font-size: 15px; }
.auth-note { margin-top: var(--space-4); font-size: 13px; color: var(--text-3); }
.auth-card { min-height: 320px; }
.auth-skeleton { display: grid; gap: 14px; padding: var(--space-2) 0; }
.auth-skeleton span { display: block; height: 44px; border-radius: 10px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: auth-shine 1.2s linear infinite; }
.auth-skeleton span:first-child { height: 40px; width: 60%; }
@keyframes auth-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .auth-skeleton span { animation: none; } }
.auth-form label { font: 500 13px/1.2 var(--font-body); color: var(--text-2); }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } }

/* спокойное подтверждение вместо «полёта в корзину» (B2B, не супермаркет) */
.proj-toast { position: fixed; right: 22px; bottom: 92px; z-index: 95; max-width: 320px;
  background: var(--ink); color: #F2F5FA; border-radius: 12px; padding: 12px 16px;
  font: 500 14px/1.4 var(--font-body); box-shadow: 0 14px 40px rgba(15, 23, 42, .28); }
@media (max-width: 560px) { .proj-toast { right: 12px; left: 12px; max-width: none; bottom: 84px; } }

/* источник цифр витрины виден рядом с ними */
.statrow__src { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--text-3); text-align: left; }
.statrow__src a { color: var(--accent); text-decoration: none; }
.statrow__src a:hover { text-decoration: underline; }

/* теги решения отдельной строкой: раньше стояли на месте подписи к цифре эффекта */
.mcard__tags { margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); }

/* ---------- карусель изображений модели (пин 71) ----------
   Свайп нативный: scroll-snap по горизонтали, кнопки и точки - для мыши
   и клавиатуры. Каждый слайд подписан своим происхождением. */
.gal { position: relative; }
.gal__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--radius); background: var(--white); }
.gal__track::-webkit-scrollbar { display: none; }
.gal__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gal__slide { margin: 0; scroll-snap-align: start; }
.gal__slide img { display: block; width: 100%; aspect-ratio: 16/11; max-height: 460px;
  object-fit: contain; background: #fff; padding: var(--space-4); }
.gal__cap { padding: 0 var(--space-2) var(--space-2); font-size: 12px; line-height: 1.4;
  color: var(--text-3); }
.gal__nav { position: absolute; top: 40%; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.94); color: var(--text);
  font: 600 16px/1 var(--font-body); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow-card); }
.gal__nav--prev { left: 10px; }
.gal__nav--next { right: 10px; }
.gal__nav:hover { border-color: var(--accent); color: var(--accent); }
.gal__dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--space-2); }
.gal__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0;
  background: var(--border); cursor: pointer; }
.gal__dot.is-on { background: var(--accent); width: 20px; border-radius: var(--pill); }
@media (max-width: 640px) { .gal__nav { display: none; } }

/* ---------- карточка модели: панели в одну колонку во всю ширину (пины 73-76) ---------- */
.detail-stack { display: grid; gap: var(--space-3); }
.detail-stack .panel { margin-top: 0; }
.detail-stack .speclist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .detail-stack .speclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .detail-stack .speclist { grid-template-columns: minmax(0, 1fr); } }

/* финальная плашка карточки модели: текст слева, а не по центру (пин 77) */
.cta-final { text-align: left; }
.cta-final__lead { color: var(--text-2); margin: var(--space-2) 0 var(--space-4); max-width: none; }

/* плитки типов техники: подписи в одну сетку, чтобы карточки не «прыгали» (пин 68) */
.typecard__t { min-height: 1.3em; }
.typecard__h { min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

/* заголовок раздела консалтинга в одну строку (пин 64): общее правило h2
   ограничивает ширину 24 символами и рвало его на две строки */
#journey h2 { max-width: none; }

/* Масштаб пэкшотов выровнен в самих файлах (tools/normalize_tiles.py):
   объект обрезан по своим границам, вписан в общий бокс и поставлен на общую
   базовую линию. Поэтому здесь никаких индивидуальных коэффициентов. */

/* ---------- блок «экономический эффект» на широкой панели (правка 08-11) ----------
   Раньше блок жил в узкой колонке; после перевода панелей во всю ширину поля,
   шкала и график растянулись в тонкие полосы. Здесь: поля в четыре столбца,
   итоги карточками, а запас прочности и график - рядом. */
.detail-stack .mc-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-stack .mc-out { gap: var(--space-4); }
.detail-stack .mc-out > div { background: var(--bg); border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4); }
.effect-cols { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--space-5); align-items: start; margin-top: var(--space-4);
  border-top: 1px solid var(--border); padding-top: var(--space-4); }
.effect-cols .sens { margin: 0; }
@media (max-width: 900px) {
  .detail-stack .mc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effect-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ---------- график накопленной экономии ---------- */
.pbc { min-width: 0; }
.pbc[hidden] { display: none; }
.pbc__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--space-3);
  font: 600 14px/1.3 var(--font-body); }
.pbc__t b { font: 600 13px/1.3 var(--font-body); color: var(--accent); }
.pbc__box { position: relative; }
.pbc__svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.pbc__grid { stroke: var(--border); stroke-width: 1; }
.pbc__tick { font: 400 11px/1 var(--font-body); fill: var(--text-3); }
.pbc__capex { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pbc__capex-label { font: 500 11px/1 var(--font-body); fill: var(--text-3); }
.pbc__fill { fill: var(--good); opacity: .14; }
.pbc__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pbc__dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.pbc__cursor { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pbc__hit { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.pbc__tip { position: absolute; top: 6px; transform: translateX(-50%); pointer-events: none;
  background: var(--ink); color: #F2F5FA; border-radius: 10px; padding: 8px 11px;
  font: 400 12px/1.45 var(--font-body); white-space: nowrap; box-shadow: var(--shadow-lift); }
.pbc__tip[hidden] { display: none; }
.pbc__tip b { display: block; font: 700 13px/1.2 var(--font-mono); }
.pbc__tip span { display: block; color: rgba(242,245,250,.75); }
.pbc__legend { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  margin: var(--space-2) 0 0; font-size: 11.5px; color: var(--text-3); }
.pbc__key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.pbc__key--line { background: var(--accent); }
.pbc__key--capex { background: repeating-linear-gradient(90deg, var(--text-3) 0 4px, transparent 4px 7px); }
.pbc__key--fill { background: var(--good); opacity: .5; height: 10px; border-radius: 3px; }

/* На телефоне график сжимался до нечитаемого: даём ему собственную
   горизонтальную прокрутку вместо уменьшения подписей (08-11). */
@media (max-width: 760px) {
  .pbc__box { overflow-x: auto; }
  .pbc__svg { min-width: 460px; }
  .pbc__tip { white-space: normal; max-width: 220px; }
}

/* сумма экономии не разрывается между рублями и «год» */
.prod__payback-sum { white-space: nowrap; }

/* Отрицательная экономия не может быть зелёной: у дорогих моделей подписка
   съедает эффект, и это должно быть видно сразу (08-11). */
.prod__payback--warn { background: #FFF4E0; border-color: #F0D8AC; }
.prod__payback--warn b { color: #7A4B00; }
.prod__payback--warn .prod__payback-sum { color: var(--warn); font-weight: 600; }


/* ---------- баннеры первого экрана в формате сториз ---------- */
.stories { position: relative; overflow: hidden; }
/* Пэкшоты лежат на белом и «вписываются» в страницу через mix-blend-mode:
   multiply. Трек с transform создаёт свой контекст наложения, поэтому смешивать
   белое ему не с чем - подкладываем фон сайта прямо под слайды (замечание №86). */
.stories__track { display: flex; background: var(--bg);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .stories__track { transition: none; } }
/* overflow: картинка соседнего баннера не должна выезжать за границу своего
   слайда - анимация покачивания заступала на линию перехода */
.story { flex: 0 0 100%; min-width: 100%; overflow: hidden; }
.story__t { font: 700 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); letter-spacing: -0.02em;
  margin: 0 0 var(--space-3); max-width: 18ch; }
.stories__barwrap { padding-top: var(--space-3); }
.stories__bars { display: flex; gap: 6px; }
.stories__bar { flex: 1; border: 0; background: none; padding: 0; cursor: pointer; height: 14px; }
.stories__bar > span { display: block; height: 3px; border-radius: 2px; background: var(--border);
  overflow: hidden; position: relative; }
.stories__bar.is-done > span { background: var(--accent); opacity: .45; }
.stories__bar.is-on > span::after { content: ''; position: absolute; inset: 0;
  background: var(--accent); transform-origin: left; animation: story-fill 15s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .stories__bar.is-on > span::after { animation: none; }
}
@keyframes story-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stories__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--white); color: var(--text); font-size: 17px; cursor: pointer;
  box-shadow: var(--shadow-card); opacity: 0; transition: opacity .2s ease; }
.stories:hover .stories__nav, .stories__nav:focus-visible { opacity: 1; }
.stories__nav--prev { left: 14px; }
.stories__nav--next { right: 14px; }
@media (max-width: 900px) {
  /* стрелки-накладки перекрывали кнопки слайда: на узком экране листаем
     свайпом и полосками прогресса */
  .stories__nav { display: none; }
  .story__t { max-width: none; }
}

/* слайд с фотографией: снимок показываем карточкой, режим пэкшота
   (mix-blend-mode) фотографию бы затемнил */
.story__photo { display: flex; justify-content: center; align-items: center; }
/* высота как у пэкшотов, иначе фото-слайд растягивал всю карусель */
.story__photo img { width: 100%; max-width: 520px; max-height: 380px; aspect-ratio: 4/3;
  object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); }