/* COLD POWER® / Сила Холода — design code v2
   Единственный источник правды по цвету, типографике и отступам.
   Не добавлять новые цвета вне этого файла. */

/* Шрифты локально: fonts.googleapis.com из РФ режут (tools/fetch_fonts.py) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --cp-blue:        #0B4E9D;  /* фирменный синий, снят с CP-Logo.ai */
  --cp-blue-deep:   #083972;  /* hover на светлом */
  --cp-blue-bright: #0F6AD6;  /* hover на тёмном */
  --cp-navy:        #0D1524;  /* тёмные секции, основной текст */
  --cp-tint:        #E7EDF9;  /* подложки, бейджи */
  --cp-surface:     #F3F6FB;  /* чередование секций */
  --cp-line:        #DCE3EF;  /* границы, хайрлайны */
  --cp-white:       #FFFFFF;

  /* Text */
  --cp-text:    #0D1524;
  --cp-text-2:  #44526B;
  --cp-muted:   #7A879C;
  --cp-muted-2: #9BA7B9;
  --cp-on-dark:      #FFFFFF;
  --cp-on-dark-2:    #C3D0E4;
  --cp-on-dark-mute: #8FA3C4;

  /* Status — только формы и статусы */
  --cp-success: #1E8E5A;
  --cp-warning: #C08A16;
  --cp-error:   #B4342F;

  /* Type */
  --cp-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --cp-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing — база 4 */
  --cp-sp-1: 8px;
  --cp-sp-2: 16px;
  --cp-sp-3: 24px;
  --cp-sp-4: 40px;
  /* Боковое поле страницы. Держать ОДНИМ значением: на телефоне
     оно меняется, и блок, вытянутый за поля по --cp-sp-4,
     вылезал за экран ровно на разницу. */
  --cp-pad: var(--cp-sp-4);
  --cp-sp-5: 88px;

  --cp-container: 1320px;
  --cp-radius: 3px;
  --cp-shadow: 0 10px 28px rgba(13, 21, 36, .07);
  --cp-shadow-lg: 0 12px 32px rgba(13, 21, 36, .1);

  /* Значки ссылок в подвале — маской, а не картинкой: красятся
     currentColor, поэтому подхватывают и цвет ссылки, и её :hover,
     и не заводят в палитру чужой фирменный цвет. */
  --cp-tg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.6 20c-.2 1.1-.9 1.4-1.8.9l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.3-8.4c.4-.4-.1-.6-.6-.2L6 11.8l-5-1.6c-1.1-.3-1.1-1 .2-1.5l19.5-7.5c.9-.3 1.7.2 1.4 1.4z'/%3E%3C/svg%3E");

  --cp-mail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.2A2 2 0 0 1 4 4.2h16a2 2 0 0 1 2 2v.5l-10 5.8L2 6.7v-.5zM2 9l9.5 5.5a1 1 0 0 0 1 0L22 9v8.8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9z'/%3E%3C/svg%3E");

  /* Чертёжная подложка */
  --cp-grid-line: rgba(37, 84, 172, .07);
}

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

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

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

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

/* Переносов в заголовках нет. `hyphens: auto` рвал русские слова по слогам
   («реше-ния», «промыш-ленного») — в крупном кегле это выглядит браком
   вёрстки, а не типографикой. `overflow-wrap` оставляем: он срабатывает
   только на слове, которое иначе вылезет за экран (длинное обозначение
   модели на телефоне), и в обычном заголовке ничего не делает. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: manual; }
a { color: var(--cp-blue); text-decoration: none; }
a:hover { color: var(--cp-blue-deep); }
button, input, textarea { font: inherit; }
::selection { background: var(--cp-blue); color: #fff; }

/* ---------- Типографика ---------- */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; }
h3 { font-size: 20px; line-height: 1.22; letter-spacing: -.015em; }
p  { margin: 0; text-wrap: pretty; }

.cp-lead { font-size: 19px; line-height: 1.62; color: var(--cp-text-2); max-width: 60ch; }
.cp-body { font-size: 15px; line-height: 1.58; color: var(--cp-text-2); }

/* Моно-метка: все технические величины и нумерация */
.cp-label {
  font-family: var(--cp-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.cp-label--blue { color: var(--cp-blue); font-weight: 500; }
.cp-num { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .16em; color: var(--cp-blue); font-weight: 600; }
.cp-data { font-family: var(--cp-mono); font-weight: 500; letter-spacing: -.03em; color: var(--cp-blue); line-height: 1; }

/* ---------- Раскладка ---------- */
.cp-container { max-width: var(--cp-container); margin: 0 auto; padding: 0 var(--cp-pad); }

/* Длинный правовой текст: политика ПД, оферта. Не для маркетинговых блоков —
   там своя сетка. */
.cp-prose { margin-top: var(--cp-sp-4); color: var(--cp-text-2); font-size: 15.5px; line-height: 1.7; }
.cp-prose h2 { margin: var(--cp-sp-4) 0 var(--cp-sp-2); font-size: 19px; letter-spacing: -.01em; color: var(--cp-text); }
.cp-prose p { margin-bottom: var(--cp-sp-2); }
.cp-prose ul { margin: 0 0 var(--cp-sp-2) 20px; display: grid; gap: 7px; }
.cp-prose b { color: var(--cp-text); }

/* Согласие на обработку ПД. Чекбокс не предустановлен намеренно: согласие по
   152-ФЗ должно быть конкретным и осознанным, а галочка «по умолчанию» этому
   не отвечает. */
/* Кто платит — переключатель, а не выпадающий список: вариантов два,
   и оба должны быть видны сразу, без лишнего касания на телефоне.

   Подсветка выбранного задана дважды. :has() поддерживают все нынешние
   браузеры, но форма отправляет ДЕНЬГИ клиента, и в ней неприемлемо,
   чтобы в старом браузере было непонятно, что выбрано. Класс is-on
   ставит скрипт, :has() работает и до того, как скрипт отработал. */
.cp-payer { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-payer label { flex: 1 1 150px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  padding: 12px 14px; font-size: 14.5px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s; }
.cp-payer label:hover { border-color: var(--cp-blue); }
.cp-payer label.is-on,
.cp-payer label:has(input:checked) {
  border-color: var(--cp-blue); box-shadow: inset 0 0 0 1px var(--cp-blue); }
.cp-payer input { width: 16px; height: 16px; flex: none; accent-color: var(--cp-blue); }

.cp-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--cp-muted); cursor: pointer; }
.cp-consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--cp-blue); flex: none; }
.cp-consent a { color: var(--cp-blue); border-bottom: 1px solid rgba(37, 84, 172, .35); }

/* Honeypot: поле-ловушка. Не display:none — часть ботов такие поля пропускает,
   а уводом за пределы экрана ловятся и они. От человека скрыто полностью. */
.cp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ответ формы: успех или ошибка. */
.cp-form-status { font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: var(--cp-radius); }
.cp-form-status[data-kind="ok"] { background: rgba(30, 142, 90, .1); color: var(--cp-success); }
.cp-form-status[data-kind="err"] { background: rgba(180, 52, 47, .09); color: var(--cp-error); }

/* Незаполненный реквизит. Видно и на странице, и в предеплойной проверке —
   политика с неподставленным ИНН на боевом сайте хуже, чем её отсутствие:
   выглядит документом, не являясь им. */
.cp-todo { background: rgba(192, 138, 22, .14); color: var(--cp-warning); padding: 1px 6px; border-radius: var(--cp-radius); font-family: var(--cp-mono); font-size: 13px; }
.cp-section { padding: var(--cp-sp-5) 0; }
.cp-section--surface { background: var(--cp-surface); border-top: 1px solid var(--cp-line); }
.cp-section--navy { background: var(--cp-navy); color: var(--cp-on-dark); position: relative; overflow: hidden; }
.cp-section--navy h2 { color: var(--cp-on-dark); }
.cp-section--navy .cp-lead { color: var(--cp-on-dark-2); }
/* декоративная сетка в тёмной секции */
.cp-section--navy::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 56px 56px;
}
.cp-section--navy > * { position: relative; }

.cp-blueprint {
  background:
    linear-gradient(to right,  var(--cp-grid-line) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, var(--cp-grid-line) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--cp-white);
}
.cp-blueprint--sm {
  background:
    linear-gradient(to right,  var(--cp-grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, var(--cp-grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--cp-white);
}

.cp-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--cp-sp-4); flex-wrap: wrap; margin-bottom: var(--cp-sp-4); }
.cp-eyebrow { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cp-blue); font-weight: 500; margin-bottom: var(--cp-sp-2); }

/* Сетка «хайрлайн»: 1px gap на цвете линии = таблица без border-collapse */
.cp-hairgrid {
  display: grid;
  gap: 1px;
  background: var(--cp-line);
  border: 1px solid var(--cp-line);
}
.cp-hairgrid > * { background: var(--cp-white); }
.cp-section--navy .cp-hairgrid { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.cp-section--navy .cp-hairgrid > * { background: var(--cp-navy); }
/* Плитка показателей: три числа в ряд на любом экране.

   Колонок ровно столько, сколько показателей, — и на телефоне тоже.
   Разложить их иначе не выходит: пустая ячейка здесь не пустая, линии
   рисует фон родителя, и на её месте появляется цветной прямоугольник
   (поймано 26.08.2026); а растянутый на всю ширину последний показатель
   повисает сиротой с пустотой справа от короткого числа.

   На телефоне уменьшается ЧИСЛО, а не количество колонок. Размер задан
   через vw с потолком: самое длинное значение — восемь знаков моноширинных
   («−100…+12», «N+1 / 2N»), и на 320-пиксельном экране в колонку шириной
   около 90 px они влезают только при 13-14 px. Потолок держит крупный
   кегль там, где место есть.

   Размеры именно здесь, а не в атрибуте style у спанов, как было раньше:
   из инлайнового стиля медиазапрос ничего не переопределит. */
.cp-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cp-stats .cp-stat__v { font-size: 24px; }
.cp-section--navy .cp-stats .cp-stat__v { font-size: 28px; }
@media (max-width: 700px) {
  .cp-stats { grid-template-columns: repeat(3, 1fr); }
  .cp-stats .cp-stat { padding: 15px 10px; gap: 6px; }
  .cp-stats .cp-stat__v,
  .cp-section--navy .cp-stats .cp-stat__v {
    font-size: clamp(13px, 4.4vw, 18px); letter-spacing: -.02em;
  }
  .cp-stats .cp-stat__u { font-size: 8.5px; letter-spacing: .05em; line-height: 1.4; }
}

.cp-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cp-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cp-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.cp-grid-24 { display: grid; gap: var(--cp-sp-3); }
.cp-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 60px; align-items: center; }

/* ---------- Кнопки ---------- */
.cp-btn {
  display: inline-grid; place-items: center;
  height: 52px; padding: 0 28px;
  border-radius: var(--cp-radius);
  font-weight: 700; font-size: 15px;
  cursor: pointer; border: none;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.cp-btn--primary { background: var(--cp-blue); color: #fff; }
.cp-btn--primary:hover { background: var(--cp-blue-deep); color: #fff; }
.cp-section--navy .cp-btn--primary:hover { background: var(--cp-blue-bright); }
.cp-btn--secondary { background: var(--cp-white); color: var(--cp-blue); border: 1.5px solid var(--cp-blue); }
.cp-btn--secondary:hover { background: var(--cp-tint); }
.cp-btn--ghost { background: transparent; color: var(--cp-text-2); border: 1px solid var(--cp-line); height: 44px; padding: 0 22px; font-size: 14px; }
.cp-btn--ghost:hover { border-color: var(--cp-blue); }
.cp-btn--on-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.cp-btn--on-dark:hover { border-color: #fff; color: #fff; }
.cp-btn--sm { height: 46px; padding: 0 20px; font-size: 14px; }
.cp-link-arrow { font-family: var(--cp-mono); font-size: 13px; color: var(--cp-blue); background: none; border: none; border-bottom: 1px solid rgba(37,84,172,.35); padding: 0 0 4px; cursor: pointer; }

/* ---------- Поля ---------- */
.cp-field { display: grid; gap: 9px; }
.cp-field > span { font-family: var(--cp-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); }
.cp-input, .cp-textarea {
  color: var(--cp-text); background: var(--cp-white);
  border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  padding: 0 16px; height: 50px; font-size: 15px; outline: none;
  transition: border-color .18s;
}
.cp-textarea { height: auto; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.cp-input:focus, .cp-textarea:focus { border-color: var(--cp-blue); }
.cp-input--mono { font-family: var(--cp-mono); }
.cp-input.is-error { border-width: 1.5px; border-color: var(--cp-error); }
.cp-input::placeholder, .cp-textarea::placeholder { color: var(--cp-muted-2); }

/* ---------- Бейджи ---------- */
.cp-badge {
  font-family: var(--cp-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px; border: 1px solid transparent; white-space: nowrap;
}
.cp-badge--new     { background: var(--cp-blue); color: #fff; }
.cp-badge--tint    { background: var(--cp-tint); color: var(--cp-blue); }
.cp-badge--done    { color: var(--cp-success); border-color: rgba(30,142,90,.35); }
.cp-badge--outline { color: var(--cp-text-2); border-color: var(--cp-line); }
.cp-chip { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .06em; color: var(--cp-blue); background: var(--cp-tint); padding: 7px 12px; border-radius: 2px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- Карточки ---------- */
.cp-card { border: 1px solid var(--cp-line); background: var(--cp-white); padding: 34px 30px; display: grid; gap: 15px; align-content: start; transition: border-color .2s, box-shadow .2s; }
.cp-card--hover:hover { border-color: var(--cp-blue); box-shadow: var(--cp-shadow); }
/* Плитки преимуществ. Сетка ЖЁСТКАЯ, а не auto-fit: плиток восемь,
   и делится восемь только на 4, 2 и 1. Общий .cp-cols-4 — это
   auto-fit, и на 1280 он раскладывал их в ПЯТЬ колонок, оставляя две
   пустые ячейки; в хайрлайн-сетке пустая ячейка не пустая — сквозь неё
   виден фон, которым нарисованы линии. Ровно то замечание, ради
   которого блок и переписан (разбор 26.08.2026). */
.cp-adv { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cp-adv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cp-adv { grid-template-columns: 1fr; } }

/* Кнопки призыва в тёмном блоке. Справа — пока текст и кнопки стоят
   в двух колонках: там правый край кнопок совпадает с правым краем
   блока. Когда колонки схлопываются в одну, кнопки оказываются под
   текстом, но по-прежнему прижаты вправо, а текст выключен влево —
   и они висят сами по себе. Поймано на телефоне 26.08.2026.

   Порог 820, а не 900: сетка блока схлопывается при 804 (две колонки
   по 360 плюс зазор 44 перестают помещаться в контейнер) — считать надо
   от неё, а не от общего мобильного порога сайта. */
.cp-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
@media (max-width: 820px) { .cp-cta-btns { justify-content: flex-start; } }

.cp-cell { padding: 32px 30px; display: grid; gap: 13px; align-content: start; }
.cp-rule { width: 24px; height: 3px; background: var(--cp-blue); }

/* Уголки-засечки — максимум 2 на экран */
.cp-ticks { position: relative; }
.cp-ticks::before, .cp-ticks::after { content: ''; position: absolute; width: 16px; height: 2px; background: var(--cp-blue); }
.cp-ticks::before { top: 0; left: 0; box-shadow: 0 0 0 0 transparent; }
.cp-ticks::after  { bottom: 0; right: 0; }

.cp-stat { padding: 26px 24px; display: grid; gap: 9px; align-content: start; }
.cp-stat__v { font-family: var(--cp-mono); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--cp-blue); }
.cp-section--navy .cp-stat__v { color: #fff; }
.cp-stat__u { font-family: var(--cp-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); }
.cp-section--navy .cp-stat__u { color: var(--cp-on-dark-mute); }
.cp-stat__t { font-size: 14.5px; line-height: 1.5; color: var(--cp-text-2); }

/* max-width обязателен: aspect-ratio вместе с min-height задаёт блоку и
   минимальную ШИРИНУ (260px × 16/10 = 416px), и на узком экране фото
   распирало страницу за край. Поймано 17.08 на contacts.html. */
.cp-media { position: relative; overflow: hidden; background: var(--cp-surface);
            max-width: 100%; }
.cp-media img { width: 100%; height: 100%; object-fit: cover; }
/* Видео ведёт себя ровно как снимок: заполняет рамку, обрезается по центру.
   display:block убирает подстрочный отступ, который inline-элемент оставляет
   под собой, — иначе внизу рамки появляется белая полоска в четыре пиксела. */
.cp-media__video { display: block; width: 100%; height: 100%;
                   object-fit: cover; background: var(--cp-surface); }
.cp-media--4x5 { aspect-ratio: 4 / 5; }
.cp-media--16x10 { aspect-ratio: 16 / 10; }
.cp-media--fill img { position: absolute; inset: 0; }
/* Чертёж в рамке с фиксированной пропорцией. object-fit: cover обрезал бы
   его по краям вместе с подписями — для фотографии это норма, для чертежа
   потеря содержания. Вписываем целиком и подкладываем белое: чертёж
   рассчитан на белую бумагу. */
.cp-media--contain { background: var(--cp-white); }
.cp-media--contain img { object-fit: contain; }

/* Пустой слот под фото, которого пока нет */
.cp-slot {
  display: grid; place-items: center; min-height: 280px;
  background: repeating-linear-gradient(135deg, #F3F6FB 0 10px, #EDF1F8 10px 20px);
  color: var(--cp-muted); font-family: var(--cp-mono); font-size: 12px;
  text-align: center; padding: 24px; line-height: 1.7;
}

/* Список с квадратным маркером */
.cp-list { display: grid; gap: 10px; }
.cp-list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.55; }
.cp-list { list-style: none; padding: 0; margin: 0; }
.cp-list li::before { content: ''; width: 6px; height: 6px; background: var(--cp-blue); margin-top: 8px; }

/* ---------- Хедер ---------- */
.cp-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cp-line); }
.cp-header__in { max-width: var(--cp-container); margin: 0 auto; padding: 14px var(--cp-pad); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
/* Логотип — вектор из CP-Logo.ai в двух начертаниях того же файла: полное
   на десктопе, один знак на телефоне. Собирать надпись из текста рядом с
   картинкой значило бы держать вторую версию бренда. */
.cp-logo { display: flex; align-items: center; }
.cp-logo img { height: 30px; width: auto; display: block; }
/* На телефоне тот же логотип с надписью, только мельче: в 26 пикселей он
   помещается рядом с бургером и не сталкивает его на вторую строку. */
@media (max-width: 700px) { .cp-logo img { height: 26px; } }
.cp-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cp-nav a { position: relative; padding: 10px 0; font-size: 14.5px; font-weight: 600; color: var(--cp-text-2); }
.cp-nav a:hover { color: var(--cp-blue); }
.cp-nav a[aria-current="page"] { color: var(--cp-text); }
.cp-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cp-blue); }
.cp-header__cta { display: flex; align-items: center; gap: 18px; }

/* Бургер: на десктопе не нужен, показывается в мобильном медиазапросе */
/* Целевое действие внутри мобильного меню: в шапке на узких экранах кнопке
   места нет, а терять её нельзя — это главное действие сайта. */
.cp-nav__cta { display: none; }

.cp-burger { display: none; width: 44px; height: 44px; padding: 12px 10px; background: none; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); cursor: pointer; flex-direction: column; justify-content: space-between; }
.cp-burger span { display: block; height: 2px; background: var(--cp-text); transition: transform .18s ease, opacity .18s ease; }
.cp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.cp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.cp-phone { font-family: var(--cp-mono); font-size: 13.5px; color: var(--cp-text); white-space: nowrap; }

/* ---------- Hero (вариант A) ---------- */
.cp-hero { border-bottom: 1px solid var(--cp-line); }
.cp-hero__in { max-width: var(--cp-container); margin: 0 auto; padding: 72px var(--cp-pad) var(--cp-sp-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: center; }
.cp-hero h1 { font-size: clamp(38px, 4.8vw, 68px); margin-bottom: 26px; }
.cp-hero__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cp-hero__kicker i { width: 32px; height: 2px; background: var(--cp-blue); display: block; }
.cp-hero__photo { position: relative; }
.cp-hero__caption { position: absolute; bottom: -20px; left: -24px; background: #fff; border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-blue); padding: 22px 26px; max-width: 280px; box-shadow: var(--cp-shadow-lg); }

/* Текстовая плашка на фото — непрозрачная, иначе текст не читается */
.cp-photo-hero { position: relative; height: min(60vh, 500px); min-height: 400px; }
.cp-photo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-photo-hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(13,21,36,.9), rgba(13,21,36,.5) 58%, rgba(13,21,36,.14)); }
.cp-photo-hero__wrap { position: absolute; inset: 0; display: grid; align-items: end; }
.cp-photo-hero__plate { max-width: 720px; background: var(--cp-navy); color: #fff; padding: 32px 36px 34px; border-left: 3px solid var(--cp-blue); }
.cp-photo-hero__plate h1 { color: #fff; margin-bottom: 18px; }
.cp-photo-hero__plate p { color: var(--cp-on-dark-2); font-size: 18px; line-height: 1.6; max-width: 50ch; }

/* ---------- Бренд-полоса ---------- */
.cp-brands { background: var(--cp-surface); border-bottom: 1px solid var(--cp-line); }
.cp-brands__in { max-width: var(--cp-container); margin: 0 auto; padding: 22px var(--cp-pad); display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.cp-brands b { font-weight: 700; font-size: 16px; color: var(--cp-text-2); }

/* ---------- Схема контура ---------- */
.cp-circuit { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.cp-circuit__item { display: grid; grid-template-columns: 1fr 22px; align-items: center; }
.cp-circuit__box { border: 1.5px solid var(--cp-blue); background: #fff; padding: 20px 16px; display: grid; gap: 9px; min-height: 126px; align-content: center; }
.cp-circuit__box b { font-weight: 700; font-size: 16px; line-height: 1.22; letter-spacing: -.01em; }
.cp-circuit__box span { font-family: var(--cp-mono); font-size: 11px; color: var(--cp-muted); }
.cp-circuit__link { height: 2px; background: var(--cp-blue); }
/* У последнего узла в строке связи нет: линия, уходящая в пустоту справа,
   читается как «здесь ещё что-то есть, но не поместилось». */
.cp-circuit__item:last-child .cp-circuit__link { display: none; }

/* Схема из нескольких строк разной длины: 3 узла, 4 и 2. При обычной
   растяжке по ширине узлы вышли бы 351, 258 и 537 пикселей — строки
   поехали бы каждая в свою сторону. Общая сетка на четыре колонки держит
   их одного размера, а недобор справа читается как продолжение потока. */
@media (min-width: 901px) {
  .cp-circuit--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Чертёж, подключённый файлом. Своя рамка и подпись под ним; на белом
   фоне, потому что чертёж рассчитан на белую бумагу, а секция вокруг
   серая. Ширина по контейнеру: на 1640 единиц исходника при контейнере
   1240 мелкие подписи ужимаются до нечитаемых, поэтому под рисунком
   стоит ссылка «в полном размере» — она открывает сам файл. */
.cp-scheme-file { margin: 0; border: 1px solid var(--cp-line); background: var(--cp-white); }
.cp-scheme-file img { display: block; width: 100%; height: auto; }
.cp-scheme-file figcaption { padding: 18px 22px; border-top: 1px solid var(--cp-line);
  font-size: 14px; line-height: 1.6; color: var(--cp-text-2); }
.cp-scheme-file figcaption a { color: var(--cp-blue); font-weight: 600; }

/* Типовая схема холодоснабжения. Две раскладки одного рисунка: SVG
   не переносит строки, и девять боксов в ряд на телефоне превращаются
   в нечитаемую полоску. Собирает обе tools/build_scheme.py из одного
   списка узлов — разойтись по содержанию они не могут. */
.cp-scheme svg { display: block; width: 100%; height: auto; }
.cp-scheme--narrow { display: none; }

/* Порог 1200, а не 900. Широкая раскладка нарисована в 1240 единиц
   и сжимается до ширины контейнера ВМЕСТЕ с подписями: при экране 1120
   это 0,79 и заголовки узлов в 13 px, при 1000 — 0,69 и 11 px. Ниже
   1200 показываем узкую: она в одну колонку и от ширины не зависит. */
@media (max-width: 1200px) {
  .cp-scheme--wide { display: none; }

  /* Обёртка тянется за поля контейнера, рисунок внутри ограничен
     расчётной шириной и стоит по центру. Двумя правилами, а не одним,
     потому что отрицательный отступ и margin:auto на одном элементе
     несовместимы: при ширине больше контейнера auto обнуляется, и блок
     прижимается влево.

     Ограничение обязательно. SVG тянется за контейнером ВМЕСТЕ
     с подписями: без потолка на планшете и в половине экрана заголовки
     узлов вырастали крупнее заголовков страницы. Потолок 400 при
     расчётных 390 держит кегль в пределах 15,9 px против 15 у текста. */
  .cp-scheme--narrow { display: block; margin-inline: calc(var(--cp-pad) * -1); }
  .cp-scheme--narrow svg { max-width: 400px; margin-inline: auto; }
}

.cp-circuit__return { height: 2px; background: repeating-linear-gradient(90deg, var(--cp-blue) 0 7px, transparent 7px 14px); }

/* Термошкала */
/* Шкала температур: от «глубокого холода» к тёплому. Значения — те же
   ступени фирменного синего, пересчитанные под цвет из логотипа. */
.cp-thermo { height: 8px; border-radius: 2px; background: linear-gradient(90deg, #0D1524, #083972 30%, #0B4E9D 62%, #9CB8E4 88%, #E7EDF9); }

/* ---------- Квиз ---------- */
.cp-quiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr)); gap: 32px; align-items: start; }
.cp-quiz__panel { border: 1px solid var(--cp-line); background: #fff; }
.cp-quiz__head { border-bottom: 1px solid var(--cp-line); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cp-quiz__bar { height: 3px; background: var(--cp-tint); }
.cp-quiz__bar i { display: block; height: 3px; background: var(--cp-blue); transition: width .3s ease; }
.cp-quiz__body { padding: 34px 30px 30px; display: grid; gap: 20px; }
.cp-quiz__foot { border-top: 1px solid var(--cp-line); padding: 20px 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 14px; }
/* Поля ввода внутри шага квиза. Своя сетка, а не общая .cp-cols-*:
   полей бывает от одного до четырёх, и они должны переноситься сами. */
/* Поля шага. Внутри каждого — три яруса: подпись, строка ввода, подсказка,
   и все три у соседей должны стоять на одной линии.

   Выравнивания по краю тут мало, и я на этом уже ошибся. По верху не
   сходится, когда подпись переносится на две строки; по низу (align-items:
   end) не сходится, когда подсказки разной высоты — у «на входе» она в две
   строки, у «в сердцевине» в одну, и строки ввода разъезжаются.

   Subgrid решает это разом: ярусы становятся общими рядами внешней сетки,
   и высота каждого считается по самому высокому соседу. Запасной вариант
   ниже — выравнивание по верху: подписи почти везде однострочные, и он
   даёт то же самое. */
.cp-quiz__fields { display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
@supports (grid-template-rows: subgrid) {
  .cp-quiz__fields { align-items: stretch; }
  .cp-quiz__fields > .cp-field { grid-row: span 3; grid-template-rows: subgrid; }
}

/* Пояснение к КОНКРЕТНОМУ полю, под ним. Общий абзац над шагом человек
   прочитать успевает не всегда, а эту строку видит ровно тогда, когда
   заполняет этот параметр. */
.cp-field__hint { font-size: 12px; line-height: 1.45; color: var(--cp-muted-2); }

/* «Не знаю» — не плитка и не кнопка действия: это отказ отвечать, и он
   не должен спорить за внимание с вариантами ответа. Поэтому ссылка
   на своей строке, а не пятая плитка в ряду. */
.cp-skip { justify-self: start; background: none; border: none; padding: 4px 0;
  font-family: var(--cp-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cp-muted); cursor: pointer;
  border-bottom: 1px dashed var(--cp-line); }
.cp-skip:hover { color: var(--cp-blue); border-bottom-color: var(--cp-blue); }
.cp-skip.is-on { color: var(--cp-blue); border-bottom-style: solid; }

.cp-opt { position: relative; text-align: left; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); padding: 18px 20px; cursor: pointer; display: grid; gap: 8px; transition: border-color .18s, background .18s; }
.cp-opt:hover { border-color: var(--cp-blue); background: #F7F9FD; }
.cp-opt.is-on { border-color: var(--cp-blue); box-shadow: inset 0 0 0 1px var(--cp-blue); }
.cp-opt b { font-weight: 700; font-size: 16.5px; line-height: 1.22; letter-spacing: -.015em; }
.cp-opt b.mono { font-family: var(--cp-mono); font-weight: 500; font-size: 17px; letter-spacing: 0; }
.cp-opt span { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .06em; color: var(--cp-muted); }
.cp-summary { border: 1px solid var(--cp-line); padding: 34px 32px; }
.cp-summary__row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; flex-wrap: wrap; padding: 16px 20px; }
.cp-summary__row dt { font-family: var(--cp-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--cp-muted); text-transform: uppercase; }
.cp-summary__row dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }
.cp-hint { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .08em; color: var(--cp-muted-2); align-self: center; }
[hidden] { display: none !important; }

/* ---------- Футер ---------- */
.cp-footer { background: var(--cp-navy); color: var(--cp-on-dark-2); }
/* Подвал — квадрат два на два:

       Разделы      Инструменты
       логотип      Контакты

   Порядок задан РАЗМЕТКОЙ, а не grid-area: так он одинаков для сетки,
   для чтения с экрана и для клавиатуры. Расставленный свойствами,
   он разъезжается с порядком обхода, и это ловится только вслепую.

   Число колонок задано явно, а не через auto-fit: auto-fit подбирает
   его по ширине и ничего не знает о том, сколько элементов всего,
   поэтому оставляет одинокий хвост на промежуточных ширинах — ровно
   это ловили на «Преимуществах» и на пятиколоночном подвале. */
.cp-footer__in { max-width: var(--cp-container); margin: 0 auto; padding: 60px var(--cp-pad) 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-sp-4) var(--cp-sp-5); }
@media (max-width: 560px) {
  .cp-footer__in { grid-template-columns: minmax(0, 1fr); gap: var(--cp-sp-3); }
  /* В одну колонку логотип уходит наверх: список разделов, начинающийся
     без единого признака того, чей он, читается как обрывок страницы. */
  .cp-footer__in > .cp-footer__col:nth-child(3) { order: -1; }
}
.cp-footer__col { display: grid; gap: 13px; align-content: start; }
.cp-footer__col a { color: var(--cp-on-dark-2); font-size: 15px; }
.cp-footer__col a:hover { color: #fff; }
.cp-footer__head { font-family: var(--cp-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #5E7292; margin-bottom: 4px; }
.cp-footer__bottom { max-width: var(--cp-container); margin: 0 auto; padding: 22px var(--cp-pad) 36px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: var(--cp-mono); font-size: 11px; letter-spacing: .08em; color: #5E7292; }

/* ---------- Мобайл ---------- */
@media (max-width: 900px) {
  :root { --cp-pad: 20px; }
  .cp-section { padding: 56px 0; }
  .cp-hero__in { padding-top: 40px; padding-bottom: 56px; gap: 40px; }
  .cp-hero__caption { position: static; margin-top: 16px; left: auto; bottom: auto; max-width: none; box-shadow: none; }
  .cp-split { gap: 36px; }
  /* Навигация уезжает под бургер: та же разметка, другой режим показа —
     иначе список ссылок пришлось бы дублировать в каждом из 8 файлов. */
  .cp-burger { display: flex; }
  /* Между 700 и 900px в шапке три элемента: логотип, кнопка, бургер.
     space-between ставил кнопку по центру в одиночестве — прижимаем её
     к бургеру, чтобы действия жили в одном углу. */
  .cp-header__cta { margin-left: auto; }
  .cp-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 20px 16px;
    background: #fff;
    border-bottom: 1px solid var(--cp-line);
    box-shadow: var(--cp-shadow);
  }
  .cp-nav[data-open="true"] { display: flex; }
  .cp-nav a { padding: 15px 0; font-size: 16px; border-bottom: 1px solid var(--cp-line); }
  .cp-nav a:last-child { border-bottom: none; }
  /* .cp-nav a перебивает .cp-btn--primary по специфичности (0,1,1 против 0,1,0)
     и красит текст кнопки в серый по синему — возвращаем белый явно. */
  .cp-nav .cp-nav__cta { display: inline-flex; justify-content: center; margin-top: 14px; color: #fff; border-bottom: none; }
  .cp-nav .cp-nav__cta:hover { color: #fff; }
  /* Подчёркивание активного пункта из десктопной версии здесь мешает границам */
  .cp-nav a[aria-current="page"]::after { display: none; }
  .cp-nav a[aria-current="page"] { color: var(--cp-blue); }
}

/* Логотип, телефон, кнопка и бургер в 375px не помещаются — шапка переносилась
   на две строки и, будучи sticky, съедала экран. Ниже 700px в шапке остаются
   логотип и бургер; телефон есть в подвале и на контактах, кнопка — в меню. */
@media (max-width: 700px) {
  .cp-header__cta { display: none; }
}

/* ── Таблица характеристик оборудования ───────────────────────────────────
   Первый раздел с продукцией (CP-PRO, 17.08). Снабженец читает такую таблицу
   построчно и сравнивает модели между собой, поэтому: моношрифт на числах —
   цифры выстраиваются в столбик и разница видна глазом; залипающая шапка —
   при десятке моделей заголовок колонки уезжает раньше, чем находишь нужную
   строку; горизонтальная прокрутка внутри обёртки, а не всей страницы. */
/* Снимок над таблицей и НЕ на пол-экрана. Исходники BITZER — 350×350,
   а показывались на 588 px: полуторный растяг на обычном экране
   и трёхкратный на плотном, отсюда «сразу видится пиксельным».
   240 px — уменьшение на любом экране и мягкий растяг на плотном;
   крупнее взять неоткуда, оригиналов больше нет.

   Рядом со снимком — кнопка справочника: расширенные данные логичнее
   искать возле картинки, чем строкой под таблицей, где их не видно. */
.cp-specphoto { display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
                margin: 20px 0 24px; }
.cp-specphoto img { width: 240px; max-width: 100%; height: auto;
                    border: 1px solid var(--cp-line); background: var(--cp-white); }
.cp-specphoto > div { flex: 1 1 300px; display: grid; gap: 16px; justify-items: start; }
/* Frascold: оригиналы 212–270 px, им и 240 великовато. */
.cp-specphoto--sm img { width: 190px; }

/* Характеристики и фото. Колонки НЕ поровну: слева таблица, которой
   нужна ширина под самую длинную подпись, справа снимок, который
   прекрасно живёт и меньшим. Поровну — это когда обеим одинаково
   всё равно, а здесь не так. */
.cp-specgrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .cp-specgrid { grid-template-columns: 1fr; } }

/* Модель не переносим: «4CES-9Y», разорванное по дефису на «4CES-» и «9Y»,
   читается как две разные железки. */
.cp-nowrap { white-space: nowrap; }

.cp-tablewrap { overflow-x: auto; border: 1px solid var(--cp-line); background: #fff; }
/* min-width на 640 нужен КАТАЛОЖНЫМ таблицам: у них много колонок,
   и без него они схлопываются в кашу. Таблице характеристик из двух
   колонок он вредит: её содержимому хватает ~460 px, а 640 не влезали
   в половину контейнера, и последние слова уезжали под правый край
   (поймано 26.08.2026). */
.cp-table { width: 100%; border-collapse: collapse; min-width: 640px; }

.cp-table th, .cp-table td {
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--cp-line);
  font-size: 14.5px; white-space: nowrap;
}
.cp-table thead th {
  position: sticky; top: 0; background: var(--cp-surface); z-index: 2;
  font-family: var(--cp-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cp-muted); font-weight: 600;
}
/* Нижняя граница у последней строки нужна: под таблицей идёт подпись
   (caption-side: bottom), и без черты строка сливается с ней. Убирали
   её, когда подписи не было. */
.cp-table tbody tr:last-child td { border-bottom: 1px solid var(--cp-line); }
.cp-table tbody tr:hover { background: var(--cp-surface); }
/* Модель — единственная колонка, по которой ищут глазами: держим её слева
   и не даём уехать при прокрутке вбок.
   z-index обязателен. Без него липкая ячейка стоит на месте, но соседние
   рисуются ПОВЕРХ неё — они идут позже в потоке, и при равном порядке
   побеждает последний. На телефоне это выглядело как наложение текста:
   «Bitzer 4CES-9Y» и «-9Y-40S» друг на друге (поймано 25.08.2026).
   Заголовок липнет и сверху, и слева, поэтому у него слой выше. */
.cp-table td:first-child,
.cp-table thead th:first-child {
  position: sticky; left: 0;
  /* Колонке модели нужен запас: в ней миниатюра и название, которое
     переносить нельзя. Без min-width таблица отдавала ей ровно столько,
     сколько остаётся, и на телефоне название жалось к соседней колонке. */
  min-width: 215px;
}
.cp-table td:first-child { font-weight: 600; background: #fff; z-index: 1; }
.cp-table thead th:first-child { z-index: 3; }
/* Линия между моделью и остальными колонками. Липкая колонка стоит,
   а всё правее уезжает под неё — без черты непонятно, где кончается одно
   и начинается другое.
   box-shadow, а не border-right: у таблицы border-collapse: collapse,
   и схлопнутые границы принадлежат таблице, а не ячейке — за липкой
   колонкой они не едут и попросту не рисуются. Проверено в браузере
   25.08.2026: свойство применялось, линии не было. Тень нулевого
   размытия даёт ровно ту же чёткую единицу и движется с ячейкой. */
.cp-table td:first-child,
.cp-table thead th:first-child { box-shadow: 1px 0 0 0 var(--cp-line); }
.cp-table tbody tr:hover td:first-child { background: var(--cp-surface); }

/* Таблица характеристик — две колонки «подпись / значение», и почти всё,
   что помогает каталожной таблице, ей мешает:

     min-width 640  — не влезал в половину контейнера, и последние слова
                      уезжали под правый край (поймано 26.08.2026);
     white-space    — не давал ни подписи, ни значению встать в две
                      строки, и таблица требовала 663 px при любой
                      ширине окна;
     липкая первая  — нужна там, где колонок много и их прокручивают вбок;
     min-width 215  — под миниатюру и название модели, которых здесь нет.

   Селектор с двумя классами намеренно: при равном весе побеждает тот,
   что ниже по файлу, а каталожные правила ниже. Полагаться на порядок
   в файле, который правят раз в месяц, — способ вернуть эту же ошибку.

   Что переносить нельзя — «Bitzer 4CES-9Y», «4CES-9Y-40S» — помечено
   в разметке классом cp-nowrap, а не запретом на всю таблицу. */
.cp-table.cp-table--pair { min-width: 0; }
.cp-table.cp-table--pair th,
.cp-table.cp-table--pair td { white-space: normal; }
.cp-table.cp-table--pair td:first-child {
  position: static; min-width: 0; box-shadow: none;
}
.cp-table td.cp-td-num { font-family: var(--cp-mono); color: var(--cp-blue); }
/* Колонка с длинным заголовком и короткими числами: по левому краю число
   висит далеко от своей шапки и читается как чужое. */
.cp-table th.cp-col-center, .cp-table td.cp-col-center { text-align: center; }
/* Миниатюра внутри ячейки модели: колонкой её не сделать — первая ячейка
   таблицы липкая при горизонтальной прокрутке, и снимок отнял бы эту роль
   у названия. */
.cp-table .cp-thumb { display: flex; align-items: center; gap: 11px; }
.cp-table .cp-thumb img { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* Флаг Германии. Единственное место, где цвета заданы не переменными:
   это не палитра, а государственный символ с закреплёнными цветами. */
.cp-flag { width: 21px; height: 15px; flex: none; border: 1px solid var(--cp-line); }
.cp-table caption { caption-side: bottom; padding: 12px 16px; font-size: 13px;
                    color: var(--cp-muted); text-align: left; line-height: 1.55; }

/* Карточка серии: заголовок, назначение, ключевые числа. */
/* min-width: 0 обязателен: элемент грида по умолчанию не сжимается ниже
   min-content, и одно длинное значение в характеристиках распирало карточку
   за край экрана. */
.cp-series { border: 1px solid var(--cp-line); background: #fff; padding: 32px 30px;
             display: grid; gap: 14px; align-content: start; min-width: 0; }
.cp-series h3 { font-size: 21px; letter-spacing: -.01em; }
.cp-series__spec { display: grid; gap: 8px; margin-top: 4px; }
/* wrap и min-width: 0 — обязательны оба. Элементы флекса не сжимаются ниже
   своего содержимого, а подпись «Холодопроизводительность» рядом со значением
   в моношрифте шире колонки: без этого строка распирала карточку за край
   экрана. Не влезло — значение переносится под подпись. */
.cp-series__spec div { display: flex; justify-content: space-between; gap: 6px 16px;
                       flex-wrap: wrap; font-size: 14.5px;
                       border-bottom: 1px dotted var(--cp-line); padding-bottom: 7px; }
.cp-series__spec div > span { min-width: 0; }
/* Значение переносится, но выравнено вправо: nowrap здесь и распирал карточку.
   Число с единицей склеивается неразрывным пробелом в разметке, а не стилем. */
.cp-series__spec span:last-child { font-family: var(--cp-mono); color: var(--cp-blue);
                                   text-align: right; }
@media (max-width: 700px) {
  .cp-table th, .cp-table td { padding: 11px 13px; font-size: 13.5px; }
  .cp-series { padding: 26px 22px; }
}

/* Складные таблицы линейки агрегатов. 82 модели разом — это простыня, за
   которой не видно структуры; по сериям и режимам их четыре осмысленных
   блока. details/summary — нативно, без JS. */
.cp-linefold { border: 1px solid var(--cp-line); background: #fff; }
.cp-linefold > summary {
  cursor: pointer; padding: 18px 22px; font-size: 16px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.cp-linefold > summary::-webkit-details-marker { display: none; }
.cp-linefold > summary::before { content: "→"; color: var(--cp-blue);
  font-family: var(--cp-mono); transition: transform .15s; }
.cp-linefold[open] > summary::before { transform: rotate(90deg); }
.cp-linefold[open] > summary { border-bottom: 1px solid var(--cp-line); }
.cp-linefold .cp-tablewrap { border: none; }

/* ---------- Калькуляторы ---------- */
.cp-calc { border: 1px solid var(--cp-line); background: var(--cp-white);
           padding: 28px 26px; display: grid; gap: 16px; align-content: start; }
.cp-calc label { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--cp-muted); display: block;
                 margin-bottom: 8px; }
.cp-calc input[type=text] {
  width: 100%; padding: 13px 14px; border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius); font-family: var(--cp-mono); font-size: 17px;
  letter-spacing: .06em; background: #fff; color: var(--cp-ink);
}
.cp-calc input[type=text]:focus { outline: 2px solid var(--cp-blue); outline-offset: -1px; }
.cp-calc-out { border-top: 1px solid var(--cp-line); padding-top: 18px; }
.cp-calc-out--err { color: var(--cp-muted); }
.cp-calc-res { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.cp-calc-res dt { font-family: var(--cp-mono); font-size: 11px; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--cp-muted); padding-top: 3px; }
.cp-calc-res dd { margin: 0; font-size: 16px; font-weight: 600; }
.cp-calc-res dd:first-of-type { font-size: 22px; }
.cp-calc-note { font-size: 13px; color: var(--cp-muted); font-weight: 400; line-height: 1.55; }
.cp-calc-flag { font-size: 15px; }
@media (max-width: 560px) {
  .cp-calc-res { grid-template-columns: 1fr; gap: 4px 0; }
  .cp-calc-res dd { margin-bottom: 10px; }
}

/* Адрес в подвале. Не моноширинным: в узкой колонке он ломается на три
   строки и читается как код, а не как адрес. `address` вместо `span` —
   тег для этого и существует, курсив у него снимаем. */
/* Логотип в подвале — по ширине колонки, но не шире 250 px. Прежние
   150 px были заметно уже текста под ними (самая длинная строка 257 px),
   и знак читался как случайно уменьшенный. Ширина в процентах, а не
   в пикселях: на узкой колонке фиксированные 250 вылезли бы за край. */
.cp-footer__logo { width: 100%; max-width: 250px; height: auto; }

.cp-footer__addr { font-style: normal; font-size: 15px; color: var(--cp-on-dark-2);
                   line-height: 1.55; margin: 0; }
.cp-tg, .cp-mail { display: inline-flex; align-items: center; gap: 8px;
         justify-self: start; font-size: 15px; color: var(--cp-on-dark-2); }
.cp-tg::before, .cp-mail::before { content: ""; width: 17px; height: 17px; flex: none;
  background: currentColor;
  -webkit-mask: var(--cp-ico) center/contain no-repeat;
          mask: var(--cp-ico) center/contain no-repeat; }
.cp-tg   { --cp-ico: var(--cp-tg-icon); }
.cp-mail { --cp-ico: var(--cp-mail-icon); }

/* ---------- Согласие перед переходом в Telegram ---------- */
.cp-modal { position: fixed; inset: 0; z-index: 100; display: grid;
            place-items: center; padding: 20px;
            background: rgba(13, 21, 36, .55); }
.cp-modal[hidden] { display: none; }
.cp-modal__box { background: var(--cp-white); color: var(--cp-text);
  border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-lg);
  padding: 34px 32px; max-width: 460px; width: 100%; display: grid; gap: 16px; }
.cp-modal__box h2 { font-size: 21px; }
/* Окно справочника шире и с прокруткой внутри: там таблица характеристик
   и две рабочие точки — в 460 px и в высоту экрана это не укладывается. */
.cp-modal__box--wide { max-width: 620px; max-height: 84vh; overflow-y: auto; }
.cp-modal__box p { font-size: 14.5px; color: var(--cp-text-2); line-height: 1.6; }
.cp-modal__row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ==========================================================================
   Калькулятор теплового баланса — calc-shock.html

   Раскладка в две колонки: слева ввод, справа результат. На узком экране
   результат УХОДИТ НАВЕРХ, а не вниз: главное требование раздела 7 — цифра
   видна с самого начала и меняется на каждое движение. Спрятанная под
   десятью полями, она перестаёт быть обратной связью и становится итогом,
   до которого ещё надо дойти.
   ========================================================================== */

.cp-cc { display: grid; gap: var(--cp-sp-3); align-items: start;
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Без этих двух строк страница уезжает вбок на телефоне почти на треть
   ширины. Причина не в раскладке: <input type="number"> несёт собственную
   ширину по умолчанию, около двадцати знаков, и она становится
   МИНИМАЛЬНОЙ шириной ячейки грида — колонка 1fr честно её уважает.
   Три таких поля в строке габаритов дают шестьсот пикселей, которые
   не сжимаются ничем, кроме явного min-width: 0. */
.cp-cc > * { min-width: 0; }
.cp-cc input, .cp-cc select { min-width: 0; max-width: 100%; }

.cp-cc__form { display: grid; gap: var(--cp-sp-2); align-content: start; }

.cp-cc__out { position: sticky; top: var(--cp-sp-2);
              background: var(--cp-surface); border: 1px solid var(--cp-line);
              border-radius: var(--cp-radius); padding: var(--cp-sp-3);
              display: grid; gap: var(--cp-sp-2); align-content: start; }

.cp-cc__field { display: grid; gap: 6px; }
.cp-cc__label { font-size: 13.5px; font-weight: 700; color: var(--cp-text); }
.cp-cc__hint  { font-size: 12px; line-height: 1.45; color: var(--cp-muted-2); }

.cp-cc__dims { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
               gap: 6px; align-items: center; }
.cp-cc__dims span { color: var(--cp-muted-2); }
.cp-cc__floor { margin-top: 6px; }

/* Сегменты толщины. Подпись диапазоном, а не числом: человек знает свой
   продукт, но редко знает его характерный размер в миллиметрах. */
.cp-cc__segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cp-cc__seg { font: inherit; font-size: 12.5px; padding: 9px 4px; cursor: pointer;
              background: var(--cp-white); color: var(--cp-text-2);
              border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
              transition: background .12s, color .12s, border-color .12s; }
.cp-cc__seg:hover { border-color: var(--cp-blue); color: var(--cp-blue); }
.cp-cc__seg.is-on { background: var(--cp-blue); border-color: var(--cp-blue);
                    color: var(--cp-white); font-weight: 700; }
.cp-cc__exact { display: grid; grid-template-columns: 1fr auto; gap: 8px;
                align-items: center; font-size: 12px; color: var(--cp-muted); }
.cp-cc__exact input { width: 96px; }

/* Вилка. Крупно и моношрифтом — это единственное число, ради которого
   страница существует. */
.cp-cc__range { font-size: clamp(30px, 5vw, 44px); font-weight: 800;
                letter-spacing: -.03em; line-height: 1.05; color: var(--cp-blue);
                margin: 0; }
.cp-cc__unit  { font-size: .45em; font-weight: 600; color: var(--cp-muted);
                margin-left: .3em; letter-spacing: 0; }
.cp-cc__base  { margin: 4px 0 0; font-size: 14px; color: var(--cp-text-2); }
.cp-cc__blocked { margin: 0; font-size: 20px; font-weight: 700; color: var(--cp-error); }

/* Дельта после правки допущения: две секунды и гаснет. Постоянная —
   превратилась бы в ещё одно число на экране, где их и так много. */
.cp-cc__delta { margin-left: 10px; font-size: 13px; font-weight: 700;
                opacity: 0; transition: opacity .2s; }
.cp-cc__delta.is-on { opacity: 1; }
.cp-cc__delta--up { color: var(--cp-error); }
.cp-cc__delta--down { color: var(--cp-success); }

/* Полоса теплопритоков — ключевой элемент раздела 7. Одна стековая полоса,
   не список и не круговая: она за секунду показывает, что доминирует. */
.cp-cc__bar { display: flex; height: 22px; border-radius: var(--cp-radius);
              overflow: hidden; border: 1px solid var(--cp-line); }
.cp-cc__bar-seg { display: block; min-width: 2px; }

.cp-cc__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-cc__leg { display: grid; grid-template-columns: 10px 1fr auto auto;
              gap: 8px; align-items: center; font-size: 13px; }
.cp-cc__dot { width: 10px; height: 10px; border-radius: 2px; }
.cp-cc__leg-name { color: var(--cp-text-2); }
.cp-cc__leg-val  { color: var(--cp-text); font-weight: 700; }
.cp-cc__leg-pct  { color: var(--cp-muted); min-width: 44px; text-align: right; }

.cp-cc__warns { display: grid; gap: 8px; }
.cp-cc__warn { border-left: 3px solid var(--cp-line); padding: 8px 0 8px 12px;
               background: var(--cp-white); border-radius: 0 var(--cp-radius) var(--cp-radius) 0; }
.cp-cc__warn p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--cp-text-2); }
.cp-cc__warn-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em;
                   text-transform: uppercase; }
.cp-cc__warn--info    { border-left-color: var(--cp-muted-2); }
.cp-cc__warn--info    .cp-cc__warn-tag { color: var(--cp-muted); }
.cp-cc__warn--caution { border-left-color: var(--cp-warning); }
.cp-cc__warn--caution .cp-cc__warn-tag { color: var(--cp-warning); }
.cp-cc__warn--blocker { border-left-color: var(--cp-error); }
.cp-cc__warn--blocker .cp-cc__warn-tag { color: var(--cp-error); }

.cp-cc__slider { display: grid; gap: 6px; padding-top: 4px;
                 border-top: 1px solid var(--cp-line); }
.cp-cc__slider label { font-size: 13px; color: var(--cp-text-2); }
.cp-cc__slider input[type=range] { width: 100%; accent-color: var(--cp-blue); }

.cp-cc__details { border-top: 1px solid var(--cp-line); padding-top: var(--cp-sp-1); }
.cp-cc__details summary { cursor: pointer; font-size: 13.5px; font-weight: 700;
                          color: var(--cp-blue); }
.cp-cc__count { display: inline-block; margin-left: 6px; padding: 1px 7px;
                font-size: 11px; font-weight: 700; color: var(--cp-blue);
                background: var(--cp-tint); border-radius: 10px; }
.cp-cc__asms { list-style: none; margin: var(--cp-sp-1) 0 0; padding: 0;
               display: grid; gap: 6px; }
.cp-cc__asm { display: grid; grid-template-columns: 1fr 86px 30px; gap: 8px;
              align-items: center; font-size: 12.5px; color: var(--cp-text-2); }
.cp-cc__asm-input { padding: 6px 8px; font-size: 13px; }
.cp-cc__asm-unit { font-size: 12px; color: var(--cp-muted-2); }

.cp-cc__derived { list-style: none; margin: 0; padding: var(--cp-sp-1) 0 0;
                  border-top: 1px solid var(--cp-line); display: grid; gap: 3px; }
.cp-cc__derived li { display: flex; justify-content: space-between; gap: 12px;
                     font-size: 12.5px; color: var(--cp-muted); }
.cp-cc__derived li span:last-child { color: var(--cp-text-2); font-weight: 700; }

.cp-cc__cta { justify-self: start; margin-top: 4px; }

@media (max-width: 900px) {
  .cp-cc { grid-template-columns: minmax(0, 1fr); }
  /* Результат первым, ввод под ним. На телефоне это единственный способ
     удержать цифру на виду: два столбца в одну колонку схлопываются
     по порядку исходника, и результат уехал бы под десять полей. */
  .cp-cc__out { order: -1; position: sticky; top: 0; z-index: 2;
                padding: var(--cp-sp-2); }
  .cp-cc__segs { grid-template-columns: repeat(2, 1fr); }
  .cp-cc__asm { grid-template-columns: 1fr 76px 26px; }
}

/* Расчётный лист. На экране скрыт, в печати — единственное, что остаётся.

   PDF делает сам браузер: «Печать → Сохранить как PDF». Библиотека для
   генерации PDF весит четверть мегабайта и умеет ровно то же самое, только
   хуже — со своими шрифтами вместо системных и без кириллицы из коробки.
   Правило проекта про зависимости здесь совпадает со здравым смыслом. */
.cp-cc__sheet { display: none; }
.cp-cc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

@media print {
  .cp-header, .cp-footer, .cp-modal, .cp-cc__form, .cp-cc__out,
  .cp-cc__actions, .cp-section--tint, .cp-blueprint, .cp-consent,
  .cp-burger, noscript { display: none !important; }
  body { background: #fff; color: #000; }
  .cp-cc { display: block; }
  .cp-cc__sheet { display: block; font-size: 11pt; }
  .cp-cc__sheet h2 { font-size: 16pt; margin: 0 0 4px; }
  .cp-cc__sheet-meta { margin: 0 0 16px; font-size: 9pt; color: #444; }
  .cp-cc__sheet-tbl { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
  .cp-cc__sheet-tbl th { text-align: left; font-weight: 400; color: #444;
                         padding: 3px 12px 3px 0; width: 46%; vertical-align: top; }
  .cp-cc__sheet-tbl td { padding: 3px 0; font-weight: 700; }
  .cp-cc__sheet-big { font-size: 22pt; font-weight: 800; margin: 10px 0 14px; }
  .cp-cc__sheet-big span { display: block; font-size: 10pt; font-weight: 400; color: #444; }
  .cp-cc__sheet-warns { margin: 0 0 14px; padding-left: 18px; font-size: 10pt; }
  .cp-cc__sheet-warns li { margin-bottom: 5px; }
  .cp-cc__sheet-note { font-size: 8.5pt; color: #444; line-height: 1.5;
                       margin: 0 0 6px; page-break-inside: avoid; }
  a[href]::after { content: none; }
}