/* Общая вёрстка публичных страниц OKADAR (владелец 30.09: «весь сайт в одном стиле, чтобы не было разных стилей вёрстки
   на разных страницах»). Здесь - примитивы, одинаковые на главной, «Ценах» и «Поддержке» (далее - «Примеры», 404):
   контейнер и секции, полосы фона, шапка секции (надзаголовок, заголовок, подзаголовок по предложению на строку), кегли
   --pub-* (platform/theme.css), карточка, карточки вариантов и цен, шаги, список с галочками, ряд кнопок, финальный
   призыв. Компоненты одной страницы - в её стилях (главная - platform/landing.css); шапка, футер, кнопки и вопросы
   (.lp-faq) - scripts/shared/chrome.mjs. Подключается ДО стилей страницы. */

body.lp-home, body.lp-page { font-size: var(--pub-body); line-height: 1.6; overflow-wrap: break-word; }
/* Страница без первого экрана (body.lp-page): main тянется до футера, первая секция - с меньшим отступом сверху (под
   шапкой сайта сразу заголовок страницы). */
body.lp-page > main { flex: 1 0 auto; }
.lp { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--page-x); }
.lp-sec { padding-block: var(--pub-sec); }
.lp-sec--first { padding-top: clamp(32px, calc(12px + 4vw), 72px); }
.lp-band--alt { background: var(--bg-section, var(--surface-3)); }

/* Типографика (ТЗ 2026-09-30 §23): заголовок секции - --pub-h2 (у страниц без первого экрана им же набран H1), подзаголовок
   карточки - --pub-h3, основной текст 17-18 px, вводный 18-20 px. */
.lp-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: var(--pub-eyebrow); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.lp-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: 0 0 auto; }
.lp h1, .lp h2 { margin: 0; font-size: var(--pub-h2); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
.lp h3 { margin: 0; font-size: var(--pub-h3); line-height: 1.3; letter-spacing: -.005em; font-weight: 700; text-wrap: balance; }
.lp-lead { margin: 20px 0 0; font-size: var(--pub-lead); line-height: 1.55; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.sec-head { max-width: 860px; margin-bottom: clamp(36px, 4.4vw, 64px); }
/* Шапка полноширинной секции на компьютере - без переноса (владелец 30.09): во всю ширину колонки; заголовок главной -
   в одну строку: --w (ширина заголовка в долях кегля, scripts/landing/template.mjs secH2) → кегль = ширина шапки / --w,
   не больше --pub-h2 и не меньше 38 px; подзаголовок - по предложению на строку (scripts/shared/text.mjs), и каждое
   предложение - в одну строку: --w абзаца (самое длинное предложение, leadFit) → кегль абзаца = ширина шапки / --w, не
   больше --pub-lead и не меньше 17 px. Двухколоночные блоки (.split) - шапка в своей колонке. Без поддержки cqi -
   прежний кегль. */
@media (min-width: 1024px) {
  .lp-sec:not(.split) > .sec-head { max-width: none; container-type: inline-size; }
  .lp-sec:not(.split) > .sec-head h2[style] { font-size: clamp(38px, calc(100cqi / (var(--w) * 1.02)), var(--pub-h2)); }
  .lp-sec:not(.split) > .sec-head .lp-lead { max-width: none; }
  .lp-sec:not(.split) > .sec-head .lp-lead[style] { font-size: clamp(17px, calc(100cqi / (var(--w) * 1.02)), var(--pub-lead)); }
  .lp-sec:not(.split) > .sec-head .lp-lead__s { display: block; }
}
.lp-note { font-size: var(--pub-note); color: var(--muted); }
.ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* Карточка - только там, где элементы действительно независимы (варианты старта, цены, способы связи, требования):
   тонкая рамка, поверхность, один радиус и поля на всех страницах. Плоская, как карточки цен главной: тень и размытие
   стеклянной карточки кабинета (.card в platform/theme.css) сняты. */
.card, .start, .price { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line);
  border-radius: 22px; background: var(--surface-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card > p { margin: 0; color: var(--muted); }
.card--accent { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .06); }
/* Сетка карточек: одна колонка на телефоне, две - с 760 px; карточки ряда - одной высоты. */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Шаги процесса: номер, заголовок и текст шагов одного ряда - в общих строках (subgrid): текст начинается на одной высоте,
   даже если заголовок соседа в две строки. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.step { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 0; padding: 24px 0 28px;
  border-top: 1px solid var(--line-strong); }
.step__n { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.step p { margin: 10px 0 0; color: var(--muted); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Список с галочками. */
.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ticks .ic { color: var(--accent); }

/* Ряд кнопок (первый экран главной, Studio, финальный призыв): перенос строк, на телефоне - кнопки во всю ширину. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-cta > * { min-width: 0; }

/* Варианты старта и цены (главная и «Цены»): независимые варианты - карточки; строки карточек выровнены между собой
   (subgrid): название, цена, описание, строка дней и кнопка соседей - на одной высоте. */
.starts, .prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.start > p:not(.start__price), .price > p:not(.price__v):not(.price__x) { margin: 0; color: var(--muted); }
.start .lp-btn, .price .lp-btn { margin-top: auto; align-self: flex-start; }
.start__price { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 1.6em; }
.start__price b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.start__price span { font-size: 15px; font-weight: 600; color: var(--muted); }
.start__price em { flex-basis: 100%; font-style: normal; font-size: 15px; font-weight: 700; color: var(--accent-text); }
.price__v { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.price__v b { font-size: clamp(40px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.price__v span { font-size: 16px; font-weight: 600; color: var(--muted); }
.price__x { margin: 0; font-size: 15px; font-weight: 700; color: var(--accent-text); }
@media (min-width: 900px) {
  .starts, .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .start { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
    .price { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; }
    .start .lp-btn, .price .lp-btn { align-self: end; justify-self: start; }
  }
}
/* Подпись НДС под ценами - по предложению на строку (владелец 30.09). */
.prices__vat { margin: 10px 0 0; }
.vat__s { display: block; }

/* Финальный призыв (главная, «Цены»): по центру - заголовок, подзаголовок (на компьютере - по предложению на строку),
   кнопки. */
.lp-final { text-align: center; }
.lp-final h2 { margin-inline: auto; max-width: 26ch; }
.lp-final .lp-lead { margin-inline: auto; }
@media (min-width: 1024px) {
  .lp-final .lp-lead { max-width: none; }
  .lp-final .lp-lead__s { display: block; }
}
.lp-final .hero-cta { justify-content: center; }

/* Телефон. */
@media (max-width: 639px) {
  .hero-cta { gap: 10px; }
  .hero-cta .lp-btn { flex: 1 1 100%; }
  .sec-head { margin-bottom: 32px; }
}