/* ==========================================================================
   ЕЩЁ РАЗ — сайт
   ==========================================================================

   Дизайн-система НЕ придумана для сайта: это та же, что в приложении
   (src/index.css, блок @theme). Тот же холодный графит с синим подтоном, тот
   же источник света сверху, те же полупрозрачные границы, тот же Inter
   Variable и тот же Unbounded — только на бренде.

   Почему так, а не «красивый лендинг»: сайт продаёт приложение, и человек
   приходит с рилса. Если сайт выглядит как другой продукт, реклама врёт.
   Разница только в масштабе: у приложения потолок 56px, у страницы нужна
   строка на 104px — это тот же ряд ступеней, продолженный на октаву выше,
   а не новая шкала.

   ПРАВИЛО, КОТОРОЕ ДЕРЖИТ СТРАНИЦУ ОТ ШАБЛОНА: насыщенный цвет есть ровно
   в одном месте — на строке, где вес вырос. В приложении мятный цвет означает
   «прогресс», и на сайте он должен означать ровно то же, а не быть
   «брендовым акцентом» на кнопке.
   ========================================================================== */

/* ─── шрифты: локально, те же файлы, что в приложении ────────────────────
   Подключены с файлов, а не с CDN. Причина та же, что в src/index.css:
   приложение не должно отдавать половину первого экрана чужому хосту.
   Четыре файла — латиница и кириллица двух гарнитур. На странице только
   кириллица и цифры, полные наборы с итальянскими фракциями не нужны.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('/assets/fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Unbounded Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('/assets/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ─── токены ──────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Поверхности. Ровно те четыре ступени, что в приложении (--color-*). */
  --bg: #07080b;
  --surface: #101218;
  --surface-2: #181b23;
  --surface-3: #22262f;

  /* Границы — полупрозрачным белым, не цветом. На тёмном фоне сплошная
     граница читается как линия поверх, полупрозрачная — как край материала. */
  --hairline: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Свет. Один источник, сверху: кромка материала, блик на поверхности,
     ореол над экраном. Те же значения, что --edge* в приложении. */
  --edge: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.11);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 52%);

  /* Текст. Три ступени, все проходят AA к самому светлому фону. */
  --text: #f4f5f7;
  --dim: #b6bcc7;
  --faint: #959cab;

  /* Один хроматический оттенок на страницу. Смысловой: рост веса. */
  --up: #63e0a0;

  --action: #f4f5f7;
  --on-action: #07080b;

  /* Радиусы — те же три, что в приложении. */
  --r-card: 22px;
  --r-tile: 14px;
  --r-inner: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.32, 0.72, 0, 1);

  --shell: 1240px;
  --gutter: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
 * ОРЕОЛ. Тот же приём, что .app-shell::before: одно слабое холодное пятно
 * сверху, 4.5% белого. Из-за него графит перестаёт быть плоской заливкой.
 * Здесь он шире и ниже — на странице первый экран длиннее телефонного.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 90vh;
  pointer-events: none;
  background: radial-gradient(
    ellipse 46% 100% at 50% 0%,
    rgba(214, 226, 255, 0.05) 0%,
    rgba(214, 226, 255, 0.02) 40%,
    transparent 72%
  );
}

/* Табличные цифры обязательны для всего, что считает: без них строка
   «2 990 ₽» прыгает на ширине при наведении на тариф. */
.num,
.plan-price,
.prog-pair,
.fact-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: pretty;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* ─── каркас ──────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.label {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

.lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 46ch;
}

.section {
  padding-block: 96px;
  border-top: 1px solid var(--hairline);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px 64px;
  align-items: start;
  margin-bottom: 56px;
}

.section-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

/* ─── шапка ───────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

/* Размытие earned: панель лежит поверх контента, а не сама по себе. */
.nav.is-stuck {
  background: rgba(7, 8, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}

.nav__row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-right: auto;
}

/* Unbounded — только на названии. В приложении он занят одним элементом
   (.brand-strip) и больше нигде не появляется; здесь то же правило. */
.brand__name {
  font-family: 'Unbounded Variable', 'Inter Variable', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dim);
}

.brand__mark {
  width: 22px;
  height: 22px;
  flex: none;
}

/* ─── кнопки ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out),
    background-color 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    opacity 0.18s var(--ease-out);
}

.btn--primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--primary:hover {
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--quiet {
  background: transparent;
  color: var(--dim);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 var(--edge);
}

.btn--quiet:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
}

.btn--small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

:where(a, button):focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── первый экран ────────────────────────────────────────────────────── */

/*
 * АСИММЕТРИЯ, А НЕ ЦЕНТР. Текст прижат влево, телефон стоит справа и уходит
 * вправо за край: композиция держится на разнице весов, а не на симметрии.
 * Центрованный стек — самая частая форма AI-лендинга, и она здесь была бы
 * ещё и враньём: продукт асимметричный (интерфейс на 390px слева).
 */
.hero {
  padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 120px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 48px 64px;
  align-items: center;
}

.hero__title {
  margin-top: 20px;
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero__lead {
  margin-top: 24px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero__note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--faint);
}

/*
 * Рамка телефона.
 *
 * В первой версии телефон не читался: рамка и страница были одного цвета
 * (#07080b), и на снимке силуэт состоял только из нижних скруглённых углов.
 * Теперь у рамки три слоя, каждый отвечает за своё:
 *
 *   inset 0 1px 0        верхняя кромка ловит свет — тот же приём, что
 *                        --edge у материалов в приложении, свет сверху;
 *   inset 0 0 0 1px      контур, на тон светлее прежнего: на чёрном поле
 *                        8% белого не видно, нужно 14%;
 *   0 0 0 1px rgba(0,0,0,.7) и тень
 *                        отделяют телефон от страницы тёмной полосой —
 *                        без неё тёмный объект на тёмном фоне не имеет
 *                        силуэта вообще.
 */
.phone {
  position: relative;
  justify-self: end;
  width: 302px;
  max-width: 100%;
  border-radius: 30px;
  background: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px var(--border-strong),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 34px 80px -34px rgba(0, 0, 0, 1),
    0 2px 10px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/*
 * height: auto обязателен и не для красоты. Атрибуты width/height в разметке
 * задают пропорции ещё ДО загрузки картинки, и браузер по ним считает
 * aspect-ratio. Если высота в атрибуте не совпадает с файлом, то при
 * max-width: 100% ширина сжимается, а высота остаётся от атрибута: телефон
 * получается 302×2360 вместо 302×696. Так и вышло в первой версии.
 */
.phone img {
  width: 100%;
  height: auto;
}

/*
 * Вылет за правое поле: телефон не должен заканчиваться ровно на полях
 * страницы, иначе он читается как вставленная картинка. Но величина
 * вылета не может быть постоянной.
 *
 * Арифметика. Правый край колонки — это правый край контента оболочки:
 * при ширине экрана больше 1240px это viewport/2 + 596. Чтобы телефон
 * остался внутри экрана, нужно viewport/2 + 596 + вылет ≤ viewport, то есть
 * viewport ≥ 1384 для вылета 96px. Ниже этой ширины вылет 96 срезал угол
 * телефона (проверено замерами на 1024px: правый край 1040 при экране
 * 1024). Поэтому вылет включается только на широких экранах, а не задаётся
 * всем подряд.
 */
.hero__phone {
  margin-right: -96px;
}

@media (max-width: 1383px) {
  .hero__phone {
    margin-right: 0;
  }
}

.hero__figure {
  margin: 0;
}

/* ─── полоса-разделитель: не секция, а одна строка фактов ─────────────── */

.factline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}

.factline__cell {
  background: var(--bg);
  padding: 28px 24px 32px 0;
}

.factline__cell + .factline__cell {
  padding-left: 32px;
}

.fact-value {
  display: block;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.factline__text {
  margin-top: 10px;
  font-size: 15px;
  color: var(--dim);
  max-width: 30ch;
}

/* ─── механика: число как главный объект ──────────────────────────────── */

/*
 * Один экран, одна мысль: прошлый результат → следующий вес. Переход
 * набран ЦИФРАМИ, а не картинкой со стрелкой: в приложении переход и есть
 * два числа, стоящие рядом, и подменять его иллюстрацией значит врать о том,
 * как устроен продукт.
 */
.prog {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 40px 64px;
  align-items: start;
}

/*
 * Размер пары привязан к ширине колонки, а не к вкусу: в 0.8fr колонке на
 * 88px строка «80 × 8 → 82,5 × 8» не влезала и молча переносилась — «8»
 * уезжало на вторую строку, и переход выглядел как «80 → 82,5, а × 8 где-то
 * снизу». Теперь колонка шире, кегль меньше, и nowrap как запасной замок:
 * перенос внутри пары невозможен в принципе.
 */
.prog-pair {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: clamp(34px, 4.1vw, 58px);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.045em;
  margin-top: 28px;
}

.prog-pair__was,
.prog-pair__now {
  white-space: nowrap;
}

.prog-pair__was {
  color: var(--faint);
}

.prog-pair__now {
  color: var(--text);
}

.prog-arrow {
  color: var(--faint);
  font-weight: 400;
  transform: translateY(-2px);
}

/* Мятный — ровно здесь и больше нигде: вес вырос. */
.prog-note {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--up);
}

.prog-caption {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--faint);
  max-width: 52ch;
}

/* Правила расчёта — спецификация с волосяными разделителями, а не
   три одинаковые карточки с иконками. */
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.rules li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}

.rules__n {
  font-size: 13px;
  color: var(--faint);
  padding-top: 5px;
}

.rules__title {
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.rules__text {
  margin-top: 6px;
  font-size: 15px;
  color: var(--dim);
  max-width: 54ch;
}

/* ─── спецификация «что внутри» ────────────────────────────────────────── */

.spec {
  border-top: 1px solid var(--hairline);
  columns: 2;
  column-gap: 72px;
}

.spec__row {
  break-inside: avoid;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--hairline);
}

.spec__title {
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.012em;
}

.spec__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 44ch;
}

/* ─── программа: текст + настоящий кадр ──────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 48px 72px;
  align-items: start;
}

.split--reverse {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
}

.split--reverse > .split__media {
  order: -1;
}

.split__media {
  justify-self: end;
  width: 302px;
  max-width: 100%;
}

.split--reverse .split__media {
  justify-self: start;
}

/* Вопросы воронки — настоящие тексты бота, а не «шаг 1 / шаг 2». */
.questions {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  max-width: 46ch;
}

.questions li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
}

.questions__n {
  color: var(--faint);
  font-size: 13px;
  padding-top: 3px;
  min-width: 20px;
}

/* ─── каталог программ ────────────────────────────────────────────────── */

.catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 48px;
}

.catalog__group-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-strong);
}

.catalog__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15.5px;
}

.catalog__days {
  margin-left: auto;
  font-size: 14px;
  color: var(--faint);
  white-space: nowrap;
}

/* ─── тарифы ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.plan {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--r-card);
  background: var(--sheen), var(--surface);
  box-shadow:
    inset 0 1px 0 var(--edge),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/*
 * Рекомендованный тариф выделяется ЯРКОСТЬЮ, а не цветом: белая заливка и
 * тёмный текст. В приложении ровно так же — главное действие отличается
 * контрастом (--color-action), а не оттенком.
 */
.plan--lead {
  background: var(--action);
  color: var(--on-action);
  box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.9);
}

.plan__badge {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-action);
  opacity: 0.6;
}

.plan__title {
  font-size: 17px;
  font-weight: 560;
}

.plan__price {
  margin-top: 14px;
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan__note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--dim);
}

.plan--lead .plan__note {
  color: rgba(7, 8, 11, 0.62);
}

.plans__foot {
  margin-top: 28px;
  font-size: 15px;
  color: var(--dim);
  max-width: 62ch;
}

/* ─── канал ───────────────────────────────────────────────────────────── */

.channel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 72px;
  align-items: center;
}

.channel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.channel__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
  color: var(--dim);
}

/* ─── подвал ──────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--hairline);
  padding-block: 56px 72px;
  font-size: 14px;
  color: var(--faint);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: baseline;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-left: auto;
}

.footer a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.footer a:hover {
  color: var(--text);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

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

/*
 * Появление при прокрутке.
 *
 * Прозрачность ставится ТОЛЬКО когда скрипт доказал, что он есть: селектор
 * `.js .reveal`, а класс `js` вешает сам скрипт. Иначе при любой отказе
 * (JS заблокирован, ошибка синтаксиса, CDN-прокси вырезал файл) страница
 * осталась бы с opacity: 0 — то есть пустой, без единого блока, при
 * полностью рабочей вёрстке.
 *
 * То же самое с prefers-reduced-motion: там .reveal виден сразу.
 */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/*
 * РЕЖИМ СНИМКА. Появление срабатывает от IntersectionObserver, то есть от
 * видимой области, а снимок страницы снимается целиком и половина блоков в
 * нём была бы прозрачной. Параметр ?still=1 включает все блоки сразу.
 */
.still .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .nav {
    transition: none;
  }
}

/* ─── адаптив ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spec {
    columns: 1;
    column-gap: 0;
  }
  /*
   * .hero__phone здесь больше не задаётся: вылет и так снят правилом
   * max-width: 1383px. Второе правило ниже по файлу перебивало бы первое и
   * возвращало вылет на узких экранах — так телефон и уезжал за край на
   * 1024px.
   */
}

@media (max-width: 900px) {
  .section {
    padding-block: 64px;
  }
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 40px;
  }
  .hero__grid,
  .prog,
  .split,
  .split--reverse,
  .channel {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse > .split__media {
    order: 0;
  }
  .hero__phone {
    margin-right: 0;
    justify-self: start;
  }
  .split__media,
  .split--reverse .split__media {
    justify-self: start;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .factline {
    grid-template-columns: minmax(0, 1fr);
  }
  .factline__cell,
  .factline__cell + .factline__cell {
    padding: 20px 0;
  }
  .footer__links {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }
  body {
    font-size: 16px;
  }
  .lead {
    font-size: 17px;
  }
  .catalog {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .prog-pair {
    gap: 12px;
  }
  .nav__row {
    height: 56px;
  }
  .btn {
    width: 100%;
  }
  .hero__actions {
    gap: 10px;
  }
}