/* ============================================================
   YOMI Profit — стили публичного лендинга (экран screens/landing.html).

   ЧТО ЭТО. Перенос согласованного владельцем мокапа
   "docs/design/direction/landing.html" в продакшен-статику.
   Из мокапа НЕ перенесены блок токенов (:root / [data-theme="dark"])
   и базовый сброс: они уже живут в tokens.css и base.css, лендинг
   подключает их первыми и добавляет только своё.

   ЧТО ПЕРЕИСПОЛЬЗУЕТСЯ, А НЕ ДУБЛИРУЕТСЯ (base.css / components.css):
     .y-btn, .y-btn--primary, .y-btn--secondary — цвета и поведение
       кнопок; .lp-btn ниже задаёт ТОЛЬКО «таблеточную» геометрию
       лендинга (крупнее кнопки кабинета — это витрина, не рабочий стол);
     .y-eyebrow  — метки заглавными с трекингом;
     .y-badge + .y-badge--success/--warning/--info — цвета статусов;
     .y-icon     — line-art иконки;
     .y-num      — табличные цифры.

   ПРАВИЛО: ни одного «сырого» цвета — только var(--токен). Число
   остаётся лишь там, где токена нет по смыслу (ширина макета, кегли
   вне шкалы --text-*, брейкпоинты); каждое такое число объяснено
   комментарием рядом.

   ПРЕФИКС: все классы страницы — lp- (landing page). Компоненты .y-*
   лендинг не переопределяет: пересечений имён нет.

   Тема — светлая, как обе поверхности продукта (решение Миши
   05.08.2026, DECISIONS). Атрибут data-theme не выставляется.
   ============================================================ */

/* ---- Документ ------------------------------------------------------------ */

/* Навигация в шапке — якоря внутри страницы; плавная прокрутка выключается,
   если система просит «меньше движения» (base.css гасит только анимации) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Крупные заголовки с отрицательным трекингом и «таблеточные» кнопки на
   узких экранах не должны рождать горизонтальную прокрутку */
.lp-page { overflow-x: hidden; }

/* Единая колонка страницы. 1080px — ширина макета лендинга, токена такой
   величины в системе нет; 2rem полей по краям — это var(--space-8) */
.lp-wrap {
  width: min(1080px, calc(100% - var(--space-8)));
  margin-inline: auto;
}

/* ---- Кнопки: геометрия витрины ------------------------------------------
   Цвет, состояния и переходы берутся у .y-btn / .y-btn--* из components.css.
   Здесь только форма: pill, высота под палец, увеличенный кегль */

.lp-btn {
  height: 50px; /* высота CTA лендинга, вне шкалы --space-* */
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-size: 15px; /* между --text-sm (14) и --text-body (16) */
  font-weight: var(--weight-semibold);
}

.lp-btn--sm {
  height: 40px; /* компактная кнопка в шапке */
  padding: 0 18px; /* полшага между --space-4 и --space-6 */
  font-size: var(--text-sm);
}

.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }

/* ---- Логотип ------------------------------------------------------------- */

.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* полшага между --space-2 и --space-3 */
  color: var(--text);
}

.lp-logo__ring { color: var(--accent); }

.lp-logo__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 19px; /* кегль лого, вне шкалы --text-* */
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* ---- Шапка --------------------------------------------------------------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Полупрозрачный фон + лёгкий blur — единственное отступление от «плоских
     заливок» дизайн-системы, согласовано в мокапе. Прозрачность собирается
     из токена фона через color-mix; первая строка — запасной вариант для
     браузеров без color-mix (тогда шапка просто непрозрачная) */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: var(--hairline);
}

.lp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--space-16); /* 64px — высота шапки по шкале 4/8 */
}

.lp-nav {
  display: flex;
  gap: var(--space-6);
  margin-left: auto;
}

.lp-nav a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease);
}

.lp-nav a:hover { color: var(--text); }

.lp-header__cta { flex-shrink: 0; }

/* ---- Первый экран -------------------------------------------------------- */

.lp-hero { padding: var(--space-16) 0 var(--space-24); }

.lp-hero__grid {
  display: grid;
  /* Текст чуть шире карточки разбора — пропорция из макета, не шкала */
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.lp-hero__eyebrow {
  display: block;
  margin-bottom: var(--space-6);
}

.lp-hero__dot { color: var(--accent); }

.lp-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  /* Плавный кегль первого экрана: от 40 до 64px, вне шкалы --text-* */
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.05; /* плотнее --leading-tight: строки крупного набора */
  letter-spacing: -0.02em; /* крупный display жмётся сильнее --tracking-tight */
  color: var(--text);
  margin-bottom: var(--space-6);
}

.lp-hero__title em {
  font-style: italic;
  font-weight: var(--weight-semibold);
}

.lp-hero__lede {
  font-size: clamp(16px, 1.3vw, 18px); /* от --text-body до 18px */
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 46ch; /* длина строки, а не размер: мера в символах */
  margin-bottom: var(--space-8);
}

.lp-hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.lp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.lp-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lp-hero__meta li::before {
  content: "";
  width: 5px; /* маркер-точка, вне шкалы отступов */
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---- Карточка «документ разбора смены» ----------------------------------- */

.lp-parse {
  background: var(--bg-elevated);
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin: 0;
}

.lp-parse__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--hairline);
  background: var(--bg);
  color: var(--text-muted);
}

.lp-parse__kind {
  font-size: 10px; /* мельче .y-eyebrow: подпись служебной шапки карточки */
  color: var(--text-secondary);
}

.lp-parse__date {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.lp-parse__body { padding: var(--space-6); }

.lp-parse__src {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid var(--border-strong); /* «цитатная» линейка, толще хэйрлайна */
  padding-left: var(--space-3);
  margin: 0 0 var(--space-6);
}

.lp-parse__who {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

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

.lp-parse__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lp-parse__rows li + li { border-top: var(--hairline); }

.lp-parse__sum {
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
}

.lp-parse__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline-strong);
}

.lp-parse__total-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.lp-parse__total-value {
  font-size: var(--text-h2);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  white-space: nowrap;
}

.lp-parse__cur { font-weight: var(--weight-semibold); }

.lp-parse__gross {
  text-align: right;
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.lp-parse__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-top: var(--hairline);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--success-strong);
  background: var(--success-bg);
}

/* ---- Секция: маркер «№ 01 /», заголовок, лид ----------------------------- */

.lp-section {
  padding: var(--space-24) 0;
  border-top: var(--hairline);
}

.lp-marker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  font-size: 11px; /* кегль метки дизайн-системы, вне шкалы --text-* */
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lp-marker__num { color: var(--accent); }

.lp-marker::after {
  content: "";
  flex: 1;
  height: 1px; /* хэйрлайн: --hairline описывает border, не высоту */
  background: var(--border);
}

.lp-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 3.4vw, 40px); /* плавный кегль секции, вне шкалы */
  line-height: var(--leading-tight);
  letter-spacing: -0.015em; /* крупный display жмётся сильнее --tracking-tight */
  color: var(--text);
  margin-bottom: var(--space-4);
  max-width: 22ch; /* мера в символах */
}

.lp-title em { font-style: italic; }

.lp-lede {
  color: var(--text-secondary);
  max-width: 58ch;
  margin-bottom: var(--space-12);
}

/* Лид перед списком, а не перед сеткой: нижний отступ даёт сам список */
.lp-lede--flush { margin-bottom: 0; }

/* ---- № 01 · Возможности --------------------------------------------------- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.lp-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.lp-feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.lp-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* «плашка» иконки, вне шкалы отступов */
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--orange-700);
}

.lp-feature h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
}

.lp-feature p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.lp-feature__note {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--hairline);
}

/* ---- № 02 · Как это работает ---------------------------------------------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.lp-step {
  position: relative;
  padding-top: var(--space-4);
}

.lp-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px; /* хэйрлайн над шагом */
  background: var(--border);
}

.lp-step__num {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 44px; /* номер шага — крупный display, вне шкалы --text-* */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--space-3);
}

.lp-step__num::after {
  content: "";
  display: inline-block;
  width: 8px; /* точка после номера, вне шкалы отступов */
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: baseline;
}

.lp-step h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.lp-step p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---- № 03 · Для продюсера -------------------------------------------------- */

.lp-producer {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* мини-скрин шире текста — пропорция макета */
  gap: var(--space-16);
  align-items: center;
}

.lp-points {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.lp-points li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lp-points li + li { border-top: var(--hairline); }

.lp-points__icon {
  color: var(--orange-700);
  margin-top: 1px; /* оптическое выравнивание иконки по первой строке */
}

.lp-points strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* Мини-скрин панели продюсера — светлый, как и сама панель (решение Миши
   05.08.2026). Композиция та же: полоса сайдбара, KPI, строки SPP */
.lp-screen {
  background: var(--bg);
  /* Хэйрлайн-сетка «миллиметровки» под содержимым — единственное место на
     лендинге, где допущен градиент (согласовано в мокапе). Шаг клетки —
     var(--space-12), цвет — самый светлый бордер шкалы */
  background-image:
    repeating-linear-gradient(0deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--space-12)),
    repeating-linear-gradient(90deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--space-12));
  color: var(--text);
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 52px 1fr; /* ширина полосы сайдбара, вне шкалы */
  min-height: 340px; /* минимальная высота «экрана», вне шкалы */
  margin: 0;
}

.lp-screen__rail {
  background: var(--bg-elevated);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0;
  gap: var(--space-4);
}

.lp-screen__rail-logo { color: var(--accent); }
.lp-screen__rail-item { color: var(--text-muted); }
.lp-screen__rail-item.is-active { color: var(--text); }

.lp-screen__main {
  padding: var(--space-6);
  min-width: 0;
}

.lp-screen__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lp-screen__project {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  color: var(--text);
}

.lp-screen__phase {
  font-size: 10px; /* мельче .y-eyebrow: подпись внутри мини-скрина */
}

.lp-screen__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Плитки KPI на белом, а не на --surface: так они «лежат» поверх сетки */
.lp-kpi {
  background: var(--bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}

.lp-kpi__label {
  font-size: 9px; /* мельчайшая метка мини-скрина, вне шкалы */
  font-weight: var(--weight-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}

.lp-kpi__value {
  font-size: 17px; /* KPI мини-скрина: между --text-body и --text-h3 */
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  white-space: nowrap;
}

.lp-kpi__unit {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.lp-screen__table { border-top: var(--hairline); }

.lp-screen__row {
  display: grid;
  grid-template-columns: 74px 1fr auto auto; /* колонка под номер SPP-XXXX */
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-caption);
}

.lp-screen__id {
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.lp-screen__name {
  color: var(--text);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-screen__sum {
  font-weight: var(--weight-bold);
  color: var(--text);
  white-space: nowrap;
}

/* Цвет статуса берётся у .y-badge--*, здесь — только уменьшенный калибр */
.lp-screen__badge {
  font-size: 9px;
  letter-spacing: 0.08em; /* уже, чем --label-tracking: строка короткая */
  text-transform: uppercase;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---- Финальный призыв ------------------------------------------------------ */

.lp-final {
  padding: var(--space-24) 0;
  border-top: var(--hairline);
  text-align: center;
}

/* :is(h1, h2) — на заглушке кабинета (cabinet_soon.html) этот же блок несёт
   ГЛАВНЫЙ заголовок страницы, и семантически он h1 */
.lp-final :is(h1, h2) {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(32px, 4vw, 48px); /* плавный кегль, вне шкалы --text-* */
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

.lp-final :is(h1, h2) em { font-style: italic; }

.lp-final p {
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
}

.lp-final__note {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* «Маркерное» подчёркивание — одна точка применения на странице */
.lp-mark {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.lp-mark::before {
  content: "";
  position: absolute;
  /* всё в em — подчёркивание тянется за кеглем текста */
  left: -0.08em;
  right: -0.08em;
  bottom: 0.08em;
  height: 0.28em;
  background: var(--orange-100);
  z-index: -1;
  border-radius: 1px;
}

/* ---- Подвал ---------------------------------------------------------------- */

.lp-footer {
  border-top: var(--hairline);
  padding: var(--space-8) 0;
}

.lp-footer__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.lp-footer__inner .lp-logo__name { font-size: var(--text-body); }

.lp-footer__copy {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Дубль навигации: на ≤720px шапочная .lp-nav скрыта, и это единственный
   способ попасть в разделы с телефона. Правое крыло подвала начинается
   отсюда, поэтому margin-left:auto стоит на навигации, а правовые подписи
   идут следом обычным потоком */
.lp-footer__nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-caption);
}

.lp-footer__nav a { color: var(--text-secondary); }

.lp-footer__nav a:hover { color: var(--text); }

.lp-footer__links {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.lp-footer__sep { color: var(--border-strong); }

/* ---- Адаптив ----------------------------------------------------------------
   Брейкпоинты — из макета: 960 (планшет), 720 (узкий планшет), 560 (телефон).
   Шкалы размеров экрана в дизайн-системе нет, значения оставлены числами */

@media (max-width: 960px) {
  .lp-hero { padding: var(--space-12) 0 var(--space-16); }
  .lp-hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .lp-section { padding: var(--space-16) 0; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
  .lp-producer { grid-template-columns: 1fr; gap: var(--space-12); }
  .lp-final { padding: var(--space-16) 0; }
}

@media (max-width: 720px) {
  .lp-nav { display: none; }
  .lp-header__inner { justify-content: space-between; }
}

@media (max-width: 560px) {
  .lp-steps { grid-template-columns: 1fr; }
  .lp-screen__kpis { grid-template-columns: 1fr; }
  .lp-screen__row { grid-template-columns: auto 1fr auto; }
  .lp-screen__row .lp-screen__badge { display: none; }
  .lp-hero__cta .lp-btn { width: 100%; }
  .lp-footer__nav { margin-left: 0; }
}