/* Публичный лендинг ZaFlag.
   Макет: Figma «ZaFlag» node 125:1814, 1920×11547.

   Три отличия от экранов ЛК, о них стоит знать заранее:
   1. Своя палитра. Лендинг темнее и контрастнее интерфейса (#08090a / #0f1314 /
      #1d1e1e против --bg/--surface), поэтому его токены объявлены локально в
      `.lp` — tokens.css (палитра ЛК) не трогаем.
   2. Масштаб 1:1. В ЛК на :root висит zoom: var(--ui-zoom); лендинг свёрстан в
      реальных пикселях макета, зума тут нет.
   3. Страница скроллится телом (в ЛК скроллится .zf-scroll внутри «окна»).

   Геометрия макета, из которой выведены переменные ниже:
   отступ от края 40, ширина контента 1840, зазор карточек 20, ритм между
   блоками 180, внутренний отступ карточки 27, «глазок → заголовок» и
   «заголовок → контент» по 40. */

* {
  box-sizing: border-box;
}

.lp-root {
  overflow-x: hidden;
  overflow-x: clip;
}

.lp {
  --lp-bg: #08090a;
  --lp-card: #0f1314;
  /* Ступень между картой и чипом: карточка на ховере светлеет, но чипы на ней
     остаются на шаг светлее фона и не «выцветают» в заливку карточки */
  --lp-card-hover: #14191a;
  --lp-card-border: #1d1e1e;
  --lp-chip: #171a1b;
  --lp-chip-border: #373b3c;
  --lp-chip-text: #b0b8ba;
  --lp-eyebrow: #888d96;
  --lp-green: #00ff40;
  --lp-title: rgba(255, 255, 255, 0.9);
  --lp-body: rgba(255, 255, 255, 0.8);

  --lp-gutter: 40px;
  --lp-max: 1840px;
  --lp-gap: 20px;
  --lp-rhythm: 180px;
  --lp-pad: 27px;

  --lp-h1: 75px;
  --lp-h2: 70px;
  --lp-h3: 40px;
  --lp-body-size: 22px;

  margin: 0;
  background: var(--lp-bg);
  color: #fff;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Базовые сбросы — через :where(), чтобы нулевая специфичность не перебивала
   правила компонентов (иначе max-width: 100% ломает нарочно увеличенные
   обложки, а color: inherit — тёмный текст на белой кнопке) */
.lp :where(img) {
  display: block;
  max-width: 100%;
}

.lp :where(a) {
  color: inherit;
  text-decoration: none;
}

.lp ::selection {
  background: rgba(255, 255, 255, 0.25);
}

/* Полоса контента: 1840 в макете, дальше — по краям всегда 40 */
.lp-wrap {
  width: min(var(--lp-max), 100% - var(--lp-gutter) * 2);
  margin-inline: auto;
}

/* ── Общие примитивы ───────────────────────────────────────────────────── */

/* Белая точка перед подписями-«глазками» и в плашках направлений */
.lp-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: #fff;
}

.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}
.lp-eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: #fff;
}
.lp-eyebrow span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--lp-eyebrow);
}

.lp-h2 {
  margin: 40px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lp-h2);
  line-height: 0.96;
  letter-spacing: -1.4px;
  color: #fff;
}

/* Белая кнопка: -sm в шапке, -lg в финальном блоке */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  font-family: var(--font-display);
  line-height: 1.05;
  color: #333;
  transition: background var(--t);
}
.lp-btn:hover {
  background: #e4e4e6;
}
.lp-btn--sm {
  padding: 20px 25px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.36px;
}
.lp-btn--lg {
  width: 600px;
  max-width: 100%;
  height: 70px;
  margin-top: var(--lp-gap);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.36px;
}

/* Плашка-чип (номер категории, тип мероприятия, тег карточки) */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lp-chip {
  padding: 15px 25px;
  background: var(--lp-chip);
  border: 2px solid var(--lp-chip-border);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: var(--lp-chip-text);
  white-space: nowrap;
}
.lp-chip--green {
  color: var(--lp-green);
}
/* Тег открытого набора: зеленоватая заливка и рамка, а не только подпись.
   Отдельно от `--green` — тот стоит на карточках направлений («127 задач»),
   где по макету плашка остаётся нейтральной. */
.lp-chip--open {
  background: rgba(0, 255, 64, 0.06);
  border-color: rgba(0, 255, 64, 0.28);
  color: rgba(0, 255, 64, 0.85);
}
/* Мелкий чип — Figma node 125:2152. Отличается кеглем, паддингом и lowercase */
.lp-chip--sm {
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: -0.26px;
  text-transform: lowercase;
}
/* Технический чип — моно, как строки терминала: им подписаны шаги пути
   «слот → таск → ревью → зачёт», где это буквально значения из интерфейса
   (категория слота, push в Forgejo, оценка ревьюера) */
.lp-chip--mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.lp-header {
  padding-top: 18px;
}
/* Три колонки, а не абсолютно центрированное меню поверх полосы: на 1840 из
   макета `1fr auto 1fr` даёт ровно тот же центр, но на промежуточных ширинах
   (1025…1400) колонки просто сжимаются, а не наезжают друг на друга — раньше
   «Блог» слипался с «Входом». */
.lp-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  height: 90px;
  padding: 0 28px;
  background: var(--lp-card);
  border: 2px solid var(--lp-card-border);
  border-radius: 20px;
}
.lp-header__logo img {
  width: 150px;
  height: 46.667px;
  object-fit: contain;
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}
.lp-nav__link,
.lp-header__login {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
  transition: color var(--t);
}
.lp-nav__link:hover,
.lp-header__login:hover {
  color: var(--lp-chip-text);
}
/* Текущий раздел: остальные пункты гаснут, и активный читается по цвету
   без отдельной метки-курсора. Работает только если метка на странице
   есть, иначе `:has` не сработает и шапка не уедет в серый целиком. */
.lp-nav:has([aria-current]) .lp-nav__link:not([aria-current]) {
  color: rgba(255, 255, 255, 0.62);
}
/* Погашенный пункт под курсором не гаснет ещё сильнее, а поднимается до белого */
.lp-nav:has([aria-current]) .lp-nav__link:not([aria-current]):hover {
  color: #fff;
}
/* Фокус во всей шапке одинаковый — как в подвале: на тёмной плашке белая
   обводка читается лучше любого цветного акцента */
.lp-header :where(a, button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lp-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}
/* Кнопка ЛК залогиненного. Геометрия — как у крестика панели (46×46, радиус
   10, чип с рамкой): в ряду шапки это единственный элемент-иконка, и он должен
   читаться кнопкой, а не буквой на фоне. Подпись рядом нужна только панели. */
.lp-header__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  background: var(--lp-chip);
  border: 2px solid var(--lp-chip-border);
  border-radius: 10px;
  transition: background var(--t), border-color var(--t);
}
.lp-header__account:hover {
  background: var(--lp-card-hover);
  border-color: #fff;
}
.lp-header__avatar {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
.lp-header__account-label {
  display: none;
}
/* Обёртка меню и кнопок. На широком экране её нет в раскладке: `contents`
   отдаёт детей прямо в полосу, поэтому меню и кнопки встают в колонки грида
   сами. Панелью обёртка становится только на узком экране (см. адаптивы). */
.lp-header__menu {
  display: contents;
}
/* Части, которые нужны только выехавшей панели. Гасим их и здесь: при
   `display: contents` у обёртки они иначе встали бы лишними колонками грида. */
.lp-burger,
.lp-menu__head,
.lp-menu__social,
.lp-menu__scrim,
.lp-nav__link svg {
  display: none;
}

/* ── Герой ─────────────────────────────────────────────────────────────── */
.lp-hero {
  margin-top: 20px;
}
.lp-hero__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* В макете 870, но первый экран не должен быть выше окна: на ноутбуке
     (высота вьюпорта ~800) блок ужимается до свободного места.
     148 = шапка (18 + 90) + отступ героя 20 + такой же зазор снизу.
     Нижняя граница 560 — чтобы на низких окнах текст не сжимался в кашу. */
  height: max(560px, min(870px, calc(100vh - 148px)));
  /* 59 сверху / 45 снизу — как в макете (подпись стоит на y=756) */
  padding: 59px 39px 45px;
  /* Контур героя светлее общего --lp-card-border: он лежит на фотографии,
     а не на чёрном фоне, и по макету должен читаться поверх неё. */
  border: 1px solid rgba(144, 144, 144, 0.4);
  border-radius: 40px;
  overflow: hidden;
}
/* Обложка заполняет блок целиком. Процентные сдвиги, которыми кадрировался
   прежний кадр, новому ассету не нужны: он свёрстан под этот блок — маяк у
   правого края, слева пустое небо и море как раз под заголовок и подпись. */
.lp-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.lp-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.lp-hero__title {
  position: relative;
  max-width: 1034px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--lp-h1);
  line-height: 1.05;
  /* Заголовок героя целиком белый: на фотографии приглушённый --lp-body
     теряется, поэтому «ZaFlag» и остальные строки идут одним весом и цветом. */
  color: #fff;
}
.lp-hero__title b {
  font-weight: 500;
}
.lp-hero__sub {
  position: relative;
  max-width: 599px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #fff;
}

/* ── Бегущая строка направлений ────────────────────────────────────────── */
.lp-strip {
  margin-top: 40px;
  overflow: hidden;
}
/* Лента едет справа налево и не останавливается — в макете она нарочно срезана
   обоими краями экрана. В разметке семь плашек продублированы, и сдвиг за цикл
   равен ровно одному набору (7 × плашка + 7 зазоров), поэтому копия встаёт на
   место оригинала без стыка. Не translateX(-50%): половина ряда — это на один
   зазор меньше набора, и на каждом круге лента дёргалась бы на 20px. */
.lp-strip__row {
  display: flex;
  gap: var(--lp-gap);
  /* В макете ряд начинается на x=-38, т.е. срезан левым краем экрана */
  margin-left: -38px;
  --lp-strip-set: calc(7 * (324px + var(--lp-gap)));
  animation: lp-strip-run 60s linear infinite;
}
/* Чтобы прочитать конкретное направление, ленту можно придержать курсором */
.lp-strip:hover .lp-strip__row {
  animation-play-state: paused;
}
@keyframes lp-strip-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--lp-strip-set)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-strip__row {
    animation: none;
  }
}
.lp-strip__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 324px;
  height: 88px;
  padding: 0 18px;
  background: var(--lp-card);
  border: 2px solid var(--lp-card-border);
  border-radius: 20px;
}
.lp-strip__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.44px;
  color: #fff;
}
.lp-strip__name .lp-dot {
  width: 15px;
  height: 15px;
}
.lp-strip__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Ширина по макету, но это минимум: «134 задачи» длиннее и в 106px рвалось
     на две строки — плашка перестаёт быть одной строкой текста */
  min-width: 106px;
  text-align: right;
  line-height: 1.05;
  white-space: nowrap;
}
.lp-strip__meta b {
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  color: #fff;
}
.lp-strip__meta i {
  font-style: normal;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: rgba(0, 255, 64, 0.6);
}

/* ── Секции ────────────────────────────────────────────────────────────── */
.lp-section {
  margin-top: var(--lp-rhythm);
}
.lp main {
  padding-bottom: var(--lp-rhythm);
}

/* ── Карточка (общая для «что такое ZaFlag» и мероприятий) ─────────────── */
.lp-grid {
  display: grid;
  gap: var(--lp-gap);
}
.lp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-card {
  padding: var(--lp-pad);
  background: var(--lp-card);
  border: 1.5px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
}
.lp-card--feature {
  min-height: 770px;
}
.lp-card__media {
  position: relative;
  height: 400px;
  border-radius: 15px;
  overflow: hidden;
}
.lp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  margin-top: 40px;
}
.lp-card__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lp-h3);
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--lp-title);
}
.lp-card__desc {
  margin: 0;
  font-weight: 400;
  font-size: var(--lp-body-size);
  line-height: 1.05;
  letter-spacing: -0.44px;
  color: var(--lp-body);
}
/* Описания категорий в макете без трекинга — текст там длиннее. Мера строки
   ограничена 800px (node 125:2285), хотя колонка шире — иначе строка слишком
   длинная для чтения */
.lp-card__desc--tight {
  max-width: 800px;
  letter-spacing: normal;
}

/* ── Платформа изнутри ─────────────────────────────────────────────────── */
/* Единственный блок лендинга, свёрстанный НЕ в локальной палитре `.lp`: это
   макет Главной ЛК, поэтому цвета, радиусы и кегли берём из tokens.css, а
   геометрию — из base.css / dashboard.css один в один. Правило простое: если
   значение ниже отличается от одноимённого в ЛК, это ошибка, а не решение.

   Масштаб. ЛК живёт при `zoom: var(--ui-zoom)` = 1.25 и рисуется в окно
   1531 CSS-px шириной (именно так снят бывший скриншот inside.png, 1909×951).
   Здесь та же схема: внутренности свёрстаны в родных пикселях интерфейса
   (сайдбар 260, топбар 56, кегль 13), а весь макет разом ужат до полосы
   контента лендинга — 1840px при zoom 1.2 дают ровно 1533 внутренних.
   Поэтому ни одно число внутри блока пересчитывать под лендинг не нужно.

   Высота фиксированная — 815 (978 после zoom). Экраны переключаются на месте,
   и «прыгать» вслед за их разной высотой блок не должен, поэтому все четыре
   обрезаны по одной линии. Линия выбрана по самому тесному экрану: 978 — это
   ровно нижняя кромка карточки турнира и карточки сабмита. На Главной она
   проходит сразу под таблицей «Мои таски» (как на прежнем скриншоте), на
   «Обучении» — по тизерам каталога. Ниже у настоящих страниц идут
   «Активность», «Завершённые» и остальной каталог — витрине они не нужны. */

.lp-inside {
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  overflow: hidden;
}

.lp-inside__shell {
  zoom: 1.2;
  display: flex;
  width: 100%;
  height: 815px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  /* Кликабельны только пункты меню — остальное не должно выделяться мышью */
  cursor: default;
  user-select: none;
}
.lp-inside__shell svg {
  flex: none;
  fill: none;
  stroke: currentColor;
}

/* ── Сайдбар (base.css: .zf-sidebar) ───────────────────────────────────── */
.lp-inside__sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.lp-inside__logo {
  display: flex;
  align-items: center;
  padding: 18px 20px 14px;
}
.lp-inside__logo img {
  width: auto;
  height: 30px;
  object-fit: contain;
}

.lp-inside__search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 32px);
  height: 34px;
  margin: 10px 16px 0;
  padding: 0 8px 0 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-size: 13px;
  color: var(--text-dim);
}
.lp-inside__search svg {
  width: 15px;
  height: 15px;
}
.lp-inside__search-label {
  flex: 1;
}
.lp-inside__hotkey {
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.lp-inside__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px 2px;
}
.lp-inside__navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-control);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__navitem svg {
  width: 17px;
  height: 17px;
}
/* Пункт-кнопка: четыре свёрстанных экрана переключаются, остальные — картинка.
   Сбрасываем кнопочные умолчания и возвращаем ЛК-шные ховер и фокус. */
/* Только `font-family`: шорткат `font: inherit` заодно сбросил бы кегль и
   насыщенность из `.lp-inside__navitem` (13/500) на унаследованные 16/400 —
   пункты-кнопки стали бы крупнее соседних. */
.lp-inside__navitem--live {
  width: 100%;
  margin: 0;
  padding: 0 10px;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.lp-inside__navitem--live:hover {
  background: var(--hover);
}
.lp-inside__navitem--live:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--border-strong);
}
/* Активный пункт: белая риска слева + подложка */
.lp-inside__navitem.is-active {
  background: var(--surface-2);
  color: var(--text-bright);
}
.lp-inside__navitem.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 1px;
  background: var(--text-bright);
}

.lp-inside__navhead {
  padding: 18px 22px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.lp-inside__ext {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 12px;
}
.lp-inside__extlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.lp-inside__extlink svg {
  width: 13px;
  height: 13px;
  color: var(--text-dim);
}

.lp-inside__spacer {
  flex: 1;
}

/* Карточка пользователя — тоже кнопка (открывает профиль). `font-family`, а не
   шорткат `font`: он сбросил бы кегли, заданные внутри карточки. */
.lp-inside__user {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t);
}
.lp-inside__user:hover,
.lp-inside__user.is-active {
  border-color: var(--border-hover);
}
.lp-inside__user:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--border-strong);
}
.lp-inside__avatar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 600;
}
.lp-inside__online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success-soft);
  border: 2px solid var(--sidebar);
}
.lp-inside__userbody {
  min-width: 0;
  flex: 1;
}
.lp-inside__usertop {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lp-inside__username {
  font-size: 13px;
  font-weight: 600;
}
.lp-inside__rating {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__logout {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-dim);
}
.lp-inside__logout svg {
  width: 16px;
  height: 16px;
}

/* Бейдж звания (base.css: .zf-rank) — цвета приходят инлайном из RANK_STYLES */
.lp-inside__rank {
  padding: 2.5px 6px;
  border: 1px solid;
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.lp-inside__rank--lg {
  padding: 3.5px 8px;
  font-size: 11px;
}

/* ── Топбар (base.css: .zf-topbar) ─────────────────────────────────────── */
.lp-inside__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--main);
}
.lp-inside__topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
}
.lp-inside__crumb {
  font-size: 13px;
  color: var(--text-muted);
}
.lp-inside__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-inside__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  color: var(--text-muted);
}
.lp-inside__bell svg {
  width: 17px;
  height: 17px;
}
.lp-inside__bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  /* Кольцо цвета рабочей области, чтобы бейдж не сливался с рамкой кнопки */
  box-shadow: 0 0 0 2px var(--main);
}
.lp-inside__coinchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.lp-inside__coindot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Скролл-область и сетка контента (base.css: .zf-scroll/.zf-content) ── */
/* Рабочая область скроллится сама, как в ЛК: экран целиком в окно не влезает,
   и остальное можно долистать колесом, не уезжая с лендинга. Полоса — тоже
   из ЛК (base.css), иначе внутри тёмного окна появилась бы системная светлая. */
.lp-inside__scroll {
  flex: 1;
  overflow-y: auto;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.lp-inside__scroll:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: -2px;
}
.lp-inside__scroll::-webkit-scrollbar {
  width: 10px;
}
.lp-inside__scroll::-webkit-scrollbar-thumb {
  background: var(--hover);
  border: 2px solid var(--bg);
  border-radius: 5px;
}
.lp-inside__scroll::-webkit-scrollbar-track {
  background: transparent;
}
/* Стык полос: на узких экранах область листается и вбок, и стык остаётся
   белым квадратом, если его не погасить */
.lp-inside__scroll::-webkit-scrollbar-corner {
  background: transparent;
}
.lp-inside__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 26px 32px 44px;
}
/* Экраны лежат стопкой, показан один. `display:flex` выше перебивает
   браузерное `[hidden] { display: none }`, поэтому прячем явно. */
.lp-inside__content[hidden] {
  display: none;
}
/* Шаг между блоками на каждом экране свой — как в `.zf-tlist` и `.zf-learn` */
.lp-inside__content[data-inside-panel="tournaments"] {
  gap: 26px;
}
.lp-inside__content[data-inside-panel="learning"] {
  gap: 22px;
}

/* ── Приветствие (dashboard.css: .zf-dash__hello) ──────────────────────── */
.lp-inside__hello {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.lp-inside__hello-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
}

/* ── Стат-карточки (dashboard.css: .zf-stat) ───────────────────────────── */
.lp-inside__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lp-inside__stat {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lp-inside__stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__stat-value {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
}
.lp-inside__stat-value small {
  font-size: inherit;
  font-weight: 500;
  color: var(--text-dim);
}
/* Пустышка вместо полосы: держит одинаковую высоту всех четырёх карточек */
.lp-inside__stat-slot {
  height: 3px;
}
.lp-inside__stat-note {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__stat-note .up {
  color: var(--success-soft);
}
.lp-inside__stat-grades {
  letter-spacing: 0.08em;
  color: var(--success-soft);
}

.lp-inside__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.lp-inside__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
}
/* Точки free-points */
.lp-inside__fp {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 3px;
}
.lp-inside__fp span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lp-inside__fp span.is-on {
  background: var(--success-soft);
  border-color: var(--success-soft);
}

/* ── Баннер турнира (dashboard.css: .zf-banner) ────────────────────────── */
.lp-inside__banner {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lp-inside__banner-main {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Цвет/фон/рамку кладёт инлайном EVENT_STATUS_STYLES, точка — currentColor */
.lp-inside__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.lp-inside__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.lp-inside__banner-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
}
.lp-inside__banner-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.lp-inside__metachip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.lp-inside__metachip svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
  color: var(--text-dim);
}
/* `margin-top: auto` прижимает кнопку к низу колонки — как на Главной */
.lp-inside__banner-cta {
  margin-top: auto;
  padding-top: 16px;
}
.lp-inside__banner-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.lp-inside__banner-side {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}
.lp-inside__banner-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-inside__caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-inside__timer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lp-inside__timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lp-inside__timer-value {
  min-width: 54px;
  padding: 11px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.lp-inside__timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.lp-inside__banner-reg {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lp-inside__seats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__seats b {
  font-weight: 400;
  color: var(--text-muted);
}

/* Кнопки — макеты, без состояний (base.css: .zf-btn) */
.lp-inside__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-primary);
}
.lp-inside__btn--ghost {
  height: 28px;
  padding: 0 11px;
  background: transparent;
  border-color: var(--border);
  border-radius: var(--r-control);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Таблица «Мои таски» (dashboard.css: .zf-tasks) ────────────────────── */
.lp-inside__table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lp-inside__sechead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 12px;
}
.lp-inside__sectitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.lp-inside__sectitle::before {
  content: "●";
  font-size: 8px;
  color: var(--text-bright);
}
.lp-inside__secrule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.lp-inside__secmore {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.lp-inside__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 96px 90px 150px 96px 96px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-top: 1px solid var(--border);
}
.lp-inside__row--head {
  min-height: 0;
  padding: 7px 20px;
  align-items: start;
}
.lp-inside__th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-inside__task {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__catdot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.lp-inside__cat {
  color: var(--text-dim);
}
.lp-inside__event {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__diff {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.lp-inside__grade {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
/* Цвет статуса приходит инлайном из SUBMISSION_STATUS_COLORS */
.lp-inside__rowstatus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.lp-inside__rowstatus i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.lp-inside__updated {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.lp-inside__action {
  justify-self: end;
}

/* ── Активность (dashboard.css: .zf-activity) ──────────────────────────── */
.lp-inside__feedrow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 20px;
  border-top: 1px solid var(--border);
}
.lp-inside__feedicon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
}
.lp-inside__feedicon svg {
  width: 16px;
  height: 16px;
}
.lp-inside__feedtext {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__feedtext .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.lp-inside__feedtext .plain {
  color: var(--text);
}
.lp-inside__feedtext .good {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--success-soft);
}
.lp-inside__feedtime {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Строка-итог в самом низу Главной */
.lp-inside__platstats {
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: center;
  color: var(--text-dim);
}
.lp-inside__platstats b {
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Экран «Турниры» (tournament.css: .zf-tlist / .zf-thero / .zf-actcard) ─ */
.lp-inside__thero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 480px;
  border-radius: var(--r-window);
  overflow: hidden;
  /* Сам адрес обложки — инлайном в `_inside_tournaments.html`, с версией */
  background: #21503a right calc(50% - 10px) / cover no-repeat;
}
.lp-inside__thero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33, 80, 58, 0.94) 0%, rgba(33, 80, 58, 0.7) 16%, rgba(33, 80, 58, 0) 38%);
  pointer-events: none;
}
.lp-inside__thero-text {
  position: relative;
  max-width: 62%;
  padding: 0 24px 50px 38px;
}
.lp-inside__thero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.02;
  color: #fff;
}
.lp-inside__thero-sub {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  max-width: 420px;
}

.lp-inside__tsection {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Подпись раздела без точки — в отличие от `.lp-inside__sectitle` на Главной */
.lp-inside__tlabel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lp-inside__actcard {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lp-inside__actcard-banner {
  position: relative;
  flex: 1;
  min-width: 260px;
  align-self: stretch;
  min-height: 190px;
  overflow: hidden;
}
.lp-inside__actcard-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center calc(50% - 30px);
}
/* Цвет и рамку кладёт инлайном EVENT_STATUS_STYLES */
.lp-inside__actcard-status {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid;
  border-radius: var(--r-chip);
  background: rgba(15, 15, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.lp-inside__actcard-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.lp-inside__actcard-body {
  flex: 1.4;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
}
.lp-inside__actcard-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
}
/* Пустая строка на месте снятой подписи о регистрации — как в ЛК, чтобы
   кнопка и высота карточки остались на прежних местах */
.lp-inside__actcard-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: auto;
  padding-top: 6px;
}
.lp-inside__actcard-foot::before {
  content: "\00a0";
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.lp-inside__actcard-foot .lp-inside__btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}
/* Ряд мета-чипов на карточке турнира идёт без верхнего отступа */
.lp-inside__banner-meta--flat {
  margin-top: 0;
  flex-wrap: wrap;
}

/* Завершённые турниры — сетка карточек (tournament.css: .zf-pastcard) */
.lp-inside__pastgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.lp-inside__pastcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lp-inside__pastdone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  background: rgba(163, 163, 168, 0.12);
  border: 1px solid rgba(163, 163, 168, 0.3);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.lp-inside__pastdone svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.lp-inside__pasttitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
.lp-inside__pastmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.lp-inside__pastchip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  color: var(--text-dim);
}
.lp-inside__pastfoot {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.lp-inside__pastwinner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.lp-inside__pastwinner > svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke: var(--warning);
  stroke-width: 1.6;
}
.lp-inside__pastwin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
}
.lp-inside__pastwin svg {
  flex: none;
  width: 13px;
  height: 13px;
  stroke-width: 1.6;
  color: var(--text-dim);
}
.lp-inside__pastwinkind {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__pastplace {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Обложка раздела (base.css: .zf-hero) ──────────────────────────────── */
.lp-inside__hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-window);
  overflow: hidden;
}
.lp-inside__hero img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.lp-inside__hero--learning img {
  object-position: right calc(50% - 30px);
}
.lp-inside__hero--submit img {
  object-position: right center;
}
.lp-inside__hero-scrim {
  position: absolute;
  inset: 0;
}
/* Градиенты — из learning.css и submit.css: зелёный и бирюзовый */
.lp-inside__hero--learning .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(139, 176, 78, 0.94) 0%, rgba(139, 176, 78, 0.7) 30%, rgba(139, 176, 78, 0) 58%);
}
.lp-inside__hero--submit .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(46, 133, 133, 0.94) 0%, rgba(46, 133, 133, 0.7) 30%, rgba(46, 133, 133, 0) 58%);
}
.lp-inside__hero-body {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 62%;
  padding: 0 24px 50px 38px;
}
.lp-inside__hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.02;
  color: #fff;
}
.lp-inside__hero-sub {
  max-width: 420px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

/* ── Экран «Обучение» (learning.css) ───────────────────────────────────── */
.lp-inside__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-inside__filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Поле поиска — макет: span с текстом плейсхолдера вместо input */
.lp-inside__fsearch {
  position: relative;
  display: inline-flex;
}
.lp-inside__fsearch svg {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 14px;
  height: 14px;
  color: var(--text-dim);
}
.lp-inside__fsearch-field {
  display: flex;
  align-items: center;
  width: 210px;
  height: 40px;
  padding: 0 12px 0 33px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
}
.lp-inside__dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.lp-inside__dd--wide {
  min-width: 186px;
}
.lp-inside__dd-key {
  color: var(--text-dim);
}
.lp-inside__dd svg {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
}
.lp-inside__favchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__favchip svg {
  width: 14px;
  height: 14px;
}
.lp-inside__sortseg {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.lp-inside__sortseg span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__sortseg span.is-active {
  background: var(--hover);
  color: var(--text);
}

.lp-inside__lprogress {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 160px;
}
.lp-inside__lprogress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lp-inside__lprogress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-inside__lprogress-val {
  font-family: var(--font-mono);
  font-size: 12px;
}
.lp-inside__lprogress-val b {
  font-weight: 400;
  color: var(--success);
}
.lp-inside__lprogress-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.lp-inside__lprogress-bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--success);
}

.lp-inside__tgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.lp-inside__lcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lp-inside__lcard--solved {
  border-color: rgba(62, 207, 142, 0.28);
}
.lp-inside__lcard-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding-right: 34px;
}
.lp-inside__lcard-title {
  font-size: 18px;
  font-weight: 600;
}
/* Тизер обрезан по четырём строкам — высота карточек в ряду одинаковая */
.lp-inside__lcard-teaser {
  height: 78px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.lp-inside__lcard-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
.lp-inside__lcard-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.lp-inside__lcard-fav svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-dim);
}
.lp-inside__lcard-fav.is-on svg {
  fill: var(--success);
  stroke: var(--success);
}

/* Чип категории/сложности — общий для «Обучения» и «Создать таск» */
.lp-inside__tagchip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  background: var(--hover);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__tagchip i {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}
/* На «Обучении» точка на пиксель мельче — как `.zf-dot` в learning.html */
.lp-inside__lcard-tags .lp-inside__tagchip i {
  width: 6px;
  height: 6px;
}
.lp-inside__tagchip--solved {
  gap: 5px;
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--success);
}
.lp-inside__tagchip--solved svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

/* ── Экран «Создать таск» (submit.css) ─────────────────────────────────── */
.lp-inside__subpanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.lp-inside__subpanel-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.lp-inside__segtabs {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.lp-inside__segtabs span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.lp-inside__segtabs span.is-active {
  background: var(--primary);
  color: var(--on-primary);
}
.lp-inside__subcount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.lp-inside__btn--take {
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.lp-inside__btn--take svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}

.lp-inside__subgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-inside__subcard {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lp-inside__subcard-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
/* Цвет/фон/рамку кладёт инлайном SUBMISSION_STATUS_STYLES */
.lp-inside__stpill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.lp-inside__stpill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.lp-inside__subcard-name {
  font-size: 15px;
  font-weight: 600;
}
.lp-inside__subcard-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.lp-inside__subcard-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-control);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__subcard-btn--accent {
  border-color: rgba(217, 168, 84, 0.35);
  color: var(--warning);
}

/* ── Экран «Райтапы» (writeups.css) ────────────────────────────────────── */
.lp-inside__hero--writeups img {
  object-position: right center;
}
.lp-inside__hero--writeups .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(120, 48, 58, 0.92) 0%, rgba(120, 48, 58, 0.6) 28%, rgba(120, 48, 58, 0) 54%);
}
.lp-inside__wrbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lp-inside__fsearch--wr .lp-inside__fsearch-field {
  width: 220px;
}
/* Сортировка на «Райтапах» прижата к правому краю панели */
.lp-inside__sortseg--end {
  margin-left: auto;
}
.lp-inside__wrgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-inside__wrcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lp-inside__wrcard-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lp-inside__wrchip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__wrchip i {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}
.lp-inside__wrchip--author {
  gap: 5px;
  color: var(--text);
}
.lp-inside__wrcard-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
/* Тизер обрезан по трём строкам — карточки в ряду одной высоты */
.lp-inside__wrcard-teaser {
  height: 58px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.lp-inside__wrcard-event {
  margin-top: auto;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

/* ── Экран «Лидерборд» (leaderboard.css) ───────────────────────────────── */
.lp-inside__hero--lb {
  background: #4a3b6b;
  border: none;
}
.lp-inside__hero--lb .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(30, 21, 51, 0.88) 0%, rgba(30, 21, 51, 0.55) 32%, rgba(30, 21, 51, 0) 60%),
    linear-gradient(0deg, rgba(30, 21, 51, 0.6) 0%, rgba(30, 21, 51, 0) 42%);
}
.lp-inside__hero--lb .lp-inside__hero-body {
  max-width: 60%;
  padding: 0 40px 50px;
}
.lp-inside__hero--lb .lp-inside__hero-title {
  line-height: 1.1;
}
.lp-inside__lbfilters {
  width: fit-content;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.lp-inside__lbfilter {
  padding: 7px 12px;
  border-radius: 6px;
  font: 11px var(--font-mono);
  color: var(--text-muted);
}
.lp-inside__lbfilter.is-active {
  background: var(--primary);
  color: var(--on-primary);
}

.lp-inside__lbtable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.lp-inside__lbrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 84px 128px 82px;
  gap: 10px;
  align-items: center;
  height: 54px;
  padding: 0 16px;
}
.lp-inside__lbrow--head {
  height: auto;
  padding: 13px 16px;
  align-items: start;
}
.lp-inside__lbrow:not(.lp-inside__lbrow--head):not(.lp-inside__lbrow--self) {
  border-top: 1px solid var(--border);
}
/* Своя строка — обводка (ТЗ §2.7) */
.lp-inside__lbrow--self {
  height: 56px;
  border-radius: 9px;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.lp-inside__lbth {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-inside__lbth--r {
  text-align: right;
}
.lp-inside__lbrank {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
}
.lp-inside__lbuser {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lp-inside__lbava {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
}
.lp-inside__lbnick {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__lbyou {
  flex: none;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--primary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-primary);
}
.lp-inside__lbtag {
  display: inline-flex;
  align-items: center;
  align-self: center;
  width: fit-content;
  height: 22px;
  padding: 0 9px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__lbsolved {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lp-inside__lbsolved-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #c4c4c8;
}
.lp-inside__lbsolved-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.lp-inside__lbsolved-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--success);
}
.lp-inside__lbpts {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  color: var(--text-bright);
}
/* Мелкий бейдж звания — в таблице и в составе команды */
.lp-inside__rank--xs {
  font-size: 9px;
  padding: 3px 6px;
}

/* ── Экран «КБ-коины» (coins.css) ──────────────────────────────────────── */
.lp-inside__hero--coins img {
  object-position: right center;
}
.lp-inside__hero--coins .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(214, 104, 30, 0.94) 0%, rgba(214, 104, 30, 0.72) 30%, rgba(214, 104, 30, 0) 58%);
}
.lp-inside__hero--coins .lp-inside__hero-title {
  line-height: 1.15;
}
.lp-inside__cstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lp-inside__cstat {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lp-inside__cstat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__cstat-value {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
}
.lp-inside__cstat-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__cactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.lp-inside__cactions svg {
  width: 18px;
  height: 18px;
}
/* Две колонки: слева магазин и покупки, справа обмен и лента операций */
.lp-inside__cgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 340px;
  gap: 22px;
  align-items: start;
}
.lp-inside__ccol,
.lp-inside__cside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lp-inside__ccol {
  gap: 22px;
}
/* Правая колонка залипает при прокрутке — как в ЛК */
.lp-inside__cside {
  gap: 16px;
  position: sticky;
  top: 0;
}
.lp-inside__csec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.lp-inside__shop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lp-inside__shopcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
/* Плашка товара: высота = половина ширины + 30, как в ЛК */
.lp-inside__shopcard-ico {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
  padding-bottom: 30px;
  background: var(--surface-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-faint);
  overflow: hidden;
}
.lp-inside__shopcard-ico svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
}
.lp-inside__shopcard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.lp-inside__shopcard-name {
  font-size: 13px;
  font-weight: 600;
}
.lp-inside__shopcard-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.lp-inside__shopcard-buy {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
}
.lp-inside__shopcard-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.lp-inside__cpanel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.lp-inside__cpanel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
}
.lp-inside__cpanel-more {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__ptable-head,
.lp-inside__ptable-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 110px 90px 110px;
  gap: 12px;
  padding: 0 18px;
  border-top: 1px solid var(--border);
}
.lp-inside__ptable-head {
  padding: 7px 18px;
}
.lp-inside__ptable-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lp-inside__ptable-row {
  align-items: center;
  min-height: 46px;
}
.lp-inside__ptable-name {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__cmono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.lp-inside__cdim {
  color: var(--text-dim);
}
/* Цвет и фон пилюли приходят инлайном из данных экрана */
.lp-inside__cpill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.lp-inside__cpill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.lp-inside__exch {
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lp-inside__exch-state {
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--success);
}
.lp-inside__exch-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.lp-inside__exch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.lp-inside__exch-row--sep {
  margin-top: 14px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--border);
}
.lp-inside__exch-k {
  font-size: 12.5px;
  color: var(--text-muted);
}
.lp-inside__exch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin-top: 6px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-primary);
}

.lp-inside__oprow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}
.lp-inside__oprow-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.lp-inside__oprow-ico svg {
  width: 14px;
  height: 14px;
}
.lp-inside__oprow-ico--in {
  background: rgba(62, 207, 142, 0.12);
  color: var(--success);
}
.lp-inside__oprow-ico--out {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.lp-inside__oprow-body {
  min-width: 0;
  flex: 1;
}
.lp-inside__oprow-title {
  display: block;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-inside__oprow-date {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}
.lp-inside__oprow-amt {
  font-family: var(--font-mono);
  font-size: 13px;
}
.lp-inside__oprow-amt--in {
  color: var(--success);
}
.lp-inside__oprow-amt--out {
  color: var(--text-muted);
}

/* ── Экран «Команда» (team.css) ────────────────────────────────────────── */
.lp-inside__hero--team img {
  object-position: center right;
}
.lp-inside__hero--team .lp-inside__hero-scrim {
  background: linear-gradient(90deg, rgba(42, 69, 96, 0.9) 0%, rgba(42, 69, 96, 0.55) 32%, rgba(42, 69, 96, 0) 60%),
    linear-gradient(0deg, rgba(42, 69, 96, 0.62) 0%, rgba(42, 69, 96, 0) 42%);
}
.lp-inside__hero--team .lp-inside__hero-title {
  line-height: 1.1;
}
.lp-inside__thead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lp-inside__thead-ava {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}
.lp-inside__thead-info {
  min-width: 0;
  flex: 1;
}
.lp-inside__thead-name {
  font-size: 18px;
  font-weight: 600;
}
.lp-inside__tmenu {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}
.lp-inside__tmenu svg {
  width: 18px;
  height: 18px;
}
/* Метка секции на «Команде» — без линейки, точка отдельным элементом */
.lp-inside__tlabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-inside__tlabel i {
  font-style: normal;
  font-size: 8px;
  color: var(--text-bright);
}
.lp-inside__tmembers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-inside__tmember {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lp-inside__tmember-ava {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 600;
}
.lp-inside__tmember-nick {
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.lp-inside__trole {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__tspacer {
  flex: 1;
}
.lp-inside__tmember-rm {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-dim);
}
.lp-inside__tmember-rm svg {
  width: 15px;
  height: 15px;
}
.lp-inside__tadd {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lp-inside__picker {
  position: relative;
  display: block;
}
.lp-inside__picker-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 40px 0 14px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.lp-inside__picker-chev {
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--text-dim);
}
.lp-inside__picker-chev svg {
  width: 16px;
  height: 16px;
}
.lp-inside__tadd-hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__pending {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-inside__pendrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lp-inside__pendrow-nick {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.lp-inside__pendrow-wait {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__pendrow-cancel {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Экран «Профиль» (profile.css) ─────────────────────────────────────── */
.lp-inside__phead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
.lp-inside__pava {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
}
.lp-inside__pid {
  min-width: 0;
  flex: 1;
}
.lp-inside__ptop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}
.lp-inside__pnick {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
}
.lp-inside__ptag {
  padding: 3.5px 8px;
  background: var(--hover);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
}
.lp-inside__pmeta {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.lp-inside__pedit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-inside__pedit svg {
  width: 14px;
  height: 14px;
}

.lp-inside__pstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.lp-inside__pstat {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lp-inside__pstat-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
}
.lp-inside__pstat-val span {
  font-size: 18px;
  color: var(--text-dim);
}
.lp-inside__pstat-label {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.lp-inside__pstat-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.lp-inside__pstat-bar {
  margin-top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--hover);
  overflow: hidden;
}
.lp-inside__pstat-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--success);
}

/* Специализация: полоса красится в цвет направления, поэтому слегка гасим */
.lp-inside__spec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lp-inside__spec-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-inside__spec-cat {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 118px;
  height: 22px;
  padding: 0 8px;
  background: var(--hover);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__spec-cat i,
.lp-inside__pcard-cat i {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}
.lp-inside__spec-bar {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--hover);
  overflow: hidden;
}
.lp-inside__spec-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  opacity: 0.7;
}
.lp-inside__spec-n {
  flex: none;
  min-width: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}

.lp-inside__pcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.lp-inside__pcards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-inside__pcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lp-inside__pcard-main {
  min-width: 0;
  flex: 1;
}
.lp-inside__pcard-name {
  font-size: 14px;
  font-weight: 600;
}
.lp-inside__pcard-row {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lp-inside__pcard-cat,
.lp-inside__pcard-diff {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  background: var(--hover);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lp-inside__pcard-grade {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: rgba(62, 207, 142, 0.14);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
}
.lp-inside__pcard-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}
/* Цвет и фон приходят инлайном из SUBMISSION_STATUS_STYLES */
.lp-inside__pcard-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.lp-inside__pcard-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.lp-inside__pcard-chev {
  flex: none;
  display: flex;
  color: var(--text-dim);
}
.lp-inside__pcard-chev svg {
  width: 16px;
  height: 16px;
}

/* Плашка команды — в ЛК занимает половину ширины контента */
.lp-inside__tstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  max-width: 50%;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lp-inside__tstrip-id {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 13px;
}
.lp-inside__tstrip-ava {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
.lp-inside__tstrip-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.lp-inside__tstrip-created {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
/* Аватарки состава наезжают друг на друга */
.lp-inside__tstrip-avatars {
  display: flex;
  align-items: center;
  padding-left: 7px;
}
.lp-inside__tstrip-mini {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -7px;
  background: var(--hover);
  border: 1.5px solid var(--surface);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #c4c4c8;
}
.lp-inside__tstrip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
}

.lp-inside__pwrgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.lp-inside__pwr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lp-inside__pwr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lp-inside__pwr-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* ── Декоративный блок «серверная» ─────────────────────────────────────── */
.lp-racks {
  position: relative;
  margin-top: var(--lp-rhythm);
  height: 880px;
  border-radius: 30px;
  overflow: hidden;
}
.lp-racks__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Плашки с показателями. Значения стекла, рамки, типографики и цветов взяты
   из эталона «Главный экран.dc.html» (блок metrics); под ширину этой сетки
   пересчитаны только паддинги и кегль. */
.lp-stats {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-gap);
}
.lp-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 190px;
  padding: 36px 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(10, 16, 19, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lp-stat__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #f4f7f7;
}
/* Плюс в эталоне мельче и жирнее цифр, по общей базовой линии */
.lp-stat__value i {
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: normal;
}
.lp-stat__label {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: #c3ccd0;
}

/* ── Категории ─────────────────────────────────────────────────────────── */
/* Заголовок слева, стрелки справа на его уровне — так же, как кнопка в блоке
   шагов; собственный отступ h2 (40 снизу) стрелки не наследуют. */
.lp-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lp-gap);
}
.lp-cats__nav {
  display: flex;
  flex: none;
  gap: 10px;
  margin-bottom: 40px;
}
.lp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 0;
  background: var(--lp-card);
  border: 1.5px solid var(--lp-card-border);
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  transition: background var(--t), opacity var(--t);
}
.lp-arrow:hover {
  background: var(--lp-card-hover);
}
/* На краю ленты стрелка гаснет, но остаётся на месте: ряд не должен прыгать */
.lp-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.lp-arrow svg {
  width: 26px;
  height: 26px;
}

/* Лента направлений: одна карточка в кадре, соседние — за краем.
   `scroll-padding` не нужен: карточка занимает ленту целиком. */
.lp-cats {
  display: flex;
  gap: var(--lp-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Полосу прокрутки прячем — листают стрелками, колесом и клавишами */
  scrollbar-width: none;
}
.lp-cats::-webkit-scrollbar {
  display: none;
}
.lp-cats:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lp-cat {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  /* Колонки равны (Figma node 125:2285): 27 + 880 + 20 + 880 + 27 = 1834 —
     внутренняя ширина карточки. Было 570 под текст и 1190 под обложку. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-gap);
  min-height: 460px;
  padding: var(--lp-pad);
  background: var(--lp-card);
  border: 1.5px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
}
.lp-cat__side {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Терминал ──────────────────────────────────────────────────────────────
   Каркас под текст, который придёт позже. Геометрия по общим правилам
   лендинга: карточка 15px/3px, внутренний отступ 27. Внутри — моноширинный
   набор, единственный на странице, поэтому свои размеры, а не --lp-body-size. */
.lp-term {
  position: relative;
  background: var(--lp-card);
  /* Контур тоньше, чем у карточек-соседей: окно и так читается по шапке */
  border: 1.5px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
}
/* Подложка: кадр той же вселенной, что и герой. Лежит под текстом, прижата к
   правому нижнему углу — куча мониторов не должна наезжать на строки вывода. */
.lp-term__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
}
/* Затемнение слева: сеанс идёт по левым двум третям, и на куче мониторов
   текст бы спорил с картинкой. Справа подложка остаётся открытой. */
.lp-term__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--lp-card) 0%,
    var(--lp-card) 40%,
    rgba(15, 19, 20, 0) 78%
  );
  pointer-events: none;
}

/* Содержимое поверх подложки */
.lp-term__bar,
.lp-term__screen {
  position: relative;
}

/* Шапка окна: точки, путь, тип оболочки */
.lp-term__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 70px;
  padding: 0 var(--lp-pad);
  border-bottom: 1px solid var(--lp-card-border);
}
.lp-term__dots {
  display: flex;
  gap: 10px;
}
.lp-term__dots i {
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: var(--lp-chip-border);
}
.lp-term__path {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -0.32px;
  color: var(--lp-chip-text);
}
/* Плашка справа — тот же чип, что и в остальных блоках, только мельче */
.lp-term__badge {
  margin-left: auto;
  padding: 10px 20px;
  background: var(--lp-chip);
  border: 1px solid var(--lp-chip-border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: -0.26px;
  color: var(--lp-chip-text);
}

/* Высота фиксированная, а сеанс длиннее неё — как в настоящем терминале
   содержимое уезжает вверх. Баннер с логотипом за первые же реплики
   прокручивается за край, и это ровно то поведение, которого ждёшь. */
.lp-term__screen {
  height: 750px;
  padding: var(--lp-pad);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lp-chip-border) transparent;
}
.lp-term__screen::-webkit-scrollbar {
  width: 8px;
}
.lp-term__screen::-webkit-scrollbar-thumb {
  background: var(--lp-chip-border);
  border-radius: 100px;
}
.lp-term__screen:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.lp-term__out {
  display: flex;
  flex-direction: column;
}

/* Реплики идут группами: одна группа — один Enter. Зазор между группами
   заменяет пустую строку из сценария. */
.lp-term__step + .lp-term__step {
  margin-top: 26px;
}

/* white-space: pre обязателен — в сценарии выравнивание сделано пробелами
   (столбцы `ls`, отбивка комментариев), и схлопывать их нельзя */
.lp-term__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.36px;
  white-space: pre;
  color: var(--lp-body);
}
.lp-term__line--sys {
  color: rgba(255, 255, 255, 0.45);
}
.lp-term__line--out {
  color: var(--lp-green);
}
.lp-term__line--muted {
  color: rgba(255, 255, 255, 0.5);
}
.lp-term__line--ok {
  color: var(--lp-green);
}

/* Кто говорит: оператор зелёным, гость — приглушённо-белым */
.lp-term__who {
  color: var(--lp-green);
}
.lp-term__who--guest {
  color: rgba(255, 255, 255, 0.55);
}
/* Комментарий после # гаснет, как в подсветке шелла */
.lp-term__cmt {
  color: rgba(255, 255, 255, 0.35);
}

.lp-term__prompt {
  color: var(--lp-green);
}
.lp-term__text {
  min-width: 0;
}

/* Кнопка регистрации внутри вывода: остаётся строкой терминала, но кликается */
.lp-term__cta {
  color: var(--lp-green);
  border-bottom: 1px solid rgba(0, 255, 64, 0.35);
  transition: background var(--t), border-color var(--t);
}
.lp-term__cta:hover {
  background: rgba(0, 255, 64, 0.12);
  border-bottom-color: var(--lp-green);
}
.lp-term__cta:focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 3px;
}

/* Приглашение «нажмите Enter» — настоящая кнопка: с клавиатуры работает сама,
   мышью тоже. Скрипт дополнительно ловит Enter на всей странице. */
.lp-term__more {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.36px;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  cursor: pointer;
}
/* Свой display перебивает браузерное `[hidden] { display: none }`, поэтому
   прячем явно — иначе приглашение остаётся висеть под последней репликой */
.lp-term__more[hidden] {
  display: none;
}
.lp-term__morehint {
  color: rgba(255, 255, 255, 0.3);
  transition: color var(--t);
}
/* Enter ловит landing.js на всём документе — там, где клавиатуры нет, у сеанса
   остаётся только тап по этой же кнопке, и подпись про Enter вводила бы в
   заблуждение. Развилка по `hover`, а не по ширине: дело в устройстве ввода. */
.lp-term__morehint--tap {
  display: none;
}
@media (hover: none) {
  .lp-term__morehint--key {
    display: none;
  }
  .lp-term__morehint--tap {
    display: inline;
  }
}
.lp-term__more:hover .lp-term__morehint {
  color: rgba(255, 255, 255, 0.6);
}
.lp-term__more:focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 4px;
}

/* Появление очередной группы. Скрипт снимает `hidden`, а класс держит
   короткий въезд — без него текст «телепортируется». */
.lp-term__step.is-new {
  animation: lp-term-in 260ms ease-out both;
}
@keyframes lp-term-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-term__step.is-new {
    animation: none;
  }
}

/* Символьный логотип — как вывод linux_logo. Три вещи, без которых арт «плывёт»:
   line-height ровно 1 (иначе фигура растягивается по вертикали), letter-spacing
   ноль (у остальных строк он отрицательный) и white-space: pre. Пропорции арта
   рассчитаны под ячейку JetBrains Mono 0.6em × 1em. */
.lp-term__art {
  margin: 14px 0 30px;
  font-family: var(--font-mono);
  /* Кегль меньше, чем у реплик: баннер набран из символов, при равном кегле он
     перетягивал бы на себя весь блок */
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  color: rgba(255, 255, 255, 0.92);
  overflow-x: auto;
}

/* Курсор в последней строке — единственная анимация блока */
.lp-term__caret {
  display: inline-block;
  width: 10px;
  height: 20px;
  background: var(--lp-green);
  transform: translateY(2px);
  animation: lp-term-blink 1.1s steps(1, end) infinite;
}
@keyframes lp-term-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-term__caret {
    animation: none;
  }
}

/* ── Зачёт за таски: четыре шага ────────────────────────────────────────── */
/* Геометрия — общая для лендинга: полоса 1840 на четыре колонки с зазором 20,
   внутренний отступ карточки 27, «текст → чипы» 40, «заголовок → описание» 20.
   Ничего нового в палитру не добавляется: карточка, рамка и чипы — те же
   переменные, что у остальных блоков, зелёный — тот же `--lp-green`. */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-step {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: var(--lp-pad);
  background: var(--lp-card);
  border: 1.5px solid var(--lp-card-border);
  border-radius: 15px;
}
/* Ховера нет намеренно: карточка шага — не ссылка и никуда не ведёт, светлеть
   ей не за что (в отличие от карточек мероприятий). */

.lp-step__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1.2px;
  /* Номер — метка порядка, а не заголовок: он крупный, но почти утоплен в фон
     и не спорит с названием шага */
  color: rgba(255, 255, 255, 0.14);
}

.lp-step .lp-card__text {
  margin-top: 40px;
}
/* Кегль меньше общего --lp-h3 (40) и `nowrap`: названия шагов должны стоять в
   одну строку во всех четырёх карточках, а самое длинное («Пройди ревью») при
   40px упиралось в край колонки и переносилось. При 34px запас — около 80px. */
.lp-step__title {
  font-size: 34px;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
/* Описание в четыре колонки укладывается в три строки, и общий для лендинга
   line-height 1.05 их склеивает — здесь строки разведены */
.lp-step__desc {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--lp-body);
}

/* Чипы прижаты к низу: у шагов разная длина описания, а нижняя линия у всех
   четырёх карточек должна совпадать */
.lp-step__chips {
  margin-top: auto;
  padding-top: 40px;
}

/* Кнопка под сеткой во всю полосу контента (шаги, мероприятия): она продолжает
   ряд карточек, а не стоит рядом с ним, поэтому отступ сверху — зазор сетки, а
   не ритм секции. Высота 70 — как у большой кнопки финального призыва. */
.lp-more {
  width: 100%;
  height: 70px;
  margin-top: var(--lp-gap);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.36px;
}

/* Результат пути помечен только тегом: сами карточки в блоке одинаковые —
   заливка, рамка и номер у последнего шага такие же, как у первых трёх
   (зелёный остаётся на `.lp-chip--open`, см. разметку). */

/* ── Блог ──────────────────────────────────────────────────────────────── */
/* Четыре равные типографические карточки без изображений: блок собирается
   в спокойную сетку 2×2, а переход оформлен отдельной кнопкой снизу слева. */
.lp-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-gap);
}

.lp-post {
  position: relative;
  padding: var(--lp-pad);
  background: var(--lp-card);
  border: 1.5px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
  transition: background var(--t);
}
/* Карточка реагирует на курсор; внутри неё отдельная ссылка «Читать». */
.lp-post:hover {
  background: var(--lp-card-hover);
}
.lp-post:focus-within {
  outline: 1.5px solid #fff;
  outline-offset: 3px;
}

.lp-post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
  min-width: 0;
}
.lp-post__top {
  width: 100%;
}
.lp-post__headline {
  width: 100%;
}
.lp-post__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.lp-post__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  color: var(--lp-title);
}
.lp-post__desc {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--lp-body);
}

.lp-post--article {
  min-height: 290px;
}
.lp-post--article .lp-post__title {
  font-size: 36px;
  letter-spacing: -0.72px;
}
.lp-post__read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 50px;
  margin-top: auto;
  background: #fff;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: #111;
  transition: background var(--t), color var(--t);
}
.lp-post__read:hover {
  background: rgba(255, 255, 255, 0.84);
}
.lp-post__read:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1280px) {
  .lp-post--article .lp-post__title {
    font-size: 32px;
  }
}

@media (max-width: 900px) {
  .lp-posts {
    grid-template-columns: 1fr;
  }
}

/* ── Турниры и митапы ──────────────────────────────────────────────────── */
/* Карточка вертикальная, геометрия из Figma node 145:2411 / 125:2150:
   обложка 850×400 при отступе 27, контент на 467 (то есть 40 после обложки),
   внутри «теги → текст» 30, «заголовок → описание» 20. */

.lp-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-gap);
}

.lp-event {
  display: flex;
  flex-direction: column;
  min-height: 684px;
  padding: var(--lp-pad);
  background: var(--lp-card);
  border: 2px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
  transition: background var(--t);
}
/* На ховере светлеет фон, рамка не участвует */
.lp-event:hover {
  background: var(--lp-card-hover);
}
.lp-event:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Ассет обрезан ровно по кадру дизайнера (1072×505 ≈ 2.12 при боксе 2.125),
   поэтому обычного `cover` достаточно — процентные сдвиги из макета не нужны. */
.lp-event__cover {
  display: block;
  height: 400px;
  border-radius: 15px;
  overflow: hidden;
}
.lp-event__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-event__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  margin-top: 40px;
}
.lp-event__text-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-event__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lp-h3);
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--lp-title);
}
.lp-event__text {
  font-size: var(--lp-body-size);
  line-height: 1.05;
  letter-spacing: -0.44px;
  color: var(--lp-body);
}

/* ── Финальный призыв ──────────────────────────────────────────────────── */
.lp-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 650px;
  padding: 60px var(--lp-pad);
  background: var(--lp-card);
  border: 3px solid var(--lp-card-border);
  border-radius: 15px;
  overflow: hidden;
}
.lp-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  width: 988px;
  max-width: 100%;
}
.lp-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lp-cta__title {
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
/* Сменяющаяся вторая строка. `nowrap` обязателен: варианты разной длины, и без
   него самый длинный переносится на две строки — кнопка под ним подпрыгивает.
   Длительность transition совпадает с FADE в landing.js. */
.lp-rotate {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 300ms ease, transform 300ms ease;
}
.lp-rotate.is-out {
  opacity: 0;
  transform: translateY(-12px);
}
.lp-rotate.is-in {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: reduce) {
  .lp-rotate {
    transition: none;
  }
}
/* По краям две анимации: слева сервер, справа компьютер.

   Выравнивать их по краям канвы бесполезно: пустые поля внутри GIF у обеих
   разные. При канве 620 корпус сервера занимает (103,68)…(512,442) — слева
   пустует 103px, у компьютера при канве 620×585 корпус (8,48)…(606,577), слева
   всего 8px. Поставишь канвы на равный отступ — корпуса разъедутся на ~50px.
   Поэтому размер элемента точно повторяет пропорции канвы, а из отступов ниже
   вычтены поля внутри неё: до края карточки 35px именно у корпусов.

   Из корпусов на анимации выхлёстывают провода — они выходят за bbox корпуса и
   у левого края уезжают под `overflow: hidden` карточки. Так и задумано: провод
   уходит за край, а машины стоят ровно. */
.lp-cta__decor {
  position: absolute;
  top: 50%;
  pointer-events: none;
}
/* Пропорции элемента совпадают с канвой, так что `contain` ничего не
   ужимает; `bottom` оставлен подстраховкой от дробного округления — он держит
   низ картинки на месте, а на нём построен общий «пол» под обеими машинами. */
.lp-cta__decor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* Сервер: канва 620×450, масштаб 339/620. Слева 35 − 103×0.5468 = −21.32.
   По геометрии низ корпуса встал бы на «центр + 137», как у компьютера
   (translateY(-104.67px)), но оптически сервер тогда висит ниже: у компьютера
   вперёд выступает клавиатура, у сервера — только ножки. Поэтому −20px. */
.lp-cta__decor--l {
  width: 339px;
  aspect-ratio: 620 / 450;
  left: -21.32px;
  transform: translateY(-124.67px);
}
/* Компьютер: канва 620×585, масштаб 299/620. Справа 35 − 14×0.4823 = 28.25,
   низ корпуса — на «центре карточки + 137». */
.lp-cta__decor--r {
  width: 299px;
  aspect-ratio: 620 / 585;
  right: 28.25px;
  transform: translateY(-141.26px);
}

/* ── Подвал ────────────────────────────────────────────────────────────── */
/* Плашка рифмуется с шапкой: тот же радиус 20 и та же рамка на всю полосу
   контента. Отступ снизу зеркалит отступ шапки сверху, чтобы страница
   начиналась и заканчивалась одинаковым полем. Сверху подвал отбит на 180
   штатным `padding-bottom` у main. */
.lp-footer {
  padding-bottom: 18px;
}
.lp-footer__bar {
  padding: 40px;
  background: var(--lp-card);
  border: 2px solid var(--lp-card-border);
  border-radius: 20px;
}
/* Фокус во всём подвале одинаковый: на тёмной плашке белая обводка читается
   лучше любого цветного акцента. `:where` держит нулевую специфичность, чтобы
   правило не перебивало цвета ссылок ниже. */
.lp-footer :where(a, button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ряд направлений — тот же перечень, что в бегущей строке под героем.
   Там он едет и обрезан краем экрана, здесь стоит и виден целиком: страница
   закрывается тем же, чем открылась. */
.lp-footer__spine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 30px;
  margin: 0;
  padding: 0 0 32px;
  list-style: none;
  border-bottom: 1px solid var(--lp-card-border);
}
.lp-footer__dir {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-footer__dir-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.36px;
  color: #fff;
}
.lp-footer__dir-count {
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: var(--lp-eyebrow);
}

/* Бренд и навигация. Колонка бренда фиксированная, три колонки ссылок делят
   остаток поровну. */
.lp-footer__main {
  display: grid;
  grid-template-columns: 560px repeat(3, minmax(0, 1fr));
  gap: var(--lp-gap);
  /* Нижней линии нет: этот ряд теперь последний, и отчёркивать под ним нечего */
  padding: 50px 0 0;
}
.lp-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.lp-footer__logo img {
  width: 150px;
  height: 46.667px;
  object-fit: contain;
}
.lp-footer__note {
  max-width: 420px;
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.36px;
  color: var(--lp-body);
}
.lp-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* Заголовок колонки взят с «глазка» секций (кегль, трекинг, версалы), но без
   точки: четыре точки в ряд превратили бы служебные подписи в узор. */
.lp-footer__head {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--lp-eyebrow);
}
/* Ссылки подвала гаснут в покое и разгораются под курсором — обратно шапке,
   где пункты меню белые и на ховере, наоборот, приглушаются. */
.lp-footer__link {
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.36px;
  color: var(--lp-body);
  transition: color var(--t);
}
.lp-footer__link:hover {
  color: #fff;
}

/* ── Появление блоков при скролле ──────────────────────────────────────
   Класс `lp-js` вешает landing.js, поэтому без JS (и при reduced-motion)
   ничего не прячется — страница остаётся обычной статикой. Задержку внутри
   группы карточек скрипт кладёт в --lp-reveal-delay. */
.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(28px);
}
.lp-js .lp-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--lp-reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .lp-js .lp-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ══ Адаптивы ═══════════════════════════════════════════════════════════════

   Основная вёрстка выше — макет 1:1 (полоса 1840, отступ 40). Здесь она
   ужимается до планшета и телефона. Правила общие для всего публичного сайта:
   шапка, подвал и примитивы (.lp-wrap, .lp-chip, .lp-btn, .lp-h2) живут в этом
   же файле и подключены на всех публичных страницах.

   Четыре ступени:
     1440 — ноутбук: только кегли и ритм, сетки не трогаем;
     1024 — планшет: сетки в две колонки, шапка сворачивается в бургер;
     720  — телефон: всё в одну колонку;
     430  — узкий телефон: доводка кеглей под 320–360 полосы контента.

   Ширины считаны от полосы контента: на 390-м экране это 390 − 2×16 = 358, у
   карточки внутри остаётся 358 − 2×20 = 318. Все кегли ниже подобраны так,
   чтобы самая длинная строка блока в эти 318 укладывалась.

   Пропорции макета сохраняются: меняются значения переменных `.lp`, а не
   геометрия компонентов — карточки, чипы и отступы пересчитываются сами. */

/* ── Ноутбук ───────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .lp {
    --lp-rhythm: 130px;
    --lp-h1: 62px;
    --lp-h2: 56px;
    --lp-h3: 34px;
  }

  /* Высоты из макета были минимумом под 1840-ю полосу: в узкой колонке текст
     и так занимает больше, а лишний воздух превращается в пустое дно карточки */
  .lp-card--feature {
    min-height: 0;
  }
  .lp-event {
    min-height: 0;
  }
  .lp-post--article {
    min-height: 0;
  }
}

/* ── Шапка: меню уезжает под логотип ───────────────────────────────────── */
/* У шапки своя ступень, раньше общей планшетной. Считаем по полосе: логотип
   150 + меню 627 + кнопки 259 + два зазора по 24 = 1084, плюс отступы полосы
   (56), рамка (4) и поля страницы (80) — ровно 1224. Ниже этого меню в строку
   уже не помещается: колонка логотипа схлопывалась, и он таял на глазах.
   Порог 1280 — ближайшая ступень сетки выше расчётной. */
@media (max-width: 1280px) {
  /* В полосе остаются логотип и бургер; меню уезжает в панель, выезжающую
     справа поверх страницы. Панель, а не раскрытие в потоке: пунктов с
     кнопками аккаунта и мессенджерами набирается на пол-экрана, и в потоке
     они утаскивали бы герой вниз ровно на свою высоту. */
  .lp-header__bar {
    /* Обратно во флекс: здесь полоса переносится, а не делится на колонки.
       Перенос нужен варианту без JS (см. `<noscript>` в base_public.html):
       там меню остаётся в потоке и встаёт второй строкой. */
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 16px 18px;
    row-gap: 16px;
  }
  .lp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    background: var(--lp-chip);
    border: 2px solid var(--lp-chip-border);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background var(--t);
  }
  .lp-burger:hover {
    background: var(--lp-card-hover);
  }
  .lp-burger__lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
  }
  .lp-burger__lines i {
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  /* ── Выдвижная панель ──────────────────────────────────────────────────
     Состояние держит класс `lp-nav-open` на <html>: им же гасится прокрутка
     страницы под панелью. Закрытое состояние — умолчание, поэтому до запуска
     public-nav.js панели на экране нет. */
  .lp-nav-open,
  .lp-nav-open body {
    overflow: hidden;
  }
  .lp-menu__scrim {
    display: block;
    position: fixed;
    z-index: 90;
    inset: 0;
    background: rgba(4, 5, 6, 0.72);
    opacity: 0;
    /* `visibility` в переходе, а не `display`: скрытую панель нельзя оставлять
       в порядке табуляции, но `display` не анимируется */
    visibility: hidden;
    transition: opacity 300ms, visibility 300ms;
  }
  .lp-nav-open .lp-menu__scrim {
    opacity: 1;
    visibility: visible;
  }
  .lp-header__menu {
    /* Отступ панели вынесен в переменную: строки списка вылезают за него в
       минус, чтобы подсветка и линейки шли от края до края */
    --lp-menu-pad: 20px;
    position: fixed;
    z-index: 100;
    inset-block: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(360px, 86vw);
    padding: 16px var(--lp-menu-pad) 24px;
    background: var(--lp-card);
    border-left: 1px solid var(--lp-card-border);
    overflow-y: auto;
    /* Докрутив список до конца, палец не должен потянуть страницу под панелью */
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 340ms cubic-bezier(0.22, 0.72, 0.25, 1),
      visibility 340ms;
  }
  .lp-nav-open .lp-header__menu {
    transform: none;
    visibility: visible;
  }
  @media (prefers-reduced-motion: reduce) {
    .lp-menu__scrim,
    .lp-header__menu {
      transition-duration: 0s;
    }
  }

  /* Шапка панели повторяет полосу сайта: логотип на месте логотипа, крестик —
     на месте бургера, поэтому выезд не сдвигает точку, куда смотрит глаз */
  .lp-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  .lp-menu__logo {
    width: 120px;
    height: auto;
  }
  .lp-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--lp-chip);
    border: 2px solid var(--lp-chip-border);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background var(--t);
  }
  .lp-menu__close:hover {
    background: var(--lp-card-hover);
  }
  .lp-menu__close svg {
    width: 22px;
    height: 22px;
  }

  /* Пункты становятся строками списка во всю ширину: под палец нужна не
     подчёркнутая надпись, а полоса, в которую можно попасть не глядя.
     Разделены волосяной линией — как ряды в подвале, не как кнопки. */
  .lp-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .lp-nav__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin-inline: calc(var(--lp-menu-pad) * -1);
    padding-inline: var(--lp-menu-pad);
    border-top: 1px solid var(--lp-card-border);
    transition: background var(--t), color var(--t);
  }
  .lp-nav__link:last-child {
    border-bottom: 1px solid var(--lp-card-border);
  }
  /* Шеврон уходит к правому краю: `order` меняет порядок, не трогая разметку */
  .lp-nav__link svg {
    display: block;
    order: 1;
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
  }
  /* На тач-экране единственный отклик — нажатие: hover там не наступает */
  .lp-nav__link:active {
    background: var(--lp-card-hover);
  }
  @media (hover: hover) {
    .lp-nav__link:hover {
      background: var(--lp-card-hover);
      color: #fff;
    }
  }

  /* Вход с регистрацией — не пункты меню, а действия с аккаунтом: прижаты к
     низу панели, во всю ширину. Вес у них разный: белая «Регистрация» —
     единственное громкое пятно в панели, «Вход» рядом только обведён. Залитой
     плашкой он равнялся и с ней, и с мессенджерами ниже, и группа читалась
     стопкой одинаковых прямоугольников без старшего. */
  .lp-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding-top: 28px;
  }
  /* Обе кнопки одной высоты: `flex` им не задаём — в колонке он не делит ряд,
     а сплющивает кнопку по высоте (на этом и сломалась «Регистрация») */
  .lp-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 54px;
    padding: 0 22px;
    border: 1.5px solid var(--lp-chip-border);
    border-radius: 10px;
  }
  /* Заливка приходит только под пальцем: в покое кнопка остаётся контуром */
  .lp-header__login:active {
    background: var(--lp-chip);
  }
  @media (hover: hover) {
    .lp-header__login:hover {
      background: var(--lp-chip);
      color: #fff;
    }
  }
  .lp-btn--sm {
    flex: none;
    height: 54px;
    padding: 0 22px;
  }
  /* У залогиненного вместо пары кнопок одна, и она здесь старшая — значит
     белая, как «Регистрация» у гостя. Буква ника уезжает в свой квадрат:
     на белой плашке она без него читалась бы обрубком подписи. */
  .lp-header__account {
    width: auto;
    height: 54px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    background: #fff;
    border-color: #fff;
  }
  .lp-header__account:active {
    background: #e4e4e6;
    border-color: #e4e4e6;
  }
  @media (hover: hover) {
    .lp-header__account:hover {
      background: #e4e4e6;
      border-color: #e4e4e6;
    }
  }
  .lp-header__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
    color: #333;
  }
  .lp-header__account-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.36px;
    color: #333;
  }

  /* Мессенджеры отбиты линейкой: они не действие с аккаунтом, а «где нас
     найти». Набраны мелко и строчными, как теги направлений, — третья
     ступень веса, ниже обеих кнопок аккаунта. */
  .lp-menu__social {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--lp-card-border);
  }
  .lp-menu__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lp-menu__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: var(--lp-chip);
    border: 1.5px solid var(--lp-chip-border);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lp-chip-text);
    transition: background var(--t), color var(--t);
  }
  .lp-menu__social-link:active {
    background: var(--lp-card-hover);
  }
  @media (hover: hover) {
    .lp-menu__social-link:hover {
      background: var(--lp-card-hover);
      color: #fff;
    }
  }
}

/* ── Планшет ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp {
    --lp-gutter: 24px;
    --lp-gap: 16px;
    --lp-rhythm: 100px;
    --lp-pad: 20px;
    /* Заголовок героя тянется за шириной окна: три строки по макету жёстко
       разбиты <br>, и кегль должен быть таким, чтобы самая длинная из них —
       «на реальных задачах», 13.68em при tracking −0.02em ≈ 13.55em — ровно
       укладывалась в полосу. Полоса = окно минус отступ страницы (24) и
       внутренний отступ героя (26) с двух сторон. Потолок 48px — размер
       ступени, выше него заголовок не растёт. */
    --lp-h1: min(48px, calc((100vw - 100px) / 13.55));
    --lp-h2: 40px;
    --lp-h3: 28px;
    --lp-body-size: 18px;
  }

  .lp-h2 {
    margin: 28px 0;
    letter-spacing: -0.8px;
  }
  .lp-chip {
    padding: 12px 18px;
  }
  .lp-chip--sm {
    padding: 8px 14px;
  }
  .lp-more,
  .lp-btn--lg {
    height: 60px;
  }

  /* Логотип мельчает вместе со всей ступенью; остальная шапка переехала на
     свою — 1280, см. блок выше: меню перестаёт помещаться в полосу раньше,
     чем страница доходит до планшетной сетки. */
  .lp-header__logo img {
    width: 124px;
    height: 38.5px;
  }

  /* ── Герой ───────────────────────────────────────────────────────────── */
  /* Обложка 1774×887 (2:1), бокс героя — вертикальный, поэтому `cover` режет
     кадр только по горизонтали: вся вертикаль композиции остаётся в кадре —
     сверху небо с луной, ниже луч, внизу маяк и камни. Окно сдвинуто на маяк
     (68% по горизонтали), и текст садится в небо, а не на камни: заголовок и
     подпись идут одним блоком сверху, нижние две трети остаются под картинку.
     Поэтому здесь `flex-start`, а не разгон текста по краям, как на широком
     экране — там пустое небо занимает всю левую половину кадра. */
  .lp-hero__box {
    height: auto;
    min-height: min(620px, calc(100vh - 200px));
    /* Текст стоит вверху кадра — 20px до верхнего края */
    justify-content: flex-start;
    gap: 18px;
    padding: 20px 26px 26px;
    border-radius: 28px;
  }
  /* Трекинг как у заголовков секций: на крупном кегле Unbounded он собирает
     строку и заодно даёт те самые 2% ширины, из которых считается --lp-h1 */
  .lp-hero__title {
    letter-spacing: -0.02em;
  }
  .lp-hero__bg img {
    object-position: 68% center;
  }
  .lp-hero__sub {
    font-size: 18px;
  }

  /* ── Бегущая строка ──────────────────────────────────────────────────── */
  /* Шаг анимации завязан на ширину плашки: меняем — пересчитываем набор,
     иначе копия встанет мимо оригинала и лента дёрнется на каждом круге */
  .lp-strip__row {
    --lp-strip-set: calc(7 * (268px + var(--lp-gap)));
    margin-left: -24px;
  }
  .lp-strip__item {
    width: 268px;
    height: 76px;
    padding: 0 14px;
    border-radius: 16px;
  }
  .lp-strip__name {
    font-size: 18px;
  }
  .lp-strip__meta {
    min-width: 88px;
    gap: 6px;
  }
  .lp-strip__meta b {
    font-size: 18px;
  }
  .lp-strip__meta i {
    font-size: 14px;
  }

  /* ── Карточки ────────────────────────────────────────────────────────── */
  .lp-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Родная пропорция иллюстраций — 4:3; фиксированная высота срезала им верх
     и низ (подробнее на ступени 720) */
  .lp-card__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .lp-card__body {
    gap: 22px;
    margin-top: 26px;
  }
  .lp-card__text {
    gap: 14px;
  }

  /* ── Платформа изнутри ───────────────────────────────────────────────── */
  /* Демо ведёт себя как картинка: дизайн точь-в-точь десктопный, ничего не
     переливается и не перестраивается. Уменьшается высота блока, весь макет
     масштабируется за ней пропорционально, а ширина, которая не влезла, уходит
     вправо под обрез. Так это сделано на linear.app.

     Геометрия. «Картинка» — 1840 × 978 (внутренние 1533 × 815 при zoom 1.2).
     Масштаб задаётся высотой: k = H / 978, отрисованная ширина = 1840k.

     По макету (Figma node 265:4127, фрейм 400×696) демо лежит картинкой
     667 × 332 при x = 10: то есть блок начинается от левого поля страницы и
     уходит за правый край экрана. Отсюда k = 332 / 978 = 0.34 на телефоне.
     Правое поле блок не соблюдает — ширину добираем отрицательным полем ровно
     на отступ страницы, чтобы дойти до края экрана; правый борт и скругления
     справа при этом снимаем, там теперь обрез, а не край карточки.

     Не `width: 100vw`: на десктопных браузерах в 100vw входит полоса прокрутки,
     и блок вылезал бы за вьюпорт, добавляя горизонтальный скролл всей странице. */
  .lp-inside {
    --lp-inside-k: 0.62;
    /* Высота блока и масштаб оболочки считаются от одного значения — порознь
       они разъезжаются. 978 — высота «картинки» после zoom. */
    height: calc(978px * var(--lp-inside-k));
    margin-right: calc(var(--lp-gutter) * -1);
    border-right: 0;
    /* Справа скругления нет: там обрез по краю экрана, а не край карточки */
    border-radius: 10px 0 0 10px;
    /* Обрезанная часть достаётся перетаскиванием вбок (Figma node 269:4134:
       та же картинка 667 в кадре 400 при x = 10 → −166 → −282, то есть ход
       ровно «ширина содержимого минус видимая»). Пальцем и тачпадом это делает
       сама прокрутка, мышью — обработчик в landing.js. */
    overflow-x: auto;
    overflow-y: hidden;
    /* Полосу прячем: в макете её нет, за affordance отвечает сам обрез */
    scrollbar-width: none;
    /* Чтобы протяжка до упора не уходила в жест «назад» и не тащила страницу */
    overscroll-behavior-x: contain;
  }
  .lp-inside::-webkit-scrollbar {
    display: none;
  }
  /* Сцена размером с уменьшенный макет: transform раскладку не меняет, поэтому
     без неё контейнеру нечего прокручивать — он считал бы содержимое шириной
     в полные 1840 и уезжал бы в пустоту справа от макета. */
  .lp-inside__stage {
    width: calc(1840px * var(--lp-inside-k));
    height: calc(978px * var(--lp-inside-k));
  }
  .lp-inside.is-dragging {
    cursor: grabbing;
  }
  .lp-inside__shell {
    /* На десктопе тут `width: 100%` от полосы 1840; на узком экране те же 100%
       сжали бы ЛК до ширины телефона, поэтому прибиваем макетную ширину */
    width: 1533px;
    /* Именно transform, а не zoom: zoom пересчитывает раскладку заново — иначе
       ложатся шрифты, уплывает субпиксельное округление, — и макет отличался бы
       от десктопного. transform масштабирует уже готовый результат, то есть
       ровно то поведение картинки, которое и нужно. */
    transform: scale(var(--lp-inside-k));
    transform-origin: top left;
  }
  /* Рабочая область листается вертикально, как на десктопе — правило из
     основного блока (`overflow-y: auto`) действует и здесь, отдельного
     переопределения не нужно. Полоса прокрутки при таком масштабе тонкая,
     но `transform` прокрутке не мешает: она честно работает и пальцем, и
     колесом, и с клавиатуры (у области свой tabindex). */

  /* ── Показатели ──────────────────────────────────────────────────────── */
  /* Плашки съезжают из угла картинки в поток: четыре штуки в две колонки уже
     не помещаются поверх кадра, и подпирать их абсолютом нечем */
  .lp-racks {
    height: auto;
    padding: 220px 24px 24px;
    border-radius: 20px;
  }
  .lp-racks__bg {
    position: absolute;
    inset: 0;
  }
  .lp-stats {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-stat {
    min-height: 0;
    padding: 24px 22px;
    gap: 10px;
  }
  .lp-stat__value {
    font-size: 40px;
    letter-spacing: -0.8px;
  }
  .lp-stat__value i {
    font-size: 24px;
  }
  .lp-stat__label {
    font-size: 15px;
  }

  /* ── Категории ───────────────────────────────────────────────────────── */
  /* Стрелки не влезают в строку с заголовком — уходят под него и прижимаются
     к нему вплотную: это часть шапки блока, а не отдельная панель управления */
  .lp-cats__head {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-cats__head .lp-h2 {
    margin-bottom: 18px;
  }
  .lp-cats__nav {
    justify-content: flex-end;
    margin: 0 0 18px;
  }
  /* Карточка чуть уже ленты, чтобы из-за края выглядывала следующая. На широком
     экране край ленты совпадает с краем полосы контента и «ещё есть» читается
     по стрелкам; здесь стрелки мельче и в стороне, а направлений семь — без
     этого выступа лента выглядит как одна карточка и дальше её не листают. */
  .lp-cat {
    flex-basis: calc(100% - 34px);
  }
  .lp-arrow {
    width: 54px;
    height: 54px;
  }
  .lp-arrow svg {
    width: 22px;
    height: 22px;
  }
  .lp-cat {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .lp-cat__side {
    gap: 24px;
  }
  /* Обложка направления панорамная — пропорцию 4:3 от `.lp-card__media` снимаем */
  .lp-cat__media {
    height: 260px;
    aspect-ratio: auto;
  }

  /* ── Терминал ────────────────────────────────────────────────────────── */
  /* Затемнение из левых двух третей растягивается почти на всю карточку: сеанс
     теперь идёт по всей ширине, и правая, открытая часть подложки спорила бы
     с текстом */
  .lp-term__scrim {
    background: linear-gradient(
      90deg,
      var(--lp-card) 0%,
      var(--lp-card) 70%,
      rgba(15, 19, 20, 0.65) 100%
    );
  }
  .lp-term__bar {
    height: 58px;
    gap: 14px;
  }
  .lp-term__screen {
    height: 560px;
  }
  .lp-term__line,
  .lp-term__more {
    font-size: 14px;
  }
  .lp-term__art {
    font-size: 10px;
  }
  .lp-term__caret {
    width: 8px;
    height: 16px;
  }

  /* ── Шаги ────────────────────────────────────────────────────────────── */
  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-step {
    min-height: 0;
  }
  .lp-step__num {
    font-size: 46px;
  }
  /* `nowrap` из макета держал названия в одну строку в четырёх колонках; здесь
     колонка шире, но кегль меньше — запрет переноса больше не нужен и только
     распирал бы карточку */
  .lp-step__title {
    font-size: 26px;
    white-space: normal;
  }
  .lp-step .lp-card__text {
    margin-top: 26px;
  }
  .lp-step__desc {
    font-size: 17px;
  }
  .lp-step__chips {
    padding-top: 26px;
  }

  /* ── Блог ────────────────────────────────────────────────────────────── */
  .lp-post--article .lp-post__title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }
  .lp-post__desc {
    font-size: 17px;
  }
  .lp-post__read {
    width: 150px;
    height: 46px;
  }

  /* ── Мероприятия ─────────────────────────────────────────────────────── */
  .lp-event__cover {
    height: 260px;
  }
  /* Четыре плашки в строку на телефоне не встают в паддингах и кегле
     десктопа (12px/7×12 даёт 404 при 299 доступных) — но подложка у каждого
     тега важнее кегля, поэтому ужимаем плашку целиком, а не убираем её у
     трёх из четырёх.

     Кегль тянется за шириной карточки, иначе фиксированное значение либо
     режется на 320, либо оставляет пятую часть строки пустой на 440.
     Коэффициент выведен замером самой длинной возможной строки — предельные
     значения всех четырёх тегов сразу («12.09.2026», «турнир», «офлайн»,
     «регистрация», 33 знака моно): её ширина растёт на 25.55px с каждым
     пикселем кегля плюс 16px на рамки. Полоса карточки = 100vw − 76 (поля
     страницы 32, рамка 4, отступы карточки 40), запас 8px, отсюда
     F = (100vw − 100) / 25.55 ≈ 3.91vw − 3.9.

     Потолок 14px — дальше строка и так не заполняется (упирается в него
     около 457px), нижняя граница страхует совсем узкие экраны. */
  .lp-event .lp-chips {
    --lp-tag: clamp(8px, calc(3.91vw - 3.9px), 14px);
    gap: calc(var(--lp-tag) * 0.45);
  }
  .lp-event .lp-chips > * {
    padding: 0.36em 0.55em;
    font-family: var(--font-mono);
    font-size: var(--lp-tag);
    letter-spacing: 0;
  }
  .lp-event__body {
    gap: 22px;
    margin-top: 26px;
  }
  .lp-event__text-group {
    gap: 14px;
  }

  /* ── Финальный призыв ────────────────────────────────────────────────── */
  /* Машины больше не стоят по бокам от текста — колонка стала уже их пары.
     Опускаем обе на пол карточки и освобождаем под них поле снизу. */
  .lp-cta {
    min-height: 0;
    padding: 48px 24px 210px;
    /* Колонка грида по умолчанию `auto`, то есть по max-content содержимого:
       блок внутри распирал бы карточку. Здесь ширину диктует карточка. */
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ширина 988 из макета делает колонку грида max-content — на узком экране
     блок вылезал бы за карточку вправо (`max-width: 100%` считается уже от
     этой колонки, а не от карточки). Здесь ширину задаёт сама карточка. */
  .lp-cta__inner {
    width: 100%;
    gap: 48px;
  }
  /* Постоянная строка призыва набирается в одну — «Регистрируйся,» отдельной
     строкой ломает фразу не там, где она читается. Кегль плавающий, по тому же
     принципу, что у заголовка героя: полоса делится на ширину строки —
     «Регистрируйся, решай,» это 14.34em (Unbounded 400), плюс 11px обратно за
     трекинг −0.5px, который в отличие от кегля не масштабируется. Так строка
     ложится ровно по краям кнопки под ней.

     Потолок 30px — ступень заголовков секций; ниже него кегль уходит только с
     495px, то есть уже на ступени 720, поэтому в полосе учтены её отступы:
     окно минус отступ страницы (16), рамка карточки (3) и её внутренний
     отступ (18) с двух сторон. Выше 495 полосу считать незачем — там работает
     потолок. */
  .lp-cta__title {
    white-space: nowrap;
    font-size: min(30px, calc((100vw - 63px) / 14.4));
  }
  .lp-cta__decor {
    top: auto;
    bottom: 0;
    transform: none;
  }
  /* Отступы сохраняют смысл оригинала: из них по-прежнему вычтены пустые поля
     внутри канвы, пересчитанные под новую ширину (−21.32 × 208/339 и
     28.25 × 184/299) */
  .lp-cta__decor--l {
    width: 208px;
    left: -13.08px;
  }
  .lp-cta__decor--r {
    width: 184px;
    right: 17.38px;
  }

  /* ── Подвал ──────────────────────────────────────────────────────────── */
  .lp-footer__bar {
    padding: 28px 22px;
    border-radius: 16px;
  }
  .lp-footer__spine {
    justify-content: flex-start;
    gap: 16px 26px;
    padding-bottom: 24px;
  }
  .lp-footer__dir-name {
    font-size: 16px;
  }
  .lp-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px var(--lp-gap);
    padding-top: 32px;
  }
  /* Бренд встаёт над колонками ссылок: 560px под него в трёх колонках нет */
  .lp-footer__brand {
    grid-column: 1 / -1;
  }
  .lp-footer__note {
    font-size: 16px;
  }
  .lp-footer__link {
    font-size: 16px;
  }
}

/* ── Телефон ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .lp {
    --lp-gutter: 16px;
    --lp-rhythm: 72px;
    /* Шкала на телефоне: 13 (глазок) / 16 (текст) / 22 (заголовок карточки) /
       30 (заголовок секции). Ступени крупные намеренно: Unbounded здесь
       акцидентная гарнитура, и если подтянуть её к кеглю текста, она перестаёт
       от него отличаться — страница выравнивается в один серый кегль. */
    /* Заголовок героя — плавающий (см. ступень 1024). Здесь из окна вычитаются
       свои отступы: страница 16 + герой 20 с двух сторон. */
    --lp-h1: min(48px, calc((100vw - 72px) / 13.55));
    /* Заголовки секций тоже плавающие, и вот почему. Самый длинный из них —
       «ZaFlag — открытая платформа, где ты решаешь…» — при 30px на полосе 358
       ложился девятью строками, из которых две заполнены на 38%: после
       «задачи,» и «живого» оставались дыры в две трети строки. Дело не в кегле
       самом по себе, а в его отношении к ширине колонки: строка набирается
       жадно, и стоит длинному слову («соревнуешься») не влезть в остаток, оно
       уезжает целиком.

       Прогон раскладки по кеглям на 358px дал минимум рваности при отношении
       колонка/кегль ≈ 13.77 (то есть 26px): семь строк, ни одной короче 71%.
       Держим это отношение на любой ширине — так рисунок строк одинаковый и на
       360, и на 430, а не подобран под один экран. Потолок 30px — размер
       ступени. Полоса = окно минус отступ страницы (16) с двух сторон. */
    --lp-h2: min(30px, calc((100vw - 32px) / 13.77));
    --lp-h3: 22px;
    --lp-body-size: 16px;
  }

  .lp-h2 {
    margin: 22px 0;
    line-height: 1.02;
    letter-spacing: -0.5px;
    /* Переносы по слогам не включаем: в акцидентном кегле дефисы в конце
       строк читаются хуже, чем рваный край. Слова уезжают на следующую строку
       целиком — так и надо. */
  }
  /* Переносы в заголовках расставлены под полосу 1840: в узкой колонке каждая
     их строка ломается ещё раз и оставляет висячие огрызки («турнирах»,
     «митапы»). Отдаём перенос браузеру — набор становится ровным.

     Заголовок финального призыва — исключение: его перенос отделяет постоянную
     строку от сменяющейся (.lp-rotate), и без него они склеиваются в одну.

     В разметке перед каждым таким <br> стоит пробел — иначе с погашенным
     переносом слова по обе стороны слипаются в один длинный токен, который
     браузеру негде разорвать, и он вылезает за полосу. */
  .lp-h2:not(.lp-cta__title) br,
  .lp-hero__sub br {
    display: none;
  }
  .lp-eyebrow {
    gap: 10px;
  }
  .lp-eyebrow::before,
  .lp-dot {
    width: 9px;
    height: 9px;
  }
  .lp-eyebrow span {
    font-size: 13px;
  }
  .lp-chip {
    padding: 10px 14px;
    font-size: 13px;
  }
  .lp-chip--sm {
    padding: 7px 12px;
    font-size: 12px;
  }
  .lp-chips {
    gap: 8px;
  }
  .lp-more,
  .lp-btn--lg {
    height: 54px;
    font-size: 16px;
  }

  /* ── Герой ───────────────────────────────────────────────────────────── */
  .lp-hero {
    margin-top: 12px;
  }
  .lp-hero__box {
    height: min(720px, calc(100vh - 150px));
    /* Новый мобильный мастер 440×956 рассчитан на iPhone Pro Max. Высокий
       герой оставляет текст в чистом небе, а башню показывает целиком внизу. */
    height: min(720px, calc(100dvh - 150px));
    min-height: 560px;
    /* Заголовок с подписью стоят в чистом небе наверху — 20px до края */
    justify-content: flex-start;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
  }
  .lp-hero__bg img {
    object-position: center bottom;
  }
  /* Верхний градиент страхует белый текст, нижний сохраняет глубину камней.
     Оба работают поверх отдельной мобильной композиции, не кадрируя маяк. */
  .lp-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(8, 9, 10, 0.46) 0%, rgba(8, 9, 10, 0) 48%),
      linear-gradient(0deg, rgba(8, 9, 10, 0.56) 0%, rgba(8, 9, 10, 0) 38%);
    pointer-events: none;
  }
  .lp-hero__sub {
    font-size: 16px;
  }

  /* ── Бегущая строка ──────────────────────────────────────────────────── */
  .lp-strip {
    margin-top: 24px;
  }
  .lp-strip__row {
    --lp-strip-set: calc(7 * (218px + var(--lp-gap)));
    margin-left: -16px;
  }
  .lp-strip__item {
    width: 218px;
    height: 66px;
    padding: 0 12px;
    border-radius: 14px;
  }
  .lp-strip__name {
    gap: 8px;
    font-size: 15px;
  }
  .lp-strip__name .lp-dot {
    width: 11px;
    height: 11px;
  }
  .lp-strip__meta {
    min-width: 70px;
    gap: 4px;
  }
  .lp-strip__meta b {
    font-size: 15px;
  }
  .lp-strip__meta i {
    font-size: 12px;
  }

  /* ── Одна колонка ────────────────────────────────────────────────────── */
  .lp-grid--3,
  .lp-steps,
  .lp-events {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Иллюстрации карточек (feature-*.png) нарисованы 4:3. При фиксированной
     высоте `cover` срезал им верх и низ, и от рисунка оставалась полоса
     посередине — задаём родную пропорцию, тогда кадр входит целиком. */
  .lp-card__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  /* Обложки направлений и мероприятий — панорамные (1.75–2.13), им высота по
     месту, пропорцию не навязываем */
  .lp-cat__media,
  .lp-event__cover {
    height: 200px;
    aspect-ratio: auto;
  }

  /* ── Платформа изнутри ───────────────────────────────────────────────── */
  /* Один множитель — высота блока пересчитается сама. Ступень нужна, чтобы
     демо продолжало доходить до правого края и на широком телефоне: при 0.34
     отрисованных 626px не хватило бы блоку шириной 704 (экран 720). */
  .lp-inside {
    --lp-inside-k: 0.42;
  }

  /* ── Показатели ──────────────────────────────────────────────────────── */
  .lp-racks {
    padding: 150px 16px 16px;
  }
  .lp-stat {
    padding: 18px 16px;
  }
  .lp-stat__value {
    font-size: 30px;
    letter-spacing: -0.5px;
  }
  .lp-stat__value i {
    font-size: 18px;
  }
  .lp-stat__label {
    font-size: 13px;
    line-height: 1.3;
  }

  /* ── Категории ───────────────────────────────────────────────────────── */
  /* Стрелки убираем: листают здесь пальцем, а «дальше есть ещё» показывает
     выглядывающая карточка. Пара кнопок съедала бы ~110px первого экрана,
     дублируя жест. Ни мышь, ни клавиатура при этом ничего не теряют: лента —
     обычная прокрутка, у неё свой tabindex, и стрелки на клавиатуре, колесо и
     тачпад работают сами (см. блок «Категории» выше). */
  .lp-cats__nav {
    display: none;
  }

  /* ── Терминал ────────────────────────────────────────────────────────── */
  /* `pre` меняем на `pre-wrap`: выравнивание пробелами внутри строки он
     сохраняет (столбцы `ls`, отбивка комментариев), а длинные реплики
     переносит — иначе сеанс пришлось бы читать горизонтальной прокруткой.
     Баннер остаётся на `pre` со своим правилом выше: его ломать нельзя. */
  .lp-term__line {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0;
    white-space: pre-wrap;
  }
  .lp-term__more {
    font-size: 12px;
    gap: 8px;
  }
  .lp-term__bar {
    height: 48px;
    gap: 10px;
    padding: 0 16px;
  }
  .lp-term__path {
    font-size: 13px;
  }
  .lp-term__badge {
    padding: 7px 12px;
    font-size: 11px;
  }
  .lp-term__screen {
    height: 420px;
  }
  /* 78 знаков баннера при ячейке 0.6em дают 78 × 0.6 × 6.5 ≈ 304px — ровно в
     полосу карточки на 390-м экране, без прокрутки */
  .lp-term__art {
    margin: 10px 0 22px;
    font-size: 6.5px;
  }
  .lp-term__step + .lp-term__step {
    margin-top: 18px;
  }

  /* ── Шаги ────────────────────────────────────────────────────────────── */
  .lp-step__num {
    font-size: 38px;
  }
  .lp-step__title {
    font-size: 22px;
  }
  .lp-step__desc {
    font-size: 15px;
  }

  /* ── Блог ────────────────────────────────────────────────────────────── */
  .lp-post--article .lp-post__title {
    font-size: 22px;
  }
  .lp-post__desc {
    font-size: 15px;
  }
  .lp-post__body {
    gap: 18px;
  }
  .lp-post__read {
    width: 130px;
    height: 42px;
  }

  /* ── Финальный призыв ────────────────────────────────────────────────── */
  /* На телефоне машины убраны совсем: в полосе 318 они мельчают до иконок и
     перестают читаться как «пол» под текстом, а весят 11.8 МБ гифками — цена
     несоразмерна. Вместе с ними уходит и поле снизу, которое их держало.
     Одного `display: none` мало — картинку браузер всё равно качает, поэтому в
     разметке на этой ступени <picture> отдаёт пустой пиксель. */
  .lp-cta {
    padding: 32px 18px;
  }
  .lp-cta__decor {
    display: none;
  }
  .lp-cta__inner {
    gap: 32px;
  }
  .lp-cta__title {
    line-height: 1.15;
  }

  /* ── Подвал ──────────────────────────────────────────────────────────── */
  .lp-footer__bar {
    padding: 22px 18px;
  }
  /* На телефоне направления встают в ту же двухколоночную сетку, что и ссылки
     ниже: flex-wrap с justify-content: space-between даёт рваные строки,
     потому что ширина пары зависит от длины названия направления. */
  .lp-footer__spine {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
  }
  .lp-footer__dir-name {
    font-size: 15px;
  }
  .lp-footer__dir-count {
    font-size: 13px;
  }
  /* Ссылки на телефоне идут в две колонки: одной колонкой подвал вытягивается в
     длинный список, где половина ширины карточки простаивает. Бренд остаётся во
     всю ширину — под ним текст, который в половину не влезает. */
  .lp-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    padding-top: 24px;
  }
  .lp-footer__brand {
    grid-column: 1 / -1;
  }
  .lp-footer__col {
    gap: 14px;
  }
  .lp-footer__note {
    font-size: 15px;
  }
  .lp-footer__link {
    font-size: 15px;
  }
}

/* ── Узкий телефон ─────────────────────────────────────────────────────── */
/* Полоса контента здесь 320−352, внутри карточки — 280−312. Правим только то,
   что в них перестаёт помещаться. */
@media (max-width: 430px) {
  /* Кегль заголовка героя тут не задаём: он плавающий и сам держит три строки
     на любой ширине (см. ступень 1024). */
  .lp-header__logo img {
    width: 108px;
    height: 33.6px;
  }
  /* Масштаб демо прямо из макета: 332 / 978. На экране 390 даёт блок 374 × 332
     при отрисованных 626 — видно 60% ширины, как в Figma (390 из 667). */
  .lp-inside {
    --lp-inside-k: 0.34;
  }

  .lp-strip__row {
    --lp-strip-set: calc(7 * (196px + var(--lp-gap)));
  }
  .lp-strip__item {
    width: 196px;
  }
  .lp-strip__name {
    font-size: 14px;
  }
  .lp-strip__meta {
    min-width: 62px;
  }

  .lp-stats {
    gap: 10px;
  }
  .lp-stat__value {
    font-size: 26px;
  }

  .lp-term__art {
    font-size: 5.6px;
  }
}