/* ===========================================================================
   Стили сайта: self-hosted шрифты, дизайн-токены, базовый блок.

   Шрифты — woff2 из пакетов Fontsource 5.3.0, отдаются со своего домена.
   Имена семейств — как в прототипе ('Piazzolla', 'Golos Text'); имена с
   суффиксом из CSS пакетов не используются — их не знает ни одно правило
   прототипа. Диапазоны кириллицы и латиницы скопированы из CSS пакетов
   (opsz.css Piazzolla, index.css Golos Text), не по памяти. Вес объявлен
   диапазоном: файл один на сабсет, начертания берутся из оси.
   =========================================================================== */

@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/piazzolla-cyrillic-opsz-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/piazzolla-latin-opsz-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-display: swap;
  font-weight: 400 900;
  src: url('../fonts/golos-text-cyrillic-wght-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-display: swap;
  font-weight: 400 900;
  src: url('../fonts/golos-text-latin-wght-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;
}

/* --- Дизайн-токены ---------------------------------------------------------
   Значения — из README (источник истины) и сверены с блоком <style>
   прототипа. Расхождений между двумя источниками не обнаружено.            */
:root {
  --bg:         #F7F3EC;   /* фон страницы, тёплый кремовый               */
  --card:       #FFFDF9;   /* фон карточек                                */
  --tint:       #EFE8DB;   /* тонированные блоки и внутренние разделители */
  --line-card:  #E8E1D4;   /* бордер карточек                             */
  --line:       #E0D8C8;   /* бордеры и разделители                       */
  --ink:        #2B2A27;   /* основной текст                              */
  --ink-soft:   #55524B;   /* вторичный текст                             */
  --ink-tint:   #42403A;   /* текст в тонированных блоках                 */
  --ink-mute:   #8A857B;   /* приглушённый текст                          */
  --green:      #3E5641;   /* акцент «шалфей»                             */
  --terra:      #C2703D;   /* акцент «терракота»                          */
  --terra-dark: #a85e30;   /* терракота в состоянии hover                 */
  --green-dark: #2f4232;   /* шалфей в состоянии hover                    */
  --gold:       #C9A227;   /* акцент «горчица»                            */
  --r-sm:       10px;      /* радиус карточек                             */
  --r-md:       12px;      /* радиус крупных тонированных блоков          */
  --r-pill:     999px;     /* радиус кнопок                               */
  --font-head:  'Piazzolla',serif;
  --font-body:  'Golos Text',sans-serif;
}

/* --- Базовый блок прототипа (строки 23–33), значения заменены токенами --- */
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);}
*{box-sizing:border-box;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--terra);}
.hdr{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(247,243,236,0.85);border-bottom:1px solid rgba(224,216,200,0.55);}
.hcard{transition:transform .25s ease,box-shadow .25s ease;}
.hcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(43,42,39,0.09);}
.btn{transition:transform .15s ease,background .2s ease,color .2s ease;}
.btn:active{transform:scale(0.97);}

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

   ВНИМАНИЕ. Перенос color из инлайна в класс сам по себе ломает hover:
   правило a:hover из базового блока имеет специфичность (0,1,1) и
   выигрывает у одиночного класса (0,1,0) — кремовый текст кнопки на
   наведении стал бы терракотовым. В прототипе этого не происходило,
   потому что там цвет стоял инлайн. Спасает ровно то правило, ради
   которого конвертируется style-hover: .cta:hover имеет специфичность
   (0,2,0) и перекрывает a:hover. То есть перенос цвета допустим ТОЛЬКО
   вместе с переносом hover-состояния — по отдельности любая из двух
   правок регрессионна.                                                    */
.cta{background:var(--terra);color:var(--bg);border-radius:var(--r-pill);font-weight:500}

/* Оба атрибута style-hover CTA-кнопок несут одно и то же объявление
   (background:#a85e30;color:#F7F3EC) на элементах одной роли, поэтому
   покрываются одним правилом.                                             */
.cta:hover{background:var(--terra-dark);color:var(--bg);}

/* Контурные кнопки футера («Telegram», «Макс»): инлайн-набор обеих
   одинаков, а оба атрибута style-hover несут одно и то же объявление
   (background:#3E5641;color:#F7F3EC) — элементы одной роли, одна пара
   правил. Цвета заменены токенами. Hover переезжает вместе с color —
   см. примечание у .cta.                                                  */
.btn-kontur{border:1.5px solid var(--green);color:var(--green);padding:8px 18px;border-radius:var(--r-pill)}
.btn-kontur:hover{background:var(--green);color:var(--bg);}

/* --- Классы конвертации тела лендинга: роль-размещение = свой класс -------
   Каждый носитель атрибута наведения в прототипе получает СВОЙ класс с
   живым :hover-правилом — по роли и размещению, без межролевой
   дедупликации. Одинаковые наборы объявлений у разных ролей сознательно
   не сливаются: слив двух ролей в один класс делает счётчик правил
   наведения слепым к потере hover у одной из них, а будущая правка одной
   роли молча тянула бы за собой другую. Цена — несколько повторяющихся
   строк ниже; выгода — взаимно-однозначное соответствие «носитель
   наведения в прототипе ↔ пара правил здесь».

   Перенос цвета — только вместе с переносом hover-состояния:
   см. предупреждение о специфичности a:hover у .cta выше.               */

/* CTA героя (лендинг): инлайн background/color/border-radius/font-weight +
   атрибут наведения background:#a85e30;color:#F7F3EC.                     */
.cta-hero{background:var(--terra);color:var(--bg);border-radius:var(--r-pill);font-weight:500}
.cta-hero:hover{background:var(--terra-dark);color:var(--bg);}

/* «Мне сюда» карточки «Развитие» (лендинг, два входа): контурная зелёная;
   атрибут наведения background:#3E5641;color:#F7F3EC.                     */
.syuda-zelen{border:1.5px solid var(--green);color:var(--green);border-radius:var(--r-pill);font-weight:500}
.syuda-zelen:hover{background:var(--green);color:var(--bg);}

/* «Мне сюда» карточки «Трудности» (лендинг, два входа): контурная
   терракотовая; атрибут наведения background:#C2703D;color:#F7F3EC.       */
.syuda-terra{border:1.5px solid var(--terra);color:var(--terra);border-radius:var(--r-pill);font-weight:500}
.syuda-terra:hover{background:var(--terra);color:var(--bg);}

/* CTA секции услуг (лендинг): набор объявлений совпадает с CTA героя,
   но роль-размещение своя — сознательно не сливается (см. правило выше). */
.cta-uslugi{background:var(--terra);color:var(--bg);border-radius:var(--r-pill);font-weight:500}
.cta-uslugi:hover{background:var(--terra-dark);color:var(--bg);}

/* --- Правила форм анкеты (style-блок её прототипа, строки 21–22) ----------
   Терракота контура фокуса заменена токеном; у цвета плейсхолдера #A39D8F
   токена в :root нет — значение остаётся шестнадцатеричным, как в
   прототипе.                                                              */
input::placeholder,textarea::placeholder{color:#A39D8F;}
input:focus,textarea:focus{outline:2px solid var(--terra);outline-offset:0;border-color:transparent;}

/* Кнопка отправки анкеты: атрибут наведения прототипа меняет ТОЛЬКО фон,
   поэтому в класс уезжает один background — остальной инлайн кнопки
   остаётся на месте. Это button, а не ссылка: правило a:hover из базового
   блока на неё не действует, и тянуть color в класс вместе с состоянием
   наведения здесь не нужно — цвет остаётся инлайн.                        */
.otpravit{background:var(--terra);}
.otpravit:hover{background:var(--terra-dark);}

/* --- Кнопки баннера согласия (все пять страниц) ---------------------------
   Две собственные пары правил: заливочная зелёная у принятия и контурная у
   отклонения. С существующими ролями наборы СОЗНАТЕЛЬНО НЕ СЛИВАЮТСЯ, хотя
   контурная пара близка к .syuda-zelen, — правило проекта выше: слив двух
   ролей в один класс делает счётчик правил наведения слепым к потере
   наведения у одной из них.

   РАСХОЖДЕНИЕ С .syuda-zelen НАЗВАНО, А НЕ ОБЪЯВЛЕНО ПОВТОРЕНИЕМ: сверх её
   набора .soglasie-otklonit несёт background:transparent. Оно там нужно по
   существу — .syuda-zelen это ссылка, у которой фона нет по умолчанию, а
   отклонение это button, которому таблица стилей браузера кладёт свою
   серую заливку. Без объявления контурная кнопка вышла бы залитой.

   Обе роли — button, и предупреждение о специфичности a:hover на них не
   действует; цвет всё равно переезжает в класс вместе с состоянием
   наведения, потому что порознь любая из двух правок регрессионна для
   следующей роли, которую сюда допишут. Затемнение фона у заливочной и
   заливка цветом бордера у контурной — поведение кнопок, записанное
   спецификацией.

   ⚠️ Ссылка в тексте баннера свой класс НЕ получает: её цвет приходит из
   базового правила a и одинаков со всеми ссылками сайта. Перенос цвета
   ссылки в класс без переноса состояния наведения здесь как раз запрещён
   предупреждением выше.                                                   */
.soglasie-prinyat{background:var(--green);color:var(--bg);border-radius:var(--r-pill);font-weight:500}
.soglasie-prinyat:hover{background:var(--green-dark);color:var(--bg);}

.soglasie-otklonit{background:transparent;border:1.5px solid var(--green);color:var(--green);border-radius:var(--r-pill);font-weight:500}
.soglasie-otklonit:hover{background:var(--green);color:var(--bg);}

/* --- Типографика страниц юридических документов ---------------------------
   Текст этих страниц приходит из docs/*.md готовой разметкой: ни атрибутов
   style, ни классов у его элементов нет и завести их негде — значит, весь
   вид задаётся правилами по тегам внутри колонки .dokument. Отсюда и
   единственный класс: он ограничивает область этих правил колонкой
   документа, чтобы они не доставали до шапки, футера и остальных страниц.

   Ни одного нового токена: все значения — переменные :root, те же, что на
   лендинге и в анкете. Правил наведения здесь нет намеренно — ссылки внутри
   юридических текстов не размечаются, а те, что есть на странице, приходят
   из шапки и футера со своими правилами.

   Таблице отведена отдельная строка. Таблица условий обработки технических
   данных шире колонки 720px, и без неё выбор был бы между разъехавшейся
   колонкой и потерянными столбцами. display:block с горизонтальной
   прокруткой — обычное средство для этого случая: разметка приходит голым
   <table>, обернуть его контейнером нечем, а скриптов на страницах
   документов нет вовсе.                                                    */
.dokument{font-family:var(--font-body);color:var(--ink-soft);}
.dokument h1,.dokument h2,.dokument h3{font-family:var(--font-head);font-weight:500;color:var(--ink);line-height:1.2;}
.dokument h1{font-size:clamp(26px,4.4vw,34px);margin:0 0 18px;}
.dokument h2{font-size:23px;margin:36px 0 12px;}
.dokument h3{font-size:18px;margin:28px 0 10px;}
.dokument p{margin:0 0 14px;text-wrap:pretty;}
.dokument strong{color:var(--ink);font-weight:600;}
.dokument ul,.dokument ol{margin:0 0 14px;padding-left:22px;}
.dokument li{margin:0 0 6px;}
.dokument blockquote{margin:0 0 18px;padding:14px 18px;background:var(--tint);color:var(--ink-tint);border-left:3px solid var(--line);border-radius:var(--r-sm);}
.dokument blockquote p:last-child{margin-bottom:0;}
.dokument hr{border:0;border-top:1px solid var(--line);margin:28px 0;}
.dokument code{font-size:14px;color:var(--ink-mute);}
.dokument table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 18px;font-size:14px;
  /* Тень у края — единственное, что сообщает о прокрутке: полоса прокрутки на
     десктопе оверлейная и до первого движения не видна, а таблица условий шире
     колонки на 160px, и за краем оказывается столбец «Условие работы» — тот
     самый, что несёт правило обработки. Без подсказки читатель видит
     законченную таблицу из пяти столбцов.
     Приём держится на background-attachment: два «укрытия» цвета фона едут
     вместе с содержимым (local), две тени приколоты к коробке (scroll). Когда
     укрытие уезжает из-под тени, тень проступает: слева — если есть что
     прокрутить назад, справа — если вперёд. Обёртки для таблицы нет и завести
     её нечем: разметка приходит из markdown голым <table>, скриптов на
     страницах документов нет вовсе. */
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment:local, local, scroll, scroll;}
.dokument th,.dokument td{border:1px solid var(--line-card);padding:9px 12px;text-align:left;vertical-align:top;}
.dokument th{background:var(--tint);color:var(--ink);font-weight:600;}
/* Плотнее ячейки, пока колонка узка: цель не «вместить» — вместить 840px в 680
   нельзя без вреда тексту, — а вывести край шестого столбца в поле зрения,
   чтобы обрыв читался как обрыв, а не как конец таблицы. */
@media (max-width:900px){
  .dokument th,.dokument td{padding:8px 9px;}
}

/* --- Медиазапросы прототипа, перенесены как есть --------------------------
   Мобильный блок @media (max-width:760px) едет одним куском, целиком;
   !important сохранены — это несущая конструкция против инлайновых
   значений, а не мусор. Правила FAQ прототипа не перенесены: раздел
   удалён с сайта решением заказчицы, таких элементов в разметке нет.      */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.22,.7,.3,1),transform .65s cubic-bezier(.22,.7,.3,1);}
  .rv.in{opacity:1;transform:none;}
}
@media (min-width:900px){.steps-grid{grid-template-columns:repeat(5,1fr) !important;}}
@media (max-width:760px){
  .hide-m{display:none !important}
  .m-pad{padding-left:18px !important;padding-right:18px !important}
  .m-sec{padding-bottom:56px !important}
  .m-secall{padding-top:56px !important;padding-bottom:56px !important}
  .m-hero{padding-top:24px !important;padding-bottom:48px !important;gap:28px !important}
  .m-how{padding-top:48px !important;padding-bottom:56px !important}
  .m-h1{font-size:33px !important}
  .m-eyebrow{font-size:11.5px !important;letter-spacing:0.07em !important}
  .m-name{font-size:18px !important}
  .m-logo{width:38px !important;height:38px !important}
  .m-cta{padding:9px 14px !important;font-size:13.5px !important}
  .m-card{padding:26px 20px !important}
  .m-bigcard{padding:32px 22px !important}
  .m-lead{padding:36px 22px !important}
  .m-hero-img{min-height:0 !important}
  /* КОРОБ КАДРА «ОБО МНЕ» НЕСЁТ ОТНОШЕНИЕ СТОРОН КАДРА, А НЕ ФИКСИРОВАННУЮ
     ВЫСОТУ. С высотой в 340 точек короб на телефоне выходил примерно 394×340
     (отношение 1,159 против 1,05 у файла 840×800), и object-fit:cover срезал
     около 35 точек по вертикали — по 17,6 сверху и снизу, ровно там, где
     лежат волосы. Снято на живом сайте на окне просмотра 430. object-position
     отвергнут: он выбирает, чем пожертвовать, а несоответствие оставляет.
     СЛЕДСТВИЕ НАМЕРЕННОЕ: высота мобильного короба теперь плавает вместе с
     шириной — это отступление от одобренной мобильной раскладки, а не дрейф.
     !important стоит ровно там, где у свойства есть инлайновый соперник у
     самого короба (height:400px и min-height:320px в src/index.njk): без
     height:auto инлайновая высота остаётся определённой и aspect-ratio
     игнорируется целиком, а min-height подпирала бы короб снизу на ширинах
     ниже примерно 372 и там же ломала бы отношение сторон. У aspect-ratio
     инлайнового соперника нет, и лишний !important объявлял бы
     несуществующую защиту. Числа 420/400 — те же, что стоят атрибутами width
     и height у тега: при замене кадра оба места правятся одной мыслью.     */
  .m-about-img{height:auto !important;min-height:0 !important;aspect-ratio:420/400}
  .m-btn-full{width:100% !important;text-align:center !important}
  .m-quote{font-size:18px !important}
}