/* Лендинг «ВсеОбрезки» (docs/landing/LANDING_TZ.md, этап 4): статика в корне сайта
   (/, frontend/public/landing/). Формы и аналитики здесь по-прежнему нет — это
   этап 5 (`/api/leads/`, Метрика с баннером согласия), до него на прод не выкатывать
   (LANDING_TZ.md §9 плана). Токены цвета и радиусов — те же значения, что в
   frontend/public/design/kit.css и frontend/src/theme/theme.css; классы свои
   (префикс lp-), в kit.css ничего не добавлено — имена там уже заняты. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/landing/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/landing/fonts/golos-text-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #f5f5f7; --card: #ffffff; --ink: #1d1d1f; --ink2: #6e6e73; --ink3: #86868b;
  --line: #d2d2d7; --fill: #e8e8ed; --accent: #0071e3; --link: #0066cc; --on-accent: #fff;
  --glass: rgba(245, 245, 247, .78); --bad: #d70015; --scrim: rgba(0, 0, 0, .42);
  --ok-bg: #e3f5e7; --ok: #1d7a36; --warn-bg: #fdf0dc; --warn: #a05a00; --mute-bg: #e8e8ed; --mute: #6e6e73;
  --r-card: 18px; --r-field: 12px; --r-pill: 980px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Golos Text", var(--font);
  --steel1: #c9ced6; --steel2: #9aa3af; --steel3: #e6e9ee;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #000; --card: #1c1c1e; --ink: #f5f5f7; --ink2: #a1a1a6; --ink3: #86868b;
    --line: #38383a; --fill: #2c2c2e; --accent: #0a84ff; --link: #2997ff; --glass: rgba(22, 22, 23, .78);
    --bad: #e0342b; --ok-bg: #12351d; --ok: #63d17f; --warn-bg: #3a2a0d; --warn: #ffb340; --mute-bg: #2c2c2e; --mute: #a1a1a6;
    --steel1: #4a4f57; --steel2: #2f343b; --steel3: #5d646e;
  }
}
:root[data-theme="dark"] {
  --ground: #000; --card: #1c1c1e; --ink: #f5f5f7; --ink2: #a1a1a6; --ink3: #86868b;
  --line: #38383a; --fill: #2c2c2e; --accent: #0a84ff; --link: #2997ff; --glass: rgba(22, 22, 23, .78);
  --bad: #e0342b; --ok-bg: #12351d; --ok: #63d17f; --warn-bg: #3a2a0d; --warn: #ffb340; --mute-bg: #2c2c2e; --mute: #a1a1a6;
  --steel1: #4a4f57; --steel2: #2f343b; --steel3: #5d646e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--ground); color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.5 var(--font); letter-spacing: -.022em;
  overflow-x: hidden;
}
@media (min-width: 768px) { body { font-size: 15px; letter-spacing: -.016em; } }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.lp-container { max-width: 1080px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .lp-container { padding-inline: 30px; } }
/* Правила видимости .lp-hidden-desktop/.lp-hidden-mobile — в самом конце файла:
   при равной специфичности со .lp-btn{display:inline-flex} и подобными должны
   побеждать они, а не порядок объявления. */

/* ---------- шапка ---------- */
.lp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 56px;
  display: flex; align-items: center;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
@media (min-width: 768px) { .lp-header { height: 64px; } }
.lp-header-inner { display: flex; align-items: center; gap: 16px; width: 100%; }
.lp-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); flex: none; }
.lp-brand svg { width: 24px; height: 24px; flex: none; fill: var(--accent); }
.lp-brand span { font: 600 17px/1 var(--font-display); letter-spacing: -.02em; }
.lp-nav-center { display: none; }
@media (min-width: 768px) {
  .lp-nav-center { display: flex; gap: 28px; margin-inline: auto; }
  .lp-nav-center a { color: var(--ink2); font-size: 14px; }
  .lp-nav-center a:hover { color: var(--ink); }
}
.lp-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* На < 360 px (маленький Android) логотип+«ВсеОбрезки» и тема+«Вход»+гамбургер вместе
   не помещались в контейнер — страница уезжала вбок на несколько пикселей (найдено
   проверкой scrollWidth на 320 px, владелец, 27.09.2026). Кнопки — не ниже 44 px
   (правило KIT.md), сжимаем только горизонтальные отступы и зазоры. */
@media (max-width: 359px) {
  .lp-header-inner { gap: 6px; }
  .lp-header-actions { gap: 2px; }
  .lp-header-actions > a.lp-hidden-desktop { padding: 0 6px; }
}
.lp-icon-btn {
  width: 44px; height: 44px; border: 0; background: none; color: var(--ink);
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
}
.lp-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ---------- кнопки ---------- */
.lp-btn {
  height: 44px; padding: 0 22px; border-radius: var(--r-pill); border: 0; font: 400 16px/1 var(--font);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; text-decoration: none;
}
@media (min-width: 768px) { .lp-btn { height: 40px; font-size: 14px; padding: 0 20px; } }
.lp-btn-primary { background: var(--accent); color: var(--on-accent); }
.lp-btn-outline { background: transparent; color: var(--link); border: 1.5px solid var(--accent); }
.lp-btn-link { background: none; color: var(--link); padding: 0; height: auto; }
.lp-btn-lg { height: 50px; font-size: 17px; padding: 0 28px; }
@media (min-width: 768px) { .lp-btn-lg { height: 48px; font-size: 16px; } }

/* ---------- выдвижное меню (телефон) ---------- */
.lp-menu {
  position: fixed; inset: 0; z-index: 50; background: var(--ground);
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  transform: translateX(100%); transition: transform .25s ease;
}
.lp-menu.on { transform: translateX(0); }
.lp-menu-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.lp-menu a.lp-menu-link {
  height: 56px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px;
  color: var(--ink); font-size: 19px; font-weight: 600;
}
.lp-menu a.lp-menu-link:active { background: var(--fill); }
.lp-menu .lp-btn { margin-top: 16px; }

/* ---------- закреплённая полоса «Попробовать» + «Написать» (телефон) ----------
   На < 768 px отдельной плавающей кнопки нет — «Написать» встроена в эту же полосу
   (владелец, 27.09.2026): [«Попробовать» flex:1] + [круглая 46 px справа]. Высота
   полосы — переменная --lp-bar-h, чтобы её не пересчитывать в трёх местах руками
   (сама полоса, отступ подвала под ней, положение cookie-баннера и панели «Написать»
   над ней). Реальное значение ставит JS (landing.js, ResizeObserver на полосе) —
   здесь только запасное число на случай отключённого JS. */
:root { --lp-bar-h: 77px; }
.lp-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transform: translateY(100%); transition: transform .25s ease;
}
.lp-sticky-cta.on { transform: translateY(0); }
.lp-sticky-cta .lp-btn { flex: 1; }
@media (min-width: 768px) { .lp-sticky-cta { display: none; } }
/* контенту внизу страницы — запас на высоту полосы, чтобы подвал не уходил под неё */
@media (max-width: 767px) { body { padding-bottom: calc(var(--lp-bar-h) + env(safe-area-inset-bottom)); } }

/* ---------- секции ---------- */
.lp-section { padding: 72px 0; }
@media (min-width: 768px) { .lp-section { padding: 120px 0; } }
.lp-section-head { max-width: 640px; margin-bottom: 40px; }
.lp-section-head.lp-center { margin-inline: auto; text-align: center; }
.lp-eyebrow { color: var(--accent); font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.lp-h2 { font-size: 30px; line-height: 1.1; }
@media (min-width: 768px) { .lp-h2 { font-size: 40px; } }
.lp-lede { color: var(--ink2); font-size: 17px; line-height: 1.5; margin: 14px 0 0; }
@media (min-width: 768px) { .lp-lede { font-size: 19px; } }
.lp-section-alt { background: var(--card); }

/* ---------- герой ---------- */
.lp-hero { padding-top: calc(56px + 48px); padding-bottom: 56px; position: relative; overflow-x: hidden; }
@media (min-width: 768px) { .lp-hero { padding-top: calc(64px + 88px); padding-bottom: 40px; } }
.lp-hero-text { text-align: center; max-width: 720px; margin-inline: auto; }
.lp-hero h1 { font-size: clamp(34px, 8vw, 56px); line-height: 1.05; text-wrap: balance; }
.lp-hero .lp-lede { max-width: 560px; margin-inline: auto; }
.lp-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
.lp-hero-actions .lp-btn { width: 100%; }
@media (min-width: 480px) { .lp-hero-actions { flex-direction: row; justify-content: center; align-items: center; } .lp-hero-actions .lp-btn { width: auto; } }
.lp-trust { color: var(--ink3); font-size: 13px; margin: 22px 0 0; }
.lp-hero-shot { margin-top: 48px; }
.lp-hero-shot-inner { margin-inline: auto; }
.lp-hero-shot .lp-browser-frame { display: none; }
/* Телефон (390:844, высокий) кладём в ту же грид-ячейку, что окно каталога (более
   низкое и широкое) — так .lp-hero-shot-inner сама берёт высоту большего из двух и
   никогда не обрезает и не перекрывает строку доверия над собой. Раньше телефон стоял
   position:absolute с bottom:0 внутри инера с фиксированным padding-bottom — при таком
   высоком телефоне (реалистичная рамка) он не помещался и вылезал вверх, на строку
   доверия «Данные в России · …» на 1280–1440 px (владелец, 27.09.2026). */
@media (min-width: 700px) {
  .lp-hero-shot-inner { display: grid; width: min(680px, 82vw); }
  .lp-hero-shot .lp-browser-frame,
  .lp-hero-shot .lp-phone-frame { grid-area: 1 / 1; }
  .lp-hero-shot .lp-browser-frame { display: block; width: 100%; align-self: start; }
  .lp-hero-shot .lp-phone-frame { justify-self: end; align-self: end; margin: 0 -32px 0 0; }
}

/* ---------- боли (6.2) ---------- */
.lp-pain-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .lp-pain-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .lp-pain-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-pain-card { background: var(--card); border-radius: var(--r-card); padding: 22px; }
.lp-pain-card p { margin: 0; font-size: 17px; line-height: 1.4; }
.lp-pain-note { margin-top: 28px; color: var(--ink2); font-size: 15px; line-height: 1.5; max-width: 62ch; }

/* ---------- карусель — общий компонент (6.3 «Как это работает», 6.6 «Каждому своё») ----------
   Прокрутка своя (scroll-snap), свайп на телефоне работает сам; стрелки и точки —
   только управление для десктопа, где свайпа нет. Точки кликабельны. */
.lp-carousel { position: relative; }
.lp-carousel-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px;
  scroll-padding-left: 16px;
}
/* scroll-padding — иначе браузер сам подскролит на старте ровно на паддинг (снап
   игнорирует box-model padding без него), и первый слайд обрежется слева, а справа
   вылезет край второго (проверено на 390 px). */
@media (min-width: 768px) { .lp-carousel-track { margin-inline: 0; padding-inline: 0; scroll-padding-left: 0; } }
.lp-carousel-track::-webkit-scrollbar { display: none; }
.lp-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.lp-carousel-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink);
  display: none; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.lp-carousel-arrow:disabled { opacity: .35; cursor: default; }
.lp-carousel-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
@media (min-width: 768px) { .lp-carousel-arrow { display: flex; } }
.lp-carousel-dots { display: flex; align-items: center; gap: 8px; }
.lp-carousel-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--line); cursor: pointer; }
.lp-carousel-dot::before { content: ""; position: absolute; inset: -14px; } /* зона нажатия ближе к 44 px — точки вспомогательные, основной ввод на телефоне свайпом */
.lp-carousel-dot[aria-current="true"] { width: 22px; background: var(--accent); }

/* --- как это работает: слайд = шаг, ширина трека = один слайд --- */
.lp-slide-step { flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 24px; align-items: center; }
@media (min-width: 700px) {
  .lp-slide-step { grid-template-columns: 1fr 1fr; gap: 48px; }
  .lp-slide-step.lp-step-rev .lp-step-media { order: 2; }
  .lp-slide-step.lp-step-rev .lp-step-body { order: 1; }
}
.lp-step-icon-badge {
  width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.lp-step-icon-badge svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.75; }
.lp-step-eyebrow { display: block; font-size: 13px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .03em; }
.lp-step-body h3 { font-size: 22px; margin: 6px 0 8px; }
.lp-step-body p { color: var(--ink2); font-size: 16px; line-height: 1.5; margin: 0; }
.lp-step-media { display: flex; justify-content: center; }
.lp-step-icon {
  width: 220px; aspect-ratio: 675/1455; max-width: 100%; border-radius: 26px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
}
.lp-step-icon svg { width: 64px; height: 64px; stroke: var(--ink3); fill: none; stroke-width: 1.5; }

/* ---------- калькулятор (6.4) ---------- */
.lp-calc-fact { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.lp-calc-fact b { font: 600 44px/1 var(--font-display); color: var(--accent); }
.lp-calc-fact span { color: var(--ink2); font-size: 15px; max-width: 46ch; }
.lp-calc { display: grid; grid-template-columns: 1fr; gap: 28px; background: var(--card); border-radius: var(--r-card); padding: 24px; }
@media (min-width: 768px) { .lp-calc { grid-template-columns: 1.1fr 1fr; padding: 40px; gap: 40px; } }
.lp-calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; grid-column: span 2; }
@media (min-width: 420px) { .lp-field.lp-field-half { grid-column: span 1; } }
.lp-field label { font-size: 13px; color: var(--ink2); }
.lp-field input {
  height: 48px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--ground);
  color: var(--ink); font: inherit; font-size: 16px; padding: 0 14px; width: 100%;
}
@media (min-width: 768px) { .lp-field input { height: 40px; font-size: 14px; } }
.lp-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-field-hint { font-size: 12px; color: var(--ink3); }
.lp-calc-out { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.lp-calc-result { background: var(--ground); border-radius: 14px; padding: 20px; }
.lp-calc-result .lp-out-month { display: block; font: 600 40px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-calc-result .lp-out-year { display: block; margin-top: 4px; color: var(--ink2); font-size: 15px; font-variant-numeric: tabular-nums; }
.lp-calc-assumption { font-size: 13px; color: var(--ink3); line-height: 1.5; margin: 0; }
.lp-calc-note { font-size: 13px; color: var(--ink2); line-height: 1.5; margin: 0; }
.lp-calc-out .lp-btn { align-self: flex-start; }

/* ---------- возможности (6.5) ---------- */
.lp-features { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .lp-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .lp-features { grid-template-columns: repeat(3, 1fr); } }
.lp-feature { background: var(--card); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lp-feature-icon {
  width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.lp-feature-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.75; }
.lp-feature h3 { font-size: 17px; font-family: var(--font); font-weight: 600; letter-spacing: 0; margin: 0; }
.lp-feature p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.5; }
.lp-features-more { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- роли (6.6) ---------- */
.lp-slide-role {
  flex: 0 0 min(320px, 82vw); scroll-snap-align: start; background: var(--card);
  border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 4px;
}
.lp-slide-role b { font: 600 17px/1.3 var(--font); }
.lp-slide-role .lp-role-pain { display: block; margin-top: 6px; color: var(--ink3); font-size: 14px; line-height: 1.5; font-style: italic; }
.lp-slide-role .lp-role-got { display: block; margin-top: 6px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.lp-slide-role .lp-role-label { display: block; font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-top: 16px; }
.lp-slide-role .lp-role-label:first-of-type { margin-top: 18px; }

/* ---------- сравнение с 1С (6.7) ---------- */
.lp-compare { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.lp-compare th, .lp-compare td { text-align: left; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
.lp-compare th { color: var(--ink2); font-weight: 600; font-size: 13px; }
.lp-compare tr:last-child td { border-bottom: 0; }
.lp-compare-wrap { overflow-x: auto; }
.lp-compare-note { margin-top: 20px; color: var(--ink2); font-size: 15px; line-height: 1.5; max-width: 68ch; }

/* ---------- для кого (6.8) ---------- */
.lp-industries { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.lp-industries li { background: var(--fill); border-radius: var(--r-pill); padding: 8px 16px; font-size: 14px; }
.lp-checklist { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .lp-checklist { grid-template-columns: 1fr 1fr; } }
.lp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.lp-checklist svg { width: 20px; height: 20px; stroke: var(--ok); fill: none; stroke-width: 2; flex: none; margin-top: 1px; }

/* ---------- честно о границах (6.10) ---------- */
.lp-limits { background: var(--fill); border-radius: var(--r-card); padding: 28px; }
.lp-limits ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
.lp-limits-foot { margin: 18px 0 0; font-size: 14px; color: var(--ink2); }

/* ---------- пилот (6.11) — таймлайн: линия + иконка + срок + пояснение ----------
   На телефоне линия вертикальная слева, на десктопе — горизонтальная через центр
   значков; линия — псевдоэлемент самого списка, значки лежат на ней сверху. */
.lp-timeline { position: relative; display: flex; flex-direction: column; gap: 28px; padding-left: 44px; margin: 0; list-style: none; }
.lp-timeline::before {
  content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--line);
}
@media (min-width: 860px) {
  .lp-timeline { flex-direction: row; gap: 0; padding-left: 0; padding-top: 40px; }
  .lp-timeline::before { left: 32px; right: 32px; top: 16px; bottom: auto; height: 2px; width: auto; }
  .lp-tl-step { flex: 1; padding-inline: 10px; text-align: center; }
}
.lp-tl-step { position: relative; }
.lp-tl-icon {
  position: absolute; left: -44px; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  z-index: 1; flex: none;
}
.lp-tl-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; }
@media (min-width: 860px) { .lp-tl-icon { position: relative; left: auto; top: auto; margin: 0 auto 16px; } }
.lp-tl-tag { display: block; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 4px; }
.lp-tl-step h3 { font-size: 17px; font-family: var(--font); font-weight: 600; letter-spacing: 0; margin: 0 0 4px; }
.lp-tl-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }

/* ---------- вопросы (6.12) ---------- */
.lp-faq { display: flex; flex-direction: column; gap: 10px; }
.lp-faq details { background: var(--card); border-radius: 14px; padding: 4px 20px; }
.lp-faq summary {
  cursor: pointer; list-style: none; padding: 16px 24px 16px 0; font-size: 16px; font-weight: 600;
  position: relative;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px;
  border-right: 1.6px solid var(--ink3); border-bottom: 1.6px solid var(--ink3);
  transform: translateY(-65%) rotate(45deg); transition: transform .2s ease;
}
.lp-faq details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.lp-faq p { margin: 0 0 16px; color: var(--ink2); font-size: 15px; line-height: 1.55; }

/* ---------- форма заявки (6.13) ---------- */
.lp-form-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .lp-form-wrap { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.lp-form { display: flex; flex-direction: column; gap: 16px; }
.lp-form input, .lp-form textarea {
  height: 48px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--ground);
  color: var(--ink); font: inherit; font-size: 16px; padding: 0 14px; width: 100%;
}
@media (min-width: 768px) { .lp-form input, .lp-form textarea { height: 44px; font-size: 15px; } }
.lp-form input:focus, .lp-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.lp-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.lp-form .lp-btn { align-self: flex-start; margin-top: 4px; }
.lp-form-error { margin: 0; font-size: 14px; line-height: 1.4; color: var(--bad); }
/* Поле-ловушка для ботов: вне экрана, а не display:none — часть ботов пропускает скрытые поля. */
.lp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-form-done { display: none; flex-direction: column; gap: 16px; padding: 32px 0; }
.lp-form-done.on { display: flex; }
.lp-form.on { display: none; }
.lp-form-done h3 { font-size: 22px; }
.lp-form-done p { margin: 0; color: var(--ink2); }
.lp-placeholder { color: var(--ink3); font-style: normal; }

/* ---------- контакты — круглые значки (владелец, 27.09.2026) ---------- */
.lp-contact-icons { display: flex; flex-wrap: nowrap; gap: 10px; }
.lp-contact-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--fill); color: var(--ink2);
  display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s, color .15s;
}
.lp-contact-icon svg { width: 22px; height: 22px; fill: currentColor; }
.lp-contact-icon:hover { background: color-mix(in srgb, var(--accent) 16%, var(--fill)); color: var(--accent); }
/* значки платформ в подвале (яблоко/андроид/монитор) — тот же круглый значок, но
   контурный, как раньше в убранной секции «Установите на устройство» */
.lp-contact-icon-outline svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.lp-footer-app-caption { margin: 10px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.4; max-width: 22ch; }
/* Телефон — акцентной строкой: крупнее и жирнее подписей рядом (владелец, 27.09.2026) */
/* .lp-footer-cols a.… — иначе .lp-footer-cols a{font-size:14px} ниже побеждает по
   специфичности (0,1,1 > 0,1,0), и акцентная строка не становится крупнее. */
.lp-footer-cols a.lp-footer-phone { display: block; margin-top: 12px; font-size: 21px; font-weight: 600; color: var(--ink); }

/* ---------- подвал ---------- */
.lp-footer { padding: 56px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.lp-footer-top { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .lp-footer-top { flex-direction: row; justify-content: space-between; } }
.lp-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 480px) { .lp-footer-cols { grid-template-columns: repeat(3, auto); gap: 40px; } }
/* На < 360 px колонка ýже трёх значков подряд (44+10+44+10+44=152 px) — вместо того,
   чтобы уводить страницу вбок (найдено проверкой scrollWidth на 320 px), значки
   переносятся на вторую строку; на всех проверенных ширинах ≥ 390 — как и просили,
   в одну линию (владелец, 27.09.2026). */
@media (max-width: 359px) { .lp-footer .lp-contact-icons { flex-wrap: wrap; } }
/* > , не просто div — иначе селектор задевает и вложенный .lp-contact-icons (тоже div)
   и его column побеждает flex-row того компонента по специфичности by (0,1,1 > 0,1,0):
   значки контактов и приложения вставали в подвале столбиком (владелец, 27.09.2026). */
.lp-footer-cols > div { display: flex; flex-direction: column; gap: 10px; }
.lp-footer-cols span.lp-footer-h { font-size: 13px; color: var(--ink3); margin-bottom: 2px; }
.lp-footer-cols a { color: var(--ink2); font-size: 14px; }
.lp-footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; color: var(--ink3); font-size: 13px; }
@media (min-width: 768px) { .lp-footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- проявление при прокрутке ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
  .lp-reveal.lp-in { opacity: 1; transform: none; }
}

/* никакой горизонтальной прокрутки странице ни при каких условиях */
html, body { max-width: 100%; }

/* ---------- шапка: «Вход»/«Попробовать»/гамбургер — только своей ширине ----------
   Через дочерний селектор от .lp-header-actions, чтобы специфичность (0,1,1) была
   выше, чем у .lp-btn{display:inline-flex} и .lp-icon-btn{display:grid} (0,1,0), и
   победа не зависела от порядка объявления; при этом каждому элементу возвращаем
   его собственный display, а не общий block. */
.lp-header-actions > a.lp-hidden-mobile { display: none; }
.lp-header-actions > a.lp-hidden-desktop { display: inline-flex; }
.lp-header-actions > button.lp-hidden-desktop { display: grid; }
@media (min-width: 768px) {
  .lp-header-actions > a.lp-hidden-mobile { display: inline-flex; }
  .lp-header-actions > a.lp-hidden-desktop,
  .lp-header-actions > button.lp-hidden-desktop { display: none; }
}

/* ================= Доработки по правкам владельца (переделка макета) ================= */

/* ---------- лента логотипов «Нас выбирают» (над «Как начать») ----------
   В бою рендерится только когда есть хотя бы один клиент, давший разрешение
   назвать себя (ТЗ §6.11); до тех пор блока нет вовсе, как и на этой странице
   ниже сказано в HTML-комментарии рядом с разметкой. */
.lp-logos { padding: 8px 0 56px; }
@media (min-width: 768px) { .lp-logos { padding-bottom: 72px; } }
.lp-logos-head { text-align: center; font-size: 13px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 22px; }
.lp-logos-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lp-logos-track { display: flex; gap: 40px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .lp-logos-track { animation: lpLogosScroll 26s linear infinite; }
  .lp-logos-track-wrap:hover .lp-logos-track,
  .lp-logos-track-wrap:focus-within .lp-logos-track { animation-play-state: paused; }
}
.lp-logo-tile {
  flex: none; height: 40px; padding: 0 22px; border-radius: 10px; background: var(--fill); color: var(--ink3);
  display: flex; align-items: center; justify-content: center; font-size: 13px; white-space: nowrap; filter: grayscale(1);
}
@keyframes lpLogosScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Настоящий логотип клиента: одноцветный PNG, оттенок — от темы. В тёмной теме
   инвертируем в светлый: второй файл не нужен. Высота по глазу — как у текста строки
   доверия ×2, на телефоне меньше. */
.lp-logo-img { flex: none; display: block; height: 30px; width: auto; filter: grayscale(1) opacity(.7); }
@media (min-width: 768px) { .lp-logo-img { height: 38px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-logo-img { filter: invert(1) grayscale(1) opacity(.8); }
}
:root[data-theme="dark"] .lp-logo-img { filter: invert(1) grayscale(1) opacity(.8); }
/* Меньше пяти логотипов — строка стоит: без анимации, без затухания по краям, по центру. */
.lp-logos-static .lp-logos-track { animation: none !important; width: auto; justify-content: center; flex-wrap: wrap; gap: 32px 48px; }
.lp-logos-static .lp-logos-track-wrap { -webkit-mask-image: none; mask-image: none; }

/* ---------- модалка установки приложения: вкладки и шаги ---------- */
.lp-install-tabs { display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.lp-install-tabs::-webkit-scrollbar { display: none; }
.lp-install-tab {
  flex: none; height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: var(--fill);
  color: var(--ink2); font: inherit; font-size: 14px; cursor: pointer;
}
.lp-install-tab[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.lp-install-panel { display: none; }
.lp-install-panel.on { display: block; }
.lp-install-panel ol { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.lp-install-panel > .lp-btn { width: 100%; }

/* ---------- модальное окно заявки/установки (Sheet по KIT.md) ---------- */
.lp-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.lp-modal.open { display: block; }
.lp-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); border: 0; padding: 0; }
.lp-modal-panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); color: var(--ink);
  border-radius: 22px 22px 0 0; max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .28s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.lp-modal.open .lp-modal-panel { transform: translateY(0); }
.lp-modal-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px auto 0; flex: none; }
.lp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex: none; gap: 12px; }
.lp-modal-head h3 { font-size: 20px; }
.lp-modal-body { padding: 0 20px 28px; overflow-y: auto; }
.lp-modal-calc-line { display: none; background: var(--ground); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 4px; }
.lp-modal-calc-line.on { display: block; }
@media (min-width: 768px) {
  .lp-modal-panel {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(480px, 90vw); border-radius: 14px; max-height: 82vh;
    transform: translate(-50%, -42%); padding-bottom: 0;
  }
  .lp-modal.open .lp-modal-panel { transform: translate(-50%, -50%); }
  .lp-modal-handle { display: none; }
  .lp-modal-head { padding: 18px 24px; }
  .lp-modal-body { padding: 0 24px 26px; }
}
@media (prefers-reduced-motion: reduce) { .lp-modal-panel { transition: none; } }
body.lp-modal-lock { overflow: hidden; }

/* ---------- финальный CTA (конец страницы, вместо инлайновой формы) ---------- */
.lp-final-cta { text-align: center; }
.lp-final-cta .lp-section-head { margin-inline: auto; }
.lp-final-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }

/* ---------- строка CTA после блока (боли, возможности) ---------- */
.lp-cta-row { margin-top: 28px; text-align: center; }

/* ---------- «Написать»: на телефоне — кнопка внутри полосы, на десктопе — плавающая
   (владелец, 27.09.2026). Панель #fab-panel общая на оба триггера, стоит отдельно
   фиксированным блоком; JS выставляет ей нужный отступ снизу под текущий брейкпоинт
   через --lp-fab-panel-bottom, чтобы не считать высоту полосы и баннера в CSS. */
.lp-fab-inline { display: none; }
@media (max-width: 767px) {
  .lp-fab-inline { display: flex; width: 46px; height: 46px; flex: none; box-shadow: none; }
  .lp-fab-inline svg { width: 22px; height: 22px; }
}
.lp-fab-wrap { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; transition: opacity .2s; }
.lp-fab-wrap.lp-fab-hide { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .lp-fab-wrap { display: none; } }
.lp-fab {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); cursor: pointer;
}
.lp-fab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lp-fab-panel {
  position: fixed; right: 16px; bottom: var(--lp-fab-panel-bottom, 84px); z-index: 46;
  width: 232px; background: var(--card); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22); padding: 8px; display: none; flex-direction: column; gap: 2px;
}
.lp-fab-panel.on { display: flex; }
.lp-fab-panel > button {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: 10px; border: 0;
  background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; width: 100%;
}
.lp-fab-panel > button:hover { background: var(--fill); }
.lp-fab-panel > button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; flex: none; color: var(--ink3); }
.lp-fab-panel .lp-contact-icons { margin-bottom: 4px; justify-content: space-between; }

/* ---------- cookie-баннер (§9) ----------
   Без молчаливого согласия: явные «Принять» и «Только необходимые». На телефоне —
   компактный (текст в 1–2 строки 13 px, высота ≤ ~120 px), во всю ширину над
   закреплённой полосой; JS держит --lp-cookie-h с её высотой, пока она видна, чтобы
   панель «Написать» знала, на сколько подняться выше, если её тоже открыли. */
.lp-cookie {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--lp-bar-h) + 8px + env(safe-area-inset-bottom)); z-index: 65;
  background: var(--card); border-radius: 16px; box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
  padding: 14px; display: none; flex-direction: column; gap: 10px;
}
.lp-cookie.on { display: flex; }
.lp-cookie p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink2); }
.lp-cookie-actions { display: flex; gap: 8px; }
.lp-cookie-actions .lp-btn { flex: 1; height: 40px; font-size: 13px; padding: 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  .lp-cookie { transform: translateY(12px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
  .lp-cookie.on { transform: none; opacity: 1; }
}
@media (min-width: 768px) {
  .lp-cookie { left: 24px; right: auto; bottom: 24px; width: 420px; padding: 20px; }
  .lp-cookie-actions .lp-btn { height: 40px; font-size: 14px; }
}

/* ================= iPhone-рамка (CSS, без картинок и логотипа) ================= */
.lp-phone-frame {
  position: relative; width: 220px; padding: 10px; background: #17171b;
  border-radius: 31px; margin-inline: auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 0 0 2px rgba(0, 0, 0, .55), 0 30px 60px -20px rgba(0, 0, 0, .4);
}
@media (min-width: 768px) { .lp-phone-frame { width: 250px; border-radius: 35px; } }
.lp-phone-frame::before {
  content: ""; position: absolute; left: -3px; top: 92px; width: 3px; height: 24px; border-radius: 2px 0 0 2px;
  background: #0b0b0d; box-shadow: 0 36px 0 0 #0b0b0d, 0 88px 0 0 #0b0b0d;
}
.lp-phone-frame::after {
  content: ""; position: absolute; right: -3px; top: 108px; width: 3px; height: 42px; border-radius: 0 2px 2px 0;
  background: #0b0b0d;
}
.lp-phone-island {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 34%; height: 18px;
  background: #000; border-radius: 999px; z-index: 4;
}
.lp-phone-status {
  position: absolute; top: 18px; left: 0; right: 0; height: 16px; z-index: 3; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; color: var(--ink);
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; pointer-events: none;
}
.lp-phone-status svg { width: 46px; height: 11px; fill: currentColor; }
.lp-phone-frame .lp-ui-phone,
.lp-phone-frame .lp-ui-cut { border-radius: 24px; overflow: hidden; background: var(--ground); aspect-ratio: 390 / 844; }
@media (min-width: 768px) { .lp-phone-frame .lp-ui-phone, .lp-phone-frame .lp-ui-cut { border-radius: 27px; } }

/* ================= окно macOS (CSS) ================= */
.lp-browser-frame { border-radius: 14px; overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, .3); }
.lp-browser-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--fill); }
.lp-browser-bar i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lp-browser-bar i:nth-child(1) { background: #ff5f57; }
.lp-browser-bar i:nth-child(2) { background: #febc2e; }
.lp-browser-bar i:nth-child(3) { background: #28c840; }
.lp-browser-addr {
  flex: 1; height: 21px; margin-left: 8px; border-radius: 6px; background: var(--ground); color: var(--ink3);
  display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; max-width: 240px;
}
.lp-browser-addr svg { width: 10px; height: 10px; flex: none; stroke: var(--ink3); fill: none; stroke-width: 1.8; }

/* ================= мини-экраны вёрсткой (lp-ui-*) — вместо картинок ==================
   Кабинет оператора — 1:1 с frontend/public/design/telefon.html (эталон, раздел
   «Оператор и кладовщик») и docs/design/KIT.md (кабинет оператора): закреплённая шапка
   56 px, прокручиваемая середина, закреплённый футер с круглой кнопкой 56 px — те же
   пропорции и токены, переведённые в cqw (владелец, 27.09.2026: «не такой вид
   приложения, как в гайде»). Не классами кита (там заняты .op, .btn и т.п.) — свои
   имена с префиксом lp-ui-, цвета и радиусы — те же токены, что у всей страницы,
   поэтому тема светлая/тёмная сама. Шаги хранятся в data-step строкой (main/photo/
   sizes/marker/catalog/orders), а не числом — для читаемости разметки и CSS. */
.lp-ui-phone {
  container-type: inline-size; display: flex; flex-direction: column; position: relative;
  padding-top: 34px; font-family: var(--font); height: 100%;
}
/* ---- шапка: своя строка на каждый вид экрана, видна только своя (по data-step) ---- */
.lp-ui-top { flex: none; border-bottom: 1px solid var(--line); }
.lp-ui-top-row {
  display: none; align-items: center; justify-content: space-between; gap: 2cqw;
  min-height: 14.4cqw; padding: 0 4cqw;
}
.lp-ui-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lp-ui-who b { font-size: 4.6cqw; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ui-who span { font-size: 3.6cqw; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ui-steplabel { flex: none; font-size: 3.6cqw; color: var(--ink2); }
.lp-ui-bell { position: relative; flex: none; width: 11.3cqw; height: 11.3cqw; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.lp-ui-bell svg { width: 5.6cqw; height: 5.6cqw; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lp-ui-bell-dot {
  position: absolute; top: 1.8cqw; right: 1.6cqw; min-width: 4.1cqw; height: 4.1cqw; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 2.8cqw; line-height: 4.1cqw; text-align: center;
}
.lp-ui-list-title { font-size: 5.4cqw; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
/* ---- полоса шагов визарда — видна только на шагах фото/размеры/номер ---- */
.lp-ui-progress { display: none; gap: 1cqw; padding: 2cqw 4cqw 0; flex: none; }
.lp-ui-progress i { flex: 1; height: 1cqw; border-radius: 2px; background: var(--fill); }
.lp-ui-progress i.on { background: var(--accent); }
/* ---- прокручиваемая середина: одна видимая панель на шаг, остальные — display:none ---- */
.lp-ui-body { position: relative; flex: 1; overflow: hidden; }
.lp-ui-panel {
  position: absolute; inset: 0; padding: 3.6cqw 4cqw; display: none; flex-direction: column; gap: 2.4cqw;
  opacity: 0; transform: translateY(10px);
}
@media (prefers-reduced-motion: no-preference) { .lp-ui-panel { transition: opacity .5s ease, transform .5s ease; } }
.lp-ui-sec { font-size: 5.2cqw; font-weight: 600; color: var(--ink); letter-spacing: -.005em; margin: 0; }
/* ---- меню главного экрана: те же большие пилюли, что в кабинете оператора ---- */
.lp-ui-menu { display: flex; flex-direction: column; gap: 2.8cqw; }
.lp-ui-btn {
  flex: none; height: 14.4cqw; border-radius: 999px; background: var(--fill); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 1.5cqw; font-size: 4.4cqw; font-weight: 500;
  text-align: center;
}
.lp-ui-btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.lp-ui-btn-tint { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--link); }
.lp-ui-actions { display: flex; flex-direction: column; gap: 2.4cqw; margin-top: auto; }
/* ---- подсказка (banner.info у кита) ---- */
.lp-ui-hint {
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3.1cqw; padding: 2.6cqw 3.6cqw;
  display: flex; flex-direction: column; gap: .6cqw;
}
.lp-ui-hint b { font-size: 3.8cqw; color: var(--link); }
.lp-ui-hint span { font-size: 3.3cqw; color: var(--link); opacity: .85; line-height: 1.3; }
.lp-ui-hint-soft { background: var(--fill); }
.lp-ui-hint-soft span { color: var(--ink2); }
/* ---- фото и номер на куске ---- */
.lp-ui-photo {
  aspect-ratio: 3 / 2; flex: none; border-radius: 4.6cqw;
  background: linear-gradient(200deg, var(--steel1), var(--steel3) 40%, var(--steel2));
  display: flex; align-items: center; justify-content: center; position: relative;
}
.lp-ui-photo svg { width: 12cqw; height: 12cqw; stroke: rgba(0, 0, 0, .35); fill: none; stroke-width: 1.5; }
.lp-ui-marker-num {
  position: absolute; font: 700 6cqw/1 -apple-system, sans-serif; color: rgba(20, 20, 20, .82);
  transform: rotate(-6deg); letter-spacing: .02em;
}
.lp-ui-field { background: var(--card); border: 1px solid var(--line); border-radius: 3.1cqw; padding: 2.4cqw 3.2cqw; }
.lp-ui-field span { display: block; font-size: 3cqw; color: var(--ink3); margin-bottom: .8cqw; }
.lp-ui-field b { font-size: 4.2cqw; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ---- поиск и фильтры каталога ---- */
.lp-ui-search {
  height: 12.3cqw; border-radius: 999px; background: var(--fill); color: var(--ink3); display: flex; align-items: center;
  gap: 2cqw; padding: 0 3.6cqw; font-size: 3.6cqw; flex: none;
}
.lp-ui-search svg { width: 5.1cqw; height: 5.1cqw; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.lp-ui-chips { display: flex; gap: 1.5cqw; flex: none; }
.lp-ui-chip {
  height: 9.2cqw; padding: 0 3cqw; border-radius: 999px; background: var(--fill); color: var(--ink2);
  display: flex; align-items: center; gap: 1.2cqw; font-size: 3.3cqw; flex: none;
}
.lp-ui-chip::after { content: ""; width: 1.5cqw; height: 1.5cqw; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: rotate(45deg) translateY(-15%); }
/* ---- карточка остатка (фото 16:9 + статус + номер) ---- */
.lp-ui-card { flex: none; background: var(--card); border-radius: 4.6cqw; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.lp-ui-card-photo {
  aspect-ratio: 16 / 9; position: relative;
  background: linear-gradient(200deg, var(--steel1), var(--steel3) 40%, var(--steel2));
}
.lp-ui-card-photo.none { background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--ink3); font-size: 3.3cqw; }
.lp-ui-card-dots { position: absolute; left: 50%; bottom: 2.6cqw; transform: translateX(-50%); display: flex; gap: 1cqw; }
.lp-ui-card-dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.lp-ui-card-dots i.on { background: #fff; }
.lp-ui-card-meta { padding: 2.8cqw 3.6cqw; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1cqw; }
.lp-ui-card-meta b { flex-basis: 100%; font-size: 4.6cqw; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-ui-card-date { font-size: 3.3cqw; color: var(--ink3); }
.lp-ui-badge {
  height: 6.2cqw; padding: 0 2.6cqw; border-radius: 999px; font-size: 3.1cqw; font-weight: 600;
  display: flex; align-items: center; background: var(--mute-bg); color: var(--mute);
}
.lp-ui-badge-ok { background: var(--ok-bg); color: var(--ok); }
.lp-ui-badge-warn { background: var(--warn-bg); color: var(--warn); }
/* ---- карточка наряда ---- */
.lp-ui-task { flex: none; background: var(--card); border-radius: 4.6cqw; padding: 4.1cqw; display: flex; flex-direction: column; gap: 1.5cqw; }
.lp-ui-task-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5cqw; }
.lp-ui-task-head b { font-size: 6.15cqw; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-ui-task p { margin: 0; font-size: 3.6cqw; color: var(--ink); }
.lp-ui-task p.lp-ui-task-sub { color: var(--ink2); font-size: 3.4cqw; }
.lp-ui-task .lp-ui-actions { margin-top: 1cqw; }
/* ---- футер: своя кнопка на каждый вид экрана (домой / выйти), видна только своя ---- */
.lp-ui-foot { flex: none; display: flex; justify-content: center; align-items: center; padding: 2cqw 4cqw; border-top: 1px solid var(--line); }
.lp-ui-homeb {
  display: none; width: 14.4cqw; height: 14.4cqw; border-radius: 50%; background: var(--accent); color: #fff;
  align-items: center; justify-content: center;
}
.lp-ui-homeb svg { width: 6.7cqw; height: 6.7cqw; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lp-ui-homeb-red { background: var(--bad); }
/* ---- переключение шагов: своя строка шапки/футера и своя панель на data-step ---- */
.lp-ui-phone[data-step="main"] [data-top="main"],
.lp-ui-phone[data-step="photo"] [data-top="wizard"],
.lp-ui-phone[data-step="sizes"] [data-top="wizard"],
.lp-ui-phone[data-step="marker"] [data-top="wizard"],
.lp-ui-phone[data-step="catalog"] [data-top="list"],
.lp-ui-phone[data-step="orders"] [data-top="list"] { display: flex; }
.lp-ui-phone[data-step="photo"] .lp-ui-progress,
.lp-ui-phone[data-step="sizes"] .lp-ui-progress,
.lp-ui-phone[data-step="marker"] .lp-ui-progress { display: flex; }
.lp-ui-phone[data-step="main"] [data-foot="logout"],
.lp-ui-phone[data-step="photo"] [data-foot="home"],
.lp-ui-phone[data-step="sizes"] [data-foot="home"],
.lp-ui-phone[data-step="marker"] [data-foot="home"],
.lp-ui-phone[data-step="catalog"] [data-foot="home"],
.lp-ui-phone[data-step="orders"] [data-foot="home"] { display: flex; }
.lp-ui-panel[data-panel] { display: none; }
.lp-ui-phone[data-step="main"] [data-panel="main"],
.lp-ui-phone[data-step="photo"] [data-panel="photo"],
.lp-ui-phone[data-step="sizes"] [data-panel="sizes"],
.lp-ui-phone[data-step="marker"] [data-panel="marker"],
.lp-ui-phone[data-step="catalog"] [data-panel="catalog"],
.lp-ui-phone[data-step="orders"] [data-panel="orders"] { display: flex; opacity: 1; transform: none; }
/* ---- «нажатие» на «Завести остаток» перед уходом в шаг «Фото» (владелец, 27.09.2026) ---- */
.lp-ui-btn.lp-ui-pressed { transform: scale(.96); filter: brightness(.92); }
@media (prefers-reduced-motion: no-preference) { .lp-ui-btn { transition: transform .15s ease, filter .15s ease; } }

/* ================= десктоп-каталог вёрсткой (lp-ui-desktop) ================= */
.lp-ui-desktop { display: flex; aspect-ratio: 1240 / 621; background: var(--ground); font-family: var(--font); }
.lp-ui-d-side { width: 27%; background: var(--card); display: flex; flex-direction: column; padding: 1.6% 1.4%; flex: none; }
.lp-ui-d-brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; }
.lp-ui-d-brand svg { width: 18px; height: 18px; fill: var(--accent); flex: none; }
.lp-ui-d-brand span { font: 600 13px/1 var(--font-display); color: var(--ink); }
.lp-ui-d-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lp-ui-d-nav span { display: block; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--ink2); }
.lp-ui-d-nav span.on { background: var(--fill); color: var(--ink); font-weight: 600; }
.lp-ui-d-user { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); }
.lp-ui-d-user i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none;
  display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font); font-style: normal;
}
.lp-ui-d-user div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lp-ui-d-user b { font-size: 11px; color: var(--ink); font-weight: 600; }
.lp-ui-d-user span { font-size: 10px; color: var(--ink3); }
.lp-ui-d-main { flex: 1; padding: 1.8% 2.4%; display: flex; flex-direction: column; min-width: 0; }
.lp-ui-d-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lp-ui-d-head b { font: 600 22px/1 var(--font-display); color: var(--ink); }
.lp-ui-d-head em {
  font-style: normal; height: 26px; padding: 0 14px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-size: 12px; font-weight: 600; display: flex; align-items: center;
}
.lp-ui-d-chips { display: flex; gap: 6px; margin-bottom: 10px; }
.lp-ui-d-chips span { height: 24px; padding: 0 12px; border-radius: 999px; background: var(--fill); color: var(--ink2); font-size: 11px; display: flex; align-items: center; }
.lp-ui-d-chips span.on { background: var(--ink); color: var(--ground); }
.lp-ui-d-table { flex: 1; background: var(--card); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.lp-ui-d-row { display: grid; grid-template-columns: 1.1fr 1fr .8fr .7fr 1fr; gap: 8px; padding: 7px 14px; align-items: center; border-bottom: 1px solid var(--line); }
.lp-ui-d-row:last-child { border-bottom: 0; }
.lp-ui-d-row.head { color: var(--ink3); font-size: 10px; border-bottom: 1px solid var(--line); }
.lp-ui-d-row span { font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ui-d-row .lp-ui-d-badge { justify-self: start; height: 18px; padding: 0 8px; border-radius: 999px; font-size: 10px; display: flex; align-items: center; background: var(--ok-bg); color: var(--ok); }
.lp-ui-d-row .lp-ui-d-badge.mute { background: var(--mute-bg); color: var(--mute); }
.lp-ui-d-row .lp-ui-d-badge.warn { background: var(--warn-bg); color: var(--warn); }

/* ================= шаг 1 «Отрезали» — анимация раскроя (SVG+CSS, без картинок) =====
   Место специально того же размера рамки, что у соседних шагов — сюда встанет
   фото/видео раскроя из цеха клиента, когда появится разрешение (ТЗ §6.3). */
.lp-ui-cut { width: 100%; height: 100%; background: var(--ground); }
.lp-ui-cut-svg { width: 100%; height: 100%; display: block; }
.lp-ui-cut-sheet { fill: var(--steel3); }
.lp-ui-cut-hatch { fill: url(#lpCutHatch); opacity: .5; }
.lp-ui-cut-part { fill: var(--steel3); }
.lp-ui-cut-path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .55; }
.lp-ui-cut-head { fill: #ffb020; filter: drop-shadow(0 0 4px #ffb020); offset-path: path("M100,413 L100,250 L190,250"); offset-distance: 0%; opacity: 0; }
.lp-ui-cut-sparks { opacity: 0; }
.lp-ui-cut-sparks circle { fill: #ffab3d; transform-origin: 100px 250px; }
.lp-ui-cut-remainder { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.lp-ui-cut-badge rect { fill: var(--accent); }
.lp-ui-cut-badge text { fill: var(--on-accent); font: 700 11px var(--font); text-anchor: middle; }
/* у .lp-ui-cut-badge позиция задана атрибутом transform="translate(26,60)" в самом
   SVG — CSS-свойство transform его полностью заменяет, а не складывает, поэтому базовый
   сдвиг (26px,60px) повторён здесь во всех состояниях, включая анимацию ниже. */
.lp-ui-cut-badge { opacity: 0; transform: translate(26px, 100px); }
/* финальный кадр по умолчанию (и при prefers-reduced-motion): обрезок уже вырезан */
.lp-ui-cut-part { opacity: 0; }
.lp-ui-cut-remainder { opacity: 1; stroke-dashoffset: 0; }
.lp-ui-cut-badge { opacity: 1; transform: translate(26px, 94px); }
@media (prefers-reduced-motion: no-preference) {
  .lp-ui-cut.lp-anim .lp-ui-cut-path { animation: lpCutLine 7s linear infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-head { animation: lpCutHead 7s linear infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-sparks { animation: lpCutSparksGroup 7s linear infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-sparks circle { animation: lpCutSpark .7s ease-out infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-part { animation: lpCutPart 7s ease-in-out infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-remainder { animation: lpCutRemainder 7s linear infinite; }
  .lp-ui-cut.lp-anim .lp-ui-cut-badge { animation: lpCutBadge 7s ease-out infinite; }
}
@keyframes lpCutLine { 0%, 3% { stroke-dashoffset: 100; opacity: .55; } 40% { stroke-dashoffset: 0; } 62% { opacity: .55; } 100% { stroke-dashoffset: 0; opacity: .55; } }
@keyframes lpCutHead { 0%, 3% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 40% { offset-distance: 100%; opacity: 1; } 44% { opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes lpCutSparksGroup { 0%, 4% { opacity: 0; } 6% { opacity: 1; } 37% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lpCutSpark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 10px), var(--dy, 16px)) scale(.3); }
}
@keyframes lpCutPart {
  0%, 48% { opacity: 1; transform: none; }
  62% { opacity: 0; transform: translate(6px, -14px) rotate(4deg); }
  100% { opacity: 0; transform: translate(6px, -14px) rotate(4deg); }
}
@keyframes lpCutRemainder {
  0%, 60% { stroke-dashoffset: 100; opacity: 0; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes lpCutBadge {
  0%, 74% { opacity: 0; transform: translate(26px, 100px); }
  92% { opacity: 1; transform: translate(26px, 94px); }
  100% { opacity: 1; transform: translate(26px, 94px); }
}

/* ---------- защита декоративного текста от копирования (владелец, 27.09.2026, §7 ТЗ) ----
   Только оформление — не форма, не ответы, не контакты, не реквизиты; без перехвата
   copy/contextmenu/selectstart в JS, это просто CSS-подсказка браузеру. */
h1, h2, h3, .lp-eyebrow, .lp-trust,
.lp-pain-card, .lp-feature, .lp-slide-role, .lp-timeline, .lp-logos,
.lp-ui-phone, .lp-ui-desktop, .lp-ui-cut, .lp-phone-frame, .lp-browser-frame,
.lp-btn, .lp-carousel-arrow, .lp-carousel-dot, .lp-install-icons, .lp-compare th {
  user-select: none; -webkit-user-select: none;
}

/* ---------- пульсация плавающей кнопки «Написать» (владелец, 27.09.2026) ----------
   Кольцо — фон кнопки, гаснет к концу волны и держит паузу до следующей; выключается
   JS-классом lp-pulse (первый клик — sessionStorage, панель открыта) и явно не должно
   ловить клики (pointer-events:none) и растягивать страницу (внутри .lp-fab-wrap). */
.lp-fab { position: relative; }
.lp-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  opacity: 0; pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-fab.lp-pulse::before { animation: lpFabPulse 2.2s ease-out infinite; }
}
@keyframes lpFabPulse { 0% { transform: scale(1); opacity: .5; } 55% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }