@import url("../fonts/fonts.css");

/* ==========================================================================
   CAR9 — дизайн-токены и стили макета
   Токены живут в :root (светлая) и [data-theme="dark"] (тёмная).
   Тема RecCMS переопределяет ТОЛЬКО токены, компоненты не трогает.
   ========================================================================== */

:root {
  /* --- бренд --- */
  --c9-accent:        #ee6a21;
  --c9-accent-hover:  #d55a15;
  --c9-accent-soft:   rgba(238, 106, 33, .10);
  --c9-accent-line:   rgba(238, 106, 33, .28);
  --c9-on-accent:     #ffffff;

  /* --- поверхности --- */
  --c9-bg:            #ffffff;   /* фон страницы */
  --c9-bg-alt:        #f4f4f2;   /* фон «полосатых» секций */
  --c9-surface:       #ffffff;   /* карточки */
  --c9-surface-2:     #fafaf9;   /* вложенные плитки */
  --c9-surface-dark:  #17150f;   /* тёмная секция внутри светлой темы */

  /* --- текст --- */
  --c9-text:          #16150f;
  --c9-text-muted:    #6b6a63;
  --c9-text-faint:    #78776f;   /* было #94938c: 3.0:1 на белом — на грани */
  --c9-on-dark:       #f7f6f3;
  --c9-on-dark-muted: #a8a69d;

  /* --- линии --- */
  --c9-border:        #e5e4e0;
  --c9-border-strong: #d3d2cc;

  /* --- служебные --- */
  --c9-ok:            #2f9e5f;
  --c9-shadow-sm:     0 1px 2px rgba(20, 18, 12, .05);
  --c9-shadow:        0 4px 16px rgba(20, 18, 12, .07);
  --c9-shadow-lg:     0 18px 48px rgba(20, 18, 12, .12);

  /* --- геометрия --- */
  --c9-radius-sm:     8px;
  --c9-radius:        14px;
  --c9-radius-lg:     22px;
  --c9-section-y:     clamp(48px, 5.2vw, 82px);   /* плотность §2 брифа: было до 104 */
  --c9-container:     1200px;

  /* --- типографика --- */
  --c9-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c9-font-head:     "Manrope", "Inter", system-ui, sans-serif;

  /* --- шапка --- */
  --c9-header-h:      72px;
  --c9-header-bg:     rgba(255, 255, 255, .82);

  /* --- иконки ---
     Белая линия + оранжевый акцент НА ТЁМНОМ ГРАФИТЕ, один комплект на обе темы.

     Путь до этого решения, чтобы его не переигрывали заново:
       1. белым по ПРОЗРАЧНОМУ  → генератор рисует неоновую вывеску,
          48 % полутонов вместо 8. Три попытки, два прямых запрета «не неон» — без эффекта.
       2. тёмным по белому      → чисто (1.9 %), но в тёмной теме десять белых плиток
          читаются как ряд ярких чипов, и это не референс.
       3. белым по ТЁМНОМУ      → чисто (1.7 %) И совпадает с референсом. Принято.

     Вывод: генератору нужен СПЛОШНОЙ НАЗВАННЫЙ фон; его цвет безразличен.
     Свечение давала пустота, а не белая линия.

     Альфа не нужна: картинка заполняет плитку целиком, её собственный тёмный фон
     и есть плитка, поэтому шва нет даже при небольшом расхождении оттенка. */
  --c9-icon-plate-bg:     #16150f;
  --c9-icon-plate-border: rgba(255, 255, 255, .10);
}

[data-theme="dark"] {
  --c9-accent-soft:   rgba(238, 106, 33, .16);
  --c9-accent-line:   rgba(238, 106, 33, .38);

  --c9-bg:            #100f0b;
  --c9-bg-alt:        #16150f;
  --c9-surface:       #1b1a13;
  --c9-surface-2:     #222018;
  --c9-surface-dark:  #1b1a13;

  --c9-text:          #f4f3ef;
  --c9-text-muted:    #a3a199;
  --c9-text-faint:    #7d7b73;

  --c9-border:        #2c2a20;
  --c9-border-strong: #3a382c;

  --c9-shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
  --c9-shadow:        0 4px 16px rgba(0, 0, 0, .45);
  --c9-shadow-lg:     0 18px 48px rgba(0, 0, 0, .6);

  --c9-header-bg:     rgba(16, 15, 11, .82);
}

/* ==========================================================================
   Базовое
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--c9-header-h) + 16px); }

body {
  margin: 0;
  background: var(--c9-bg);
  color: var(--c9-text);
  font-family: var(--c9-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* Шкала поднята 12.08.2026: прежняя (H1 до 3.1rem, H2 до 2.35rem) была
   заметно мельче референса, и страница из-за этого читалась вяло.
   Трекинг ужат вместе с кеглем — крупный Manrope без этого рассыпается. */
h1, h2, h3, h4, .c9-display {
  font-family: var(--c9-font-head);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--c9-text);
}

h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--c9-accent); text-decoration: none; }
a:hover { color: var(--c9-accent-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

.c9-container {
  width: 100%;
  max-width: var(--c9-container);
  margin-inline: auto;
  padding-inline: 20px;
}

.c9-muted  { color: var(--c9-text-muted); }
.c9-accent { color: var(--c9-accent); }

:focus-visible {
  outline: 2px solid var(--c9-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.c9-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c9-accent); color: var(--c9-on-accent);
  padding: 12px 20px; border-radius: 0 0 var(--c9-radius-sm) 0;
}
.c9-skip:focus { left: 0; }

/* ==========================================================================
   Секции — визуально автономны (§11.8 брифа).
   Каждая несёт свой фон и свои отбивки, ни одна не «затекает» в соседнюю,
   поэтому режется в отдельный фрагмент RecCMS без переделки.
   ========================================================================== */

.c9-section { padding-block: var(--c9-section-y); background: var(--c9-bg); }
.c9-section--alt  { background: var(--c9-bg-alt); }
.c9-section--dark { background: var(--c9-surface-dark); color: var(--c9-on-dark); }
.c9-section--dark h1,
.c9-section--dark h2,
.c9-section--dark h3 { color: var(--c9-on-dark); }

/* 🔴 КАРТОЧКА ВНУТРИ ТЁМНОЙ СЕКЦИИ.
   Найдено владельцем 12.08.2026: финальный призыв переехал на тёмную секцию,
   а `.c9-cta` осталась на `--c9-surface` — в СВЕТЛОЙ теме это белый фон,
   и заголовок с кнопкой-призраком, уже покрашенные в цвет для тёмного,
   оказались светлыми на белом. В тёмной теме баг не виден вовсе:
   там `--c9-surface` и так тёмный.

   Правило общее, а не заплатка на .c9-cta: любая карточка на тёмной секции
   обязана быть полупрозрачной подложкой, а не «поверхностью» темы. Иначе
   тот же дефект вернётся с первой же карточкой, которую туда положат. */
.c9-section--dark .c9-card,
.c9-section--dark .c9-cta,
.c9-section--dark .c9-panel,
.c9-section--dark .c9-slot {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: var(--c9-on-dark);
}
.c9-section--dark .c9-cta p,
.c9-section--dark .c9-panel p,
.c9-section--dark .c9-slot,
.c9-section--dark .c9-slot span { color: var(--c9-on-dark-muted); }
.c9-section--dark .c9-slot b { color: var(--c9-on-dark); }
.c9-section--dark .c9-muted { color: var(--c9-on-dark-muted); }

/* Прайс-таблица на тёмной секции — тот же случай и то же лечение.
   Заведена для первого экрана /ceny: цена обязана быть видна сразу,
   а первый экран у нас тёмный в обеих темах. Без этих строк
   `--c9-surface-2` дал бы в СВЕТЛОЙ теме белые плитки на тёмном фоне
   с текстом, покрашенным для тёмного, — ровно дефект .c9-cta. */
.c9-section--dark .c9-price-table { border-color: rgba(255, 255, 255, .12); }
.c9-section--dark .c9-price-row { background: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .12); }
.c9-section--dark .c9-price-row__name small { color: var(--c9-on-dark-muted); }
.c9-section--dark .c9-price-note { color: var(--c9-on-dark-muted); }

.c9-section-head { max-width: 780px; margin: 0 auto clamp(26px, 3vw, 42px); text-align: center; }
.c9-section-head p { color: var(--c9-text-muted); font-size: 1.05rem; }
.c9-section--dark .c9-section-head p { color: var(--c9-on-dark-muted); }

.c9-eyebrow {
  display: inline-block;
  font-family: var(--c9-font-head);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c9-accent);
  background: var(--c9-accent-soft);
  border: 1px solid var(--c9-accent-line);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 18px;
}

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

/* 🔴 Ховер кнопки — тоже ОВЕРЛЕЙ, а не смена background/border.
   Правило то же, что у карточки: в переходах живут только transform и opacity.
   Заливка ховера лежит в ::before с `z-index: -1`; при `isolation: isolate`
   он по порядку отрисовки идёт ВЫШЕ собственного фона кнопки и НИЖЕ текста —
   то есть подкрашивает кнопку, не перекрывая подпись.
   Цвет текста и рамки переключается мгновенно: это состояние, а не движение. */
.c9-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--c9-font-head); font-weight: 700; font-size: .98rem;
  padding: 13px 24px; border-radius: var(--c9-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.c9-btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; opacity: 0; pointer-events: none;
}
.c9-btn:hover { text-decoration: none; }

@media (hover: hover) {
  .c9-btn { transition: transform .16s ease; }
  .c9-btn::before { transition: opacity .16s ease; }
  .c9-btn:hover { transform: translateY(-2px); }
  .c9-btn:hover::before { opacity: 1; }
  .c9-btn:active { transform: translateY(0); }
}

.c9-btn--primary { background: var(--c9-accent); color: var(--c9-on-accent); }
.c9-btn--primary::before { background: var(--c9-accent-hover); }
.c9-btn--primary:hover { color: var(--c9-on-accent); }

.c9-btn--ghost {
  background: transparent; color: var(--c9-text);
  border-color: var(--c9-border-strong);
}
.c9-btn--ghost::before { background: var(--c9-accent-soft); border: 1px solid var(--c9-accent); border-radius: inherit; }
.c9-btn--ghost:hover { color: var(--c9-accent); }

/* 🔴 КНОПКА-ПРИЗРАК В ЛЮБОМ ТЁМНОМ КОНТЕКСТЕ, а не только на тёмной секции.
   Найдено гардом 12.08.2026 после того, как владелец нашёл однотипный дефект
   в финальном призыве: `.c9-product-note` — тёмная карточка, но НЕ секция,
   поэтому кнопка-призрак внутри неё брала `--c9-text`, то есть почти тот же
   цвет, что и её фон. Контраст 1.0:1 — кнопки на странице просто не было
   видно, и ровно в светлой теме, где на неё никто не смотрел.
   Список контекстов держать здесь одним местом: заведёшь новую тёмную
   подложку — допиши сюда, иначе дефект вернётся третий раз. */
.c9-section--dark .c9-btn--ghost,
.c9-product-note .c9-btn--ghost,
.c9-preview .c9-btn--ghost { color: var(--c9-on-dark); border-color: rgba(255, 255, 255, .22); }
.c9-section--dark .c9-btn--ghost:hover,
.c9-product-note .c9-btn--ghost:hover,
.c9-preview .c9-btn--ghost:hover { color: var(--c9-accent); }

.c9-btn--sm { padding: 9px 18px; font-size: .9rem; }
.c9-btn--lg { padding: 15px 30px; font-size: 1.05rem; }

.c9-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Шапка
   ========================================================================== */

.c9-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--c9-header-h);
  background: var(--c9-header-bg);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.c9-header.is-stuck { border-bottom-color: var(--c9-border); box-shadow: var(--c9-shadow-sm); }

.c9-header__inner {
  height: 100%; display: flex; align-items: center; gap: 28px;
}

.c9-logo {
  font-family: var(--c9-font-head); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.03em;
  color: var(--c9-text); text-decoration: none; flex-shrink: 0;
}
.c9-logo:hover { color: var(--c9-text); text-decoration: none; }
.c9-logo b { color: var(--c9-accent); font-weight: 800; }

.c9-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.c9-nav a {
  font-size: .95rem; font-weight: 500; color: var(--c9-text);
  padding: 8px 13px; border-radius: var(--c9-radius-sm);
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.c9-nav a:hover { background: var(--c9-accent-soft); color: var(--c9-accent); text-decoration: none; }

/* Активный пункт подчёркнут оранжевым — единственное место, где акцент
   работает не кнопкой. Ровно как в референсе: оранжевого мало и он точечный. */
.c9-nav a[aria-current="page"] { color: var(--c9-text); font-weight: 600; }
.c9-nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  border-radius: 2px; background: var(--c9-accent);
}

.c9-header__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* переключатель темы */
.c9-theme-toggle {
  display: inline-flex; align-items: center;
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
  border-radius: 999px; padding: 3px; cursor: pointer;
}
.c9-theme-toggle span {
  display: grid; place-items: center; width: 30px; height: 26px;
  border-radius: 999px; color: var(--c9-text-faint);
  transition: background-color .18s ease, color .18s ease;
}
.c9-theme-toggle .c9-ic-sun { background: var(--c9-bg); color: var(--c9-accent); box-shadow: var(--c9-shadow-sm); }
[data-theme="dark"] .c9-theme-toggle .c9-ic-sun { background: none; color: var(--c9-text-faint); box-shadow: none; }
[data-theme="dark"] .c9-theme-toggle .c9-ic-moon { background: var(--c9-surface); color: var(--c9-accent); box-shadow: var(--c9-shadow-sm); }

/* переключатель языков — ТОЛЬКО разметка, логику даёт ядро RecCMS */
.c9-lang { position: relative; }
.c9-lang__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--c9-border);
  color: var(--c9-text); font-family: var(--c9-font-head); font-weight: 700; font-size: .85rem;
  padding: 7px 12px; border-radius: var(--c9-radius-sm); cursor: pointer;
}
.c9-lang__trigger:hover { border-color: var(--c9-accent); color: var(--c9-accent); }
.c9-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 176px;
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); box-shadow: var(--c9-shadow-lg);
  padding: 6px; display: none; z-index: 20;
}
.c9-lang.is-open .c9-lang__menu { display: block; }
.language-option {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--c9-font-body); font-size: .92rem; color: var(--c9-text);
  padding: 9px 12px; border-radius: var(--c9-radius-sm);
}
.language-option:hover { background: var(--c9-accent-soft); color: var(--c9-accent); }
.language-option.is-active { color: var(--c9-accent); font-weight: 600; }

/* телефон в шапке — слот, включается снятием hidden (см. index.html) */
.c9-header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--c9-font-head); font-weight: 700; font-size: .95rem;
  color: var(--c9-text); text-decoration: none; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--c9-radius-sm);
}
.c9-header__phone:hover { color: var(--c9-accent); text-decoration: none; background: var(--c9-accent-soft); }
.c9-header__phone[hidden] { display: none; }

/* бургер */
.c9-burger {
  display: none; width: 42px; height: 38px;
  background: transparent; border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius-sm); cursor: pointer;
  padding: 0; place-items: center;
}
.c9-burger i { display: block; width: 18px; height: 2px; background: var(--c9-text); position: relative; transition: background-color .2s; }
.c9-burger i::before, .c9-burger i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--c9-text);
  transition: transform .22s ease, top .22s ease;
}
.c9-burger i::before { top: -6px; }
.c9-burger i::after  { top: 6px; }
.c9-burger.is-open i { background: transparent; }
.c9-burger.is-open i::before { top: 0; transform: rotate(45deg); }
.c9-burger.is-open i::after  { top: 0; transform: rotate(-45deg); }

/* мобильное меню */
.c9-mobile-menu {
  position: fixed; inset: var(--c9-header-h) 0 0; z-index: 99;
  background: var(--c9-bg); padding: 24px 20px 40px;
  overflow-y: auto; display: none;
}
.c9-mobile-menu.is-open { display: block; }
.c9-mobile-menu a {
  display: block; font-family: var(--c9-font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--c9-text); padding: 14px 0; border-bottom: 1px solid var(--c9-border);
  text-decoration: none;
}
.c9-mobile-menu a:hover { color: var(--c9-accent); text-decoration: none; }
.c9-mobile-menu .c9-btn { width: 100%; margin-top: 24px; }

/* ==========================================================================
   Герой
   ========================================================================== */

/* 🔴 Герой тёмный в ОБЕИХ темах — редизайн 12.08.2026.
   Причина не вкусовая: страница читалась плоской, потому что все секции были
   одного тона. Тёмный первый экран задаёт тот контраст, который в референсе
   и делает страницу «дорогой», и он же роднит главную с документными
   страницами — там первый экран тоже тёмный. */
.c9-hero { position: relative; overflow: hidden;
  padding-block: clamp(44px, 6vw, 84px) clamp(48px, 6vw, 88px);
  background: var(--c9-surface-dark); color: var(--c9-on-dark); }
/* Оранжевое свечение за превью — единственная заливка акцентом на странице.
   Нужна, чтобы тёмный первый экран не читался как плоский чёрный прямоугольник;
   держится на 16 % прозрачности, то есть остаётся подсветкой, а не фоном. */
.c9-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -280px; right: -200px; width: 820px; height: 820px;
  background: radial-gradient(closest-side, rgba(238, 106, 33, .16), rgba(238, 106, 33, 0) 70%);
}
.c9-hero > .c9-container { position: relative; z-index: 1; }
.c9-hero h1 { color: var(--c9-on-dark); }
.c9-hero .c9-hero__lead { color: var(--c9-on-dark-muted); }
.c9-hero .c9-hero__lead strong { color: var(--c9-on-dark); }
.c9-hero .c9-trust { border-top-color: rgba(255, 255, 255, .12); }
.c9-hero .c9-trust__item span { color: var(--c9-on-dark-muted); }
.c9-hero .c9-trust__item b { color: var(--c9-on-dark); }
.c9-hero .c9-btn--ghost { color: var(--c9-on-dark); border-color: rgba(255, 255, 255, .22); }
.c9-hero .c9-btn--ghost:hover { color: var(--c9-accent); }
.c9-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.c9-hero h1 { margin-bottom: 22px; }
.c9-hero__lead { font-size: 1.12rem; color: var(--c9-text-muted); max-width: 30em; margin-bottom: 14px; }
.c9-hero__lead strong { color: var(--c9-text); font-weight: 600; }
.c9-hero .c9-btn-row { margin-top: 30px; }

/* Правая колонка героя — просто держатель: рамку, подложку и тень несёт
   .c9-preview внутри. Так подмена превью на настоящий скриншот не потребует
   вспоминать, где живёт оформление кадра. */
.c9-hero__shot { position: relative; }
.c9-hero__shot img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   ПРЕВЬЮ ДАННЫХ — то, что стоит вместо скриншота, пока его нет

   🔴 ГРАНИЦА, И ОНА НЕ ПРО ТЕХНОЛОГИЮ (REDESIGN_BRIEF §1).
      Можно показывать ДОКУМЕНТ И СТРУКТУРУ ДАННЫХ: строки, графы, суммы.
      Нельзя рисовать ОКНО ПРОГРАММЫ — сайдбар, вкладки, шапку «Заказ-наряд
      № 000123», кнопки интерфейса. Второе — это выдуманный интерфейс
      из референса, просто свёрстанный нами, и §7 с §8 он нарушает так же.
      Цифры — из образца бланка, который уже собран генератором и согласован.

   🔴 Подпись под превью обязана называть вещи своими именами. Мы не выдаём
      это за снимок экрана — именно поэтому его и можно показывать.

   Контейнер держит пропорцию, чтобы подмена содержимого на настоящий
   <img> со скриншотом не сдвинула вёрстку ни на пиксель.
   ========================================================================== */

.c9-preview {
  position: relative;
  background: var(--c9-icon-plate-bg);
  border: 1px solid var(--c9-icon-plate-border);
  border-radius: var(--c9-radius-lg);
  box-shadow: var(--c9-shadow-lg);
  padding: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
}
.c9-preview__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--c9-font-head); font-weight: 700; font-size: .95rem;
  color: var(--c9-on-dark); margin-bottom: 14px;
}
.c9-preview__label span { font-family: var(--c9-font-body); font-weight: 400; font-size: .8rem; color: var(--c9-on-dark-muted); }

.c9-preview table { width: 100%; border-collapse: collapse; font-size: .84rem; color: var(--c9-on-dark); }
.c9-preview th {
  text-align: left; font-family: var(--c9-font-head); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c9-on-dark-muted); padding: 0 10px 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.c9-preview td { padding: 10px 10px 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.c9-preview th:last-child, .c9-preview td:last-child { text-align: right; padding-right: 0; }
.c9-preview th:nth-child(2), .c9-preview td:nth-child(2),
.c9-preview th:nth-child(3), .c9-preview td:nth-child(3) { text-align: right; white-space: nowrap; }
.c9-preview tr:last-child td { border-bottom: 0; font-family: var(--c9-font-head); font-weight: 800; }
.c9-preview tr:last-child td:last-child { color: var(--c9-accent); font-size: 1.05rem; }

.c9-preview__foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .83rem; color: var(--c9-on-dark-muted);
}
.c9-preview__foot img { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }

.c9-preview-note {
  margin: 14px 0 0; font-size: .8rem; line-height: 1.45;
  color: var(--c9-on-dark-muted); text-align: center;
}

@media (max-width: 560px) {
  .c9-preview th:nth-child(3), .c9-preview td:nth-child(3) { display: none; }
}

/* плашки доверия под героем */
.c9-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px; margin-top: 44px; padding-top: 32px;
  border-top: 1px solid var(--c9-border);
}
.c9-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.c9-trust__item img { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; }
.c9-trust__item span { font-size: .9rem; line-height: 1.4; color: var(--c9-text-muted); }
.c9-trust__item b { display: block; font-weight: 600; color: var(--c9-text); }

/* ==========================================================================
   Три отличия — иллюстрации
   ========================================================================== */

.c9-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 26px); }
/* Редизайн: было три голых колонки «картинка + текст» на общем фоне —
   именно они и читались как плоскость. Стало три самостоятельные карточки. */
.c9-three__item { text-align: center; padding: clamp(20px, 2.4vw, 30px); }

/* Иллюстрация приходит из генератора НА СПЛОШНОМ ТЁМНОМ ФОНЕ — прозрачность
   он не отдаёт (см. историю в блоке токенов иконок). Поэтому она живёт
   в тёмной карточке: собственный фон картинки и есть карточка, шва нет.
   В светлой теме это тёмная панель на светлой секции, в тёмной — сливается. */
.c9-three__art {
  margin-bottom: 22px;
  background: var(--c9-icon-plate-bg);
  border: 1px solid var(--c9-icon-plate-border);
  border-radius: var(--c9-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.c9-three__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c9-three__item h3 { margin-bottom: 10px; }
.c9-three__item p { color: var(--c9-text-muted); font-size: .96rem; }
.c9-three__arrow { color: var(--c9-accent); font-weight: 800; }

/* ==========================================================================
   Плитка возможностей
   ========================================================================== */

.c9-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.c9-panel {
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius-lg); padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--c9-shadow-sm);
}
.c9-panel > h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: 24px; }

.c9-features { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* Ховер и подсветка — через .c9-card в разметке: заливка ховера живёт
   в ::after и включается opacity, как у всех карточек. */
.c9-feature {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  background: var(--c9-surface-2); padding: 22px 10px 20px;
  color: var(--c9-text); text-decoration: none;
}
.c9-feature:hover { color: var(--c9-text); text-decoration: none; }
.c9-feature .c9-icon-plate { width: 40px; height: 40px; border-radius: 11px; }
.c9-feature span { font-size: .86rem; line-height: 1.3; font-weight: 600; font-family: var(--c9-font-head); }

/* ==========================================================================
   Цена
   ========================================================================== */

.c9-price-table { border: 1px solid var(--c9-border); border-radius: var(--c9-radius); overflow: hidden; }
.c9-price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 18px; background: var(--c9-surface-2);
  border-bottom: 1px solid var(--c9-border);
}
.c9-price-row:last-child { border-bottom: 0; }
.c9-price-row__name { font-size: .96rem; }
.c9-price-row__name b { display: block; font-family: var(--c9-font-head); font-weight: 700; font-size: 1rem; }
.c9-price-row__name small { color: var(--c9-text-muted); font-size: .84rem; }
.c9-price-row__val { font-family: var(--c9-font-head); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
/* Единственная выделенная строка на всю таблицу: бесплатный тариф — это
   то, ради чего сюда смотрят. Больше акцентов в прайсе не заводить. */
.c9-price-row--free { background: var(--c9-accent-soft); box-shadow: inset 3px 0 0 var(--c9-accent); }
.c9-price-row--free .c9-price-row__val { color: var(--c9-accent); font-size: 1.25rem; }
.c9-price-note { font-size: .86rem; color: var(--c9-text-muted); }

/* ==========================================================================
   Демо и «для кого»
   ========================================================================== */

.c9-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
/* 🔴 Пункт — БЛОК с абсолютной галочкой, а не flex-строка. Было `display:flex`,
   и это давало переполнение на узких экранах: у flex-контейнера КАЖДЫЙ инлайновый
   ребёнок становится отдельным flex-элементом, поэтому `<b>` внутри пункта
   разрезал текст на куски, а min-content строки становился их суммой — пункт
   переставал переноситься и распирал страницу. Поймано 12.08.2026 на
   /dokumenty/defektovochnaya-vedomost (390 px при колонке 322 на 414 px);
   на соседних страницах не проявлялось только потому, что куски были короче. */
.c9-checklist li { position: relative; padding-left: 30px; font-size: .96rem; }
.c9-checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--c9-accent-soft);
  border: 1px solid var(--c9-accent-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ee6a21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}

.c9-video {
  position: relative; border-radius: var(--c9-radius); overflow: hidden;
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
}
.c9-video img { display: block; width: 100%; }
.c9-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--c9-accent); color: var(--c9-on-accent);
  border: 0; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 26px rgba(238, 106, 33, .45);
  transition: transform .2s ease;
}
.c9-video__play:hover { transform: scale(1.07); }

/* ==========================================================================
   Слайдер экранов продукта (Swiper из ядра)
   ========================================================================== */

/* overflow НЕ переопределяем: у .swiper он hidden по умолчанию, и именно он
   обрезает соседние слайды. Поставили visible — слайды растянули страницу
   до 3100 px на телефоне и появилась горизонтальная прокрутка. */
.c9-screens { padding-bottom: 46px; }
.c9-screens .swiper-wrapper { align-items: stretch; }

.c9-screen { margin: 0; height: auto; }
/* Кнопка-обёртка снимка: настоящий <button>, а не img с onclick, — иначе
   кадр не открыть с клавиатуры. Своих размеров не вносит, чтобы слайд
   остался ровно таким, каким был до появления модалки. */
.c9-screen__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--c9-radius);
}
.c9-screen__zoom:focus-visible { outline: 2px solid var(--c9-accent); outline-offset: 3px; }
.c9-screen__zoom:hover img { border-color: var(--c9-accent-line); }
.c9-screen img {
  display: block; width: 100%; border-radius: var(--c9-radius);
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--c9-surface-2);
  transition: border-color .18s ease;
}
.c9-screen figcaption {
  margin-top: 14px; font-size: .9rem; line-height: 1.45;
  color: var(--c9-on-dark-muted);
}

/* Подпись «это демо-стенд» под слайдером и в модалке. Тон приглушённый:
   это оговорка, а не заголовок, но читаемая — иначе она не оговорка,
   а формальность мелким шрифтом. */
.c9-screens-note {
  margin: 18px auto 0; max-width: 640px; text-align: center;
  font-size: .86rem; line-height: 1.5; color: var(--c9-on-dark-muted);
}

.c9-screens-pagination {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; z-index: 2;
}
.c9-screens-pagination .swiper-pagination-bullet {
  width: 7px; height: 7px; background: var(--c9-on-dark-muted); opacity: .45;
  transition: width .2s ease, opacity .2s ease, background-color .2s ease;
}
.c9-screens-pagination .swiper-pagination-bullet-active {
  width: 22px; border-radius: 4px; background: var(--c9-accent); opacity: 1;
}

/* ==========================================================================
   Иконки: двухцветные (белая линия + оранжевый акцент #EE6A21), один комплект.

   🔴 ФИЛЬТРОМ ИХ ИНВЕРТИРОВАТЬ НЕЛЬЗЯ. Пока иконки были одноцветными, светлая
   тема получалась из `filter: invert(1)`. Для двухцветных это ломается:
   invert() превращает оранжевый в синий. Поэтому белая иконка в светлой теме
   сидит на тёмной подложке — так же, как в референсе дизайна, где иконки
   стоят в плитках. Комплект ассетов остаётся один вместо двух.
   ========================================================================== */

.c9-icon-plate {
  display: block; flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--c9-icon-plate-bg);
  border: 1px solid var(--c9-icon-plate-border);
  border-radius: 12px;
  overflow: hidden;   /* картинка заполняет плитку целиком — свой белый фон не виден */
}
.c9-icon-plate img { display: block; width: 100%; height: 100%; object-fit: contain; }

.c9-trust__item .c9-icon-plate { width: 36px; height: 36px; border-radius: 10px; }
.c9-niche .c9-icon-plate { width: 48px; height: 48px; }

/* Иллюстрации (art-*) и скриншоты (ui-*) — цветные, подложка им не нужна */

/* ==========================================================================
   Документы — трафиковое ядро
   ========================================================================== */

.c9-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.c9-doc {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); padding: 20px;
  color: var(--c9-text); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.c9-doc:hover { border-color: var(--c9-accent-line); color: var(--c9-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--c9-shadow); }
.c9-doc img { width: 34px; height: 34px; flex-shrink: 0; }
.c9-doc b { display: block; font-family: var(--c9-font-head); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.c9-doc span { font-size: .87rem; color: var(--c9-text-muted); line-height: 1.45; }

/* ==========================================================================
   Ниши — «кому подходит»
   ========================================================================== */

.c9-niches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.c9-niche {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); padding: 20px;
  color: var(--c9-text); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.c9-niche:hover { border-color: var(--c9-accent-line); color: var(--c9-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--c9-shadow); }
.c9-niche img { width: 38px; height: 38px; }
.c9-niche b { font-family: var(--c9-font-head); font-weight: 700; font-size: .98rem; }
.c9-niche span { font-size: .85rem; color: var(--c9-text-muted); line-height: 1.45; }

/* ==========================================================================
   Отзывы / кейсы — каркас под заполнение после пилотов (§8 брифа).
   Вымышленных отзывов в макете нет: слоты пустые и подписаны.
   ========================================================================== */

.c9-slot {
  border: 1px dashed var(--c9-border-strong); border-radius: var(--c9-radius);
  background: var(--c9-surface-2); padding: clamp(28px, 4vw, 48px);
  text-align: center; color: var(--c9-text-muted);
}
.c9-slot b { display: block; font-family: var(--c9-font-head); color: var(--c9-text); margin-bottom: 6px; }
.c9-slot span { font-size: .9rem; }

/* ==========================================================================
   Финальный призыв
   ========================================================================== */

.c9-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius-lg); padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--c9-shadow-sm);
}
.c9-cta h2 { margin-bottom: 6px; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.c9-cta p { color: var(--c9-text-muted); margin: 0; }

/* ==========================================================================
   Подвал
   ========================================================================== */

.c9-footer { background: var(--c9-bg-alt); border-top: 1px solid var(--c9-border); padding-block: clamp(44px, 5vw, 72px) 28px; }
.c9-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; gap: 32px; }
.c9-footer__about p { font-size: .9rem; color: var(--c9-text-muted); margin-top: 14px; max-width: 30em; }
.c9-footer h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c9-text-faint); margin-bottom: 14px; }
.c9-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.c9-footer ul a { font-size: .92rem; color: var(--c9-text-muted); text-decoration: none; }
.c9-footer ul a:hover { color: var(--c9-accent); }
.c9-footer__contact a { display: flex; align-items: center; gap: 9px; font-size: .95rem; color: var(--c9-text); text-decoration: none; }
.c9-footer__contact a:hover { color: var(--c9-accent); }
.c9-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.c9-footer__social a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c9-surface); border: 1px solid var(--c9-border); color: var(--c9-text-muted);
}
.c9-footer__social a:hover { border-color: var(--c9-accent); color: var(--c9-accent); }
.c9-footer__bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--c9-border);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .86rem; color: var(--c9-text-faint);
}

/* ==========================================================================
   Cookie-баннер — канонические атрибуты, см. main.js
   ========================================================================== */

/* ⚠️ Баннер прижат к НИЖНЕМУ ПРАВОМУ углу, а не растянут по центру низа.
   Замечание владельца 12.08.2026: по центру он накрывал карточку скачивания
   на первом экране документной страницы — то самое действие, ради которого
   страница существует. Лечится в два хода, оба без JS: главное действие
   поднято в первый экран слева (.c9-doc-hero), баннер сдвинут в угол справа.
   Поведение и атрибуты кнопок не тронуты — их подхватывает ядро. */
.c9-cookie {
  position: fixed; right: 16px; bottom: 16px; left: auto; z-index: 150;
  width: min(420px, calc(100vw - 32px));
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); box-shadow: var(--c9-shadow-lg);
  padding: 20px 22px;
  display: none; gap: 14px; align-items: center; flex-wrap: wrap;
}
.c9-cookie.is-visible { display: flex; }
.c9-cookie p { flex: 1 1 100%; font-size: .88rem; color: var(--c9-text-muted); margin: 0; }
.c9-cookie__actions { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; }

/* На телефоне баннер занимает всю ширину внизу — там же, где кнопки
   скачивания. Поэтому он поджат по высоте, а первый экран (см. блок
   документной страницы ниже) поднимает кнопки над ним. */
@media (max-width: 640px) {
  .c9-cookie { padding: 14px 16px; gap: 10px; }
  .c9-cookie p { font-size: .82rem; line-height: 1.45; }
  .c9-cookie__actions .c9-btn { padding: 8px 16px; font-size: .86rem; }
}

/* ==========================================================================
   Появление при скролле — поверх готового контента
   ========================================================================== */

.c9-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.c9-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .c9-reveal { opacity: 1; transform: none; }
}

/* Без JS контент виден целиком — прогрессивное улучшение */
.no-js .c9-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1100px) {
  .c9-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c9-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .c9-footer__about, .c9-footer__contact { grid-column: span 3; }
}

@media (max-width: 992px) {
  .c9-nav { display: none; }
  .c9-burger { display: grid; }
  .c9-hero__grid { grid-template-columns: 1fr; }
  .c9-hero__shot { order: -1; }
  .c9-split { grid-template-columns: 1fr; }
  .c9-three { grid-template-columns: 1fr; gap: 40px; }
  .c9-niches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c9-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .c9-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .c9-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c9-niches, .c9-docs { grid-template-columns: 1fr; }
  .c9-footer__grid { grid-template-columns: 1fr 1fr; }
  .c9-footer__about, .c9-footer__contact { grid-column: span 2; }
  .c9-cta { flex-direction: column; align-items: flex-start; }
  .c9-btn { width: 100%; }
  .c9-btn-row .c9-btn,
  .c9-cookie__actions .c9-btn,
  .c9-download__links .c9-btn { width: auto; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .c9-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   КОНТЕНТНАЯ СТРАНИЦА (документная / функциональная)
   Общие атомы для всех внутренних страниц: хлебные крошки, узкая колонка
   текста, таблица полей, блок скачивания, вопрос-ответ.
   Живут здесь, а не в стилях одной страницы: следом идут ещё 13 документных
   и 10 функциональных, им нужно то же самое.
   ========================================================================== */

.c9-breadcrumb { font-size: .86rem; color: var(--c9-text-faint); padding-block: 20px 0; }
.c9-breadcrumb a { color: var(--c9-text-muted); text-decoration: none; }
.c9-breadcrumb a:hover { color: var(--c9-accent); }
.c9-breadcrumb span { margin-inline: 7px; }

.c9-section--dark .c9-breadcrumb { color: var(--c9-on-dark-muted); }
.c9-section--dark .c9-breadcrumb a { color: var(--c9-on-dark-muted); }
.c9-section--dark .c9-breadcrumb a:hover { color: var(--c9-accent); }

.c9-article { max-width: 760px; }
.c9-article h2 { margin-top: 2em; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.c9-article h2:first-child { margin-top: 0; }
.c9-article h3 { margin-top: 1.6em; font-size: 1.15rem; }
.c9-article p, .c9-article li { color: var(--c9-text); font-size: 1.02rem; }
.c9-article ul, .c9-article ol { padding-left: 1.25em; margin: 0 0 1rem; }
.c9-article li { margin-bottom: .5em; }
.c9-article > p:first-of-type { font-size: 1.12rem; color: var(--c9-text-muted); }

/* ==========================================================================
   КАРТОЧКА КАК КОМПОНЕНТ — общая база для всех сеток
   Редизайн 12.08.2026: карточка обязана быть самостоятельным объектом
   (рамка, подложка, тень, ховер), а не подложкой под текст.

   🔴 Ховер сделан ОВЕРЛЕЕМ, а не сменой border/box-shadow, и это не украшение:
      бриф по анимации разрешает переходы только на transform и opacity —
      тени и рамки в transition дают перерисовку и подтормаживают. Поэтому
      подсветка рамки и тень лежат в ::after с opacity 0 и включаются opacity.
   🔴 Ховер — только под @media (hover: hover): на тач-экране он залипает
      после тапа и читается как поломка.
   ========================================================================== */

.c9-card {
  position: relative;
  background: var(--c9-surface);
  border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius);
  box-shadow: var(--c9-shadow-sm);
}
.c9-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--c9-accent-line);
  box-shadow: var(--c9-shadow);
  opacity: 0; pointer-events: none;
}

@media (hover: hover) {
  a.c9-card, .c9-card--hover { transition: transform .18s ease; }
  a.c9-card::after, .c9-card--hover::after { transition: opacity .18s ease; }
  a.c9-card:hover, .c9-card--hover:hover { transform: translateY(-3px); }
  a.c9-card:hover::after, .c9-card--hover:hover::after { opacity: 1; }

  /* Некликабельная карточка (графа, ошибка, отличие) на ховер только
     подсвечивает рамку и НЕ приподнимается: подъём читается как «сюда можно
     нажать», а нажимать там нечего. */
  .c9-field::after, .c9-numlist li::after, .c9-three__item::after { transition: opacity .18s ease; }
  .c9-field:hover::after, .c9-numlist li:hover::after, .c9-three__item:hover::after { opacity: 1; }

  /* Иллюстрация внутри карточки чуть наезжает на кадр — движение только
     transform, кадр держит overflow карточки. */
  .c9-three__art img { transition: transform .2s ease; }
  .c9-three__item:hover .c9-three__art img { transform: scale(1.04); }
}
a.c9-card { color: var(--c9-text); text-decoration: none; display: block; }
a.c9-card:hover { color: var(--c9-text); text-decoration: none; }

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН ДОКУМЕНТНОЙ СТРАНИЦЫ
   Слева заголовок, лид и скачивание, справа — превью самого бланка.
   Тёмный в обеих темах: он задаёт контраст, из-за отсутствия которого
   страница читалась плоской.

   ⚠️ Кнопки скачивания стоят ЗДЕСЬ, в середине первого экрана, а не внизу —
      cookie-баннер прижат к низу окна и накрывал собой ровно то действие,
      ради которого страница существует. Лечится расположением, а не JS.
   ========================================================================== */

.c9-doc-hero { padding-block: 0 clamp(48px, 6vw, 84px); }
.c9-doc-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-top: clamp(24px, 3vw, 44px);
}
.c9-doc-hero h1 { margin-bottom: 18px; }
.c9-doc-hero__lead { font-size: 1.1rem; color: var(--c9-on-dark-muted); max-width: 34em; }

/* Факты о самом файле — не обещания, а свойства того, что человек скачает */
.c9-doc-hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 0; }
.c9-doc-hero__facts li {
  font-size: .84rem; color: var(--c9-on-dark-muted);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 5px 13px;
}

/* Лист бланка. Обрезан по нижнему краю с растворением в фон секции:
   это первая страница из нескольких, и обрыв показывает, что она не одна. */
.c9-doc-hero__paper {
  position: relative;
  border-radius: var(--c9-radius);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
  overflow: hidden;
  aspect-ratio: 900 / 940;
  background: #fff;
}
.c9-doc-hero__paper img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Затемнение листа в тёмной теме — та же причина и тот же приём, что
   у карточек смежных бланков: оверлей на opacity, не `filter`.
   ::before, потому что ::after уже занят растворением низа страницы. */
.c9-doc-hero__paper::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(8, 7, 4, .24); opacity: 0;
}
[data-theme="dark"] .c9-doc-hero__paper::before { opacity: 1; }

/* Значок «крупнее» — постоянный, а не по ховеру: на тач-экране ховера нет,
   а знать, что лист открывается, нужно и там. */
.c9-doc-hero__zoom {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--c9-on-dark);
  background: rgba(8, 7, 4, .55); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}

@media (hover: hover) {
  a.c9-doc-hero__paper { transition: transform .18s ease; }
  .c9-doc-hero__paper::before, .c9-doc-hero__zoom { transition: opacity .18s ease, transform .18s ease; }
  a.c9-doc-hero__paper:hover { transform: translateY(-3px); }
  [data-theme="dark"] a.c9-doc-hero__paper:hover::before { opacity: 0; }
  a.c9-doc-hero__paper:hover .c9-doc-hero__zoom { transform: scale(1.08); }
}

.c9-doc-hero__paper::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to bottom,
              rgba(23, 21, 15, 0) 0%, rgba(23, 21, 15, .55) 62%, var(--c9-surface-dark) 100%);
  pointer-events: none;
}
/* У страницы-расчёта скачиваемого бланка нет, и рисовать «лист» под неё
   значило бы обещать файл, которого не существует. Вместо листа — та же
   иллюстрация, что и на главной: она приходит на сплошном тёмном фоне
   (прозрачности генератор не отдаёт), поэтому живёт в тёмной плитке. */
.c9-doc-hero__art {
  border-radius: var(--c9-radius-lg);
  border: 1px solid var(--c9-icon-plate-border);
  background: var(--c9-icon-plate-bg);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
}
.c9-doc-hero__art img { display: block; width: 100%; height: auto; }

.c9-doc-hero__caption {
  margin: 14px 0 0; font-size: .84rem; line-height: 1.45;
  color: var(--c9-on-dark-muted); text-align: center;
}

/* Блок скачивания — главное действие документной страницы */
.c9-download {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); padding: 20px 22px; margin-block: 28px;
}
.c9-download__text { flex: 1 1 260px; }
.c9-download__text b { display: block; font-family: var(--c9-font-head); margin-bottom: 3px; }
.c9-download__text span { font-size: .88rem; color: var(--c9-text-muted); }
.c9-download__links { display: flex; flex-wrap: wrap; gap: 9px; }

/* Тот же компонент внутри тёмной секции — отдельного не заводим */
.c9-section--dark .c9-download {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .13);
}
.c9-section--dark .c9-download__text b { color: var(--c9-on-dark); }
.c9-section--dark .c9-download__text span { color: var(--c9-on-dark-muted); }

/* ==========================================================================
   ОГЛАВЛЕНИЕ С ЯКОРЯМИ
   На документной странице 8–11 заголовков H2: это и навигация человеку,
   и внятная структура поисковику. Ссылки настоящие, без JS.
   ========================================================================== */

.c9-toc { padding-block: 22px; background: var(--c9-bg-alt); border-bottom: 1px solid var(--c9-border); }
.c9-toc__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.c9-toc__list a {
  display: inline-block; font-size: .88rem; color: var(--c9-text-muted);
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: 999px; padding: 7px 15px; text-decoration: none;
}
@media (hover: hover) {
  .c9-toc__list a { transition: transform .15s ease; }
  .c9-toc__list a:hover { transform: translateY(-2px); }
}
.c9-toc__list a:hover { color: var(--c9-accent); border-color: var(--c9-accent-line); text-decoration: none; }

/* ==========================================================================
   ГРАФЫ ДОКУМЕНТА — карточками, а не сплошной сеткой
   Таблица из трёх колонок («графа / что писать / пример») на телефоне
   превращалась в горизонтальную прокрутку; карточка читается в один столбец.
   ========================================================================== */

.c9-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 26px; }
/* Три колонки — для сеток на всю ширину контейнера, а не в колонке статьи.
   Заведено под «Что входит в тариф» на /ceny: девять карточек в две колонки
   оставляют девятую одну в ряду. Двухколоночная база не тронута — на ней
   стоят разборы граф на пяти документных страницах. */
.c9-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Колонка-флекс с примером, прижатым к низу: описания у граф разной длины,
   и без этого «Пример» стоял на разной высоте в соседних карточках. */
.c9-field { padding: 20px 22px; display: flex; flex-direction: column; }
.c9-field b {
  display: block; font-family: var(--c9-font-head); font-weight: 700;
  font-size: 1.02rem; margin-bottom: 7px;
}
.c9-field p { font-size: .93rem; color: var(--c9-text-muted); margin-bottom: 12px; }
.c9-field span {
  display: block; margin-top: auto; font-size: .87rem; line-height: 1.5;
  border-left: 2px solid var(--c9-accent-line);
  background: var(--c9-surface-2);
  border-radius: 0 var(--c9-radius-sm) var(--c9-radius-sm) 0;
  padding: 9px 13px;
}
.c9-field span i { display: block; font-style: normal; font-size: .78rem; color: var(--c9-text-faint); margin-bottom: 2px; }

/* ==========================================================================
   ПРОНУМЕРОВАННЫЕ КАРТОЧКИ — «частые ошибки» и пошаговые списки
   ========================================================================== */

.c9-numlist { list-style: none; counter-reset: c9num; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.c9-numlist li { counter-increment: c9num; padding: 20px 22px 20px 62px; }
.c9-numlist li::before {
  content: counter(c9num);
  position: absolute; left: 20px; top: 17px;
  font-family: var(--c9-font-head); font-weight: 800; font-size: 1.35rem;
  color: var(--c9-accent);
}
.c9-numlist b { display: block; font-family: var(--c9-font-head); font-size: 1rem; margin-bottom: 5px; }
.c9-numlist span { font-size: .93rem; color: var(--c9-text-muted); }

/* Таблица полей документа */
.c9-table-wrap {
  overflow-x: auto; margin-block: 24px;
  border: 1px solid var(--c9-border); border-radius: var(--c9-radius);
  background: var(--c9-surface);
}
.c9-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.c9-table th, .c9-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c9-border);
  vertical-align: top;
}
.c9-table th { font-family: var(--c9-font-head); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c9-text-faint); background: var(--c9-surface-2); }
.c9-table td:first-child { font-weight: 600; }
.c9-table tbody tr:nth-child(even) td { background: var(--c9-surface-2); }
.c9-table tr:last-child td { border-bottom: 0; }
.c9-table tbody tr:last-child b { color: var(--c9-accent); }

/* Врезка-предупреждение — с иконкой и заметной границей */
.c9-callout {
  position: relative;
  border: 1px solid var(--c9-accent-line);
  border-left-width: 3px;
  background: var(--c9-accent-soft);
  border-radius: var(--c9-radius-sm);
  padding: 18px 22px 18px 58px; margin-block: 26px;
}
.c9-callout::before {
  content: ""; position: absolute; left: 20px; top: 19px; width: 22px; height: 22px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee6a21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2M12 16.4h.01'/%3E%3C/svg%3E");
}
.c9-callout p { margin: 0; font-size: .97rem; }

/* Вопрос-ответ — <details>, работает без JS.
   🔴 ФОРМА `details > summary + div` МЕНЯТЬСЯ НЕ ДОЛЖНА: она совпадает
   с site/blocks/faq.html один в один, и от этого зависит переезд в блок `faq`
   (а значит и FAQPage, который движок собирает ИЗ ДАННЫХ блока). Оформление
   здесь — только CSS. */
.c9-faq { display: grid; gap: 10px; }
.c9-faq details {
  position: relative;
  background: var(--c9-surface); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); box-shadow: var(--c9-shadow-sm);
}
.c9-faq details[open] { border-color: var(--c9-accent-line); }
.c9-faq summary {
  cursor: pointer; list-style: none; padding: 17px 60px 17px 22px; position: relative;
  font-family: var(--c9-font-head); font-weight: 700; font-size: 1.02rem;
}
.c9-faq summary::-webkit-details-marker { display: none; }
/* Маркер поворачивается, а не подменяется символом: «+» на 45° читается
   как «×», а поворот — это transform, то есть разрешённое движение.
   Подмена content анимироваться не умеет вовсе. */
.c9-faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--c9-accent-soft); border: 1px solid var(--c9-accent-line);
  font-size: 1.15rem; color: var(--c9-accent); line-height: 1;
  transition: transform .18s ease;
}
.c9-faq details[open] summary::after { transform: rotate(45deg); }
.c9-faq details > div { padding: 0 22px 20px; color: var(--c9-text-muted); }

/* ==========================================================================
   СМЕЖНЫЕ БЛАНКИ — карточка с превью самого бланка
   Превью печатает `_tools/blank-forms/render.py` вместе с файлами
   (`assets/img/blanks/<slug>-preview.webp`), поэтому картинка на карточке
   всегда совпадает с тем, что скачается.
   ========================================================================== */

.c9-blanks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.c9-blank { overflow: hidden; }
.c9-blank__paper {
  position: relative;
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--c9-border);
}
.c9-blank__paper img { display: block; width: 100%; height: auto; }
/* 🔴 `display: block` обязателен: это <span>, а у строчного элемента
   вертикальный padding не раздвигает строку — тело карточки стояло
   без отбивок сверху и снизу. */
.c9-blank__body { display: block; padding: 18px 20px 20px; }
.c9-blank__body b { display: block; font-family: var(--c9-font-head); font-size: 1.02rem; margin-bottom: 5px; }
.c9-blank__body span { display: block; font-size: .89rem; color: var(--c9-text-muted); line-height: 1.45; }
.c9-blank__body em {
  display: inline-block; font-style: normal; font-weight: 700; font-size: .82rem;
  font-family: var(--c9-font-head); color: var(--c9-accent); margin-top: 12px;
}
/* У страницы без скачиваемого бланка (расчёт нормочаса) превью нет —
   вместо листа стоит иконка на той же тёмной плитке, что и везде. */
.c9-blank__paper--icon { display: grid; place-items: center; background: var(--c9-icon-plate-bg); }
.c9-blank__paper--icon img { width: 84px; height: 84px; }

/* 🔴 Затемнение белого листа в ТЁМНОЙ теме.
   Бланк — это белая страница A4, и в тёмной теме три таких плитки бьют
   по глазам сильнее, чем весь остальной экран вместе. Приглушаем оверлеем,
   а не `filter: brightness`: оверлей гасится по opacity, то есть попадает
   в разрешённые для перехода свойства, а фильтр — нет.
   На ховер лист проявляется в полную яркость: это и подсказка, что карточка
   кликабельна, и возможность разглядеть бланк. */
.c9-blank__paper:not(.c9-blank__paper--icon)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(8, 7, 4, .26); opacity: 0;
}
[data-theme="dark"] .c9-blank__paper:not(.c9-blank__paper--icon)::after { opacity: 1; }

@media (hover: hover) {
  .c9-blank__paper::after { transition: opacity .18s ease; }
  .c9-blank__paper img { transition: transform .2s ease; }
  [data-theme="dark"] .c9-blank:hover .c9-blank__paper::after { opacity: 0; }
  .c9-blank:hover .c9-blank__paper img { transform: scale(1.035); }
}

/* ==========================================================================
   МОДАЛКА С ПРЕВЬЮ БЛАНКА

   🔴 Своего JS нет ни строки: модалку открывает Bootstrap из `assets/vendor`
   (`data-bs-toggle="modal"`), тот же, что в ядре RecCMS. Свой лайтбокс здесь
   был бы ровно тем, что §11 запрещает делать со слайдерами: чужой механизм,
   который при переносе в тему надо тащить отдельно.

   🔴 Прогрессивное улучшение: триггер — это <a href> на сам файл превью.
   Без JS клик открывает картинку, с JS Bootstrap перехватывает и показывает
   модалку. Кнопок скачивания в модалке три: человек, который открыл бланк
   разглядеть, — это человек, который собрался его забрать.

   Своя окраска нужна потому, что тему у нас переключает `[data-theme]`,
   а Bootstrap — свой `data-bs-theme`; без этого окно было бы белым в обеих.
   ========================================================================== */

.c9-modal {
  background: var(--c9-surface); color: var(--c9-text);
  border: 1px solid var(--c9-border); border-radius: var(--c9-radius-lg);
  box-shadow: var(--c9-shadow-lg);
  padding: clamp(18px, 2.4vw, 26px);
}
.c9-modal__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.c9-modal__head b { display: block; font-family: var(--c9-font-head); font-size: 1.05rem; }
.c9-modal__head span { display: block; font-size: .87rem; color: var(--c9-text-muted); margin-top: 3px; }

.c9-modal__close {
  flex-shrink: 0; margin-left: auto;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
  border-radius: 50%; color: var(--c9-text-muted); cursor: pointer;
}
.c9-modal__close:hover { color: var(--c9-accent); border-color: var(--c9-accent-line); }

.c9-modal__paper {
  background: #fff; border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius-sm); overflow: hidden;
  max-height: 62vh; overflow-y: auto;
}
.c9-modal__paper img { display: block; width: 100%; height: auto; }

/* Снимок экрана, а не бланк. Разница не косметическая: у бланка A4, он
   заведомо выше окна и его листают — отсюда `max-height: 62vh` выше.
   Кадр интерфейса 3:2, и обрезать его нельзя: модалка существует ровно
   затем, чтобы экран увидели ЦЕЛИКОМ. Поэтому высоту ограничивает не
   контейнер, а сама картинка, и вписывается она в окно без прокрутки. */
.c9-modal__paper--screen { max-height: none; overflow: visible; background: transparent; border: 0; }
.c9-modal__paper--screen img {
  /* 78vh проверено с панелью листания: заголовок + кадр + стрелки дают
     ~940 px при окне 1000 и в высоту помещаются. Кадр не подрезается —
     то, что снизу выглядит как срезанный ряд таблицы, это край самого
     снимка: админка снимается со сдвигом (scroll в car9-ui.js). */
  width: auto; max-width: 100%; max-height: 78vh; margin-inline: auto;
  border-radius: var(--c9-radius-sm);
}

/* Листание кадров в модалке */
.c9-modal__nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 16px;
}
.c9-modal__arrow {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
  border-radius: 50%; color: var(--c9-text); cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.c9-modal__arrow:hover { color: var(--c9-accent); border-color: var(--c9-accent-line); }
.c9-modal__arrow:focus-visible { outline: 2px solid var(--c9-accent); outline-offset: 2px; }
.c9-modal__count {
  font-size: .88rem; color: var(--c9-text-muted);
  font-variant-numeric: tabular-nums; min-width: 62px; text-align: center;
}
.c9-modal__note {
  margin: 14px 0 0; text-align: center;
  font-size: .84rem; line-height: 1.5; color: var(--c9-text-muted);
}
.c9-modal .c9-download { margin-block: 18px 0; }

/* Снимок экрана внутри статьи (`/instrukcii/`, документные страницы).
   Отдельно от `.c9-screen`: тот живёт в слайдере тёмной секции и имеет жёсткий
   слот 900×600, этот встаёт в поток текста шириной колонки. Подпись —
   ЧАСТЬ КОМПОНЕНТА, а не украшение: у кадра со стенда обязана быть оговорка
   «данные вымышлены», и держать её в разметке каждой страницы значит однажды
   её забыть. */
.c9-shot { margin: 26px 0; }
.c9-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--c9-radius);
  border: 1px solid var(--c9-border);
  background: var(--c9-surface-2);
}
.c9-shot figcaption {
  margin-top: 10px; font-size: .92rem; line-height: 1.5;
  color: var(--c9-text-muted);
}
.c9-shot__demo { display: block; margin-top: 4px; font-size: .82rem; opacity: .8; }

/* Лист документа внутри статьи. Отличается от снимка экрана двумя вещами:
   лист узкий и высокий (A4 → 900×1273), и на тёмной теме белая бумага во всю
   колонку слепит. Поэтому ширина ограничена, лист по центру и притушен тем же
   приёмом, что `.c9-doc-hero__paper`, — оверлеем, а не `filter`. */
.c9-shot--paper { max-width: 520px; margin-inline: auto; }
.c9-shot--paper a { position: relative; display: block; border-radius: var(--c9-radius); overflow: hidden; }
.c9-shot--paper a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(8, 7, 4, .24); opacity: 0;
}
[data-theme="dark"] .c9-shot--paper a::before { opacity: 1; }
.c9-shot--paper a:focus-visible { outline: 2px solid var(--c9-accent); outline-offset: 3px; }
.c9-shot--paper figcaption { text-align: center; }

/* Продуктовый блок ВНИЗУ документной страницы — реклама после пользы */
.c9-product-note {
  background: var(--c9-surface-dark); color: var(--c9-on-dark);
  border-radius: var(--c9-radius-lg); padding: clamp(26px, 3.4vw, 44px);
  margin-top: 0;
}
.c9-product-note h2 { color: var(--c9-on-dark); margin-top: 0; }
.c9-product-note p { color: var(--c9-on-dark-muted); }
.c9-product-note .c9-checklist li { color: var(--c9-on-dark); }

@media (max-width: 992px) {
  .c9-article { max-width: none; }
  .c9-doc-hero__grid { grid-template-columns: 1fr; }
  /* Превью уходит ПОД текст, а не над ним, как на главной: на документной
     странице первым экраном обязаны быть заголовок и кнопки скачивания. */
  .c9-doc-hero__paper { max-width: 460px; margin-inline: auto; }
  .c9-blanks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Три колонки на планшете становятся двумя, а на ≤760 одной — там уже
     работает общее правило .c9-fields ниже. */
  .c9-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .c9-fields, .c9-numlist { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .c9-blanks { grid-template-columns: 1fr; }

  /* ⚠️ Первый экран на телефоне: место здесь считанное, а cookie-баннер
     прижат к низу окна. Отбивки поджаты не «для красоты», а чтобы кнопки
     скачивания оказались ВЫШЕ баннера — иначе он накрывает единственное
     действие, ради которого страница существует. Проверено замером
     на 414×896: кнопки заканчиваются раньше, чем начинается баннер.
     Меняешь кегль или отбивки здесь — перемерь. */
  .c9-breadcrumb { padding-block: 12px 0; }
  .c9-doc-hero__grid { padding-top: 14px; }
  .c9-doc-hero .c9-eyebrow { margin-bottom: 12px; }
  .c9-doc-hero h1 { font-size: 1.8rem; margin-bottom: 14px; }
  .c9-doc-hero__lead { font-size: 1rem; }
  .c9-doc-hero .c9-download { margin-block: 20px; padding: 16px 18px; gap: 12px; }
  .c9-doc-hero__facts { margin-top: 16px; }
  .c9-download__links { gap: 8px; }
  .c9-download__links .c9-btn { padding: 9px 12px; flex: 0 1 auto; }
}

/* ==========================================================================
   КАЛЬКУЛЯТОР — общий слой, не страница
   Первый потребитель — /dokumenty/normochas-raschet (расчёт ставки).
   Второй уже известен — конструктор тарифа на /ceny (бриф §5), поэтому
   стили сразу здесь, а не в стилях одной страницы.

   🔴 Рядом с калькулятором на странице ОБЯЗАНА стоять статичная таблица
   расчёта текстом: робот скриптов не выполняет, и без неё страница
   для поиска остаётся без единой цифры. Это требование брифа §5,
   там же оно записано для конструктора тарифа.
   ========================================================================== */

.c9-calc {
  background: var(--c9-surface-2); border: 1px solid var(--c9-border);
  border-radius: var(--c9-radius); padding: clamp(18px, 2.4vw, 26px);
  margin-block: 28px;
}
.c9-calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
/* Подпись поля бывает в три строки («Постоянные расходы…»), а соседняя — в одну.
   Растянутая подпись прижимает поля ввода к низу ячейки, и они стоят в ряд. */
.c9-calc__field { display: flex; flex-direction: column; gap: 5px; }
.c9-calc__field label { font-size: .84rem; color: var(--c9-text-muted); line-height: 1.35; flex: 1 1 auto; }
.c9-calc__field input {
  font-family: var(--c9-font-head); font-size: 1rem; font-weight: 700;
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c9-border-strong); border-radius: var(--c9-radius-sm);
  background: var(--c9-surface); color: var(--c9-text);
}
.c9-calc__field input:focus { outline: 2px solid var(--c9-accent); outline-offset: 1px; }

.c9-calc__out { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c9-border); display: grid; gap: 11px; }
.c9-calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: .96rem; }
.c9-calc__row span { color: var(--c9-text-muted); }
.c9-calc__row b { font-family: var(--c9-font-head); font-size: 1.05rem; white-space: nowrap; }
.c9-calc__row--main { border-top: 1px solid var(--c9-border); padding-top: 13px; }
.c9-calc__row--main span { color: var(--c9-text); }
.c9-calc__row--main b { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--c9-accent); }
.c9-calc__note { font-size: .84rem; color: var(--c9-text-muted); margin: 16px 0 0; }

@media (max-width: 560px) { .c9-calc__grid { grid-template-columns: 1fr; } }

/* --- Галочки в калькуляторе: допы и период оплаты (/ceny) ---
   Второй потребитель калькулятора собирает не только величины, но и набор
   подписочных допов, поэтому чекбоксы живут в общем блоке, а не в стилях
   одной страницы. */
.c9-calc__opts { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.c9-calc__check { position: relative; display: block; padding-left: 32px; font-size: .92rem; cursor: pointer; }
.c9-calc__check input { position: absolute; left: 0; top: 1px; width: 19px; height: 19px; margin: 0; accent-color: var(--c9-accent); cursor: pointer; }
.c9-calc__check b { display: block; font-family: var(--c9-font-head); font-weight: 700; font-size: .95rem; }
.c9-calc__check span { display: block; font-size: .83rem; color: var(--c9-text-muted); line-height: 1.4; }

/* Выбранный тариф — единственный акцент в выводе конструктора */
.c9-calc__plan {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  background: var(--c9-accent-soft); border: 1px solid var(--c9-accent-line);
  border-radius: var(--c9-radius-sm); padding: 13px 16px; margin-bottom: 4px;
}
.c9-calc__plan b { font-family: var(--c9-font-head); font-size: 1.15rem; color: var(--c9-accent); }
.c9-calc__plan span { font-size: .88rem; color: var(--c9-text-muted); }

/* Подсказка появляется не всегда: пустой строкой блок схлопывается сам,
   поэтому отдельного «скрыть» в JS не нужно. */
.c9-calc__advice { font-size: .88rem; color: var(--c9-text-muted); margin: 12px 0 0; }
.c9-calc__advice:empty { display: none; }

@media (max-width: 560px) { .c9-calc__opts { grid-template-columns: 1fr; } }

/* ==========================================================================
   ТАРИФНЫЕ КАРТОЧКИ — пресеты над конструктором (/ceny)
   Бриф §5: «три готовых пресета над конструктором, чтобы выбор
   не парализовал».

   🔴 Выделен ровно один — бесплатный. Правило то же, что у .c9-price-row--free
   в блоке «Цена»: в прайсе один акцент, и он на «Гараже». Значка «популярный
   выбор» здесь нет и быть не может — продаж ещё не было, это выдуманная
   цифра из §7 брифа.
   ========================================================================== */

.c9-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: 30px; }
.c9-plan { padding: 26px 24px 28px; display: flex; flex-direction: column; }
.c9-plan__name { font-family: var(--c9-font-head); font-weight: 800; font-size: 1.15rem; }
.c9-plan__who { font-size: .88rem; color: var(--c9-text-muted); margin: 4px 0 18px; }
.c9-plan__price {
  font-family: var(--c9-font-head); font-weight: 800; line-height: 1.05;
  font-size: clamp(1.75rem, 3.4vw, 2.15rem);
}
.c9-plan__price small { display: block; font-size: .82rem; font-weight: 600; color: var(--c9-text-muted); margin-top: 6px; }
.c9-plan .c9-checklist { margin: 20px 0 24px; gap: 9px; }
.c9-plan .c9-checklist li { font-size: .91rem; }
/* Кнопка прижата к низу: у карточек разное число пунктов, и без этого
   они стояли на разной высоте. Тот же приём, что у «Примера» в .c9-field. */
.c9-plan .c9-btn { margin-top: auto; }

.c9-plan--free { background: var(--c9-accent-soft); border-color: var(--c9-accent-line); }
.c9-plan--free .c9-plan__price { color: var(--c9-accent); }

@media (max-width: 900px) { .c9-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }