/* Публичные страницы: лендинг, тарифы, правила.

   Своей палитры и своих шрифтов здесь нет ни одного — всё приходит из _content/FabrikaUi/css/tokens.css,
   того же файла, что раздаёт цвета приложению. Иначе человек, нажавший «Войти», попадал бы в другой
   продукт: лендинг и кабинет обязаны говорить одним голосом.

   MudBlazor не подключён намеренно: на маркетинговой странице нет ни одной его компоненты, а её вес и
   скин страницы, которая должна открываться мгновенно, ничем не оправданы.

   Кегли начинаются с 16px: у лендинга другая дистанция чтения, чем у инструмента (§4 шкалы). */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    /* Полоса партии намеренно шире контейнера и меряется в 100vw, а vw СЧИТАЕТ ширину вертикального
       скроллбара — отсюда горизонтальная прокрутка на его толщину. `clip` срезает вылет, не создавая
       блок прокрутки: `hidden` на body сделал бы это ценой поломки position: sticky внутри. */
    overflow-x: clip;
    background: var(--fb-bg);
    color: var(--fb-ink);
    font-family: var(--fb-ui);
    font-size: var(--fb-fs-16);
    line-height: var(--fb-lh-text);
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Обе постоянные анимации системы гасятся длительностью, а не отключением: правило одно и на
       лендинге, и в приложении. */
    * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

a { color: inherit; }

.ld-wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- верхний бар ----------

   Единственный фиксированный элемент публичной части. Полупрозрачный с размытием: под ним едет
   схема цепочки, и глухая плашка отрезала бы её верх ровной линией. */

.ld-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--fb-bg-blur);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--fb-line);
}

.ld-top-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 72px;
}

.ld-brand {
    font-family: var(--fb-display);
    /* Марка заметно крупнее строки навигации: точка после названия — единственный знак, который есть
       у продукта, и на кегле соседних ссылок она читалась как опечатка. Запасное значение — по той же
       причине, что у заголовка: без него незагруженный токен обнулил бы кегель до наследуемого. */
    font-size: var(--fb-fs-34, 34px);
    font-weight: 800;
    letter-spacing: var(--fb-tr-head);
    color: var(--fb-ink);
    text-decoration: none;
}

/* Точка после названия — единственный знак марки. Логотипа нет: рисовать его не из чего. */
.ld-brand::after { content: "."; color: var(--fb-primary); }

.ld-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    font-size: var(--fb-fs-14);
}

/* :not(.ld-btn) обязателен. Без него `.ld-nav a` (0,1,1) перебивает `.ld-btn-primary` (0,1,0),
   и подпись кнопки красится в --fb-ink-dim поверх синей заливки — то есть исчезает. Класс кнопки
   при этом выглядит применённым: фон-то её. */
.ld-nav a:not(.ld-btn) {
    color: var(--fb-ink-dim);
    text-decoration: none;
    transition: color .12s ease;
}

.ld-nav a:not(.ld-btn):hover { color: var(--fb-ink); }

/* Текущая страница остаётся в навигации и помечается, а не убирается из неё: пропавший пункт
   человек читает как «раздела больше нет», а не как «вы уже здесь». */
.ld-nav a[aria-current="page"] { color: var(--fb-ink); }

/* Переключатель темы в шапке. Стоит перед «Войти», а не в подвале: тема — это про то, как человек
   читает страницу СЕЙЧАС, и искать её внизу он не пойдёт.

   Обработчика у кнопки нет — переключает общий делегат по атрибуту data-fabrika-theme-toggle
   (js/theme.js), тот же, что в приложении. Значок выбирает CSS по теме документа: лендинг — статика
   без единой строки своего JS, и условие в разметке ему написать нечем. */
.ld-theme {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    flex: none;
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-r-in);
    background: var(--fb-sunken);
    color: var(--fb-ink-dim);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.ld-theme:hover { border-color: var(--fb-line-hi); color: var(--fb-ink); }
.ld-theme:focus-visible { outline: none; box-shadow: var(--fb-ring); }
.ld-theme svg { width: 16px; height: 16px; grid-area: 1 / 1; }

/* «Показываем то, во что переключим»: в тёмной теме солнце, в светлой луна. */
.ld-theme .ld-theme-light { display: none; }

[data-theme="light"] .ld-theme .ld-theme-dark { display: none; }
[data-theme="light"] .ld-theme .ld-theme-light { display: block; }

/* ---------- кнопки ---------- */

.ld-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--fb-r-in);
    font-family: var(--fb-ui);
    font-size: var(--fb-fs-14);
    font-weight: 600;
    line-height: var(--fb-lh-control);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.ld-btn-primary {
    background: var(--fb-primary);
    color: var(--fb-on-primary);
}

.ld-btn-primary:hover { background: var(--fb-primary-hover); }

.ld-btn-ghost {
    border-color: var(--fb-line);
    background: var(--fb-sunken);
    color: var(--fb-ink);
}

.ld-btn-ghost:hover { border-color: var(--fb-line-hi); }

.ld-btn-sm { padding: 8px 14px; font-size: var(--fb-fs-13); }

.ld-btn:focus-visible { outline: none; box-shadow: var(--fb-ring); }

/* ---------- герой ---------- */

.ld-hero {
    padding: 140px 0 76px;
    border-bottom: 1px solid var(--fb-line);
}

.ld-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-12);
    letter-spacing: .04em;
    color: var(--fb-ink-faint);
}

/* Пульс — одна из двух постоянных анимаций системы, и означает она ровно то же, что в приложении:
   работа идёт. Здесь она стоит у надписи про конвейер, а не «для оживления». */
.ld-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fb-primary);
    animation: ld-pulse 1.6s ease-in-out infinite;
}

@keyframes ld-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--fb-primary-soft); }
    50% { opacity: .55; box-shadow: 0 0 0 5px transparent; }
}

/* Заголовок и техническая колонка стоят рядом: слева обещание словами, справа те же обещания
   числами. Колонка набрана моноширинным не для вида — это машинные значения (формат, хронометраж,
   битрейт), и правило «скопировал и вставил в поле» здесь работает буквально. */
.ld-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
}

/* Запасные значения в var() обязательны: clamp() рушится ЦЕЛИКОМ, если хоть одна переменная внутри
   не резолвится, — свойство становится невалидным, и font-size молча наследует 16px от body. Именно
   так заголовок и «терялся», когда браузер держал в кэше tokens.css без новых кеглей. */
.ld-h1 {
    margin: 18px 0 0;
    max-width: 15ch;
    font-family: var(--fb-display);
    font-size: clamp(var(--fb-fs-46, 46px), 8.2vw, var(--fb-fs-84, 84px));
    font-weight: 800;
    line-height: var(--fb-lh-display);
    letter-spacing: var(--fb-tr-display);
    color: var(--fb-ink);
}

.ld-spec {
    display: grid;
    gap: 0;
    min-width: 230px;
    padding-bottom: 6px;
}

.ld-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    border-bottom: var(--fb-div);
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-12);
}

.ld-spec-row:first-child { border-top: var(--fb-div); }
.ld-spec-key { color: var(--fb-ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.ld-spec-val { color: var(--fb-ink); white-space: nowrap; }

.ld-h1 em { font-style: normal; color: var(--fb-primary); }

.ld-lead {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: var(--fb-fs-20);
    line-height: 1.5;
    color: var(--fb-ink-dim);
}

.ld-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.ld-cta-note {
    font-size: var(--fb-fs-13);
    color: var(--fb-ink-faint);
}

/* ---------- партия ----------

   Главный аргумент продукта, нарисованный вместо того, чтобы быть описанным: одна цепочка даёт не
   ролик, а ПАРТИЮ роликов. Полоса уходит за оба края экрана и растворяется маской — то, что она
   продолжается, и есть всё сообщение.

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

   Анимации у полосы нет. Единственное, что здесь движется, — точка на кадре, который сейчас
   собирается, и это тот же пульс 1.6s, что и в приложении: работа идёт. */

.ld-batch {
    position: relative;
    margin-top: 44px;
    /* Полоса стоит ВНЕ .ld-wrap и потому занимает всю ширину секции сама, без арифметики.

       Прежний приём — width: 100vw плюс отрицательный margin — давал горизонтальную прокрутку на
       толщину вертикального скроллбара: vw меряет viewport ВМЕСТЕ с ним, а доступная ширина
       страницы уже без него. Разница маленькая (обычно 8–17px), но полоса прокрутки внизу экрана
       заметна сразу. */
    width: 100%;
    padding: 4px 0 2px;
    overflow: hidden;
    /* Растворение по краям вместо обрезки: обрезка читается как «здесь список кончился». */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Первый кадр выравнивается по левому краю контейнера страницы — считается от ширины РОДИТЕЛЯ,
   а не от vw, по той же причине. */
.ld-batch-row {
    display: flex;
    gap: 10px;
    padding-left: max(24px, calc((100% - 1080px) / 2 + 24px));
}

.ld-shot {
    position: relative;
    flex: none;
    width: 84px;
    aspect-ratio: 9 / 16;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--fb-line);
    border-radius: 8px;
    background: var(--fb-sunken);
    overflow: hidden;
}

/* Верхняя кромка в цвете типа — та же, что у ноды на канвасе и у плитки раздела. */
.ld-shot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 9px;
    right: 9px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--tint, var(--fb-t-video));
}

.ld-shot-name {
    font-family: var(--fb-mono);
    font-size: 9.5px;
    line-height: 1.2;
    color: var(--fb-ink-faint);
    white-space: nowrap;
}

/* Готовый кадр чуть светлее пустого: партия должна читаться как «эти уже есть, эти будут». */
.ld-shot.is-done { background: var(--fb-surface); }
.ld-shot.is-done .ld-shot-name { color: var(--fb-ink-dim); }

/* Тот, который собирается прямо сейчас. Кольцо — та же форма записи, что у выделенной ноды. */
.ld-shot.is-live {
    border-color: var(--fb-primary);
    box-shadow: var(--fb-ring);
}

.ld-shot-live-dot {
    position: absolute;
    top: 10px;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fb-primary);
    animation: ld-pulse 1.6s ease-in-out infinite;
}

/* Подпись под полосой — единственное место, где число названо словами. */
.ld-batch-note {
    margin-top: 14px;
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-12);
    color: var(--fb-ink-faint);
}

.ld-batch-note b {
    font-family: var(--fb-display);
    font-size: var(--fb-fs-20);
    font-weight: 800;
    letter-spacing: var(--fb-tr-head);
    color: var(--fb-ink);
}

/* ---------- схема цепочки ----------

   Главный элемент страницы и единственная «картинка» на ней. Фотографий и иллюстраций в системе нет
   вовсе: то, чем продукт отличается от соседнего, — это цепочка шагов, и нарисована она тем же
   языком, что и настоящий канвас. Провода бегут пунктиром (0.9s) — вторая и последняя постоянная
   анимация системы, означает «работа идёт». */

.ld-pipe {
    margin-top: 54px;
    padding: 22px 20px 18px;
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-r-page);
    background: var(--fb-canvas);
    background-image: radial-gradient(circle at 1px 1px, var(--grid-line) 1px, transparent 0);
    background-size: var(--fb-dot-step) var(--fb-dot-step);
    overflow-x: auto;
}

.ld-pipe svg { display: block; min-width: 720px; width: 100%; height: auto; }

.ld-wire {
    fill: none;
    stroke: var(--fb-wire);
    stroke-width: 2;
}

.ld-wire-live {
    fill: none;
    stroke: var(--fb-primary);
    stroke-width: 2;
    stroke-dasharray: 5 7;
    opacity: .85;
    animation: ld-dash .9s linear infinite;
}

@keyframes ld-dash {
    to { stroke-dashoffset: -12; }
}

.ld-node-box {
    fill: var(--fb-surface);
    stroke: var(--fb-line);
    stroke-width: 1;
}

.ld-node-rail { stroke-width: 2.5; stroke-linecap: round; }

.ld-node-name {
    fill: var(--fb-ink);
    font-family: var(--fb-ui);
    font-size: 13px;
    font-weight: 600;
}

.ld-node-key {
    fill: var(--fb-ink-faint);
    font-family: var(--fb-mono);
    font-size: 10px;
}

.ld-pipe-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: var(--fb-div);
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-11);
    color: var(--fb-ink-faint);
}

.ld-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.ld-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot);
}

/* ---------- разделы ---------- */

.ld-section {
    padding: 72px 0;
    border-bottom: 1px solid var(--fb-line);
}

/* Эйрбоу раздела — тип артефакта, с которым раздел работает, и точка в его цвете. Порядок разделов
   повторяет производственную цепочку: это не украшение, а то же содержание, что и на схеме выше. */
.ld-sec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-11);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
}

.ld-h2 {
    margin: 14px 0 0;
    max-width: 22ch;
    font-family: var(--fb-display);
    font-size: clamp(var(--fb-fs-26, 26px), 4vw, var(--fb-fs-46, 46px));
    font-weight: 800;
    line-height: var(--fb-lh-head);
    letter-spacing: var(--fb-tr-head);
}

.ld-sec-lead {
    margin: 16px 0 0;
    max-width: 62ch;
    font-size: var(--fb-fs-16);
    line-height: var(--fb-lh-text);
    color: var(--fb-ink-dim);
}

.ld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.ld-tile {
    padding: 20px 20px 18px;
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-r-card);
    background: var(--fb-grad);
    box-shadow: var(--fb-inner-hi);
}

/* Верхняя кромка плитки в цвете типа — тот же приём, что у ноды на канвасе. */
.ld-tile[data-type] { border-top: 2px solid var(--tint, var(--fb-line)); }

.ld-tile h3 {
    margin: 0 0 8px;
    font-family: var(--fb-display);
    font-size: var(--fb-fs-20);
    font-weight: 700;
    letter-spacing: var(--fb-tr-head);
}

.ld-tile p {
    margin: 0;
    font-size: var(--fb-fs-14);
    line-height: var(--fb-lh-text);
    color: var(--fb-ink-dim);
}

.ld-tile-key {
    display: block;
    margin-bottom: 10px;
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-10);
    color: var(--fb-ink-faint);
}

/* ---------- точки одобрения ---------- */

/* Жёлтый на всём сайте встречается ровно здесь и означает то же, что в приложении: остановилось,
   нужен человек. Второго применения у него быть не может (§2). */
.ld-stop {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border: 1px solid var(--fb-line);
    border-left: 3px solid var(--fb-await);
    border-radius: var(--fb-r-card);
    background: var(--fb-surface);
}

.ld-stop + .ld-stop { margin-top: 10px; }

.ld-stop-num {
    flex: none;
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-12);
    color: var(--fb-await);
    padding-top: 2px;
}

.ld-stop h3 {
    margin: 0 0 4px;
    font-size: var(--fb-fs-16);
    font-weight: 600;
}

.ld-stop p {
    margin: 0;
    font-size: var(--fb-fs-14);
    color: var(--fb-ink-dim);
}

/* ---------- цена ---------- */

.ld-price {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.ld-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-r-card);
    background: var(--fb-grad);
    box-shadow: var(--fb-inner-hi);
}

.ld-plan.is-featured {
    border-color: var(--fb-primary);
    box-shadow: var(--fb-inner-hi), var(--fb-ring);
}

.ld-plan-badge {
    position: absolute;
    top: -9px;
    right: 16px;
    padding: 3px 8px;
    border-radius: var(--fb-r-chip);
    background: var(--fb-primary);
    color: var(--fb-on-primary);
    font-size: var(--fb-fs-10);
    font-weight: 600;
    letter-spacing: .04em;
}

.ld-plan h3 {
    margin: 0;
    font-family: var(--fb-display);
    font-size: var(--fb-fs-20);
    font-weight: 700;
    letter-spacing: var(--fb-tr-head);
}

.ld-plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 10px 0 2px;
}

.ld-plan-amount {
    font-family: var(--fb-display);
    font-size: var(--fb-fs-34);
    font-weight: 800;
    line-height: var(--fb-lh-display);
    letter-spacing: var(--fb-tr-display);
}

.ld-plan-period { font-size: var(--fb-fs-13); color: var(--fb-ink-faint); }

.ld-plan-credits {
    font-family: var(--fb-mono);
    font-size: var(--fb-fs-12);
    color: var(--fb-ink-dim);
}

.ld-plan ul {
    flex: 1 1 auto;
    margin: 14px 0 18px;
    padding: 14px 0 0;
    border-top: var(--fb-div);
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: var(--fb-fs-14);
    color: var(--fb-ink-dim);
}

/* ---------- переключатель валюты ---------- */

.ld-currency {
    display: inline-flex;
    padding: 2px;
    margin-left: 12px;
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-r-in);
    background: var(--fb-sunken);
    vertical-align: middle;
}

.ld-currency button {
    min-width: 34px;
    height: 28px;
    border: none;
    border-radius: var(--fb-r-chip);
    background: transparent;
    color: var(--fb-ink-dim);
    font-family: var(--fb-ui);
    font-size: var(--fb-fs-14);
    font-weight: 600;
    cursor: pointer;
}

.ld-currency button[aria-pressed="true"] { background: var(--fb-surface); color: var(--fb-ink); }
.ld-currency button:focus-visible { outline: none; box-shadow: var(--fb-ring); }

/* ---------- финал и подвал ---------- */

.ld-final {
    padding: 84px 0;
    text-align: center;
    border-bottom: 1px solid var(--fb-line);
}

.ld-final .ld-h2 { margin-inline: auto; }
.ld-final .ld-sec-lead { margin-inline: auto; }
.ld-final .ld-cta { justify-content: center; }

.ld-foot {
    padding: 28px 0 40px;
    font-size: var(--fb-fs-13);
    color: var(--fb-ink-faint);
}

.ld-foot-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ld-foot a { color: var(--fb-ink-dim); text-decoration: none; }
.ld-foot a:hover { color: var(--fb-ink); }
.ld-foot-spacer { margin-left: auto; }

/* ---------- правовые страницы ---------- */

.ld-doc { padding: 110px 0 60px; max-width: 72ch; }
.ld-doc h1 {
    font-family: var(--fb-display);
    font-size: var(--fb-fs-34);
    font-weight: 800;
    letter-spacing: var(--fb-tr-head);
    line-height: var(--fb-lh-head);
    margin: 0 0 8px;
}
.ld-doc h2 {
    font-family: var(--fb-display);
    font-size: var(--fb-fs-20);
    font-weight: 700;
    letter-spacing: var(--fb-tr-head);
    margin: 34px 0 10px;
}
.ld-doc p, .ld-doc li { color: var(--fb-ink-dim); font-size: var(--fb-fs-16); }
.ld-doc ul { padding-left: 20px; display: grid; gap: 6px; }
.ld-doc-date { font-family: var(--fb-mono); font-size: var(--fb-fs-12); color: var(--fb-ink-faint); }

/* ---------- узкие окна ---------- */

@media (max-width: 900px) {
    .ld-hero-top { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
    .ld-spec { min-width: 0; padding-bottom: 0; }
}

@media (max-width: 720px) {
    .ld-hero { padding: 104px 0 56px; }
    .ld-shot { width: 66px; }
    .ld-section { padding: 52px 0; }
    .ld-nav { gap: 14px; }
    .ld-nav .ld-hide-sm { display: none; }
    .ld-lead { font-size: var(--fb-fs-16); }
}