/* Общие блоки сайта: кейс, основатель, цитата, шаги, форма заявки,
   стена логотипов, панель цифр.

   Их вид утверждён на главной и одинаков на всех страницах (R111).
   Правится только здесь. Если блок понадобился второй раз — он переезжает
   в этот файл, а не копируется с новым именем: именно так на странице
   услуги успели разойтись кейсы и карточка основателя. */

.c-panel { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.c-panel__c { padding: 0 var(--s5); border-right: 1px solid var(--line); }
.c-panel__c:first-child { padding-left: 0px; }
.c-panel__c:last-child { border-right: 0px; }
.c-panel__c .n { font-size: 46px; white-space: nowrap; }
.c-panel__c .l { margin-top: var(--s2); }
.c-panel__c--key .n { color: var(--accent); }
.c-steps { margin-top: var(--s6); }
.c-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.c-case { padding: var(--s5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 230px; display: flex; flex-direction: column; position: relative; transition: background 0.25s ease-out, color 0.25s ease-out; }
.c-case .n { font-size: 46px; margin-bottom: var(--s2); }
.c-case__what { font-size: 15px; color: var(--ink-2); flex: 1 1 0%; }
/* Черта перед клиентом прижата к низу: у карточек разной длины текста
   она иначе встаёт на разной высоте и ряд выглядит неровным (R197). */
.c-case__who { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--hair); }
.c-case__who b { font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; font-size: 15px; display: block; }
.c-case__who span { font-size: 12px; color: var(--ink-2); }
.c-case__go { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: 12px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
.c-case__go svg { width: 14px; height: 14px; }
.c-case:hover, .c-case:focus-within { background: var(--accent); color: var(--on-accent); }
.c-case:hover .c-case__what, .c-case:hover .c-case__who span { color: inherit; opacity: 0.85; }
.c-case:hover .c-case__who { border-top-color: currentcolor; }
.c-case:hover .c-case__go, .c-case:focus-within .c-case__go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
.c-case, .c-case__go { transition: none; }
.c-case__go { transform: none; }
}
.c-founder { display: grid; grid-template-columns: 420px 1fr; gap: var(--s7); align-items: start; }
.c-founder__photo { aspect-ratio: 2 / 3; overflow: hidden; background: rgb(21, 19, 24); }
.c-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.c-quote { margin-top: var(--s6); padding-left: var(--s4); border-left: 3px solid var(--accent); font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; font-size: 26px; line-height: 1.15; color: var(--accent); }
.c-form { display: grid; gap: var(--s3); }
.c-form input { border: 1px solid var(--ink); background: transparent; padding: var(--s3) var(--s4); font-family: Geologica, sans-serif; font-size: 17px; color: var(--ink); }
.c-form textarea { border: 1px solid var(--ink); background: transparent; padding: var(--s3) var(--s4); font-family: Geologica, sans-serif; font-size: 17px; color: var(--ink); resize: vertical; min-height: 92px; }
.c-form input::placeholder, .c-form textarea::placeholder { color: var(--ink-2); }
/* Ответ после отправки заявки (R317): на сиреневом поле форма светлая,
   поэтому цвет берётся от поля, а не задаётся жёстко. */
.c-form__msg { margin: 0; font-size: 15px; line-height: 1.45; }
.c-form__msg--ok { color: var(--ink); }
.c-form__msg--err { color: var(--accent); }
.field--violet .c-form__msg--err, .field--black .c-form__msg--err { color: var(--act); }
@media (max-width: 1200px){
.c-cases { grid-template-columns: repeat(2, 1fr); }
.c-founder { grid-template-columns: 300px 1fr; gap: var(--s6); }
}
@media (max-width: 900px){
.c-panel { grid-template-columns: 1fr 1fr; gap: var(--s5) 0; margin-top: var(--s6); }
.c-panel__c { padding: 0 var(--s4); }
.c-panel__c:nth-child(2n+1) { padding-left: 0px; }
.c-panel__c:nth-child(2n) { border-right: 0px; }
.c-panel__c .n { font-size: 34px; }
.c-founder { grid-template-columns: 1fr; }
.c-founder__photo { aspect-ratio: 3 / 4; max-width: 420px; }
.c-founder__photo img { object-position: 50% 12%; }
.c-case__go { opacity: 1; transform: none; }
}
@media (max-width: 600px){
.c-panel__c .n { font-size: 26px; }
.c-cases { grid-template-columns: 1fr; }
.c-case { min-height: 0px; }
.c-quote { font-size: 20px; }
}

/* Строки «ключ — значение» под портретом основателя */
.c-spec { margin-top: var(--s6); border-top: 1px solid var(--line); }

.c-spec__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--s5); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }

/* на узком экране ключ встаёт над значением */
@media (max-width: 900px){
.c-spec__row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Просмотр отчёта целиком: высокий скриншот прокручивается внутри окна,
   а не ужимается до нечитаемого (R117) */
.a-lb__in{max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch}
/* Селектор с двумя классами намеренно: у письма на главной правило
   `.a-lb img{max-height:88vh}` иначе ужимает отчёт до нечитаемого */
.a-lb .a-lb__full{display:block;width:auto;max-width:min(1100px,94vw);
  max-height:none;height:auto;background:#fff;
  /* Такое же поле и рамка, как у маленького снимка в блоке (R143):
     увеличенный отчёт тоже читается как лист, а не как вырезанный кусок */
  padding:var(--s2);border:1px solid #EFEDF2;box-sizing:border-box}

/* Хлебные крошки. Живут внутри чёрного поля первого экрана: своей полосы
   не занимают, промежутка не создают. Отступ снизу намеренно маленький —
   до подписи раздела должно быть близко (R127). */
.c-crumbs{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.c-crumbs a{color:var(--ink-2);text-decoration:none}
/* Черта тенью, а не рамкой: рамка добавляла строке пиксель высоты, и первый
   экран страницы со ссылкой в крошках уезжал вниз относительно главной */
.c-crumbs a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 currentColor}
.c-crumbs__here{opacity:.7}
/* Значок пути: два звена, соединённые линией — тот же язык, что у схемы */
.c-crumbs__i{width:17px;height:17px;flex:none;opacity:.6;align-self:center;margin-right:2px}
/* До подписи раздела должно быть близко: раньше здесь стоял отступ
   в 72 px и первый экран начинался слишком низко (R127) */
.c-crumbs{margin-bottom:var(--s2)}

/* Стена клиентов: один файл, показывается целиком. Сетка из отдельных
   плиток срезала логотипы краем ячейки, поэтому её здесь нет (R140). */
.c-clients{display:block;width:100%;height:auto;margin-top:var(--s5)}

/* Метка услуги на карточке кейса: результаты по контексту и по поиску
   лежат в одном списке, и должно быть видно, откуда цифра (R196). */
.c-case__tag { color: var(--accent); margin-bottom: var(--s2); }
.c-case:hover .c-case__tag, .c-case:focus-within .c-case__tag { color: inherit; opacity: 0.85; }

/* Кейсов бывает больше четырёх — тогда они едут каруселью со стрелками.
   Карусель бесконечная и та же, что у писем на главной: полосы прокрутки
   под блоком нет, листают стрелками или пальцем (R197). */
.c-cases--car { display: block; border: 0; }
.c-cases--car .car__track { gap: 0; border-left: 1px solid var(--line); }
.c-cases--car .c-case { flex: 0 0 300px; border-top: 1px solid var(--line); }
/* Пояснение не растягивается: место под ним забирает отступ у блока
   с клиентом, и черта во всех карточках встаёт на одном уровне.
   Под описание клиента резервируем две строки — иначе у карточек
   с коротким описанием черта уезжает ниже соседних (R197). */
.c-cases--car .c-case__what { flex: 0 1 auto; }
.c-cases--car .c-case__who span { display: block; min-height: 35px; }
@media (max-width: 640px) {
  .c-cases--car .c-case { flex: 0 0 82vw; }
}

/* ─── крупный первый экран: крошки слева, заголовок по центру (R218) ─── */
.c-big { text-align: center; padding-top: var(--s5); }
.c-big .c-crumbs { justify-content: flex-start; text-align: left; margin-bottom: var(--s7); }
.c-big__h { font-size: clamp(46px, 9vw, 120px); }   /* ступень сверх шкалы, см. DESIGN.md */
.c-big__lead { max-width: 34em; margin: var(--s5) auto 0; }
.c-big__cta { margin: var(--s6) 0 0; }
.c-big--left .c-big__cta { text-align: left; }

@media (max-width: 640px) {
  .c-big .c-crumbs { margin-bottom: var(--s4); }
  .c-big__lead { margin-top: var(--s4); }
  .c-big__cta { margin-top: var(--s5); }
}

/* ─── прайс-лист: строка на услугу ─── */
.c-plist { display: grid; }
.c-plist__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5);
  align-items: center; border-top: 1px solid var(--hair); padding: var(--s4) 0; }
.c-plist__r:last-child { border-bottom: 1px solid var(--hair); }
.c-plist__h { margin: 0; font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase; font-size: 20px; line-height: 1.2; }
.c-plist__t { margin-top: 6px; color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.c-plist__n { margin: 0; font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600;
  font-size: 26px; line-height: 1; white-space: nowrap; display: grid; gap: 4px; justify-items: end; }
.c-plist__per { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.c-plist__cta { margin: 0; }
.c-plist__cta .btn { padding: 12px var(--s4); font-size: 13px; }

/* ─── публикации в СМИ ─── */
.c-press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.c-press__c { border: 1px solid var(--hair); padding: var(--s5); display: grid; gap: var(--s3);
  grid-template-rows: auto auto 1fr auto; }
.c-press__m { color: var(--accent); }
.c-press__h { margin: 0; font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600;
  letter-spacing: .04em; font-size: 19px; line-height: 1.25; }
.c-press__t { color: var(--ink-2); font-size: 15px; }
.c-press__go { display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto;
  font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; font-size: 14px; transition: color .15s ease-out; }
.c-press__go svg { width: 15px; height: 15px; transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.c-press__go:hover, .c-press__go:focus-visible { color: var(--accent); }
.c-press__go:hover svg, .c-press__go:focus-visible svg { transform: translateX(4px); }

/* ─── вакансии ─── */
.c-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.c-jobs__c { border: 1px solid var(--line); padding: var(--s5); display: grid; gap: var(--s3);
  grid-template-rows: auto auto 1fr auto; }
.c-jobs__h { margin: 0; }
.c-jobs__t { color: var(--ink-2); }
.c-jobs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.c-jobs__list li { padding-left: var(--s4); position: relative; font-size: 15px; }
.c-jobs__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1px;
  background: var(--accent); }
.c-jobs__cta { margin: var(--s3) 0 0; align-self: end; }
.c-jobs__note { margin-top: var(--s5); color: var(--ink-2); }

/* ─── акции ─── */
.c-promo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
/* Четыре строки: название, текст, цена, кнопка. Текст забирает остаток
   высоты, поэтому цена и кнопка стоят на одной линии во всех карточках
   ряда, как бы ни различалась длина описания (R228). */
.c-promo__c { border: 1px solid var(--ink); padding: var(--s6); display: grid; gap: var(--s3);
  grid-template-rows: auto 1fr auto auto; }
.c-promo__h { margin: 0; }
.c-promo__t { color: var(--ink-2); }
.c-promo__price { margin: var(--s2) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); }
.c-promo__was { color: var(--ink-2); font-size: 20px; }
.c-promo__now { font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600; font-size: 46px;
  line-height: 1; }
.c-promo__per { color: var(--ink-2); }
.c-promo__cta { margin: var(--s3) 0 0; }

@media (max-width: 1200px) {
  .c-press, .c-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .c-plist__r { grid-template-columns: 1fr auto; gap: var(--s3) var(--s4); }
  .c-plist__cta { grid-column: 1 / -1; }
  .c-plist__n { justify-items: start; }
  .c-press, .c-jobs, .c-promo { grid-template-columns: 1fr; }
  .c-promo__c { padding: var(--s5); }
}

@media (max-width: 640px) {
  .c-plist__r { grid-template-columns: 1fr; }
  .c-plist__n { font-size: 22px; }
  .c-promo__now { font-size: 34px; }
}

/* ─── оценки на площадках отзывов ─── */

.c-rate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.c-rate__c { border: 1px solid var(--hair); padding: var(--s5); display: grid; gap: var(--s2);
  align-content: start; }
.c-rate__k { color: var(--ink-2); }
.c-rate__n { margin: var(--s2) 0 0; font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600;
  font-size: 54px; line-height: 1; letter-spacing: .01em; display: flex; align-items: baseline; gap: var(--s2); }
.c-rate__of { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.c-rate__stars { margin: 0; color: var(--accent); font-size: 15px; letter-spacing: .18em; line-height: 1; }
.c-rate__t { color: var(--ink-2); font-size: 15px; }
.c-rate__t--only { margin-top: var(--s3); min-height: 78px; }
.c-rate__go { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; font-size: 15px; transition: color .15s ease-out; }
.c-rate__go svg { width: 16px; height: 16px; transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.c-rate__go:hover, .c-rate__go:focus-visible { color: var(--accent); }
.c-rate__go:hover svg, .c-rate__go:focus-visible svg { transform: translateX(4px); }
.c-rate__note { margin-top: var(--s5); color: var(--ink-2); }

@media (max-width: 900px) {
  .c-rate { grid-template-columns: 1fr; gap: var(--s4); }
  .c-rate__c { padding: var(--s4); }
  .c-rate__t--only { min-height: 0; }
}

/* ─── все кейсы плиткой: та же карточка, что в блоке «Кейсы», но сеткой
       на всю ширину раздела, и скрытые сортировкой карточки не занимают места ─── */
.c-cases--all { margin-top: var(--s6); }
.c-cases--all .c-case[hidden] { display: none; }

/* Линия над именем клиента идёт по одному уровню во всём ряду: род занятий
   у кого-то в одну строку, у кого-то в две, и без запаса линия прыгала (R252).
   Межстрочное задано явно, а запас равен ровно двум строкам — иначе остаётся
   разница в пару пикселей, и линия всё ещё гуляет. Описаний длиннее двух
   строк в каталоге нет. */
.c-cases--all .c-case__who span { display: block; line-height: 1.45; min-height: 2.9em; }

/* ─── табло цифр отдельным блоком: сверху линии нет, её рисует сама секция.
       Колонок столько, сколько цифр: у кейса их бывает две, три или четыре,
       и пустая колонка в ряду выглядела бы как потерянный блок ─── */
.c-panel--flat { margin-top: 0; padding-top: 0; border-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* На узком экране auto-fit складывал табло в одну колонку, а правила чётности
   из медиазапроса выше рассчитаны на две: вторая цифра оставалась с левым
   отступом и «съезжала» вправо относительно первой и третьей (R308).
   Поэтому число колонок здесь задаётся явно, а в одной колонке отступов нет. */
@media (max-width: 900px){
  .c-panel--flat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .c-panel--flat { grid-template-columns: 1fr; gap: var(--s5) 0; }
  .c-panel--flat .c-panel__c { padding-left: 0; padding-right: 0; border-right: 0; }
}

/* ─── карточка кейса по разработке: вместо цифры имя клиента (R262).
       Числового результата у таких кейсов нет, а «8 линеек» читателю
       ничего не говорило. Кегль меньше цифры: имена бывают длинные
       («Центр Лебедева Даниила»), и в 46 пикселей они не помещаются ─── */
.c-case .n.c-case__name { font-size: 28px; line-height: 1.1; letter-spacing: 0; }
@media (max-width: 900px) {
  .c-case .n.c-case__name { font-size: 24px; }
}

/* ─── было → стало: оценки клиентов на площадках отзывов (R266).
       Результат работы с репутацией — не заявка и не трафик, а рейтинг:
       поэтому в карточке пара цифр, а не одна. «Было» набрано мелко
       и приглушённо, «стало» — крупно, как цифра результата в кейсах ─── */
.c-rise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.c-rise__c { padding: var(--s5); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); display: flex; flex-direction: column;
  transition: background 0.25s ease-out, color 0.25s ease-out; }
.c-rise__k { color: var(--accent); margin-bottom: var(--s4); }
.c-rise__row { padding-top: var(--s3); }
.c-rise__row + .c-rise__row { margin-top: var(--s3); border-top: 1px solid var(--hair); }
.c-rise__site { margin: 0 0 var(--s1); font-size: 15px; color: var(--ink-2); }
.c-rise__pair { margin: 0; display: flex; align-items: baseline; gap: var(--s2); }
.c-rise__was { font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px;
  color: var(--ink-2); }
.c-rise__arr { width: 16px; height: 16px; color: var(--ink-2); align-self: center; }
.c-rise__now { font-size: 38px; }
/* Подпись под парой цифр печатается всегда, даже пустая, и держит высоту
   строки: без запаса строка «Zoon 4,3 → 4,8» короче соседней, и волосяная
   линия между строками встаёт на разном уровне в соседних карточках (R267). */
.c-rise__note { margin: var(--s1) 0 0; font-size: 13px; line-height: 1.45;
  min-height: 1.45em; color: var(--ink-2); }
.c-rise__go { display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: var(--s4); font-size: 12px; font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
.c-rise__go svg { width: 14px; height: 14px; }
.c-rise__c--link:hover, .c-rise__c--link:focus-within { background: var(--accent); color: var(--on-accent); }
.c-rise__c--link:hover .c-rise__k, .c-rise__c--link:hover .c-rise__site,
.c-rise__c--link:hover .c-rise__was, .c-rise__c--link:hover .c-rise__note,
.c-rise__c--link:hover .c-rise__arr { color: inherit; opacity: 0.85; }
.c-rise__c--link:hover .c-rise__row + .c-rise__row { border-top-color: currentcolor; }
.c-rise__c--link:hover .c-rise__go, .c-rise__c--link:focus-within .c-rise__go { opacity: 1; transform: none; }
.c-rise__foot { margin-top: var(--s5); color: var(--ink-2); }
@media (max-width: 1100px) {
  .c-rise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .c-rise { grid-template-columns: 1fr; }
  .c-rise__c { padding: var(--s4); }
  .c-rise__go { opacity: 1; transform: none; }
}

/* ─── всплывающее окно — общий каркас (R295).
       Им пользуются подборка материалов в блоге и форма заявки, которую
       открывают кнопки «Обсудить проект» и «Получить консультацию» ─── */
.p-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--s4); }
.p-pop[hidden] { display: none; }
.p-pop__bg { position: absolute; inset: 0; background: rgba(11, 11, 11, .6); }
.p-pop__box { position: relative; width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.p-pop__x { position: absolute; top: var(--s3); right: var(--s3); z-index: 1;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; color: #FFFFFF; cursor: pointer; }
.p-pop__x svg { width: 20px; height: 20px; }
.p-pop__x:hover, .p-pop__x:focus-visible { color: var(--act); }
.p-pop__box { width: min(520px, 100%); }
@media (max-width: 900px) {
  .p-pop__box { width: 100%; }
}

/* Форма в окне: то же сиреневое поле, что у блока заявки на странице.
   Цвет задаётся классом field--violet, а не своим фоном: вместе с фоном
   он переопределяет --ink и --ink-2, и поля формы остаются читаемыми —
   белая рамка и светлый текст подсказки (R297). */
.c-pop__form { padding: var(--s6); }
.c-pop__form .h2 { font-size: clamp(26px, 3.4vw, 34px); }
.c-pop__form .lead { margin: var(--s3) 0 var(--s5); }
@media (max-width: 900px) {
  .c-pop__form { padding: var(--s5) var(--s4); }
}

/* Согласие на обработку данных: галочка обязательна — без неё форма
   не отправляется, как того требует закон (R295) */
.c-form__ok { display: flex; gap: var(--s2); align-items: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  line-height: 1.5; letter-spacing: .04em; cursor: pointer; }
.c-form__ok input { width: 18px; height: 18px; flex: none; margin: 1px 0 0;
  accent-color: var(--act); cursor: pointer; }
/* Ссылки в согласии подчёркнуты: иначе на сайте, где ссылки без подчёркивания,
   их не отличить от обычного текста (R300) */
.c-form__ok a { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
.c-form__ok a:hover, .c-form__ok a:focus-visible { text-decoration-thickness: 2px; }

/* ─── правовой документ: политика и согласие (R298).
       Одна колонка ограниченной ширины — такие страницы читают подряд ─── */
.p-legal { max-width: 760px; }
.p-legal p { margin: 0 0 var(--s3); }
.p-legal__h { margin: var(--s6) 0 var(--s3); }
.p-legal__h:first-child { margin-top: 0; }
.p-legal__l { margin: 0 0 var(--s4); padding-left: var(--s4); }
.p-legal__l li { margin-bottom: var(--s2); }

/* ─── плашка о cookie ─── */
/* Стоит поверх страницы и ничего не двигает: появление не должно толкать
   макет. Поле белое с рамкой — плашка выпадает на любой экран, в том числе
   на чёрный первый, и чёрное поле там просто растворялось (R342). */
.c-cookie { position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 50;
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  max-width: 720px; margin: 0 auto; padding: var(--s4) var(--s5);
  background: #FFFFFF; color: #151318; border: 1px solid #151318; }
.c-cookie[hidden] { display: none; }
.c-cookie__t { font-size: 15px; line-height: 1.5; margin: 0; flex: 1 1 320px; color: #151318; }
.c-cookie__t a { color: #7D2EBD; text-decoration: underline; text-underline-offset: 3px; }
.c-cookie__t a:hover { text-decoration: none; }
.c-cookie__b { flex: none; padding: 12px var(--s5); font-size: 14px;
  background: #FFD600; color: #151318; }
@media (max-width: 600px) {
  .c-cookie { left: var(--s3); right: var(--s3); bottom: var(--s3); gap: var(--s3);
    padding: var(--s4); }
  .c-cookie__b { width: 100%; justify-content: center; }
}