/*
 * Лендинг продукта — база и вёрстка блоков (спека 2026-10-25-consultations-books §7).
 * Цвета — только палитра сайта (prod-architecture.md «Палитра сайта»).
 * Шрифты и размеры — с живого jataka.expert (тема lptheme, main.min.css):
 *   текст — Noto Sans 300, 16px/22px (на телефоне 14px/21px), цвет #413e59;
 *   заголовки — Philosopher 400: 41/44, 28/34, 24/30, 20/26 (на телефоне крупный — 35px);
 *   кнопка — Philosopher 18px, прямые углы. Контейнер — до 970px, поля 15px.
 * Сначала телефон (от 360px), шире — @media.
 * Это база и вёрстка блоков для всех стилей: landing-<стиль>.css (задачи 14, 18; у site — landing-hub.css)
 * подключаются поверх, переопределяют токены --ls-* на body.ls-style-<стиль> и добавляют свои правила.
 * Сама по себе (без файла стиля) база не показывается.
 */
:root {
    --ls-text: #413e59;
    --ls-gold: #cba783;
    --ls-btn: #a67c52;
    --ls-btn-hover: #8f6a43;
    --ls-head-bg: #faf6f1;
    --ls-page: #f3f5f9;
    --ls-card: #ffffff;
    --ls-second: #7a7090;
    --ls-meta: #9b8c7a;
    --ls-line: #e4e0ef;
    --ls-serif: 'Philosopher', Georgia, 'Times New Roman', serif;
    --ls-sans: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ls-head: var(--ls-text);     /* цвет заголовков */
    --ls-field: #ffffff;           /* фон полей анкеты */
    --ls-btn-fg: #ffffff;          /* текст кнопки */
    --ls-r: 0;                     /* скругление полей */
    --ls-btn-r: 0;                 /* скругление кнопки */
    --ls-end: 48px;                /* воздух под последним блоком (кнопкой); шире телефона — 72px */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ls-body {
    margin: 0;
    min-width: 320px;
    background: var(--ls-page);
    color: var(--ls-text);
    font-family: var(--ls-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
}

.ls-main { padding: 0 0 max(var(--ls-end), env(safe-area-inset-bottom)); }
.ls-form { margin: 0; }

.ls-wrap {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Заголовки ─────────────────────────────────────────── */
.ls-title, .ls-h2 {
    font-family: var(--ls-serif);
    font-weight: 400;
    color: var(--ls-head);
    margin: 0 0 12px;
}
.ls-title { font-size: 28px; line-height: 34px; }
.ls-h2 { font-size: 20px; line-height: 26px; }

/* ── Первый экран ──────────────────────────────────────── */
.ls-hero {
    background: var(--ls-head-bg);
    border-bottom: 1px solid var(--ls-line);
    padding: 24px 0;
}
.ls-hero__in { display: flex; flex-direction: column; gap: 20px; }
.ls-hero__media { text-align: center; }
.ls-hero__img {
    display: inline-block;
    max-width: 100%;
    max-height: 420px;
    height: auto;
    box-shadow: 0 0 0 1px var(--ls-gold);
}
.ls-lead { margin: 0 0 12px; color: var(--ls-second); font-size: 16px; line-height: 22px; }
.ls-facts { list-style: none; margin: 0; padding: 0; }
.ls-facts li {
    position: relative;
    padding: 4px 0 4px 18px;
    color: var(--ls-meta);
}
.ls-facts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--ls-gold);
    transform: rotate(45deg);
}

/* ── Разделы содержания ────────────────────────────────── */
.ls-sec { padding: 24px 0 0; }
.ls-sec p { margin: 0 0 12px; }
.ls-list { margin: 0; padding: 0 0 0 20px; }
.ls-list li { margin: 0 0 6px; }
.ls-list li::marker { color: var(--ls-gold); }

.ls-quote {
    margin: 0;
    padding: 16px 16px 16px 20px;
    background: var(--ls-card);
    border-left: 2px solid var(--ls-gold);
    font-family: var(--ls-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 26px;
}
.ls-quote p:last-of-type { margin-bottom: 0; }
.ls-quote__cite {
    display: block;
    margin-top: 10px;
    font-family: var(--ls-sans);
    font-style: normal;
    font-size: 14px;
    color: var(--ls-meta);
}

.ls-figure { margin: 0; text-align: center; }
.ls-figure img { max-width: 100%; height: auto; }
/* Вертикальное фото (портрет, обложка) не выше экрана (28.10): иначе во всю ширину колонки оно в 1,5 экрана высотой.
   Выше правил стилей «.ls-figure img { width: 100% }» — ширина по высоте, горизонтальные фото как были. */
.ls-body .ls-main .ls-figure img { width: auto; max-width: 100%; max-height: min(80vh, 680px); }
.ls-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--ls-meta); }

/* ── Цена ──────────────────────────────────────────────── */
/* Две строки (28.10, по скилам ui/ux): итог крупно — стиль задаёт размер и шрифт .ls-price__total; под ним состав
   цены или условие доставки — мелко, цветом текста секции. Место второй строки держится всегда — при выборе
   страны блок не прыгает. */
.ls-price { margin: 0; color: var(--ls-text); }
.ls-price__total {
    display: block;
    font-family: var(--ls-serif);
    font-size: 32px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ls-price__note {
    display: block;
    min-height: 1.5em;
    margin-top: 8px;
    font-family: var(--ls-sans);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    color: inherit;
}

/* Сводка заказа (28.10, по образцу владельца india-order.png и скилам ui/ux): строки «название — сумма»,
   «Доставка — сумма или условие», «Итого» крупно; суммы по правому краю, цифры одной ширины. Ширина сводки —
   ширина кнопки под ней (.ls-sec--price + .ls-sec--buy), чтобы сумма и действие читались одним блоком. */
.ls-sum { max-width: 520px; }
.ls-sum__title { margin: 0 0 8px; font: 400 20px/1.3 var(--ls-serif); color: var(--ls-head); }
.ls-sum__list { margin: 0; }
.ls-sum__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ls-line);
    font-size: 15px;
    line-height: 1.4;
}
.ls-sum__row dt { min-width: 0; }
.ls-sum__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ls-sum__row:not(.ls-sum__row--total) dd { flex: 0 1 auto; max-width: 60%; }
.ls-sum__row--total { padding-top: 14px; border-bottom: 0; }
.ls-sum__row--total dt { font: 400 20px/1.3 var(--ls-serif); color: var(--ls-head); }
.ls-sum__row--total .ls-price__total { white-space: nowrap; }
/* Сводка, кнопка под ней и строка «что дальше» — колонкой по центру, строка тоже по центру (владелец 28.10).
   Строка — с воздухом ниже рамки кнопки (у «Сайта» двойная рамка выступает на 3px). Узко (колонка уже 520) — на всю ширину. */
.ls-sum { margin-left: auto; margin-right: auto; }
.ls-sec--price + .ls-sec--buy .ls-wrap { display: flex; flex-direction: column; align-items: center; }
.ls-sec--price + .ls-sec--buy .ls-btn { width: 100%; max-width: 520px; }
.ls-main .ls-sec .ls-after { width: 100%; max-width: 520px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; text-align: center; text-wrap: pretty; }

/* ── Анкета ────────────────────────────────────────────── */
.ls-card {
    background: var(--ls-card);
    border: 1px solid var(--ls-line);
    padding: 20px 16px;
}
.ls-group { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.ls-group legend { padding: 0; }
.ls-field { margin: 0 0 14px; }
.ls-label {
    display: block;
    margin: 0 0 4px;
    font-weight: 400;
    color: var(--ls-text);
}
.ls-hint { display: block; margin: 0 0 6px; font-size: 13px; line-height: 18px; color: var(--ls-second); }
.ls-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-r);
    background: var(--ls-field);
    color: var(--ls-text);
    font: 400 16px/22px var(--ls-sans);   /* 16px — iOS не увеличивает страницу при вводе */
}
textarea.ls-input { resize: vertical; min-height: 72px; }
select.ls-input { appearance: auto; }
.ls-input:focus { outline: 2px solid var(--ls-gold); outline-offset: 0; border-color: var(--ls-gold); }
.ls-input--other { margin: 6px 0 4px 26px; width: calc(100% - 26px); }
/* Две «половины» подряд — строка (Landing::form): шире телефона — всегда, на телефоне — только короткие (индекс, город). */
.ls-row--short { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.ls-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; cursor: pointer; }
.ls-check input { margin: 3px 0 0; accent-color: var(--ls-btn); }

/* Ошибка поля — рамка цветом кнопки (без новых цветов); подсказка под полем (Landing::field) — тем же цветом, что подпись. */
.ls-field--error .ls-input,
.ls-field--error.ls-field--check .ls-check { border-color: var(--ls-btn); box-shadow: 0 0 0 1px var(--ls-btn); }
.ls-field--error .ls-label { color: var(--ls-btn-hover); }
.ls-field__msg { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--ls-btn-hover); }

.ls-alert {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--ls-head-bg);
    border: 1px solid var(--ls-gold);
}

/* Поле-приманка для ботов — вне экрана. */
.ls-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Кнопка ────────────────────────────────────────────── */
.ls-sec--buy { padding-top: 20px; }
.ls-btn {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--ls-btn-r);
    background: var(--ls-btn);
    box-shadow: 0 0 0 1px var(--ls-card), 0 0 0 2px var(--ls-gold);   /* двойная рамка, как у кнопок сайта */
    color: var(--ls-btn-fg);
    font-family: var(--ls-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .2s ease;
}
.ls-btn:hover, .ls-btn:focus-visible { background: var(--ls-btn-hover); }
.ls-btn:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 4px; }

/* ── «Остались вопросы?» — чат поддержки до оплаты (28.10, скилы ui/ux) ── */
/* Второстепенное рядом с «Купить книгу»: без фона и рамки блока, ссылка — контур цветом акцента стиля, иконка
   Telegram (currentColor) + подпись; ≥ 48px по высоте. Компьютер — текст слева, ссылка справа; телефон — столбик. */
.ls-sec--ask { padding-top: 32px; padding-bottom: 40px; }
.ls-ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ls-ask__body { min-width: 0; }
.ls-ask__title { margin: 0 0 4px; font-family: var(--ls-serif); font-size: 20px; line-height: 1.3; color: inherit; }
.ls-ask__text { margin: 0; font-size: 15px; line-height: 1.5; color: inherit; }
.ls-ask__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 22px;
    border: 1px solid var(--ls-gold);
    border-radius: var(--ls-btn-r);
    color: inherit;
    font-family: var(--ls-serif);
    font-size: 17px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.ls-ask__link:hover { background: color-mix(in srgb, var(--ls-gold) 14%, transparent); }
.ls-ask__link:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 4px; }
.ls-ask__icon { flex: 0 0 auto; color: var(--ls-gold); }
@media (max-width: 767px) {
    .ls-ask { flex-direction: column; align-items: stretch; gap: 16px; text-align: center; }
    .ls-ask__link { white-space: normal; }
}

/* ── Ссылка к анкете в шапке и панель внизу на телефоне (задача 18) ── */
/* Ссылка-кнопка .ls-cta — в шапке под фактами, ведёт к #ls-order (анкета, без неё — кнопка); вид — токены кнопки. */
.ls-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 20px;
    padding: 12px 28px;
    border-radius: var(--ls-btn-r);
    background: var(--ls-btn);
    box-shadow: 0 0 0 1px var(--ls-card), 0 0 0 2px var(--ls-gold);
    color: var(--ls-btn-fg);
    font-family: var(--ls-serif);
    font-size: 18px;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition: background .2s ease;
}
.ls-cta:hover, .ls-cta:focus-visible { background: var(--ls-btn-hover); }
.ls-cta:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 4px; }
#ls-order { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Панель: только телефон (≤767) и только когда её показал скрипт (атрибут hidden снят); без JS — не видна. */
.ls-bar, .ls-bar[hidden] { display: none; }
.ls-bar__price { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 14px/1.3 var(--ls-sans); color: var(--ls-text); font-variant-numeric: tabular-nums; }
.ls-bar__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: var(--ls-btn-r);
    background: var(--ls-btn);
    color: var(--ls-btn-fg);
    font: 400 16px/1.2 var(--ls-serif);
    text-decoration: none;
    text-align: center;
}
.ls-bar__btn:hover, .ls-bar__btn:focus-visible { background: var(--ls-btn-hover); }
.ls-bar__btn:focus-visible { outline: 2px solid var(--ls-text); outline-offset: 2px; }
@media (max-width: 767px) {
    .ls-bar:not([hidden]) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        background: var(--ls-card);
        border-top: 1px solid var(--ls-line);
    }
    /* Место под панель внизу страницы — только пока панель видна (класс ставит скрипт); скрыта — низ прежний (--ls-end). */
    body.ls-has-bar::after { content: ''; display: block; height: var(--ls-bar-space, 72px); }
}
@media (prefers-reduced-motion: reduce) {
    .ls-cta { transition: none; }
}

@media (min-width: 521px) {
    .ls-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
}

/* ── Шире телефона ─────────────────────────────────────── */
@media (min-width: 768px) {
    :root { --ls-end: 72px; }
    body.ls-body { font-size: 16px; line-height: 22px; }
    .ls-hero { padding: 48px 0; }
    .ls-hero__in { flex-direction: row; align-items: center; gap: 40px; }
    .ls-hero__media { flex: 0 0 38%; }
    .ls-hero__text { flex: 1 1 auto; }
    .ls-title { font-size: 41px; line-height: 44px; }
    .ls-h2 { font-size: 28px; line-height: 34px; }
    .ls-sec { padding-top: 40px; }
    .ls-card { padding: 28px 32px; }
    .ls-btn { display: inline-block; width: auto; min-width: 285px; }
}
@media (min-width: 576px) and (max-width: 767px) {
    .ls-title { font-size: 35px; line-height: 40px; }
}