/*
 * Целематика — стили сайта.
 * Цвета, шрифт, отступы и скругления — токены дизайн-системы «Целематика».
 * Компоненты с префиксом cm- повторяют набор дизайн-системы, остальные классы — разделы сайта.
 *
 * Содержание:
 *  1. Шрифт
 *  2. Токены
 *  3. Базовые правила
 *  4. Сетка и типографика
 *  5. Компоненты дизайн-системы (cm-*)
 *  6. Шапка и подвал
 *  7. Главная страница
 *  8. Внутренние страницы
 *  9. Адаптив
 */

/* 1. Шрифт — Onest, SIL Open Font License 1.1 (assets/fonts/OFL.txt) */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Токены */
:root {
  --brand-blue: #0050ff;
  --brand-blue-deep: #0044ff;
  --brand-sky: #12b6ec;
  --brand-teal: #00cdaf;
  --brand-ink: #0b2045;

  --surface-100: #ffffff;
  --surface-200: #f3f6fb;
  --surface-300: #e6ecf5;
  --surface-inverse: #0b2045;
  --border: #d6deeb;
  --border-strong: #6c7c9e;

  --text-primary: #0b2045;
  --text-secondary: #4a5a78;
  --text-inverse: #ffffff;

  --accent: #0050ff;
  --accent-hover: #003fd1;
  --on-accent: #ffffff;
  --accent-subtle: #e8efff;
  --focus-ring: #0050ff;
  --link-quiet: #2a4a9e;   /* спокойный синий для второстепенных ссылок (подвал); 8,2:1 на белом */

  --success: #007361;
  --success-subtle: #e3f6f2;
  --warning: #a85600;
  --warning-subtle: #fdf0e1;
  --danger: #c8262e;
  --danger-subtle: #fde9ea;
  --on-danger: #ffffff;

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Фирменный градиент: из левого нижнего угла в правый верхний. Не класть на него текст. */
  --brand-gradient: linear-gradient(45deg, var(--brand-teal) 0%, var(--brand-sky) 48%, var(--brand-blue-deep) 100%);
  --tint-gradient: linear-gradient(45deg, var(--success-subtle) 0%, var(--accent-subtle) 100%);
}

/* 3. Базовые правила */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--surface-100);
}
img { max-width: 100%; }
a:not([class]) { color: var(--accent); }
a:not([class]):hover { color: var(--accent-hover); }
a:not([class]):focus-visible,
summary:focus-visible,
[role="tabpanel"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4. Сетка и типографика */
.container { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-8); scroll-margin-top: 72px; }
.section--alt { background: var(--surface-200); }
.section--flush-top { padding-top: 0; }

.stack { display: flex; flex-direction: column; gap: var(--space-7); }
.stack--md { gap: var(--space-6); }
.stack--sm { gap: var(--space-4); }
.stack--xs { gap: var(--space-2); }

.split { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; }
.split--top { align-items: flex-start; }

.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 320px), 100%), 1fr)); }
.grid--280 { --grid-min: 280px; }
.grid--300 { --grid-min: 300px; }
.grid--360 { --grid-min: 360px; }
.grid--420 { --grid-min: 420px; }
.grid--480 { --grid-min: 480px; }
.grid--start { align-items: start; }

.title-xl {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.title-lg {
  margin: 0;
  max-width: 880px;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.title-md { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.lead { margin: 0; max-width: 720px; font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.kicker { margin: 0; max-width: 800px; font-size: 24px; line-height: 32px; font-weight: 600; text-wrap: balance; }
.caption { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.muted { margin: 0; color: var(--text-secondary); }
.accent-text { color: var(--accent); }
.text-strong { margin: 0; max-width: 600px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* 5. Компоненты дизайн-системы (cm-*) */
.cm-glyph { flex: none; display: block; }

.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cm-btn--sm { height: 36px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.cm-btn--md { height: 44px; padding: 0 var(--space-4); font-size: 14px; line-height: 20px; }
.cm-btn--lg { height: 52px; padding: 0 var(--space-5); font-size: 16px; line-height: 24px; }
.cm-btn--full { width: 100%; }
.cm-btn--primary { background: var(--accent); color: var(--on-accent); }
.cm-btn--primary:hover { background: var(--accent-hover); }
.cm-btn--secondary { background: var(--surface-100); color: var(--text-primary); border-color: var(--border-strong); }
.cm-btn--secondary:hover { background: var(--surface-300); }
.cm-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.cm-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.cm-badge--neutral { background: var(--surface-300); color: var(--text-primary); }
.cm-badge--success { background: var(--success-subtle); color: var(--success); }

.cm-alert {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid; border-radius: var(--radius-md); color: var(--text-primary);
}
.cm-alert__icon { margin-top: 2px; }
.cm-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cm-alert__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.cm-alert__text { font-size: 14px; line-height: 20px; }
.cm-alert--info { background: var(--accent-subtle); border-color: var(--accent); }
.cm-alert--info .cm-alert__icon { color: var(--accent); }
.cm-alert--success { background: var(--success-subtle); border-color: var(--success); }
.cm-alert--success .cm-alert__icon { color: var(--success); }

.cm-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary);
}
.cm-card--default { background: var(--surface-100); border: 1px solid var(--border); }
.cm-card--subtle { background: var(--surface-200); border: 1px solid transparent; }
.cm-card--inverse { background: var(--surface-inverse); color: var(--text-inverse); border: 1px solid transparent; --focus-ring: var(--text-inverse); }
.cm-card--link { transition: border-color .15s, background-color .15s; }
.cm-card--default.cm-card--link:hover { border-color: var(--border-strong); }
.cm-card--link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cm-card__content { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.cm-card__eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--accent); }
.cm-card__title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.cm-card__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.cm-card--inverse .cm-card__text { color: var(--text-inverse); }

.cm-tabs__list {
  display: flex; gap: var(--space-5); overflow-x: auto; overflow-y: hidden;
  box-shadow: inset 0 -1px 0 var(--border); scrollbar-width: thin;
}
.cm-tab {
  position: relative; padding: var(--space-3) 0; background: none; border: 0;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.cm-tab:hover { color: var(--text-primary); }
.cm-tab[aria-selected="true"] { color: var(--accent); }
.cm-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: var(--radius-full); background: var(--accent);
}
.cm-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }

.cm-choice { display: flex; align-items: flex-start; gap: var(--space-3); }
.cm-choice__text { display: flex; flex-direction: column; font-size: 16px; line-height: 24px; color: var(--text-primary); cursor: pointer; }
.cm-choice__hint { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.cm-choice--disabled .cm-choice__text { cursor: not-allowed; }
.cm-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 40px; height: 24px; border-radius: var(--radius-full); cursor: pointer;
  background: var(--border-strong); border: 2px solid var(--border-strong);
  transition: background-color .15s, border-color .15s;
}
.cm-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--radius-full); background: var(--surface-100); transition: transform .15s;
}
.cm-switch:checked { background: var(--accent); border-color: var(--accent); }
.cm-switch:checked::after { transform: translateX(16px); }
.cm-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cm-switch:disabled { cursor: not-allowed; opacity: .6; }

.cm-logo { display: inline-flex; align-items: center; line-height: 0; }
.cm-logo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }
.cm-logo__img { display: block; width: 165px; height: 32px; }

/* 6. Шапка и подвал */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--surface-100); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-4); }
.site-header__action { margin-left: auto; flex: none; }
.site-header__login-icon { display: none; }

.site-footer { background: var(--surface-100); border-top: 1px solid var(--border); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6) var(--space-7); padding-block: var(--space-6);
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.site-footer__legal { display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.site-footer__company { font-weight: 600; color: var(--text-primary); }
.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: 14px; line-height: 20px; }
.site-footer__nav a {
  padding: var(--space-1) 0; color: var(--link-quiet);
  text-decoration-color: rgba(42, 74, 158, .35); text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.site-footer__nav a:hover { color: var(--accent); text-decoration-color: currentColor; }
.site-footer__nav a[aria-current="page"] { color: var(--text-primary); text-decoration: none; }

/* 7. Главная страница */

/* Первый экран */
.hero { background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface-100) 80%); }
.hero__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero__lead { max-width: 600px; }
.hero__visual { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.gradient-frame { background: var(--brand-gradient); border-radius: var(--radius-xl); padding: var(--space-5); }
.heatmap-card {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5);
  background: var(--surface-100); border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(11, 32, 69, .45);
}
.heatmap-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.heatmap-card__title { font-weight: 600; }
.heatmap-card__badges { display: flex; gap: var(--space-2); }
.scroll-x { overflow-x: auto; }

.heatmap {
  display: grid; gap: 4px; min-width: 420px;
  grid-template-columns: minmax(124px, 1.6fr) repeat(6, minmax(48px, 1fr));
  font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.heatmap__cell {
  padding: 8px 6px; border: 1px solid transparent; border-radius: var(--radius-sm);
  text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heatmap__cell--head { font-weight: 500; color: var(--text-secondary); }
.heatmap__cell--row { text-align: left; white-space: normal; font-weight: 500; }
.heatmap__cell--macro { font-weight: 700; color: var(--accent); }
.heatmap__cell--self { font-weight: 500; background: var(--surface-200); color: var(--text-secondary); }

/* Шкала силы связи — общие цвета для таблицы, легенды и подсказки «Как читать результат» */
.tone-vstrong { background: var(--success); color: var(--text-inverse); }
.tone-strong { background: var(--brand-teal); color: var(--brand-ink); }
.tone-mid { background: var(--success-subtle); color: var(--success); }
.tone-weak { background: var(--surface-300); color: var(--text-primary); }
.tone-vweak { background: var(--surface-100); color: var(--text-secondary); border-color: var(--border) !important; }
.tone-neg { background: var(--danger-subtle); color: var(--danger); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__swatch { width: 12px; height: 12px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.legend__swatch--mid { border-color: var(--success); }
.legend__swatch--neg { border-color: var(--danger); }

.facts {
  list-style: none; margin: 0; padding: var(--space-5);
  display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.facts__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.facts__icon { flex: none; color: var(--accent); }

/* Проблема */
.problem__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.problem__text .lead { max-width: 640px; }
.stat {
  flex: 0 1 400px; min-width: 0; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--tint-gradient); border-radius: var(--radius-xl);
}
.stat__value { font-size: 88px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }
.stat__label { font-size: 18px; line-height: 28px; }

/* Микро- и макроцели */
.def-card {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.def-card--accent { background: var(--accent-subtle); border-color: var(--accent); }
.def-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.def-list dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.def-list dd { margin: 0; }

.insight { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.insight .lead { max-width: 600px; }
.funnel {
  margin: 0;
  flex: 1 1 480px; min-width: 0; padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.funnel__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.funnel__art { position: relative; width: 100%; }
.funnel__art img { display: block; width: 100%; height: auto; }
.funnel__macro {
  position: absolute; left: 22.5%; width: 54.4%; top: 89.2%; height: 10.8%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(12px, 1.2vw, 16px); line-height: 1.2; font-weight: 600; color: var(--text-inverse);
}

/* Неожиданные микроцели */
.group-card { display: flex; flex-direction: column; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.group-card__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.group-card__icon { flex: none; width: clamp(48px, 14vw, 72px); height: auto; }
.group-card__title {
  margin: 0; min-width: 0; font-size: clamp(20px, 5.4vw, 24px); line-height: 1.3; font-weight: 600;
  overflow-wrap: break-word; hyphens: auto;
}
.pair-row {
  display: grid; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.pair-row__term { font-weight: 600; }
.pair-row__desc { color: var(--text-secondary); }

/* Как это работает */
.gradient-line { height: 6px; border-radius: var(--radius-full); background: var(--brand-gradient); }
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.step__num {
  width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--tint-gradient);
  color: var(--accent); font-size: 24px; line-height: 56px; font-weight: 700; text-align: center;
}
.panel {
  display: flex; flex-direction: column; padding: var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.panel__title { margin-bottom: var(--space-4); }
.panel__note { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.scale-row {
  display: grid; gap: var(--space-2) var(--space-5); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.scale-row__name { font-weight: 600; }
.pill {
  display: inline-block; min-width: 104px; padding: 3px 11px; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Наборы по нишам */
.niche-col {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.niche-col--accent { background: var(--accent-subtle); border-color: var(--accent); }
.niche-col__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.niche-col--accent .niche-col__label { color: var(--accent); }
.niche-col ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-1); }

/* Универсальные наборы */
.sets { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.set-row {
  display: grid; gap: var(--space-2) var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.set-row p { margin: 0; }

/* Пять признаков */
.criteria-intro { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.criteria { flex: 1.4 1 520px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.criterion {
  display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.criterion__num {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--accent-subtle); color: var(--accent);
  font-size: 18px; line-height: 40px; font-weight: 700; text-align: center;
}
.criterion__body { display: flex; flex-direction: column; gap: var(--space-1); }
.criterion__title { font-size: 18px; line-height: 28px; font-weight: 600; }
.criterion__text { color: var(--text-secondary); }

/* Тарифы */
.pricing { background: linear-gradient(180deg, var(--surface-100) 0%, var(--accent-subtle) 100%); }
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.plan__bar { height: 8px; background: var(--brand-gradient); }
.plan__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan__price { display: flex; flex-direction: column; gap: var(--space-2); }
.plan__amount-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.plan__amount { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.plan__period { font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.plan__facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.plan__facts dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.plan__facts dd { margin: 0; }
.plan__facts .plan__accounts { font-size: 18px; line-height: 28px; font-weight: 600; }
.plan__action { margin-top: auto; display: flex; }
.pricing__note { max-width: 720px; }

/* Вопросы и ответы */
.faq-title { flex: 1 1 280px; min-width: 0; }
.faq { flex: 2.4 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; list-style: none; cursor: pointer;
  font-size: 18px; line-height: 28px; font-weight: 600;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { flex: none; color: var(--text-secondary); transition: transform .25s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item.is-closing .faq__chev { transform: none; }
.faq__body { overflow: hidden; }
.faq__a { margin: 0; max-width: 680px; padding-bottom: var(--space-5); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .faq__chev { transition: none; }
}

/* Финальный призыв */
.cta-band {
  --focus-ring: var(--text-inverse);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-7);
  padding: clamp(32px, 7vw, 64px) clamp(24px, 5vw, 48px);
  background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-xl);
}
.cta-band__text { flex: 1.5 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cta-band__lead { margin: 0; max-width: 600px; font-size: 18px; line-height: 28px; }
.cta-band__note { font-size: 13px; line-height: 18px; font-weight: 500; }
.cta-band__art { flex: 1 1 280px; min-width: 0; max-width: 360px; margin: 0 auto; }
.cta-band__art img { display: block; width: 100%; height: auto; }

/* 8. Внутренние страницы */
.page-hero { background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface-100) 100%); }
.page-hero__inner { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-7); }
.page-hero__head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; }
.page-hero .lead { max-width: 72ch; }
.page-title {
  margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; font-weight: 700;
  letter-spacing: -0.02em; text-wrap: balance;
}

.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: 14px; line-height: 20px; font-weight: 500;
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumbs__sep { flex: none; color: var(--text-secondary); }
.breadcrumbs [aria-current="page"] { color: var(--text-secondary); }

.page-main { padding-top: var(--space-7); padding-bottom: var(--space-8); }

/* Текст статей и документов */
.prose { max-width: 72ch; display: flex; flex-direction: column; gap: var(--space-5); }
.prose > * { margin: 0; }
.prose h2 { margin-top: var(--space-3); font-size: clamp(26px, 6vw, 32px); line-height: 1.25; font-weight: 700; }
.prose h3 { margin-top: var(--space-2); font-size: 24px; line-height: 32px; font-weight: 600; }
.prose ul, .prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: var(--space-2); }
.prose ol { gap: var(--space-3); }
.prose figure { margin-block: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.prose figcaption { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.prose dl { display: flex; flex-direction: column; gap: var(--space-2); }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 var(--space-2); }
.img-placeholder {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--tint-gradient); border-radius: var(--radius-lg);
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-secondary);
}
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.prose thead tr { background: var(--surface-200); }
.prose th { padding: var(--space-3) var(--space-4); text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.prose td { padding: var(--space-3) var(--space-4); vertical-align: top; }
.prose tbody tr { border-top: 1px solid var(--border); }
.prose .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose .strong { font-weight: 600; }

/* Место, которое нужно заполнить перед публикацией */
.todo { padding: 0 4px; background: var(--warning-subtle); color: var(--text-primary); border-radius: var(--radius-sm); }

.article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.settings { display: flex; flex-direction: column; gap: var(--space-5); }
.settings__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.settings__row { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }

/* 9. Адаптив */
@media (max-width: 720px) {
  .section { padding-block: var(--space-7); }
  .site-header__inner { gap: var(--space-4); padding-block: var(--space-3); padding-inline: var(--space-4); }
}
@media (max-width: 600px) {
  /* На телефоне «Войти» — квадратная кнопка с иконкой аккаунта */
  .site-header__login { width: 44px; height: 44px; padding: 0; }
  .site-header__login-text { display: none; }
  .site-header__login-icon { display: block; }
}