/*
  =====================================================================
  TESART — styles.css
  Единая система стилей сайта (аналог общего .m-файла с константами и
  функциями оформления в MATLAB — только здесь это CSS-переменные и классы).
  Без препроцессоров и внешних библиотек — чистый CSS3. Все комментарии — на русском.
  =====================================================================

  КОМПОНЕНТНЫЙ УКАЗАТЕЛЬ (component index) — для быстрого поиска класса.
  Ищите заголовок секции ниже по номеру.

   1. Токены (переменные) и @font-face fallback
   2. Reset и типографика по умолчанию
   3. Доступность (skip-link, focus-visible, sr-only, prefers-reduced-motion)
   4. Контейнеры и сетка страницы (.container, .section, .grid-*)
   5. Кнопки (.btn, .btn--primary/--blue/--outline/--ghost-dark, .btn--full)
   6. Мелкие элементы (.eyebrow, .chip, .badge, .icon, тег .tag--*)
   7. Капсульный мотив знака (.capsules, .capsule)
   8. Шапка сайта (.site-header, .nav*, .burger-btn, .mobile-drawer)
   9. Подвал сайта (.site-footer, .footer-col, .footer-links)
  10. CTA-секция (.cta-band)
  11. Хиро главной страницы (.hero, .stat*)
  12. Карточка продукта и сетка карточек (.product-card, .card-grid)
  13. Блок «Applications» (.apps-grid)
  14. Нумерованный список «Why» (.why-list)
  15. Список преимуществ с квадратным маркером (.feature-list)
  16. Блок «Our spectrum» (.spectrum*, .band-btn*, .across-strip)
  17. Хлебные крошки (.breadcrumb)
  18. Сайдбар каталога продуктов (.sidebar*)
  19. Хиро категории (.category-hero, --text-right)
  20. Хиро продукта: галерея + ключевые характеристики (.product-hero*, .gallery*, .key-specs*, .variant-pills*)
  21. Липкое подменю страницы продукта (.subnav*)
  22. Таблицы: .table-wrap, .spec-table*, .model-table*, .filter-pills*, .data-table
  23. Список загрузок (.downloads*)
  24. Блок связанных продуктов (.related) — переиспользует .card-grid
  25. Формы (.form*, [data-mailto])
  26. Страница 404 (.error-page*)
  27. Сетки контента и служебные обёртки (.grid-2/--end/--start/--wide-right, .grid-3,
      .stack-lg, .content-block, .head-row, .title-4/--5, .meta-mono, .note-panel, .plain-list)
  28. Виджет обратной связи (.feedback-fab, .feedback-dialog*, .feedback-drop, .feedback-attachment*)
  29. Админка обращений /admin (.admin-*) — русский интерфейс, переиспользует .data-table, .form*, .btn*
  30. Кнопка «наверх» (.back-to-top, .is-visible)
  31. Доска обращений /board/ (.board-*) и кнопка «Обращения» (.board-fab) — служебные, для коллег
  =====================================================================
*/

/* =====================================================================
   1. ТОКЕНЫ (переменные оформления)
   Совпадают с палитрой из design/build_design.py — не менять без согласования дизайна.
   ===================================================================== */
:root {
  /* Цвета — светлая тема */
  --color-ink: #0B0E13;      /* почти чёрный: основной текст, тёмные плашки */
  --color-ink-2: #39424E;    /* вторичный текст на светлом фоне */
  --color-muted: #6A7481;    /* подписи, сноски */
  --color-line: #D8DEE5;     /* линии-разделители на светлом */
  --color-paper: #EDEDEF;    /* светлая подложка в тон фона фото товаров (заявка 20261002-081457-6ec0c5; было #EEF1F3) */
  --color-white: #FFFFFF;
  --color-brand: #348BCB;    /* фирменный синий */
  --color-brand-dark: #1E6AA6; /* синий для мелкого текста/ссылок (контраст на белом) */
  --color-sky: #7EBFE9;
  --color-ice: #D8E6F5;

  /* Цвета — тёмные секции */
  --color-dark: #0A0D12;
  --color-dark-2: #121822;
  --color-dark-line: #263140;
  --color-dark-text-2: #C3CBD5;
  --color-dark-text-3: #AEB7C2;
  --color-dark-text-4: #8793A2;
  --color-dark-text-5: #6F7B8A;

  /* Шрифты */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Моноширинный шрифт отключён по всему сайту — везде один шрифт Archivo (обратная связь 20261001-082955-1e9ba5).
     Токен оставлен, чтобы не трогать все места использования; вернуть: 'IBM Plex Mono', Menlo, Consolas, monospace
     (и добавить IBM+Plex+Mono в ссылку Google Fonts в src/layout.html) */
  --font-mono: var(--font-body);

  /* Сетка страницы */
  --container-max: 1440px;
  --side-pad: 56px;      /* десктоп */
  --side-pad-mobile: 20px;

  /* Вертикальные ритмы секций (96–120px на десктопе по спеку) */
  --section-pad-y: 112px;
  --section-pad-y-mobile: 44px;

  /* Прочее */
  --focus-ring: 0 0 0 3px rgba(52, 139, 203, 0.45);
  --transition-fast: 0.2s ease;
}

/* =====================================================================
   2. RESET И БАЗОВАЯ ТИПОГРАФИКА
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Атрибут hidden всегда скрывает элемент — даже если у его класса задан display:flex/grid
   (иначе, например, сообщения формы обратной связи были видны постоянно) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-brand-dark);
  text-decoration: none;
}
/* Наведение на ссылку — фирменный синий (обратная связь 20261002-044645-ce4ecd).
   Раньше было почти чёрное --color-ink: на тёмных блоках (футер) ссылка при наведении пропадала */
a:hover { color: var(--color-brand); }

button {
  font-family: inherit;
  cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

/* Заголовки — Archivo Expanded (font-stretch расширенный), полужирный, плотный трекинг */
h1, h2, h3, h4,
.font-display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}

.font-mono { font-family: var(--font-mono); }

/* =====================================================================
   3. ДОСТУПНОСТЬ
   ===================================================================== */

/* Ссылка "Skip to main content" — видна только при фокусе с клавиатуры */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 12px 18px;
  font-size: 14px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Единый видимый focus-ring для клавиатурной навигации на всех интерактивных элементах */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 1px;
}

/* Уважаем prefers-reduced-motion: отключаем анимации/переходы и плавный скролл */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   4. КОНТЕЙНЕРЫ И СЕТКА СТРАНИЦЫ
   ===================================================================== */

/* .container — центрирующая обёртка с максимальной шириной и боковыми отступами.
   Используется внутри каждой секции (.hero, .section и т.д.), а не вместо них. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}
@media (max-width: 599px) {
  .container { padding-inline: var(--side-pad-mobile); }
}

/* .section — универсальная вертикальная секция страницы (десктоп 96–120px, мобильный 44px) */
.section {
  padding-block: var(--section-pad-y);
}
.section--tight { padding-block: 72px; }
.section--paper { background: var(--color-paper); }
.section--dark { background: var(--color-dark); color: var(--color-white); }
.section--white { background: var(--color-white); }
@media (max-width: 599px) {
  .section { padding-block: var(--section-pad-y-mobile); }
  .section--tight { padding-block: 36px; }
}

/* Заголовочный блок "eyebrow + h2", часто предшествует сетке карточек */
.heading-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Готовые размеры заголовков секций (h2), чтобы не писать font-size инлайн на каждой странице */
.title-2 { font-size: 46px; line-height: 1.08; }
.title-3 { font-size: 42px; line-height: 1.1; }
.lead-text { font-size: 18px; line-height: 1.6; color: var(--color-ink-2); }
@media (max-width: 599px) {
  .title-2 { font-size: 28px; line-height: 1.12; }
  .title-3 { font-size: 26px; line-height: 1.14; }
}

/* Обёртки конкретных секций главной страницы (структура — просто вертикальный стек с отступом) */
.portfolio { display: flex; flex-direction: column; gap: 56px; }
.applications-section { display: flex; flex-direction: column; gap: 48px; }

/* Секция "Why TESART": фото слева, текст справа (на мобильном — фото сверху, см. .hero__media) */
.why-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.why-section__media { min-height: 760px; }
.why-section__content { padding: 104px 72px 96px; display: flex; flex-direction: column; gap: 40px; }
@media (max-width: 1199px) {
  .why-section { grid-template-columns: 1fr; }
  .why-section__media { min-height: 320px; order: -1; }
  .why-section__content { padding: 56px var(--side-pad); }
}
@media (max-width: 599px) {
  .why-section__content { padding: 40px var(--side-pad-mobile); gap: 24px; }
}

/* Универсальная обёртка "картинка на всю область контейнера" (object-fit: cover) */
.media-fill { position: relative; overflow: hidden; }
.media-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   5. КНОПКИ
   Высота 48px, острые углы (radius 0), без тени. Модификаторы — по фону, на котором стоит кнопка.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn .icon { flex: none; }

.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}
.btn--primary:hover { background: var(--color-ink-2); color: var(--color-white); }

.btn--blue {
  background: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}
.btn--blue:hover { background: var(--color-brand-dark); color: var(--color-white); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); }

.btn--ghost-dark {
  background: transparent;
  color: var(--color-white);
  border-color: #4A5566;
}
/* Наведение: текст остаётся белым (явно, иначе его перекрашивает общее a:hover в почти чёрный),
   фон слегка светлеет — по аналогии с «Get in touch» (.btn--blue:hover) */
.btn--ghost-dark:hover { background: #222A35; color: var(--color-white); border-color: var(--color-white); }

.btn--full { width: 100%; }

.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }

/* =====================================================================
   6. МЕЛКИЕ ЭЛЕМЕНТЫ: eyebrow / chip / badge / icon / tag
   ===================================================================== */

/* Мелкая надпись-«бровь» перед заголовком секции: моно, капс, широкий трекинг */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow--brand { color: var(--color-brand-dark); }
.eyebrow--sky { color: var(--color-sky); }
.eyebrow--dark { color: var(--color-dark-text-5); } /* eyebrow на тёмном фоне (подвал, CTA) */

/* Чип — короткая мономаркировка диапазона (C / Ku / Ka …) в карточках и таблицах моделей */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border: 1px solid var(--color-line);
  color: var(--color-ink-2);
  background: transparent;
}
.chip--dark { border-color: var(--color-dark-line); color: var(--color-sky); }

/* Бейдж "In development" — плашка на изображении карточки/хиро */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-white);
  color: var(--color-brand-dark);
  padding: 6px 8px;
  border: 1px solid var(--color-ice);
}

/* Бейдж внутри заголовка (напр. «Mobility · In development» на Applications):
   inline-flex по умолчанию садится на базовую линию и свисает вниз —
   центрируем по высоте заглавных букв заголовка */
h1 .badge, h2 .badge, h3 .badge {
  vertical-align: middle;
  position: relative;
  top: -5px;
  margin-left: 8px;
}
@media (max-width: 599px) {
  h1 .badge, h2 .badge, h3 .badge { top: -3px; }
}

/* Иконка (стрелка, скачивание …) — просто нормализует размер inline SVG */
.icon { display: inline-block; vertical-align: middle; flex: none; }

/* Теги статуса в блоке "Our spectrum" — Standard / On request (класс --per-project) / Custom plan / In development */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 8px;
}
.tag--standard { background: var(--color-brand); color: var(--color-white); border: 1px solid var(--color-brand); }
.tag--per-project { background: transparent; color: var(--color-sky); border: 1px solid var(--color-sky); }
.tag--custom-plan { background: transparent; color: var(--color-dark-text-3); border: 1px solid #4A5566; }
.tag--in-development { background: transparent; color: var(--color-sky); border: 1px dashed var(--color-sky); }

/* =====================================================================
   7. КАПСУЛЬНЫЙ МОТИВ ЗНАКА TESART (декоративный ряд "капсул")
   Используется в CTA-секции. Ширины заданы позиционно (nth-child), как в фирменном знаке
   (узкие по краям, широкие в центре — 11 капсул). Не путать с .band-btn__capsule
   в блоке "Our spectrum" — там ширина каждой капсулы зависит от данных (число продуктов).
   ===================================================================== */
.capsules {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.capsules .capsule {
  height: 150px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--color-brand) 0%, var(--color-brand) 44%, var(--color-sky) 44%, rgba(126, 191, 233, 0) 100%);
}
.capsules .capsule:nth-child(1),  .capsules .capsule:nth-child(11) { width: 3px; }
.capsules .capsule:nth-child(2),  .capsules .capsule:nth-child(10) { width: 6px; }
.capsules .capsule:nth-child(3),  .capsules .capsule:nth-child(9)  { width: 10px; }
.capsules .capsule:nth-child(4),  .capsules .capsule:nth-child(8)  { width: 13px; }
.capsules .capsule:nth-child(5),  .capsules .capsule:nth-child(7)  { width: 18px; }
.capsules .capsule:nth-child(6)                                    { width: 22px; }

/* Крупный вариант — CTA-секция (scale 1.5 в дизайне) */
.capsules--lg { gap: 14px; opacity: 0.95; }
.capsules--lg .capsule { height: 225px; }
.capsules--lg .capsule:nth-child(1),  .capsules--lg .capsule:nth-child(11) { width: 5px; }
.capsules--lg .capsule:nth-child(2),  .capsules--lg .capsule:nth-child(10) { width: 10px; }
.capsules--lg .capsule:nth-child(3),  .capsules--lg .capsule:nth-child(9)  { width: 14px; }
.capsules--lg .capsule:nth-child(4),  .capsules--lg .capsule:nth-child(8)  { width: 19px; }
.capsules--lg .capsule:nth-child(5),  .capsules--lg .capsule:nth-child(7)  { width: 26px; }
.capsules--lg .capsule:nth-child(6)                                        { width: 34px; }

/* На планшете/мобильном декоративные капсулы в CTA прячем — освобождаем место тексту (как в дизайне) */
@media (max-width: 899px) {
  .cta-band__capsules, .cta-band__mark { display: none; }
}

/* =====================================================================
   8. ШАПКА САЙТА
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__logo { display: inline-flex; flex: none; margin-right: 32px; } /* доп. отступ от меню (к gap 24px) — заявка 20261001-090918-79d408 */
.site-header__logo img { height: 48px; width: auto; } /* высота = высоте кнопки «Get in touch» (.btn, 48px) */

.nav { flex: 1 1 auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-link {
  display: block;
  padding: 26px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap; /* пункт меню никогда не переносится на 2 строки (заявка 20261001-100822-d81c20) */
}
.nav-link:hover { color: var(--color-brand); }
/* Активный пункт меню — build.py добавляет aria-current="page" по значению meta "nav:" */
.nav-link[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom-color: var(--color-ink);
}
/* Резерв ширины под жирный вариант текста: невидимая копия подписи (из data-nav) с весом 600
   и нулевой высотой. Пункт всегда занимает ширину жирного текста, поэтому при выделении
   активного раздела соседние пункты не сдвигаются (заявка 20261001-093616-6a7d1c). */
.nav-link[data-nav]::after {
  content: attr(data-nav);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* Плавающая полоска активного раздела (заявка 20261001-095213-9bb60a).
   main.js (initNavIndicator) добавляет в .nav-list элемент .nav-indicator и класс .nav--animated
   на .nav. Тогда статичное подчёркивание пункта скрывается, а полоска при переходе на другой
   раздел «перепрыгивает» со старого пункта на новый с резиновым (elastic) изингом.
   Без JS остаётся обычное подчёркивание через border-bottom (правило выше). */
.nav-list { position: relative; }
.nav--animated .nav-link[aria-current="page"] { border-bottom-color: transparent; }
.nav-indicator {
  position: absolute;
  left: 0;
  top: 0;                   /* вертикаль задаёт main.js: низ полоски = низ кнопки «Get in touch» (заявка 20261002-083600-6d9516) */
  width: 1px;               /* реальная ширина задаётся через transform: scaleX(ширина текста + поля) */
  height: 2px;
  background: var(--color-ink);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: 0;
}
.nav-indicator.is-visible { opacity: 1; }
.nav-indicator.is-moving {
  /* Резервный изинг (лёгкий перелёт) для браузеров без linear() */
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Резиновый изинг: затухающее колебание 1 − e^(−8t)·cos(13.3t), перелёт ≈18 %, ≈2 «отскока» */
  transition: transform 0.9s linear(0, 0.226, 0.473, 0.702, 0.893, 1.034, 1.124, 1.169, 1.179, 1.163,
    1.133, 1.096, 1.06, 1.028, 1.003, 0.986, 0.977, 0.973, 0.974, 0.978, 0.983, 0.989, 0.994, 0.998,
    1.001, 1.003, 1.004, 1.004, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1, 0.999, 0.999, 0.999, 1, 1, 1);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

/* Кнопка-гамбургер: три полоски, показывается только на планшете/мобильном */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.burger-btn__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
}
/* Когда меню открыто — превращаем гамбургер в крестик */
.burger-btn[aria-expanded="true"] .burger-btn__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn[aria-expanded="true"] .burger-btn__bar:nth-child(2) { opacity: 0; }
.burger-btn[aria-expanded="true"] .burger-btn__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Выезжающая мобильная панель навигации */
.mobile-drawer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px var(--side-pad-mobile) 32px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer__list { display: flex; flex-direction: column; }
.mobile-drawer__list .nav-link { padding: 14px 0; border-bottom: 1px solid var(--color-line); }

/* Бургер включается на ширине <1024px (заявка 20261001-100822-d81c20): полная строка меню
   (логотип + 5 пунктов + EN·RU + «Get in touch») требует ≈1000px, и на планшетной ширине пункты
   переносились на 2 строки («Custom Engineering»), шапка расползалась, а полоска активного
   раздела не совпадала с текстом. Ступени ниже подобраны так, чтобы строка меню всегда
   помещалась с запасом: ≥1366 — полный вид, 1200–1365 и 1024–1199 — уплотнённые варианты. */
@media (min-width: 1024px) {
  .mobile-drawer { display: none !important; } /* панель нужна только там, где есть бургер */
}
@media (max-width: 1365px) {
  .nav-list { gap: 24px; }
  .site-header__tools { gap: 14px; }
  .site-header__logo { margin-right: 12px; }
  .site-header__logo img { height: 40px; }
}
@media (max-width: 1199px) {
  .site-header__inner { gap: 20px; }
  .site-header__logo img { height: 36px; } /* на небольшом десктопе логотип чуть меньше, чтобы меню уместилось */
  .nav-list { gap: 16px; }
  .nav-link { font-size: 14px; }
}
@media (max-width: 1023px) {
  .nav { display: none; }               /* строка меню скрыта — пункты в выезжающей панели */
  .burger-btn { display: flex; }
  .site-header__inner { gap: 16px; }
  .site-header__logo { margin-right: 0; }
  .site-header__logo img { height: 30px; }
  .mobile-drawer { padding-inline: var(--side-pad); } /* панель выровнена по логотипу (.container) */
}
@media (max-width: 599px) {
  .site-header__cta { display: none; }  /* кнопка "Get in touch" уходит в панель */
  .site-header__inner { height: 64px; }
  .site-header__logo img { height: 24px; }
  .mobile-drawer { padding-inline: var(--side-pad-mobile); }
}

/* =====================================================================
   9. ПОДВАЛ САЙТА
   ===================================================================== */
.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding-top: 72px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col--brand { gap: 20px; }
/* align-self: flex-start — иначе flex-колонка растягивает картинку на всю ширину и логотип искажается */
.site-footer__logo { height: 30px; width: auto; align-self: flex-start; }
.site-footer__blurb { font-size: 14px; line-height: 1.6; color: var(--color-dark-text-3); max-width: 300px; }
.footer-col__title { margin-bottom: 4px; }
.footer-links a {
  display: block;
  padding: 2px 0;
  font-size: 14px;
  color: var(--color-dark-text-3);
}
/* Колонки Products/Company в подвале при наведении — белые (обратная связь 20261002-045039-2f06f7) */
.footer-links a:hover { color: var(--color-white); }
.site-footer__contact { font-size: 14px; color: var(--color-white); margin: 0; }
.site-footer__contact a { color: var(--color-white); }
/* Контакты в подвале при наведении — голубой --color-sky (обратная связь 20261002-045039-2f06f7) */
.site-footer__contact a:hover { color: var(--color-sky); }
.site-footer__address { font-size: 14px; line-height: 1.6; color: var(--color-dark-text-3); margin: 0; }

.site-footer__bottom {
  margin-top: 64px;
  padding: 24px var(--side-pad) 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-dark-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-dark-text-5);
  margin: 0;
}
.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dark-text-5);
  margin: 0;
}

@media (max-width: 1199px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 599px) {
  .site-footer { padding-top: 44px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
}

/* =====================================================================
   10. CTA-СЕКЦИЯ ("Let's discuss your project")
   ===================================================================== */
.cta-band {
  background: var(--color-dark);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-dark-line);
}
.cta-band__inner {
  padding-block: 96px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.cta-band__content { display: flex; flex-direction: column; gap: 24px; }
.cta-band__title { font-size: 48px; line-height: 1.08; color: var(--color-white); }
.cta-band__text { font-size: 18px; line-height: 1.6; color: var(--color-dark-text-2); max-width: 620px; margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cta-band__capsules { justify-content: flex-end; }
/* Фирменный знак (PNG из брендбука, прозрачный фон) справа в CTA — заменил CSS-капсулы по заявке 20261001-095918-ec93d7 */
.cta-band__mark { justify-self: end; width: 100%; max-width: 340px; height: auto; }

@media (max-width: 899px) {
  .cta-band__inner { grid-template-columns: 1fr; padding-block: 56px; gap: 32px; }
  .cta-band__title { font-size: 32px; }
}
@media (max-width: 599px) {
  .cta-band__inner { padding-block: 44px; }
  .cta-band__title { font-size: 28px; }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; }
}

/* =====================================================================
   11. ХИРО ГЛАВНОЙ СТРАНИЦЫ + СТАТИСТИКА
   ===================================================================== */
/* Хиро на всю ширину окна (фон и фото — до краёв), но текст и левый край фото стоят на сетке
   .container: колонки текст 1fr · зазор 48px · фото 1fr — те же, что у .category-hero и .grid-2 ниже
   (обратная связь 20261002-040708-d5678d: при прежних 1fr/0.9fr фото хиро стояло правее картинок секций),
   поэтому фото хиро начинается на той же вертикали, что и картинки/правые колонки секций ниже, а текст — по логотипу.
   Колонки: [поле до контейнера] [текст] [зазор 48px] [фото до правого края окна].
   Проценты в grid-template-columns считаются от ширины самой секции (без полосы прокрутки). */
.hero {
  display: grid;
  grid-template-columns:
    calc(max(0px, (100% - var(--container-max)) / 2) + var(--side-pad))
    calc((min(100%, var(--container-max)) - 2 * var(--side-pad) - 48px) / 2)
    48px
    minmax(0, 1fr);
  background: var(--color-paper);
}
.hero__content {
  grid-column: 2;
  padding: 88px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__title { font-size: 60px; line-height: 1.04; }
.hero__text { font-size: 19px; line-height: 1.6; color: var(--color-ink-2); max-width: 620px; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media {
  grid-column: 4;
  position: relative;
  overflow: hidden;
  min-height: 480px;
}
/* Одинаковая высота хиро разделов Products, Applications, Custom Engineering (обратная связь
   20261002-025816-0e4d3b): высота больше не зависит от числа строк заголовка/текста, страница ниже
   не «прыгает» при переходе между разделами. Текст прижат к верху (padding-top 88px, как на всех хиро),
   поэтому заголовок начинается на одной высоте и здесь, и на Company/главной (у них высота по контенту).
   Только десктоп: в одну колонку (<1200px) высота по контенту. */
@media (min-width: 1200px) {
  .hero--uniform { min-height: 600px; }
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--color-ink);
}
/* Цифры статистики — фирменный широкий шрифт, как в макете */
.stat__value { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; letter-spacing: -0.012em; font-size: 30px; }
.stat__label { font-size: 14px; color: var(--color-ink-2); }

@media (max-width: 1199px) {
  .hero { grid-template-columns: 1fr; }
  /* Одна колонка: сбрасываем привязку к колонкам десктопной сетки, отступ текста — как у .container */
  .hero__content, .hero__media { grid-column: auto; }
  .hero__content { padding: 88px var(--side-pad) 64px; }
  /* Как в утверждённом мобильном макете: сначала заголовок и кнопки, фото антенны — под ними */
  .hero__media { min-height: 360px; }
  .hero__title { font-size: 46px; }
}
@media (max-width: 599px) {
  .hero__content { padding: 36px var(--side-pad-mobile) 32px; gap: 20px; }
  .hero__title { font-size: 32px; line-height: 1.08; }
  .hero__text { font-size: 16px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
  .stat__value { font-size: 24px; }
}

/* =====================================================================
   12. КАРТОЧКА ПРОДУКТА И СЕТКА КАРТОЧЕК
   ===================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}
.product-card__media {
  position: relative;
  height: 236px;
  background: var(--color-paper);
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Картинка карточки — ссылка на тот же раздел, что и заголовок (обратная связь 20261002-030112-1f3411).
   tabindex="-1" + aria-hidden в разметке: для клавиатуры и скринридеров ссылка одна — заголовок. */
.product-card__media-link { display: block; width: 100%; height: 100%; }
.product-card__media-link img { transition: transform 0.3s ease; }
.product-card__media-link:hover img { transform: scale(1.03); }
.product-card__badge { position: absolute; top: 14px; left: 14px; }
.product-card__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.product-card__title { font-size: 21px; line-height: 1.2; }
.product-card__text { font-size: 15px; line-height: 1.55; color: var(--color-ink-2); flex-grow: 1; margin: 0; }
.product-card__bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Вся карточка — кликабельная зона (ссылка оборачивает контент; заголовок остаётся видимой ссылкой) */
.product-card__title a { color: var(--color-ink); }
.product-card__title a:hover { color: var(--color-brand); }

@media (max-width: 1199px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .card-grid { grid-template-columns: 1fr; }
  .product-card__media { height: 200px; }
}

/* =====================================================================
   13. БЛОК "APPLICATIONS"
   ===================================================================== */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-right: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.apps-grid__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 30px;
  border-left: 1px solid var(--color-line);
}
.apps-grid__num { font-family: var(--font-mono); font-size: 12px; color: var(--color-brand-dark); }
.apps-grid__title { font-size: 19px; line-height: 1.25; }
.apps-grid__text { font-size: 15px; line-height: 1.55; color: var(--color-ink-2); flex-grow: 1; margin: 0; }
.apps-grid__tags { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--color-muted); }

@media (max-width: 1199px) {
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: none; }
  .apps-grid__item:nth-child(2n) { border-right: 1px solid var(--color-line); }
}
@media (max-width: 599px) {
  .apps-grid { grid-template-columns: 1fr; border-right: 1px solid var(--color-line); }
}

/* =====================================================================
   14. НУМЕРОВАННЫЙ СПИСОК "WHY" (почему TESART)
   ===================================================================== */
.why-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-line); }
.why-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid var(--color-line);
}
.why-item__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-brand-dark); padding-top: 4px; }
.why-item__body { display: flex; flex-direction: column; gap: 8px; }
.why-item__title { font-size: 21px; }
.why-item__text { font-size: 16px; line-height: 1.6; color: var(--color-ink-2); margin: 0; }

@media (max-width: 599px) {
  .why-item { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0; }
  .why-item__title { font-size: 16px; }
}

/* =====================================================================
   15. СПИСОК ПРЕИМУЩЕСТВ С КВАДРАТНЫМ МАРКЕРОМ ("Key features")
   ===================================================================== */
.feature-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-line); }
.feature-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
}
.feature-item__dot { width: 8px; height: 8px; background: var(--color-brand); margin-top: 7px; }
.feature-item__text { font-size: 15px; line-height: 1.55; color: var(--color-ink-2); margin: 0; }

/* =====================================================================
   16. БЛОК "OUR SPECTRUM"
   Интерактив — assets/js/main.js. Ширина капсулы каждого диапазона пропорциональна
   числу продуктовых линеек (переменная --n, задаётся в HTML при рендере страницы)
   по формуле (6 + n*6) px десктоп / половина на <600px — см. main.js и SITE_SPEC §3.
   ===================================================================== */
.spectrum { background: var(--color-dark); color: var(--color-white); }
.spectrum__inner {
  padding-block: 104px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.spectrum__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.spectrum__intro { display: flex; flex-direction: column; gap: 24px; }
.spectrum__title { font-size: 46px; line-height: 1.08; color: var(--color-white); }
.spectrum__text { font-size: 18px; line-height: 1.6; color: var(--color-dark-text-2); max-width: 560px; margin: 0; }

/* Ряд капсул-кнопок диапазонов — пропорции и ритм как у знака TESART и CTA-блока (.capsules--lg):
   одинаковый шаг 18 px и ширина по шкале знака 5…41 px = 6 px × (число продуктовых линеек) − 1 px
   (знак ×1.25: самая широкая капсула ≈ 15 % высоты, как в логотипе).
   Кнопка по ширине равна своей капсуле, поэтому промежутки между капсулами одинаковые (как в логотипе). */
.spectrum__bands {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: 32px;
}
.band-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Невидимая зона клика шире тонкой капсулы: +9 px с каждой стороны (половина шага) */
.band-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; right: -9px; }
.band-btn:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 6px; }
.band-btn__capsule {
  display: block;
  width: calc(var(--n, 1) * 6px - 1px);
  height: 280px;
  /* Форма элемента знака TESART (заявка 20261001-103500-42caad): прямые бока и «луковичные»
     кончики сверху и снизу. Контур — кубическая кривая кончика из assets/logo/tesart-mark-dark.svg
     (центральный элемент), разбитая на отрезки; высота кончика = 11.1 % высоты, как в знаке.
     Координаты в процентах, поэтому форма сама подстраивается под любую ширину/высоту капсулы. */
  clip-path: polygon(0% 11.1%, 1.5% 8.9%, 5.5% 6.8%, 11.5% 5%, 18.9% 3.3%, 27.1% 2%, 35.4% 0.9%, 43.2% 0.3%,
    50% 0%, 56.8% 0.3%, 64.6% 0.9%, 72.9% 2%, 81.1% 3.3%, 88.5% 5%, 94.5% 6.8%, 98.5% 8.9%, 100% 11.1%,
    100% 88.9%, 98.5% 91.1%, 94.5% 93.2%, 88.5% 95%, 81.1% 96.7%, 72.9% 98%, 64.6% 99.1%, 56.8% 99.7%,
    50% 100%, 43.2% 99.7%, 35.4% 99.1%, 27.1% 98%, 18.9% 96.7%, 11.5% 95%, 5.5% 93.2%, 1.5% 91.1%, 0% 88.9%);
  /* Цвета знака для тёмного фона: светлая верхняя часть и насыщенная нижняя с резкой границей
     на 42.7 % высоты (как в логотипе) */
  background: linear-gradient(to bottom, #2E6FA9 0%, #4580BF 42.7%, #0D63AA 42.7%, #0D4887 100%);
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}
.band-btn:hover .band-btn__capsule { opacity: 0.7; }
.band-btn[aria-pressed="true"] .band-btn__capsule { opacity: 1; }
/* Вспышка при клике (заявка 20261002-071608-6a265f): капсула на мгновение становится ярче
   и плавно гаснет до обычного вида (наведение/выбор). main.js (initSpectrum) на каждый клик
   заново ставит класс .is-flash и снимает его по animationend. Яркость меняем через filter,
   поэтому вспышка не конфликтует с переходом opacity выше. */
@keyframes band-flash {
  0%   { filter: brightness(1.9) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}
.band-btn.is-flash .band-btn__capsule { animation: band-flash 0.7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .band-btn.is-flash .band-btn__capsule { animation: none; }
}
/* Подпись нулевой ширины: буква центрируется под капсулой и не раздвигает кнопку (иначе сломается ритм) */
.band-btn__label {
  position: relative;
  display: flex;
  justify-content: center;
  width: 0;
  padding-top: 10px;
  color: var(--color-dark-text-5);
}
/* Метка выбранного диапазона — линия под капсулой, не уже 24 px */
.band-btn__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: transparent;
}
.band-btn[aria-pressed="true"] .band-btn__label { color: var(--color-white); }
.band-btn[aria-pressed="true"] .band-btn__label::before { background: var(--color-sky); }
/* Плавающая полоска выбранного диапазона — та же резиновая анимация, что у меню в шапке
   (.nav-indicator, заявка 20261001-103500-42caad). main.js (initSpectrum) добавляет в
   .spectrum__bands элемент .band-indicator и класс .spectrum__bands--animated: тогда статичные
   линии под кнопками скрываются, а полоска переезжает к выбранному диапазону и к диапазону
   под курсором. Без JS остаётся статичная линия (правило выше). */
.spectrum__bands { position: relative; }
.spectrum__bands--animated .band-btn__label::before { display: none; }
.band-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;               /* реальная ширина задаётся через transform: scaleX(ширина) */
  height: 2px;
  background: var(--color-sky);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: 0;
}
.band-indicator.is-visible { opacity: 1; }
.band-indicator.is-moving {
  /* Резервный изинг (лёгкий перелёт) для браузеров без linear() */
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Резиновый изинг — та же кривая, что у .nav-indicator.is-moving */
  transition: transform 0.9s linear(0, 0.226, 0.473, 0.702, 0.893, 1.034, 1.124, 1.169, 1.179, 1.163,
    1.133, 1.096, 1.06, 1.028, 1.003, 0.986, 0.977, 0.973, 0.974, 0.978, 0.983, 0.989, 0.994, 0.998,
    1.001, 1.003, 1.004, 1.004, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1, 0.999, 0.999, 0.999, 1, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .band-indicator.is-moving { transition: none; }
}
.band-btn__key { display: block; white-space: nowrap; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 18px; }
/* Частоты под капсулами не показываем — они ломают ритм знака; диапазон крупно виден в панели
   и во всплывающей подсказке (title). Для экранных дикторов текст оставляем (визуально скрыт). */
.band-btn__range {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spectrum__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-dark-text-4);
}

/* Панель выбранного диапазона */
.spectrum__panel {
  background: var(--color-dark-2);
  border: 1px solid var(--color-dark-line);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 660px;
}
.spectrum__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.spectrum__panel-title { font-size: 40px; line-height: 1; color: var(--color-white); }
.spectrum__panel-range { font-family: var(--font-mono); font-size: 14px; color: var(--color-sky); white-space: nowrap; }
.spectrum__panel-use { font-size: 16px; line-height: 1.55; color: var(--color-dark-text-2); margin: 0; }
.spectrum__panel-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark-text-5);
}
.spectrum__rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-dark-line); flex-grow: 1; }
.spectrum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--color-dark-line);
  align-items: center;
}
.spectrum-row__name { font-size: 16px; font-weight: 600; color: var(--color-white); }
.spectrum-row__detail { font-family: var(--font-mono); font-size: 12px; color: var(--color-dark-text-4); margin-top: 4px; }
.spectrum__legend { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.spectrum__legend-item { display: flex; align-items: center; gap: 8px; }
.spectrum__legend-swatch { width: 14px; height: 10px; }
.spectrum__legend-label { font-family: var(--font-mono); font-size: 11px; color: var(--color-dark-text-4); }

/* "Across every band" — нижняя полоса из трёх пунктов */
.across-strip {
  display: grid;
  grid-template-columns: 180px repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
}
.across-strip__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-text-5);
  padding-bottom: 4px;
}
.across-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--color-dark-line);
}
.across-item__range { font-family: var(--font-mono); font-size: 15px; color: var(--color-sky); }
.across-item__text { font-size: 16px; color: var(--color-white); }

@media (max-width: 1199px) {
  .spectrum__top { grid-template-columns: 1fr; gap: 40px; }
  .spectrum__panel { min-height: 0; }
  .across-strip { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 899px) {
  .spectrum__inner { padding-block: 56px; gap: 40px; }
  .spectrum__title { font-size: 32px; }
}
@media (max-width: 599px) {
  .spectrum__inner { padding-block: 44px; gap: 20px; }
  .spectrum__title { font-size: 26px; }
  .spectrum__text { font-size: 15px; }
  /* Телефон: тот же ритм знака, мельче — шаг 12 px, ширина 4 px × n − 1 px, высота 150 px */
  .spectrum__bands { gap: 12px; margin-top: 8px; justify-content: center; }
  .band-btn { gap: 8px; }
  .band-btn::before { left: -6px; right: -6px; }
  .band-btn__capsule { width: calc(var(--n, 1) * 4px - 1px); height: 150px; }
  .band-btn__key { font-size: 14px; }
  .spectrum__panel { padding: 24px 20px; gap: 14px; }
  .spectrum__panel-title { font-size: 28px; }
  .spectrum-row { padding: 12px 0; }
  .spectrum-row__name { font-size: 14px; }
  .across-strip__label { padding-bottom: 0; }
  .across-item { padding-top: 14px; }
  .across-item__range { font-size: 13px; }
  .across-item__text { font-size: 14px; }
}

/* =====================================================================
   17. ХЛЕБНЫЕ КРОШКИ
   ===================================================================== */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 28px var(--side-pad) 0;
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb__sep { color: var(--color-line); margin: 0 8px; }
.breadcrumb__current { color: var(--color-ink); }
@media (max-width: 599px) {
  .breadcrumb { padding: 16px var(--side-pad-mobile) 0; }
}

/* =====================================================================
   18. САЙДБАР КАТАЛОГА ПРОДУКТОВ
   ===================================================================== */
.sidebar { display: flex; flex-direction: column; gap: 32px; }
.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.sidebar__group-title { margin-bottom: 8px; }
.sidebar__list { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
  display: block;
  font-size: 15px;
  padding: 8px 12px;
  margin-left: -12px;
  color: var(--color-ink-2);
}
.sidebar__link:hover { color: var(--color-brand); background: var(--color-paper); }
/* Активный пункт — build.py добавляет aria-current="page" + is-active по meta "sidebar:" страницы */
.sidebar__link.is-active {
  background: var(--color-ice);
  color: var(--color-ink);
  font-weight: 600;
}
.sidebar__sublist { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; }

/* Расклад "сайдбар + контент" для страниц категорий/продуктов */
.with-sidebar {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  padding: 40px var(--side-pad) 112px;
}
@media (max-width: 899px) {
  .with-sidebar { grid-template-columns: 1fr; padding: 24px var(--side-pad-mobile) 64px; gap: 32px; }
  /* На планшете/мобильном сайдбар сворачивается НАД контентом (см. SITE_SPEC §2) */
  .sidebar { flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
  .sidebar__group { flex: 1 1 220px; }
}
@media (max-width: 599px) {
  .sidebar { flex-direction: column; gap: 24px; }
  /* В колонку базис 220px превращался в высоту группы (+≈480px пустоты) — у групп своя высота */
  .sidebar__group { flex: none; }
}

/* Свёрнутый каталог (details) — только на телефоне/планшете; на компьютере строки-заголовка нет */
.sidebar-toggle__summary { display: none; }
@media (max-width: 899px) {
  .sidebar-toggle { border: 1px solid var(--color-line); background: var(--color-white); }
  .sidebar-toggle__summary {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 600; color: var(--color-ink);
  }
  .sidebar-toggle__summary::-webkit-details-marker { display: none; }
  .sidebar-toggle__label { white-space: nowrap; flex: none; }   /* подпись в одну строку, длинный раздел — с многоточием */
  .sidebar-toggle__current {
    margin-left: auto; font-weight: 400; color: var(--color-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  /* стрелка: вниз — свёрнуто, вверх — раскрыто */
  .sidebar-toggle__summary::after {
    content: ""; flex: none; width: 8px; height: 8px; margin: 0 2px 4px 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s ease;
  }
  .sidebar-toggle[open] > .sidebar-toggle__summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .sidebar-toggle[open] > .sidebar { padding: 4px 16px 16px; border-top: 1px solid var(--color-line); }
  .sidebar-toggle__summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sidebar-toggle__summary::after { transition: none; }
}

/* =====================================================================
   19. ХИРО КАТЕГОРИИ (текст + изображение)
   ===================================================================== */
/* Колонки 1fr · 48px · 1fr — те же, что у .grid-2 ниже на странице (обратная связь 20261001-112730-9119ee):
   левый край фото хиро стоит на одной вертикали с правой колонкой (Typical applications и т. п.).
   align-items: start (обратная связь 20261002-025328-58e93d): текст прижат к верхнему краю фото, поэтому
   заголовок начинается на одной высоте на всех страницах, независимо от длины подзаголовка и числа кнопок
   (при прежнем end заголовок «прыгал» вслед за высотой текстового блока). */
.category-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.category-hero__content { display: flex; flex-direction: column; gap: 20px; }
.category-hero__title { font-size: 50px; line-height: 1.06; }
.category-hero__text { font-size: 18px; line-height: 1.6; color: var(--color-ink-2); margin: 0; }
.category-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.category-hero__media { height: 300px; background: var(--color-dark); overflow: hidden; }
.category-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199px) {
  .category-hero { grid-template-columns: 1fr; }
  .category-hero__media { order: -1; height: 220px; }
}
/* Чередование «текст слева / справа» (страница Applications, обратная связь 20261002-085302-b4d125):
   модификатор --text-right ставит текст во вторую колонку той же сетки 1fr · 48px · 1fr.
   С заявки 20261002-095858-3bde05 фото разделов вернулись: в разделах --text-right блок __media
   стоит в разметке ПЕРЕД текстом и автоматически занимает левую колонку.
   На узких экранах колонка одна — текст на всю ширину, фото сверху (order: -1). */
.category-hero--text-right > .category-hero__content { grid-column: 2; }
@media (max-width: 1199px) {
  .category-hero--text-right > .category-hero__content { grid-column: auto; }
}
/* Кадрирование фото со сдвигом вниз (обратная связь 20261002-101049-593a84):
   по умолчанию object-fit: cover режет фото поровну сверху и снизу; модификатор
   --focus-low смещает видимую область к низу кадра (видны колёса стоек).
   20261002-102503-51d373: ещё ниже — до нижнего края исходника (100%). */
.category-hero__media--focus-low img { object-position: 50% 100%; }
@media (max-width: 599px) {
  .category-hero__title { font-size: 30px; }
  .category-hero__actions { flex-direction: column; }
  .category-hero__actions .btn { width: 100%; }
}

/* =====================================================================
   20. ХИРО ПРОДУКТА: ГАЛЕРЕЯ + КЛЮЧЕВЫЕ ХАРАКТЕРИСТИКИ
   ===================================================================== */
.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 36px var(--side-pad) 72px;
}
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main { height: 520px; background: var(--color-paper); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery-thumb {
  height: 96px;
  background: var(--color-paper);
  overflow: hidden;
  border: 1px solid var(--color-line);
  padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border: 2px solid var(--color-ink); }

.product-hero__info { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.product-hero__title { font-size: 48px; line-height: 1.06; }
.product-hero__text { font-size: 18px; line-height: 1.6; color: var(--color-ink-2); margin: 0; }

.key-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  border-bottom: 1px solid var(--color-line);
}
.key-spec { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--color-line); }
.key-spec__label { font-size: 13px; color: var(--color-muted); }
.key-spec__value { font-family: var(--font-mono); font-size: 17px; font-weight: 500; }

.variant-pills { display: flex; flex-direction: column; gap: 12px; }
.variant-pills__label { font-size: 13px; color: var(--color-muted); }
.variant-pills__list { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink);
}
.variant-pill.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-white); }

.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.product-hero__note { font-size: 14px; color: var(--color-muted); margin: 0; }

@media (max-width: 1199px) {
  .product-hero { grid-template-columns: 1fr; gap: 32px; }
  .gallery-main { height: 380px; }
}
@media (max-width: 599px) {
  .product-hero { padding: 20px var(--side-pad-mobile) 44px; }
  .product-hero__title { font-size: 30px; }
  .gallery-main { height: 260px; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .gallery-thumb { height: 64px; }
  .key-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-hero__actions { flex-direction: column; }
  .product-hero__actions .btn { width: 100%; }
}

/* =====================================================================
   21. ЛИПКОЕ ПОДМЕНЮ СТРАНИЦЫ ПРОДУКТА (Overview · Specifications · Ordering · Downloads)
   ===================================================================== */
.subnav {
  position: sticky;
  top: 76px; /* сразу под шапкой сайта */
  z-index: 90;
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.subnav__list {
  display: flex;
  gap: 40px;
  padding-inline: var(--side-pad);
  overflow-x: auto;
}
.subnav__link {
  display: block;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav__link.is-active,
.subnav__link[aria-current="true"] {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom-color: var(--color-ink);
}
@media (max-width: 899px) {
  .subnav__list { gap: 24px; }
}
@media (max-width: 599px) {
  /* Шапка сайта становится ниже (64px) только на мобильном — см. .site-header__inner */
  .subnav { top: 64px; }
  .subnav__list { padding-inline: var(--side-pad-mobile); }
}

/* =====================================================================
   22. ТАБЛИЦЫ
   ===================================================================== */

/* Обёртка с горизонтальным скроллом для широких таблиц на мобильном — оборачивайте ЛЮБУЮ
   широкую таблицу/грид в .table-wrap, чтобы она не разрывала макет страницы */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* --- Таблица характеристик (Specifications), с групповыми заголовками и footnotes --- */
.spec-table { display: flex; flex-direction: column; border: 1px solid var(--color-line); border-top: none; min-width: 640px; }
.spec-table__head {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.5fr;
  gap: 16px;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-white);
}
.spec-table__head-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-table__group {
  padding: 18px 20px 10px;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  font-size: 15px;
}
.spec-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.5fr;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-line);
  align-items: start;
}
.spec-table__param { font-size: 15px; color: var(--color-ink-2); }
/* Значения — тем же шрифтом, что и параметры (Archivo), цифры моноширинные для выравнивания
   (обратная связь 20261001-082036-01e282; раньше значения были IBM Plex Mono) */
.spec-table__value { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.spec-table__typ { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--color-muted); }

/* Подсетка фазового шума (LO phase noise) — 5 колонок оффсетов внутри одной строки таблицы */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--color-line);
  border-left: none;
}
/* Подсетка занимает обе колонки «Specification» + «Typ.» (типовые значения у неё внутри ячеек),
   иначе 5 ячеек не помещаются в одну колонку и текст вылезает за границы (обратная связь 20261001-081620-55169d) */
.spec-table__row > .phase-grid { grid-column: 2 / -1; }
.phase-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  min-width: 0;
  overflow-wrap: anywhere;
  border-left: 1px solid var(--color-line);
}
.phase-cell__offset { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--color-muted); }
.phase-cell__value { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--color-ink); }
.phase-cell__typ { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--color-muted); }

.spec-table__notes { font-size: 13px; line-height: 1.6; color: var(--color-muted); margin-top: 14px; }

/* Телефон: таблица характеристик перестраивается в «карточки» вместо прокрутки вбок —
   название параметра сверху, под ним значение (слева) и типовое значение (справа) */
@media (max-width: 599px) {
  .spec-table { min-width: 0; }
  .spec-table__head { display: none; }
  .spec-table__group { padding: 16px 16px 8px; }
  .spec-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 16px;
  }
  .spec-table__param { grid-column: 1 / -1; font-size: 13px; }
  .spec-table__value { grid-column: 1; }
  .spec-table__typ { grid-column: 2; text-align: right; }
  .spec-table__typ:not(:empty)::before { content: "typ. "; }
  .spec-table__row > .phase-grid { grid-column: 1 / -1; margin-top: 6px; }
  .phase-cell { padding: 8px 6px; gap: 4px; }
  .phase-cell__typ { white-space: normal; }
}

/* --- Таблица модельного ряда (Model range) с колонкой band-chip --- */
.model-table { display: flex; flex-direction: column; border: 1px solid var(--color-line); background: var(--color-white); min-width: 480px; }
.model-table__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 16px;
}
.model-table__title { font-size: 20px; }
.model-table__meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.model-table__row-head {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.45fr 1.3fr;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
}
.model-table__col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.model-table__row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.45fr 1.3fr;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--color-line);
  align-items: center;
}
/* JS-фильтр (см. main.js) скрывает строки, не подходящие под текущий набор фильтров */
.model-table__row[hidden] { display: none; }
.model-table__model { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-ink); }
.model-table__range { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--color-ink); }
.model-table__desc { font-size: 14px; color: var(--color-ink-2); }

/* --- Пилюли-фильтры (переиспользуются на страницах категорий: модели/направления/диапазоны) --- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* На сенсорных экранах — зона касания не меньше 44 px (рекомендация Apple/Google); с мышью остаются компактными */
@media (pointer: coarse) {
  .filter-pill { min-height: 44px; display: inline-flex; align-items: center; }
}
.filter-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 14px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink-2);
}
.filter-pill.is-active,
.filter-pill[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

/* --- Простая табличная разметка (MAS-модели, точность IOT, потери кабеля, Ordering information) --- */
.data-table { width: 100%; border: 1px solid var(--color-line); min-width: 560px; }
.data-table caption { text-align: left; padding: 12px 16px; font-size: 15px; }
.data-table th, .data-table td {
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
}
.data-table thead th {
  background: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-top: none;
}
/* Ячейки данных — тем же шрифтом, что и остальная таблица (обратная связь 20261001-082036-01e282);
   класс .is-mono оставлен в разметке, но в теле таблицы больше не меняет шрифт */
.data-table td.is-mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.data-table th.is-mono { font-family: var(--font-mono); }

/* Планшет и десктоп: таблица подстраивается под ширину колонки и переносит текст в ячейках.
   Без этого min-width 560px в узкой левой колонке страницы продукта (Options, Model range)
   давал прокрутку вбок и обрезанный текст (обратная связь 20261001-081620-55169d).
   На телефоне остаётся min-width 560px + прокрутка в .table-wrap. */
@media (min-width: 600px) {
  .data-table { min-width: 0; }
}

@media (max-width: 599px) {
  /* .spec-table на телефоне перестраивается в «карточки» — см. раздел таблицы характеристик выше */
  .model-table__row-head, .model-table__row { grid-template-columns: 1fr 0.8fr 0.4fr 1fr; gap: 8px; padding: 10px 14px; }
}

/* =====================================================================
   23. СПИСОК ЗАГРУЗОК (Downloads)
   ===================================================================== */
.downloads { display: flex; flex-direction: column; }
.downloads__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-line);
}
.downloads__label { font-size: 15px; }
.downloads__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-brand-dark);
  flex: none;
}
/* data-todo="pdf" — заглушка до появления английских PDF (см. build.py, отчёт сборки) */
[data-todo] { cursor: not-allowed; }

/* =====================================================================
   24. СВЯЗАННЫЕ ПРОДУКТЫ — переиспользует .card-grid + .product-card (см. раздел 12) */

/* =====================================================================
   25. ФОРМЫ
   ===================================================================== */
.form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.form__row { display: flex; flex-direction: column; gap: 8px; }
.form__row--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.form-label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.form-hint { font-size: 13px; color: var(--color-muted); margin: 0; }
.form-input, .form-select, .form-textarea {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
}
.form-textarea { height: auto; min-height: 140px; padding: 12px 16px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: var(--focus-ring);
}
.form-checkbox { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Сообщение-подтверждение после отправки формы (см. main.js, обработчик [data-mailto]) */
.form__note {
  font-size: 14px;
  color: var(--color-ink-2);
  padding: 14px 16px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
}
.form__note[hidden] { display: none; }

/* =====================================================================
   26. СТРАНИЦА 404
   ===================================================================== */
.error-page {
  padding: 140px var(--side-pad) 160px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.error-page__code { font-family: var(--font-mono); font-size: 16px; color: var(--color-muted); letter-spacing: 0.1em; }
.error-page__title { font-size: 40px; }
.error-page__text { font-size: 17px; color: var(--color-ink-2); max-width: 480px; margin: 0; }
@media (max-width: 599px) {
  .error-page { padding: 80px var(--side-pad-mobile) 96px; }
  .error-page__title { font-size: 28px; }
}

/* =====================================================================
   27. СЕТКИ КОНТЕНТА И СЛУЖЕБНЫЕ ОБЁРТКИ
   Двух-/трёхколоночные блоки контента страниц продукта/категории (Key features рядом
   с Typical applications, Specifications рядом с боковой колонкой и т.п.), плюс мелкие
   обёртки, которые иначе пришлось бы писать через style="" на каждой странице.

   Примечание: в подменю страницы продукта используется ТОЛЬКО .subnav (раздел 21, липкий,
   с подсветкой через IntersectionObserver) — он и есть визуальный ряд "Overview /
   Specifications / Ordering information / Downloads" из дизайна; отдельного набора
   некликабельных "табов" не заводим, чтобы не дублировать один и тот же компонент.
   ===================================================================== */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.grid-2--end { align-items: end; }
.grid-2--start { align-items: start; }
.grid-2--wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 72px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Защита сеток от горизонтального переполнения страницы. Причина бага (найден при ручной
   проверке мобильной раскладки): по умолчанию grid-элемент не может стать УЖЕ своего
   min-content — например, широкая .spec-table/.model-table/.data-table (у них задан
   min-width для читаемости на десктопе) "распирает" родительскую колонку грида и утаскивает
   за собой всю страницу вбок, несмотря на overflow-x:auto у .table-wrap внутри. Однострочные
   мобильные переопределения grid-template-columens в этом файле (например "1fr" без minmax)
   такой защиты не дают сами по себе, поэтому обнуляем min-width всем прямым потомкам сеток
   централизованно — так виден именно горизонтальный скролл внутри .table-wrap, а не съехавшая
   страница целиком. */
.hero > *, .why-section > *, .cta-band__inner > *, .site-footer__grid > *,
.card-grid > *, .apps-grid > *, .spectrum__top > *, .across-strip > *,
.with-sidebar > *, .category-hero > *, .product-hero > *, .grid-2 > *, .grid-3 > * {
  min-width: 0;
}

/* Готовые вертикальные стеки (замена частых style="display:flex;flex-direction:column;gap:...")  */
.stack-lg { display: flex; flex-direction: column; gap: 56px; }     /* колонка страницы рядом с сайдбаром */
.content-block { display: flex; flex-direction: column; gap: 18px; } /* "заголовок + список" (Key features, Specifications, Downloads …) */
/* Блок Overview на товарной странице: текст не тянется на всю ширину, а заканчивается там же,
   где левая колонка .grid-2 ниже (и левая колонка хиро) — ширина = (100% − gap 48px) / 2.
   На узких экранах (<1200px), где .grid-2 уже в одну колонку, ограничение снимается. */
.content-block--overview { max-width: calc((100% - 48px) / 2); }
/* Вводный абзац секции (.lead-text под h2) той же ширины, что левая колонка .grid-2 —
   чтобы на широких экранах строка не тянулась через всю страницу
   (обратная связь 20261002-112553-838fe0, 20261002-112631-3d25b8). */
.lead-text--half { max-width: calc((100% - 48px) / 2); }
@media (max-width: 1199px) {
  .content-block--overview,
  .lead-text--half { max-width: none; }
}

/* Универсальный вертикальный стек + модификаторы отступа — на случай, когда готовых
   .stack-lg/.content-block недостаточно (другая величина gap) */
.v-stack { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-48 { gap: 48px; }

/* Строка "заголовок слева — короткая подпись справа" (Model range · N models, Specifications · Guaranteed…) */
.head-row { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; }

/* Доп. размеры заголовков подсекций товарной страницы/категории */
.title-4 { font-size: 26px; line-height: 1.2; }
.title-5 { font-size: 30px; line-height: 1.15; }

/* Мелкая моно-подпись без капса/трекинга eyebrow (например "IF: L-band · 25 standard models") */
.meta-mono { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }

@media (max-width: 1199px) {
  .grid-2, .grid-2--wide-right { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Панель-подсказка "Need a different band?" (заметка в конце колонки на страницах категории) */
.note-panel {
  margin-top: 12px;
  padding: 28px;
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.note-panel__title { font-size: 19px; }
.note-panel__text { font-size: 15px; line-height: 1.55; color: var(--color-ink-2); margin: 0; }
.note-panel__link { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* Простой список пунктов (например "Typical applications") без квадратного маркера */
.plain-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-line); }
.plain-list__item { padding: 14px 0; border-top: 1px solid var(--color-line); font-size: 15px; line-height: 1.55; color: var(--color-ink-2); }

/* =====================================================================
   ТИПОГРАФСКИЕ УТИЛИТЫ (добавляет build.py автоматически)
   ===================================================================== */
.nowrap { white-space: nowrap; }

/* На телефоне частоты под капсулами «Our spectrum» слипаются (9 px) — скрываем их:
   диапазон крупно показан в заголовке панели выбранного диапазона */
@media (max-width: 599px) {
  .band-btn__range { display: none; }
}

/* iOS Safari увеличивает масштаб страницы при фокусе на поле со шрифтом меньше 16 px — на телефонах ставим 16 px */
@media (max-width: 599px) {
  .form input, .form select, .form textarea { font-size: 16px; }
}

/* =====================================================================
   28. ВИДЖЕТ ОБРАТНОЙ СВЯЗИ
   Плавающая кнопка "Feedback" (низ-право) + модальное окно формы (баг/предложение,
   вложения). Разметка — src/partials/feedback-widget.html, логика — main.js,
   initFeedbackWidget(). Острые углы и цвета — как у остального сайта (раздел 5 — кнопки,
   раздел 25 — формы): виджет НЕ вводит новый визуальный язык, а переиспользует существующий.
   ===================================================================== */

/* Плавающая кнопка. z-index ниже шапки (раздел 8, z-index:100) — чтобы не перекрывать
   мобильную выезжающую панель навигации, — но выше обычного контента страницы (без
   собственного z-index). env(safe-area-inset-*) — отступ от «чёлки»/жестовой полосы iPhone. */
.feedback-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  background: var(--color-ink);
  color: var(--color-white);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(11, 14, 19, 0.28);
  transition: background var(--transition-fast);
}
.feedback-fab:hover { background: var(--color-ink-2); }
.feedback-fab .icon { flex: none; }

/* <600px — только иконка (aria-label на самой кнопке уже отдаёт доступное имя целиком) */
@media (max-width: 599px) {
  .feedback-fab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    padding: 0;
  }
  .feedback-fab__label { display: none; }
}

/* Модальное окно — нативный <dialog>. display:none/[open] прописан явно (не полагаемся
   только на встроенный UA-стиль) — так разметка корректно скрыта даже в браузерах, которые
   <dialog> вообще не знают (тогда это был бы обычный видимый блок) — "полифилл-free
   fallback" из задания: main.js для таких браузеров сам открывает/закрывает элемент через
   атрибут open и добавляет .feedback-dialog-fallback-backdrop рядом (см. ниже). */
.feedback-dialog {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 48px)); /* выше прежних 720px (обратная связь 20261002-040822-92f832) */
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 24px 64px rgba(11, 14, 19, 0.35);
  z-index: 300;
  overflow: hidden;
}
.feedback-dialog[open] { display: flex; flex-direction: column; }
.feedback-dialog::backdrop { background: rgba(11, 14, 19, 0.55); }
/* Создаётся/удаляется в main.js — только для браузеров без showModal() (см. выше) */
.feedback-dialog-fallback-backdrop { position: fixed; inset: 0; background: rgba(11, 14, 19, 0.55); z-index: 290; }

.feedback-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-line);
  flex: none;
}
.feedback-dialog__title { font-size: 20px; line-height: 1.3; }
.feedback-dialog__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
}
.feedback-dialog__close:hover { border-color: var(--color-ink); }

/* Шапка, тело и кнопки лежат внутри <form>, поэтому форма тоже должна быть flex-колонкой с min-height: 0.
   Иначе (обратная связь 20261002-040822-92f832) форма растёт по содержимому, прокрутка тела не включается,
   а overflow: hidden диалога срезает нижнюю панель с кнопкой Send report. Теперь при нехватке высоты
   прокручивается только тело, шапка и кнопки всегда видны. */
.feedback-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.feedback-dialog__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.feedback-fields { display: flex; flex-direction: column; gap: 20px; }

.feedback-kind { display: flex; gap: 12px; flex-wrap: wrap; }
.feedback-kind__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-line);
  font-size: 14px;
  cursor: pointer;
}
/* :has() — прогрессивное улучшение (подсветка выбранного варианта); без поддержки браузером
   радиокнопка остаётся видимой и полностью рабочей — деградация чисто визуальная */
.feedback-kind__option:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper); font-weight: 600; }
.feedback-kind__option input { width: 16px; height: 16px; }

.feedback-drop {
  border: 1px dashed var(--color-line);
  padding: 24px 16px;
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.feedback-drop:hover, .feedback-drop:focus-visible { border-color: var(--color-brand); background: var(--color-paper); }
.feedback-drop.is-dragover { border-color: var(--color-brand); background: var(--color-ice); }
.feedback-drop p { margin: 0; }

.feedback-attachments { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.feedback-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  font-size: 13px;
}
.feedback-attachment__thumb { width: 32px; height: 32px; object-fit: cover; flex: none; background: var(--color-paper); }
.feedback-attachment__icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--color-paper); color: var(--color-muted); }
.feedback-attachment__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-attachment__size { flex: none; color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; }
.feedback-attachment__remove {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-muted);
}
.feedback-attachment__remove:hover { color: var(--color-ink); }
.feedback-attachment.is-error { border-color: #C0392B; color: #8C2F26; }

.feedback-namerow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 479px) {
  .feedback-namerow { grid-template-columns: 1fr; }
}

/* HONEYPOT: спрятано оффскрин (НЕ display:none/visibility:hidden — часть ботов такие поля
   пропускает; оффскрин-позиционирование заполняют вслепую наравне с остальными полями) */
.feedback-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feedback-status {
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
}
.feedback-status.is-error { background: #FBEAEA; border-color: #E3A9A3; color: #8C2F26; }
.feedback-status.is-success { background: var(--color-ice); border-color: var(--color-sky); color: var(--color-ink); }

.feedback-offline, .feedback-success {
  text-align: center;
  padding: 32px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.feedback-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-line);
  flex: none;
}
.feedback-dialog__actions .btn[disabled] { opacity: 0.6; cursor: default; }

@media (max-width: 599px) {
  .feedback-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; inset: 0; margin: 0; }
  .feedback-dialog__head { padding: 16px var(--side-pad-mobile) 12px; }
  .feedback-dialog__body { padding: 16px var(--side-pad-mobile); }
  .feedback-dialog__actions { padding: 12px var(--side-pad-mobile) calc(16px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
}

/* =====================================================================
   29. АДМИНКА ОБРАЩЕНИЙ /admin (русский интерфейс)
   Отдельные server-rendered страницы (admin_views.py), не часть сборки build.py —
   поэтому подключают этот же styles.css напрямую по абсолютному пути "/assets/css/styles.css".
   Переиспользует токены, .data-table, .form*, .btn*, .meta-mono — здесь только то, чего
   ещё не было: топ-бар админки, бейджи типа/статуса, миниатюры, фильтры-пилюли, пагинация.
   ===================================================================== */
.admin-body { background: var(--color-paper); }

.admin-topbar { background: var(--color-ink); color: var(--color-white); }
.admin-topbar__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 16px var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-topbar__brand { color: var(--color-white); font-weight: 600; }
.admin-topbar__brand:hover { color: var(--color-sky); }
.admin-who { font-family: var(--font-mono); font-size: 12px; color: var(--color-dark-text-3); }

.admin-shell { max-width: var(--container-max); margin-inline: auto; padding: 32px var(--side-pad) 96px; }
@media (max-width: 599px) {
  .admin-topbar__inner, .admin-shell { padding-inline: var(--side-pad-mobile); }
}

.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-denied { padding: 64px 0; max-width: 560px; }

.admin-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.admin-filters__group { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink-2);
}
.admin-pill:hover { border-color: var(--color-ink); color: var(--color-ink); }
.admin-pill.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }

.admin-table { background: var(--color-white); }
.admin-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: 10px 12px; border-bottom: 1px solid var(--color-line); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-line); font-size: 14px; vertical-align: middle; }
.admin-table__message a { color: var(--color-ink); font-weight: 500; }
.admin-table__message a:hover { color: var(--color-brand-dark); }
.admin-table__attachments { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.admin-empty { text-align: center; color: var(--color-muted); padding: 32px 12px; }
.admin-muted { color: var(--color-muted); }

.admin-thumb { width: 32px; height: 32px; object-fit: cover; border: 1px solid var(--color-line); flex: none; }

.admin-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 8px; border: 1px solid var(--color-line); }
.admin-badge--bug { border-color: #C0392B; color: #8C2F26; }
.admin-badge--suggestion { border-color: var(--color-brand); color: var(--color-brand-dark); }

.admin-status { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 10px; }
.admin-status--new { background: var(--color-ice); color: var(--color-brand-dark); }
.admin-status--in_progress { background: #FCEFD9; color: #8A5A00; }
.admin-status--done { background: #DFF3E3; color: #1F7A3D; }
.admin-status--rejected { background: #F1D9D6; color: #8C2F26; }

.admin-pagination { display: flex; gap: 6px; margin-top: 20px; }
.admin-page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--color-line); font-size: 13px; color: var(--color-ink-2); }
.admin-page.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }

.admin-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; margin-top: 24px; align-items: start; }
@media (max-width: 899px) {
  .admin-detail-grid { grid-template-columns: 1fr; }
}
.admin-message { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.6; background: var(--color-white); border: 1px solid var(--color-line); padding: 16px; }

.admin-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.admin-image-att { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--color-line); padding: 8px; background: var(--color-white); }
.admin-image-att img { width: 100%; height: 120px; object-fit: cover; background: var(--color-paper); }
.admin-image-att .meta-mono { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-file-list { display: flex; flex-direction: column; gap: 8px; }
.admin-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-line); background: var(--color-white); font-size: 14px; }

.admin-meta-panel, .admin-status-panel { background: var(--color-white); border: 1px solid var(--color-line); padding: 20px; }
.admin-meta-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.admin-meta-list dt { color: var(--color-muted); }
.admin-meta-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-ua { font-size: 11px; color: var(--color-ink-2); }

/* =====================================================================
   30. КНОПКА «НАВЕРХ» (обратная связь 20261002-072407-ff0ac5)
   Ненавязчивая квадратная кнопка 48×48: белая с тонкой линией, как .btn--outline (раздел 5).
   Появляется, когда страницу прокрутили вниз (класс .is-visible ставит initBackToTop() в main.js),
   и плавно гаснет у верха страницы. visibility:hidden в скрытом состоянии убирает кнопку
   из порядка Tab и из-под курсора — невидимая кнопка не «ловит» клики.
   Размещение:
   - по умолчанию — правый нижний угол;
   - если есть кнопка «Feedback» (раздел 28) — над ней, с зазором 12px;
   - на широких экранах (≥1840px), где справа от колонки контента много пустого поля, —
     сразу за правым краем колонки контента (.container: 1440 − 2×56 = 1328px), на одном
     уровне с «Feedback». Порог подобран так, чтобы кнопки не пересекались по горизонтали.
   ===================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60; /* как у .feedback-fab: ниже шапки и мобильного меню, выше контента */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(11, 14, 19, 0.12);
  cursor: pointer;
  /* скрытое состояние: прозрачная и чуть ниже своего места */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s,
              border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s,
              border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.back-to-top:hover { border-color: var(--color-ink); background-color: var(--color-white); }

/* Кнопка над тёмным блоком (CTA, подвал, «Our spectrum», .section--dark) — тёмная заливка
   (обратная связь 20261002-073836-6b15b4). Класс .is-on-dark ставит initBackToTop() в main.js;
   смена цвета плавная — длительность 0.35s задана в transition выше. На светлом фоне — как было. */
.back-to-top.is-on-dark {
  background-color: rgba(18, 24, 34, 0.92); /* --color-dark-2 с лёгкой прозрачностью */
  color: var(--color-white);
  border-color: var(--color-dark-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.back-to-top.is-on-dark:hover { background-color: #222A35; border-color: var(--color-white); }
.back-to-top:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Есть «Feedback» (48px высотой) — встаём над ней */
.feedback-fab ~ .back-to-top { bottom: calc(24px + 48px + 12px + env(safe-area-inset-bottom, 0px)); }

/* Широкий экран: за правым краем колонки контента, на уровне «Feedback».
   (100vw − 1328px)/2 — расстояние от правого края окна до края контента;
   вычитаем зазор 32px и ширину кнопки 48px. */
@media (min-width: 1840px) {
  .back-to-top,
  .feedback-fab ~ .back-to-top {
    right: calc((100vw - 1328px) / 2 - 32px - 48px);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Телефон: отступы как у «Feedback» на мобильном (16px) */
@media (max-width: 599px) {
  .back-to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .feedback-fab ~ .back-to-top { bottom: calc(16px + 48px + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   31. ДОСКА ОБРАЩЕНИЙ /board/ и служебная кнопка «Обращения»
   Доска — server-rendered страницы (board_views.py), как и админка (раздел 29): подключают
   этот же styles.css по абсолютному пути и переиспользуют токены, .admin-pill / .admin-badge /
   .admin-status / .admin-page, .form и .btn. Здесь только то, чего ещё не было: карточки списка,
   отметки «Ждёт ответа» / «Переоткрыто», хронология обращения, форма ответа.
   Кнопка «Обращения» (.board-fab) и ссылка в окне Feedback — часть обычных страниц сайта
   (src/partials/board-fab.html, board-dialog-link.html); их вставляет build.py только при
   feedback_board=true в features.json.
   Цвет «янтарный» (#8A5A00 / #FCEFD9) — тот же, что у статуса «В работе» в админке: он значит
   «нужно внимание», поэтому им же помечены вопросы к коллеге и счётчик на кнопке.
   ===================================================================== */
.board-body { display: flex; flex-direction: column; min-height: 100vh; }

.board-topbar { background: var(--color-ink); color: var(--color-white); }
.board-topbar__inner,
.board-shell,
.board-footer {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 24px;
}
.board-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.board-topbar__brand { display: inline-flex; align-items: center; gap: 16px; color: var(--color-white); min-width: 0; }
.board-topbar__brand:hover { color: var(--color-white); }
.board-topbar__logo { display: block; width: 104px; height: 26px; flex: none; }
.board-topbar__title {
  padding-left: 16px;
  border-left: 1px solid var(--color-dark-line);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.board-topbar__link { color: var(--color-dark-text-2); font-size: 14px; white-space: nowrap; }
.board-topbar__link:hover { color: var(--color-sky); }

.board-shell { flex: 1 0 auto; padding-block: 40px 64px; }
.board-footer { padding-block: 0 32px; font-size: 13px; color: var(--color-muted); }
.board-footer p { margin: 0; }

.board-h1 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; overflow-wrap: anywhere; }
.board-h2 { font-size: 18px; line-height: 1.3; margin-bottom: 12px; }
.board-id { margin: 0 0 8px; font-size: 13px; color: var(--color-muted); overflow-wrap: anywhere; }
.board-intro { margin: 0 0 24px; max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--color-ink-2); }
.board-muted { color: var(--color-muted); font-size: 14px; }

/* Фильтры: кнопки-пилюли из админки + число обращений в каждой */
.board-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.board-pill__count { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: 0.65; }
.board-pill--attention { border-color: #C98A00; color: #8A5A00; font-weight: 600; }
.board-pill--attention:hover { border-color: #8A5A00; color: #8A5A00; }

/* Список обращений */
.board-list { display: flex; flex-direction: column; gap: 12px; }
.board-item {
  position: relative;               /* нужен для растянутой ссылки .board-item__link::after */
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left-width: 4px;
}
.board-item--waiting { border-left-color: #C98A00; }
.board-item:hover { border-color: var(--color-ink); }
.board-item--waiting:hover { border-left-color: #C98A00; }
.board-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.board-item__date { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.board-item__text { margin: 10px 0 8px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.board-item__link { color: var(--color-ink); font-weight: 500; }
.board-item__link:hover { color: var(--color-brand-dark); }
/* Вся карточка кликабельна, а ссылка на страницу сайта внутри неё остаётся отдельной (z-index выше) */
.board-item__link::after { content: ""; position: absolute; inset: 0; }
.board-item__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--color-muted); }
.board-item__meta a { position: relative; z-index: 1; }
.board-item__page { overflow-wrap: anywhere; }

.board-flag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.board-flag--waiting { background: #8A5A00; color: var(--color-white); }
.board-flag--reopened { border: 1px solid var(--color-brand); color: var(--color-brand-dark); }
.board-empty { padding: 40px 16px; text-align: center; color: var(--color-muted); background: var(--color-white); border: 1px dashed var(--color-line); }

/* Карточка обращения */
.board-back { margin: 0 0 16px; font-size: 14px; }
.board-card-head { margin-bottom: 8px; }
.board-card-head .board-item__top { margin-bottom: 12px; }
.board-section { margin-top: 32px; }
.board-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 16px 20px;
}
.board-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 16px 0 0; font-size: 14px; }
.board-facts dt { color: var(--color-muted); }
.board-facts dd { margin: 0; overflow-wrap: anywhere; }

.board-notice { margin: 16px 0 0; padding: 12px 16px; font-size: 14px; line-height: 1.5; border: 1px solid var(--color-line); background: var(--color-white); }
.board-notice--ok { background: var(--color-ice); border-color: var(--color-sky); }
.board-notice--ask { background: #FCEFD9; border-color: #E8C98A; color: #5E3E00; }
.board-notice--error { background: #FBEAEA; border-color: #E3A9A3; color: #8C2F26; }

/* Хронология: записи Claude и владельца — белые, ответы коллег — голубоватые */
.board-thread { display: flex; flex-direction: column; gap: 10px; }
.board-entry { padding: 14px 18px; background: var(--color-white); border: 1px solid var(--color-line); border-left: 4px solid var(--color-line); }
.board-entry--claude { border-left-color: var(--color-brand); }
.board-entry--owner { border-left-color: var(--color-ink); }
.board-entry--colleague { background: var(--color-ice); border-color: var(--color-sky); border-left-color: var(--color-brand-dark); }
.board-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.board-entry__who { font-weight: 700; font-size: 15px; }
.board-entry__when { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.board-entry__change { font-size: 12px; font-weight: 600; padding: 2px 8px; background: var(--color-paper); color: var(--color-ink-2); }
.board-entry--colleague .board-entry__change { background: var(--color-white); }
.board-entry__text { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.board-entry__text--empty { color: var(--color-muted); font-style: italic; }

/* Форма «Ответить» */
.board-reply { padding: 24px; background: var(--color-white); border: 1px solid var(--color-line); }
.board-reply__hint { margin: 0 0 16px; font-size: 14px; color: var(--color-ink-2); line-height: 1.5; }
.board-reply__form { max-width: none; }

@media (max-width: 599px) {
  .board-topbar__inner, .board-shell, .board-footer { padding-inline: var(--side-pad-mobile); }
  .board-shell { padding-block: 24px 48px; }
  .board-topbar__logo { width: 88px; height: auto; }
  .board-topbar__title { padding-left: 12px; font-size: 14px; }
  .board-topbar__brand { gap: 12px; }
  .board-h1 { font-size: 24px; }
  .board-item { padding: 14px 16px; }
  .board-facts { grid-template-columns: 1fr; gap: 2px; }
  .board-facts dd { margin-bottom: 10px; }
  .board-reply { padding: 18px 16px; }
  .board-reply .btn { width: 100%; }
}

/* Служебная кнопка «Обращения» на страницах сайта: белая плашка над «Feedback», справа внизу.
   Стопка выстраивается по правому краю (right одинаковый), поэтому ширина надписи роли не играет:
   Feedback (48px) -> зазор 8px -> Обращения (40px) -> зазор 12px -> «наверх». */
.board-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));   /* если Feedback нет — в самом углу */
  z-index: 60;                                             /* как у .feedback-fab: ниже шапки, выше контента */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(11, 14, 19, 0.12);
  transition: border-color var(--transition-fast);
}
.board-fab:hover { border-color: var(--color-ink); background: var(--color-white); color: var(--color-ink); }
.board-fab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.board-fab .icon { flex: none; }
.board-fab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #8A5A00;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}
.feedback-fab ~ .board-fab { bottom: calc(24px + 48px + 8px + env(safe-area-inset-bottom, 0px)); }

/* «Наверх» поднимается над «Обращения» (раньше — только над «Feedback») */
.board-fab ~ .back-to-top { bottom: calc(24px + 40px + 12px + env(safe-area-inset-bottom, 0px)); }
.feedback-fab ~ .board-fab ~ .back-to-top { bottom: calc(24px + 48px + 8px + 40px + 12px + env(safe-area-inset-bottom, 0px)); }

/* Широкий экран: «наверх» стоит у края колонки контента на уровне «Feedback» (раздел 30) —
   кнопки не пересекаются, поэтому возвращаем ей нижний отступ 24px */
@media (min-width: 1840px) {
  .board-fab ~ .back-to-top,
  .feedback-fab ~ .board-fab ~ .back-to-top { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Телефон: отступы 16px, как у «Feedback» на мобильном */
@media (max-width: 599px) {
  .board-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .feedback-fab ~ .board-fab { bottom: calc(16px + 48px + 8px + env(safe-area-inset-bottom, 0px)); }
  .board-fab ~ .back-to-top { bottom: calc(16px + 40px + 12px + env(safe-area-inset-bottom, 0px)); }
  .feedback-fab ~ .board-fab ~ .back-to-top { bottom: calc(16px + 48px + 8px + 40px + 12px + env(safe-area-inset-bottom, 0px)); }
  /* На телефоне — только значок (ширина как у Feedback), иначе подпись ложится на кнопки страницы.
     Подпись остаётся для экранных чтецов (visually hidden), счётчик — значок в углу */
  .board-fab { width: 48px; padding: 0; justify-content: center; }
  .board-fab__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .board-fab__count { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
}

/* Ссылка «Мои обращения и ответы» в окне формы Feedback — полоска между телом и кнопками */
.feedback-dialog__board {
  flex: none;
  padding: 12px 24px;
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
  font-size: 14px;
}
.feedback-board-link { font-weight: 600; color: var(--color-brand-dark); }
.feedback-board-link:hover { color: var(--color-brand); }
@media (max-width: 599px) {
  .feedback-dialog__board { padding: 12px var(--side-pad-mobile); }
}