/* =============================================================================
 * KISELEV LAB — стиль, которого нет в marketing.css.
 * -----------------------------------------------------------------------------
 * Классы `.n-*` (n = new) — блоки новой модели: шаги, каталог программ,
 * абонемент, расписание встреч, таймлайн доступа. Ниже — шапка сайта
 * (логотип KL, плоское меню с разделителем), неактивные кнопки и юр. страницы.
 * Всё под `.mkt`, как и остальной гостевой стиль.
 * ============================================================================= */

/* ── Модель «запись + подписка»: три шага ─────────────────────────────────── */
.mkt .n-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mkt .n-step { position: relative; padding: 20px; border-radius: 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mkt .n-step .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.mkt .n-step h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.mkt .n-step p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.mkt .n-step.is-sub { border-color: hsl(var(--primary) / .45); background: linear-gradient(160deg, hsl(var(--accent) / .6) 0%, hsl(var(--card)) 62%); }

/* ── Карточка программы в каталоге ────────────────────────────────────────── */
.mkt .n-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mkt .n-prog { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mkt .n-prog .top { display: flex; align-items: flex-start; gap: 12px; }
.mkt .n-prog .mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; background: hsl(var(--c) / .14); color: hsl(var(--c)); --c: var(--kg-ui-steel); }
.mkt .n-prog h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mkt .n-prog .who { font-family: var(--font-mono); font-size: 10.5px; color: hsl(var(--muted-foreground)); margin-top: 3px; }
.mkt .n-prog p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.mkt .n-prog .vol { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt .n-prog .vol span { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 7px;
  background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.mkt .n-prog .foot { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed hsl(var(--border)); }
.mkt .n-prog .pr { display: flex; flex-direction: column; gap: 2px; }
.mkt .n-prog .pr b { font-family: var(--font-mono); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.mkt .n-prog .pr span { font-size: 11px; color: hsl(var(--muted-foreground)); }
.mkt .n-prog .foot .btn { margin-left: auto; }
.mkt .n-prog.is-all { grid-column: 1 / -1; border-color: hsl(var(--primary) / .5);
  background: linear-gradient(150deg, hsl(var(--accent)) 0%, hsl(var(--card)) 58%); }
.mkt .n-prog.is-all .inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: center; }
.mkt .n-prog.is-all h3 { font-size: 21px; }

/* ── Подписка: главный новый продукт ──────────────────────────────────────── */
.mkt .n-sub { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; border-radius: 22px; overflow: hidden;
  border: 1px solid hsl(var(--primary) / .4); background: hsl(var(--card)); }
.mkt .n-sub .left { padding: 30px 32px; }
.mkt .n-sub .right { padding: 30px 32px; background: linear-gradient(165deg, hsl(var(--accent)) 0%, hsl(var(--card)) 75%);
  border-left: 1px solid hsl(var(--border)); display: flex; flex-direction: column; }
.mkt .n-sub h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; }
.mkt .n-sub .lead { font-size: 13.5px; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-bottom: 18px; }
.mkt .n-inc { display: grid; gap: 10px; }
/* Только ПРЯМОЙ потомок: без «>» правило ловило и внутренний div с
   заголовком и текстом — заголовок становился флекс-элементом рядом с
   описанием и сжимался до одного слова в строку. */
.mkt .n-inc > div { display: flex; gap: 12px; align-items: flex-start; }
.mkt .n-inc .ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.mkt .n-inc b { display: block; font-size: 13px; margin-bottom: 2px; }
.mkt .n-inc span { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.mkt .n-sub .price { font-family: var(--font-mono); font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.mkt .n-sub .per { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 6px 0 16px; }
.mkt .n-sub .terms { display: grid; gap: 7px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed hsl(var(--border)); }
.mkt .n-sub .terms > div { display: flex; gap: 8px; font-size: 11.5px; color: hsl(var(--muted-foreground)); line-height: 1.45; }
.mkt .n-sub .terms b { color: hsl(var(--foreground)); font-weight: 600; }

/* Расписание встреч подписки */
.mkt .n-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mkt .n-day { padding: 16px 18px; border-radius: 14px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mkt .n-day .d { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: hsl(var(--primary)); margin-bottom: 8px; }
.mkt .n-day .who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mkt .n-day .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: hsl(var(--secondary)); }
.mkt .n-day .who b { display: block; font-size: 13.5px; }
.mkt .n-day .who span { font-size: 11px; color: hsl(var(--muted-foreground)); }
.mkt .n-day p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); }

/* ── Разовые встречи ──────────────────────────────────────────────────────── */
.mkt .n-meet { display: flex; gap: 18px; padding: 22px; border-radius: 18px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.mkt .n-meet img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: hsl(var(--secondary)); }
.mkt .n-meet h3 { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.mkt .n-meet .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--accent-foreground)); margin-bottom: 8px; }
.mkt .n-meet p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
.mkt .n-meet .foot { display: flex; align-items: center; gap: 12px; }
.mkt .n-meet .foot b { font-family: var(--font-mono); font-size: 19px; font-weight: 800; }
.mkt .n-meet .foot span { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.mkt .n-meet .foot .btn { margin-left: auto; }

/* ── Допродажа подписки в заказе ──────────────────────────────────────────── */
.mkt .n-addon { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 14px;
  border-radius: 13px; border: 1px dashed hsl(var(--primary) / .5); background: hsl(var(--accent) / .35); cursor: pointer; }
.mkt .n-addon.on { border-style: solid; background: hsl(var(--accent) / .75); }
.mkt .n-addon input { position: absolute; opacity: 0; pointer-events: none; }
.mkt .n-addon .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid hsl(var(--primary));
  flex-shrink: 0; margin-top: 1px; background: hsl(var(--card)); position: relative; }
.mkt .n-addon.on .box { background: hsl(var(--primary)); }
.mkt .n-addon.on .box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mkt .n-addon .txt b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.mkt .n-addon .txt span { font-size: 11.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

/* ── Было / стало ─────────────────────────────────────────────────────────── */
.mkt .n-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mkt .n-vs .col { padding: 22px; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .6); }
.mkt .n-vs .col.now { border-color: hsl(var(--primary) / .5); background: hsl(var(--card)); }
.mkt .n-vs h3 { font-size: 14px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.mkt .n-vs li { font-size: 12.5px; line-height: 1.5; padding: 5px 0; }

/* ── Таймлайн доступа: покупка → подписка → отмена ────────────────────────── */
.mkt .n-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mkt .n-tl .n-seg .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
.mkt .n-tl .bar { height: 8px; border-radius: 99px; background: hsl(var(--secondary)); margin-bottom: 12px; }
.mkt .n-tl .is-own .bar { background: hsl(var(--kg-ui-mint)); }
.mkt .n-tl .is-sub .bar { background: hsl(var(--primary)); }
.mkt .n-tl .is-off .bar { background: repeating-linear-gradient(90deg, hsl(var(--border)) 0 8px, transparent 8px 14px); }
.mkt .n-tl .txt b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.mkt .n-tl .txt span { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.mkt .n-tl .is-own .lbl { color: hsl(var(--kg-ui-mint)); }
.mkt .n-tl .is-sub .lbl { color: hsl(var(--primary)); }

/* Строка «что входит в цену» на странице программы */
.mkt .n-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mkt .n-split .card { padding: 20px 22px; }
.mkt .n-split .h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }

@media (max-width: 1000px) {
  .mkt .n-steps, .mkt .n-progs, .mkt .n-sub, .mkt .n-week, .mkt .n-vs, .mkt .n-split,
  .mkt .n-prog.is-all .inner { grid-template-columns: 1fr; }
  .mkt .n-sub .right { border-left: 0; border-top: 1px solid hsl(var(--border)); }
}
@media (max-width: 640px) {
  .mkt .n-sub .left, .mkt .n-sub .right { padding: 22px 18px; }
  .mkt .n-meet { flex-direction: column; }
  .mkt .n-prog .foot { flex-wrap: wrap; }
  .mkt .n-prog .foot .btn { margin-left: 0; width: 100%; }
}


/* Скрытые строки заказа. У .sum-row и .n-addon свой display:flex, и он
   перебивает браузерное правило для [hidden] — строка «скидка 0 ₽» оставалась
   на экране. Ловушка общая для любого флекса, поэтому правило одно на весь .mkt. */
.mkt [hidden] { display: none !important; }

/* Программа, которая продаётся только внутри подписки (сейчас Стек24):
   карточка остаётся в каталоге — человек должен видеть, что курс существует,
   — но подаётся как часть подписки, а не как отдельная покупка. */
.mkt .n-prog.is-insub { border-style: dashed; background: hsl(var(--card) / .6); }
.mkt .n-prog.is-insub .mark { opacity: .85; }
.mkt .n-prog.is-insub .pr b { font-size: 18px; color: hsl(var(--primary)); }

/* =============================================================================
 * ШАПКА САЙТА: логотип KL, плоское меню, неактивные кнопки
 * ============================================================================= */

/* Название латиницей — оно шире кириллического, поэтому свой размер и трекинг.
   Подпись под ним осталась моношрифтом, как у портала. */
.mkt .pub-brand b.lab-name { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.mkt .pub-brand i { letter-spacing: .08em; }
.mkt .kgs-mark { letter-spacing: .02em; }

/* Меню плоское: никаких выпадашек (правка владельца 14.09). Пункты длинные —
   «Профессия: Аналитик Битрикс24» не сокращаем, поэтому ужимаем отступы
   и раньше уходим в бургер. */
.mkt .pub-head { gap: 14px; padding: 0 24px; }
.mkt .pub-nav { gap: 0; margin-left: 2px; flex-wrap: nowrap; }
.mkt .pub-nav .item { padding: 8px 9px; font-size: 12.5px; }

/* Разделитель между программами и абонементом: это разные покупки, и видно
   это должно быть раньше, чем человек начнёт читать названия. */
.mkt .nav-sep { width: 1px; height: 18px; background: hsl(var(--border)); margin: 0 9px; flex-shrink: 0; }

.mkt .hdr-acts .btn { height: 34px; font-size: 12.5px; }

/* Бургер раньше: при пяти длинными пунктами меню перестаёт помещаться
   задолго до телефонной ширины. */
@media (max-width: 1180px) {
  .mkt .pub-nav { display: none; }
  .mkt .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .mkt .hdr-acts .btn-ghost { display: none; }   /* в бургере эта кнопка есть */
  .mkt .pub-head { padding: 0 14px; }
}
.mkt .mkt-drawer { top: 62px; }

/* ── Неактивные кнопки ────────────────────────────────────────────────────────
   Кабинета и оплаты на этом домене пока нет. Ссылка в 404 читается как
   «сайт сломан», поэтому сборщик превращает такие ссылки в <span class="is-off">:
   вид кнопки сохраняется, нажатие ничего не делает. Убирается снятием адресов
   из DEAD в build.py — правка одной строки. */
.mkt .is-off { opacity: .45; cursor: not-allowed; pointer-events: none; user-select: none; }
.mkt .btn.is-off { filter: grayscale(.35); }
.mkt .hdr-acts .is-off { pointer-events: auto; }   /* чтобы работала подсказка title */

/* =============================================================================
 * ЮРИДИЧЕСКИЕ СТРАНИЦЫ
 * ============================================================================= */
.mkt .legal-wrap { max-width: 900px; }
.mkt .legal-head { margin-bottom: 26px; }
.mkt .legal-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 16px; }
.mkt .legal-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt .legal-nav a { font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.mkt .legal-nav a:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.mkt .legal-nav a.on { background: hsl(var(--secondary)); color: hsl(var(--foreground)); font-weight: 600; }

/* Документ читают целиком и подолгу: строка короче, межстрочник крупнее,
   заголовки разделов не сливаются с текстом. */
.mkt .legal { max-width: 68ch; font-size: 14px; line-height: 1.7; color: hsl(var(--foreground)); }
.mkt .legal h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
.mkt .legal h3 { font-size: 14.5px; font-weight: 700; margin: 20px 0 8px; }
.mkt .legal p { margin: 0 0 12px; }
.mkt .legal ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.mkt .legal li { margin: 5px 0; }
.mkt .legal a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================
 * ЗАЩИТА ОТ ЧУЖИХ ПРАВИЛ app.css
 * -----------------------------------------------------------------------------
 * app.css писался для кабинета и почти весь БЕЗ скоупа. Сайт грузит его ради
 * токенов, шрифтов и базовых компонентов (.btn, .card, .badge) — и любой
 * совпавший класс молча получает чужую раскладку. marketing.css перекрывает
 * такие классы под `.mkt`, но только те свойства, которые сам задаёт.
 *
 * Проверка на совпадения: голые селекторы app.css (ровно `.class`, без
 * предков), задающие display/grid/position/width, против классов разметки
 * сайта. На 14.09 совпали `.mod` и `.card-h`; остальные (.btn, .pub-head,
 * .grid-2, .stars, .consent…) marketing.css перекрывает сам.
 * ============================================================================= */

/* `.mod` в кабинете — строка списка модулей: grid 34px 1fr auto. Маркетинговый
   `.mod` свой display не задавал и ловил эту сетку: единственный ребёнок
   `.mod-h` попадал в колонку 34 px, заголовок рассыпáлся по одному слову в
   строку, а плашка «8 уроков · 2,9 ч» уезжала поверх текста. */
.mkt .mod { display: block; grid-template-columns: none; gap: 0; padding: 0; }

/* `.card-h` в кабинете — флекс-строка с иконкой. На сайте это просто заголовок
   блока; флекс ему не нужен и мешает переносу длинного текста. */
.mkt .card-h { display: block; }

/* Кнопка-форма (оформление заказа) выключается атрибутом disabled, а не
   классом: это <button>, а не ссылка. Без явного правила она выглядела
   полностью живой — человек жал и ничего не происходило. */
.mkt .btn:disabled, .mkt button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

/* Плашки статистики в шапке страницы. На телефоне flex-wrap оставлял их
   разной ширины (122, 132, 132 px) — колонка выглядела рваной. Сетка в две
   колонки ровняет их по краям, а последняя нечётная занимает всю ширину. */
@media (max-width: 560px) {
  .mkt .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mkt .hstat { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mkt .hstat span { max-width: none; }
}