@font-face{font-family:"Onest";src:url(/f/onest.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Стиль страниц-ответов.
   Отдельный файл, а не десять копий внутри страниц: правка типографики
   в одном месте, а браузер тянет его один раз на весь обход сайта.
   Палитра, шкала, шапка, кнопки и подвал — те же, что на главной и в
   квизе, чтобы переход со страницы на страницу не читался как переход
   на другой сайт. */
:root{
  /* --- цвета -------------------------------------------- */
  --navy:#1d232b;
  --navy-deep:#14181d;
  --navy-950:#0b0e12;
  --navy-raised:#272f3a;
  --navy-edge:#39434f;
  --gold:#b98b2e;
  --gold-bright:#d9ab4a;
  --gold-ink:#6f5312;
  --blue-soft:#c3c6c2;
  --blue-line:#9aa0a6;
  --blue-ink:#5c6470;
  --paper:#f2f1ed;
  --paper-deep:#e7e5de;
  --card:#ffffff;
  --line:#d6d3c9;
  --ink:#1a1f26;
  --ink-2:#4a5058;
  --err:#b3261e;

  /* --- новые токены, заведены 31.08 с именем и ролью --- */
  /* Нажатое состояние латунной кнопки. Только :active, больше нигде */
  --gold-press:#b08d1e;
  /* Средняя точка латунного градиента полосы. Не назначать фоном */
  --gold-mid:#c69a38;
  /* Светлая латунная подложка выбранного варианта в квизе */
  --gold-wash:#fff9e8;
  /* То же на тон плотнее — подложка значка в списке признаков */
  --gold-wash-2:#fbf3dc;
  /* Текст поверх латунного полотна. Единственное применение */
  --gold-deep:#2c2409;
  /* Ссылка в тексте. Не кнопка: кнопка латунная, ссылка синяя */
  --link:#0b4fa8;
  /* Чистый чёрный. Только в градиентах и затемнениях, не текстом */
  --black:#000000;

  /* --- тройки под rgba() ---------------------------------
     rgba() не берёт var() как цвет целиком, поэтому базовые
     оттенки лежат ещё и тройками. rgba(var(--navy-950-rgb),.35)
     поедет вместе с палитрой, а rgba(11,14,18,.35) — нет:
     ровно так остатки палитры 1 дожили до 31.08. */
  --navy-rgb:29,35,43;
  --navy-deep-rgb:20,24,29;
  --navy-950-rgb:11,14,18;
  --navy-raised-rgb:39,47,58;
  --navy-edge-rgb:57,67,79;
  --gold-rgb:185,139,46;
  --gold-bright-rgb:217,171,74;
  --gold-ink-rgb:111,83,18;
  --blue-soft-rgb:195,198,194;
  --blue-line-rgb:154,160,166;
  --blue-ink-rgb:92,100,112;
  --paper-rgb:242,241,237;
  --paper-deep-rgb:231,229,222;
  --card-rgb:255,255,255;
  --line-rgb:214,211,201;
  --ink-rgb:26,31,38;
  --ink-2-rgb:74,80,88;
  --err-rgb:179,38,30;
  --gold-press-rgb:176,141,30;
  --gold-mid-rgb:198,154,56;
  --gold-wash-rgb:255,249,232;
  --gold-wash-2-rgb:251,243,220;
  --gold-deep-rgb:44,36,9;
  --link-rgb:11,79,168;
  --black-rgb:0,0,0;

  /* --- остальное: шрифты, формы, тени, движение --- */
  --sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tnum:tabular-nums;
  --r:4px;
  --r2:10px;
  --sh1:0 1px 2px rgba(11,14,18,.07), 0 10px 24px -14px rgba(11,14,18,.30);
  --sh2:0 2px 4px rgba(11,14,18,.08), 0 28px 56px -28px rgba(11,14,18,.40);
  --hh:68px;
  --ease:cubic-bezier(.2,.7,.25,1);

  /* --- шкала текста по ролям, 31.08 ------------------------------
     Роль, а не тег: один размер может стоять и в h2, и в подписи,
     если роль одна. Снято с живых страниц, не придумано. */
  --t-caption:0.9375rem;    /* 15px — подписи, метки, мелкое      */
  --t-body:1.0625rem;       /* 17px — основной текст              */
  --t-body-lg:1.1875rem;    /* 19px — лид страницы-ответа         */
  --t-subheading:1.375rem;  /* 22px — подзаголовок раздела        */
  --t-heading-sm:1.625rem;  /* 26px — заголовок раздела           */
  --t-heading:1.8125rem;    /* 29px — заголовок страницы-ответа   */
  --t-display:clamp(2rem,1.4rem + 2.6vw,3.375rem);  /* первый экран */

  /* --- трекинг ---------------------------------------------------
     Одно правило на всё, два оговорённых исключения. До 31.08 было
     тринадцать значений и «normal» на 83 элементах — то есть решение
     принимал браузер, а не мы. */
  --tr:-0.011em;            /* базовый, самое частое живое значение */
  --tr-big:-0.02em;         /* от 22px: при крупном кегле реже      */
  --tr-caps:0.13em;         /* прописные метки, иначе слипаются     */

  /* --- отступы ---------------------------------------------------
     База 4px соблюдалась на глаз — записываем явно. Кратные, как
     в обоих образцах скилла. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s14:56px;
  --s18:72px; --s24:96px;
}
/* Единый трекинг, 31.08. Раньше его не было вовсе: тринадцать значений
   вразнобой и «normal» на 83 элементах. Ровная мелочь, проведённая
   через всю страницу, работает сильнее десяти разных приёмов —
   у Nornorm это прямо названо подписью системы. */
body{letter-spacing:var(--tr)}
h1,h2,.hero h1{letter-spacing:var(--tr-big)}
.kicker,.sec-h .kicker{letter-spacing:var(--tr-caps)}

*{box-sizing:border-box}
/* Кегли в rem от базового размера документа: у аудитории 45+ он часто
   крупнее обычного, и в пикселях эта настройка игнорируется полностью. */
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.125rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* Тёплая подсветка сверху — та же деталь, что на первом экране
     главной. Собрана градиентом: ни одного внешнего запроса. */
  background-repeat:no-repeat;
  /* Место под нижнюю панель со звонком, иначе она накрывает подвал. */
  padding-bottom:80px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}

.wrap{max-width:720px;margin:0 auto;padding:0 20px;width:100%}

/* --- шапка: один в один с главной и квизом --- */
.head{display:flex;align-items:center;min-height:68px;gap:6px 10px;
  flex-wrap:wrap;background:var(--navy-deep);padding:0 20px;
  position:sticky;top:0;z-index:8;box-shadow:0 1px 0 rgba(var(--card-rgb),.07)}
.head .mark{display:flex;align-items:center;gap:10px;color:var(--card);
  text-decoration:none;padding:6px 0;min-width:0;
  font:700 0.6875rem/1.2 var(--sans);letter-spacing:.055em;
  text-transform:uppercase}
.head .mark img{width:34px;height:34px;flex:0 0 34px}
.head .mark span{display:block;line-height:1.2;white-space:nowrap}
.head .tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 6px;border-radius:var(--r);
  color:var(--gold-bright);text-decoration:none;
  font:700 0.875rem/1 var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.head .tel::before{content:"";width:17px;height:17px;flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.head .tel:active{background:rgba(var(--gold-bright-rgb),.16)}
/* Ниже 400 название и телефон в строку не встают и наезжают друг на
   друга — проверено на снимке. Прячем подпись, эмблема остаётся. */
@media (max-width:399px){ .head .mark span{display:none} }

/* --- хлебные крошки --- */
/* Крошки. Кегль поднят с 12px до 15px и ссылка сделана целью
   в палец: обход на 390 пикселях 27.08 намерил 56×15 — нажать такую
   с телефона можно со второй попытки, а это единственный путь назад
   со страницы-ответа. */
.crumbs{max-width:720px;margin:0 auto;padding:10px 20px 0;
  font:700 0.9375rem/1.4 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.crumbs a{color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  border-bottom:1px solid rgba(var(--ink-2-rgb),.35)}

/* --- текст --- */
main{padding-top:4px;padding-bottom:40px}
h1{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.75rem);line-height:1.1;
  font-weight:800;letter-spacing:-.026em;margin:14px 0 22px;
  /* position:relative и нижнее поле держались только ради черты
     h1::after, которой больше нет. Оставлять их — оставлять след
     от убранного приёма. */
  text-wrap:balance}
/* Золотая черта под заголовком — та же отбивка разделов, что на
   главной. Здесь она отделяет вопрос от короткого ответа. */
/* Черта под заголовком убрана 31.08: это тот же цветной кант,
   что убрали у карточек, только под h1. На главном сайте её нет.
   Заголовок держится размером, а не подчёркиванием. */

h2{font-size:clamp(1.3125rem,1.1rem + 1vw,1.625rem);line-height:1.22;
  font-weight:800;letter-spacing:-.018em;margin:40px 0 12px;
  text-wrap:balance}
p{margin:0 0 16px;max-width:62ch}
a{color:var(--link)}

/* Короткий ответ. Стоит первым и выделен: человек в тревоге читает две
   строки и решает, остаться или уйти. Полоска слева заменена на белую
   карточку с золотой чертой сверху — цветной кант слева у скруглённой
   карточки выдаёт шаблон, а карточка с чертой читается как выписка. */
/* .page .lead, а не .lead. Класс был перегружен: на главной это лид
   первого экрана светлым по графиту, на странице-ответе — карточка
   на бумаге. Одно имя, две роли — и на главной выходило белое по
   белому, 1.81:1. Скилл про это прямо: роли, а не теги. */
.page .lead{font-size:1.1875rem;line-height:1.55;background:var(--card);
  padding:20px 18px 22px;border-radius:var(--r2);border:1px solid var(--line);
  margin:0 0 10px;box-shadow:var(--sh1);position:relative;overflow:hidden;
  max-width:none}


@media (min-width:600px){ .page .lead{padding:26px 26px 28px} }

/* --- призыв --- */
.cta{background:var(--navy-deep);color:var(--card);border-radius:var(--r2);
  padding:28px 22px 30px;margin:44px 0 10px;position:relative;overflow:hidden}

.cta h2{margin:0 0 12px;color:var(--card)}
.cta p{color:var(--blue-soft);max-width:46ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:15px 22px;border-radius:var(--r);
  text-decoration:none;font:800 1.0625rem/1.15 var(--sans);text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s var(--ease),transform .15s var(--ease),
             border-color .12s var(--ease),box-shadow .16s var(--ease)}
.btn-gold{background:var(--gold);color:var(--navy-deep);
  box-shadow:0 10px 26px -14px rgba(var(--navy-950-rgb),.35)}
.cta .btn-gold{box-shadow:none}
.btn-line{border:1.5px solid rgba(var(--blue-soft-rgb),.55);color:var(--card);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--gold-bright);
    box-shadow:0 14px 30px -14px rgba(var(--navy-950-rgb),.35)}
  .btn-line:hover{border-color:var(--gold);color:var(--gold-bright)}
}
/* На касании ховера нет — отклик даём нажатием, иначе кнопка кажется
   неживой. */
.btn:active{transform:translateY(1px) scale(.995)}
.btn-gold:active{background:var(--gold-press)}
.btn-line:active{background:rgba(var(--blue-soft-rgb),.14)}
@media (max-width:479px){ .btns{flex-direction:column} .btn{width:100%} }

/* --- соседние вопросы --- */
.rel{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rel li{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);transition:border-color .16s var(--ease),
    box-shadow .16s var(--ease)}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:60px;padding:14px 18px;text-decoration:none;color:var(--ink);
  font-weight:700;line-height:1.4}
.rel a::after{content:"→";flex:0 0 34px;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--gold-ink);font-weight:400;
  transition:transform .16s var(--ease),border-color .16s}
@media (hover:hover) and (pointer:fine){
  .rel li:hover{border-color:var(--blue-line);box-shadow:var(--sh1)}
  .rel a:hover::after{transform:translateX(3px);border-color:var(--gold)}
}
.rel a:active{color:var(--gold-ink)}

/* --- подвал --- */
footer{background:var(--navy-950);color:var(--blue-soft);
  padding:44px 0 36px;margin-top:52px;position:relative}

/* Ссылки подвала — цель в палец. Телефон, почта и политика имели
   высоту 17–18 пикселей: на телефоне это промах через раз, а телефон
   в подвале — единственный способ позвонить из нижней половины
   страницы. Обход 27.08. */
footer a{color:var(--card);display:inline-flex;align-items:center;
  min-height:44px}
.fname{color:var(--card);font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
footer .small{font-size:0.9375rem;line-height:1.55;margin:12px 0;max-width:52ch}
/* 15px, а не 13: аудитория 45+ читает с телефона, и всё, что мельче,
   пропускается глазом. Дисклеймер — обязательство от имени коллегии,
   он должен быть прочитан. */
.disc{font-size:0.9375rem;line-height:1.55;color:var(--blue-line);margin:22px 0 0;
  padding-top:18px;border-top:1px solid rgba(var(--blue-soft-rgb),.16);max-width:70ch}

/* --- нижняя панель ---
   Вид и порог совпадают с главной: на десктопе её нет вовсе, там телефон
   и так стоит в шапке, а прибитая ко дну полоса во всю ширину экрана
   выглядит как баннер. Золотом выделена заявка, а не звонок — так же,
   как на главной, иначе при переходе туда-сюда кнопки меняются местами
   по цвету. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;
  gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--navy-950-rgb),.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(var(--gold-rgb),.35)}
.bar a{flex:1;min-height:52px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r);text-decoration:none;
  font:700 1rem/1.1 var(--sans)}
.bar .b1{border:1.5px solid rgba(var(--blue-soft-rgb),.55);color:var(--card);flex:0 0 44%}
.bar .b1:active{background:rgba(var(--blue-soft-rgb),.16)}
.bar .b2{background:var(--gold);color:var(--navy-deep)}
.bar .b2:active{background:var(--gold-press)}
@media (min-width:900px){ body{padding-bottom:0} }
@media (max-width:899px){ .bar{display:flex} }

:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* Уважаем системную настройку «меньше движения»: анимаций здесь нет,
   но нажатие кнопки тоже сдвиг. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
  .btn:active{transform:none}
}

/* Собрано scripts/blok_css.py — руками не править.
   Стили квиза берутся из site/landing/quiz-source.html
   и замыкаются под #quiz той же функцией, что на первом
   сайте. Правка стилей квиза там доезжает сюда сама.

   Стилей нового первого экрана здесь НЕТ намеренно:
   они лежат в blok_sejf.стили_ekrana() и подмешиваются
   только в предпросмотр. Иначе боевая страница носила бы
   восемь килобайт правил, которые в ней ничего не делают. */


/* --- второй сайт: свои блоки ------------------------------------------
   Палитра, типографика, шапка и подвал приходят из q.css. Здесь только
   то, чего на первом сайте нет: первый экран, плитки двух законов
   и список разборов. */

/* Прожектор убран 31.08: детектор зовёт его radial-spotlight-glow,
   скилл — прямо в списке «чего не делать». Первый экран держится
   сплошной поверхностью и типографикой, как на главном сайте. */
/* Прожектор убран 31.08: детектор зовёт его radial-spotlight-glow,
   скилл — прямо в списке «чего не делать». Первый экран держится
   сплошной поверхностью и типографикой, как на главном сайте. */
.hero{background:var(--navy-deep);color:var(--card);padding:56px 0 52px;
  text-align:center}
.hero h1{font-size:1.7rem;line-height:1.22;margin:0 0 14px;max-width:16em}
.hero .lead{color:var(--blue-soft);max-width:32em;margin:0 0 22px}

.hero .btn{display:inline-flex;align-items:center;justify-content:center;
  /* Поля настоящие, а не нулевые при min-height: так на главном
     (14px 22px при высоте 60). Текст без вертикального поля
     упирается в край подложки, даже если по высоте посередине. */
  min-height:60px;padding:14px 26px;border-radius:var(--r);
  background:var(--gold);color:var(--navy-deep);font-weight:700;
  font-size:1.0625rem;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(var(--navy-950-rgb),.8);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.hero .btn:active{transform:translateY(1px)}

.sec{padding:40px 0}
.sec-h{margin-bottom:22px}
/* Шкала главного сайта: 15px/600 без черты. Было 13px/700 с
   латунным кантом — кант заставлял display:flex, а размер
   детектор ловил как kicker-above-heading. Цвет --gold-ink:
   надзаголовок лежит на бумаге, а --gold там 2.7:1. */
.kicker{font:600 0.9375rem/1.35 var(--sans);letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px;
  display:block}
.sec-h h2{margin:0;font-size:1.4rem;line-height:1.25}

/* Две плитки. На телефоне в столбик: рядом на 390 пикселях каждая
   стала бы в половину экрана, и текст пошёл бы по три слова в строку. */
.two{display:grid;gap:16px}
@media(min-width:720px){.two{grid-template-columns:1fr 1fr}}
.tile{background:var(--card);border-radius:var(--r2);padding:20px;
  box-shadow:var(--sh1)}
.tile h3{margin:0 0 8px;font-size:1.0625rem;color:var(--ink)}
.tile p{margin:0;color:var(--ink-2)}

.qlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.qlist li{margin:0}
/* Пункт списка — цель для пальца целиком, а не только буквы.
   Ссылка высотой в строку (17 пикселей) на телефоне не нажимается:
   обход 27.08 нашёл такие в подвале первого сайта. */
.qlist a{display:block;min-height:52px;display:flex;align-items:center;
  padding:12px 14px;background:var(--card);border-radius:var(--r);
  color:var(--ink);text-decoration:none;box-shadow:var(--sh1)}
.qlist a:active{background:var(--paper-deep)}

/* Появление блоков при прокрутке. Тот же приём, что на первом сайте:
   сдвиг небольшой и один раз. Уважаем системную настройку — при
   prefers-reduced-motion анимации выключаются целиком. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}
                to{opacity:1;transform:none}}
.sec-h,.tile,.qlist li{animation:rise .5s var(--ease) backwards}
.tile:nth-child(2){animation-delay:.08s}
.qlist li:nth-child(n+2){animation-delay:.04s}
@media (prefers-reduced-motion: reduce){
  .sec-h,.tile,.qlist li,.hero .btn{animation:none;transition:none}
}

/* Страницы-ответы: те же отступы, что на первом сайте. */
.page{max-width:660px;margin:0 auto;padding:24px 20px 40px}
/* Переопределение снято: q.css уже задаёт .page .lead 1.1875rem/1.55,
   ровно как на страницах-ответах главного сайта. */
/* Крошки. min-height обязателен: свои правила идут ПОСЛЕ q.css и
   перебивают тамошнюю поправку про цель в палец. Обход 28.08 намерил
   здесь 70x19 — ровно то, что на первом сайте уже чинили. */
.crumbs{max-width:660px;margin:0 auto;padding:8px 20px 0;
  font-size:.9375rem;color:var(--ink-2);
  display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px}
.cta{background:var(--navy-deep);color:var(--card);border-radius:var(--r2);
  padding:22px;margin:32px 0}
.cta h2{margin:0 0 8px;font-size:1.1875rem}
.cta p{color:var(--blue-soft);margin:0 0 14px}
.cta .btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 22px;border-radius:var(--r2);
  background:var(--gold);color:var(--navy-deep);font-weight:700;
  text-decoration:none}
.rel{margin-top:32px}
.rel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rel a{display:flex;align-items:center;min-height:52px;padding:12px 14px;
  background:var(--card);border-radius:var(--r);color:var(--ink);
  text-decoration:none;box-shadow:var(--sh1)}

footer .wrap{max-width:660px;margin:0 auto;padding:28px 20px}
footer{background:var(--navy-950);color:var(--blue-soft);margin-top:40px}
footer p{margin:0 0 8px}
footer .small{font-size:.9375rem}
/* Ссылки подвала — цель в палец. На первом сайте телефон в подвале
   имеет высоту 18 пикселей, и обход 27.08 это поймал. */
footer a{color:var(--gold-bright);display:inline-flex;align-items:center;
  min-height:44px}
/* 15px, а не 14: аудитория та же, что на первом сайте. Дисклеймер —
   обязательство от имени коллегии, он должен быть прочитан. */
footer .dis{color:var(--blue-line);font-size:.9375rem;line-height:1.6;margin-top:16px}

/* Крючок перед квизом. Кегль крупнее обычного: это последнее, что
   человек читает перед первым вопросом. Перенесено с первого сайта. */
.band{background:var(--navy-deep);color:var(--card);padding:36px 0}
/* 15px, как на первом сайте: обход 29.08 намерил здесь 13px.
   Кикер короткий и заглавными, но именно по нему человек понимает,
   о чём раздел, а аудитории 45+ мельче 15 не читается. */
.band .kicker{color:var(--gold-bright);font-size:.9375rem}
.band h2{color:var(--card)}
/* Колонка 34em, а не 40. При кегле 20 сорок em это ~800 точек и
   около 90 знаков в строке — глаз теряет начало следующей. Норма
   из скилла: 480-760 точек. 34em при 20px даёт 680. */
.big-say{font-size:1.125rem;line-height:1.55;color:var(--blue-soft);
  max-width:40em;margin:0 0 14px}
.big-say b{color:var(--card)}
@media (min-width:1000px){ .big-say{font-size:1.25rem} }




/* --- квиз: из первого сайта --- */
#quiz .head{display:flex;align-items:center;min-height:68px;gap:6px 10px;
  flex-wrap:wrap;background:var(--navy-deep);padding:0 20px;
  position:sticky;top:0;z-index:8;
  box-shadow:0 1px 0 rgba(var(--card-rgb),.07)}
#quiz .head .mark{display:flex;align-items:center;gap:10px;color:var(--card);
  text-decoration:none;padding:6px 0;min-width:0}
#quiz .head .mark img{width:34px;height:34px;flex:0 0 34px}
#quiz .head .mark span{display:block;line-height:1.2}
#quiz .head .mark b{display:block;font:700 0.6875rem/1.2 var(--sans);
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
#quiz .head .tel{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  min-height:44px;padding:0 4px 0 8px;border-radius:var(--r);
  color:var(--gold-bright);text-decoration:none;
  font:700 0.875rem/1 var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
#quiz .head .tel svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;
  fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#quiz .head .tel:active{background:rgba(var(--gold-bright-rgb),.16)}
@media (max-width:399px){#quiz .head .mark span{display:none}}
#quiz .wrap{max-width:700px;margin:0 auto;padding:0 20px;width:100%}
#quiz .qlist{background:var(--card);box-shadow:var(--sh2);
  margin:0 -20px;padding:0 20px 14px}
@media (min-width:600px){#quiz .qlist{border-radius:0 0 var(--r2) var(--r2);padding:0 30px 22px}}
#quiz .qbar{position:sticky;top:58px;z-index:6;background:var(--navy-deep);
  padding:14px 20px 12px;margin:0 -20px;
  box-shadow:0 10px 18px -14px rgba(var(--navy-950-rgb),.55)}
#quiz .qbar .track{position:relative;height:8px;border-radius:99px;
  background:rgba(var(--card-rgb),.10);
  box-shadow:inset 0 0 0 1px rgba(var(--blue-soft-rgb),.28);overflow:hidden}
#quiz .qbar .track::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(100%/var(--shagov,6) - 1px),
    rgba(var(--blue-soft-rgb),.34) calc(100%/var(--shagov,6) - 1px) calc(100%/var(--shagov,6)));
  pointer-events:none}
#quiz .qbar .fill{height:100%;width:100%;border-radius:99px;position:relative;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .38s cubic-bezier(.25,.8,.3,1)}
#quiz .qbar .note{display:flex;justify-content:space-between;gap:10px;
  margin-top:10px;font:700 0.9375rem/1.2 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--card)}
#quiz .qbar .note #left{font-weight:400;text-transform:none;letter-spacing:0;
  font-family:var(--sans);color:var(--blue-soft)}
@media (min-width:600px){#quiz .qbar{border-radius:var(--r2) var(--r2) 0 0}}
#quiz .step{display:none;padding:24px 0 26px}
#quiz .step.on{display:block}
@keyframes quiz-in-next{from{opacity:0;transform:translateX(26px)}
                   to{opacity:1;transform:none}}
@keyframes quiz-in-back{from{opacity:0;transform:translateX(-26px)}
                   to{opacity:1;transform:none}}
#quiz .step.on.next{animation:quiz-in-next .34s var(--ease) backwards}
#quiz .step.on.back{animation:quiz-in-back .34s var(--ease) backwards}
@keyframes quiz-step-item{from{opacity:0;transform:translateY(12px)}
                     to{opacity:1;transform:none}}
#quiz .step.on .q,#quiz .step.on .hint,#quiz .step.on .slide,#quiz .step.on label,#quiz .step.on input[type=text],#quiz .step.on input[type=tel],#quiz .step.on .chan,#quiz .step.on .agree,#quiz .step.on .btn-wide,#quiz .step.on .opts > .opt{
  animation:quiz-step-item .36s var(--ease) backwards}
#quiz .step.on .q{animation-delay:.04s}
#quiz .step.on .hint{animation-delay:.09s}
#quiz .step.on .hint ~ .hint{animation-delay:.13s}
#quiz .step.on .slide,#quiz .step.on .opts > .opt:nth-child(1){animation-delay:.15s}
#quiz .step.on .opts > .opt:nth-child(2){animation-delay:.195s}
#quiz .step.on .opts > .opt:nth-child(3){animation-delay:.24s}
#quiz .step.on .opts > .opt:nth-child(4){animation-delay:.285s}
#quiz .step.on .opts > .opt:nth-child(5){animation-delay:.33s}
#quiz .step.on .btn-wide{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){#quiz .step.on.next,#quiz .step.on.back{animation:none}
#quiz .step.on .q,#quiz .step.on .hint,#quiz .step.on .slide,#quiz .step.on label,#quiz .step.on input[type=text],#quiz .step.on input[type=tel],#quiz .step.on .chan,#quiz .step.on .agree,#quiz .step.on .btn-wide,#quiz .step.on .opts > .opt{
    animation:none;opacity:1;transform:none}
#quiz .qbar .fill{transition:none}
#quiz .done .tick{animation:none}
#quiz .opts.picking > .opt:not(.picked){opacity:1}}
#quiz .q{font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.18;
  font-weight:800;letter-spacing:var(--tr-big);margin:0 0 10px;text-wrap:balance}
#quiz .hint{margin:0 0 22px;color:var(--ink-2);font-size:1rem;line-height:1.5;
  max-width:38em}
#quiz .hint-alt{margin:0 0 24px;padding:13px 15px;font-size:0.9375rem;
  line-height:1.5;background:var(--paper);border-radius:0 var(--r) var(--r) 0;
  border-left:3px solid var(--line);color:var(--ink-2);max-width:none}
#quiz .opts{display:grid;gap:10px}
#quiz .opt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:64px;text-align:left;background:var(--card);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 16px;font:700 1.0625rem/1.35 var(--sans);cursor:pointer;
  box-shadow:0 1px 2px rgba(var(--navy-950-rgb),.05);-webkit-tap-highlight-color:transparent;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),
             transform .16s var(--ease)}
#quiz .opt:active{transform:scale(.985);background:var(--paper-deep);border-color:var(--blue-line);
  box-shadow:inset 0 2px 7px rgba(var(--ink-rgb),.16);
  
  transition-duration:.07s}
#quiz .opt:active .go{background:var(--blue-line);border-color:var(--blue-line);
  color:var(--card)}
#quiz .opt:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
#quiz .opt .go{flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--gold-ink);font-size:1.0625rem;line-height:1;
  transition:transform .22s var(--ease),background .18s,border-color .18s,
             color .18s}
#quiz .opt.picked{border-color:var(--gold);background:var(--gold-wash);
  box-shadow:0 0 0 3px rgba(var(--navy-950-rgb),.3),0 6px 18px -10px rgba(var(--navy-950-rgb),.8);
  transform:none}
#quiz .opt.picked .go{background:var(--gold);border-color:var(--gold);
  color:var(--navy-deep);transform:translateX(5px) scale(1.06)}
#quiz .opts.picking > .opt:not(.picked){opacity:.4;
  transition:opacity .2s var(--ease)}
#quiz .opts > .opt{transition:border-color .16s var(--ease),
  box-shadow .16s var(--ease),transform .16s var(--ease),
  background .18s var(--ease),opacity .2s var(--ease)}
@media (hover:hover) and (pointer:fine){#quiz .opt:hover{border-color:var(--blue-line);box-shadow:var(--sh1)}
#quiz .opt:hover .go{transform:translateX(3px);border-color:var(--gold)}}
#quiz .slide{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);padding:22px 20px;box-shadow:var(--sh1)}
#quiz .val{font:800 clamp(2.25rem,1.8rem + 2vw,3rem)/1 var(--mono);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
#quiz .val small{font-size:1rem;font-weight:400;color:var(--ink-2);
  font-family:var(--sans);margin-left:8px;letter-spacing:0}
#quiz input[type=range]{width:100%;margin:20px 0 8px;accent-color:var(--gold);
  height:30px}
#quiz .ends{display:flex;justify-content:space-between;
  font:700 0.8125rem/1 var(--mono);color:var(--ink-2)}
#quiz .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--r);padding:16px 22px;min-height:60px;
  cursor:pointer;font:800 1.0625rem/1.15 var(--sans);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s var(--ease),transform .15s var(--ease),
             box-shadow .16s var(--ease)}
#quiz .btn-gold{background:var(--gold);color:var(--navy-deep);
  box-shadow:0 10px 30px -18px rgba(var(--navy-950-rgb),.75)}
#quiz .btn-gold:active{background:var(--gold-press);transform:translateY(1px) scale(.995)}
#quiz .btn-wide{width:100%;margin-top:18px}
@media (hover:hover) and (pointer:fine){#quiz .btn-gold:hover{background:var(--gold-bright);
    box-shadow:0 14px 30px -14px rgba(var(--navy-950-rgb),1)}}
#quiz .back{background:none;border:0;color:var(--ink-2);cursor:pointer;
  font:400 0.9375rem/1 var(--sans);padding:14px 2px;margin:2px 0 34px;
  text-decoration:underline;-webkit-tap-highlight-color:transparent}
#quiz .back:active{color:var(--ink)}
#quiz input[type=text],#quiz input[type=tel]{width:100%;min-height:60px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r2);background:var(--card);
  font:400 1.0625rem/1.3 var(--sans);color:var(--ink);
  box-shadow:0 1px 2px rgba(var(--navy-950-rgb),.05)}
#quiz input[type=tel]{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:.02em}
#quiz input:focus{outline:3px solid var(--gold-bright);outline-offset:2px;
  border-color:var(--gold)}
#quiz .chan{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
#quiz .chan .opt{justify-content:center;padding:14px 10px;font-size:1rem;
  min-height:56px}
#quiz .chan .opt.on{border-color:var(--gold);background:var(--gold-wash);
  box-shadow:0 0 0 3px rgba(var(--navy-950-rgb),.22);
  animation:quiz-chan-pick .3s cubic-bezier(.2,1.3,.4,1) both}
@keyframes quiz-chan-pick{0%{transform:scale(.95)}60%{transform:scale(1.02)}
                     100%{transform:none}}
#quiz .agree{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;
  padding:8px 0;font-size:0.9375rem;color:var(--ink-2);line-height:1.5;
  cursor:pointer}
#quiz .agree input{margin-top:2px;width:24px;height:24px;accent-color:var(--gold);
  flex:none}
#quiz .agree a{color:var(--link)}
#quiz .err{color:var(--err);font-size:0.9375rem;font-weight:600;margin:8px 0 0;
  display:none}
#quiz .err.on{display:block}
#quiz .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#quiz .done{text-align:center;padding:48px 0 40px}
#quiz .done .tick{width:76px;height:76px;border-radius:50%;
  border:2px solid var(--gold);background:var(--gold-wash);color:var(--gold-ink);
  display:grid;place-items:center;margin:0 auto 22px;
  animation:quiz-pop .42s cubic-bezier(.16,1,.3,1) both}
#quiz .done .tick svg{width:34px;height:34px;stroke:currentColor;fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes quiz-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
#quiz .done h2{font-size:clamp(1.5rem,1.3rem + 1vw,1.875rem);line-height:1.18;
  font-weight:800;letter-spacing:var(--tr-big);margin:0 0 12px}
#quiz .done p{color:var(--ink-2);margin:0 0 8px}
#quiz .tel-big{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  min-height:60px;padding:0 24px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
  font:800 1.25rem/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--navy);text-decoration:none}
#quiz .tel-big svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#quiz footer p{max-width:660px;margin:0 auto 12px}
#quiz footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.15))}
#quiz footer a{color:var(--card)}
#quiz footer .fname{color:var(--card);font-weight:800;font-size:1rem;margin-bottom:8px}
#quiz footer .disc{color:var(--blue-ink);margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(var(--blue-soft-rgb),.16)}


/* --- поправки под вёрстку второго сайта ------------------------------

   Полоса прогресса на первом сайте выходит за края отрицательными
   полями (margin: 0 -20px), чтобы лечь во всю ширину экрана. Там её
   удерживает обёртка главной. Здесь обёртка своя, и полоса вылезала
   за край: документ становился 410 пикселей при экране 390, и страница
   ездила вбок. Поймано обходом на 390, в коде не видно.

   Убираем вылет и возвращаем отступы содержимому. */
/* Поля не обнуляем, а выравниваем: обнулённые padding-left/right
   оставляли содержимое вплотную к подложке — cramped-padding. */
#quiz .qbar{margin-left:0;margin-right:0;padding:14px 16px 11px;
  border-radius:var(--r)}

/* Цели в палец. Обход 27.08 нашёл на первом сайте ссылки высотой
   17–19 пикселей в подвале — нажать такую с телефона можно только
   со второй попытки. Здесь этого не повторяем. */
#quiz .chan .opt{min-height:52px}
#quiz .agree{display:flex;align-items:flex-start;gap:10px;min-height:44px}
#quiz .agree input{width:24px;height:24px;flex:0 0 24px;margin-top:2px}

/* Ссылка в развилке между сайтами. 375x41 — почти норма, и это то же
   «почти», из-за которого на первом сайте промахивались по «Какие
   документы нужны». */
#quiz .hint-alt a{display:inline-flex;align-items:center;min-height:44px}