/* Страницы «О методике» (новый каркас стайлгайда v1.2, раздел
   «Страницы методик»). Браузерный CSS: oklch/color-mix допустимы,
   в PDF через WeasyPrint этот файл не попадает.
   Эталон разметки: docs/tasks/team-satisfaction/team-satisfaction-methodology-site.html */

:root {
  /* ─── Токены «Методики» — копия блока из стайлгайда без изменений ── */
  --bg: oklch(0.955 0.004 255);        /* ≈ #F0F0F3 */
  --surface: oklch(0.982 0.003 255);   /* ≈ #FAFBFC */
  --surface-warm: var(--surface);
  --fg: oklch(0.205 0.02 265);         /* ≈ #131721 */
  --fg-2: var(--fg);
  --muted: oklch(0.485 0.015 265);     /* ≈ #5B5F68 */
  --meta: var(--muted);
  --border: oklch(0.905 0.006 255);    /* ≈ #DDE0E4 */
  --border-soft: var(--border);

  --accent: #2f6feb;
  --accent-on: #ffffff;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  --accent-tint-78: color-mix(in oklab, var(--accent), transparent 78%);
  --accent-tint-88: color-mix(in oklab, var(--accent), transparent 88%);
  --accent-tint-92: color-mix(in oklab, var(--accent), transparent 92%);
  --accent-tint-94: color-mix(in oklab, var(--accent), transparent 94%);

  --success: #17a34a;
  --warn: #eab308;
  --danger: #dc2626;

  /* Токены шкалы данных страницы методики (из стайлгайда v1.1):
     цвет полосы кодирует оценку, --accent в данных не используется. */
  --fill-ok: var(--success);
  --fill-mid: oklch(0.795 0.170 85.0);
  --fill-low: oklch(0.680 0.165 55.0);

  --font-display: "Manrope", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --leading-body: 1.5;
  --leading-tight: 1.2;
  --tracking-display: -0.01em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  --motion-fast: 150ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --container-max: 1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--space-1); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-gutter-desktop);
  padding-right: var(--container-gutter-desktop);
}

/* ─── Шапка (общая с лендингом: background/sticky/blur/цвета — 1:1
   с landing.css, синхронизировать оба места при правке). Одно намеренное
   отличие ниже — НЕ баг, оставлять при синхронизации:
   .header-inner: min-height вместо фиксированного height — на лендинге
   якорная nav-links на мобильном скрывается целиком (только якоря на
   той же странице), здесь — реальные пункты общей шапки (.nav-global/
   .nav-auth, всегда display:flex, без display:none до 640px — инцидент,
   меню пропадало на мобильном ниже 759px, уже чинили), прятать нечем,
   поэтому они переносятся на вторую строку и шапке нужно расти. ─────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg), transparent 8%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
}
.logo:hover { text-decoration: none; color: var(--fg); }
.logo svg { height: 28px; width: auto; }

/* Общий компонент шапки (_nav.html) — копия блока из landing.css,
   синхронизировать оба места при правке (см. комментарий там). */
.nav-global {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.nav-global a {
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.nav-global a:hover { color: var(--accent); text-decoration: none; }
.nav-global a.active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-auth {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}
.nav-auth-link {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.nav-auth-link:hover { color: var(--fg); text-decoration: none; }
.nav-auth-link.active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-outline.active { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
/* .btn.btn-pill — компаунд-селектор, специфичность выше базового .btn,
   форма не зависит от порядка правил в файле (см. app.css/landing.css). */
.btn.btn-pill { border-radius: var(--radius-pill); padding: 8px var(--space-5); }
/* Кнопка «+ Новая диагностика» для вошедших (ТЗ unified-measure-launch) —
   синхронизировать с app.css/style.css/landing.css. */
.nav-new-measure { padding: 6px 12px; font-size: 12.5px; white-space: nowrap;
  font-weight: 700; }
.account-menu { position: relative; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 4px var(--space-2) 4px 4px;
  font-family: inherit;
  color: var(--fg);
  cursor: pointer;
}
.account-trigger:hover { background: var(--surface); }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.account-name {
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-chevron { color: var(--muted); flex-shrink: 0; }
.account-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-raised);
  padding: var(--space-1);
  z-index: 20;
}
.account-email {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
  word-break: break-all;
}
.account-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.account-item:hover {
  background: color-mix(in oklab, var(--accent), transparent 92%);
  text-decoration: none;
}
.account-item-danger { color: var(--danger); }
.account-item-danger:hover { background: color-mix(in oklab, var(--danger), transparent 92%); }

/* ─── Кнопки и ссылки (из стайлгайда) ───────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
  min-height: 44px;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; color: var(--accent-on); }
.btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); }

/* ─── Герой страницы методики: асимметрия, без маркер-подсветки ── */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-12) 0 var(--section-y-desktop);
}
.hero-grid {
  display: block;
}
.eyebrow {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  color: var(--fg);
}
.hero-lead {
  color: var(--muted);
  font-size: var(--text-lg);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}
.fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.fact-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg);
}
.hero-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.microcopy { font-size: var(--text-sm); color: var(--muted); margin: var(--space-3) 0 0; }

/* Мини-срез результатов справа в герое */
.demo-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
}
.slice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elev-raised);
}
.slice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.slice-card-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
}
.slice-caption {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: var(--space-4) 0 0;
}

/* ─── Липкая subnav ─────────────────────────────────────────────── */
.subnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.subnav-inner {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  font-size: var(--text-sm);
}
.subnav a {
  color: var(--muted);
  font-weight: 500;
  padding: var(--space-3) 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--fg); text-decoration: none; }
.subnav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Разделы: кикер с CSS-счётчиком, лид до 64ch ───────────────── */
main { counter-reset: mp-section; }
.mp-section {
  padding-top: var(--section-y-desktop);
  padding-bottom: var(--section-y-desktop);
}
.mp-section + .mp-section { border-top: 1px solid var(--border); }
.mp-kicker {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.mp-kicker::before {
  counter-increment: mp-section;
  content: counter(mp-section, decimal-leading-zero) " · ";
}
.mp-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-3);
}
.mp-lead {
  color: var(--muted);
  font-size: var(--text-lg);
  max-width: 64ch;
  margin: 0 0 var(--space-8);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 760px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.mp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.mp-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.mp-card p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* ─── Шкалы и данные (образцы из стайлгайда v1.1) ───────────────── */
.mp-scale { display: flex; gap: 6px; }
.mp-scale span {
  flex: 1; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 0;
}
.mp-scale span.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.mp-scale-ends {
  display: flex; justify-content: space-between; gap: var(--space-2);
  margin-top: 6px; font-size: 11px; color: var(--muted); letter-spacing: 0.01em;
}
.mp-na {
  display: inline-flex;
  margin-top: var(--space-3);
  padding: 6px var(--space-4);
  border: 1px dashed var(--muted);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--muted);
}
/* Анатомия шкалы (блок «Формат»): определения, не интерфейс анкеты */
.scale-anatomy {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.sa-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.sa-cell .sa-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.sa-cell .sa-label { font-size: 12px; color: var(--muted); line-height: 1.4; }
.sa-cell.sa-pos { background: var(--accent-tint-94); border-color: var(--accent-tint-78); }
.sa-cell.sa-pos .sa-num { color: var(--accent); }
.sa-note {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm); color: var(--muted);
}
.sa-note .mp-na { margin-top: 0; }
@media (max-width: 759px) {
  .scale-anatomy { grid-template-columns: 1fr; }
  .sa-cell { flex-direction: row; justify-content: flex-start; padding: var(--space-3) var(--space-4); }
  .sa-cell .sa-num { font-size: 18px; min-width: 24px; text-align: center; }
}

/* Колонка лейбла — переменная --label-col (объявлена на .mock), а не magic
   number: 120px было тесно самому длинному слову в системе («психотравмирующих»,
   подшкала Бойко-84, ~125-135px при 13px/Inter) — слово наезжало на трек.
   190px даёт запас, перенос при этом остаётся по границам слов, а не по
   буквам (word-break/hyphens намеренно НЕ используются — это выглядит как
   костыль и хуже читается, чем более широкая колонка). */
.mp-row { display: grid; grid-template-columns: var(--label-col) 1fr 34px; gap: 10px; align-items: center; margin-bottom: 10px; }
.mp-row .lbl { font-size: 13px; overflow-wrap: normal; word-break: normal; }
.mp-row .track { height: 10px; min-width: 40px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.mp-row .track i { display: block; height: 100%; border-radius: 5px; }
.mp-fill-ok { background: var(--fill-ok); }
.mp-fill-mid { background: var(--fill-mid); }
.mp-fill-low { background: var(--fill-low); }
.mp-row .val { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-align: right; }
.mp-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.mp-tag { font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 4px 10px; border: 1px solid; }
.mp-tag.hi { background: color-mix(in oklab, var(--success), transparent 90%); color: oklch(0.380 0.100 150.0); border-color: color-mix(in oklab, var(--success), transparent 65%); }
.mp-tag.lo { background: color-mix(in oklab, var(--warn), transparent 88%); color: oklch(0.460 0.090 75.0); border-color: color-mix(in oklab, var(--fill-low), transparent 55%); }

/* ─── Моки Spotify Health Check (цвет + тренд) ───────────────────── */
.spotify-row { grid-template-columns: var(--label-col) 1fr 40px; }
.spotify-dots { display: flex; gap: 5px; align-items: center; }
.spotify-dots .sdot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
}
.spotify-dots .sdot.green { background: var(--success); border-color: var(--success); }
.spotify-dots .sdot.yellow { background: var(--warn); border-color: var(--warn); }
.spotify-dots .sdot.red { background: var(--danger); border-color: var(--danger); }
.spotify-row .trend { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: right; }

.spotify-choice, .spotify-trend {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.spotify-choice .sc-color, .spotify-trend .sc-trend {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-sm); color: var(--muted); font-weight: 500;
}
.spotify-choice .sc-color.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.spotify-choice .sc-color.green.on { background: var(--success); border-color: var(--success); color: white; }
.spotify-choice .sc-color.yellow.on { background: var(--warn); border-color: var(--warn); color: var(--fg); }
.spotify-choice .sc-color.red.on { background: var(--danger); border-color: var(--danger); color: white; }
.spotify-trend .sc-trend.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

/* ─── Мок демотивации (выбор факторов) ───────────────────────────── */
.demo-checklist { margin: 0; padding: 0; list-style: none; }
.demo-checklist li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--fg);
}
.demo-checklist li:last-child { border-bottom: none; }
.demo-checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--border); flex-shrink: 0; margin-top: 1px;
  background: var(--surface);
}
.demo-checkbox.on { background: var(--accent); border-color: var(--accent); }
.demo-checkbox.on::after {
  content: ""; display: block; width: 5px; height: 9px;
  border: solid var(--accent-on); border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin: 2px 0 0 5px;
}

/* ─── 02 · Измерения: точки, одна точка = один вопрос ───────────── */
.dims-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}
.dim-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.dim-card h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.dim-dots { display: flex; gap: 5px; align-items: center; }
.dim-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.dim-count { font-size: var(--text-xs); color: var(--muted); margin-left: var(--space-2); }

/* ─── 03/04 · Живые моки ────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.mock {
  --label-col: 190px; /* ширина колонки лейбла .mp-row/.spotify-row — общая
    точка правки для обеих раскладок (см. комментарий у .mp-row) */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.mock-progress { font-size: var(--text-xs); color: var(--muted); }
.mock-statement {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--space-5);
}
.why-list { margin: 0; padding: 0; list-style: none; }
.why-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  color: var(--fg);
}
.why-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.why-list li span { color: var(--muted); }

/* ─── 05 · Интерпретация: 4 карточки с номерами ─────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.step-card .num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
}
.step-card strong { font-size: var(--text-base); font-weight: 600; display: block; margin-bottom: var(--space-2); }
.step-card span { color: var(--muted); font-size: var(--text-sm); }

/* ─── 06 · Гарантии: сетка 2×2 с иконками ───────────────────────── */
.guarantee-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) { .guarantee-grid { grid-template-columns: 1fr 1fr; } }
.guarantee {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.guarantee-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint-92);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.guarantee h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.guarantee p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* ─── Дисклеймер и финальный CTA ────────────────────────────────── */
.disclaimer {
  border-left: 3px solid var(--border);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 64ch;
}
.disclaimer strong { color: var(--fg); font-weight: 600; }
.final-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-3);
}
.final-cta p { color: var(--muted); margin: 0 0 var(--space-6); }

/* ─── Подвал (общий с лендингом — 1:1 с landing.css) ────────────── */
.site-footer {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
}
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--fg); text-decoration: none; }
.footer-sep { color: var(--border); }
.footer-inner a.footer-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* плашка STAGE на не-прод контурах (как на лендинге) */
.stage-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--warn);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  line-height: 1.4;
}
.stage-banner + .site-header { top: 36px; }
.stage-banner ~ .subnav { top: 36px; }

/* ─── Каталог методик (/diagnostics) ───────────────────────────── */
.catalog-intro { padding: var(--space-12) 0 var(--space-8); }
.catalog-intro h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); }
.catalog-intro p { color: var(--muted); font-size: var(--text-lg); max-width: 64ch; }

.catalog-group { padding-bottom: var(--space-12); }
.catalog-group h2 { font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.catalog-group-note { color: var(--muted); margin: 0 0 var(--space-6); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.instrument-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.instrument-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px -8px color-mix(in oklab, var(--accent), transparent 65%);
}
.instrument-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); row-gap: 6px; }
.audience-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.audience-badge.personal { background: var(--accent-tint-92); color: var(--accent); }
.audience-badge.team { background: color-mix(in oklab, var(--success), white 88%); color: color-mix(in oklab, var(--success), black 15%); }
.privacy-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
}
.privacy-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.privacy-badge.anon { background: color-mix(in oklab, var(--muted), white 88%); color: var(--muted); }
.privacy-badge.named { background: color-mix(in oklab, var(--warn), white 82%); color: color-mix(in oklab, var(--warn), black 35%); }
.instrument-card h3 { font-size: var(--text-base); font-weight: 700; margin: 0; }
.instrument-card p { color: var(--muted); font-size: var(--text-sm); flex-grow: 1; margin: 0; }
.instrument-card-link { color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.instrument-card-link:hover { text-decoration: underline; }

/* ─── Адаптив ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .mp-section { padding-top: var(--section-y-tablet); padding-bottom: var(--section-y-tablet); }
  .container { padding-left: var(--container-gutter-tablet); padding-right: var(--container-gutter-tablet); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 759px) {
  .mp-section { padding-top: var(--section-y-phone); padding-bottom: var(--section-y-phone); }
  .container { padding-left: var(--container-gutter-phone); padding-right: var(--container-gutter-phone); }
  .hero { padding: var(--space-8) 0 var(--section-y-tablet); }
  .catalog-grid { grid-template-columns: 1fr; }
}