/*
    Публичная главная конструктора.

    Загружается только на ней — вместе с app.css, откуда берётся палитра, типографика и тёмная тема. Отдельным
    файлом, а не строками в app.css: консоль тянет свои стили на каждом экране, и класть в них разметку
    страницы, которую вошедший человек не увидит ни разу, значит платить за неё всем остальным.

    Ни одного внешнего шрифта и ни одного обращения к CDN — как и во всём проекте: страница обязана открыться
    и выглядеть собой на машине, у которой наружу ничего не пущено.
*/

/* This sheet is loaded only by the public landing/pricing shell. Its longer navigation
   and two actions need the existing disclosure before the shared 720px breakpoint. */
@media (max-width: 960px) {
    .ds-top { gap: var(--ds-space-3); padding-inline: var(--ds-space-4); }
    .ds-top .ds-nav { display: none; }
    .ds-top .ds-burger { display: block; }
}

/* The primary action is repeated in the page body; keep sign-in and all sections reachable. */
@media (max-width: 640px) {
    .ds-top .ds-actions .ds-cta { display: none; }
}

/* SB#264, живой проход на 320: марка, планка приложений, тема, «Войти» и «Разделы» с зазором 12 давали
   351 при 288 доступных, и телефон раздувал вьюпорт до 355 — вся страница уезжала вбок. На 375 та же
   планка читалась обрубком «Прил…». Подпись планки уходит в доступное имя, на экране остаётся кнопка
   44×44 с галкой, зазор — 8. */
@media (max-width: 420px) {
    .ds-top { gap: var(--ds-space-2); }
    .ds-top .ds-switch-current {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    .ds-top .ds-switch-trigger { min-width: 44px; justify-content: center; }
}

.lp {
    /*
        Перенос длинных слов объявлен один раз на корне и наследуется вниз — то же правило, что у
        опубликованных сайтов. anywhere, а не break-word: последний не уменьшает минимальную ширину
        содержимого, и заголовок во флекс-колонке всё равно получал бы ширину самого длинного слова.
    */
    overflow-wrap: anywhere;

    /* Колонка и крупный радиус — платформенные: страница обязана стоять на той же сетке, что тарифы и
       сайт организации, а карточка обязана быть скруглена так же, как карточка консоли. */
    --lp-max: var(--ds-page);
    --lp-radius: var(--ds-radius-lg);

    /*
        Подложка полос и свечение первого экрана — оба замешаны из акцента и фона страницы, а не выписаны
        литералами.

        Три пары шестнадцатеричных цветов (светлая, тёмная, и то же ещё раз для свечения) переставали
        сходиться с акцентом на первой же его смене, а замечали это по скриншоту. Замес обеих тем делает
        одно правило: доля акцента мала, и на тёмном фоне подложка получается тёмной сама — светлая полоса
        на тёмной консоли читается как ошибка, а не как акцент.
    */
    --lp-tint: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-bg));

    background: radial-gradient(1100px 460px at 82% -8%,
        color-mix(in srgb, var(--ds-accent) 16%, var(--ds-bg)) 0%, transparent 64%) no-repeat;
}

.lp-wrap { max-width: var(--lp-max); margin-inline: auto; padding-inline: 22px; }

/*
    Шапка, ссылка обхода, бургер и кнопки — не здесь.

    Они общие у платформы и лежат в _content/Center.Design/design.css под именами ds-*: одна полоса высотой
    56 на продающей главной, на тарифах, на сайте организации и на всех страницах входа. Здесь остаётся
    только то, что есть у этой страницы и больше нигде.
*/

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

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
    max-width: var(--lp-max);
    margin-inline: auto;
    padding: 46px 22px 66px;
}

.lp-eyebrow {
    margin: 0 0 10px;
    color: var(--app-accent);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
    Шкала заголовков — clamp, а не фиксированный кегль.

    Заголовок первого экрана на 360 пикселях при постоянных 52 занимал бы четыре строки и вылезал за край;
    нижняя граница подобрана так, чтобы самое длинное слово помещалось в строку на узком экране.
*/
.lp-hero h1 {
    margin: 0;
    font-size: clamp(30px, 6.2vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.lp-lead { margin: 18px 0 0; max-width: 34em; color: var(--app-muted); font-size: 17px; line-height: 1.62; }

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.lp-note { margin: 16px 0 0; max-width: 34em; color: var(--app-muted); font-size: 13.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------------------------------------
   Витрина первого экрана: макет сайта и телефон рядом. Всё нарисовано стилями — ни одной картинки.
   --------------------------------------------------------------------------------------------------- */

.lp-shot { position: relative; min-width: 0; padding-bottom: 26px; }

.lp-shot-window {
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--ds-shadow-lg);
    overflow: hidden;
}

.lp-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-line);
}

.lp-shot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-line); }

.lp-shot-url {
    margin-inline-start: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--app-panel);
    color: var(--app-muted);
    font-size: 11px;
}

.lp-shot-page { display: flex; flex-direction: column; gap: 14px; padding: 16px; }

.lp-shot-nav { display: flex; align-items: center; gap: 8px; }
/* Логотип слева, пункты меню справа: отступ отдан логотипу, а не первому пункту, — иначе правило пришлось
   бы привязывать к порядку элементов, который меняется от одной правки разметки. */
.lp-shot-logo { width: 34px; height: 10px; margin-inline-end: auto; border-radius: 4px; background: var(--app-accent); }
.lp-shot-item { width: 26px; height: 7px; border-radius: 4px; background: var(--app-line); }

.lp-shot-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 26px 18px;
    border-radius: 12px;
    background: var(--lp-tint);
}

.lp-shot-h { width: 68%; height: 13px; border-radius: 5px; background: var(--app-text); opacity: .78; }
.lp-shot-p { width: 46%; height: 8px; border-radius: 5px; background: var(--app-muted); opacity: .5; }
.lp-shot-cta { width: 92px; height: 20px; border-radius: 7px; background: var(--app-accent); }

.lp-shot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-shot-card { height: 58px; border-radius: 10px; background: var(--app-bg); border: 1px solid var(--app-line); }

.lp-shot-phone {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: 92px;
    padding: 7px 6px;
    background: var(--app-text);
    border-radius: 14px;
    box-shadow: var(--ds-shadow-lg);
}

.lp-shot-phone-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 8px;
    background: var(--app-panel);
    border-radius: 9px;
}

.lp-shot-phone-screen .lp-shot-card { width: 100%; height: 22px; }

/* ---------------------------------------------------------------------------------------------------
   Полосы и заголовки разделов
   --------------------------------------------------------------------------------------------------- */

.lp-band { padding: 62px 0; background: var(--lp-tint); }
.lp-section { padding: 62px 22px; }

.lp h2 { margin: 0; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; letter-spacing: -0.02em; }
.lp h3 { margin: 0; font-size: 17px; line-height: 1.35; }

.lp-head { max-width: 40em; margin-bottom: 30px; }
.lp-head p { margin: 12px 0 0; color: var(--app-muted); font-size: 15.5px; line-height: 1.62; }

/* ---------------------------------------------------------------------------------------------------
   Три шага
   --------------------------------------------------------------------------------------------------- */

/*
    min(240px, 100%) вместо 240px, и так во всех сетках страницы.

    Голая нижняя граница в minmax() — это минимальная ширина колонки, которую сетка обязана выдержать: на
    экране уже неё колонка не сжимается, а вылезает наружу вместе с горизонтальной прокруткой всей страницы.
    min() снимает границу ровно тогда, когда места меньше неё.
*/
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 22px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: lp-step;
}

.lp-steps li { counter-increment: lp-step; min-width: 0; }

/* Номер шага — из счётчика, а не из разметки: список остаётся списком, а цифра не читается голосовым
   чтением как отдельное слово посреди заголовка. */
.lp-steps li::before {
    content: counter(lp-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 9px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 700;
    font-size: 14px;
}

.lp-steps p { margin: 8px 0 0; color: var(--app-muted); font-size: 14.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------------------------------------
   Шаблоны
   --------------------------------------------------------------------------------------------------- */

.lp-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 18px; }

/* Ячейку сетки занимает обёртка появления, а карточка тянется во всю её высоту: без этого в ряду с
   разной длиной подписи карточки кончались на разной высоте. */
.lp-templates > * { min-width: 0; }
.lp-templates > * > .lp-template { height: 100%; }

/*
    Высота у карточки, а не одна рамка: светлая панель на светлом фоне, отличающаяся только линией в
    пиксель, на телефоне сливается со страницей и не читается как отдельный предмет.

    Ступень md, а не sm: замер под карточкой с sm даёт 231 при фоне 232, то есть тени нет вовсе — sm в
    общей шкале рассчитан на хайрлайн вроде подложки липкой шапки. Подробнее — в app.css сайта организации.

    Наведение здесь ЗАКОННО, и это изменение по существу: карточка стала ссылкой. Закон блоков — «подниматься
    имеет право только нажимаемое» — запрещал ей подъём ровно потому, что нажать по ней было нельзя; теперь
    можно, и подъём с тенью на ступень выше перестал быть ложным обещанием. Переход объявлен на самом
    элементе, а не в :hover: иначе возврат происходит скачком.
*/
.lp-template {
    display: block;
    min-width: 0;
    padding: 14px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--ds-shadow-md);
    color: var(--app-text);
    transition: box-shadow var(--ds-t-move) var(--ds-ease), transform var(--ds-t-move) var(--ds-ease-out);
}

.lp-template:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); text-decoration: none; }

/* Просадка на нажатие — единственный отклик, который вообще может увидеть палец: :hover на телефоне не
   наступает, и карточка без просадки отвечает на касание ничем. */
.lp-template:active { transform: translateY(1px); }

.lp-template h3 { color: var(--app-text); }
.lp-template p { margin: 6px 0 0; color: var(--app-muted); font-size: 13.5px; line-height: 1.55; }

/* Миниатюра шаблона — три полосы в его палитре, как в галерее выбора шаблона внутри консоли: узнаваемо
   одно и то же место, и видно, что сайты различаются не только названием. */
.lp-template-shot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 160px;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 11px;
    background: var(--tpl-soft);
    overflow: hidden;
}

.lp-template-band { display: block; border-radius: 5px; }
.lp-template-shot-cover { padding: 0; }
.lp-template-shot-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-template-shot-cover .lp-template-band { display: none; }
.lp-template-band-1 { height: 34%; background: var(--tpl-main); }
.lp-template-band-2 { height: 22%; background: var(--tpl-soft); filter: brightness(.94); }
.lp-template-band-3 { height: 44%; background: var(--app-panel); }

.lp-tone-rose { --tpl-main: #d16b8a; --tpl-soft: #fbeef2; --tpl-soft-dark: #2b1f25; }
.lp-tone-amber { --tpl-main: #c98a3c; --tpl-soft: #fbf2e6; --tpl-soft-dark: #2b2419; }
.lp-tone-indigo { --tpl-main: #5b62c9; --tpl-soft: #eceefb; --tpl-soft-dark: #1f2135; }
.lp-tone-slate { --tpl-main: #4a5568; --tpl-soft: #eceef2; --tpl-soft-dark: #1f232b; }
.lp-tone-teal { --tpl-main: #2f8f83; --tpl-soft: #e7f4f2; --tpl-soft-dark: #17272a; }
.lp-tone-violet { --tpl-main: #7d5bc9; --tpl-soft: #f1ecfb; --tpl-soft-dark: #24203a; }

/* Тёмная тема гасит подложки миниатюр: те же светлые прямоугольники на тёмной странице светятся, а
   цветная полоса остаётся узнаваемой и на приглушённой. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp-tone-rose { --tpl-soft: var(--tpl-soft-dark); }
    :root:not([data-theme="light"]) .lp-tone-amber { --tpl-soft: var(--tpl-soft-dark); }
    :root:not([data-theme="light"]) .lp-tone-indigo { --tpl-soft: var(--tpl-soft-dark); }
    :root:not([data-theme="light"]) .lp-tone-slate { --tpl-soft: var(--tpl-soft-dark); }
    :root:not([data-theme="light"]) .lp-tone-teal { --tpl-soft: var(--tpl-soft-dark); }
    :root:not([data-theme="light"]) .lp-tone-violet { --tpl-soft: var(--tpl-soft-dark); }
}

/* Explicit visitor choice wins over the operating system preference. */
:root[data-theme="dark"] .lp-tone-rose { --tpl-soft: var(--tpl-soft-dark); }
:root[data-theme="dark"] .lp-tone-amber { --tpl-soft: var(--tpl-soft-dark); }
:root[data-theme="dark"] .lp-tone-indigo { --tpl-soft: var(--tpl-soft-dark); }
:root[data-theme="dark"] .lp-tone-slate { --tpl-soft: var(--tpl-soft-dark); }
:root[data-theme="dark"] .lp-tone-teal { --tpl-soft: var(--tpl-soft-dark); }
:root[data-theme="dark"] .lp-tone-violet { --tpl-soft: var(--tpl-soft-dark); }

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

.lp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }

.lp-feature {
    min-width: 0;
    padding: 20px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--ds-shadow-md);
}

.lp-feature p { margin: 9px 0 0; color: var(--app-muted); font-size: 14.5px; line-height: 1.6; }

/* Незаконченное — не спрятано и не выделено ярче готового: пунктир говорит «этого пока нет» без того,
   чтобы становиться самой заметной карточкой на странице. Высоты у него нет по той же причине: поднятая
   карточка — самая заметная, а обещанное не должно выглядеть весомее сделанного. */
.lp-feature-soon { border-style: dashed; background: transparent; box-shadow: none; }

.lp-tag {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--app-notice-soft);
    color: var(--app-notice-text);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------------
   Магазин и 1С
   --------------------------------------------------------------------------------------------------- */

.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: center; }

.lp-split-text p { margin: 14px 0 0; color: var(--app-muted); font-size: 15.5px; line-height: 1.62; }
.lp-split-text h2 { margin-bottom: 4px; }

.lp-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 14px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
}

.lp-row {
    display: grid;
    /* Третья колонка — по слову «Остаток» в шапке, а не по полоске-заглушке: в 54px капительный
       заголовок с разрядкой складывался в столбик по буквам (приёмка). */
    grid-template-columns: minmax(0, 1fr) 64px 72px;
    align-items: center;
    gap: 12px;
    padding: 11px 6px;
    border-bottom: 1px solid var(--app-line);
}

.lp-row:last-child { border-bottom: 0; }

.lp-row span { height: 8px; border-radius: 4px; background: var(--app-line); }
.lp-row span:nth-child(1) { width: 100%; }
.lp-row span:nth-child(2) { width: 46px; }

.lp-row .lp-ok { width: 30px; background: var(--app-success); opacity: .55; }
.lp-row .lp-low { width: 18px; background: var(--app-warning); opacity: .65; }

/* Шапка таблицы — единственная строка с настоящими словами; ниже идут заглушки, и правило для них здесь
   отменяется. Порядок важен: правила равной силы, побеждает последнее. */
.lp-row-head { color: var(--app-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.lp-rows .lp-row-head span { height: auto; width: auto; background: none; white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------------
   Тарифы

   Страница /pricing живёт в той же оболочке и в том же листе, что лендинг: до этого она одевалась в стили
   консоли (.sb-console, .sb-plan-*) — то есть человек, пришедший по ссылке из письма, попадал в интерфейс
   приложения, которым не пользуется.

   Колонка узкая и по центру: тариф один, и растянутая во всю ширину карточка выглядит как таблица, у
   которой отняли соседей.
   --------------------------------------------------------------------------------------------------- */

.lp-plans { max-width: 660px; margin-inline: auto; padding: 46px 22px 72px; }
.lp-plans-head { text-align: center; margin-bottom: 30px; }
.lp-plans-head h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); line-height: 1.14; letter-spacing: -0.025em; }
.lp-plans-head .lp-lead { margin-inline: auto; }

.lp-plan {
    padding: 26px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--ds-shadow-md);
}

.lp-plan h2 { font-size: 21px; }
.lp-plan-price { margin: 4px 0 0; color: var(--app-accent); font-size: 17px; font-weight: 650; }

.lp-plan-list { margin: 20px 0 0; padding: 0; list-style: none; }

.lp-plan-list li {
    position: relative;
    padding: 0 0 0 26px;
    margin-bottom: 10px;
    font-size: 14.5px;
    line-height: 1.55;
}

/* Галочка псевдоэлементом, а не символом в тексте: голосовое чтение не должно произносить её как слово. */
.lp-plan-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: .5em;
    width: 9px;
    height: 5px;
    border-inline-start: 2px solid var(--app-accent);
    border-bottom: 2px solid var(--app-accent);
    rotate: -45deg;
}

.lp-plan .lp-actions { margin-top: 24px; }
.lp-plan-note { margin: 14px 0 0; color: var(--app-muted); font-size: 13px; }

.lp-plans-more { margin-top: 34px; text-align: center; }
/* Одна ступень с «Пробным» выше: два соседних h2 страницы на 21 и 20 читались как опечатка шкалы (SB#263). */
.lp-plans-more h2 { font-size: 21px; }
.lp-plans-more p { max-width: 40em; margin: 10px auto 0; color: var(--app-muted); font-size: 14.5px; line-height: 1.6; }
.lp-plans-more .lp-actions { justify-content: center; }

/* ---------------------------------------------------------------------------------------------------
   Призыв и подвал
   --------------------------------------------------------------------------------------------------- */

.lp-cta { padding: 66px 0; background: var(--lp-tint); text-align: center; }
.lp-cta p { max-width: 44em; margin: 14px auto 0; color: var(--app-muted); font-size: 16px; line-height: 1.62; }
.lp-cta .lp-actions { justify-content: center; }

.lp-foot { padding: 22px 0 26px; border-top: 1px solid var(--app-line); }

.lp-foot-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.lp-foot-brand { color: var(--app-muted); font-size: 13px; }
.lp-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/*
    Ссылка подвала была ростом в строку — 20 пикселей, и это цель, в которую промахиваются.

    Шапку платформы с её 44 подвал не покрывает: общий компонент кончается на шапке, а подвал у каждого
    приложения свой. Боковое поле скомпенсировано отрицательным margin: цель растёт, а ряд не разъезжается.
*/
.lp-foot-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 6px;
    margin-inline: -6px;
    border-radius: 8px;
    color: var(--app-muted);
    font-size: 13px;
}

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

/* Плашка сборки прижата к правому краю подвала — там же, где она стоит в консоли. Класс общий: плашку
   печатает один компонент платформы, а не копия на каждое приложение. */
.lp-foot .ds-stamp { margin-inline-start: auto; }

/* ---------------------------------------------------------------------------------------------------
   Телефон

   Замеры на 360 и 390: в одну колонку раскладываются первый экран и разворот про магазин, витрина
   уезжает под текст, а накладной телефон убирается совсем — на узком экране он налезал на карточки и был
   единственным источником горизонтальной прокрутки.
   --------------------------------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 32px; }
    .lp-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .lp-shot-phone { display: none; }
}

@media (max-width: 720px) {
    .lp-wrap { padding-inline: 16px; }
    .lp-hero { padding: 26px 16px 44px; }
    .lp-section { padding: 44px 16px; }
    .lp-band, .lp-cta { padding: 44px 0; }
    .lp-plans { padding: 30px 16px 48px; }
    .lp-plan { padding: 20px 16px; }

    /* Кнопки в колонку и во всю ширину: две рядом на 360 не помещались, и вторая переносилась под первую
       с висящим справа пустым местом. */
    .lp-actions { flex-direction: column; align-items: stretch; }
    .lp-actions .ds-btn { width: 100%; }

    /* Палец — не курсор. Подвал в общую шапку не входит и свои 44 получает здесь. */
    .lp-foot-nav a { min-height: 44px; }

    .lp-lead { font-size: 16px; }
    .lp-foot-inner { flex-direction: column; align-items: flex-start; }
    .lp-foot .ds-stamp { margin-inline-start: 0; }
}