/* =============================================================================
 * МАРКЕТИНГОВАЯ (ГОСТЕВАЯ) ЧАСТЬ ПОРТАЛА — стиль страниц из content/marketing/
 * -----------------------------------------------------------------------------
 * Всё заскоуплено под .mkt (её несёт контейнер #public): в app.css уже есть
 * свои .card, .badge, .tariff, .pub-head с другими правилами, и без скоупа
 * кабинет и лендинг переопределяли бы друг друга.
 *
 * Токены (--primary, --kg-ui-*, шрифты) НЕ дублируются: берутся из app.css,
 * поэтому тёмная тема работает здесь сама собой.
 * Источник вёрстки — прототип design-канваса, фрагменты страниц лежат в
 * content/marketing/*.html и правятся без участия кода.
 * ============================================================================= */

.mkt ul { list-style: none; }
.mkt img { max-width: 100%; height: auto; display: block; }
.mkt b, .mkt strong { font-weight: 700; }


 .mkt a:hover{opacity:.82}
 .mkt img{max-width:100%;display:block}

/* buttons — .btn из app.css: 32px, radius 9, 12.5px/600 */
.mkt .btn{height:var(--kg-ctrl-h);padding:0 16px;border-radius:9px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;border:1px solid transparent}
.mkt .btn-primary{background:hsl(var(--primary));color:#fff}
.mkt .btn-ghost{background:hsl(var(--card));color:hsl(var(--muted-foreground));border-color:hsl(var(--border))}
.mkt .btn-dark{background:hsl(220 18% 7%);color:#fff}
.mkt .btn-lg{height:42px;padding:0 22px;font-size:13.5px}
.mkt .btn-link{background:none;border:0;color:hsl(var(--primary));padding:0;height:auto}

/* header */
/* ⚠️ Шапка и подвал — БЕЛЫЕ (`--card`), и это уже проверено на глаз: 21.09
   владелец спросил «хедер и футер одного цвета? если нет — надо как внизу»,
   их перекрасили в цвет полотна («лёгкий беж») — и он сразу отменил:
   «верни обратно, оба белые — хорошо было». Цвет у них общий и был, и
   остаётся; менять — только вместе, второе место в блоке «footer» ниже. */
.mkt .pub-head{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:22px;padding:0 40px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border))}
.mkt .pub-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:hsl(var(--foreground));flex-shrink:0}
/* Размер и скругление знака — в блоке «ШАПКА САЙТА — ОБЩАЯ» в конце файла,
   здесь только заливка и центрирование: держать одно и то же в двух местах
   за пятьсот строк друг от друга — верный способ однажды поправить не то. */
.mkt .kgs-mark{flex-shrink:0;background:hsl(var(--primary));color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-weight:800;font-size:12px}
.mkt .pub-brand b{font-size:14px;font-weight:700;display:block;line-height:1.1}
.mkt .pub-brand i{font-style:normal;font-size:9.5px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.mkt .pub-nav{display:flex;gap:2px;margin-left:6px;align-items:center;position:relative}
.mkt .pub-nav .item{padding:8px 11px;border-radius:8px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground));display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mkt .pub-nav .item.key{color:hsl(var(--foreground));font-weight:600}
.mkt .pub-nav .item.on{background:hsl(var(--secondary));color:hsl(var(--foreground));font-weight:600}
.mkt .hdr-acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
/* Переключатель темы: сайт раньше только слушал prefers-color-scheme, теперь
   можно выбрать явно. Иконки — как в кабинете (та же пара sun/moon), но
   переключаются ЧИСТО CSS: сборка статическая, сервер не знает тему визитёра
   на момент генерации HTML, а JS-переключение иконки после отрисовки мигало
   бы неправильной секунду. Три состояния — та же лестница токенов, что у
   остального дизайна: голая пара — светлая тема (по умолчанию), медиа-запрос —
   системная тёмная (если явно не выбрана светлая), атрибут — явный выбор. */
#btn-theme .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #btn-theme .ic-sun{display:block}
  :root:not([data-theme="light"]) #btn-theme .ic-moon{display:none}
}
:root[data-theme="dark"] #btn-theme .ic-sun{display:block}
:root[data-theme="dark"] #btn-theme .ic-moon{display:none}
.mkt .hdr-phone{font-family:var(--font-mono);font-size:12px;font-weight:600;color:hsl(var(--foreground));margin-right:8px}
.mkt .drop{position:absolute;top:44px;left:0;width:330px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;box-shadow:0 18px 40px -14px rgb(14 16 20 / .25);padding:8px;z-index:40}
.mkt .drop .lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--muted-foreground));padding:8px 11px 6px}
.mkt .drop a{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:9px;color:hsl(var(--foreground));font-size:12.5px;font-weight:500}
.mkt .drop a.key{font-weight:700}
.mkt .drop a.hover{background:hsl(var(--accent))}
.mkt .drop a i{font-style:normal;color:hsl(var(--muted-foreground));font-family:var(--font-mono);font-size:11px;white-space:nowrap}
.mkt .drop .sep{height:1px;background:hsl(var(--border));margin:6px 8px}
.mkt .steps{display:flex;align-items:center;gap:8px;margin-left:10px;font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground))}
.mkt .steps b{color:hsl(var(--foreground))} .mkt .steps .on{color:hsl(var(--primary))}

/* layout */
.mkt .wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.mkt .wrap-narrow{max-width:900px;margin:0 auto;padding:0 26px}
.mkt .sec{margin:56px 0}
.mkt .sec-h{margin-bottom:22px;max-width:760px}
.mkt .sec-h h2{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.mkt .sec-h p{color:hsl(var(--muted-foreground));font-size:13.5px;line-height:1.6}
.mkt .eyebrow{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--accent-foreground));margin-bottom:10px}
.mkt .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:hsl(var(--primary));flex-shrink:0}
.mkt .crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));margin:20px 0 14px}
.mkt .crumb b{color:hsl(var(--foreground))}
.mkt .muted{color:hsl(var(--muted-foreground))}
.mkt .mono{font-family:var(--font-mono)}
.mkt .chips{display:flex;flex-wrap:wrap;gap:6px}
.mkt .chip{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.03em;padding:3px 8px;border-radius:6px;background:hsl(var(--secondary));color:hsl(var(--foreground))}
.mkt .badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:7px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;--c:var(--kg-ui-steel);color:hsl(var(--c));background:hsl(var(--c) / var(--kg-ui-fill))}
.mkt .badge.b-orange{--c:var(--kg-ui-orange)} .mkt .badge.b-mint{--c:var(--kg-ui-mint)} .mkt .badge.b-purple{--c:var(--kg-ui-purple)} .mkt .badge.b-blue{--c:var(--kg-ui-blue)} .mkt .badge.b-teal{--c:var(--kg-ui-teal)} .mkt .badge.b-yellow{--c:var(--kg-ui-yellow)} .mkt .badge.b-red{--c:var(--kg-ui-red)}
.mkt .badge.b-solid{background:hsl(var(--primary));color:#fff}
.mkt .lock{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:hsl(var(--kg-ui-purple));background:hsl(var(--kg-ui-purple) / .12);padding:3px 8px;border-radius:6px;white-space:nowrap}

/* hero */
.mkt .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding:40px 44px;border-radius:24px;background:linear-gradient(155deg,hsl(var(--accent)) 0%,hsl(var(--card)) 60%);border:1px solid hsl(var(--border));margin:24px 0 0}
.mkt .hero h1{margin:0 0 14px;font-size:36px;line-height:1.14;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.mkt .hero h1 small{display:block;font-size:22px;font-weight:600;color:hsl(var(--muted-foreground));letter-spacing:-.01em;margin-top:6px}
.mkt .hero .lead{margin:0 0 22px;color:hsl(var(--muted-foreground));font-size:14.5px;line-height:1.65;max-width:56ch}
.mkt .hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.mkt .hero-stats{display:flex;gap:10px;flex-wrap:wrap}
/* ⚠️ `center`, а НЕ `baseline` (правка владельца 21.09: «цифры и текст на
   разном уровне»). По базовой линии цифра равняется на ПЕРВУЮ строку подписи,
   поэтому у однострочной плашки всё выглядело ровно, а у двухстрочной цифра
   оказывалась прижата к её верху. Видно только там, где подпись переносится,
   — то есть на снимке, а не в разметке. */
.mkt .hstat{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;background:hsl(var(--card) / .85);border:1px solid hsl(var(--border))}
.mkt .hstat b{font-family:var(--font-mono);font-size:18px;font-weight:800;letter-spacing:-.01em}
.mkt .hstat span{font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.3;max-width:15ch}
/* герой главной: КПИ строкой НАД фото, а не под лидом — не должны переноситься на вторую строку */
.mkt .hero-visual{display:flex;flex-direction:column;gap:12px}
.mkt .hero-kpis{display:flex;gap:8px}
.mkt .hero-kpi{flex:1;min-width:0;display:flex;align-items:center;text-align:left;gap:8px;padding:9px 10px;border-radius:12px;background:hsl(var(--card) / .9);border:1px solid hsl(var(--border))}
.mkt .hero-kpi svg{color:hsl(var(--primary));flex-shrink:0}
.mkt .hero-kpi .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.mkt .hero-kpi b{font-family:var(--font-mono);font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1}
.mkt .hero-kpi span{font-size:9.5px;color:hsl(var(--muted-foreground));line-height:1.2}
.mkt .hero-photo{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:380px}
/* Без подложки-градиента: фото само мягко растворяется у нижнего края, а не
   обрывается жёсткой линией — так не видно, что снимок вырезан по пояс. */
.mkt .hero-photo img{position:relative;width:88%;max-width:420px;filter:drop-shadow(0 18px 24px rgb(14 16 20 / .18));
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.mkt .hero-cap{position:absolute;left:0;bottom:22px;padding:10px 14px;border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:0 8px 20px -10px rgb(14 16 20 / .25)}
.mkt .hero-cap b{display:block;font-size:13px}
.mkt .hero-cap span{font-size:11px;color:hsl(var(--muted-foreground));font-family:var(--font-mono)}
.mkt .hero-cap.r{left:auto;right:0}
.mkt .hero-side{padding:22px 24px;border-radius:18px;background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:0 20px 40px -24px rgb(14 16 20 / .25)}
.mkt .hero-side .t{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:8px}
.mkt .hero-side .p{font-family:var(--font-mono);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mkt .hero-side .p .u{font-size:16px;color:hsl(var(--muted-foreground));font-weight:600;margin-left:8px;text-decoration:none}
.mkt .hero-side .ps{font-size:11.5px;color:hsl(var(--muted-foreground));margin:6px 0 14px}
.mkt .hero-side .btn{width:100%;margin-top:14px}
.mkt .hero-side .fine{font-size:11px;color:hsl(var(--muted-foreground));text-align:center;margin-top:8px}
.mkt .sched{padding:16px 18px;border-radius:14px;background:hsl(var(--secondary) / .5);border:1px solid hsl(var(--border));margin-top:16px}
.mkt .sched h3{font-size:12.5px;font-weight:700;margin-bottom:8px}
.mkt .sched .row{display:flex;gap:12px;padding:5px 0;font-size:12px;border-top:1px dashed hsl(var(--border))}
.mkt .sched .row:first-of-type{border-top:0}
.mkt .sched .row b{font-family:var(--font-mono);font-size:11px;min-width:118px;color:hsl(var(--foreground))}
.mkt .sched .row span{color:hsl(var(--muted-foreground))}

/* lists */
.mkt .ul-check li, .mkt .ul-file li{display:flex;gap:8px;font-size:12.5px;line-height:1.45;padding:3px 0}
/* ul-dot: маркер ВЫНЕСЕН влево абсолютным позиционированием, а не отдельной
   флекс-колонкой — иначе текст пункта уезжал от левого края на ширину
   маркера+gap и не совпадал с абзацем над списком.
   ⚠️ Селектор нарочно `ul.ul-dot > li`, а не `.ul-dot li`: у последнего та же
   специфичность, что и у чужих «.контекст li» (например `.n-vs li`), и чей
   `padding` победит, решал бы порядок файлов в `<link>`, а не смысл. С этим
   селектором список сам отвечает за отступ текста И маркера — они не могут
   разъехаться, потому что оба правила выше по специфичности любого «.foo li». */
.mkt ul.ul-dot > li{position:relative;padding:3px 0 3px 14px;font-size:12.5px;line-height:1.45}
.mkt .ul-check li svg{flex-shrink:0;margin-top:3px;color:hsl(var(--kg-ui-mint))}
/* ⚠️ Строка «это в абонементе» БОЛЬШЕ НЕ ЗАЧЁРКИВАЕТСЯ (правка владельца
   21.09: «перечёркнуто — не надо, пусть ссылкой будет»). `line-through`
   ложился и на ссылку, то есть перечёркнутым оказывалось именно то, куда
   человека зовут. Теперь это не «вычеркнуто», а «можно добавить»: строка
   приглушена, а галочка в разметке заменена на плюс — галочка у того, что
   не входит, читается как «входит». */
.mkt .ul-check li.no{color:hsl(var(--muted-foreground))}
.mkt .ul-check li.no svg{color:hsl(var(--primary) / .55)}
/* Ссылка внутри зачёркнутого пункта (например, "— в абонементе") обязана
   выглядеть кликабельной, а не тонуть в line-through всей строки. */
.mkt .ul-check li.no a{color:hsl(var(--primary));text-decoration:underline;text-decoration-color:hsl(var(--primary) / .5)}
.mkt .ul-check li.no a:hover{text-decoration-color:hsl(var(--primary))}
.mkt ul.ul-dot > li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:hsl(var(--primary))}
.mkt .ul-file li::before{content:"";width:12px;height:14px;flex-shrink:0;margin-top:3px;border:1.5px solid hsl(var(--kg-ui-steel));border-radius:2px;background:linear-gradient(hsl(var(--kg-ui-steel) / .25),hsl(var(--kg-ui-steel) / .25)) 2px 6px / 6px 1.5px no-repeat}

/* trust strip: тизеры без своей рамки — просто иконка и текст на фоне страницы */
/* Отступы по бокам — ровно как у hero (padding 44px), чтобы первая и
   последняя плашка начинались/заканчивались на одной вертикали с текстом
   hero, а не были шире него. Колонки — по содержимому (max-content) +
   justify-content:space-between: при 1fr-колонках короткие подписи оставляли
   свободное место внутри своей колонки, и видимый зазор между соседними
   плашками получался разным (зависел от длины текста), а не от gap. */
.mkt .trust{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:18px;margin:16px 0 0;padding:0 44px}
.mkt .trust div,.mkt .trust a{display:flex;align-items:center;gap:12px;padding:4px 0}
.mkt .trust a{color:inherit;text-decoration:none;border-radius:8px}
.mkt .trust a:hover .t b{color:hsl(var(--primary))}
.mkt .trust svg{color:hsl(var(--primary));flex-shrink:0}
.mkt .trust .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.mkt .trust b{display:block;font-family:var(--font-mono);font-size:15px;font-weight:800;letter-spacing:-.01em}
.mkt .trust span{font-size:11px;color:hsl(var(--muted-foreground));line-height:1.35}

/* generic card grids */
.mkt .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mkt .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mkt .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mkt .grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mkt .card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;padding:18px 20px}
.mkt .card h3{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:6px}
.mkt .card h4{font-size:13px;font-weight:700;margin-bottom:4px}
.mkt .card p{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.55}
.mkt .card .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--accent-foreground));margin-bottom:8px;display:block}
.mkt .card .pct{font-family:var(--font-mono);font-size:22px;font-weight:800;color:hsl(var(--primary));line-height:1;margin-bottom:8px}
.mkt .card .pct small{font-size:10px;color:hsl(var(--muted-foreground));font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-left:4px}
.mkt .card.dim{background:hsl(var(--card) / .55)}
.mkt .card.acc{border-color:hsl(var(--primary) / .45);background:linear-gradient(160deg,hsl(var(--accent) / .55) 0%,hsl(var(--card)) 65%)}
.mkt .card .num{font-family:var(--font-mono);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:8px}

/* program blocks & modules */
.mkt .blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.mkt .block{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.mkt .block .n{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:800;font-size:11.5px;flex-shrink:0;background:hsl(var(--c) / .14);color:hsl(var(--c))}
.mkt .block b{display:block;font-size:13px}
.mkt .block i{font-style:normal;font-size:10.5px;color:hsl(var(--muted-foreground));font-family:var(--font-mono)}
.mkt .block-intro{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:13px;background:hsl(var(--secondary) / .5);border:1px solid hsl(var(--border));font-size:13px;line-height:1.55;margin:26px 0 12px}
.mkt .block-intro .n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:800;font-size:11px;flex-shrink:0;background:hsl(var(--c) / .14);color:hsl(var(--c))}
.mkt .mods{display:flex;flex-direction:column;gap:10px}
.mkt .mod{border-radius:14px;background:hsl(var(--card));border:1px solid hsl(var(--border));overflow:hidden}
.mkt .mod-h{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none}
.mkt .mod-h::-webkit-details-marker{display:none}
.mkt .mod-h .n{font-family:var(--font-mono);font-size:11px;font-weight:700;color:hsl(var(--muted-foreground));min-width:26px}
.mkt .mod-h h3{font-size:14px;font-weight:700;flex:1;min-width:0}
.mkt .mod-h .meta{display:flex;gap:6px;align-items:center;flex-shrink:0}
.mkt .mod-h .meta span{font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground));padding:3px 8px;border-radius:6px;background:hsl(var(--secondary))}
.mkt .mod-h .chev{flex-shrink:0;color:hsl(var(--muted-foreground));transition:transform .18s}
.mkt .mod[open] .mod-h .chev{transform:rotate(180deg)}
.mkt .mod-b{padding:0 18px 18px 58px;border-top:1px solid hsl(var(--border));padding-top:14px}
.mkt .mod-lessons{display:flex;flex-direction:column;list-style:none;counter-reset:les}
.mkt .mod-lessons li{counter-increment:les;position:relative;padding:7px 0 7px 24px;font-size:12.5px;line-height:1.4;color:hsl(var(--foreground))}
.mkt .mod-lessons li::before{content:counter(les);position:absolute;left:0;top:7px;width:18px;font-family:var(--font-mono);font-size:10px;color:hsl(var(--muted-foreground))}
.mkt .mod-lessons li+li{border-top:1px solid hsl(var(--border))}
/* Ещё не снятое (см. `soonNote` в program.json): показываем, но НИКОГДА не
   выдаём за готовое — приглушённо, пунктиром и со словом «снимем к …».
   Оба класса заданы с предком: голый `.soon` в marketing.css уже занят
   карточкой приложения, а `.is-soon` — четырьмя правилами в app.css. */
.mkt .mod.is-soon{border-style:dashed;background:hsl(var(--card) / .55)}
.mkt .mod.is-soon .mod-h h3,.mkt .mod.is-soon .mod-h .n{color:hsl(var(--muted-foreground))}
.mkt .mod-h .meta .soon{font-style:normal;color:hsl(var(--primary))}
.mkt .mod-lessons li.is-soon{color:hsl(var(--muted-foreground))}
.mkt .mod-lessons li.is-soon::after{content:'скоро';margin-left:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--primary))}
/* В модуле, которого ещё нет ЦЕЛИКОМ, это сказано в его плашке — повторять
   у каждой из семи строк незачем. */
.mkt .mod.is-soon .mod-lessons li.is-soon::after{content:none}
/* ⚠️ На телефоне строка модуля — СЕТКА, а не флекс: у `.meta` стоит
   `flex-shrink:0`, поэтому во флексе сжимался заголовок — он рассыпáлся по
   одному слову в строку, а плашка наезжала на него сверху (видно только
   снимком на 390 px). Плашка уходит под заголовок отдельной строкой. */
@media(max-width:720px){
  .mkt .mod-h{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n title chev" ". meta meta";gap:8px 12px;align-items:center}
  .mkt .mod-h .n{grid-area:n;align-self:start;padding-top:2px}
  .mkt .mod-h h3{grid-area:title}
  .mkt .mod-h .chev{grid-area:chev;align-self:start;margin-top:4px}
  .mkt .mod-h .meta{grid-area:meta;flex-wrap:wrap}
}
.mkt .mod-b .after{font-size:12.5px;line-height:1.55;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:hsl(var(--accent) / .5)}
.mkt .mod-b .after b{color:hsl(var(--accent-foreground))}
.mkt .mod-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.mkt .mod-cols h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:6px}
.mkt .mod-cols li{font-size:12px}
.mkt .mod .live{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;padding:9px 12px;border-radius:10px;background:hsl(var(--kg-ui-purple) / .08);margin-top:12px}
.mkt .mod .live b{color:hsl(var(--kg-ui-purple))}
.mkt .mod .dz{font-size:12px;color:hsl(var(--muted-foreground));margin-top:8px}
.mkt .mod .dz b{color:hsl(var(--foreground))}
.mkt .mega{border-color:hsl(var(--kg-ui-purple) / .4)}
.mkt .parts li{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-top:1px dashed hsl(var(--border))}
.mkt .parts li:first-child{border-top:0}
.mkt .parts li i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground));white-space:nowrap}
.mkt .lock-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:hsl(var(--kg-ui-purple) / .08);border:1px solid hsl(var(--kg-ui-purple) / .25);font-size:12.5px;line-height:1.55;margin:26px 0 12px}
.mkt .lock-note svg{flex-shrink:0;color:hsl(var(--kg-ui-purple));margin-top:2px}

/* timeline */
.mkt .tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mkt .tl .card h4{font-size:12.5px;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mkt .tl .row{display:flex;gap:12px;padding:7px 0;border-top:1px dashed hsl(var(--border));font-size:12.5px}
.mkt .tl .row:first-of-type{border-top:0}
.mkt .tl .row b{font-family:var(--font-mono);font-size:11px;min-width:112px;color:hsl(var(--foreground));white-space:nowrap}
.mkt .tl .row span{color:hsl(var(--muted-foreground))}
.mkt .tl-ends{display:flex;gap:10px;margin-top:12px}
.mkt .tl-ends div{flex:1;display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--card));font-size:12.5px}
.mkt .tl-ends b{font-family:var(--font-mono);font-size:11px;color:hsl(var(--primary));white-space:nowrap}

/* tariffs */
.mkt .tariffs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mkt .tariffs.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.mkt .tariff{display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:16px;background:hsl(var(--card));border:1px solid hsl(var(--border));position:relative}
.mkt .tariff.pop{border-color:hsl(var(--primary));background:linear-gradient(160deg,hsl(var(--accent)) 0%,hsl(var(--card)) 70%)}
.mkt .tariff .ttag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.mkt .tariff h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.mkt .tariff .price{font-family:var(--font-mono);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mkt .tariff .price s{font-size:14px;color:hsl(var(--muted-foreground));font-weight:600;margin-left:6px}
.mkt .tariff .sub{font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5;min-height:36px}
.mkt .tariff ul{display:flex;flex-direction:column;gap:2px}
.mkt .tariff .ul-check li{font-size:12px;padding:2px 0}
.mkt .tariff .incl{margin-top:6px;padding-top:10px;border-top:1px dashed hsl(var(--border))}
.mkt .tariff .incl .h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--primary));margin-bottom:6px}
.mkt .tariff .incl div{display:flex;flex-direction:column;padding:6px 0}
.mkt .tariff .incl b{font-size:12px;display:flex;justify-content:space-between;gap:8px}
.mkt .tariff .incl b i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));font-weight:600;white-space:nowrap}
.mkt .tariff .incl span{font-size:11px;color:hsl(var(--muted-foreground));line-height:1.4}
.mkt .tariff .btn{margin-top:auto;width:100%}
.mkt .pop-tag{position:absolute;top:-11px;left:18px;background:hsl(var(--primary));color:#fff;font-family:var(--font-mono);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.mkt .note{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border));font-size:12.5px;line-height:1.55;margin-top:14px}
.mkt .note svg{flex-shrink:0;color:hsl(var(--primary));margin-top:2px}
.mkt .note.warn{background:hsl(var(--secondary) / .6)}

/* comparison */
.mkt .cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mkt .cmp .card{padding:20px 22px}
.mkt .cmp .card .tag{margin-bottom:6px}
.mkt .cmp .card h3{font-size:16px;margin-bottom:12px}
.mkt .cmp .bad{background:hsl(var(--card) / .6)}
.mkt .cmp .bad li{color:hsl(var(--muted-foreground))}
.mkt .cmp .bad .ul-dot li::before{background:hsl(var(--muted-foreground) / .5)}
.mkt .cmp .good{border-color:hsl(var(--primary) / .5)}

/* quotes & ratings */
.mkt .rating{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:stretch}
.mkt .rating > .card{display:flex;flex-direction:column;justify-content:center}
.mkt .rating .big{font-family:var(--font-mono);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mkt .rating .big small{font-size:18px;color:hsl(var(--muted-foreground));font-weight:600}
.mkt .stars{display:flex;gap:2px;color:hsl(var(--kg-ui-yellow))}
.mkt .bars{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.mkt .bars div{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground))}
.mkt .bars i{flex:1;height:6px;border-radius:99px;background:hsl(var(--secondary));overflow:hidden;display:block}
.mkt .bars i::before{content:"";display:block;height:100%;width:var(--w);background:hsl(var(--kg-ui-yellow));border-radius:99px}
.mkt .quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mkt .quotes.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mkt .quote{padding:18px 20px;border-radius:14px;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:9px}
.mkt .quote .src{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.mkt .quote p{font-size:13px;line-height:1.6;flex:1}
.mkt .quote .who{display:flex;align-items:center;gap:9px}
.mkt .quote .av{width:30px;height:30px;border-radius:50%;background:hsl(var(--secondary));display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:10.5px;flex-shrink:0}
.mkt .quote .who b{font-size:12px;display:block}
.mkt .quote .who span{font-size:10.5px;color:hsl(var(--muted-foreground))}
.mkt .review-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mkt .review-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));font-size:12.5px;font-weight:600}
.mkt .review-links a i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted-foreground));font-weight:500}

/* faq */
.mkt .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mkt .faq-i{padding:15px 18px;border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.mkt .faq-i b{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.mkt .faq-i span{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.55}

/* FAQ-аккордеон: список с раскрывающимися вопросами (сейчас только на главной) */
.mkt .faq-acc{display:flex;flex-direction:column;gap:8px}
.mkt .faq-q{border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border));overflow:hidden}
.mkt .faq-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.mkt .faq-q summary::-webkit-details-marker{display:none}
.mkt .faq-q summary .chev{flex-shrink:0;color:hsl(var(--muted-foreground));transition:transform .18s}
.mkt .faq-q[open] summary .chev{transform:rotate(180deg)}
.mkt .faq-q[open] summary{border-bottom:1px solid hsl(var(--border))}
.mkt .faq-q .a{padding:12px 18px 16px;font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.6}

/* team */
.mkt .team{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:28px;border-radius:22px;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.mkt .team img{border-radius:16px;width:100%}
.mkt .team h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.mkt .team h2 em{font-style:normal;color:hsl(var(--primary))}
.mkt .team p{font-size:13.5px;line-height:1.6;color:hsl(var(--muted-foreground));margin-bottom:16px}
.mkt .leads{display:flex;flex-direction:column;gap:10px}
.mkt .lead-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:hsl(var(--background));border:1px solid hsl(var(--border))}
.mkt .lead-row img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:hsl(var(--secondary))}
.mkt .lead-row b{display:block;font-size:13px}
.mkt .lead-row span{font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.4}
.mkt .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mkt .person{display:flex;gap:16px;padding:18px 20px;border-radius:16px;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.mkt .person img{width:88px;height:88px;border-radius:14px;object-fit:cover;flex-shrink:0;background:hsl(var(--secondary))}
.mkt .person h3{font-size:15px;margin-bottom:2px}
.mkt .person .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--accent-foreground));margin-bottom:8px}
.mkt .person p{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.55}

/* dark proof band */
.mkt .proof{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:0;padding:26px 30px;border-radius:20px;background:hsl(220 18% 7%);color:#fff;align-items:center}
.mkt .proof .lead{padding-right:24px}
.mkt .proof .lead b{display:block;font-family:var(--font-mono);font-size:16px;margin-bottom:6px}
.mkt .proof .lead span{font-size:12px;color:rgb(255 255 255 / .62);line-height:1.5;display:block}
.mkt .proof .lead a{display:inline-block;margin-top:10px;color:hsl(18 88% 62%);font-size:12px;font-weight:600}
.mkt .proof .it{padding:0 16px;border-left:1px solid rgb(255 255 255 / .12)}
.mkt .proof .it b{display:block;font-family:var(--font-mono);font-size:24px;font-weight:800;margin-bottom:4px}
.mkt .proof .it span{font-size:11px;color:rgb(255 255 255 / .58);line-height:1.4}
.mkt .proof-photo{display:grid;grid-template-columns:1fr 1.1fr;gap:14px;margin-top:14px}
.mkt .proof-photo img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid hsl(var(--border))}
.mkt .proof-photo figcaption{font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground));margin-top:6px}

/* cta band */
.mkt .cta-band{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px 36px;border-radius:22px;background:hsl(var(--primary));color:#fff;margin:56px 0 0;position:relative;overflow:hidden}
.mkt .cta-band.photo{grid-template-columns:1fr 340px;padding-right:0;min-height:200px}
.mkt .cta-band .eyebrow{color:rgb(255 255 255 / .85)} .mkt .cta-band .eyebrow::before{background:#fff}
.mkt .cta-band h3{margin:0 0 8px;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15}
.mkt .cta-band p{margin:0 0 16px;font-size:13px;color:rgb(255 255 255 / .85);max-width:60ch;line-height:1.55}
.mkt .cta-band .acts{display:flex;gap:10px}
.mkt .cta-band .btn-ghost{background:rgb(255 255 255 / .14);color:#fff;border-color:rgb(255 255 255 / .35)}
.mkt .cta-band .btn-dark{background:hsl(220 18% 7%)}
.mkt .cta-band figure{align-self:end;display:flex;justify-content:center;height:100%}
.mkt .cta-band figure img{width:auto;object-fit:contain;filter:drop-shadow(0 12px 18px rgb(0 0 0 / .25))}
.mkt .cta-band figcaption{position:absolute;right:270px;bottom:22px;font-family:var(--font-mono);font-size:10px;color:rgb(255 255 255 / .8);text-align:right}

/* entry points (home) */
.mkt .entry .meta{font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground));margin:8px 0 10px}
.mkt .entry .foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.mkt .entry .foot .price{font-family:var(--font-mono);font-size:15px;font-weight:800}
.mkt .entry .foot .price small{display:block;font-size:9.5px;color:hsl(var(--muted-foreground));font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.mkt .entry .foot .btn{margin-left:auto}
.mkt .card.col{display:flex;flex-direction:column}

/* flagship (home) */
.mkt .flag{display:grid;grid-template-columns:1.2fr .9fr;gap:24px;padding:28px;border-radius:22px;background:hsl(var(--card));border:1px solid hsl(var(--primary) / .45)}
.mkt .flag h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.mkt .flag h2 small{display:block;font-size:16px;color:hsl(var(--muted-foreground));font-weight:600;margin-top:4px}
.mkt .flag > div > p{font-size:13.5px;color:hsl(var(--muted-foreground));line-height:1.6;margin-bottom:14px}
.mkt .flag .acts{display:flex;gap:10px;flex-wrap:wrap}
.mkt .flag .ul-check{align-self:center}
.mkt .mini-tariffs{display:flex;flex-direction:column;gap:6px}
.mkt .mini-tariffs div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid hsl(var(--border));background:hsl(var(--background))}
.mkt .mini-tariffs div.pop{border-color:hsl(var(--primary) / .5);background:hsl(var(--accent) / .5)}
.mkt .mini-tariffs b{font-size:12.5px;min-width:130px}
.mkt .mini-tariffs span{font-size:11px;color:hsl(var(--muted-foreground));flex:1;line-height:1.35}
.mkt .mini-tariffs i{font-style:normal;font-family:var(--font-mono);font-size:12.5px;font-weight:800;white-space:nowrap}
.mkt .mini-tariffs h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:4px}

/* apps catalog */
.mkt .apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mkt .app{padding:14px 15px;border-radius:13px;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:5px}
.mkt .app .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--accent-foreground))}
.mkt .app h3{font-size:12.5px;font-weight:700;line-height:1.3}
.mkt .app p{font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.45;flex:1}
.mkt .app .m{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--muted-foreground));padding-top:6px;border-top:1px dashed hsl(var(--border))}
.mkt .app .m b{color:hsl(var(--foreground))}
.mkt .app.soon{border-style:dashed;background:hsl(var(--card) / .5)}

/* screenshots */
.mkt .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mkt .shots figure img{border-radius:12px;border:1px solid hsl(var(--border));box-shadow:0 12px 30px -18px rgb(14 16 20 / .35)}
.mkt .shots figcaption{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:7px;line-height:1.45}

/* rubrics (telegram) */
.mkt .rub .hash{font-family:var(--font-mono);font-size:10.5px;color:hsl(var(--kg-ui-blue));margin-bottom:8px;display:block}
.mkt .paused{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:22px 26px;border-radius:18px;background:hsl(var(--secondary) / .7);border:1px dashed hsl(var(--muted-foreground) / .5)}
.mkt .paused h3{font-size:16px;margin-bottom:6px}
.mkt .paused p{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.55;max-width:64ch}

/* forms / auth */
.mkt .form-label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin:14px 0 6px}
/* Звёздочка обязательного поля. Без неё «обязательно» узнаётся только по
   отказу формы — то есть уже после того, как человек нажал кнопку. */
.mkt .form-label .req{color:hsl(var(--destructive));font-weight:700}
.mkt .form-input{width:100%;border-radius:9px;border:1px solid hsl(var(--input));background:hsl(var(--background));padding:0 12px;height:36px;font-size:13px;font-family:var(--font-sans);color:hsl(var(--foreground))}
.mkt .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mkt .form-hint{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:6px}
/* Форма «Остались вопросы?» (страницы курсов) / «У вас другой вопрос?»
   (абонемент) — узкая колонка и растущая textarea поверх общих .form-*. */
.mkt .ask-form{max-width:560px}
/* ⚠️ Поля формы вопроса — БЕЛЫЕ, а не общий `--background` (правка владельца
   21.09 «поля формы — фоном посветлее»): форма стоит прямо на полотне
   страницы, и поле цвета полотна выглядело не полем, а пустым местом с
   рамкой. Правило точечное, `.mkt .form-input` не трогаем: те же поля стоят
   на белой карточке оформления заказа, там белое на белом было бы хуже. */
.mkt .ask-form .form-input{background:hsl(var(--card))}
/* Подзаголовок программы над её списком модулей (страница комплекта): три
   списка подряд без подписи читались бы как один длинный. */
.mkt .vse-prog{margin:26px 0 12px;font-size:15px;font-weight:700}
.mkt .vse-prog:first-of-type{margin-top:0}
/* ⚠️ Цифры под ценой в блоке `.n-sub` (правка владельца 21.09: «две цены на
   одном экране, непонятное расположение; под ценой справа хочется количество
   модулей, уроков, время видео, шаблоны — 4–6 преимуществ»). Цена осталась
   ОДНА, справа; из заголовка слева она убрана. Заодно это заполняет правую
   колонку: раньше под кнопкой висела пустота во всю высоту левого списка.
   ⚠️ База блока (`.n-sub`, `.price`, `.per`, `.terms`) живёт в site.css — он
   только для сайта и его ведёт соседний чат; сюда кладём лишь добавку. */
.mkt .n-sub .n-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 18px}
.mkt .n-sub .n-facts > div{padding:9px 12px;border-radius:11px;background:hsl(var(--card) / .7);border:1px solid hsl(var(--border))}
.mkt .n-sub .n-facts b{display:block;font-family:var(--font-mono);font-size:17px;font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mkt .n-sub .n-facts span{font-size:11px;line-height:1.35;color:hsl(var(--muted-foreground))}
.mkt .ask-form textarea.form-input{height:auto;min-height:110px;padding:10px 12px;resize:vertical;font-family:var(--font-sans)}
.mkt .ask-note{margin-top:10px;font-size:12.5px;min-height:1em}
.mkt .ask-note.is-ok{color:hsl(var(--kg-ui-mint))}
.mkt .ask-note.is-err{color:hsl(var(--destructive))}
.mkt .consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))}
.mkt .consent input{margin:2px 0 0;width:15px;height:15px;accent-color:hsl(var(--primary));flex-shrink:0}
.mkt .mid{display:flex;align-items:flex-start;justify-content:center;padding:44px 26px 60px}
.mkt .auth-card{max-width:440px;width:100%;padding:30px 32px 26px;border-radius:18px;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.mkt .auth-card h1{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em;font-family:var(--font-sans)}
.mkt .auth-card .lead{margin:0 0 14px;color:hsl(var(--muted-foreground));font-size:12.5px;line-height:1.55}
.mkt .auth-card .btn{width:100%;height:42px;margin-top:20px;font-size:13.5px}
.mkt .auth-alt{margin-top:14px;text-align:center;font-size:12.5px;color:hsl(var(--muted-foreground))}
.mkt .auth-alt a{font-weight:600}
.mkt .tabs2{display:flex;gap:4px;margin-bottom:14px;background:hsl(var(--secondary));border-radius:10px;padding:3px}
.mkt .tabs2 span{flex:1;text-align:center;padding:8px 0;border-radius:8px;font-size:12px;font-weight:600;color:hsl(var(--muted-foreground))}
.mkt .tabs2 span.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 3px rgb(0 0 0 / .08)}
.mkt .pay-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid hsl(var(--primary));background:hsl(var(--primary) / .06);margin-top:14px}
.mkt .pay-row .r{width:16px;height:16px;border-radius:50%;border:5px solid hsl(var(--primary));flex-shrink:0}
.mkt .pay-row b{font-size:12.5px} .mkt .pay-row span{display:block;font-size:11px;color:hsl(var(--muted-foreground))}
.mkt .pay-row.off{border-color:hsl(var(--border));background:transparent}
.mkt .pay-row.off .r{border:1.5px solid hsl(var(--border))}
/* Способ оплаты стал выбираемым (21.09.2026, «сделаем кнопку активной») —
   строка целиком кликабельна, курсор обязан это подсказывать, иначе строка
   выглядит как раньше, декоративной справкой. */
.mkt label.pay-row{cursor:pointer}
.mkt .sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px}
.mkt .sum-row.tot{border-top:1px solid hsl(var(--border));margin-top:8px;padding-top:14px;font-size:15px;font-weight:800}
.mkt .co-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
/* Промокод: поле и кнопка одной строкой. Кнопке нужна фиксированная высота
   поля — у .form-input она своя, и без выравнивания кнопка «прыгала» бы. */
.mkt .promo-row{display:flex;gap:8px;align-items:stretch}
.mkt .promo-row .form-input{flex:1 1 auto;min-width:0;text-transform:uppercase}
.mkt .promo-row .btn{flex:0 0 auto;white-space:nowrap}
.mkt .card-h{padding:0 0 12px;margin:0 0 14px;border-bottom:1px solid hsl(var(--border));font-size:13.5px;font-weight:700}

/* legal */
.mkt .legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start;margin-top:26px}
.mkt .legal-toc{border:1px solid hsl(var(--border));border-radius:14px;background:hsl(var(--card));overflow:hidden;position:sticky;top:80px}
.mkt .legal-toc .h{padding:12px 14px 8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.mkt .legal-toc a{display:block;padding:9px 14px;border-left:2px solid transparent;font-size:12.5px;color:hsl(var(--muted-foreground))}
.mkt .legal-toc a.on{color:hsl(var(--foreground));border-left-color:hsl(var(--primary));background:hsl(var(--accent));font-weight:600}
.mkt .doc{max-width:74ch}
.mkt .doc h1{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.mkt .doc h2{margin:24px 0 10px;font-size:15px;font-weight:700;padding-bottom:7px;border-bottom:1px solid hsl(var(--border))}
.mkt .doc p{margin:0 0 12px;font-size:13.5px;line-height:1.7}
.mkt .doc .req-box{margin-top:24px;padding:14px 16px;border-radius:12px;background:hsl(var(--secondary) / .55);border:1px solid hsl(var(--border));font-size:12.5px;line-height:1.7}

/* footer */
/* см. шапку: цвет у них общий и это белый, а не полотно страницы */
.mkt .pub-foot{border-top:1px solid hsl(var(--border));background:hsl(var(--card));padding:34px 0 0;margin-top:56px}
.mkt .pub-foot-in{max-width:1120px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px}
.mkt .pub-foot h4{margin:0 0 10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-weight:700}
.mkt .pub-foot a{display:block;padding:3px 0;font-size:12.5px;color:hsl(var(--foreground))}
.mkt .pub-foot .req{font-size:11.5px;color:hsl(var(--muted-foreground));line-height:1.7}
.mkt .pub-foot .req b{display:block;color:hsl(var(--foreground));font-size:12.5px;margin-bottom:4px}
.mkt .pub-foot .svc{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.mkt .pub-foot .svc span{font-size:11px;padding:3px 8px;border-radius:6px;background:hsl(var(--secondary));color:hsl(var(--muted-foreground))}
.mkt .foot-bottom{max-width:1120px;margin:26px auto 0;padding:16px 26px;border-top:1px solid hsl(var(--border));font-size:11px;color:hsl(var(--muted-foreground));display:flex;justify-content:space-between;gap:16px}
.mkt .foot-mini{padding:18px 26px;text-align:center;font-size:11px;color:hsl(var(--muted-foreground));border-top:1px solid hsl(var(--border));margin-top:20px}
.mkt .foot-mini a{color:hsl(var(--muted-foreground));margin:0 6px}

/* =============================================================================
 * КАРТИНКИ: пропорции не ломаем нигде
 * -----------------------------------------------------------------------------
 * Правило одно: ширина тянется, высота считается сама (height:auto из шапки).
 * Исключения — только квадратные аватары, где обрезка безопасна.
 * ============================================================================= */

/* Хиро: вырезанное фото 1:1, подпись под ним, а не поверх лица */
.mkt .hero-photo { min-height: 0; padding-bottom: 30px; }
.mkt .hero-photo img { width: 100%; max-width: 380px; }

/* Плашка призыва: снимок в полный рост (0.65) и по пояс (1.49) ведут себя
   одинаково — ограничиваем по высоте, ширину считает браузер. Иначе
   «по пояс» вылезал за колонку и обрезался. */
@media (min-width: 1001px) { .mkt .cta-band.photo { grid-template-columns: 1fr 460px; } }
.mkt .cta-band figure { align-items: flex-end; justify-content: center; min-height: 220px; }
.mkt .cta-band figure img { width: auto; max-height: 310px; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.mkt .cta-band figcaption { right: 24px; }

/* Два фото компании рядом. Колонки заданы ПРОПОРЦИЯМИ самих снимков
   (1.414 и 1.728), поэтому оба выходят одной высоты и ничего не обрезается;
   height:100% + object-fit:cover раньше сплющивал левый. */
.mkt .proof-photo { grid-template-columns: 1.414fr 1.728fr; align-items: start; }
.mkt .proof-photo img { width: 100%; height: auto; border-radius: 16px; }

/* Квадратные аватары — единственное место, где обрезка уместна */
.mkt .lead-row img { width: 48px; height: 48px; object-fit: cover; }
.mkt .person img { width: 88px; height: 88px; object-fit: cover; }
.mkt .quote .av, .mkt .kgs-mark { flex-shrink: 0; }

/* =============================================================================
 * ТЕЛЕФОН И ПЛАНШЕТ
 * ============================================================================= */
@media (max-width: 1000px) {
  .mkt .hero { grid-template-columns: 1fr; padding: 30px 26px; gap: 24px; }
  .mkt .hero h1 { font-size: 28px; }
  .mkt .hero-visual { order: -1; }
  .mkt .hero-photo img { max-width: 260px; margin: 0 auto; }
  .mkt .hero-kpi span { white-space: normal; }
  .mkt .trust, .mkt .grid-4, .mkt .grid-5, .mkt .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt .trust { padding: 0 26px; }
  .mkt .grid-3, .mkt .tariffs, .mkt .tariffs.two, .mkt .cmp, .mkt .tl,
  .mkt .quotes, .mkt .quotes.three, .mkt .faq, .mkt .people, .mkt .blocks,
  .mkt .shots, .mkt .co-grid, .mkt .rating, .mkt .team, .mkt .legal-layout,
  .mkt .proof-photo, .mkt .grid-2 { grid-template-columns: 1fr; }
  .mkt .tariffs.two { max-width: none; }
  .mkt .proof { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mkt .proof .lead { grid-column: 1 / -1; padding-right: 0; }
  .mkt .proof .it { border-left: 0; padding: 0; }
  .mkt .mod-cols { grid-template-columns: 1fr; gap: 12px; }
  .mkt .legal-toc { position: static; }
  .mkt .cta-band, .mkt .cta-band.photo { grid-template-columns: 1fr; padding: 26px; }
  .mkt .cta-band figure, .mkt .cta-band figcaption { display: none; }
  .mkt .flag { grid-template-columns: 1fr; }
  .mkt .paused { grid-template-columns: 1fr; }
  .mkt .pub-foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mkt .pub-head { height: 56px; padding: 0 14px; gap: 10px; }
  .mkt .pub-nav, .mkt .hdr-phone, .mkt .pub-brand i { display: none; }
  .mkt .wrap, .mkt .wrap-narrow { padding: 0 14px; }
  .mkt .hero { padding: 22px 18px; border-radius: 18px; }
  .mkt .hero h1 { font-size: 24px; }
  .mkt .hero h1 small { font-size: 17px; }
  .mkt .sec { margin: 36px 0; }
  .mkt .sec-h h2 { font-size: 20px; }
  .mkt .grid-4, .mkt .grid-5, .mkt .apps,
  .mkt .proof, .mkt .pub-foot-in, .mkt .form-row { grid-template-columns: 1fr; }
  /* Тизеры преимуществ (платиновый партнёр/место в рейтинге/внедрения/YouTube) —
     каруселью на телефоне, тем же приёмом, что у "Пять вещей"/"Сервисы
     платформы" на /abonement (правка владельца 18.09): карточки держат свою
     ширину и скроллятся вбок, scroll-snap останавливает прокрутку ровно на
     карточке. Отрицательный отступ — тот же, что у .wrap на 640px (14px с
     каждой стороны): полоса бежит до края экрана, а первая/последняя
     карточка всё равно начинаются/кончаются вровень с остальным текстом. */
  .mkt .trust {
    display: flex; flex-wrap: nowrap; grid-template-columns: none;
    gap: 10px; margin: 16px -14px 0; padding: 2px 14px 6px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mkt .trust::-webkit-scrollbar { display: none; }
  .mkt .trust > div, .mkt .trust > a { flex: 0 0 72%; scroll-snap-align: start; padding: 4px 0; }
  .mkt .mod-h { flex-wrap: wrap; gap: 8px; }
  .mkt .mod-b { padding-left: 18px; }
  .mkt .tl .row b, .mkt .sched .row b { min-width: 96px; }
  .mkt .foot-bottom { flex-direction: column; gap: 6px; }
  .mkt .btn-lg { width: 100%; }
}

/* Мобильное меню программ: гамбургер + выпадающий список (на широком экране
   не показывается — там программы стоят строкой в шапке). */
.mkt .burger { display: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--foreground)); align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; }
@media (max-width: 640px) { .mkt .burger { display: inline-flex; } }
.mkt .mkt-drawer { position: fixed; left: 0; right: 0; top: 56px; z-index: 40;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .3); padding: 8px 8px 14px;
  max-height: calc(100vh - 56px); overflow-y: auto; }
.mkt .mkt-drawer[hidden] { display: none; }
.mkt .mkt-drawer a { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px; border-radius: 11px; font-size: 13.5px; font-weight: 600;
  color: hsl(var(--foreground)); }
.mkt .mkt-drawer a.key { background: hsl(var(--accent) / .55); }
.mkt .mkt-drawer a i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600; color: hsl(var(--muted-foreground)); }
.mkt .mkt-drawer .sep { height: 1px; background: hsl(var(--border)); margin: 6px 10px; }
.mkt .mkt-drawer .acts { display: flex; gap: 8px; padding: 12px 10px 2px; }
.mkt .mkt-drawer .acts .btn { flex: 1; height: 40px; }

/* Якорь из адреса (#/course/analitik/tariffs) не должен уезжать под липкую
   шапку — она 64px. */
.mkt [id] { scroll-margin-top: 84px; }

/* Подписи на фото в хиро: имя внизу слева, регалии вверху справа. Обе внизу
   наезжали друг на друга и обрезали текст. */
.mkt .hero-cap { max-width: 54%; }
.mkt .hero-cap.r { top: 10px; bottom: auto; left: auto; right: 0; }
@media (max-width: 1000px) {
  .mkt .hero-cap, .mkt .hero-cap.r { position: static; max-width: none; margin-top: 10px; }
  .mkt .hero-photo { flex-direction: column; align-items: center; }
}

/* Плашка про cookies поднята над плавающей кнопкой чата — в гостевой части
   её нет, поэтому прижимаем к низу. */
body.guest .cookie-bar { bottom: 18px; }

/* На телефоне в шапке остаётся только «Войти»: «Зарегистрироваться» — слово
   на 16 знаков, вдвоём кнопки не помещались и растягивали страницу вбок.
   Регистрация никуда не делась — она в выпадающем меню под гамбургером. */
@media (max-width: 640px) {
  .mkt .hdr-acts .btn-primary { display: none; }
  .mkt .pub-brand b { font-size: 13px; }
}

/* Телефон: две кнопки в ряд не помещаются, а у .btn стоит white-space:nowrap —
   колонка грида раздувалась до ширины текста и вылезала за экран (и обрезалась
   overflow:hidden у плашки). Разрешаем перенос и растягиваем кнопки. */
@media (max-width: 640px) {
  .mkt .cta-band > div, .mkt .hero > div, .mkt .flag > div { min-width: 0; }
  .mkt .acts { flex-wrap: wrap; }
  .mkt .acts .btn { width: 100%; }
}

/* Две плашки «старт / финал» рядом не помещаются: у даты white-space:nowrap.
   На телефоне ставим их друг под другом. */
@media (max-width: 640px) { .mkt .tl-ends { flex-direction: column; } }
@media (max-width: 1000px) { .mkt .hero-cap, .mkt .hero-cap.r { align-self: stretch; } }

/* Разделитель «или» между почтой и прежним логином в форме восстановления */
.mkt .acc-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.mkt .acc-or::before, .mkt .acc-or::after { content: ""; flex: 1; height: 1px;
  background: hsl(var(--border)); }

/* ═══════════════════════════════════════════════════════════════════════════
   ШАПКА САЙТА — ОБЩАЯ для статики и панели (перенесено сюда 15.09)

   ⚠️ На kiselevlab.ru гостевую шапку рисуют ДВА разных места: статический
   сборщик (`design/prototype/new/build.py`) для страниц программ и панель
   (`views-public.js`) для `/login`, `/register`, `/checkout`. Пока эти правила
   лежали в `site.css`, который панель не грузит, на странице ОПЛАТЫ шапка
   выглядела иначе: старое меню с выпадашкой, телефон в шапке и мелкий знак.
   Человек видит это как «меня перекинуло на другой сайт» — ровно на том шаге,
   где он вводит деньги. Поэтому всё общее живёт в marketing.css: его копирует
   себе и сайт (см. `CSS_SRC` в build.py).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Логотип: знак 36, имя 19, подпись 9. Пропорция выбрана владельцем 14.09
   (вариант «Крупное название»). Размер БУКВ внутри знака отдельно не задаётся:
   рисунок занимает весь квадрат, поля нарисованы внутри самой картинки —
   см. `.kgs-mark svg` в app.css. */
.mkt .kgs-mark { width: 36px; height: 36px; border-radius: 10px; letter-spacing: .02em; }
.mkt .pub-brand b { font-size: 19px; font-weight: 800; letter-spacing: .03em; }
.mkt .pub-brand i { font-size: 9px; letter-spacing: .06em; }

/* ⚠️ Название и подпись — ФЛЕКС-КОЛОНКА с жёстким межстрочным, а не две
   строки обычного текста (правка владельца 15.09: «между ними большое
   расстояние, выровнять по центру квадратика»). Подпись лежала в разметке
   инлайновым `<i>`, то есть получала строчный интервал БЛОКА (1.55 от 19 px —
   почти 30 px на строку в 9 px). Отсюда и провал между строками, и то, что
   блок не совпадал с центром знака: лишнее место распределялось не поровну.
   В кабинете этой беды не было — там у обёртки свой класс `.kgs-brandtext`
   с той же флекс-колонкой; здесь обёртка без класса, поэтому селектор по
   «второму span внутри логотипа». */
.mkt .pub-brand > span:not(.kgs-mark) {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; line-height: 1;
}
.mkt .pub-brand b, .mkt .pub-brand i { line-height: 1; display: block; }

/* Полоса во всю ширину, содержимое — по колонке контента (1120 px, как .wrap
   и подвал): логотип встаёт под левый край карточек, кнопки под правый. */
.mkt .pub-head { gap: 0; padding: 0; }
.mkt .pub-head-in {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; gap: 14px;
  position: relative;   /* якорь для меню, которое центруется абсолютом */
}

/* Меню плоское, без выпадашек (правка владельца 14.09). */
.mkt .pub-nav { gap: 0; margin-left: 2px; flex-wrap: nowrap; }
.mkt .pub-nav .item { padding: 8px 7px; font-size: 12.5px; }

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

/* ⚠️ Ширина пунктов и кнопок — не вкусовая настройка, а АРИФМЕТИКА шапки.
   Пункт ужат до 7 px по бокам, а кнопка до 12/12: меню 583, кнопки 223. */
.mkt .hdr-acts .btn { height: 34px; font-size: 12px; padding: 0 12px; }

/* Меню занимает СВОБОДНОЕ МЕСТО между логотипом и кнопками и центруется в нём.
   ⚠️ Раньше оно центровалось по СТРАНИЦЕ абсолютом — и это дважды разъезжалось
   молча. Последний раз (найдено 17.09) — когда в шапку добавили переключатель
   темы: он забрал 40 px у правого блока, кнопки выросли с 223 до 263 px, и
   меню наехало на них на 20 px. На ВСЕХ десктопных ширинах, на всех страницах
   сайта и кабинета, последний пункт читался как «Абонеме» под кружком темы.
   Ширина окна тут ни при чём: колонка контента упёрта в 1120 px, значит
   геометрия одинакова хоть на 1280, хоть на 1920 — «проверю на широком
   экране» не помогает.
   Центрирование по свободному месту делает наезд НЕВОЗМОЖНЫМ: меню не может
   вылезти за края флекс-строки, сколько бы ни весили соседи. Плата — меню
   стоит примерно на 47 px левее середины страницы (ровно на половину разницы
   между логотипом 174 и кнопками 263). Вернуть прежнее поведение —
   `position:absolute; left:50%; transform:translateX(-50%)`, но тогда
   пересчитывать арифметику придётся после КАЖДОЙ правки шапки. */
@media (min-width: 1181px) {
  .mkt .pub-nav { margin-inline: auto; }
}
/* Бургер раньше обычного: при пяти длинных пунктах меню перестаёт помещаться
   задолго до телефонной ширины. */
@media (max-width: 1180px) {
  .mkt .pub-nav { display: none; }
  .mkt .burger { display: inline-flex; }
}
@media (max-width: 640px) { .mkt .pub-head-in { gap: 10px; } }
@media (max-width: 560px) {
  .mkt .hdr-acts .btn-ghost { display: none; }   /* в бургере эта кнопка есть */
  .mkt .pub-head-in { padding: 0 14px; }
}
.mkt .mkt-drawer { top: 62px; }

/* Кнопка вошедшего занимает место ДВУХ гостевых, поэтому её потолок — их
   ширина, а не произвольные 260: иначе длинное имя вылезет под центрованное
   меню ровно так же, как вылезали кнопки. */
.mkt .hdr-me { max-width: 223px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }