/* marketing.dark — дизайн-система v2. Подключается ПЕРВОЙ, до основного <style> в index.html.
   Портировано из хендоффа _design-marketingdark/tokens.css. Отличия от исходника перечислены
   здесь же, по пунктам — чтобы при следующем обновлении хендоффа было видно, что менялось руками:

   1. @import Google Fonts удалён. Шрифты self-host, ниже @font-face. Runtime-запросов наружу нет.
   2. Вместо полного Noto Sans JP — микро-сабсет «MD Kanji» на 15 знаков (3.2 КБ), ровно те,
      что встречаются в разметке. Системный японский оставлен только фолбэком за ним.
   3. --md-cta переведён с циана на лайм (палитра 5B) + добавлены --md-cta-border и класс
      .md-btn--cta-ghost, которого в исходнике не было.
   4. Объявления из голого body{} перенесены под .md, чтобы система не переопределяла молча
      стили существующего сайта. Сброс box-sizing оставлен глобальным.
   5. --md-text-faint поднят с #5D636B до #787F88: на #0A0B0D исходный давал контраст ниже 3.5:1,
      а этим цветом набраны все mono-подписи 10–11px (подписи цифр, метаданные шагов, метки панели).
   6. Добавлены классы раскладки вместо инлайновых стилей example.html (.md-hero__*, .md-process__*,
      .md-panel__actions) и мобильные решения из макета 390×844: короткий эйброу, одиночный 断,
      панель без правых меток. */

/* ── Шрифты (self-host, woff2) ──────────────────────── */
@font-face{font-family:'Unbounded';src:url(../fonts/unbounded-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Unbounded';src:url(../fonts/unbounded-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Unbounded';src:url(../fonts/unbounded-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url(../fonts/rubik-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url(../fonts/rubik-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url(../fonts/rubik-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url(../fonts/rubik-500i.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
/* Знака рубля (U+20BD) нет ни в Unbounded, ни в Rubik — проверено по cmap обоих файлов.
   Сам знак использовать можно и нужно, ограничений на копирайт нет; просто рисуется он
   из JetBrains Mono, где он есть. unicode-range держит подмешивание ровно на одном символе,
   новых файлов не добавляется — шрифт уже в проекте. */
@font-face{font-family:'Rubik';src:url(../fonts/jetbrains-mono-400.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+20BD}
@font-face{font-family:'Unbounded';src:url(../fonts/jetbrains-mono-500.woff2) format('woff2');font-weight:500 900;font-style:normal;font-display:swap;unicode-range:U+20BD}

/* Иероглифы. Микро-сабсет Noto Sans JP 500 ровно под 15 знаков, которые реально есть
   в разметке (собран pyftsubset из японского сабсета gwfh; 3.2 КБ). Раньше здесь стоял
   системный фолбэк — на Windows без японского шрифта это давало tofu сразу в двух местах:
   гигантская подложка и mono-метка «工程 // ПРОЦЕСС». unicode-range перечисляет ровно то,
   что лежит внутри файла, поэтому на остальных символах шрифт даже не запрашивается.
   Пересобирать при добавлении нового иероглифа — иначе он молча уйдёт в фолбэк. */
@font-face{font-family:'MD Kanji';src:url(../fonts/md-kanji-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+5229,U+5320,U+59CB,U+5B9F,U+5DE5,U+5F71,U+65AD,U+66F8,U+69CB,U+7A0B,U+88CF,U+89E3,U+8A3A,U+91D1,U+95C7}

:root {
  /* Поверхности и текст */
  --md-bg:            #0A0B0D;
  --md-bg-deep:       #07080A;
  --md-text:          #E9EAEC;
  --md-text-strong:   #FFFFFF;
  --md-text-head:     #EDEEF0;
  --md-text-muted:    #9AA0A8;
  --md-text-dim:      #8A9099;
  --md-text-faint:    #787F88; /* было #5D636B — см. п.5 шапки */

  --md-line:          rgba(255,255,255,.10);
  --md-line-soft:     rgba(255,255,255,.07);
  --md-surface:       rgba(255,255,255,.03);
  --md-surface-line:  rgba(255,255,255,.14);

  /* Бренд: красный = проблема, акцент, подложка */
  --md-red:           #FF3B3B;
  --md-red-1:         #FF5A5A;
  --md-red-2:         #FF7A7A;
  --md-red-3:         #FF8A8A;
  --md-red-ink:       #D6A8A8;
  --md-red-bg:        rgba(255,59,59,.09);
  --md-red-border:    rgba(255,59,59,.40);

  /* CTA — лайм, вариант 5B. Только кнопки действия, больше нигде:
     ни в заголовках, ни в ссылках, ни в цифрах, ни в рамках чужих блоков. */
  --md-cta:           #C7F04A;
  --md-cta-hover:     #D8FF66;
  --md-cta-ink:       #10130A;
  --md-cta-border:    rgba(199,240,74,.5);

  --md-tg:            #3FA9E8;
  --md-wa:            #4FD164;

  /* Типографика */
  --md-font-display:  'Unbounded', system-ui, sans-serif;
  --md-font-text:     'Rubik', system-ui, sans-serif;
  --md-font-mono:     'JetBrains Mono', ui-monospace, monospace;
  /* Микро-сабсет (все 15 используемых знаков) → старый 25-глифовый сабсет → системные японские. */
  --md-font-jp:       'MD Kanji', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;

  /* Ритм */
  --md-pad-x:         64px;
  --md-pad-x-mobile:  22px;
  --md-panel-w:       480px;
  --md-tapbar-h:      78px;
  /* Высота cookie-полосы. По умолчанию 0: уведомление либо не показано, либо уже принято.
     Пока оно на экране, body.ckb-on поднимает значение — и полоса не накрывает контент,
     а забирает себе место: страница получает такой padding-bottom, герой на столько же
     укорачивается. Раньше это был оверлей, и он неизбежно что-то закрывал. */
  --md-cookie-h:      0px;
  --md-ease:          .18s ease;
}

/* ── База ───────────────────────────────────────────── */
/* Раньше это был голый body{} — переехало под .md, иначе перебивало бы стили сайта. */
.md {
  background: var(--md-bg);
  color: var(--md-text);
  font-family: var(--md-font-text);
  -webkit-font-smoothing: antialiased;
}
/* Красная ссылка — только в прозе новых секций (лид, пояснения, тело карточек, блок
   «НА ВЫХОДЕ»). Раньше тут стоял общий `.md a`, и он красил вообще всё внутри экранов,
   включая кнопки: селектор весом (0,1,1) выигрывал у одноклассовых правил кнопок (0,1,0),
   и тёмный текст на лайме становился красным. Кнопки, меню и подсказка скролла имеют
   собственные цвета — под это правило они больше не попадают ни при какой специфичности. */
/* Подчёркивание снимается со всех ссылок секций — это оформление, а не цвет,
   и на кнопки/меню оно влияет ровно так, как надо. Цвет ниже — только для прозы. */
.md a { text-decoration: none; }
.md p a, .md .md-lead a, .md .md-note a, .md .md-body a, .md .md-out__body a, a.md-link {
  color: var(--md-red); transition: color var(--md-ease); }
.md p a:hover, .md .md-lead a:hover, .md .md-note a:hover, .md .md-body a:hover,
.md .md-out__body a:hover, a.md-link:hover { color: var(--md-red-2); }
*, *::before, *::after { box-sizing: border-box; }
/* Радиусов в системе нет — все блоки прямоугольные. */

/* ── Полотно секции + подложка ──────────────────────── */
.md-screen { position: relative; overflow: hidden; background: var(--md-bg); }
.md-screen > .md-layer { position: absolute; inset: 0; pointer-events: none; }
.md-glow      { background: radial-gradient(50% 60% at 26% 48%, rgba(255,42,52,.20), rgba(255,42,52,.05) 55%, transparent 74%); }
.md-grid-lines{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 96px); }
.md-scanlines { background: repeating-linear-gradient(rgba(255,255,255,.026) 0 1px, transparent 1px 3px); }
/* Вес 500, а не 900 из хендоффа: Noto Sans JP тут — существующий 25-глифовый сабсет ровно
   одного веса (500), и запрос 900 давал синтетический жир — на 350px глиф превращался
   в сплошные красные плиты поверх полупрозрачной панели. Альфа взята по нижней границе
   допустимого системой диапазона (.10–.20) по той же причине: за иероглифом стоит панель
   с полупрозрачным градиентом, и он читается сквозь неё. */
.md-kanji {
  position: absolute;
  font-family: var(--md-font-jp);
  font-weight: 500;
  font-size: 350px;
  line-height: .78;
  color: rgba(255,52,60,.12);
  text-shadow: 0 0 70px rgba(255,40,48,.22);
  pointer-events: none;
  user-select: none;
}

/* ── Типографика ────────────────────────────────────── */
.md-eyebrow { font-family: var(--md-font-mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #FF4A4A; }
.md-h1 { font-family: var(--md-font-display); font-weight: 900; font-size: clamp(52px, 7.8vw, 112px); line-height: .88; letter-spacing: -.02em; color: var(--md-text-head); margin: 0; }
.md-h1--glow { color: var(--md-text-strong); line-height: .90;
  text-shadow: 0 0 12px rgba(255,60,66,.95), 0 0 46px rgba(255,40,48,.7), 0 0 110px rgba(255,30,40,.42); }
.md-h2 { font-family: var(--md-font-display); font-weight: 900; font-size: clamp(38px, 6vw, 86px); line-height: .9; letter-spacing: -.02em; color: var(--md-text-head); margin: 0; }
.md-h3 { font-family: var(--md-font-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; color: var(--md-text-strong); margin: 0; }
.md-lead { font-size: 16px; line-height: 1.62; color: var(--md-text-muted); max-width: 520px; }
.md-lead strong, .md-lead b { color: var(--md-text); font-weight: 600; }
.md-body { font-size: 15px; line-height: 1.6; color: var(--md-text-dim); }
.md-note { font-size: 13px; line-height: 1.5; color: var(--md-text-dim); }
.md-mono { font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--md-text-faint); }
.md-mono--sm { font-size: 10px; letter-spacing: .2em; }
.md-num { font-family: var(--md-font-display); font-weight: 700; font-size: 22px; color: var(--md-text); white-space: nowrap; }
.md-num--red { color: var(--md-red); }
.md-slab { display: inline-flex; align-items: center; background: var(--md-red); color: #0A0B0D;
  padding: 8px 18px; font-family: var(--md-font-mono); font-size: clamp(11px, 1.05vw, 15px); font-weight: 700; letter-spacing: .18em; }
.md-headline { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* ── Кнопки ─────────────────────────────────────────── */
/* Лайм-шкала значит одно и то же на всём сайте:
     ЗАЛИВКА (.md-btn--cta)      — действие, которое уводит со страницы в Telegram;
     АУТЛАЙН (.md-btn--cta-ghost) — «узнать подробнее», остаётся на странице (якорь).
   Заливка на экран — одна. Единственное исключение: мобильный .md-tapbar ведёт на якорь
   #audit заливкой, потому что там он единственный лайм в кадре и служит главной кнопкой. */
.md-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 26px;
  font-family: var(--md-font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; transition: all var(--md-ease); cursor: pointer; }
.md-btn--cta         { background: var(--md-cta); color: var(--md-cta-ink); font-weight: 700; }
.md-btn--cta:hover   { background: var(--md-cta-hover); color: var(--md-cta-ink); }
.md-btn--cta-ghost       { border-color: var(--md-cta-border); color: var(--md-cta); }
.md-btn--cta-ghost:hover { border-color: var(--md-cta); color: var(--md-cta); }
.md-btn--ghost       { border-color: rgba(255,255,255,.34); color: #E4E6EA; }
.md-btn--ghost:hover { border-color: var(--md-text-strong); color: var(--md-text-strong); }
.md-btn--red         { border-color: var(--md-red-border); color: var(--md-red-2); }
.md-btn--red:hover   { border-color: var(--md-red); color: var(--md-text-strong); }
.md-btn--messenger   { gap: 9px; padding: 18px 22px; border-color: rgba(255,255,255,.28); color: #C9CCD2; }
.md-btn--messenger:hover { border-color: var(--md-text-strong); color: var(--md-text-strong); }
.md-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Шапка ──────────────────────────────────────────── */
.md-header { display: flex; justify-content: space-between; align-items: stretch;
  border-bottom: 1px solid var(--md-line); padding-left: var(--md-pad-x); }
.md-header__brand { display: flex; align-items: center; gap: 34px; min-width: 0; }
.md-logo { font-family: var(--md-font-mono); font-size: 15px; color: #C9CCD2; padding: 22px 0; white-space: nowrap; }
.md-logo span { color: var(--md-red); }
.md-nav { display: flex; align-items: center; gap: 26px; }
.md-nav a { font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--md-text-dim); white-space: nowrap; flex: none; transition: color var(--md-ease); }
.md-nav a:hover { color: var(--md-text-strong); }
.md-nav a.is-book { color: var(--md-red-1); }
.md-header-actions { display: flex; align-items: stretch; flex: none; }
.md-header-actions > a { display: flex; align-items: center; gap: 9px; padding: 0 20px; flex: none; white-space: nowrap;
  border-left: 1px solid var(--md-line); font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .16em; color: #B7BCC4; }
.md-header-actions > a:hover { color: var(--md-text-strong); }
.md-header-actions > a.md-btn--cta-ghost { padding: 0 30px; font-size: 12px; letter-spacing: .18em;
  border: 1px solid var(--md-cta-border); border-top: 0; border-bottom: 0; color: var(--md-cta); font-weight: 700; }
.md-header-actions > a.md-btn--cta-ghost:hover { border-color: var(--md-cta); color: var(--md-cta); }

/* ── Герой ──────────────────────────────────────────── */
.md-hero { min-height: calc(100svh - var(--md-cookie-h)); display: flex; flex-direction: column; }
.md-hero__inner { position: relative; display: flex; flex-direction: column; flex: 1; }
.md-hero .md-two-col { flex: 1; }
.md-hero__left { min-width: 0; display: flex; flex-direction: column; padding: 60px 44px 0 var(--md-pad-x); }
/* Ритм героя сжат на ~25px: 1440×900 — это размер макета, а не реального окна.
   На MacBook Air с панелью закладок кадр ближе к 1440×760, и на прежних отступах
   строка «МОИ ЦИФРЫ» с подсказкой скролла уходила под сгиб. */
.md-headline { margin: 20px 0 0; }
.md-hero__lead { margin: 24px 0 0; }
.md-hero__actions { margin-top: 20px; }
/* Подложка героя: 診断 справа, обрезан краем кадра. На мобиле его меняет
   одиночный 断 по центру — решение из макета 390×844. */
.md-kanji--hero { right: -56px; top: -30px; }
.md-kanji--hero-sm { display: none; left: 50%; top: 92px; transform: translateX(-50%); font-size: 290px; line-height: .76; color: rgba(255,52,60,.12); }
/* Экран 2: свечение уходит вправо, иероглиф — в левый нижний угол. */
.md-glow--process { background: radial-gradient(48% 58% at 74% 52%, rgba(255,42,52,.16), rgba(255,42,52,.04) 56%, transparent 76%); }
.md-kanji--process { left: -60px; bottom: -90px; font-size: 360px; color: rgba(255,52,60,.13); }
.md-hero__spacer { flex: 1; min-height: 28px; }
.md-hero__scroll { padding-bottom: 6px; color: var(--md-text-faint); white-space: nowrap; }
.md-hero__scroll:hover { color: var(--md-text); }

/* ── Правая панель-«прибор» ─────────────────────────── */
.md-panel { display: flex; flex-direction: column; justify-content: center; padding: 0 40px;
  border-left: 1px solid var(--md-line);
  background: linear-gradient(180deg, rgba(16,10,12,.5), rgba(9,10,12,.7)); }
.md-panel__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--md-line); }
.md-panel__head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.md-panel__title { display: flex; gap: 10px; align-items: center; font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .22em; color: #B7BCC4; }
.md-panel__title .kanji { color: var(--md-red); font-family: var(--md-font-jp); }
.md-panel__title .sep { color: #4E545C; }
/* Отличие от example.html: у панели ДВЕ кнопки в строке, а не одна. */
/* Подводка к платному аудиту: отделяет пять строк от блока «НА ВЫХОДЕ», чтобы список
   не читался как содержимое бесплатного звонка. Кегль тот же, что у вводной. */
.md-panel__more { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--md-line); }
.md-panel__actions { display: flex; gap: 10px; margin-top: 14px; }
.md-panel__actions .md-btn { flex: 1; justify-content: center; padding: 16px 18px; text-align: center; }
.md-out { padding: 16px 18px; border: 1px solid var(--md-surface-line); background: var(--md-surface); }
.md-out__label { color: #B7BCC4; }
.md-out__body { font-size: 14px; line-height: 1.5; color: #D6D8DC; }
.md-panel__out { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }

/* Нумерованный список панели; одна строка помечается .is-critical */
.md-list { display: flex; flex-direction: column; margin-top: 4px; }
.md-list__row { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--md-line-soft); }
.md-list__row:last-child { border-bottom: 0; }
.md-list__idx { font-family: var(--md-font-mono); font-size: 10px; letter-spacing: .2em; color: var(--md-text-faint); width: 24px; flex: none; }
.md-list__name { flex: 1; font-size: 16px; color: #D6D8DC; }
.md-list__meta { font-family: var(--md-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--md-text-faint); }
.md-list__row.is-critical { margin: 0 -14px; padding: 16px 14px; border-bottom: 0;
  background: var(--md-red-bg); box-shadow: 0 0 0 1px var(--md-red-border); }
.md-list__row.is-critical .md-list__idx { color: var(--md-red-2); }
.md-list__row.is-critical .md-list__name { color: var(--md-text-strong); }
.md-list__row.is-critical .md-list__hint { display: block; margin-top: 4px;
  font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--md-red-3); }

/* ── Сетка шагов (экран 2) ──────────────────────────── */
.md-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--md-line); }
.md-step { background: var(--md-bg); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.md-step__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.md-step__idx { font-family: var(--md-font-display); font-weight: 900; font-size: 44px; color: rgba(255,255,255,.14); }
.md-step__spacer { flex: 1; min-height: 8px; }
.md-step__meta { font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .1em; color: var(--md-text-faint); }
/* Ровно одна карточка на секцию — ключевая */
.md-step.is-key { background: linear-gradient(180deg, rgba(255,59,59,.10), rgba(255,59,59,.04));
  box-shadow: inset 0 0 0 1px var(--md-red-border); }
.md-step.is-key .md-step__idx { color: rgba(255,90,90,.4); }
.md-step.is-key .md-body { color: var(--md-red-ink); }
.md-step.is-key .md-step__meta { color: var(--md-red-3); }
.md-step.is-key .md-mono { color: var(--md-red-2); }

/* ── Экран 2: раскладка ─────────────────────────────── */
.md-process { position: relative; display: flex; flex-direction: column; padding: 64px var(--md-pad-x) 56px; }
.md-process__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.md-process__head-left { display: flex; flex-direction: column; gap: 20px; }
.md-process__title { font-size: 12px; letter-spacing: .24em; }
.md-process__lead { max-width: 420px; padding-bottom: 8px; margin: 0; }
.md-process .md-steps { margin-top: 56px; }
.md-process__foot { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.md-process__foot .md-lead { max-width: 560px; margin: 0; }

/* ── «Мои цифры» ────────────────────────────────────── */
.md-stats { display: flex; align-items: flex-end; gap: 36px; padding: 20px 0 28px; border-top: 1px solid var(--md-line); }
.md-stats__label { font-family: var(--md-font-mono); font-size: 10px; letter-spacing: .22em; color: var(--md-text-faint); width: 70px; line-height: 1.5; padding-bottom: 6px; flex: none; }
.md-stats__items { display: flex; gap: 38px; flex-wrap: wrap; }
.md-stats__spacer { flex: 1; }
.md-stat { display: flex; flex-direction: column; gap: 5px; }
.md-stat__cap { font-family: var(--md-font-mono); font-size: 10px; letter-spacing: .18em; color: var(--md-text-faint); }

/* ── Мобильное липкое меню (глобальный элемент) ─────── */
.md-tapbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; gap: 8px; padding: 12px 14px 16px;
  background: rgba(10,11,13,.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.12); }
.md-tapbar__cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; background: var(--md-cta); color: var(--md-cta-ink);
  font-family: var(--md-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-decoration: none; }
.md-tapbar__book { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px;
  border: 1px solid rgba(255,59,59,.45); color: var(--md-red-2);
  font-family: var(--md-font-mono); font-size: 11px; letter-spacing: .12em; text-decoration: none; }
.md-tapbar__icon { width: 46px; min-height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
/* На десктопе действия живут в шапке — липкое меню только на мобайле */
@media (min-width: 761px) { .md-tapbar { display: none; } }
@media (max-width: 760px) { .md-has-tapbar { padding-bottom: var(--md-tapbar-h); } }

/* ── Адаптив ────────────────────────────────────────── */
.md-two-col { display: grid; grid-template-columns: 1fr var(--md-panel-w); min-height: 0; }
.md-hide-sm { display: inline; }
.md-only-sm { display: none; }

/* Промежуточные ширины: шапка не влезает целиком — прячем меню,
   мессенджеры оставляем иконками (подпись скрыта), CTA не рвём */
@media (max-width: 1100px) {
  .md-nav { display: none; }
  .md-header-actions > a { padding: 0 16px; font-size: 0; letter-spacing: 0; }
  .md-header-actions > a.md-btn--cta-ghost { padding: 0 22px; font-size: 11px; letter-spacing: .16em; }
  .md-header-actions > a svg { width: 20px; height: 20px; }
}
@media (max-width: 1200px) {
  .md-two-col { grid-template-columns: 1fr; }
  .md-panel { border-left: 0; border-top: 1px solid var(--md-line); padding: 32px var(--md-pad-x); }
  .md-steps { grid-template-columns: repeat(2, 1fr); }
  .md-hero { min-height: 0; }
  .md-hero__left { padding: 44px var(--md-pad-x) 0; }
}
@media (max-width: 1024px) {
  :root { --md-pad-x: 44px; }
}
@media (max-width: 700px) {
  .md-steps { grid-template-columns: 1fr; gap: 10px; background: transparent; }
  .md-step { border: 1px solid var(--md-line); padding: 15px; gap: 6px; }
  .md-step__idx { font-size: 19px; }
}
@media (max-width: 760px) {
  :root { --md-pad-x: var(--md-pad-x-mobile); }
  .md-header { padding-left: var(--md-pad-x-mobile); }
  .md-header .md-nav { display: none; }
  /* Ниже 760px действия шапки уходят целиком, включая лайм-CTA: то же действие даёт тапбар,
     а два лайма в одном экране нарушили бы правило «один CTA на экран». В макете 390×844
     шапка тоже сведена к логотипу. Между 1100 и 760px CTA остаётся в шапке — там тапбара нет. */
  .md-header-actions { display: none; }
  .md-logo { font-size: 13px; padding: 18px 0; }
  .md-kanji { font-size: 240px; max-width: 100%; }
  .md-eyebrow { font-size: 9px; letter-spacing: .2em; }
  .md-h1 { font-size: 42px; line-height: .92; }
  .md-h1--glow { line-height: .96; text-shadow: 0 0 10px rgba(255,60,66,.9), 0 0 34px rgba(255,40,48,.6); }
  .md-h2 { font-size: 38px; line-height: .94; }
  .md-h3 { font-size: 16px; }
  .md-slab { padding: 6px 12px; font-size: 10px; letter-spacing: .14em; }
  .md-lead { font-size: 14px; line-height: 1.55; }
  .md-list__name { font-size: 13px; }
  /* Решения из макета 390×844 */
  .md-hide-sm { display: none; }
  .md-only-sm { display: block; }
  .md-kanji--hero { display: none; }
  .md-kanji--hero-sm { display: block; }
  .md-list__meta { display: none; }
  /* Бейдж «診断 // ДИАГНОСТИКА» шире прежнего «АУДИТ · 5 ДНЕЙ»: на 390px он вставал
     во вторую колонку и рвал иероглиф пополам. Даём строке переноситься целиком. */
  .md-panel__head-row { flex-wrap: wrap; row-gap: 6px; }
  .md-panel__title, .md-panel__badge { white-space: nowrap; }
  .md-panel__actions { flex-direction: column; }
  .md-panel__actions .md-btn { width: 100%; }
  .md-hero__left { padding: 22px var(--md-pad-x-mobile) 0; }
  .md-headline { gap: 8px; }
  .md-stats { flex-direction: row; gap: 14px; padding: 12px 0; align-items: flex-end; }
  .md-stats__label { width: 44px; font-size: 8px; letter-spacing: .2em; }
  .md-stats__items { gap: 18px; }
  .md-num { font-size: 14px; }
  .md-stat__cap { font-size: 8px; letter-spacing: .14em; }
  .md-hero__scroll { display: none; }
  .md-process { padding: 44px var(--md-pad-x-mobile) 40px; }
  .md-process .md-steps { margin-top: 28px; }
  .md-process__foot { margin-top: 28px; }
  .md-btn { padding: 15px 20px; font-size: 11px; }
}

/* Короткий вьюпорт. Одних отступов не хватило: собственная высота героя на 1440 — 814px,
   а на ноутбуке с панелью закладок кадр 740–780px. Здесь ужимается только вертикальный ритм
   и кегль h1 привязывается к высоте окна (min с vh) — на экранах от 820px и выше не
   срабатывает ничего из этого, макет 1440×900 остаётся ровно таким, как утверждён. */
@media (min-width: 761px) and (max-height: 820px) {
  .md-hero__left { padding-top: 30px; }
  .md-hero__spacer { min-height: 0; }
  .md-headline { margin-top: 14px; gap: 8px; }
  .md-hero__lead { margin-top: 16px; }
  .md-hero__actions { margin-top: 16px; }
  .md-h1 { font-size: min(clamp(52px, 7.8vw, 112px), 13vh); }
  .md-slab { padding: 6px 14px; }
  .md-stats { padding: 12px 0 16px; }
  .md-panel { padding: 0 32px; }
  /* Панель держит высоту грид-строки, поэтому ужимается вместе с левой колонкой. */
  .md-panel__more { margin-top: 12px; padding-top: 10px; }
  .md-list__row { padding: 12px 0; }
  .md-list__row.is-critical { padding: 12px 14px; }
}
/* Совсем низкие окна (1280×640 и подобные): вторая ступень того же сжатия — на первой
   не хватало 11px, строка «МОИ ЦИФРЫ» уходила под сгиб ровно на эту величину. */
@media (min-width: 761px) and (max-height: 700px) {
  .md-hero__left { padding-top: 24px; }
  .md-h1 { font-size: min(clamp(52px, 7.8vw, 112px), 12vh); }
  .md-stats { padding: 10px 0 12px; }
  .md-panel__head { padding-bottom: 12px; }
  .md-panel__more { margin-top: 10px; padding-top: 8px; }
  .md-list__row { padding: 9px 0; }
  .md-list__row.is-critical { padding: 10px 14px; }
  .md-out { padding: 12px 14px; }
  .md-panel__actions { margin-top: 10px; }
}
/* Третья ступень — только пока на экране cookie-полоса. Она забирает 52px, и на окне 640px
   герою остаётся 588: собственной высоты он не сжимает и уезжал бы под полосу. Правила висят
   на body.ckb-on, поэтому после «Принять» сжатие снимается тем же кликом, что и полоса,
   и на обычных окнах его нет вовсе. Media-запросу переменная --md-cookie-h недоступна —
   отсюда отдельный класс, а не calc в условии. */
@media (min-width: 761px) and (max-height: 700px) {
  body.ckb-on .md-hero__left { padding-top: 16px; }
  body.ckb-on .md-h1 { font-size: min(clamp(52px, 7.8vw, 112px), 10.4vh); }
  body.ckb-on .md-headline { gap: 6px; margin-top: 12px; }
  body.ckb-on .md-hero__lead { margin-top: 12px; }
  body.ckb-on .md-hero__actions { margin-top: 12px; }
  body.ckb-on .md-stats { padding: 6px 0 6px; }
  /* Высоту первого экрана держит ПАНЕЛЬ, а не левая колонка: в грид-строке они равны,
     и сжимать один левый столбец бессмысленно — строка остаётся высотой с панель.
     Поэтому здесь же ужимается сам «прибор»: строки списка, блок «НА ВЫХОДЕ» и отбивки. */
  body.ckb-on .md-panel__head { padding-bottom: 10px; }
  body.ckb-on .md-panel__more { margin-top: 8px; padding-top: 6px; }
  body.ckb-on .md-list__row { padding: 5px 0; }
  body.ckb-on .md-list__row.is-critical { padding: 8px 14px; }
  body.ckb-on .md-out { padding: 9px 14px; }
  body.ckb-on .md-panel__actions { margin-top: 8px; }
}