/* Посадочные страницы под поисковые запросы (lib/landing-pages.js).
   Цвета, шрифты, кнопки, вопросы и тёмный призыв берутся из styles.css.
   Оттуда же - «живые» блоки главной: карточки болей (.pain-card), змейка
   шагов (.snake, .step), появление при прокрутке (.reveal), бегущая золотая
   линия (.glow-ring). Здесь только то, чего на главной нет: первый экран со
   снимком, экскурсия по кабинету, раскрывающиеся пункты и служебные блоки.
   Язык тот же: кремовый фон, белые карточки 20px с тёплой кромкой, в покое
   плоско, золото - единственный акцент, кегль только из лестницы --fs-*. */

/* ---------- Первый экран ---------- */
.lp-hero {
  padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  background:
    radial-gradient(50% 70% at 92% 0%, rgba(245, 183, 84, 0.16), rgba(245, 183, 84, 0) 70%),
    var(--paper);
  /* снимок кабинета выглядывает за правый край колонки и обрезается экраном */
  overflow: clip;
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.lp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: 22px;
}

.lp-crumbs a { color: var(--accent-deep); }

/* Ступень Headline из DESIGN.md (та же, что у h2 и у заголовка статьи блога),
   а не Display первого экрана главной: фраза запроса длиннее слогана и в
   4.8rem занимала бы пять строк. */
.lp-hero h1 {
  font-size: clamp(1.95rem, 3.9vw, 3.05rem);
  line-height: 1.03;
  max-width: 19ch;
  text-wrap: balance;
}

.lp-lead {
  margin-top: 22px;
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.lp-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-facts strong {
  font-family: var(--font-num);
  font-size: var(--fs-subhead);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-strong);
  line-height: 1.1;
}

.lp-facts span {
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* Снимок кабинета справа: белый лист с бегущей золотой линией по краю,
   как у калькулятора на главной. Снимок крупнее рамки и прижат к левому
   верхнему углу - видно начало кабинета, остальное уходит за край. */
/* Рамка выступает вправо за колонку, но не за экран: 1160px - ширина
   .container из styles.css, ещё 30px - запас на полосу прокрутки. Раньше
   рамка уходила за край экрана, и бегущая золотая линия на правом краю
   пропадала из виду (замечание владельца 13.10.2026). */
.lp-hero-shot {
  aspect-ratio: 6 / 5;
  margin-right: calc(-1 * clamp(0px, (100vw - 1190px) / 2, 150px));
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

/* Снимок шире рамки и обрезается этой обёрткой. Сама рамка ничего не режет:
   её золотая линия лежит на самом краю и должна быть видна целиком. */
.lp-hero-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* линия идёт поверх снимка - иначе он закрывал её на правом краю */
.lp-hero-shot::before { z-index: 2; }

.lp-hero-shot .lp-hero-img {
  position: absolute;
  top: 12px;
  left: 12px;
  width: auto;
  max-width: none;
  height: calc(100% - 24px);
  border-radius: var(--radius);
}

/* Единственный «поставленный» выход на странице: снимок въезжает справа.
   Без анимации он просто стоит на месте - начальное состояние видимое. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-shot { animation: lp-shot-in 0.8s var(--ease-out) both; }
}

@keyframes lp-shot-in {
  from { opacity: 0; transform: translateX(48px); }
}

/* ---------- Разделы ---------- */
.lp-section,
.lp-how {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-section-soft { background: var(--paper-hi); }

/* Размер заголовков разделов - общий h2 из styles.css, как на главной */
.lp-section h2 { margin-bottom: 30px; }

.lp-sub {
  margin: -14px 0 28px;
  max-width: 62ch;
  font-size: var(--fs-body);
  color: var(--muted);
}

/* ---------- Боли: карточки главной ----------
   Нижний запас раздела (.pains в styles.css) оставлен как на главной:
   карточка под курсором вырастает вниз и не должна задеть следующий блок. */
.lp-pains { padding-top: clamp(3rem, 6vw, 5rem); }

.lp-pains h2 {
  max-width: 24ch;
  margin-bottom: 32px;
}

/* без крупной цифры заголовок карточки встаёт к верхнему краю */
.lp-pains .pain-body > h3:first-child { margin-top: 0; }

/* ---------- Экскурсия по кабинету ----------
   Без скрипта снимки стоят друг под другом. Скрипт (public/js/landing.js)
   ставит .is-ready - тогда слева встают вкладки, справа одна рамка, в
   которой снимки сменяют друг друга вместе с подписью. */
.lp-tour-stage {
  display: grid;
  gap: 40px;
}

.lp-tour-slide { margin: 0; }

.lp-shot-frame {
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.lp-tour-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.lp-tour-slide figcaption {
  margin-top: 16px;
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Раздел кабинета над подписью: на телефоне и без скрипта колонки с
   разделами нет, и только эта метка говорит, откуда снимок. */
.lp-tour-where {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.lp-tour.is-ready {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.lp-tour.is-ready .lp-tour-stage { gap: 0; }

/* Все снимки лежат в одной клетке: высота сцены равна самому высокому,
   и страница не прыгает при переключении. */
.lp-tour.is-ready .lp-tour-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}

.lp-tour.is-ready .lp-tour-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out), visibility 0s;
}

/* Рамка одного размера для всех снимков; узкие окна-модалки встают по центру */
.lp-tour.is-ready .lp-shot-frame {
  display: flex;
  aspect-ratio: 16 / 9;
}

.lp-tour.is-ready .lp-tour-img {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* Вкладки стоят двумя разделами кабинета: «Аналитика» и «Звонки».
   Их одиннадцать, поэтому строки плотные: колонка должна остаться ростом
   со снимок с подписью, а не уйти далеко под него. */
.lp-tour-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-tour-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-tour-group-title {
  padding: 0 14px 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.lp-tour-tab {
  position: relative;
  padding: 9px 14px;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.lp-tour-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--card);
  border-color: var(--accent-line);
}

/* Полоска автопоказа: доходит до конца - экскурсия листает дальше */
.lp-tour-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.lp-tour.is-playing .lp-tour-tab[aria-selected="true"]::after {
  animation: lp-tour-progress 6s linear forwards;
}

@keyframes lp-tour-progress {
  to { transform: scaleX(1); }
}

@media (hover: hover) and (pointer: fine) {
  .lp-tour-tab:hover { color: var(--ink); }

  /* пока человек разглядывает снимок, экскурсия ждёт */
  .lp-tour.is-playing:hover .lp-tour-tab[aria-selected="true"]::after {
    animation-play-state: paused;
  }
}

.lp-tour-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-left: 4px;
}

.lp-tour-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-hard);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1F1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease-out;
}

.lp-tour-arrow.is-next { transform: scaleX(-1); }

.lp-tour-arrow:active { transform: scale(0.95); }
.lp-tour-arrow.is-next:active { transform: scaleX(-1) scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .lp-tour-arrow:hover {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 4px rgba(245, 183, 84, 0.14);
  }
}

.lp-tour-count {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.lp-tour-count b {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Цепочка: три карточки и стрелки между ними ----------
   Заголовок сверху, под ним мысль идёт слева направо: карточка, стрелка,
   карточка, стрелка, карточка. При прокрутке всё появляется по очереди -
   карточка всплывает, её номер загорается, стрелка прочерчивается к
   следующей. Без скрипта цепочка просто стоит собранной.
   Фон и рамку карточке даёт .pain-shape с главной - вместе с золотой
   обводкой из двух углов под курсором. */
.lp-flow-section h2 {
  max-width: 26ch;
  margin-bottom: 36px;
}

.lp-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) 68px minmax(0, 1fr);
  align-items: stretch;
}

.lp-flow-card,
.lp-fit-card {
  position: relative;
  z-index: 0;
}

.lp-flow-card { padding: 26px 24px 28px; }

.lp-flow-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #241A06;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 6px var(--accent-bg);
}

.lp-flow-card h3 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.lp-flow-card p {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
}

.lp-flow-arrow {
  display: grid;
  place-items: center;
}

.lp-flow-arrow svg {
  width: 52px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-flow-arrow path { stroke-dasharray: 1; }

/* Обводка из двух углов - та же, что у «Болей» на главной */
.lp-flow-card.is-lit .pain-shape::before,
.lp-fit-card.is-lit .pain-shape::before { --draw: 1; }

@media (hover: hover) and (pointer: fine) {
  .lp-flow-card:hover .pain-shape,
  .lp-fit-card:hover .pain-shape { box-shadow: var(--shadow-pop); }

  .lp-flow-card:hover .pain-shape::before,
  .lp-fit-card:hover .pain-shape::before { --draw: 1; }
}

/* Очередь появления стоит только там, где карточки в ряд: в колонке
   телефона каждая входит сама, когда до неё дошла прокрутка. */
@media (min-width: 901px) {
  .lp-flow > :nth-child(2) { --d: 3; }
  .lp-flow > :nth-child(3) { --d: 5; }
  .lp-flow > :nth-child(4) { --d: 8; }
  .lp-flow > :nth-child(5) { --d: 10; }
}

/* Начальный кадр ставится, только когда скрипт готов показывать появление */
html.reveal-ready .lp-flow-num {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.45s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 280ms);
}

html.reveal-ready .lp-flow-card:not(.in) .lp-flow-num {
  color: var(--accent-deep);
  background: var(--card);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 0 var(--accent-bg);
}

/* стрелка не всплывает вместе со всеми, а прочерчивается */
html.reveal-ready .lp-flow-arrow.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* opacity прячет точку, которую круглый конец линии оставил бы в начале пути */
html.reveal-ready .lp-flow-arrow path {
  opacity: 0;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s var(--ease-out), opacity 0.1s linear;
  transition-delay: calc(var(--d, 0) * 90ms);
}

html.reveal-ready .lp-flow-arrow path + path {
  transition-duration: 0.25s, 0.1s;
  transition-delay: calc(var(--d, 0) * 90ms + 300ms);
}

html.reveal-ready .lp-flow-arrow.in path {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* ---------- Цифры примера ---------- */
.lp-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-figures li {
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.lp-figures strong {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--accent-strong);
}

.lp-figures span {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.lp-note {
  margin-top: 22px;
  max-width: 70ch;
  padding: 16px 20px;
  background: var(--accent-bg);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--accent-ink);
}

/* ---------- Фрагмент расшифровки: реплики слева, вывод Mentor справа ---------- */
.lp-transcript {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  align-items: start;
}

.lp-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.lp-lines li {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.5;
  background: var(--paper);
}

.lp-lines li.is-manager {
  align-self: flex-end;
  background: var(--accent-bg);
}

.lp-lines b {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--muted);
}

.lp-verdict {
  padding: 22px 24px;
  background: var(--bad-bg);
  border: 1px solid rgba(195, 61, 39, 0.18);
  border-radius: var(--radius-lg);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.lp-verdict-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bad);
  margin-bottom: 6px;
}

.lp-verdict-fix {
  margin-top: 16px;
  color: var(--good);
}

/* ---------- Что проверяется + кому подходит + цена ----------
   Заголовок сверху. Слева чек-лист, который заполняется сам: при прокрутке
   золотая линия спускается от пункта к пункту и ставит галочки по очереди.
   Справа две карточки «подойдёт / не подойдёт», ниже на всю ширину цена -
   тот же блок, что на главной (.price-card), с крупной цифрой и бегущей линией. */
.lp-check-section h2 {
  max-width: 24ch;
  margin-bottom: 32px;
}

.lp-two {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

/* Чек-лист растягивается на высоту соседней колонки, строки делят её поровну:
   иначе под коротким списком остаётся пустой угол. */
.lp-checks {
  display: flex;
  flex-direction: column;
  padding: 8px 24px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.lp-checks li {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.lp-checks li + li { border-top: 1px solid var(--line-soft); }

/* Отметка нарисована, а не набрана знаком: у знака «✓» в разных системах
   разная толщина и высота. Круг 26px, строка текста 25px - стоят вровень. */
.lp-check-mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
}

.lp-check-mark svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-check-mark path { stroke-dasharray: 1; }

/* «Не умеет» - прочерк вместо галочки */
.lp-checks li.is-no .lp-check-mark {
  background: var(--bad-bg);
  border-color: rgba(195, 61, 39, 0.22);
}

.lp-checks li.is-no .lp-check-mark svg { stroke: var(--bad); }

/* Отрезок линии от отметки к следующей: от низа круга (15 + 26) до верха
   круга в соседней строке (ещё 15 ниже края строки). */
.lp-checks li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 41px;
  bottom: -15px;
  width: 2px;
  background: var(--accent-line);
  transform-origin: center top;
}

/* Начальный кадр - только когда скрипт готов показывать появление.
   Шаг между пунктами 150 мс: линия доходит до отметки, та заполняется. */
html.reveal-ready .lp-check-mark {
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease-out);
  transition-delay: calc(var(--i) * 150ms + 250ms);
}

html.reveal-ready .lp-checks:not(.in) .lp-check-mark {
  background: var(--card);
  border-color: var(--line);
  transform: scale(0.88);
}

html.reveal-ready .lp-check-mark path {
  opacity: 0;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.3s var(--ease-out), opacity 0.1s linear;
  transition-delay: calc(var(--i) * 150ms + 320ms);
}

html.reveal-ready .lp-checks.in .lp-check-mark path {
  opacity: 1;
  stroke-dashoffset: 0;
}

html.reveal-ready .lp-checks li > span:last-child {
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--i) * 150ms + 250ms);
}

html.reveal-ready .lp-checks:not(.in) li > span:last-child { opacity: 0.4; }

html.reveal-ready .lp-checks li::after {
  transition: transform 0.15s linear;
  transition-delay: calc(var(--i) * 150ms + 350ms);
}

html.reveal-ready .lp-checks:not(.in) li::after { transform: scaleY(0); }

.lp-fit {
  display: grid;
  gap: 14px;
}

.lp-fit-card { padding: 24px 26px; }

.lp-fit-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lp-fit-card ul {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lp-fit-card li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

/* круглые метки, как у списка на карточке цены (.price-points) */
.lp-fit-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1;
}

.lp-fit-card.is-yes li::before { content: "+"; color: var(--good); background: var(--good-bg); }
.lp-fit-card.is-no li::before { content: "−"; color: var(--bad); background: var(--bad-bg); }

/* строки карточки входят лесенкой следом за самой карточкой */
html.reveal-ready .lp-fit-card li {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + var(--i) * 60ms + 220ms);
}

html.reveal-ready .lp-fit-card:not(.in) li {
  opacity: 0;
  transform: translateX(-8px);
}

.lp-price { margin-top: 28px; }

.lp-price .price-side h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.lp-price .price-side p {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- Кнопка «Узнать подробнее о продукте» под экскурсией ---------- */
.lp-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ---------- Вопросы: по теме страницы и о продукте ---------- */
/* Появляется обёртка, а не сама кнопка: правило появления сильнее нажатия
   и отняло бы у кнопки отклик на палец. */
.lp-faq-more { margin-top: 24px; }

.lp-faq-title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.faq-list + .lp-faq-title { margin-top: 44px; }

/* ---------- Тёмный призыв - те же цвета, что у финального блока главной (.cta) ---------- */
.lp-cta h2 { max-width: 22em; }

.lp-cta p {
  margin-top: 16px;
  max-width: 40em;
  font-size: var(--fs-body);
  color: var(--dark-muted);
}

/* Главная кнопка на тёмном - золотая: чёрная кнопка на почти чёрном фоне
   терялась. Тот же золотой, что у наклейки «150 минут бесплатно» на главной. */
.lp-cta .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #241A06;
}

/* Вторая кнопка на тёмном: прозрачная, светлый текст. Белая заливка
   .btn-ghost здесь дала бы светлый текст на белом - кнопку без надписи. */
.lp-cta .lp-ghost-dark {
  background: transparent;
  color: var(--dark-text);
  border-color: var(--dark-line);
}

/* ---------- Соседние посадочные страницы ---------- */
.lp-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lp-related-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid rgba(231, 203, 150, 0.6);
  border-radius: var(--radius-lg);
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lp-related-card span {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
}

.lp-related-card small {
  font-size: var(--fs-caption);
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .lp-related-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow: 0 0 0 4px rgba(245, 183, 84, 0.14), 0 24px 50px -34px rgba(245, 183, 84, 0.7);
  }
}

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1080px) {
  /* в одну колонку снимку на первом экране нет места - он стоит ниже, в экскурсии */
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-shot { display: none; }
}

@media (max-width: 900px) {
  .lp-figures,
  .lp-related,
  .lp-two,
  .lp-transcript,
  .lp-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  /* цепочка идёт сверху вниз, и стрелки смотрят вниз */
  .lp-flow-arrow { height: 56px; }
  .lp-flow-arrow svg { transform: rotate(90deg); }

  .lp-lines li { max-width: 100%; }

  /* Экскурсия в одну колонку: вкладки лентой сверху, снимок, под ним стрелки.
     Обёртка вкладок и стрелок растворяется, чтобы их можно было развести. */
  .lp-tour.is-ready { grid-template-columns: minmax(0, 1fr); }
  .lp-tour.is-ready .lp-tour-side { display: contents; }

  /* Разделы растворяются: их названия встают в ту же ленту перед своими
     вкладками - «Аналитика», пять вкладок, «Звонки», шесть вкладок. */
  .lp-tour-group { display: contents; }

  .lp-tour-group-title {
    flex: none;
    padding: 0 2px 0 0;
  }

  .lp-tour-group + .lp-tour-group .lp-tour-group-title { padding-left: 12px; }

  .lp-tour-tabs {
    order: 1;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* лента идёт от края до края экрана: 24px - боковой отступ .container
       из styles.css, поменяется там - поменять и здесь */
    margin: 0 -24px;
    padding: 0 24px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lp-tour-tabs::-webkit-scrollbar { display: none; }

  .lp-tour-tab {
    flex: none;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
    font-size: var(--fs-small);
    border-color: var(--line);
    border-radius: var(--radius-pill);
  }

  .lp-tour-stage { order: 2; }

  .lp-tour-nav {
    order: 3;
    justify-content: center;
    margin-top: 0;
    padding-left: 0;
  }

  .lp-shot-frame { padding: 6px; }
  .lp-tour-slide figcaption { font-size: var(--fs-small); }
}

@media (max-width: 600px) {
  .lp-actions .btn { width: 100%; justify-content: center; }
  .lp-facts { grid-template-columns: 1fr; }
  .lp-checks { padding: 4px 18px; }
  .lp-fit-card { padding: 20px; }
  .lp-more .btn,
  .lp-faq-side .btn { width: 100%; justify-content: center; }

  /* Длинная кнопка не даёт колонке цены сжаться, и блок вылезает за рамку:
     колонке разрешено быть уже содержимого, кнопки встают на всю ширину. */
  .lp-price { grid-template-columns: minmax(0, 1fr); }
  .lp-price .price-actions .btn {
    width: 100%;
    justify-content: center;
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tour.is-ready .lp-tour-slide,
  .lp-tour.is-ready .lp-tour-slide.is-active {
    transform: none;
    transition: opacity 0.2s ease, visibility 0s;
  }
}