/* ============================================================================
   landing-pop.css — стили страницы «Как работает BunnySplit» (/how, home.html).
   ЕДИНСТВЕННЫЙ потребитель — frontend/home.html (проверено grep). Префикс lp-.

   ── КАНОН, по которому написан файл ───────────────────────────────────────
   • ЦВЕТ  — только var(--*) из tokens.css. Ноль hex-литералов (было 21, в т.ч.
     собственные --violet-ink/--ok-ink — второй источник правды мимо рамп).
   • ШИРИНА — var(--page-max) для оболочки, var(--read-max) для колонки текста
     (frontend/brand/WIDTHS.md). Хардкод ≥1000px запрещён (ds-audit --widths).
   • ПЛОТНОСТЬ D0 — frontend/brand/DENSITY.md. Секция 40px (была 64), H2 ≤26px
     (было до 42), кнопка 40px desktop / 44px тач (была 60), карточка padding 16.
     Эталон — cabinet.html и /@handle: лендинг НЕ имеет права быть рыхлее их.
   • КНОПКИ — платформенные .pp-btn/.pp-btn-compact из pop.css, свой .lp-btn
     удалён (был третий тир кнопки на сервисе).
   • ДВИЖЕНИЕ — только opacity/transform, ≤300ms, и всё гаснет по
     prefers-reduced-motion.

   Снято вместе с питчем незапущенного движка: hero-сцена model-viewer, галерея
   demo-GLB, таблица сравнения, тир-карточки, свой футер .lp-footer (заменён
   платформенным .pp-foot-legal), бейдж .lp-soon.
   ============================================================================ */

/* Скролл-корень: клипаем страничный H-скролл (clip не создаёт scroll-container →
   sticky-шапка и внутренние overflow-x целы). */
html{ overflow-x:clip; }

.lp-body{
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(900px 480px at 96% 4%, rgba(255,94,126,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  overflow-x:clip;
}

/* Оболочка = единая ширина сервиса (WIDTHS.md) */
.lp-wrap{ max-width:var(--page-max); margin:0 auto; padding:0 var(--sp-5); }
@media(max-width:600px){ .lp-wrap{ padding:0 var(--sp-4); } }

/* градиентное слово в заголовке */
.lp-grad{
  background:var(--grad-hero); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ============================================================
   ТИПОГРАФИКА СЕКЦИЙ (шкала --fs-*, D0)
   ============================================================ */
.lp-section{ padding:var(--sp-8) 0; }                 /* 40px, было 64 */
@media(max-width:600px){ .lp-section{ padding:var(--sp-7) 0; } }  /* 32px */
.lp-section.alt{ background:var(--bg2); border-block:1px solid var(--line); }

.lp-kicker{
  display:inline-block; margin:0 0 var(--sp-1);
  font:800 var(--fs-xs)/1 var(--font-display); letter-spacing:.06em;
  text-transform:uppercase; color:var(--violet-700);
}
.lp-h2{
  margin:0 0 var(--sp-1);
  font:800 clamp(20px,2.2vw,var(--fs-xl))/var(--lh-tight) var(--font-display);
  letter-spacing:-.02em; color:var(--ink);
}
.lp-sub{
  margin:0 0 var(--sp-4); max-width:var(--read-max);
  font:500 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2);
}
.lp-sec-head{ margin-bottom:var(--sp-4); }

/* ============================================================
   HERO — компактный: 1 колонка текста + маскот справа
   ============================================================ */
.lp-hero{ padding:var(--sp-7) 0 var(--sp-6); }        /* 32 / 24 */
@media(max-width:600px){ .lp-hero{ padding:var(--sp-5) 0 var(--sp-4); } }

.lp-hero-in{ display:flex; align-items:flex-end; gap:var(--sp-6); }
.lp-hero-copy{ flex:1 1 auto; min-width:0; }

.lp-h1{
  margin:0 0 var(--sp-2); max-width:22ch;
  font:800 clamp(26px,3.2vw,34px)/1.12 var(--font-display);
  letter-spacing:-.025em; color:var(--ink);
}
.lp-lead{
  margin:0 0 var(--sp-2); max-width:var(--read-max);
  font:500 15px/var(--lh-normal) var(--font); color:var(--ink2);
}
.lp-lead b{ color:var(--ink); font-weight:700; }

/* строка «сколько это стоит» — снимаем главное возражение мастера сразу под лидом */
.lp-cost{
  display:inline-flex; align-items:flex-start; gap:var(--sp-2);
  margin:0 0 var(--sp-4); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--rad-md); background:var(--violet-50);
  border:1px solid var(--violet-100);
  font:500 var(--fs-sm)/1.4 var(--font); color:var(--violet-900);
}
.lp-cost b{ font-weight:800; }
.lp-cost svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--violet-700); }

.lp-cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
@media(max-width:420px){ .lp-cta-row{ flex-direction:column; align-items:stretch; } }
@media(max-width:420px){ .lp-cta-row .pp-btn-compact{ width:100%; } }

/* тач-таргет: 40px desktop → 44px на мобиле (DENSITY §3). Скоуп .lp-body — файл
   грузит только эта страница, но правило всё равно не течёт на платформу. */
@media(max-width:600px){ .lp-body .pp-btn-compact{ min-height:44px; } }

.lp-trust{
  display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-5);
  margin:var(--sp-3) 0 0; padding:0; list-style:none;
  font:500 13px/1.4 var(--font); color:var(--ink2);
}
.lp-trust li{ display:inline-flex; align-items:center; gap:6px; }
.lp-trust svg{ width:16px; height:16px; flex:none; color:var(--emerald-700); }

.lp-hero-klikko{ width:132px; height:auto; flex:none; display:block; }
@media(max-width:900px){ .lp-hero-klikko{ width:100px; } }
@media(max-width:600px){ .lp-hero-klikko{ display:none; } }

/* блик на ЕДИНСТВЕННОМ primary hero-CTA (фишка владельца — сохранена как была,
   переехала из inline-<style> home.html). Reduced-motion гасит fail-safe pop.css. */
.lp-cta-shimmer{ position:relative; overflow:hidden; }
.lp-cta-shimmer::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform:translateX(-120%); animation:lp-cta-shim 3.4s ease-in-out infinite;
}
@keyframes lp-cta-shim{
  0%,15%{ transform:translateX(-120%); }
  60%,100%{ transform:translateX(120%); }
}

/* ============================================================
   ЖИВОЙ БЛОК «Только что опубликовали» (GET /api/marketplace/recent)
   Классы и состояния (.is-in/.is-shown/.is-static) — контракт landing-pop.js.
   ============================================================ */
.lp-fresh-kicker{ display:inline-flex; align-items:center; gap:6px; }
.lp-live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--coral); flex:none;
  box-shadow:0 0 0 0 rgba(255,94,126,.5); animation:lp-live 2.2s ease-out infinite;
}
@keyframes lp-live{
  0%{ box-shadow:0 0 0 0 rgba(255,94,126,.5); }
  70%{ box-shadow:0 0 0 7px rgba(255,94,126,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,94,126,0); }
}

/* сетка вместо колонки: 8 карточек = 2 ряда на 1360 (было 8 рядов = целый экран) */
.lp-fresh-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-2); text-align:left;
}
.lp-fresh-card{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--rad-lg);
  background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:inherit; opacity:0;   /* скрыта до входа (JS) */
  transition:transform .18s cubic-bezier(.34,1.4,.64,1), border-color .18s ease, box-shadow .18s ease;
}
.lp-fresh-card.is-in{ animation:lp-fresh-in .32s cubic-bezier(.34,1.4,.64,1) both; }
.lp-fresh-card.is-shown{ opacity:1; }
@keyframes lp-fresh-in{
  from{ opacity:0; transform:translateY(-8px) scale(.98); }
  to{ opacity:1; transform:none; }
}
a.lp-fresh-card:hover{
  transform:translateY(-2px); border-color:var(--violet-200); box-shadow:var(--shadow);
}
a.lp-fresh-card:focus-visible{
  outline:none; border-color:var(--violet-400); box-shadow:0 0 0 3px var(--violet-100);
}
.lp-fresh-card.is-static{ cursor:default; }

.lp-fresh-thumb{
  width:44px; height:44px; flex:none; border-radius:var(--rad-md); object-fit:cover;
  background:var(--bg2); border:1px solid var(--line);
}
.lp-fresh-body{ flex:1; min-width:0; }
.lp-fresh-title{
  display:block; font:700 var(--fs-sm)/1.3 var(--font); color:var(--ink);
  margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lp-fresh-meta{
  display:flex; align-items:center; gap:6px; min-width:0;
  font:500 var(--fs-xs)/1.3 var(--font); color:var(--ink2);
}
.lp-fresh-author{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-fresh-dot{ flex:none; color:var(--line2); }
.lp-fresh-time{ flex:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lp-fresh-go{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  color:var(--violet); background:var(--violet-50);
  transition:transform .18s ease, background .18s ease;
}
a.lp-fresh-card:hover .lp-fresh-go{ transform:translateX(2px); background:var(--violet-100); }
.lp-fresh-go svg{ width:14px; height:14px; }
.lp-fresh-card.is-static .lp-fresh-go{ display:none; }

/* честный агрегат за неделю (когда карточек <3) */
.lp-fresh-agg{
  display:block; margin:0; max-width:var(--read-max);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--rad-lg);
  background:var(--violet-50); border:1px solid var(--violet-100);
  font:600 var(--fs-sm)/1.45 var(--font); color:var(--violet-900);
}
.lp-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3);
  font:700 var(--fs-sm)/1 var(--font); color:var(--violet-700); text-decoration:none;
}
.lp-more:hover{ text-decoration:underline; }
.lp-more:focus-visible{ outline:2px solid var(--violet-400); outline-offset:2px; border-radius:var(--rad-xs); }
.lp-more svg{ width:15px; height:15px; }

@media(max-width:600px){
  /* мобайл: 8 строк = лишний экран → показываем 4, остальное в каталоге */
  .lp-fresh-list > *:nth-child(n+5){ display:none; }
  .lp-fresh-list{ gap:6px; }
}

/* ============================================================
   КАРТОЧКИ (три входа · цены) и ДВУХКОЛОНОЧНЫЕ СПИСКИ (как это работает)
   ============================================================ */
.lp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.lp-cards.is-two{ grid-template-columns:repeat(2,1fr); }
@media(max-width:860px){ .lp-cards, .lp-cards.is-two{ grid-template-columns:1fr; gap:var(--sp-2); } }

.lp-card{
  display:flex; flex-direction:column; gap:6px;
  padding:var(--sp-4); border-radius:var(--rad-lg);
  background:var(--card); border:1px solid var(--line);
}
.lp-card-ico{
  width:32px; height:32px; border-radius:var(--rad-sm); display:grid; place-items:center;
  background:var(--violet-50); color:var(--violet-700); margin-bottom:2px;
}
.lp-card:nth-child(2) .lp-card-ico{ background:var(--coral-50); color:var(--coral-700); }
.lp-card:nth-child(3) .lp-card-ico{ background:var(--amber-50); color:var(--amber-700); }
.lp-card-ico svg{ width:18px; height:18px; }
.lp-card h3{
  margin:0; font:800 var(--fs-base)/1.2 var(--font-display);
  letter-spacing:-.01em; color:var(--ink);
}
.lp-card p{ margin:0; font:500 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.lp-card .lp-more{ margin-top:auto; padding-top:var(--sp-2); }
/* мобайл: карточка на нижней ступени шкалы паддингов (DENSITY §4) */
@media(max-width:600px){ .lp-card{ padding:var(--sp-3); gap:4px; } .lp-sec-head{ margin-bottom:var(--sp-3); } }

/* нумерованные шаги — строка, а не карточка на пол-экрана */
.lp-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.lp-step{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.lp-step-n{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; background:var(--violet-100); color:var(--violet-800);
  font:800 var(--fs-xs)/1 var(--font); font-variant-numeric:tabular-nums;
}
.lp-step-t{ display:block; font:700 var(--fs-sm)/1.35 var(--font); color:var(--ink); }
.lp-step-d{ display:block; font:500 var(--fs-sm)/1.45 var(--font); color:var(--ink2); }

/* ============================================================
   ЦЕНЫ (#pricing — сюда ведут «Цены» из подвалов блога и вики)
   ============================================================ */
.lp-price-note{
  margin:var(--sp-3) 0 var(--sp-4); max-width:var(--read-max);
  font:500 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2);
}
.lp-facts{ list-style:none; margin:var(--sp-1) 0 0; padding:0; display:grid; gap:6px; }
.lp-facts li{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  font:500 var(--fs-sm)/1.45 var(--font); color:var(--ink);
}
.lp-facts svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--emerald-700); }

/* ============================================================
   FAQ — две колонки, всё свёрнуто (прогрессивное раскрытие §5 DENSITY)
   ============================================================ */
.lp-faq{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); align-items:start; }
@media(max-width:860px){ .lp-faq{ grid-template-columns:1fr; } }
.lp-faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--rad-md);
}
.lp-faq summary{
  display:flex; align-items:center; min-height:44px;
  padding:var(--sp-2) 38px var(--sp-2) var(--sp-3);
  font:700 var(--fs-sm)/1.35 var(--font); color:var(--ink);
  cursor:pointer; position:relative; list-style:none;
}
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{
  content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--ink2); border-bottom:2px solid var(--ink2);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.lp-faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.lp-faq summary:focus-visible{
  outline:none; box-shadow:inset 0 0 0 2px var(--violet-400); border-radius:var(--rad-md);
}
.lp-faq p{
  margin:0; padding:0 var(--sp-3) var(--sp-3);
  font:500 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2);
}

/* ============================================================
   ФИНАЛЬНАЯ ПОЛОСА — строка, а не «герой» на пол-экрана
   ============================================================ */
.lp-final{ padding:0 0 var(--sp-8); }
/* Фон — светлая бренд-подложка, а НЕ --grad-hero: белый текст на градиенте
   коралл→фиолет даёт 2.9-4.3:1 (замер), то есть провал AA для 14-18px. Бренд
   остаётся в подложке и в градиентной primary-кнопке, читаемость — тёмным ink. */
.lp-final-card{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r);
  background:linear-gradient(120deg,var(--violet-50),var(--coral-50));
  border:1px solid var(--violet-100);
}
.lp-final-txt{ flex:1 1 320px; min-width:0; }
.lp-final-card h2{
  margin:0 0 2px; font:800 var(--fs-md)/1.2 var(--font-display);
  letter-spacing:-.01em; color:var(--ink);
}
.lp-final-card p{ margin:0; font:500 var(--fs-sm)/1.4 var(--font); color:var(--ink2); }
.lp-final-card .pp-btn{ flex:none; }

/* ============================================================
   ПОДВАЛ — платформенный .pp-foot-legal (pop.css). Свой .lp-footer снят.
   ============================================================ */
.lp-body .pp-foot-legal{ margin-top:0; }

/* ============================================================
   ФОКУС — видимое кольцо на всех интерактивных элементах страницы.
   В pop.css у .pp-btn собственного :focus-visible нет (проверено grep) — на
   градиентной пилюле дефолтное кольцо браузера читается плохо. Правило скоупим
   на .lp-body, чтобы не трогать платформенный pop.css (файл соседнего окна).
   ============================================================ */
.lp-body .pp-btn:focus-visible,
.lp-body .lp-card a:focus-visible,
.lp-body .lp-price-note a:focus-visible,
.lp-body .pp-foot-legal a:focus-visible{
  outline:2px solid var(--violet-700); outline-offset:2px; border-radius:var(--rad-xs);
}
.lp-body .pp-btn:focus-visible{ border-radius:var(--pill); }

/* ============================================================
   SCROLL-REVEAL (landing-pop.js)
   ============================================================ */
.lp-reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
}
.lp-reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .lp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lp-fresh-card{ opacity:1 !important; animation:none !important; transition:none !important; }
  .lp-live-dot{ animation:none; box-shadow:0 0 0 3px rgba(255,94,126,.14); }
  .lp-cta-shimmer::after{ animation:none; opacity:0; }
}