/* Дизайн-система «Бегу Босс»
   ═══════════════════════════════════════════════════════════════════════════
   Направление выбрано 08.08.2026 — «рабочий список» (вариант Б макета
   /static/design-preview.html). Суть: кабинет это список задач, а не витрина.

   Три решения, из которых следует всё остальное:

   1. СВОЙ ШРИФТ. Системный на Windows отдаёт Segoe UI — мгновенный сигнал
      «шаблонный сайт». Golos Text сделан под русский: буквы шире и спокойнее
      Inter. Лежит у нас (static/fonts), не тянется с Google: внешний CDN — это
      лишний DNS, лишний TLS и передача факта визита третьей стороне.

   2. ИКОНКИ ВМЕСТО ЭМОДЗИ. Эмодзи в меню — самый заметный признак «сделано на
      скорую руку»: разноцветные, разного размера, кричат громче текста.
      Заменены на SVG (шаблон base.html, символьный спрайт): один цвет, один
      размер, наследуют цвет текста.

   3. СТРОКИ ВМЕСТО КАРТОЧЕК. Карточка с рамкой и тенью под две строки текста —
      стиль эпохи Bootstrap и вдвое меньше клиентов на экране. Разделители
      дешевле по вниманию: рамка вокруг каждого элемента говорит «я важен», а
      когда так говорят все, не говорит никто.

   Цвет — только у срочного. В списке клиентов подсвечены два состояния из
   одиннадцати; остывшие приглушены. Если подсвечено всё, не подсвечено ничего.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Вариативный шрифт: один файл на все начертания вместо четырёх статических.
   Кириллица 22 КБ, латиница 38 КБ — всё семейство весит 60 КБ.
   unicode-range заставляет браузер качать латиницу только когда она встретится. */
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/golos-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/golos-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ink: #1A2233;
    --ground: #F2F5F6;
    --navy: #14203A;
    --accent: #FF6B35;
    --accent-press: #DE4E20;
    --line: #D7DEE2;
    --paper: #FFFFFF;
    --muted: #5C6773;
    --brand-gradient: linear-gradient(135deg, #FF6B35 0%, #FF3B30 55%, #B0202B 100%);
    --success-color: #16845b;
    --danger-color: #c43d3d;
    --warning-color: #a86d00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #EDF1F4;
        --ground: #10151F;
        --navy: #0b1224;
        --paper: #171E2B;
        --line: rgba(255,255,255,.12);
        --muted: #9AA6B4;
        --success-color: #64d3a5;
        --danger-color: #ff8e8e;
        --warning-color: #f4c36a;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Golos Text', ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--ground);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Без этого браузер сам «улучшает» вариативный шрифт синтетическим жиром
       и наклоном там, где начертания уже есть, — буквы плывут. */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

/* Заголовки чуть плотнее по трекингу: у крупного кегля межбуквенные просветы
   визуально растут, и без отрицательного трекинга строка выглядит разъехавшейся. */
h1, h2, h3, h4 { letter-spacing: -.02em; line-height: 1.25; }

/* Иконки. Единственный размер и единственный цвет — наследуемый от текста.
   Ради этого эмодзи и убраны: у них ни того, ни другого не отнять. */
.ic {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -3px;
}
.ic-lg { width: 20px; height: 20px; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Шапка */
header {
    background: var(--paper);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.nav-brand a {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-menu a:hover {
    color: var(--accent);
}

/* Основной контент */
main {
    flex: 1;
    padding: 2rem 0;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--accent);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-press);
}

.btn-secondary {
    background-color: var(--muted);
    color: white;
}

.btn-secondary:hover {
    background-color: #475569;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* Формы */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control[type="color"] {
    height: 40px;
    padding: 0.25rem;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Сообщения об ошибках */
.alert {
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.alert-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Карточки */
.card {
    background: var(--paper);
    border-radius: 0.5rem;
    box-shadow: none;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Таблицы */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.table th {
    background-color: var(--paper);
    font-weight: 600;
}

.table tbody tr:hover {
    background-color: var(--ground);
}

/* Подвал */
footer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 2rem 0;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: var(--ink);
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

/* Кабинет */
.cabinet-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.cabinet-sidebar {
    background: var(--paper);
    border-radius: 0.5rem;
    box-shadow: none;
    padding: 1rem;
}

.cabinet-menu {
    list-style: none;
}

.cabinet-menu li {
    margin-bottom: 0.5rem;
}

.cabinet-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.cabinet-menu a:hover,
.cabinet-menu a.active {
    background-color: var(--paper);
    color: var(--accent);
}

.cabinet-content {
    background: var(--paper);
    border-radius: 0.5rem;
    box-shadow: none;
    padding: 2rem;
}

/* Биллинг */
.balance-card {
    background: linear-gradient(135deg, var(--accent), var(--accent-press));
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.balance-amount {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
}

/* Блог */
.blog-post {
    margin-bottom: 2rem;
}

.blog-post-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.blog-post-title a {
    color: var(--ink);
    text-decoration: none;
}

.blog-post-title a:hover {
    color: var(--accent);
}

.blog-post-meta {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.blog-post-excerpt {
    color: var(--ink);
    line-height: 1.6;
}

/* Адаптивность */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cabinet-layout {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Утилиты */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--muted);
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

/* Финальные компоненты новой системы */
body { color: var(--ink); background: var(--ground); }
header { background: var(--navy); box-shadow: none; }
nav { gap: 1.5rem; padding: .8rem 0; }
.nav-brand a { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.nav-brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-wordmark { font-size: 1.35rem; line-height: 1; font-weight: 800; font-style: italic; background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 55%, #B0202B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-caption { display: block; color: rgba(255,255,255,.62); font-size: .66rem; margin-top: .2rem; }
.nav-menu a { color: #EDF1F4; transition: color .22s ease; }
.nav-menu a:hover { color: var(--accent); }
/* Скругление 11px вместо «таблетки» 999px. Таблетка — форма из 2014-го, и вдобавок
   у широкой кнопки она ломает ритм: закругления перестают быть соразмерны тексту. */
.btn { border: 1px solid transparent; border-radius: 11px; font-family: inherit; font-weight: 500; transition: background-color .22s ease, color .22s ease, border-color .22s ease; box-shadow: none; }
.btn-primary { background: var(--accent); color: #1A1108; }
.btn-primary:hover { background: var(--accent-press); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: transparent; border-color: var(--accent); color: var(--accent-press); }

/* ⚠️ В кабинете главное действие тёмное, а не оранжевое.
   Правило направления Б: оранжевый оставлен единственному месту, где означает
   срочность, — полосе и значку у клиента, который смотрит документ прямо сейчас.
   Когда оранжевых кнопок на странице три подряд (так было на обзорной), полоса в
   списке клиентов перестаёт что-либо значить, а человек не понимает, с чего начать.
   Правило записано здесь, а не оставлено на память при разметке каждой страницы:
   иначе оно продержится ровно до следующего шаблона. На лендинге оранжевый остаётся
   — там призыв к действию один, и он должен кричать. */
.cabinet-content .btn-primary { background: var(--navy); color: #fff; }
.cabinet-content .btn-primary:hover { background: #1d2c4c; color: #fff; }

.card, .cabinet-sidebar, .cabinet-content { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: none; }
.form-control { color: var(--ink); background: var(--paper); border-color: var(--line); border-radius: 12px; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,53,.16); }
.alert { border-radius: 16px; border: 1px solid var(--line); }
.alert-error { background: rgba(196,61,61,.12); color: var(--danger-color); }
.alert-success { background: rgba(22,132,91,.12); color: var(--success-color); }
.table th { background: rgba(215,222,226,.35); }
.table tbody tr:hover { background: rgba(255,107,53,.06); }
footer { background: var(--navy); color: #EDF1F4; border-top: 1px solid var(--line); }
.footer-section a { color: #EDF1F4; }
.footer-section a:hover { color: var(--accent); }
.footer-bottom { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.62); }
.cabinet-menu a { color: var(--ink); border-radius: 999px; transition: background-color .22s ease, color .22s ease; }
.cabinet-menu a:hover, .cabinet-menu a.active { background: rgba(255,107,53,.12); color: var(--accent-press); }
.balance-card { background: var(--navy); border-radius: 22px; }
.text-muted, .blog-post-meta { color: var(--muted); }
pre { background: rgba(215,222,226,.35) !important; border: 1px solid var(--line); border-radius: 12px !important; }

/* ============================================================================
   ЛЕНДИНГ (главная страница) — префикс lp-
   ============================================================================
   Отдельная секция, ничего выше не переопределяет. Вёрстка mobile-first:
   базовые правила рассчитаны на телефон (основной трафик идёт из TikTok/Reels),
   десктоп добирается медиазапросом в конце секции.

   Типографическая шкала задана через clamp() — размеры плавно растут вместе
   с шириной экрана, отдельных брейкпоинтов под шрифты не нужно.
   ========================================================================= */

:root {
    --lp-h1: clamp(1.85rem, 1.55rem + 1.5vw, 3.1rem);
    --lp-h2: clamp(1.3rem, 1.18rem + .6vw, 1.9rem);
    --lp-body: clamp(.95rem, .92rem + .15vw, 1.06rem);
    --lp-small: clamp(.8rem, .78rem + .1vw, .88rem);
    --lp-gap: clamp(1rem, .8rem + 1vw, 1.6rem);
    --lp-pad: clamp(2rem, 1.4rem + 3vw, 4.5rem);
}

.lp-sect { padding: var(--lp-pad) 1.1rem; }
.lp-inner { max-width: 560px; margin: 0 auto; }
.lp-dark { background: var(--navy); color: #EDF1F4; }
.lp-dark .lp-lead, .lp-dark .lp-democap { color: rgba(237,241,244,.72); }
.lp-dark .lp-steps small { color: rgba(237,241,244,.6); }

.lp-tagline {
    font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--accent); margin: 0;
}
.lp-h1 {
    font-size: var(--lp-h1); font-weight: 800; line-height: 1.06;
    letter-spacing: -.028em; margin: .55rem 0 0; text-wrap: balance;
}
/* Акцент только на двух словах заголовка, не на всей строке — принцип
   «уверенный акцент точечно», зафиксирован на брейншторме бренда 02.08.2026 */
.lp-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 55%, #B0202B 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-h2 {
    font-size: var(--lp-h2); font-weight: 800; letter-spacing: -.022em;
    line-height: 1.14; margin: 0; text-wrap: balance;
}
.lp-lead {
    font-size: var(--lp-body); color: var(--muted);
    line-height: 1.45; margin: .6rem 0 0; max-width: 46ch;
}

.lp-proof { list-style: none; margin: var(--lp-gap) 0 0; padding: 0;
            display: flex; flex-direction: column; gap: .4rem; }
.lp-proof li { display: flex; gap: .5rem; align-items: baseline; font-size: var(--lp-small); }
.lp-tick { color: var(--success-color); font-weight: 800; flex: none; }

/* --- призыв к действию и счётчик мест --- */
.lp-cta { margin-top: var(--lp-gap); max-width: 380px; }
.lp-btn { display: block; width: 100%; text-align: center;
          padding: .85rem 1rem; font-size: 1rem; font-weight: 700; }
.lp-btn + .lp-btn { margin-top: .55rem; }

.lp-seatbar {
    height: 4px; border-radius: 999px; background: rgba(128,140,155,.22);
    margin-top: .6rem; overflow: hidden;
}
.lp-seatfill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 55%, #B0202B 100%);
}
.lp-seats { text-align: center; font-size: var(--lp-small); color: var(--muted); margin: .45rem 0 0; }
.lp-seats b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-micro { text-align: center; font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }

/* Кнопка в состоянии «места разобрали» — гасим, но оставляем на месте,
   чтобы человек понял, что предложение было реальным, а не исчезло бесследно */
.lp-btn-off { background: rgba(128,140,155,.2); color: var(--muted); cursor: default; }
.lp-btn-off:hover { background: rgba(128,140,155,.2); color: var(--muted); }
.lp-soldnote {
    font-size: var(--lp-small); text-align: center; color: var(--muted);
    margin: .6rem 0; padding: .6rem .7rem;
    border: 1px dashed var(--line); border-radius: 14px;
}

/* --- анимированная демонстрация (вместо видео) --- */
.lp-demo {
    position: relative; height: 300px; margin-top: var(--lp-gap);
    border-radius: 20px; overflow: hidden;
    background: var(--ground); border: 1px solid var(--line);
}
.lp-dark .lp-demo { background: #0E1421; border-color: rgba(255,255,255,.1); }

.lp-scene { position: absolute; inset: 0; padding: .8rem; }
.lp-scene-chat { display: flex; flex-direction: column; gap: .4rem; justify-content: flex-end; }
.lp-scene-kp {
    background: var(--paper); color: var(--ink);
    display: flex; flex-direction: column; gap: .45rem;
    opacity: 0; transform: translateY(14px);
    animation: lpKpIn 12s infinite;
}

.lp-bub {
    max-width: 84%; font-size: .78rem; line-height: 1.35;
    padding: .45rem .62rem; border-radius: 14px;
    opacity: 0; transform: translateY(7px);
    animation: lpBub 12s infinite;
}
.lp-bub-in { align-self: flex-start; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.lp-bub-out { align-self: flex-end; background: #2AABEE; color: #fff; }
.lp-b1 { animation-delay: .3s; }
.lp-b2 { animation-delay: 1.5s; }
.lp-b3 { animation-delay: 3.1s; }
.lp-b4 { animation-delay: 4.4s; }

.lp-voice { display: flex; align-items: center; gap: .4rem; }
.lp-wave { display: flex; gap: 2px; align-items: center; height: 14px; }
.lp-wave i { width: 2px; background: rgba(255,255,255,.85); border-radius: 2px; display: block; }
.lp-wave i:nth-child(1) { height: 7px; }
.lp-wave i:nth-child(2) { height: 12px; }
.lp-wave i:nth-child(3) { height: 5px; }
.lp-wave i:nth-child(4) { height: 14px; }
.lp-wave i:nth-child(5) { height: 9px; }
.lp-wave i:nth-child(6) { height: 11px; }
.lp-wave i:nth-child(7) { height: 6px; }
.lp-wave i:nth-child(8) { height: 13px; }
.lp-wave i:nth-child(9) { height: 8px; }
.lp-dur { font-size: .68rem; opacity: .85; }

.lp-linkcard {
    align-self: flex-start; max-width: 92%; font-size: .72rem;
    padding: .5rem .62rem; border-radius: 14px;
    background: var(--paper); color: var(--ink); border: 1px solid var(--accent);
    opacity: 0; transform: translateY(7px);
    animation: lpBub 12s infinite; animation-delay: 5.2s;
}
.lp-linkcard b { display: block; color: var(--accent-press); }
.lp-linkcard span { color: var(--muted); }

@keyframes lpBub {
    0%, 2%    { opacity: 0; transform: translateY(7px); }
    5%, 46%   { opacity: 1; transform: translateY(0); }
    52%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes lpKpIn {
    0%, 50%   { opacity: 0; transform: translateY(14px); }
    56%, 92%  { opacity: 1; transform: translateY(0); }
    98%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* мини-смета внутри демонстрации */
.lp-kptop { border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.lp-kptag { font-size: .55rem; font-weight: 800; letter-spacing: 1.2px;
            text-transform: uppercase; color: var(--accent); margin: 0; }
.lp-kph { font-size: .88rem; font-weight: 800; letter-spacing: -.02em; margin: .1rem 0 0; }
.lp-kprow { display: flex; justify-content: space-between; font-size: .7rem;
            padding: .22rem 0; border-bottom: 1px dashed var(--line); }
.lp-kprow span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
.lp-kptotal { display: flex; justify-content: space-between;
              font-size: .8rem; font-weight: 800; margin-top: .2rem; }
.lp-kptotal span:last-child { color: var(--accent-press); font-variant-numeric: tabular-nums; }
.lp-kpseen { font-size: .62rem; color: var(--success-color); margin: auto 0 0; }
.lp-democap { font-size: .74rem; color: var(--muted); text-align: center; margin: .5rem 0 0; }

/* --- три действия --- */
.lp-steps { list-style: none; margin: var(--lp-gap) 0 0; padding: 0;
            display: flex; flex-direction: column; gap: .8rem; }
.lp-steps li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; align-items: start; }
.lp-steps b { font-size: 1.05rem; font-weight: 800; color: var(--accent);
              font-variant-numeric: tabular-nums; line-height: 1.3; }
.lp-steps p { margin: 0; font-size: var(--lp-small); line-height: 1.45; }
.lp-steps small { display: block; color: var(--muted); font-size: .78rem; margin-top: .1rem; }

/* --- цена --- */
.lp-price {
    border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem;
    background: var(--paper); color: var(--ink); margin-top: var(--lp-gap);
}
.lp-pricebig { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.lp-pricesub { font-size: var(--lp-small); color: var(--muted); margin: .25rem 0 0; }
.lp-pricelist { list-style: none; margin: .9rem 0 0; padding: 0;
                display: flex; flex-direction: column; gap: .35rem; }
.lp-pricelist li { font-size: var(--lp-small); display: flex; gap: .5rem; align-items: baseline; }

/* --- десктоп --- */
@media (min-width: 760px) {
    .lp-inner { max-width: 720px; }
    .lp-demo { height: 360px; }
    .lp-steps { flex-direction: row; gap: 1.6rem; }
    .lp-steps li { flex: 1; }
}

/* --- страница тарифов (префикс pr-) --- */
.pr-inner { max-width: 1000px; margin: 0 auto; }

/* Плашка про триал: человек, дошедший до прайса, ещё может начать бесплатно */
.pr-promo {
    display: flex; flex-direction: column; gap: .3rem;
    margin-top: var(--lp-gap); padding: 1rem 1.1rem;
    border: 1px solid var(--accent); border-radius: 20px;
    background: rgba(255,107,53,.07);
}
.pr-promo b { font-size: 1rem; }
.pr-promo span { font-size: var(--lp-small); color: var(--muted); }
.pr-promo-btn { align-self: flex-start; margin-top: .5rem; padding: .6rem 1.4rem; }

.pr-grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
    margin-top: var(--lp-gap);
}
.pr-card {
    position: relative; display: flex; flex-direction: column;
    padding: 1.3rem 1.2rem;
    border: 1px solid var(--line); border-radius: 22px;
    background: var(--paper); color: var(--ink);
}
/* Рекомендуемый тариф выделен рамкой, а не цветной заливкой: на инструменте для
   бизнеса кричащая карточка читается как навязывание */
.pr-card-pick { border-color: var(--accent); border-width: 2px; }
.pr-badge {
    position: absolute; top: -.7rem; left: 1.2rem;
    font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #1A1108; background: var(--accent);
    padding: .28rem .6rem; border-radius: 999px;
}

.pr-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.pr-tag { font-size: var(--lp-small); color: var(--muted); margin: .2rem 0 0; }

.pr-price { margin: .9rem 0 0; display: flex; align-items: baseline; gap: .2rem; }
.pr-num {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pr-star { font-size: 1.1rem; }
.pr-sub { font-size: .78rem; color: var(--muted); margin: .25rem 0 0; }

/* Объём работы в понятных единицах — смысловой центр карточки */
.pr-volume {
    margin-top: .9rem; padding: .7rem .8rem;
    border-radius: 14px; background: rgba(128,140,155,.1);
    display: flex; flex-direction: column; gap: .15rem;
}
.pr-volume b { font-size: .96rem; font-variant-numeric: tabular-nums; }
.pr-volume span { font-size: .74rem; color: var(--muted); }

.pr-feats {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .4rem;
}
.pr-feats li { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; line-height: 1.4; }
.pr-limit { font-size: .78rem; color: var(--muted); margin: .8rem 0 0; }

/* Кнопка прижата к низу, чтобы в ряду карточек они были на одной линии */
.pr-btn { margin-top: auto; padding-top: .75rem; padding-bottom: .75rem; }
.pr-feats + .pr-btn, .pr-limit + .pr-btn { margin-top: 1.1rem; }

.pr-note {
    margin-top: var(--lp-pad); padding: 1.2rem;
    border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
}
.pr-note p { font-size: var(--lp-small); color: var(--muted); line-height: 1.55; margin: .6rem 0 0; }
.pr-costs { margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.pr-costs dt { font-size: .82rem; font-weight: 700; }
.pr-costs dd { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); }

@media (min-width: 700px) {
    .pr-grid { grid-template-columns: repeat(2, 1fr); }
    .pr-costs {
        display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; align-items: baseline;
    }
    .pr-costs dd { margin: 0; }
}
@media (min-width: 1000px) {
    .pr-grid { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
}

/* --- страница реквизитов (префикс rq-) --- */
.rq-inner { max-width: 640px; margin: 0 auto; }
.rq-card {
    border: 1px solid var(--line); border-radius: 22px;
    background: var(--paper); color: var(--ink);
    padding: 1.2rem; margin-top: var(--lp-gap);
}
.rq-h2 {
    font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em;
    margin: 0 0 .8rem; color: var(--ink);
}
.rq-list { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.rq-list dt {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
}
.rq-list dd { margin: .15rem 0 0; font-size: var(--lp-small); line-height: 1.5; }

/* Номера и коды: моноширинные и с одинаковой шириной цифр — так их проще
   сверять глазами с бумажным документом и переписывать без ошибок */
.rq-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
    font-weight: 600;
}
/* IBAN длинный — на узком экране должен переноситься, а не растягивать страницу вбок */
.rq-iban { overflow-wrap: anywhere; }

.rq-note {
    margin-top: var(--lp-gap); font-size: .82rem;
    color: var(--muted); line-height: 1.5;
}

/* Название бренда в подвале — тем же огненным градиентом, что и в шапке */
.footer-brand {
    font-weight: 800; font-style: italic; letter-spacing: -.01em;
    background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 55%, #B0202B 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================================
   МОБИЛЬНОЕ МЕНЮ (бургер)
   ============================================================================
   До этого меню на узком экране просто разворачивалось в колонку и занимало
   почти весь первый экран — на лендинге это отодвигало заголовок и кнопку
   за сгиб, то есть убивало весь смысл посадочной страницы.

   Сделано на скрытом чекбоксе без JavaScript. Чекбокс не убран display:none
   и не visibility:hidden — иначе он выпадает из порядка обхода Tab и меню
   становится недоступным с клавиатуры. Вместо этого он схлопнут в точку
   и прозрачен, но остаётся фокусируемым: Tab доводит до него, Space открывает.
   ========================================================================= */

.nav-toggle {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; padding: 0; border: 0;
}
/* Фокус с клавиатуры подсвечиваем на самом бургере — чекбокса не видно */
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 3px; }

.nav-burger { display: none; }

@media (max-width: 768px) {
    nav { flex-wrap: wrap; row-gap: 0; }

    /* Три полоски; при открытом меню верхняя и нижняя складываются в крестик */
    .nav-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 42px; height: 42px; padding: 10px 9px;
        border-radius: 12px; cursor: pointer; flex: none;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-burger span {
        display: block; height: 2px; width: 100%; border-radius: 2px;
        background: #EDF1F4;
        transition: transform .22s ease, opacity .18s ease;
    }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Меню скрыто по умолчанию и раскрывается под шапкой на всю ширину */
    .nav-menu {
        display: none; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        margin-top: .6rem; padding-top: .5rem;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .nav-toggle:checked ~ .nav-menu { display: flex; }

    /* Пункты крупные — по ним попадают пальцем, а не курсором */
    .nav-menu li a {
        display: block; padding: .8rem .2rem;
        font-size: 1rem;
    }
    /* «Регистрация» остаётся кнопкой, но не растягивается на всю ширину */
    .nav-menu li a.btn { display: inline-block; margin: .5rem 0 .3rem; padding: .6rem 1.4rem; }

    /* Подпись под логотипом на узком экране лишняя — забирает место у бренда */
    .brand-caption { display: none; }
}

/* --- страница активации промокода (префикс ac-) --- */
.ac-sect { min-height: 70vh; display: flex; align-items: center; }
.ac-inner { max-width: 440px; margin: 0 auto; width: 100%; }
.ac-h1 {
    font-size: clamp(1.6rem, 1.4rem + 1vw, 2.3rem); font-weight: 800;
    line-height: 1.1; letter-spacing: -.025em; margin: .5rem 0 0; text-wrap: balance;
}
.ac-code-inline {
    font-weight: 800; color: var(--accent-press); letter-spacing: .04em;
}

.ac-form { display: flex; flex-direction: column; gap: .55rem; margin-top: var(--lp-gap); }
.ac-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
/* Крупное поле с разрядкой: код набирают по одному символу и сверяют глазами
   с экраном телефона, где идёт ролик — мелкий шрифт здесь читается плохо */
.ac-input {
    width: 100%; padding: .85rem 1rem; font-family: inherit;
    font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-align: center;
    text-transform: uppercase;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: 14px;
}
.ac-input::placeholder { color: var(--muted); font-weight: 400; letter-spacing: .08em; }
.ac-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,107,53,.16);
}

.ac-error {
    display: flex; flex-direction: column; gap: .2rem;
    margin-top: var(--lp-gap); padding: .8rem .9rem;
    border: 1px solid var(--danger-color); border-radius: 16px;
    background: rgba(196,61,61,.08);
}
.ac-error b { color: var(--danger-color); font-size: var(--lp-small); }
.ac-error span { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.ac-hurry {
    margin-top: .8rem; text-align: center;
    font-size: var(--lp-small); font-weight: 700; color: var(--accent);
}
.ac-alt { margin-top: var(--lp-gap); font-size: var(--lp-small); color: var(--muted); }

.ac-retry { margin-top: var(--lp-gap); }
.ac-retry summary {
    cursor: pointer; font-size: var(--lp-small); color: var(--muted);
    padding: .3rem 0;
}
.ac-retry summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ac-retry[open] summary { color: var(--ink); font-weight: 650; }

/* Уважаем системную настройку «меньше движения»: анимация выключается,
   обе сцены показываются статично друг под другом */
@media (prefers-reduced-motion: reduce) {
    .lp-bub, .lp-linkcard { animation: none; opacity: 1; transform: none; }
    .lp-demo { height: auto; }
    .lp-scene { position: static; }
    .lp-scene-kp { animation: none; opacity: 1; transform: none;
                   margin-top: .6rem; border-radius: 14px; }
}

/* ═══ КАБИНЕТ: рабочий список ══════════════════════════════════════════════════
   Направление Б, выбрано 08.08.2026 (макет /static/design-preview.html).

   Карточки заменены на строки с разделителями. Довод не эстетический: карточка с
   рамкой и тенью под две строчки текста занимает вдвое больше места, а рамка вокруг
   каждого элемента сообщает «я важен» — когда так говорят все, не говорит никто.
   Кабинет открывают с телефона между объектами, и там важнее, сколько клиентов
   видно сразу.

   До этого строки жили вовсе без стилей и выводились голым потоком, а состояние
   показывали два бейджа — «активен» и «в переговорах», одинаковые у всех карточек,
   потому что заполнялись значением по умолчанию и не менялись никогда (удалены
   миграцией 017 вместе с полями). */

.cabinet-who {
    font-size: .8rem;
    color: var(--muted);
    padding: 0 .6rem .9rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--line);
}

.cabinet-menu { list-style: none; }
.cabinet-menu li { margin-bottom: 1px; }
.cabinet-menu a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .6rem;
    font-size: .92rem;
    color: var(--muted);
    text-decoration: none;
    border-radius: 9px;
    transition: background-color .15s, color .15s;
}
.cabinet-menu a:hover { background: var(--ground); color: var(--ink); }
/* Активный пункт — весом и фоном, а не цветом бренда: оранжевый в меню спорит
   с оранжевым на кнопке действия, и глаз перестаёт понимать, где главное. */
.cabinet-menu a.active { background: var(--ground); color: var(--ink); font-weight: 600; }

.cabinet-sidebar { padding: 1.1rem .8rem; }

.list-note { font-size: .85rem; margin: -.35rem 0 1.1rem; }

/* ── Скрытые карточки на бесплатном тарифе ──────────────────────────────────
   Кусок 5.1 спеки 18. Блок намеренно СПОКОЙНЫЙ: ни красного, ни восклицаний.
   Человек, упавший на бесплатный, и так расстроен, а рекламный крик на месте его
   пропавших клиентов читается как «мы забрали ваше и продаём обратно».
   Рамка пунктиром — визуальная метафора того же, что говорит текст: здесь что-то
   есть, оно просто не показано. */
.hidden-clients {
    margin-top: 1.4rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--ground);
}
.hidden-clients p { margin: 0 0 .45rem; }
.hidden-clients p:last-of-type { margin-bottom: .9rem; }
.hidden-clients .text-muted { font-size: .9rem; line-height: 1.55; }

/* ── Строка клиента ─────────────────────────────────────────────────────── */
.client-list { display: flex; flex-direction: column; }

.client-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.client-row:last-child { border-bottom: none; }

/* Полоса срочности. Красится ровно у двух состояний из одиннадцати: клиент открыл
   документ прямо сейчас и висит долг. Остальные девять — обычные строки. */
.client-bar {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    background: transparent;
    flex-shrink: 0;
}
.status-viewed_fresh .client-bar { background: var(--accent); }
.status-debt .client-bar { background: #C9A227; }
/* Заказчик примеряет другую цену (спека 20). Полоса нужна по той же причине, что у
   свежего просмотра: это ранг 0, строка стоит первой и обязана читаться как срочная.
   ⚠️ Цвет НЕ акцентный: рядом с «открыл документ» две оранжевые полосы слились бы в
   одно состояние, а это разные новости — там человек смотрит, здесь сравнивает суммы.
   --success-color взят как «деньги в хорошем смысле» и определён в обеих темах. */
.status-variant_chosen .client-bar { background: var(--success-color); }
/* Остывшие приглушены, но не спрятаны: человек сам решает, отпускать ли. */
.client-row.status-cold { opacity: .6; }

.client-row-main { min-width: 0; flex: 1; }
.client-row h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .3rem; }
.client-place { font-weight: 400; color: var(--muted); }
.client-org { font-size: .82rem; color: var(--muted); margin: -.15rem 0 .3rem; }

/* Состояние и действие. Разный вес неслучаен: сверху факт («открыл смету 20 минут
   назад»), под ним — что с этим делать. Читается ровно в том порядке, в каком
   человек принимает решение. */
.client-status {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    margin: 0;
}
.status-viewed_fresh .client-status .ic { color: var(--accent); }
.status-debt .client-status .ic { color: #C9A227; }
.status-variant_chosen .client-status .ic { color: var(--success-color); }
.client-status .ic { color: var(--muted); }

.client-action { font-size: .82rem; color: var(--muted); margin: .15rem 0 0; }

.client-status-block { margin: .6rem 0 1.3rem; }

.client-row-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ── Кнопки списка ──────────────────────────────────────────────────────────
   Главное действие тёмное, а не оранжевое. Оранжевый оставлен единственному месту,
   где он означает срочность, — полосе и значку у клиента, который смотрит документ
   прямо сейчас. Когда оранжевая кнопка стоит у каждой строки, полоса перестаёт
   что-либо значить. */
.btn-quiet {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    font-size: .84rem;
    font-weight: 500;
    padding: .45rem .8rem;
    border-radius: 9px;
}
.btn-quiet:hover { color: var(--ink); border-color: var(--muted); }

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    font-size: .84rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 9px;
}
.btn-dark:hover { background: #1d2c4c; color: #fff; }
.btn-dark .ic { stroke-width: 1.9; }

@media (max-width: 640px) {
    /* Кнопки уходят под текст: две в ряд на узком экране не помещаются, а кабинет
       открывают в основном с телефона. */
    .client-row { flex-wrap: wrap; }
    .client-row-actions { width: 100%; }
    .client-row-actions .btn { flex: 1; text-align: center; justify-content: center; }
    .client-bar { width: 100%; height: 3px; align-self: auto; }
    .client-row.status-viewed_fresh,
    .client-row.status-debt,
    .client-row.status-variant_chosen { padding-top: .6rem; }
}

/* ── Список готовности на обзорной странице ────────────────────────────────
   Тот же язык, что список клиентов: строка, значок слева, действие справа.
   До 08.08.2026 здесь были четыре карточки со стопкой оранжевых кнопок — три
   призыва одинакового веса подряд не подсказывают, с чего начать. */
.setup-list { display: flex; flex-direction: column; margin-bottom: 2rem; }

.setup-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem .1rem;
    border-bottom: 1px solid var(--line);
}
.setup-row:last-child { border-bottom: none; }
.setup-row > .ic { color: var(--accent); }
/* Сделанное гаснет: галочки не должны спорить за внимание с недоделанным. */
.setup-row.done > .ic { color: var(--success-color); }
.setup-row.done h2 { font-weight: 500; }

.setup-main { flex: 1; min-width: 0; }
.setup-row h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .15rem; }
.setup-why { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Надзаголовок с чертой — из языка страницы документа, чтобы кабинет и то, что
   видит клиент, читались как один продукт. */
.section-label {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .9rem;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.quick-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.quick-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }

/* Уведомление в потоке страницы (объединили Telegram, промокод принят). Раньше
   такие сообщения были обычной карточкой с эмодзи в начале строки. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    margin-bottom: 1.4rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--success-color);
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.5;
}
.notice > .ic { color: var(--success-color); margin-top: .15rem; }

/* ── Первый экран с фотографией ────────────────────────────────────────────
   Добавлено 08.08.2026. До этого на лендинге не было ни одного изображения:
   текст и нарисованная CSS-имитация чата. На телефоне это читалось терпимо, на
   десктопе — узкая колонка посреди пустоты.

   Снимок сгенерирован (см. решение о том, где генерация уместна: атмосферу
   можно, утверждения нельзя — фото «наших пользователей» было бы выдачей
   выдуманного за настоящее). Выбран не готовый забор, а стройка на закате:
   забор сузил бы позиционирование до одного ремесла, а палитра снимка совпадает
   с брендом — синее небо и тёплый рабочий свет это navy и оранжевый.

   Прогнан через shared/images.py: 3,7 МБ → 183 КБ десктоп, 56 КБ телефон.
   Обработка здесь важнее любого выбора хранилища: на мобильном интернете это
   разница между десятью секундами и одной. */
.lp-hero {
    position: relative;
    background: var(--navy);
    color: #EDF1F4;
    overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url('/static/img/hero-site-mobile.jpg') center/cover no-repeat;
}
/* Вуаль. Плотная слева, где текст, и почти прозрачная справа — снимок должен
   остаться видимым, а не превратиться в тёмное пятно. Читаемость важнее: если
   заголовок читается плохо, фотография работает против страницы. */
.lp-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,16,30,.86) 0%, rgba(10,16,30,.78) 55%, rgba(10,16,30,.92) 100%);
}
.lp-hero > .lp-inner { position: relative; z-index: 1; }

.lp-hero .lp-lead { color: rgba(237,241,244,.74); }
.lp-hero .lp-proof li { color: rgba(237,241,244,.9); }
.lp-hero .lp-seats, .lp-hero .lp-micro, .lp-hero .lp-soldnote { color: rgba(237,241,244,.6); }
.lp-hero .lp-seatbar { background: rgba(255,255,255,.18); }
/* Градиент на двух словах заголовка уходит в тёмно-красный — на тёмном фоне он
   пропадает. На фотографии берём светлый конец шкалы. */
.lp-hero .lp-h1 em {
    background: linear-gradient(135deg, #FFB03A 0%, #FF6B35 60%, #FF3B30 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* Галочки списка — SVG вместо символа «✓». Символ брался из шрифта, а значит
   менял вид от системы к системе и не выравнивался по строке. */
.lp-tick-ic { color: var(--success-color); flex: none; width: 15px; height: 15px; }
.lp-hero .lp-tick-ic { color: #6ED3A6; }
.lp-dark .lp-tick-ic { color: #6ED3A6; }

@media (min-width: 760px) {
    /* Крупный снимок только там, где он виден целиком: телефону хватает 960 px,
       и грузить ради него 183 КБ незачем. */
    .lp-hero::before { background-image: url('/static/img/hero-site.jpg'); }
    /* На широком экране текст прижат влево, к тёмной части кадра, а не висит
       колонкой по центру. Фотография при этом остаётся видимой справа. */
    .lp-hero::after {
        background: linear-gradient(90deg, rgba(10,16,30,.94) 0%, rgba(10,16,30,.86) 38%, rgba(10,16,30,.34) 100%);
    }
    .lp-hero > .lp-inner { max-width: 1080px; }
    .lp-hero .lp-h1, .lp-hero .lp-lead, .lp-hero .lp-proof, .lp-hero .lp-cta { max-width: 30rem; }
    .lp-hero { padding-top: calc(var(--lp-pad) * 1.25); padding-bottom: calc(var(--lp-pad) * 1.25); }
}

/* ── Правовые страницы и согласие на cookies ───────────────────────────────
   Оферта и политика — длинный текст, который читают с телефона и по диагонали.
   Поэтому колонка узкая (65 знаков в строке — предел, после которого глаз
   теряет начало следующей строки), заголовки разделов заметно крупнее текста,
   а таблица передачи данных прокручивается вбок, не ломая страницу. */
.legal {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
    font-size: 1rem;
    line-height: 1.7;
}
.legal-kicker {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.legal h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-bottom: .5rem; }
.legal-meta { font-size: .86rem; color: var(--muted); margin-bottom: 1.6rem; }
.legal h2 {
    font-size: 1.2rem; margin: 2.2rem 0 .6rem;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.legal p { margin-bottom: .8rem; }
.legal ul { margin: 0 0 1rem 1.2rem; }
.legal li { margin-bottom: .35rem; }

/* Предупреждение, что документ ещё черновик. Заметное намеренно: незаконченный
   правовой текст, выглядящий законченным, опаснее его отсутствия. */
.legal-warning {
    padding: .9rem 1.1rem; margin: 1.4rem 0 2rem;
    border: 1px solid var(--warning-color); border-left-width: 3px;
    border-radius: 12px; background: rgba(168,109,0,.07);
    font-size: .92rem;
}

/* Незакрытое место. Видно на самой странице, а не только в исходнике: так его
   нельзя случайно выпустить в публикацию — и юрист сразу видит, что ему решать. */
.legal-todo {
    background: rgba(168,109,0,.14);
    color: var(--warning-color);
    padding: .05em .35em; border-radius: 5px;
    font-size: .93em; font-weight: 600;
}

.legal-table {
    width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem;
    font-size: .88rem; display: block; overflow-x: auto;
}
.legal-table th, .legal-table td {
    padding: .55rem .7rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.legal-table th {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; white-space: nowrap;
}

/* ── Баннер согласия ──────────────────────────────────────────────────────
   Снизу, поверх содержимого, но НЕ на весь экран: окно, закрывающее страницу
   целиком, вынуждает согласиться, чтобы просто прочитать текст, — а согласие
   под принуждением согласием не является. */
.cookie-banner {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 200;
    max-width: 46rem; margin: 0 auto;
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding: 1rem 1.2rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(20,32,58,.16);
}
.cookie-text { flex: 1; min-width: 15rem; font-size: .88rem; line-height: 1.55; }
.cookie-text b { display: block; margin-bottom: .15rem; }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-actions .btn { padding: .55rem 1rem; font-size: .88rem; }

@media (max-width: 560px) {
    .cookie-banner { left: .6rem; right: .6rem; bottom: .6rem; padding: .9rem 1rem; }
    /* Кнопки в ряд и на всю ширину: на телефоне по ним попадают пальцем. */
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; text-align: center; }
}