/* Клиентская страница «Право Просто» (фича «клиентская страница», задача 04) — по макету Figma,
   кадры 1440: 320:4954 (форма), 320:5366 (подсказки), 320:5160 (заполненная форма), 320:5574 (ход).

   Как устроено:
   - цвета — шкала макета (--c-50 … --c-900) и несколько своих (синий, красный и т. п.);
   - раскладка — переменные --page-pad (поле слева и справа), --gap-col (между карточками),
     --gap-row (между блоками), --card-pad (поле внутри карточек); узкие экраны (задача 06, в конце
     файла) переопределяют их в @media и меняют колонки на столбик; правила 1440 не тронуты;
   - размеры шрифта — прямо в правилах, как в макете (Golos: 8–12,5 в таблице примера, 12, 14, 16, 18, 20, 24, 32, 40).
   Шрифт — Golos Text 400 и 500, своими файлами (static/client/fonts, лицензия OFL — OFL.txt
   рядом), не с Google Fonts: иначе каждый посетитель отдавал бы свой адрес иностранному сервису. */

@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(client/fonts/golos-text-cyrillic-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(client/fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(client/fonts/golos-text-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(client/fonts/golos-text-latin-400-normal.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: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(client/fonts/golos-text-cyrillic-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(client/fonts/golos-text-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(client/fonts/golos-text-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(client/fonts/golos-text-latin-500-normal.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 {
  /* шкала макета (Figma: Color50 … Color900) */
  --c-50: #f8fafc;
  --c-100: #f1f5f9;
  --c-200: #e2e8f0;
  --c-300: #cbd5e1;
  --c-400: #94a3b8;
  --c-500: #64748b;
  --c-600: #475569;
  --c-700: #334155;
  --c-800: #1e293b;
  --c-900: #0f172a;
  --c-white: #ffffff;
  --c-blue: #007cee;           /* кнопки, поля, правая панель */
  --c-green: #14ae5c;          /* «готово» в ходе проверки */
  --c-red: #df1818;            /* нарушение, ошибка поля */
  --c-orange: #ff6648;         /* «Демо-режим» */
  --c-yellow: #ffa31a;         /* «обратить внимание» */
  --c-tip: #fff6e5;            /* фон подсказки */

  /* строки кратких выводов: фон и рамка по цвету */
  --row-red-bg: #fbf2f2;    --row-red-line: #e64e4e;
  --row-yellow-bg: #fff7e9; --row-yellow-line: #ffc56f;
  --row-green-bg: #f2fbf2;  --row-green-line: #5bc48c;
  --row-blue-bg: #f1f5f9;   --row-blue-line: #4ca3f3;
  --row-gray-bg: #f8fafc;   --row-gray-line: #cbd5e1;

  /* отчёт (кадр 320:6246, задача 05): рамка строки кратких выводов, плашка «N из M» и рамка
     карточки — один цвет на вид; надпись вида у рекомендации темнее рамки. В отчёте жёлтый и
     зелёный другие, чем в примере правой панели (--c-yellow, --c-green). */
  --rep-red: #df1818;
  --rep-yellow: #ffaa20;    --rep-yellow-ink: #ff9d00;
  --rep-green: #1f9c5a;
  --rep-blue: #007cee;
  --c-bright: #006fff;      /* «Записаться на консультацию», оговорка над отчётом */

  /* раскладка (задача 06 переопределяет для телефона) */
  --page-w: 1280px;
  --page-pad: 80px;
  --gap-col: 4px;
  --gap-row: 20px;
  --card-pad: 36px;
  --radius-card: 24px;
}

* { box-sizing: border-box; }

body.cp {
  margin: 0;
  background: var(--c-100);
  color: var(--c-800);
  font-family: "Golos Text", sans-serif;
  font-size: 16px;
  line-height: 20.8px;
  -webkit-font-smoothing: antialiased;
}

/* Сброс — через :where(), без веса: иначе `.cp h1` перебивал бы отступ `.cp-intro__title`. */
:where(.cp) [hidden] { display: none !important; }   /* hidden сильнее display блока */
:where(.cp) a { color: inherit; text-decoration: none; }
:where(.cp) p { margin: 0; }
:where(.cp) h1, :where(.cp) h2 { margin: 0; font-weight: 500; }
:where(.cp) img { display: block; }

.cp-wrap {
  width: var(--page-w);
  max-width: calc(100% - 2 * var(--page-pad));
  margin: 0 auto;
}

/* --- кнопки -------------------------------------------------------------------------------- */

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  font: 500 16px/19px "Golos Text", sans-serif;
  color: var(--c-white);
  cursor: pointer;
}
.cp-btn--dark { background: var(--c-800); }
.cp-btn--primary { background: var(--c-blue); }

/* --- шапка --------------------------------------------------------------------------------- */

.cp-header {
  background: var(--c-white);
  border-radius: 0 0 24px 24px;
  padding-bottom: 12px;
}

.cp-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  border-bottom: 1px solid var(--c-100);
  font-size: 14px;
  line-height: 17px;
  color: var(--c-800);
}
.cp-topbar__where { display: flex; gap: 20px; }

.cp-topbar__contacts {
  display: flex;
  gap: 40px;
  line-height: 18px;
}
.cp-contact { display: inline-flex; align-items: center; gap: 8px; }
.cp-contact .cp-icon { margin-right: -4px; }   /* у иконки зазор 4, между номерами — 8 */

.cp-nav {
  display: flex;
  align-items: center;
  height: 40px;
  margin-top: 12px;
}
.cp-logo img { width: 81px; height: 40px; }
/* Зазор в макете 20, но Chrome рисует слова Golos чуть шире Figma (~0,75 px на слово): 19 —
   чтобы края меню совпали с макетом. */
.cp-menu {
  display: flex;
  gap: 19px;
  margin-left: auto;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}
.cp-nav__cta { margin-left: 40px; }
/* «Бургер» — только на телефоне (задача 06): там меню и «Консультация» спрятаны за ним. */
.cp-burger {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: url(client/img/menu.svg) no-repeat center / 24px 24px;
  cursor: pointer;
}
.cp-burger[aria-expanded="true"] { background-image: url(client/img/modal-close.svg); }
.cp-burger:focus-visible { box-shadow: 0 0 0 3px rgba(0, 124, 238, 0.25); outline: none; }

/* --- хлебные крошки ------------------------------------------------------------------------ */

.cp-crumbs {
  display: flex;
  width: fit-content;
  gap: 4px;
  margin-top: 20px;
  height: 17px;
  font-size: 14px;
  line-height: 17px;
  color: var(--c-400);
}
.cp-crumbs a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  background: url(client/img/caret-right.png) no-repeat center / 12px 12px;
}

/* --- первый экран: две карточки ----------------------------------------------------------- */

.cp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* ряд кнопки (570) на 4 px шире поля */
  gap: var(--gap-col);
  margin-top: 20px;
}

.cp-card {
  background: var(--c-white);
  border-radius: var(--radius-card);
}

.cp-intro {
  min-height: 674px;
  padding: var(--card-pad);
}

/* плашки-«чипы» */
.cp-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  font: 500 12px/14px "Golos Text", sans-serif;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}
button.cp-chip { cursor: pointer; }
.cp-chip__info { margin-left: 4px; }
.cp-chip--demo { background: var(--c-orange); padding-left: 13px; }
.cp-chip--free { background: var(--c-blue); height: 32px; border-radius: 16px; }
.cp-chip__doc { margin-right: 4px; }
.cp-chip--sample { background: var(--c-800); }

.cp-intro__title {
  margin-top: 28px;
  width: 470px;
  font-size: 40px;
  line-height: 40px;
  color: var(--c-800);
}

.cp-intro__lead {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 117px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--c-800);
}

/* Всё в карточке — обычным потоком (не absolute): строки ошибок под полями раздвигают карточку,
   а не вылезают из неё. Над плашкой 41, а не 75, как в макете (задача 13): блок под полями стал
   выше на 34 (строка условий во всю ширину и под ней ряд «чекбокс — кнопка»), и плашка с формой
   поднята на столько же — карточка осталась 674, вровень с синей панелью, и всё ниже стоит по
   макету. */
.cp-tip-wrap.cp-intro__free { display: block; width: fit-content; margin-top: 41px; }

/* --- подсказки ----------------------------------------------------------------------------- */
/* По наведению и по нажатию или с клавиатуры (класс is-open — client.js): на телефоне
   наведения нет. */

.cp-tip-wrap { position: relative; display: inline-block; }
.cp-tip {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;           /* в макете у обеих подсказок одна высота, текст — по центру */
  width: 368px;
  min-height: 161px;
  padding: 24px 16px 24px 20px;      /* справа 16, а не 20: Chrome шире Figma, строки бились бы иначе */
  border-radius: 16px;
  background: var(--c-tip);
  box-shadow: 0 1px 4px rgba(12, 12, 13, 0.05), 0 1px 4px rgba(12, 12, 13, 0.1);
  font-size: 16px;
  line-height: 20.8px;
  color: var(--c-900);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s, visibility 0.12s;
}
.cp-tip::before {               /* хвостик к плашке */
  content: "";
  position: absolute;
  left: -12px;
  top: 28px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--c-tip);
  transform: rotate(45deg);
}
.cp-tip__icon { margin-bottom: 9px; }
.cp-tip p { position: relative; }
.cp-tip-wrap:hover .cp-tip,
.cp-tip-wrap.is-open .cp-tip { visibility: visible; opacity: 1; }
.cp-intro__demo .cp-tip { left: 139px; top: -21px; }
.cp-intro__free .cp-tip { left: 264px; top: -15px; }

/* --- форма --------------------------------------------------------------------------------- */

.cp-form {
  width: 570px;
  margin-top: 16px;
}
.cp-form > .cp-field { width: 566px; margin-bottom: 8px; }
.cp-form__bottom { width: 566px; }
.cp-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--c-blue);
  border-radius: 12px;
  background: var(--c-white);
  font: 400 18px/22px "Golos Text", sans-serif;
  color: var(--c-900);
  outline: none;
}
.cp-input::placeholder { color: var(--c-500); opacity: 1; }
.cp-input:focus { box-shadow: 0 0 0 3px rgba(0, 124, 238, 0.15); }

.cp-field__error {
  margin-top: 4px;
  font-size: 14px;
  line-height: 17px;
  color: var(--c-red);
}
.cp-field.is-error .cp-input { border-color: var(--c-red); }
.cp-field.is-error .check__box { border-color: var(--c-red); }

/* Блок под полями — задача 13 (дизайнер его под эту строку не рисовал; в кадре 320:5018 — 373 px
   слева от кнопки под строку в 87 знаков, а у юристов — 133). Строка «Нажимая «Проверить», я
   принимаю…» — во всю ширину полей (566), под ней ряд: чекбокс рассылки слева по центру кнопки,
   «Проверить» справа, правый край — по краю полей. Так строка идёт в 2 строки кеглем 14, как в
   кадре 1440, а не в 3–4 в узкой колонке. Отступы — шкала страницы: поля → строка 16 (больше,
   чем 8 между полями: другая группа), строка → ряд 12 (строка говорит о кнопке — ближе к ней). */
.cp-form__bottom { margin-top: 16px; }       /* сливается с нижним отступом поля email (8) */
.cp-form__terms { font-size: 14px; line-height: 18px; color: var(--c-500); }
.cp-form__terms a { text-decoration: underline; text-underline-offset: 2px; }
.cp-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}
.cp-form .cp-form__marketing { flex: 0 1 auto; min-width: 0; align-items: center; }
.cp-form .cp-form__marketing .check__text { padding-top: 0; }
/* Нажимаемая область чекбокса — 44 × 44 (прозрачный input поверх квадратика), а не 20 × 20: в
   подписи почти всё — ссылка на документ, по ней нажатие открывает документ. По высоте — по
   центру квадратика, по ширине — от 20 левее него до начала подписи: где колонка узкая (1200–1239),
   подпись идёт в две строки (квадратик — по их центру, он же центр кнопки), и вторая
   («информацию» — ссылка) под область не попадает. */
.cp-form .cp-form__marketing input {
  left: -20px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}

.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 14px;
  line-height: 17px;
  color: var(--c-500);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
/* Квадратик — рисунок из макета (снимок узла «Chek» в трёх видах); рамка поверх него прозрачная
   и краснеет при ошибке. */
.check__box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: url(client/img/check-off.png) no-repeat 0 0 / 20px 20px;
  background-origin: border-box;
}
.check input:checked + .check__box { background-image: url(client/img/check-on.png); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(0, 124, 238, 0.25); }
.check__text a { text-decoration: underline; text-underline-offset: 2px; }
.check__text { padding-top: 2px; }

.cp-form__submit {
  flex: none;
  height: 56px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 22px;
}

.cp-form__refusal {
  margin-top: 12px;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-red);
}

/* заблокированная форма: проверка запущена (кадр 320:5574) */
.cp-form.is-locked .cp-input {
  border-color: var(--c-100);
  background: var(--c-100);
  color: var(--c-900);
}
.cp-form.is-locked .cp-form__submit { background: var(--c-300); cursor: default; }
.cp-form.is-locked .check { cursor: default; }
.cp-form.is-locked .check input:checked + .check__box {
  background-image: url(client/img/check-locked.png);
}

/* --- правая панель «Пример краткого отчёта» ----------------------------------------------- */

/* Панель — столбик, белая карточка тянется до низа (задача 13): где левая карточка выше 674
   (строка условий в 3 строки при 1200–1359, строки ошибок), панель растёт вместе с ней, а снизу
   у белой карточки остаётся тот же отступ 36, без синей полосы. */
.cp-sample {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 674px;
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--c-blue);
}
.cp-sample__card {
  flex: 1 0 auto;
  align-self: stretch;
  margin-top: 24px;
  padding: 24px 24px 24px;
  min-height: 550px;
  border-radius: var(--radius-card);
  background: var(--c-white);
}
.cp-sample__title {
  max-width: 467px;
  font-size: 20px;
  line-height: 26px;
  color: var(--c-800);
}
.cp-accent { color: var(--c-blue); }
/* «152-ФЗ» не рвётся по дефису: на узком телефоне заголовок иначе встал бы «152-» / «ФЗ». */
.cp-nobr { white-space: nowrap; }

.cp-sum {
  width: 514px;
  margin-top: 16px;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
}
.cp-sum th {
  height: 30.7px;
  padding: 0 0 0 12px;
  font-size: 8px;
  line-height: 10px;
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
  color: var(--c-800);
}
.cp-sum th:nth-child(1) { width: 264px; }
.cp-sum th:nth-child(2) { width: 165px; }
.cp-sum td {
  height: 62.3px;
  padding: 0 12px;
  border-top: 1px solid var(--row-line);
  border-bottom: 1px solid var(--row-line);
  background: var(--row-bg);
  font-size: 12.5px;
  line-height: 15px;
  color: var(--c-800);
}
.cp-sum td:first-child { border-left: 1px solid var(--row-line); border-radius: 6px 0 0 6px; }
.cp-sum td:last-child { border-right: 1px solid var(--row-line); border-radius: 0 6px 6px 0; }
.cp-sum td + td { border-left: 1px solid var(--row-line); }
.cp-sum td.cp-sum__count { padding-left: 16px; }
.cp-sum td.cp-sum__fine {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--c-red);
  white-space: nowrap;
}
.cp-sum td.cp-sum__fine.is-word {          /* «обратить внимание», «нарушений не обнаружено» */
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  color: var(--c-600);
  white-space: normal;
}
.cp-pill {
  display: inline-block;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--pill);
  font-size: 13px;
  line-height: 28px;
  color: var(--c-white);
  white-space: nowrap;
}
.cp-sum__row.is-red { --row-bg: var(--row-red-bg); --row-line: var(--row-red-line); --pill: var(--c-red); }
.cp-sum__row.is-yellow { --row-bg: var(--row-yellow-bg); --row-line: var(--row-yellow-line); --pill: var(--c-yellow); }
.cp-sum__row.is-green { --row-bg: var(--row-green-bg); --row-line: var(--row-green-line); --pill: var(--c-green); }
.cp-sum__row.is-blue { --row-bg: var(--row-blue-bg); --row-line: var(--row-blue-line); --pill: var(--c-blue); }
.cp-sum__row.is-gray { --row-bg: var(--row-gray-bg); --row-line: var(--row-gray-line); --pill: var(--c-400); }

/* --- тёмный блок «Проверяем документы…» ---------------------------------------------------- */

.cp-dark {
  margin-top: var(--gap-row);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--c-700);
  color: var(--c-white);
}
.cp-dark__title {
  width: 832px;
  font-size: 24px;
  line-height: 31px;
}
.cp-dark__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.cp-plate {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 66px;
  padding: 0 17px 0 13px;
  border-radius: 12px;
  background: var(--c-white);
  font-size: 14px;
  line-height: 16px;
  color: var(--c-800);
}
.cp-plate__icon { flex: none; width: 40px; height: 40px; }
/* Ширины подписей — рамки текста в макете: края плашек совпадают, хотя слова в Chrome шире. */
.cp-plate__text { white-space: nowrap; }
.cp-plate--policy .cp-plate__text { width: 140px; }
.cp-plate--consent .cp-plate__text { width: 87px; }
.cp-plate--cookies .cp-plate__text { width: 32px; }
.cp-plate--rec .cp-plate__text { width: 126px; }
.cp-plate--auth .cp-plate__text { width: 206px; }
.cp-plate--ai .cp-plate__text { width: 124px; }

/* --- ход проверки -------------------------------------------------------------------------- */

.cp-progress {
  margin-top: var(--gap-row);
  padding: var(--card-pad);
}
.cp-progress__title {
  font-size: 32px;
  line-height: 35px;
  color: var(--c-800);
  overflow-wrap: anywhere;
}
/* Пояснение под заголовком хода — по кадру пользователя 2026-11-12 (в Figma 320:4953 его нет):
   мелким тёмно-серым, справка, а не заголовок; строки хода сдвинуты вниз на его высоту. */
.cp-progress__lead {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--c-700);
}
.cp-progress__rows {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
/* Время проверки под строками хода (client.js, drawTime): мелко и приглушённым серым, как подпись
   идущей строки, — справка, а не заголовок. В макете Figma места для него нет: сверить с
   дизайнером (задача 05 замечаний юристов). */
.cp-progress__time {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-500);
}
.cp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-800);
}
.cp-step.is-waiting { color: var(--c-500); }
.cp-step__icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: no-repeat center / 24px 24px;
}
.cp-step.is-done .cp-step__icon { background-image: url(client/img/tick-circle.png); }
.cp-step.is-run .cp-step__icon,
.cp-step.is-waiting .cp-step__icon { background-image: url(client/img/spinner.png); }
.cp-step.is-run .cp-step__icon { animation: cp-spin 1s linear infinite; }
.cp-step.is-failed .cp-step__icon { background-image: url(client/img/close-circle.svg); }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* Подпись идущей строки («Открываю политику сайта», client.js, syncHint): справа от названия, в
   пустом месте строки; мельче названия и приглушённого серого цвета шкалы. Буквы появляются по
   одной (скрипт), курсор после них мигает. Высоту строки на 1440 подпись не меняет (её строка
   ниже 24). Не помещается справа (узкое окно) — сжимается и переносится сама. */
.cp-step__hint {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 12px;                /* с зазором строки — 20 от названия: читается отдельно */
  font-size: 14px;
  line-height: 18px;
  color: var(--c-500);
}
/* Конец подписи — всегда бегущие точки «.» → «..» → «...», курсора нет (решение пользователя
   2026-11-12: было то курсор, то точки). Точки читаются как «идёт работа»; мигающий курсор — знак
   поля ввода. Пока фраза печатается — после неё ничего; допечаталась (`is-typed`) или удержана
   (`is-held`: дальше работа не пускает) — точки. Бегут сменой самого `content` (три шага по
   0,4 с), а не шириной, — поэтому ровные при любом шрифте. */
.cp-step__hint::after { content: none; }
.cp-step__hint.is-typed::after,
.cp-step__hint.is-held::after {
  content: ".";
  animation: cp-dots 1200ms steps(1, end) infinite;
}
@keyframes cp-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-step.is-run .cp-step__icon { animation: none; }
  .cp-step__hint.is-typed::after,
  .cp-step__hint.is-held::after { content: "…"; animation: none; }   /* точки — но стоят */
}

/* --- подвал -------------------------------------------------------------------------------- */

.cp-footer {
  margin-top: 120px;
  margin-bottom: 26px;
  padding: 32px var(--card-pad) 36px;
  border-radius: var(--radius-card);
  background: var(--c-900);
  color: var(--c-50);
}
.cp-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  border-bottom: 1px solid var(--c-600);
}
.cp-footer__brand {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  line-height: 19px;
}
.cp-footer__brand .cp-logo { margin-right: 20px; }
.cp-footer__contacts {
  display: flex;
  gap: 40px;
  font-size: 16px;
  line-height: 21px;
}
.cp-footer .cp-contact .cp-icon { margin-right: 0; }
.cp-footer__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.cp-footer__nav .cp-menu { margin-left: 0; }
.cp-footer__bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-400);
}
.cp-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* === Итог проверки (задача 05): отчёт по кадру 320:6246, ошибки — 320:5801 и 320:6018 ======== */

.cp-btn--lg {
  height: 56px;
  padding: 0 32px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 22px;
}
.cp-btn--ghost {                    /* «Сообщить о проблеме»: рамка внутри ширины кнопки */
  padding: 0 31px;
  border: 1px solid var(--c-600);
  background: var(--c-white);
  color: var(--c-600);
}
.cp-btn--bright { background: var(--c-bright); }
.cp-btn:disabled { background: var(--c-300); border-color: var(--c-300); color: var(--c-white); cursor: default; }

/* --- результаты и краткие выводы ----------------------------------------------------------- */

.cp-report {
  margin-top: var(--gap-row);
  padding: var(--card-pad);
}
.cp-report__title {
  font-size: 34px;
  line-height: 37px;
  color: var(--c-800);
  overflow-wrap: anywhere;
}
.cp-report__left {                 /* «Осталось бесплатных проверок: N» (Q24) — в макете нет */
  margin-top: 8px;
  font-size: 14px;
  line-height: 17px;
  color: var(--c-500);
}
.cp-report__lead {
  display: grid;
  gap: 16px;
  max-width: 960px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-800);
}
.cp-report__warn { color: var(--c-bright); }
/* Черта под вводными строками: в макете — вектор на 36 px ниже текста, заголовок — на 36 ниже. */
.cp-report__sub {
  margin: 36px 0 0;
  padding-top: 35px;
  border-top: 1px solid var(--c-200);
  font-size: 24px;
  font-weight: 500;
  line-height: 26px;
  color: var(--c-800);
}

.cp-brief {
  width: 100%;
  margin: 16px 0 5px;              /* низ рамки таблицы в макете на 9 px ниже последней строки */
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
}
.cp-brief th {
  height: 56px;
  padding: 0 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  text-align: left;
  vertical-align: middle;
  color: var(--c-500);
}
/* Ширины ячеек — рамки макета (43 / 532 / 322 / 314, соседние делят линию). */
.cp-brief th:nth-child(1) { width: 42px; }
.cp-brief th:nth-child(2) { width: 531px; }
.cp-brief th:nth-child(3) { width: 321px; }
.cp-brief td {
  height: 51px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 16px;
  line-height: 19px;
  color: var(--c-800);
  vertical-align: middle;
}
.cp-brief td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 8px 0 0 8px;
  color: var(--c-500);
}
.cp-brief td:last-child { border-right: 1px solid var(--line); border-radius: 0 8px 8px 0; }
.cp-brief td + td { border-left: 1px solid var(--line); }
.cp-brief .cp-brief__pill {
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}
.cp-brief td.cp-brief__fine { font-weight: 500; color: var(--rep-red); }
.cp-brief td.is-word { font-weight: 400; color: var(--c-600); }   /* «обратить внимание» и т. п. */
.cp-hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Цвета по виду: строка кратких выводов и карточка отчёта (--line — рамка, --bg — фон,
   --pill — плашка «N из M», --ink — надпись вида, --icon — значок вида). */
:is(.cp-brief__row, .cp-rc).is-red { --line: var(--rep-red); --bg: var(--row-red-bg); --pill: var(--rep-red); --ink: var(--rep-red); --icon: url(client/img/close-circle.svg); }
:is(.cp-brief__row, .cp-rc).is-yellow { --line: var(--rep-yellow); --bg: var(--row-yellow-bg); --pill: var(--rep-yellow); --ink: var(--rep-yellow-ink); --icon: url(client/img/kind-recommendation.svg); }
:is(.cp-brief__row, .cp-rc).is-blue { --line: var(--rep-blue); --bg: var(--row-blue-bg); --pill: var(--rep-blue); --ink: var(--rep-blue); --icon: url(client/img/kind-info.svg); }
:is(.cp-brief__row, .cp-rc).is-green { --line: var(--rep-green); --bg: var(--row-green-bg); --pill: var(--rep-green); --ink: var(--rep-green); --icon: url(client/img/kind-ok.svg); }
:is(.cp-brief__row, .cp-rc).is-gray { --line: var(--c-300); --bg: var(--row-gray-bg); --pill: var(--c-400); --ink: var(--c-600); --icon: url(client/img/kind-failed.svg); }

/* --- разделы и карточки -------------------------------------------------------------------- */

.cp-section {
  margin-top: var(--gap-row);
  padding: var(--card-pad) 35px;   /* в макете список карточек 1210 из 1280 */
}
.cp-section__title {
  font-size: 24px;
  line-height: 29px;
  color: var(--c-800);
}
.cp-cards {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
/* Карточка — три колонки макета: номер (136), текст (760), норма и штрафы (312). */
.cp-rc {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) 312px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
}
.cp-rc__num { padding: 20px; }
.cp-rc__pill {
  display: inline-block;
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--c-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  color: var(--c-800);
  white-space: nowrap;
}
.cp-rc__body { padding: 20px; }
.cp-rc__kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ink);
}
.cp-rc__kind::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--icon) no-repeat center / 20px 20px;
}
.cp-rc__body > p:not(.cp-rc__kind) {
  font-size: 16px;
  line-height: 22px;
  color: var(--c-800);
  overflow-wrap: anywhere;
}
.cp-rc__kind + p { margin-top: 12px; }
.cp-rc__body > p:not(.cp-rc__kind) + p { margin-top: 4px; }
.cp-rc__body > .cp-rc__title { font-weight: 500; }
.cp-rc__body > .cp-rc__sub { padding-left: 16px; }  /* строка уровня 2 (`levels`), задача 21 */
.cp-rc__law { padding: 23px 20px; }    /* норма — по середине строки «Нарушение» */
.cp-rc__norm {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-800);
}
.cp-rc__fines { display: grid; gap: 8px; margin-top: 12px; }
.cp-rc__norm[hidden] + .cp-rc__fines { margin-top: 0; }
.cp-rc__who { font-size: 16px; line-height: 21px; color: var(--c-800); }
.cp-rc__sum { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--rep-red); }

/* --- «Помогите нам улучшить сервис» (кадр 320:6474; под готовым отчётом, задача 18) -------- */

.cp-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 134px;
  margin-top: var(--gap-row);
  padding: 27px var(--card-pad) 28px 160px;
  border-radius: var(--radius-card);
  background: #ffa17b;
  color: var(--c-900);
}
.cp-feedback__text { width: 676px; }
.cp-feedback__title { font-size: 24px; line-height: 29px; }
.cp-feedback__text p { margin-top: 8px; font-size: 16px; line-height: 21px; }
/* После отправки отзыва слова стоят там, где была кнопка. */
.cp-feedback__thanks {
  max-width: 240px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-align: right;
  color: var(--c-900);
}
.cp-feedback__thanks:focus { outline: none; }

/* --- проверка не дала отчёта (кадр 320:5801) ------------------------------------------------ */

.cp-fail {
  margin-top: var(--gap-row);
  padding: var(--card-pad);
}
.cp-fail__head { display: flex; align-items: center; gap: 8px; }
.cp-fail__icon { flex: none; width: 40px; height: 40px; }
.cp-fail__title {
  font-size: 32px;
  line-height: 35px;
  color: var(--c-800);
  overflow-wrap: anywhere;
}
.cp-fail__lines {
  display: grid;
  gap: 12px;
  margin: 32px 0 0 48px;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-800);
}
.cp-fail__buttons { display: flex; gap: 12px; margin: 60px 0 0 48px; }
.cp-fail__lines[hidden] + .cp-fail__buttons { margin-top: 32px; }
.cp-fail__note {
  margin: 12px 0 0 48px;
  font-size: 14px;
  line-height: 17px;
  color: var(--c-red);
}
/* Виджет капчи Яндекса (задача 15, макета нет): 300×100 под строкой отказа, в рядке с ней; на узком
   экране не шире колонки — иначе страница поехала бы вбок. */
.cp-captcha { max-width: 100%; margin-top: 12px; }
.cp-fail__captcha { margin-left: 48px; max-width: calc(100% - 48px); }

/* --- формы заявок: консультация (в подвале) и «Сообщить о проблеме» (окно) ---------------- */

.cp-input--soft { border-color: var(--c-200); background: var(--c-100); }
.cp-input--soft:focus { border-color: var(--c-blue); }
.cp-lead__fields { display: grid; gap: 4px; }
.cp-lead__consent { margin-top: 12px; }
/* Галочка в макете — 24 px с квадратиком 20 внутри: тот же рисунок, что в форме проверки. */
.check--lead { align-items: center; font-size: 16px; line-height: 19px; color: var(--c-800); }
.check--lead input { width: 24px; height: 24px; }
.check--lead .check__box { margin: 2px; }
.check--lead .check__text { padding-top: 0; }
.cp-lead__note { margin-top: 8px; }
.cp-lead__sent {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  color: var(--c-800);
}
.cp-form__to-consult {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Консультация — белая карточка в начале подвала (кадр 320:6246): подвал тогда на 20 px ниже
   отчёта, а не на 120, и сверху у него 36, а не 32. */
.cp-footer.has-consult { margin-top: var(--gap-row); padding-top: var(--card-pad); }
.cp-consult {
  display: grid;
  grid-template-columns: 534px 566px;
  column-gap: var(--card-pad);
  margin-bottom: var(--card-pad);
  padding: var(--card-pad);
  border-radius: 16px;
  background: var(--c-white);
  color: var(--c-800);
}
.cp-consult__title { max-width: 516px; font-size: 36px; line-height: 40px; }
.cp-consult__lead { max-width: 476px; margin-top: 26px; font-size: 18px; line-height: 22px; }
.cp-consult__submit { margin-top: 24px; padding: 0 24px; }
.cp-consult__note { margin-top: 8px; font-size: 12px; line-height: 14px; color: var(--c-500); }
.cp-consult .cp-lead__sent { padding-top: 16px; }

/* Окно — без затемнения страницы, как в макете: только тень. */
.cp-modal {
  width: 726px;
  max-width: calc(100vw - 32px);
  padding: 60px 80px;
  border: 0;
  border-radius: 32px;
  background: var(--c-white);
  color: var(--c-800);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), 0 0 2px rgba(15, 23, 42, 0.08);
}
.cp-modal::backdrop { background: transparent; }
.cp-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: url(client/img/modal-close.svg) no-repeat center / 24px 24px;
  cursor: pointer;
}
.cp-modal__close:focus-visible { box-shadow: 0 0 0 3px rgba(0, 124, 238, 0.25); outline: none; }
.cp-modal__title { font-size: 36px; line-height: 40px; color: var(--c-800); }
.cp-modal__lead { margin-top: 20px; font-size: 18px; line-height: 22px; }
.cp-lead--problem { margin-top: 40px; }
.cp-lead--problem .cp-lead__fields { gap: 8px; }
.cp-modal__buttons { display: grid; gap: 12px; margin-top: 46px; }
.cp-btn--tg {
  gap: 8px;
  border: 1px solid var(--c-blue);
  background: var(--c-white);
  color: var(--c-blue);
}
.cp-modal .cp-lead__sent { margin-top: 40px; }
.cp-modal .cp-lead__sent:empty { margin: 0; }

/* Окно отзыва (задача 18): стиль окна «Сообщить о проблеме», свой макет не рисовался. Оценка — пять
   родных переключателей (прозрачный input лежит поверх рисунка, как у галочек): стрелки и Tab
   работают сами. */
.cp-lead--feedback { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.cp-ask-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.cp-ask {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: var(--c-800);
}
.cp-ask__opt { font-size: 14px; font-weight: 400; color: var(--c-500); }
.cp-rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cp-rating__item { position: relative; display: block; cursor: pointer; }
.cp-rating__item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cp-rating__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--c-200);
  border-radius: 12px;
  background: var(--c-100);
  font: 500 18px/22px "Golos Text", sans-serif;
  color: var(--c-800);
}
.cp-rating__item:hover .cp-rating__box { border-color: var(--c-blue); }
.cp-rating__item input:checked + .cp-rating__box {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: var(--c-white);
}
.cp-rating__item input:focus-visible + .cp-rating__box { box-shadow: 0 0 0 3px rgba(0, 124, 238, 0.25); }
.cp-field.is-error .cp-rating__box { border-color: var(--c-red); }
.cp-rating__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 14px;
  color: var(--c-500);
}
.cp-textarea { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; }
.cp-modal--feedback .cp-modal__buttons { margin-top: 12px; }

/* === Узкие экраны (задача 06) ================================================================
   Ступени. До 1439 — раскладка 1440 без жёстких ширин (форма, таблицы и ряды подвала
   тянутся и переносятся), уже 1200 — карточки первого экрана друг под другом. До 1023 — телефон
   один в один с кадрами 390: 320:6565 форма, 320:6741 ход, 320:6938 ошибка, 320:7124 отчёт,
   320:7447 окно «Сообщить о проблеме» снизу. Числа телефона — рамки get_metadata этих кадров,
   кегли и цвета — замер снимков узлов 1:1 (как у задач 04–05). Почему 1023, а не 390: шапка 1440
   с адресом и телефонами и подвал в две колонки не помещаются уже на планшете — там удобнее
   раскладка телефона, растянутая по ширине. */

@media (max-width: 1439px) {
  :root { --page-pad: 40px; }       /* от 1360 страница та же, что на 1440, — 1280 по центру */
  .cp-intro__title { width: auto; max-width: 470px; }
  .cp-form { width: auto; max-width: 570px; }
  .cp-form > .cp-field,
  .cp-form__bottom { width: auto; max-width: 566px; margin-right: 4px; }
  .cp-dark__title { width: auto; max-width: 832px; }
  /* Столбцы кратких выводов — доли ширины рамок макета (43 / 532 / 322 из 1208). */
  .cp-brief th:nth-child(1) { width: 3.48%; }
  .cp-brief th:nth-child(2) { width: 44%; }
  .cp-brief th:nth-child(3) { width: 26.6%; }
  .cp-feedback { gap: 24px; padding-left: min(160px, 12.5%); }
  .cp-feedback__text { flex: 1; width: auto; max-width: 676px; }
  .cp-consult { grid-template-columns: minmax(0, 534fr) minmax(0, 566fr); }
  .cp-footer__top { flex-wrap: wrap; height: auto; min-height: 72px; gap: 12px 40px; }
  .cp-footer__bottom { flex-wrap: wrap; gap: 8px 24px; }
}

/* Пример краткого отчёта — картинка из макета: где ему не хватает ширины колонки, он уменьшается
   целиком (zoom), как группа в мобильном кадре, а не переносит строки. */
@media (max-width: 1351px) {
  .cp-sum { zoom: 0.85; }
}

@media (max-width: 1199px) {
  .cp-hero { grid-template-columns: minmax(0, 1fr); }
  .cp-sum { zoom: 1; }
}

/* --- телефон: кадры 390 ------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Блоки — во всю ширину экрана (в кадрах x 0, ширина 390), поле внутри — 16. */
  :root {
    --page-pad: 0px;
    --gap-row: 20px;
    --card-pad: 16px;
    --radius-card: 16px;
  }

  /* шапка: логотип и «бургер» (кадр: 390 × 56, логотип 65 × 32 на 16 / 12, значок 24 на 350 / 16) */
  .cp-header { border-radius: 0 0 16px 16px; padding-bottom: 0; }
  .cp-topbar { display: none; }
  .cp-nav {
    flex-wrap: wrap;
    height: auto;
    margin-top: 0;
    padding: 0 16px;
  }
  .cp-nav .cp-logo { padding: 12px 0; }
  .cp-nav .cp-logo img { width: 65px; height: 32px; }
  .cp-burger { display: block; margin: 0 -8px 0 auto; }
  .cp-nav .cp-menu,
  .cp-nav__cta { display: none; }
  /* Открытое меню — своё (в кадрах его нет): ссылки столбиком, как в подвале, и «Консультация». */
  .cp-header.is-menu-open .cp-nav { padding-bottom: 20px; }
  .cp-header.is-menu-open .cp-nav .cp-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-basis: 100%;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--c-100);
  }
  .cp-header.is-menu-open .cp-nav__cta { display: inline-flex; flex-basis: 100%; margin: 16px 0 0; }
  .cp-menu a { line-height: 28px; }

  .cp-crumbs { flex-wrap: wrap; height: auto; max-width: calc(100% - 16px); margin: 12px 0 0 8px; }

  /* первый экран: карточки друг под другом */
  .cp-hero { gap: 20px; margin-top: 12px; }
  .cp-intro { min-height: 0; padding: 28px 16px; }
  .cp-intro__title {
    width: auto;
    max-width: none;
    margin-top: 16px;
    font-size: 34px;
    line-height: 34px;
    color: var(--c-900);            /* в кадре темнее, чем на 1440 */
  }
  .cp-intro__lead { gap: 21px; min-height: 0; margin-top: 16px; line-height: 21px; }
  .cp-tip-wrap.cp-intro__free { margin-top: 24px; }
  .cp-form { max-width: none; margin-top: 12px; }
  .cp-form > .cp-field,
  .cp-form__bottom { max-width: none; margin-right: 0; }
  .cp-form .cp-input { font-size: 16px; line-height: 19px; }   /* подсказка поля в кадре — 16 */
  /* Задача 13: строка (12 px, как в кадре 320:6583) → чекбокс → кнопка во всю ширину, ровный шаг
     12 — как от плашки до полей в кадре. Строка в 3 строки (в кадре — 2 под строку короче), зато
     межстрочный 15, а не 14, и отступ над ней 12, а не 30: кнопка и всё ниже — там же, где в кадре
     320:6565. Нажимаемая область чекбокса (44) заходит в оба отступа по 12 — ровно до строки и до
     кнопки, на них не налезая. */
  .cp-form__bottom { margin-top: 12px; }
  .cp-form__terms { font-size: 12px; line-height: 15px; }
  .cp-form__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cp-form .check { font-size: 12px; line-height: 14px; }
  /* слева от квадратика здесь только 16 до края экрана: область — по центру квадратика */
  .cp-form .cp-form__marketing input { left: -12px; }

  /* Подсказки — под плашкой во всю ширину карточки: справа от неё на телефоне места нет. */
  .cp-tip { width: min(358px, calc(100vw - 32px)); min-height: 0; }
  .cp-intro__demo .cp-tip,
  .cp-intro__free .cp-tip { left: 0; top: calc(100% + 12px); }
  .cp-tip::before { left: 24px; top: -6px; }

  .cp-sample { min-height: 0; padding: 28px 16px; }
  .cp-sample__card { min-height: 367px; margin-top: 16px; padding: 16px; }
  /* Строка «Сервис подготовлен юристами и готовит» в Chrome на 2 px шире рамки 326 — даём ей их,
     иначе заголовок встаёт в три строки. */
  .cp-sample__title { max-width: none; margin-right: -4px; font-size: 16px; line-height: 19px; }
  /* В кадре таблица — группа 1440, уменьшенная до 322 из 514: отступ над ней — 16 после zoom,
     просвет между строками — 2 (3 × 0,6265 Chrome округлил бы до 1). */
  .cp-sum { zoom: 0.6265; margin-top: 25.5px; border-spacing: 0 3.25px; }

  .cp-dark { padding: 28px 16px 37px; border-radius: 24px; }
  .cp-dark__title { max-width: 344px; }          /* рамка текста в кадре — 344, переносы те же */
  .cp-dark__list { flex-direction: column; margin-top: 16px; }
  .cp-plate { padding: 0 12px; border: 1px solid var(--c-200); }   /* в кадре у плашек рамка */

  .cp-progress { padding: 28px 20px; }
  .cp-progress__title { font-size: 24px; line-height: 26px; }
  .cp-progress__lead { margin-top: 8px; font-size: 14px; line-height: 20px; }
  .cp-progress__rows { margin-top: 20px; }
  /* Вторая строка «…с использованием иностранного сервиса» в Chrome на 2–3 px шире 318 — без
     запаса она встаёт в три строки; запас — в поле карточки. */
  .cp-step__text { margin-right: -8px; }
  /* Подпись идущей строки — под названием, под его текстом (не под значком): справа места нет.
     Названию дана нулевая основа, чтобы оно оставалось в одной линии со значком и переносилось
     внутри себя, как без подписи. */
  .cp-step.has-hint { flex-wrap: wrap; row-gap: 2px; }
  .cp-step.has-hint .cp-step__text { flex: 1 1 0; min-width: 0; }
  .cp-step__hint { flex: 0 0 calc(100% - 32px); margin-left: 32px; }   /* 24 значок + 8 зазор */

  /* Подвал: логотип и «Консультация» в ряд, под ними город и часы, контакты, черта, ссылки
     столбиком. Обёртки рядов 1440 (__top, __nav, __brand) на телефоне не рисуются (contents) —
     их части встают в сетку подвала сами. */
  .cp-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "consult consult consult" "logo . cta" "city hours hours"
      "contacts contacts contacts" "menu menu menu" "bottom bottom bottom";
    column-gap: 20px;
    margin: 40px 0 0;
    padding: 20px 16px;
  }
  .cp-footer__top,
  .cp-footer__nav,
  .cp-footer__brand { display: contents; }
  .cp-footer__brand .cp-logo { grid-area: logo; margin: 0; padding: 2px 0; }
  .cp-footer__brand .cp-logo img { width: 73px; height: 36px; }
  .cp-footer__brand > span:nth-of-type(1) { grid-area: city; margin-top: 20px; }
  .cp-footer__brand > span:nth-of-type(2) { grid-area: hours; margin-top: 20px; }
  .cp-footer__cta { grid-area: cta; align-self: start; }
  .cp-footer__contacts {
    grid-area: contacts;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--c-600);
  }
  .cp-footer__nav .cp-menu { grid-area: menu; flex-direction: column; gap: 4px; margin-top: 20px; }
  .cp-footer__bottom { grid-area: bottom; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px; }
  .cp-footer.has-consult { margin-top: 40px; padding-top: 20px; }

  /* --- итог проверки (кадр 320:7124 отчёт, 320:6938 ошибка) --- */

  .cp-report { padding: 28px 20px; }
  .cp-report__title { font-size: 24px; line-height: 26px; }
  .cp-report__lead { gap: 8px; max-width: none; margin-top: 16px; }
  .cp-report__lead br { display: none; }
  .cp-report__sub { margin-top: 24px; padding-top: 23px; font-size: 20px; line-height: 22px; }

  /* Краткие выводы — карточки строк: название, ниже «Нарушений: N из M» и «Штраф: …». Подписи —
     из CSS: в кадре они есть, а в таблице 1440 их заменяют заголовки столбцов. Номера раздела
     в кадре нет. */
  .cp-brief,
  .cp-brief tbody { display: block; }
  .cp-brief { margin: 16px 0 0; }
  .cp-brief thead,
  .cp-brief td:first-child { display: none; }
  .cp-brief tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
  }
  .cp-brief tr + tr { margin-top: 4px; }
  .cp-brief td,
  .cp-brief td:last-child,
  .cp-brief td + td {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 19px;
  }
  .cp-brief td:nth-child(2) { flex-basis: 100%; }
  .cp-brief td:nth-child(3)::before,
  .cp-brief td.cp-brief__fine::before {
    margin-right: 4px;
    font-size: 12px;
    line-height: 1;                  /* не раздвигает строку 19 */
    font-weight: 400;
    color: var(--c-800);
  }
  .cp-brief td:nth-child(3)::before { content: "Нарушений:"; }
  .cp-brief td.cp-brief__fine::before { content: "Штраф:"; }
  .cp-brief .cp-brief__pill {
    height: auto;
    padding: 0;
    background: none;
    line-height: 19px;
    color: var(--c-800);
  }
  /* «обратить внимание» и т. п. — в кадре у таких строк штрафа нет; высота строки 1, чтобы
     мелкий текст на общей базовой линии не раздвигал ряд 19. */
  .cp-brief td.is-word { font-size: 12px; line-height: 1; }

  .cp-section { padding: 28px 20px; }
  .cp-section__title { font-size: 24px; line-height: 26px; }
  .cp-cards { gap: 16px; margin-top: 28px; }
  /* Карточка — столбиком: вид, текст, под чертой норма и штрафы. Номера в кадре нет — у нас он
     справа в строке вида (номер пункта — спека Q15). */
  .cp-rc { position: relative; display: block; padding: 16px 12px; border-radius: 16px; }
  .cp-rc__num { position: absolute; top: 11px; right: 12px; padding: 0; }
  .cp-rc__num:empty,
  .cp-rc__law:empty { display: none; }
  .cp-rc:has(.cp-rc__pill) .cp-rc__kind { padding-right: 80px; }
  .cp-rc__body { padding: 0; }
  .cp-rc__body > p:not(.cp-rc__kind) { line-height: 21px; }
  .cp-rc__kind + p { margin-top: 16px; }
  .cp-rc__law { margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .cp-rc__fines > div { min-height: 47px; }       /* в кадре строка «ИП» со штрафом — 47 */
  .cp-rc__sum { font-size: 16px; line-height: 21px; }

  .cp-feedback {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    margin: 20px 16px 0;
    padding: 24px 16px;
    border-radius: 24px;
  }
  .cp-feedback__text { max-width: none; }
  .cp-feedback__title { font-size: 20px; line-height: 24px; }
  .cp-feedback__btn { height: 44px; margin-top: 16px; }
  .cp-feedback__thanks { max-width: none; margin-top: 16px; text-align: left; }

  .cp-fail { padding: 28px 16px; }
  .cp-fail__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cp-fail__title { font-size: 24px; line-height: 26px; }
  .cp-fail__lines { margin: 20px 0 0; }
  .cp-fail__buttons,
  .cp-fail__lines[hidden] + .cp-fail__buttons { flex-direction: column; gap: 8px; margin: 28px 0 0; }
  .cp-fail__note { margin-left: 0; }
  .cp-fail__captcha { margin-left: 0; max-width: 100%; }

  /* консультация — в подвале, как на 1440, но столбиком */
  .cp-consult {
    grid-area: consult;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 80px;
    padding: 20px 16px;
  }
  .cp-consult__title { max-width: none; font-size: 24px; line-height: 26px; }
  .cp-consult__lead { max-width: none; margin-top: 16px; font-size: 16px; line-height: 19px; }
  .cp-consult__side { margin-top: 20px; }
  .cp-consult__submit { width: 100%; margin-top: 40px; justify-content: flex-start; }

  /* Окно «Сообщить о проблеме» — лист снизу (кадр 320:7447): от 68 px под верхом экрана до низа,
     кнопки прижаты к низу листа. Снизу 92 — место строки «Нажимая кнопку…» и полоски телефона в
     кадре: так кнопки стоят там же, где в макете (строку заменила галочка под email, Q37). */
  .cp-modal {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 68px 0 0;
    padding: 101px 20px 92px;
    border-radius: 24px 24px 0 0;
  }
  .cp-modal[open] { display: flex; flex-direction: column; }
  .cp-modal::before {                /* «ручка» листа */
    content: "";
    position: absolute;
    top: 7px;
    left: calc(50% - 30px);
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--c-300);
  }
  .cp-modal__close { top: 16px; right: 16px; }
  .cp-modal__title { font-size: 22px; line-height: 24px; }
  .cp-modal__lead { margin-top: 16px; font-size: 16px; line-height: 21px; }
  .cp-lead--problem { display: flex; flex: 1 0 auto; flex-direction: column; margin-top: 32px; }
  .cp-lead--problem .cp-lead__consent { margin-bottom: 24px; }
  .cp-modal__buttons { gap: 8px; margin-top: auto; }
  /* Окно отзыва: нижний отступ не под строку кадра, а обычный; кнопка прижата вниз листа. */
  .cp-modal--feedback { padding-bottom: 32px; }
  .cp-lead--feedback { flex: 1 0 auto; margin-top: 24px; }
  .cp-modal--feedback .cp-modal__buttons { margin-top: auto; }
}

/* Пример краткого отчёта на узком телефоне: таблица 322 не влезает в 296 при 360. */
@media (max-width: 385px) {
  .cp-sum { zoom: 0.57; }
}
/* На планшете в раскладке телефона место есть — пример в полный размер. */
@media (min-width: 640px) and (max-width: 1023px) {
  .cp-sum { zoom: 1; margin-top: 16px; border-spacing: 0 3px; }
}