/* ─────────────────────────────────────────────────────────────────────────
   Главная страница — «тёплый цех».
   Кабинет остаётся монохромным; витрина — в цветах шпона и бумаги. Палитра
   задаётся теми же переменными темы (theme.css), только переопределёнными
   на <body class="lp">: кнопки, таблица тарифов и карточки из admin.css
   перекрашиваются сами. Фоны под текстом — только сплошные: проверка
   контраста (tools/contrast.py) считает полупрозрачный фон непрозрачным.
   Размеры экрана — общие для сайта: 600 и 1024 (docs/ПРАВИЛА-ИНТЕРФЕЙСА.md).
   ───────────────────────────────────────────────────────────────────────── */

.lp {
  --paper: #f6ecdc;
  --paper-raised: #fffaf1;
  --paper-sunken: #efe2cc;
  --ink: #2a1c10;
  --ink-soft: #5c4a39;
  --ink-faint: #6f5b47;
  --line: #e6d6bd;
  --line-strong: #cdb894;
  --on-ink: #fff3df;
  --on-ink-soft: #c9b190;
  --card-border: #e6d6bd;
  --shadow-1: 0 6px 20px rgba(90, 58, 20, 0.10), 0 1px 3px rgba(90, 58, 20, 0.08);
  --shadow-2: 0 16px 38px rgba(90, 58, 20, 0.18), 0 3px 8px rgba(90, 58, 20, 0.08);
  --shadow-dark: 0 10px 24px rgba(120, 52, 14, 0.28);

  --lp-accent: #9a4312;          /* терракот: кнопка «попробовать», надзаголовки */
  --lp-accent-hover: #7f350c;
  --lp-on-accent: #fff8ee;
  --lp-accent-on-ink: #f0a35e;   /* тот же акцент на тёмной полосе */
  --lp-band-card: #3a2918;       /* плитка на тёмной полосе */
  --lp-sheet: #ffffff;           /* лист бумаги: документ остаётся белым в любой теме */
  --lp-ok-bg: #dcefd3;   --lp-ok: #1f5a1b;
  --lp-soon-bg: #ffe2b8; --lp-soon: #7a4a08;
  --lp-dev-bg: #e8ddcd;  --lp-dev: #5a4a3a;

  --lp-gap: clamp(16px, 4vw, 40px);
  --lp-sec: clamp(48px, 7vw, 96px);
  --lp-h1: clamp(2rem, 1.1rem + 2.5vw, 3rem);
  --lp-h2: clamp(1.55rem, 1.1rem + 1.6vw, 2.4rem);
  --lp-tilt: 1.4deg;             /* листки на верстаке лежат чуть неровно */
}

[data-theme='dark'] .lp {
  --paper: #1a130d;
  --paper-raised: #251b12;
  --paper-sunken: #2f2318;
  --ink: #f6e9d6;
  --ink-soft: #cdb99f;
  --ink-faint: #a8947b;
  --line: #33261a;
  --line-strong: #4a3927;
  --on-ink: #1a130d;
  --on-ink-soft: #5a4631;
  --card-border: #33261a;
  --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 16px 38px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3);
  --shadow-dark: 0 10px 24px rgba(0, 0, 0, 0.5);

  --lp-accent: #f0a35e;
  --lp-accent-hover: #f7b77c;
  --lp-on-accent: #1a130d;
  --lp-accent-on-ink: #9a4312;
  --lp-band-card: #eadbc4;
  --lp-ok-bg: #1f3a1c;   --lp-ok: #b9e3b0;
  --lp-soon-bg: #4a3310; --lp-soon: #ffd596;
  --lp-dev-bg: #3a2f24;  --lp-dev: #d8c7b1;
}

/* серые пятна фона из theme.css здесь не к месту */
.lp::before, .lp::after { display: none; }
.lp { line-height: 1.5; }
/* Сброс — через :where(): он не должен перевешивать отступы самих блоков.
   С «.lp p { margin: 0 }» пропадали отступы у .lp-after, .lp-sub и .lp-lead —
   кнопка архива прилипала к карточкам документов. */
:where(.lp) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.lp) :where(ul, ol) { padding: 0; list-style: none; }
.lp img { max-width: 100%; height: auto; display: block; }
.lp :target { scroll-margin-top: 84px; }
/* Тексты для банка и покупателя (.pub) — обычные абзацы и списки с маркерами
   и номерами шагов: сброс выше их не касается. */
.lp .pub p { margin: 0 0 10px; }
.lp .pub ul, .lp .pub ol { margin: 0 0 10px; padding-left: 20px; }
.lp .pub ul { list-style: disc; }
.lp .pub ol { list-style: decimal; }
.lp .pub .pay-list { margin: 0; padding: 0; list-style: none; }
.lp .pub { overflow-wrap: anywhere; }
.lp .pub img { width: min(420px, 100%); }

.lp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--lp-gap);
}

/* ── Кнопки: главная — терракотовая ── */
.lp .btn { padding: 10px 18px; }
.lp .btn.primary {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
  color: var(--lp-on-accent);
}
.lp .btn.primary:hover {
  background: var(--lp-accent-hover);
  border-color: var(--lp-accent-hover);
  color: var(--lp-on-accent);
}
.lp .btn.lp-cta { padding: 13px 22px; font-size: var(--text-base); }

/* ── Полоса сверху ── */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.lp-top-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 60px;
}
.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: var(--text-lg);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.lp-logo small {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
}
.lp-nav {
  display: flex;
  gap: 4px 22px;
  margin-left: auto;
  flex-wrap: wrap;
}
.lp-nav a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.lp-nav a:hover { color: var(--ink); border-bottom-color: var(--lp-accent); }

/* ── Первый экран ── */
.lp-hero {
  background: linear-gradient(165deg, var(--paper-raised) 0%, var(--paper) 45%, var(--paper-sunken) 100%);
  padding: clamp(22px, 3vw, 40px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.lp-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* две колонки — только когда справа есть кадр модели */
.lp-hero-in.has-stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.lp-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 12px;
}
.lp h1 {
  font-size: var(--lp-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.lp-lead {
  margin-top: 12px;
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--ink-soft);
}
.lp .cta-row { margin: 18px 0 0; }
.lp .cta-row .small { max-width: 52ch; font-size: var(--text-sm); }

/* Сцена: кадр модели, поверх него — живая модель в рамке */
.lp-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-sunken);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line-strong);
}
.lp-stage img { width: 100%; height: 100%; object-fit: cover; }
.lp-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper-sunken);
}
.lp-spin {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  white-space: nowrap;
}
.lp-stage-note {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.lp-stage.live .lp-spin, .lp-stage.live .lp-stage-note { display: none; }

/* Лента листков под первым экраном */
.lp-ribbon {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(26px, 4vw, 44px);
}
.lp-ribbon a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 8px 8px 10px;
  border-radius: var(--r-sm);
  background: var(--lp-sheet);
  box-shadow: var(--shadow-1);
  color: #2a1c10;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lp-ribbon li:nth-child(odd) a { transform: rotate(calc(var(--lp-tilt) * -1)); }
.lp-ribbon li:nth-child(even) a { transform: rotate(var(--lp-tilt)) translateY(6px); }
.lp-ribbon a:hover, .lp-ribbon a:focus-visible {
  text-decoration: none;
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}
.lp-ribbon img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top left;
  border-radius: 6px;
  border: 1px solid #e6d6bd;
}

/* ── Разделы ── */
.lp-sec { padding: var(--lp-sec) 0; }
.lp-sec-alt { background: var(--paper-sunken); }
.lp h2 {
  font-size: var(--lp-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.lp-sub {
  margin-top: 12px;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--text-lg);
}
.lp-after { margin-top: clamp(28px, 3.5vw, 40px); color: var(--ink-soft); }
.lp-after a:not(.btn) { color: var(--ink); font-weight: 600; }

/* ── Документы ── */
.lp-docs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lp-doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 12px 12px 16px;
  border-radius: var(--r-md);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-doc:hover, .lp-doc:focus-visible {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--lp-accent);
}
.lp-doc-pic {
  display: block;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--lp-sheet);
  border: 1px solid var(--line);
}
.lp-doc-pic img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.6s var(--ease);
}
.lp-doc:hover .lp-doc-pic img { transform: scale(1.04); }
.lp-doc-t { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.lp-doc-why { color: var(--ink-soft); font-size: var(--text-sm); }
.lp-doc-meta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
}

/* ── Для заказчика: крупная картинка и две плитки рядом ── */
.lp-client {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lp-shot.big { grid-row: span 2; }
.lp-shot-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.lp-shot-in:hover, a.lp-shot-in:focus-visible {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.lp-shot-pic { display: block; flex: 1; min-height: 0; background: var(--lp-sheet); }
.lp-shot-pic img { width: 100%; height: 100%; object-fit: cover; }
.lp-shot:not(.big) .lp-shot-pic img { aspect-ratio: 2 / 1; }
/* лист КП крупной плиткой — целиком, без обрезки: на нём читают материалы и цену.
   Поля вокруг листа — в цвет его бумаги. Малой плиткой — верх листа. */
.lp-shot-kp .lp-shot-pic { background: #e7e4de; }
.lp-shot-kp .lp-shot-pic img { object-position: top left; }
.lp-shot-kp.big .lp-shot-pic img { object-fit: contain; object-position: center; }
.lp-shot-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 20px 20px;
}
.lp-shot-cap b { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.lp-shot.big .lp-shot-cap b { font-size: var(--text-xl); }
.lp-shot-cap > span:last-child { color: var(--ink-soft); font-size: var(--text-sm); }
.lp-shot-cap i { font-style: normal; font-weight: 600; color: var(--lp-accent); white-space: nowrap; }

/* ── Три шага ── */
.lp-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lp-steps li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.lp-steps li::before {
  content: '0' counter(step);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--lp-h2);
  line-height: 1;
  color: var(--lp-accent);
}
.lp-steps b, .lp-who b { font-size: var(--text-lg); font-weight: 700; }
.lp-steps span, .lp-who span { color: var(--ink-soft); }

/* ── Кому что достаётся ── */
.lp-who {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lp-who li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lp-accent);
}

/* ── Тарифы ── */
.lp-free {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: clamp(20px, 3vw, 32px) 0 22px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-2);
}
.lp-free b {
  font-size: var(--lp-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lp-free span { max-width: 52ch; font-size: var(--text-base); }
.lp .pub { padding: 0; font-size: var(--text-base); }
.lp .pub h3 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 700;
}
.lp #price .tbl {
  background: var(--paper-raised);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lp #price .table-scroll { max-height: none; }

/* ── Семейство: тёмная полоса ── */
.lp-family {
  background: var(--ink);
  color: var(--on-ink);
}
.lp-family .lp-kicker { color: var(--lp-accent-on-ink); }
.lp-family .lp-sub, .lp-family .lp-after { color: var(--on-ink-soft); }
.lp-family .lp-after a { color: var(--on-ink); }
.lp-fam {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lp-fam li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--lp-band-card);
  color: var(--on-ink);
}
.lp-fam li.now { outline: 2px solid var(--lp-accent-on-ink); outline-offset: -2px; }
.lp-fam b { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.01em; }
.lp-fam li > span:last-child { color: var(--on-ink-soft); }
.lp-chip {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.lp-chip.ok { background: var(--lp-ok-bg); color: var(--lp-ok); }
.lp-chip.soon { background: var(--lp-soon-bg); color: var(--lp-soon); }
.lp-chip.dev { background: var(--lp-dev-bg); color: var(--lp-dev); }

/* ── Оплата, возврат, продавец: спокойный текст для банка и покупателя ── */
.lp-legal h2 { font-size: var(--text-xl); max-width: none; }
.lp-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: 24px;
}
.lp-legal .pub { font-size: var(--text-sm); }

/* ── Планшет ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .lp-hero-in.has-stage { grid-template-columns: minmax(0, 1fr); }
  .lp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-client { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-shot.big { grid-row: auto; grid-column: span 2; }
  .lp-ribbon { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Телефон ── */
@media (max-width: 600px) {
  .lp-nav { display: none; }
  .lp-enter { margin-left: auto; }
  .lp-hero-in.has-stage { grid-template-columns: minmax(0, 1fr); }
  .lp .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  /* лента листается пальцем внутри своего блока, страница вбок не едет */
  .lp-ribbon {
    grid-auto-columns: 42%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 14px;
  }
  .lp-ribbon li { scroll-snap-align: start; }
  .lp-ribbon li a, .lp-ribbon li:nth-child(odd) a, .lp-ribbon li:nth-child(even) a { transform: none; }
  .lp-docs, .lp-client, .lp-steps, .lp-who, .lp-fam, .lp-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-shot.big { grid-row: auto; }
}

/* ── Палец: цель не меньше 44 px ── */
@media (pointer: coarse) {
  .lp .btn, .lp-nav a, .lp-logo { min-height: var(--tap); }
  .lp-nav a { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-ribbon a, .lp-doc, .lp-doc-pic img, .lp-shot-in { transition: none; }
  .lp-ribbon li a, .lp-doc:hover, .lp-doc:hover .lp-doc-pic img, a.lp-shot-in:hover { transform: none; }
}