/* Витрина Medina Edu — светлая тема «Медина Манускрипт».

   ВЕРСИЯ МОДУЛЯ: 1.18.0
   Обязана совпадать с MEL_VT_VER в medina-vitrina.php.
   За совпадением следит прогон test-versii.php.

   Палитра взята из пакета дизайнера (август 2026). Тёмная тема
   платформы — «Медина Лакшери» — остаётся на кабинете и панели;
   витрина светлая, и это решение владельца от 30 августа.

   Своя палитра здесь НЕ спорит с кабинетом: у витрины свои
   страницы и свои имена переменных с приставкой `--vt-`.
   Взять `--me-*` значило бы перекрасить заодно кабинет —
   а это отдельная работа, которую владелец отложил. */

.vt {
  /* ── Пергамент и поверхности ── */
  --vt-bg:        oklch(0.965 0.012 90);
  --vt-bg-alt:    oklch(0.95 0.014 92);
  --vt-surface:   oklch(0.995 0.006 90);
  --vt-border:    oklch(0.88 0.016 90);
  --vt-line:      oklch(0.82 0.03 120);

  /* ── Текст ── */
  --vt-text:      oklch(0.3 0.02 160);
  --vt-head:      oklch(0.26 0.02 160);
  --vt-muted:     oklch(0.5 0.015 130);

  /* ── Изумруд: действие ── */
  --vt-primary:      oklch(0.46 0.085 158);
  --vt-primary-ink:  oklch(0.97 0.02 90);
  --vt-primary-soft: oklch(0.94 0.03 158);
  --vt-primary-hover:oklch(0.38 0.08 158);

  /* ── Золото: акцент, но не действие ── */
  --vt-accent:      oklch(0.68 0.1 78);
  --vt-accent-ink:  oklch(0.3 0.05 78);

  /* ── Терракота: ТОЛЬКО точка бейджа ──
     Единственное её место на витрине. В служебной части она значит
     «требует действия», и вторая терракота здесь размыла бы сигнал
     там. Отдельным именем — чтобы никто не взял её «заодно». */
  --vt-badge-dot:   oklch(0.55 0.11 42);

  /* ── Тёмная полоса: подвал и врезки ── */
  --vt-dark:      oklch(0.28 0.025 162);
  --vt-on-dark:   oklch(0.92 0.015 100);

  --vt-shadow:    0 26px 46px -32px oklch(0.4 0.03 120 / 0.55);
  --vt-shadow-cta:0 16px 36px -16px oklch(0.46 0.085 158 / 0.65);

  --vt-serif: "PT Serif", Georgia, serif;
  --vt-sans:  "PT Sans", system-ui, sans-serif;
  --vt-arab:  "Amiri", "Traditional Arabic", serif;

  background: var(--vt-bg);
  color: var(--vt-text);
  font-family: var(--vt-sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}
.vt *, .vt *::before, .vt *::after { box-sizing: border-box; }
.vt h1, .vt h2, .vt h3 { font-family: var(--vt-serif); font-weight: 700;
  color: var(--vt-head); text-wrap: balance; margin: 0 }
.vt p { text-wrap: pretty; margin: 0 }
.vt a { color: var(--vt-primary); text-decoration: none }
.vt a:hover { color: var(--vt-primary-hover) }

/* Арабская вязь. `unicode-bidi:isolate` обязателен: без него
   порядок ломается в смешанной строке. */
.vt .ar { font-family: var(--vt-arab); direction: rtl; unicode-bidi: isolate }

/* Решётка-арабеск. Маркер публичной зоны: в кабинете фон ровный,
   там она мешала бы читать плотные списки. */
.vt-pz {
  background-color: var(--vt-bg);
  background-image:
    repeating-linear-gradient(45deg,  oklch(0.46 0.085 158 / 0.04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, oklch(0.46 0.085 158 / 0.04) 0 1px, transparent 1px 30px);
}
.vt-pz-alt {
  background-color: var(--vt-bg-alt);
  background-image:
    repeating-linear-gradient(45deg,  oklch(0.46 0.085 158 / 0.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, oklch(0.46 0.085 158 / 0.055) 0 1px, transparent 1px 26px);
}

/* ── Палитра для ИИ-Ассистента ──────────────────────────
   Ассистент рисует окно переменными КАБИНЕТА (`--me-*`), а витрина
   на своих (`--vt-*`). Без этих объявлений окно вышло бы
   бесцветным: браузер не находит переменную и берёт пустоту.

   Значения СВЕТЛЫЕ, из брифа «Медина Манускрипт»: на пергаменте
   тёмное окно кабинета смотрелось бы чужим.

   Объявляем на `.vt`, а не на `:root` — чтобы это не протекло
   в кабинет, если однажды витрину и кабинет откроют рядом. */
.vt {
  --me-bg:           oklch(0.965 0.012 90);
  --me-bar:          oklch(0.955 0.008 95);
  --me-surface:      oklch(0.995 0.006 90);
  --me-border:       oklch(0.88 0.016 90);
  --me-border-soft:  oklch(0.92 0.012 90);
  --me-text:         oklch(0.3 0.02 160);
  --me-faint:        oklch(0.6 0.015 130);
  --me-primary:      oklch(0.46 0.085 158);
  --me-primary-ink:  oklch(0.97 0.02 90);
  --me-calm-soft:    oklch(0.94 0.03 158);

  /* Кружки помощников — ТЕ ЖЕ значения, что в тёмной теме.
     Не переставляются: кружок должен отличаться от кнопок
     страницы, а взяв --me-primary, он с ними сливался.
     Повторены здесь явно, чтобы «одинаково» было записано,
     а не получалось по наследству. */
  --me-bubble:        oklch(0.6 0.16 158);
  --me-bubble-bright: oklch(0.64 0.17 158);
  --me-bubble-ink:    oklch(0.99 0.01 150);
  --me-bubble-glow:   oklch(0.6 0.16 158 / .24);
  --me-calm-bright:  oklch(0.38 0.08 158);
  --me-on-calm:      oklch(0.26 0.04 158);
  --me-accent:       oklch(0.68 0.1 78);
  --me-accent-ink:   oklch(0.3 0.05 78);
  --me-gold-soft:    oklch(0.94 0.04 82);
  --me-urgent:       oklch(0.52 0.13 35);
  --me-urgent-soft:  oklch(0.94 0.035 35);
}

/* ── Шапка ─────────────────────────────────────────────── */
/* Черта под шапкой — НА ВСЮ ШИРИНУ ОКНА.

   Владелец увидел, что она обрезана по бокам. Мои стили тут
   ни при чём: обрезала ТЕМА WordPress, которая держит тело
   страницы в столбце с полями.

   `width:100vw` с отрицательным полем в половину лишнего —
   выход из любого столбца, каким бы узким он ни был. Работает,
   даже если тему сменят.

   `max-width:none` обязателен: тема ставит свой предел,
   и без отмены он победит. */
.vt body, body.vt { margin: 0 }
.vt-head { position: sticky; top: 0; z-index: 20; display: flex;
  align-items: center; gap: 18px; padding: 14px 32px;
  background: oklch(0.965 0.012 90 / 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vt-border);
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  box-sizing: border-box }
/* Марка — та же, что в кабинете: картинка, название, золотая
   подпись. Строение повторено дословно, а цвета взяты светлые:
   на пергаменте золото кабинета блёкнет, здесь нужен темнее. */
.vt .vt-logo { display: flex; align-items: center; gap: 12px; min-width: 0;
  color: var(--vt-head) }
.vt .vt-logo:hover { color: var(--vt-head) }
/* Картинка 40px, а не 34. Владелец: «логотип мелковат по отношению
   к надписи».

   Он прав, и вот чем. Блок «название плюс подпись» высотой около
   37 точек: 19px названия при межстрочном 1.1 плюс 10px подписи
   при 1.5. Картинка 34×42 по высоте была даже больше — но купол
   узкий, и рядом с широкой надписью читался мелким.

   Считать надо не по высоте, а по ШИРИНЕ: 40 точек — это 108%
   ширины текстового блока, картинка перестаёт быть приставкой
   к тексту и становится ему ровней.

   Больше не берём: 44 дают шапку в 82 точки против нынешних 70,
   и она начинает давить на первый экран. */
.vt-logo-m { width: 40px; height: auto; flex: none; display: block }
.vt-logo-t { font: 700 19px/1.1 var(--vt-sans); letter-spacing: .01em;
  color: var(--vt-head) }
.vt-logo-t em { display: block; font: 400 10px/1.5 var(--vt-sans);
  color: var(--vt-accent-ink); font-style: normal; letter-spacing: .13em;
  text-transform: uppercase; margin-top: 1px;
  /* Подпись прописными шире названия и на 390px переносится
     на две строки — видно на снимке владельца. Перенос запрещаем
     и ужимаем разрядку: две строки поднимают шапку и рвут строй. */
  white-space: nowrap }
.vt-gap { flex: 1 }
.vt-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
.vt .vt-nav a { padding: 9px 14px; border-radius: 5px; font-weight: 700;
  font-size: 14px; color: oklch(0.4 0.03 160) }
.vt-nav a:hover { background: var(--vt-primary-soft); color: var(--vt-primary) }

/* ── Кнопки ────────────────────────────────────────────── */
.vt-btn { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vt-sans); font-weight: 700; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; text-align: center }
/* `.vt a` ниже по весу НЕ окажется: у него класс плюс тип элемента,
   а у одного класса кнопки — только класс. Правило ссылки побеждало,
   и текст на зелёной кнопке становился зелёным: кнопка выходила
   пустым прямоугольником.

   Владелец увидел это на живой странице 30 августа: «Войти»,
   «Хочу учиться», «Записаться» — все без надписей.

   Лечим весом, а не `!important`: `.vt .vt-btn-main` — два класса,
   этого хватает. Правило платформы: специфичность добирается
   селектором, а не силой. */
.vt .vt-btn-main { background: var(--vt-primary); border-color: var(--vt-primary);
  color: var(--vt-primary-ink) }
.vt .vt-btn-main:hover { background: var(--vt-primary-hover);
  border-color: var(--vt-primary-hover); color: var(--vt-primary-ink) }
.vt .vt-btn-line { background: var(--vt-surface); border-color: var(--vt-primary);
  color: var(--vt-primary) }
.vt .vt-btn-line:hover { background: var(--vt-primary-soft); color: var(--vt-primary) }
.vt-btn-lg { padding: 16px 38px; font-size: 17px; box-shadow: var(--vt-shadow-cta) }
.vt-btn-md { padding: 11px 22px; font-size: 15px }
/* Синее кольцо браузера не оставляем — оно чужое этой палитре. */
.vt a:focus-visible, .vt button:focus-visible {
  outline: 2px solid var(--vt-primary); outline-offset: 2px }

/* ── Ромб-разделитель ──────────────────────────────────── */
.vt-romb { display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 26px }
.vt-romb span { width: 56px; height: 1px; background: var(--vt-line) }
.vt-romb i { position: relative; width: 14px; height: 14px; display: inline-block }
.vt-romb i::before, .vt-romb i::after { content: ""; position: absolute;
  inset: 0; background: var(--vt-accent) }
.vt-romb i::after { transform: rotate(45deg) }

/* ── Первый экран ──────────────────────────────────────
   Строение из прототипа «Landing v2», внедрено в точности
   30 августа 2026: бейдж, крупный заголовок, подзаголовок,
   две кнопки, полоса чисел, ромб внизу. */
.vt-hero { padding: 96px 56px 104px; text-align: center }
.vt-hero-in { max-width: 820px; margin: 0 auto }

/* Бейдж: рамка-пилюля с точкой. Стоит НАД заголовком и говорит,
   что за место, — прежде чем человек начнёт читать крупное. */
/* Значения сняты с прототипа дословно 30 августа 2026 — владелец
   прислал их из инструментов браузера.

   РАМКА И ТЕКСТ ЗЕЛЁНЫЕ, не серые: бейдж говорит о самой школе,
   и цвет школы в нём уместен. Серый я поставил сам, не посмотрев,
   и он делал бейдж служебной пометкой вместо представления.

   А ТОЧКА ТЕРРАКОТОВАЯ — цвет назван дизайнером 30 августа 2026
   в ответ на прямой вопрос владельца.

   Она единственное пятно иного цвета в верху страницы, и взгляд
   цепляется за неё первым, до заголовка. Будь она зелёной, бейдж
   читался бы одной ровной строкой, мимо которой глаз проходит.
   Золото я поставил сам, не спросив, — и оно сливалось с ромбами
   разделителей.

   ⚠ ЭТО ЕДИНСТВЕННАЯ ТЕРРАКОТА НА ВИТРИНЕ. В служебной части она
   значит «требует действия» — долг, доработка, заявка без ответа.
   Появится вторая, третья — и смысл сигнала размоется, а вместе
   с ним и красная плитка в панели перестанет пугать. */
.vt-badge { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid oklch(0.85 0.03 158);
  border-radius: 20px; background: oklch(0.99 0.006 90);
  font: 700 13px var(--vt-sans); letter-spacing: 0.3px;
  color: oklch(0.42 0.05 158);
  /* Отступ считается от строки заголовка, а не на глаз: строка
     58×1.1 ≈ 64 точки, и 40 — примерно две трети её. Меньше
     половины бейдж жмётся к заголовку (владелец увидел это
     на 28), больше трёх четвертей — отрывается и висит сам
     по себе. */
  margin-bottom: 40px;
  /* Одной строкой ВСЕГДА. Перенос ломал строй: точка уезжала
     от текста, а пилюля раздувалась вдвое по высоте. */
  white-space: nowrap;
  /* Текст своим блоком, а не голым узлом. Голый узел при переносе
     растягивается на всю оставшуюся ширину, текст в нём встаёт
     по центру, а точка остаётся у левого края — между ними
     появляется дыра в полстроки.
     Владелец увидел это на телефоне 30 августа. */
  text-align: left }
.vt-badge span { min-width: 0 }
.vt-badge i { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--vt-badge-dot) }

/* Заголовок: 58px и трекинг −0.6px — с прототипа. Я ставил 62
   и −1px на глаз, и на двух строках это заметно разъезжалось. */
.vt-hero h1 { font-size: 58px; line-height: 1.1; letter-spacing: -0.6px;
  color: oklch(0.26 0.02 160) }
.vt-hero p { font-size: 19px; line-height: 1.6; color: oklch(0.48 0.015 130);
  margin: 26px auto 0; max-width: 600px }
.vt-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 40px }
/* Стрелка отъезжает при наведении — единственное движение
   на первом экране, и оно на главной кнопке. */
.vt-arrow { display: inline-block; transition: transform .16s }
.vt .vt-btn-main:hover .vt-arrow { transform: translateX(4px) }
@media (prefers-reduced-motion: reduce) { .vt-arrow { transition: none } }

/* ── Полоса чисел ───────────────────────────────────────
   Числа считаются из платформы; вписать их руками нельзя —
   разойдутся в тот день, когда добавят книгу. */
.vt-nums { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px; margin-top: 46px }
.vt-num { display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: var(--vt-muted) }
.vt-num b { font: 700 26px var(--vt-serif); color: var(--vt-primary);
  font-variant-numeric: tabular-nums }
/* Ромбик-разделитель между числами — тот же знак, что в большом
   разделителе, только мелкий. Знак один на всю витрину. */
.vt-nums-d { width: 7px; height: 7px; flex: none;
  background: var(--vt-accent); transform: rotate(45deg) }

.vt-romb-end { margin: 54px auto 0 }
.vt-pills { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 11px; margin-top: 50px }
.vt-pill { padding: 9px 19px; border: 1px solid var(--vt-line);
  border-radius: 22px; font-size: 14px; color: oklch(0.42 0.02 150) }

/* ── Раздел ────────────────────────────────────────────── */
.vt-sec { padding: 84px 28px 92px }
.vt-sec-in { max-width: 1120px; margin: 0 auto }
.vt-sec-h { text-align: center; margin-bottom: 48px }
.vt-sec-h h2 { font-size: 38px }
.vt-sec-h p { font-size: 17px; color: var(--vt-muted); margin: 14px auto 0;
  max-width: 620px }
.vt-nad { font: 700 12px var(--vt-sans); letter-spacing: 2px;
  color: oklch(0.45 0.06 158); margin-bottom: 12px }

/* ── Карточки книг ─────────────────────────────────────── */
.vt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px }
.vt-book { display: flex; flex-direction: column; background: var(--vt-surface);
  border: 1px solid var(--vt-border); border-top: 4px solid var(--vt-primary);
  border-radius: 12px; padding: 32px 30px; box-shadow: var(--vt-shadow) }
.vt-book-top { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px }
.vt-book-mark { width: 56px; height: 56px; border-radius: 10px; flex: none;
  background: var(--vt-primary-soft); display: flex; align-items: center;
  justify-content: center; font: 700 30px var(--vt-arab); color: var(--vt-primary) }
.vt-tag { font: 700 12px var(--vt-sans); color: var(--vt-primary);
  background: var(--vt-primary-soft); padding: 6px 13px; border-radius: 20px;
  white-space: nowrap }
.vt-book-ar { font-size: 32px; font-weight: 700; color: var(--vt-head);
  line-height: 1.3; margin-bottom: 4px }
.vt-book h3 { font-size: 22px; margin-bottom: 12px }
.vt-book p { font-size: 15px; line-height: 1.7; color: var(--vt-muted); flex: 1 }
.vt-book-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--vt-border);
  font-size: 13px; color: var(--vt-muted) }

/* ── Путь ступенями ────────────────────────────────────── */
.vt-steps { display: flex; flex-direction: column; max-width: 780px; margin: 0 auto }
.vt-step { display: flex; gap: 24px }
.vt-step-n { display: flex; flex-direction: column; align-items: center; flex: none }
.vt-step-n b { width: 52px; height: 52px; border-radius: 50%;
  background: var(--vt-primary); color: var(--vt-primary-ink);
  display: flex; align-items: center; justify-content: center;
  font: 700 22px var(--vt-serif) }
.vt-step:last-child .vt-step-n b { background: var(--vt-accent); color: var(--vt-accent-ink) }
.vt-step-n i { flex: 1; width: 2px; background: oklch(0.78 0.03 158); margin: 8px 0 }
.vt-step:last-child .vt-step-n i { display: none }
.vt-step-b { padding-bottom: 38px }
.vt-step:last-child .vt-step-b { padding-bottom: 0 }
.vt-step-t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px }
.vt-step-t h3 { font-size: 23px }
.vt-step-t .ar { font-size: 20px; color: var(--vt-primary) }
.vt-step-b p { font-size: 16px; line-height: 1.7; color: var(--vt-muted);
  max-width: 560px }

/* ── Простые карточки ──────────────────────────────────── */
.vt-card { background: var(--vt-surface); border: 1px solid var(--vt-border);
  border-radius: 12px; padding: 32px 28px; box-shadow: var(--vt-shadow) }
.vt-card-n { font: 700 40px var(--vt-serif); color: oklch(0.86 0.03 158);
  line-height: 1; margin-bottom: 18px }
.vt-card h3 { font-size: 21px; margin-bottom: 10px }
.vt-card p { font-size: 15px; line-height: 1.7; color: var(--vt-muted) }

/* ── Ступени методологии ───────────────────────────────
   Карточка ступени: арабская цифра в кружке, как в макете.
   Последняя выделена — она цель пути, и остальные три ведут
   к ней.

   СВОЯ СЕТКА, не общая .vt-grid. Та задана как
   `auto-fit, minmax(290px, 1fr)`, и это верно для книг: их бывает
   две, три, пять, и сетка сама решает, сколько в ряд.

   А ступеней ВСЕГДА четыре, и в макете они стоят одним рядом.
   При 290px в полосу 1120 влезает только три — четвёртая падает
   вниз и остаётся одна, будто отдельная от прочих. Владелец
   31 августа это и показал.

   Считаем: 4 × 250 + 3 × 22 = 1066 при полосе 1120. Помещаются,
   и карточка выходит уже и выше — ровно как в макете. */
.vt-stupeni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px; align-items: stretch }

/* Два в ряд, потом один. Три в ряд не даём НИКОГДА: четыре
   на три ряда — это ряд из трёх и одинокая четвёртая, то самое,
   от чего уходим.

   Порог 1040, а не 1000. Считано по самому длинному заголовку:
   «Морфология (сарф)» — семнадцать знаков, PT Serif 700 при 19px
   просит около 178 точек, плюс поля 48 — карточке нужно не меньше
   226. При 1040 выходит 230, при 1000 уже 220, и заголовок
   переносится. */
@media (max-width: 1040px) { .vt-stupeni { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px)  { .vt-stupeni { grid-template-columns: 1fr } }

.vt-stup { display: flex; flex-direction: column; background: var(--vt-surface);
  border: 1px solid var(--vt-border); border-radius: 12px;
  /* Поля мельче, чем у книг: карточка вчетверо уже, и при 28px
     под текст оставалось бы меньше двухсот точек. */
  padding: 28px 24px; box-shadow: var(--vt-shadow) }
.vt-stup-n { display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 20px;
  background: var(--vt-primary-soft); color: var(--vt-primary);
  font: 700 20px var(--vt-serif); padding-bottom: 2px }
.vt-stup h3 { font-size: 19px; margin-bottom: 10px; text-wrap: balance }
.vt-stup p { font-size: 14.5px; line-height: 1.65; color: var(--vt-muted) }

/* Цель пути. Тёмная заливка, и ВСЁ внутри перекрашивается:
   без этого текст остался бы тёмным на тёмном. */
.vt-stup.is-cel { background: var(--vt-primary); border-color: var(--vt-primary) }
.vt-stup.is-cel h3 { color: var(--vt-primary-ink) }
.vt-stup.is-cel p { color: var(--vt-primary-ink); opacity: .88 }
.vt-stup.is-cel .vt-stup-n { background: oklch(1 0 0 / .16); color: var(--vt-primary-ink) }

/* ── Тарифы ────────────────────────────────────────────── */
.vt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; align-items: stretch }
.vt-plan { display: flex; flex-direction: column; background: var(--vt-surface);
  border: 1px solid var(--vt-border); border-radius: 14px; padding: 30px 26px;
  box-shadow: var(--vt-shadow) }
.vt-plan.is-main { border: 1.5px solid var(--vt-primary) }
.vt-plan h3 { font-size: 20px }
.vt-plan-sum { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 20px }
.vt-plan-sum b { font: 700 36px var(--vt-serif); color: var(--vt-head);
  font-variant-numeric: tabular-nums }
.vt-plan-sum span { font-size: 14px; color: var(--vt-muted) }
.vt-plan ul { list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 11px; flex: 1 }
.vt-plan li { display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.5; color: oklch(0.36 0.02 160) }
.vt-plan li::before { content: "✓"; flex: none; width: 21px; height: 21px;
  border-radius: 50%; background: var(--vt-primary-soft); color: var(--vt-primary);
  font: 700 12px var(--vt-sans); display: flex; align-items: center;
  justify-content: center; margin-top: 1px }

/* ── Тёмная врезка ─────────────────────────────────────── */
.vt-dark { background: var(--vt-dark); color: var(--vt-on-dark);
  background-image:
    repeating-linear-gradient(45deg,  oklch(1 0 0 / 0.04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, oklch(1 0 0 / 0.04) 0 1px, transparent 1px 30px) }
.vt-dark h2 { color: oklch(0.97 0.02 90) }
.vt-dark p { color: var(--vt-on-dark); opacity: .85 }
.vt-dark .vt-nad { color: var(--vt-accent) }

/* ── Подвал ────────────────────────────────────────────── */
.vt-foot { border-top: 1px solid var(--vt-border); padding: 28px 32px;
  background: var(--vt-bg) }
.vt-foot-in { max-width: 1120px; margin: 0 auto; display: flex;
  flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: 13px; color: oklch(0.55 0.015 120) }

/* ── Телефон ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .vt-head { padding: 12px 16px; gap: 10px }
  /* Картинка чуть меньше, чем на широком: на 390px рядом с кнопкой
     «Войти» она иначе поджимает название. */
  .vt-logo-m { width: 36px }
  .vt-logo-t { font-size: 17px }
  /* Подпись мельче и с меньшей разрядкой — иначе не влезает
     в строку и переносится. */
  .vt-logo-t em { font-size: 8.5px; letter-spacing: .08em }
  .vt-nav { display: none }              /* На узком меню прячем: вход важнее ссылок */
  .vt-hero { padding: 54px 20px 64px }
  .vt-hero h1 { font-size: 34px; letter-spacing: -0.4px }
  /* На узком бейдж встаёт в две строки — это нормально. Важно,
     чтобы он не растягивался во всю ширину: тогда между точкой
     и текстом появляется дыра. */
  /* Кегль подобран расчётом: на 390px под текст остаётся около
     300 точек, а фразе при 11.5px нужно ~264. Влезает с запасом,
     и переноса не будет даже на 360px. */
  /* На телефоне заголовок 34px, строка ≈ 37 — отступ 26 держит
     ту же долю, что 40 при 58. */
  .vt-badge { margin-bottom: 26px; font-size: 11.5px; padding: 6px 12px;
    letter-spacing: .1px; gap: 7px }
  .vt-badge i { margin-top: 0; width: 6px; height: 6px }
  /* Числа в столбец: три пары на 390px не помещаются, и последняя
     уезжает за край. */
  .vt-nums { flex-direction: column; gap: 12px; margin-top: 34px }
  .vt-nums-d { display: none }
  .vt-hero p { font-size: 17px }
  .vt-sec { padding: 56px 20px 64px }
  .vt-sec-h h2 { font-size: 28px }
  .vt-btn-lg { padding: 15px 28px; font-size: 16px; width: 100%;
    justify-content: center }
  .vt-cta { flex-direction: column }
  .vt-book { padding: 26px 22px }
  .vt-step { gap: 16px }
}