/* Перевёрстка главной study.it-ontime.ru — прототип.

   Цель: тот же дизайн, но обычной вёрсткой вместо Zero-блоков Тильды.
   У оригинала каждый элемент — абсолютно позиционированный div с
   координатами из data-атрибутов; отсюда 5 276 узлов DOM, 198 картинок
   и ~10 секунд загрузки на телефоне.

   Размеры и цвета не придуманы, а сняты с боевой страницы через
   getComputedStyle: контейнер 1221 px, карточки 391 с зазором 24,
   кнопки высотой 41 и радиусом 8, заголовок PPNeueMachina 50/50 с
   letter-spacing -1.5. Расхождения проверяются скриншотами. */

/* Шрифты свои, а не с CDN Тильды: у оригинала они грузятся оттуда, то есть
   боевой сайт до сих пор зависит от Тильды в отрисовке — отвалится их CDN,
   поедут шрифты. Лицензия на PP Neue Machina подтверждена владельцем
   04.08.2026, поэтому файлы лежат рядом и в репозитории. */
@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;
}
/* Кнопки набраны НЕ PP Neue Machina. У Тильды в стопке зарегистрирован
   «PPNeueMachina» с font-weight: 500, а по этому весу подставлен совсем
   другой шрифт — Pitagon Sans Mono Medium. Отсюда моноширинный вид
   «{ Подробнее }», который иначе не повторить: при 500 без этого файла
   браузер берёт Regular, и надпись выходит не той гарнитурой.

   Лицензия: права на PP Neue Machina владелец подтвердил 04.08.2026, на
   Pitagon Sans Mono — 05.08.2026. Оба файла раздаём со своего сервера. */
@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;
}

:root {
  --bg: #1e1e1e;
  --card: #2d2d2d;
  --blue: #0088ff;
  --lime: #c1f742;
  --red: #f02522;
  --violet: #6c63ff;
  --ink: #0a0f17;
  --muted: #c4c6cf;
  --container: 1221px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: 'RobotoFlex', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.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;
}
.hdr .wrap { display: flex; align-items: center; gap: 24px; }
.hdr__logo { width: 185px; height: 40px; object-fit: contain; }

.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;
}

/* ── Первый экран ────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: 173px 0 100px;
}
.hero .wrap { z-index: 2; }

/* Свечение за заголовком и три предметных картинки. Позиции — от левого
   края контейнера, ровно как в оригинале (сняты с боевой страницы). */
.hero__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__deco .wrap { height: 100%; }
.hero__deco img { position: absolute; }
.deco--glow { left: 75px; top: 18px; width: 1072px; height: 592px; }
.deco--zabbix { left: -22px; top: 249px; width: 264px; height: 264px; }
.deco--win { left: 940px; top: 69px; width: 280px; height: 280px; }
.deco--linux { left: 863px; top: 392px; width: 300px; height: 296px; }

.hero__title {
  margin: 0 auto;
  /* Ширина не декоративная: на 810 px заголовок ломается на те же четыре
     строки, что в оригинале. Шире — «с нуля до уровня» уезжает на третью. */
  max-width: 810px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: -1.5px;
  text-align: center;
}
.hero__lead {
  margin: 44px auto 0;
  max-width: 664px;
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -.5px;
  text-align: center;
}

.chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 52px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 0 26px;
  border-radius: 8px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.chip--blue { background: var(--blue); color: #fff; }
.chip--white { background: #fff; color: var(--ink); }
.chip--lime { background: var(--lime); color: var(--ink); }
.chip--red { background: var(--red); color: #fff; }
.chip--violet { background: var(--violet); color: #fff; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 102px;
}
.stat {
  background: var(--card);
  border-radius: 20px;
  /* Низ 44, а не 36: в оригинале подпись отстоит от нижнего края карточки
     именно на столько, и с равными отступами она садилась на 8 px ниже. */
  padding: 36px 30px 44px;
  min-height: 226px;
  display: flex;
  flex-direction: column;
}
.stat__n {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1.5px;
}
.stat__n img { width: 43px; height: 41px; }
.stat__t {
  margin-top: auto;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  letter-spacing: -.5px;
}

/* ── Мобильная раскладка ─────────────────────────────────────────── */
@media (max-width: 1260px) {
  .hero__deco { display: none; }
}
/* Мобильная раскладка не повторяет оригинал поэлементно: у Тильды под 360 px
   свои координаты на каждый элемент (заголовок кегль 25 и ширина 333, кнопка
   курса 181×35), здесь обычный перенос в одну колонку. Результат тот же по
   смыслу, но переживает изменение длины текста.

   Раньше в этом комментарии стояло «оригинал на мобильном сломан» — это было
   неверно, мерился спрятанный за экран пункт меню шапки. Мобильная версия
   оригинала работает, проверено владельцем на живом телефоне 04.08.2026. */

@media (max-width: 900px) {
  .hdr__login { display: none; }
  .hdr { padding-top: 20px; }
  .hero { padding: 104px 0 56px; }
  .hero__title {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -.8px;
    max-width: 100%;
  }
  .hero__title br { display: none; }
  .hero__lead { font-size: 17px; line-height: 25px; margin-top: 24px; }
  .chips { margin-top: 28px; gap: 8px; }
  .chip { height: 36px; font-size: 15px; padding: 0 16px; }
  .stats { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .stat { min-height: 0; padding: 24px 22px; }
  .stat__n { font-size: 32px; line-height: 32px; }
  .stat__t { margin-top: 16px; font-size: 16px; line-height: 24px; }
}

/* Бургер — только на узких экранах; на десктопе меню развёрнуто. */
.hdr__menu {
  display: none;
  margin-left: auto;
  order: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.hdr__menu span { width: 16px; height: 2px; background: #fff; border-radius: 2px; }

/* Меню прячется в бургер раньше остальной мобильной раскладки: строка из
   пяти пунктов, «Войти» и «Обратной связи» перестаёт помещаться уже около
   1200, и пункты начинают переноситься в две строки. */
@media (max-width: 1200px) {
  .nav { display: none; }
  .hdr__menu { display: inline-flex; }
  /* Бургер раскрывает то же меню списком: выпадашки по наведению на
     телефоне не работают в принципе, поэтому оба уровня показываем сразу. */
  .hdr.is-open .nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 14px 0 0;
    padding: 8px;
    border-radius: 10px;
    background: var(--card);
  }
  .hdr.is-open .nav > a,
  .hdr.is-open .nav__item > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
  }
  .hdr.is-open .nav__all { border: 0; }
  .hdr.is-open .nav__item { display: block; position: static; }
  .hdr.is-open .nav__drop,
  .hdr.is-open .nav__item:hover .nav__drop {
    display: flex;
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 24px;
    background: none;
  }
  .hdr.is-open .nav__drop a {
    height: auto;
    min-height: 40px;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 20px;
    white-space: normal;
    color: var(--muted);
  }
}
@media (max-width: 900px) {
  .hdr__fb span, .hdr__fb { font-size: 0; }
  .hdr__fb img { width: 26px; height: 26px; }
}

/* Показ бургера — последним правилом: базовый `display:none` объявлен ниже
   медиазапроса выше по файлу и иначе перебивает его. */
@media (max-width: 900px) {
  .hdr__menu { display: inline-flex; }
}

/* ── Секция «О школе» ─────────────────────────────────────────────────
   Три ряда карточек. Сетка сверена с оригиналом: колонка 599, зазор 24,
   внутренний отступ карточки 41 слева и 35–39 сверху, радиус 20.
   Высота секции у оригинала 1488 px. */
/* Сверху 12, а не 100: у оригинала заголовок секции стоит вплотную к её
   верхней границе, а зазор между экранами даёт нижний отступ первого. */
.about { background: var(--bg); padding: 12px 0 91px; }

.sec-title {
  margin: 0 0 46px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: -1.5px;
  text-align: center;
}

.about__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about__row + .about__row { margin-top: 24px; }

.card { border-radius: 20px; overflow: hidden; }
.card--dark { background: var(--card); }
.card--light { background: #fff; }
.card--blue { background: var(--blue); }

/* Подсветка кусков текста — у Тильды это отдельные элементы с заливкой,
   здесь обычный <mark>: так текст остаётся единым и переносится сам. */
.mk {
  padding: 0 .12em;
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
}
.mk--lime { background: var(--lime); color: var(--ink); }

.about__intro { padding: 35px 41px 41px; }
.about__lead {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -.5px;
}
.about__lead--sm { font-size: 24px; line-height: 31px; }
.about__note {
  margin: 36px 0 0;
  max-width: 408px;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -.5px;
}
.about__photo { width: 100%; height: 449px; object-fit: cover; border-radius: 20px; }

.about__clients { padding: 39px 33px; min-height: 276px; display: flex; flex-direction: column; }
.about__h {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -.5px;
}
.about__clients img { margin-top: auto; width: 100%; max-width: 517px; height: auto; }
.about__origin { padding: 36px 41px; min-height: 276px; display: flex; align-items: flex-start; }

/* Документы. Картинка здесь — не иллюстрация внизу карточки, а вся карточка
   целиком: файл 1176×1014 это ровно 2× от 599×516, то есть синий фон и скан
   нарисованы в нём вместе. Поэтому она кладётся фоном, а текст поверх. */
.about__doc { position: relative; }
.about__doc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__doc-txt { position: relative; padding: 36px 41px; }
.about__h--doc { max-width: 470px; }
.about__num {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #bfe1ff;
}
.about__doc--license { height: 516px; }
.about__doc--accred { height: 354px; align-self: start; }

@media (max-width: 900px) {
  .about { padding: 8px 0 48px; }
  .sec-title { font-size: 28px; line-height: 32px; letter-spacing: -.8px; margin-bottom: 28px; }
  .about__row { grid-template-columns: 1fr; gap: 16px; }
  .about__row + .about__row { margin-top: 16px; }
  .about__intro, .about__origin { padding: 24px 22px; }
  .about__clients { padding: 24px 22px; }
  .about__lead { font-size: 22px; line-height: 28px; }
  .about__lead--sm { font-size: 19px; line-height: 26px; }
  .about__note { margin-top: 20px; font-size: 16px; line-height: 24px; max-width: 100%; }
  .about__h { font-size: 22px; line-height: 28px; }
  .about__photo { height: 240px; }
  .about__clients img { margin-top: 20px; }
  .about__doc--license, .about__doc--accred { height: auto; aspect-ratio: 599 / 516; }
  .about__doc--accred { aspect-ratio: 599 / 354; }
  .about__doc-txt { padding: 24px 22px; }
  .about__clients, .about__origin { min-height: 0; }
}

/* ── Секция «Продукты школы» ──────────────────────────────────────────
   Сверено с оригиналом: широкая карточка 1222 с радиусом 30, внутренний
   отступ 30, медиа 538 шириной; колоночные карточки 601 с зазором 20;
   кнопка высотой 71 и радиусом 10; плашки-теги 14 px. */
/* Снизу почти ничего: в оригинале карточки кончаются за 5 px до конца
   блока, а весь зазор до «Отзывов» — это верхний отступ их шапки (93.6).
   Раньше здесь стояло 148, и разрыв выходил 241 вместо 99 — это и был
   «в оригинале отступ меньше». */
.products { background: var(--bg); padding: 0 0 5px; }

.sec-title--left { text-align: left; margin-bottom: 0; }
/* «Стартовые продукты» и «Обучающие программы для сисадминов» набраны
   RobotoFlex, а не Machina, — в отличие от заголовков секций. Выглядит
   как недосмотр автора макета, но повторяем как есть. */
.sub-title {
  margin: 31px 0 51px;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1px;
}
.sub-title--mt { margin-top: 102px; }

.prod { background: var(--card); border-radius: 30px; padding: 30px 30px 41px; }
/* Только между широкими карточками. Раньше правило было на любых .prod
   и протекало в сетку курсов: карточки получали margin-top и переставали
   тянуться до высоты ряда — соседи в ряду расходились на те самые 20 px. */
.prod--wide + .prod--wide { margin-top: 20px; }
/* stretch, а не start: в оригинале низ кнопки совпадает с низом медиа,
   а при start колонка с текстом короче и кнопка повисает в воздухе. */
.prod--wide { display: grid; grid-template-columns: 1fr 538px; gap: 24px; align-items: stretch; }
.prod__body { display: flex; flex-direction: column; }

/* Плашки над заголовком карточки: 35.6 в высоту, полная скругление,
   RobotoFlex 14/21 с letter-spacing -0.5 — всё с оригинала.

   Одно отличие намеренное. У оригинала нейтральная плашка залита ровно
   тем же rgb(45,45,45), что и сама карточка, то есть подложки не видно
   вовсе — виден только белый текст. Похоже на недосмотр, поэтому здесь
   она чуть светлее фона. Если это не недосмотр, а так и задумано, —
   поменяйте background на var(--card), остальное совпадает. */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 35.6px;
  padding: 0 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.tag--light { background: #fff; color: var(--ink); }

.prod__h {
  margin: 24px 0 0;
  max-width: 540px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: -1px;
}
/* Описания карточек в оригинале белые и нормального начертания (400), а
   не приглушённые светлые, как я поставил сначала. Проверено по всем
   шести описаниям продуктов разом: RobotoFlex 20/30/400, #fff. */
.prod__d {
  margin: 25.5px 0 0;
  max-width: 540px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -.5px;
  color: #fff;
}

/* Все кнопки оригинала набраны 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;
}

.prod__media { width: 100%; border-radius: 20px; object-fit: cover; }
/* Картинка широкой карточки тянется на всю её внутреннюю высоту, а не
   стоит фиксированной: в оригинале обе карточки так и устроены — 376.7 у
   первой и 419.4 у второй, ровно высота карточки минус отступы 30.5/40.7.
   Высоту задаёт левая колонка с текстом, картинка подстраивается.

   Отсюда обёртка вокруг картинки. Сам <img> так не растянуть: у замещаемых
   элементов height:100% в строке грид-сетки неопределённой высоты
   откатывается к собственным пропорциям файла — карточка тогда раздувается
   под картинку, а не наоборот. Проверено: без обёртки вторая карточка
   выходила 567 вместо 491. */
.prod--wide .prod__media { height: 100%; min-height: 377px; }
.prod--wide .prod__media--fit { position: relative; overflow: hidden; }
.prod--wide .prod__media--fit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Внутренние отступы левой колонки — с оригинала: 25.5 до заголовка и
   40.8 от описания до кнопки. У узких карточек курсов свои числа. */
.prod--wide .tags + .prod__h { margin-top: 25.5px; }
.prod--wide .prod__d { margin-bottom: 40.8px; }
/* Карточка MikroTik: синяя заливка, поверх — вырезанный роутер. Кадр как в
   оригинале — картинка шире окна на 21.7 % и прижата к верху со сдвигом
   влево, поэтому не object-fit, а абсолютная картинка в обёртке. */
.prod__media--tint {
  position: relative;
  overflow: hidden;
  background: var(--blue);
}
.prod__media--tint img {
  position: absolute;
  top: 0;
  left: -4.69%;
  width: 121.732%;
  max-width: none; /* иначе общий сброс img обрежет ширину до 100% */
  height: auto;
}

/* Видео мини-курса. Это не плеер: в оригинале здесь зацикленный ролик без
   звука с автозапуском, поэтому и кнопки воспроизведения быть не должно.
   Сначала я принял его за ленивый ютуб и поставил заглушку с треугольником —
   она, разумеется, никуда не вела.

   Файл пережат под реальный размер показа: исходник 1920×1080 на 2178 КБ
   отдавался в окно 528×370. Тот же ролик в 1056 по ширине — 144 КБ. */
.prod__media--video {
  background: #000;
  border-radius: 15px;
  height: 377px;
  object-fit: cover;
}

/* Материалы: картинка слева, текст и кнопка справа. */
.mats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.mat {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 31px;
  align-items: stretch;
  background: var(--card);
  border-radius: 30px;
  padding: 24px 30px;
  min-height: 355px;
}
/* Высота задана числом, а не 100%: у замещаемых элементов проценты в строке
   грид-сетки неопределённой высоты откатываются к пропорциям файла, и
   карточка раздувается под картинку (было 362 вместо 355). 307 — это
   355.3 оригинала минус отступы 24 сверху и снизу. */
.mat > img {
  width: 100%; height: 307px;
  object-fit: contain;
  background: #f5f5f8;
  border-radius: 10px;
  padding: 24px;
}
.mat__body { display: flex; flex-direction: column; }
.mat__h {
  margin: 5px 0 0;
  /* RobotoFlex, а не PPNeueMachina: сверка слепков показала, что у
     оригинала заголовки материалов набраны текстовым шрифтом. */
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -.5px;
}

.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.prod--col { display: flex; flex-direction: column; }
.prod--col .prod__media { height: 356px; margin-bottom: 21px; }
.prod--col .prod__body { flex: 1; }
/* У колоночных карточек кнопка НЕ прижимается к низу: в оригинале до неё
   ровно 51 от описания, и высота карточки складывается из отступов.
   Выравнивание соседей по ряду делает сама сетка. */
.prod--col .prod__d { margin-bottom: 51px; }
.prod--col .btn { margin-top: 0; }
.prod--col .tags + .prod__h { margin-top: 24px; }

@media (max-width: 900px) {
  .products { padding: 0 0 56px; }
  .sub-title { font-size: 22px; line-height: 28px; margin: 20px 0 20px; }
  .sub-title--mt { margin-top: 44px; }
  .prod { padding: 20px; border-radius: 20px; }
  .prod--wide { grid-template-columns: 1fr; gap: 20px; }
  .prod--wide .prod__media, .prod__media--video { min-height: 200px; height: 200px; }
  .prod__h { font-size: 24px; line-height: 30px; margin-top: 18px; }
  .prod__d { font-size: 16px; line-height: 24px; margin-top: 14px; }
  .btn { min-height: 56px; font-size: 16px; margin-top: 20px; }
  .btn--sm { min-height: 50px; }
  .mats, .courses { grid-template-columns: 1fr; gap: 16px; }
  .mat { grid-template-columns: 120px 1fr; gap: 18px; padding: 20px; min-height: 0; border-radius: 20px; }
  /* ⚠️ min-width: 0 обязателен. Колонка 1fr по умолчанию не сжимается уже
     самого длинного слова внутри, и на 320 карточка выходила 353 в ширину —
     страница ехала вбок на 33 px. Заметно на iPhone SE и старых Android. */
  .mat__body { min-width: 0; overflow-wrap: break-word; }
  .mat > img { padding: 12px; height: auto; align-self: stretch; }
  .mat__h { font-size: 18px; line-height: 24px; }
  .prod--col .prod__media { height: 200px; margin-bottom: 18px; }
  /* Отступ 51 под описанием — из десктопного макета; на узком экране он
     оставляет дыру между текстом и кнопкой, здесь хватает margin у .btn. */
  .prod--col .prod__d { margin-bottom: 0; }
  .tag { height: 32px; padding: 0 16px; }
}

/* ── Отзывы ──────────────────────────────────────────────────────────
   У оригинала это слайдер на плагине Тильды: две светлые карточки в кадре
   из четырнадцати, счётчик и стрелки. Здесь — обычная горизонтальная
   прокрутка со snap: листается пальцем, стрелками и с клавиатуры, без
   60 КБ чужого плагина. */
/* Шапка отзывов повторяет блок оригинала целиком: он ровно 239 высотой,
   заголовок начинается на 93.6 и переносится в две строки (ширина 470.3),
   счётчик стоит на второй строке, стрелки прижаты к правому краю сетки.
   Счётчик и стрелки позиционированы абсолютно, потому что у оригинала это
   свободно висящие элементы, а не соседи заголовка в строке; по горизонтали
   счётчик задан долей, чтобы не отрывался от заголовка на узком экране.

   Снизу у секции отступа нет: в оригинале сразу под лентой начинается блок
   Яндекс.Карт со своим отступом 100. */
.reviews { background: var(--bg); padding: 0; }
/* Тот же блок отзывов на странице курса светлый: в выгрузке Тильды у главной
   артборд отзывов #1e1e1e, а у курса #ffffff. Разметка одна на обе страницы,
   поэтому цвет переключается признаком на <body>, а не копией куска.
   Карточки, стрелки и счётчик свои цвета задают сами — меняется только фон
   секции и наследуемый цвет заголовка. */
.page-course .reviews { background: #fff; color: var(--ink); }
.reviews__top { position: relative; padding: 93.6px 0 45.4px; }
.reviews__h { max-width: 470.3px; margin: 0; }
.reviews__nav { position: absolute; right: 0; bottom: 49.6px; display: flex; gap: 15.2px; }
/* Счётчик в оригинале набран Gilroy — единственным местом на всей
   странице, и явно по недосмотру: шрифт на элементе просто не задан, а
   Gilroy у Тильды стоит по умолчанию. Тащить ради двух цифр ещё два
   файла шрифта не стоит, берём RobotoFlex — он уже загружен и по
   рисунку ближе к Gilroy, чем угловатая Machina. Расхождение осознанное.
   Разнобой в начертании (цифра 400, «/ 14» 500) у оригинала тоже есть. */
.reviews__count {
  position: absolute;
  left: 31.26%;
  bottom: 42.5px;
  color: #a0a7a8;
  font-size: 24px;
  font-weight: 500;
  line-height: 21.6px;
}
.reviews__count b { font-weight: 400; }
.rv-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61.1px; height: 61.1px;
  border: 0;
  border-radius: 5px;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
}
.rv-arrow svg { width: 16.3px; height: 28.5px; display: block; }
.rv-arrow:hover { opacity: .85; }

/* Лента вылезает из контейнера вправо до края экрана: в оригинале артборд
   во всю ширину окна, и справа всегда виден кусок следующей карточки —
   по нему и понятно, что лента листается. Клип на секции нужен, чтобы
   вылет не породил горизонтальную прокрутку всей страницы. */
.reviews { overflow-x: clip; }
.rv-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 599px;
  gap: 24px;
  margin-right: calc(-50vw + 50%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Примагничивание считает точкой отсчёта КРАЙ ЛЕНТЫ, а не край её
     содержимого: при внутреннем отступе браузер сразу подкручивал полосу на
     те же 17 px, и первая карточка вставала вплотную к экрану — на телефоне
     это читалось как «лента съехала влево». scroll-padding переносит точку
     отсчёта на отступ. */
  scroll-padding-left: 16.6667px;
  scrollbar-width: none;
  align-items: start;
  padding-bottom: 4px;
}
.rv-track::-webkit-scrollbar { display: none; }

/* Карточка отзыва. Сверено с оригиналом: светлая подложка #F5F5F8 радиусом
   20, внутренний отступ 31 (снизу 41), аватар 153 кругом, скриншот
   переписки во всю ширину колонки (538), должность — лаймовая плашка внизу.
   Числа взяты из макета Тильды (30/40 при сетке 1200) и умножены на 1.0175 —
   во столько раз наш контейнер 1221 шире её сетки.

   Высота у слайдов разная, потому что скриншоты разной длины: выравниваем
   по верху (align-items: start), а не растягиваем до самого длинного. Полоса
   при этом всегда высотой с самый длинный отзыв — ровно как артборд
   оригинала (1590). Поэтому порядок важен: первым идёт Дмитрий Попов, он же
   самый длинный, и на первом экране пустоты под карточкой нет.

   Порядок отзывов взят из макета по координате left, а не из порядка в DOM:
   у Тильды они лежат в разметке задом наперёд, и если верстать по DOM —
   лента разворачивается в обратную сторону. */
.rv {
  scroll-snap-align: start;
  margin: 0;
  padding: 31px 31px 41px;
  background: #f5f5f8;
  color: var(--ink);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.rv__top { display: flex; align-items: center; gap: 30px; }
.rv__ava { width: 153px; height: 153px; border-radius: 50%; object-fit: cover; flex: none; }
.rv__name {
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: -.5px;
}

/* Цитата подсвечена синим — это не фон карточки, а заливка самого текста,
   поэтому подсветка обтекает строки, а не рисует прямоугольник на всю
   ширину. Отсюда span внутри blockquote и box-decoration-break. */
.rv__q { margin: 30px 0 0; }
.rv__q span {
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -.5px;
  color: #fff;
  background: var(--blue);
  padding: 2px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.rv__shot { width: 100%; height: auto; margin: 41px 0 0; border-radius: 10px; }
.rv__role {
  align-self: flex-start;
  margin: 30px 0 0;
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--lime);
  color: var(--ink);
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.5px;
}

/* ── Отзывы с Яндекс.Карт ─────────────────────────────────────────
   Блок из оригинала (rec1980590571). Раньше я его пропустил, посчитав
   пустым: в разметке это «html-элемент», внутри которого один iframe, и
   обмер по тексту с картинками ничего не находит. Пустым он не был.

   Размеры сняты с оригинала: секция 900, само окно 560×700 по центру,
   отступ сверху 100. Оно не тянется с окном (у Тильды upscale="grid"),
   поэтому числа тут абсолютные, а не умноженные на 1.0175, как в
   остальной странице. */
.ymaps { background: var(--bg); padding: 100px 0; }
.ymaps__box {
  width: 560px;
  max-width: calc(100% - 40px);
  height: 700px;
  margin: 0 auto;
  overflow-y: auto;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ymaps__box::-webkit-scrollbar { display: none; }

/* На странице курса тот же виджет в другой оправе: блок белый и ровно 550,
   окно с отступом 20 сверху. Оно по-прежнему 700 высотой, но артборд
   оригинала режет его на 550 — видно 530. Высоту окна не подрезаем: от неё
   зависит, где самопрокрутка заходит на второй круг. */
.ymaps--course {
  height: 550px;
  padding: 20px 0 0;
  background: #fff;
  overflow: hidden;
}
.ymaps__box iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
}

/* ── Соцсети ─────────────────────────────────────────────────────────
   Обмер оригинала при ширине 1425 (там сетка совпадает с нашим
   контейнером 1221): заголовок 491.7 в две строки, карточка ютуба
   787.9×386.8, телеграма 413.3×386.8, зазор 20.4, скруглание 30,
   внутренний отступ 30.5. Всё, что по горизонтали, задано в процентах
   от карточки — иначе на 1000 px, где контейнер уже сжат, абсолютные
   координаты разъехались бы. */
.socials { background: var(--bg); padding: 0 0 101.5px; }
.soc__title { max-width: 491.7px; margin: 0 0 52.7px; }
.soc {
  display: grid;
  grid-template-columns: 787.9fr 413.3fr;
  gap: 20.4px;
  align-items: start;
}
.soc__card {
  position: relative;
  min-height: 386.8px;
  padding: 30.5px 30.5px 40.7px;
  border-radius: 30px;
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.soc__t {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -1px;
}
/* Проценты у текста и кнопки считаются от содержимого карточки (726.9),
   а у logo/clips — от её падинг-бокса (787.9): они позиционированы
   абсолютно. Разные базы, поэтому и доли разные при одинаковой на вид
   ширине. */
.soc__card .btn { width: 48.48%; margin-top: auto; }

/* Ютуб. Объёмный логотип в оригинале лежит поверх текста, а не рядом с
   ним, — отсюда абсолютное позиционирование, флексом такое не собрать. */
.soc__card--yt .soc__t { max-width: 44.55%; }
.soc__logo {
  position: absolute;
  top: 23.4px;
  left: 36.44%;
  width: 108.9px;
  height: 108.9px;
}
.soc__clips {
  position: absolute;
  top: 30.5px;
  right: 30.5px;
  width: 34.89%;
  display: grid;
  gap: 10.2px;
}
.soc__clip { position: relative; display: block; }
/* Превью 16:9, а окошко в оригинале 270×150 — это 1.8. Разница в полтора
   пикселя по высоте, но она копится на двух рядах, поэтому кадрируем
   по месту, а не растягиваем. */
.soc__clip img {
  display: block;
  width: 100%;
  aspect-ratio: 274.9 / 152.7;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}
/* Кружок «плей». В оригинале это кнопка без текста с треугольником
   внутри; рисуем треугольник рамками, чтобы не тащить ещё одну картинку. */
.soc__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50.9px;
  height: 50.9px;
  margin: -25.45px 0 0 -25.45px;
  border-radius: 50%;
  background: #fff;
}
.soc__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -6px;
  border: 9px solid transparent;
  border-left: 14px solid var(--ink);
  border-right: 0;
}

/* Телеграм. Бледный самолётик — фон карточки, а не картинка в потоке:
   он подрезается её краями. Размер, положение и прозрачность 0.23 сняты
   с оригинала; без прозрачности логотип забивает текст, что и было видно
   на первом прогоне. */
.soc__card--tg {
  margin-top: 2px;
  overflow: hidden;
  background: var(--blue);
}
.soc__card--tg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .23;
  background: url('img/yt-logo.webp') 49.486% 57.817% / 149.167% no-repeat;
}
.soc__card--tg > * { position: relative; }
.soc__card--tg .btn { width: 100%; }

.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; }
.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; }
.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) {
  .reviews { padding: 0 0 24px; }
  .socials { padding: 0 0 56px; }
  .reviews__top { padding: 48px 0 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
  .reviews__h { max-width: none; }
  .reviews__count { position: static; margin-right: auto; }
  .reviews__nav { position: static; gap: 12px; }
  .rv-track { grid-auto-columns: calc(100% - 24px); gap: 16px; }
  .rv { padding: 20px; }
  .rv__top { gap: 16px; }
  .rv__ava { width: 84px; height: 84px; }
  .rv__name { font-size: 19px; line-height: 24px; }
  .rv__q { margin-top: 20px; }
  .rv__q span { font-size: 19px; line-height: 26px; }
  .rv__shot { margin-top: 20px; }
  .rv__role { font-size: 15px; line-height: 18px; margin-top: 20px; }
  .rv-arrow { width: 46px; height: 46px; font-size: 24px; }
  /* Яндекс отдаёт под узкий экран другую вёрстку виджета — она длиннее,
     поэтому и айфрейму нужна другая высота, иначе окно прокрутки упрётся
     в обрезанный низ. Числа те же, что у оригинала. */
  .ymaps { padding: 40px 0; }
  .ymaps__box { width: 100%; height: 600px; }
  .ymaps__box iframe { height: 2600px; }
  /* На узком экране оригинал меняет карточки местами: телеграм наверх. */
  .soc { grid-template-columns: 1fr; gap: 16px; }
  .soc__title { max-width: none; margin-bottom: 24px; }
  .soc__card { padding: 20px; border-radius: 20px; min-height: 0; gap: 20px; }
  .soc__card--tg { margin-top: 0; order: -1; }
  .soc__card .btn, .soc__card--tg .btn { width: 100%; }
  .soc__card--yt .soc__t { max-width: calc(100% - 80px); }
  .soc__logo { top: 20px; right: 20px; left: auto; width: 64px; height: auto; }
  .soc__clips { position: static; width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .soc__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .soc__play::after { margin: -7px 0 0 -5px; border-width: 7px; border-left-width: 11px; border-right-width: 0; }
  .soc__t { font-size: 20px; line-height: 26px; }
  .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; }
}

/* Кнопка в широкой карточке — 540, как в оригинале, а не во всю колонку. */
.prod--wide .btn { max-width: 540px; }
/* Заголовок широкой карточки в оригинале ограничен 511 — из-за этого
   «Интенсив-практикум…» переносится в три строки, и вторая карточка
   выше первой на 42. Без ограничения он влезал в две, и карточка
   получалась ниже оригинала. */
.prod--wide .prod__h { max-width: 511px; }
@media (max-width: 900px) { .prod--wide .btn { max-width: 100%; } }

/* ── Анимации ─────────────────────────────────────────────────────────
   В оригинале их две и обе скромные: 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, .rv-arrow, .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); }
}

/* Плашки курсов под первым экраном ведут себя иначе прочих кнопок: на
   наведении заливка становится цветом фона страницы, проступает тонкая
   светлая рамка, а текст белеет. Значения взяты из переменных оригинала:
   --t396-bgcolor-hover-color: #1e1e1e, --t396-bordercolor-hover:
   rgba(255,255,255,0.2), --t396-borderwidth: 1px, скорость 0.2s.

   Рамка объявлена и в покое, прозрачной: иначе при наведении плашка
   подрастала бы на 2 px и строка дёргалась. */
.chip {
  border: 1px solid transparent;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.chip:hover {
  background-color: var(--bg);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
/* У «Zabbix» рамка задана не для наведения, а для покоя — то есть видна
   всегда, в отличие от остальных четырёх. Похоже на недосмотр, но так на
   боевой странице, поэтому повторяю. */
.chip--red { border-color: rgba(255, 255, 255, .2); }
.soc__play { transition: transform .2s ease; }
.soc__clip:hover .soc__play { transform: scale(1.06); }

/* Появление при прокрутке.

   Прятать контент разрешено ТОЛЬКО когда скрипт уже взял управление:
   класс js-anim вешается на <html> непосредственно перед подпиской
   наблюдателя. Иначе получается неприемлемый отказ — при любой осечке JS
   (ошибка, блокировщик, старый браузер) страница остаётся пустой.
   Проверено на стенде: без этой развязки 21 блок был невидим. */
.js-anim .reveal { opacity: 0; transition: opacity .6s ease; }
.js-anim .reveal.is-in { opacity: 1; }

/* Въезд сбоку — тем же наблюдателем, но со сдвигом. Оригинал: fadeinright
   (слева) и fadeinleft (справа), 200 px, 1.5 с, задержки в --d. */
.js-anim .wl-slide {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  transition-delay: var(--d, 0s);
}
.js-anim .wl-slide--right { transform: translateX(200px); }
.js-anim .wl-slide.is-in { opacity: 1; transform: none; }

/* Выезд снизу — белые карточки «роста дохода». В оригинале fadeinup:
   200 px, 1 с, задержки 0 / 0.2 / 0.4 с слева направо. */
.js-anim .wl-rise {
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: var(--d, 0s);
}
.js-anim .wl-rise.is-in { opacity: 1; transform: none; }


/* Карьерный трек: плашки не появляются на местах, а собираются лесенкой.
   В оригинале это sbs-анимация по blockintoview: каждая шагает по 306 px
   вправо (500 мс) с паузами по 200 мс, часть ещё поднимается на 174.
   Здесь то же кадрами — карточка стоит на своём месте, а кадры отматывают
   её к общему старту и приводят обратно. 306 и 174 канвы = 311 и 177
   живых. Пока скрипт не сказал is-in, анимация на паузе; без JS правила
   вообще не применяются (гейт js-anim), и плашки просто стоят на местах. */
@keyframes wl-трек-linux {
  0.0% { transform: translate(-311px, 0px); }
  20.83% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-windows {
  0.0% { transform: translate(-311px, 177px); }
  20.83% { transform: translate(0px, 177px); }
  29.17% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-devops {
  0.0% { transform: translate(-622px, 0px); }
  20.83% { transform: translate(-311px, 0px); }
  29.17% { transform: translate(-311px, 0px); }
  50.0% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-net {
  0.0% { transform: translate(-622px, 177px); }
  20.83% { transform: translate(-311px, 177px); }
  29.17% { transform: translate(-311px, 177px); }
  50.0% { transform: translate(0px, 177px); }
  58.33% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-arch {
  0.0% { transform: translate(-933px, 0px); }
  20.83% { transform: translate(-622px, 0px); }
  29.17% { transform: translate(-622px, 0px); }
  50.0% { transform: translate(-311px, 0px); }
  58.33% { transform: translate(-311px, 0px); }
  79.17% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-cto {
  0.0% { transform: translate(-933px, 177px); }
  20.83% { transform: translate(-622px, 177px); }
  29.17% { transform: translate(-622px, 177px); }
  50.0% { transform: translate(-311px, 177px); }
  58.33% { transform: translate(-311px, 177px); }
  79.17% { transform: translate(0px, 177px); }
  87.5% { transform: translate(0px, 0px); }
  100% { transform: translate(0, 0); }
}
@keyframes wl-трек-lead {
  0.0% { transform: translate(-933px, 354px); }
  20.83% { transform: translate(-622px, 354px); }
  29.17% { transform: translate(-622px, 354px); }
  50.0% { transform: translate(-311px, 354px); }
  58.33% { transform: translate(-311px, 354px); }
  79.17% { transform: translate(0px, 354px); }
  87.5% { transform: translate(0px, 177px); }
  91.67% { transform: translate(0px, 177px); }
  100.0% { transform: translate(0px, 0px); }
}
.js-anim .wl-career__card--anim {
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.js-anim .wl-career__card--anim.is-in { animation-play-state: running; }
.js-anim .wl-career__card--linux   { animation-name: wl-трек-linux; }
.js-anim .wl-career__card--windows { animation-name: wl-трек-windows; }
.js-anim .wl-career__card--devops  { animation-name: wl-трек-devops; }
.js-anim .wl-career__card--net     { animation-name: wl-трек-net; }
.js-anim .wl-career__card--arch    { animation-name: wl-трек-arch; }
.js-anim .wl-career__card--cto     { animation-name: wl-трек-cto; }
.js-anim .wl-career__card--lead    { animation-name: wl-трек-lead; }

/* Кому анимация мешает — тому её не показываем. Это не вкусовщина:
   у части людей от движения на экране в буквальном смысле кружится голова,
   и системная настройка существует ровно для этого. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal, .js-anim .reveal.is-in { opacity: 1; transition: none; }
  .js-anim .wl-career__card--anim { animation: none; }
  .js-anim .wl-slide, .js-anim .wl-slide.is-in,
  .js-anim .wl-rise, .js-anim .wl-rise.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn, .chip, .rv-arrow, .soc__play { transition: none; }
  .soc__clip:hover .soc__play { transform: none; }
  /* Покачивание наклеек и пульс иконок — ровно то самое движение на экране,
     от которого людям с вестибулярными нарушениями делается плохо. */
  .wl-hero__sticker, .wl-tip__btn img,
  .wl-how__mark, .wl-how__shot { animation: none; }
}

/* ── Масштаб десктопной канвы на широких экранах ─────────────────────────
   Тильда на курсах не оставляет полей: зеро-блоки нарисованы на артборде
   1400 и растягиваются на всю ширину окна (zoom = clientWidth/1400). Наши
   секции сняты при clientWidth 1425, поэтому наш знаменатель — 1425.

   Свип по ширинам показал, что без этого на 1680–1920 страница выглядит
   узкой полосой по центру, а оригинал заполняет окно. Масштабируются
   только секции курса: шапка и подвал на боевой — не зеро-блоки, они
   не растут (логотип 182x40 и при 1425, и при 1600 — старый обмер).

   --канва-зум пишет скрипт по clientWidth (100vw в CSS включает полосу
   прокрутки — на Windows это дало бы горизонтальный скролл). Он считается
   на любой ширине; порог живёт здесь, в медиазапросе. Браузер без
   поддержки zoom просто оставит нынешнюю центровку с полями.

   Интенсива здесь нет: у него data-artboard-upscale="grid", боевая
   страница зафиксирована на 1200 и центрируется (см. шапку его раздела). */
:root { --канва-зум: 1; }
@media (min-width: 1400px) {
  .page-course > section {
    zoom: var(--канва-зум);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Курс «Системный администратор Windows и Linux с нуля»
   /courses/sys-admin-win-linux

   Числа сняты с боевой страницы при clientWidth 1425 после
   document.fonts.ready: артборд 1425, контейнер 1221 (поля по 102).
   Координаты ниже — от левого края контейнера, как в оригинале.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Первый экран ──────────────────────────────────────────────────── */
/* Маркер — заливка прямо за текстом, как в оригинале: там это обычный
   <span> с фоном, без полей и скруглений (снято с «С 2015 года»).
   Отличается от .mk на главной, у которой поля и скругление свои. */
.wl-mk { background: var(--blue); color: #fff; }
.wl-mk--lime { background: var(--lime); color: var(--ink); }
/* Тёмный маркер — в заголовке мини-курса: там подсвечены «бесплатном» и
   «мини-курсе», белым по #0a0f17. */
.wl-mk--dark { background: var(--ink); color: #fff; }

.wl-hero {
  position: relative;
  /* Плита обрезает картинку курса, выходящую за правый край. */
  overflow: hidden;
  /* Секция белая, а тёмная плита лежит на ней отдельным слоем — так же, как
     в оригинале: там артборд белый, а скруглённый прямоугольник #1e1e1e
     нарисован поверх. Красить саму секцию в тёмный нельзя: скругление
     пришлось бы на тёмный фон страницы и его не было бы видно. */
  background: #fff;
  /* Высота секции в оригинале 1456. Набирается отступами: сверху 117 до
     надзаголовка, снизу 101 после карточек. Зазора между секциями нет —
     весь ритм страницы задают внутренние отступы (см. docs). */
  padding: 117px 0 102px;
}
.wl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 0 0 54px 54px;
}
.wl-hero .wrap { position: relative; z-index: 2; }

.wl-hero__title {
  /* 749 — ширина заголовка в оригинале. На ней ««Системный администратор»
     (827 px в наборе) переносится, и вместе с расставленными в разметке
     <br> заголовок ложится в те же четыре строки, что в оригинале. */
  max-width: 749px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 54px;
  letter-spacing: -1.5px;
}
/* Надзаголовок — часть h1, а не отдельный абзац: в оригинале скрытый h1
   содержал обе строки сразу, и текст заголовка должен совпасть с ним. */
.wl-hero__kicker {
  display: block;
  margin-bottom: 14px;
  font-family: 'RobotoFlex', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 21px;
  letter-spacing: -.5px;
}

/* Плашки-теги. Ширины проставлены числами, а не набраны отступами: в
   оригинале это зеро-элементы с фиксированной шириной и текстом по центру,
   и разбивка 3 + 2 держится именно на них. max-width контейнера подобран
   так, чтобы перенос случился после третьей плашки. */
.wl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 660px;
  /* 39, хотя в оригинале от низа заголовка до плашек 35: строчный бокс
     последней строки заголовка у нас на 4 px ниже тилдиного. Отступ
     подобран так, чтобы плашки встали на исходную координату 407 —
     сверяются координаты элементов, а не промежуточные числа. */
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}
.wl-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  border: 1px solid #4b4b4b;
  border-radius: 3px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.wl-tags .wl-tag:nth-child(1) { width: 146px; }
.wl-tags .wl-tag:nth-child(2) { width: 228px; }
.wl-tags .wl-tag:nth-child(3) { width: 222px; }
.wl-tags .wl-tag:nth-child(4) { width: 283px; }
.wl-tag--violet {
  width: 276px;
  border-color: transparent;
  background: var(--violet);
}
.wl-tag--tip { border: 0; width: 41px; }

.wl-hero__lead {
  position: relative;
  max-width: 654px;
  margin: 27px 0 0;
  padding-left: 25px;
  font-size: 22px;
  font-weight: 300;
  line-height: 31px;
  letter-spacing: -.5px;
}
.wl-hero__lead img { position: absolute; left: 0; top: 12px; }

.wl-hero__cta { display: flex; gap: 15px; margin-top: 40px; }
.wl-hero__cta .btn {
  width: 326px;
  height: 71px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: -1px;
}
.btn--lime { background: var(--lime); color: var(--ink); border: 0; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid #4b4b4b; }
.wl-hero__note { margin: 15px 0 0 29px; }

/* ── Наведение на кнопки ──────────────────────────────────────────────
   Состояния сняты с боевой наведением живого курсора, а не угаданы: у
   каждой кнопки оно СВОЁ, общего «притушить прозрачностью» там нет.
   Две синие ведут себя по-разному (в «форматах» темнеет, в мини-курсе
   белеет), две лаймовые тоже (в «форматах» #1e1e1e, в форме #0a0f17).
   Плавность у всех одна: 0.2s ease-in-out по цвету, тексту и рамке.

   Под hover: hover, чтобы на телефоне состояние не залипало после касания —
   в оригинале правила безусловные, но там это просто недосмотр Тильды. */
.wl-hero__cta .btn,
.wl-plan__btn,
.wl-mini__btn,
.wl-ask__btn,
.wl-ok__btn {
  transition: background-color .2s ease-in-out, color .2s ease-in-out,
              border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

@media (hover: hover) {
  /* Первый экран: обе кнопки белеют, у прозрачной ещё и текст темнеет. */
  .wl-hero__cta .btn:hover { opacity: 1; }
  .wl-hero__cta .btn--lime:hover { background: #fff; }
  .wl-hero__cta .btn--ghost:hover { background: #fff; color: var(--ink); }

  /* Форматы участия: все три уходят в тёмный. */
  .wl-plan__btn--blue:hover { background: var(--bg); }
  .wl-plan__btn--lime:hover { background: var(--bg); color: #fff; }
  .wl-plan__btn--pale:hover { background: var(--bg); color: #fff; }

  /* Мини-курс: синяя, но белеет, а не темнеет. */
  .wl-mini__btn:hover { background: #fff; color: var(--ink); }

  /* Форма: лаймовая уходит в самый тёмный, не в #1e1e1e. */
  .wl-ask__btn:hover { background: var(--ink); color: #fff; }
  /* Кнопка окна «отправлено» живьём не наводится (попап), поэтому взята по
     образцу соседней лаймовой из формы. Если попадётся случай проверить —
     стоит сверить. */
  .wl-ok__btn:hover { background: var(--ink); color: #fff; }
}

/* Картинка курса и наклейки. Позиции — от левого края контейнера; картинка
   специально вылезает вправо за плиту и обрезается ею. */
.wl-hero__pic {
  position: absolute;
  left: 455px;
  top: -117px;
  width: 1109px;
  height: 980px;
  max-width: none;
  z-index: -1;
}
.wl-hero__sticker { position: absolute; }
.wl-hero__sticker--1 { left: 839px; top: 367px; width: 180px; height: 180px; }
.wl-hero__sticker--2 { left: 994px; top: 365px; width: 172px; height: 165px; }
/* Наклейки покачиваются в противофазе: окно Windows уходит вверх на 8,
   пингвин вниз на 8, по 1200 мс на шаг, — числа из data-animate-sbs-opts
   оригинала. Цикл 2.4 с. */
@keyframes wl-вверх {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes wl-вниз {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.wl-hero__sticker--1 { animation: wl-вверх 2.4s ease-in-out infinite; }
.wl-hero__sticker--2 { animation: wl-вниз 2.4s ease-in-out infinite; }

/* Панели под «Чему вы научитесь»: две наложенные плашки с вырезом сверху.
   Шире контейнера на 68 px с каждой стороны, поэтому лежат отдельным слоем
   и позиционируются от центра секции. */
.wl-panels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wl-panels img { position: absolute; left: 50%; width: 1358px; max-width: none; }
.wl-panels__back { top: 770px; height: 567px; margin-left: -679px; }
.wl-panels__front { top: 831px; height: 592px; margin-left: -679px; }

.wl-skills { position: relative; z-index: 2; }
.wl-skills__h {
  margin: 0;
  /* 243 — расстояние от подписи под кнопками до заголовка в оригинале.
     Между секциями зазора нет, весь ритм задают такие отступы. */
  padding-top: 243px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -1.5px;
  text-align: center;
}
.wl-skills__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.wl-skill { position: relative; height: 306px; }
/* Подложка карточки — картинка, а не заливка: в ней нарисован узор,
   который заливкой не повторить. Высота числом (306), потому что проценты
   у замещаемых элементов в строке грид-сетки откатываются к пропорциям
   файла и карточка раздувается под картинку. */
.wl-skill__bg { position: absolute; inset: 0; width: 100%; height: 306px; }
.wl-skill__t {
  position: absolute;
  left: 25px;
  top: 94px;
  width: 183px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -.5px;
  color: var(--ink);
}
.wl-skill--blue .wl-skill__t { color: #fff; }

/* Подсказки. В оригинале это попапы Тильды; здесь — панель рядом с
   кнопкой. Открыта ровно одна: вторая кнопка закрывает первую. */
.wl-tip__btn {
  position: absolute;
  left: 25px;
  top: 25px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
/* Двойной пульс иконки — с оригинала: scale 1 → 1.1 → 1 → 1.1 → 1 по
   100 мс каждый шаг, дальше пауза 1000 мс. Отсюда цикл 1.4 с и проценты
   ниже: 100 мс от 1400 — это 7.14 %. Переход линейный, как в исходнике. */
@keyframes wl-пульс {
  0%     { transform: scale(1); }
  7.14%  { transform: scale(1.1); }
  14.28% { transform: scale(1); }
  21.43% { transform: scale(1.1); }
  28.57% { transform: scale(1); }
  100%   { transform: scale(1); }
}
.wl-tip__btn img { animation: wl-пульс 1.4s linear infinite; }
.wl-tag--tip .wl-tip__btn { position: static; }
.wl-tip {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  width: 357px;
  padding: 26px 25px;
  border-radius: 10px;
  background: #f5f5f8;
  color: var(--ink);
  /* Гарнитуру и перенос задаём явно: подсказка о гарантии лежит внутри
     плашки-тега, а та набрана PPNeueMachina в одну строку (nowrap), и без
     сброса текст подсказки вытягивался в строку и панель складывалась. */
  font-family: 'RobotoFlex', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -.5px;
  white-space: normal;
  text-align: left;
  z-index: 5;
}
.wl-tip p { margin: 0; }
.wl-tip--blue { background: #fff; }
/* Сдвиги подсказок — с оригинала: у правых карточек панель уходит влево,
   чтобы не вылезти за контейнер. */

/* ⚠️ Панели подсказок у карточек лежат СЛОЕМ .wl-skills, а не внутри
   карточки. На узких канвах лента навыков прокручивается по горизонтали,
   а прокрутка режет всё, что выходит за её края, — панель обрезалась бы
   сверху. Снаружи ленты она свободна.
   Плата за это — считать левый край самим: он равен левому краю N-й
   карточки в сетке из пяти колонок с зазором 14 плюс сдвиг с оригинала
   (у правых карточек панель уходит влево, чтобы не вылезти за контейнер).
   Низ — высота карточки (306) плюс отступ 16. */
.wl-tip--карточка {
  bottom: 322px;
  left: calc(var(--к) * ((100% - 56px) / 5 + 14px) + var(--сдвиг, 0px));
}
.wl-tip--к1 { --к: 0; }
.wl-tip--к2 { --к: 1; width: 329px; }
.wl-tip--к3 { --к: 2; width: 335px; --сдвиг: -51px; }
.wl-tip--к4 { --к: 3; width: 328px; --сдвиг: -95px; }
.wl-tip--к5 { --к: 4; width: 384px; --сдвиг: -150px; }

/* Крестик рисуем, а не тянем картинкой: в оригинале это две тонкие черты
   в квадрате 20×20, псевдоэлементы повторяют их точь-в-точь. На десктопе
   он не нужен — там подсказка живёт по наведению и гаснет сама, поэтому
   показывается только внутри канв. */
.wl-tip__x {
  display: none;
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wl-tip__x::before, .wl-tip__x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 1.5px;
  margin: -.75px 0 0 -35%;
  background: #ff8562;
  border-radius: 1px;
}
.wl-tip__x::before { transform: rotate(45deg); }
.wl-tip__x::after  { transform: rotate(-45deg); }

/* Подсказка о гарантии в оригинале висит не у своей кнопки, а выше —
   поверх заголовка, на 408/72 от левого верхнего угла контейнера.
   Повторяем как есть: кнопка внизу, панель вверху. */
.wl-tip--garant {
  left: 408px;
  bottom: auto;
  top: 72px;
  width: 378px;
  padding: 26px 25px 22px;
  background: var(--violet);
  color: #fff;
}
.wl-tip--garant .wl-tip__h { margin: 0 0 14px; }

/* ── Видеоролик о курсе ────────────────────────────────────────────── */
.wl-video {
  background: #fff;
  color: var(--ink);
  /* Снизу 102, а не 101: строчный бокс заголовка у нас на 1 px ниже
     тилдиного, и без добавки секция выходит 1052 вместо 1053. */
  padding: 99px 0 102px;
}
.wl-video__h { margin: 0 0 38px; color: var(--ink); }
/* Ролик шире контейнера на 68 px с каждой стороны — как и панели выше. */
.wl-video__box {
  position: relative;
  width: 1358px;
  max-width: calc(100% + 136px);
  margin: 0 -68px;
}
.wl-video__loop {
  display: block;
  width: 100%;
  height: 764px;
  border-radius: 40px;
  object-fit: cover;
  background: #000;
}
/* Кнопка плеера: лаймовый кружок 102 по центру ролика. */
.wl-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 102px;
  height: 102px;
  padding: 0 0 0 6px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.wl-video__play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* ── О школе ───────────────────────────────────────────────────────── */
.wl-about {
  position: relative;
  background: #fff;
  padding: 68px 0 103px;
}
.wl-about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 53px 53px 0 0;
}
.wl-about .wrap { position: relative; z-index: 2; }
.wl-about__h { margin: 0 0 39px; }

.wl-about__wide {
  position: relative;
  height: 430px;
  padding: 35px 41px;
  border-radius: 20px;
  background: var(--card);
}
.wl-about__lead {
  max-width: 597px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}
.wl-about__note {
  max-width: 546px;
  /* 260 — расстояние от верха карточки до второго абзаца минус верхний
     отступ: у первого абзаца высота плавает от длины строки, а привязка
     в оригинале жёсткая. */
  margin: 0;
  position: absolute;
  top: 295px;
  left: 41px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -.5px;
}
.wl-about__photo {
  position: absolute;
  left: 666px;
  top: 10px;
  width: 546px;
  height: 409px;
  border-radius: 10px;
  object-fit: cover;
}

.wl-about__pair,
.wl-about__docs {
  display: grid;
  grid-template-columns: 599fr 599fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
.wl-about__clients,
.wl-about__origin {
  height: 276px;
  padding: 35px 41px;
  border-radius: 20px;
}
.wl-about__clients { background: #fff; color: var(--ink); }
.wl-about__origin { background: var(--card); }
.wl-about__h3 {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}
/* Логотипы клиентов лежат левее текста — с отступом 33 от края карточки,
   а не 41, как остальное содержимое. */
.wl-about__clients img { margin: 35px 0 0 -8px; width: 517px; height: 129px; }
.wl-about__origin-t {
  max-width: 462px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: -.5px;
}

/* Документы. Карточка — кнопка: в оригинале по ней открывается скан во
   весь экран. Картинка лежит фоном, текст поверх. */
.wl-about__doc {
  position: relative;
  /* Не block, а flex-колонка с прижимом к началу: <button> центрирует
     содержимое по вертикали, и текст уезжал на 166 px вниз. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 36px 41px;
  border: 0;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
}
/* «Кликните, чтобы увидеть больше» — у Тильды подсказка вшита в мобильную
   картинку документа; на десктопе её нет. Повторяем отдельным слоем. */
.wl-about__doc-hint { display: none; }
.wl-about__doc--license { height: 516px; }
.wl-about__doc--accred { height: 354px; }
.wl-about__doc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-about__doc-t,
.wl-about__doc-n {
  position: relative;
  display: block;
  z-index: 2;
}
.wl-about__doc--license .wl-about__doc-t { max-width: 402px; }
.wl-about__doc--accred .wl-about__doc-t { max-width: 465px; }
.wl-about__doc-t {
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}
.wl-about__doc-n {
  margin-top: 15px;
  color: #bfe1ff;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -.5px;
}

/* ── Кому подойдёт ─────────────────────────────────────────────────── */
/* Ни сверху, ни снизу отступов нет: секция начинается заголовком и
   кончается карточками — соседние секции идут вплотную. */
.wl-who { background: var(--bg); padding-bottom: 1px; }
.wl-who__h { margin: 0 0 43px; font-size: 40px; line-height: 46px; }
.wl-who__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-who__card {
  position: relative;
  height: 366px;
  padding: 30px;
  border-radius: 20px;
  background: var(--card);
}
.wl-who__card img { width: 153px; height: 153px; margin: 0 auto; border-radius: 10px; }
.wl-who__card p {
  position: absolute;
  left: 31px;
  right: 31px;
  top: 213px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: -.7px;
  text-align: center;
}
/* Значок поверх картинки — у третьей карточки, слева внизу. */
.wl-who__card .wl-who__badge {
  position: absolute;
  left: 42px;
  top: 113px;
  width: 71px;
  height: 71px;
  margin: 0;
}

/* Окно просмотра во весь экран — для сканов документов и ролика о курсе.
   Кадр плеера создаётся скриптом только по нажатию, поэтому здесь одни
   размеры и затемнение. */
.wl-box {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, .85);
}
.wl-box__x {
  position: absolute;
  right: 24px;
  top: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  /* Кнопки не наследуют гарнитуру: без этого крестик рисуется системным
     Arial и выглядит чужим. На форме обратной связи так и вышло. */
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.wl-box__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
/* Лента на несколько сканов: стрелки те же, что у отзывов, и лежат по краям
   картинки, а не окна, — иначе на широком экране они уезжают к бортам. */
.wl-box__gal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.wl-box__nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.wl-box__nav svg { width: 16px; height: 28px; }
.wl-box__nav--prev { left: -56px; }
.wl-box__nav--next { right: -56px; }
@media (max-width: 900px) {
  .wl-box__nav--prev { left: 4px; }
  .wl-box__nav--next { right: 4px; }
}
.wl-box__video {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}

/* ── Кому нужен сисадмин ───────────────────────────────────────────── */
.wl-demand { background: var(--bg); padding-top: 96px; }
.wl-demand__h {
  /* 677 — ширина второй половины заголовка в оригинале: на ней текст
     ложится в те же четыре строки. */
  max-width: 677px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
/* Приписка стоит справа от первой половины заголовка — отсюда абсолютная
   привязка, а не колонка: в потоке она поехала бы под него. */
.wl-demand__note {
  position: absolute;
  left: 827px;
  top: 55px;
  width: 308px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -.5px;
}
.wl-demand__pic {
  width: 100%;
  height: 782px;
  /* 43, а не 44: заголовок у нас на 4 px короче тилдиного, и с 44 секция
     выходит 1098 вместо 1097. Сходятся высоты секции — по ним и сверка. */
  margin-top: 43px;
  border-radius: 30px;
  object-fit: cover;
}

/* ── Рост дохода ───────────────────────────────────────────────────── */
.wl-pay { background: var(--bg); padding: 96px 0 1px; }
.wl-pay__h {
  max-width: 657px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.wl-pay__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 41px 0 0;
  padding: 0;
  list-style: none;
}
.wl-pay__step {
  position: relative;
  height: 428px;
  border-radius: 20px;
  background: #3a3a3a;
  /* Светлая карточка прижата к низу подложки: ступени разной высоты, а
     низ у всех общий. */
  display: flex;
  align-items: flex-end;
}
.wl-pay__card {
  position: relative;
  width: 100%;
  border-radius: 20px;
  background: #f5f5f8;
  color: var(--ink);
  text-align: center;
}
.wl-pay__card--1 { height: 275px; }
.wl-pay__card--2 { height: 351px; }
.wl-pay__card--3 { height: 428px; }

/* Стрелка между ступенями висит на верхней кромке подложки, слева. */
.wl-pay__card--2 { --d: .2s; }
.wl-pay__card--3 { --d: .4s; }
.wl-pay__arrow { position: absolute; left: -65px; top: 13px; z-index: 2; }

/* Плашки с суммой: ширина по содержимому, поэтому inline-flex, а центр
   даёт text-align на карточке. Иконка — часть плашки, как в оригинале. */
.wl-pay__sum {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  margin: 0;
  padding: 0 10px;
  border-radius: 5px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1px;
  white-space: nowrap;
}
.wl-pay__sum--blue { background: var(--blue); color: #fff; }
.wl-pay__sum--lime { background: var(--lime); color: var(--ink); }
.wl-pay__sum--blue { margin-top: 31px; }
.wl-pay__sum--lime { margin-top: 16px; }
/* Третья ступень набрана крупнее — это её отличие в оригинале. */
.wl-pay__card--3 .wl-pay__sum {
  height: 61px;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.wl-pay__card--3 .wl-pay__sum--blue { margin-top: 30px; }

.wl-pay__where {
  margin: 5px 0 0;
  color: #a5a5a5;
  font-size: 16px;
  /* В оригинале «Регионы» набрано 400, а «Москва, СПБ» — 300. Это их
     непоследовательность, но повторяем как есть. */
  font-weight: 400;
  line-height: 13.6px;
  letter-spacing: -.5px;
}

.wl-pay__where--msk { font-weight: 300; }
/* «после курса» в оригинале темнее остальных подписей грейда. */
.wl-pay__when--now { color: #1e1e1e; }

/* Строка с грейдом прижата к низу карточки: 26 от нижней кромки. */
.wl-pay__grade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  color: #a5a5a5;
  font-size: 20px;
  font-weight: 300;
  line-height: 17px;
  letter-spacing: -.5px;
}

/* ── Карьерный трек ────────────────────────────────────────────────── */
/* Лесенка из восьми плашек: сетка 4×3, но верхний ряд заполнен только
   последней колонкой, средний — тремя, нижний — всеми. Отсюда ступеньки
   вверх-вправо. Цвет задаёт колонка: тёмная, лаймовая, синяя, белая.

   Плашки в разметке оригинала лежат в одной точке и разъезжаются скриптом
   по прокрутке — там это «молекулы» Тильды. Здесь обычная сетка. */
.wl-career {
  position: relative;
  background: #fff;
  padding: 99px 0 100px;
}
.wl-career::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 0 0 53px 53px;
}
/* Лесенка начинается ВЫШЕ конца заголовка: верхняя плашка стоит справа,
   вровень с его второй строкой. Поэтому сетка и приписка вынуты из потока
   и привязаны к координатам оригинала, а высоту держит min-height. */
.wl-career .wrap { position: relative; z-index: 2; min-height: 752px; }
.wl-career__h {
  max-width: 599px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.wl-career__grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-career__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 153px;
  padding: 0 30px;
  border-radius: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -1px;
}
/* Пустые клетки верхних рядов — не карточки, а дырки в сетке. */
.wl-career__card--empty { visibility: hidden; }
.wl-career__card--dark  { background: var(--card); color: #fff; }
.wl-career__card--lime  { background: var(--lime); color: var(--ink); }
.wl-career__card--blue  { background: var(--blue); color: #fff; }
.wl-career__card--white { background: #fff; color: var(--ink); }
.wl-career__note {
  position: absolute;
  left: 50%;
  top: 661px;
  width: 984px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
  text-align: center;
}

/* ── Преподаватели ─────────────────────────────────────────────────── */
/* Секция светлая: артборд оригинала белый, тёмной плиты в нём нет. */
.wl-teach { background: #fff; color: var(--ink); padding: 83px 0 0; }
.wl-teach__h {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -1.5px;
  text-align: center;
}
.wl-teach__row {
  display: grid;
  grid-template-columns: 495px 702px;
  gap: 24px;
  margin-top: 34px;
}
/* Во втором ряду фото справа. */
.wl-teach__row--rev { grid-template-columns: 702px 495px; margin-top: 25px; }
.wl-teach__row--rev .wl-teach__photo { order: 2; }
.wl-teach__photo { width: 495px; height: 495px; border-radius: 20px; object-fit: cover; }
.wl-teach__card {
  height: 495px;
  padding: 37px 36px;
  border-radius: 20px;
  background: #f5f5f8;
}
.wl-teach__name {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1.5px;
}
.wl-teach__role {
  max-width: 595px;
  margin: 40px 0 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -1px;
}
.wl-teach__role + .wl-teach__role { margin-top: 16px; }
.wl-teach__role--wide { max-width: 477px; line-height: 29px; }
/* Список достижений начинается на разной высоте: в первой карточке две
   строки должности, во второй одна длинная. Отступы — с оригинала. */
.wl-teach__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #61646b;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.5px;
}
.wl-teach__card--1 .wl-teach__list { margin-top: 120px; }
.wl-teach__card--2 .wl-teach__list { margin-top: 32px; }
.wl-teach__list li {
  position: relative;
  padding-left: 25px;
}
.wl-teach__list li + li { margin-top: 16px; }
.wl-teach__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 12px;
  background: url('/img/wl/check-gray.svg') no-repeat center / contain;
}

/* ── Программы курсов ──────────────────────────────────────────────── */
/* Шапка Windows-программы — тёмная плита уже контейнера (1018) со
   скруглением только сверху: снизу её продолжает аккордеон. Над плитой
   102 px белого, поэтому секция белая, а плита — слоем. */
.wl-program { background: var(--bg); }
/* Секция — своя система координат: плита лежит отдельным слоем под текстом
   (z-index -1), и без этого контекста она провалилась бы под белый фон. */
.wl-program { position: relative; z-index: 0; }
.wl-program__head {
  position: relative;
  height: 345px;
  margin: 0 auto;
  width: 1018px;
  text-align: center;
}
.wl-program__head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 53px 53px 0 0;
  background: var(--bg);
}
.wl-program__head--linux::before { border-radius: 0; }
/* ⚠️ При прокрутке плита в оригинале вырастает в 1.4 раза и съезжает на
   67 px вниз (sbs-анимация по событию scroll, 250 мс). Из-за этого тёмный
   фон расползается на всю ширину и уходит под модули — блок целиком
   становится тёмным. Прежде это принимали за «у Linux плиты нет»: там её и
   правда нет, а здесь мы просто видели её до анимации. */
.js-anim .wl-grow::before { transition: transform .25s ease; }
.js-anim .wl-grow.is-in::before { transform: translateY(67px) scale(1.4); }
/* ⚠️ Белым в оригинале была только шапка (артборд 446 белый, на нём тёмная
   плита), а блок с модулями — отдельная запись с ФОНОМ #1e1e1e. У нас была
   белой вся секция, и модули стояли на белом: тёмным получался «наполовину»
   блок. Граница на 447 = 102 отступа сверху плюс 345 высоты шапки. */
.wl-program:not(.wl-program--linux) {
  background: linear-gradient(#fff 0 447px, var(--bg) 447px);
  padding-top: 102px;
}
/* У Linux-программы плиты нет: там весь блок тёмный и на 67 px короче. */
.wl-program__head--linux { width: 100%; height: 380px; border-radius: 0; }

.wl-program__fresh {
  position: absolute;
  left: 540px;
  top: 47px;
  width: 407px;
  height: 32px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  border-radius: 3px;
  background: var(--lime);
  color: var(--ink);
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -1px;
  /* Наклон 3° — как в оригинале. */
  transform: rotate(3deg);
  /* В оригинале это кнопка Тильды с иконкой обновления перед текстом
     (tn-atom__button-icon, order: -1). Её у нас не было вовсе. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wl-program__fresh::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  background: url('/img/wl/update.svg') no-repeat center / contain;
}
.wl-program__head--linux .wl-program__fresh { left: 642px; top: 82px; }
.wl-program__h {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 66px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
  color: #fff;
}
.wl-program__head--linux .wl-program__h { max-width: 595px; padding-top: 102px; }
.wl-program__note {
  max-width: 400px;
  margin: 25px auto 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -1px;
  color: #fff;
}
.wl-program__head--linux .wl-program__note { max-width: 359px; }
/* Плашки внутри плиты того же цвета, что и она: видно только надписи —
   так в оригинале. */
.wl-program__chips {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}
.wl-program__chips li {
  display: flex;
  align-items: center;
  height: 29px;
  padding: 0 10px;
  border: 1px solid #4b4b4b;
  border-radius: 3px;
  background: var(--bg);
  color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.5px;
  white-space: nowrap;
}

/* Аккордеон модулей. <details>/<summary> вместо тилдиного скрипта:
   раскрывается без JS и доступен с клавиатуры. */
.wl-program__list { width: 1160px; margin: 0 auto; }
/* Модуль — карточка, а не строка списка: в оригинале у каждого свой фон
   #373737, скругление 20 и зазор 5 до следующего. Без этого шесть модулей
   слипаются в одно полотно — так и было, пока не заметил владелец. */
.wl-mod {
  border: 0;
  border-radius: 20px;
  background: #373737;
}
.wl-mod + .wl-mod { margin-top: 5px; }
.wl-mod__t {
  position: relative;
  padding: 25px 30px;
  cursor: pointer;
  list-style: none;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -1px;
  color: #fff;
}
.wl-mod__t::-webkit-details-marker { display: none; }
/* Переносы в заголовках модулей стоят руками — так же, как в оригинале:
   там у каждого свои <br>, а ширина не ограничена. Прежняя догадка
   «max-width: 404» давала те же две-три строки у большинства модулей, но
   шестой уезжал на четвёртую строку и секция росла на 36 px. */
.wl-mod__t span { display: block; }
/* Кружок с плюсом справа — как в оригинале, 40×40. */
/* Кружок вынут из потока: как flex-элемент он своими 42 px задавал бы
   высоту пункта вместо строки заголовка, и однострочные модули выходили
   92 вместо 86. */
.wl-mod__t::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 23px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Кружок — заливка #1b1b1b, при наведении синий; крестик белый 22×22 в
     одну линию. Раньше здесь была тонкая обводка и короткий толстый плюс —
     не то. Всё снято с оригинала: у него две иконки, обычная и ховерная,
     и различаются они только цветом кружка. */
  background:
    linear-gradient(#fff, #fff) center / 22px 1px no-repeat,
    linear-gradient(#fff, #fff) center / 1px 22px no-repeat,
    #1b1b1b;
  transition: transform .2s ease, background-color .2s ease-in-out;
}
.wl-mod__t:hover::after { background-color: var(--blue); }
.wl-mod[open] .wl-mod__t::after { transform: rotate(45deg); }
/* на телефоне крест по центру строки через translate — поворот добавляется к нему */

/* ── Первый экран ниже 480 ──────────────────────────────────────────────
   Раньше эти правила жили в планшетном блоке (max-width: 1260) и работали
   заодно и здесь. С приходом резины полоса 480–1399 у них отобрана, а всё,
   что ниже 480, осталось за ними: мобильная канва стоит на этом фундаменте
   — это отсюда картинка возвращается в поток, а наклейки и панели гаснут. */
@media (max-width: 479.98px) {
  .wl-hero { padding-bottom: 48px; }
  .wl-hero__title { font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .wl-hero__title br { display: none; }
  .wl-hero__pic {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin: 28px 0 0;
    max-width: 100%;
  }
  .wl-hero__sticker, .wl-hero__note, .wl-panels { display: none; }
  .wl-hero__cta { flex-direction: column; align-items: stretch; }
  .wl-hero__cta .btn { width: 100%; }
  .wl-skills { margin-top: 40px; }
  .wl-skills__list { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .wl-skill { position: relative; width: 100%; height: auto; padding: 24px; }
  .wl-skill__bg { display: none; }
  .wl-skill__t { position: static; max-width: none; padding-right: 52px; }
}

@media (max-width: 479px) {
  .wl-mod[open] .wl-mod__t::after { transform: translateY(-50%) rotate(45deg); }
}
/* Раскрытый модуль: в оригинале 20/28 обычным начертанием, а не 18/27
   светлым — текст был мельче и разрежённее. Списки без своих отступов:
   шаг между пунктами держит интерлиньяж, а не margin. */
/* Отступ снизу — только у последнего элемента. Пока он стоял на каждом
   ребёнке, синяя подпись выходила на 8 px выше текста, а списки получали
   лишний хвост. */
.wl-mod > :not(summary) {
  margin: 0 30px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -.5px;
}
/* Синяя подпись — заливка вплотную к тексту, без полей: в оригинале это
   обычный span с background-color. */
/* inline, а не inline-block: у строчного элемента заливка по высоте букв
   (19 px), у блочного — по интерлиньяжу (28), и плашка выходила выше, чем в
   оригинале. Список после него всё равно начинается с новой строки. */
.wl-mod__lead {
  display: inline;
  padding: 0;
  font-family: 'PPNeueMachina', sans-serif;
}
.wl-mod__lead--blue { background: var(--blue); color: #fff; }
/* «Результат модуля» в оригинале салатовый с тёмными буквами, а не синий:
   в конце каждого модуля цвет меняется. Мы красили все подписи одинаково. */
/* Через `.wl-mod >`, иначе цвет букв проигрывает общему `color: #fff` для
   всего содержимого модуля — тот записан как `.wl-mod > :not(summary)` и
   специфичнее одного класса. */
.wl-mod > .wl-mod__lead--lime { background: var(--lime); color: var(--ink); }
/* Без подложки и обычным шрифтом — «Чему ты научишься» во всех модулях и
   «Что тебя ожидает» в модулях 2, 3 и 5. Разнобой со шрифтом — оригинала,
   не наш: в остальных одиннадцати там PPNeueMachina. */
.wl-mod__lead--plain { font-family: inherit; }
/* Пустая строка перед подписью. В оригинале это лишний <br> внутри общего
   текста; здесь — нижнее поле у того, что стоит перед ней. Именно перед, а не
   у самой подписи: подпись строчная, вертикальные поля она не принимает.
   40 = обычные 10 плюс высота пустой строки; сходится с оригиналом. */
.wl-mod > .wl-mod__gap { margin-bottom: 40px; }
/* Боковые поля повторяются здесь нарочно: правило идёт после
   `.wl-mod > :not(summary)` и той же силы, поэтому его `margin: 0 0 10px`
   обнуляло левое поле — списки прижимались к краю карточки и стояли на 30 px
   левее заголовка. В оригинале и подпись, и список начинаются от одной
   линии (155 при карточке 125), а номер пункта выступает влево на 22. */
.wl-mod ol { margin: 0 30px 10px; padding-left: 22px; }
/* Маркированный список — у «Что тебя ожидает» и «Чему ты научишься». Нумерация
   там была нашей выдумкой: в оригинале эти два списка с точками, и отступ у
   них свой, 20 вместо 22. */
.wl-mod ul { margin: 0 30px 10px; padding-left: 20px; }
.wl-mod > :last-child { padding-bottom: 25px; }
.wl-mod li { margin: 0; }

/* ── Как проходит обучение ─────────────────────────────────────────── */
/* Четыре блока одного устройства. В оригинале это зеро-блоки с жёсткими
   координатами, поэтому и здесь всё позиционировано абсолютно, а высота
   задана числом — так секции сходятся с оригиналом ровно. */
.wl-how {
  position: relative;
  height: 677px;
  background: var(--bg);
  color: #fff;
  /* Артборд у Тильды режет всё, что вылезло за края. Нам это нужно по той
     же причине: панели шире контейнера, а сообщения седьмого блока ещё и
     въезжают из-за края — без обрезки появляется горизонтальная прокрутка. */
  overflow: hidden;
}
.wl-how--first { height: 866px; }
.wl-how--light { color: var(--ink); }
.wl-how .wrap { position: relative; height: 100%; z-index: 2; }

.wl-how__panels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wl-how__panels img { position: absolute; left: 50%; max-width: none; }
.wl-how__back { top: 0; width: 1358px; height: 567px; margin-left: -679px; }
.wl-how__front { top: 17px; width: 1414px; height: 664px; margin-left: -707px; }
.wl-how--first .wl-how__back { top: 188px; }
.wl-how--first .wl-how__front { top: 206px; }

.wl-how__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 99px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: -1.5px;
  text-align: center;
}
.wl-how__h {
  position: absolute;
  left: 0;
  top: 211px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1.5px;
}
.wl-how--first .wl-how__h { top: 404px; }
/* У третьего блока заголовок в две строки — отсюда своя ширина и сдвиг. */
.wl-how__h--narrow { top: 214px; max-width: 473px; }
.wl-how__t {
  position: absolute;
  left: 0;
  top: 290px;
  width: 509px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  /* В оригинале у текста всех семи блоков -0.7px, а не -0.5px, как было
     здесь поначалу. Число снято с правил .tn-atom каждого блока. */
  letter-spacing: -.7px;
}
.wl-how--first .wl-how__t { top: 484px; width: 496px; }
.wl-how__t--low { top: 342px; }

.wl-how__media { position: absolute; border-radius: 20px; object-fit: cover; }
.wl-how__media--pic { left: 629px; top: 190px; width: 592px; height: 395px; }
.wl-how__media--video1 { left: 588px; top: 384px; width: 633px; height: 344px; background: #000; }
/* Ролик лежит в «экране» большой картинки, поэтому скруглён только сверху. */
.wl-how__media--video3 {
  left: 671px;
  top: 204px;
  width: 478px;
  height: 269px;
  border-radius: 8px 8px 0 0;
  background: #000;
}
.wl-how__big { position: absolute; left: 495px; top: 82px; width: 829px; height: 586px; max-width: none; }
.wl-how__mark { position: absolute; }
.wl-how__mark--2 { left: 574px; top: 439px; width: 204px; height: 204px; }
.wl-how__mark--3a { left: 598px; top: 127px; width: 146px; height: 146px; }
.wl-how__mark--3b { left: 1107px; top: 418px; width: 104px; height: 109px; }
.wl-how__mark--4 { left: 1120px; top: 208px; width: 151px; height: 151px; }

/* Наклейки и скриншоты покачиваются: ±8 px, по 1500 мс в каждую сторону,
   цикл 3 с. Числа из data-animate-sbs-opts оригинала; направление у каждой
   своё, потому и ключевых кадров два. Часть элементов ещё и повёрнута —
   поворот входит в кадры, иначе анимация его сбросит. */
@keyframes wl-плыв-вниз  { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(8px); } }
@keyframes wl-плыв-вверх { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(-8px); } }
@keyframes wl-плыв-вниз-8 {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50%      { transform: translateY(8px) rotate(8deg); }
}
@keyframes wl-плыв-вверх-10 {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50%      { transform: translateY(-8px) rotate(-10deg); }
}
.wl-how__mark--2  { animation: wl-плыв-вниз 3s linear infinite; }
.wl-how__mark--3a { animation: wl-плыв-вверх 3s linear infinite; }
.wl-how__mark--3b { animation: wl-плыв-вниз-8 3s linear infinite; }
.wl-how__mark--4  { animation: wl-плыв-вниз 3s linear infinite; }

/* Пятый и шестой блоки «как проходит обучение» — та же машинка, свои
   координаты: заголовок в две строки и текст ниже обычного. */
.wl-how__h--two { top: 215px; max-width: 397px; }
.wl-how__h--six { top: 193px; max-width: 370px; }
.wl-how__t--low5 { top: 343px; }
.wl-how__t--six { top: 322px; }
.wl-how__media--video5 { left: 597px; top: 194px; width: 625px; height: 342px; background: #000; }
.wl-how__shot { position: absolute; max-width: none; }
.wl-how__shot--a {
  left: 494px;
  top: 215px;
  width: 442px;
  height: 287px;
  animation: wl-плыв-вверх-10 3s linear infinite;
}
/* Чёрная плашка между скриншотами — в оригинале она есть и повёрнута
   вместе с правым снимком. */
.wl-how__bar {
  position: absolute;
  left: 910px;
  top: 232px;
  width: 56px;
  height: 251px;
  background: #000;
  transform: rotate(8deg);
  /* Полоса не чёрная плашка, а мягкая тень между снимками: в оригинале на
     ней blur 25. Без него получался резкий прямоугольник. */
  filter: blur(25px);
}
.wl-how__shot--b {
  left: 800px;
  top: 218px;
  width: 442px;
  height: 376px;
  animation: wl-плыв-вниз-8 3s linear infinite;
}

/* Седьмой блок — переписка студента с куратором. В оригинале пузыри лежат
   двумя группами: пять сообщений (канва x 820, кроме ответа куратора —
   он на 915) и поверх них самолётик со щитом (канва x 761). Числа ниже —
   координаты боевой при clientWidth 1425 минус 102, левый край
   контейнера; высоты — рендер по пропорциям файлов, а не округления,
   которые Тильда держит в data-field-height-value. */
.wl-how__h--seven { top: 193px; max-width: 398px; }
.wl-how__t--seven { top: 322px; }
.wl-how__msg { position: absolute; left: 733px; }
.wl-how__msg--1 { top: 118px; width: 353px; height: 123px; --d: .1s; }
.wl-how__msg--2 { top: 249px; width: 338px; height: 98px; --d: .2s; }
.wl-how__msg--3 { top: 355px; width: 302px; height: 72px; --d: .3s; }
.wl-how__msg--4 { left: 829px; top: 436px; width: 392px; height: 99px; --d: .4s; }
.wl-how__msg--5 { top: 543px; width: 353px; height: 73px; --d: .5s; }
.wl-how__plane { position: absolute; left: 1046px; top: 244px; width: 94px; height: 116px; --d: .7s; }
.wl-how__shield { position: absolute; left: 673px; top: 457px; width: 129px; height: 129px; --d: .7s; }

/* ── Закрытый клуб выпускников ─────────────────────────────────────────
   В оригинале блок разрезан надвое: зеро-блок 653 px и хвост 33 px, по
   которым продолжается одна и та же тёмная плита со скруглённым низом
   (675 px канвы = 687 живых). Верстаем одной секцией 686 px.

   Плита кладётся отдельным слоем, а не фоном секции: скругление снизу
   должно открывать белое, как в оригинале, где артборд под ней белый.
   Телефон обрезается на 653 — ровно там, где его режет артборд оригинала
   (`overflow: hidden` у `.t396__artboard`), поэтому у содержимого свой
   слой-обрезка, а не одна общая высота. */
.wl-club {
  position: relative;
  height: 686px;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.wl-club::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 0 0 54px 54px;
}
.wl-club__clip { position: relative; height: 653px; overflow: hidden; }
.wl-club__clip .wrap { position: relative; height: 100%; z-index: 2; }

.wl-club__h {
  position: absolute;
  left: 0;
  top: 194px;
  max-width: 292px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1.5px;
}
.wl-club__t {
  position: absolute;
  left: 0;
  top: 323px;
  width: 534px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -.7px;
}
.wl-club__phone { position: absolute; left: 649px; top: 102px; width: 501px; height: 944px; }
/* Ролик в экране макета — фоновый: без звука, по кругу, без органов
   управления. Кнопки «play» здесь быть не должно. */
.wl-club__screen {
  position: absolute;
  left: 704px;
  top: 133px;
  width: 402px;
  height: 870px;
  border-radius: 56px 57px 57px 56px;
  object-fit: cover;
  background: #000;
}

/* ── Твоё резюме после обучения ────────────────────────────────────────
   Светлая карточка 1222×1214 внутри контейнера, в ней всё лежит на своих
   координатах — как и в оригинале. Отсчёт внутри карточки от её угла,
   поэтому числа тут меньше снятых с артборда ровно на 102 и 201. */
.wl-cv { position: relative; height: 1415px; background: #fff; color: var(--ink); }
.wl-cv .wrap { position: relative; height: 100%; }
/* Заголовок в оригинале НЕ по центру: элемент прижат к left 342 канвы и
   сжат по тексту, из-за чего стоит на 8 px левее середины артборда.
   Повторяем как есть — центрирование увело бы его вправо. */
.wl-cv__title {
  position: absolute;
  left: 246px;
  top: 99px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 55px;
  letter-spacing: -1.5px;
  white-space: nowrap;
}
.wl-cv__card {
  position: absolute;
  left: 0;
  top: 201px;
  width: 1222px;
  height: 1214px;
  border-radius: 31px;
  background: #f5f5f8;
  /* Обводка 5 px цвета #6c63ff — того же, что у плашек навыков внутри.
     Рисуем внутренней тенью, а не рамкой: всё содержимое карточки
     позиционировано абсолютно от её края, и настоящий border сдвинул бы его
     на 5 px вправо и вниз — пришлось бы править два десятка координат. */
  box-shadow: inset 0 0 0 5px var(--violet);
}
.wl-cv__role {
  position: absolute;
  left: 41px;
  top: 35px;
  width: 538px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
/* Лаймовая заливка лежит ПОД «от 80 000» и закрывает только число. */
.wl-cv__hl {
  position: absolute;
  left: 74px;
  top: 141px;
  width: 120px;
  height: 26px;
  border-radius: 2px;
  background: var(--lime);
}
.wl-cv__sum,
.wl-cv__unit {
  position: absolute;
  top: 145px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 19px;
}
.wl-cv__sum { left: 41px; }
/* Между «от 80 000» и «на руки» стоит знак рубля — фигура 14×19. Раньше здесь
   было записано, что фигура пустая: в Тильде это `t-bgimg`, картинка у неё
   подгружается лениво, и при осмотре `background-image` действительно был
   `none`. Настоящий адрес лежит в `data-original` — SVG со знаком рубля.
   Урок общий: у Тильды пустая на вид фигура ещё не пустая, смотреть надо
   атрибут, а не вычисленный стиль. */
.wl-cv__unit { left: 200px; }
/* Знак рубля картинкой, а не символом: в PPNeueMachina глифа ₽ нет — вместо
   него пустой прямоугольник. Ровно та же причина, по которой значки рубля в
   блоке «рост дохода» лежат отдельными файлами. */
.wl-rub {
  display: inline-block;
  width: 15px;
  height: 19px;
  margin-left: 6px;
  vertical-align: baseline;
}
.wl-rub--cv { width: 14px; height: 18px; margin-left: 7px; }
/* Круглый фоновый ролик: без звука, по кругу, без органов управления. */
.wl-cv__video {
  position: absolute;
  left: 875px;
  top: 35px;
  width: 305px;
  height: 305px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
}
.wl-cv__h {
  position: absolute;
  left: 41px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1.5px;
}
.wl-cv__h--stack { top: 215px; }
.wl-cv__h--do { top: 456px; }

.wl-cv__row {
  position: absolute;
  left: 41px;
  display: flex;
  gap: 7.1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-cv__row--1 { top: 269px; }
.wl-cv__row--2 { top: 305px; }
.wl-cv__row--3 { top: 341px; }
.wl-cv__row--4 { top: 376px; }
.wl-cv__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  border-radius: 3px;
  background: var(--violet);
  color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -.5px;
}
/* Ширины плашек в оригинале фиксированные, а не по тексту, и от них зависят
   все отступы в ряду — поэтому проставлены поимённо, а не отданы контенту. */
.wl-cv__row--1 .wl-cv__chip:nth-child(1) { width: 136px; }
.wl-cv__row--1 .wl-cv__chip:nth-child(2) { width: 463px; }
.wl-cv__row--2 .wl-cv__chip:nth-child(1) { width: 84px; }
.wl-cv__row--2 .wl-cv__chip:nth-child(2) { width: 132px; }
.wl-cv__row--2 .wl-cv__chip:nth-child(3) { width: 86px; }
.wl-cv__row--2 .wl-cv__chip:nth-child(4) { width: 222px; }
.wl-cv__row--2 .wl-cv__chip:nth-child(5) { width: 122px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(1) { width: 54px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(2) { width: 56px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(3) { width: 61px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(4) { width: 95px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(5) { width: 112px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(6) { width: 47px; }
.wl-cv__row--3 .wl-cv__chip:nth-child(7) { width: 122px; }
.wl-cv__row--4 .wl-cv__chip:nth-child(1) { width: 120px; }
.wl-cv__row--4 .wl-cv__chip:nth-child(2) { width: 120px; }
.wl-cv__row--4 .wl-cv__chip:nth-child(3) { width: 127px; }

/* Ширины плашек курса Linux — свой набор навыков, снят поэлементно с боевой
   (щупом по текстам плашек). Без этого сюда доезжали ширины Windows+Linux
   и «Ubuntu» растягивалась на 463px, роняя всю сетку. */
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(1) { width: 111px; }
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(2) { width: 84px; }
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(3) { width: 61px; }
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(4) { width: 112px; }
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(5) { width: 56px; }
.page-linux .wl-cv__row--1 .wl-cv__chip:nth-child(6) { width: 94px; }
.page-linux .wl-cv__row--2 .wl-cv__chip:nth-child(1) { width: 104px; }
.page-linux .wl-cv__row--2 .wl-cv__chip:nth-child(2) { width: 164px; }
.page-linux .wl-cv__row--2 .wl-cv__chip:nth-child(3) { width: 156px; }
.page-linux .wl-cv__row--2 .wl-cv__chip:nth-child(4) { width: 47px; }
.page-linux .wl-cv__row--3 .wl-cv__chip:nth-child(1) { width: 124px; }
.page-linux .wl-cv__row--3 .wl-cv__chip:nth-child(2) { width: 122px; }
.page-linux .wl-cv__row--3 .wl-cv__chip:nth-child(3) { width: 120px; }
.page-linux .wl-cv__row--3 .wl-cv__chip:nth-child(4) { width: 128px; }

.wl-cv__do {
  position: absolute;
  left: 41px;
  top: 510px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -.5px;
}
.wl-cv__do li { position: relative; margin-top: 7.63px; padding-left: 25px; }
.wl-cv__do li:first-child { margin-top: 0; }
/* Галочка — тот же файл, что у списков выше по странице. */
.wl-cv__do li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 12px;
  background: url('/img/wl/check.svg') no-repeat center / contain;
}
.wl-cv__strip {
  position: absolute;
  left: 10px;
  top: 1052px;
  width: 1201px;
  height: 152px;
  border-radius: 20px;
  background: var(--lime);
}
.wl-cv__note {
  position: absolute;
  left: 41px;
  top: 1078px;
  width: 842px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -.5px;
}

/* ── Сертификат ────────────────────────────────────────────────────── */
.wl-cert { position: relative; height: 509px; background: #fff; color: var(--ink); }
.wl-cert .wrap { position: relative; height: 100%; }
.wl-cert__h {
  position: absolute;
  left: 0;
  top: 122px;
  width: 595px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.wl-cert__t {
  position: absolute;
  left: 0;
  top: 287px;
  width: 557px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -.7px;
}
.wl-cert__shot {
  position: absolute;
  left: 623px;
  top: 102px;
  width: 599px;
  height: 407px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wl-cert__shot img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }

/* ── Форматы участия ───────────────────────────────────────────────────
   Тёмная плита со скруглением сверху лежит поверх белого артборда — так же,
   как у первого экрана и клуба выпускников. Две карточки пакетов внутри
   расставлены по координатам оригинала.

   ⚠️ Четыре кнопки оплаты: slug, сумма и заголовок сняты с боевой поимённо.
   Сервер берёт цену из своего каталога по slug, сумма в разметке нужна
   только для показа в окне. Ошибка здесь — потерянный платёж. */
.wl-plans { position: relative; height: 1449px; background: #fff; color: var(--ink); }
.wl-plans::before {
  content: '';
  position: absolute;
  inset: 102px 0 0;
  background: var(--bg);
  border-radius: 54px 54px 0 0;
}
.wl-plans .wrap { position: relative; height: 100%; z-index: 1; }
.wl-plans__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 173px;
  margin: 0;
  color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  /* Светлое начертание — здесь оно тоньше, чем у прочих заголовков страницы. */
  font-weight: 300;
  line-height: 55px;
  letter-spacing: -1.5px;
  text-align: center;
}

.wl-plan {
  position: absolute;
  top: 270px;
  width: 599px;
  height: 1180px;
  border-radius: 31px;
  background: #f5f5f8;
}
.wl-plan--1 { left: 0; }
/* Второй пакет в оригинале обведён рамкой 5 px цвета #6c63ff — так он выделен
   из двух; у первого рамки нет. Тень вместо border по той же причине, что и у
   карточки резюме: содержимое позиционировано абсолютно от края карточки. */
.wl-plan--2 { left: 623px; box-shadow: inset 0 0 0 5px var(--violet); }
/* У Linux пакет один, и в оригинале он обведён той же рамкой, что выделенный
   из двух на курсе Windows+Linux. */
.page-linux .wl-plan--1 { box-shadow: inset 0 0 0 5px var(--violet); }
.wl-plan__name {
  position: absolute;
  left: 30px;
  top: 40px;
  width: 492px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.wl-plan--2 .wl-plan__name { width: 470px; }
.wl-plan__badge { position: absolute; left: 493px; top: 40px; width: 75px; height: 87px; }

.wl-plan__chips {
  position: absolute;
  left: 30px;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-plan--1 .wl-plan__chips--1 { top: 181px; gap: 11px; }
.wl-plan--1 .wl-plan__chips--2 { top: 220px; }
.wl-plan--2 .wl-plan__chips--1 { top: 181px; gap: 8px; }
.wl-plan--2 .wl-plan__chips--2 { top: 218px; gap: 8px; }
.wl-plan--2 .wl-plan__chips--3 { top: 254px; }
.wl-plan--2 .wl-plan__chip { line-height: 26px; }
.wl-plan__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  border-radius: 3px;
  background: var(--violet);
  color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -.5px;
}
/* Бледная плашка совпадает с фоном карточки — видно только рамку и текст.
   В оригинале ровно так же. */
.wl-plan__chip--pale { background: #f5f5f8; color: var(--ink); border: 1px solid #4b4b4b; }
.wl-plan--1 .wl-plan__chips--1 li:nth-child(1) { width: 181px; }
.wl-plan--1 .wl-plan__chips--1 li:nth-child(2) { width: 184px; }
.wl-plan--1 .wl-plan__chips--2 li { width: 270px; }
.wl-plan--2 .wl-plan__chips--1 li:nth-child(1) { width: 375px; }
.wl-plan--2 .wl-plan__chips--1 li:nth-child(2) { width: 29px; }
.wl-plan--2 .wl-plan__chips--2 li:nth-child(1) { width: 270px; }
.wl-plan--2 .wl-plan__chips--2 li:nth-child(2) { width: 117px; }
.wl-plan--2 .wl-plan__chips--3 li { width: 270px; }

.wl-plan__list {
  position: absolute;
  left: 31px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.5px;
}
.wl-plan--1 .wl-plan__list { top: 274px; }
.wl-plan--2 .wl-plan__list { top: 308px; }
.wl-plan__list li { position: relative; margin-top: 10.6px; padding-left: 26px; }
.wl-plan__list li:first-child { margin-top: 0; }
.wl-plan__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 12px;
  background: url('/img/wl/check.svg') no-repeat center / contain;
}

/* Иконка «i» стоит сразу за текстом строки, в 7 px от него. Обёртка ровно
   в высоту строки, чтобы иконка 31 px не растягивала список. */
.wl-plan__tip {
  position: relative;
  display: inline-block;
  width: 31px;
  height: 26px;
  margin-left: 7px;
  vertical-align: top;
}
.wl-plan__tip .wl-tip__btn { left: 0; top: -2px; width: 31px; height: 31px; }
.wl-plan__tip .wl-tip__btn img { width: 31px; height: 31px; }
.wl-plan__tip .wl-tip { bottom: calc(100% + 7px); }
.wl-plan__tip--1 .wl-tip { left: -240px; width: 455px; }
.wl-plan__tip--2 .wl-tip { left: -174px; width: 379px; }
.wl-plan__tip--3 .wl-tip { left: -200px; width: 431px; }
.wl-tip--dark {
  padding: 25px 26px 18px;
  background: var(--ink);
  color: #fff;
  line-height: 22px;
}
.wl-tip__p { display: block; }
.wl-tip__p + .wl-tip__p { margin-top: 10px; }
.wl-tip--dark a { color: var(--lime); text-decoration: underline; }

.wl-plan__old,
.wl-plan__per {
  position: absolute;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 19px;
}
.wl-plan__old { left: 30px; top: 642px; }
.wl-plan__per { top: 688px; font-family: 'RobotoFlex', system-ui, sans-serif; letter-spacing: -.5px; }
/* Знак рубля стоит перед «/мес*» вплотную, поэтому левый край строки
   отодвинут на его ширину: в оригинале рубль начинается на 298 и 287, а сами
   «/мес*» — на 312 и 301. */
.wl-plan--1 .wl-plan__per { left: 298px; }
.wl-plan--2 .wl-plan__per { left: 287px; }
.wl-plan__per .wl-rub { margin-left: 0; }
.wl-plan__price {
  position: absolute;
  left: 30px;
  top: 667px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -2px;
}
.wl-plan__foot {
  position: absolute;
  left: 30px;
  top: 733px;
  margin: 0;
  color: #61646b;
  font-size: 20px;
  line-height: 16px;
  letter-spacing: -.5px;
}

.wl-plan__btn {
  position: absolute;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 538px;
  height: 71px;
  border: 0;
  border-radius: 10px;
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
  text-align: center;
  cursor: pointer;
}
.wl-plan__btn--blue { top: 800px; background: var(--blue); color: #fff; }
.wl-plan__btn--lime { top: 881px; background: var(--lime); color: #3a3a3a; }
.wl-plan__btn--pale { top: 963px; background: #f5f5f8; color: var(--ink); border: 1px solid #4b4b4b; }

.wl-plan__pay {
  position: absolute;
  left: 30px;
  top: 1065px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wl-plan__pay img { display: block; }

/* ── Способы оплаты ────────────────────────────────────────────────── */
.wl-pay2 { position: relative; height: 603px; background: var(--bg); color: #fff; }
.wl-pay2 .wrap { position: relative; height: 100%; }
.wl-pay2__card { position: absolute; border-radius: 20px; }
.wl-pay2__card--bank    { left: 0;     top: 102px; width: 599px; height: 278px; background: var(--blue); }
.wl-pay2__card--inhouse { left: 623px; top: 102px; width: 599px; height: 241px; background: var(--card); }
.wl-pay2__card--tax     { left: 0;     top: 404px; width: 599px; height: 199px; background: #f5f5f8; color: var(--ink); }
.wl-pay2__card--abroad  { left: 623px; top: 367px; width: 599px; height: 235px; background: var(--card); overflow: hidden; }

.wl-pay2__h {
  position: absolute;
  left: 41px;
  top: 35px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1px;
}
.wl-pay2__t {
  position: absolute;
  left: 41px;
  top: 89px;
  /* Коробка в оригинале 336, но там строка «0-10% переплата от известных
     банков» в неё не влезает и ложится в две. У нас кегль на 1.8 % мельче
     (см. «Состояние переноса»), и та же строка влезает в одну. Сужаем до
     333, чтобы перенос встал там же, где в оригинале — после «известных».
     Если кегль когда-нибудь поправят по всей странице, вернуть 336. */
  width: 333px;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.7px;
}
.wl-pay2__card--inhouse .wl-pay2__h { width: 341px; }
.wl-pay2__card--inhouse .wl-pay2__t { top: 129px; width: 283px; }
.wl-pay2__card--abroad .wl-pay2__h { width: 393px; }
.wl-pay2__t--abroad { top: 124px; width: 451px; }
.wl-pay2__h--tax { left: 193px; top: 36px; width: 326px; line-height: 30px; }
.wl-pay2__t--tax { left: 193px; top: 87px; width: 336px; }
/* Ссылка внутри абзаца, а не кнопка: кнопка — inline-block, целиком уходит
   на новую строку и ломает перенос (абзац разъезжался на три строки вместо
   двух). Окно открывает тот же обработчик по data-fb-open. */
.wl-pay2__t a { color: inherit; text-decoration: underline; cursor: pointer; }

/* Логотипы банков: пять плашек 51×51 с шагом 55.7 и шестая — кнопка списка. */
.wl-pay2__banks {
  position: absolute;
  left: 41px;
  top: 176px;
  display: flex;
  gap: 4.7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-pay2__banks li {
  position: relative;
  width: 51px;
  height: 51px;
  border-radius: 10px;
  overflow: hidden;
}
.wl-pay2__banks img { width: 100%; height: 100%; object-fit: contain; }
/* У двух логотипов подложка белая, а сам знак меньше плашки. */
.wl-pay2__bank--pad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.wl-pay2__bank--pad img { width: 35px; height: 33px; }
/* ⚠️ Ровно li.…: правило `.wl-pay2__banks li` выше сильнее классового
   (0,1,1 против 0,1,0), и с простым `.wl-pay2__more` этот overflow НИКОГДА
   не применялся — панель банков обрезалась в ноль на всех ширинах, хотя
   по`hidden`, размерам и координатам выглядела открытой. */
.wl-pay2__banks li.wl-pay2__more { overflow: visible; }
.wl-pay2__more .wl-tip__btn { left: 0; top: 0; width: 51px; height: 51px; }
.wl-pay2__more .wl-tip__btn img { width: 51px; height: 51px; }
/* Список банков всплывает над плашками, как в оригинале. */
.wl-tip--banks {
  left: -119px;
  bottom: calc(100% + 8px);
  width: 290px;
  padding: 25px 26px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.wl-pay2__pic { position: absolute; left: 401px; top: 0; width: 185px; height: 204px; }
.wl-pay2__bg { position: absolute; left: 0; top: 0; width: 599px; height: 210px; border-radius: 20px; object-fit: cover; }
.wl-pay2__card--abroad .wl-pay2__h,
.wl-pay2__card--abroad .wl-pay2__t { z-index: 1; }
.wl-pay2__plate {
  position: absolute;
  left: 41px;
  top: 36px;
  width: 112px;
  height: 112px;
  border-radius: 15px;
  background: #fff;
}
.wl-pay2__fns { position: absolute; left: 56px; top: 50px; width: 81px; height: 85px; object-fit: contain; }

/* ── Гарантии ──────────────────────────────────────────────────────── */
.wl-guar { position: relative; height: 674px; background: var(--bg); color: #fff; }
.wl-guar .wrap { position: relative; height: 100%; }
.wl-guar__card { position: absolute; border-radius: 20px; }
.wl-guar__card--back  { left: 0;     top: 102px; width: 776px; height: 237px; background: var(--card); }
.wl-guar__card--job   { left: 0;     top: 363px; width: 776px; height: 312px; background: var(--card); }
.wl-guar__card--money { left: 800px; top: 102px; width: 421px; height: 570px; background: var(--blue); }
.wl-guar__plate {
  position: absolute;
  left: 41px;
  top: 35px;
  width: 151px;
  height: 151px;
  border-radius: 15px;
  background: #3e3e3e;
}
.wl-guar__icon { position: absolute; left: 70px; top: 65px; width: 92px; height: 92px; }
.wl-guar__h {
  position: absolute;
  left: 232px;
  top: 35px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1px;
}
.wl-guar__card--job .wl-guar__h { left: 41px; top: 36px; }
.wl-guar__h--money { left: 41px; top: 418px; width: 354px; }
.wl-guar__t {
  position: absolute;
  left: 232px;
  top: 94px;
  width: 395px;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.7px;
}
.wl-guar__t--wide { left: 41px; top: 95px; width: 655px; }
.wl-guar__link {
  position: absolute;
  left: 41px;
  top: 233px;
  color: var(--lime);
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -.7px;
}
.wl-guar__coin { position: absolute; width: 117px; height: 117px; }
.wl-guar__coin--1 { left: 186px; top: 44px; }
.wl-guar__coin--2 { left: 251px; top: 82px; }

/* ── Мини-курс ─────────────────────────────────────────────────────── */
.wl-mini { position: relative; height: 657px; background: var(--bg); color: var(--ink); overflow: hidden; }
.wl-mini__slab {
  position: absolute;
  left: 50%;
  top: 102px;
  width: 1358px;
  margin-left: -679px;
  height: 556px;
  border-radius: 30px;
  background: var(--lime);
}
.wl-mini .wrap { position: relative; height: 100%; z-index: 1; }
/* Обращение на «вы» — только для телефона, см. разметку. */
.wl-mini__вы { display: none; }
.wl-mini__h {
  position: absolute;
  left: 0;
  top: 173px;
  width: 525px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  /* 45, а не 44: в оригинале это три отдельных элемента с шагом 45. */
  line-height: 45px;
  letter-spacing: -1.5px;
}
.wl-mini__t {
  position: absolute;
  left: 0;
  top: 383px;
  width: 401px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -.7px;
}
.wl-mini__btn {
  position: absolute;
  left: 0;
  top: 486px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 398px;
  height: 71px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
}
.wl-mini__frame { position: absolute; left: 591px; top: 153px; width: 630px; height: 441px; max-width: none; }
/* Ролик лежит в «экране» рамки — фоновый, без органов управления. */
.wl-mini__video {
  position: absolute;
  left: 615px;
  top: 173px;
  width: 584px;
  height: 412px;
  border-radius: 15px;
  object-fit: cover;
  background: #000;
}

/* ── Вопрос-ответ ──────────────────────────────────────────────────── */
.wl-faq { position: relative; height: 1433px; background: var(--bg); color: #fff; }
.wl-faq .wrap { position: relative; height: 100%; }
.wl-faq__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 99px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 55px;
  letter-spacing: -1.5px;
  text-align: center;
}
.wl-faq__list { position: absolute; left: 31px; top: 198px; width: 1160px; }
.wl-faq__item { border-radius: 20px; background: #373737; }
.wl-faq__item + .wl-faq__item { margin-top: 4.6px; }
.wl-faq__q {
  position: relative;
  padding: 25px 88px 25px 30px;
  cursor: pointer;
  list-style: none;
  font-size: 24px;
  font-weight: 400;
  /* В правилах Тильды 33.6, но там они до масштабирования: живая строка
     34.2, и свёрнутый пункт выходит ровно 84. С 33.6 у нас получалось 83.6,
     и за четырнадцать пунктов список недобирал 5 px. */
  line-height: 34px;
  letter-spacing: -1px;
}
.wl-faq__q::-webkit-details-marker { display: none; }
/* Кружок с плюсом справа — тот же, что у модулей программы. */
.wl-faq__q::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 22px 1px no-repeat,
    linear-gradient(#fff, #fff) center / 1px 22px no-repeat,
    #1b1b1b;
  transition: transform .2s ease, background-color .2s ease-in-out;
}
.wl-faq__q:hover::after { background-color: var(--blue); }
.wl-faq__item[open] .wl-faq__q::after { transform: rotate(45deg); }
.wl-faq__a {
  margin: 0;
  padding: 0 30px 25px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.7px;
}

/* ── Форма «вопрос» ────────────────────────────────────────────────── */
.wl-ask { position: relative; height: 929px; background: var(--bg); color: #fff; overflow: hidden; }
.wl-ask__slab {
  position: absolute;
  left: 50%;
  top: 102px;
  width: 1358px;
  margin-left: -679px;
  height: 726px;
  border-radius: 30px;
  background: var(--blue);
}
.wl-ask .wrap { position: relative; height: 100%; z-index: 1; }
.wl-ask__photo { position: absolute; left: -73px; top: 121px; width: 634px; height: 698px; max-width: none; }
.wl-ask__deco { position: absolute; }
/* Дальние вопросительные знаки размыты — так они уходят на задний план.
   Числа с оригинала: 4 у маленького, 2 у среднего, у большого фильтра нет. */
.wl-ask__deco--1 { left: -14px; top: 241px; width: 81px; height: 94px; filter: blur(4px); }
.wl-ask__deco--2 { left: 382px; top: 165px; width: 111px; height: 128px; filter: blur(2px); }
.wl-ask__deco--3 { left: 353px; top: 465px; width: 149px; height: 171px; }
.wl-ask__card {
  position: absolute;
  left: 107px;
  top: 642px;
  width: 291px;
  height: 118px;
  padding: 19px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.wl-ask__name {
  display: block;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.5px;
}
.wl-ask__role {
  display: block;
  margin-top: 8px;
  width: 240px;
  color: #61646b;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -.5px;
}
.wl-ask__h {
  position: absolute;
  left: 622px;
  top: 137px;
  width: 598px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1.5px;
}
.wl-ask__form { position: absolute; left: 622px; top: 336px; width: 600px; }
.wl-ask__field {
  display: block;
  width: 600px;
  height: 71px;
  margin-bottom: 21px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: #f5f5f8;
  color: var(--ink);
  font-family: 'RobotoFlex', system-ui, sans-serif;
  font-size: 18px;
}
/* resize: none — в оригинале уголка растяжения у поля нет, а у нас он
   вылезал в правом нижнем углу и был виден на сверке. */
.wl-ask__field--area { height: 87px; padding: 24px; resize: none; }
.wl-ask__check {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 17px;
}
.wl-ask__check a { text-decoration: underline; }
/* Без явного размера flex растягивал чекбокс на высоту двух строк текста
   (13x28) — браузер рисовал его сплющенным и тёмным. У боевой он 13x13. */
.wl-ask__check input { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.wl-ask__err { margin: 10px 0 0; color: #ffe0e0; font-size: 16px; }
.wl-ask__btn {
  position: absolute;
  left: 0;
  top: 353px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 71px;
  border: 0;
  border-radius: 10px;
  background: var(--lime);
  color: var(--ink);
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
  cursor: pointer;
}
/* Экран успеха — окно поверх страницы, как в оригинале. */
/* Панель 682×458: текст с 80, кнопка с 298, снизу 90 — числа с оригинала. */
.wl-ok {
  position: relative;
  width: 682px;
  max-width: calc(100% - 40px);
  padding: 80px 40px 90px;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}
.wl-ok__t {
  /* В оригинале коробка 538, и «Вопрос успешно отправлен!» влезает в неё
     впритык. У нас та же строка выходит 538.2 и срывается на вторую —
     поэтому по 28, а не по 32: четыре пикселя запаса с каждой стороны. */
  margin: 0 28px 50px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: -1px;
}
.wl-ok__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 602px;
  max-width: 100%;
  height: 70px;
  margin: 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   Курс «Основы администрирования сетевых устройств MikroTik»
   /courses/sys-admin-mikrotik

   Первый экран здесь устроен как на больших курсах — те же панели и те же
   карточки навыков, файлы совпадают по хешам, — поэтому переиспользуются
   классы `wl-hero`, `wl-panels`, `wl-skills`, `wl-tip`, а ниже только
   отличия: строка меты картинкой, два пункта вместо одного лида, свои
   координаты фото и заголовка. Спикеры и формат участия взяты со страницы
   Zabbix: там координаты совпадают до десятых.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Первый экран ──────────────────────────────────────────────────── */
/* ⚠️ Поля обнуляем: у `.wl-hero` они набирают высоту секции (117 сверху,
   102 снизу), а здесь координаты абсолютные и от них считается всё
   остальное — с полями страница уезжала вниз на 82. Секция тёмная целиком,
   без отдельной плиты со скруглением, как на больших курсах. */
.mt-hero {
  height: 1472px;
  padding: 0;
  background: var(--bg);
}
.mt-hero .wrap { position: relative; height: 100%; z-index: 2; }
.mt-hero__meta { position: absolute; left: 0; top: 117px; width: 401px; height: 23px; }
.mt-hero__kicker {
  position: absolute;
  left: 0;
  top: 239px;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: -0.5px;
}
.mt-hero__title {
  position: absolute;
  left: 0;
  top: 280px;
  width: 708px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 50px;
  letter-spacing: -1.5px;
}
.mt-hero__leads { margin: 0; padding: 0; list-style: none; }
.mt-hero__lead {
  position: absolute;
  left: 25px;
  width: 503px;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
  letter-spacing: -0.5px;
}
.mt-hero__lead:nth-child(1) { top: 411px; }
.mt-hero__lead:nth-child(2) { top: 491px; }
.mt-hero__lead img { position: absolute; left: -25px; top: 11px; }
.mt-hero__cta { position: absolute; left: 0; top: 605px; display: flex; gap: 15px; }
.mt-hero__cta .btn {
  height: 71px;
  min-height: 0;
  border-radius: 10px;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: -1px;
}
.mt-hero__cta .btn--lime { width: 326px; }
.mt-hero__cta .btn--dark { width: 360px; }
/* Фото уходит за правый край плиты и обрезается ею. */
.mt-hero__pic { position: absolute; left: 747px; top: 136px; width: 543px; height: 720px; }
/* Панели и лента навыков стоят ниже, чем на больших курсах: там первый экран
   1456, здесь 1472, и своя высота у заголовка. */
.mt-hero .wl-panels { top: 785px; }
/* top у картинок написан для героя Windows+Linux и считается уже от
   сдвинутого контейнера — без обнуления панели уезжали на 770px ниже
   и прятались под «Программу курса» */
.mt-hero .wl-panels__back { top: 0; }
.mt-hero .wl-panels__front { top: 61px; }
/* Лента навыков ставится по замеру: заголовок на 976, карточки на 1064.
   Поле 243 сверху у `.wl-skills__h` — от больших курсов, там другой ритм;
   здесь его снимаем, иначе карточки уезжают на 224 вниз. */
.mt-hero .wl-skills { margin-top: -496px; }
.mt-hero .wl-skills__h { padding: 0; margin: 0; }
.mt-hero .wl-skills__list { margin-top: 51px; }

/* ── Программа курса ───────────────────────────────────────────────── */
/* Третий способ собрать программу на этом сайте: плашка на модуль, шеврон
   справа, у последнего модуля всё синее вместо серого. Раскрытая часть —
   плита #1e1e1e внутри плашки #3a3a3a, с полями 10 и радиусом 15. */
.mt-program { background: var(--bg); padding: 92px 0 60px; }
.mt-program__h {
  margin: 0 0 51px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 55px;
  letter-spacing: -1.5px;
}
/* Шаг между модулями в оригинале 94 при плашке 88.6 — значит зазор 5.4, а
   не круглые 10: с ними десятый модуль уезжал на 46 вниз. */
.mt-mod { margin-bottom: 5.4px; border-radius: 15px; background: #3a3a3a; }
.mt-mod--blue { background: #3da4ff; }
.mt-mod__t {
  position: relative;
  padding: 27px 90px 28px 30px;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 33px;
  letter-spacing: -1px;
  cursor: pointer;
  list-style: none;
}
.mt-mod__t::-webkit-details-marker { display: none; }
/* Шеврон — картинка в квадрате со скруглением; поворачивается при раскрытии.
   Стоит абсолютом, чтобы не влиять на высоту плашки (88.6 у оригинала). */
.mt-mod__t::after {
  content: '';
  position: absolute;
  right: 31px;
  top: 24px;
  width: 41px;
  height: 41px;
  border-radius: 5px;
  background: var(--bg) url('/img/mt/chevron.svg') no-repeat center / 21px 12px;
  transition: transform .2s ease-in-out;
}
.mt-mod--blue .mt-mod__t::after { background-color: var(--blue); }
.mt-mod[open] .mt-mod__t::after { transform: rotate(180deg); }

/* Поля плиты сняты по элементам: сверху 18.3 до подзаголовка, слева 20.3,
   снизу 10.2 после плашки «Результат». */
.mt-mod__body {
  margin: 0 10px 0;
  padding: 18.3px 20.3px 10.2px;
  border-radius: 15px;
  background: var(--bg);
}
.mt-mod--blue .mt-mod__body { background: var(--blue); }
/* Строки внутри модуля идут с шагом 39.7 при высоте строки 33.6 — то есть
   зазор 5.5, а не встык. Подзаголовок отбит от предыдущего списка на 18.7. */
.mt-mod__lead {
  /* 10.6 — зазор от подзаголовка до первой строки списка. */
  margin: 0 0 10.6px;
  font-size: 24px;
  font-weight: 300;
  line-height: 33.6px;
  letter-spacing: -0.5px;
}
.mt-mod__list {
  margin: 0 0 18.7px;
  padding: 0;
  list-style: none;
  font-size: 24px;
  font-weight: 300;
  line-height: 33.6px;
  letter-spacing: -0.5px;
}
.mt-mod__list li { margin-bottom: 5.5px; }
/* Пункты «Чему вы научитесь» — со стрелкой и в колонке 980, а не во всю
   плиту: в оригинале у них своя ширина, и от неё зависит число строк. */
.mt-mod__list--arrow li { position: relative; max-width: 980px; padding-left: 25.5px; }
.mt-mod__list--arrow img { position: absolute; left: 0; top: 11px; }
.mt-mod__list:last-child { margin-bottom: 0; }

/* «Результат:» в оригинале не просто абзац, а СВЕТЛАЯ плашка #f5f5f8 с
   тёмным текстом: последний блок внутри модуля. Полей 20 по бокам и 18
   сверху, радиус 5. Стрелок в этом блоке нет. */
.mt-mod__body > .mt-mod__lead:last-of-type,
.mt-mod__result {
  margin: 0;
}
.mt-mod__result {
  padding: 18.3px 20.3px 20.4px;
  border-radius: 5px;
  background: #f5f5f8;
  color: var(--ink);
}
.mt-mod__result .mt-mod__lead { margin-bottom: 10.6px; }
.mt-mod__result .mt-mod__list { margin: 0; }

/* ── Спикеры: две пары вместо одной ────────────────────────────────── */
/* Оформление берётся у страницы Zabbix, здесь только раскладка пар: фото и
   карточка внутри пары считаются от её верха, а не от верха секции. */
/* .zx-speaker ниже по файлу задаёт height: 733px той же силы — без второго
   класса это правило проигрывало и вторая пара спикеров вылезала из секции */
.zx-speaker.mt-speaker { height: 1263px; }
.zx-speaker__pair { position: absolute; left: 0; width: 1221px; height: 495px; }
.mt-speaker .zx-speaker__pair:nth-of-type(1) { top: 188px; }
.mt-speaker .zx-speaker__pair--mirror { top: 707px; }
.mt-speaker .zx-speaker__h { left: 427px; width: 368px; }
.mt-speaker .zx-speaker__photo,
.mt-speaker .zx-speaker__card { top: 0; }
/* Зеркальная пара: карточка слева, фото справа. */
.zx-speaker__pair--mirror .zx-speaker__photo { left: 727px; }
.zx-speaker__pair--mirror .zx-speaker__card { left: 0; }
.zx-speaker__pair--mirror .zx-speaker__name { left: 36px; top: 37px; }
.zx-speaker__pair--mirror .zx-speaker__role { left: 35px; top: 114px; width: 478px; }
.zx-speaker__pair--mirror .zx-speaker__list { left: 35px; top: 261px; width: 526px; }

/* Подвал на планшете.
   ⚠️ Сетка подвала жёсткая (360+392+222+247 = 1221) и ниже 1287 не
   помещалась — на 1024 страница уезжала вбок на 250 px, причём на всех трёх
   стендах; на боевой такого нет. Между 901 и 1260 кладём колонки в две.

   Диапазон ограничен снизу нарочно: правило лежит после блока
   @media (max-width: 900px), где подвал уже сложен в одну колонку, и без
   min-width оно перебивало его на телефоне — подвал становился в две
   колонки, чего в оригинале нет. */
@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; }
}

/* Блок «шансы» курса Linux на планшете.
   ⚠️ Ограничение min-width: 480 обязательно: ниже в файле у секции своя
   мобильная раскладка в канве 360, и без нижней границы эти правила
   перебивали её — специфичность с .page-linux выше, и секция разошлась с
   оригиналом на 53% вместо 6.7.

   А .page-linux нужен потому, что раздел курса Linux лежит НИЖЕ общего
   планшетного медиазапроса: при равной силе побеждали бы его десктопные
   координаты, снимок уезжал вправо до 1242, и страница уходила вбок на
   474 px при ширине 768. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .page-linux .lx-chance { height: auto; padding: 48px 0; }
  .page-linux .lx-chance .wrap { height: auto; }
  .page-linux .lx-chance__card,
  .page-linux .lx-chance__pic,
  .page-linux .lx-chance__h,
  .page-linux .lx-chance__t { position: static; }
  .page-linux .lx-chance__card { width: auto; margin-bottom: 16px; padding: 24px; }
  .page-linux .lx-chance__pic { width: 100%; height: auto; margin-top: 16px; }
  .page-linux .lx-chance__h, .page-linux .lx-chance__t { width: auto; }
  .page-linux .lx-chance__h { font-size: 30px; line-height: 34px; letter-spacing: -1px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Курс «Основы системы мониторинга IT-инфраструктуры Zabbix»
   /courses/zabbix-basic

   Страница короткая: первый экран, программа, спикер, формат участия и
   форма — пять секций против тридцати у больших курсов. Числа сняты с
   боевой при clientWidth 1425 и отсчитываются от левого края контейнера
   (он начинается на 102 при ширине 1221), а НЕ от канвы 1400: артборд
   Тильды масштабируется в 1.018, и канвовые числа на 2% меньше нужных.
   ══════════════════════════════════════════════════════════════════════ */

/* Заголовок формы на этой странице набран СВЕТЛЫМ начертанием (300), а на
   двух больших курсах — обычным (400). Проверено замером обоих: 40/40 с
   -1.5 у всех, разница только в весе. И на десктопе, и на телефоне. */
.page-zabbix .wl-ask__h,
.page-mikrotik .wl-ask__h { font-weight: 300; }  /* у Тильды на этих двух курсах Light, на Windows+Linux и Linux — Regular */

/* Подсветка в заголовках этого курса красная, а не синяя с лаймовой, как на
   курсах Windows+Linux и Linux. Поля и скругления свои: 5 px радиуса. */
.zx-mk { background: var(--blue); color: #fff; }
.zx-mk--red { background: #e20000; color: #fff; border-radius: 5px; }
/* Салатовая плашка у имени Брагина на MikroTik: класс был в разметке,
   а правила не было — имя красилось общим синим .zx-mk. */
.zx-mk--lime { background: var(--lime); color: var(--ink); }

/* ── Первый экран ──────────────────────────────────────────────────── */
/* ⚠️ Весь текст первого экрана набран СВЕТЛЫМ начертанием (300) — и
   заголовок, и надстрочник, и пункты. На больших курсах там обычное (400),
   и на глаз разница почти не видна, а по сверке даёт заметный процент:
   светлые буквы тоньше и строки ломаются в других местах. Внутри программы,
   спикера и пакета на этой же странице вес обычный — только hero и форма
   светлые. */
.zx-hero__title,
.zx-hero__kicker,
.zx-hero__lead { font-weight: 300; }

.zx-hero {
  position: relative;
  /* Снимок дашборда выходит за правый край контейнера и обрезается плитой,
     ровно как в оригинале. */
  overflow: hidden;
  height: 840px;
  background: var(--bg);
}
.zx-hero .wrap { position: relative; height: 100%; z-index: 2; }
.zx-hero > .wrap > img { position: absolute; }

/* Обе строки над заголовком — картинки с буквами в кривых: иконка и текст
   нарисованы одним файлом. Ширина берётся из замера живого элемента, а не
   из размеров файла: в оригинале SVG растянут. */
.zx-hero__start { left: 0; top: 117px; width: 242px; height: 26px; }
.zx-hero__modules { left: 277px; top: 117px; width: 185px; height: 26px; }
.zx-hero__presale { left: 986px; top: 110px; width: 296px; height: 52px; }

.zx-hero__kicker {
  position: absolute;
  left: 0;
  top: 239px;
  margin: 0;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: -0.5px;
}
.zx-hero__title {
  position: absolute;
  left: 0;
  top: 283px;
  width: 790px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 50px;
  letter-spacing: -1.5px;
}

/* Пункты — два независимых элемента в оригинале; у нас список с абсолютными
   позициями. Стрелка стоит у левого края контейнера, текст с отступом 25. */
.zx-hero__leads { margin: 0; padding: 0; list-style: none; }
.zx-hero__lead {
  position: absolute;
  left: 25px;
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.5px;
}
.zx-hero__lead:nth-child(1) { top: 411px; width: 657px; }
.zx-hero__lead:nth-child(2) { top: 491px; width: 744px; }
.zx-hero__lead img { position: absolute; left: -25px; top: 11px; }

.zx-hero__cta { position: absolute; left: 0; top: 605px; display: flex; gap: 15px; }
.zx-hero__cta .btn {
  height: 71px;
  min-height: 0;
  border-radius: 10px;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: -1px;
}
.zx-hero__cta .btn--lime { width: 326px; }
.zx-hero__cta .btn--dark { width: 360px; }
/* Вторая кнопка в оригинале не прозрачная, а залита цветом фона и обведена
   серым — то есть отличается от .btn--ghost больших курсов. */
.btn--dark { background: var(--bg); color: #fff; border: 1px solid #4b4b4b; }

.zx-hero__pic { left: 741px; top: 120px; width: 1048px; height: 741px; }
.zx-hero__logo { left: 826px; top: 337px; width: 204px; height: 204px; z-index: 2; }

/* ── Программа курса ───────────────────────────────────────────────── */
/* В оригинале блок T1119: заголовок слева, аккордеон справа. Секция —
   не артборд, высота набирается содержимым, поэтому здесь сетка. */
/* Числа сняты не с зеро-элементов, а с самих узлов блока T1119
   (scripts/замер-селекторов.py): контейнер 1200 с полями 30.5, две колонки
   по 560 и зазор 40. Кегль заголовка 42/52 без межбуквенного — то есть НЕ
   50/55 с -1.5, как в заголовках зеро-блоков этой же страницы. */
.zx-program { background: var(--bg); padding: 90px 0; }
.zx-program .wrap { display: flex; gap: 40px; padding: 0 30.5px; }
.zx-program__h {
  flex: 0 0 560px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: 0;
}
.zx-program__list { flex: 0 0 560px; }

.zx-mod { border-top: 1px solid #eee; }
.zx-mod:last-child { border-bottom: 1px solid #eee; }
/* Поля 28 сверху и 27 снизу — так у оригинала набирается высота модуля
   87.4 при строке 32.4. Кружок не увеличивает её: он ровно 40. */
.zx-mod__t {
  position: relative;
  /* 27 + 32.4 + 27 плюс верхняя линия дают 87.4 — высоту модуля у Тильды. */
  padding: 27px 50px 27px 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 24px;
  line-height: 32.4px;
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
}
.zx-mod__t::-webkit-details-marker { display: none; }
/* Текст заголовка в оригинале ограничен 510 при колонке 560: кружок стоит
   у правого края, а не вплотную к словам. Без этого предела «Модуль 5.
   Промежуточное тестирование» срывается на вторую строку — 496 доступных
   против 498.6 нужных, разница в два пикселя, а модуль становится выше. */
.zx-mod__t > span { display: block; max-width: 510px; }
/* Кружок с плюсом — тот же приём, что в вопросах-ответах на больших курсах:
   рисуем маской, чтобы не тянуть два файла под открытое и закрытое. */
/* Кружок стоит абсолютом и в высоту модуля не входит: в оригинале строка
   32.4 плюс поля 28 и 27 дают ровно 87.4, а кружок 40 центрируется поверх.
   В потоке он поднимал высоту до 95 — восемь лишних пикселей на каждом из
   десяти модулей. */
.zx-mod__t::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lime);
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-size: 22px 2px, 2px 22px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .2s ease-in-out;
}
/* Открытый модуль: вертикальная палочка исчезает, остаётся минус. */
.zx-mod[open] .zx-mod__t::after { background-size: 22px 2px, 0 0; }
.zx-mod--strong .zx-mod__t { font-weight: 700; }

/* Раскрытая часть модуля: в оригинале это один абзац 18/28 светлого
   начертания, белый, где подзаголовок — просто <strong> первой строкой.
   Поэтому у подзаголовка нет своего отступа снизу: строки идут подряд.
   Снизу у блока поле 40 (на телефоне 25). */
.zx-mod__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
/* Подзаголовок в оригинале не плашка, а лаймовые БУКВЫ — в отличие от
   больших курсов, где «Теория:» залита фоном. */
.zx-mod__lead--lime { color: var(--lime); }
.zx-mod ul {
  /* Поле снизу именно padding, а не margin: у <details> margin последнего
     ребёнка схлопывается за пределы блока, и раскрытый модуль выходил на 40
     ниже оригинала. */
  margin: 0;
  padding: 0 0 40px;
  list-style: none;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0;
  color: #fff;
}

/* ── Спикер курса ──────────────────────────────────────────────────── */
.zx-speaker { position: relative; height: 733px; background: #fff; color: var(--ink); }
.zx-speaker .wrap { position: relative; height: 100%; }
.zx-speaker__h {
  position: absolute;
  left: 427px;
  top: 72px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -1.5px;
}
.zx-speaker__photo {
  position: absolute;
  left: 0;
  top: 188px;
  width: 495px;
  height: 495px;
  border-radius: 24px;
  object-fit: cover;
}
.zx-speaker__card {
  position: absolute;
  left: 519px;
  top: 188px;
  width: 702px;
  height: 495px;
  border-radius: 20px;
  background: #f5f5f8;
}
.zx-speaker__name {
  position: absolute;
  left: 41px;
  top: 42px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1.5px;
}
.zx-speaker__role {
  position: absolute;
  left: 36px;
  top: 114px;
  width: 618px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: -1px;
}
.zx-speaker__list {
  position: absolute;
  left: 36px;
  top: 284px;
  width: 606px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Список опыта в оригинале серый (#61646b), а не цвета основного текста —
   как и сноска про рассрочку в пакете. */
.zx-speaker__list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 17px;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: #61646b;
}
.zx-speaker__list img { position: absolute; left: 0; top: 6px; }

/* ── Формат участия ────────────────────────────────────────────────── */
/* Пакет один, и устроен он двумя плитами: тёмная со списком лежит ниже и
   выступает из-под светлой с ценой. Порядок в разметке обратный — сначала
   тёмная, потом светлая, — чтобы светлая оказалась сверху без z-index. */
.zx-plans { position: relative; height: 1050px; background: var(--bg); }
.zx-plans .wrap { position: relative; height: 100%; }
.zx-plans__h {
  position: absolute;
  left: 0;
  top: 94px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 55px;
  letter-spacing: -1.5px;
}
.zx-plans__start { position: absolute; left: 0; top: 176px; width: 289px; height: 31px; }

.zx-plan__extra {
  position: absolute;
  left: 622px;
  top: 434px;
  width: 600px;
  height: 617px;
  border-radius: 20px;
  background: #3a3a3a;
}
.zx-plan__list { margin: 0; padding: 239px 30px 0; list-style: none; }
.zx-plan__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.5px;
  color: var(--muted);
}
.zx-plan__list img { position: absolute; left: 0; top: 7px; }

.zx-plan {
  position: absolute;
  left: 622px;
  top: 103px;
  width: 600px;
  height: 544px;
  border-radius: 20px;
  background: #f5f5f8;
  color: var(--ink);
}
.zx-plan__name {
  position: absolute;
  left: 31px;
  top: 36px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.zx-plan__badge { position: absolute; left: 445px; top: 111px; width: 124px; height: 36px; }
.zx-plan__now,
.zx-plan__was {
  position: absolute;
  top: 119px;
  margin: 0;
  font-size: 24px;
  line-height: 19.2px;
}
.zx-plan__now { left: 31px; }
/* Прежняя цена: лаймовая заливка за текстом и перечёркивание поверх. В
   оригинале это три отдельных элемента — плашка, текст и полоска в 2 px.
   Плашка поэтому inline-block с заданной высотой, а не просто фон под
   строкой: у inline-фона высота считается по кеглю с метриками шрифта, он
   выходил на 6 выше нужного и на телефоне накрывал цену рассрочки. */
.zx-plan__was { left: 153.7px; top: 116.1px; }
.zx-plan__was span {
  position: relative;
  display: inline-block;
  height: 25.4px;
  padding: 0 3px;
  line-height: 25.4px;
  background: var(--lime);
  border-radius: 3px;
}
.zx-plan__was span::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  /* Полоска в оригинале идёт не по середине плашки, а чуть ниже: 232.1 при
     плашке 218.9…244.3, то есть на 52% высоты. */
  top: 52%;
  height: 2px;
  background: var(--ink);
}
.zx-plan__mo {
  position: absolute;
  left: 31px;
  top: 152px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -2px;
}
.zx-plan__mo .wl-rub { top: 22px; }
.zx-plan__unit { font-family: 'RobotoFlex', sans-serif; font-size: 24px; line-height: 19.2px; letter-spacing: -0.5px; }
.zx-plan__note {
  position: absolute;
  left: 31px;
  top: 223px;
  margin: 0;
  font-size: 20px;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: #61646b;
}
.zx-plan__btn {
  position: absolute;
  left: 31px;
  width: 539px;
  height: 71px;
  min-height: 0;
  margin: 0;
  border-radius: 10px;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: -1px;
}
.zx-plan__btn--blue { top: 279px; background: var(--blue); color: #fff; }
/* Надпись на лаймовой кнопке в оригинале #3a3a3a, а не почти-чёрный #0a0f17
   остальных элементов карточки. */
.zx-plan__btn--lime { top: 364px; background: var(--lime); color: #3a3a3a; }
/* Третья кнопка — контурная, и надпись у неё на 2 px мельче остальных. */
.zx-plan__btn--ghost {
  top: 449px;
  width: 537px;
  background: none;
  /* #3a3a3a, а не почти-чёрный: и надпись, и рамка. Снято замером. */
  color: #3a3a3a;
  border: 1px solid #3a3a3a;
  font-size: 18px;
  line-height: 27.9px;
  letter-spacing: normal;
}

/* Наведение: те же 0.2s, что и на больших курсах. Синяя темнеет, лаймовая
   уходит в тёмный, контурная заливается тёмным с белой надписью. */
.zx-hero__cta .btn,
.zx-plan__btn {
  transition: background-color .2s ease-in-out, color .2s ease-in-out,
              border-color .2s ease-in-out;
}
/* Состояния сняты наведением живого курсора (scripts/ховеры.py), а не
   угаданы: у каждой кнопки на этой странице своё поведение, и две кнопки
   пакета буквально меняются цветами — синяя становится лаймовой, лаймовая
   синей. Прозрачность нигде не меняется, поэтому общее .btn:hover с
   opacity здесь снимаем. У модулей программы наведения нет вовсе. */
@media (hover: hover) {
  .zx-hero__cta .btn:hover,
  .mt-hero__cta .btn:hover,
  .zx-plan__btn:hover { opacity: 1; }
  .zx-hero__cta .btn--lime:hover,
  .mt-hero__cta .btn--lime:hover { background: #fff; }
  .zx-hero__cta .btn--dark:hover,
  .mt-hero__cta .btn--dark:hover { background: #fff; color: var(--ink); }
  .zx-plan__btn--blue:hover { background: var(--lime); color: #3a3a3a; }
  .zx-plan__btn--lime:hover { background: var(--blue); color: #fff; }
  .zx-plan__btn--ghost:hover { color: var(--blue); border-color: var(--blue); }
}

/* ══════════════════════════════════════════════════════════════════════
   Курс Windows+Linux — мобильная раскладка
   ══════════════════════════════════════════════════════════════════════
   Оригинал поэлементно не повторяем — по той же причине, что и на главной:
   у Тильды под каждый из пяти брейкпоинтов своя канва с абсолютными
   координатами на каждый элемент, и она не переживает изменения длины
   текста. Здесь секции перестают быть артбордами: высота по содержимому,
   всё абсолютное возвращается в поток, порядок и смысл прежние.

   Порог 1260, а не 900: контейнер курса — 1221 плюс поля по 20, и ниже
   1261 десктопная раскладка с жёсткими координатами просто не помещается.
   На 1024 без этого страница уезжала вбок на 233 px. */
@media (max-width: 1260px) {
  .wl-hero, .wl-video, .wl-about, .wl-who, .wl-demand, .wl-pay,
  .wl-career, .wl-teach, .wl-how, .wl-club, .wl-cv, .wl-cert,
  .wl-plans, .wl-pay2, .wl-guar, .wl-mini, .wl-faq, .wl-ask {
    height: auto;
  }
  .wl-hero .wrap, .wl-how .wrap, .wl-club .wrap, .wl-cv .wrap,
  .wl-cert .wrap, .wl-plans .wrap, .wl-pay2 .wrap, .wl-guar .wrap,
  .wl-mini .wrap, .wl-faq .wrap, .wl-ask .wrap, .wl-career .wrap,
  .wl-club__clip {
    height: auto;
  }

  /* ── Курс MikroTik на планшете ──
     Первый экран разбирается тем же приёмом, что у больших курсов: всё
     абсолютное возвращается в поток. Правила `.wl-hero` из блока ниже сюда
     не годятся — у них другие элементы. */
  .mt-hero, .mt-speaker { height: auto; }
  .mt-hero .wrap, .mt-speaker .wrap { height: auto; }
  .mt-hero { padding: 108px 0 48px; }
  .mt-hero__meta, .mt-hero__kicker, .mt-hero__title,
  .mt-hero__lead, .mt-hero__cta, .mt-hero__pic { position: static; }
  .mt-hero__meta { width: 340px; height: auto; }
  .mt-hero__kicker { margin-top: 32px; }
  .mt-hero__title { width: auto; margin-top: 12px; font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .mt-hero__leads { margin: 24px 0 0; }
  .mt-hero__lead { width: auto; padding-left: 25px; margin-bottom: 16px; }
  .mt-hero__lead:nth-child(1), .mt-hero__lead:nth-child(2) { top: auto; }
  .mt-hero__lead img { left: 0; }
  .mt-hero__cta { margin-top: 32px; flex-direction: column; align-items: stretch; }
  .mt-hero__cta .btn--lime, .mt-hero__cta .btn--dark { width: 100%; }
  .mt-hero__pic { width: 100%; height: auto; margin-top: 28px; }
  .mt-hero .wl-skills { margin-top: 40px; }

  .mt-program { padding: 48px 0; }
  .mt-program__h { margin-bottom: 24px; font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .mt-mod__t { padding: 20px 70px 20px 20px; font-size: 20px; line-height: 26px; }
  .mt-mod__t::after { right: 20px; top: 18px; width: 34px; height: 34px; }
  .mt-mod__body { padding: 16px; }
  .mt-mod__lead, .mt-mod__list { font-size: 16px; line-height: 24px; }

  .mt-speaker { padding: 48px 0; }
  .mt-speaker .zx-speaker__pair,
  .mt-speaker .zx-speaker__pair--mirror { position: static; width: auto; height: auto; }
  .mt-speaker .zx-speaker__h { width: auto; }
  .zx-speaker__pair--mirror .zx-speaker__photo,
  .zx-speaker__pair--mirror .zx-speaker__card,
  .zx-speaker__pair--mirror .zx-speaker__name,
  .zx-speaker__pair--mirror .zx-speaker__role,
  .zx-speaker__pair--mirror .zx-speaker__list { position: static; left: auto; top: auto; width: auto; }
  /* Зеркальная пара на узком экране идёт тем же порядком, что прямая:
     сначала фото, потом карточка. */
  .zx-speaker__pair--mirror { display: flex; flex-direction: column; }

  /* ── Курс Zabbix на планшете ──
     Тот же приём: секции перестают быть артбордами, абсолютное возвращается
     в поток. Правила стоят здесь, а не в мобильном блоке, потому что между
     480 и 1260 у оригинала своя раскладка, но повторять её поэлементно
     незачем — она не переживает изменения длины текста. */
  .zx-hero, .zx-speaker, .zx-plans { height: auto; }
  .zx-hero .wrap, .zx-speaker .wrap, .zx-plans .wrap { height: auto; }

  .zx-hero { padding: 108px 0 48px; }
  .zx-hero > .wrap > img,
  .zx-hero__kicker, .zx-hero__title, .zx-hero__lead,
  .zx-hero__cta { position: static; }
  .zx-hero__start, .zx-hero__modules { width: 242px; height: auto; margin-bottom: 8px; }
  .zx-hero__presale { width: 296px; height: auto; margin: 16px 0 0; }
  .zx-hero__kicker { margin-top: 32px; }
  .zx-hero__title { width: auto; margin-top: 12px; font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .zx-hero__leads { margin: 24px 0 0; }
  .zx-hero__lead { position: relative; left: 0; width: auto; padding-left: 25px; margin-bottom: 16px; }
  .zx-hero__lead:nth-child(1), .zx-hero__lead:nth-child(2) { top: auto; width: auto; }
  .zx-hero__lead img { left: 0; }
  .zx-hero__cta { margin-top: 32px; flex-direction: column; align-items: stretch; }
  .zx-hero__cta .btn--lime, .zx-hero__cta .btn--dark { width: 100%; }
  /* Снимок и логотип на узком экране просто картинка под текстом: логотип
     ложится ей на левый верхний угол, как в мобильной раскладке оригинала. */
  .zx-hero__pic { position: static; width: 100%; height: auto; margin-top: 28px; }
  .zx-hero__logo { display: none; }

  .zx-program .wrap { flex-direction: column; gap: 32px; }
  .zx-program__h { flex: 0 0 auto; font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .zx-mod__t { font-size: 20px; line-height: 26px; }

  .zx-speaker { padding: 48px 0; }
  .zx-speaker__h,
  .zx-speaker__photo, .zx-speaker__card,
  .zx-speaker__name, .zx-speaker__role, .zx-speaker__list { position: static; }
  .zx-speaker__h { font-size: 30px; line-height: 34px; letter-spacing: -1px; text-align: center; }
  .zx-speaker__photo { width: 100%; height: auto; margin-top: 32px; }
  .zx-speaker__card { width: auto; height: auto; margin-top: 24px; padding: 24px; }
  .zx-speaker__role { width: auto; margin-top: 16px; }
  .zx-speaker__list { width: auto; margin-top: 24px; }

  .zx-plans { padding: 48px 0; }
  .zx-plans__h, .zx-plans__start, .zx-plan, .zx-plan__extra,
  .zx-plan__name, .zx-plan__badge, .zx-plan__now, .zx-plan__was,
  .zx-plan__mo, .zx-plan__note, .zx-plan__btn { position: static; }
  .zx-plans__h { font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .zx-plans__start { display: block; width: 242px; height: auto; margin-top: 16px; }
  .zx-plan { width: auto; height: auto; margin-top: 32px; padding: 24px; }
  .zx-plan__name { font-size: 24px; line-height: 28px; }
  .zx-plan__badge { width: 124px; height: auto; margin-top: 16px; }
  .zx-plan__now, .zx-plan__was { display: inline-block; margin-top: 12px; }
  .zx-plan__was { margin-left: 12px; }
  .zx-plan__mo { margin-top: 12px; font-size: 40px; line-height: 44px; }
  .zx-plan__note { margin-top: 8px; }
  .zx-plan__btn { display: flex; width: 100%; margin-top: 12px; }
  /* Тёмная плита со списком на узком экране идёт под карточкой, а не
     из-под неё: перекрытие на 214 px здесь потеряло бы половину списка. */
  .zx-plan__extra { width: auto; height: auto; margin-top: 16px; }
  .zx-plan__list { padding: 24px; }

  /* ── Первый экран ──
     Переехал в блок «Первый экран ниже 480» сразу за этим медиазапросом:
     в полосе 480–1399 его теперь ведёт резина, а здесь остались бы правила,
     которые ей мешают (колонка у кнопок, спрятанные наклейки и панели). */
  /* Подсказка над кнопкой не помещается в узкую колонку — распахиваем её
     на всю ширину карточки и кладём под текст. */
  .wl-skill .wl-tip, .wl-tag--tip .wl-tip {
    position: static;
    width: auto;
    margin-top: 14px;
    left: auto;
    bottom: auto;
  }
  .wl-skill .wl-tip__btn { position: absolute; right: 20px; top: 20px; left: auto; }

  /* Точечные добивки: у этих правил на десктопе селектор специфичнее общего
     мобильного, поэтому перечисляем их поимённо. */
  /* nowrap с десктопа на узком экране гарантирует горизонтальную прокрутку. */
  .wl-cv__title, .wl-plans__title, .wl-faq__title { white-space: normal; }
  /* Страховка от слишком длинного слова: рвём его, а не страницу. */
  .wl-hero, .wl-video, .wl-about, .wl-who, .wl-demand, .wl-pay, .wl-career,
  .wl-teach, .wl-program, .wl-how, .wl-club, .wl-cv, .wl-cert, .wl-plans,
  .wl-pay2, .wl-guar, .wl-mini, .wl-faq, .wl-ask { overflow-wrap: break-word; }
  /* Крупные заголовки в узкой колонке не помещаются одним словом
     («администратора» на 40 px шире экрана) — сбавляем кегль. */
  .wl-about__h, .wl-who__h, .wl-demand__h, .wl-pay__h, .wl-career__h,
  .wl-teach__h, .wl-club__h, .wl-skills__h {
    max-width: none;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -.8px;
  }
  .wl-career__grid { position: static; }
  .js-anim .wl-career__card--anim { animation: none; }
  .wl-about__pair { grid-template-columns: 1fr; gap: 12px; }
  /* Въезд на 200 px рассчитан на широкий экран; на телефоне это полэкрана. */
  .js-anim .wl-slide { transform: translateX(-40px); }
  .js-anim .wl-slide--right { transform: translateX(40px); }
  .wl-about__origin { height: auto; }
  .wl-about__origin-t { max-width: none; }
  .wl-about__clients img { width: 100%; height: auto; margin: 24px 0 0; }
  .wl-career__note { left: auto; width: auto; transform: none; font-size: 24px; line-height: 30px; }
  .wl-program__fresh { position: static; width: auto; margin-bottom: 12px; }
  .wl-program__head--linux { height: auto; }
  .wl-program__head--linux .wl-program__fresh { left: auto; top: auto; }
  .wl-program__h, .wl-program__head--linux .wl-program__h { max-width: none; padding-top: 0; }
  .wl-program__note, .wl-program__head--linux .wl-program__note { max-width: none; }
  .wl-program__list { width: auto; }
  .wl-program__chips { flex-wrap: wrap; }
  .wl-how--first .wl-how__t, .wl-how__t--low, .wl-how__t--tall, .wl-how__t--low5,
  .wl-how__t--six, .wl-how__t--seven { width: auto; top: auto; }
  .wl-how--first .wl-how__h, .wl-how__h--narrow, .wl-how__h--two,
  .wl-how__h--six, .wl-how__h--seven { top: auto; max-width: none; }
  .wl-how__msg--1, .wl-how__msg--2, .wl-how__msg--3, .wl-how__msg--4, .wl-how__msg--5 {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }
  .wl-plan--2 .wl-plan__name { width: auto; }

  /* ── Ролик, «о школе», «кому подойдёт» ── */
  .wl-video__box { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .wl-video__loop { width: 100%; height: 100%; }
  .wl-about__photo, .wl-about__pair { position: static; width: 100%; height: auto; margin-top: 20px; }
  .wl-about__docs { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .wl-about__doc { width: 100%; }
  .wl-who__list { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .wl-who { padding-bottom: 40px; }
  .wl-who__card { width: 100%; height: auto; padding: 24px; }
  /* Текст карточки на десктопе прижат к низу абсолютом; при высоте по
     содержимому он выпадал из секции. */
  .wl-who__card p { position: static; left: auto; bottom: auto; margin: 16px 0 0; }
  .wl-who__badge { position: static; margin-bottom: 12px; }
  .wl-demand__pic { display: none; }
  .wl-demand__note { position: static; width: 100%; margin-top: 20px; }

  /* ── Рост дохода и карьерный трек ── */
  .js-anim .wl-rise { transform: translateY(60px); }
  .wl-pay__steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .wl-pay__step { position: static; width: 100%; height: auto; }
  .wl-pay__arrow { display: none; }
  .wl-career__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .wl-career__card { position: static; width: 100%; height: auto; min-height: 0; padding: 18px 20px; }
  .wl-career__card--empty { display: none; }
  .wl-career__note { position: static; margin-top: 20px; }

  /* ── Преподаватели ── */
  .wl-teach__row { display: block; }
  .wl-teach__photo, .wl-teach__card { position: static; width: 100%; height: auto; }
  .wl-teach__card { margin-top: 12px; padding: 24px; }

  /* ── Программа курса ── */
  .wl-program:not(.wl-program--linux) { background: var(--bg); padding-top: 40px; }
  .wl-program__head { width: 100%; height: auto; padding: 24px; }
  /* Рост плиты в 1.4 раза на телефоне вылезал бы за экран: там она и так
     во всю ширину. */
  .js-anim .wl-grow.is-in::before { transform: none; }
  .wl-program__head::before { border-radius: 20px; }
  .wl-program__h { font-size: 26px; line-height: 30px; }
  .wl-mod__t { padding: 18px 62px 18px 20px; font-size: 20px; line-height: 26px; }
  .wl-mod__t span { max-width: none; }
  .wl-mod__t::after { right: 12px; top: 16px; width: 32px; height: 32px; }
  .wl-mod > :not(summary) { margin: 0 20px; }
  /* Списку боковое поле приходится повторять и здесь — по той же причине,
     что и на большом экране: своё правило перебивает общее. */
  .wl-mod ol, .wl-mod ul { margin: 0 20px 10px; }

  /* ── Как проходит обучение ── */
  .wl-how { padding: 40px 0; }
  .wl-how__panels { display: none; }
  .wl-how__title, .wl-how__h, .wl-how__t { position: static; max-width: none; width: auto; }
  .wl-how__title { margin-bottom: 24px; }
  .wl-how__h { margin-bottom: 12px; font-size: 26px; line-height: 30px; }
  .wl-how__media, .wl-how__big, .wl-how__mark, .wl-how__shot,
  .wl-how__msg, .wl-how__plane, .wl-how__shield {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
  }
  .wl-how__mark, .wl-how__plane, .wl-how__shield { display: none; }
  .wl-how, .wl-how--light { background: var(--card); color: #fff; }
  .wl-how--first { padding-top: 56px; }

  /* ── Закрытый клуб ── */
  .wl-club { padding: 40px 0; }
  .wl-club__clip { overflow: visible; }
  .wl-club__h, .wl-club__t { position: static; width: auto; max-width: none; }
  .wl-club__h { margin-bottom: 12px; }
  .wl-club__phone, .wl-club__screen { display: none; }

  /* ── Резюме ── */
  .wl-cv { padding: 40px 0; }
  .wl-cv__title { position: static; margin-bottom: 20px; font-size: 28px; line-height: 32px; }
  .wl-cv__card { position: static; width: 100%; height: auto; padding: 24px; }
  .wl-cv__role, .wl-cv__h, .wl-cv__do, .wl-cv__note, .wl-cv__row {
    position: static;
    width: auto;
  }
  .wl-cv__role { font-size: 26px; line-height: 30px; }
  .wl-cv__hl, .wl-cv__video { display: none; }
  .wl-cv__sum, .wl-cv__unit { position: static; display: inline; }
  .wl-cv__h { margin: 24px 0 12px; }
  .wl-cv__row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
  .wl-cv__row .wl-cv__chip { width: auto !important; padding: 0 10px; }
  .wl-cv__strip { position: static; display: block; width: auto; height: auto; margin-top: 20px; padding: 20px; }
  .wl-cv__note { margin-top: 20px; padding: 20px; border-radius: 20px; background: var(--lime); }

  /* ── Сертификат ── */
  .wl-cert { padding: 40px 0; }
  .wl-cert__h, .wl-cert__t { position: static; width: auto; }
  .wl-cert__h { font-size: 26px; line-height: 30px; margin-bottom: 14px; }
  .wl-cert__shot { position: static; width: 100%; height: auto; margin-top: 20px; }

  /* ── Форматы участия ── */
  .wl-plans { padding: 0 0 40px; }
  .wl-plans::before { border-radius: 30px 30px 0 0; }
  .wl-plans__title { position: static; padding-top: 40px; margin-bottom: 24px; font-size: 28px; line-height: 32px; }
  .wl-plan { position: static; width: 100%; height: auto; padding: 24px; }
  .wl-plan + .wl-plan { margin-top: 14px; }
  .wl-plan__name { position: static; width: auto; font-size: 26px; line-height: 30px; }
  .wl-plan__badge { display: none; }
  .wl-plan__chips { position: static; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
  .wl-plan__chips li { width: auto !important; padding: 0 10px; }
  .wl-plan__list { position: static; margin-top: 18px; }
  .wl-plan__old, .wl-plan__price, .wl-plan__per, .wl-plan__foot, .wl-plan__btn, .wl-plan__pay {
    position: static;
    width: auto;
  }
  .wl-plan__price { margin-top: 14px; }
  .wl-plan__per { display: inline; }
  .wl-plan__btn { width: 100%; margin-top: 12px; }
  .wl-plan__pay { margin-top: 20px; }
  .wl-plan__pay img { width: 100%; height: auto; }
  /* Тёмный пузырь подсказки в узкой колонке кладём под строку. */
  .wl-plan__tip { display: inline-block; }
  .wl-plan__tip .wl-tip { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }

  /* ── Способы оплаты ── */
  .wl-pay2 { padding: 40px 0; }
  .wl-pay2__card { position: static; width: 100%; height: auto; padding: 24px; }
  .wl-pay2__card + .wl-pay2__card { margin-top: 12px; }
  .wl-pay2__h, .wl-pay2__t { position: static; width: auto !important; }
  .wl-pay2__t { margin-top: 10px; }
  .wl-pay2__banks { position: static; flex-wrap: wrap; margin-top: 16px; }
  .wl-pay2__pic, .wl-pay2__bg { display: none; }
  .wl-pay2__plate, .wl-pay2__fns { position: static; }
  .wl-pay2__plate { display: none; }
  .wl-pay2__fns { margin-bottom: 12px; }
  .wl-pay2__h--tax, .wl-pay2__t--tax { left: auto; }
  .wl-tip--banks { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }

  /* ── Гарантии ── */
  .wl-guar { padding: 40px 0; }
  .wl-guar__card { position: static; width: 100%; height: auto; padding: 24px; }
  .wl-guar__card + .wl-guar__card { margin-top: 12px; }
  .wl-guar__h, .wl-guar__t, .wl-guar__link { position: static; width: auto !important; left: auto; }
  .wl-guar__t { margin-top: 10px; }
  .wl-guar__link { display: inline-block; margin-top: 14px; }
  .wl-guar__plate, .wl-guar__icon, .wl-guar__coin { display: none; }

  /* ── Мини-курс ── */
  .wl-mini { padding: 40px 0; }
  .wl-mini__slab { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
  .wl-mini__h, .wl-mini__t, .wl-mini__btn { position: static; width: auto; }
  .wl-mini__h { font-size: 26px; line-height: 32px; }
  .wl-mini__h br { display: none; }
  .wl-mini__t { margin-top: 14px; }
  .wl-mini__btn { width: 100%; margin-top: 20px; }
  .wl-mini__frame { position: static; width: 100%; height: auto; margin-top: 20px; }
  .wl-mini__video { display: none; }

  /* ── Вопрос-ответ ── */
  .wl-faq { padding: 40px 0; }
  .wl-faq__title { position: static; margin-bottom: 20px; font-size: 28px; line-height: 32px; }
  .wl-faq__list { position: static; width: auto; }
  .wl-faq__q { padding: 18px 56px 18px 20px; font-size: 19px; line-height: 26px; }
  .wl-faq__q::after { right: 12px; top: 16px; width: 32px; height: 32px; }
  .wl-faq__a { padding: 0 20px 20px; font-size: 17px; line-height: 25px; }

  /* ── Форма «вопрос» ── */
  .wl-ask { padding: 40px 0; }
  .wl-ask__slab { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
  .wl-ask__photo, .wl-ask__deco, .wl-ask__card { display: none; }
  .wl-ask__h, .wl-ask__form { position: static; width: auto; }
  .wl-ask__h { font-size: 26px; line-height: 30px; }
  .wl-ask__form { margin-top: 24px; }
  .wl-ask__field { width: 100%; }
  .wl-ask__btn { position: static; width: 100%; margin-top: 16px; }
  .wl-ok { padding: 40px 24px 28px; }
  .wl-ok__t { font-size: 26px; line-height: 36px; margin-bottom: 24px; }
  .wl-ok__btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН: канва 360, как в оригинале
   ══════════════════════════════════════════════════════════════════════
   Мобильная версия оригинала — не «десктоп в столбик», а отдельная
   раскладка зеро-блоков со своей канвой 360 и своими координатами. Живьём
   Тильда масштабирует её под ширину экрана: на 375 у элементов стоит
   zoom 1.042, то есть 375/360.

   Повторяем ровно это: секция получает `zoom`, а внутри всё стоит в
   числах канвы — их отдаёт `scripts/зеро-опись-мобиль.py` прямо из
   выгрузки. Так сверка идёт числами, а не на глаз.

   Блок ниже перебивает общий мобильный (max-width: 1260px) — тот
   остаётся для планшетов, где у оригинала свои канвы 640 и 960. */

/* ── Курс Linux: блок «шансов» ───────────────────────────────────────
   Классы свои, соседнему курсу не мешают, поэтому лежат снаружи любых
   медиазапросов: цвет, шрифт и скругления одни на все ширины, меняются
   только координаты. Когда весь блок отличий заперли в десктопный
   медиазапрос, на телефоне пропали фоны карточек — остались координаты
   без оформления. */
/* «Навык работы с Linux расширяет карьерные возможности». Блока с таким
   устройством у соседнего курса нет, поэтому он свой целиком: слева тёмная
   карточка и синяя под ней, справа фотография во всю высоту. */
.lx-chance { position: relative; height: 653px; background: var(--bg); }
.lx-chance .wrap { position: relative; height: 100%; }
.lx-chance__card { position: absolute; left: 0; width: 599px; border-radius: 20px; }
.lx-chance__card--dark { top: 102px; height: 348px; background: var(--card); }
.lx-chance__card--blue { top: 470px; height: 183px; background: var(--blue); }
.lx-chance__pic {
  position: absolute;
  left: 623px;
  top: 102px;
  width: 599px;
  height: 539px;
  object-fit: cover;
  border-radius: 20px;
}
.lx-chance__h {
  position: absolute;
  left: 41px;
  top: 35px;
  width: 483px;
  margin: 0;
  color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -1.5px;
}
.lx-chance__t {
  position: absolute;
  left: 41px;
  top: 205px;
  width: 491px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.7px;
}
/* В синей карточке текст один, стоит выше и уже. */
.lx-chance__card--blue .lx-chance__t { left: 35px; top: 41px; width: 408px; }

@media (min-width: 480px) {
  /* ── Курс Linux: чем он отличается от Windows+Linux ──────────────────
     Правила ДЕСКТОПНЫЕ. Без этой рамки они утекали на телефон: ширина
     заголовка 385 при экране 375 наезжала на карточку.
     Страница собрана из той же вёрстки — из 32 блоков оригинала 22
     совпадают вплоть до высоты. Ниже только отличия.

     ⚠️ Числа здесь, как и везде в проекте, — ЭКРАННЫЕ пиксели при ширине 1425
     и отсчитываются от левого края контейнера (он начинается на 102). Не в
     канве 1400: артборд Тильды масштабируется в 1.018, и канвовые числа выходят
     на 2% меньше нужных. Снимать — scripts/блок-в-канве.py. */

  /* Первый экран. ⚠️ Он собран ПОТОКОМ — заголовок, плашки, лид и кнопки идут
     друг за другом с отступами, а не расставлены абсолютом. Поэтому здесь
     правятся ширины и поля, а не top: сперва я написал координатами, и лид
     уехал под ленту, потому что static/relative их попросту не слушают.

     Левый столбец у этого курса начинается на 18 ниже (135 против 117):
     заголовок короче и уже — 493 против 749. */
  .page-linux .wl-hero__title { max-width: 493px; padding-top: 18px; }
  /* Плашки свои: 8 модулей | 3 месяца | 53 урока — в первой строке,
     81 практический урок | гарантия — во второй. Ширина обоймы держит именно
     такую разбивку. */
  .page-linux .wl-tags { max-width: 580px; }
  .page-linux .wl-tags .wl-tag:nth-child(1) { width: 118px; }
  .page-linux .wl-tags .wl-tag:nth-child(2) { width: 205px; }
  .page-linux .wl-tags .wl-tag:nth-child(3) { width: 184px; }
  .page-linux .wl-tags .wl-tag:nth-child(4) { width: 232px; }
  /* Лид крупнее и в две строки: 24/34 против 22/31. */
  .page-linux .wl-hero__lead { max-width: 565px; font-size: 24px; line-height: 34px; }
  /* Наклеек Windows и Linux на фотографии у этого курса нет — они висели
     поверх снимка отдельными картинками, и на новом фото выглядели чужими. */
  .page-linux .wl-hero__sticker { display: none; }
  /* Фотография другая и стоит ниже: 455/57 при 1121×991. */
  .page-linux .wl-hero__pic { left: 455px; top: -59px; width: 1121px; height: 991px; }  /* top по замеру боевой: фото у неё на 58px страницы, т.е. на 59 выше верха секции */
  /* Формат участия. Пакет один, и раскладка другая: заголовок прижат влево,
     карточка стоит справа. У Windows+Linux заголовок по центру, карточки две.
     Сама карточка того же размера, что и там (599×1180), и внутренности у неё
     те же — отличаются только положение, название, чипы и цены. */
  .page-linux .wl-plans__title {
    left: 0;
    right: auto;
    top: 214px;
    width: 385px;
    text-align: left;
  }
  .page-linux .wl-plan--1 { left: 623px; top: 173px; }
  /* Пингвин у единственного пакета — там, где у соседнего курса он был у
     второго: 340/34 от угла карточки, 93×107. */
  .page-linux .wl-plan__badge { left: 340px; top: 34px; width: 93px; height: 107px; }
  .page-linux .wl-plan__chips--1 { top: 181px; }
  .page-linux .wl-plan__chips--2 { top: 220px; }
  /* Кому подойдёт. Карточки того же размера, что у соседнего курса; своё тут
     только то, что у первой появилась наклейка — у Windows+Linux её нет. */
  .page-linux .wl-who__badge--1 { left: 42px; top: 121px; width: 71px; height: 60px; }
}

@media (max-width: 479px) {
  /* Множитель канвы: 1 единица макета = ширина экрана / 360. Через него
     идут все числа — `zoom: calc(...)` браузер молча игнорирует, проверено
     пробой: число он принимает, calc — нет. */
  :root { --м: calc(100vw / 360); }

  .wl-hero {
    position: relative;
    /* 1155 первый экран + 209 лента навыков + 14 пустого зазора: в оригинале
       между лентой и роликом стоит отдельный блок высотой 15 в канве. Без
       него всё, что ниже, съезжало вверх на эти 14. */
    height: calc(1378 * var(--м));
    padding: 0;
    overflow: hidden;
    background: #fff;
  }
  /* Тёмная плита со скруглением снизу — в оригинале отдельный элемент
     высотой 1475, обрезанный артбордом. */
  .wl-hero::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(360 * var(--м));
    /* 1475, а не 1155: в оригинале плита НЕ обрезается по нижнему краю
       первого экрана, а уходит под ленту «Чему вы научитесь» — карточки
       там лежат на тёмном. У нас она кончалась сразу под заголовком, и
       карточки оказывались на белом. Скруглённый низ при этом не виден
       ни там, ни тут: его закрывает следующий блок. */
    height: calc(1475 * var(--м));
    border-radius: 0 0 calc(44 * var(--м)) calc(44 * var(--м));
    background: var(--bg);
  }
  .wl-hero .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }

  .wl-hero__title {
    position: absolute;
    left: calc(15 * var(--м));
    top: calc(124 * var(--м));
    width: calc(252 * var(--м));
    margin: 0;
    font-size: calc(30 * var(--м));
    line-height: calc(33 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
    color: #fff;
  }
  /* Координаты кикера — от заголовка: он лежит внутри h1, а тот сам
     абсолютный и потому задаёт начало отсчёта. В канве это 16 и 100 минус
     координаты заголовка (15 и 124). */
  .wl-hero__kicker {
    position: absolute;
    left: calc(1 * var(--м));
    top: calc(-24 * var(--м));
    width: calc(92 * var(--м));
    font-family: 'RobotoFlex', system-ui, sans-serif;
    font-size: calc(16 * var(--м));
    line-height: calc(13 * var(--м));
    letter-spacing: calc(-.2 * var(--м));
  }

  /* Пять плашек стоят каждая на своём месте, а не лентой: порядок в
     разметке и порядок на экране у оригинала разные. */
  .wl-tags { position: static; display: block; margin: 0; }
  .wl-tag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(20 * var(--м));
    padding: 0;
    border-radius: calc(3 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(12.6 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
  }
  .wl-tags .wl-tag:nth-child(1) { left: calc(16 * var(--м));  top: calc(281 * var(--м)); width: calc(101 * var(--м)); }
  .wl-tags .wl-tag:nth-child(2) { left: calc(16 * var(--м));  top: calc(331 * var(--м)); width: calc(164 * var(--м)); }
  .wl-tags .wl-tag:nth-child(3) { left: calc(122 * var(--м)); top: calc(281 * var(--м)); width: calc(153 * var(--м)); }
  .wl-tags .wl-tag:nth-child(4) { left: calc(15 * var(--м));  top: calc(306 * var(--м)); width: calc(195 * var(--м)); }
  .wl-tags .wl-tag--violet      { left: calc(16 * var(--м));  top: calc(356 * var(--м)); width: calc(190 * var(--м)); }
  /* Кружок с «i» — рядом с плашкой гарантии, 30×30. */
  .wl-tags .wl-tag--tip { left: calc(211 * var(--м)); top: calc(351 * var(--м)); width: calc(30 * var(--м)); height: calc(30 * var(--м)); background: none; }
  .wl-tag--tip .wl-tip__btn img { width: calc(30 * var(--м)); height: calc(30 * var(--м)); }

  /* Ширина 350 вместо тильдиных 319: у нас в лиде неразрывные пробелы
     после коротких предлогов, у неё их нет, и на её ширине текст ложился
     в ЧЕТЫРЕ строки вместо трёх. 31 лишний пиксель возвращает три строки —
     это ближе к оригиналу, чем точная ширина с лишней строкой. */
  .wl-hero__lead {
    position: absolute;
    left: calc(41 * var(--м));
    top: calc(406 * var(--м));
    width: calc(350 * var(--м));
    margin: 0;
    font-size: calc(15 * var(--м));
    line-height: calc(21 * var(--м));
    letter-spacing: calc(-.2 * var(--м));
  }
  .wl-hero__lead img { position: absolute; left: calc(-25 * var(--м)); top: calc(7 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }

  .wl-hero__cta { position: static; display: block; }
  .wl-hero__cta .btn {
    position: absolute;
    margin: 0;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    min-height: 0;
    height: calc(50 * var(--м));
    padding: 0;
    border-radius: calc(5 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21.7 * var(--м));
  }
  .wl-hero__cta .btn--lime  { top: calc(492 * var(--м)); }
  .wl-hero__cta .btn--ghost { top: calc(552 * var(--м)); }
  .wl-hero__note { display: block; margin: 0; position: absolute; left: calc(85 * var(--м)); top: calc(612 * var(--м)); width: calc(190 * var(--м)); height: calc(19 * var(--м)); }

  /* Фотография курса с наклейками — низ первого экрана. */
  /* Возвращаем то, что планшетный блок прячет и сдвигает: там картинка
     идёт потоком с отступом, а наклейки и подпись со стрелкой убраны вовсе. */
  /* Фотография курса: в описи у неё 150 высоты, но это подложка — само фото
     на экране заметно выше и показывает человека целиком. Берём верх кадра. */
  .wl-hero__pic {
    position: absolute;
    margin: 0;
    /* На десктопе фото лежит ПОД тёмной плитой (z-index: -1) и обрезается ею.
       На телефоне плита сплошная, поэтому фото надо поднять — иначе от него
       остаются только наклейки Windows и Linux. */
    z-index: 1;
    /* Кадр шире экрана и заходит за левый край — так человек виден крупно.
       Числа сняты с боевой: −153 / 607, 667×590 в канве. */
    left: calc(-153 * var(--м));
    top: calc(607 * var(--м));
    width: calc(667 * var(--м));
    height: calc(590 * var(--м));
    max-width: none;
    object-fit: cover;
  }
  /* Наклейки Windows и Linux — над фотографией, иначе она их закрывает. */
  .wl-hero__sticker { display: block; z-index: 2; }
  .wl-hero__sticker--1 { position: absolute; left: calc(86 * var(--м));  top: calc(895 * var(--м)); width: calc(90 * var(--м)); height: calc(90 * var(--м)); }
  .wl-hero__sticker--2 { position: absolute; left: calc(176 * var(--м)); top: calc(894 * var(--м)); width: calc(90 * var(--м)); height: calc(87 * var(--м)); }
  /* ⚠️ Панели на телефоне ЕСТЬ — были спрятаны по ошибке. Это те же две
     наложенные плашки с вырезом, что и на десктопе, только во всю ширину
     экрана: в канве 0/1065 при 360×150 и 0/1081 при 360×157. Без них лента
     «Чему вы научитесь» лежала на ровной плите, а в оригинале у неё виден
     характерный уступ сверху. */
  .wl-panels { display: block; z-index: 1; }
  .wl-panels img { left: 0; width: calc(360 * var(--м)); max-width: none; margin-left: 0; }
  .wl-panels__back { top: calc(1065 * var(--м)); height: calc(150 * var(--м)); }
  .wl-panels__front { top: calc(1081 * var(--м)); height: calc(157 * var(--м)); }

  /* Навыки: заголовок в первом экране, а сама лента — уже за плитой. */
  .wl-skills { position: static; }
  .wl-skills__h {
    position: absolute;
    z-index: 2;
    padding: 0;
    left: calc(88 * var(--м));
    top: calc(1116 * var(--м));
    width: calc(184 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(18 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
    text-align: center;
    color: #fff;
  }
  .wl-skills__list {
    position: absolute;
    z-index: 2;
    left: 0;
    top: calc(1155 * var(--м));
    display: flex;
    gap: calc(10 * var(--м));
    width: calc(360 * var(--м));
    margin: 0;
    padding: 0 calc(16 * var(--м));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wl-skills__list::-webkit-scrollbar { display: none; }
  /* 159×209, а не 168×221: 168 — это размер ЗАПАРКОВАННЫХ десктопных
     карточек, они лежат в разметке рядом и попались под обмер. Мобильная
     лента мельче, проверено замером совпадения (с 168 стало хуже на 2 %). */
  .wl-skill {
    position: relative;
    flex: none;
    width: calc(159 * var(--м));
    height: calc(209 * var(--м));
    padding: calc(16 * var(--м));
    margin: 0;
  }
  /* Подложку карточки планшетный блок прячет — в канве она нужна. */
  .wl-skill__bg { display: block; position: absolute; left: 0; top: 0; width: calc(159 * var(--м)); height: calc(209 * var(--м)); }
  /* ⚠️ right/top обнуляем: планшетный блок ставит кнопку абсолютом в угол
     (right: 20, top: 20), а здесь она возвращается в поток — и те же 20
     превращаются в СМЕЩЕНИЕ от места в потоке. Кружок уезжал на 20 вниз и
     на 20 влево, за край карточки. В оригинале он ровно в углу отступа:
     16/16 у обоих курсов, проверено замером. */
  .wl-skill .wl-tip__btn { position: relative; z-index: 1; right: auto; top: auto; left: auto; }
  .wl-skill .wl-tip__btn img { width: calc(30 * var(--м)); height: calc(30 * var(--м)); }

  /* ── Подсказки «i» (телефон) ─────────────────────────────────────── */
  .page-course .wl-tag--tip .wl-tip--garant {
    position: absolute;
    left: calc(-135 * var(--м));
    top: calc(-182 * var(--м));
    right: auto;
    bottom: auto;
    width: calc(268 * var(--м));
    margin: 0;
    padding: calc(16 * var(--м));
    border-radius: calc(7 * var(--м));
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
  }
  .page-course .wl-tip--garant .wl-tip__h { margin: 0 0 calc(10 * var(--м)); }
  .page-course .wl-tip__x {
    display: block;
    width: calc(20 * var(--м));
    height: calc(20 * var(--м));
    right: calc(5 * var(--м));
    top: calc(5 * var(--м));
  }
  .page-course .wl-tip--карточка {
    position: absolute;
    /* Низом, а не верхом: наши строки переносятся иначе тилдиных,
       панель бывает выше — прижимать надо к ленте карточек, иначе
       лишние строки наезжают на них снизу. 1378 канвы − 1145. */
    top: auto;
    bottom: calc(233 * var(--м));
    margin: 0;
    padding: calc(16 * var(--м));
    border-radius: calc(7 * var(--м));
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
  }
  .page-course .wl-tip--к1 { left: calc(54 * var(--м)); width: calc(251 * var(--м)); }
  .page-course .wl-tip--к2 { left: calc(52 * var(--м)); width: calc(255 * var(--м)); }
  .page-course .wl-tip--к3 { left: calc(61 * var(--м)); width: calc(237 * var(--м)); }
  .page-course .wl-tip--к4 { left: calc(64 * var(--м)); width: calc(231 * var(--м)); }
  .page-course .wl-tip--к5 { left: calc(44 * var(--м)); width: calc(271 * var(--м)); background: #0088ff; color: #fff; }

  /* Текст — от края карточки, а не потоком: в потоке его сдвигала вниз
     кнопка с «i», и строки наезжали на крупный номер. */
  .wl-skill__t {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(63 * var(--м));
    width: calc(127 * var(--м));
    z-index: 1;
    margin: 0;
    padding: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
    letter-spacing: calc(-.5 * var(--м));
  }

  /* ── Видеоролик о курсе ─────────────────────────────────────────── */
  .wl-video { height: calc(300 * var(--м)); padding: 0; position: relative; }
  .wl-video .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-video__h {
    position: absolute;
    left: calc(66 * var(--м));
    top: calc(35 * var(--м));
    width: calc(228 * var(--м));
    margin: 0;
    /* В оригинале 25/25 при межбуквенном -1,5 — строка тогда точно
       укладывается в 228. Я раньше уменьшал шрифт до 24, потому что
       межбуквенный оставался десктопным -0,8 в ПИКСЕЛЯХ: он не растёт с
       экраном, и на 430 строка ломалась надвое. Лечится интервалом, а не
       кеглем. */
    font-size: calc(25 * var(--м));
    line-height: calc(25 * var(--м));
    letter-spacing: calc(-1.5 * var(--м));
    text-align: center;
  }
  /* Кнопка воспроизведения у нас была вдвое крупнее оригинальной; после
     сверки с артбордом уточнено до 40 — столько у Тильды и на 480, и на 360. */
  .wl-video__play { width: calc(40 * var(--м)); height: calc(40 * var(--м)); }
  .wl-video__play svg { width: calc(16 * var(--м)); height: calc(18 * var(--м)); }
  .wl-video__box {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(80 * var(--м));
    width: calc(328 * var(--м));
    height: calc(185 * var(--м));
    margin: 0;
    /* Скругление 20, как на артборде 360 (было 15). */
    border-radius: calc(20 * var(--м));
    /* Ролик внутри шире рамки — без клипа он растягивал страницу вбок. */
    overflow: hidden;
  }
  .wl-video__loop { width: 100%; height: 100%; object-fit: cover; }

  /* ── О школе ────────────────────────────────────────────────────── */
  .wl-about { height: calc(1480 * var(--м)); padding: 0; position: relative; }
  .wl-about .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-about__h {
    position: absolute;
    left: calc(68 * var(--м));
    top: calc(35 * var(--м));
    width: calc(224 * var(--м));
    margin: 0;
    font-size: calc(30 * var(--м));
    line-height: calc(33 * var(--м));
    text-align: center;
  }
  /* Первая карточка: подложка 328×510, внутри текст, приписка и снимок. */
  .wl-about__wide {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(80 * var(--м));
    width: calc(328 * var(--м));
    height: calc(510 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .wl-about__lead {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(20 * var(--м));
    width: calc(246 * var(--м));
    margin: 0;
    font-size: calc(16 * var(--м));
    line-height: calc(21.6 * var(--м));
  }
  .wl-about__note {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(165 * var(--м));
    width: calc(288 * var(--м));
    margin: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
  }
  .wl-about__photo {
    position: absolute;
    left: calc(10 * var(--м));
    top: calc(269 * var(--м));
    width: calc(308 * var(--м));
    height: calc(231 * var(--м));
    margin: 0;
    border-radius: calc(10 * var(--м));
    object-fit: cover;
  }
  /* Дальше три карточки в столбик: клиенты, происхождение, документы. */
  .wl-about__pair { display: contents; }
  .wl-about__clients {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(600 * var(--м));
    width: calc(328 * var(--м));
    height: calc(175 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .wl-about__clients .wl-about__h3 {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(20 * var(--м));
    width: calc(137 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(22 * var(--м));
  }
  .wl-about__clients img {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(60 * var(--м));
    width: calc(292 * var(--м));
    height: calc(75 * var(--м));
    object-fit: contain;
  }
  .wl-about .wl-about__origin {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(785 * var(--м));
    width: calc(328 * var(--м));
    height: calc(163 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .wl-about__origin-t {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(20 * var(--м));
    width: calc(278 * var(--м));
    margin: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
  }
  .wl-about__docs { display: contents; }
  .wl-about .wl-about__doc {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    height: calc(283 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
    overflow: hidden;
  }
  .wl-about .wl-about__doc--license { top: calc(958 * var(--м)); }
  .wl-about .wl-about__doc--accred { top: calc(1251 * var(--м)); height: calc(194 * var(--м)); }
  .wl-about__doc-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .wl-about__doc-t {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(17 * var(--м));
    width: calc(273 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(24 * var(--м));
  }
  .wl-about__doc--accred .wl-about__doc-t { width: calc(236 * var(--м)); }
  /* Номер лицензии у боевой на телефоне ВИДЕН, светло-голубым под
     заголовком — прятали зря. */
  .wl-about__doc-n {
    display: block;
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(70 * var(--м));
    margin: 0;
    font-size: calc(15 * var(--м));
    line-height: calc(20 * var(--м));
    color: #bfe1ff;
  }
  .wl-about__doc-hint {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: calc(8 * var(--м)) 0;
    background: rgba(10, 15, 23, .65);
    color: #fff;
    font-size: calc(12 * var(--м));
    line-height: calc(14 * var(--м));
    text-align: center;
  }


  /* ── Кому подойдёт ──────────────────────────────────────────────── */
  .wl-who { height: calc(1136 * var(--м)); padding: 0; position: relative; }
  .wl-who .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-who__h {
    position: absolute;
    left: calc(40 * var(--м));
    top: 0;
    width: calc(281 * var(--м));
    margin: 0;
    font-size: calc(24 * var(--м));
    line-height: calc(26 * var(--м));
    text-align: center;
  }
  .wl-who__list { display: contents; }
  /* Карточки идут столбиком с шагом 280; у последней высота на 20 меньше. */
  .wl-who .wl-who__card {
    position: absolute;
    left: calc(40 * var(--м));
    width: calc(280 * var(--м));
    height: calc(270 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .wl-who__card:nth-child(1) { top: calc(46 * var(--м)); }
  .wl-who__card:nth-child(2) { top: calc(326 * var(--м)); }
  .wl-who__card:nth-child(3) { top: calc(606 * var(--м)); }
  .wl-who__card:nth-child(4) { top: calc(886 * var(--м)); height: calc(250 * var(--м)); }
  /* Внутри: картинка сверху по центру, под ней текст. */
  .wl-who__card img {
    position: absolute;
    left: calc(80 * var(--м));
    top: calc(20 * var(--м));
    width: calc(120 * var(--м));
    height: calc(120 * var(--м));
    margin: 0;
  }
  .wl-who__card p {
    position: absolute;
    left: calc(18 * var(--м));
    top: calc(160 * var(--м));
    width: calc(245 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(20 * var(--м));
    text-align: center;
  }
  .wl-who__badge {
    display: block;
    position: absolute;
    left: calc(55 * var(--м));
    top: calc(80 * var(--м));
    width: calc(60 * var(--м));
    height: calc(60 * var(--м));
    margin: 0;
    border-radius: calc(10 * var(--м));
  }

  /* ── Востребованность ───────────────────────────────────────────── */
  /* overflow: hidden — как артборд у Тильды: заголовок в оригинале начинается
     на −2 и торчит за левый край, и без обрезки страница едет вбок на эти
     2 px. У боевой обрезает артборд, у нас обрезать нечему. */
  .wl-demand { height: calc(447 * var(--м)); padding: 0; position: relative; overflow: hidden; }
  .wl-demand .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-demand__h {
    position: absolute;
    left: calc(-2 * var(--м));
    top: calc(35 * var(--м));
    width: calc(364 * var(--м));
    margin: 0;
    /* 20, а не 24: при 24 заголовок шёл в четыре строки и наезжал на текст. */
    font-size: calc(20 * var(--м));
    line-height: calc(26 * var(--м));
    /* Межбуквенный интервал ТОЖЕ через множитель. С десктопных -.8px строка
       выходила на 7 px шире оригинальной, и перенос вставал не туда:
       «нужен» уезжало со второй строки на первую. */
    letter-spacing: calc(-1 * var(--м));
    text-align: center;
  }
  /* Жёсткий перенос в разметке стоит ради десктопа. На телефоне оригинал
     ломает строку сам, и наш <br> сдвигал всё на слово. */
  .wl-demand__h br { display: none; }
  .wl-demand__note {
    position: absolute;
    left: calc(32 * var(--м));
    top: calc(152 * var(--м));
    width: calc(297 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
    text-align: center;
  }
  .wl-demand__pic {
    /* Планшетный блок картинку прячет — здесь она нужна. */
    display: block;
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(250 * var(--м));
    width: calc(328 * var(--м));
    height: calc(215 * var(--м));
    margin: 0;
    object-fit: cover;
    border-radius: calc(15 * var(--м));
  }

  /* ── Рост дохода ────────────────────────────────────────────────── */
  .wl-pay { height: calc(844 * var(--м)); padding: 0; position: relative; }
  .wl-pay .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-pay__h {
    position: absolute;
    left: calc(11 * var(--м));
    top: calc(35 * var(--м));
    width: calc(338 * var(--м));
    margin: 0;
    font-size: calc(18 * var(--м));
    line-height: calc(26 * var(--м));
    text-align: center;
  }
  .wl-pay__steps { display: contents; }
  .wl-pay .wl-pay__card {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .wl-pay .wl-pay__card--1 { top: calc(133 * var(--м)); height: calc(223 * var(--м)); }
  .wl-pay .wl-pay__card--2 { top: calc(366 * var(--м)); height: calc(223 * var(--м)); }
  .wl-pay .wl-pay__card--3 { top: calc(599 * var(--м)); height: calc(245 * var(--м)); }
  /* Внутри карточки: две плашки с суммами, город и подпись со значком. */
  .wl-pay .wl-pay__sum {
    position: absolute;
    left: calc(20 * var(--м));
    width: calc(201 * var(--м));
    height: calc(36 * var(--м));
    margin: 0;
    padding: 0 calc(6 * var(--м));
    border-radius: calc(5 * var(--м));
    font-size: calc(20 * var(--м));
    line-height: calc(36 * var(--м));
    /* у боевой текст от левого края с малым отступом, ₽ сразу за ним */
    justify-content: flex-start;
    gap: calc(6 * var(--м));
  }
  .wl-pay__card .wl-pay__sum--blue { top: calc(25 * var(--м)); }
  .wl-pay__card .wl-pay__sum--lime { top: calc(88 * var(--м)); }
  .wl-pay__card--3 .wl-pay__sum { width: calc(205 * var(--м)); height: calc(47 * var(--м)); line-height: calc(47 * var(--м)); font-size: calc(26 * var(--м)); }
  .wl-pay__card--3 .wl-pay__sum--lime { top: calc(99 * var(--м)); }
  .wl-pay .wl-pay__where {
    position: absolute;
    left: calc(25 * var(--м));
    top: calc(130 * var(--м));
    width: calc(67 * var(--м));
    margin: 0;
    font-size: calc(9 * var(--м));
    line-height: calc(10 * var(--м));
  }
  /* «Регионы» и «Москва, СПБ» стояли ОБЕ на 130 и лежали друг на друге —
     подпись читалась мешаниной. В оригинале они под своими суммами:
     67 и 130 в первых двух карточках, 78 и 152 в третьей (она выше). */
  .wl-pay .wl-pay__where { top: calc(67 * var(--м)); }
  .wl-pay .wl-pay__where--msk { top: calc(130 * var(--м)); }
  .wl-pay .wl-pay__card--3 .wl-pay__where { top: calc(78 * var(--м)); }
  .wl-pay .wl-pay__card--3 .wl-pay__where--msk { top: calc(152 * var(--м)); }
  .wl-pay .wl-pay__grade {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(180 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(18 * var(--м));
  right: auto;
    justify-content: flex-start;  /* десктоп центрирует, на телефоне у боевой грейд слева */
  }
  .wl-pay__card--3 .wl-pay__grade { top: calc(205 * var(--м)); }
  /* Уголок подложки #3a3a3a и стрелка ↗ у первых двух ступеней — на
     телефоне боевая сохраняет их, прежде мы прятали стрелку целиком. */
  .wl-pay .wl-pay__card--1::before,
  .wl-pay .wl-pay__card--2::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: calc(85 * var(--м));
    height: calc(73 * var(--м));
    background: #3a3a3a;
    border-radius: 0 calc(20 * var(--м)) 0 calc(20 * var(--м));
  }
  .wl-pay__arrow { display: block; left: auto; top: auto; width: calc(20 * var(--м)); height: calc(20 * var(--м)); }  /* display: планшетный блок прячет, возвращаем */
  .wl-pay__step:nth-child(2) .wl-pay__arrow { right: calc(40 * var(--м)); top: calc(155 * var(--м)); }
  .wl-pay__step:nth-child(3) .wl-pay__arrow { right: calc(40 * var(--м)); top: calc(388 * var(--м)); }

  /* ── Карьерный трек ─────────────────────────────────────────────── */
  /* На телефоне трек не лесенкой, а лентой: все плашки лежат в одной точке
     и листаются вбок. Анимацию разъезда выключаем — ей тут негде идти. */
  .wl-career { height: calc(692 * var(--м)); padding: 0; position: relative; }
  .wl-career .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-career__h {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(35 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    font-size: calc(24 * var(--м));
    line-height: calc(28 * var(--м));
  }
  /* ⚠️ Не лента с прокруткой, а СЕТКА: у боевой на телефоне плашки лежат
     четырьмя рядами 1-2-2-3 (шаг 113 по x, 90 по y), а не в один ряд.
     Лентой семь плашек уезжали за экран, и под ними зияла пустота в пол-
     экрана. Порядок в разметке — десктопная лесенка, поэтому каждая плашка
     ставится по своему классу-модификатору, а не по месту в списке. */
  .wl-career__grid {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .wl-career__grid::-webkit-scrollbar { display: none; }
  .wl-career .wl-career__card {
    position: absolute;
    width: calc(103 * var(--м));
    height: calc(80 * var(--м));
    margin: 0;
    padding: calc(10 * var(--м));
    border-radius: calc(20 * var(--м));
    font-size: calc(11 * var(--м));
    line-height: calc(13 * var(--м));
    animation: none;
  }
  .wl-career .wl-career__card--dark    { left: calc(16 * var(--м));  top: calc(159 * var(--м)); }
  .wl-career .wl-career__card--linux   { left: calc(16 * var(--м));  top: calc(249 * var(--м)); }
  .wl-career .wl-career__card--windows { left: calc(129 * var(--м)); top: calc(249 * var(--м)); }
  .wl-career .wl-career__card--devops  { left: calc(16 * var(--м));  top: calc(339 * var(--м)); }
  .wl-career .wl-career__card--net     { left: calc(129 * var(--м)); top: calc(339 * var(--м)); }
  .wl-career .wl-career__card--arch    { left: calc(16 * var(--м));  top: calc(429 * var(--м)); }
  .wl-career .wl-career__card--cto     { left: calc(129 * var(--м)); top: calc(429 * var(--м)); }
  .wl-career .wl-career__card--lead    { left: calc(242 * var(--м)); top: calc(429 * var(--м)); }
  .wl-career__card--empty { display: none; }
  .wl-career__note {
    position: absolute;
    left: calc(19 * var(--м));
    top: calc(544 * var(--м));
    width: calc(322 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
  }

  /* ── Преподаватели ──────────────────────────────────────────────── */
  .wl-teach { height: calc(1471 * var(--м)); padding: 0; position: relative; }
  .wl-teach .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-teach__h {
    position: absolute;
    left: calc(60 * var(--м));
    top: calc(35 * var(--м));
    width: calc(241 * var(--м));
    margin: 0;
    font-size: calc(24 * var(--м));
    line-height: calc(28 * var(--м));
    text-align: center;
  }
  .wl-teach__list, .wl-teach__row { display: contents; }
  .wl-teach .wl-teach__card {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    padding: calc(25 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  .wl-teach .wl-teach__card--1 { top: calc(413 * var(--м)); height: calc(309 * var(--м)); }
  .wl-teach .wl-teach__card--2 { top: calc(1070 * var(--м)); height: calc(401 * var(--м)); }
  .wl-teach .wl-teach__name { margin: 0; font-size: calc(20 * var(--м)); line-height: calc(25 * var(--м)); }
  .wl-teach .wl-teach__role { margin: calc(10 * var(--м)) 0 0; font-size: calc(14 * var(--м)); line-height: calc(19 * var(--м)); }
  .wl-teach .wl-teach__list li { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(18 * var(--м)); }
  /* Фотографий две: первая над карточкой Владимира, вторая над карточкой
     Станислава. Правило было одно, и снимок Владимира не показывался вовсе. */
  .wl-teach .wl-teach__photo {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    border-radius: calc(15 * var(--м));
    object-fit: cover;
  }
  .wl-teach .wl-teach__row:nth-of-type(1) .wl-teach__photo { top: calc(85 * var(--м)); height: calc(310 * var(--м)); }
  .wl-teach .wl-teach__row:nth-of-type(2) .wl-teach__photo { top: calc(737 * var(--м)); height: calc(328 * var(--м)); }

  /* ── Программа курса: две шапки ─────────────────────────────────── */
  /* Высоту не задаём: под шапкой потоком идёт список модулей, он аккордеон
     и растёт при раскрытии. Шапка занимает свои 274 (у второй 242) отступом. */
  .wl-program { height: auto; padding: 0 0 calc(20 * var(--м)); position: relative; }
  /* Десктопный градиент даёт белое поле на первые 447 px и отступ 102 — на
     телефоне белой остаётся полоска в 35 над плитой, отступа нет вовсе.
     Селектор с :not() сильнее одного класса, поэтому повторяем его целиком. */
  .wl-program:not(.wl-program--linux) {
    padding-top: 0;
    background: linear-gradient(#fff 0 calc(35 * var(--м)), var(--bg) calc(35 * var(--м)));
  }
  /* Место под шапку даём полем ОБЁРТКИ, а не отступом списка. Отступ тут
     схлопывался наружу (обёртка без padding и border) — вниз уезжала вся
     секция, а модули оставались под шапкой. Полем самого списка тоже нельзя:
     тогда в его кадр попадает пустота под шапкой и сверка врёт. */
  .wl-program .wrap { padding-top: calc(274 * var(--м)); }
  .wl-program + .wl-program .wrap { padding-top: calc(242 * var(--м)); }
  .wl-program .wl-program__list { margin-top: 0; padding-top: 0; }
  .wl-program .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
  .wl-program .wl-program__head {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(360 * var(--м));
    height: calc(274 * var(--м));
    margin: 0;
    padding: 0;
  }
  /* Плита в оригинале на телефоне не растёт: анимацию увеличения глушим, иначе
     тёмный прямоугольник расползается и белая полоса сверху пропадает. */
  .wl-program .wl-program__head::before,
  .js-anim .wl-program__head.wl-grow.is-in::before {
    transform: none;
    inset: calc(35 * var(--м)) 0 0;
    border-radius: calc(20 * var(--м)) calc(20 * var(--м)) 0 0;
  }
  /* Отсчёт у всех четверых идёт ОТ ШАПКИ, а не от секции: шапка сама
     absolute и потому служит им точкой отсчёта. Числа с боевой (62/86/153/210
     от верха секции) уменьшены на 35 — на высоту белой полосы над плитой. */
  .wl-program__fresh {
    position: absolute;
    left: calc(95 * var(--м));
    top: calc(62 * var(--м));
    width: calc(255 * var(--м));
    height: calc(20 * var(--м));
    margin: 0;
    gap: calc(6 * var(--м));
    font-size: calc(16 * var(--м));
    line-height: calc(20.8 * var(--м));
  }
  .wl-program__fresh::before { width: calc(16 * var(--м)); height: calc(16 * var(--м)); }
  .wl-program .wl-program__h {
    position: absolute;
    left: calc(17 * var(--м));
    top: calc(86 * var(--м));
    width: calc(326 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(26 * var(--м));
    text-align: center;
  }
  /* Класс здесь именно __note. Правило раньше стояло на .wl-program__t —
     такого класса в разметке нет, и подзаголовок жил по десктопным координатам,
     вылезая ВЫШЕ заголовка. Четвёртый случай этой ошибки за перенос. */
  .wl-program .wl-program__note {
    position: absolute;
    left: calc(40 * var(--м));
    top: calc(153 * var(--м));
    width: calc(281 * var(--м));
    max-width: none;
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
    text-align: center;
  }
  /* Чипы в оригинале идут строками по ширине: «6 модулей» и «33 урока теории»
     в одной, «28 практических занятий» переносится во вторую. */
  .wl-program .wl-program__chips {
    position: absolute;
    left: 0;
    top: calc(210 * var(--м));
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: calc(4 * var(--м)) calc(5 * var(--м));
    width: calc(360 * var(--м));
    margin: 0;
    padding: 0;
  }
  .wl-program .wl-program__chips li {
    height: calc(20 * var(--м));
    padding: 0 calc(10 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
  }
  /* Вторая шапка — свои координаты, плиты над ней нет (но сама шапка есть:
     раньше тут стоял display: none, и весь заголовок Linux пропадал). */
  .wl-program + .wl-program .wl-program__head::before { display: none; }
  .wl-program + .wl-program .wl-program__head { height: calc(242 * var(--м)); top: 0; }
  .wl-program + .wl-program .wl-program__fresh { top: calc(28 * var(--м)); }
  .wl-program + .wl-program .wl-program__h { top: calc(53 * var(--м)); }
  .wl-program + .wl-program .wl-program__note { left: calc(50 * var(--м)); top: calc(120 * var(--м)); width: calc(261 * var(--м)); }
  .wl-program + .wl-program .wl-program__chips { top: calc(177 * var(--м)); }
  /* Список модулей идёт следом обычным потоком — он аккордеон, не зеро-блок. */
  .wl-program .wl-program__list { position: static; width: auto; padding-right: calc(16 * var(--м)); padding-left: calc(16 * var(--м)); padding-bottom: 0; }


  /* Модули: в оригинале на телефоне заголовок 15, текст 14 — у нас были
     десктопные 20 и 19, отчего список выходил в полтора раза выше. */
  .wl-mod__t { padding: calc(14 * var(--м)) calc(44 * var(--м)) calc(14 * var(--м)) calc(16 * var(--м)); font-size: calc(15 * var(--м)); line-height: calc(18 * var(--м)); }
  .wl-mod__t::after { right: calc(10 * var(--м)); top: 50%; transform: translateY(-50%); width: calc(26 * var(--м)); height: calc(26 * var(--м)); }  /* по центру строки, как у боевой; фикс top резал центр у трёхстрочных модулей */
  .wl-mod > :not(summary) { margin: 0 calc(16 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); }
  .wl-mod ol, .wl-mod ul { margin: 0 calc(16 * var(--м)) calc(8 * var(--м)); }
  .wl-mod > :last-child { padding-bottom: calc(16 * var(--м)); }
  /* ── Как проходит обучение: семь блоков ─────────────────────────── */
  .wl-how { padding: 0; position: relative; }
  .wl-how .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  /* Панель — подложка карточки; в оригинале её рисует отдельная фигура. */
  .wl-how::after {
    content: '';
    position: absolute;
    left: calc(16 * var(--м));
    top: 0;
    width: calc(328 * var(--м));
    height: calc(100% - 10 * var(--м));
    border-radius: calc(15 * var(--м));
    background: #2d2d2d;
    z-index: 0;
  }
  /* Цвета панелей на телефоне идут по кругу — тёмная, светлая, лаймовая —
     и не совпадают с десктопными классами. Снято с боевой поблочно. */
  .wl-how--1::after, .wl-how--4::after, .wl-how--7::after { background: #373737; }
  .wl-how--2::after, .wl-how--5::after { background: #f5f5f8; }
  .wl-how--3::after, .wl-how--6::after { background: var(--lime); }
  .wl-how--1 .wl-how__h, .wl-how--1 .wl-how__t,
  .wl-how--4 .wl-how__h, .wl-how--4 .wl-how__t,
  .wl-how--7 .wl-how__h, .wl-how--7 .wl-how__t { color: #fff; }
  .wl-how--2 .wl-how__h, .wl-how--2 .wl-how__t,
  .wl-how--3 .wl-how__h, .wl-how--3 .wl-how__t,
  .wl-how--5 .wl-how__h, .wl-how--5 .wl-how__t,
  .wl-how--6 .wl-how__h, .wl-how--6 .wl-how__t { color: var(--ink); }
  .wl-how .wrap > * { position: relative; z-index: 1; }
  .wl-how .wl-how__h {
    position: absolute;
    left: calc(36 * var(--м));
    top: calc(20 * var(--м));
    width: calc(281 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(25 * var(--м));
  }
  .wl-how .wl-how__t {
    position: absolute;
    left: calc(36 * var(--м));
    top: calc(61 * var(--м));
    width: calc(288 * var(--м));
    margin: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(16.8 * var(--м));
  }
  .wl-how__title {
    position: absolute;
    left: calc(36 * var(--м));
    top: calc(20 * var(--м));
    width: calc(288 * var(--м));
    margin: 0;
    font-size: calc(24 * var(--м));
    line-height: calc(28 * var(--м));
  }
  /* Высоты и подложки по блокам — числа из описи. */
  .wl-how--1 { height: calc(433 * var(--м)); }
  .wl-how--1::after { top: calc(80 * var(--м)); height: calc(343 * var(--м)); }
  .wl-how--1 .wl-how__h { top: calc(100 * var(--м)); }
  .wl-how--1 .wl-how__t { top: calc(139 * var(--м)); }
  .wl-how--2 { height: calc(393 * var(--м)); }
  .wl-how--3 { height: calc(458 * var(--м)); }
  .wl-how--4 { height: calc(413 * var(--м)); }
  .wl-how--5 { height: calc(418 * var(--м)); }
  .wl-how--6 { height: calc(717 * var(--м)); }
  .wl-how--7 { height: calc(645 * var(--м)); }  /* хвост диалога вернулся — секция выросла */
  /* Картинки: у каждого блока своё место, за экраном лежащие прячем. */
  .wl-how .wl-how__media, .wl-how .wl-how__big, .wl-how .wl-how__shot,
  .wl-how .wl-how__mark, .wl-how .wl-how__msg, .wl-how .wl-how__plane, .wl-how .wl-how__shield {
    /* display возвращаем явно: планшетный блок прячет значки все разом, и
       без этого позиционные правила ниже работали по невидимым элементам.
       Кому на телефоне не место — прячется точечными display: none ниже. */
    display: block;
    position: absolute;
    margin: 0;
    width: auto;
    height: auto;
  }
  /* Ролик первого блока в описи стоит за экраном, но на телефоне он виден —
     у <video> нет координатных атрибутов, поэтому числа сняты с кадра. */
  .wl-how--1 .wl-how__media {
    left: calc(36 * var(--м));
    top: calc(254 * var(--м));
    width: calc(288 * var(--м));
    height: calc(154 * var(--м));
    border-radius: calc(10 * var(--м));
  }
  .wl-how--2 .wl-how__media { left: calc(36 * var(--м)); top: calc(171 * var(--м)); width: calc(288 * var(--м)); height: calc(192 * var(--м)); object-fit: cover; border-radius: calc(10 * var(--м)); }
  /* Стикер «НЕТ ДЕДЛАЙНОВ» у боевой есть и на телефоне — прятали зря.
     Поворот запечён в картинке, координаты сняты пиксельным замером. */
  .wl-how--2 .wl-how__mark { display: block; left: calc(212 * var(--м)); top: calc(106 * var(--м)); width: calc(148 * var(--м)); height: calc(148 * var(--м)); }  /* по замеру боевой: стикер лежит на ВЕРХНЕМ углу фото, а не на нижнем */
  .wl-how--3 .wl-how__big { left: calc(-60 * var(--м)); top: calc(125 * var(--м)); width: calc(480 * var(--м)); height: calc(340 * var(--м)); max-width: none; }
  .wl-how--3 .wl-how__mark--3a { left: calc(13 * var(--м)); top: calc(162 * var(--м)); width: calc(75 * var(--м)); height: calc(75 * var(--м)); }
  .wl-how--3 .wl-how__mark--3b { left: calc(278 * var(--м)); top: calc(300 * var(--м)); width: calc(67 * var(--м)); height: auto; }  /* облако у боевой на телефоне есть — прежде пряталось */
  .wl-how--3 .wl-how__media { left: calc(41 * var(--м)); top: calc(195 * var(--м)); width: calc(277 * var(--м)); height: calc(156 * var(--м)); }
  .wl-how--4 .wl-how__media { left: calc(36 * var(--м)); top: calc(191 * var(--м)); width: calc(288 * var(--м)); height: calc(192 * var(--м)); object-fit: cover; border-radius: calc(10 * var(--м)); }
  .wl-how--4 .wl-how__mark { left: calc(280 * var(--м)); top: calc(161 * var(--м)); width: calc(55 * var(--м)); height: auto; }  /* пазлы у боевой видны и на телефоне */
  /* Ролик в пятом блоке есть — он просто не попал в опись, потому что у
     видео нет координатных атрибутов. Числа сняты с кадра сверки. */
  .wl-how--5 .wl-how__media {
    left: calc(36 * var(--м));
    top: calc(240 * var(--м));
    width: calc(288 * var(--м));
    height: calc(156 * var(--м));
    border-radius: calc(10 * var(--м));
  }
  /* Оба снимка переписки крупные и идут друг под другом внахлёст. В описи у
     второго стоит 158×80 — это его размер на десктопе, на телефоне он такой
     же большой, как первый. Числа сняты с кадра сверки. */
  /* Снимки переписки в оригинале ПОВЁРНУТЫ на ±5°: первый по часовой,
     второй против. Числа — собственные размеры элементов (до масштаба),
     а не габариты кадра: у повёрнутого прямоугольника кадр заметно больше
     его самого, и по кадру размер выходит завышенным. */
  .wl-how--6 .wl-how__shot--a { left: calc(32 * var(--м)); top: calc(216 * var(--м)); width: calc(284 * var(--м)); height: calc(184.6 * var(--м)); transform: rotate(5deg); }
  .wl-how--6 .wl-how__shot--b { left: calc(27 * var(--м)); top: calc(410 * var(--м)); width: calc(289 * var(--м)); height: calc(245.6 * var(--м)); transform: rotate(-5deg); }
  .wl-how--6 .wl-how__bar { display: none; }
  /* Здесь текст крупнее, чем в остальных шести блоках: 14/20 против 12/16,8. */
  .wl-how--6 .wl-how__h { line-height: calc(26 * var(--м)); }
  .wl-how--6 .wl-how__t { font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .wl-how--7 .wl-how__msg--1 { left: calc(36 * var(--м)); top: calc(237 * var(--м)); width: calc(247 * var(--м)); height: calc(86 * var(--м)); }
  .wl-how--7 .wl-how__msg--2 { left: calc(36 * var(--м)); top: calc(328 * var(--м)); width: calc(236 * var(--м)); height: calc(68 * var(--м)); }
  .wl-how--7 .wl-how__msg--3 { left: calc(36 * var(--м)); top: calc(401 * var(--м)); width: calc(211 * var(--м)); height: calc(51 * var(--м)); }
  /* У боевой на телефоне виден ВЕСЬ диалог (5 сообщений), щит слева от
     первого сообщения и стрелка-курсор на втором — раньше хвост диалога и
     стрелку прятали, а щит стоял не там. Координаты по пиксельным замерам. */
  .wl-how--7 .wl-how__msg--4 { left: calc(46 * var(--м)); top: calc(460 * var(--м)); width: calc(261 * var(--м)); height: calc(83 * var(--м)); }
  .wl-how--7 .wl-how__msg--5 { left: calc(36 * var(--м)); top: calc(552 * var(--м)); width: calc(230 * var(--м)); height: calc(51 * var(--м)); }
  .wl-how--7 .wl-how__plane { display: block; left: calc(250 * var(--м)); top: calc(315 * var(--м)); width: calc(46 * var(--м)); height: auto; }
  .wl-how--7 .wl-how__shield { display: block; left: calc(11 * var(--м)); top: calc(238 * var(--м)); width: calc(40 * var(--м)); height: auto; }  /* 34, а не 60: щит закрывал первое слово в пузыре «Коллеги, привет» */

  /* ── Отзывы ─────────────────────────────────────────────────────── */
  /* Заголовок с листалкой в оригинале — отдельная запись высотой 206, лента
     идёт следом со своими 893. У нас это одна секция, отсюда и общая высота. */
  .reviews { height: calc(1099 * var(--м)); padding: 0; position: relative; overflow: hidden; }
  .reviews .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .reviews__top { position: absolute; left: 0; top: 0; width: calc(360 * var(--м)); height: calc(206 * var(--м)); padding: 0; }
  .reviews__h { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(284 * var(--м)); margin: 0; font-size: calc(30 * var(--м)); line-height: calc(36 * var(--м)); }
  /* Стрелки и счётчик на телефоне ЕСТЬ: два кружка 45×45 под заголовком. */
  .reviews__count, .reviews__nav { display: flex; }
  /* Стрелки и счётчик — от верха секции: 142 и 166 в канве. Прежние числа
     считались от заголовка и потому стояли на 70 выше. */
  .reviews__nav { position: absolute; left: calc(16 * var(--м)); top: calc(142 * var(--м)); gap: calc(10 * var(--м)); }
  .reviews .rv-arrow { width: calc(45 * var(--м)); height: calc(45 * var(--м)); border-radius: calc(5 * var(--м)); }
  .reviews .rv-arrow svg { width: calc(12 * var(--м)); height: calc(21 * var(--м)); }
  .reviews__count { position: absolute; left: calc(257 * var(--м)); top: calc(166 * var(--м)); font-size: calc(24 * var(--м)); line-height: calc(21.6 * var(--м)); }
  .rv-track {
    position: absolute;
    left: 0;
    top: calc(206 * var(--м));
    width: calc(360 * var(--м));
    margin: 0;
    padding: 0 calc(16 * var(--м));
    scroll-padding-left: calc(16 * var(--м));
    grid-auto-columns: calc(328 * var(--м));
    gap: calc(10 * var(--м));
  }
  .reviews .rv { padding: calc(20 * var(--м)); border-radius: calc(10 * var(--м)); }
  .reviews .rv__top { gap: calc(20 * var(--м)); }
  .reviews .rv__ava { width: calc(80 * var(--м)); height: calc(80 * var(--м)); }
  .reviews .rv__name { font-size: calc(16 * var(--м)); line-height: calc(22.4 * var(--м)); }
  .reviews .rv__q { margin-top: calc(20 * var(--м)); }
  .reviews .rv__q span { font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  /* Зазоры сняты с боевой: до снимка 26, до лаймовой подписи 23. Прежние 20
     и 16 копили недостачу, и карточка выходила на 9 короче оригинальной. */
  .reviews .rv__shot { margin-top: calc(26 * var(--м)); border-radius: calc(6 * var(--м)); }
  /* Лаймовая плашка в оригинале обжимает текст вплотную: коробка 259×17 при
     интерлиньяже 17,4, то есть полей нет вовсе. Десктопные 5×8 добавляли
     10 к высоте и 9,5 к ширине — на них карточка и вылезала. */
  .reviews .rv__role { margin-top: calc(23 * var(--м)); padding: 0; font-size: calc(12 * var(--м)); line-height: calc(17.4 * var(--м)); }

  /* ── Резюме после обучения ──────────────────────────────────────── */
  .wl-cv { min-height: calc(1490 * var(--м)); padding: 0 0 calc(40 * var(--м)); position: relative; }  /* height -> min-height: после сужения списка «Что я умею» контент стал выше и вылезал из фикс-высоты на широких телефонах */
  .wl-cv .wrap { position: static; width: calc(360 * var(--м)); height: auto; max-width: none; margin: 0; padding: calc(111 * var(--м)) 0 0; }  /* отступ карточки задаёт wrap: margin-top у самой карточки схлопывался наружу и ломал высоту секции */
  .wl-cv__title {
    position: absolute;
    left: calc(79 * var(--м));
    top: calc(35 * var(--м));
    width: calc(203 * var(--м));
    margin: 0;
    font-size: calc(25 * var(--м));
    line-height: calc(28 * var(--м));
    text-align: center;
  }
  /* Карточка в потоке с автовысотой: с фикс-высотой контент, ставший чуть
     выше после сужения списка, вылезал из неё на широких телефонах. Отступ
     сверху заменяет прежний top, заголовок над ним остаётся абсолютным. */
  .wl-cv .wl-cv__card {
    position: relative;
    top: 0;  /* десктопное top: 201px при relative снова начинало действовать */
    margin: 0 auto;
    width: calc(328 * var(--м));
    min-height: calc(1379 * var(--м));
    padding: calc(20 * var(--м));
    border-radius: calc(15 * var(--м));
    box-shadow: inset 0 0 0 calc(3 * var(--м)) var(--violet);
  }
  /* Должность в оригинале узкая — 155 в канве, и потому идёт в три строки,
     обтекая круглый ролик справа. На всю ширину она вставала в две. */
  .wl-cv .wl-cv__role { position: static; width: calc(155 * var(--м)); margin: 0; font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  /* Лаймовая подсветка суммы — отдельная фигура под текстом, а не фон строки.
     Она была спрятана, и на её месте внизу карточки висел пустой лаймовый
     прямоугольник: в потоке ему просто негде было встать. */
  .wl-cv .wl-cv__hl {
    display: block;
    position: absolute;
    left: calc(42 * var(--м));
    top: calc(108 * var(--м));
    width: calc(79 * var(--м));
    height: calc(18 * var(--м));
    z-index: 0;
  }
  .wl-cv .wl-cv__sum, .wl-cv .wl-cv__unit { position: relative; left: auto; top: auto; z-index: 1; display: inline; margin: 0; font-size: calc(16 * var(--м)); line-height: calc(12.8 * var(--м)); }
  .wl-cv .wl-cv__sum { margin-top: calc(19 * var(--м)); display: inline-block; }
  .wl-cv .wl-cv__unit { margin-left: calc(6 * var(--м)); }
  /* Круглый ролик на телефоне ЕСТЬ: 100×100 в правом верхнем углу карточки. */
  .wl-cv .wl-cv__video {
    display: block;
    position: absolute;
    left: calc(208 * var(--м));
    top: calc(20 * var(--м));
    width: calc(100 * var(--м));
    height: calc(100 * var(--м));
    margin: 0;
  }
  .wl-cv .wl-cv__h { position: static; margin: calc(31 * var(--м)) 0 calc(10 * var(--м)); font-size: calc(18 * var(--м)); line-height: calc(18 * var(--м)); }
  /* Разбивка чипов по строкам в разметке — десктопная, на телефоне оригинал
     набивает их плотнее и укладывает в пять строк вместо шести. Строки-обёртки
     убираем из раскладки (display: contents), а сами чипы пускаем плавающими:
     тогда они переносятся по ширине карточки, как в оригинале. */
  .wl-cv .wl-cv__row { position: static; display: contents; }
  .wl-cv .wl-cv__chip { float: left; width: auto !important; height: calc(18 * var(--м)); margin: 0 calc(5 * var(--м)) calc(5 * var(--м)) 0; padding: 0 calc(6 * var(--м)); font-size: calc(12 * var(--м)); line-height: calc(18 * var(--м)); border-radius: calc(2 * var(--м)); }
  .wl-cv .wl-cv__h, .wl-cv .wl-cv__do { clear: both; }
  .wl-cv .wl-cv__do { position: static; width: auto; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(19.6 * var(--м)); }
  .wl-cv .wl-cv__do li { max-width: calc(250 * var(--м)); padding-left: calc(25 * var(--м)); margin-top: calc(8 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); }  /* 250 — по длинным строкам боевой; уже - лишние переносы, шире - другие */
  .wl-cv .wl-cv__do li:first-child { margin-top: 0; }
  .wl-cv .wl-cv__do li::before { top: calc(4 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }
  /* Лаймовая плита под выводом на телефоне одна, а не две: на десктопе фигуру
     рисует .wl-cv__strip, текст лежит поверх. Здесь фон отдан самому тексту. */
  .wl-cv .wl-cv__strip { display: none; }
  .wl-cv .wl-cv__note { position: static; width: auto; margin: calc(31 * var(--м)) calc(-10 * var(--м)) 0; padding: calc(20 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(18 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); border-radius: calc(10 * var(--м)); background: var(--lime); }

  /* ── Сертификат ─────────────────────────────────────────────────── */
  .wl-cert { height: calc(497 * var(--м)); padding: 0; position: relative; }
  .wl-cert .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-cert .wl-cert__h {
    position: absolute;
    left: calc(33 * var(--м));
    top: calc(35 * var(--м));
    width: calc(299 * var(--м));
    margin: 0;
    font-size: calc(18 * var(--м));
    line-height: calc(24 * var(--м));
    text-align: center;
  }
  .wl-cert .wl-cert__t {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(128 * var(--м));
    width: calc(320 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
    text-align: center;
  }
  /* Снимок один и лежит под текстом. Обёртки `__shots` в разметке нет —
     прошлый заход правил несуществующий класс, и картинка оставалась вверху. */
  .wl-cert .wl-cert__shot {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(274 * var(--м));
    width: calc(328 * var(--м));
    height: calc(223 * var(--м));
    margin: 0;
    object-fit: cover;
    border-radius: calc(8 * var(--м));
  }

  /* ── Форматы участия ────────────────────────────────────────────── */
  .wl-plans { height: auto; padding: calc(65 * var(--м)) 0 0; position: relative; }
  .wl-plans .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  /* padding-top: 0 обязателен: планшетное правило ставит заголовку 40 px, и без
     сброса весь блок уезжает вниз ровно на эти 40 — отступ секции тут свой. */
  .wl-plans__title { position: static; padding-top: 0; margin: 0 0 calc(20 * var(--м)); font-size: calc(25 * var(--м)); line-height: calc(25 * var(--м)); text-align: center; }
  /* Тёмную плиту секции рисует псевдоэлемент, а он абсолютный — и потому
     ложился ПОВЕРХ карточек, которые в потоке. Отсюда «тёмная карточка с
     нечитаемым текстом»: сами карточки были на месте, их просто накрывало.
     Лечится слоями, а не цветом. */
  /* Плита кроет секцию целиком: на телефоне она начиналась ниже заголовка,
     и белый «Форматы участия» оказывался на белом фоне — читался как пустота. */
  /* Плита начинается на 35 от верха секции — над ней в оригинале остаётся
     белая полоса, скруглённая по верхним углам. */
  .wl-plans::before { z-index: 0; inset: calc(35 * var(--м)) 0 0; border-radius: calc(20 * var(--м)) calc(20 * var(--м)) 0 0; }
  /* Заголовок поднимаем над плитой слоем — но position: relative оживляет
     десктопный top: 173px, и «Форматы участия» уезжали внутрь первой карточки,
     белым по светлому. Координаты обнуляем вместе со сменой позиционирования. */
  .wl-plans__title { position: relative; left: auto; right: auto; top: auto; z-index: 1; }
  /* Числа ниже сняты с боевой при ширине 375 и переведены в канву (×0,96):
     карточка 16/110, 328 шириной, поля 25/20; названия 24/26,4; чипы 13,4 при
     высоте 20; список 13,4/17,5 с шагом 6,7; цена 38,4. На глаз тут не выйдет —
     разница «наше плотнее оригинала» набегает по крупице на каждой строке. */
  .wl-plans .wl-plan {
    background: #f5f5f8;
    color: var(--ink);
    position: relative;
    /* Обнуляем десктопные координаты: при relative они работают как смещение,
       и второй пакет уезжал на 623 px вправо, за край экрана. */
    left: auto;
    top: auto;
    z-index: 1;
    width: calc(328 * var(--м));
    height: auto;
    margin: 0 auto calc(10 * var(--м));
    padding: calc(25 * var(--м)) calc(20 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  .wl-plans .wl-plan__name { position: static; width: auto; margin: 0 0 calc(30 * var(--м)); font-size: calc(25 * var(--м)); line-height: calc(27.5 * var(--м)); letter-spacing: calc(-0.9 * var(--м)); }
  /* Ширины названий заданы, иначе строка ломается не там: в оригинале первый
     пакет переносится после «База», второй — после «сисадмина». */
  .wl-plans .wl-plan--1 .wl-plan__name { width: calc(273 * var(--м)); }
  .wl-plans .wl-plan--2 .wl-plan__name { width: calc(235 * var(--м)); }
  /* Пингвин на телефоне остаётся: в канве 201/25 от угла карточки, 46×53. */
  .wl-plans .wl-plan__badge {
    display: block;
    left: calc(201 * var(--м));
    top: calc(25 * var(--м));
    width: calc(46 * var(--м));
    height: calc(53 * var(--м));
  }
  .wl-plans .wl-rub { width: calc(8 * var(--м)); height: calc(11 * var(--м)); margin-left: calc(3 * var(--м)); }
  .wl-cv .wl-rub--cv { width: calc(10 * var(--м)); height: calc(13 * var(--м)); margin-left: calc(4 * var(--м)); }
  .wl-plans .wl-plan__chips { position: static; flex-wrap: wrap; gap: calc(5 * var(--м)); margin: 0 0 calc(5 * var(--м)); }
  .wl-plans .wl-plan__chip { width: auto !important; height: calc(20 * var(--м)); padding: 0 calc(8 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .wl-plans .wl-plan__list { position: static; width: auto; margin: calc(15 * var(--м)) 0 0; font-size: calc(14 * var(--м)); line-height: calc(18.2 * var(--м)); letter-spacing: 0; }
  .wl-plans .wl-plan__list li { margin-top: calc(6.7 * var(--м)); padding-left: calc(25 * var(--м)); }
  .wl-plans .wl-plan__list li::before { top: calc(3 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }
  /* Иконка «i» на телефоне вдвое меньше десктопной — 20 в канве. */
  .wl-plans .wl-plan__tip { width: calc(20 * var(--м)); height: calc(17.5 * var(--м)); margin-left: calc(5 * var(--м)); }
  .wl-plans .wl-plan__tip .wl-tip__btn,
  .wl-plans .wl-plan__tip .wl-tip__btn img { width: calc(20 * var(--м)); height: calc(20 * var(--м)); }
  .wl-plans .wl-plan__old, .wl-plans .wl-plan__price, .wl-plans .wl-plan__per, .wl-plans .wl-plan__foot { position: static; margin: 0; }
  /* Старая цена — своей строкой, «от 5 210» и «/мес*» — рядом, как в оригинале. */
  .wl-plans .wl-plan__old { display: block; margin-top: calc(40 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(11.2 * var(--м)); }
  .wl-plans .wl-plan__price, .wl-plans .wl-plan__per { display: inline-block; vertical-align: baseline; }
  .wl-plans .wl-plan__price { margin-top: calc(2 * var(--м)); font-size: calc(40 * var(--м)); line-height: calc(40 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); }
  .wl-plans .wl-plan__per { margin-left: calc(15 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(11.2 * var(--м)); }
  .wl-plans .wl-plan__foot { display: block; font-size: calc(12 * var(--м)); line-height: calc(9.6 * var(--м)); }
  .wl-plans .wl-plan__btn { position: static; width: 100%; height: calc(50 * var(--м)); margin-top: calc(5 * var(--м)); font-size: calc(12 * var(--м)); border-radius: calc(10 * var(--м)); }
  .wl-plans .wl-plan__btn--blue { margin-top: calc(40 * var(--м)); }
  .wl-plans .wl-plan__pay { position: static; margin-top: calc(20 * var(--м)); gap: calc(6 * var(--м)); }
  /* Плашки — картинками, каждая своей ширины; высота идёт следом за пропорцией. */
  .wl-plans .wl-plan__pay img { height: auto; }
  .wl-plans .wl-plan__pay img:nth-child(1) { width: calc(233 * var(--м)); }
  .wl-plans .wl-plan__pay img:nth-child(2) { width: calc(280 * var(--м)); }
  .wl-plans .wl-plan__pay img:nth-child(3) { width: calc(257 * var(--м)); }

  /* ── Оплата и рассрочка ─────────────────────────────────────────── */
  .wl-pay2 { height: calc(1017 * var(--м)); padding: 0; position: relative; }
  .wl-pay2 .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-pay2 .wl-pay2__card {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    padding: calc(20 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  /* Карточки адресуем модификаторами: nth-of-type считает среди всех детей
     и промахивается, как уже было с блоками «как проходит». */
  .wl-pay2 .wl-pay2__card--bank { top: calc(35 * var(--м)); height: calc(193 * var(--м)); }
  .wl-pay2 .wl-pay2__card--inhouse { top: calc(238 * var(--м)); height: calc(399 * var(--м)); }
  .wl-pay2 .wl-pay2__card--abroad { top: calc(647 * var(--м)); height: calc(180 * var(--м)); }
  .wl-pay2 .wl-pay2__card--tax { top: calc(837 * var(--м)); height: calc(179 * var(--м)); }
  /* Значки банков — 40×40 в один ряд, шестым идёт кружок с «i». */
  .wl-pay2 .wl-pay2__banks { display: flex; flex-wrap: nowrap; gap: calc(5 * var(--м)); margin-top: calc(20 * var(--м)); }
  .wl-pay2 .wl-pay2__banks img, .wl-pay2 .wl-pay2__more { width: calc(40 * var(--м)); height: calc(40 * var(--м)); flex: none; }
  /* ⚠️ Картинка «0%» — это .wl-pay2__pic, а не __bg: правило ниже было
     написано на __bg (это карта мира у «другой страны»), и «ноль процентов»
     не показывался вовсе. Пятый случай правила на чужой класс за перенос. */
  .wl-pay2 .wl-pay2__pic {
    display: block;
    position: absolute;
    left: calc(51 * var(--м));
    top: 0;
    width: calc(227 * var(--м));
    height: calc(250 * var(--м));
    margin: 0;
    object-fit: contain;
  }
  /* Карта мира — фоном карточки «Можно оплатить из другой страны». */
  .wl-pay2 .wl-pay2__bg {
    display: block;
    position: absolute;
    left: 0;
    top: calc(51 * var(--м));
    width: calc(328 * var(--м));
    height: calc(115 * var(--м));
    margin: 0;
    object-fit: cover;
  }
  .wl-pay2 .wl-pay2__plate { display: none; }
  /* Логотип налоговой — крупный, слева от заголовка. */
  .wl-pay2 .wl-pay2__fns { position: absolute; left: calc(20 * var(--м)); top: calc(20 * var(--м)); width: calc(129 * var(--м)); height: calc(129 * var(--м)); margin: 0; }
  .wl-pay2 .wl-pay2__h { margin: 0; font-size: calc(18.3 * var(--м)); line-height: calc(23.8 * var(--м)); }
  .wl-pay2 .wl-pay2__t { margin: calc(15 * var(--м)) 0 0; font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); }
  /* Заголовок и текст внутренней рассрочки стоят ПОД картинкой, у самого низа. */
  .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__h { position: absolute; left: calc(20 * var(--м)); top: calc(286 * var(--м)); width: calc(281 * var(--м)); }
  .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__t { position: absolute; left: calc(20 * var(--м)); top: calc(327 * var(--м)); width: calc(188 * var(--м)); margin: 0; }
  /* left/top обнуляем вместе со сменой позиционирования: у текста «другой
     страны» остаётся десктопный top: 124px, и при relative он работал
     смещением — абзац уезжал из своей карточки в соседнюю, поверх
     «Налогового вычета». */
  .wl-pay2 .wl-pay2__card--abroad .wl-pay2__h { position: relative; left: auto; top: auto; z-index: 1; width: calc(254 * var(--м)); }
  .wl-pay2 .wl-pay2__card--abroad .wl-pay2__t { position: relative; left: auto; top: auto; z-index: 1; width: calc(244 * var(--м)); }
  /* У налогового вычета текст уходит вправо от логотипа. */
  .wl-pay2 .wl-pay2__h--tax { position: absolute; left: calc(167 * var(--м)); top: calc(20 * var(--м)); width: calc(122 * var(--м)) !important; }
  .wl-pay2 .wl-pay2__t--tax { position: absolute; left: calc(167 * var(--м)); top: calc(86 * var(--м)); width: calc(142 * var(--м)); margin: 0; }

  /* ── Гарантии ───────────────────────────────────────────────────── */
  .wl-guar { height: calc(704 * var(--м)); padding: 0; position: relative; }
  .wl-guar .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-guar .wl-guar__card {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328 * var(--м));
    margin: 0;
    padding: calc(20 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  .wl-guar .wl-guar__card--back { top: calc(35 * var(--м)); height: calc(188 * var(--м)); }
  .wl-guar .wl-guar__card--job { top: calc(233 * var(--м)); height: calc(248 * var(--м)); }
  .wl-guar .wl-guar__card--money { top: calc(491 * var(--м)); height: calc(213 * var(--м)); }
  .wl-guar .wl-guar__h { margin: 0; font-size: calc(18.3 * var(--м)); line-height: calc(23.8 * var(--м)); }
  .wl-guar .wl-guar__t { margin: calc(10 * var(--м)) 0 0; font-size: calc(12.8 * var(--м)); line-height: calc(19.2 * var(--м)); }
  .wl-guar .wl-guar__link { display: inline-block; margin-top: calc(12 * var(--м)); font-size: calc(11 * var(--м)); line-height: calc(15.4 * var(--м)); }
  /* Значок стоит в СЕРОЙ СКРУГЛЁННОЙ ПЛИТКЕ — это она, .wl-guar__plate,
     которую планшетный блок прячет заодно со значком. Без неё синий щит
     висел на пустом месте, а текст начинался на его высоте и уезжал под
     него: у боевой абзац идёт НИЖЕ плитки, а заголовок — справа от неё
     и в две строки. Числа сняты с боевой на 393. */
  .wl-guar .wl-guar__card--back .wl-guar__plate {
    display: block;
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(20 * var(--м));
    width: calc(60 * var(--м));
    height: calc(60 * var(--м));
    border-radius: calc(14 * var(--м));
    background: #3e3e3e;
  }
  .wl-guar .wl-guar__icon { display: block; position: absolute; left: calc(32 * var(--м)); top: calc(32 * var(--м)); width: calc(36 * var(--м)); height: calc(36 * var(--м)); }
  .wl-guar .wl-guar__card--back .wl-guar__h {
    position: absolute;
    left: calc(100 * var(--м));
    top: calc(20 * var(--м));
    width: calc(149 * var(--м)) !important;  /* important: планшетный width:auto !important иначе не пускает перенос */
    margin: 0;
  }
  .wl-guar .wl-guar__card--back .wl-guar__t {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(91 * var(--м));
    width: calc(260 * var(--м)) !important;
    margin: 0;
  }
  /* display: без него синяя карточка «Доведём до трудоустройства» стояла
     ПУСТОЙ — значки SuperJob и hh.ru скрывал планшетный блок. Заголовок у
     боевой прижат не к верху карточки, а к 110: сверху место под значки. */
  .wl-guar .wl-guar__coin { display: block; position: absolute; }
  .wl-guar .wl-guar__coin--1 { left: calc(207 * var(--м)); top: calc(20 * var(--м)); width: calc(74 * var(--м)); height: calc(74 * var(--м)); }
  .wl-guar .wl-guar__coin--2 { left: calc(240 * var(--м)); top: calc(48 * var(--м)); width: calc(77 * var(--м)); height: calc(77 * var(--м)); }
  .wl-guar .wl-guar__card--money .wl-guar__h {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(110 * var(--м));
    width: calc(219 * var(--м)) !important;
    margin: 0;
  }

  /* ── Закрытый клуб выпускников ──────────────────────────────────── */
  /* ⚠️ Телефон с перепиской ПРОПАДАЛ ЦЕЛИКОМ: планшетный блок прячет
     .wl-club__phone и .wl-club__screen разом, а мобильный им место не
     возвращал — секция схлопывалась до высоты одного абзаца, и блок
     выглядел обрезанным. У боевой картинка есть, снята на 393:
     рамка 322x595 от левого края, ролик 261x561 внутри неё. */
  /* ⚠️ На телефоне у боевой блок БЕЛЫЙ с тёмным текстом, а не тёмная плита
     как на десктопе. Нашу плиту рисует .wl-club::before (inset: 0, тёмная,
     со скруглённым низом) — она ложилась поверх белого фона секции, и
     тёмный текст оказывался на тёмном: заголовок и абзац читались едва.
     На телефоне плиту снимаем, фон секции (#fff) остаётся как есть. */
  .wl-club { padding: calc(36 * var(--м)) 0 0; }
  .wl-club::before { content: none; }
  .wl-club .wl-club__clip { position: relative; height: calc(872 * var(--м)); overflow: hidden; }
  .wl-club .wl-club__phone {
    display: block;
    position: absolute;
    left: calc(15 * var(--м));
    top: calc(225 * var(--м));
    width: calc(322 * var(--м));
    height: calc(607 * var(--м));
    max-width: none;
  }
  .wl-club .wl-club__screen {
    display: block;
    position: absolute;
    left: calc(50 * var(--м));
    top: calc(245 * var(--м));
    width: calc(261 * var(--м));
    height: calc(567 * var(--м));
    max-width: none;
    object-fit: cover;
  }

  /* ── Мини-курс ──────────────────────────────────────────────────── */
  .wl-mini { height: calc(531 * var(--м)); padding: 0; position: relative; overflow: hidden; }
  .wl-mini .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  /* ⚠️ Плиту рисует ЭЛЕМЕНТ .wl-mini__slab, а не псевдоэлемент. Планшетное
     правило растягивает его во всю секцию, и на телефоне он накрывал всё
     лаймом — включая тёмные поля, которые в оригинале видны по краям.
     Псевдоэлемент тут был вторым, никому не нужным слоем: он лежал ПОД
     плитой и потому казался правильным, пока не посмотрел, что под курсором.
     Правим сам элемент, псевдоэлемент выключаем. */
  .wl-mini::before { content: none; }
  .wl-mini .wl-mini__slab {
    left: calc(16 * var(--м));
    right: auto;
    top: calc(35 * var(--м));
    bottom: auto;
    width: calc(328 * var(--м));
    height: calc(496 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  .wl-mini .wrap > * { position: relative; z-index: 1; }
  .wl-mini__ты { display: none; }
  .wl-mini__вы { display: inline; }
  .wl-mini .wl-mini__h {
    position: absolute;
    left: calc(31 * var(--м));
    top: calc(55 * var(--м));
    width: calc(240 * var(--м));
    margin: 0;
    /* 20, а не 18: генератор типографики пометил этот класс «спорным» и
       обошёл его — внутри заголовка есть подсветка, и она сматчилась с
       ДЕСКТОПНЫМИ двойниками (25/-1,5/30), уведёнными за экран. Верное
       значение у видимого элемента: 20/24 при межбуквенном -1. */
    font-size: calc(20 * var(--м));
    line-height: calc(24 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  .wl-mini .wl-mini__t {
    position: absolute;
    left: calc(31 * var(--м));
    top: calc(166 * var(--м));
    width: calc(279 * var(--м));
    margin: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(17 * var(--м));
  }
  .wl-mini .wl-mini__btn {
    position: absolute;
    left: calc(31 * var(--м));
    top: calc(220 * var(--м));
    width: calc(298 * var(--м));
    height: calc(50 * var(--м));
    margin: 0;
    font-size: calc(13 * var(--м));
    border-radius: calc(8 * var(--м));
  }
  /* Рамка планшета и ролик в ней: планшетный блок ролик прячет, из-за чего
     внутри рамки оставалось пустое белое поле. */
  .wl-mini .wl-mini__video {
    display: block;
    position: absolute;
    left: calc(45 * var(--м));
    top: calc(300 * var(--м));
    width: calc(270 * var(--м));
    height: calc(196 * var(--м));
    margin: 0;
    object-fit: cover;
    border-radius: calc(4 * var(--м));
  }
  .wl-mini .wl-mini__frame {
    position: absolute;
    left: calc(31 * var(--м));
    top: calc(290 * var(--м));
    width: calc(298 * var(--м));
    height: calc(215 * var(--м));
    margin: 0;
    object-fit: cover;
    border-radius: calc(10 * var(--м));
  }

  /* ── Вопрос-ответ ───────────────────────────────────────────────── */
  .wl-faq { height: auto; padding: calc(35 * var(--м)) 0 calc(30 * var(--м)); position: relative; }
  .wl-faq .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .wl-faq__title { position: static; margin: 0 calc(18 * var(--м)) calc(20 * var(--м)); font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  .wl-faq__list { position: static; width: auto; padding: 0 calc(16 * var(--м)); }
  .wl-faq .wl-faq__q { padding: calc(14 * var(--м)) calc(44 * var(--м)) calc(14 * var(--м)) calc(16 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(18 * var(--м)); }
  .wl-faq .wl-faq__q::after { right: calc(10 * var(--м)); top: calc(12 * var(--м)); width: calc(26 * var(--м)); height: calc(26 * var(--м)); }
  .wl-faq .wl-faq__a { margin: 0 calc(16 * var(--м)); padding-bottom: calc(14 * var(--м)); font-size: calc(13 * var(--м)); line-height: calc(19 * var(--м)); }

  /* ── Остались вопросы ───────────────────────────────────────────── */
  .wl-ask { height: auto; padding: 0 0 calc(35 * var(--м)); position: relative; }
  .wl-ask .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  /* Та же беда, что в «форматах»: синяя плита абсолютная и ложится поверх
     формы. Слои расставляем явно, иначе секция выглядит пустой. */
  /* relative без обнуления left/top — ловушка: у элемента остаются десктопные
     координаты, и они начинают работать как СМЕЩЕНИЕ. Форма уезжала на 656 px
     вправо, за экран, и секция выглядела пустой синей плитой. */
  .wl-ask .wrap > *, .wl-ask__form {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
  }
  .wl-ask .wl-ask__slab {
    z-index: 0;
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(35 * var(--м));
    width: calc(328 * var(--м));
    height: calc(100% - 70 * var(--м));
    border-radius: calc(15 * var(--м));
  }
  .wl-ask .wl-ask__h {
    /* relative, а не static: иначе z-index не работает и плита накрывает. */
    position: relative;
    width: auto;
    margin: 0 calc(32.5 * var(--м));
    padding-top: calc(50 * var(--м));
    font-size: calc(20 * var(--м));
    line-height: calc(22 * var(--м));
    text-align: center;
  }
  /* ⚠️ Фото основателя на телефоне ЕСТЬ — раньше тут стояло display: none по
     ошибочному выводу из описи. У <img> нет координатных атрибутов Тильды, и в
     опись он не попадает; числа сняты с боевой: -6/461 при 373×410. Ровно та же
     засада, что с роликами в блоках «как проходит». */
  .wl-ask .wl-ask__photo {
    display: block;
    position: absolute;
    left: calc(-6 * var(--м));
    top: calc(461 * var(--м));
    width: calc(373 * var(--м));
    height: calc(410 * var(--м));
    margin: 0;
    object-fit: contain;
  }
  /* display возвращаем явно: планшетный блок прячет их вместе с фото. */
  .wl-ask .wl-ask__deco, .wl-ask .wl-ask__card { display: block; }
  .wl-ask .wl-ask__deco { position: absolute; margin: 0; }
  /* Скругление синей плиты: 10 у Zabbix и MikroTik против 20 на больших
     курсах — снято замером у всех трёх. */
  .page-zabbix .wl-ask__slab,
  .page-mikrotik .wl-ask__slab { border-radius: calc(10 * var(--м)); }
  .wl-ask .wl-ask__deco--1 { left: calc(34 * var(--м)); top: calc(534 * var(--м)); width: calc(49 * var(--м)); height: calc(56 * var(--м)); }
  .wl-ask .wl-ask__deco--2 { left: calc(232.2 * var(--м)); top: calc(497.4 * var(--м)); width: calc(89.8 * var(--м)); height: calc(86.5 * var(--м)); }
  .wl-ask .wl-ask__deco--3 { left: calc(207.1 * var(--м)); top: calc(605.1 * var(--м)); width: calc(101 * var(--м)); height: calc(109.1 * var(--м)); }
  .wl-ask .wl-ask__card {
    position: absolute;
    left: calc(67 * var(--м));
    top: calc(767 * var(--м));
    width: calc(226 * var(--м));
    height: calc(99 * var(--м));
    margin: 0;
    padding: calc(13 * var(--м));
    border-radius: calc(10 * var(--м));
  }
  .wl-ask .wl-ask__name { font-size: calc(18 * var(--м)); line-height: calc(19.8 * var(--м)); }
  .wl-ask .wl-ask__role { font-size: calc(14 * var(--м)); line-height: calc(18.2 * var(--м)); }
  /* Секции нужна своя высота: карточка внизу абсолютная и потока не держит. */
  .wl-ask { height: calc(911 * var(--м)); }
  /* Поля в канве: левый край 26, ширина 308, высота 40 с шагом 50; поле
     комментария 85; галка 349; кнопка 402 при высоте 50. */
  .wl-ask .wl-ask__form { position: relative; width: auto; margin: calc(13 * var(--м)) calc(26 * var(--м)) 0; }
  .wl-ask .wl-ask__field { width: 100%; height: calc(40 * var(--м)); margin-bottom: calc(10 * var(--м)); font-size: calc(12 * var(--м)); border-radius: calc(5 * var(--м)); }
  .wl-ask .wl-ask__field--area { height: calc(85 * var(--м)); }
  .wl-ask .wl-ask__check { margin-top: calc(5 * var(--м)); font-size: calc(10 * var(--м)); line-height: calc(13 * var(--м)); }
  /* flex: none — без него квадратик сжимался соседним текстом до 13 в
     ширину при честных 20.8 в высоту и выглядел приплюснутым. В оригинале
     он ровно 20.8×20.8. */
  .wl-ask .wl-ask__check input { flex: none; width: calc(20 * var(--м)); height: calc(20 * var(--м)); }
  /* Подпись под фото: колонка 186, а не во всю карточку — иначе строки
     ломаются не там, где в оригинале. */
  .wl-ask .wl-ask__role { width: calc(186 * var(--м)); }
  /* Радиус кнопки на телефоне 5, а не десктопные 10: одинаково у всех трёх
     курсов, снято замером узла. */
  .wl-ask .wl-ask__btn { position: static; width: 100%; height: calc(50 * var(--м)); margin-top: calc(13 * var(--м)); font-size: calc(12 * var(--м)); border-radius: calc(5 * var(--м)); }

  /* ── Бургер-меню ──────────────────────────────────────────────────
     В оригинале это не список под шапкой, а панель 330×610 поверх
     страницы: внутри неё сверху «Войти» и крестик, ниже разделы, внизу
     звонок. Пункты стоят абсолютно — координаты из описи, отсчёт от угла
     панели (в описи они от верха блока, отсюда −26). */
  /* ⚠️ Панель — жёсткая канва 330×610, и на невысоком экране она просто
     не помещалась: обрезалась и не прокручивалась, потому что пункты в
     ней стоят абсолютно и высоты не создают.

     Лечим двумя слоями. Первый: внутри открытого меню единица канвы
     берётся по МЕНЬШЕЙ из двух — по ширине окна, как обычно, и по его
     высоте. Пока панель влезает, ничего не меняется; когда не влезает —
     она вся уменьшается целиком, как уменьшает свои макеты Тильда.
     100dvh, а не vh: на телефоне адресная строка съедает часть экрана,
     и vh про это не знает.

     Второй слой, на всякий случай: панель прокручивается, а высоту для
     прокрутки создаёт распорка ::after — абсолютные пункты её не дают. */
  .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;
    padding: 0;
    color: #fff;
    font-family: 'PPNeueMachina', sans-serif;
    white-space: normal;
  }
  /* Разделы крупнее: 16/14 против 12 у пунктов. */
  .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(--м)); }

  .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(1) .nav__drop a:nth-child(1) { top: calc(101 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(1) .nav__drop a:nth-child(2) { top: calc(127 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(1) .nav__drop a:nth-child(3) { top: calc(153 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(1) .nav__drop a:nth-child(4) { top: calc(179 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(1) .nav__drop a:nth-child(5) { top: calc(205 * var(--м)); }

  .hdr.is-open .nav__item:nth-child(2) > a { top: calc(244 * var(--м)); }
  /* Порядок пунктов в разметке и на экране разный — сопоставлено поимённо. */
  /* Переносятся в оригинале только «Навыки сисадмина» и «Статья» — им
     ширина, остальным запрет переноса: иначе строки налезают друг на друга. */
  .hdr.is-open .nav__item:nth-child(2) .nav__drop a { white-space: nowrap; }
  .hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(1) { top: calc(269 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(2) .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(2) .nav__drop a:nth-child(3) { top: calc(355 * var(--м)); line-height: calc(13.2 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(2) .nav__drop a:nth-child(4) { top: calc(333 * var(--м)); line-height: calc(13.2 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(2) .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(5) > a { top: calc(494 * var(--м)); }
  .hdr.is-open .nav__item:nth-child(5) .nav__drop a { top: calc(519 * var(--м)); width: calc(244 * var(--м)); line-height: calc(13.2 * var(--м)); }
  /* Открытое меню закрывается крестиком — тот же бургер, сложенный накрест. */
  /* Крестик. Полосы делаются одинаковыми и сводятся в ОДИН центр: между
     их центрами 11 (полоса 3 плюс промежуток 8), поэтому сдвиг ровно на
     11, а не на 5 — с 5 они не сходились и давали «галочку». */
  .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(--м));
  }
  /* ⚠️ display обязателен: в узкой шапке .hdr__fb спрятан насовсем, и без
     него кнопка звонка не появлялась в открытой панели — внизу зияла
     пустота. */
  .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(--м)); }
  /* Подпись задаём через саму кнопку: в мобильной канве есть общее
     правило на потомков, которое делает вложенные элементы блочными, и
     блок в этой flex-кнопке схлопывался в нулевую ширину — на экране
     оставался один значок. inline-block с nowrap этого не допускает. */
  .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(--м));
  }
  /* Логотип при открытом меню скрыт: панель начинается на 28, и над ней
     оставался виден его верхний край. У Тильды там пусто. */
  .hdr.is-open .hdr__logo { visibility: hidden; }

  /* Кнопка закрытия у Тильды — тёмный квадрат #1e1e1e со скруглением, без
     рамки (цвета сняты пипеткой с её же снимка; панель вокруг #373737). */
  .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(--м));
  }

  /* Суммы в третьей карточке «дохода» крупнее двух первых: 30/33 против
     20/22 в канве. Класс у них общий, поэтому различаем по карточке —
     сам класс генератор пометил спорным именно из-за этого. */
  .page-course .wl-pay__card--3 .wl-pay__sum { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); line-height: calc(33 * var(--м)); }
  .page-course .wl-pay__card--1 .wl-pay__sum,
  .page-course .wl-pay__card--2 .wl-pay__sum { font-size: calc(20 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); line-height: calc(22 * var(--м)); }

  /* ── Курс Linux: блок «шансов» на телефоне ──────────────────────────
     Раскладка меняется целиком: на широком экране фотография справа от
     карточек, на телефоне — под ними, во всю ширину. Числа сняты с боевой
     и переведены в канву 360. */
  .lx-chance { height: calc(702 * var(--м)); }
  .lx-chance .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .lx-chance__card { left: calc(16 * var(--м)); width: calc(328 * var(--м)); border-radius: calc(20 * var(--м)); }
  .lx-chance__card--dark { top: calc(35 * var(--м)); height: calc(232 * var(--м)); }
  .lx-chance__card--blue { top: calc(277 * var(--м)); height: calc(113 * var(--м)); }
  .lx-chance__pic {
    left: calc(16 * var(--м));
    top: calc(400 * var(--м));
    width: calc(328 * var(--м));
    height: calc(295 * var(--м));
    border-radius: calc(20 * var(--м));
  }
  .lx-chance__h {
    left: calc(20 * var(--м));
    top: calc(20 * var(--м));
    width: calc(263 * var(--м));
    font-size: calc(20 * var(--м));
    line-height: calc(26 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  .lx-chance__t {
    left: calc(20 * var(--м));
    top: calc(118 * var(--м));
    width: calc(255 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .lx-chance__card--blue .lx-chance__t { left: calc(20 * var(--м)); top: calc(20 * var(--м)); width: calc(252 * var(--м)); }

  /* ══════════════════════════════════════════════════════════════════
     Курс MikroTik на телефоне
     ══════════════════════════════════════════════════════════════════
     Канва 360 — программа здесь собрана ЗЕРО-блоками, а не готовым блоком
     Тильды, поэтому кегль масштабируется и числа идут через var(--м), в
     отличие от программы Zabbix. Первый экран 1125, лента навыков — своя
     запись 209 плюс пустые 16, вместе 1350. */
  .mt-hero { height: calc(1350 * var(--м)); padding: 0; }
  .mt-hero .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .mt-hero__meta {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(80 * var(--м));
    width: calc(282.1 * var(--м));
    height: calc(16.4 * var(--м));
    margin: 0;
  }
  .mt-hero__kicker {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(156 * var(--м));
    margin: 0;
    font-size: calc(16 * var(--м));
    line-height: calc(14 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .mt-hero__title {
    position: absolute;
    left: calc(15 * var(--м));
    top: calc(185.1 * var(--м));
    width: calc(320.1 * var(--м));
    margin: 0;
    font-size: calc(30 * var(--м));
    line-height: calc(33 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .mt-hero__leads { margin: 0; }
  /* На телефоне пункты меняются местами: сверху «Специалисты…». */
  .mt-hero__lead {
    position: absolute;
    left: calc(41 * var(--м));
    padding: 0;
    margin: 0;
    font-size: calc(16 * var(--м));
    line-height: calc(22 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .mt-hero__lead:nth-child(1) { top: calc(423.1 * var(--м)); width: calc(254.1 * var(--м)); }
  .mt-hero__lead:nth-child(2) { top: calc(342.1 * var(--м)); width: calc(240.1 * var(--м)); }
  .mt-hero__lead img { left: calc(-25 * var(--м)); top: calc(7 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }
  .mt-hero__cta { position: static; display: block; margin: 0; }
  .mt-hero__cta .btn {
    position: absolute;
    left: calc(16 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(50 * var(--м));
    margin: 0;
    border-radius: calc(5 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21.7 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  .mt-hero__cta .btn--lime { top: calc(519.2 * var(--м)); }
  .mt-hero__cta .btn--dark { top: calc(579.2 * var(--м)); }
  .mt-hero__pic {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(644.2 * var(--м));
    width: calc(321.1 * var(--м));
    height: calc(426.3 * var(--м));
    margin: 0;
  }
  /* Панели и лента навыков стоят выше, чем на больших курсах: там первый
     экран 1155, здесь 1125. Контейнеру возвращаем top: 0 — десктопное
     `.mt-hero .wl-panels { top: 785px }` не заперто в медиазапрос и без
     сброса уносило панели за нижний край героя. */
  .mt-hero .wl-panels { top: 0; }
  .mt-hero .wl-panels__back { top: calc(1036.3 * var(--м)); height: calc(150.3 * var(--м)); }
  .mt-hero .wl-panels__front { top: calc(1052.3 * var(--м)); height: calc(157.1 * var(--м)); }
  .mt-hero .wl-skills { margin: 0; }
  .mt-hero .wl-skills__h { left: calc(90 * var(--м)); top: calc(1087.3 * var(--м)); width: calc(180 * var(--м)); }
  .mt-hero .wl-skills__list { top: calc(1127 * var(--м)); margin: 0; }  /* margin: без сброса десктопные 51px доезжали и сюда — лента сползала и резалась низом героя */
  /* Текст в карточке у MikroTik начинается на 70, а не на 63, как на больших
     курсах, и колонка уже: 122 против 127. Числа снятые, а не подогнанные —
     у Тильды они у каждой карточки свои, здесь взято общее для всех пяти. */
  .mt-hero .wl-skill__t { top: calc(70 * var(--м)); width: calc(122 * var(--м)); line-height: calc(17 * var(--м)); }

  /* ── Программа ── */
  /* Нижнее поле 16, а не 30: у Тильды после последнего модуля ровно
     столько, и с тридцатью программа выходила на 15 длиннее. */
  .mt-program { padding: calc(40 * var(--м)) 0 calc(16 * var(--м)); }
  .mt-program .wrap { width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0 calc(16 * var(--м)); }
  .mt-program__h {
    margin-bottom: calc(24 * var(--м));
    font-size: calc(30 * var(--м));
    line-height: calc(33 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .mt-mod { margin-bottom: calc(5 * var(--м)); border-radius: calc(10 * var(--м)); }
  .mt-mod__t {
    padding: calc(20 * var(--м)) calc(60 * var(--м)) calc(20 * var(--м)) calc(20 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(17 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .mt-mod__t::after {
    right: calc(20 * var(--м));
    top: calc(22 * var(--м));
    width: calc(29 * var(--м));
    height: calc(29 * var(--м));
    border-radius: calc(5 * var(--м));
    background-size: calc(14 * var(--м)) calc(8 * var(--м));
  }
  .mt-mod__body {
    margin: 0 calc(6 * var(--м));
    padding: calc(14 * var(--м)) calc(14 * var(--м)) calc(8 * var(--м));
    border-radius: calc(10 * var(--м));
  }
  .mt-mod__lead { margin-bottom: calc(7 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(19.6 * var(--м)); }
  .mt-mod__list { margin-bottom: calc(13 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(19.6 * var(--м)); }
  .mt-mod__list li { margin-bottom: calc(4 * var(--м)); }
  .mt-mod__list--arrow li { max-width: none; padding-left: calc(20 * var(--м)); }
  .mt-mod__list--arrow img { top: calc(6 * var(--м)); width: calc(12 * var(--м)); height: calc(10 * var(--м)); }
  .mt-mod__result { padding: calc(14 * var(--м)); border-radius: calc(5 * var(--м)); }
  .mt-mod__result .mt-mod__lead { margin-bottom: calc(7 * var(--м)); }

  /* ── Спикеры: две пары друг под другом ── */
  /* ⚠️ Высоту задаём через .page-mikrotik: правило `.zx-speaker` из блока
     Zabbix ниже в файле и с одинаковой силой перебивало её на 965. */
  .page-mikrotik .mt-speaker { height: calc(1836 * var(--м)); padding: 0; }
  .mt-speaker .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .mt-speaker .zx-speaker__h { left: calc(76 * var(--м)); top: calc(31 * var(--м)); width: auto; }
  /* Пара — рамка отсчёта: фото у её верха, карточка на 333 ниже. */
  .mt-speaker .zx-speaker__pair {
    position: absolute;
    left: 0;
    width: calc(360 * var(--м));
    height: auto;
    display: block;
  }
  .mt-speaker .zx-speaker__pair:nth-of-type(1) { top: calc(85 * var(--м)); }
  .mt-speaker .zx-speaker__pair--mirror { top: calc(931.3 * var(--м)); }
  .mt-speaker .zx-speaker__photo {
    position: absolute;
    left: calc(16 * var(--м));
    top: 0;
    width: calc(328.1 * var(--м));
    height: calc(328.1 * var(--м));
    margin: 0;
    border-radius: calc(24 * var(--м));
  }
  .mt-speaker .zx-speaker__card {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(333.1 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(501.2 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  /* Вторая карточка выше первой: роль там в три строки, а не в две.
     ⚠️ position возвращаем явно — планшетный блок сделал содержимое
     зеркальной пары static, а у static элемента left/top не действуют:
     список уезжал в поток и вылезал из секции на 800 px. */
  .mt-speaker .zx-speaker__pair--mirror .zx-speaker__card { height: calc(530.2 * var(--м)); }
  .mt-speaker .zx-speaker__pair--mirror .zx-speaker__name { position: absolute; left: calc(27 * var(--м)); top: calc(26 * var(--м)); }
  .mt-speaker .zx-speaker__pair--mirror .zx-speaker__role { position: absolute; left: calc(25 * var(--м)); top: calc(80 * var(--м)); width: calc(198.1 * var(--м)); }
  /* Список Брагина у оригинала УЖЕ пыхтинского: текст 66..287 против
     66..361. Отсчёт от карточки (left 16), поэтому 25, а не 41. */
  .mt-speaker .zx-speaker__pair--mirror .zx-speaker__list { position: absolute; left: calc(25 * var(--м)); top: calc(212.1 * var(--м)); width: calc(246 * var(--м)); }

  /* ══════════════════════════════════════════════════════════════════
     Курс Zabbix на телефоне
     ══════════════════════════════════════════════════════════════════
     Канва 360, как и у больших курсов. Правила ниже перебивают планшетный
     блок, который вернул абсолютное в поток: на телефоне у оригинала своя
     раскладка с координатами, и она отличается не только числами — пункты
     первого экрана меняются местами, а кнопки пакета идут в другом порядке.
     Числа сняты scripts/блок-в-канве.py --телефон. */

  /* ── Первый экран ── */
  .zx-hero { height: calc(1035 * var(--м)); padding: 0; }
  .zx-hero .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .zx-hero > .wrap > img { position: absolute; }
  .zx-hero__start { left: calc(16 * var(--м)); top: calc(78 * var(--м)); width: calc(177 * var(--м)); height: calc(19.2 * var(--м)); margin: 0; }
  .zx-hero__modules { left: calc(16 * var(--м)); top: calc(105 * var(--м)); width: calc(137 * var(--м)); height: calc(19.3 * var(--м)); margin: 0; }
  /* Плашка предпродажи в оригинале НЕ влезает в канву: 147 + 228 = 375 при
     ширине 360, и правый край у неё срезан. Повторяем как есть — секция с
     overflow: hidden обрежет ровно так же. */
  .zx-hero__presale { left: calc(147 * var(--м)); top: calc(115 * var(--м)); width: calc(228.1 * var(--м)); height: calc(39.9 * var(--м)); margin: 0; }
  /* ⚠️ margin обнуляем явно: планшетный блок выше добавил кикеру и кнопкам
     отступы сверху (32 и 20), а у абсолютно позиционированного элемента
     margin от top не отменяется — он к нему прибавляется. Кикер из-за этого
     наезжал на заголовок. */
  .zx-hero__kicker {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(188.1 * var(--м));
    margin: 0;
    font-size: calc(16 * var(--м));
    line-height: calc(14 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .zx-hero__title {
    position: absolute;
    left: calc(15 * var(--м));
    top: calc(217.1 * var(--м));
    width: calc(320.1 * var(--м));
    margin: 0;
    font-size: calc(30 * var(--м));
    line-height: calc(33 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .zx-hero__leads { margin: 0; }
  /* Порядок пунктов на телефоне обратный десктопному: сверху «Уникальный
     курс». Оба стоят абсолютом, поэтому порядок в разметке не важен. */
  .zx-hero__lead {
    position: absolute;
    left: calc(41 * var(--м));
    padding: 0;
    margin: 0;
    font-size: calc(16 * var(--м));
    line-height: calc(22 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .zx-hero__lead:nth-child(1) { top: calc(470.1 * var(--м)); width: calc(254.1 * var(--м)); }
  .zx-hero__lead:nth-child(2) { top: calc(374.1 * var(--м)); width: calc(289.1 * var(--м)); }
  .zx-hero__lead img { left: calc(-25 * var(--м)); top: calc(7 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }
  .zx-hero__cta { position: static; display: block; margin: 0; }
  .zx-hero__cta .btn {
    position: absolute;
    left: calc(16 * var(--м));
    margin: 0;
    height: calc(50 * var(--м));
    border-radius: calc(5 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21.7 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  .zx-hero__cta .btn--lime { top: calc(559.2 * var(--м)); width: calc(328.1 * var(--м)); }
  .zx-hero__cta .btn--dark { top: calc(619.2 * var(--м)); width: calc(328.1 * var(--м)); }
  /* Снимок уезжает за ЛЕВЫЙ край: в оригинале он там обрезан артбордом, и
     видно правые две трети. Логотип лежит на нём поверх. */
  .zx-hero__pic { left: calc(-173.1 * var(--м)); top: calc(666.2 * var(--м)); width: calc(544.2 * var(--м)); max-width: none; height: calc(384.9 * var(--м)); margin: 0; }  /* max-width: без него глобальный img{max-width:100%} зажимал 567 до 375 и плющил ноутбук */
  .zx-hero__logo { display: block; left: calc(186 * var(--м)); top: calc(695.2 * var(--м)); width: calc(148 * var(--м)); height: calc(148 * var(--м)); }

  /* ── Программа курса ──
     ⚠️ Здесь числа в ПИКСЕЛЯХ, а не в канве, и это не небрежность. Программа
     в оригинале — обычный блок Тильды (T1119), а не зеро-блок: он не
     артборд, ничего не масштабирует и держит одни и те же 30/37 на любой
     ширине экрана. Проверено замером: на 375 у заголовка ровно 30px, а
     canvas-вариант calc(30 * var(--м)) дал 31.25 — на десятке модулей это
     набежало 118 лишних пикселей высоты секции. */
  .zx-program { padding: 90px 0; }
  .zx-program .wrap {
    display: block;
    width: calc(360 * var(--м));
    max-width: none;
    margin: 0;
    padding: 0 20px;
  }
  .zx-program__h { font-size: 30px; line-height: 37px; letter-spacing: 0; }
  /* Зазор между заголовком и списком — 45, а не общий планшетный gap:
     колонки на телефоне встают друг под друга, и flex здесь уже не нужен. */
  .zx-program__list { margin-top: 45px; }
  /* 15 сверху и 14 снизу: вместе с линией-разделителем в 1 px это даёт
     ровно 84 — высоту плашки в оригинале. С 15/15 каждый модуль был на
     пиксель выше, и на десятке набегало десять. */
  .zx-mod__t { padding: 15px 50px 14px 0; font-size: 20px; line-height: 27px; }
  .zx-mod__t > span { max-width: 285px; }
  .zx-mod__lead { margin-bottom: 0; font-size: 14px; line-height: 20px; }
  .zx-mod ul { padding-bottom: 25px; font-size: 14px; line-height: 20px; }

  /* ── Спикер курса ── */
  .zx-speaker { height: calc(965 * var(--м)); padding: 0; }
  .zx-speaker .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .zx-speaker__h {
    position: absolute;
    left: calc(76 * var(--м));
    top: calc(31 * var(--м));
    text-align: left;
    font-size: calc(30 * var(--м));
    line-height: calc(30 * var(--м));
    letter-spacing: calc(-1.5 * var(--м));
  }
  .zx-speaker__photo {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(85 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(328.1 * var(--м));
    margin: 0;
    border-radius: calc(24 * var(--м));
  }
  .zx-speaker__card {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(418.1 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(501.2 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(15 * var(--м));
  }
  .zx-speaker__name {
    position: absolute;
    left: calc(27 * var(--м));
    top: calc(15 * var(--м));
    font-size: calc(30 * var(--м));
    line-height: calc(30 * var(--м));
    letter-spacing: calc(-1.5 * var(--м));
  }
  .zx-speaker__role {
    position: absolute;
    left: calc(25 * var(--м));
    top: calc(70 * var(--м));
    width: calc(251.1 * var(--м));
    margin: 0;
    font-size: calc(20 * var(--м));
    line-height: calc(22 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  /* Список считаем от стрелки (42), а не от текста (67): в оригинале
     текстовая колонка шириной 270.1 начинается ПОСЛЕ стрелки, поэтому
     ширина списка — 25 отступа плюс эти 270.1. Иначе на текст оставалось
     245, и «интернет-провайдера» срывалось на третью строку. */
  .zx-speaker__list {
    position: absolute;
    left: calc(42 * var(--м));
    top: calc(161.1 * var(--м));
    width: calc(295.1 * var(--м));
    margin: 0;
    font-size: calc(18 * var(--м));
    line-height: calc(23 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .zx-speaker__list li { padding-left: calc(25 * var(--м)); margin-bottom: calc(12 * var(--м)); font-size: inherit; line-height: inherit; letter-spacing: inherit; }
  .zx-speaker__list img { left: 0; top: calc(4 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }

  /* ── Формат участия ── */
  .zx-plans { height: calc(813 * var(--м)); padding: 0; }
  .zx-plans .wrap { position: static; width: calc(360 * var(--м)); max-width: none; margin: 0; padding: 0; }
  /* Заголовок на телефоне стоит по центру: 61 + 236.7 при канве 360. */
  .zx-plans__h {
    position: absolute;
    left: calc(61 * var(--м));
    top: calc(35 * var(--м));
    font-size: calc(30 * var(--м));
    line-height: calc(36 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .zx-plans__start { position: absolute; left: calc(103 * var(--м)); top: calc(83 * var(--м)); width: calc(157 * var(--м)); height: calc(17 * var(--м)); margin: 0; }

  /* ⚠️ position возвращаем явно: планшетный блок выше сделал карточку и плиту
     static, а left/top у static элемента браузер молча игнорирует — карточка
     оставалась в потоке, а её содержимое считало координаты от секции.
     Ловушка знакомая: наступали на неё трижды на больших курсах. */
  .zx-plan {
    position: absolute;
    left: calc(17 * var(--м));
    top: calc(123 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(367.1 * var(--м));
    margin: 0;
    padding: 0;
    border-radius: calc(10 * var(--м));
    /* Светлая карточка перекрывает тёмную плиту: на телефоне та начинается
       на 373, то есть заходит под карточку на 117. */
    z-index: 2;
  }
  .zx-plan__name {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(25 * var(--м));
    font-size: calc(20 * var(--м));
    line-height: calc(22 * var(--м));
    letter-spacing: calc(-0.5 * var(--м));
  }
  .zx-plan__badge { position: absolute; left: calc(234.1 * var(--м)); top: calc(69 * var(--м)); width: calc(74 * var(--м)); height: calc(21.2 * var(--м)); margin: 0; }
  .zx-plan__now,
  .zx-plan__was {
    position: absolute;
    top: calc(75 * var(--м));
    margin: 0;
    font-size: calc(14 * var(--м));
    line-height: calc(11.2 * var(--м));
  }
  .zx-plan__now { left: calc(20 * var(--м)); }
  /* Плашка на телефоне 66×15 при тексте 48.2×11.2 — то есть поля по 8.9 с
     боков, а по вертикали высоту держит сама плашка. Верх её на 195 в канве,
     то есть 72 внутри карточки. */
  .zx-plan__was { left: calc(92 * var(--м)); top: calc(72 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }
  .zx-plan__was span {
    height: calc(15 * var(--м));
    padding: 0 calc(8.9 * var(--м));
    line-height: calc(15 * var(--м));
    border-radius: calc(2 * var(--м));
  }
  .zx-plan__was span::after { height: calc(1 * var(--м)); }
  .zx-plan__mo {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(92.1 * var(--м));
    margin: 0;
    font-size: calc(40 * var(--м));
    line-height: calc(40 * var(--м));
    letter-spacing: calc(-2 * var(--м));
  }
  .zx-plan__unit { font-size: calc(14 * var(--м)); line-height: calc(11.2 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }
  .zx-plan__mo .wl-rub { top: calc(15 * var(--м)); width: calc(8 * var(--м)); height: calc(11 * var(--м)); }
  .zx-plan__note {
    position: absolute;
    left: calc(20 * var(--м));
    top: calc(137.1 * var(--м));
    margin: 0;
    font-size: calc(12 * var(--м));
    line-height: calc(9.6 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  /* Кнопки на телефоне идут в другом порядке: рассрочка выше участия. */
  .zx-plan__btn {
    position: absolute;
    left: calc(20 * var(--м));
    width: calc(288.1 * var(--м));
    height: calc(50 * var(--м));
    margin: 0;
    border-radius: calc(5 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(21.7 * var(--м));
    letter-spacing: calc(-1 * var(--м));
  }
  /* У кнопки брони межбуквенный в оригинале обычный, а не сжатый. */
  .zx-plan__btn--ghost { letter-spacing: normal; }
  .zx-plan__btn--lime { top: calc(177.1 * var(--м)); }
  .zx-plan__btn--blue { top: calc(238.1 * var(--м)); }
  .zx-plan__btn--ghost { left: calc(19 * var(--м)); top: calc(299.1 * var(--м)); width: calc(288.1 * var(--м)); }

  .zx-plan__extra {
    position: absolute;
    left: calc(16 * var(--м));
    top: calc(373.1 * var(--м));
    width: calc(328.1 * var(--м));
    height: calc(438.1 * var(--м));
    margin: 0;
    border-radius: calc(10 * var(--м));
  }
  /* То же и здесь: стрелка на 21 внутри плиты, текст на 46, колонка текста
     230 — значит справа остаётся 52.1, а не 20. */
  .zx-plan__list {
    padding: calc(140.1 * var(--м)) calc(52.1 * var(--м)) 0 calc(21 * var(--м));
    font-size: calc(14 * var(--м));
    line-height: calc(18 * var(--м));
    letter-spacing: calc(-0.2 * var(--м));
  }
  .zx-plan__list li {
    padding-left: calc(25 * var(--м));
    margin-bottom: calc(15 * var(--м));
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .zx-plan__list img { left: calc(-25 * var(--м)); top: calc(3 * var(--м)); width: calc(15 * var(--м)); height: calc(12 * var(--м)); }

  /* ══════════════════════════════════════════════════════════════════
     Шапка на телефоне
     ══════════════════════════════════════════════════════════════════
     В оригинале на узком экране в шапке ДВА элемента: логотип 136.3×29.8 на
     16.3/25.9 и бургер 42.2×42.2 на 307.2/20.2. Кнопки «Обратная связь»
     там нет вовсе — у нас она оставалась и висела между ними. Попап заявки
     от этого не пропадает: его открывают кнопки на самой странице. */
  .hdr__fb { display: none; }
  .hdr__logo { width: calc(136.3 * var(--м)); height: calc(29.8 * var(--м)); }
  /* Поля шапки в оригинале асимметричны: слева 16.3 до логотипа, справа
     10.6 до бургера. И контейнер здесь во всю ширину, а не общий .wrap с
     полями по 20 — иначе логотип уезжал на 37 вместо 16.7. */
  .hdr .wrap {
    width: calc(360 * var(--м));
    max-width: none;
    margin: 0;
    padding: 0 calc(10.6 * var(--м)) 0 calc(16.3 * var(--м));
  }
  /* Бургер у Тильды не три одинаковые чёрточки: средняя короче и прижата
     вправо. Замерено по пикселям на 393: полосы 31 и 21 в канве 360,
     толщина 2,5, шаг 10,7. */
  .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(--м)); }

  /* ══════════════════════════════════════════════════════════════════
     Подвал на телефоне
     ══════════════════════════════════════════════════════════════════
     До этого здесь работали правила из блока 900 px — в ПИКСЕЛЯХ, а не в
     канве: кегли 16/20 вместо 12/14, логотип 192 вместо 169, и подвал
     выходил 1166 против 929 в оригинале. Генератор типографики его не
     починил: `.ft__col` он считает спорным (в одном классе и заголовки, и
     ссылки с разным интерлиньяжем) и такие классы пропускает.

     Числа сняты замером записи rec2087444501 при 375. Плита 328.1×904.3,
     поля 20, радиус 20; заголовки колонок 14/15, ссылки 12/13…17, всё с
     межбуквенным −0.5 и светлым начертанием. */
  .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--brand p:last-child { line-height: calc(17 * var(--м)); }
  /* 11.3, а не 23.3: колонка — flex с gap 12, и он прибавляется к отступу.
     С 23.3 почта уезжала на 97 вместо 85. */
  .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(--м)); }

  /* ── Типографика по замерам с боевой ──────────────────────────────
     Ниже кегль, межбуквенный и интерлиньяж, снятые с боевой поэлементно
     скриптом scripts/типографика-с-боевой.py и переведённые в канву.
     Руками эти числа не подбирались: их две сотни, и подобранные на глаз
     расходились с оригиналом в двух случаях из трёх. Блок стоит последним
     в медиазапросе, чтобы перебивать более ранние правила той же силы. */
  .page-course .ft__bottom { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Создание сайта */  /* однострочный: интерлиньяж не трогаем */
  .page-course .reviews__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(36 * var(--м)); }   /* Отзывы об участии в курсе — В ДВЕ СТРОКИ, nowrap тут был ошибкой */
  .page-course .rv__name { font-size: calc(16 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* Дмитрий Попов */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-about__doc-t { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(24 * var(--м)); }   /* Школа с образовательной лицензией */
  .page-course .wl-about__h { font-size: calc(25 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); line-height: calc(25 * var(--м)); white-space: nowrap; }   /* О школе IT-Ontime */
  .page-course .wl-about__h3 { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Наши клиенты */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-about__lead { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* С 2015 года занимаемся предоставле */
  .page-course .wl-about__note { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.7 * var(--м)); line-height: calc(21 * var(--м)); }   /* Работаем в этой сфере каждый день  */
  .page-course .wl-about__origin-t { font-size: calc(15 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Школа IT-Ontime появилась на базе  */
  .page-course .wl-ask__btn { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(18.6 * var(--м)); }   /* { Задать вопрос } */
  .page-course .wl-ask__check { font-size: calc(10 * var(--м)); line-height: calc(12 * var(--м)); }   /* Политикой Конфиденциальности и пра */
  .page-course .wl-ask__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(22 * var(--м)); }   /* Остались вопросы? Вы можете задать */
  /* ⚠️ Эти две строки исправлены руками, а не генератором, и переписывать их
     обратно не надо. Генератор сматчил подпись под фото с ДЕСКТОПНЫМИ
     двойниками (20/-1 и 16/-1), уведёнными за экран, — на телефоне у всех
     трёх курсов там 18/-0.5 и 14/-0.5/18.2. Проверено замером самих узлов
     на боевой: scripts/замер-селекторов.py, курсы win-linux и zabbix дают
     одинаковые числа. */
  .page-course .wl-ask__name { font-size: calc(18 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Владимир Апалин */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-ask__role { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(18.2 * var(--м)); }   /* Основатель и генеральный директор  */
  .page-course .wl-career__card--cto { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(14.4 * var(--м)); }   /* CTO — технический директор */
  .page-course .wl-career__card--dark { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(14.4 * var(--м)); }   /* AnyKey — специалист техподдержки */
  .page-course .wl-career__card--lead { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(14.4 * var(--м)); }   /* Team Lead — руководитель команды */
  .page-course .wl-career__card--net { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(14.4 * var(--м)); }   /* Сетевой инженер */
  .page-course .wl-career__card--windows { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(14.4 * var(--м)); }   /* Cистемный администратор Windows */
  .page-course .wl-career__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Обучение системному администрирова */
  .page-course .wl-career__note { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Мы можем помочь сократить твой пут */
  .page-course .wl-cert__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Твой сертификат об окончании обуче */
  .page-course .wl-club__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Закрытый клуб выпускников */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-club__t { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Место, где все на одной волне и вс */
  .page-course .wl-cv__chip { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Windows 10 */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-cv__h--do { font-size: calc(18 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Что я умею делать: */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-cv__h--stack { font-size: calc(18 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Стек навыков: */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-cv__role { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(24 * var(--м)); }   /* Системный администратор Windows/Li */
  .page-course .wl-cv__sum { font-size: calc(16 * var(--м)); white-space: nowrap; }   /* от 80 000 */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-cv__title { font-size: calc(25 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(28 * var(--м)); }   /* Твоё резюме после обучения */
  .page-course .wl-faq__q { font-size: calc(17 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(23.8 * var(--м)); }   /* Подойдет ли мне эта профессия? */
  .page-course .wl-faq__title { font-size: calc(25 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(33 * var(--м)); white-space: nowrap; }   /* Часто задаваемые вопросы */
  .page-course .wl-guar__h--money { font-size: calc(18.3 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(23.8 * var(--м)); }   /* Доведём тебя до трудоустройства —  */
  .page-course .wl-guar__link { font-size: calc(11 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(15.4 * var(--м)); }   /* Условия акции */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-guar__t { font-size: calc(12.8 * var(--м)); letter-spacing: calc(-0.7 * var(--м)); line-height: calc(19.2 * var(--м)); }   /* Если что-то не понравится или не п */
  .page-course .wl-guar__t--wide { font-size: calc(12.8 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(19.2 * var(--м)); }   /* Если ты честно выполнишь все задан */
  .page-course .wl-hero__kicker { font-size: calc(16 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* Онлайн-курс */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-how__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Личный кабинет */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-how__h--narrow { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Практика в виртуальной лаборатории */  /* nowrap снят: на телефоне заголовок двухстрочный, однострочность была десктопной */
  .page-course .wl-how__h--seven { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Внимание кураторов и менторов */  /* nowrap снят: см. --narrow */
  .page-course .wl-how__h--six { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Целенаправленное обучение */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-how__h--two { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Мощный карьерный трек */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-how__t { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Уроки проходят на обучающей платфо */
  .page-course .wl-how__t--low { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Все виртуальные мощности наших сер */
  .page-course .wl-how__t--low5 { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Создадим вместе ваше идеальное рез */
  .page-course .wl-how__t--seven { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Наши кураторы — действующие сисадм */
  .page-course .wl-how__t--tall { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(20 * var(--м)); }   /* Даже если ты ничего не знаешь — бу */
  .page-course .wl-how__title { font-size: calc(25 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); }   /* Как проходит обучение */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-mini__btn { font-size: calc(12 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(18.6 * var(--м)); }   /* { Начать бесплатно } */
  .page-course .wl-mini__t { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(17 * var(--м)); }   /* Познакомься с профессией сисадмина */
  .page-course .wl-mod__t { font-size: calc(15 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); line-height: calc(20.25 * var(--м)); }   /* Модуль 1. Архитектура ПК */
  .page-course .wl-pay__grade { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* 1–3 года */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-pay__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* С ростом компетенций и навыков теб */
  .page-course .wl-pay__when--now { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* после курса */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-pay__where--msk { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(10.2 * var(--м)); white-space: nowrap; }   /* Москва, СПБ */
  .page-course .wl-plan__btn--blue { font-size: calc(12 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(12 * var(--м)); }   /* { Оплатить со скидкой 5% } */
  .page-course .wl-plan__btn--lime { font-size: calc(12 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(18.6 * var(--м)); }   /* { Оформить рассрочку } */
  .page-course .wl-plan__btn--pale { font-size: calc(12 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(12 * var(--м)); }   /* { Записаться на бесплатную консуль */
  .page-course .wl-plan__chip--pale { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Программа обучения пакета «База» */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-plan__foot { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* *при рассрочке на 12 мес. */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-plan__name { font-size: calc(25 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(27.5 * var(--м)); }   /* Пакет «База cисадмина Windows» */
  .page-course .wl-plan__price { font-size: calc(40 * var(--м)); letter-spacing: calc(-2 * var(--м)); white-space: nowrap; }   /* от 5 210 */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-plans__title { font-size: calc(25 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Форматы участия */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-program__chips { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* 6 модулей */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-program__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Программа курса «Системный админис */
  .page-course .wl-program__note { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(21 * var(--м)); }   /* Курс по шагам повторяет создание р */
  .page-course .wl-hero .wrap.wl-skills > * { pointer-events: auto; }
  .page-course .wl-skills__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Чему вы научитесь */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-teach__h { font-size: calc(25 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); line-height: calc(25 * var(--м)); white-space: nowrap; }   /* Преподаватели курса */
  .page-course .wl-teach__list { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(18 * var(--м)); }   /* Более 15 лет опыта в IT-сфере */
  .page-course .wl-teach__name { font-size: calc(20 * var(--м)); letter-spacing: calc(-1 * var(--м)); }   /* Владимир Апалин */  /* однострочный: интерлиньяж не трогаем */
  .page-course .wl-teach__role--wide { font-size: calc(16 * var(--м)); letter-spacing: calc(-1 * var(--м)); line-height: calc(19 * var(--м)); }   /* Управляющий партнер и исполнительн */
  .page-course .wl-video__h { font-size: calc(25 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); line-height: calc(25 * var(--м)); white-space: nowrap; }   /* Видеоролик о курсе */
  .page-course .wl-who__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(26 * var(--м)); }   /* Кому подойдёт этот курс */

  /* ── Типографика по замерам с боевой (linux) ─────────────────────────
     Ниже кегль, межбуквенный и интерлиньяж, снятые с боевой поэлементно
     скриптом scripts/типографика-с-боевой.py и переведённые в канву.
     Руками эти числа не подбирались: их две сотни, и подобранные на глаз
     расходились с оригиналом в двух случаях из трёх. Блок стоит последним
     в медиазапросе, чтобы перебивать более ранние правила той же силы. */
  .page-linux .wl-about__h3 { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Наши клиенты */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-club__h { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Закрытый клуб выпускников */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-cv__chip { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Linux CLI */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-guar__link { font-size: calc(11 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(15.4 * var(--м)); }   /* Условия акции */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-hero__lead { font-size: calc(16 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); line-height: calc(22 * var(--м)); }   /* Всего за 3 месяца ты получишь необ */
  .page-linux .wl-how__title { font-size: calc(25 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); }   /* Как проходит обучение */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-pay__grade { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* 1–3 года */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-pay__when--now { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* после курса */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-plan__chip { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* 8 модулей курса */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-tag { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* 8 модулей */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-tag--violet { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Гарантия трудоустройства */  /* однострочный: интерлиньяж не трогаем */
  .page-linux .wl-teach__name { font-size: calc(20 * var(--м)); letter-spacing: calc(-1 * var(--м)); }   /* Владимир Апалин */  /* однострочный: интерлиньяж не трогаем */

  /* ── Типографика по замерам с боевой (zabbix) ─────────────────────────
     Ниже кегль, межбуквенный и интерлиньяж, снятые с боевой поэлементно
     скриптом scripts/типографика-с-боевой.py и переведённые в канву.
     Руками эти числа не подбирались: их две сотни, и подобранные на глаз
     расходились с оригиналом в двух случаях из трёх. Блок стоит последним
     в медиазапросе, чтобы перебивать более ранние правила той же силы. */
  .page-zabbix .wl-ask__name { font-size: calc(18 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }   /* Владимир Апалин */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .wl-ask__role { font-size: calc(14 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); line-height: calc(18.2 * var(--м)); }   /* Основатель и генеральный директор  */
  .page-zabbix .zx-hero__kicker { font-size: calc(16 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* Практический онлайн-курс */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .zx-plan__name { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Пакет «Первый» */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .zx-plan__note { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* *при рассрочке на 12 мес. */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .zx-plans__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Формат участия */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .zx-speaker__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); white-space: nowrap; }   /* Спикер курса */  /* однострочный: интерлиньяж не трогаем */
  .page-zabbix .zx-speaker__name { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); white-space: nowrap; }   /* Владимир Пыхтин */  /* однострочный: интерлиньяж не трогаем */

  /* ── Типографика по замерам с боевой (mikrotik) ─────────────────────────
     Ниже кегль, межбуквенный и интерлиньяж, снятые с боевой поэлементно
     скриптом scripts/типографика-с-боевой.py и переведённые в канву.
     Руками эти числа не подбирались: их две сотни, и подобранные на глаз
     расходились с оригиналом в двух случаях из трёх. Блок стоит последним
     в медиазапросе, чтобы перебивать более ранние правила той же силы. */
  .page-mikrotik .mt-hero__kicker { font-size: calc(16 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* Практический онлайн-курс */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .mt-program__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); white-space: nowrap; }   /* Программа курса */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .zx-plan__name { font-size: calc(20 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Пакет «Первый» */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .zx-plan__note { font-size: calc(12 * var(--м)); letter-spacing: calc(-0.2 * var(--м)); white-space: nowrap; }   /* *при рассрочке на 12 мес. */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .zx-plans__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); white-space: nowrap; }   /* Формат участия */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .zx-speaker__h { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); white-space: nowrap; }   /* Спикеры курса */  /* однострочный: интерлиньяж не трогаем */
  .page-mikrotik .zx-speaker__name { font-size: calc(30 * var(--м)); letter-spacing: calc(-1.5 * var(--м)); white-space: nowrap; }   /* Владимир Пыхтин */  /* однострочный: интерлиньяж не трогаем */
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ-ПРАКТИКУМ  /courses/sys-admin-intensiv
   ══════════════════════════════════════════════════════════════════════

   Отдельный лендинг, а не курс из общего шаблона: своя шапка, своя графика,
   свой набор секций. Отсюда `.page-intensiv` и собственные имена классов.

   ⚠️ ЭТА СТРАНИЦА НЕ ТЯНЕТСЯ ЗА ОКНОМ, в отличие от главной и всех курсов.
   У семи из девяти зеро-блоков стоит data-artboard-upscale="grid": размеры
   фиксированные, контейнер ровно 1200 и центрируется. Проверено замером при
   1425 и при 1600 — логотип в обоих случаях 182x40, координаты считаются от
   `50% - 600px`. Значит множителя 1425/1400, без которого не обходилась ни
   одна прошлая страница, здесь нет: числа канвы РАВНЫ экранным пикселям.

   Поэтому свой контейнер 1200, а не общий .wrap (1221). Разница мелкая, но
   она легла бы на каждую из сотни координат.

   Секции внутри — абсолютным позиционированием от .in-wrap, как в
   оригинале: там каждый элемент лежит по своим координатам, и попытка
   собрать это потоком разъезжается на первом же блоке. На узких экранах
   абсолют снимается и всё выкладывается в колонку (см. мобильный блок). */

.page-intensiv { background: #fff; color: #080808; }

.in-wrap {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.in-blue { color: var(--blue); }
.in-lime { color: var(--lime); }

/* Кнопки страницы. Кегль 20/31, шрифт моноширинный Pitagon (как и везде на
   сайте — у Тильды он подставлен под весом 500 к PPNeueMachina). */
.in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'PitagonSansMono', 'PPNeueMachina', monospace;
  font-weight: 500;
  font-size: 20px;
  line-height: 31px;
  text-align: center;
  border-radius: 5px;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.in-btn--blue { background: var(--blue); color: #fff; }
.in-btn--lime { background: var(--lime); color: #080808; }
.in-btn:hover { opacity: .88; }

/* ── Шапка ─────────────────────────────────────────────────────────────
   Только логотип и кнопка: ни меню, ни выпадашек, ни входа в кабинет.
   Пустой прямоугольник 181x50, лежащий в оригинале поверх кнопки, не
   переношу — он без фона, без рамки и без текста. */
.in-top {
  background: var(--bg);
  height: 92px;
}
.in-top .in-wrap { height: 92px; }
.in-top__logo { position: absolute; left: 85px; top: 29px; }
.in-top__logo img { width: 182px; height: 40px; object-fit: contain; }
.in-top__cta {
  position: absolute;
  left: 891px; top: 16px;
  width: 229px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 500; font-size: 20px; line-height: 31px;
  border-radius: 5px;
  transition: opacity .2s ease-in-out;
}
.in-top__cta:hover { opacity: .88; }

/* ── Первый экран ──────────────────────────────────────────────────────
   Иллюстрация 679x641 начинается на 620 и уходит за правый край
   контейнера на 99 px — секция её обрезает, как артборд в оригинале. */
.in-hero {
  background: var(--bg);
  color: #fff;
  height: 669px;
  overflow: hidden;
}
.in-hero .in-wrap { height: 669px; }
.in-hero__start,
.in-hero__for,
.in-hero__h,
.in-hero__lead { position: absolute; margin: 0; }
.in-hero__start {
  left: 81px; top: 38px; width: 560px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 24px; line-height: 1.55;
}
.in-hero__for {
  left: 81px; top: 75px; width: 587px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 20px; line-height: 1.55;
}
.in-hero__h {
  left: 80px; top: 168px; width: 711px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 45px; line-height: 1.1;
}
.in-hero__lead {
  left: 80px; top: 358px; width: 558px;
  font-weight: 300; font-size: 24px; line-height: 1.4;
}
.in-hero__lead b { font-weight: 600; color: var(--blue); }
.in-hero__btn {
  position: absolute;
  left: 80px; top: 492px;
  width: 320px; height: 70px;
}
.in-hero__pic {
  position: absolute;
  left: 620px; top: 89px;
  width: 679px; height: 641px;
  max-width: none;
  object-fit: cover;
}

/* ── «Для кого интенсив?» ──────────────────────────────────────────────
   Три пункта с круглыми серыми иконками и фото справа. Круг 100x100
   #504f4f, внутри иконка 60; смещения у трёх кругов чуть разные — они
   такими сняты с оригинала, а не «выровнены». */
.in-who {
  background: #fff;
  color: #080808;
  height: 650px;
  overflow: hidden;
}
.in-who .in-wrap { height: 650px; }
.in-who__h {
  position: absolute;
  left: 80px; top: 87px; width: 659px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 45px; line-height: normal;
}
.in-who__list { margin: 0; padding: 0; list-style: none; }
.in-who__item {
  position: absolute;
  font-weight: 500; font-size: 24px; line-height: 1;
}
.in-who__item--1 { left: 211px; top: 174px; width: 472px; }
.in-who__item--2 { left: 212px; top: 318px; width: 473px; }
.in-who__item--3 { left: 211px; top: 444px; width: 470px; }
.in-who__bullet {
  position: absolute;
  width: 100px; height: 100px;
  background: #504f4f;
  border-radius: 50%;
  display: block;
}
.in-who__bullet img { position: absolute; }
.in-who__item--1 .in-who__bullet { left: -130px; top: -8px; }
.in-who__item--1 .in-who__bullet img { left: 18px; top: 18px; width: 60px; height: 60px; }
.in-who__item--2 .in-who__bullet { left: -133px; top: -23px; }
.in-who__item--2 .in-who__bullet img { left: 20px; top: 20px; width: 62px; height: 62px; }
.in-who__item--3 .in-who__bullet { left: -132px; top: -13px; }
.in-who__item--3 .in-who__bullet img { left: 23px; top: 19px; width: 60px; height: 60px; }
.in-who__pic {
  position: absolute;
  left: 720px; top: 45px;
  width: 800px; height: 533px;
  max-width: none;
}

/* ── «Что ты получаешь» ────────────────────────────────────────────────
   Шесть пунктов в две колонки. У каждой иконки свой размер и своя
   координата: в оригинале это шесть пар независимых элементов, и свести
   их в сетку значит поехать по всем шести сразу. */
.in-gains {
  background: var(--bg);
  color: #fff;
  height: 1006px;
  overflow: hidden;
}
.in-gains .in-wrap { height: 1006px; }
.in-gains__h {
  position: absolute;
  left: 20px; top: 26px; width: 1111px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 45px; line-height: normal;
}
.in-gains__list { margin: 0; padding: 0; list-style: none; }
.in-gains__ico { position: absolute; max-width: none; }
.in-gains__t {
  position: absolute;
  margin: 0;
  font-weight: 500; font-size: 22px; line-height: 1.15;
}
.in-gains__t--b { font-weight: 600; }

.in-gains__item--1 .in-gains__ico { left: 20px;  top: 200px; width: 152px; height: 156px; }
.in-gains__item--1 .in-gains__t   { left: 223px; top: 235px; width: 352px; }
.in-gains__item--2 .in-gains__ico { left: 620px; top: 211px; width: 150px; height: 150px; }
.in-gains__item--2 .in-gains__t   { left: 822px; top: 226px; width: 367px; }
.in-gains__item--3 .in-gains__ico { left: 62px;  top: 438px; width: 110px; height: 173px; }
.in-gains__item--3 .in-gains__t   { left: 222px; top: 471px; width: 344px; }
.in-gains__item--4 .in-gains__ico { left: 631px; top: 427px; width: 128px; height: 128px; }
.in-gains__item--4 .in-gains__t   { left: 822px; top: 463px; width: 358px; }
.in-gains__item--5 .in-gains__ico { left: 39px;  top: 642px; width: 133px; height: 131px; }
.in-gains__item--5 .in-gains__t   { left: 221px; top: 665px; width: 346px; }
.in-gains__item--6 .in-gains__ico { left: 640px; top: 625px; width: 133px; height: 133px; }
.in-gains__item--6 .in-gains__t   { left: 822px; top: 648px; width: 346px; }

.in-gains__btn {
  position: absolute;
  left: 420px; top: 855px;
  width: 360px; height: 70px;
}

/* ── Два дня программы ─────────────────────────────────────────────────
   Панель — это РАМКА, а не заливка: 2 px, лаймовая в первый день и синяя
   во второй, фон сквозной. Внутри первого дня есть ещё одна рамка, белая.
   Проверял замером: background-color у обеих прозрачный. */
.in-day { overflow: hidden; }
.in-day--1 { background: #080808; color: #fff; height: 920px; }
.in-day--2 { background: var(--bg); color: #fff; height: 860px; }
.in-day--1 .in-wrap { height: 920px; }
.in-day--2 .in-wrap { height: 860px; }

.in-day__h {
  position: absolute;
  left: 67px; top: 57px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 45px; line-height: normal;
}
.in-day--1 .in-day__h { width: 837px; color: #f4f1f1; }
.in-day--2 .in-day__h { width: 597px; }

.in-day__sub {
  position: absolute;
  top: 294px; width: 560px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 700; font-size: 28px; line-height: 1.55;
}
.in-day--1 .in-day__sub { left: 80px; }
.in-day--2 .in-day__sub { left: 73px; }

.in-day__panel {
  position: absolute;
  left: 54px; top: 350px;
  border: 2px solid;
  border-radius: 5px;
}
.in-day--1 .in-day__panel { width: 1120px; height: 416px; border-color: var(--lime); }
.in-day--2 .in-day__panel { width: 1118px; height: 342px; border-color: var(--blue); }

/* Правая колонка первого дня обведена ещё раз, белым. */
.in-day__frame {
  position: absolute;
  left: 596px; top: 386px;
  width: 556px; height: 289px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.in-day__item { position: absolute; }
.in-day__p,
.in-day__task { margin: 0; font-family: 'PPNeueMachina', sans-serif; font-weight: 500; }
.in-day__ul {
  margin: 0; padding-left: 22px;
  list-style: disc;
  font-family: 'PPNeueMachina', sans-serif; font-weight: 500;
}
/* Пояснения к заданиям в оригинале КУРСИВОМ — это не артефакт выгрузки,
   так они и стоят на боевой. Своего наклонного начертания у PP Neue Machina
   нет ни у нас, ни у Тильды: браузер наклоняет прямое, и выходит одинаково. */
.in-day__task em { font-style: italic; }

.in-day--1 .in-day__p,
.in-day--1 .in-day__ul,
.in-day--1 .in-day__task { font-size: 22px; line-height: 1.15; }
.in-day--2 .in-day__task { font-size: 23px; line-height: 1.15; }

.in-day--1 .in-day__item--1 { left: 83px;  top: 376px; width: 443px; }
.in-day--1 .in-day__item--2 { left: 80px;  top: 549px; width: 495px; }
.in-day--1 .in-day__item--3 { left: 80px;  top: 671px; width: 495px; }
.in-day--1 .in-day__item--4 { left: 620px; top: 423px; width: 495px; }
.in-day--1 .in-day__item--5 { left: 620px; top: 535px; width: 480px; }

.in-day--2 .in-day__item--1 { left: 83px;  top: 388px; width: 443px; }
.in-day--2 .in-day__item--2 { left: 80px;  top: 479px; width: 495px; }
.in-day--2 .in-day__item--3 { left: 80px;  top: 565px; width: 495px; }
.in-day--2 .in-day__item--4 { left: 620px; top: 391px; width: 495px; }
.in-day--2 .in-day__item--5 { left: 620px; top: 505px; width: 480px; }

.in-day__btn { position: absolute; width: 360px; height: 70px; border-radius: 10px; }
.in-day--1 .in-day__btn { left: 60px; top: 800px; }
.in-day--2 .in-day__btn { left: 55px; top: 728px; }

/* ── Системные требования ──────────────────────────────────────────────
   Обычный блок Тильды (T480), а не зеро: слева фото 460x560, справа текст
   в колонке 660. Контейнер тут тоже 1200, но с полями по 20 у колонок. */
.in-req {
  background: #fff;
  color: #080808;
  padding: 45px 0;
}
/* У обычного блока Тильды колонки отбиты по 20 внутри контейнера: картинка
   начинается не на краю, а на 20 от него. Без этих полей она уезжала влево
   ровно на 20 — единственное, чем T480 отличается от зеро-блоков по сетке. */
.in-req .in-wrap { display: flex; gap: 40px; padding: 0 20px; }
.in-req__pic { width: 460px; height: 560px; flex: none; object-fit: cover; border-radius: 0; }
.in-req__body { width: 660px; flex: none; }
.in-req__h {
  margin: 0 0 28px;
  padding-bottom: 6px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 42px; line-height: 51.66px;
  text-align: center;
}
.in-req__text {
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 500; font-size: 20px; line-height: 31px;
  text-align: center;
}
.in-req__text p { margin: 0; }
/* Зазор 10 px стоит ПОСЛЕ каждого списка, а не между всеми блоками:
   абзацы идут вплотную, и только после перечисления оригинал добавляет
   воздух. Без этих трёх десяток секция выходила на 30 px короче. */
.in-req__text ul { margin: 0 0 10px; padding: 0; list-style: none; }
/* Два уровня требований в оригинале различаются ЦВЕТОМ, а не словами:
   зелёный «минимум» и фиолетовый «рекомендовано». */
.in-req__text .in-min { color: #8dc30c; }
.in-req__text .in-rec { color: #6c63ff; }
/* Последний пункт и постскриптум набраны с интерлиньяжем 33, а не 31 —
   в оригинале это отдельные элементы со своими настройками. */
.in-req__text p:last-of-type { line-height: 33px; }
.in-req__text p b { line-height: 33px; }
/* ⚠️ Писать здесь просто `.in-req__ps` нельзя: `.in-req__text p` выше
   сильнее по специфичности, и отступ молча не применялся — секция выходила
   ровно на пустую строку короче. В оригинале между «5. Стабильное…» и
   постскриптумом стоит <br>, он и даёт эти 31. */
.in-req__text .in-req__ps { margin-top: 31px; font-weight: 400; }

/* ── Спикеры ───────────────────────────────────────────────────────────
   ⚠️ Это один из двух блоков страницы с upscale="window" — то есть в
   оригинале он единственный (вместе с подвалом) тянется за окном, и при
   1425 его контейнер 1221, а не 1200. Верстаем на 1200, как всю страницу:
   разъезд края с соседними секциями заметнее, чем 21 px по ширине. Отсюда
   высота 1181, а не 1202, и все координаты — канвы минус 100. */
.in-speakers {
  background: #fff;
  color: var(--ink);
  height: 1181px;
  overflow: hidden;
}
.in-speakers .in-wrap { height: 1181px; }
/* Заголовок в оригинале выставлен координатой 334, но его середина при этом
   ровно посередине страницы. Центрируем — так он и останется на месте при
   любой ширине контейнера, а не поедет вместе с ней. */
.in-speakers__h {
  position: absolute;
  left: 50%; top: 82px;
  transform: translateX(-50%);
  white-space: nowrap;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 50px; line-height: 70px;
  letter-spacing: -1.5px;
}
.in-sp { position: static; }
.in-sp__card {
  position: absolute;
  width: 690px; height: 486px;
  background: #f5f5f8;
  border-radius: 20px;
}
.in-sp__pic { position: absolute; width: 486px; height: 486px; max-width: none; border-radius: 20px; }
.in-sp--top .in-sp__pic  { left: 0;    top: 185px; }
.in-sp--top .in-sp__card { left: 510px; top: 185px; }
.in-sp--bottom .in-sp__card { left: 0;    top: 695px; }
.in-sp--bottom .in-sp__pic  { left: 714px; top: 695px; }

/* ⚠️ Координаты внутри карточки — ОТ КАРТОЧКИ, а не от секции: карточка
   сама позиционирована, значит она и есть точка отсчёта для абсолютов
   внутри неё. Сперва я подставил сюда числа от секции, и имя спикера уехало
   за правый край на 500 px. Числа ниже = координата в секции минус угол
   карточки (510/185 у верхней, 0/695 у нижней) — оттого у обеих одни и те
   же 36/36 для имени и 35/112 для должности. */
.in-sp__name {
  position: absolute;
  left: 36px; top: 36px;
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 40px; line-height: 40px;
  letter-spacing: -1.5px;
  white-space: nowrap;
}
/* Подсветка имени — плашка ПОД буквами (в оригинале это отдельная фигура
   43 px высотой), поэтому фон рисуется псевдоэлементом, а не background у
   текста: у background высота считалась бы по интерлиньяжу. */
.in-sp__mark { position: relative; z-index: 1; }
.in-sp__mark::before {
  content: '';
  position: absolute;
  left: -1px; top: 3px;
  height: 43px;
  border-radius: 3px;
  z-index: -1;
}
.in-sp__mark--blue { color: #fff; }
.in-sp__mark--blue::before { background: var(--blue); width: 338px; }
.in-sp__mark--lime { color: var(--ink); }
.in-sp__mark--lime::before { background: var(--lime); width: 344px; }

/* Должности верхней карточки в оригинале НЕ ограничены по ширине и стоят
   каждая в одну строку — с шириной 500 верхняя ломалась на две и наезжала
   на нижнюю. У нижней карточки наоборот: ширина 469 и две строки, поэтому
   интерлиньяж там 29, а не 24. Межбуквенное −1: этот блок единственный на
   странице (вместе с подвалом) набран с разрядкой. */
.in-sp__role {
  position: absolute;
  left: 35px;
  margin: 0;
  font-weight: 400; font-size: 24px;
  letter-spacing: -1px;
  color: var(--ink);
}
.in-sp--top .in-sp__role { line-height: 24px; white-space: nowrap; }
.in-sp--bottom .in-sp__role { width: 469px; line-height: 29px; }
.in-sp__role--1 { top: 112px; }
.in-sp__role--2 { top: 151px; }

/* Пункты со списком тоже стоят по своим координатам: зазоры между ними в
   оригинале неровные (16 и 20), потому что это независимые элементы. */
.in-sp__facts { margin: 0; padding: 0; list-style: none; }
.in-sp__facts li {
  position: absolute;
  left: 35px;
  padding-left: 25px;
  font-weight: 400; font-size: 20px; line-height: 20px;
  letter-spacing: -0.5px;
  color: #61646b;
}
/* Пункты в две-три строки набраны с интерлиньяжем 24, однострочные — 20. */
.in-sp--top .in-sp__facts li:nth-child(2),
.in-sp--bottom .in-sp__facts li:nth-child(2),
.in-sp--bottom .in-sp__facts li:nth-child(3) { line-height: 24px; }
.in-sp__facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 15px; height: 12px;
  background: url('/img/in/check.svg') no-repeat center / contain;
}

.in-sp--top .in-sp__facts li:nth-child(1) { top: 308px; }
.in-sp--top .in-sp__facts li:nth-child(2) { top: 348px; width: 458px; }
.in-sp--top .in-sp__facts li:nth-child(3) { top: 416px; }

.in-sp--bottom .in-sp__facts li:nth-child(1) { top: 256px; }
.in-sp--bottom .in-sp__facts li:nth-child(2) { top: 296px; width: 458px; }
.in-sp--bottom .in-sp__facts li:nth-child(3) { top: 364px; width: 492px; }

/* ── Отзывы участников ─────────────────────────────────────────────────
   Семь снимков переписки 860x550. Лента на горизонтальной прокрутке со
   scroll-snap: листается пальцем, стрелками и с клавиатуры. У Тильды на то
   же самое уходит отдельный плагин.

   Снимки разного размера и вписываются в окно 860x550 по большей стороне
   (contain), как в оригинале, — иначе часть переписки обрезалась бы. */
.in-rvs { background: #fff; color: #080808; }
.in-rvs__h {
  height: 116px;
  margin: 0;
  padding-top: 60px;
  text-align: center;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 45px; line-height: 1.25;
}
.in-rvs__sub {
  height: 28px;
  margin: 20px 0 0;
  text-align: center;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 18px; line-height: 1.55;
}
/* Шапка отзывов и лента — в оригинале ДВЕ записи: 200 и 610. Держим их
   высоты явно, иначе секция набирается «как получится». */
.in-rvs__box {
  position: relative;
  width: 100%;
  height: 610px;
  margin: 36px auto 0;
}
/* ⚠️ Лента идёт ВО ВСЮ ШИРИНУ, а не по контейнеру: у оригинала слайдер
   шириной 960 с `overflow: visible`, и соседние снимки выглядывают по краям
   экрана на 183 px. Обрезав ленту по снимку (860), мы теряли этот вид —
   а он единственное, что показывает, что отзывов больше одного.
   Шаг слайда 960 = снимок 860 + зазор 100, как в оригинале; боковые поля
   центруют первый и последний. */
.in-rvs__track {
  display: flex;
  gap: 100px;
  width: 100%;
  padding-inline: calc(50% - 430px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.in-rvs__track::-webkit-scrollbar { display: none; }
.in-rv {
  flex: none;
  width: 860px; height: 550px;
  object-fit: contain;
  scroll-snap-align: center;
}
.in-rvs__arrow {
  position: absolute;
  top: 255px;
  width: 22px; height: 41px;
  padding: 0;
  border: 0; background: none;
  color: #080808;
  cursor: pointer;
}
.in-rvs__arrow svg { width: 22px; height: 41px; }
/* Стрелки в оригинале стоят на 222 от края экрана — то есть вплотную к
   выглядывающему соседнему снимку, а не по краю контейнера. */
.in-rvs__arrow--left  { left: calc(50% - 490px); }
.in-rvs__arrow--right { right: calc(50% - 490px); }
.in-rvs__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  gap: 10px;
}
.in-rvs__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--lime);
  cursor: pointer;
}
.in-rvs__dot[aria-current='true'] { background: #222; }

/* ── Форматы участия ───────────────────────────────────────────────────
   Левая карточка — лаймовая РАМКА без заливки, правая — сплошная синяя.
   Правая на 15 px выше левой и на 20 шире: так в оригинале выделен тариф
   с поддержкой. */
.in-plans { background: var(--bg); color: #fff; padding: 75px 0; }
.in-plans__h {
  min-height: 55px;
  margin: 0 0 105px;
  text-align: center;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 42px; line-height: 51.66px;
}
.in-plans__row { display: flex; align-items: flex-start; }
.in-plan {
  position: relative;
  width: 560px;
  height: 653px;
  margin: 15px 0 0 20px;
  padding: 40px 30px;
  border: 2px solid var(--lime);
  border-radius: 9px;
  text-align: center;
}
.in-plan--featured {
  width: 580px;
  height: 683px;
  margin: 0 0 0 30px;
  padding: 55px 30px;
  border: 0;
  background: var(--blue);
}
.in-plan__name {
  margin: 0;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 600; font-size: 22px; line-height: 29.7px;
}
.in-plan--featured .in-plan__name { font-weight: 700; }
.in-plan__badge {
  margin: 10px 0 0;
  font-weight: 700; font-size: 24px; line-height: 37.2px;
  color: #ff4026;
}
.in-plan__badge--lime { color: var(--lime); }
.in-plan__price {
  margin: 30px 0 0;
  font-weight: 600; font-size: 42px; line-height: 51.66px;
}
.in-plan__price s { opacity: .75; margin-right: 8px; }
.in-plan__list {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 300; font-size: 16px; line-height: 24.8px;
}
.in-plan__btn {
  position: absolute;
  left: 50%; bottom: 42px;
  transform: translateX(-50%);
  width: 302px; height: 60px;
  font-size: 16px; line-height: 22.4px;
}
.in-plan--featured .in-plan__btn { bottom: 57px; border-radius: 10px; }

/* ── Форма вопроса ─────────────────────────────────────────────────────
   Имена полей боевые (`Name`, `Phone`, `Комментарий или вопрос`) — их
   ищет приёмник заявок, см. комментарий в разметке. */
.in-ask { background: #fff; color: #080808; padding: 105px 0; }
.in-ask__h {
  min-height: 55px;
  margin: 0 0 75px;
  text-align: center;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 42px; line-height: 51.66px;
}
.in-ask__form { width: 760px; margin: 0 auto; }
.in-ask__field { display: block; margin-bottom: 25px; }
/* Группа поля — ровно 96 (28 подпись + 8 зазор + 60 поле), у текстовой
   области 142. Числа из оригинала: без них форма набиралась на 28 короче. */
.in-ask__label {
  display: block;
  height: 28px; line-height: 28px;
  margin-bottom: 8px;
  font-size: 16px; color: #080808;
}
.in-ask__field input,
.in-ask__field textarea {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid #000;   /* у боевой рамка чёрная и углы прямые — на обеих ширинах */
  border-radius: 0;
  background: #fff;
  color: #080808;
  font: inherit;
  font-size: 16px;
}
/* display:block обязателен: у строчной textarea под нижним краем остаётся
   зазор базовой линии, и группа выходила на 4 px выше. */
.in-ask__field textarea { display: block; height: 102px; padding: 18px 20px; resize: vertical; }
.in-ask__submit { width: 100%; height: 60px; margin-top: 5px; border: 0; cursor: pointer; }
.in-ask__err { margin: 0 0 12px; color: #ff4026; font-size: 15px; }
.in-ask__ok { width: 760px; margin: 0 auto; text-align: center; font-size: 18px; }
.in-ask__note {
  width: 760px;
  margin: 30px auto 0;
  font-weight: 300; font-size: 15px; line-height: 23.25px;
}
.in-ask__note a { color: #ff8562; }

/* ── Вопрос-ответ ──────────────────────────────────────────────────────
   Переписка: тёмный пузырь вопроса с хвостиком слева, светлый пузырь
   ответа с хвостиком справа. Хвостики нарисованы уголками через border,
   отдельных картинок не нужно. */
.in-faq { background: #080808; padding: 90px 0; }
.in-qa { width: 760px; margin: 0 auto 30px; }
.in-qa:last-child { margin-bottom: 0; }
.in-qa__q,
.in-qa__a {
  position: relative;
  display: flex;
  gap: 0;
  padding: 28px 40px;
  border-radius: 40px;
}
.in-qa__q { background: #222; color: #fff; margin-bottom: 30px; }
.in-qa__a { background: #eee; color: #080808; }
.in-qa__tag {
  flex: none;
  width: 115px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 12px; line-height: 40.3px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.in-qa__t {
  margin: 0;
  font-weight: 300; font-size: 26px; line-height: 40.3px;
}
.in-qa__t b { font-size: 16px; line-height: 24.8px; font-weight: 700; }
.in-qa__a .in-qa__t { font-size: 16px; line-height: 24.8px; }
/* Хвостик пузыря. У вопроса — слева снизу, у ответа — справа снизу. */
.in-qa__q::after,
.in-qa__a::after {
  content: '';
  position: absolute;
  bottom: -18px;
  width: 0; height: 0;
  border-style: solid;
}
.in-qa__q::after {
  left: 17px;
  border-width: 24px 0 0 33px;
  border-color: #222 transparent transparent transparent;
}
.in-qa__a::after {
  right: 17px;
  border-width: 24px 33px 0 0;
  border-color: #eee transparent transparent transparent;
}

/* ── Последняя кнопка ──────────────────────────────────────────────────
   Секция целиком — одна кнопка по центру. */
.in-cta {
  background: var(--bg);
  padding: 60px 0;
  text-align: center;
}
.in-cta__btn { width: 370px; height: 60px; font-size: 16px; line-height: 22.4px; }

/* ══ Интенсив: телефон ═════════════════════════════════════════════════

   ⚠️ МОДЕЛЬ ЗДЕСЬ ДРУГАЯ, ЧЕМ НА ОСТАЛЬНЫХ СТРАНИЦАХ. У курсов мобильная
   канва 360 тянется за шириной экрана (`--м: 100vw/360`). Здесь зеро-блоки
   не тянутся вовсе: канва 320, приколочена, по центру. Проверено замером на
   360, 375 и 430 — высота секции 670 и размеры элементов совпадают до
   пикселя на всех трёх, меняется только левое поле: (ширина − 320) / 2.

   Обычные блоки Тильды (требования, тарифы, форма, вопрос-ответ, отзывы)
   ведут себя иначе — они РЕЗИНОВЫЕ: контейнер во всю ширину минус 20 по
   краям. Поэтому у них своя ширина, а не канва.

   Числа сняты с живой страницы при 375 и приведены к канве вычитанием
   27.5 — читать их из выгрузки бесполезно: у `-res-320` половина свойств
   досчитывается скриптом Тильды уже в браузере.

   Граница 479 — та же, что у Тильды и у остальных наших страниц: с 480
   оригинал переходит на канву 480, а мы на потоковую раскладку. Держать
   канву 320 до 767 было бы хуже всего: узкая полоса по центру пустого
   экрана — ни на что не похоже. */
@media (max-width: 479px) {
  .page-intensiv .in-wrap { width: 320px; }

  /* Резиновые секции: обычные блоки Тильды, а не зеро. */
  .in-req .in-wrap,
  .in-plans .in-wrap,
  .in-ask .in-wrap,
  .in-faq .in-wrap,
  .in-rvs .in-wrap { width: 100%; padding: 0 20px; }

  /* ── Шапка: на телефоне только логотип.
     Кнопка «Записаться» в оригинале запаркована на 569 при канве 320 —
     то есть уехала за правый край и не видна никому. Прячем её честно,
     а не двигаем: иначе на телефоне появится элемент, которого в
     оригинале нет. */
  .in-top, .in-top .in-wrap { height: 60px; }
  .in-top__logo { left: 10px; top: 16px; }
  .in-top__logo img { width: 136px; height: 30px; }
  .in-top__cta { display: none; }

  /* ── Первый экран */
  .in-hero, .in-hero .in-wrap { height: 670px; }
  .in-hero__start { left: 10px; top: 19px; width: 320px; font-size: 19px; line-height: 29px; }
  /* ⚠️ В оригинале эта строка стоит на 51 и «мск» из строки выше налезает
     на неё. Опускаем на 85, под две строки «Старта». Наложение текста —
     не та деталь, которую стоит повторять ради точности. */
  .in-hero__for   { left: 11px; top: 85px; width: 220px; font-size: 14px; line-height: 17px; }
  .in-hero__h     { left: 10px; top: 142px; width: 309px; font-size: 26px; line-height: 26px; }
  .in-hero__lead  { left: 10px; top: 284px; width: 290px; font-size: 14px; line-height: 20px; }
  .in-hero__btn   { left: 9px; top: 399px; width: 306px; height: 60px; font-size: 16px; line-height: 24.8px; z-index: 2; }
  .in-hero__pic   { left: 7px; top: 403px; width: 306px; height: 346px; }

  /* ── Для кого */
  .in-who, .in-who .in-wrap { height: 550px; }
  .in-who__h { left: 21px; top: 27px; width: 279px; font-size: 25px; }
  .in-who__item { font-size: 15px; line-height: 15px; }
  .in-who__item--1 { left: 94px; top: 79px;  width: 191px; }
  .in-who__item--2 { left: 92px; top: 163px; width: 212px; }
  .in-who__item--3 { left: 93px; top: 244px; width: 185px; }
  .in-who__item--1 .in-who__bullet { left: -85px; top: -13px; width: 83px; height: 83px; }
  .in-who__item--1 .in-who__bullet img { left: 24px; top: 25px; width: 31px; height: 31px; }
  .in-who__item--2 .in-who__bullet { left: -72px; top: -3px; width: 60px; height: 60px; }
  .in-who__item--2 .in-who__bullet img { left: 13px; top: 12px; width: 33px; height: 34px; }
  .in-who__item--3 .in-who__bullet { left: -73px; top: 3px; width: 60px; height: 60px; }
  .in-who__item--3 .in-who__bullet img { left: 14px; top: 14px; width: 32px; height: 32px; }
  .in-who__pic { left: 10px; top: 335px; width: 336px; height: 224px; }

  /* ── Что получаешь: на телефоне одна колонка, картинка над текстом */
  .in-gains, .in-gains .in-wrap { height: 1600px; }
  .in-gains__h { left: 11px; top: 21px; width: 240px; font-size: 26px; }
  .in-gains__t { font-size: 16px; line-height: 18px; }
  .in-gains__item--1 .in-gains__ico { left: 10px; top: 141px;  width: 97px;  height: 100px; }
  .in-gains__item--1 .in-gains__t   { left: 10px; top: 274px;  width: 297px; }
  .in-gains__item--2 .in-gains__ico { left: 12px; top: 378px;  width: 120px; height: 120px; }
  .in-gains__item--2 .in-gains__t   { left: 12px; top: 519px;  width: 313px; }
  .in-gains__item--3 .in-gains__ico { left: 32px; top: 630px;  width: 63px;  height: 99px; }
  .in-gains__item--3 .in-gains__t   { left: 12px; top: 754px;  width: 297px; }
  .in-gains__item--4 .in-gains__ico { left: 30px; top: 836px;  width: 63px;  height: 63px; }
  .in-gains__item--4 .in-gains__t   { left: 10px; top: 960px;  width: 297px; }
  .in-gains__item--5 .in-gains__ico { left: 12px; top: 1038px; width: 106px; height: 104px; }
  .in-gains__item--5 .in-gains__t   { left: 10px; top: 1169px; width: 256px; }
  .in-gains__item--6 .in-gains__ico { left: 15px; top: 1254px; width: 106px; height: 106px; }
  .in-gains__item--6 .in-gains__t   { left: 13px; top: 1385px; width: 280px; }
  .in-gains__btn { left: 10px; top: 1476px; width: 300px; height: 60px; font-size: 16px; line-height: 24.8px; }

  /* ── Два дня */
  .in-day--1, .in-day--1 .in-wrap { height: 800px; }
  .in-day--2, .in-day--2 .in-wrap { height: 730px; }
  .in-day__h { left: 10px; top: 18px; font-size: 22px; }
  .in-day--1 .in-day__h { width: 289px; }
  .in-day--2 .in-day__h { width: 263px; }
  .in-day__sub { width: 300px; font-size: 18px; line-height: 28px; }
  .in-day--1 .in-day__sub { left: 10px; top: 144px; }
  .in-day--2 .in-day__sub { left: 10px; top: 121px; }
  .in-day--1 .in-day__panel { left: 11px; top: 186px; width: 301px; height: 457px; }
  .in-day--2 .in-day__panel { left: 11px; top: 163px; width: 301px; height: 439px; }
  .in-day__frame { left: 26px; top: 461px; width: 273px; height: 154px; }
  .in-day--1 .in-day__p,
  .in-day--1 .in-day__ul,
  .in-day--1 .in-day__task,
  .in-day--2 .in-day__task { font-size: 15px; line-height: 17px; }
  .in-day--1 .in-day__item--1 { left: 30px; top: 211px; width: 260px; }
  .in-day--1 .in-day__item--2 { left: 29px; top: 319px; width: 260px; }
  .in-day--1 .in-day__item--3 { left: 30px; top: 408px; width: 260px; }
  .in-day--1 .in-day__item--4 { left: 40px; top: 474px; width: 245px; }
  .in-day--1 .in-day__item--5 { left: 39px; top: 541px; width: 260px; }
  .in-day--2 .in-day__item--1 { left: 30px; top: 188px; width: 254px; }
  .in-day--2 .in-day__item--2 { left: 30px; top: 259px; width: 260px; }
  .in-day--2 .in-day__item--3 { left: 31px; top: 338px; width: 260px; }
  .in-day--2 .in-day__item--4 { left: 32px; top: 418px; width: 245px; }
  .in-day--2 .in-day__item--5 { left: 32px; top: 500px; width: 260px; }
  .in-day__btn { width: 300px; height: 60px; font-size: 16px; line-height: 24.8px; }
  .in-day--1 .in-day__btn { left: 10px; top: 683px; }
  .in-day--2 .in-day__btn { left: 10px; top: 631px; }

  /* ── Системные требования: в колонку, фото сверху */
  .in-req { padding: 45px 0; }
  .in-req .in-wrap { display: block; }
  .in-req__pic { width: 100%; height: 447px; margin-bottom: 30px; }
  .in-req__body { width: auto; }
  /* На телефоне у боевой блок НЕ центрирован: заголовок и список от левого
     края, у вложенных пунктов маркеры-точки. */
  .in-req__h { margin: 0 0 27px; padding-bottom: 9px; font-size: 30px; line-height: 36.9px; text-align: left; }
  .in-req__text { font-size: 16px; line-height: 23.2px; text-align: left; }
  .in-req__text ul { padding-left: 24px; list-style: disc; }
  /* На телефоне воздух после списков больше, чем на десктопе: 22 против 10. */
  .in-req__text ul { margin-bottom: 22px; }
  .in-req__text p:last-of-type,
  .in-req__text p b { line-height: 23.2px; }
  .in-req__text .in-req__ps { margin-top: 23px; }

  /* ── Спикеры: фото над карточкой, карточки друг под другом */
  .in-speakers, .in-speakers .in-wrap { height: 1797px; }
  .in-speakers__h { left: 20px; top: 36px; transform: none; font-size: 30px; line-height: 30px; letter-spacing: -1px; }  /* у боевой на телефоне заголовок слева, десктопное центрирование снимаем */
  .in-sp__pic { width: 342px; height: 342px; }
  .in-sp__card { width: 342px; height: auto; }
  .in-sp--top .in-sp__pic  { left: -11px; top: 89px; }
  .in-sp--top .in-sp__card { left: -11px; top: 436px; height: 447px; }
  .in-sp--bottom .in-sp__pic  { left: -11px; top: 898px; }
  .in-sp--bottom .in-sp__card { left: -11px; top: 1245px; height: 552px; }
  .in-sp__name { left: 28px; top: 15px; font-size: 30px; line-height: 30px; }
  .in-sp__mark::before { height: 35px; top: 1px; }
  .in-sp__mark--blue::before { width: 263px; }
  .in-sp__mark--lime::before { width: 266px; }
  .in-sp__role { left: 26px; font-size: 20px; }
  .in-sp--top .in-sp__role { white-space: normal; }
  .in-sp--top .in-sp__role--1 { top: 82px; width: 262px; line-height: 22px; }
  .in-sp--top .in-sp__role--2 { top: 138px; width: 257px; line-height: 20px; }
  .in-sp--bottom .in-sp__role { top: 94px; width: 206px; line-height: 24px; }
  .in-sp__facts li { left: 26px; padding-left: 26px; font-size: 18px; line-height: 23px; }
  .in-sp__facts li::before { top: 4px; width: 16px; height: 13px; }
  .in-sp--top .in-sp__facts li:nth-child(1) { top: 211px; width: 259px; }
  .in-sp--top .in-sp__facts li:nth-child(2) { top: 275px; width: 242px; }
  .in-sp--top .in-sp__facts li:nth-child(3) { top: 362px; width: 192px; }
  .in-sp--bottom .in-sp__facts li:nth-child(1) { top: 221px; width: 256px; }
  .in-sp--bottom .in-sp__facts li:nth-child(2) { top: 285px; width: 259px; }
  .in-sp--bottom .in-sp__facts li:nth-child(3) { top: 396px; width: 248px; }

  /* ── Отзывы: лента во всю ширину */
  .in-rvs__h { height: auto; padding-top: 30px; font-size: 22px; line-height: 28px; }
  .in-rvs__sub { height: auto; margin-top: 15px; font-size: 16px; line-height: 20px; }
  .in-rvs .in-wrap { width: 100%; padding: 0 20px; }
  .in-rvs__box { width: 100%; height: 300px; margin-top: 45px; }
  .in-rvs__track { width: 100%; gap: 0; padding-inline: 0; }
  .in-rv { width: 100%; height: 240px; }
  .in-rvs__arrow { display: none; }
  .in-rvs__dots { height: 44px; }

  /* ── Форматы участия: карточки друг под другом */
  .in-plans { padding: 75px 0; }
  .in-plans__h { min-height: 80px; margin-bottom: 30px; font-size: 30px; line-height: 36.9px; }
  .in-plans__row { display: block; }
  .in-plan { width: 100%; height: 451px; margin: 0; padding: 42px 32px; }
  .in-plan--featured { width: 100%; height: 652px; margin: 33px 0 0; padding: 57px 32px; }
  .in-plan__name { font-size: 18px; line-height: 24.3px; }
  .in-plan__badge { margin-top: 10px; font-size: 24px; line-height: 37.2px; }
  .in-plan__price { margin-top: 30px; font-size: 30px; line-height: 36.9px; }
  .in-plan__list { margin-top: 25px; font-size: 12px; line-height: 17.4px; }
  .in-plan__btn { bottom: 32px; width: 242px; }
  .in-plan--featured .in-plan__btn { bottom: 35px; }

  /* ── Форма вопроса */
  .in-ask { padding: 105px 0; }
  .in-ask__h { min-height: 0; margin-bottom: 45px; font-size: 30px; line-height: 36.9px; }
  .in-ask__form, .in-ask__ok, .in-ask__note { width: 100%; }
  .in-ask__note { margin-top: 30px; font-size: 12px; line-height: 17.4px; }

  /* ── Вопрос-ответ */
  .in-faq { padding: 90px 0; }
  .in-qa { width: 100%; margin-bottom: 51px; }
  .in-qa__q, .in-qa__a { display: block; padding: 16px 20px 15px; border-radius: 20px; }
  .in-qa__q { margin-bottom: 20px; }
  .in-qa__tag { display: block; width: auto; margin-bottom: 4px; font-size: 10px; line-height: 1; }
  /* ⚠️ Кегль вопроса на телефоне остаётся КРУПНЫМ (26/37.7) — уменьшается
     только ответ. Сперва я сжал оба до 12, и второй вопрос из семи строк
     стал двумя: секция потеряла 123 px. */
  .in-qa__t { font-size: 26px; line-height: 37.7px; }
  .in-qa__a .in-qa__t { font-size: 12px; line-height: 17.4px; }
  .in-qa__t b { font-size: 12px; line-height: 17.4px; }
  .in-qa__q::after, .in-qa__a::after { bottom: -14px; border-width: 18px 0 0 24px; }
  .in-qa__a::after { border-width: 18px 24px 0 0; }

  /* ── Последняя кнопка */
  .in-cta { padding: 60px 0; }
  .in-cta__btn { width: 310px; }
}

/* ══ Интенсив: планшет (768–1259) ══════════════════════════════════════

   Здесь мы НЕ повторяем оригинал, и это осознанно — тем же приёмом сделаны
   планшетные раскладки курсов. У Тильды на этот диапазон три отдельные
   канвы (960, 640, 480), и высота страницы скачет с 10 350 на 1024 до
   14 249 на 768: это три разные вёрстки, а не одна тянущаяся. Повторять их
   значит утроить работу ради ширин, на которых к нам почти не заходят.

   Вместо этого весь абсолют возвращается в поток и страница становится
   одноколоночной. Требование к диапазону одно и жёсткое: НИКАКОЙ
   горизонтальной прокрутки. До этого блока она была: контейнер 1200 не
   помещался в 768, и страница ехала вбок на 432 px. */
/* ⚠️ Верхняя граница 1199.98, а не 1259: с 1200 Тильда показывает интенсив
   на артборде 1200, то есть в десктопной раскладке. Ниже 1200 работают три
   полосы с фиксированными контейнерами (см. конец файла), а этот блок
   остаётся запасной раскладкой под ними. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .page-intensiv .in-wrap { width: 100%; max-width: 720px; padding: 0 20px; }

  .in-top, .in-hero, .in-who, .in-gains, .in-day--1, .in-day--2,
  .in-speakers, .in-plans { height: auto; }
  .in-top .in-wrap, .in-hero .in-wrap, .in-who .in-wrap, .in-gains .in-wrap,
  .in-day--1 .in-wrap, .in-day--2 .in-wrap, .in-speakers .in-wrap { height: auto; }

  .in-top__logo, .in-top__cta,
  .in-hero__start, .in-hero__for, .in-hero__h, .in-hero__lead,
  .in-hero__btn, .in-hero__pic,
  .in-who__h, .in-who__item, .in-who__pic,
  .in-gains__h, .in-gains__ico, .in-gains__t, .in-gains__btn,
  .in-day__h, .in-day__sub, .in-day__panel, .in-day__frame,
  .in-day__item, .in-day__btn,
  .in-speakers__h, .in-sp__card, .in-sp__pic, .in-sp__name,
  .in-sp__role, .in-sp__facts, .in-sp__facts li {
    position: static;
    left: auto; top: auto;
    width: auto; height: auto;
  }

  /* ── Шапка */
  .in-top { padding: 16px 0; }
  .in-top .in-wrap { display: flex; align-items: center; justify-content: space-between; }
  .in-top__cta { width: 200px; height: 52px; }

  /* ── Первый экран */
  .in-hero { padding: 40px 0 48px; }
  .in-hero__start { font-size: 22px; }
  .in-hero__for { margin-top: 10px; }
  .in-hero__h { margin-top: 28px; font-size: 36px; line-height: 40px; }
  .in-hero__lead { margin-top: 24px; font-size: 20px; }
  .in-hero__btn { display: flex; width: 320px; height: 70px; margin-top: 32px; }
  .in-hero__pic { width: 100%; height: auto; margin-top: 32px; }

  /* ── Для кого */
  .in-who { padding: 48px 0; }
  .in-who__h { font-size: 36px; }
  .in-who__list { margin-top: 32px; }
  .in-who__item { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; font-size: 20px; line-height: 1.3; }
  .in-who__bullet { position: static; flex: none; width: 80px; height: 80px; }
  .in-who__item .in-who__bullet img { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .in-who__pic { width: 100%; height: auto; margin-top: 24px; }

  /* ── Что получаешь */
  .in-gains { padding: 48px 0; }
  .in-gains__h { font-size: 36px; }
  .in-gains__list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
  .in-gains__item { display: flex; flex-direction: column; gap: 16px; }
  .in-gains__ico { max-height: 120px; object-fit: contain; object-position: left; }
  .in-gains__t { font-size: 18px; line-height: 1.25; }
  .in-gains__btn { display: flex; width: 320px; height: 70px; margin-top: 40px; }

  /* ── Дни: рамки в потоке становятся обычными панелями */
  .in-day { padding: 48px 0; }
  .in-day__h { font-size: 36px; }
  .in-day__sub { margin-top: 24px; font-size: 24px; }
  .in-day__panel { display: none; }
  .in-day__frame { display: none; }
  /* Панель-рамку рисуем на обёртке пунктов: в потоке она обнимает
     содержимое, а не висит по координатам. */
  .in-day .in-wrap > .in-day__item:first-of-type { margin-top: 24px; }
  .in-day__item { margin-bottom: 20px; }
  .in-day--1 .in-day__p, .in-day--1 .in-day__ul,
  .in-day--1 .in-day__task, .in-day--2 .in-day__task { font-size: 18px; line-height: 1.3; }
  .in-day__btn { display: flex; width: 320px; height: 70px; margin-top: 24px; }

  /* ── Требования */
  .in-req .in-wrap { display: block; }
  .in-req__pic { width: 100%; height: auto; margin-bottom: 32px; }
  .in-req__body { width: auto; }
  /* На телефоне у боевой этот блок НЕ центрирован: заголовок и список идут
     от левого края, у вложенных пунктов появляются маркеры-точки. */
  .in-req__h { font-size: 36px; line-height: 1.2; text-align: left; }
  .in-req__text { text-align: left; }
  .in-req__text ul { padding-left: 24px; list-style: disc; }

  /* ── Спикеры */
  .in-speakers { padding: 48px 0; }
  .in-speakers__h { transform: none; white-space: normal; font-size: 36px; line-height: 1.2; text-align: left; }  /* у боевой на телефоне слева */
  .in-sp { display: block; margin-top: 32px; }
  .in-sp__pic { width: 100%; height: auto; border-radius: 20px; }
  .in-sp__card { width: auto; margin-top: 16px; padding: 32px; }
  .in-sp__name { font-size: 32px; }
  .in-sp__mark::before { display: none; }
  .in-sp__mark--blue { color: var(--blue); }
  .in-sp__mark--lime { color: #6f8f10; }
  .in-sp__role { margin-top: 16px; white-space: normal; }
  .in-sp__facts { margin-top: 20px; }
  .in-sp__facts li { margin-bottom: 12px; }

  /* ── Отзывы */
  .in-rvs .in-wrap { width: 100%; max-width: none; padding: 0 20px; }
  .in-rvs__box { width: 100%; height: auto; margin-top: 32px; }
  .in-rvs__track { width: 100%; gap: 24px; padding-inline: 0; }
  .in-rv { width: 100%; height: 420px; }
  .in-rvs__arrow { display: none; }

  /* ── Тарифы */
  .in-plans { padding: 64px 0; }
  .in-plans__h { margin-bottom: 40px; font-size: 36px; }
  .in-plans__row { display: block; }
  .in-plan, .in-plan--featured { width: 100%; height: auto; margin: 0 0 32px; padding: 40px 30px 110px; }
  .in-plan__btn { bottom: 40px; }

  /* ── Форма и вопрос-ответ */
  .in-ask { padding: 64px 0; }
  .in-ask__h { margin-bottom: 40px; font-size: 36px; }
  .in-ask__form, .in-ask__ok, .in-ask__note { width: 100%; }
  .in-faq { padding: 64px 0; }
  .in-qa { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   SEO-ПОСАДОЧНЫЕ  /kursy-*
   ══════════════════════════════════════════════════════════════════════

   Новый тип страницы: текстовая посадочная, у которой НЕТ оригинала на
   Тильде. Сверять не с чем, поэтому вёрстка не координатами, а потоком —
   впервые на этом сайте. Всё остальное берётся из общей дизайн-системы:
   .wrap, .btn, шрифты и цвета те же, что на карточках курсов.

   Колонка узкая (720) намеренно: это страница, которую читают подряд, а
   не разглядывают. При 1221 строка вышла бы под 150 символов — вдвое
   длиннее того, на чём глаз держит строку. */

.page-lp { background: var(--bg); color: #fff; }
/* На 320 длинные слова вроде «Windows-администрирования» не влезают в
   колонку и растягивают страницу вбок на 29 px.
   ⚠️ Перенос по слогам включаем ТОЛЬКО на узких экранах. Сперва я поставил
   hyphens: auto без условия — и на десктопе текст запестрел переносами
   («настоя-щих», «до-машних»), чего в русской вёрстке на широкой колонке
   не делают. На 320 это меньшее зло, чем прокрутка вбок. */
.page-lp .lp-col,
.page-lp .lp-hero { overflow-wrap: break-word; }
@media (max-width: 420px) {
  .page-lp .lp-col,
  .page-lp .lp-hero { hyphens: auto; }
}

/* ⚠️ min(), а не просто 720: у общего .wrap стоит max-width:
   calc(100% - 40px), и он-то и держит поля на телефоне. Написав сюда голое
   720, я его перебил — и текст лёг вплотную к краям экрана. */
.lp-col { max-width: min(720px, calc(100% - 40px)); }

/* ── Первый экран ──────────────────────────────────────────────────────
   ⚠️ Шапка сайта — position:absolute и лежит ПОВЕРХ первой секции, места
   в потоке не занимает. Поэтому отступ сверху не косметический: с 72 px
   надзаголовок оказывался ровно под логотипом. У страниц курсов ту же
   работу делает padding-top: 243.

   Колонка первого экрана — та же, что у текста ниже. Сперва я оставил его
   во всю ширину .wrap, и заголовок начинался у левого края, а текст
   секций — на 350 px правее: страница выглядела сломанной. */
.lp-hero { padding: 152px 0 56px; }
.lp-hero .wrap { max-width: min(720px, calc(100% - 40px)); }
.lp-kicker {
  margin: 0 0 18px;
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lime);
}
.lp-hero__h {
  max-width: 900px;
  margin: 0 0 24px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 50px; line-height: 1.06;
  letter-spacing: -1.5px;
  text-wrap: balance;
}
.lp-hero__lead {
  max-width: 660px;
  margin: 0 0 36px;
  font-size: 20px; line-height: 1.5; font-weight: 300;
  color: #d6d8d4;
}
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-lime { color: var(--lime); }
.lp-blue { color: var(--blue); }

/* Общая .btn растянута под карточки товаров: min-height 71 и margin-top
   auto, чтобы прижиматься к низу карточки. В тексте это лишнее. */
.lp-btn {
  display: inline-flex;
  min-height: 0;
  margin-top: 0;
  padding: 20px 30px;
  font-size: 16px;
}
.lp-btn--wide { display: flex; margin: 8px 0 8px; }

/* ── Текст ─────────────────────────────────────────────────────────── */
.lp-body { padding: 0 0 88px; }
.lp-h2 {
  margin: 52px 0 16px;
  font-family: 'PPNeueMachina', sans-serif;
  font-weight: 400; font-size: 30px; line-height: 1.2;
  letter-spacing: -.8px;
  text-wrap: balance;
}
.lp-col p {
  margin: 0 0 18px;
  font-size: 18px; line-height: 1.6; font-weight: 300;
  color: #e2e4e0;
}
/* :not(.btn) обязателен — иначе подчёркивание из текста прилетает и на
   кнопки: «{ Начать с бесплатного мини-курса }» выходил подчёркнутым. */
.lp-col a:not(.btn) { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.lp-col a:not(.btn):hover { opacity: .8; }
.lp-col b { font-weight: 600; color: #fff; }

.lp-list { margin: 0 0 18px; padding-left: 0; list-style: none; }
.lp-list li {
  position: relative;
  margin-bottom: 14px; padding-left: 26px;
  font-size: 18px; line-height: 1.55; font-weight: 300;
  color: #e2e4e0;
}
.lp-list li::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 10px; height: 2px;
  background: var(--lime);
}
/* Перечисление навыков плотнее: это список для просмотра, а не для чтения. */
.lp-list--skills li { margin-bottom: 9px; }

/* ── Таблица направлений ───────────────────────────────────────────── */
.lp-table { overflow-x: auto; margin: 0 0 22px; }
.lp-table table { border-collapse: collapse; width: 100%; min-width: 560px; }
.lp-table th, .lp-table td {
  padding: 14px 16px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid #3a3a3a;
  font-size: 16px; line-height: 1.45; font-weight: 300;
}
.lp-table th {
  font-family: 'PitagonSansMono', ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: #a0a29e;
  border-bottom-color: #4a4a4a;
}
.lp-table tr:last-child td { border-bottom: 0; }

/* ── Вопрос-ответ ──────────────────────────────────────────────────── */
.lp-faq { margin: 0 0 8px; }
.lp-qa {
  border-bottom: 1px solid #3a3a3a;
  padding: 4px 0;
}
.lp-qa summary {
  padding: 18px 40px 18px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 18px; line-height: 1.45; font-weight: 500;
}
.lp-qa summary::-webkit-details-marker { display: none; }
/* Плюс/минус рисуем сами: у стандартного треугольника нет управления
   цветом, и он выпадает из набора. */
.lp-qa summary::after,
.lp-qa summary::before {
  content: '';
  position: absolute; right: 6px; top: 50%;
  width: 14px; height: 2px;
  background: var(--lime);
  transition: transform .2s ease-in-out;
}
.lp-qa summary::before { transform: rotate(90deg); }
.lp-qa[open] summary::before { transform: rotate(0deg); }
.lp-qa p { margin: 0 0 18px; font-size: 17px; }

/* ── Куда дальше ───────────────────────────────────────────────────── */
.lp-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 0;
}
.lp-next__card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  text-decoration: none !important;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
.lp-next__card:hover { border-color: var(--lime); background: #333; opacity: 1; }
.lp-next__t {
  font-family: 'PPNeueMachina', sans-serif;
  font-size: 19px; font-weight: 400; letter-spacing: -.4px;
  color: #fff;
}
.lp-next__d { font-size: 15px; line-height: 1.4; font-weight: 300; color: #b7b9b5; }

/* ── Иллюстрации и схемы ───────────────────────────────────────────────
   Фото — со свободных стоков (Pexels, лицензия разрешает правку и
   коммерческое использование без указания автора); светлые офисные кадры
   при конвертации слегка притемнены под тёмный сайт (см. журнал сессии).
   Схемы не картинками, а SVG по правилам кита (пульт → Дизайн → study):
   узлы #2d2d2d r10, линии 1.5px #4b4b4b, до двух акцентов на схему. */
.lp-figure { margin: 8px 0 28px; }
.lp-figure img { width: 100%; height: auto; border-radius: 20px; }
.lp-figure figcaption { margin-top: 10px; font-size: 14px; color: #a5a5a5; }
.lp-scheme { margin: 8px 0 28px; padding: 24px; background: var(--card); border-radius: 20px; overflow-x: auto; }
.lp-scheme svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.lp-scheme figcaption { margin-top: 12px; font-size: 14px; color: #a5a5a5; text-align: center; }

/* Нумерованные шаги — только там, где порядок настоящий (дорожная карта). */
.lp-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: шаг; }
.lp-steps li { position: relative; margin-bottom: 18px; padding: 20px 24px 20px 74px; background: var(--card); border-radius: 20px; font-size: 17px; line-height: 1.55; font-weight: 300; color: #e2e4e0; }
.lp-steps li::before { counter-increment: шаг; content: counter(шаг);
  position: absolute; left: 22px; top: 20px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lime); border-radius: 50%; color: var(--lime);
  font-family: 'PitagonSansMono', ui-monospace, monospace; font-size: 16px; }
.lp-steps b { font-weight: 600; color: #fff; }

/* Стилизованный терминал для шпаргалок: не скриншот, а вёрстка — текст
   остаётся текстом и для читателя, и для робота. */
.lp-term { margin: 8px 0 28px; background: #080808; border: 1px solid #262626; border-radius: 14px; overflow: hidden; }
.lp-term__bar { display: flex; gap: 6px; padding: 12px 16px; background: #171717; }
.lp-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.lp-term pre { margin: 0; padding: 18px 20px; overflow-x: auto;
  font-family: 'PitagonSansMono', ui-monospace, monospace; font-size: 14.5px; line-height: 1.65; color: #e2e4e0; }
.lp-term .cmd { color: var(--lime); }
.lp-term .cmt { color: #61646b; }

/* Широкая секция посадочной (сетки карточек шире текстовой колонки). */
.lp-wide { max-width: min(1221px, calc(100% - 40px)); margin: 0 auto; }
.lp-wide .courses { margin-top: 26px; }

@media (max-width: 900px) {
  .lp-hero { padding: 116px 0 36px; }
  .lp-hero__h { font-size: 34px; line-height: 1.1; letter-spacing: -1px; }
  .lp-hero__lead { font-size: 17px; }
  .lp-hero__cta { flex-direction: column; align-items: stretch; }
  .lp-h2 { margin: 40px 0 14px; font-size: 25px; }
  .lp-col p, .lp-list li { font-size: 17px; }
  .lp-next { grid-template-columns: 1fr; }
  .lp-body { padding-bottom: 56px; }
  .lp-steps li { padding: 16px 18px 16px 64px; }
  .lp-steps li::before { left: 16px; top: 16px; width: 30px; height: 30px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   РЕЗИНОВАЯ ПОЛОСА 480–1399
   ══════════════════════════════════════════════════════════════════════

   Между мобильной канвой (360) и десктопной (1425) лежит полоса, где
   раньше стояла самодельная планшетная раскладка, а до неё — ничего.
   Здесь она заменяется резиной: высота по содержимому, колонки складываются
   сами, кегли и отступы едут непрерывно. Наезд тут невозможен структурно —
   элементы не прибиты координатами, а лежат в потоке.

   ⚠️ ЧТО СЧИТАЕМ «ПОХОЖЕ НА ОРИГИНАЛ». Тильда рисует пять артбордов
   (360/480/640/960/1400) и МАСШТАБИРУЕТ ближайший под ширину окна. Значит
   между брейкпоинтами её кегль растёт вместе с окном и обрывается вниз на
   границе: заголовок 50 при 960 и 75 при 959 — полтора раза разницы на
   одном пикселе ширины, и фото при этом пропадает. Повторять эту пилу
   нельзя, это не замысел дизайнера, а побочный эффект артбордов.

   Поэтому цель другая: СОВПАДАТЬ С ОРИГИНАЛОМ РОВНО НА ТЕХ ШИРИНАХ, ГДЕ
   ОН НАРИСОВАН, и переходить между ними плавно. Все числа ниже — это
   значения его артбордов, снятые из экспорта:

        кегль      1400   960   640   480   360
        заголовок    60    50    50    40    30
        надзагол.    26    20    20    18    16
        плашка       20    18    18    14    14
        лид          22    19    19    18    15
        кнопка       20    18    18    14    14
        «Чему»       40    40    40    20    20
        карточка     16    12    12    12    12

   Полоса разбита на три участка по этим якорям; внутри участка значение
   идёт линейно (clamp с vw), на границах совпадает с артбордом. */

/* Обёртка медиа-блока по умолчанию прозрачна для раскладки: десктопные и
   мобильные координаты фото и наклеек остаются в силе без изменений. */
.wl-hero__media { display: contents; }

/* ── Участок 480–639: между артбордами 480 и 640 ─────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course {
    --поле: clamp(16px, calc(5vw - 8px), 24px);
    --кегль-h1: clamp(40px, calc(6.25vw + 10px), 50px);
    --интер-h1: 1;
    --кегль-кикер: clamp(18px, calc(1.25vw + 12px), 20px);
    --кегль-плашки: clamp(14px, calc(2.5vw + 2px), 18px);
    --высота-плашки: clamp(20px, calc(2.5vw + 8px), 24px);
    --кегль-лида: clamp(18px, calc(0.625vw + 15px), 19px);
    --кегль-кнопки: clamp(14px, calc(2.5vw + 2px), 18px);
    --высота-кнопки: clamp(50px, calc(6.25vw + 20px), 60px);
    --кегль-чему: 20px;
    --кегль-карточки: 12px;
    --верх-героя: clamp(115px, calc(7.5vw + 79px), 127px);
  }
}

/* ── Участок 640–959: артборд 640, значения держатся ─────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course {
    --поле: 24px;
    --кегль-h1: 50px;
    --интер-h1: 1;
    --кегль-кикер: 20px;
    --кегль-плашки: 18px;
    --высота-плашки: 24px;
    --кегль-лида: 19px;
    --кегль-кнопки: 18px;
    --высота-кнопки: 60px;
    --кегль-чему: clamp(20px, calc(6.25vw - 20px), 40px);
    --кегль-карточки: 12px;
    --верх-героя: 127px;
  }
}

/* ── Участок 960–1399: между артбордами 960 и 1400 ───────────────────── */


/* ── Общая раскладка полосы ──────────────────────────────────────────── */


@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-skills__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Широкая раскладка первого экрана. Фото у Тильды не отжимает текст в
   колонку, а НАКРЫВАЕТ его справа: на артборде 960 оно начинается на 37 %
   канвы и уходит за правый край. Поэтому оно здесь единственный элемент,
   вынутый из потока, — и это безопасно: оно декоративное, текста в нём нет,
   наезжать нечему.

   Ширина у каждого текстового блока своя, как на артборде: заголовок
   занимает 44 % канвы, лид 55 %, плашки 64 %, кнопки 68 % — последние
   заходят под прозрачный левый край фотографии, ровно как в оригинале.
   Общей колонкой это не задать: кнопки тогда переносятся в столбик. */


/* ══════════════════════════════════════════════════════════════════════
   КАНВА 960 — первый экран, полоса 960–1399
   ══════════════════════════════════════════════════════════════════════

   Тем же приёмом, что у Тильды, и по её же числам. Артборд 960×1152 снят
   с боевой на ширине ровно 960, где её масштаб равен единице, — значит
   числа настоящие, а не пересчитанные.

   Почему именно жёсткая канва, а не резина. Внутри полосы у Тильды НИЧЕГО
   не пересчитывается: она берёт нарисованный макет и целиком множит его на
   ширину_окна / 960. Раз ничего не пересчитывается — ничему и не разъехаться:
   текст переносится ровно так, как мы один раз проверили на 960. Резина же
   меняет перенос на каждой ширине, и её приходится сторожить.

   Зум берём из --вью (число ширины окна, его пишет скрипт): zoom требует
   число, а calc(100vw / 960) — это длина, и правило молча пропадает.

   Координаты ниже — от левого верхнего угла секции. Оба .wrap растянуты на
   всю канву и наложены друг на друга, поэтому и отсчёт у всех общий. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-hero {
    position: relative;
    width: 960px;
    height: 1152px;
    padding: 0;
    overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-hero::before { border-radius: 0 0 44px 44px; }

  /* Оба контейнера — слои во всю канву. position: relative обязателен:
     без него тёмная плита секции накрывает текст (уже наступали). */
  .page-course .wl-hero .wrap {
    position: absolute;
    left: 0; top: 0;
    width: 960px; height: 1152px;
    max-width: none;
    margin: 0; padding: 0;
    z-index: 2;
  }
  .page-course .wl-hero .wrap.wl-skills { z-index: 3;
    /* ⚠️ Слой растянут на всю канву и лежит поверх остальных — без этого
       он перехватывал нажатия и до кнопки «i» у плашки «Гарантия» клик
       просто не доходил. Сам слой прозрачен для мыши, его содержимое нет. */
    pointer-events: none; }

  .page-course .wl-hero__title {
    position: absolute; left: 24px; top: 127px;
    width: 422px; max-width: none; margin: 0;
    font-size: 50px; line-height: 50px; letter-spacing: -1.5px;
  }
  .page-course .wl-hero__kicker {
    position: absolute; left: 0; top: -27px;
    width: 200px; margin: 0;
    font-size: 20px; line-height: 20px; letter-spacing: -.4px;
  }

  /* Плашки: у Тильды каждая стоит по своим координатам, порядок в её
     разметке иной, чем у нас, — поэтому раскладываем поимённо. */
  .page-course .wl-tags {
    position: static; display: block; width: auto; max-width: none; margin: 0;
  }
  .page-course .wl-tags .wl-tag {
    position: absolute; height: 24px; padding: 0 10px;
    font-size: 18px; line-height: 22px; letter-spacing: -.4px;
    border-radius: 3px; white-space: nowrap;
  }
  .page-course .wl-tags .wl-tag:nth-child(1) { left: 24px;  top: 352px; width: 130px; }
  .page-course .wl-tags .wl-tag:nth-child(2) { left: 24px;  top: 384px; width: 200px; }
  .page-course .wl-tags .wl-tag:nth-child(3) { left: 162px; top: 352px; width: 202px; }
  .page-course .wl-tags .wl-tag:nth-child(4) { left: 232px; top: 384px; width: 248px; }
  .page-course .wl-tags .wl-tag:nth-child(5) { left: 24px;  top: 416px; width: 244px; }
  /* Через .wl-tags, иначе высота 24 от соседних плашек перебивает: у той
     цепочки специфичность выше, и значок выходил приплюснутым. */
  .page-course .wl-tags .wl-tag--tip {
    left: 273px; top: 411px; width: 34px; height: 34px; padding: 0; border: 0;
  }
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn { width: 34px; height: 34px; }
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn img { width: 34px; height: 34px; }

  /* Ширина 540, а не 527 как в оригинале: у нас в лиде четыре неразрывных
     пробела после коротких предлогов (висящие предлоги — отдельное
     требование), у Тильды их нет вовсе. На её ширине они гонят третью
     строку. 13 лишних пикселей возвращают те же две строки, и это ближе
     к оригиналу, чем точная ширина с лишней строкой. */
  .page-course .wl-hero__lead {
    position: absolute; left: 49px; top: 470px;
    width: 540px; max-width: none; margin: 0; padding: 0;
    font-size: 19px; line-height: 27px; letter-spacing: -.5px;
  }
  .page-course .wl-hero__lead img {
    position: absolute; left: -25px; top: 10px; width: 15px; height: 12px;
  }

  .page-course .wl-hero__cta { position: static; display: block; margin: 0; }
  .page-course .wl-hero__cta .btn {
    position: absolute; top: 556px;
    width: 320px; max-width: none; height: 60px; min-height: 0;
    margin: 0; padding: 0; border-radius: 10px;
    font-size: 18px; line-height: 60px; letter-spacing: -.9px;
  }
  .page-course .wl-hero__cta .btn--lime  { left: 24px; border-radius: 5px; }
  /* ⚠️ На этом артборде «Программа курса» БЕЛАЯ с тёмным текстом, а не
     прозрачная с рамкой, как на десктопе. Тильда красит её по-разному на
     каждом макете: 1400 — прозрачная, 960 — белая, 640 — тёмная #1e1e1e.
     Проверено обмером на всех трёх. Это давало самое большое пятно
     расхождения на первом экране — 40 % полосы. */
  .page-course .wl-hero__cta .btn--ghost {
    left: 354px; border-radius: 5px;
    background: #fff; color: #0a0f17; border-color: #fff;
  }
  .page-course .wl-hero__note {
    position: absolute; left: 75px; top: 626px; width: 217px; height: 22px; margin: 0;
  }

  /* Фотография и наклейки. Обёртка перестаёт быть прозрачной для
     раскладки и превращается в обычный слой канвы. */
  .page-course .wl-hero__media {
    display: block; position: absolute; left: 0; top: 0;
    width: 960px; height: 1152px; margin: 0; aspect-ratio: auto; overflow: visible;
    pointer-events: none;
  }
  .page-course .wl-hero__pic {
    position: absolute; left: 352px; top: 64px;
    width: 902px; height: 797px; max-width: none;
    object-fit: fill; transform: none;
  }
  .page-course .wl-hero__sticker--1 {
    position: absolute; left: 674px; top: 453px; width: 138px; height: 138px;
  }
  .page-course .wl-hero__sticker--2 {
    position: absolute; left: 803px; top: 458px; width: 124px; height: 119px;
  }

  /* Две плиты с вырезом — картинками, как в оригинале. */
  .page-course .wl-panels { display: block; position: absolute; inset: 0; z-index: 1; }
  .page-course .wl-panels img { position: absolute; left: 24px; margin: 0; max-width: none; }
  .page-course .wl-panels__back  { top: 688px; width: 912px; height: 381px; }
  .page-course .wl-panels__front { top: 730px; width: 912px; height: 398px; }

  .page-course .wl-hero .wrap.wl-skills > * { pointer-events: auto; }
  .page-course .wl-skills__h {
    position: absolute; left: 24px; top: 820px;
    width: 912px; margin: 0; padding: 0;
    font-size: 40px; line-height: 36px; letter-spacing: -1.5px; text-align: center;
  }
  .page-course .wl-skills__list {
    position: static; display: block; margin: 0; padding: 0;
  }
  .page-course .wl-skill {
    position: absolute; top: 891px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  .page-course .wl-skills__list > li:nth-child(1) { left: 40px; }
  .page-course .wl-skills__list > li:nth-child(2) { left: 218px; }
  .page-course .wl-skills__list > li:nth-child(3) { left: 396px; }
  .page-course .wl-skills__list > li:nth-child(4) { left: 574px; }
  .page-course .wl-skills__list > li:nth-child(5) { left: 752px; }
  .page-course .wl-skill__bg {
    display: block; position: absolute; inset: 0;
    width: 168px; height: 221px; object-fit: fill;
  }
  .page-course .wl-skill .wl-tip__btn {
    position: absolute; left: 18px; top: 18px; right: auto;
    width: 30px; height: 30px;
  }
  .page-course .wl-skill .wl-tip__btn img { width: 30px; height: 30px; }

  /* ── Подсказки «i» (канва 960) ─────────────────────────────────────── */
  .page-course .wl-tag--tip .wl-tip--garant {
    position: absolute;
    left: -119px;
    top: -186px;
    right: auto;
    bottom: auto;
    width: 272px;
    margin: 0;
    padding: 18px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--garant .wl-tip__h { margin: 0 0 10px; }
  .page-course .wl-tip__x {
    display: block;
    width: 20px;
    height: 20px;
    right: 5px;
    top: 5px;
  }
  .page-course .wl-tip--карточка {
    position: absolute;
    top: auto;
    bottom: 270px;
    margin: 0;
    padding: 18px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--к1 { left: 40px; width: 255px; }
  .page-course .wl-tip--к2 { left: 218px; width: 259px; }
  .page-course .wl-tip--к3 { left: 359px; width: 241px; }
  .page-course .wl-tip--к4 { left: 508px; width: 234px; }
  .page-course .wl-tip--к5 { left: 645px; width: 275px; background: #0088ff; color: #fff; }

  .page-course .wl-skill__t {
    position: absolute; left: 18px; top: 65px; right: auto;
    width: 139px; max-width: none; margin: 0; padding: 0;
    font-size: 12px; line-height: 16.8px; letter-spacing: -.3px;
    z-index: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ШАПКА КУРСА НИЖЕ 1400
   ══════════════════════════════════════════════════════════════════════

   У Тильды ровно на 1400 меню исчезает целиком: остаются логотип и бургер,
   а «Все курсы», пункты, «Войти» и «Обратная связь» прячутся в него.
   Порог найден перебором со свежей загрузкой на каждой ширине — до 1399
   меню нет, с 1400 есть.

   Дальше две канвы, обе сняты с боевой на ширинах, где её масштаб равен
   единице:

     960–1399   канва 1200: логотип 228×49 в (30,35), бургер 70×70 в (1109,25)
     480–959    канва  640: логотип 181×40 в (25,28), бургер 55×56 в (567,20)

   Ниже 480 шапку ведёт мобильная канва, её не трогаем.

   Бургер у Тильды не три одинаковые чёрточки: средняя короче и прижата
   вправо (51, 36, 51 при толщине 4 на канве 1200). Мелочь, но именно из
   таких мелочей и складывается «похоже». */
@media (max-width: 1399.98px) and (min-width: 480px) {
  .page-course .nav,
  .page-course .hdr__right { display: none; }

  .page-course .hdr {
    width: 1200px;
    padding: 0;
    zoom: calc(var(--вью, 1200) / 1200);
  }
  .page-course .hdr .wrap {
    position: relative;
    display: block;
    width: 1200px;
    max-width: none;
    height: 100px;
    margin: 0;
    padding: 0;
  }
  .page-course .hdr__logo {
    position: absolute; left: 30px; top: 35px;
    width: 228px; height: 49px;
  }
  .page-course .hdr__menu {
    display: flex; position: absolute; left: 1109px; top: 25px;
    width: 70px; height: 70px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none;
    flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 14px;
  }
  .page-course .hdr__menu span {
    width: 51px; height: 4px; border-radius: 0;
  }
  .page-course .hdr__menu span:nth-child(2) { width: 36px; }
}

@media (max-width: 959.98px) and (min-width: 480px) {
  .page-course .hdr { width: 640px; zoom: calc(var(--вью, 640) / 640); }
  .page-course .hdr .wrap { width: 640px; height: 96px; }
  .page-course .hdr__logo { left: 25px; top: 28px; width: 181px; height: 40px; }
  .page-course .hdr__menu {
    left: 567px; top: 20px; width: 55px; height: 56px; gap: 11px;
  }
  .page-course .hdr__menu span { width: 40px; height: 3px; }
  .page-course .hdr__menu span:nth-child(2) { width: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   КАНВА 640 — первый экран, полоса 640–959
   ══════════════════════════════════════════════════════════════════════

   Третий макет Тильды, снятый на ширине ровно 640. Композиция другая, чем
   на 960: кнопки во всю ширину одна под другой, фотография уходит ВНИЗ под
   них и вылезает за левый край, наклейки ложатся на неё, плиты «Чему
   научишься» распахнуты во всю ширину.

   Заголовок, надзаголовок и плашки при этом стоят на тех же координатах,
   что на 960, — Тильда их не двигала. */
@media (min-width: 640px) and (max-width: 959.98px) {
  /* Секция НЕ обрезает: под ней ещё лента карточек, а обрезка нужна
     только фотографии — её и обрезает медиа-блок. Пока обрезала секция,
     карточки просто не показывались. */
  .page-course .wl-hero {
    position: relative;
    width: 640px;
    height: 1700px;
    padding: 0;
    overflow: visible;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-hero::before {
    inset: 0 0 auto 0; height: 1443px; border-radius: 0 0 44px 44px;
  }
  .page-course .wl-hero .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 1443px; max-width: none;
    margin: 0; padding: 0; z-index: 2;
  }
  /* Плита-фон осталась от прежней резиновой раскладки и накрывала вторую
     кнопку. Здесь плиты — отдельные картинки, фон контейнеру не нужен. */
  .page-course .wl-hero .wrap.wl-skills {
    z-index: 3;
    /* ⚠️ Слой растянут на всю канву и лежит поверх остальных — без этого
       он перехватывал нажатия и до кнопки «i» у плашки «Гарантия» клик
       просто не доходил. Сам слой прозрачен для мыши, его содержимое нет. */
    pointer-events: none; background: none; width: 640px; padding: 0; margin: 0;
  }

  .page-course .wl-hero__title {
    position: absolute; left: 24px; top: 127px;
    width: 422px; max-width: none; margin: 0;
    font-size: 50px; line-height: 50px; letter-spacing: -1.5px;
  }
  .page-course .wl-hero__kicker {
    position: absolute; left: 0; top: -27px; width: 200px; margin: 0;
    font-size: 20px; line-height: 20px; letter-spacing: -.4px;
  }

  .page-course .wl-tags { position: static; display: block; width: auto; margin: 0; }
  .page-course .wl-tags .wl-tag {
    position: absolute; height: 24px; padding: 0 10px;
    font-size: 18px; line-height: 22px; letter-spacing: -.4px;
    border-radius: 3px; white-space: nowrap;
  }
  .page-course .wl-tags .wl-tag:nth-child(1) { left: 24px;  top: 352px; width: 130px; }
  .page-course .wl-tags .wl-tag:nth-child(2) { left: 24px;  top: 384px; width: 200px; }
  .page-course .wl-tags .wl-tag:nth-child(3) { left: 162px; top: 352px; width: 202px; }
  .page-course .wl-tags .wl-tag:nth-child(4) { left: 232px; top: 384px; width: 248px; }
  .page-course .wl-tags .wl-tag:nth-child(5) { left: 24px;  top: 417px; width: 244px; }
  .page-course .wl-tags .wl-tag--tip {
    left: 273px; top: 412px; width: 34px; height: 34px; padding: 0; border: 0;
  }
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn,
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn img { width: 34px; height: 34px; }

  /* Ширина 540 вместо 527 — по той же причине, что на канве 960: у нас в
     лиде неразрывные пробелы, у Тильды их нет. */
  .page-course .wl-hero__lead {
    position: absolute; left: 44px; top: 472px;
    width: 540px; max-width: none; margin: 0; padding: 0;
    font-size: 19px; line-height: 27px; letter-spacing: -.5px;
  }
  .page-course .wl-hero__lead img {
    position: absolute; left: -20px; top: 10px; width: 15px; height: 12px;
  }

  .page-course .wl-hero__cta { position: static; display: block; margin: 0; }
  .page-course .wl-hero__cta .btn {
    position: absolute; left: 24px; width: 592px; max-width: none;
    height: 60px; min-height: 0;
    /* margin обнуляем явно: у .btn он auto, а в планшетных правилах был
       ещё и 20px сверху — на жёсткой канве это уводило кнопку вниз на
       20 px и тянуло за собой весь низ первого экрана. */
    margin: 0; padding: 0; border-radius: 5px;
    font-size: 18px; line-height: 60px; letter-spacing: -.9px;
  }
  .page-course .wl-hero__cta .btn--lime  { top: 556px; }
  /* На этом артборде кнопка тёмная, а не белая как на 960 и не прозрачная
     как на десктопе. */
  .page-course .wl-hero__cta .btn--ghost {
    top: 626px; background: #1e1e1e; color: #fff; border-color: #4b4b4b;
  }
  .page-course .wl-hero__note {
    position: absolute; left: 212px; top: 696px; width: 217px; height: 22px; margin: 0;
  }

  .page-course .wl-hero__media {
    display: block; position: absolute; left: 0; top: 0;
    width: 640px; height: 1443px; margin: 0; aspect-ratio: auto; overflow: hidden;
    pointer-events: none;
  }
  .page-course .wl-hero__pic {
    position: absolute; left: -130px; top: 663px;
    width: 900px; height: 796px; max-width: none;
    object-fit: fill; transform: none;
  }
  .page-course .wl-hero__sticker--1 {
    position: absolute; left: 188px; top: 1048px; width: 142px; height: 142px;
  }
  .page-course .wl-hero__sticker--2 {
    position: absolute; left: 310px; top: 1043px; width: 138px; height: 133px;
  }

  .page-course .wl-panels { display: block; position: absolute; inset: 0; z-index: 1; }
  .page-course .wl-panels img { position: absolute; left: 0; margin: 0; max-width: none; }
  .page-course .wl-panels__back  { top: 1283px; width: 640px; height: 267px; }
  .page-course .wl-panels__front { top: 1312px; width: 640px; height: 279px; }

  .page-course .wl-hero .wrap.wl-skills > * { pointer-events: auto; }
  .page-course .wl-skills__h {
    position: absolute; left: 24px; top: 1372px; width: 592px; margin: 0; padding: 0;
    font-size: 40px; line-height: 36px; letter-spacing: -1.5px; text-align: center;
  }
  /* Карточки навыков Тильда на этом макете уносит в отдельный слайдер под
     первым экраном. Пока оставляем их лентой в один ряд с прокруткой —
     ближе к её поведению, чем сетка, и ничего не наезжает. */
  .page-course .wl-skills__list {
    position: absolute; left: 0; top: 1443px; width: 640px;
    display: flex; gap: 10px; margin: 0; padding: 0 24px;
    overflow-x: auto; scrollbar-width: none;
  }
  .page-course .wl-skills__list::-webkit-scrollbar { display: none; }
  .page-course .wl-skill {
    position: relative; flex: 0 0 168px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  .page-course .wl-skill__bg {
    display: block; position: absolute; inset: 0; width: 168px; height: 221px; object-fit: fill;
  }
  .page-course .wl-skill .wl-tip__btn {
    position: absolute; left: 18px; top: 18px; right: auto; width: 30px; height: 30px;
  }
  .page-course .wl-skill .wl-tip__btn img { width: 30px; height: 30px; }

  /* ── Подсказки «i» (канва 640) ─────────────────────────────────────── */
  .page-course .wl-tag--tip .wl-tip--garant {
    position: absolute;
    left: -119px;
    top: -186px;
    right: auto;
    bottom: auto;
    width: 272px;
    margin: 0;
    padding: 18px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--garant .wl-tip__h { margin: 0 0 10px; }
  .page-course .wl-tip__x {
    display: block;
    width: 20px;
    height: 20px;
    right: 5px;
    top: 5px;
  }
  .page-course .wl-tip--карточка {
    position: absolute;
    top: auto;
    bottom: 9px;  /* слой .wl-skills кончается у ленты карточек */
    margin: 0;
    padding: 18px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--к1 { left: 192px; width: 255px; }
  .page-course .wl-tip--к2 { left: 190px; width: 259px; }
  .page-course .wl-tip--к3 { left: 199px; width: 241px; }
  .page-course .wl-tip--к4 { left: 203px; width: 234px; }
  .page-course .wl-tip--к5 { left: 182px; width: 275px; background: #0088ff; color: #fff; }

  .page-course .wl-skill__t {
    position: absolute; left: 18px; top: 65px; right: auto;
    width: 139px; max-width: none; margin: 0; padding: 0;
    font-size: 12px; line-height: 16.8px; letter-spacing: -.3px; z-index: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   КАНВА 480 — первый экран, полоса 480–639
   ══════════════════════════════════════════════════════════════════════

   Четвёртый макет Тильды, снятый на ширине ровно 480. Здесь всё мельче и
   плотнее: заголовок 40 вместо 50, плашки 14, кнопки 383×50.

   ⚠️ Плашки лежат в ДРУГОМ порядке, чем на широких макетах: первый ряд
   «6+8» и «33+53», второй «28+81» и «2+3», третий «Гарантия». У нас в
   разметке порядок свой, поэтому раскладываем поимённо по nth-child. */
@media (min-width: 480px) and (max-width: 639.98px) {
  /* Секция не обрезает — обрезает медиа-блок (см. канву 640). */
  .page-course .wl-hero {
    position: relative;
    width: 480px;
    height: 1360px;
    padding: 0;
    overflow: visible;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-hero::before {
    inset: 0 0 auto 0; height: 1134px; border-radius: 0 0 34px 34px;
  }
  .page-course .wl-hero .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 1134px; max-width: none;
    margin: 0; padding: 0; z-index: 2; background: none;
  }
  .page-course .wl-hero .wrap.wl-skills { z-index: 3;
    /* ⚠️ Слой растянут на всю канву и лежит поверх остальных — без этого
       он перехватывал нажатия и до кнопки «i» у плашки «Гарантия» клик
       просто не доходил. Сам слой прозрачен для мыши, его содержимое нет. */
    pointer-events: none; }

  .page-course .wl-hero__title {
    position: absolute; left: 15px; top: 115px;
    width: 335px; max-width: none; margin: 0;
    font-size: 40px; line-height: 40px; letter-spacing: -1.2px;
  }
  .page-course .wl-hero__title br { display: block; }
  .page-course .wl-hero__kicker {
    position: absolute; left: 1px; top: -25px; width: 160px; margin: 0;
    font-size: 18px; line-height: 18px; letter-spacing: -.3px;
  }

  .page-course .wl-tags { position: static; display: block; width: auto; margin: 0; }
  .page-course .wl-tags .wl-tag {
    position: absolute; height: 20px; padding: 0 8px;
    font-size: 14px; line-height: 18px; letter-spacing: -.3px;
    border-radius: 3px; white-space: nowrap;
  }
  .page-course .wl-tags .wl-tag:nth-child(1) { left: 16px;  top: 300px; width: 101px; }
  .page-course .wl-tags .wl-tag:nth-child(2) { left: 210px; top: 327px; width: 157px; }
  .page-course .wl-tags .wl-tag:nth-child(3) { left: 124px; top: 300px; width: 147px; }
  .page-course .wl-tags .wl-tag:nth-child(4) { left: 16px;  top: 327px; width: 187px; }
  .page-course .wl-tags .wl-tag:nth-child(5) { left: 16px;  top: 356px; width: 199px; }
  .page-course .wl-tags .wl-tag--tip {
    left: 220px; top: 351px; width: 30px; height: 30px; padding: 0; border: 0;
  }
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn,
  .page-course .wl-tags .wl-tag--tip .wl-tip__btn img { width: 30px; height: 30px; }

  .page-course .wl-hero__lead {
    position: absolute; left: 41px; top: 396px;
    width: 380px; max-width: none; margin: 0; padding: 0;
    font-size: 18px; line-height: 25px; letter-spacing: -.4px;
  }
  .page-course .wl-hero__lead img {
    position: absolute; left: -25px; top: 8px; width: 15px; height: 12px;
  }

  .page-course .wl-hero__cta { position: static; display: block; margin: 0; }
  .page-course .wl-hero__cta .btn {
    position: absolute; left: 16px; width: 383px; max-width: none;
    height: 50px; min-height: 0; margin: 0; padding: 0; border-radius: 5px;
    font-size: 14px; line-height: 50px; letter-spacing: -.7px;
  }
  .page-course .wl-hero__cta .btn--lime  { top: 505px; }
  .page-course .wl-hero__cta .btn--ghost {
    top: 564px; background: #1e1e1e; color: #fff; border-color: #4b4b4b;
  }
  .page-course .wl-hero__note {
    position: absolute; left: 114px; top: 621px; width: 190px; height: 19px; margin: 0;
  }

  .page-course .wl-hero__media {
    display: block; position: absolute; left: 0; top: 0;
    width: 480px; height: 1134px; margin: 0; aspect-ratio: auto; overflow: hidden;
    pointer-events: none;
  }
  .page-course .wl-hero__pic {
    position: absolute; left: -91px; top: 599px;
    width: 662px; height: 585px; max-width: none;
    object-fit: fill; transform: none;
  }
  .page-course .wl-hero__sticker--1 {
    position: absolute; left: 150px; top: 887px; width: 94px; height: 94px;
  }
  .page-course .wl-hero__sticker--2 {
    position: absolute; left: 239px; top: 887px; width: 90px; height: 86px;
  }

  .page-course .wl-panels { display: block; position: absolute; inset: 0; z-index: 1; }
  .page-course .wl-panels img { position: absolute; left: 0; margin: 0; max-width: none; }
  .page-course .wl-panels__back  { top: 1040px; width: 480px; height: 200px; }
  .page-course .wl-panels__front { top: 1061px; width: 480px; height: 209px; }

  .page-course .wl-hero .wrap.wl-skills > * { pointer-events: auto; }
  .page-course .wl-skills__h {
    position: absolute; left: 0; top: 1096px; width: 480px; margin: 0; padding: 0;
    font-size: 20px; line-height: 18px; letter-spacing: -.7px; text-align: center;
  }
  /* Карточки, как и на канве 640, Тильда уносит в слайдер под экраном. */
  /* Карточки в ленте у Тильды НЕ уменьшаются вместе с макетом: они
     остаются 168×221 с тем же кеглем 12, что и на широких. Замерено на
     живой странице при 480 и при 640 — одинаково. */
  .page-course .wl-skills__list {
    position: absolute; left: 0; top: 1134px; width: 480px;
    display: flex; gap: 10px; margin: 0; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  .page-course .wl-skills__list::-webkit-scrollbar { display: none; }
  .page-course .wl-skill {
    position: relative; flex: 0 0 168px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  .page-course .wl-skill__bg {
    display: block; position: absolute; inset: 0; width: 168px; height: 221px; object-fit: fill;
  }
  .page-course .wl-skill .wl-tip__btn {
    position: absolute; left: 18px; top: 18px; right: auto; width: 30px; height: 30px;
  }
  .page-course .wl-skill .wl-tip__btn img { width: 30px; height: 30px; }

  /* ── Подсказки «i» (канва 480) ─────────────────────────────────────── */
  .page-course .wl-tag--tip .wl-tip--garant {
    position: absolute;
    left: -119px;
    top: -182px;
    right: auto;
    bottom: auto;
    width: 268px;
    margin: 0;
    padding: 16px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--garant .wl-tip__h { margin: 0 0 10px; }
  .page-course .wl-tip__x {
    display: block;
    width: 20px;
    height: 20px;
    right: 5px;
    top: 5px;
  }
  .page-course .wl-tip--карточка {
    position: absolute;
    top: auto;
    bottom: 9px;  /* слой .wl-skills кончается у ленты карточек */
    margin: 0;
    padding: 16px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: -.5px;
  }
  .page-course .wl-tip--к1 { left: 114px; width: 251px; }
  .page-course .wl-tip--к2 { left: 112px; width: 255px; }
  .page-course .wl-tip--к3 { left: 121px; width: 237px; }
  .page-course .wl-tip--к4 { left: 124px; width: 231px; }
  .page-course .wl-tip--к5 { left: 104px; width: 271px; background: #0088ff; color: #fff; }

  .page-course .wl-skill__t {
    position: absolute; left: 18px; top: 65px; right: auto;
    width: 139px; max-width: none; margin: 0; padding: 0;
    font-size: 12px; line-height: 16.8px; letter-spacing: -.3px; z-index: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   КУРС LINUX — свои числа канв
   ══════════════════════════════════════════════════════════════════════

   Раскладка первого экрана у Linux та же, что у Windows+Linux, но почти
   все координаты другие: заголовок в три строки вместо четырёх, поэтому
   всё под ним поднято; плашек четыре, а не пять, и лежат они иначе;
   фотография своя и стоит левее. Числа сняты с боевой Linux на ширинах,
   где её масштаб равен единице. */

@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-linux .wl-hero__title { top: 136px; }
  .page-linux .wl-hero__kicker { top: -27px; }

  .page-linux .wl-tags .wl-tag { height: 25px; }
  .page-linux .wl-tags .wl-tag:nth-child(1) { left: 24px;  top: 316px; width: 104px; }
  .page-linux .wl-tags .wl-tag:nth-child(2) { left: 138px; top: 316px; width: 180px; }
  .page-linux .wl-tags .wl-tag:nth-child(3) { left: 24px;  top: 351px; width: 159px; }
  .page-linux .wl-tags .wl-tag:nth-child(4) { left: 193px; top: 351px; width: 203px; }
  .page-linux .wl-tags .wl-tag:nth-child(5) { left: 24px;  top: 387px; width: 244px; }
  .page-linux .wl-tags .wl-tag--tip { left: 275px; top: 380px; width: 40px; height: 40px; }
  .page-linux .wl-tags .wl-tag--tip .wl-tip__btn,
  .page-linux .wl-tags .wl-tag--tip .wl-tip__btn img { width: 40px; height: 40px; }

  /* Лид здесь крупнее (20 против 19) и уже: 428 вместо 527. */
  .page-linux .wl-hero__lead {
    left: 49px; top: 442px; width: 440px;
    font-size: 20px; line-height: 28px;
  }
  .page-linux .wl-hero__pic { left: 277px; top: 88px; width: 902px; height: 798px; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .page-linux .wl-hero__title { top: 156px; }
  .page-linux .wl-hero__kicker { top: -29px; }

  .page-linux .wl-tags .wl-tag { height: 25px; }
  .page-linux .wl-tags .wl-tag:nth-child(1) { left: 24px;  top: 336px; width: 104px; }
  .page-linux .wl-tags .wl-tag:nth-child(2) { left: 138px; top: 336px; width: 180px; }
  .page-linux .wl-tags .wl-tag:nth-child(3) { left: 24px;  top: 371px; width: 159px; }
  .page-linux .wl-tags .wl-tag:nth-child(4) { left: 193px; top: 371px; width: 203px; }
  .page-linux .wl-tags .wl-tag:nth-child(5) { left: 24px;  top: 408px; width: 244px; }
  .page-linux .wl-tags .wl-tag--tip { left: 275px; top: 401px; width: 40px; height: 40px; }
  .page-linux .wl-tags .wl-tag--tip .wl-tip__btn,
  .page-linux .wl-tags .wl-tag--tip .wl-tip__btn img { width: 40px; height: 40px; }

  .page-linux .wl-hero__lead {
    left: 49px; top: 462px; width: 440px;
    font-size: 20px; line-height: 28px;
  }
  .page-linux .wl-hero__cta .btn--lime  { top: 576px; }
  .page-linux .wl-hero__cta .btn--ghost { top: 646px; }
  .page-linux .wl-hero__note { left: 212px; top: 716px; }
  .page-linux .wl-hero__pic { left: -109px; top: 743px; width: 859px; height: 760px; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  .page-linux .wl-hero__title { top: 135px; }
  .page-linux .wl-hero__kicker { top: -25px; }

  /* ⚠️ На этом макете «53 урока теории» стоит в ПЕРВОМ ряду третьей, а
     «81 практический урок» уходит во второй — не так, как на широких. */
  .page-linux .wl-tags .wl-tag:nth-child(1) { left: 16px;  top: 285px; width: 81px; }
  .page-linux .wl-tags .wl-tag:nth-child(2) { left: 102px; top: 285px; width: 140px; }
  .page-linux .wl-tags .wl-tag:nth-child(3) { left: 247px; top: 285px; width: 123px; }
  .page-linux .wl-tags .wl-tag:nth-child(4) { left: 16px;  top: 310px; width: 158px; }
  .page-linux .wl-tags .wl-tag:nth-child(5) { left: 179px; top: 310px; width: 190px; }
  .page-linux .wl-tags .wl-tag--tip { left: 374px; top: 305px; width: 30px; height: 30px; }

  .page-linux .wl-hero__lead { left: 41px; top: 350px; width: 390px; font-size: 18px; line-height: 25px; }
  .page-linux .wl-hero__cta .btn--lime  { top: 460px; }
  .page-linux .wl-hero__cta .btn--ghost { top: 519px; }
  .page-linux .wl-hero__note { left: 114px; top: 576px; }
  .page-linux .wl-hero__pic { left: -91px; top: 599px; width: 662px; height: 585px; }
}

/* Курс Linux на телефоне: та же мобильная канва 360, свои координаты. */
@media (max-width: 479px) {
  .page-linux .wl-hero__title {
    left: calc(15 * var(--м)); top: calc(124 * var(--м)); width: calc(252 * var(--м));
  }
  .page-linux .wl-hero__kicker { top: calc(-24 * var(--м)); }

  .page-linux .wl-tags .wl-tag:nth-child(1) { left: calc(16 * var(--м));  top: calc(248 * var(--м)); width: calc(81 * var(--м)); }
  .page-linux .wl-tags .wl-tag:nth-child(2) { left: calc(104 * var(--м)); top: calc(248 * var(--м)); width: calc(139 * var(--м)); }
  .page-linux .wl-tags .wl-tag:nth-child(3) { left: calc(16 * var(--м));  top: calc(275 * var(--м)); width: calc(125 * var(--м)); }
  .page-linux .wl-tags .wl-tag:nth-child(4) { left: calc(148 * var(--м)); top: calc(275 * var(--м)); width: calc(156 * var(--м)); }
  .page-linux .wl-tags .wl-tag:nth-child(5) { left: calc(16 * var(--м));  top: calc(302 * var(--м)); width: calc(187 * var(--м)); }
  .page-linux .wl-tags .wl-tag--tip { left: calc(208 * var(--м)); top: calc(297 * var(--м)); width: calc(30 * var(--м)); height: calc(30 * var(--м)); }

  /* Лид здесь 16, а не 15, и уже: 244 против 319. Ширину даём 270 —
     у нас в нём неразрывные пробелы, на её ширине выходит лишняя строка. */
  .page-linux .wl-hero__lead {
    left: calc(41 * var(--м)); top: calc(347 * var(--м)); width: calc(270 * var(--м));
    font-size: calc(16 * var(--м)); line-height: calc(22 * var(--м));
  }
  .page-linux .wl-hero__cta .btn--lime  { top: calc(470 * var(--м)); }
  .page-linux .wl-hero__cta .btn--ghost { top: calc(530 * var(--м)); }
  .page-linux .wl-hero__note { left: calc(85 * var(--м)); top: calc(590 * var(--м)); }
  .page-linux .wl-hero__pic {
    left: calc(-149 * var(--м)); top: calc(616 * var(--м));
    width: calc(646 * var(--м)); height: calc(571 * var(--м));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ВИДЕОРОЛИК — канвы 960, 640, 480
   ══════════════════════════════════════════════════════════════════════

   Блок простой: заголовок, ролик со скруглением и круглая кнопка на нём.
   Но заголовок ведёт себя по-разному: на 960 он прижат влево, на 640 и
   ниже — по центру. Скругление ролика тоже меняется: 40 на широких, 20 на
   узких. Числа сняты с боевой на её собственных ширинах.

   Кнопка у Тильды 70×70 на широких и 40×40 на узких; у нас в разметке
   свой значок, поэтому задаём размер коробки, а значок внутри тянется. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-video {
    position: relative; width: 960px; height: 739px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-video .wrap {
    position: absolute; left: 0; top: 0; width: 960px; height: 739px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-video__h {
    position: absolute; left: 24px; top: 75px; width: 400px; margin: 0;
    font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: left;
  }
  .page-course .wl-video__box {
    position: absolute; left: 24px; top: 150px;
    width: 913px; height: 514px; max-width: none; margin: 0;
  }
  .page-course .wl-video__loop { height: 514px; border-radius: 40px; }
  .page-course .wl-video__play { width: 70px; height: 70px; padding: 0 0 0 4px; }
  .page-course .wl-video__play svg { width: 21px; height: 24px; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-video {
    position: relative; width: 640px; height: 558px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-video .wrap {
    position: absolute; left: 0; top: 0; width: 640px; height: 558px;
    max-width: none; margin: 0; padding: 0;
  }
  /* Здесь заголовок уже по центру, а не слева. */
  .page-course .wl-video__h {
    position: absolute; left: 0; top: 75px; width: 640px; margin: 0;
    font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center;
  }
  .page-course .wl-video__box {
    position: absolute; left: 24px; top: 150px;
    width: 592px; height: 333px; max-width: none; margin: 0;
  }
  .page-course .wl-video__loop { height: 333px; border-radius: 40px; }
  .page-course .wl-video__play { width: 70px; height: 70px; padding: 0 0 0 4px; }
  .page-course .wl-video__play svg { width: 21px; height: 24px; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-video {
    position: relative; width: 480px; height: 367px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-video .wrap {
    position: absolute; left: 0; top: 0; width: 480px; height: 367px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-video__h {
    position: absolute; left: 0; top: 35px; width: 480px; margin: 0;
    font-size: 25px; line-height: 25px; letter-spacing: -1px; text-align: center;
  }
  .page-course .wl-video__box {
    position: absolute; left: 16px; top: 80px;
    width: 448px; height: 252px; max-width: none; margin: 0;
  }
  .page-course .wl-video__loop { height: 252px; border-radius: 20px; }
  .page-course .wl-video__play { width: 40px; height: 40px; padding: 0 0 0 3px; }
  .page-course .wl-video__play svg { width: 12px; height: 14px; }
}

/* ── О школе: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-about {
    position: relative; width: 960px; height: 1131px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-about .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 1131px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-about__pair { display: contents; }
  .page-course .wl-about__docs { display: contents; }
  .page-course .wl-about__doc-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-course .wl-about__h { position: absolute; left: 293px; top: 50px; width: 374px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center; }
  .page-course .wl-about__wide { position: absolute; left: 24px; top: 125px; width: 912px; max-width: none; height: 283px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__lead { position: absolute; left: 30px; top: 30px; width: 476px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; letter-spacing: -0.5px; }
  .page-course .wl-about__note { position: absolute; left: 30px; top: 162px; width: 489px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; letter-spacing: -0.7px; }
  .page-course .wl-about__photo { position: absolute; left: 552px; top: 10px; width: 350px; max-width: none; height: 263px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-about__clients { position: absolute; left: 24px; top: 432px; width: 444px; max-width: none; height: 217px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__clients .wl-about__h3 { position: absolute; left: 30px; top: 30px; width: 172px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; letter-spacing: -0.5px; }
  .page-course .wl-about__clients img { position: absolute; left: 24px; top: 90px; width: 396px; max-width: none; height: 102px; margin: 0; object-fit: contain; }
  .page-course .wl-about .wl-about__origin { position: absolute; left: 492px; top: 432px; width: 444px; max-width: none; height: 217px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__origin-t { position: absolute; left: 30px; top: 30px; width: 376px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.5px; }
  .page-course .wl-about .wl-about__doc { position: absolute; margin: 0; padding: 0; width: 444px; max-width: none; border-radius: 20px; overflow: hidden; }
  .page-course .wl-about .wl-about__doc--license { left: 24px; top: 673px; height: 383px; }
  .page-course .wl-about .wl-about__doc--accred { left: 492px; top: 673px; height: 263px; }
  .page-course .wl-about__doc-t { position: absolute; left: 30px; top: 25px; width: 381px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; letter-spacing: -0.5px; }
  .page-course .wl-about__doc-n { position: absolute; left: 30px; top: 95px; margin: 0; font-size: 16px; line-height: 16px; letter-spacing: -0.5px; display: block; color: #bfe1ff; }
  .page-course .wl-about__h,
  .page-course .wl-about__clients .wl-about__h3 { white-space: nowrap; }
}

/* ── О школе: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-about {
    position: relative; width: 640px; height: 2370px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-about .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 2370px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-about__pair { display: contents; }
  .page-course .wl-about__docs { display: contents; }
  .page-course .wl-about__doc-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-course .wl-about__h { position: absolute; left: 133px; top: 50px; width: 374px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center; }
  .page-course .wl-about__wide { position: absolute; left: 24px; top: 125px; width: 592px; max-width: none; height: 690px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__lead { position: absolute; left: 30px; top: 30px; width: 476px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; letter-spacing: -0.5px; }
  .page-course .wl-about__note { position: absolute; left: 30px; top: 145px; width: 503px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; letter-spacing: -0.7px; }
  .page-course .wl-about__photo { position: absolute; left: 10px; top: 251px; width: 572px; max-width: none; height: 429px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-about__clients { position: absolute; left: 24px; top: 839px; width: 592px; max-width: none; height: 264px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__clients .wl-about__h3 { position: absolute; left: 30px; top: 30px; width: 172px; max-width: none; margin: 0; font-size: 25px; line-height: 25px; letter-spacing: -0.5px; }
  .page-course .wl-about__clients img { position: absolute; left: 23px; top: 95px; width: 540px; max-width: none; height: 139px; margin: 0; object-fit: contain; }
  .page-course .wl-about .wl-about__origin { position: absolute; left: 24px; top: 1127px; width: 592px; max-width: none; height: 259px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__origin-t { position: absolute; left: 30px; top: 30px; width: 474px; max-width: none; margin: 0; font-size: 25px; line-height: 33px; letter-spacing: -0.5px; }
  .page-course .wl-about .wl-about__doc { position: absolute; left: 24px; margin: 0; padding: 0; width: 592px; max-width: none; border-radius: 20px; overflow: hidden; }
  .page-course .wl-about .wl-about__doc--license { top: 1410px; height: 511px; }
  .page-course .wl-about .wl-about__doc--accred { top: 1945px; height: 350px; }
  .page-course .wl-about__doc-t { position: absolute; left: 30px; top: 30px; width: 381px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; letter-spacing: -0.5px; }
  .page-course .wl-about__doc-n { position: absolute; left: 30px; top: 110px; margin: 0; font-size: 16px; line-height: 16px; letter-spacing: -0.5px; display: block; color: #bfe1ff; }
  .page-course .wl-about__h,
  .page-course .wl-about__clients .wl-about__h3 { white-space: nowrap; }
}

/* ── О школе: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-about {
    position: relative; width: 480px; height: 1724px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-about .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 1724px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-about__pair { display: contents; }
  .page-course .wl-about__docs { display: contents; }
  .page-course .wl-about__doc-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-course .wl-about__h { position: absolute; left: 128px; top: 35px; width: 224px; max-width: none; margin: 0; font-size: 25px; line-height: 25px; letter-spacing: -1.5px; text-align: center; }
  .page-course .wl-about__wide { position: absolute; left: 16px; top: 80px; width: 448px; max-width: none; height: 527px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__lead { position: absolute; left: 20px; top: 20px; width: 385px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.5px; }
  .page-course .wl-about__note { position: absolute; left: 20px; top: 113px; width: 367px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; letter-spacing: -0.7px; }
  .page-course .wl-about__photo { position: absolute; left: 10px; top: 196px; width: 428px; max-width: none; height: 321px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-about__clients { position: absolute; left: 16px; top: 617px; width: 448px; max-width: none; height: 192px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__clients .wl-about__h3 { position: absolute; left: 30px; top: 23px; width: 137px; max-width: none; margin: 0; font-size: 20px; line-height: 20px; letter-spacing: -0.5px; }
  .page-course .wl-about__clients img { position: absolute; left: 25px; top: 66px; width: 394px; max-width: none; height: 102px; margin: 0; object-fit: contain; }
  .page-course .wl-about .wl-about__origin { position: absolute; left: 16px; top: 819px; width: 448px; max-width: none; height: 199px; margin: 0; border-radius: 20px; padding: 0; }
  .page-course .wl-about__origin-t { position: absolute; left: 30px; top: 20px; width: 376px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.5px; }
  .page-course .wl-about .wl-about__doc { position: absolute; left: 16px; margin: 0; padding: 0; width: 448px; max-width: none; border-radius: 20px; overflow: hidden; }
  .page-course .wl-about .wl-about__doc--license { top: 1028px; height: 387px; }
  .page-course .wl-about .wl-about__doc--accred { top: 1425px; height: 265px; }
  .page-course .wl-about__doc-t { position: absolute; left: 30px; top: 20px; width: 279px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.5px; }
  .page-course .wl-about__doc--accred .wl-about__doc-t { width: 309px; line-height: 24px; }
  .page-course .wl-about__doc-n { position: absolute; left: 30px; top: 87px; margin: 0; font-size: 14px; line-height: 14px; letter-spacing: -0.5px; display: block; color: #bfe1ff; }
  .page-course .wl-about__h,
  .page-course .wl-about__clients .wl-about__h3 { white-space: nowrap; }
}

/* ── Кому подойдёт: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-who {
    position: relative; width: 960px; height: 474px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-who .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 474px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-who__h { position: absolute; left: 301px; top: 0px; width: 357px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; }
  .page-course .wl-who__list { display: contents; }
  .page-course .wl-who .wl-who__card { position: absolute; width: 444px; height: 190px; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-who .wl-who__card:nth-child(1) { left: 24px; top: 71px; }
  .page-course .wl-who .wl-who__card:nth-child(2) { left: 492px; top: 71px; }
  .page-course .wl-who .wl-who__card:nth-child(3) { left: 24px; top: 285px; }
  .page-course .wl-who .wl-who__card:nth-child(4) { left: 492px; top: 285px; }
  .page-course .wl-who__card img:not(.wl-who__badge) { position: absolute; left: 20px; top: 20px; width: 150px; max-width: none; height: 150px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-who__badge { display: block; position: absolute; left: 5px; top: 101px; width: 70px; height: 70px; margin: 0; border-radius: 10px; }
  .page-course .wl-who__card p { position: absolute; margin: 0; top: 50%; transform: translateY(-50%); text-align: left; left: 190px; font-size: 14px; line-height: 20px; letter-spacing: -.7px; font-weight: 300; }
  .page-course .wl-who__card:nth-child(1) p { width: 241px; }
  .page-course .wl-who__card:nth-child(2) p { width: 234px; }
  .page-course .wl-who__card:nth-child(3) p { width: 187px; }
  .page-course .wl-who__card:nth-child(4) p { width: 214px; }
  .page-course .wl-who__h { white-space: nowrap; }
}

/* ── Кому подойдёт: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-who {
    position: relative; width: 640px; height: 1085px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-who .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 1085px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-who__h { position: absolute; left: 141px; top: 0px; width: 357px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; }
  .page-course .wl-who__list { display: contents; }
  .page-course .wl-who .wl-who__card { position: absolute; width: 592px; height: 240px; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-who .wl-who__card:nth-child(1) { left: 24px; top: 66px; }
  .page-course .wl-who .wl-who__card:nth-child(2) { left: 24px; top: 326px; }
  .page-course .wl-who .wl-who__card:nth-child(3) { left: 24px; top: 586px; }
  .page-course .wl-who .wl-who__card:nth-child(4) { left: 24px; top: 846px; }
  .page-course .wl-who__card img:not(.wl-who__badge) { position: absolute; left: 20px; top: 20px; width: 200px; max-width: none; height: 200px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-who__badge { display: block; position: absolute; left: 5px; top: 120px; width: 100px; height: 100px; margin: 0; border-radius: 10px; }
  .page-course .wl-who__card p { position: absolute; margin: 0; left: 250px; top: 30px; font-size: 18px; line-height: 25px; letter-spacing: -.7px; font-weight: 300; text-align: left; }
  .page-course .wl-who__card:nth-child(1) p { width: 317px; }
  .page-course .wl-who__card:nth-child(2) p { width: 314px; }
  .page-course .wl-who__card:nth-child(3) p { width: 248px; }
  .page-course .wl-who__card:nth-child(4) p { width: 283px; }
  .page-course .wl-who__h { white-space: nowrap; }
}

/* ── Кому подойдёт: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-who {
    position: relative; width: 480px; height: 834px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-who .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 834px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-who__h { position: absolute; left: 119px; top: 0px; width: 242px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -0.5px; text-align: center; }
  .page-course .wl-who__list { display: contents; }
  .page-course .wl-who .wl-who__card { position: absolute; width: 448px; height: 190px; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-who .wl-who__card:nth-child(1) { left: 16px; top: 44px; }
  .page-course .wl-who .wl-who__card:nth-child(2) { left: 16px; top: 244px; }
  .page-course .wl-who .wl-who__card:nth-child(3) { left: 16px; top: 444px; }
  .page-course .wl-who .wl-who__card:nth-child(4) { left: 16px; top: 644px; }
  .page-course .wl-who__card img:not(.wl-who__badge) { position: absolute; left: 20px; top: 20px; width: 150px; max-width: none; height: 150px; margin: 0; border-radius: 10px; object-fit: cover; }
  .page-course .wl-who__badge { display: block; position: absolute; left: 5px; top: 100px; width: 70px; height: 70px; margin: 0; border-radius: 10px; }
  .page-course .wl-who__card p { position: absolute; margin: 0; left: 190px; top: 20px; font-size: 14px; line-height: 20px; letter-spacing: -.5px; font-weight: 300; text-align: left; }
  .page-course .wl-who__card:nth-child(1) p { width: 250px; }
  .page-course .wl-who__card:nth-child(2) p { width: 240px; }
  .page-course .wl-who__card:nth-child(3) p { width: 194px; }
  .page-course .wl-who__card:nth-child(4) p { width: 214px; }
}

/* ── Спрос на рынке: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-demand {
    position: relative; width: 960px; height: 866px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-demand .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 866px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-demand__h br { display: none; }
  .page-course .wl-demand__h { position: absolute; left: 151px; top: 75px; width: 659px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; }
  .page-course .wl-demand__note { position: absolute; left: 215px; top: 191px; width: 560px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; letter-spacing: -0.7px; text-align: center; font-weight: 300; }
  .page-course .wl-demand__pic { position: absolute; left: 24px; top: 282px; width: 912px; max-width: none; height: 583px; margin: 0; border-radius: 30px; display: block; object-fit: cover;; }
}

/* ── Спрос на рынке: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-demand {
    position: relative; width: 640px; height: 697px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-demand .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 697px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-demand__h br { display: none; }
  .page-course .wl-demand__h { position: absolute; left: 60px; top: 69px; width: 520px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; }
  .page-course .wl-demand__note { position: absolute; left: 64px; top: 234px; width: 513px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; letter-spacing: -0.7px; text-align: center; font-weight: 300; }
  .page-course .wl-demand__pic { position: absolute; left: 24px; top: 318px; width: 592px; max-width: none; height: 379px; margin: 0; border-radius: 30px; display: block; object-fit: cover;; }
}

/* ── Спрос на рынке: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-demand {
    position: relative; width: 480px; height: 471px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-demand .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 471px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-demand__h br { display: none; }
  .page-course .wl-demand__h { position: absolute; left: 23px; top: 31px; width: 447px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -0.5px; text-align: center; }
  .page-course .wl-demand__note { position: absolute; left: 39px; top: 122px; width: 402px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; letter-spacing: -0.5px; text-align: center; font-weight: 300; }
  .page-course .wl-demand__pic { position: absolute; left: 16px; top: 184px; width: 448px; max-width: none; height: 287px; margin: 0; border-radius: 20px; display: block; object-fit: cover;; }
}

/* ── Рост дохода: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-pay {
    position: relative; width: 960px; height: 1180px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-pay .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 1180px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-pay__h { position: absolute; left: 24px; top: 75px; width: 494px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: left; }
  .page-course .wl-pay__steps { display: contents; }
  .page-course .wl-pay__step { display: contents; }
  .page-course .wl-pay .wl-pay__card { position: absolute; margin: 0; padding: 0; border-radius: 20px; text-align: left; }
  /* ⚠️ Тёмная плита за карточкой рисовалась через z-index: -1 — и уходила
     НИЖЕ фона секции: ни `.wl-pay`, ни `.wrap` контекста наложения не
     создают, поэтому отрицательный слой проваливался за самый низ, и
     плиты не было видно вовсе. Рисуем не под карточкой, а СПРАВА от
     неё — ровно тот кусок, который в оригинале и торчит. */
  .page-course .wl-pay .wl-pay__card::before { content: ''; position: absolute; left: 100%; top: 0; height: 100%; width: calc(912px - 100%); background: #3a3a3a; border-radius: 0 20px 20px 0; }
  .page-course .wl-pay .wl-pay__card--1 { left: 24px; top: 218px; width: 384px; height: 300px; }
  .page-course .wl-pay .wl-pay__card--2 { left: 24px; top: 538px; width: 648px; height: 300px; }
  .page-course .wl-pay .wl-pay__card--3 { left: 24px; top: 858px; width: 912px; height: 322px; }
  .page-course .wl-pay .wl-pay__sum { position: absolute; display: flex; align-items: center; margin: 0; padding: 0 10px; justify-content: space-between; border-radius: 5px; letter-spacing: -1.5px; white-space: nowrap; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { left: 30px; width: 302px; height: 49px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--blue { top: 35px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--lime { top: 114px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { left: 30px; width: 315px; height: 49px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--blue { top: 35px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { top: 114px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { left: 30px; width: 270px; height: 60px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--blue { top: 35px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--lime { top: 125px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { font-size: 30px; line-height: 33px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { font-size: 30px; line-height: 33px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { font-size: 40px; line-height: 44px; }
  .page-course .wl-pay .wl-pay__sum img { width: 17px; height: 23px; flex: none; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum img { width: 23px; height: 31px; }
  .page-course .wl-pay .wl-pay__where { position: absolute; left: 35px; margin: 0; color: #a5a5a5; font-size: 16px; line-height: 13.6px; letter-spacing: -.5px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where { top: 88px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where--msk { top: 167px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where { top: 88px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where--msk { top: 167px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where { top: 99px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where--msk { top: 189px; }
  .page-course .wl-pay .wl-pay__grade { position: absolute; left: 30px; right: auto; bottom: auto; width: auto; height: auto; justify-content: flex-start; display: flex; align-items: center; gap: 12px; margin: 0; color: #a5a5a5; font-size: 20px; line-height: 17px; font-weight: 300; }
  .page-course .wl-pay .wl-pay__grade img { height: 24px; width: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade { top: 241px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade { top: 241px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade { top: 263px; }
  .page-course .wl-pay .wl-pay__arrow { display: block; position: absolute; margin: 0; width: 27px; height: 27px; }
  .page-course .wl-pay .wl-pay__step:nth-child(2) .wl-pay__arrow { left: 884px; top: 248px; right: auto; }
  .page-course .wl-pay .wl-pay__step:nth-child(3) .wl-pay__arrow { left: 884px; top: 568px; right: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade img { width: 83px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade img { width: 93px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade img { width: 87px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { width: 318px; }
}

/* ── Рост дохода: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-pay {
    position: relative; width: 640px; height: 1175px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-pay .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 1175px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-pay__h { position: absolute; left: 77px; top: 75px; width: 487px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; }
  .page-course .wl-pay__steps { display: contents; }
  .page-course .wl-pay__step { display: contents; }
  .page-course .wl-pay .wl-pay__card { position: absolute; margin: 0; padding: 0; border-radius: 15px; text-align: left; }
  /* ⚠️ Тёмная плита за карточкой рисовалась через z-index: -1 — и уходила
     НИЖЕ фона секции: ни `.wl-pay`, ни `.wrap` контекста наложения не
     создают, поэтому отрицательный слой проваливался за самый низ, и
     плиты не было видно вовсе. Рисуем не под карточкой, а СПРАВА от
     неё — ровно тот кусок, который в оригинале и торчит. */
  .page-course .wl-pay .wl-pay__card::before { content: ''; position: absolute; left: 100%; top: 0; height: 100%; width: calc(591px - 100%); background: #3a3a3a; border-radius: 0 15px 15px 0; }
  .page-course .wl-pay .wl-pay__card--1 { left: 25px; top: 214px; width: 384px; height: 300px; }
  .page-course .wl-pay .wl-pay__card--2 { left: 25px; top: 534px; width: 488px; height: 300px; }
  .page-course .wl-pay .wl-pay__card--3 { left: 24px; top: 853px; width: 592px; height: 322px; }
  .page-course .wl-pay .wl-pay__sum { position: absolute; display: flex; align-items: center; margin: 0; padding: 0 10px; justify-content: space-between; border-radius: 5px; letter-spacing: -1.5px; white-space: nowrap; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { left: 30px; width: 304px; height: 49px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--blue { top: 35px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--lime { top: 114px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { left: 30px; width: 317px; height: 49px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--blue { top: 35px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { top: 114px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { left: 30px; width: 270px; height: 60px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--blue { top: 36px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--lime { top: 126px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { font-size: 30px; line-height: 33px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { font-size: 30px; line-height: 33px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { font-size: 40px; line-height: 44px; }
  .page-course .wl-pay .wl-pay__sum img { width: 17px; height: 23px; flex: none; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum img { width: 23px; height: 31px; }
  .page-course .wl-pay .wl-pay__where { position: absolute; left: 35px; margin: 0; color: #a5a5a5; font-size: 16px; line-height: 13.6px; letter-spacing: -.5px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where { top: 88px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where--msk { top: 167px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where { top: 88px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where--msk { top: 167px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where { top: 99px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where--msk { top: 189px; }
  .page-course .wl-pay .wl-pay__grade { position: absolute; left: 30px; right: auto; bottom: auto; width: auto; height: auto; justify-content: flex-start; display: flex; align-items: center; gap: 12px; margin: 0; color: #a5a5a5; font-size: 20px; line-height: 17px; font-weight: 300; }
  .page-course .wl-pay .wl-pay__grade img { height: 24px; width: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade { top: 241px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade { top: 241px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade { top: 264px; }
  .page-course .wl-pay .wl-pay__arrow { display: block; position: absolute; margin: 0; width: 27px; height: 27px; }
  .page-course .wl-pay .wl-pay__step:nth-child(2) .wl-pay__arrow { left: 564px; top: 243px; right: auto; }
  .page-course .wl-pay .wl-pay__step:nth-child(3) .wl-pay__arrow { left: 564px; top: 563px; right: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade img { width: 83px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade img { width: 93px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade img { width: 87px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { width: 320px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { left: 31px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade { left: 31px; }
}

/* ── Рост дохода: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-pay {
    position: relative; width: 480px; height: 844px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-pay .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 844px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-pay__h { position: absolute; left: 76px; top: 35px; width: 328px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.5px; text-align: center; }
  .page-course .wl-pay__steps { display: contents; }
  .page-course .wl-pay__step { display: contents; }
  .page-course .wl-pay .wl-pay__card { position: absolute; margin: 0; padding: 0; border-radius: 20px; text-align: left; }
  /* ⚠️ Тёмная плита за карточкой рисовалась через z-index: -1 — и уходила
     НИЖЕ фона секции: ни `.wl-pay`, ни `.wrap` контекста наложения не
     создают, поэтому отрицательный слой проваливался за самый низ, и
     плиты не было видно вовсе. Рисуем не под карточкой, а СПРАВА от
     неё — ровно тот кусок, который в оригинале и торчит. */
  .page-course .wl-pay .wl-pay__card::before { content: ''; position: absolute; left: 100%; top: 0; height: 100%; width: calc(448px - 100%); background: #3a3a3a; border-radius: 0 20px 20px 0; }
  .page-course .wl-pay .wl-pay__card--1 { left: 16px; top: 133px; width: 246px; height: 223px; }
  .page-course .wl-pay .wl-pay__card--2 { left: 16px; top: 366px; width: 347px; height: 223px; }
  .page-course .wl-pay .wl-pay__card--3 { left: 16px; top: 599px; width: 448px; height: 245px; }
  .page-course .wl-pay .wl-pay__sum { position: absolute; display: flex; align-items: center; margin: 0; padding: 0 10px; justify-content: space-between; border-radius: 5px; letter-spacing: -1.5px; white-space: nowrap; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { left: 20px; width: 201px; height: 40px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--blue { top: 22px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum--lime { top: 85px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { left: 20px; width: 210px; height: 40px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--blue { top: 22px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { top: 84px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { left: 20px; width: 204px; height: 51px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--blue { top: 21px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--lime { top: 95px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__sum { font-size: 20px; line-height: 22px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum { font-size: 20px; line-height: 22px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum { font-size: 30px; line-height: 33px; }
  .page-course .wl-pay .wl-pay__sum img { width: 11px; height: 15px; flex: none; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum img { width: 17px; height: 23px; }
  .page-course .wl-pay .wl-pay__where { position: absolute; left: 25px; margin: 0; color: #a5a5a5; font-size: 12px; line-height: 10.2px; letter-spacing: -.5px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where { top: 67px; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__where--msk { top: 130px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where { top: 67px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__where--msk { top: 130px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where { top: 78px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__where--msk { top: 152px; }
  .page-course .wl-pay .wl-pay__grade { position: absolute; left: 20px; right: auto; bottom: auto; width: auto; height: auto; justify-content: flex-start; display: flex; align-items: center; gap: 10px; margin: 0; color: #a5a5a5; font-size: 14px; line-height: 11.9px; font-weight: 300; }
  .page-course .wl-pay .wl-pay__grade img { height: 18px; width: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade { top: 180px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade { top: 180px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade { top: 202px; }
  .page-course .wl-pay .wl-pay__arrow { display: block; position: absolute; margin: 0; width: 27px; height: 27px; }
  .page-course .wl-pay .wl-pay__step:nth-child(2) .wl-pay__arrow { left: 423px; top: 153px; right: auto; }
  .page-course .wl-pay .wl-pay__step:nth-child(3) .wl-pay__arrow { left: 422px; top: 386px; right: auto; }
  .page-course .wl-pay .wl-pay__card--1 .wl-pay__grade img { width: 62px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__grade img { width: 68px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__grade img { width: 66px; }
  .page-course .wl-pay .wl-pay__card--2 .wl-pay__sum--lime { width: 211px; }
  .page-course .wl-pay .wl-pay__card--3 .wl-pay__sum--lime { width: 205px; }
}

/* ── Карьера: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-career {
    position: relative; width: 960px; height: 694px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-career .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 694px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-career::before { inset: 0; border-radius: 0 0 44px 44px; }
  .page-course .wl-career__h { position: absolute; left: 24px; top: 75px; width: 448px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; max-width: none; }
  .page-course .wl-career__grid { display: contents; }
  .page-course .wl-career__card--empty { display: none; }
  .page-course .js-anim .wl-career__card--anim { animation: none; }
  .page-course .wl-career .wl-career__card { position: absolute; width: 210px; height: 100px; margin: 0; padding: 0 17px; border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; line-height: 21.6px; letter-spacing: -0.7px; font-weight: 300; }
  .page-course .wl-career .wl-career__card--dark { left: 24px; top: 372px; }
  .page-course .wl-career .wl-career__card--windows { left: 258px; top: 249px; }
  .page-course .wl-career .wl-career__card--linux { left: 258px; top: 373px; }
  .page-course .wl-career .wl-career__card--net { left: 492px; top: 249px; }
  .page-course .wl-career .wl-career__card--devops { left: 492px; top: 373px; }
  .page-course .wl-career .wl-career__card--lead { left: 726px; top: 124px; }
  .page-course .wl-career .wl-career__card--cto { left: 726px; top: 249px; }
  .page-course .wl-career .wl-career__card--arch { left: 726px; top: 373px; }
  .page-course .wl-career__note { position: absolute; left: 120px; top: 547px; width: 721px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; transform: none; }
  .page-course .wl-career .wl-career__card--dark { padding: 0 17px; }
  .page-course .wl-career .wl-career__card--windows { padding: 0 31px; }
  .page-course .wl-career .wl-career__card--linux { padding: 0 36px; }
  .page-course .wl-career .wl-career__card--net { padding: 0 38px; }
  .page-course .wl-career .wl-career__card--devops { padding: 0 40px; }
  .page-course .wl-career .wl-career__card--lead { padding: 0 30px; }
  .page-course .wl-career .wl-career__card--cto { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--arch { padding: 0 30px; }
  .page-course .wl-career .wl-career__card--net,
  .page-course .wl-career .wl-career__card--devops,
  .page-course .wl-career .wl-career__card--arch { white-space: nowrap; }
  .page-course .wl-career .wrap { min-height: 0; }
}

/* ── Карьера: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-career {
    position: relative; width: 640px; height: 996px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-career .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 996px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-career::before { inset: 0; border-radius: 0 0 44px 44px; }
  .page-course .wl-career__h { position: absolute; left: 24px; top: 75px; width: 447px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; max-width: none; }
  .page-course .wl-career__grid { display: contents; }
  .page-course .wl-career__card--empty { display: none; }
  .page-course .js-anim .wl-career__card--anim { animation: none; }
  .page-course .wl-career .wl-career__card { position: absolute; width: 182px; height: 100px; margin: 0; padding: 0 21px; border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; line-height: 21.6px; letter-spacing: -0.7px; font-weight: 300; }
  .page-course .wl-career .wl-career__card--dark { left: 24px; top: 269px; }
  .page-course .wl-career .wl-career__card--linux { left: 24px; top: 392px; }
  .page-course .wl-career .wl-career__card--windows { left: 229px; top: 392px; }
  .page-course .wl-career .wl-career__card--devops { left: 24px; top: 515px; }
  .page-course .wl-career .wl-career__card--net { left: 229px; top: 515px; }
  .page-course .wl-career .wl-career__card--arch { left: 24px; top: 638px; }
  .page-course .wl-career .wl-career__card--cto { left: 229px; top: 638px; }
  .page-course .wl-career .wl-career__card--lead { left: 434px; top: 638px; }
  .page-course .wl-career__note { position: absolute; left: 61px; top: 813px; width: 519px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -1px; text-align: center; transform: none; }
  .page-course .wl-career .wl-career__card--dark { padding: 0 22px; }
  .page-course .wl-career .wl-career__card--linux { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--windows { padding: 0 21px; }
  .page-course .wl-career .wl-career__card--devops { padding: 0 26px; }
  .page-course .wl-career .wl-career__card--net { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--arch { padding: 0 48px; }
  .page-course .wl-career .wl-career__card--cto { padding: 0 23px; }
  .page-course .wl-career .wl-career__card--lead { padding: 0 28px; }
  .page-course .wl-career .wl-career__card--net,
  .page-course .wl-career .wl-career__card--devops { white-space: nowrap; }
  .page-course .wl-career .wrap { min-height: 0; }
}

/* ── Карьера: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-career {
    position: relative; width: 480px; height: 643px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-career .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 643px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-career::before { inset: 0; border-radius: 0 0 30px 30px; }
  .page-course .wl-career__h { position: absolute; left: 16px; top: 35px; width: 298px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -0.5px; max-width: none; }
  .page-course .wl-career__grid { display: contents; }
  .page-course .wl-career__card--empty { display: none; }
  .page-course .js-anim .wl-career__card--anim { animation: none; }
  .page-course .wl-career .wl-career__card { position: absolute; width: 143px; height: 80px; margin: 0; padding: 0 19px; border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 16.8px; letter-spacing: -0.5px; font-weight: 300; }
  .page-course .wl-career .wl-career__card--dark { left: 16px; top: 151px; }
  .page-course .wl-career .wl-career__card--linux { left: 16px; top: 241px; }
  .page-course .wl-career .wl-career__card--windows { left: 169px; top: 241px; }
  .page-course .wl-career .wl-career__card--devops { left: 16px; top: 331px; }
  .page-course .wl-career .wl-career__card--net { left: 169px; top: 331px; }
  .page-course .wl-career .wl-career__card--arch { left: 16px; top: 421px; }
  .page-course .wl-career .wl-career__card--cto { left: 169px; top: 421px; }
  .page-course .wl-career .wl-career__card--lead { left: 322px; top: 421px; }
  .page-course .wl-career__note { position: absolute; left: 64px; top: 536px; width: 352px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -0.5px; text-align: center; transform: none; }
  .page-course .wl-career .wl-career__card--dark { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--linux { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--windows { padding: 0 19px; }
  .page-course .wl-career .wl-career__card--devops { padding: 0 20px; }
  .page-course .wl-career .wl-career__card--net { padding: 0 18px; }
  .page-course .wl-career .wl-career__card--arch { padding: 0 38px; }
  .page-course .wl-career .wl-career__card--cto { padding: 0 24px; }
  .page-course .wl-career .wl-career__card--lead { padding: 0 20px; }
  .page-course .wl-career .wl-career__card--net,
  .page-course .wl-career .wl-career__card--devops { white-space: nowrap; }
  .page-course .wl-career .wrap { min-height: 0; }
}

/* ── Карьера: канва 360 (телефон) ──────────────────────── */
@media (max-width: 479px) {
  .page-course .wl-career { position: relative; height: calc(657 * var(--м)); padding: 0; overflow: hidden; }
  .page-course .wl-career::before { inset: 0; border-radius: 0 0 calc(30 * var(--м)) calc(30 * var(--м)); }
  .page-course .wl-career .wrap { position: static; width: calc(360 * var(--м)); max-width: none; min-height: 0; margin: 0; padding: 0; }
  .page-course .wl-career__h { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(286 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); }
  .page-course .wl-career__grid { display: contents; }
  .page-course .wl-career__card--empty { display: none; }
  .page-course .wl-career .wl-career__card { position: absolute; width: calc(103 * var(--м)); height: calc(80 * var(--м)); margin: 0; padding: 0 calc(7 * var(--м)); border-radius: calc(20 * var(--м)); display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(12 * var(--м)); line-height: calc(14.4 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); font-weight: 300; }
  .page-course .wl-career .wl-career__card--dark { left: calc(16 * var(--м)); top: calc(159 * var(--м)); }
  .page-course .wl-career .wl-career__card--linux { left: calc(16 * var(--м)); top: calc(249 * var(--м)); }
  .page-course .wl-career .wl-career__card--windows { left: calc(129 * var(--м)); top: calc(249 * var(--м)); }
  .page-course .wl-career .wl-career__card--devops { left: calc(16 * var(--м)); top: calc(339 * var(--м)); }
  .page-course .wl-career .wl-career__card--net { left: calc(129 * var(--м)); top: calc(339 * var(--м)); }
  .page-course .wl-career .wl-career__card--arch { left: calc(16 * var(--м)); top: calc(429 * var(--м)); }
  .page-course .wl-career .wl-career__card--cto { left: calc(129 * var(--м)); top: calc(429 * var(--м)); }
  .page-course .wl-career .wl-career__card--lead { left: calc(242 * var(--м)); top: calc(429 * var(--м)); }
  .page-course .wl-career__note { position: absolute; left: calc(19 * var(--м)); top: calc(544 * var(--м)); width: calc(322 * var(--м)); transform: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); letter-spacing: calc(-0.5 * var(--м)); text-align: center; }
  .page-course .wl-career .wl-career__card--dark { padding: 0 calc(9.0 * var(--м)); }
  .page-course .wl-career .wl-career__card--linux { padding: 0 calc(7.0 * var(--м)); }
  .page-course .wl-career .wl-career__card--windows { padding: 0 calc(10.5 * var(--м)); }
  .page-course .wl-career .wl-career__card--devops { padding: 0 calc(21.0 * var(--м)); }
  .page-course .wl-career .wl-career__card--net { padding: 0 calc(27.5 * var(--м)); }
  .page-course .wl-career .wl-career__card--arch { padding: 0 calc(19.5 * var(--м)); }
  .page-course .wl-career .wl-career__card--cto { padding: 0 calc(18.0 * var(--м)); }
  .page-course .wl-career .wl-career__card--lead { padding: 0 calc(14.0 * var(--м)); }
}

/* ── Преподаватели: канва 960 ──────────────────────── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-teach {
    position: relative; width: 960px; height: 894px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .wl-teach .wrap {
    position: absolute; left: 0; top: 0;
    width: 960px; height: 894px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-teach__h { position: absolute; left: 279px; top: 75px; width: 403px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center; white-space: nowrap; }
  .page-course .wl-teach__row { display: contents; }
  .page-course .wl-teach__list { display: contents; }
  .page-course .wl-teach .wl-teach__photo { position: absolute; margin: 0; border-radius: 20px; object-fit: cover; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(1) .wl-teach__photo { left: 24px; top: 150px; width: 365px; height: 365px; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(2) .wl-teach__photo { left: 571px; top: 530px; width: 365px; height: 365px; }
  .page-course .wl-teach .wl-teach__card { position: absolute; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-teach .wl-teach__card--1 { left: 404px; top: 150px; width: 532px; height: 365px; }
  .page-course .wl-teach .wl-teach__card--2 { left: 24px; top: 530px; width: 532px; height: 365px; }
  .page-course .wl-teach .wl-teach__name { position: absolute; left: 25px; top: 26px; margin: 0; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; }
  .page-course .wl-teach .wl-teach__role { position: absolute; margin: 0; max-width: none; letter-spacing: -1px; }
  .page-course .wl-teach .wl-teach__list li { position: absolute; margin: 0; padding-left: 25px; font-size: 18px; letter-spacing: -.5px; color: #61646b; }
  .page-course .wl-teach .wl-teach__list li::before { width: 15px; height: 12px; top: 4px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(2) { left: 25px; top: 70px; width: 338px; font-size: 20px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(3) { left: 25px; top: 128px; width: 247px; font-size: 20px; line-height: 20px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__role:nth-of-type(2) { left: 25px; top: 70px; width: 366px; font-size: 20px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1) { left: 25px; top: 230px; width: 262px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { left: 25px; top: 258px; width: 303px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3) { left: 25px; top: 312px; width: 368px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { left: 25px; top: 133px; width: 363px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(2) { left: 25px; top: 161px; width: 405px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(3) { left: 25px; top: 220px; width: 435px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(4) { left: 25px; top: 296px; width: 435px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1),
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3),
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { white-space: nowrap; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { width: 333px; }
}

/* ── Преподаватели: канва 640 ──────────────────────── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-teach {
    position: relative; width: 640px; height: 2336px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .wl-teach .wrap {
    position: absolute; left: 0; top: 0;
    width: 640px; height: 2336px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-teach__h { position: absolute; left: 119px; top: 75px; width: 403px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center; white-space: nowrap; }
  .page-course .wl-teach__row { display: contents; }
  .page-course .wl-teach__list { display: contents; }
  .page-course .wl-teach .wl-teach__photo { position: absolute; margin: 0; border-radius: 20px; object-fit: cover; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(1) .wl-teach__photo { left: 24px; top: 150px; width: 592px; height: 592px; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(2) .wl-teach__photo { left: 24px; top: 1217px; width: 592px; height: 592px; }
  .page-course .wl-teach .wl-teach__card { position: absolute; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-teach .wl-teach__card--1 { left: 24px; top: 752px; width: 592px; height: 430px; }
  .page-course .wl-teach .wl-teach__card--2 { left: 24px; top: 1819px; width: 592px; height: 517px; }
  .page-course .wl-teach .wl-teach__name { position: absolute; left: 35px; top: 36px; margin: 0; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; }
  .page-course .wl-teach .wl-teach__role { position: absolute; margin: 0; max-width: none; letter-spacing: -1px; }
  .page-course .wl-teach .wl-teach__list li { position: absolute; margin: 0; padding-left: 25px; font-size: 20px; letter-spacing: -.5px; color: #61646b; }
  .page-course .wl-teach .wl-teach__list li::before { width: 15px; height: 12px; top: 5px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(2) { left: 35px; top: 111px; width: 385px; font-size: 24px; line-height: 26px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(3) { left: 35px; top: 178px; width: 302px; font-size: 24px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__role:nth-of-type(2) { left: 35px; top: 111px; width: 461px; font-size: 24px; line-height: 29px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1) { left: 35px; top: 252px; width: 290px; line-height: 20px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { left: 35px; top: 292px; width: 336px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3) { left: 35px; top: 360px; width: 409px; line-height: 20px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { left: 35px; top: 219px; width: 403px; line-height: 20px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(2) { left: 35px; top: 259px; width: 462px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(3) { left: 35px; top: 327px; width: 491px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(4) { left: 35px; top: 419px; width: 491px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1),
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3),
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { white-space: nowrap; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { width: 366px; }
}

/* ── Преподаватели: канва 480 ──────────────────────── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-teach {
    position: relative; width: 480px; height: 1808px;
    padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .wl-teach .wrap {
    position: absolute; left: 0; top: 0;
    width: 480px; height: 1808px;
    max-width: none; margin: 0; padding: 0;
  }
  .page-course .wl-teach__h { position: absolute; left: 120px; top: 35px; width: 241px; max-width: none; margin: 0; font-size: 25px; line-height: 25px; letter-spacing: -1.5px; text-align: center; white-space: nowrap; }
  .page-course .wl-teach__row { display: contents; }
  .page-course .wl-teach__list { display: contents; }
  .page-course .wl-teach .wl-teach__photo { position: absolute; margin: 0; border-radius: 20px; object-fit: cover; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(1) .wl-teach__photo { left: 16px; top: 80px; width: 448px; height: 448px; }
  .page-course .wl-teach .wl-teach__row:nth-of-type(2) .wl-teach__photo { left: 16px; top: 887px; width: 448px; height: 448px; }
  .page-course .wl-teach .wl-teach__card { position: absolute; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-teach .wl-teach__card--1 { left: 16px; top: 533px; width: 448px; height: 339px; }
  .page-course .wl-teach .wl-teach__card--2 { left: 16px; top: 1345px; width: 448px; height: 464px; }
  .page-course .wl-teach .wl-teach__name { position: absolute; left: 25px; top: 25px; margin: 0; font-size: 25px; line-height: 25px; letter-spacing: -1.5px; }
  .page-course .wl-teach .wl-teach__role { position: absolute; margin: 0; max-width: none; letter-spacing: -1px; }
  .page-course .wl-teach .wl-teach__list li { position: absolute; margin: 0; padding-left: 25px; font-size: 18px; letter-spacing: -.5px; color: #61646b; }
  .page-course .wl-teach .wl-teach__list li::before { width: 15px; height: 12px; top: 4px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(2) { left: 25px; top: 70px; width: 312px; font-size: 20px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__role:nth-of-type(3) { left: 25px; top: 124px; width: 247px; font-size: 20px; line-height: 20px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__role:nth-of-type(2) { left: 25px; top: 70px; width: 361px; font-size: 20px; line-height: 24px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1) { left: 25px; top: 194px; width: 262px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { left: 25px; top: 227px; width: 303px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3) { left: 25px; top: 286px; width: 368px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { left: 25px; top: 168px; width: 363px; line-height: 18px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(2) { left: 25px; top: 201px; width: 394px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(3) { left: 25px; top: 259px; width: 337px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(4) { left: 25px; top: 362px; width: 328px; line-height: 22px; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(1),
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(3),
  .page-course .wl-teach .wl-teach__card--2 .wl-teach__list li:nth-child(1) { white-space: nowrap; }
  .page-course .wl-teach .wl-teach__card--1 .wl-teach__list li:nth-child(2) { width: 333px; }
}

/* ── Программа (Windows): канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head {
    --п: calc(var(--вью, 960) / 960 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 960) * 1px);
    height: calc(267 * var(--п));
    margin-top: calc(75 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head::before { inset: 0; border-radius: 0; background: var(--card); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { position: absolute; left: calc(500 * var(--п)); top: calc(31 * var(--п)); width: calc(332 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__h { position: absolute; left: calc(239 * var(--п)); top: calc(47 * var(--п)); width: calc(482 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__note { position: absolute; left: calc(309 * var(--п)); top: calc(139 * var(--п)); width: calc(343 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips { display: contents; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li { position: absolute; margin: 0; height: calc(24 * var(--п)); padding: 0; font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(227 * var(--п)); top: calc(208 * var(--п)); width: calc(104 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(336 * var(--п)); top: calc(208 * var(--п)); width: calc(160 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(501 * var(--п)); top: calc(208 * var(--п)); width: calc(231 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { height: calc(26 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh::before { width: calc(20 * var(--п)); height: calc(20 * var(--п)); }
}

/* ── Программа (Windows): канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head {
    --п: calc(var(--вью, 640) / 640 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 640) * 1px);
    height: calc(267 * var(--п));
    margin-top: calc(75 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head::before { inset: 0; border-radius: 0; background: var(--card); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { position: absolute; left: calc(260 * var(--п)); top: calc(27 * var(--п)); width: calc(332 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__h { position: absolute; left: calc(79 * var(--п)); top: calc(47 * var(--п)); width: calc(482 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__note { position: absolute; left: calc(149 * var(--п)); top: calc(139 * var(--п)); width: calc(343 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips { display: contents; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li { position: absolute; margin: 0; height: calc(24 * var(--п)); padding: 0; font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(67 * var(--п)); top: calc(208 * var(--п)); width: calc(104 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(176 * var(--п)); top: calc(208 * var(--п)); width: calc(160 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(341 * var(--п)); top: calc(208 * var(--п)); width: calc(231 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { height: calc(26 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh::before { width: calc(20 * var(--п)); height: calc(20 * var(--п)); }
}

/* ── Программа (Windows): канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head {
    --п: calc(var(--вью, 480) / 480 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 480) * 1px);
    height: calc(234 * var(--п));
    margin-top: calc(35 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head::before { inset: 0; border-radius: 0; background: var(--card); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { position: absolute; left: calc(190 * var(--п)); top: calc(30 * var(--п)); width: calc(255 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__h { position: absolute; left: calc(79 * var(--п)); top: calc(45 * var(--п)); width: calc(322 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__note { position: absolute; left: calc(99 * var(--п)); top: calc(112 * var(--п)); width: calc(282 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips { display: contents; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li { position: absolute; margin: 0; height: calc(20 * var(--п)); padding: 0; font-size: calc(14 * var(--п)); line-height: calc(14 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(137 * var(--п)); top: calc(169 * var(--п)); width: calc(80 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(222 * var(--п)); top: calc(169 * var(--п)); width: calc(121 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(151 * var(--п)); top: calc(194 * var(--п)); width: calc(179 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { height: calc(21 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh::before { width: calc(16 * var(--п)); height: calc(16 * var(--п)); }
}

/* ── Программа (Windows): канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head {
    --п: calc(var(--вью, 360) / 360 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 360) * 1px);
    height: calc(239 * var(--п));
    margin-top: calc(35 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head::before { inset: 0; border-radius: 0; background: var(--card); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { position: absolute; left: calc(95 * var(--п)); top: calc(34 * var(--п)); width: calc(255 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__h { position: absolute; left: calc(17 * var(--п)); top: calc(51 * var(--п)); width: calc(326 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__note { position: absolute; left: calc(40 * var(--п)); top: calc(118 * var(--п)); width: calc(281 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); text-align: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips { display: contents; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li { position: absolute; margin: 0; height: calc(20 * var(--п)); padding: 0; font-size: calc(14 * var(--п)); line-height: calc(12.6 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(77 * var(--п)); top: calc(175 * var(--п)); width: calc(80 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(162 * var(--п)); top: calc(175 * var(--п)); width: calc(122 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(91 * var(--п)); top: calc(199 * var(--п)); width: calc(178 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh { height: calc(21 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program:not(.wl-program--linux) .wl-program__head .wl-program__fresh::before { width: calc(16 * var(--п)); height: calc(16 * var(--п)); }
}

/* ── Программа (Linux): канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-program__head--linux {
    --п: calc(var(--вью, 960) / 960 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 960) * 1px);
    height: calc(303 * var(--п));
    margin-top: calc(0 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program__head--linux::before { inset: 0; border-radius: 0; background: none; }
  .page-course .wl-program__head--linux .wl-program__fresh { position: absolute; left: calc(470 * var(--п)); top: calc(59 * var(--п)); width: calc(332 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__h { position: absolute; left: calc(239 * var(--п)); top: calc(75 * var(--п)); width: calc(482 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__note { position: absolute; left: calc(322 * var(--п)); top: calc(167 * var(--п)); width: calc(317 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__chips { display: contents; }
  .page-course .wl-program__head--linux .wl-program__chips li { position: absolute; margin: 0; height: calc(24 * var(--п)); padding: 0; font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(1) { left: calc(226 * var(--п)); top: calc(244 * var(--п)); width: calc(102 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(2) { left: calc(333 * var(--п)); top: calc(244 * var(--п)); width: calc(167 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(3) { left: calc(505 * var(--п)); top: calc(244 * var(--п)); width: calc(227 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh { height: calc(26 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh::before { width: calc(20 * var(--п)); height: calc(20 * var(--п)); }
}

/* ── Программа (Linux): канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-program__head--linux {
    --п: calc(var(--вью, 640) / 640 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 640) * 1px);
    height: calc(302 * var(--п));
    margin-top: calc(0 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program__head--linux::before { inset: 0; border-radius: 0; background: none; }
  .page-course .wl-program__head--linux .wl-program__fresh { position: absolute; left: calc(273 * var(--п)); top: calc(56 * var(--п)); width: calc(332 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__h { position: absolute; left: calc(79 * var(--п)); top: calc(75 * var(--п)); width: calc(482 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__note { position: absolute; left: calc(164 * var(--п)); top: calc(167 * var(--п)); width: calc(312 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__chips { display: contents; }
  .page-course .wl-program__head--linux .wl-program__chips li { position: absolute; margin: 0; height: calc(24 * var(--п)); padding: 0; font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(1) { left: calc(67 * var(--п)); top: calc(244 * var(--п)); width: calc(102 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(2) { left: calc(174 * var(--п)); top: calc(244 * var(--п)); width: calc(167 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(3) { left: calc(346 * var(--п)); top: calc(244 * var(--п)); width: calc(227 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh { height: calc(26 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh::before { width: calc(20 * var(--п)); height: calc(20 * var(--п)); }
}

/* ── Программа (Linux): канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-program__head--linux {
    --п: calc(var(--вью, 480) / 480 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 480) * 1px);
    height: calc(205 * var(--п));
    margin-top: calc(0 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program__head--linux::before { inset: 0; border-radius: 0; background: none; }
  .page-course .wl-program__head--linux .wl-program__fresh { position: absolute; left: calc(185 * var(--п)); top: calc(20 * var(--п)); width: calc(255 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__h { position: absolute; left: calc(91 * var(--п)); top: calc(35 * var(--п)); width: calc(299 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__note { position: absolute; left: calc(112 * var(--п)); top: calc(102 * var(--п)); width: calc(256 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__chips { display: contents; }
  .page-course .wl-program__head--linux .wl-program__chips li { position: absolute; margin: 0; height: calc(24 * var(--п)); padding: 0; font-size: calc(14 * var(--п)); line-height: calc(14 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(1) { left: calc(45 * var(--п)); top: calc(161 * var(--п)); width: calc(79 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(2) { left: calc(129 * var(--п)); top: calc(161 * var(--п)); width: calc(126 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(3) { left: calc(260 * var(--п)); top: calc(161 * var(--п)); width: calc(175 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh { height: calc(21 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh::before { width: calc(16 * var(--п)); height: calc(16 * var(--п)); }
}

/* ── Программа (Linux): канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-program__head--linux {
    --п: calc(var(--вью, 360) / 360 * 1px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--вью, 360) * 1px);
    height: calc(242 * var(--п));
    margin-top: calc(0 * var(--п));
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .page-course .wl-program__head--linux::before { inset: 0; border-radius: 0; background: none; }
  .page-course .wl-program__head--linux .wl-program__fresh { position: absolute; left: calc(95 * var(--п)); top: calc(35 * var(--п)); width: calc(255 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__h { position: absolute; left: calc(17 * var(--п)); top: calc(53 * var(--п)); width: calc(326 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__note { position: absolute; left: calc(50 * var(--п)); top: calc(120 * var(--п)); width: calc(261 * var(--п)); max-width: none; margin: 0; padding: 0; font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); text-align: center; }
  .page-course .wl-program__head--linux .wl-program__chips { display: contents; }
  .page-course .wl-program__head--linux .wl-program__chips li { position: absolute; margin: 0; height: calc(20 * var(--п)); padding: 0; font-size: calc(14 * var(--п)); line-height: calc(12.6 * var(--п)); display: flex; align-items: center; justify-content: center; }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(1) { left: calc(74 * var(--п)); top: calc(177 * var(--п)); width: calc(82 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(2) { left: calc(161 * var(--п)); top: calc(177 * var(--п)); width: calc(126 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__chips li:nth-child(3) { left: calc(93 * var(--п)); top: calc(202 * var(--п)); width: calc(174 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh { height: calc(21 * var(--п)); border-radius: calc(3 * var(--п)); gap: calc(8 * var(--п)); }
  .page-course .wl-program__head--linux .wl-program__fresh::before { width: calc(16 * var(--п)); height: calc(16 * var(--п)); }
}

/* ── Как проходит обучение: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-how--1 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 691px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--1 .wl-how__panels { display: block; position: absolute; left: 24px; top: 150px; width: 592px; height: 517px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--1 .wl-how__panels img { display: none; }
  .page-course .wl-how--1 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--1 .wl-how__h { position: absolute; left: 54px; top: 180px; width: 229px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--1 .wl-how__t { position: absolute; left: 54px; top: 236px; width: 436px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--1 .wl-how__media--video1 { position: absolute; left: 54px; top: 341px; width: 533px; height: 291px; max-width: none; margin: 0; }
  .page-course .wl-how--1 .wl-how__title { position: absolute; left: 99px; top: 75px; width: 443px; margin: 0; font-size: 40px; line-height: 40px; }
  .page-course .wl-how--2 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 600px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--2 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 576px; border-radius: 20px; background: #f5f5f8; inset: auto; }
  .page-course .wl-how--2 .wl-how__panels img { display: none; }
  .page-course .wl-how--2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--2 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 355px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--2 .wl-how__t { position: absolute; left: 54px; top: 86px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--2 .wl-how__media--pic { position: absolute; left: 54px; top: 191px; width: 532px; height: 355px; max-width: none; margin: 0; }
  .page-course .wl-how--2 .wl-how__mark--2 { position: absolute; left: 423px; top: 133px; width: 193px; height: 193px; max-width: none; margin: 0; }
  .page-course .wl-how--3 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 672px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--3 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 648px; border-radius: 20px; background: #c1f742; inset: auto; }
  .page-course .wl-how--3 .wl-how__panels img { display: none; }
  .page-course .wl-how--3 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--3 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 351px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--3 .wl-how__t { position: absolute; left: 54px; top: 122px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--3 .wl-how__big { position: absolute; left: -35px; top: 146px; width: 710px; height: 502px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3a { position: absolute; left: 55px; top: 203px; width: 115px; height: 115px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__media--video3 { position: absolute; left: 116px; top: 250px; width: 409px; height: 231px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3b { position: absolute; left: 500px; top: 450px; width: 80px; height: 84px; max-width: none; margin: 0; }
  .page-course .wl-how--4 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 624px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--4 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 600px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--4 .wl-how__panels img { display: none; }
  .page-course .wl-how--4 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--4 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 302px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--4 .wl-how__t { position: absolute; left: 54px; top: 86px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--4 .wl-how__media--pic { position: absolute; left: 54px; top: 216px; width: 532px; height: 355px; max-width: none; margin: 0; }
  .page-course .wl-how--4 .wl-how__mark--4 { position: absolute; left: 490px; top: 216px; width: 126px; height: 126px; max-width: none; margin: 0; }
  .page-course .wl-how--5 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 590px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--5 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 567px; border-radius: 20px; background: #f5f5f8; inset: auto; }
  .page-course .wl-how--5 .wl-how__panels img { display: none; }
  .page-course .wl-how--5 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--5 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 358px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--5 .wl-how__t { position: absolute; left: 54px; top: 86px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--5 .wl-how__media--video5 { position: absolute; left: 54px; top: 241px; width: 532px; height: 291px; max-width: none; margin: 0; }
  .page-course .wl-how--6 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 677px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--6 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 654px; border-radius: 20px; background: #c1f742; inset: auto; }
  .page-course .wl-how--6 .wl-how__panels img { display: none; }
  .page-course .wl-how--6 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--6 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 415px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--6 .wl-how__t { position: absolute; left: 54px; top: 86px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--6 .wl-how__shot--a { position: absolute; left: 42px; top: 311px; width: 322px; height: 219px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__bar { position: absolute; left: 335px; top: 336px; width: 40px; height: 183px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__shot--b { position: absolute; left: 256px; top: 323px; width: 322px; height: 276px; max-width: none; margin: 0; }
  .page-course .wl-how--7 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 870px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--7 .wl-how__panels { display: block; position: absolute; left: 24px; top: 0px; width: 592px; height: 847px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--7 .wl-how__panels img { display: none; }
  .page-course .wl-how--7 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--7 .wl-how__h { position: absolute; left: 54px; top: 30px; width: 295px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--7 .wl-how__t { position: absolute; left: 54px; top: 122px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--7 .wl-how__msg--1 { position: absolute; left: 44px; top: 252px; width: 401px; height: 140px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--2 { position: absolute; left: 44px; top: 401px; width: 383px; height: 111px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__plane { position: absolute; left: 400px; top: 401px; width: 66px; height: 81px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--3 { position: absolute; left: 44px; top: 522px; width: 343px; height: 82px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--4 { position: absolute; left: 153px; top: 612px; width: 445px; height: 112px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__shield { position: absolute; left: 18px; top: 663px; width: 97px; height: 97px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--5 { position: absolute; left: 44px; top: 731px; width: 401px; height: 82px; max-width: none; margin: 0; }
}

/* ── Как проходит обучение: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-how--1 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 478px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--1 .wl-how__panels { display: block; position: absolute; left: 16px; top: 80px; width: 448px; height: 389px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--1 .wl-how__panels img { display: none; }
  .page-course .wl-how--1 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--1 .wl-how__h { position: absolute; left: 36px; top: 100px; width: 155px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--1 .wl-how__t { position: absolute; left: 36px; top: 139px; width: 340px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--1 .wl-how__media--video1 { position: absolute; left: 36px; top: 219px; width: 408px; height: 225px; max-width: none; margin: 0; }
  .page-course .wl-how--1 .wl-how__title { position: absolute; left: 108px; top: 35px; width: 265px; margin: 0; font-size: 25px; line-height: 25px; }
  .page-course .wl-how--2 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 446px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--2 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 436px; border-radius: 20px; background: #f5f5f8; inset: auto; }
  .page-course .wl-how--2 .wl-how__panels img { display: none; }
  .page-course .wl-how--2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--2 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 240px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--2 .wl-how__t { position: absolute; left: 36px; top: 59px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--2 .wl-how__media--pic { position: absolute; left: 36px; top: 144px; width: 408px; height: 272px; max-width: none; margin: 0; }
  .page-course .wl-how--2 .wl-how__mark--2 { position: absolute; left: 319px; top: 97px; width: 151px; height: 151px; max-width: none; margin: 0; }
  .page-course .wl-how--3 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 498px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--3 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 489px; border-radius: 20px; background: #c1f742; inset: auto; }
  .page-course .wl-how--3 .wl-how__panels img { display: none; }
  .page-course .wl-how--3 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--3 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 238px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--3 .wl-how__t { position: absolute; left: 36px; top: 83px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--3 .wl-how__big { position: absolute; left: -30px; top: 108px; width: 539px; height: 381px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3a { position: absolute; left: 36px; top: 143px; width: 87px; height: 87px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__media--video3 { position: absolute; left: 85px; top: 187px; width: 309px; height: 175px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3b { position: absolute; left: 375px; top: 336px; width: 60px; height: 63px; max-width: none; margin: 0; }
  .page-course .wl-how--4 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 461px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--4 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 451px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--4 .wl-how__panels img { display: none; }
  .page-course .wl-how--4 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--4 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 204px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--4 .wl-how__t { position: absolute; left: 36px; top: 59px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--4 .wl-how__media--pic { position: absolute; left: 36px; top: 159px; width: 408px; height: 272px; max-width: none; margin: 0; }
  .page-course .wl-how--4 .wl-how__mark--4 { position: absolute; left: 355px; top: 159px; width: 109px; height: 109px; max-width: none; margin: 0; }
  .page-course .wl-how--5 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 441px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--5 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 432px; border-radius: 20px; background: #f5f5f8; inset: auto; }
  .page-course .wl-how--5 .wl-how__panels img { display: none; }
  .page-course .wl-how--5 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--5 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 242px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--5 .wl-how__t { position: absolute; left: 36px; top: 59px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--5 .wl-how__media--video5 { position: absolute; left: 36px; top: 184px; width: 408px; height: 223px; max-width: none; margin: 0; }
  .page-course .wl-how--6 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 726px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--6 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 716px; border-radius: 20px; background: #c1f742; inset: auto; }
  .page-course .wl-how--6 .wl-how__panels img { display: none; }
  .page-course .wl-how--6 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--6 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 281px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--6 .wl-how__t { position: absolute; left: 36px; top: 59px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--6 .wl-how__shot--a { position: absolute; left: 19px; top: 207px; width: 322px; height: 219px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__bar { position: absolute; left: 187px; top: 379px; width: 132px; height: 76px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__shot--b { position: absolute; left: 105px; top: 392px; width: 322px; height: 276px; max-width: none; margin: 0; }
  .page-course .wl-how--7 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 641px; padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--7 .wl-how__panels { display: block; position: absolute; left: 16px; top: 0px; width: 448px; height: 631px; border-radius: 20px; background: #373737; inset: auto; }
  .page-course .wl-how--7 .wl-how__panels img { display: none; }
  .page-course .wl-how--7 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--7 .wl-how__h { position: absolute; left: 36px; top: 20px; width: 200px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-how--7 .wl-how__t { position: absolute; left: 36px; top: 83px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-how--7 .wl-how__msg--1 { position: absolute; left: 36px; top: 193px; width: 295px; height: 103px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--2 { position: absolute; left: 36px; top: 301px; width: 282px; height: 81px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__plane { position: absolute; left: 300px; top: 299px; width: 53px; height: 65px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--3 { position: absolute; left: 36px; top: 387px; width: 252px; height: 60px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--4 { position: absolute; left: 116px; top: 452px; width: 328px; height: 82px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__shield { position: absolute; left: 16px; top: 495px; width: 69px; height: 69px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--5 { position: absolute; left: 36px; top: 540px; width: 295px; height: 61px; max-width: none; margin: 0; }
}

/* ── Как проходит обучение: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-how--1 { position: relative; height: calc(432 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--1 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(80 * var(--м)); width: calc(328 * var(--м)); height: calc(343 * var(--м)); border-radius: calc(20 * var(--м)); background: #373737; inset: auto; }
  .page-course .wl-how--1 .wl-how__panels img { display: none; }
  .page-course .wl-how--1 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--1 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(100 * var(--м)); width: calc(155 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--1 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(139 * var(--м)); width: calc(288 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--1 .wl-how__media--video1 { position: absolute; left: calc(36 * var(--м)); top: calc(241 * var(--м)); width: calc(288 * var(--м)); height: calc(157 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--1 .wl-how__title { position: absolute; left: calc(48 * var(--м)); top: calc(35 * var(--м)); width: calc(265 * var(--м)); margin: 0; font-size: calc(25 * var(--м)); line-height: calc(25 * var(--м)); }
  .page-course .wl-how--2 { position: relative; height: calc(393 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--2 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(383 * var(--м)); border-radius: calc(20 * var(--м)); background: #f5f5f8; inset: auto; }
  .page-course .wl-how--2 .wl-how__panels img { display: none; }
  .page-course .wl-how--2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--2 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(240 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--2 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(61 * var(--м)); width: calc(288 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--2 .wl-how__media--pic { position: absolute; left: calc(36 * var(--м)); top: calc(171 * var(--м)); width: calc(288 * var(--м)); height: calc(192 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--2 .wl-how__mark--2 { position: absolute; left: calc(222 * var(--м)); top: calc(120 * var(--м)); width: calc(127 * var(--м)); height: calc(127 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--3 { position: relative; height: calc(458 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--3 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(448 * var(--м)); border-radius: calc(20 * var(--м)); background: #c1f742; inset: auto; }
  .page-course .wl-how--3 .wl-how__panels img { display: none; }
  .page-course .wl-how--3 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--3 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(238 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--3 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(83 * var(--м)); width: calc(295 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--3 .wl-how__big { position: absolute; left: calc(-60 * var(--м)); top: calc(125 * var(--м)); width: calc(480 * var(--м)); height: calc(340 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3a { position: absolute; left: calc(13 * var(--м)); top: calc(162 * var(--м)); width: calc(75 * var(--м)); height: calc(75 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__media--video3 { position: absolute; left: calc(41 * var(--м)); top: calc(195 * var(--м)); width: calc(277 * var(--м)); height: calc(156 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3b { position: absolute; left: calc(277 * var(--м)); top: calc(321 * var(--м)); width: calc(50 * var(--м)); height: calc(53 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--4 { position: relative; height: calc(412 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--4 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(403 * var(--м)); border-radius: calc(20 * var(--м)); background: #373737; inset: auto; }
  .page-course .wl-how--4 .wl-how__panels img { display: none; }
  .page-course .wl-how--4 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--4 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(204 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--4 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(61 * var(--м)); width: calc(272 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--4 .wl-how__media--pic { position: absolute; left: calc(36 * var(--м)); top: calc(191 * var(--м)); width: calc(288 * var(--м)); height: calc(192 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--4 .wl-how__mark--4 { position: absolute; left: calc(266 * var(--м)); top: calc(168 * var(--м)); width: calc(82 * var(--м)); height: calc(82 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--5 { position: relative; height: calc(418 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--5 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(408 * var(--м)); border-radius: calc(20 * var(--м)); background: #f5f5f8; inset: auto; }
  .page-course .wl-how--5 .wl-how__panels img { display: none; }
  .page-course .wl-how--5 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--5 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(242 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--5 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(61 * var(--м)); width: calc(297 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--5 .wl-how__media--video5 { position: absolute; left: calc(36 * var(--м)); top: calc(226 * var(--м)); width: calc(288 * var(--м)); height: calc(157 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--6 { position: relative; height: calc(716 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--6 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(707 * var(--м)); border-radius: calc(20 * var(--м)); background: #c1f742; inset: auto; }
  .page-course .wl-how--6 .wl-how__panels img { display: none; }
  .page-course .wl-how--6 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--6 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(281 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--6 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(61 * var(--м)); width: calc(288 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--6 .wl-how__shot--a { position: absolute; left: calc(32 * var(--м)); top: calc(216 * var(--м)); width: calc(284 * var(--м)); height: calc(194 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__bar { position: absolute; left: calc(160 * var(--м)); top: calc(400 * var(--м)); width: calc(158 * var(--м)); height: calc(80 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__shot--b { position: absolute; left: calc(27 * var(--м)); top: calc(410 * var(--м)); width: calc(289 * var(--м)); height: calc(248 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 { position: relative; height: calc(621 * var(--м)); padding: 0; margin: 0; overflow: hidden; background: none; }
  .page-course .wl-how--7 .wl-how__panels { display: block; position: absolute; left: calc(16 * var(--м)); top: calc(0 * var(--м)); width: calc(328 * var(--м)); height: calc(611 * var(--м)); border-radius: calc(20 * var(--м)); background: #373737; inset: auto; }
  .page-course .wl-how--7 .wl-how__panels img { display: none; }
  .page-course .wl-how--7 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--7 .wl-how__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(200 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-how--7 .wl-how__t { position: absolute; left: calc(36 * var(--м)); top: calc(87 * var(--м)); width: calc(291 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-how--7 .wl-how__msg--1 { position: absolute; left: calc(36 * var(--м)); top: calc(237 * var(--м)); width: calc(247 * var(--м)); height: calc(86 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--2 { position: absolute; left: calc(36 * var(--м)); top: calc(328 * var(--м)); width: calc(236 * var(--м)); height: calc(68 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__plane { position: absolute; left: calc(257 * var(--м)); top: calc(328 * var(--м)); width: calc(41 * var(--м)); height: calc(51 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--3 { position: absolute; left: calc(36 * var(--м)); top: calc(401 * var(--м)); width: calc(211 * var(--м)); height: calc(51 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--4 { position: absolute; left: calc(50 * var(--м)); top: calc(456 * var(--м)); width: calc(274 * var(--м)); height: calc(69 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__shield { position: absolute; left: calc(6 * var(--м)); top: calc(207 * var(--м)); width: calc(69 * var(--м)); height: calc(69 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--5 { position: absolute; left: calc(36 * var(--м)); top: calc(530 * var(--м)); width: calc(247 * var(--м)); height: calc(51 * var(--м)); max-width: none; margin: 0; }
}

/* ── Как проходит обучение: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-how--1 { position: relative; width: 960px; height: 612px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--1 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--1 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--1 .wl-how__back { left: 24px; top: 150px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--1 .wl-how__front { left: 1px; top: 162px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--1 .wl-how__h { position: absolute; left: 54px; top: 277px; width: 229px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--1 .wl-how__t { position: absolute; left: 54px; top: 338px; width: 333px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--1 .wl-how__media--video1 { position: absolute; left: 454px; top: 277px; width: 452px; height: 246px; max-width: none; margin: 0; }
  .page-course .wl-how--2 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--2 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--2 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--2 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--2 .wl-how__h { position: absolute; left: 54px; top: 138px; width: 371px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--2 .wl-how__t { position: absolute; left: 54px; top: 199px; width: 372px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--2 .wl-how__media--pic { position: absolute; left: 498px; top: 128px; width: 408px; height: 272px; max-width: none; margin: 0; }
  .page-course .wl-how--2 .wl-how__mark--2 { position: absolute; left: 456px; top: 296px; width: 146px; height: 146px; max-width: none; margin: 0; }
  .page-course .wl-how--3 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--3 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--3 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--3 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--3 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--3 .wl-how__h { position: absolute; left: 54px; top: 140px; width: 371px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--3 .wl-how__t { position: absolute; left: 54px; top: 237px; width: 368px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--3 .wl-how__big { position: absolute; left: 408px; top: 47px; width: 567px; height: 401px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3a { position: absolute; left: 479px; top: 86px; width: 86px; height: 86px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__media--video3 { position: absolute; left: 528px; top: 129px; width: 327px; height: 185px; max-width: none; margin: 0; }
  .page-course .wl-how--3 .wl-how__mark--3b { position: absolute; left: 835px; top: 289px; width: 60px; height: 63px; max-width: none; margin: 0; }
  .page-course .wl-how--4 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--4 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--4 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--4 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--4 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--4 .wl-how__h { position: absolute; left: 54px; top: 138px; width: 301px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--4 .wl-how__t { position: absolute; left: 54px; top: 199px; width: 335px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--4 .wl-how__media--pic { position: absolute; left: 498px; top: 128px; width: 408px; height: 272px; max-width: none; margin: 0; }
  .page-course .wl-how--4 .wl-how__mark--4 { position: absolute; left: 820px; top: 128px; width: 116px; height: 116px; max-width: none; margin: 0; }
  .page-course .wl-how--5 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--5 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--5 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--5 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--5 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--5 .wl-how__h { position: absolute; left: 54px; top: 133px; width: 299px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--5 .wl-how__t { position: absolute; left: 54px; top: 230px; width: 335px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--5 .wl-how__media--video5 { position: absolute; left: 454px; top: 123px; width: 453px; height: 248px; max-width: none; margin: 0; }
  .page-course .wl-how--6 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--6 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--6 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--6 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--6 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--6 .wl-how__h { position: absolute; left: 54px; top: 120px; width: 371px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--6 .wl-how__t { position: absolute; left: 54px; top: 217px; width: 361px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--6 .wl-how__shot--a { position: absolute; left: 425px; top: 148px; width: 288px; height: 196px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__bar { position: absolute; left: 688px; top: 171px; width: 36px; height: 164px; max-width: none; margin: 0; }
  .page-course .wl-how--6 .wl-how__shot--b { position: absolute; left: 617px; top: 158px; width: 288px; height: 247px; max-width: none; margin: 0; }
  .page-course .wl-how--7 { position: relative; width: 960px; height: 462px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-how--7 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; height: auto; }
  .page-course .wl-how--7 .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-how--7 .wl-how__back { left: 24px; top: 0px; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-how--7 .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-how--7 .wl-how__h { position: absolute; left: 54px; top: 120px; width: 371px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-how--7 .wl-how__t { position: absolute; left: 54px; top: 217px; width: 378px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-how--7 .wl-how__msg--1 { position: absolute; left: 565px; top: 72px; width: 247px; height: 86px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--2 { position: absolute; left: 565px; top: 164px; width: 236px; height: 68px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__plane { position: absolute; left: 786px; top: 164px; width: 53px; height: 65px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--3 { position: absolute; left: 565px; top: 238px; width: 211px; height: 50px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--4 { position: absolute; left: 632px; top: 294px; width: 274px; height: 69px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__shield { position: absolute; left: 525px; top: 320px; width: 81px; height: 81px; max-width: none; margin: 0; }
  .page-course .wl-how--7 .wl-how__msg--5 { position: absolute; left: 565px; top: 368px; width: 247px; height: 51px; max-width: none; margin: 0; }
  .page-course .wl-how--1 .wl-how__title { position: absolute; left: 279px; top: 75px; width: 443px; margin: 0; font-size: 40px; line-height: 40px; }
}

/* ── Закрытый клуб: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-club { position: relative; width: 960px; height: 461px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-club .wl-club__clip { position: absolute; inset: 0; height: 461px; overflow: hidden; }
  .page-course .wl-club .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* z-index 0: у слоя плит он единица, а содержимое клуба лежит в `.wrap`,
     который на канве статичен, — значит его z-index не работает, и плиты
     накрывали и заголовок, и телефон. На 640 и ниже плита рисуется фоном,
     а не картинкой, и этой беды там нет. */
  .page-course .wl-club .wl-how__panels { position: absolute; inset: 0; z-index: 0; }
  .page-course .wl-club .wl-how__back { left: 24px; top: 0; width: 912px; height: 381px; margin: 0; }
  .page-course .wl-club .wl-how__front { left: 1px; top: 12px; width: 950px; height: 446px; margin: 0; }
  .page-course .wl-club .wl-club__h { position: absolute; left: 54px; top: 120px; width: 278px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-club .wl-club__t { position: absolute; left: 54px; top: 217px; width: 369px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-club .wl-club__phone { position: absolute; left: 444px; top: 71px; width: 492px; height: 927px; max-width: none; margin: 0; }
  .page-course .wl-club .wl-club__screen { position: absolute; left: 498px; top: 102px; width: 395px; height: 574px; max-width: none; margin: 0; }
}

/* ── Закрытый клуб: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-club { position: relative; width: 640px; height: 794px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 640) / 640); }
  .page-course .wl-club .wl-club__clip { position: absolute; inset: 0; height: 794px; overflow: hidden; }
  .page-course .wl-club .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-club .wl-how__panels { display: block; position: absolute; inset: auto; left: 24px; top: 0px; width: 592px; height: 770px; border-radius: 20px; background: #f5f5f8; }
  .page-course .wl-club .wl-how__panels img { display: none; }
  .page-course .wl-club .wl-club__h { position: absolute; left: 54px; top: 30px; width: 216px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-club .wl-club__t { position: absolute; left: 54px; top: 122px; width: 467px; max-width: none; margin: 0; font-size: 18px; line-height: 25px; }
  .page-course .wl-club .wl-club__phone { position: absolute; left: 18px; top: 245px; width: 492px; height: 928px; max-width: none; margin: 0; }
  .page-course .wl-club .wl-club__screen { position: absolute; left: 72px; top: 276px; width: 395px; height: 574px; max-width: none; margin: 0; }
}

/* ── Закрытый клуб: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-club { position: relative; width: 480px; height: 682px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 480) / 480); }
  .page-course .wl-club .wl-club__clip { position: absolute; inset: 0; height: 682px; overflow: hidden; }
  .page-course .wl-club .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-club .wl-how__panels { display: block; position: absolute; inset: auto; left: 16px; top: 0px; width: 448px; height: 666px; border-radius: 20px; background: #f5f5f8; }
  .page-course .wl-club .wl-how__panels img { display: none; }
  .page-course .wl-club .wl-club__h { position: absolute; left: 36px; top: 20px; width: 146px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-club .wl-club__t { position: absolute; left: 36px; top: 83px; width: 355px; max-width: none; margin: 0; font-size: 14px; line-height: 20px; }
  .page-course .wl-club .wl-club__phone { position: absolute; left: 0px; top: 183px; width: 464px; height: 875px; max-width: none; margin: 0; }
  .page-course .wl-club .wl-club__screen { position: absolute; left: 50px; top: 211px; width: 374px; height: 574px; max-width: none; margin: 0; }
}

/* ── Закрытый клуб: канва 360 (телефон) ── */
@media (max-width: 479px) {
  .page-course .wl-club { position: relative; height: calc(608 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-club .wl-club__clip { position: absolute; inset: 0; height: calc(608 * var(--м)); overflow: hidden; }
  .page-course .wl-club .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-club .wl-how__panels { display: block; position: absolute; inset: auto; left: calc(16 * var(--м)); top: 0; width: calc(328 * var(--м)); height: calc(592 * var(--м)); border-radius: calc(20 * var(--м)); background: #f5f5f8; }
  .page-course .wl-club .wl-how__panels img { display: none; }
  .page-course .wl-club .wl-club__h { position: absolute; left: calc(36 * var(--м)); top: calc(20 * var(--м)); width: calc(146 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-club .wl-club__t { position: absolute; left: calc(36 * var(--м)); top: calc(87 * var(--м)); width: calc(288 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(20 * var(--м)); }
  .page-course .wl-club .wl-club__phone { position: absolute; left: calc(15 * var(--м)); top: calc(221 * var(--м)); width: calc(322 * var(--м)); height: calc(607 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-club .wl-club__screen { position: absolute; left: calc(50 * var(--м)); top: calc(240 * var(--м)); width: calc(261 * var(--м)); height: calc(574 * var(--м)); max-width: none; margin: 0; }
}

/* ── Отзывы и карта: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .reviews__top { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 189px; padding: 0; margin: 0; display: block; }
  .page-course .reviews__h { position: absolute; left: 24px; top: 75px; width: 373px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; }
  .page-course .reviews__count { position: absolute; left: 310px; top: 134px; margin: 0; font-size: 24px; line-height: 21.6px; }
  .page-course .reviews__nav { position: absolute; left: 801px; top: 95px; right: auto; bottom: auto; gap: 15px; }
  .page-course .rv-arrow { width: 60px; height: 60px; }
  .page-course .rv-arrow svg { width: 16px; height: 28px; }
  .page-course .ymaps--course { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 415px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .ymaps--course .ymaps__box { position: absolute; left: 55px; top: 18px; width: 831px; height: 646px; margin: 0; max-width: none; }
  .page-course .reviews .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
}

/* ── Отзывы и карта: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .reviews__top { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 189px; padding: 0; margin: 0; display: block; }
  .page-course .reviews__h { position: absolute; left: 24px; top: 75px; width: 373px; max-width: none; margin: 0; font-size: 40px; line-height: 40px; }
  .page-course .reviews__count { position: absolute; left: 310px; top: 134px; margin: 0; font-size: 24px; line-height: 21.6px; }
  .page-course .reviews__nav { position: absolute; left: 481px; top: 95px; right: auto; bottom: auto; gap: 15px; }
  .page-course .rv-arrow { width: 60px; height: 60px; }
  .page-course .rv-arrow svg { width: 16px; height: 28px; }
  .page-course .ymaps--course { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 382px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .ymaps--course .ymaps__box { position: absolute; left: 53px; top: 18px; width: 541px; height: 622px; margin: 0; max-width: none; }
  .page-course .reviews .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
}

/* ── Отзывы и карта: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .reviews__top { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 207px; padding: 0; margin: 0; display: block; }
  .page-course .reviews__h { position: absolute; left: 16px; top: 35px; width: 284px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .reviews__count { position: absolute; left: 377px; top: 166px; margin: 0; font-size: 24px; line-height: 21.6px; }
  .page-course .reviews__nav { position: absolute; left: 16px; top: 142px; right: auto; bottom: auto; gap: 10px; }
  .page-course .rv-arrow { width: 45px; height: 45px; }
  .page-course .rv-arrow svg { width: 12px; height: 21px; }
  .page-course .ymaps--course { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 406px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .ymaps--course .ymaps__box { position: absolute; left: 18px; top: 18px; width: 432px; height: 554px; margin: 0; max-width: none; }
  .page-course .reviews .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
}

/* ── Отзывы и карта: канва 360 ── */
@media (max-width: 479px) {
  .page-course .reviews__top { position: relative; height: calc(207 * var(--м)); padding: 0; margin: 0; display: block; }
  .page-course .reviews__h { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(284 * var(--м)); max-width: none; margin: 0; font-size: calc(30 * var(--м)); line-height: calc(36 * var(--м)); }
  .page-course .reviews__count { position: absolute; left: calc(257 * var(--м)); top: calc(166 * var(--м)); margin: 0; font-size: calc(24 * var(--м)); line-height: calc(21.6 * var(--м)); }
  .page-course .reviews__nav { position: absolute; left: calc(16 * var(--м)); top: calc(142 * var(--м)); right: auto; bottom: auto; gap: calc(10 * var(--м)); }
  .page-course .rv-arrow { width: calc(45 * var(--м)); height: calc(45 * var(--м)); }
  .page-course .rv-arrow svg { width: calc(12 * var(--м)); height: calc(21 * var(--м)); }
  .page-course .ymaps--course { position: relative; height: calc(476 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .ymaps--course .ymaps__box { position: absolute; left: calc(24 * var(--м)); top: calc(21 * var(--м)); width: calc(324 * var(--м)); height: calc(550 * var(--м)); margin: 0; max-width: none; }
  .page-course .reviews .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
}

/* ── Лента отзывов: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .reviews { width: 960px; zoom: calc(var(--вью, 960) / 960); padding: 0; }
  .page-course .rv-track { grid-auto-columns: 588px; gap: 24px; margin: 0; padding: 0 0 4px 24px; scroll-padding-left: 24px; }
  .page-course .rv { padding: 30px; border-radius: 20px; }
  .page-course .rv__top { gap: 30px; }
  .page-course .rv__ava { width: 150px; height: 150px; }
  .page-course .rv__name { font-size: 25px; line-height: 35px; }
  .page-course .rv__q { margin: 30px 0 0; }
  .page-course .rv__q span { font-size: 30px; line-height: 36px; }
  .page-course .rv__shot { width: 528px; height: auto; max-width: none; }
  .page-course .rv__role { width: 475px; height: 30px; font-size: 21px; line-height: 30.45px; }
}

/* ── Лента отзывов: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .reviews { width: 640px; zoom: calc(var(--вью, 640) / 640); padding: 0; }
  .page-course .rv-track { grid-auto-columns: 588px; gap: 24px; margin: 0; padding: 0 0 4px 24px; scroll-padding-left: 24px; }
  .page-course .rv { padding: 30px; border-radius: 20px; }
  .page-course .rv__top { gap: 30px; }
  .page-course .rv__ava { width: 150px; height: 150px; }
  .page-course .rv__name { font-size: 25px; line-height: 35px; }
  .page-course .rv__q { margin: 30px 0 0; }
  .page-course .rv__q span { font-size: 30px; line-height: 36px; }
  .page-course .rv__shot { width: 528px; height: auto; max-width: none; }
  .page-course .rv__role { width: 475px; height: 30px; font-size: 21px; line-height: 30.45px; }
}

/* ── Лента отзывов: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .reviews { width: 480px; zoom: calc(var(--вью, 480) / 480); padding: 0; }
  .page-course .rv-track { grid-auto-columns: 328px; gap: 10px; margin: 0; padding: 0 0 4px 16px; scroll-padding-left: 16px; }
  .page-course .rv { padding: 20px; border-radius: 20px; }
  .page-course .rv__top { gap: 16px; }
  .page-course .rv__ava { width: 80px; height: 80px; }
  .page-course .rv__name { font-size: 16px; line-height: 22.4px; }
  .page-course .rv__q { margin: 20px 0 0; }
  .page-course .rv__q span { font-size: 20px; line-height: 24px; }
  .page-course .rv__shot { width: 288px; height: auto; max-width: none; }
  .page-course .rv__role { width: 261px; height: 17px; font-size: 12px; line-height: 17.4px; }
}

/* ── Лента отзывов: канва 360 ── */
@media (max-width: 479px) {
  .page-course .reviews { padding: 0; }
  .page-course .rv-track { grid-auto-columns: calc(328 * var(--м)); gap: calc(10 * var(--м)); margin: 0; padding: 0 0 calc(4 * var(--м)) calc(16 * var(--м)); scroll-padding-left: calc(16 * var(--м)); }
  .page-course .rv { padding: calc(20 * var(--м)); border-radius: calc(20 * var(--м)); }
  .page-course .rv__top { gap: calc(16 * var(--м)); }
  .page-course .rv__ava { width: calc(80 * var(--м)); height: calc(80 * var(--м)); }
  .page-course .rv__name { font-size: calc(16 * var(--м)); line-height: calc(22.4 * var(--м)); }
  .page-course .rv__q { margin: calc(20 * var(--м)) 0 0; }
  .page-course .rv__q span { font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  .page-course .rv__shot { width: calc(288 * var(--м)); height: auto; max-width: none; }
  .page-course .rv__role { width: calc(259 * var(--м)); height: calc(17 * var(--м)); font-size: calc(12 * var(--м)); line-height: calc(17.4 * var(--м)); }
}

/* ── Резюме после обучения: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-cv { position: relative; width: 960px; height: 1205px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 960) / 960); }
  .page-course .wl-cv .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* На канвах Тильда не рисует ни лаймовую полосу поверх карточки, ни
     фиолетовую обводку — они есть только на десктопе. И заголовок там
     в одну строку. */
  .page-course .wl-cv__strip { display: none; }
  .page-course .wl-cv__card { box-shadow: none; }
  .page-course .wl-cv__title { white-space: nowrap; position: absolute; left: 197px; top: 75px; width: 552px; max-width: none; margin: 0; font-size: 40px; line-height: 48px; text-align: center; }
  .page-course .wl-cv__card { position: absolute; left: 24px; top: 158px; width: 912px; height: 1047px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__role { position: absolute; left: 30px; top: 30px; width: 407px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-cv__video { position: absolute; left: 652px; top: 35px; width: 220px; height: 220px; margin: 0; }
  .page-course .wl-cv__hl { position: absolute; left: 58px; top: 114px; width: 98px; height: 21px; }
  .page-course .wl-cv__sum { position: absolute; left: 30px; top: 117px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-cv__unit { position: absolute; left: 161px; top: 117px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-cv__h--stack { position: absolute; left: 30px; top: 173px; width: 157px; max-width: none; margin: 0; font-size: 24px; line-height: 29px; }
  .page-course .wl-cv__row { position: absolute; left: 30px; display: flex; gap: 7px; margin: 0; padding: 0; }
  .page-course .wl-cv__chip { height: 26px; padding: 0 7px; margin: 0; font-size: 18px; line-height: 19.8px; display: flex; align-items: center; }
  .page-course .wl-cv__row--1 { top: 217px; }
  .page-course .wl-cv__row--2 { top: 250px; }
  .page-course .wl-cv__row--3 { top: 283px; }
  .page-course .wl-cv__row--4 { top: 316px; }
  .page-course .wl-cv__h--do { position: absolute; left: 30px; top: 382px; width: 214px; max-width: none; margin: 0; font-size: 24px; line-height: 29px; }
  .page-course .wl-cv__do { position: absolute; left: 30px; top: 426px; right: auto; margin: 0; padding: 0; display: block; }
  .page-course .wl-cv__do li { position: relative; margin: 0 0 7.0px; padding-left: 25px; font-size: 18px; line-height: 25.2px; }
  .page-course .wl-cv__note { position: absolute; left: 10px; top: 912px; width: 892px; height: 125px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__note { padding: 20px 20px; font-size: 18px; line-height: 25px; }
}

/* ── Резюме после обучения: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-cv { position: relative; width: 640px; height: 1636px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 640) / 640); }
  .page-course .wl-cv .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* На канвах Тильда не рисует ни лаймовую полосу поверх карточки, ни
     фиолетовую обводку — они есть только на десктопе. И заголовок там
     в одну строку. */
  .page-course .wl-cv__strip { display: none; }
  .page-course .wl-cv__card { box-shadow: none; }
  .page-course .wl-cv__title { white-space: nowrap; position: absolute; left: 31px; top: 75px; width: 566px; max-width: none; margin: 0; font-size: 40px; line-height: 48px; text-align: center; }
  .page-course .wl-cv__card { position: absolute; left: 24px; top: 158px; width: 592px; height: 1478px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__role { position: absolute; left: 30px; top: 30px; width: 263px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-cv__video { position: absolute; left: 390px; top: 30px; width: 172px; height: 172px; margin: 0; }
  .page-course .wl-cv__hl { position: absolute; left: 58px; top: 150px; width: 98px; height: 21px; }
  .page-course .wl-cv__sum { position: absolute; left: 30px; top: 153px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-cv__unit { position: absolute; left: 161px; top: 153px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-cv__h--stack { position: absolute; left: 26px; top: 207px; width: 157px; max-width: none; margin: 0; font-size: 24px; line-height: 29px; }
  .page-course .wl-cv__row { position: absolute; left: 26px; display: flex; gap: 7px; margin: 0; padding: 0; }
  .page-course .wl-cv__chip { height: 26px; padding: 0 7px; margin: 0; font-size: 18px; line-height: 19.8px; display: flex; align-items: center; }
  .page-course .wl-cv__row--1 { top: 251px; }
  .page-course .wl-cv__row--2 { top: 284px; }
  .page-course .wl-cv__row--3 { top: 317px; }
  .page-course .wl-cv__row--4 { top: 350px; }
  .page-course .wl-cv__h--do { position: absolute; left: 30px; top: 416px; width: 272px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-cv__do { position: absolute; left: 30px; top: 467px; right: auto; margin: 0; padding: 0; display: block; }
  .page-course .wl-cv__do li { position: relative; margin: 0 0 31.8px; padding-left: 25px; font-size: 18px; line-height: 25.2px; }
  .page-course .wl-cv__note { position: absolute; left: 10px; top: 1240px; width: 572px; height: 210px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__note { padding: 25px 20px; font-size: 18px; line-height: 25px; }
}

/* ── Резюме после обучения: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-cv { position: relative; width: 480px; height: 1242px; padding: 0; margin: 0; overflow: hidden; zoom: calc(var(--вью, 480) / 480); }
  .page-course .wl-cv .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* На канвах Тильда не рисует ни лаймовую полосу поверх карточки, ни
     фиолетовую обводку — они есть только на десктопе. И заголовок там
     в одну строку. */
  .page-course .wl-cv__strip { display: none; }
  .page-course .wl-cv__card { box-shadow: none; }
  .page-course .wl-cv__title { white-space: nowrap; position: absolute; left: 58px; top: 33px; width: 357px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; text-align: center; }
  .page-course .wl-cv__card { position: absolute; left: 16px; top: 83px; width: 448px; height: 1159px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__role { position: absolute; left: 20px; top: 20px; width: 175px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-cv__video { position: absolute; left: 298px; top: 20px; width: 130px; height: 130px; margin: 0; }
  .page-course .wl-cv__hl { position: absolute; left: 42px; top: 102px; width: 79px; height: 18px; }
  .page-course .wl-cv__sum { position: absolute; left: 20px; top: 105px; margin: 0; font-size: 16px; line-height: 12.8px; }
  .page-course .wl-cv__unit { position: absolute; left: 126px; top: 105px; margin: 0; font-size: 16px; line-height: 12.8px; }
  .page-course .wl-cv__h--stack { position: absolute; left: 20px; top: 150px; width: 121px; max-width: none; margin: 0; font-size: 18px; line-height: 18px; }
  .page-course .wl-cv__row { position: absolute; left: 20px; display: flex; gap: 5px; margin: 0; padding: 0; }
  .page-course .wl-cv__chip { height: 18px; padding: 0 5px; margin: 0; font-size: 12px; line-height: 12px; display: flex; align-items: center; }
  .page-course .wl-cv__row--1 { top: 178px; }
  .page-course .wl-cv__row--2 { top: 201px; }
  .page-course .wl-cv__row--3 { top: 224px; }
  .page-course .wl-cv__row--4 { top: 247px; }
  .page-course .wl-cv__h--do { position: absolute; left: 20px; top: 295px; width: 165px; max-width: none; margin: 0; font-size: 18px; line-height: 20px; }
  .page-course .wl-cv__do { position: absolute; left: 20px; top: 325px; right: auto; margin: 0; padding: 0; display: block; }
  .page-course .wl-cv__do li { position: relative; margin: 0 0 27.4px; padding-left: 25px; font-size: 14px; line-height: 19.6px; }
  .page-course .wl-cv__note { position: absolute; left: 8px; top: 985px; width: 432px; height: 160px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__note { padding: 20px 12px; font-size: 14px; line-height: 20px; }
}

/* ── Сертификат: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-cert { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 1019px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-cert .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cert__h { position: absolute; left: 267px; top: 75px; width: 441px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; text-align: center; }
  .page-course .wl-cert__t { position: absolute; left: 276px; top: 203px; width: 408px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; text-align: center; }
  .page-course .wl-cert__shot { position: absolute; left: 24px; top: 400px; width: 912px; height: 593px; max-width: none; margin: 0; }
}

/* ── Сертификат: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-cert { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 803px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-cert .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cert__h { position: absolute; left: 103px; top: 75px; width: 442px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; text-align: center; }
  .page-course .wl-cert__t { position: absolute; left: 115px; top: 203px; width: 409px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; text-align: center; }
  .page-course .wl-cert__shot { position: absolute; left: 24px; top: 400px; width: 592px; height: 403px; max-width: none; margin: 0; }
}

/* ── Сертификат: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-cert { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 572px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-cert .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cert__h { position: absolute; left: 93px; top: 35px; width: 299px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; text-align: center; }
  .page-course .wl-cert__t { position: absolute; left: 80px; top: 122px; width: 320px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; text-align: center; }
  .page-course .wl-cert__shot { position: absolute; left: 16px; top: 268px; width: 448px; height: 305px; max-width: none; margin: 0; }
}

/* ── Сертификат: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-cert { position: relative; height: calc(496 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-cert .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cert__h { position: absolute; left: calc(33 * var(--м)); top: calc(35 * var(--м)); width: calc(299 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); text-align: center; }
  .page-course .wl-cert__t { position: absolute; left: calc(20 * var(--м)); top: calc(128 * var(--м)); width: calc(320 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); text-align: center; }
  .page-course .wl-cert__shot { position: absolute; left: calc(16 * var(--м)); top: calc(274 * var(--м)); width: calc(328 * var(--м)); height: calc(213 * var(--м)); max-width: none; margin: 0; }
}





/* ── Вопросы: заголовок: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-faq { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 158px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-faq .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-faq .wl-faq__title { position: absolute; left: 214px; top: 75px; width: 533px; max-width: none; margin: 0; font-size: 40px; line-height: 48px; text-align: center; }
}

/* ── Вопросы: заголовок: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-faq { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 157px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-faq .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-faq .wl-faq__title { position: absolute; left: 54px; top: 75px; width: 533px; max-width: none; margin: 0; font-size: 40px; line-height: 48px; text-align: center; }
}

/* ── Вопросы: заголовок: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-faq { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 88px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-faq .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-faq .wl-faq__title { position: absolute; left: 78px; top: 35px; width: 324px; max-width: none; margin: 0; font-size: 25px; line-height: 33px; text-align: center; }
}

/* ── Вопросы: заголовок: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-faq { position: relative; height: calc(88 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-faq .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-faq .wl-faq__title { position: absolute; left: calc(18 * var(--м)); top: calc(35 * var(--м)); width: calc(324 * var(--м)); max-width: none; margin: 0; font-size: calc(25 * var(--м)); line-height: calc(33 * var(--м)); text-align: center; }
}




/* ── Бесплатный старт: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-mini { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 449px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-mini .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__slab { position: absolute; left: 24px; top: 75px; width: 912px; max-width: none; height: 374px; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__h { position: absolute; left: 54px; top: 115px; width: 366px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-mini .wl-mini__t { position: absolute; left: 54px; top: 279px; width: 340px; max-width: none; margin: 0; font-size: 18px; line-height: 22px; }
  .page-course .wl-mini .wl-mini__btn { position: absolute; left: 54px; top: 353px; width: 332px; max-width: none; height: 60px; margin: 0; font-size: 18px; line-height: 27.9px; }
  .page-course .wl-mini .wl-mini__frame { position: absolute; left: 471px; top: 105px; width: 435px; max-width: none; height: 304px; margin: 0; }
  .page-course .wl-mini .wl-mini__video { position: absolute; left: 487px; top: 118px; width: 404px; max-width: none; height: 286px; margin: 0; }
}

/* ── Бесплатный старт: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-mini { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 861px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-mini .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__slab { position: absolute; left: 24px; top: 75px; width: 592px; max-width: none; height: 787px; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__h { position: absolute; left: 54px; top: 105px; width: 387px; max-width: none; margin: 0; font-size: 30px; line-height: 36px; }
  .page-course .wl-mini .wl-mini__t { position: absolute; left: 54px; top: 269px; width: 330px; max-width: none; margin: 0; font-size: 18px; line-height: 22px; }
  .page-course .wl-mini .wl-mini__btn { position: absolute; left: 54px; top: 348px; width: 387px; max-width: none; height: 60px; margin: 0; font-size: 18px; line-height: 27.9px; }
  .page-course .wl-mini .wl-mini__frame { position: absolute; left: 54px; top: 443px; width: 532px; max-width: none; height: 383px; margin: 0; }
  .page-course .wl-mini .wl-mini__video { position: absolute; left: 69px; top: 460px; width: 500px; max-width: none; height: 349px; margin: 0; }
}

/* ── Бесплатный старт: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-mini { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 613px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-mini .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__slab { position: absolute; left: 16px; top: 35px; width: 448px; max-width: none; height: 579px; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__h { position: absolute; left: 36px; top: 55px; width: 244px; max-width: none; margin: 0; font-size: 20px; line-height: 24px; }
  .page-course .wl-mini .wl-mini__t { position: absolute; left: 36px; top: 166px; width: 266px; max-width: none; margin: 0; font-size: 14px; line-height: 17px; }
  .page-course .wl-mini .wl-mini__btn { position: absolute; left: 36px; top: 220px; width: 288px; max-width: none; height: 50px; margin: 0; font-size: 14px; line-height: 21.7px; }
  .page-course .wl-mini .wl-mini__frame { position: absolute; left: 36px; top: 295px; width: 408px; max-width: none; height: 294px; margin: 0; }
  .page-course .wl-mini .wl-mini__video { position: absolute; left: 47px; top: 305px; width: 383px; max-width: none; height: 271px; margin: 0; }
}

/* ── Бесплатный старт: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-mini { position: relative; height: calc(530 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-mini .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__slab { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(328 * var(--м)); max-width: none; height: calc(496 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-mini .wl-mini__h { position: absolute; left: calc(31 * var(--м)); top: calc(55 * var(--м)); width: calc(240 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  .page-course .wl-mini .wl-mini__t { position: absolute; left: calc(31 * var(--м)); top: calc(166 * var(--м)); width: calc(279 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(17 * var(--м)); }
  .page-course .wl-mini .wl-mini__btn { position: absolute; left: calc(31 * var(--м)); top: calc(220 * var(--м)); width: calc(298 * var(--м)); max-width: none; height: calc(50 * var(--м)); margin: 0; font-size: calc(12 * var(--м)); line-height: calc(18.6 * var(--м)); }
  .page-course .wl-mini .wl-mini__frame { position: absolute; left: calc(31 * var(--м)); top: calc(290 * var(--м)); width: calc(298 * var(--м)); max-width: none; height: calc(209 * var(--м)); margin: 0; }
  .page-course .wl-mini .wl-mini__video { position: absolute; left: calc(41 * var(--м)); top: calc(299 * var(--м)); width: calc(278 * var(--м)); max-width: none; height: calc(196 * var(--м)); margin: 0; }
}




/* ── Остались вопросы: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-ask { position: relative; height: calc(911 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-ask .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-ask .wl-ask__slab { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(328 * var(--м)); max-width: none; height: calc(841 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-ask .wl-ask__h { position: absolute; left: calc(33 * var(--м)); top: calc(50 * var(--м)); width: calc(295 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(22 * var(--м)); text-align: center; }
  .page-course .wl-ask .wl-ask__form { position: absolute; left: calc(26 * var(--м)); top: calc(154 * var(--м)); width: calc(308 * var(--м)); max-width: none; height: calc(245 * var(--м)); margin: 0; }
  .page-course .wl-ask .wl-ask__btn { position: absolute; left: calc(26 * var(--м)); top: calc(402 * var(--м)); width: calc(308 * var(--м)); max-width: none; height: calc(50 * var(--м)); margin: 0; font-size: calc(12 * var(--м)); line-height: calc(18.6 * var(--м)); }
  .page-course .wl-ask .wl-ask__photo { position: absolute; left: calc(-6 * var(--м)); top: calc(461 * var(--м)); width: calc(373 * var(--м)); max-width: none; height: calc(410 * var(--м)); margin: 0; }
  .page-course .wl-ask .wl-ask__card { position: absolute; left: calc(67 * var(--м)); top: calc(767 * var(--м)); width: calc(226 * var(--м)); max-width: none; height: calc(99 * var(--м)); margin: 0; padding: 13px 15px; }
  .page-course .wl-ask .wl-ask__name { position: absolute; left: calc(None * var(--м)); top: calc(None * var(--м)); margin: 0; font-size: calc(18 * var(--м)); line-height: calc(19.8 * var(--м)); position: static; }
  .page-course .wl-ask .wl-ask__role { position: absolute; left: calc(None * var(--м)); top: calc(None * var(--м)); margin: 0; font-size: calc(14 * var(--м)); line-height: calc(18.2 * var(--м)); position: static; display: block; margin-top: 10px; }
}






/* ── Оплата: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-pay2 { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 524px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-pay2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank { position: absolute; left: 24px; top: 75px; width: 444px; max-width: none; height: 253px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 262px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__t { position: absolute; left: 30px; top: 75px; width: 292px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__banks { position: absolute; left: 30px; top: 163px; width: 330px; max-width: none; height: 50px; margin: 0; display: flex; flex-wrap: nowrap; gap: 5px; padding: 0; list-style: none; }
  /* Панель НАД рядом значков, как у боевой: низ на 10 выше кнопки, левый
     край на 130 левее её. Прежний top ставил её ниже ряда — точка отсчёта
     тех чисел была не та, а увидеть было нельзя: панель резал overflow. */
  .page-course .wl-pay2 .wl-tip--banks { position: absolute; left: -130px; right: auto; top: auto; bottom: calc(100% + 10px); width: 310px; max-width: none; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse { position: absolute; left: 492px; top: 75px; width: 444px; max-width: none; height: 199px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__pic { position: absolute; left: 300px; top: 0px; width: 144px; max-width: none; height: 158px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 270px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__t { position: absolute; left: 30px; top: 105px; width: 263px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__card--abroad { position: absolute; left: 492px; top: 298px; width: 444px; max-width: none; height: 226px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__bg { position: absolute; left: 0px; top: 52px; width: 444px; max-width: none; height: 155px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--abroad .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 325px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__t--abroad { position: absolute; left: 30px; top: 105px; width: 316px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__card--tax { position: absolute; left: 24px; top: 352px; width: 444px; max-width: none; height: 172px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__fns { position: absolute; left: 30px; top: 30px; width: 100px; max-width: none; height: 100px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__h--tax { position: absolute; left: 145px; top: 30px; width: 263px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__t--tax { position: absolute; left: 145px; top: 75px; width: 283px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
}

/* ── Оплата: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-pay2 { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 1020px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-pay2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank { position: absolute; left: 24px; top: 75px; width: 592px; max-width: none; height: 249px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 262px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__t { position: absolute; left: 30px; top: 75px; width: 305px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__banks { position: absolute; left: 30px; top: 159px; width: 330px; max-width: none; height: 50px; margin: 0; display: flex; flex-wrap: nowrap; gap: 5px; padding: 0; list-style: none; }
  .page-course .wl-pay2 .wl-tip--banks { position: absolute; left: -130px; right: auto; top: auto; bottom: calc(100% + 10px); width: 310px; max-width: none; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse { position: absolute; left: 24px; top: 351px; width: 592px; max-width: none; height: 226px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__pic { position: absolute; left: 383px; top: 0px; width: 185px; max-width: none; height: 208px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 277px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__t { position: absolute; left: 30px; top: 105px; width: 231px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__card--abroad { position: absolute; left: 24px; top: 601px; width: 592px; max-width: none; height: 226px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__bg { position: absolute; left: 9px; top: 0px; width: 574px; max-width: none; height: 226px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--abroad .wl-pay2__h { position: absolute; left: 30px; top: 30px; width: 321px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__t--abroad { position: absolute; left: 30px; top: 105px; width: 326px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-pay2 .wl-pay2__card--tax { position: absolute; left: 25px; top: 851px; width: 592px; max-width: none; height: 169px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__fns { position: absolute; left: 30px; top: 30px; width: 100px; max-width: none; height: 100px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__h--tax { position: absolute; left: 161px; top: 30px; width: 263px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-pay2 .wl-pay2__t--tax { position: absolute; left: 160px; top: 75px; width: 320px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
}

/* ── Оплата: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-pay2 { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 747px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-pay2 .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank { position: absolute; left: 16px; top: 35px; width: 448px; max-width: none; height: 208px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__h { position: absolute; left: 20px; top: 20px; width: 206px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-pay2 .wl-pay2__card--bank .wl-pay2__t { position: absolute; left: 20px; top: 61px; width: 220px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-pay2 .wl-pay2__banks { position: absolute; left: 20px; top: 128px; width: 330px; max-width: none; height: 50px; margin: 0; display: flex; flex-wrap: nowrap; gap: 5px; padding: 0; list-style: none; }
  .page-course .wl-pay2 .wl-tip--banks { position: absolute; left: -116px; right: auto; top: auto; bottom: calc(100% + 10px); width: 230px; max-width: none; margin: 0; padding: 12px 14px; font-size: 12px; line-height: 16.8px; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse { position: absolute; left: 16px; top: 253px; width: 448px; max-width: none; height: 159px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__pic { position: absolute; left: 296px; top: 0px; width: 132px; max-width: none; height: 149px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__h { position: absolute; left: 20px; top: 20px; width: 222px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-pay2 .wl-pay2__card--inhouse .wl-pay2__t { position: absolute; left: 20px; top: 87px; width: 203px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-pay2 .wl-pay2__card--abroad { position: absolute; left: 16px; top: 422px; width: 449px; max-width: none; height: 180px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__bg { position: absolute; left: 0px; top: 4px; width: 449px; max-width: none; height: 176px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__card--abroad .wl-pay2__h { position: absolute; left: 20px; top: 20px; width: 259px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-pay2 .wl-pay2__t--abroad { position: absolute; left: 20px; top: 87px; width: 246px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-pay2 .wl-pay2__card--tax { position: absolute; left: 16px; top: 612px; width: 448px; max-width: none; height: 134px; margin: 0; padding: 0; }
  .page-course .wl-pay2 .wl-pay2__fns { position: absolute; left: 20px; top: 20px; width: 84px; max-width: none; height: 84px; margin: 0; }
  .page-course .wl-pay2 .wl-pay2__h--tax { position: absolute; left: 124px; top: 21px; width: 207px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-pay2 .wl-pay2__t--tax { position: absolute; left: 124px; top: 66px; width: 240px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
}

/* ── Гарантия: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-guar { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 570px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-guar .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--back { position: absolute; left: 24px; top: 75px; width: 567px; max-width: none; height: 201px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__plate { position: absolute; left: 30px; top: 30px; width: 131px; max-width: none; height: 131px; margin: 0; }
  .page-course .wl-guar .wl-guar__icon { position: absolute; left: 56px; top: 56px; width: 80px; max-width: none; height: 80px; margin: 0; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__h { position: absolute; left: 191px; top: 30px; width: 296px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__t { position: absolute; left: 191px; top: 80px; width: 344px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__card--job { position: absolute; left: 24px; top: 300px; width: 567px; max-width: none; height: 270px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--job .wl-guar__h { position: absolute; left: 30px; top: 30px; width: 308px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-guar .wl-guar__t--wide { position: absolute; left: 30px; top: 80px; width: 488px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__link { position: absolute; left: 30px; top: 203px; width: 115px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__card--money { position: absolute; left: 615px; top: 75px; width: 322px; max-width: none; height: 495px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__coin--1 { position: absolute; left: 175px; top: 34px; width: 80px; max-width: none; height: 80px; margin: 0; }
  .page-course .wl-guar .wl-guar__coin--2 { position: absolute; left: 211px; top: 83px; width: 80px; max-width: none; height: 80px; margin: 0; }
  .page-course .wl-guar .wl-guar__h--money { position: absolute; left: 30px; top: 365px; width: 253px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
}

/* ── Гарантия: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-guar { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 836px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-guar .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--back { position: absolute; left: 24px; top: 75px; width: 592px; max-width: none; height: 201px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__plate { position: absolute; left: 30px; top: 30px; width: 131px; max-width: none; height: 131px; margin: 0; }
  .page-course .wl-guar .wl-guar__icon { position: absolute; left: 55px; top: 55px; width: 80px; max-width: none; height: 80px; margin: 0; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__h { position: absolute; left: 191px; top: 30px; width: 296px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__t { position: absolute; left: 191px; top: 75px; width: 344px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__card--job { position: absolute; left: 24px; top: 300px; width: 592px; max-width: none; height: 270px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--job .wl-guar__h { position: absolute; left: 30px; top: 30px; width: 309px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
  .page-course .wl-guar .wl-guar__t--wide { position: absolute; left: 30px; top: 80px; width: 492px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__link { position: absolute; left: 30px; top: 203px; width: 115px; max-width: none; margin: 0; font-size: 18px; line-height: 27px; }
  .page-course .wl-guar .wl-guar__card--money { position: absolute; left: 24px; top: 594px; width: 592px; max-width: none; height: 243px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__coin--1 { position: absolute; left: 410px; top: 23px; width: 85px; max-width: none; height: 86px; margin: 0; }
  .page-course .wl-guar .wl-guar__coin--2 { position: absolute; left: 461px; top: 49px; width: 85px; max-width: none; height: 85px; margin: 0; }
  .page-course .wl-guar .wl-guar__h--money { position: absolute; left: 30px; top: 113px; width: 277px; max-width: none; margin: 0; font-size: 25px; line-height: 30px; }
}

/* ── Гарантия: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-guar { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 592px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-guar .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--back { position: absolute; left: 16px; top: 35px; width: 448px; max-width: none; height: 154px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__plate { position: absolute; left: 20px; top: 20px; width: 104px; max-width: none; height: 104px; margin: 0; }
  .page-course .wl-guar .wl-guar__icon { position: absolute; left: 42px; top: 42px; width: 60px; max-width: none; height: 60px; margin: 0; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__h { position: absolute; left: 144px; top: 20px; width: 232px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__t { position: absolute; left: 144px; top: 61px; width: 260px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-guar .wl-guar__card--job { position: absolute; left: 16px; top: 199px; width: 448px; max-width: none; height: 206px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--job .wl-guar__h { position: absolute; left: 20px; top: 20px; width: 242px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
  .page-course .wl-guar .wl-guar__t--wide { position: absolute; left: 20px; top: 61px; width: 374px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-guar .wl-guar__link { position: absolute; left: 20px; top: 155px; width: 88px; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
  .page-course .wl-guar .wl-guar__card--money { position: absolute; left: 16px; top: 415px; width: 448px; max-width: none; height: 177px; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__coin--1 { position: absolute; left: 314px; top: 15px; width: 63px; max-width: none; height: 64px; margin: 0; }
  .page-course .wl-guar .wl-guar__coin--2 { position: absolute; left: 352px; top: 34px; width: 63px; max-width: none; height: 63px; margin: 0; }
  .page-course .wl-guar .wl-guar__h--money { position: absolute; left: 20px; top: 69px; width: 222px; max-width: none; margin: 0; font-size: 20px; line-height: 26px; }
}

/* ── Гарантия: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-guar { position: relative; height: calc(704 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-guar .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--back { position: absolute; left: calc(16 * var(--м)); top: calc(35 * var(--м)); width: calc(328 * var(--м)); max-width: none; height: calc(188 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__plate { position: absolute; left: calc(20 * var(--м)); top: calc(20 * var(--м)); width: calc(60 * var(--м)); max-width: none; height: calc(60 * var(--м)); margin: 0; }
  .page-course .wl-guar .wl-guar__icon { position: absolute; left: calc(33 * var(--м)); top: calc(33 * var(--м)); width: calc(35 * var(--м)); max-width: none; height: calc(35 * var(--м)); margin: 0; }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__h { position: absolute; left: calc(100 * var(--м)); top: calc(24 * var(--м)); width: calc(149 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-guar .wl-guar__card--back .wl-guar__t { position: absolute; left: calc(20 * var(--м)); top: calc(95 * var(--м)); width: calc(260 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); }
  .page-course .wl-guar .wl-guar__card--job { position: absolute; left: calc(16 * var(--м)); top: calc(233 * var(--м)); width: calc(328 * var(--м)); max-width: none; height: calc(248 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__card--job .wl-guar__h { position: absolute; left: calc(20 * var(--м)); top: calc(20 * var(--м)); width: calc(254 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
  .page-course .wl-guar .wl-guar__t--wide { position: absolute; left: calc(20 * var(--м)); top: calc(61 * var(--м)); width: calc(265 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); }
  .page-course .wl-guar .wl-guar__link { position: absolute; left: calc(20 * var(--м)); top: calc(197 * var(--м)); width: calc(87 * var(--м)); max-width: none; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(21 * var(--м)); }
  .page-course .wl-guar .wl-guar__card--money { position: absolute; left: calc(16 * var(--м)); top: calc(491 * var(--м)); width: calc(329 * var(--м)); max-width: none; height: calc(213 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-guar .wl-guar__coin--1 { position: absolute; left: calc(211 * var(--м)); top: calc(20 * var(--м)); width: calc(65 * var(--м)); max-width: none; height: calc(65 * var(--м)); margin: 0; }
  .page-course .wl-guar .wl-guar__coin--2 { position: absolute; left: calc(246 * var(--м)); top: calc(50 * var(--м)); width: calc(65 * var(--м)); max-width: none; height: calc(65 * var(--м)); margin: 0; }
  .page-course .wl-guar .wl-guar__h--money { position: absolute; left: calc(20 * var(--м)); top: calc(105 * var(--м)); width: calc(219 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(26 * var(--м)); }
}

/* ── Резюме после обучения: канва 360 (телефон) ── */
@media (max-width: 479px) {
  .page-course .wl-cv { position: relative; height: calc(1490 * var(--м)); min-height: 0; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-cv .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* На канвах Тильда не рисует ни лаймовую полосу поверх карточки, ни
     фиолетовую обводку — они есть только на десктопе. И заголовок там
     в одну строку. */
  .page-course .wl-cv__strip { display: none; }
  .page-course .wl-cv__card { box-shadow: none; }
  .page-course .wl-cv__title { white-space: nowrap; position: absolute; left: calc(79 * var(--м)); top: calc(35 * var(--м)); width: calc(203 * var(--м)); max-width: none; margin: 0; font-size: calc(25 * var(--м)); line-height: calc(28 * var(--м)); text-align: center; }
  .page-course .wl-cv__card { position: absolute; left: calc(16 * var(--м)); top: calc(111 * var(--м)); width: calc(328 * var(--м)); height: calc(1379 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .page-course .wl-cv__role { position: absolute; left: calc(20 * var(--м)); top: calc(20 * var(--м)); width: calc(155 * var(--м)); max-width: none; margin: 0; font-size: calc(20 * var(--м)); line-height: calc(24 * var(--м)); }
  .page-course .wl-cv__video { position: absolute; left: calc(208 * var(--м)); top: calc(20 * var(--м)); width: calc(100 * var(--м)); height: calc(100 * var(--м)); margin: 0; }
  .page-course .wl-cv__hl { position: absolute; left: calc(42 * var(--м)); top: calc(108 * var(--м)); width: calc(79 * var(--м)); height: calc(18 * var(--м)); }
  .page-course .wl-cv__sum { position: absolute; left: calc(20 * var(--м)); top: calc(111 * var(--м)); margin: 0; font-size: calc(16 * var(--м)); line-height: calc(12.8 * var(--м)); }
  .page-course .wl-cv__unit { position: absolute; left: calc(125 * var(--м)); top: calc(111 * var(--м)); margin: 0; font-size: calc(16 * var(--м)); line-height: calc(12.8 * var(--м)); }
  .page-course .wl-cv__h--stack { position: absolute; left: calc(20 * var(--м)); top: calc(156 * var(--м)); width: calc(121 * var(--м)); max-width: none; margin: 0; font-size: calc(18 * var(--м)); line-height: calc(18 * var(--м)); }
  .page-course .wl-cv__row { position: absolute; left: calc(20 * var(--м)); display: flex; gap: calc(5 * var(--м)); margin: 0; padding: 0; }
  .page-course .wl-cv__chip { height: calc(18 * var(--м)); padding: 0 calc(5 * var(--м)); margin: 0; font-size: calc(12 * var(--м)); line-height: calc(12 * var(--м)); display: flex; align-items: center; }
  .page-course .wl-cv__row--1 { top: calc(184 * var(--м)); }
  .page-course .wl-cv__row--2 { top: calc(207 * var(--м)); }
  .page-course .wl-cv__row--3 { top: calc(230 * var(--м)); }
  .page-course .wl-cv__row--4 { top: calc(253 * var(--м)); }
  .page-course .wl-cv__h--do { position: absolute; left: calc(20 * var(--м)); top: calc(324 * var(--м)); width: calc(165 * var(--м)); max-width: none; margin: 0; font-size: calc(18 * var(--м)); line-height: calc(18 * var(--м)); }
  .page-course .wl-cv__do { position: absolute; left: calc(20 * var(--м)); top: calc(352 * var(--м)); right: auto; margin: 0; padding: 0; display: block; }
  .page-course .wl-cv__do li { position: relative; margin: 0 0 calc(8 * var(--м)); padding-left: calc(25 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(19.6 * var(--м)); }
  .page-course .wl-cv__note { position: absolute; left: calc(10 * var(--м)); top: calc(1193 * var(--м)); width: calc(308 * var(--м)); height: calc(176 * var(--м)); max-width: none; margin: 0; padding: calc(20 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(18 * var(--м)); }
}

/* ── Форматы участия: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-plans { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 2454px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-plans .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plans__title { position: absolute; left: 272px; top: 117px; width: 417px; max-width: none; margin: 0; font-size: 50px; line-height: 55px; padding: 0; text-align: left; }
  .page-course .wl-plan--1 { position: absolute; left: 87px; top: 207px; width: 587px; height: 1095px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan--2 { position: absolute; left: 86px; top: 1326px; width: 588px; height: 1129px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan__name { position: absolute; left: 30px; top: 40px; width: 473px; max-width: none; margin: 0; font-size: 40px; line-height: 44px; }
  .page-course .wl-plan--2 .wl-plan__name { width: 488px; }
  .page-course .wl-plan__badge { position: absolute; left: 484px; top: 40px; width: 74px; height: 85px; margin: 0; }
  .page-course .wl-plan__chips { position: absolute; left: 30px; display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .page-course .wl-plan__chip { height: 28px; padding: 0 8px; margin: 0; font-size: 18px; line-height: 18px; display: flex; align-items: center; justify-content: center; width: auto; }
  .page-course .wl-plan--1 .wl-plan__chips--1 { top: 178px; }
  .page-course .wl-plan--1 .wl-plan__chips--2 { top: 216px; }
  .page-course .wl-plan--2 .wl-plan__chips--1 { top: 178px; }
  .page-course .wl-plan--2 .wl-plan__chips--2 { top: 214px; }
  .page-course .wl-plan--2 .wl-plan__chips--3 { top: 250px; }
  .page-course .wl-plan__list { position: absolute; left: 30px; margin: 0; padding: 0; list-style: none; width: 473px; }
  .page-course .wl-plan--1 .wl-plan__list { top: 269px; }
  .page-course .wl-plan--2 .wl-plan__list { top: 303px; }
  .page-course .wl-plan__list > li { position: relative; margin: 0 0 10px; padding-left: 25px; font-size: 20px; line-height: 26px; }
  .page-course .wl-plan__old { position: absolute; left: 30px; margin: 0; font-size: 24px; line-height: 19px; }
  .page-course .wl-plan--1 .wl-plan__old { top: 597px; }
  .page-course .wl-plan--2 .wl-plan__old { top: 631px; }
  .page-course .wl-plan__price { position: absolute; left: 30px; margin: 0; font-size: 60px; line-height: 60px; }
  .page-course .wl-plan--1 .wl-plan__price { top: 621px; }
  .page-course .wl-plan--2 .wl-plan__price { top: 655px; }
  .page-course .wl-plan__per { position: absolute; margin: 0; font-size: 24px; line-height: 19px; }
  .page-course .wl-plan--1 .wl-plan__per { left: 296px; top: 642px; }
  .page-course .wl-plan--2 .wl-plan__per { left: 285px; top: 676px; }
  .page-course .wl-plan__foot { position: absolute; left: 30px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-plan--1 .wl-plan__foot { top: 686px; }
  .page-course .wl-plan--2 .wl-plan__foot { top: 720px; }
  .page-course .wl-plan__btn { position: absolute; left: 30px; width: 528px; height: 60px; max-width: none; margin: 0; }
  .page-course .wl-plan--1 .wl-plan__btn--blue { top: 752px; }
  .page-course .wl-plan--2 .wl-plan__btn--blue { top: 786px; }
  .page-course .wl-plan--1 .wl-plan__btn--lime { top: 822px; }
  .page-course .wl-plan--2 .wl-plan__btn--lime { top: 856px; }
  .page-course .wl-plan--1 .wl-plan__btn--pale { top: 892px; }
  .page-course .wl-plan--2 .wl-plan__btn--pale { top: 926px; }
  /* Ширина контейнеру обязательна: он абсолютный и без неё сжимается в ноль,
     а у картинок max-width: 100% — от нуля они и выходили нулевыми. */
  .page-course .wl-plan__pay { position: absolute; left: 30px; top: 0; display: block; margin: 0; width: 400px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 982px; width: 304px; max-width: none; height: 22px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 1016px; width: 304px; max-width: none; height: 22px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 1009px; width: 364px; max-width: none; height: 22px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 1043px; width: 364px; max-width: none; height: 22px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 1036px; width: 342px; max-width: none; height: 24px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 1069px; width: 342px; max-width: none; height: 24px; }
}

/* ── Форматы участия: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-plans { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 2456px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-plans .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plans__title { position: absolute; left: 112px; top: 117px; width: 417px; max-width: none; margin: 0; font-size: 50px; line-height: 55px; padding: 0; text-align: left; }
  .page-course .wl-plan--1 { position: absolute; left: 24px; top: 207px; width: 592px; height: 1095px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan--2 { position: absolute; left: 24px; top: 1326px; width: 592px; height: 1129px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan__name { position: absolute; left: 30px; top: 40px; width: 460px; max-width: none; margin: 0; font-size: 40px; line-height: 44px; }
  .page-course .wl-plan--2 .wl-plan__name { width: 488px; }
  .page-course .wl-plan__badge { position: absolute; left: 484px; top: 40px; width: 74px; height: 85px; margin: 0; }
  .page-course .wl-plan__chips { position: absolute; left: 30px; display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .page-course .wl-plan__chip { height: 28px; padding: 0 8px; margin: 0; font-size: 18px; line-height: 18px; display: flex; align-items: center; justify-content: center; width: auto; }
  .page-course .wl-plan--1 .wl-plan__chips--1 { top: 178px; }
  .page-course .wl-plan--1 .wl-plan__chips--2 { top: 216px; }
  .page-course .wl-plan--2 .wl-plan__chips--1 { top: 178px; }
  .page-course .wl-plan--2 .wl-plan__chips--2 { top: 214px; }
  .page-course .wl-plan--2 .wl-plan__chips--3 { top: 250px; }
  .page-course .wl-plan__list { position: absolute; left: 29px; margin: 0; padding: 0; list-style: none; width: 460px; }
  .page-course .wl-plan--1 .wl-plan__list { top: 269px; }
  .page-course .wl-plan--2 .wl-plan__list { top: 303px; }
  .page-course .wl-plan__list > li { position: relative; margin: 0 0 10px; padding-left: 25px; font-size: 20px; line-height: 26px; }
  .page-course .wl-plan__old { position: absolute; left: 30px; margin: 0; font-size: 24px; line-height: 19px; }
  .page-course .wl-plan--1 .wl-plan__old { top: 597px; }
  .page-course .wl-plan--2 .wl-plan__old { top: 631px; }
  .page-course .wl-plan__price { position: absolute; left: 30px; margin: 0; font-size: 60px; line-height: 60px; }
  .page-course .wl-plan--1 .wl-plan__price { top: 621px; }
  .page-course .wl-plan--2 .wl-plan__price { top: 655px; }
  .page-course .wl-plan__per { position: absolute; margin: 0; font-size: 24px; line-height: 19px; }
  .page-course .wl-plan--1 .wl-plan__per { left: 296px; top: 642px; }
  .page-course .wl-plan--2 .wl-plan__per { left: 285px; top: 676px; }
  .page-course .wl-plan__foot { position: absolute; left: 30px; margin: 0; font-size: 20px; line-height: 16px; }
  .page-course .wl-plan--1 .wl-plan__foot { top: 686px; }
  .page-course .wl-plan--2 .wl-plan__foot { top: 720px; }
  .page-course .wl-plan__btn { position: absolute; left: 30px; width: 528px; height: 60px; max-width: none; margin: 0; }
  .page-course .wl-plan--1 .wl-plan__btn--blue { top: 752px; }
  .page-course .wl-plan--2 .wl-plan__btn--blue { top: 786px; }
  .page-course .wl-plan--1 .wl-plan__btn--lime { top: 822px; }
  .page-course .wl-plan--2 .wl-plan__btn--lime { top: 856px; }
  .page-course .wl-plan--1 .wl-plan__btn--pale { top: 892px; }
  .page-course .wl-plan--2 .wl-plan__btn--pale { top: 926px; }
  /* Ширина контейнеру обязательна: он абсолютный и без неё сжимается в ноль,
     а у картинок max-width: 100% — от нуля они и выходили нулевыми. */
  .page-course .wl-plan__pay { position: absolute; left: 30px; top: 0; display: block; margin: 0; width: 400px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 982px; width: 304px; max-width: none; height: 22px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 1016px; width: 304px; max-width: none; height: 22px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 1009px; width: 364px; max-width: none; height: 22px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 1043px; width: 364px; max-width: none; height: 22px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 1036px; width: 342px; max-width: none; height: 24px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 1069px; width: 342px; max-width: none; height: 24px; }
}

/* ── Форматы участия: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-plans { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 1793px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-plans .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plans__title { position: absolute; left: 136px; top: 60px; width: 208px; max-width: none; margin: 0; font-size: 25px; line-height: 28px; padding: 0; text-align: left; }
  .page-course .wl-plan--1 { position: absolute; left: 76px; top: 113px; width: 328px; height: 809px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan--2 { position: absolute; left: 76px; top: 932px; width: 328px; height: 862px; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan__name { position: absolute; left: 20px; top: 25px; width: 281px; max-width: none; margin: 0; font-size: 25px; line-height: 27.5px; }
  .page-course .wl-plan--2 .wl-plan__name { width: 237px; }
  .page-course .wl-plan__badge { position: absolute; left: 268px; top: 25px; width: 52px; height: 60px; margin: 0; }
  .page-course .wl-plan__chips { position: absolute; left: 20px; display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
  .page-course .wl-plan__chip { height: 20px; padding: 0 8px; margin: 0; font-size: 14px; line-height: 14px; display: flex; align-items: center; justify-content: center; width: auto; }
  .page-course .wl-plan--1 .wl-plan__chips--1 { top: 112px; }
  .page-course .wl-plan--1 .wl-plan__chips--2 { top: 137px; }
  .page-course .wl-plan--2 .wl-plan__chips--1 { top: 112px; }
  .page-course .wl-plan--2 .wl-plan__chips--2 { top: 137px; }
  .page-course .wl-plan--2 .wl-plan__chips--3 { top: 162px; }
  .page-course .wl-plan__list { position: absolute; left: 20px; margin: 0; padding: 0; list-style: none; width: 281px; }
  .page-course .wl-plan--1 .wl-plan__list { top: 172px; }
  .page-course .wl-plan--2 .wl-plan__list { top: 190px; }
  .page-course .wl-plan__list > li { position: relative; margin: 0 0 7px; padding-left: 25px; font-size: 14px; line-height: 18.2px; }
  .page-course .wl-plan__old { position: absolute; left: 20px; margin: 0; font-size: 14px; line-height: 11.2px; }
  .page-course .wl-plan--1 .wl-plan__old { top: 441px; }
  .page-course .wl-plan--2 .wl-plan__old { top: 466px; }
  .page-course .wl-plan__price { position: absolute; left: 20px; margin: 0; font-size: 40px; line-height: 40px; }
  .page-course .wl-plan--1 .wl-plan__price { top: 454px; }
  .page-course .wl-plan--2 .wl-plan__price { top: 479px; }
  .page-course .wl-plan__per { position: absolute; margin: 0; font-size: 14px; line-height: 11.2px; }
  .page-course .wl-plan--1 .wl-plan__per { left: 193px; top: 469px; }
  .page-course .wl-plan--2 .wl-plan__per { left: 193px; top: 494px; }
  .page-course .wl-plan__foot { position: absolute; left: 20px; margin: 0; font-size: 12px; line-height: 9.6px; }
  .page-course .wl-plan--1 .wl-plan__foot { top: 496px; }
  .page-course .wl-plan--2 .wl-plan__foot { top: 521px; }
  .page-course .wl-plan__btn { position: absolute; left: 20px; width: 288px; height: 50px; max-width: none; margin: 0; }
  .page-course .wl-plan--1 .wl-plan__btn--blue { top: 546px; }
  .page-course .wl-plan--2 .wl-plan__btn--blue { top: 571px; }
  .page-course .wl-plan--1 .wl-plan__btn--lime { top: 601px; }
  .page-course .wl-plan--2 .wl-plan__btn--lime { top: 626px; }
  .page-course .wl-plan--1 .wl-plan__btn--pale { top: 656px; }
  .page-course .wl-plan--2 .wl-plan__btn--pale { top: 681px; }
  .page-course .wl-plan__pay { position: absolute; left: 20px; top: 0; display: block; margin: 0; width: 300px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 726px; width: 233px; max-width: none; height: 17px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: 751px; width: 233px; max-width: none; height: 17px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 746px; width: 280px; max-width: none; height: 17px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: 771px; width: 280px; max-width: none; height: 17px; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 766px; width: 257px; max-width: none; height: 18px; }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: 791px; width: 257px; max-width: none; height: 18px; }
}

/* ── Форматы участия: канва 360 ── */
@media (max-width: 479px) {
  .page-course .wl-plans { position: relative; height: calc(1807 * var(--м)); padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-plans .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plans__title { position: absolute; left: calc(76 * var(--м)); top: calc(65 * var(--м)); width: calc(209 * var(--м)); max-width: none; margin: 0; font-size: calc(25 * var(--м)); line-height: calc(25 * var(--м)); padding: 0; text-align: left; }
  .page-course .wl-plan--1 { position: absolute; left: calc(16 * var(--м)); top: calc(110 * var(--м)); width: calc(328 * var(--м)); height: calc(808 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan--2 { position: absolute; left: calc(16 * var(--м)); top: calc(928 * var(--м)); width: calc(328 * var(--м)); height: calc(862 * var(--м)); max-width: none; margin: 0; padding: 0; }
  .page-course .wl-plan__name { position: absolute; left: calc(20 * var(--м)); top: calc(25 * var(--м)); width: calc(273 * var(--м)); max-width: none; margin: 0; font-size: calc(25 * var(--м)); line-height: calc(27.5 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__name { width: calc(237 * var(--м)); }
  .page-course .wl-plan__badge { position: absolute; left: calc(268 * var(--м)); top: calc(25 * var(--м)); width: calc(52 * var(--м)); height: calc(60 * var(--м)); margin: 0; }
  .page-course .wl-plan__chips { position: absolute; left: calc(20 * var(--м)); display: flex; gap: calc(5 * var(--м)); margin: 0; padding: 0; list-style: none; }
  .page-course .wl-plan__chip { height: calc(20 * var(--м)); padding: 0 calc(8 * var(--м)); margin: 0; font-size: calc(14 * var(--м)); line-height: calc(14 * var(--м)); display: flex; align-items: center; justify-content: center; width: auto; }
  .page-course .wl-plan--1 .wl-plan__chips--1 { top: calc(111 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__chips--2 { top: calc(136 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__chips--1 { top: calc(111 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__chips--2 { top: calc(136 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__chips--3 { top: calc(161 * var(--м)); }
  .page-course .wl-plan__list { position: absolute; left: calc(20 * var(--м)); margin: 0; padding: 0; list-style: none; width: calc(273 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__list { top: calc(172 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__list { top: calc(190 * var(--м)); }
  .page-course .wl-plan__list > li { position: relative; margin: 0 0 calc(7 * var(--м)); padding-left: calc(25 * var(--м)); font-size: calc(14 * var(--м)); line-height: calc(18.2 * var(--м)); }
  .page-course .wl-plan__old { position: absolute; left: calc(20 * var(--м)); margin: 0; font-size: calc(14 * var(--м)); line-height: calc(11.2 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__old { top: calc(440 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__old { top: calc(465 * var(--м)); }
  .page-course .wl-plan__price { position: absolute; left: calc(20 * var(--м)); margin: 0; font-size: calc(40 * var(--м)); line-height: calc(40 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__price { top: calc(453 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__price { top: calc(478 * var(--м)); }
  .page-course .wl-plan__per { position: absolute; margin: 0; font-size: calc(14 * var(--м)); line-height: calc(11.2 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__per { left: calc(193 * var(--м)); top: calc(468 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__per { left: calc(193 * var(--м)); top: calc(493 * var(--м)); }
  .page-course .wl-plan__foot { position: absolute; left: calc(20 * var(--м)); margin: 0; font-size: calc(12 * var(--м)); line-height: calc(9.6 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__foot { top: calc(495 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__foot { top: calc(520 * var(--м)); }
  .page-course .wl-plan__btn { position: absolute; left: calc(20 * var(--м)); width: calc(288 * var(--м)); height: calc(50 * var(--м)); max-width: none; margin: 0; }
  .page-course .wl-plan--1 .wl-plan__btn--blue { top: calc(545 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__btn--blue { top: calc(570 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__btn--lime { top: calc(600 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__btn--lime { top: calc(625 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__btn--pale { top: calc(655 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__btn--pale { top: calc(680 * var(--м)); }
  .page-course .wl-plan__pay { position: absolute; left: calc(20 * var(--м)); top: 0; display: block; margin: 0; }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: calc(725 * var(--м)); width: calc(233 * var(--м)); height: calc(17 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(1) { position: absolute; left: 0; top: calc(750 * var(--м)); width: calc(233 * var(--м)); height: calc(17 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: calc(745 * var(--м)); width: calc(280 * var(--м)); height: calc(17 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(2) { position: absolute; left: 0; top: calc(770 * var(--м)); width: calc(280 * var(--м)); height: calc(17 * var(--м)); }
  .page-course .wl-plan--1 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: calc(765 * var(--м)); width: calc(257 * var(--м)); height: calc(18 * var(--м)); }
  .page-course .wl-plan--2 .wl-plan__pay img:nth-child(3) { position: absolute; left: 0; top: calc(790 * var(--м)); width: calc(257 * var(--м)); height: calc(18 * var(--м)); }
}

/* ── Форматы участия у Linux: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-linux .wl-plans { height: 1302px; }
  .page-linux .wl-plans__title { left: 287px; top: 117px; width: 385px; font-size: 50px; line-height: 55px; }
  .page-linux .wl-plan--1 { left: 187px; top: 207px; width: 587px; height: 1095px; }
}

/* ── Форматы участия у Linux: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-linux .wl-plans { height: 1302px; }
  .page-linux .wl-plans__title { left: 128px; top: 117px; width: 385px; font-size: 50px; line-height: 55px; }
  .page-linux .wl-plan--1 { left: 24px; top: 207px; width: 592px; height: 1095px; }
}

/* ── Форматы участия у Linux: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-linux .wl-plans { height: 921px; }
  .page-linux .wl-plans__title { left: 136px; top: 60px; width: 192px; font-size: 25px; line-height: 28px; }
  .page-linux .wl-plan--1 { left: 76px; top: 113px; width: 328px; height: 809px; }
}

/* ── Форматы участия у Linux: канва 360 ── */
@media (max-width: 479px) {
  .page-linux .wl-plans { height: calc(918 * var(--м)); }
  .page-linux .wl-plans__title { left: calc(76 * var(--м)); top: calc(65 * var(--м)); width: calc(192 * var(--м)); font-size: calc(25 * var(--м)); line-height: calc(25 * var(--м)); }
  .page-linux .wl-plan--1 { left: calc(16 * var(--м)); top: calc(110 * var(--м)); width: calc(328 * var(--м)); height: calc(808 * var(--м)); }
}

/* ── Резюме у Linux: канва 360 ── */
@media (max-width: 479px) {
  .page-course.page-linux .wl-cv { height: calc(1273 * var(--м)); min-height: 0; }
  .page-course.page-linux .wl-cv__card { height: calc(1162 * var(--м)); }
  /* У Linux стек короче на один ряд, поэтому всё ниже поднято. */
  .page-course.page-linux .wl-cv__h--do { top: calc(301 * var(--м)); }
  .page-course.page-linux .wl-cv__do { top: calc(329 * var(--м)); }
  .page-course.page-linux .wl-cv__note { top: calc(976 * var(--м)); }
}

/* ── Шапка программы у Linux: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-course.page-linux .wl-program .wl-program__head { height: calc(267 * var(--п)); margin-top: calc(75 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__fresh { left: calc(500 * var(--п)); top: calc(31 * var(--п)); width: calc(332 * var(--п)); font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__h { left: calc(239 * var(--п)); top: calc(47 * var(--п)); width: calc(482 * var(--п)); font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__note { left: calc(333 * var(--п)); top: calc(141 * var(--п)); width: calc(317 * var(--п)); font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li { height: calc(24 * var(--п)); font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(227 * var(--п)); top: calc(208 * var(--п)); width: calc(102 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(334 * var(--п)); top: calc(208 * var(--п)); width: calc(167 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(506 * var(--п)); top: calc(208 * var(--п)); width: calc(227 * var(--п)); }
}

/* ── Шапка программы у Linux: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-course.page-linux .wl-program .wl-program__head { height: calc(267 * var(--п)); margin-top: calc(75 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__fresh { left: calc(260 * var(--п)); top: calc(27 * var(--п)); width: calc(332 * var(--п)); font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__h { left: calc(79 * var(--п)); top: calc(47 * var(--п)); width: calc(482 * var(--п)); font-size: calc(30 * var(--п)); line-height: calc(36 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__note { left: calc(174 * var(--п)); top: calc(141 * var(--п)); width: calc(312 * var(--п)); font-size: calc(18 * var(--п)); line-height: calc(27 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li { height: calc(24 * var(--п)); font-size: calc(18 * var(--п)); line-height: calc(18 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(67 * var(--п)); top: calc(208 * var(--п)); width: calc(102 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(174 * var(--п)); top: calc(208 * var(--п)); width: calc(167 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(346 * var(--п)); top: calc(208 * var(--п)); width: calc(227 * var(--п)); }
}

/* ── Шапка программы у Linux: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-course.page-linux .wl-program .wl-program__head { height: calc(209 * var(--п)); margin-top: calc(35 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__fresh { left: calc(190 * var(--п)); top: calc(30 * var(--п)); width: calc(255 * var(--п)); font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__h { left: calc(79 * var(--п)); top: calc(45 * var(--п)); width: calc(299 * var(--п)); font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__note { left: calc(122 * var(--п)); top: calc(112 * var(--п)); width: calc(256 * var(--п)); font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li { height: calc(24 * var(--п)); font-size: calc(14 * var(--п)); line-height: calc(14 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(45 * var(--п)); top: calc(165 * var(--п)); width: calc(79 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(129 * var(--п)); top: calc(165 * var(--п)); width: calc(126 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(260 * var(--п)); top: calc(165 * var(--п)); width: calc(175 * var(--п)); }
}

/* ── Шапка программы у Linux: канва 360 ── */
@media (max-width: 479px) {
  body.page-course.page-linux .wl-program .wl-program__head { height: calc(239 * var(--п)); margin-top: calc(35 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__fresh { left: calc(95 * var(--п)); top: calc(34 * var(--п)); width: calc(255 * var(--п)); font-size: calc(16 * var(--п)); line-height: calc(20.8 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__h { left: calc(17 * var(--п)); top: calc(51 * var(--п)); width: calc(326 * var(--п)); font-size: calc(20 * var(--п)); line-height: calc(26 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__note { left: calc(60 * var(--п)); top: calc(118 * var(--п)); width: calc(261 * var(--п)); font-size: calc(14 * var(--п)); line-height: calc(21 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li { height: calc(20 * var(--п)); font-size: calc(14 * var(--п)); line-height: calc(12.6 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(1) { left: calc(74 * var(--п)); top: calc(174 * var(--п)); width: calc(82 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(2) { left: calc(161 * var(--п)); top: calc(174 * var(--п)); width: calc(126 * var(--п)); }
  body.page-course.page-linux .wl-program .wl-program__head .wl-program__chips li:nth-child(3) { left: calc(93 * var(--п)); top: calc(199 * var(--п)); width: calc(174 * var(--п)); }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK — первый экран по канвам
   ══════════════════════════════════════════════════════════════════════

   Разметка первого экрана у MikroTik та же, что у Windows+Linux, поэтому
   канвовые правила `.page-course .wl-hero` приходят сюда сами — но числа
   в них чужие. Здесь свои, снятые с боевой на ширинах 960, 640 и 480.

   Перебиваем через `body.page-mikrotik`: у общих правил специфичность
   (0,2,0)–(0,4,0), тег `body` добавляет ровно тот вес, которого хватает,
   и не приходится городить `:not()` — на нём мы уже один раз обожглись
   (см. шапку программы Linux).

   Устройство ленты навыков повторяет Windows+Linux: на 960 карточки стоят
   сеткой внутри первого экрана, на 640 и 480 Тильда уносит их в отдельную
   запись под ним, и лента прокручивается по горизонтали. Отсюда и разные
   высоты секции: 1116 на 960, 1688 на 640 (1443 + 220 карточек + 24
   полоска), 1516 на 480 (1278 + 221 + 16). */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-mikrotik .wl-hero { width: 960px; height: 1120px; overflow: hidden; }
  body.page-mikrotik .wl-hero .wrap { width: 960px; height: 1116px; }
  body.page-mikrotik .wl-hero .wrap.wl-skills { width: 960px; height: 1116px; }

  /* ⚠️ Обнуляем поля у всего первого экрана. Планшетная полоса вешает на
     снимок `margin-top: 28`, а у абсолютного элемента поле ПРИБАВЛЯЕТСЯ к
     координате: снимок стоял на 28 ниже и торчал из-под плиты обрезом. */
  body.page-mikrotik .mt-hero__meta,
  body.page-mikrotik .mt-hero__kicker,
  body.page-mikrotik .mt-hero__title,
  body.page-mikrotik .mt-hero__leads,
  body.page-mikrotik .mt-hero__lead,
  body.page-mikrotik .mt-hero__cta,
  body.page-mikrotik .mt-hero__pic,
  body.page-mikrotik .wl-skills__h,
  body.page-mikrotik .wl-skills__list,
  body.page-mikrotik .wl-skill,
  body.page-mikrotik .wl-skill__t { margin: 0; }
  body.page-mikrotik .mt-hero__meta {
    position: absolute; left: 24px; top: 100px; width: 330px; height: 19px; margin: 0;
  }
  body.page-mikrotik .mt-hero__kicker {
    position: absolute; left: 24px; top: 200px; width: 239px; margin: 0;
    font-size: 20px; line-height: 17px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__title {
    position: absolute; left: 24px; top: 227px; width: 553px; max-width: none; margin: 0;
    font-size: 40px; line-height: 44px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .mt-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-mikrotik .mt-hero__lead {
    position: absolute; left: 49px; width: 432px; max-width: none; margin: 0;
    font-size: 20px; line-height: 28px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__lead:nth-child(1) { top: 335px; }
  body.page-mikrotik .mt-hero__lead:nth-child(2) { top: 401px; }
  body.page-mikrotik .mt-hero__lead img {
    position: absolute; left: -25px; top: 10px; width: 15px; height: 12px;
  }
  body.page-mikrotik .mt-hero__cta { position: static; display: block; margin: 0; }
  body.page-mikrotik .mt-hero__cta .btn {
    position: absolute; left: 24px; width: 354px; max-width: none;
    height: 60px; min-height: 0; margin: 0; padding: 0; border-radius: 5px;
    font-size: 18px; line-height: 60px; letter-spacing: -1px;
  }
  body.page-mikrotik .mt-hero__cta .btn--lime { top: 497px; }
  body.page-mikrotik .mt-hero__cta .btn--dark { top: 567px; }
  body.page-mikrotik .mt-hero__pic {
    position: absolute; left: 545px; top: 150px; width: 447px; height: 593px;
    max-width: none; object-fit: fill;
  }

  /* z-index 2, а не 1: снимок лежит в `.wrap` (тоже 2) и стоит в разметке
     раньше плит, поэтому при равном слое плиты рисуются поверх и срезают
     его нижний край — как в оригинале. С единицей снимок торчал из-под
     плиты прямоугольным обрезом. */
  body.page-mikrotik .wl-panels { display: block; position: absolute; inset: 0; z-index: 2; }
  body.page-mikrotik .wl-panels img { position: absolute; left: 24px; margin: 0; max-width: none; }
  body.page-mikrotik .wl-panels__back  { top: 677px; width: 912px; height: 381px; }
  body.page-mikrotik .wl-panels__front { top: 719px; width: 912px; height: 398px; }

  body.page-mikrotik .wl-skills { margin: 0; }
  body.page-mikrotik .wl-skills__h {
    position: absolute; left: 24px; top: 809px; width: 912px; margin: 0; padding: 0;
    font-size: 40px; line-height: 36px; letter-spacing: -1px; text-align: center;
  }
  body.page-mikrotik .wl-skills__list {
    position: static; display: block; margin: 0; padding: 0; overflow: visible;
  }
  body.page-mikrotik .wl-skill {
    position: absolute; top: 880px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  body.page-mikrotik .wl-skills__list > li:nth-child(1) { left: 40px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(2) { left: 218px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(3) { left: 396px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(4) { left: 574px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(5) { left: 752px; }
  body.page-mikrotik .wl-skill__t {
    top: 75px; font-size: 12px; line-height: 16.8px; letter-spacing: -.5px;
  }
  body.page-mikrotik .wl-skills__list > li:nth-child(1) .wl-skill__t { width: 122px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(2) .wl-skill__t { width: 128px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(3) .wl-skill__t { width: 110px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(4) .wl-skill__t { width: 124px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(5) .wl-skill__t { width: 114px; }

  /* Низ панели подсказки — 870, канва 1116, отсюда bottom 246. */
  body.page-mikrotik .wl-tip--карточка { bottom: 246px; }
  body.page-mikrotik .wl-tip--к1 { left: 40px;  width: 280px; }
  body.page-mikrotik .wl-tip--к2 { left: 218px; width: 263px; }
  body.page-mikrotik .wl-tip--к3 { left: 367px; width: 228px; }  /* +2: у нас в тексте неразрывные пробелы, на 226 они гонят шестую строку */
  body.page-mikrotik .wl-tip--к4 { left: 513px; width: 229px; }
  body.page-mikrotik .wl-tip--к5 { left: 650px; width: 272px; background: #0088ff; color: #fff; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-mikrotik .wl-hero { width: 640px; height: 1689px; overflow: visible; }
  body.page-mikrotik .wl-hero::before { inset: 0 0 auto 0; height: 1443px; }
  body.page-mikrotik .wl-hero .wrap { width: 640px; height: 1443px; }
  body.page-mikrotik .wl-hero .wrap.wl-skills { width: 640px; height: 1443px; }

  /* ⚠️ Обнуляем поля у всего первого экрана. Планшетная полоса вешает на
     снимок `margin-top: 28`, а у абсолютного элемента поле ПРИБАВЛЯЕТСЯ к
     координате: снимок стоял на 28 ниже и торчал из-под плиты обрезом. */
  body.page-mikrotik .mt-hero__meta,
  body.page-mikrotik .mt-hero__kicker,
  body.page-mikrotik .mt-hero__title,
  body.page-mikrotik .mt-hero__leads,
  body.page-mikrotik .mt-hero__lead,
  body.page-mikrotik .mt-hero__cta,
  body.page-mikrotik .mt-hero__pic,
  body.page-mikrotik .wl-skills__h,
  body.page-mikrotik .wl-skills__list,
  body.page-mikrotik .wl-skill,
  body.page-mikrotik .wl-skill__t { margin: 0; }
  body.page-mikrotik .mt-hero__meta {
    position: absolute; left: 24px; top: 100px; width: 330px; height: 19px; margin: 0;
  }
  body.page-mikrotik .mt-hero__kicker {
    position: absolute; left: 24px; top: 200px; width: 239px; margin: 0;
    font-size: 20px; line-height: 17px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__title {
    position: absolute; left: 24px; top: 227px; width: 553px; max-width: none; margin: 0;
    font-size: 40px; line-height: 44px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .mt-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-mikrotik .mt-hero__lead {
    position: absolute; left: 49px; width: 432px; max-width: none; margin: 0;
    font-size: 20px; line-height: 28px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__lead:nth-child(1) { top: 335px; }
  body.page-mikrotik .mt-hero__lead:nth-child(2) { top: 401px; }
  body.page-mikrotik .mt-hero__lead img {
    position: absolute; left: -25px; top: 10px; width: 15px; height: 12px;
  }
  body.page-mikrotik .mt-hero__cta { position: static; display: block; margin: 0; }
  body.page-mikrotik .mt-hero__cta .btn {
    position: absolute; left: 24px; width: 511px; max-width: none;
    height: 60px; min-height: 0; margin: 0; padding: 0; border-radius: 5px;
    font-size: 18px; line-height: 60px; letter-spacing: -1px;
  }
  body.page-mikrotik .mt-hero__cta .btn--lime { top: 497px; }
  body.page-mikrotik .mt-hero__cta .btn--dark { top: 567px; }
  body.page-mikrotik .mt-hero__pic {
    position: absolute; left: 90px; top: 708px; width: 474px; height: 629px;
    max-width: none; object-fit: fill;
  }

  /* z-index 2, а не 1: снимок лежит в `.wrap` (тоже 2) и стоит в разметке
     раньше плит, поэтому при равном слое плиты рисуются поверх и срезают
     его нижний край — как в оригинале. С единицей снимок торчал из-под
     плиты прямоугольным обрезом. */
  body.page-mikrotik .wl-panels { display: block; position: absolute; inset: 0; z-index: 2; }
  body.page-mikrotik .wl-panels img { position: absolute; left: 0; margin: 0; max-width: none; }
  body.page-mikrotik .wl-panels__back  { top: 1283px; width: 640px; height: 267px; }
  body.page-mikrotik .wl-panels__front { top: 1312px; width: 640px; height: 279px; }

  body.page-mikrotik .wl-skills { margin: 0; }
  body.page-mikrotik .wl-skills__h {
    position: absolute; left: 24px; top: 1372px; width: 592px; margin: 0; padding: 0;
    font-size: 40px; line-height: 36px; letter-spacing: -1px; text-align: center;
  }
  body.page-mikrotik .wl-skills__list {
    position: absolute; left: 0; top: 1443px; width: 640px;
    display: flex; gap: 10px; margin: 0; padding: 0 24px;
    overflow-x: auto; scrollbar-width: none;
  }
  body.page-mikrotik .wl-skill {
    position: relative; flex: 0 0 168px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  body.page-mikrotik .wl-skill__t {
    top: 75px; font-size: 12px; line-height: 16.8px; letter-spacing: -.5px;
  }
  body.page-mikrotik .wl-skills__list > li:nth-child(1) .wl-skill__t { width: 122px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(2) .wl-skill__t { width: 126px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(3) .wl-skill__t { width: 110px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(4) .wl-skill__t { width: 124px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(5) .wl-skill__t { width: 114px; }

  /* Низ панели 1433 при слое 1443 — отсюда bottom 10. */
  body.page-mikrotik .wl-tip--карточка { bottom: 10px; }
  body.page-mikrotik .wl-tip--к1 { left: 180px; width: 280px; }
  body.page-mikrotik .wl-tip--к2 { left: 188px; width: 263px; }
  body.page-mikrotik .wl-tip--к3 { left: 207px; width: 228px; }
  body.page-mikrotik .wl-tip--к4 { left: 205px; width: 229px; }
  body.page-mikrotik .wl-tip--к5 { left: 185px; width: 272px; background: #0088ff; color: #fff; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-mikrotik .wl-hero { width: 480px; height: 1517px; overflow: visible; }
  body.page-mikrotik .wl-hero::before { inset: 0 0 auto 0; height: 1278px; }
  body.page-mikrotik .wl-hero .wrap { width: 480px; height: 1278px; }
  body.page-mikrotik .wl-hero .wrap.wl-skills { width: 480px; height: 1278px; }

  /* ⚠️ Обнуляем поля у всего первого экрана. Планшетная полоса вешает на
     снимок `margin-top: 28`, а у абсолютного элемента поле ПРИБАВЛЯЕТСЯ к
     координате: снимок стоял на 28 ниже и торчал из-под плиты обрезом. */
  body.page-mikrotik .mt-hero__meta,
  body.page-mikrotik .mt-hero__kicker,
  body.page-mikrotik .mt-hero__title,
  body.page-mikrotik .mt-hero__leads,
  body.page-mikrotik .mt-hero__lead,
  body.page-mikrotik .mt-hero__cta,
  body.page-mikrotik .mt-hero__pic,
  body.page-mikrotik .wl-skills__h,
  body.page-mikrotik .wl-skills__list,
  body.page-mikrotik .wl-skill,
  body.page-mikrotik .wl-skill__t { margin: 0; }
  body.page-mikrotik .mt-hero__meta {
    position: absolute; left: 18px; top: 80px; width: 282px; height: 16px; margin: 0;
  }
  body.page-mikrotik .mt-hero__kicker {
    position: absolute; left: 16px; top: 156px; width: 213px; margin: 0;
    font-size: 18px; line-height: 15px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__title {
    position: absolute; left: 15px; top: 186px; width: 410px; max-width: none; margin: 0;
    font-size: 40px; line-height: 44px; letter-spacing: -1.5px;
  }
  /* ⚠️ На этом макете Тильда МЕНЯЕТ пункты местами: сверху «Специалисты…»,
     снизу «За 2 месяца…». У нас это один список в одном порядке, поэтому
     переставляем координатами, а не разметкой. */
  body.page-mikrotik .mt-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-mikrotik .mt-hero__lead {
    position: absolute; left: 41px; width: 362px; max-width: none; margin: 0;
    font-size: 18px; line-height: 25px; letter-spacing: -.5px;
  }
  body.page-mikrotik .mt-hero__lead:nth-child(1) { top: 452px; width: 388px; }
  body.page-mikrotik .mt-hero__lead:nth-child(2) { top: 387px; width: 382px; }
  body.page-mikrotik .mt-hero__lead img {
    position: absolute; left: -25px; top: 7px; width: 15px; height: 12px;
  }
  body.page-mikrotik .mt-hero__cta { position: static; display: block; margin: 0; }
  body.page-mikrotik .mt-hero__cta .btn {
    position: absolute; left: 16px; width: 383px; max-width: none;
    height: 50px; min-height: 0; margin: 0; padding: 0; border-radius: 5px;
    font-size: 14px; line-height: 50px; letter-spacing: -1px;
  }
  body.page-mikrotik .mt-hero__cta .btn--lime { top: 532px; }
  body.page-mikrotik .mt-hero__cta .btn--dark { top: 591px; }
  body.page-mikrotik .mt-hero__pic {
    position: absolute; left: 20px; top: 661px; width: 439px; height: 583px;
    max-width: none; object-fit: fill;
  }

  /* z-index 2, а не 1: снимок лежит в `.wrap` (тоже 2) и стоит в разметке
     раньше плит, поэтому при равном слое плиты рисуются поверх и срезают
     его нижний край — как в оригинале. С единицей снимок торчал из-под
     плиты прямоугольным обрезом. */
  body.page-mikrotik .wl-panels { display: block; position: absolute; inset: 0; z-index: 2; }
  body.page-mikrotik .wl-panels img { position: absolute; left: 0; margin: 0; max-width: none; }
  body.page-mikrotik .wl-panels__back  { top: 1185px; width: 480px; height: 200px; }
  body.page-mikrotik .wl-panels__front { top: 1206px; width: 480px; height: 209px; }

  body.page-mikrotik .wl-skills { margin: 0; }
  body.page-mikrotik .wl-skills__h {
    position: absolute; left: 16px; top: 1241px; width: 448px; margin: 0; padding: 0;
    font-size: 20px; line-height: 18px; letter-spacing: -.5px; text-align: center;
  }
  body.page-mikrotik .wl-skills__list {
    position: absolute; left: 0; top: 1278px; width: 480px;
    display: flex; gap: 10px; margin: 0; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  body.page-mikrotik .wl-skill {
    position: relative; flex: 0 0 168px; width: 168px; height: 221px;
    min-height: 0; padding: 0; display: block; aspect-ratio: auto;
  }
  body.page-mikrotik .wl-skill__t {
    top: 75px; font-size: 12px; line-height: 16.8px; letter-spacing: -.5px;
  }
  body.page-mikrotik .wl-skills__list > li:nth-child(1) .wl-skill__t { width: 122px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(2) .wl-skill__t { width: 140px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(3) .wl-skill__t { width: 110px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(4) .wl-skill__t { width: 124px; }
  body.page-mikrotik .wl-skills__list > li:nth-child(5) .wl-skill__t { width: 114px; }

  body.page-mikrotik .wl-tip--карточка { bottom: 9px; }
  body.page-mikrotik .wl-tip--к1 { left: 100px; width: 280px; }
  body.page-mikrotik .wl-tip--к2 { left: 108px; width: 263px; }
  body.page-mikrotik .wl-tip--к3 { left: 127px; width: 226px; }
  body.page-mikrotik .wl-tip--к4 { left: 125px; width: 229px; }
  body.page-mikrotik .wl-tip--к5 { left: 105px; width: 270px; background: #0088ff; color: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK — программа курса по канвам
   ══════════════════════════════════════════════════════════════════════

   Каждый модуль у Тильды — отдельная запись, и высота её плашки зависит от
   того, во сколько строк лёг заголовок: 120 при двух строках, 153 при трёх.
   Значит высоту задавать нельзя — только поля (27 сверху и снизу) и кегль,
   а строки должны лечь так же, как у неё.

   ⚠️ Ложатся они так же только при ТОЙ ЖЕ ширине текстового окна, а Тильда
   подобрала её каждому модулю отдельно: на канве 640 «Модуль 1» (окно 463)
   влезает в две строки, а более короткий «Модуль 4» (окно 375) занимает три.
   Одной ширины на все модули тут не существует, поэтому окно задаётся
   переменной --ш поимённо, а правое поле считается от него. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-mikrotik .mt-program {
    width: 960px; padding: 75px 0 24px;
    zoom: calc(var(--вью, 960) / 960);
  }
  body.page-mikrotik .mt-program .wrap {
    width: 960px; max-width: none; margin: 0; padding: 0 24px;
  }
  body.page-mikrotik .mt-program__h {
    margin: 0 0 35px;
    font-size: 40px; line-height: 44px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .mt-mod { margin-bottom: 5px; }
  body.page-mikrotik .mt-mod:last-child { margin-bottom: 0; }
  body.page-mikrotik .mt-mod__t {
    padding: 27px calc(882px - var(--ш)) 27px 30px;
    font-size: 30px; line-height: 33px; letter-spacing: -1px;
  }
  body.page-mikrotik .mt-mod__t::after {
    right: 30px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background-size: 21px 12px;
  }
  body.page-mikrotik .mt-mod__body { margin: 0 10px; padding: 18px 20px 10px; }
  body.page-mikrotik .mt-mod__list--arrow li { max-width: none; }
  body.page-mikrotik .mt-mod[open] .mt-mod__t::after { transform: translateY(-50%) rotate(180deg); }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(1) .mt-mod__t { --ш: 480px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(2) .mt-mod__t { --ш: 513px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(3) .mt-mod__t { --ш: 513px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(4) .mt-mod__t { --ш: 504px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(5) .mt-mod__t { --ш: 480px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(6) .mt-mod__t { --ш: 504px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(7) .mt-mod__t { --ш: 514px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(8) .mt-mod__t { --ш: 492px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(9) .mt-mod__t { --ш: 561px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(10) .mt-mod__t { --ш: 445px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-mikrotik .mt-program {
    width: 640px; padding: 75px 0 24px;
    zoom: calc(var(--вью, 640) / 640);
  }
  body.page-mikrotik .mt-program .wrap {
    width: 640px; max-width: none; margin: 0; padding: 0 24px;
  }
  body.page-mikrotik .mt-program__h {
    margin: 0 0 35px;
    font-size: 40px; line-height: 44px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .mt-mod { margin-bottom: 5px; }
  body.page-mikrotik .mt-mod:last-child { margin-bottom: 0; }
  body.page-mikrotik .mt-mod__t {
    padding: 27px calc(562px - var(--ш)) 27px 30px;
    font-size: 30px; line-height: 33px; letter-spacing: -1px;
  }
  body.page-mikrotik .mt-mod__t::after {
    right: 30px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background-size: 21px 12px;
  }
  body.page-mikrotik .mt-mod__body { margin: 0 10px; padding: 18px 20px 10px; }
  body.page-mikrotik .mt-mod__list--arrow li { max-width: none; }
  body.page-mikrotik .mt-mod[open] .mt-mod__t::after { transform: translateY(-50%) rotate(180deg); }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(1) .mt-mod__t { --ш: 463px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(2) .mt-mod__t { --ш: 352px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(3) .mt-mod__t { --ш: 396px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(4) .mt-mod__t { --ш: 375px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(5) .mt-mod__t { --ш: 463px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(6) .mt-mod__t { --ш: 375px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(7) .mt-mod__t { --ш: 355px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(8) .mt-mod__t { --ш: 337px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(9) .mt-mod__t { --ш: 392px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(10) .mt-mod__t { --ш: 355px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-mikrotik .mt-program {
    width: 480px; padding: 35px 0 16px;
    zoom: calc(var(--вью, 480) / 480);
  }
  body.page-mikrotik .mt-program .wrap {
    width: 480px; max-width: none; margin: 0; padding: 0 16px;
  }
  body.page-mikrotik .mt-program__h {
    margin: 0 0 20px;
    font-size: 30px; line-height: 33px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .mt-mod { margin-bottom: 5px; }
  body.page-mikrotik .mt-mod:last-child { margin-bottom: 0; }
  body.page-mikrotik .mt-mod__t {
    padding: 20px calc(418px - var(--ш)) 22px 30px;
    min-height: 76px; box-sizing: border-box;
    font-size: 14px; line-height: 16.8px; letter-spacing: -.2px;
  }
  body.page-mikrotik .mt-mod__t::after {
    right: 30px; top: 50%; transform: translateY(-50%);
    width: 29px; height: 29px; background-size: 14px 8px;
  }
  body.page-mikrotik .mt-mod__body { margin: 0 10px; padding: 18px 20px 10px; }
  body.page-mikrotik .mt-mod__lead,
  body.page-mikrotik .mt-mod__list { font-size: 14px; line-height: 19.6px; }
  body.page-mikrotik .mt-mod__list li { margin-bottom: 4px; }
  body.page-mikrotik .mt-mod__list--arrow li { max-width: none; padding-left: 20px; }
  body.page-mikrotik .mt-mod__list--arrow img { top: 6px; width: 12px; height: 10px; }
  body.page-mikrotik .mt-mod__result { padding: 12px 14px 14px; }
  body.page-mikrotik .mt-mod[open] .mt-mod__t::after { transform: translateY(-50%) rotate(180deg); }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(1) .mt-mod__t { --ш: 232px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(2) .mt-mod__t { --ш: 249px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(3) .mt-mod__t { --ш: 324px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(4) .mt-mod__t { --ш: 279px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(5) .mt-mod__t { --ш: 232px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(6) .mt-mod__t { --ш: 241px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(7) .mt-mod__t { --ш: 249px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(8) .mt-mod__t { --ш: 233px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(9) .mt-mod__t { --ш: 278px; }
  body.page-mikrotik .mt-program__list > .mt-mod:nth-child(10) .mt-mod__t { --ш: 213px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK — спикеры курса по канвам
   ══════════════════════════════════════════════════════════════════════

   Спикеров двое, и на 960 они стоят «в зеркало»: у первого фотография
   слева, у второго справа. На 640 и 480 Тильда разворачивает обе пары в
   колонку — фотография над карточкой, — и блок вырастает втрое.

   Пункты списка у Тильды расставлены поштучно и с разным зазором (13, 16,
   12 на одной и той же карточке). Повторять эту россыпь смысла нет: высота
   карточки задана жёстко, внутрь она не влияет, — поэтому список остаётся
   потоком с одним зазором, а поимённо ставятся только его начало, имя,
   должность и сама карточка. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-mikrotik .zx-speaker {
    position: relative; width: 960px; height: 945px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  body.page-mikrotik .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 960px; height: 945px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетный блок ниже по файлу распускает эти элементы в поток
     (`position: static`). Специфичность у него та же, что у базовых правил,
     поэтому возвращаем абсолют явно — иначе канва задаёт координаты, а
     элементы их не слушают, и сходится одна лишь высота секции. */
  body.page-mikrotik .zx-speaker__h,
  body.page-mikrotik .zx-speaker__photo,
  body.page-mikrotik .zx-speaker__card,
  body.page-mikrotik .zx-speaker__name,
  body.page-mikrotik .zx-speaker__role,
  body.page-mikrotik .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ И обнуляем поля. У абсолютно поставленного элемента margin ПРИБАВЛЯЕТСЯ
     к координате: планшетные `margin-top: 24` на карточке и списке сдвигали
     имя на 24, должность на 40, список на 48 — при верных left/top. */
  body.page-mikrotik .zx-speaker__card { padding: 0; }
  body.page-mikrotik .zx-speaker__h {
    left: 24px; top: 63px; width: 912px; margin: 0;
    font-size: 50px; line-height: 50px; letter-spacing: -1.5px; text-align: center;
  }
  body.page-mikrotik .zx-speaker__pair {
    position: absolute; left: 0; width: 960px; height: 365px;
  }
  body.page-mikrotik .mt-speaker .zx-speaker__pair:nth-of-type(1) { top: 160px; }
  body.page-mikrotik .mt-speaker .zx-speaker__pair--mirror { top: 540px; }
  body.page-mikrotik .zx-speaker__photo {
    left: 24px; top: 0; width: 365px; height: 365px; border-radius: 24px;
  }
  body.page-mikrotik .zx-speaker__card {
    left: 404px; top: 0; width: 532px; height: 365px; border-radius: 20px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__photo { left: 571px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__card { left: 24px; }
  body.page-mikrotik .zx-speaker__name {
    left: 27px; top: 26px; font-size: 30px; line-height: 30px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .zx-speaker__role {
    left: 25px; top: 80px; width: 495px;
    font-size: 20px; line-height: 24px; letter-spacing: -1px;
  }
  body.page-mikrotik .zx-speaker__list { left: 25px; top: 158px; width: 470px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__name { left: 27px; top: 26px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { left: 25px; top: 80px; width: 400px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { left: 25px; top: 172px; width: 440px; }
  body.page-mikrotik .zx-speaker__list li {
    padding-left: 25px; margin-bottom: 13px;
    font-size: 18px; line-height: 22px; letter-spacing: -.5px;
  }
  body.page-mikrotik .zx-speaker__list img { left: 0; top: 4px; width: 15px; height: 12px; }
  /* Ширина пункта у Тильды своя на каждый: от неё зависит, во сколько
     строк он ляжет, — одной на всех тут не существует. */
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { width: 473px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { width: 419px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { width: 487px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { width: 480px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { width: 363px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { width: 405px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { width: 435px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__role { width: 495px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { width: 366px; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-mikrotik .zx-speaker {
    position: relative; width: 640px; height: 2348px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  body.page-mikrotik .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 640px; height: 2348px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетный блок ниже по файлу распускает эти элементы в поток
     (`position: static`). Специфичность у него та же, что у базовых правил,
     поэтому возвращаем абсолют явно — иначе канва задаёт координаты, а
     элементы их не слушают, и сходится одна лишь высота секции. */
  body.page-mikrotik .zx-speaker__h,
  body.page-mikrotik .zx-speaker__photo,
  body.page-mikrotik .zx-speaker__card,
  body.page-mikrotik .zx-speaker__name,
  body.page-mikrotik .zx-speaker__role,
  body.page-mikrotik .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ И обнуляем поля. У абсолютно поставленного элемента margin ПРИБАВЛЯЕТСЯ
     к координате: планшетные `margin-top: 24` на карточке и списке сдвигали
     имя на 24, должность на 40, список на 48 — при верных left/top. */
  body.page-mikrotik .zx-speaker__card { padding: 0; }
  body.page-mikrotik .zx-speaker__h {
    position: absolute; left: 24px; top: 75px; width: 592px; margin: 0;
    font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center;
  }
  body.page-mikrotik .mt-speaker .zx-speaker__pair,
  body.page-mikrotik .mt-speaker .zx-speaker__pair--mirror {
    position: absolute; left: 0; width: 640px; height: auto;
  }
  body.page-mikrotik .mt-speaker .zx-speaker__pair:nth-of-type(1) { top: 150px; }
  body.page-mikrotik .mt-speaker .zx-speaker__pair--mirror { top: 1245px; }
  body.page-mikrotik .zx-speaker__photo,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__photo {
    position: absolute; left: 24px; top: 0; width: 592px; height: 592px; border-radius: 24px;
  }
  body.page-mikrotik .zx-speaker__card,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__card {
    position: absolute; left: 24px; top: 602px; width: 592px; height: 454px; border-radius: 20px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__card { height: 449px; }
  body.page-mikrotik .zx-speaker__name,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__name {
    left: 40px; top: 37px; font-size: 40px; line-height: 40px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__name { left: 37px; top: 44px; }
  body.page-mikrotik .zx-speaker__role,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role {
    left: 35px; top: 111px; width: 400px;
    font-size: 24px; line-height: 26px; letter-spacing: -1px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { width: 470px; line-height: 29px; }
  body.page-mikrotik .zx-speaker__list { left: 35px; top: 209px; width: 540px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { left: 35px; top: 219px; width: 500px; }
  body.page-mikrotik .zx-speaker__list li {
    padding-left: 25px; margin-bottom: 15px;
    font-size: 20px; line-height: 24px; letter-spacing: -.5px;
  }
  body.page-mikrotik .zx-speaker__list img { left: 0; top: 5px; width: 15px; height: 12px; }
  /* Ширина пункта у Тильды своя на каждый: от неё зависит, во сколько
     строк он ляжет, — одной на всех тут не существует. */
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { width: 525px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { width: 465px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { width: 538px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { width: 543px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { width: 403px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { width: 462px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { width: 491px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__role { width: 385px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { width: 461px; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-mikrotik .zx-speaker {
    position: relative; width: 480px; height: 1873px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  body.page-mikrotik .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 480px; height: 1873px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетный блок ниже по файлу распускает эти элементы в поток
     (`position: static`). Специфичность у него та же, что у базовых правил,
     поэтому возвращаем абсолют явно — иначе канва задаёт координаты, а
     элементы их не слушают, и сходится одна лишь высота секции. */
  body.page-mikrotik .zx-speaker__h,
  body.page-mikrotik .zx-speaker__photo,
  body.page-mikrotik .zx-speaker__card,
  body.page-mikrotik .zx-speaker__name,
  body.page-mikrotik .zx-speaker__role,
  body.page-mikrotik .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ И обнуляем поля. У абсолютно поставленного элемента margin ПРИБАВЛЯЕТСЯ
     к координате: планшетные `margin-top: 24` на карточке и списке сдвигали
     имя на 24, должность на 40, список на 48 — при верных left/top. */
  body.page-mikrotik .zx-speaker__card { padding: 0; }
  body.page-mikrotik .zx-speaker__h {
    position: absolute; left: 16px; top: 35px; width: 448px; margin: 0;
    font-size: 30px; line-height: 30px; letter-spacing: -1.5px; text-align: center;
  }
  body.page-mikrotik .mt-speaker .zx-speaker__pair,
  body.page-mikrotik .mt-speaker .zx-speaker__pair--mirror {
    position: absolute; left: 0; width: 480px; height: auto;
  }
  body.page-mikrotik .mt-speaker .zx-speaker__pair:nth-of-type(1) { top: 85px; }
  body.page-mikrotik .mt-speaker .zx-speaker__pair--mirror { top: 962px; }
  body.page-mikrotik .zx-speaker__photo,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__photo {
    position: absolute; left: 16px; top: 0; width: 448px; height: 448px; border-radius: 24px;
  }
  body.page-mikrotik .zx-speaker__card,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__card {
    position: absolute; left: 16px; top: 453px; width: 448px; height: 415px; border-radius: 20px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__card { top: 458px; height: 393px; }
  body.page-mikrotik .zx-speaker__name,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__name {
    left: 27px; top: 29px; font-size: 30px; line-height: 30px; letter-spacing: -1.5px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__name { top: 24px; }
  body.page-mikrotik .zx-speaker__role,
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role {
    left: 25px; top: 80px; width: 320px;
    font-size: 20px; line-height: 22px; letter-spacing: -1px;
  }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { width: 365px; line-height: 24px; }
  body.page-mikrotik .zx-speaker__list { left: 25px; top: 163px; width: 400px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { left: 25px; top: 178px; width: 390px; }
  body.page-mikrotik .zx-speaker__list li {
    padding-left: 25px; margin-bottom: 8px;
    font-size: 18px; line-height: 22px; letter-spacing: -.5px;
  }
  body.page-mikrotik .zx-speaker__list img { left: 0; top: 4px; width: 15px; height: 12px; }
  /* Ширина пункта у Тильды своя на каждый: от неё зависит, во сколько
     строк он ляжет, — одной на всех тут не существует. */
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { width: 404px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { width: 393px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { width: 408px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { width: 406px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { width: 363px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { width: 394px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { width: 328px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__role { width: 312px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__role { width: 361px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK и ZABBIX — формат участия по канвам
   ══════════════════════════════════════════════════════════════════════

   Блок у обоих курсов один и тот же с точностью до цен: у Тильды записи
   разные, а числа совпадают до единицы (1105 / 1105 / 810). Поэтому правила
   общие — `.page-course .zx-plans`, — а не по странице.

   ⚠️ Тёмная плита со списком ВЫШЕ записи: на 960 она кончается на 1115 при
   записи 1105. Так у Тильды, поэтому и у нас секция не обрезает: следующий
   блок наезжает на её нижние 10 px ровно так же, как в оригинале. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .zx-plans {
    position: relative; width: 960px; height: 1105px; padding: 0; overflow: visible;
    zoom: calc(var(--вью, 960) / 960);
  }
  .page-course .zx-plans .wrap {
    position: absolute; left: 0; top: 0; width: 960px; height: 1105px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетная полоса (max-width: 1260) распускает эти элементы в поток
     и вешает на них поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к
     координате, поэтому мало вернуть position — надо и обнулить поля.
     Без этого сходится одна высота секции, а всё внутри стоит не там. */
  .page-course .zx-plans__h,
  .page-course .zx-plans__start,
  .page-course .zx-plan,
  .page-course .zx-plan__name,
  .page-course .zx-plan__badge,
  .page-course .zx-plan__now,
  .page-course .zx-plan__was,
  .page-course .zx-plan__mo,
  .page-course .zx-plan__note,
  .page-course .zx-plan__extra { position: absolute; margin: 0; }
  .page-course .zx-plan__list { margin: 0; }
  .page-course .zx-plans__h {
    left: 24px; top: 70px; width: 912px; margin: 0;
    font-size: 40px; line-height: 48px; letter-spacing: -1px; text-align: center;
  }
  .page-course .zx-plans__start { left: 370px; top: 145px; width: 220px; height: 22px; }
  .page-course .zx-plan { left: 185px; top: 205px; width: 589px; height: 494px; border-radius: 20px; }
  .page-course .zx-plan__name { left: 30px; top: 35px; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .page-course .zx-plan__badge { left: 437px; top: 109px; width: 122px; height: 35px; }
  .page-course .zx-plan__now { left: 30px; top: 117px; font-size: 24px; line-height: 19.2px; }
  .page-course .zx-plan__was { left: 151px; top: 114px; font-size: 24px; line-height: 19.2px; }
  .page-course .zx-plan__was span { height: 25px; line-height: 25px; padding: 0 3px; }
  .page-course .zx-plan__mo { left: 30px; top: 149px; font-size: 60px; line-height: 60px; letter-spacing: -2px; }
  .page-course .zx-plan__unit { font-size: 24px; line-height: 19.2px; letter-spacing: -.5px; }
  .page-course .zx-plan__note { left: 30px; top: 219px; font-size: 20px; line-height: 16px; letter-spacing: -.5px; }
  .page-course .zx-plan__btn {
    position: absolute; left: 30px; width: 529px; height: 60px; min-height: 0;
    margin: 0; padding: 0; border-radius: 5px;
    font-size: 18px; line-height: 60px; letter-spacing: -1px;
  }
  .page-course .zx-plan__btn--blue  { top: 267px; }
  .page-course .zx-plan__btn--lime  { top: 338px; }
  .page-course .zx-plan__btn--ghost { top: 408px; left: 31px; width: 527px; border-radius: 7px; }
  .page-course .zx-plan__extra {
    left: 185px; top: 509px; width: 589px; height: 606px; border-radius: 20px;
  }
  .page-course .zx-plan__list { padding: 219px 30px 0; }
  .page-course .zx-plan__list li {
    padding-left: 25px; margin-bottom: 15px;
    font-size: 20px; line-height: 26px; letter-spacing: -.5px;
  }
  .page-course .zx-plan__list img { top: 7px; width: 15px; height: 12px; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .zx-plans {
    position: relative; width: 640px; height: 1105px; padding: 0; overflow: visible;
    zoom: calc(var(--вью, 640) / 640);
  }
  .page-course .zx-plans .wrap {
    position: absolute; left: 0; top: 0; width: 640px; height: 1105px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетная полоса (max-width: 1260) распускает эти элементы в поток
     и вешает на них поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к
     координате, поэтому мало вернуть position — надо и обнулить поля.
     Без этого сходится одна высота секции, а всё внутри стоит не там. */
  .page-course .zx-plans__h,
  .page-course .zx-plans__start,
  .page-course .zx-plan,
  .page-course .zx-plan__name,
  .page-course .zx-plan__badge,
  .page-course .zx-plan__now,
  .page-course .zx-plan__was,
  .page-course .zx-plan__mo,
  .page-course .zx-plan__note,
  .page-course .zx-plan__extra { position: absolute; margin: 0; }
  .page-course .zx-plan__list { margin: 0; }
  .page-course .zx-plans__h {
    left: 24px; top: 70px; width: 592px; margin: 0;
    font-size: 40px; line-height: 48px; letter-spacing: -1px; text-align: center;
  }
  .page-course .zx-plans__start { left: 211px; top: 136px; width: 220px; height: 22px; }
  .page-course .zx-plan { left: 23px; top: 195px; width: 592px; height: 516px; border-radius: 20px; }
  .page-course .zx-plan__name { left: 30px; top: 35px; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .page-course .zx-plan__badge { left: 440px; top: 109px; width: 122px; height: 35px; }
  .page-course .zx-plan__now { left: 30px; top: 117px; font-size: 24px; line-height: 19.2px; }
  .page-course .zx-plan__was { left: 151px; top: 114px; font-size: 24px; line-height: 19.2px; }
  .page-course .zx-plan__was span { height: 25px; line-height: 25px; padding: 0 3px; }
  .page-course .zx-plan__mo { left: 30px; top: 149px; font-size: 60px; line-height: 60px; letter-spacing: -2px; }
  .page-course .zx-plan__unit { font-size: 24px; line-height: 19.2px; letter-spacing: -.5px; }
  .page-course .zx-plan__note { left: 30px; top: 219px; font-size: 20px; line-height: 16px; letter-spacing: -.5px; }
  .page-course .zx-plan__btn {
    position: absolute; left: 31px; width: 532px; height: 60px; min-height: 0;
    margin: 0; padding: 0; border-radius: 5px;
    font-size: 18px; line-height: 60px; letter-spacing: -1px;
  }
  .page-course .zx-plan__btn--blue  { top: 283px; }
  .page-course .zx-plan__btn--lime  { top: 356px; left: 30px; }
  .page-course .zx-plan__btn--ghost { top: 427px; width: 527px; border-radius: 7px; }
  .page-course .zx-plan__extra {
    left: 22px; top: 500px; width: 592px; height: 606px; border-radius: 20px;
  }
  .page-course .zx-plan__list { padding: 245px 29px 0; }
  .page-course .zx-plan__list li {
    padding-left: 25px; margin-bottom: 15px;
    font-size: 20px; line-height: 26px; letter-spacing: -.5px;
  }
  .page-course .zx-plan__list img { top: 7px; width: 15px; height: 12px; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .zx-plans {
    position: relative; width: 480px; height: 810px; padding: 0; overflow: visible;
    zoom: calc(var(--вью, 480) / 480);
  }
  .page-course .zx-plans .wrap {
    position: absolute; left: 0; top: 0; width: 480px; height: 810px;
    max-width: none; margin: 0; padding: 0;
  }
  /* ⚠️ Планшетная полоса (max-width: 1260) распускает эти элементы в поток
     и вешает на них поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к
     координате, поэтому мало вернуть position — надо и обнулить поля.
     Без этого сходится одна высота секции, а всё внутри стоит не там. */
  .page-course .zx-plans__h,
  .page-course .zx-plans__start,
  .page-course .zx-plan,
  .page-course .zx-plan__name,
  .page-course .zx-plan__badge,
  .page-course .zx-plan__now,
  .page-course .zx-plan__was,
  .page-course .zx-plan__mo,
  .page-course .zx-plan__note,
  .page-course .zx-plan__extra { position: absolute; margin: 0; }
  .page-course .zx-plan__list { margin: 0; }
  .page-course .zx-plans__h {
    left: 16px; top: 35px; width: 448px; margin: 0;
    font-size: 30px; line-height: 36px; letter-spacing: -.5px; text-align: center;
  }
  .page-course .zx-plans__start { left: 170px; top: 86px; width: 131px; height: 13px; }
  .page-course .zx-plan { left: 75px; top: 130px; width: 328px; height: 354px; border-radius: 10px; }
  .page-course .zx-plan__name { left: 20px; top: 25px; font-size: 20px; line-height: 22px; letter-spacing: -.5px; }
  .page-course .zx-plan__badge { left: 234px; top: 69px; width: 74px; height: 21px; }
  .page-course .zx-plan__now { left: 20px; top: 75px; font-size: 14px; line-height: 11.2px; }
  .page-course .zx-plan__was { left: 93px; top: 72px; font-size: 14px; line-height: 11.2px; }
  .page-course .zx-plan__was span { height: 15px; line-height: 15px; padding: 0 2px; }
  .page-course .zx-plan__mo { left: 19px; top: 92px; font-size: 40px; line-height: 40px; letter-spacing: -2px; }
  .page-course .zx-plan__unit { font-size: 14px; line-height: 11.2px; letter-spacing: -.5px; }
  .page-course .zx-plan__note { left: 20px; top: 137px; font-size: 12px; line-height: 9.6px; letter-spacing: -.2px; }
  .page-course .zx-plan__btn {
    position: absolute; left: 20px; width: 288px; height: 50px; min-height: 0;
    margin: 0; padding: 0; border-radius: 5px;
    font-size: 14px; line-height: 50px; letter-spacing: -1px;
  }
  .page-course .zx-plan__btn--blue  { top: 176px; }
  .page-course .zx-plan__btn--lime  { top: 234px; }
  .page-course .zx-plan__btn--ghost { top: 292px; width: 285px; border-radius: 7px; }
  .page-course .zx-plan__extra {
    left: 74px; top: 377px; width: 328px; height: 438px; border-radius: 10px;
  }
  .page-course .zx-plan__list { padding: 137px 18px 0; }
  .page-course .zx-plan__list li {
    padding-left: 25px; margin-bottom: 15px;
    font-size: 14px; line-height: 18px; letter-spacing: -.2px;
  }
  .page-course .zx-plan__list img { top: 4px; width: 15px; height: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK — пункты списка спикеров стоят поимённо
   ══════════════════════════════════════════════════════════════════════

   У Тильды каждый пункт — отдельный элемент со своими координатами, своей
   шириной и даже своим интерлиньяжем (18, 22 и 24 на одной карточке).
   Потоком это не повторить: зазоры между пунктами получаются разные —
   13, 16, 12. Поэтому пункты тоже ставятся поимённо, а список остаётся
   только точкой отсчёта. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-mikrotik .zx-speaker__list { top: 0; width: auto; }
  /* Зеркальная пара держит свой top из канвы, и он прибавлялся бы к
     координатам пунктов — обнуляем и его. */
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { top: 0; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__list li { position: absolute; left: 0; margin: 0; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { top: 158px; width: 473px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { top: 193px; width: 419px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { top: 231px; width: 487px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { top: 309px; width: 480px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { top: 172px; width: 363px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { top: 205px; width: 405px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { top: 264px; width: 435px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-mikrotik .zx-speaker__list { top: 0; width: auto; }
  /* Зеркальная пара держит свой top из канвы, и он прибавлялся бы к
     координатам пунктов — обнуляем и его. */
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { top: 0; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__list li { position: absolute; left: 0; margin: 0; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { top: 209px; width: 525px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { top: 249px; width: 465px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { top: 288px; width: 538px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { top: 374px; width: 543px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { top: 219px; width: 403px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { top: 259px; width: 462px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { top: 327px; width: 491px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-mikrotik .zx-speaker__list { top: 0; width: auto; }
  /* Зеркальная пара держит свой top из канвы, и он прибавлялся бы к
     координатам пунктов — обнуляем и его. */
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list { top: 0; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { white-space: nowrap; }
  body.page-mikrotik .zx-speaker__list li { position: absolute; left: 0; margin: 0; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(1) { top: 163px; width: 404px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(2) { top: 211px; width: 393px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(3) { top: 264px; width: 408px; }
  body.page-mikrotik .zx-speaker__pair:nth-of-type(1) .zx-speaker__list li:nth-child(4) { top: 345px; width: 406px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(1) { top: 178px; width: 363px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(2) { top: 211px; width: 394px; }
  body.page-mikrotik .zx-speaker__pair--mirror .zx-speaker__list li:nth-child(3) { top: 270px; width: 328px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ZABBIX — первый экран по канвам
   ══════════════════════════════════════════════════════════════════════

   Числа сняты с боевой ровно на 960, 640 и 480 — там масштаб Тильды равен
   единице. Композиция меняется на каждой канве: на 960 снимок дашборда
   стоит справа, на 640 и 480 уходит ПОД кнопки и вылезает за левый край
   (отрицательный left — так в оригинале, обрезает секция).

   ⚠️ На канве 480 Тильда меняет пункты местами: сверху «Уникальный курс»,
   снизу «За 2,5 месяца». У нас список один, поэтому переставляем
   координатами, а не разметкой. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-zabbix .zx-hero {
    position: relative; width: 960px; height: 737px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  body.page-zabbix .zx-hero .wrap {
    position: absolute; left: 0; top: 0; width: 960px; height: 737px;
    max-width: none; margin: 0; padding: 0; z-index: 2;
  }
  /* Возвращаем абсолют и обнуляем поля: планшетная полоса распускает
     всё это в поток, а у абсолютного элемента margin прибавляется
     к координате. */
  body.page-zabbix .zx-hero__start,
  body.page-zabbix .zx-hero__modules,
  body.page-zabbix .zx-hero__presale,
  body.page-zabbix .zx-hero__kicker,
  body.page-zabbix .zx-hero__title,
  body.page-zabbix .zx-hero__lead,
  body.page-zabbix .zx-hero__pic,
  body.page-zabbix .zx-hero__logo { position: absolute; margin: 0; }
  body.page-zabbix .zx-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-zabbix .zx-hero__logo { display: block; }
  body.page-zabbix .zx-hero__start { left: 24px; top: 100px; width: 225px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__modules { left: 276px; top: 99px; width: 169px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__presale { left: 650px; top: 95px; width: 291px; height: 51px; max-width: none; }
  body.page-zabbix .zx-hero__pic { left: 522px; top: 95px; width: 805px; height: 569px; max-width: none; }
  body.page-zabbix .zx-hero__logo { left: 598px; top: 271px; width: 164px; height: 164px; max-width: none; }
  body.page-zabbix .zx-hero__kicker { left: 24px; top: 200px; width: 239px; font-size: 20px; line-height: 17px; letter-spacing: -.5px; }
  body.page-zabbix .zx-hero__title { left: 24px; top: 227px; width: 598px; max-width: none; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-hero__lead { font-size: 20px; line-height: 28px; letter-spacing: -.5px; max-width: none; }
  body.page-zabbix .zx-hero__lead:nth-child(1) { left: 49px; top: 335px; width: 518px; }
  body.page-zabbix .zx-hero__lead:nth-child(2) { left: 49px; top: 401px; width: 487px; }
  body.page-zabbix .zx-hero__lead img { position: absolute; left: -25px; top: 10px; width: 15px; height: 12px; }
  body.page-zabbix .zx-hero__cta { position: static; display: block; margin: 0; }
  body.page-zabbix .zx-hero__cta .btn { position: absolute; width: auto; min-height: 0; margin: 0; padding: 0; border-radius: 5px; font-size: 18px; line-height: 60px; letter-spacing: -1px; }
  body.page-zabbix .zx-hero__cta .btn--lime { left: 24px; top: 507px; width: 354px; height: 60px; }
  body.page-zabbix .zx-hero__cta .btn--dark { left: 24px; top: 577px; width: 354px; height: 60px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-zabbix .zx-hero {
    position: relative; width: 640px; height: 1333px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  body.page-zabbix .zx-hero .wrap {
    position: absolute; left: 0; top: 0; width: 640px; height: 1333px;
    max-width: none; margin: 0; padding: 0; z-index: 2;
  }
  /* Возвращаем абсолют и обнуляем поля: планшетная полоса распускает
     всё это в поток, а у абсолютного элемента margin прибавляется
     к координате. */
  body.page-zabbix .zx-hero__start,
  body.page-zabbix .zx-hero__modules,
  body.page-zabbix .zx-hero__presale,
  body.page-zabbix .zx-hero__kicker,
  body.page-zabbix .zx-hero__title,
  body.page-zabbix .zx-hero__lead,
  body.page-zabbix .zx-hero__pic,
  body.page-zabbix .zx-hero__logo { position: absolute; margin: 0; }
  body.page-zabbix .zx-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-zabbix .zx-hero__logo { display: block; }
  body.page-zabbix .zx-hero__start { left: 24px; top: 100px; width: 225px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__modules { left: 282px; top: 101px; width: 169px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__presale { left: 323px; top: 143px; width: 291px; height: 51px; max-width: none; }
  body.page-zabbix .zx-hero__pic { left: -145px; top: 637px; width: 864px; height: 611px; max-width: none; }
  body.page-zabbix .zx-hero__logo { left: 439px; top: 692px; width: 164px; height: 164px; max-width: none; }
  body.page-zabbix .zx-hero__kicker { left: 24px; top: 200px; width: 239px; font-size: 20px; line-height: 17px; letter-spacing: -.5px; }
  body.page-zabbix .zx-hero__title { left: 24px; top: 227px; width: 602px; max-width: none; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-hero__lead { font-size: 20px; line-height: 28px; letter-spacing: -.5px; max-width: none; }
  body.page-zabbix .zx-hero__lead:nth-child(1) { left: 49px; top: 335px; width: 518px; }
  body.page-zabbix .zx-hero__lead:nth-child(2) { left: 49px; top: 401px; width: 487px; }
  body.page-zabbix .zx-hero__lead img { position: absolute; left: -25px; top: 10px; width: 15px; height: 12px; }
  body.page-zabbix .zx-hero__cta { position: static; display: block; margin: 0; }
  body.page-zabbix .zx-hero__cta .btn { position: absolute; width: auto; min-height: 0; margin: 0; padding: 0; border-radius: 5px; font-size: 18px; line-height: 60px; letter-spacing: -1px; }
  body.page-zabbix .zx-hero__cta .btn--lime { left: 24px; top: 507px; width: 511px; height: 60px; }
  body.page-zabbix .zx-hero__cta .btn--dark { left: 24px; top: 577px; width: 511px; height: 60px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-zabbix .zx-hero {
    position: relative; width: 480px; height: 1089px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  body.page-zabbix .zx-hero .wrap {
    position: absolute; left: 0; top: 0; width: 480px; height: 1089px;
    max-width: none; margin: 0; padding: 0; z-index: 2;
  }
  /* Возвращаем абсолют и обнуляем поля: планшетная полоса распускает
     всё это в поток, а у абсолютного элемента margin прибавляется
     к координате. */
  body.page-zabbix .zx-hero__start,
  body.page-zabbix .zx-hero__modules,
  body.page-zabbix .zx-hero__presale,
  body.page-zabbix .zx-hero__kicker,
  body.page-zabbix .zx-hero__title,
  body.page-zabbix .zx-hero__lead,
  body.page-zabbix .zx-hero__pic,
  body.page-zabbix .zx-hero__logo { position: absolute; margin: 0; }
  body.page-zabbix .zx-hero__leads { position: static; margin: 0; padding: 0; }
  body.page-zabbix .zx-hero__logo { display: block; }
  body.page-zabbix .zx-hero__start { left: 18px; top: 90px; width: 218px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__modules { left: 261px; top: 88px; width: 169px; height: 24px; max-width: none; }
  body.page-zabbix .zx-hero__presale { left: 241px; top: 127px; width: 291px; height: 51px; max-width: none; }
  body.page-zabbix .zx-hero__pic { left: -99px; top: 698px; width: 569px; height: 402px; max-width: none; }
  body.page-zabbix .zx-hero__logo { left: 286px; top: 691px; width: 164px; height: 164px; max-width: none; }
  body.page-zabbix .zx-hero__kicker { left: 16px; top: 166px; width: 214px; font-size: 18px; line-height: 15px; letter-spacing: -.5px; }
  body.page-zabbix .zx-hero__title { left: 15px; top: 196px; width: 410px; max-width: none; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-hero__lead { font-size: 18px; line-height: 25px; letter-spacing: -.5px; max-width: none; }
  body.page-zabbix .zx-hero__lead:nth-child(1) { left: 40px; top: 483px; width: 430px; }
  body.page-zabbix .zx-hero__lead:nth-child(2) { left: 41px; top: 397px; width: 426px; }
  body.page-zabbix .zx-hero__lead img { position: absolute; left: -24px; top: 7px; width: 15px; height: 12px; }
  body.page-zabbix .zx-hero__cta { position: static; display: block; margin: 0; }
  body.page-zabbix .zx-hero__cta .btn { position: absolute; width: auto; min-height: 0; margin: 0; padding: 0; border-radius: 5px; font-size: 14px; line-height: 50px; letter-spacing: -1px; }
  body.page-zabbix .zx-hero__cta .btn--lime { left: 11px; top: 562px; width: 383px; height: 50px; }
  body.page-zabbix .zx-hero__cta .btn--dark { left: 12px; top: 621px; width: 383px; height: 50px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ZABBIX — спикер курса по канвам
   ══════════════════════════════════════════════════════════════════════

   Карточка спикера у Zabbix — та же, что первая пара у MikroTik, вплоть до
   координат каждого пункта. Разводить их одним набором правил всё же не
   стали: у MikroTik карточки лежат внутри `.zx-speaker__pair`, у Zabbix —
   прямо в контейнере, и общий набор пришлось бы городить через `:not()`.
   На нём мы уже обжигались (шапка программы Linux), а выигрыш — три
   десятка строк. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-zabbix .zx-speaker {
    position: relative; width: 960px; height: 565px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  body.page-zabbix .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 960px; height: 565px;
    max-width: none; margin: 0; padding: 0;
  }
  /* Абсолют и обнулённые поля — планшетная полоса распускает всё это
     в поток, а margin у абсолютного элемента прибавляется к координате. */
  body.page-zabbix .zx-speaker__h,
  body.page-zabbix .zx-speaker__photo,
  body.page-zabbix .zx-speaker__card,
  body.page-zabbix .zx-speaker__name,
  body.page-zabbix .zx-speaker__role,
  body.page-zabbix .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  body.page-zabbix .zx-speaker__h { left: 24px; top: 63px; width: 912px; font-size: 50px; line-height: 50px; letter-spacing: -1.5px; text-align: center; }
  body.page-zabbix .zx-speaker__photo { left: 24px; top: 160px; width: 365px; height: 365px; max-width: none; border-radius: 24px; }
  body.page-zabbix .zx-speaker__card { left: 404px; top: 160px; width: 532px; height: 365px; border-radius: 20px; }
  body.page-zabbix .zx-speaker__name { left: 27px; top: 26px; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-speaker__role { left: 25px; top: 80px; width: 495px; font-size: 20px; line-height: 24px; letter-spacing: -1px; }
  body.page-zabbix .zx-speaker__list { left: 25px; top: 0; width: auto; }
  body.page-zabbix .zx-speaker__list li { position: absolute; left: 0; margin: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  body.page-zabbix .zx-speaker__list img { position: absolute; left: 0; top: 4px; width: 15px; height: 12px; }
  body.page-zabbix .zx-speaker__list li:nth-child(1) { top: 158px; width: 473px; white-space: nowrap; }
  body.page-zabbix .zx-speaker__list li:nth-child(2) { top: 193px; width: 419px; white-space: nowrap; }
  body.page-zabbix .zx-speaker__list li:nth-child(3) { top: 231px; width: 487px; }
  body.page-zabbix .zx-speaker__list li:nth-child(4) { top: 309px; width: 480px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-zabbix .zx-speaker {
    position: relative; width: 640px; height: 1268px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 640) / 640);
  }
  body.page-zabbix .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 640px; height: 1268px;
    max-width: none; margin: 0; padding: 0;
  }
  /* Абсолют и обнулённые поля — планшетная полоса распускает всё это
     в поток, а margin у абсолютного элемента прибавляется к координате. */
  body.page-zabbix .zx-speaker__h,
  body.page-zabbix .zx-speaker__photo,
  body.page-zabbix .zx-speaker__card,
  body.page-zabbix .zx-speaker__name,
  body.page-zabbix .zx-speaker__role,
  body.page-zabbix .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  body.page-zabbix .zx-speaker__h { left: 24px; top: 75px; width: 592px; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; text-align: center; }
  body.page-zabbix .zx-speaker__photo { left: 24px; top: 150px; width: 592px; height: 592px; max-width: none; border-radius: 24px; }
  body.page-zabbix .zx-speaker__card { left: 24px; top: 752px; width: 592px; height: 454px; border-radius: 20px; }
  body.page-zabbix .zx-speaker__name { left: 40px; top: 37px; font-size: 40px; line-height: 40px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-speaker__role { left: 35px; top: 111px; width: 385px; font-size: 24px; line-height: 26px; letter-spacing: -1px; }
  body.page-zabbix .zx-speaker__list { left: 35px; top: 0; width: auto; }
  body.page-zabbix .zx-speaker__list li { position: absolute; left: 0; margin: 0; padding-left: 25px; font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
  body.page-zabbix .zx-speaker__list img { position: absolute; left: 0; top: 4px; width: 15px; height: 12px; }
  body.page-zabbix .zx-speaker__list li:nth-child(1) { top: 209px; width: 525px; white-space: nowrap; }
  body.page-zabbix .zx-speaker__list li:nth-child(2) { top: 249px; width: 465px; white-space: nowrap; }
  body.page-zabbix .zx-speaker__list li:nth-child(3) { top: 288px; width: 538px; }
  body.page-zabbix .zx-speaker__list li:nth-child(4) { top: 374px; width: 543px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-zabbix .zx-speaker {
    position: relative; width: 480px; height: 1013px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 480) / 480);
  }
  body.page-zabbix .zx-speaker .wrap {
    position: absolute; left: 0; top: 0; width: 480px; height: 1013px;
    max-width: none; margin: 0; padding: 0;
  }
  /* Абсолют и обнулённые поля — планшетная полоса распускает всё это
     в поток, а margin у абсолютного элемента прибавляется к координате. */
  body.page-zabbix .zx-speaker__h,
  body.page-zabbix .zx-speaker__photo,
  body.page-zabbix .zx-speaker__card,
  body.page-zabbix .zx-speaker__name,
  body.page-zabbix .zx-speaker__role,
  body.page-zabbix .zx-speaker__list { position: absolute; margin: 0; padding: 0; }
  body.page-zabbix .zx-speaker__h { left: 16px; top: 35px; width: 448px; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; text-align: center; }
  body.page-zabbix .zx-speaker__photo { left: 16px; top: 85px; width: 448px; height: 448px; max-width: none; border-radius: 24px; }
  body.page-zabbix .zx-speaker__card { left: 16px; top: 538px; width: 448px; height: 415px; border-radius: 20px; }
  body.page-zabbix .zx-speaker__name { left: 27px; top: 29px; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; }
  body.page-zabbix .zx-speaker__role { left: 25px; top: 80px; width: 312px; font-size: 20px; line-height: 22px; letter-spacing: -1px; }
  body.page-zabbix .zx-speaker__list { left: 25px; top: 0; width: auto; }
  body.page-zabbix .zx-speaker__list li { position: absolute; left: 0; margin: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  body.page-zabbix .zx-speaker__list img { position: absolute; left: 0; top: 4px; width: 15px; height: 12px; }
  body.page-zabbix .zx-speaker__list li:nth-child(1) { top: 163px; width: 404px; }
  body.page-zabbix .zx-speaker__list li:nth-child(2) { top: 211px; width: 393px; }
  body.page-zabbix .zx-speaker__list li:nth-child(3) { top: 264px; width: 408px; }
  body.page-zabbix .zx-speaker__list li:nth-child(4) { top: 345px; width: 406px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ZABBIX — программа курса: не канва, а сетка Тильды
   ══════════════════════════════════════════════════════════════════════

   ⚠️ Этот блок — единственный на странице, который НЕ зеро-блок. У него нет
   артборда, он не масштабируется, а перетекает по обычной сетке Тильды со
   своими переломами: 1200 → контейнер 1200, 960 → 960, 640 → 640, ниже —
   во всю ширину. Канва с `zoom` тут была бы неправдой: на 1200 оригинал
   показывает блок в натуральную величину, а канва растянула бы его в 1.25.

   Числа сняты с боевой на 1440, 1000, 960, 640 и 393:

     полоса        колонки          заголовок      модуль        поля кнопки
     ≥1201         560 + 560        42/51.66       24/32.4       27 50 27 0
     961–1200      460 + 460        38/46.74       22/29.7       27 50 27 0
     641–960       600, стопкой     38/46.74       22/29.7       27 50 27 0
     ≤640          во всю ширину    30/36.9        20/27         15 50 14 0

   Отбивка заголовка от списка — 45 на всех полосах, поля записи 90/90. */
@media (min-width: 961px) and (max-width: 1200px) {
  body.page-zabbix .zx-program { padding: 90px 0; }
  body.page-zabbix .zx-program .wrap {
    /* flex-direction явно: планшетная полоса (max-width: 1260) ставит column,
       и колонки складывались в стопку при верных ширинах. */
    display: flex; flex-direction: row; gap: 20px;
    width: 960px; max-width: none; margin: 0 auto; padding: 0 10px;
  }
  body.page-zabbix .zx-program__h {
    flex: 0 0 460px; margin: 0; font-size: 38px; line-height: 46.74px;
  }
  body.page-zabbix .zx-program__list { flex: 0 0 460px; }
  body.page-zabbix .zx-mod__t { padding: 27px 50px 27px 0; font-size: 22px; line-height: 29.7px; }
  body.page-zabbix .zx-mod__t > span { max-width: 410px; }
}

@media (min-width: 641px) and (max-width: 960px) {
  body.page-zabbix .zx-program { padding: 90px 0; }
  body.page-zabbix .zx-program .wrap {
    display: block; width: 640px; max-width: none; margin: 0 auto; padding: 0 20px;
  }
  body.page-zabbix .zx-program__h {
    margin: 0 0 45px; font-size: 38px; line-height: 46.74px;
  }
  body.page-zabbix .zx-program__list { width: auto; }
  body.page-zabbix .zx-mod__t { padding: 27px 50px 27px 0; font-size: 22px; line-height: 29.7px; }
  body.page-zabbix .zx-mod__t > span { max-width: 550px; }
}

@media (max-width: 640px) {
  body.page-zabbix .zx-program { padding: 90px 0; }
  body.page-zabbix .zx-program .wrap {
    display: block; width: 100%; max-width: none; margin: 0; padding: 0 20px;
  }
  body.page-zabbix .zx-program__h {
    margin: 0 0 45px; font-size: 30px; line-height: 36.9px;
  }
  body.page-zabbix .zx-program__list { width: auto; }
  body.page-zabbix .zx-mod__t { padding: 15px 50px 14px 0; font-size: 20px; line-height: 27px; }
  body.page-zabbix .zx-mod__t > span { max-width: none; }
  body.page-zabbix .zx-mod__t::after { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — полосы 960, 640 и 480
   ══════════════════════════════════════════════════════════════════════

   ⚠️ Здесь НЕТ канвы с zoom, и это не упущение. У зеро-блоков интенсива
   стоит upscale="grid": артборд НЕ тянется за окном. Первый экран ровно 669
   px и при 1440, и при 393; внутри полосы между переломами размеры
   фиксированы, меняется только положение — содержимое центрируется.
   Проверено замером: заголовок «Для кого интенсив?» стоит на x = 26 при
   окне 960, на 71 при 1050, на 121 при 1150, то есть 26 + (окно − 960) / 2.

   Значит правильная модель — фиксированный контейнер, центрированный в
   окне: `.in-wrap` шириной 960 / 640 / 480 и абсолютные координаты внутри.
   Секция обрезает то, что вылезает, — так же, как запись у Тильды.

   Числа сняты с боевой ровно на 960, 640 и 480. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .page-intensiv .in-wrap { position: relative; width: 960px; max-width: none; margin: 0 auto; padding: 0; }
  /* ⚠️ Планшетная полоса ниже по файлу распускает всё это в поток и вешает
     поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к координате, поэтому
     мало вернуть position — надо обнулить и поля. */
  .page-intensiv .in-top__logo, .page-intensiv .in-top__cta,
  .page-intensiv .in-hero__start, .page-intensiv .in-hero__for,
  .page-intensiv .in-hero__h, .page-intensiv .in-hero__lead,
  .page-intensiv .in-hero__btn, .page-intensiv .in-hero__pic,
  .page-intensiv .in-who__h, .page-intensiv .in-who__item,
  .page-intensiv .in-who__pic, .page-intensiv .in-who__bullet,
  .page-intensiv .in-gains__h, .page-intensiv .in-gains__ico,
  .page-intensiv .in-gains__t, .page-intensiv .in-gains__btn,
  .page-intensiv .in-day__h, .page-intensiv .in-day__sub,
  .page-intensiv .in-day__panel, .page-intensiv .in-day__frame,
  .page-intensiv .in-day__item, .page-intensiv .in-day__btn {
    position: absolute; margin: 0;
  }
  .page-intensiv .in-who__list,
  .page-intensiv .in-gains__list { position: static; display: block; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ПРЯЧЕТ рамку дня (`display: none`), и без возврата
     она пропадала: координаты и размер применялись, а на экране рамки не
     было — расхождение, которого замер высоты секции не видит. */
  .page-intensiv .in-day__panel { display: block; }
  .page-intensiv .in-who__item { display: block; }
  .page-intensiv .in-gains__item { display: block; position: static; }
  .in-top { height: 92px; padding: 0; }
  .in-top .in-wrap { height: 92px; display: block; }
  .in-top__logo { left: 14px; top: 28px; width: 182px; height: 40px; }
  .in-top__logo img { width: 182px; height: 40px; }
  .in-top__cta { left: 723px; top: 16px; width: 229px; height: 60px; font-size: 20px; line-height: 31px; border-radius: 10px; }
  .in-hero { height: 669px; padding: 0; overflow: hidden; }
  .in-hero .in-wrap { height: 669px; }
  .in-hero__start { left: 27px; top: 38px; width: 560px; font-size: 24px; line-height: 37px; }
  .in-hero__for { left: 27px; top: 75px; width: 587px; font-size: 20px; line-height: 31px; }
  .in-hero__lead { left: 31px; top: 350px; width: 477px; font-size: 22px; line-height: 31px; }
  .in-hero__h { left: 27px; top: 139px; width: 603px; font-size: 43px; line-height: 43px; }
  .in-hero__btn { display: flex; left: 32px; top: 500px; width: 320px; height: 70px; font-size: 20px; line-height: 31px; }
  .in-hero__pic { left: 446px; top: 174px; width: 616px; height: 584px; max-width: none; }
  .in-who { height: 580px; padding: 0; overflow: hidden; }
  .in-who .in-wrap { height: 580px; }
  .in-who__h { left: 26px; top: 39px; width: 659px; font-size: 45px; line-height: normal; }
  .in-who__pic { display: block; left: 630px; top: 111px; width: 763px; height: 509px; max-width: none; }
  .in-who__item { font-size: 24px; line-height: 24px; }
  .in-who__bullet { width: 100px; height: 100px; }
  .in-who__bullet img { position: absolute; width: 60px; height: 60px; }
  .in-who__item--1 { left: 154px; top: 146px; width: 419px; }
  .in-who__item--1 .in-who__bullet { left: -126px; top: -9px; }
  .in-who__item--1 .in-who__bullet img { left: 17px; top: 18px; transform: none; }
  .in-who__item--2 { left: 155px; top: 278px; width: 420px; }
  .in-who__item--2 .in-who__bullet { left: -127px; top: -14px; }
  .in-who__item--2 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-who__item--3 { left: 155px; top: 402px; width: 417px; }
  .in-who__item--3 .in-who__bullet { left: -127px; top: -8px; }
  .in-who__item--3 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-gains { height: 1006px; padding: 0; overflow: hidden; }
  .in-gains .in-wrap { height: 1006px; }
  .in-gains__h { left: 33px; top: 28px; width: 653px; font-size: 50px; line-height: normal; }
  .in-gains__t { font-size: 21px; line-height: 24px; }
  .in-gains__item--1 .in-gains__ico { left: 52px; top: 244px; width: 130px; height: 133px; max-width: none; }
  .in-gains__item--1 .in-gains__t { left: 212px; top: 268px; width: 245px; }
  .in-gains__item--2 .in-gains__ico { left: 493px; top: 227px; width: 141px; height: 141px; max-width: none; }
  .in-gains__item--2 .in-gains__t { left: 652px; top: 270px; width: 280px; }
  .in-gains__item--3 .in-gains__ico { left: 53px; top: 465px; width: 98px; height: 154px; max-width: none; }
  .in-gains__item--3 .in-gains__t { left: 191px; top: 494px; width: 279px; }
  .in-gains__item--4 .in-gains__ico { left: 512px; top: 463px; width: 98px; height: 98px; max-width: none; }
  .in-gains__item--4 .in-gains__t { left: 650px; top: 492px; width: 279px; }
  .in-gains__item--5 .in-gains__ico { left: 10px; top: 655px; width: 171px; height: 168px; max-width: none; }
  .in-gains__item--5 .in-gains__t { left: 197px; top: 669px; width: 230px; }
  .in-gains__item--6 .in-gains__ico { left: 490px; top: 659px; width: 171px; height: 171px; max-width: none; }
  .in-gains__item--6 .in-gains__t { left: 677px; top: 673px; width: 230px; }
  .in-gains__btn { display: flex; left: 300px; top: 855px; width: 360px; height: 70px; font-size: 20px; line-height: 31px; }
  .in-day--1 { height: 960px; padding: 0; overflow: hidden; }
  .in-day--1 .in-wrap { height: 960px; }
  .in-day--1 .in-day__h { left: 28px; top: 57px; width: 708px; font-size: 42px; line-height: normal; }
  .in-day--1 .in-day__sub { left: 28px; top: 255px; width: 560px; font-size: 28px; line-height: 43px; }
  .in-day--1 .in-day__panel { left: 10px; top: 322px; width: 941px; height: 455px; }
  .in-day--1 .in-day__frame { display: block; left: 530px; top: 343px; width: 389px; height: 264px; }
  .in-day--1 .in-day__p, .in-day--1 .in-day__ul, .in-day--1 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--1 .in-day__item--1 { left: 36px; top: 353px; width: 395px; }
  .in-day--1 .in-day__item--2 { left: 37px; top: 519px; width: 484px; }
  .in-day--1 .in-day__item--3 { left: 34px; top: 646px; width: 444px; }
  .in-day--1 .in-day__item--4 { left: 560px; top: 364px; width: 344px; }
  .in-day--1 .in-day__item--5 { left: 561px; top: 465px; width: 343px; }
  .in-day--1 .in-day__btn { display: flex; left: 300px; top: 817px; width: 360px; height: 70px; font-size: 20px; line-height: 31px; }
  .in-day--2 { height: 900px; padding: 0; overflow: hidden; }
  .in-day--2 .in-wrap { height: 900px; }
  .in-day--2 .in-day__h { left: 28px; top: 57px; width: 600px; font-size: 48px; line-height: normal; }
  .in-day--2 .in-day__sub { left: 28px; top: 255px; width: 560px; font-size: 28px; line-height: 43px; }
  .in-day--2 .in-day__panel { left: 10px; top: 322px; width: 941px; height: 394px; }
  .in-day--2 .in-day__frame { display: none; }
  .in-day--2 .in-day__p, .in-day--2 .in-day__ul, .in-day--2 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--2 .in-day__item--1 { left: 36px; top: 353px; width: 371px; }
  .in-day--2 .in-day__item--2 { left: 37px; top: 463px; width: 444px; }
  .in-day--2 .in-day__item--3 { left: 37px; top: 560px; width: 444px; }
  .in-day--2 .in-day__item--4 { left: 550px; top: 349px; width: 371px; }
  .in-day--2 .in-day__item--5 { left: 550px; top: 466px; width: 362px; }
  .in-day--2 .in-day__btn { display: flex; left: 300px; top: 767px; width: 360px; height: 70px; font-size: 20px; line-height: 31px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-intensiv .in-wrap { position: relative; width: 640px; max-width: none; margin: 0 auto; padding: 0; }
  /* ⚠️ Планшетная полоса ниже по файлу распускает всё это в поток и вешает
     поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к координате, поэтому
     мало вернуть position — надо обнулить и поля. */
  .page-intensiv .in-top__logo, .page-intensiv .in-top__cta,
  .page-intensiv .in-hero__start, .page-intensiv .in-hero__for,
  .page-intensiv .in-hero__h, .page-intensiv .in-hero__lead,
  .page-intensiv .in-hero__btn, .page-intensiv .in-hero__pic,
  .page-intensiv .in-who__h, .page-intensiv .in-who__item,
  .page-intensiv .in-who__pic, .page-intensiv .in-who__bullet,
  .page-intensiv .in-gains__h, .page-intensiv .in-gains__ico,
  .page-intensiv .in-gains__t, .page-intensiv .in-gains__btn,
  .page-intensiv .in-day__h, .page-intensiv .in-day__sub,
  .page-intensiv .in-day__panel, .page-intensiv .in-day__frame,
  .page-intensiv .in-day__item, .page-intensiv .in-day__btn {
    position: absolute; margin: 0;
  }
  .page-intensiv .in-who__list,
  .page-intensiv .in-gains__list { position: static; display: block; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ПРЯЧЕТ рамку дня (`display: none`), и без возврата
     она пропадала: координаты и размер применялись, а на экране рамки не
     было — расхождение, которого замер высоты секции не видит. */
  .page-intensiv .in-day__panel { display: block; }
  .page-intensiv .in-who__item { display: block; }
  .page-intensiv .in-gains__item { display: block; position: static; }
  .in-top { height: 92px; padding: 0; }
  .in-top .in-wrap { height: 92px; display: block; }
  .in-top__logo { left: 11px; top: 28px; width: 182px; height: 40px; }
  .in-top__logo img { width: 182px; height: 40px; }
  .in-top__cta { left: 401px; top: 16px; width: 229px; height: 60px; font-size: 20px; line-height: 31px; border-radius: 10px; }
  .in-hero { height: 669px; padding: 0; overflow: hidden; }
  .in-hero .in-wrap { height: 669px; }
  .in-hero__start { left: 10px; top: 21px; width: 560px; font-size: 24px; line-height: 37px; }
  .in-hero__for { left: 10px; top: 58px; width: 560px; font-size: 20px; line-height: 31px; }
  .in-hero__lead { left: 10px; top: 329px; width: 532px; font-size: 21px; line-height: 29px; }
  .in-hero__h { left: 11px; top: 153px; width: 517px; font-size: 37px; line-height: 37px; }
  .in-hero__btn { display: flex; left: 9px; top: 439px; width: 320px; height: 70px; font-size: 20px; line-height: 31px; }
  .in-hero__pic { left: 293px; top: 313px; width: 370px; height: 477px; max-width: none; }
  .in-who { height: 660px; padding: 0; overflow: hidden; }
  .in-who .in-wrap { height: 660px; }
  .in-who__h { left: 39px; top: 50px; width: 537px; font-size: 48px; line-height: normal; }
  .in-who__pic { display: none; }
  .in-who__item { font-size: 26px; line-height: 26px; }
  .in-who__bullet { width: 100px; height: 100px; }
  .in-who__bullet img { position: absolute; width: 60px; height: 60px; }
  .in-who__item--1 { left: 170px; top: 161px; width: 448px; }
  .in-who__item--1 .in-who__bullet { left: -134px; top: -5px; }
  .in-who__item--1 .in-who__bullet img { left: 18px; top: 20px; transform: none; }
  .in-who__item--2 { left: 170px; top: 303px; width: 425px; }
  .in-who__item--2 .in-who__bullet { left: -136px; top: -9px; }
  .in-who__item--2 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-who__item--3 { left: 172px; top: 446px; width: 450px; }
  .in-who__item--3 .in-who__bullet { left: -138px; top: -9px; }
  .in-who__item--3 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-gains { height: 1160px; padding: 0; overflow: hidden; }
  .in-gains .in-wrap { height: 1160px; }
  .in-gains__h { left: 51px; top: 25px; width: 539px; font-size: 40px; line-height: normal; }
  .in-gains__t { font-size: 18px; line-height: 21px; }
  .in-gains__item--1 .in-gains__ico { left: 90px; top: 139px; width: 107px; height: 110px; max-width: none; }
  .in-gains__item--1 .in-gains__t { left: 229px; top: 161px; width: 333px; }
  .in-gains__item--2 .in-gains__ico { left: 90px; top: 280px; width: 117px; height: 117px; max-width: none; }
  .in-gains__item--2 .in-gains__t { left: 230px; top: 296px; width: 342px; }
  .in-gains__item--3 .in-gains__ico { left: 114px; top: 432px; width: 72px; height: 113px; max-width: none; }
  .in-gains__item--3 .in-gains__t { left: 232px; top: 458px; width: 331px; }
  .in-gains__item--4 .in-gains__ico { left: 112px; top: 570px; width: 72px; height: 72px; max-width: none; }
  .in-gains__item--4 .in-gains__t { left: 230px; top: 596px; width: 331px; }
  .in-gains__item--5 .in-gains__ico { left: 70px; top: 702px; width: 138px; height: 136px; max-width: none; }
  .in-gains__item--5 .in-gains__t { left: 229px; top: 744px; width: 340px; }
  .in-gains__item--6 .in-gains__ico { left: 70px; top: 841px; width: 138px; height: 138px; max-width: none; }
  .in-gains__item--6 .in-gains__t { left: 229px; top: 883px; width: 340px; }
  .in-gains__btn { display: flex; left: 168px; top: 1040px; width: 304px; height: 60px; font-size: 22px; line-height: 34.1px; }
  .in-day--1 { height: 1090px; padding: 0; overflow: hidden; }
  .in-day--1 .in-wrap { height: 1090px; }
  .in-day--1 .in-day__h { left: 34px; top: 28px; width: 391px; font-size: 30px; line-height: normal; }
  .in-day--1 .in-day__sub { left: 34px; top: 178px; width: 560px; font-size: 22px; line-height: 34px; }
  .in-day--1 .in-day__panel { left: 36px; top: 246px; width: 565px; height: 701px; }
  .in-day--1 .in-day__frame { display: block; left: 59px; top: 646px; width: 519px; height: 265px; }
  .in-day--1 .in-day__p, .in-day--1 .in-day__ul, .in-day--1 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--1 .in-day__item--1 { left: 70px; top: 278px; width: 394px; }
  .in-day--1 .in-day__item--2 { left: 70px; top: 438px; width: 505px; }
  .in-day--1 .in-day__item--3 { left: 70px; top: 557px; width: 394px; }
  .in-day--1 .in-day__item--4 { left: 90px; top: 670px; width: 394px; }
  .in-day--1 .in-day__item--5 { left: 92px; top: 789px; width: 379px; }
  .in-day--1 .in-day__btn { display: flex; left: 168px; top: 982px; width: 304px; height: 60px; font-size: 22px; line-height: 34.1px; }
  .in-day--2 { height: 1020px; padding: 0; overflow: hidden; }
  .in-day--2 .in-wrap { height: 1020px; }
  .in-day--2 .in-day__h { left: 34px; top: 28px; width: 437px; font-size: 36px; line-height: normal; }
  .in-day--2 .in-day__sub { left: 34px; top: 182px; width: 560px; font-size: 24px; line-height: 37px; }
  .in-day--2 .in-day__panel { left: 36px; top: 246px; width: 565px; height: 619px; }
  .in-day--2 .in-day__frame { display: none; }
  .in-day--2 .in-day__p, .in-day--2 .in-day__ul, .in-day--2 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--2 .in-day__item--1 { left: 70px; top: 278px; width: 372px; }
  .in-day--2 .in-day__item--2 { left: 70px; top: 393px; width: 394px; }
  .in-day--2 .in-day__item--3 { left: 70px; top: 503px; width: 394px; }
  .in-day--2 .in-day__item--4 { left: 70px; top: 621px; width: 394px; }
  .in-day--2 .in-day__item--5 { left: 70px; top: 728px; width: 379px; }
  .in-day--2 .in-day__btn { display: flex; left: 168px; top: 902px; width: 304px; height: 60px; font-size: 22px; line-height: 34.1px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-intensiv .in-wrap { position: relative; width: 480px; max-width: none; margin: 0 auto; padding: 0; }
  /* ⚠️ Планшетная полоса ниже по файлу распускает всё это в поток и вешает
     поля. У абсолютного элемента margin ПРИБАВЛЯЕТСЯ к координате, поэтому
     мало вернуть position — надо обнулить и поля. */
  .page-intensiv .in-top__logo, .page-intensiv .in-top__cta,
  .page-intensiv .in-hero__start, .page-intensiv .in-hero__for,
  .page-intensiv .in-hero__h, .page-intensiv .in-hero__lead,
  .page-intensiv .in-hero__btn, .page-intensiv .in-hero__pic,
  .page-intensiv .in-who__h, .page-intensiv .in-who__item,
  .page-intensiv .in-who__pic, .page-intensiv .in-who__bullet,
  .page-intensiv .in-gains__h, .page-intensiv .in-gains__ico,
  .page-intensiv .in-gains__t, .page-intensiv .in-gains__btn,
  .page-intensiv .in-day__h, .page-intensiv .in-day__sub,
  .page-intensiv .in-day__panel, .page-intensiv .in-day__frame,
  .page-intensiv .in-day__item, .page-intensiv .in-day__btn {
    position: absolute; margin: 0;
  }
  .page-intensiv .in-who__list,
  .page-intensiv .in-gains__list { position: static; display: block; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ПРЯЧЕТ рамку дня (`display: none`), и без возврата
     она пропадала: координаты и размер применялись, а на экране рамки не
     было — расхождение, которого замер высоты секции не видит. */
  .page-intensiv .in-day__panel { display: block; }
  .page-intensiv .in-who__item { display: block; }
  .page-intensiv .in-gains__item { display: block; position: static; }
  .in-top { height: 75px; padding: 0; }
  .in-top .in-wrap { height: 75px; display: block; }
  .in-top__logo { left: 10px; top: 21px; width: 136px; height: 30px; }
  .in-top__logo img { width: 136px; height: 30px; }
  .in-top__cta { display: none; }  /* на этом макете Тильда её не показывает */
  .in-hero { height: 669px; padding: 0; overflow: hidden; }
  .in-hero .in-wrap { height: 669px; }
  .in-hero__start { left: 10px; top: 21px; width: 560px; font-size: 24px; line-height: 37px; }
  .in-hero__for { left: 10px; top: 61px; width: 286px; font-size: 18px; line-height: 22px; }
  .in-hero__lead { left: 11px; top: 324px; width: 453px; font-size: 18px; line-height: 25px; }
  .in-hero__h { left: 10px; top: 154px; width: 453px; font-size: 35px; line-height: 35px; }
  .in-hero__btn { display: flex; left: 10px; top: 426px; width: 278px; height: 60px; font-size: 18px; line-height: 27.9px; }
  .in-hero__pic { left: 113px; top: 364px; width: 437px; height: 401px; max-width: none; }
  .in-who { height: 550px; padding: 0; overflow: hidden; }
  .in-who .in-wrap { height: 550px; }
  .in-who__h { left: 10px; top: 36px; width: 374px; font-size: 40px; line-height: normal; }
  .in-who__pic { display: none; }
  .in-who__item { font-size: 24px; line-height: 24px; }
  .in-who__bullet { width: 80px; height: 80px; }
  .in-who__bullet img { position: absolute; width: 40px; height: 40px; }
  .in-who__item--1 { left: 120px; top: 120px; width: 337px; }
  .in-who__item--1 .in-who__bullet { left: -110px; top: 7px; }
  .in-who__item--1 .in-who__bullet img { left: 18px; top: 19px; transform: none; }
  .in-who__item--2 { left: 120px; top: 265px; width: 340px; }
  .in-who__item--2 .in-who__bullet { left: -109px; top: -4px; }
  .in-who__item--2 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-who__item--3 { left: 121px; top: 386px; width: 348px; }
  .in-who__item--3 .in-who__bullet { left: -109px; top: 4px; }
  .in-who__item--3 .in-who__bullet img { left: 20px; top: 20px; transform: none; }
  .in-gains { height: 1060px; padding: 0; overflow: hidden; }
  .in-gains .in-wrap { height: 1060px; }
  .in-gains__h { left: 19px; top: 25px; width: 443px; font-size: 36px; line-height: normal; }
  .in-gains__t { font-size: 17px; line-height: 20px; }
  .in-gains__item--1 .in-gains__ico { left: 19px; top: 141px; width: 97px; height: 100px; max-width: none; }
  .in-gains__item--1 .in-gains__t { left: 150px; top: 155px; width: 310px; }
  .in-gains__item--2 .in-gains__ico { left: 24px; top: 269px; width: 109px; height: 109px; max-width: none; }
  .in-gains__item--2 .in-gains__t { left: 151px; top: 285px; width: 313px; }
  .in-gains__item--3 .in-gains__ico { left: 37px; top: 403px; width: 72px; height: 113px; max-width: none; }
  .in-gains__item--3 .in-gains__t { left: 151px; top: 420px; width: 310px; }
  .in-gains__item--4 .in-gains__ico { left: 37px; top: 533px; width: 72px; height: 72px; max-width: none; }
  .in-gains__item--4 .in-gains__t { left: 151px; top: 550px; width: 310px; }
  .in-gains__item--5 .in-gains__ico { left: 26px; top: 657px; width: 106px; height: 104px; max-width: none; }
  .in-gains__item--5 .in-gains__t { left: 151px; top: 669px; width: 340px; }
  .in-gains__item--6 .in-gains__ico { left: 26px; top: 769px; width: 106px; height: 106px; max-width: none; }
  .in-gains__item--6 .in-gains__t { left: 151px; top: 781px; width: 340px; }
  .in-gains__btn { display: flex; left: 88px; top: 934px; width: 304px; height: 60px; font-size: 22px; line-height: 34.1px; }
  .in-day--1 { height: 1110px; padding: 0; overflow: hidden; }
  .in-day--1 .in-wrap { height: 1110px; }
  .in-day--1 .in-day__h { left: 20px; top: 30px; width: 460px; font-size: 28px; line-height: normal; }
  .in-day--1 .in-day__sub { left: 22px; top: 152px; width: 560px; font-size: 22px; line-height: 34px; }
  .in-day--1 .in-day__panel { left: 21px; top: 207px; width: 435px; height: 744px; }
  .in-day--1 .in-day__frame { display: block; left: 44px; top: 607px; width: 387px; height: 280px; }
  .in-day--1 .in-day__p, .in-day--1 .in-day__ul, .in-day--1 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--1 .in-day__item--1 { left: 46px; top: 235px; width: 394px; }
  .in-day--1 .in-day__item--2 { left: 46px; top: 397px; width: 395px; }
  .in-day--1 .in-day__item--3 { left: 48px; top: 526px; width: 394px; }
  .in-day--1 .in-day__item--4 { left: 70px; top: 633px; width: 349px; }
  .in-day--1 .in-day__item--5 { left: 70px; top: 746px; width: 345px; }
  .in-day--1 .in-day__btn { display: flex; left: 88px; top: 996px; width: 304px; height: 60px; font-size: 22px; line-height: 34.1px; }
  .in-day--2 { height: 990px; padding: 0; overflow: hidden; }
  .in-day--2 .in-wrap { height: 990px; }
  .in-day--2 .in-day__h { left: 20px; top: 30px; width: 345px; font-size: 28px; line-height: normal; }
  .in-day--2 .in-day__sub { left: 22px; top: 152px; width: 560px; font-size: 24px; line-height: 37px; }
  .in-day--2 .in-day__panel { left: 21px; top: 207px; width: 435px; height: 614px; }
  .in-day--2 .in-day__frame { display: none; }
  .in-day--2 .in-day__p, .in-day--2 .in-day__ul, .in-day--2 .in-day__task { font-size: 24px; line-height: 28px; }
  .in-day--2 .in-day__item--1 { left: 46px; top: 235px; width: 369px; }
  .in-day--2 .in-day__item--2 { left: 47px; top: 349px; width: 394px; }
  .in-day--2 .in-day__item--3 { left: 47px; top: 463px; width: 394px; }
  .in-day--2 .in-day__item--4 { left: 48px; top: 580px; width: 349px; }
  .in-day--2 .in-day__item--5 { left: 50px; top: 689px; width: 379px; }
  .in-day--2 .in-day__btn { display: flex; left: 88px; top: 877px; width: 304px; height: 60px; font-size: 18px; line-height: 27.9px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — спикеры по полосам
   ══════════════════════════════════════════════════════════════════════

   Единственный на странице блок с upscale="window" (вместе с подвалом):
   он как раз ТЯНЕТСЯ. Но на ширинах замера (960, 640, 480) артборд равен
   окну, масштаб единица, — значит числа те же настоящие пиксели, и в одном
   ряду с остальными полосами блок можно вести без zoom.

   Пункты фактов у Тильды расставлены поштучно и с разным зазором, поэтому
   и здесь они ставятся координатами, а не потоком. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .in-speakers { height: 905px; padding: 0; overflow: hidden; }
  .in-speakers .in-wrap { height: 905px; }
  .page-intensiv .in-speakers__h, .page-intensiv .in-sp__card,
  .page-intensiv .in-sp__pic, .page-intensiv .in-sp__name,
  .page-intensiv .in-sp__role, .page-intensiv .in-sp__facts,
  .page-intensiv .in-sp__facts li { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ГАСИТ плашку под именем (`display: none`) и красит
     имя цветом вместо белого по заливке. Возвращаем: у Тильды на этих
     полосах плашка есть. */
  .page-intensiv .in-sp__mark::before { display: block; }
  .page-intensiv .in-sp__mark--blue { color: #fff; }
  .page-intensiv .in-sp__mark--lime { color: var(--ink); }
  /* ⚠️ У статьи спикера в планшетной полосе margin-top 32. Внутри `.in-wrap`
     нет ни поля, ни рамки, поэтому это поле СХЛОПЫВАЕТСЯ наружу и опускает
     весь контейнер на 32 — при том что каждая координата внутри верна.
     Сходилась одна высота секции. */
  .page-intensiv .in-sp { margin: 0; }
  .in-speakers__h { white-space: nowrap; left: 50%; top: 75px; transform: translateX(-50%); font-size: 50px; line-height: 50px; }
  .in-sp--top .in-sp__facts li:nth-child(1),
  .in-sp--top .in-sp__facts li:nth-child(3),
  .in-sp--bottom .in-sp__facts li:nth-child(1) { white-space: nowrap; line-height: 18px; }
  .in-sp--top .in-sp__pic { left: 24px; top: 160px; width: 365px; height: 365px; }
  .in-sp--top .in-sp__card { left: 404px; top: 160px; width: 532px; height: 365px; }
  .in-sp--top .in-sp__name { left: 27px; top: 26px; font-size: 30px; line-height: 30px; }
  .in-sp--top .in-sp__mark::before { left: -2px; top: 2px; width: 252px; height: 32px; }
  .in-sp--top .in-sp__role--1 { left: 25px; top: 80px; width: 478px; font-size: 20px; line-height: 20px; }
  .in-sp--top .in-sp__role--2 { left: 25px; top: 110px; width: 247px; font-size: 20px; line-height: 20px; }
  .in-sp--top .in-sp__facts { left: 25px; top: 0; width: auto; }
  .in-sp--top .in-sp__facts li { left: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  .in-sp--top .in-sp__facts li:nth-child(1) { top: 220px; width: 363px; }
  .in-sp--top .in-sp__facts li:nth-child(2) { top: 253px; width: 394px; }
  .in-sp--top .in-sp__facts li:nth-child(3) { top: 312px; width: 294px; }
  .in-sp--bottom .in-sp__pic { left: 571px; top: 540px; width: 365px; height: 365px; }
  .in-sp--bottom .in-sp__card { left: 24px; top: 540px; width: 532px; height: 365px; }
  .in-sp--bottom .in-sp__name { left: 27px; top: 26px; font-size: 30px; line-height: 30px; }
  .in-sp--bottom .in-sp__mark::before { left: -2px; top: 2px; width: 255px; height: 32px; }
  .in-sp--bottom .in-sp__role--1 { left: 25px; top: 80px; width: 366px; font-size: 20px; line-height: 24px; }
  .in-sp--bottom .in-sp__role--2 { display: none; }
  .in-sp--bottom .in-sp__facts { left: 25px; top: 0; width: auto; }
  .in-sp--bottom .in-sp__facts li { left: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  .in-sp--bottom .in-sp__facts li:nth-child(1) { top: 172px; width: 363px; }
  .in-sp--bottom .in-sp__facts li:nth-child(2) { top: 205px; width: 405px; }
  .in-sp--bottom .in-sp__facts li:nth-child(3) { top: 264px; width: 435px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .in-speakers { height: 2268px; padding: 0; overflow: hidden; }
  .in-speakers .in-wrap { height: 2268px; }
  .page-intensiv .in-speakers__h, .page-intensiv .in-sp__card,
  .page-intensiv .in-sp__pic, .page-intensiv .in-sp__name,
  .page-intensiv .in-sp__role, .page-intensiv .in-sp__facts,
  .page-intensiv .in-sp__facts li { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ГАСИТ плашку под именем (`display: none`) и красит
     имя цветом вместо белого по заливке. Возвращаем: у Тильды на этих
     полосах плашка есть. */
  .page-intensiv .in-sp__mark::before { display: block; }
  .page-intensiv .in-sp__mark--blue { color: #fff; }
  .page-intensiv .in-sp__mark--lime { color: var(--ink); }
  /* ⚠️ У статьи спикера в планшетной полосе margin-top 32. Внутри `.in-wrap`
     нет ни поля, ни рамки, поэтому это поле СХЛОПЫВАЕТСЯ наружу и опускает
     весь контейнер на 32 — при том что каждая координата внутри верна.
     Сходилась одна высота секции. */
  .page-intensiv .in-sp { margin: 0; }
  .in-speakers__h { white-space: nowrap; left: 50%; top: 75px; transform: translateX(-50%); font-size: 40px; line-height: 40px; }
  .in-sp--top .in-sp__facts li:nth-child(1),
  .in-sp--top .in-sp__facts li:nth-child(3),
  .in-sp--bottom .in-sp__facts li:nth-child(1) { white-space: nowrap; line-height: 20px; }
  .page-intensiv .in-sp__role { white-space: normal; }
  .in-sp--top .in-sp__pic { left: 24px; top: 150px; width: 592px; height: 592px; }
  .in-sp--top .in-sp__card { left: 24px; top: 752px; width: 592px; height: 430px; }
  .in-sp--top .in-sp__name { left: 37px; top: 36px; font-size: 40px; line-height: 40px; }
  .in-sp--top .in-sp__mark::before { left: -2px; top: 2px; width: 338px; height: 43px; }
  .in-sp--top .in-sp__role--1 { left: 35px; top: 111px; width: 385px; font-size: 24px; line-height: 26px; }
  .in-sp--top .in-sp__role--2 { left: 35px; top: 178px; width: 302px; font-size: 24px; line-height: 24px; }
  .in-sp--top .in-sp__facts { left: 35px; top: 0; width: auto; }
  .in-sp--top .in-sp__facts li { left: 0; padding-left: 25px; font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
  .in-sp--top .in-sp__facts li:nth-child(1) { top: 252px; width: 403px; }
  .in-sp--top .in-sp__facts li:nth-child(2) { top: 292px; width: 437px; }
  .in-sp--top .in-sp__facts li:nth-child(3) { top: 360px; width: 326px; }
  .in-sp--bottom .in-sp__pic { left: 24px; top: 1217px; width: 592px; height: 592px; }
  .in-sp--bottom .in-sp__card { left: 24px; top: 1819px; width: 592px; height: 449px; }
  .in-sp--bottom .in-sp__name { left: 37px; top: 36px; font-size: 40px; line-height: 40px; }
  .in-sp--bottom .in-sp__mark::before { left: -2px; top: 2px; width: 344px; height: 43px; }
  .in-sp--bottom .in-sp__role--1 { left: 35px; top: 111px; width: 461px; font-size: 24px; line-height: 29px; }
  .in-sp--bottom .in-sp__role--2 { display: none; }
  .in-sp--bottom .in-sp__facts { left: 35px; top: 0; width: auto; }
  .in-sp--bottom .in-sp__facts li { left: 0; padding-left: 25px; font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
  .in-sp--bottom .in-sp__facts li:nth-child(1) { top: 219px; width: 403px; }
  .in-sp--bottom .in-sp__facts li:nth-child(2) { top: 259px; width: 462px; }
  .in-sp--bottom .in-sp__facts li:nth-child(3) { top: 327px; width: 491px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  .in-speakers { height: 1753px; padding: 0; overflow: hidden; }
  .in-speakers .in-wrap { height: 1753px; }
  .page-intensiv .in-speakers__h, .page-intensiv .in-sp__card,
  .page-intensiv .in-sp__pic, .page-intensiv .in-sp__name,
  .page-intensiv .in-sp__role, .page-intensiv .in-sp__facts,
  .page-intensiv .in-sp__facts li { position: absolute; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса ГАСИТ плашку под именем (`display: none`) и красит
     имя цветом вместо белого по заливке. Возвращаем: у Тильды на этих
     полосах плашка есть. */
  .page-intensiv .in-sp__mark::before { display: block; }
  .page-intensiv .in-sp__mark--blue { color: #fff; }
  .page-intensiv .in-sp__mark--lime { color: var(--ink); }
  /* ⚠️ У статьи спикера в планшетной полосе margin-top 32. Внутри `.in-wrap`
     нет ни поля, ни рамки, поэтому это поле СХЛОПЫВАЕТСЯ наружу и опускает
     весь контейнер на 32 — при том что каждая координата внутри верна.
     Сходилась одна высота секции. */
  .page-intensiv .in-sp { margin: 0; }
  .in-speakers__h { white-space: nowrap; left: 50%; top: 35px; transform: translateX(-50%); font-size: 30px; line-height: 30px; }
  .in-sp--top .in-sp__facts li:nth-child(1),
  .in-sp--top .in-sp__facts li:nth-child(3),
  .in-sp--bottom .in-sp__facts li:nth-child(1) { white-space: nowrap; line-height: 18px; }
  .page-intensiv .in-sp__role { white-space: normal; }
  .in-sp--top .in-sp__pic { left: 16px; top: 85px; width: 448px; height: 448px; }
  .in-sp--top .in-sp__card { left: 16px; top: 538px; width: 448px; height: 349px; }
  .in-sp--top .in-sp__name { left: 27px; top: 26px; font-size: 30px; line-height: 30px; }
  .in-sp--top .in-sp__mark::before { left: -2px; top: 0px; width: 252px; height: 33px; }
  .in-sp--top .in-sp__role--1 { left: 25px; top: 80px; width: 312px; font-size: 20px; line-height: 22px; }
  .in-sp--top .in-sp__role--2 { left: 25px; top: 134px; width: 247px; font-size: 20px; line-height: 20px; }
  .in-sp--top .in-sp__facts { left: 25px; top: 0; width: auto; }
  .in-sp--top .in-sp__facts li { left: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  .in-sp--top .in-sp__facts li:nth-child(1) { top: 204px; width: 363px; }
  .in-sp--top .in-sp__facts li:nth-child(2) { top: 237px; width: 394px; }
  .in-sp--top .in-sp__facts li:nth-child(3) { top: 296px; width: 294px; }
  .in-sp--bottom .in-sp__pic { left: 16px; top: 902px; width: 448px; height: 448px; }
  .in-sp--bottom .in-sp__card { left: 16px; top: 1360px; width: 448px; height: 393px; }
  .in-sp--bottom .in-sp__name { left: 27px; top: 24px; font-size: 30px; line-height: 30px; }
  .in-sp--bottom .in-sp__mark::before { left: -2px; top: 0px; width: 255px; height: 33px; }
  .in-sp--bottom .in-sp__role--1 { left: 25px; top: 80px; width: 361px; font-size: 20px; line-height: 24px; }
  .in-sp--bottom .in-sp__role--2 { display: none; }
  .in-sp--bottom .in-sp__facts { left: 25px; top: 0; width: auto; }
  .in-sp--bottom .in-sp__facts li { left: 0; padding-left: 25px; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  .in-sp--bottom .in-sp__facts li:nth-child(1) { top: 178px; width: 363px; }
  .in-sp--bottom .in-sp__facts li:nth-child(2) { top: 211px; width: 394px; }
  .in-sp--bottom .in-sp__facts li:nth-child(3) { top: 270px; width: 328px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — системные требования ниже 1200
   ══════════════════════════════════════════════════════════════════════

   Обычный блок Тильды (T480), не зеро-блок: две колонки на десктопе, а
   ниже 1200 — стопкой, картинка сверху. Контейнер 640 с полями 20, ниже
   640 — во всю ширину. Картинка занимает всю колонку, пропорции 3:4.

   Снято на 960, 640 и 480: записи 1512, 1374 и 1249. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .in-req { padding: 45px 0; }
  .in-req .in-wrap {
    display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px;
  }
  .in-req__pic {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
    margin: 0 0 30px; object-fit: cover;
  }
  .in-req__body { width: auto; }
  .in-req__h { padding: 0; text-align: left; }
  .in-req__text { text-align: left; }
  .in-req__text ul { padding-left: 20px; }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .in-req__h { margin: 0 0 28px; font-size: 38px; line-height: 46.74px; font-weight: 400; }
  .in-req__text { font-size: 18px; line-height: 27.9px; }
  .in-req__text p:last-of-type,
  .in-req__text p b { line-height: 27.9px; }
  .in-req__text .in-req__ps { margin-top: 28px; }
}

@media (min-width: 480px) and (max-width: 959.98px) {
  .in-req__h { margin: 0 0 28px; font-size: 30px; line-height: 36.9px; font-weight: 400; }
  .in-req__text { font-size: 16px; line-height: 23.2px; }
  .in-req__text p:last-of-type,
  .in-req__text p b { line-height: 23.2px; }
  .in-req__text .in-req__ps { margin-top: 23px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — форматы участия ниже 1200
   ══════════════════════════════════════════════════════════════════════

   Тоже обычный блок Тильды: ниже 1200 карточки встают друг под друга,
   контейнер 640 (на 480 — во всю ширину), поля 20 снаружи и 32 внутри
   карточки. Высоты карточек у Тильды жёсткие, кнопка прижата ко дну:
   42 у первой, 57 у второй — те же числа, что на десктопе. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .in-plans { padding: 75px 0; }
  .in-plans .in-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
  /* +4: у Тильды коробка заголовка на столько выше строки. */
  .in-plans__h { min-height: 0; margin: 0 0 34px; font-size: 38px; line-height: 46.74px; }
  .in-plans__row { display: block; }
  .in-plan { width: 600px; margin: 0; padding: 42px 32px; }
  .in-plan:not(.in-plan--featured) { height: 601px; }
  .in-plan--featured { width: 600px; height: 631px; margin: 35px 0 0; padding: 42px 32px; }
  .in-plan__name { font-size: 20px; line-height: 27px; }
  .in-plan__badge { margin: 10px 0 0; font-size: 24px; line-height: 37.2px; }
  .in-plan__price { margin: 30px 0 0; font-size: 38px; line-height: 46.74px; }
  .in-plan__list { margin: 25px 0 0; font-size: 14px; line-height: 21.7px; }
  .in-plan__list li { padding: 10px 0; }
  .in-plan__btn { width: 272px; height: 60px; bottom: 42px; }
  .in-plan--featured .in-plan__btn { bottom: 57px; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .in-plans { padding: 75px 0; }
  .in-plans .in-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
  .in-plans__h { min-height: 0; margin: 0 0 33px; font-size: 30px; line-height: 36.9px; }
  .in-plans__row { display: block; }
  .in-plan { width: 600px; margin: 0; padding: 42px 32px; }
  .in-plan:not(.in-plan--featured) { height: 451px; }
  .in-plan--featured { width: 600px; height: 593px; margin: 34px 0 0; padding: 42px 32px; }
  .in-plan__name { font-size: 18px; line-height: 24.3px; }
  .in-plan__badge { margin: 10px 0 0; font-size: 24px; line-height: 37.2px; }
  .in-plan__price { margin: 30px 0 0; font-size: 30px; line-height: 36.9px; }
  .in-plan__list { margin: 25px 0 0; font-size: 12px; line-height: 17.4px; }
  .in-plan__list li { padding: 10px 0; }
  .in-plan__btn { width: 242px; height: 60px; bottom: 42px; }
  .in-plan--featured .in-plan__btn { bottom: 57px; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  .in-plans { padding: 75px 0; }
  .in-plans .in-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 20px; }
  .in-plans__h { min-height: 0; margin: 0 0 36px; font-size: 30px; line-height: 36.9px; }
  .in-plans__row { display: block; }
  .in-plan { width: 440px; margin: 0; padding: 42px 32px; }
  .in-plan:not(.in-plan--featured) { height: 451px; }
  .in-plan--featured { width: 440px; height: 610px; margin: 34px 0 0; padding: 42px 32px; }
  .in-plan__name { font-size: 18px; line-height: 24.3px; }
  .in-plan__badge { margin: 10px 0 0; font-size: 24px; line-height: 37.2px; }
  .in-plan__price { margin: 30px 0 0; font-size: 30px; line-height: 36.9px; }
  .in-plan__list { margin: 25px 0 0; font-size: 12px; line-height: 17.4px; }
  .in-plan__list li { padding: 10px 0; }
  .in-plan__btn { width: 242px; height: 60px; bottom: 42px; }
  .in-plan--featured .in-plan__btn { bottom: 57px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — форма вопроса ниже 1200
   ══════════════════════════════════════════════════════════════════════

   Контейнер 640 (на 480 — во всю ширину), поля 20. Группа поля: подпись
   33 (на узких 28) плюс поле 60, между группами 25, кнопка через 30 после
   последней. Записи: 915 / 870 / 870. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .in-ask { padding: 105px 0; }
  .in-ask .in-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
  .in-ask__h { min-height: 0; margin: 0 0 45px; }
  .in-ask__form,
  .in-ask__ok,
  .in-ask__note { width: 100%; margin-left: 0; margin-right: 0; }
  .in-ask__field { margin-bottom: 25px; }
  .in-ask__submit { margin-top: 30px; }
  .in-ask__note { margin-top: 30px; font-size: 14px; line-height: 21.7px; }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .in-ask__h { font-size: 38px; line-height: 46.74px; }
  .in-ask__label { height: 33px; line-height: 33px; margin-bottom: 0; font-size: 18px; }
}

@media (min-width: 480px) and (max-width: 959.98px) {
  .in-ask__h { font-size: 30px; line-height: 36.9px; }
  .in-ask__label { height: 28px; line-height: 28px; margin-bottom: 0; font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — вопросы-ответы ниже 1200
   ══════════════════════════════════════════════════════════════════════

   На 960 переписка та же, что на десктопе, только уже: пузырь 600, колонка
   подписи 115, текст 405, кегли 26 и 14.

   ⚠️ Ниже 960 Тильда МЕНЯЕТ устройство пузыря: подпись перестаёт быть
   колонкой слева и становится маленькой надстрочной пометкой (кегль 10),
   а текст занимает всю ширину. Поля тоже другие — 16 сверху и 15 снизу
   вместо 28 и 27. Флексом с колонкой это не изобразить, поэтому на узких
   полосах пузырь переводится в обычный поток. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .in-faq { padding: 90px 0; }
  .in-faq .in-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
  .in-qa { width: 100%; margin: 0 0 49px; }
  .in-qa:last-child { margin-bottom: 0; }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .in-qa { margin-bottom: 29px; }
  .in-qa__q, .in-qa__a { padding: 28px 40px 27px; }
  .in-qa__q { margin-bottom: 30px; }
  .in-qa__tag { width: 115px; font-size: 12px; }
  /* Колонка вопроса у Тильды уже своей коробки: «Подойдет ли мне этот
     интенсив?» ложится там в две строки, хотя в 405 влезает в одну.
     Повторяем это ограничением ширины — иначе пузырь ниже на строку. */
  .in-qa__q .in-qa__t { max-width: 380px; }
  .in-qa__t { font-size: 26px; line-height: 40.3px; }
  .in-qa__a .in-qa__t,
  .in-qa__t b { font-size: 14px; line-height: 21.7px; }
}

@media (min-width: 480px) and (max-width: 959.98px) {
  .in-qa__q, .in-qa__a {
    display: block; padding: 16px 20px 15px; border-radius: 20px;
  }
  .in-qa__q { margin-bottom: 20px; }
  .in-qa__tag {
    display: block; width: auto; margin-bottom: 4px;
    font-size: 10px; line-height: 9px;
  }
  /* Вопрос остаётся крупным (26/37.7) и на узких полосах — мельчает только
     ответ. Сначала я срезал оба, и пузыри вопросов вышли вдвое ниже. */
  .in-qa__t { font-size: 26px; line-height: 37.7px; }
  .in-qa__a .in-qa__t,
  .in-qa__t b { font-size: 12px; line-height: 17.4px; }
  .in-qa__q::after, .in-qa__a::after {
    bottom: -13px; border-width: 18px 0 0 25px;
  }
  .in-qa__a::after { border-width: 18px 25px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   ИНТЕНСИВ — отзывы ниже 1200
   ══════════════════════════════════════════════════════════════════════

   Две записи Тильды: шапка (200 на 960, 150 ниже) и лента. Лента = слайд
   плюс 44 на точки плюс 16 поля. Слайд всегда во всю ширину контейнера, а
   высота у него ровно 0.64 ширины — проверено на 960, 640, 480 и 393.

   ⚠️ На 960 контейнер 640 (слайд 600), а на 640 и 480 слайдер идёт во всю
   ширину окна. */
@media (max-width: 1199.98px) and (min-width: 480px) {
  .in-rvs .in-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
  .in-rvs__box { height: auto; margin: 0; padding-bottom: 16px; }
  .in-rvs__track {
    gap: 0; width: 100%; padding-inline: 0;
  }
  .in-rv { width: 100%; height: auto; aspect-ratio: 25 / 16; object-fit: cover; }
  .in-rvs__arrow { top: 50%; margin-top: -50px; }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  /* Заголовок у Тильды ШИРЕ контейнера (843 при 640) и стоит в одну
     строку — держим её явно, иначе в 600 он ломается на две. */
  .in-rvs__h { height: auto; padding-top: 60px; font-size: 45px; line-height: 56px;
    white-space: nowrap; }
  .in-rvs__sub { height: auto; margin: 20px 0 0; font-size: 18px; line-height: 28px; }
  .in-rvs__box { width: 600px; margin: 36px auto 0; }
}

@media (min-width: 480px) and (max-width: 959.98px) {
  .in-rvs__h { height: auto; padding-top: 40px; font-size: 25px; line-height: 31px; }
  .in-rvs__sub { height: auto; margin: 17px 0 0; font-size: 16px; line-height: 25px; }
  .in-rvs__box { width: 100%; margin: 37px auto 0; }
  .in-rvs .in-wrap { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ПОДВАЛ — канва 960
   ══════════════════════════════════════════════════════════════════════

   На этой полосе подвал у Тильды — зеро-блок 960×529 с плитой 912×487 и
   тремя колонками. Наша сетка из четырёх колонок шириной 1221 в 960 не
   помещается и вытягивала подвал до 709.

   ⚠️ «Полезных материалов» у нас СЕМЬ, а у Тильды пять, и она сама разносит
   их по двум колонкам: три под логотипом, два под «Всеми курсами». Две
   лишние — SEO-посадочные, они обязаны быть в подвале (правило кластера,
   docs/seo-posadochnye.md). Ставим их следом за материалами во второй
   колонке: там как раз остаётся место до низа плиты, и высота записи
   сходится с боевой без переноса ссылок в чужой раздел. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  body.page-course .ft,
  body.page-intensiv .ft {
    position: relative; width: 960px; height: 529px; padding: 0; overflow: hidden;
    zoom: calc(var(--вью, 960) / 960);
  }
  body.page-course .ft__plate,
  body.page-intensiv .ft__plate {
    position: absolute; left: 24px; top: 0; width: 912px; height: 487px;
    margin: 0; padding: 0;
  }
  body.page-course .ft .wrap,
  body.page-intensiv .ft .wrap {
    position: absolute; left: 0; top: 0; width: 912px; height: 487px;
    max-width: none; margin: 0; padding: 0;
  }
  body.page-course .ft__cols,
  body.page-intensiv .ft__cols { display: contents; }
  body.page-course .ft__col,
  body.page-intensiv .ft__col {
    position: absolute; display: block; gap: 0; margin: 0;
    font-size: 16px; font-weight: 300; line-height: 19px;
  }
  body.page-course .ft__col h3,
  body.page-intensiv .ft__col h3 {
    position: absolute; left: 0; top: 0; margin: 0;
    font-size: 20px; line-height: 22px; letter-spacing: -.5px; white-space: nowrap;
  }
  body.page-course .ft__col a,
  body.page-course .ft__col p,
  body.page-intensiv .ft__col a,
  body.page-intensiv .ft__col p { position: absolute; left: 0; margin: 0; }

  /* Колонка 1 — логотип, контакты, лицензия. */
  body.page-course .ft__col--brand,
  body.page-intensiv .ft__col--brand { left: 30px; top: 35px; width: 320px; }
  body.page-course .ft__col--brand img,
  body.page-intensiv .ft__col--brand img {
    position: absolute; left: 0; top: 0; width: 245px; height: 53px; margin: 0;
  }
  body.page-course .ft__col--brand a,
  body.page-intensiv .ft__col--brand a { top: 76px; line-height: 18px; }
  body.page-course .ft__col--brand p:nth-of-type(1),
  body.page-intensiv .ft__col--brand p:nth-of-type(1) { top: 107px; width: 320px; line-height: 18px; }
  body.page-course .ft__col--brand p:nth-of-type(2),
  body.page-intensiv .ft__col--brand p:nth-of-type(2) { top: 138px; width: 345px; line-height: 21px; }

  /* Колонка «Полезные материалы» — заголовок и три пункта под логотипом,
     остальные четыре во второй колонке. */
  body.page-course .ft__col--mat,
  body.page-intensiv .ft__col--mat { left: 32px; top: 243px; width: 600px; }
  body.page-course .ft__col--mat a,
  body.page-intensiv .ft__col--mat a { width: 221px; line-height: 18px; max-width: none; }
  body.page-course .ft__col--mat a:nth-of-type(3),
  body.page-intensiv .ft__col--mat a:nth-of-type(3) { left: 0;   top: 39px; }
  body.page-course .ft__col--mat a:nth-of-type(4),
  body.page-intensiv .ft__col--mat a:nth-of-type(4) { left: 0;   top: 106px; width: 219px; }
  body.page-course .ft__col--mat a:nth-of-type(6),
  body.page-intensiv .ft__col--mat a:nth-of-type(6) { left: 1px; top: 156px; width: 204px; }
  body.page-course .ft__col--mat a:nth-of-type(5),
  body.page-intensiv .ft__col--mat a:nth-of-type(5) { left: 354px; top: 37px; }
  body.page-course .ft__col--mat a:nth-of-type(7),
  body.page-intensiv .ft__col--mat a:nth-of-type(7) { left: 354px; top: 106px; width: 204px; }
  body.page-course .ft__col--mat a:nth-of-type(1),
  body.page-intensiv .ft__col--mat a:nth-of-type(1) { left: 354px; top: 156px; width: 204px; }
  body.page-course .ft__col--mat a:nth-of-type(2),
  body.page-intensiv .ft__col--mat a:nth-of-type(2) { left: 354px; top: 206px; width: 204px; }

  /* Колонка «Все курсы». */
  body.page-course .ft__cols > nav:nth-of-type(2),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) { left: 386px; top: 33px; width: 200px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a,
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a { line-height: 19px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a:nth-of-type(1),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a:nth-of-type(1) { top: 38px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a:nth-of-type(2),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a:nth-of-type(2) { top: 70px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a:nth-of-type(3),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a:nth-of-type(3) { top: 102px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a:nth-of-type(4),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a:nth-of-type(4) { top: 134px; }
  body.page-course .ft__cols > nav:nth-of-type(2) a:nth-of-type(5),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) a:nth-of-type(5) { top: 166px; }

  /* Колонка «Документы». */
  body.page-course .ft__cols > nav:nth-of-type(3),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) { left: 660px; top: 30px; width: 230px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a,
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a { width: 236px; line-height: 19px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a:nth-of-type(1),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a:nth-of-type(1) { top: 38px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a:nth-of-type(2),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a:nth-of-type(2) { top: 108px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a:nth-of-type(3),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a:nth-of-type(3) { top: 140px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a:nth-of-type(4),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a:nth-of-type(4) { top: 172px; }
  body.page-course .ft__cols > nav:nth-of-type(3) a:nth-of-type(5),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) a:nth-of-type(5) { top: 204px; }

  body.page-course .ft__bottom,
  body.page-intensiv .ft__bottom {
    position: absolute; left: 660px; top: 430px; margin: 0;
    font-size: 15px; line-height: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ПОДВАЛ — канвы 640 и 480
   ══════════════════════════════════════════════════════════════════════

   Здесь Тильда разворачивает подвал в одну колонку и меняет порядок:
   после контактов идут «Все курсы», потом «Полезные материалы», потом
   «Документы». У нас материалы стоят в разметке вторыми (так удобнее
   десктопной сетке), поэтому порядок задаётся `order`.

   Шаги сняты с боевой: между пунктами 13, между разделами 35, от
   заголовка до первого пункта 16.

   ⚠️ Высота не сойдётся в ноль: у нас в материалах семь пунктов, у Тильды
   пять — две лишние SEO-посадочные обязаны быть в подвале. На узкой канве
   разнести их по второй колонке некуда, поэтому подвал выше боевого на
   два пункта. Это осознанно. */
@media (min-width: 480px) and (max-width: 959.98px) {
  body.page-course .ft,
  body.page-intensiv .ft { padding: 0 0 26px; }
  body.page-course .ft__plate,
  body.page-intensiv .ft__plate { margin: 0 24px; padding: 35px 30px 32px; }
  body.page-course .ft .wrap,
  body.page-intensiv .ft .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
  body.page-course .ft__cols,
  body.page-intensiv .ft__cols {
    display: flex; flex-direction: column; gap: 35px; grid-template-columns: none;
  }
  body.page-course .ft__col--brand,
  body.page-intensiv .ft__col--brand { order: 1; }
  body.page-course .ft__cols > nav:nth-of-type(2),
  body.page-intensiv .ft__cols > nav:nth-of-type(2) { order: 2; }
  body.page-course .ft__col--mat,
  body.page-intensiv .ft__col--mat { order: 3; }
  body.page-course .ft__cols > nav:nth-of-type(3),
  body.page-intensiv .ft__cols > nav:nth-of-type(3) { order: 4; }
  body.page-course .ft__col,
  body.page-intensiv .ft__col { gap: 13px; }
  body.page-course .ft__col h3,
  body.page-intensiv .ft__col h3 { margin: 0 0 3px; }
  body.page-course .ft__col--mat a,
  body.page-intensiv .ft__col--mat a { max-width: none; }
  body.page-course .ft__bottom,
  body.page-intensiv .ft__bottom { margin-top: 36px; }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  body.page-course .ft,
  body.page-intensiv .ft { width: 640px; zoom: calc(var(--вью, 640) / 640); }
  body.page-course .ft__col--brand img,
  body.page-intensiv .ft__col--brand img { width: 245px; height: 53px; margin-bottom: 23px; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  body.page-course .ft,
  body.page-intensiv .ft { width: 480px; zoom: calc(var(--вью, 480) / 480); padding: 0 0 22px; }
  body.page-course .ft__plate,
  body.page-intensiv .ft__plate { margin: 0 16px; padding: 25px 20px 35px; }
  body.page-course .ft__col--brand img,
  body.page-intensiv .ft__col--brand img { width: 169px; height: 37px; margin-bottom: 23px; }
  body.page-course .ft__col,
  body.page-intensiv .ft__col { gap: 13px; font-size: 12px; line-height: 14px; }
  body.page-course .ft__col h3,
  body.page-intensiv .ft__col h3 { font-size: 14px; line-height: 15px; }
  body.page-course .ft__col--mat a,
  body.page-course .ft__col--brand a,
  body.page-course .ft__col--brand p,
  body.page-intensiv .ft__col--mat a,
  body.page-intensiv .ft__col--brand a,
  body.page-intensiv .ft__col--brand p { line-height: 13px; }
  body.page-course .ft__col--brand p:last-child,
  body.page-intensiv .ft__col--brand p:last-child { line-height: 17px; }
  body.page-course .ft__bottom,
  body.page-intensiv .ft__bottom { margin-top: 36px; font-size: 14px; line-height: 20px; }
}

/* ── Остались вопросы: канва 960 ── */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-ask { position: relative; width: 960px; zoom: calc(var(--вью, 960) / 960); height: 761px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-ask .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса прячет фото, фигуры и карточку (`display: none`).
     Высота блока от них не зависит — она сходилась и без них, а левая
     половина плиты стояла пустой. Возвращаем и ставим по координатам. */
  .page-course .wl-ask .wl-ask__photo,
  .page-course .wl-ask .wl-ask__deco,
  .page-course .wl-ask .wl-ask__card { display: block; }
  .page-course .wl-ask .wl-ask__slab { position: absolute; left: 24px; top: 75px; width: 912px; max-width: none; height: 611px; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-ask .wl-ask__photo { position: absolute; left: -9px; top: 103px; width: 523px; max-width: none; height: 583px; margin: 0; object-fit: contain; }
  .page-course .wl-ask .wl-ask__h { position: absolute; left: 470px; top: 110px; width: 439px; max-width: none; margin: 0; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; text-align: left; }
  .page-course .wl-ask .wl-ask__form { position: absolute; left: 470px; top: 251px; width: 436px; max-width: none; height: 337px; margin: 0; }
  /* ⚠️ Кнопка лежит ВНУТРИ формы, а форма сама поставлена абсолютом —
     значит её координаты считаются от формы, а не от секции. С числами
     от секции кнопка уезжала на 251 вниз, за край плиты, и секция её
     обрезала: на канвах кнопки «Задать вопрос» не было вовсе. */
  .page-course .wl-ask .wl-ask__btn { position: absolute; left: 0px; top: 345px; width: 436px; max-width: none; height: 60px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; font-size: 18px; line-height: 60px; }
  .page-course .wl-ask .wl-ask__card { position: absolute; left: 84px; top: 540px; width: 286px; max-width: none; height: 116px; margin: 0; padding: 0; border-radius: 10px; }
  .page-course .wl-ask .wl-ask__name { position: absolute; left: 20px; top: 18px; margin: 0; font-size: 24px; line-height: 26px; }
  .page-course .wl-ask .wl-ask__role { position: absolute; left: 20px; top: 52px; width: 236px; margin: 0; font-size: 18px; line-height: 23px; }
  .page-course .wl-ask .wl-ask__deco--1 { position: absolute; left: 323px; top: 117px; width: 78px; max-width: none; height: 93px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--2 { position: absolute; left: 310px; top: 330px; width: 104px; max-width: none; height: 124px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--3 { position: absolute; left: 45px; top: 199px; width: 58px; max-width: none; height: 69px; margin: 0; }
}

/* ── Остались вопросы: канва 640 ── */
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-ask { position: relative; width: 640px; zoom: calc(var(--вью, 640) / 640); height: 1354px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-ask .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса прячет фото, фигуры и карточку (`display: none`).
     Высота блока от них не зависит — она сходилась и без них, а левая
     половина плиты стояла пустой. Возвращаем и ставим по координатам. */
  .page-course .wl-ask .wl-ask__photo,
  .page-course .wl-ask .wl-ask__deco,
  .page-course .wl-ask .wl-ask__card { display: block; }
  .page-course .wl-ask .wl-ask__slab { position: absolute; left: 24px; top: 75px; width: 591px; max-width: none; height: 1204px; margin: 0; padding: 0; border-radius: 20px; }
  .page-course .wl-ask .wl-ask__photo { position: absolute; left: 39px; top: 652px; width: 563px; max-width: none; height: 627px; margin: 0; object-fit: contain; }
  .page-course .wl-ask .wl-ask__h { position: absolute; left: 86px; top: 110px; width: 468px; max-width: none; margin: 0; font-size: 30px; line-height: 30px; letter-spacing: -1.5px; text-align: center; }
  .page-course .wl-ask .wl-ask__form { position: absolute; left: 40px; top: 225px; width: 560px; max-width: none; height: 320px; margin: 0; }
  .page-course .wl-ask .wl-ask__btn { position: absolute; left: 0px; top: 327px; width: 560px; max-width: none; height: 60px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; font-size: 18px; line-height: 60px; }
  .page-course .wl-ask .wl-ask__card { position: absolute; left: 169px; top: 1133px; width: 286px; max-width: none; height: 116px; margin: 0; padding: 0; border-radius: 10px; }
  .page-course .wl-ask .wl-ask__name { position: absolute; left: 20px; top: 18px; margin: 0; font-size: 24px; line-height: 26.4px; }
  .page-course .wl-ask .wl-ask__role { position: absolute; left: 20px; top: 52px; width: 236px; margin: 0; font-size: 18px; line-height: 23.4px; }
  .page-course .wl-ask .wl-ask__deco--1 { position: absolute; left: 470px; top: 721px; width: 78px; max-width: none; height: 93px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--2 { position: absolute; left: 390px; top: 897px; width: 104px; max-width: none; height: 124px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--3 { position: absolute; left: 49px; top: 752px; width: 58px; max-width: none; height: 69px; margin: 0; }
}

/* ── Остались вопросы: канва 480 ── */
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-ask { position: relative; width: 480px; zoom: calc(var(--вью, 480) / 480); height: 876px; padding: 0; margin: 0; overflow: hidden; }
  .page-course .wl-ask .wrap { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
  /* ⚠️ Планшетная полоса прячет фото, фигуры и карточку (`display: none`).
     Высота блока от них не зависит — она сходилась и без них, а левая
     половина плиты стояла пустой. Возвращаем и ставим по координатам. */
  .page-course .wl-ask .wl-ask__photo,
  .page-course .wl-ask .wl-ask__deco,
  .page-course .wl-ask .wl-ask__card { display: block; }
  .page-course .wl-ask .wl-ask__slab { position: absolute; left: 16px; top: 35px; width: 449px; max-width: none; height: 841px; margin: 0; padding: 0; border-radius: 10px; }
  .page-course .wl-ask .wl-ask__photo { position: absolute; left: 54px; top: 460px; width: 373px; max-width: none; height: 416px; margin: 0; object-fit: contain; }
  .page-course .wl-ask .wl-ask__h { position: absolute; left: 80px; top: 55px; width: 321px; max-width: none; margin: 0; font-size: 20px; line-height: 22px; letter-spacing: -0.5px; text-align: center; }
  .page-course .wl-ask .wl-ask__form { position: absolute; left: 80px; top: 141px; width: 320px; max-width: none; height: 235px; margin: 0; }
  .page-course .wl-ask .wl-ask__btn { position: absolute; left: 0px; top: 238px; width: 320px; max-width: none; height: 50px; min-height: 0; margin: 0; padding: 0; border-radius: 5px; font-size: 12px; line-height: 50px; }
  .page-course .wl-ask .wl-ask__card { position: absolute; left: 125px; top: 759px; width: 226px; max-width: none; height: 99px; margin: 0; padding: 0; border-radius: 10px; }
  .page-course .wl-ask .wl-ask__name { position: absolute; left: 15px; top: 13px; margin: 0; font-size: 18px; line-height: 19.8px; }
  .page-course .wl-ask .wl-ask__role { position: absolute; left: 20px; top: 43px; width: 186px; margin: 0; font-size: 14px; line-height: 18.2px; }
  .page-course .wl-ask .wl-ask__deco--1 { position: absolute; left: 330px; top: 522px; width: 60px; max-width: none; height: 71px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--2 { position: absolute; left: 277px; top: 619px; width: 79px; max-width: none; height: 94px; margin: 0; }
  .page-course .wl-ask .wl-ask__deco--3 { position: absolute; left: 70px; top: 542px; width: 46px; max-width: none; height: 55px; margin: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️ ВОЗВРАТ УКРАШЕНИЙ В ПОЛОСЕ 480–1399
   ══════════════════════════════════════════════════════════════════════

   Планшетная полоса (max-width: 1260) прячет полтора десятка элементов —
   телефон в клубе, кружок с видео в резюме, плашку скидки в тарифах,
   картинки в оплате и гарантии, самолётик и щит в блоках «как проходит».
   Задумано это было для старой резиновой раскладки, где им не было места.

   Канвы у всех этих элементов есть — координаты сняты с боевой ещё в
   первый заход, — но `display: none` их гасил, и на экране оставалась
   пустая половина блока. Замер высоты этого НЕ ВИДИТ: элементы стоят
   абсолютом и в высоту секции не входят. Поймано только глазами, на
   сравнении снимков.

   Здесь показ возвращается. Полоса та же, что у канв: 480–1399. */
@media (min-width: 480px) and (max-width: 1399.98px) {
  .page-course .wl-how__panels,
  .page-course .wl-how__mark,
  .page-course .wl-how__plane,
  .page-course .wl-how__shield,
  .page-course .wl-club__phone,
  .page-course .wl-club__screen,
  .page-course .wl-cv__hl,
  .page-course .wl-cv__video,
  .page-course .wl-plan__badge,
  .page-course .wl-pay2__pic,
  .page-course .wl-pay2__bg,
  .page-course .wl-guar__plate,
  .page-course .wl-guar__icon,
  .page-course .wl-guar__coin,
  .page-course .wl-mini__video,
  .page-course .wl-demand__pic,
  .page-course .wl-pay__arrow,
  .page-course .wl-career__card--empty { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════
   MIKROTIK — подсказки карточек на десктопе
   ══════════════════════════════════════════════════════════════════════

   Общий `bottom: 322` у .wl-tip--карточка посчитан для Windows+Linux, где
   низ слоя .wl-skills совпадает с низом ленты карточек. У MikroTik слой
   устроен иначе (`margin-top: -496` при высоте 100%), его низ на 1385 ниже
   ВЕРХА карточек — и панели с bottom 322 падали за секцию, под «Программу
   курса», где их накрывал следующий блок. Выглядело как «i не работает».

   1401 = 1385 + 16: низ панели на 16 выше верха карточки, как у боевой. */
@media (min-width: 1400px) {
  body.page-mikrotik .wl-tip--карточка { bottom: 1401px; }
}


/* ══════════════════════════════════════════════════════════════════════
   СКРУГЛЕНИЯ ТЁМНЫХ ПЛИТ НА КАНВАХ
   ══════════════════════════════════════════════════════════════════════

   Снято с боевой по настоящим borderRadius (не parseInt: он из
   «0px 0px 44px 44px» делает ноль — на этом канвы и потеряли радиусы).

     плита                      960/640          480           360 (моб)
     карьера, низ               0 0 44 44       0 0 30 30     0 0 30м 30м
     тарифы, верх (отступ 75)   44 44 0 0 @75   30 30 0 0 @35 27.5м @35м
     программа, верх (у первой  44 44 0 0 @75   30 30 0 0 @35 27.5м @35м
     программы страницы — той,
     что сразу после преподавателей; вторая программа Windows+Linux
     продолжает тёмное без шва)

   Программа не под zoom (пропорциональные единицы), поэтому её числа
   масштабируются через --вью. У секции появляется белый фон: вырезы
   углов должны показывать белое, а фон body тёмный. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .page-course .wl-plans::before { inset: 75px 0 0; border-radius: 44px 44px 0 0; }
  .page-course .wl-teach + .wl-program { background: #fff; }
  .page-course .wl-teach + .wl-program::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    top: calc(75 * var(--вью, 960) / 960 * 1px);
    background: var(--bg);
    border-radius: calc(44 * var(--вью, 960) / 960 * 1px) calc(44 * var(--вью, 960) / 960 * 1px) 0 0;
  }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .page-course .wl-plans::before { inset: 75px 0 0; border-radius: 44px 44px 0 0; }
  .page-course .wl-teach + .wl-program { background: #fff; }
  .page-course .wl-teach + .wl-program::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    top: calc(75 * var(--вью, 640) / 640 * 1px);
    background: var(--bg);
    border-radius: calc(44 * var(--вью, 640) / 640 * 1px) calc(44 * var(--вью, 640) / 640 * 1px) 0 0;
  }
}
@media (min-width: 480px) and (max-width: 639.98px) {
  .page-course .wl-plans::before { inset: 35px 0 0; border-radius: 30px 30px 0 0; }
  .page-course .wl-teach + .wl-program { background: #fff; }
  .page-course .wl-teach + .wl-program::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    top: calc(35 * var(--вью, 480) / 480 * 1px);
    background: var(--bg);
    border-radius: calc(30 * var(--вью, 480) / 480 * 1px) calc(30 * var(--вью, 480) / 480 * 1px) 0 0;
  }
}
@media (max-width: 479px) {
  .page-course .wl-plans::before { inset: calc(35 * var(--м)) 0 0; border-radius: calc(27.5 * var(--м)) calc(27.5 * var(--м)) 0 0; }
  .page-course .wl-teach + .wl-program { background: #fff; }
  .page-course .wl-teach + .wl-program::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    top: calc(35 * var(--м));
    background: var(--bg);
    border-radius: calc(27.5 * var(--м)) calc(27.5 * var(--м)) 0 0;
  }
}