/* Собран scripts/chrome.py из rebuild/style.css — руками не править.
   Здесь только шапка, подвал и попапы: файл подключается к страницам
   выгрузки Тильды, где общий style.css сломал бы вёрстку целиком
   (у Тильды `* { box-sizing: content-box }`). Правьте style.css
   и rebuild/parts/chrome-extra.css, этот файл пересоберётся. */

.hdr, .ft, .fb {
  --bg: #1e1e1e;
  --blue: #0088ff;
  --card: #2d2d2d;
  --container: 1221px;
  --ink: #0a0f17;
  --lime: #c1f742;
  --muted: #c4c6cf;
  --м: calc(100vw / 360);
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('/fonts/PPNeueMachina-Light_.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'PPNeueMachina';
  src: url('/fonts/PPNeueMachina-Regula.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PPNeueMachina';
  src: url('/fonts/PPNeueMachina-Ultrab.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'PitagonSansMono';
  src: url('/fonts/PitagonSansMono-Medi.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'RobotoFlex';
  src: url('/fonts/RobotoFlex_slnt_wdth.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
.wrap {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin: 0 auto;
  position: relative;
}
/* ── Шапка ───────────────────────────────────────────────────────────
   В оригинале она абсолютным слоем лежит поверх первого экрана
   (высота блока — 1 px), поэтому фон героя начинается под ней. */
.hdr {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-top: 32px;
  /* Цвет свой, а не от body. Раньше шапка его наследовала, и это работало
     ровно до тех пор, пока у всех страниц был один body. Теперь шапка стоит
     и на интенсив-практикуме (body там красит текст в #080808), и на
     страницах выгрузки Тильды, где нашего body нет вовсе: в первом случае
     меню стало чёрным по тёмно-серому, во втором осталось бы чёрным по
     чёрному. Замер 15.09.2026: rgb(8,8,8) на #1e1e1e. */
  color: #fff;
}
.hdr .wrap { display: flex; align-items: center; gap: 24px; }
.hdr__logo { width: 185px; height: 40px; object-fit: contain; }
/* Шапка плитой, а не слоем. Слоем она лежит там, где под ней НАШ первый
   экран, нарисованный с запасом сверху. Там, где под ней чужая вёрстка
   (страницы выгрузки Тильды — /policy, /oferta, /articles, /materials)
   или свой лендинг со своей сеткой (интенсив-практикум), слой съел бы
   первые 107 px содержимого. Такая шапка встаёт в поток и несёт свой фон:
   у половины этих страниц он белый, а шапка набрана белым — на боевой
   /installmentplan ровно поэтому и не видно.

   Правило общее и живёт здесь, а не в chrome-extra.css: отсюда его
   забирает и style.css перевёрстанных страниц, и chrome.css тильдиных
   (scripts/chrome.py вырезает всё, что начинается с .hdr). */
.hdr--plita {
  position: relative;
  inset: auto;
  background: var(--bg);
  padding-bottom: 32px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 39px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
}
.nav__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
}
.nav__burger { display: block; width: 16px; height: 12px; position: relative; }
.nav__burger::before, .nav__burger::after, .nav__burger span {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.nav__burger::before { top: 0; }
.nav__burger span { top: 5px; }
.nav__burger::after { top: 10px; }
/* Выпадающие списки. В оригинале это те же зеро-элементы, только уведённые
   за экран; панель со скруглением 10, «Все курсы» на белом, остальные на
   #2d2d2d. Открываются по наведению и по фокусу с клавиатуры — фокус важен,
   иначе с клавиатуры до пунктов не добраться вовсе. */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__drop {
  position: absolute;
  top: 100%;
  left: -13px;
  z-index: 5;
  display: none;
  flex-direction: column;
  min-width: 304px;
  gap: 7px;
  margin-top: 12px;
  padding: 13px;
  border-radius: 10px;
  background: var(--card);
}
.nav__drop--light { background: #fff; }
.nav__drop a {
  display: flex;
  align-items: center;
  height: 47px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  white-space: nowrap;
}
.nav__drop--light a { color: var(--ink); }
/* Цвета наведения сняты с боевой: тёмная панель даёт #373737, светлая
   #f5f5f8. Полупрозрачная подсветка была догадкой и давала другой оттенок. */
.nav__drop a:hover { background: #373737; }
.nav__drop--light a:hover { background: #f5f5f8; }
/* Мост через зазор между кнопкой и списком. Зазор в 12 px — из оригинала,
   он нужен по виду, но по нему же курсор шёл от «Все курсы» к пунктам и
   успевал выйти из зоны наведения: список закрывался раньше, чем до него
   доводили мышь. Прозрачная полоса той же ширины держит наведение. */
.nav__drop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { display: flex; }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
/* Вторая подпись кнопки — только для открытого меню телефона. */
.hdr__fb-меню { display: none; }
.hdr__login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
}
/* Это <button>, а не ссылка: она открывает форму, а не ведёт по адресу.
   Отсюда сброс кнопочных умолчаний — выглядеть должна как прежняя ссылка. */
.hdr__fb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime);
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  cursor: pointer;
}
@media (max-width: 900px) {
.hdr__login { display: none; }
.hdr { padding-top: 20px; }
}
/* Бургер — только на узких экранах; на десктопе меню развёрнуто.
   Вид снят с оригинала курсовых: без рамки, три линии по правому краю,
   нижняя короче. */
.hdr__menu {
  display: none;
  margin-left: auto;
  order: 3;
  width: 44px;
  height: 40px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.hdr__menu span { width: 28px; height: 2px; background: #fff; border-radius: 2px; }
.hdr__menu span:last-child { width: 18px; }
/* Строки панели бургер-меню на десктопе не существуют. */
.nav__top, .nav__call { display: none; }
@media (max-width: 1399.98px) {
.nav { display: none; }
.hdr__menu { display: flex; }
.hdr__right { display: none; }
}
@media (max-width: 479.98px) {
.hdr.is-open .hdr__right { display: flex; }
}
@media (min-width: 480px) and (max-width: 1399.98px) {
.hdr.is-open .nav {
    display: block;
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 40;
    margin: 0;
    padding: 20px 22px 26px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  }
.hdr.is-open .nav__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
  }
.nav__login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    font-family: 'PPNeueMachina', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    color: #fff;
  }
.nav__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
  }
.hdr.is-open .nav > a, .hdr.is-open .nav__item > a {
    display: block;
    margin: 0;
    padding: 12px 0 4px;
    font-family: 'PPNeueMachina', sans-serif;
    font-weight: 300;
    font-size: 19px;
    line-height: 26px;
    color: #fff;
  }
.hdr.is-open .nav__all { border: 0; padding: 12px 0 4px; gap: 0; border-radius: 0; }
.hdr.is-open .nav__all .nav__burger { display: none; }
.hdr.is-open .nav__item { display: block; position: static; }
.hdr.is-open .nav__drop, .hdr.is-open .nav__item:hover .nav__drop {
    display: block;
    position: static;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 0;
    background: none;
    border-radius: 0;
  }
.hdr.is-open .nav__drop a {
    display: block;
    height: auto;
    min-height: 0;
    padding: 5px 0;
    font-size: 15px;
    line-height: 20px;
    white-space: normal;
    color: #a5a5a5;
  }
.hdr.is-open .nav__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'RobotoFlex', system-ui, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--lime);
    cursor: pointer;
  }
}
@media (min-width: 700px) and (max-width: 1399.98px) {
.hdr.is-open .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    left: auto;
    width: min(704px, calc(100% - 28px));
    align-items: start;
  }
.hdr.is-open .nav > .nav__top { grid-column: 1 / -1; grid-row: 1; }
.hdr.is-open .nav > .nav__item:nth-child(2) { grid-column: 1; grid-row: 2; }
.hdr.is-open .nav > .nav__item:nth-child(3) { grid-column: 2; grid-row: 2 / span 4; }
.hdr.is-open .nav > a[href="#about"] { grid-column: 1; grid-row: 3; }
.hdr.is-open .nav > a[href="#reviews"] { grid-column: 1; grid-row: 4; }
.hdr.is-open .nav > .nav__item:nth-child(6) { grid-column: 1; grid-row: 5; }
.hdr.is-open .nav > .nav__call { grid-column: 1 / -1; grid-row: 6; justify-self: start; }
}
/* Все кнопки оригинала набраны Pitagon Sans Mono Medium (см. @font-face
   выше) с letter-spacing -1 и интерлиньяжем 1.55 — проверено по всем
   восьми: «{ Подробнее }», «{ Получить бесплатно }», «{ Подписаться на
   канал }» и остальным. Больше эта гарнитура нигде на странице не
   встречается: только кнопки.

   Здесь до этого стоял RobotoFlex 300 из body. Сверка это исправно
   показывала («шрифт: ppneuemachina → robotoflex» на всех кнопках) —
   просто до правок дошли не все её строки. Отчёт надо дочитывать до
   конца, а не до первого знакомого пункта.

   И то же самое повторилось: правило починили здесь, а кнопки страницы курса
   (`.wl-plan__btn`, `.wl-mini__btn`, `.wl-ask__btn`, `.wl-ok__btn`) остались
   на Machina — их заметил владелец. Сверка шрифтов у Тильды по имени
   бесполезна: в её CSS у кнопок стоит PPNeueMachina, а рисуется моноширинный
   Pitagon. Проверять надо шириной строки:

   | строка | оригинал | Pitagon | Machina |
   |---|---|---|---|
   | { Оплатить со скидкой 5% } | 288 | 286 | 265 |
   | { Записаться на бесплатную консультацию } | 454 | 451 | 410 | */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 71px;
  padding: 12px 24px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -1px;
  text-align: center;
}
.btn--sm { min-height: 61px; font-size: 14px; }
/* «Курс в разработке» — не кнопка вовсе: в оригинале это белая надпись без
   заливки. Кликать там нечего. */
.btn--ghost {
  background: none;
  color: #fff;
  cursor: default;
}
@media (max-width: 900px) {
.btn { min-height: 56px; font-size: 16px; margin-top: 20px; }
.btn--sm { min-height: 50px; }
}
.btn--yt { background: #f92626; }
.btn--tg { background: #fff; color: var(--ink); }
/* ── Обратная связь ──────────────────────────────────────────────────
   Единственная рабочая форма главной. Своя, без скриптов Тильды: их форма
   тянет за собой tilda-forms (55 КБ) ради валидации двух полей. */
.fb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; color: #fff; }
.fb[hidden] { display: none; }
.fb__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.fb__win {
  position: relative;
  width: 480px;
  max-width: 100%;
  padding: 40px;
  border-radius: 20px;
  background: var(--card);
}
.fb__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  /* Кнопки не наследуют шрифт: без этой строки крестик рисовался системным
     Arial и выбивался из набора. */
  font-family: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.fb__x:hover { color: #fff; }
.fb__h { margin: 0; font-family: 'PPNeueMachina', sans-serif; font-size: 30px; font-weight: 400; line-height: 36px; letter-spacing: -1px; }
.fb__d { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 24px; }
.fb__form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.fb__field { display: flex; flex-direction: column; gap: 6px; }
.fb__label { color: var(--muted); font-size: 14px; line-height: 20px; }
.fb__field input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: var(--bg);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
}
.fb__field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.fb__check { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; line-height: 20px; }
.fb__check input { margin: 2px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--blue); }
.fb__check a { color: var(--muted); text-decoration: underline; }
/* Ошибку видно сразу: цвет плюс текст, а не только цвет — на цвет нельзя
   опираться как на единственный признак. */
.fb__err { margin: 0; color: #ff8a80; font-size: 15px; line-height: 21px; }
.fb__submit { margin-top: 4px; }
.fb__ok { margin: 24px 0 0; font-size: 17px; line-height: 25px; }
@media (max-width: 900px) {
.fb__win { padding: 28px 20px 24px; }
.fb__h { font-size: 24px; line-height: 30px; }
}
/* ── Подвал ──────────────────────────────────────────────────────── *//* Подвал сверен с оригиналом поимённо. Колонки там не равные и не по сетке:
   от левого края контейнера они начинаются на 0, 360, 752 и 974 — отсюда
   жёсткие ширины вместо долей. Шаг между ссылками 13, между заголовком и
   первой ссылкой 18, плита 375 высотой. */
.ft { background: var(--bg); padding: 0 0 21px; color: var(--muted); }
.ft__plate { margin: 0 33px; padding: 46px 0 30px; border-radius: 20px; background: #2d2d2d; }
.ft__cols { display: grid; grid-template-columns: 360px 392px 222px 247px; }
@media (max-width: 1260px) {
.ft__cols { grid-template-columns: 1.5fr 1.6fr 0.9fr 1fr; gap: 20px; }
}
.ft__col { display: flex; flex-direction: column; gap: 13px; font-size: 16px; font-weight: 300; line-height: 19px; }
.ft__col h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
  font-family: 'PPNeueMachina', sans-serif;
  letter-spacing: -.5px;
}
/* У «Полезных материалов» интерлиньяж в оригинале 18, а у соседних
   колонок 19. Разнобой их, но без него длинные пункты копят лишние
   пиксели и подвал вырастает. */
.ft__col--mat a, .ft__col--brand a, .ft__col--brand p { line-height: 18px; }
/* Ссылки в «Полезных материалах» не тянутся во всю колонку: в оригинале
   самая широкая 349, а колонка до соседней — 392. Разница и есть тот
   воздух перед «Все курсы», который иначе съедается текстом. */
.ft__col--mat a { max-width: 351px; }
.ft__col a:hover { color: #fff; }
.ft__col p { margin: 0; }
/* Между логотипом и почтой в оригинале 55, а не шаг колонки. Блочный,
   иначе строчная картинка добавляет снизу зазор под базовую линию и вся
   колонка съезжает на 4 px. *//* Габарит логотипа задан числом, а не пропорцией файла: в оригинале бокс
   247×49, и картинка в нём слегка обрезана сверху и снизу. По пропорции
   наш файл дал бы 53.8 — и вся колонка уехала бы на 5 px вниз. */
.ft__col--brand img { display: block; width: 247px; height: 49px; object-fit: cover; margin-bottom: 42px; }
/* У строки с лицензией интерлиньяж свой, 21. */
.ft__col--brand p:last-child { line-height: 21px; }
.ft__bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 300;
  line-height: 20px;
  margin-top: 17px;
  font-size: 15px;
  color: #fff;
}
.ft__bottom img { width: 107px; height: auto; }
@media (max-width: 900px) {
.ft { padding: 0 0 16px; }
.ft__plate { margin: 0 16px; padding: 28px 20px; }
.ft__cols { grid-template-columns: 1fr; gap: 28px; }
.ft__col--brand img { width: 200px; }
.ft__bottom { margin-top: 28px; }
}
/* ── Анимации ─────────────────────────────────────────────────────────
   В оригинале их две и обе скромные: 15 блоков проявляются при попадании
   в кадр и 8 элементов меняют прозрачность на наведении. Разобрано по
   data-animate-sbs-opts: mx/my = 0, sx/sy = 1 — то есть ни сдвига, ни
   масштаба, только op 0 → 1.

   Исключение — два кружка «плей» на роликах: у них sx/sy = 1.06 при
   ti = 200, то есть они всё-таки подрастают на 6 % за 0.2 с. Раньше я
   написал, что масштаба нет нигде; это верно для остальных, но не для
   них. */
.btn, .hdr__login, .nav__all, .hdr__fb, .ft__col a {
  transition: opacity .1s ease, background-color .1s ease, color .1s ease;
}
.btn:hover { opacity: .85; }
.btn--ghost:hover { opacity: 1; }
/* ── Наведение в шапке ────────────────────────────────────────────────
   Снято наведением живого курсора на боевую. Общего правила нет и здесь:
   «Все курсы» белеет, «Войти» становится лаймовой, простые пункты меню
   получают тёмную плашку #2d2d2d, а «Обратная связь» не реагирует вовсе.
   Прежнее «притушить до 0.85» не совпадало ни с одним из них.

   Плашка растёт полями, а поля гасятся отрицательным отступом — иначе
   пункт становится выше, растёт .nav__item, и выпадающий список уезжает
   на 12 px вниз. */
.nav > a:not(.nav__all), .nav__item > a:not(.nav__all) {
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 5px;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.hdr__login svg { stroke: currentColor; }
@media (hover: hover) {
.nav > a:not(.nav__all):hover, .nav__item > a:not(.nav__all):hover { background: #2d2d2d; }
.nav__all:hover { background: #fff; color: var(--ink); }
.nav__all:hover .nav__burger::before, .nav__all:hover .nav__burger::after, .nav__all:hover .nav__burger span { background: var(--ink); }
.hdr__login:hover { background: var(--lime); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}
.btn--lime { background: var(--lime); color: var(--ink); border: 0; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid #4b4b4b; }
@media (max-width: 1199.98px) and (min-width: 901px) {
.ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.ft__col--mat a { max-width: none; }
}
/* Вторая кнопка в оригинале не прозрачная, а залита цветом фона и обведена
   серым — то есть отличается от .btn--ghost больших курсов. */
.btn--dark { background: var(--bg); color: #fff; border: 1px solid #4b4b4b; }
@media (max-width: 479px) {
.hdr.is-open .nav, .hdr.is-open .hdr__login, .hdr.is-open .hdr__fb, .hdr.is-open .hdr__menu {
    --м: min(calc(100vw / 360), calc(100dvh / 645));
  }
.hdr.is-open .nav {
    position: fixed;
    left: calc(15 * var(--м));
    top: calc(26 * var(--м));
    width: calc(330 * var(--м));
    height: auto;
    max-height: calc(100dvh - 40px);
    margin: 0;
    padding: 0;
    border-radius: calc(10 * var(--м));
    background: #373737;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
.hdr.is-open .nav::after {
    content: '';
    display: block;
    height: calc(610 * var(--м));
  }
.hdr.is-open .nav__item { position: static; }
.hdr.is-open .nav a, .hdr.is-open .nav__drop a {
    position: absolute;
    left: calc(20 * var(--м));
    min-height: 0;
    /* ⚠️ Поля гасятся вместе с ОТСТУПАМИ. Десктопная плашка наведения
       (style.css:1367-1372) растёт полями 6/10 и гасит их отрицательным
       отступом -6/-10. В панели телефона поля обнулялись, а отступы нет —
       и «Полезные материалы», «О школе», «Отзывы», «Статьи» стояли на
       10 px левее своих пунктов и на 6 px выше своего места. Колонка
       получалась рваной, и заголовок переставал читаться как заголовок
       своего списка. «Все курсы» этого не показывал: он .nav__all, а
       правило плашки его исключает. */
    padding: 0;
    margin: 0;
    /* Высота 47 досталась от строки десктопного меню. Шаг пунктов в
       панели 28, поэтому коробки налезали друг на друга на 19 px: нижняя
       часть пункта отдавала нажатие соседу. У Тильды высота по тексту. */
    height: auto;
    color: #fff;
    font-family: 'PPNeueMachina', sans-serif;
    white-space: normal;
  }
.hdr.is-open .nav > a, .hdr.is-open .nav__item > a { font-size: calc(16 * var(--м)); line-height: calc(14 * var(--м)); }
.hdr.is-open .nav__drop { display: contents; }
.hdr.is-open .nav__drop a { font-size: calc(12 * var(--м)); line-height: calc(18.6 * var(--м)); font-weight: 300; }
.hdr.is-open .nav__all { top: calc(76 * var(--м)); border: 0; }
.hdr.is-open .nav__all .nav__burger { display: none; }
.hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(1) { top: calc(101 * var(--м)); }
.hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(2) { top: calc(127 * var(--м)); }
.hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(3) { top: calc(153 * var(--м)); }
.hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(4) { top: calc(179 * var(--м)); }
.hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(5) { top: calc(205 * var(--м)); }
.hdr.is-open .nav__item:nth-child(3) > a { top: calc(244 * var(--м)); }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a { white-space: nowrap; }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a:nth-child(1) { top: calc(269 * var(--м)); }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a:nth-child(2) { top: calc(383 * var(--м)); width: calc(244 * var(--м)); line-height: calc(13.2 * var(--м)); white-space: normal; }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a:nth-child(3) { top: calc(355 * var(--м)); line-height: calc(13.2 * var(--м)); }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a:nth-child(4) { top: calc(333 * var(--м)); line-height: calc(13.2 * var(--м)); }
.hdr.is-open .nav__item:nth-child(3) .nav__drop a:nth-child(5) { top: calc(298 * var(--м)); width: calc(217 * var(--м)); line-height: calc(13.2 * var(--м)); white-space: normal; }
.hdr.is-open .nav > a:nth-of-type(1) { top: calc(428 * var(--м)); }
.hdr.is-open .nav > a:nth-of-type(2) { top: calc(461 * var(--м)); }
.hdr.is-open .nav__item:nth-child(6) > a { top: calc(494 * var(--м)); }
.hdr.is-open .nav__item:nth-child(6) .nav__drop a { top: calc(519 * var(--м)); width: calc(244 * var(--м)); line-height: calc(13.2 * var(--м)); }
.hdr.is-open .hdr__menu { align-items: center; margin-top: 0; }
.hdr.is-open .hdr__menu span { width: calc(26 * var(--м)); }
.hdr.is-open .hdr__menu span:nth-child(1) { transform: translateY(calc(11 * var(--м))) rotate(45deg); }
.hdr.is-open .hdr__menu span:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__menu span:nth-child(3) { transform: translateY(calc(-11 * var(--м))) rotate(-45deg); }
.hdr.is-open .hdr__right { position: static; }
.hdr.is-open .hdr__login {
    /* В узкой шапке кнопка спрятана — внутри открытой панели она нужна. */
    display: inline-flex;
    position: fixed;
    left: calc(35 * var(--м));
    top: calc(46 * var(--м));
    z-index: 31;
    height: calc(36 * var(--м));
    /* Поля подобраны так, чтобы кнопка вышла 116 — как в оригинале. */
    padding: 0 calc(23 * var(--м));
    font-size: calc(14 * var(--м));
  }
.hdr.is-open .hdr__fb {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--м));
    position: fixed;
    left: calc(35 * var(--м));
    top: calc(591 * var(--м));
    z-index: 31;
    font-size: calc(14 * var(--м));
  }
.hdr.is-open .hdr__fb img { width: calc(24 * var(--м)); height: calc(24 * var(--м)); }
.hdr.is-open .hdr__fb .hdr__fb-шапка { display: none; }
.hdr.is-open .hdr__fb .hdr__fb-меню {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    /* ⚠️ Кегль обязателен: ниже 900 у кнопки стоит font-size: 0 — так в
       узкой шапке от неё остаётся один значок. В открытом меню подпись
       нужна, и без этой строки она была невидимой при живом тексте в
       разметке: коробка выходила нулевой ширины. */
    font-size: calc(14 * var(--м));
    line-height: calc(20 * var(--м));
  }
.hdr.is-open .hdr__logo { visibility: hidden; }
.hdr.is-open .hdr__menu {
    position: fixed;
    left: calc(289.5 * var(--м));
    top: calc(46 * var(--м));
    z-index: 31;
    width: calc(36 * var(--м));
    height: calc(36 * var(--м));
    background: #1e1e1e;
    border-radius: calc(5 * var(--м));
  }
.hdr__fb { display: none; }
.hdr__logo { width: calc(136.3 * var(--м)); height: calc(29.8 * var(--м)); }
.hdr .wrap {
    width: calc(360 * var(--м));
    max-width: none;
    margin: 0;
    padding: 0 calc(10.6 * var(--м)) 0 calc(16.3 * var(--м));
  }
.hdr__menu {
    width: calc(42.2 * var(--м));
    height: calc(42.2 * var(--м));
    align-items: flex-end;
    gap: calc(8 * var(--м));
    padding: 0;
    /* Правое поле у бургера своё: у Тильды он отстоит от края на 16,5,
       а не на 10,6, как логотип слева. */
    margin-right: calc(6 * var(--м));
    /* Полосы у Тильды чуть ниже центра кнопки — замерено по пикселям. */
    margin-top: calc(2.7 * var(--м));
    border: 0;
  }
.hdr__menu span {
    width: calc(31 * var(--м));
    height: calc(3 * var(--м));
    /* Концы у полос скруглённые — это видно при увеличении. */
    border-radius: calc(1.5 * var(--м));
  }
.hdr__menu span:nth-child(2) { width: calc(21 * var(--м)); }
.hdr__menu span:last-child { width: calc(31 * var(--м)); }
.ft { padding: 0 0 calc(25 * var(--м)); }
.ft__plate {
    margin: 0 calc(16 * var(--м));
    padding: calc(25 * var(--м)) calc(20 * var(--м)) calc(29 * var(--м));
    border-radius: calc(20 * var(--м));
  }
.ft .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
.ft__cols { display: flex; flex-direction: column; gap: calc(30 * var(--м)); }
.ft__col--brand { order: 1; }
.ft__col--mat { order: 3; }
.ft__col:not(.ft__col--brand):not(.ft__col--mat) { order: 2; }
.ft__col:not(.ft__col--brand):not(.ft__col--mat) ~ .ft__col { order: 4; }
.ft__col {
    gap: calc(12 * var(--м));
    font-size: calc(12 * var(--м));
    line-height: calc(15 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
.ft__col h3 {
    margin-bottom: calc(2 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(15 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
.ft__col--mat a, .ft__col--brand a, .ft__col--brand p { line-height: calc(15 * var(--м)); }
.ft__col--mat a { max-width: calc(244 * var(--м)); }
.ft__col--brand p:last-child { line-height: calc(17 * var(--м)); }
.ft__col--brand img { width: calc(169 * var(--м)); height: calc(36.7 * var(--м)); margin-bottom: calc(11.3 * var(--м)); }
.ft__bottom { margin-top: calc(38 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
.ft__bottom img { width: calc(80 * var(--м)); }
}

/* Поправки обвеса: то, что на наших страницах приходит от body и глобальных
   правил style.css, а на тильдиной странице приходить неоткуда.
   Этот файл ПИШЕТСЯ РУКАМИ и дописывается в конец собранного /chrome.css. */

/* ── Модель коробки ───────────────────────────────────────────────────────
   Главное место файла. Наша вёрстка считает размеры по border-box, и в
   style.css это сказано один раз на весь документ: `* { box-sizing:
   border-box }`. Тильдина сетка живёт наоборот — tilda-grid-3.0.min.css
   ставит `*, *:before, *:after { box-sizing: content-box }` на всё.
   Утащить сюда звёздочку значит переломать тильдину страницу целиком,
   поэтому border-box раздаётся только внутрь обвеса. Специфичность
   `.hdr *` (0,1,0) выше звёздочки (0,0,0), порядок подключения роли не
   играет. */
.hdr, .hdr *, .hdr *::before, .hdr *::after,
.ft, .ft *, .ft *::before, .ft *::after,
.fb, .fb *, .fb *::before, .fb *::after { box-sizing: border-box; }

/* ── Наследство body ──────────────────────────────────────────────────────
   Шрифт и сглаживание у нас заданы на body. Тильдин body трогать нельзя —
   под ним вся страница, — поэтому то же самое ставится на корни обвеса
   и наследуется вниз.

   ⚠️ ЦВЕТА ТУТ НЕТ, и это важно. Сначала он здесь был: `.hdr, .ft, .fb
   { color: #fff }`. Этот файл дописывается в КОНЕЦ chrome.css, и правило
   с той же специфичностью перебило `.ft { color: var(--muted) }` — весь
   текст подвала на тильдиных страницах стал белым вместо приглушённого,
   и по одной странице это не видно, надо сравнивать с эталонной. Цвет
   теперь у каждого корня свой и живёт в style.css. */
.hdr, .ft, .fb {
  font-family: 'RobotoFlex', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* `img { display: block }` и `a { text-decoration: none; color: inherit }`
   из style.css — тоже глобальные. Внутри обвеса без них логотип получает
   строчный отступ снизу, а все ссылки — синее подчёркивание браузера. */
.hdr img, .ft img, .fb img { display: block; max-width: 100%; }
.hdr a, .ft a, .fb a { text-decoration: none; color: inherit; }
.ft__col--brand a:hover, .ft__col a:hover { color: #fff; }

/* Тильдины блоки уезжают под попап: у неё z-index доходит до 9999
   (t-popup, фиксированная шапка). Наш попап должен лежать выше. */
.fb { z-index: 100000; }

/* Шапки плитой (.hdr--plita) здесь нет намеренно: правило живёт в
   rebuild/style.css рядом с самой шапкой, и chrome.py забирает его оттуда
   вместе с остальными .hdr. Иначе оно разошлось бы с версией для
   интенсив-практикума, где нужна такая же плита. */

/* ── Подвал ───────────────────────────────────────────────────────────────
   Тильдина страница кончается своим последним блоком, часто вплотную.
   Отбивка сверху — чтобы подвал не срастался с текстом. */
.ft { padding-top: 40px; }