/* PacketUP HUB — лицевая страница. Поверх tokens.css и app.css из design/assets:
   только токены и готовые компоненты (.btn, .card, .cat, .st, .seg, .tier-tag),
   здесь — каркас лендинга и адаптив до 360px. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
body.lp { overflow-x: hidden; }
.lp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }

/* ---------- Шапка: капсула над страницей, не во всю ширину. Срезанный угол, как у карточек; бегунок под пунктом
   меню и полоска прочитанного внизу ставит landing.js ---------- */
.lp-top { position: sticky; top: 0; z-index: var(--z-topbar); padding-top: 12px; pointer-events: none; }
.lp-top > * { pointer-events: auto; }
.lp-top .lp-top-in { position: relative; height: 60px; width: calc(100% - 2 * var(--sp-6)); max-width: calc(1200px - 2 * var(--sp-6)); margin: 0 auto;
  padding: 0 22px 0 18px; display: flex; align-items: center; gap: var(--sp-3);
  background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--border); border-radius: 16px 0 16px 16px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.7); transition: border-color var(--dur), background var(--dur); }
.lp-top.is-scrolled .lp-top-in { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.lp-top-read { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left; transform: scaleX(var(--read, 0));
  background: var(--accent-text); pointer-events: none; }
.lp-nav { position: relative; isolation: isolate; display: flex; gap: 2px; }
.lp-nav a { color: var(--text-muted); font-weight: 500; padding: 8px 10px; white-space: nowrap; transition: color var(--dur); }
.lp-nav a:hover, .lp-nav a.is-cur { color: var(--text); text-decoration: none; }
.lp-nav-ind { position: absolute; z-index: -1; left: 0; top: 50%; height: 34px; margin-top: -17px; width: 0; opacity: 0; pointer-events: none;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); border-radius: 9px 0 9px 9px;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), opacity .2s; }
/* Язык в шапке — одна кнопка с другим языком, без переключателя-сегмента */
.lp-top-in .lp-lang { background: none; box-shadow: none; padding: 0; }
.lp-top-in .lp-lang > [aria-current="true"] { display: none; }
.lp-top-in .lp-lang > a { font: 700 var(--fs-xs) var(--font-num); letter-spacing: .08em; color: var(--text-muted); background: none; box-shadow: none; height: 36px; padding: 0 8px; }
.lp-top-in .lp-lang > a:hover { color: var(--text); }
.lp-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.lp-burger { display: none; flex-direction: column; gap: 4px; }
.lp-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur); }
.lp-top.is-open .lp-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lp-top.is-open .lp-burger span:nth-child(2) { opacity: 0; }
.lp-top.is-open .lp-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.lp-menu { padding-top: 8px; animation: ph-in .3s var(--ease-out); }
.lp-menu > nav { width: calc(100% - 2 * var(--sp-6)); margin: 0 auto; padding: var(--sp-3) var(--sp-5) var(--sp-5);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border-strong); border-radius: 16px; }
.lp-menu nav > a:last-of-type { border-bottom: 0; }
.lp-menu nav > a { color: var(--text); font-weight: 500; font-size: var(--fs-lg); padding: 10px 0; border-bottom: 1px solid var(--border); }
.lp-menu nav > a:hover { text-decoration: none; color: var(--accent-text); }
.lp-menu-foot { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.lp-menu-foot .seg { align-self: flex-start; }

/* ---------- Общие блоки ---------- */
.lp-sec { padding: 96px 0; }
.lp-sec-tight { padding-top: 40px; }
.lp-band { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent) 12%, color-mix(in srgb, var(--surface) 70%, transparent) 88%, transparent); }
.lp-head { max-width: 680px; margin-bottom: var(--sp-10); }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3); }
.lp-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--accent-hover);
  clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); }
.lp-h2 { font: 600 clamp(26px, 3.4vw, 38px)/1.15 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.lp-sub { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--sp-3); text-wrap: pretty; }
.lp-accent { color: var(--accent-text); }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.lp-ic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: var(--accent-text);
  background: var(--accent-soft); border-radius: 11px 0 11px 11px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.lp-ic svg.i { width: 22px; height: 22px; }

/* ---------- Первый экран ---------- */
/* Карточки иллюстрации заходят за край: на телефоне без обрезки страница становится шире экрана и съезжает вбок */
.lp-hero { position: relative; padding: 40px 0 56px; overflow-x: clip; }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-12); align-items: center; }
.lp-h1 { font: 700 clamp(34px, 5.2vw, 60px)/1.05 var(--font-display); letter-spacing: -.035em; margin-top: var(--sp-5); text-wrap: balance; }
.lp-lead { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin-top: var(--sp-5); max-width: 560px; text-wrap: pretty; }
.lp-facts { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.lp-facts li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.lp-facts svg { color: var(--accent-text); }

/* Кадры первого экрана лежат в одной ячейке сетки: высота — по большему кадру, при смене ничего не прыгает */
.lp-hero-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); align-items: end; gap: var(--sp-5); margin-bottom: var(--sp-10); }
.lp-hero-tabs button { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; padding: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 10px; }
.lp-hero-tabs .nums { font: 700 var(--fs-xs) var(--font-num); color: var(--text-faint); transition: color var(--dur); }
.lp-hero-tabs b { font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur); }
.lp-hero-tabs button:hover b, .lp-hero-tabs [aria-selected="true"] b { color: var(--text); }
.lp-hero-tabs [aria-selected="true"] .nums { color: var(--accent-text); }
.lp-hero-tabs button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
/* Полоска — таймер кадра: её анимация закончилась — landing.js показывает следующий кадр */
.lp-hero-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.lp-hero-bar i { display: block; height: 100%; background: var(--accent-hover); transform-origin: left; transform: scaleX(0); }
.lp-hero-tabs [aria-selected="true"] .lp-hero-bar i { transform: none; animation: ph-grow-x 9s linear; }
.lp-hero.is-paused [aria-selected="true"] .lp-hero-bar i { animation-play-state: paused; }
.lp-slides { display: grid; }
.lp-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility 0s .45s; }
.lp-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-slide.is-on .lp-hero-text > * { animation: ph-in var(--dur-slow) var(--ease-out) backwards; }
.lp-slide.is-on .lp-hero-text > :nth-child(2) { animation-delay: 60ms; }
.lp-slide.is-on .lp-hero-text > :nth-child(3) { animation-delay: 120ms; }
.lp-slide.is-on .lp-hero-text > :nth-child(4) { animation-delay: 180ms; }
.lp-slide.is-on .lp-hero-text > :nth-child(5) { animation-delay: 240ms; }

/* Иллюстрация кадра достраивается, пока идёт его таймер (9 s): --t — секунда от показа кадра.
   .lp-at появляется на --t, .lp-until видно до --t; в .lp-swap оба лежат в одной ячейке и сменяют друг друга.
   Вне .is-on анимаций нет, поэтому при каждом показе кадра сборка начинается заново */
.lp-at, .lp-at .st-ic, .lp-at .st-ic path { animation: none; }
.is-on .lp-at { animation: var(--fx, ph-in) .5s var(--ease-out) var(--t) backwards; }
.is-on .st.lp-at .st-ic { animation: ph-click .45s var(--ease-spring) calc(var(--t) + .15s) backwards; }
.is-on .st-ok.lp-at .st-ic path { animation: ph-draw .5s var(--ease-out) calc(var(--t) + .25s) backwards; }
.lp-swap { display: inline-grid; justify-items: end; }
.lp-swap > * { grid-area: 1 / 1; }
.lp-until { opacity: 0; }
.is-on .lp-until { animation: lp-hold var(--t); }
@keyframes lp-hold { from, to { opacity: 1; } }
@keyframes lp-tick { from { opacity: 0; transform: translateY(8px); color: var(--accent-text); } 30% { opacity: 1; transform: none; color: var(--accent-text); } }
@keyframes lp-bubble { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes lp-ring { 15% { rotate: 16deg; } 35% { rotate: -13deg; } 55% { rotate: 8deg; } 75% { rotate: -4deg; } }

/* Площадки автопилота: готовые и в разработке */
.lp-plats { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.lp-plat-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.lp-plat-h { width: 132px; flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--success); }
.lp-plat-h::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.is-soon .lp-plat-h { color: var(--text-faint); }
.lp-plat-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lp-plat-row li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 600; }
.lp-plat-row img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.is-soon li { background: none; border-style: dashed; color: var(--text-muted); font-weight: 500; }
.is-soon li[data-t] { padding: 0 14px; }
.is-soon img { filter: saturate(.5); opacity: .8; }

/* Иллюстрация: карточка заказа, плитки-обложки, плашки баланса и вебхука */
.lp-hero-art { position: relative; min-height: 440px; display: grid; place-items: center; }
.lp-tiles { position: absolute; right: -10px; top: 0; display: flex; gap: 14px; transform: rotate(-9deg); }
.lp-tiles span { width: 96px; height: 124px; border-radius: 12px 0 12px 12px; display: flex; align-items: flex-end; padding: 10px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  color: #fff; font: 700 17px/1 var(--font-display); box-shadow: 0 16px 32px rgba(0,0,0,.35);
  animation: ph-float 3.8s ease-in-out infinite alternate; }
.lp-tiles span:nth-child(2) { transform: translateY(26px); animation-delay: -1.3s; }
.lp-tiles span:nth-child(3) { animation-delay: -2.5s; }
.lp-order { position: relative; z-index: 1; width: min(400px, 100%); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-lg); border-radius: var(--r-xl) 0 var(--r-xl) var(--r-xl);
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.is-on .lp-order { animation: ph-pop .6s var(--ease-out) .15s backwards; }
.lp-order-head { display: flex; align-items: center; gap: var(--sp-3); }
.lp-order-head .cover { width: 52px; height: 52px; border-radius: 10px; padding: 6px 8px; font-size: 14px; flex: none; }
.lp-order-codes { display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-code-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lp-code-row .code { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Блик пробегает по коду, когда тот выдан */
.lp-code-row .code::after { content: ""; position: absolute; inset: 0; width: 45%; transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-text) 28%, transparent), transparent); }
.is-on .lp-code-row .code::after { animation: ph-shine .9s var(--ease-out) calc(var(--t) + .3s) both; }


/* Заказ как посылка: маршрут, коды, линия отрыва с вырезами по краям, штрихкод и штамп «Выдано» */
.lp-parcel-route { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: end; gap: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.lp-parcel-route span { display: flex; flex-direction: column; gap: 2px; }
.lp-parcel-route span:last-child { text-align: right; }
.lp-parcel-route small { font: 600 10px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.lp-parcel-route b { font: 600 var(--fs-sm)/1.2 var(--font-ui); }
.lp-parcel-route i { height: 2px; margin-bottom: 7px; background: repeating-linear-gradient(90deg, var(--accent-text) 0 6px, transparent 6px 11px); position: relative; }
.lp-parcel-route i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--accent-text); border-right: 0; }
.is-on .lp-parcel-route i { animation: lp-route 1.2s linear infinite; }
@keyframes lp-route { to { background-position: 11px 0; } }
.lp-parcel-tear { position: relative; height: 22px; margin: 0 calc(-1 * var(--sp-5));
  background: radial-gradient(circle at 0 50%, var(--bg) 10px, transparent 10.5px), radial-gradient(circle at 100% 50%, var(--bg) 10px, transparent 10.5px); }
.lp-parcel-tear::after { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 2px dashed var(--border-strong); }
.lp-parcel-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.lp-parcel-foot dl { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-parcel-foot dl > div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-xs); }
.lp-parcel-foot dt { color: var(--text-faint); }
.lp-parcel-foot dd { margin: 0; font-weight: 600; }
.lp-parcel-foot dd.lp-at { color: var(--success); }
.lp-barcode { flex: none; width: 112px; height: 40px; opacity: .75;
  background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 8px,
    var(--text) 8px 11px, transparent 11px 12px, var(--text) 12px 13px, transparent 13px 17px); }
.lp-stamp { position: absolute; right: 22px; top: 96px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px 7px; color: var(--accent-text); border: 3px solid currentColor; border-radius: 8px; transform: rotate(-12deg);
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px currentColor; background: color-mix(in srgb, var(--surface) 55%, transparent);
  mix-blend-mode: normal; --fx: lp-stamp; pointer-events: none; }
.lp-stamp b { font: 700 20px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.lp-stamp span { font-size: 10px; letter-spacing: .14em; opacity: .85; }
@keyframes lp-stamp { from { opacity: 0; transform: rotate(-4deg) scale(2.1); } 60% { opacity: 1; transform: rotate(-14deg) scale(.94); } }

/* ---------- Витрина брендов: плитки в цветах брендов, столбцы сдвинуты по высоте ---------- */
.lp-shelf-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-12); align-items: center; }
.lp-shelf-grid { list-style: none; margin: 0; padding: 0 0 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.lp-shelf-item { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px;
  border-radius: 14px 0 14px 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); transition: transform .45s var(--ease-out); }
.lp-shelf-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.2), transparent 40%); }
.lp-shelf-item .bm { width: 30px; height: 30px; position: relative; }
.lp-shelf-item span { position: relative; font: 600 var(--fs-sm)/1.2 var(--font-ui); color: #fff; }
.bc-pubg.lp-shelf-item span { color: #1A1205; }
.lp-shelf-item { --y: 0px; transform: translateY(var(--y)); }
.lp-shelf-item:nth-child(5n+2), .lp-shelf-item:nth-child(5n+4) { --y: 28px; }
.lp-shelf-item:hover { transform: translateY(calc(var(--y) - 6px)) rotate(-2deg); }
.lp-shelf-more { justify-content: center; align-items: center; text-align: center; background: none; border: 1.5px dashed var(--border-strong); box-shadow: none; clip-path: none; }
.lp-shelf-more::before { display: none; }
.lp-shelf-more span { color: var(--text-muted); }

/* ---------- Характеристики: этикетка на посылке, светлая в обеих темах ---------- */
.lp-specs-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: center; }
.lp-specs-in .lp-head { margin-bottom: 0; }
.lp-spec { --ink: #1C1517; width: min(460px, 100%); margin-left: auto; padding: 18px 22px 16px; color: var(--ink); background: #F4EDE8;
  border: 3px solid var(--ink); transform: rotate(-1.6deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.75); transition: transform .5s var(--ease-out); }
.lp-spec:hover { transform: rotate(0); }
.lp-spec-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: 8px; border-bottom: 10px solid var(--ink); }
.lp-spec-title b { font: 700 26px/1 var(--font-display); letter-spacing: -.03em; }
.lp-spec-title span { font: 700 var(--fs-xs) var(--font-num); letter-spacing: .1em; text-transform: uppercase; }
.lp-spec dl { margin: 0; }
.lp-spec dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: var(--fs-sm); }
.lp-spec dl > div:last-child { border-bottom: 5px solid var(--ink); }
.lp-spec dt { font-weight: 500; }
.lp-spec dd { margin: 0; font-weight: 700; text-align: right; }
.lp-spec-foot { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 12px; font: 700 var(--fs-xs) var(--font-num); letter-spacing: .12em; }
.lp-spec .lp-barcode { --text: var(--ink); opacity: 1; }

/* ---------- Ассортимент: карточки категорий из каталога, без ссылок ---------- */
.lp-cats { margin-bottom: 0; }
.lp-cats .cat { min-height: 280px; }
.lp-cats .cat .count { font: 600 var(--fs-sm) var(--font-ui); color: var(--text-muted); }

/* ---------- Преимущества ---------- */
.lp-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.lp-feat { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.lp-feat:hover { border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border)); }
.lp-feat h3 { font: 600 var(--fs-lg)/1.3 var(--font-ui); margin-top: var(--sp-2); }
.lp-feat p { color: var(--text-muted); font-size: var(--fs-md); }
.lp-feat-wide { grid-column: span 2; }
.lp-feat-wide h3 { font: 600 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -.015em; }
.lp-tiers { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }

/* ---------- Шаги: трек доставки. Линия между узлами заполняется по мере прокрутки (landing.js ставит --track
   и .is-done пройденным шагам) ---------- */
.lp-steps { --gap: var(--sp-6); position: relative; list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.lp-steps::before, .lp-steps::after { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 4 * var(--gap)) / 5 - 28px); height: 2px;
  background: var(--border-strong); }
.lp-steps::after { background: var(--accent-text); transform-origin: left; transform: scaleX(var(--track, 0));
  transition: transform .25s linear; }
.lp-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-steps .lp-ic { width: 56px; height: 56px; margin-bottom: var(--sp-3); border-radius: 50%; clip-path: none; color: var(--text-faint);
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--border-strong); transition: color .4s, background .4s, box-shadow .4s; }
.lp-steps li.is-done .lp-ic { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 22%, var(--bg)); box-shadow: inset 0 0 0 2px var(--accent-text); }
.lp-steps .lp-ic { order: -1; }
.lp-step-n { font: 700 var(--fs-xs) var(--font-num); letter-spacing: .14em; color: var(--text-faint); }
.lp-step-n::before { content: "ШАГ "; }
:root[lang="en"] .lp-step-n::before { content: "STEP "; }
.lp-steps li.is-done .lp-step-n { color: var(--accent-text); }
.lp-steps h3 { font: 600 var(--fs-lg)/1.3 var(--font-ui); }
.lp-steps p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Разработчикам ---------- */
.lp-dev { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-12); align-items: center; }
.lp-checks { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-checks li { display: flex; gap: var(--sp-3); color: var(--text-muted); }
.lp-checks li svg { color: var(--success); margin-top: 3px; }
.lp-checks b { color: var(--text); font-weight: 600; }

/* Окно кода: всегда тёмное, как терминал, в обеих темах. Появляется обёртка, а не само окно:
   Chrome иногда не дорисовывает анимируемый слой с clip-path, и часть окна остаётся пустой */
.lp-term { --t-bg: #120F10; --t-head: #1A1617; --t-line: #2C2526; --t-text: #E6DEDC; --t-dim: #7C706D;
  background: var(--t-bg); border: 1px solid var(--t-line); border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.lp-term-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 22px 8px 10px; background: var(--t-head); border-bottom: 1px solid var(--t-line); }
.lp-term-tabs { display: flex; gap: 2px; }
.lp-term-tabs button { appearance: none; border: 0; background: none; font: 500 var(--fs-sm) var(--font-ui); color: var(--t-dim);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: background var(--dur), color var(--dur); }
.lp-term-tabs button:hover { color: var(--t-text); }
.lp-term-tabs button[aria-selected="true"] { background: #2A2324; color: var(--t-text); }
.lp-term .copy { color: var(--t-dim); }
.lp-term .copy:hover { color: var(--t-text); background: #2A2324; }
.lp-pre { margin: 0; padding: var(--sp-5); overflow-x: auto; color: var(--t-text);
  font: 400 13px/1.7 var(--font-code); tab-size: 2; min-height: 360px; animation: ph-fade .3s var(--ease-out); }
.lp-pre code { font: inherit; font-weight: 400; }
.lp-pre .c { color: var(--t-dim); }
.lp-pre .k { color: #E8919F; }
.lp-pre .s { color: #9FD8B6; }
.lp-pre .n { color: #F0C27A; }

/* ---------- Автопилот: кто что делает и преимущества; кадр сделки — на первом экране ---------- */
/* Кто что делает: у продавца два пункта, остальное на автопилоте */
.lp-auto-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-4); }
.lp-auto-split > div { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.lp-auto-split > .is-bot { border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border));
  background: var(--surface); }
.lp-auto-who { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.is-bot .lp-auto-who { color: var(--accent-text); }
.lp-auto-split ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.lp-auto-split li { display: flex; align-items: baseline; gap: 8px; }
.lp-auto-split li::before { content: ""; width: 6px; height: 6px; flex: none; transform: translateY(-2px); background: var(--text-faint); }
.is-bot li::before { background: var(--accent-hover); }

/* Иллюстрация: лента одной сделки с точками на линии времени */
.lp-auto-art { position: relative; padding-top: var(--sp-6); }
.lp-deal { width: min(440px, 100%); margin: 0 auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-lg); border-radius: var(--r-xl) 0 var(--r-xl) var(--r-xl);
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); }
.is-on .lp-deal { animation: ph-pop .6s var(--ease-out) .15s backwards; }
.lp-deal .summary { padding-top: var(--sp-3); border-top: 1px dashed var(--border-strong); }
.lp-deal-steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-deal-steps::before { content: ""; position: absolute; left: 66px; top: 12px; bottom: 12px; width: 2px; background: var(--border); transform-origin: top; }
/* Линия дорастает от первого шага (.7 s) до последнего (6.6 s) */
.is-on .lp-deal-steps::before { animation: ph-grow-y 5.9s linear .7s backwards; }
.lp-deal-steps li { position: relative; display: flex; align-items: center; gap: 22px; min-height: 24px; font-size: var(--fs-sm); }
.lp-deal-steps li::before { content: ""; position: absolute; left: 63px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-strong); }
.lp-deal-steps li > span { width: 56px; flex: none; font-size: var(--fs-xs); color: var(--text-faint); }
.lp-deal-steps p { margin: 0; color: var(--text-muted); min-width: 0; }
.lp-deal-steps b { color: var(--text); font-weight: 600; }
.lp-deal-steps .msg p { padding: 6px 10px; border-radius: 10px 10px 10px 2px; background: var(--surface-2); color: var(--text); }
.lp-deal-steps .buyer p { background: var(--accent-soft); }
.lp-deal-steps .ok p { color: var(--success); font-weight: 600; }
.lp-deal-steps .ok::before { background: var(--success); box-shadow: none; }
.lp-deal-steps li { --fx: ph-in-x; }
.lp-deal-steps .msg { --fx: lp-bubble; transform-origin: 0 100%; }
.is-on .lp-deal-steps li::before { animation: ph-click .45s var(--ease-spring) calc(var(--t) + .1s) backwards; }

.lp-auto-feats { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.lp-auto-feats li { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.lp-auto-feats .lp-ic { margin-bottom: var(--sp-2); }
.lp-auto-feats b { font-weight: 600; font-size: var(--fs-lg); }
.lp-auto-feats span:not(.lp-ic) { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Поставщикам ---------- */
.lp-supply { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-12); align-items: center;
  padding: var(--sp-12); border: 1px solid var(--border); border-radius: var(--r-xl) 0 var(--r-xl) var(--r-xl);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  background: var(--surface); }
.lp-supply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.lp-supply-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.lp-supply-list b { display: block; font-weight: 600; font-size: var(--fs-lg); }
.lp-supply-list span:not(.lp-ic) { display: block; margin-top: 4px; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.lp-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-12); align-items: start; }
.lp-faq-wrap .lp-head { position: sticky; top: calc(var(--topbar-h) + var(--sp-8)); margin-bottom: 0; }
.lp-faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--dur); }
.lp-faq details[open] { border-color: color-mix(in srgb, var(--accent-text) 35%, var(--border)); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); font-weight: 600; font-size: var(--fs-lg); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; width: 10px; height: 10px; flex: none; margin-right: 4px; border: solid var(--text-faint); border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur) var(--ease-out), border-color var(--dur); }
.lp-faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--accent-text); }
.lp-faq summary:hover::after { border-color: var(--text); }
.lp-faq details p { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); animation: ph-in .3s var(--ease-out); }

/* ---------- Подключение: анкета партнёра ---------- */
.lp-join { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-12); align-items: start; }
.lp-join-text { position: sticky; top: calc(var(--topbar-h) + var(--sp-8)); }
.lp-next { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.lp-next li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.lp-next li b { display: block; font-weight: 600; }
.lp-next li span:not(.lp-next-n) { color: var(--text-muted); font-size: var(--fs-sm); }
.lp-next-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; font: 700 var(--fs-sm) var(--font-num);
  color: var(--accent-text); background: var(--accent-soft); border-radius: 7px 0 7px 7px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.lp-join-facts { margin: var(--sp-8) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
.lp-join-facts dt { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.lp-join-facts dd { margin: 4px 0 0; font: 600 var(--fs-lg) var(--font-display); letter-spacing: -.015em; }

.lp-apply { position: relative; padding: var(--sp-8); border-radius: var(--r-xl) 0 var(--r-xl) var(--r-xl); box-shadow: var(--shadow-md);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  background: var(--surface); }
/* Тип заявки: три плашки-вкладки над формой */
.lp-kind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-6); }
.lp-kind button { appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: background var(--dur), box-shadow var(--dur), color var(--dur); }
.lp-kind button b { font-weight: 600; color: var(--text); }
.lp-kind button span { font-size: var(--fs-xs); color: var(--text-faint); }
.lp-kind button:hover { box-shadow: inset 0 0 0 1px var(--text-faint); }
.lp-kind button[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.lp-kind button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lp-kind-note { margin: 0 0 var(--sp-5); }
.lp-apply-form { animation: ph-in .4s var(--ease-out); }
.lp-apply-steps { margin: 0 0 var(--sp-6); padding: 0; }
.lp-apply-step { border: 0; margin: 0; padding: 0; min-width: 0; animation: ph-in .4s var(--ease-out); }
.lp-sr, .lp-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-hp { left: -9999px; }
.lp-apply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.lp-span-2 { grid-column: 1 / -1; }
.lp-apply .textarea { min-height: 72px; }
.lp-apply-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }

/* Выбор из вариантов: радио и чекбоксы в виде плашек, сам input прозрачный поверх, чтобы оставался фокус с клавиатуры */
.lp-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lp-pill { position: relative; cursor: pointer; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background var(--dur), box-shadow var(--dur), color var(--dur), transform var(--dur) var(--ease-out); }
.lp-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.lp-pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lp-pill:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text-faint); }
.lp-pill:has(input:checked) { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.lp-pill:has(input[type="checkbox"]:checked) span::before { content: "✓"; margin-right: 6px; color: var(--accent-text); font-weight: 700; }
.lp-pill:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lp-vol .lp-pill { font-family: var(--font-num); font-weight: 600; }
.lp-vol .lp-pill:has(input:checked) { animation: ph-click .35s var(--ease-spring); }
[data-required-group].is-invalid > label { box-shadow: inset 0 0 0 1px var(--danger); }
.lp-consent { align-items: flex-start; line-height: 1.45; }
.lp-consent input { margin-top: 1px; }
.lp-consent.is-invalid input { box-shadow: 0 0 0 1px var(--danger) inset; }

.lp-apply-done { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-10) var(--sp-2); text-align: center;
  animation: ph-in .45s var(--ease-out); outline: none; }
.lp-apply-done h3 { font: 600 var(--fs-2xl)/1.2 var(--font-display); letter-spacing: -.02em; }
.lp-apply-done h3 .nums { color: var(--accent-text); font-size: var(--fs-lg); white-space: nowrap; }
.lp-apply-done p { max-width: 440px; }
.lp-apply-done .lp-cta { justify-content: center; margin-top: var(--sp-2); }

/* ---------- Условия и политика: текст в одну узкую колонку ---------- */
.lp-legal { max-width: 760px; padding-top: var(--sp-10); padding-bottom: var(--sp-12); }
.lp-legal h1 { font: 600 var(--fs-3xl)/1.15 var(--font-display); letter-spacing: -.02em; }
.lp-legal h2 { font: 600 var(--fs-xl)/1.3 var(--font-ui); margin: var(--sp-8) 0 var(--sp-3); }
.lp-legal p, .lp-legal li { color: var(--text-muted); line-height: 1.65; }
.lp-legal p + p { margin-top: var(--sp-3); }
.lp-legal b { color: var(--text); font-weight: 600; }
.lp-legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-legal-ed { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-sm); color: var(--text-faint) !important; }
.lp-legal-req { margin: var(--sp-3) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }

/* ---------- Подвал ---------- */
.lp-foot { border-top: 1px solid var(--border); padding: var(--sp-12) 0 var(--sp-6); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.lp-foot-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: var(--sp-8); }
.lp-foot-brand p { margin-top: var(--sp-3); max-width: 300px; }
.lp-foot-col { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.lp-foot-col .lp-foot-h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-1); }
.lp-foot-col a, .lp-foot-note { color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.lp-foot-col a:hover { color: var(--text); }
.lp-foot-col svg { color: var(--text-faint); }
.lp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-10); padding-top: var(--sp-5);
  border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-faint); }
.lp-foot-bottom a { color: var(--text-faint); }
.lp-foot-bottom a:hover { color: var(--text); }

/* ---------- Заявление ---------- */
.lp-statement { padding: 96px 0 32px; }
.lp-statement-text { max-width: 1000px; font: 600 clamp(28px, 4.6vw, 56px)/1.16 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.lp-statement-text em { font-style: normal; color: var(--accent-text); }

/* ---------- Контакты: Telegram в фирменном цвете, почта — нашей плашкой ---------- */
.btn-tg { color: #fff; background: #229ED9; }
.btn-tg:hover { color: #fff; background: #1B8DC4; }
.btn-tg .bm { width: 18px; height: 18px; }
.lp-contacts { margin-top: var(--sp-8); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(10px); }
.lp-contacts-h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.lp-contacts-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lp-contacts-row .btn { min-width: 0; }
.lp-contacts-row .btn span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lp-mail { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); padding-left: 6px; }
.lp-mail:hover { box-shadow: inset 0 0 0 1px var(--accent-text); }
.lp-mail-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft);
  border-radius: 7px 0 7px 7px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.lp-mail-ic svg.i { width: 16px; height: 16px; }
.lp-news { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.lp-news .bm { width: 18px; height: 18px; color: #2AABEE; }
.lp-news:hover { color: var(--text); text-decoration: none; }
.lp-news svg.i { transition: transform var(--dur) var(--ease-out); }
.lp-news:hover svg.i { transform: translateX(3px); }
.lp-foot-col .lp-foot-tg .bm { width: 16px; height: 16px; color: #2AABEE; }
.lp-foot-col .lp-foot-mail svg { color: var(--accent-text); }

@media (max-width: 960px) {
  .lp-statement { padding-top: 64px; }
  .lp-shelf-in, .lp-specs-in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .lp-spec { margin: 0 auto; }
  /* Трек встаёт вертикально: узлы слева, линия сверху вниз */
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .lp-steps::before, .lp-steps::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .lp-steps::after { transform-origin: top; transform: scaleY(var(--track, 0)); }
  .lp-steps li { padding-left: 80px; min-height: 56px; justify-content: center; }
  .lp-steps .lp-ic { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (max-width: 720px) {
  .lp-top .lp-top-in, .lp-menu > nav { width: calc(100% - 2 * var(--sp-4)); }
  .lp-top .lp-top-in { gap: var(--sp-3); padding-left: 14px; }
  .lp-shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .lp-shelf-item:nth-child(n) { --y: 0px; }
  .lp-shelf-item:nth-child(4n+2), .lp-shelf-item:nth-child(4n+4) { --y: 20px; }
}
@media (max-width: 480px) {
  .lp-contacts-row .btn { width: 100%; justify-content: flex-start; }
  .lp-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 20px; }
  .lp-shelf-item { padding: 10px; }
  .lp-shelf-item .bm { width: 24px; height: 24px; }
  .lp-shelf-item span { font-size: var(--fs-xs); }
  .lp-shelf-item:nth-child(n) { --y: 0px; }
  .lp-shelf-item:nth-child(3n+2) { --y: 18px; }
  .lp-stamp { top: 88px; right: 14px; }
  .lp-stamp b { font-size: 16px; }
}

/* В .cats у app.css своя анимация появления — отключаем, чтобы не было двойной */
.lp-cats > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-on .lp-parcel-route i { animation: none; }
  .lp-steps::after { transition: none; }
  .lp-tiles span { animation: none; }
  /* Без анимации полоски кадры сами не сменяются — только по вкладкам и свайпу */
  .lp-hero-tabs [aria-selected="true"] .lp-hero-bar i { animation: none; }
}

/* ---------- Адаптив ---------- */
/* Шесть пунктов меню в капсуле помещаются от 1280px, уже — бургер */
@media (max-width: 1280px) {
  .lp-nav { display: none; }
  .lp-burger { display: inline-flex; }
}
@media (min-width: 1281px) { .lp-menu { display: none !important; } }

@media (max-width: 1100px) {
  .lp-feats, .lp-auto-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .lp-hero { padding-top: 32px; }
  .lp-hero-tabs { margin-bottom: var(--sp-8); }
  .lp-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .lp-hero-art { min-height: 400px; max-width: 520px; width: 100%; margin: 0 auto; }
  .lp-dev, .lp-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .lp-faq-wrap .lp-head { position: static; }
  .lp-cats { grid-template-columns: minmax(0, 1fr); }
  .lp-cats .cat { min-height: 0; }
  .lp-join { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .lp-join-text { position: static; }
  .lp-supply { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8); }
  .lp-auto-art { max-width: 520px; width: 100%; margin: 0 auto; }
  .lp-foot-in { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr); }
  .lp-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .lp-wrap { padding: 0 var(--sp-4); }
  .lp-hide-m { display: none; }
  .lp-sec { padding: 64px 0; }
  .lp-sec-tight { padding-top: 24px; }
  .lp-head { margin-bottom: var(--sp-6); }
  .lp-sub { font-size: var(--fs-md); }
  .lp-lead { font-size: var(--fs-lg); }
  .lp-feats, .lp-auto-feats { grid-template-columns: minmax(0, 1fr); }
  .lp-auto-feats { margin-top: var(--sp-3); gap: var(--sp-3); }
  /* На телефоне иконка слева от текста, чтобы четыре карточки не растягивали страницу */
  .lp-auto-feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--sp-4); padding: var(--sp-4); }
  .lp-auto-feats .lp-ic { grid-row: span 2; margin: 0; }
  .lp-feat-wide { grid-column: auto; }
  .lp-feat { padding: var(--sp-5); }
  .lp-pre { font-size: 12px; min-height: 0; padding: var(--sp-4); }
  .lp-apply { padding: var(--sp-5); }
  .lp-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}

@media (max-width: 480px) {
  .lp-top .lp-lang { display: none; }
  /* На /rules в шапке ещё кнопка «На главную»: знак без названия, чтобы всё влезло в 360px */
  .lp-top-sub .logo .wm { display: none; }
  .lp-hero { padding: 24px 0 40px; }
  .lp-hero-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .lp-plat-h { width: 100%; }
  .lp-cta .btn-lg { width: 100%; }
  .lp-facts { flex-direction: column; gap: var(--sp-2); }
  .lp-hero-art { min-height: 0; display: block; padding-top: 64px; }
  .lp-tiles { right: -24px; top: 0; }
  .lp-tiles span { width: 72px; height: 94px; font-size: 14px; }
  .lp-order { padding: var(--sp-4); }
  .lp-order-head .lp-swap { display: none; }
  .lp-code-row .code { font-size: var(--fs-xs); padding: 4px 8px; }
  .lp-foot-in { grid-template-columns: minmax(0, 1fr); }
  .lp-apply-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-apply-steps li { font-size: var(--fs-xs); }
  .lp-kind button { padding: 8px 10px; }
  .lp-kind button span { display: none; }
  .lp-supply { padding: var(--sp-6) var(--sp-5); }
  .lp-auto-split { grid-template-columns: minmax(0, 1fr); }
  .lp-auto-art { padding-top: 0; }
  .lp-deal { padding: var(--sp-4); }
  .lp-term-tabs button { padding: 6px 9px; }
}

/* Компактный статус в строке кода */
.st.sm-st { height: 22px; font-size: 11px; padding-right: 9px; }
.st.sm-st .st-ic { width: 15px; height: 15px; }
.st.sm-st .st-ic svg { width: 10px; height: 10px; }
.lp-apply .select.is-invalid, .lp-apply .textarea.is-invalid { box-shadow: 0 0 0 1px var(--danger) inset; }

/* Знак в логотипе без свечения */
.lp .logo .mark { filter: none; }

/* ===== Публичный каталог: /catalog и страницы товаров (без цен — они в кабинете) ===== */
.lp-cats-all { display: flex; justify-content: center; margin-top: var(--sp-8); }
.lp-top .lp-lang.lp-lang-sub { display: inline-flex; } /* на страницах без меню-бургера переключатель виден всегда */
.pub { padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
.pub-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: var(--sp-6); }
.pub-crumbs a { color: var(--text-muted); }
.pub-crumbs a:hover { color: var(--text); }
.pub-crumbs [aria-current] { color: var(--text); }
.pub-head { max-width: 760px; }
.pub-h1 { font: 600 clamp(30px, 4.4vw, 48px)/1.1 var(--font-display); letter-spacing: -.03em; text-wrap: balance; margin-top: var(--sp-3); }
.pub-h2 { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-2xl)/1.2 var(--font-display); letter-spacing: -.02em; }
.pub-h2 svg { color: var(--accent-text); }
.pub-h3 { font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: var(--sp-6) 0 var(--sp-3); }
.pub-count { font: 600 var(--fs-sm)/1 var(--font-num); color: var(--text-faint); padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-full); }
.pub-sec { margin-top: var(--sp-12); }
.pub-sec-sub { margin: var(--sp-2) 0 var(--sp-5); }
.pub .pc { color: var(--text); text-decoration: none; }
.pub .pc .name { font: inherit; font-weight: 600; margin: 0; color: var(--text); }
.pub-hero { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: var(--sp-10); align-items: center; }
.pub-cover.cover { height: 260px; border-radius: var(--r-xl); font-size: 34px; }
.pub-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin: var(--sp-10) 0 0; }
.pub-facts > div { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.pub-facts dt { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.pub-facts dd { margin: 6px 0 0; font-weight: 600; }
.pub-note { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-md); color: var(--text-muted); }
.pub-denoms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.pub-denoms li { padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; }
.pub-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); counter-reset: step; }
.pub-steps li { counter-increment: step; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.pub-steps li::before { content: counter(step, decimal-leading-zero); font: 700 var(--fs-sm) var(--font-num); color: var(--accent-text); }
.pub-steps span { color: var(--text-muted); font-size: var(--fs-sm); }
.pub-all { margin-top: var(--sp-5); }
.pub-band { margin-top: var(--sp-12); padding: var(--sp-8); border-radius: var(--r-xl); border: 1px solid var(--border);
  background: radial-gradient(600px 300px at 100% 0%, var(--accent-soft), transparent 70%), var(--surface);
  display: flex; gap: var(--sp-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pub-band p { color: var(--text-muted); max-width: 640px; margin-top: var(--sp-2); }
.pub-band .lp-cta { margin-top: 0; }
@media (max-width: 760px) {
  .pub-hero { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pub-cover.cover { height: 180px; }
  .pub-steps { grid-template-columns: 1fr; }
  .pub-band { padding: var(--sp-6); }
}