/* Стили страницы-лендинга. Открывается файлом, без сервера: переменные
   тем наследуются из style.css (он подключён первым в landing.html).
   Никаких цветов вне переменных — страницу смотрят и в тёмной теме.
   Адаптив: на ширине 375px (телефон) горизонтальной прокрутки нет. */

.lp-body {
  /* style.css запирает body на один экран: height:100vh и overflow:hidden.
     Рабочему полю так и надо — у него свои прокручиваемые панели, — но
     лендинг длинный, и с этими правилами он обрезался по первому экрану:
     страница не прокручивалась вовсе, а подвал был недостижим. Оттуда же
     display:flex, который здесь ни к чему: это обычный поток документа. */
  display: block;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 48px;
  /* один шрифт с приложением, без подключений извне */
  line-height: 1.55;
}

/* Верхняя полоса: логотип и переключатель языка.
   sticky, чтобы язык был под рукой на длинной странице. */
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  background: var(--bg-window);
  border-bottom: 1px solid var(--border-soft);
}
.lp-brand { font-weight: 700; font-size: 1.1rem; color: var(--text-main); }
.lp-lang-wrap { position: relative; }
.lp-lang-btn { line-height: 0; padding: 6px 8px; }

.lp-main { display: flex; flex-direction: column; gap: 40px; padding-top: 28px; }

/* ---------- Первый экран: текст слева, гифка справа ---------- */
.lp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.lp-hero-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.25;
}
.lp-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.lp-hero-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 22px;
  font-size: 1.05rem;
  text-decoration: none;
}
.lp-hero-btnhint {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.85;
}
.lp-hero-note {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Заглушка под демо-гифку. Пропорция 16:9 через padding-top, чтобы
   вёрстка не прыгала, когда настоящий файл появится. */
.lp-hero-demo {
  display: block;
  width: 100%;
  height: auto;                   /* пропорции держит сам файл, 16:9 */
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-alt);      /* виден, пока файл грузится */
}
/* ---------- Общие секции ---------- */
.lp-section { display: flex; flex-direction: column; gap: 10px; }
.lp-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}
.lp-section p { color: var(--text-main); }

/* ---------- Шаги «как это работает» ---------- */
.lp-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}
.lp-steps li { counter-increment: step; }
.lp-steps h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}
.lp-steps p { color: var(--text-main); }

/* ---------- Таблица цен ---------- */
.lp-price { gap: 14px; }
.lp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.lp-table th, .lp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.lp-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
}
.lp-table td { color: var(--text-main); }
/* Колонка «Подписка» выделена — ради неё и платят */
.lp-table th:last-child, .lp-table td:last-child {
  color: var(--accent);
  font-weight: 600;
}
.lp-price-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 1.05rem;
  margin-top: 6px;
}
.lp-price-summary strong { color: var(--text-main); }
.lp-price-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- FAQ ---------- */
.lp-faq { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.lp-faq dt {
  font-weight: 600;
  color: var(--text-main);
  margin-top: 6px;
}
.lp-faq dd {
  margin: 0 0 6px 0;
  color: var(--text-muted);
}

/* ---------- Подвал ---------- */
.lp-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.lp-footer a {
  color: var(--accent);
  text-decoration: none;
}
.lp-footer a:hover { text-decoration: underline; }

/* ---------- Адаптив: телефон 375px ----------
   На узком экране гифка уходит под текст (одна колонка), шрифт первого
   экрана мельче. Главная цель — без горизонтальной прокрутки. */
@media (max-width: 640px) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lp-hero-title { font-size: 1.5rem; }
  .lp-hero-subtitle { font-size: 0.98rem; }
  /* Демо на телефоне ниже (не в стороне) и короче по высоте */
  .lp-section-title { font-size: 1.2rem; }
  .lp-price-summary { flex-direction: column; gap: 8px; }
  /* Таблица цен читаема на узком: переносим заголовки в ячейки не нужно,
     три колонки влезают при font-size 0.9rem */
  .lp-table { font-size: 0.9rem; }
  .lp-table th, .lp-table td { padding: 8px 6px; }
}

/* На совсем узких (375 и меньше) убираем боковые отступы до минимума */
@media (max-width: 400px) {
  .lp-body { padding: 0 12px 40px; }
  .lp-hero-btn { padding: 10px 18px; }
}